@pingux/astro 2.65.1-alpha.0 → 2.66.0-alpha.1

package/lib/cjs/components/AccordionGroup/AccordionGroup.js

@@ -29,7 +29,7 @@ var _index = require("../../index");
 var _AccordionItem = _interopRequireDefault(require("../AccordionItem"));
 var _react2 = require("@emotion/react");
 var _excluded = ["labelHeadingTag", "onExpandedChange"],
-  _excluded2 = ["onFocus"]; // eslint-disable-next-line import/no-unresolved
+  _excluded2 = ["onFocus"];
 /**
  * Console Warning: "Cannot update a component (`Unknown`)...`"
  * when using controlledExpanded prop is expected

package/lib/cjs/components/ColorField/ColorField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ColorFieldProps } from '../../types';
+declare const ColorField: React.ForwardRefExoticComponent<ColorFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default ColorField;

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

@@ -24,13 +24,11 @@ var _reactColor = require("react-color");
 var _reactStately = require("react-stately");
 var _color = require("@react-aria/color");
 var _color2 = require("@react-stately/color");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
+var _hooks = require("../../hooks");
 var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _PopoverContainer = _interopRequireDefault(require("../PopoverContainer"));
 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); }
@@ -52,13 +50,9 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
     ariaProps = _getAriaAttributeProp.ariaProps,
     nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-  var colorRef = (0, _react.useRef)();
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return colorRef.current;
-  });
-  var triggerRef = _react["default"].useRef();
-  var overlayRef = _react["default"].useRef();
+  var colorRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var triggerRef = (0, _react.useRef)(null);
+  var overlayRef = (0, _react.useRef)(null);
   var state = (0, _color2.useColorFieldState)(nonAriaProps);
   var popoverState = (0, _reactStately.useOverlayTriggerState)({});
   var _useOverlayTrigger = (0, _reactAria.useOverlayTrigger)({
@@ -93,7 +87,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   /* istanbul ignore next */
   var handleButtonPress = (0, _react.useCallback)(function () {
     return popoverState.open();
-  }, [triggerRef]);
+  }, [popoverState]);
   var handleColorChange = (0, _react.useCallback)(function (color, event) {
     if (imperativeOnChange) {
       imperativeOnChange(color, event);
@@ -111,6 +105,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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, {
+    role: "textbox",
     ref: colorRef,
     sx: {
       display: 'none'
@@ -125,7 +120,9 @@ 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, {
+    role: "presentation"
+  }), (0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true,
     contain: true,
     autoFocus: true
@@ -134,25 +131,6 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onChange: handleColorChange
   }))));
 });
-ColorField.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  /** Alignment of the popover menu relative to the trigger. */
-  align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
-  /** Where the popover menu opens relative to its trigger. */
-  direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left']),
-  /** Text to display after the Color Field button. Useful for errors or other info. */
-  helperText: _propTypes["default"].node,
-  /** The content to display as the label. */
-  label: _propTypes["default"].node,
-  /** Pass a function to call every time the color is changed. [React Color onChange](https://casesandberg.github.io/react-color/#api-onChange)
-   *
-   * (color, event) => void;
-   */
-  onChange: _propTypes["default"].func,
-  /** Color controls what color is active on the color picker. */
-  value: _propTypes["default"].string,
-  /** Props object that is spread into the Button element. */
-  buttonProps: _propTypes["default"].shape({})
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
 ColorField.defaultProps = {
   align: 'middle',
   direction: 'bottom'

package/lib/cjs/components/ColorField/ColorField.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+import { ColorFieldProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<ColorFieldProps>;

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

@@ -87,21 +87,24 @@ var Default = function Default(args) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     color = _useState2[0],
     setColor = _useState2[1];
-  var handleChange = (0, _react.useCallback)(function (_ref) {
-    var _context, _context2, _context3;
-    var rgb = _ref.rgb;
-    var r = rgb.r,
-      b = rgb.b,
-      g = rgb.g,
-      a = rgb.a;
-    setColor((0, _concat["default"])(_context = (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+  var handleChange = (0, _react.useCallback)(function (colorVal) {
+    if (typeof colorVal === 'string') {
+      setColor(colorVal);
+    } else if (colorVal.rgb) {
+      var _context, _context2, _context3;
+      var rgb = colorVal.rgb;
+      var r = rgb.r,
+        b = rgb.b,
+        g = rgb.g,
+        a = rgb.a;
+      setColor((0, _concat["default"])(_context = (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+    }
   }, []);
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ColorField, (0, _extends2["default"])({
-      value: color
-    }, args, {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ColorField, (0, _extends2["default"])({}, args, {
+      value: color,
       onChange: handleChange
     })))
   );

package/lib/cjs/components/ColorField/ColorField.styles.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    container: {
+        border: string;
+        '&:focus-visible': {
+            outline: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+    };
+};
+export default _default;

package/lib/cjs/components/ColorField/ColorField.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -66,6 +66,6 @@ test('clicking within the popover does not close it', function () {
   var hexLabelElement = _testWrapper.screen.queryByText(hexLabel);
   expect(hexLabelElement).toBeInTheDocument();
   // click the popover container, which has caused closing in regressions
-  _userEvent["default"].click(_testWrapper.screen.queryByRole('presentation'));
-  expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
+  _userEvent["default"].click(_testWrapper.screen.getByRole('presentation'));
+  expect(_testWrapper.screen.getByRole('presentation')).toBeInTheDocument();
 });

package/lib/cjs/components/ColorField/index.d.ts

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

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -19,6 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _interactions = require("@react-aria/interactions");
+var _uuid = require("uuid");
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _safariAgent = require("../../styles/safariAgent");
@@ -27,15 +28,16 @@ var _excluded = ["align", "arrowCrossOffset", "children", "className", "closeDel
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var HelpIcon = function HelpIcon() {
+  var uid = (0, _uuid.v4)();
   return (0, _react2.jsx)("svg", {
     width: "7",
     height: "9",
     viewBox: "0 0 7 9",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "help-icon-title"
+    "aria-labelledby": uid
   }, (0, _react2.jsx)("title", {
-    id: "help-icon-title"
+    id: uid
   }, "Help Icon"), (0, _react2.jsx)("path", {
     d: "M2.56685 7.306V9H4.29385V7.306H2.56685ZM0.795848 3.676H2.41285C2.41285 3.478 2.43485 3.29467 2.47885 3.126C2.52285 2.95 2.58885 2.79967 2.67685 2.675C2.77218 2.543 2.88951 2.44033 3.02885 2.367C3.17551 2.28633 3.34785 2.246 3.54585 2.246C3.83918 2.246 4.06651 2.32667 4.22785 2.488C4.39651 2.64933 4.48085 2.89867 4.48085 3.236C4.48818 3.434 4.45151 3.599 4.37085 3.731C4.29751 3.863 4.19851 3.984 4.07385 4.094C3.94918 4.204 3.81351 4.314 3.66685 4.424C3.52018 4.534 3.38085 4.666 3.24885 4.82C3.11685 4.96667 2.99951 5.14633 2.89685 5.359C2.80151 5.57167 2.74285 5.83567 2.72085 6.151V6.646H4.20585V6.228C4.23518 6.008 4.30485 5.82467 4.41485 5.678C4.53218 5.53133 4.66418 5.403 4.81085 5.293C4.95751 5.17567 5.11151 5.062 5.27285 4.952C5.44151 4.83467 5.59185 4.69533 5.72385 4.534C5.86318 4.37267 5.97685 4.17833 6.06485 3.951C6.16018 3.72367 6.20785 3.434 6.20785 3.082C6.20785 2.86933 6.16018 2.642 6.06485 2.4C5.97685 2.15067 5.82651 1.91967 5.61385 1.707C5.40118 1.49433 5.11885 1.31833 4.76685 1.179C4.42218 1.03233 3.98951 0.959 3.46885 0.959C3.06551 0.959 2.69885 1.02867 2.36885 1.168C2.04618 1.3 1.76751 1.487 1.53285 1.729C1.30551 1.971 1.12585 2.257 0.993848 2.587C0.869181 2.917 0.803181 3.28 0.795848 3.676Z",
     fill: "#3B4A58"
@@ -100,13 +102,13 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return function () {
       clearTimeout(timeout);
     };
-  }, [isFocusWithinOverlay, isFocusVisible, isOverlayHovered, isTriggerHovered]);
+  }, [isFocusWithinOverlay, isFocusVisible, isOverlayHovered, isTriggerHovered, close, closeDelay, open]);
   (0, _react.useEffect)(function () {
     if (isOpen) {
       return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current.setAttribute('aria-expanded', 'true');
     }
     return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current.setAttribute('aria-expanded', 'false');
-  }, [isOpen]);
+  }, [isOpen, triggerRef]);
   var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
       targetRef: triggerRef,
       overlayRef: overlayRef,

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

@@ -203,14 +203,18 @@ var Expandable = function Expandable() {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     color = _useState4[0],
     setColor = _useState4[1];
-  var handleColorChange = (0, _react.useCallback)(function (_ref2) {
-    var _context, _context2, _context3;
-    var rgb = _ref2.rgb;
-    var r = rgb.r,
-      b = rgb.b,
-      g = rgb.g,
-      a = rgb.a;
-    setColor((0, _concat["default"])(_context = (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+  var handleColorChange = (0, _react.useCallback)(function (colorVal) {
+    if (typeof colorVal === 'string') {
+      setColor(colorVal);
+    } else if (colorVal.rgb) {
+      var _context, _context2, _context3;
+      var rgb = colorVal.rgb;
+      var r = rgb.r,
+        b = rgb.b,
+        g = rgb.g,
+        a = rgb.a;
+      setColor((0, _concat["default"])(_context = (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+    }
   }, []);
   var header = (0, _react2.jsx)(_index.Box, {
     sx: sx.header
@@ -377,8 +381,8 @@ var Expandable = function Expandable() {
   );
 };
 exports.Expandable = Expandable;
-var InnerPanel = function InnerPanel(_ref3) {
-  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref3), _ref3));
+var InnerPanel = function InnerPanel(_ref2) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
   var _useOverlayPanelState4 = (0, _hooks.useOverlayPanelState)(),
     state = _useOverlayPanelState4.state,
     onClose = _useOverlayPanelState4.onClose;

package/lib/cjs/hooks/useField/useField.d.ts

@@ -1,6 +1,6 @@
 import { Key } from 'react';
-import { AriaLabelingProps, CollectionChildren, DOMProps } from '@react-types/shared';
-import { BoxProps, LabelModeProps, LabelProps } from '../../types';
+import type { AriaLabelingProps, CollectionChildren, DOMProps } from '@react-types/shared';
+import { AriaRole, BoxProps, LabelModeProps, LabelProps, ValidPositiveInteger } from '../../types';
 /**
  * Generates the necessary props to be used in field components.
  * @param {{}} props Props for the field
@@ -26,13 +26,13 @@ export interface FieldControlInputProps extends AriaLabelingProps, DOMProps {
     id?: string;
     isFocused?: boolean;
     isIndeterminate?: boolean;
-    maxLength?: number;
+    maxLength?: ValidPositiveInteger;
     name?: string;
     onChange: (event: CustomChangeEventType | React.ChangeEvent) => void | undefined;
     placeholder?: string;
     readOnly?: boolean;
     required?: boolean;
-    role?: string;
+    role?: AriaRole;
     spellCheck?: boolean;
     type?: string;
     value?: string | number;
@@ -69,7 +69,7 @@ export interface UseFieldProps<T> {
     label?: string;
     labelMode?: LabelModeProps;
     labelProps?: LabelProps;
-    maxLength?: number;
+    maxLength?: ValidPositiveInteger;
     name?: string;
     onBlur?: (e: React.FocusEvent) => void;
     onChange?: (e: React.ChangeEvent) => void;
@@ -80,7 +80,7 @@ export interface UseFieldProps<T> {
     onOpenChange?: (isOpen: boolean) => unknown;
     onSelectionChange?: (key: string) => void;
     placeholder?: string | number;
-    role?: string;
+    role?: AriaRole;
     selectedKey?: string;
     spellCheck?: string;
     status?: string;
@@ -91,7 +91,7 @@ export interface UseFieldProps<T> {
     value?: string | number;
     wrapperProps?: WrapperProps;
 }
-type CustomChangeEventType = {
+export type CustomChangeEventType = {
     target?: {
         value: string | number | undefined;
     };
@@ -825,7 +825,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         borderRadius?: import("theme-ui").StylePropertyValue<import("csstype").Property.BorderRadius<string | number> | undefined>;
         zIndex?: import("theme-ui").StylePropertyValue<string | (string & {}) | (number & {}) | undefined>;
         sx?: import("theme-ui").ThemeUIStyleObject | undefined;
-        role?: import("../../types").AriaRole | undefined;
+        role?: AriaRole | undefined;
         className: string;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "false" | "true") | undefined;

package/lib/cjs/hooks/useField/useField.js

@@ -25,7 +25,7 @@ var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _ = require("..");
-var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "className", "containerProps", "controlProps", "defaultValue", "hasAutoFocus", "hasNoStatusIndicator", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "role", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"]; // eslint-disable-next-line import/no-unresolved
+var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "className", "containerProps", "controlProps", "defaultValue", "hasAutoFocus", "hasNoStatusIndicator", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "role", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"];
 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; }
 /**

package/lib/cjs/hooks/useField/useField.test.js

@@ -48,7 +48,7 @@ var defaultProps = {
   },
   name: 'test',
   placeholder: 'test',
-  role: 'test',
+  role: 'none',
   statusClasses: {
     isTested: true
   },

package/lib/cjs/hooks/useSelectField/useSelectField.d.ts

@@ -1,7 +1,7 @@
 import React, { DOMAttributes, Key } from 'react';
 import { AriaButtonProps } from 'react-aria';
 import { SelectState } from 'react-stately';
-import { CollectionChildren } from '@react-types/shared';
+import type { CollectionChildren } from '@react-types/shared';
 import { LabelProps as ThemeUILabelProps } from 'theme-ui';
 import { Axis, BoxProps, FocusableElement, LabelModeProps, ListBoxProps, PlacementAxis, ReactRef, StyleProps } from '../../types';
 import { FieldControlInputProps } from '../useField/useField';

package/lib/cjs/hooks/useSelectField/useSelectField.js

@@ -32,7 +32,7 @@ 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 _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; } // eslint-disable-next-line import/no-unresolved
+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 useSelectField = function useSelectField(props, ref) {
   var _context;
   var align = props.align,

package/lib/cjs/types/colorField.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ControlProps } from '../hooks/useField/useField';
+import { TestingAttributes } from './shared/test';
+import { Alignment, Axis } from './shared';
+import { ButtonProps, LabelProps, Status } from '.';
+export type RGBProps = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export type HSLProps = {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+export type CustomColorProps = string | {
+    hex: string;
+    rgb: RGBProps;
+    hsl: HSLProps;
+};
+export interface ColorFieldProps extends TestingAttributes {
+    /** Alignment of the popover menu relative to the trigger. */
+    align?: Alignment;
+    /** Where the popover menu opens relative to its trigger. */
+    direction?: Axis;
+    /** Text to display after the Color Field button. Useful for errors or other info. */
+    helperText?: React.ReactNode;
+    /** The content to display as the label. */
+    label?: React.ReactNode;
+    /** Pass a function to call every time the color is changed. [React Color onChange](https://casesandberg.github.io/react-color/#api-onChange)
+     *
+     * (color, event) => void;
+     */
+    onChange?: (color: CustomColorProps, event: React.ChangeEvent) => void | undefined;
+    /** Color controls what color is active on the color picker. */
+    value?: string;
+    /** Props object that is spread into the Button element. */
+    buttonProps?: ButtonProps;
+    status?: Status;
+    controlProps?: ControlProps;
+    labelProps?: LabelProps;
+}

package/lib/cjs/types/colorField.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/fieldHelperText.d.ts

@@ -4,6 +4,6 @@ import { Status } from './item';
 import { TextProps } from './text';
 export interface FieldHelperTextProps extends TestingAttributes, TextProps {
     className?: string;
-    status?: Status;
     children?: React.ReactNode;
+    status?: Status;
 }

package/lib/cjs/types/index.d.ts

@@ -7,6 +7,7 @@ export * from './button';
 export * from './buttonBar';
 export * from './calendar';
 export * from './card';
+export * from './colorField';
 export * from './copyText';
 export * from './dataTable';
 export * from './environmentBreadcrumb';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -106,8 +106,19 @@ _forEachInstanceProperty(_context9 = _Object$keys(_card)).call(_context9, functi
     }
   });
 });
+var _colorField = require("./colorField");
+_forEachInstanceProperty(_context10 = _Object$keys(_colorField)).call(_context10, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _colorField[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _colorField[key];
+    }
+  });
+});
 var _copyText = require("./copyText");
-_forEachInstanceProperty(_context10 = _Object$keys(_copyText)).call(_context10, function (key) {
+_forEachInstanceProperty(_context11 = _Object$keys(_copyText)).call(_context11, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _copyText[key]) return;
   _Object$defineProperty(exports, key, {
@@ -118,7 +129,7 @@ _forEachInstanceProperty(_context10 = _Object$keys(_copyText)).call(_context10,
   });
 });
 var _dataTable = require("./dataTable");
-_forEachInstanceProperty(_context11 = _Object$keys(_dataTable)).call(_context11, function (key) {
+_forEachInstanceProperty(_context12 = _Object$keys(_dataTable)).call(_context12, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _dataTable[key]) return;
   _Object$defineProperty(exports, key, {
@@ -129,7 +140,7 @@ _forEachInstanceProperty(_context11 = _Object$keys(_dataTable)).call(_context11,
   });
 });
 var _environmentBreadcrumb = require("./environmentBreadcrumb");
-_forEachInstanceProperty(_context12 = _Object$keys(_environmentBreadcrumb)).call(_context12, function (key) {
+_forEachInstanceProperty(_context13 = _Object$keys(_environmentBreadcrumb)).call(_context13, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _environmentBreadcrumb[key]) return;
   _Object$defineProperty(exports, key, {
@@ -140,7 +151,7 @@ _forEachInstanceProperty(_context12 = _Object$keys(_environmentBreadcrumb)).call
   });
 });
 var _fieldHelperText = require("./fieldHelperText");
-_forEachInstanceProperty(_context13 = _Object$keys(_fieldHelperText)).call(_context13, function (key) {
+_forEachInstanceProperty(_context14 = _Object$keys(_fieldHelperText)).call(_context14, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _fieldHelperText[key]) return;
   _Object$defineProperty(exports, key, {
@@ -151,7 +162,7 @@ _forEachInstanceProperty(_context13 = _Object$keys(_fieldHelperText)).call(_cont
   });
 });
 var _helpHint = require("./helpHint");
-_forEachInstanceProperty(_context14 = _Object$keys(_helpHint)).call(_context14, function (key) {
+_forEachInstanceProperty(_context15 = _Object$keys(_helpHint)).call(_context15, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _helpHint[key]) return;
   _Object$defineProperty(exports, key, {
@@ -162,7 +173,7 @@ _forEachInstanceProperty(_context14 = _Object$keys(_helpHint)).call(_context14,
   });
 });
 var _icon = require("./icon");
-_forEachInstanceProperty(_context15 = _Object$keys(_icon)).call(_context15, function (key) {
+_forEachInstanceProperty(_context16 = _Object$keys(_icon)).call(_context16, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _icon[key]) return;
   _Object$defineProperty(exports, key, {
@@ -173,7 +184,7 @@ _forEachInstanceProperty(_context15 = _Object$keys(_icon)).call(_context15, func
   });
 });
 var _iconBadge = require("./iconBadge");
-_forEachInstanceProperty(_context16 = _Object$keys(_iconBadge)).call(_context16, function (key) {
+_forEachInstanceProperty(_context17 = _Object$keys(_iconBadge)).call(_context17, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconBadge[key]) return;
   _Object$defineProperty(exports, key, {
@@ -184,7 +195,7 @@ _forEachInstanceProperty(_context16 = _Object$keys(_iconBadge)).call(_context16,
   });
 });
 var _iconButton = require("./iconButton");
-_forEachInstanceProperty(_context17 = _Object$keys(_iconButton)).call(_context17, function (key) {
+_forEachInstanceProperty(_context18 = _Object$keys(_iconButton)).call(_context18, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconButton[key]) return;
   _Object$defineProperty(exports, key, {
@@ -195,7 +206,7 @@ _forEachInstanceProperty(_context17 = _Object$keys(_iconButton)).call(_context17
   });
 });
 var _iconButtonToggle = require("./iconButtonToggle");
-_forEachInstanceProperty(_context18 = _Object$keys(_iconButtonToggle)).call(_context18, function (key) {
+_forEachInstanceProperty(_context19 = _Object$keys(_iconButtonToggle)).call(_context19, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconButtonToggle[key]) return;
   _Object$defineProperty(exports, key, {
@@ -206,7 +217,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_iconButtonToggle)).call(_con
   });
 });
 var _input = require("./input");
-_forEachInstanceProperty(_context19 = _Object$keys(_input)).call(_context19, function (key) {
+_forEachInstanceProperty(_context20 = _Object$keys(_input)).call(_context20, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _input[key]) return;
   _Object$defineProperty(exports, key, {
@@ -217,7 +228,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_input)).call(_context19, fun
   });
 });
 var _item = require("./item");
-_forEachInstanceProperty(_context20 = _Object$keys(_item)).call(_context20, function (key) {
+_forEachInstanceProperty(_context21 = _Object$keys(_item)).call(_context21, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _item[key]) return;
   _Object$defineProperty(exports, key, {
@@ -228,7 +239,7 @@ _forEachInstanceProperty(_context20 = _Object$keys(_item)).call(_context20, func
   });
 });
 var _label = require("./label");
-_forEachInstanceProperty(_context21 = _Object$keys(_label)).call(_context21, function (key) {
+_forEachInstanceProperty(_context22 = _Object$keys(_label)).call(_context22, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _label[key]) return;
   _Object$defineProperty(exports, key, {
@@ -239,7 +250,7 @@ _forEachInstanceProperty(_context21 = _Object$keys(_label)).call(_context21, fun
   });
 });
 var _link = require("./link");
-_forEachInstanceProperty(_context22 = _Object$keys(_link)).call(_context22, function (key) {
+_forEachInstanceProperty(_context23 = _Object$keys(_link)).call(_context23, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _link[key]) return;
   _Object$defineProperty(exports, key, {
@@ -250,7 +261,7 @@ _forEachInstanceProperty(_context22 = _Object$keys(_link)).call(_context22, func
   });
 });
 var _listBox = require("./listBox");
-_forEachInstanceProperty(_context23 = _Object$keys(_listBox)).call(_context23, function (key) {
+_forEachInstanceProperty(_context24 = _Object$keys(_listBox)).call(_context24, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -261,7 +272,7 @@ _forEachInstanceProperty(_context23 = _Object$keys(_listBox)).call(_context23, f
   });
 });
 var _listItem = require("./listItem");
-_forEachInstanceProperty(_context24 = _Object$keys(_listItem)).call(_context24, function (key) {
+_forEachInstanceProperty(_context25 = _Object$keys(_listItem)).call(_context25, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -272,7 +283,7 @@ _forEachInstanceProperty(_context24 = _Object$keys(_listItem)).call(_context24,
   });
 });
 var _loader = require("./loader");
-_forEachInstanceProperty(_context25 = _Object$keys(_loader)).call(_context25, function (key) {
+_forEachInstanceProperty(_context26 = _Object$keys(_loader)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _loader[key]) return;
   _Object$defineProperty(exports, key, {
@@ -283,7 +294,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_loader)).call(_context25, fu
   });
 });
 var _menu = require("./menu");
-_forEachInstanceProperty(_context26 = _Object$keys(_menu)).call(_context26, function (key) {
+_forEachInstanceProperty(_context27 = _Object$keys(_menu)).call(_context27, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -294,7 +305,7 @@ _forEachInstanceProperty(_context26 = _Object$keys(_menu)).call(_context26, func
   });
 });
 var _menuItem = require("./menuItem");
-_forEachInstanceProperty(_context27 = _Object$keys(_menuItem)).call(_context27, function (key) {
+_forEachInstanceProperty(_context28 = _Object$keys(_menuItem)).call(_context28, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menuItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -305,7 +316,7 @@ _forEachInstanceProperty(_context27 = _Object$keys(_menuItem)).call(_context27,
   });
 });
 var _messages = require("./messages");
-_forEachInstanceProperty(_context28 = _Object$keys(_messages)).call(_context28, function (key) {
+_forEachInstanceProperty(_context29 = _Object$keys(_messages)).call(_context29, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _messages[key]) return;
   _Object$defineProperty(exports, key, {
@@ -316,7 +327,7 @@ _forEachInstanceProperty(_context28 = _Object$keys(_messages)).call(_context28,
   });
 });
 var _Modal = require("./Modal");
-_forEachInstanceProperty(_context29 = _Object$keys(_Modal)).call(_context29, function (key) {
+_forEachInstanceProperty(_context30 = _Object$keys(_Modal)).call(_context30, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Modal[key]) return;
   _Object$defineProperty(exports, key, {
@@ -327,7 +338,7 @@ _forEachInstanceProperty(_context29 = _Object$keys(_Modal)).call(_context29, fun
   });
 });
 var _navBar = require("./navBar");
-_forEachInstanceProperty(_context30 = _Object$keys(_navBar)).call(_context30, function (key) {
+_forEachInstanceProperty(_context31 = _Object$keys(_navBar)).call(_context31, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _navBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -338,7 +349,7 @@ _forEachInstanceProperty(_context30 = _Object$keys(_navBar)).call(_context30, fu
   });
 });
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context31 = _Object$keys(_overlayPanel)).call(_context31, function (key) {
+_forEachInstanceProperty(_context32 = _Object$keys(_overlayPanel)).call(_context32, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -349,7 +360,7 @@ _forEachInstanceProperty(_context31 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context32 = _Object$keys(_popoverContainer)).call(_context32, function (key) {
+_forEachInstanceProperty(_context33 = _Object$keys(_popoverContainer)).call(_context33, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -360,7 +371,7 @@ _forEachInstanceProperty(_context32 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context33 = _Object$keys(_popoverMenu)).call(_context33, function (key) {
+_forEachInstanceProperty(_context34 = _Object$keys(_popoverMenu)).call(_context34, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -371,7 +382,7 @@ _forEachInstanceProperty(_context33 = _Object$keys(_popoverMenu)).call(_context3
   });
 });
 var _progressBar = require("./progressBar");
-_forEachInstanceProperty(_context34 = _Object$keys(_progressBar)).call(_context34, function (key) {
+_forEachInstanceProperty(_context35 = _Object$keys(_progressBar)).call(_context35, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _progressBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -382,7 +393,7 @@ _forEachInstanceProperty(_context34 = _Object$keys(_progressBar)).call(_context3
   });
 });
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context35 = _Object$keys(_requirementsList)).call(_context35, function (key) {
+_forEachInstanceProperty(_context36 = _Object$keys(_requirementsList)).call(_context36, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -393,7 +404,7 @@ _forEachInstanceProperty(_context35 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context36 = _Object$keys(_rockerButtonGroup)).call(_context36, function (key) {
+_forEachInstanceProperty(_context37 = _Object$keys(_rockerButtonGroup)).call(_context37, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -404,7 +415,7 @@ _forEachInstanceProperty(_context36 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context37 = _Object$keys(_scrollBox)).call(_context37, function (key) {
+_forEachInstanceProperty(_context38 = _Object$keys(_scrollBox)).call(_context38, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -415,7 +426,7 @@ _forEachInstanceProperty(_context37 = _Object$keys(_scrollBox)).call(_context37,
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context38 = _Object$keys(_separator)).call(_context38, function (key) {
+_forEachInstanceProperty(_context39 = _Object$keys(_separator)).call(_context39, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -426,7 +437,7 @@ _forEachInstanceProperty(_context38 = _Object$keys(_separator)).call(_context38,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context39 = _Object$keys(_shared)).call(_context39, function (key) {
+_forEachInstanceProperty(_context40 = _Object$keys(_shared)).call(_context40, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -437,7 +448,7 @@ _forEachInstanceProperty(_context39 = _Object$keys(_shared)).call(_context39, fu
   });
 });
 var _tab = require("./tab");
-_forEachInstanceProperty(_context40 = _Object$keys(_tab)).call(_context40, function (key) {
+_forEachInstanceProperty(_context41 = _Object$keys(_tab)).call(_context41, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tab[key]) return;
   _Object$defineProperty(exports, key, {
@@ -448,7 +459,7 @@ _forEachInstanceProperty(_context40 = _Object$keys(_tab)).call(_context40, funct
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context41 = _Object$keys(_table)).call(_context41, function (key) {
+_forEachInstanceProperty(_context42 = _Object$keys(_table)).call(_context42, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -459,7 +470,7 @@ _forEachInstanceProperty(_context41 = _Object$keys(_table)).call(_context41, fun
   });
 });
 var _tabs = require("./tabs");
-_forEachInstanceProperty(_context42 = _Object$keys(_tabs)).call(_context42, function (key) {
+_forEachInstanceProperty(_context43 = _Object$keys(_tabs)).call(_context43, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tabs[key]) return;
   _Object$defineProperty(exports, key, {
@@ -470,7 +481,7 @@ _forEachInstanceProperty(_context42 = _Object$keys(_tabs)).call(_context42, func
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context43 = _Object$keys(_text)).call(_context43, function (key) {
+_forEachInstanceProperty(_context44 = _Object$keys(_text)).call(_context44, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -481,7 +492,7 @@ _forEachInstanceProperty(_context43 = _Object$keys(_text)).call(_context43, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context44 = _Object$keys(_tooltipTrigger)).call(_context44, function (key) {
+_forEachInstanceProperty(_context45 = _Object$keys(_tooltipTrigger)).call(_context45, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/components/AccordionGroup/AccordionGroup.js

@@ -19,9 +19,6 @@ import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { mergeProps } from 'react-aria';
 import { useTreeState } from 'react-stately';
 import { useAccordion } from '@react-aria/accordion';
-
-// eslint-disable-next-line import/no-unresolved
-
 import { AccordionContext } from '../../context/AccordionContext';
 import { Box } from '../../index';
 import AccordionItem from '../AccordionItem';

package/lib/components/ColorField/ColorField.js

@@ -11,19 +11,17 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 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 _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 React, { forwardRef, useCallback, useRef } from 'react';
 import { FocusScope, mergeProps, useOverlayPosition, useOverlayTrigger, useVisuallyHidden } from 'react-aria';
 import { SketchPicker } from 'react-color';
 import { useOverlayTriggerState } from 'react-stately';
 import { useColorField } from '@react-aria/color';
 import { useColorFieldState } from '@react-stately/color';
-import PropTypes from 'prop-types';
 import { Box, Button, FieldHelperText, Input, Label } from '../..';
+import { useLocalOrForwardRef } from '../../hooks';
 import useField from '../../hooks/useField';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
+import { getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import PopoverContainer from '../PopoverContainer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var displayName = 'ColorField';
@@ -41,13 +39,9 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _getAriaAttributeProp = getAriaAttributeProps(props),
     ariaProps = _getAriaAttributeProp.ariaProps,
     nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-  var colorRef = useRef();
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return colorRef.current;
-  });
-  var triggerRef = React.useRef();
-  var overlayRef = React.useRef();
+  var colorRef = useLocalOrForwardRef(ref);
+  var triggerRef = useRef(null);
+  var overlayRef = useRef(null);
   var state = useColorFieldState(nonAriaProps);
   var popoverState = useOverlayTriggerState({});
   var _useOverlayTrigger = useOverlayTrigger({
@@ -82,7 +76,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
   /* istanbul ignore next */
   var handleButtonPress = useCallback(function () {
     return popoverState.open();
-  }, [triggerRef]);
+  }, [popoverState]);
   var handleColorChange = useCallback(function (color, event) {
     if (imperativeOnChange) {
       imperativeOnChange(color, event);
@@ -100,6 +94,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: triggerRef,
     variant: "forms.colorField.container"
   }, mergeProps(buttonProps, ariaProps, triggerProps))), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Input, _extends({}, visuallyHiddenProps, fieldControlInputProps, {
+    role: "textbox",
     ref: colorRef,
     sx: {
       display: 'none'
@@ -114,7 +109,9 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     isOpen: popoverState.isOpen,
     onClose: popoverState.close,
     ref: overlayRef
-  }, overlayProps, positionProps), ___EmotionJSX(FocusScope, {
+  }, overlayProps, positionProps, {
+    role: "presentation"
+  }), ___EmotionJSX(FocusScope, {
     restoreFocus: true,
     contain: true,
     autoFocus: true
@@ -123,25 +120,6 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange: handleColorChange
   }))));
 });
-ColorField.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  /** Alignment of the popover menu relative to the trigger. */
-  align: PropTypes.oneOf(['start', 'end', 'middle']),
-  /** Where the popover menu opens relative to its trigger. */
-  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  /** Text to display after the Color Field button. Useful for errors or other info. */
-  helperText: PropTypes.node,
-  /** The content to display as the label. */
-  label: PropTypes.node,
-  /** Pass a function to call every time the color is changed. [React Color onChange](https://casesandberg.github.io/react-color/#api-onChange)
-   *
-   * (color, event) => void;
-   */
-  onChange: PropTypes.func,
-  /** Color controls what color is active on the color picker. */
-  value: PropTypes.string,
-  /** Props object that is spread into the Button element. */
-  buttonProps: PropTypes.shape({})
-}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 ColorField.defaultProps = {
   align: 'middle',
   direction: 'bottom'

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

@@ -75,21 +75,24 @@ export var Default = function Default(args) {
     _useState2 = _slicedToArray(_useState, 2),
     color = _useState2[0],
     setColor = _useState2[1];
-  var handleChange = useCallback(function (_ref) {
-    var _context, _context2, _context3;
-    var rgb = _ref.rgb;
-    var r = rgb.r,
-      b = rgb.b,
-      g = rgb.g,
-      a = rgb.a;
-    setColor(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+  var handleChange = useCallback(function (colorVal) {
+    if (typeof colorVal === 'string') {
+      setColor(colorVal);
+    } else if (colorVal.rgb) {
+      var _context, _context2, _context3;
+      var rgb = colorVal.rgb;
+      var r = rgb.r,
+        b = rgb.b,
+        g = rgb.g,
+        a = rgb.a;
+      setColor(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+    }
   }, []);
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ColorField, _extends({
-      value: color
-    }, args, {
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ColorField, _extends({}, args, {
+      value: color,
       onChange: handleChange
     })))
   );

package/lib/components/ColorField/ColorField.test.js

@@ -63,6 +63,6 @@ test('clicking within the popover does not close it', function () {
   var hexLabelElement = screen.queryByText(hexLabel);
   expect(hexLabelElement).toBeInTheDocument();
   // click the popover container, which has caused closing in regressions
-  userEvent.click(screen.queryByRole('presentation'));
-  expect(screen.queryByRole('presentation')).toBeInTheDocument();
+  userEvent.click(screen.getByRole('presentation'));
+  expect(screen.getByRole('presentation')).toBeInTheDocument();
 });

package/lib/components/HelpHint/HelpHint.js

@@ -9,20 +9,22 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { FocusScope, mergeProps, useFocusRing, useFocusWithin, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 import { useOverlayTriggerState } from 'react-stately';
 import { useHover } from '@react-aria/interactions';
+import { v4 as uuid } from 'uuid';
 import { Box, Icon, IconButton, PopoverContainer } from '../..';
 import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import { isSafari } from '../../styles/safariAgent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var HelpIcon = function HelpIcon() {
+  var uid = uuid();
   return ___EmotionJSX("svg", {
     width: "7",
     height: "9",
     viewBox: "0 0 7 9",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "help-icon-title"
+    "aria-labelledby": uid
   }, ___EmotionJSX("title", {
-    id: "help-icon-title"
+    id: uid
   }, "Help Icon"), ___EmotionJSX("path", {
     d: "M2.56685 7.306V9H4.29385V7.306H2.56685ZM0.795848 3.676H2.41285C2.41285 3.478 2.43485 3.29467 2.47885 3.126C2.52285 2.95 2.58885 2.79967 2.67685 2.675C2.77218 2.543 2.88951 2.44033 3.02885 2.367C3.17551 2.28633 3.34785 2.246 3.54585 2.246C3.83918 2.246 4.06651 2.32667 4.22785 2.488C4.39651 2.64933 4.48085 2.89867 4.48085 3.236C4.48818 3.434 4.45151 3.599 4.37085 3.731C4.29751 3.863 4.19851 3.984 4.07385 4.094C3.94918 4.204 3.81351 4.314 3.66685 4.424C3.52018 4.534 3.38085 4.666 3.24885 4.82C3.11685 4.96667 2.99951 5.14633 2.89685 5.359C2.80151 5.57167 2.74285 5.83567 2.72085 6.151V6.646H4.20585V6.228C4.23518 6.008 4.30485 5.82467 4.41485 5.678C4.53218 5.53133 4.66418 5.403 4.81085 5.293C4.95751 5.17567 5.11151 5.062 5.27285 4.952C5.44151 4.83467 5.59185 4.69533 5.72385 4.534C5.86318 4.37267 5.97685 4.17833 6.06485 3.951C6.16018 3.72367 6.20785 3.434 6.20785 3.082C6.20785 2.86933 6.16018 2.642 6.06485 2.4C5.97685 2.15067 5.82651 1.91967 5.61385 1.707C5.40118 1.49433 5.11885 1.31833 4.76685 1.179C4.42218 1.03233 3.98951 0.959 3.46885 0.959C3.06551 0.959 2.69885 1.02867 2.36885 1.168C2.04618 1.3 1.76751 1.487 1.53285 1.729C1.30551 1.971 1.12585 2.257 0.993848 2.587C0.869181 2.917 0.803181 3.28 0.795848 3.676Z",
     fill: "#3B4A58"
@@ -87,13 +89,13 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     return function () {
       clearTimeout(timeout);
     };
-  }, [isFocusWithinOverlay, isFocusVisible, isOverlayHovered, isTriggerHovered]);
+  }, [isFocusWithinOverlay, isFocusVisible, isOverlayHovered, isTriggerHovered, close, closeDelay, open]);
   useEffect(function () {
     if (isOpen) {
       return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current.setAttribute('aria-expanded', 'true');
     }
     return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current.setAttribute('aria-expanded', 'false');
-  }, [isOpen]);
+  }, [isOpen, triggerRef]);
   var _useOverlayPosition = useOverlayPosition({
       targetRef: triggerRef,
       overlayRef: overlayRef,

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -187,14 +187,18 @@ export var Expandable = function Expandable() {
     _useState4 = _slicedToArray(_useState3, 2),
     color = _useState4[0],
     setColor = _useState4[1];
-  var handleColorChange = useCallback(function (_ref2) {
-    var _context, _context2, _context3;
-    var rgb = _ref2.rgb;
-    var r = rgb.r,
-      b = rgb.b,
-      g = rgb.g,
-      a = rgb.a;
-    setColor(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+  var handleColorChange = useCallback(function (colorVal) {
+    if (typeof colorVal === 'string') {
+      setColor(colorVal);
+    } else if (colorVal.rgb) {
+      var _context, _context2, _context3;
+      var rgb = colorVal.rgb;
+      var r = rgb.r,
+        b = rgb.b,
+        g = rgb.g,
+        a = rgb.a;
+      setColor(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+    }
   }, []);
   var header = ___EmotionJSX(Box, {
     sx: sx.header
@@ -360,8 +364,8 @@ export var Expandable = function Expandable() {
     }, schemaTabContent))), footer))
   );
 };
-export var InnerPanel = function InnerPanel(_ref3) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+export var InnerPanel = function InnerPanel(_ref2) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   var _useOverlayPanelState4 = useOverlayPanelState(),
     state = _useOverlayPanelState4.state,
     onClose = _useOverlayPanelState4.onClose;

package/lib/hooks/useField/useField.js

@@ -15,8 +15,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { useEffect, useState } from 'react';
 import { mergeProps, useFocusRing, useLabel } from 'react-aria';
 import { useFocusWithin } from '@react-aria/interactions';
-// eslint-disable-next-line import/no-unresolved
-
 import noop from 'lodash/noop';
 import omit from 'lodash/omit';
 import { modes as labelModes } from '../../utils/devUtils/constants/labelModes';

package/lib/hooks/useField/useField.test.js

@@ -45,7 +45,7 @@ var defaultProps = {
   },
   name: 'test',
   placeholder: 'test',
-  role: 'test',
+  role: 'none',
   statusClasses: {
     isTested: true
   },

package/lib/hooks/useSelectField/useSelectField.js

@@ -16,8 +16,6 @@ import React, { useCallback, useImperativeHandle, useLayoutEffect, useRef, useSt
 import { DismissButton, FocusScope, useOverlayPosition, useSelect } from 'react-aria';
 import { useSelectState } from 'react-stately';
 import { useResizeObserver } from '@react-aria/utils';
-// eslint-disable-next-line import/no-unresolved
-
 import ListBox from '../../components/ListBox/ListBox';
 import PopoverContainer from '../../components/PopoverContainer';
 import ScrollBox from '../../components/ScrollBox';

package/lib/types/colorField.js

@@ -0,0 +1 @@
+export {};

package/lib/types/index.js

@@ -7,6 +7,7 @@ export * from './button';
 export * from './buttonBar';
 export * from './calendar';
 export * from './card';
+export * from './colorField';
 export * from './copyText';
 export * from './dataTable';
 export * from './environmentBreadcrumb';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.65.1-alpha.0",
+  "version": "2.66.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",