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

package/lib-esm/hooks/search-params.js

@@ -0,0 +1,170 @@
+import _merge from "lodash/merge";
+import _isEqual from "lodash/isEqual";
+import { useCallback, useLayoutEffect, useReducer } from 'react';
+const ACTION_SET_FILTERS = 'SET_FILTERS';
+const ACTION_SET_SEARCH = 'SET_SEARCH';
+const ACTION_RESET_DEFAULT = 'RESET_DEFAULT';
+const ACTION_RESET_ALL = 'RESET_ALL';
+const ACTION_SET = 'SET';
+
+const getSearchPattern = search => {
+  let searchPattern = new RegExp(/.*/);
+
+  if (!search || !search.trim()) {
+    return searchPattern;
+  }
+
+  try {
+    searchPattern = new RegExp(search, 'i');
+  } catch (err) {
+    // noop
+    console.error(err); // eslint-disable-line no-console
+  }
+
+  return searchPattern;
+};
+
+const getSearchReducer = _ref => {
+  let {
+    defaultFilters,
+    allEntriesFilters,
+    setParentState
+  } = _ref;
+  return (state, action) => {
+    const {
+      type,
+      payload
+    } = action;
+
+    switch (type) {
+      case ACTION_SET_FILTERS:
+        {
+          setParentState({
+            filters: payload,
+            search: state.search
+          });
+          return { ...state,
+            filters: payload
+          };
+        }
+
+      case ACTION_SET_SEARCH:
+        {
+          setParentState({
+            filters: state.filters,
+            search: payload
+          });
+          return { ...state,
+            search: payload,
+            searchPattern: getSearchPattern(payload)
+          };
+        }
+
+      case ACTION_RESET_DEFAULT:
+        {
+          setParentState({
+            filters: defaultFilters,
+            search: ''
+          });
+          return {
+            filters: defaultFilters,
+            search: '',
+            searchPattern: getSearchPattern()
+          };
+        }
+
+      case ACTION_RESET_ALL:
+        {
+          setParentState({
+            filters: allEntriesFilters,
+            search: ''
+          });
+          return {
+            filters: allEntriesFilters,
+            search: '',
+            searchPattern: getSearchPattern()
+          };
+        }
+
+      case ACTION_SET:
+        {
+          return payload;
+        }
+
+      default:
+        return state;
+    }
+  };
+};
+
+export const generateState = (filters, search) => ({
+  filters,
+  search,
+  searchPattern: getSearchPattern(search)
+});
+export const useSearchParams = _ref2 => {
+  let {
+    search: parentSearch,
+    filters: parentFilters,
+    defaultFilters,
+    allEntriesFilters,
+    setState: setParentState
+  } = _ref2;
+  // When we pass custom filters, set the other flags to true (allEntries)
+  const initialFilters = parentFilters ? _merge({}, allEntriesFilters, parentFilters) : defaultFilters;
+  const [{
+    search,
+    searchPattern,
+    filters
+  }, dispatch] = useReducer(getSearchReducer({
+    defaultFilters,
+    allEntriesFilters,
+    setParentState
+  }), generateState(initialFilters, parentSearch)); // Update state when the custom filters/search are changing - initial load or route updates
+
+  useLayoutEffect(() => {
+    // Run a deep comparison to prevent circular setState triggering
+    if (parentSearch === search || _isEqual(parentFilters, filters)) {
+      return;
+    }
+
+    dispatch({
+      type: ACTION_SET,
+      payload: generateState(initialFilters, parentSearch)
+    });
+  }, [search, filters, parentFilters, parentSearch]);
+  /** Callbacks */
+
+  const handleUpdateSearch = useCallback(newValue => {
+    dispatch({
+      type: ACTION_SET_SEARCH,
+      payload: newValue
+    });
+  }, []);
+  const handleUpdateFilters = useCallback(newFilters => {
+    dispatch({
+      type: ACTION_SET_FILTERS,
+      payload: newFilters
+    });
+  }, []);
+  const handleResetFilters = useCallback(() => {
+    dispatch({
+      type: ACTION_RESET_DEFAULT
+    });
+  }, []);
+  const handleResetAllFilters = useCallback(() => {
+    dispatch({
+      type: ACTION_RESET_ALL
+    });
+  }, []);
+  return {
+    search,
+    searchPattern,
+    filters,
+    hasActiveFilters: !_isEqual(allEntriesFilters, filters),
+    updateSearch: handleUpdateSearch,
+    updateFilters: handleUpdateFilters,
+    resetFilters: handleResetFilters,
+    resetAllFilters: handleResetAllFilters
+  };
+};

package/lib-esm/layout/box/box.js

@@ -1,29 +1,22 @@
-var _excluded = ["className", "as", "padding", "horizontalPadding", "verticalPadding", "outline"];
-
 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 { NO_SPACE, SPACES } from '../../constants';
 import css from './box.module.css';
-export var Box = function Box(props) {
-  var className = props.className,
-      Component = props.as,
-      padding = props.padding,
-      horizontalPadding = props.horizontalPadding,
-      verticalPadding = props.verticalPadding,
-      outline = props.outline,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var _ref = Array.isArray(padding) ? [null].concat(padding) : [padding, verticalPadding, horizontalPadding],
-      resolvedPadding = _ref[0],
-      resolvedVerticalPadding = _ref[1],
-      resolvedHorizontalPadding = _ref[2];
-
-  var rootClassName = cx(css.root, className, resolvedPadding && css["padding-" + resolvedPadding], resolvedVerticalPadding && css["vertical-padding-" + resolvedVerticalPadding], resolvedHorizontalPadding && css["horizontal-padding-" + resolvedHorizontalPadding], outline && css.outline);
+export const Box = props => {
+  const {
+    className,
+    as: Component,
+    padding,
+    horizontalPadding,
+    verticalPadding,
+    outline,
+    ...restProps
+  } = props;
+  const [resolvedPadding, resolvedVerticalPadding, resolvedHorizontalPadding] = Array.isArray(padding) ? [null, ...padding] : [padding, verticalPadding, horizontalPadding];
+  const rootClassName = cx(css.root, className, resolvedPadding && css[`padding-${resolvedPadding}`], resolvedVerticalPadding && css[`vertical-padding-${resolvedVerticalPadding}`], resolvedHorizontalPadding && css[`horizontal-padding-${resolvedHorizontalPadding}`], outline && css.outline);
   return /*#__PURE__*/React.createElement(Component, _extends({
     className: rootClassName
   }, restProps));

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

@@ -2,50 +2,38 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Box } from '.';
-var stories = storiesOf('Layout/Box', module);
+const stories = storiesOf('Layout/Box', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Box, {
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with padding', function () {
-  return /*#__PURE__*/React.createElement(Box, {
-    padding: "medium",
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with horizontal padding', function () {
-  return /*#__PURE__*/React.createElement(Box, {
-    horizontalPadding: "medium",
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with vertical padding', function () {
-  return /*#__PURE__*/React.createElement(Box, {
-    verticalPadding: "medium",
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with horizontal & vertical padding', function () {
-  return /*#__PURE__*/React.createElement(Box, {
-    padding: ['xxsmall', 'medium'],
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with outline', function () {
-  return /*#__PURE__*/React.createElement(Box, {
-    padding: "large",
-    outline: true
-  }, "Lorem ipsum");
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Box, {
+  style: {
+    outline: '1px dotted magenta'
+  }
+}, "Lorem ipsum"));
+stories.add('with padding', () => /*#__PURE__*/React.createElement(Box, {
+  padding: "medium",
+  style: {
+    outline: '1px dotted magenta'
+  }
+}, "Lorem ipsum"));
+stories.add('with horizontal padding', () => /*#__PURE__*/React.createElement(Box, {
+  horizontalPadding: "medium",
+  style: {
+    outline: '1px dotted magenta'
+  }
+}, "Lorem ipsum"));
+stories.add('with vertical padding', () => /*#__PURE__*/React.createElement(Box, {
+  verticalPadding: "medium",
+  style: {
+    outline: '1px dotted magenta'
+  }
+}, "Lorem ipsum"));
+stories.add('with horizontal & vertical padding', () => /*#__PURE__*/React.createElement(Box, {
+  padding: ['xxsmall', 'medium'],
+  style: {
+    outline: '1px dotted magenta'
+  }
+}, "Lorem ipsum"));
+stories.add('with outline', () => /*#__PURE__*/React.createElement(Box, {
+  padding: "large",
+  outline: true
+}, "Lorem ipsum"));

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

@@ -1,23 +1,20 @@
-var _excluded = ["as", "className", "space", "children"];
-
 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 { NO_SPACE, SPACES } from '../../constants';
 import { getRenderChildWithClassName } from '../../utils';
 import css from './flex-stack.module.css';
-export var FlexStack = function FlexStack(props) {
-  var Component = props.as,
-      className = props.className,
-      space = props.space,
-      children = props.children,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var rootClassName = cx(className, css.root, css["space--" + space]);
+export const FlexStack = props => {
+  const {
+    as: Component,
+    className,
+    space,
+    children,
+    ...restProps
+  } = props;
+  const rootClassName = cx(className, css.root, css[`space--${space}`]);
   return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
     className: rootClassName
   }), React.Children.map(children, getRenderChildWithClassName(css.item)));

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

@@ -3,53 +3,43 @@ import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Box } from '../box';
 import { FlexStack } from '.';
-var stories = storiesOf('Layout/FlexStack', module);
+const stories = storiesOf('Layout/FlexStack', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(FlexStack, 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(FlexStack, {
-    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(FlexStack, {
-    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(FlexStack, {
-    space: "large"
-  }, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(FlexStack, {
-    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(FlexStack, null, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum"));
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(FlexStack, 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(FlexStack, {
+  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(FlexStack, {
+  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(FlexStack, {
+  space: "large"
+}, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(FlexStack, {
+  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(FlexStack, null, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum")));

package/lib-esm/layout/footer/footer.js

@@ -10,12 +10,10 @@ import { Stack } from '../stack';
 import css from './footer.module.css';
 /* eslint-disable jsx-a11y/anchor-has-content */
 
-var ExternalLink = function ExternalLink(props) {
-  return /*#__PURE__*/React.createElement("a", _extends({
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, props));
-};
+const ExternalLink = props => /*#__PURE__*/React.createElement("a", _extends({
+  target: "_blank",
+  rel: "noopener noreferrer"
+}, props));
 /* eslint-enable jsx-a11y/anchor-has-content */
 
 
@@ -23,9 +21,11 @@ ExternalLink.propTypes = {
   /** Link to value */
   to: PropTypes.string.isRequired
 };
-export var Footer = function Footer(_ref) {
-  var className = _ref.className,
-      version = _ref.version;
+export const Footer = _ref => {
+  let {
+    className,
+    version
+  } = _ref;
   return /*#__PURE__*/React.createElement(Container, {
     as: "footer",
     className: cx(css.root, className)
@@ -40,10 +40,10 @@ export var Footer = function Footer(_ref) {
     href: config.githubUrl,
     className: cx(css.navItem, css.navLink),
     title: "In-depth bundle analyzer for webpack(bundle size, assets, modules, packages)"
-  }, "BundleStats ", version), /*#__PURE__*/React.createElement("span", {
+  }, `BundleStats `, version), /*#__PURE__*/React.createElement("span", {
     className: css.navItem
   }, /*#__PURE__*/React.createElement(ExternalLink, {
-    href: config.githubUrl + "/issues",
+    href: `${config.githubUrl}/issues`,
     className: css.navLink,
     title: "Navigate to GitHub and open issue"
   }, "Report issue")), /*#__PURE__*/React.createElement("span", {

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

@@ -2,15 +2,11 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Footer } from '.';
-var stories = storiesOf('Layout/Footer', module);
+const stories = storiesOf('Layout/Footer', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Footer, null);
-});
-stories.add('with custom content', function () {
-  return /*#__PURE__*/React.createElement(Footer, null, "Version 1.0", /*#__PURE__*/React.createElement("span", {
-    style: {
-      margin: '1em'
-    }
-  }, "Contact"));
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Footer, null));
+stories.add('with custom content', () => /*#__PURE__*/React.createElement(Footer, null, "Version 1.0", /*#__PURE__*/React.createElement("span", {
+  style: {
+    margin: '1em'
+  }
+}, "Contact")));

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

@@ -2,11 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './header.module.css';
-export var Header = function Header(_ref) {
-  var className = _ref.className,
-      renderLeft = _ref.renderLeft,
-      renderRight = _ref.renderRight,
-      render = _ref.render;
+export const Header = _ref => {
+  let {
+    className,
+    renderLeft,
+    renderRight,
+    render
+  } = _ref;
   return /*#__PURE__*/React.createElement("header", {
     className: cx(css.root, className)
   }, renderLeft({
@@ -19,15 +21,9 @@ export var Header = function Header(_ref) {
 };
 Header.defaultProps = {
   className: '',
-  renderLeft: function renderLeft(props) {
-    return /*#__PURE__*/React.createElement("div", props);
-  },
-  render: function render(props) {
-    return /*#__PURE__*/React.createElement("div", props);
-  },
-  renderRight: function renderRight(props) {
-    return /*#__PURE__*/React.createElement("div", props);
-  }
+  renderLeft: props => /*#__PURE__*/React.createElement("div", props),
+  render: props => /*#__PURE__*/React.createElement("div", props),
+  renderRight: props => /*#__PURE__*/React.createElement("div", props)
 };
 Header.propTypes = {
   /* Adopted child class name */

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

@@ -4,48 +4,54 @@ import { getWrapperDecorator } from '../../stories';
 import { Logo } from '../../ui/logo';
 import { Tabs } from '../../ui/tabs';
 import { Header } from '.';
-var stories = storiesOf('Layout/Header', module);
+const stories = storiesOf('Layout/Header', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Header, {
-    renderLeft: function renderLeft(_ref) {
-      var className = _ref.className;
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
-      }, /*#__PURE__*/React.createElement(Logo, null));
-    },
-    render: function render(_ref2) {
-      var className = _ref2.className;
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
-      }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("span", null, "Totals"), /*#__PURE__*/React.createElement("span", null, "Assets"), /*#__PURE__*/React.createElement("span", null, "Modules")));
-    },
-    renderRight: function renderRight(_ref3) {
-      var className = _ref3.className;
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
-      }, /*#__PURE__*/React.createElement(Logo, {
-        kind: "github"
-      }));
-    }
-  });
-});
-stories.add('menu on the right', function () {
-  return /*#__PURE__*/React.createElement(Header, {
-    renderLeft: function renderLeft(_ref4) {
-      var className = _ref4.className;
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
-      }, /*#__PURE__*/React.createElement(Logo, null));
-    },
-    renderRight: function renderRight(_ref5) {
-      var className = _ref5.className;
-      return /*#__PURE__*/React.createElement("div", {
-        className: className,
-        style: {
-          flexBasis: '100%'
-        }
-      }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("span", null, "Totals"), /*#__PURE__*/React.createElement("span", null, "Assets"), /*#__PURE__*/React.createElement("span", null, "Modules")));
-    }
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Header, {
+  renderLeft: _ref => {
+    let {
+      className
+    } = _ref;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, /*#__PURE__*/React.createElement(Logo, null));
+  },
+  render: _ref2 => {
+    let {
+      className
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("span", null, "Totals"), /*#__PURE__*/React.createElement("span", null, "Assets"), /*#__PURE__*/React.createElement("span", null, "Modules")));
+  },
+  renderRight: _ref3 => {
+    let {
+      className
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, /*#__PURE__*/React.createElement(Logo, {
+      kind: "github"
+    }));
+  }
+}));
+stories.add('menu on the right', () => /*#__PURE__*/React.createElement(Header, {
+  renderLeft: _ref4 => {
+    let {
+      className
+    } = _ref4;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, /*#__PURE__*/React.createElement(Logo, null));
+  },
+  renderRight: _ref5 => {
+    let {
+      className
+    } = _ref5;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className,
+      style: {
+        flexBasis: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("span", null, "Totals"), /*#__PURE__*/React.createElement("span", null, "Assets"), /*#__PURE__*/React.createElement("span", null, "Modules")));
+  }
+}));

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

@@ -4,12 +4,14 @@ import cx from 'classnames';
 import { NO_SPACE, SPACES } from '../../constants';
 import { getRenderChildWithClassName } from '../../utils';
 import css from './stack.module.css';
-export var Stack = function Stack(props) {
-  var Component = props.as,
-      className = props.className,
-      space = props.space,
-      children = props.children;
-  var rootClassName = cx(className, css.root, css["space--" + space]);
+export const Stack = props => {
+  const {
+    as: Component,
+    className,
+    space,
+    children
+  } = props;
+  const rootClassName = cx(className, css.root, css[`space--${space}`]);
   return /*#__PURE__*/React.createElement(Component, {
     className: rootClassName
   }, React.Children.map(children, getRenderChildWithClassName(css.item)));