@skbkontur/react-ui 0.0.0-cb54865bf2 → 0.0.0-ccbe7cf017

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

@@ -1,124 +1,46 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject10() {
-  var data = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "]);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: ", "};\n\n        & ", " {\n          fill: ", ";\n          opacity: 1;\n        }\n      "]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        color: ", ";\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n\n        ", "\n\n        & ", ":hover {\n          color: ", ";\n        }\n      "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _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\n      &:hover {\n        opacity: 1;\n      }\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      padding: ", " ", ";\n      line-height: ", ";\n      font-size: ", ";\n      margin: ", " ", ";\n      min-width: 0;\n      word-break: break-word;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
+import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
-var styles = {
+export var globalClasses = prefix('token')({
+  removeIcon: 'remove-icon'
+});
+export var styles = memoizeStyle({
   token: function token(t) {
-    return css(_templateObject(), t.tokenBorderRadius, t.tokenPaddingY, t.tokenPaddingX, t.tokenLineHeight, t.tokenFontSize, t.tokenMarginY, t.tokenMarginX);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      padding: ", " ", ";\n      line-height: ", ";\n      font-size: ", ";\n      margin: ", " ", ";\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])), t.tokenBorderRadius, t.tokenPaddingY, t.tokenPaddingX, t.tokenLineHeight, t.tokenFontSize, t.tokenMarginY, t.tokenMarginX);
+  },
+  tokenDefaultIdle2022: function tokenDefaultIdle2022(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n      background-clip: border-box;\n    "])), t.tokenDefaultIdleColor, t.tokenDefaultIdleBg, t.tokenBorderWidth, t.tokenDefaultIdleBorderColor);
+  },
+  tokenDefaultIdleHovering2022: function tokenDefaultIdleHovering2022(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "])), t.tokenDefaultIdleColorHover, t.tokenDefaultIdleBgHover, t.tokenBorderWidth, t.tokenDefaultIdleBorderColorHover);
+  },
+  tokenDefaultActive2022: function tokenDefaultActive2022(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])), t.tokenDefaultActiveColor, t.tokenDefaultActiveBg, t.tokenBorderWidth, t.tokenDefaultActiveBorderColor);
+  },
+  tokenError2022: function tokenError2022(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorError, t.tokenOutlineWidth, t.tokenBorderColorError);
+  },
+  tokenWarning2022: function tokenWarning2022(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorWarning, t.tokenOutlineWidth, t.tokenBorderColorWarning);
+  },
+  tokenDisabled2022: function tokenDisabled2022(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      margin: ", " ", ";\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.tokenPaddingYDisabled, t.tokenPaddingXDisabled, t.tokenMarginYDisabled, t.tokenMarginXDisabled, t.tokenTextColorDisabled, t.tokenBorderColorDisabled, globalClasses.removeIcon);
   },
   disabled: function disabled(t) {
-    return css(_templateObject2(), t.tokenPaddingYDisabled, t.tokenPaddingXDisabled, t.tokenMarginYDisabled, t.tokenMarginXDisabled, t.tokenTextColorDisabled);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenPaddingYDisabled, t.tokenPaddingXDisabled, t.tokenMarginYDisabled, t.tokenMarginXDisabled, t.tokenTextColorDisabled, globalClasses.removeIcon);
   },
   text: function text(t) {
-    return css(_templateObject3(), t.tokenLegacyTextShift);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])), t.tokenLegacyTextShift);
   },
   removeIcon: function removeIcon(t) {
-    return css(_templateObject4(), t.tokenRemoveIconSize, t.tokenRemoveIconSize, t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX, t.tokenRemoveIconBoxSizing, t.tokenRemoveIconGap);
+    return css(_templateObject10 || (_templateObject10 = _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\n      &:hover {\n        opacity: 1;\n      }\n    "])), t.tokenRemoveIconSize, t.tokenRemoveIconSize, t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX, t.tokenRemoveIconBoxSizing, t.tokenRemoveIconGap);
   }
-};
-export var jsStyles = memoizeStyle(styles);
-export var jsTokenColors = [{
+});
+export var colorStyles = [{
   name: 'defaultIdle',
   color: function color(t) {
     return t.tokenDefaultIdle;
@@ -194,19 +116,26 @@ export var jsTokenColors = [{
   var name = _ref.name,
       color = _ref.color;
   return _extends({}, colors, (_extends2 = {}, _extends2[name] = function (t, v) {
-    var warning = css(_templateObject5(), t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
-    var error = css(_templateObject6(), t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
-    var vStyle = v === 'error' ? error : v === 'warning' ? warning : '';
-    return css(_templateObject7(), color(t), ColorFunctions.contrast(color(t)), t.tokenBorderWidth, ColorFunctions.darken(color(t), '5%'), color(t), vStyle, cssName(jsStyles.removeIcon(t)), ColorFunctions.contrast(color(t)));
+    var getVStyle = function getVStyle() {
+      if (v === 'error') {
+        return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])), t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
+      } else if (v === 'warning') {
+        return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
+      }
+
+      return '';
+    };
+
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        color: ", ";\n        box-shadow: 0 0 0 ", " ", ", 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(_templateObject8(), t.tokenDisabledBg, t.tokenShadowDisabled, cssName(jsStyles.removeIcon(t)), t.tokenTextColorDisabled);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])), t.tokenDisabledBg, t.tokenShadowDisabled);
   },
   defaultDisabledWarning: function defaultDisabledWarning(t) {
-    return css(_templateObject9(), t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
   },
   defaultDisabledError: function defaultDisabledError(t) {
-    return css(_templateObject10(), t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
   }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["Token.styles.ts"],"names":["css","cssName","memoizeStyle","ColorFunctions","styles","token","t","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","disabled","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","text","tokenLegacyTextShift","removeIcon","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","jsStyles","jsTokenColors","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","warning","tokenOutlineWidth","tokenBorderColorWarning","error","tokenBorderColorError","vStyle","contrast","tokenBorderWidth","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\r\n\r\nconst styles = {\r\n  token(t: Theme) {\r\n    return css`\r\n      display: inline-flex;\r\n      align-items: center;\r\n      border-radius: ${t.tokenBorderRadius};\r\n      padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\r\n      line-height: ${t.tokenLineHeight};\r\n      font-size: ${t.tokenFontSize};\r\n      margin: ${t.tokenMarginY} ${t.tokenMarginX};\r\n      min-width: 0;\r\n      word-break: break-word;\r\n      user-select: none;\r\n\r\n      &:hover {\r\n        cursor: pointer;\r\n      }\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\r\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\r\n      user-select: text;\r\n      cursor: text;\r\n      color: ${t.tokenTextColorDisabled};\r\n    `;\r\n  },\r\n\r\n  text(t: Theme) {\r\n    return css`\r\n      display: inline-block;\r\n      padding-bottom: ${t.tokenLegacyTextShift};\r\n    `;\r\n  },\r\n\r\n  removeIcon(t: Theme) {\r\n    return css`\r\n      height: ${t.tokenRemoveIconSize};\r\n      width: ${t.tokenRemoveIconSize};\r\n      flex-shrink: 0;\r\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\r\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\r\n      margin-left: ${t.tokenRemoveIconGap};\r\n      transition: none;\r\n      fill: currentColor;\r\n      opacity: 0.5;\r\n      line-height: 0;\r\n\r\n      &:hover {\r\n        opacity: 1;\r\n      }\r\n    `;\r\n  },\r\n};\r\n\r\ninterface TokenColors {\r\n  defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  defaultDisabled: (t: Theme) => string;\r\n  defaultDisabledWarning: (t: Theme) => string;\r\n  defaultDisabledError: (t: Theme) => string;\r\n  grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  redActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  white: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  black: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n}\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n\r\nexport const jsTokenColors = [\r\n  { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\r\n  { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\r\n  { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\r\n  { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\r\n  { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\r\n  { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\r\n  { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\r\n  { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\r\n  { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\r\n  { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\r\n  { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\r\n  { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\r\n  { name: 'white', color: (t: Theme) => t.tokenWhite },\r\n  { name: 'black', color: (t: Theme) => t.tokenBlack },\r\n].reduce(\r\n  (colors: TokenColors, { name, color }) => ({\r\n    ...colors,\r\n    [name](t: Theme, v: 'error' | 'warning') {\r\n      const warning = css`\r\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\r\n      `;\r\n      const error = css`\r\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\r\n      `;\r\n      const vStyle = v === 'error' ? error : v === 'warning' ? warning : '';\r\n\r\n      return css`\r\n        background-color: ${color(t)};\r\n        color: ${ColorFunctions.contrast(color(t))};\r\n        box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\r\n\r\n        ${vStyle}\r\n\r\n        & ${cssName(jsStyles.removeIcon(t))}:hover {\r\n          color: ${ColorFunctions.contrast(color(t))};\r\n        }\r\n      `;\r\n    },\r\n  }),\r\n  {\r\n    defaultDisabled(t: Theme) {\r\n      return css`\r\n        background-color: ${t.tokenDisabledBg};\r\n        box-shadow: ${t.tokenShadowDisabled}};\r\n\r\n        & ${cssName(jsStyles.removeIcon(t))} {\r\n          fill: ${t.tokenTextColorDisabled};\r\n          opacity: 1;\r\n        }\r\n      `;\r\n    },\r\n    defaultDisabledWarning(t: Theme) {\r\n      return css`\r\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\r\n      `;\r\n    },\r\n    defaultDisabledError(t: Theme) {\r\n      return css`\r\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\r\n      `;\r\n    },\r\n  } as TokenColors,\r\n);\r\n"]}
+{"version":3,"sources":["Token.styles.ts"],"names":["css","memoizeStyle","prefix","ColorFunctions","globalClasses","removeIcon","styles","token","t","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","tokenDefaultIdle2022","tokenDefaultIdleColor","tokenDefaultIdleBg","tokenBorderWidth","tokenDefaultIdleBorderColor","tokenDefaultIdleHovering2022","tokenDefaultIdleColorHover","tokenDefaultIdleBgHover","tokenDefaultIdleBorderColorHover","tokenDefaultActive2022","tokenDefaultActiveColor","tokenDefaultActiveBg","tokenDefaultActiveBorderColor","tokenError2022","tokenBorderColorError","tokenOutlineWidth","tokenWarning2022","tokenBorderColorWarning","tokenDisabled2022","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","tokenBorderColorDisabled","disabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","getVStyle","contrast","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\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      padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\n      line-height: ${t.tokenLineHeight};\n      font-size: ${t.tokenFontSize};\n      margin: ${t.tokenMarginY} ${t.tokenMarginX};\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  tokenDefaultIdle2022(t: Theme) {\n    return css`\n      color: ${t.tokenDefaultIdleColor};\n      background: ${t.tokenDefaultIdleBg};\n      border: solid ${t.tokenBorderWidth} ${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      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\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      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\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\n      &:hover {\n        opacity: 1;\n      }\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: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n          `;\n        } else if (v === 'warning') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, 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: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, 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: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n    defaultDisabledError(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n  } as TokenColors,\n);\n"]}

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

@@ -1,25 +1,35 @@
-export declare const jsStyles: {
-    token(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    text(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    removeIcon(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    removeIcon: string;
 };
-export declare const jsTokenColors: {
-    defaultIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    defaultActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    defaultDisabled: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => string;
-    defaultDisabledWarning: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => string;
-    defaultDisabledError: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => string;
-    grayIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    grayActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    blueIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    blueActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    greenIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    greenActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    yellowIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    yellowActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    redIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    redActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    white: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    black: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
+export declare const styles: {
+    token(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;
+};
+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;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Token';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Token';\n"]}

package/components/TokenInput/TextWidthHelper/TextWidthHelper.js

@@ -1,15 +1,16 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
-import { RenderContainer } from "../../../internal/RenderContainer";
-var styles = {
-  position: 'absolute',
-  left: -1000,
-  top: -1000,
-  fontSize: 14
-};
-export var TextWidthHelper =
-/*#__PURE__*/
-function (_React$Component) {
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+import { styles } from "../TokenInput.styles"; // a thin character to preserve some space
+// for the caret visibillity in the input
+
+var THIN_SPACE = "\u2009";
+/**
+ * Херпер позволяет вычислить размеры блока с текстом
+ * для последующего выставления размеров input
+ */
+
+export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(TextWidthHelper, _React$Component);
 
   function TextWidthHelper() {
@@ -32,14 +33,20 @@ function (_React$Component) {
   var _proto = TextWidthHelper.prototype;
 
   _proto.render = function render() {
-    return React.createElement(RenderContainer, null, React.createElement("div", {
-      style: styles,
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.helperContainer(this.props.theme)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: this.props.classHelp,
       ref: this.elementRef
-    }, this.props.text));
+    }, this.props.text || THIN_SPACE));
   };
 
   _proto.getTextWidth = function getTextWidth() {
-    return this.element.getBoundingClientRect().width;
+    return getDOMRect(this.element).width;
+  };
+
+  _proto.getTextHeight = function getTextHeight() {
+    return getDOMRect(this.element).height;
   };
 
   return TextWidthHelper;

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

@@ -1 +1 @@
-{"version":3,"sources":["TextWidthHelper.tsx"],"names":["React","RenderContainer","styles","position","left","top","fontSize","TextWidthHelper","element","elementRef","node","render","props","text","getTextWidth","getBoundingClientRect","width","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,eAAT,QAAgC,gCAAhC;;;;;;AAMA,IAAMC,MAA2B,GAAG;AAClCC,EAAAA,QAAQ,EAAE,UADwB;AAElCC,EAAAA,IAAI,EAAE,CAAC,IAF2B;AAGlCC,EAAAA,GAAG,EAAE,CAAC,IAH4B;AAIlCC,EAAAA,QAAQ,EAAE,EAJwB,EAApC;;;AAOA,WAAaC,eAAb;AACUC,IAAAA,OADV,GAC2C,IAD3C;;;;;;;;;;;;;;;;AAiBUC,IAAAA,UAjBV,GAiBuB,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,EAjBvB,6DAGSC,MAHT,GAGE,kBAAgB,CACd,OACE,oBAAC,eAAD,QACE,6BAAK,KAAK,EAAET,MAAZ,EAAoB,GAAG,EAAE,KAAKO,UAA9B,IACG,KAAKG,KAAL,CAAWC,IADd,CADF,CADF,CAOD,CAXH,QAaSC,YAbT,GAaE,wBAA8B,CAC5B,OAAO,KAAKN,OAAL,CAAcO,qBAAd,GAAsCC,KAA7C,CACD,CAfH,0BAAqChB,KAAK,CAACiB,SAA3C","sourcesContent":["import React from 'react';\r\n\r\nimport { RenderContainer } from '../../internal/RenderContainer';\r\n\r\nexport interface TextWidthHelperProps {\r\n  text?: string;\r\n}\r\n\r\nconst styles: React.CSSProperties = {\r\n  position: 'absolute',\r\n  left: -1000,\r\n  top: -1000,\r\n  fontSize: 14,\r\n};\r\n\r\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\r\n  private element: HTMLDivElement | null = null;\r\n\r\n  public render() {\r\n    return (\r\n      <RenderContainer>\r\n        <div style={styles} ref={this.elementRef}>\r\n          {this.props.text}\r\n        </div>\r\n      </RenderContainer>\r\n    );\r\n  }\r\n\r\n  public getTextWidth(): number {\r\n    return this.element!.getBoundingClientRect().width;\r\n  }\r\n\r\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\r\n}\r\n"]}
+{"version":3,"sources":["TextWidthHelper.tsx"],"names":["React","getDOMRect","styles","THIN_SPACE","TextWidthHelper","element","elementRef","node","render","helperContainer","props","theme","classHelp","text","getTextWidth","width","getTextHeight","height","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,UAAT,QAA2B,0BAA3B;;AAEA,SAASC,MAAT,QAAuB,qBAAvB;;AAEA;AACA;AACA,IAAMC,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA;AACA,WAAaC,eAAb;AACUC,IAAAA,OADV,GAC2C,IAD3C;;;;;;;;;;;;;;;;;;;;AAqBUC,IAAAA,UArBV,GAqBuB,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,EArBvB,6DAGSC,MAHT,GAGE,kBAAgB,CACd,oBACE,6BAAK,SAAS,EAAEN,MAAM,CAACO,eAAP,CAAuB,KAAKC,KAAL,CAAWC,KAAlC,CAAhB,iBACE,6BAAK,SAAS,EAAE,KAAKD,KAAL,CAAWE,SAA3B,EAAsC,GAAG,EAAE,KAAKN,UAAhD,IACG,KAAKI,KAAL,CAAWG,IAAX,IAAmBV,UADtB,CADF,CADF,CAOD,CAXH,QAaSW,YAbT,GAaE,wBAA8B,CAC5B,OAAOb,UAAU,CAAC,KAAKI,OAAN,CAAV,CAAyBU,KAAhC,CACD,CAfH,QAiBSC,aAjBT,GAiBE,yBAA+B,CAC7B,OAAOf,UAAU,CAAC,KAAKI,OAAN,CAAV,CAAyBY,MAAhC,CACD,CAnBH,0BAAqCjB,KAAK,CAACkB,SAA3C","sourcesContent":["import React from 'react';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './TokenInput.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  classHelp: string;\n  theme: Theme;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  public render() {\n    return (\n      <div className={styles.helperContainer(this.props.theme)}>\n        <div className={this.props.classHelp} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </div>\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"]}

package/components/TokenInput/TextWidthHelper.d.ts

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