@salutejs/plasma-new-hope 0.177.0-dev.0 → 0.177.1-canary.1512.11575354211.0

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

@@ -12,6 +12,7 @@ import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
 const clips = ['none', 'scroll', 'showAll'];
+const headerClips = ['none', 'scroll'];
 const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
@@ -20,7 +21,6 @@ type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
     itemQuantity: number;
-    hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
     stretch: boolean;
@@ -30,12 +30,12 @@ type CustomStoryTabsProps = {
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
 
-const getContentLeft = (contentLeftOption: string, size: Size) => {
+const getContentLeft = (contentLeftOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
 };
 
-const getContentRight = (contentRightOption: string, size: Size) => {
+const getContentRight = (contentRightOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
@@ -96,7 +96,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -152,7 +152,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -220,7 +220,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     });
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -603,31 +603,47 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderTabs = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-    } = props;
+const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="clear"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    value={helperText}
+                    size={size as HeaderSize}
+                >
+                    {`Label${i + 1}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText, width } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
-                    view="divider"
+                    view="clear"
                     selected={i === index}
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
+                    value={helperText}
                     size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
@@ -637,37 +653,60 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<StoryTabsProps> = {
+export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
-        hasDivider: true,
-        itemQuantity: 4,
+        helperText: '',
+        itemQuantity: 6,
+        width: '12rem',
     },
     argTypes: {
-        size: {
-            options: headerSizes,
+        clip: {
+            options: headerClips,
             control: {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
+        width: {
             control: {
-                type: 'select',
+                type: 'text',
+            },
+            if: { arg: 'clip', eq: 'scroll' },
+        },
+        stretch: {
+            table: {
+                disable: true,
+            },
+        },
+        contentLeft: {
+            table: {
+                disable: true,
             },
         },
         contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
+            table: {
+                disable: true,
             },
         },
-        clip: {
+        hasDivider: {
             table: {
                 disable: true,
             },
         },
+        size: {
+            options: headerSizes,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryHeaderScroll {...args} />;
+            default:
+                return <StoryHeaderDefault {...args} />;
+        }
     },
-    render: (args) => <StoryHeaderTabs {...args} />,
 };

package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js

@@ -20,8 +20,8 @@ export var config = {
       h5: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":3rem;", ":0rem;", ":1.75rem;", ":0.625rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
       h4: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":3.25rem;", ":0rem;", ":2rem;", ":0.625rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
       h3: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":3.875rem;", ":0rem;", ":2.25rem;", ":0.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
-      h2: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":4.5rem;", ":0rem;", ":2.5rem;", ":1rem;", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
-      h1: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":5.75rem;", ":0rem;", ":3.5rem;", ":0.5rem;", ":var(--plasma-typo-h1-font-family);", ":var(--plasma-typo-h1-font-size);", ":var(--plasma-typo-h1-font-style);", ":var(--plasma-typo-h1-font-weight);", ":var(--plasma-typo-h1-letter-spacing);", ":var(--plasma-typo-h1-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight)
+      h2: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":4.5rem;", ":0rem;", ":2.5rem;", ":0.875rem;", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+      h1: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":5.75rem;", ":0rem;", ":3.5rem;", ":1rem;", ":var(--plasma-typo-h1-font-family);", ":var(--plasma-typo-h1-font-size);", ":var(--plasma-typo-h1-font-style);", ":var(--plasma-typo-h1-font-weight);", ":var(--plasma-typo-h1-letter-spacing);", ":var(--plasma-typo-h1-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], tabsTokens.disabledOpacity)

package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js

@@ -7,9 +7,9 @@ export var config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
-      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
-      divider: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius)
+      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(---text-secondary-active);", ":transparent;", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.arrowColorHover, tabsTokens.arrowColorActive, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
+      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(---text-secondary-active);", ":var(--surface-transparent-primary);", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.arrowColorHover, tabsTokens.arrowColorActive, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
+      divider: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(---text-secondary-active);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], tabsTokens.arrowColor, tabsTokens.arrowColorHover, tabsTokens.arrowColorActive, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius)
     },
     size: {
       xs: /*#__PURE__*/css(["", ":0.5rem;", ":fit-content;", ":auto;", ":0rem;", ":0.125rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),

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

@@ -7,7 +7,7 @@ export var config = {
   },
   variations: {
     view: {
-      divider: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerWidth, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius)
+      divider: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(---text-secondary-active);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], tabsTokens.arrowColor, tabsTokens.arrowColorHover, tabsTokens.arrowColorActive, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerWidth, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius)
     },
     size: {
       xs: /*#__PURE__*/css(["", ":0.5rem;", ":fit-content;", ":auto;", ":0rem;", ":0.125rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),

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

@@ -12,6 +12,7 @@ import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
 const clips = ['none', 'scroll', 'showAll'];
+const headerClips = ['none', 'scroll'];
 const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
@@ -20,7 +21,6 @@ type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
     itemQuantity: number;
-    hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
     stretch: boolean;
@@ -30,12 +30,12 @@ type CustomStoryTabsProps = {
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
 
-const getContentLeft = (contentLeftOption: string, size: Size) => {
+const getContentLeft = (contentLeftOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
 };
 
-const getContentRight = (contentRightOption: string, size: Size) => {
+const getContentRight = (contentRightOption: string, size: string) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
@@ -96,7 +96,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -152,7 +152,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -220,7 +220,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     });
 
     return (
-        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -603,31 +603,47 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderTabs = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-    } = props;
+const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="clear"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    value={helperText}
+                    size={size as HeaderSize}
+                >
+                    {`Label${i + 1}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText, width } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
-                    view="divider"
+                    view="clear"
                     selected={i === index}
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
+                    value={helperText}
                     size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
@@ -637,37 +653,60 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<StoryTabsProps> = {
+export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
-        hasDivider: true,
-        itemQuantity: 4,
+        helperText: '',
+        itemQuantity: 6,
+        width: '12rem',
     },
     argTypes: {
-        size: {
-            options: headerSizes,
+        clip: {
+            options: headerClips,
             control: {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
+        width: {
             control: {
-                type: 'select',
+                type: 'text',
+            },
+            if: { arg: 'clip', eq: 'scroll' },
+        },
+        stretch: {
+            table: {
+                disable: true,
+            },
+        },
+        contentLeft: {
+            table: {
+                disable: true,
             },
         },
         contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
+            table: {
+                disable: true,
             },
         },
-        clip: {
+        hasDivider: {
             table: {
                 disable: true,
             },
         },
+        size: {
+            options: headerSizes,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryHeaderScroll {...args} />;
+            default:
+                return <StoryHeaderDefault {...args} />;
+        }
     },
-    render: (args) => <StoryHeaderTabs {...args} />,
 };

package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js

@@ -20,8 +20,8 @@ export var config = {
       h5: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":3rem;", ":0rem;", ":1.75rem;", ":0.625rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
       h4: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":3.25rem;", ":0rem;", ":2rem;", ":0.625rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
       h3: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":3.875rem;", ":0rem;", ":2.25rem;", ":0.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
-      h2: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":4.5rem;", ":0rem;", ":2.5rem;", ":1rem;", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
-      h1: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":5.75rem;", ":0rem;", ":3.5rem;", ":0.5rem;", ":var(--plasma-typo-h1-font-family);", ":var(--plasma-typo-h1-font-size);", ":var(--plasma-typo-h1-font-style);", ":var(--plasma-typo-h1-font-weight);", ":var(--plasma-typo-h1-letter-spacing);", ":var(--plasma-typo-h1-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight)
+      h2: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":4.5rem;", ":0rem;", ":2.5rem;", ":0.875rem;", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+      h1: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":5.75rem;", ":0rem;", ":3.5rem;", ":1rem;", ":var(--plasma-typo-h1-font-family);", ":var(--plasma-typo-h1-font-size);", ":var(--plasma-typo-h1-font-style);", ":var(--plasma-typo-h1-font-weight);", ":var(--plasma-typo-h1-letter-spacing);", ":var(--plasma-typo-h1-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], tabsTokens.disabledOpacity)

package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js

@@ -7,9 +7,9 @@ export var config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
-      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
-      divider: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius)
+      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(---text-secondary-active);", ":transparent;", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.arrowColorHover, tabsTokens.arrowColorActive, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
+      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(---text-secondary-active);", ":var(--surface-transparent-primary);", ":var(--surface-accent);", ":0rem;", ":transparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.arrowColorHover, tabsTokens.arrowColorActive, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
+      divider: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(---text-secondary-active);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], tabsTokens.arrowColor, tabsTokens.arrowColorHover, tabsTokens.arrowColorActive, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius)
     },
     size: {
       xs: /*#__PURE__*/css(["", ":0.5rem;", ":fit-content;", ":auto;", ":0rem;", ":0.125rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),

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

@@ -7,7 +7,7 @@ export var config = {
   },
   variations: {
     view: {
-      divider: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerWidth, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius)
+      divider: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(---text-secondary-active);", ":transparent;", ":var(--surface-accent);", ":0.0625rem;", ":0.0625rem;", ":var(--surface-transparent-tertiary);", ":0.0625rem;"], tabsTokens.arrowColor, tabsTokens.arrowColorHover, tabsTokens.arrowColorActive, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerWidth, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius)
     },
     size: {
       xs: /*#__PURE__*/css(["", ":0.5rem;", ":fit-content;", ":auto;", ":0rem;", ":0.125rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),

package/types/components/Dropdown/ui/DropdownDivider/DropdownDivider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownDivider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownDivider/DropdownDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKhD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE;;GAEG;AACH,eAAO,MAAM,mBAAmB,SAAU,UAAU,cAAc,EAAE,oBAAoB,CAAC;;;;wCAUnF,CAAC;AAEP,eAAO,MAAM,qBAAqB;;;mBAZQ,UAAU,cAAc,EAAE,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;CA6BxF,CAAC"}
+{"version":3,"file":"DropdownDivider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownDivider/DropdownDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAMhD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE;;GAEG;AACH,eAAO,MAAM,mBAAmB,SAAU,UAAU,cAAc,EAAE,oBAAoB,CAAC;;;;wCAUnF,CAAC;AAEP,eAAO,MAAM,qBAAqB;;;mBAZQ,UAAU,cAAc,EAAE,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;CA6BxF,CAAC"}

package/types/components/Dropdown/ui/DropdownFooter/DropdownFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownFooter/DropdownFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKhD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,kBAAkB,SAAU,UAAU,cAAc,EAAE,mBAAmB,CAAC;;;;wCAclF,CAAC;AAEN,eAAO,MAAM,oBAAoB;;;mBAhBQ,UAAU,cAAc,EAAE,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;CAiCtF,CAAC"}
+{"version":3,"file":"DropdownFooter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownFooter/DropdownFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAMhD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,kBAAkB,SAAU,UAAU,cAAc,EAAE,mBAAmB,CAAC;;;;wCAclF,CAAC;AAEN,eAAO,MAAM,oBAAoB;;;mBAhBQ,UAAU,cAAc,EAAE,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;CAiCtF,CAAC"}

package/types/components/Dropdown/ui/DropdownGroup/DropdownGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownGroup/DropdownGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D;;GAEG;AACH,eAAO,MAAM,iBAAiB,SAAU,UAAU,cAAc,EAAE,kBAAkB,CAAC;;;;;;;;wCAehF,CAAC;AAEN,eAAO,MAAM,mBAAmB;;;mBAjBQ,UAAU,cAAc,EAAE,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;CAkCpF,CAAC"}
+{"version":3,"file":"DropdownGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownGroup/DropdownGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAMhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D;;GAEG;AACH,eAAO,MAAM,iBAAiB,SAAU,UAAU,cAAc,EAAE,kBAAkB,CAAC;;;;;;;;wCAehF,CAAC;AAEN,eAAO,MAAM,mBAAmB;;;mBAjBQ,UAAU,cAAc,EAAE,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;CAkCpF,CAAC"}

package/types/components/Dropdown/ui/DropdownHeader/DropdownHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownHeader/DropdownHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKhD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,kBAAkB,SAAU,UAAU,cAAc,EAAE,mBAAmB,CAAC;;;;wCAclF,CAAC;AAEN,eAAO,MAAM,oBAAoB;;;mBAhBQ,UAAU,cAAc,EAAE,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;CAiCtF,CAAC"}
+{"version":3,"file":"DropdownHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownHeader/DropdownHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAMhD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,kBAAkB,SAAU,UAAU,cAAc,EAAE,mBAAmB,CAAC;;;;wCAclF,CAAC;AAEN,eAAO,MAAM,oBAAoB;;;mBAhBQ,UAAU,cAAc,EAAE,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;CAiCtF,CAAC"}

package/types/components/Dropdown/ui/DropdownOld/DropdownOld.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownOld.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownOld/DropdownOld.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAMhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,UAAU,cAAc,EAAE,aAAa,CAAC,iKAgEzE,CAAC;AAEN,eAAO,MAAM,iBAAiB;;;mBAlEQ,UAAU,cAAc,EAAE,aAAa,CAAC;;;;;;;;;;;;;;CAmF7E,CAAC"}
+{"version":3,"file":"DropdownOld.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dropdown/ui/DropdownOld/DropdownOld.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAQhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,UAAU,cAAc,EAAE,aAAa,CAAC,iKAgEzE,CAAC;AAEN,eAAO,MAAM,iBAAiB;;;mBAlEQ,UAAU,cAAc,EAAE,aAAa,CAAC;;;;;;;;;;;;;;CAmF7E,CAAC"}

package/types/components/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAKpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,KAAK,EAAoB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAItE,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,iBAAiB,wBAAwB,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,WAAW,SAAU,UAAU,cAAc,EAAE,YAAY,CAAC,+JA2PpE,CAAC;AAEN,eAAO,MAAM,aAAa;;;mBA7PQ,UAAU,cAAc,EAAE,YAAY,CAAC;;;;;;;;;;CA0QxE,CAAC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAKpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAMrD,OAAO,KAAK,EAAoB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAItE,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,iBAAiB,wBAAwB,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,WAAW,SAAU,UAAU,cAAc,EAAE,YAAY,CAAC,+JA2PpE,CAAC;AAEN,eAAO,MAAM,aAAa;;;mBA7PQ,UAAU,cAAc,EAAE,YAAY,CAAC;;;;;;;;;;CA0QxE,CAAC"}

package/types/components/Tabs/TabItem.types.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import type { AsProps } from '../../types';
-declare type RightContent = {
+export declare type RightContent = {
     /**
      * Значение таба
      */
@@ -29,10 +29,6 @@ export interface BaseTabItemProps extends ButtonHTMLAttributes<HTMLButtonElement
      * @default false
      */
     disabled?: boolean;
-    /**
-     * Контент слева
-     */
-    contentLeft?: ReactNode;
     /**
      * Контент справа
      */
@@ -51,13 +47,19 @@ export declare type CustomHorizontalTabItemProps = {
      * Расположение табов
      */
     orientation?: 'horizontal';
+    /**
+     * Контент слева
+     */
+    contentLeft?: ReactNode;
     /**
      * TabItem c округлым border-radius
+     * @deprecated
      * @default false
      */
     pilled?: boolean;
     /**
      * Фон TabItem меняется с анимацией
+     * @deprecated
      * @default true
      */
     animated?: boolean;
@@ -68,18 +70,59 @@ export declare type CustomHorizontalTabItemProps = {
     /**
      * Размер TabItem
      */
-    size?: string;
+    size?: 'xs' | 's' | 'm' | 'l';
     /**
      * Активен ли TabItem
      * @deprecated Используйте свойство `selected`
      */
     isActive?: boolean;
 } & RightContent;
+export declare type CustomHeaderTabItemProps = {
+    /**
+     * Расположение табов
+     */
+    orientation?: 'horizontal';
+    /**
+     * Контент слева
+     */
+    contentLeft?: never;
+    /**
+     * TabItem c округлым border-radius
+     * @deprecated
+     * @default false
+     */
+    pilled?: never;
+    /**
+     * Фон TabItem меняется с анимацией
+     * @deprecated
+     * @default true
+     */
+    animated?: never;
+    /**
+     * Вид TabItem
+     */
+    view?: string;
+    /**
+     * Размер TabItem
+     */
+    size: 'h5' | 'h4' | 'h3' | 'h2' | 'h1';
+    /**
+     * Активен ли TabItem
+     * @deprecated Используйте свойство `selected`
+     */
+    isActive?: never;
+} & Extract<RightContent, {
+    contentRight?: never;
+}>;
 export declare type CustomVerticalTabItemProps = {
     /**
      * Расположение табов
      */
     orientation: 'vertical';
+    /**
+     * Контент слева
+     */
+    contentLeft?: ReactNode;
     /**
      * Вид TabItem
      */
@@ -89,8 +132,7 @@ export declare type CustomVerticalTabItemProps = {
      */
     size?: string;
 } & RightContent;
-export declare type HorizontalTabItemProps = BaseTabItemProps & CustomHorizontalTabItemProps;
+export declare type HorizontalTabItemProps = BaseTabItemProps & (CustomHorizontalTabItemProps | CustomHeaderTabItemProps);
 export declare type VerticalTabItemProps = BaseTabItemProps & CustomVerticalTabItemProps;
 export declare type TabItemProps = HorizontalTabItemProps | VerticalTabItemProps;
-export {};
 //# sourceMappingURL=TabItem.types.d.ts.map

package/types/components/Tabs/TabItem.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,aAAK,YAAY,GACX;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB,GACD;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAER,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO;IACtF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,oBAAY,4BAA4B,GAAG;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,YAAY,CAAC;AAEjB,oBAAY,0BAA0B,GAAG;IACrC;;OAEG;IACH,WAAW,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,YAAY,CAAC;AAEjB,oBAAY,sBAAsB,GAAG,gBAAgB,GAAG,4BAA4B,CAAC;AAErF,oBAAY,oBAAoB,GAAG,gBAAgB,GAAG,0BAA0B,CAAC;AAEjF,oBAAY,YAAY,GAAG,sBAAsB,GAAG,oBAAoB,CAAC"}
+{"version":3,"file":"TabItem.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,oBAAY,YAAY,GAClB;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB,GACD;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAER,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO;IACtF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,oBAAY,4BAA4B,GAAG;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,YAAY,CAAC;AAEjB,oBAAY,wBAAwB,GAAG;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB,GAAG,OAAO,CAAC,YAAY,EAAE;IAAE,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AAEpD,oBAAY,0BAA0B,GAAG;IACrC;;OAEG;IACH,WAAW,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,YAAY,CAAC;AAEjB,oBAAY,sBAAsB,GAAG,gBAAgB,GAAG,CAAC,4BAA4B,GAAG,wBAAwB,CAAC,CAAC;AAElH,oBAAY,oBAAoB,GAAG,gBAAgB,GAAG,0BAA0B,CAAC;AAEjF,oBAAY,YAAY,GAAG,sBAAsB,GAAG,oBAAoB,CAAC"}