@salutejs/plasma-new-hope 0.191.2-canary.1557.11803291365.0 → 0.192.0-canary.1550.11799501370.0

package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.styles.js

@@ -3,57 +3,51 @@ import { classes, tokens, constants } from '../../../../Select.tokens';
 import { addFocus, applyEllipsis } from '../../../../../../mixins';
 import { component, mergeConfig } from '../../../../../../engines';
 import { checkboxConfig, checkboxTokens } from '../../../../../Checkbox';
+import { cellConfig, cellTokens } from '../../../../../Cell';
 import { indicatorConfig, indicatorTokens } from '../../../../../Indicator';
 var mergedCheckboxConfig = /*#__PURE__*/mergeConfig(checkboxConfig);
 var Checkbox = /*#__PURE__*/component(mergedCheckboxConfig);
-export var StyledCheckbox = /*#__PURE__*/styled(Checkbox).withConfig({
-  componentId: "plasma-new-hope__sc-fr2h0y-0"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxIconColor, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor);
+var mergedCellConfig = /*#__PURE__*/mergeConfig(cellConfig);
+var Cell = /*#__PURE__*/component(mergedCellConfig);
 var mergedIndicatorConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
 var Indicator = /*#__PURE__*/component(mergedIndicatorConfig);
-export var StyledIndicator = /*#__PURE__*/styled(Indicator).withConfig({
+export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-fr2h0y-0"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");width:100%;& div.cell-content,& div.cell-textbox{flex:1;}& div.cell-textbox-title{position:relative;}& div.cell-textbox-title:before{content:' ';visibility:hidden;}& div.cell-textbox-title span{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], cellTokens.cellTitleColor, constants.cellTitleColor, cellTokens.cellBackgroundColor, constants.cellBackgroundColor, cellTokens.cellPadding, tokens.cellPadding, cellTokens.cellPaddingLeftContent, tokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, tokens.cellPaddingContent, cellTokens.cellPaddingRightContent, tokens.cellPaddingRightContent, cellTokens.cellTextboxGap, tokens.cellTextboxGap, cellTokens.cellGap, tokens.cellGap, cellTokens.cellTitleFontFamily, tokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, tokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, tokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, tokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, tokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, tokens.cellTitleLineHeight);
+export var StyledCell = /*#__PURE__*/styled(Cell).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-1"
-})(["", ":var(", ");", ":var(", ");"], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.checkboxFillColor);
-export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
+})([""]);
+export var StyledCheckbox = /*#__PURE__*/styled(Checkbox).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-2"
-})(["display:inline-flex;"]);
-export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxIconColor, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor);
+export var StyledIndicator = /*#__PURE__*/styled(Indicator).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-3"
-})(["margin-left:auto;display:inline-flex;"]);
+})(["", ":var(", ");", ":var(", ");"], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.checkboxFillColor);
 export var DisclosureIconWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-4"
 })(["line-height:0;color:var(", ");&:hover{color:var(", ");}"], tokens.disclosureIconColor, tokens.disclosureIconColorHover);
 export var IconWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-5"
-})(["display:flex;align-items:center;justify-content:center;width:", ";height:", ";margin:var(", ");line-height:0;color:var(", ");& .", "{--plasma-checkbox-trigger-size:", ";--plasma-checkbox-trigger-border-radius:", ";}"], function (_ref) {
+})(["display:flex;align-items:center;justify-content:center;flex:none;width:", ";height:", ";margin:var(", ");line-height:0;color:var(", ");"], function (_ref) {
   var variant = _ref.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
 }, function (_ref2) {
   var variant = _ref2.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
-}, tokens.itemIconMargin, tokens.checkboxFillColor, classes.selectItemCheckbox, function (_ref3) {
-  var variant = _ref3.variant;
-  return "var(".concat(variant === 'tight' ? tokens.checkboxTriggerSizeTight : tokens.checkboxTriggerSize, ")");
-}, function (_ref4) {
-  var variant = _ref4.variant;
-  return "var(".concat(variant === 'tight' ? tokens.checkboxTriggerBorderRadiusTight : tokens.checkboxTriggerBorderRadius, ")");
-});
+}, tokens.itemIconMargin, tokens.checkboxFillColor);
 export var StyledText = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-6"
-})(["", ";flex:1;color:", ";"], /*#__PURE__*/applyEllipsis(), function (_ref5) {
-  var color = _ref5.color;
-  return color || 'inherit';
-});
+})(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
 export var Wrapper = /*#__PURE__*/styled.li.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-7"
-})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(--text-primary);border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], tokens.itemHeight, function (_ref6) {
-  var variant = _ref6.variant;
+})(["display:flex;align-items:center;min-height:var(", ");margin:0 calc(0.125rem + var(", ",0rem));box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");color:var(--text-primary);border-radius:calc(var(", ") - 0.125rem - var(", ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], tokens.itemHeight, tokens.dropdownBorderWidth, function (_ref3) {
+  var variant = _ref3.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding, ")");
-}, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.itemBorderRadius, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
+}, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.borderRadius, tokens.dropdownBorderWidth, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
   outlineSize: '0.0625rem',
   outlineOffset: '0',
   outlineColor: /*#__PURE__*/"var(".concat(constants.focusColor, ")"),
-  outlineRadius: /*#__PURE__*/"var(".concat(tokens.itemBorderRadius, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.borderRadius, ") - 0.125rem - var(").concat(tokens.dropdownBorderWidth, ", 0rem))"),
   hasTransition: false,
   customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n            }\n        ")
 }));

package/styled-components/es/components/Select/ui/Target/Target.js

@@ -1,24 +1,35 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
+import { useForkRef } from '@salutejs/plasma-core';
 import { Button, Textfield } from './ui';
-export var Target = function Target(_ref) {
+export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
+    target = _ref.target,
     opened = _ref.opened,
     valueToItemMap = _ref.valueToItemMap,
-    onChipClick = _ref.onChipClick,
     label = _ref.label,
     placeholder = _ref.placeholder,
     onKeyDown = _ref.onKeyDown,
-    focusedChipIndex = _ref.focusedChipIndex,
     labelPlacement = _ref.labelPlacement,
     size = _ref.size,
     contentLeft = _ref.contentLeft,
     disabled = _ref.disabled,
     renderValue = _ref.renderValue,
-    focusedPath = _ref.focusedPath,
-    focusedToValueMap = _ref.focusedToValueMap,
     selectProps = _ref.selectProps,
+    inputWrapperRef = _ref.inputWrapperRef,
+    multiselect = _ref.multiselect,
+    view = _ref.view,
+    handleClickArrow = _ref.handleClickArrow,
+    helperText = _ref.helperText,
+    treeId = _ref.treeId,
+    activeDescendantItemValue = _ref.activeDescendantItemValue,
+    isTargetAmount = _ref.isTargetAmount,
+    onChange = _ref.onChange,
+    labelToItemMap = _ref.labelToItemMap,
+    chipView = _ref.chipView,
     separator = _ref.separator;
-  return selectProps.target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
+  var buttonRef = useForkRef(ref, inputWrapperRef);
+  return target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
+    ref: buttonRef,
     opened: opened,
     value: value,
     valueToItemMap: valueToItemMap,
@@ -27,26 +38,33 @@ export var Target = function Target(_ref) {
     size: size,
     disabled: disabled,
     renderValue: renderValue,
-    focusedPath: focusedPath,
-    focusedToValueMap: focusedToValueMap,
     selectProps: selectProps,
-    separator: separator
+    separator: separator,
+    treeId: treeId,
+    activeDescendantItemValue: activeDescendantItemValue
   }) : /*#__PURE__*/React.createElement(Textfield, {
+    ref: ref,
+    inputWrapperRef: inputWrapperRef,
     opened: opened,
+    multiselect: multiselect,
     value: value,
-    valueToItemMap: valueToItemMap,
-    onChipClick: onChipClick,
     label: label,
     placeholder: placeholder,
     onKeyDown: onKeyDown,
-    focusedChipIndex: focusedChipIndex,
     labelPlacement: labelPlacement,
     size: size,
+    view: view,
+    handleClickArrow: handleClickArrow,
     contentLeft: contentLeft,
+    helperText: helperText,
+    treeId: treeId,
+    activeDescendantItemValue: activeDescendantItemValue,
     disabled: disabled,
+    isTargetAmount: isTargetAmount,
+    valueToItemMap: valueToItemMap,
     renderValue: renderValue,
-    focusedPath: focusedPath,
-    focusedToValueMap: focusedToValueMap,
-    selectProps: selectProps
+    onChange: onChange,
+    labelToItemMap: labelToItemMap,
+    chipView: chipView
   });
-};
+});

package/styled-components/es/components/Select/ui/Target/ui/Button/Button.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { cx } from '../../../../../../utils';
 import { classes } from '../../../../Select.tokens';
-import { getButtonLabel, sizeToIconSize } from '../../../../utils';
+import { getButtonLabel, getItemId, sizeToIconSize } from '../../../../utils';
 import { StyledButton, StyledArrow, Label, ButtonWrapper, IconArrowWrapper } from './Button.styles';
-export var Button = function Button(_ref) {
+export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var opened = _ref.opened,
     value = _ref.value,
     valueToItemMap = _ref.valueToItemMap,
@@ -12,18 +12,12 @@ export var Button = function Button(_ref) {
     size = _ref.size,
     disabled = _ref.disabled,
     renderValue = _ref.renderValue,
-    focusedPath = _ref.focusedPath,
-    focusedToValueMap = _ref.focusedToValueMap,
-    selectProps = _ref.selectProps;
+    selectProps = _ref.selectProps,
+    treeId = _ref.treeId,
+    activeDescendantItemValue = _ref.activeDescendantItemValue;
   var withArrowInverse = opened ? classes.arrowInverse : undefined;
-  var getActiveDescendant = function getActiveDescendant() {
-    var _focusedToValueMap$ge;
-    var focusedPathAsString = focusedPath.reduce(function (acc, n) {
-      return "".concat(acc, "/").concat(n);
-    }, '').replace(/^(\/)/, '');
-    return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
-  };
   return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(StyledButton, {
+    ref: ref,
     stretching: "filled",
     onKeyDown: onKeyDown,
     className: opened ? classes.selectWithoutBoxShadow : undefined,
@@ -34,9 +28,10 @@ export var Button = function Button(_ref) {
       className: cx(classes.selectTargetArrow, withArrowInverse)
     })),
     role: "combobox",
-    "aria-controls": "tree_level_1",
+    "aria-autocomplete": "list",
+    "aria-controls": "".concat(treeId, "_tree_level_1"),
     "aria-expanded": opened,
-    "aria-activedescendant": getActiveDescendant(),
+    "aria-activedescendant": activeDescendantItemValue ? getItemId(treeId, activeDescendantItemValue) : '',
     "aria-label": label,
     renderTarget: Boolean(selectProps.renderTarget)
   }, selectProps.renderTarget ? selectProps.renderTarget(Array.isArray(value) ? value.map(function (value) {
@@ -48,4 +43,4 @@ export var Button = function Button(_ref) {
     renderValue: renderValue,
     selectProps: selectProps
   }))));
-};
+});

package/styled-components/es/components/Select/ui/Target/ui/Button/Button.styles.js

@@ -8,13 +8,13 @@ var mergedButtonConfig = /*#__PURE__*/mergeConfig(buttonConfig);
 var Button = /*#__PURE__*/component(mergedButtonConfig);
 export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
   componentId: "plasma-new-hope__sc-38cqi1-0"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":600;", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");text-align:left;"], buttonTokens.buttonColor, tokens.targetButtonColor, buttonTokens.buttonColorHover, tokens.targetButtonColorHover, buttonTokens.buttonColorActive, tokens.targetButtonColorActive, buttonTokens.buttonBackgroundColor, tokens.targetButtonBackgroundColor, buttonTokens.buttonBackgroundColorHover, tokens.targetButtonBackgroundColorHover, buttonTokens.buttonBackgroundColorActive, tokens.targetButtonBackgroundColorActive, buttonTokens.buttonRightContentMargin, tokens.targetButtonArrowMargin, buttonTokens.buttonHeight, function (_ref) {
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":600;", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");text-align:left;"], buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive, buttonTokens.buttonRightContentMargin, tokens.buttonArrowMargin, buttonTokens.buttonHeight, function (_ref) {
   var renderTarget = _ref.renderTarget;
   return renderTarget ? 'auto' : "var(".concat(tokens.targetHeight, ")");
-}, buttonTokens.buttonWidth, buttonTokens.buttonPadding, tokens.targetButtonPadding, buttonTokens.buttonRadius, tokens.borderRadius, buttonTokens.buttonFontFamily, tokens.fontFamily, buttonTokens.buttonFontSize, tokens.fontSize, buttonTokens.buttonFontStyle, tokens.fontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, tokens.fontLetterSpacing, buttonTokens.buttonLineHeight, tokens.fontLineHeight, buttonTokens.buttonDisabledOpacity, constants.opacity, buttonTokens.buttonFocusColor, constants.focusColor);
+}, buttonTokens.buttonWidth, buttonTokens.buttonPadding, tokens.buttonPadding, buttonTokens.buttonRadius, tokens.borderRadius, buttonTokens.buttonFontFamily, tokens.fontFamily, buttonTokens.buttonFontSize, tokens.fontSize, buttonTokens.buttonFontStyle, tokens.fontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, tokens.fontLetterSpacing, buttonTokens.buttonLineHeight, tokens.fontLineHeight, buttonTokens.buttonDisabledOpacity, constants.opacity, buttonTokens.buttonFocusColor, constants.focusColor);
 export var IconArrowWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-38cqi1-1"
-})(["line-height:0;color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], tokens.targetButtonArrowColor, tokens.targetButtonArrowColorHover, tokens.targetButtonArrowColorActive);
+})(["line-height:0;color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], tokens.buttonArrowColor, tokens.buttonArrowColorHover, tokens.buttonArrowColorActive);
 export var StyledArrow = /*#__PURE__*/styled(IconDisclosureDownCentered).withConfig({
   componentId: "plasma-new-hope__sc-38cqi1-2"
 })(["transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"]);

package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.js

@@ -1,109 +1,96 @@
-import React from 'react';
-import { cx, isEmpty } from '../../../../../../utils';
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { forwardRef } from 'react';
+import { sizeToIconSize, getItemId } from '../../../../utils';
 import { classes } from '../../../../Select.tokens';
-import { sizeToIconSize } from '../../../../utils';
-import { Chip } from './ui';
-import { StyledButton, StyledArrow, Wrapper, ChipWrapper, TextfieldWrapper, IconArrowWrapper, Label, Placeholder, InnerLabel, InnerLabelWrapper, ContentLeftWrapper, Value } from './Textfield.styles';
-var getLabel = function getLabel(_ref) {
-  var value = _ref.value,
-    isTargetAmount = _ref.isTargetAmount,
-    valueToItemMap = _ref.valueToItemMap,
-    onChipClick = _ref.onChipClick,
+import { IconArrowWrapper, StyledArrow, StyledTextField } from './Textfield.styles';
+export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _valueToItemMap$get;
+  var inputWrapperRef = _ref.inputWrapperRef,
+    opened = _ref.opened,
+    multiselect = _ref.multiselect,
+    value = _ref.value,
     label = _ref.label,
     placeholder = _ref.placeholder,
-    focusedChipIndex = _ref.focusedChipIndex,
+    onKeyDown = _ref.onKeyDown,
     labelPlacement = _ref.labelPlacement,
     size = _ref.size,
-    renderValue = _ref.renderValue;
-  if (isEmpty(value) && typeof value !== 'number') {
-    if (!label || labelPlacement === 'outer') {
-      return /*#__PURE__*/React.createElement(Placeholder, null, placeholder);
-    }
-    return /*#__PURE__*/React.createElement(Label, null, label);
-  }
-  if (Array.isArray(value) && isTargetAmount) {
-    return /*#__PURE__*/React.createElement(Chip, {
-      text: "\u0412\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(value.length),
-      isTargetAmount: isTargetAmount
-    });
-  }
-  if (Array.isArray(value)) {
-    return value.map(function (currentValue, index) {
-      var itemLabel = valueToItemMap.get(currentValue).label;
-      return /*#__PURE__*/React.createElement(Chip, {
-        text: renderValue ? renderValue(valueToItemMap.get(currentValue)) : itemLabel,
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          onChipClick(currentValue.toString());
-        },
-        focused: focusedChipIndex === index
-      });
-    });
-  }
-  var itemLabel = valueToItemMap.get(value).label;
-  if (!label || labelPlacement === 'outer') {
-    return /*#__PURE__*/React.createElement(Value, null, renderValue ? renderValue(valueToItemMap.get(value)) : itemLabel);
-  }
-  return /*#__PURE__*/React.createElement(InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/React.createElement(InnerLabel, null, label), /*#__PURE__*/React.createElement(Value, null, renderValue ? renderValue(valueToItemMap.get(value)) : itemLabel));
-};
-export var Textfield = function Textfield(_ref2) {
-  var opened = _ref2.opened,
-    value = _ref2.value,
-    valueToItemMap = _ref2.valueToItemMap,
-    onChipClick = _ref2.onChipClick,
-    label = _ref2.label,
-    placeholder = _ref2.placeholder,
-    onKeyDown = _ref2.onKeyDown,
-    focusedChipIndex = _ref2.focusedChipIndex,
-    labelPlacement = _ref2.labelPlacement,
-    size = _ref2.size,
-    contentLeft = _ref2.contentLeft,
-    disabled = _ref2.disabled,
-    renderValue = _ref2.renderValue,
-    focusedPath = _ref2.focusedPath,
-    focusedToValueMap = _ref2.focusedToValueMap,
-    selectProps = _ref2.selectProps;
+    view = _ref.view,
+    handleClickArrow = _ref.handleClickArrow,
+    contentLeft = _ref.contentLeft,
+    helperText = _ref.helperText,
+    treeId = _ref.treeId,
+    activeDescendantItemValue = _ref.activeDescendantItemValue,
+    disabled = _ref.disabled,
+    isTargetAmount = _ref.isTargetAmount,
+    valueToItemMap = _ref.valueToItemMap,
+    renderValue = _ref.renderValue,
+    onChange = _ref.onChange,
+    labelToItemMap = _ref.labelToItemMap,
+    chipView = _ref.chipView;
   var withArrowInverse = opened ? classes.arrowInverse : undefined;
-  var getActiveDescendant = function getActiveDescendant() {
-    var _focusedToValueMap$ge;
-    var focusedPathAsString = focusedPath.reduce(function (acc, n) {
-      return "".concat(acc, "/").concat(n);
-    }, '').replace(/^(\/)/, '');
-    return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
+  var getChips = function getChips() {
+    if (multiselect && Array.isArray(value)) {
+      if (value.length === 0) return [];
+      if (isTargetAmount) {
+        return ["\u0412\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(value.length)];
+      }
+      var renderValueMapper = renderValue && function (stringValue) {
+        return renderValue(valueToItemMap.get(stringValue));
+      };
+      var valueToItemMapper = function valueToItemMapper(stringValue) {
+        return valueToItemMap.get(stringValue).label;
+      };
+      return value.map(renderValueMapper || valueToItemMapper);
+    }
+    return [];
   };
-  return /*#__PURE__*/React.createElement(TextfieldWrapper, {
-    opened: opened,
-    value: value
-  }, /*#__PURE__*/React.createElement(StyledButton, {
-    stretching: "filled",
-    className: cx(classes.textfieldTarget, opened || focusedChipIndex !== null ? classes.selectWithoutBoxShadow : undefined),
-    onKeyDown: onKeyDown,
+
+  // Обработчик чипов
+  var handleChipsChange = function handleChipsChange(chipLabels) {
+    onChange(chipLabels.map(function (chipLabel) {
+      return labelToItemMap.get(chipLabel).value;
+    }));
+  };
+  return /*#__PURE__*/React.createElement(StyledTextField, _extends({
+    ref: ref,
+    inputWrapperRef: inputWrapperRef,
+    readOnly: true,
+    value: multiselect ? undefined : ((_valueToItemMap$get = valueToItemMap.get(value.toString())) === null || _valueToItemMap$get === void 0 ? void 0 : _valueToItemMap$get.label) || '',
+    size: size,
+    view: view,
+    chipView: chipView,
+    labelPlacement: labelPlacement,
     disabled: disabled,
+    label: label,
+    placeholder: value instanceof Array && value.length ? '' : placeholder,
+    contentLeft: contentLeft,
+    contentRight: /*#__PURE__*/React.createElement(IconArrowWrapper, {
+      disabled: Boolean(disabled),
+      onClick: handleClickArrow
+    }, /*#__PURE__*/React.createElement(StyledArrow, {
+      color: "inherit",
+      size: sizeToIconSize(size),
+      className: withArrowInverse
+    })),
+    onKeyDown: onKeyDown,
+    leftHelper: helperText,
     role: "combobox",
-    "aria-controls": "tree_level_1",
+    "aria-autocomplete": "list",
+    "aria-controls": "".concat(treeId, "_tree_level_1"),
     "aria-expanded": opened,
-    "aria-activedescendant": getActiveDescendant(),
-    "aria-label": label,
-    renderTarget: Boolean(selectProps.renderTarget)
-  }, /*#__PURE__*/React.createElement(Wrapper, null, selectProps !== null && selectProps !== void 0 && selectProps.renderTarget ? selectProps.renderTarget(Array.isArray(value) ? value.map(function (value) {
-    return valueToItemMap.get(value);
-  }) : valueToItemMap.get(value)) : /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && (!selectProps.multiselect || isEmpty(value)) && /*#__PURE__*/React.createElement(ContentLeftWrapper, null, contentLeft), /*#__PURE__*/React.createElement(ChipWrapper, {
-    multiselect: selectProps.multiselect,
-    value: value
-  }, getLabel({
-    value: value,
-    valueToItemMap: valueToItemMap,
-    onChipClick: onChipClick,
-    focusedChipIndex: focusedChipIndex,
-    label: label,
-    labelPlacement: labelPlacement,
-    placeholder: placeholder,
-    isTargetAmount: selectProps.isTargetAmount,
-    renderValue: renderValue,
-    size: size
-  }))), /*#__PURE__*/React.createElement(IconArrowWrapper, null, /*#__PURE__*/React.createElement(StyledArrow, {
-    size: sizeToIconSize(size),
-    color: "inherit",
-    className: cx(classes.selectTargetArrow, withArrowInverse)
-  })))));
-};
+    "aria-activedescendant": activeDescendantItemValue ? getItemId(treeId, activeDescendantItemValue) : ''
+  }, multiselect ? {
+    enumerationType: 'chip',
+    chips: getChips(),
+    onChangeChips: handleChipsChange
+  } : {
+    enumerationType: 'plain'
+  }, {
+    onEnterDisabled: true // Пропс для отключения обработчика Enter внутри Textfield
+    ,
+    opened: opened
+    // TODO: #1547
+    ,
+    _forceChipManipulationWithReadonly: true
+  }));
+});

package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js

@@ -1,69 +1,31 @@
 import styled from 'styled-components';
-import { isEmpty } from '../../../../../../utils';
-import { applyEllipsis, addFocus } from '../../../../../../mixins';
-import { IconDisclosureDownCentered } from '../../../../../_Icon';
 import { component, mergeConfig } from '../../../../../../engines';
-import { buttonConfig, buttonTokens } from '../../../../../Button';
-import { tokens, classes, constants } from '../../../../Select.tokens';
-var mergedButtonConfig = /*#__PURE__*/mergeConfig(buttonConfig);
-var Button = /*#__PURE__*/component(mergedButtonConfig);
-export var TextfieldWrapper = /*#__PURE__*/styled.div.withConfig({
+import { textFieldConfig, textFieldTokens } from '../../../../../TextField';
+import { tokens, classes } from '../../../../Select.tokens';
+import { IconDisclosureDownCentered } from '../../../../../_Icon';
+var mergedConfig = /*#__PURE__*/mergeConfig(textFieldConfig);
+var TextField = /*#__PURE__*/component(mergedConfig);
+export var StyledTextField = /*#__PURE__*/styled(TextField).withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-0"
-})(["display:inline;.", "{transition:100ms;background:", ";padding:", ";border:", ";}.", ":hover{transition:100ms;border:", ";}.", "::before{box-shadow:none !important;}"], classes.textfieldTarget, function (_ref) {
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":", ";", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");& div.input-wrapper:focus-within{background-color:var(", ");}"], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.borderColor, tokens.textFieldBorderColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.labelColor, tokens.textFieldLabelColor, textFieldTokens.leftHelperColor, tokens.textFieldLeftHelperColor, textFieldTokens.colorReadOnly, tokens.textFieldColor, textFieldTokens.backgroundColorReadOnly, function (_ref) {
   var opened = _ref.opened;
-  return opened ? "var(".concat(tokens.targetTextfieldBackgroundColorOpened, ")") : "var(".concat(tokens.targetTextfieldBackgroundColor, ")");
-}, function (_ref2) {
-  var value = _ref2.value;
-  return Array.isArray(value) && !isEmpty(value) ? "0 var(".concat(tokens.targetTextfieldChipPadding, ")") : "0 var(".concat(tokens.targetTextfieldPadding, ")");
-}, function (_ref3) {
+  return opened ? "var(".concat(tokens.textFieldBackgroundColorFocus, ")") : "var(".concat(tokens.textFieldBackgroundColor, ")");
+}, textFieldTokens.placeholderColorReadOnly, function (_ref2) {
+  var opened = _ref2.opened;
+  return opened ? "var(".concat(tokens.textFieldPlaceholderColorFocus, ")") : "var(".concat(tokens.textFieldPlaceholderColor, ")");
+}, textFieldTokens.leftHelperColorReadOnly, tokens.textFieldLeftHelperColor, textFieldTokens.labelColorReadOnly, tokens.textFieldLabelColor, textFieldTokens.borderColorReadOnly, function (_ref3) {
   var opened = _ref3.opened;
-  return opened ? "var(".concat(tokens.targetTextfieldBorderSize, ") solid var(").concat(tokens.targetTextfieldBorderOpenedColor, ")") : "var(".concat(tokens.targetTextfieldBorderSize, ") solid var(").concat(tokens.targetTextfieldBorderColor, ")");
-}, classes.textfieldTarget, function (_ref4) {
-  var opened = _ref4.opened;
-  return opened ? "var(".concat(tokens.targetTextfieldBorderSize, ") solid var(").concat(tokens.targetTextfieldBorderOpenedColor, ")") : "var(".concat(tokens.targetTextfieldBorderSize, ") solid var(").concat(tokens.targetTextfieldBorderColorHover, ")");
-}, classes.selectWithoutBoxShadow);
-export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
+  return opened ? "var(".concat(tokens.textFieldBorderColorFocus, ")") : "var(".concat(tokens.textFieldBorderColor, ")");
+}, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.borderColorHover, tokens.textFieldBorderColorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorFocus, textFieldTokens.optionalColor, tokens.textFieldOptionalColor, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.paddingWithChips, tokens.textFieldPaddingWithChips, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.contentSlotColor, tokens.textFieldContentSlotColor, textFieldTokens.contentSlotColorHover, tokens.textFieldContentSlotColorHover, textFieldTokens.contentSlotColorActive, tokens.textFieldContentSlotColorActive, textFieldTokens.contentSlotRightColor, tokens.textFieldContentSlotRightColor, textFieldTokens.contentSlotRightColorHover, tokens.textFieldContentSlotRightColorHover, textFieldTokens.contentSlotRightColorActive, tokens.textFieldContentSlotRightColorActive, textFieldTokens.labelOffset, tokens.textFieldLabelOffset, textFieldTokens.labelFontFamily, tokens.textFieldLabelFontFamily, textFieldTokens.labelFontStyle, tokens.textFieldLabelFontStyle, textFieldTokens.labelFontSize, tokens.textFieldLabelFontSize, textFieldTokens.labelFontWeight, tokens.textFieldLabelFontWeight, textFieldTokens.labelLetterSpacing, tokens.textFieldLabelLetterSpacing, textFieldTokens.labelLineHeight, tokens.textFieldLabelLineHeight, textFieldTokens.labelInnerFontFamily, tokens.textFieldLabelInnerFontFamily, textFieldTokens.labelInnerFontStyle, tokens.textFieldLabelInnerFontStyle, textFieldTokens.labelInnerFontSize, tokens.textFieldLabelInnerFontSize, textFieldTokens.labelInnerFontWeight, tokens.textFieldLabelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, tokens.textFieldLabelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, tokens.textFieldLabelInnerLineHeight, textFieldTokens.labelInnerPadding, tokens.textFieldLabelInnerPadding, textFieldTokens.contentLabelInnerPadding, tokens.textFieldContentLabelInnerPadding, textFieldTokens.titleCaptionColor, tokens.textFieldTitleCaptionColor, textFieldTokens.titleCaptionInnerLabelOffset, tokens.textFieldTitleCaptionInnerLabelOffset, textFieldTokens.titleCaptionFontFamily, tokens.textFieldTitleCaptionFontFamily, textFieldTokens.titleCaptionFontStyle, tokens.textFieldTitleCaptionFontStyle, textFieldTokens.titleCaptionFontSize, tokens.textFieldTitleCaptionFontSize, textFieldTokens.titleCaptionFontWeight, tokens.textFieldTitleCaptionFontWeight, textFieldTokens.titleCaptionLetterSpacing, tokens.textFieldTitleCaptionLetterSpacing, textFieldTokens.titleCaptionLineHeight, tokens.textFieldTitleCaptionLineHeight, textFieldTokens.leftHelperOffset, tokens.textFieldLeftHelperOffset, textFieldTokens.leftHelperFontFamily, tokens.textFieldLeftHelperFontFamily, textFieldTokens.leftHelperFontStyle, tokens.textFieldLeftHelperFontStyle, textFieldTokens.leftHelperFontSize, tokens.textFieldLeftHelperFontSize, textFieldTokens.leftHelperFontWeight, tokens.textFieldLeftHelperFontWeight, textFieldTokens.leftHelperLetterSpacing, tokens.textFieldLeftHelperLetterSpacing, textFieldTokens.leftHelperLineHeight, tokens.textFieldLeftHelperLineHeight, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, textFieldTokens.disabledOpacity, tokens.textFieldDisabledOpacity, textFieldTokens.chipHeight, tokens.textFieldChipHeight, textFieldTokens.chipBorderRadius, tokens.textFieldChipBorderRadius, textFieldTokens.chipGap, tokens.textFieldChipGap, textFieldTokens.chipColor, tokens.textFieldChipColor, textFieldTokens.chipColorHover, tokens.textFieldChipColorHover, textFieldTokens.chipScaleHover, tokens.textFieldChipScaleHover, textFieldTokens.chipBackground, tokens.textFieldChipBackground, textFieldTokens.chipBackgroundActive, tokens.textFieldChipBackgroundActive, textFieldTokens.chipColorActive, tokens.textFieldChipColorActive, textFieldTokens.chipScaleActive, tokens.textFieldChipScaleActive, textFieldTokens.chipCloseIconColor, tokens.textFieldChipCloseIconColor, textFieldTokens.chipOutlineSize, tokens.textFieldChipOutlineSize, textFieldTokens.chipWidth, tokens.textFieldChipWidth, textFieldTokens.chipPaddingTop, tokens.textFieldChipPaddingTop, textFieldTokens.chipPaddingRight, tokens.textFieldChipPaddingRight, textFieldTokens.chipPaddingBottom, tokens.textFieldChipPaddingBottom, textFieldTokens.chipPaddingLeft, tokens.textFieldChipPaddingLeft, textFieldTokens.chipCloseIconSize, tokens.textFieldChipCloseIconSize, textFieldTokens.chipFontFamily, tokens.textFieldChipFontFamily, textFieldTokens.chipFontSize, tokens.textFieldChipFontSize, textFieldTokens.chipFontStyle, tokens.textFieldChipFontStyle, textFieldTokens.chipFontWeight, tokens.textFieldChipFontWeight, textFieldTokens.chipLetterSpacing, tokens.textFieldChipLetterSpacing, textFieldTokens.chipLineHeight, tokens.textFieldChipLineHeight, textFieldTokens.chipColorReadOnly, tokens.textFieldChipColor, textFieldTokens.chipColorReadOnlyHover, tokens.textFieldChipColor, textFieldTokens.chipBackgroundReadOnly, tokens.textFieldChipBackground, textFieldTokens.chipBackgroundReadOnlyHover, tokens.textFieldChipBackgroundHover, textFieldTokens.chipClearContentMarginLeft, tokens.textFieldChipClearContentMarginLeft, textFieldTokens.chipClearContentMarginRight, tokens.textFieldChipClearContentMarginRight, textFieldTokens.focusColor, tokens.textFieldFocusColor, tokens.textFieldBackgroundColorFocus);
+export var IconArrowWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-1"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");box-shadow:inset 0 0 0 ", " var(", ");text-align:left;", ""], buttonTokens.buttonColor, constants.textfieldTargetColor, buttonTokens.buttonColorHover, constants.textfieldTargetColor, buttonTokens.buttonColorActive, constants.textfieldTargetColor, buttonTokens.buttonHeight, function (_ref5) {
-  var renderTarget = _ref5.renderTarget;
-  return renderTarget ? 'auto' : "var(".concat(tokens.targetHeight, ")");
-}, buttonTokens.buttonWidth, buttonTokens.buttonPadding, tokens.targetTextfieldPadding, buttonTokens.buttonRadius, tokens.borderRadius, buttonTokens.buttonFontFamily, tokens.fontFamily, buttonTokens.buttonFontSize, tokens.fontSize, buttonTokens.buttonFontStyle, tokens.fontStyle, buttonTokens.buttonFontWeight, tokens.fontWeight, buttonTokens.buttonLetterSpacing, tokens.fontLetterSpacing, buttonTokens.buttonLineHeight, tokens.fontLineHeight, buttonTokens.buttonDisabledOpacity, constants.opacity, buttonTokens.buttonFocusColor, constants.focusColor, tokens.targetTextfieldBorderSize, tokens.targetTextfieldBorderColor, /*#__PURE__*/addFocus({
-  outlineOffset: tokens.targetTextfieldBorderSize,
-  outlineSize: constants.focusSize,
-  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.borderRadius, ") - ").concat(tokens.targetTextfieldBorderSize, ")"),
-  outlineColor: /*#__PURE__*/"var(".concat(constants.focusColor, ")")
-}));
+})(["line-height:0;color:var(", ");cursor:", ";.", "{transform:rotate(-180deg);}&:hover,&:active{color:", ";}"], tokens.disclosureIconColor, function (_ref4) {
+  var disabled = _ref4.disabled;
+  return disabled ? 'inherit' : 'pointer';
+}, classes.arrowInverse, function (_ref5) {
+  var disabled = _ref5.disabled;
+  return disabled ? "var(".concat(tokens.disclosureIconColor, ")") : "var(".concat(tokens.disclosureIconColorHover, ")");
+});
 export var StyledArrow = /*#__PURE__*/styled(IconDisclosureDownCentered).withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-2"
-})([""]);
-export var IconArrowWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1akl2tk-3"
-})(["line-height:0;margin:var(", ");color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], tokens.targetTextfieldArrowMargin, tokens.targetTextfieldArrowColor, tokens.targetTextfieldArrowColorHover, tokens.targetTextfieldArrowColorActive);
-export var Wrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1akl2tk-4"
-})(["width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;.", "{transform:rotate(-180deg);}"], classes.arrowInverse);
-export var ChipWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1akl2tk-5"
-})(["width:100%;display:flex;min-width:0;padding:", ";gap:0.25rem;overflow-x:scroll;border-top-right-radius:var(", ");border-bottom-right-radius:var(", ");-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none;}"], function (_ref6) {
-  var multiselect = _ref6.multiselect,
-    value = _ref6.value;
-  return "calc(".concat(constants.focusSize, " + ").concat(multiselect && value && value.toString().length > 0 ? "var(".concat(tokens.focusOffset, ")") : 0, ")");
-}, tokens.chipBorderRadius, tokens.chipBorderRadius);
-export var Label = /*#__PURE__*/styled.label.withConfig({
-  componentId: "plasma-new-hope__sc-1akl2tk-6"
-})(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], constants.textfieldInnerLabelColor, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight);
-export var Placeholder = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1akl2tk-7"
-})(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], constants.textfieldPlaceholderColor, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight);
-export var InnerLabelWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1akl2tk-8"
-})(["display:flex;flex-direction:column;align-items:start;row-gap:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.innerLabelGap, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight);
-export var InnerLabel = /*#__PURE__*/styled.label.withConfig({
-  componentId: "plasma-new-hope__sc-1akl2tk-9"
-})(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");text-align:left;"], constants.textfieldInnerLabelColor, constants.fontFamily, constants.fontSize, constants.fontStyle, constants.fontWeight, constants.fontLetterSpacing, constants.fontLineHeight);
-export var ContentLeftWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1akl2tk-10"
-})(["flex:none;margin-left:-0.125rem;margin-right:0.375rem;line-height:0;color:var(", ",--text-secondary);"], tokens.contentLeftColor);
-export var Value = /*#__PURE__*/styled.span.withConfig({
-  componentId: "plasma-new-hope__sc-1akl2tk-11"
-})(["", ""], /*#__PURE__*/applyEllipsis());
+})([""]);

package/styled-components/es/components/Select/utils/getFallbackPlacements.js

@@ -0,0 +1,8 @@
+export var getFallbackPlacements = function getFallbackPlacements(placement) {
+  if (placement instanceof Array) {
+    return placement.map(function (p) {
+      return "".concat(p, "-start");
+    });
+  }
+  return undefined;
+};

package/styled-components/es/components/Select/utils/getItemId.js

@@ -0,0 +1,3 @@
+export var getItemId = function getItemId(treeId, value) {
+  return "".concat(treeId, "-").concat(value);
+};

package/styled-components/es/components/Select/utils/getPlacement.js

@@ -0,0 +1,6 @@
+export var getPlacement = function getPlacement(placement) {
+  if (placement instanceof Array) {
+    return undefined;
+  }
+  return "".concat(placement, "-start");
+};

package/styled-components/es/components/Select/utils/getView.js

@@ -1,4 +1,4 @@
-export var getView = function getView(status) {
+export var getView = function getView(status, view) {
   switch (status) {
     case 'success':
       {
@@ -14,7 +14,7 @@ export var getView = function getView(status) {
       }
     default:
       {
-        return 'default';
+        return view;
       }
   }
 };

package/styled-components/es/components/Select/utils/index.js

@@ -6,4 +6,7 @@ export { sizeToIconSize } from './sizeToIconSize';
 export { getCorrectHeight } from './getCorrectHeight';
 export { getButtonLabel } from './getButtonLabel';
 export { getView } from './getView';
-export { getInitialValue } from './getInitialValue';
+export { getInitialValue } from './getInitialValue';
+export { getPlacement } from './getPlacement';
+export { getFallbackPlacements } from './getFallbackPlacements';
+export { getItemId } from './getItemId';