npm - @skbkontur/react-ui - Versions diffs - 0.0.0-1ee663e1d9 → 0.0.0-1fb0cccdc2 - Mend

@skbkontur/react-ui 0.0.0-1ee663e1d9 → 0.0.0-1fb0cccdc2

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 (2369) hide show

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

@@ -1,9 +1,9 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+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 { isChrome } from "../../../lib/client";
+import { activeHandleSizeMixin, buttonSizeMixin, captionSizeMixin, containerSizeMixin, handleMixin, inputSizeMixin, toggleSizeMixin } from "../Toggle.mixins";
 export var globalClasses = prefix('toggle')({
   handle: 'handle',
   container: 'container',
@@ -14,75 +14,129 @@ export var globalClasses = prefix('toggle')({
 });
 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      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    "])), t.toggleLineHeight, t.toggleFontSize, globalClasses.handle, t.toggleBgHover, t.toggleWidth);
+    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);
   },
-  activeHandle: function activeHandle(t) {
-    var handleWidthWithBorders = t.toggleHeight;
-    var handleActiveWidth = "calc(" + handleWidthWithBorders + " - 2 * " + t.toggleBorderWidth + " + " + t.toggleHandleActiveWidthIncrement + ")";
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      &:active:not(.", ") .", " {\n        width: ", ";\n      }\n      &:active:not(.", ") input:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ") translateX(-4px);\n      }\n    "])), globalClasses.disabled, globalClasses.handle, handleActiveWidth, globalClasses.disabled, globalClasses.handle, t.toggleWidth, handleWidthWithBorders);
+  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(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &,\n      * {\n        transition: none !important;\n      }\n    "])));
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      &,\n      * {\n        transition: none !important;\n      }\n    "])));
   },
   handle: function handle(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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.toggleHandleBoxShadowOld, t.toggleHandleSize, t.toggleHandleLeft, t.toggleHandleTop, t.toggleHandleSize);
+    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(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override root hover/active styles\n    "])), t.toggleDisabledHandleBg);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override root hover/active styles\n    "])), t.toggleDisabledHandleBg);
   },
   input: function input(t) {
-    var handleWidthWithBorders = t.toggleHeight;
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        box-shadow: inset 0 0 0 ", " ", ";\n        background: ", ";\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .", " {\n        background: ", ";\n        box-shadow: inset 0 0 0 ", " ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n      }\n      &:checked ~ .", " .", " {\n        width: 70%;\n        background: ", ";\n        border-radius: calc(", " * 0.5) 0 0 calc(", " * 0.5);\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n      &:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ");\n        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.toggleHeight, t.toggleHeight, t.toggleBorderColorDisabledChecked, globalClasses.handle, t.toggleWidth, handleWidthWithBorders, t.toggleCheckedBg, t.toggleCheckedBgHover);
+    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(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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);
+    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(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      box-shadow: inset 0 0 0 ", " ", ";\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    "])), t.toggleBorderRadius, t.toggleBorderWidth, t.toggleBorderColor);
+    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(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])), t.toggleBgDisabled, t.toggleBorderColorDisabled);
+    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(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleFocusShadowColor);
+    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(_templateObject11 || (_templateObject11 = _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    "])));
+    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(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      box-shadow: inset 0 0 0 1px ", ";\n      width: 0;\n    "])), t.toggleBorderColorDisabled);
+    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(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.toggleBgActive);
+    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.toggleBgActive);
   },
   isWarning: function isWarning(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
+    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(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])), t.toggleOutlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
+    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) {
-    var labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);
-    var fontSize = parseInt(t.checkboxFontSize);
-    var baselineCompensation = fontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\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    "])), t.toggleHeight, t.toggleWidth, t.toggleWidth, t.toggleBaseBg, t.toggleBorderRadius, t.toggleHeight, t.toggleButtonOffsetY, baselineCompensation);
+    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(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      right: 0;\n      left: auto;\n    "])));
+    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      right: 0;\n      left: auto;\n    "])));
   },
   disabled: function disabled() {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
+    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
   },
   rootLeft: function rootLeft() {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "])));
+    return css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n      flex-direction: row-reverse;\n    "])));
   },
   caption: function caption(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n      line-height: ", ";\n      font-size: ", ";\n    "])), t.toggleTextColor, t.toggleCaptionGap, t.toggleLineHeight, t.toggleFontSize);
+    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(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDisabled);
+    return css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDisabled);
   },
   captionLeft: function captionLeft(t) {
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
+    return 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","isChrome","globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","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","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"]}
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"]}

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

@@ -9,13 +9,27 @@ export declare const globalClasses: {
 };
 export declare const styles: {
     root(t: Theme): string;
-    activeHandle(t: Theme): string;
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
+    activeHandleSmall(t: Theme): string;
+    activeHandleMedium(t: Theme): string;
+    activeHandleLarge(t: Theme): string;
     disableAnimation(): string;
     handle(t: Theme): string;
+    handleSmall(t: Theme): string;
+    handleMedium(t: Theme): string;
+    handleLarge(t: Theme): string;
     handleDisabled(t: Theme): string;
     input(t: Theme): string;
+    inputSmall(t: Theme): string;
+    inputMedium(t: Theme): string;
+    inputLarge(t: Theme): string;
     input2022(t: Theme): string;
     container(t: Theme): string;
+    containerSmall(t: Theme): string;
+    containerMedium(t: Theme): string;
+    containerLarge(t: Theme): string;
     containerDisabled(t: Theme): string;
     focused(t: Theme): string;
     activeBackground(): string;
@@ -24,10 +38,16 @@ export declare const styles: {
     isWarning(t: Theme): string;
     isError(t: Theme): string;
     button(t: Theme): string;
+    buttonSmall(t: Theme): string;
+    buttonMedium(t: Theme): string;
+    buttonLarge(t: Theme): string;
     buttonRight(): string;
     disabled(): string;
     rootLeft(): string;
     caption(t: Theme): string;
+    captionSmall(t: Theme): string;
+    captionMedium(t: Theme): string;
+    captionLarge(t: Theme): string;
     disabledCaption(t: Theme): string;
     captionLeft(t: Theme): string;
 };

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

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-var _class, _class2, _temp;
+var _dec, _class, _class2, _temp;
 import React from 'react';
+import { locale } from "../../../lib/locale/decorators";
 import { CrossIcon } from "../../../internal/icons/CrossIcon";
 import { emptyHandler } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
@@ -12,7 +13,11 @@ import { cx } 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 { getVisualStateDataAttributes } from "../../../internal/CommonWrapper/utils/getVisualStateDataAttributes";
+import { styles, colorStyles } from "../Token.styles";
+import { TokenLocaleHelper } from "../locale";
+import { TokenView } from "../TokenView";
 var getValidation = function getValidation(error, warning) {
   if (error) {
@@ -28,7 +33,7 @@ export var TokenDataTids = {
   root: 'Token__root',
   removeIcon: 'Token__removeIcon'
 };
-export var Token = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+export var Token = (_dec = locale('Token', TokenLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Token, _React$Component);
   function Token() {
@@ -70,6 +75,7 @@ export var Token = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   _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,
@@ -95,26 +101,33 @@ export var Token = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
         onBlur = _this$props2$onBlur === void 0 ? emptyHandler : _this$props2$onBlur;
     var theme = this.theme;
     var validation = getValidation(error, warning);
+    var removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + reactGetTextContent(children);
     var icon = isTheme2022(theme) ? /*#__PURE__*/React.createElement(CloseButtonIcon, {
       side: 16,
       color: "inherit",
       colorHover: "inherit",
+      "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 classNames = isTheme2022(theme) ? 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)) : 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, getVisualStateDataAttributes({
+      disabled: disabled
+    })), /*#__PURE__*/React.createElement(TokenView, {
+      className: classNames,
+      size: size,
+      closeButton: closeButton,
       "data-tid": TokenDataTids.root,
-      className: tokenClassNames,
       "aria-describedby": ariaDescribedby,
       onClick: onClick,
       onDoubleClick: onDoubleClick,
@@ -122,14 +135,8 @@ export var Token = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       onMouseLeave: onMouseLeave,
       onFocus: onFocus,
       onBlur: onBlur
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.text(this.theme)
-    }, children), /*#__PURE__*/React.createElement("span", {
-      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;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Token', _class2.displayName = 'Token', _temp)) || _class) || _class);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["Token.tsx"],"names":["React","CrossIcon","emptyHandler","ThemeContext","CommonWrapper","cx","rootNode","isTheme2022","CloseButtonIcon","styles","colorStyles","globalClasses","getValidation","error","warning","TokenDataTids","root","removeIcon","Token","onRemoveClick","event","props","disabled","onRemove","preventDefault","render","theme","renderMain","children","isActive","colors","idle","active","ariaDescribedby","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","icon","classNames","tokenDefaultIdle2022","tokenDefaultIdleHovering2022","tokenDefaultActive2022","tokenWarning2022","tokenError2022","tokenDisabled2022","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassNames","token","setRootNode","text","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles, colorStyles, globalClasses } from './Token.styles';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n idle: TokenColorName;\n active?: TokenColorName;\n}\n\nexport interface TokenProps extends CommonProps {\n colors?: TokenColors;\n isActive?: boolean;\n /*\n Состояние валидации при ошибке.\n /\n error?: boolean;\n /\n Состояние валидации при предупреждении.\n /\n warning?: boolean;\n disabled?: boolean;\n /\n Атрибут для указания id элемента(-ов), описывающих его\n */\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n onRemove?: React.MouseEventHandler<HTMLElement>;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nconst getValidation = (error: TokenProps['error'], warning: TokenProps['warning']) => {\n if (error) {\n return 'error';\n } else if (warning) {\n return 'warning';\n }\n\n return null;\n};\n\nexport const TokenDataTids = {\n root: 'Token__root',\n removeIcon: 'Token__removeIcon',\n} as const;\n\n@rootNode\nexport class Token extends React.Component<TokenProps> {\n public static __KONTUR_REACT_UI__ = 'Token';\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n children,\n isActive,\n colors = { idle: 'defaultIdle', active: 'defaultActive' },\n error,\n warning,\n disabled,\n 'aria-describedby': ariaDescribedby,\n onClick = emptyHandler,\n onDoubleClick = emptyHandler,\n onMouseEnter = emptyHandler,\n onMouseLeave = emptyHandler,\n onFocus = emptyHandler,\n onBlur = emptyHandler,\n } = this.props;\n\n const theme = this.theme;\n\n const validation = getValidation(error, warning);\n\n const icon = isTheme2022(theme) ? (\n <CloseButtonIcon side={16} color=\"inherit\" colorHover=\"inherit\" tabbable={false} />\n ) : (\n <CrossIcon />\n );\n\n let classNames = '';\n if (isTheme2022(theme)) {\n classNames = cx(\n styles.tokenDefaultIdle2022(theme),\n !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme),\n isActive && styles.tokenDefaultActive2022(theme),\n warning && styles.tokenWarning2022(theme),\n error && styles.tokenError2022(theme),\n disabled && styles.tokenDisabled2022(theme),\n );\n } else {\n classNames = cx(\n colorStyles[colors.idle](theme, validation),\n !!isActive && colorStyles[colors.active \|\| colors.idle](theme, validation),\n !!disabled && styles.disabled(theme),\n !!disabled && colorStyles.defaultDisabled(theme),\n !!disabled && warning && colorStyles.defaultDisabledWarning(theme),\n !!disabled && error && colorStyles.defaultDisabledError(theme),\n );\n }\n\n const tokenClassNames = cx(styles.token(this.theme), classNames);\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={TokenDataTids.root}\n className={tokenClassNames}\n aria-describedby={ariaDescribedby}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n <span className={styles.text(this.theme)}>{children}</span>\n <span\n className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)}\n onClick={this.onRemoveClick}\n data-tid={TokenDataTids.removeIcon}\n >\n {icon}\n </span>\n </div>\n </CommonWrapper>\n );\n }\n\n private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n const { disabled, onRemove = emptyHandler } = this.props;\n\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onRemove(event);\n };\n}\n"]}
1	+ {"version":3,"sources":["Token.tsx"],"names":["React","locale","CrossIcon","emptyHandler","ThemeContext","CommonWrapper","cx","rootNode","isTheme2022","CloseButtonIcon","reactGetTextContent","getVisualStateDataAttributes","styles","colorStyles","TokenLocaleHelper","TokenView","getValidation","error","warning","TokenDataTids","root","removeIcon","Token","onRemoveClick","event","props","disabled","onRemove","preventDefault","render","theme","renderMain","size","children","isActive","colors","idle","active","ariaDescribedby","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","removeButtonAriaLabel","icon","classNames","tokenDefaultIdle2022","tokenDefaultIdleHovering2022","tokenDefaultActive2022","tokenWarning2022","tokenError2022","tokenDisabled2022","defaultDisabled","defaultDisabledWarning","defaultDisabledError","textholder","text","closeButton","undefined","setRootNode","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\nimport { SizeProp } from '../../lib/types/props';\nimport { reactGetTextContent } from '../../lib/reactGetTextContent';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { styles, colorStyles } from './Token.styles';\nimport { TokenLocale, TokenLocaleHelper } from './locale';\nimport { TokenView } from './TokenView';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n idle: TokenColorName;\n active?: TokenColorName;\n}\n\nexport type TokenSize = SizeProp;\n\nexport interface TokenProps extends Pick<AriaAttributes, 'aria-describedby'>, CommonProps {\n colors?: TokenColors;\n isActive?: boolean;\n /*\n Состояние валидации при ошибке.\n /\n error?: boolean;\n /\n Состояние валидации при предупреждении.\n /\n warning?: boolean;\n disabled?: boolean;\n /\n Размер\n */\n size?: TokenSize;\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n onRemove?: React.MouseEventHandler<HTMLElement>;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nconst getValidation = (error: TokenProps['error'], warning: TokenProps['warning']) => {\n if (error) {\n return 'error';\n } else if (warning) {\n return 'warning';\n }\n\n return null;\n};\n\nexport const TokenDataTids = {\n root: 'Token__root',\n removeIcon: 'Token__removeIcon',\n} as const;\n\n@rootNode\n@locale('Token', TokenLocaleHelper)\nexport class Token extends React.Component<TokenProps> {\n public static __KONTUR_REACT_UI__ = 'Token';\n public static displayName = 'Token';\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n private readonly locale!: TokenLocale;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n size,\n children,\n isActive,\n colors = { idle: 'defaultIdle', active: 'defaultActive' },\n error,\n warning,\n disabled,\n 'aria-describedby': ariaDescribedby,\n onClick = emptyHandler,\n onDoubleClick = emptyHandler,\n onMouseEnter = emptyHandler,\n onMouseLeave = emptyHandler,\n onFocus = emptyHandler,\n onBlur = emptyHandler,\n } = this.props;\n\n const theme = this.theme;\n\n const validation = getValidation(error, warning);\n const removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + reactGetTextContent(children);\n\n const icon = isTheme2022(theme) ? (\n <CloseButtonIcon\n side={16}\n color=\"inherit\"\n colorHover=\"inherit\"\n aria-label={removeButtonAriaLabel}\n tabbable={false}\n />\n ) : (\n <CrossIcon />\n );\n\n const classNames = isTheme2022(theme)\n ? cx(\n styles.tokenDefaultIdle2022(theme),\n !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme),\n isActive && styles.tokenDefaultActive2022(theme),\n warning && styles.tokenWarning2022(theme),\n error && styles.tokenError2022(theme),\n disabled && styles.tokenDisabled2022(theme),\n )\n : cx(\n colorStyles[colors.idle](theme, validation),\n !!isActive && colorStyles[colors.active \|\| colors.idle](theme, validation),\n !!disabled && styles.disabled(theme),\n !!disabled && colorStyles.defaultDisabled(theme),\n !!disabled && warning && colorStyles.defaultDisabledWarning(theme),\n !!disabled && error && colorStyles.defaultDisabledError(theme),\n );\n\n const textholder = <span className={styles.text(this.theme)}>{children}</span>;\n\n const closeButton = (\n <span\n role={isTheme2022(theme) ? undefined : 'button'}\n aria-label={isTheme2022(theme) ? undefined : removeButtonAriaLabel}\n onClick={this.onRemoveClick}\n data-tid={TokenDataTids.removeIcon}\n >\n {icon}\n </span>\n );\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props} {...getVisualStateDataAttributes({ disabled })}>\n <TokenView\n className={classNames}\n size={size}\n closeButton={closeButton}\n data-tid={TokenDataTids.root}\n aria-describedby={ariaDescribedby}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n {textholder}\n </TokenView>\n </CommonWrapper>\n );\n }\n\n private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n const { disabled, onRemove = emptyHandler } = this.props;\n\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onRemove(event);\n };\n}\n"]}

package/components/Token/Token.d.ts CHANGED Viewed

@@ -1,12 +1,14 @@
 import React, { AriaAttributes } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
 import { colorStyles } from './Token.styles';
 export declare type TokenColorName = keyof typeof colorStyles;
 export interface TokenColors {
     idle: TokenColorName;
     active?: TokenColorName;
 }
-export interface TokenProps extends CommonProps {
+export declare type TokenSize = SizeProp;
+export interface TokenProps extends Pick<AriaAttributes, 'aria-describedby'>, CommonProps {
     colors?: TokenColors;
     isActive?: boolean;
     /**
@@ -19,9 +21,9 @@ export interface TokenProps extends CommonProps {
     warning?: boolean;
     disabled?: boolean;
     /**
-     * Атрибут для указания id элемента(-ов), описывающих его
+     * Размер
      */
-    'aria-describedby'?: AriaAttributes['aria-describedby'];
+    size?: TokenSize;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onRemove?: React.MouseEventHandler<HTMLElement>;
@@ -36,8 +38,10 @@ export declare const TokenDataTids: {
 };
 export declare class Token extends React.Component<TokenProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     private theme;
     private setRootNode;
+    private readonly locale;
     render(): JSX.Element;
     private renderMain;
     private onRemoveClick;

package/components/Token/Token.md CHANGED Viewed

@@ -110,3 +110,19 @@ import { Gapped, Token } from '@skbkontur/react-ui';
   </Gapped>
 </Gapped>;
 ```
+У Token есть 3 стандартных размера.
+```jsx harmony
+<Gapped vertical>
+  <Token size="small">
+    Маленький
+  </Token>
+  <Token size="medium">
+    Средний
+  </Token>
+  <Token size="large">
+    Большой
+  </Token>
+</Gapped>
+```

package/components/Token/Token.mixins/Token.mixins.js ADDED Viewed

@@ -0,0 +1,8 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+var _templateObject;
+import { css } from "../../../lib/theming/Emotion";
+export var tokenSizeMixin = function tokenSizeMixin(tokenPaddingY, tokenPaddingX, lineHeight, fontSize, tokenMarginY, tokenMarginX) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    padding: ", " ", ";\n    margin: ", " ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "])), tokenPaddingY, tokenPaddingX, tokenMarginY, tokenMarginX, lineHeight, fontSize);
+};

package/components/Token/Token.mixins/Token.mixins.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["Token.mixins.ts"],"names":["css","tokenSizeMixin","tokenPaddingY","tokenPaddingX","lineHeight","fontSize","tokenMarginY","tokenMarginX"],"mappings":"oHAAA,SAASA,GAAT,QAAoB,2BAApB;;AAEA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB;AAC5BC,aAD4B;AAE5BC,aAF4B;AAG5BC,UAH4B;AAI5BC,QAJ4B;AAK5BC,YAL4B;AAM5BC,YAN4B;AAOzB;AACH,SAAOP,GAAP;AACaE,EAAAA,aADb,EAC8BC,aAD9B;AAEYG,EAAAA,YAFZ,EAE4BC,YAF5B;AAGiBH,EAAAA,UAHjB;AAIeC,EAAAA,QAJf;;AAMD,CAdM","sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nexport const tokenSizeMixin = (\n tokenPaddingY: string,\n tokenPaddingX: string,\n lineHeight: string,\n fontSize: string,\n tokenMarginY: string,\n tokenMarginX: string,\n) => {\n return css`\n padding: ${tokenPaddingY} ${tokenPaddingX};\n margin: ${tokenMarginY} ${tokenMarginX};\n line-height: ${lineHeight};\n font-size: ${fontSize};\n `;\n};\n"]}

package/components/Token/Token.mixins/package.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Token/Token.mixins.js",
+  "module": "Token.mixins",
+  "types": "../Token.mixins.d.ts",
+  "sideEffects": false
+}

package/components/Token/Token.mixins.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const tokenSizeMixin: (tokenPaddingY: string, tokenPaddingX: string, lineHeight: string, fontSize: string, tokenMarginY: string, tokenMarginX: string) => string;