@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

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

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

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

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
-import { colorStyles } from './Token.styles';
-export declare type TokenColorName = keyof typeof colorStyles;
+import { SizeProp } from '../../lib/types/props';
+import { getColorStyles } from './Token.styles';
+export declare type TokenColorName = keyof ReturnType<typeof getColorStyles>;
 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;
     /**
@@ -18,6 +20,10 @@ export interface TokenProps extends CommonProps {
      */
     warning?: boolean;
     disabled?: boolean;
+    /**
+     * Размер
+     */
+    size?: TokenSize;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onRemove?: React.MouseEventHandler<HTMLElement>;
@@ -28,11 +34,15 @@ export interface TokenProps extends CommonProps {
 }
 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 emotion;
     private setRootNode;
+    private readonly locale;
     render(): JSX.Element;
     private renderMain;
     private onRemoveClick;

package/cjs/components/Token/Token.js

@@ -1,14 +1,27 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");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"));
+"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 _reactGetTextContent = require("../../lib/reactGetTextContent");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _Token = require("./Token.styles");
+var _locale = require("./locale");
+var _TokenView = require("./TokenView");var _dec, _class, _class2, _temp;
+
+
+
+
 
-var _Token = require("./Token.styles");var _class, _class2, _temp;
 
 
 
@@ -50,11 +63,51 @@ var getValidation = function getValidation(error, warning) {
 };
 
 var TokenDataTids = {
-  root: 'Token__root' };exports.TokenDataTids = TokenDataTids;var
+  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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
-Token = (0, _rootNode.rootNode)(_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.
 
 
 
@@ -141,4 +194,4 @@ Token = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
       }
 
       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 _cx, _cx2;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 = getValidation(error, warning);var disableClassNames = (0, _Emotion.cx)(_Token.colorStyles.defaultDisabled(theme), (_cx = {}, _cx[_Token.colorStyles.defaultDisabledWarning(theme)] = warning, _cx[_Token.colorStyles.defaultDisabledError(theme)] = error, _cx));var tokenClassName = disabled ? disableClassNames : _Token.colorStyles.defaultIdle(theme, validation);var activeTokenClassName = disabled ? disableClassNames : _Token.colorStyles.defaultActive(theme, validation);if (!disabled && colors) {tokenClassName = _Token.colorStyles[colors.idle](theme, validation);var activeClassName = colors.active ? colors.active : colors.idle;activeTokenClassName = _Token.colorStyles[activeClassName](theme, validation);}var tokenClassNames = (0, _Emotion.cx)(_Token.styles.token(this.theme), tokenClassName, (_cx2 = {}, _cx2[activeTokenClassName] = !!isActive, _cx2[_Token.styles.disabled(theme)] = !!disabled, _cx2));return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TokenDataTids.root, className: tokenClassNames, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, /*#__PURE__*/_react.default.createElement("span", { className: _Token.styles.text(this.theme) }, children), /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Token.styles.removeIcon(this.theme), _Token.globalClasses.removeIcon), onClick: this.onRemoveClick }, /*#__PURE__*/_react.default.createElement(_CrossIcon.CrossIcon, null))));};return Token;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Token', _temp)) || _class;exports.Token = Token;
+    };return _this;}var _proto = Token.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeConsumer, 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 styles = (0, _Token.getStyles)(this.emotion);var colorStyles = (0, _Token.getColorStyles)(this.emotion);var classNames = (0, _ThemeHelpers.isTheme2022)(theme) ? this.emotion.cx(styles.tokenDefaultIdle2022(theme), !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme), isActive && styles.tokenDefaultActive2022(theme), warning && styles.tokenWarning2022(theme), error && styles.tokenError2022(theme), disabled && styles.tokenDisabled2022(theme)) : this.emotion.cx(colorStyles[colors.idle](theme, validation), !!isActive && colorStyles[colors.active || colors.idle](theme, validation), !!disabled && styles.disabled(theme), !!disabled && colorStyles.defaultDisabled(theme), !!disabled && warning && colorStyles.defaultDisabledWarning(theme), !!disabled && error && colorStyles.defaultDisabledError(theme));var textholder = /*#__PURE__*/_react.default.createElement("span", { className: 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), /*#__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":["getValidation","error","warning","TokenDataTids","root","Token","rootNode","onRemoveClick","event","props","disabled","onRemove","emptyHandler","preventDefault","render","theme","renderMain","children","isActive","colors","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","disableClassNames","colorStyles","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassName","defaultIdle","activeTokenClassName","defaultActive","idle","activeClassName","active","tokenClassNames","styles","token","setRootNode","text","removeIcon","globalClasses","React","Component","__KONTUR_REACT_UI__"],"mappings":"2VAAA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,uC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA6BC,OAA7B,EAAgE;AACpF,MAAID,KAAJ,EAAW;AACT,WAAO,OAAP;AACD,GAFD,MAEO,IAAIC,OAAJ,EAAa;AAClB,WAAO,SAAP;AACD;;AAED,SAAO,IAAP;AACD,CARD;;AAUO,IAAMC,aAAa,GAAG;AAC3BC,EAAAA,IAAI,EAAE,aADqB,EAAtB,C;;;;AAKMC,K,OADZC,kB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+ESC,IAAAA,a,GAAgB,UAACC,KAAD,EAAsD;AAC5E,wBAA8C,MAAKC,KAAnD,CAAQC,QAAR,eAAQA,QAAR,oCAAkBC,QAAlB,CAAkBA,QAAlB,qCAA6BC,mBAA7B;;AAEA,UAAIF,QAAJ,EAAc;AACZF,QAAAA,KAAK,CAACK,cAAN;AACA;AACD;;AAEDF,MAAAA,QAAQ,CAACH,KAAD,CAAR;AACD,K,mDAjFMM,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,eACnB,mBAaI,KAAKP,KAbT,CACEQ,QADF,gBACEA,QADF,CAEEC,QAFF,gBAEEA,QAFF,CAGEC,MAHF,gBAGEA,MAHF,CAIElB,KAJF,gBAIEA,KAJF,CAKEC,OALF,gBAKEA,OALF,CAMEQ,QANF,gBAMEA,QANF,qCAOEU,OAPF,CAOEA,OAPF,qCAOYR,mBAPZ,6DAQES,aARF,CAQEA,aARF,sCAQkBT,mBARlB,8DASEU,YATF,CASEA,YATF,sCASiBV,mBATjB,8DAUEW,YAVF,CAUEA,YAVF,sCAUiBX,mBAVjB,6DAWEY,OAXF,CAWEA,OAXF,qCAWYZ,mBAXZ,2DAYEa,MAZF,CAYEA,MAZF,oCAYWb,mBAZX,uBAeA,IAAMG,KAAK,GAAG,KAAKA,KAAnB,CAEA,IAAMW,UAAU,GAAG1B,aAAa,CAACC,KAAD,EAAQC,OAAR,CAAhC,CAEA,IAAMyB,iBAAiB,GAAG,iBAAGC,mBAAYC,eAAZ,CAA4Bd,KAA5B,CAAH,iBACvBa,mBAAYE,sBAAZ,CAAmCf,KAAnC,CADuB,IACqBb,OADrB,MAEvB0B,mBAAYG,oBAAZ,CAAiChB,KAAjC,CAFuB,IAEmBd,KAFnB,OAA1B,CAKA,IAAI+B,cAAc,GAAGtB,QAAQ,GAAGiB,iBAAH,GAAuBC,mBAAYK,WAAZ,CAAwBlB,KAAxB,EAA+BW,UAA/B,CAApD,CACA,IAAIQ,oBAAoB,GAAGxB,QAAQ,GAAGiB,iBAAH,GAAuBC,mBAAYO,aAAZ,CAA0BpB,KAA1B,EAAiCW,UAAjC,CAA1D,CAEA,IAAI,CAAChB,QAAD,IAAaS,MAAjB,EAAyB,CACvBa,cAAc,GAAGJ,mBAAYT,MAAM,CAACiB,IAAnB,EAAyBrB,KAAzB,EAAgCW,UAAhC,CAAjB,CAEA,IAAMW,eAAe,GAAGlB,MAAM,CAACmB,MAAP,GAAgBnB,MAAM,CAACmB,MAAvB,GAAgCnB,MAAM,CAACiB,IAA/D,CACAF,oBAAoB,GAAGN,mBAAYS,eAAZ,EAA6BtB,KAA7B,EAAoCW,UAApC,CAAvB,CACD,CAED,IAAMa,eAAe,GAAG,iBAAGC,cAAOC,KAAP,CAAa,KAAK1B,KAAlB,CAAH,EAA6BiB,cAA7B,mBACrBE,oBADqB,IACE,CAAC,CAAChB,QADJ,OAErBsB,cAAO9B,QAAP,CAAgBK,KAAhB,CAFqB,IAEI,CAAC,CAACL,QAFN,QAAxB,CAKA,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKgC,WAAjC,IAAkD,KAAKjC,KAAvD,gBACE,sCACE,YAAUN,aAAa,CAACC,IAD1B,EAEE,SAAS,EAAEmC,eAFb,EAGE,OAAO,EAAEnB,OAHX,EAIE,aAAa,EAAEC,aAJjB,EAKE,YAAY,EAAEC,YALhB,EAME,YAAY,EAAEC,YANhB,EAOE,OAAO,EAAEC,OAPX,EAQE,MAAM,EAAEC,MARV,iBAUE,uCAAM,SAAS,EAAEe,cAAOG,IAAP,CAAY,KAAK5B,KAAjB,CAAjB,IAA2CE,QAA3C,CAVF,eAWE,uCAAM,SAAS,EAAE,iBAAGuB,cAAOI,UAAP,CAAkB,KAAK7B,KAAvB,CAAH,EAAkC8B,qBAAcD,UAAhD,CAAjB,EAA8E,OAAO,EAAE,KAAKrC,aAA5F,iBACE,6BAAC,oBAAD,OADF,CAXF,CADF,CADF,CAmBD,C,gBA5EwBuC,eAAMC,S,WACjBC,mB,GAAsB,O","sourcesContent":["import React from 'react';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles, colorStyles, globalClasses } from './Token.styles';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n  idle: TokenColorName;\n  active?: TokenColorName;\n}\n\nexport interface TokenProps extends CommonProps {\n  colors?: TokenColors;\n  isActive?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n  disabled?: boolean;\n\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n  onRemove?: React.MouseEventHandler<HTMLElement>;\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\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} 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,\n      error,\n      warning,\n      disabled,\n      onClick = emptyHandler,\n      onDoubleClick = emptyHandler,\n      onMouseEnter = emptyHandler,\n      onMouseLeave = emptyHandler,\n      onFocus = emptyHandler,\n      onBlur = emptyHandler,\n    } = this.props;\n\n    const theme = this.theme;\n\n    const validation = getValidation(error, warning);\n\n    const disableClassNames = cx(colorStyles.defaultDisabled(theme), {\n      [colorStyles.defaultDisabledWarning(theme)]: warning,\n      [colorStyles.defaultDisabledError(theme)]: error,\n    });\n\n    let tokenClassName = disabled ? disableClassNames : colorStyles.defaultIdle(theme, validation);\n    let activeTokenClassName = disabled ? disableClassNames : colorStyles.defaultActive(theme, validation);\n\n    if (!disabled && colors) {\n      tokenClassName = colorStyles[colors.idle](theme, validation);\n\n      const activeClassName = colors.active ? colors.active : colors.idle;\n      activeTokenClassName = colorStyles[activeClassName](theme, validation);\n    }\n\n    const tokenClassNames = cx(styles.token(this.theme), tokenClassName, {\n      [activeTokenClassName]: !!isActive,\n      [styles.disabled(theme)]: !!disabled,\n    });\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={TokenDataTids.root}\n          className={tokenClassNames}\n          onClick={onClick}\n          onDoubleClick={onDoubleClick}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onFocus={onFocus}\n          onBlur={onBlur}\n        >\n          <span className={styles.text(this.theme)}>{children}</span>\n          <span className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)} onClick={this.onRemoveClick}>\n            <CrossIcon />\n          </span>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n    const { disabled, onRemove = emptyHandler } = this.props;\n\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onRemove(event);\n  };\n}\n"]}
+{"version":3,"sources":["Token.tsx"],"names":["getValidation","error","warning","TokenDataTids","root","removeIcon","Token","TokenLocaleHelper","rootNode","onRemoveClick","event","props","disabled","onRemove","emptyHandler","preventDefault","render","emotion","theme","renderMain","size","children","isActive","colors","idle","active","ariaDescribedby","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","removeButtonAriaLabel","locale","icon","styles","colorStyles","classNames","cx","tokenDefaultIdle2022","tokenDefaultIdleHovering2022","tokenDefaultActive2022","tokenWarning2022","tokenError2022","tokenDisabled2022","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';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler } from '../../lib/utils';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } 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 { ThemeConsumer } from '../../lib/theming/ThemeContext';\n\nimport { getColorStyles, getStyles } from './Token.styles';\nimport { TokenLocale, TokenLocaleHelper } from './locale';\nimport { TokenView } from './TokenView';\n\nexport type TokenColorName = keyof ReturnType<typeof getColorStyles>;\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 emotion!: Emotion;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: TokenLocale;\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeConsumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeConsumer>\n          );\n        }}\n      </EmotionConsumer>\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 styles = getStyles(this.emotion);\n    const colorStyles = getColorStyles(this.emotion);\n    const classNames = isTheme2022(theme)\n      ? this.emotion.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      : this.emotion.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}>\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

@@ -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/cjs/components/Token/Token.mixins.d.ts

@@ -0,0 +1,2 @@
+import type { Emotion } from '@emotion/css/create-instance';
+export declare const tokenSizeMixin: (emotion: Emotion) => (tokenPaddingY: string, tokenPaddingX: string, lineHeight: string, fontSize: string, tokenMarginY: string, tokenMarginX: string) => string;

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

@@ -0,0 +1,19 @@
+"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 _templateObject;
+
+var tokenSizeMixin =
+function tokenSizeMixin(emotion) {return (
+    function (
+    tokenPaddingY,
+    tokenPaddingX,
+    lineHeight,
+    fontSize,
+    tokenMarginY,
+    tokenMarginX)
+    {
+      return 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","emotion","tokenPaddingY","tokenPaddingX","lineHeight","fontSize","tokenMarginY","tokenMarginX","css"],"mappings":";;AAEO,IAAMA,cAAc;AACzB,SADWA,cACX,CAACC,OAAD;AACA;AACEC,IAAAA,aADF;AAEEC,IAAAA,aAFF;AAGEC,IAAAA,UAHF;AAIEC,IAAAA,QAJF;AAKEC,IAAAA,YALF;AAMEC,IAAAA,YANF;AAOK;AACH,aAAON,OAAO,CAACO,GAAf;AACWN,MAAAA,aADX,EAC4BC,aAD5B;AAEUG,MAAAA,YAFV,EAE0BC,YAF1B;AAGeH,MAAAA,UAHf;AAIaC,MAAAA,QAJb;;AAMD,KAfD,GADK,C","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nexport const tokenSizeMixin =\n  (emotion: Emotion) =>\n  (\n    tokenPaddingY: string,\n    tokenPaddingX: string,\n    lineHeight: string,\n    fontSize: string,\n    tokenMarginY: string,\n    tokenMarginX: string,\n  ) => {\n    return emotion.css`\n    padding: ${tokenPaddingY} ${tokenPaddingX};\n    margin: ${tokenMarginY} ${tokenMarginX};\n    line-height: ${lineHeight};\n    font-size: ${fontSize};\n  `;\n  };\n"]}

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

@@ -1,14 +1,30 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     removeIcon: string;
 };
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     token(t: Theme): string;
+    tokenSmall(t: Theme): string;
+    tokenMedium(t: Theme): string;
+    tokenLarge(t: Theme): string;
+    token2022(t: Theme): string;
+    tokenDefaultIdle2022(t: Theme): string;
+    tokenDefaultIdleHovering2022(t: Theme): string;
+    tokenDefaultActive2022(t: Theme): string;
+    tokenError2022(t: Theme): string;
+    tokenWarning2022(t: Theme): string;
+    tokenDisabled2022(t: Theme): string;
     disabled(t: Theme): string;
     text(t: Theme): string;
     removeIcon(t: Theme): string;
+    helperText(): string;
+    helperContainer(): string;
+    helperContainerSmall(t: Theme): string;
+    helperContainerMedium(t: Theme): string;
+    helperContainerLarge(t: Theme): string;
 };
-export declare const colorStyles: {
+export declare const getColorStyles: (emotion: Emotion) => {
     defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
     defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;
     defaultDisabled: (t: Theme) => string;