@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/NavBarSection/NavBarItemButton.js

@@ -10,42 +10,34 @@ 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", "id", "onPress", "sx"];
-
 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 PropTypes from 'prop-types';
 import { useNavBarContext } from '../../context/NavBarContext';
-import { useStatusClasses, useNavBarPress } from '../../hooks';
+import { useNavBarPress, useStatusClasses } from '../../hooks';
 import { Button } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var NavBarItemButton = function NavBarItemButton(props) {
   var className = props.className,
-      key = props.id,
-      onPressCallback = props.onPress,
-      sx = props.sx,
-      others = _objectWithoutProperties(props, _excluded);
-
+    key = props.id,
+    onPressCallback = props.onPress,
+    sx = props.sx,
+    others = _objectWithoutProperties(props, _excluded);
   var state = useNavBarContext();
   var isSelected = state.selectedKey === key;
-
   var _useNavBarPress = useNavBarPress({
-    key: key,
-    onPressCallback: onPressCallback
-  }, state),
-      onNavPress = _useNavBarPress.onNavPress;
-
+      key: key,
+      onPressCallback: onPressCallback
+    }, state),
+    onNavPress = _useNavBarPress.onNavPress;
   var _useStatusClasses = useStatusClasses(className, {
-    isSelected: isSelected
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isSelected: isSelected
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Button, _extends({
     id: key,
-    variant: "navItemButton",
+    variant: "variants.navBar.itemButton",
     onPress: onNavPress,
     className: classNames,
     color: isSelected ? 'white' : undefined
@@ -56,11 +48,9 @@ var NavBarItemButton = function NavBarItemButton(props) {
     }, sx)
   }));
 };
-
 NavBarItemButton.propTypes = {
   /**  Handler that is called when the press is released over the target. */
   onPress: PropTypes.func,
-
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string.isRequired
 };

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -2,48 +2,39 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
 import MenuDown from 'mdi-react/MenuDownIcon';
 import MenuUp from 'mdi-react/MenuUpIcon';
-import { Box, Icon, Text } from '../../index';
+import PropTypes from 'prop-types';
 import { useNavBarContext } from '../../context/NavBarContext';
 import { useStatusClasses } from '../../hooks';
+import { Box, Icon, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var NavBarItemHeader = function NavBarItemHeader(props) {
   var _context;
-
   var item = props.item;
   var icon = item.icon,
-      key = item.key,
-      className = item.className,
-      heading = item.heading;
+    key = item.key,
+    className = item.className,
+    heading = item.heading;
   var navBarState = useNavBarContext();
   var selectedKey = navBarState.selectedKey,
-      setExpandedKeys = navBarState.setExpandedKeys,
-      expandedKeys = navBarState.expandedKeys;
-
+    setExpandedKeys = navBarState.setExpandedKeys,
+    expandedKeys = navBarState.expandedKeys;
   var isExpanded = _includesInstanceProperty(expandedKeys).call(expandedKeys, key);
-
   var array = _mapInstanceProperty(_context = item.children).call(_context, function (i) {
     return i.key;
   });
-
   var childSelected = _includesInstanceProperty(array).call(array, navBarState.selectedKey);
-
   useEffect(function () {
     if (childSelected && isExpanded === false) {
       var _context2;
-
       setExpandedKeys(_concatInstanceProperty(_context2 = []).call(_context2, expandedKeys, [key]));
     }
   }, [selectedKey]);
-
   var _useStatusClasses = useStatusClasses(className, {
-    isSelected: childSelected && !isExpanded
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isSelected: childSelected && !isExpanded
+    }),
+    classNames = _useStatusClasses.classNames;
   var color = childSelected && !isExpanded ? 'white' : 'neutral.95';
   return ___EmotionJSX(Box, {
     variant: "navBar.itemHeaderContainer",
@@ -60,7 +51,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     },
     "aria-hidden": "true"
   }), ___EmotionJSX(Text, {
-    variant: "navBarHeaderText"
+    variant: "variants.navBar.headerText"
   }, heading), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
@@ -77,7 +68,6 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
     "aria-label": isExpanded ? 'Menu up' : 'Menu down'
   })));
 };
-
 NavBarItemHeader.propTypes = {
   item: PropTypes.shape({
     heading: PropTypes.string,

package/lib/components/NavBarSection/NavBarItemLink.js

@@ -10,41 +10,33 @@ 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", "id", "onPress"];
-
 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 PropTypes from 'prop-types';
-import { Link } from '../../index';
 import { useNavBarContext } from '../../context/NavBarContext';
-import { useStatusClasses, useNavBarPress } from '../../hooks';
+import { useNavBarPress, useStatusClasses } from '../../hooks';
+import { Link } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var NavBarItemLink = function NavBarItemLink(props) {
   var className = props.className,
-      key = props.id,
-      onPressCallback = props.onPress,
-      others = _objectWithoutProperties(props, _excluded);
-
+    key = props.id,
+    onPressCallback = props.onPress,
+    others = _objectWithoutProperties(props, _excluded);
   var state = useNavBarContext();
   var isSelected = state.selectedKey === key;
-
   var _useNavBarPress = useNavBarPress({
-    key: key,
-    onPressCallback: onPressCallback
-  }, state),
-      onNavPress = _useNavBarPress.onNavPress;
-
+      key: key,
+      onPressCallback: onPressCallback
+    }, state),
+    onNavPress = _useNavBarPress.onNavPress;
   var _useStatusClasses = useStatusClasses(className, {
-    isSelected: isSelected
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isSelected: isSelected
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Link, _extends({
     id: key,
-    variant: "buttons.navItemButton",
+    variant: "variants.navBar.itemButton",
     className: classNames,
     onPress: onNavPress,
     color: isSelected ? 'white' : undefined
@@ -55,14 +47,11 @@ var NavBarItemLink = function NavBarItemLink(props) {
     }, props.sx)
   }));
 };
-
 NavBarItemLink.propTypes = {
   /**  Specifies the location of the URL */
   href: PropTypes.string,
-
   /**  Handler that is called when the press is released over the target. */
   onPress: PropTypes.func,
-
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string.isRequired
 };

package/lib/components/NavBarSection/NavBarSection.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["hasSeparator", "title", "items"],
-    _excluded2 = ["key", "children"];
+  _excluded2 = ["key", "children"];
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
@@ -10,34 +10,30 @@ import React, { useRef } from 'react';
 import { useFocusManager } from '@react-aria/focus';
 import { useKeyboard } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
-import { Button, Separator, Text } from '../../';
+import { Button, Separator, Text } from '../..';
 import { useNavBarContext } from '../../context/NavBarContext';
 import NavBarItemBody from './NavBarItemBody';
 import NavBarItemHeader from './NavBarItemHeader';
+
 /**
  * Composed component that creates a group
  * with title, and separator options.
  *
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var NavBarSection = function NavBarSection(_ref) {
   var hasSeparator = _ref.hasSeparator,
-      title = _ref.title,
-      items = _ref.items,
-      others = _objectWithoutProperties(_ref, _excluded);
-
+    title = _ref.title,
+    items = _ref.items,
+    others = _objectWithoutProperties(_ref, _excluded);
   var ref = useRef();
-
   var childrenItems = _filterInstanceProperty(items).call(items, function (item) {
     return item.children;
   });
-
   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,
@@ -55,93 +51,68 @@ var NavBarSection = function NavBarSection(_ref) {
     }));
   })));
 };
-
 var SectionItem = function SectionItem(_ref2) {
   var item = _ref2.item;
-
   var key = item.key,
-      children = item.children,
-      others = _objectWithoutProperties(item, _excluded2);
-
-  var headerButtonRef = useRef();
+    children = item.children,
+    others = _objectWithoutProperties(item, _excluded2);
   var navBarState = useNavBarContext();
   var expandedKeys = navBarState.expandedKeys,
-      setExpandedKeys = navBarState.setExpandedKeys;
-
+    setExpandedKeys = navBarState.setExpandedKeys;
   var isExpanded = _includesInstanceProperty(expandedKeys).call(expandedKeys, key);
-
   var firstChildKey = children.length ? children[0].key : null;
   var lastChildKey = children.length ? children[children.length - 1].key : null;
-
   var onExpandedChange = function onExpandedChange(isOpen) {
     var newArray;
-
     if (isOpen) {
       var _context;
-
       newArray = _concatInstanceProperty(_context = []).call(_context, expandedKeys, [key]);
     } else {
       newArray = _filterInstanceProperty(expandedKeys).call(expandedKeys, function (thiskey) {
         return thiskey !== key;
       });
     }
-
     setExpandedKeys(newArray);
   };
-
   var focusManager = useFocusManager();
-
   var _onKeyDown = function onKeyDown(e, childKey) {
     var _e$target;
-
     switch (e.which) {
       case 39:
       case 40:
         if (childKey !== lastChildKey) {
           focusManager.focusNext();
         }
-
         e.preventDefault();
         break;
-
       case 37:
       case 38:
         if (childKey !== firstChildKey) {
           focusManager.focusPrevious();
         }
-
         e.preventDefault();
         break;
-
       case 27:
         onExpandedChange(false);
-        headerButtonRef.current.focus();
         break;
-
       case 32:
         if (childKey && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.href) {
           e.target.click();
         }
-
         break;
-
       default:
         break;
     }
   };
-
   var _useKeyboard = useKeyboard({
-    onKeyDown: function onKeyDown(e) {
-      _onKeyDown(e);
-
-      e.continuePropagation();
-    }
-  }),
-      keyboardProps = _useKeyboard.keyboardProps;
-
+      onKeyDown: function onKeyDown(e) {
+        _onKeyDown(e);
+        e.continuePropagation();
+      }
+    }),
+    keyboardProps = _useKeyboard.keyboardProps;
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, _extends({
-    ref: headerButtonRef,
-    variant: "navBarSectionButton",
+    variant: "variants.navBar.sectionButton",
     onPress: function onPress() {
       return onExpandedChange(!isExpanded);
     }
@@ -152,17 +123,14 @@ var SectionItem = function SectionItem(_ref2) {
     onKeyDown: _onKeyDown
   }));
 };
-
 NavBarSection.defaultProps = {
   hasSeparator: false
 };
 NavBarSection.propTypes = {
   /** If true, a separator will render at the end of the section */
   hasSeparator: PropTypes.bool,
-
   /** If present, this string will render at the top of the section */
   title: PropTypes.string,
-
   /**
    * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
    * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).

package/lib/components/NavBarSection/index.js

@@ -1,4 +1,4 @@
-export { default } from './NavBarSection';
+export { default as NavBarItem } from './NavBarItem';
 export { default as NavBarItemButton } from './NavBarItemButton';
 export { default as NavBarItemLink } from './NavBarItemLink';
-export { default as NavBarItem } from './NavBarItem';
+export { default } from './NavBarSection';

package/lib/components/NumberField/NumberField.js

@@ -10,25 +10,23 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
 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 } from 'react';
-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 { 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 MenuDown from 'mdi-react/MenuDownIcon';
+import MenuUp from 'mdi-react/MenuUpIcon';
+import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
-import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../../';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../..';
 import { useField, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+
 /**
  * Number fields allow users to enter a number, and increment or
  * decrement the value using stepper buttons.
@@ -37,43 +35,36 @@ import statuses from '../../utils/devUtils/constants/statuses';
  * and [useNumberFieldState](https://react-spectrum.adobe.com/react-stately/useNumberFieldState.html) from
  * React Stately.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
-      status = props.status;
-
+    status = props.status;
   var _useLocale = useLocale(),
-      locale = _useLocale.locale;
-
+    locale = _useLocale.locale;
   var state = useNumberFieldState(_objectSpread(_objectSpread({}, props), {}, {
     locale: locale
   }));
   var inputRef = React.useRef();
   var incrRef = React.useRef();
   var decRef = React.useRef();
-
   var _useNumberField = useNumberField(props, state, inputRef),
-      labelProps = _useNumberField.labelProps,
-      groupProps = _useNumberField.groupProps,
-      inputProps = _useNumberField.inputProps,
-      incrementButtonProps = _useNumberField.incrementButtonProps,
-      decrementButtonProps = _useNumberField.decrementButtonProps;
-
+    labelProps = _useNumberField.labelProps,
+    groupProps = _useNumberField.groupProps,
+    inputProps = _useNumberField.inputProps,
+    incrementButtonProps = _useNumberField.incrementButtonProps,
+    decrementButtonProps = _useNumberField.decrementButtonProps;
   var _useField = useField(props),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
-
   var ControlArrows = ___EmotionJSX(Box, {
-    variant: "numberField.arrows"
+    variant: "forms.numberField.arrows"
   }, ___EmotionJSX(IconButton, _extends({}, incrementButtonProps, {
     ref: decRef,
     tabIndex: "-1",
@@ -88,66 +79,60 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,
     size: 18
-  }))); // this needed to remove console warning in React 16
-  // I believe once we update to 17 - we can remove this
-
+  })));
 
+  // this needed to remove console warning in React 16
+  // I believe once we update to 17 - we can remove this
   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;
-
     var minValue = props.minValue;
-
     var trimmedInputValue = _trimInstanceProperty(_context = e.target.value).call(_context);
-
     var trimmedValueEvent = _objectSpread(_objectSpread({}, e), {}, {
       target: _objectSpread(_objectSpread({}, e.target), {}, {
         value: trimmedInputValue
       })
     });
-
     if (!trimmedInputValue && typeof minValue !== 'undefined') {
       var minValueEvent = _objectSpread(_objectSpread({}, e), {}, {
         target: _objectSpread(_objectSpread({}, e.target), {}, {
           value: minValue.toString()
         })
       });
-
       inputProps.onChange(minValueEvent);
     } else {
       inputProps.onChange(trimmedValueEvent);
     }
   };
-
   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
+    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,89 +142,67 @@ 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,
-
   /** A custom aria-label for the increment button.
    * If not provided, the localized string "Increment" is used. */
   incrementAriaLabel: PropTypes.string,
-
   /** Formatting options for the value displayed in the number field.
    * This also affects what characters are allowed to be typed by the user.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)
    * */
   formatOptions: PropTypes.shape({}),
-
   /** Whether the input is disabled. */
   isDisabled: PropTypes.bool,
-
   /** Whether the input can be selected but not changed by the user. */
   isReadOnly: PropTypes.bool,
-
   /** Whether user input is required on the input before form submission. */
   isRequired: PropTypes.bool,
-
   /** Whether the element should receive focus on render. */
   hasAutoFocus: PropTypes.bool,
-
   /**
    * 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,
-
   /** Handler that is called when the element's focus status changes. */
   onFocusChange: PropTypes.func,
-
   /** Handler that is called when a key is pressed. */
   onKeyDown: PropTypes.func,
-
   /** Handler that is called when a key is released. */
   onKeyUp: PropTypes.func,
-
   /** Temporary text that occupies the text input when it is empty. */
   placeholder: PropTypes.string,
-
   /** The amount that the input value changes with each increment or decrement "tick".
    * The step prop can be used to snap the value to certain increments.
    * You can read more about this prop here
    * [Step values](https://react-spectrum.adobe.com/react-aria/useNumberField.html#step-values)
    * */
   step: PropTypes.number,
-
   /** The smallest value allowed for the input. */
   minValue: PropTypes.number,
-
   /** The largest value allowed for the input. */
   maxValue: PropTypes.number,
-
   /** The rendered label for the field. */
   label: PropTypes.node,
-
   /** Text rendered below the input. */
   helperText: PropTypes.node,
-
   /** If present this prop will cause a help hint to render in the label of the field. */
   hintText: PropTypes.string,
-
   /**
    * Handler that is called when the value changes.
    * (value: number) => void
    */
   onChange: PropTypes.func,
-
   /** Determines the input status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /** The default value (uncontrolled). */
   defaultValue: PropTypes.number,
-
   /** The current value (controlled). */
   value: PropTypes.number
-}, ariaAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);