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

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.Default = exports.CountBadge = exports.BadgeWithLeftSlotAndIcon = exports.BadgeWithIcon = exports.BadgeWithCustomColors = void 0;
+exports["default"] = exports.Default = exports.CountChip = exports.ChipWithLeftSlotAndIcon = exports.ChipWithIcon = exports.ChipWithCustomColors = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -36,13 +36,20 @@ var _colors = require("../../styles/colors.js");
 
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 
-var _Badge = _interopRequireDefault(require("./Badge.mdx"));
+var _Chip = _interopRequireDefault(require("./Chip.mdx"));
 
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Badge',
+  title: 'Components/Chip',
   component: _["default"],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Chip["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
   argTypes: {
     bg: {
       control: {
@@ -80,16 +87,6 @@ var _default = {
         type: 'boolean'
       }
     }
-  },
-  parameters: {
-    docs: {
-      source: {
-        type: 'code'
-      },
-      page: function page() {
-        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Badge["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      }
-    }
   }
 };
 exports["default"] = _default;
@@ -131,23 +128,23 @@ var Default = function Default(_ref5) {
 
 exports.Default = Default;
 
-var CountBadge = function CountBadge(_ref6) {
+var CountChip = function CountChip(_ref6) {
   var args = (0, _extends2["default"])({}, _ref6);
   return (0, _react2.jsx)(_Box["default"], null, (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
     color: "white"
   }, args, {
     label: "1",
-    variant: "countBadge",
+    variant: "variants.boxes.countChip",
     mb: "12px"
   })), (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, args, {
     label: "1",
-    variant: "countNeutral"
+    variant: "variants.boxes.countNeutral"
   })));
 };
 
-exports.CountBadge = CountBadge;
+exports.CountChip = CountChip;
 
-var BadgeWithCustomColors = function BadgeWithCustomColors() {
+var ChipWithCustomColors = function ChipWithCustomColors() {
   return (0, _react2.jsx)(_["default"], {
     label: "Custom Colors",
     bg: "green",
@@ -155,14 +152,14 @@ var BadgeWithCustomColors = function BadgeWithCustomColors() {
   });
 };
 
-exports.BadgeWithCustomColors = BadgeWithCustomColors;
+exports.ChipWithCustomColors = ChipWithCustomColors;
 
-var BadgeWithIcon = function BadgeWithIcon() {
+var ChipWithIcon = function ChipWithIcon() {
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_["default"], {
-    label: "Badge with Icon Button",
+    label: "Chip with Icon Button",
     bg: "navy"
   }, (0, _react2.jsx)(_IconButton["default"], {
-    "aria-label": "Clear Badge with Icon Button",
+    "aria-label": "Clear Chip with Icon Button",
     variant: "inverted"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _CloseIcon["default"],
@@ -173,9 +170,9 @@ var BadgeWithIcon = function BadgeWithIcon() {
       padding: '5px'
     }
   }), (0, _react2.jsx)(_["default"], {
-    label: "Badge with Icon Button"
+    label: "Chip with Icon Button"
   }, (0, _react2.jsx)(_IconButton["default"], {
-    "aria-label": "Clear Badge with Icon Button",
+    "aria-label": "Clear Chip with Icon Button",
     variant: "inverted"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _EarthIcon["default"],
@@ -186,7 +183,7 @@ var BadgeWithIcon = function BadgeWithIcon() {
       padding: '5px'
     }
   }), (0, _react2.jsx)(_["default"], {
-    label: "Badge with Icon",
+    label: "Chip with Icon",
     bg: "green"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _ContentCopyIcon["default"],
@@ -198,13 +195,13 @@ var BadgeWithIcon = function BadgeWithIcon() {
   })));
 };
 
-exports.BadgeWithIcon = BadgeWithIcon;
+exports.ChipWithIcon = ChipWithIcon;
 
-var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
+var ChipWithLeftSlotAndIcon = function ChipWithLeftSlotAndIcon() {
   return (0, _react2.jsx)(_["default"], {
     label: "Chip with Icon Button and Left Slot",
     bg: "white",
-    variant: "itemBadgeWithSlot",
+    variant: "variants.boxes.itemChipWithSlot",
     slots: {
       leftIcon: (0, _react2.jsx)(_Icon["default"], {
         icon: VariableIcon,
@@ -220,4 +217,4 @@ var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
   })));
 };
 
-exports.BadgeWithLeftSlotAndIcon = BadgeWithLeftSlotAndIcon;
+exports.ChipWithLeftSlotAndIcon = ChipWithLeftSlotAndIcon;

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

@@ -10,7 +10,7 @@ var _react2 = require("@testing-library/react");
 
 var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
 
-var _Badge = _interopRequireDefault(require("./Badge"));
+var _Chip = _interopRequireDefault(require("../Chip/Chip"));
 
 var _Button = _interopRequireDefault(require("../Button/Button"));
 
@@ -28,19 +28,19 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _react2.render)((0, _react3.jsx)(_Badge["default"], (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _react2.render)((0, _react3.jsx)(_Chip["default"], (0, _extends2["default"])({}, defaultProps, props)));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
 (0, _testAxe["default"])(getComponent);
-test('renders Badge component', function () {
+test('renders Chip component', function () {
   getComponent();
 
   var chip = _react2.screen.getByTestId(testId);
 
   expect(chip).toBeInTheDocument();
 });
-test('renders children within Badge component', function () {
+test('renders children within Chip component', function () {
   var children = (0, _react3.jsx)(_Button["default"], null);
   getComponent({
     children: children
@@ -50,7 +50,7 @@ test('renders children within Badge component', function () {
 
   expect(mockedChildren).toBeInTheDocument();
 });
-test('renders Badge component with uppercase', function () {
+test('renders Chip component with uppercase', function () {
   var label = 'uppercase';
   var isUppercase = true;
   getComponent({
@@ -59,7 +59,7 @@ test('renders Badge component with uppercase', function () {
   });
   expect(_react2.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/cjs/components/Chip/Chip.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Badge = _interopRequireDefault(require("./Badge"));
+
+var _hooks = require("../../hooks");
+
+var _react2 = require("@emotion/react");
+
+var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  (0, _hooks.useDeprecationWarning)('The Chip component will be deprecated in Astro-UI 2.0.0 and replaced by the `Badge` component instead.');
+  return (0, _react2.jsx)(_Badge["default"], (0, _extends2["default"])({
+    ref: ref
+  }, props));
+});
+
+Chip.propTypes = {
+  /** The text color of the chip. */
+  textColor: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+
+  /** The background color of the chip. */
+  bg: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+
+  /** Provides a way to insert markup in specified places. */
+  slots: _propTypes["default"].shape({
+    /** The given node will be inserted into left side of the chip. */
+    leftIcon: _propTypes["default"].node
+  }),
+
+  /** The label of the chip. */
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+
+  /** Props object that is spread directly into the textfield. */
+  textProps: _propTypes["default"].shape({}),
+
+  /** When true, display chip label as uppercase. */
+  isUppercase: _propTypes["default"].bool,
+
+  /** Alignment of chip relative to parent container. */
+  align: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left'])
+};
+var _default = Chip;
+exports["default"] = _default;

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

@@ -11,8 +11,8 @@ _Object$defineProperty(exports, "__esModule", {
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _Badge["default"];
+    return _Chip["default"];
   }
 });
 
-var _Badge = _interopRequireDefault(require("./Badge"));
+var _Chip = _interopRequireDefault(require("./Chip"));

package/lib/cjs/components/CodeView/CodeView.js

@@ -54,7 +54,7 @@ var _hooks = require("../../hooks");
 
 var _ = require("../..");
 
-var _CodeView = _interopRequireDefault(require("./CodeView.styles"));
+var _codeView = _interopRequireDefault(require("../../styles/variants/codeView"));
 
 var _react2 = require("@emotion/react");
 
@@ -99,7 +99,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   var content = (0, _react2.jsx)(_prismReactRenderer["default"], (0, _extends2["default"])({}, _prismReactRenderer.defaultProps, {
-    theme: _CodeView["default"].theme,
+    theme: _codeView["default"].theme,
     code: (children === null || children === void 0 ? void 0 : (0, _trim["default"])(children).call(children)) || '',
     language: language,
     Prism: customPrism || _prismReactRenderer.Prism

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

@@ -103,7 +103,7 @@ 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    "));
 };
 
 exports.WithCustomSize = WithCustomSize;

package/lib/cjs/components/CollapsiblePanel/CollapsiblePanel.js

@@ -24,7 +24,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _focus = require("@react-aria/focus");
+
+var _utils = require("@react-aria/utils");
 
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 
@@ -56,16 +58,16 @@ var CollapsiblePanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       openAriaLabel = props.openAriaLabel,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
-  var _useFocusRing = (0, _reactAria.useFocusRing)({
+  var _useFocusRing = (0, _focus.useFocusRing)({
     within: true
   }),
       focusWithinProps = _useFocusRing.focusProps;
 
-  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
+  var _useFocusRing2 = (0, _focus.useFocusRing)(),
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
-  var mergedProps = (0, _reactAria.mergeProps)(focusWithinProps, focusProps);
+  var mergedProps = (0, _utils.mergeProps)(focusWithinProps, focusProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isFocused: isFocusVisible
@@ -84,12 +86,12 @@ var CollapsiblePanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     "data-testid": "collapsible-panel",
     ref: ref,
     tabIndex: 0,
-    variant: "collapsiblePanel.content"
+    variant: "collapsiblePanel.collapsiblePanelContent"
   }, mergedProps, others), (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    variant: "collapsiblePanel.containerTitle"
+    variant: "collapsiblePanel.collapsiblePanelContainerTitle"
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "variants.collapsiblePanel.title"
+    variant: "collapsiblePanelTitle"
   }, listTitle), selectedFilterCount && (0, _react2.jsx)(_CollapsiblePanelBadge["default"], {
     margin: "0",
     className: "title-badge",

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

@@ -259,7 +259,7 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
     "data-id": "home"
   }, "Ed Nepomuceno"), (0, _react2.jsx)(_index.Item, {
     key: "editGroups",
-    variant: "variants.collapsiblePanel.neutralText",
+    variant: "neutralText",
     "data-id": "editGroups"
   }, "Edit Groups"))), (0, _react2.jsx)(_index.Box, {
     isRow: true
@@ -328,7 +328,7 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
       variant: "listTitle",
       mb: "xs",
       mr: "xs"
-    }, item.name), (0, _react2.jsx)(_index.Badge, {
+    }, item.name), (0, _react2.jsx)(_index.Chip, {
       label: item.chipValue,
       bg: "accent.99",
       textColor: "text.secondary",

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

@@ -18,7 +18,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Badge = _interopRequireDefault(require("../Badge"));
+var _Chip = _interopRequireDefault(require("../Chip"));
 
 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)(_Badge["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_Chip["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 _reactStately = require("react-stately");
+var _overlays = require("@react-stately/overlays");
 
 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, _reactStately.useOverlayTriggerState)({
+  var state = (0, _overlays.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.container",
+    variant: "collapsiblePanel.collapsiblePanelContainer",
     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: "toggle",
+    variant: "collapsiblePanelToggle",
     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: "variants.collapsiblePanel.itemText"
+    variant: "collapsiblePanellItem"
   }, text), iconElement && (isDefaultSelected ? iconElement : (0, _react2.jsx)(_index.IconButton, {
     sx: {
       width: 20,

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

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

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

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