@pingux/astro 1.42.0-alpha.0 → 2.0.0-alpha.1

package/lib/cjs/components/CheckboxField/CheckboxField.js

@@ -36,9 +36,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _checkbox = require("@react-aria/checkbox");
+var _reactAria = require("react-aria");
 
-var _toggle = require("@react-stately/toggle");
+var _reactStately = require("react-stately");
 
 var _interactions = require("@react-aria/interactions");
 
@@ -50,6 +50,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _hooks = require("../../hooks");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -89,7 +91,7 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _usePress = (0, _interactions.usePress)(props),
       containerPressProps = _usePress.pressProps;
 
-  var state = (0, _toggle.useToggleState)(checkboxProps);
+  var state = (0, _reactStately.useToggleState)(checkboxProps);
   var checkboxRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
@@ -105,7 +107,7 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }, [isIndeterminate]);
 
-  var _useCheckbox = (0, _checkbox.useCheckbox)(checkboxProps, state, checkboxRef),
+  var _useCheckbox = (0, _reactAria.useCheckbox)(checkboxProps, state, checkboxRef),
       inputProps = _useCheckbox.inputProps;
 
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({}, containerPressProps), props), {}, {
@@ -115,16 +117,18 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
-  var helperTextId = (0, _uuid.v4)();
+  var helperTextId = (0, _react.useMemo)(function () {
+    return (0, _uuid.v4)();
+  }, []);
   return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
     variant: "forms.label.checkbox"
   }, fieldLabelProps), (0, _react2.jsx)(_.Checkbox, (0, _extends2["default"])({
     ref: checkboxRef,
     "aria-describedby": helperText && helperTextId
-  }, fieldControlProps)), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  }, fieldControlInputProps)), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     sx: {
       pt: 7
@@ -132,7 +136,7 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-CheckboxField.propTypes = _objectSpread({
+CheckboxField.propTypes = _objectSpread(_objectSpread({
   /** Whether the element should receive focus on render. */
   hasAutoFocus: _propTypes["default"].bool,
 
@@ -194,17 +198,8 @@ CheckboxField.propTypes = _objectSpread({
   onKeyDown: _propTypes["default"].func,
 
   /** Handler that is called when a key is released. */
-  onKeyUp: _propTypes["default"].func,
-
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: _propTypes["default"].shape({}),
-
-  /** Props object that is spread directly into the input element. */
-  controlProps: _propTypes["default"].shape({}),
-
-  /** Props object that is spread directly into the label element. */
-  labelProps: _propTypes["default"].shape({})
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+  onKeyUp: _propTypes["default"].func
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
 CheckboxField.displayName = 'CheckboxField';
 var _default = CheckboxField;
 exports["default"] = _default;

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

@@ -42,6 +42,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _CheckboxField = _interopRequireDefault(require("./CheckboxField"));
 
 var _Link = _interopRequireDefault(require("../Link"));
@@ -72,7 +74,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -109,23 +111,8 @@ var _default = {
     hasAutoFocus: {},
     isIndeterminate: {},
     isDefaultSelected: {},
-    isSelected: {},
-    containerProps: {
-      control: {
-        type: 'none'
-      }
-    },
-    controlProps: {
-      control: {
-        type: 'none'
-      }
-    },
-    labelProps: {
-      control: {
-        type: 'none'
-      }
-    }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+    isSelected: {}
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 

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

@@ -54,7 +54,7 @@ var _hooks = require("../../hooks");
 
 var _ = require("../..");
 
-var _codeView = _interopRequireDefault(require("../../styles/variants/codeView"));
+var _CodeView = _interopRequireDefault(require("./CodeView.styles"));
 
 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 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    "));
+  }, "\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    "));
 };
 
 exports.WithCustomSize = WithCustomSize;

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

@@ -24,9 +24,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _focus = require("@react-aria/focus");
-
-var _utils = require("@react-aria/utils");
+var _reactAria = require("react-aria");
 
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 
@@ -58,16 +56,16 @@ var CollapsiblePanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       openAriaLabel = props.openAriaLabel,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
-  var _useFocusRing = (0, _focus.useFocusRing)({
+  var _useFocusRing = (0, _reactAria.useFocusRing)({
     within: true
   }),
       focusWithinProps = _useFocusRing.focusProps;
 
-  var _useFocusRing2 = (0, _focus.useFocusRing)(),
+  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
-  var mergedProps = (0, _utils.mergeProps)(focusWithinProps, focusProps);
+  var mergedProps = (0, _reactAria.mergeProps)(focusWithinProps, focusProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isFocused: isFocusVisible
@@ -86,12 +84,12 @@ var CollapsiblePanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     "data-testid": "collapsible-panel",
     ref: ref,
     tabIndex: 0,
-    variant: "collapsiblePanel.collapsiblePanelContent"
+    variant: "collapsiblePanel.content"
   }, mergedProps, others), (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    variant: "collapsiblePanel.collapsiblePanelContainerTitle"
+    variant: "collapsiblePanel.containerTitle"
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "collapsiblePanelTitle"
+    variant: "variants.collapsiblePanel.title"
   }, 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: "neutralText",
+    variant: "variants.collapsiblePanel.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.Chip, {
+    }, item.name), (0, _react2.jsx)(_index.Badge, {
       label: item.chipValue,
       bg: "accent.99",
       textColor: "text.secondary",

package/lib/cjs/{styles/variants/collapsiblePanel.js → components/CollapsiblePanel/CollapsiblePanel.styles.js}

@@ -22,17 +22,21 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = void 0;
+exports.toggle = exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _buttons = require("../variants/buttons");
+var _Buttons = require("../Button/Buttons.styles");
+
+var _IconButton = require("../IconButton/IconButton.styles");
+
+var _Text = require("../Text/Text.styles");
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var collapsiblePanelContainer = {
+var container = {
   pr: 'sm',
   minHeight: '80vh',
   '>div': {
@@ -45,14 +49,14 @@ var collapsiblePanelContainer = {
     width: '300px'
   }
 };
-var collapsiblePanelContent = {
+var content = {
   bg: 'accent.99',
   fontSize: 'sm',
   height: '100%',
   width: '300px',
   '&.is-focused': _objectSpread({
     borderColor: 'accent.80'
-  }, _buttons.focusWithCroppedOutline),
+  }, _Buttons.focusWithCroppedOutline),
   '& div': {
     alignItems: 'center',
     display: 'flex',
@@ -62,7 +66,7 @@ var collapsiblePanelContent = {
     justifyContent: 'space-between'
   }
 };
-var collapsiblePanelContainerTitle = {
+var containerTitle = {
   alignContent: 'center',
   fontWeight: '500',
   minHeight: '40px',
@@ -76,7 +80,7 @@ var collapsiblePanelContainerTitle = {
     width: '300px'
   }
 };
-var collapsiblePanelBadge = {
+var badge = {
   borderRadius: '5px',
   display: 'flex',
   height: '17px',
@@ -99,15 +103,70 @@ var collapsiblePanelBadge = {
     width: '0'
   }
 };
-var collapsiblePanellItem = {
+var item = {
   minHeight: '45px',
   margin: 'auto'
 };
+
+var toggle = _objectSpread(_objectSpread({}, _IconButton.square), {}, {
+  bg: 'accent.99',
+  height: '40px',
+  minWidth: 'max-content',
+  pl: 'xs',
+  ml: '10px',
+  path: {
+    fill: 'active'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.99'
+  },
+  '&.is-focused': _objectSpread(_objectSpread({}, _Buttons.defaultFocus), {}, {
+    outlineOffset: '0',
+    zIndex: 1
+  }),
+  '&.is-pressed': {
+    backgroundColor: 'accent.99'
+  },
+  ':focus': {
+    outline: 'none'
+  }
+});
+
+exports.toggle = toggle;
+
+var neutralText = _objectSpread(_objectSpread({}, _Buttons.link), {}, {
+  color: 'neutral.10'
+});
+
+var itemText = _objectSpread(_objectSpread({}, _Text.wordWrap), {}, {
+  color: 'neutral.30',
+  fontSize: 'sm',
+  fontWeight: 500,
+  overflow: 'hidden',
+  marginRight: 'xs',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+
+var title = _objectSpread(_objectSpread({}, _Text.wordWrap), {}, {
+  fontSize: 'sm',
+  fontWeight: 500,
+  color: 'text.secondary',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  mr: 'xs'
+});
+
 var _default = {
-  collapsiblePanelContainer: collapsiblePanelContainer,
-  collapsiblePanelContent: collapsiblePanelContent,
-  collapsiblePanelContainerTitle: collapsiblePanelContainerTitle,
-  collapsiblePanelBadge: collapsiblePanelBadge,
-  collapsiblePanellItem: collapsiblePanellItem
+  container: container,
+  content: content,
+  containerTitle: containerTitle,
+  badge: badge,
+  item: item,
+  toggle: toggle,
+  neutralText: neutralText,
+  itemText: itemText,
+  title: title
 };
 exports["default"] = _default;

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

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

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

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

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

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

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

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

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

@@ -42,6 +42,8 @@ var _ = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
@@ -64,7 +66,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     value: {
       control: {
         type: 'text'
@@ -100,26 +102,11 @@ var _default = {
       }
     },
     containerProps: {
-      control: {
-        type: 'none'
-      },
-      defaultValue: {
-        sx: {
-          marginLeft: 50
-        }
-      }
-    },
-    controlProps: {
-      control: {
-        type: 'none'
-      }
-    },
-    labelProps: {
       control: {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 

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

@@ -26,22 +26,22 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _input = require("./input");
+var _Buttons = require("../Button/Buttons.styles");
+
+var _colors = require("../../styles/colors");
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var container = {
-  position: 'relative'
+  border: "1px solid ".concat(_colors.neutral['80']),
+  '&:focus-visible': {
+    outline: 'none'
+  },
+  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus)
 };
-
-var input = _objectSpread(_objectSpread({}, _input.input), {}, {
-  pr: 'xl'
-});
-
 var _default = {
-  container: container,
-  input: input
+  container: container
 };
 exports["default"] = _default;