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

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

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

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Earth from 'mdi-react/EarthIcon';
-import Badge from './Badge';
+import Chip from '../Chip/Chip';
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
 import axeTest from '../../utils/testUtils/testAxe';
@@ -15,17 +15,17 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(Badge, _extends({}, defaultProps, props)));
+  return render(___EmotionJSX(Chip, _extends({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
 axeTest(getComponent);
-test('renders Badge component', function () {
+test('renders Chip component', function () {
   getComponent();
   var chip = screen.getByTestId(testId);
   expect(chip).toBeInTheDocument();
 });
-test('renders children within Badge component', function () {
+test('renders children within Chip component', function () {
   var children = ___EmotionJSX(Button, null);
 
   getComponent({
@@ -34,7 +34,7 @@ test('renders children within Badge component', function () {
   var mockedChildren = screen.getByRole('button');
   expect(mockedChildren).toBeInTheDocument();
 });
-test('renders Badge component with uppercase', function () {
+test('renders Chip component with uppercase', function () {
   var label = 'uppercase';
   var isUppercase = true;
   getComponent({
@@ -43,7 +43,7 @@ test('renders Badge component with uppercase', function () {
   });
   expect(screen.queryByText('uppercase')).toHaveStyleRule('text-transform', 'uppercase');
 });
-test('renders Badge component with custom alignment', function () {
+test('renders Chip component with custom alignment', function () {
   var align = 'right';
   getComponent({
     align: align

package/lib/components/Chip/Chip.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import PropTypes from 'prop-types';
+import Badge from './Badge';
+import { useDeprecationWarning } from '../../hooks';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Chip = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  useDeprecationWarning('The Chip component will be deprecated in Astro-UI 2.0.0 and replaced by the `Badge` component instead.');
+  return ___EmotionJSX(Badge, _extends({
+    ref: ref
+  }, props));
+});
+Chip.propTypes = {
+  /** The text color of the chip. */
+  textColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
+  /** The background color of the chip. */
+  bg: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
+  /** Provides a way to insert markup in specified places. */
+  slots: PropTypes.shape({
+    /** The given node will be inserted into left side of the chip. */
+    leftIcon: PropTypes.node
+  }),
+
+  /** The label of the chip. */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
+  /** Props object that is spread directly into the textfield. */
+  textProps: PropTypes.shape({}),
+
+  /** When true, display chip label as uppercase. */
+  isUppercase: PropTypes.bool,
+
+  /** Alignment of chip relative to parent container. */
+  align: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+};
+export default Chip;

package/lib/components/Chip/index.js

@@ -0,0 +1 @@
+export { default } from './Chip';

package/lib/components/CodeView/CodeView.js

@@ -25,7 +25,7 @@ import { mergeProps } from '@react-aria/utils';
 import Highlight, { defaultProps, Prism } from 'prism-react-renderer';
 import { useStatusClasses } from '../../hooks';
 import { Box, CopyText } from '../..';
-import styles from './CodeView.styles';
+import codeView from '../../styles/variants/codeView';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
@@ -58,7 +58,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   var content = ___EmotionJSX(Highlight, _extends({}, defaultProps, {
-    theme: styles.theme,
+    theme: codeView.theme,
     code: (children === null || children === void 0 ? void 0 : _trimInstanceProperty(children).call(children)) || '',
     language: language,
     Prism: customPrism || Prism

package/lib/components/CodeView/CodeView.stories.js

@@ -74,7 +74,7 @@ export var WithCustomSize = function WithCustomSize() {
       height: 300
     },
     hasNoCopyButton: true
-  }, "\nexport const BadgeWithIcon = () => (\n  <>\n    <Badge label=\"Badge with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon Button\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" />\n    </Badge>\n  </>\n);\n    "));
+  }, "\nexport const ChipWithIcon = () => (\n  <>\n    <Chip label=\"Chip with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Chip with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Chip>\n\n    <div style={{ padding: '5px' }} />\n\n    <Chip label=\"Chip with Icon Button\">\n      <IconButton aria-label=\"Clear Chip with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Chip>\n\n    <div style={{ padding: '5px' }} />\n\n    <Chip label=\"Chip with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" />\n    </Chip>\n  </>\n);\n    "));
 };
 export var WithAdditionalLanguage = function WithAdditionalLanguage() {
   var _context;

package/lib/components/CollapsiblePanel/CollapsiblePanel.js

@@ -3,7 +3,8 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["selectedFilterCount", "className", "closeAriaLabel", "children", "isDefaultOpen", "isOpen", "items", "listTitle", "onOpenChange", "onSelectionChange", "openAriaLabel"];
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps, useFocusRing } from 'react-aria';
+import { useFocusRing } from '@react-aria/focus';
+import { mergeProps } from '@react-aria/utils';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { useStatusClasses } from '../../hooks';
 import CollapsiblePanelBadge from '../CollapsiblePanelContainer/CollapsiblePanelBadge';
@@ -51,12 +52,12 @@ var CollapsiblePanel = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-testid": "collapsible-panel",
     ref: ref,
     tabIndex: 0,
-    variant: "collapsiblePanel.content"
+    variant: "collapsiblePanel.collapsiblePanelContent"
   }, mergedProps, others), ___EmotionJSX(Box, {
     isRow: true,
-    variant: "collapsiblePanel.containerTitle"
+    variant: "collapsiblePanel.collapsiblePanelContainerTitle"
   }, ___EmotionJSX(Text, {
-    variant: "variants.collapsiblePanel.title"
+    variant: "collapsiblePanelTitle"
   }, listTitle), selectedFilterCount && ___EmotionJSX(CollapsiblePanelBadge, {
     margin: "0",
     className: "title-badge",

package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -26,7 +26,7 @@ import SearchIcon from 'mdi-react/SearchIcon';
 import AccountIcon from 'mdi-react/AccountIcon';
 import CollapsiblePanel from './CollapsiblePanel';
 import { useOverlayPanelState } from '../../hooks';
-import { Breadcrumbs, Box, Button, CheckboxField, Badge, ListView, Item, Icon, IconButton, CollapsiblePanelItem, OverlayPanel, OverlayProvider, SearchField, Text } from '../../index';
+import { Breadcrumbs, Box, Button, CheckboxField, Chip, ListView, Item, Icon, IconButton, CollapsiblePanelItem, OverlayPanel, OverlayProvider, SearchField, Text } from '../../index';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import CollapsiblePanelReadme from './CollapsiblePanel.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -208,7 +208,7 @@ export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args)
     "data-id": "home"
   }, "Ed Nepomuceno"), ___EmotionJSX(Item, {
     key: "editGroups",
-    variant: "variants.collapsiblePanel.neutralText",
+    variant: "neutralText",
     "data-id": "editGroups"
   }, "Edit Groups"))), ___EmotionJSX(Box, {
     isRow: true
@@ -277,7 +277,7 @@ export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args)
       variant: "listTitle",
       mb: "xs",
       mr: "xs"
-    }, item.name), ___EmotionJSX(Badge, {
+    }, item.name), ___EmotionJSX(Chip, {
       label: item.chipValue,
       bg: "accent.99",
       textColor: "text.secondary",

package/lib/components/CollapsiblePanelContainer/CollapsiblePanelBadge.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["selectedFilterCount"];
 import React from 'react';
 import PropTypes from 'prop-types';
-import Badge from '../Badge';
+import Chip from '../Chip';
 /**
  * The CollapsiblePanelBadge serves as a badge to display selected count.
  */
@@ -14,7 +14,7 @@ var CollapsiblePanelBadge = function CollapsiblePanelBadge(props) {
   var selectedFilterCount = props.selectedFilterCount,
       others = _objectWithoutProperties(props, _excluded);
 
-  return ___EmotionJSX(Badge, _extends({
+  return ___EmotionJSX(Chip, _extends({
     as: "span",
     bg: "neutral.90",
     label: selectedFilterCount.toString(),

package/lib/components/CollapsiblePanelContainer/CollapsiblePanelContainer.js

@@ -5,7 +5,7 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon';
-import { useOverlayTriggerState } from 'react-stately';
+import { useOverlayTriggerState } from '@react-stately/overlays';
 import CollapsiblePanelBadge from './CollapsiblePanelBadge';
 import { Icon, IconButton, Box } from '../../index';
 import { useStatusClasses } from '../../hooks';
@@ -57,7 +57,7 @@ var CollapsiblePanelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames,
     onKeyUp: handleClose,
     ref: ref,
-    variant: "collapsiblePanel.container",
+    variant: "collapsiblePanel.collapsiblePanelContainer",
     isRow: true
   }, others), ___EmotionJSX(IconButton, {
     isRow: true,
@@ -65,7 +65,7 @@ var CollapsiblePanelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-testid": "collapsible-panel-button",
     onPress: handleButtonPress,
     ref: triggerRef,
-    variant: "toggle",
+    variant: "collapsiblePanelToggle",
     pr: "sm"
   }, ___EmotionJSX(Icon, {
     color: "active",

package/lib/components/CollapsiblePanelItem/CollapsiblePanelItem.js

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

package/lib/components/ColorField/ColorField.js

@@ -16,15 +16,16 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { FocusScope, useOverlayPosition, useOverlayTrigger, useVisuallyHidden, mergeProps } from 'react-aria';
-import { ChromePicker } from 'react-color';
-import { useOverlayTriggerState } from 'react-stately';
+import { FocusScope } from '@react-aria/focus';
+import { useVisuallyHidden } from '@react-aria/visually-hidden';
 import { useColorField } from '@react-aria/color';
 import { useColorFieldState } from '@react-stately/color';
+import { useOverlayTriggerState } from '@react-stately/overlays';
+import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
+import PropTypes from 'prop-types';
+import { ChromePicker } from 'react-color';
 import { Box, Button, Input, FieldHelperText, Label } from '../../';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import PopoverContainer from '../PopoverContainer';
 import statuses from '../../utils/devUtils/constants/statuses';
 import useField from '../../hooks/useField';
@@ -84,8 +85,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var _useOverlayPosition = useOverlayPosition({
@@ -98,8 +98,6 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     shouldUpdatePosition: true
   }),
       positionProps = _useOverlayPosition.overlayProps;
-  /* istanbul ignore next */
-
 
   var handleButtonPress = useCallback(function () {
     return popoverState.open();
@@ -120,10 +118,10 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
     ref: triggerRef,
-    variant: "forms.colorField.container"
-  }, mergeProps(buttonProps, ariaProps, triggerProps))), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Input, _extends({}, visuallyHiddenProps, fieldControlInputProps, {
+    variant: "colorField"
+  }, triggerProps, ariaProps, buttonProps)), ___EmotionJSX(Input, _extends({}, visuallyHiddenProps, fieldControlProps, {
     ref: colorRef
-  }))), helperText && ___EmotionJSX(FieldHelperText, {
+  })), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText), ___EmotionJSX(PopoverContainer, _extends({
     hasNoArrow: true,
@@ -141,7 +139,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange: handleColorChange
   }))));
 });
-ColorField.propTypes = _objectSpread(_objectSpread({
+ColorField.propTypes = _objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: PropTypes.oneOf(['start', 'end', 'middle']),
 
@@ -167,8 +165,17 @@ ColorField.propTypes = _objectSpread(_objectSpread({
   value: PropTypes.string,
 
   /** Props object that is spread into the Button element. */
-  buttonProps: PropTypes.shape({})
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+  buttonProps: PropTypes.shape({}),
+
+  /** Props object that is spread directly into the root (top-level) Box component. */
+  containerProps: PropTypes.shape({}),
+
+  /** Props object that is spread into the input element. */
+  controlProps: PropTypes.shape({}),
+
+  /** Props object that is spread into the label element. */
+  labelProps: PropTypes.shape({})
+}, ariaAttributesBasePropTypes);
 ColorField.defaultProps = {
   align: 'middle',
   direction: 'bottom'

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

@@ -18,7 +18,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useCallback, useState } from 'react';
 import { ColorField, OverlayProvider } 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 {
@@ -31,7 +30,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     value: {
       control: {
         type: 'text'
@@ -67,11 +66,26 @@ export default {
       }
     },
     containerProps: {
+      control: {
+        type: 'none'
+      },
+      defaultValue: {
+        sx: {
+          marginLeft: 50
+        }
+      }
+    },
+    controlProps: {
+      control: {
+        type: 'none'
+      }
+    },
+    labelProps: {
       control: {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   var _useState = useState('rgba(127, 0, 127, 1)'),

package/lib/components/ComboBox/ComboBoxInput.js

@@ -20,9 +20,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import MenuDown from 'mdi-react/MenuDownIcon';
-import { FocusRing, mergeProps } from 'react-aria';
+import { FocusRing } from '@react-aria/focus';
 import { PressResponder, useHover } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+import MenuDown from 'mdi-react/MenuDownIcon';
 import { Box, Button, Icon, Loader, TextField } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { usePropWarning } from '../../hooks';
@@ -51,23 +52,21 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
       wrapperProps = props.wrapperProps,
       others = _objectWithoutProperties(props, _excluded);
 
-  var _useHover = useHover({}),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
   var textFieldProps = _objectSpread({
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
-    containerProps: _objectSpread(_objectSpread({
-      sx: style,
-      variant: 'forms.comboBox.container'
-    }, hoverProps), containerProps)
+    containerProps: containerProps
   }, mergeProps(inputProps, others)); // istanbul ignore next
 
 
   useImperativeHandle(ref, function () {
     return inputRef.current;
-  }); // START - minimum delay time for loading indicator = 500ms
+  });
+
+  var _useHover = useHover({}),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered; // START - minimum delay time for loading indicator = 500ms
+
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -107,7 +106,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var button = !isReadOnly && ___EmotionJSX(Box, {
     isRow: true,
-    variant: "forms.comboBox.inputInContainerSlot"
+    variant: "boxes.inputInContainerSlot"
   }, // Render loader after delay if filtering or loading
   showLoading && (isOpen || menuTrigger === 'manual' || loadingState === loadingStates.LOADING) && ___EmotionJSX(Loader, {
     variant: "loader.withinInput"
@@ -115,7 +114,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     preventFocusOnPress: true,
     isPressed: isOpen
   }, ___EmotionJSX(Button, _extends({
-    variant: "forms.comboBox.button"
+    variant: "comboBox"
   }, triggerProps, {
     ref: triggerRef,
     isDisabled: isDisabled || isReadOnly,
@@ -133,10 +132,14 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     focusClass: "is-focused",
     focusRingClass: "focus-ring",
     autoFocus: hasAutoFocus
-  }, ___EmotionJSX(TextField, _extends({}, textFieldProps, {
-    wrapperProps: _objectSpread({
+  }, ___EmotionJSX(Box, _extends({
+    isRow: true,
+    style: style,
+    variant: "forms.comboBox.container"
+  }, hoverProps, wrapperProps), ___EmotionJSX(TextField, _extends({}, textFieldProps, {
+    wrapperProps: {
       ref: inputWrapperRef
-    }, wrapperProps),
+    },
     controlProps: _objectSpread({
       variant: 'forms.comboBox.input'
     }, controlProps),
@@ -147,7 +150,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     slots: {
       inContainer: button
     }
-  })));
+  }))));
 });
 ComboBoxInput.propTypes = _objectSpread({
   containerProps: PropTypes.shape({}),

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -21,11 +21,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, { useCallback, useRef, useState, forwardRef, useImperativeHandle, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { DismissButton, FocusScope, useComboBox, useOverlayPosition } from 'react-aria';
-import { useComboBoxState } from 'react-stately';
-import { useFilter } from '@react-aria/i18n';
+import { useComboBox } from '@react-aria/combobox';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
+import { FocusScope } from '@react-aria/focus';
+import { useFilter } from '@react-aria/i18n';
+import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
+import { useComboBoxState } from '@react-stately/combobox';
+import PropTypes from 'prop-types';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import ComboBoxInput from '../ComboBox';
 import { usePropWarning } from '../../hooks';

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

@@ -22,9 +22,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useState } from 'react';
-import { useAsyncList } from 'react-stately';
-import { useFilter } from '@react-aria/i18n';
 import { action } from '@storybook/addon-actions';
+import { useFilter } from '@react-aria/i18n';
+import { useAsyncList } from '@react-stately/data';
 import { Item, OverlayProvider, Section } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import ComboBoxField from './ComboBoxField';

package/lib/components/CopyText/CopyButton.js

@@ -10,10 +10,11 @@ var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(IconButton, _extends({
     ref: ref,
     "aria-label": "copy to clipboard",
-    variant: "copyButton"
+    variant: "buttons.copy"
   }, omit(props, 'iconProps')), ___EmotionJSX(Icon, _extends({
     icon: ContentCopy,
-    size: 15
+    size: 15,
+    color: "text.secondary"
   }, props === null || props === void 0 ? void 0 : props.iconProps)));
 });
 CopyButton.propTypes = {