@pingux/astro 1.42.0-alpha.0 → 2.0.0-alpha.1

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

@@ -2,12 +2,24 @@
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+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", {
@@ -18,15 +30,17 @@ 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 _addonActions = require("@storybook/addon-actions");
 
 var _colors = require("../styles/colors");
 
@@ -38,6 +52,10 @@ 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: {
@@ -170,6 +188,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 +205,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,6 +217,90 @@ 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'
+      }
+    }
   }
 };
 
@@ -204,7 +309,7 @@ var Default = function Default() {
       ref = _useResizeObserver.ref,
       width = _useResizeObserver.width;
 
-  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
+  var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
       visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
 
   var isTablet = (0, _react.useMemo)(function () {
@@ -224,38 +329,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 +368,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 +384,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 +424,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 +440,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 +480,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 +496,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 +536,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 +552,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 +592,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, {

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 _collections = require("@react-stately/collections");
-
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
+var _FormSelectIcon = _interopRequireDefault(require("mdi-react/FormSelectIcon"));
+
 var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
 
-var _FormSelectIcon = _interopRequireDefault(require("mdi-react/FormSelectIcon"));
+var _reactStately = require("react-stately");
 
 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)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.name,
       textValue: item.name
     }, (0, _react2.jsx)(_index.Box, {

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

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