@salutejs/plasma-new-hope 0.155.1-canary.1374.11068058640.0 → 0.155.1-canary.1374.11103121553.0

package/styled-components/cjs/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _tokens = /*#__PURE__*/require("../../../../../tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["background-color:var(", ");&::before{content:'';position:absolute;top:0.125rem;bottom:0.125rem;left:0;background:var(", ");width:var(", ");border-radius:var(", ");}&.", "{&::before{top:1.5rem;}}&.", "{&::before{bottom:1.5rem;}}"], _tokens.tokens.tabsBackgroundColor, _tokens.tokens.tabsDividerColor, _tokens.tokens.tabsDividerWidth, _tokens.tokens.tabsDividerBorderRadius, _tokens.classes.tabsHasTopArrow, _tokens.classes.tabsHasBottomArrow);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["background-color:var(", ");&::after{content:'';position:absolute;top:0.125rem;bottom:0.125rem;left:0;background:var(", ");width:var(", ");border-radius:var(", ");}&.", "{&::after{top:1.5rem;}}&.", "{&::after{bottom:1.5rem;}}&.", "{&::after{width:0;}}"], _tokens.tokens.tabsBackgroundColor, _tokens.tokens.tabsDividerColor, _tokens.tokens.tabsDividerWidth, _tokens.tokens.tabsDividerBorderRadius, _tokens.classes.tabsHasTopArrow, _tokens.classes.tabsHasBottomArrow, _tokens.classes.tabsNoDivider);

package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx

@@ -22,7 +22,8 @@ type CustomStoryTabsProps = {
     hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
-    value: string;
+    stretch: boolean;
+    helperText: string;
 };
 
 const contentLeftOptions = ['none', 'icon'];
@@ -79,7 +80,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         stretch,
-        value,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -94,7 +95,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={value}
+                    value={helperText}
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
@@ -115,7 +116,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -136,7 +137,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={value}
+                    value={helperText}
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
@@ -157,7 +158,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -188,7 +189,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
-                    value={value}
+                    value={helperText}
                 >
                     {`Label${i + 1}`}
                 </TabItem>
@@ -221,7 +222,7 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
         size: 'xs',
         disabled: false,
         hasDivider: true,
-        value: '',
+        helperText: '',
         itemQuantity: 8,
     },
     argTypes: {
@@ -267,12 +268,11 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
-        stretch,
         size,
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -284,7 +284,6 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
                 hasDivider={hasDivider}
                 size={size as Size}
                 disabled={disabled}
-                stretch={stretch}
                 contentLeft={getContentLeft(contentLeftOption, size as Size)}
             >
                 {items.map((_, i) => (
@@ -297,7 +296,7 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
                         tabIndex={!disabled ? 0 : -1}
                         size={size as Size}
                         disabled={disabled}
-                        value={value}
+                        value={helperText}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                     >
                         {`Label${i + 1}`}
@@ -317,7 +316,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -343,7 +342,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
                         tabIndex={!disabled ? 0 : -1}
                         size={size as Size}
                         disabled={disabled}
-                        value={value}
+                        value={helperText}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                     >
                         {`Label${i + 1}`}
@@ -363,7 +362,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -398,7 +397,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={value}
+                    value={helperText}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size as Size}
                 >
@@ -434,7 +433,7 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
         hasDivider: true,
         itemQuantity: 8,
         orientation: 'vertical',
-        value: '',
+        helperText: '',
     },
     argTypes: {
         contentLeft: {
@@ -462,6 +461,11 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
             },
             if: { arg: 'stretch', truthy: false },
         },
+        stretch: {
+            table: {
+                disable: true,
+            },
+        },
     },
     render: (args) => {
         switch (args.clip) {

package/styled-components/cjs/examples/plasma_b2c/components/Tabs/vertical/VerticalTabs.config.js

@@ -21,9 +21,6 @@ var config = exports.config = {
       m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.625rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.75rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding)
     },
-    stretch: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;"], _Tabs.tabsTokens.containerHeight)
-    },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Tabs.tabsTokens.disabledOpacity)
     }

package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx

@@ -22,7 +22,8 @@ type CustomStoryTabsProps = {
     hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
-    value: string;
+    stretch: boolean;
+    helperText: string;
 };
 
 const contentLeftOptions = ['none', 'icon'];
@@ -79,7 +80,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         stretch,
-        value,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -94,7 +95,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={value}
+                    value={helperText}
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
@@ -115,7 +116,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -136,7 +137,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={value}
+                    value={helperText}
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
@@ -157,7 +158,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -188,7 +189,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
-                    value={value}
+                    value={helperText}
                 >
                     {`Label${i + 1}`}
                 </TabItem>
@@ -221,7 +222,7 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
         size: 'xs',
         disabled: false,
         hasDivider: true,
-        value: '',
+        helperText: '',
         itemQuantity: 8,
     },
     argTypes: {
@@ -272,7 +273,7 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -297,7 +298,7 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
                         tabIndex={!disabled ? 0 : -1}
                         size={size as Size}
                         disabled={disabled}
-                        value={value}
+                        value={helperText}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                     >
                         {`Label${i + 1}`}
@@ -317,7 +318,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -343,7 +344,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
                         tabIndex={!disabled ? 0 : -1}
                         size={size as Size}
                         disabled={disabled}
-                        value={value}
+                        value={helperText}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                     >
                         {`Label${i + 1}`}
@@ -363,7 +364,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -398,7 +399,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={value}
+                    value={helperText}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size as Size}
                 >
@@ -434,7 +435,7 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
         hasDivider: true,
         itemQuantity: 8,
         orientation: 'vertical',
-        value: '',
+        helperText: '',
     },
     argTypes: {
         contentLeft: {
@@ -462,6 +463,11 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
             },
             if: { arg: 'stretch', truthy: false },
         },
+        stretch: {
+            table: {
+                disable: true,
+            },
+        },
     },
     render: (args) => {
         switch (args.clip) {

package/styled-components/cjs/examples/plasma_web/components/Tabs/vertical/VerticalTabs.config.js

@@ -21,9 +21,6 @@ var config = exports.config = {
       m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.625rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.75rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding)
     },
-    stretch: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;"], _Tabs.tabsTokens.containerHeight)
-    },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Tabs.tabsTokens.disabledOpacity)
     }

package/styled-components/es/components/Tabs/tokens.js

@@ -3,6 +3,7 @@ export var classes = {
   tabsPilled: 'tabs-pilled',
   tabsGroupFilledBackground: 'tabs-group-filled-background',
   tabsStretch: 'tabs-stretched',
+  tabsNoDivider: 'tabs-no-divider',
   tabItemDivider: 'tab-item-divider',
   tabItemAnimated: 'tab-item-animated',
   tabContent: 'tab-item-content',

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_view/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../../../../tokens';
 import { TabItemValue } from '../../VerticalTabItem.styles';
-export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}}&:active{color:var(", ");", "{color:var(", ");}}&.", "{transition:var(", ");}&.", "{color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");&::after{background:var(", ");}}", "{color:var(", ");&:hover{color:var(", ");}}&::before{content:'';position:absolute;top:0;left:0;bottom:0;background:var(", ");width:var(", ");border-radius:1px;}}"], tokens.itemColor, tokens.itemBackgroundColor, tokens.itemColorHover, tokens.itemBackgroundColorHover, TabItemValue, tokens.itemValueColorHover, tokens.itemColorActive, TabItemValue, tokens.itemValueColorActive, /*#__PURE__*/String(classes.tabItemAnimated), tokens.itemBackgroundTransition, /*#__PURE__*/String(classes.selectedTabsItem), tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor, tokens.itemSelectedColorHover, tokens.itemSelectedBackgroundColorHover, tokens.itemSelectedDividerColorHover, TabItemValue, tokens.itemSelectedValueColorHover, tokens.itemSelectedValueColorHover, tokens.itemSelectedDividerColor, tokens.itemSelectedDividerWidth);
+export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}}&:active{color:var(", ");", "{color:var(", ");}}&.", "{transition:var(", ");}&.", "{color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");&::after{background:var(", ");}}", "{color:var(", ");&:hover{color:var(", ");}}&::after{content:'';position:absolute;top:0;left:0;bottom:0;background:var(", ");width:var(", ");border-radius:1px;}}"], tokens.itemColor, tokens.itemBackgroundColor, tokens.itemColorHover, tokens.itemBackgroundColorHover, TabItemValue, tokens.itemValueColorHover, tokens.itemColorActive, TabItemValue, tokens.itemValueColorActive, /*#__PURE__*/String(classes.tabItemAnimated), tokens.itemBackgroundTransition, /*#__PURE__*/String(classes.selectedTabsItem), tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor, tokens.itemSelectedColorHover, tokens.itemSelectedBackgroundColorHover, tokens.itemSelectedDividerColorHover, TabItemValue, tokens.itemSelectedValueColorHover, tokens.itemSelectedValueColorHover, tokens.itemSelectedDividerColor, tokens.itemSelectedDividerWidth);

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "index", "className", "orientation", "hasDivider"];
+var _excluded = ["id", "disabled", "clip", "size", "view", "children", "index", "className", "orientation", "hasDivider"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -18,7 +18,6 @@ import { base, StyledArrow, StyledContent, StyledContentWrapper } from './Vertic
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
-import { base as stretchCSS } from './variations/_stretch/base';
 var Keys = /*#__PURE__*/function (Keys) {
   Keys[Keys["end"] = 35] = "end";
   Keys[Keys["home"] = 36] = "home";
@@ -29,8 +28,6 @@ var Keys = /*#__PURE__*/function (Keys) {
 export var verticalTabsRoot = function verticalTabsRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var id = props.id,
-      _props$stretch = props.stretch,
-      stretch = _props$stretch === void 0 ? false : _props$stretch,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       _props$clip = props.clip,
@@ -57,11 +54,11 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
     }, []);
     var uniqId = safeUseId();
     var tabsId = id || uniqId;
-    var stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;
+    var noDividerClass = !hasDivider ? classes.tabsNoDivider : undefined;
     var hasTopArrowClass = !firstItemVisible ? classes.tabsHasTopArrow : undefined;
     var hasBottomArrowClass = !lastItemVisible ? classes.tabsHasBottomArrow : undefined;
-    var clipScrollClass = !stretch && clip === 'scroll' ? classes.tabsClipScroll : undefined;
-    var clipShowAllClass = !stretch && clip === 'showAll' ? classes.tabsClipShowAll : undefined;
+    var clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;
+    var clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;
     var scrollRef = useRef(null);
     var trackRef = useRef(null);
     var upArrowRef = useRef(null);
@@ -184,7 +181,7 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
       id: tabsId,
       ref: outerRef,
       disabled: disabled,
-      className: cx(stretchClass, hasTopArrowClass, hasBottomArrowClass, className),
+      className: cx(hasTopArrowClass, hasBottomArrowClass, noDividerClass, className),
       onKeyDown: onKeyDown,
       orientation: orientation
     }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
@@ -192,7 +189,6 @@ export var verticalTabsRoot = function verticalTabsRoot(Root) {
       ref: scrollRef,
       onScroll: handleScroll
     }, /*#__PURE__*/React.createElement(StyledContent, {
-      hasDivider: hasDivider,
       ref: trackRef
     }, children)), !lastItemVisible && NextButton));
   });
@@ -212,10 +208,6 @@ export var verticalTabsConfig = {
     disabled: {
       css: disabledCSS,
       attrs: true
-    },
-    stretch: {
-      css: stretchCSS,
-      attrs: true
     }
   },
   defaults: {

package/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/variations/_view/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../../../../tokens';
-export var base = /*#__PURE__*/css(["background-color:var(", ");&::before{content:'';position:absolute;top:0.125rem;bottom:0.125rem;left:0;background:var(", ");width:var(", ");border-radius:var(", ");}&.", "{&::before{top:1.5rem;}}&.", "{&::before{bottom:1.5rem;}}"], tokens.tabsBackgroundColor, tokens.tabsDividerColor, tokens.tabsDividerWidth, tokens.tabsDividerBorderRadius, classes.tabsHasTopArrow, classes.tabsHasBottomArrow);
+export var base = /*#__PURE__*/css(["background-color:var(", ");&::after{content:'';position:absolute;top:0.125rem;bottom:0.125rem;left:0;background:var(", ");width:var(", ");border-radius:var(", ");}&.", "{&::after{top:1.5rem;}}&.", "{&::after{bottom:1.5rem;}}&.", "{&::after{width:0;}}"], tokens.tabsBackgroundColor, tokens.tabsDividerColor, tokens.tabsDividerWidth, tokens.tabsDividerBorderRadius, classes.tabsHasTopArrow, classes.tabsHasBottomArrow, classes.tabsNoDivider);

package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx

@@ -22,7 +22,8 @@ type CustomStoryTabsProps = {
     hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
-    value: string;
+    stretch: boolean;
+    helperText: string;
 };
 
 const contentLeftOptions = ['none', 'icon'];
@@ -79,7 +80,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         stretch,
-        value,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -94,7 +95,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={value}
+                    value={helperText}
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
@@ -115,7 +116,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -136,7 +137,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={value}
+                    value={helperText}
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
@@ -157,7 +158,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -188,7 +189,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
-                    value={value}
+                    value={helperText}
                 >
                     {`Label${i + 1}`}
                 </TabItem>
@@ -221,7 +222,7 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
         size: 'xs',
         disabled: false,
         hasDivider: true,
-        value: '',
+        helperText: '',
         itemQuantity: 8,
     },
     argTypes: {
@@ -267,12 +268,11 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
-        stretch,
         size,
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -284,7 +284,6 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
                 hasDivider={hasDivider}
                 size={size as Size}
                 disabled={disabled}
-                stretch={stretch}
                 contentLeft={getContentLeft(contentLeftOption, size as Size)}
             >
                 {items.map((_, i) => (
@@ -297,7 +296,7 @@ const StoryVerticalDefault = (props: StoryTabsProps) => {
                         tabIndex={!disabled ? 0 : -1}
                         size={size as Size}
                         disabled={disabled}
-                        value={value}
+                        value={helperText}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                     >
                         {`Label${i + 1}`}
@@ -317,7 +316,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -343,7 +342,7 @@ const StoryVerticalScroll = (props: StoryTabsProps) => {
                         tabIndex={!disabled ? 0 : -1}
                         size={size as Size}
                         disabled={disabled}
-                        value={value}
+                        value={helperText}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                     >
                         {`Label${i + 1}`}
@@ -363,7 +362,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        value,
+        helperText,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -398,7 +397,7 @@ const StoryVerticalShowAll = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={value}
+                    value={helperText}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size as Size}
                 >
@@ -434,7 +433,7 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
         hasDivider: true,
         itemQuantity: 8,
         orientation: 'vertical',
-        value: '',
+        helperText: '',
     },
     argTypes: {
         contentLeft: {
@@ -462,6 +461,11 @@ export const VerticalTabs: StoryObj<StoryTabsProps> = {
             },
             if: { arg: 'stretch', truthy: false },
         },
+        stretch: {
+            table: {
+                disable: true,
+            },
+        },
     },
     render: (args) => {
         switch (args.clip) {

package/styled-components/es/examples/plasma_b2c/components/Tabs/vertical/VerticalTabs.config.js

@@ -15,9 +15,6 @@ export var config = {
       m: /*#__PURE__*/css(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.625rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),
       l: /*#__PURE__*/css(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.75rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding)
     },
-    stretch: {
-      "true": /*#__PURE__*/css(["", ":100%;"], tabsTokens.containerHeight)
-    },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], tabsTokens.disabledOpacity)
     }