@salutejs/sdds-insol-next 0.359.0 → 0.359.1-dev.0

package/dist/styled-components/cjs/components/Tabs/horizontal/HorizontalTabItem.segment.config.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_insol_next = require("@salutejs/sdds-themes/tokens/sdds_insol_next");
+const roundedRadius = '1000px';
+const config = {
+    defaults: {
+        view: 'secondary',
+        size: 'l'
+    },
+    variations: {
+        view: {
+            secondary: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemColor}: ${_sdds_insol_next.textPrimary};
+                ${_styledcomponents.tabsTokens.itemValueColor}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.tabsTokens.itemBackgroundColor}: transparent;
+                ${_styledcomponents.tabsTokens.itemColorHover}: ${_sdds_insol_next.textPrimaryHover};
+                ${_styledcomponents.tabsTokens.itemValueColorHover}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.tabsTokens.itemColorActive}: ${_sdds_insol_next.textSecondaryActive};
+                ${_styledcomponents.tabsTokens.itemValueColorActive}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.tabsTokens.itemBackgroundColorHover}: transparent;
+                ${_styledcomponents.tabsTokens.itemSelectedColor}: ${_sdds_insol_next.textAccent};
+                ${_styledcomponents.tabsTokens.itemSelectedValueColor}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.tabsTokens.itemSelectedBackgroundColor}: ${_sdds_insol_next.surfaceSolidCard};
+                ${_styledcomponents.tabsTokens.itemSelectedColorHover}: ${_sdds_insol_next.textAccentHover};
+                ${_styledcomponents.tabsTokens.itemSelectedValueColorHover}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.tabsTokens.itemSelectedBackgroundColorHover}: ${_sdds_insol_next.surfaceSolidCard};
+                ${_styledcomponents.tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out;
+
+                ${_styledcomponents.tabsTokens.outlineFocusColor}: ${_sdds_insol_next.surfaceAccent};
+                ${_styledcomponents.tabsTokens.itemOutlineRadius}: var(${_styledcomponents.tabsTokens.itemBorderRadius});
+
+                ${_styledcomponents.tabsTokens.itemSelectedDividerHeight}: 0rem;
+                ${_styledcomponents.tabsTokens.itemSelectedDividerColor}: transparent;
+                ${_styledcomponents.tabsTokens.itemSelectedDividerColorHover}: transparent;
+
+                ${_styledcomponents.tabsTokens.itemCursor}: pointer;
+            `
+        },
+        size: {
+            xs: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemBorderRadius}: 0.5rem;
+                ${_styledcomponents.tabsTokens.itemWidth}: auto;
+                ${_styledcomponents.tabsTokens.itemHeight}: 2.25rem;
+                ${_styledcomponents.tabsTokens.itemPadding}: 0.5rem 0.75rem;
+                ${_styledcomponents.tabsTokens.itemPaddingPilled}: 0.5rem 0.625rem;
+                ${_styledcomponents.tabsTokens.itemMarginLeft}: 0;
+                ${_styledcomponents.tabsTokens.itemContentGap}: 0.25rem;
+                ${_styledcomponents.tabsTokens.itemContentPadding}: 0.125rem;
+
+                ${_styledcomponents.tabsTokens.fontFamily}: ${_sdds_insol_next.bodyXS.fontFamily};
+                ${_styledcomponents.tabsTokens.fontSize}: ${_sdds_insol_next.bodyXS.fontSize};
+                ${_styledcomponents.tabsTokens.fontStyle}: ${_sdds_insol_next.bodyXS.fontStyle};
+                ${_styledcomponents.tabsTokens.fontWeight}: ${_sdds_insol_next.bodyXS.fontWeight};
+                ${_styledcomponents.tabsTokens.fontWeightSelected}: ${_sdds_insol_next.bodyXSBold.fontWeight};
+                ${_styledcomponents.tabsTokens.letterSpacing}: ${_sdds_insol_next.bodyXS.letterSpacing};
+                ${_styledcomponents.tabsTokens.lineHeight}: ${_sdds_insol_next.bodyXS.lineHeight};
+
+                ${_styledcomponents.tabsTokens.actionContentMarginLeft}: 0;
+            `,
+            s: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemBorderRadius}: 0.625rem;
+                ${_styledcomponents.tabsTokens.itemWidth}: auto;
+                ${_styledcomponents.tabsTokens.itemHeight}: 2.5rem;
+                ${_styledcomponents.tabsTokens.itemPadding}: 0.75rem 1rem;
+                ${_styledcomponents.tabsTokens.itemPaddingPilled}: 0.75rem 0.75rem;
+                ${_styledcomponents.tabsTokens.itemMarginLeft}: 0;
+                ${_styledcomponents.tabsTokens.itemContentGap}: 0.25rem;
+                ${_styledcomponents.tabsTokens.itemContentPadding}: 0.125rem;
+
+                ${_styledcomponents.tabsTokens.fontFamily}: ${_sdds_insol_next.bodyS.fontFamily};
+                ${_styledcomponents.tabsTokens.fontSize}: ${_sdds_insol_next.bodyS.fontSize};
+                ${_styledcomponents.tabsTokens.fontStyle}: ${_sdds_insol_next.bodyS.fontStyle};
+                ${_styledcomponents.tabsTokens.fontWeight}: ${_sdds_insol_next.bodyS.fontWeight};
+                ${_styledcomponents.tabsTokens.fontWeightSelected}: ${_sdds_insol_next.bodySBold.fontWeight};
+                ${_styledcomponents.tabsTokens.letterSpacing}: ${_sdds_insol_next.bodyS.letterSpacing};
+                ${_styledcomponents.tabsTokens.lineHeight}: ${_sdds_insol_next.bodyS.lineHeight};
+
+                ${_styledcomponents.tabsTokens.actionContentMarginLeft}: 0.125rem;
+            `,
+            m: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemBorderRadius}: 0.75rem;
+                ${_styledcomponents.tabsTokens.itemWidth}: auto;
+                ${_styledcomponents.tabsTokens.itemHeight}: 3rem;
+                ${_styledcomponents.tabsTokens.itemPadding}: 0.875rem 1.25rem;
+                ${_styledcomponents.tabsTokens.itemPaddingPilled}: 0.875rem 1rem;
+                ${_styledcomponents.tabsTokens.itemMarginLeft}: 0;
+                ${_styledcomponents.tabsTokens.itemContentGap}: 0.375rem;
+                ${_styledcomponents.tabsTokens.itemContentPadding}: 0.125rem;
+
+                ${_styledcomponents.tabsTokens.fontFamily}: ${_sdds_insol_next.bodyM.fontFamily};
+                ${_styledcomponents.tabsTokens.fontSize}: ${_sdds_insol_next.bodyM.fontSize};
+                ${_styledcomponents.tabsTokens.fontStyle}: ${_sdds_insol_next.bodyM.fontStyle};
+                ${_styledcomponents.tabsTokens.fontWeight}: ${_sdds_insol_next.bodyM.fontWeight};
+                ${_styledcomponents.tabsTokens.fontWeightSelected}: ${_sdds_insol_next.bodyMBold.fontWeight};
+                ${_styledcomponents.tabsTokens.letterSpacing}: ${_sdds_insol_next.bodyM.letterSpacing};
+                ${_styledcomponents.tabsTokens.lineHeight}: ${_sdds_insol_next.bodyM.lineHeight};
+
+                ${_styledcomponents.tabsTokens.actionContentMarginLeft}: 0.25rem;
+            `,
+            l: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemBorderRadius}: 0.875rem;
+                ${_styledcomponents.tabsTokens.itemWidth}: auto;
+                ${_styledcomponents.tabsTokens.itemHeight}: 3.5rem;
+                ${_styledcomponents.tabsTokens.itemPadding}: 1rem 1.5rem;
+                ${_styledcomponents.tabsTokens.itemPaddingPilled}: 1rem 1.25rem;
+                ${_styledcomponents.tabsTokens.itemMarginLeft}: 0;
+                ${_styledcomponents.tabsTokens.itemContentGap}: 0.5rem;
+                ${_styledcomponents.tabsTokens.itemContentPadding}: 0.125rem;
+
+                ${_styledcomponents.tabsTokens.fontFamily}: ${_sdds_insol_next.bodyL.fontFamily};
+                ${_styledcomponents.tabsTokens.fontSize}: ${_sdds_insol_next.bodyL.fontSize};
+                ${_styledcomponents.tabsTokens.fontStyle}: ${_sdds_insol_next.bodyL.fontStyle};
+                ${_styledcomponents.tabsTokens.fontWeight}: ${_sdds_insol_next.bodyL.fontWeight};
+                ${_styledcomponents.tabsTokens.fontWeightSelected}: ${_sdds_insol_next.bodyLBold.fontWeight};
+                ${_styledcomponents.tabsTokens.letterSpacing}: ${_sdds_insol_next.bodyL.letterSpacing};
+                ${_styledcomponents.tabsTokens.lineHeight}: ${_sdds_insol_next.bodyL.lineHeight};
+
+                ${_styledcomponents.tabsTokens.actionContentMarginLeft}: 0.125rem;
+            `,
+            xl: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemBorderRadius}: 1rem;
+                ${_styledcomponents.tabsTokens.itemWidth}: auto;
+                ${_styledcomponents.tabsTokens.itemHeight}: 4rem;
+                ${_styledcomponents.tabsTokens.itemPadding}: 1.25rem 1.75rem;
+                ${_styledcomponents.tabsTokens.itemPaddingPilled}: 1.25rem 1.5rem;
+                ${_styledcomponents.tabsTokens.itemMarginLeft}: 0;
+                ${_styledcomponents.tabsTokens.itemContentGap}: 0.5rem;
+                ${_styledcomponents.tabsTokens.itemContentPadding}: 0.125rem;
+
+                ${_styledcomponents.tabsTokens.fontFamily}: ${_sdds_insol_next.bodyL.fontFamily};
+                ${_styledcomponents.tabsTokens.fontSize}: ${_sdds_insol_next.bodyL.fontSize};
+                ${_styledcomponents.tabsTokens.fontStyle}: ${_sdds_insol_next.bodyL.fontStyle};
+                ${_styledcomponents.tabsTokens.fontWeight}: ${_sdds_insol_next.bodyL.fontWeight};
+                ${_styledcomponents.tabsTokens.fontWeightSelected}: ${_sdds_insol_next.bodyLBold.fontWeight};
+                ${_styledcomponents.tabsTokens.letterSpacing}: ${_sdds_insol_next.bodyL.letterSpacing};
+                ${_styledcomponents.tabsTokens.lineHeight}: ${_sdds_insol_next.bodyL.lineHeight};
+
+                ${_styledcomponents.tabsTokens.actionContentMarginLeft}: 0.125rem;
+            `
+        },
+        disabled: {
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.disabledOpacity}: 0.4;
+            `
+        },
+        truncate: {
+            true: (0, _styledcomponents.css)``
+        },
+        pilled: {
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemPilledBorderRadius}: ${roundedRadius};
+                ${_styledcomponents.tabsTokens.itemOutlineRadius}: var(${_styledcomponents.tabsTokens.itemPilledBorderRadius});
+            `
+        }
+    }
+};

package/dist/styled-components/cjs/components/Tabs/horizontal/HorizontalTabs.segment.config.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_insol_next = require("@salutejs/sdds-themes/tokens/sdds_insol_next");
+const roundedRadius = '1000px';
+const config = {
+    defaults: {
+        view: 'filled',
+        size: 'l'
+    },
+    variations: {
+        view: {
+            filled: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.arrowColor}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.tabsTokens.arrowColorHover}: ${_sdds_insol_next.textSecondaryHover};
+                ${_styledcomponents.tabsTokens.arrowColorActive}: ${_sdds_insol_next.textSecondaryActive};
+                ${_styledcomponents.tabsTokens.tabsBackgroundColor}: ${_sdds_insol_next.surfaceSolidSecondary};
+                ${_styledcomponents.tabsTokens.outlineFocusColor}: ${_sdds_insol_next.surfaceAccent};
+                ${_styledcomponents.tabsTokens.tabsPadding}: 0.125rem;
+
+                ${_styledcomponents.tabsTokens.tabsDividerHeight}: 0rem;
+                ${_styledcomponents.tabsTokens.tabsDividerColor}: transparent;
+                ${_styledcomponents.tabsTokens.tabsDividerBorderRadius}: 0rem;
+            `
+        },
+        size: {
+            xs: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.tabsBorderRadius}: 0.625rem;
+                ${_styledcomponents.tabsTokens.tabsWidth}: fit-content;
+                ${_styledcomponents.tabsTokens.tabsHeight}: auto;
+                ${_styledcomponents.tabsTokens.arrowInnerPadding}: 0.125rem;
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.125rem;
+                ${_styledcomponents.tabsTokens.arrowSize}: 1rem;
+            `,
+            s: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.tabsBorderRadius}: 0.75rem;
+                ${_styledcomponents.tabsTokens.tabsWidth}: fit-content;
+                ${_styledcomponents.tabsTokens.tabsHeight}: auto;
+                ${_styledcomponents.tabsTokens.arrowInnerPadding}: 0.125rem;
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.25rem;
+            `,
+            m: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.tabsBorderRadius}: 0.875rem;
+                ${_styledcomponents.tabsTokens.tabsWidth}: fit-content;
+                ${_styledcomponents.tabsTokens.tabsHeight}: auto;
+                ${_styledcomponents.tabsTokens.arrowInnerPadding}: 0.125rem;
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.375rem;
+            `,
+            l: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.tabsBorderRadius}: 1rem;
+                ${_styledcomponents.tabsTokens.tabsWidth}: fit-content;
+                ${_styledcomponents.tabsTokens.tabsHeight}: auto;
+                ${_styledcomponents.tabsTokens.arrowInnerPadding}: 0.125rem;
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.375rem;
+            `,
+            xl: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.tabsBorderRadius}: 1.125rem;
+                ${_styledcomponents.tabsTokens.tabsWidth}: fit-content;
+                ${_styledcomponents.tabsTokens.tabsHeight}: auto;
+                ${_styledcomponents.tabsTokens.arrowInnerPadding}: 0;
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.375rem;
+            `
+        },
+        stretch: {
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.containerWidth}: 100%;
+            `
+        },
+        disabled: {
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.disabledOpacity}: 0.4;
+            `
+        },
+        pilled: {
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.tabsPilledBorderRadius}: ${roundedRadius};
+            `
+        }
+    },
+    intersections: [
+        {
+            size: 'xs',
+            pilled: false,
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0;
+                ${_styledcomponents.tabsTokens.arrowBorderRadius}: 0.5rem;
+            `
+        },
+        {
+            size: 's',
+            pilled: false,
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.125rem;
+                ${_styledcomponents.tabsTokens.arrowBorderRadius}: 0.625rem;
+            `
+        },
+        {
+            size: 'm',
+            pilled: false,
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.25rem;
+                ${_styledcomponents.tabsTokens.arrowBorderRadius}: 0.75rem;
+            `
+        },
+        {
+            size: 'l',
+            pilled: false,
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.25rem;
+                ${_styledcomponents.tabsTokens.arrowBorderRadius}: 0.875rem;
+            `
+        },
+        {
+            size: 'xl',
+            pilled: false,
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.25rem;
+                ${_styledcomponents.tabsTokens.arrowBorderRadius}: 0.875rem;
+            `
+        }
+    ]
+};

package/dist/styled-components/cjs/components/Tabs/vertical/VerticalTabItem.config.js

@@ -136,6 +136,11 @@ const config = {
         },
         truncate: {
             true: (0, _styledcomponents.css)``
+        },
+        pilled: {
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemPilledBorderRadius}: 1.5rem;
+            `
         }
     }
 };

package/dist/styled-components/cjs/components/Tabs/vertical/VerticalTabItem.segment.config.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_insol_next = require("@salutejs/sdds-themes/tokens/sdds_insol_next");
+const roundedRadius = '1000px';
+const config = {
+    defaults: {
+        view: 'secondary',
+        size: 'l'
+    },
+    variations: {
+        view: {
+            secondary: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemColor}: ${_sdds_insol_next.textPrimary};
+                ${_styledcomponents.tabsTokens.itemValueColor}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.tabsTokens.itemBackgroundColor}: transparent;
+                ${_styledcomponents.tabsTokens.itemColorHover}: ${_sdds_insol_next.textPrimaryHover};
+                ${_styledcomponents.tabsTokens.itemValueColorHover}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.tabsTokens.itemColorActive}: ${_sdds_insol_next.textSecondaryActive};
+                ${_styledcomponents.tabsTokens.itemValueColorActive}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.tabsTokens.itemBackgroundColorHover}: transparent;
+                ${_styledcomponents.tabsTokens.itemSelectedColor}: ${_sdds_insol_next.textAccent};
+                ${_styledcomponents.tabsTokens.itemSelectedValueColor}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.tabsTokens.itemSelectedBackgroundColor}: ${_sdds_insol_next.surfaceSolidCard};
+                ${_styledcomponents.tabsTokens.itemSelectedColorHover}: ${_sdds_insol_next.textAccentHover};
+                ${_styledcomponents.tabsTokens.itemSelectedValueColorHover}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.tabsTokens.itemSelectedBackgroundColorHover}: ${_sdds_insol_next.surfaceSolidCard};
+                ${_styledcomponents.tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out;
+
+                ${_styledcomponents.tabsTokens.outlineFocusColor}: ${_sdds_insol_next.surfaceAccent};
+                ${_styledcomponents.tabsTokens.itemOutlineRadius}: var(${_styledcomponents.tabsTokens.itemBorderRadius});
+
+                ${_styledcomponents.tabsTokens.itemSelectedDividerWidth}: 0rem;
+                ${_styledcomponents.tabsTokens.itemSelectedDividerHeight}: 0rem;
+                ${_styledcomponents.tabsTokens.itemSelectedDividerColor}: transparent;
+                ${_styledcomponents.tabsTokens.itemSelectedDividerColorHover}: transparent;
+
+                ${_styledcomponents.tabsTokens.itemCursor}: pointer;
+            `
+        },
+        size: {
+            xs: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemBorderRadius}: 0.5rem;
+                ${_styledcomponents.tabsTokens.itemWidth}: auto;
+                ${_styledcomponents.tabsTokens.itemHeight}: 2rem;
+                ${_styledcomponents.tabsTokens.itemPaddingOrientationVertical}: 0.5rem 0.75rem;
+                ${_styledcomponents.tabsTokens.itemPaddingPilled}: 0.5rem 0.625rem;
+                ${_styledcomponents.tabsTokens.itemContentGap}: 0.25rem;
+                ${_styledcomponents.tabsTokens.itemContentPadding}: 0.125rem;
+
+                ${_styledcomponents.tabsTokens.fontFamily}: ${_sdds_insol_next.bodyXS.fontFamily};
+                ${_styledcomponents.tabsTokens.fontSize}: ${_sdds_insol_next.bodyXS.fontSize};
+                ${_styledcomponents.tabsTokens.fontStyle}: ${_sdds_insol_next.bodyXS.fontStyle};
+                ${_styledcomponents.tabsTokens.fontWeight}: ${_sdds_insol_next.bodyXS.fontWeight};
+                ${_styledcomponents.tabsTokens.fontWeightSelected}: ${_sdds_insol_next.bodyXSBold.fontWeight};
+                ${_styledcomponents.tabsTokens.letterSpacing}: ${_sdds_insol_next.bodyXS.letterSpacing};
+                ${_styledcomponents.tabsTokens.lineHeight}: ${_sdds_insol_next.bodyXS.lineHeight};
+
+                ${_styledcomponents.tabsTokens.actionContentMarginLeft}: 0;
+            `,
+            s: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemBorderRadius}: 0.625rem;
+                ${_styledcomponents.tabsTokens.itemWidth}: auto;
+                ${_styledcomponents.tabsTokens.itemHeight}: 2.5rem;
+                ${_styledcomponents.tabsTokens.itemPaddingOrientationVertical}: 0.75rem 1rem;
+                ${_styledcomponents.tabsTokens.itemPaddingPilled}: 0.75rem 0.75rem;
+                ${_styledcomponents.tabsTokens.itemContentGap}: 0.25rem;
+                ${_styledcomponents.tabsTokens.itemContentPadding}: 0.125rem;
+
+                ${_styledcomponents.tabsTokens.fontFamily}: ${_sdds_insol_next.bodyS.fontFamily};
+                ${_styledcomponents.tabsTokens.fontSize}: ${_sdds_insol_next.bodyS.fontSize};
+                ${_styledcomponents.tabsTokens.fontStyle}: ${_sdds_insol_next.bodyS.fontStyle};
+                ${_styledcomponents.tabsTokens.fontWeight}: ${_sdds_insol_next.bodyS.fontWeight};
+                ${_styledcomponents.tabsTokens.fontWeightSelected}: ${_sdds_insol_next.bodySBold.fontWeight};
+                ${_styledcomponents.tabsTokens.letterSpacing}: ${_sdds_insol_next.bodyS.letterSpacing};
+                ${_styledcomponents.tabsTokens.lineHeight}: ${_sdds_insol_next.bodyS.lineHeight};
+
+                ${_styledcomponents.tabsTokens.actionContentMarginLeft}: 0.25rem;
+            `,
+            m: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemBorderRadius}: 0.75rem;
+                ${_styledcomponents.tabsTokens.itemWidth}: auto;
+                ${_styledcomponents.tabsTokens.itemHeight}: 3rem;
+                ${_styledcomponents.tabsTokens.itemPaddingOrientationVertical}: 0.875rem 1.25rem;
+                ${_styledcomponents.tabsTokens.itemPaddingPilled}: 0.875rem 1rem;
+                ${_styledcomponents.tabsTokens.itemContentGap}: 0.375rem;
+                ${_styledcomponents.tabsTokens.itemContentPadding}: 0.125rem;
+
+                ${_styledcomponents.tabsTokens.fontFamily}: ${_sdds_insol_next.bodyM.fontFamily};
+                ${_styledcomponents.tabsTokens.fontSize}: ${_sdds_insol_next.bodyM.fontSize};
+                ${_styledcomponents.tabsTokens.fontStyle}: ${_sdds_insol_next.bodyM.fontStyle};
+                ${_styledcomponents.tabsTokens.fontWeight}: ${_sdds_insol_next.bodyM.fontWeight};
+                ${_styledcomponents.tabsTokens.fontWeightSelected}: ${_sdds_insol_next.bodyMBold.fontWeight};
+                ${_styledcomponents.tabsTokens.letterSpacing}: ${_sdds_insol_next.bodyM.letterSpacing};
+                ${_styledcomponents.tabsTokens.lineHeight}: ${_sdds_insol_next.bodyM.lineHeight};
+
+                ${_styledcomponents.tabsTokens.actionContentMarginLeft}: 0.125rem;
+            `,
+            l: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemBorderRadius}: 0.875rem;
+                ${_styledcomponents.tabsTokens.itemWidth}: auto;
+                ${_styledcomponents.tabsTokens.itemHeight}: 3.5rem;
+                ${_styledcomponents.tabsTokens.itemPaddingOrientationVertical}: 1rem 1.5rem;
+                ${_styledcomponents.tabsTokens.itemPaddingPilled}: 1rem 1.25rem;
+                ${_styledcomponents.tabsTokens.itemContentGap}: 0.5rem;
+                ${_styledcomponents.tabsTokens.itemContentPadding}: 0.125rem;
+
+                ${_styledcomponents.tabsTokens.fontFamily}: ${_sdds_insol_next.bodyL.fontFamily};
+                ${_styledcomponents.tabsTokens.fontSize}: ${_sdds_insol_next.bodyL.fontSize};
+                ${_styledcomponents.tabsTokens.fontStyle}: ${_sdds_insol_next.bodyL.fontStyle};
+                ${_styledcomponents.tabsTokens.fontWeight}: ${_sdds_insol_next.bodyL.fontWeight};
+                ${_styledcomponents.tabsTokens.fontWeightSelected}: ${_sdds_insol_next.bodyLBold.fontWeight};
+                ${_styledcomponents.tabsTokens.letterSpacing}: ${_sdds_insol_next.bodyL.letterSpacing};
+                ${_styledcomponents.tabsTokens.lineHeight}: ${_sdds_insol_next.bodyL.lineHeight};
+
+                ${_styledcomponents.tabsTokens.actionContentMarginLeft}: 0.125rem;
+            `,
+            xl: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemBorderRadius}: 1rem;
+                ${_styledcomponents.tabsTokens.itemWidth}: auto;
+                ${_styledcomponents.tabsTokens.itemHeight}: 4rem;
+                ${_styledcomponents.tabsTokens.itemPaddingOrientationVertical}: 1.25rem 1.75rem;
+                ${_styledcomponents.tabsTokens.itemPaddingPilled}: 1.25rem 1.5rem;
+                ${_styledcomponents.tabsTokens.itemContentGap}: 0.5rem;
+                ${_styledcomponents.tabsTokens.itemContentPadding}: 0.125rem;
+
+                ${_styledcomponents.tabsTokens.fontFamily}: ${_sdds_insol_next.bodyL.fontFamily};
+                ${_styledcomponents.tabsTokens.fontSize}: ${_sdds_insol_next.bodyL.fontSize};
+                ${_styledcomponents.tabsTokens.fontStyle}: ${_sdds_insol_next.bodyL.fontStyle};
+                ${_styledcomponents.tabsTokens.fontWeight}: ${_sdds_insol_next.bodyL.fontWeight};
+                ${_styledcomponents.tabsTokens.fontWeightSelected}: ${_sdds_insol_next.bodyLBold.fontWeight};
+                ${_styledcomponents.tabsTokens.letterSpacing}: ${_sdds_insol_next.bodyL.letterSpacing};
+                ${_styledcomponents.tabsTokens.lineHeight}: ${_sdds_insol_next.bodyL.lineHeight};
+
+                ${_styledcomponents.tabsTokens.actionContentMarginLeft}: 0.125rem;
+            `
+        },
+        disabled: {
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.disabledOpacity}: 0.4;
+            `
+        },
+        truncate: {
+            true: (0, _styledcomponents.css)``
+        },
+        pilled: {
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.itemPilledBorderRadius}: ${roundedRadius};
+                ${_styledcomponents.tabsTokens.itemOutlineRadius}: var(${_styledcomponents.tabsTokens.itemPilledBorderRadius});
+            `
+        }
+    }
+};

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

@@ -69,6 +69,11 @@ const config = {
             true: (0, _styledcomponents.css)`
                 ${_styledcomponents.tabsTokens.disabledOpacity}: 0.4;
             `
+        },
+        pilled: {
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.tabsPilledBorderRadius}: 1.625rem;
+            `
         }
     }
 };

package/dist/styled-components/cjs/components/Tabs/vertical/VerticalTabs.segment.config.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_insol_next = require("@salutejs/sdds-themes/tokens/sdds_insol_next");
+const config = {
+    defaults: {
+        view: 'filled',
+        size: 'l'
+    },
+    variations: {
+        view: {
+            filled: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.arrowColor}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.tabsTokens.arrowColorHover}: ${_sdds_insol_next.textSecondaryHover};
+                ${_styledcomponents.tabsTokens.arrowColorActive}: ${_sdds_insol_next.textSecondaryActive};
+                ${_styledcomponents.tabsTokens.tabsBackgroundColor}: ${_sdds_insol_next.surfaceSolidSecondary};
+                ${_styledcomponents.tabsTokens.outlineFocusColor}: ${_sdds_insol_next.surfaceAccent};
+                ${_styledcomponents.tabsTokens.tabsPadding}: 0.125rem;
+
+                ${_styledcomponents.tabsTokens.tabsDividerWidth}: 0rem;
+                ${_styledcomponents.tabsTokens.tabsDividerHeight}: 0rem;
+                ${_styledcomponents.tabsTokens.tabsDividerColor}: transparent;
+                ${_styledcomponents.tabsTokens.tabsDividerBorderRadius}: 0rem;
+            `
+        },
+        size: {
+            xs: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.tabsBorderRadius}: 0.625rem;
+                ${_styledcomponents.tabsTokens.tabsPilledBorderRadius}: 1.125rem;
+                ${_styledcomponents.tabsTokens.tabsWidth}: fit-content;
+                ${_styledcomponents.tabsTokens.tabsHeight}: auto;
+                ${_styledcomponents.tabsTokens.arrowInnerPadding}: 0.125rem;
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.125rem;
+                ${_styledcomponents.tabsTokens.arrowSize}: 1rem;
+            `,
+            s: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.tabsBorderRadius}: 0.75rem;
+                ${_styledcomponents.tabsTokens.tabsPilledBorderRadius}: 1.375rem;
+                ${_styledcomponents.tabsTokens.tabsWidth}: fit-content;
+                ${_styledcomponents.tabsTokens.tabsHeight}: auto;
+                ${_styledcomponents.tabsTokens.arrowInnerPadding}: 0.125rem;
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.375rem;
+            `,
+            m: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.tabsBorderRadius}: 0.875rem;
+                ${_styledcomponents.tabsTokens.tabsPilledBorderRadius}: 1.625rem;
+                ${_styledcomponents.tabsTokens.tabsWidth}: fit-content;
+                ${_styledcomponents.tabsTokens.tabsHeight}: auto;
+                ${_styledcomponents.tabsTokens.arrowInnerPadding}: 0.125rem;
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.75rem;
+            `,
+            l: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.tabsBorderRadius}: 1rem;
+                ${_styledcomponents.tabsTokens.tabsPilledBorderRadius}: 1.875rem;
+                ${_styledcomponents.tabsTokens.tabsWidth}: fit-content;
+                ${_styledcomponents.tabsTokens.tabsHeight}: auto;
+                ${_styledcomponents.tabsTokens.arrowInnerPadding}: 0.125rem;
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.875rem;
+            `,
+            xl: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.tabsBorderRadius}: 1.125rem;
+                ${_styledcomponents.tabsTokens.tabsPilledBorderRadius}: 1.875rem;
+                ${_styledcomponents.tabsTokens.tabsWidth}: fit-content;
+                ${_styledcomponents.tabsTokens.tabsHeight}: auto;
+                ${_styledcomponents.tabsTokens.arrowInnerPadding}: 0.125rem;
+                ${_styledcomponents.tabsTokens.arrowOuterPadding}: 0.875rem;
+            `
+        },
+        stretch: {
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.containerHeight}: 100%;
+            `
+        },
+        disabled: {
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.disabledOpacity}: 0.4;
+            `
+        },
+        pilled: {
+            true: (0, _styledcomponents.css)``
+        }
+    },
+    intersections: [
+        {
+            size: 'xs',
+            pilled: false,
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.arrowBorderRadius}: 0.5rem;
+            `
+        },
+        {
+            size: 's',
+            pilled: false,
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.arrowBorderRadius}: 0.625rem;
+            `
+        },
+        {
+            size: 'm',
+            pilled: false,
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.arrowBorderRadius}: 0.75rem;
+            `
+        },
+        {
+            size: 'l',
+            pilled: false,
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.arrowBorderRadius}: 0.75rem;
+            `
+        },
+        {
+            size: 'xl',
+            pilled: false,
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.tabsTokens.arrowBorderRadius}: 0.75rem;
+            `
+        }
+    ]
+};