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

package/lib/components/CheckboxField/CheckboxField.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, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
@@ -18,9 +19,9 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Checkbox, FieldHelperText, 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';
 
 /**
  * Combines a checkbox, label, and helper text for a complete, form-ready solution.
@@ -86,7 +87,7 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-CheckboxField.propTypes = _objectSpread(_objectSpread(_objectSpread({
+CheckboxField.propTypes = _objectSpread(_objectSpread({
   /** Whether the element should receive focus on render. */
   hasAutoFocus: PropTypes.bool,
   /** Text rendered below the input. */
@@ -114,6 +115,8 @@ CheckboxField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   label: PropTypes.node,
   /** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
   name: PropTypes.string,
+  /** 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's selection state changes. */
@@ -128,6 +131,6 @@ CheckboxField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   onKeyDown: PropTypes.func,
   /** Handler that is called when a key is released. */
   onKeyUp: PropTypes.func
-}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 CheckboxField.displayName = 'CheckboxField';
 export default CheckboxField;

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

@@ -8,15 +8,16 @@ 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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _everyInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/every";
 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, { useEffect, useState } from 'react';
 import { Box, CheckboxField, Link, Text } 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/CheckboxField',
@@ -28,7 +29,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -45,6 +46,13 @@ export default {
         type: 'text'
       }
     },
+    status: {
+      control: {
+        type: 'select',
+        options: _Object$values(statuses)
+      },
+      defaultValue: statuses.DEFAULT
+    },
     name: {},
     id: {
       control: {
@@ -59,7 +67,7 @@ export default {
     isIndeterminate: {},
     isDefaultSelected: {},
     isSelected: {}
-  }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(CheckboxField, args);

package/lib/components/ColorField/ColorField.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 _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+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 _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';
@@ -20,9 +21,9 @@ import { useColorFieldState } from '@react-stately/color';
 import PropTypes from 'prop-types';
 import { Box, Button, FieldHelperText, Input, Label } from '../..';
 import useField from '../../hooks/useField';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } 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, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import PopoverContainer from '../PopoverContainer';
 
 /**
@@ -127,7 +128,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange: handleColorChange
   }))));
 });
-ColorField.propTypes = _objectSpread(_objectSpread(_objectSpread({
+ColorField.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. */
@@ -141,11 +142,13 @@ ColorField.propTypes = _objectSpread(_objectSpread(_objectSpread({
    * (color, event) => void;
    */
   onChange: PropTypes.func,
+  /** Determines the helper text styling. */
+  status: PropTypes.oneOf(_Object$values(statuses)),
   /** 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);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 ColorField.defaultProps = {
   align: 'middle',
   direction: 'bottom'

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

@@ -14,9 +14,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useState } from 'react';
 import { ColorField, 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/ColorField',
@@ -28,7 +28,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     value: {
       control: {
         type: 'text'
@@ -45,6 +45,13 @@ export default {
         type: 'text'
       }
     },
+    status: {
+      control: {
+        type: 'select',
+        options: statuses
+      },
+      defaultValue: statuses.DEFAULT
+    },
     buttonProps: {
       control: {
         type: 'none'
@@ -61,7 +68,7 @@ export default {
         type: 'none'
       }
     }
-  }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   var _useState = useState('rgba(127, 0, 127, 1)'),

package/lib/components/ComboBox/ComboBoxInput.js

@@ -23,8 +23,8 @@ import PropTypes from 'prop-types';
 import { Box, Button, Icon, Loader, TextField } from '../..';
 import { usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
-import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
   var controlProps = props.controlProps,
@@ -144,7 +144,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }))));
 });
-ComboBoxInput.propTypes = _objectSpread(_objectSpread({
+ComboBoxInput.propTypes = _objectSpread({
   containerProps: PropTypes.shape({}),
   controlProps: PropTypes.shape({}),
   hasAutoFocus: PropTypes.bool,
@@ -165,9 +165,10 @@ ComboBoxInput.propTypes = _objectSpread(_objectSpread({
   onLoadMore: PropTypes.func,
   onOpenChange: PropTypes.func,
   onSelectionChange: PropTypes.func,
+  status: PropTypes.oneOf(_Object$values(statuses)),
   style: PropTypes.shape({}),
   triggerProps: PropTypes.shape({}),
   triggerRef: PropTypes.shape({}),
   wrapperProps: PropTypes.shape({})
-}, statusPropTypes), ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes);
 export default ComboBoxInput;

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -25,9 +25,8 @@ import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import PropTypes from 'prop-types';
 import { usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import ComboBoxInput from '../ComboBox';
 import ListBox from '../ListBox';
 import PopoverContainer from '../PopoverContainer';
@@ -220,7 +219,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-invalid": status === 'error' && true
   })), listBox);
 });
-ComboBoxField.propTypes = _objectSpread(_objectSpread({
+ComboBoxField.propTypes = _objectSpread({
   /* Whether or not adding new options to the list is enabled. */
   hasAddOption: PropTypes.bool,
   /** Whether the ComboBox allows a non-item matching input value to be set. */
@@ -243,6 +242,8 @@ ComboBoxField.propTypes = _objectSpread(_objectSpread({
   direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
   /** Text rendered below the input. */
   helperText: PropTypes.node,
+  /** Determines the input status indicator and helper text styling. */
+  status: PropTypes.oneOf(['default', 'success', 'warning', 'error']),
   /** The initial selected key in the collection (uncontrolled). */
   defaultSelectedKey: PropTypes.string,
   /** The currently selected key in the collection (controlled). */
@@ -338,7 +339,7 @@ ComboBoxField.propTypes = _objectSpread(_objectSpread({
   controlProps: PropTypes.shape({
     onClick: PropTypes.func
   })
-}, statusPropTypes), ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes);
 ComboBoxField.defaultProps = {
   menuTrigger: 'focus',
   direction: 'bottom',

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -31,7 +31,7 @@ import { useFilter } from '@react-aria/i18n';
 import { action } from '@storybook/addon-actions';
 import { ComboBoxField, Item, OverlayProvider, Section } from '../../index';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
-import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
   name: 'Aardvark',

package/lib/components/DataTable/DataTable.stories.js

@@ -35,7 +35,7 @@ import isChromatic from 'chromatic/isChromatic';
 import ApplicationIcon from 'mdi-react/ApplicationIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { DataTable, DataTableBadge, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableMenu, DataTableMultiLine, DataTableRow } from '../../index';
-import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import DataTableReadme from './DataTable.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/components/FieldHelperText/FieldHelperText.js

@@ -1,21 +1,12 @@
-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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "status", "id"];
-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 } from 'react';
 import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
-import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
+import statuses from '../../utils/devUtils/constants/statuses';
 import Text from '../Text';
 
 /**
@@ -42,10 +33,14 @@ var FieldHelperText = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames
   }));
 });
-FieldHelperText.propTypes = _objectSpread({
+FieldHelperText.propTypes = {
+  /** Determines the color of the field message. */
+  status: PropTypes.oneOf(_Object$values(statuses)),
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string
-}, statusPropTypes);
-FieldHelperText.defaultProps = _objectSpread({}, statusDefaultProp);
+};
+FieldHelperText.defaultProps = {
+  status: statuses.DEFAULT
+};
 FieldHelperText.displayName = 'FieldHelperText';
 export default FieldHelperText;

package/lib/components/FieldHelperText/FieldHelperText.stories.js

@@ -1,22 +1,19 @@
-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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-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 from 'react';
 import { FieldHelperText } from '../../index';
-import { statusArgTypes } from '../../utils/docUtils/statusProp';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/Base Components/FieldHelperText',
   component: FieldHelperText,
-  argTypes: _objectSpread({}, statusArgTypes)
+  argTypes: {
+    status: {
+      control: {
+        type: 'select',
+        options: statuses
+      },
+      defaultValue: statuses.DEFAULT
+    }
+  }
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(FieldHelperText, args, "Look at me!");

package/lib/components/FileInputField/FileInputField.js

@@ -16,6 +16,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _URL from "@babel/runtime-corejs3/core-js-stable/url";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+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, useRef, useState } from 'react';
@@ -27,9 +28,8 @@ import { Box, FieldHelperText, Input, Label, Loader } from '../..';
 import useField from '../../hooks/useField';
 import useStatusClasses from '../../hooks/useStatusClasses';
 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 FileItem from './FileItem';
 import FileSelect from './FileSelect';
 
@@ -192,11 +192,13 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, helperText));
 });
 FileInputField.displayName = 'FileInputField';
-FileInputField.propTypes = _objectSpread(_objectSpread(_objectSpread({
+FileInputField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
   /** Text rendered below the input. */
   helperText: PropTypes.node,
+  /** Determines the component border status color indicator and helper text styling. */
+  status: PropTypes.oneOf(_Object$values(statuses)),
   /** Default button text that will be changed on the file name once file is uploaded */
   defaultButtonText: PropTypes.string,
   /** Defines whether input can accept multiple files or not */
@@ -223,19 +225,21 @@ FileInputField.propTypes = _objectSpread(_objectSpread(_objectSpread({
    *
    * }
    * */
-  fileList: PropTypes.arrayOf(PropTypes.shape(_objectSpread({
+  fileList: PropTypes.arrayOf(PropTypes.shape({
     fileObj: PropTypes.shape({}),
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
-    downloadLink: PropTypes.string
-  }, statusPropTypes))),
+    downloadLink: PropTypes.string,
+    status: PropTypes.oneOf(_Object$values(statuses))
+  })),
   /** Default array of objects for uploaded files. */
-  defaultFileList: PropTypes.arrayOf(PropTypes.shape(_objectSpread({
+  defaultFileList: PropTypes.arrayOf(PropTypes.shape({
     fileObj: PropTypes.shape({}),
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
-    downloadLink: PropTypes.string
-  }, statusPropTypes))),
+    downloadLink: PropTypes.string,
+    status: PropTypes.oneOf(_Object$values(statuses))
+  })),
   /** The handler that is called when the input files is uploaded.
    *
    * `(event, files) => void`
@@ -248,8 +252,9 @@ FileInputField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   onRemove: PropTypes.func,
   /** These props will be spread to the field text component. */
   textProps: PropTypes.shape({})
-}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
-FileInputField.defaultProps = _objectSpread({
-  defaultButtonText: 'Select a file'
-}, statusDefaultProp);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+FileInputField.defaultProps = {
+  defaultButtonText: 'Select a file',
+  status: statuses.DEFAULT
+};
 export default FileInputField;

package/lib/components/FileInputField/FileInputField.stories.js

@@ -15,9 +15,8 @@ import React, { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { Box, FileInputField } 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/FileInputField',
@@ -29,7 +28,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -41,6 +40,13 @@ export default {
         type: 'text'
       }
     },
+    status: {
+      control: {
+        type: 'select',
+        options: statuses
+      },
+      defaultValue: statuses.DEFAULT
+    },
     defaultButtonText: {
       control: {
         type: 'text'
@@ -76,7 +82,7 @@ export default {
         type: 'none'
       }
     }
-  }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 var fitContentWidthSx = {
   width: 'fit-content'

package/lib/components/FileInputField/FileItem.js

@@ -1,15 +1,5 @@
-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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-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, { useCallback, useRef } from 'react';
 import { useVisuallyHidden } from 'react-aria';
 import DeleteIcon from 'mdi-react/DeleteIcon';
@@ -18,7 +8,6 @@ import InsertDriveFileIcon from 'mdi-react/InsertDriveFileIcon';
 import PropTypes from 'prop-types';
 import { Box, Button, Icon, IconButton, Text } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var FileItem = function FileItem(props) {
   var downloadLink = props.downloadLink,
@@ -96,12 +85,13 @@ var FileItem = function FileItem(props) {
   })));
 };
 export default FileItem;
-FileItem.propTypes = _objectSpread({
+FileItem.propTypes = {
   downloadLink: PropTypes.string,
   handleFileDelete: PropTypes.func,
   id: PropTypes.string,
   isDisabled: PropTypes.bool,
   name: PropTypes.string,
   helperTextId: PropTypes.string,
+  status: PropTypes.oneOf(_Object$values(statuses)),
   textProps: PropTypes.shape({})
-}, statusPropTypes);
+};

package/lib/components/FileInputField/FileSelect.js

@@ -15,7 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Text } from '../..';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var FileSelect = function FileSelect(_ref) {
   var buttonText = _ref.buttonText,

package/lib/components/Icon/NoticeIcon.js

@@ -1,26 +1,17 @@
-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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["status"];
 var _noticeIcons;
-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 from 'react';
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
 import AlertIcon from 'mdi-react/AlertIcon';
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
 import InformationIcon from 'mdi-react/InformationIcon';
+import PropTypes from 'prop-types';
 import { Icon } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var noticeIcons = (_noticeIcons = {}, _defineProperty(_noticeIcons, statuses.DEFAULT, {
   icon: InformationIcon,
@@ -44,4 +35,6 @@ export var NoticeIcon = function NoticeIcon(_ref) {
     icon: noticeIcons[status].icon
   }, others));
 };
-NoticeIcon.propTypes = _objectSpread({}, statusPropTypes);
+NoticeIcon.propTypes = {
+  status: PropTypes.oneOf(_Object$values(statuses))
+};

package/lib/components/ImageUploadField/ImageUploadField.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 _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, useCallback, useImperativeHandle, useRef } from 'react';
@@ -16,9 +17,9 @@ import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Item, Menu } from '../..';
 import { useImageUploadState } from '../../hooks/useImageUploadState';
-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';
 import ImagePreviewButton from './ImagePreviewButton';
 import ImageUploadFieldBase from './ImageUploadFieldBase';
 
@@ -93,7 +94,7 @@ var ImageUploadField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: statusId
   }, state.isMenuOpen && 'Menu pop up expanded'));
 });
-ImageUploadField.propTypes = _objectSpread(_objectSpread(_objectSpread({
+ImageUploadField.propTypes = _objectSpread(_objectSpread({
   /** Image preview (controlled), used to represent the current image state. */
   previewImage: PropTypes.string,
   /** Text that renders in the upload menu item. */
@@ -126,8 +127,10 @@ ImageUploadField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** Define component height */
   previewHeight: PropTypes.number,
   /** Define component height */
-  previewWidth: PropTypes.number
-}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+  previewWidth: PropTypes.number,
+  /** Determines the helper text styling. */
+  status: PropTypes.oneOf(_Object$values(statuses))
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 ImageUploadField.defaultProps = {
   fileTypes: ['image'],
   loaderSize: 10,