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

package/lib/cjs/components/ImageUploadField/imageUpload.js

@@ -0,0 +1,69 @@
+"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["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _Buttons = require("../Button/Buttons.styles");
+
+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 hoveredPreview = {
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute'
+  },
+  shaded: {
+    opacity: 0.3,
+    backgroundColor: '#000',
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    borderRadius: 2
+  }
+};
+
+var button = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 0,
+  backgroundColor: 'accent.99',
+  border: '2px solid',
+  borderColor: 'neutral.40',
+  '&.is-focused': _objectSpread(_objectSpread({}, _Buttons.defaultFocus), {}, {
+    borderColor: 'neutral.40'
+  })
+});
+
+var _default = {
+  hoveredPreview: hoveredPreview,
+  button: button
+};
+exports["default"] = _default;

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

@@ -26,13 +26,13 @@ exports.input = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _text = require("../variants/text");
+var _Text = require("../Text/Text.styles");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
-var _buttons = require("../variants/buttons");
+var _Buttons = require("../Button/Buttons.styles");
 
-var _input$container;
+var _input$fieldControlWr, _objectSpread2;
 
 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.wrapper = {
+input.fieldContainer = {
   position: 'relative',
   '&.is-left-label': {
     display: 'inline-grid',
@@ -120,7 +120,7 @@ input.wrapper = {
   }
 }; // Used to give a blue left border to inputs
 
-input.container = (_input$container = {
+input.fieldControlWrapper = (_input$fieldControlWr = {
   position: 'relative',
   height: 'max-content',
   '> input': {
@@ -171,25 +171,25 @@ input.container = (_input$container = {
       display: 'none'
     }
   }
-}, (0, _defineProperty2["default"])(_input$container, "&.is-".concat(_statuses["default"].ERROR, "::after"), {
+}, (0, _defineProperty2["default"])(_input$fieldControlWr, "&.is-".concat(_statuses["default"].ERROR, "::after"), {
   bg: 'critical.bright'
-}), (0, _defineProperty2["default"])(_input$container, "&.is-".concat(_statuses["default"].SUCCESS, "::after"), {
+}), (0, _defineProperty2["default"])(_input$fieldControlWr, "&.is-".concat(_statuses["default"].SUCCESS, "::after"), {
   bg: 'success.bright'
-}), (0, _defineProperty2["default"])(_input$container, "&.is-".concat(_statuses["default"].WARNING, "::after"), {
+}), (0, _defineProperty2["default"])(_input$fieldControlWr, "&.is-".concat(_statuses["default"].WARNING, "::after"), {
   bg: 'warning.bright'
-}), _input$container);
+}), _input$fieldControlWr);
 input.containedIcon = {
   position: 'absolute',
   right: 0,
   top: '50%',
   transform: 'translate(-50%, -50%)'
 };
-input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {}, {
+input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.fieldControlWrapper), {}, (_objectSpread2 = {
   bg: 'white',
   borderColor: 'neutral.80',
   borderStyle: 'solid',
   borderWidth: 1,
-  flexDirection: 'row!important',
+  flexDirection: 'row !important',
   flexWrap: 'wrap',
   left: 2,
   pt: 6,
@@ -226,8 +226,14 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
   },
   '&.is-focused': _objectSpread({
     boxShadow: 'none'
-  }, _buttons.defaultFocus)
-});
+  }, _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));
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
   pr: '28px'
 });

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

@@ -26,7 +26,7 @@ exports.label = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _text = require("../variants/text");
+var _Text = require("../Text/Text.styles");
 
 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/Link/Link.js

@@ -24,16 +24,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _themeUi = require("theme-ui");
-
-var _link = require("@react-aria/link");
+var _reactAria = require("react-aria");
 
-var _focus = require("@react-aria/focus");
+var _themeUi = require("theme-ui");
 
 var _interactions = require("@react-aria/interactions");
 
-var _utils = require("@react-aria/utils");
-
 var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
@@ -62,11 +58,11 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return linkRef.current;
   });
 
-  var _useFocusRing = (0, _focus.useFocusRing)(),
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
-  var _useLink = (0, _link.useLink)(props, linkRef),
+  var _useLink = (0, _reactAria.useLink)(props, linkRef),
       linkProps = _useLink.linkProps;
 
   var _useHover = (0, _interactions.useHover)(props),
@@ -91,7 +87,7 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: classNames,
     ref: linkRef,
     role: "link"
-  }, others, (0, _utils.mergeProps)(hoverProps, pressProps, linkProps, focusProps)));
+  }, others, (0, _reactAria.mergeProps)(hoverProps, pressProps, linkProps, focusProps)));
 });
 Link.propTypes = {
   /** Whether the link is disabled. */

package/lib/cjs/components/Link/Link.stories.js

@@ -20,7 +20,7 @@ var _ = _interopRequireDefault(require("."));
 
 var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
 
-var _links = _interopRequireDefault(require("../../styles/variants/links"));
+var _Link = _interopRequireDefault(require("./Link.styles"));
 
 var _react2 = require("@emotion/react");
 
@@ -51,7 +51,7 @@ var _default = {
     variant: {
       control: {
         type: 'select',
-        options: (0, _keys["default"])(_links["default"])
+        options: (0, _keys["default"])(_Link["default"])
       }
     }
   }

package/lib/cjs/{styles/variants/links.js → components/Link/Link.styles.js}

@@ -26,7 +26,7 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _buttons = require("./buttons");
+var _Buttons = require("../Button/Buttons.styles");
 
 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,7 +41,7 @@ var app = {
   '&.is-hovered': {
     textDecoration: 'underline'
   },
-  '&.is-focused': _objectSpread({}, _buttons.focusWithCroppedOutline),
+  '&.is-focused': _objectSpread({}, _Buttons.focusWithCroppedOutline),
   '&.is-pressed': {
     color: 'accent.40',
     textDecoration: 'underline'
@@ -56,7 +56,7 @@ var web = _objectSpread(_objectSpread({}, app), {}, {
   '&:visited': {
     color: 'decorative.7'
   },
-  '&.is-focused': _objectSpread({}, _buttons.focusWithCroppedOutline)
+  '&.is-focused': _objectSpread({}, _Buttons.focusWithCroppedOutline)
 });
 
 var _default = {

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -48,6 +48,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _hooks = require("../../hooks");
 
 var _SelectFieldBase = _interopRequireDefault(require("../SelectFieldBase"));
@@ -93,18 +95,19 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }), ref),
       selectFieldProps = (0, _extends2["default"])({}, _useSelectField);
 
-  var fieldControlProps = selectFieldProps.fieldControlProps,
+  var fieldControlInputProps = selectFieldProps.fieldControlInputProps,
       isLoadingInitial = selectFieldProps.isLoadingInitial,
       state = selectFieldProps.state,
       triggerProps = selectFieldProps.triggerProps,
       triggerRef = selectFieldProps.triggerRef;
   var trigger = (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
-    className: fieldControlProps.className,
+    className: fieldControlInputProps.className,
     ref: triggerRef,
     variant: "link",
-    tabIndex: isDisabled ? -1 : 0,
+    tabIndex: isDisabled ? -1 : 0
+  }, triggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
-  }, triggerProps, ariaProps), (0, _react2.jsx)(_.Text, {
+  }), (0, _react2.jsx)(_.Text, {
     variant: "label",
     color: "active"
   }, placeholder), (0, _react2.jsx)(_.Box, {
@@ -128,7 +131,7 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     trigger: trigger
   }));
 });
-LinkSelectField.propTypes = _objectSpread({
+LinkSelectField.propTypes = _objectSpread(_objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
 
@@ -214,20 +217,8 @@ LinkSelectField.propTypes = _objectSpread({
    *
    * (key: Key) => any
    */
-  onSelectionChange: _propTypes["default"].func,
-
-  /**
-   * Props object passed along to `useSelect` from React Aria, `useSelectState` from React Stately,
-   * and/or the visible button representation for the select input.
-   */
-  controlProps: _propTypes["default"].shape({}),
-
-  /** Props object passed along to the root container as-is. */
-  containerProps: _propTypes["default"].shape({}),
-
-  /** Props object passed along to the label as-is. */
-  labelProps: _propTypes["default"].shape({})
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+  onSelectionChange: _propTypes["default"].func
+}, _fieldAttributes.inputFieldAttributesBasePropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
 LinkSelectField.defaultProps = {
   placeholder: 'Select',
   status: _statuses["default"].DEFAULT,

package/lib/cjs/components/LinkSelectField/LinkSelectField.stories.js

@@ -48,14 +48,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _overlays = require("@react-aria/overlays");
+var _reactAria = require("react-aria");
 
-var _data = require("@react-stately/data");
+var _reactStately = require("react-stately");
 
 var _2 = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
@@ -80,7 +82,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -116,18 +118,17 @@ var _default = {
     isDisabled: {},
     isOpen: {},
     isRequired: {},
-    controlProps: {},
     selectedKey: {
       control: {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, (0, _extends2["default"])({}, args, {
     width: "100%"
   }), (0, _react2.jsx)(_2.Item, {
     key: "red"
@@ -301,7 +302,7 @@ var DynamicItems = function DynamicItems() {
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
       items = _useState4[0];
 
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
     label: "Select an option...",
     items: items
   }, function (item) {
@@ -320,7 +321,7 @@ DynamicItems.parameters = {
 
 var AsyncLoading = function AsyncLoading() {
   // This example uses `useAsyncList` from "@react-stately/data"
-  var list = (0, _data.useAsyncList)({
+  var list = (0, _reactStately.useAsyncList)({
     load: function load(_ref) {
       return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
         var signal, cursor, res, json;
@@ -361,7 +362,7 @@ var AsyncLoading = function AsyncLoading() {
       }))();
     }
   });
-  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_2.LinkSelectField, {
     label: "Pick a Pokemon",
     items: list.items,
     isLoading: list.isLoading,

package/lib/cjs/components/ListBox/ListBox.js

@@ -43,16 +43,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _listbox = require("@react-aria/listbox");
-
-var _utils = require("@react-aria/utils");
-
-var _virtualizer = require("@react-aria/virtualizer");
+var _reactAria = require("react-aria");
 
 var _i18n = require("@react-aria/i18n");
 
+var _listbox = require("@react-aria/listbox");
+
 var _layout = require("@react-stately/layout");
 
+var _virtualizer = require("@react-aria/virtualizer");
+
 var _ListBoxContext = require("./ListBoxContext");
 
 var _index = require("./index.js");
@@ -196,7 +196,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   return (0, _react2.jsx)(_ListBoxContext.ListBoxContext.Provider, {
     value: state
-  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _utils.mergeProps)(listBoxProps, others), {
+  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(listBoxProps, others), {
     style: {
       outline: 'none'
     },

package/lib/cjs/{styles/variants/listBox.js → components/ListBox/ListBox.styles.js}

@@ -26,7 +26,7 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _text = require("../variants/text");
+var _Text = require("../Text/Text.styles");
 
 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; }
 
@@ -35,14 +35,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var listBox = {
   outline: 'none'
 };
-listBox.option = _objectSpread(_objectSpread({}, _text.text.base), {}, {
+listBox.option = _objectSpread(_objectSpread({}, _Text.text.base), {}, {
   px: 'md',
   py: 'sm',
   alignItems: 'center',
   outline: 'none',
   wordBreak: 'break-word',
   cursor: 'pointer',
-  '&.is-selected': _objectSpread(_objectSpread({}, _text.text.inputValue), {}, {
+  '&.is-selected': _objectSpread(_objectSpread({}, _Text.text.inputValue), {}, {
     pl: 0
   }),
   '&.is-focused': {
@@ -56,5 +56,13 @@ listBox.selectField = {
   pl: 0,
   outline: 'none'
 };
+listBox.sectionTitle = {
+  fontSize: 'sm',
+  fontWeight: '3',
+  color: 'text.secondary',
+  height: '36px',
+  ml: 'sm',
+  justifyContent: 'center'
+};
 var _default = listBox;
 exports["default"] = _default;

package/lib/cjs/components/ListBox/ListBox.test.js

@@ -12,12 +12,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _jestAxe = require("jest-axe");
 
+var _reactStately = require("react-stately");
+
 var _list = require("@react-stately/list");
 
 var _react2 = require("@testing-library/react");
 
-var _collections = require("@react-stately/collections");
-
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _ = _interopRequireDefault(require("."));
@@ -85,7 +85,7 @@ var getSectionsComponent = function getSectionsComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _react2.render)((0, _react3.jsx)(ListBoxWithSections, (0, _extends2["default"])({}, defaultWithSectionsProps, props), function (section) {
     return (// eslint-disable-next-line testing-library/no-node-access
-      (0, _react3.jsx)(_collections.Section, {
+      (0, _react3.jsx)(_reactStately.Section, {
         key: section.name,
         title: section.name,
         items: section.options

package/lib/cjs/components/ListBox/ListBoxSection.js

@@ -22,10 +22,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _listbox = require("@react-aria/listbox");
-
 var _i18n = require("@react-aria/i18n");
 
+var _listbox = require("@react-aria/listbox");
+
 var _virtualizer = require("@react-aria/virtualizer");
 
 var _ListBoxContext = require("./ListBoxContext");
@@ -74,7 +74,7 @@ var ListBoxSection = function ListBoxSection(props) {
   }, groupProps), item.key !== state.collection.getFirstKey() && (0, _react2.jsx)(_Separator["default"], {
     mt: "0px"
   }), item.rendered && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, headingProps, {
-    variant: "boxes.listBoxSectionTitle"
+    variant: "listBox.sectionTitle"
   }), item.rendered)), (0, _react2.jsx)(_Box["default"], {
     style: (0, _virtualizer.layoutInfoToStyle)(reusableView.layoutInfo, direction)
   }, children));

package/lib/cjs/components/ListBox/Option.js

@@ -36,12 +36,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _CircleSmallIcon = _interopRequireDefault(require("mdi-react/CircleSmallIcon"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _listbox = require("@react-aria/listbox");
 
-var _CircleSmallIcon = _interopRequireDefault(require("mdi-react/CircleSmallIcon"));
-
 var _hooks = require("../../hooks");
 
 var _Box = _interopRequireDefault(require("../Box"));

package/lib/cjs/components/ListItem/ListItem.js

@@ -63,7 +63,7 @@ var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     role: "listitem",
     ref: ref,
     as: "li",
-    variant: "boxes.listItem",
+    variant: "listItem.container",
     isRow: true
   }, hoverProps, others), children);
 });

package/lib/cjs/components/ListItem/ListItem.styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+var container = {
+  display: 'flex',
+  flex: '1 1 0px',
+  cursor: 'pointer',
+  height: '64px',
+  pl: 'md',
+  pr: 'sm',
+  pt: 16,
+  pb: 16,
+  justifyContent: 'center',
+  bg: 'accent.99',
+  '&.is-selected': {
+    bg: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'white'
+  }
+};
+var _default = {
+  container: container
+};
+exports["default"] = _default;