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

package/lib/cjs/components/Switch/Switch.js

@@ -22,7 +22,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _visuallyHidden = require("@react-aria/visually-hidden");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -43,7 +43,7 @@ var Switch = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var inputProps = props.inputProps;
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "forms.switch.container"
-  }, props), (0, _react2.jsx)(_reactAria.VisuallyHidden, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  }, props), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "input"
   }, inputProps, {
     ref: ref

package/lib/cjs/components/SwitchField/SwitchField.js

@@ -40,13 +40,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _omit = _interopRequireDefault(require("lodash/omit"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _toggle = require("@react-stately/toggle");
 
-var _reactStately = require("react-stately");
+var _switch = require("@react-aria/switch");
 
 var _interactions = require("@react-aria/interactions");
 
@@ -58,8 +58,6 @@ var _hooks = require("../../hooks");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
-var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
-
 var _react2 = require("@emotion/react");
 
 var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onChange", "value", "name", "id", "isDisabled", "isReadOnly", "isRequired", "hasAutoFocus", "onFocus", "onBlur", "onFocusChange", "onKeyDown", "onKeyUp", "status", "controlProps"];
@@ -106,18 +104,18 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return switchRef.current;
   });
-  var state = (0, _reactStately.useToggleState)(_objectSpread({
+  var state = (0, _toggle.useToggleState)(_objectSpread({
     defaultSelected: isDefaultSelected
   }, props));
 
   var _usePress = (0, _interactions.usePress)({
     isDisabled: isDisabled
   }),
-      pressProps = _usePress.pressProps;
+      containerPressProps = _usePress.pressProps;
 
   var whitelistedProps = (0, _omit["default"])(props, (0, _keys["default"])(others));
 
-  var _useSwitch = (0, _reactAria.useSwitch)(_objectSpread({
+  var _useSwitch = (0, _switch.useSwitch)(_objectSpread({
     children: label
   }, whitelistedProps), state, switchRef),
       inputProps = _useSwitch.inputProps;
@@ -128,12 +126,11 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({
     statusClasses: statusClasses
-  }, pressProps), props), {}, {
+  }, containerPressProps), props), {}, {
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var unhandledAriaProps = {
@@ -142,17 +139,23 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
   return (0, _react2.jsx)(_.Box, fieldContainerProps, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
     variant: "forms.switch.label"
-  }, fieldLabelProps), (0, _react2.jsx)(_.Box, fieldControlWrapperProps, (0, _react2.jsx)(_.Switch, (0, _extends2["default"])({
+  }, fieldLabelProps), (0, _react2.jsx)(_.Switch, (0, _extends2["default"])({
     ref: switchRef,
-    inputProps: fieldControlInputProps
-  }, unhandledAriaProps))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+    inputProps: fieldControlProps
+  }, unhandledAriaProps)), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
   }, helperText));
 });
-SwitchField.propTypes = _objectSpread(_objectSpread({
+SwitchField.propTypes = _objectSpread({
   /** A list of class names to apply to the input element. */
   className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_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({}),
+
   /** Whether the element should receive focus on render. */
   hasAutoFocus: _propTypes["default"].bool,
 
@@ -183,6 +186,9 @@ SwitchField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
 
+  /** Props object that is spread directly into the label element. */
+  labelProps: _propTypes["default"].shape({}),
+
   /** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
   name: _propTypes["default"].string,
 
@@ -209,7 +215,7 @@ SwitchField.propTypes = _objectSpread(_objectSpread({
 
   /** The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */
   value: _propTypes["default"].string
-}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 SwitchField.defaultProps = {
   isDisabled: false,
   isReadOnly: false,

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

@@ -40,8 +40,6 @@ var _ = _interopRequireDefault(require("."));
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
-
 var _index = require("../../index");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -66,7 +64,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -100,13 +98,16 @@ var _default = {
     isReadOnly: {},
     isDefaultSelected: {},
     hasAutoFocus: {},
+    containerProps: {},
+    labelProps: {},
+    controlProps: {},
     id: {},
     isSelected: {
       control: {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 

package/lib/cjs/components/Tab/Tab.js

@@ -24,12 +24,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _tabs = require("@react-aria/tabs");
 
-var _reactStately = require("react-stately");
+var _focus = require("@react-aria/focus");
 
 var _interactions = require("@react-aria/interactions");
 
+var _utils = require("@react-aria/utils");
+
+var _collections = require("@react-stately/collections");
+
 var _Tabs = require("../Tabs");
 
 var _hooks = require("../../hooks");
@@ -76,7 +80,7 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var isDisabled = tabsDisabled || tabDisabled || state.disabledKeys.has(key);
   var isSelected = state.selectedKey === key;
 
-  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+  var _useFocusRing = (0, _focus.useFocusRing)(),
       isFocusVisible = _useFocusRing.isFocusVisible,
       focusProps = _useFocusRing.focusProps;
 
@@ -102,7 +106,7 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return tabRef.current;
   });
 
-  var _useTab = (0, _reactAria.useTab)({
+  var _useTab = (0, _tabs.useTab)({
     key: key,
     isDisabled: isDisabled
   }, state, tabRef),
@@ -113,7 +117,7 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     className: classNames,
     variant: "tab"
-  }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), otherItemProps, {
+  }, (0, _utils.mergeProps)(focusProps, hoverProps, tabProps), otherItemProps, {
     ref: tabRef,
     title: titleAttr || undefined
   }), icon, (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
@@ -127,7 +131,7 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       items: itemProps.list,
       state: state,
       item: item
-    }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), otherItemProps));
+    }, (0, _utils.mergeProps)(focusProps, hoverProps, tabProps), otherItemProps));
   }
 
   if (mode === 'tooltip') {
@@ -178,5 +182,5 @@ var TabLine = function TabLine(props) {
 
 
 exports.TabLine = TabLine;
-var _default = _reactStately.Item;
+var _default = _collections.Item;
 exports["default"] = _default;

package/lib/cjs/components/TabPicker/TabPicker.js

@@ -38,13 +38,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
+var _collections = require("@react-stately/collections");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
 
-var _reactStately = require("react-stately");
+var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
 
 var _interactions = require("@react-aria/interactions");
 
@@ -228,7 +228,7 @@ var TabPicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     selectedKeys: [selectionManager.focusedKey],
     ref: menuRef
   }, (0, _map["default"])(items).call(items, function (tab) {
-    return (0, _react2.jsx)(_reactStately.Item, {
+    return (0, _react2.jsx)(_collections.Item, {
       role: tab.role,
       key: tab.key
     }, tab.name);

package/lib/cjs/components/Table/Table.js

@@ -35,7 +35,7 @@ var Table = function Table(props) {
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "table",
-    variant: "table.container"
+    variant: "table.table"
   }, others), children);
 };
 

package/lib/cjs/components/TableBody/TableBody.js

@@ -34,7 +34,7 @@ var TableBody = function TableBody(props) {
   var children = props.children,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    variant: "table.body",
+    variant: "table.tableBody",
     as: "tbody"
   }, others), children);
 };

package/lib/cjs/components/TableCaption/TableCaption.js

@@ -34,7 +34,7 @@ var TableCaption = function TableCaption(props) {
   var children = props.children,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    variant: "table.caption",
+    variant: "table.tableCaption",
     as: "caption"
   }, others), children);
 };

package/lib/cjs/components/TableCell/TableCell.js

@@ -37,7 +37,7 @@ var TableCell = function TableCell(props) {
       isHeading = props.isHeading,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    variant: isHeading ? 'table.head' : 'table.data',
+    variant: isHeading ? 'table.tableHead' : 'table.tableData',
     as: isHeading ? 'th' : 'td'
   }, others), children);
 };

package/lib/cjs/components/TableRow/TableRow.js

@@ -34,7 +34,7 @@ var TableRow = function TableRow(props) {
   var children = props.children,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    variant: "table.row",
+    variant: "table.tableRow",
     as: "tr"
   }, others), children);
 };

package/lib/cjs/components/Tabs/Tabs.js

@@ -48,9 +48,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactAria = require("react-aria");
+var _tabs = require("@react-aria/tabs");
 
-var _reactStately = require("react-stately");
+var _tabs2 = require("@react-stately/tabs");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -92,7 +92,7 @@ var TabPanel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     return tabPanelRef.current;
   });
 
-  var _useTabPanel = (0, _reactAria.useTabPanel)(props, state, tabPanelRef),
+  var _useTabPanel = (0, _tabs.useTabPanel)(props, state, tabPanelRef),
       raTabPanelProps = _useTabPanel.tabPanelProps;
 
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, tabPanelProps, raTabPanelProps, {
@@ -139,12 +139,12 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
   }
 
-  var state = (0, _reactStately.useTabListState)(_objectSpread(_objectSpread({}, props), {}, {
+  var state = (0, _tabs2.useTabListState)(_objectSpread(_objectSpread({}, props), {}, {
     onSelectionChange: onSelectionChange,
     items: mode === 'list' ? allItems : items
   }));
 
-  var _useTabList = (0, _reactAria.useTabList)(props, state, tabListRef),
+  var _useTabList = (0, _tabs.useTabList)(props, state, tabListRef),
       raTabListProps = _useTabList.tabListProps;
 
   return (0, _react2.jsx)(TabsContext.Provider, {

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

@@ -259,7 +259,7 @@ var ContentSlots = function ContentSlots() {
     marginTop: 10,
     minWidth: 20
   };
-  var afterTabNode = (0, _react2.jsx)(_index.Badge, {
+  var afterTabNode = (0, _react2.jsx)(_index.Chip, {
     sx: nodeSx
   }, "14");
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Tabs["default"], {

package/lib/cjs/components/TextAreaField/TextAreaField.js

@@ -50,8 +50,6 @@ var _hooks = require("../../hooks");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
-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); }
@@ -79,12 +77,11 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     statusClasses: statusClasses
   }, props)),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var containerRef = (0, _react.useRef)();
-  var fieldControlWrapperRef = (0, _react.useRef)();
+  var inputContainerRef = (0, _react.useRef)();
   var labelRef = (0, _react.useRef)();
   var labelWrapperRef = (0, _react.useRef)();
   var slotContainer = (0, _react.useRef)();
@@ -107,7 +104,7 @@ var TextAreaField = /*#__PURE__*/(0, _react.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 = (0, _react.useCallback)(function () {
@@ -150,26 +147,26 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }));
   var wrappedLabel = (0, _react2.jsx)(_.Box, {
-    variant: "forms.textarea.floatLabelWrapper",
+    variant: "boxes.floatLabelWrapper",
     ref: labelWrapperRef
   }, labelNode);
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    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, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+  }), props.labelMode === 'float' ? wrappedLabel : labelNode, (0, _react2.jsx)(_.Box, {
     isRow: true,
-    variant: "forms.input.fieldControlWrapper",
+    variant: "forms.input.container",
+    className: fieldControlProps.className,
     minWidth: "40px",
     maxWidth: "100%",
-    ref: fieldControlWrapperRef
-  }, fieldControlWrapperProps), (0, _react2.jsx)(_.TextArea, (0, _extends2["default"])({
+    ref: inputContainerRef
+  }, (0, _react2.jsx)(_.TextArea, (0, _extends2["default"])({
     ref: textAreaRef,
-    rows: rows,
-    variant: "forms.textarea.baseField"
-  }, fieldControlInputProps, {
+    rows: rows
+  }, fieldControlProps, {
     sx: slots !== null && slots !== void 0 && slots.inContainer ? {
       paddingRight: '35px'
     } : {
@@ -178,14 +175,14 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "aria-invalid": status === 'error' && true,
     "aria-describedby": helperText && helperTextId
   })), (slots === null || slots === void 0 ? void 0 : slots.inContainer) && (0, _react2.jsx)(_.Box, {
-    variant: "forms.textarea.containerSlot",
+    variant: "boxes.textFieldInContainerSlot",
     ref: slotContainer
   }, slots === null || slots === void 0 ? void 0 : slots.inContainer)), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     id: helperTextId
   }, helperText));
 });
-TextAreaField.propTypes = _objectSpread(_objectSpread({
+TextAreaField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
 
@@ -272,12 +269,21 @@ TextAreaField.propTypes = _objectSpread(_objectSpread({
   /** Determines the textarea status indicator and helper text styling. */
   status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
 
+  /** 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({}),
+
   /** Provides a way to insert markup in specified places. */
   slots: _propTypes["default"].shape({
     /** The given node will be inserted into the field container. */
     inContainer: _propTypes["default"].node
   })
-}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 TextAreaField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

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

@@ -46,8 +46,6 @@ var _2 = require("../../");
 
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 
-var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
-
 var _constants = require("../Label/constants");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -72,7 +70,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     label: {
       control: {
         type: 'text'
@@ -115,12 +113,15 @@ var _default = {
     id: {},
     autocomplete: {},
     className: {},
+    containerProps: {},
+    labelProps: {},
+    controlProps: {},
     value: {
       control: {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var IconSlot = (0, _react2.jsx)(_2.Box, {

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

@@ -50,8 +50,6 @@ 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); }
@@ -68,12 +66,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;
+      status = props.status,
+      wrapperProps = props.wrapperProps;
 
   var _useField = (0, _hooks.useField)(props),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+      fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var inputRef = (0, _react.useRef)();
@@ -96,7 +94,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.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)
   }), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({}, fieldLabelProps, {
@@ -105,10 +103,11 @@ var TextField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       gridRow: '1/5'
     }
   })), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    variant: "forms.input.fieldControlWrapper"
-  }, fieldControlWrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, (0, _react2.jsx)(_.Input, (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"])({
     ref: inputRef
-  }, fieldControlInputProps, {
+  }, fieldControlProps, {
     "aria-invalid": status === 'error' && true,
     "aria-describedby": helperText && helperTextId
   })), slots === null || slots === void 0 ? void 0 : slots.inContainer), helperText && (0, _react2.jsx)(_.FieldHelperText, {
@@ -116,7 +115,7 @@ var TextField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     id: helperTextId
   }, helperText));
 });
-TextField.propTypes = _objectSpread(_objectSpread({
+TextField.propTypes = _objectSpread({
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
 
@@ -204,9 +203,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["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), _fieldAttributes.inputFieldAttributesBasePropTypes);
+}, _ariaAttributes.ariaAttributesBasePropTypes);
 TextField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

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

@@ -48,8 +48,6 @@ 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"));
@@ -80,7 +78,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
+  argTypes: _objectSpread({
     labelMode: {
       control: {
         type: 'select',
@@ -100,7 +98,7 @@ var _default = {
       },
       defaultValue: _statuses["default"].DEFAULT
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 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: "variants.timeZone.item.title"
+        variant: "timeZone.title"
       }, timeZone), (0, _react2.jsx)(_index.Text, {
-        variant: "variants.timeZone.item.subTitle"
+        variant: "timeZone.subTitle"
       }, gmt)), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
-        variant: "variants.timeZone.item.time"
+        variant: "timeZone.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({
-      containerProps: {
+      controlProps: {
         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 _reactAria = require("react-aria");
+var _tooltip = require("@react-aria/tooltip");
 
 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, _reactAria.useTooltip)(props, state),
+  var _useTooltip = (0, _tooltip.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.container"
+    variant: "tooltip.tooltipContainer"
   }, tooltipProps, others), (0, _react2.jsx)(_Text["default"], {
-    variant: "variants.tooltip.content"
+    variant: "tooltipContent"
   }, children));
 });
 var _default = Tooltip;