@skbkontur/react-ui 0.0.0-4cd450ed1e → 0.0.0-4da47ece08

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","toggleBgWarning","isError","toggleBgError","wrapper","toggleBgDisabled","rootLeft","caption","toggleCaptionGap","captionLeft","jsStyles"],"mappings":"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","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    const disabled = cssName(styles.disabled(t));\r\n    const handleWidthWithBorders = t.toggleHeight;\r\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\r\n    return css`\r\n      display: inline-flex;\r\n      cursor: pointer;\r\n\r\n      &:hover:not(${disabled}) {\r\n        ${cssName(styles.handle(t))} {\r\n          background: ${t.toggleBgHover};\r\n        }\r\n      }\r\n      &:active:not(${disabled}) ${cssName(styles.handle(t))} {\r\n        width: ${handleActiveWidth};\r\n      }\r\n      &:active:not(${disabled}) ${cssName(styles.input(t))}:checked ~ ${cssName(styles.handle(t))} {\r\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\r\n          translateX(-${t.toggleHandleActiveWidthIncrement});\r\n      }\r\n    `;\r\n  },\r\n\r\n  handle(t: Theme) {\r\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\r\n    return css`\r\n      background: ${t.toggleBg};\r\n      border-radius: ${t.toggleHandleBorderRadius};\r\n      bottom: ${t.toggleBorderWidth};\r\n      box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\r\n      height: ${handleSize};\r\n      left: ${t.toggleBorderWidth};\r\n      position: absolute;\r\n      top: ${t.toggleBorderWidth};\r\n      transition: 0.2s ease-in;\r\n      width: ${handleSize};\r\n    `;\r\n  },\r\n\r\n  input(t: Theme) {\r\n    const handleWidthWithBorders = t.toggleHeight;\r\n    return css`\r\n      position: absolute;\r\n      opacity: 0;\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n      &:checked ~ ${cssName(styles.container(t))} {\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\r\n        background: ${t.toggleBgChecked};\r\n        transition: background 0s 0.2s;\r\n      }\r\n      &:checked ~ ${cssName(styles.container(t))} ${cssName(styles.activeBackground())} {\r\n        width: 70%;\r\n        background: ${t.toggleBgChecked};\r\n      }\r\n      &:checked ~ ${cssName(styles.handle(t))} {\r\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\r\n      }\r\n    `;\r\n  },\r\n\r\n  container(t: Theme) {\r\n    return css`\r\n      border-radius: ${t.toggleBorderRadius};\r\n      box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\r\n      height: 100%;\r\n      overflow: hidden;\r\n      position: absolute;\r\n      width: 100%;\r\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\r\n      z-index: 0;\r\n    `;\r\n  },\r\n\r\n  focused(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.container(t))}&, ${cssName(styles.input(t))}:checked ~ & {\r\n        box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\r\n      }\r\n    `;\r\n  },\r\n\r\n  activeBackground() {\r\n    return css`\r\n      background: inherit;\r\n      bottom: 0;\r\n      left: 0;\r\n      position: absolute;\r\n      top: 0;\r\n      transition: 0.2s ease-in;\r\n      width: 10px;\r\n    `;\r\n  },\r\n\r\n  isLoading(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.input(t))}:checked ~ ${cssName(styles.container(t))}& {\r\n        background: ${t.toggleBorderColor};\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\r\n      }\r\n      ${cssName(styles.activeBackground())} {\r\n        background: ${t.toggleBgActive};\r\n      }\r\n    `;\r\n  },\r\n\r\n  isWarning(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.input(t))}:checked ~ ${cssName(styles.container(t))}& {\r\n        background: ${t.toggleBgWarning};\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgWarning};\r\n\r\n        ${cssName(styles.activeBackground())} {\r\n          background: ${t.toggleBgWarning};\r\n        }\r\n      }\r\n    `;\r\n  },\r\n\r\n  isError(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.input(t))}:checked ~ ${cssName(styles.container(t))}& {\r\n        background: ${t.toggleBgError};\r\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgError};\r\n\r\n        ${cssName(styles.activeBackground())} {\r\n          background: ${t.toggleBgError};\r\n        }\r\n      }\r\n    `;\r\n  },\r\n\r\n  wrapper(t: Theme) {\r\n    return css`\r\n      display: inline-block;\r\n      height: ${t.toggleHeight};\r\n      position: relative;\r\n      width: ${t.toggleWidth};\r\n      flex: 1 0 ${t.toggleWidth};\r\n\r\n      &::after {\r\n        content: '';\r\n        display: inline-block;\r\n      }\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      opacity: 0.3;\r\n      cursor: default !important;\r\n\r\n      ${cssName(styles.container(t))} {\r\n        background: ${t.toggleBgDisabled};\r\n      }\r\n    `;\r\n  },\r\n\r\n  rootLeft() {\r\n    return css`\r\n      flex-direction: row-reverse;\r\n    `;\r\n  },\r\n\r\n  caption(t: Theme) {\r\n    return css`\r\n      padding: 0 0 0 ${t.toggleCaptionGap};\r\n    `;\r\n  },\r\n\r\n  captionLeft(t: Theme) {\r\n    return css`\r\n      padding: 0 ${t.toggleCaptionGap} 0 0;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Toggle.styles.ts"],"names":["globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","css","toggleBgHover","rootSmall","toggleFontSizeSmall","toggleHeightSmall","toggleWidthSmall","rootMedium","toggleFontSizeMedium","toggleHeightMedium","toggleWidthMedium","rootLarge","toggleFontSizeLarge","toggleHeightLarge","toggleWidthLarge","activeHandleSmall","toggleHandleSizeSmall","toggleBorderWidth","toggleHandleActiveWidthIncrement","activeHandleMedium","toggleHandleSizeMedium","activeHandleLarge","toggleHandleSizeLarge","disableAnimation","toggleHandleBg","toggleHandleBoxShadowOld","toggleHandleLeft","toggleHandleTop","handleSmall","toggleHandleBorderRadiusSmall","handleMedium","toggleHandleBorderRadiusMedium","handleLarge","toggleHandleBorderRadiusLarge","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleCheckedBg","toggleCheckedBgHover","inputSmall","inputMedium","inputLarge","input2022","toggleContainerBg","toggleContainerBoxShadow","toggleHandleBoxShadow","toggleContainerBgChecked","toggleContainerBoxShadowChecked","toggleHandleBgChecked","toggleHandleBoxShadowChecked","toggleContainerBgHover","toggleContainerBoxShadowHover","toggleHandleBgHover","toggleHandleBoxShadowHover","toggleContainerBgCheckedHover","toggleContainerBoxShadowCheckedHover","toggleHandleBgCheckedHover","toggleHandleBoxShadowCheckedHover","toggleContainerBgDisabled","toggleContainerBoxShadowDisabled","toggleHandleBgDisabled","toggleHandleBoxShadowDisabled","toggleContainerBgDisabledChecked","toggleContainerBoxShadowDisabledChecked","toggleHandleBgDisabledChecked","toggleHandleBoxShadowDisabledChecked","containerSmall","toggleBorderRadiusSmall","containerMedium","toggleBorderRadiusMedium","containerLarge","toggleBorderRadiusLarge","toggleBgDisabled","toggleBorderColorDisabled","focused","toggleOutlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","button","toggleBaseBg","toggleHeight","buttonSmall","labGrotesqueBaselineCompensation","toggleButtonOffsetY","buttonMedium","buttonLarge","buttonRight","rootLeft","caption","toggleTextColor","toggleCaptionGap","captionSmall","captionMedium","captionLarge","disabledCaption","textColorDisabled","captionLeft"],"mappings":"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","sourcesContent":["import { 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/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,17 +1,29 @@
-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 { 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;
+    /**
+     * Состояние валидации при ошибке.
+     */
     error?: boolean;
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
     disabled?: boolean;
+    /**
+     * Размер
+     */
+    size?: TokenSize;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onRemove?: React.MouseEventHandler<HTMLElement>;
@@ -20,9 +32,16 @@ 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;
+    static displayName: string;
     private theme;
+    private setRootNode;
+    private readonly locale;
     render(): JSX.Element;
     private renderMain;
     private onRemoveClick;

package/cjs/components/Token/Token.js

@@ -1,14 +1,22 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Token = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.TokenDataTids = exports.Token = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
+var _decorators = require("../../lib/locale/decorators");
 var _CrossIcon = require("../../internal/icons/CrossIcon");
 var _utils = require("../../lib/utils");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _CloseButtonIcon = require("../../internal/CloseButtonIcon/CloseButtonIcon");
 
-var _Token = require("./Token.styles");var
+var _reactGetTextContent = require("../../lib/reactGetTextContent");
+var _getVisualStateDataAttributes = require("../../internal/CommonWrapper/utils/getVisualStateDataAttributes");
 
+var _Token = require("./Token.styles");
+var _locale = require("./locale");
+var _TokenView = require("./TokenView");var _dec, _class, _class2, _temp;
 
 
 
@@ -32,10 +40,8 @@ var _Token = require("./Token.styles");var
 
 
 
-Token = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Token, _React$Component);function Token() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
-    theme = void 0;_this.
 
 
 
@@ -46,12 +52,24 @@ Token = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(T
 
 
 
+var getValidation = function getValidation(error, warning) {
+  if (error) {
+    return 'error';
+  } else if (warning) {
+    return 'warning';
+  }
 
+  return null;
+};
 
+var TokenDataTids = {
+  root: 'Token__root',
+  removeIcon: 'Token__removeIcon' };exports.TokenDataTids = TokenDataTids;var
 
 
 
 
+Token = (_dec = (0, _decorators.locale)('Token', _locale.TokenLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Token, _React$Component);function Token() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -106,8 +124,59 @@ Token = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(T
 
 
 
-    onRemoveClick = function (event) {var _this$props =
-      _this.props,disabled = _this$props.disabled,_this$props$onRemove = _this$props.onRemove,onRemove = _this$props$onRemove === void 0 ? _utils.emptyHandler : _this$props$onRemove;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    onRemoveClick = function (event) {
+      var _this$props = _this.props,disabled = _this$props.disabled,_this$props$onRemove = _this$props.onRemove,onRemove = _this$props$onRemove === void 0 ? _utils.emptyHandler : _this$props$onRemove;
 
       if (disabled) {
         event.preventDefault();
@@ -115,4 +184,4 @@ Token = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(T
       }
 
       onRemove(event);
-    };return _this;}var _proto = Token.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cn, _cn2;var _this$props2 = this.props,children = _this$props2.children,isActive = _this$props2.isActive,colors = _this$props2.colors,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,_this$props2$onClick = _this$props2.onClick,onClick = _this$props2$onClick === void 0 ? _utils.emptyHandler : _this$props2$onClick,_this$props2$onDouble = _this$props2.onDoubleClick,onDoubleClick = _this$props2$onDouble === void 0 ? _utils.emptyHandler : _this$props2$onDouble,_this$props2$onMouseE = _this$props2.onMouseEnter,onMouseEnter = _this$props2$onMouseE === void 0 ? _utils.emptyHandler : _this$props2$onMouseE,_this$props2$onMouseL = _this$props2.onMouseLeave,onMouseLeave = _this$props2$onMouseL === void 0 ? _utils.emptyHandler : _this$props2$onMouseL,_this$props2$onFocus = _this$props2.onFocus,onFocus = _this$props2$onFocus === void 0 ? _utils.emptyHandler : _this$props2$onFocus,_this$props2$onBlur = _this$props2.onBlur,onBlur = _this$props2$onBlur === void 0 ? _utils.emptyHandler : _this$props2$onBlur;var theme = this.theme;var validation = error ? 'error' : warning ? 'warning' : null;var disableClassNames = (0, _classnames.default)(_Token.jsTokenColors.defaultDisabled(theme), (_cn = {}, _cn[_Token.jsTokenColors.defaultDisabledWarning(theme)] = warning, _cn[_Token.jsTokenColors.defaultDisabledError(theme)] = error, _cn));var tokenClassName = disabled ? disableClassNames : _Token.jsTokenColors.defaultIdle(theme, validation);var activeTokenClassName = disabled ? disableClassNames : _Token.jsTokenColors.defaultActive(theme, validation);if (!disabled && colors) {tokenClassName = _Token.jsTokenColors[colors.idle](theme, validation);var activeClassName = colors.active ? colors.active : colors.idle;activeTokenClassName = _Token.jsTokenColors[activeClassName](theme, validation);}var tokenClassNames = (0, _classnames.default)(_Token.jsStyles.token(this.theme), tokenClassName, (_cn2 = {}, _cn2[activeTokenClassName] = !!isActive, _cn2[_Token.jsStyles.disabled(theme)] = !!disabled, _cn2));return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { className: tokenClassNames, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, /*#__PURE__*/_react.default.createElement("span", { className: _Token.jsStyles.text(this.theme) }, children), /*#__PURE__*/_react.default.createElement("span", { className: _Token.jsStyles.removeIcon(this.theme), onClick: this.onRemoveClick }, /*#__PURE__*/_react.default.createElement(_CrossIcon.CrossIcon, null))));};return Token;}(_react.default.Component);exports.Token = Token;Token.__KONTUR_REACT_UI__ = 'Token';
+    };return _this;}var _proto = Token.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this$props2 = this.props,size = _this$props2.size,children = _this$props2.children,isActive = _this$props2.isActive,_this$props2$colors = _this$props2.colors,colors = _this$props2$colors === void 0 ? { idle: 'defaultIdle', active: 'defaultActive' } : _this$props2$colors,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,ariaDescribedby = _this$props2['aria-describedby'],_this$props2$onClick = _this$props2.onClick,onClick = _this$props2$onClick === void 0 ? _utils.emptyHandler : _this$props2$onClick,_this$props2$onDouble = _this$props2.onDoubleClick,onDoubleClick = _this$props2$onDouble === void 0 ? _utils.emptyHandler : _this$props2$onDouble,_this$props2$onMouseE = _this$props2.onMouseEnter,onMouseEnter = _this$props2$onMouseE === void 0 ? _utils.emptyHandler : _this$props2$onMouseE,_this$props2$onMouseL = _this$props2.onMouseLeave,onMouseLeave = _this$props2$onMouseL === void 0 ? _utils.emptyHandler : _this$props2$onMouseL,_this$props2$onFocus = _this$props2.onFocus,onFocus = _this$props2$onFocus === void 0 ? _utils.emptyHandler : _this$props2$onFocus,_this$props2$onBlur = _this$props2.onBlur,onBlur = _this$props2$onBlur === void 0 ? _utils.emptyHandler : _this$props2$onBlur;var theme = this.theme;var validation = getValidation(error, warning);var removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + (0, _reactGetTextContent.reactGetTextContent)(children);var icon = (0, _ThemeHelpers.isTheme2022)(theme) ? /*#__PURE__*/_react.default.createElement(_CloseButtonIcon.CloseButtonIcon, { side: 16, color: "inherit", colorHover: "inherit", "aria-label": removeButtonAriaLabel, tabbable: false }) : /*#__PURE__*/_react.default.createElement(_CrossIcon.CrossIcon, null);var classNames = (0, _ThemeHelpers.isTheme2022)(theme) ? (0, _Emotion.cx)(_Token.styles.tokenDefaultIdle2022(theme), !isActive && !warning && !error && !disabled && _Token.styles.tokenDefaultIdleHovering2022(theme), isActive && _Token.styles.tokenDefaultActive2022(theme), warning && _Token.styles.tokenWarning2022(theme), error && _Token.styles.tokenError2022(theme), disabled && _Token.styles.tokenDisabled2022(theme)) : (0, _Emotion.cx)(_Token.colorStyles[colors.idle](theme, validation), !!isActive && _Token.colorStyles[colors.active || colors.idle](theme, validation), !!disabled && _Token.styles.disabled(theme), !!disabled && _Token.colorStyles.defaultDisabled(theme), !!disabled && warning && _Token.colorStyles.defaultDisabledWarning(theme), !!disabled && error && _Token.colorStyles.defaultDisabledError(theme));var textholder = /*#__PURE__*/_react.default.createElement("span", { className: _Token.styles.text(this.theme) }, children);var closeButton = /*#__PURE__*/_react.default.createElement("span", { role: (0, _ThemeHelpers.isTheme2022)(theme) ? undefined : 'button', "aria-label": (0, _ThemeHelpers.isTheme2022)(theme) ? undefined : removeButtonAriaLabel, onClick: this.onRemoveClick, "data-tid": TokenDataTids.removeIcon }, icon);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props, (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ disabled: disabled })), /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { className: classNames, size: size, closeButton: closeButton, "data-tid": TokenDataTids.root, "aria-describedby": ariaDescribedby, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, textholder));};return Token;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Token', _class2.displayName = 'Token', _temp)) || _class) || _class);exports.Token = Token;

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

@@ -1 +1 @@
-{"version":3,"sources":["Token.tsx"],"names":["Token","theme","onRemoveClick","event","props","disabled","onRemove","emptyHandler","preventDefault","render","renderMain","children","isActive","colors","error","warning","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","disableClassNames","jsTokenColors","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassName","defaultIdle","activeTokenClassName","defaultActive","idle","activeClassName","active","tokenClassNames","jsStyles","token","text","removeIcon","React","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\r\nimport { emptyHandler } from '../../lib/utils';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles, jsTokenColors } from './Token.styles';\r\n\r\nexport type TokenColorName = keyof typeof jsTokenColors;\r\n\r\nexport interface TokenColors {\r\n  idle: TokenColorName;\r\n  active?: TokenColorName;\r\n}\r\n\r\nexport interface TokenProps extends CommonProps {\r\n  colors?: TokenColors;\r\n  isActive?: boolean;\r\n  error?: boolean;\r\n  warning?: boolean;\r\n  disabled?: boolean;\r\n\r\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\r\n  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\r\n  onRemove?: React.MouseEventHandler<HTMLElement>;\r\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\r\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\r\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\r\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\r\n}\r\n\r\nexport class Token extends React.Component<TokenProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Token';\r\n\r\n  private theme!: Theme;\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const {\r\n      children,\r\n      isActive,\r\n      colors,\r\n      error,\r\n      warning,\r\n      disabled,\r\n      onClick = emptyHandler,\r\n      onDoubleClick = emptyHandler,\r\n      onMouseEnter = emptyHandler,\r\n      onMouseLeave = emptyHandler,\r\n      onFocus = emptyHandler,\r\n      onBlur = emptyHandler,\r\n    } = this.props;\r\n\r\n    const theme = this.theme;\r\n    const validation = error ? 'error' : warning ? 'warning' : null;\r\n    const disableClassNames = cn(jsTokenColors.defaultDisabled(theme), {\r\n      [jsTokenColors.defaultDisabledWarning(theme)]: warning,\r\n      [jsTokenColors.defaultDisabledError(theme)]: error,\r\n    });\r\n\r\n    let tokenClassName = disabled ? disableClassNames : jsTokenColors.defaultIdle(theme, validation);\r\n    let activeTokenClassName = disabled ? disableClassNames : jsTokenColors.defaultActive(theme, validation);\r\n\r\n    if (!disabled && colors) {\r\n      tokenClassName = jsTokenColors[colors.idle](theme, validation);\r\n\r\n      const activeClassName = colors.active ? colors.active : colors.idle;\r\n      activeTokenClassName = jsTokenColors[activeClassName](theme, validation);\r\n    }\r\n\r\n    const tokenClassNames = cn(jsStyles.token(this.theme), tokenClassName, {\r\n      [activeTokenClassName]: !!isActive,\r\n      [jsStyles.disabled(theme)]: !!disabled,\r\n    });\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div\r\n          className={tokenClassNames}\r\n          onClick={onClick}\r\n          onDoubleClick={onDoubleClick}\r\n          onMouseEnter={onMouseEnter}\r\n          onMouseLeave={onMouseLeave}\r\n          onFocus={onFocus}\r\n          onBlur={onBlur}\r\n        >\r\n          <span className={jsStyles.text(this.theme)}>{children}</span>\r\n          <span className={jsStyles.removeIcon(this.theme)} onClick={this.onRemoveClick}>\r\n            <CrossIcon />\r\n          </span>\r\n        </div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\r\n    const { disabled, onRemove = emptyHandler } = this.props;\r\n\r\n    if (disabled) {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n\r\n    onRemove(event);\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Token.tsx"],"names":["getValidation","error","warning","TokenDataTids","root","removeIcon","Token","TokenLocaleHelper","rootNode","onRemoveClick","event","props","disabled","onRemove","emptyHandler","preventDefault","render","theme","renderMain","size","children","isActive","colors","idle","active","ariaDescribedby","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","removeButtonAriaLabel","locale","icon","classNames","styles","tokenDefaultIdle2022","tokenDefaultIdleHovering2022","tokenDefaultActive2022","tokenWarning2022","tokenError2022","tokenDisabled2022","colorStyles","defaultDisabled","defaultDisabledWarning","defaultDisabledError","textholder","text","closeButton","undefined","setRootNode","React","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/cjs/components/Token/Token.md

@@ -1,112 +1,128 @@
-Token example
-
-```jsx harmony
-import { Token } from '@skbkontur/react-ui';
-
-<Token>Example</Token>;
-```
-
-You can control color of each token
-
-```jsx harmony
-import { Gapped, Token } from '@skbkontur/react-ui';
-
-const colors = {
-  default: {
-    idle: 'defaultIdle',
-    active: 'defaultActive',
-  },
-  gray: {
-    idle: 'grayIdle',
-    active: 'grayActive',
-  },
-  blue: {
-    idle: 'blueIdle',
-    active: 'blueActive',
-  },
-  green: {
-    idle: 'greenIdle',
-    active: 'greenActive',
-  },
-  yellow: {
-    idle: 'yellowIdle',
-    active: 'yellowActive',
-  },
-  red: {
-    idle: 'redIdle',
-    active: 'redActive',
-  },
-  mono: {
-    idle: 'white',
-    active: 'black',
-  },
-};
-
-<Gapped gap={20} vertical>
-  <Gapped gap={10}>
-    <Token colors={colors.default}>Default</Token>
-    <Token isActive colors={colors.default}>
-      Default
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.gray}>Gray</Token>
-    <Token isActive colors={colors.gray}>
-      Gray
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.blue}>Blue</Token>
-    <Token isActive colors={colors.blue}>
-      Blue
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.green}>Green</Token>
-    <Token isActive colors={colors.green}>
-      Green
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.yellow}>Yellow</Token>
-    <Token isActive colors={colors.yellow}>
-      Yellow
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.red}>Red</Token>
-    <Token isActive colors={colors.red}>
-      Red
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.mono}>Monochrome</Token>
-    <Token isActive colors={colors.mono}>
-      Monochrome
-    </Token>
-  </Gapped>
-</Gapped>;
-```
-
-Can accept validation state
-
-```jsx harmony
-import { Gapped, Token } from '@skbkontur/react-ui';
-
-<Gapped gap={20} vertical>
-  <Gapped gap={10}>
-    <Token>Correct</Token>
-    <Token warning>Warned</Token>
-    <Token error>Errored</Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token isActive>Correct</Token>
-    <Token isActive warning>
-      Warned
-    </Token>
-    <Token isActive error>
-      Errored
-    </Token>
-  </Gapped>
-</Gapped>;
-```
+Token example
+
+```jsx harmony
+import { Token } from '@skbkontur/react-ui';
+
+<Token>Example</Token>;
+```
+
+You can control color of each token
+
+```jsx harmony
+import { Gapped, Token } from '@skbkontur/react-ui';
+
+const colors = {
+  default: {
+    idle: 'defaultIdle',
+    active: 'defaultActive',
+  },
+  gray: {
+    idle: 'grayIdle',
+    active: 'grayActive',
+  },
+  blue: {
+    idle: 'blueIdle',
+    active: 'blueActive',
+  },
+  green: {
+    idle: 'greenIdle',
+    active: 'greenActive',
+  },
+  yellow: {
+    idle: 'yellowIdle',
+    active: 'yellowActive',
+  },
+  red: {
+    idle: 'redIdle',
+    active: 'redActive',
+  },
+  mono: {
+    idle: 'white',
+    active: 'black',
+  },
+};
+
+<Gapped gap={20} vertical>
+  <Gapped gap={10}>
+    <Token colors={colors.default}>Default</Token>
+    <Token isActive colors={colors.default}>
+      Default
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.gray}>Gray</Token>
+    <Token isActive colors={colors.gray}>
+      Gray
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.blue}>Blue</Token>
+    <Token isActive colors={colors.blue}>
+      Blue
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.green}>Green</Token>
+    <Token isActive colors={colors.green}>
+      Green
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.yellow}>Yellow</Token>
+    <Token isActive colors={colors.yellow}>
+      Yellow
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.red}>Red</Token>
+    <Token isActive colors={colors.red}>
+      Red
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.mono}>Monochrome</Token>
+    <Token isActive colors={colors.mono}>
+      Monochrome
+    </Token>
+  </Gapped>
+</Gapped>;
+```
+
+Can accept validation state
+
+```jsx harmony
+import { Gapped, Token } from '@skbkontur/react-ui';
+
+<Gapped gap={20} vertical>
+  <Gapped gap={10}>
+    <Token>Correct</Token>
+    <Token warning>Warned</Token>
+    <Token error>Errored</Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token isActive>Correct</Token>
+    <Token isActive warning>
+      Warned
+    </Token>
+    <Token isActive error>
+      Errored
+    </Token>
+  </Gapped>
+</Gapped>;
+```
+
+У Token есть 3 стандартных размера.
+
+```jsx harmony
+<Gapped vertical>
+  <Token size="small">
+    Маленький
+  </Token>
+  <Token size="medium">
+    Средний
+  </Token>
+  <Token size="large">
+    Большой
+  </Token>
+</Gapped>
+```

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

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

package/cjs/components/Token/Token.mixins.js

@@ -0,0 +1,17 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.tokenSizeMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+
+var tokenSizeMixin = function tokenSizeMixin(
+tokenPaddingY,
+tokenPaddingX,
+lineHeight,
+fontSize,
+tokenMarginY,
+tokenMarginX)
+{
+  return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    padding: ", " ", ";\n    margin: ", " ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "])),
+  tokenPaddingY, tokenPaddingX,
+  tokenMarginY, tokenMarginX,
+  lineHeight,
+  fontSize);
+
+};exports.tokenSizeMixin = tokenSizeMixin;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Token.mixins.ts"],"names":["tokenSizeMixin","tokenPaddingY","tokenPaddingX","lineHeight","fontSize","tokenMarginY","tokenMarginX","css"],"mappings":"4RAAA,oD;;AAEO,IAAMA,cAAc,GAAG,SAAjBA,cAAiB;AAC5BC,aAD4B;AAE5BC,aAF4B;AAG5BC,UAH4B;AAI5BC,QAJ4B;AAK5BC,YAL4B;AAM5BC,YAN4B;AAOzB;AACH,aAAOC,YAAP;AACaN,EAAAA,aADb,EAC8BC,aAD9B;AAEYG,EAAAA,YAFZ,EAE4BC,YAF5B;AAGiBH,EAAAA,UAHjB;AAIeC,EAAAA,QAJf;;AAMD,CAdM,C","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"]}