@salutejs/plasma-new-hope 0.236.1-canary.1675.12516409173.0 → 0.237.0-dev.0

package/styled-components/es/components/Note/Note.js

@@ -0,0 +1,127 @@
+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); }
+var _excluded = ["className", "style", "title", "text", "contentBefore", "contentBeforeSizing", "size", "view", "stretch", "width", "height"];
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useResizeObserver } from '@salutejs/plasma-core';
+import { canUseDOM, cx, getSizeValueFromProp } from '../../utils';
+import { base as viewCSS } from './variations/_view/base';
+import { base as sizeCSS } from './variations/_size/base';
+import { base, ContentBefore, ContentWrapper, Text, TextHelper, Title, TitleHelper } from './Note.styles';
+import { classes, privateTokens, tokens } from './Note.tokens';
+export var noteRoot = function noteRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (_ref, outerRef) {
+    var className = _ref.className,
+      style = _ref.style,
+      title = _ref.title,
+      text = _ref.text,
+      contentBefore = _ref.contentBefore,
+      _ref$contentBeforeSiz = _ref.contentBeforeSizing,
+      contentBeforeSizing = _ref$contentBeforeSiz === void 0 ? 'fixed' : _ref$contentBeforeSiz,
+      size = _ref.size,
+      view = _ref.view,
+      stretch = _ref.stretch,
+      width = _ref.width,
+      height = _ref.height,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    var _useState = useState(text),
+      _useState2 = _slicedToArray(_useState, 2),
+      innerText = _useState2[0],
+      setInnerText = _useState2[1];
+    var _useState3 = useState(contentBefore ? "var(".concat(tokens.fixedContentBeforeWidth, ")") : '0'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      contentBeforeWidth = _useState4[0],
+      setContentBeforeWidth = _useState4[1];
+    var contentWrapperRef = useRef(null);
+    var contentBeforeRef = useRef(null);
+    var titleHelperRef = useRef(null);
+    var textRenderHelperRef = useRef(null);
+    var innerWidth = width ? getSizeValueFromProp(width) : 'fit-content';
+    var innerHeight = height ? getSizeValueFromProp(height) : 'fit-content';
+    var contentGapToken = contentBeforeSizing === 'scalable' ? tokens.gapScalable : tokens.gap;
+    var contentWidthWithOffsetToken = contentBefore ? "calc(100% - ".concat(contentBeforeWidth, " - var(").concat(contentGapToken, "))") : '100%';
+    var setTruncatedText = function setTruncatedText() {
+      var _titleHelperRef$curre;
+      if (!canUseDOM || !text || !(contentWrapperRef !== null && contentWrapperRef !== void 0 && contentWrapperRef.current) || !(textRenderHelperRef !== null && textRenderHelperRef !== void 0 && textRenderHelperRef.current) || !width && !height) {
+        return;
+      }
+      var contentHeight = contentWrapperRef.current.offsetHeight;
+      var titleHeight = ((_titleHelperRef$curre = titleHelperRef.current) === null || _titleHelperRef$curre === void 0 ? void 0 : _titleHelperRef$curre.offsetHeight) || 0;
+      var contentGap = Number(window.getComputedStyle(contentWrapperRef.current).rowGap.replace('px', ''));
+      var textAvailableHeight = contentHeight - titleHeight - contentGap;
+      textRenderHelperRef.current.textContent = text;
+      if (textRenderHelperRef.current.offsetHeight <= textAvailableHeight) {
+        setInnerText(text);
+        return;
+      }
+      var fullText = "".concat(text.slice(0, -3), "...");
+      for (var i = text.length - 1; i >= 0; i -= 1) {
+        textRenderHelperRef.current.textContent = fullText;
+        if (textRenderHelperRef.current.offsetHeight <= textAvailableHeight) {
+          break;
+        }
+        fullText = "".concat(fullText.slice(0, i), "...");
+      }
+      setInnerText(fullText);
+    };
+    useResizeObserver(contentWrapperRef, setTruncatedText);
+    useLayoutEffect(function () {
+      setTruncatedText();
+    }, [text, contentBefore, contentBeforeSizing, stretch]);
+    useEffect(function () {
+      if (!(contentBeforeRef !== null && contentBeforeRef !== void 0 && contentBeforeRef.current)) {
+        return;
+      }
+      if (contentBeforeSizing === 'scalable') {
+        setContentBeforeWidth("".concat(contentBeforeRef.current.offsetWidth, "px"));
+        return;
+      }
+      setContentBeforeWidth("var(".concat(tokens.fixedContentBeforeWidth, ")"));
+    }, [contentBefore, contentBeforeSizing]);
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      ref: outerRef,
+      className: cx(className, stretch && classes.stretch, contentBeforeSizing === 'scalable' && classes.contentAlignCenter),
+      view: view,
+      size: size,
+      style: _objectSpread(_objectSpread({}, style), {}, _defineProperty(_defineProperty(_defineProperty({}, privateTokens.width, innerWidth), privateTokens.height, innerHeight), privateTokens.contentWidthWithOffset, contentWidthWithOffsetToken))
+    }, rest), contentBefore && /*#__PURE__*/React.createElement(ContentBefore, {
+      ref: contentBeforeRef
+    }, contentBefore), /*#__PURE__*/React.createElement(ContentWrapper, {
+      ref: contentWrapperRef
+    }, title && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(TitleHelper, {
+      ref: titleHelperRef
+    }, "C")), innerText && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, innerText, /*#__PURE__*/React.createElement(TextHelper, {
+      ref: textRenderHelperRef
+    }, "C")))));
+  });
+};
+export var noteConfig = {
+  name: 'Note',
+  tag: 'div',
+  layout: noteRoot,
+  base: base,
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

package/styled-components/es/components/Note/Note.styles.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css(["position:relative;display:flex;box-sizing:border-box;"]);
+export var ContentBefore = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-0"
+})(["display:flex;"]);
+export var ContentWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-1"
+})(["display:flex;flex-direction:column;box-sizing:border-box;"]);
+export var Title = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-2"
+})([""]);
+export var TitleHelper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-3"
+})(["visibility:hidden;position:absolute;z-index:-9999;opacity:0;"]);
+export var Text = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-4"
+})(["display:block;position:relative;"]);
+export var TextHelper = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-2xk8rv-5"
+})(["visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;"]);

package/styled-components/es/components/Note/Note.template-doc.mdx

@@ -0,0 +1,159 @@
+---
+id: note
+title: Note
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Note
+Компонент для отображения текста в виде информационных, предупреждающих, обычных подсказок.
+
+<Description name="Note" />
+<PropsTable name="Note" />
+
+## Примеры
+
+### Вид компонента
+Вид компонента задается с помощью свойства `view`:
+
+```tsx live
+import React from 'react';
+import { Note } from '@salutejs/{{ package }}';
+import { IconSaluteOutline } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Note 
+                title="Title"
+                text="Text"
+                view="default" 
+                size="s" 
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />} 
+            />
+            <Note 
+                title="Title"
+                text="Text"
+                view="positive" 
+                size="s" 
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />} 
+            />
+            <Note 
+                title="Title"
+                text="Text"
+                view="warning" 
+                size="s" 
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />} 
+            />
+            <Note 
+                title="Title"
+                text="Text"
+                view="negative" 
+                size="s" 
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />} 
+            />
+            <Note 
+                title="Title"
+                text="Text"
+                view="info" 
+                size="s" 
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />} 
+            />
+        </div>
+    );
+}
+```
+
+### Размер компонента
+Размер компонента задается с помощью свойства `size`. 
+Так же можно указать собственную ширину и высоту с помощью `width` и `height` соответственно. 
+Или же задать `stretch` чтобы `Note` занял всю доступную ширину и высоту.
+
+```tsx live
+import React from 'react';
+import { Note } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div style=\{{ flexDirection: "column" }}>
+            <div style=\{{ display: "flex", gap: "1rem" }}>
+                <Note 
+                    title="Title"
+                    text="Text"
+                    view="default" 
+                    size="l"
+                />
+                <Note 
+                    title="Title"
+                    text="Text"
+                    view="default" 
+                    size="m" 
+                />
+                <Note 
+                    title="Title"
+                    text="Text"
+                    view="default" 
+                    size="s"
+                />
+                <Note 
+                    title="Title"
+                    text="Text"
+                    view="default" 
+                    size="xs"
+                />
+            </div>
+
+            <Note 
+                title="Title"
+                text="Text"
+                view="default" 
+                size="l"
+                width="400"
+                height="116"
+            />
+            
+            <div style=\{{ width: "300px", height: "300px" }}>
+                <Note 
+                    title="Title"
+                    text="Text"
+                    view="default" 
+                    size="l"
+                    stretch
+                />
+            </div>
+        </div>
+    );
+}
+```
+
+### Размерность и положение `contentBefore`
+Размерность и положение `contentBefore` задается с помощью свойства `contentBeforeSizing`:
+
+```tsx live
+import React from 'react';
+import { Note } from '@salutejs/{{ package }}';
+import { IconSaluteOutline } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Note 
+                title="Title"
+                text="Text"
+                view="default" 
+                size="s" 
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />} 
+                contentBeforeSizing="fixed"
+            />
+            <Note 
+                title="Title"
+                text="Text"
+                view="positive" 
+                size="s" 
+                contentBefore={<IconSaluteOutline size="m" color="inherit" />} 
+                contentBeforeSizing="scalable"
+            />
+        </div>
+    );
+}
+```

package/styled-components/es/components/Note/Note.tokens.js

@@ -0,0 +1,35 @@
+export var classes = {
+  stretch: 'note-stretch',
+  contentAlignCenter: 'note-content-align-center'
+};
+export var privateTokens = {
+  width: '--plasma_private-note-width',
+  height: '--plasma_private-note-height',
+  contentWidthWithOffset: '--plasma_private-note-content-width-with-offset'
+};
+export var tokens = {
+  background: '--plasma-note-background',
+  color: '--plasma-note-color',
+  contentBeforeColor: '--plasma-note-content-before-color',
+  padding: '--plasma-note-padding',
+  paddingScalable: '--plasma-note-padding-scalable',
+  borderRadius: '--plasma-note-border-radius',
+  gap: '--plasma-note-gap',
+  gapScalable: '--plasma-note-gap-scalable',
+  contentGap: '--plasma-note-content-gap',
+  fixedContentBeforeWidth: '--plasma-note-fixed-content-before-width',
+  fixedContentBeforeHeight: '--plasma-note-fixed-content-before-height',
+  fixedContentBeforePadding: '--plasma-note-fixed-content-before-padding',
+  titleFontFamily: '--plasma-note-title-font-family',
+  titleFontSize: '--plasma-note-title-font-size',
+  titleFontStyle: '--plasma-note-title-font-style',
+  titleFontWeight: '--plasma-note-title-font-weight',
+  titleLetterSpacing: '--plasma-note-title-letter-spacing',
+  titleLineHeight: '--plasma-note-title-line-height',
+  textFontFamily: '--plasma-note-text-font-family',
+  textFontSize: '--plasma-note-text-font-size',
+  textFontStyle: '--plasma-note-text-font-style',
+  textFontWeight: '--plasma-note-text-font-weight',
+  textLetterSpacing: '--plasma-note-text-letter-spacing',
+  textLineHeight: '--plasma-note-text-line-height'
+};

package/styled-components/es/components/Note/Note.types.js

@@ -0,0 +1 @@
+export {};

package/styled-components/es/components/Note/index.js

@@ -0,0 +1,2 @@
+export { noteRoot, noteConfig } from './Note';
+export { tokens as noteTokens, classes as noteClasses } from './Note.tokens';

package/styled-components/es/components/Note/variations/_size/base.js

@@ -0,0 +1,5 @@
+import { css } from 'styled-components';
+import { classes, privateTokens, tokens } from '../../Note.tokens';
+import { ContentBefore, ContentWrapper, Text, TextHelper, Title, TitleHelper } from '../../Note.styles';
+import { applyEllipsis } from '../../../../mixins';
+export var base = /*#__PURE__*/css(["padding:var(", ");border-radius:var(", ");height:var(", ");width:var(", ");gap:var(", ");&.", "{width:100%;height:100%;}", "{width:var(", ");height:var(", ");padding:var(", ");box-sizing:border-box;}&.", "{align-items:center;padding:var(", ");gap:var(", ");", "{width:fit-content;height:fit-content;padding:unset;}}", "{width:var(", ");gap:var(", ");}", ",", "{width:100%;min-height:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", "}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-all;}"], tokens.padding, tokens.borderRadius, privateTokens.height, privateTokens.width, tokens.gap, classes.stretch, ContentBefore, tokens.fixedContentBeforeWidth, tokens.fixedContentBeforeHeight, tokens.fixedContentBeforePadding, classes.contentAlignCenter, tokens.paddingScalable, tokens.gapScalable, ContentBefore, ContentWrapper, privateTokens.contentWidthWithOffset, tokens.contentGap, Title, TitleHelper, tokens.titleLineHeight, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, /*#__PURE__*/applyEllipsis(), Text, TextHelper, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textLetterSpacing, tokens.textLineHeight);

package/styled-components/es/components/Note/variations/_size/tokens.json

@@ -0,0 +1,23 @@
+[
+    "--plasma-note-padding",
+    "--plasma-note-padding-scalable",
+    "--plasma-note-border-radius",
+    "--plasma-note-gap",
+    "--plasma-note-gap-scalable",
+    "--plasma-note-content-gap",
+    "--plasma-note-fixed-content-before-width",
+    "--plasma-note-fixed-content-before-height",
+    "--plasma-note-fixed-content-before-padding",
+    "--plasma-note-title-font-family",
+    "--plasma-note-title-font-size",
+    "--plasma-note-title-font-style",
+    "--plasma-note-title-font-weight",
+    "--plasma-note-title-letter-spacing",
+    "--plasma-note-title-line-height",
+    "--plasma-note-text-font-family",
+    "--plasma-note-text-font-size",
+    "--plasma-note-text-font-style",
+    "--plasma-note-text-font-weight",
+    "--plasma-note-text-letter-spacing",
+    "--plasma-note-text-line-height"
+]

package/styled-components/es/components/Note/variations/_view/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { tokens } from '../../Note.tokens';
+import { ContentBefore } from '../../Note.styles';
+export var base = /*#__PURE__*/css(["background:var(", ");color:var(", ");", "{color:var(", ");fill:var(", ");}"], tokens.background, tokens.color, ContentBefore, tokens.contentBeforeColor, tokens.contentBeforeColor);

package/styled-components/es/components/Note/variations/_view/tokens.json

@@ -0,0 +1 @@
+["--plasma-note-background", "--plasma-note-color", "--plasma-note-content-before-color"]

package/styled-components/es/components/Select/Select.styles.js

@@ -15,6 +15,6 @@ export var Ul = /*#__PURE__*/styled.ul.withConfig({
   return listOverflow || 'initial';
 }, function (_ref4) {
   var isInnerUl = _ref4.isInnerUl;
-  return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 0") : "var(".concat(tokens.margin, ") 0 0 0");
+  return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 0") : 0;
 }, tokens.padding, tokens.dropdownBorderWidth);
 export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/Select/Select.tokens.js

@@ -11,7 +11,6 @@ export var classes = {
 };
 export var tokens = {
   borderRadius: '--plasma-select-border-radius',
-  margin: '--plasma-select-margin',
   padding: '--plasma-select-padding',
   fontFamily: '--plasma-select-font-family',
   fontSize: '--plasma-select-font-size',
@@ -164,10 +163,8 @@ export var tokens = {
   textFieldClearIndicatorHintInnerRight: '--plasma-select-new-textfield-clear-indicator-hint-placement-inner-right',
   textFieldOptionalColor: '--plasma-select-new-textfield-optional-color',
   textFieldFocusColor: '--plasma-select-textfield-focus-color',
-  textFieldBoxShadow: '--plasma-select-textfield-box-shadow',
   disclosureIconColor: '--plasma-select-disclosure-icon-color',
-  disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover',
-  disclosureIconSize: '--plasma-select-disclosure-icon-size'
+  disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover'
 };
 export var constants = {
   focusColor: '--surface-accent',

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

@@ -7,9 +7,10 @@ import React, { useRef, useContext } from 'react';
 import { sizeToIconSize, getItemId } from '../../../../utils';
 import { classes } from '../../../../Select.tokens';
 import { cx, isEmpty } from '../../../../../../utils';
+import { IconDisclosureRightCentered, IconDone } from '../../../../../_Icon';
 import { Context } from '../../../../Select.context';
 import { useDidMountEffect } from '../../../../../../hooks';
-import { StyledWrapper, StyledCell, StyledCheckbox, StyledIndicator, DisclosureIconWrapper, IconWrapper, StyledText, Wrapper, StyledCheckboxWrapper, StyledArrow, StyledIconDone } from './Item.styles';
+import { StyledWrapper, StyledCell, StyledCheckbox, StyledIndicator, DisclosureIconWrapper, IconWrapper, StyledText, Wrapper, StyledCheckboxWrapper } from './Item.styles';
 export var Item = function Item(_ref) {
   var item = _ref.item,
     path = _ref.path,
@@ -88,7 +89,7 @@ export var Item = function Item(_ref) {
   })), !multiselect && checked.get(item.value) === 'dot' && (_StyledIndicator || (_StyledIndicator = /*#__PURE__*/React.createElement(StyledIndicator, {
     size: "s",
     view: "default"
-  }))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/React.createElement(StyledIconDone, {
+  }))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/React.createElement(IconDone, {
     size: sizeToIconSize(size, variant),
     color: "inherit"
   })), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(item)) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
@@ -99,7 +100,7 @@ export var Item = function Item(_ref) {
     // @ts-ignore
     ,
     title: /*#__PURE__*/React.createElement("span", null, label)
-  })), !isEmpty(item.items) && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(StyledArrow, {
+  })), !isEmpty(item.items) && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRightCentered, {
     size: sizeToIconSize(size, variant),
     color: "inherit"
   })));

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

@@ -5,7 +5,6 @@ import { component, mergeConfig } from '../../../../../../engines';
 import { checkboxConfig, checkboxTokens } from '../../../../../Checkbox';
 import { cellConfig, cellTokens } from '../../../../../Cell';
 import { indicatorConfig, indicatorTokens } from '../../../../../Indicator';
-import { IconDisclosureRightCentered, IconDone } from '../../../../../_Icon';
 var mergedCheckboxConfig = /*#__PURE__*/mergeConfig(checkboxConfig);
 var Checkbox = /*#__PURE__*/component(mergedCheckboxConfig);
 var mergedCellConfig = /*#__PURE__*/mergeConfig(cellConfig);
@@ -24,53 +23,25 @@ export var StyledCheckbox = /*#__PURE__*/styled(Checkbox).withConfig({
 export var StyledIndicator = /*#__PURE__*/styled(Indicator).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-3"
 })(["", ":var(", ");", ":var(", ");"], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.checkboxFillColor);
-
-// TODO: Удалить после поддержки JS переменных в конфиге компонент
-export var sizeMap = {
-  xs: '1rem',
-  s: '1.5rem'
-};
-export var StyledArrow = /*#__PURE__*/styled(IconDisclosureRightCentered).withConfig({
-  componentId: "plasma-new-hope__sc-fr2h0y-4"
-})(["width:", ";height:", ";"], function (_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'xs' : _ref$size;
-  return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-}, function (_ref2) {
-  var _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'xs' : _ref2$size;
-  return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-});
-export var StyledIconDone = /*#__PURE__*/styled(IconDone).withConfig({
-  componentId: "plasma-new-hope__sc-fr2h0y-5"
-})(["width:", ";height:", ";"], function (_ref3) {
-  var _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? 'xs' : _ref3$size;
-  return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-}, function (_ref4) {
-  var _ref4$size = _ref4.size,
-    size = _ref4$size === void 0 ? 'xs' : _ref4$size;
-  return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-});
 export var DisclosureIconWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-fr2h0y-6"
+  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-7"
-})(["display:flex;align-items:center;justify-content:center;flex:none;width:", ";height:", ";margin:var(", ");line-height:0;color:var(", ");"], function (_ref5) {
-  var variant = _ref5.variant;
+  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) {
+  var variant = _ref.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
-}, function (_ref6) {
-  var variant = _ref6.variant;
+}, function (_ref2) {
+  var variant = _ref2.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
 }, tokens.itemIconMargin, tokens.checkboxFillColor);
 export var StyledText = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-fr2h0y-8"
+  componentId: "plasma-new-hope__sc-fr2h0y-6"
 })(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
 export var Wrapper = /*#__PURE__*/styled.li.withConfig({
-  componentId: "plasma-new-hope__sc-fr2h0y-9"
-})(["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 (_ref7) {
-  var variant = _ref7.variant;
+  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;
   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({
   outlineSize: '0.0625rem',
@@ -81,5 +52,5 @@ export var Wrapper = /*#__PURE__*/styled.li.withConfig({
   customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n            }\n        ")
 }));
 export var StyledCheckboxWrapper = /*#__PURE__*/styled.span.withConfig({
-  componentId: "plasma-new-hope__sc-fr2h0y-10"
+  componentId: "plasma-new-hope__sc-fr2h0y-8"
 })([""]);

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

@@ -8,30 +8,16 @@ 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(", ");", ":var(", ");", ":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.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.buttonPadding, 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);
+}, 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.buttonArrowColor, tokens.buttonArrowColorHover, tokens.buttonArrowColorActive);
-
-// TODO: Удалить после поддержки JS переменных в конфиге компонент
-export var sizeMap = {
-  xs: '1rem',
-  s: '1.5rem'
-};
 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;width:", ";height:", ";"], function (_ref2) {
-  var _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'xs' : _ref2$size;
-  return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-}, function (_ref3) {
-  var _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? 'xs' : _ref3$size;
-  return "var(".concat(tokens.disclosureIconSize, ", ").concat(sizeMap[size], ")");
-});
+})(["transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"]);
 export var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-38cqi1-3"
 })(["display:inline;.", "::before{box-shadow:none !important;}.", "{transform:rotate(-180deg);}"], classes.selectWithoutBoxShadow, classes.arrowInverse);