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

package/lib/cjs/{styles/variants/table.js → components/Table/Table.styles.js}

@@ -26,25 +26,25 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _text = require("../variants/text");
+var _Text = require("../Text/Text.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 tableHead = _objectSpread(_objectSpread({}, _text.text.label), {}, {
+var head = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
   fontWeight: 500,
   width: '100%',
   flexDirection: 'row !important',
   p: '10px'
 });
 
-var tableData = _objectSpread(_objectSpread({}, _text.text.tableData), {}, {
+var data = _objectSpread(_objectSpread({}, _Text.text.tableData), {}, {
   width: '100%',
   p: '10px'
 });
 
-var tableBody = {
+var body = {
   borderTop: '1px solid',
   borderTopColor: 'neutral.40',
   borderBottom: '1px solid',
@@ -53,24 +53,24 @@ var tableBody = {
     backgroundColor: 'neutral.95'
   }
 };
-var tableRow = {
+var row = {
   width: '100%',
   flexDirection: 'row !important'
 };
-var tableCaption = {
+var container = {
+  width: '100%'
+};
+var caption = {
   textAlign: 'left',
   marginBottom: 'xs',
   lineHeight: '21px'
 };
-var table = {
-  width: '100%'
-};
 var _default = {
-  tableHead: tableHead,
-  tableData: tableData,
-  tableBody: tableBody,
-  tableRow: tableRow,
-  tableCaption: tableCaption,
-  table: table
+  body: body,
+  caption: caption,
+  container: container,
+  data: data,
+  head: head,
+  row: row
 };
 exports["default"] = _default;

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.tableBody",
+    variant: "table.body",
     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.tableCaption",
+    variant: "table.caption",
     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.tableHead' : 'table.tableData',
+    variant: isHeading ? 'table.head' : 'table.data',
     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.tableRow",
+    variant: "table.row",
     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 _tabs = require("@react-aria/tabs");
+var _reactAria = require("react-aria");
 
-var _tabs2 = require("@react-stately/tabs");
+var _reactStately = require("react-stately");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -92,7 +92,7 @@ var TabPanel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     return tabPanelRef.current;
   });
 
-  var _useTabPanel = (0, _tabs.useTabPanel)(props, state, tabPanelRef),
+  var _useTabPanel = (0, _reactAria.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, _tabs2.useTabListState)(_objectSpread(_objectSpread({}, props), {}, {
+  var state = (0, _reactStately.useTabListState)(_objectSpread(_objectSpread({}, props), {}, {
     onSelectionChange: onSelectionChange,
     items: mode === 'list' ? allItems : items
   }));
 
-  var _useTabList = (0, _tabs.useTabList)(props, state, tabListRef),
+  var _useTabList = (0, _reactAria.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.Chip, {
+  var afterTabNode = (0, _react2.jsx)(_index.Badge, {
     sx: nodeSx
   }, "14");
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Tabs["default"], {

package/lib/cjs/{styles/variants/tabs.js → components/Tabs/Tabs.style.js}

@@ -22,11 +22,11 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.tabs = exports.tabPanel = exports.tabLine = exports.tab = void 0;
+exports.tabs = exports.tabPanel = exports.tabLine = exports.tab = exports.menuTab = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _buttons = require("./buttons");
+var _Buttons = require("../Button/Buttons.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; }
 
@@ -41,7 +41,7 @@ var tab = {
   transform: 'translateY(1px)',
   width: '100%',
   '&.is-focused': {
-    '& > span': _objectSpread({}, _buttons.focusWithCroppedOutline)
+    '& > span': _objectSpread({}, _Buttons.focusWithCroppedOutline)
   },
   '&.is-disabled': {
     cursor: 'default'
@@ -71,4 +71,17 @@ var tabs = {
   borderBottomColor: 'neutral.90',
   mb: 'lg'
 };
-exports.tabs = tabs;
+exports.tabs = tabs;
+
+var menuTab = _objectSpread(_objectSpread({}, _Buttons.quiet), {}, {
+  color: 'neutral.40',
+  alignItems: 'center',
+  '&.is-selected *, &.is-hovered *': {
+    color: 'active'
+  },
+  '& + *:not(div:first-of-type)': {
+    'ml': 'md'
+  }
+});
+
+exports.menuTab = menuTab;

package/lib/cjs/{styles/variants/text.js → components/Text/Text.styles.js}

@@ -22,7 +22,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.text = void 0;
+exports.wordWrap = exports.text = exports.base = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
@@ -37,6 +37,7 @@ var base = {
   fontFamily: 'standard',
   overflowWrap: 'break-word'
 };
+exports.base = base;
 var wordWrap = {
   display: 'block',
   overflowWrap: 'break-word',
@@ -44,6 +45,7 @@ var wordWrap = {
   wordWrap: 'break-word',
   wordBreak: 'break-word'
 };
+exports.wordWrap = wordWrap;
 
 var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
   fontSize: 'sm',
@@ -64,110 +66,6 @@ var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {
   }
 });
 
-var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
-  fontSize: 'sm',
-  '&.is-default': {
-    color: 'text.secondary'
-  },
-  '&.is-error': {
-    color: 'critical.dark'
-  },
-  '&.is-success': {
-    color: 'success.dark'
-  },
-  '&.is-warning': {
-    color: 'warning.dark'
-  },
-  '.is-left-label > &': {
-    gridRowEnd: 3,
-    gridColumnEnd: 3
-  }
-});
-
-var tooltipContent = {
-  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 expandableRowSharedStyle = {
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap'
-};
-var expandableRow = {
-  title: _objectSpread({
-    fontSize: 'lg',
-    color: 'neutral.20'
-  }, expandableRowSharedStyle),
-  subtitle: _objectSpread({
-    fontSize: 'sm',
-    color: 'neutral.60'
-  }, expandableRowSharedStyle),
-  lineChart: {
-    title: _objectSpread({
-      fontSize: 'sm',
-      color: 'neutral.40',
-      maxWidth: '100%'
-    }, expandableRowSharedStyle),
-    count: {
-      color: 'neutral.20',
-      fontSize: 22,
-      fontWeight: 2
-    },
-    countLabel: {
-      fontSize: 'xs',
-      color: 'neutral.50'
-    },
-    chartLabel: {
-      fontSize: 'xs',
-      color: 'neutral.50',
-      minWidth: '60px'
-    },
-    trend: {
-      color: 'neutral.20',
-      fontSize: 'sm',
-      fontWeight: 3,
-      whiteSpace: 'nowrap'
-    }
-  }
-};
-var breadcrumbLi = {
-  'a.is-hovered.is-current ': {
-    textDecoration: 'none'
-  }
-};
-var breadcrumbLink = {
-  color: 'active',
-  fontFamily: 'standard',
-  fontSize: '15px',
-  textDecoration: 'none',
-  outline: 'none',
-  '&.is-hovered': {
-    textDecoration: 'underline'
-  },
-  '&.is-focused': {
-    textDecoration: 'underline'
-  },
-  '&.is-disabled': {
-    pointerEvents: 'none'
-  },
-  '&.is-current': _objectSpread(_objectSpread({
-    pointerEvents: 'none'
-  }, base), {}, {
-    fontWeight: 1
-  })
-};
-
 var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
   fontSize: 'sm',
   fontWeight: 3,
@@ -175,84 +73,6 @@ var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
   textTransform: 'capitalize'
 });
 
-var navBarSubtitle = {
-  ml: 'md',
-  my: 'sm',
-  fontWeight: 1,
-  fontSize: 'sm',
-  color: 'accent.80',
-  zIndex: '100'
-};
-
-var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
-  whiteSpace: 'break-spaces',
-  lineHeight: 1,
-  fontSize: 'md',
-  fontWeight: 1,
-  maxWidth: '150px',
-  color: 'neutral.95',
-  '.is-selected &': {
-    color: 'white'
-  }
-});
-
-var collapsiblePanellItem = _objectSpread(_objectSpread({}, wordWrap), {}, {
-  color: 'neutral.30',
-  fontSize: 'sm',
-  fontWeight: 500,
-  overflow: 'hidden',
-  marginRight: 'xs',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-
-var collapsiblePanelTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
-  fontSize: 'sm',
-  fontWeight: 500,
-  color: 'text.secondary',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  mr: 'xs'
-});
-
-var maskedValue = {
-  width: 252,
-  wordBreak: 'break-all',
-  '&.is-masked': {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    fontWeight: 700
-  }
-};
-var timeZone = {
-  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 title = _objectSpread(_objectSpread({}, wordWrap), {}, {
   fontSize: 'xx',
   fontWeight: 1,
@@ -286,8 +106,6 @@ var text = {
     color: 'text.secondary',
     fontFamily: 'standard'
   }),
-  breadcrumbLi: breadcrumbLi,
-  breadcrumbLink: breadcrumbLink,
   buttonLabel: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'md',
     fontWeight: 1,
@@ -314,7 +132,6 @@ var text = {
     fontFamily: 'standard'
   }),
   environmentBreadcrumb: environmentBreadcrumb,
-  fieldHelperText: fieldHelperText,
   H1: _objectSpread(_objectSpread({}, title), {}, {
     fontWeight: 3,
     lineHeight: '28px'
@@ -368,12 +185,6 @@ var text = {
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   }),
-  maskedValue: maskedValue,
-  expandableRow: expandableRow,
-  collapsiblePanellItem: collapsiblePanellItem,
-  collapsiblePanelTitle: collapsiblePanelTitle,
-  navBarHeaderText: navBarHeaderText,
-  navBarSubtitle: navBarSubtitle,
   placeholder: {
     fontWeight: -1,
     color: 'text.secondary',
@@ -397,8 +208,6 @@ var text = {
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   },
-  title: title,
-  tooltipContent: tooltipContent,
-  timeZone: timeZone
+  title: title
 };
 exports.text = text;

package/lib/cjs/{styles/forms/textarea.js → components/TextArea/TextArea.styles.js}

@@ -22,18 +22,18 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.textarea = void 0;
+exports["default"] = exports.baseField = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _input = require("./input");
+var _Input = require("../Input/Input.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; }
 
 // Styles for default input and variants go here.
-var textarea = _objectSpread(_objectSpread({}, _input.input), {}, {
+var baseField = _objectSpread(_objectSpread({}, _Input.input), {}, {
   height: 'unset',
   '&.is-unresizable': {
     resize: 'none'
@@ -43,4 +43,27 @@ var textarea = _objectSpread(_objectSpread({}, _input.input), {}, {
   }
 });
 
-exports.textarea = textarea;
+exports.baseField = baseField;
+var containerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  width: '20px',
+  right: '10px',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
+var floatLabelWrapper = {
+  width: 'calc(100% - 4px)',
+  backgroundColor: 'white',
+  position: 'relative',
+  height: '17px',
+  bottom: '-18px',
+  left: '3px',
+  zIndex: 2
+};
+var _default = {
+  baseField: baseField,
+  containerSlot: containerSlot,
+  floatLabelWrapper: floatLabelWrapper
+};
+exports["default"] = _default;

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

@@ -50,6 +50,8 @@ 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); }
@@ -77,11 +79,12 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     statusClasses: statusClasses
   }, props)),
       fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
+      fieldControlInputProps = _useField.fieldControlInputProps,
+      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
   var containerRef = (0, _react.useRef)();
-  var inputContainerRef = (0, _react.useRef)();
+  var fieldControlWrapperRef = (0, _react.useRef)();
   var labelRef = (0, _react.useRef)();
   var labelWrapperRef = (0, _react.useRef)();
   var slotContainer = (0, _react.useRef)();
@@ -104,7 +107,7 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
 
   var resizeSlotContainer = function resizeSlotContainer() {
-    inputContainerRef.current.style.width = textAreaRef.current.style.width;
+    fieldControlWrapperRef.current.style.width = textAreaRef.current.style.width;
   };
 
   var onResize = (0, _react.useCallback)(function () {
@@ -147,26 +150,26 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }));
   var wrappedLabel = (0, _react2.jsx)(_.Box, {
-    variant: "boxes.floatLabelWrapper",
+    variant: "forms.textarea.floatLabelWrapper",
     ref: labelWrapperRef
   }, labelNode);
   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),
     ref: containerRef,
     maxWidth: "100%"
-  }), props.labelMode === 'float' ? wrappedLabel : labelNode, (0, _react2.jsx)(_.Box, {
+  }), props.labelMode === 'float' ? wrappedLabel : labelNode, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     isRow: true,
-    variant: "forms.input.container",
-    className: fieldControlProps.className,
+    variant: "forms.input.fieldControlWrapper",
     minWidth: "40px",
     maxWidth: "100%",
-    ref: inputContainerRef
-  }, (0, _react2.jsx)(_.TextArea, (0, _extends2["default"])({
+    ref: fieldControlWrapperRef
+  }, fieldControlWrapperProps), (0, _react2.jsx)(_.TextArea, (0, _extends2["default"])({
     ref: textAreaRef,
-    rows: rows
-  }, fieldControlProps, {
+    rows: rows,
+    variant: "forms.textarea.baseField"
+  }, fieldControlInputProps, {
     sx: slots !== null && slots !== void 0 && slots.inContainer ? {
       paddingRight: '35px'
     } : {
@@ -175,14 +178,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: "boxes.textFieldInContainerSlot",
+    variant: "forms.textarea.containerSlot",
     ref: slotContainer
   }, slots === null || slots === void 0 ? void 0 : slots.inContainer)), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     id: helperTextId
   }, helperText));
 });
-TextAreaField.propTypes = _objectSpread({
+TextAreaField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
 
@@ -269,21 +272,12 @@ TextAreaField.propTypes = _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);
+}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
 TextAreaField.defaultProps = {
   hasAutoFocus: false,
   isDisabled: false,

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

@@ -46,6 +46,8 @@ 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"));
@@ -70,7 +72,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -113,15 +115,12 @@ var _default = {
     id: {},
     autocomplete: {},
     className: {},
-    containerProps: {},
-    labelProps: {},
-    controlProps: {},
     value: {
       control: {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 var IconSlot = (0, _react2.jsx)(_2.Box, {