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

package/dist/css/es/index.js

@@ -1,5 +1,5 @@
 export { Accordion } from './components/Accordion/Accordion.js';
-export { AccordionItem, ButtonBase, CardContent, CardInnerContent, CarouselItem, CellTextbox, CellTextboxLabel, CellTextboxSubtitle, CellTextboxTitle, Col, ListItem, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN, ONLY_DIGITS_PATTERN, Overlay, PopupProvider, Portal, RadioGroup, RectSkeleton, Row, SSRProvider, SegmentProvider, TabItemRefs, TabsContext, addNotification, closeNotification, codeFieldClasses, codeFieldTokens, counterTokens, datePickerClasses, datePickerTokens, dateTimePickerClasses, dateTimePickerTokens, dividerTokens, dropzoneClasses, dropzoneTokens, fileClasses, fileTokens, informationWrapperClasses, informationWrapperTokens, modalClasses, noteClasses, noteTokens, numberFormatter, numberInputClasses, numberInputTokens, popupClasses, priceClasses, rangeTokens, ratingClasses, ratingTokens, sheetClasses, textFieldTokens, timePickerClasses, timePickerTokens, toolbarTokens, usePopupContext, useSegment, useToast, withSkeleton } from '@salutejs/plasma-new-hope/css';
+export { AccordionItem, ButtonBase, CardContent, CardInnerContent, CarouselItem, CellTextbox, CellTextboxLabel, CellTextboxSubtitle, CellTextboxTitle, Col, ListItem, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN, ONLY_DIGITS_PATTERN, Overlay, PopupProvider, Portal, RadioGroup, RectSkeleton, Row, SSRProvider, SegmentProvider, TabItemRefs, TabsContext, addNotification, closeNotification, codeFieldClasses, codeFieldTokens, counterTokens, datePickerClasses, datePickerTokens, dateTimePickerClasses, dateTimePickerTokens, dividerTokens, dropzoneClasses, dropzoneTokens, fileClasses, fileTokens, informationWrapperClasses, informationWrapperTokens, modalClasses, noteClasses, noteTokens, numberFormatter, numberInputClasses, numberInputTokens, popupClasses, priceClasses, rangeTokens, ratingClasses, ratingTokens, sheetClasses, textFieldSliderTokens, textFieldTokens, timePickerClasses, timePickerTokens, toolbarTokens, useNotifications, usePopupContext, useSegment, useToast, withSkeleton } from '@salutejs/plasma-new-hope/css';
 export { Attach } from './components/Attach/Attach.js';
 export { Autocomplete } from './components/Autocomplete/Autocomplete.js';
 export { Avatar } from './components/Avatar/Avatar.js';
@@ -68,6 +68,7 @@ export { TabsController } from './components/Tabs/TabsController.js';
 export { TextArea } from './components/TextArea/TextArea.js';
 export { TextField } from './components/TextField/TextField.js';
 export { TextFieldGroup } from './components/TextFieldGroup/TextFieldGroup.js';
+export { TextFieldSlider } from './components/TextFieldSlider/TextFieldSlider.js';
 export { TimePicker } from './components/TimePicker/TimePicker.js';
 export { Toast, ToastProvider } from './components/Toast/Toast.js';
 export { Toolbar, ToolbarDivider } from './components/Toolbar/Toolbar.js';

package/dist/css/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -66,13 +66,13 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintIconColor}: ${_sdds_insol_next.textSecondary};
             `,
             positive: (0, _styledcomponents.css)`
-                ${_styledcomponents.autocompleteTokens.textFieldColor}: ${_sdds_insol_next.textPositive};
-                ${_styledcomponents.autocompleteTokens.textFieldClearColor}: ${_sdds_insol_next.textPositive};
+                ${_styledcomponents.autocompleteTokens.textFieldColor}: ${_sdds_insol_next.textPrimary};
+                ${_styledcomponents.autocompleteTokens.textFieldClearColor}: ${_sdds_insol_next.textPrimary};
 
                 ${_styledcomponents.autocompleteTokens.textFieldPlaceholderColor}: ${_sdds_insol_next.textSecondary};
                 ${_styledcomponents.autocompleteTokens.textFieldPlaceholderColorFocus}: ${_sdds_insol_next.textTertiary};
-                ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColor}: ${_sdds_insol_next.textPositive};
-                ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColorFocus}: ${_sdds_insol_next.textPositive};
+                ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColor}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColorFocus}: ${_sdds_insol_next.textTertiary};
 
                 ${_styledcomponents.autocompleteTokens.textFieldBackgroundColor}: ${_sdds_insol_next.surfaceSolidCard};
                 ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorFocus}: ${_sdds_insol_next.surfaceSolidCard};
@@ -113,13 +113,13 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintIconColor}: ${_sdds_insol_next.textSecondary};
             `,
             warning: (0, _styledcomponents.css)`
-                ${_styledcomponents.autocompleteTokens.textFieldColor}: ${_sdds_insol_next.textWarning};
-                ${_styledcomponents.autocompleteTokens.textFieldClearColor}: ${_sdds_insol_next.textWarning};
+                ${_styledcomponents.autocompleteTokens.textFieldColor}: ${_sdds_insol_next.textPrimary};
+                ${_styledcomponents.autocompleteTokens.textFieldClearColor}: ${_sdds_insol_next.textPrimary};
 
                 ${_styledcomponents.autocompleteTokens.textFieldPlaceholderColor}: ${_sdds_insol_next.textSecondary};
                 ${_styledcomponents.autocompleteTokens.textFieldPlaceholderColorFocus}: ${_sdds_insol_next.textTertiary};
-                ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColor}: ${_sdds_insol_next.textWarning};
-                ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColorFocus}: ${_sdds_insol_next.textWarning};
+                ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColor}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColorFocus}: ${_sdds_insol_next.textTertiary};
 
                 ${_styledcomponents.autocompleteTokens.textFieldBackgroundColor}: ${_sdds_insol_next.surfaceSolidCard};
                 ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorFocus}: ${_sdds_insol_next.surfaceSolidCard};
@@ -160,13 +160,13 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintIconColor}: ${_sdds_insol_next.textSecondary};
             `,
             negative: (0, _styledcomponents.css)`
-                ${_styledcomponents.autocompleteTokens.textFieldColor}: ${_sdds_insol_next.textNegative};
-                ${_styledcomponents.autocompleteTokens.textFieldClearColor}: ${_sdds_insol_next.textNegative};
+                ${_styledcomponents.autocompleteTokens.textFieldColor}: ${_sdds_insol_next.textPrimary};
+                ${_styledcomponents.autocompleteTokens.textFieldClearColor}: ${_sdds_insol_next.textPrimary};
 
                 ${_styledcomponents.autocompleteTokens.textFieldPlaceholderColor}: ${_sdds_insol_next.textSecondary};
                 ${_styledcomponents.autocompleteTokens.textFieldPlaceholderColorFocus}: ${_sdds_insol_next.textTertiary};
-                ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColor}: ${_sdds_insol_next.textNegative};
-                ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColorFocus}: ${_sdds_insol_next.textNegative};
+                ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColor}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.autocompleteTokens.textFieldClearPlaceholderColorFocus}: ${_sdds_insol_next.textTertiary};
 
                 ${_styledcomponents.autocompleteTokens.textFieldBackgroundColor}: ${_sdds_insol_next.surfaceSolidCard};
                 ${_styledcomponents.autocompleteTokens.textFieldBackgroundColorFocus}: ${_sdds_insol_next.surfaceSolidCard};

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

@@ -85,13 +85,13 @@ const config = {
                 ${_styledcomponents.comboboxTokens.checkboxTriggerBorderColor}: ${_sdds_insol_next.outlineTransparentTertiary};
             `,
             positive: (0, _styledcomponents.css)`
-                ${_styledcomponents.comboboxTokens.textFieldColor}: ${_sdds_insol_next.textPositive};
-                ${_styledcomponents.comboboxTokens.textFieldClearColor}: ${_sdds_insol_next.textPositive};
+                ${_styledcomponents.comboboxTokens.textFieldColor}: ${_sdds_insol_next.textPrimary};
+                ${_styledcomponents.comboboxTokens.textFieldClearColor}: ${_sdds_insol_next.textPrimary};
 
                 ${_styledcomponents.comboboxTokens.textFieldPlaceholderColor}: ${_sdds_insol_next.textSecondary};
                 ${_styledcomponents.comboboxTokens.textFieldPlaceholderColorFocus}: ${_sdds_insol_next.textTertiary};
-                ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColor}: ${_sdds_insol_next.textPositive};
-                ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColorFocus}: ${_sdds_insol_next.textPositive};
+                ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColor}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColorFocus}: ${_sdds_insol_next.textTertiary};
 
                 ${_styledcomponents.comboboxTokens.textFieldBackgroundColor}: ${_sdds_insol_next.surfaceSolidCard};
                 ${_styledcomponents.comboboxTokens.textFieldBackgroundColorFocus}: ${_sdds_insol_next.surfaceSolidCard};
@@ -147,13 +147,13 @@ const config = {
                 ${_styledcomponents.comboboxTokens.checkboxTriggerBorderColor}: ${_sdds_insol_next.outlineTransparentTertiary};
             `,
             warning: (0, _styledcomponents.css)`
-                ${_styledcomponents.comboboxTokens.textFieldColor}: ${_sdds_insol_next.textWarning};
-                ${_styledcomponents.comboboxTokens.textFieldClearColor}: ${_sdds_insol_next.textWarning};
+                ${_styledcomponents.comboboxTokens.textFieldColor}: ${_sdds_insol_next.textPrimary};
+                ${_styledcomponents.comboboxTokens.textFieldClearColor}: ${_sdds_insol_next.textPrimary};
 
                 ${_styledcomponents.comboboxTokens.textFieldPlaceholderColor}: ${_sdds_insol_next.textSecondary};
                 ${_styledcomponents.comboboxTokens.textFieldPlaceholderColorFocus}: ${_sdds_insol_next.textTertiary};
-                ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColor}: ${_sdds_insol_next.textWarning};
-                ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColorFocus}: ${_sdds_insol_next.textWarning};
+                ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColor}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColorFocus}: ${_sdds_insol_next.textTertiary};
 
                 ${_styledcomponents.comboboxTokens.textFieldBackgroundColor}: ${_sdds_insol_next.surfaceSolidCard};
                 ${_styledcomponents.comboboxTokens.textFieldBackgroundColorFocus}: ${_sdds_insol_next.surfaceSolidCard};
@@ -209,13 +209,13 @@ const config = {
                 ${_styledcomponents.comboboxTokens.checkboxTriggerBorderColor}: ${_sdds_insol_next.outlineTransparentTertiary};
             `,
             negative: (0, _styledcomponents.css)`
-                ${_styledcomponents.comboboxTokens.textFieldColor}: ${_sdds_insol_next.textNegative};
-                ${_styledcomponents.comboboxTokens.textFieldClearColor}: ${_sdds_insol_next.textNegative};
+                ${_styledcomponents.comboboxTokens.textFieldColor}: ${_sdds_insol_next.textPrimary};
+                ${_styledcomponents.comboboxTokens.textFieldClearColor}: ${_sdds_insol_next.textPrimary};
 
                 ${_styledcomponents.comboboxTokens.textFieldPlaceholderColor}: ${_sdds_insol_next.textSecondary};
                 ${_styledcomponents.comboboxTokens.textFieldPlaceholderColorFocus}: ${_sdds_insol_next.textTertiary};
-                ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColor}: ${_sdds_insol_next.textNegative};
-                ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColorFocus}: ${_sdds_insol_next.textNegative};
+                ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColor}: ${_sdds_insol_next.textSecondary};
+                ${_styledcomponents.comboboxTokens.textFieldClearPlaceholderColorFocus}: ${_sdds_insol_next.textTertiary};
 
                 ${_styledcomponents.comboboxTokens.textFieldBackgroundColor}: ${_sdds_insol_next.surfaceSolidCard};
                 ${_styledcomponents.comboboxTokens.textFieldBackgroundColorFocus}: ${_sdds_insol_next.surfaceSolidCard};

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

@@ -74,22 +74,22 @@ const config = {
                 ${_styledcomponents.datePickerTokens.textFieldBorderColorFocus}: ${_sdds_insol_next.outlineSolidSecondary};
                 ${_styledcomponents.datePickerTokens.textFieldBorderColorHover}: ${_sdds_insol_next.outlineTransparentPrimaryHover};
 
-                ${_styledcomponents.datePickerTokens.borderColorSuccess}: ${_sdds_insol_next.outlinePositiveMinor};
-                ${_styledcomponents.datePickerTokens.textFieldBorderColorSuccess}: ${_sdds_insol_next.outlinePositiveMinor};
-                ${_styledcomponents.datePickerTokens.textFieldBorderColorSuccessFocus}: ${_sdds_insol_next.outlinePositiveMinorActive};
-                ${_styledcomponents.datePickerTokens.textFieldBorderColorSuccessHover}: ${_sdds_insol_next.outlinePositiveMinorHover};
+                ${_styledcomponents.datePickerTokens.borderColorSuccess}: ${_sdds_insol_next.outlinePositive};
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorSuccess}: ${_sdds_insol_next.outlinePositive};
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorSuccessFocus}: ${_sdds_insol_next.outlinePositiveActive};
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorSuccessHover}: ${_sdds_insol_next.outlinePositiveHover};
 
-                ${_styledcomponents.datePickerTokens.borderColorError}: ${_sdds_insol_next.outlineNegativeMinor};
-                ${_styledcomponents.datePickerTokens.textFieldBorderColorError}: ${_sdds_insol_next.outlineNegativeMinor};
-                ${_styledcomponents.datePickerTokens.textFieldBorderColorErrorFocus}: ${_sdds_insol_next.outlineNegativeMinorActive};
-                ${_styledcomponents.datePickerTokens.textFieldBorderColorErrorHover}: ${_sdds_insol_next.outlineNegativeMinorHover};
+                ${_styledcomponents.datePickerTokens.borderColorError}: ${_sdds_insol_next.outlineNegative};
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorError}: ${_sdds_insol_next.outlineNegative};
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorErrorFocus}: ${_sdds_insol_next.outlineNegativeActive};
+                ${_styledcomponents.datePickerTokens.textFieldBorderColorErrorHover}: ${_sdds_insol_next.outlineNegativeHover};
 
                 ${_styledcomponents.datePickerTokens.textFieldBackgroundColor}: ${_sdds_insol_next.surfaceSolidCard};
                 ${_styledcomponents.datePickerTokens.textFieldBackgroundColorFocus}: ${_sdds_insol_next.surfaceSolidCard};
-                ${_styledcomponents.datePickerTokens.textFieldColorError}: ${_sdds_insol_next.textNegative};
+                ${_styledcomponents.datePickerTokens.textFieldColorError}: ${_sdds_insol_next.textPrimary};
                 ${_styledcomponents.datePickerTokens.textFieldBackgroundErrorColor}: ${_sdds_insol_next.surfaceSolidCard};
                 ${_styledcomponents.datePickerTokens.textFieldBackgroundErrorColorFocus}: ${_sdds_insol_next.surfaceSolidCard};
-                ${_styledcomponents.datePickerTokens.textFieldColorSuccess}: ${_sdds_insol_next.textPositive};
+                ${_styledcomponents.datePickerTokens.textFieldColorSuccess}: ${_sdds_insol_next.textPrimary};
                 ${_styledcomponents.datePickerTokens.textFieldBackgroundSuccessColor}: ${_sdds_insol_next.surfaceSolidCard};
                 ${_styledcomponents.datePickerTokens.textFieldBackgroundSuccessColorFocus}: ${_sdds_insol_next.surfaceSolidCard};
 

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

@@ -20,6 +20,9 @@ _export(exports, {
     },
     get closeNotification () {
         return _styledcomponents.closeNotification;
+    },
+    get useNotifications () {
+        return _styledcomponents.useNotifications;
     }
 });
 const _Notification = require("./Notification");

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

@@ -82,7 +82,7 @@ const config = {
                 ${_styledcomponents.selectTokens.checkboxTriggerBorderColor}: ${_sdds_insol_next.outlineTransparentSecondary};
             `,
             positive: (0, _styledcomponents.css)`
-                ${_styledcomponents.selectTokens.textFieldColor}: ${_sdds_insol_next.textPositive};
+                ${_styledcomponents.selectTokens.textFieldColor}: ${_sdds_insol_next.textPrimary};
 
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColor}: ${_sdds_insol_next.textSecondary};
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColorFocus}: ${_sdds_insol_next.textSecondary};
@@ -138,7 +138,7 @@ const config = {
                 ${_styledcomponents.selectTokens.checkboxTriggerBorderColor}: ${_sdds_insol_next.outlineTransparentSecondary};
             `,
             warning: (0, _styledcomponents.css)`
-                ${_styledcomponents.selectTokens.textFieldColor}: ${_sdds_insol_next.textWarning};
+                ${_styledcomponents.selectTokens.textFieldColor}: ${_sdds_insol_next.textPrimary};
 
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColor}: ${_sdds_insol_next.textSecondary};
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColorFocus}: ${_sdds_insol_next.textSecondary};
@@ -194,7 +194,7 @@ const config = {
                 ${_styledcomponents.selectTokens.checkboxTriggerBorderColor}: ${_sdds_insol_next.outlineTransparentSecondary};
             `,
             negative: (0, _styledcomponents.css)`
-                ${_styledcomponents.selectTokens.textFieldColor}: ${_sdds_insol_next.textNegative};
+                ${_styledcomponents.selectTokens.textFieldColor}: ${_sdds_insol_next.textPrimary};
 
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColor}: ${_sdds_insol_next.textSecondary};
                 ${_styledcomponents.selectTokens.textFieldPlaceholderColorFocus}: ${_sdds_insol_next.textSecondary};

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