npm - @skbkontur/react-ui - Versions diffs - 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c - Mend

@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1909) hide show

package/components/Toggle/Toggle.styles/Toggle.styles.js CHANGED Viewed

@@ -2,7 +2,7 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42;
-import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import { activeHandleSizeMixin, buttonSizeMixin, captionSizeMixin, containerSizeMixin, handleMixin, inputSizeMixin, toggleSizeMixin } from "../Toggle.mixins";
 export var globalClasses = prefix('toggle')({
   handle: 'handle',
@@ -12,131 +12,133 @@ export var globalClasses = prefix('toggle')({
   containerLoading: 'container-loading',
   background: 'background'
 });
-export var styles = memoizeStyle({
-  root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\00A0';\n        display: inline-block;\n        flex: 0 0 auto;\n      }\n\n      &:hover .", " {\n        background: ", ";\n      }\n    "], ["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned button,\n        // and also height and baseline for toggle without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        flex: 0 0 auto;\n      }\n\n      &:hover .", " {\n        background: ", ";\n      }\n    "])), globalClasses.handle, t.toggleBgHover);
-  },
-  rootSmall: function rootSmall(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), toggleSizeMixin(t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall));
-  },
-  rootMedium: function rootMedium(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), toggleSizeMixin(t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium));
-  },
-  rootLarge: function rootLarge(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), toggleSizeMixin(t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge));
-  },
-  activeHandleSmall: function activeHandleSmall(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), activeHandleSizeMixin(t.toggleHandleSizeSmall, t.toggleBorderWidth, t.toggleHandleActiveWidthIncrement, t.toggleWidthSmall));
-  },
-  activeHandleMedium: function activeHandleMedium(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), activeHandleSizeMixin(t.toggleHandleSizeMedium, t.toggleBorderWidth, t.toggleHandleActiveWidthIncrement, t.toggleWidthMedium));
-  },
-  activeHandleLarge: function activeHandleLarge(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), activeHandleSizeMixin(t.toggleHandleSizeLarge, t.toggleBorderWidth, t.toggleHandleActiveWidthIncrement, t.toggleWidthLarge));
-  },
-  disableAnimation: function disableAnimation() {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      &,\n      * {\n        transition: none !important;\n      }\n    "])));
-  },
-  handle: function handle(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      bottom: ", ";\n      box-shadow: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n      transition: 0.2s ease-in;\n    "])), t.toggleHandleBg, t.toggleBorderWidth, t.toggleHandleBoxShadowOld, t.toggleHandleLeft, t.toggleHandleTop);
-  },
-  handleSmall: function handleSmall(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), handleMixin(t.toggleHandleSizeSmall, t.toggleHandleBorderRadiusSmall));
-  },
-  handleMedium: function handleMedium(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), handleMixin(t.toggleHandleSizeMedium, t.toggleHandleBorderRadiusMedium));
-  },
-  handleLarge: function handleLarge(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), handleMixin(t.toggleHandleSizeLarge, t.toggleHandleBorderRadiusLarge));
-  },
-  handleDisabled: function handleDisabled(t) {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override root hover/active styles\n    "])), t.toggleDisabledHandleBg);
-  },
-  input: function input(t) {
-    return css(_templateObject14 || (_templateObject14 = _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        box-shadow: inset 0 0 0 1px ", ";\n      }\n      &:checked ~ .", " {\n        background: ", ";\n        &:hover {\n          background: ", ";\n        }\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.toggleBorderColorDisabledChecked, globalClasses.handle, t.toggleCheckedBg, t.toggleCheckedBgHover);
-  },
-  inputSmall: function inputSmall(t) {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), inputSizeMixin(t.toggleHeightSmall, t.toggleWidthSmall));
-  },
-  inputMedium: function inputMedium(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), inputSizeMixin(t.toggleHeightMedium, t.toggleWidthMedium));
-  },
-  inputLarge: function inputLarge(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), inputSizeMixin(t.toggleHeightLarge, t.toggleWidthLarge));
-  },
-  input2022: function input2022(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      &:enabled {\n        ~ .", ", ~ .", " {\n          transition: 0.2s ease-in;\n        }\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n      }\n      &:enabled:hover {\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n        }\n      }\n      &:disabled {\n        :not(:checked) {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", " !important;\n            box-shadow: ", ";\n          }\n        }\n        :checked {\n          ~ .", " {\n            background: ", ";\n            box-shadow: ", ";\n          }\n          ~ .", " {\n            background: ", " !important;\n            box-shadow: ", ";\n          }\n        }\n      }\n    "])), globalClasses.container, globalClasses.handle, globalClasses.container, t.toggleContainerBg, t.toggleContainerBoxShadow, globalClasses.handle, t.toggleHandleBg, t.toggleHandleBoxShadow, globalClasses.container, t.toggleContainerBgChecked, t.toggleContainerBoxShadowChecked, globalClasses.handle, t.toggleHandleBgChecked, t.toggleHandleBoxShadowChecked, globalClasses.container, t.toggleContainerBgHover, t.toggleContainerBoxShadowHover, globalClasses.handle, t.toggleHandleBgHover, t.toggleHandleBoxShadowHover, globalClasses.container, t.toggleContainerBgCheckedHover, t.toggleContainerBoxShadowCheckedHover, globalClasses.handle, t.toggleHandleBgCheckedHover, t.toggleHandleBoxShadowCheckedHover, globalClasses.container, t.toggleContainerBgDisabled, t.toggleContainerBoxShadowDisabled, globalClasses.handle, t.toggleHandleBgDisabled, t.toggleHandleBoxShadowDisabled, globalClasses.container, t.toggleContainerBgDisabledChecked, t.toggleContainerBoxShadowDisabledChecked, globalClasses.handle, t.toggleHandleBgDisabledChecked, t.toggleHandleBoxShadowDisabledChecked);
-  },
-  container: function container(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\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.toggleBorderWidth, t.toggleBorderColor);
-  },
-  containerSmall: function containerSmall(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), containerSizeMixin(t.toggleBorderRadiusSmall));
-  },
-  containerMedium: function containerMedium(t) {
-    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), containerSizeMixin(t.toggleBorderRadiusMedium));
-  },
-  containerLarge: function containerLarge(t) {
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), containerSizeMixin(t.toggleBorderRadiusLarge));
-  },
-  containerDisabled: function containerDisabled(t) {
-    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
-  },
-  focused: function focused(t) {
-    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
-  },
-  activeBackground: function activeBackground() {
-    return css(_templateObject25 || (_templateObject25 = _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(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ";\n      width: 0;\n    "])), t.toggleBorderColorDisabled);
-  },
-  activeBackgroundLoading: function activeBackgroundLoading(t) {
-    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.toggleBgActive);
-  },
-  isWarning: function isWarning(t) {
-    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
-  },
-  isError: function isError(t) {
-    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
-  },
-  button: function button(t) {
-    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      left: 0;\n      top: 0;\n      background: ", ";\n      line-height: ", ";\n    "])), t.toggleBaseBg, t.toggleHeight);
-  },
-  buttonSmall: function buttonSmall(t) {
-    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), buttonSizeMixin(t.labGrotesqueBaselineCompensation, t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall, t.toggleBorderRadiusSmall, t.toggleButtonOffsetY));
-  },
-  buttonMedium: function buttonMedium(t) {
-    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), buttonSizeMixin(t.labGrotesqueBaselineCompensation, t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium, t.toggleBorderRadiusMedium, t.toggleButtonOffsetY));
-  },
-  buttonLarge: function buttonLarge(t) {
-    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), buttonSizeMixin(t.labGrotesqueBaselineCompensation, t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge, t.toggleBorderRadiusLarge, t.toggleButtonOffsetY));
-  },
-  buttonRight: function buttonRight() {
-    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      right: 0;\n      left: auto;\n    "])));
-  },
-  disabled: function disabled() {
-    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
-  },
-  rootLeft: function rootLeft() {
-    return css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "])));
-  },
-  caption: function caption(t) {
-    return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n    "])), t.toggleTextColor, t.toggleCaptionGap);
-  },
-  captionSmall: function captionSmall(t) {
-    return css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), captionSizeMixin(t.toggleFontSizeSmall, t.toggleHeightSmall));
-  },
-  captionMedium: function captionMedium(t) {
-    return css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), captionSizeMixin(t.toggleFontSizeMedium, t.toggleHeightMedium));
-  },
-  captionLarge: function captionLarge(t) {
-    return css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), captionSizeMixin(t.toggleFontSizeLarge, t.toggleHeightLarge));
-  },
-  disabledCaption: function disabledCaption(t) {
-    return css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDisabled);
-  },
-  captionLeft: function captionLeft(t) {
-    return css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
-  }
-});
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        display: inline-flex;\n        cursor: pointer;\n        align-items: baseline;\n        position: relative;\n\n        &::before {\n          // non-breaking space.\n          // makes a correct space for absolutely positioned button,\n          // and also height and baseline for toggle without caption.\n          content: '\\00A0';\n          display: inline-block;\n          flex: 0 0 auto;\n        }\n\n        &:hover .", " {\n          background: ", ";\n        }\n      "], ["\n        display: inline-flex;\n        cursor: pointer;\n        align-items: baseline;\n        position: relative;\n\n        &::before {\n          // non-breaking space.\n          // makes a correct space for absolutely positioned button,\n          // and also height and baseline for toggle without caption.\n          content: '\\\\00A0';\n          display: inline-block;\n          flex: 0 0 auto;\n        }\n\n        &:hover .", " {\n          background: ", ";\n        }\n      "])), globalClasses.handle, t.toggleBgHover);
+    },
+    rootSmall: function rootSmall(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), toggleSizeMixin(emotion)(t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall));
+    },
+    rootMedium: function rootMedium(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), toggleSizeMixin(emotion)(t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium));
+    },
+    rootLarge: function rootLarge(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), toggleSizeMixin(emotion)(t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge));
+    },
+    activeHandleSmall: function activeHandleSmall(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), activeHandleSizeMixin(emotion)(t.toggleHandleSizeSmall, t.toggleBorderWidth, t.toggleHandleActiveWidthIncrement, t.toggleWidthSmall));
+    },
+    activeHandleMedium: function activeHandleMedium(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), activeHandleSizeMixin(emotion)(t.toggleHandleSizeMedium, t.toggleBorderWidth, t.toggleHandleActiveWidthIncrement, t.toggleWidthMedium));
+    },
+    activeHandleLarge: function activeHandleLarge(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), activeHandleSizeMixin(emotion)(t.toggleHandleSizeLarge, t.toggleBorderWidth, t.toggleHandleActiveWidthIncrement, t.toggleWidthLarge));
+    },
+    disableAnimation: function disableAnimation() {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        &,\n        * {\n          transition: none !important;\n        }\n      "])));
+    },
+    handle: function handle(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        bottom: ", ";\n        box-shadow: ", ";\n        left: ", ";\n        position: absolute;\n        top: ", ";\n        transition: 0.2s ease-in;\n      "])), t.toggleHandleBg, t.toggleBorderWidth, t.toggleHandleBoxShadowOld, t.toggleHandleLeft, t.toggleHandleTop);
+    },
+    handleSmall: function handleSmall(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), handleMixin(emotion)(t.toggleHandleSizeSmall, t.toggleHandleBorderRadiusSmall));
+    },
+    handleMedium: function handleMedium(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), handleMixin(emotion)(t.toggleHandleSizeMedium, t.toggleHandleBorderRadiusMedium));
+    },
+    handleLarge: function handleLarge(t) {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), handleMixin(emotion)(t.toggleHandleSizeLarge, t.toggleHandleBorderRadiusLarge));
+    },
+    handleDisabled: function handleDisabled(t) {
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        background: ", " !important; // override root hover/active styles\n      "])), t.toggleDisabledHandleBg);
+    },
+    input: function input(t) {
+      return emotion.css(_templateObject14 || (_templateObject14 = _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          box-shadow: inset 0 0 0 1px ", ";\n        }\n        &:checked ~ .", " {\n          background: ", ";\n          &:hover {\n            background: ", ";\n          }\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.toggleBorderColorDisabledChecked, globalClasses.handle, t.toggleCheckedBg, t.toggleCheckedBgHover);
+    },
+    inputSmall: function inputSmall(t) {
+      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), inputSizeMixin(emotion)(t.toggleHeightSmall, t.toggleWidthSmall));
+    },
+    inputMedium: function inputMedium(t) {
+      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), inputSizeMixin(emotion)(t.toggleHeightMedium, t.toggleWidthMedium));
+    },
+    inputLarge: function inputLarge(t) {
+      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), inputSizeMixin(emotion)(t.toggleHeightLarge, t.toggleWidthLarge));
+    },
+    input2022: function input2022(t) {
+      return emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n        &:enabled {\n          ~ .", ", ~ .", " {\n            transition: 0.2s ease-in;\n          }\n          :not(:checked) {\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n          }\n          :checked {\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n          }\n        }\n        &:enabled:hover {\n          :not(:checked) {\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n          }\n          :checked {\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n          }\n        }\n        &:disabled {\n          :not(:checked) {\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n            ~ .", " {\n              background: ", " !important;\n              box-shadow: ", ";\n            }\n          }\n          :checked {\n            ~ .", " {\n              background: ", ";\n              box-shadow: ", ";\n            }\n            ~ .", " {\n              background: ", " !important;\n              box-shadow: ", ";\n            }\n          }\n        }\n      "])), globalClasses.container, globalClasses.handle, globalClasses.container, t.toggleContainerBg, t.toggleContainerBoxShadow, globalClasses.handle, t.toggleHandleBg, t.toggleHandleBoxShadow, globalClasses.container, t.toggleContainerBgChecked, t.toggleContainerBoxShadowChecked, globalClasses.handle, t.toggleHandleBgChecked, t.toggleHandleBoxShadowChecked, globalClasses.container, t.toggleContainerBgHover, t.toggleContainerBoxShadowHover, globalClasses.handle, t.toggleHandleBgHover, t.toggleHandleBoxShadowHover, globalClasses.container, t.toggleContainerBgCheckedHover, t.toggleContainerBoxShadowCheckedHover, globalClasses.handle, t.toggleHandleBgCheckedHover, t.toggleHandleBoxShadowCheckedHover, globalClasses.container, t.toggleContainerBgDisabled, t.toggleContainerBoxShadowDisabled, globalClasses.handle, t.toggleHandleBgDisabled, t.toggleHandleBoxShadowDisabled, globalClasses.container, t.toggleContainerBgDisabledChecked, t.toggleContainerBoxShadowDisabledChecked, globalClasses.handle, t.toggleHandleBgDisabledChecked, t.toggleHandleBoxShadowDisabledChecked);
+    },
+    container: function container(t) {
+      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\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.toggleBorderWidth, t.toggleBorderColor);
+    },
+    containerSmall: function containerSmall(t) {
+      return emotion.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), containerSizeMixin(emotion)(t.toggleBorderRadiusSmall));
+    },
+    containerMedium: function containerMedium(t) {
+      return emotion.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), containerSizeMixin(emotion)(t.toggleBorderRadiusMedium));
+    },
+    containerLarge: function containerLarge(t) {
+      return emotion.css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), containerSizeMixin(emotion)(t.toggleBorderRadiusLarge));
+    },
+    containerDisabled: function containerDisabled(t) {
+      return emotion.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        box-shadow: inset 0 0 0 1px ", ";\n      "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
+    },
+    focused: function focused(t) {
+      return emotion.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n      "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
+    },
+    activeBackground: function activeBackground() {
+      return emotion.css(_templateObject25 || (_templateObject25 = _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 emotion.css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n        box-shadow: inset 0 0 0 1px ", ";\n        width: 0;\n      "])), t.toggleBorderColorDisabled);
+    },
+    activeBackgroundLoading: function activeBackgroundLoading(t) {
+      return emotion.css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n      "])), t.toggleBgActive);
+    },
+    isWarning: function isWarning(t) {
+      return emotion.css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n      "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
+    },
+    isError: function isError(t) {
+      return emotion.css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n      "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
+    },
+    button: function button(t) {
+      return emotion.css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n        position: absolute;\n        left: 0;\n        top: 0;\n        background: ", ";\n        line-height: ", ";\n      "])), t.toggleBaseBg, t.toggleHeight);
+    },
+    buttonSmall: function buttonSmall(t) {
+      return emotion.css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), buttonSizeMixin(emotion)(t.labGrotesqueBaselineCompensation, t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall, t.toggleBorderRadiusSmall, t.toggleButtonOffsetY));
+    },
+    buttonMedium: function buttonMedium(t) {
+      return emotion.css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), buttonSizeMixin(emotion)(t.labGrotesqueBaselineCompensation, t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium, t.toggleBorderRadiusMedium, t.toggleButtonOffsetY));
+    },
+    buttonLarge: function buttonLarge(t) {
+      return emotion.css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), buttonSizeMixin(emotion)(t.labGrotesqueBaselineCompensation, t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge, t.toggleBorderRadiusLarge, t.toggleButtonOffsetY));
+    },
+    buttonRight: function buttonRight() {
+      return emotion.css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n        right: 0;\n        left: auto;\n      "])));
+    },
+    disabled: function disabled() {
+      return emotion.css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n        cursor: default;\n      "])));
+    },
+    rootLeft: function rootLeft() {
+      return emotion.css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n        flex-direction: row-reverse;\n      "])));
+    },
+    caption: function caption(t) {
+      return emotion.css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        padding: 0 0 0 ", ";\n      "])), t.toggleTextColor, t.toggleCaptionGap);
+    },
+    captionSmall: function captionSmall(t) {
+      return emotion.css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), captionSizeMixin(emotion)(t.toggleFontSizeSmall, t.toggleHeightSmall));
+    },
+    captionMedium: function captionMedium(t) {
+      return emotion.css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), captionSizeMixin(emotion)(t.toggleFontSizeMedium, t.toggleHeightMedium));
+    },
+    captionLarge: function captionLarge(t) {
+      return emotion.css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), captionSizeMixin(emotion)(t.toggleFontSizeLarge, t.toggleHeightLarge));
+    },
+    disabledCaption: function disabledCaption(t) {
+      return emotion.css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.textColorDisabled);
+    },
+    captionLeft: function captionLeft(t) {
+      return emotion.css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        padding: 0 ", " 0 0;\n      "])), t.toggleTextColor, t.toggleCaptionGap);
+    }
+  });
+};

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["Toggle.styles.ts"],"names":["css","memoizeStyle","prefix","activeHandleSizeMixin","buttonSizeMixin","captionSizeMixin","containerSizeMixin","handleMixin","inputSizeMixin","toggleSizeMixin","globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","toggleBgHover","rootSmall","toggleFontSizeSmall","toggleHeightSmall","toggleWidthSmall","rootMedium","toggleFontSizeMedium","toggleHeightMedium","toggleWidthMedium","rootLarge","toggleFontSizeLarge","toggleHeightLarge","toggleWidthLarge","activeHandleSmall","toggleHandleSizeSmall","toggleBorderWidth","toggleHandleActiveWidthIncrement","activeHandleMedium","toggleHandleSizeMedium","activeHandleLarge","toggleHandleSizeLarge","disableAnimation","toggleHandleBg","toggleHandleBoxShadowOld","toggleHandleLeft","toggleHandleTop","handleSmall","toggleHandleBorderRadiusSmall","handleMedium","toggleHandleBorderRadiusMedium","handleLarge","toggleHandleBorderRadiusLarge","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleCheckedBg","toggleCheckedBgHover","inputSmall","inputMedium","inputLarge","input2022","toggleContainerBg","toggleContainerBoxShadow","toggleHandleBoxShadow","toggleContainerBgChecked","toggleContainerBoxShadowChecked","toggleHandleBgChecked","toggleHandleBoxShadowChecked","toggleContainerBgHover","toggleContainerBoxShadowHover","toggleHandleBgHover","toggleHandleBoxShadowHover","toggleContainerBgCheckedHover","toggleContainerBoxShadowCheckedHover","toggleHandleBgCheckedHover","toggleHandleBoxShadowCheckedHover","toggleContainerBgDisabled","toggleContainerBoxShadowDisabled","toggleHandleBgDisabled","toggleHandleBoxShadowDisabled","toggleContainerBgDisabledChecked","toggleContainerBoxShadowDisabledChecked","toggleHandleBgDisabledChecked","toggleHandleBoxShadowDisabledChecked","containerSmall","toggleBorderRadiusSmall","containerMedium","toggleBorderRadiusMedium","containerLarge","toggleBorderRadiusLarge","toggleBgDisabled","toggleBorderColorDisabled","focused","toggleOutlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","button","toggleBaseBg","toggleHeight","buttonSmall","labGrotesqueBaselineCompensation","toggleButtonOffsetY","buttonMedium","buttonLarge","buttonRight","rootLeft","caption","toggleTextColor","toggleCaptionGap","captionSmall","captionMedium","captionLarge","disabledCaption","textColorDisabled","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport {\n activeHandleSizeMixin,\n buttonSizeMixin,\n captionSizeMixin,\n containerSizeMixin,\n handleMixin,\n inputSizeMixin,\n toggleSizeMixin,\n} from './Toggle.mixins';\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 return css`\n display: inline-flex;\n cursor: pointer;\n align-items: baseline;\n position: relative;\n\n &::before {\n // non-breaking space.\n // makes a correct space for absolutely positioned button,\n // and also height and baseline for toggle without caption.\n content: '\\\\00A0';\n display: inline-block;\n flex: 0 0 auto;\n }\n\n &:hover .${globalClasses.handle} {\n background: ${t.toggleBgHover};\n }\n `;\n },\n rootSmall(t: Theme) {\n return css`\n ${toggleSizeMixin(t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall)};\n `;\n },\n rootMedium(t: Theme) {\n return css`\n ${toggleSizeMixin(t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium)};\n `;\n },\n rootLarge(t: Theme) {\n return css`\n ${toggleSizeMixin(t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge)};\n `;\n },\n\n activeHandleSmall(t: Theme) {\n return css`\n ${activeHandleSizeMixin(\n t.toggleHandleSizeSmall,\n t.toggleBorderWidth,\n t.toggleHandleActiveWidthIncrement,\n t.toggleWidthSmall,\n )};\n `;\n },\n activeHandleMedium(t: Theme) {\n return css`\n ${activeHandleSizeMixin(\n t.toggleHandleSizeMedium,\n t.toggleBorderWidth,\n t.toggleHandleActiveWidthIncrement,\n t.toggleWidthMedium,\n )};\n `;\n },\n activeHandleLarge(t: Theme) {\n return css`\n ${activeHandleSizeMixin(\n t.toggleHandleSizeLarge,\n t.toggleBorderWidth,\n t.toggleHandleActiveWidthIncrement,\n t.toggleWidthLarge,\n )};\n `;\n },\n\n disableAnimation() {\n return css`\n &,\n * {\n transition: none !important;\n }\n `;\n },\n\n handle(t: Theme) {\n return css`\n background: ${t.toggleHandleBg};\n bottom: ${t.toggleBorderWidth};\n box-shadow: ${t.toggleHandleBoxShadowOld};\n left: ${t.toggleHandleLeft};\n position: absolute;\n top: ${t.toggleHandleTop};\n transition: 0.2s ease-in;\n `;\n },\n handleSmall(t: Theme) {\n return css`\n ${handleMixin(t.toggleHandleSizeSmall, t.toggleHandleBorderRadiusSmall)};\n `;\n },\n handleMedium(t: Theme) {\n return css`\n ${handleMixin(t.toggleHandleSizeMedium, t.toggleHandleBorderRadiusMedium)};\n `;\n },\n handleLarge(t: Theme) {\n return css`\n ${handleMixin(t.toggleHandleSizeLarge, t.toggleHandleBorderRadiusLarge)};\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 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 box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n }\n &:checked ~ .${globalClasses.handle} {\n background: ${t.toggleCheckedBg};\n &:hover {\n background: ${t.toggleCheckedBgHover};\n }\n }\n `;\n },\n inputSmall(t: Theme) {\n return css`\n ${inputSizeMixin(t.toggleHeightSmall, t.toggleWidthSmall)};\n `;\n },\n inputMedium(t: Theme) {\n return css`\n ${inputSizeMixin(t.toggleHeightMedium, t.toggleWidthMedium)};\n `;\n },\n inputLarge(t: Theme) {\n return css`\n ${inputSizeMixin(t.toggleHeightLarge, t.toggleWidthLarge)};\n `;\n },\n\n input2022(t: Theme) {\n return css`\n &:enabled {\n ~ .${globalClasses.container}, ~ .${globalClasses.handle} {\n transition: 0.2s ease-in;\n }\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBg};\n box-shadow: ${t.toggleContainerBoxShadow};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBg};\n box-shadow: ${t.toggleHandleBoxShadow};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgChecked};\n box-shadow: ${t.toggleContainerBoxShadowChecked};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgChecked};\n box-shadow: ${t.toggleHandleBoxShadowChecked};\n }\n }\n }\n &:enabled:hover {\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgHover};\n box-shadow: ${t.toggleContainerBoxShadowHover};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgHover};\n box-shadow: ${t.toggleHandleBoxShadowHover};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgCheckedHover};\n box-shadow: ${t.toggleContainerBoxShadowCheckedHover};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgCheckedHover};\n box-shadow: ${t.toggleHandleBoxShadowCheckedHover};\n }\n }\n }\n &:disabled {\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgDisabled};\n box-shadow: ${t.toggleContainerBoxShadowDisabled};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgDisabled} !important;\n box-shadow: ${t.toggleHandleBoxShadowDisabled};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgDisabledChecked};\n box-shadow: ${t.toggleContainerBoxShadowDisabledChecked};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgDisabledChecked} !important;\n box-shadow: ${t.toggleHandleBoxShadowDisabledChecked};\n }\n }\n }\n `;\n },\n\n container(t: Theme) {\n return css`\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 containerSmall(t: Theme) {\n return css`\n ${containerSizeMixin(t.toggleBorderRadiusSmall)};\n `;\n },\n containerMedium(t: Theme) {\n return css`\n ${containerSizeMixin(t.toggleBorderRadiusMedium)};\n `;\n },\n containerLarge(t: Theme) {\n return css`\n ${containerSizeMixin(t.toggleBorderRadiusLarge)};\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.toggleOutlineColorFocus}, 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.toggleOutlineColorFocus}, 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.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n `;\n },\n\n button(t: Theme) {\n return css`\n position: absolute;\n left: 0;\n top: 0;\n background: ${t.toggleBaseBg};\n line-height: ${t.toggleHeight};\n `;\n },\n buttonSmall(t: Theme) {\n return css`\n ${buttonSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.toggleFontSizeSmall,\n t.toggleHeightSmall,\n t.toggleWidthSmall,\n t.toggleBorderRadiusSmall,\n t.toggleButtonOffsetY,\n )};\n `;\n },\n buttonMedium(t: Theme) {\n return css`\n ${buttonSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.toggleFontSizeMedium,\n t.toggleHeightMedium,\n t.toggleWidthMedium,\n t.toggleBorderRadiusMedium,\n t.toggleButtonOffsetY,\n )};\n `;\n },\n buttonLarge(t: Theme) {\n return css`\n ${buttonSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.toggleFontSizeLarge,\n t.toggleHeightLarge,\n t.toggleWidthLarge,\n t.toggleBorderRadiusLarge,\n t.toggleButtonOffsetY,\n )};\n `;\n },\n\n buttonRight() {\n return css`\n right: 0;\n left: auto;\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 captionSmall(t: Theme) {\n return css`\n ${captionSizeMixin(t.toggleFontSizeSmall, t.toggleHeightSmall)};\n `;\n },\n captionMedium(t: Theme) {\n return css`\n ${captionSizeMixin(t.toggleFontSizeMedium, t.toggleHeightMedium)};\n `;\n },\n captionLarge(t: Theme) {\n return css`\n ${captionSizeMixin(t.toggleFontSizeLarge, t.toggleHeightLarge)};\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"]}
1	+ {"version":3,"sources":["Toggle.styles.ts"],"names":["memoizeStyle","prefix","activeHandleSizeMixin","buttonSizeMixin","captionSizeMixin","containerSizeMixin","handleMixin","inputSizeMixin","toggleSizeMixin","globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","getStyles","emotion","root","t","css","toggleBgHover","rootSmall","toggleFontSizeSmall","toggleHeightSmall","toggleWidthSmall","rootMedium","toggleFontSizeMedium","toggleHeightMedium","toggleWidthMedium","rootLarge","toggleFontSizeLarge","toggleHeightLarge","toggleWidthLarge","activeHandleSmall","toggleHandleSizeSmall","toggleBorderWidth","toggleHandleActiveWidthIncrement","activeHandleMedium","toggleHandleSizeMedium","activeHandleLarge","toggleHandleSizeLarge","disableAnimation","toggleHandleBg","toggleHandleBoxShadowOld","toggleHandleLeft","toggleHandleTop","handleSmall","toggleHandleBorderRadiusSmall","handleMedium","toggleHandleBorderRadiusMedium","handleLarge","toggleHandleBorderRadiusLarge","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleCheckedBg","toggleCheckedBgHover","inputSmall","inputMedium","inputLarge","input2022","toggleContainerBg","toggleContainerBoxShadow","toggleHandleBoxShadow","toggleContainerBgChecked","toggleContainerBoxShadowChecked","toggleHandleBgChecked","toggleHandleBoxShadowChecked","toggleContainerBgHover","toggleContainerBoxShadowHover","toggleHandleBgHover","toggleHandleBoxShadowHover","toggleContainerBgCheckedHover","toggleContainerBoxShadowCheckedHover","toggleHandleBgCheckedHover","toggleHandleBoxShadowCheckedHover","toggleContainerBgDisabled","toggleContainerBoxShadowDisabled","toggleHandleBgDisabled","toggleHandleBoxShadowDisabled","toggleContainerBgDisabledChecked","toggleContainerBoxShadowDisabledChecked","toggleHandleBgDisabledChecked","toggleHandleBoxShadowDisabledChecked","containerSmall","toggleBorderRadiusSmall","containerMedium","toggleBorderRadiusMedium","containerLarge","toggleBorderRadiusLarge","toggleBgDisabled","toggleBorderColorDisabled","focused","toggleOutlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","button","toggleBaseBg","toggleHeight","buttonSmall","labGrotesqueBaselineCompensation","toggleButtonOffsetY","buttonMedium","buttonLarge","buttonRight","rootLeft","caption","toggleTextColor","toggleCaptionGap","captionSmall","captionMedium","captionLarge","disabledCaption","textColorDisabled","captionLeft"],"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';\n\nimport {\n activeHandleSizeMixin,\n buttonSizeMixin,\n captionSizeMixin,\n containerSizeMixin,\n handleMixin,\n inputSizeMixin,\n toggleSizeMixin,\n} from './Toggle.mixins';\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 getStyles = (emotion: Emotion) =>\n memoizeStyle({\n root(t: Theme) {\n return emotion.css`\n display: inline-flex;\n cursor: pointer;\n align-items: baseline;\n position: relative;\n\n &::before {\n // non-breaking space.\n // makes a correct space for absolutely positioned button,\n // and also height and baseline for toggle without caption.\n content: '\\\\00A0';\n display: inline-block;\n flex: 0 0 auto;\n }\n\n &:hover .${globalClasses.handle} {\n background: ${t.toggleBgHover};\n }\n `;\n },\n rootSmall(t: Theme) {\n return emotion.css`\n ${toggleSizeMixin(emotion)(t.toggleFontSizeSmall, t.toggleHeightSmall, t.toggleWidthSmall)};\n `;\n },\n rootMedium(t: Theme) {\n return emotion.css`\n ${toggleSizeMixin(emotion)(t.toggleFontSizeMedium, t.toggleHeightMedium, t.toggleWidthMedium)};\n `;\n },\n rootLarge(t: Theme) {\n return emotion.css`\n ${toggleSizeMixin(emotion)(t.toggleFontSizeLarge, t.toggleHeightLarge, t.toggleWidthLarge)};\n `;\n },\n\n activeHandleSmall(t: Theme) {\n return emotion.css`\n ${activeHandleSizeMixin(emotion)(\n t.toggleHandleSizeSmall,\n t.toggleBorderWidth,\n t.toggleHandleActiveWidthIncrement,\n t.toggleWidthSmall,\n )};\n `;\n },\n activeHandleMedium(t: Theme) {\n return emotion.css`\n ${activeHandleSizeMixin(emotion)(\n t.toggleHandleSizeMedium,\n t.toggleBorderWidth,\n t.toggleHandleActiveWidthIncrement,\n t.toggleWidthMedium,\n )};\n `;\n },\n activeHandleLarge(t: Theme) {\n return emotion.css`\n ${activeHandleSizeMixin(emotion)(\n t.toggleHandleSizeLarge,\n t.toggleBorderWidth,\n t.toggleHandleActiveWidthIncrement,\n t.toggleWidthLarge,\n )};\n `;\n },\n\n disableAnimation() {\n return emotion.css`\n &,\n * {\n transition: none !important;\n }\n `;\n },\n\n handle(t: Theme) {\n return emotion.css`\n background: ${t.toggleHandleBg};\n bottom: ${t.toggleBorderWidth};\n box-shadow: ${t.toggleHandleBoxShadowOld};\n left: ${t.toggleHandleLeft};\n position: absolute;\n top: ${t.toggleHandleTop};\n transition: 0.2s ease-in;\n `;\n },\n handleSmall(t: Theme) {\n return emotion.css`\n ${handleMixin(emotion)(t.toggleHandleSizeSmall, t.toggleHandleBorderRadiusSmall)};\n `;\n },\n handleMedium(t: Theme) {\n return emotion.css`\n ${handleMixin(emotion)(t.toggleHandleSizeMedium, t.toggleHandleBorderRadiusMedium)};\n `;\n },\n handleLarge(t: Theme) {\n return emotion.css`\n ${handleMixin(emotion)(t.toggleHandleSizeLarge, t.toggleHandleBorderRadiusLarge)};\n `;\n },\n\n handleDisabled(t: Theme) {\n return emotion.css`\n background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n `;\n },\n\n input(t: Theme) {\n return emotion.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 box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n }\n &:checked ~ .${globalClasses.handle} {\n background: ${t.toggleCheckedBg};\n &:hover {\n background: ${t.toggleCheckedBgHover};\n }\n }\n `;\n },\n inputSmall(t: Theme) {\n return emotion.css`\n ${inputSizeMixin(emotion)(t.toggleHeightSmall, t.toggleWidthSmall)};\n `;\n },\n inputMedium(t: Theme) {\n return emotion.css`\n ${inputSizeMixin(emotion)(t.toggleHeightMedium, t.toggleWidthMedium)};\n `;\n },\n inputLarge(t: Theme) {\n return emotion.css`\n ${inputSizeMixin(emotion)(t.toggleHeightLarge, t.toggleWidthLarge)};\n `;\n },\n\n input2022(t: Theme) {\n return emotion.css`\n &:enabled {\n ~ .${globalClasses.container}, ~ .${globalClasses.handle} {\n transition: 0.2s ease-in;\n }\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBg};\n box-shadow: ${t.toggleContainerBoxShadow};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBg};\n box-shadow: ${t.toggleHandleBoxShadow};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgChecked};\n box-shadow: ${t.toggleContainerBoxShadowChecked};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgChecked};\n box-shadow: ${t.toggleHandleBoxShadowChecked};\n }\n }\n }\n &:enabled:hover {\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgHover};\n box-shadow: ${t.toggleContainerBoxShadowHover};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgHover};\n box-shadow: ${t.toggleHandleBoxShadowHover};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgCheckedHover};\n box-shadow: ${t.toggleContainerBoxShadowCheckedHover};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgCheckedHover};\n box-shadow: ${t.toggleHandleBoxShadowCheckedHover};\n }\n }\n }\n &:disabled {\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgDisabled};\n box-shadow: ${t.toggleContainerBoxShadowDisabled};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgDisabled} !important;\n box-shadow: ${t.toggleHandleBoxShadowDisabled};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgDisabledChecked};\n box-shadow: ${t.toggleContainerBoxShadowDisabledChecked};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgDisabledChecked} !important;\n box-shadow: ${t.toggleHandleBoxShadowDisabledChecked};\n }\n }\n }\n `;\n },\n\n container(t: Theme) {\n return emotion.css`\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 containerSmall(t: Theme) {\n return emotion.css`\n ${containerSizeMixin(emotion)(t.toggleBorderRadiusSmall)};\n `;\n },\n containerMedium(t: Theme) {\n return emotion.css`\n ${containerSizeMixin(emotion)(t.toggleBorderRadiusMedium)};\n `;\n },\n containerLarge(t: Theme) {\n return emotion.css`\n ${containerSizeMixin(emotion)(t.toggleBorderRadiusLarge)};\n `;\n },\n\n containerDisabled(t: Theme) {\n return emotion.css`\n background: ${t.toggleBgDisabled};\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n `;\n },\n\n focused(t: Theme) {\n return emotion.css`\n box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n `;\n },\n\n activeBackground() {\n return emotion.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 emotion.css`\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n width: 0;\n `;\n },\n\n activeBackgroundLoading(t: Theme) {\n return emotion.css`\n background: ${t.toggleBgActive};\n `;\n },\n\n isWarning(t: Theme) {\n return emotion.css`\n box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n `;\n },\n\n isError(t: Theme) {\n return emotion.css`\n box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n `;\n },\n\n button(t: Theme) {\n return emotion.css`\n position: absolute;\n left: 0;\n top: 0;\n background: ${t.toggleBaseBg};\n line-height: ${t.toggleHeight};\n `;\n },\n buttonSmall(t: Theme) {\n return emotion.css`\n ${buttonSizeMixin(emotion)(\n t.labGrotesqueBaselineCompensation,\n t.toggleFontSizeSmall,\n t.toggleHeightSmall,\n t.toggleWidthSmall,\n t.toggleBorderRadiusSmall,\n t.toggleButtonOffsetY,\n )};\n `;\n },\n buttonMedium(t: Theme) {\n return emotion.css`\n ${buttonSizeMixin(emotion)(\n t.labGrotesqueBaselineCompensation,\n t.toggleFontSizeMedium,\n t.toggleHeightMedium,\n t.toggleWidthMedium,\n t.toggleBorderRadiusMedium,\n t.toggleButtonOffsetY,\n )};\n `;\n },\n buttonLarge(t: Theme) {\n return emotion.css`\n ${buttonSizeMixin(emotion)(\n t.labGrotesqueBaselineCompensation,\n t.toggleFontSizeLarge,\n t.toggleHeightLarge,\n t.toggleWidthLarge,\n t.toggleBorderRadiusLarge,\n t.toggleButtonOffsetY,\n )};\n `;\n },\n\n buttonRight() {\n return emotion.css`\n right: 0;\n left: auto;\n `;\n },\n\n disabled() {\n return emotion.css`\n cursor: default;\n `;\n },\n\n rootLeft() {\n return emotion.css`\n flex-direction: row-reverse;\n `;\n },\n\n caption(t: Theme) {\n return emotion.css`\n color: ${t.toggleTextColor};\n padding: 0 0 0 ${t.toggleCaptionGap};\n `;\n },\n captionSmall(t: Theme) {\n return emotion.css`\n ${captionSizeMixin(emotion)(t.toggleFontSizeSmall, t.toggleHeightSmall)};\n `;\n },\n captionMedium(t: Theme) {\n return emotion.css`\n ${captionSizeMixin(emotion)(t.toggleFontSizeMedium, t.toggleHeightMedium)};\n `;\n },\n captionLarge(t: Theme) {\n return emotion.css`\n ${captionSizeMixin(emotion)(t.toggleFontSizeLarge, t.toggleHeightLarge)};\n `;\n },\n\n disabledCaption(t: Theme) {\n return emotion.css`\n color: ${t.textColorDisabled};\n `;\n },\n\n captionLeft(t: Theme) {\n return emotion.css`\n color: ${t.toggleTextColor};\n padding: 0 ${t.toggleCaptionGap} 0 0;\n `;\n },\n });\n"]}

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

@@ -1,3 +1,4 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     handle: string;
@@ -7,7 +8,7 @@ export declare const globalClasses: {
     containerLoading: string;
     background: string;
 };
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     root(t: Theme): string;
     rootSmall(t: Theme): string;
     rootMedium(t: Theme): string;

package/components/Token/Token/Token.js CHANGED Viewed

@@ -6,15 +6,17 @@ var _dec, _class, _class2, _temp;
 import React from 'react';
 import { locale } from "../../../lib/locale/decorators";
 import { CrossIcon } from "../../../internal/icons/CrossIcon";
-import { emptyHandler, getChildrenText } from "../../../lib/utils";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { emptyHandler } from "../../../lib/utils";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import { CloseButtonIcon } from "../../../internal/CloseButtonIcon/CloseButtonIcon";
-import { styles, colorStyles, globalClasses } from "../Token.styles";
+import { reactGetTextContent } from "../../../lib/reactGetTextContent";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { getColorStyles, getStyles } from "../Token.styles";
 import { TokenLocaleHelper } from "../locale";
+import { TokenView } from "../TokenView";
 var getValidation = function getValidation(error, warning) {
   if (error) {
@@ -64,14 +66,18 @@ export var Token = (_dec = locale('Token', TokenLocaleHelper), rootNode(_class =
   _proto.render = function render() {
     var _this2 = this;
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = theme;
+        return _this2.renderMain();
+      });
     });
   };
   _proto.renderMain = function renderMain() {
     var _this$props2 = this.props,
+        size = _this$props2.size,
         children = _this$props2.children,
         isActive = _this$props2.isActive,
         _this$props2$colors = _this$props2.colors,
@@ -97,28 +103,33 @@ export var Token = (_dec = locale('Token', TokenLocaleHelper), rootNode(_class =
         onBlur = _this$props2$onBlur === void 0 ? emptyHandler : _this$props2$onBlur;
     var theme = this.theme;
     var validation = getValidation(error, warning);
-    var removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + getChildrenText(children);
+    var removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + reactGetTextContent(children);
     var icon = isTheme2022(theme) ? /*#__PURE__*/React.createElement(CloseButtonIcon, {
       side: 16,
       color: "inherit",
       colorHover: "inherit",
-      role: "none",
+      "aria-label": removeButtonAriaLabel,
       tabbable: false
     }) : /*#__PURE__*/React.createElement(CrossIcon, null);
-    var classNames = '';
-    if (isTheme2022(theme)) {
-      classNames = cx(styles.tokenDefaultIdle2022(theme), !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme), isActive && styles.tokenDefaultActive2022(theme), warning && styles.tokenWarning2022(theme), error && styles.tokenError2022(theme), disabled && styles.tokenDisabled2022(theme));
-    } else {
-      classNames = cx(colorStyles[colors.idle](theme, validation), !!isActive && colorStyles[colors.active || colors.idle](theme, validation), !!disabled && styles.disabled(theme), !!disabled && colorStyles.defaultDisabled(theme), !!disabled && warning && colorStyles.defaultDisabledWarning(theme), !!disabled && error && colorStyles.defaultDisabledError(theme));
-    }
-    var tokenClassNames = cx(styles.token(this.theme), classNames);
+    var styles = getStyles(this.emotion);
+    var colorStyles = getColorStyles(this.emotion);
+    var classNames = isTheme2022(theme) ? this.emotion.cx(styles.tokenDefaultIdle2022(theme), !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme), isActive && styles.tokenDefaultActive2022(theme), warning && styles.tokenWarning2022(theme), error && styles.tokenError2022(theme), disabled && styles.tokenDisabled2022(theme)) : this.emotion.cx(colorStyles[colors.idle](theme, validation), !!isActive && colorStyles[colors.active || colors.idle](theme, validation), !!disabled && styles.disabled(theme), !!disabled && colorStyles.defaultDisabled(theme), !!disabled && warning && colorStyles.defaultDisabledWarning(theme), !!disabled && error && colorStyles.defaultDisabledError(theme));
+    var textholder = /*#__PURE__*/React.createElement("span", {
+      className: styles.text(this.theme)
+    }, children);
+    var closeButton = /*#__PURE__*/React.createElement("span", {
+      role: isTheme2022(theme) ? undefined : 'button',
+      "aria-label": isTheme2022(theme) ? undefined : removeButtonAriaLabel,
+      onClick: this.onRemoveClick,
+      "data-tid": TokenDataTids.removeIcon
+    }, icon);
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
-    }, this.props), /*#__PURE__*/React.createElement("div", {
+    }, this.props), /*#__PURE__*/React.createElement(TokenView, {
+      className: classNames,
+      size: size,
+      closeButton: closeButton,
       "data-tid": TokenDataTids.root,
-      className: tokenClassNames,
       "aria-describedby": ariaDescribedby,
       onClick: onClick,
       onDoubleClick: onDoubleClick,
@@ -126,16 +137,8 @@ export var Token = (_dec = locale('Token', TokenLocaleHelper), rootNode(_class =
       onMouseLeave: onMouseLeave,
       onFocus: onFocus,
       onBlur: onBlur
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.text(this.theme)
-    }, children), /*#__PURE__*/React.createElement("span", {
-      role: isTheme2022(theme) ? undefined : 'button',
-      "aria-label": isTheme2022(theme) ? undefined : removeButtonAriaLabel,
-      className: cx(styles.removeIcon(this.theme), globalClasses.removeIcon),
-      onClick: this.onRemoveClick,
-      "data-tid": TokenDataTids.removeIcon
-    }, icon)));
+    }, textholder));
   };
   return Token;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Token', _temp)) || _class) || _class);
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Token', _class2.displayName = 'Token', _temp)) || _class) || _class);