@bundle-stats/ui 3.1.4-alpha.0 → 3.2.1-alpha.0

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

@@ -2,32 +2,25 @@ 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;
-  return /*#__PURE__*/React.createElement("header", {
-    className: cx(css.root, className)
-  }, renderLeft({
-    className: css.left
-  }), render({
-    className: css.center
-  }), renderRight({
-    className: css.right
-  }));
-};
+export const Header = ({
+  className,
+  renderLeft,
+  renderRight,
+  render
+}) => /*#__PURE__*/React.createElement("header", {
+  className: cx(css.root, className)
+}, renderLeft({
+  className: css.left
+}), render({
+  className: css.center
+}), renderRight({
+  className: css.right
+}));
 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,39 @@ 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('default', () => /*#__PURE__*/React.createElement(Header, {
+  renderLeft: ({
+    className
+  }) => /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React.createElement(Logo, null)),
+  render: ({
+    className
+  }) => /*#__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: ({
+    className
+  }) => /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React.createElement(Logo, {
+    kind: "github"
+  }))
+}));
+stories.add('menu on the right', () => /*#__PURE__*/React.createElement(Header, {
+  renderLeft: ({
+    className
+  }) => /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React.createElement(Logo, null)),
+  renderRight: ({
+    className
+  }) => /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: {
+      flexBasis: '100%'
     }
-  });
-});
-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")));
-    }
-  });
-});
+  }, /*#__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)));

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,61 @@ 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 = ({
+  colorName,
+  valueName = 'normal'
+}) => {
+  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,30 +1,18 @@
-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) {
-  if (customWrapperStyles === void 0) {
-    customWrapperStyles = {};
-  }
-
-  return function (storyFn) {
-    var wrapperStyles = _objectSpread({
-      width: '100%',
-      height: '100%',
-      padding: '24px'
-    }, customWrapperStyles);
-
-    return /*#__PURE__*/React.createElement(MemoryRouter, {
-      initialEntries: [{
-        pathname: '/',
-        key: 'home'
-      }]
-    }, /*#__PURE__*/React.createElement("div", {
-      style: wrapperStyles
-    }, storyFn()));
+export const getWrapperDecorator = (customWrapperStyles = {}) => storyFn => {
+  const wrapperStyles = {
+    width: '100%',
+    height: '100%',
+    padding: '24px',
+    ...customWrapperStyles
   };
+  return /*#__PURE__*/React.createElement(MemoryRouter, {
+    initialEntries: [{
+      pathname: '/',
+      key: 'home'
+    }]
+  }, /*#__PURE__*/React.createElement("div", {
+    style: wrapperStyles
+  }, storyFn()));
 };