@salutejs/plasma-new-hope 0.190.0-canary.1550.11795356464.0 → 0.190.0-dev.0

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

@@ -3,51 +3,57 @@ 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);
-var mergedCellConfig = /*#__PURE__*/mergeConfig(cellConfig);
-var Cell = /*#__PURE__*/component(mergedCellConfig);
+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 mergedIndicatorConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
 var Indicator = /*#__PURE__*/component(mergedIndicatorConfig);
-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({
+export var StyledIndicator = /*#__PURE__*/styled(Indicator).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-1"
-})([""]);
-export var StyledCheckbox = /*#__PURE__*/styled(Checkbox).withConfig({
+})(["", ":var(", ");", ":var(", ");"], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.checkboxFillColor);
+export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-2"
-})(["", ":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({
+})(["display:inline-flex;"]);
+export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-3"
-})(["", ":var(", ");", ":var(", ");"], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.checkboxFillColor);
+})(["margin-left:auto;display:inline-flex;"]);
 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;flex:none;width:", ";height:", ";margin:var(", ");line-height:0;color:var(", ");"], function (_ref) {
+})(["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) {
   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);
+}, 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, ")");
+});
 export var StyledText = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-6"
-})(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
+})(["", ";flex:1;color:", ";"], /*#__PURE__*/applyEllipsis(), function (_ref5) {
+  var color = _ref5.color;
+  return color || 'inherit';
+});
 export var Wrapper = /*#__PURE__*/styled.li.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-7"
-})(["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;
+})(["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;
   return "var(".concat(variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding, ")");
-}, 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({
+}, 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({
   outlineSize: '0.0625rem',
   outlineOffset: '0',
   outlineColor: /*#__PURE__*/"var(".concat(constants.focusColor, ")"),
-  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.borderRadius, ") - 0.125rem - var(").concat(tokens.dropdownBorderWidth, ", 0rem))"),
+  outlineRadius: /*#__PURE__*/"var(".concat(tokens.itemBorderRadius, ")"),
   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,35 +1,24 @@
-import React, { forwardRef } from 'react';
-import { useForkRef } from '@salutejs/plasma-core';
+import React from 'react';
 import { Button, Textfield } from './ui';
-export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var Target = function Target(_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;
-  var buttonRef = useForkRef(ref, inputWrapperRef);
-  return target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
-    ref: buttonRef,
+  return selectProps.target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
     opened: opened,
     value: value,
     valueToItemMap: valueToItemMap,
@@ -38,33 +27,26 @@ export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
     size: size,
     disabled: disabled,
     renderValue: renderValue,
+    focusedPath: focusedPath,
+    focusedToValueMap: focusedToValueMap,
     selectProps: selectProps,
-    separator: separator,
-    treeId: treeId,
-    activeDescendantItemValue: activeDescendantItemValue
+    separator: separator
   }) : /*#__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,
-    onChange: onChange,
-    labelToItemMap: labelToItemMap,
-    chipView: chipView
+    focusedPath: focusedPath,
+    focusedToValueMap: focusedToValueMap,
+    selectProps: selectProps
   });
-});
+};

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

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { cx } from '../../../../../../utils';
 import { classes } from '../../../../Select.tokens';
-import { getButtonLabel, getItemId, sizeToIconSize } from '../../../../utils';
+import { getButtonLabel, sizeToIconSize } from '../../../../utils';
 import { StyledButton, StyledArrow, Label, ButtonWrapper, IconArrowWrapper } from './Button.styles';
-export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var Button = function Button(_ref) {
   var opened = _ref.opened,
     value = _ref.value,
     valueToItemMap = _ref.valueToItemMap,
@@ -12,12 +12,18 @@ export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     size = _ref.size,
     disabled = _ref.disabled,
     renderValue = _ref.renderValue,
-    selectProps = _ref.selectProps,
-    treeId = _ref.treeId,
-    activeDescendantItemValue = _ref.activeDescendantItemValue;
+    focusedPath = _ref.focusedPath,
+    focusedToValueMap = _ref.focusedToValueMap,
+    selectProps = _ref.selectProps;
   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,
@@ -28,10 +34,9 @@ export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className: cx(classes.selectTargetArrow, withArrowInverse)
     })),
     role: "combobox",
-    "aria-autocomplete": "list",
-    "aria-controls": "".concat(treeId, "_tree_level_1"),
+    "aria-controls": "tree_level_1",
     "aria-expanded": opened,
-    "aria-activedescendant": activeDescendantItemValue ? getItemId(treeId, activeDescendantItemValue) : '',
+    "aria-activedescendant": getActiveDescendant(),
     "aria-label": label,
     renderTarget: Boolean(selectProps.renderTarget)
   }, selectProps.renderTarget ? selectProps.renderTarget(Array.isArray(value) ? value.map(function (value) {
@@ -43,4 +48,4 @@ export var Button = /*#__PURE__*/forwardRef(function (_ref, 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.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(", ");", ":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 renderTarget = _ref.renderTarget;
   return renderTarget ? 'auto' : "var(".concat(tokens.targetHeight, ")");
-}, 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);
+}, 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);
 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.buttonArrowColor, tokens.buttonArrowColorHover, tokens.buttonArrowColorActive);
+})(["line-height:0;color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], tokens.targetButtonArrowColor, tokens.targetButtonArrowColorHover, tokens.targetButtonArrowColorActive);
 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,96 +1,109 @@
-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 React from 'react';
+import { cx, isEmpty } from '../../../../../../utils';
 import { classes } from '../../../../Select.tokens';
-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,
+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,
     label = _ref.label,
     placeholder = _ref.placeholder,
-    onKeyDown = _ref.onKeyDown,
+    focusedChipIndex = _ref.focusedChipIndex,
     labelPlacement = _ref.labelPlacement,
     size = _ref.size,
-    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 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);
+    renderValue = _ref.renderValue;
+  if (isEmpty(value) && typeof value !== 'number') {
+    if (!label || labelPlacement === 'outer') {
+      return /*#__PURE__*/React.createElement(Placeholder, null, placeholder);
     }
-    return [];
-  };
-
-  // Обработчик чипов
-  var handleChipsChange = function handleChipsChange(chipLabels) {
-    onChange(chipLabels.map(function (chipLabel) {
-      return labelToItemMap.get(chipLabel).value;
-    }));
+    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;
+  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(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
-    })),
+  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,
-    leftHelper: helperText,
+    disabled: disabled,
     role: "combobox",
-    "aria-autocomplete": "list",
-    "aria-controls": "".concat(treeId, "_tree_level_1"),
+    "aria-controls": "tree_level_1",
     "aria-expanded": opened,
-    "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
-  }));
-});
+    "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)
+  })))));
+};

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

@@ -1,31 +1,69 @@
 import styled from 'styled-components';
-import { component, mergeConfig } from '../../../../../../engines';
-import { textFieldConfig, textFieldTokens } from '../../../../../TextField';
-import { tokens, classes } from '../../../../Select.tokens';
+import { isEmpty } from '../../../../../../utils';
+import { applyEllipsis, addFocus } from '../../../../../../mixins';
 import { IconDisclosureDownCentered } from '../../../../../_Icon';
-var mergedConfig = /*#__PURE__*/mergeConfig(textFieldConfig);
-var TextField = /*#__PURE__*/component(mergedConfig);
-export var StyledTextField = /*#__PURE__*/styled(TextField).withConfig({
+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({
   componentId: "plasma-new-hope__sc-1akl2tk-0"
-})(["", ":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[class^='InputWrapper']: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) {
+})(["display:inline;.", "{transition:100ms;background:", ";padding:", ";border:", ";}.", ":hover{transition:100ms;border:", ";}.", "::before{box-shadow:none !important;}"], classes.textfieldTarget, function (_ref) {
   var opened = _ref.opened;
-  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) {
+  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) {
   var opened = _ref3.opened;
-  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({
+  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({
   componentId: "plasma-new-hope__sc-1akl2tk-1"
-})(["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, ")");
-});
+})(["", ":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, ")")
+}));
 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/ui/Target/ui/Textfield/ui/Chip/Chip.js

@@ -0,0 +1,28 @@
+var _div;
+import React, { useEffect, useRef } from 'react';
+import { classes } from '../../../../../../Select.tokens';
+import { StyledChip } from './Chip.styles';
+export var Chip = function Chip(_ref) {
+  var text = _ref.text,
+    onClick = _ref.onClick,
+    focused = _ref.focused,
+    isTargetAmount = _ref.isTargetAmount;
+  var ref = useRef(null);
+  useEffect(function () {
+    if (focused && ref.current) {
+      ref.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center'
+      });
+    }
+  }, [focused]);
+  return /*#__PURE__*/React.createElement(StyledChip, {
+    contentClearButton: isTargetAmount && (_div || (_div = /*#__PURE__*/React.createElement("div", null))),
+    tabIndex: -1,
+    onClick: onClick,
+    text: "".concat(text),
+    className: focused ? classes.selectChipIsFocused : undefined,
+    ref: ref
+  });
+};

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { chipConfig, chipTokens } from '../../../../../../../Chip';
+import { component, mergeConfig } from '../../../../../../../../engines';
+import { tokens, classes, constants } from '../../../../../../Select.tokens';
+import { addFocus } from '../../../../../../../../mixins';
+var mergedConfig = /*#__PURE__*/mergeConfig(chipConfig);
+var Chip = /*#__PURE__*/component(mergedConfig);
+export var StyledChip = /*#__PURE__*/styled(Chip).withConfig({
+  componentId: "plasma-new-hope__sc-1mtedco-0"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ";"], chipTokens.color, tokens.chipColor, chipTokens.colorHover, tokens.chipColor, chipTokens.colorActive, tokens.chipColor, chipTokens.background, tokens.chipBackground, chipTokens.backgroundHover, tokens.chipBackgroundHover, chipTokens.backgroundActive, tokens.chipBackgroundActive, chipTokens.borderRadius, tokens.chipBorderRadius, chipTokens.height, tokens.chipHeight, chipTokens.paddingRight, tokens.chipPaddingRight, chipTokens.paddingLeft, tokens.chipPaddingLeft, chipTokens.fontFamily, tokens.fontFamily, chipTokens.fontSize, tokens.fontSize, chipTokens.fontStyle, tokens.fontStyle, chipTokens.fontWeight, tokens.fontWeight, chipTokens.letterSpacing, tokens.fontLetterSpacing, chipTokens.lineHeight, tokens.fontLineHeight, chipTokens.clearContentMarginLeft, tokens.chipClearContentMarginLeft, chipTokens.clearContentMarginRight, tokens.chipClearContentMarginRight, chipTokens.closeIconSize, tokens.chipCloseIconSize, chipTokens.closeIconColor, tokens.chipColor, chipTokens.focusColor, constants.focusColor, /*#__PURE__*/addFocus({
+  outlineOffset: /*#__PURE__*/"calc(var(".concat(tokens.focusOffset, ") * -1)"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.chipBorderRadius, ") + var(").concat(tokens.focusOffset, "))"),
+  customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.selectChipIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 ").concat(constants.focusSize, " var(").concat(constants.focusColor, ");\n            }\n        ")
+}));

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

@@ -0,0 +1 @@
+export * from './Chip/Chip';