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

package/dist/styled-components/cjs/components/Slider/Slider.config.js

@@ -23,9 +23,9 @@ const config = {
 
                 ${_styledcomponents.sliderTokens.rangeValueColor}: ${_sdds_insol_next.textSecondary};
 
-                ${_styledcomponents.sliderTokens.thumbBorderColor}: ${_sdds_insol_next.surfaceSolidTertiary};
-                ${_styledcomponents.sliderTokens.thumbBackgroundColor}: ${_sdds_insol_next.onLightSurfaceSolidCard};
-                ${_styledcomponents.sliderTokens.thumbFocusBorderColor}: ${_sdds_insol_next.surfaceSolidDefault};
+                ${_styledcomponents.sliderTokens.thumbBorderColor}: ${_sdds_insol_next.surfaceSolidCard};
+                ${_styledcomponents.sliderTokens.thumbBackgroundColor}: ${_sdds_insol_next.surfaceAccent};
+                ${_styledcomponents.sliderTokens.thumbFocusBorderColor}: ${_sdds_insol_next.surfaceSolidCard};
 
                 ${_styledcomponents.sliderTokens.railBackgroundColor}: ${_sdds_insol_next.surfaceSolidTertiary};
 
@@ -54,9 +54,9 @@ const config = {
 
                 ${_styledcomponents.sliderTokens.rangeValueColor}: ${_sdds_insol_next.textSecondary};
 
-                ${_styledcomponents.sliderTokens.thumbBorderColor}: ${_sdds_insol_next.surfaceSolidTertiary};
-                ${_styledcomponents.sliderTokens.thumbBackgroundColor}: ${_sdds_insol_next.onLightSurfaceSolidCard};
-                ${_styledcomponents.sliderTokens.thumbFocusBorderColor}: ${_sdds_insol_next.surfaceSolidDefault};
+                ${_styledcomponents.sliderTokens.thumbBorderColor}: ${_sdds_insol_next.surfaceSolidCard};
+                ${_styledcomponents.sliderTokens.thumbBackgroundColor}: ${_sdds_insol_next.surfaceAccent};
+                ${_styledcomponents.sliderTokens.thumbFocusBorderColor}: ${_sdds_insol_next.surfaceSolidCard};
 
                 ${_styledcomponents.sliderTokens.railBackgroundColor}: ${_sdds_insol_next.surfaceSolidTertiary};
 
@@ -85,9 +85,9 @@ const config = {
 
                 ${_styledcomponents.sliderTokens.rangeValueColor}: ${_sdds_insol_next.textSecondary};
 
-                ${_styledcomponents.sliderTokens.thumbBorderColor}: ${_sdds_insol_next.surfaceSolidTertiary};
-                ${_styledcomponents.sliderTokens.thumbBackgroundColor}: ${_sdds_insol_next.onLightSurfaceSolidCard};
-                ${_styledcomponents.sliderTokens.thumbFocusBorderColor}: ${_sdds_insol_next.surfaceAccentGradient};
+                ${_styledcomponents.sliderTokens.thumbBorderColor}: ${_sdds_insol_next.surfaceSolidCard};
+                ${_styledcomponents.sliderTokens.thumbBackgroundColor}: ${_sdds_insol_next.surfaceAccent};
+                ${_styledcomponents.sliderTokens.thumbFocusBorderColor}: ${_sdds_insol_next.surfaceSolidCard};
 
                 ${_styledcomponents.sliderTokens.railBackgroundColor}: ${_sdds_insol_next.surfaceSolidTertiary};
 
@@ -263,17 +263,27 @@ const config = {
         },
         pointerSize: {
             small: (0, _styledcomponents.css)`
-                ${_styledcomponents.sliderTokens.thumbSize}: 1rem;
-                ${_styledcomponents.sliderTokens.thumbBorderStyle}: solid;
-                ${_styledcomponents.sliderTokens.thumbBorderWidth}: 0.0625rem;
+                ${_styledcomponents.sliderTokens.thumbWidth}: 1.5rem;
+                ${_styledcomponents.sliderTokens.thumbHeight}: 1rem;
+                ${_styledcomponents.sliderTokens.thumbBorderWidth}: 0.09375rem 0.1875rem;
+                ${_styledcomponents.sliderTokens.thumbBorderRadius}: 0.6875rem / 0.59375rem;
+                ${_styledcomponents.sliderTokens.thumbInnerContent}: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='3'%3E%3Crect width='12' height='3' rx='1.5' fill='%23FFFFFF'/%3E%3C/svg%3E");
+
+                ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.375rem;
             `,
             large: (0, _styledcomponents.css)`
-                ${_styledcomponents.sliderTokens.thumbSize}: 1.25rem;
-                ${_styledcomponents.sliderTokens.thumbBorderStyle}: solid;
-                ${_styledcomponents.sliderTokens.thumbBorderWidth}: 0.0625rem;
+                ${_styledcomponents.sliderTokens.thumbWidth}: 2rem;
+                ${_styledcomponents.sliderTokens.thumbHeight}: 1.25rem;
+                ${_styledcomponents.sliderTokens.thumbBorderWidth}: 0.125rem 0.25rem;
+                ${_styledcomponents.sliderTokens.thumbBorderRadius}: 0.875rem / 0.75rem;
+                ${_styledcomponents.sliderTokens.thumbInnerContent}: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Crect width='16' height='4' rx='2' fill='%23FFFFFF'/%3E%3C/svg%3E");
+
+                ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.625rem;
             `,
             none: (0, _styledcomponents.css)`
-                ${_styledcomponents.sliderTokens.thumbSize}: 0rem;
+                ${_styledcomponents.sliderTokens.thumbWidth}: 0rem;
+
+                ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.5rem;
             `
         },
         disabled: {
@@ -281,5 +291,97 @@ const config = {
                 ${_styledcomponents.sliderTokens.disabledOpacity}: 0.4;
             `
         }
-    }
+    },
+    intersections: [
+        {
+            size: 's',
+            pointerSize: 'small',
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1rem;
+                &.slider-vertical-orientation {
+                    ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.25rem;
+                }
+            `
+        },
+        {
+            size: 'm',
+            pointerSize: 'small',
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.25rem;
+                &.slider-vertical-orientation {
+                    ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.5rem;
+                }
+            `
+        },
+        {
+            size: 'l',
+            pointerSize: 'small',
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.25rem;
+                &.slider-vertical-orientation {
+                    ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.5rem;
+                }
+            `
+        },
+        {
+            size: 's',
+            pointerSize: 'large',
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.25rem;
+                &.slider-vertical-orientation {
+                    ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.375rem;
+                }
+            `
+        },
+        {
+            size: 'm',
+            pointerSize: 'large',
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.5rem;
+                &.slider-vertical-orientation {
+                    ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.625rem;
+                }
+            `
+        },
+        {
+            size: 'l',
+            pointerSize: 'large',
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.5rem;
+                &.slider-vertical-orientation {
+                    ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.625rem;
+                }
+            `
+        },
+        {
+            size: 's',
+            pointerSize: 'none',
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1rem;
+                &.slider-vertical-orientation {
+                    ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1rem;
+                }
+            `
+        },
+        {
+            size: 'm',
+            pointerSize: 'none',
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.5rem;
+                &.slider-vertical-orientation {
+                    ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.25rem;
+                }
+            `
+        },
+        {
+            size: 'l',
+            pointerSize: 'none',
+            style: (0, _styledcomponents.css)`
+                ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.5rem;
+                &.slider-vertical-orientation {
+                    ${_styledcomponents.sliderTokens.currentValueTopOffset}: 1.25rem;
+                }
+            `
+        }
+    ]
 };

package/dist/styled-components/cjs/components/Tabs/TabItem.js

@@ -22,6 +22,8 @@ const _HorizontalTabItemconfig = require("./horizontal/HorizontalTabItem.config"
 const _HorizontalIconTabItemconfig = require("./horizontal/HorizontalIconTabItem.config");
 const _VerticalTabItemconfig = require("./vertical/VerticalTabItem.config");
 const _VerticalIconTabItemconfig = require("./vertical/VerticalIconTabItem.config");
+const _HorizontalTabItemsegmentconfig = require("./horizontal/HorizontalTabItem.segment.config");
+const _VerticalTabItemsegmentconfig = require("./vertical/VerticalTabItem.segment.config");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -29,13 +31,17 @@ function _interop_require_default(obj) {
 }
 const mergedHorizontalTabItemConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.horizontalTabItemConfig, _HorizontalTabItemconfig.config);
 const HorizontalTabItem = (0, _styledcomponents.component)(mergedHorizontalTabItemConfig);
+const mergedHorizontalTabItemSegmentConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.horizontalTabItemConfig, _HorizontalTabItemsegmentconfig.config);
+const HorizontalTabItemSegment = (0, _styledcomponents.component)(mergedHorizontalTabItemSegmentConfig);
 const mergedHorizontalIconTabItemConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.horizontalIconTabItemConfig, _HorizontalIconTabItemconfig.config);
 const HorizontalIconTabItem = (0, _styledcomponents.component)(mergedHorizontalIconTabItemConfig);
 const mergedVerticalTabItemConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.verticalTabItemConfig, _VerticalTabItemconfig.config);
 const VerticalTabItem = (0, _styledcomponents.component)(mergedVerticalTabItemConfig);
+const mergedVerticalTabItemSegmentConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.verticalTabItemConfig, _VerticalTabItemsegmentconfig.config);
+const VerticalTabItemSegment = (0, _styledcomponents.component)(mergedVerticalTabItemSegmentConfig);
 const mergedVerticalIconTabItemConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.verticalIconTabItemConfig, _VerticalIconTabItemconfig.config);
 const VerticalIconTabItem = (0, _styledcomponents.component)(mergedVerticalIconTabItemConfig);
-const TabItem = (0, _styledcomponents.fixedForwardRef)((props, ref)=>{
+const TabItemDefault = (0, _styledcomponents.fixedForwardRef)((props, ref)=>{
     if (props.orientation === 'vertical') {
         return /*#__PURE__*/ _react.default.createElement(VerticalTabItem, {
             ref: ref,
@@ -47,6 +53,22 @@ const TabItem = (0, _styledcomponents.fixedForwardRef)((props, ref)=>{
         ...props
     });
 });
+const TabItemSegment = (0, _styledcomponents.fixedForwardRef)((props, ref)=>{
+    if (props.orientation === 'vertical') {
+        return /*#__PURE__*/ _react.default.createElement(VerticalTabItemSegment, {
+            ref: ref,
+            ...props
+        });
+    }
+    return /*#__PURE__*/ _react.default.createElement(HorizontalTabItemSegment, {
+        ref: ref,
+        ...props
+    });
+});
+const TabItem = (0, _styledcomponents.createConditionalComponent)({
+    default: TabItemDefault,
+    segment: TabItemSegment
+});
 const IconTabItem = (0, _styledcomponents.fixedForwardRef)((props, ref)=>{
     if (props.orientation === 'vertical') {
         return /*#__PURE__*/ _react.default.createElement(VerticalIconTabItem, {

package/dist/styled-components/cjs/components/Tabs/Tabs.js

@@ -8,22 +8,86 @@ Object.defineProperty(exports, "Tabs", {
         return Tabs;
     }
 });
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
 const _HorizontalTabsconfig = require("./horizontal/HorizontalTabs.config");
 const _VerticalTabsconfig = require("./vertical/VerticalTabs.config");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
+const _HorizontalTabssegmentconfig = require("./horizontal/HorizontalTabs.segment.config");
+const _VerticalTabssegmentconfig = require("./vertical/VerticalTabs.segment.config");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
     };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
 const mergedHorizontalTabsConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.horizontalTabsConfig, _HorizontalTabsconfig.config);
 const mergedVerticalTabsConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.verticalTabsConfig, _VerticalTabsconfig.config);
+const mergedHorizontalTabsSegmentConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.horizontalTabsConfig, _HorizontalTabssegmentconfig.config);
+const mergedVerticalTabsSegmentConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.verticalTabsConfig, _VerticalTabssegmentconfig.config);
 const HorizontalTabs = (0, _styledcomponents.component)(mergedHorizontalTabsConfig);
 const VerticalTabs = (0, _styledcomponents.component)(mergedVerticalTabsConfig);
-const Tabs = (props)=>{
+const HorizontalTabsSegment = (0, _styledcomponents.component)(mergedHorizontalTabsSegmentConfig);
+const VerticalTabsSegment = (0, _styledcomponents.component)(mergedVerticalTabsSegmentConfig);
+const TabsDefault = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     if (props.orientation === 'vertical') {
-        return /*#__PURE__*/ _react.default.createElement(VerticalTabs, props);
+        return /*#__PURE__*/ _react.default.createElement(VerticalTabs, {
+            ref: ref,
+            ...props
+        });
     }
-    return /*#__PURE__*/ _react.default.createElement(HorizontalTabs, props);
-};
+    return /*#__PURE__*/ _react.default.createElement(HorizontalTabs, {
+        ref: ref,
+        ...props
+    });
+});
+const TabsSegment = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    if (props.orientation === 'vertical') {
+        return /*#__PURE__*/ _react.default.createElement(VerticalTabsSegment, {
+            ref: ref,
+            ...props
+        });
+    }
+    return /*#__PURE__*/ _react.default.createElement(HorizontalTabsSegment, {
+        ref: ref,
+        ...props
+    });
+});
+const Tabs = (0, _styledcomponents.createConditionalComponent)({
+    default: TabsDefault,
+    segment: TabsSegment
+});

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;
+            `
         }
     }
 };