fix: re-publish with microbundle

package.json

@@ -6,6 +6,7 @@
   "source": "src/lib/index.ts",
   "main": "build/index.js",
   "module": "build/index.es.js",
+  "umd": "build/index.umd.js",
   "types": "build/index.d.ts",
   "files": [
     "build",
@@ -23,8 +24,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "NODE_ENV=production BABEL_ENV=production rollup -c",
-    "start": "NODE_ENV=development BABEL_ENV=development rollup -c -w",
+    "build": "microbundle build --jsx React.createElement --entry src/lib/index.ts --tsconfig tsconfig.lib.json --compress",
+    "start": "microbundle watch --jsx React.createElement --entry src/lib/index.ts --tsconfig tsconfig.lib.json --format modern --no-compress",
     "dev": "yarn run dokz:dev",
     "lint": "eslint src",
     "typecheck": "tsc --noEmit",
@@ -42,18 +43,9 @@
     "react-uid": "^2.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
     "@chakra-ui/core": "^0.8.0",
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
-    "@rollup/plugin-babel": "^5.2.1",
-    "@rollup/plugin-commonjs": "^15.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-url": "^5.0.1",
-    "@svgr/rollup": "^5.4.0",
     "@types/jest": "^26.0.14",
     "@types/node": "^14.11.5",
     "@types/react": "^16.9.51",
@@ -79,10 +71,6 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-icons": "^3.11.0",
-    "rollup": "^2.29.0",
-    "rollup-plugin-peer-deps-external": "^2.2.3",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.27.3",
     "typescript": "^4.0.3"
   },
   "resolutions": {

src/lib/ListBox/ListBox.tsx

@@ -12,7 +12,7 @@ const List = styled('ul', {
 
 const focusOptions: FocusManagerOptions = { wrap: true };
 
-const ListInner: React.FC = (props, ref) => {
+const ListInner: React.FC = (props) => {
   const { focusNext, focusPrevious } = useFocusManager();
 
   const handleKeyDown = useKeyboardHandles({
@@ -25,7 +25,10 @@ const ListInner: React.FC = (props, ref) => {
 
 ListInner.displayName = 'ListBox.Inner';
 
-const ListBox = React.forwardRef<HTMLUListElement, React.ComponentProps<typeof List>>(({ children, ...props }, ref) => {
+const ListBox = React.forwardRef<
+  HTMLUListElement,
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>
+>(({ children, ...props }, ref) => {
   return (
     <List role="listbox" tabIndex={-1} {...props} as="ul" ref={ref}>
       <FocusScope contain restoreFocus>

src/lib/Menu/MenuButton.tsx

@@ -6,7 +6,7 @@ import { useMenu } from './utils';
 
 type ButtonProps = React.ComponentProps<typeof Button>;
 
-const MenuButton = React.forwardRef<HTMLButtonElement, ButtonProps>((buttonProps, propsRef) => {
+const MenuButton: React.FC<ButtonProps> = (buttonProps) => {
   const isOpen = useOpenState();
   const { open, toggle } = useOpenStateControls();
   const { seed, triggerRef } = useMenu();
@@ -19,7 +19,7 @@ const MenuButton = React.forwardRef<HTMLButtonElement, ButtonProps>((buttonProps
 
   const onKeyDown = useAllHandlers(buttonProps.onKeyDown, handleKeyDown);
 
-  const refs = useForkRef(triggerRef as React.RefObject<HTMLButtonElement>, propsRef);
+  const refs = useForkRef(triggerRef as React.RefObject<HTMLButtonElement>);
 
   return (
     <Button
@@ -33,6 +33,6 @@ const MenuButton = React.forwardRef<HTMLButtonElement, ButtonProps>((buttonProps
       ref={refs}
     />
   );
-});
+};
 
 export default MenuButton;

src/lib/Menu/MenuList.tsx

@@ -6,7 +6,7 @@ import Popover from '../Popover';
 
 type UlListProps = React.ComponentProps<typeof ListBox>;
 
-const MenuList: React.FC<UlListProps> = ({ placement, offset, ...props }) => {
+const MenuList: React.FC<UlListProps> = (props) => {
   const { seed } = useMenu();
 
   const listRef = useInitialFocus();

src/lib/theme/colors.ts

@@ -1,6 +1,6 @@
 import * as paletteColors from './palette';
 
-const { gray, default: allColors, ...palette } = paletteColors;
+export const { gray, default: allColors, ...palette } = paletteColors;
 
 export type ColorName = keyof typeof palette | 'black';