@pingux/astro 2.2.0-alpha.4 → 2.2.0-alpha.6

package/lib/components/ImageUploadField/ImageUploadField.stories.js

@@ -23,9 +23,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useRef, useState } from 'react';
 import { Image, ImageUploadField, OverlayProvider } from '../../index';
-import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusArgTypes } from '../../utils/docUtils/statusProp';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/ImageUploadField',
@@ -37,7 +37,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     previewImage: {
       control: {
         type: 'text'
@@ -86,8 +86,15 @@ export default {
         type: 'number'
       },
       defaultValue: 50
+    },
+    status: {
+      control: {
+        type: 'select',
+        options: statuses
+      },
+      defaultValue: statuses.DEFAULT
     }
-  }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return (

package/lib/components/ImageUploadField/ImageUploadFieldBase.js

@@ -8,6 +8,7 @@ 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, { forwardRef, useMemo, useRef } from 'react';
@@ -17,7 +18,6 @@ import PropTypes from 'prop-types';
 import { Box, FieldHelperText, Input, Label, PopoverMenu } from '../..';
 import useField from '../../hooks/useField';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ImageUploadFieldBase = /*#__PURE__*/forwardRef(function (props, inputRef) {
   var children = props.children,
@@ -66,7 +66,7 @@ var ImageUploadFieldBase = /*#__PURE__*/forwardRef(function (props, inputRef) {
     status: status
   }, helperText));
 });
-ImageUploadFieldBase.propTypes = _objectSpread({
+ImageUploadFieldBase.propTypes = {
   fileName: PropTypes.string,
   fileTypes: PropTypes.arrayOf(PropTypes.oneOf(['application', 'audio', 'example', 'application', 'image', 'model', 'text', 'video'])),
   handleInputChange: PropTypes.func,
@@ -74,7 +74,8 @@ ImageUploadFieldBase.propTypes = _objectSpread({
   handleOpenMenuChange: PropTypes.func,
   helperText: PropTypes.node,
   isImageType: PropTypes.bool,
-  isMenuOpen: PropTypes.bool
-}, statusPropTypes);
+  isMenuOpen: PropTypes.bool,
+  status: PropTypes.oneOf(_Object$values(statuses))
+};
 ImageUploadFieldBase.displayName = 'ImageUploadFieldBase';
 export default ImageUploadFieldBase;

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -9,6 +9,7 @@ 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';
@@ -19,9 +20,8 @@ import { v4 as uuid } from 'uuid';
 import { Box, Button, Icon, Loader, Text } from '../..';
 import { usePropWarning, useSelectField } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import SelectFieldBase from '../SelectFieldBase';
 
 /**
@@ -86,7 +86,7 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     trigger: trigger
   }));
 });
-LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
+LinkSelectField.propTypes = _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. */
@@ -130,6 +130,8 @@ LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   placeholder: PropTypes.string,
   /** The currently selected key in the collection (controlled). */
   selectedKey: 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.
    *
@@ -148,11 +150,12 @@ LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
    * (key: Key) => any
    */
   onSelectionChange: PropTypes.func
-}, statusPropTypes), inputFieldAttributesBasePropTypes), ariaAttributesBasePropTypes);
-LinkSelectField.defaultProps = _objectSpread({
+}, inputFieldAttributesBasePropTypes), ariaAttributesBasePropTypes);
+LinkSelectField.defaultProps = {
   placeholder: 'Select',
+  status: statuses.DEFAULT,
   align: 'start',
   direction: 'bottom'
-}, statusDefaultProp);
+};
 LinkSelectField.displayName = 'LinkSelectField';
 export default LinkSelectField;

package/lib/components/LinkSelectField/LinkSelectField.stories.js

@@ -29,9 +29,9 @@ import React, { useState } from 'react';
 import { OverlayProvider } from 'react-aria';
 import { useAsyncList } from 'react-stately';
 import { Box, Item, LinkSelectField, Separator } from '../../index';
-import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusArgTypes } from '../../utils/docUtils/statusProp';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/LinkSelectField',
@@ -43,7 +43,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -62,6 +62,13 @@ export default {
         type: 'text'
       }
     },
+    status: {
+      control: {
+        type: 'select',
+        options: statuses
+      },
+      defaultValue: statuses.DEFAULT
+    },
     defaultSelectedKey: {},
     disabledKeys: {},
     name: {},
@@ -77,7 +84,7 @@ export default {
         type: 'none'
       }
     }
-  }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(LinkSelectField, _extends({}, args, {

package/lib/components/ListItem/ListItem.js

@@ -16,7 +16,7 @@ import React, { forwardRef } from 'react';
 import { useHover } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
-import { onHoverPropTypes } from '../../utils/docUtils/hoverProps';
+import { onHoverPropTypes } from '../../utils/devUtils/props/hoverProps';
 import Box from '../Box/Box';
 
 /**

package/lib/components/ListItem/ListItem.stories.js

@@ -15,7 +15,7 @@ import React, { useState } from 'react';
 import AccountIcon from 'mdi-react/AccountIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import { Box, Icon, IconButton, ListItem, Separator, Text } from '../../index';
-import { onHoverArgTypes } from '../../utils/docUtils/hoverProps';
+import { onHoverArgTypes } from '../../utils/devUtils/props/hoverProps';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/ListItem',

package/lib/components/Menu/Menu.js

@@ -23,7 +23,7 @@ import PropTypes from 'prop-types';
 import { MenuContext } from '../../context/MenuContext';
 import { usePropWarning } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
-import { onHoverPropTypes } from '../../utils/docUtils/hoverProps';
+import { onHoverPropTypes } from '../../utils/devUtils/props/hoverProps';
 import Box from '../Box';
 import MenuItem from '../MenuItem';
 

package/lib/components/Menu/Menu.stories.js

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import { Item } from 'react-stately';
 import { Menu, Text } from '../../index';
-import { onHoverArgTypes } from '../../utils/docUtils/hoverProps';
+import { onHoverArgTypes } from '../../utils/devUtils/props/hoverProps';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Menu',

package/lib/components/Messages/Message.js

@@ -1,24 +1,15 @@
-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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 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 = ["color"];
-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 _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import CloseIcon from 'mdi-react/CloseIcon';
 import PropTypes from 'prop-types';
 import { Box, Icon, IconButton, Text } from '../..';
 import useStatusClasses from '../../hooks/useStatusClasses';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { NoticeIcon } from '../Icon/NoticeIcon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ARIA_STATUSES = {
@@ -135,6 +126,8 @@ Message.propTypes = {
     key: PropTypes.string,
     props: PropTypes.shape({
       children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+      /* status changes the background, text, and button color accordingly */
+      status: PropTypes.oneOf(_Object$values(statuses)),
       /* Background color */
       bg: PropTypes.string,
       /* Text color */
@@ -143,8 +136,7 @@ Message.propTypes = {
       icon: PropTypes.elementType,
       /* Hides the message with an animated transition */
       isHidden: PropTypes.bool,
-      'data-id': PropTypes.string,
-      status: _objectSpread({}, statusPropTypes).status
+      'data-id': PropTypes.string
     })
   }),
   /* Callback for clicking the message's close button */

package/lib/components/Messages/Messages.js

@@ -1,23 +1,13 @@
-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 = ["items", "onClose"];
-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 _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-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 _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef } from 'react';
 import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
+import statuses from '../../utils/devUtils/constants/statuses';
 import Box from '../Box';
 import Message from './Message';
 
@@ -45,11 +35,12 @@ var Messages = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 Messages.propTypes = {
   /* For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections). */
-  items: PropTypes.arrayOf(PropTypes.shape(_objectSpread({
+  items: PropTypes.arrayOf(PropTypes.shape({
     key: PropTypes.string,
     text: PropTypes.string,
+    status: PropTypes.oneOf(_Object$values(statuses)),
     node: PropTypes.node
-  }, statusPropTypes))),
+  })),
   /* Callback for clicking the message's close button */
   onClose: PropTypes.func
 };

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -19,6 +19,7 @@ import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { DismissButton, FocusScope, useOverlayPosition } from 'react-aria';
 import { useFilter } from '@react-aria/i18n';
@@ -28,10 +29,10 @@ import Clear from 'mdi-react/CloseIcon';
 import PropTypes from 'prop-types';
 import { Badge, Box, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import { usePropWarning } from '../../hooks';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import ListBox from '../ListBox';
 
 /**
@@ -421,7 +422,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     style: style
   }, listbox));
 });
-MultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
+MultivaluesField.propTypes = _objectSpread(_objectSpread({
   /** The initial selected keys in the collection (uncontrolled). */
   defaultSelectedKeys: isIterableProp,
   /** Where the menu opens relative to its trigger. */
@@ -516,14 +517,17 @@ MultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** @ignore */
   scrollBoxProps: PropTypes.shape({
     maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.number])
-  })
-}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
-MultivaluesField.defaultProps = _objectSpread({
+  }),
+  /** Determines the input status indicator and helper text styling. */
+  status: PropTypes.oneOf(_Object$values(statuses))
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+MultivaluesField.defaultProps = {
   direction: 'bottom',
   isReadOnly: false,
   mode: 'restrictive',
   scrollBoxProps: {
     maxHeight: 300
-  }
-}, statusDefaultProp);
+  },
+  status: statuses.DEFAULT
+};
 export default MultivaluesField;

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -13,14 +13,14 @@ 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 { Box, Icon, Item, MultivaluesField, OverlayProvider } from '../../index';
-import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusArgTypes } from '../../utils/docUtils/statusProp';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/MultivaluesField',
   component: MultivaluesField,
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     direction: {
       defaultValue: 'bottom'
     },
@@ -55,12 +55,19 @@ export default {
         type: 'none'
       }
     },
+    status: {
+      control: {
+        type: 'select',
+        options: statuses
+      },
+      defaultValue: statuses.DEFAULT
+    },
     helperText: {
       control: {
         type: 'text'
       }
     }
-  }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
   parameters: {
     docs: {
       source: {

package/lib/components/NumberField/NumberField.js

@@ -9,6 +9,7 @@ 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';
@@ -22,9 +23,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 { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 
 /**
  * Number fields allow users to enter a number, and increment or
@@ -141,7 +142,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, helperText)));
 });
 export default NumberField;
-NumberField.propTypes = _objectSpread(_objectSpread(_objectSpread({
+NumberField.propTypes = _objectSpread(_objectSpread({
   /** A custom aria-label for the decrement button.
    * If not provided, the localized string "Decrement" is used. */
   decrementAriaLabel: PropTypes.string,
@@ -198,8 +199,10 @@ NumberField.propTypes = _objectSpread(_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
-}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+}, 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 { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusArgTypes } from '../../utils/docUtils/statusProp';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/NumberField',
@@ -26,7 +26,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -43,6 +43,13 @@ export default {
         type: 'text'
       }
     },
+    status: {
+      control: {
+        type: 'select',
+        options: statuses
+      },
+      defaultValue: statuses.DEFAULT
+    },
     value: {
       control: {
         type: 'none'
@@ -92,7 +99,7 @@ export default {
         type: 'none'
       }
     }
-  }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(NumberField, args);

package/lib/components/PasswordField/PasswordField.js

@@ -15,6 +15,7 @@ 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';
@@ -24,9 +25,8 @@ 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/docUtils/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 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(_objectSpread({
+PasswordField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
   /** Whether or not the password is visible. */
@@ -218,6 +218,8 @@ PasswordField.propTypes = _objectSpread(_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. */
@@ -225,19 +227,21 @@ PasswordField.propTypes = _objectSpread(_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(_objectSpread({
-    name: PropTypes.string.isRequired
-  }, statusPropTypes))),
+  requirements: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    status: PropTypes.oneOf(['default', 'success', 'warning', 'error'])
+  })),
   /** Props object that is spread to the requirements list. */
   requirementsListProps: PropTypes.shape({})
-}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
-PasswordField.defaultProps = _objectSpread({
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+PasswordField.defaultProps = {
   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,9 +15,8 @@ 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/docUtils/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusArgTypes } from '../../utils/docUtils/statusProp';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/PasswordField',
@@ -29,13 +28,20 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread({
+    status: {
+      control: {
+        type: 'select',
+        options: statuses
+      },
+      defaultValue: statuses.DEFAULT
+    },
     helperText: {
       control: {
         type: 'text'
       }
     }
-  }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(PasswordField, _extends({