baseui 12.0.0 → 12.1.0

package/esm/tabs/tabs.js

@@ -78,7 +78,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           orientation = _this$props.orientation,
           children = _this$props.children,
           _this$props$overrides = _this$props.overrides,
-          overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides;
+          overrides = _this$props$overrides === void 0 ? {} : _this$props$overrides; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
       var tabs = React.Children.map(children, function (child, index) {
         if (!child) return;
         var key = child.key || String(index);
@@ -116,7 +117,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       var _getOverrides = getOverrides(TabContentOverride, StyledTabContent),
           _getOverrides2 = _slicedToArray(_getOverrides, 2),
           TabContent = _getOverrides2[0],
-          tabContentProps = _getOverrides2[1];
+          tabContentProps = _getOverrides2[1]; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
       var tabs = React.Children.map(children, function (child, index) {
         if (!child) return;

package/esm/tabs-motion/styled-components.js

@@ -30,16 +30,27 @@ export var StyledRoot = styled('div', function (_ref) {
   return style;
 });
 StyledRoot.displayName = "StyledRoot";
-export var StyledTabList = styled('div', function (_ref2) {
-  var $theme = _ref2.$theme,
-      _ref2$$fill = _ref2.$fill,
-      $fill = _ref2$$fill === void 0 ? FILL.intrinsic : _ref2$$fill,
-      _ref2$$orientation = _ref2.$orientation,
-      $orientation = _ref2$$orientation === void 0 ? ORIENTATION.horizontal : _ref2$$orientation;
+StyledRoot.displayName = 'StyledRoot';
+export var StyledTabBar = styled('div', function (_ref2) {
+  var $hasEndEnhancer = _ref2.$hasEndEnhancer,
+      $orientation = _ref2.$orientation;
+  return $hasEndEnhancer || !isHorizontal($orientation) ? {
+    display: 'flex'
+  } : {};
+});
+StyledTabBar.displayName = "StyledTabBar";
+StyledTabBar.displayName = 'StyledTabBar';
+export var StyledTabList = styled('div', function (_ref3) {
+  var $theme = _ref3.$theme,
+      _ref3$$fill = _ref3.$fill,
+      $fill = _ref3$$fill === void 0 ? FILL.intrinsic : _ref3$$fill,
+      _ref3$$orientation = _ref3.$orientation,
+      $orientation = _ref3$$orientation === void 0 ? ORIENTATION.horizontal : _ref3$$orientation;
   var style = {
     position: 'relative',
     display: 'flex',
-    flexWrap: 'nowrap'
+    flexWrap: 'nowrap',
+    flexGrow: 1
   };
 
   if (isHorizontal($orientation)) {
@@ -75,16 +86,17 @@ export var StyledTabList = styled('div', function (_ref2) {
   return style;
 });
 StyledTabList.displayName = "StyledTabList";
-export var StyledTab = styled('button', function (_ref3) {
-  var $theme = _ref3.$theme,
-      _ref3$$orientation = _ref3.$orientation,
-      $orientation = _ref3$$orientation === void 0 ? ORIENTATION.horizontal : _ref3$$orientation,
-      _ref3$$fill = _ref3.$fill,
-      $fill = _ref3$$fill === void 0 ? FILL.intrinsic : _ref3$$fill,
-      _ref3$$focusVisible = _ref3.$focusVisible,
-      $focusVisible = _ref3$$focusVisible === void 0 ? false : _ref3$$focusVisible,
-      _ref3$$isActive = _ref3.$isActive,
-      $isActive = _ref3$$isActive === void 0 ? false : _ref3$$isActive;
+StyledTabList.displayName = 'StyledTabList';
+export var StyledTab = styled('button', function (_ref4) {
+  var $theme = _ref4.$theme,
+      _ref4$$orientation = _ref4.$orientation,
+      $orientation = _ref4$$orientation === void 0 ? ORIENTATION.horizontal : _ref4$$orientation,
+      _ref4$$fill = _ref4.$fill,
+      $fill = _ref4$$fill === void 0 ? FILL.intrinsic : _ref4$$fill,
+      _ref4$$focusVisible = _ref4.$focusVisible,
+      $focusVisible = _ref4$$focusVisible === void 0 ? false : _ref4$$focusVisible,
+      _ref4$$isActive = _ref4.$isActive,
+      $isActive = _ref4$$isActive === void 0 ? false : _ref4$$isActive;
 
   var style = _objectSpread({
     cursor: 'pointer',
@@ -145,10 +157,22 @@ export var StyledTab = styled('button', function (_ref3) {
   return style;
 });
 StyledTab.displayName = "StyledTab";
-export var StyledArtworkContainer = styled('div', function (_ref4) {
-  var $theme = _ref4.$theme,
-      _ref4$$orientation = _ref4.$orientation,
-      $orientation = _ref4$$orientation === void 0 ? ORIENTATION.horizontal : _ref4$$orientation;
+StyledTab.displayName = 'StyledTab';
+export var StyledEndEnhancerContainer = styled('div', function (_ref5) {
+  var $theme = _ref5.$theme;
+  var marginDirection = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  return _defineProperty({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  }, marginDirection, $theme.sizing.scale600);
+});
+StyledEndEnhancerContainer.displayName = "StyledEndEnhancerContainer";
+StyledEndEnhancerContainer.displayName = 'StyledEndEnhancerContainer';
+export var StyledArtworkContainer = styled('div', function (_ref7) {
+  var $theme = _ref7.$theme,
+      _ref7$$orientation = _ref7.$orientation,
+      $orientation = _ref7$$orientation === void 0 ? ORIENTATION.horizontal : _ref7$$orientation;
   var style = {
     display: 'flex'
   };
@@ -162,10 +186,11 @@ export var StyledArtworkContainer = styled('div', function (_ref4) {
   return style;
 });
 StyledArtworkContainer.displayName = "StyledArtworkContainer";
-export var StyledTabBorder = styled('div', function (_ref5) {
-  var $theme = _ref5.$theme,
-      _ref5$$orientation = _ref5.$orientation,
-      $orientation = _ref5$$orientation === void 0 ? ORIENTATION.horizontal : _ref5$$orientation;
+StyledArtworkContainer.displayName = 'StyledArtworkContainer';
+export var StyledTabBorder = styled('div', function (_ref8) {
+  var $theme = _ref8.$theme,
+      _ref8$$orientation = _ref8.$orientation,
+      $orientation = _ref8$$orientation === void 0 ? ORIENTATION.horizontal : _ref8$$orientation;
   var style = {
     backgroundColor: $theme.colors.borderOpaque,
     position: 'relative'
@@ -180,16 +205,17 @@ export var StyledTabBorder = styled('div', function (_ref5) {
   return style;
 });
 StyledTabBorder.displayName = "StyledTabBorder";
-export var StyledTabHighlight = styled('div', function (_ref6) {
-  var $theme = _ref6.$theme,
-      _ref6$$orientation = _ref6.$orientation,
-      $orientation = _ref6$$orientation === void 0 ? ORIENTATION.horizontal : _ref6$$orientation,
-      _ref6$$length = _ref6.$length,
-      $length = _ref6$$length === void 0 ? 0 : _ref6$$length,
-      _ref6$$distance = _ref6.$distance,
-      $distance = _ref6$$distance === void 0 ? 0 : _ref6$$distance,
-      _ref6$$animate = _ref6.$animate,
-      $animate = _ref6$$animate === void 0 ? false : _ref6$$animate;
+StyledTabBorder.displayName = 'StyledTabBorder';
+export var StyledTabHighlight = styled('div', function (_ref9) {
+  var $theme = _ref9.$theme,
+      _ref9$$orientation = _ref9.$orientation,
+      $orientation = _ref9$$orientation === void 0 ? ORIENTATION.horizontal : _ref9$$orientation,
+      _ref9$$length = _ref9.$length,
+      $length = _ref9$$length === void 0 ? 0 : _ref9$$length,
+      _ref9$$distance = _ref9.$distance,
+      $distance = _ref9$$distance === void 0 ? 0 : _ref9$$distance,
+      _ref9$$animate = _ref9.$animate,
+      $animate = _ref9$$animate === void 0 ? false : _ref9$$animate;
   var style = {
     backgroundColor: $theme.colors.borderSelected,
     position: 'absolute',
@@ -223,10 +249,11 @@ export var StyledTabHighlight = styled('div', function (_ref6) {
   return style;
 });
 StyledTabHighlight.displayName = "StyledTabHighlight";
-export var StyledTabPanel = styled('div', function (_ref7) {
-  var $theme = _ref7.$theme,
-      _ref7$$pad = _ref7.$pad,
-      $pad = _ref7$$pad === void 0 ? true : _ref7$$pad;
+StyledTabHighlight.displayName = 'StyledTabHighlight';
+export var StyledTabPanel = styled('div', function (_ref10) {
+  var $theme = _ref10.$theme,
+      _ref10$$pad = _ref10.$pad,
+      $pad = _ref10$$pad === void 0 ? true : _ref10$$pad;
   var style = {
     flexGrow: 1,
     // only used in vertical orientation
@@ -242,4 +269,5 @@ export var StyledTabPanel = styled('div', function (_ref7) {
 
   return style;
 });
-StyledTabPanel.displayName = "StyledTabPanel";
+StyledTabPanel.displayName = "StyledTabPanel";
+StyledTabPanel.displayName = 'StyledTabPanel';

package/esm/tabs-motion/tab.js

@@ -4,6 +4,7 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function Tab(props) {
   return null;
 }

package/esm/tabs-motion/tabs.js

@@ -43,12 +43,13 @@ 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';
 import { getOverrides } from '../helpers/overrides';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 import { ORIENTATION, FILL } from './constants';
-import { StyledRoot, StyledTabList, StyledTab, StyledArtworkContainer, StyledTabHighlight, StyledTabBorder, StyledTabPanel } from './styled-components';
+import { StyledRoot, StyledTabList, StyledTab, StyledArtworkContainer, StyledTabHighlight, StyledTabBorder, StyledTabPanel, StyledEndEnhancerContainer, StyledTabBar } from './styled-components';
 import { getTabId, getTabPanelId, isVertical, isHorizontal, isRTL } from './utils';
 var KEYBOARD_ACTION = {
   next: 'next',
@@ -111,25 +112,40 @@ var scrollParentToCentreTarget = function scrollParentToCentreTarget(targetNode)
   targetNode.parentNode.scroll(target.x, target.y);
 };
 
-export 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 ? 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 ? 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;
+}
+
+export 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 ? 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 ? 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 = useUID();
   var uid = customUid || generatedUid; // Unpack overrides
@@ -157,7 +173,12 @@ export function Tabs(_ref) {
   var _getOverrides7 = getOverrides(TabBorderOverrides, StyledTabBorder),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
       TabBorder = _getOverrides8[0],
-      TabBorderProps = _getOverrides8[1]; // Count key updates
+      TabBorderProps = _getOverrides8[1];
+
+  var _getOverrides9 = getOverrides(overrides.EndEnhancerContainer, 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
@@ -263,7 +284,10 @@ export 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(StyledTabBar, {
+    $hasEndEnhancer: Boolean(endEnhancer),
+    $orientation: orientation
+  }, /*#__PURE__*/React.createElement(TabList, _extends({
     "data-baseweb": "tab-list",
     role: "tablist",
     "aria-orientation": orientation
@@ -291,7 +315,11 @@ export function Tabs(_ref) {
     $animate: keyUpdated > 1,
     "aria-hidden": "true",
     role: "presentation"
-  }, sharedStylingProps, TabHighlightProps))), /*#__PURE__*/React.createElement(TabBorder, _extends({
+  }, sharedStylingProps, TabHighlightProps))), orientation === 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"
@@ -308,20 +336,20 @@ export 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;
@@ -372,15 +400,15 @@ function InternalTab(_ref2) {
   var TabOverrides = overrides.Tab,
       ArtworkContainerOverrides = overrides.ArtworkContainer;
 
-  var _getOverrides9 = getOverrides(TabOverrides, StyledTab),
-      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
-      Tab = _getOverrides10[0],
-      TabProps = _getOverrides10[1];
-
-  var _getOverrides11 = getOverrides(ArtworkContainerOverrides, StyledArtworkContainer),
+  var _getOverrides11 = getOverrides(TabOverrides, StyledTab),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-      ArtworkContainer = _getOverrides12[0],
-      ArtworkContainerProps = _getOverrides12[1]; // Keyboard focus styling
+      Tab = _getOverrides12[0],
+      TabProps = _getOverrides12[1];
+
+  var _getOverrides13 = getOverrides(ArtworkContainerOverrides, StyledArtworkContainer),
+      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
+      ArtworkContainer = _getOverrides14[0],
+      ArtworkContainerProps = _getOverrides14[1]; // Keyboard focus styling
 
 
   var _React$useState5 = React.useState(false),
@@ -393,7 +421,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);
     }
@@ -479,14 +508,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;
@@ -495,10 +524,10 @@ function InternalTabPanel(_ref3) {
       children = props.children;
   var TabPanelOverrides = overrides.TabPanel;
 
-  var _getOverrides13 = getOverrides(TabPanelOverrides, StyledTabPanel),
-      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
-      TabPanel = _getOverrides14[0],
-      TabPanelProps = _getOverrides14[1];
+  var _getOverrides15 = getOverrides(TabPanelOverrides, StyledTabPanel),
+      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
+      TabPanel = _getOverrides16[0],
+      TabPanelProps = _getOverrides16[1];
 
   return /*#__PURE__*/React.createElement(TabPanel, _extends({
     "data-baseweb": "tab-panel",

package/esm/tag/styled-components.js

@@ -279,6 +279,7 @@ export var Action = styled('span', function (props) {
   }, _defineProperty(_ref, bottomRadiusDir, $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0), _defineProperty(_ref, topRadiusDir, $theme.borders.useRoundedCorners ? $theme.borders.radius400 : 0), _defineProperty(_ref, "cursor", $disabled ? 'not-allowed' : 'pointer'), _defineProperty(_ref, "display", 'flex'), _defineProperty(_ref, marginDir, (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, SIZE.small, '8px'), _defineProperty(_SIZE$small$SIZE$medi, SIZE.medium, '12px'), _defineProperty(_SIZE$small$SIZE$medi, SIZE.large, '16px'), _SIZE$small$SIZE$medi)[$size]), _defineProperty(_ref, "outline", 'none'), _defineProperty(_ref, "transitionProperty", 'all'), _defineProperty(_ref, "transitionDuration", 'background-color'), _defineProperty(_ref, "transitionTimingFunction", $theme.animation.easeOutCurve), _ref;
 });
 Action.displayName = "Action";
+Action.displayName = 'Action';
 export var StartEnhancerContainer = styled('div', function (_ref2) {
   var $theme = _ref2.$theme,
       _ref2$$size = _ref2.$size,
@@ -298,6 +299,7 @@ export var StartEnhancerContainer = styled('div', function (_ref2) {
   }, paddingDir, paddingMagnitude);
 });
 StartEnhancerContainer.displayName = "StartEnhancerContainer";
+StartEnhancerContainer.displayName = 'StartEnhancerContainer';
 export var Text = styled('span', function (props) {
   var $theme = props.$theme;
   return {
@@ -309,6 +311,7 @@ export var Text = styled('span', function (props) {
   };
 });
 Text.displayName = "Text";
+Text.displayName = 'Text';
 export var Root = styled('span', function (props) {
   var _SIZE$small$SIZE$medi2, _SIZE$small$SIZE$medi3, _SIZE$small$SIZE$medi4;
 
@@ -374,4 +377,5 @@ export var Root = styled('span', function (props) {
     }
   });
 });
-Root.displayName = "Root";
+Root.displayName = "Root";
+Root.displayName = 'Root';

package/esm/tag/tag.js

@@ -77,7 +77,8 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (isFocusVisible(event)) {
       setFocusVisible(true);
     }
-  }
+  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   function handleBlur(event) {
     if (focusVisible !== false) {
@@ -160,7 +161,8 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var actionSize = (_SIZE$small$SIZE$medi = {}, _defineProperty(_SIZE$small$SIZE$medi, SIZE.small, 12), _defineProperty(_SIZE$small$SIZE$medi, SIZE.medium, 16), _defineProperty(_SIZE$small$SIZE$medi, 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/esm/textarea/styled-components.js

@@ -13,22 +13,27 @@ LICENSE file in the root directory of this source tree.
 import { styled } from '../styles';
 import { getInputStyles, getInputContainerStyles, getRootStyles } from '../input/styled-components';
 export var StyledTextAreaRoot = styled('div', function (props) {
-  return getRootStyles(_objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread({}, getRootStyles(_objectSpread(_objectSpread({
     $positive: false
   }, props), {}, {
     $hasIconTrailing: false
-  }));
+  }))), {}, {
+    width: props.$resize ? 'fit-content' : '100%'
+  });
 });
 StyledTextAreaRoot.displayName = "StyledTextAreaRoot";
+StyledTextAreaRoot.displayName = 'StyledTextAreaRoot';
 export var StyledTextareaContainer = styled('div', function (props) {
-  return _objectSpread({}, getInputContainerStyles(_objectSpread({
+  return getInputContainerStyles(_objectSpread({
     $positive: false
-  }, props)));
+  }, props));
 });
 StyledTextareaContainer.displayName = "StyledTextareaContainer";
+StyledTextareaContainer.displayName = 'StyledTextareaContainer';
 export var StyledTextarea = styled('textarea', function (props) {
   return _objectSpread(_objectSpread({}, getInputStyles(props)), {}, {
-    resize: 'none'
+    resize: props.$resize || 'none'
   });
 });
-StyledTextarea.displayName = "StyledTextarea";
+StyledTextarea.displayName = "StyledTextarea";
+StyledTextarea.displayName = 'StyledTextarea';

package/esm/textarea/textarea.js

@@ -116,12 +116,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(BaseInput, _extends({}, this.props, {
         type: CUSTOM_INPUT_TYPE.textarea,
         overrides: inputOverrides,
         onFocus: this.onFocus,
-        onBlur: this.onBlur
+        onBlur: this.onBlur,
+        resize: this.props.resize
       })));
     }
   }]);

package/esm/themes/move-theme/typography.js

@@ -22,6 +22,24 @@ export var typography = {
   font1150: {
     fontFamily: secondaryFontFamily
   },
+  font1050: {
+    fontFamily: secondaryFontFamily
+  },
+  font950: {
+    fontFamily: secondaryFontFamily
+  },
+  font850: {
+    fontFamily: secondaryFontFamily
+  },
+  font750: {
+    fontFamily: secondaryFontFamily
+  },
+  font650: {
+    fontFamily: secondaryFontFamily
+  },
+  font550: {
+    fontFamily: secondaryFontFamily
+  },
   DisplayLarge: {
     fontFamily: secondaryFontFamily
   },
@@ -34,6 +52,24 @@ export var typography = {
   DisplayXSmall: {
     fontFamily: secondaryFontFamily
   },
+  HeadingXXLarge: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingXLarge: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingLarge: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingMedium: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingSmall: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingXSmall: {
+    fontFamily: secondaryFontFamily
+  },
   MonoParagraphXSmall: {
     fontFamily: monoFontFamily
   },

package/esm/themes/shared/borders.js

@@ -47,13 +47,18 @@ var borders = {
   useRoundedCorners: true,
 
   /** Button, ButtonGroup */
+  buttonBorderRadiusMini: '4px',
   buttonBorderRadius: '8px',
 
-  /** Input, Select, Textarea, Checkbox */
-  inputBorderRadius: '0px',
+  /** Checkbox */
+  checkboxBorderRadius: '0px',
+
+  /** Input, Select, Textarea */
+  inputBorderRadiusMini: '4px',
+  inputBorderRadius: '8px',
 
   /** Popover, Menu, Tooltip */
-  popoverBorderRadius: '0px',
+  popoverBorderRadius: '8px',
 
   /** Card, Datepicker, Modal, Toast, Notification */
   surfaceBorderRadius: '0px',

package/esm/themes/shared/typography.js

@@ -67,61 +67,61 @@ export default (function () {
   var font550 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '20px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '28px'
   };
   var font650 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '24px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '32px'
   };
   var font750 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '28px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '36px'
   };
   var font850 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '32px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '40px'
   };
   var font950 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '36px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '44px'
   };
   var font1050 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '40px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '52px'
   };
   var font1150 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '36px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '44px'
   };
   var font1250 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '44px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '52px'
   };
   var font1350 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '52px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '64px'
   };
   var font1450 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '96px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '112px'
   };
   return {