baseui 12.0.0 → 12.1.0

package/table/styled-components.js

@@ -38,6 +38,7 @@ var StyledTableElement = (0, _styles.styled)('div', function (_ref) {
   });
 });
 StyledTableElement.displayName = "StyledTableElement";
+StyledTableElement.displayName = 'StyledTableElement';
 var StyledTable = (0, _styles.withWrapper)(StyledTableElement, function (StyledComponent) {
   return function StyledTable(props) {
     return /*#__PURE__*/React.createElement(StyledComponent, _extends({
@@ -59,6 +60,7 @@ var StyledHeadElement = (0, _styles.styled)('div', function (_ref2) {
   };
 });
 StyledHeadElement.displayName = "StyledHeadElement";
+StyledHeadElement.displayName = 'StyledHeadElement';
 var StyledHead = (0, _styles.withWrapper)(StyledHeadElement, function (StyledComponent) {
   return function StyledHead(props) {
     return /*#__PURE__*/React.createElement(StyledComponent, _extends({
@@ -88,6 +90,7 @@ var StyledHeadCellElement = (0, _styles.styled)('div', function (_ref3) {
   });
 });
 StyledHeadCellElement.displayName = "StyledHeadCellElement";
+StyledHeadCellElement.displayName = 'StyledHeadCellElement';
 var StyledHeadCell = (0, _styles.withWrapper)(StyledHeadCellElement, function (StyledComponent) {
   return function StyledHeadCell(props) {
     return /*#__PURE__*/React.createElement(StyledComponent, _extends({
@@ -118,6 +121,7 @@ var StyledSortableLabel = (0, _styles.styled)('button', function (_ref4) {
 });
 exports.StyledSortableLabel = StyledSortableLabel;
 StyledSortableLabel.displayName = "StyledSortableLabel";
+StyledSortableLabel.displayName = 'StyledSortableLabel';
 var StyledBodyElement = (0, _styles.styled)('div', function (_ref5) {
   var $width = _ref5.$width;
   return {
@@ -129,6 +133,7 @@ var StyledBodyElement = (0, _styles.styled)('div', function (_ref5) {
   };
 });
 StyledBodyElement.displayName = "StyledBodyElement";
+StyledBodyElement.displayName = 'StyledBodyElement';
 var StyledBody = (0, _styles.withWrapper)(StyledBodyElement, function (StyledComponent) {
   return function StyledBody(props) {
     return /*#__PURE__*/React.createElement(StyledComponent, _extends({
@@ -142,6 +147,7 @@ var StyledRowElement = (0, _styles.styled)('div', {
   alignItems: 'center'
 });
 StyledRowElement.displayName = "StyledRowElement";
+StyledRowElement.displayName = 'StyledRowElement';
 var StyledRow = (0, _styles.withWrapper)(StyledRowElement, function (StyledComponent) {
   return function StyledRow(props) {
     return /*#__PURE__*/React.createElement(StyledComponent, _extends({
@@ -165,6 +171,7 @@ var StyledCellElement = (0, _styles.styled)('div', function (_ref6) {
   });
 });
 StyledCellElement.displayName = "StyledCellElement";
+StyledCellElement.displayName = 'StyledCellElement';
 var StyledCell = (0, _styles.withWrapper)(StyledCellElement, function (StyledComponent) {
   return function StyledCell(props) {
     return /*#__PURE__*/React.createElement(StyledComponent, _extends({
@@ -213,6 +220,7 @@ var StyledFilterButton = (0, _styles.styled)('button', function (props) {
 });
 exports.StyledFilterButton = StyledFilterButton;
 StyledFilterButton.displayName = "StyledFilterButton";
+StyledFilterButton.displayName = 'StyledFilterButton';
 var StyledFilterContent = (0, _styles.styled)('div', function (_ref7) {
   var $theme = _ref7.$theme;
   return _objectSpread(_objectSpread({}, (0, _styles.expandBorderStyles)($theme.borders.border300)), {}, {
@@ -227,6 +235,7 @@ var StyledFilterContent = (0, _styles.styled)('div', function (_ref7) {
 });
 exports.StyledFilterContent = StyledFilterContent;
 StyledFilterContent.displayName = "StyledFilterContent";
+StyledFilterContent.displayName = 'StyledFilterContent';
 var StyledFilterHeading = (0, _styles.styled)('div', function (_ref8) {
   var $theme = _ref8.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font250), {}, {
@@ -239,6 +248,7 @@ var StyledFilterHeading = (0, _styles.styled)('div', function (_ref8) {
 });
 exports.StyledFilterHeading = StyledFilterHeading;
 StyledFilterHeading.displayName = "StyledFilterHeading";
+StyledFilterHeading.displayName = 'StyledFilterHeading';
 var StyledFilterFooter = (0, _styles.styled)('div', function (_ref9) {
   var $theme = _ref9.$theme;
   return {
@@ -254,6 +264,7 @@ var StyledFilterFooter = (0, _styles.styled)('div', function (_ref9) {
 });
 exports.StyledFilterFooter = StyledFilterFooter;
 StyledFilterFooter.displayName = "StyledFilterFooter";
+StyledFilterFooter.displayName = 'StyledFilterFooter';
 var StyledAction = (0, _styles.styled)('button', function (_ref10) {
   var $theme = _ref10.$theme;
   return {
@@ -275,4 +286,5 @@ var StyledAction = (0, _styles.styled)('button', function (_ref10) {
   };
 });
 exports.StyledAction = StyledAction;
-StyledAction.displayName = "StyledAction";
+StyledAction.displayName = "StyledAction";
+StyledAction.displayName = 'StyledAction';

package/table/types.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { SORT_DIRECTION } from './constants';
+import type * as React from 'react';
+import type { SORT_DIRECTION } from './constants';
 import type { Override } from '../helpers/overrides';
 export declare type SortDirection = keyof typeof SORT_DIRECTION | undefined | null;
 export declare type HeadCellOverrides = {

package/table-grid/styled-components.js

@@ -30,6 +30,7 @@ var StyledTableElement = (0, _styles.withStyle)(_table.StyledTable, function (pr
   };
 });
 StyledTableElement.displayName = "StyledTableElement";
+StyledTableElement.displayName = 'StyledTableElement';
 var StyledTable = (0, _styles.withWrapper)(StyledTableElement, function (StyledComponent) {
   return function StyledTable(props) {
     return /*#__PURE__*/React.createElement(StyledComponent, _extends({
@@ -58,6 +59,7 @@ var StyledHeadCell = (0, _styles.withStyle)(_table.StyledHeadCell, function (_re
 });
 exports.StyledHeadCell = StyledHeadCell;
 StyledHeadCell.displayName = "StyledHeadCell";
+StyledHeadCell.displayName = 'StyledHeadCell';
 var StyledBodyCell = (0, _styles.withStyle)(_table.StyledCell, function (props) {
   return {
     display: 'block',
@@ -71,4 +73,5 @@ var StyledBodyCell = (0, _styles.withStyle)(_table.StyledCell, function (props)
   };
 });
 exports.StyledBodyCell = StyledBodyCell;
-StyledBodyCell.displayName = "StyledBodyCell";
+StyledBodyCell.displayName = "StyledBodyCell";
+StyledBodyCell.displayName = 'StyledBodyCell';

package/table-semantic/styled-components.js

@@ -53,6 +53,8 @@ var StyledRoot = (0, _styles.styled)('div', function (_ref) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 var StyledTable = (0, _styles.styled)('table', function (_ref2) {
   var $theme = _ref2.$theme,
       $width = _ref2.$width;
@@ -65,18 +67,23 @@ var StyledTable = (0, _styles.styled)('table', function (_ref2) {
 });
 exports.StyledTable = StyledTable;
 StyledTable.displayName = "StyledTable";
+StyledTable.displayName = 'StyledTable'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 var StyledTableHead = (0, _styles.styled)('thead', function (_ref3) {
   var $theme = _ref3.$theme;
   return {};
 });
 exports.StyledTableHead = StyledTableHead;
 StyledTableHead.displayName = "StyledTableHead";
+StyledTableHead.displayName = 'StyledTableHead'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 var StyledTableHeadRow = (0, _styles.styled)('tr', function (_ref4) {
   var $theme = _ref4.$theme;
   return {};
 });
 exports.StyledTableHeadRow = StyledTableHeadRow;
 StyledTableHeadRow.displayName = "StyledTableHeadRow";
+StyledTableHeadRow.displayName = 'StyledTableHeadRow';
 var StyledTableHeadCell = (0, _styles.styled)('th', function (_ref5) {
   var _notLastChild;
 
@@ -97,7 +104,6 @@ var StyledTableHeadCell = (0, _styles.styled)('th', function (_ref5) {
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     color: $theme.colors.contentPrimary,
     textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
-    verticalAlign: 'top',
     whiteSpace: 'nowrap',
     zIndex: 1
   }, $divider === _constants.DIVIDER.clean ? {} : {
@@ -110,6 +116,7 @@ var StyledTableHeadCell = (0, _styles.styled)('th', function (_ref5) {
 });
 exports.StyledTableHeadCell = StyledTableHeadCell;
 StyledTableHeadCell.displayName = "StyledTableHeadCell";
+StyledTableHeadCell.displayName = 'StyledTableHeadCell';
 var StyledTableHeadCellSortable = (0, _styles.withStyle)(StyledTableHeadCell, function (_ref6) {
   var $theme = _ref6.$theme,
       $isFocusVisible = _ref6.$isFocusVisible;
@@ -128,6 +135,7 @@ var StyledTableHeadCellSortable = (0, _styles.withStyle)(StyledTableHeadCell, fu
 });
 exports.StyledTableHeadCellSortable = StyledTableHeadCellSortable;
 StyledTableHeadCellSortable.displayName = "StyledTableHeadCellSortable";
+StyledTableHeadCellSortable.displayName = 'StyledTableHeadCellSortable';
 var StyledSortIconContainer = (0, _styles.styled)('span', function (_ref7) {
   var $theme = _ref7.$theme;
   return {
@@ -138,10 +146,11 @@ var StyledSortIconContainer = (0, _styles.styled)('span', function (_ref7) {
     right: $theme.sizing.scale500,
     transform: 'translateY(-50%)'
   };
-}); // No longer used, but will maintain for some time to support existing usage
-
+});
 exports.StyledSortIconContainer = StyledSortIconContainer;
 StyledSortIconContainer.displayName = "StyledSortIconContainer";
+StyledSortIconContainer.displayName = 'StyledSortIconContainer'; // No longer used, but will maintain for some time to support existing usage
+
 var StyledSortAscIcon = (0, _styles.styled)(_chevronUp.default, function (_ref8) {
   var $theme = _ref8.$theme;
   return {
@@ -153,6 +162,7 @@ var StyledSortAscIcon = (0, _styles.styled)(_chevronUp.default, function (_ref8)
 });
 exports.StyledSortAscIcon = StyledSortAscIcon;
 StyledSortAscIcon.displayName = "StyledSortAscIcon";
+StyledSortAscIcon.displayName = 'StyledSortAscIcon';
 var StyledSortDescIcon = (0, _styles.styled)(_chevronDown.default, function (_ref9) {
   var $theme = _ref9.$theme;
   return {
@@ -164,6 +174,7 @@ var StyledSortDescIcon = (0, _styles.styled)(_chevronDown.default, function (_re
 });
 exports.StyledSortDescIcon = StyledSortDescIcon;
 StyledSortDescIcon.displayName = "StyledSortDescIcon";
+StyledSortDescIcon.displayName = 'StyledSortDescIcon';
 var StyledSortNoneIcon = (0, _styles.styled)(_blank.default, function (_ref10) {
   var $theme = _ref10.$theme;
   return {
@@ -175,12 +186,15 @@ var StyledSortNoneIcon = (0, _styles.styled)(_blank.default, function (_ref10) {
 });
 exports.StyledSortNoneIcon = StyledSortNoneIcon;
 StyledSortNoneIcon.displayName = "StyledSortNoneIcon";
+StyledSortNoneIcon.displayName = 'StyledSortNoneIcon'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 var StyledTableBody = (0, _styles.styled)('tbody', function (_ref11) {
   var $theme = _ref11.$theme;
   return {};
 });
 exports.StyledTableBody = StyledTableBody;
 StyledTableBody.displayName = "StyledTableBody";
+StyledTableBody.displayName = 'StyledTableBody';
 var StyledTableBodyRow = (0, _styles.styled)('tr', function (_ref12) {
   var $theme = _ref12.$theme;
   return {
@@ -191,6 +205,7 @@ var StyledTableBodyRow = (0, _styles.styled)('tr', function (_ref12) {
 });
 exports.StyledTableBodyRow = StyledTableBodyRow;
 StyledTableBodyRow.displayName = "StyledTableBodyRow";
+StyledTableBodyRow.displayName = 'StyledTableBodyRow';
 var StyledTableBodyCell = (0, _styles.styled)('td', function (_ref13) {
   var _notLastChild2;
 
@@ -220,6 +235,7 @@ var StyledTableBodyCell = (0, _styles.styled)('td', function (_ref13) {
 });
 exports.StyledTableBodyCell = StyledTableBodyCell;
 StyledTableBodyCell.displayName = "StyledTableBodyCell";
+StyledTableBodyCell.displayName = 'StyledTableBodyCell';
 var StyledTableLoadingMessage = (0, _styles.styled)('div', function (_ref14) {
   var $theme = _ref14.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.ParagraphSmall), {}, {
@@ -229,5 +245,6 @@ var StyledTableLoadingMessage = (0, _styles.styled)('div', function (_ref14) {
 });
 exports.StyledTableLoadingMessage = StyledTableLoadingMessage;
 StyledTableLoadingMessage.displayName = "StyledTableLoadingMessage";
+StyledTableLoadingMessage.displayName = 'StyledTableLoadingMessage';
 var StyledTableEmptyMessage = StyledTableLoadingMessage;
 exports.StyledTableEmptyMessage = StyledTableEmptyMessage;

package/table-semantic/types.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import { SIZE, DIVIDER } from './constants';
+import type { SIZE, DIVIDER } from './constants';
 export declare type Size = keyof typeof SIZE;
 export declare type Divider = keyof typeof DIVIDER;
 export declare type TableOverrides = {

package/tabs/stateful-tabs.js

@@ -105,6 +105,7 @@ var StatefulTabs = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       var _this$props3 = this.props,
           initialState = _this$props3.initialState,
           stateReducer = _this$props3.stateReducer,

package/tabs/styled-components.js

@@ -24,6 +24,7 @@ var Root = (0, _styles.styled)('div', function (props) {
 });
 exports.Root = Root;
 Root.displayName = "Root";
+Root.displayName = 'Root';
 var Tab = (0, _styles.styled)('div', function (props) {
   var $disabled = props.$disabled,
       $active = props.$active,
@@ -65,6 +66,7 @@ var Tab = (0, _styles.styled)('div', function (props) {
 });
 exports.Tab = Tab;
 Tab.displayName = "Tab";
+Tab.displayName = 'Tab';
 var TabBar = (0, _styles.styled)('div', function (props) {
   var $orientation = props.$orientation,
       _props$$theme2 = props.$theme,
@@ -80,6 +82,7 @@ var TabBar = (0, _styles.styled)('div', function (props) {
 });
 exports.TabBar = TabBar;
 TabBar.displayName = "TabBar";
+TabBar.displayName = 'TabBar';
 var TabContent = (0, _styles.styled)('div', function (props) {
   var $active = props.$active,
       _props$$theme3 = props.$theme,
@@ -94,4 +97,5 @@ var TabContent = (0, _styles.styled)('div', function (props) {
   });
 });
 exports.TabContent = TabContent;
-TabContent.displayName = "TabContent";
+TabContent.displayName = "TabContent";
+TabContent.displayName = 'TabContent';

package/tabs/tabs.js

@@ -86,7 +86,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);
@@ -124,7 +125,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       var _getOverrides = (0, _overrides.getOverrides)(TabContentOverride, _styledComponents.TabContent),
           _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/tabs/types.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import { ORIENTATION, STATE_CHANGE_TYPE } from './constants';
+import type { ORIENTATION, STATE_CHANGE_TYPE } from './constants';
 export declare type SharedStylePropsArg = {
     $disabled?: boolean;
     $active?: boolean;

package/tabs-motion/styled-components.d.ts

@@ -2,6 +2,10 @@ import type { Orientation, Fill } from './types';
 export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", {
     $orientation?: Orientation;
 }>;
+export declare const StyledTabBar: import("styletron-react").StyletronComponent<"div", {
+    $hasEndEnhancer: boolean;
+    $orientation: Orientation;
+}>;
 export declare const StyledTabList: import("styletron-react").StyletronComponent<"div", {
     $orientation?: Orientation;
     $fill?: Fill;
@@ -12,6 +16,7 @@ export declare const StyledTab: import("styletron-react").StyletronComponent<"bu
     $focusVisible?: boolean;
     $isActive?: boolean;
 }>;
+export declare const StyledEndEnhancerContainer: import("styletron-react").StyletronComponent<"div", {}>;
 export declare const StyledArtworkContainer: import("styletron-react").StyletronComponent<"div", {
     $orientation?: Orientation;
 }>;

package/tabs-motion/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTabPanel = exports.StyledTabList = exports.StyledTabHighlight = exports.StyledTabBorder = exports.StyledTab = exports.StyledRoot = exports.StyledArtworkContainer = void 0;
+exports.StyledTabPanel = exports.StyledTabList = exports.StyledTabHighlight = exports.StyledTabBorder = exports.StyledTabBar = exports.StyledTab = exports.StyledRoot = exports.StyledEndEnhancerContainer = exports.StyledArtworkContainer = void 0;
 
 var _styles = require("../styles");
 
@@ -35,16 +35,28 @@ var StyledRoot = (0, _styles.styled)('div', function (_ref) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
-var StyledTabList = (0, _styles.styled)('div', function (_ref2) {
-  var $theme = _ref2.$theme,
-      _ref2$$fill = _ref2.$fill,
-      $fill = _ref2$$fill === void 0 ? _constants.FILL.intrinsic : _ref2$$fill,
-      _ref2$$orientation = _ref2.$orientation,
-      $orientation = _ref2$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref2$$orientation;
+StyledRoot.displayName = 'StyledRoot';
+var StyledTabBar = (0, _styles.styled)('div', function (_ref2) {
+  var $hasEndEnhancer = _ref2.$hasEndEnhancer,
+      $orientation = _ref2.$orientation;
+  return $hasEndEnhancer || !(0, _utils.isHorizontal)($orientation) ? {
+    display: 'flex'
+  } : {};
+});
+exports.StyledTabBar = StyledTabBar;
+StyledTabBar.displayName = "StyledTabBar";
+StyledTabBar.displayName = 'StyledTabBar';
+var StyledTabList = (0, _styles.styled)('div', function (_ref3) {
+  var $theme = _ref3.$theme,
+      _ref3$$fill = _ref3.$fill,
+      $fill = _ref3$$fill === void 0 ? _constants.FILL.intrinsic : _ref3$$fill,
+      _ref3$$orientation = _ref3.$orientation,
+      $orientation = _ref3$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref3$$orientation;
   var style = {
     position: 'relative',
     display: 'flex',
-    flexWrap: 'nowrap'
+    flexWrap: 'nowrap',
+    flexGrow: 1
   };
 
   if ((0, _utils.isHorizontal)($orientation)) {
@@ -81,16 +93,17 @@ var StyledTabList = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.StyledTabList = StyledTabList;
 StyledTabList.displayName = "StyledTabList";
-var StyledTab = (0, _styles.styled)('button', function (_ref3) {
-  var $theme = _ref3.$theme,
-      _ref3$$orientation = _ref3.$orientation,
-      $orientation = _ref3$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref3$$orientation,
-      _ref3$$fill = _ref3.$fill,
-      $fill = _ref3$$fill === void 0 ? _constants.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';
+var StyledTab = (0, _styles.styled)('button', function (_ref4) {
+  var $theme = _ref4.$theme,
+      _ref4$$orientation = _ref4.$orientation,
+      $orientation = _ref4$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref4$$orientation,
+      _ref4$$fill = _ref4.$fill,
+      $fill = _ref4$$fill === void 0 ? _constants.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',
@@ -152,10 +165,23 @@ var StyledTab = (0, _styles.styled)('button', function (_ref3) {
 });
 exports.StyledTab = StyledTab;
 StyledTab.displayName = "StyledTab";
-var StyledArtworkContainer = (0, _styles.styled)('div', function (_ref4) {
-  var $theme = _ref4.$theme,
-      _ref4$$orientation = _ref4.$orientation,
-      $orientation = _ref4$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref4$$orientation;
+StyledTab.displayName = 'StyledTab';
+var StyledEndEnhancerContainer = (0, _styles.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);
+});
+exports.StyledEndEnhancerContainer = StyledEndEnhancerContainer;
+StyledEndEnhancerContainer.displayName = "StyledEndEnhancerContainer";
+StyledEndEnhancerContainer.displayName = 'StyledEndEnhancerContainer';
+var StyledArtworkContainer = (0, _styles.styled)('div', function (_ref7) {
+  var $theme = _ref7.$theme,
+      _ref7$$orientation = _ref7.$orientation,
+      $orientation = _ref7$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref7$$orientation;
   var style = {
     display: 'flex'
   };
@@ -170,10 +196,11 @@ var StyledArtworkContainer = (0, _styles.styled)('div', function (_ref4) {
 });
 exports.StyledArtworkContainer = StyledArtworkContainer;
 StyledArtworkContainer.displayName = "StyledArtworkContainer";
-var StyledTabBorder = (0, _styles.styled)('div', function (_ref5) {
-  var $theme = _ref5.$theme,
-      _ref5$$orientation = _ref5.$orientation,
-      $orientation = _ref5$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref5$$orientation;
+StyledArtworkContainer.displayName = 'StyledArtworkContainer';
+var StyledTabBorder = (0, _styles.styled)('div', function (_ref8) {
+  var $theme = _ref8.$theme,
+      _ref8$$orientation = _ref8.$orientation,
+      $orientation = _ref8$$orientation === void 0 ? _constants.ORIENTATION.horizontal : _ref8$$orientation;
   var style = {
     backgroundColor: $theme.colors.borderOpaque,
     position: 'relative'
@@ -189,16 +216,17 @@ var StyledTabBorder = (0, _styles.styled)('div', function (_ref5) {
 });
 exports.StyledTabBorder = StyledTabBorder;
 StyledTabBorder.displayName = "StyledTabBorder";
-var StyledTabHighlight = (0, _styles.styled)('div', function (_ref6) {
-  var $theme = _ref6.$theme,
-      _ref6$$orientation = _ref6.$orientation,
-      $orientation = _ref6$$orientation === void 0 ? _constants.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';
+var StyledTabHighlight = (0, _styles.styled)('div', function (_ref9) {
+  var $theme = _ref9.$theme,
+      _ref9$$orientation = _ref9.$orientation,
+      $orientation = _ref9$$orientation === void 0 ? _constants.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',
@@ -233,10 +261,11 @@ var StyledTabHighlight = (0, _styles.styled)('div', function (_ref6) {
 });
 exports.StyledTabHighlight = StyledTabHighlight;
 StyledTabHighlight.displayName = "StyledTabHighlight";
-var StyledTabPanel = (0, _styles.styled)('div', function (_ref7) {
-  var $theme = _ref7.$theme,
-      _ref7$$pad = _ref7.$pad,
-      $pad = _ref7$$pad === void 0 ? true : _ref7$$pad;
+StyledTabHighlight.displayName = 'StyledTabHighlight';
+var StyledTabPanel = (0, _styles.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
@@ -253,4 +282,5 @@ var StyledTabPanel = (0, _styles.styled)('div', function (_ref7) {
   return style;
 });
 exports.StyledTabPanel = StyledTabPanel;
-StyledTabPanel.displayName = "StyledTabPanel";
+StyledTabPanel.displayName = "StyledTabPanel";
+StyledTabPanel.displayName = 'StyledTabPanel';

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

@@ -29,6 +29,16 @@ export const StyledRoot = styled<{ $orientation?: OrientationT }>(
   }
 );
 
+export const StyledTabBar = styled<{ $hasEndEnhancer: boolean, $orientation: OrientationT }>(
+  'div',
+  ({ $hasEndEnhancer, $orientation }) =>
+    $hasEndEnhancer || !isHorizontal($orientation)
+      ? {
+          display: 'flex',
+        }
+      : {}
+);
+
 export const StyledTabList = styled<{
   $orientation?: OrientationT,
   $fill?: FillT,
@@ -37,6 +47,7 @@ export const StyledTabList = styled<{
     position: 'relative',
     display: 'flex',
     flexWrap: 'nowrap',
+    flexGrow: 1,
   };
   if (isHorizontal($orientation)) {
     style.flexDirection = 'row';
@@ -137,6 +148,16 @@ export const StyledTab = styled<{
   }
 );
 
+export const StyledEndEnhancerContainer = styled<{}>('div', ({ $theme }) => {
+  const marginDirection: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    [marginDirection]: $theme.sizing.scale600,
+  };
+});
+
 export const StyledArtworkContainer = styled<{ $orientation?: OrientationT }>(
   'div',
   ({ $theme, $orientation = ORIENTATION.horizontal }) => {

package/tabs-motion/tab.js

@@ -11,6 +11,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
 function Tab(props) {
   return null;
 }

package/tabs-motion/tabs.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { TabsProps } from './types';
-export declare function Tabs({ activeKey, disabled, children, fill, activateOnFocus, onChange, orientation, overrides, renderAll, uid: customUid, }: TabsProps): JSX.Element;
+export declare function Tabs({ activeKey, disabled, children, fill, activateOnFocus, onChange, orientation, overrides, renderAll, uid: customUid, endEnhancer, }: TabsProps): JSX.Element;