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

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 { useCollator, useLocale } from '@react-aria/i18n';
+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 { 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';
+import { Item } from '@react-stately/collections';
 import CreateIcon from 'mdi-react/CreateIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
@@ -273,7 +273,30 @@ 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';
+import { Item } from '@react-stately/collections';
 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: "accordionGrid.item",
+    variant: "accordion.accordionGridItem",
     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: "accordionGrid.body",
+    variant: "accordion.accordionGridBody",
     role: "gridcell",
     ref: ref
   }, mergedProps, {

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -3,8 +3,9 @@ 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';
@@ -93,7 +94,7 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     as: "div",
     ref: cellRef
   }, mergedProps, {
-    variant: "accordionGrid.header",
+    variant: "accordion.accordionGridHeader",
     isFocused: isFocusVisible,
     isSelected: isSelected,
     className: classNames

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';
+import { Item } from '@react-stately/collections';
 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';
+import { Item } from '@react-stately/collections';
 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,10 +5,11 @@ 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 { useAccordionItem } from '@react-aria/accordion';
 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 { useFocusRing } from '@react-aria/focus';
 import { Text, Icon, Box } from '../../index';
 import { useStatusClasses } from '../../hooks';
@@ -83,18 +84,18 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
       px: '0',
       height: 'unset'
     },
-    variant: "variants.accordion.header",
+    variant: "accordionHeader",
     className: buttonClasses
   }, mergeProps(hoverProps, accordionButtonProps, raButtonProps, buttonProps, focusProps)), ___EmotionJSX(Text, {
     className: buttonClasses,
-    variant: "accordion.title"
+    variant: "accordion.accordionTitle"
   }, item.props.label), ___EmotionJSX(Box, {
     as: "span",
     ml: "5px"
   }, ___EmotionJSX(Icon, {
     icon: isOpen ? MenuUp : MenuDown
   }))), isOpen && ___EmotionJSX(Box, _extends({
-    variant: "accordion.body"
+    variant: "accordion.accordionBody"
   }, accordionRegionProps, regionProps, {
     className: itemClasses
   }), item.rendered));

package/lib/components/ArrayField/ArrayField.js

@@ -21,11 +21,13 @@ 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';
 /**
@@ -128,14 +130,6 @@ 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,
@@ -152,18 +146,24 @@ var ArrayField = function ArrayField(props) {
         fieldValue = _ref2.fieldValue,
         otherFieldProps = _objectWithoutProperties(_ref2, _excluded2);
 
-    return ___EmotionJSX(Box, {
-      as: "li",
-      mb: "xs",
-      key: id
-    }, renderedItem(id, fieldValue, otherFieldProps, onComponentRender));
+    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));
   })), 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: "link",
+    variant: "text",
     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';
+import { OverlayProvider } from '@react-aria/overlays';
 import { v4 as uuid } from 'uuid';
 import { ArrayField, ArrayFieldDeleteButton, Item, SelectField, TextField } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';

package/lib/components/ArrayField/ArrayFieldItem.js

@@ -0,0 +1,31 @@
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "onComponentRender", "fieldValue", "isDisabled", "onFieldDelete", "onFieldValueChange", "renderField"];
+import React from 'react';
+import PropTypes from 'prop-types';
+import Box from '../Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ArrayFieldItem = /*#__PURE__*/React.memo(function (_ref) {
+  var id = _ref.id,
+      onComponentRender = _ref.onComponentRender,
+      fieldValue = _ref.fieldValue,
+      isDisabled = _ref.isDisabled,
+      onFieldDelete = _ref.onFieldDelete,
+      onFieldValueChange = _ref.onFieldValueChange,
+      renderField = _ref.renderField,
+      otherFieldProps = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX(Box, {
+    as: "li",
+    mb: "xs"
+  }, onComponentRender ? onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) : renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps));
+});
+ArrayFieldItem.propTypes = {
+  id: PropTypes.string,
+  onComponentRender: PropTypes.func,
+  fieldValue: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  onFieldDelete: PropTypes.func,
+  onFieldValueChange: PropTypes.func,
+  renderField: PropTypes.func
+};
+export default ArrayFieldItem;

package/lib/components/Box/Box.js

@@ -31,7 +31,7 @@ var ExtendedBox = /*#__PURE__*/_styled(ThemeUIBox, process.env.NODE_ENV === "pro
 } : {
   target: "e146bxl90",
   label: "ExtendedBox"
-})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU29CIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiwgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3gsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IEJveCBhcyBUaGVtZVVJQm94IH0gZnJvbSAndGhlbWUtdWknO1xuaW1wb3J0IHsgcHJvcFR5cGUgYXMgc3R5bGVQcm9wVHlwZSB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgdXNlU3RhdHVzQ2xhc3NlcywgdXNlUHJvcFdhcm5pbmcgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5cbmNvbnN0IEV4dGVuZGVkQm94ID0gc3R5bGVkKFRoZW1lVUlCb3gpKGxheW91dCwgZmxleGJveCwgdHlwb2dyYXBoeSk7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3Qge1xuICAgIGZsZXhEaXJlY3Rpb24sIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICBnYXAsXG4gICAgaXNSb3csXG4gICAgaXNEaXNhYmxlZCxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuICBjb25zdCBmZCA9IGZsZXhEaXJlY3Rpb24gfHwgaXNSb3cgPyAncm93JyA6ICdjb2x1bW4nO1xuICBjb25zdCBjdXN0b20gPSB7IC4uLnN4IH07XG5cbiAgY29uc3QgeyBjbGFzc05hbWVzIH0gPSB1c2VTdGF0dXNDbGFzc2VzKGNsYXNzTmFtZSwgeyBpc0Rpc2FibGVkIH0pO1xuICB1c2VQcm9wV2FybmluZyhwcm9wcywgJ2Rpc2FibGVkJywgJ2lzRGlzYWJsZWQnKTtcblxuICBpZiAoZ2FwKSB7XG4gICAgY3VzdG9tWycmID4gKiArICo6bm90KDpmaXJzdC1jaGlsZCkgLyogZW1vdGlvbi1kaXNhYmxlLXNlcnZlci1yZW5kZXJpbmctdW5zYWZlLXNlbGVjdG9yLXdhcm5pbmctcGxlYXNlLWRvLW5vdC11c2UtdGhpcy10aGUtd2FybmluZy1leGlzdHMtZm9yLWEtcmVhc29uICovJ10gPSB7XG4gICAgICBbZmQgPT09ICdyb3cnID8gJ21hcmdpbkxlZnQnIDogJ21hcmdpblRvcCddOiBnYXAsXG4gICAgfTtcbiAgfVxuXG4gIGNvbnN0IGN1c3RvbUZvbnRTaXplID0gdXNlTWVtbygoKSA9PiB7XG4gICAgY29uc3QgbnVtZXJpY2FsRm9udFNpemUgPSB0b051bWJlcihmb250U2l6ZSk7XG4gICAgaWYgKE51bWJlci5pc05hTihudW1lcmljYWxGb250U2l6ZSkpIHtcbiAgICAgIHJldHVybiBmb250U2l6ZTtcbiAgICB9XG4gICAgcmV0dXJuIG51bWVyaWNhbEZvbnRTaXplO1xuICB9LCBbZm9udFNpemVdKTtcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZEJveFxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPXtmZH1cbiAgICAgIHZhcmlhbnQ9XCJib3guYmFzZVwiXG4gICAgICBmb250U2l6ZT17Y3VzdG9tRm9udFNpemV9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgICAgc3g9e2N1c3RvbX1cbiAgICAvPlxuICApO1xufSk7XG5cbkJveC5wcm9wVHlwZXMgPSB7XG4gIC8qKiBUaGUgYmFja2dyb3VuZCBjb2xvciBvZiB0aGUgYm94LiAqL1xuICBiZzogUHJvcFR5cGVzLnN0cmluZyxcbiAgLyoqIFdoZXRoZXIgdGhlIGJveCBpcyBkaXNhYmxlZC4gKi9cbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLmJvb2wsIFByb3BUeXBlcy5vYmplY3RdKSxcbiAgLyoqIFRoZSBiYXNlIEhUTUwgdGFnIG5hbWUgb3IgUmVhY3QgY29tcG9uZW50IHR5cGUgdG8gcmVuZGVyICovXG4gIGFzOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMuZWxlbWVudFR5cGVdKSxcbiAgLyoqIFdoZW4gdHJ1ZSwgZGlzcGxheSBhcyBhIHJvdyByYXRoZXIgdGhhbiBhIGNvbHVtbi4gKi9cbiAgaXNSb3c6IFByb3BUeXBlcy5ib29sLFxuICAvKiogR2FwIGJldHdlZW4gaXRlbXMsIHdoZXRoZXIgaW4gYSByb3cgb3IgY29sdW1uLiAqL1xuICBnYXA6IHN0eWxlUHJvcFR5cGUsXG4gIGZvbnRTaXplOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuc3RyaW5nLCBQcm9wVHlwZXMubnVtYmVyXSksXG59O1xuXG5Cb3guZGVmYXVsdFByb3BzID0ge1xuICBhczogJ2RpdicsXG4gIGlzUm93OiBmYWxzZSxcbiAgaXNEaXNhYmxlZDogZmFsc2UsXG59O1xuXG5Cb3guZGlzcGxheU5hbWUgPSAnQm94JztcblxuZXhwb3J0IGRlZmF1bHQgQm94O1xuIl19 */");
+})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU29CIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JveC9Cb3guanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiwgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBsYXlvdXQsIGZsZXhib3gsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IEJveCBhcyBUaGVtZVVJQm94IH0gZnJvbSAndGhlbWUtdWknO1xuaW1wb3J0IHsgcHJvcFR5cGUgYXMgc3R5bGVQcm9wVHlwZSB9IGZyb20gJ0BzdHlsZWQtc3lzdGVtL3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdG9OdW1iZXIgfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgdXNlU3RhdHVzQ2xhc3NlcywgdXNlUHJvcFdhcm5pbmcgfSBmcm9tICcuLi8uLi9ob29rcyc7XG5cbmNvbnN0IEV4dGVuZGVkQm94ID0gc3R5bGVkKFRoZW1lVUlCb3gpKGxheW91dCwgZmxleGJveCwgdHlwb2dyYXBoeSk7XG5cbmNvbnN0IEJveCA9IGZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3Qge1xuICAgIGZsZXhEaXJlY3Rpb24sIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICBnYXAsXG4gICAgaXNSb3csXG4gICAgaXNEaXNhYmxlZCxcbiAgICBjbGFzc05hbWUsXG4gICAgZm9udFNpemUsXG4gICAgc3gsIC8vIGVzbGludC1kaXNhYmxlLWxpbmVcbiAgICAuLi5vdGhlcnNcbiAgfSA9IHByb3BzO1xuICBjb25zdCBmZCA9IGZsZXhEaXJlY3Rpb24gfHwgaXNSb3cgPyAncm93JyA6ICdjb2x1bW4nO1xuICBjb25zdCBjdXN0b20gPSB7IC4uLnN4IH07XG5cbiAgY29uc3QgeyBjbGFzc05hbWVzIH0gPSB1c2VTdGF0dXNDbGFzc2VzKGNsYXNzTmFtZSwgeyBpc0Rpc2FibGVkIH0pO1xuICB1c2VQcm9wV2FybmluZyhwcm9wcywgJ2Rpc2FibGVkJywgJ2lzRGlzYWJsZWQnKTtcblxuICBpZiAoZ2FwKSB7XG4gICAgY3VzdG9tWycmID4gKiArICo6bm90KDpmaXJzdC1jaGlsZCkgLyogZW1vdGlvbi1kaXNhYmxlLXNlcnZlci1yZW5kZXJpbmctdW5zYWZlLXNlbGVjdG9yLXdhcm5pbmctcGxlYXNlLWRvLW5vdC11c2UtdGhpcy10aGUtd2FybmluZy1leGlzdHMtZm9yLWEtcmVhc29uICovJ10gPSB7XG4gICAgICBbZmQgPT09ICdyb3cnID8gJ21hcmdpbkxlZnQnIDogJ21hcmdpblRvcCddOiBnYXAsXG4gICAgfTtcbiAgfVxuXG4gIGNvbnN0IGN1c3RvbUZvbnRTaXplID0gdXNlTWVtbygoKSA9PiB7XG4gICAgY29uc3QgbnVtZXJpY2FsRm9udFNpemUgPSB0b051bWJlcihmb250U2l6ZSk7XG4gICAgaWYgKE51bWJlci5pc05hTihudW1lcmljYWxGb250U2l6ZSkpIHtcbiAgICAgIHJldHVybiBmb250U2l6ZTtcbiAgICB9XG4gICAgcmV0dXJuIG51bWVyaWNhbEZvbnRTaXplO1xuICB9LCBbZm9udFNpemVdKTtcblxuICByZXR1cm4gKFxuICAgIDxFeHRlbmRlZEJveFxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWVzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPXtmZH1cbiAgICAgIHZhcmlhbnQ9XCJib3hlcy5iYXNlXCJcbiAgICAgIGZvbnRTaXplPXtjdXN0b21Gb250U2l6ZX1cbiAgICAgIHsuLi5vdGhlcnN9XG4gICAgICBzeD17Y3VzdG9tfVxuICAgIC8+XG4gICk7XG59KTtcblxuQm94LnByb3BUeXBlcyA9IHtcbiAgLyoqIFRoZSBiYWNrZ3JvdW5kIGNvbG9yIG9mIHRoZSBib3guICovXG4gIGJnOiBQcm9wVHlwZXMuc3RyaW5nLFxuICAvKiogV2hldGhlciB0aGUgYm94IGlzIGRpc2FibGVkLiAqL1xuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuYm9vbCwgUHJvcFR5cGVzLm9iamVjdF0pLFxuICAvKiogVGhlIGJhc2UgSFRNTCB0YWcgbmFtZSBvciBSZWFjdCBjb21wb25lbnQgdHlwZSB0byByZW5kZXIgKi9cbiAgYXM6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5lbGVtZW50VHlwZV0pLFxuICAvKiogV2hlbiB0cnVlLCBkaXNwbGF5IGFzIGEgcm93IHJhdGhlciB0aGFuIGEgY29sdW1uLiAqL1xuICBpc1JvdzogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKiBHYXAgYmV0d2VlbiBpdGVtcywgd2hldGhlciBpbiBhIHJvdyBvciBjb2x1bW4uICovXG4gIGdhcDogc3R5bGVQcm9wVHlwZSxcbiAgZm9udFNpemU6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbn07XG5cbkJveC5kZWZhdWx0UHJvcHMgPSB7XG4gIGFzOiAnZGl2JyxcbiAgaXNSb3c6IGZhbHNlLFxuICBpc0Rpc2FibGVkOiBmYWxzZSxcbn07XG5cbkJveC5kaXNwbGF5TmFtZSA9ICdCb3gnO1xuXG5leHBvcnQgZGVmYXVsdCBCb3g7XG4iXX0= */");
 
 var Box = /*#__PURE__*/forwardRef(function (props, ref) {
   var flexDirection = props.flexDirection,
@@ -72,7 +72,7 @@ var Box = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     display: "flex",
     flexDirection: fd,
-    variant: "box.base",
+    variant: "boxes.base",
     fontSize: customFontSize
   }, others, {
     sx: custom

package/lib/components/Bracket/Bracket.js

@@ -18,7 +18,7 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
     return bracketRef.current;
   });
   return ___EmotionJSX(Box, _extends({
-    variant: "bracket.base"
+    variant: "boxes.bracketBase"
   }, others), !isLast && ___EmotionJSX(Box, {
     width: 15,
     sx: {

package/lib/components/Bracket/Bracket.stories.js

@@ -1,6 +1,6 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
-import { Box, Bracket, Badge, Text } from '../../index';
+import { Box, Bracket, Chip, Text } from '../../index';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import BracketReadme from './Bracket.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -28,7 +28,7 @@ export var Default = function Default() {
     field3: 'UX Team',
     key: 'Group2Field'
   }];
-  var customBadgeStyles = {
+  var customChipStyles = {
     '& > span': {
       textTransform: 'none',
       fontWeight: '500'
@@ -42,11 +42,11 @@ export var Default = function Default() {
     bg: "background"
   }, ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Badge, {
+  }, ___EmotionJSX(Chip, {
     label: "Any",
     bg: "neutral.20",
     mr: "sm",
-    sx: customBadgeStyles,
+    sx: customChipStyles,
     alignSelf: "center"
   }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
     return ___EmotionJSX(Box, {
@@ -56,8 +56,7 @@ export var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), ___EmotionJSX(Box, {
       mt: "md",
-      ml: "xs",
-      variant: "forms.input.fieldControlWrapper",
+      variant: "forms.input.container",
       bg: "white",
       isRow: true,
       alignItems: "center",
@@ -71,11 +70,11 @@ export var Default = function Default() {
     }, ___EmotionJSX(Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), ___EmotionJSX(Badge, {
+    }, item.field1), ___EmotionJSX(Chip, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: customBadgeStyles,
+      sx: customChipStyles,
       mr: "sm",
       alignSelf: "center"
     }), ___EmotionJSX(Text, null, item.field3)));

package/lib/components/Breadcrumbs/BreadcrumbItem.js

@@ -15,9 +15,10 @@ 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 React, { forwardRef, Fragment, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { omit } from 'lodash/object';
+import { useBreadcrumbItem } from '@react-aria/breadcrumbs';
 import PropTypes from 'prop-types';
-import { mergeProps, useBreadcrumbItem } from 'react-aria';
+import { mergeProps } from '@react-aria/utils';
+import { omit } from 'lodash/object';
 import { usePropWarning } from '../../hooks/';
 import { Button, IconButton, Text, Link } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -5,8 +5,9 @@ import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { forwardRef, useRef, useImperativeHandle, useCallback } from 'react';
+import { useBreadcrumbs } from '@react-aria/breadcrumbs';
 import PropTypes from 'prop-types';
-import { mergeProps, useBreadcrumbs } from 'react-aria';
+import { mergeProps } from '@react-aria/utils';
 import { Box, Icon } from '../../index';
 import { usePropWarning } from '../../hooks/';
 import BreadcrumbItem from './BreadcrumbItem';
@@ -43,13 +44,13 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
       },
       as: "li",
       key: "li-".concat(child.key),
-      variant: "variants.breadcrumb.containerLi"
+      variant: "text.breadcrumbLi"
     }, ___EmotionJSX(BreadcrumbItem, _extends({
       "data-id": child['data-id'],
       isCurrent: isCurrentItem,
       onAction: onAction,
       actionKey: child.key,
-      variant: "variants.breadcrumb.link"
+      variant: "text.breadcrumbLink"
     }, child.props), child.props.children), icon && !isCurrentItem && ___EmotionJSX(Icon, _extends({
       "aria-hidden": "true",
       icon: icon,

package/lib/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
-import { Item } from 'react-stately';
 import { action } from '@storybook/addon-actions';
+import { Item } from '@react-stately/collections';
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import Breadcrumbs from './Breadcrumbs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import BreadcrumbsReadme from './Breadcrumbs.mdx';

package/lib/components/Breadcrumbs/Breadcrumbs.test.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
-import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
+import { mergeProps } from '@react-aria/utils';
 import CreateIcon from 'mdi-react/CreateIcon';
-import { mergeProps } from 'react-aria';
-import { Item } from 'react-stately';
+import { Item } from '@react-stately/collections';
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import userEvent from '@testing-library/user-event';
 import Breadcrumbs from './Breadcrumbs';
 import axeTest from '../../utils/testUtils/testAxe';

package/lib/components/Button/Button.js

@@ -17,10 +17,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps, useButton, useFocusRing } from 'react-aria';
 import { Button as ThemeUIButton } from 'theme-ui';
+import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
-import { useStatusClasses, usePropWarning, useAriaLabelWarning } from '../../hooks';
+import { useFocusRing } from '@react-aria/focus';
+import { mergeProps } from '@react-aria/utils';
+import { useStatusClasses, usePropWarning, useAriaLabelWarning, useDeprecationWarning } from '../../hooks';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -70,6 +72,15 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  useDeprecationWarning('The "icon" variant for `Button` is deprecated in Astro-UI 1.0.0, use the `IconButton` component instead.', {
+    isActive: props.variant === 'icon'
+  });
+  useDeprecationWarning('The "danger" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `critical` variant instead.', {
+    isActive: props.variant === 'danger'
+  });
+  useDeprecationWarning('The "text" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `link` variant instead.', {
+    isActive: props.variant === 'text'
+  });
   var ariaLabel = props['aria-label'];
   useAriaLabelWarning('Button', ariaLabel, variant === 'filter');
   return ___EmotionJSX(ThemeUIButton, _extends({

package/lib/components/Button/Button.stories.js

@@ -16,7 +16,7 @@ delete variants.ICON;
 delete variants.ICON_BUTTON;
 delete variants.INVERTED; // add designer approved variants for devs to use here
 
-var variantOptions = ['critical', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success'];
+var variantOptions = ['critical', 'danger', 'default', 'inline', 'inlinePrimary', 'link', 'primary', 'success', 'text'];
 export default {
   title: 'Components/Button',
   component: Button,

package/lib/components/CheckboxField/CheckboxField.js

@@ -14,15 +14,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) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React, { forwardRef, useRef, useImperativeHandle, useMemo, useEffect } from 'react';
-import { useCheckbox } from 'react-aria';
-import { useToggleState } from 'react-stately';
+import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
+import { useCheckbox } from '@react-aria/checkbox';
+import { useToggleState } from '@react-stately/toggle';
 import { usePress } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Checkbox, FieldHelperText, Label } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { useField, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 /**
@@ -78,18 +77,16 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
-  var helperTextId = useMemo(function () {
-    return uuid();
-  }, []);
+  var helperTextId = uuid();
   return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, _extends({
     variant: "forms.label.checkbox"
   }, fieldLabelProps), ___EmotionJSX(Checkbox, _extends({
     ref: checkboxRef,
     "aria-describedby": helperText && helperTextId
-  }, fieldControlInputProps)), label), helperText && ___EmotionJSX(FieldHelperText, {
+  }, fieldControlProps)), label), helperText && ___EmotionJSX(FieldHelperText, {
     status: status,
     sx: {
       pt: 7
@@ -97,7 +94,7 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-CheckboxField.propTypes = _objectSpread(_objectSpread({
+CheckboxField.propTypes = _objectSpread({
   /** Whether the element should receive focus on render. */
   hasAutoFocus: PropTypes.bool,
 
@@ -159,7 +156,16 @@ CheckboxField.propTypes = _objectSpread(_objectSpread({
   onKeyDown: PropTypes.func,
 
   /** Handler that is called when a key is released. */
-  onKeyUp: PropTypes.func
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+  onKeyUp: PropTypes.func,
+
+  /** Props object that is spread directly into the root (top-level) element. */
+  containerProps: PropTypes.shape({}),
+
+  /** Props object that is spread directly into the input element. */
+  controlProps: PropTypes.shape({}),
+
+  /** Props object that is spread directly into the label element. */
+  labelProps: PropTypes.shape({})
+}, ariaAttributesBasePropTypes);
 CheckboxField.displayName = 'CheckboxField';
 export default CheckboxField;

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -18,7 +18,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { useEffect, useState } from 'react';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import CheckboxField from './CheckboxField';
 import Link from '../Link';
 import Text from '../Text';
@@ -35,7 +34,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -72,8 +71,23 @@ export default {
     hasAutoFocus: {},
     isIndeterminate: {},
     isDefaultSelected: {},
-    isSelected: {}
-  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+    isSelected: {},
+    containerProps: {
+      control: {
+        type: 'none'
+      }
+    },
+    controlProps: {
+      control: {
+        type: 'none'
+      }
+    },
+    labelProps: {
+      control: {
+        type: 'none'
+      }
+    }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(CheckboxField, args);

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

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