@pingux/astro 1.41.0-alpha.5 → 1.42.0-alpha.0

package/lib/components/Tab/Tab.js

@@ -3,9 +3,11 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr", "title"];
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { mergeProps, useFocusRing, useTab } from 'react-aria';
-import { Item as Tab } from 'react-stately';
+import { useTab } from '@react-aria/tabs';
+import { useFocusRing } from '@react-aria/focus';
 import { Pressable, useHover } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+import { Item as Tab } from '@react-stately/collections';
 import { TabsContext } from '../Tabs';
 import { useStatusClasses, usePropWarning } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';

package/lib/components/TabPicker/TabPicker.js

@@ -10,10 +10,10 @@ import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
-import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
 import PropTypes from 'prop-types';
-import { Item as Tab } from 'react-stately';
+import { Item as Tab } from '@react-stately/collections';
+import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
+import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
 import { Pressable } from '@react-aria/interactions';
 import { useStatusClasses } from '../../hooks';
 import { Box, Text, PopoverMenu, Icon, Menu } from '../..';

package/lib/components/Table/Table.js

@@ -20,7 +20,7 @@ var Table = function Table(props) {
 
   return ___EmotionJSX(Box, _extends({
     as: "table",
-    variant: "table.container"
+    variant: "table.table"
   }, others), children);
 };
 

package/lib/components/TableBody/TableBody.js

@@ -19,7 +19,7 @@ var TableBody = function TableBody(props) {
       others = _objectWithoutProperties(props, _excluded);
 
   return ___EmotionJSX(Box, _extends({
-    variant: "table.body",
+    variant: "table.tableBody",
     as: "tbody"
   }, others), children);
 };

package/lib/components/TableCaption/TableCaption.js

@@ -19,7 +19,7 @@ var TableCaption = function TableCaption(props) {
       others = _objectWithoutProperties(props, _excluded);
 
   return ___EmotionJSX(Box, _extends({
-    variant: "table.caption",
+    variant: "table.tableCaption",
     as: "caption"
   }, others), children);
 };

package/lib/components/TableCell/TableCell.js

@@ -21,7 +21,7 @@ var TableCell = function TableCell(props) {
       others = _objectWithoutProperties(props, _excluded);
 
   return ___EmotionJSX(Box, _extends({
-    variant: isHeading ? 'table.head' : 'table.data',
+    variant: isHeading ? 'table.tableHead' : 'table.tableData',
     as: isHeading ? 'th' : 'td'
   }, others), children);
 };

package/lib/components/TableRow/TableRow.js

@@ -19,7 +19,7 @@ var TableRow = function TableRow(props) {
       others = _objectWithoutProperties(props, _excluded);
 
   return ___EmotionJSX(Box, _extends({
-    variant: "table.row",
+    variant: "table.tableRow",
     as: "tr"
   }, others), children);
 };

package/lib/components/Tabs/Tabs.js

@@ -21,8 +21,8 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useTabList, useTabPanel } from 'react-aria';
-import { useTabListState } from 'react-stately';
+import { useTabList, useTabPanel } from '@react-aria/tabs';
+import { useTabListState } from '@react-stately/tabs';
 import Box from '../Box';
 import { CollectionTab } from '../Tab';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';

package/lib/components/Tabs/Tabs.stories.js

@@ -8,7 +8,7 @@ import Tabs from './Tabs';
 import Tab from '../Tab';
 import Icon from '../Icon';
 import Text from '../Text';
-import { Badge } from '../../index';
+import { Chip } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Tabs',
@@ -198,7 +198,7 @@ export var ContentSlots = function ContentSlots() {
     minWidth: 20
   };
 
-  var afterTabNode = ___EmotionJSX(Badge, {
+  var afterTabNode = ___EmotionJSX(Chip, {
     sx: nodeSx
   }, "14");
 

package/lib/components/TextAreaField/TextAreaField.js

@@ -22,7 +22,6 @@ import { Box, FieldHelperText, Label, TextArea } from '../../';
 import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { useColumnStyles, useField, useLabelHeight, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 /**
  * Combines a textarea, label, and helper text for a complete, form-ready solution.
  */
@@ -42,12 +41,11 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     statusClasses: statusClasses
   }, props)),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var containerRef = useRef();
-  var fieldControlWrapperRef = useRef();
+  var inputContainerRef = useRef();
   var labelRef = useRef();
   var labelWrapperRef = useRef();
   var slotContainer = useRef();
@@ -70,7 +68,7 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
 
 
   var resizeSlotContainer = function resizeSlotContainer() {
-    fieldControlWrapperRef.current.style.width = textAreaRef.current.style.width;
+    inputContainerRef.current.style.width = textAreaRef.current.style.width;
   };
 
   var onResize = useCallback(function () {
@@ -115,27 +113,27 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
 
   var wrappedLabel = ___EmotionJSX(Box, {
-    variant: "forms.textarea.floatLabelWrapper",
+    variant: "boxes.floatLabelWrapper",
     ref: labelWrapperRef
   }, labelNode);
 
   return ___EmotionJSX(Box, _extends({
-    variant: "forms.input.fieldContainer"
+    variant: "forms.input.wrapper"
   }, fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
     ref: containerRef,
     maxWidth: "100%"
-  }), props.labelMode === 'float' ? wrappedLabel : labelNode, ___EmotionJSX(Box, _extends({
+  }), props.labelMode === 'float' ? wrappedLabel : labelNode, ___EmotionJSX(Box, {
     isRow: true,
-    variant: "forms.input.fieldControlWrapper",
+    variant: "forms.input.container",
+    className: fieldControlProps.className,
     minWidth: "40px",
     maxWidth: "100%",
-    ref: fieldControlWrapperRef
-  }, fieldControlWrapperProps), ___EmotionJSX(TextArea, _extends({
+    ref: inputContainerRef
+  }, ___EmotionJSX(TextArea, _extends({
     ref: textAreaRef,
-    rows: rows,
-    variant: "forms.textarea.baseField"
-  }, fieldControlInputProps, {
+    rows: rows
+  }, fieldControlProps, {
     sx: slots !== null && slots !== void 0 && slots.inContainer ? {
       paddingRight: '35px'
     } : {
@@ -144,14 +142,14 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-invalid": status === 'error' && true,
     "aria-describedby": helperText && helperTextId
   })), (slots === null || slots === void 0 ? void 0 : slots.inContainer) && ___EmotionJSX(Box, {
-    variant: "forms.textarea.containerSlot",
+    variant: "boxes.textFieldInContainerSlot",
     ref: slotContainer
   }, slots === null || slots === void 0 ? void 0 : slots.inContainer)), helperText && ___EmotionJSX(FieldHelperText, {
     status: status,
     id: helperTextId
   }, helperText));
 });
-TextAreaField.propTypes = _objectSpread(_objectSpread({
+TextAreaField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
 
@@ -238,12 +236,21 @@ TextAreaField.propTypes = _objectSpread(_objectSpread({
   /** Determines the textarea status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
 
+  /** 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({}),
+
   /** 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
   })
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes);
 TextAreaField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

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

@@ -20,7 +20,6 @@ import SearchIcon from 'mdi-react/SearchIcon';
 import TextAreaField from '.';
 import { Box, Icon } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { modes as labelModes } from '../Label/constants';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -34,7 +33,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -77,12 +76,15 @@ export default {
     id: {},
     autocomplete: {},
     className: {},
+    containerProps: {},
+    labelProps: {},
+    controlProps: {},
     value: {
       control: {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes)
 };
 
 var IconSlot = ___EmotionJSX(Box, {

package/lib/components/TextField/TextField.js

@@ -22,7 +22,6 @@ import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttr
 import { useField, useLabelHeight, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import useColumnStyles from '../../hooks/useColumnStyles';
-import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 /**
  * Combines a text input, label, and helper text for a complete, form-ready solution.
  */
@@ -31,12 +30,12 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
       slots = props.slots,
-      status = props.status;
+      status = props.status,
+      wrapperProps = props.wrapperProps;
 
   var _useField = useField(props),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var inputRef = useRef();
@@ -59,7 +58,7 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   var helperTextId = uuid();
   return ___EmotionJSX(Box, _extends({
-    variant: "forms.input.fieldContainer"
+    variant: "forms.input.wrapper"
   }, fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
   }), ___EmotionJSX(Label, _extends({}, fieldLabelProps, {
@@ -68,10 +67,11 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
       gridRow: '1/5'
     }
   })), ___EmotionJSX(Box, _extends({
-    variant: "forms.input.fieldControlWrapper"
-  }, fieldControlWrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, ___EmotionJSX(Input, _extends({
+    variant: "forms.input.container",
+    className: fieldControlProps.className
+  }, wrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, ___EmotionJSX(Input, _extends({
     ref: inputRef
-  }, fieldControlInputProps, {
+  }, fieldControlProps, {
     "aria-invalid": status === 'error' && true,
     "aria-describedby": helperText && helperTextId
   })), slots === null || slots === void 0 ? void 0 : slots.inContainer), helperText && ___EmotionJSX(FieldHelperText, {
@@ -79,7 +79,7 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-TextField.propTypes = _objectSpread(_objectSpread({
+TextField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
 
@@ -167,9 +167,18 @@ TextField.propTypes = _objectSpread(_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({}),
+
   /** Props object that is spread directly into the input wrapper element. */
   wrapperProps: PropTypes.shape({})
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
+}, ariaAttributesBasePropTypes);
 TextField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

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

@@ -22,7 +22,6 @@ import isEmpty from 'lodash/isEmpty';
 import TextField from '.';
 import { Box } from '../../';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { modes as labelModes } from '../Label/constants';
 import CopyButton from '../CopyText/CopyButton';
 import statuses from '../../utils/devUtils/constants/statuses.js';
@@ -38,7 +37,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     labelMode: {
       control: {
         type: 'select',
@@ -58,7 +57,7 @@ export default {
       },
       defaultValue: statuses.DEFAULT
     }
-  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(_ref) {
   var variant = _ref.variant,

package/lib/components/TimeZonePicker/TimeZonePicker.js

@@ -182,11 +182,11 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       }, ___EmotionJSX(Box, {
         flexDirection: "row"
       }, ___EmotionJSX(Text, {
-        variant: "variants.timeZone.item.title"
+        variant: "timeZone.title"
       }, timeZone), ___EmotionJSX(Text, {
-        variant: "variants.timeZone.item.subTitle"
+        variant: "timeZone.subTitle"
       }, gmt)), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
-        variant: "variants.timeZone.item.time"
+        variant: "timeZone.time"
       }, time))));
     });
   };
@@ -202,7 +202,7 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [emptySearchText, filteredTimezones, search, timeZones]);
   var comboBoxFieldProps = useMemo(function () {
     return _objectSpread({
-      containerProps: {
+      controlProps: {
         sx: {
           width: 400,
           fontSize: 'md'

package/lib/components/TooltipTrigger/Tooltip.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children"];
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
-import { useTooltip } from 'react-aria';
+import { useTooltip } from '@react-aria/tooltip';
 import { TooltipContext } from '../../context/TooltipContext/index';
 import Box from '../Box';
 import Text from '../Text';
@@ -25,9 +25,9 @@ var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   return ___EmotionJSX(Box, _extends({
     ref: tooltipRef,
-    variant: "tooltip.container"
+    variant: "tooltip.tooltipContainer"
   }, tooltipProps, others), ___EmotionJSX(Text, {
-    variant: "variants.tooltip.content"
+    variant: "tooltipContent"
   }, children));
 });
 export default Tooltip;

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -4,9 +4,10 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useOverlayPosition, useTooltipTrigger } from 'react-aria';
-import { useTooltipTriggerState } from 'react-stately';
 import { PressResponder } from '@react-aria/interactions';
+import { useOverlayPosition } from '@react-aria/overlays';
+import { useTooltipTrigger } from '@react-aria/tooltip';
+import { useTooltipTriggerState } from '@react-stately/tooltip';
 import { useStatusClasses, usePropWarning } from '../../hooks';
 import { TooltipContext } from '../../context/TooltipContext/index';
 import PopoverContainer from '../PopoverContainer';

package/lib/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -62,16 +62,16 @@ export var IconWithTooltip = function IconWithTooltip() {
   return ___EmotionJSX(Box, {
     pl: 50
   }, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(IconButton, {
-    variant: "tooltip.button"
+    variant: "tooltipIconButton"
   }, ___EmotionJSX(Icon, {
     icon: AccountIcon
   })), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
 };
-export var BadgeWithTooltip = function BadgeWithTooltip() {
+export var ChipWithTooltip = function ChipWithTooltip() {
   return ___EmotionJSX(Box, {
     pl: 50
   }, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, {
-    variant: "variants.tooltip.badge",
+    variant: "tooltipChip",
     bg: "neutral.10"
   }, ___EmotionJSX(Text, {
     variant: "label",
@@ -85,6 +85,6 @@ export var TextWithTooltip = function TextWithTooltip() {
   return ___EmotionJSX(Box, {
     pl: 50
   }, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, {
-    variant: "variants.tooltip.inline"
+    variant: "tooltipInline"
   }, "Some text"), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
 };

package/lib/hooks/useField/useField.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-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"];
+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"];
 
 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; }
 
@@ -18,8 +18,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { useEffect, useState } from 'react';
 import omit from 'lodash/omit';
 import noop from 'lodash/noop';
-import { mergeProps, useFocusRing, useLabel } from 'react-aria';
+import { useLabel } from '@react-aria/label';
 import { useFocusWithin } from '@react-aria/interactions';
+import { useFocusRing } from '@react-aria/focus';
+import { mergeProps } from '@react-aria/utils';
 import { getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { useStatusClasses } from '../../hooks';
@@ -82,7 +84,6 @@ var useField = function useField() {
       statusClasses = props.statusClasses,
       type = props.type,
       value = props.value,
-      wrapperProps = props.wrapperProps,
       others = _objectWithoutProperties(props, _excluded); // 0 could be a valid input for fields, but null, undefined, and '' are not
 
 
@@ -132,34 +133,13 @@ var useField = function useField() {
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
-  var _useStatusClasses = useStatusClasses(className, _objectSpread(_objectSpread(_defineProperty({
-    'field-control__wrapper': true,
-    // generates 'field-control__wrapper' class
+  var _useStatusClasses = useStatusClasses(className, _objectSpread(_defineProperty({
     hasNoStatusIndicator: hasNoStatusIndicator,
     isFocused: isFocusVisible,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly
-  }, "is-".concat(status), true), statusClasses), wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.statusClasses)),
-      wrapperClasses = _useStatusClasses.classNames;
-
-  var _useStatusClasses2 = useStatusClasses(className, _objectSpread(_objectSpread(_defineProperty({
-    'field-control__input': true,
-    // generates 'field-control__input' class
-    hasNoStatusIndicator: hasNoStatusIndicator,
-    isFocused: isFocusVisible,
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly
-  }, "is-".concat(status), true), statusClasses), controlProps === null || controlProps === void 0 ? void 0 : controlProps.statusClasses)),
-      inputClasses = _useStatusClasses2.classNames;
-
-  var _useStatusClasses3 = useStatusClasses(className, _objectSpread(_objectSpread(_defineProperty({
-    'field-label': true,
-    hasNoStatusIndicator: hasNoStatusIndicator,
-    isFocused: isFocusVisible,
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly
-  }, "is-".concat(status), true), statusClasses), labelProps === null || labelProps === void 0 ? void 0 : labelProps.statusClasses)),
-      labelClasses = _useStatusClasses3.classNames;
+  }, "is-".concat(status), true), statusClasses)),
+      classNames = _useStatusClasses.classNames;
 
   var _getAriaAttributeProp = getAriaAttributeProps(others),
       ariaProps = _getAriaAttributeProp.ariaProps,
@@ -175,7 +155,7 @@ var useField = function useField() {
   var isLeftLabel = labelMode === labelModes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === labelModes.LEFT;
   var isFloatLabelActive = isFloatLabel && (hasValue || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
 
-  var _useStatusClasses4 = useStatusClasses(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, _objectSpread(_objectSpread({
+  var _useStatusClasses2 = useStatusClasses(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, {
     'field-container': true,
     // generates 'field-container' class
     hasValue: hasValue,
@@ -183,8 +163,8 @@ var useField = function useField() {
     isLeftLabel: isLeftLabel,
     isFloatLabel: isFloatLabel,
     isFloatLabelActive: isFloatLabelActive
-  }, statusClasses), containerProps === null || containerProps === void 0 ? void 0 : containerProps.statusClasses)),
-      containerClasses = _useStatusClasses4.classNames;
+  }),
+      containerClasses = _useStatusClasses2.classNames;
 
   var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaProps), mergeProps(containerProps, focusWithinProps)), {}, {
     className: containerClasses,
@@ -193,11 +173,11 @@ var useField = function useField() {
     }, containerProps === null || containerProps === void 0 ? void 0 : containerProps.sx)
   });
 
-  var fieldControlInputProps = _objectSpread(_objectSpread(_objectSpread({
+  var fieldControlProps = _objectSpread(_objectSpread(_objectSpread({
     autoComplete: autocomplete || autoComplete,
     autoCorrect: autoCorrect,
     autoFocus: hasAutoFocus,
-    className: inputClasses,
+    className: classNames,
     defaultSelected: isDefaultSelected,
     defaultValue: defaultValue,
     disabled: isDisabled,
@@ -221,20 +201,15 @@ var useField = function useField() {
 
   var fieldLabelProps = _objectSpread(_objectSpread({
     children: label,
-    className: labelClasses,
+    className: classNames,
     hintText: hintText,
     isRequired: isRequired,
     mode: labelMode
   }, raLabelProps), labelProps);
 
-  var fieldControlWrapperProps = _objectSpread({
-    className: wrapperClasses
-  }, wrapperProps);
-
   return {
     fieldContainerProps: fieldContainerProps,
-    fieldControlInputProps: fieldControlInputProps,
-    fieldControlWrapperProps: fieldControlWrapperProps,
+    fieldControlProps: fieldControlProps,
     fieldLabelProps: fieldLabelProps
   };
 };