@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/cjs/recipes/RowLineChart.stories.js

@@ -1,43 +1,34 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-
-var _recharts = require("recharts");
-
+var _reactAria = require("react-aria");
 var _addonActions = require("@storybook/addon-actions");
-
+var _recharts = require("recharts");
 var _useResizeObserver2 = _interopRequireDefault(require("use-resize-observer"));
-
-var _visuallyHidden = require("@react-aria/visually-hidden");
-
-var _colors = require("../styles/colors");
-
 var _index = require("../index");
-
+var _colors = require("../styles/colors");
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+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) { (0, _defineProperty2["default"])(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; }
 var _default = {
   title: 'Recipes/Row Line Chart',
   parameters: {
@@ -170,6 +161,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',
@@ -177,14 +178,7 @@ var sx = {
     justifyContent: 'space-between',
     pr: '20px'
   },
-  button: {
-    ml: 'md',
-    pr: 'md'
-  },
-  chartTitleContainer: {
-    ml: '20px',
-    pr: 'md'
-  },
+  chartTitleContainer: {},
   chartContainer: {
     width: '100%',
     height: '100%'
@@ -196,17 +190,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'
+      }
+    }
   }
 };
-
 var Default = function Default() {
   var _useResizeObserver = (0, _useResizeObserver2["default"])(),
-      ref = _useResizeObserver.ref,
-      width = _useResizeObserver.width;
-
-  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
-      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
-
+    ref = _useResizeObserver.ref,
+    width = _useResizeObserver.width;
+  var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
+    visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
   var isTablet = (0, _react.useMemo)(function () {
     return width <= 605;
   }, [width]);
@@ -224,38 +299,34 @@ var Default = function Default() {
     sx: sx.container,
     ref: ref
   }, (0, _react2.jsx)(_index.Box, {
-    p: "md",
-    variant: "boxes.expandableRow.titleWrapper"
+    sx: sx.expandableRow.titleWrapper
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.title"
+    sx: sx.expandableRowText.title
   }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.subtitle"
+    sx: sx.expandableRowText.subtitle
   }, "Empty Data")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    sx: sx.expandableRow.lineChart.title
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.title"
+    sx: sx.expandableRowText.lineChart.title
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    width: 100
+    sx: sx.expandableRow.lineChart.content
   }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.count"
+    sx: sx.expandableRowText.lineChart.count
   }, "0"), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.countLabel"
+    sx: sx.expandableRowText.lineChart.countLabel
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
-    variant: "expandableRow.chartWrapper",
+    sx: sx.expandableRowButton.chartWrapper,
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
-    variant: "boxes.expandableRow.lineChart.divider"
+    sx: sx.expandableRow.lineChart.divider
   }), (0, _react2.jsx)(_index.Box, {
     ml: 15
   }, (0, _react2.jsx)(_index.Box, {
-    variant: "boxes.expandableRow.lineChart.chart"
+    sx: sx.expandableRow.lineChart.chart
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
     sx: sx.chartContainer
   }, (0, _react2.jsx)(_recharts.LineChart, {
@@ -267,12 +338,12 @@ var Default = function Default() {
     dot: false,
     stroke: _colors.neutral[20]
   })))), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.chartLabel"
+    sx: sx.expandableRowText.lineChart.chartLabel
   }, "No data yet")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.trend"
+    sx: sx.expandableRowText.lineChart.trend
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
     size: "sm"
   }, (0, _react2.jsx)(_index.SwitchField, {
@@ -283,38 +354,34 @@ var Default = function Default() {
     sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
-    p: "md",
-    variant: "boxes.expandableRow.titleWrapper"
+    sx: sx.expandableRow.titleWrapper
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.title"
+    sx: sx.expandableRowText.title
   }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.subtitle"
+    sx: sx.expandableRowText.subtitle
   }, "Full Data")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    sx: sx.expandableRow.lineChart.title
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.title"
+    sx: sx.expandableRowText.lineChart.title
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    width: 100
+    sx: sx.expandableRow.lineChart.content
   }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.count"
+    sx: sx.expandableRowText.lineChart.count
   }, "1,234,234"), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.countLabel"
+    sx: sx.expandableRowText.lineChart.countLabel
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
-    variant: "expandableRow.chartWrapper",
+    sx: sx.expandableRowButton.chartWrapper,
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
-    variant: "boxes.expandableRow.lineChart.divider"
+    sx: sx.expandableRow.lineChart.divider
   }), (0, _react2.jsx)(_index.Box, {
     ml: 15
   }, (0, _react2.jsx)(_index.Box, {
-    variant: "boxes.expandableRow.lineChart.chart",
+    sx: sx.expandableRow.lineChart.chart,
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
     sx: sx.chartContainer
@@ -327,12 +394,12 @@ var Default = function Default() {
     dot: false,
     stroke: _colors.neutral[20]
   })))), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.chartLabel"
+    sx: sx.expandableRowText.lineChart.chartLabel
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.trend"
+    sx: sx.expandableRowText.lineChart.trend
   }, "+ 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
     size: "sm"
   }, (0, _react2.jsx)(_index.SwitchField, {
@@ -343,38 +410,34 @@ var Default = function Default() {
     sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
-    p: "md",
-    variant: "boxes.expandableRow.titleWrapper"
+    sx: sx.expandableRow.titleWrapper
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.title"
+    sx: sx.expandableRowText.title
   }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.subtitle"
+    sx: sx.expandableRowText.subtitle
   }, "Partial Data")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    sx: sx.expandableRow.lineChart.title
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.title"
+    sx: sx.expandableRowText.lineChart.title
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    width: 100
+    sx: sx.expandableRow.lineChart.content
   }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.count"
+    sx: sx.expandableRowText.lineChart.count
   }, "234,234"), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.countLabel"
+    sx: sx.expandableRowText.lineChart.countLabel
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
-    variant: "expandableRow.chartWrapper",
+    sx: sx.expandableRowButton.chartWrapper,
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
-    variant: "boxes.expandableRow.lineChart.divider"
+    sx: sx.expandableRow.lineChart.divider
   }), (0, _react2.jsx)(_index.Box, {
     ml: 15
   }, (0, _react2.jsx)(_index.Box, {
-    variant: "boxes.expandableRow.lineChart.chart",
+    sx: sx.expandableRow.lineChart.chart,
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
     sx: sx.chartContainer
@@ -387,12 +450,12 @@ var Default = function Default() {
     dot: false,
     stroke: _colors.neutral[20]
   })))), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.chartLabel"
+    sx: sx.expandableRowText.lineChart.chartLabel
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.trend"
+    sx: sx.expandableRowText.lineChart.trend
   }, "- 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
     size: "sm"
   }, (0, _react2.jsx)(_index.SwitchField, {
@@ -403,38 +466,34 @@ var Default = function Default() {
     sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
-    p: "md",
-    variant: "boxes.expandableRow.titleWrapper"
+    sx: sx.expandableRow.titleWrapper
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.title"
+    sx: sx.expandableRowText.title
   }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.subtitle"
+    sx: sx.expandableRowText.subtitle
   }, "Zero Data")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    sx: sx.expandableRow.lineChart.title
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.title"
+    sx: sx.expandableRowText.lineChart.title
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    width: 100
+    sx: sx.expandableRow.lineChart.content
   }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.count"
+    sx: sx.expandableRowText.lineChart.count
   }, "0"), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.countLabel"
+    sx: sx.expandableRowText.lineChart.countLabel
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
-    variant: "expandableRow.chartWrapper",
+    sx: sx.expandableRowButton.chartWrapper,
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
-    variant: "boxes.expandableRow.lineChart.divider"
+    sx: sx.expandableRow.lineChart.divider
   }), (0, _react2.jsx)(_index.Box, {
     ml: 15
   }, (0, _react2.jsx)(_index.Box, {
-    variant: "boxes.expandableRow.lineChart.chart",
+    sx: sx.expandableRow.lineChart.chart,
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
     sx: sx.chartContainer
@@ -447,12 +506,12 @@ var Default = function Default() {
     dot: false,
     stroke: _colors.neutral[20]
   })))), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.chartLabel"
+    sx: sx.expandableRowText.lineChart.chartLabel
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.trend"
+    sx: sx.expandableRowText.lineChart.trend
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
     size: "sm"
   }, (0, _react2.jsx)(_index.SwitchField, {
@@ -463,38 +522,34 @@ var Default = function Default() {
     sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
-    p: "md",
-    variant: "boxes.expandableRow.titleWrapper"
+    sx: sx.expandableRow.titleWrapper
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.title"
+    sx: sx.expandableRowText.title
   }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.subtitle"
+    sx: sx.expandableRowText.subtitle
   }, "Zero Values")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    sx: sx.chartTitleContainer
+    sx: sx.expandableRow.lineChart.title
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.title"
+    sx: sx.expandableRowText.lineChart.title
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
-    width: 100
+    sx: sx.expandableRow.lineChart.content
   }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.count"
+    sx: sx.expandableRowText.lineChart.count
   }, "0"), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.countLabel"
+    sx: sx.expandableRowText.lineChart.countLabel
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
-    variant: "expandableRow.chartWrapper",
+    sx: sx.expandableRowButton.chartWrapper,
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
-    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
-    variant: "boxes.expandableRow.lineChart.divider"
+    sx: sx.expandableRow.lineChart.divider
   }), (0, _react2.jsx)(_index.Box, {
     ml: 15
   }, (0, _react2.jsx)(_index.Box, {
-    variant: "boxes.expandableRow.lineChart.chart",
+    sx: sx.expandableRow.lineChart.chart,
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
     sx: sx.chartContainer
@@ -507,12 +562,12 @@ var Default = function Default() {
     dot: false,
     stroke: _colors.neutral[20]
   })))), (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.chartLabel"
+    sx: sx.expandableRowText.lineChart.chartLabel
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "expandableRow.lineChart.trend"
+    sx: sx.expandableRowText.lineChart.trend
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
     size: "sm"
   }, (0, _react2.jsx)(_index.SwitchField, {
@@ -520,5 +575,4 @@ var Default = function Default() {
   }))));
   return (0, _react2.jsx)(_react["default"].Fragment, null, EmptyData, FullData, PartialData, ZeroData, ZeroValues);
 };
-
 exports.Default = Default;

package/lib/cjs/recipes/ScrollableListView.stories.js

@@ -1,47 +1,28 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _collections = require("@react-stately/collections");
-
+var _reactStately = require("react-stately");
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
-
-var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
-
 var _FormSelectIcon = _interopRequireDefault(require("mdi-react/FormSelectIcon"));
-
+var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
 var _index = require("../index");
-
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var _default = {
   title: 'Recipes/Scrollable List View'
 };
@@ -79,34 +60,27 @@ var unfilteredItems = [{
   name: 'Elephant',
   id: '7'
 }];
-
 var Default = function Default(_ref) {
-  var args = (0, _extends2["default"])({}, _ref);
-
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
   var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   var _useState3 = (0, _react.useState)(unfilteredItems),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      items = _useState4[0],
-      setItems = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    items = _useState4[0],
+    setItems = _useState4[1];
   var filterItems = function filterItems(input) {
     var filtered = (0, _filter["default"])(unfilteredItems).call(unfilteredItems, function (obj) {
       var _context;
-
       return (0, _includes["default"])(_context = obj.name.toLowerCase()).call(_context, input.toLowerCase());
     });
     setItems(filtered);
   };
-
   var onChangeInput = function onChangeInput(input) {
     setValue(input);
     filterItems(input);
   };
-
   return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.SearchField, {
     value: value,
     onChange: onChangeInput
@@ -116,7 +90,7 @@ var Default = function Default(_ref) {
   }, (0, _react2.jsx)(_index.ListView, (0, _extends2["default"])({}, args, {
     items: items
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.name,
       textValue: item.name
     }, (0, _react2.jsx)(_index.Box, {
@@ -150,5 +124,4 @@ var Default = function Default(_ref) {
     })))));
   })));
 };
-
 exports.Default = Default;