@pingux/astro 1.28.2-alpha.2 → 1.29.0-alpha.0

package/lib/cjs/components/ArrayField/ArrayField.js

@@ -46,29 +46,23 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _utils = require("@react-aria/utils");
-
-var _uuid = require("uuid");
-
 var _label = require("@react-aria/label");
 
-var _Box = _interopRequireDefault(require("../Box"));
+var _utils = require("@react-aria/utils");
 
-var _Button = _interopRequireDefault(require("../Button"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
+var _uuid = require("uuid");
 
-var _Text = _interopRequireDefault(require("../Text"));
+var _ = require("../../");
 
-var _Label = _interopRequireDefault(require("../Label"));
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ArrayFieldItem = _interopRequireDefault(require("./ArrayFieldItem"));
 
 var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
 
-var _ArrayFieldItem = _interopRequireDefault(require("./ArrayFieldItem"));
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
 
@@ -187,12 +181,17 @@ var ArrayField = function ArrayField(props) {
       raLabelProps = _useLabel.labelProps;
 
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
-  return (0, _react2.jsx)(_Box["default"], others, (0, _react2.jsx)(_Label["default"], (0, _extends2["default"])({}, raLabelProps, (0, _utils.mergeProps)(labelProps, raLabelProps, {
+
+  var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
+      ariaProps = _getAriaAttributeProp.ariaProps,
+      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
+
+  return (0, _react2.jsx)(_.Box, nonAriaProps, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({}, raLabelProps, (0, _utils.mergeProps)(labelProps, raLabelProps, {
     children: label
-  }))), (0, _react2.jsx)(_Box["default"], {
+  }))), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "ul",
     pl: "0"
-  }, (0, _map["default"])(_context2 = value || fieldValues).call(_context2, function (_ref2) {
+  }, ariaProps), (0, _map["default"])(_context2 = value || fieldValues).call(_context2, function (_ref2) {
     var id = _ref2.id,
         onComponentRender = _ref2.onComponentRender,
         fieldValue = _ref2.fieldValue,
@@ -208,11 +207,11 @@ var ArrayField = function ArrayField(props) {
       onFieldDelete: onFieldDelete,
       renderField: renderField
     }, otherFieldProps));
-  })), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+  })), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
-  }, helperText), isLimitReached && (0, _react2.jsx)(_FieldHelperText["default"], {
+  }, helperText), isLimitReached && (0, _react2.jsx)(_.FieldHelperText, {
     status: _statuses["default"].DEFAULT
-  }, maxSizeText || "Maximum ".concat(maxSize, " items.")), !isLimitReached && (0, _react2.jsx)(_Button["default"], {
+  }, maxSizeText || "Maximum ".concat(maxSize, " items.")), !isLimitReached && (0, _react2.jsx)(_.Button, {
     "aria-label": "Add field",
     variant: "text",
     onPress: onFieldAdd,
@@ -220,13 +219,13 @@ var ArrayField = function ArrayField(props) {
       width: 'fit-content',
       mt: 'xs'
     }
-  }, (0, _react2.jsx)(_Text["default"], {
+  }, (0, _react2.jsx)(_.Text, {
     variant: "label",
     color: "active"
   }, addButtonLabel)));
 };
 
-ArrayField.propTypes = {
+ArrayField.propTypes = _objectSpread({
   /** Label for add button */
   addButtonLabel: _propTypes["default"].string,
 
@@ -271,7 +270,7 @@ ArrayField.propTypes = {
 
   /** Text to display when the maximum number of items is reached */
   maxSizeText: _propTypes["default"].node
-};
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 ArrayField.defaultProps = {
   addButtonLabel: '+ Add'
 };

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

@@ -4,6 +4,20 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
@@ -18,19 +32,27 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _overlays = require("@react-aria/overlays");
 
 var _uuid = require("uuid");
 
-var _index = require("../../index");
+var _ = require("../../");
+
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _react2 = require("@emotion/react");
 
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(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; }
+
 var _default = {
   title: 'Form/ArrayField',
-  component: _index.ArrayField,
+  component: _.ArrayField,
   parameters: {
     actions: {
       argTypesRegex: '^on.*'
@@ -41,7 +63,7 @@ var _default = {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       defaultValue: 'Array field label',
       control: {
@@ -70,7 +92,7 @@ var _default = {
         type: 'text'
       }
     }
-  }
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var defaultData = [{
@@ -83,7 +105,7 @@ var defaultData = [{
 
 var Uncontrolled = function Uncontrolled(_ref) {
   var args = (0, _extends2["default"])({}, _ref);
-  return (0, _react2.jsx)(_index.ArrayField, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.ArrayField, (0, _extends2["default"])({
     defaultValue: defaultData,
     labelProps: {
       hintText: 'Example Hint',
@@ -95,7 +117,7 @@ var Uncontrolled = function Uncontrolled(_ref) {
       }
     },
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
         "aria-label": "Text field",
         value: fieldValue,
         onChange: function onChange(e) {
@@ -103,7 +125,7 @@ var Uncontrolled = function Uncontrolled(_ref) {
         },
         mr: "xs",
         slots: {
-          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
+          inContainer: (0, _react2.jsx)(_.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
             onDelete: function onDelete() {
               return onFieldDelete(id);
@@ -125,25 +147,25 @@ var Controlled = function Controlled() {
     id: (0, _uuid.v4)(),
     fieldValue: 'red',
     onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
         defaultSelectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(e) {
           return onFieldValueChange(e, id);
         },
         width: "100%",
         slots: {
-          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
+          inContainer: (0, _react2.jsx)(_.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
             onDelete: function onDelete() {
               return onFieldDelete(id);
             }
           })
         }
-      }, otherFieldProps), (0, _react2.jsx)(_index.Item, {
+      }, otherFieldProps), (0, _react2.jsx)(_.Item, {
         key: "red"
-      }, "Red"), (0, _react2.jsx)(_index.Item, {
+      }, "Red"), (0, _react2.jsx)(_.Item, {
         key: "blue"
-      }, "Blue"), (0, _react2.jsx)(_index.Item, {
+      }, "Blue"), (0, _react2.jsx)(_.Item, {
         key: "yellow"
       }, "Yellow")));
     }
@@ -151,25 +173,25 @@ var Controlled = function Controlled() {
     id: (0, _uuid.v4)(),
     fieldValue: 'black',
     onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
         defaultSelectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(key) {
           return onFieldValueChange(key, id);
         },
         width: "100%",
         slots: {
-          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
+          inContainer: (0, _react2.jsx)(_.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
             onDelete: function onDelete() {
               return onFieldDelete(id);
             }
           })
         }
-      }, otherFieldProps), (0, _react2.jsx)(_index.Item, {
+      }, otherFieldProps), (0, _react2.jsx)(_.Item, {
         key: "orange"
-      }, "Orange"), (0, _react2.jsx)(_index.Item, {
+      }, "Orange"), (0, _react2.jsx)(_.Item, {
         key: "purple"
-      }, "Purple"), (0, _react2.jsx)(_index.Item, {
+      }, "Purple"), (0, _react2.jsx)(_.Item, {
         key: "black"
       }, "Black")));
     }
@@ -178,25 +200,25 @@ var Controlled = function Controlled() {
     id: (0, _uuid.v4)(),
     fieldValue: 'blue',
     onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_.SelectField, (0, _extends2["default"])({
         defaultSelectedKey: fieldValue,
         onSelectionChange: function onSelectionChange(e) {
           return onFieldValueChange(e, id);
         },
         width: "100%",
         slots: {
-          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
+          inContainer: (0, _react2.jsx)(_.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
             onDelete: function onDelete() {
               return onFieldDelete(id);
             }
           })
         }
-      }, otherFieldProps), (0, _react2.jsx)(_index.Item, {
+      }, otherFieldProps), (0, _react2.jsx)(_.Item, {
         key: "blue"
-      }, "Blue"), (0, _react2.jsx)(_index.Item, {
+      }, "Blue"), (0, _react2.jsx)(_.Item, {
         key: "teal"
-      }, "Teal"), (0, _react2.jsx)(_index.Item, {
+      }, "Teal"), (0, _react2.jsx)(_.Item, {
         key: "turquoise"
       }, "Turquoise")));
     }
@@ -228,7 +250,7 @@ var Controlled = function Controlled() {
     });
   };
 
-  return (0, _react2.jsx)(_index.ArrayField, {
+  return (0, _react2.jsx)(_.ArrayField, {
     value: fieldValues,
     helperText: "Here is some helpful text...",
     onAdd: handleOnAdd,
@@ -244,10 +266,10 @@ exports.Controlled = Controlled;
 
 var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref3) {
   var args = (0, _extends2["default"])({}, _ref3);
-  return (0, _react2.jsx)(_index.ArrayField, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.ArrayField, (0, _extends2["default"])({
     defaultValue: defaultData,
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
-      return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
+      return (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
         "aria-label": "Text field",
         value: fieldValue,
         onChange: function onChange(e) {
@@ -255,7 +277,7 @@ var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref3) {
         },
         mr: "xs",
         slots: {
-          inContainer: (0, _react2.jsx)(_index.ArrayFieldDeleteButton, {
+          inContainer: (0, _react2.jsx)(_.ArrayFieldDeleteButton, {
             isDisabled: isDisabled,
             onDelete: function onDelete() {
               return onFieldDelete(id);

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

@@ -36,23 +36,19 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _toggle = require("@react-stately/toggle");
-
 var _checkbox = require("@react-aria/checkbox");
 
-var _hooks = require("../../hooks");
+var _toggle = require("@react-stately/toggle");
 
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Box = _interopRequireDefault(require("../Box"));
+var _ = require("../../");
 
-var _Checkbox = _interopRequireDefault(require("../Checkbox"));
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
+var _hooks = require("../../hooks");
 
-var _Label = _interopRequireDefault(require("../Label"));
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _react2 = require("@emotion/react");
 
@@ -104,18 +100,18 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
-  return (0, _react2.jsx)(_Box["default"], fieldContainerProps, (0, _react2.jsx)(_Label["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
     variant: "forms.label.checkbox"
-  }, fieldLabelProps), (0, _react2.jsx)(_Checkbox["default"], (0, _extends2["default"])({
+  }, fieldLabelProps), (0, _react2.jsx)(_.Checkbox, (0, _extends2["default"])({
     ref: checkboxRef
-  }, fieldControlProps)), label), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+  }, fieldControlProps)), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     sx: {
       pt: 7
     }
   }, helperText));
 });
-CheckboxField.propTypes = {
+CheckboxField.propTypes = _objectSpread({
   /** Whether the element should receive focus on render. */
   hasAutoFocus: _propTypes["default"].bool,
 
@@ -179,30 +175,6 @@ CheckboxField.propTypes = {
   /** Handler that is called when a key is released. */
   onKeyUp: _propTypes["default"].func,
 
-  /**
-   * Identifies the element (or elements) whose contents or presence are controlled by the current
-   * element.
-  */
-  'aria-controls': _propTypes["default"].string,
-
-  /** Defines a string value that labels the current element. */
-  'aria-label': _propTypes["default"].string,
-
-  /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby': _propTypes["default"].string,
-
-  /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby': _propTypes["default"].string,
-
-  /**
-   * Identifies the element (or elements) that provide a detailed, extended description for the
-   * object.
-  */
-  'aria-details': _propTypes["default"].string,
-
-  /** Identifies the element that provides an error message for the object. */
-  'aria-errormessage': _propTypes["default"].string,
-
   /** Props object that is spread directly into the root (top-level) element. */
   containerProps: _propTypes["default"].shape({}),
 
@@ -211,7 +183,7 @@ CheckboxField.propTypes = {
 
   /** Props object that is spread directly into the label element. */
   labelProps: _propTypes["default"].shape({})
-};
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 CheckboxField.displayName = 'CheckboxField';
 var _default = CheckboxField;
 exports["default"] = _default;

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

@@ -4,6 +4,20 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,8 +26,12 @@ exports["default"] = exports.Required = exports.HelperText = exports.DefaultSele
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+
 var _CheckboxField = _interopRequireDefault(require("./CheckboxField"));
 
 var _Link = _interopRequireDefault(require("../Link"));
@@ -24,10 +42,14 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
 
 var _react2 = require("@emotion/react");
 
+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 _default = {
   title: 'Form/CheckboxField',
   component: _CheckboxField["default"],
-  argTypes: {
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -65,36 +87,6 @@ var _default = {
     isIndeterminate: {},
     isDefaultSelected: {},
     isSelected: {},
-    'aria-label': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-labelledby': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-describedby': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-details': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-controls': {
-      control: {
-        type: 'text'
-      }
-    },
-    'aria-errormessage': {
-      control: {
-        type: 'text'
-      }
-    },
     containerProps: {
       control: {
         type: 'none'
@@ -110,7 +102,7 @@ var _default = {
         type: 'none'
       }
     }
-  }
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 

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

@@ -38,10 +38,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _reactColor = require("react-color");
-
 var _focus = require("@react-aria/focus");
 
 var _visuallyHidden = require("@react-aria/visually-hidden");
@@ -54,14 +50,20 @@ var _overlays = require("@react-stately/overlays");
 
 var _overlays2 = require("@react-aria/overlays");
 
-var _index = require("../../index");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
+var _reactColor = require("react-color");
 
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ = require("../../");
+
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _PopoverContainer = _interopRequireDefault(require("../PopoverContainer"));
 
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
+
 var _react2 = require("@emotion/react");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -92,6 +94,11 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       labelProps = props.labelProps,
       imperativeOnChange = props.onChange,
       status = props.status;
+
+  var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
+      ariaProps = _getAriaAttributeProp.ariaProps,
+      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
+
   var colorRef = (0, _react.useRef)();
   /* istanbul ignore next */
 
@@ -103,7 +110,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var overlayRef = _react["default"].useRef();
 
-  var state = (0, _color2.useColorFieldState)(props);
+  var state = (0, _color2.useColorFieldState)(nonAriaProps);
   var popoverState = (0, _overlays.useOverlayTriggerState)({});
 
   var _useOverlayTrigger = (0, _overlays2.useOverlayTrigger)({
@@ -112,14 +119,14 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       triggerProps = _useOverlayTrigger.triggerProps,
       overlayProps = _useOverlayTrigger.overlayProps;
 
-  var _useColorField = (0, _color.useColorField)(props, state, colorRef),
+  var _useColorField = (0, _color.useColorField)(nonAriaProps, state, colorRef),
       raLabelProps = _useColorField.labelProps,
       raInputProps = _useColorField.inputProps;
 
   var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
       visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
 
-  var _useField = (0, _useField2["default"])(_objectSpread(_objectSpread({}, props), {}, {
+  var _useField = (0, _useField2["default"])(_objectSpread(_objectSpread({}, nonAriaProps), {}, {
     labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
     controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
   })),
@@ -152,23 +159,23 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var colorValue = _ref.colorValue;
     return (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = (0, _concat["default"])(_context4 = "rgba(".concat(colorValue === null || colorValue === void 0 ? void 0 : colorValue.red, ", ")).call(_context4, colorValue === null || colorValue === void 0 ? void 0 : colorValue.green, ", ")).call(_context3, colorValue === null || colorValue === void 0 ? void 0 : colorValue.blue, ", ")).call(_context2, colorValue === null || colorValue === void 0 ? void 0 : colorValue.alpha, ")");
   }, []);
-  return (0, _react2.jsx)(_index.Box, fieldContainerProps, label && (0, _react2.jsx)(_index.Label, fieldLabelProps), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, fieldContainerProps, label && (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     "aria-label": "Select color",
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
     ref: triggerRef,
     variant: "colorField"
-  }, triggerProps, buttonProps)), (0, _react2.jsx)(_index.Input, (0, _extends2["default"])({}, visuallyHiddenProps, fieldControlProps, {
+  }, triggerProps, ariaProps, buttonProps)), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({}, visuallyHiddenProps, fieldControlProps, {
     ref: colorRef
-  })), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
+  })), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
-  }, helperText), (0, _react2.jsx)(_PopoverContainer["default"], (0, _extends2["default"])({}, overlayProps, positionProps, {
-    ref: overlayRef,
+  }, helperText), (0, _react2.jsx)(_PopoverContainer["default"], (0, _extends2["default"])({
+    hasNoArrow: true,
+    isDismissable: true,
     isOpen: popoverState.isOpen,
     onClose: popoverState.close,
-    hasNoArrow: true,
-    isDismissable: true
-  }), (0, _react2.jsx)(_focus.FocusScope, {
+    ref: overlayRef
+  }, overlayProps, positionProps), (0, _react2.jsx)(_focus.FocusScope, {
     restoreFocus: true,
     contain: true,
     autoFocus: true
@@ -177,7 +184,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onChange: handleColorChange
   }))));
 });
-ColorField.propTypes = {
+ColorField.propTypes = _objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
 
@@ -213,7 +220,7 @@ ColorField.propTypes = {
 
   /** Props object that is spread into the label element. */
   labelProps: _propTypes["default"].shape({})
-};
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 ColorField.defaultProps = {
   align: 'middle',
   direction: 'bottom'