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

package/lib/recipes/Slider.stories.js

@@ -17,11 +17,14 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 
 /* eslint-disable no-nested-ternary */
 import React from 'react';
-import { mergeProps, useFocusRing, useSlider, useSliderThumb, VisuallyHidden } from 'react-aria';
-import { useSliderState } from 'react-stately';
+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 { useNumberFormatter } from '@react-aria/i18n';
 import { Box } from '../index';
-import { defaultFocus } from '../components/Button/Buttons.styles';
+import { defaultFocus } from '../styles/variants/buttons';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Slider'
@@ -62,7 +65,7 @@ var sx = {
   },
   thumbContainer: {
     position: 'absolute',
-    top: 17,
+    top: 5,
     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';
+import { Item } from '@react-stately/collections';
 import Box from '../components/Box';
 import Text from '../components/Text';
 import TextField from '../components/TextField';

package/lib/{components/ColorField/ColorField.styles.js → styles/forms/comboBox.js}

@@ -12,15 +12,16 @@ 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 { defaultFocus } from '../Button/Buttons.styles';
-import { neutral } from '../../styles/colors';
+import { input as inputBase } from './input';
 var container = {
-  border: "1px solid ".concat(neutral['80']),
-  '&:focus-visible': {
-    outline: 'none'
-  },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  position: 'relative'
 };
+
+var input = _objectSpread(_objectSpread({}, inputBase), {}, {
+  pr: 'xl'
+});
+
 export default {
-  container: container
+  container: container,
+  input: input
 };

package/lib/styles/forms/index.js

@@ -12,30 +12,21 @@ 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 '../../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 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 textarea from '../../components/TextArea/TextArea.styles'; // See ThemeUI docs on variants and themes for intended structure
+import * as textarea from './textarea'; // 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({}, checkbox), {}, {
-  colorField: colorField,
-  comboBox: comboBox,
-  fileInputField: fileInputField
-}, input), label), {}, {
-  numberField: numberField,
-  radio: radio
-}, select), {}, {
-  textarea: textarea,
+export default _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
+  comboBox: comboBox
+}, input), label), radio), select), textarea), {}, {
   "switch": _objectSpread({}, switchable),
   search: search
 });

package/lib/{components/Input/Input.styles.js → styles/forms/input.js}

@@ -8,15 +8,15 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 
-var _input$fieldControlWr, _objectSpread2;
+var _input$container;
 
 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 { text } from '../Text/Text.styles';
+import { text } from '../variants/text';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { defaultFocus } from '../Button/Buttons.styles'; // Styles for default input and variants go here.
+import { defaultFocus } from '../variants/buttons'; // Styles for default input and variants go here.
 
 var activeFloatLabel = {
   pt: 'md',
@@ -86,7 +86,7 @@ input.small = _objectSpread(_objectSpread({}, input), {}, {
   pl: 'sm',
   pr: 'sm'
 });
-input.fieldContainer = {
+input.wrapper = {
   position: 'relative',
   '&.is-left-label': {
     display: 'inline-grid',
@@ -97,7 +97,7 @@ input.fieldContainer = {
   }
 }; // Used to give a blue left border to inputs
 
-input.fieldControlWrapper = (_input$fieldControlWr = {
+input.container = (_input$container = {
   position: 'relative',
   height: 'max-content',
   '> input': {
@@ -148,25 +148,25 @@ input.fieldControlWrapper = (_input$fieldControlWr = {
       display: 'none'
     }
   }
-}, _defineProperty(_input$fieldControlWr, "&.is-".concat(statuses.ERROR, "::after"), {
+}, _defineProperty(_input$container, "&.is-".concat(statuses.ERROR, "::after"), {
   bg: 'critical.bright'
-}), _defineProperty(_input$fieldControlWr, "&.is-".concat(statuses.SUCCESS, "::after"), {
+}), _defineProperty(_input$container, "&.is-".concat(statuses.SUCCESS, "::after"), {
   bg: 'success.bright'
-}), _defineProperty(_input$fieldControlWr, "&.is-".concat(statuses.WARNING, "::after"), {
+}), _defineProperty(_input$container, "&.is-".concat(statuses.WARNING, "::after"), {
   bg: 'warning.bright'
-}), _input$fieldControlWr);
+}), _input$container);
 input.containedIcon = {
   position: 'absolute',
   right: 0,
   top: '50%',
   transform: 'translate(-50%, -50%)'
 };
-input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.fieldControlWrapper), {}, (_objectSpread2 = {
+input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {}, {
   bg: 'white',
   borderColor: 'neutral.80',
   borderStyle: 'solid',
   borderWidth: 1,
-  flexDirection: 'row !important',
+  flexDirection: 'row!important',
   flexWrap: 'wrap',
   left: 2,
   pt: 6,
@@ -204,13 +204,7 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.fieldControlWra
   '&.is-focused': _objectSpread({
     boxShadow: 'none'
   }, defaultFocus)
-}, _defineProperty(_objectSpread2, "&.is-".concat(statuses.ERROR, "::after"), {
-  bg: 'critical.bright'
-}), _defineProperty(_objectSpread2, "&.is-".concat(statuses.SUCCESS, "::after"), {
-  bg: 'success.bright'
-}), _defineProperty(_objectSpread2, "&.is-".concat(statuses.WARNING, "::after"), {
-  bg: 'warning.bright'
-}), _objectSpread2));
+});
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
   pr: '28px'
 });

package/lib/{components/Label/Label.styles.js → styles/forms/label.js}

@@ -13,7 +13,7 @@ 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; }
 
 // Styles for default label and variants go here.
-import { text } from '../Text/Text.styles';
+import { text } from '../variants/text';
 var activeFloatLabel = {
   fontWeight: 0,
   transform: 'translate(0, -8px) scale(0.75)'

package/lib/{components/FieldHelperText/FieldHelperText.styles.js → styles/forms/radio.js}

@@ -12,28 +12,22 @@ 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 { base, wordWrap } from '../Text/Text.styles';
+// Styles for default radio and variants go here.
+import { focusWithCroppedOutline } from '../variants/buttons'; // Default radio
 
-var title = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
-  fontSize: 'sm',
-  '&.is-default': {
-    color: 'text.secondary'
+export var radio = {
+  width: 20,
+  height: 20,
+  color: 'active',
+  mr: 'xs',
+  // override the default focus styling
+  'input:focus ~ &': {
+    bg: 'transparent'
   },
-  '&.is-error': {
-    color: 'critical.dark'
-  },
-  '&.is-success': {
-    color: 'success.dark'
-  },
-  '&.is-warning': {
-    color: 'warning.dark'
-  },
-  '.is-left-label > &': {
-    gridRowEnd: 3,
-    gridColumnEnd: 3
+  'input ~ &.is-focused': _objectSpread({}, focusWithCroppedOutline)
+};
+export var radioField = {
+  '.is-horizontal &': {
+    mr: '15px'
   }
-});
-
-export default {
-  title: title
 };

package/lib/{components/SearchField/Search.styles.js → styles/forms/search.js}

@@ -1,7 +1,7 @@
 export var clearButtonIcon = {
   color: 'neutral.40'
 };
-export var wrapper = {
+export var container = {
   position: 'relative',
   justifyContent: 'center',
   '> input::-webkit-search-cancel-button, > input::-webkit-search-decoration': {
@@ -15,6 +15,6 @@ export var icon = {
 };
 export default {
   clearButtonIcon: clearButtonIcon,
-  wrapper: wrapper,
+  container: container,
   icon: icon
 };

package/lib/{components/SelectField/Select.styles.js → styles/forms/select.js}

@@ -13,9 +13,9 @@ 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; }
 
 // Styles for default select and variants go here.
-import { input } from '../Input/Input.styles';
-import { text } from '../../styles/variants';
-import { defaultFocus } from '../Button/Buttons.styles';
+import { input } from './input';
+import { text } from '../variants';
+import { defaultFocus } from '../variants/buttons';
 var activeFloatLabel = {
   pt: 'md',
   pb: 'xs'

package/lib/{components/Switch/Switch.styles.js → styles/forms/switch.js}

@@ -12,7 +12,7 @@ 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 { defaultFocus } from '../Button/Buttons.styles';
+import { defaultFocus } from '../variants/buttons';
 export var label = {
   alignItems: 'center',
   fontSize: 'md',

package/lib/styles/forms/textarea.js

@@ -0,0 +1,25 @@
+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 _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 { input } from './input'; // Styles for default input and variants go here.
+
+export var textarea = _objectSpread(_objectSpread({}, input), {}, {
+  height: 'unset',
+  '&.is-unresizable': {
+    resize: 'none'
+  },
+  '.is-float-label &': {
+    height: 'unset'
+  }
+});

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 { badges, buttons, cards, images, links, text, variants } from './variants';
+import { variants, buttons, text, images, links, bidirectionalIconButton } from './variants';
 export default {
   name: 'Astro',
   space: spacing,
@@ -52,9 +52,9 @@ export default {
   forms: forms,
   text: text,
   images: images,
-  buttons: buttons,
-  badges: badges,
-  cards: cards,
+  buttons: _objectSpread(_objectSpread({}, buttons), {}, {
+    bidirectionalIconButton: bidirectionalIconButton
+  }),
   textColors: textColors,
   links: links,
   variants: variants

package/lib/styles/themeOverrides/uiLibraryOverride.js

@@ -14,6 +14,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import theme from '../theme';
 var buttons = {
+  accordionHeader: _objectSpread(_objectSpread({}, theme.buttons.accordionHeader), {}, {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.defaultHover), {}, {
+      color: 'active'
+    }),
+    '&:focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
+      border: 'none'
+    })
+  }),
   critical: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.critical), theme.buttons.defaultHover)
   },
@@ -30,28 +38,55 @@ var buttons = {
   inline: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.inline), theme.buttons.defaultHover)
   },
+  inverted: _objectSpread(_objectSpread({}, theme.buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
   primary: {
     '&:hover': _objectSpread({}, theme.buttons.primary)
   },
   link: {
     'body &': theme.buttons.link,
-    'body &:hover': theme.buttons.link,
-    '&:not(.disabled):hover': {
-      color: 'active',
-      borderColor: 'transparent'
-    }
+    'body &:hover': theme.buttons.link
   },
-  iconButtons: _objectSpread(_objectSpread({}, theme.buttons.iconButtons), {}, {
-    base: _objectSpread(_objectSpread({}, theme.buttons.iconButtons.base), {}, {
-      ':focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
-        border: 'none'
-      })
-    }),
-    inverted: _objectSpread(_objectSpread({}, theme.buttons.iconButtons.inverted), {}, {
-      ':focus': {
-        border: 'none'
-      }
+  iconButton: {
+    ':focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
+      border: 'none'
     })
+  },
+  environmentBreadcrumb: {
+    current: {
+      '&:hover:not(.disabled)': _objectSpread({}, theme.buttons.environmentBreadcrumb.current),
+      '&:focus': _objectSpread({}, theme.buttons.environmentBreadcrumb.current)
+    }
+  },
+  rocker: _objectSpread(_objectSpread({}, theme.buttons.rocker), {}, {
+    ':focus': {
+      border: 'none'
+    },
+    '&.is-selected:hover': {
+      color: 'white'
+    },
+    ':not(.is-selected):hover': {
+      color: 'accent.30'
+    }
+  }),
+  navBarSectionButton: _objectSpread(_objectSpread({}, theme.buttons.navBarSectionButton), {}, {
+    height: 'unset',
+    minHeight: '36px',
+    '&:not(.disabled):hover': _objectSpread({}, theme.buttons.navBarSectionButton),
+    ':focus': {
+      border: 'none'
+    }
+  }),
+  navItemButton: _objectSpread(_objectSpread({
+    height: 'unset'
+  }, theme.buttons.navItemButton), {}, {
+    '&:not(.disabled):hover': _objectSpread({}, theme.buttons.navItemButton),
+    ':focus': {
+      border: 'none'
+    }
   })
 };
 var forms = {
@@ -72,7 +107,7 @@ var forms = {
     })
   },
   search: {
-    wrapper: {
+    container: {
       '& input[type=search]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
         borderColor: 'neutral.80',
         bg: 'white',
@@ -96,60 +131,8 @@ var links = {
     '&:hover': _objectSpread({}, theme.links.app)
   }
 };
-var variants = {
-  accordion: {
-    header: _objectSpread(_objectSpread({}, theme.variants.accordion.header), {}, {
-      '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.defaultHover), {}, {
-        color: 'active'
-      }),
-      '&:focus': _objectSpread(_objectSpread({}, theme.buttons.defaultFocus), {}, {
-        border: 'none'
-      })
-    })
-  },
-  rockerButton: {
-    thumbSwitch: _objectSpread(_objectSpread({}, theme.variants.rockerButton.thumbSwitch), {}, {
-      ':focus': {
-        border: 'none'
-      },
-      '&.is-selected:hover': {
-        color: 'white'
-      },
-      ':not(.is-selected):hover': {
-        color: 'accent.30'
-      }
-    })
-  },
-  environmentBreadcrumb: {
-    button: {
-      current: {
-        '&:hover:not(.disabled)': _objectSpread({}, theme.variants.environmentBreadcrumb.button.current),
-        '&:focus': _objectSpread({}, theme.variants.environmentBreadcrumb.button.current)
-      }
-    }
-  },
-  navBar: {
-    sectionButton: _objectSpread(_objectSpread({}, theme.variants.navBar.sectionButton), {}, {
-      height: 'unset',
-      minHeight: '36px',
-      '&:not(.disabled):hover': _objectSpread({}, theme.variants.navBar.sectionButton),
-      ':focus': {
-        border: 'none'
-      }
-    }),
-    itemButton: _objectSpread(_objectSpread({
-      height: 'unset'
-    }, theme.variants.navBar.itemButton), {}, {
-      '&:not(.disabled):hover': _objectSpread({}, theme.variants.navBar.itemButton),
-      ':focus': {
-        border: 'none'
-      }
-    })
-  }
-};
 export default {
   buttons: buttons,
   forms: forms,
-  links: links,
-  variants: variants
+  links: links
 };

package/lib/styles/themes/astro-nano/astro-nano.js

@@ -106,8 +106,8 @@ var modifyTheme = {
     }
   },
   variants: {
-    card: {
-      container: {
+    boxes: {
+      card: {
         borderRadius: borderRadius,
         flexGrow: [1, 0],
         maxWidth: astroTheme.breakpoints[0],
@@ -115,26 +115,26 @@ var modifyTheme = {
         alignItems: 'stretch',
         py: [0, 'xl'],
         my: 'auto',
-        boxShadow: ['none', astroTheme.variants.card.container.boxShadow],
+        boxShadow: ['none', astroTheme.variants.boxes.card.boxShadow],
         width: ['100%', '450px'],
         minHeight: 'fit-content'
+      },
+      wrapper: {
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        bg: ['white', 'accent.99'],
+        py: 'lg',
+        gap: 'lg',
+        overflow: 'auto',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+      },
+      cardBody: {
+        flexGrow: [1, 0]
       }
-    },
-    wrapper: {
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      bg: ['white', 'accent.99'],
-      py: 'lg',
-      gap: 'lg',
-      overflow: 'auto',
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0
-    },
-    cardBody: {
-      flexGrow: [1, 0]
     }
   }
 };

package/lib/styles/variants/accordion.js

@@ -0,0 +1,82 @@
+var accordionTitle = {
+  display: 'inline-block !important',
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+  fontSize: 'lg',
+  fontWeight: 700,
+  color: 'text.primary',
+  '&.is-pressed': {
+    color: 'white'
+  }
+};
+var accordion = {
+  display: 'flex',
+  mt: '5px',
+  mb: '20px',
+  alignItems: 'flex-start'
+};
+var accordionBody = {
+  display: 'none',
+  pt: 'md',
+  width: '100%',
+  '.is-open &': {
+    display: 'flex'
+  }
+};
+var accordionGridHeader = {
+  cursor: 'pointer',
+  lineHeight: '30px',
+  pl: 'sm',
+  outline: 'none',
+  display: 'flex',
+  justifyContent: 'center',
+  flexShrink: 0,
+  wordBreak: 'inherit',
+  whiteSpace: 'nowrap',
+  bg: 'white',
+  color: 'neutral.10',
+  flexGrow: 1,
+  fontWeight: 700,
+  border: '1px solid transparent',
+  '&.is-focused': {
+    border: '1px solid',
+    borderColor: 'focus',
+    zIndex: '10'
+  },
+  minHeight: '64px',
+  '&.is-hovered': {
+    backgroundColor: 'accent.99'
+  },
+  '&.is-pressed': {
+    color: 'accent.20',
+    '& div > div > div > span': {
+      color: 'accent.20'
+    }
+  }
+};
+var accordionGridBody = {
+  display: 'none !important',
+  pl: 'sm',
+  width: '100%',
+  '&.is-selected': {
+    display: 'flex !important'
+  },
+  ':focus': {
+    outline: 'none'
+  }
+};
+var accordionGridItem = {
+  ':focus': {
+    outline: 'none'
+  }
+};
+export default {
+  accordionGridHeader: accordionGridHeader,
+  accordionGridBody: accordionGridBody,
+  accordionTitle: accordionTitle,
+  accordion: accordion,
+  accordionBody: accordionBody,
+  accordionGridItem: accordionGridItem
+};