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

package/lib/cjs/components/SelectField/SelectField.js

@@ -15,15 +15,16 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 var _SelectFieldBase = _interopRequireDefault(require("../SelectFieldBase"));
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -46,7 +47,7 @@ var SelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "aria-invalid": status === 'error' && true
   }));
 });
-SelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
+SelectField.propTypes = _objectSpread(_objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
   /** Where the popover menu opens relative to its trigger. */
@@ -94,6 +95,8 @@ SelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   selectedKey: _propTypes["default"].string,
   /** Determines the textarea status indicator and helper text styling. Eg. float. */
   labelMode: _propTypes["default"].string,
+  /** Determines the type of label applied to the component. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
   /**
    * Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.
    *
@@ -124,15 +127,16 @@ SelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   scrollBoxProps: _propTypes["default"].shape({
     maxHeight: _propTypes["default"].string
   })
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
-SelectField.defaultProps = _objectSpread({
+}, _ariaAttributes.ariaAttributesBasePropTypes);
+SelectField.defaultProps = {
   placeholder: 'Select',
+  status: _statuses["default"].DEFAULT,
   align: 'start',
   direction: 'bottom',
   scrollBoxProps: {
     maxHeight: '300px'
   }
-}, _statusProp.statusDefaultProp);
+};
 SelectField.displayName = 'SelectField';
 var _default = SelectField;
 exports["default"] = _default;

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

@@ -35,9 +35,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _index = require("../../index");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 var _constants = require("../Label/constants");
 var _react2 = require("@emotion/react");
 var _context, _context2;
@@ -133,7 +133,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -159,6 +159,13 @@ var _default = {
       },
       defaultValue: (0, _values["default"])(_constants.modes)[0]
     },
+    status: {
+      control: {
+        type: 'select',
+        options: _statuses["default"]
+      },
+      defaultValue: _statuses["default"].DEFAULT
+    },
     defaultSelectedKey: {},
     disabledKeys: {},
     name: {},
@@ -174,7 +181,7 @@ var _default = {
         type: 'none'
       }
     }
-  }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var Default = function Default(args) {

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -24,8 +24,8 @@ var _reactAria = require("react-aria");
 var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
@@ -115,7 +115,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     id: helperTextId
   }, helperText));
 });
-SelectFieldBase.propTypes = _objectSpread(_objectSpread({
+SelectFieldBase.propTypes = _objectSpread({
   /** Default text rendered if no option is selected. Deprecated. */
   defaultText: _propTypes["default"].string,
   /** Text rendered below the input. */
@@ -128,6 +128,8 @@ SelectFieldBase.propTypes = _objectSpread(_objectSpread({
   name: _propTypes["default"].string,
   /** Temporary text that occupies the text input when it is empty. */
   placeholder: _propTypes["default"].string,
+  /** Determines the type of label applied to the component. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
   /** Determines whether to use column styles. */
   columnStyleProps: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].shape({})]),
   /** Determines props that applied to root container. */
@@ -164,6 +166,6 @@ SelectFieldBase.propTypes = _objectSpread(_objectSpread({
   triggerRef: _propTypes["default"].shape({}),
   /** Props for the element representing the selected value. */
   valueProps: _propTypes["default"].shape({})
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 var _default = SelectFieldBase;
 exports["default"] = _default;

package/lib/cjs/components/SwitchField/SwitchField.js

@@ -16,6 +16,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
@@ -27,9 +28,9 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 var _react2 = require("@emotion/react");
 var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onChange", "value", "name", "id", "isDisabled", "isReadOnly", "isRequired", "hasAutoFocus", "onFocus", "onBlur", "onFocusChange", "onKeyDown", "onKeyUp", "status", "controlProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -108,7 +109,7 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     status: status
   }, helperText));
 });
-SwitchField.propTypes = _objectSpread(_objectSpread(_objectSpread({
+SwitchField.propTypes = _objectSpread(_objectSpread({
   /** A list of class names to apply to the input element. */
   className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
   /** Whether the element should receive focus on render. */
@@ -145,15 +146,18 @@ SwitchField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   onKeyDown: _propTypes["default"].func,
   /** Handler that is called when a key is released. */
   onKeyUp: _propTypes["default"].func,
+  /** Determines the textarea status indicator and helper text styling. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
   /** 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["default"].string
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
-SwitchField.defaultProps = _objectSpread({
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
+SwitchField.defaultProps = {
   isDisabled: false,
   isReadOnly: false,
   isRequired: false,
-  hasAutoFocus: false
-}, _statusProp.statusDefaultProp);
+  hasAutoFocus: false,
+  status: _statuses["default"].DEFAULT
+};
 SwitchField.displayName = 'SwitchField';
 var _default = SwitchField;
 exports["default"] = _default;

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

@@ -20,9 +20,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _interactions = require("@react-aria/interactions");
 var _index = require("../../index");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -38,7 +38,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -60,6 +60,13 @@ var _default = {
     },
     name: {},
     className: {},
+    status: {
+      control: {
+        type: 'select',
+        options: _statuses["default"]
+      },
+      defaultValue: _statuses["default"].DEFAULT
+    },
     isDisabled: {},
     isRequired: {},
     isReadOnly: {},
@@ -71,7 +78,7 @@ var _default = {
         type: 'none'
       }
     }
-  }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var Default = function Default(args) {

package/lib/cjs/components/TextAreaField/TextAreaField.js

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
@@ -23,9 +24,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
 var _hooks = require("../../hooks");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -146,7 +147,7 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-TextAreaField.propTypes = _objectSpread(_objectSpread(_objectSpread({
+TextAreaField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
   /** Text rendered below the textarea. */
@@ -206,20 +207,23 @@ TextAreaField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   placeholder: _propTypes["default"].string,
   /** The number of rows to display for the textarea. Controls the default height. */
   rows: _propTypes["default"].number,
+  /** Determines the textarea status indicator and helper text styling. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
   /** Provides a way to insert markup in specified places. */
   slots: _propTypes["default"].shape({
     /** The given node will be inserted into the field container. */
     inContainer: _propTypes["default"].node
   })
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
-TextAreaField.defaultProps = _objectSpread({
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
+TextAreaField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,
   isReadOnly: false,
   isRequired: false,
   isUnresizable: false,
-  rows: 4
-}, _statusProp.statusDefaultProp);
+  rows: 4,
+  status: _statuses["default"].DEFAULT
+};
 TextAreaField.displayName = 'TextAreaField';
 var _default = TextAreaField;
 exports["default"] = _default;

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

@@ -22,9 +22,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
 var _index = require("../../index");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 var _constants = require("../Label/constants");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -41,7 +41,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -69,6 +69,13 @@ var _default = {
       }
     },
     rows: {},
+    status: {
+      control: {
+        type: 'select',
+        options: _statuses["default"]
+      },
+      defaultValue: _statuses["default"].DEFAULT
+    },
     isDisabled: {},
     isRequired: {},
     isReadOnly: {},
@@ -82,7 +89,7 @@ var _default = {
         type: 'none'
       }
     }
-  }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var IconSlot = (0, _react2.jsx)(_index.Box, {

package/lib/cjs/components/TextField/TextField.js

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
@@ -23,9 +24,9 @@ var _uuid = require("uuid");
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _useColumnStyles = _interopRequireDefault(require("../../hooks/useColumnStyles"));
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -80,7 +81,7 @@ var TextField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-TextField.propTypes = _objectSpread(_objectSpread(_objectSpread({
+TextField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
   /** A string designating whether or not the label is a float label. */
@@ -139,17 +140,20 @@ TextField.propTypes = _objectSpread(_objectSpread(_objectSpread({
     /** The given node will be inserted into the field container. */
     inContainer: _propTypes["default"].node
   }),
+  /** Determines the input status indicator and helper text styling. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
   /** Determines the type of input to use. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
   type: _propTypes["default"].string,
   /** Props object that is spread directly into the input wrapper element. */
   wrapperProps: _propTypes["default"].shape({})
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
-TextField.defaultProps = _objectSpread({
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
+TextField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,
   isReadOnly: false,
-  isRequired: false
-}, _statusProp.statusDefaultProp);
+  isRequired: false,
+  status: _statuses["default"].DEFAULT
+};
 TextField.displayName = 'TextField';
 var _default = TextField;
 exports["default"] = _default;

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

@@ -24,9 +24,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _useCopyToClipboard = _interopRequireDefault(require("../../hooks/useCopyToClipboard"));
 var _index = require("../../index");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses.js"));
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 var _CopyButton = _interopRequireDefault(require("../CopyText/CopyButton"));
 var _constants = require("../Label/constants");
 var _react2 = require("@emotion/react");
@@ -45,7 +45,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread(_objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     labelMode: {
       control: {
         type: 'select',
@@ -57,8 +57,15 @@ var _default = {
       control: {
         type: 'text'
       }
+    },
+    status: {
+      control: {
+        type: 'select',
+        options: _statuses["default"]
+      },
+      defaultValue: _statuses["default"].DEFAULT
     }
-  }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var Default = function Default(_ref) {

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

@@ -23,7 +23,7 @@ var _noop = _interopRequireDefault(require("lodash/noop"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _constants = require("../../components/Label/constants");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 var _ = require("..");
 var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

package/lib/cjs/recipes/PanelHeader.stories.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
+var _DotsVerticalIcon = _interopRequireDefault(require("mdi-react/DotsVerticalIcon"));
+var _index = require("../index");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Recipes/Panel Header'
+};
+exports["default"] = _default;
+var sx = {
+  wrapper: {
+    width: 'fit-content',
+    alignItems: 'center',
+    bg: 'accent.99',
+    py: 'sm',
+    pl: 'md'
+  },
+  title: {
+    fontSize: 'md',
+    lineHeight: '18px'
+  },
+  subtitle: {
+    fontSize: 'sm',
+    my: '1px',
+    lineHeight: '16px'
+  }
+};
+var Default = function Default() {
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.wrapper
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _AccountIcon["default"],
+    size: 25,
+    color: "accent.40"
+  }), (0, _react2.jsx)(_index.Box, {
+    ml: "sm",
+    mr: "xx"
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: sx.title,
+    variant: "bodyStrong"
+  }, "Fons Vernall"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.subtitle,
+    variant: "subtitle"
+  }, "fvernall0@google.it")), (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "Menu Button"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _DotsVerticalIcon["default"],
+    size: "xs",
+    color: "Neutral.40",
+    m: "0.61px"
+  })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_index.Item, {
+    key: "edit"
+  }, "Edit"), (0, _react2.jsx)(_index.Item, {
+    key: "duplicate"
+  }, "Duplicate"), (0, _react2.jsx)(_index.Item, {
+    key: "delete",
+    textValue: "delete"
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "critical.bright"
+  }, "Delete"))))), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "Close Button",
+    mx: "10px"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CloseIcon["default"],
+    size: "xs",
+    color: "Neutral.40",
+    m: "0.61px"
+  }))));
+};
+exports.Default = Default;

package/lib/components/ArrayField/ArrayField.js

@@ -16,15 +16,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { useCallback, useState } from 'react';
 import { mergeProps, useLabel } from 'react-aria';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Button, FieldHelperText, Label, Text } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
 
 /**
  * Displays array collections providing useful functions and
@@ -156,7 +156,7 @@ var ArrayField = function ArrayField(props) {
     color: "active"
   }, addButtonLabel)));
 };
-ArrayField.propTypes = _objectSpread(_objectSpread({
+ArrayField.propTypes = _objectSpread({
   /** Label for add button */
   addButtonLabel: PropTypes.string,
   /** The default value for the array input field (uncontrolled). */
@@ -183,11 +183,13 @@ ArrayField.propTypes = _objectSpread(_objectSpread({
   onDelete: PropTypes.func,
   /** Render prop to display an input field */
   renderField: PropTypes.func,
+  /** Determines the helper text styling. */
+  status: PropTypes.oneOf(_Object$values(statuses)),
   /** Determines the maximum number of items */
   maxSize: isValidPositiveInt,
   /** Text to display when the maximum number of items is reached */
   maxSizeText: PropTypes.node
-}, statusPropTypes), ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes);
 ArrayField.defaultProps = {
   addButtonLabel: '+ Add'
 };

package/lib/components/ArrayField/ArrayField.stories.js

@@ -17,7 +17,7 @@ import React from 'react';
 import { OverlayProvider } from 'react-aria';
 import { v4 as uuid } from 'uuid';
 import { ArrayField, ArrayFieldDeleteButton, Item, SelectField, TextField } from '../../index';
-import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/ArrayField',

package/lib/components/Callout/Callout.js

@@ -1,22 +1,13 @@
-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 = ["children", "status"];
 var _calloutProps;
-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 PropTypes from 'prop-types';
 import { Box } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import { NoticeIcon } from '../Icon/NoticeIcon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CALLOUT_TEST_ID = 'CalloutTestId';
@@ -60,7 +51,12 @@ var Callout = function Callout(_ref) {
     "aria-label": "".concat(status, "-icon")
   }, defaultIconProps)), children);
 };
-Callout.propTypes = _objectSpread({}, statusPropTypes);
-Callout.defaultProps = _objectSpread({}, statusDefaultProp);
+Callout.propTypes = {
+  /** Determines the icon and color  */
+  status: PropTypes.oneOf(_Object$values(statuses))
+};
+Callout.defaultProps = {
+  status: statuses.DEFAULT
+};
 Callout.displayName = 'Callout';
 export default Callout;