@salutejs/plasma-new-hope 0.139.0-canary.1406.10688605172.0 → 0.139.0-canary.1418.10685382771.0

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

@@ -28,9 +28,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
     enumerationType = _ref.enumerationType,
     updateChips = _ref.updateChips,
     onChange = _ref.onChange,
-    onSearch = _ref.onSearch,
-    _ref$onEnterDisabled = _ref.onEnterDisabled,
-    onEnterDisabled = _ref$onEnterDisabled === void 0 ? false : _ref$onEnterDisabled;
+    onSearch = _ref.onSearch;
   var _useState = useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
     activeChipIndex = _useState2[0],
@@ -42,24 +40,22 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
     if (disabled || readOnly) {
       return;
     }
-    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.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.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/Combobox.config.js

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+import { 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-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)
+    }
+  }
+};

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

@@ -0,0 +1,15 @@
+import { comboboxConfig, comboboxItemConfig, comboboxDividerConfig, comboboxFooterConfig, comboboxGroupConfig, comboboxHeaderConfig } from '../../../../components/Combobox';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Combobox.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(comboboxConfig, 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);

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

@@ -0,0 +1,252 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { mergeConfig } from '../../../../engines';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { ComboboxPrimitiveValue, comboboxConfig } from '../../../../components/Combobox';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { IconDone } from '../../../../components/_Icon';
+
+import { Combobox, ComboboxDivider, ComboboxItem } from './Combobox';
+import { config } from './Combobox.config';
+
+const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
+const enumerations: Array<string> = ['comma', 'chip'];
+
+type StorySelectPropsCustom = {
+    skidding?: number;
+    distance?: number;
+};
+
+type StorySelectProps = ComponentProps<typeof Combobox> & StorySelectPropsCustom;
+
+const meta: Meta<StorySelectProps> = {
+    title: 'plasma_b2c/Combobox',
+    decorators: [WithTheme],
+    component: Combobox,
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        enumerationType: {
+            options: enumerations,
+            control: {
+                type: 'select',
+            },
+        },
+        ...argTypesFromConfig(mergeConfig(comboboxConfig, config)),
+    },
+    args: {
+        usePortal: false,
+        disabled: false,
+        readOnly: false,
+        label: 'Label',
+        placeholder: 'Placeholder',
+        enumerationType: 'comma',
+        size: 'm',
+        view: 'default',
+        placement: 'bottom',
+    },
+};
+
+export default meta;
+
+const onChangeAction = action('onChange');
+
+const iconDoneToSelectSizeMap: Record<string, 'xs' | 's'> = {
+    xs: 'xs',
+    s: 's',
+    m: 's',
+    l: 's',
+};
+
+const checkboxToSelectSizeMap: Record<string, 's' | 'm'> = {
+    xs: 's',
+    s: 'm',
+    m: 'm',
+    l: 'm',
+};
+
+const getSelectItems = (slug: string, elemCount: number) =>
+    [...Array(elemCount).keys()].map((num) => ({
+        value: `${slug}_${num}`,
+        child: `${slug} ${num}`,
+    }));
+
+const StorySingle = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args;
+
+    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
+
+    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    return (
+        <div style={{ width: '50%' }}>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="single"
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                onChangeValue={onChangeValue}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                {getSelectItems('item', 6).map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={
+                            item.value === value ? (
+                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
+                            ) : undefined
+                        }
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+export const Single: StoryObj<StorySelectProps> = {
+    render: (args) => <StorySingle {...args} />,
+};
+
+const StoryMultiple = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, enumerationType, size = 'm', view } = args;
+
+    const [value, setValue] = useState<Array<ComboboxPrimitiveValue> | undefined>(['item_2', 'item_3']);
+
+    const onChangeValue = (newValue?: Array<ComboboxPrimitiveValue>) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    return (
+        <div style={{ width: '50%' }}>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="multiple"
+                enumerationType={enumerationType}
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                onChangeValue={onChangeValue}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                {getSelectItems('item', 6).map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={<Checkbox size={checkboxToSelectSizeMap[size]} />}
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+export const Multiple: StoryObj<StorySelectProps> = {
+    render: (args) => <StoryMultiple {...args} />,
+};
+
+const StoryAddCustomItem = (args: StorySelectProps) => {
+    const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args;
+
+    const [opened, setOpened] = useState(false);
+    const [items, setItems] = useState(getSelectItems('item', 1));
+    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
+
+    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
+        setValue(newValue);
+        onChangeAction(newValue);
+    };
+
+    const onToggle = (openValue: boolean) => setOpened(openValue);
+
+    const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        const { code } = event;
+
+        if (code === 'Enter') {
+            const newValue = (event.target as HTMLInputElement).value;
+            const newItems = [...items];
+
+            if (newItems.find((item) => item.child === newValue)) {
+                return;
+            }
+
+            newItems.push({
+                value: `${newValue}_`,
+                child: (newValue || '').toString(),
+            });
+
+            setOpened(false);
+            setItems(newItems);
+        }
+    };
+
+    const filterFunction = () => true;
+
+    return (
+        <div style={{ width: '50%' }}>
+            <Combobox
+                frame="theme-root"
+                usePortal={usePortal}
+                valueType="single"
+                value={value}
+                placement={placement}
+                label={label}
+                placeholder={placeholder}
+                size={size}
+                view={view}
+                disabled={disabled}
+                readOnly={readOnly}
+                opened={opened}
+                onToggle={onToggle}
+                onChangeValue={onChangeValue}
+                onKeyDown={onKeyDown}
+                filterFunction={filterFunction}
+            >
+                <ComboboxItem value={undefined} text="Clear" />
+                <ComboboxDivider />
+                {items.map((item) => (
+                    <ComboboxItem
+                        key={item.value}
+                        contentLeft={
+                            item.value === value ? (
+                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
+                            ) : undefined
+                        }
+                        value={item.value}
+                        text={item.child}
+                    />
+                ))}
+            </Combobox>
+        </div>
+    );
+};
+
+export const AddCustomItem: StoryObj<StorySelectProps> = {
+    render: (args) => <StoryAddCustomItem {...args} />,
+};

package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.js

@@ -0,0 +1,3 @@
+import { composeMask } from '../../../../components/Mask';
+import { TextField } from '../TextField/TextField';
+export var Mask = /*#__PURE__*/composeMask(TextField);

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Mask } from './Mask';
+
+const onChange = action('onChange');
+const onValueChange = action('onValueChange');
+
+const sizes = ['l', 'm', 's', 'xs'];
+const views = ['default', 'positive', 'warning', 'negative'];
+
+const meta: Meta<typeof Mask> = {
+    title: 'plasma_b2c/Mask',
+    component: Mask,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = Omit<
+    ComponentProps<typeof Mask>,
+    | 'helperBlock'
+    | 'contentLeft'
+    | 'htmlSize'
+    | 'contentRight'
+    | 'type'
+    | 'name'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onChange'
+    | 'value'
+    | 'checked'
+    | 'maxLength'
+    | 'minLength'
+    | 'required'
+    | 'enumerationType'
+    | 'chips'
+    | 'onChangeChips'
+>;
+
+const StoryDemo = ({ view, ...rest }: StoryPropsDefault) => {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '50%' }}>
+            <Mask
+                label="Маска телефона"
+                mask="+7 (000) 000 - 0000"
+                maskChar="_"
+                showPrefix={false}
+                view={view}
+                onChange={onChange}
+                onValueChange={onValueChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска телефона: отображается всегда"
+                mask="+7 (000) 000 - 0000"
+                maskChar="_"
+                view={view}
+                alwaysShowMask
+                onChange={onChange}
+                onValueChange={onValueChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска даты"
+                mask="00/00/0000"
+                maskString="DD/MM/YYYY"
+                alwaysShowMask
+                view={view}
+                onChange={onChange}
+                onValueChange={onValueChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска даты: значения по умолчанию"
+                // eslint-disable-next-line no-octal-escape
+                mask="12.\04.0000"
+                maskChar="_"
+                alwaysShowMask
+                view={view}
+                onChange={onChange}
+                onValueChange={onValueChange}
+                {...rest}
+            />
+
+            <Mask
+                label="Маска времени"
+                mask="00:00"
+                maskChar="_"
+                alwaysShowMask
+                view={view}
+                onChange={onChange}
+                onValueChange={onValueChange}
+                {...rest}
+            />
+        </div>
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        size: 'l',
+        view: 'default',
+        labelPlacement: 'outer',
+        placeholder: 'Заполните поле',
+        disabled: false,
+        readOnly: false,
+    },
+    render: (args) => <StoryDemo {...args} />,
+};

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

@@ -103,7 +103,6 @@ const meta: Meta<StorySelectProps> = {
                 'placeholder',
                 'helperText',
                 'isTargetAmount',
-                'closeAfterSelect',
                 'variant',
                 'disabled',
                 'listWidth',
@@ -346,9 +345,6 @@ const SingleStory = (args: StorySelectProps) => {
 
 export const Single: StoryObj<StorySelectProps> = {
     render: (args) => <SingleStory {...args} />,
-    args: {
-        closeAfterSelect: true,
-    },
 };
 
 const MultiselectStory = (args: StorySelectProps) => {
@@ -370,7 +366,6 @@ const MultiselectStory = (args: StorySelectProps) => {
 export const Multiselect: StoryObj<StorySelectProps> = {
     args: {
         multiselect: true,
-        closeAfterSelect: false,
     },
     render: (args) => <MultiselectStory {...args} />,
 };

package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.config.js

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+import { 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(--text-tertiary);", ":var(--text-tertiary-hover);", ":var(--text-tertiary-active);", ":var(--text-accent);", ":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.targetBorderColor, comboboxTokens.targetBorderColorHover, comboboxTokens.targetBorderColorActive, comboboxTokens.targetBorderColorOpen, 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_web/components/Combobox/Combobox.js

@@ -0,0 +1,15 @@
+import { comboboxConfig, comboboxItemConfig, comboboxDividerConfig, comboboxFooterConfig, comboboxGroupConfig, comboboxHeaderConfig } from '../../../../components/Combobox';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Combobox.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(comboboxConfig, 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);