@skbkontur/react-ui 0.0.0-95a1dbe516 → 0.0.0-9cd4422b72

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

@@ -1,6 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.globalClasses = exports.getStyles = exports.getColorStyles = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-
-var _Emotion = require("../../lib/theming/Emotion");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.styles = exports.globalClasses = exports.colorStyles = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
 var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));
 
@@ -10,153 +8,150 @@ var globalClasses = (0, _Emotion.prefix)('token')({
   removeIcon: 'remove-icon' });exports.globalClasses = globalClasses;
 
 
-var getStyles = function getStyles(emotion) {return (
-    (0, _Emotion.memoizeStyle)({
-      token: function token(t) {
-        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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);
+var styles = (0, _Emotion.memoizeStyle)({
+  token: function token(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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);
 
 
 
 
 
 
-      },
 
-      tokenSmall: function tokenSmall(t) {
-        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n      "])),
-        (0, _Token.tokenSizeMixin)(emotion)(
-        t.tokenPaddingYSmall,
-        t.tokenPaddingXSmall,
-        t.tokenLineHeightSmall,
-        t.tokenFontSizeSmall,
-        t.tokenMarginYSmall,
-        t.tokenMarginXSmall));
 
+  },
 
-      },
+  tokenSmall: function tokenSmall(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Token.tokenSizeMixin)(
+    t.tokenPaddingYSmall,
+    t.tokenPaddingXSmall,
+    t.tokenLineHeightSmall,
+    t.tokenFontSizeSmall,
+    t.tokenMarginYSmall,
+    t.tokenMarginXSmall));
 
-      tokenMedium: function tokenMedium(t) {
-        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n      "])),
-        (0, _Token.tokenSizeMixin)(emotion)(
-        t.tokenPaddingYMedium,
-        t.tokenPaddingXMedium,
-        t.tokenLineHeightMedium,
-        t.tokenFontSizeMedium,
-        t.tokenMarginYMedium,
-        t.tokenMarginXMedium));
 
+  },
 
-      },
+  tokenMedium: function tokenMedium(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Token.tokenSizeMixin)(
+    t.tokenPaddingYMedium,
+    t.tokenPaddingXMedium,
+    t.tokenLineHeightMedium,
+    t.tokenFontSizeMedium,
+    t.tokenMarginYMedium,
+    t.tokenMarginXMedium));
 
-      tokenLarge: function tokenLarge(t) {
-        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n      "])),
-        (0, _Token.tokenSizeMixin)(emotion)(
-        t.tokenPaddingYLarge,
-        t.tokenPaddingXLarge,
-        t.tokenLineHeightLarge,
-        t.tokenFontSizeLarge,
-        t.tokenMarginYLarge,
-        t.tokenMarginXLarge));
 
+  },
 
-      },
+  tokenLarge: function tokenLarge(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Token.tokenSizeMixin)(
+    t.tokenPaddingYLarge,
+    t.tokenPaddingXLarge,
+    t.tokenLineHeightLarge,
+    t.tokenFontSizeLarge,
+    t.tokenMarginYLarge,
+    t.tokenMarginXLarge));
 
-      token2022: function token2022(t) {
-        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        border: solid ", " transparent;\n      "])),
-        t.tokenBorderWidth);
 
-      },
+  },
 
-      tokenDefaultIdle2022: function tokenDefaultIdle2022(t) {
-        return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n        background: ", ";\n        border-color: ", ";\n        background-clip: border-box;\n      "])),
-        t.tokenDefaultIdleColor,
-        t.tokenDefaultIdleBg,
-        t.tokenDefaultIdleBorderColor);
+  token2022: function token2022(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: solid ", " transparent;\n    "])),
+    t.tokenBorderWidth);
 
+  },
 
-      },
+  tokenDefaultIdle2022: function tokenDefaultIdle2022(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      background-clip: border-box;\n    "])),
+    t.tokenDefaultIdleColor,
+    t.tokenDefaultIdleBg,
+    t.tokenDefaultIdleBorderColor);
 
-      tokenDefaultIdleHovering2022: function tokenDefaultIdleHovering2022(t) {
-        return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        &:hover {\n          color: ", ";\n          background: ", ";\n          border: solid ", " ", ";\n        }\n      "])),
 
-        t.tokenDefaultIdleColorHover,
-        t.tokenDefaultIdleBgHover,
-        t.tokenBorderWidth, t.tokenDefaultIdleBorderColorHover);
+  },
 
+  tokenDefaultIdleHovering2022: function tokenDefaultIdleHovering2022(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "])),
 
-      },
+    t.tokenDefaultIdleColorHover,
+    t.tokenDefaultIdleBgHover,
+    t.tokenBorderWidth, t.tokenDefaultIdleBorderColorHover);
 
-      tokenDefaultActive2022: function tokenDefaultActive2022(t) {
-        return emotion.css(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      "])),
-        t.tokenDefaultActiveColor,
-        t.tokenDefaultActiveBg,
-        t.tokenBorderWidth, t.tokenDefaultActiveBorderColor);
 
-      },
+  },
 
-      tokenError2022: function tokenError2022(t) {
-        return emotion.css(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n        border: solid ", " ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      "])),
-        t.tokenBorderWidth, t.tokenBorderColorError,
-        t.tokenOutlineWidth, t.tokenBorderColorError);
+  tokenDefaultActive2022: function tokenDefaultActive2022(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])),
+    t.tokenDefaultActiveColor,
+    t.tokenDefaultActiveBg,
+    t.tokenBorderWidth, t.tokenDefaultActiveBorderColor);
 
-      },
+  },
 
-      tokenWarning2022: function tokenWarning2022(t) {
-        return emotion.css(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n        border: solid ", " ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      "])),
-        t.tokenBorderWidth, t.tokenBorderColorWarning,
-        t.tokenOutlineWidth, t.tokenBorderColorWarning);
+  tokenError2022: function tokenError2022(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])),
+    t.tokenBorderWidth, t.tokenBorderColorError,
+    t.tokenOutlineWidth, t.tokenBorderColorError);
 
-      },
+  },
 
-      tokenDisabled2022: function tokenDisabled2022(t) {
-        return emotion.css(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n        user-select: text;\n        cursor: text;\n        color: ", ";\n        pointer-events: none;\n        border: solid 1px ", ";\n\n        .", " {\n          visibility: hidden;\n        }\n      "])),
+  tokenWarning2022: function tokenWarning2022(t) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])),
+    t.tokenBorderWidth, t.tokenBorderColorWarning,
+    t.tokenOutlineWidth, t.tokenBorderColorWarning);
 
+  },
 
-        t.tokenTextColorDisabled,
+  tokenDisabled2022: function tokenDisabled2022(t) {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\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.tokenBorderColorDisabled,
 
-        globalClasses.removeIcon);
+    t.tokenTextColorDisabled,
 
+    t.tokenBorderColorDisabled,
 
+    globalClasses.removeIcon);
 
-      },
 
-      disabled: function disabled(t) {
-        return emotion.css(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n        user-select: text;\n        cursor: text;\n        color: ", ";\n        pointer-events: none;\n\n        .", " {\n          visibility: hidden;\n        }\n      "])),
 
+  },
 
-        t.tokenTextColorDisabled,
+  disabled: function disabled(t) {
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n\n      .", " {\n        visibility: hidden;\n      }\n    "])),
 
 
-        globalClasses.removeIcon);
+    t.tokenTextColorDisabled,
 
 
+    globalClasses.removeIcon);
 
-      },
 
-      text: function text(t) {
-        return emotion.css(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: inline-block;\n        padding-bottom: ", ";\n      "])),
 
-        t.tokenLegacyTextShift);
+  },
 
-      },
+  text: function text(t) {
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])),
 
-      removeIcon: function removeIcon(t) {
-        return emotion.css(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\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.tokenLegacyTextShift);
 
-        t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX,
-        t.tokenRemoveIconBoxSizing,
-        t.tokenRemoveIconGap);
+  },
 
+  removeIcon: function removeIcon(t) {
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\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);
 
 
 
@@ -165,45 +160,45 @@ var getStyles = function getStyles(emotion) {return (
 
 
 
-      },
 
-      helperText: function helperText() {
-        return emotion.css(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\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      "])));
 
+  },
 
+  helperText: function helperText() {
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\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 emotion.css(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: flex;\n        position: absolute;\n        visibility: hidden;\n      "])));
 
 
+  },
+  helperContainer: function helperContainer() {
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    "])));
 
 
-      },
-      helperContainerSmall: function helperContainerSmall(t) {
-        return emotion.css(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n        left: ", ";\n        right: ", ";\n      "])),
-        t.tokenInputPaddingXSmall,
-        t.tokenInputPaddingXSmall);
 
-      },
-      helperContainerMedium: function helperContainerMedium(t) {
-        return emotion.css(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n        left: ", ";\n        right: ", ";\n      "])),
-        t.tokenInputPaddingXMedium,
-        t.tokenInputPaddingXMedium);
 
-      },
-      helperContainerLarge: function helperContainerLarge(t) {
-        return emotion.css(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n        left: ", ";\n        right: ", ";\n      "])),
-        t.tokenInputPaddingXLarge,
-        t.tokenInputPaddingXLarge);
+  },
+  helperContainerSmall: function helperContainerSmall(t) {
+    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      left: ", ";\n      right: ", ";\n    "])),
+    t.tokenInputPaddingXSmall,
+    t.tokenInputPaddingXSmall);
 
-      } }));};exports.getStyles = getStyles;
+  },
+  helperContainerMedium: function helperContainerMedium(t) {
+    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      left: ", ";\n      right: ", ";\n    "])),
+    t.tokenInputPaddingXMedium,
+    t.tokenInputPaddingXMedium);
 
+  },
+  helperContainerLarge: function helperContainerLarge(t) {
+    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      left: ", ";\n      right: ", ";\n    "])),
+    t.tokenInputPaddingXLarge,
+    t.tokenInputPaddingXLarge);
 
+  } });exports.styles = styles;
 
 
 
@@ -224,71 +219,68 @@ var getStyles = function getStyles(emotion) {return (
 
 
 
-var getColorStyles = function getColorStyles(emotion) {
-  var tokenColors = [
-  { 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 (0, _extends3.default)({},
-    colors, (_extends2 = {}, _extends2[
-    name] = function (t, v) {
-      var getVStyle = function getVStyle() {
-        if (v === 'error') {
-          return emotion.css(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])),
-          t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
 
-        } else if (v === 'warning') {
-          return emotion.css(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])),
-          t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
 
-        }
+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 (0, _extends3.default)({},
+  colors, (_extends2 = {}, _extends2[
+  name] = function (t, v) {
+    var getVStyle = function getVStyle() {
+      if (v === 'error') {
+        return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])),
+        t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
 
-        return '';
-      };
+      } else if (v === 'warning') {
+        return (0, _Emotion.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])),
+        t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
 
-      return emotion.css(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\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(),
+      return '';
+    };
 
-      globalClasses.removeIcon,
-      ColorFunctions.contrast(color(t)));
+    return (0, _Emotion.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\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(),
 
-    }, _extends2));},
+    globalClasses.removeIcon,
+    ColorFunctions.contrast(color(t)));
 
-  {
-    defaultDisabled: function defaultDisabled(t) {
-      return emotion.css(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])),
-      t.tokenDisabledBg,
-      t.tokenShadowDisabled);
 
-    },
-    defaultDisabledWarning: function defaultDisabledWarning(t) {
-      return emotion.css(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
-      t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
+  }, _extends2));},
 
-    },
-    defaultDisabledError: function defaultDisabledError(t) {
-      return emotion.css(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
-      t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
+{
+  defaultDisabled: function defaultDisabled(t) {
+    return (0, _Emotion.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])),
+    t.tokenDisabledBg,
+    t.tokenShadowDisabled);
 
-    } });
+  },
+  defaultDisabledWarning: function defaultDisabledWarning(t) {
+    return (0, _Emotion.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
+    t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
 
+  },
+  defaultDisabledError: function defaultDisabledError(t) {
+    return (0, _Emotion.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
+    t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
 
-  return tokenColors;
-};exports.getColorStyles = getColorStyles;
+  } });exports.colorStyles = colorStyles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Token.styles.ts"],"names":["globalClasses","removeIcon","getStyles","emotion","token","t","css","tokenBorderRadius","tokenSmall","tokenPaddingYSmall","tokenPaddingXSmall","tokenLineHeightSmall","tokenFontSizeSmall","tokenMarginYSmall","tokenMarginXSmall","tokenMedium","tokenPaddingYMedium","tokenPaddingXMedium","tokenLineHeightMedium","tokenFontSizeMedium","tokenMarginYMedium","tokenMarginXMedium","tokenLarge","tokenPaddingYLarge","tokenPaddingXLarge","tokenLineHeightLarge","tokenFontSizeLarge","tokenMarginYLarge","tokenMarginXLarge","token2022","tokenBorderWidth","tokenDefaultIdle2022","tokenDefaultIdleColor","tokenDefaultIdleBg","tokenDefaultIdleBorderColor","tokenDefaultIdleHovering2022","tokenDefaultIdleColorHover","tokenDefaultIdleBgHover","tokenDefaultIdleBorderColorHover","tokenDefaultActive2022","tokenDefaultActiveColor","tokenDefaultActiveBg","tokenDefaultActiveBorderColor","tokenError2022","tokenBorderColorError","tokenOutlineWidth","tokenWarning2022","tokenBorderColorWarning","tokenDisabled2022","tokenTextColorDisabled","tokenBorderColorDisabled","disabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","helperText","helperContainer","helperContainerSmall","tokenInputPaddingXSmall","helperContainerMedium","tokenInputPaddingXMedium","helperContainerLarge","tokenInputPaddingXLarge","getColorStyles","tokenColors","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","getVStyle","ColorFunctions","contrast","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { 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 getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    token(t: Theme) {\n      return emotion.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 emotion.css`\n        ${tokenSizeMixin(emotion)(\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 emotion.css`\n        ${tokenSizeMixin(emotion)(\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 emotion.css`\n        ${tokenSizeMixin(emotion)(\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 emotion.css`\n        border: solid ${t.tokenBorderWidth} transparent;\n      `;\n    },\n\n    tokenDefaultIdle2022(t: Theme) {\n      return emotion.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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.css`\n        display: inline-block;\n        padding-bottom: ${t.tokenLegacyTextShift};\n      `;\n    },\n\n    removeIcon(t: Theme) {\n      return emotion.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 emotion.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 emotion.css`\n        display: flex;\n        position: absolute;\n        visibility: hidden;\n      `;\n    },\n    helperContainerSmall(t: Theme) {\n      return emotion.css`\n        left: ${t.tokenInputPaddingXSmall};\n        right: ${t.tokenInputPaddingXSmall};\n      `;\n    },\n    helperContainerMedium(t: Theme) {\n      return emotion.css`\n        left: ${t.tokenInputPaddingXMedium};\n        right: ${t.tokenInputPaddingXMedium};\n      `;\n    },\n    helperContainerLarge(t: Theme) {\n      return emotion.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 getColorStyles = (emotion: Emotion) => {\n  const tokenColors = [\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 emotion.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 emotion.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 emotion.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 emotion.css`\n        background-color: ${t.tokenDisabledBg};\n        box-shadow: ${t.tokenShadowDisabled};\n      `;\n      },\n      defaultDisabledWarning(t: Theme) {\n        return emotion.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 emotion.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  return tokenColors;\n};\n"]}
+{"version":3,"sources":["Token.styles.ts"],"names":["globalClasses","removeIcon","styles","token","t","css","tokenBorderRadius","tokenSmall","tokenPaddingYSmall","tokenPaddingXSmall","tokenLineHeightSmall","tokenFontSizeSmall","tokenMarginYSmall","tokenMarginXSmall","tokenMedium","tokenPaddingYMedium","tokenPaddingXMedium","tokenLineHeightMedium","tokenFontSizeMedium","tokenMarginYMedium","tokenMarginXMedium","tokenLarge","tokenPaddingYLarge","tokenPaddingXLarge","tokenLineHeightLarge","tokenFontSizeLarge","tokenMarginYLarge","tokenMarginXLarge","token2022","tokenBorderWidth","tokenDefaultIdle2022","tokenDefaultIdleColor","tokenDefaultIdleBg","tokenDefaultIdleBorderColor","tokenDefaultIdleHovering2022","tokenDefaultIdleColorHover","tokenDefaultIdleBgHover","tokenDefaultIdleBorderColorHover","tokenDefaultActive2022","tokenDefaultActiveColor","tokenDefaultActiveBg","tokenDefaultActiveBorderColor","tokenError2022","tokenBorderColorError","tokenOutlineWidth","tokenWarning2022","tokenBorderColorWarning","tokenDisabled2022","tokenTextColorDisabled","tokenBorderColorDisabled","disabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","helperText","helperContainer","helperContainerSmall","tokenInputPaddingXSmall","helperContainerMedium","tokenInputPaddingXMedium","helperContainerLarge","tokenInputPaddingXLarge","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","getVStyle","ColorFunctions","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\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: 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/cjs/components/Token/TokenView.js

@@ -1,9 +1,9 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.TokenView = TokenView;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.TokenView = TokenView;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _Emotion = require("../../lib/theming/Emotion");
 var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
-var _useTheme = require("../../lib/theming/useTheme");
 
 
 var _Token = require("./Token.styles");var _excluded = ["size", "children", "closeButton", "hideCloseButton", "className"];
@@ -14,34 +14,31 @@ var _Token = require("./Token.styles");var _excluded = ["size", "children", "clo
 
 
 
-function TokenView(props) {var _emotion$cx;
+function TokenView(props) {var _cx;
   var _props$size = props.size,size = _props$size === void 0 ? 'small' : _props$size,children = props.children,closeButton = props.closeButton,hideCloseButton = props.hideCloseButton,className = props.className,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var theme = (0, _useTheme.useTheme)();
-  var emotion = (0, _Emotion.useEmotion)();
-  var styles = (0, _Token.getStyles)(emotion);
-
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
   var getSizeClassName = function getSizeClassName(size) {
     switch (size) {
       case 'large':
-        return styles.tokenLarge(theme);
+        return _Token.styles.tokenLarge(theme);
       case 'medium':
-        return styles.tokenMedium(theme);
+        return _Token.styles.tokenMedium(theme);
       case 'small':
       default:
-        return styles.tokenSmall(theme);}
+        return _Token.styles.tokenSmall(theme);}
 
   };
   var closeButtonNode = hideCloseButton ? null : /*#__PURE__*/
-  _react.default.createElement("span", { className: emotion.cx(styles.removeIcon(theme), _Token.globalClasses.removeIcon) }, closeButton);
+  _react.default.createElement("span", { className: (0, _Emotion.cx)(_Token.styles.removeIcon(theme), _Token.globalClasses.removeIcon) }, closeButton);
 
 
   return /*#__PURE__*/(
     _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
     _react.default.createElement("div", (0, _extends2.default)({},
     rest, {
-      className: emotion.cx(getSizeClassName(size), (_emotion$cx = {}, _emotion$cx[
-      styles.token(theme)] = true, _emotion$cx[
-      styles.token2022(theme)] = (0, _ThemeHelpers.isTheme2022)(theme), _emotion$cx)) }),
+      className: (0, _Emotion.cx)(getSizeClassName(size), (_cx = {}, _cx[
+      _Token.styles.token(theme)] = true, _cx[
+      _Token.styles.token2022(theme)] = (0, _ThemeHelpers.isTheme2022)(theme), _cx)) }),
 
 
     children,

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

@@ -1 +1 @@
-{"version":3,"sources":["TokenView.tsx"],"names":["TokenView","props","size","children","closeButton","hideCloseButton","className","rest","theme","emotion","styles","getSizeClassName","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","cx","removeIcon","globalClasses","token","token2022"],"mappings":"gXAAA;;AAEA;AACA;AACA;AACA;;;AAGA,uC;;;;;;;;AAQO,SAASA,SAAT,CAAmBC,KAAnB,EAA0C;AAC/C,oBAAuFA,KAAvF,CAAQC,IAAR,CAAQA,IAAR,4BAAe,OAAf,eAAwBC,QAAxB,GAAuFF,KAAvF,CAAwBE,QAAxB,CAAkCC,WAAlC,GAAuFH,KAAvF,CAAkCG,WAAlC,CAA+CC,eAA/C,GAAuFJ,KAAvF,CAA+CI,eAA/C,CAAgEC,SAAhE,GAAuFL,KAAvF,CAAgEK,SAAhE,CAA8EC,IAA9E,+CAAuFN,KAAvF;AACA,MAAMO,KAAK,GAAG,yBAAd;AACA,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,MAAM,GAAG,sBAAUD,OAAV,CAAf;;AAEA,MAAME,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACT,IAAD,EAAqB;AAC5C,YAAQA,IAAR;AACE,WAAK,OAAL;AACE,eAAOQ,MAAM,CAACE,UAAP,CAAkBJ,KAAlB,CAAP;AACF,WAAK,QAAL;AACE,eAAOE,MAAM,CAACG,WAAP,CAAmBL,KAAnB,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOE,MAAM,CAACI,UAAP,CAAkBN,KAAlB,CAAP,CAPJ;;AASD,GAVD;AAWA,MAAMO,eAAe,GAAGV,eAAe,GAAG,IAAH;AACrC,yCAAM,SAAS,EAAEI,OAAO,CAACO,EAAR,CAAWN,MAAM,CAACO,UAAP,CAAkBT,KAAlB,CAAX,EAAqCU,qBAAcD,UAAnD,CAAjB,IAAkFb,WAAlF,CADF;;;AAIA;AACE,iCAAC,4BAAD,EAAmBH,KAAnB;AACE;AACMM,IAAAA,IADN;AAEE,MAAA,SAAS,EAAEE,OAAO,CAACO,EAAR,CAAWL,gBAAgB,CAACT,IAAD,CAA3B;AACRQ,MAAAA,MAAM,CAACS,KAAP,CAAaX,KAAb,CADQ,IACc,IADd;AAERE,MAAAA,MAAM,CAACU,SAAP,CAAiBZ,KAAjB,CAFQ,IAEkB,+BAAYA,KAAZ,CAFlB,eAFb;;;AAOGL,IAAAA,QAPH;AAQGY,IAAAA,eARH,CADF,CADF;;;;AAcD","sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { TokenSize } from './Token';\nimport { getStyles, globalClasses } 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 = useTheme();\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n\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={emotion.cx(styles.removeIcon(theme), globalClasses.removeIcon)}>{closeButton}</span>\n  );\n\n  return (\n    <CommonWrapper {...props}>\n      <div\n        {...rest}\n        className={emotion.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"]}
+{"version":3,"sources":["TokenView.tsx"],"names":["TokenView","props","size","children","closeButton","hideCloseButton","className","rest","theme","ThemeContext","getSizeClassName","styles","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","removeIcon","globalClasses","token","token2022"],"mappings":"+cAAA;;AAEA;AACA;AACA;AACA;;;AAGA,uC;;;;;;;;AAQO,SAASA,SAAT,CAAmBC,KAAnB,EAA0C;AAC/C,oBAAuFA,KAAvF,CAAQC,IAAR,CAAQA,IAAR,4BAAe,OAAf,eAAwBC,QAAxB,GAAuFF,KAAvF,CAAwBE,QAAxB,CAAkCC,WAAlC,GAAuFH,KAAvF,CAAkCG,WAAlC,CAA+CC,eAA/C,GAAuFJ,KAAvF,CAA+CI,eAA/C,CAAgEC,SAAhE,GAAuFL,KAAvF,CAAgEK,SAAhE,CAA8EC,IAA9E,+CAAuFN,KAAvF;AACA,MAAMO,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACR,IAAD,EAAqB;AAC5C,YAAQA,IAAR;AACE,WAAK,OAAL;AACE,eAAOS,cAAOC,UAAP,CAAkBJ,KAAlB,CAAP;AACF,WAAK,QAAL;AACE,eAAOG,cAAOE,WAAP,CAAmBL,KAAnB,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOG,cAAOG,UAAP,CAAkBN,KAAlB,CAAP,CAPJ;;AASD,GAVD;AAWA,MAAMO,eAAe,GAAGV,eAAe,GAAG,IAAH;AACrC,yCAAM,SAAS,EAAE,iBAAGM,cAAOK,UAAP,CAAkBR,KAAlB,CAAH,EAA6BS,qBAAcD,UAA3C,CAAjB,IAA0EZ,WAA1E,CADF;;;AAIA;AACE,iCAAC,4BAAD,EAAmBH,KAAnB;AACE;AACMM,IAAAA,IADN;AAEE,MAAA,SAAS,EAAE,iBAAGG,gBAAgB,CAACR,IAAD,CAAnB;AACRS,oBAAOO,KAAP,CAAaV,KAAb,CADQ,IACc,IADd;AAERG,oBAAOQ,SAAP,CAAiBX,KAAjB,CAFQ,IAEkB,+BAAYA,KAAZ,CAFlB,OAFb;;;AAOGL,IAAAA,QAPH;AAQGY,IAAAA,eARH,CADF,CADF;;;;AAcD","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"]}

package/cjs/components/TokenInput/TextWidthHelper.d.ts

@@ -11,11 +11,9 @@ export interface TextWidthHelperProps {
  * для последующего выставления размеров input
  */
 export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
-    private emotion;
     private element;
     private getSizeClassName;
     render(): JSX.Element;
-    renderMain(): JSX.Element;
     getTextWidth(): number;
     getTextHeight(): number;
     private elementRef;