@salutejs/plasma-new-hope 0.143.0-canary.1430.10829478218.0 → 0.143.1-canary.1431.10831152564.0

package/styled-components/es/components/TextField/TextField.styles.js

@@ -21,24 +21,27 @@ export var InputPlaceholder = /*#__PURE__*/styled.div.withConfig({
 export var Label = /*#__PURE__*/styled.label.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-6"
 })(["position:relative;display:inline-flex;"]);
-export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
+var StyledContentSlot = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-7"
-})(["margin:var(", ");line-height:0;"], tokens.leftContentMargin);
-export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
+})(["color:var(", ");line-height:0;"], tokens.contentSlotColor);
+export var StyledContentLeft = /*#__PURE__*/styled(StyledContentSlot).withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-8"
-})(["margin:var(", ");line-height:0;"], tokens.rightContentMargin);
-export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
+})(["margin:var(", ");"], tokens.leftContentMargin);
+export var StyledContentRight = /*#__PURE__*/styled(StyledContentSlot).withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-9"
+})(["margin:var(", ");&:hover{color:var(", ");cursor:pointer;}&:active{color:var(", ");}"], tokens.rightContentMargin, tokens.contentSlotColorHover, tokens.contentSlotColorActive);
+export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-10"
 })([""]);
 export var StyledTextBefore = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-10"
+  componentId: "plasma-new-hope__sc-g4vxbb-11"
 })([""]);
 export var StyledTextAfter = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-11"
+  componentId: "plasma-new-hope__sc-g4vxbb-12"
 })([""]);
 export var StyledOptionalText = /*#__PURE__*/styled.span.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-12"
+  componentId: "plasma-new-hope__sc-g4vxbb-13"
 })(["color:var(", ");"], tokens.optionalColor);
 export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-13"
+  componentId: "plasma-new-hope__sc-g4vxbb-14"
 })(["position:absolute;border-radius:50%;background-color:var(", ");&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, classes.outerLabelPlacement, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, classes.innerLabelPlacement, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);

package/styled-components/es/components/TextField/TextField.template-doc.mdx

@@ -24,12 +24,12 @@ export function App() {
             <TextField
                 placeholder="Положение иконки"
                 defaultValue="Слева"
-                contentLeft={<IconDownload />}
+                contentLeft={<IconDownload color="inherit" />}
             />
             <TextField
                 placeholder="Положение иконки"
                 defaultValue="Справа"
-                contentRight={<IconDownload />}
+                contentRight={<IconDownload color="inherit" />}
             />
         </div>
     );

package/styled-components/es/components/TextField/TextField.tokens.js

@@ -31,7 +31,7 @@ export var tokens = {
   /** Отступ от границы ТextField */
   padding: '--plasma-textfield-padding',
   paddingWithChips: '--plasma-textfield-padding-with-chips',
-  /* Токены для инпута */
+  /* Токены для input */
   leftContentMargin: '--plasma-textfield__left-content-margin',
   rightContentMargin: '--plasma-textfield__right-content-margin',
   fontFamily: '--plasma-textfield-font-family',
@@ -40,6 +40,10 @@ export var tokens = {
   fontWeight: '--plasma-textfield-font-weight',
   letterSpacing: '--plasma-textfield-letter-spacing',
   lineHeight: '--plasma-textfield-line-height',
+  /* Tokens for content slot */
+  contentSlotColor: '--plasma-textfield-content-slot-color',
+  contentSlotColorHover: '--plasma-textfield-content-slot-color-hover',
+  contentSlotColorActive: '--plasma-textfield-content-slot-color-active',
   /** Токены лейбла */
   labelColor: '--plasma-textfield__label-color',
   labelColorReadOnly: '--plasma-textfield__label-color-readonly',

package/styled-components/es/components/TextFieldGroup/TextFieldGroup.template-doc.mdx

@@ -34,7 +34,7 @@ export function App() {
 ### Размер
 Размер TextFieldGroup задается с помощью свойства `size`.
 С помощью свойства `isCommonTextFieldStyles` можно отключить переопределение стилей для всех input внутри группы. 
-Тогда каждкаждый input будет иметь настраиваемый размер. 
+Тогда каждый input будет иметь настраиваемый размер.
 
 ```tsx live
 import React from 'react';

package/styled-components/es/examples/{plasma_web/components/Combobox/ComboboxNew → plasma_b2c/components/Combobox}/Combobox.config.js

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { comboboxNewTokens as tokens } from '../../../../../components/Combobox';
+import { comboboxNewTokens as tokens } from '../../../../components/Combobox';
 export var config = {
   defaults: {
     view: 'default',
@@ -11,7 +11,7 @@ export var config = {
       "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], tokens.textFieldColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly),
       positive: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], tokens.textFieldColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly),
       warning: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], tokens.textFieldColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly),
-      negative: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], tokens.textFieldColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly)
+      negative: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);$", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;"], tokens.textFieldColor, tokens.textFieldBackgroundColor, tokens.textFieldBackgroundColorFocus, tokens.textFieldCaretColor, tokens.textFieldPlaceholderColor, tokens.textFieldTextBeforeColor, tokens.textFieldTextAfterColor, tokens.textFieldLabelColor, tokens.textFieldLeftHelperColor, tokens.textFieldFocusColor, tokens.textFieldChipCloseIconColor, tokens.textFieldChipColor, tokens.textFieldChipBackground, tokens.textFieldChipColorHover, tokens.textFieldChipBackgroundHover, tokens.textFieldChipColorActive, tokens.textFieldChipBackgroundActive, tokens.textFieldChipBackgroundReadOnly, tokens.textFieldChipColorReadOnly, tokens.textFieldChipBackgroundReadOnlyHover, tokens.textFieldChipColorReadOnlyHover, tokens.textFieldChipOpacityReadonly)
     },
     size: {
       l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1rem;", ":0.125rem;", ":0.875rem;", ":1.5rem;", ":1rem 1rem 1rem 0.875rem;", ":0.75rem 1rem 0.75rem 0.875rem;", ":0.75rem;", ":0 0.5rem 0 0;", ":1.5rem;", ":1.5rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.25rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":0.375rem;"], tokens.textFieldHeight, tokens.textFieldPadding, tokens.textFieldPaddingWithChips, tokens.textFieldBorderRadius, tokens.textFieldLeftContentMargin, tokens.textFieldRightContentMargin, tokens.textFieldTextBeforeMargin, tokens.textFieldTextAfterMargin, tokens.textFieldFontFamily, tokens.textFieldFontSize, tokens.textFieldFontStyle, tokens.textFieldFontWeight, tokens.textFieldLetterSpacing, tokens.textFieldLineHeight, tokens.textFieldLabelOffset, tokens.textFieldLabelFontFamily, tokens.textFieldLabelFontSize, tokens.textFieldLabelFontStyle, tokens.textFieldLabelFontWeight, tokens.textFieldLabelLetterSpacing, tokens.textFieldLabelLineHeight, tokens.textFieldLeftHelperOffset, tokens.textFieldLeftHelperFontFamily, tokens.textFieldLeftHelperFontSize, tokens.textFieldLeftHelperFontStyle, tokens.textFieldLeftHelperFontWeight, tokens.textFieldLeftHelperLetterSpacing, tokens.textFieldLeftHelperLineHeight, tokens.textFieldLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, tokens.textFieldChipGap, tokens.textFieldChipBorderRadius, tokens.textFieldChipWidth, tokens.textFieldChipHeight, tokens.textFieldChipPaddingRight, tokens.textFieldChipPaddingLeft, tokens.textFieldChipClearContentMarginLeft, tokens.textFieldChipClearContentMarginRight, tokens.textFieldChipCloseIconSize, tokens.textFieldChipFontFamily, tokens.textFieldChipFontSize, tokens.textFieldChipFontStyle, tokens.textFieldChipFontWeight, tokens.textFieldChipLetterSpacing, tokens.textFieldChipLineHeight, tokens.emptyStatePadding, tokens.padding, tokens.borderRadius, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.itemIconMargin, tokens.itemIconSize, tokens.itemIconSizeTight, tokens.cellPadding, tokens.cellPaddingLeftContent, tokens.cellPaddingContent, tokens.cellPaddingRightContent, tokens.cellTextboxGap, tokens.cellGap, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, tokens.checkboxTriggerSize, tokens.checkboxTriggerSizeTight, tokens.checkboxTriggerBorderRadius, tokens.checkboxTriggerBorderRadiusTight, tokens.checkboxFillColor, tokens.checkboxIconColor, tokens.checkboxTriggerBorderColor, tokens.indicatorSize),

package/styled-components/es/examples/plasma_b2c/components/Combobox/{ComboboxNew/Combobox.js → Combobox.js}

@@ -1,5 +1,5 @@
-import { component, mergeConfig } from '../../../../../engines';
-import { comboboxNewConfig } from '../../../../..';
+import { component, mergeConfig } from '../../../../engines';
+import { comboboxNewConfig } from '../../../..';
 import { config } from './Combobox.config';
 var mergedConfig = /*#__PURE__*/mergeConfig(comboboxNewConfig, config);
 var Combobox = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,376 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { IconDone } from '../../../../components/_Icon';
+
+import { Combobox } from './Combobox';
+
+type StorySelectProps = ComponentProps<typeof Combobox> & {
+    enableContentLeft?: boolean;
+};
+
+const view = ['default', 'positive', 'warning', 'negative'];
+const size = ['xs', 's', 'm', 'l'];
+const labelPlacement = ['inner', 'outer'];
+const variant = ['normal', 'tight'];
+
+const meta: Meta<StorySelectProps> = {
+    title: 'plasma_b2c/Combobox',
+    decorators: [WithTheme],
+    component: Combobox,
+    argTypes: {
+        size: {
+            options: size,
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: view,
+            control: {
+                type: 'select',
+            },
+        },
+        labelPlacement: {
+            options: labelPlacement,
+            control: {
+                type: 'select',
+            },
+        },
+        variant: {
+            options: variant,
+            control: {
+                type: 'select',
+            },
+        },
+        listWidth: {
+            control: {
+                type: 'text',
+            },
+        },
+        listOverflow: {
+            control: {
+                type: 'text',
+            },
+        },
+        listHeight: {
+            control: {
+                type: 'text',
+            },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+            if: { arg: 'alwaysOpened', truthy: false },
+        },
+        readOnly: {
+            control: { type: 'boolean' },
+            if: { arg: 'alwaysOpened', truthy: false },
+        },
+    },
+    args: {
+        label: 'Label',
+        labelPlacement: 'outer',
+        placeholder: 'Placeholder',
+        helperText: 'Helper text',
+        size: 'm',
+        view: 'default',
+        enableContentLeft: false,
+        isTargetAmount: false,
+        variant: 'normal',
+        alwaysOpened: false,
+        disabled: false,
+        readOnly: false,
+    },
+    parameters: {
+        controls: {
+            include: [
+                'size',
+                'view',
+                'enableContentLeft',
+                'label',
+                'labelPlacement',
+                'placeholder',
+                'helperText',
+                'isTargetAmount',
+                'closeAfterSelect',
+                'alwaysOpened',
+                'variant',
+                'disabled',
+                'readOnly',
+                'listWidth',
+                'listOverflow',
+                'listHeight',
+            ],
+        },
+    },
+};
+
+export default meta;
+
+const items = [
+    {
+        value: 'north_america',
+        label: 'Северная Америка',
+    },
+    {
+        value: 'south_america',
+        label: 'Южная Америка',
+        items: [
+            {
+                value: 'brazil',
+                label: 'Бразилия',
+                items: [
+                    {
+                        value: 'rio_de_janeiro',
+                        label: 'Рио-де-Жанейро',
+                    },
+                    {
+                        value: 'sao_paulo',
+                        label: 'Сан-Паулу',
+                    },
+                ],
+            },
+            {
+                value: 'argentina',
+                label: 'Аргентина',
+                items: [
+                    {
+                        value: 'buenos_aires',
+                        label: 'Буэнос-Айрес',
+                    },
+                    {
+                        value: 'cordoba',
+                        label: 'Кордова',
+                    },
+                ],
+            },
+            {
+                value: 'colombia',
+                label: 'Колумбия',
+                items: [
+                    {
+                        value: 'bogota',
+                        label: 'Богота',
+                    },
+                    {
+                        value: 'medellin',
+                        label: 'Медельин',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'europe',
+        label: 'Европа',
+        items: [
+            {
+                value: 'france',
+                label: 'Франция',
+                items: [
+                    {
+                        value: 'paris',
+                        label: 'Париж',
+                    },
+                    {
+                        value: 'lyon',
+                        label: 'Лион',
+                    },
+                ],
+            },
+            {
+                value: 'germany',
+                label: 'Германия',
+                items: [
+                    {
+                        value: 'berlin',
+                        label: 'Берлин',
+                    },
+                    {
+                        value: 'munich',
+                        label: 'Мюнхен',
+                    },
+                ],
+            },
+            {
+                value: 'italy',
+                label: 'Италия',
+                items: [
+                    {
+                        value: 'rome',
+                        label: 'Рим',
+                    },
+                    {
+                        value: 'milan',
+                        label: 'Милан',
+                    },
+                ],
+            },
+            {
+                value: 'spain',
+                label: 'Испания',
+                items: [
+                    {
+                        value: 'madrid',
+                        label: 'Мадрид',
+                    },
+                    {
+                        value: 'barcelona',
+                        label: 'Барселона',
+                    },
+                ],
+            },
+            {
+                value: 'united_kingdom',
+                label: 'Великобритания',
+                items: [
+                    {
+                        value: 'london',
+                        label: 'Лондон',
+                    },
+                    {
+                        value: 'manchester',
+                        label: 'Манчестер',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'asia',
+        label: 'Азия',
+        items: [
+            {
+                value: 'china',
+                label: 'Китай',
+                items: [
+                    {
+                        value: 'beijing',
+                        label: 'Пекин',
+                    },
+                    {
+                        value: 'shanghai',
+                        label: 'Шанхай',
+                    },
+                ],
+            },
+            {
+                value: 'japan',
+                label: 'Япония',
+                items: [
+                    {
+                        value: 'tokyo',
+                        label: 'Токио',
+                    },
+                    {
+                        value: 'osaka',
+                        label: 'Осака',
+                    },
+                ],
+            },
+            {
+                value: 'india',
+                label: 'Индия',
+                items: [
+                    {
+                        value: 'delhi',
+                        label: 'Дели',
+                    },
+                    {
+                        value: 'mumbai',
+                        label: 'Мумбаи',
+                    },
+                ],
+            },
+            {
+                value: 'south_korea',
+                label: 'Южная Корея',
+                items: [
+                    {
+                        value: 'seoul',
+                        label: 'Сеул',
+                    },
+                    {
+                        value: 'busan',
+                        label: 'Пусан',
+                    },
+                ],
+            },
+            {
+                value: 'thailand',
+                label: 'Таиланд',
+                items: [
+                    {
+                        value: 'bangkok',
+                        label: 'Бангкок',
+                    },
+                    {
+                        value: 'phuket',
+                        label: 'Пхукет',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'africa',
+        label: 'Африка',
+        disabled: true,
+    },
+];
+
+const SingleStory = (args: StorySelectProps) => {
+    const [value, setValue] = useState('');
+
+    return (
+        <div style={{ width: '400px' }}>
+            <Combobox
+                {...args}
+                items={items}
+                value={value}
+                onChange={setValue}
+                contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
+                autoComplete="off"
+            />
+        </div>
+    );
+};
+
+export const Single: StoryObj<StorySelectProps> = {
+    render: (args) => <SingleStory {...args} />,
+    args: {
+        closeAfterSelect: true,
+    },
+    parameters: {
+        controls: {
+            exclude: ['isTargetAmount'],
+        },
+    },
+};
+
+const MultipleStory = (args: StorySelectProps) => {
+    const [value, setValue] = useState([]);
+
+    return (
+        <div style={{ width: '400px' }}>
+            <Combobox
+                {...args}
+                multiple
+                items={items}
+                value={value}
+                onChange={setValue}
+                contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
+                autoComplete="off"
+            />
+        </div>
+    );
+};
+
+export const Multiple: StoryObj<StorySelectProps> = {
+    render: (args) => <MultipleStory {...args} />,
+    args: {
+        closeAfterSelect: false,
+    },
+};

package/styled-components/es/examples/plasma_b2c/components/Combobox/{ComboboxOld → Legacy}/Combobox.config.js

@@ -13,7 +13,7 @@ export var config = {
       l: /*#__PURE__*/css(["", ":100%;", ":auto;", ":0.875rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":var(--surface-transparent-tertiary);", ":0.063rem;", ":0;", ":1rem;", ":0;", ":1rem;", ":auto;", ":1.5rem;", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.75rem;", ":1.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1rem;", ":3.5rem;", ":100%;", ":0.875rem;", ":0 3.5rem 0 1.5rem;", ":0 3.625rem 0 0.375rem;", ":0 3.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], comboboxTokens.width, comboboxTokens.height, comboboxTokens.borderRadius, comboboxTokens.paddingTop, comboboxTokens.paddingRight, comboboxTokens.paddingBottom, comboboxTokens.paddingLeft, comboboxTokens.dividerColor, comboboxTokens.dividerHeight, comboboxTokens.dividerMarginTop, comboboxTokens.dividerMarginRight, comboboxTokens.dividerMarginBottom, comboboxTokens.dividerMarginLeft, comboboxTokens.itemWidth, comboboxTokens.itemHeight, comboboxTokens.itemPaddingTop, comboboxTokens.itemPaddingRight, comboboxTokens.itemPaddingBottom, comboboxTokens.itemPaddingLeft, comboboxTokens.itemBorderRadius, comboboxTokens.itemContentLeftWidth, comboboxTokens.itemFontFamily, comboboxTokens.itemFontSize, comboboxTokens.itemFontStyle, comboboxTokens.itemFontWeightBold, comboboxTokens.itemFontLetterSpacing, comboboxTokens.itemFontLineHeight, comboboxTokens.chipGap, comboboxTokens.chipBorderRadius, comboboxTokens.chipWidth, comboboxTokens.chipHeight, comboboxTokens.chipPaddingRight, comboboxTokens.chipPaddingLeft, comboboxTokens.chipClearContentMarginLeft, comboboxTokens.chipClearContentMarginRight, comboboxTokens.chipCloseIconSize, comboboxTokens.chipFontFamily, comboboxTokens.chipFontSize, comboboxTokens.chipFontStyle, comboboxTokens.chipFontWeight, comboboxTokens.chipLetterSpacing, comboboxTokens.chipLineHeight, comboboxTokens.targetArrowRight, comboboxTokens.targetHeight, comboboxTokens.targetWidth, comboboxTokens.targetRadius, comboboxTokens.targetPadding, comboboxTokens.targetPaddingHasChips, comboboxTokens.targetPaddingWithInput, comboboxTokens.targetInnerTop, comboboxTokens.targetLabelInnerTop, comboboxTokens.targetFontFamily, comboboxTokens.targetFontSize, comboboxTokens.targetFontStyle, comboboxTokens.targetFontWeight, comboboxTokens.targetLetterSpacing, comboboxTokens.targetLineHeight, comboboxTokens.targetLabelInnerFontFamily, comboboxTokens.targetLabelInnerFontSize, comboboxTokens.targetLabelInnerFontStyle, comboboxTokens.targetLabelInnerFontWeight, comboboxTokens.targetLabelInnerLetterSpacing, comboboxTokens.targetLabelInnerLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card-brightness);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":0.4;", ":var(--surface-accent);"], comboboxTokens.targetColor, comboboxTokens.targetLabelColor, comboboxTokens.targetArrowColor, comboboxTokens.targetBackgroundColor, comboboxTokens.targetBackgroundColorHover, comboboxTokens.targetBackgroundColorActive, comboboxTokens.targetBackgroundColorOpen, comboboxTokens.background, comboboxTokens.boxShadow, comboboxTokens.itemBackground, comboboxTokens.itemBackgroundHover, comboboxTokens.itemBackgroundSelectedHover, comboboxTokens.itemColor, comboboxTokens.itemContentLeftColor, comboboxTokens.chipCloseIconColor, comboboxTokens.chipColor, comboboxTokens.chipBackground, comboboxTokens.chipColorHover, comboboxTokens.chipBackgroundHover, comboboxTokens.chipColorActive, comboboxTokens.chipBackgroundActive, comboboxTokens.chipBackgroundReadOnly, comboboxTokens.chipColorReadOnly, comboboxTokens.chipBackgroundReadOnlyHover, comboboxTokens.chipColorReadOnlyHover, comboboxTokens.chipOpacityReadonly, comboboxTokens.disabledOpacity, comboboxTokens.focusColor)
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-primary-active);", ":var(--surface-transparent-secondary);", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":0.4;", ":var(--surface-accent);"], comboboxTokens.targetColor, comboboxTokens.targetLabelColor, comboboxTokens.targetArrowColor, comboboxTokens.targetBackgroundColor, comboboxTokens.targetBackgroundColorHover, comboboxTokens.targetBackgroundColorActive, comboboxTokens.targetBackgroundColorOpen, comboboxTokens.background, comboboxTokens.boxShadow, comboboxTokens.itemBackground, comboboxTokens.itemBackgroundHover, comboboxTokens.itemBackgroundSelectedHover, comboboxTokens.itemColor, comboboxTokens.itemContentLeftColor, comboboxTokens.chipCloseIconColor, comboboxTokens.chipColor, comboboxTokens.chipBackground, comboboxTokens.chipColorHover, comboboxTokens.chipBackgroundHover, comboboxTokens.chipColorActive, comboboxTokens.chipBackgroundActive, comboboxTokens.chipBackgroundReadOnly, comboboxTokens.chipColorReadOnly, comboboxTokens.chipBackgroundReadOnlyHover, comboboxTokens.chipColorReadOnlyHover, comboboxTokens.chipOpacityReadonly, comboboxTokens.disabledOpacity, comboboxTokens.focusColor)
     }
   }
 };