@pingux/astro 1.41.0-alpha.5 → 1.42.0-alpha.0

package/lib/recipes/LinkedListView.stories.js

@@ -5,8 +5,9 @@ import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/in
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useState } from 'react';
+import { Item } from '@react-stately/collections';
 import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
-import { Box, Badge, Icon, IconButton, Item, ListView, Menu, OverlayProvider, PopoverMenu, Separator, Text } from '../index';
+import { ListView, Text, Box, Icon, IconButton, Chip, Separator, OverlayProvider, PopoverMenu, Menu } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/LinkedListView',
@@ -67,7 +68,7 @@ var testData = [{
 // I.e. the staging rows will need to immediately follow the prod row that they correspond to.
 // This flat, sorted array will then be passed into the listview component as the items prop.
 // You may not need these functions if you are able to change the data shape on the back end
-// (which is recommended for performance reasons)
+// (which is reccomended for performance reasons)
 
 var flattenArray = function flattenArray(array) {
   var newArray = array;
@@ -249,8 +250,8 @@ export var Default = function Default(_ref) {
   }; // made these separate components because staging and production both use them.
 
 
-  var DefaultBadge = function DefaultBadge() {
-    return ___EmotionJSX(Badge, {
+  var DefaultChip = function DefaultChip() {
+    return ___EmotionJSX(Chip, {
       label: "Default",
       bg: "active",
       sx: {
@@ -262,7 +263,7 @@ export var Default = function Default(_ref) {
     });
   };
 
-  var ExprirationBadge = function ExprirationBadge(props) {
+  var ExprirationChip = function ExprirationChip(props) {
     var expirationText = props.expirationText,
         chipText = props.chipText;
     return ___EmotionJSX(Box, {
@@ -272,7 +273,7 @@ export var Default = function Default(_ref) {
       flexGrow: 1,
       alignItems: "center",
       alignSelf: "center"
-    }, ___EmotionJSX(Badge, {
+    }, ___EmotionJSX(Chip, {
       bg: "white",
       sx: {
         border: 'solid 1px',
@@ -325,7 +326,7 @@ export var Default = function Default(_ref) {
         color: 'text.secondary',
         fontSize: 'sm'
       }
-    }, "Policy Id: ", policyId)), chipText && ___EmotionJSX(DefaultBadge, null)), ___EmotionJSX(IconWithPopover, null));
+    }, "Policy Id: ", policyId)), chipText && ___EmotionJSX(DefaultChip, null)), ___EmotionJSX(IconWithPopover, null));
   }; // jsx of the staging row.
 
 
@@ -366,7 +367,7 @@ export var Default = function Default(_ref) {
         color: 'text.secondary',
         fontSize: 'sm'
       }
-    }, "Policy Id: ", policyId))), chipText && ___EmotionJSX(DefaultBadge, null), expirationText && ___EmotionJSX(ExprirationBadge, {
+    }, "Policy Id: ", policyId))), chipText && ___EmotionJSX(DefaultChip, null), expirationText && ___EmotionJSX(ExprirationChip, {
       expirationText: expirationText
     }), ___EmotionJSX(IconWithPopover, null));
   };
@@ -378,20 +379,7 @@ export var Default = function Default(_ref) {
       textValue: item.name,
       "data-id": item.key,
       listItemProps: {
-        minHeight: '75px',
-        sx: {
-          '&.has-inset-separator': {
-            '&:before': {
-              content: '""',
-              position: 'absolute',
-              width: 'calc(100% - 43px)',
-              right: 0,
-              bottom: 0,
-              borderBottom: '1px solid',
-              borderBottomColor: 'line.hairline'
-            }
-          }
-        }
+        variant: 'boxes.linkedListViewItem'
       }
     }), item.parentId ? ___EmotionJSX(Staging, _extends({}, item, {
       hasInsetSeparator: true

package/lib/recipes/ListAndPanel.stories.js

@@ -1,13 +1,13 @@
 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/focus';
+import { Item } from '@react-stately/collections';
 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';

package/lib/recipes/LogoTabs.stories.js

@@ -18,7 +18,7 @@ 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 { tab } from '../components/Tabs/Tabs.style';
+import { tab } from '../styles/variants/tabs';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Logo Tabs'

package/lib/recipes/MaskedValue.stories.js

@@ -35,17 +35,6 @@ var sx = {
     width: 'fit-content',
     marginLeft: 'sm',
     alignSelf: 'auto'
-  },
-  maskedItem: {
-    color: 'black',
-    fontSize: '16px',
-    width: 252,
-    wordBreak: 'break-all',
-    '&.is-masked': {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      fontWeight: 3
-    }
   }
 };
 export var Default = function Default(_ref) {
@@ -70,7 +59,7 @@ export var Default = function Default(_ref) {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Text, {
-    sx: sx.maskedItem,
+    variant: "maskedValue",
     className: classNames
   }, isMasked ? _repeatInstanceProperty(_context = '•').call(_context, 99) : secretData), ___EmotionJSX(IconButton, {
     "aria-label": isMasked ? 'Show content' : 'Hide content',

package/lib/recipes/OneWayToBidirectionalArrow.stories.js

@@ -123,7 +123,7 @@ export var Default = function Default() {
       size: 'xs'
     },
     buttonProps: {
-      variant: 'bidirectional'
+      variant: 'bidirectionalIconButton'
     }
   })), ___EmotionJSX(ComboBoxField, {
     items: items,
@@ -195,7 +195,7 @@ export var Default = function Default() {
       size: 8
     },
     buttonProps: {
-      variant: 'bidirectional'
+      variant: 'bidirectionalIconButton'
     }
   })), ___EmotionJSX(ComboBoxField, {
     items: items,

package/lib/recipes/RowLineChart.stories.js

@@ -1,23 +1,9 @@
-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 { useVisuallyHidden } from 'react-aria';
 import { Line, LineChart, ResponsiveContainer } from 'recharts';
-import useResizeObserver from 'use-resize-observer';
 import { action } from '@storybook/addon-actions';
+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 { jsx as ___EmotionJSX } from "@emotion/react";
@@ -152,16 +138,6 @@ 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',
@@ -169,7 +145,14 @@ var sx = {
     justifyContent: 'space-between',
     pr: '20px'
   },
-  chartTitleContainer: {},
+  button: {
+    ml: 'md',
+    pr: 'md'
+  },
+  chartTitleContainer: {
+    ml: '20px',
+    pr: 'md'
+  },
   chartContainer: {
     width: '100%',
     height: '100%'
@@ -181,90 +164,6 @@ 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() {
@@ -293,34 +192,38 @@ export var Default = function Default() {
     sx: sx.container,
     ref: ref
   }, ___EmotionJSX(Box, {
-    sx: sx.expandableRow.titleWrapper
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
   }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.title
+    variant: "expandableRow.title"
   }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.subtitle
+    variant: "expandableRow.subtitle"
   }, "Empty Data")), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.title
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.title
+    variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.content
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
   }, hideIfTablet()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.count
+    variant: "expandableRow.lineChart.count"
   }, "0"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
+    variant: "expandableRow.lineChart.countLabel"
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    sx: sx.expandableRowButton.chartWrapper,
+    variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.divider
+    variant: "boxes.expandableRow.lineChart.divider"
   }), ___EmotionJSX(Box, {
     ml: 15
   }, ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.chart
+    variant: "boxes.expandableRow.lineChart.chart"
   }, ___EmotionJSX(ResponsiveContainer, {
     sx: sx.chartContainer
   }, ___EmotionJSX(LineChart, {
@@ -332,12 +235,12 @@ export var Default = function Default() {
     dot: false,
     stroke: neutral[20]
   })))), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.chartLabel
+    variant: "expandableRow.lineChart.chartLabel"
   }, "No data yet")), ___EmotionJSX(Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.trend
+    variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
     size: "sm"
   }, ___EmotionJSX(SwitchField, {
@@ -349,34 +252,38 @@ export var Default = function Default() {
     sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
-    sx: sx.expandableRow.titleWrapper
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
   }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.title
+    variant: "expandableRow.title"
   }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.subtitle
+    variant: "expandableRow.subtitle"
   }, "Full Data")), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.title
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.title
+    variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.content
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
   }, hideIfTablet()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.count
+    variant: "expandableRow.lineChart.count"
   }, "1,234,234"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
+    variant: "expandableRow.lineChart.countLabel"
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    sx: sx.expandableRowButton.chartWrapper,
+    variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.divider
+    variant: "boxes.expandableRow.lineChart.divider"
   }), ___EmotionJSX(Box, {
     ml: 15
   }, ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.chart,
+    variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
     sx: sx.chartContainer
@@ -389,12 +296,12 @@ export var Default = function Default() {
     dot: false,
     stroke: neutral[20]
   })))), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.chartLabel
+    variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.trend
+    variant: "expandableRow.lineChart.trend"
   }, "+ 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
     size: "sm"
   }, ___EmotionJSX(SwitchField, {
@@ -406,34 +313,38 @@ export var Default = function Default() {
     sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
-    sx: sx.expandableRow.titleWrapper
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
   }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.title
+    variant: "expandableRow.title"
   }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.subtitle
+    variant: "expandableRow.subtitle"
   }, "Partial Data")), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.title
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.title
+    variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.content
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
   }, hideIfTablet()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.count
+    variant: "expandableRow.lineChart.count"
   }, "234,234"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
+    variant: "expandableRow.lineChart.countLabel"
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    sx: sx.expandableRowButton.chartWrapper,
+    variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.divider
+    variant: "boxes.expandableRow.lineChart.divider"
   }), ___EmotionJSX(Box, {
     ml: 15
   }, ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.chart,
+    variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
     sx: sx.chartContainer
@@ -446,12 +357,12 @@ export var Default = function Default() {
     dot: false,
     stroke: neutral[20]
   })))), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.chartLabel
+    variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.trend
+    variant: "expandableRow.lineChart.trend"
   }, "- 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
     size: "sm"
   }, ___EmotionJSX(SwitchField, {
@@ -463,34 +374,38 @@ export var Default = function Default() {
     sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
-    sx: sx.expandableRow.titleWrapper
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
   }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.title
+    variant: "expandableRow.title"
   }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.subtitle
+    variant: "expandableRow.subtitle"
   }, "Zero Data")), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.title
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.title
+    variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.content
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
   }, hideIfTablet()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.count
+    variant: "expandableRow.lineChart.count"
   }, "0"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
+    variant: "expandableRow.lineChart.countLabel"
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    sx: sx.expandableRowButton.chartWrapper,
+    variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.divider
+    variant: "boxes.expandableRow.lineChart.divider"
   }), ___EmotionJSX(Box, {
     ml: 15
   }, ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.chart,
+    variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
     sx: sx.chartContainer
@@ -503,12 +418,12 @@ export var Default = function Default() {
     dot: false,
     stroke: neutral[20]
   })))), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.chartLabel
+    variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.trend
+    variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
     size: "sm"
   }, ___EmotionJSX(SwitchField, {
@@ -520,34 +435,38 @@ export var Default = function Default() {
     sx: sx.container,
     mt: 20
   }, ___EmotionJSX(Box, {
-    sx: sx.expandableRow.titleWrapper
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
   }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.title
+    variant: "expandableRow.title"
   }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.subtitle
+    variant: "expandableRow.subtitle"
   }, "Zero Values")), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.title
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.title
+    variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.content
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
   }, hideIfTablet()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.count
+    variant: "expandableRow.lineChart.count"
   }, "0"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
+    variant: "expandableRow.lineChart.countLabel"
   }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    sx: sx.expandableRowButton.chartWrapper,
+    variant: "expandableRow.chartWrapper",
     onPress: action('seeContributingDataAction'),
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.divider
+    variant: "boxes.expandableRow.lineChart.divider"
   }), ___EmotionJSX(Box, {
     ml: 15
   }, ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.chart,
+    variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, ___EmotionJSX(ResponsiveContainer, {
     sx: sx.chartContainer
@@ -560,12 +479,12 @@ export var Default = function Default() {
     dot: false,
     stroke: neutral[20]
   })))), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.chartLabel
+    variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), ___EmotionJSX(Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.trend
+    variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
     size: "sm"
   }, ___EmotionJSX(SwitchField, {

package/lib/recipes/ScrollableListView.stories.js

@@ -3,10 +3,10 @@ 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 CreateIcon from 'mdi-react/CreateIcon';
-import FormSelectIcon from 'mdi-react/FormSelectIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
-import { Item } from 'react-stately';
+import FormSelectIcon from 'mdi-react/FormSelectIcon';
 import { SearchField, ListView, Box, IconButton, ScrollBox, Text, Icon } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {