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

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

@@ -26,22 +26,22 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _Buttons = require("../Button/Buttons.styles");
-
-var _colors = require("../../styles/colors");
+var _input = require("./input");
 
 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 container = {
-  border: "1px solid ".concat(_colors.neutral['80']),
-  '&:focus-visible': {
-    outline: 'none'
-  },
-  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus)
+  position: 'relative'
 };
+
+var input = _objectSpread(_objectSpread({}, _input.input), {}, {
+  pr: 'xl'
+});
+
 var _default = {
-  container: container
+  container: container,
+  input: input
 };
 exports["default"] = _default;

package/lib/cjs/styles/forms/index.js

@@ -30,29 +30,23 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var checkbox = _interopRequireWildcard(require("../../components/Checkbox/Checkbox.styles"));
+var checkbox = _interopRequireWildcard(require("./checkbox"));
 
-var _ColorField = _interopRequireDefault(require("../../components/ColorField/ColorField.styles"));
+var _comboBox = _interopRequireDefault(require("./comboBox"));
 
-var _ComboBox = _interopRequireDefault(require("../../components/ComboBox/ComboBox.styles"));
+var input = _interopRequireWildcard(require("./input"));
 
-var _FileInputField = _interopRequireDefault(require("../../components/FileInputField/FileInputField.styles"));
+var label = _interopRequireWildcard(require("./label"));
 
-var input = _interopRequireWildcard(require("../../components/Input/Input.styles"));
+var radio = _interopRequireWildcard(require("./radio"));
 
-var label = _interopRequireWildcard(require("../../components/Label/Label.styles"));
+var _search = _interopRequireDefault(require("./search"));
 
-var _NumberField = _interopRequireDefault(require("../../components/NumberField/NumberField.styles"));
+var select = _interopRequireWildcard(require("./select"));
 
-var _Radio = _interopRequireDefault(require("../../components/Radio/Radio.styles"));
+var switchable = _interopRequireWildcard(require("./switch"));
 
-var _Search = _interopRequireDefault(require("../../components/SearchField/Search.styles"));
-
-var select = _interopRequireWildcard(require("../../components/SelectField/Select.styles"));
-
-var switchable = _interopRequireWildcard(require("../../components/Switch/Switch.styles"));
-
-var _TextArea = _interopRequireDefault(require("../../components/TextArea/TextArea.styles"));
+var textarea = _interopRequireWildcard(require("./textarea"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -64,17 +58,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 // See ThemeUI docs on variants and themes for intended structure
 // Variants should be defined in the approprate file.
-var _default = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
-  colorField: _ColorField["default"],
-  comboBox: _ComboBox["default"],
-  fileInputField: _FileInputField["default"]
-}, input), label), {}, {
-  numberField: _NumberField["default"],
-  radio: _Radio["default"]
-}, select), {}, {
-  textarea: _TextArea["default"],
+var _default = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
+  comboBox: _comboBox["default"]
+}, input), label), radio), select), textarea), {}, {
   "switch": _objectSpread({}, switchable),
-  search: _Search["default"]
+  search: _search["default"]
 });
 
 exports["default"] = _default;

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

@@ -26,13 +26,13 @@ exports.input = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _Text = require("../Text/Text.styles");
+var _text = require("../variants/text");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
-var _Buttons = require("../Button/Buttons.styles");
+var _buttons = require("../variants/buttons");
 
-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; }
 
@@ -44,7 +44,7 @@ var activeFloatLabel = {
   pb: 'xs'
 }; // Default input styling
 
-var input = _objectSpread(_objectSpread({}, _Text.text.inputValue), {}, {
+var input = _objectSpread(_objectSpread({}, _text.text.inputValue), {}, {
   appearance: 'none',
   boxSizing: 'border-box',
   lineHeight: '1.25em',
@@ -70,7 +70,7 @@ var input = _objectSpread(_objectSpread({}, _Text.text.inputValue), {}, {
     height: '45px'
   },
   '.is-float-label-active &': _objectSpread({}, activeFloatLabel),
-  '&::placeholder': _Text.text.placeholder,
+  '&::placeholder': _text.text.placeholder,
   '&::-ms-expand': {
     display: 'none'
   },
@@ -109,7 +109,7 @@ input.small = _objectSpread(_objectSpread({}, input), {}, {
   pl: 'sm',
   pr: 'sm'
 });
-input.fieldContainer = {
+input.wrapper = {
   position: 'relative',
   '&.is-left-label': {
     display: 'inline-grid',
@@ -120,7 +120,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': {
@@ -171,25 +171,25 @@ input.fieldControlWrapper = (_input$fieldControlWr = {
       display: 'none'
     }
   }
-}, (0, _defineProperty2["default"])(_input$fieldControlWr, "&.is-".concat(_statuses["default"].ERROR, "::after"), {
+}, (0, _defineProperty2["default"])(_input$container, "&.is-".concat(_statuses["default"].ERROR, "::after"), {
   bg: 'critical.bright'
-}), (0, _defineProperty2["default"])(_input$fieldControlWr, "&.is-".concat(_statuses["default"].SUCCESS, "::after"), {
+}), (0, _defineProperty2["default"])(_input$container, "&.is-".concat(_statuses["default"].SUCCESS, "::after"), {
   bg: 'success.bright'
-}), (0, _defineProperty2["default"])(_input$fieldControlWr, "&.is-".concat(_statuses["default"].WARNING, "::after"), {
+}), (0, _defineProperty2["default"])(_input$container, "&.is-".concat(_statuses["default"].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,
@@ -226,14 +226,8 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.fieldControlWra
   },
   '&.is-focused': _objectSpread({
     boxShadow: 'none'
-  }, _Buttons.defaultFocus)
-}, (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].ERROR, "::after"), {
-  bg: 'critical.bright'
-}), (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].SUCCESS, "::after"), {
-  bg: 'success.bright'
-}), (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].WARNING, "::after"), {
-  bg: 'warning.bright'
-}), _objectSpread2));
+  }, _buttons.defaultFocus)
+});
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
   pr: '28px'
 });

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

@@ -26,7 +26,7 @@ exports.label = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _Text = require("../Text/Text.styles");
+var _text = require("../variants/text");
 
 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; }
 
@@ -37,7 +37,7 @@ var activeFloatLabel = {
   transform: 'translate(0, -8px) scale(0.75)'
 }; // Default label
 
-var label = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
+var label = _objectSpread(_objectSpread({}, _text.text.label), {}, {
   display: 'block',
   mb: 'xs',
   alignItems: 'center',
@@ -75,13 +75,13 @@ label.indicator = {
   color: 'critical.bright',
   ml: 5
 };
-label.radio = _objectSpread(_objectSpread({}, _Text.text.base), {}, {
+label.radio = _objectSpread(_objectSpread({}, _text.text.base), {}, {
   cursor: 'pointer',
   alignItems: 'center',
   mb: 'xs'
 }); // NOTE: ThemeUI label adds 'flex' after other styles, so we have to use !important to override it
 
-label.checkbox = _objectSpread(_objectSpread({}, _Text.text.base), {}, {
+label.checkbox = _objectSpread(_objectSpread({}, _text.text.base), {}, {
   display: 'inline-flex !important',
   div: {
     flexShrink: 0

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

@@ -22,40 +22,32 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = void 0;
+exports.radioField = exports.radio = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _Input = require("../Input/Input.styles");
+var _buttons = require("../variants/buttons");
 
 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 container = {
-  position: 'relative'
+// Default radio
+var radio = {
+  width: 20,
+  height: 20,
+  color: 'active',
+  mr: 'xs',
+  // override the default focus styling
+  'input:focus ~ &': {
+    bg: 'transparent'
+  },
+  'input ~ &.is-focused': _objectSpread({}, _buttons.focusWithCroppedOutline)
 };
-
-var input = _objectSpread(_objectSpread({}, _Input.input), {}, {
-  pr: 'xl'
-});
-
-var inputInContainerSlot = {
-  position: 'absolute',
-  bg: 'transparent',
-  right: 'sm',
-  top: '50%',
-  transform: 'translateY(-50%)'
-};
-var button = {
-  bg: 'transparent',
-  color: 'black',
-  padding: 0
-};
-var _default = {
-  container: container,
-  input: input,
-  inputInContainerSlot: inputInContainerSlot,
-  button: button
+exports.radio = radio;
+var radioField = {
+  '.is-horizontal &': {
+    mr: '15px'
+  }
 };
-exports["default"] = _default;
+exports.radioField = radioField;

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

@@ -6,19 +6,19 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.wrapper = exports.icon = exports["default"] = exports.clearButtonIcon = void 0;
+exports.icon = exports["default"] = exports.container = exports.clearButtonIcon = void 0;
 var clearButtonIcon = {
   color: 'neutral.40'
 };
 exports.clearButtonIcon = clearButtonIcon;
-var wrapper = {
+var container = {
   position: 'relative',
   justifyContent: 'center',
   '> input::-webkit-search-cancel-button, > input::-webkit-search-decoration': {
     WebkitAppearance: 'none'
   }
 };
-exports.wrapper = wrapper;
+exports.container = container;
 var icon = {
   position: 'absolute',
   color: 'neutral.40',
@@ -27,7 +27,7 @@ var icon = {
 exports.icon = icon;
 var _default = {
   clearButtonIcon: clearButtonIcon,
-  wrapper: wrapper,
+  container: container,
   icon: icon
 };
 exports["default"] = _default;

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

@@ -26,11 +26,11 @@ exports.select = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _Input = require("../Input/Input.styles");
+var _input = require("./input");
 
-var _variants = require("../../styles/variants");
+var _variants = require("../variants");
 
-var _Buttons = require("../Button/Buttons.styles");
+var _buttons = require("../variants/buttons");
 
 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; }
 
@@ -41,10 +41,10 @@ var activeFloatLabel = {
   pb: 'xs'
 }; // Default select
 
-var select = _objectSpread(_objectSpread({}, _Input.input), {}, {
+var select = _objectSpread(_objectSpread({}, _input.input), {}, {
   display: 'flex',
   alignItems: 'center',
-  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
+  '&.is-focused': _objectSpread({}, _buttons.defaultFocus),
   '.is-float-label &': _objectSpread({
     height: '45px'
   }, activeFloatLabel)
@@ -61,7 +61,7 @@ select.currentValue = {
   // ThemeUI adds display: flex after other styles and ellipsis goes away
   display: 'inline !important'
 };
-select.listBoxPopup = _objectSpread(_objectSpread({}, _Input.input), {}, {
+select.listBoxPopup = _objectSpread(_objectSpread({}, _input.input), {}, {
   position: 'absolute',
   width: '100%',
   height: 'fit-content',

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

@@ -26,7 +26,7 @@ exports.thumbContainer = exports.thumb = exports.label = exports.container = voi
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _Buttons = require("../Button/Buttons.styles");
+var _buttons = require("../variants/buttons");
 
 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; }
 
@@ -58,7 +58,7 @@ var thumbContainer = {
     bg: 'active',
     borderColor: 'active'
   },
-  'label.is-focused &, &:focus': _objectSpread({}, _Buttons.defaultFocus)
+  'label.is-focused &, &:focus': _objectSpread({}, _buttons.defaultFocus)
 };
 exports.thumbContainer = thumbContainer;
 var thumb = {

package/lib/cjs/styles/forms/textarea.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.textarea = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _input = require("./input");
+
+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; }
+
+// Styles for default input and variants go here.
+var textarea = _objectSpread(_objectSpread({}, _input.input), {}, {
+  height: 'unset',
+  '&.is-unresizable': {
+    resize: 'none'
+  },
+  '.is-float-label &': {
+    height: 'unset'
+  }
+});
+
+exports.textarea = textarea;

package/lib/cjs/styles/theme.js

@@ -84,9 +84,9 @@ var _default = {
   forms: _forms["default"],
   text: _variants.text,
   images: _variants.images,
-  buttons: _variants.buttons,
-  badges: _variants.badges,
-  cards: _variants.cards,
+  buttons: _objectSpread(_objectSpread({}, _variants.buttons), {}, {
+    bidirectionalIconButton: _variants.bidirectionalIconButton
+  }),
   textColors: _text.textColors,
   links: _variants.links,
   variants: _variants.variants

package/lib/cjs/styles/themeOverrides/uiLibraryOverride.js

@@ -33,6 +33,14 @@ 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) { (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 buttons = {
+  accordionHeader: _objectSpread(_objectSpread({}, _theme["default"].buttons.accordionHeader), {}, {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.defaultHover), {}, {
+      color: 'active'
+    }),
+    '&:focus': _objectSpread(_objectSpread({}, _theme["default"].buttons.defaultFocus), {}, {
+      border: 'none'
+    })
+  }),
   critical: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.critical), _theme["default"].buttons.defaultHover)
   },
@@ -49,28 +57,55 @@ var buttons = {
   inline: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.inline), _theme["default"].buttons.defaultHover)
   },
+  inverted: _objectSpread(_objectSpread({}, _theme["default"].buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
   primary: {
     '&:hover': _objectSpread({}, _theme["default"].buttons.primary)
   },
   link: {
     'body &': _theme["default"].buttons.link,
-    'body &:hover': _theme["default"].buttons.link,
-    '&:not(.disabled):hover': {
-      color: 'active',
-      borderColor: 'transparent'
-    }
+    'body &:hover': _theme["default"].buttons.link
   },
-  iconButtons: _objectSpread(_objectSpread({}, _theme["default"].buttons.iconButtons), {}, {
-    base: _objectSpread(_objectSpread({}, _theme["default"].buttons.iconButtons.base), {}, {
-      ':focus': _objectSpread(_objectSpread({}, _theme["default"].buttons.defaultFocus), {}, {
-        border: 'none'
-      })
-    }),
-    inverted: _objectSpread(_objectSpread({}, _theme["default"].buttons.iconButtons.inverted), {}, {
-      ':focus': {
-        border: 'none'
-      }
+  iconButton: {
+    ':focus': _objectSpread(_objectSpread({}, _theme["default"].buttons.defaultFocus), {}, {
+      border: 'none'
     })
+  },
+  environmentBreadcrumb: {
+    current: {
+      '&:hover:not(.disabled)': _objectSpread({}, _theme["default"].buttons.environmentBreadcrumb.current),
+      '&:focus': _objectSpread({}, _theme["default"].buttons.environmentBreadcrumb.current)
+    }
+  },
+  rocker: _objectSpread(_objectSpread({}, _theme["default"].buttons.rocker), {}, {
+    ':focus': {
+      border: 'none'
+    },
+    '&.is-selected:hover': {
+      color: 'white'
+    },
+    ':not(.is-selected):hover': {
+      color: 'accent.30'
+    }
+  }),
+  navBarSectionButton: _objectSpread(_objectSpread({}, _theme["default"].buttons.navBarSectionButton), {}, {
+    height: 'unset',
+    minHeight: '36px',
+    '&:not(.disabled):hover': _objectSpread({}, _theme["default"].buttons.navBarSectionButton),
+    ':focus': {
+      border: 'none'
+    }
+  }),
+  navItemButton: _objectSpread(_objectSpread({
+    height: 'unset'
+  }, _theme["default"].buttons.navItemButton), {}, {
+    '&:not(.disabled):hover': _objectSpread({}, _theme["default"].buttons.navItemButton),
+    ':focus': {
+      border: 'none'
+    }
   })
 };
 var forms = {
@@ -91,7 +126,7 @@ var forms = {
     })
   },
   search: {
-    wrapper: {
+    container: {
       '& input[type=search]': _objectSpread(_objectSpread({}, _theme["default"].text.inputValue), {}, {
         borderColor: 'neutral.80',
         bg: 'white',
@@ -115,61 +150,9 @@ var links = {
     '&:hover': _objectSpread({}, _theme["default"].links.app)
   }
 };
-var variants = {
-  accordion: {
-    header: _objectSpread(_objectSpread({}, _theme["default"].variants.accordion.header), {}, {
-      '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.defaultHover), {}, {
-        color: 'active'
-      }),
-      '&:focus': _objectSpread(_objectSpread({}, _theme["default"].buttons.defaultFocus), {}, {
-        border: 'none'
-      })
-    })
-  },
-  rockerButton: {
-    thumbSwitch: _objectSpread(_objectSpread({}, _theme["default"].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["default"].variants.environmentBreadcrumb.button.current),
-        '&:focus': _objectSpread({}, _theme["default"].variants.environmentBreadcrumb.button.current)
-      }
-    }
-  },
-  navBar: {
-    sectionButton: _objectSpread(_objectSpread({}, _theme["default"].variants.navBar.sectionButton), {}, {
-      height: 'unset',
-      minHeight: '36px',
-      '&:not(.disabled):hover': _objectSpread({}, _theme["default"].variants.navBar.sectionButton),
-      ':focus': {
-        border: 'none'
-      }
-    }),
-    itemButton: _objectSpread(_objectSpread({
-      height: 'unset'
-    }, _theme["default"].variants.navBar.itemButton), {}, {
-      '&:not(.disabled):hover': _objectSpread({}, _theme["default"].variants.navBar.itemButton),
-      ':focus': {
-        border: 'none'
-      }
-    })
-  }
-};
 var _default = {
   buttons: buttons,
   forms: forms,
-  links: links,
-  variants: variants
+  links: links
 };
 exports["default"] = _default;

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

@@ -127,8 +127,8 @@ var modifyTheme = {
     }
   },
   variants: {
-    card: {
-      container: {
+    boxes: {
+      card: {
         borderRadius: borderRadius,
         flexGrow: [1, 0],
         maxWidth: _theme["default"].breakpoints[0],
@@ -136,26 +136,26 @@ var modifyTheme = {
         alignItems: 'stretch',
         py: [0, 'xl'],
         my: 'auto',
-        boxShadow: ['none', _theme["default"].variants.card.container.boxShadow],
+        boxShadow: ['none', _theme["default"].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]
     }
   }
 };