@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

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

@@ -1,26 +1,48 @@
-import React from 'react';
-import { jsTokenColors } from './Token.styles';
-export declare type TokenColorName = keyof typeof jsTokenColors;
+import React, { AriaAttributes } from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+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 {
+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>;
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     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 emotion;
+    private setRootNode;
+    private readonly locale;
     render(): JSX.Element;
     private renderMain;
     private onRemoveClick;

package/cjs/components/Token/Token.js

@@ -1,12 +1,99 @@
-"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 _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 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-var _Token = require("./Token.styles");var
 
 
 
@@ -30,10 +117,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.
 
 
 
@@ -100,8 +185,8 @@ 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();
@@ -109,4 +194,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 _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$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 _react.default.createElement("div", { className: tokenClassNames, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, _react.default.createElement("span", { className: _Token.jsStyles.text(this.theme) }, children), _react.default.createElement("span", { className: _Token.jsStyles.removeIcon(this.theme), onClick: this.onRemoveClick }, _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(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;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 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":["Token","theme","onRemoveClick","event","props","disabled","onRemove","emptyHandler","preventDefault","render","renderMain","children","isActive","colors","error","warning","onClick","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\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 {\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  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      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      <div\r\n        className={tokenClassNames}\r\n        onClick={onClick}\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    );\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","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 { ThemeContext } 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            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\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

@@ -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,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,25 +1,45 @@
-export declare const jsStyles: {
-    token(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    text(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    removeIcon(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    removeIcon: string;
 };
-export declare const jsTokenColors: {
-    defaultIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    defaultActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    defaultDisabled: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => string;
-    defaultDisabledWarning: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => string;
-    defaultDisabledError: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => string;
-    grayIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    grayActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    blueIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    blueActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    greenIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    greenActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    yellowIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    yellowActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    redIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    redActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    white: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    black: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
+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 getColorStyles: (emotion: Emotion) => {
+    defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    defaultDisabled: (t: Theme) => string;
+    defaultDisabledWarning: (t: Theme) => string;
+    defaultDisabledError: (t: Theme) => string;
+    grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    redActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    white: (t: Theme, v: 'error' | 'warning' | null) => string;
+    black: (t: Theme, v: 'error' | 'warning' | null) => string;
 };