@bundle-stats/ui 3.2.0-beta.1 → 3.2.1-beta.3

package/lib-esm/layout/stack/stack.stories.js

@@ -3,53 +3,43 @@ import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Box } from '../box';
 import { Stack } from '.';
-var stories = storiesOf('Layout/Stack', module);
+const stories = storiesOf('Layout/Stack', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 2"), null, "Lorem ipsum 3");
-});
-stories.add('with custom wrapper', function () {
-  return /*#__PURE__*/React.createElement(Stack, {
-    as: "main",
-    className: "wrapper"
-  }, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 2"));
-});
-stories.add('with large space', function () {
-  return /*#__PURE__*/React.createElement(Stack, {
-    space: "large"
-  }, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 3"));
-});
-stories.add('with nested stack', function () {
-  return /*#__PURE__*/React.createElement(Stack, {
-    space: "large"
-  }, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(Stack, {
-    space: "small"
-  }, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 3.1"), /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 3.2")));
-});
-stories.add('single item', function () {
-  return /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum"));
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 2"), null, "Lorem ipsum 3"));
+stories.add('with custom wrapper', () => /*#__PURE__*/React.createElement(Stack, {
+  as: "main",
+  className: "wrapper"
+}, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 2")));
+stories.add('with large space', () => /*#__PURE__*/React.createElement(Stack, {
+  space: "large"
+}, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 3")));
+stories.add('with nested stack', () => /*#__PURE__*/React.createElement(Stack, {
+  space: "large"
+}, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(Stack, {
+  space: "small"
+}, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 3.1"), /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 3.2"))));
+stories.add('single item', () => /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum")));

package/lib-esm/layout/sub-header/sub-header.js

@@ -4,18 +4,20 @@ import cx from 'classnames';
 import { Container } from '../../ui/container';
 import { Box } from '../box';
 import css from './sub-header.module.css';
-var SIZE_SMALL = 'small';
-var SIZE_DEFAULT = 'default';
-var SIZES = [SIZE_SMALL, SIZE_DEFAULT];
-export var SubHeader = function SubHeader(props) {
-  var className = props.className,
-      size = props.size,
-      subtitle = props.subtitle,
-      title = props.title,
-      icon = props.icon,
-      children = props.children,
-      rightSide = props.rightSide;
-  var rootClassName = cx(css.root, css[size], className);
+const SIZE_SMALL = 'small';
+const SIZE_DEFAULT = 'default';
+const SIZES = [SIZE_SMALL, SIZE_DEFAULT];
+export const SubHeader = props => {
+  const {
+    className,
+    size,
+    subtitle,
+    title,
+    icon,
+    children,
+    rightSide
+  } = props;
+  const rootClassName = cx(css.root, css[size], className);
   return /*#__PURE__*/React.createElement(Box, {
     padding: "small",
     className: rootClassName

package/lib-esm/layout/sub-header/sub-header.stories.js

@@ -3,73 +3,61 @@ import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Logo } from '../../ui/logo';
 import { SubHeader } from '.';
-var stories = storiesOf('Layout/SubHeader', module);
+const stories = storiesOf('Layout/SubHeader', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(SubHeader, {
-    title: "Webpack"
-  });
-});
-stories.add('with subtitle', function () {
-  return /*#__PURE__*/React.createElement(SubHeader, {
-    title: "Webpack",
-    subtitle: "Tools"
-  });
-});
-stories.add('with icon', function () {
-  return /*#__PURE__*/React.createElement(SubHeader, {
-    title: "Webpack",
-    subtitle: "Tools",
-    icon: /*#__PURE__*/React.createElement(Logo, {
-      kind: "webpack",
-      style: {
-        width: '48px'
-      }
-    })
-  });
-});
-stories.add('with children', function () {
-  return /*#__PURE__*/React.createElement(SubHeader, {
-    title: "Webpack",
-    subtitle: "Tools",
-    icon: /*#__PURE__*/React.createElement(Logo, {
-      kind: "webpack",
-      style: {
-        width: '72px'
-      }
-    })
-  }, /*#__PURE__*/React.createElement("a", {
-    href: "#webpack"
-  }, "Visit webpack.js.org"));
-});
-stories.add('with right side links', function () {
-  return /*#__PURE__*/React.createElement(SubHeader, {
-    title: "Webpack",
-    subtitle: "Tools",
-    icon: /*#__PURE__*/React.createElement(Logo, {
-      kind: "webpack",
-      style: {
-        width: '72px'
-      }
-    }),
-    rightSide: /*#__PURE__*/React.createElement("span", null, "Read more")
-  }, /*#__PURE__*/React.createElement("a", {
-    href: "#webpack"
-  }, "Visit webpack.js.org"));
-});
-stories.add('with small size', function () {
-  return /*#__PURE__*/React.createElement(SubHeader, {
-    size: "small",
-    title: "Webpack",
-    subtitle: "Tools",
-    icon: /*#__PURE__*/React.createElement(Logo, {
-      kind: "webpack",
-      style: {
-        width: '72px'
-      }
-    }),
-    rightSide: /*#__PURE__*/React.createElement("span", null, "Read more")
-  }, /*#__PURE__*/React.createElement("a", {
-    href: "#webpack"
-  }, "Visit webpack.js.org"));
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(SubHeader, {
+  title: "Webpack"
+}));
+stories.add('with subtitle', () => /*#__PURE__*/React.createElement(SubHeader, {
+  title: "Webpack",
+  subtitle: "Tools"
+}));
+stories.add('with icon', () => /*#__PURE__*/React.createElement(SubHeader, {
+  title: "Webpack",
+  subtitle: "Tools",
+  icon: /*#__PURE__*/React.createElement(Logo, {
+    kind: "webpack",
+    style: {
+      width: '48px'
+    }
+  })
+}));
+stories.add('with children', () => /*#__PURE__*/React.createElement(SubHeader, {
+  title: "Webpack",
+  subtitle: "Tools",
+  icon: /*#__PURE__*/React.createElement(Logo, {
+    kind: "webpack",
+    style: {
+      width: '72px'
+    }
+  })
+}, /*#__PURE__*/React.createElement("a", {
+  href: "#webpack"
+}, "Visit webpack.js.org")));
+stories.add('with right side links', () => /*#__PURE__*/React.createElement(SubHeader, {
+  title: "Webpack",
+  subtitle: "Tools",
+  icon: /*#__PURE__*/React.createElement(Logo, {
+    kind: "webpack",
+    style: {
+      width: '72px'
+    }
+  }),
+  rightSide: /*#__PURE__*/React.createElement("span", null, "Read more")
+}, /*#__PURE__*/React.createElement("a", {
+  href: "#webpack"
+}, "Visit webpack.js.org")));
+stories.add('with small size', () => /*#__PURE__*/React.createElement(SubHeader, {
+  size: "small",
+  title: "Webpack",
+  subtitle: "Tools",
+  icon: /*#__PURE__*/React.createElement(Logo, {
+    kind: "webpack",
+    style: {
+      width: '72px'
+    }
+  }),
+  rightSide: /*#__PURE__*/React.createElement("span", null, "Read more")
+}, /*#__PURE__*/React.createElement("a", {
+  href: "#webpack"
+}, "Visit webpack.js.org")));

package/lib-esm/prototypes/typography.stories.js

@@ -5,71 +5,62 @@ import { getWrapperDecorator } from '../stories';
 import { Header, SubHeader } from '../layout';
 import content from './typography.md';
 import css from './typography.module.css';
-var stories = storiesOf('Prototypes/Styleguide', module);
+const stories = storiesOf('Prototypes/Styleguide', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('typography', function () {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
-    className: css.header,
-    renderLeft: function renderLeft(sideProps) {
-      return /*#__PURE__*/React.createElement("div", sideProps, /*#__PURE__*/React.createElement("h1", {
-        className: css.headerTitle
-      }, /*#__PURE__*/React.createElement(Logo, {
-        className: css.headerLogo
-      }), /*#__PURE__*/React.createElement("span", null, "BundleStats")));
-    }
-  }), /*#__PURE__*/React.createElement(SubHeader, {
-    className: css.subheader,
-    title: "HTML Ipsum presents",
-    subtitle: "Documentation"
-  }), /*#__PURE__*/React.createElement("main", {
-    className: css.main
-  }, /*#__PURE__*/React.createElement(Container, {
-    dangerouslySetInnerHTML: {
-      __html: content
-    }
-  })));
-}); // eslint-disable-next-line react/prop-types
+stories.add('typography', () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+  className: css.header,
+  renderLeft: sideProps => /*#__PURE__*/React.createElement("div", sideProps, /*#__PURE__*/React.createElement("h1", {
+    className: css.headerTitle
+  }, /*#__PURE__*/React.createElement(Logo, {
+    className: css.headerLogo
+  }), /*#__PURE__*/React.createElement("span", null, "BundleStats")))
+}), /*#__PURE__*/React.createElement(SubHeader, {
+  className: css.subheader,
+  title: "HTML Ipsum presents",
+  subtitle: "Documentation"
+}), /*#__PURE__*/React.createElement("main", {
+  className: css.main
+}, /*#__PURE__*/React.createElement(Container, {
+  dangerouslySetInnerHTML: {
+    __html: content
+  }
+})))); // eslint-disable-next-line react/prop-types
 
-var Item = function Item(_ref) {
-  var colorName = _ref.colorName,
-      _ref$valueName = _ref.valueName,
-      valueName = _ref$valueName === void 0 ? 'normal' : _ref$valueName;
-  var colorFullName = valueName === 'normal' ? colorName : [colorName, valueName].join('-');
+const Item = _ref => {
+  let {
+    colorName,
+    valueName = 'normal'
+  } = _ref;
+  const colorFullName = valueName === 'normal' ? colorName : [colorName, valueName].join('-');
   return /*#__PURE__*/React.createElement("div", {
     style: {
-      background: "var(--color-" + colorFullName + ")",
+      background: `var(--color-${colorFullName})`,
       color: 'var(--color-light)',
       padding: '12px',
       flex: '1 1 20%'
     }
-  }, colorName + " " + valueName);
+  }, `${colorName} ${valueName}`);
 };
 
-var COLORS = ['blue', 'red', 'green', 'yellow', 'gray'];
-var NAMES = ['ultra-light', 'light', 'normal', 'dark', 'ultra-dark'];
-stories.add('color sheme', function () {
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Item, {
-    colorName: "branding",
-    valueName: "light"
-  }), /*#__PURE__*/React.createElement(Item, {
-    colorName: "branding"
-  }), /*#__PURE__*/React.createElement(Item, {
-    colorName: "branding",
-    valueName: "dark"
-  }), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement(Item, {
-    colorName: "dark"
-  }), /*#__PURE__*/React.createElement("hr", null), COLORS.map(function (colorName) {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex',
-        marginBottom: '24px'
-      }
-    }, NAMES.map(function (valueName) {
-      return /*#__PURE__*/React.createElement(Item, {
-        key: colorName + "-" + valueName,
-        colorName: colorName,
-        valueName: valueName
-      });
-    }));
-  }));
-});
+const COLORS = ['blue', 'red', 'green', 'yellow', 'gray'];
+const NAMES = ['ultra-light', 'light', 'normal', 'dark', 'ultra-dark'];
+stories.add('color sheme', () => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Item, {
+  colorName: "branding",
+  valueName: "light"
+}), /*#__PURE__*/React.createElement(Item, {
+  colorName: "branding"
+}), /*#__PURE__*/React.createElement(Item, {
+  colorName: "branding",
+  valueName: "dark"
+}), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement(Item, {
+  colorName: "dark"
+}), /*#__PURE__*/React.createElement("hr", null), COLORS.map(colorName => /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: 'flex',
+    marginBottom: '24px'
+  }
+}, NAMES.map(valueName => /*#__PURE__*/React.createElement(Item, {
+  key: `${colorName}-${valueName}`,
+  colorName: colorName,
+  valueName: valueName
+}))))));

package/lib-esm/query-state.js

@@ -6,34 +6,31 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useCallback } from 'react';
 import { Route, useHistory, useLocation } from 'react-router-dom';
 import { JsonParam, QueryParamProvider, useQueryParams } from 'use-query-params';
-export var QueryStateProvider = function QueryStateProvider(props) {
-  var history = useHistory();
-  var location = useLocation();
+export const QueryStateProvider = props => {
+  const history = useHistory();
+  const location = useLocation();
   return /*#__PURE__*/React.createElement(QueryParamProvider, _extends({
     ReactRouterRoute: Route,
     location: location,
     history: history
   }, props));
 };
-export var useComponentQueryState = function useComponentQueryState(componentName) {
-  var _useQueryParams2;
-
-  var _useQueryParams = useQueryParams((_useQueryParams2 = {}, _useQueryParams2[componentName] = JsonParam, _useQueryParams2)),
-      search = _useQueryParams[0],
-      setSearch = _useQueryParams[1];
-
-  var state = search[componentName];
-  var setState = useCallback(function (newState) {
-    var _setSearch;
-
-    var newComponentState = _merge({}, state, newState); // Deep check to prevent unnecessary state changes
+export const useComponentQueryState = componentName => {
+  const [search, setSearch] = useQueryParams({
+    [componentName]: JsonParam
+  });
+  const state = search[componentName];
+  const setState = useCallback(newState => {
+    const newComponentState = _merge({}, state, newState); // Deep check to prevent unnecessary state changes
 
 
     if (_isEqual(newComponentState, state)) {
       return;
     }
 
-    setSearch((_setSearch = {}, _setSearch[componentName] = newComponentState, _setSearch));
+    setSearch({
+      [componentName]: newComponentState
+    });
   }, [state]);
   return [state, setState];
 };

package/lib-esm/stories/wrapper.js

@@ -1,23 +1,17 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-export var getWrapperDecorator = function getWrapperDecorator(customWrapperStyles) {
+export const getWrapperDecorator = function (customWrapperStyles) {
   if (customWrapperStyles === void 0) {
     customWrapperStyles = {};
   }
 
-  return function (storyFn) {
-    var wrapperStyles = _objectSpread({
+  return storyFn => {
+    const wrapperStyles = {
       width: '100%',
       height: '100%',
-      padding: '24px'
-    }, customWrapperStyles);
-
+      padding: '24px',
+      ...customWrapperStyles
+    };
     return /*#__PURE__*/React.createElement(MemoryRouter, {
       initialEntries: [{
         pathname: '/',

package/lib-esm/ui/alert/alert.js

@@ -3,10 +3,12 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { Box } from '../../layout/box';
 import css from './alert.module.css';
-export var Alert = function Alert(props) {
-  var className = props.className,
-      kind = props.kind,
-      children = props.children;
+export const Alert = props => {
+  const {
+    className,
+    kind,
+    children
+  } = props;
   return /*#__PURE__*/React.createElement(Box, {
     padding: ['xsmall', 'small'],
     outline: true,

package/lib-esm/ui/alert/alert.stories.js

@@ -2,28 +2,18 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Alert } from '.';
-var stories = storiesOf('UI/Alert', module);
+const stories = storiesOf('UI/Alert', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Alert, null, "Lorem ipsum");
-});
-stories.add('with kind success', function () {
-  return /*#__PURE__*/React.createElement(Alert, {
-    kind: "success"
-  }, "Lorem ipsum");
-});
-stories.add('with kind info', function () {
-  return /*#__PURE__*/React.createElement(Alert, {
-    kind: "info"
-  }, "Lorem ipsum");
-});
-stories.add('with kind warning', function () {
-  return /*#__PURE__*/React.createElement(Alert, {
-    kind: "warning"
-  }, "Lorem ipsum");
-});
-stories.add('with kind danger', function () {
-  return /*#__PURE__*/React.createElement(Alert, {
-    kind: "danger"
-  }, "Lorem ipsum");
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Alert, null, "Lorem ipsum"));
+stories.add('with kind success', () => /*#__PURE__*/React.createElement(Alert, {
+  kind: "success"
+}, "Lorem ipsum"));
+stories.add('with kind info', () => /*#__PURE__*/React.createElement(Alert, {
+  kind: "info"
+}, "Lorem ipsum"));
+stories.add('with kind warning', () => /*#__PURE__*/React.createElement(Alert, {
+  kind: "warning"
+}, "Lorem ipsum"));
+stories.add('with kind danger', () => /*#__PURE__*/React.createElement(Alert, {
+  kind: "danger"
+}, "Lorem ipsum"));

package/lib-esm/ui/container/container.js

@@ -1,18 +1,15 @@
-var _excluded = ["className", "as"];
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './container.module.css';
-export var Container = function Container(_ref) {
-  var className = _ref.className,
-      Component = _ref.as,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+export const Container = _ref => {
+  let {
+    className,
+    as: Component,
+    ...restProps
+  } = _ref;
   return /*#__PURE__*/React.createElement(Component, {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement("div", _extends({

package/lib-esm/ui/container/container.stories.js

@@ -1,20 +1,18 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Container } from '.';
-var stories = storiesOf('UI/Container', module);
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      background: 'hotpink'
-    }
-  }, /*#__PURE__*/React.createElement(Container, {
-    style: {
-      background: 'white'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      background: 'white',
-      padding: '24px'
-    }
-  }, "Content")));
-});
+const stories = storiesOf('UI/Container', module);
+stories.add('default', () => /*#__PURE__*/React.createElement("div", {
+  style: {
+    background: 'hotpink'
+  }
+}, /*#__PURE__*/React.createElement(Container, {
+  style: {
+    background: 'white'
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    background: 'white',
+    padding: '24px'
+  }
+}, "Content"))));

package/lib-esm/ui/dropdown/dropdown.js

@@ -7,15 +7,17 @@ import { Menu, MenuItem, MenuButton, useMenuState } from 'reakit/Menu';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
 import css from './dropdown.module.css';
-export var Dropdown = function Dropdown(props) {
-  var className = props.className,
-      label = props.label,
-      ariaLabel = props.ariaLabel,
-      glyph = props.glyph,
-      activeLabel = props.activeLabel,
-      children = props.children;
-  var rootClassName = cx(css.root, activeLabel && css.activeLabel, className);
-  var menu = useMenuState({
+export const Dropdown = props => {
+  const {
+    className,
+    label,
+    ariaLabel,
+    glyph,
+    activeLabel,
+    children
+  } = props;
+  const rootClassName = cx(css.root, activeLabel && css.activeLabel, className);
+  const menu = useMenuState({
     baseId: process.env.NODE_ENV === 'test' && 'id-test',
     modal: true
   });
@@ -32,8 +34,8 @@ export var Dropdown = function Dropdown(props) {
     "aria-label": ariaLabel || label,
     className: css.dropdown
   }), typeof children === 'function' ? children({
-    MenuItem: MenuItem,
-    menu: menu,
+    MenuItem,
+    menu,
     menuItemClassName: css.menuItem,
     menuItemActiveClassName: css.menuItemActive
   }) : children));