@skbkontur/react-ui 0.0.0-8ea1692541 → 0.0.0-9216939ede

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

@@ -1 +1 @@
-{"version":3,"sources":["Token.styles.ts"],"names":["globalClasses","removeIcon","styles","token","t","css","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","disabled","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","getVStyle","tokenOutlineWidth","tokenBorderColorError","tokenBorderColorWarning","ColorFunctions","contrast","tokenBorderWidth","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\n\nexport const globalClasses = prefix('token')({\n  removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n  token(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      border-radius: ${t.tokenBorderRadius};\n      padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\n      line-height: ${t.tokenLineHeight};\n      font-size: ${t.tokenFontSize};\n      margin: ${t.tokenMarginY} ${t.tokenMarginX};\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  text(t: Theme) {\n    return css`\n      display: inline-block;\n      padding-bottom: ${t.tokenLegacyTextShift};\n    `;\n  },\n\n  removeIcon(t: Theme) {\n    return css`\n      height: ${t.tokenRemoveIconSize};\n      width: ${t.tokenRemoveIconSize};\n      flex-shrink: 0;\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\n      margin-left: ${t.tokenRemoveIconGap};\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n});\n\ninterface TokenColors {\n  defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultDisabled: (t: Theme) => string;\n  defaultDisabledWarning: (t: Theme) => string;\n  defaultDisabledError: (t: Theme) => string;\n  grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  white: (t: Theme, v: 'error' | 'warning' | null) => string;\n  black: (t: Theme, v: 'error' | 'warning' | null) => string;\n}\n\nexport const colorStyles = [\n  { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n  { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n  { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n  { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n  { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n  { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n  { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n  { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n  { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n  { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n  { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n  { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n  { name: 'white', color: (t: Theme) => t.tokenWhite },\n  { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n  (colors: TokenColors, { name, color }) => ({\n    ...colors,\n    [name](t: Theme, v: 'error' | 'warning') {\n      const getVStyle = () => {\n        if (v === 'error') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n          `;\n        } else if (v === 'warning') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\n          `;\n        }\n\n        return '';\n      };\n\n      return css`\n        background-color: ${color(t)};\n        color: ${ColorFunctions.contrast(color(t))};\n        box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\n\n        ${getVStyle()}\n\n        .${globalClasses.removeIcon}:hover {\n          color: ${ColorFunctions.contrast(color(t))};\n        }\n      `;\n    },\n  }),\n  {\n    defaultDisabled(t: Theme) {\n      return css`\n        background-color: ${t.tokenDisabledBg};\n        box-shadow: ${t.tokenShadowDisabled};\n      `;\n    },\n    defaultDisabledWarning(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n    defaultDisabledError(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n  } as TokenColors,\n);\n"]}
+{"version":3,"sources":["Token.styles.ts"],"names":["globalClasses","removeIcon","styles","token","t","css","tokenBorderRadius","tokenSmall","tokenPaddingYSmall","tokenPaddingXSmall","tokenLineHeightSmall","tokenFontSizeSmall","tokenMarginYSmall","tokenMarginXSmall","tokenMedium","tokenPaddingYMedium","tokenPaddingXMedium","tokenLineHeightMedium","tokenFontSizeMedium","tokenMarginYMedium","tokenMarginXMedium","tokenLarge","tokenPaddingYLarge","tokenPaddingXLarge","tokenLineHeightLarge","tokenFontSizeLarge","tokenMarginYLarge","tokenMarginXLarge","token2022","tokenBorderWidth","tokenDefaultIdle2022","tokenDefaultIdleColor","tokenDefaultIdleBg","tokenDefaultIdleBorderColor","tokenDefaultIdleHovering2022","tokenDefaultIdleColorHover","tokenDefaultIdleBgHover","tokenDefaultIdleBorderColorHover","tokenDefaultActive2022","tokenDefaultActiveColor","tokenDefaultActiveBg","tokenDefaultActiveBorderColor","tokenError2022","tokenBorderColorError","tokenOutlineWidth","tokenWarning2022","tokenBorderColorWarning","tokenDisabled2022","tokenTextColorDisabled","tokenBorderColorDisabled","disabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","helperText","helperContainer","helperContainerSmall","tokenInputPaddingXSmall","helperContainerMedium","tokenInputPaddingXMedium","helperContainerLarge","tokenInputPaddingXLarge","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","getVStyle","ColorFunctions","contrast","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\n\nimport { tokenSizeMixin } from './Token.mixins';\n\nexport const globalClasses = prefix('token')({\n  removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n  token(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      border-radius: ${t.tokenBorderRadius};\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    `;\n  },\n\n  tokenSmall(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYSmall,\n        t.tokenPaddingXSmall,\n        t.tokenLineHeightSmall,\n        t.tokenFontSizeSmall,\n        t.tokenMarginYSmall,\n        t.tokenMarginXSmall,\n      )};\n    `;\n  },\n\n  tokenMedium(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYMedium,\n        t.tokenPaddingXMedium,\n        t.tokenLineHeightMedium,\n        t.tokenFontSizeMedium,\n        t.tokenMarginYMedium,\n        t.tokenMarginXMedium,\n      )};\n    `;\n  },\n\n  tokenLarge(t: Theme) {\n    return css`\n      ${tokenSizeMixin(\n        t.tokenPaddingYLarge,\n        t.tokenPaddingXLarge,\n        t.tokenLineHeightLarge,\n        t.tokenFontSizeLarge,\n        t.tokenMarginYLarge,\n        t.tokenMarginXLarge,\n      )};\n    `;\n  },\n\n  token2022(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} transparent;\n    `;\n  },\n\n  tokenDefaultIdle2022(t: Theme) {\n    return css`\n      color: ${t.tokenDefaultIdleColor};\n      background: ${t.tokenDefaultIdleBg};\n      border-color: ${t.tokenDefaultIdleBorderColor};\n      background-clip: border-box;\n    `;\n  },\n\n  tokenDefaultIdleHovering2022(t: Theme) {\n    return css`\n      &:hover {\n        color: ${t.tokenDefaultIdleColorHover};\n        background: ${t.tokenDefaultIdleBgHover};\n        border: solid ${t.tokenBorderWidth} ${t.tokenDefaultIdleBorderColorHover};\n      }\n    `;\n  },\n\n  tokenDefaultActive2022(t: Theme) {\n    return css`\n      color: ${t.tokenDefaultActiveColor};\n      background: ${t.tokenDefaultActiveBg};\n      border: solid ${t.tokenBorderWidth} ${t.tokenDefaultActiveBorderColor};\n    `;\n  },\n\n  tokenError2022(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorError};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError};\n    `;\n  },\n\n  tokenWarning2022(t: Theme) {\n    return css`\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorWarning};\n      box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning};\n    `;\n  },\n\n  tokenDisabled2022(t: Theme) {\n    return css`\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\n      border: solid 1px ${t.tokenBorderColorDisabled};\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      user-select: text;\n      cursor: text;\n      color: ${t.tokenTextColorDisabled};\n      pointer-events: none;\n\n      .${globalClasses.removeIcon} {\n        visibility: hidden;\n      }\n    `;\n  },\n\n  text(t: Theme) {\n    return css`\n      display: inline-block;\n      padding-bottom: ${t.tokenLegacyTextShift};\n    `;\n  },\n\n  removeIcon(t: Theme) {\n    return css`\n      height: ${t.tokenRemoveIconSize};\n      width: ${t.tokenRemoveIconSize};\n      flex-shrink: 0;\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\n      margin-left: ${t.tokenRemoveIconGap};\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n      display: inline-block;\n\n      &:hover {\n        opacity: 1;\n      }\n    `;\n  },\n\n  helperText() {\n    return css`\n      max-width: 100%;\n      word-break: break-all;\n\n      // don't collapse spaces\n      // so they get counted in width\n      white-space: pre-wrap;\n    `;\n  },\n  helperContainer() {\n    return css`\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    `;\n  },\n  helperContainerSmall(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXSmall};\n      right: ${t.tokenInputPaddingXSmall};\n    `;\n  },\n  helperContainerMedium(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXMedium};\n      right: ${t.tokenInputPaddingXMedium};\n    `;\n  },\n  helperContainerLarge(t: Theme) {\n    return css`\n      left: ${t.tokenInputPaddingXLarge};\n      right: ${t.tokenInputPaddingXLarge};\n    `;\n  },\n});\n\ninterface TokenColors {\n  defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  defaultDisabled: (t: Theme) => string;\n  defaultDisabledWarning: (t: Theme) => string;\n  defaultDisabledError: (t: Theme) => string;\n  grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\n  redActive: (t: Theme, v: 'error' | 'warning' | null) => string;\n  white: (t: Theme, v: 'error' | 'warning' | null) => string;\n  black: (t: Theme, v: 'error' | 'warning' | null) => string;\n}\n\nexport const colorStyles = [\n  { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n  { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n  { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n  { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n  { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n  { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n  { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n  { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n  { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n  { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n  { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n  { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n  { name: 'white', color: (t: Theme) => t.tokenWhite },\n  { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n  (colors: TokenColors, { name, color }) => ({\n    ...colors,\n    [name](t: Theme, v: 'error' | 'warning') {\n      const getVStyle = () => {\n        if (v === 'error') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n          `;\n        } else if (v === 'warning') {\n          return css`\n            box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\n          `;\n        }\n\n        return '';\n      };\n\n      return css`\n        background-color: ${color(t)};\n        color: ${ColorFunctions.contrast(color(t))};\n        box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\n\n        ${getVStyle()}\n\n        .${globalClasses.removeIcon}:hover {\n          color: ${ColorFunctions.contrast(color(t))};\n        }\n      `;\n    },\n  }),\n  {\n    defaultDisabled(t: Theme) {\n      return css`\n        background-color: ${t.tokenDisabledBg};\n        box-shadow: ${t.tokenShadowDisabled};\n      `;\n    },\n    defaultDisabledWarning(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n    defaultDisabledError(t: Theme) {\n      return css`\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n      `;\n    },\n  } as TokenColors,\n);\n"]}

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

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+import { TokenSize } from './Token';
+export interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: TokenSize;
+    closeButton?: ReactNode;
+}
+export declare function TokenView(props: TokenViewProps): JSX.Element;

package/cjs/components/Token/TokenView.js

@@ -0,0 +1,45 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TokenView = TokenView;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _Emotion = require("../../lib/theming/Emotion");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+
+
+var _Token = require("./Token.styles");var _excluded = ["size", "children", "closeButton", "className"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+
+
+
+
+
+
+function TokenView(props) {var _cx;
+  var _props$size = props.size,size = _props$size === void 0 ? 'small' : _props$size,children = props.children,closeButton = props.closeButton,className = props.className,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var getSizeClassName = function getSizeClassName(size) {
+    switch (size) {
+      case 'large':
+        return _Token.styles.tokenLarge(theme);
+      case 'medium':
+        return _Token.styles.tokenMedium(theme);
+      case 'small':
+      default:
+        return _Token.styles.tokenSmall(theme);}
+
+  };
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
+    _react.default.createElement("div", (0, _extends2.default)({},
+    rest, {
+      className: (0, _Emotion.cx)(getSizeClassName(size), (_cx = {}, _cx[
+      _Token.styles.token(theme)] = true, _cx[
+      _Token.styles.token2022(theme)] = (0, _ThemeHelpers.isTheme2022)(theme), _cx)) }),
+
+
+    children, /*#__PURE__*/
+    _react.default.createElement("span", { className: (0, _Emotion.cx)(_Token.styles.removeIcon(theme), _Token.globalClasses.removeIcon) }, closeButton))));
+
+
+
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TokenView.tsx"],"names":["TokenView","props","size","children","closeButton","className","rest","theme","ThemeContext","getSizeClassName","styles","tokenLarge","tokenMedium","tokenSmall","token","token2022","removeIcon","globalClasses"],"mappings":"wWAAA;;AAEA;AACA;AACA;AACA;;;AAGA,uC;;;;;;;AAOO,SAASA,SAAT,CAAmBC,KAAnB,EAA0C;AAC/C,oBAAsEA,KAAtE,CAAQC,IAAR,CAAQA,IAAR,4BAAe,OAAf,eAAwBC,QAAxB,GAAsEF,KAAtE,CAAwBE,QAAxB,CAAkCC,WAAlC,GAAsEH,KAAtE,CAAkCG,WAAlC,CAA+CC,SAA/C,GAAsEJ,KAAtE,CAA+CI,SAA/C,CAA6DC,IAA7D,+CAAsEL,KAAtE;AACA,MAAMM,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACP,IAAD,EAAqB;AAC5C,YAAQA,IAAR;AACE,WAAK,OAAL;AACE,eAAOQ,cAAOC,UAAP,CAAkBJ,KAAlB,CAAP;AACF,WAAK,QAAL;AACE,eAAOG,cAAOE,WAAP,CAAmBL,KAAnB,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOG,cAAOG,UAAP,CAAkBN,KAAlB,CAAP,CAPJ;;AASD,GAVD;;AAYA;AACE,iCAAC,4BAAD,EAAmBN,KAAnB;AACE;AACMK,IAAAA,IADN;AAEE,MAAA,SAAS,EAAE,iBAAGG,gBAAgB,CAACP,IAAD,CAAnB;AACRQ,oBAAOI,KAAP,CAAaP,KAAb,CADQ,IACc,IADd;AAERG,oBAAOK,SAAP,CAAiBR,KAAjB,CAFQ,IAEkB,+BAAYA,KAAZ,CAFlB,OAFb;;;AAOGJ,IAAAA,QAPH;AAQE,2CAAM,SAAS,EAAE,iBAAGO,cAAOM,UAAP,CAAkBT,KAAlB,CAAH,EAA6BU,qBAAcD,UAA3C,CAAjB,IAA0EZ,WAA1E,CARF,CADF,CADF;;;;AAcD","sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { TokenSize } from './Token';\nimport { globalClasses, styles } from './Token.styles';\n\nexport interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: TokenSize;\n  closeButton?: ReactNode;\n}\n\nexport function TokenView(props: TokenViewProps) {\n  const { size = 'small', children, closeButton, className, ...rest } = props;\n  const theme = useContext(ThemeContext);\n  const getSizeClassName = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return styles.tokenLarge(theme);\n      case 'medium':\n        return styles.tokenMedium(theme);\n      case 'small':\n      default:\n        return styles.tokenSmall(theme);\n    }\n  };\n\n  return (\n    <CommonWrapper {...props}>\n      <div\n        {...rest}\n        className={cx(getSizeClassName(size), {\n          [styles.token(theme)]: true,\n          [styles.token2022(theme)]: isTheme2022(theme),\n        })}\n      >\n        {children}\n        <span className={cx(styles.removeIcon(theme), globalClasses.removeIcon)}>{closeButton}</span>\n      </div>\n    </CommonWrapper>\n  );\n}\n"]}

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

@@ -0,0 +1,4 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import { TokenLocale } from './types';
+export * from './types';
+export declare const TokenLocaleHelper: LocaleHelper<TokenLocale>;

package/cjs/components/Token/locale/index.js

@@ -0,0 +1,11 @@
+"use strict";exports.__esModule = true;var _exportNames = { TokenLocaleHelper: true };exports.TokenLocaleHelper = void 0;var _LocaleHelper = require("../../../lib/locale/LocaleHelper");
+
+var _en = require("./locales/en");
+var _ru = require("./locales/ru");
+
+
+var _types = require("./types");Object.keys(_types).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _types[key]) return;exports[key] = _types[key];});
+
+var TokenLocaleHelper = new _LocaleHelper.LocaleHelper({
+  ru_RU: _ru.componentsLocales,
+  en_GB: _en.componentsLocales });exports.TokenLocaleHelper = TokenLocaleHelper;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["TokenLocaleHelper","LocaleHelper","ru_RU","en_GB"],"mappings":"yHAAA;;AAEA;AACA;;;AAGA;;AAEO,IAAMA,iBAAiB,GAAG,IAAIC,0BAAJ,CAA8B;AAC7DC,EAAAA,KAAK,EAALA,qBAD6D;AAE7DC,EAAAA,KAAK,EAALA,qBAF6D,EAA9B,CAA1B,C","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { TokenLocale } from './types';\n\nexport * from './types';\n\nexport const TokenLocaleHelper = new LocaleHelper<TokenLocale>({\n  ru_RU,\n  en_GB,\n});\n"]}

package/cjs/components/Token/locale/locales/en.d.ts

@@ -0,0 +1,2 @@
+import { TokenLocale } from '../types';
+export declare const componentsLocales: TokenLocale;

package/cjs/components/Token/locale/locales/en.js

@@ -0,0 +1,4 @@
+"use strict";exports.__esModule = true;exports.componentsLocales = void 0;
+
+var componentsLocales = {
+  removeButtonAriaLabel: 'Remove token' };exports.componentsLocales = componentsLocales;

package/cjs/components/Token/locale/locales/en.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","removeButtonAriaLabel"],"mappings":";;AAEO,IAAMA,iBAA8B,GAAG;AAC5CC,EAAAA,qBAAqB,EAAE,cADqB,EAAvC,C","sourcesContent":["import { TokenLocale } from '../types';\n\nexport const componentsLocales: TokenLocale = {\n  removeButtonAriaLabel: 'Remove token',\n};\n"]}

package/cjs/components/Token/locale/locales/ru.d.ts

@@ -0,0 +1,2 @@
+import { TokenLocale } from '../types';
+export declare const componentsLocales: TokenLocale;

package/cjs/components/Token/locale/locales/ru.js

@@ -0,0 +1,4 @@
+"use strict";exports.__esModule = true;exports.componentsLocales = void 0;
+
+var componentsLocales = {
+  removeButtonAriaLabel: 'Удалить токен' };exports.componentsLocales = componentsLocales;

package/cjs/components/Token/locale/locales/ru.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","removeButtonAriaLabel"],"mappings":";;AAEO,IAAMA,iBAA8B,GAAG;AAC5CC,EAAAA,qBAAqB,EAAE,eADqB,EAAvC,C","sourcesContent":["import { TokenLocale } from '../types';\n\nexport const componentsLocales: TokenLocale = {\n  removeButtonAriaLabel: 'Удалить токен',\n};\n"]}

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

@@ -0,0 +1,3 @@
+export interface TokenLocale {
+    removeButtonAriaLabel: string;
+}

package/cjs/components/Token/locale/types.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/cjs/components/TokenInput/TextWidthHelper.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Theme } from '../../lib/theming/Theme';
+import { TokenSize } from '../Token';
 export interface TextWidthHelperProps {
     text?: string;
-    classHelp: string;
     theme: Theme;
+    size: TokenSize;
 }
 /**
  * Херпер позволяет вычислить размеры блока с текстом
@@ -11,6 +12,7 @@ export interface TextWidthHelperProps {
  */
 export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
     private element;
+    private getSizeClassName;
     render(): JSX.Element;
     getTextWidth(): number;
     getTextHeight(): number;

package/cjs/components/TokenInput/TextWidthHelper.js

@@ -1,9 +1,11 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TextWidthHelper = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
+var _Emotion = require("../../lib/theming/Emotion");
 
 var _getDOMRect = require("../../lib/dom/getDOMRect");
+var _TokenView = require("../Token/TokenView");
 
-var _TokenInput = require("./TokenInput.styles");
+var _Token = require("../Token/Token.styles");
 
 // a thin character to preserve some space
 // for the caret visibillity in the input
@@ -39,4 +41,19 @@ TextWidthHelper = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
 
 
 
-    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement("div", { className: _TokenInput.styles.helperContainer(this.props.theme) }, /*#__PURE__*/_react.default.createElement("div", { className: this.props.classHelp, ref: this.elementRef }, this.props.text || THIN_SPACE));};_proto.getTextWidth = function getTextWidth() {return (0, _getDOMRect.getDOMRect)(this.element).width;};_proto.getTextHeight = function getTextHeight() {return (0, _getDOMRect.getDOMRect)(this.element).height;};return TextWidthHelper;}(_react.default.Component);exports.TextWidthHelper = TextWidthHelper;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.getSizeClassName = function getSizeClassName(size) {switch (size) {case 'large':return _Token.styles.helperContainerLarge(this.props.theme);case 'medium':return _Token.styles.helperContainerMedium(this.props.theme);case 'small':default:return _Token.styles.helperContainerSmall(this.props.theme);}};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_TokenView.TokenView, { size: this.props.size, className: (0, _Emotion.cx)(_Token.styles.helperContainer(), this.getSizeClassName(this.props.size)) }, /*#__PURE__*/_react.default.createElement("div", { className: _Token.styles.helperText(), ref: this.elementRef }, this.props.text || THIN_SPACE));};_proto.getTextWidth = function getTextWidth() {return (0, _getDOMRect.getDOMRect)(this.element).width;};_proto.getTextHeight = function getTextHeight() {return (0, _getDOMRect.getDOMRect)(this.element).height;};return TextWidthHelper;}(_react.default.Component);exports.TextWidthHelper = TextWidthHelper;

package/cjs/components/TokenInput/TextWidthHelper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextWidthHelper.tsx"],"names":["THIN_SPACE","TextWidthHelper","element","elementRef","node","render","styles","helperContainer","props","theme","classHelp","text","getTextWidth","width","getTextHeight","height","React","Component"],"mappings":"2PAAA;;;AAGA;;AAEA;;AAEA;AACA;AACA,IAAMA,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA,G;AACaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;;;;;AAoBjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAlBdC,M,GAAP,kBAAgB,CACd,oBACE,sCAAK,SAAS,EAAEC,mBAAOC,eAAP,CAAuB,KAAKC,KAAL,CAAWC,KAAlC,CAAhB,iBACE,sCAAK,SAAS,EAAE,KAAKD,KAAL,CAAWE,SAA3B,EAAsC,GAAG,EAAE,KAAKP,UAAhD,IACG,KAAKK,KAAL,CAAWG,IAAX,IAAmBX,UADtB,CADF,CADF,CAOD,C,QAEMY,Y,GAAP,wBAA8B,CAC5B,OAAO,4BAAW,KAAKV,OAAhB,EAAyBW,KAAhC,CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,4BAAW,KAAKZ,OAAhB,EAAyBa,MAAhC,CACD,C,0BAnBkCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './TokenInput.styles';\n\n// a thin character to preserve some space\n// for the caret visibillity in the input\nconst THIN_SPACE = '\\u2009';\n\nexport interface TextWidthHelperProps {\n  text?: string;\n  classHelp: string;\n  theme: Theme;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  public render() {\n    return (\n      <div className={styles.helperContainer(this.props.theme)}>\n        <div className={this.props.classHelp} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </div>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"]}
+{"version":3,"sources":["TextWidthHelper.tsx"],"names":["THIN_SPACE","TextWidthHelper","element","elementRef","node","getSizeClassName","size","styles","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","helperContainer","helperText","text","getTextWidth","width","getTextHeight","height","React","Component"],"mappings":"2PAAA;;AAEA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA,IAAMA,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA,G;AACaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAjCbC,gB,GAAR,0BAAyBC,IAAzB,EAA0C,CACxC,QAAQA,IAAR,GACE,KAAK,OAAL,CACE,OAAOC,cAAOC,oBAAP,CAA4B,KAAKC,KAAL,CAAWC,KAAvC,CAAP,CACF,KAAK,QAAL,CACE,OAAOH,cAAOI,qBAAP,CAA6B,KAAKF,KAAL,CAAWC,KAAxC,CAAP,CACF,KAAK,OAAL,CACA,QACE,OAAOH,cAAOK,oBAAP,CAA4B,KAAKH,KAAL,CAAWC,KAAvC,CAAP,CAPJ,CASD,C,QAEMG,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,oBAAD,IACE,IAAI,EAAE,KAAKJ,KAAL,CAAWH,IADnB,EAEE,SAAS,EAAE,iBAAGC,cAAOO,eAAP,EAAH,EAA6B,KAAKT,gBAAL,CAAsB,KAAKI,KAAL,CAAWH,IAAjC,CAA7B,CAFb,iBAIE,sCAAK,SAAS,EAAEC,cAAOQ,UAAP,EAAhB,EAAqC,GAAG,EAAE,KAAKZ,UAA/C,IACG,KAAKM,KAAL,CAAWO,IAAX,IAAmBhB,UADtB,CAJF,CADF,CAUD,C,QAEMiB,Y,GAAP,wBAA8B,CAC5B,OAAO,4BAAW,KAAKf,OAAhB,EAAyBgB,KAAhC,CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,4BAAW,KAAKjB,OAAhB,EAAyBkB,MAAhC,CACD,C,0BAlCkCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { TokenView } from '../Token/TokenView';\nimport { TokenSize } from '../Token';\nimport { styles } from '../Token/Token.styles';\n\n// a thin character to preserve some space\n// for the caret visibillity in the input\nconst THIN_SPACE = '\\u2009';\n\nexport interface TextWidthHelperProps {\n  text?: string;\n  theme: Theme;\n  size: TokenSize;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  private getSizeClassName(size: TokenSize) {\n    switch (size) {\n      case 'large':\n        return styles.helperContainerLarge(this.props.theme);\n      case 'medium':\n        return styles.helperContainerMedium(this.props.theme);\n      case 'small':\n      default:\n        return styles.helperContainerSmall(this.props.theme);\n    }\n  }\n\n  public render() {\n    return (\n      <TokenView\n        size={this.props.size}\n        className={cx(styles.helperContainer(), this.getSizeClassName(this.props.size))}\n      >\n        <div className={styles.helperText()} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </TokenView>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"]}

package/cjs/components/TokenInput/TokenInput.d.ts

@@ -1,5 +1,5 @@
-import React, { FocusEventHandler, MouseEventHandler, ReactNode } from 'react';
-import { TokenProps } from '../Token';
+import React, { AriaAttributes, FocusEventHandler, MouseEventHandler, ReactNode } from 'react';
+import { TokenProps, TokenSize } from '../Token';
 import { MenuItemState } from '../MenuItem';
 import { CommonProps } from '../../internal/CommonWrapper';
 export declare enum TokenInputType {
@@ -8,14 +8,31 @@ export declare enum TokenInputType {
     Combined = 2
 }
 export declare type TokenInputMenuAlign = 'left' | 'cursor';
-export interface TokenInputProps<T> extends CommonProps {
+export interface TokenInputProps<T> extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, CommonProps {
+    /**
+     * Выбранные токены, которые будут отображаться в поле ввода
+     */
     selectedItems?: T[];
+    /**
+     * Вызывается при добавлении нового токена
+     */
     onValueChange?: (items: T[]) => void;
     onMouseEnter?: MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: MouseEventHandler<HTMLDivElement>;
     onFocus?: FocusEventHandler<HTMLTextAreaElement>;
     onBlur?: FocusEventHandler<HTMLTextAreaElement>;
     autoFocus?: boolean;
+    /** Размер */
+    size?: TokenSize;
+    /**
+     * Тип инпута. Возможные значения:
+     *
+     *   `TokenInputType.WithReference` (можно выбирать токены только из предложенных, нельзя добавить новые)
+     *
+     *   `TokenInputType.WithoutReference` (можно добавлять токены, но нельзя выбирать)
+     *
+     *   `TokenInputType.Combined` (можно и выбирать, и добавлять)
+     */
     type?: TokenInputType;
     /**
      * Ширина выпадающего меню может быть указана как 'auto'
@@ -26,6 +43,9 @@ export interface TokenInputProps<T> extends CommonProps {
      * (по ширине текста)
      */
     menuWidth?: React.CSSProperties['width'];
+    /**
+     * Определяет выравнивание меню. Принимает значения `left` и `cursor`
+     */
     menuAlign?: TokenInputMenuAlign;
     /**
      * Функция поиска элементов, должна возвращать Promise с массивом элементов.
@@ -35,8 +55,17 @@ export interface TokenInputProps<T> extends CommonProps {
      * свойства `renderItem`, `valueToString`
      */
     getItems?: (query: string) => Promise<T[]>;
+    /**
+     * Скрывает меню при пустом вводе
+     */
     hideMenuIfEmptyInputValue?: boolean;
+    /**
+     * Позволяет настроить отображение элемента списка
+     */
     renderItem?: (item: T, state: MenuItemState) => React.ReactNode | null;
+    /**
+     * Позволяет настроить отображение выбранного значения
+     */
     renderValue?: (item: T) => React.ReactNode;
     /**
      * Функция должна возвращать строковое представление токена
@@ -53,10 +82,22 @@ export interface TokenInputProps<T> extends CommonProps {
      * Необходим для работы `renderTotalCount`
      */
     totalCount?: number;
+    /**
+     * Отображает заданное содержимое, если ничего не найдено. Работает если не рендерится `AddButton`
+     */
     renderNotFound?: () => React.ReactNode;
+    /**
+     * Преобразует значение в элемент списка
+     */
     valueToItem?: (item: string) => T;
+    /**
+     * Определяет уникальный ключ по элементу
+     */
     toKey?: (item: T) => string | number | undefined;
     placeholder?: string;
+    /**
+     * Символы, которые разделяют введённый текст на токены
+     */
     delimiters?: string[];
     /**
      * Состояние валидации при ошибке.
@@ -69,13 +110,17 @@ export interface TokenInputProps<T> extends CommonProps {
     disabled?: boolean;
     width?: string | number;
     maxMenuHeight?: number | string;
+    /**
+     * Позволяет настроить отображение токена, предоставляя возможность кастомизации внешнего вида и поведения токена
+     */
     renderToken?: (item: T, props: Partial<TokenProps>) => ReactNode;
     /**
      * Вызывается при изменении текста в поле ввода,
      */
     onInputValueChange?: (value: string) => void;
     /**
-     * Функция отрисовки кнопки добавления в выпадающем списке
+     * Функция отрисовки кнопки добавления в выпадающем списке.
+     * Работает только когда тип инпута = `TokenInputType.Combined`
      */
     renderAddButton?: (query?: string, onAddItem?: () => void) => ReactNode;
     /**
@@ -127,20 +172,26 @@ export declare const DefaultState: {
 export declare const TokenInputDataTids: {
     readonly root: "TokenInput__root";
     readonly tokenInputMenu: "TokenInputMenu__root";
+    readonly label: "TokenInput__label";
 };
-declare type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'toKey' | 'onValueChange' | 'width' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign'>>;
+declare type DefaultProps<T> = Required<Pick<TokenInputProps<T>, 'selectedItems' | 'delimiters' | 'renderItem' | 'renderValue' | 'valueToString' | 'valueToItem' | 'toKey' | 'onValueChange' | 'width' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'menuWidth' | 'menuAlign' | 'size'>>;
 export declare class TokenInput<T = string> extends React.PureComponent<TokenInputProps<T>, TokenInputState<T>> {
     static __KONTUR_REACT_UI__: string;
     static defaultProps: DefaultProps<any>;
+    private getDelimiters;
     private getProps;
     state: TokenInputState<T>;
+    private readonly textareaId;
+    private rootId;
     private readonly locale;
     private theme;
+    private featureFlags;
     private input;
     private tokensInputMenu;
     private textHelper;
     private wrapper;
     private setRootNode;
+    private memoizedTokens;
     componentDidMount(): void;
     componentDidUpdate(prevProps: TokenInputProps<T> & DefaultProps<T>, prevState: TokenInputState<T>): void;
     componentWillUnmount(): void;
@@ -153,6 +204,8 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
      */
     blur(): void;
     render(): JSX.Element;
+    private getLabelSizeClassName;
+    private getInputSizeClassName;
     private renderMain;
     /**
      * Сбрасывает введенное пользователем значение
@@ -207,5 +260,7 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private renderTokensEnd;
     private renderToken;
     private renderAddButton;
+    private isTokenDisabled;
+    private getAvailableTokenIndex;
 }
 export {};