@pingux/astro 1.42.0-alpha.0 → 2.0.0-alpha.1

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

@@ -50,6 +50,8 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
 
 var _useColumnStyles = _interopRequireDefault(require("../../hooks/useColumnStyles"));
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _react2 = require("@emotion/react");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -66,12 +68,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var TextField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var helperText = props.helperText,
       slots = props.slots,
-      status = props.status,
-      wrapperProps = props.wrapperProps;
+      status = props.status;
 
   var _useField = (0, _hooks.useField)(props),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var inputRef = (0, _react.useRef)();
@@ -94,7 +96,7 @@ var TextField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   });
   var helperTextId = (0, _uuid.v4)();
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    variant: "forms.input.wrapper"
+    variant: "forms.input.fieldContainer"
   }, fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
   }), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({}, fieldLabelProps, {
@@ -103,11 +105,10 @@ var TextField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       gridRow: '1/5'
     }
   })), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    variant: "forms.input.container",
-    className: fieldControlProps.className
-  }, wrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
+    variant: "forms.input.fieldControlWrapper"
+  }, fieldControlWrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
     ref: inputRef
-  }, fieldControlProps, {
+  }, fieldControlInputProps, {
     "aria-invalid": status === 'error' && true,
     "aria-describedby": helperText && helperTextId
   })), slots === null || slots === void 0 ? void 0 : slots.inContainer), helperText && (0, _react2.jsx)(_.FieldHelperText, {
@@ -115,7 +116,7 @@ var TextField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-TextField.propTypes = _objectSpread({
+TextField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
 
@@ -203,18 +204,9 @@ TextField.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["default"].string,
 
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: _propTypes["default"].shape({}),
-
-  /** Props object that is spread directly into the input element. */
-  controlProps: _propTypes["default"].shape({}),
-
-  /** Props object that is spread directly into the label element. */
-  labelProps: _propTypes["default"].shape({}),
-
   /** Props object that is spread directly into the input wrapper element. */
   wrapperProps: _propTypes["default"].shape({})
-}, _ariaAttributes.ariaAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
 TextField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

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

@@ -48,6 +48,8 @@ var _2 = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
+
 var _constants = require("../Label/constants");
 
 var _CopyButton = _interopRequireDefault(require("../CopyText/CopyButton"));
@@ -78,7 +80,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     labelMode: {
       control: {
         type: 'select',
@@ -98,7 +100,7 @@ var _default = {
       },
       defaultValue: _statuses["default"].DEFAULT
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 

package/lib/cjs/components/TimeZonePicker/TimeZone.styles.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+var item = {
+  title: {
+    color: 'neutral.10',
+    fontSize: 'md',
+    whiteSpace: 'nowrap',
+    lineHeight: 1,
+    '.is-focused &': {
+      color: 'white'
+    }
+  },
+  subTitle: {
+    color: 'neutral.40',
+    fontSize: 'sm',
+    ml: 10,
+    '.is-focused &': {
+      color: 'white'
+    }
+  },
+  time: {
+    color: 'neutral.10',
+    fontSize: 'sm',
+    fontWeight: 1,
+    '.is-focused &': {
+      color: 'white'
+    }
+  }
+};
+var _default = {
+  item: item
+};
+exports["default"] = _default;

package/lib/cjs/components/TimeZonePicker/TimeZonePicker.js

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

package/lib/cjs/components/TooltipTrigger/Tooltip.js

@@ -22,7 +22,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _tooltip = require("@react-aria/tooltip");
+var _reactAria = require("react-aria");
 
 var _index = require("../../context/TooltipContext/index");
 
@@ -45,7 +45,7 @@ var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useContext = (0, _react.useContext)(_index.TooltipContext),
       state = _useContext.state;
 
-  var _useTooltip = (0, _tooltip.useTooltip)(props, state),
+  var _useTooltip = (0, _reactAria.useTooltip)(props, state),
       tooltipProps = _useTooltip.tooltipProps;
 
   var tooltipRef = (0, _react.useRef)();
@@ -56,9 +56,9 @@ var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   });
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: tooltipRef,
-    variant: "tooltip.tooltipContainer"
+    variant: "tooltip.container"
   }, tooltipProps, others), (0, _react2.jsx)(_Text["default"], {
-    variant: "tooltipContent"
+    variant: "variants.tooltip.content"
   }, children));
 });
 var _default = Tooltip;

package/lib/cjs/components/TooltipTrigger/Tooltip.styles.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.button = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _Buttons = require("../Button/Buttons.styles");
+
+var _Badge = require("../Badge/Badge.styles");
+
+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) { (0, _defineProperty2["default"])(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; }
+
+var container = {
+  p: 'sm'
+};
+
+var badge = _objectSpread(_objectSpread({}, _Badge.baseBadge), {}, {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    cursor: 'default',
+    outline: 'none'
+  }
+});
+
+var button = {
+  cursor: 'default',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    path: {
+      fill: 'neutral.20'
+    }
+  }
+};
+exports.button = button;
+
+var inline = _objectSpread(_objectSpread({}, _Buttons.text), {}, {
+  cursor: 'default',
+  alignSelf: 'flex-start',
+  '&.is-hovered, &.is-pressed': {
+    backgroundColor: 'inherit',
+    cursor: 'default',
+    textDecoration: 'inherit'
+  }
+});
+
+var content = {
+  maxWidth: '10em',
+  maxHeight: '15em',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: '10',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box !important',
+  wordBreak: 'break-word',
+  '.is-right > * > &, .is-left > * > &': {
+    maxWidth: '24em',
+    maxHeight: '6.5em',
+    WebkitLineClamp: '4'
+  }
+};
+var _default = {
+  container: container,
+  badge: badge,
+  button: button,
+  inline: inline,
+  content: content
+};
+exports["default"] = _default;

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.js

@@ -28,13 +28,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _interactions = require("@react-aria/interactions");
-
-var _overlays = require("@react-aria/overlays");
+var _reactAria = require("react-aria");
 
-var _tooltip = require("@react-aria/tooltip");
+var _reactStately = require("react-stately");
 
-var _tooltip2 = require("@react-stately/tooltip");
+var _interactions = require("@react-aria/interactions");
 
 var _hooks = require("../../hooks");
 
@@ -77,7 +75,7 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       trigger = _React$Children$toArr2[0],
       tooltip = _React$Children$toArr2[1];
 
-  var state = (0, _tooltip2.useTooltipTriggerState)(props);
+  var state = (0, _reactStately.useTooltipTriggerState)(props);
   var tooltipTriggerRef = (0, _react.useRef)();
   var overlayRef = (0, _react.useRef)();
   var tooltipRef = targetRef || tooltipTriggerRef;
@@ -88,14 +86,14 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return tooltipRef.current;
   });
 
-  var _useTooltipTrigger = (0, _tooltip.useTooltipTrigger)({
+  var _useTooltipTrigger = (0, _reactAria.useTooltipTrigger)({
     isDisabled: isDisabled,
     trigger: triggerAction
   }, state, tooltipRef),
       triggerProps = _useTooltipTrigger.triggerProps,
       tooltipProps = _useTooltipTrigger.tooltipProps;
 
-  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
+  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
     placement: (0, _concat["default"])(_context = "".concat(direction, " ")).call(_context, align),
     targetRef: tooltipRef,
     overlayRef: overlayRef,

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.withWidthProp = exports.withDirectionProp = exports.withDelayProp = exports.withArrowCrossOffsetProp = exports.withAlignProp = exports.isOpen = exports["default"] = exports.TextWithTooltip = exports.IconWithTooltip = exports.Disabled = exports.Default = exports.ChipWithTooltip = void 0;
+exports.withWidthProp = exports.withDirectionProp = exports.withDelayProp = exports.withArrowCrossOffsetProp = exports.withAlignProp = exports.isOpen = exports["default"] = exports.TextWithTooltip = exports.IconWithTooltip = exports.Disabled = exports.Default = exports.BadgeWithTooltip = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -107,7 +107,7 @@ var IconWithTooltip = function IconWithTooltip() {
   return (0, _react2.jsx)(_index.Box, {
     pl: 50
   }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_IconButton["default"], {
-    variant: "tooltipIconButton"
+    variant: "tooltip.button"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _AccountIcon["default"]
   })), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
@@ -115,11 +115,11 @@ var IconWithTooltip = function IconWithTooltip() {
 
 exports.IconWithTooltip = IconWithTooltip;
 
-var ChipWithTooltip = function ChipWithTooltip() {
+var BadgeWithTooltip = function BadgeWithTooltip() {
   return (0, _react2.jsx)(_index.Box, {
     pl: 50
   }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
-    variant: "tooltipChip",
+    variant: "variants.tooltip.badge",
     bg: "neutral.10"
   }, (0, _react2.jsx)(_Text["default"], {
     variant: "label",
@@ -130,13 +130,13 @@ var ChipWithTooltip = function ChipWithTooltip() {
   }, "Some text")), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
 };
 
-exports.ChipWithTooltip = ChipWithTooltip;
+exports.BadgeWithTooltip = BadgeWithTooltip;
 
 var TextWithTooltip = function TextWithTooltip() {
   return (0, _react2.jsx)(_index.Box, {
     pl: 50
   }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
-    variant: "tooltipInline"
+    variant: "variants.tooltip.inline"
   }, "Some text"), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
 };
 

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

@@ -36,14 +36,10 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _noop = _interopRequireDefault(require("lodash/noop"));
 
-var _label = require("@react-aria/label");
+var _reactAria = require("react-aria");
 
 var _interactions = require("@react-aria/interactions");
 
-var _focus = require("@react-aria/focus");
-
-var _utils = require("@react-aria/utils");
-
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -52,7 +48,7 @@ var _hooks = require("../../hooks");
 
 var _constants = require("../../components/Label/constants");
 
-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"];
+var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"];
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -114,6 +110,7 @@ var useField = function useField() {
       statusClasses = props.statusClasses,
       type = props.type,
       value = props.value,
+      wrapperProps = props.wrapperProps,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded); // 0 could be a valid input for fields, but null, undefined, and '' are not
 
   var _useState = (0, _react.useState)(!!value || value === 0),
@@ -154,21 +151,42 @@ var useField = function useField() {
     return onChange(e);
   };
 
-  var _useLabel = (0, _label.useLabel)(_objectSpread(_objectSpread({}, props), controlProps)),
+  var _useLabel = (0, _reactAria.useLabel)(_objectSpread(_objectSpread({}, props), controlProps)),
       raLabelProps = _useLabel.labelProps,
       raFieldProps = _useLabel.fieldProps;
 
-  var _useFocusRing = (0, _focus.useFocusRing)(),
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, _objectSpread((0, _defineProperty2["default"])({
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, _objectSpread(_objectSpread((0, _defineProperty2["default"])({
+    'field-control__wrapper': true,
+    // generates 'field-control__wrapper' class
+    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 = (0, _hooks.useStatusClasses)(className, _objectSpread(_objectSpread((0, _defineProperty2["default"])({
+    'field-control__input': true,
+    // generates 'field-control__input' class
     hasNoStatusIndicator: hasNoStatusIndicator,
     isFocused: isFocusVisible,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly
-  }, "is-".concat(status), true), statusClasses)),
-      classNames = _useStatusClasses.classNames;
+  }, "is-".concat(status), true), statusClasses), controlProps === null || controlProps === void 0 ? void 0 : controlProps.statusClasses)),
+      inputClasses = _useStatusClasses2.classNames;
+
+  var _useStatusClasses3 = (0, _hooks.useStatusClasses)(className, _objectSpread(_objectSpread((0, _defineProperty2["default"])({
+    '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;
 
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
       ariaProps = _getAriaAttributeProp.ariaProps,
@@ -184,7 +202,7 @@ var useField = function useField() {
   var isLeftLabel = labelMode === _constants.modes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _constants.modes.LEFT;
   var isFloatLabelActive = isFloatLabel && (hasValue || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
 
-  var _useStatusClasses2 = (0, _hooks.useStatusClasses)(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, {
+  var _useStatusClasses4 = (0, _hooks.useStatusClasses)(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, _objectSpread(_objectSpread({
     'field-container': true,
     // generates 'field-container' class
     hasValue: hasValue,
@@ -192,21 +210,21 @@ var useField = function useField() {
     isLeftLabel: isLeftLabel,
     isFloatLabel: isFloatLabel,
     isFloatLabelActive: isFloatLabelActive
-  }),
-      containerClasses = _useStatusClasses2.classNames;
+  }, statusClasses), containerProps === null || containerProps === void 0 ? void 0 : containerProps.statusClasses)),
+      containerClasses = _useStatusClasses4.classNames;
 
-  var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaProps), (0, _utils.mergeProps)(containerProps, focusWithinProps)), {}, {
+  var fieldContainerProps = _objectSpread(_objectSpread(_objectSpread({}, nonAriaProps), (0, _reactAria.mergeProps)(containerProps, focusWithinProps)), {}, {
     className: containerClasses,
     sx: _objectSpread({
       position: 'relative'
     }, containerProps === null || containerProps === void 0 ? void 0 : containerProps.sx)
   });
 
-  var fieldControlProps = _objectSpread(_objectSpread(_objectSpread({
+  var fieldControlInputProps = _objectSpread(_objectSpread(_objectSpread({
     autoComplete: autocomplete || autoComplete,
     autoCorrect: autoCorrect,
     autoFocus: hasAutoFocus,
-    className: classNames,
+    className: inputClasses,
     defaultSelected: isDefaultSelected,
     defaultValue: defaultValue,
     disabled: isDisabled,
@@ -223,22 +241,27 @@ var useField = function useField() {
     spellCheck: spellCheck,
     type: type,
     value: value
-  }, ariaProps), raFieldProps), (0, _utils.mergeProps)({
+  }, ariaProps), raFieldProps), (0, _reactAria.mergeProps)({
     onBlur: onBlur,
     onFocus: onFocus
   }, (0, _omit["default"])(controlProps, 'data-testid'), focusProps));
 
   var fieldLabelProps = _objectSpread(_objectSpread({
     children: label,
-    className: classNames,
+    className: labelClasses,
     hintText: hintText,
     isRequired: isRequired,
     mode: labelMode
   }, raLabelProps), labelProps);
 
+  var fieldControlWrapperProps = _objectSpread({
+    className: wrapperClasses
+  }, wrapperProps);
+
   return {
     fieldContainerProps: fieldContainerProps,
-    fieldControlProps: fieldControlProps,
+    fieldControlInputProps: fieldControlInputProps,
+    fieldControlWrapperProps: fieldControlWrapperProps,
     fieldLabelProps: fieldLabelProps
   };
 };