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

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

@@ -2,23 +2,11 @@
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 
-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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 
 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 _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
@@ -30,17 +18,15 @@ 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 _reactAria = require("react-aria");
-
 var _recharts = require("recharts");
 
+var _addonActions = require("@storybook/addon-actions");
+
 var _useResizeObserver2 = _interopRequireDefault(require("use-resize-observer"));
 
-var _addonActions = require("@storybook/addon-actions");
+var _visuallyHidden = require("@react-aria/visually-hidden");
 
 var _colors = require("../styles/colors");
 
@@ -52,10 +38,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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: {
@@ -188,16 +170,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',
@@ -205,7 +177,14 @@ var sx = {
     justifyContent: 'space-between',
     pr: '20px'
   },
-  chartTitleContainer: {},
+  button: {
+    ml: 'md',
+    pr: 'md'
+  },
+  chartTitleContainer: {
+    ml: '20px',
+    pr: 'md'
+  },
   chartContainer: {
     width: '100%',
     height: '100%'
@@ -217,90 +196,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'
-      }
-    }
   }
 };
 
@@ -309,7 +204,7 @@ var Default = function Default() {
       ref = _useResizeObserver.ref,
       width = _useResizeObserver.width;
 
-  var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
+  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
       visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
 
   var isTablet = (0, _react.useMemo)(function () {
@@ -329,34 +224,38 @@ var Default = function Default() {
     sx: sx.container,
     ref: ref
   }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.titleWrapper
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.title
+    variant: "expandableRow.title"
   }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.subtitle
+    variant: "expandableRow.subtitle"
   }, "Empty Data")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    sx: sx.expandableRow.lineChart.title
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.title
+    variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    sx: sx.expandableRow.lineChart.content
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
   }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.count
+    variant: "expandableRow.lineChart.count"
   }, "0"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
+    variant: "expandableRow.lineChart.countLabel"
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
-    sx: sx.expandableRowButton.chartWrapper,
+    variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.lineChart.divider
+    variant: "boxes.expandableRow.lineChart.divider"
   }), (0, _react2.jsx)(_index.Box, {
     ml: 15
   }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.lineChart.chart
+    variant: "boxes.expandableRow.lineChart.chart"
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
     sx: sx.chartContainer
   }, (0, _react2.jsx)(_recharts.LineChart, {
@@ -368,12 +267,12 @@ var Default = function Default() {
     dot: false,
     stroke: _colors.neutral[20]
   })))), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.chartLabel
+    variant: "expandableRow.lineChart.chartLabel"
   }, "No data yet")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.trend
+    variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
     size: "sm"
   }, (0, _react2.jsx)(_index.SwitchField, {
@@ -384,34 +283,38 @@ var Default = function Default() {
     sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.titleWrapper
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.title
+    variant: "expandableRow.title"
   }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.subtitle
+    variant: "expandableRow.subtitle"
   }, "Full Data")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    sx: sx.expandableRow.lineChart.title
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.title
+    variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    sx: sx.expandableRow.lineChart.content
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
   }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.count
+    variant: "expandableRow.lineChart.count"
   }, "1,234,234"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
+    variant: "expandableRow.lineChart.countLabel"
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
-    sx: sx.expandableRowButton.chartWrapper,
+    variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.lineChart.divider
+    variant: "boxes.expandableRow.lineChart.divider"
   }), (0, _react2.jsx)(_index.Box, {
     ml: 15
   }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.lineChart.chart,
+    variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
     sx: sx.chartContainer
@@ -424,12 +327,12 @@ var Default = function Default() {
     dot: false,
     stroke: _colors.neutral[20]
   })))), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.chartLabel
+    variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.trend
+    variant: "expandableRow.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, {
@@ -440,34 +343,38 @@ var Default = function Default() {
     sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.titleWrapper
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.title
+    variant: "expandableRow.title"
   }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.subtitle
+    variant: "expandableRow.subtitle"
   }, "Partial Data")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    sx: sx.expandableRow.lineChart.title
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.title
+    variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    sx: sx.expandableRow.lineChart.content
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
   }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.count
+    variant: "expandableRow.lineChart.count"
   }, "234,234"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
+    variant: "expandableRow.lineChart.countLabel"
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
-    sx: sx.expandableRowButton.chartWrapper,
+    variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.lineChart.divider
+    variant: "boxes.expandableRow.lineChart.divider"
   }), (0, _react2.jsx)(_index.Box, {
     ml: 15
   }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.lineChart.chart,
+    variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
     sx: sx.chartContainer
@@ -480,12 +387,12 @@ var Default = function Default() {
     dot: false,
     stroke: _colors.neutral[20]
   })))), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.chartLabel
+    variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.trend
+    variant: "expandableRow.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, {
@@ -496,34 +403,38 @@ var Default = function Default() {
     sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.titleWrapper
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.title
+    variant: "expandableRow.title"
   }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.subtitle
+    variant: "expandableRow.subtitle"
   }, "Zero Data")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    sx: sx.expandableRow.lineChart.title
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.title
+    variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    sx: sx.expandableRow.lineChart.content
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
   }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.count
+    variant: "expandableRow.lineChart.count"
   }, "0"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
+    variant: "expandableRow.lineChart.countLabel"
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
-    sx: sx.expandableRowButton.chartWrapper,
+    variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.lineChart.divider
+    variant: "boxes.expandableRow.lineChart.divider"
   }), (0, _react2.jsx)(_index.Box, {
     ml: 15
   }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.lineChart.chart,
+    variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
     sx: sx.chartContainer
@@ -536,12 +447,12 @@ var Default = function Default() {
     dot: false,
     stroke: _colors.neutral[20]
   })))), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.chartLabel
+    variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.trend
+    variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
     size: "sm"
   }, (0, _react2.jsx)(_index.SwitchField, {
@@ -552,34 +463,38 @@ var Default = function Default() {
     sx: sx.container,
     mt: 20
   }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.titleWrapper
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.title
+    variant: "expandableRow.title"
   }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.subtitle
+    variant: "expandableRow.subtitle"
   }, "Zero Values")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    sx: sx.expandableRow.lineChart.title
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
   }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.title
+    variant: "expandableRow.lineChart.title"
   }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
-    sx: sx.expandableRow.lineChart.content
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
   }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.count
+    variant: "expandableRow.lineChart.count"
   }, "0"), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
+    variant: "expandableRow.lineChart.countLabel"
   }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
-    sx: sx.expandableRowButton.chartWrapper,
+    variant: "expandableRow.chartWrapper",
     onPress: (0, _addonActions.action)('seeContributingDataAction'),
+    sx: sx.button,
     "aria-label": "line-chart button"
   }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.lineChart.divider
+    variant: "boxes.expandableRow.lineChart.divider"
   }), (0, _react2.jsx)(_index.Box, {
     ml: 15
   }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.expandableRow.lineChart.chart,
+    variant: "boxes.expandableRow.lineChart.chart",
     width: 50
   }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
     sx: sx.chartContainer
@@ -592,12 +507,12 @@ var Default = function Default() {
     dot: false,
     stroke: _colors.neutral[20]
   })))), (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.chartLabel
+    variant: "expandableRow.lineChart.chartLabel"
   }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
     size: "sm",
     sx: sx.chartTrendContainer
   }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.expandableRowText.lineChart.trend
+    variant: "expandableRow.lineChart.trend"
   }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
     size: "sm"
   }, (0, _react2.jsx)(_index.SwitchField, {

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

@@ -26,13 +26,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
+var _collections = require("@react-stately/collections");
 
-var _FormSelectIcon = _interopRequireDefault(require("mdi-react/FormSelectIcon"));
+var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
 var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
 
-var _reactStately = require("react-stately");
+var _FormSelectIcon = _interopRequireDefault(require("mdi-react/FormSelectIcon"));
 
 var _index = require("../index");
 
@@ -116,7 +116,7 @@ var Default = function Default(_ref) {
   }, (0, _react2.jsx)(_index.ListView, (0, _extends2["default"])({}, args, {
     items: items
   }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
+    return (0, _react2.jsx)(_collections.Item, {
       key: item.name,
       textValue: item.name
     }, (0, _react2.jsx)(_index.Box, {

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

@@ -32,15 +32,21 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactAria = require("react-aria");
+var _slider = require("@react-aria/slider");
 
-var _reactStately = require("react-stately");
+var _slider2 = require("@react-stately/slider");
+
+var _focus = require("@react-aria/focus");
+
+var _visuallyHidden = require("@react-aria/visually-hidden");
+
+var _utils = require("@react-aria/utils");
 
 var _i18n = require("@react-aria/i18n");
 
 var _index = require("../index");
 
-var _Buttons = require("../components/Button/Buttons.styles");
+var _buttons = require("../styles/variants/buttons");
 
 var _react2 = require("@emotion/react");
 
@@ -88,7 +94,7 @@ var sx = {
   },
   thumbContainer: {
     position: 'absolute',
-    top: 17,
+    top: 5,
     transform: 'translateX(-50%)'
   },
   thumb: {
@@ -136,11 +142,11 @@ var Slider = function Slider(props) {
   var trackRef = _react["default"].useRef(null);
 
   var numberFormatter = (0, _i18n.useNumberFormatter)(props.formatOptions);
-  var state = (0, _reactStately.useSliderState)(_objectSpread(_objectSpread({}, props), {}, {
+  var state = (0, _slider2.useSliderState)(_objectSpread(_objectSpread({}, props), {}, {
     numberFormatter: numberFormatter
   }));
 
-  var _useSlider = (0, _reactAria.useSlider)(props, state, trackRef),
+  var _useSlider = (0, _slider.useSlider)(props, state, trackRef),
       groupProps = _useSlider.groupProps,
       trackProps = _useSlider.trackProps,
       labelProps = _useSlider.labelProps,
@@ -173,11 +179,11 @@ var RangeSlider = function RangeSlider(props) {
   var trackRef = _react["default"].useRef(null);
 
   var numberFormatter = (0, _i18n.useNumberFormatter)(props.formatOptions);
-  var state = (0, _reactStately.useSliderState)(_objectSpread(_objectSpread({}, props), {}, {
+  var state = (0, _slider2.useSliderState)(_objectSpread(_objectSpread({}, props), {}, {
     numberFormatter: numberFormatter
   }));
 
-  var _useSlider2 = (0, _reactAria.useSlider)(props, state, trackRef),
+  var _useSlider2 = (0, _slider.useSlider)(props, state, trackRef),
       groupProps = _useSlider2.groupProps,
       trackProps = _useSlider2.trackProps,
       labelProps = _useSlider2.labelProps,
@@ -212,7 +218,7 @@ var Thumb = function Thumb(props) {
 
   var inputRef = _react["default"].useRef(null);
 
-  var _useSliderThumb = (0, _reactAria.useSliderThumb)({
+  var _useSliderThumb = (0, _slider.useSliderThumb)({
     index: index,
     trackRef: trackRef,
     inputRef: inputRef
@@ -220,7 +226,7 @@ var Thumb = function Thumb(props) {
       thumbProps = _useSliderThumb.thumbProps,
       inputProps = _useSliderThumb.inputProps;
 
-  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+  var _useFocusRing = (0, _focus.useFocusRing)(),
       focusProps = _useFocusRing.focusProps,
       isFocusVisible = _useFocusRing.isFocusVisible;
 
@@ -229,8 +235,8 @@ var Thumb = function Thumb(props) {
       left: "".concat(state.getThumbPercent(index) * 100, "%")
     })
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, thumbProps, {
-    sx: _objectSpread(_objectSpread({}, sx.thumb), isFocusVisible && _Buttons.defaultFocus)
-  }), (0, _react2.jsx)(_reactAria.VisuallyHidden, null, (0, _react2.jsx)("input", (0, _extends2["default"])({
+    sx: _objectSpread(_objectSpread({}, sx.thumb), isFocusVisible && _buttons.defaultFocus)
+  }), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)("input", (0, _extends2["default"])({
     ref: inputRef
-  }, (0, _reactAria.mergeProps)(inputProps, focusProps))))));
+  }, (0, _utils.mergeProps)(inputProps, focusProps))))));
 };

package/lib/cjs/styles/ColorDocumentation.js

@@ -38,7 +38,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactStately = require("react-stately");
+var _collections = require("@react-stately/collections");
 
 var _Box = _interopRequireDefault(require("../components/Box"));
 
@@ -309,7 +309,7 @@ function ColorSchema() {
     onSelectionChange: setMatcher,
     label: "Desired method"
   }, (0, _map["default"])(_context9 = (0, _keys["default"])(matchers)).call(_context9, function (key) {
-    return (0, _react2.jsx)(_reactStately.Item, {
+    return (0, _react2.jsx)(_collections.Item, {
       key: key
     }, key);
   })), (0, _react2.jsx)(Colors, {