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

package/lib/components/CopyText/CopyText.js

@@ -6,8 +6,9 @@ var _excluded = ["children", "tooltip"],
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps, useFocusRing } from 'react-aria';
+import { useFocusRing } from '@react-aria/focus';
 import { useHover, usePress } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
 import { announce } from '@react-aria/live-announcer';
 import { Box, Tooltip, TooltipTrigger } from '../../index';
 import CopyButton from './CopyButton';
@@ -132,7 +133,7 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     return ___EmotionJSX(Box, _extends({
       ref: ref,
       isRow: true,
-      variant: "copyText.copy"
+      variant: "boxes.copy"
     }, wrapperProps, others), content, ___EmotionJSX(TooltipWrapper, {
       isOpen: isTooltipOpen,
       tooltip: tooltip
@@ -154,7 +155,7 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
   }), ___EmotionJSX(Box, _extends({
     ref: ref,
     isRow: true,
-    variant: "copyText.copy"
+    variant: "boxes.copy"
   }, others), content, ___EmotionJSX(CopyButton, _extends({
     onPress: copyToClipboard
   }, focusProps)))));

package/lib/components/DataTable/DataTable.js

@@ -18,13 +18,16 @@ 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, useCallback, useMemo, useRef } from 'react';
-import MenuDownIcon from 'mdi-react/MenuDownIcon';
-import MenuUpIcon from 'mdi-react/MenuUpIcon';
-import PropTypes from 'prop-types';
-import { FocusRing, mergeProps, useFocusRing, useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, VisuallyHidden } from 'react-aria';
+import { mergeProps } from '@react-aria/utils';
+import { FocusRing, useFocusRing } from '@react-aria/focus';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { layoutInfoToStyle, VirtualizerItem } from '@react-aria/virtualizer';
-import { TableLayout } from '@react-stately/layout';
 import { useTableColumnResizeState, useTableState } from '@react-stately/table';
+import { TableLayout } from '@react-stately/layout';
+import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup } from '@react-aria/table';
+import PropTypes from 'prop-types';
+import MenuDownIcon from 'mdi-react/MenuDownIcon';
+import MenuUpIcon from 'mdi-react/MenuUpIcon';
 import { DataTableContext, useDataTableContext } from '../../context/DataTableContext';
 import DataTableVirtualizer from './DataTableVirtualizer';
 import { useStatusClasses } from '../../hooks';
@@ -48,32 +51,6 @@ var ROW_HEIGHTS = {
     large: 75
   }
 };
-/**
- * Inspired by [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
- * from React Spectrum and [useTableState](https://react-spectrum.adobe.com/react-stately/useTableState.html)
- * from React Stately.
- *
- * DataTable is a complex collection component that is built from many child elements including
- * columns, rows and cells. Columns are defined within DataTableHeader element via DataTableColumn
- * and rows are defined within a DataTableBody element via DataTableRow. Rows contain DataTableCell
- * elements that correspond to each column.
- *
- * [TableHeader](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=defined%20using%20the-,TableHeader,-%2C%20Column%2C)
- * uses the alias DataTableHeader.
- *
- * [Column](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=the%20TableHeader%2C-,Column,-%2C%20TableBody%2C)
- * uses the alias DataTableColumn.
- *
- * [Cell](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=Row%2C%20and-,Cell,-components%2C%20which%20support)
- * uses the alias DataTableCell.
- *
- * [Row](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20TableBody%2C-,Row,-%2C%20and%20Cell%20components)
- * uses the alias DataTableCell.
- *
- * [TableBody](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20Column%2C-,TableBody,-%2C%20Row%2C%20and)
- * uses the alias DataTableBody.
-*/
-
 var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
   var width = props.width,
       height = props.height,

package/lib/components/DataTable/DataTable.stories.js

@@ -25,15 +25,15 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
-import isChromatic from 'chromatic/isChromatic';
+import { useAsyncList } from '@react-stately/data';
 import ApplicationIcon from 'mdi-react/ApplicationIcon';
-import { useAsyncList } from 'react-stately';
-import { faker } from '@faker-js/faker';
 import { action } from '@storybook/addon-actions';
+import { faker } from '@faker-js/faker';
+import isChromatic from 'chromatic/isChromatic';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableRow, DataTableBadge, DataTableMenu, DataTableMultiLine } from '../../index';
 import DataTableReadme from './DataTable.mdx';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableRow, DataTableChip, DataTableMenu, DataTableMultiLine } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/DataTable',
@@ -239,7 +239,7 @@ export var CustomContent = function CustomContent(args) {
                     id: key,
                     date: chromatic ? '2022-12-25' : "".concat(faker.date.past().toLocaleDateString('fr-CA')),
                     category: chromatic ? 'Other' : "".concat(random(['App Catalog', 'Delete Environment', 'Other'])),
-                    status: ___EmotionJSX(DataTableBadge, {
+                    status: ___EmotionJSX(DataTableChip, {
                       cell: chromatic ? 'Pending' : "".concat(random(['Pending', 'Rejected', 'Approved', 'Failed']))
                     }),
                     submitted_by: chromatic ? 'John Doe' : _concatInstanceProperty(_context4 = "".concat(faker.name.firstName(), " ")).call(_context4, faker.name.lastName()),

package/lib/components/DataTable/DataTable.styles.js

@@ -12,7 +12,7 @@ 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 { text } from '../Text/Text.styles';
+import { text } from './../../styles/variants/text';
 
 var tableCell = _objectSpread(_objectSpread({}, text.tableData), {}, {
   color: 'text.primary',

package/lib/components/DataTable/DataTable.test.js

@@ -32,8 +32,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /* eslint-disable testing-library/no-node-access */
 import React from 'react';
-import { useAsyncList } from 'react-stately';
 import { render, screen, within, fireEvent, act } from '@testing-library/react';
+import { useAsyncList } from '@react-stately/data';
 import { renderHook, act as actHooks } from '@testing-library/react-hooks';
 import DataTable from './DataTable';
 import { DataTableCell, DataTableColumn, DataTableRow, DataTableBody, DataTableHeader } from '../../index';

package/lib/components/DataTable/{DataTableBadge.js → DataTableChip.js}

@@ -4,12 +4,12 @@ import AlertIcon from 'mdi-react/AlertIcon';
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
 import CheckIcon from 'mdi-react/CheckIcon';
 import PropTypes from 'prop-types';
-import { Badge, Icon } from '../../index';
+import { Chip, Icon } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var DataTableBadge = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var DataTableChip = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var cell = _ref.cell;
   var color = cell === 'Pending' ? 'line.light' : cell === 'Failed' ? 'warning.bright' : cell === 'Rejected' ? 'critical.bright' : 'success.dark';
-  return ___EmotionJSX(Badge, {
+  return ___EmotionJSX(Chip, {
     label: cell,
     bg: "white",
     ref: ref,
@@ -27,7 +27,7 @@ var DataTableBadge = /*#__PURE__*/forwardRef(function (_ref, ref) {
     color: color
   }));
 });
-DataTableBadge.propTypes = {
+DataTableChip.propTypes = {
   cell: PropTypes.string
 };
-export default DataTableBadge;
+export default DataTableChip;

package/lib/components/DataTable/{DataTableBadge.test.js → DataTableChip.test.js}

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { DataTableBadge } from '../../index';
+import { DataTableChip } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(DataTableBadge, props));
+  return render(___EmotionJSX(DataTableChip, props));
 };
 
 test('renders component with rejected label', function () {

package/lib/components/DataTable/index.js

@@ -1,5 +1,5 @@
 export { default } from './DataTable';
-export { default as DataTableBadge } from './DataTableBadge';
+export { default as DataTableChip } from './DataTableChip';
 export { default as DataTableMultiLine } from './DataTableMultiLine';
 export { default as DataTableVirtualize } from './DataTableVirtualizer';
 export { default as DataTableMenu } from './DataTableMenu';

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -19,14 +19,16 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
+import { useFilter } from '@react-aria/i18n';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
-import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
-import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
 import HomeIcon from 'mdi-react/HomeIcon';
-import { FocusScope, mergeProps, useOverlayPosition, useOverlayTrigger } from 'react-aria';
-import { useOverlayTriggerState } from 'react-stately';
-import { useFilter } from '@react-aria/i18n';
+import PropTypes from 'prop-types';
+import { useOverlayTriggerState } from '@react-stately/overlays';
+import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
+import { mergeProps } from '@react-aria/utils';
+import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
+import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
+import { FocusScope } from '@react-aria/focus';
 import { useListState } from '@react-stately/list';
 import ListBox from '../ListBox';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -219,7 +221,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
   var ItemsSelect = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, _extends({}, triggerProps, {
     onPress: handlePopoverOpen,
     ref: triggerRef,
-    variant: "variants.environmentBreadcrumb.button.current",
+    variant: "environmentBreadcrumb.current",
     "aria-label": setAriaLabel(selectedItem),
     "data-id": breadCrumbDataIds.environmentButton
   }), selectedItem, ___EmotionJSX(Icon, {
@@ -271,7 +273,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, others), ___EmotionJSX(Item, {
     key: "name",
-    variant: "variants.environmentBreadcrumb.button.current",
+    variant: "environmentBreadcrumb.current",
     "data-testid": "name",
     "aria-label": name,
     "data-id": breadCrumbDataIds.orgButton,

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

@@ -21,7 +21,7 @@ import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useState } from 'react';
 import EnvironmentBreadcrumb from './EnvironmentBreadcrumb';
-import { Item, Section, Badge, Box, Text } from '../../index';
+import { Item, Section, Chip, Box, Text } from '../../index';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import EnvironmentBreadcrumbReadme from './EnvironmentBreadcrumb.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -126,9 +126,9 @@ export var Default = function Default(args) {
     key: selectedEnvironment.name
   }, ___EmotionJSX(Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "environmentBadge",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -155,9 +155,9 @@ export var Default = function Default(args) {
     return ___EmotionJSX(Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? ___EmotionJSX(Badge, {
+    }, name, isSandbox ? ___EmotionJSX(Chip, {
       label: "SANDBOX",
-      variant: "environmentBadge",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -238,9 +238,9 @@ export var WithSections = function WithSections() {
     key: selectedEnvironment.name
   }, ___EmotionJSX(Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "environmentBadge",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -270,9 +270,9 @@ export var WithSections = function WithSections() {
         textValue: itemName
       }, ___EmotionJSX(Box, {
         isRow: true
-      }, itemName, isSandbox ? ___EmotionJSX(Badge, {
+      }, itemName, isSandbox ? ___EmotionJSX(Chip, {
         label: "SANDBOX",
-        variant: "environmentBadge",
+        variant: "variants.boxes.environmentChip",
         bg: "neutral.40"
       }) : null));
     });
@@ -297,9 +297,9 @@ export var DefaultOpen = function DefaultOpen() {
     key: selectedEnvironment.name
   }, ___EmotionJSX(Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "environmentBadge",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -327,9 +327,9 @@ export var DefaultOpen = function DefaultOpen() {
     return ___EmotionJSX(Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? ___EmotionJSX(Badge, {
+    }, name, isSandbox ? ___EmotionJSX(Chip, {
       label: "SANDBOX",
-      variant: "environmentBadge",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
@@ -353,9 +353,9 @@ export var ControlledMenu = function ControlledMenu() {
     key: selectedEnvironment.name
   }, ___EmotionJSX(Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "environmentBadge",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -384,14 +384,14 @@ export var ControlledMenu = function ControlledMenu() {
     return ___EmotionJSX(Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? ___EmotionJSX(Badge, {
+    }, name, isSandbox ? ___EmotionJSX(Chip, {
       label: "SANDBOX",
-      variant: "environmentBadge",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
   });
 };
-export var RightAlignedBadges = function RightAlignedBadges(args) {
+export var RightAlignedChips = function RightAlignedChips(args) {
   var _useState13 = useState({
     name: 'Snail',
     isSandbox: true
@@ -404,9 +404,9 @@ export var RightAlignedBadges = function RightAlignedBadges(args) {
     isRow: true
   }, ___EmotionJSX(Text, {
     color: "inherit"
-  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
     label: "SANDBOX",
-    variant: "environmentBadge",
+    variant: "variants.boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
 
@@ -462,9 +462,9 @@ export var RightAlignedBadges = function RightAlignedBadges(args) {
     return ___EmotionJSX(Item, {
       key: name,
       textValue: name
-    }, name, isSandbox ? ___EmotionJSX(Badge, {
+    }, name, isSandbox ? ___EmotionJSX(Chip, {
       label: "SANDBOX",
-      variant: "environmentBadge",
+      variant: "variants.boxes.environmentChip",
       bg: "neutral.40",
       align: "right"
     }) : null);

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

@@ -17,10 +17,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import React from 'react';
-import { axe } from 'jest-axe';
 import userEvent from '@testing-library/user-event';
+import { Section } from '@react-stately/collections';
+import { axe } from 'jest-axe';
 import { render, screen, within } from '../../utils/testUtils/testWrapper';
-import { EnvironmentBreadcrumb, Item, OverlayProvider, Section } from '../../index';
+import { EnvironmentBreadcrumb, Item, OverlayProvider } from '../../index';
 import { breadCrumbDataIds } from './EnvironmentBreadcrumb';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testEnvBreadcrumb = 'test-env-breadcrumb';

package/lib/components/FieldHelperText/FieldHelperText.js

@@ -28,7 +28,7 @@ var FieldHelperText = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(Text, _extends({
     ref: ref,
     pt: "sm",
-    variant: "variants.fieldHelperText.title",
+    variant: "fieldHelperText",
     role: status === 'error' ? 'alert' : 'status',
     id: id
   }, others, {

package/lib/components/FileInputField/FileInputField.js

@@ -23,13 +23,13 @@ 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, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { mergeProps, useVisuallyHidden } from 'react-aria';
+import { useVisuallyHidden } from '@react-aria/visually-hidden';
 import { useDropzone } from 'react-dropzone';
+import PropTypes from 'prop-types';
+import { mergeProps } from '@react-aria/utils';
 import { v4 as uuidv4 } from 'uuid';
 import { Box, Input, FieldHelperText, Label, Loader } from '../../';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import FileItem from './FileItem';
 import FileSelect from './FileSelect';
 import statuses from '../../utils/devUtils/constants/statuses';
@@ -78,8 +78,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isDisabled: isDisabled
   }, nonAriaProps)),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var helperTextId = uuidv4();
@@ -185,16 +184,14 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
     return isMultiple || !isFileUploaded;
   }, [uploadedFiles, uploadedFilesImperative, isMultiple]);
-  return ___EmotionJSX(Box, {
-    fieldContainerProps: fieldContainerProps
-  }, ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
-    variant: "forms.fileInputField.wrapper"
-  }, mergeProps(fieldControlWrapperProps, nonAriaProps), {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+    variant: "boxes.fileInputFieldWrapper"
+  }, mergeProps(fieldContainerProps, nonAriaProps), {
     className: classNames
   }, getRootProps(), {
     // to pass accessibility test, this removes focusable dependents
     role: "none"
-  }), ___EmotionJSX(Input, _extends({}, mergeProps(visuallyHiddenProps, fieldControlInputProps, getInputProps()), {
+  }), ___EmotionJSX(Input, _extends({}, mergeProps(visuallyHiddenProps, fieldControlProps, getInputProps()), {
     "aria-label": "File Input",
     multiple: isMultiple,
     onChange: handleOnChange,
@@ -217,7 +214,7 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, helperText));
 });
 FileInputField.displayName = 'FileInputField';
-FileInputField.propTypes = _objectSpread(_objectSpread({
+FileInputField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
 
@@ -288,7 +285,7 @@ FileInputField.propTypes = _objectSpread(_objectSpread({
 
   /** These props will be spread to the field text component. */
   textProps: PropTypes.shape({})
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes);
 FileInputField.defaultProps = {
   defaultButtonText: 'Select a file',
   status: statuses.DEFAULT

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

@@ -19,7 +19,6 @@ import { v4 as uuidv4 } from 'uuid';
 import FileInputField from './';
 import { Box } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -32,7 +31,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -86,7 +85,7 @@ export default {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes)
 };
 var fitContentWidthSx = {
   width: 'fit-content'

package/lib/components/FileInputField/FileItem.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { useCallback, useRef } from 'react';
-import PropTypes from 'prop-types';
-import DeleteIcon from 'mdi-react/DeleteIcon';
-import ErrorIcon from 'mdi-react/ErrorIcon';
 import InsertDriveFileIcon from 'mdi-react/InsertDriveFileIcon';
-import { useVisuallyHidden } from 'react-aria';
+import ErrorIcon from 'mdi-react/ErrorIcon';
+import DeleteIcon from 'mdi-react/DeleteIcon';
+import PropTypes from 'prop-types';
+import { useVisuallyHidden } from '@react-aria/visually-hidden';
 import { Box, Button, IconButton, Icon, Text } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -59,7 +59,7 @@ var FileItem = function FileItem(props) {
   }, getFileIconProps(), {
     isDisabled: isDisabled
   })), ___EmotionJSX(Button, {
-    variant: "forms.fileInputField.button",
+    variant: "fileInputField",
     mx: 5,
     isDisabled: isDisabled,
     "aria-label": name,

package/lib/components/FileInputField/FileSelect.js

@@ -38,7 +38,7 @@ var FileSelect = function FileSelect(_ref) {
     mx: 15,
     my: 5,
     onPress: handleFileSelect,
-    variant: "forms.fileInputField.button"
+    variant: "fileInputField"
   }, ariaProps), ___EmotionJSX(Text, _extends({
     color: "active"
   }, textProps), buttonText));

package/lib/components/HelpHint/HelpHint.js

@@ -33,11 +33,12 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     direction: "top"
   }, others, tooltipProps), ___EmotionJSX(IconButton, _extends({
-    variant: "hintButton",
+    variant: "helpHint",
     "aria-label": "label help hint",
-    "data-testid": "help-hint__button",
+    "data-testid": "help-hint__button"
+  }, iconButtonProps, {
     "aria-describedby": tooltipId
-  }, iconButtonProps), ___EmotionJSX(Icon, {
+  }), ___EmotionJSX(Icon, {
     icon: HelpIcon
   })), ___EmotionJSX(Tooltip, _extends({}, tooltipProps, {
     role: "tooltip",

package/lib/components/IconButton/IconButton.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "title", "variant", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isDisabled"];
+var _excluded = ["children", "className", "title", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isDisabled"];
 
 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; }
 
@@ -17,9 +17,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useRef, useImperativeHandle, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps, useButton, useFocusRing } from 'react-aria';
 import { IconButton as ThemeUIIconButton } from 'theme-ui';
+import { useButton } from '@react-aria/button';
+import { useFocusRing } from '@react-aria/focus';
 import { Pressable, useHover } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
 import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
 import { BadgeContext } from '../../context/BadgeContext';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
@@ -37,7 +39,6 @@ var IconButton = /*#__PURE__*/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,
@@ -90,7 +91,6 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }
   }, mergeProps(buttonProps, others, hoverProps, focusProps), {
-    variant: "iconButtons.".concat(variant),
     onPointerOver: hoverProps.onPointerEnter
   }), children);
 
@@ -148,7 +148,7 @@ IconButton.propTypes = {
   isDisabled: PropTypes.bool
 };
 IconButton.defaultProps = {
-  variant: 'base',
+  variant: 'iconButton',
   isDisabled: false
 };
 IconButton.displayName = 'Icon Button';

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

@@ -39,9 +39,9 @@ export default {
     variant: {
       control: {
         type: 'select',
-        options: ['base', 'inverted', 'invertedSquare', 'square']
+        options: ['iconButton', 'inverted', 'square', 'invertedSquare']
       },
-      defaultValue: 'base'
+      defaultValue: 'iconButton'
     },
     size: {
       control: {

package/lib/components/ImageUploadField/ImagePreviewButton.js

@@ -2,11 +2,12 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["defaultPreviewImage", "defaultPreviewNode", "isImageType", "isLoading", "loaderSize", "isMenuOpen", "previewImage", "previewWidth", "widthHeightSx"];
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import PropTypes from 'prop-types';
-import CameraAltIcon from 'mdi-react/CameraAltIcon';
 import ImageFilterHdrIcon from 'mdi-react/ImageFilterHdrIcon';
-import { mergeProps, useFocusRing } from 'react-aria';
+import CameraAltIcon from 'mdi-react/CameraAltIcon';
+import PropTypes from 'prop-types';
+import { mergeProps } from '@react-aria/utils';
 import { useHover } from '@react-aria/interactions';
+import { useFocusRing } from '@react-aria/focus';
 import { Box, Button, Icon, Image } from '../../index';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -90,7 +91,7 @@ var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     sx: widthHeightSx
   }, hoverProps), ___EmotionJSX(Button, _extends({
     ref: buttonRef,
-    variant: "variants.imageUpload.button",
+    variant: "imageUpload",
     sx: widthHeightSx,
     "data-testid": "image-preview-button",
     "aria-label": "Image preview"