@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.5

package/lib/recipes/ListAndPanel.stories.js

@@ -1,16 +1,15 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import React, { useRef, useState } from 'react';
+import { FocusScope } from 'react-aria';
+import { Item } from 'react-stately';
 import AccountIcon from 'mdi-react/AccountIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import PencilIcon from 'mdi-react/PencilIcon';
 import PlusIcon from 'mdi-react/PlusIcon';
-import { FocusScope } from 'react-aria';
-import { Item } from 'react-stately';
-import { Avatar, Box, Icon, IconButton, Link, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
 import { useOverlayPanelState } from '../hooks';
-import { pingImg } from '../utils/devUtils/constants/images';
+import { Box, Icon, IconButton, Link, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/List with Panel'
@@ -25,12 +24,14 @@ var items = [{
   email: 'idixie2@elegantthemes.com',
   firstName: 'Cacilia',
   lastName: 'Dixie',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'dfowler0@rambler.ru',
   firstName: 'Stavro',
   lastName: 'Fowler',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'jgolde8@jimdo.com',
   firstName: 'Celisse',
@@ -90,8 +91,7 @@ var items = [{
   firstName: 'Andromache',
   lastName: 'Idel',
   hasIcon: true,
-  avatar: AccountIcon,
-  hasSeparator: false
+  avatar: AccountIcon
 }];
 var sx = {
   wrapper: {
@@ -144,7 +144,7 @@ var sx = {
       alignItems: 'center'
     },
     icon: {
-      mr: 'sm',
+      mr: 'md',
       alignSelf: 'center',
       color: 'accent.40'
     },
@@ -154,7 +154,8 @@ var sx = {
       mr: 'md'
     },
     title: {
-      alignSelf: 'start'
+      alignSelf: 'start',
+      fontSize: 'md'
     },
     subtitle: {
       fontSize: 'sm',
@@ -167,27 +168,23 @@ var sx = {
     }
   }
 };
-
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
-      onClosePanel = _ref.onClosePanel;
+    onClosePanel = _ref.onClosePanel;
   return ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.listElement.wrapper
   }, ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.listElement.iconWrapper
-  }, item.hasIcon ? ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(Icon, {
     icon: item.avatar,
-    size: 24,
+    size: "md",
     sx: sx.listElement.icon
-  }) : ___EmotionJSX(Avatar, {
-    sx: sx.listElement.avatar,
-    src: item.avatar
   }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
     variant: "bodyStrong",
     sx: sx.listElement.title
-  }, item.lastName, ", ", item.firstName), ___EmotionJSX(Text, {
+  }, item.lastName, ",", ' ', item.firstName), ___EmotionJSX(Text, {
     variant: "subtitle",
     sx: sx.listElement.subtitle
   }, item.email))), ___EmotionJSX(Box, {
@@ -203,8 +200,7 @@ var ListElement = function ListElement(_ref) {
     mr: onClosePanel ? 'sm' : 0
   }, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
-    color: "white",
-    size: "sm"
+    size: "md"
   })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
     key: "enable"
   }, "Enable user"), ___EmotionJSX(Item, {
@@ -219,32 +215,26 @@ var ListElement = function ListElement(_ref) {
     icon: CloseIcon
   }))));
 };
-
 export var Default = function Default() {
   var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedItemId = _useState2[0],
-      setSelectedItemId = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedItemId = _useState2[0],
+    setSelectedItemId = _useState2[1];
   var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selectedKeys = _useState4[0],
-      setSelectedKeys = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKeys = _useState4[0],
+    setSelectedKeys = _useState4[1];
   var _useOverlayPanelState = useOverlayPanelState(),
-      panelState = _useOverlayPanelState.state,
-      onPanelClose = _useOverlayPanelState.onClose;
-
+    panelState = _useOverlayPanelState.state,
+    onPanelClose = _useOverlayPanelState.onClose;
   var panelTriggerRef = useRef();
-  var heading = 'Title of the Page';
+  var heading = 'Users';
   var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
-
   var closePanelHandler = function closePanelHandler() {
     onPanelClose(panelState, panelTriggerRef);
     setSelectedItemId(-1);
     setSelectedKeys([]);
   };
-
   var selectItemHandler = function selectItemHandler(e) {
     if (e.size) {
       setSelectedItemId(_findIndexInstanceProperty(items).call(items, function (item) {
@@ -256,31 +246,30 @@ export var Default = function Default() {
       closePanelHandler();
     }
   };
-
   return ___EmotionJSX(Box, {
     sx: sx.wrapper
-  }, ___EmotionJSX(Box, {
-    mb: "md"
-  }, ___EmotionJSX(Box, {
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
     align: "center",
     isRow: true,
     mb: "xs",
     role: "heading",
     "aria-level": "1"
   }, ___EmotionJSX(Text, {
-    variant: "title",
-    fontWeight: 3
+    fontSize: "xx",
+    fontWeight: 3,
+    fontColor: "text.primary"
   }, heading), ___EmotionJSX(IconButton, {
     "aria-label": "icon button",
     ml: "sm",
-    mt: "3px",
     variant: "inverted"
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
-    color: "white",
-    size: "xs"
+    size: "sm"
   }))), ___EmotionJSX(Text, {
-    variant: "bodyWeak"
+    fontSize: "sm",
+    color: "text.secondary",
+    fontWeight: 0,
+    width: "800px"
   }, description, ___EmotionJSX(Link, {
     href: "https://uilibrary.ping-eng.com/",
     sx: {
@@ -288,10 +277,13 @@ export var Default = function Default() {
     }
   }, " Learn more"))), ___EmotionJSX(SearchField, {
     position: "fixed",
-    mb: "sm",
+    mb: "lg",
+    mt: "lg",
     width: "400px",
     placeholder: "Search",
     "aria-label": "search"
+  }), ___EmotionJSX(Separator, {
+    margin: 0
   }), ___EmotionJSX(ListView, {
     items: items,
     onSelectionChange: selectItemHandler,
@@ -301,7 +293,7 @@ export var Default = function Default() {
     return ___EmotionJSX(Item, {
       key: item.email,
       textValue: item.email,
-      hasSeparator: item.hasSeparator,
+      hasSeparator: true,
       listItemProps: {
         pl: 15,
         minHeight: 75
@@ -315,7 +307,7 @@ export var Default = function Default() {
     triggerRef: panelTriggerRef,
     p: 0,
     size: "large"
-  }, panelState.isOpen && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(FocusScope, {
+  }, panelState.isOpen && ___EmotionJSX(FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: true
@@ -352,7 +344,7 @@ export var Default = function Default() {
   }, "Full Name"), ___EmotionJSX(Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), ___EmotionJSX(Text, {
+  }, items[selectedItemId].firstName, ' ', items[selectedItemId].lastName), ___EmotionJSX(Text, {
     sx: sx.itemLabel,
     variant: "base"
   }, "First Name"), ___EmotionJSX(Text, {
@@ -374,5 +366,5 @@ export var Default = function Default() {
     title: "Group Memberships"
   }, ___EmotionJSX(Text, null, "Group Memberships")), ___EmotionJSX(Tab, {
     title: "Account Info"
-  }, ___EmotionJSX(Text, null, "Account Info"))))))));
+  }, ___EmotionJSX(Text, null, "Account Info")))))));
 };

package/lib/recipes/LogoTabs.stories.js

@@ -9,21 +9,17 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useState } from 'react';
-import ShuffleVariant from 'mdi-react/ShuffleVariantIcon';
 import Filter from 'mdi-react/FilterIcon';
-import { Tabs, Tab, Text, Icon, Box, Separator } from '../index';
+import ShuffleVariant from 'mdi-react/ShuffleVariantIcon';
 import { tab } from '../components/Tabs/Tabs.style';
+import { Box, Icon, Separator, Tab, Tabs, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Logo Tabs'
 };
-
 var P14CLogo = function P14CLogo(props) {
   return ___EmotionJSX("svg", _extends({
     id: "Layer_1",
@@ -53,7 +49,6 @@ var P14CLogo = function P14CLogo(props) {
     d: "M73.85,9h-.06a5.52,5.52,0,0,0,0,11H93.1a6.9,6.9,0,1,0,0-13.79h0A10,10,0,0,0,73.85,9Z"
   }));
 };
-
 var GoogleLogo = function GoogleLogo(props) {
   return ___EmotionJSX("svg", _extends({
     x: "0px",
@@ -81,7 +76,6 @@ var GoogleLogo = function GoogleLogo(props) {
     d: "M50.9,23.6c8.1,0,13.5,3.5,16.6,6.4l12.1-11.8C72.2,11.3,62.5,7,50.9,7c-16.8,0-31.3,9.6-38.4,23.7l13.9,10.8 C29.9,31.1,39.5,23.6,50.9,23.6"
   })));
 };
-
 var sx = {
   container: {
     display: 'inline-flex !important',
@@ -133,15 +127,13 @@ var sx = {
 };
 export var LogoTabs = function LogoTabs() {
   var _useState = useState('tab1'),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentTab = _useState2[0],
-      setCurrentTab = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    currentTab = _useState2[0],
+    setCurrentTab = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showMiddleTabs = _useState4[0],
-      setShowMiddleTabs = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    showMiddleTabs = _useState4[0],
+    setShowMiddleTabs = _useState4[1];
   return ___EmotionJSX(Box, {
     sx: sx.container
   }, ___EmotionJSX(Separator, {

package/lib/recipes/MaskedValue.stories.js

@@ -1,10 +1,10 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _repeatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/repeat";
 import React, { useState } from 'react';
-import EyeIcon from 'mdi-react/EyeOutlineIcon';
 import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
-import { Box, Icon, IconButton, Text } from '../index';
+import EyeIcon from 'mdi-react/EyeOutlineIcon';
 import { useStatusClasses } from '../hooks';
+import { Box, Icon, IconButton, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Masked Values',
@@ -50,20 +50,16 @@ var sx = {
 };
 export var Default = function Default(_ref) {
   var _context;
-
   var dataTitle = _ref.dataTitle,
-      secretData = _ref.secretData;
-
+    secretData = _ref.secretData;
   var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMasked = _useState2[0],
-      setIsMasked = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isMasked = _useState2[0],
+    setIsMasked = _useState2[1];
   var _useStatusClasses = useStatusClasses(null, {
-    isMasked: isMasked
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isMasked: isMasked
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
     variant: "label"
   }, dataTitle), ___EmotionJSX(Box, {

package/lib/recipes/OneWayToBidirectionalArrow.stories.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import DragVerticalIcon from 'mdi-react/DragVerticalIcon';
-import DeleteIcon from 'mdi-react/DeleteIcon';
 import CogsIcon from 'mdi-react/CogsIcon';
+import DeleteIcon from 'mdi-react/DeleteIcon';
+import DragVerticalIcon from 'mdi-react/DragVerticalIcon';
 import Box from '../components/Box';
-import { Icon, ComboBoxField, Item, IconButton, IconButtonToggle } from '../index';
+import { ComboBoxField, Icon, IconButton, IconButtonToggle, Item } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/One Way to Bidirectional Arrow'
@@ -58,7 +58,6 @@ export var Default = function Default() {
       fill: "currentColor"
     }));
   };
-
   var CustomOffSvg = function CustomOffSvg(props) {
     return ___EmotionJSX("svg", _extends({
       width: "16",
@@ -74,7 +73,6 @@ export var Default = function Default() {
       fill: "currentColor"
     }));
   };
-
   var CustomRightSvg = function CustomRightSvg(props) {
     return ___EmotionJSX("svg", _extends({
       width: "8",
@@ -87,7 +85,6 @@ export var Default = function Default() {
       fill: "currentColor"
     }));
   };
-
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     sx: sx.outerContainer,
     isRow: true

package/lib/recipes/PageHeader.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PlusIcon from 'mdi-react/PlusIcon';
-import { Box, Button, IconButton, Icon, Text } from '../index';
+import { Box, Button, Icon, IconButton, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Page Header'

package/lib/recipes/PanelHeader.stories.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import AccountIcon from 'mdi-react/AccountIcon';
-import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
+import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
 import Box from '../components/Box';
 import Icon from '../components/Icon';
-import Text from '../components/Text';
 import IconButton from '../components/IconButton';
 import PopoverMenu from '../components/PopoverMenu';
+import Text from '../components/Text';
 import { Item, Menu, OverlayProvider } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/recipes/RadioButtonsWithLinks.stories.js

@@ -2,9 +2,9 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useState } from 'react';
 import CloseIcon from 'mdi-react/CloseIcon';
-import { Box, Button, Icon, IconButton, Text } from '../index';
 import RadioField from '../components/RadioField';
 import RadioGroupField from '../components/RadioGroupField';
+import { Box, Button, Icon, IconButton, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Radio Buttons with Links'
@@ -30,16 +30,13 @@ export var Default = function Default() {
     fontSize: 'md',
     color: 'neutral.10'
   };
-
   var RadioFieldWithButton = function RadioFieldWithButton(_ref) {
     var fieldName = _ref.fieldName,
-        isDisabled = _ref.isDisabled;
-
+      isDisabled = _ref.isDisabled;
     var _useState = useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        isOpen = _useState2[0],
-        setIsOpen = _useState2[1];
-
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
     return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
       isRow: true,
       alignItems: "center"
@@ -63,7 +60,6 @@ export var Default = function Default() {
       }
     }));
   };
-
   var PermissionsList = function PermissionsList(_ref2) {
     var onPress = _ref2.onPress;
     return ___EmotionJSX(Box, {
@@ -109,10 +105,9 @@ export var Default = function Default() {
       mb: "sm"
     }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod")));
   };
-
   return ___EmotionJSX(RadioGroupField, null, _mapInstanceProperty(roles).call(roles, function (_ref3) {
     var name = _ref3.name,
-        isDisabled = _ref3.isDisabled;
+      isDisabled = _ref3.isDisabled;
     return ___EmotionJSX(RadioFieldWithButton, {
       fieldName: name,
       isDisabled: isDisabled,

package/lib/recipes/RowLineChart.stories.js

@@ -8,18 +8,15 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useCallback, useMemo } from 'react';
 import { useVisuallyHidden } from 'react-aria';
+import { action } from '@storybook/addon-actions';
 import { Line, LineChart, ResponsiveContainer } from 'recharts';
 import useResizeObserver from 'use-resize-observer';
-import { action } from '@storybook/addon-actions';
-import { neutral } from '../styles/colors';
 import { Box, Button, SwitchField, Text, Tooltip, TooltipTrigger } from '../index';
+import { neutral } from '../styles/colors';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Row Line Chart',
@@ -269,12 +266,10 @@ var sx = {
 };
 export var Default = function Default() {
   var _useResizeObserver = useResizeObserver(),
-      ref = _useResizeObserver.ref,
-      width = _useResizeObserver.width;
-
+    ref = _useResizeObserver.ref,
+    width = _useResizeObserver.width;
   var _useVisuallyHidden = useVisuallyHidden(),
-      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
-
+    visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
   var isTablet = useMemo(function () {
     return width <= 605;
   }, [width]);
@@ -287,7 +282,6 @@ export var Default = function Default() {
   var hideIfMobile = useCallback(function () {
     return isMobile && visuallyHiddenProps;
   }, [isMobile]);
-
   var EmptyData = ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.container,
@@ -343,7 +337,6 @@ export var Default = function Default() {
   }, ___EmotionJSX(SwitchField, {
     "aria-label": "line-chart switch-field"
   }))));
-
   var FullData = ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.container,
@@ -400,7 +393,6 @@ export var Default = function Default() {
   }, ___EmotionJSX(SwitchField, {
     "aria-label": "line-chart switch-field"
   }))));
-
   var PartialData = ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.container,
@@ -457,7 +449,6 @@ export var Default = function Default() {
   }, ___EmotionJSX(SwitchField, {
     "aria-label": "line-chart switch-field"
   }))));
-
   var ZeroData = ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.container,
@@ -514,7 +505,6 @@ export var Default = function Default() {
   }, ___EmotionJSX(SwitchField, {
     "aria-label": "line-chart switch-field"
   }))));
-
   var ZeroValues = ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.container,
@@ -571,6 +561,5 @@ export var Default = function Default() {
   }, ___EmotionJSX(SwitchField, {
     "aria-label": "line-chart switch-field"
   }))));
-
   return ___EmotionJSX(React.Fragment, null, EmptyData, FullData, PartialData, ZeroData, ZeroValues);
 };

package/lib/recipes/ScrollableListView.stories.js

@@ -1,13 +1,14 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import React, { useState } from 'react';
+import { Item } from 'react-stately';
 import CreateIcon from 'mdi-react/CreateIcon';
 import FormSelectIcon from 'mdi-react/FormSelectIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
-import { Item } from 'react-stately';
-import { SearchField, ListView, Box, IconButton, ScrollBox, Text, Icon } from '../index';
+import { Box, Icon, IconButton, ListView, ScrollBox, SearchField, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Scrollable List View'
@@ -46,33 +47,26 @@ var unfilteredItems = [{
   id: '7'
 }];
 export var Default = function Default(_ref) {
-  var args = _extends({}, _ref);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   var _useState3 = useState(unfilteredItems),
-      _useState4 = _slicedToArray(_useState3, 2),
-      items = _useState4[0],
-      setItems = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    items = _useState4[0],
+    setItems = _useState4[1];
   var filterItems = function filterItems(input) {
     var filtered = _filterInstanceProperty(unfilteredItems).call(unfilteredItems, function (obj) {
       var _context;
-
       return _includesInstanceProperty(_context = obj.name.toLowerCase()).call(_context, input.toLowerCase());
     });
-
     setItems(filtered);
   };
-
   var onChangeInput = function onChangeInput(input) {
     setValue(input);
     filterItems(input);
   };
-
   return ___EmotionJSX(Box, null, ___EmotionJSX(SearchField, {
     value: value,
     onChange: onChangeInput