@pingux/astro 1.42.0 → 2.0.0-alpha.1

package/lib/{styles/variants/navBar.js → components/NavBar/NavBar.styles.js}

@@ -12,7 +12,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import accordion from './accordion';
+import accordionGrid from '../AccordionGridGroup/AccordionGrid.styles';
+import { quiet } from '../Button/Buttons.styles';
+import { wordWrap } from '../Text/Text.styles';
 var container = {
   height: '100%',
   width: '230px',
@@ -68,16 +70,70 @@ var sectionContainer = {
   }
 };
 
-var sectionBody = _objectSpread(_objectSpread({}, accordion.accordionGridBody), {}, {
+var sectionBody = _objectSpread(_objectSpread({}, accordionGrid.body), {}, {
   pl: '0'
 });
 
-var navItem = {
+var itemButton = {
+  textDecoration: 'none',
+  outline: 'none',
+  cursor: 'pointer',
+  borderRadius: 0,
+  backgroundColor: 'transparent',
+  paddingTop: 'sm',
+  paddingBottom: 'sm',
+  display: 'block',
+  color: 'neutral.90',
+  fontSize: 'md',
+  fontWeight: 0,
+  flexGrow: '1',
+  width: '100%',
+  textAlign: 'left',
+  whiteSpace: 'break-spaces',
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: 'focus'
+  },
+  '&.is-hovered': {
+    bg: 'accent.10'
+  },
+  '&.is-selected': {
+    bg: 'accent.5',
+    boxShadow: 'inset 2px 0 0 0 white'
+  },
+  '&.is-pressed': {
+    bg: 'accent.5'
+  }
+};
+var subtitle = {
+  ml: 'md',
+  my: 'sm',
+  fontWeight: 1,
+  fontSize: 'sm',
+  color: 'accent.80',
+  zIndex: '100'
+};
+
+var headerText = _objectSpread(_objectSpread({}, wordWrap), {}, {
+  whiteSpace: 'break-spaces',
+  lineHeight: 1,
+  fontSize: 'md',
+  fontWeight: 1,
+  maxWidth: '150px',
+  color: 'neutral.95',
+  '.is-selected &': {
+    color: 'white'
+  }
+});
+
+var headerNav = {
   cursor: 'pointer',
   minHeight: '40px',
   lineHeight: '30px',
-  py: 'sm',
-  px: 'md',
   outline: 'none',
   display: 'flex',
   justifyContent: 'flex-start',
@@ -87,25 +143,53 @@ var navItem = {
   color: 'neutral.95',
   flexGrow: 1,
   fontWeight: 0,
+  fontSize: '16px',
   '&.is-focused': {
-    outline: '1px solid',
-    outlineColor: 'focus'
+    outline: 'none',
+    boxShadow: 'focus',
+    WebkitBoxShadow: 'focus',
+    MozBoxShadow: 'focus'
   },
   '&.is-hovered': {
     backgroundColor: 'accent.10'
   },
   '&.is-pressed': {
     backgroundColor: 'accent.5'
-  },
+  }
+};
+
+var item = _objectSpread(_objectSpread({}, headerNav), {}, {
+  py: 'sm',
+  px: 'md',
   '&.is-selected': {
     backgroundColor: 'accent.5',
     boxShadow: 'inset 2px 0 0 0 white'
   }
-};
+});
+
+var sectionButton = _objectSpread(_objectSpread({}, quiet), {}, {
+  width: '100%',
+  '&.is-focused': {
+    outline: '1px solid',
+    outlineColor: 'focus'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.10'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'accent.5'
+  }
+});
+
 export default {
   container: container,
   itemHeaderContainer: itemHeaderContainer,
   sectionContainer: sectionContainer,
   sectionBody: sectionBody,
-  navItem: navItem
+  sectionButton: sectionButton,
+  itemButton: itemButton,
+  subtitle: subtitle,
+  headerText: headerText,
+  headerNav: headerNav,
+  item: item
 };

package/lib/components/NavBarSection/NavBarItem.js

@@ -3,9 +3,8 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["icon", "text", "className", "id", "onPress"];
 import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
+import { mergeProps, useFocusRing } from 'react-aria';
 import { useHover, usePress } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
-import { useFocusRing } from '@react-aria/focus';
 import { Box, Icon, Text } from '../../index';
 import { useStatusClasses, useNavBarPress } from '../../hooks';
 import { useNavBarContext } from '../../context/NavBarContext';
@@ -67,7 +66,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var color = isSelected ? 'white' : 'neutral.95';
   return ___EmotionJSX(Box, _extends({
     id: key,
-    variant: "navBar.navItem",
+    variant: "navBar.item",
     isRow: true,
     tabIndex: 0,
     className: classNames,
@@ -91,7 +90,7 @@ var NavBarItem = /*#__PURE__*/forwardRef(function (props, ref) {
       fill: color
     }
   }), ___EmotionJSX(Text, {
-    variant: "navBarHeaderText"
+    variant: "variants.navBar.headerText"
   }, text)));
 });
 NavBarItem.propTypes = {

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -24,7 +24,7 @@ var NavBarItemBody = function NavBarItemBody(_ref) {
       key: "text".concat(subTitle),
       ml: "45px",
       mt: hasSeparator ? '0' : undefined,
-      variant: "text.navBarSubtitle"
+      variant: "variants.navBar.subtitle"
     }, subTitle));
   };
 

package/lib/components/NavBarSection/NavBarItemButton.js

@@ -45,7 +45,7 @@ var NavBarItemButton = function NavBarItemButton(props) {
 
   return ___EmotionJSX(Button, _extends({
     id: key,
-    variant: "navItemButton",
+    variant: "variants.navBar.itemButton",
     onPress: onNavPress,
     className: classNames,
     color: isSelected ? 'white' : undefined

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -60,7 +60,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     },
     "aria-hidden": "true"
   }), ___EmotionJSX(Text, {
-    variant: "navBarHeaderText"
+    variant: "variants.navBar.headerText"
   }, heading), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",

package/lib/components/NavBarSection/NavBarItemLink.js

@@ -44,7 +44,7 @@ var NavBarItemLink = function NavBarItemLink(props) {
 
   return ___EmotionJSX(Link, _extends({
     id: key,
-    variant: "buttons.navItemButton",
+    variant: "variants.navBar.itemButton",
     className: classNames,
     onPress: onNavPress,
     color: isSelected ? 'white' : undefined

package/lib/components/NavBarSection/NavBarSection.js

@@ -37,7 +37,7 @@ var NavBarSection = function NavBarSection(_ref) {
   return ___EmotionJSX(React.Fragment, null, hasSeparator && ___EmotionJSX(Separator, {
     variant: "separator.navBarSeparator"
   }), title && ___EmotionJSX(Text, {
-    variant: "text.navBarSubtitle",
+    variant: "variants.navBar.subtitle",
     mt: hasSeparator ? '0' : undefined
   }, title), ___EmotionJSX("ul", _extends({
     ref: ref,
@@ -141,7 +141,7 @@ var SectionItem = function SectionItem(_ref2) {
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, _extends({
     ref: headerButtonRef,
-    variant: "navBarSectionButton",
+    variant: "variants.navBar.sectionButton",
     onPress: function onPress() {
       return onExpandedChange(!isExpanded);
     }

package/lib/components/NumberField/NumberField.js

@@ -16,17 +16,17 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
+import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
-import MenuUp from 'mdi-react/MenuUpIcon';
 import MenuDown from 'mdi-react/MenuDownIcon';
-import { useNumberField } from '@react-aria/numberfield';
-import { useNumberFieldState } from '@react-stately/numberfield';
+import MenuUp from 'mdi-react/MenuUpIcon';
+import { mergeProps, useNumberField } from 'react-aria';
+import { useNumberFieldState } from 'react-stately';
 import { useLocale } from '@react-aria/i18n';
-import { mergeProps } from '@react-aria/utils';
-import omit from 'lodash/omit';
 import { v4 as uuid } from 'uuid';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { useField, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 /**
@@ -62,7 +62,8 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useField = useField(props),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -73,7 +74,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   });
 
   var ControlArrows = ___EmotionJSX(Box, {
-    variant: "numberField.arrows"
+    variant: "forms.numberField.arrows"
   }, ___EmotionJSX(IconButton, _extends({}, incrementButtonProps, {
     ref: decRef,
     tabIndex: "-1",
@@ -94,20 +95,20 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var onInputFocus = useCallback(function (e) {
     e.persist();
-    fieldControlProps.onFocus(e);
+    fieldControlInputProps.onFocus(e);
     inputProps.onFocus(e);
-  }, [fieldControlProps, inputProps]);
+  }, [fieldControlInputProps, inputProps]);
   var onInputBlur = useCallback(function (e) {
     e.persist();
-    fieldControlProps.onBlur(e);
+    fieldControlInputProps.onBlur(e);
     inputProps.onBlur(e);
-  }, [fieldControlProps, inputProps]);
-  var updatedFieldControlProps = useMemo(function () {
-    return _objectSpread(_objectSpread({}, fieldControlProps), {}, {
+  }, [fieldControlInputProps, inputProps]);
+  var updatedFieldControlInputProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
       onFocus: onInputFocus,
       onBlur: onInputBlur
     });
-  }, [fieldControlProps, onInputBlur, onInputFocus]);
+  }, [fieldControlInputProps, onInputBlur, onInputFocus]);
 
   var onInputChange = function onInputChange(e) {
     var _context;
@@ -136,18 +137,19 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   inputProps['aria-roledescription'] = null;
-  var helperTextId = uuid();
+  var helperTextId = useMemo(function () {
+    return uuid();
+  }, []);
   return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, mergeProps(fieldLabelProps, labelProps)), ___EmotionJSX(Box, _extends({
-    variant: "numberField.noDefaultArrows"
-  }, groupProps), ___EmotionJSX(Box, {
-    variant: "numberField.arrowsWrapper",
-    className: fieldControlProps.className
-  }, ___EmotionJSX(Input, _extends({
+    variant: "forms.numberField.noDefaultArrows"
+  }, groupProps), ___EmotionJSX(Box, _extends({
+    variant: "forms.numberField.arrowsWrapper"
+  }, fieldControlWrapperProps), ___EmotionJSX(Input, _extends({
     variant: "forms.input.numberField",
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, updatedFieldControlProps, omit(inputProps, ['name', 'onFocus', 'onBlur']), {
+  }, updatedFieldControlInputProps, omit(inputProps, ['name', 'onFocus', 'onBlur']), {
     onChange: onInputChange,
     "aria-describedby": helperText && helperTextId,
     role: "textbox"
@@ -157,7 +159,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, helperText)));
 });
 export default NumberField;
-NumberField.propTypes = _objectSpread({
+NumberField.propTypes = _objectSpread(_objectSpread({
   /** A custom aria-label for the decrement button.
    * If not provided, the localized string "Decrement" is used. */
   decrementAriaLabel: PropTypes.string,
@@ -242,4 +244,4 @@ NumberField.propTypes = _objectSpread({
 
   /** The current value (controlled). */
   value: PropTypes.number
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);

package/lib/components/NumberField/NumberField.stories.js

@@ -15,6 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { useState } from 'react';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import NumberField from './NumberField';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -28,7 +29,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -101,7 +102,7 @@ export default {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(NumberField, args);

package/lib/{styles/variants/numberField.js → components/NumberField/NumberField.styles.js}

@@ -8,11 +8,14 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 
+var _objectSpread2;
+
 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 { input } from '../forms/input';
+import { input } from '../Input/Input.styles';
+import statuses from '../../utils/devUtils/constants/statuses';
 var sharedStyles = {
   WebkitAppearance: 'none',
   margin: 0
@@ -25,11 +28,17 @@ var noDefaultArrows = {
   }
 };
 
-var arrowsWrapper = _objectSpread({
+var arrowsWrapper = _objectSpread(_objectSpread({
   display: 'flex',
   justifyContent: 'center',
   position: 'relative'
-}, input.container);
+}, input.fieldControlWrapper), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, "&.is-".concat(statuses.ERROR, "::after"), {
+  bg: 'critical.bright'
+}), _defineProperty(_objectSpread2, "&.is-".concat(statuses.SUCCESS, "::after"), {
+  bg: 'success.bright'
+}), _defineProperty(_objectSpread2, "&.is-".concat(statuses.WARNING, "::after"), {
+  bg: 'warning.bright'
+}), _objectSpread2));
 
 var arrows = {
   position: 'absolute',

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -5,7 +5,7 @@ var _excluded = ["children", "isOpen", "onClose", "className", "state", "size",
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import { FocusScope } from '@react-aria/focus';
+import { FocusScope } from 'react-aria';
 import { Box } from '../../';
 import { useStatusClasses, useOverlayPanelState } from '../../hooks';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
@@ -56,13 +56,13 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(FocusScope, {
     autoFocus: true
   }, ___EmotionJSX(Box, _extends({
-    variant: "overlayPanel.overlayPanel",
+    variant: "overlayPanel.container",
     ref: overlayPanelRef
   }, others, {
     className: classNames,
     onKeyUp: handleClose
   }), ___EmotionJSX(Box, {
-    variant: "overlayPanel.overlayPanelBody",
+    variant: "overlayPanel.body",
     className: classNames
   }, children)));
 });

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

@@ -1,7 +1,6 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState, useRef } from 'react';
-import { Item } from '@react-stately/collections';
 import ArrowTopRightBottomLeft from 'mdi-react/ArrowTopRightBottomLeftIcon';
 import ArrowCollapse from 'mdi-react/ArrowCollapseIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
@@ -9,7 +8,7 @@ import CogIcon from 'mdi-react/CogIcon';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import { useOverlayPanelState } from '../../hooks';
 import OverlayPanel from './OverlayPanel';
-import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages, Button, Avatar, IconButton, Breadcrumbs, Tabs, Tab, TextField, MultivaluesField, SwitchField, ColorField } from '../../index';
+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 { pingImg } from '../../utils/devUtils/constants/images';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -105,7 +104,7 @@ export var InnerPanel = function InnerPanel(_ref2) {
   };
 
   var inner = ___EmotionJSX(React.Fragment, null, innerState.isOpen && ___EmotionJSX(OverlayPanel, _extends({
-    variant: "overlayPanel.overlayPanelInner" // applies higher z-index
+    variant: "overlayPanel.innerPanel" // applies higher z-index
     ,
     isOpen: innerState.isOpen
   }, args, {
@@ -117,6 +116,14 @@ export var InnerPanel = function InnerPanel(_ref2) {
     pt: "md"
   }, "Children render here."))));
 
+  var items = [{
+    id: 1,
+    name: 'Form 1'
+  }, {
+    id: 2,
+    name: 'Form 2'
+  }];
+
   var outer = // should have higher z-index applied
   ___EmotionJSX(React.Fragment, null, state.isOpen && ___EmotionJSX(OverlayPanel, _extends({
     isOpen: state.isOpen,
@@ -136,21 +143,17 @@ export var InnerPanel = function InnerPanel(_ref2) {
   }, "Close Panel"), ___EmotionJSX(Text, {
     pt: "md",
     mb: "24px"
-  }, "Children render here."), ___EmotionJSX(List, null, ___EmotionJSX(ListItem, null, ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 1")), ___EmotionJSX(Separator, {
-    margin: "0"
-  }), ___EmotionJSX(ListItem, {
-    title: "Form 2"
-  }, ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 2")), ___EmotionJSX(Separator, {
-    margin: "0"
-  })), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
+  }, "Children render here."), ___EmotionJSX(ListView, {
+    items: items
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.id
+    }, ___EmotionJSX(Text, {
+      variant: "itemTitle",
+      alignSelf: "center",
+      mr: "auto"
+    }, item.name));
+  }), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
     onPress: toggleMessagesOpen
   }, "Toggle Messages"), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
     ref: innerTriggerRef,

package/lib/{styles/variants/overlayPanel.js → components/OverlayPanel/OverlayPanel.styles.js}

@@ -1,4 +1,4 @@
-var overlayPanel = {
+var container = {
   position: 'fixed',
   overflowY: 'scroll',
   zIndex: 10,
@@ -31,7 +31,7 @@ var overlayPanel = {
     right: 0
   }
 };
-var overlayPanelInner = {
+var innerPanel = {
   position: 'absolute',
   zIndex: 9,
   bottom: 0,
@@ -48,7 +48,7 @@ var overlayPanelInner = {
   p: '25px',
   backgroundColor: 'accent.99'
 };
-var overlayPanelBody = {
+var body = {
   display: 'none',
   height: '100%',
   width: '100%',
@@ -57,7 +57,7 @@ var overlayPanelBody = {
   }
 };
 export default {
-  overlayPanel: overlayPanel,
-  overlayPanelBody: overlayPanelBody,
-  overlayPanelInner: overlayPanelInner
+  container: container,
+  body: body,
+  innerPanel: innerPanel
 };

package/lib/components/PasswordField/PasswordField.js

@@ -20,13 +20,14 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 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 PropTypes from 'prop-types';
-import EyeIcon from 'mdi-react/EyeOutlineIcon';
 import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
-import { useOverlayPosition } from '@react-aria/overlays';
+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 { 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";
@@ -59,10 +60,11 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     status: status
   }, others)),
       fieldContainerProps = _hooks$useField.fieldContainerProps,
-      fieldControlProps = _hooks$useField.fieldControlProps,
+      fieldControlInputProps = _hooks$useField.fieldControlInputProps,
+      fieldControlWrapperProps = _hooks$useField.fieldControlWrapperProps,
       fieldLabelProps = _hooks$useField.fieldLabelProps;
 
-  var isFocused = fieldControlProps.isFocused;
+  var isFocused = fieldControlInputProps.isFocused;
   var inputRef = useRef();
   var popoverRef = useRef();
   hooks.usePropWarning(props, 'disabled', 'isDisabled');
@@ -118,7 +120,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     width: menuWidth
   }, overlayProps.style);
 
-  var _hooks$useStatusClass = hooks.useStatusClasses(fieldControlProps.className, {
+  var _hooks$useStatusClass = hooks.useStatusClasses(fieldControlWrapperProps.className, {
     'is-success': status === statuses.SUCCESS || checkRequirements() && requirements.length > 0
   }),
       classNames = _hooks$useStatusClass.classNames;
@@ -140,14 +142,15 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
-    variant: "forms.input.wrapper"
-  }, fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, {
-    variant: "forms.input.container",
-    isRow: true,
+    variant: "forms.input.fieldContainer"
+  }, fieldContainerProps), ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, _extends({
+    variant: "forms.input.fieldControlWrapper",
+    isRow: true
+  }, fieldControlWrapperProps, {
     className: classNames
-  }, ___EmotionJSX(Input, _extends({
+  }), ___EmotionJSX(Input, _extends({
     ref: inputRef
-  }, fieldControlProps, {
+  }, fieldControlInputProps, {
     type: isVisible ? 'text' : 'password',
     sx: {
       pr: '43px'
@@ -157,7 +160,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.input.containedIcon"
   }, ___EmotionJSX(IconButton, {
     "aria-label": toggleShowPasswordAriaLabel,
-    isDisabled: fieldControlProps.disabled,
+    isDisabled: fieldControlInputProps.disabled,
     onPress: handleToggleShowPassword,
     size: 28
   }, ___EmotionJSX(Icon, {
@@ -177,7 +180,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     requirements: requirements
   })));
 });
-PasswordField.propTypes = _objectSpread({
+PasswordField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
 
@@ -259,15 +262,6 @@ PasswordField.propTypes = _objectSpread({
   /** Determines the type of input to use. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype). */
   type: PropTypes.string,
 
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the input element. */
-  controlProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the label element. */
-  labelProps: PropTypes.shape({}),
-
   /** @ignore Prop that allows testing of the icon button. */
   viewHiddenIconTestId: PropTypes.string,
 
@@ -279,7 +273,7 @@ PasswordField.propTypes = _objectSpread({
     name: PropTypes.string.isRequired,
     status: PropTypes.oneOf(['default', 'success', 'warning', 'error'])
   }))
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 PasswordField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,