baseui 12.0.0 → 12.1.0

package/tabs-motion/tabs.js

@@ -9,6 +9,8 @@ exports.Tabs = Tabs;
 
 var React = _interopRequireWildcard(require("react"));
 
+var ReactIs = _interopRequireWildcard(require("react-is"));
+
 var _reactUid = require("react-uid");
 
 var _styles = require("../styles");
@@ -124,25 +126,40 @@ var scrollParentToCentreTarget = function scrollParentToCentreTarget(targetNode)
   targetNode.parentNode.scroll(target.x, target.y);
 };
 
-function Tabs(_ref) {
-  var _ref$activeKey = _ref.activeKey,
-      activeKey = _ref$activeKey === void 0 ? '0' : _ref$activeKey,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      children = _ref.children,
-      _ref$fill = _ref.fill,
-      fill = _ref$fill === void 0 ? _constants.FILL.intrinsic : _ref$fill,
-      _ref$activateOnFocus = _ref.activateOnFocus,
-      activateOnFocus = _ref$activateOnFocus === void 0 ? true : _ref$activateOnFocus,
-      onChange = _ref.onChange,
-      _ref$orientation = _ref.orientation,
-      orientation = _ref$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref$orientation,
-      _ref$overrides = _ref.overrides,
-      overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
-      _ref$renderAll = _ref.renderAll,
-      renderAll = _ref$renderAll === void 0 ? false : _ref$renderAll,
-      _ref$uid = _ref.uid,
-      customUid = _ref$uid === void 0 ? null : _ref$uid;
+function RenderEnhancer(_ref) {
+  var Enhancer = _ref.Enhancer;
+
+  if (typeof Enhancer === 'string') {
+    return Enhancer;
+  }
+
+  if (ReactIs.isValidElementType(Enhancer)) {
+    return /*#__PURE__*/React.createElement(Enhancer, null);
+  }
+
+  return Enhancer;
+}
+
+function Tabs(_ref2) {
+  var _ref2$activeKey = _ref2.activeKey,
+      activeKey = _ref2$activeKey === void 0 ? '0' : _ref2$activeKey,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      children = _ref2.children,
+      _ref2$fill = _ref2.fill,
+      fill = _ref2$fill === void 0 ? _constants.FILL.intrinsic : _ref2$fill,
+      _ref2$activateOnFocus = _ref2.activateOnFocus,
+      activateOnFocus = _ref2$activateOnFocus === void 0 ? true : _ref2$activateOnFocus,
+      onChange = _ref2.onChange,
+      _ref2$orientation = _ref2.orientation,
+      orientation = _ref2$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref2$orientation,
+      _ref2$overrides = _ref2.overrides,
+      overrides = _ref2$overrides === void 0 ? {} : _ref2$overrides,
+      _ref2$renderAll = _ref2.renderAll,
+      renderAll = _ref2$renderAll === void 0 ? false : _ref2$renderAll,
+      _ref2$uid = _ref2.uid,
+      customUid = _ref2$uid === void 0 ? null : _ref2$uid,
+      endEnhancer = _ref2.endEnhancer;
   // Create unique id prefix for this tabs component
   var generatedUid = (0, _reactUid.useUID)();
   var uid = customUid || generatedUid; // Unpack overrides
@@ -170,7 +187,12 @@ function Tabs(_ref) {
   var _getOverrides7 = (0, _overrides.getOverrides)(TabBorderOverrides, _styledComponents.StyledTabBorder),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
       TabBorder = _getOverrides8[0],
-      TabBorderProps = _getOverrides8[1]; // Count key updates
+      TabBorderProps = _getOverrides8[1];
+
+  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.EndEnhancerContainer, _styledComponents.StyledEndEnhancerContainer),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      EndEnhancerContainer = _getOverrides10[0],
+      endEnhancerContainerProps = _getOverrides10[1]; // Count key updates
   // We disable a few things until after first mount:
   // - the highlight animation, avoiding an initial slide-in
   // - smooth scrolling active tab into view
@@ -276,7 +298,10 @@ function Tabs(_ref) {
       }
     }
   }, [orientation, theme.direction]);
-  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(TabList, _extends({
+  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(_styledComponents.StyledTabBar, {
+    $hasEndEnhancer: Boolean(endEnhancer),
+    $orientation: orientation
+  }, /*#__PURE__*/React.createElement(TabList, _extends({
     "data-baseweb": "tab-list",
     role: "tablist",
     "aria-orientation": orientation
@@ -304,7 +329,11 @@ function Tabs(_ref) {
     $animate: keyUpdated > 1,
     "aria-hidden": "true",
     role: "presentation"
-  }, sharedStylingProps, TabHighlightProps))), /*#__PURE__*/React.createElement(TabBorder, _extends({
+  }, sharedStylingProps, TabHighlightProps))), orientation === _constants.ORIENTATION.horizontal && endEnhancer !== null && endEnhancer !== undefined && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({}, endEnhancerContainerProps, {
+    $orientation: orientation
+  }), /*#__PURE__*/React.createElement(RenderEnhancer, {
+    Enhancer: endEnhancer
+  }))), /*#__PURE__*/React.createElement(TabBorder, _extends({
     "data-baseweb": "tab-border",
     "aria-hidden": "true",
     role: "presentation"
@@ -321,20 +350,20 @@ function Tabs(_ref) {
   }));
 }
 
-function InternalTab(_ref2) {
-  var childKey = _ref2.childKey,
-      childIndex = _ref2.childIndex,
-      activeKey = _ref2.activeKey,
-      orientation = _ref2.orientation,
-      activeTabRef = _ref2.activeTabRef,
-      updateHighlight = _ref2.updateHighlight,
-      parseKeyDown = _ref2.parseKeyDown,
-      activateOnFocus = _ref2.activateOnFocus,
-      uid = _ref2.uid,
-      disabled = _ref2.disabled,
-      sharedStylingProps = _ref2.sharedStylingProps,
-      onChange = _ref2.onChange,
-      props = _objectWithoutProperties(_ref2, _excluded);
+function InternalTab(_ref3) {
+  var childKey = _ref3.childKey,
+      childIndex = _ref3.childIndex,
+      activeKey = _ref3.activeKey,
+      orientation = _ref3.orientation,
+      activeTabRef = _ref3.activeTabRef,
+      updateHighlight = _ref3.updateHighlight,
+      parseKeyDown = _ref3.parseKeyDown,
+      activateOnFocus = _ref3.activateOnFocus,
+      uid = _ref3.uid,
+      disabled = _ref3.disabled,
+      sharedStylingProps = _ref3.sharedStylingProps,
+      onChange = _ref3.onChange,
+      props = _objectWithoutProperties(_ref3, _excluded);
 
   var key = childKey || String(childIndex);
   var isActive = key == activeKey;
@@ -385,15 +414,15 @@ function InternalTab(_ref2) {
   var TabOverrides = overrides.Tab,
       ArtworkContainerOverrides = overrides.ArtworkContainer;
 
-  var _getOverrides9 = (0, _overrides.getOverrides)(TabOverrides, _styledComponents.StyledTab),
-      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
-      Tab = _getOverrides10[0],
-      TabProps = _getOverrides10[1];
-
-  var _getOverrides11 = (0, _overrides.getOverrides)(ArtworkContainerOverrides, _styledComponents.StyledArtworkContainer),
+  var _getOverrides11 = (0, _overrides.getOverrides)(TabOverrides, _styledComponents.StyledTab),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-      ArtworkContainer = _getOverrides12[0],
-      ArtworkContainerProps = _getOverrides12[1]; // Keyboard focus styling
+      Tab = _getOverrides12[0],
+      TabProps = _getOverrides12[1];
+
+  var _getOverrides13 = (0, _overrides.getOverrides)(ArtworkContainerOverrides, _styledComponents.StyledArtworkContainer),
+      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
+      ArtworkContainer = _getOverrides14[0],
+      ArtworkContainerProps = _getOverrides14[1]; // Keyboard focus styling
 
 
   var _React$useState5 = React.useState(false),
@@ -406,7 +435,8 @@ function InternalTab(_ref2) {
       setFocusVisible(true);
     }
   }, []);
-  var handleBlur = React.useCallback(function (event) {
+  var handleBlur = React.useCallback( // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function (event) {
     if (focusVisible !== false) {
       setFocusVisible(false);
     }
@@ -492,14 +522,14 @@ function InternalTab(_ref2) {
   })) : null, title ? title : key);
 }
 
-function InternalTabPanel(_ref3) {
-  var childKey = _ref3.childKey,
-      childIndex = _ref3.childIndex,
-      activeKey = _ref3.activeKey,
-      uid = _ref3.uid,
-      sharedStylingProps = _ref3.sharedStylingProps,
-      renderAll = _ref3.renderAll,
-      props = _objectWithoutProperties(_ref3, _excluded3);
+function InternalTabPanel(_ref4) {
+  var childKey = _ref4.childKey,
+      childIndex = _ref4.childIndex,
+      activeKey = _ref4.activeKey,
+      uid = _ref4.uid,
+      sharedStylingProps = _ref4.sharedStylingProps,
+      renderAll = _ref4.renderAll,
+      props = _objectWithoutProperties(_ref4, _excluded3);
 
   var key = childKey || String(childIndex);
   var isActive = key == activeKey;
@@ -508,10 +538,10 @@ function InternalTabPanel(_ref3) {
       children = props.children;
   var TabPanelOverrides = overrides.TabPanel;
 
-  var _getOverrides13 = (0, _overrides.getOverrides)(TabPanelOverrides, _styledComponents.StyledTabPanel),
-      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
-      TabPanel = _getOverrides14[0],
-      TabPanelProps = _getOverrides14[1];
+  var _getOverrides15 = (0, _overrides.getOverrides)(TabPanelOverrides, _styledComponents.StyledTabPanel),
+      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
+      TabPanel = _getOverrides16[0],
+      TabPanelProps = _getOverrides16[1];
 
   return /*#__PURE__*/React.createElement(TabPanel, _extends({
     "data-baseweb": "tab-panel",

package/tabs-motion/tabs.js.flow

@@ -10,6 +10,7 @@ LICENSE file in the root directory of this source tree.
 /* global window */
 
 import * as React from 'react';
+import * as ReactIs from 'react-is';
 import { useUID } from 'react-uid';
 import { useStyletron } from '../styles/index.js';
 import { getOverrides } from '../helpers/overrides.js';
@@ -23,6 +24,8 @@ import {
   StyledTabHighlight,
   StyledTabBorder,
   StyledTabPanel,
+  StyledEndEnhancerContainer,
+  StyledTabBar,
 } from './styled-components.js';
 import { getTabId, getTabPanelId, isVertical, isHorizontal, isRTL } from './utils.js';
 
@@ -88,6 +91,18 @@ const scrollParentToCentreTarget = (targetNode) => {
   targetNode.parentNode.scroll(target.x, target.y);
 };
 
+function RenderEnhancer({ Enhancer }) {
+  if (typeof Enhancer === 'string') {
+    return Enhancer;
+  }
+  if (ReactIs.isValidElementType(Enhancer)) {
+    // $FlowFixMe
+    return <Enhancer />;
+  }
+  // $FlowFixMe
+  return Enhancer;
+}
+
 export function Tabs({
   activeKey = '0',
   disabled = false,
@@ -99,6 +114,7 @@ export function Tabs({
   overrides = {},
   renderAll = false,
   uid: customUid = null,
+  endEnhancer,
 }: TabsPropsT) {
   // Create unique id prefix for this tabs component
   const generatedUid = useUID();
@@ -115,6 +131,10 @@ export function Tabs({
   const [TabList, TabListProps] = getOverrides(TabListOverrides, StyledTabList);
   const [TabHighlight, TabHighlightProps] = getOverrides(TabHighlightOverrides, StyledTabHighlight);
   const [TabBorder, TabBorderProps] = getOverrides(TabBorderOverrides, StyledTabBorder);
+  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(
+    overrides.EndEnhancerContainer,
+    StyledEndEnhancerContainer
+  );
 
   // Count key updates
   // We disable a few things until after first mount:
@@ -216,45 +236,56 @@ export function Tabs({
 
   return (
     <Root {...sharedStylingProps} {...RootProps}>
-      <TabList
-        data-baseweb="tab-list"
-        role="tablist"
-        aria-orientation={orientation}
-        {...sharedStylingProps}
-        {...TabListProps}
-      >
-        {React.Children.map(children, (child, index) => {
-          if (!child) return;
-          return (
-            <InternalTab
-              childKey={child.key}
-              childIndex={index}
-              activeKey={activeKey}
-              orientation={orientation}
-              activeTabRef={activeTabRef}
-              updateHighlight={updateHighlight}
-              parseKeyDown={parseKeyDown}
-              activateOnFocus={activateOnFocus}
-              uid={uid}
-              disabled={disabled}
-              sharedStylingProps={sharedStylingProps}
-              onChange={onChange}
-              {...child.props}
-            />
-          );
-        })}
-        <TabHighlight
-          data-baseweb="tab-highlight"
-          $length={highlightLayout.length}
-          $distance={highlightLayout.distance}
-          // This avoids the tab sliding in from the side on mount
-          $animate={keyUpdated > 1}
-          aria-hidden="true"
-          role="presentation"
+      <StyledTabBar $hasEndEnhancer={Boolean(endEnhancer)} $orientation={orientation}>
+        <TabList
+          data-baseweb="tab-list"
+          role="tablist"
+          aria-orientation={orientation}
           {...sharedStylingProps}
-          {...TabHighlightProps}
-        />
-      </TabList>
+          {...TabListProps}
+        >
+          {React.Children.map(children, (child, index) => {
+            if (!child) return;
+            return (
+              <InternalTab
+                childKey={child.key}
+                childIndex={index}
+                activeKey={activeKey}
+                orientation={orientation}
+                activeTabRef={activeTabRef}
+                updateHighlight={updateHighlight}
+                parseKeyDown={parseKeyDown}
+                activateOnFocus={activateOnFocus}
+                uid={uid}
+                disabled={disabled}
+                sharedStylingProps={sharedStylingProps}
+                onChange={onChange}
+                {...child.props}
+              />
+            );
+          })}
+          <TabHighlight
+            data-baseweb="tab-highlight"
+            $length={highlightLayout.length}
+            $distance={highlightLayout.distance}
+            // This avoids the tab sliding in from the side on mount
+            $animate={keyUpdated > 1}
+            aria-hidden="true"
+            role="presentation"
+            {...sharedStylingProps}
+            {...TabHighlightProps}
+          />
+        </TabList>
+
+        {orientation === ORIENTATION.horizontal &&
+          endEnhancer !== null &&
+          endEnhancer !== undefined && (
+            <EndEnhancerContainer {...endEnhancerContainerProps} $orientation={orientation}>
+              <RenderEnhancer Enhancer={endEnhancer} />
+            </EndEnhancerContainer>
+          )}
+      </StyledTabBar>
+
       <TabBorder
         data-baseweb="tab-border"
         aria-hidden="true"

package/tabs-motion/types.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { ORIENTATION, FILL, STATE_CHANGE_TYPE } from './constants';
+import type * as React from 'react';
+import type { ORIENTATION, FILL, STATE_CHANGE_TYPE } from './constants';
 import type { Override } from '../helpers/overrides';
 import type { IconProps } from '../icon';
 export declare type Orientation = typeof ORIENTATION[keyof typeof ORIENTATION];
@@ -10,6 +10,8 @@ export declare type TabsOverrides = {
     TabList?: Override;
     TabHighlight?: Override;
     TabBorder?: Override;
+    EndEnhancerContainer?: Override;
+    StyledTabBar?: Override;
 };
 export declare type TabOverrides = {
     Tab?: Override;
@@ -38,6 +40,7 @@ export declare type TabsProps = {
     overrides?: TabsOverrides;
     renderAll?: boolean;
     uid?: string;
+    endEnhancer?: React.ReactNode;
 };
 export declare type StatefulTabsProps = {
     initialState?: StatefulTabsState;

package/tabs-motion/types.js.flow

@@ -22,6 +22,8 @@ export type TabsOverridesT = {
   TabList?: OverrideT,
   TabHighlight?: OverrideT,
   TabBorder?: OverrideT,
+  EndEnhancerContainer?: OverrideT,
+  StyledTabBar?: OverrideT,
 };
 
 export type TabOverridesT = {
@@ -57,6 +59,7 @@ export type TabsPropsT = {|
   overrides?: TabsOverridesT,
   renderAll?: boolean,
   uid?: string,
+  endEnhancer?: React.Node | React.AbstractComponent<{}>,
 |};
 
 export type StatefulTabsPropsT = {|

package/tabs-motion/utils.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Fill, Orientation } from './types';
 export declare const getTabId: (uid: string, key: React.Key) => string;
 export declare const getTabPanelId: (uid: string, key: React.Key) => string;

package/tag/styled-components.js

@@ -290,6 +290,7 @@ var Action = (0, _styles.styled)('span', function (props) {
 });
 exports.Action = Action;
 Action.displayName = "Action";
+Action.displayName = 'Action';
 var StartEnhancerContainer = (0, _styles.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme,
       _ref2$$size = _ref2.$size,
@@ -310,6 +311,7 @@ var StartEnhancerContainer = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.StartEnhancerContainer = StartEnhancerContainer;
 StartEnhancerContainer.displayName = "StartEnhancerContainer";
+StartEnhancerContainer.displayName = 'StartEnhancerContainer';
 var Text = (0, _styles.styled)('span', function (props) {
   var $theme = props.$theme;
   return {
@@ -322,6 +324,7 @@ var Text = (0, _styles.styled)('span', function (props) {
 });
 exports.Text = Text;
 Text.displayName = "Text";
+Text.displayName = 'Text';
 var Root = (0, _styles.styled)('span', function (props) {
   var _SIZE$small$SIZE$medi2, _SIZE$small$SIZE$medi3, _SIZE$small$SIZE$medi4;
 
@@ -388,4 +391,5 @@ var Root = (0, _styles.styled)('span', function (props) {
   });
 });
 exports.Root = Root;
-Root.displayName = "Root";
+Root.displayName = "Root";
+Root.displayName = 'Root';

package/tag/tag.js

@@ -92,7 +92,8 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if ((0, _focusVisible.isFocusVisible)(event)) {
       setFocusVisible(true);
     }
-  }
+  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   function handleBlur(event) {
     if (focusVisible !== false) {
@@ -175,7 +176,8 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var actionSize = (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.small, 12), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.medium, 16), _defineProperty(_SIZE$small$SIZE$medi, _constants.SIZE.large, 20), _SIZE$small$SIZE$medi)[size]; // Capitalize for JSX
 
   var StartEnhancer = startEnhancer;
-  return /*#__PURE__*/React.createElement(Root, _extends({
+  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  , _extends({
     ref: ref,
     "data-baseweb": "tag",
     "aria-label": isButton && closeable ? "".concat(typeof children === 'string' ? "".concat(children, ", ") : '', "close by backspace") : null,

package/tag/types.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import type { ReactNode } from 'react';
 export declare const TagKind: Readonly<{
     readonly custom: "custom";
     readonly neutral: "neutral";
@@ -53,15 +52,15 @@ export declare type TagProps = {
     /** Defines tags look. Set it to one of VARIANT[key] values. Defaults to VARIANT.light */
     variant?: TagVariant;
     /** Component or String value for label of tag. Default is empty string. */
-    children?: ReactNode;
+    children?: React.ReactNode;
     /** The color theme to be applied to a Tag. Default is `KIND.primary`. */
     color?: string;
     /** Text to display in native OS tooltip on long hover. */
     title?: string;
     /** onClick handler for the action button element. */
-    onActionClick?: (e: Event, children?: ReactNode) => unknown;
+    onActionClick?: (e: Event, children?: React.ReactNode) => unknown;
     /** keydown handler for the action button element. */
-    onActionKeyDown?: (e: Event, children?: ReactNode) => unknown;
+    onActionKeyDown?: (e: Event, children?: React.ReactNode) => unknown;
     /** onClick handler for the tag. Passing an onClick handler also makes the tag clickable. */
     onClick?: null | ((event: Event) => unknown);
     /** onkeydown handler for the tag. */

package/textarea/styled-components.js

@@ -16,25 +16,30 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var StyledTextAreaRoot = (0, _styles.styled)('div', function (props) {
-  return (0, _styledComponents.getRootStyles)(_objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread({}, (0, _styledComponents.getRootStyles)(_objectSpread(_objectSpread({
     $positive: false
   }, props), {}, {
     $hasIconTrailing: false
-  }));
+  }))), {}, {
+    width: props.$resize ? 'fit-content' : '100%'
+  });
 });
 exports.StyledTextAreaRoot = StyledTextAreaRoot;
 StyledTextAreaRoot.displayName = "StyledTextAreaRoot";
+StyledTextAreaRoot.displayName = 'StyledTextAreaRoot';
 var StyledTextareaContainer = (0, _styles.styled)('div', function (props) {
-  return _objectSpread({}, (0, _styledComponents.getInputContainerStyles)(_objectSpread({
+  return (0, _styledComponents.getInputContainerStyles)(_objectSpread({
     $positive: false
-  }, props)));
+  }, props));
 });
 exports.StyledTextareaContainer = StyledTextareaContainer;
 StyledTextareaContainer.displayName = "StyledTextareaContainer";
+StyledTextareaContainer.displayName = 'StyledTextareaContainer';
 var StyledTextarea = (0, _styles.styled)('textarea', function (props) {
   return _objectSpread(_objectSpread({}, (0, _styledComponents.getInputStyles)(props)), {}, {
-    resize: 'none'
+    resize: props.$resize || 'none'
   });
 });
 exports.StyledTextarea = StyledTextarea;
-StyledTextarea.displayName = "StyledTextarea";
+StyledTextarea.displayName = "StyledTextarea";
+StyledTextarea.displayName = 'StyledTextarea';

package/textarea/textarea.js

@@ -124,12 +124,14 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         $disabled: this.props.disabled,
         $error: this.props.error,
         $positive: this.props.positive,
-        $required: this.props.required
+        $required: this.props.required,
+        $resize: this.props.resize
       }, rootProps), /*#__PURE__*/React.createElement(_input.BaseInput, _extends({}, this.props, {
         type: _input.CUSTOM_INPUT_TYPE.textarea,
         overrides: inputOverrides,
         onFocus: this.onFocus,
-        onBlur: this.onBlur
+        onBlur: this.onBlur,
+        resize: this.props.resize
       })));
     }
   }]);

package/textarea/types.d.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
+import type * as React from 'react';
+import type { Properties } from 'csstype';
 import type { Override } from '../helpers/overrides';
-import type { BaseInputProps, StateReducer, State } from '../input';
-import { ADJOINED, SIZE } from '../input';
-import type { SyntheticEvent } from 'react';
-declare type SyntheticTextareaEvent = SyntheticEvent<HTMLTextAreaElement>;
+import type { BaseInputProps, StateReducer, State, ADJOINED, SIZE } from '../input';
+declare type SyntheticTextareaEvent = React.SyntheticEvent<HTMLTextAreaElement>;
 export declare type Size = keyof typeof SIZE;
 export declare type SharedStyleProps = {
     $adjoined: keyof typeof ADJOINED;
@@ -13,6 +12,7 @@ export declare type SharedStyleProps = {
     $isReadOnly?: boolean;
     $positive?: boolean;
     $required?: boolean;
+    $resize?: Properties['resize'];
     $size: Size;
 };
 declare type BaseTextAreaProps = BaseInputProps<HTMLTextAreaElement>;
@@ -21,6 +21,7 @@ export declare type TextareaOverrides = {
 } & BaseTextAreaProps['overrides'];
 export declare type TextareaProps = {
     overrides?: TextareaOverrides;
+    resize?: Properties['resize'];
     /** Sets the size and number of visible text lines
      of the textarea element. */
     rows?: number;

package/textarea/types.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-
+import type { Property$Resize } from 'csstype';
 import type { OverrideT } from '../helpers/overrides.js';
 import type { BaseInputPropsT, StateReducerT, StateT } from '../input/types.js';
 import { ADJOINED, SIZE } from '../input/constants.js';
@@ -23,6 +23,7 @@ export type SharedStylePropsT = {
   $isReadOnly: boolean,
   $positive?: boolean,
   $required: boolean,
+  $resize?: Property$Resize,
   $size: SizeT,
 };
 
@@ -36,6 +37,7 @@ export type TextareaOverridesT = {
 export type TextareaPropsT = {
   ...BaseTextAreaPropsT,
   overrides?: TextareaOverridesT,
+  resize?: Property$Resize,
   /** Sets the size and number of visible text lines
    of the textarea element. */
   rows?: number,

package/themes/move-theme/typography.d.ts

@@ -13,6 +13,24 @@ export declare const typography: {
     font1150: {
         fontFamily: string;
     };
+    font1050: {
+        fontFamily: string;
+    };
+    font950: {
+        fontFamily: string;
+    };
+    font850: {
+        fontFamily: string;
+    };
+    font750: {
+        fontFamily: string;
+    };
+    font650: {
+        fontFamily: string;
+    };
+    font550: {
+        fontFamily: string;
+    };
     DisplayLarge: {
         fontFamily: string;
     };
@@ -25,6 +43,24 @@ export declare const typography: {
     DisplayXSmall: {
         fontFamily: string;
     };
+    HeadingXXLarge: {
+        fontFamily: string;
+    };
+    HeadingXLarge: {
+        fontFamily: string;
+    };
+    HeadingLarge: {
+        fontFamily: string;
+    };
+    HeadingMedium: {
+        fontFamily: string;
+    };
+    HeadingSmall: {
+        fontFamily: string;
+    };
+    HeadingXSmall: {
+        fontFamily: string;
+    };
     MonoParagraphXSmall: {
         fontFamily: string;
     };