@salutejs/plasma-new-hope 0.135.0-canary.1404.10631789671.0 → 0.135.0-canary.1406.10630457005.0

package/styled-components/es/components/TextField/hooks/useKeyNavigation.js

@@ -28,7 +28,9 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
     enumerationType = _ref.enumerationType,
     updateChips = _ref.updateChips,
     onChange = _ref.onChange,
-    onSearch = _ref.onSearch;
+    onSearch = _ref.onSearch,
+    _ref$onEnterDisabled = _ref.onEnterDisabled,
+    onEnterDisabled = _ref$onEnterDisabled === void 0 ? false : _ref$onEnterDisabled;
   var _useState = useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
     activeChipIndex = _useState2[0],
@@ -40,22 +42,24 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
     if (disabled || readOnly) {
       return;
     }
-    if (event.key === Keys.Enter && enumerationType === 'chip' && value) {
-      var nextIndex = (chips === null || chips === void 0 ? void 0 : chips.length) || 0;
-      var newChips = [].concat(_toConsumableArray(chips), [{
-        id: "".concat(nextIndex, "_").concat(value),
-        text: value
-      }]);
-      var newValues = newChips.map(function (_ref3) {
-        var text = _ref3.text;
-        return text;
-      });
-      updateChips(newChips, newValues);
-      event.target.value = '';
-      onChange === null || onChange === void 0 || onChange(event);
-    }
-    if (event.key === Keys.Enter && onSearch) {
-      onSearch(value, event);
+    if (event.key === Keys.Enter && !onEnterDisabled) {
+      if (enumerationType === 'chip' && value) {
+        var nextIndex = (chips === null || chips === void 0 ? void 0 : chips.length) || 0;
+        var newChips = [].concat(_toConsumableArray(chips), [{
+          id: "".concat(nextIndex, "_").concat(value),
+          text: value
+        }]);
+        var newValues = newChips.map(function (_ref3) {
+          var text = _ref3.text;
+          return text;
+        });
+        updateChips(newChips, newValues);
+        event.target.value = '';
+        onChange === null || onChange === void 0 || onChange(event);
+      }
+      if (onSearch) {
+        onSearch(value, event);
+      }
     }
     if (event.key === Keys.Backspace && chips.length && (inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.selectionStart) === 0) {
       var _newChips = _toConsumableArray(chips);

package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxNew/Combobox.config.js

@@ -0,0 +1,35 @@
+import { css } from 'styled-components';
+import { comboboxNewTokens as tokens } from '../../../../../components/Combobox';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    // readOnly: false,
+    // disabled: false,
+    labelPlacement: 'outer'
+  },
+  variations: {
+    view: {
+      "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)
+    },
+    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);", ":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.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),
+      m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":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);", ":0.625rem;", ":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);", ":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.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":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);", ":0.125rem;", ":0.75rem;", ":1.5rem;", ":0.75rem 0.75rem 0.75rem 0.75rem;", ":0.5rem 0.75rem 0.5rem 0.75rem;", ":0.625rem;", ":0 0.375rem 0 0;", ":1.5rem;", ":1.5rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":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);", ":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);", ":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.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),
+      s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":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);", ":0.5rem;", ":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);", ":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.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":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);", ":0.125rem;", ":0.625rem;", ":1.5rem;", ":0.5rem 0.75rem 0.5rem 0.675rem;", ":0.25rem 0.75rem 0.25rem 0.675rem;", ":0.5rem;", ":1.5rem;", ":1rem;", ":0 0.375rem 0 0;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":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);", ":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);", ":1.25rem;", ":0.875rem;", ":0.375rem;", ":0.25rem;", ":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.padding, tokens.borderRadius, tokens.itemHeight, tokens.itemPadding, tokens.itemPaddingTight, tokens.itemBorderRadius, tokens.itemIconSize, tokens.itemIconSizeTight, tokens.itemIconMargin, 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),
+      xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":-0.0625rem 0.25rem -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-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.375rem;", ":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.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.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":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.125rem;", ":0.5rem;", ":1rem;", ":0.5rem 0.5rem 0.5rem 0.375rem;", ":0.25rem 0.5rem 0.25rem 0.375rem;", ":0.375rem;", ":0 0.25rem 0 0;", ":1rem;", ":1rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":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);", ":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);", ":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.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)
+    },
+    labelPlacement: {
+      inner: /*#__PURE__*/css(["", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--plasma-colors-secondary)));", ":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);"], tokens.textFieldPlaceholderColor, tokens.textFieldLabelInnerFontFamily, tokens.textFieldLabelInnerFontSize, tokens.textFieldLabelInnerFontStyle, tokens.textFieldLabelInnerFontWeight, tokens.textFieldLabelInnerLetterSpacing, tokens.textFieldLabelInnerLineHeight),
+      outer: /*#__PURE__*/css([""])
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], tokens.textFieldDisabledOpacity)
+    },
+    readOnly: {
+      "true": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], tokens.textFieldColorReadOnly, tokens.textFieldBackgroundColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, tokens.textFieldLeftHelperColorReadOnly, tokens.textFieldLabelColorReadOnly)
+    }
+  }
+};

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

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

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

@@ -0,0 +1,393 @@
+import React, { useState, useRef } 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 chip = ['default', 'secondary', 'accent'];
+const variant = ['normal', 'tight'];
+
+const meta: Meta<StorySelectProps> = {
+    title: 'plasma_b2c/ComboboxNew',
+    decorators: [WithTheme],
+    component: Combobox,
+    argTypes: {
+        size: {
+            options: size,
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: view,
+            control: {
+                type: 'select',
+            },
+        },
+        labelPlacement: {
+            options: labelPlacement,
+            control: {
+                type: 'select',
+            },
+        },
+        chipView: {
+            options: chip,
+            control: {
+                type: 'select',
+            },
+        },
+        variant: {
+            options: variant,
+            control: {
+                type: 'select',
+            },
+        },
+        listWidth: {
+            control: {
+                type: 'text',
+            },
+        },
+        listOverflow: {
+            control: {
+                type: 'text',
+            },
+        },
+        listHeight: {
+            control: {
+                type: 'text',
+            },
+        },
+    },
+    args: {
+        label: 'Label',
+        labelPlacement: 'outer',
+        placeholder: 'Placeholder',
+        helperText: 'Helper text',
+        size: 'm',
+        view: 'default',
+        chipView: 'default',
+        enableContentLeft: false,
+        isTargetAmount: false,
+        variant: 'normal',
+        disabled: false,
+        readOnly: false,
+    },
+    parameters: {
+        controls: {
+            include: [
+                'size',
+                'view',
+                'chipView',
+                'enableContentLeft',
+                'label',
+                'labelPlacement',
+                'placeholder',
+                'helperText',
+                'isTargetAmount',
+                'variant',
+                'disabled',
+                'readOnly',
+                'listWidth',
+                'listOverflow',
+                'listHeight',
+            ],
+        },
+    },
+};
+
+export default meta;
+
+const items = [
+    {
+        value: 'north_america',
+        label: 'Северная Америка',
+    },
+    {
+        value: 'south_america',
+        label: 'Южная Америка',
+        contentLeft: <IconDone size="s" />,
+        contentRight: <IconDone size="s" />,
+        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: 'Африка',
+        isDisabled: true,
+    },
+];
+
+function generateMockData(depth, count) {
+    const generateItems = (currentDepth) => {
+        if (currentDepth > depth) return null;
+
+        return Array.from({ length: 3 }, (_, subIndex) => {
+            const currentValue = `level_${currentDepth}_item_${subIndex + 1}`;
+            return {
+                value: currentValue,
+                label: `Label for ${currentValue}`,
+                items: generateItems(currentDepth + 1),
+            };
+        });
+    };
+
+    return Array.from({ length: count }, (_, index) => ({
+        value: `country_${index + 1}`,
+        label: `Country ${index + 1}`,
+        items: generateItems(2), // Start from depth 2 since the first level is the country
+    }));
+}
+
+const mockData = generateMockData(5, 100);
+
+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} />,
+    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} />,
+};

package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.config.js

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+import { comboboxOldTokens as comboboxTokens } from '../../../../../components/Combobox';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    size: {
+      xs: /*#__PURE__*/css(["", ":100%;", ":auto;", ":0.5rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":var(--surface-transparent-tertiary);", ":0.063rem;", ":0;", ":0.5rem;", ":0;", ":0.375rem;", ":auto;", ":1rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":0.375rem;", ":1.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.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":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.5rem;", ":2rem;", ":100%;", ":0.5rem;", ":0 2.5rem 0 0.75rem;", ":0 2.625rem 0 0.375rem;", ":0 2.625rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":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);", ":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);"], 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),
+      s: /*#__PURE__*/css(["", ":100%;", ":auto;", ":0.625rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":var(--surface-transparent-tertiary);", ":0.063rem;", ":0;", ":0.75rem;", ":0;", ":0.75rem;", ":auto;", ":1.5rem;", ":0.5rem;", ":0.75rem;", ":0.5rem;", ":0.75rem;", ":0.5rem;", ":1.75rem;", ":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);", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":0.75rem;", ":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);", ":0.75rem;", ":2.5rem;", ":100%;", ":0.625rem;", ":0 3rem 0 1rem;", ":0 3.125rem 0 0.375rem;", ":0 3.125rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":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);", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-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),
+      m: /*#__PURE__*/css(["", ":100%;", ":auto;", ":0.75rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":0.125rem;", ":var(--surface-transparent-tertiary);", ":0.063rem;", ":0;", ":0.875rem;", ":0;", ":0.875rem;", ":auto;", ":1.5rem;", ":0.75rem;", ":0.875rem;", ":0.75rem;", ":0.875rem;", ":0.625rem;", ":1.75rem;", ":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);", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.875rem;", ":0.625rem;", ":0.5rem;", ":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);", ":0.875rem;", ":3rem;", ":100%;", ":0.75rem;", ":0 3.25rem 0 1.25rem;", ":0 3.375rem 0 0.375rem;", ":0 3.375rem 0 0.625rem;", ":0.5rem;", ":0.375rem;", ":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);", ":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);"], 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),
+      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);", ":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)
+    }
+  }
+};

package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.js

@@ -0,0 +1,15 @@
+import { comboboxOldConfig, comboboxItemConfig, comboboxDividerConfig, comboboxFooterConfig, comboboxGroupConfig, comboboxHeaderConfig } from '../../../../../components/Combobox';
+import { component, mergeConfig } from '../../../../../engines';
+import { config } from './Combobox.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(comboboxOldConfig, config);
+export var Combobox = /*#__PURE__*/component(mergedConfig);
+var mergedItemConfig = /*#__PURE__*/mergeConfig(comboboxItemConfig);
+export var ComboboxItem = /*#__PURE__*/component(mergedItemConfig);
+var mergedDividerConfig = /*#__PURE__*/mergeConfig(comboboxDividerConfig);
+export var ComboboxDivider = /*#__PURE__*/component(mergedDividerConfig);
+var mergedFooterConfig = /*#__PURE__*/mergeConfig(comboboxFooterConfig);
+export var ComboboxFooter = /*#__PURE__*/component(mergedFooterConfig);
+var mergedGroupConfig = /*#__PURE__*/mergeConfig(comboboxGroupConfig);
+export var ComboboxGroup = /*#__PURE__*/component(mergedGroupConfig);
+var mergedHeaderConfig = /*#__PURE__*/mergeConfig(comboboxHeaderConfig);
+export var ComboboxHeader = /*#__PURE__*/component(mergedHeaderConfig);