@pingux/astro 1.42.2 → 2.0.0-alpha.4

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

@@ -1,11 +1,22 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+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 { Line, LineChart, ResponsiveContainer } from 'recharts';
+import { useVisuallyHidden } from 'react-aria';
 import { action } from '@storybook/addon-actions';
+import { Line, LineChart, ResponsiveContainer } from 'recharts';
 import useResizeObserver from 'use-resize-observer';
-import { useVisuallyHidden } from '@react-aria/visually-hidden';
-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',
@@ -138,6 +149,16 @@ var zeroData = [{
   id: 12,
   value: 0
 }];
+var expandableRowSharedStyle = {
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+};
+var alignCellRightWrapper = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-end'
+};
 var sx = {
   container: {
     backgroundColor: 'accent.99',
@@ -145,14 +166,7 @@ var sx = {
     justifyContent: 'space-between',
     pr: '20px'
   },
-  button: {
-    ml: 'md',
-    pr: 'md'
-  },
-  chartTitleContainer: {
-    ml: '20px',
-    pr: 'md'
-  },
+  chartTitleContainer: {},
   chartContainer: {
     width: '100%',
     height: '100%'
@@ -164,16 +178,98 @@ var sx = {
   chartTrendContainer: {
     ml: 'md',
     width: '50px'
+  },
+  expandableRow: {
+    titleWrapper: {
+      maxWidth: '50%',
+      p: 'md'
+    },
+    lineChart: {
+      title: _objectSpread(_objectSpread({}, alignCellRightWrapper), {}, {
+        ml: '20px',
+        pr: 'md'
+      }),
+      content: _objectSpread(_objectSpread({}, alignCellRightWrapper), {}, {
+        width: 100
+      }),
+      chart: {
+        width: '50px',
+        height: '18px'
+      },
+      chartWrapper: {
+        '&:hover': {
+          backgroundColor: '#4462ED1A'
+        }
+      },
+      divider: {
+        backgroundColor: 'neutral.80',
+        height: '35px',
+        width: '1px'
+      }
+    }
+  },
+  expandableRowButton: {
+    chartWrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      color: 'black',
+      background: 'none',
+      cursor: 'pointer',
+      height: 60,
+      padding: 0,
+      ml: 'md',
+      pr: 'md',
+      border: 'none',
+      '&:hover': {
+        backgroundColor: '#4462ED1A'
+      }
+    }
+  },
+  expandableRowText: {
+    title: _objectSpread({
+      fontSize: 'lg',
+      color: 'neutral.20'
+    }, expandableRowSharedStyle),
+    subtitle: _objectSpread({
+      fontSize: 'sm',
+      color: 'neutral.60'
+    }, expandableRowSharedStyle),
+    lineChart: {
+      title: _objectSpread({
+        fontSize: 'sm',
+        color: 'neutral.40',
+        maxWidth: '100%'
+      }, expandableRowSharedStyle),
+      count: {
+        color: 'neutral.20',
+        fontSize: 22,
+        fontWeight: 2
+      },
+      countLabel: {
+        fontSize: 'xs',
+        color: 'neutral.50'
+      },
+      chartLabel: {
+        fontSize: 'xs',
+        color: 'neutral.50',
+        minWidth: '60px'
+      },
+      trend: {
+        color: 'neutral.20',
+        fontSize: 'sm',
+        fontWeight: 3,
+        whiteSpace: 'nowrap'
+      }
+    }
   }
 };
 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]);
@@ -186,44 +282,39 @@ export var Default = function Default() {
   var hideIfMobile = useCallback(function () {
     return isMobile && visuallyHiddenProps;
   }, [isMobile]);
-
   var EmptyData = ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.container,
     ref: ref
   }, ___EmotionJSX(Box, {
-    p: "md",
-    variant: "boxes.expandableRow.titleWrapper"
+    sx: sx.expandableRow.titleWrapper
   }, ___EmotionJSX(Text, {
-    variant: "expandableRow.title"
+    sx: sx.expandableRowText.title
   }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    variant: "expandableRow.subtitle"
+    sx: sx.expandableRowText.subtitle
   }, "Empty Data")), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    sx: sx.expandableRow.lineChart.title
   }, hideIfMobile()), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.title"
+    sx: sx.expandableRowText.lineChart.title
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    width: 100
+    sx: sx.expandableRow.lineChart.content
   }, hideIfTablet()), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.count"
+    sx: sx.expandableRowText.lineChart.count
   }, "0"), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.countLabel"
+    sx: sx.expandableRowText.lineChart.countLabel
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    variant: "expandableRow.chartWrapper",
+    sx: sx.expandableRowButton.chartWrapper,
     onPress: action('seeContributingDataAction'),
-    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
-    variant: "boxes.expandableRow.lineChart.divider"
+    sx: sx.expandableRow.lineChart.divider
   }), ___EmotionJSX(Box, {
     ml: 15
   }, ___EmotionJSX(Box, {
-    variant: "boxes.expandableRow.lineChart.chart"
+    sx: sx.expandableRow.lineChart.chart
   }, ___EmotionJSX(ResponsiveContainer, {
     sx: sx.chartContainer
   }, ___EmotionJSX(LineChart, {
@@ -235,55 +326,50 @@ export var Default = function Default() {
     dot: false,
     stroke: neutral[20]
   })))), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.chartLabel"
+    sx: sx.expandableRowText.lineChart.chartLabel
   }, "No data yet")), ___EmotionJSX(Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.trend"
+    sx: sx.expandableRowText.lineChart.trend
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
     size: "sm"
   }, ___EmotionJSX(SwitchField, {
     "aria-label": "line-chart switch-field"
   }))));
-
   var FullData = ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
-    p: "md",
-    variant: "boxes.expandableRow.titleWrapper"
+    sx: sx.expandableRow.titleWrapper
   }, ___EmotionJSX(Text, {
-    variant: "expandableRow.title"
+    sx: sx.expandableRowText.title
   }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    variant: "expandableRow.subtitle"
+    sx: sx.expandableRowText.subtitle
   }, "Full Data")), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    sx: sx.expandableRow.lineChart.title
   }, hideIfMobile()), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.title"
+    sx: sx.expandableRowText.lineChart.title
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    width: 100
+    sx: sx.expandableRow.lineChart.content
   }, hideIfTablet()), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.count"
+    sx: sx.expandableRowText.lineChart.count
   }, "1,234,234"), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.countLabel"
+    sx: sx.expandableRowText.lineChart.countLabel
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    variant: "expandableRow.chartWrapper",
+    sx: sx.expandableRowButton.chartWrapper,
     onPress: action('seeContributingDataAction'),
-    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
-    variant: "boxes.expandableRow.lineChart.divider"
+    sx: sx.expandableRow.lineChart.divider
   }), ___EmotionJSX(Box, {
     ml: 15
   }, ___EmotionJSX(Box, {
-    variant: "boxes.expandableRow.lineChart.chart",
+    sx: sx.expandableRow.lineChart.chart,
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
     sx: sx.chartContainer
@@ -296,55 +382,50 @@ export var Default = function Default() {
     dot: false,
     stroke: neutral[20]
   })))), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.chartLabel"
+    sx: sx.expandableRowText.lineChart.chartLabel
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.trend"
+    sx: sx.expandableRowText.lineChart.trend
   }, "+ 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
     size: "sm"
   }, ___EmotionJSX(SwitchField, {
     "aria-label": "line-chart switch-field"
   }))));
-
   var PartialData = ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
-    p: "md",
-    variant: "boxes.expandableRow.titleWrapper"
+    sx: sx.expandableRow.titleWrapper
   }, ___EmotionJSX(Text, {
-    variant: "expandableRow.title"
+    sx: sx.expandableRowText.title
   }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    variant: "expandableRow.subtitle"
+    sx: sx.expandableRowText.subtitle
   }, "Partial Data")), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    sx: sx.expandableRow.lineChart.title
   }, hideIfMobile()), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.title"
+    sx: sx.expandableRowText.lineChart.title
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    width: 100
+    sx: sx.expandableRow.lineChart.content
   }, hideIfTablet()), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.count"
+    sx: sx.expandableRowText.lineChart.count
   }, "234,234"), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.countLabel"
+    sx: sx.expandableRowText.lineChart.countLabel
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    variant: "expandableRow.chartWrapper",
+    sx: sx.expandableRowButton.chartWrapper,
     onPress: action('seeContributingDataAction'),
-    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
-    variant: "boxes.expandableRow.lineChart.divider"
+    sx: sx.expandableRow.lineChart.divider
   }), ___EmotionJSX(Box, {
     ml: 15
   }, ___EmotionJSX(Box, {
-    variant: "boxes.expandableRow.lineChart.chart",
+    sx: sx.expandableRow.lineChart.chart,
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
     sx: sx.chartContainer
@@ -357,55 +438,50 @@ export var Default = function Default() {
     dot: false,
     stroke: neutral[20]
   })))), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.chartLabel"
+    sx: sx.expandableRowText.lineChart.chartLabel
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.trend"
+    sx: sx.expandableRowText.lineChart.trend
   }, "- 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
     size: "sm"
   }, ___EmotionJSX(SwitchField, {
     "aria-label": "line-chart switch-field"
   }))));
-
   var ZeroData = ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
-    p: "md",
-    variant: "boxes.expandableRow.titleWrapper"
+    sx: sx.expandableRow.titleWrapper
   }, ___EmotionJSX(Text, {
-    variant: "expandableRow.title"
+    sx: sx.expandableRowText.title
   }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    variant: "expandableRow.subtitle"
+    sx: sx.expandableRowText.subtitle
   }, "Zero Data")), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    sx: sx.expandableRow.lineChart.title
   }, hideIfMobile()), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.title"
+    sx: sx.expandableRowText.lineChart.title
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    width: 100
+    sx: sx.expandableRow.lineChart.content
   }, hideIfTablet()), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.count"
+    sx: sx.expandableRowText.lineChart.count
   }, "0"), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.countLabel"
+    sx: sx.expandableRowText.lineChart.countLabel
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    variant: "expandableRow.chartWrapper",
+    sx: sx.expandableRowButton.chartWrapper,
     onPress: action('seeContributingDataAction'),
-    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
-    variant: "boxes.expandableRow.lineChart.divider"
+    sx: sx.expandableRow.lineChart.divider
   }), ___EmotionJSX(Box, {
     ml: 15
   }, ___EmotionJSX(Box, {
-    variant: "boxes.expandableRow.lineChart.chart",
+    sx: sx.expandableRow.lineChart.chart,
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
     sx: sx.chartContainer
@@ -418,55 +494,50 @@ export var Default = function Default() {
     dot: false,
     stroke: neutral[20]
   })))), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.chartLabel"
+    sx: sx.expandableRowText.lineChart.chartLabel
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.trend"
+    sx: sx.expandableRowText.lineChart.trend
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
     size: "sm"
   }, ___EmotionJSX(SwitchField, {
     "aria-label": "line-chart switch-field"
   }))));
-
   var ZeroValues = ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
-    p: "md",
-    variant: "boxes.expandableRow.titleWrapper"
+    sx: sx.expandableRow.titleWrapper
   }, ___EmotionJSX(Text, {
-    variant: "expandableRow.title"
+    sx: sx.expandableRowText.title
   }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    variant: "expandableRow.subtitle"
+    sx: sx.expandableRowText.subtitle
   }, "Zero Values")), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    sx: sx.expandableRow.lineChart.title
   }, hideIfMobile()), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.title"
+    sx: sx.expandableRowText.lineChart.title
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    width: 100
+    sx: sx.expandableRow.lineChart.content
   }, hideIfTablet()), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.count"
+    sx: sx.expandableRowText.lineChart.count
   }, "0"), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.countLabel"
+    sx: sx.expandableRowText.lineChart.countLabel
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    variant: "expandableRow.chartWrapper",
+    sx: sx.expandableRowButton.chartWrapper,
     onPress: action('seeContributingDataAction'),
-    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
-    variant: "boxes.expandableRow.lineChart.divider"
+    sx: sx.expandableRow.lineChart.divider
   }), ___EmotionJSX(Box, {
     ml: 15
   }, ___EmotionJSX(Box, {
-    variant: "boxes.expandableRow.lineChart.chart",
+    sx: sx.expandableRow.lineChart.chart,
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
     sx: sx.chartContainer
@@ -479,17 +550,16 @@ export var Default = function Default() {
     dot: false,
     stroke: neutral[20]
   })))), ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.chartLabel"
+    sx: sx.expandableRowText.lineChart.chartLabel
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
-    variant: "expandableRow.lineChart.trend"
+    sx: sx.expandableRowText.lineChart.trend
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
     size: "sm"
   }, ___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/collections';
+import { Item } from 'react-stately';
 import CreateIcon from 'mdi-react/CreateIcon';
-import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import FormSelectIcon from 'mdi-react/FormSelectIcon';
-import { SearchField, ListView, Box, IconButton, ScrollBox, Text, Icon } from '../index';
+import MoreVertIcon from 'mdi-react/MoreVertIcon';
+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