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

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -46,21 +46,25 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _i18n = require("@react-aria/i18n");
 
 var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
 
-var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
+var _HomeIcon = _interopRequireDefault(require("mdi-react/HomeIcon"));
 
-var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _HomeIcon = _interopRequireDefault(require("mdi-react/HomeIcon"));
+var _overlays = require("@react-stately/overlays");
 
-var _reactAria = require("react-aria");
+var _overlays2 = require("@react-aria/overlays");
 
-var _reactStately = require("react-stately");
+var _utils = require("@react-aria/utils");
 
-var _i18n = require("@react-aria/i18n");
+var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
+
+var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
+
+var _focus = require("@react-aria/focus");
 
 var _list = require("@react-stately/list");
 
@@ -161,7 +165,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     });
   };
 
-  var popoverState = (0, _reactStately.useOverlayTriggerState)({
+  var popoverState = (0, _overlays.useOverlayTriggerState)({
     defaultOpen: isDefaultOpen,
     isOpen: isOpen,
     onOpenChange: onOpenChange
@@ -230,7 +234,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     return !isListHasItems;
   }, [listBoxState]);
 
-  var _useOverlayTrigger = (0, _reactAria.useOverlayTrigger)({
+  var _useOverlayTrigger = (0, _overlays2.useOverlayTrigger)({
     type: 'listbox'
   }, popoverState, triggerRef),
       triggerProps = _useOverlayTrigger.triggerProps,
@@ -244,7 +248,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     popoverState.open();
   };
 
-  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
+  var _useOverlayPosition = (0, _overlays2.useOverlayPosition)({
     isOpen: popoverState.isOpen,
     offset: 6,
     onClose: handlePopoverClose,
@@ -271,12 +275,12 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   var ItemsSelect = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, triggerProps, {
     onPress: handlePopoverOpen,
     ref: triggerRef,
-    variant: "variants.environmentBreadcrumb.button.current",
+    variant: "environmentBreadcrumb.current",
     "aria-label": setAriaLabel(selectedItem),
     "data-id": breadCrumbDataIds.environmentButton
   }), selectedItem, (0, _react2.jsx)(_index.Icon, {
     icon: popoverState.isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"]
-  })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, (0, _reactAria.mergeProps)(overlayProps, positionProps, popoverProps), {
+  })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, (0, _utils.mergeProps)(overlayProps, positionProps, popoverProps), {
     ref: overlayRef,
     isOpen: popoverState.isOpen,
     scrollRef: scrollBoxRef,
@@ -284,7 +288,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     hasNoArrow: true,
     isDismissable: true,
     p: 10
-  }), (0, _react2.jsx)(_reactAria.FocusScope, {
+  }), (0, _react2.jsx)(_focus.FocusScope, {
     restoreFocus: true,
     autoFocus: true,
     contain: true
@@ -322,7 +326,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     }
   }, others), (0, _react2.jsx)(_index.Item, {
     key: "name",
-    variant: "variants.environmentBreadcrumb.button.current",
+    variant: "environmentBreadcrumb.current",
     "data-testid": "name",
     "aria-label": name,
     "data-id": breadCrumbDataIds.orgButton,

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

@@ -26,7 +26,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithSections = exports.RightAlignedBadges = exports.OrgLevel = exports.DefaultOpen = exports.Default = exports.ControlledMenu = void 0;
+exports["default"] = exports.WithSections = exports.RightAlignedChips = exports.OrgLevel = exports.DefaultOpen = exports.Default = exports.ControlledMenu = void 0;
 
 var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
 
@@ -169,9 +169,9 @@ var Default = function Default(args) {
     key: selectedEnvironment.name
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "environmentBadge",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -198,9 +198,9 @@ var Default = function Default(args) {
     return (0, _react2.jsx)(_index.Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? (0, _react2.jsx)(_index.Badge, {
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
       label: "SANDBOX",
-      variant: "environmentBadge",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -281,9 +281,9 @@ var WithSections = function WithSections() {
     key: selectedEnvironment.name
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "environmentBadge",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
   return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
@@ -312,9 +312,9 @@ var WithSections = function WithSections() {
         textValue: itemName
       }, (0, _react2.jsx)(_index.Box, {
         isRow: true
-      }, itemName, isSandbox ? (0, _react2.jsx)(_index.Badge, {
+      }, itemName, isSandbox ? (0, _react2.jsx)(_index.Chip, {
         label: "SANDBOX",
-        variant: "environmentBadge",
+        variant: "variants.boxes.environmentChip",
         bg: "neutral.40"
       }) : null));
     });
@@ -345,9 +345,9 @@ var DefaultOpen = function DefaultOpen() {
     key: selectedEnvironment.name
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "environmentBadge",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -375,9 +375,9 @@ var DefaultOpen = function DefaultOpen() {
     return (0, _react2.jsx)(_index.Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? (0, _react2.jsx)(_index.Badge, {
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
       label: "SANDBOX",
-      variant: "environmentBadge",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -404,9 +404,9 @@ var ControlledMenu = function ControlledMenu() {
     key: selectedEnvironment.name
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "environmentBadge",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -435,9 +435,9 @@ var ControlledMenu = function ControlledMenu() {
     return (0, _react2.jsx)(_index.Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? (0, _react2.jsx)(_index.Badge, {
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
       label: "SANDBOX",
-      variant: "environmentBadge",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -445,7 +445,7 @@ var ControlledMenu = function ControlledMenu() {
 
 exports.ControlledMenu = ControlledMenu;
 
-var RightAlignedBadges = function RightAlignedBadges(args) {
+var RightAlignedChips = function RightAlignedChips(args) {
   var _useState13 = (0, _react.useState)({
     name: 'Snail',
     isSandbox: true
@@ -458,9 +458,9 @@ var RightAlignedBadges = function RightAlignedBadges(args) {
     isRow: true
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
     label: "SANDBOX",
-    variant: "environmentBadge",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -516,13 +516,13 @@ var RightAlignedBadges = function RightAlignedBadges(args) {
     return (0, _react2.jsx)(_index.Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? (0, _react2.jsx)(_index.Badge, {
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
       label: "SANDBOX",
-      variant: "environmentBadge",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40",
       align: "right"
     }) : null);
   });
 };
 
-exports.RightAlignedBadges = RightAlignedBadges;
+exports.RightAlignedChips = RightAlignedChips;

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

@@ -32,10 +32,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _jestAxe = require("jest-axe");
-
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
+var _collections = require("@react-stately/collections");
+
+var _jestAxe = require("jest-axe");
+
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
 var _index = require("../../index");
@@ -117,7 +119,7 @@ var getSectionsComponent = function getSectionsComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultWithSectionsProps, props), function (section) {
     return (// eslint-disable-next-line testing-library/no-node-access
-      (0, _react2.jsx)(_index.Section, {
+      (0, _react2.jsx)(_collections.Section, {
         key: section.key,
         name: section.name,
         title: section.name,

package/lib/cjs/components/FieldHelperText/FieldHelperText.js

@@ -60,7 +60,7 @@ var FieldHelperText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   return (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     ref: ref,
     pt: "sm",
-    variant: "variants.fieldHelperText.title",
+    variant: "fieldHelperText",
     role: status === 'error' ? 'alert' : 'status',
     id: id
   }, others, {

package/lib/cjs/components/FileInputField/FileInputField.js

@@ -52,20 +52,20 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _reactAria = require("react-aria");
+var _visuallyHidden = require("@react-aria/visually-hidden");
 
 var _reactDropzone = require("react-dropzone");
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("@react-aria/utils");
+
 var _uuid = require("uuid");
 
 var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
-
 var _FileItem = _interopRequireDefault(require("./FileItem"));
 
 var _FileSelect = _interopRequireDefault(require("./FileSelect"));
@@ -129,13 +129,12 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     isDisabled: isDisabled
   }, nonAriaProps)),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var helperTextId = (0, _uuid.v4)();
 
-  var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
+  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
       visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
 
   var handleFileSelect = (0, _react.useCallback)(function () {
@@ -236,16 +235,14 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
     return isMultiple || !isFileUploaded;
   }, [uploadedFiles, uploadedFilesImperative, isMultiple]);
-  return (0, _react2.jsx)(_.Box, {
-    fieldContainerProps: fieldContainerProps
-  }, (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    variant: "forms.fileInputField.wrapper"
-  }, (0, _reactAria.mergeProps)(fieldControlWrapperProps, nonAriaProps), {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    variant: "boxes.fileInputFieldWrapper"
+  }, (0, _utils.mergeProps)(fieldContainerProps, nonAriaProps), {
     className: classNames
   }, getRootProps(), {
     // to pass accessibility test, this removes focusable dependents
     role: "none"
-  }), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(visuallyHiddenProps, fieldControlInputProps, getInputProps()), {
+  }), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({}, (0, _utils.mergeProps)(visuallyHiddenProps, fieldControlProps, getInputProps()), {
     "aria-label": "File Input",
     multiple: isMultiple,
     onChange: handleOnChange,
@@ -268,7 +265,7 @@ var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, helperText));
 });
 FileInputField.displayName = 'FileInputField';
-FileInputField.propTypes = _objectSpread(_objectSpread({
+FileInputField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
 
@@ -339,7 +336,7 @@ FileInputField.propTypes = _objectSpread(_objectSpread({
 
   /** These props will be spread to the field text component. */
   textProps: _propTypes["default"].shape({})
-}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 FileInputField.defaultProps = {
   defaultButtonText: 'Select a file',
   status: _statuses["default"].DEFAULT

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

@@ -44,8 +44,6 @@ var _2 = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
-
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
@@ -68,7 +66,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -122,7 +120,7 @@ var _default = {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var fitContentWidthSx = {

package/lib/cjs/components/FileInputField/FileItem.js

@@ -22,15 +22,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _DeleteIcon = _interopRequireDefault(require("mdi-react/DeleteIcon"));
+var _InsertDriveFileIcon = _interopRequireDefault(require("mdi-react/InsertDriveFileIcon"));
 
 var _ErrorIcon = _interopRequireDefault(require("mdi-react/ErrorIcon"));
 
-var _InsertDriveFileIcon = _interopRequireDefault(require("mdi-react/InsertDriveFileIcon"));
+var _DeleteIcon = _interopRequireDefault(require("mdi-react/DeleteIcon"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _visuallyHidden = require("@react-aria/visually-hidden");
 
 var _index = require("../../index");
 
@@ -55,7 +55,7 @@ var FileItem = function FileItem(props) {
     return handleFileDelete(e, id);
   }, [id, handleFileDelete]);
 
-  var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
+  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
       visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
 
   var downloadRef = (0, _react.useRef)();
@@ -91,7 +91,7 @@ var FileItem = function FileItem(props) {
   }, getFileIconProps(), {
     isDisabled: isDisabled
   })), (0, _react2.jsx)(_index.Button, {
-    variant: "forms.fileInputField.button",
+    variant: "fileInputField",
     mx: 5,
     isDisabled: isDisabled,
     "aria-label": name,

package/lib/cjs/components/FileInputField/FileSelect.js

@@ -63,7 +63,7 @@ var FileSelect = function FileSelect(_ref) {
     mx: 15,
     my: 5,
     onPress: handleFileSelect,
-    variant: "forms.fileInputField.button"
+    variant: "fileInputField"
   }, ariaProps), (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
     color: "active"
   }, textProps), buttonText));

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -63,11 +63,12 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     direction: "top"
   }, others, tooltipProps), (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
-    variant: "hintButton",
+    variant: "helpHint",
     "aria-label": "label help hint",
-    "data-testid": "help-hint__button",
+    "data-testid": "help-hint__button"
+  }, iconButtonProps, {
     "aria-describedby": tooltipId
-  }, iconButtonProps), (0, _react2.jsx)(_Icon["default"], {
+  }), (0, _react2.jsx)(_Icon["default"], {
     icon: HelpIcon
   })), (0, _react2.jsx)(_TooltipTrigger.Tooltip, (0, _extends2["default"])({}, tooltipProps, {
     role: "tooltip",

package/lib/cjs/components/IconButton/IconButton.js

@@ -38,12 +38,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
-
 var _themeUi = require("theme-ui");
 
+var _button = require("@react-aria/button");
+
+var _focus = require("@react-aria/focus");
+
 var _interactions = require("@react-aria/interactions");
 
+var _utils = require("@react-aria/utils");
+
 var _hooks = require("../../hooks");
 
 var _BadgeContext = require("../../context/BadgeContext");
@@ -52,7 +56,7 @@ var _TooltipTrigger = _interopRequireWildcard(require("../TooltipTrigger"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "className", "title", "variant", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isDisabled"];
+var _excluded = ["children", "className", "title", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isDisabled"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -74,7 +78,6 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
       className = props.className,
       title = props.title,
-      variant = props.variant,
       onPress = props.onPress,
       onPressStart = props.onPressStart,
       onPressEnd = props.onPressEnd,
@@ -89,7 +92,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return buttonRef.current;
   });
 
-  var _useButton = (0, _reactAria.useButton)(_objectSpread({}, props), buttonRef),
+  var _useButton = (0, _button.useButton)(_objectSpread({}, props), buttonRef),
       buttonProps = _useButton.buttonProps,
       isPressed = _useButton.isPressed;
 
@@ -100,7 +103,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       hoverProps = _useHover.hoverProps,
       isHovered = _useHover.isHovered;
 
-  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+  var _useFocusRing = (0, _focus.useFocusRing)(),
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
@@ -124,8 +127,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         fill: chipBg
       }
     }
-  }, (0, _reactAria.mergeProps)(buttonProps, others, hoverProps, focusProps), {
-    variant: "iconButtons.".concat(variant),
+  }, (0, _utils.mergeProps)(buttonProps, others, hoverProps, focusProps), {
     onPointerOver: hoverProps.onPointerEnter
   }), children);
 
@@ -183,7 +185,7 @@ IconButton.propTypes = {
   isDisabled: _propTypes["default"].bool
 };
 IconButton.defaultProps = {
-  variant: 'base',
+  variant: 'iconButton',
   isDisabled: false
 };
 IconButton.displayName = 'Icon Button';

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

@@ -60,9 +60,9 @@ var _default = {
     variant: {
       control: {
         type: 'select',
-        options: ['base', 'inverted', 'invertedSquare', 'square']
+        options: ['iconButton', 'inverted', 'square', 'invertedSquare']
       },
-      defaultValue: 'base'
+      defaultValue: 'iconButton'
     },
     size: {
       control: {

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

@@ -22,16 +22,18 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ImageFilterHdrIcon = _interopRequireDefault(require("mdi-react/ImageFilterHdrIcon"));
 
 var _CameraAltIcon = _interopRequireDefault(require("mdi-react/CameraAltIcon"));
 
-var _ImageFilterHdrIcon = _interopRequireDefault(require("mdi-react/ImageFilterHdrIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _utils = require("@react-aria/utils");
 
 var _interactions = require("@react-aria/interactions");
 
+var _focus = require("@react-aria/focus");
+
 var _index = require("../../index");
 
 var _Loader = _interopRequireDefault(require("../Loader"));
@@ -62,7 +64,7 @@ var ImagePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     return buttonRef.current;
   });
 
-  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+  var _useFocusRing = (0, _focus.useFocusRing)(),
       focusProps = _useFocusRing.focusProps,
       isFocusVisible = _useFocusRing.isFocusVisible;
 
@@ -119,11 +121,11 @@ var ImagePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     sx: widthHeightSx
   }, hoverProps), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
     ref: buttonRef,
-    variant: "variants.imageUpload.button",
+    variant: "imageUpload",
     sx: widthHeightSx,
     "data-testid": "image-preview-button",
     "aria-label": "Image preview"
-  }, (0, _reactAria.mergeProps)(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
+  }, (0, _utils.mergeProps)(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
 });
 ImagePreviewButton.propTypes = {
   defaultPreviewImage: _propTypes["default"].string,

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

@@ -46,8 +46,6 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
-
 var _ImagePreviewButton = _interopRequireDefault(require("./ImagePreviewButton"));
 
 var _ImageUploadFieldBase = _interopRequireDefault(require("./ImageUploadFieldBase"));
@@ -140,7 +138,7 @@ var ImageUploadField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     id: statusId
   }, state.isMenuOpen && 'Menu pop up expanded'));
 });
-ImageUploadField.propTypes = _objectSpread(_objectSpread({
+ImageUploadField.propTypes = _objectSpread({
   /** Image preview (controlled), used to represent the current image state. */
   previewImage: _propTypes["default"].string,
 
@@ -189,7 +187,7 @@ ImageUploadField.propTypes = _objectSpread(_objectSpread({
 
   /** Determines the helper text styling. */
   status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
-}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 ImageUploadField.defaultProps = {
   fileTypes: ['image'],
   loaderSize: 10,

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

@@ -46,8 +46,6 @@ 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");
@@ -70,7 +68,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     previewImage: {
       control: {
         type: 'text'
@@ -127,7 +125,7 @@ var _default = {
       },
       defaultValue: _statuses["default"].DEFAULT
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;