@pingux/astro 2.2.0-alpha.6 → 2.2.0

package/lib/components/NumberField/NumberField.js

@@ -9,7 +9,6 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
@@ -23,9 +22,9 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../..';
 import { useField, usePropWarning } from '../../hooks';
-import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
+import { statusPropTypes } from '../../utils/docUtils/statusProp';
 
 /**
  * Number fields allow users to enter a number, and increment or
@@ -142,7 +141,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, helperText)));
 });
 export default NumberField;
-NumberField.propTypes = _objectSpread(_objectSpread({
+NumberField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** A custom aria-label for the decrement button.
    * If not provided, the localized string "Decrement" is used. */
   decrementAriaLabel: PropTypes.string,
@@ -199,10 +198,8 @@ NumberField.propTypes = _objectSpread(_objectSpread({
    * (value: number) => void
    */
   onChange: PropTypes.func,
-  /** Determines the input status indicator and helper text styling. */
-  status: PropTypes.oneOf(_Object$values(statuses)),
   /** The default value (uncontrolled). */
   defaultValue: PropTypes.number,
   /** The current value (controlled). */
   value: PropTypes.number
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);

package/lib/components/NumberField/NumberField.stories.js

@@ -12,9 +12,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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) { _defineProperty(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; }
 import React, { useState } from 'react';
 import { NumberField } from '../../index';
-import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
+import { statusArgTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/NumberField',
@@ -26,7 +26,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -43,13 +43,6 @@ export default {
         type: 'text'
       }
     },
-    status: {
-      control: {
-        type: 'select',
-        options: statuses
-      },
-      defaultValue: statuses.DEFAULT
-    },
     value: {
       control: {
         type: 'none'
@@ -99,7 +92,7 @@ export default {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(NumberField, args);

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

@@ -10,7 +10,7 @@ import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
 import CogIcon from 'mdi-react/CogIcon';
 import { useOverlayPanelState } from '../../hooks';
-import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, ListView, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
+import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -70,111 +70,10 @@ export var Default = function Default(_ref) {
     }, "Children render here."))))
   );
 };
-export var InnerPanel = function InnerPanel(_ref2) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+export var CustomWidth = function CustomWidth() {
   var _useOverlayPanelState2 = useOverlayPanelState(),
     state = _useOverlayPanelState2.state,
     onClose = _useOverlayPanelState2.onClose;
-  var _useOverlayPanelState3 = useOverlayPanelState(),
-    innerState = _useOverlayPanelState3.state,
-    onCloseInner = _useOverlayPanelState3.onClose;
-  var outerTriggerRef = useRef();
-  var innerTriggerRef = useRef();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    messagesOpen = _useState2[0],
-    setMessagesOpen = _useState2[1];
-  var toggleMessagesOpen = function toggleMessagesOpen() {
-    setMessagesOpen(!messagesOpen);
-  };
-  var closeOuterPanel = function closeOuterPanel() {
-    if (innerState.isOpen) {
-      innerState.close();
-    }
-    onClose(state, outerTriggerRef);
-  };
-  var closeInnerPanel = function closeInnerPanel() {
-    onCloseInner(innerState, innerTriggerRef);
-  };
-  var inner = innerState.isOpen && ___EmotionJSX(OverlayPanel, _extends({
-    variant: "overlayPanel.innerPanel" // applies higher z-index
-    ,
-    isOpen: innerState.isOpen
-  }, args, {
-    state: innerState,
-    triggerRef: innerTriggerRef
-  }), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
-    onPress: closeInnerPanel
-  }, "Close Inner Panel"), ___EmotionJSX(Text, {
-    pt: "md"
-  }, "Children render here.")));
-  var items = [{
-    id: 1,
-    name: 'Form 1'
-  }, {
-    id: 2,
-    name: 'Form 2'
-  }];
-  var outer =
-  // should have higher z-index applied
-  (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, _extends({
-    isOpen: state.isOpen,
-    isTransitioning: state.isTransitioning,
-    sx: {
-      p: '0px'
-    }
-  }, args, {
-    state: state,
-    triggerRef: outerTriggerRef
-  }), ___EmotionJSX(Box, {
-    sx: {
-      p: '12px'
-    }
-  }, ___EmotionJSX(Button, {
-    onPress: closeOuterPanel,
-    "aria-expanded": state.isOpen
-  }, "Close Panel"), ___EmotionJSX(Text, {
-    pt: "md",
-    mb: "24px"
-  }, "Children render here."), ___EmotionJSX(ListView, {
-    items: items
-  }, function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.id
-    }, ___EmotionJSX(Text, {
-      variant: "itemTitle",
-      alignSelf: "center",
-      mr: "auto"
-    }, item.name));
-  }), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
-    onPress: toggleMessagesOpen
-  }, "Toggle Messages"), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
-    ref: innerTriggerRef,
-    onPress: innerState.open,
-    "aria-expanded": innerState.isOpen
-  }, "Open Inner Panel"), inner));
-  return (
-    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when an overlay opens.
-    ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
-      ref: outerTriggerRef,
-      onPress: state.open,
-      "aria-expanded": state.isOpen
-    }, "Open Panel"), outer), messagesOpen && ___EmotionJSX(Messages, {
-      sx: {
-        zIndex: 11
-      },
-      onClose: toggleMessagesOpen
-    }, ___EmotionJSX(Item, {
-      key: "message2",
-      status: "success"
-    }, "Z Index higher than inner pannel")))
-  );
-};
-export var CustomWidth = function CustomWidth() {
-  var _useOverlayPanelState4 = useOverlayPanelState(),
-    state = _useOverlayPanelState4.state,
-    onClose = _useOverlayPanelState4.onClose;
   var triggerRef = useRef();
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
@@ -202,14 +101,14 @@ export var CustomWidth = function CustomWidth() {
   );
 };
 export var Expandable = function Expandable() {
-  var _useOverlayPanelState5 = useOverlayPanelState(),
-    state = _useOverlayPanelState5.state,
-    onClose = _useOverlayPanelState5.onClose;
+  var _useOverlayPanelState3 = useOverlayPanelState(),
+    state = _useOverlayPanelState3.state,
+    onClose = _useOverlayPanelState3.onClose;
   var triggerRef = useRef();
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isExpanded = _useState4[0],
-    setIsExpanded = _useState4[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
   var sx = {
     overlayPanel: {
       padding: 0,
@@ -285,13 +184,13 @@ export var Expandable = function Expandable() {
   var onCloseHandler = function onCloseHandler() {
     return onClose(state, triggerRef);
   };
-  var _useState5 = useState('#EACE91'),
-    _useState6 = _slicedToArray(_useState5, 2),
-    color = _useState6[0],
-    setColor = _useState6[1];
-  var handleColorChange = useCallback(function (_ref3) {
+  var _useState3 = useState('#EACE91'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    color = _useState4[0],
+    setColor = _useState4[1];
+  var handleColorChange = useCallback(function (_ref2) {
     var _context, _context2, _context3;
-    var rgb = _ref3.rgb;
+    var rgb = _ref2.rgb;
     var r = rgb.r,
       b = rgb.b,
       g = rgb.g,

package/lib/components/PasswordField/PasswordField.js

@@ -15,7 +15,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
 import { useOverlayPosition } from 'react-aria';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
@@ -25,8 +24,9 @@ import PropTypes from 'prop-types';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label, PopoverContainer, RequirementsList } from '../..';
 import * as hooks from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
+import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE = {
   HIDE: 'hide password',
@@ -163,7 +163,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     requirements: requirements
   }, requirementsListProps))));
 });
-PasswordField.propTypes = _objectSpread(_objectSpread({
+PasswordField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
   /** Whether or not the password is visible. */
@@ -218,8 +218,6 @@ PasswordField.propTypes = _objectSpread(_objectSpread({
     /** The given node will be inserted into the field container. */
     inContainer: PropTypes.node
   }),
-  /** Determines the input status indicator and helper text styling. */
-  status: PropTypes.oneOf(_Object$values(statuses)),
   /** Determines the type of input to use. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
   type: PropTypes.string,
   /** @ignore Prop that allows testing of the icon button. */
@@ -227,21 +225,19 @@ PasswordField.propTypes = _objectSpread(_objectSpread({
   /** @ignore Prop that allows testing of the icon button. */
   viewIconTestId: PropTypes.string,
   /** Array of Requirements and their status. */
-  requirements: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    status: PropTypes.oneOf(['default', 'success', 'warning', 'error'])
-  })),
+  requirements: PropTypes.arrayOf(PropTypes.shape(_objectSpread({
+    name: PropTypes.string.isRequired
+  }, statusPropTypes))),
   /** Props object that is spread to the requirements list. */
   requirementsListProps: PropTypes.shape({})
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
-PasswordField.defaultProps = {
+}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+PasswordField.defaultProps = _objectSpread({
   hasAutoFocus: false,
   isDisabled: false,
   isReadOnly: false,
   isRequired: false,
   requirements: [],
-  status: statuses.DEFAULT,
   type: 'password'
-};
+}, statusDefaultProp);
 PasswordField.displayName = 'PasswordField';
 export default PasswordField;

package/lib/components/PasswordField/PasswordField.stories.js

@@ -15,8 +15,9 @@ import React, { useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import { PasswordField } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
+import { statusArgTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/PasswordField',
@@ -28,20 +29,13 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
-    status: {
-      control: {
-        type: 'select',
-        options: statuses
-      },
-      defaultValue: statuses.DEFAULT
-    },
+  argTypes: _objectSpread(_objectSpread(_objectSpread({
     helperText: {
       control: {
         type: 'text'
       }
     }
-  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(PasswordField, _extends({

package/lib/components/RadioField/RadioField.js

@@ -8,15 +8,14 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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) { _defineProperty(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; }
 import React, { createContext, forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { useRadio } from 'react-aria';
 import PropTypes from 'prop-types';
 import { useField, usePropWarning } from '../../hooks';
-import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
+import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import Box from '../Box';
 import FieldHelperText from '../FieldHelperText';
 import Label from '../Label';
@@ -83,7 +82,7 @@ var RadioField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.radio.checkedContent"
   }, checkedContent));
 });
-RadioField.propTypes = _objectSpread({
+RadioField.propTypes = _objectSpread(_objectSpread({
   /** Content to display when the radio is checked. */
   checkedContent: PropTypes.node,
   /** The rendered label for the field. */
@@ -105,8 +104,6 @@ RadioField.propTypes = _objectSpread({
   isReadOnly: PropTypes.bool,
   /** Whether the Radio is required. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required). */
   isRequired: PropTypes.bool,
-  /** Determines the textarea status indicator and helper text styling. */
-  status: PropTypes.oneOf(_Object$values(statuses)),
   /** The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */
   value: PropTypes.string,
   /** Handler that is called when the element receives focus. */
@@ -130,6 +127,6 @@ RadioField.propTypes = _objectSpread({
    * object.
   */
   'aria-details': PropTypes.string
-}, ariaAttributesBasePropTypes);
+}, statusPropTypes), ariaAttributesBasePropTypes);
 RadioField.displayName = 'RadioField';
 export default RadioField;

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -8,7 +8,6 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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) { _defineProperty(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; }
 import React, { forwardRef, useMemo } from 'react';
@@ -19,9 +18,9 @@ import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Label } from '../..';
 import { usePropWarning, useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
-import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
+import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { RadioContext } from '../RadioField';
 
 /**
@@ -83,7 +82,7 @@ var RadioGroupField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-RadioGroupField.propTypes = _objectSpread(_objectSpread({
+RadioGroupField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** The name of the RadioGroupField, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons). */
   name: PropTypes.string,
   /** The current value (controlled). */
@@ -96,8 +95,6 @@ RadioGroupField.propTypes = _objectSpread(_objectSpread({
   hintText: PropTypes.string,
   /** Determines the arrangement of the radios. */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  /** Determines the helper text styling. */
-  status: PropTypes.oneOf(_Object$values(statuses)),
   /**
    * Handler that is called when the value changes.
    *
@@ -115,6 +112,6 @@ RadioGroupField.propTypes = _objectSpread(_objectSpread({
   label: PropTypes.node,
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 RadioGroupField.displayName = 'RadioGroupField';
 export default RadioGroupField;

package/lib/components/RadioGroupField/RadioGroupField.stories.js

@@ -12,13 +12,13 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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) { _defineProperty(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; }
 import React, { useState } from 'react';
 import { RadioField, RadioGroupField } from '../../index';
-import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import { statusArgTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/RadioGroupField',
   component: RadioGroupField,
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -35,13 +35,6 @@ export default {
         type: 'text'
       }
     },
-    status: {
-      control: {
-        type: 'select',
-        options: statuses
-      },
-      defaultValue: statuses.DEFAULT
-    },
     defaultValue: {
       defaultValue: 'A'
     },
@@ -55,7 +48,7 @@ export default {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes)
+  }, statusArgTypes), ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(RadioGroupField, args, ___EmotionJSX(RadioField, {

package/lib/components/RequirementsList/RequirementsList.js

@@ -1,13 +1,25 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["requirements"];
+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) { _defineProperty(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; }
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import React, { forwardRef } from 'react';
 import ErrorCircle from 'mdi-react/AlertCircleIcon';
 import WarningCircle from 'mdi-react/AlertCircleOutlineIcon';
 import DefaultCircle from 'mdi-react/CheckboxBlankCircleOutlineIcon';
 import SuccessCircle from 'mdi-react/CheckCircleIcon';
 import PropTypes from 'prop-types';
+import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import Box from '../Box';
 import Icon from '../Icon';
 import Text from '../Text';
@@ -82,10 +94,9 @@ RequirementsList.propTypes = {
   /**
    * Requirements and their status.
    */
-  requirements: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    status: PropTypes.oneOf(['default', 'success', 'warning', 'error'])
-  }))
+  requirements: PropTypes.arrayOf(PropTypes.shape(_objectSpread({
+    name: PropTypes.string.isRequired
+  }, statusPropTypes)))
 };
 RequirementsList.defaultProps = {
   requirements: []

package/lib/components/SearchField/SearchField.js

@@ -18,8 +18,8 @@ import SearchIcon from 'mdi-react/SearchIcon';
 import PropTypes from 'prop-types';
 import { Box, Icon, IconButton, Input, Label } from '../..';
 import { useField, usePropWarning } from '../../hooks';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 
 /**
  * Renders a search field with associated controls including visual elements and keyboard

package/lib/components/SearchField/SearchField.stories.js

@@ -16,8 +16,8 @@ import Users from 'mdi-react/AccountGroupIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
 import { useDebounce } from '../../hooks';
 import { Box, SearchField, Text } from '../../index';
-import { ariaAttributeBaseArgTypes, ariaAttributeBaseDocSettings } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
+import { ariaAttributeBaseArgTypes, ariaAttributeBaseDocSettings } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/SearchField',

package/lib/components/SelectField/SelectField.js

@@ -9,15 +9,14 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 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) { _defineProperty(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; }
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { usePropWarning, useSelectField } from '../../hooks';
-import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
+import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import SelectFieldBase from '../SelectFieldBase';
 
 /**
@@ -37,7 +36,7 @@ var SelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-invalid": status === 'error' && true
   }));
 });
-SelectField.propTypes = _objectSpread(_objectSpread({
+SelectField.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. */
@@ -85,8 +84,6 @@ SelectField.propTypes = _objectSpread(_objectSpread({
   selectedKey: PropTypes.string,
   /** Determines the textarea status indicator and helper text styling. Eg. float. */
   labelMode: PropTypes.string,
-  /** Determines the type of label applied to the component. */
-  status: PropTypes.oneOf(_Object$values(statuses)),
   /**
    * Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.
    *
@@ -117,15 +114,14 @@ SelectField.propTypes = _objectSpread(_objectSpread({
   scrollBoxProps: PropTypes.shape({
     maxHeight: PropTypes.string
   })
-}, ariaAttributesBasePropTypes);
-SelectField.defaultProps = {
+}, statusPropTypes), ariaAttributesBasePropTypes);
+SelectField.defaultProps = _objectSpread({
   placeholder: 'Select',
-  status: statuses.DEFAULT,
   align: 'start',
   direction: 'bottom',
   scrollBoxProps: {
     maxHeight: '300px'
   }
-};
+}, statusDefaultProp);
 SelectField.displayName = 'SelectField';
 export default SelectField;