@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.5

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

@@ -1,16 +1,16 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React, { useState, useRef } from 'react';
-import ArrowTopRightBottomLeft from 'mdi-react/ArrowTopRightBottomLeftIcon';
+import React, { useRef, useState } from 'react';
 import ArrowCollapse from 'mdi-react/ArrowCollapseIcon';
+import ArrowTopRightBottomLeft from 'mdi-react/ArrowTopRightBottomLeftIcon';
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
 import CogIcon from 'mdi-react/CogIcon';
-import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import { useOverlayPanelState } from '../../hooks';
-import OverlayPanel from './OverlayPanel';
-import { OverlayProvider, Box, Text, ListView, Item, Messages, Button, Avatar, IconButton, Breadcrumbs, Tabs, Tab, TextField, MultivaluesField, SwitchField, ColorField } from '../../index';
-import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
+import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, Item, ListView, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
+import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/OverlayPanel',
@@ -40,14 +40,13 @@ export default {
   }
 };
 export var Default = function Default(_ref) {
-  var args = _extends({}, _ref);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   var _useOverlayPanelState = useOverlayPanelState(),
-      state = _useOverlayPanelState.state,
-      onClose = _useOverlayPanelState.onClose;
-
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
   var triggerRef = useRef();
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay is open.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
       ref: triggerRef,
@@ -69,42 +68,33 @@ export var Default = function Default(_ref) {
   );
 };
 export var InnerPanel = function InnerPanel(_ref2) {
-  var args = _extends({}, _ref2);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   var _useOverlayPanelState2 = useOverlayPanelState(),
-      state = _useOverlayPanelState2.state,
-      onClose = _useOverlayPanelState2.onClose;
-
+    state = _useOverlayPanelState2.state,
+    onClose = _useOverlayPanelState2.onClose;
   var _useOverlayPanelState3 = useOverlayPanelState(),
-      innerState = _useOverlayPanelState3.state,
-      onCloseInner = _useOverlayPanelState3.onClose;
-
+    innerState = _useOverlayPanelState3.state,
+    onCloseInner = _useOverlayPanelState3.onClose;
   var outerTriggerRef = useRef();
   var innerTriggerRef = useRef();
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      messagesOpen = _useState2[0],
-      setMessagesOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    messagesOpen = _useState2[0],
+    setMessagesOpen = _useState2[1];
   var toggleMessagesOpen = function toggleMessagesOpen() {
     setMessagesOpen(!messagesOpen);
   };
-
   var closeOuterPanel = function closeOuterPanel() {
     if (innerState.isOpen) {
       innerState.close();
     }
-
     onClose(state, outerTriggerRef);
   };
-
   var closeInnerPanel = function closeInnerPanel() {
     onCloseInner(innerState, innerTriggerRef);
   };
-
-  var inner = ___EmotionJSX(React.Fragment, null, innerState.isOpen && ___EmotionJSX(OverlayPanel, _extends({
-    variant: "overlayPanel.innerPanel" // applies higher z-index
+  var inner = innerState.isOpen && ___EmotionJSX(OverlayPanel, _extends({
+    variant: "overlayPanel.overlayPanelInner" // applies higher z-index
     ,
     isOpen: innerState.isOpen
   }, args, {
@@ -114,8 +104,7 @@ export var InnerPanel = function InnerPanel(_ref2) {
     onPress: closeInnerPanel
   }, "Close Inner Panel"), ___EmotionJSX(Text, {
     pt: "md"
-  }, "Children render here."))));
-
+  }, "Children render here.")));
   var items = [{
     id: 1,
     name: 'Form 1'
@@ -123,9 +112,9 @@ export var InnerPanel = function InnerPanel(_ref2) {
     id: 2,
     name: 'Form 2'
   }];
-
-  var outer = // should have higher z-index applied
-  ___EmotionJSX(React.Fragment, null, state.isOpen && ___EmotionJSX(OverlayPanel, _extends({
+  var outer =
+  // should have higher z-index applied
+  state.isOpen && ___EmotionJSX(OverlayPanel, _extends({
     isOpen: state.isOpen,
     sx: {
       p: '0px'
@@ -159,9 +148,9 @@ export var InnerPanel = function InnerPanel(_ref2) {
     ref: innerTriggerRef,
     onPress: innerState.open,
     "aria-expanded": innerState.isOpen
-  }, "Open Inner Panel"), inner)));
-
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  }, "Open Inner Panel"), inner));
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
       ref: outerTriggerRef,
@@ -180,11 +169,11 @@ export var InnerPanel = function InnerPanel(_ref2) {
 };
 export var CustomWidth = function CustomWidth() {
   var _useOverlayPanelState4 = useOverlayPanelState(),
-      state = _useOverlayPanelState4.state,
-      onClose = _useOverlayPanelState4.onClose;
-
+    state = _useOverlayPanelState4.state,
+    onClose = _useOverlayPanelState4.onClose;
   var triggerRef = useRef();
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
       ref: triggerRef,
@@ -209,16 +198,13 @@ export var CustomWidth = function CustomWidth() {
 };
 export var Expandable = function Expandable() {
   var _useOverlayPanelState5 = useOverlayPanelState(),
-      state = _useOverlayPanelState5.state,
-      onClose = _useOverlayPanelState5.onClose;
-
+    state = _useOverlayPanelState5.state,
+    onClose = _useOverlayPanelState5.onClose;
   var triggerRef = useRef();
-
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isExpanded = _useState4[0],
-      setIsExpanded = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
   var sx = {
     overlayPanel: {
       padding: 0,
@@ -291,11 +277,9 @@ export var Expandable = function Expandable() {
     name: 'node 2',
     key: 'node2'
   }];
-
   var onCloseHandler = function onCloseHandler() {
     return onClose(state, triggerRef);
   };
-
   var header = ___EmotionJSX(Box, {
     sx: sx.header
   }, ___EmotionJSX(Box, {
@@ -346,7 +330,6 @@ export var Expandable = function Expandable() {
     variant: "neutralText",
     "data-id": "editGroups"
   }, "Make Decision Request"))));
-
   var generalTabContent = ___EmotionJSX(Box, {
     sx: sx.tabContent
   }, ___EmotionJSX(TextField, {
@@ -387,7 +370,6 @@ export var Expandable = function Expandable() {
       "data-id": item.name
     }, item.name);
   }));
-
   var settingsTabContent = ___EmotionJSX(Box, {
     sx: sx.tabContent
   }, ___EmotionJSX(SwitchField, {
@@ -412,7 +394,6 @@ export var Expandable = function Expandable() {
     label: "Expire Node Instance Cache",
     value: "expire-node-instance-cache"
   }));
-
   var schemaTabContent = ___EmotionJSX(Box, {
     sx: sx.tabContent
   }, ___EmotionJSX(TextField, {
@@ -424,7 +405,6 @@ export var Expandable = function Expandable() {
     label: "Log field Description",
     defaultValue: "The Value of the Text Input"
   }));
-
   var footer = ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.footer
@@ -437,8 +417,8 @@ export var Expandable = function Expandable() {
     sx: sx.footer.button,
     variant: "text"
   }, "Cancel"));
-
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
       ref: triggerRef,

package/lib/components/OverlayPanel/OverlayPanel.test.js

@@ -8,16 +8,15 @@ var testId = 'test-overlayPanel';
 var defaultProps = {
   'data-testid': testId
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(OverlayPanel, _extends({}, defaultProps, props)));
 };
-
 afterEach(function () {
   jest.restoreAllMocks();
-}); // Need to be added to each test file to test accessibility using axe.
+});
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default overlayPanel', function () {
   getComponent({

package/lib/components/PageHeader/PageHeader.js

@@ -3,22 +3,21 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["title", "children"];
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import Text from '../Text/Text';
-import Box from '../Box/Box';
 import { useDeprecationWarning } from '../../hooks';
+import Box from '../Box/Box';
+import Text from '../Text/Text';
+
 /**
  * A `Page Header` is a composed component using text and icon button.
  * The component is separated from the body and appears at the top.
  * For customization,
  * please see [Page Header](./?path=/story/recipes-page-header--default) recipe docs.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PageHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var title = props.title,
-      children = props.children,
-      others = _objectWithoutProperties(props, _excluded);
-
+    children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
   useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
   return ___EmotionJSX(Box, _extends({
     isRow: true,

package/lib/components/PageHeader/PageHeader.stories.js

@@ -1,8 +1,9 @@
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import PageHeader from '../PageHeader/PageHeader';
-import Button from '../Button/Button';
 import withDeprecationWarning from '../../utils/devUtils/decorators/withDeprecationWarning';
+import Button from '../Button/Button';
+import PageHeader from './PageHeader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Deprecated/PageHeader',
@@ -20,7 +21,6 @@ export default {
   }
 };
 export var Default = function Default(_ref) {
-  var args = _extends({}, _ref);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return ___EmotionJSX(PageHeader, args, ___EmotionJSX(Button, null, "Add a Form"));
 };

package/lib/components/PageHeader/PageHeader.test.js

@@ -1,20 +1,19 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import PageHeader from './PageHeader';
 import axeTest from '../../utils/testUtils/testAxe';
+import PageHeader from './PageHeader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testTitle = 'Test Title';
 var defaultProps = {
   title: testTitle
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(PageHeader, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('renders pageheader and title', function () {
   getComponent();

package/lib/components/PasswordField/PasswordField.js

@@ -10,81 +10,72 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "slots", "status", "viewHiddenIconTestId", "viewIconTestId"];
-
 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 _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-import React, { forwardRef, useRef, useImperativeHandle, useState, useCallback } from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { useOverlayPosition } from 'react-aria';
+import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
 import EyeIcon from 'mdi-react/EyeOutlineIcon';
 import PropTypes from 'prop-types';
-import { useOverlayPosition } from 'react-aria';
-import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
-import { Box, FieldHelperText, Icon, IconButton, Input, Label, PopoverContainer, RequirementsList } from '../../';
+import { Box, FieldHelperText, Icon, IconButton, Input, Label, PopoverContainer, RequirementsList } from '../..';
+import * as hooks from '../../hooks';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
-import statuses from '../../utils/devUtils/constants/statuses';
-import * as hooks from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE = {
   HIDE: 'hide password',
   SHOW: 'show password'
 };
+
 /**
   * Combines a text input, label, IconButton and helper text for a complete, form-ready solution.
  */
-
 var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
-      isVisibleProp = props.isVisible,
-      onVisibleChangeProp = props.onVisibleChange,
-      requirements = props.requirements,
-      slots = props.slots,
-      status = props.status,
-      viewHiddenIconTestId = props.viewHiddenIconTestId,
-      viewIconTestId = props.viewIconTestId,
-      others = _objectWithoutProperties(props, _excluded);
-
+    isVisibleProp = props.isVisible,
+    onVisibleChangeProp = props.onVisibleChange,
+    requirements = props.requirements,
+    slots = props.slots,
+    status = props.status,
+    viewHiddenIconTestId = props.viewHiddenIconTestId,
+    viewIconTestId = props.viewIconTestId,
+    others = _objectWithoutProperties(props, _excluded);
   var checkRequirements = function checkRequirements() {
     return !_filterInstanceProperty(requirements).call(requirements, function (req) {
       return req.status === 'default';
     }).length > 0;
   };
-
   var _hooks$useField = hooks.useField(_objectSpread({
-    status: status
-  }, others)),
-      fieldContainerProps = _hooks$useField.fieldContainerProps,
-      fieldControlInputProps = _hooks$useField.fieldControlInputProps,
-      fieldControlWrapperProps = _hooks$useField.fieldControlWrapperProps,
-      fieldLabelProps = _hooks$useField.fieldLabelProps;
-
+      status: status
+    }, others)),
+    fieldContainerProps = _hooks$useField.fieldContainerProps,
+    fieldControlInputProps = _hooks$useField.fieldControlInputProps,
+    fieldControlWrapperProps = _hooks$useField.fieldControlWrapperProps,
+    fieldLabelProps = _hooks$useField.fieldLabelProps;
   var isFocused = fieldControlInputProps.isFocused;
   var inputRef = useRef();
   var popoverRef = useRef();
   hooks.usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
-
   var _hooks$useProgressive = hooks.useProgressiveState(isVisibleProp, isVisibleProp),
-      _hooks$useProgressive2 = _slicedToArray(_hooks$useProgressive, 2),
-      isVisible = _hooks$useProgressive2[0],
-      setIsShown = _hooks$useProgressive2[1]; // Measure the width of the input to inform the width of the menu (below).
-
+    _hooks$useProgressive2 = _slicedToArray(_hooks$useProgressive, 2),
+    isVisible = _hooks$useProgressive2[0],
+    setIsShown = _hooks$useProgressive2[1];
 
+  // Measure the width of the input to inform the width of the menu (below).
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      menuWidth = _useState2[0],
-      setMenuWidth = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    menuWidth = _useState2[0],
+    setMenuWidth = _useState2[1];
   var onResize = useCallback(function () {
     /* istanbul ignore next */
     if (inputRef.current) {
@@ -96,17 +87,15 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     onResize: onResize
   });
   useLayoutEffect(onResize, [onResize]);
-
   var _useOverlayPosition = useOverlayPosition({
-    isOpen: true,
-    overlayRef: popoverRef,
-    placement: 'bottom end',
-    targetRef: inputRef
-  }),
-      overlayProps = _useOverlayPosition.overlayProps,
-      placement = _useOverlayPosition.placement,
-      updatePosition = _useOverlayPosition.updatePosition;
-
+      isOpen: true,
+      overlayRef: popoverRef,
+      placement: 'bottom end',
+      targetRef: inputRef
+    }),
+    overlayProps = _useOverlayPosition.overlayProps,
+    placement = _useOverlayPosition.placement,
+    updatePosition = _useOverlayPosition.updatePosition;
   useLayoutEffect(function () {
     if (isFocused) {
       requestAnimationFrame(function () {
@@ -114,33 +103,25 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
   }, [isFocused, updatePosition]);
-
   var style = _objectSpread({
     minWidth: menuWidth,
     width: menuWidth
   }, overlayProps.style);
-
   var _hooks$useStatusClass = hooks.useStatusClasses(fieldControlWrapperProps.className, {
-    'is-success': status === statuses.SUCCESS || checkRequirements() && requirements.length > 0
-  }),
-      classNames = _hooks$useStatusClass.classNames;
-
+      'is-success': status === statuses.SUCCESS || checkRequirements() && requirements.length > 0
+    }),
+    classNames = _hooks$useStatusClass.classNames;
   var toggleShowPasswordAriaLabel = isVisible ? ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE.HIDE : ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE.SHOW;
-
   var handleToggleShowPassword = function handleToggleShowPassword() {
     setIsShown(!isVisible);
-
     if (onVisibleChangeProp) {
       var _context;
-
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-
       onVisibleChangeProp.apply(void 0, _concatInstanceProperty(_context = [!isVisible]).call(_context, args));
     }
   };
-
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldContainer"
   }, fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
@@ -183,22 +164,16 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
 PasswordField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
-
   /** Whether or not the password is visible. */
   isVisible: PropTypes.bool,
-
   /** Function that is passed into the IconButton within this component. */
   onVisibleChange: PropTypes.func,
-
   /** Text rendered below the input. */
   helperText: PropTypes.node,
-
   /** The unique identifier for the input element. */
   id: PropTypes.string,
-
   /** The name for the input element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
   name: PropTypes.string,
-
   /**
    * Callback fired when the value is changed on the input element.
    *
@@ -206,68 +181,49 @@ PasswordField.propTypes = _objectSpread(_objectSpread({
    * You can pull out the new value by accessing `event.target.value` (string).
    */
   onChange: PropTypes.func,
-
   /** The value for the input element (controlled). */
   value: PropTypes.string,
-
   /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
   autoComplete: PropTypes.string,
-
   /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
   autocomplete: PropTypes.string,
-
   /** A list of class names to apply to the input element. */
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-
   /** The default value for the input element. */
   defaultValue: PropTypes.string,
-
   /** Whether the input element is automatically focused when loaded onto the page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus). */
   hasAutoFocus: PropTypes.bool,
-
   /** Whether the field is disabled. */
   isDisabled: PropTypes.bool,
-
   /** Whether the input can be selected, but not changed by the user. */
   isReadOnly: PropTypes.bool,
-
   /** Whether the field is required. */
   isRequired: PropTypes.bool,
-
   /** Add max Length to input value */
   maxLength: PropTypes.number,
-
   /**
    * Callback fired when focus is lost on the input element.
    */
   onBlur: PropTypes.func,
-
   /**
    * Callback fired when focus is lost on the input element.
    */
   onFocus: PropTypes.func,
-
   /** The placeholder text to display in the input element. */
   placeholder: PropTypes.string,
-
   /** Provides a way to insert markup in specified places. */
   slots: PropTypes.shape({
     /** The given node will be inserted into the field container. */
     inContainer: PropTypes.node
   }),
-
   /** Determines the input status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /** Determines the type of input to use. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
   type: PropTypes.string,
-
   /** @ignore Prop that allows testing of the icon button. */
   viewHiddenIconTestId: PropTypes.string,
-
   /** @ignore Prop that allows testing of the icon button. */
   viewIconTestId: PropTypes.string,
-
   /** Array of Requirements and their status. */
   requirements: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,