@salutejs/sdds-cs 0.376.0-dev.0 → 0.377.0-dev.0

package/dist/emotion/cjs/components/Select/Select.config.js

@@ -26,6 +26,7 @@ const config = {
                 ${_emotion.selectTokens.textFieldBackgroundColorFocus}: ${_sdds_cs.surfaceSolidCard};
                 ${_emotion.selectTokens.textFieldLabelColor}: ${_sdds_cs.textPrimary};
                 ${_emotion.selectTokens.textFieldLeftHelperColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.selectTokens.textFieldTitleCaptionColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.selectTokens.textFieldContentSlotColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.selectTokens.textFieldBorderColor}: ${_sdds_cs.outlineSolidPrimary};
                 ${_emotion.selectTokens.textFieldBorderColorHover}: ${_sdds_cs.outlineSolidPrimaryHover};
@@ -69,6 +70,7 @@ const config = {
                 ${_emotion.selectTokens.textFieldBackgroundColorFocus}: ${_sdds_cs.surfaceSolidCard};
                 ${_emotion.selectTokens.textFieldLabelColor}: ${_sdds_cs.textPrimary};
                 ${_emotion.selectTokens.textFieldLeftHelperColor}: ${_sdds_cs.textNegative};
+                ${_emotion.selectTokens.textFieldTitleCaptionColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.selectTokens.textFieldContentSlotColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.selectTokens.textFieldBorderColor}: ${_sdds_cs.outlineNegative};
                 ${_emotion.selectTokens.textFieldBorderColorHover}: ${_sdds_cs.outlineNegativeHover};
@@ -134,6 +136,13 @@ const config = {
                 ${_emotion.selectTokens.textFieldLabelFontWeight}: ${_sdds_cs.bodyS.fontWeight};
                 ${_emotion.selectTokens.textFieldLabelLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
                 ${_emotion.selectTokens.textFieldLabelLineHeight}: ${_sdds_cs.bodyS.lineHeight};
+                ${_emotion.selectTokens.textFieldTitleCaptionMargin}: 0.1875rem;
+                ${_emotion.selectTokens.textFieldTitleCaptionFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
+                ${_emotion.selectTokens.textFieldTitleCaptionFontSize}: ${_sdds_cs.bodyXS.fontSize};
+                ${_emotion.selectTokens.textFieldTitleCaptionFontStyle}: ${_sdds_cs.bodyXS.fontStyle};
+                ${_emotion.selectTokens.textFieldTitleCaptionFontWeight}: ${_sdds_cs.bodyXS.fontWeight};
+                ${_emotion.selectTokens.textFieldTitleCaptionLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
+                ${_emotion.selectTokens.textFieldTitleCaptionLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
 
                 ${_emotion.selectTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_emotion.selectTokens.textFieldLeftHelperFontFamily}: ${_sdds_cs.bodyS.fontFamily};

package/dist/emotion/cjs/components/Select/Select.js

@@ -11,13 +11,20 @@ Object.defineProperty(exports, "Select", {
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _Selectconfig = require("./Select.config");
+const _Selectclearconfig = require("./Select.clear.config");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const mergedConfig = (0, _emotion.mergeConfig)(_emotion.selectConfig, _Selectconfig.config);
-const SelectNewHope = (0, _emotion.component)(mergedConfig);
+const SelectDefault = (0, _emotion.component)(mergedConfig);
+const mergedConfigClear = (0, _emotion.mergeConfig)(_emotion.selectConfig, _Selectclearconfig.config);
+const SelectClear = (0, _emotion.component)(mergedConfigClear);
+const SelectNewHope = (0, _emotion.createConditionalComponent)({
+    default: SelectDefault,
+    clear: SelectClear
+});
 const SelectComponent = (props, ref)=>{
     return /*#__PURE__*/ _react.default.createElement(SelectNewHope, {
         ref: ref,

package/dist/emotion/cjs/components/TextArea/TextArea.clear.config.js

@@ -204,6 +204,7 @@ const config = {
                 ${_emotion.textAreaTokens.hintInnerLabelPlacementOffset}: -0.751rem -2rem auto auto;
 
                 ${_emotion.textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_emotion.textAreaTokens.titleCaptionMargin}: 0.1875rem;
                 ${_emotion.textAreaTokens.titleCaptionFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
                 ${_emotion.textAreaTokens.titleCaptionFontSize}: ${_sdds_cs.bodyXS.fontSize};
                 ${_emotion.textAreaTokens.titleCaptionFontStyle}: ${_sdds_cs.bodyXS.fontStyle};

package/dist/emotion/cjs/components/TextArea/TextArea.config.js

@@ -193,6 +193,7 @@ const config = {
                 ${_emotion.textAreaTokens.hintInnerLabelPlacementOffset}: -0.751rem -2rem auto auto;
 
                 ${_emotion.textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_emotion.textAreaTokens.titleCaptionMargin}: 0.1875rem;
                 ${_emotion.textAreaTokens.titleCaptionFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
                 ${_emotion.textAreaTokens.titleCaptionFontSize}: ${_sdds_cs.bodyXS.fontSize};
                 ${_emotion.textAreaTokens.titleCaptionFontStyle}: ${_sdds_cs.bodyXS.fontStyle};

package/dist/emotion/cjs/components/TextField/TextField.clear.config.js

@@ -53,9 +53,11 @@ const config = {
             `,
             negative: (0, _emotion.css)`
                 ${_emotion.textFieldTokens.color}: ${_sdds_cs.textNegative};
+                ${_emotion.textFieldTokens.colorFocus}: ${_sdds_cs.textPrimary};
 
                 ${_emotion.textFieldTokens.placeholderColor}: ${_sdds_cs.textNegative};
-                ${_emotion.textFieldTokens.placeholderColorFocus}: ${_sdds_cs.textNegative};
+                ${_emotion.textFieldTokens.placeholderColorHover}: ${_sdds_cs.textSecondary};
+                ${_emotion.textFieldTokens.placeholderColorFocus}: ${_sdds_cs.textTertiary};
 
                 ${_emotion.textFieldTokens.backgroundColor}: transparent;
                 ${_emotion.textFieldTokens.backgroundColorHover}: transparent;
@@ -66,12 +68,15 @@ const config = {
                 ${_emotion.textFieldTokens.labelColor}: ${_sdds_cs.textPrimary};
                 ${_emotion.textFieldTokens.leftHelperColor}: ${_sdds_cs.textNegative};
                 ${_emotion.textFieldTokens.rightHelperColor}: ${_sdds_cs.textNegative};
+                ${_emotion.textFieldTokens.leftHelperColorFocus}: ${_sdds_cs.textSecondary};
+                ${_emotion.textFieldTokens.rightHelperColorFocus}: ${_sdds_cs.textSecondary};
                 ${_emotion.textFieldTokens.titleCaptionColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.textFieldTokens.hintIconColor}: ${_sdds_cs.textSecondary};
 
                 ${_emotion.textFieldTokens.contentSlotColor}: ${_sdds_cs.textNegative};
                 ${_emotion.textFieldTokens.contentSlotColorHover}: ${_sdds_cs.textNegativeHover};
                 ${_emotion.textFieldTokens.contentSlotColorActive}: ${_sdds_cs.textNegativeActive};
+                ${_emotion.textFieldTokens.contentSlotColorFocus}: ${_sdds_cs.textSecondary};
 
                 ${_emotion.textFieldTokens.contentSlotRightColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.textFieldTokens.contentSlotRightColorHover}: ${_sdds_cs.textSecondaryHover};
@@ -116,6 +121,7 @@ const config = {
                 ${_emotion.textFieldTokens.hintInnerLabelPlacementOffset}: 0.062rem -2.1063rem auto auto;
 
                 ${_emotion.textFieldTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_emotion.textFieldTokens.titleCaptionMargin}: 0.1875rem;
                 ${_emotion.textFieldTokens.titleCaptionFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
                 ${_emotion.textFieldTokens.titleCaptionFontSize}: ${_sdds_cs.bodyXS.fontSize};
                 ${_emotion.textFieldTokens.titleCaptionFontStyle}: ${_sdds_cs.bodyXS.fontStyle};

package/dist/emotion/cjs/components/TextField/TextField.config.js

@@ -143,6 +143,7 @@ const config = {
                 ${_emotion.textFieldTokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
 
                 ${_emotion.textFieldTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_emotion.textFieldTokens.titleCaptionMargin}: 0.3125rem;
                 ${_emotion.textFieldTokens.titleCaptionFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
                 ${_emotion.textFieldTokens.titleCaptionFontSize}: ${_sdds_cs.bodyXS.fontSize};
                 ${_emotion.textFieldTokens.titleCaptionFontStyle}: ${_sdds_cs.bodyXS.fontStyle};
@@ -224,6 +225,7 @@ const config = {
                 ${_emotion.textFieldTokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto;
 
                 ${_emotion.textFieldTokens.titleCaptionInnerLabelOffset}: 0.25rem;
+                ${_emotion.textFieldTokens.titleCaptionMargin}: 0.1875rem;
                 ${_emotion.textFieldTokens.titleCaptionFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
                 ${_emotion.textFieldTokens.titleCaptionFontSize}: ${_sdds_cs.bodyXS.fontSize};
                 ${_emotion.textFieldTokens.titleCaptionFontStyle}: ${_sdds_cs.bodyXS.fontStyle};

package/dist/emotion/cjs/components/TimePicker/TimePicker.config.js

@@ -79,6 +79,7 @@ const config = {
                 ${_emotion.timePickerTokens.disabledOpacity}: 0.4;
 
                 ${_emotion.timePickerTokens.leftHelperColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.timePickerTokens.titleCaptionColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.timePickerTokens.leftHelperColorError}: ${_sdds_cs.textNegative};
                 ${_emotion.timePickerTokens.leftHelperColorSuccess}: ${_sdds_cs.textPositive};
             `
@@ -96,6 +97,13 @@ const config = {
                 ${_emotion.timePickerTokens.labelFontWeight}: ${_sdds_cs.bodyS.fontWeight};
                 ${_emotion.timePickerTokens.labelLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
                 ${_emotion.timePickerTokens.labelLineHeight}: ${_sdds_cs.bodyS.lineHeight};
+                ${_emotion.timePickerTokens.titleCaptionMargin}: 0.1875rem;
+                ${_emotion.timePickerTokens.titleCaptionFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
+                ${_emotion.timePickerTokens.titleCaptionFontStyle}: ${_sdds_cs.bodyXS.fontStyle};
+                ${_emotion.timePickerTokens.titleCaptionFontSize}: ${_sdds_cs.bodyXS.fontSize};
+                ${_emotion.timePickerTokens.titleCaptionFontWeight}: ${_sdds_cs.bodyXS.fontWeight};
+                ${_emotion.timePickerTokens.titleCaptionLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
+                ${_emotion.timePickerTokens.titleCaptionLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
                 ${_emotion.timePickerTokens.textFieldBorderWidth}: 0.0625rem;
 
                 ${_emotion.timePickerTokens.indicatorSize}: 0.375rem;
@@ -168,6 +176,7 @@ const config = {
             true: (0, _emotion.css)`
                 ${_emotion.timePickerTokens.labelColorReadOnly}: ${_sdds_cs.textSecondary};
                 ${_emotion.timePickerTokens.leftHelperColorReadOnly}: ${_sdds_cs.textSecondary};
+                ${_emotion.timePickerTokens.titleCaptionColorReadOnly}: ${_sdds_cs.textSecondary};
 
                 ${_emotion.timePickerTokens.textFieldColorReadOnly}: ${_sdds_cs.textPrimary};
                 ${_emotion.timePickerTokens.textFieldPlaceholderColorReadOnly}: ${_sdds_cs.textSecondary};

package/dist/emotion/es/components/Autocomplete/Autocomplete.clear.config.js

@@ -0,0 +1,224 @@
+import { bodyM, bodyS, bodyXS, outlineAccent, outlineNegativeHover, outlineSolidPrimary, outlineSolidSecondary, surfaceAccent, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidPrimary, surfaceTransparentAccent, textAccent, textAccentActive, textAccentMinor, textNegative, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
+import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
+export const config = {
+    defaults: {
+        view: 'default',
+        size: 's',
+        labelPlacement: 'outer'
+    },
+    variations: {
+        view: {
+            default: css`
+                ${tokens.textFieldColor}: ${textPrimary};
+                ${tokens.textFieldClearColor}: ${textPrimary};
+
+                ${tokens.textFieldPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
+                ${tokens.textFieldClearPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary};
+
+                ${tokens.textFieldBackgroundColor}: transparent;
+                ${tokens.textFieldBackgroundColorHover}: transparent;
+                ${tokens.textFieldBackgroundColorFocus}: transparent;
+                ${tokens.textFieldCaretColor}: ${textAccent};
+                ${tokens.textFieldTextBeforeColor}: ${textTertiary};
+                ${tokens.textFieldTextAfterColor}: ${textTertiary};
+                ${tokens.textFieldLabelColor}: ${textPrimary};
+                ${tokens.textFieldLeftHelperColor}: ${textSecondary};
+                ${tokens.textFieldTitleCaptionColor}: ${textSecondary};
+                ${tokens.textFieldFocusColor}: ${textAccent};
+
+                ${tokens.textFieldContentSlotColor}: ${textSecondary};
+                ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};
+                ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};
+                ${tokens.textFieldContentSlotRightColor}: ${textAccent};
+                ${tokens.textFieldContentSlotRightColorHover}: ${textAccentMinor};
+                ${tokens.textFieldContentSlotRightColorActive}: ${textAccentActive};
+
+                ${tokens.focusColor}: ${surfaceAccent};
+                ${tokens.textFieldIndicatorColor}: ${surfaceNegative};
+                ${tokens.textFieldOptionalColor}: ${textTertiary};
+
+                ${tokens.background}: ${surfaceSolidCard};
+                ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
+                ${tokens.itemBackground}: ${surfaceClear};
+                ${tokens.itemBackgroundHover}: ${surfaceTransparentAccent};
+                ${tokens.itemColor}: ${textPrimary};
+
+                ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary};
+
+                ${tokens.dropdownBorderColor}: ${surfaceSolidPrimary};
+
+                ${tokens.textFieldDividerColor}: ${outlineSolidPrimary};
+                ${tokens.textFieldDividerColorHover}: ${textSecondary};
+                ${tokens.textFieldDividerColorFocus}: ${surfaceAccent};
+            `,
+            negative: css`
+                ${tokens.textFieldColor}: ${textNegative};
+                ${tokens.textFieldClearColor}: ${textPrimary};
+
+                ${tokens.textFieldPlaceholderColor}: ${textNegative};
+                ${tokens.textFieldPlaceholderColorHover}: ${textSecondary};
+                ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
+                ${tokens.textFieldClearPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary};
+
+                ${tokens.textFieldBackgroundColor}: transparent;
+                ${tokens.textFieldBackgroundColorHover}: transparent;
+                ${tokens.textFieldBackgroundColorFocus}: transparent;
+                ${tokens.textFieldCaretColor}: ${textAccent};
+                ${tokens.textFieldTextBeforeColor}: ${textSecondary};
+                ${tokens.textFieldTextAfterColor}: ${textSecondary};
+                ${tokens.textFieldLabelColor}: ${textPrimary};
+                ${tokens.textFieldLeftHelperColor}: ${textNegative};
+                ${tokens.textFieldTitleCaptionColor}: ${textSecondary};
+                ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary};
+                ${tokens.textFieldFocusColor}: ${textAccent};
+
+                ${tokens.textFieldContentSlotColor}: ${textSecondary};
+                ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};
+                ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};
+                ${tokens.textFieldContentSlotRightColor}: ${textSecondary};
+                ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover};
+                ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive};
+                ${tokens.textFieldColorFocus}: ${textPrimary};
+                ${tokens.textFieldContentSlotColorFocus}: ${textSecondary};
+
+                ${tokens.focusColor}: ${surfaceAccent};
+                ${tokens.textFieldIndicatorColor}: ${surfaceNegative};
+                ${tokens.textFieldOptionalColor}: ${textTertiary};
+
+                ${tokens.textFieldBorderColorHover}: ${outlineNegativeHover};
+                ${tokens.textFieldBorderColorFocus}: ${outlineAccent};
+
+                ${tokens.background}: ${surfaceSolidCard};
+                ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
+                ${tokens.itemBackground}: ${surfaceClear};
+                ${tokens.itemBackgroundHover}: ${surfaceTransparentAccent};
+                ${tokens.itemColor}: ${textPrimary};
+
+                ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary};
+
+                ${tokens.dropdownBorderColor}: ${surfaceSolidPrimary};
+
+                ${tokens.textFieldDividerColor}: ${surfaceNegative};
+                ${tokens.textFieldDividerColorHover}: ${surfaceNegative};
+                ${tokens.textFieldDividerColorFocus}: ${surfaceAccent};
+            `
+        },
+        size: {
+            s: css`
+                ${tokens.textFieldHeight}: 2.5rem;
+                ${tokens.textFieldPadding}: 0.6875rem 0;
+                ${tokens.textFieldBorderRadius}: 0;
+
+                ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem 0;
+                ${tokens.textFieldRightContentMargin}: -0.1875rem 0 -0.1875rem 0.75rem;
+
+                ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;
+                ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
+
+                ${tokens.textFieldFontFamily}: ${bodyM.fontFamily};
+                ${tokens.textFieldFontSize}: ${bodyM.fontSize};
+                ${tokens.textFieldFontStyle}: ${bodyM.fontStyle};
+                ${tokens.textFieldFontWeight}: ${bodyM.fontWeight};
+                ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.textFieldLineHeight}: ${bodyM.lineHeight};
+
+                ${tokens.textFieldLabelOffset}: 0.5rem;
+                ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily};
+                ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize};
+                ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle};
+                ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight};
+                ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight};
+
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
+                ${tokens.textFieldLeftHelperFontFamily}: ${bodyS.fontFamily};
+                ${tokens.textFieldLeftHelperFontSize}: ${bodyS.fontSize};
+                ${tokens.textFieldLeftHelperFontStyle}: ${bodyS.fontStyle};
+                ${tokens.textFieldLeftHelperFontWeight}: ${bodyS.fontWeight};
+                ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.textFieldLeftHelperLineHeight}: ${bodyS.lineHeight};
+                ${tokens.textFieldTitleCaptionMargin}: 0.1875rem;
+                ${tokens.textFieldTitleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.textFieldTitleCaptionFontSize}: ${bodyXS.fontSize};
+                ${tokens.textFieldTitleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.textFieldTitleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.textFieldTitleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.textFieldTitleCaptionLineHeight}: ${bodyXS.lineHeight};
+
+                ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;
+                ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
+
+                ${tokens.textFieldIndicatorSizeInner}: 0.375rem;
+                ${tokens.textFieldIndicatorSizeOuter}: 0.375rem;
+                ${tokens.textFieldIndicatorLabelPlacementInner}: 1.063rem auto auto -0.75rem;
+                ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.3125rem auto auto -0.6875rem;
+                ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 1.063rem -0.75rem auto auto;
+                ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.625rem auto auto;
+                ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.063rem auto auto -0.75rem;
+                ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.063rem -0.75rem auto auto;
+                ${tokens.textFieldClearIndicatorHintInnerRight}: 1.063rem -2.125rem auto auto;
+
+                ${tokens.borderRadius}: 0.75rem;
+                ${tokens.padding}: 0.125rem;
+                ${tokens.itemPadding}: 0.6875rem 0.75rem;
+                ${tokens.itemBorderRadius}: 0.5rem;
+
+                ${tokens.itemFontFamily}: ${bodyM.fontFamily};
+                ${tokens.itemFontSize}: ${bodyM.fontSize};
+                ${tokens.itemFontStyle}: ${bodyM.fontStyle};
+                ${tokens.itemFontWeight}: ${bodyM.fontWeight};
+                ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.itemFontLineHeight}: ${bodyM.lineHeight};
+
+                ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem;
+                ${tokens.emptyStateGap}: 0.25rem;
+
+                ${tokens.infiniteLoaderSpinnerSize}: 1.5rem;
+                ${tokens.infiniteLoaderGap}: 0.25rem;
+
+                ${tokens.dropdownBorderWidth}: 0.125rem;
+            `
+        },
+        labelPlacement: {
+            inner: css`
+                ${tokens.textFieldPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize};
+                ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight};
+            `,
+            outer: css``
+        },
+        disabled: {
+            true: css`
+                ${tokens.itemColor}: ${textSecondary};
+                ${tokens.background}: ${surfaceSolidPrimary};
+                ${tokens.textFieldColor}: ${textSecondary};
+                ${tokens.textFieldLabelColor}: ${textSecondary};
+                ${tokens.textFieldBackgroundColorHover}: ${surfaceSolidPrimary};
+
+                ${tokens.textFieldDividerColor}: ${surfaceSolidPrimary};
+                ${tokens.textFieldDividerColorHover}: ${surfaceSolidPrimary};
+                ${tokens.textFieldDividerColorFocus}: ${surfaceSolidPrimary};
+            `
+        },
+        readOnly: {
+            true: css`
+                ${tokens.textFieldColorReadOnly}: ${textPrimary};
+                ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceClear};
+                ${tokens.textFieldBorderColorReadOnly}: ${surfaceClear};
+                ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary};
+                ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary};
+                ${tokens.textFieldLabelColorReadOnly}: ${textPrimary};
+
+                ${tokens.textFieldDividerColorReadOnly}: ${outlineSolidSecondary};
+                ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary};
+            `
+        }
+    }
+};

package/dist/emotion/es/components/Autocomplete/Autocomplete.config.js

@@ -24,6 +24,7 @@ export const config = {
                 ${tokens.textFieldTextAfterColor}: ${textSecondary};
                 ${tokens.textFieldLabelColor}: ${textPrimary};
                 ${tokens.textFieldLeftHelperColor}: ${textSecondary};
+                ${tokens.textFieldTitleCaptionColor}: ${textSecondary};
                 ${tokens.textFieldFocusColor}: ${textAccent};
 
                 ${tokens.textFieldContentSlotColor}: ${textSecondary};
@@ -67,6 +68,7 @@ export const config = {
                 ${tokens.textFieldTextAfterColor}: ${textSecondary};
                 ${tokens.textFieldLabelColor}: ${textPrimary};
                 ${tokens.textFieldLeftHelperColor}: ${textNegative};
+                ${tokens.textFieldTitleCaptionColor}: ${textSecondary};
                 ${tokens.textFieldFocusColor}: ${textAccent};
 
                 ${tokens.textFieldContentSlotColor}: ${textSecondary};
@@ -122,6 +124,13 @@ export const config = {
                 ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight};
                 ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing};
                 ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight};
+                ${tokens.textFieldTitleCaptionMargin}: 0.1875rem;
+                ${tokens.textFieldTitleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.textFieldTitleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.textFieldTitleCaptionFontSize}: ${bodyXS.fontSize};
+                ${tokens.textFieldTitleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.textFieldTitleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.textFieldTitleCaptionLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.textFieldLeftHelperFontFamily}: ${bodyS.fontFamily};
@@ -198,6 +207,7 @@ export const config = {
                 ${tokens.textFieldBorderColorReadOnly}: ${surfaceClear};
                 ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary};
                 ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary};
+                ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary};
                 ${tokens.textFieldLabelColorReadOnly}: ${textSecondary};
                 ${tokens.textFieldBorderColor}: transparent;
                 ${tokens.textFieldBorderWidth}: 0;

package/dist/emotion/es/components/Autocomplete/Autocomplete.js

@@ -1,8 +1,15 @@
-import { autocompleteConfig, component, mergeConfig, fixedForwardRef } from '@salutejs/plasma-new-hope/emotion';
+import { autocompleteConfig, component, createConditionalComponent, mergeConfig, fixedForwardRef } from '@salutejs/plasma-new-hope/emotion';
 import React from 'react';
 import { config } from './Autocomplete.config';
+import { config as clearConfig } from './Autocomplete.clear.config';
 const mergedConfig = mergeConfig(autocompleteConfig, config);
-export const AutocompleteComponent = component(mergedConfig);
+export const AutocompleteDefault = component(mergedConfig);
+const mergedClearConfig = mergeConfig(autocompleteConfig, clearConfig);
+export const AutocompleteClear = component(mergedClearConfig);
+export const AutocompleteComponent = createConditionalComponent({
+    default: AutocompleteDefault,
+    clear: AutocompleteClear
+});
 const AutocompleteWithoutRef = (props, ref)=>{
     return /*#__PURE__*/ React.createElement(AutocompleteComponent, {
         ...props,

package/dist/emotion/es/components/DatePicker/DatePicker.config.js

@@ -161,6 +161,7 @@ export const config = {
                 ${tokens.textFieldLineHeight}: ${bodyM.lineHeight};
 
                 ${tokens.titleCaptionOffset}: 0;
+                ${tokens.titleCaptionMargin}: 0.1875rem;
                 ${tokens.titleCaptionFontFamily}: ${bodyS.fontFamily};
                 ${tokens.titleCaptionFontSize}: ${bodyS.fontSize};
                 ${tokens.titleCaptionFontStyle}: ${bodyS.fontStyle};

package/dist/emotion/es/components/Drawer/Drawer.config.js

@@ -1,4 +1,4 @@
-import { surfaceSolidCard, textAccent } from '@salutejs/sdds-themes/tokens/sdds_cs';
+import { surfaceSolidCard, surfaceSolidPrimary, surfaceSolidTertiary, surfaceSolidTertiaryActive, surfaceSolidTertiaryHover, textAccent } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, drawerTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -12,6 +12,13 @@ export const config = {
                 ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08);
                 ${drawerTokens.contentBackgroundColor}: ${surfaceSolidCard};
                 ${drawerTokens.closeIconColor}: ${textAccent};
+
+                ${drawerTokens.scrollbarWidth}: 0.25rem;
+                ${drawerTokens.scrollbarOffsetRight}: 0.25rem;
+                ${drawerTokens.scrollbarThumbBackgroundColor}: ${surfaceSolidTertiary};
+                ${drawerTokens.scrollbarThumbBackgroundColorHover}: ${surfaceSolidTertiaryHover};
+                ${drawerTokens.scrollbarThumbBackgroundColorActive}: ${surfaceSolidTertiaryActive};
+                ${drawerTokens.scrollbarTrackBackgroundColor}: ${surfaceSolidPrimary};
             `
         },
         size: {
@@ -38,7 +45,7 @@ export const contentConfig = {
     variations: {
         view: {
             default: css`
-                padding-right: 0;
+                padding-right: 1rem;
             `
         }
     }