@salutejs/plasma-new-hope 0.93.0-canary.1224.9666441939.0 → 0.93.0-canary.1233.9692693420.0

package/styled-components/cjs/components/Select/elements/SelectNotFoundContent/SelectNotFoundContent.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectNotFoundContent = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _SelectNotFoundContent = /*#__PURE__*/require("./SelectNotFoundContent.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var SelectNotFoundContent = exports.SelectNotFoundContent = function SelectNotFoundContent(_ref) {
+  var icon = _ref.icon,
+    description = _ref.description,
+    buttonText = _ref.buttonText,
+    buttonAction = _ref.buttonAction;
+  return /*#__PURE__*/_react["default"].createElement(_SelectNotFoundContent.Wrapper, null, /*#__PURE__*/_react["default"].createElement(_SelectNotFoundContent.ContentWrapper, null, icon, /*#__PURE__*/_react["default"].createElement(_SelectNotFoundContent.Description, null, description), buttonText && /*#__PURE__*/_react["default"].createElement(_SelectNotFoundContent.StyledButton, {
+    stretching: "filled",
+    onClick: buttonAction
+  }, buttonText)));
+};

package/styled-components/cjs/components/Select/elements/SelectNotFoundContent/SelectNotFoundContent.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.StyledButton = exports.Description = exports.ContentWrapper = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
+var _Button = /*#__PURE__*/require("../../../Button");
+var _Select = /*#__PURE__*/require("../../Select.tokens");
+var _engines = /*#__PURE__*/require("../../../../engines");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var mergedButtonConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Button.buttonConfig);
+var Button = /*#__PURE__*/(0, _engines.component)(mergedButtonConfig);
+var StyledButton = exports.StyledButton = /*#__PURE__*/(0, _styledComponents["default"])(Button).withConfig({
+  componentId: "plasma-new-hope__sc-rmrk0o-0"
+})(["", ":var(--text-primary);", ":var(--text-primary-active);", ":var(--text-primary-hover);", ":none;", ":var(", ");", ":0;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":600;", ":var(", ");", ":var(", ");"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonHeight, _Select.tokens.targetHeight, _Button.buttonTokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Select.tokens.borderRadius, _Button.buttonTokens.buttonFontFamily, _Select.tokens.fontFamily, _Button.buttonTokens.buttonFontSize, _Select.tokens.fontSize, _Button.buttonTokens.buttonFontStyle, _Select.tokens.fontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Select.tokens.fontLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Select.tokens.fontLineHeight);
+var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-rmrk0o-1"
+})(["background:var(", ");box-shadow:var(", ");border-radius:var(", ");padding:var(", ");"], _Select.constants.background, _Select.constants.boxShadow, _Select.tokens.borderRadius, _Select.tokens.padding);
+var ContentWrapper = exports.ContentWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-rmrk0o-2"
+})(["display:flex;flex-direction:column;align-items:center;width:100%;box-sizing:border-box;padding:var(", ");"], _Select.tokens.notFoundContentPadding);
+var Description = exports.Description = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-rmrk0o-3"
+})(["margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _Select.tokens.notFoundContentGap, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight);

package/styled-components/cjs/components/Select/elements/Target/Target.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Target = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _Button = /*#__PURE__*/require("./elements/Button/Button");
+var _Textfield = /*#__PURE__*/require("./elements/Textfield/Textfield");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Target = exports.Target = function Target(_ref) {
+  var value = _ref.value,
+    multiselect = _ref.multiselect,
+    isTargetAmount = _ref.isTargetAmount,
+    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;
+  return target === 'button' ? /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    opened: opened,
+    value: value,
+    isTargetAmount: isTargetAmount,
+    multiselect: multiselect,
+    valueToItemMap: valueToItemMap,
+    onKeyDown: onKeyDown,
+    label: label,
+    size: size,
+    disabled: disabled,
+    renderValue: renderValue,
+    focusedPath: focusedPath,
+    focusedToValueMap: focusedToValueMap
+  }) : /*#__PURE__*/_react["default"].createElement(_Textfield.Textfield, {
+    opened: opened,
+    value: value,
+    isTargetAmount: isTargetAmount,
+    multiselect: multiselect,
+    valueToItemMap: valueToItemMap,
+    onChipClick: onChipClick,
+    label: label,
+    placeholder: placeholder,
+    onKeyDown: onKeyDown,
+    focusedChipIndex: focusedChipIndex,
+    labelPlacement: labelPlacement,
+    size: size,
+    contentLeft: contentLeft,
+    disabled: disabled,
+    renderValue: renderValue,
+    focusedPath: focusedPath,
+    focusedToValueMap: focusedToValueMap
+  });
+};

package/styled-components/cjs/components/Select/elements/Target/elements/Button/Button.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _utils = /*#__PURE__*/require("../../../../../../utils");
+var _Select = /*#__PURE__*/require("../../../../Select.tokens");
+var _utils2 = /*#__PURE__*/require("../../../../utils");
+var _Button = /*#__PURE__*/require("./Button.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Button = exports.Button = function Button(_ref) {
+  var opened = _ref.opened,
+    value = _ref.value,
+    isTargetAmount = _ref.isTargetAmount,
+    multiselect = _ref.multiselect,
+    valueToItemMap = _ref.valueToItemMap,
+    onKeyDown = _ref.onKeyDown,
+    label = _ref.label,
+    size = _ref.size,
+    disabled = _ref.disabled,
+    renderValue = _ref.renderValue,
+    focusedPath = _ref.focusedPath,
+    focusedToValueMap = _ref.focusedToValueMap;
+  var withArrowInverse = opened ? _Select.classes.arrowInverse : undefined;
+  var iconSize = size === 'xs' ? 'xs' : 's';
+  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["default"].createElement(_Button.ButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_Button.StyledButton, {
+    stretching: "filled",
+    onKeyDown: onKeyDown,
+    className: opened ? _Select.classes.selectWithoutBoxShadow : undefined,
+    disabled: disabled,
+    contentRight: /*#__PURE__*/_react["default"].createElement(_Button.IconArrowWrapper, null, /*#__PURE__*/_react["default"].createElement(_Button.StyledArrow, {
+      size: iconSize,
+      color: "inherit",
+      className: (0, _utils.cx)(_Select.classes.selectTargetArrow, withArrowInverse)
+    })),
+    role: "combobox",
+    "aria-controls": "tree_level_1",
+    "aria-expanded": opened,
+    "aria-activedescendant": getActiveDescendant(),
+    "aria-label": label
+  }, /*#__PURE__*/_react["default"].createElement(_Button.Label, null, (0, _utils2.getButtonLabel)({
+    value: value,
+    isTargetAmount: isTargetAmount,
+    multiselect: multiselect,
+    valueToItemMap: valueToItemMap,
+    label: label,
+    renderValue: renderValue
+  }))));
+};

package/styled-components/cjs/components/Select/elements/Target/elements/Button/Button.styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledButton = exports.StyledArrow = exports.Label = exports.IconArrowWrapper = exports.ButtonWrapper = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
+var _mixins = /*#__PURE__*/require("../../../../../../mixins");
+var _Icon = /*#__PURE__*/require("../../../../../_Icon");
+var _engines = /*#__PURE__*/require("../../../../../../engines");
+var _Button = /*#__PURE__*/require("../../../../../Button");
+var _Select = /*#__PURE__*/require("../../../../Select.tokens");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var mergedButtonConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Button.buttonConfig);
+var Button = /*#__PURE__*/(0, _engines.component)(mergedButtonConfig);
+var StyledButton = exports.StyledButton = /*#__PURE__*/(0, _styledComponents["default"])(Button).withConfig({
+  componentId: "plasma-new-hope__sc-m19uar-0"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":600;", ":var(", ");", ":var(", ");", ":0.4;", ":var(", ");"], _Button.buttonTokens.buttonColor, _Select.tokens.targetButtonColor, _Button.buttonTokens.buttonColorHover, _Select.tokens.targetButtonColorHover, _Button.buttonTokens.buttonColorActive, _Select.tokens.targetButtonColorActive, _Button.buttonTokens.buttonBackgroundColor, _Select.tokens.targetButtonBackgroundColor, _Button.buttonTokens.buttonBackgroundColorHover, _Select.tokens.targetButtonBackgroundColorHover, _Button.buttonTokens.buttonBackgroundColorActive, _Select.tokens.targetButtonBackgroundColorActive, _Button.buttonTokens.buttonRightContentMargin, _Select.tokens.targetButtonArrowMargin, _Button.buttonTokens.buttonHeight, _Select.tokens.targetHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Select.tokens.targetButtonPadding, _Button.buttonTokens.buttonRadius, _Select.tokens.borderRadius, _Button.buttonTokens.buttonFontFamily, _Select.tokens.fontFamily, _Button.buttonTokens.buttonFontSize, _Select.tokens.fontSize, _Button.buttonTokens.buttonFontStyle, _Select.tokens.fontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Select.tokens.fontLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Select.tokens.fontLineHeight, _Button.buttonTokens.buttonDisabledOpacity, _Button.buttonTokens.buttonFocusColor, _Select.constants.focusColor);
+var IconArrowWrapper = exports.IconArrowWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-m19uar-1"
+})(["line-height:0;color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], _Select.tokens.targetButtonArrowColor, _Select.tokens.targetButtonArrowColorHover, _Select.tokens.targetButtonArrowColorActive);
+var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconDisclosureDownCentered).withConfig({
+  componentId: "plasma-new-hope__sc-m19uar-2"
+})(["transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"]);
+var ButtonWrapper = exports.ButtonWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-m19uar-3"
+})(["display:inline;.", "::before{box-shadow:none !important;}"], _Select.classes.selectWithoutBoxShadow);
+var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-m19uar-4"
+})(["display:inline;width:100%;text-align:left;", " .", "{transform:rotate(-180deg);}"], /*#__PURE__*/(0, _mixins.applyEllipsis)(), _Select.classes.arrowInverse);

package/styled-components/cjs/components/Select/elements/Target/elements/Textfield/Textfield.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Textfield = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _utils = /*#__PURE__*/require("../../../../../../utils");
+var _Select = /*#__PURE__*/require("../../../../Select.tokens");
+var _Chip = /*#__PURE__*/require("./elements/Chip/Chip");
+var _Textfield = /*#__PURE__*/require("./Textfield.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var getLabel = function getLabel(_ref) {
+  var value = _ref.value,
+    isTargetAmount = _ref.isTargetAmount,
+    valueToItemMap = _ref.valueToItemMap,
+    onChipClick = _ref.onChipClick,
+    label = _ref.label,
+    placeholder = _ref.placeholder,
+    focusedChipIndex = _ref.focusedChipIndex,
+    labelPlacement = _ref.labelPlacement,
+    size = _ref.size,
+    renderValue = _ref.renderValue;
+  if ((0, _utils.isEmpty)(value)) {
+    if (!label || labelPlacement === 'outer') {
+      return /*#__PURE__*/_react["default"].createElement(_Textfield.Placeholder, null, placeholder);
+    }
+    return /*#__PURE__*/_react["default"].createElement(_Textfield.Label, null, label);
+  }
+  if (Array.isArray(value) && isTargetAmount) {
+    return /*#__PURE__*/_react["default"].createElement(_Chip.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["default"].createElement(_Chip.Chip, {
+        text: renderValue ? renderValue(currentValue, itemLabel) : itemLabel,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onChipClick(currentValue);
+        },
+        focused: focusedChipIndex === index
+      });
+    });
+  }
+  var itemLabel = valueToItemMap.get(value).label;
+  if (!label || labelPlacement === 'outer') {
+    return /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel);
+  }
+  return /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabel, null, label), /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel));
+};
+var Textfield = exports.Textfield = function Textfield(_ref2) {
+  var opened = _ref2.opened,
+    value = _ref2.value,
+    isTargetAmount = _ref2.isTargetAmount,
+    multiselect = _ref2.multiselect,
+    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;
+  var withArrowInverse = opened ? _Select.classes.arrowInverse : undefined;
+  var iconSize = size === 'xs' ? 'xs' : 's';
+  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["default"].createElement(_Textfield.TextfieldWrapper, {
+    opened: opened,
+    value: value
+  }, /*#__PURE__*/_react["default"].createElement(_Textfield.StyledButton, {
+    stretching: "filled",
+    className: (0, _utils.cx)(_Select.classes.textfieldTarget, opened || focusedChipIndex !== null ? _Select.classes.selectWithoutBoxShadow : undefined),
+    onKeyDown: onKeyDown,
+    disabled: disabled,
+    role: "combobox",
+    "aria-controls": "tree_level_1",
+    "aria-expanded": opened,
+    "aria-activedescendant": getActiveDescendant(),
+    "aria-label": label
+  }, /*#__PURE__*/_react["default"].createElement(_Textfield.Wrapper, null, contentLeft && (!multiselect || (0, _utils.isEmpty)(value)) && /*#__PURE__*/_react["default"].createElement(_Textfield.ContentLeftWrapper, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Textfield.ChipWrapper, null, getLabel({
+    value: value,
+    isTargetAmount: isTargetAmount,
+    valueToItemMap: valueToItemMap,
+    onChipClick: onChipClick,
+    label: label,
+    placeholder: placeholder,
+    focusedChipIndex: focusedChipIndex,
+    labelPlacement: labelPlacement,
+    size: size,
+    renderValue: renderValue
+  })), /*#__PURE__*/_react["default"].createElement(_Textfield.IconArrowWrapper, null, /*#__PURE__*/_react["default"].createElement(_Textfield.StyledArrow, {
+    size: iconSize,
+    color: "inherit",
+    className: (0, _utils.cx)(_Select.classes.selectTargetArrow, withArrowInverse)
+  })))));
+};

package/styled-components/cjs/components/Select/elements/Target/elements/Textfield/Textfield.styles.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Value = exports.TextfieldWrapper = exports.StyledButton = exports.StyledArrow = exports.Placeholder = exports.Label = exports.InnerLabelWrapper = exports.InnerLabel = exports.IconArrowWrapper = exports.ContentLeftWrapper = exports.ChipWrapper = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
+var _utils = /*#__PURE__*/require("../../../../../../utils");
+var _mixins = /*#__PURE__*/require("../../../../../../mixins");
+var _Icon = /*#__PURE__*/require("../../../../../_Icon");
+var _engines = /*#__PURE__*/require("../../../../../../engines");
+var _Button = /*#__PURE__*/require("../../../../../Button");
+var _Select = /*#__PURE__*/require("../../../../Select.tokens");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var mergedButtonConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Button.buttonConfig);
+var Button = /*#__PURE__*/(0, _engines.component)(mergedButtonConfig);
+var TextfieldWrapper = exports.TextfieldWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-0"
+})(["display:inline;.", "{background:", ";padding:", ";}.", "::before{box-shadow:none !important;}"], _Select.classes.textfieldTarget, function (_ref) {
+  var opened = _ref.opened;
+  return opened ? "var(".concat(_Select.tokens.targetTextfieldBackgroundColorOpened, ")") : "var(".concat(_Select.tokens.targetTextfieldBackgroundColor, ")");
+}, function (_ref2) {
+  var value = _ref2.value;
+  return Array.isArray(value) && !(0, _utils.isEmpty)(value) ? "0 var(".concat(_Select.tokens.targetTextfieldChipPadding, ")") : "0 var(".concat(_Select.tokens.targetTextfieldPadding, ")");
+}, _Select.classes.selectWithoutBoxShadow);
+var StyledButton = exports.StyledButton = /*#__PURE__*/(0, _styledComponents["default"])(Button).withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-1"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":0.4;", ":var(", ");", ""], _Button.buttonTokens.buttonColor, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonColorHover, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonColorActive, _Select.constants.textfieldTargetColor, _Button.buttonTokens.buttonBackgroundColor, _Select.tokens.targetTextfieldBackgroundColor, _Button.buttonTokens.buttonHeight, _Select.tokens.targetHeight, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Select.tokens.targetTextfieldPadding, _Button.buttonTokens.buttonRadius, _Select.tokens.borderRadius, _Button.buttonTokens.buttonFontFamily, _Select.tokens.fontFamily, _Button.buttonTokens.buttonFontSize, _Select.tokens.fontSize, _Button.buttonTokens.buttonFontStyle, _Select.tokens.fontStyle, _Button.buttonTokens.buttonFontWeight, _Select.tokens.fontWeight, _Button.buttonTokens.buttonLetterSpacing, _Select.tokens.fontLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Select.tokens.fontLineHeight, _Button.buttonTokens.buttonDisabledOpacity, _Button.buttonTokens.buttonFocusColor, _Select.constants.focusColor, /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: /*#__PURE__*/"calc(var(".concat(_Select.tokens.focusOffset, ") * -1)"),
+  outlineSize: _Select.constants.focusSize,
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(_Select.tokens.borderRadius, ") + var(").concat(_Select.tokens.focusOffset, "))"),
+  outlineColor: _Select.constants.focusColor
+}));
+var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.IconDisclosureDownCentered).withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-2"
+})([""]);
+var IconArrowWrapper = exports.IconArrowWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-3"
+})(["line-height:0;margin:var(", ");color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], _Select.tokens.targetTextfieldArrowMargin, _Select.tokens.targetTextfieldArrowColor, _Select.tokens.targetTextfieldArrowColorHover, _Select.tokens.targetTextfieldArrowColorActive);
+var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-4"
+})(["width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;.", "{transform:rotate(-180deg);}"], _Select.classes.arrowInverse);
+var ChipWrapper = exports.ChipWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-5"
+})(["width:100%;display:flex;min-width:0;padding:calc(", " + var(", "));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;}"], _Select.constants.focusSize, _Select.tokens.focusOffset, _Select.tokens.chipBorderRadius, _Select.tokens.chipBorderRadius);
+var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-6"
+})(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _Select.constants.textfieldInnerLabelColor, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight);
+var Placeholder = exports.Placeholder = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-7"
+})(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _Select.constants.textfieldPlaceholderColor, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight);
+var InnerLabelWrapper = exports.InnerLabelWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-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(", ");"], _Select.tokens.innerLabelGap, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight);
+var InnerLabel = exports.InnerLabel = /*#__PURE__*/_styledComponents["default"].label.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-9"
+})(["color:var(", ");font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);text-align:left;"], _Select.constants.textfieldInnerLabelColor);
+var ContentLeftWrapper = exports.ContentLeftWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-10"
+})(["flex:none;margin-left:-2px;margin-right:6px;line-height:0;"]);
+var Value = exports.Value = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  componentId: "plasma-new-hope__sc-19p4a39-11"
+})(["", ""], /*#__PURE__*/(0, _mixins.applyEllipsis)());

package/styled-components/cjs/components/Select/elements/Target/elements/Textfield/elements/Chip/Chip.js

@@ -0,0 +1,37 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Chip = void 0;
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _Select = /*#__PURE__*/require("../../../../../../Select.tokens");
+var _Chip = /*#__PURE__*/require("./Chip.styles");
+var _div;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var Chip = exports.Chip = function Chip(_ref) {
+  var text = _ref.text,
+    onClick = _ref.onClick,
+    focused = _ref.focused,
+    isTargetAmount = _ref.isTargetAmount;
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (focused && ref.current) {
+      ref.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center'
+      });
+    }
+  }, [focused]);
+  return /*#__PURE__*/_react["default"].createElement(_Chip.StyledChip, {
+    contentClearButton: isTargetAmount && (_div || (_div = /*#__PURE__*/_react["default"].createElement("div", null))),
+    tabIndex: -1,
+    onClick: onClick,
+    text: "".concat(text),
+    className: focused ? _Select.classes.selectChipIsFocused : undefined,
+    ref: ref
+  });
+};

package/styled-components/cjs/components/Select/elements/Target/elements/Textfield/elements/Chip/Chip.styles.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledChip = void 0;
+var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
+var _Chip = /*#__PURE__*/require("../../../../../../../Chip");
+var _engines = /*#__PURE__*/require("../../../../../../../../engines");
+var _Select = /*#__PURE__*/require("../../../../../../Select.tokens");
+var _mixins = /*#__PURE__*/require("../../../../../../../../mixins");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Chip.chipConfig);
+var Chip = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var StyledChip = exports.StyledChip = /*#__PURE__*/(0, _styledComponents["default"])(Chip).withConfig({
+  componentId: "plasma-new-hope__sc-14rqoab-0"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ";"], _Chip.chipTokens.color, _Select.tokens.chipColor, _Chip.chipTokens.colorHover, _Select.tokens.chipColor, _Chip.chipTokens.colorActive, _Select.tokens.chipColor, _Chip.chipTokens.background, _Select.tokens.chipBackground, _Chip.chipTokens.backgroundHover, _Select.tokens.chipBackgroundHover, _Chip.chipTokens.backgroundActive, _Select.tokens.chipBackgroundActive, _Chip.chipTokens.borderRadius, _Select.tokens.chipBorderRadius, _Chip.chipTokens.height, _Select.tokens.chipHeight, _Chip.chipTokens.paddingRight, _Select.tokens.chipPaddingRight, _Chip.chipTokens.paddingLeft, _Select.tokens.chipPaddingLeft, _Chip.chipTokens.fontFamily, _Select.tokens.fontFamily, _Chip.chipTokens.fontSize, _Select.tokens.fontSize, _Chip.chipTokens.fontStyle, _Select.tokens.fontStyle, _Chip.chipTokens.fontWeight, _Select.tokens.fontWeight, _Chip.chipTokens.letterSpacing, _Select.tokens.fontLetterSpacing, _Chip.chipTokens.lineHeight, _Select.tokens.fontLineHeight, _Chip.chipTokens.clearContentMarginLeft, _Select.tokens.chipClearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Select.tokens.chipClearContentMarginRight, _Chip.chipTokens.closeIconSize, _Select.tokens.chipCloseIconSize, _Chip.chipTokens.closeIconColor, _Select.tokens.chipColor, _Chip.chipTokens.focusColor, _Select.constants.focusColor, /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: /*#__PURE__*/"calc(var(".concat(_Select.tokens.focusOffset, ") * -1)"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(_Select.tokens.chipBorderRadius, ") + var(").concat(_Select.tokens.focusOffset, "))"),
+  customFocusRules: /*#__PURE__*/"\n            &.".concat(_Select.classes.selectChipIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 ").concat(_Select.constants.focusSize, " var(").concat(_Select.constants.focusColor, ");\n            }\n        ")
+}));