@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0dca6f33be

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

@@ -1,18 +1,33 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const globalClasses: {
+    handle: string;
+    container: string;
+    disabled: string;
+    containerDisabled: string;
+    containerLoading: string;
+    background: string;
+};
+export declare const styles: {
     root(t: Theme): string;
+    activeHandle(t: Theme): string;
+    disableAnimation(): string;
     handle(t: Theme): string;
+    handleDisabled(t: Theme): string;
     input(t: Theme): string;
+    input2022(t: Theme): string;
     container(t: Theme): string;
+    containerDisabled(t: Theme): string;
     focused(t: Theme): string;
     activeBackground(): string;
-    isLoading(t: Theme): 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(t: Theme): string;
+    button(t: Theme): string;
+    buttonRight(): string;
+    disabled(): string;
     rootLeft(): string;
     caption(t: Theme): string;
+    disabledCaption(t: Theme): string;
     captionLeft(t: Theme): string;
 };

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

@@ -1,72 +1,204 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
+var _client = require("../../lib/client");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 
-var styles = {
+var globalClasses = (0, _Emotion.prefix)('toggle')({
+  handle: 'handle',
+  container: 'container',
+  disabled: 'disabled',
+  containerDisabled: 'container-disabled',
+  containerLoading: 'container-loading',
+  background: 'background' });exports.globalClasses = globalClasses;
+
+
+var styles = (0, _Emotion.memoizeStyle)({
   root: function root(t) {
-    var disabled = (0, _Emotion.cssName)(styles.disabled(t));
-    var handleWidthWithBorders = t.toggleHeight;
-    var handleActiveWidth = "calc(" + handleWidthWithBorders + " - 2 * " + t.toggleBorderWidth + " + " + t.toggleHandleActiveWidthIncrement + ")";
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])),
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n      }\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        width: ", ";\n        flex: 0 0 auto;\n      }\n    "], ["\n      display: inline-flex;\n      cursor: pointer;\n      align-items: baseline;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n\n      &:hover .", " {\n        background: ", ";\n      }\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        width: ", ";\n        flex: 0 0 auto;\n      }\n    "])),
 
 
 
-    disabled,
-    (0, _Emotion.cssName)(styles.handle(t)),
+
+    t.toggleLineHeight,
+    t.toggleFontSize,
+
+    globalClasses.handle,
     t.toggleBgHover,
 
 
-    disabled, (0, _Emotion.cssName)(styles.handle(t)),
+
+
+
+
+
+
+    t.toggleWidth);
+
+
+
+  },
+
+  activeHandle: function activeHandle(t) {
+    var handleWidthWithBorders = t.toggleHeight;
+    var handleActiveWidth = "calc(" + handleWidthWithBorders + " - 2 * " + t.toggleBorderWidth + " + " + t.toggleHandleActiveWidthIncrement + ")";
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:active:not(.", ") .", " {\n        width: ", ";\n      }\n      &:active:not(.", ") input:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ") translateX(-4px);\n      }\n    "])),
+    globalClasses.disabled, globalClasses.handle,
     handleActiveWidth,
 
-    disabled, (0, _Emotion.cssName)(styles.input(t)), (0, _Emotion.cssName)(styles.handle(t)),
-    t.toggleWidth, handleWidthWithBorders,
-    t.toggleHandleActiveWidthIncrement);
+    globalClasses.disabled, globalClasses.handle,
+    t.toggleWidth, handleWidthWithBorders);
+
+
+  },
+
+  disableAnimation: function disableAnimation() {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      * {\n        transition: none !important;\n      }\n    "])));
+
+
+
 
 
   },
 
   handle: function handle(t) {
-    var handleSize = "calc(" + t.toggleHeight + " - 2 * " + t.toggleBorderWidth + ")";
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\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,
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      border-radius: ", ";\n      bottom: ", ";\n      box-shadow: ", ";\n      height: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n      transition: 0.2s ease-in;\n      width: ", ";\n    "])),
+    t.toggleHandleBg,
     t.toggleHandleBorderRadius,
     t.toggleBorderWidth,
-    t.toggleBorderWidth, t.toggleBorderWidth,
-    handleSize,
-    t.toggleBorderWidth,
+    t.toggleHandleBoxShadowOld,
+    t.toggleHandleSize,
+    t.toggleHandleLeft,
 
-    t.toggleBorderWidth,
+    t.toggleHandleTop,
+
+    t.toggleHandleSize);
+
+  },
 
-    handleSize);
+  handleDisabled: function handleDisabled(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", " !important; // override root hover/active styles\n    "])),
+    t.toggleDisabledHandleBg);
 
   },
 
   input: function input(t) {
     var handleWidthWithBorders = t.toggleHeight;
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])),
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\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        background: ", ";\n        &:hover {\n          background: ", ";\n        }\n      }\n    "])),
 
 
 
 
 
 
-    (0, _Emotion.cssName)(styles.container(t)),
+    globalClasses.container,
     t.toggleBorderWidth, t.toggleBgChecked,
     t.toggleBgChecked,
 
 
-    (0, _Emotion.cssName)(styles.container(t)), (0, _Emotion.cssName)(styles.activeBackground()),
+    globalClasses.containerDisabled,
+    t.toggleBorderWidth, t.toggleBorderColorDisabledChecked,
+    t.toggleBgDisabledChecked,
+
+
+    globalClasses.containerLoading,
+    t.toggleBorderColor,
+    t.toggleBorderWidth, t.toggleBorderColor,
+
+    globalClasses.container, globalClasses.background,
 
     t.toggleBgChecked,
 
-    (0, _Emotion.cssName)(styles.handle(t)),
-    t.toggleWidth, handleWidthWithBorders);
+    globalClasses.containerDisabled, globalClasses.background,
+
+    t.toggleBgDisabledChecked,
+    t.toggleHeight, t.toggleHeight,
+    t.toggleBorderColorDisabledChecked,
+
+    globalClasses.handle,
+    t.toggleWidth, handleWidthWithBorders,
+    t.toggleCheckedBg,
+
+    t.toggleCheckedBgHover);
+
+
+
+  },
+
+  input2022: function input2022(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:enabled {\n        ~ .", ", ~ .", " {\n          transition: 0.2s ease-in !important;\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 (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])),
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\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);
 
@@ -76,16 +208,23 @@ var styles = {
 
 
 
+  },
+
+  containerDisabled: function containerDisabled(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])),
+    t.toggleBgDisabled,
+    t.toggleBorderColorDisabled);
+
   },
 
   focused: function focused(t) {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", " !important;\n    "])),
-    t.outlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])),
+    t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
 
   },
 
   activeBackground: function activeBackground() {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])));
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])));
 
 
 
@@ -96,82 +235,88 @@ var styles = {
 
   },
 
-  isLoading: function isLoading(t) {
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ":checked ~ ", "& {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n      }\n      ", " {\n        background: ", ";\n      }\n    "])),
-    (0, _Emotion.cssName)(styles.input(t)), (0, _Emotion.cssName)(styles.container(t)),
-    t.toggleBorderColor,
-    t.toggleBorderWidth, t.toggleBorderColor,
+  disabledBackground: function disabledBackground(t) {
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: inset 0 0 0 1px ", ";\n      width: 0;\n    "])),
+    t.toggleBorderColorDisabled);
 
-    (0, _Emotion.cssName)(styles.activeBackground()),
-    t.toggleBgActive);
 
+  },
+
+  activeBackgroundLoading: function activeBackgroundLoading(t) {
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
+    t.toggleBgActive);
 
   },
 
   isWarning: function isWarning(t) {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])),
-    t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])),
+    t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
 
   },
 
   isError: function isError(t) {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])),
-    t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])),
+    t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
 
   },
 
-  outline: function outline(t) {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n    "])),
-    t.toggleBorderRadius);
+  button: function button(t) {
+    var labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);
+    var fontSize = parseInt(t.checkboxFontSize);
+    var baselineCompensation = fontSize <= 16 && _client.isChrome ? -labGrotesqueCompenstation : 0;
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      left: 0;\n      top: 0;\n      height: ", ";\n      width: ", ";\n      flex: 1 0 ", ";\n\n      background: ", ";\n      border-radius: ", ";\n      line-height: ", ";\n\n      margin-top: calc(", " + ", "px);\n    "])),
 
-  },
 
-  wrapper: function wrapper(t) {
-    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\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);
-
-
-
+    t.toggleWidth,
 
+    t.toggleBaseBg,
+    t.toggleBorderRadius,
+    t.toggleHeight,
 
+    t.toggleButtonOffsetY, baselineCompensation);
 
   },
 
-  disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default !important;\n\n      ", " {\n        background: ", ";\n      }\n\n      ", " {\n        opacity: 0.3;\n      }\n    "])),
+  buttonRight: function buttonRight() {
+    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      right: 0;\n      left: auto;\n    "])));
 
 
-    (0, _Emotion.cssName)(styles.container(t)),
-    t.toggleBgDisabled,
-
 
-    (0, _Emotion.cssName)(styles.wrapper(t)));
+  },
 
+  disabled: function disabled() {
+    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default;\n    "])));
 
 
   },
 
   rootLeft: function rootLeft() {
-    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-direction: row-reverse;\n    "])));
+    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-direction: row-reverse;\n    "])));
 
 
   },
 
   caption: function caption(t) {
-    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 0 0 ", ";\n    "])),
-    t.toggleCaptionGap);
+    return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n      line-height: ", ";\n      font-size: ", ";\n    "])),
+    t.toggleTextColor,
+    t.toggleCaptionGap,
+    t.toggleLineHeight,
+    t.toggleFontSize);
 
   },
 
-  captionLeft: function captionLeft(t) {
-    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 ", " 0 0;\n    "])),
-    t.toggleCaptionGap);
+  disabledCaption: function disabledCaption(t) {
+    return (0, _Emotion.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.textColorDisabled);
 
-  } };
+  },
 
+  captionLeft: function captionLeft(t) {
+    return (0, _Emotion.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])),
+    t.toggleTextColor,
+    t.toggleCaptionGap);
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.styles.ts"],"names":["styles","root","t","disabled","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","css","handle","toggleBgHover","input","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","container","toggleBgChecked","activeBackground","toggleBorderRadius","toggleBorderColor","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","isLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","outline","wrapper","toggleBgDisabled","rootLeft","caption","toggleCaptionGap","captionLeft","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,QAAMC,QAAQ,GAAG,sBAAQH,MAAM,CAACG,QAAP,CAAgBD,CAAhB,CAAR,CAAjB;AACA,QAAME,sBAAsB,GAAGF,CAAC,CAACG,YAAjC;AACA,QAAMC,iBAAiB,aAAWF,sBAAX,eAA2CF,CAAC,CAACK,iBAA7C,WAAoEL,CAAC,CAACM,gCAAtE,MAAvB;AACA,eAAOC,YAAP;;;;AAIgBN,IAAAA,QAJhB;AAKM,0BAAQH,MAAM,CAACU,MAAP,CAAcR,CAAd,CAAR,CALN;AAMoBA,IAAAA,CAAC,CAACS,aANtB;;;AASiBR,IAAAA,QATjB,EAS8B,sBAAQH,MAAM,CAACU,MAAP,CAAcR,CAAd,CAAR,CAT9B;AAUaI,IAAAA,iBAVb;;AAYiBH,IAAAA,QAZjB,EAY8B,sBAAQH,MAAM,CAACY,KAAP,CAAaV,CAAb,CAAR,CAZ9B,EAYoE,sBAAQF,MAAM,CAACU,MAAP,CAAcR,CAAd,CAAR,CAZpE;AAa4BA,IAAAA,CAAC,CAACW,WAb9B,EAa0DT,sBAb1D;AAcoBF,IAAAA,CAAC,CAACM,gCAdtB;;;AAiBD,GAtBY;;AAwBbE,EAAAA,MAxBa,kBAwBNR,CAxBM,EAwBI;AACf,QAAMY,UAAU,aAAWZ,CAAC,CAACG,YAAb,eAAmCH,CAAC,CAACK,iBAArC,MAAhB;AACA,eAAOE,YAAP;AACgBP,IAAAA,CAAC,CAACa,QADlB;AAEmBb,IAAAA,CAAC,CAACc,wBAFrB;AAGYd,IAAAA,CAAC,CAACK,iBAHd;AAIkBL,IAAAA,CAAC,CAACK,iBAJpB,EAIwEL,CAAC,CAACK,iBAJ1E;AAKYO,IAAAA,UALZ;AAMUZ,IAAAA,CAAC,CAACK,iBANZ;;AAQSL,IAAAA,CAAC,CAACK,iBARX;;AAUWO,IAAAA,UAVX;;AAYD,GAtCY;;AAwCbF,EAAAA,KAxCa,iBAwCPV,CAxCO,EAwCG;AACd,QAAME,sBAAsB,GAAGF,CAAC,CAACG,YAAjC;AACA,eAAOI,YAAP;;;;;;;AAOgB,0BAAQT,MAAM,CAACiB,SAAP,CAAiBf,CAAjB,CAAR,CAPhB;AAQ8BA,IAAAA,CAAC,CAACK,iBARhC,EAQqDL,CAAC,CAACgB,eARvD;AASkBhB,IAAAA,CAAC,CAACgB,eATpB;;;AAYgB,0BAAQlB,MAAM,CAACiB,SAAP,CAAiBf,CAAjB,CAAR,CAZhB,EAYgD,sBAAQF,MAAM,CAACmB,gBAAP,EAAR,CAZhD;;AAckBjB,IAAAA,CAAC,CAACgB,eAdpB;;AAgBgB,0BAAQlB,MAAM,CAACU,MAAP,CAAcR,CAAd,CAAR,CAhBhB;AAiB4BA,IAAAA,CAAC,CAACW,WAjB9B,EAiB0DT,sBAjB1D;;;AAoBD,GA9DY;;AAgEba,EAAAA,SAhEa,qBAgEHf,CAhEG,EAgEO;AAClB,eAAOO,YAAP;AACmBP,IAAAA,CAAC,CAACkB,kBADrB;AAE4BlB,IAAAA,CAAC,CAACK,iBAF9B,EAEmDL,CAAC,CAACmB,iBAFrD;;;;;;;;AAUD,GA3EY;;AA6EbC,EAAAA,OA7Ea,mBA6ELpB,CA7EK,EA6EK;AAChB,eAAOO,YAAP;AAC0BP,IAAAA,CAAC,CAACqB,iBAD5B,EACwDrB,CAAC,CAACsB,kBAD1D,EACgFtB,CAAC,CAACuB,sBADlF;;AAGD,GAjFY;;AAmFbN,EAAAA,gBAnFa,8BAmFM;AACjB,eAAOV,YAAP;;;;;;;;;AASD,GA7FY;;AA+FbiB,EAAAA,SA/Fa,qBA+FHxB,CA/FG,EA+FO;AAClB,eAAOO,YAAP;AACI,0BAAQT,MAAM,CAACY,KAAP,CAAaV,CAAb,CAAR,CADJ,EAC0C,sBAAQF,MAAM,CAACiB,SAAP,CAAiBf,CAAjB,CAAR,CAD1C;AAEkBA,IAAAA,CAAC,CAACmB,iBAFpB;AAG8BnB,IAAAA,CAAC,CAACK,iBAHhC,EAGqDL,CAAC,CAACmB,iBAHvD;;AAKI,0BAAQrB,MAAM,CAACmB,gBAAP,EAAR,CALJ;AAMkBjB,IAAAA,CAAC,CAACyB,cANpB;;;AASD,GAzGY;;AA2GbC,EAAAA,SA3Ga,qBA2GH1B,CA3GG,EA2GO;AAClB,eAAOO,YAAP;AAC0BP,IAAAA,CAAC,CAACqB,iBAD5B,EACwDrB,CAAC,CAACsB,kBAD1D,EACgFtB,CAAC,CAAC2B,wBADlF;;AAGD,GA/GY;;AAiHbC,EAAAA,OAjHa,mBAiHL5B,CAjHK,EAiHK;AAChB,eAAOO,YAAP;AAC0BP,IAAAA,CAAC,CAACqB,iBAD5B,EACwDrB,CAAC,CAACsB,kBAD1D,EACgFtB,CAAC,CAAC6B,sBADlF;;AAGD,GArHY;;AAuHbC,EAAAA,OAvHa,mBAuHL9B,CAvHK,EAuHK;AAChB,eAAOO,YAAP;AACmBP,IAAAA,CAAC,CAACkB,kBADrB;;AAGD,GA3HY;;AA6Hba,EAAAA,OA7Ha,mBA6HL/B,CA7HK,EA6HK;AAChB,eAAOO,YAAP;;AAEYP,IAAAA,CAAC,CAACG,YAFd;;AAIWH,IAAAA,CAAC,CAACW,WAJb;AAKcX,IAAAA,CAAC,CAACW,WALhB;;;;;;;AAYD,GA1IY;;AA4IbV,EAAAA,QA5Ia,oBA4IJD,CA5II,EA4IM;AACjB,eAAOO,YAAP;;;AAGI,0BAAQT,MAAM,CAACiB,SAAP,CAAiBf,CAAjB,CAAR,CAHJ;AAIkBA,IAAAA,CAAC,CAACgC,gBAJpB;;;AAOI,0BAAQlC,MAAM,CAACiC,OAAP,CAAe/B,CAAf,CAAR,CAPJ;;;;AAWD,GAxJY;;AA0JbiC,EAAAA,QA1Ja,sBA0JF;AACT,eAAO1B,YAAP;;;AAGD,GA9JY;;AAgKb2B,EAAAA,OAhKa,mBAgKLlC,CAhKK,EAgKK;AAChB,eAAOO,YAAP;AACmBP,IAAAA,CAAC,CAACmC,gBADrB;;AAGD,GApKY;;AAsKbC,EAAAA,WAtKa,uBAsKDpC,CAtKC,EAsKS;AACpB,eAAOO,YAAP;AACeP,IAAAA,CAAC,CAACmC,gBADjB;;AAGD,GA1KY,EAAf;;;AA6KO,IAAME,QAAQ,GAAG,2BAAavC,MAAb,CAAjB,C","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      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor} !important;\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      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\r\n    `;\r\n  },\r\n\r\n  isError(t: Theme) {\r\n    return css`\r\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\r\n    `;\r\n  },\r\n\r\n  outline(t: Theme) {\r\n    return css`\r\n      border-radius: ${t.toggleBorderRadius};\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      cursor: default !important;\r\n\r\n      ${cssName(styles.container(t))} {\r\n        background: ${t.toggleBgDisabled};\r\n      }\r\n\r\n      ${cssName(styles.wrapper(t))} {\r\n        opacity: 0.3;\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":["globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","css","toggleLineHeight","toggleFontSize","toggleBgHover","toggleWidth","activeHandle","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","disableAnimation","toggleHandleBg","toggleHandleBorderRadius","toggleHandleBoxShadowOld","toggleHandleSize","toggleHandleLeft","toggleHandleTop","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleCheckedBg","toggleCheckedBgHover","input2022","toggleContainerBg","toggleContainerBoxShadow","toggleHandleBoxShadow","toggleContainerBgChecked","toggleContainerBoxShadowChecked","toggleHandleBgChecked","toggleHandleBoxShadowChecked","toggleContainerBgHover","toggleContainerBoxShadowHover","toggleHandleBgHover","toggleHandleBoxShadowHover","toggleContainerBgCheckedHover","toggleContainerBoxShadowCheckedHover","toggleHandleBgCheckedHover","toggleHandleBoxShadowCheckedHover","toggleContainerBgDisabled","toggleContainerBoxShadowDisabled","toggleHandleBgDisabled","toggleHandleBoxShadowDisabled","toggleContainerBgDisabledChecked","toggleContainerBoxShadowDisabledChecked","toggleHandleBgDisabledChecked","toggleHandleBoxShadowDisabledChecked","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","toggleOutlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","button","labGrotesqueCompenstation","parseInt","labGrotesqueBaselineCompensation","fontSize","checkboxFontSize","baselineCompensation","isChrome","toggleBaseBg","toggleButtonOffsetY","buttonRight","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';\nimport { isChrome } from '../../lib/client';\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      line-height: ${t.toggleLineHeight};\n      font-size: ${t.toggleFontSize};\n\n      &:hover .${globalClasses.handle} {\n        background: ${t.toggleBgHover};\n      }\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        width: ${t.toggleWidth};\n        flex: 0 0 auto;\n      }\n    `;\n  },\n\n  activeHandle(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n    return css`\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}) translateX(-4px);\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      border-radius: ${t.toggleHandleBorderRadius};\n      bottom: ${t.toggleBorderWidth};\n      box-shadow: ${t.toggleHandleBoxShadowOld};\n      height: ${t.toggleHandleSize};\n      left: ${t.toggleHandleLeft};\n      position: absolute;\n      top: ${t.toggleHandleTop};\n      transition: 0.2s ease-in;\n      width: ${t.toggleHandleSize};\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        background: ${t.toggleCheckedBg};\n        &:hover {\n          background: ${t.toggleCheckedBgHover};\n        }\n      }\n    `;\n  },\n\n  input2022(t: Theme) {\n    return css`\n      &:enabled {\n        ~ .${globalClasses.container}, ~ .${globalClasses.handle} {\n          transition: 0.2s ease-in !important;\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      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.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    const labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);\n    const fontSize = parseInt(t.checkboxFontSize);\n    const baselineCompensation = fontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n    return css`\n      position: absolute;\n      left: 0;\n      top: 0;\n      height: ${t.toggleHeight};\n      width: ${t.toggleWidth};\n      flex: 1 0 ${t.toggleWidth};\n\n      background: ${t.toggleBaseBg};\n      border-radius: ${t.toggleBorderRadius};\n      line-height: ${t.toggleHeight};\n\n      margin-top: calc(${t.toggleButtonOffsetY} + ${baselineCompensation}px);\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      line-height: ${t.toggleLineHeight};\n      font-size: ${t.toggleFontSize};\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/cjs/components/Toggle/index.js.map

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

package/cjs/components/Token/Token.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { AriaAttributes } 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,9 +9,19 @@ export interface TokenColors {
 export interface TokenProps extends CommonProps {
     colors?: TokenColors;
     isActive?: boolean;
+    /**
+     * Состояние валидации при ошибке.
+     */
     error?: boolean;
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
     disabled?: boolean;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onRemove?: React.MouseEventHandler<HTMLElement>;
@@ -20,9 +30,14 @@ export interface TokenProps extends CommonProps {
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
+export declare const TokenDataTids: {
+    readonly root: "Token__root";
+    readonly removeIcon: "Token__removeIcon";
+};
 export declare class Token extends React.Component<TokenProps> {
     static __KONTUR_REACT_UI__: string;
     private theme;
+    private setRootNode;
     render(): JSX.Element;
     private renderMain;
     private onRemoveClick;