@skbkontur/react-ui 0.0.0-80ce75eca6 → 0.0.0-85ea551f96

package/components/Toggle/Toggle.styles/Toggle.styles.js

@@ -1,193 +1,76 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject14() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding: 0 ", " 0 0;\n    "]);
-
-  _templateObject14 = function _templateObject14() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject13() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding: 0 0 0 ", ";\n    "]);
-
-  _templateObject13 = function _templateObject13() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject12() {
-  var data = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "]);
-
-  _templateObject12 = function _templateObject12() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject11() {
-  var data = _taggedTemplateLiteralLoose(["\n      opacity: 0.3;\n      cursor: default !important;\n\n      ", " {\n        background: ", ";\n      }\n    "]);
-
-  _templateObject11 = function _templateObject11() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject10() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      height: ", ";\n      position: relative;\n      width: ", ";\n      flex: 1 0 ", ";\n\n      &::after {\n        content: '';\n        display: inline-block;\n      }\n    "]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = _taggedTemplateLiteralLoose(["\n      ", ":checked ~ ", "& {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n\n        ", " {\n          background: ", ";\n        }\n      }\n    "]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose(["\n      ", ":checked ~ ", "& {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n\n        ", " {\n          background: ", ";\n        }\n      }\n    "]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n      ", ":checked ~ ", "& {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n      }\n      ", " {\n        background: ", ";\n      }\n    "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      ", "&, ", ":checked ~ & {\n        box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n      }\n    "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      box-shadow: inset 0 0 0 ", " ", ";\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ ", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ ", " ", " {\n        width: 70%;\n        background: ", ";\n      }\n      &:checked ~ ", " {\n        transform: translateX(", ") translateX(-", ");\n      }\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      bottom: ", ";\n      box-shadow: 0 ", " 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ", " rgba(0, 0, 0, 0.15);\n      height: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n      transition: 0.2s ease-in;\n      width: ", ";\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      cursor: pointer;\n\n      &:hover:not(", ") {\n        ", " {\n          background: ", ";\n        }\n      }\n      &:active:not(", ") ", " {\n        width: ", ";\n      }\n      &:active:not(", ") ", ":checked ~ ", " {\n        transform: translateX(", ") translateX(-", ")\n          translateX(-", ");\n      }\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+
+import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+export var globalClasses = prefix('toggle')({
+  handle: 'handle',
+  container: 'container',
+  disabled: 'disabled',
+  containerDisabled: 'container-disabled',
+  containerLoading: 'container-loading',
+  background: 'background'
+});
+export var styles = memoizeStyle({
   root: function root(t) {
-    var disabled = cssName(styles.disabled(t));
     var handleWidthWithBorders = t.toggleHeight;
     var handleActiveWidth = "calc(" + handleWidthWithBorders + " - 2 * " + t.toggleBorderWidth + " + " + t.toggleHandleActiveWidthIncrement + ")";
-    return css(_templateObject(), disabled, cssName(styles.handle(t)), t.toggleBgHover, disabled, cssName(styles.handle(t)), handleActiveWidth, disabled, cssName(styles.input(t)), cssName(styles.handle(t)), t.toggleWidth, handleWidthWithBorders, t.toggleHandleActiveWidthIncrement);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      cursor: pointer;\n\n      &:hover .", " {\n        background: ", ";\n      }\n      &:active:not(.", ") .", " {\n        width: ", ";\n      }\n      &:active:not(.", ") input:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ")\n          translateX(-", ");\n      }\n    "])), globalClasses.handle, t.toggleBgHover, globalClasses.disabled, globalClasses.handle, handleActiveWidth, globalClasses.disabled, globalClasses.handle, t.toggleWidth, handleWidthWithBorders, t.toggleHandleActiveWidthIncrement);
   },
   handle: function handle(t) {
     var handleSize = "calc(" + t.toggleHeight + " - 2 * " + t.toggleBorderWidth + ")";
-    return css(_templateObject2(), t.toggleBg, t.toggleHandleBorderRadius, t.toggleBorderWidth, t.toggleBorderWidth, t.toggleBorderWidth, handleSize, t.toggleBorderWidth, t.toggleBorderWidth, handleSize);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      bottom: ", ";\n      box-shadow: 0 ", " 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ", " rgba(0, 0, 0, 0.15);\n      height: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n      transition: 0.2s ease-in;\n      width: ", ";\n    "])), t.toggleBg, t.toggleHandleBorderRadius, t.toggleBorderWidth, t.toggleBorderWidth, t.toggleBorderWidth, handleSize, t.toggleBorderWidth, t.toggleBorderWidth, handleSize);
+  },
+  handleDisabled: function handleDisabled(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override root hover/active styles\n    "])), t.toggleDisabledHandleBg);
   },
   input: function input(t) {
     var handleWidthWithBorders = t.toggleHeight;
-    return css(_templateObject3(), cssName(styles.container(t)), t.toggleBorderWidth, t.toggleBgChecked, t.toggleBgChecked, cssName(styles.container(t)), cssName(styles.activeBackground()), t.toggleBgChecked, cssName(styles.handle(t)), t.toggleWidth, handleWidthWithBorders);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n        border-radius: calc(", " * 0.5) 0 0 calc(", " * 0.5);\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n      &:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ");\n      }\n    "])), globalClasses.container, t.toggleBorderWidth, t.toggleBgChecked, t.toggleBgChecked, globalClasses.containerDisabled, t.toggleBorderWidth, t.toggleBorderColorDisabledChecked, t.toggleBgDisabledChecked, globalClasses.containerLoading, t.toggleBorderColor, t.toggleBorderWidth, t.toggleBorderColor, globalClasses.container, globalClasses.background, t.toggleBgChecked, globalClasses.containerDisabled, globalClasses.background, t.toggleBgDisabledChecked, t.toggleHeight, t.toggleHeight, t.toggleBorderColorDisabledChecked, globalClasses.handle, t.toggleWidth, handleWidthWithBorders);
   },
   container: function container(t) {
-    return css(_templateObject4(), t.toggleBorderRadius, t.toggleBorderWidth, t.toggleBorderColor);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      box-shadow: inset 0 0 0 ", " ", ";\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    "])), t.toggleBorderRadius, t.toggleBorderWidth, t.toggleBorderColor);
+  },
+  containerDisabled: function containerDisabled(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
   },
   focused: function focused(t) {
-    return css(_templateObject5(), cssName(styles.container(t)), cssName(styles.input(t)), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
   },
   activeBackground: function activeBackground() {
-    return css(_templateObject6());
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    "])));
+  },
+  disabledBackground: function disabledBackground(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ";\n      width: 0;\n    "])), t.toggleBorderColorDisabled);
   },
-  isLoading: function isLoading(t) {
-    return css(_templateObject7(), cssName(styles.input(t)), cssName(styles.container(t)), t.toggleBorderColor, t.toggleBorderWidth, t.toggleBorderColor, cssName(styles.activeBackground()), t.toggleBgActive);
+  activeBackgroundLoading: function activeBackgroundLoading(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.toggleBgActive);
   },
   isWarning: function isWarning(t) {
-    return css(_templateObject8(), cssName(styles.input(t)), cssName(styles.container(t)), t.toggleBgWarning, t.toggleBorderWidth, t.toggleBgWarning, cssName(styles.activeBackground()), t.toggleBgWarning);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
   },
   isError: function isError(t) {
-    return css(_templateObject9(), cssName(styles.input(t)), cssName(styles.container(t)), t.toggleBgError, t.toggleBorderWidth, t.toggleBgError, cssName(styles.activeBackground()), t.toggleBgError);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
+  },
+  outline: function outline(t) {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n    "])), t.toggleBaseBg, t.toggleBorderRadius);
   },
   wrapper: function wrapper(t) {
-    return css(_templateObject10(), t.toggleHeight, t.toggleWidth, t.toggleWidth);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      height: ", ";\n      position: relative;\n      width: ", ";\n      flex: 1 0 ", ";\n\n      &::after {\n        content: '';\n        display: inline-block;\n      }\n    "])), t.toggleHeight, t.toggleWidth, t.toggleWidth);
   },
-  disabled: function disabled(t) {
-    return css(_templateObject11(), cssName(styles.container(t)), t.toggleBgDisabled);
+  disabled: function disabled() {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
   },
   rootLeft: function rootLeft() {
-    return css(_templateObject12());
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "])));
   },
   caption: function caption(t) {
-    return css(_templateObject13(), t.toggleCaptionGap);
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n    "])), t.toggleTextColor, t.toggleCaptionGap);
+  },
+  disabledCaption: function disabledCaption(t) {
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDisabled);
   },
   captionLeft: function captionLeft(t) {
-    return css(_templateObject14(), t.toggleCaptionGap);
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/Toggle/Toggle.styles/Toggle.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.styles.ts"],"names":["css","cssName","memoizeStyle","styles","root","t","disabled","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","handle","toggleBgHover","input","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","container","toggleBgChecked","activeBackground","toggleBorderRadius","toggleBorderColor","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","isLoading","toggleBgActive","isWarning","toggleBgWarning","isError","toggleBgError","wrapper","toggleBgDisabled","rootLeft","caption","toggleCaptionGap","captionLeft","jsStyles"],"mappings":"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","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    const disabled = cssName(styles.disabled(t));\r\n    const handleWidthWithBorders = t.toggleHeight;\r\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\r\n    return css`\r\n      display: inline-flex;\r\n      cursor: pointer;\r\n\r\n      &:hover:not(${disabled}) {\r\n        ${cssName(styles.handle(t))} {\r\n          background: ${t.toggleBgHover};\r\n        }\r\n      }\r\n      &:active:not(${disabled}) ${cssName(styles.handle(t))} {\r\n        width: ${handleActiveWidth};\r\n      }\r\n      &:active:not(${disabled}) ${cssName(styles.input(t))}:checked ~ ${cssName(styles.handle(t))} {\r\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\r\n          translateX(-${t.toggleHandleActiveWidthIncrement});\r\n      }\r\n    `;\r\n  },\r\n\r\n  handle(t: Theme) {\r\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\r\n    return css`\r\n      background: ${t.toggleBg};\r\n      border-radius: ${t.toggleHandleBorderRadius};\r\n      bottom: ${t.toggleBorderWidth};\r\n      box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\r\n      height: ${handleSize};\r\n      left: ${t.toggleBorderWidth};\r\n      position: absolute;\r\n      top: ${t.toggleBorderWidth};\r\n      transition: 0.2s ease-in;\r\n      width: ${handleSize};\r\n    `;\r\n  },\r\n\r\n  input(t: Theme) {\r\n    const handleWidthWithBorders = t.toggleHeight;\r\n    return css`\r\n      position: absolute;\r\n      opacity: 0;\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n      &:checked ~ ${cssName(styles.container(t))} {\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\r\n        background: ${t.toggleBgChecked};\r\n        transition: background 0s 0.2s;\r\n      }\r\n      &:checked ~ ${cssName(styles.container(t))} ${cssName(styles.activeBackground())} {\r\n        width: 70%;\r\n        background: ${t.toggleBgChecked};\r\n      }\r\n      &:checked ~ ${cssName(styles.handle(t))} {\r\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\r\n      }\r\n    `;\r\n  },\r\n\r\n  container(t: Theme) {\r\n    return css`\r\n      border-radius: ${t.toggleBorderRadius};\r\n      box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\r\n      height: 100%;\r\n      overflow: hidden;\r\n      position: absolute;\r\n      width: 100%;\r\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\r\n      z-index: 0;\r\n    `;\r\n  },\r\n\r\n  focused(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.container(t))}&, ${cssName(styles.input(t))}:checked ~ & {\r\n        box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\r\n      }\r\n    `;\r\n  },\r\n\r\n  activeBackground() {\r\n    return css`\r\n      background: inherit;\r\n      bottom: 0;\r\n      left: 0;\r\n      position: absolute;\r\n      top: 0;\r\n      transition: 0.2s ease-in;\r\n      width: 10px;\r\n    `;\r\n  },\r\n\r\n  isLoading(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.input(t))}:checked ~ ${cssName(styles.container(t))}& {\r\n        background: ${t.toggleBorderColor};\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\r\n      }\r\n      ${cssName(styles.activeBackground())} {\r\n        background: ${t.toggleBgActive};\r\n      }\r\n    `;\r\n  },\r\n\r\n  isWarning(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.input(t))}:checked ~ ${cssName(styles.container(t))}& {\r\n        background: ${t.toggleBgWarning};\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgWarning};\r\n\r\n        ${cssName(styles.activeBackground())} {\r\n          background: ${t.toggleBgWarning};\r\n        }\r\n      }\r\n    `;\r\n  },\r\n\r\n  isError(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.input(t))}:checked ~ ${cssName(styles.container(t))}& {\r\n        background: ${t.toggleBgError};\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgError};\r\n\r\n        ${cssName(styles.activeBackground())} {\r\n          background: ${t.toggleBgError};\r\n        }\r\n      }\r\n    `;\r\n  },\r\n\r\n  wrapper(t: Theme) {\r\n    return css`\r\n      display: inline-block;\r\n      height: ${t.toggleHeight};\r\n      position: relative;\r\n      width: ${t.toggleWidth};\r\n      flex: 1 0 ${t.toggleWidth};\r\n\r\n      &::after {\r\n        content: '';\r\n        display: inline-block;\r\n      }\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      opacity: 0.3;\r\n      cursor: default !important;\r\n\r\n      ${cssName(styles.container(t))} {\r\n        background: ${t.toggleBgDisabled};\r\n      }\r\n    `;\r\n  },\r\n\r\n  rootLeft() {\r\n    return css`\r\n      flex-direction: row-reverse;\r\n    `;\r\n  },\r\n\r\n  caption(t: Theme) {\r\n    return css`\r\n      padding: 0 0 0 ${t.toggleCaptionGap};\r\n    `;\r\n  },\r\n\r\n  captionLeft(t: Theme) {\r\n    return css`\r\n      padding: 0 ${t.toggleCaptionGap} 0 0;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Toggle.styles.ts"],"names":["css","memoizeStyle","prefix","globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","toggleBgHover","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","outline","toggleBaseBg","wrapper","rootLeft","caption","toggleTextColor","toggleCaptionGap","disabledCaption","textColorDisabled","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('toggle')({\n  handle: 'handle',\n  container: 'container',\n  disabled: 'disabled',\n  containerDisabled: 'container-disabled',\n  containerLoading: 'container-loading',\n  background: 'background',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n    return css`\n      display: inline-flex;\n      cursor: pointer;\n\n      &:hover .${globalClasses.handle} {\n        background: ${t.toggleBgHover};\n      }\n      &:active:not(.${globalClasses.disabled}) .${globalClasses.handle} {\n        width: ${handleActiveWidth};\n      }\n      &:active:not(.${globalClasses.disabled}) input:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\n          translateX(-${t.toggleHandleActiveWidthIncrement});\n      }\n    `;\n  },\n\n  handle(t: Theme) {\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n    return css`\n      background: ${t.toggleBg};\n      border-radius: ${t.toggleHandleBorderRadius};\n      bottom: ${t.toggleBorderWidth};\n      box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\n      height: ${handleSize};\n      left: ${t.toggleBorderWidth};\n      position: absolute;\n      top: ${t.toggleBorderWidth};\n      transition: 0.2s ease-in;\n      width: ${handleSize};\n    `;\n  },\n\n  handleDisabled(t: Theme) {\n    return css`\n      background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n    `;\n  },\n\n  input(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    return css`\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .${globalClasses.container} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n        background: ${t.toggleBgChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerDisabled} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColorDisabledChecked};\n        background: ${t.toggleBgDisabledChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerLoading} {\n        background: ${t.toggleBorderColor};\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      }\n      &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgChecked};\n      }\n      &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgDisabledChecked};\n        border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n        box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n      }\n      &:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n      }\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      border-radius: ${t.toggleBorderRadius};\n      box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    `;\n  },\n\n  containerDisabled(t: Theme) {\n    return css`\n      background: ${t.toggleBgDisabled};\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n    `;\n  },\n\n  activeBackground() {\n    return css`\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    `;\n  },\n\n  disabledBackground(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n      width: 0;\n    `;\n  },\n\n  activeBackgroundLoading(t: Theme) {\n    return css`\n      background: ${t.toggleBgActive};\n    `;\n  },\n\n  isWarning(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n    `;\n  },\n\n  isError(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n    `;\n  },\n\n  outline(t: Theme) {\n    return css`\n      background: ${t.toggleBaseBg};\n      border-radius: ${t.toggleBorderRadius};\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      display: inline-block;\n      height: ${t.toggleHeight};\n      position: relative;\n      width: ${t.toggleWidth};\n      flex: 1 0 ${t.toggleWidth};\n\n      &::after {\n        content: '';\n        display: inline-block;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n    `;\n  },\n\n  rootLeft() {\n    return css`\n      flex-direction: row-reverse;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 0 0 ${t.toggleCaptionGap};\n    `;\n  },\n\n  disabledCaption(t: Theme) {\n    return css`\n      color: ${t.textColorDisabled};\n    `;\n  },\n\n  captionLeft(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 ${t.toggleCaptionGap} 0 0;\n    `;\n  },\n});\n"]}

package/components/Toggle/Toggle.styles.d.ts

@@ -1,16 +1,30 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    handle(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    input(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    container(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    focused(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    handle: string;
+    container: string;
+    disabled: string;
+    containerDisabled: string;
+    containerLoading: string;
+    background: string;
+};
+export declare const styles: {
+    root(t: Theme): string;
+    handle(t: Theme): string;
+    handleDisabled(t: Theme): string;
+    input(t: Theme): string;
+    container(t: Theme): string;
+    containerDisabled(t: Theme): string;
+    focused(t: Theme): string;
     activeBackground(): string;
-    isLoading(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    isWarning(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    isError(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    wrapper(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    disabledBackground(t: Theme): string;
+    activeBackgroundLoading(t: Theme): string;
+    isWarning(t: Theme): string;
+    isError(t: Theme): string;
+    outline(t: Theme): string;
+    wrapper(t: Theme): string;
+    disabled(): string;
     rootLeft(): string;
-    caption(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    captionLeft(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    caption(t: Theme): string;
+    disabledCaption(t: Theme): string;
+    captionLeft(t: Theme): string;
 };

package/components/Toggle/index/index.js.map

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

package/components/Token/Token/Token.js

@@ -1,12 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
-import cn from 'classnames';
 import { CrossIcon } from "../../../internal/icons/CrossIcon";
 import { emptyHandler } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles, jsTokenColors } from "../Token.styles";
-export var Token = /*#__PURE__*/function (_React$Component) {
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { styles, colorStyles, globalClasses } from "../Token.styles";
+export var Token = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Token, _React$Component);
 
   function Token() {
@@ -18,6 +23,7 @@ export var Token = /*#__PURE__*/function (_React$Component) {
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.theme = void 0;
+    _this.setRootNode = void 0;
 
     _this.onRemoveClick = function (event) {
       var _this$props = _this.props,
@@ -48,7 +54,7 @@ export var Token = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderMain = function renderMain() {
-    var _cn, _cn2;
+    var _cx, _cx2;
 
     var _this$props2 = this.props,
         children = _this$props2.children,
@@ -71,18 +77,20 @@ export var Token = /*#__PURE__*/function (_React$Component) {
         onBlur = _this$props2$onBlur === void 0 ? emptyHandler : _this$props2$onBlur;
     var theme = this.theme;
     var validation = error ? 'error' : warning ? 'warning' : null;
-    var disableClassNames = cn(jsTokenColors.defaultDisabled(theme), (_cn = {}, _cn[jsTokenColors.defaultDisabledWarning(theme)] = warning, _cn[jsTokenColors.defaultDisabledError(theme)] = error, _cn));
-    var tokenClassName = disabled ? disableClassNames : jsTokenColors.defaultIdle(theme, validation);
-    var activeTokenClassName = disabled ? disableClassNames : jsTokenColors.defaultActive(theme, validation);
+    var disableClassNames = cx(colorStyles.defaultDisabled(theme), (_cx = {}, _cx[colorStyles.defaultDisabledWarning(theme)] = warning, _cx[colorStyles.defaultDisabledError(theme)] = error, _cx));
+    var tokenClassName = disabled ? disableClassNames : colorStyles.defaultIdle(theme, validation);
+    var activeTokenClassName = disabled ? disableClassNames : colorStyles.defaultActive(theme, validation);
 
     if (!disabled && colors) {
-      tokenClassName = jsTokenColors[colors.idle](theme, validation);
+      tokenClassName = colorStyles[colors.idle](theme, validation);
       var activeClassName = colors.active ? colors.active : colors.idle;
-      activeTokenClassName = jsTokenColors[activeClassName](theme, validation);
+      activeTokenClassName = colorStyles[activeClassName](theme, validation);
     }
 
-    var tokenClassNames = cn(jsStyles.token(this.theme), tokenClassName, (_cn2 = {}, _cn2[activeTokenClassName] = !!isActive, _cn2[jsStyles.disabled(theme)] = !!disabled, _cn2));
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
+    var tokenClassNames = cx(styles.token(this.theme), tokenClassName, (_cx2 = {}, _cx2[activeTokenClassName] = !!isActive, _cx2[styles.disabled(theme)] = !!disabled, _cx2));
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
       className: tokenClassNames,
       onClick: onClick,
       onDoubleClick: onDoubleClick,
@@ -91,13 +99,12 @@ export var Token = /*#__PURE__*/function (_React$Component) {
       onFocus: onFocus,
       onBlur: onBlur
     }, /*#__PURE__*/React.createElement("span", {
-      className: jsStyles.text(this.theme)
+      className: styles.text(this.theme)
     }, children), /*#__PURE__*/React.createElement("span", {
-      className: jsStyles.removeIcon(this.theme),
+      className: cx(styles.removeIcon(this.theme), globalClasses.removeIcon),
       onClick: this.onRemoveClick
     }, /*#__PURE__*/React.createElement(CrossIcon, null))));
   };
 
   return Token;
-}(React.Component);
-Token.__KONTUR_REACT_UI__ = 'Token';
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Token', _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Token.tsx"],"names":["React","cn","CrossIcon","emptyHandler","ThemeContext","CommonWrapper","jsStyles","jsTokenColors","Token","theme","onRemoveClick","event","props","disabled","onRemove","preventDefault","render","renderMain","children","isActive","colors","error","warning","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","disableClassNames","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassName","defaultIdle","activeTokenClassName","defaultActive","idle","activeClassName","active","tokenClassNames","token","text","removeIcon","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\r\nimport { emptyHandler } from '../../lib/utils';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles, jsTokenColors } from './Token.styles';\r\n\r\nexport type TokenColorName = keyof typeof jsTokenColors;\r\n\r\nexport interface TokenColors {\r\n  idle: TokenColorName;\r\n  active?: TokenColorName;\r\n}\r\n\r\nexport interface TokenProps extends CommonProps {\r\n  colors?: TokenColors;\r\n  isActive?: boolean;\r\n  error?: boolean;\r\n  warning?: boolean;\r\n  disabled?: boolean;\r\n\r\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\r\n  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\r\n  onRemove?: React.MouseEventHandler<HTMLElement>;\r\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\r\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\r\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\r\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\r\n}\r\n\r\nexport class Token extends React.Component<TokenProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Token';\r\n\r\n  private theme!: Theme;\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const {\r\n      children,\r\n      isActive,\r\n      colors,\r\n      error,\r\n      warning,\r\n      disabled,\r\n      onClick = emptyHandler,\r\n      onDoubleClick = emptyHandler,\r\n      onMouseEnter = emptyHandler,\r\n      onMouseLeave = emptyHandler,\r\n      onFocus = emptyHandler,\r\n      onBlur = emptyHandler,\r\n    } = this.props;\r\n\r\n    const theme = this.theme;\r\n    const validation = error ? 'error' : warning ? 'warning' : null;\r\n    const disableClassNames = cn(jsTokenColors.defaultDisabled(theme), {\r\n      [jsTokenColors.defaultDisabledWarning(theme)]: warning,\r\n      [jsTokenColors.defaultDisabledError(theme)]: error,\r\n    });\r\n\r\n    let tokenClassName = disabled ? disableClassNames : jsTokenColors.defaultIdle(theme, validation);\r\n    let activeTokenClassName = disabled ? disableClassNames : jsTokenColors.defaultActive(theme, validation);\r\n\r\n    if (!disabled && colors) {\r\n      tokenClassName = jsTokenColors[colors.idle](theme, validation);\r\n\r\n      const activeClassName = colors.active ? colors.active : colors.idle;\r\n      activeTokenClassName = jsTokenColors[activeClassName](theme, validation);\r\n    }\r\n\r\n    const tokenClassNames = cn(jsStyles.token(this.theme), tokenClassName, {\r\n      [activeTokenClassName]: !!isActive,\r\n      [jsStyles.disabled(theme)]: !!disabled,\r\n    });\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div\r\n          className={tokenClassNames}\r\n          onClick={onClick}\r\n          onDoubleClick={onDoubleClick}\r\n          onMouseEnter={onMouseEnter}\r\n          onMouseLeave={onMouseLeave}\r\n          onFocus={onFocus}\r\n          onBlur={onBlur}\r\n        >\r\n          <span className={jsStyles.text(this.theme)}>{children}</span>\r\n          <span className={jsStyles.removeIcon(this.theme)} onClick={this.onRemoveClick}>\r\n            <CrossIcon />\r\n          </span>\r\n        </div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\r\n    const { disabled, onRemove = emptyHandler } = this.props;\r\n\r\n    if (disabled) {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n\r\n    onRemove(event);\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Token.tsx"],"names":["React","CrossIcon","emptyHandler","ThemeContext","CommonWrapper","cx","rootNode","styles","colorStyles","globalClasses","Token","theme","setRootNode","onRemoveClick","event","props","disabled","onRemove","preventDefault","render","renderMain","children","isActive","colors","error","warning","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","disableClassNames","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassName","defaultIdle","activeTokenClassName","defaultActive","idle","activeClassName","active","tokenClassNames","token","text","removeIcon","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles, colorStyles, globalClasses } from './Token.styles';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n  idle: TokenColorName;\n  active?: TokenColorName;\n}\n\nexport interface TokenProps extends CommonProps {\n  colors?: TokenColors;\n  isActive?: boolean;\n  /**\n   * Cостояние валидации при ошибке.\n   */\n  error?: boolean;\n  /**\n   * Cостояние валидации при предупреждении.\n   */\n  warning?: boolean;\n  disabled?: boolean;\n\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n  onRemove?: React.MouseEventHandler<HTMLElement>;\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\n@rootNode\nexport class Token extends React.Component<TokenProps> {\n  public static __KONTUR_REACT_UI__ = 'Token';\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const {\n      children,\n      isActive,\n      colors,\n      error,\n      warning,\n      disabled,\n      onClick = emptyHandler,\n      onDoubleClick = emptyHandler,\n      onMouseEnter = emptyHandler,\n      onMouseLeave = emptyHandler,\n      onFocus = emptyHandler,\n      onBlur = emptyHandler,\n    } = this.props;\n\n    const theme = this.theme;\n    const validation = error ? 'error' : warning ? 'warning' : null;\n    const disableClassNames = cx(colorStyles.defaultDisabled(theme), {\n      [colorStyles.defaultDisabledWarning(theme)]: warning,\n      [colorStyles.defaultDisabledError(theme)]: error,\n    });\n\n    let tokenClassName = disabled ? disableClassNames : colorStyles.defaultIdle(theme, validation);\n    let activeTokenClassName = disabled ? disableClassNames : colorStyles.defaultActive(theme, validation);\n\n    if (!disabled && colors) {\n      tokenClassName = colorStyles[colors.idle](theme, validation);\n\n      const activeClassName = colors.active ? colors.active : colors.idle;\n      activeTokenClassName = colorStyles[activeClassName](theme, validation);\n    }\n\n    const tokenClassNames = cx(styles.token(this.theme), tokenClassName, {\n      [activeTokenClassName]: !!isActive,\n      [styles.disabled(theme)]: !!disabled,\n    });\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          className={tokenClassNames}\n          onClick={onClick}\n          onDoubleClick={onDoubleClick}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onFocus={onFocus}\n          onBlur={onBlur}\n        >\n          <span className={styles.text(this.theme)}>{children}</span>\n          <span className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)} onClick={this.onRemoveClick}>\n            <CrossIcon />\n          </span>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n    const { disabled, onRemove = emptyHandler } = this.props;\n\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onRemove(event);\n  };\n}\n"]}

package/components/Token/Token.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
-import { jsTokenColors } from './Token.styles';
-export declare type TokenColorName = keyof typeof jsTokenColors;
+import { colorStyles } from './Token.styles';
+export declare type TokenColorName = keyof typeof colorStyles;
 export interface TokenColors {
     idle: TokenColorName;
     active?: TokenColorName;
@@ -9,7 +9,13 @@ export interface TokenColors {
 export interface TokenProps extends CommonProps {
     colors?: TokenColors;
     isActive?: boolean;
+    /**
+     * Cостояние валидации при ошибке.
+     */
     error?: boolean;
+    /**
+     * Cостояние валидации при предупреждении.
+     */
     warning?: boolean;
     disabled?: boolean;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
@@ -23,6 +29,7 @@ export interface TokenProps extends CommonProps {
 export declare class Token extends React.Component<TokenProps> {
     static __KONTUR_REACT_UI__: string;
     private theme;
+    private setRootNode;
     render(): JSX.Element;
     private renderMain;
     private onRemoveClick;