@pingux/astro 1.42.0 → 2.0.0-alpha.1

package/lib/recipes/RowLineChart.stories.js

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

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

package/lib/recipes/Slider.stories.js

@@ -17,14 +17,11 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 
 /* eslint-disable no-nested-ternary */
 import React from 'react';
-import { useSlider, useSliderThumb } from '@react-aria/slider';
-import { useSliderState } from '@react-stately/slider';
-import { useFocusRing } from '@react-aria/focus';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { mergeProps } from '@react-aria/utils';
+import { mergeProps, useFocusRing, useSlider, useSliderThumb, VisuallyHidden } from 'react-aria';
+import { useSliderState } from 'react-stately';
 import { useNumberFormatter } from '@react-aria/i18n';
 import { Box } from '../index';
-import { defaultFocus } from '../styles/variants/buttons';
+import { defaultFocus } from '../components/Button/Buttons.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Slider'
@@ -65,7 +62,7 @@ var sx = {
   },
   thumbContainer: {
     position: 'absolute',
-    top: 5,
+    top: 17,
     transform: 'translateX(-50%)'
   },
   thumb: {

package/lib/styles/ColorDocumentation.js

@@ -9,7 +9,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Item } from '@react-stately/collections';
+import { Item } from 'react-stately';
 import Box from '../components/Box';
 import Text from '../components/Text';
 import TextField from '../components/TextField';

package/lib/styles/forms/index.js

@@ -12,21 +12,30 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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 * as checkbox from './checkbox';
-import comboBox from './comboBox';
-import * as input from './input';
-import * as label from './label';
-import * as radio from './radio';
-import search from './search';
-import * as select from './select';
-import * as switchable from './switch'; // 'switch' is a reserved keyword
+import * as checkbox from '../../components/Checkbox/Checkbox.styles';
+import colorField from '../../components/ColorField/ColorField.styles';
+import comboBox from '../../components/ComboBox/ComboBox.styles';
+import fileInputField from '../../components/FileInputField/FileInputField.styles';
+import * as input from '../../components/Input/Input.styles';
+import * as label from '../../components/Label/Label.styles';
+import numberField from '../../components/NumberField/NumberField.styles';
+import radio from '../../components/Radio/Radio.styles';
+import search from '../../components/SearchField/Search.styles';
+import * as select from '../../components/SelectField/Select.styles';
+import * as switchable from '../../components/Switch/Switch.styles'; // 'switch' is a reserved keyword
 
-import * as textarea from './textarea'; // See ThemeUI docs on variants and themes for intended structure
+import textarea from '../../components/TextArea/TextArea.styles'; // See ThemeUI docs on variants and themes for intended structure
 // Variants should be defined in the approprate file.
 
-export default _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
-  comboBox: comboBox
-}, input), label), radio), select), textarea), {}, {
+export default _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
+  colorField: colorField,
+  comboBox: comboBox,
+  fileInputField: fileInputField
+}, input), label), {}, {
+  numberField: numberField,
+  radio: radio
+}, select), {}, {
+  textarea: textarea,
   "switch": _objectSpread({}, switchable),
   search: search
 });

package/lib/styles/theme-ui/ThemeView.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { JSONTree } from 'react-json-tree';
+import theme from '../theme';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default (function () {
+  return ___EmotionJSX(JSONTree, {
+    data: theme
+  });
+});

package/lib/styles/theme.js

@@ -17,7 +17,7 @@ import colors, { accent, line, shadow, focus } from './colors';
 import { fontSizes, fontWeights, textColors } from './text';
 import breakpoints from './breakpoints';
 import forms from './forms';
-import { variants, buttons, text, images, links, bidirectionalIconButton } from './variants';
+import { badges, buttons, cards, images, links, text, variants } from './variants';
 export default {
   name: 'Astro',
   space: spacing,
@@ -52,9 +52,9 @@ export default {
   forms: forms,
   text: text,
   images: images,
-  buttons: _objectSpread(_objectSpread({}, buttons), {}, {
-    bidirectionalIconButton: bidirectionalIconButton
-  }),
+  buttons: buttons,
+  badges: badges,
+  cards: cards,
   textColors: textColors,
   links: links,
   variants: variants

package/lib/styles/themeOverrides/stories/AccordionGroup.chromatic.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { AccordionGroup, Item, Text } from '../../../index';
+import WithUiLibraryCss from '../withUiLibraryCss';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only AccordionGroup',
+  component: AccordionGroup,
+  decorators: [WithUiLibraryCss]
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AccordionGroup, null, ___EmotionJSX(Item, {
+    key: "accordionKey",
+    textValue: "accordionKey",
+    label: "Accordion Label",
+    "data-id": "accordionItem"
+  }, ___EmotionJSX(Text, null, "Render me!")));
+};

package/lib/styles/themeOverrides/stories/Button.chromatic.stories.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button } from '../../../index';
+import WithUiLibraryCss from '../withUiLibraryCss';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Button',
+  component: Button,
+  decorators: [WithUiLibraryCss]
+};
+export var Default = function Default() {
+  return ___EmotionJSX(Button, null, "Button Text");
+};
+export var Critical = function Critical() {
+  return ___EmotionJSX(Button, {
+    variant: "critical"
+  }, "Button Text");
+};
+export var Success = function Success() {
+  return ___EmotionJSX(Button, {
+    variant: "success"
+  }, "Button Text");
+};
+export var Inline = function Inline() {
+  return ___EmotionJSX(Button, {
+    variant: "inline"
+  }, "Button Text");
+};
+export var Primary = function Primary() {
+  return ___EmotionJSX(Button, {
+    variant: "primary"
+  }, "Button Text");
+};
+export var Link = function Link() {
+  return ___EmotionJSX(Button, {
+    variant: "link"
+  }, "Button Text");
+};