@skbkontur/react-ui 0.0.0-b408db2ccf → 0.0.0-b4710fb038

package/components/Token/Token.styles/Token.styles.js

@@ -1,15 +1,13 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
-import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
 import { tokenSizeMixin } from "../Token.mixins";
 export var globalClasses = prefix('token')({
   removeIcon: 'remove-icon'
 });
 export var styles = memoizeStyle({
   token: function token(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])), t.tokenBorderRadius);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      border: solid ", " transparent;\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])), t.tokenBorderRadius, t.tokenBorderWidth);
   },
   tokenSmall: function tokenSmall(t) {
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYSmall, t.tokenPaddingXSmall, t.tokenLineHeightSmall, t.tokenFontSizeSmall, t.tokenMarginYSmall, t.tokenMarginXSmall));
@@ -20,145 +18,43 @@ export var styles = memoizeStyle({
   tokenLarge: function tokenLarge(t) {
     return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYLarge, t.tokenPaddingXLarge, t.tokenLineHeightLarge, t.tokenFontSizeLarge, t.tokenMarginYLarge, t.tokenMarginXLarge));
   },
-  token2022: function token2022(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      border: solid ", " transparent;\n    "])), t.tokenBorderWidth);
+  tokenIdle: function tokenIdle(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      background-clip: border-box;\n    "])), t.tokenColor, t.tokenBg, t.tokenBorderColor);
   },
-  tokenDefaultIdle2022: function tokenDefaultIdle2022(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      background-clip: border-box;\n    "])), t.tokenDefaultIdleColor, t.tokenDefaultIdleBg, t.tokenDefaultIdleBorderColor);
+  tokenHover: function tokenHover(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "])), t.tokenColorHover, t.tokenBgHover, t.tokenBorderWidth, t.tokenBorderColorHover);
   },
-  tokenDefaultIdleHovering2022: function tokenDefaultIdleHovering2022(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "])), t.tokenDefaultIdleColorHover, t.tokenDefaultIdleBgHover, t.tokenBorderWidth, t.tokenDefaultIdleBorderColorHover);
+  tokenActive: function tokenActive(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])), t.tokenColorActive, t.tokenBgActive, t.tokenBorderWidth, t.tokenBorderColorActive);
   },
-  tokenDefaultActive2022: function tokenDefaultActive2022(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])), t.tokenDefaultActiveColor, t.tokenDefaultActiveBg, t.tokenBorderWidth, t.tokenDefaultActiveBorderColor);
+  tokenError: function tokenError(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorError, t.tokenOutlineWidth, t.tokenBorderColorError);
   },
-  tokenError2022: function tokenError2022(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorError, t.tokenOutlineWidth, t.tokenBorderColorError);
+  tokenWarning: function tokenWarning(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorWarning, t.tokenOutlineWidth, t.tokenBorderColorWarning);
   },
-  tokenWarning2022: function tokenWarning2022(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorWarning, t.tokenOutlineWidth, t.tokenBorderColorWarning);
+  tokenDisabled: function tokenDisabled(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n      border: solid 1px ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenTextColorDisabled, t.tokenBorderColorDisabled, globalClasses.removeIcon);
   },
-  tokenDisabled2022: function tokenDisabled2022(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n      border: solid 1px ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenTextColorDisabled, t.tokenBorderColorDisabled, globalClasses.removeIcon);
-  },
-  disabled: function disabled(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenTextColorDisabled, globalClasses.removeIcon);
-  },
-  text: function text(t) {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])), t.tokenLegacyTextShift);
+  text: function text() {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
   },
   removeIcon: function removeIcon(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n      display: inline-block;\n\n      &:hover {\n        opacity: 1;\n      }\n    "])), t.tokenRemoveIconSize, t.tokenRemoveIconSize, t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX, t.tokenRemoveIconBoxSizing, t.tokenRemoveIconGap);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n      display: inline-block;\n\n      &:hover {\n        opacity: 1;\n      }\n    "])), t.tokenRemoveIconSize, t.tokenRemoveIconSize, t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX, t.tokenRemoveIconBoxSizing, t.tokenRemoveIconGap);
   },
   helperText: function helperText() {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n    "])));
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n    "])));
   },
   helperContainer: function helperContainer() {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    "])));
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    "])));
   },
   helperContainerSmall: function helperContainerSmall(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXSmall, t.tokenInputPaddingXSmall);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXSmall, t.tokenInputPaddingXSmall);
   },
   helperContainerMedium: function helperContainerMedium(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXMedium, t.tokenInputPaddingXMedium);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXMedium, t.tokenInputPaddingXMedium);
   },
   helperContainerLarge: function helperContainerLarge(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXLarge, t.tokenInputPaddingXLarge);
-  }
-});
-export var colorStyles = [{
-  name: 'defaultIdle',
-  color: function color(t) {
-    return t.tokenDefaultIdle;
-  }
-}, {
-  name: 'defaultActive',
-  color: function color(t) {
-    return t.tokenDefaultActive;
-  }
-}, {
-  name: 'grayIdle',
-  color: function color(t) {
-    return t.tokenGrayIdle;
-  }
-}, {
-  name: 'grayActive',
-  color: function color(t) {
-    return t.tokenGrayActive;
-  }
-}, {
-  name: 'blueIdle',
-  color: function color(t) {
-    return t.tokenBlueIdle;
-  }
-}, {
-  name: 'blueActive',
-  color: function color(t) {
-    return t.tokenBlueActive;
-  }
-}, {
-  name: 'greenIdle',
-  color: function color(t) {
-    return t.tokenGreenIdle;
-  }
-}, {
-  name: 'greenActive',
-  color: function color(t) {
-    return t.tokenGreenActive;
-  }
-}, {
-  name: 'yellowIdle',
-  color: function color(t) {
-    return t.tokenYellowIdle;
-  }
-}, {
-  name: 'yellowActive',
-  color: function color(t) {
-    return t.tokenYellowActive;
-  }
-}, {
-  name: 'redIdle',
-  color: function color(t) {
-    return t.tokenRedIdle;
-  }
-}, {
-  name: 'redActive',
-  color: function color(t) {
-    return t.tokenRedActive;
-  }
-}, {
-  name: 'white',
-  color: function color(t) {
-    return t.tokenWhite;
-  }
-}, {
-  name: 'black',
-  color: function color(t) {
-    return t.tokenBlack;
-  }
-}].reduce(function (colors, _ref) {
-  var _extends2;
-  var name = _ref.name,
-    color = _ref.color;
-  return _extends({}, colors, (_extends2 = {}, _extends2[name] = function (t, v) {
-    var getVStyle = function getVStyle() {
-      if (v === 'error') {
-        return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n            box-shadow:\n              0 0 0 ", " ", ",\n              inset 0 0 0 1px ", ";\n          "])), t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
-      } else if (v === 'warning') {
-        return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n            box-shadow:\n              0 0 0 ", " ", ",\n              inset 0 0 0 1px ", ";\n          "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
-      }
-      return '';
-    };
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        color: ", ";\n        box-shadow:\n          0 0 0 ", " ", ",\n          inset 0 0 0 1px ", ";\n\n        ", "\n\n        .", ":hover {\n          color: ", ";\n        }\n      "])), color(t), ColorFunctions.contrast(color(t)), t.tokenBorderWidth, ColorFunctions.darken(color(t), '5%'), color(t), getVStyle(), globalClasses.removeIcon, ColorFunctions.contrast(color(t)));
-  }, _extends2));
-}, {
-  defaultDisabled: function defaultDisabled(t) {
-    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])), t.tokenDisabledBg, t.tokenShadowDisabled);
-  },
-  defaultDisabledWarning: function defaultDisabledWarning(t) {
-    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n        box-shadow:\n          0 0 0 ", " ", ",\n          inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
-  },
-  defaultDisabledError: function defaultDisabledError(t) {
-    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n        box-shadow:\n          0 0 0 ", " ", ",\n          inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXLarge, t.tokenInputPaddingXLarge);
   }
 });

package/components/Token/Token.styles/Token.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","prefix","ColorFunctions","tokenSizeMixin","globalClasses","removeIcon","styles","token","t","_templateObject","_taggedTemplateLiteralLoose","tokenBorderRadius","tokenSmall","_templateObject2","tokenPaddingYSmall","tokenPaddingXSmall","tokenLineHeightSmall","tokenFontSizeSmall","tokenMarginYSmall","tokenMarginXSmall","tokenMedium","_templateObject3","tokenPaddingYMedium","tokenPaddingXMedium","tokenLineHeightMedium","tokenFontSizeMedium","tokenMarginYMedium","tokenMarginXMedium","tokenLarge","_templateObject4","tokenPaddingYLarge","tokenPaddingXLarge","tokenLineHeightLarge","tokenFontSizeLarge","tokenMarginYLarge","tokenMarginXLarge","token2022","_templateObject5","tokenBorderWidth","tokenDefaultIdle2022","_templateObject6","tokenDefaultIdleColor","tokenDefaultIdleBg","tokenDefaultIdleBorderColor","tokenDefaultIdleHovering2022","_templateObject7","tokenDefaultIdleColorHover","tokenDefaultIdleBgHover","tokenDefaultIdleBorderColorHover","tokenDefaultActive2022","_templateObject8","tokenDefaultActiveColor","tokenDefaultActiveBg","tokenDefaultActiveBorderColor","tokenError2022","_templateObject9","tokenBorderColorError","tokenOutlineWidth","tokenWarning2022","_templateObject10","tokenBorderColorWarning","tokenDisabled2022","_templateObject11","tokenTextColorDisabled","tokenBorderColorDisabled","disabled","_templateObject12","text","_templateObject13","tokenLegacyTextShift","_templateObject14","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","helperText","_templateObject15","helperContainer","_templateObject16","helperContainerSmall","_templateObject17","tokenInputPaddingXSmall","helperContainerMedium","_templateObject18","tokenInputPaddingXMedium","helperContainerLarge","_templateObject19","tokenInputPaddingXLarge","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","_ref","_extends2","_extends","v","getVStyle","_templateObject20","_templateObject21","_templateObject22","contrast","darken","defaultDisabled","_templateObject23","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","_templateObject24","defaultDisabledError","_templateObject25"],"sources":["Token.styles.ts"],"sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\n\nimport { tokenSizeMixin } from './Token.mixins';\n\nexport const globalClasses = prefix('token')({\n  removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n  token(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      border-radius: ${t.tokenBorderRadius};\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  tokenSmall(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYSmall,\n        t.tokenPaddingXSmall,\n        t.tokenLineHeightSmall,\n        t.tokenFontSizeSmall,\n        t.tokenMarginYSmall,\n        t.tokenMarginXSmall,\n      )};\n    `;\n  },\n\n  tokenMedium(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYMedium,\n        t.tokenPaddingXMedium,\n        t.tokenLineHeightMedium,\n        t.tokenFontSizeMedium,\n        t.tokenMarginYMedium,\n        t.tokenMarginXMedium,\n      )};\n    `;\n  },\n\n  tokenLarge(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYLarge,\n        t.tokenPaddingXLarge,\n        t.tokenLineHeightLarge,\n        t.tokenFontSizeLarge,\n        t.tokenMarginYLarge,\n        t.tokenMarginXLarge,\n      )};\n    `;\n  },\n\n  token2022(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} transparent;\n    `;\n  },\n\n  tokenDefaultIdle2022(t: Theme) {\n    return css`\n      color: ${t.tokenDefaultIdleColor};\n      background: ${t.tokenDefaultIdleBg};\n      border-color: ${t.tokenDefaultIdleBorderColor};\n      background-clip: border-box;\n    `;\n  },\n\n  tokenDefaultIdleHovering2022(t: Theme) {\n    return css`\n      &:hover {\n        color: ${t.tokenDefaultIdleColorHover};\n        background: ${t.tokenDefaultIdleBgHover};\n        border: solid ${t.tokenBorderWidth} ${t.tokenDefaultIdleBorderColorHover};\n      }\n    `;\n  },\n\n  tokenDefaultActive2022(t: Theme) {\n    return css`\n      color: ${t.tokenDefaultActiveColor};\n      background: ${t.tokenDefaultActiveBg};\n      border: solid ${t.tokenBorderWidth} ${t.tokenDefaultActiveBorderColor};\n    `;\n  },\n\n  tokenError2022(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorError};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError};\n    `;\n  },\n\n  tokenWarning2022(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorWarning};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning};\n    `;\n  },\n\n  tokenDisabled2022(t: Theme) {\n    return css`\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\n      border: solid 1px ${t.tokenBorderColorDisabled};\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  text(t: Theme) {\n    return css`\n      display: inline-block;\n      padding-bottom: ${t.tokenLegacyTextShift};\n    `;\n  },\n\n  removeIcon(t: Theme) {\n    return css`\n      height: ${t.tokenRemoveIconSize};\n      width: ${t.tokenRemoveIconSize};\n      flex-shrink: 0;\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\n      margin-left: ${t.tokenRemoveIconGap};\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n      display: inline-block;\n\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n\n  helperText() {\n    return css`\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n    `;\n  },\n  helperContainer() {\n    return css`\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    `;\n  },\n  helperContainerSmall(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXSmall};\n      right: ${t.tokenInputPaddingXSmall};\n    `;\n  },\n  helperContainerMedium(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXMedium};\n      right: ${t.tokenInputPaddingXMedium};\n    `;\n  },\n  helperContainerLarge(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXLarge};\n      right: ${t.tokenInputPaddingXLarge};\n    `;\n  },\n});\n\ninterface TokenColors {\n  defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultDisabled: (t: Theme) => string;\n  defaultDisabledWarning: (t: Theme) => string;\n  defaultDisabledError: (t: Theme) => string;\n  grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  white: (t: Theme, v: 'error' | 'warning' | null) => string;\n  black: (t: Theme, v: 'error' | 'warning' | null) => string;\n}\n\nexport const colorStyles = [\n  { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n  { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n  { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n  { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n  { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n  { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n  { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n  { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n  { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n  { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n  { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n  { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n  { name: 'white', color: (t: Theme) => t.tokenWhite },\n  { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n  (colors: TokenColors, { name, color }) => ({\n    ...colors,\n    [name](t: Theme, v: 'error' | 'warning') {\n      const getVStyle = () => {\n        if (v === 'error') {\n          return css`\n            box-shadow:\n              0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError},\n              inset 0 0 0 1px ${color(t)};\n          `;\n        } else if (v === 'warning') {\n          return css`\n            box-shadow:\n              0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning},\n              inset 0 0 0 1px ${color(t)};\n          `;\n        }\n\n        return '';\n      };\n\n      return css`\n        background-color: ${color(t)};\n        color: ${ColorFunctions.contrast(color(t))};\n        box-shadow:\n          0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')},\n          inset 0 0 0 1px ${color(t)};\n\n        ${getVStyle()}\n\n        .${globalClasses.removeIcon}:hover {\n          color: ${ColorFunctions.contrast(color(t))};\n        }\n      `;\n    },\n  }),\n  {\n    defaultDisabled(t: Theme) {\n      return css`\n        background-color: ${t.tokenDisabledBg};\n        box-shadow: ${t.tokenShadowDisabled};\n      `;\n    },\n    defaultDisabledWarning(t: Theme) {\n      return css`\n        box-shadow:\n          0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning},\n          inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n    defaultDisabledError(t: Theme) {\n      return css`\n        box-shadow:\n          0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError},\n          inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n  } as TokenColors,\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","prefix","tokenSizeMixin","globalClasses","removeIcon","styles","token","t","_templateObject","_taggedTemplateLiteralLoose","tokenBorderRadius","tokenBorderWidth","tokenSmall","_templateObject2","tokenPaddingYSmall","tokenPaddingXSmall","tokenLineHeightSmall","tokenFontSizeSmall","tokenMarginYSmall","tokenMarginXSmall","tokenMedium","_templateObject3","tokenPaddingYMedium","tokenPaddingXMedium","tokenLineHeightMedium","tokenFontSizeMedium","tokenMarginYMedium","tokenMarginXMedium","tokenLarge","_templateObject4","tokenPaddingYLarge","tokenPaddingXLarge","tokenLineHeightLarge","tokenFontSizeLarge","tokenMarginYLarge","tokenMarginXLarge","tokenIdle","_templateObject5","tokenColor","tokenBg","tokenBorderColor","tokenHover","_templateObject6","tokenColorHover","tokenBgHover","tokenBorderColorHover","tokenActive","_templateObject7","tokenColorActive","tokenBgActive","tokenBorderColorActive","tokenError","_templateObject8","tokenBorderColorError","tokenOutlineWidth","tokenWarning","_templateObject9","tokenBorderColorWarning","tokenDisabled","_templateObject10","tokenTextColorDisabled","tokenBorderColorDisabled","text","_templateObject11","_templateObject12","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","helperText","_templateObject13","helperContainer","_templateObject14","helperContainerSmall","_templateObject15","tokenInputPaddingXSmall","helperContainerMedium","_templateObject16","tokenInputPaddingXMedium","helperContainerLarge","_templateObject17","tokenInputPaddingXLarge"],"sources":["Token.styles.ts"],"sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nimport { tokenSizeMixin } from './Token.mixins';\n\nexport const globalClasses = prefix('token')({\n  removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n  token(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      border-radius: ${t.tokenBorderRadius};\n      border: solid ${t.tokenBorderWidth} transparent;\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  tokenSmall(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYSmall,\n        t.tokenPaddingXSmall,\n        t.tokenLineHeightSmall,\n        t.tokenFontSizeSmall,\n        t.tokenMarginYSmall,\n        t.tokenMarginXSmall,\n      )};\n    `;\n  },\n\n  tokenMedium(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYMedium,\n        t.tokenPaddingXMedium,\n        t.tokenLineHeightMedium,\n        t.tokenFontSizeMedium,\n        t.tokenMarginYMedium,\n        t.tokenMarginXMedium,\n      )};\n    `;\n  },\n\n  tokenLarge(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYLarge,\n        t.tokenPaddingXLarge,\n        t.tokenLineHeightLarge,\n        t.tokenFontSizeLarge,\n        t.tokenMarginYLarge,\n        t.tokenMarginXLarge,\n      )};\n    `;\n  },\n\n  tokenIdle(t: Theme) {\n    return css`\n      color: ${t.tokenColor};\n      background: ${t.tokenBg};\n      border-color: ${t.tokenBorderColor};\n      background-clip: border-box;\n    `;\n  },\n\n  tokenHover(t: Theme) {\n    return css`\n      &:hover {\n        color: ${t.tokenColorHover};\n        background: ${t.tokenBgHover};\n        border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorHover};\n      }\n    `;\n  },\n\n  tokenActive(t: Theme) {\n    return css`\n      color: ${t.tokenColorActive};\n      background: ${t.tokenBgActive};\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorActive};\n    `;\n  },\n\n  tokenError(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorError};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError};\n    `;\n  },\n\n  tokenWarning(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorWarning};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning};\n    `;\n  },\n\n  tokenDisabled(t: Theme) {\n    return css`\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\n      border: solid 1px ${t.tokenBorderColorDisabled};\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  text() {\n    return css`\n      display: inline-block;\n    `;\n  },\n\n  removeIcon(t: Theme) {\n    return css`\n      height: ${t.tokenRemoveIconSize};\n      width: ${t.tokenRemoveIconSize};\n      flex-shrink: 0;\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\n      margin-left: ${t.tokenRemoveIconGap};\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n      display: inline-block;\n\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n\n  helperText() {\n    return css`\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n    `;\n  },\n  helperContainer() {\n    return css`\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    `;\n  },\n  helperContainerSmall(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXSmall};\n      right: ${t.tokenInputPaddingXSmall};\n    `;\n  },\n  helperContainerMedium(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXMedium};\n      right: ${t.tokenInputPaddingXMedium};\n    `;\n  },\n  helperContainerLarge(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXLarge};\n      right: ${t.tokenInputPaddingXLarge};\n    `;\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/components/Token/Token.styles.d.ts

@@ -1,44 +1,23 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const globalClasses: {
-    removeIcon: string;
-};
-export declare const styles: {
-    token(t: Theme): string;
-    tokenSmall(t: Theme): string;
-    tokenMedium(t: Theme): string;
-    tokenLarge(t: Theme): string;
-    token2022(t: Theme): string;
-    tokenDefaultIdle2022(t: Theme): string;
-    tokenDefaultIdleHovering2022(t: Theme): string;
-    tokenDefaultActive2022(t: Theme): string;
-    tokenError2022(t: Theme): string;
-    tokenWarning2022(t: Theme): string;
-    tokenDisabled2022(t: Theme): string;
-    disabled(t: Theme): string;
-    text(t: Theme): string;
-    removeIcon(t: Theme): string;
-    helperText(): string;
-    helperContainer(): string;
-    helperContainerSmall(t: Theme): string;
-    helperContainerMedium(t: Theme): string;
-    helperContainerLarge(t: Theme): string;
-};
-export declare const colorStyles: {
-    defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
-    defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;
-    defaultDisabled: (t: Theme) => string;
-    defaultDisabledWarning: (t: Theme) => string;
-    defaultDisabledError: (t: Theme) => string;
-    grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
-    grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;
-    blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
-    blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;
-    greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
-    greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;
-    yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
-    yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;
-    redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
-    redActive: (t: Theme, v: 'error' | 'warning' | null) => string;
-    white: (t: Theme, v: 'error' | 'warning' | null) => string;
-    black: (t: Theme, v: 'error' | 'warning' | null) => string;
-};
+import type { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    removeIcon: string;
+};
+export declare const styles: {
+    token(t: Theme): string;
+    tokenSmall(t: Theme): string;
+    tokenMedium(t: Theme): string;
+    tokenLarge(t: Theme): string;
+    tokenIdle(t: Theme): string;
+    tokenHover(t: Theme): string;
+    tokenActive(t: Theme): string;
+    tokenError(t: Theme): string;
+    tokenWarning(t: Theme): string;
+    tokenDisabled(t: Theme): string;
+    text(): string;
+    removeIcon(t: Theme): string;
+    helperText(): string;
+    helperContainer(): string;
+    helperContainerSmall(t: Theme): string;
+    helperContainerMedium(t: Theme): string;
+    helperContainerLarge(t: Theme): string;
+};

package/components/Token/TokenView/TokenView.js

@@ -5,7 +5,6 @@ import React, { useContext } from 'react';
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { cx } from "../../../lib/theming/Emotion";
-import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import { globalClasses, styles } from "../Token.styles";
 export function TokenView(props) {
   var _cx;
@@ -35,7 +34,7 @@ export function TokenView(props) {
   return /*#__PURE__*/(
     React.createElement(CommonWrapper, props, /*#__PURE__*/
     React.createElement("div", _extends({}, rest, {
-      className: cx(getSizeClassName(size), (_cx = {}, _cx[styles.token(theme)] = true, _cx[styles.token2022(theme)] = isTheme2022(theme), _cx))
+      className: cx(getSizeClassName(size), (_cx = {}, _cx[styles.token(theme)] = true, _cx))
     }), children, closeButtonNode))
   );
 }

package/components/Token/TokenView/TokenView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","CommonWrapper","ThemeContext","cx","isTheme2022","globalClasses","styles","TokenView","props","_cx","_props$size","size","children","closeButton","hideCloseButton","className","rest","_objectWithoutPropertiesLoose","_excluded","theme","getSizeClassName","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","createElement","removeIcon","_extends","token","token2022"],"sources":["TokenView.tsx"],"sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { TokenSize } from './Token';\nimport { globalClasses, styles } from './Token.styles';\n\nexport interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: TokenSize;\n  closeButton?: ReactNode;\n  hideCloseButton?: boolean;\n}\n\nexport function TokenView(props: TokenViewProps) {\n  const { size = 'small', children, closeButton, hideCloseButton, className, ...rest } = props;\n  const theme = useContext(ThemeContext);\n  const getSizeClassName = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return styles.tokenLarge(theme);\n      case 'medium':\n        return styles.tokenMedium(theme);\n      case 'small':\n      default:\n        return styles.tokenSmall(theme);\n    }\n  };\n  const closeButtonNode = hideCloseButton ? null : (\n    <span className={cx(styles.removeIcon(theme), globalClasses.removeIcon)}>{closeButton}</span>\n  );\n\n  return (\n    <CommonWrapper {...props}>\n      <div\n        {...rest}\n        className={cx(getSizeClassName(size), {\n          [styles.token(theme)]: true,\n          [styles.token2022(theme)]: isTheme2022(theme),\n        })}\n      >\n        {children}\n        {closeButtonNode}\n      </div>\n    </CommonWrapper>\n  );\n}\n"],"mappings":"kPAAA,OAAOA,KAAK,IAAeC,UAAU,QAAQ,OAAO;;AAEpD,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,EAAE,QAAQ,2BAA2B;AAC9C,SAASC,WAAW,QAAQ,gCAAgC;;;AAG5D,SAASC,aAAa,EAAEC,MAAM,QAAQ,gBAAgB;;;;;;;;AAQtD,OAAO,SAASC,SAASA,CAACC,KAAqB,EAAE,KAAAC,GAAA;EAC/C,IAAAC,WAAA,GAAuFF,KAAK,CAApFG,IAAI,CAAJA,IAAI,GAAAD,WAAA,cAAG,OAAO,GAAAA,WAAA,CAAEE,QAAQ,GAAuDJ,KAAK,CAApEI,QAAQ,CAAEC,WAAW,GAA0CL,KAAK,CAA1DK,WAAW,CAAEC,eAAe,GAAyBN,KAAK,CAA7CM,eAAe,CAAEC,SAAS,GAAcP,KAAK,CAA5BO,SAAS,CAAKC,IAAI,GAAAC,6BAAA,CAAKT,KAAK,EAAAU,SAAA;EAC5F,IAAMC,KAAK,GAAGnB,UAAU,CAACE,YAAY,CAAC;EACtC,IAAMkB,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIT,IAAe,EAAK;IAC5C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAOL,MAAM,CAACe,UAAU,CAACF,KAAK,CAAC;MACjC,KAAK,QAAQ;QACX,OAAOb,MAAM,CAACgB,WAAW,CAACH,KAAK,CAAC;MAClC,KAAK,OAAO;MACZ;QACE,OAAOb,MAAM,CAACiB,UAAU,CAACJ,KAAK,CAAC;IACnC;EACF,CAAC;EACD,IAAMK,eAAe,GAAGV,eAAe,GAAG,IAAI;EAC5Cf,KAAA,CAAA0B,aAAA,WAAMV,SAAS,EAAEZ,EAAE,CAACG,MAAM,CAACoB,UAAU,CAACP,KAAK,CAAC,EAAEd,aAAa,CAACqB,UAAU,CAAE,IAAEb,WAAkB,CAC7F;;;EAED;IACEd,KAAA,CAAA0B,aAAA,CAACxB,aAAa,EAAKO,KAAK;IACtBT,KAAA,CAAA0B,aAAA,QAAAE,QAAA;IACMX,IAAI;MACRD,SAAS,EAAEZ,EAAE,CAACiB,gBAAgB,CAACT,IAAI,CAAC,GAAAF,GAAA,OAAAA,GAAA;MACjCH,MAAM,CAACsB,KAAK,CAACT,KAAK,CAAC,IAAG,IAAI,EAAAV,GAAA;MAC1BH,MAAM,CAACuB,SAAS,CAACV,KAAK,CAAC,IAAGf,WAAW,CAACe,KAAK,CAAC,EAAAV,GAAA;MAC9C,CAAE;;IAEFG,QAAQ;IACRY;IACE;IACQ,CAAC;;AAEpB","ignoreList":[]}
+{"version":3,"names":["React","useContext","CommonWrapper","ThemeContext","cx","globalClasses","styles","TokenView","props","_cx","_props$size","size","children","closeButton","hideCloseButton","className","rest","_objectWithoutPropertiesLoose","_excluded","theme","getSizeClassName","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","createElement","removeIcon","_extends","token"],"sources":["TokenView.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useContext } from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport type { TokenSize } from './Token';\nimport { globalClasses, styles } from './Token.styles';\n\nexport interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Задает размер контрола. */\n  size?: TokenSize;\n  /** Задает компонент крестика для удаления токена. */\n  closeButton?: ReactNode;\n  /** Определяет, скрывать ли крестик для удаления токена. */\n  hideCloseButton?: boolean;\n}\n\nexport function TokenView(props: TokenViewProps) {\n  const { size = 'small', children, closeButton, hideCloseButton, className, ...rest } = props;\n  const theme = useContext(ThemeContext);\n  const getSizeClassName = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return styles.tokenLarge(theme);\n      case 'medium':\n        return styles.tokenMedium(theme);\n      case 'small':\n      default:\n        return styles.tokenSmall(theme);\n    }\n  };\n  const closeButtonNode = hideCloseButton ? null : (\n    <span className={cx(styles.removeIcon(theme), globalClasses.removeIcon)}>{closeButton}</span>\n  );\n\n  return (\n    <CommonWrapper {...props}>\n      <div\n        {...rest}\n        className={cx(getSizeClassName(size), {\n          [styles.token(theme)]: true,\n        })}\n      >\n        {children}\n        {closeButtonNode}\n      </div>\n    </CommonWrapper>\n  );\n}\n"],"mappings":";AACA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,EAAE,QAAQ,2BAA2B;;;AAG9C,SAASC,aAAa,EAAEC,MAAM,QAAQ,gBAAgB;;;;;;;;;;;AAWtD,OAAO,SAASC,SAASA,CAACC,KAAqB,EAAE,KAAAC,GAAA;EAC/C,IAAAC,WAAA,GAAuFF,KAAK,CAApFG,IAAI,CAAJA,IAAI,GAAAD,WAAA,cAAG,OAAO,GAAAA,WAAA,CAAEE,QAAQ,GAAuDJ,KAAK,CAApEI,QAAQ,CAAEC,WAAW,GAA0CL,KAAK,CAA1DK,WAAW,CAAEC,eAAe,GAAyBN,KAAK,CAA7CM,eAAe,CAAEC,SAAS,GAAcP,KAAK,CAA5BO,SAAS,CAAKC,IAAI,GAAAC,6BAAA,CAAKT,KAAK,EAAAU,SAAA;EAC5F,IAAMC,KAAK,GAAGlB,UAAU,CAACE,YAAY,CAAC;EACtC,IAAMiB,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIT,IAAe,EAAK;IAC5C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAOL,MAAM,CAACe,UAAU,CAACF,KAAK,CAAC;MACjC,KAAK,QAAQ;QACX,OAAOb,MAAM,CAACgB,WAAW,CAACH,KAAK,CAAC;MAClC,KAAK,OAAO;MACZ;QACE,OAAOb,MAAM,CAACiB,UAAU,CAACJ,KAAK,CAAC;IACnC;EACF,CAAC;EACD,IAAMK,eAAe,GAAGV,eAAe,GAAG,IAAI;EAC5Cd,KAAA,CAAAyB,aAAA,WAAMV,SAAS,EAAEX,EAAE,CAACE,MAAM,CAACoB,UAAU,CAACP,KAAK,CAAC,EAAEd,aAAa,CAACqB,UAAU,CAAE,IAAEb,WAAkB,CAC7F;;;EAED;IACEb,KAAA,CAAAyB,aAAA,CAACvB,aAAa,EAAKM,KAAK;IACtBR,KAAA,CAAAyB,aAAA,QAAAE,QAAA;IACMX,IAAI;MACRD,SAAS,EAAEX,EAAE,CAACgB,gBAAgB,CAACT,IAAI,CAAC,GAAAF,GAAA,OAAAA,GAAA;MACjCH,MAAM,CAACsB,KAAK,CAACT,KAAK,CAAC,IAAG,IAAI,EAAAV,GAAA;MAC5B,CAAE;;IAEFG,QAAQ;IACRY;IACE;IACQ,CAAC;;AAEpB","ignoreList":[]}

package/components/Token/TokenView.d.ts

@@ -1,8 +1,12 @@
-import React, { ReactNode } from 'react';
-import { TokenSize } from './Token';
-export interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {
-    size?: TokenSize;
-    closeButton?: ReactNode;
-    hideCloseButton?: boolean;
-}
-export declare function TokenView(props: TokenViewProps): React.JSX.Element;
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { TokenSize } from './Token';
+export interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Задает размер контрола. */
+    size?: TokenSize;
+    /** Задает компонент крестика для удаления токена. */
+    closeButton?: ReactNode;
+    /** Определяет, скрывать ли крестик для удаления токена. */
+    hideCloseButton?: boolean;
+}
+export declare function TokenView(props: TokenViewProps): React.JSX.Element;

package/components/Token/index.d.ts

@@ -1 +1 @@
-export * from './Token';
+export * from './Token';

package/components/Token/locale/index/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","TokenLocaleHelper"],"sources":["index.ts"],"sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { TokenLocale } from './types';\n\nexport * from './types';\n\nexport const TokenLocaleHelper = new LocaleHelper<TokenLocale>({\n  ru_RU,\n  en_GB,\n});\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,kCAAkC;;AAE/D,SAASC,iBAAiB,IAAIC,KAAK,QAAQ,cAAc;AACzD,SAASD,iBAAiB,IAAIE,KAAK,QAAQ,cAAc;;;AAGzD,cAAc,SAAS;;AAEvB,OAAO,IAAMC,iBAAiB,GAAG,IAAIJ,YAAY,CAAc;EAC7DG,KAAK,EAALA,KAAK;EACLD,KAAK,EAALA;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","TokenLocaleHelper"],"sources":["index.ts"],"sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport type { TokenLocale } from './types';\n\nexport * from './types';\n\nexport const TokenLocaleHelper = new LocaleHelper<TokenLocale>({\n  ru_RU,\n  en_GB,\n});\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,kCAAkC;;AAE/D,SAASC,iBAAiB,IAAIC,KAAK,QAAQ,cAAc;AACzD,SAASD,iBAAiB,IAAIE,KAAK,QAAQ,cAAc;;;AAGzD,cAAc,SAAS;;AAEvB,OAAO,IAAMC,iBAAiB,GAAG,IAAIJ,YAAY,CAAc;EAC7DG,KAAK,EAALA,KAAK;EACLD,KAAK,EAALA;AACF,CAAC,CAAC","ignoreList":[]}

package/components/Token/locale/index.d.ts

@@ -1,4 +1,4 @@
-import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
-import { TokenLocale } from './types';
-export * from './types';
-export declare const TokenLocaleHelper: LocaleHelper<TokenLocale>;
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import type { TokenLocale } from './types';
+export * from './types';
+export declare const TokenLocaleHelper: LocaleHelper<TokenLocale>;

package/components/Token/locale/locales/en/en.js.map

@@ -1 +1 @@
-{"version":3,"names":["componentsLocales","removeButtonAriaLabel"],"sources":["en.ts"],"sourcesContent":["import { TokenLocale } from '../types';\n\nexport const componentsLocales: TokenLocale = {\n  removeButtonAriaLabel: 'Remove token',\n};\n"],"mappings":";;AAEA,OAAO,IAAMA,iBAA8B,GAAG;EAC5CC,qBAAqB,EAAE;AACzB,CAAC","ignoreList":[]}
+{"version":3,"names":["componentsLocales","removeButtonAriaLabel"],"sources":["en.ts"],"sourcesContent":["import type { TokenLocale } from '../types';\n\nexport const componentsLocales: TokenLocale = {\n  removeButtonAriaLabel: 'Remove token',\n};\n"],"mappings":";;AAEA,OAAO,IAAMA,iBAA8B,GAAG;EAC5CC,qBAAqB,EAAE;AACzB,CAAC","ignoreList":[]}

package/components/Token/locale/locales/en.d.ts

@@ -1,2 +1,2 @@
-import { TokenLocale } from '../types';
-export declare const componentsLocales: TokenLocale;
+import type { TokenLocale } from '../types';
+export declare const componentsLocales: TokenLocale;

package/components/Token/locale/locales/ru/ru.js.map

@@ -1 +1 @@
-{"version":3,"names":["componentsLocales","removeButtonAriaLabel"],"sources":["ru.ts"],"sourcesContent":["import { TokenLocale } from '../types';\n\nexport const componentsLocales: TokenLocale = {\n  removeButtonAriaLabel: 'Удалить токен',\n};\n"],"mappings":";;AAEA,OAAO,IAAMA,iBAA8B,GAAG;EAC5CC,qBAAqB,EAAE;AACzB,CAAC","ignoreList":[]}
+{"version":3,"names":["componentsLocales","removeButtonAriaLabel"],"sources":["ru.ts"],"sourcesContent":["import type { TokenLocale } from '../types';\n\nexport const componentsLocales: TokenLocale = {\n  removeButtonAriaLabel: 'Удалить токен',\n};\n"],"mappings":";;AAEA,OAAO,IAAMA,iBAA8B,GAAG;EAC5CC,qBAAqB,EAAE;AACzB,CAAC","ignoreList":[]}

package/components/Token/locale/locales/ru.d.ts

@@ -1,2 +1,2 @@
-import { TokenLocale } from '../types';
-export declare const componentsLocales: TokenLocale;
+import type { TokenLocale } from '../types';
+export declare const componentsLocales: TokenLocale;

package/components/Token/locale/types.d.ts

@@ -1,3 +1,3 @@
-export interface TokenLocale {
-    removeButtonAriaLabel: string;
-}
+export interface TokenLocale {
+    removeButtonAriaLabel: string;
+}

package/components/TokenInput/TextWidthHelper/TextWidthHelper.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cx","getDOMRect","TokenView","styles","THIN_SPACE","TextWidthHelper","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","element","elementRef","node","_inheritsLoose","_proto","prototype","getSizeClassName","size","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","createElement","className","helperContainer","helperText","ref","text","getTextWidth","width","getTextHeight","height","Component"],"sources":["TextWidthHelper.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { TokenView } from '../Token/TokenView';\nimport { TokenSize } from '../Token';\nimport { styles } from '../Token/Token.styles';\n\n// a thin character to preserve some space\n// for the caret visibillity in the input\nconst THIN_SPACE = '\\u2009';\n\nexport interface TextWidthHelperProps {\n  text?: string;\n  theme: Theme;\n  size: TokenSize;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  private getSizeClassName(size: TokenSize) {\n    switch (size) {\n      case 'large':\n        return styles.helperContainerLarge(this.props.theme);\n      case 'medium':\n        return styles.helperContainerMedium(this.props.theme);\n      case 'small':\n      default:\n        return styles.helperContainerSmall(this.props.theme);\n    }\n  }\n\n  public render() {\n    return (\n      <TokenView\n        size={this.props.size}\n        className={cx(styles.helperContainer(), this.getSizeClassName(this.props.size))}\n      >\n        <div className={styles.helperText()} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </TokenView>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"],"mappings":"sEAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,EAAE,QAAQ,2BAA2B;;AAE9C,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,SAAS,QAAQ,oBAAoB;;AAE9C,SAASC,MAAM,QAAQ,uBAAuB;;AAE9C;AACA;AACA,IAAMC,UAAU,GAAG,QAAQ;;;;;;;AAO3B;AACA;AACA;AACA;AACA,WAAaC,eAAe,0BAAAC,gBAAA,YAAAD,gBAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;IAClBU,OAAO,GAA0B,IAAI,CAAAV,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmCrCW,UAAU,GAAG,UAACC,IAAoB,UAAMZ,KAAA,CAAKU,OAAO,GAAGE,IAAI,EAAC,QAAAZ,KAAA,EAAAa,cAAA,CAAAf,eAAA,EAAAC,gBAAA,MAAAe,MAAA,GAAAhB,eAAA,CAAAiB,SAAA,CAAAD,MAAA,CAjC5DE,gBAAgB,GAAxB,SAAAA,iBAAyBC,IAAe,EAAE,CACxC,QAAQA,IAAI,GACV,KAAK,OAAO,CACV,OAAOrB,MAAM,CAACsB,oBAAoB,CAAC,IAAI,CAACC,KAAK,CAACC,KAAK,CAAC,CACtD,KAAK,QAAQ,CACX,OAAOxB,MAAM,CAACyB,qBAAqB,CAAC,IAAI,CAACF,KAAK,CAACC,KAAK,CAAC,CACvD,KAAK,OAAO,CACZ,QACE,OAAOxB,MAAM,CAAC0B,oBAAoB,CAAC,IAAI,CAACH,KAAK,CAACC,KAAK,CAAC,CACxD,CACF,CAAC,CAAAN,MAAA,CAEMS,MAAM,GAAb,SAAAA,OAAA,EAAgB,CACd,oBACE/B,KAAA,CAAAgC,aAAA,CAAC7B,SAAS,IACRsB,IAAI,EAAE,IAAI,CAACE,KAAK,CAACF,IAAK,EACtBQ,SAAS,EAAEhC,EAAE,CAACG,MAAM,CAAC8B,eAAe,CAAC,CAAC,EAAE,IAAI,CAACV,gBAAgB,CAAC,IAAI,CAACG,KAAK,CAACF,IAAI,CAAC,CAAE,iBAEhFzB,KAAA,CAAAgC,aAAA,UAAKC,SAAS,EAAE7B,MAAM,CAAC+B,UAAU,CAAC,CAAE,EAACC,GAAG,EAAE,IAAI,CAACjB,UAAW,IACvD,IAAI,CAACQ,KAAK,CAACU,IAAI,IAAIhC,UACjB,CACI,CAAC,CAEhB,CAAC,CAAAiB,MAAA,CAEMgB,YAAY,GAAnB,SAAAA,aAAA,EAA8B,CAC5B,OAAOpC,UAAU,CAAC,IAAI,CAACgB,OAAO,CAAC,CAACqB,KAAK,CACvC,CAAC,CAAAjB,MAAA,CAEMkB,aAAa,GAApB,SAAAA,cAAA,EAA+B,CAC7B,OAAOtC,UAAU,CAAC,IAAI,CAACgB,OAAO,CAAC,CAACuB,MAAM,CACxC,CAAC,QAAAnC,eAAA,GAlCkCN,KAAK,CAAC0C,SAAS","ignoreList":[]}
+{"version":3,"names":["React","cx","getDOMRect","TokenView","styles","THIN_SPACE","TextWidthHelper","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","element","elementRef","node","_inheritsLoose","_proto","prototype","getSizeClassName","size","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","createElement","className","helperContainer","helperText","ref","text","getTextWidth","width","getTextHeight","height","Component"],"sources":["TextWidthHelper.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { TokenView } from '../Token/TokenView';\nimport type { TokenSize } from '../Token';\nimport { styles } from '../Token/Token.styles';\n\n// a thin character to preserve some space\n// for the caret visibillity in the input\nconst THIN_SPACE = '\\u2009';\n\nexport interface TextWidthHelperProps {\n  /** Задает текст в поле ввода, еще не ставший токеном. */\n  text?: string;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme: Theme;\n\n  /** Задает размер контрола. */\n  size: TokenSize;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  private getSizeClassName(size: TokenSize) {\n    switch (size) {\n      case 'large':\n        return styles.helperContainerLarge(this.props.theme);\n      case 'medium':\n        return styles.helperContainerMedium(this.props.theme);\n      case 'small':\n      default:\n        return styles.helperContainerSmall(this.props.theme);\n    }\n  }\n\n  public render() {\n    return (\n      <TokenView\n        size={this.props.size}\n        className={cx(styles.helperContainer(), this.getSizeClassName(this.props.size))}\n      >\n        <div className={styles.helperText()} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </TokenView>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"],"mappings":"sEAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,EAAE,QAAQ,2BAA2B;;AAE9C,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,SAAS,QAAQ,oBAAoB;;AAE9C,SAASC,MAAM,QAAQ,uBAAuB;;AAE9C;AACA;AACA,IAAMC,UAAU,GAAG,QAAQ;;;;;;;;;;;;AAY3B;AACA;AACA;AACA;AACA,WAAaC,eAAe,0BAAAC,gBAAA,YAAAD,gBAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;IAClBU,OAAO,GAA0B,IAAI,CAAAV,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmCrCW,UAAU,GAAG,UAACC,IAAoB,UAAMZ,KAAA,CAAKU,OAAO,GAAGE,IAAI,EAAC,QAAAZ,KAAA,EAAAa,cAAA,CAAAf,eAAA,EAAAC,gBAAA,MAAAe,MAAA,GAAAhB,eAAA,CAAAiB,SAAA,CAAAD,MAAA,CAjC5DE,gBAAgB,GAAxB,SAAAA,iBAAyBC,IAAe,EAAE,CACxC,QAAQA,IAAI,GACV,KAAK,OAAO,CACV,OAAOrB,MAAM,CAACsB,oBAAoB,CAAC,IAAI,CAACC,KAAK,CAACC,KAAK,CAAC,CACtD,KAAK,QAAQ,CACX,OAAOxB,MAAM,CAACyB,qBAAqB,CAAC,IAAI,CAACF,KAAK,CAACC,KAAK,CAAC,CACvD,KAAK,OAAO,CACZ,QACE,OAAOxB,MAAM,CAAC0B,oBAAoB,CAAC,IAAI,CAACH,KAAK,CAACC,KAAK,CAAC,CACxD,CACF,CAAC,CAAAN,MAAA,CAEMS,MAAM,GAAb,SAAAA,OAAA,EAAgB,CACd,oBACE/B,KAAA,CAAAgC,aAAA,CAAC7B,SAAS,IACRsB,IAAI,EAAE,IAAI,CAACE,KAAK,CAACF,IAAK,EACtBQ,SAAS,EAAEhC,EAAE,CAACG,MAAM,CAAC8B,eAAe,CAAC,CAAC,EAAE,IAAI,CAACV,gBAAgB,CAAC,IAAI,CAACG,KAAK,CAACF,IAAI,CAAC,CAAE,iBAEhFzB,KAAA,CAAAgC,aAAA,UAAKC,SAAS,EAAE7B,MAAM,CAAC+B,UAAU,CAAC,CAAE,EAACC,GAAG,EAAE,IAAI,CAACjB,UAAW,IACvD,IAAI,CAACQ,KAAK,CAACU,IAAI,IAAIhC,UACjB,CACI,CAAC,CAEhB,CAAC,CAAAiB,MAAA,CAEMgB,YAAY,GAAnB,SAAAA,aAAA,EAA8B,CAC5B,OAAOpC,UAAU,CAAC,IAAI,CAACgB,OAAO,CAAC,CAACqB,KAAK,CACvC,CAAC,CAAAjB,MAAA,CAEMkB,aAAa,GAApB,SAAAA,cAAA,EAA+B,CAC7B,OAAOtC,UAAU,CAAC,IAAI,CAACgB,OAAO,CAAC,CAACuB,MAAM,CACxC,CAAC,QAAAnC,eAAA,GAlCkCN,KAAK,CAAC0C,SAAS","ignoreList":[]}

package/components/TokenInput/TextWidthHelper.d.ts

@@ -1,20 +1,23 @@
-import React from 'react';
-import { Theme } from '../../lib/theming/Theme';
-import { TokenSize } from '../Token';
-export interface TextWidthHelperProps {
-    text?: string;
-    theme: Theme;
-    size: TokenSize;
-}
-/**
- * Херпер позволяет вычислить размеры блока с текстом
- * для последующего выставления размеров input
- */
-export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
-    private element;
-    private getSizeClassName;
-    render(): React.JSX.Element;
-    getTextWidth(): number;
-    getTextHeight(): number;
-    private elementRef;
-}
+import React from 'react';
+import type { Theme } from '../../lib/theming/Theme';
+import type { TokenSize } from '../Token';
+export interface TextWidthHelperProps {
+    /** Задает текст в поле ввода, еще не ставший токеном. */
+    text?: string;
+    /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */
+    theme: Theme;
+    /** Задает размер контрола. */
+    size: TokenSize;
+}
+/**
+ * Херпер позволяет вычислить размеры блока с текстом
+ * для последующего выставления размеров input
+ */
+export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
+    private element;
+    private getSizeClassName;
+    render(): React.JSX.Element;
+    getTextWidth(): number;
+    getTextHeight(): number;
+    private elementRef;
+}

package/components/TokenInput/TokenInput/TokenInput.js

@@ -11,10 +11,10 @@ import { PopupIds } from "../../../internal/Popup";
 import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyComma, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll } from "../../../lib/events/keyboard/identifiers";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { Token } from "../../Token";
+import { MenuItem } from "../../MenuItem";
 import { emptyHandler, getRandomID } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { locale } from "../../../lib/locale/decorators";
-import { MenuItem } from "../../MenuItem/MenuItem";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
@@ -77,6 +77,12 @@ var defaultRenderToken = function defaultRenderToken(item, _ref) {
     }, item.toString())
   );
 };
+
+/**
+ * Поле с токенами `TokenInput` — это поле ввода со списком подсказок.
+ *
+ * Поле с токенами используют для выбора нескольких значений из справочника и для добавления своих значений.
+ */
 export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), rootNode(_class = _dec(_class = (_TokenInput = /*#__PURE__*/function (_React$PureComponent) {
   function TokenInput() {
     var _this;
@@ -85,7 +91,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     }
     _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
     _this.state = DefaultState;
-    _this.textareaId = getUid();
+    _this._textareaId = getUid();
     _this.rootId = PopupIds.root + getRandomID();
     _this.input = null;
     _this.tokensInputMenu = null;
@@ -970,7 +976,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       menuWidth: menuWidth,
       menuAlign: menuAlign,
       renderTotalCount: renderTotalCount,
-      totalCount: totalCount
+      totalCount: totalCount,
+      size: this.getProps().size
     }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/React.createElement(TokenView, {
       size: this.props.size
     }, /*#__PURE__*/React.createElement("span", {
@@ -1014,6 +1021,12 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     }
   };
   return _createClass(TokenInput, [{
+    key: "textareaId",
+    get: function get() {
+      var _this$props$id;
+      return (_this$props$id = this.props.id) != null ? _this$props$id : this._textareaId;
+    }
+  }, {
     key: "showAddItemHint",
     get: function get() {
       var items = this.state.autocompleteItems;