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

package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -1,29 +1,6 @@
-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 _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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-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 _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
-import React, { useMemo, useRef, useState } from 'react';
-import AccountGroupIcon from 'mdi-react/AccountGroupIcon';
-import AccountIcon from 'mdi-react/AccountIcon';
-import CheckIcon from 'mdi-react/CheckIcon';
-import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
-import Clear from 'mdi-react/CloseIcon';
-import SearchIcon from 'mdi-react/SearchIcon';
+import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { useOverlayPanelState } from '../../hooks';
-import { Badge, Box, Breadcrumbs, Button, CheckboxField, CollapsiblePanel, CollapsiblePanelItem, Icon, IconButton, Item, ListView, OverlayPanel, OverlayProvider, SearchField, Text } from '../../index';
+import { CollapsiblePanel } from '../../index';
 import CollapsiblePanelReadme from './CollapsiblePanel.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -60,282 +37,6 @@ export default {
     }
   }
 };
-var data = [{
-  id: '1',
-  icon: 'Group',
-  key: 'Avengers',
-  name: 'Avengers',
-  subtitle: 'Default',
-  badgeValue: '25',
-  isDefaultSelected: true
-}, {
-  id: '2',
-  icon: 'Group',
-  key: 'Credit Cards',
-  name: 'Credit Cards',
-  subtitle: '',
-  badgeValue: '123'
-}, {
-  id: '3',
-  icon: 'Group',
-  key: 'Debit Cards',
-  name: 'Debit Cards',
-  subtitle: '',
-  badgeValue: '23'
-}, {
-  id: '4',
-  icon: 'Group',
-  key: 'Digital Investors',
-  name: 'Digital Investors',
-  subtitle: 'N America',
-  badgeValue: '12',
-  isDefaultSelected: true
-}, {
-  id: '5',
-  icon: 'Group',
-  key: 'Mortgages',
-  name: 'Mortgages',
-  subtitle: 'N America',
-  badgeValue: '112'
-}, {
-  id: '6',
-  icon: 'Group',
-  key: 'Person LOC',
-  name: 'Person LOC',
-  subtitle: '',
-  badgeValue: '45'
-}, {
-  id: '7',
-  icon: 'Group',
-  key: 'Production',
-  name: 'Production',
-  subtitle: '',
-  badgeValue: '55'
-}, {
-  id: '8',
-  icon: 'Group',
-  key: 'UX Team',
-  name: 'UX Team',
-  subtitle: '',
-  badgeValue: '61'
-}, {
-  id: '9',
-  icon: 'Group',
-  key: 'UI Team',
-  name: 'UI Team',
-  subtitle: '',
-  badgeValue: '29'
-}];
 export var Default = function Default(args) {
   return ___EmotionJSX(CollapsiblePanel, args);
-};
-export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
-  var _useState = useState(data),
-    _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
-    setItems = _useState2[1];
-  var _useOverlayPanelState = useOverlayPanelState(),
-    state = _useOverlayPanelState.state,
-    onClose = _useOverlayPanelState.onClose;
-  var triggerRef = useRef();
-  var selectedItems = useMemo(function () {
-    var _context;
-    return _sortInstanceProperty(_context = _filterInstanceProperty(items).call(items, function (item) {
-      return item.isDefaultSelected || item.isSelected;
-    })
-    // sort elements to display "default selected" at first place
-    ).call(_context, function (a, b) {
-      return Number(!!b.isDefaultSelected) - Number(!!a.isDefaultSelected);
-    });
-  }, [items]);
-  var changeSelection = function changeSelection(key) {
-    setItems(function (prevItems) {
-      return _mapInstanceProperty(prevItems).call(prevItems, function (el) {
-        if (el.key === key) {
-          return _objectSpread(_objectSpread({}, el), {}, {
-            isSelected: !el.isSelected
-          });
-        }
-        return el;
-      });
-    });
-  };
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
-    ref: triggerRef,
-    onPress: state.open
-  }, "Open Panel"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, {
-    isOpen: state.isOpen,
-    isTransitioning: state.isTransitioning,
-    size: "large",
-    p: "0"
-  }, ___EmotionJSX(Box, {
-    sx: {
-      minHeight: '60px'
-    },
-    bg: "accent.99"
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    flexBasis: "0px",
-    flexGrow: "1",
-    alignItems: "center",
-    pl: "md",
-    pr: "md",
-    justifyContent: "space-between",
-    zIndex: 2
-  }, ___EmotionJSX(Box, {
-    isRow: true
-  }, ___EmotionJSX(Icon, {
-    icon: AccountIcon,
-    alignSelf: "center",
-    mr: "md",
-    color: "accent.40",
-    size: 25,
-    flexShrink: 0,
-    display: "flex"
-  }), ___EmotionJSX(Breadcrumbs, {
-    icon: ChevronRightIcon
-  }, ___EmotionJSX(Item, {
-    "aria-label": "Ed Nepomuceno",
-    "data-id": "home",
-    href: "https://www.pingidentity.com",
-    key: "home",
-    variant: "buttons.link"
-  }, "Ed Nepomuceno"), ___EmotionJSX(Item, {
-    "aria-label": "edit groups",
-    "data-id": "editGroups",
-    href: "https://www.pingidentity.com",
-    key: "editGroups",
-    variant: "buttons.link"
-  }, "Edit Groups"))), ___EmotionJSX(Box, {
-    isRow: true
-  }, ___EmotionJSX(IconButton, {
-    "aria-label": "Close Panel",
-    onPress: function onPress() {
-      onClose(state, triggerRef);
-    }
-  }, ___EmotionJSX(Icon, {
-    icon: Clear,
-    size: "sm"
-  }))))), ___EmotionJSX(Box, {
-    pl: "md",
-    pt: "25px"
-  }, ___EmotionJSX(Box, {
-    isRow: true,
-    justifyContent: "space-between",
-    sx: {
-      marginTop: '5px'
-    }
-  }, ___EmotionJSX(Box, {
-    width: "100%"
-  }, ___EmotionJSX(SearchField, {
-    icon: SearchIcon,
-    "aria-label": "Search",
-    placeholder: "Search",
-    width: "100%",
-    mt: "0px",
-    mr: "sm",
-    mb: "xs"
-  }), ___EmotionJSX(ListView, {
-    items: items,
-    style: {
-      width: '100%',
-      outline: 'none'
-    }
-  }, function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.key,
-      textValue: item.name,
-      "data-id": item.key,
-      listItemProps: {
-        isRow: true,
-        sx: {
-          bg: 'white',
-          width: '100%',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          '&.is-hovered': {
-            bg: 'accent.99'
-          }
-        }
-      }
-    }, ___EmotionJSX(Box, {
-      isRow: true
-    }, ___EmotionJSX(Icon, {
-      icon: AccountGroupIcon,
-      alignSelf: "center",
-      mr: "md",
-      color: "accent.40",
-      size: 25,
-      flexShrink: 1
-    }), ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
-      isRow: true
-    }, ___EmotionJSX(Text, {
-      variant: "listTitle",
-      mb: "xs",
-      mr: "xs"
-    }, item.name), ___EmotionJSX(Badge, {
-      label: item.badgeValue,
-      bg: "accent.99",
-      textColor: "text.secondary",
-      sx: {
-        minWidth: 'max-content'
-      }
-    })), ___EmotionJSX(Text, {
-      variant: "listSubtitle"
-    }, item.subtitle))), item.isDefaultSelected ? ___EmotionJSX(Box, {
-      isRow: true,
-      sx: {
-        border: '1px solid',
-        borderColor: 'neutral.80',
-        borderRadius: 5,
-        minHeight: 22,
-        justifyContent: 'center',
-        alignItems: 'center',
-        p: 'xs',
-        maxWidth: '50%'
-      }
-    }, ___EmotionJSX(Icon, {
-      icon: CheckIcon,
-      color: "neutral.20",
-      size: 13,
-      sx: {
-        flexShrink: 0
-      }
-    }), ___EmotionJSX(Text, {
-      sx: {
-        fontSize: 'sm',
-        pl: 'xs',
-        maxHeight: 32,
-        overflow: 'hidden'
-      }
-    }, "Added by Filter")) : ___EmotionJSX(CheckboxField, {
-      controlProps: {
-        color: 'neutral.10',
-        'aria-label': 'Select'
-      },
-      onChange: function onChange() {
-        return changeSelection(item.key);
-      },
-      isSelected: _someInstanceProperty(selectedItems).call(selectedItems, function (el) {
-        return el.key === item.key;
-      })
-    }));
-  })), ___EmotionJSX(CollapsiblePanel, _extends({
-    items: selectedItems,
-    onSelectionChange: changeSelection,
-    selectedFilterCount: "1000+"
-  }, args), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.key,
-      textValue: item.name,
-      "data-id": item.key
-    }, ___EmotionJSX(CollapsiblePanelItem, {
-      text: item.name,
-      icon: item.isDefaultSelected ? CheckIcon : Clear,
-      onPress: function onPress() {
-        return changeSelection(item.key);
-      },
-      isDefaultSelected: item.isDefaultSelected
-    }));
-  })))));
 };

package/lib/components/ColorField/ColorField.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 _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';
@@ -21,9 +20,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 statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
+import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import PopoverContainer from '../PopoverContainer';
 
 /**
@@ -128,7 +127,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange: handleColorChange
   }))));
 });
-ColorField.propTypes = _objectSpread(_objectSpread({
+ColorField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: PropTypes.oneOf(['start', 'end', 'middle']),
   /** Where the popover menu opens relative to its trigger. */
@@ -142,13 +141,11 @@ ColorField.propTypes = _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({})
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+}, statusPropTypes), 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 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/ColorField',
@@ -28,7 +28,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread(_objectSpread({
     value: {
       control: {
         type: 'text'
@@ -45,13 +45,6 @@ export default {
         type: 'text'
       }
     },
-    status: {
-      control: {
-        type: 'select',
-        options: statuses
-      },
-      defaultValue: statuses.DEFAULT
-    },
     buttonProps: {
       control: {
         type: 'none'
@@ -68,7 +61,7 @@ export default {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, statusArgTypes), 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 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 { 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({
+ComboBoxInput.propTypes = _objectSpread(_objectSpread({
   containerProps: PropTypes.shape({}),
   controlProps: PropTypes.shape({}),
   hasAutoFocus: PropTypes.bool,
@@ -165,10 +165,9 @@ ComboBoxInput.propTypes = _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({})
-}, ariaAttributesBasePropTypes);
+}, statusPropTypes), ariaAttributesBasePropTypes);
 export default ComboBoxInput;

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -25,8 +25,9 @@ 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';
@@ -219,7 +220,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-invalid": status === 'error' && true
   })), listBox);
 });
-ComboBoxField.propTypes = _objectSpread({
+ComboBoxField.propTypes = _objectSpread(_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. */
@@ -242,8 +243,6 @@ ComboBoxField.propTypes = _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). */
@@ -339,7 +338,7 @@ ComboBoxField.propTypes = _objectSpread({
   controlProps: PropTypes.shape({
     onClick: PropTypes.func
   })
-}, ariaAttributesBasePropTypes);
+}, statusPropTypes), 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/devUtils/props/ariaAttributes';
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/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/devUtils/props/ariaAttributes';
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import DataTableReadme from './DataTable.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/components/FieldHelperText/FieldHelperText.js

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

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

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

package/lib/components/FileInputField/FileInputField.js

@@ -16,7 +16,6 @@ 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';
@@ -28,8 +27,9 @@ 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/devUtils/props/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
+import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import FileItem from './FileItem';
 import FileSelect from './FileSelect';
 
@@ -192,13 +192,11 @@ var FileInputField = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, helperText));
 });
 FileInputField.displayName = 'FileInputField';
-FileInputField.propTypes = _objectSpread(_objectSpread({
+FileInputField.propTypes = _objectSpread(_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 */
@@ -225,21 +223,19 @@ FileInputField.propTypes = _objectSpread(_objectSpread({
    *
    * }
    * */
-  fileList: PropTypes.arrayOf(PropTypes.shape({
+  fileList: PropTypes.arrayOf(PropTypes.shape(_objectSpread({
     fileObj: PropTypes.shape({}),
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
-    downloadLink: PropTypes.string,
-    status: PropTypes.oneOf(_Object$values(statuses))
-  })),
+    downloadLink: PropTypes.string
+  }, statusPropTypes))),
   /** Default array of objects for uploaded files. */
-  defaultFileList: PropTypes.arrayOf(PropTypes.shape({
+  defaultFileList: PropTypes.arrayOf(PropTypes.shape(_objectSpread({
     fileObj: PropTypes.shape({}),
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
-    downloadLink: PropTypes.string,
-    status: PropTypes.oneOf(_Object$values(statuses))
-  })),
+    downloadLink: PropTypes.string
+  }, statusPropTypes))),
   /** The handler that is called when the input files is uploaded.
    *
    * `(event, files) => void`
@@ -252,9 +248,8 @@ FileInputField.propTypes = _objectSpread(_objectSpread({
   onRemove: PropTypes.func,
   /** These props will be spread to the field text component. */
   textProps: PropTypes.shape({})
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
-FileInputField.defaultProps = {
-  defaultButtonText: 'Select a file',
-  status: statuses.DEFAULT
-};
+}, statusPropTypes), ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+FileInputField.defaultProps = _objectSpread({
+  defaultButtonText: 'Select a file'
+}, statusDefaultProp);
 export default FileInputField;