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

package/lib/cjs/utils/devUtils/props/fieldAttributes.js

@@ -0,0 +1,74 @@
+"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.inputFieldAttributesBasePropTypes = exports.inputFieldAttributeBaseDocSettings = exports.inputFieldAttributeBaseArgTypes = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 descriptions = {
+  containerProps: 'Props object spread into the outer-most container. Wrapper and label will be children.',
+  controlProps: ' Props object that is spread directly into the input element. Will be a child of the Wrapper.',
+  controlWrapperProps: 'Props object spread to the field control wrapper, i.e. the immediate parent element for the control, sibling of the label, and child of the field container.',
+  labelProps: 'Props object spread to the field label, i.e. the visible text which labels the control.'
+};
+var inputFieldAttributeBaseDocSettings = {
+  type: {
+    summary: 'object'
+  },
+  control: {
+    type: 'string'
+  },
+  table: {
+    category: 'Input Field Attributes'
+  }
+};
+exports.inputFieldAttributeBaseDocSettings = inputFieldAttributeBaseDocSettings;
+var inputFieldAttributeBaseArgTypes = {
+  'containerProps': _objectSpread({
+    description: descriptions.containerProps
+  }, inputFieldAttributeBaseDocSettings),
+  'controlProps': _objectSpread({
+    description: descriptions.controlProps
+  }, inputFieldAttributeBaseDocSettings),
+  'controlWrapperProps': _objectSpread({
+    description: descriptions.controlWrapperProps
+  }, inputFieldAttributeBaseDocSettings),
+  'labelProps': _objectSpread({
+    description: descriptions.labelProps
+  }, inputFieldAttributeBaseDocSettings)
+};
+exports.inputFieldAttributeBaseArgTypes = inputFieldAttributeBaseArgTypes;
+var inputFieldAttributesBasePropTypes = {
+  containerProps: _propTypes["default"].shape({}),
+  controlProps: _propTypes["default"].shape({}),
+  controlWrapperProps: _propTypes["default"].shape({}),
+  labelProps: _propTypes["default"].shape({})
+};
+exports.inputFieldAttributesBasePropTypes = inputFieldAttributesBasePropTypes;

package/lib/components/AccordionGridGroup/AccordionGrid.styles.js

@@ -0,0 +1,65 @@
+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 { defaultFocus } from '../Button/Buttons.styles';
+var header = {
+  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': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    zIndex: '10'
+  }),
+  minHeight: '64px',
+  '&.is-hovered': {
+    backgroundColor: 'accent.99'
+  },
+  '&.is-pressed': {
+    color: 'accent.20',
+    '& div > div > div > span': {
+      color: 'accent.20'
+    }
+  }
+};
+var body = {
+  display: 'none !important',
+  pl: 'sm',
+  width: '100%',
+  '&.is-selected': {
+    display: 'flex !important'
+  },
+  ':focus': {
+    outline: 'none'
+  }
+};
+var item = {
+  ':focus': {
+    outline: 'none'
+  }
+};
+export default {
+  header: header,
+  body: body,
+  item: item
+};

package/lib/components/AccordionGridGroup/AccordionGridGroup.js

@@ -16,12 +16,12 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 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 React, { useMemo, forwardRef, useImperativeHandle, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { mergeProps } from 'react-aria';
 import { GridCollection, useGridState } from '@react-stately/grid';
 import { GridKeyboardDelegate, useGrid } from '@react-aria/grid';
-import { mergeProps } from '@react-aria/utils';
-import { useListState } from '@react-stately/list';
-import PropTypes from 'prop-types';
 import { useCollator, useLocale } from '@react-aria/i18n';
+import { useListState } from '@react-stately/list';
 import { AccordionGridContext } from '../../context/AccordionGridContext';
 import AccordionGridItem from '../AccordionGridItem';
 import Box from '../Box';

package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useState } from 'react';
-import { Item } from '@react-stately/collections';
+import { Item } from 'react-stately';
 import CreateIcon from 'mdi-react/CreateIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
@@ -273,30 +273,7 @@ export var Controlled = function Controlled() {
       }) : null);
     }))
   );
-}; // const items = [
-//   { id: 1, name: "Aardvark", key: "Aardvark" },
-//   { id: 2, name: "Kangaroo", key: "Kangaroo" },
-//   { id: 3, name: "Snake", key: "Snake" },
-//   { id: 4, name: "Frog", key: "Frog" },
-//   { id: 5, name: "Seal", key: "Seal" },
-//   { id: 6, name: "Orangutan", key: "Orangutan" },
-//   { id: 7, name: "Shark", key: "Shark" }
-// ];
-// const data = [
-//   {
-//     name: "Client Application Developer",
-//     key: "Client"
-//   },
-//   {
-//     name: "Environment Admin",
-//     key: "Environment"
-//   },
-//   {
-//     name: "Organization Admin",
-//     key: "Organization"
-//   }
-// ];
-
+};
 export var AccordionWithInputs = function AccordionWithInputs() {
   return ___EmotionJSX(AccordionGridGroup, {
     items: data,

package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js

@@ -2,7 +2,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerat
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import React from 'react';
-import { Item } from '@react-stately/collections';
+import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen, waitFor } from '../../utils/testUtils/testWrapper';

package/lib/components/AccordionGridItem/AccordionGridItem.js

@@ -6,8 +6,8 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import { mergeProps } from 'react-aria';
 import { useGridRow } from '@react-aria/grid';
-import { mergeProps } from '@react-aria/utils';
 import { useAccordionGridContext } from '../../context/AccordionGridContext';
 import Box from '../Box';
 import AccordionGridItemHeader from './AccordionGridItemHeader';
@@ -76,7 +76,7 @@ var AccordionGridItem = function AccordionGridItem(props) {
     "aria-selected": isSelected,
     "aria-expanded": isSelected,
     className: classNames,
-    variant: "accordion.accordionGridItem",
+    variant: "accordionGrid.item",
     ref: rowRef
   }), ___EmotionJSX(AccordionGridItemHeader, _extends({
     item: item,

package/lib/components/AccordionGridItem/AccordionGridItemBody.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["item", "className", "children", "isSelected", "navigationMode"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { forwardRef } from 'react';
-import { mergeProps } from '@react-aria/utils';
 import PropTypes from 'prop-types';
+import { mergeProps } from 'react-aria';
 import { useGridCell } from '@react-aria/grid';
 import { useHover } from '@react-aria/interactions';
 import { useAccordionGridContext } from '../../context/AccordionGridContext';
@@ -64,7 +64,7 @@ var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
 
   return ___EmotionJSX(Box, _extends({
     as: "div",
-    variant: "accordion.accordionGridBody",
+    variant: "accordionGrid.body",
     role: "gridcell",
     ref: ref
   }, mergedProps, {

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -3,9 +3,8 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["item", "className", "children", "isSelected", "hasCaret", "navigationMode"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { mergeProps } from '@react-aria/utils';
-import { useFocusRing } from '@react-aria/focus';
 import PropTypes from 'prop-types';
+import { mergeProps, useFocusRing } from 'react-aria';
 import { useGridCell } from '@react-aria/grid';
 import { useHover, usePress } from '@react-aria/interactions';
 import MenuDown from 'mdi-react/MenuDownIcon';
@@ -94,7 +93,7 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     as: "div",
     ref: cellRef
   }, mergedProps, {
-    variant: "accordion.accordionGridHeader",
+    variant: "accordionGrid.header",
     isFocused: isFocusVisible,
     isSelected: isSelected,
     className: classNames

package/lib/components/AccordionGroup/Accordion.styles.js

@@ -0,0 +1,66 @@
+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 { defaultFocus, base } from '../Button/Buttons.styles';
+var title = {
+  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 body = {
+  display: 'none',
+  pt: 'md',
+  width: '100%',
+  '.is-open &': {
+    display: 'flex'
+  }
+};
+
+var header = _objectSpread(_objectSpread({}, base), {}, {
+  display: 'inline-flex',
+  bg: 'transparent',
+  color: 'neutral.10',
+  paddingLeft: '5px',
+  paddingRight: '5px',
+  flexGrow: 0,
+  fontWeight: 700,
+  '&.is-hovered': {
+    color: 'active'
+  },
+  '&.is-pressed': {
+    color: 'accent.20'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+export default {
+  title: title,
+  accordion: accordion,
+  body: body,
+  header: header
+};

package/lib/components/AccordionGroup/AccordionGroup.js

@@ -20,9 +20,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useAccordion } from '@react-aria/accordion';
-import { useTreeState } from '@react-stately/tree';
 import { mergeProps } from '@react-aria/utils';
 import PropTypes from 'prop-types';
+import { useTreeState } from 'react-stately';
 import { Box } from '../../index';
 import AccordionItem from '../AccordionItem';
 import { AccordionContext } from '../../context/AccordionContext';

package/lib/components/AccordionGroup/AccordionGroup.stories.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
-import { Item } from '@react-stately/collections';
+import { Item } from 'react-stately';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import Text from '../Text';
 import Button from '../Button';

package/lib/components/AccordionGroup/AccordionGroup.test.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import { Item } from '@react-stately/collections';
+import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';

package/lib/components/AccordionItem/AccordionItem.js

@@ -5,11 +5,10 @@ import React, { forwardRef, useRef, useContext, useImperativeHandle } from 'reac
 import PropTypes from 'prop-types';
 import MenuDown from 'mdi-react/MenuDownIcon';
 import MenuUp from 'mdi-react/MenuUpIcon';
+import { mergeProps, useButton } from 'react-aria';
 import { Button as ThemeUIButton } from 'theme-ui';
-import { useHover } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
 import { useAccordionItem } from '@react-aria/accordion';
-import { useButton } from '@react-aria/button';
+import { useHover } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 import { Text, Icon, Box } from '../../index';
 import { useStatusClasses } from '../../hooks';
@@ -84,18 +83,18 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
       px: '0',
       height: 'unset'
     },
-    variant: "accordionHeader",
+    variant: "variants.accordion.header",
     className: buttonClasses
   }, mergeProps(hoverProps, accordionButtonProps, raButtonProps, buttonProps, focusProps)), ___EmotionJSX(Text, {
     className: buttonClasses,
-    variant: "accordion.accordionTitle"
+    variant: "accordion.title"
   }, item.props.label), ___EmotionJSX(Box, {
     as: "span",
     ml: "5px"
   }, ___EmotionJSX(Icon, {
     icon: isOpen ? MenuUp : MenuDown
   }))), isOpen && ___EmotionJSX(Box, _extends({
-    variant: "accordion.accordionBody"
+    variant: "accordion.body"
   }, accordionRegionProps, regionProps, {
     className: itemClasses
   }), item.rendered));

package/lib/components/ArrayField/ArrayField.js

@@ -21,13 +21,11 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { useCallback, useState } from 'react';
-import { useLabel } from '@react-aria/label';
-import { mergeProps } from '@react-aria/utils';
 import PropTypes from 'prop-types';
+import { mergeProps, useLabel } from 'react-aria';
 import { v4 as uuid } from 'uuid';
 import { Box, Button, FieldHelperText, Label, Text } from '../../';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
-import ArrayFieldItem from './ArrayFieldItem';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
 import statuses from '../../utils/devUtils/constants/statuses';
 /**
@@ -130,6 +128,14 @@ var ArrayField = function ArrayField(props) {
       raLabelProps = _useLabel.labelProps;
 
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
+  var isDisabled = (value || fieldValues).length === 1;
+  var renderedItem = useCallback(function (id, fieldValue, otherFieldProps, onComponentRender) {
+    if (onComponentRender) {
+      return onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
+    }
+
+    return renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
+  }, [onFieldValueChange, onFieldDelete, renderField, isDisabled]);
 
   var _getAriaAttributeProp = getAriaAttributeProps(others),
       ariaProps = _getAriaAttributeProp.ariaProps,
@@ -146,24 +152,18 @@ var ArrayField = function ArrayField(props) {
         fieldValue = _ref2.fieldValue,
         otherFieldProps = _objectWithoutProperties(_ref2, _excluded2);
 
-    var isDisabled = (value || fieldValues).length === 1;
-    return ___EmotionJSX(ArrayFieldItem, _extends({
-      key: id,
-      id: id,
-      isDisabled: isDisabled,
-      fieldValue: fieldValue,
-      onComponentRender: onComponentRender,
-      onFieldValueChange: onFieldValueChange,
-      onFieldDelete: onFieldDelete,
-      renderField: renderField
-    }, otherFieldProps));
+    return ___EmotionJSX(Box, {
+      as: "li",
+      mb: "xs",
+      key: id
+    }, renderedItem(id, fieldValue, otherFieldProps, onComponentRender));
   })), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText), isLimitReached && ___EmotionJSX(FieldHelperText, {
     status: statuses.DEFAULT
   }, maxSizeText || "Maximum ".concat(maxSize, " items.")), !isLimitReached && ___EmotionJSX(Button, {
     "aria-label": "Add field",
-    variant: "text",
+    variant: "link",
     onPress: onFieldAdd,
     sx: {
       width: 'fit-content',

package/lib/components/ArrayField/ArrayField.stories.js

@@ -16,7 +16,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
-import { OverlayProvider } from '@react-aria/overlays';
+import { OverlayProvider } from 'react-aria';
 import { v4 as uuid } from 'uuid';
 import { ArrayField, ArrayFieldDeleteButton, Item, SelectField, TextField } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';

package/lib/components/{Chip → Badge}/Badge.js

@@ -62,7 +62,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, ___EmotionJSX(ThemeUIBadge, _extends({
     isRow: true
   }, badgeProps, {
-    variant: props.variant ? fixedVariant : 'variants.boxes.chip'
+    variant: props.variant ? fixedVariant : 'baseBadge'
   }), (slots === null || slots === void 0 ? void 0 : slots.leftIcon) && ___EmotionJSX(Box, {
     mr: "xs"
   }, slots.leftIcon), ___EmotionJSX(Text, _extends({

package/lib/components/{Chip → Badge}/Badge.stories.js

@@ -5,24 +5,17 @@ import React from 'react';
 import Clear from 'mdi-react/CloseIcon';
 import ContentCopy from 'mdi-react/ContentCopyIcon';
 import Earth from 'mdi-react/EarthIcon';
-import Chip from '.';
+import Badge from '.';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import Box from '../Box';
 import { flatColorList } from '../../styles/colors.js';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import ChipReadme from './Chip.mdx';
+import BadgeReadme from './Badge.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Components/Chip',
-  component: Chip,
-  parameters: {
-    docs: {
-      page: function page() {
-        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ChipReadme, null), ___EmotionJSX(DocsLayout, null));
-      }
-    }
-  },
+  title: 'Badge',
+  component: Badge,
   argTypes: {
     bg: {
       control: {
@@ -60,6 +53,16 @@ export default {
         type: 'boolean'
       }
     }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      },
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(BadgeReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
   }
 };
 
@@ -93,38 +96,38 @@ var VariableIcon = function VariableIcon(props) {
 export var Default = function Default(_ref5) {
   var args = _extends({}, _ref5);
 
-  return ___EmotionJSX(Chip, _extends({
+  return ___EmotionJSX(Badge, _extends({
     label: "Label",
     color: "white"
   }, args));
 };
-export var CountChip = function CountChip(_ref6) {
+export var CountBadge = function CountBadge(_ref6) {
   var args = _extends({}, _ref6);
 
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Chip, _extends({
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Badge, _extends({
     color: "white"
   }, args, {
     label: "1",
-    variant: "variants.boxes.countChip",
+    variant: "countBadge",
     mb: "12px"
-  })), ___EmotionJSX(Chip, _extends({}, args, {
+  })), ___EmotionJSX(Badge, _extends({}, args, {
     label: "1",
-    variant: "variants.boxes.countNeutral"
+    variant: "countNeutral"
   })));
 };
-export var ChipWithCustomColors = function ChipWithCustomColors() {
-  return ___EmotionJSX(Chip, {
+export var BadgeWithCustomColors = function BadgeWithCustomColors() {
+  return ___EmotionJSX(Badge, {
     label: "Custom Colors",
     bg: "green",
     textColor: "#ffffff"
   });
 };
-export var ChipWithIcon = function ChipWithIcon() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Chip, {
-    label: "Chip with Icon Button",
+export var BadgeWithIcon = function BadgeWithIcon() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Badge, {
+    label: "Badge with Icon Button",
     bg: "navy"
   }, ___EmotionJSX(IconButton, {
-    "aria-label": "Clear Chip with Icon Button",
+    "aria-label": "Clear Badge with Icon Button",
     variant: "inverted"
   }, ___EmotionJSX(Icon, {
     icon: Clear,
@@ -134,10 +137,10 @@ export var ChipWithIcon = function ChipWithIcon() {
     style: {
       padding: '5px'
     }
-  }), ___EmotionJSX(Chip, {
-    label: "Chip with Icon Button"
+  }), ___EmotionJSX(Badge, {
+    label: "Badge with Icon Button"
   }, ___EmotionJSX(IconButton, {
-    "aria-label": "Clear Chip with Icon Button",
+    "aria-label": "Clear Badge with Icon Button",
     variant: "inverted"
   }, ___EmotionJSX(Icon, {
     icon: Earth,
@@ -147,8 +150,8 @@ export var ChipWithIcon = function ChipWithIcon() {
     style: {
       padding: '5px'
     }
-  }), ___EmotionJSX(Chip, {
-    label: "Chip with Icon",
+  }), ___EmotionJSX(Badge, {
+    label: "Badge with Icon",
     bg: "green"
   }, ___EmotionJSX(Icon, {
     icon: ContentCopy,
@@ -159,11 +162,11 @@ export var ChipWithIcon = function ChipWithIcon() {
     focusable: "false"
   })));
 };
-export var ChipWithLeftSlotAndIcon = function ChipWithLeftSlotAndIcon() {
-  return ___EmotionJSX(Chip, {
+export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
+  return ___EmotionJSX(Badge, {
     label: "Chip with Icon Button and Left Slot",
     bg: "white",
-    variant: "variants.boxes.itemChipWithSlot",
+    variant: "itemBadgeWithSlot",
     slots: {
       leftIcon: ___EmotionJSX(Icon, {
         icon: VariableIcon,