@pingux/astro 1.42.0 → 2.0.0-alpha.1

package/lib/cjs/components/CollapsiblePanelContainer/CollapsiblePanelBadge.js

@@ -18,7 +18,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Chip = _interopRequireDefault(require("../Chip"));
+var _Badge = _interopRequireDefault(require("../Badge"));
 
 var _react2 = require("@emotion/react");
 
@@ -30,7 +30,7 @@ var _excluded = ["selectedFilterCount"];
 var CollapsiblePanelBadge = function CollapsiblePanelBadge(props) {
   var selectedFilterCount = props.selectedFilterCount,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  return (0, _react2.jsx)(_Chip["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_Badge["default"], (0, _extends2["default"])({
     as: "span",
     bg: "neutral.90",
     label: selectedFilterCount.toString(),

package/lib/cjs/components/CollapsiblePanelContainer/CollapsiblePanelContainer.js

@@ -28,7 +28,7 @@ var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIc
 
 var _ChevronLeftIcon = _interopRequireDefault(require("mdi-react/ChevronLeftIcon"));
 
-var _overlays = require("@react-stately/overlays");
+var _reactStately = require("react-stately");
 
 var _CollapsiblePanelBadge = _interopRequireDefault(require("./CollapsiblePanelBadge"));
 
@@ -61,7 +61,7 @@ var CollapsiblePanelContainer = /*#__PURE__*/(0, _react.forwardRef)(function (pr
 
   var triggerRef = _react["default"].useRef();
 
-  var state = (0, _overlays.useOverlayTriggerState)({
+  var state = (0, _reactStately.useOverlayTriggerState)({
     defaultOpen: isDefaultOpen,
     isOpen: isOpen,
     onOpenChange: onOpenChange
@@ -91,7 +91,7 @@ var CollapsiblePanelContainer = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     className: classNames,
     onKeyUp: handleClose,
     ref: ref,
-    variant: "collapsiblePanel.collapsiblePanelContainer",
+    variant: "collapsiblePanel.container",
     isRow: true
   }, others), (0, _react2.jsx)(_index.IconButton, {
     isRow: true,
@@ -99,7 +99,7 @@ var CollapsiblePanelContainer = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     "data-testid": "collapsible-panel-button",
     onPress: handleButtonPress,
     ref: triggerRef,
-    variant: "collapsiblePanelToggle",
+    variant: "toggle",
     pr: "sm"
   }, (0, _react2.jsx)(_index.Icon, {
     color: "active",

package/lib/cjs/components/CollapsiblePanelItem/CollapsiblePanelItem.js

@@ -44,7 +44,7 @@ var CollapsiblePanelItem = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     isRow: true,
     ref: ref
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "collapsiblePanellItem"
+    variant: "variants.collapsiblePanel.itemText"
   }, text), iconElement && (isDefaultSelected ? iconElement : (0, _react2.jsx)(_index.IconButton, {
     sx: {
       width: 20,

package/lib/cjs/components/ColorField/ColorField.js

@@ -38,26 +38,24 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _focus = require("@react-aria/focus");
-
-var _visuallyHidden = require("@react-aria/visually-hidden");
-
-var _color = require("@react-aria/color");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _color2 = require("@react-stately/color");
+var _reactAria = require("react-aria");
 
-var _overlays = require("@react-stately/overlays");
+var _reactColor = require("react-color");
 
-var _overlays2 = require("@react-aria/overlays");
+var _reactStately = require("react-stately");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _color = require("@react-aria/color");
 
-var _reactColor = require("react-color");
+var _color2 = require("@react-stately/color");
 
 var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _PopoverContainer = _interopRequireDefault(require("../PopoverContainer"));
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -111,9 +109,9 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var overlayRef = _react["default"].useRef();
 
   var state = (0, _color2.useColorFieldState)(nonAriaProps);
-  var popoverState = (0, _overlays.useOverlayTriggerState)({});
+  var popoverState = (0, _reactStately.useOverlayTriggerState)({});
 
-  var _useOverlayTrigger = (0, _overlays2.useOverlayTrigger)({
+  var _useOverlayTrigger = (0, _reactAria.useOverlayTrigger)({
     type: 'dialog'
   }, popoverState, triggerRef),
       triggerProps = _useOverlayTrigger.triggerProps,
@@ -123,7 +121,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       raLabelProps = _useColorField.labelProps,
       raInputProps = _useColorField.inputProps;
 
-  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
+  var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
       visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
 
   var _useField = (0, _useField2["default"])(_objectSpread(_objectSpread({}, nonAriaProps), {}, {
@@ -131,10 +129,11 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
-  var _useOverlayPosition = (0, _overlays2.useOverlayPosition)({
+  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
     targetRef: triggerRef,
     overlayRef: overlayRef,
     placement: (0, _concat["default"])(_context = "".concat(direction, " ")).call(_context, align),
@@ -144,6 +143,8 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     shouldUpdatePosition: true
   }),
       positionProps = _useOverlayPosition.overlayProps;
+  /* istanbul ignore next */
+
 
   var handleButtonPress = (0, _react.useCallback)(function () {
     return popoverState.open();
@@ -164,10 +165,10 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
     ref: triggerRef,
-    variant: "colorField"
-  }, triggerProps, ariaProps, buttonProps)), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({}, visuallyHiddenProps, fieldControlProps, {
+    variant: "forms.colorField.container"
+  }, (0, _reactAria.mergeProps)(buttonProps, ariaProps, triggerProps))), (0, _react2.jsx)(_.Box, fieldControlWrapperProps, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({}, visuallyHiddenProps, fieldControlInputProps, {
     ref: colorRef
-  })), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  }))), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
   }, helperText), (0, _react2.jsx)(_PopoverContainer["default"], (0, _extends2["default"])({
     hasNoArrow: true,
@@ -176,7 +177,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isOpen: popoverState.isOpen,
     onClose: popoverState.close,
     ref: overlayRef
-  }, overlayProps, positionProps), (0, _react2.jsx)(_focus.FocusScope, {
+  }, overlayProps, positionProps), (0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true,
     contain: true,
     autoFocus: true
@@ -185,7 +186,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onChange: handleColorChange
   }))));
 });
-ColorField.propTypes = _objectSpread({
+ColorField.propTypes = _objectSpread(_objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
 
@@ -211,17 +212,8 @@ ColorField.propTypes = _objectSpread({
   value: _propTypes["default"].string,
 
   /** Props object that is spread into the Button element. */
-  buttonProps: _propTypes["default"].shape({}),
-
-  /** Props object that is spread directly into the root (top-level) Box component. */
-  containerProps: _propTypes["default"].shape({}),
-
-  /** Props object that is spread into the input element. */
-  controlProps: _propTypes["default"].shape({}),
-
-  /** Props object that is spread into the label element. */
-  labelProps: _propTypes["default"].shape({})
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+  buttonProps: _propTypes["default"].shape({})
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
 ColorField.defaultProps = {
   align: 'middle',
   direction: 'bottom'

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

@@ -42,6 +42,8 @@ var _ = 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");
@@ -64,7 +66,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     value: {
       control: {
         type: 'text'
@@ -100,26 +102,11 @@ var _default = {
       }
     },
     containerProps: {
-      control: {
-        type: 'none'
-      },
-      defaultValue: {
-        sx: {
-          marginLeft: 50
-        }
-      }
-    },
-    controlProps: {
-      control: {
-        type: 'none'
-      }
-    },
-    labelProps: {
       control: {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 

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

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

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

@@ -22,32 +22,40 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.radioField = exports.radio = void 0;
+exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _buttons = require("../variants/buttons");
+var _Input = require("../Input/Input.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; }
 
-// 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 container = {
+  position: 'relative'
 };
-exports.radio = radio;
-var radioField = {
-  '.is-horizontal &': {
-    mr: '15px'
-  }
+
+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.radioField = radioField;
+exports["default"] = _default;

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -44,13 +44,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _focus = require("@react-aria/focus");
-
-var _interactions = require("@react-aria/interactions");
+var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 
-var _utils = require("@react-aria/utils");
+var _reactAria = require("react-aria");
 
-var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
+var _interactions = require("@react-aria/interactions");
 
 var _ = require("../../");
 
@@ -96,21 +94,23 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       wrapperProps = props.wrapperProps,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
+  var _useHover = (0, _interactions.useHover)({}),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
   var textFieldProps = _objectSpread({
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
-    containerProps: containerProps
-  }, (0, _utils.mergeProps)(inputProps, others)); // istanbul ignore next
+    containerProps: _objectSpread(_objectSpread({
+      sx: style,
+      variant: 'forms.comboBox.container'
+    }, hoverProps), containerProps)
+  }, (0, _reactAria.mergeProps)(inputProps, others)); // istanbul ignore next
 
 
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
-  });
-
-  var _useHover = (0, _interactions.useHover)({}),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered; // START - minimum delay time for loading indicator = 500ms
-
+  }); // START - minimum delay time for loading indicator = 500ms
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -149,7 +149,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var button = !isReadOnly && (0, _react2.jsx)(_.Box, {
     isRow: true,
-    variant: "boxes.inputInContainerSlot"
+    variant: "forms.comboBox.inputInContainerSlot"
   }, // Render loader after delay if filtering or loading
   showLoading && (isOpen || menuTrigger === 'manual' || loadingState === _loadingStates["default"].LOADING) && (0, _react2.jsx)(_.Loader, {
     variant: "loader.withinInput"
@@ -157,7 +157,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     preventFocusOnPress: true,
     isPressed: isOpen
   }, (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
-    variant: "comboBox"
+    variant: "forms.comboBox.button"
   }, triggerProps, {
     ref: triggerRef,
     isDisabled: isDisabled || isReadOnly,
@@ -168,20 +168,16 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       transform: 'rotate(180deg)'
     } : null
   }))));
-  return (0, _react2.jsx)(_focus.FocusRing, {
+  return (0, _react2.jsx)(_reactAria.FocusRing, {
     within: true,
     isTextInput: true,
     focusClass: "is-focused",
     focusRingClass: "focus-ring",
     autoFocus: hasAutoFocus
-  }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    isRow: true,
-    style: style,
-    variant: "forms.comboBox.container"
-  }, hoverProps, wrapperProps), (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({}, textFieldProps, {
-    wrapperProps: {
+  }, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({}, textFieldProps, {
+    wrapperProps: _objectSpread({
       ref: inputWrapperRef
-    },
+    }, wrapperProps),
     controlProps: _objectSpread({
       variant: 'forms.comboBox.input'
     }, controlProps),
@@ -192,7 +188,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     slots: {
       inContainer: button
     }
-  }))));
+  })));
 });
 ComboBoxInput.propTypes = _objectSpread({
   containerProps: _propTypes["default"].shape({}),

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -44,19 +44,15 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _combobox = require("@react-aria/combobox");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _utils = require("@react-aria/utils");
+var _reactAria = require("react-aria");
 
-var _focus = require("@react-aria/focus");
+var _reactStately = require("react-stately");
 
 var _i18n = require("@react-aria/i18n");
 
-var _overlays = require("@react-aria/overlays");
-
-var _combobox2 = require("@react-stately/combobox");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@react-aria/utils");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
@@ -183,7 +179,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }),
       contains = _useFilter.contains;
 
-  var state = (0, _combobox2.useComboBoxState)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
+  var state = (0, _reactStately.useComboBoxState)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
     defaultItems: isReadOnly ? [] : defaultItems,
     items: items,
     onSelectionChange: hasAddOption || hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
@@ -193,7 +189,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (shouldShowAddOption) state.selectionManager.setFocusedKey(addOption);
   }, [shouldShowAddOption, inputValue, addOption, state.isOpen]);
 
-  var _useComboBox = (0, _combobox.useComboBox)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
+  var _useComboBox = (0, _reactAria.useComboBox)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
     buttonRef: buttonRef,
     popoverRef: popoverRef,
     listBoxRef: listBoxRef,
@@ -208,7 +204,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       shouldSelectOnPressUp = listBoxProps.shouldSelectOnPressUp,
       otherListBoxProps = (0, _objectWithoutProperties2["default"])(listBoxProps, _excluded2);
 
-  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
+  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
     targetRef: inputWrapperRef,
     overlayRef: popoverRef,
     scrollRef: listBoxRef,
@@ -264,9 +260,9 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     placement: placement,
     ref: popoverRef,
     style: style
-  }, (0, _react2.jsx)(_focus.FocusScope, {
+  }, (0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true
-  }, (0, _react2.jsx)(_overlays.DismissButton, {
+  }, (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: state.close
   }), (0, _react2.jsx)(_ScrollBox["default"], scrollBoxProps, (0, _react2.jsx)(_ListBox["default"], (0, _extends2["default"])({
     ref: listBoxRef,
@@ -278,7 +274,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onLoadMore: onLoadMore,
     isFocusedOnHover: shouldFocusOnHover,
     isSelectedOnPressUp: shouldSelectOnPressUp
-  }, otherListBoxProps))), (0, _react2.jsx)(_overlays.DismissButton, {
+  }, otherListBoxProps))), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: state.close
   })));
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ComboBox["default"], (0, _extends2["default"])({}, props, {

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

@@ -52,11 +52,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _addonActions = require("@storybook/addon-actions");
+var _reactStately = require("react-stately");
 
 var _i18n = require("@react-aria/i18n");
 
-var _data = require("@react-stately/data");
+var _addonActions = require("@storybook/addon-actions");
 
 var _ = require("../../");
 
@@ -270,7 +270,7 @@ exports.WithSections = WithSections;
 
 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, filterText, res, json;

package/lib/cjs/components/CopyText/CopyButton.js

@@ -40,11 +40,10 @@ var CopyButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
     ref: ref,
     "aria-label": "copy to clipboard",
-    variant: "buttons.copy"
+    variant: "copyButton"
   }, (0, _lodash.omit)(props, 'iconProps')), (0, _react2.jsx)(_Icon["default"], (0, _extends2["default"])({
     icon: _ContentCopyIcon["default"],
-    size: 15,
-    color: "text.secondary"
+    size: 15
   }, props === null || props === void 0 ? void 0 : props.iconProps)));
 });
 CopyButton.propTypes = {

package/lib/cjs/components/CopyText/CopyText.js

@@ -28,12 +28,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _focus = require("@react-aria/focus");
+var _reactAria = require("react-aria");
 
 var _interactions = require("@react-aria/interactions");
 
-var _utils = require("@react-aria/utils");
-
 var _liveAnnouncer = require("@react-aria/live-announcer");
 
 var _index = require("../../index");
@@ -86,7 +84,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
-  var _useFocusRing = (0, _focus.useFocusRing)(),
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
       focusProps = _useFocusRing.focusProps,
       isFocusVisible = _useFocusRing.isFocusVisible;
 
@@ -133,7 +131,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   delete pressProps.onPointerDown;
   var content = mode === 'link' || mode === 'nonClickableContent' ? children : (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: contentRef
-  }, (0, _utils.mergeProps)(focusProps, pressProps)), children);
+  }, (0, _reactAria.mergeProps)(focusProps, pressProps)), children);
   var tooltip = isCopied ? 'Copied!' : tooltipText;
   var isTooltipOpen = isFocusVisible || isHovered || isCopied;
   var pressableRef = (0, _react.useRef)();
@@ -156,7 +154,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ref: wrapperRef,
       isRow: true,
       tabIndex: 0
-    }, (0, _utils.mergeProps)(hoverProps, others), wrapperProps), content, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
+    }, (0, _reactAria.mergeProps)(hoverProps, others), wrapperProps), content, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
       onPress: copyToClipboard
     }, focusProps))));
   }
@@ -165,13 +163,13 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
       ref: ref,
       isRow: true,
-      variant: "boxes.copy"
+      variant: "copyText.copy"
     }, wrapperProps, others), content, (0, _react2.jsx)(TooltipWrapper, {
       isOpen: isTooltipOpen,
       tooltip: tooltip
     }, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
       onPress: copyToClipboard
-    }, (0, _utils.mergeProps)(hoverProps, focusProps)))));
+    }, (0, _reactAria.mergeProps)(hoverProps, focusProps)))));
   }
 
   return (0, _react2.jsx)(TooltipWrapper, {
@@ -180,14 +178,14 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     targetRef: pressableRef
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: pressableRef
-  }, (0, _utils.mergeProps)(hoverProps, pressableProps), {
+  }, (0, _reactAria.mergeProps)(hoverProps, pressableProps), {
     sx: {
       width: 'fit-content'
     }
   }), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: ref,
     isRow: true,
-    variant: "boxes.copy"
+    variant: "copyText.copy"
   }, others), content, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
     onPress: copyToClipboard
   }, focusProps)))));