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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TextFieldSlider", {
+    enumerable: true,
+    get: function() {
+        return TextFieldSlider;
+    }
+});
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _TextFieldSliderconfig = require("./TextFieldSlider.config");
+const mergedConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.textFieldSliderConfig, _TextFieldSliderconfig.config);
+const TextFieldSlider = (0, _styledcomponents.component)(mergedConfig);

package/dist/styled-components/cjs/components/TextFieldSlider/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get TextFieldSlider () {
+        return _TextFieldSlider.TextFieldSlider;
+    },
+    get textFieldSliderTokens () {
+        return _styledcomponents.textFieldSliderTokens;
+    }
+});
+const _TextFieldSlider = require("./TextFieldSlider");
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");

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

@@ -35,13 +35,25 @@ const config = {
 
                 ${_styledcomponents.timePickerTokens.timePickerShadow}: ${_sdds_insol_next.shadowDownSoftS};
 
+                ${_styledcomponents.timePickerTokens.textFieldBoxShadowSecondary}: 0 0 0 0.25rem #E8EEF2;
+
+                ${_styledcomponents.timePickerTokens.textFieldBorderColor}: ${_sdds_insol_next.outlineTransparentPrimary};
+                ${_styledcomponents.timePickerTokens.textFieldBorderColorFocus}: ${_sdds_insol_next.outlineSolidSecondary};
+                ${_styledcomponents.timePickerTokens.textFieldBorderColorHover}: ${_sdds_insol_next.outlineTransparentPrimaryHover};
+                ${_styledcomponents.timePickerTokens.textFieldBorderColorError}: ${_sdds_insol_next.outlineNegative};
+                ${_styledcomponents.timePickerTokens.textFieldBorderColorErrorFocus}: ${_sdds_insol_next.outlineNegativeActive};
+                ${_styledcomponents.timePickerTokens.textFieldBorderColorErrorHover}: ${_sdds_insol_next.outlineNegativeHover};
+                ${_styledcomponents.timePickerTokens.textFieldBorderColorSuccess}: ${_sdds_insol_next.outlinePositive};
+                ${_styledcomponents.timePickerTokens.textFieldBorderColorSuccessFocus}: ${_sdds_insol_next.outlinePositiveActive};
+                ${_styledcomponents.timePickerTokens.textFieldBorderColorSuccessHover}: ${_sdds_insol_next.outlinePositiveHover};
+
                 ${_styledcomponents.timePickerTokens.textFieldBackgroundColor}: ${_sdds_insol_next.surfaceSolidCard};
                 ${_styledcomponents.timePickerTokens.textFieldBackgroundColorHover}: ${_sdds_insol_next.surfaceSolidCard};
                 ${_styledcomponents.timePickerTokens.textFieldBackgroundColorFocus}: ${_sdds_insol_next.surfaceSolidCard};
-                ${_styledcomponents.timePickerTokens.textFieldBackgroundErrorColor}: ${_sdds_insol_next.surfaceTransparentNegative};
-                ${_styledcomponents.timePickerTokens.textFieldBackgroundErrorColorFocus}: ${_sdds_insol_next.surfaceTransparentNegativeActive};
-                ${_styledcomponents.timePickerTokens.textFieldBackgroundSuccessColor}: ${_sdds_insol_next.surfaceTransparentPositive};
-                ${_styledcomponents.timePickerTokens.textFieldBackgroundSuccessColorFocus}: ${_sdds_insol_next.surfaceTransparentPositiveActive};
+                ${_styledcomponents.timePickerTokens.textFieldBackgroundErrorColor}: ${_sdds_insol_next.surfaceSolidCard};
+                ${_styledcomponents.timePickerTokens.textFieldBackgroundErrorColorFocus}: ${_sdds_insol_next.surfaceSolidCard};
+                ${_styledcomponents.timePickerTokens.textFieldBackgroundSuccessColor}: ${_sdds_insol_next.surfaceSolidCard};
+                ${_styledcomponents.timePickerTokens.textFieldBackgroundSuccessColorFocus}: ${_sdds_insol_next.surfaceSolidCard};
                 ${_styledcomponents.timePickerTokens.textFieldBoxShadow}: 0 0 0 0 transparent;
                 ${_styledcomponents.timePickerTokens.borderColor}: ${_sdds_insol_next.outlineTransparentPrimary};
                 ${_styledcomponents.timePickerTokens.borderColorHover}: ${_sdds_insol_next.outlineTransparentPrimaryHover};

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

@@ -48,6 +48,7 @@ _export_star(require("./components/Tabs"), exports);
 _export_star(require("./components/TextArea"), exports);
 _export_star(require("./components/TextField"), exports);
 _export_star(require("./components/TextFieldGroup"), exports);
+_export_star(require("./components/TextFieldSlider"), exports);
 _export_star(require("./components/Toast"), exports);
 _export_star(require("./components/Toolbar"), exports);
 _export_star(require("./components/Tooltip"), exports);

package/dist/styled-components/es/components/Autocomplete/Autocomplete.config.js

@@ -56,13 +56,13 @@ export const config = {
                 ${tokens.textFieldHintIconColor}: ${textSecondary};
             `,
             positive: css`
-                ${tokens.textFieldColor}: ${textPositive};
-                ${tokens.textFieldClearColor}: ${textPositive};
+                ${tokens.textFieldColor}: ${textPrimary};
+                ${tokens.textFieldClearColor}: ${textPrimary};
 
                 ${tokens.textFieldPlaceholderColor}: ${textSecondary};
                 ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
-                ${tokens.textFieldClearPlaceholderColor}: ${textPositive};
-                ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive};
+                ${tokens.textFieldClearPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary};
 
                 ${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
                 ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};
@@ -103,13 +103,13 @@ export const config = {
                 ${tokens.textFieldHintIconColor}: ${textSecondary};
             `,
             warning: css`
-                ${tokens.textFieldColor}: ${textWarning};
-                ${tokens.textFieldClearColor}: ${textWarning};
+                ${tokens.textFieldColor}: ${textPrimary};
+                ${tokens.textFieldClearColor}: ${textPrimary};
 
                 ${tokens.textFieldPlaceholderColor}: ${textSecondary};
                 ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
-                ${tokens.textFieldClearPlaceholderColor}: ${textWarning};
-                ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning};
+                ${tokens.textFieldClearPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary};
 
                 ${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
                 ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};
@@ -150,13 +150,13 @@ export const config = {
                 ${tokens.textFieldHintIconColor}: ${textSecondary};
             `,
             negative: css`
-                ${tokens.textFieldColor}: ${textNegative};
-                ${tokens.textFieldClearColor}: ${textNegative};
+                ${tokens.textFieldColor}: ${textPrimary};
+                ${tokens.textFieldClearColor}: ${textPrimary};
 
                 ${tokens.textFieldPlaceholderColor}: ${textSecondary};
                 ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
-                ${tokens.textFieldClearPlaceholderColor}: ${textNegative};
-                ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative};
+                ${tokens.textFieldClearPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary};
 
                 ${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
                 ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};

package/dist/styled-components/es/components/Combobox/Combobox.config.js

@@ -75,13 +75,13 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary};
             `,
             positive: css`
-                ${tokens.textFieldColor}: ${textPositive};
-                ${tokens.textFieldClearColor}: ${textPositive};
+                ${tokens.textFieldColor}: ${textPrimary};
+                ${tokens.textFieldClearColor}: ${textPrimary};
 
                 ${tokens.textFieldPlaceholderColor}: ${textSecondary};
                 ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
-                ${tokens.textFieldClearPlaceholderColor}: ${textPositive};
-                ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive};
+                ${tokens.textFieldClearPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary};
 
                 ${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
                 ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};
@@ -137,13 +137,13 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary};
             `,
             warning: css`
-                ${tokens.textFieldColor}: ${textWarning};
-                ${tokens.textFieldClearColor}: ${textWarning};
+                ${tokens.textFieldColor}: ${textPrimary};
+                ${tokens.textFieldClearColor}: ${textPrimary};
 
                 ${tokens.textFieldPlaceholderColor}: ${textSecondary};
                 ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
-                ${tokens.textFieldClearPlaceholderColor}: ${textWarning};
-                ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning};
+                ${tokens.textFieldClearPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary};
 
                 ${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
                 ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};
@@ -199,13 +199,13 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary};
             `,
             negative: css`
-                ${tokens.textFieldColor}: ${textNegative};
-                ${tokens.textFieldClearColor}: ${textNegative};
+                ${tokens.textFieldColor}: ${textPrimary};
+                ${tokens.textFieldClearColor}: ${textPrimary};
 
                 ${tokens.textFieldPlaceholderColor}: ${textSecondary};
                 ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
-                ${tokens.textFieldClearPlaceholderColor}: ${textNegative};
-                ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative};
+                ${tokens.textFieldClearPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary};
 
                 ${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
                 ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};

package/dist/styled-components/es/components/DatePicker/DatePicker.config.js

@@ -1,5 +1,5 @@
 import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components';
-import { bodyL, bodyM, bodyS, bodyXS, bodyXXS, h3, h3Bold, h4, h4Bold, h5, h5Bold, inverseTextPrimary, outlineNegativeMinor, outlineNegativeMinorActive, outlineNegativeMinorHover, outlinePositiveMinor, outlinePositiveMinorActive, outlinePositiveMinorHover, outlineSolidSecondary, outlineTransparentPrimary, outlineTransparentPrimaryHover, shadowDownHardM, shadowDownHardS, shadowDownSoftS, surfaceAccent, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidCardBrightness, surfaceSolidDefault, surfaceSolidSecondary, surfaceTransparentCard, surfaceTransparentPrimary, surfaceTransparentSecondary, textAccent, textNegative, textPositive, textPrimary, textPrimaryActive, textPrimaryHover, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_insol_next';
+import { bodyL, bodyM, bodyS, bodyXS, bodyXXS, h3, h3Bold, h4, h4Bold, h5, h5Bold, inverseTextPrimary, outlineNegative, outlineNegativeActive, outlineNegativeHover, outlinePositive, outlinePositiveActive, outlinePositiveHover, outlineSolidSecondary, outlineTransparentPrimary, outlineTransparentPrimaryHover, shadowDownHardM, shadowDownHardS, shadowDownSoftS, surfaceAccent, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidCardBrightness, surfaceSolidDefault, surfaceSolidSecondary, surfaceTransparentCard, surfaceTransparentPrimary, surfaceTransparentSecondary, textAccent, textNegative, textPositive, textPrimary, textPrimaryActive, textPrimaryHover, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_insol_next';
 export const config = {
     defaults: {
         view: 'default',
@@ -64,22 +64,22 @@ export const config = {
                 ${tokens.textFieldBorderColorFocus}: ${outlineSolidSecondary};
                 ${tokens.textFieldBorderColorHover}: ${outlineTransparentPrimaryHover};
 
-                ${tokens.borderColorSuccess}: ${outlinePositiveMinor};
-                ${tokens.textFieldBorderColorSuccess}: ${outlinePositiveMinor};
-                ${tokens.textFieldBorderColorSuccessFocus}: ${outlinePositiveMinorActive};
-                ${tokens.textFieldBorderColorSuccessHover}: ${outlinePositiveMinorHover};
+                ${tokens.borderColorSuccess}: ${outlinePositive};
+                ${tokens.textFieldBorderColorSuccess}: ${outlinePositive};
+                ${tokens.textFieldBorderColorSuccessFocus}: ${outlinePositiveActive};
+                ${tokens.textFieldBorderColorSuccessHover}: ${outlinePositiveHover};
 
-                ${tokens.borderColorError}: ${outlineNegativeMinor};
-                ${tokens.textFieldBorderColorError}: ${outlineNegativeMinor};
-                ${tokens.textFieldBorderColorErrorFocus}: ${outlineNegativeMinorActive};
-                ${tokens.textFieldBorderColorErrorHover}: ${outlineNegativeMinorHover};
+                ${tokens.borderColorError}: ${outlineNegative};
+                ${tokens.textFieldBorderColorError}: ${outlineNegative};
+                ${tokens.textFieldBorderColorErrorFocus}: ${outlineNegativeActive};
+                ${tokens.textFieldBorderColorErrorHover}: ${outlineNegativeHover};
 
                 ${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
                 ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};
-                ${tokens.textFieldColorError}: ${textNegative};
+                ${tokens.textFieldColorError}: ${textPrimary};
                 ${tokens.textFieldBackgroundErrorColor}: ${surfaceSolidCard};
                 ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceSolidCard};
-                ${tokens.textFieldColorSuccess}: ${textPositive};
+                ${tokens.textFieldColorSuccess}: ${textPrimary};
                 ${tokens.textFieldBackgroundSuccessColor}: ${surfaceSolidCard};
                 ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceSolidCard};
 

package/dist/styled-components/es/components/Notification/index.js

@@ -1,2 +1,2 @@
 export { NotificationsProvider, Notification } from './Notification';
-export { addNotification, closeNotification } from '@salutejs/plasma-new-hope/styled-components';
+export { addNotification, closeNotification, useNotifications } from '@salutejs/plasma-new-hope/styled-components';

package/dist/styled-components/es/components/Select/Select.config.js

@@ -72,7 +72,7 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentSecondary};
             `,
             positive: css`
-                ${tokens.textFieldColor}: ${textPositive};
+                ${tokens.textFieldColor}: ${textPrimary};
 
                 ${tokens.textFieldPlaceholderColor}: ${textSecondary};
                 ${tokens.textFieldPlaceholderColorFocus}: ${textSecondary};
@@ -128,7 +128,7 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentSecondary};
             `,
             warning: css`
-                ${tokens.textFieldColor}: ${textWarning};
+                ${tokens.textFieldColor}: ${textPrimary};
 
                 ${tokens.textFieldPlaceholderColor}: ${textSecondary};
                 ${tokens.textFieldPlaceholderColorFocus}: ${textSecondary};
@@ -184,7 +184,7 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentSecondary};
             `,
             negative: css`
-                ${tokens.textFieldColor}: ${textNegative};
+                ${tokens.textFieldColor}: ${textPrimary};
 
                 ${tokens.textFieldPlaceholderColor}: ${textSecondary};
                 ${tokens.textFieldPlaceholderColorFocus}: ${textSecondary};

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

@@ -1,5 +1,5 @@
 import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components';
-import { bodyL, bodyM, bodyS, bodyXS, onLightSurfaceSolidCard, outlineClear, outlineSolidSecondary, shadowDownSoftS, surfaceAccent, surfaceAccentGradient, surfaceSolidDefault, surfaceSolidTertiary, surfaceTransparentCard, surfaceTransparentCardActive, textAccent, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_insol_next';
+import { bodyL, bodyM, bodyS, bodyXS, outlineClear, outlineSolidSecondary, shadowDownSoftS, surfaceAccent, surfaceAccentGradient, surfaceSolidCard, surfaceSolidDefault, surfaceSolidTertiary, surfaceTransparentCard, surfaceTransparentCardActive, textAccent, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_insol_next';
 export const config = {
     defaults: {
         view: 'default',
@@ -13,9 +13,9 @@ export const config = {
 
                 ${sliderTokens.rangeValueColor}: ${textSecondary};
 
-                ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary};
-                ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard};
-                ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault};
+                ${sliderTokens.thumbBorderColor}: ${surfaceSolidCard};
+                ${sliderTokens.thumbBackgroundColor}: ${surfaceAccent};
+                ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidCard};
 
                 ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary};
 
@@ -44,9 +44,9 @@ export const config = {
 
                 ${sliderTokens.rangeValueColor}: ${textSecondary};
 
-                ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary};
-                ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard};
-                ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault};
+                ${sliderTokens.thumbBorderColor}: ${surfaceSolidCard};
+                ${sliderTokens.thumbBackgroundColor}: ${surfaceAccent};
+                ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidCard};
 
                 ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary};
 
@@ -75,9 +75,9 @@ export const config = {
 
                 ${sliderTokens.rangeValueColor}: ${textSecondary};
 
-                ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary};
-                ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard};
-                ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient};
+                ${sliderTokens.thumbBorderColor}: ${surfaceSolidCard};
+                ${sliderTokens.thumbBackgroundColor}: ${surfaceAccent};
+                ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidCard};
 
                 ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary};
 
@@ -253,17 +253,27 @@ export const config = {
         },
         pointerSize: {
             small: css`
-                ${sliderTokens.thumbSize}: 1rem;
-                ${sliderTokens.thumbBorderStyle}: solid;
-                ${sliderTokens.thumbBorderWidth}: 0.0625rem;
+                ${sliderTokens.thumbWidth}: 1.5rem;
+                ${sliderTokens.thumbHeight}: 1rem;
+                ${sliderTokens.thumbBorderWidth}: 0.09375rem 0.1875rem;
+                ${sliderTokens.thumbBorderRadius}: 0.6875rem / 0.59375rem;
+                ${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");
+
+                ${sliderTokens.currentValueTopOffset}: 1.375rem;
             `,
             large: css`
-                ${sliderTokens.thumbSize}: 1.25rem;
-                ${sliderTokens.thumbBorderStyle}: solid;
-                ${sliderTokens.thumbBorderWidth}: 0.0625rem;
+                ${sliderTokens.thumbWidth}: 2rem;
+                ${sliderTokens.thumbHeight}: 1.25rem;
+                ${sliderTokens.thumbBorderWidth}: 0.125rem 0.25rem;
+                ${sliderTokens.thumbBorderRadius}: 0.875rem / 0.75rem;
+                ${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");
+
+                ${sliderTokens.currentValueTopOffset}: 1.625rem;
             `,
             none: css`
-                ${sliderTokens.thumbSize}: 0rem;
+                ${sliderTokens.thumbWidth}: 0rem;
+
+                ${sliderTokens.currentValueTopOffset}: 1.5rem;
             `
         },
         disabled: {
@@ -271,5 +281,97 @@ export const config = {
                 ${sliderTokens.disabledOpacity}: 0.4;
             `
         }
-    }
+    },
+    intersections: [
+        {
+            size: 's',
+            pointerSize: 'small',
+            style: css`
+                ${sliderTokens.currentValueTopOffset}: 1rem;
+                &.slider-vertical-orientation {
+                    ${sliderTokens.currentValueTopOffset}: 1.25rem;
+                }
+            `
+        },
+        {
+            size: 'm',
+            pointerSize: 'small',
+            style: css`
+                ${sliderTokens.currentValueTopOffset}: 1.25rem;
+                &.slider-vertical-orientation {
+                    ${sliderTokens.currentValueTopOffset}: 1.5rem;
+                }
+            `
+        },
+        {
+            size: 'l',
+            pointerSize: 'small',
+            style: css`
+                ${sliderTokens.currentValueTopOffset}: 1.25rem;
+                &.slider-vertical-orientation {
+                    ${sliderTokens.currentValueTopOffset}: 1.5rem;
+                }
+            `
+        },
+        {
+            size: 's',
+            pointerSize: 'large',
+            style: css`
+                ${sliderTokens.currentValueTopOffset}: 1.25rem;
+                &.slider-vertical-orientation {
+                    ${sliderTokens.currentValueTopOffset}: 1.375rem;
+                }
+            `
+        },
+        {
+            size: 'm',
+            pointerSize: 'large',
+            style: css`
+                ${sliderTokens.currentValueTopOffset}: 1.5rem;
+                &.slider-vertical-orientation {
+                    ${sliderTokens.currentValueTopOffset}: 1.625rem;
+                }
+            `
+        },
+        {
+            size: 'l',
+            pointerSize: 'large',
+            style: css`
+                ${sliderTokens.currentValueTopOffset}: 1.5rem;
+                &.slider-vertical-orientation {
+                    ${sliderTokens.currentValueTopOffset}: 1.625rem;
+                }
+            `
+        },
+        {
+            size: 's',
+            pointerSize: 'none',
+            style: css`
+                ${sliderTokens.currentValueTopOffset}: 1rem;
+                &.slider-vertical-orientation {
+                    ${sliderTokens.currentValueTopOffset}: 1rem;
+                }
+            `
+        },
+        {
+            size: 'm',
+            pointerSize: 'none',
+            style: css`
+                ${sliderTokens.currentValueTopOffset}: 1.5rem;
+                &.slider-vertical-orientation {
+                    ${sliderTokens.currentValueTopOffset}: 1.25rem;
+                }
+            `
+        },
+        {
+            size: 'l',
+            pointerSize: 'none',
+            style: css`
+                ${sliderTokens.currentValueTopOffset}: 1.5rem;
+                &.slider-vertical-orientation {
+                    ${sliderTokens.currentValueTopOffset}: 1.25rem;
+                }
+            `
+        }
+    ]
 };

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

@@ -1,20 +1,24 @@
 import React from 'react';
-import { horizontalTabItemConfig, horizontalIconTabItemConfig, verticalTabItemConfig, verticalIconTabItemConfig, component, mergeConfig, fixedForwardRef } from '@salutejs/plasma-new-hope/styled-components';
+import { horizontalTabItemConfig, horizontalIconTabItemConfig, verticalTabItemConfig, verticalIconTabItemConfig, component, mergeConfig, fixedForwardRef, createConditionalComponent } from '@salutejs/plasma-new-hope/styled-components';
 import { config as horizontalConfig } from './horizontal/HorizontalTabItem.config';
 import { config as horizontalIconConfig } from './horizontal/HorizontalIconTabItem.config';
 import { config as verticalConfig } from './vertical/VerticalTabItem.config';
 import { config as verticalIconConfig } from './vertical/VerticalIconTabItem.config';
+import { config as horizontalSegmentConfig } from './horizontal/HorizontalTabItem.segment.config';
+import { config as verticalSegmentConfig } from './vertical/VerticalTabItem.segment.config';
 const mergedHorizontalTabItemConfig = mergeConfig(horizontalTabItemConfig, horizontalConfig);
 const HorizontalTabItem = component(mergedHorizontalTabItemConfig);
+const mergedHorizontalTabItemSegmentConfig = mergeConfig(horizontalTabItemConfig, horizontalSegmentConfig);
+const HorizontalTabItemSegment = component(mergedHorizontalTabItemSegmentConfig);
 const mergedHorizontalIconTabItemConfig = mergeConfig(horizontalIconTabItemConfig, horizontalIconConfig);
 const HorizontalIconTabItem = component(mergedHorizontalIconTabItemConfig);
 const mergedVerticalTabItemConfig = mergeConfig(verticalTabItemConfig, verticalConfig);
 const VerticalTabItem = component(mergedVerticalTabItemConfig);
+const mergedVerticalTabItemSegmentConfig = mergeConfig(verticalTabItemConfig, verticalSegmentConfig);
+const VerticalTabItemSegment = component(mergedVerticalTabItemSegmentConfig);
 const mergedVerticalIconTabItemConfig = mergeConfig(verticalIconTabItemConfig, verticalIconConfig);
 const VerticalIconTabItem = component(mergedVerticalIconTabItemConfig);
-/**
- * Элемент списка, недопустимо использовать вне компонента Tabs.
- */ export const TabItem = fixedForwardRef((props, ref)=>{
+const TabItemDefault = fixedForwardRef((props, ref)=>{
     if (props.orientation === 'vertical') {
         return /*#__PURE__*/ React.createElement(VerticalTabItem, {
             ref: ref,
@@ -26,6 +30,24 @@ const VerticalIconTabItem = component(mergedVerticalIconTabItemConfig);
         ...props
     });
 });
+const TabItemSegment = fixedForwardRef((props, ref)=>{
+    if (props.orientation === 'vertical') {
+        return /*#__PURE__*/ React.createElement(VerticalTabItemSegment, {
+            ref: ref,
+            ...props
+        });
+    }
+    return /*#__PURE__*/ React.createElement(HorizontalTabItemSegment, {
+        ref: ref,
+        ...props
+    });
+});
+/**
+ * Элемент списка, недопустимо использовать вне компонента Tabs.
+ */ export const TabItem = createConditionalComponent({
+    default: TabItemDefault,
+    segment: TabItemSegment
+});
 export const IconTabItem = fixedForwardRef((props, ref)=>{
     if (props.orientation === 'vertical') {
         return /*#__PURE__*/ React.createElement(VerticalIconTabItem, {

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

@@ -1,16 +1,44 @@
-import React from 'react';
-import { horizontalTabsConfig, verticalTabsConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import React, { forwardRef } from 'react';
+import { horizontalTabsConfig, verticalTabsConfig, component, mergeConfig, createConditionalComponent } from '@salutejs/plasma-new-hope/styled-components';
 import { config as horizontalConfig } from './horizontal/HorizontalTabs.config';
 import { config as verticalConfig } from './vertical/VerticalTabs.config';
+import { config as horizontalSegmentConfig } from './horizontal/HorizontalTabs.segment.config';
+import { config as verticalSegmentConfig } from './vertical/VerticalTabs.segment.config';
 const mergedHorizontalTabsConfig = mergeConfig(horizontalTabsConfig, horizontalConfig);
 const mergedVerticalTabsConfig = mergeConfig(verticalTabsConfig, verticalConfig);
+const mergedHorizontalTabsSegmentConfig = mergeConfig(horizontalTabsConfig, horizontalSegmentConfig);
+const mergedVerticalTabsSegmentConfig = mergeConfig(verticalTabsConfig, verticalSegmentConfig);
 const HorizontalTabs = component(mergedHorizontalTabsConfig);
 const VerticalTabs = component(mergedVerticalTabsConfig);
-/**
- * Контейнер вкладок, основной компонент для пользовательской сборки вкладок.
- */ export const Tabs = (props)=>{
+const HorizontalTabsSegment = component(mergedHorizontalTabsSegmentConfig);
+const VerticalTabsSegment = component(mergedVerticalTabsSegmentConfig);
+const TabsDefault = /*#__PURE__*/ forwardRef((props, ref)=>{
+    if (props.orientation === 'vertical') {
+        return /*#__PURE__*/ React.createElement(VerticalTabs, {
+            ref: ref,
+            ...props
+        });
+    }
+    return /*#__PURE__*/ React.createElement(HorizontalTabs, {
+        ref: ref,
+        ...props
+    });
+});
+const TabsSegment = /*#__PURE__*/ forwardRef((props, ref)=>{
     if (props.orientation === 'vertical') {
-        return /*#__PURE__*/ React.createElement(VerticalTabs, props);
+        return /*#__PURE__*/ React.createElement(VerticalTabsSegment, {
+            ref: ref,
+            ...props
+        });
     }
-    return /*#__PURE__*/ React.createElement(HorizontalTabs, props);
-};
+    return /*#__PURE__*/ React.createElement(HorizontalTabsSegment, {
+        ref: ref,
+        ...props
+    });
+});
+/**
+ * Контейнер вкладок, основной компонент для пользовательской сборки вкладок.
+ */ export const Tabs = createConditionalComponent({
+    default: TabsDefault,
+    segment: TabsSegment
+});