@skbkontur/react-ui 5.6.1-9a162.0 → 6.0.0-alpha.0

package/components/Token/Token.styles/Token.styles.js

@@ -1,60 +1,63 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
-import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { memoizeGetStyles, prefix } from "../../../lib/theming/Emotion";
 import { tokenSizeMixin } from "../Token.mixins";
 export var globalClasses = prefix('token')({
   removeIcon: 'remove-icon'
 });
-export var styles = memoizeStyle({
-  token: function token(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      border: solid ", " transparent;\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])), t.tokenBorderRadius, t.tokenBorderWidth);
-  },
-  tokenSmall: function tokenSmall(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYSmall, t.tokenPaddingXSmall, t.tokenLineHeightSmall, t.tokenFontSizeSmall, t.tokenMarginYSmall, t.tokenMarginXSmall));
-  },
-  tokenMedium: function tokenMedium(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYMedium, t.tokenPaddingXMedium, t.tokenLineHeightMedium, t.tokenFontSizeMedium, t.tokenMarginYMedium, t.tokenMarginXMedium));
-  },
-  tokenLarge: function tokenLarge(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYLarge, t.tokenPaddingXLarge, t.tokenLineHeightLarge, t.tokenFontSizeLarge, t.tokenMarginYLarge, t.tokenMarginXLarge));
-  },
-  tokenIdle: function tokenIdle(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      background-clip: border-box;\n    "])), t.tokenColor, t.tokenBg, t.tokenBorderColor);
-  },
-  tokenHover: function tokenHover(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "])), t.tokenColorHover, t.tokenBgHover, t.tokenBorderWidth, t.tokenBorderColorHover);
-  },
-  tokenActive: function tokenActive(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])), t.tokenColorActive, t.tokenBgActive, t.tokenBorderWidth, t.tokenBorderColorActive);
-  },
-  tokenError: function tokenError(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorError, t.tokenOutlineWidth, t.tokenBorderColorError);
-  },
-  tokenWarning: function tokenWarning(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorWarning, t.tokenOutlineWidth, t.tokenBorderColorWarning);
-  },
-  tokenDisabled: function tokenDisabled(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n      border: solid 1px ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenTextColorDisabled, t.tokenBorderColorDisabled, globalClasses.removeIcon);
-  },
-  text: function text() {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
-  },
-  removeIcon: function removeIcon(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\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    "])), t.tokenRemoveIconSize, t.tokenRemoveIconSize, t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX, t.tokenRemoveIconBoxSizing, t.tokenRemoveIconGap);
-  },
-  helperText: function helperText() {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\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    "])));
-  },
-  helperContainer: function helperContainer() {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    "])));
-  },
-  helperContainerSmall: function helperContainerSmall(t) {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXSmall, t.tokenInputPaddingXSmall);
-  },
-  helperContainerMedium: function helperContainerMedium(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXMedium, t.tokenInputPaddingXMedium);
-  },
-  helperContainerLarge: function helperContainerLarge(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXLarge, t.tokenInputPaddingXLarge);
-  }
+export var getStyles = memoizeGetStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    token: function token(t) {
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      border: solid ", " transparent;\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])), t.tokenBorderRadius, t.tokenBorderWidth);
+    },
+    tokenSmall: function tokenSmall(t) {
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYSmall, t.tokenPaddingXSmall, t.tokenLineHeightSmall, t.tokenFontSizeSmall, t.tokenMarginYSmall, t.tokenMarginXSmall));
+    },
+    tokenMedium: function tokenMedium(t) {
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYMedium, t.tokenPaddingXMedium, t.tokenLineHeightMedium, t.tokenFontSizeMedium, t.tokenMarginYMedium, t.tokenMarginXMedium));
+    },
+    tokenLarge: function tokenLarge(t) {
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), tokenSizeMixin(t.tokenPaddingYLarge, t.tokenPaddingXLarge, t.tokenLineHeightLarge, t.tokenFontSizeLarge, t.tokenMarginYLarge, t.tokenMarginXLarge));
+    },
+    tokenIdle: function tokenIdle(t) {
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      background-clip: border-box;\n    "])), t.tokenColor, t.tokenBg, t.tokenBorderColor);
+    },
+    tokenHover: function tokenHover(t) {
+      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "])), t.tokenColorHover, t.tokenBgHover, t.tokenBorderWidth, t.tokenBorderColorHover);
+    },
+    tokenActive: function tokenActive(t) {
+      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])), t.tokenColorActive, t.tokenBgActive, t.tokenBorderWidth, t.tokenBorderColorActive);
+    },
+    tokenError: function tokenError(t) {
+      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorError, t.tokenOutlineWidth, t.tokenBorderColorError);
+    },
+    tokenWarning: function tokenWarning(t) {
+      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorWarning, t.tokenOutlineWidth, t.tokenBorderColorWarning);
+    },
+    tokenDisabled: function tokenDisabled(t) {
+      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n      border: solid 1px ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenTextColorDisabled, t.tokenBorderColorDisabled, globalClasses.removeIcon);
+    },
+    text: function text() {
+      return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
+    },
+    removeIcon: function removeIcon(t) {
+      return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\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    "])), t.tokenRemoveIconSize, t.tokenRemoveIconSize, t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX, t.tokenRemoveIconBoxSizing, t.tokenRemoveIconGap);
+    },
+    helperText: function helperText() {
+      return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\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    "])));
+    },
+    helperContainer: function helperContainer() {
+      return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    "])));
+    },
+    helperContainerSmall: function helperContainerSmall(t) {
+      return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXSmall, t.tokenInputPaddingXSmall);
+    },
+    helperContainerMedium: function helperContainerMedium(t) {
+      return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXMedium, t.tokenInputPaddingXMedium);
+    },
+    helperContainerLarge: function helperContainerLarge(t) {
+      return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXLarge, t.tokenInputPaddingXLarge);
+    }
+  };
 });

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

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","prefix","tokenSizeMixin","globalClasses","removeIcon","styles","token","t","_templateObject","_taggedTemplateLiteralLoose","tokenBorderRadius","tokenBorderWidth","tokenSmall","_templateObject2","tokenPaddingYSmall","tokenPaddingXSmall","tokenLineHeightSmall","tokenFontSizeSmall","tokenMarginYSmall","tokenMarginXSmall","tokenMedium","_templateObject3","tokenPaddingYMedium","tokenPaddingXMedium","tokenLineHeightMedium","tokenFontSizeMedium","tokenMarginYMedium","tokenMarginXMedium","tokenLarge","_templateObject4","tokenPaddingYLarge","tokenPaddingXLarge","tokenLineHeightLarge","tokenFontSizeLarge","tokenMarginYLarge","tokenMarginXLarge","tokenIdle","_templateObject5","tokenColor","tokenBg","tokenBorderColor","tokenHover","_templateObject6","tokenColorHover","tokenBgHover","tokenBorderColorHover","tokenActive","_templateObject7","tokenColorActive","tokenBgActive","tokenBorderColorActive","tokenError","_templateObject8","tokenBorderColorError","tokenOutlineWidth","tokenWarning","_templateObject9","tokenBorderColorWarning","tokenDisabled","_templateObject10","tokenTextColorDisabled","tokenBorderColorDisabled","text","_templateObject11","_templateObject12","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","helperText","_templateObject13","helperContainer","_templateObject14","helperContainerSmall","_templateObject15","tokenInputPaddingXSmall","helperContainerMedium","_templateObject16","tokenInputPaddingXMedium","helperContainerLarge","_templateObject17","tokenInputPaddingXLarge"],"sources":["Token.styles.ts"],"sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\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      border: solid ${t.tokenBorderWidth} transparent;\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  tokenIdle(t: Theme) {\n    return css`\n      color: ${t.tokenColor};\n      background: ${t.tokenBg};\n      border-color: ${t.tokenBorderColor};\n      background-clip: border-box;\n    `;\n  },\n\n  tokenHover(t: Theme) {\n    return css`\n      &:hover {\n        color: ${t.tokenColorHover};\n        background: ${t.tokenBgHover};\n        border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorHover};\n      }\n    `;\n  },\n\n  tokenActive(t: Theme) {\n    return css`\n      color: ${t.tokenColorActive};\n      background: ${t.tokenBgActive};\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorActive};\n    `;\n  },\n\n  tokenError(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  tokenWarning(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  tokenDisabled(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  text() {\n    return css`\n      display: inline-block;\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"],"mappings":"4ZAAA,SAASA,GAAG,EAAEC,YAAY,EAAEC,MAAM,QAAQ,2BAA2B;;;AAGrE,SAASC,cAAc,QAAQ,gBAAgB;;AAE/C,OAAO,IAAMC,aAAa,GAAGF,MAAM,CAAC,OAAO,CAAC,CAAC;EAC3CG,UAAU,EAAE;AACd,CAAC,CAAC;;AAEF,OAAO,IAAMC,MAAM,GAAGL,YAAY,CAAC;EACjCM,KAAK,WAAAA,MAACC,CAAQ,EAAE;IACd,OAAOR,GAAG,CAAAS,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;IAGSF,CAAC,CAACG,iBAAiB;IACpBH,CAAC,CAACI,gBAAgB;;;;;;;;;EAStC,CAAC;;EAEDC,UAAU,WAAAA,WAACL,CAAQ,EAAE;IACnB,OAAOR,GAAG,CAAAc,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;IACNP,cAAc;MACdK,CAAC,CAACO,kBAAkB;MACpBP,CAAC,CAACQ,kBAAkB;MACpBR,CAAC,CAACS,oBAAoB;MACtBT,CAAC,CAACU,kBAAkB;MACpBV,CAAC,CAACW,iBAAiB;MACnBX,CAAC,CAACY;IACJ,CAAC;;EAEL,CAAC;;EAEDC,WAAW,WAAAA,YAACb,CAAQ,EAAE;IACpB,OAAOR,GAAG,CAAAsB,gBAAA,KAAAA,gBAAA,GAAAZ,2BAAA;IACNP,cAAc;MACdK,CAAC,CAACe,mBAAmB;MACrBf,CAAC,CAACgB,mBAAmB;MACrBhB,CAAC,CAACiB,qBAAqB;MACvBjB,CAAC,CAACkB,mBAAmB;MACrBlB,CAAC,CAACmB,kBAAkB;MACpBnB,CAAC,CAACoB;IACJ,CAAC;;EAEL,CAAC;;EAEDC,UAAU,WAAAA,WAACrB,CAAQ,EAAE;IACnB,OAAOR,GAAG,CAAA8B,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;IACNP,cAAc;MACdK,CAAC,CAACuB,kBAAkB;MACpBvB,CAAC,CAACwB,kBAAkB;MACpBxB,CAAC,CAACyB,oBAAoB;MACtBzB,CAAC,CAAC0B,kBAAkB;MACpB1B,CAAC,CAAC2B,iBAAiB;MACnB3B,CAAC,CAAC4B;IACJ,CAAC;;EAEL,CAAC;;EAEDC,SAAS,WAAAA,UAAC7B,CAAQ,EAAE;IAClB,OAAOR,GAAG,CAAAsC,gBAAA,KAAAA,gBAAA,GAAA5B,2BAAA;IACCF,CAAC,CAAC+B,UAAU;IACP/B,CAAC,CAACgC,OAAO;IACPhC,CAAC,CAACiC,gBAAgB;;;EAGtC,CAAC;;EAEDC,UAAU,WAAAA,WAAClC,CAAQ,EAAE;IACnB,OAAOR,GAAG,CAAA2C,gBAAA,KAAAA,gBAAA,GAAAjC,2BAAA;;IAEGF,CAAC,CAACoC,eAAe;IACZpC,CAAC,CAACqC,YAAY;IACZrC,CAAC,CAACI,gBAAgB,EAAIJ,CAAC,CAACsC,qBAAqB;;;EAGnE,CAAC;;EAEDC,WAAW,WAAAA,YAACvC,CAAQ,EAAE;IACpB,OAAOR,GAAG,CAAAgD,gBAAA,KAAAA,gBAAA,GAAAtC,2BAAA;IACCF,CAAC,CAACyC,gBAAgB;IACbzC,CAAC,CAAC0C,aAAa;IACb1C,CAAC,CAACI,gBAAgB,EAAIJ,CAAC,CAAC2C,sBAAsB;;EAElE,CAAC;;EAEDC,UAAU,WAAAA,WAAC5C,CAAQ,EAAE;IACnB,OAAOR,GAAG,CAAAqD,gBAAA,KAAAA,gBAAA,GAAA3C,2BAAA;IACQF,CAAC,CAACI,gBAAgB,EAAIJ,CAAC,CAAC8C,qBAAqB;IACzC9C,CAAC,CAAC+C,iBAAiB,EAAI/C,CAAC,CAAC8C,qBAAqB;;EAEtE,CAAC;;EAEDE,YAAY,WAAAA,aAAChD,CAAQ,EAAE;IACrB,OAAOR,GAAG,CAAAyD,gBAAA,KAAAA,gBAAA,GAAA/C,2BAAA;IACQF,CAAC,CAACI,gBAAgB,EAAIJ,CAAC,CAACkD,uBAAuB;IAC3ClD,CAAC,CAAC+C,iBAAiB,EAAI/C,CAAC,CAACkD,uBAAuB;;EAExE,CAAC;;EAEDC,aAAa,WAAAA,cAACnD,CAAQ,EAAE;IACtB,OAAOR,GAAG,CAAA4D,iBAAA,KAAAA,iBAAA,GAAAlD,2BAAA;;;IAGCF,CAAC,CAACqD,sBAAsB;;IAEbrD,CAAC,CAACsD,wBAAwB;;IAE3C1D,aAAa,CAACC,UAAU;;;;EAI/B,CAAC;;EAED0D,IAAI,WAAAA,KAAA,EAAG;IACL,OAAO/D,GAAG,CAAAgE,iBAAA,KAAAA,iBAAA,GAAAtD,2BAAA;;;EAGZ,CAAC;;EAEDL,UAAU,WAAAA,WAACG,CAAQ,EAAE;IACnB,OAAOR,GAAG,CAAAiE,iBAAA,KAAAA,iBAAA,GAAAvD,2BAAA;IACEF,CAAC,CAAC0D,mBAAmB;IACtB1D,CAAC,CAAC0D,mBAAmB;;IAEnB1D,CAAC,CAAC2D,uBAAuB,EAAI3D,CAAC,CAAC4D,uBAAuB;IACnD5D,CAAC,CAAC6D,wBAAwB;IACzB7D,CAAC,CAAC8D,kBAAkB;;;;;;;;;;;EAWvC,CAAC;;EAEDC,UAAU,WAAAA,WAAA,EAAG;IACX,OAAOvE,GAAG,CAAAwE,iBAAA,KAAAA,iBAAA,GAAA9D,2BAAA;;;;;;;;EAQZ,CAAC;EACD+D,eAAe,WAAAA,gBAAA,EAAG;IAChB,OAAOzE,GAAG,CAAA0E,iBAAA,KAAAA,iBAAA,GAAAhE,2BAAA;;;;;EAKZ,CAAC;EACDiE,oBAAoB,WAAAA,qBAACnE,CAAQ,EAAE;IAC7B,OAAOR,GAAG,CAAA4E,iBAAA,KAAAA,iBAAA,GAAAlE,2BAAA;IACAF,CAAC,CAACqE,uBAAuB;IACxBrE,CAAC,CAACqE,uBAAuB;;EAEtC,CAAC;EACDC,qBAAqB,WAAAA,sBAACtE,CAAQ,EAAE;IAC9B,OAAOR,GAAG,CAAA+E,iBAAA,KAAAA,iBAAA,GAAArE,2BAAA;IACAF,CAAC,CAACwE,wBAAwB;IACzBxE,CAAC,CAACwE,wBAAwB;;EAEvC,CAAC;EACDC,oBAAoB,WAAAA,qBAACzE,CAAQ,EAAE;IAC7B,OAAOR,GAAG,CAAAkF,iBAAA,KAAAA,iBAAA,GAAAxE,2BAAA;IACAF,CAAC,CAAC2E,uBAAuB;IACxB3E,CAAC,CAAC2E,uBAAuB;;EAEtC;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["memoizeGetStyles","prefix","tokenSizeMixin","globalClasses","removeIcon","getStyles","_ref","css","token","t","_templateObject","_taggedTemplateLiteralLoose","tokenBorderRadius","tokenBorderWidth","tokenSmall","_templateObject2","tokenPaddingYSmall","tokenPaddingXSmall","tokenLineHeightSmall","tokenFontSizeSmall","tokenMarginYSmall","tokenMarginXSmall","tokenMedium","_templateObject3","tokenPaddingYMedium","tokenPaddingXMedium","tokenLineHeightMedium","tokenFontSizeMedium","tokenMarginYMedium","tokenMarginXMedium","tokenLarge","_templateObject4","tokenPaddingYLarge","tokenPaddingXLarge","tokenLineHeightLarge","tokenFontSizeLarge","tokenMarginYLarge","tokenMarginXLarge","tokenIdle","_templateObject5","tokenColor","tokenBg","tokenBorderColor","tokenHover","_templateObject6","tokenColorHover","tokenBgHover","tokenBorderColorHover","tokenActive","_templateObject7","tokenColorActive","tokenBgActive","tokenBorderColorActive","tokenError","_templateObject8","tokenBorderColorError","tokenOutlineWidth","tokenWarning","_templateObject9","tokenBorderColorWarning","tokenDisabled","_templateObject10","tokenTextColorDisabled","tokenBorderColorDisabled","text","_templateObject11","_templateObject12","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","helperText","_templateObject13","helperContainer","_templateObject14","helperContainerSmall","_templateObject15","tokenInputPaddingXSmall","helperContainerMedium","_templateObject16","tokenInputPaddingXMedium","helperContainerLarge","_templateObject17","tokenInputPaddingXLarge"],"sources":["Token.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeGetStyles, prefix } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nimport { tokenSizeMixin } from './Token.mixins';\n\nexport const globalClasses = prefix('token')({\n  removeIcon: 'remove-icon',\n});\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  token(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      border-radius: ${t.tokenBorderRadius};\n      border: solid ${t.tokenBorderWidth} transparent;\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  tokenIdle(t: Theme) {\n    return css`\n      color: ${t.tokenColor};\n      background: ${t.tokenBg};\n      border-color: ${t.tokenBorderColor};\n      background-clip: border-box;\n    `;\n  },\n\n  tokenHover(t: Theme) {\n    return css`\n      &:hover {\n        color: ${t.tokenColorHover};\n        background: ${t.tokenBgHover};\n        border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorHover};\n      }\n    `;\n  },\n\n  tokenActive(t: Theme) {\n    return css`\n      color: ${t.tokenColorActive};\n      background: ${t.tokenBgActive};\n      border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorActive};\n    `;\n  },\n\n  tokenError(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  tokenWarning(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  tokenDisabled(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  text() {\n    return css`\n      display: inline-block;\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"],"mappings":";;AAEA,SAASA,gBAAgB,EAAEC,MAAM,QAAQ,2BAA2B;;;AAGpE,SAASC,cAAc,QAAQ,gBAAgB;;AAE/C,OAAO,IAAMC,aAAa,GAAGF,MAAM,CAAC,OAAO,CAAC,CAAC;EAC3CG,UAAU,EAAE;AACd,CAAC,CAAC;;AAEF,OAAO,IAAMC,SAAS,GAAGL,gBAAgB,CAAC,UAAAM,IAAA,OAAGC,GAAG,GAAAD,IAAA,CAAHC,GAAG,QAAiB;IAC/DC,KAAK,WAAAA,MAACC,CAAQ,EAAE;MACd,OAAOF,GAAG,CAAAG,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;MAGSF,CAAC,CAACG,iBAAiB;MACpBH,CAAC,CAACI,gBAAgB;;;;;;;;;IAStC,CAAC;;IAEDC,UAAU,WAAAA,WAACL,CAAQ,EAAE;MACnB,OAAOF,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;MACNT,cAAc;QACdO,CAAC,CAACO,kBAAkB;QACpBP,CAAC,CAACQ,kBAAkB;QACpBR,CAAC,CAACS,oBAAoB;QACtBT,CAAC,CAACU,kBAAkB;QACpBV,CAAC,CAACW,iBAAiB;QACnBX,CAAC,CAACY;MACJ,CAAC;;IAEL,CAAC;;IAEDC,WAAW,WAAAA,YAACb,CAAQ,EAAE;MACpB,OAAOF,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAZ,2BAAA;MACNT,cAAc;QACdO,CAAC,CAACe,mBAAmB;QACrBf,CAAC,CAACgB,mBAAmB;QACrBhB,CAAC,CAACiB,qBAAqB;QACvBjB,CAAC,CAACkB,mBAAmB;QACrBlB,CAAC,CAACmB,kBAAkB;QACpBnB,CAAC,CAACoB;MACJ,CAAC;;IAEL,CAAC;;IAEDC,UAAU,WAAAA,WAACrB,CAAQ,EAAE;MACnB,OAAOF,GAAG,CAAAwB,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;MACNT,cAAc;QACdO,CAAC,CAACuB,kBAAkB;QACpBvB,CAAC,CAACwB,kBAAkB;QACpBxB,CAAC,CAACyB,oBAAoB;QACtBzB,CAAC,CAAC0B,kBAAkB;QACpB1B,CAAC,CAAC2B,iBAAiB;QACnB3B,CAAC,CAAC4B;MACJ,CAAC;;IAEL,CAAC;;IAEDC,SAAS,WAAAA,UAAC7B,CAAQ,EAAE;MAClB,OAAOF,GAAG,CAAAgC,gBAAA,KAAAA,gBAAA,GAAA5B,2BAAA;MACCF,CAAC,CAAC+B,UAAU;MACP/B,CAAC,CAACgC,OAAO;MACPhC,CAAC,CAACiC,gBAAgB;;;IAGtC,CAAC;;IAEDC,UAAU,WAAAA,WAAClC,CAAQ,EAAE;MACnB,OAAOF,GAAG,CAAAqC,gBAAA,KAAAA,gBAAA,GAAAjC,2BAAA;;MAEGF,CAAC,CAACoC,eAAe;MACZpC,CAAC,CAACqC,YAAY;MACZrC,CAAC,CAACI,gBAAgB,EAAIJ,CAAC,CAACsC,qBAAqB;;;IAGnE,CAAC;;IAEDC,WAAW,WAAAA,YAACvC,CAAQ,EAAE;MACpB,OAAOF,GAAG,CAAA0C,gBAAA,KAAAA,gBAAA,GAAAtC,2BAAA;MACCF,CAAC,CAACyC,gBAAgB;MACbzC,CAAC,CAAC0C,aAAa;MACb1C,CAAC,CAACI,gBAAgB,EAAIJ,CAAC,CAAC2C,sBAAsB;;IAElE,CAAC;;IAEDC,UAAU,WAAAA,WAAC5C,CAAQ,EAAE;MACnB,OAAOF,GAAG,CAAA+C,gBAAA,KAAAA,gBAAA,GAAA3C,2BAAA;MACQF,CAAC,CAACI,gBAAgB,EAAIJ,CAAC,CAAC8C,qBAAqB;MACzC9C,CAAC,CAAC+C,iBAAiB,EAAI/C,CAAC,CAAC8C,qBAAqB;;IAEtE,CAAC;;IAEDE,YAAY,WAAAA,aAAChD,CAAQ,EAAE;MACrB,OAAOF,GAAG,CAAAmD,gBAAA,KAAAA,gBAAA,GAAA/C,2BAAA;MACQF,CAAC,CAACI,gBAAgB,EAAIJ,CAAC,CAACkD,uBAAuB;MAC3ClD,CAAC,CAAC+C,iBAAiB,EAAI/C,CAAC,CAACkD,uBAAuB;;IAExE,CAAC;;IAEDC,aAAa,WAAAA,cAACnD,CAAQ,EAAE;MACtB,OAAOF,GAAG,CAAAsD,iBAAA,KAAAA,iBAAA,GAAAlD,2BAAA;;;MAGCF,CAAC,CAACqD,sBAAsB;;MAEbrD,CAAC,CAACsD,wBAAwB;;MAE3C5D,aAAa,CAACC,UAAU;;;;IAI/B,CAAC;;IAED4D,IAAI,WAAAA,KAAA,EAAG;MACL,OAAOzD,GAAG,CAAA0D,iBAAA,KAAAA,iBAAA,GAAAtD,2BAAA;;;IAGZ,CAAC;;IAEDP,UAAU,WAAAA,WAACK,CAAQ,EAAE;MACnB,OAAOF,GAAG,CAAA2D,iBAAA,KAAAA,iBAAA,GAAAvD,2BAAA;MACEF,CAAC,CAAC0D,mBAAmB;MACtB1D,CAAC,CAAC0D,mBAAmB;;MAEnB1D,CAAC,CAAC2D,uBAAuB,EAAI3D,CAAC,CAAC4D,uBAAuB;MACnD5D,CAAC,CAAC6D,wBAAwB;MACzB7D,CAAC,CAAC8D,kBAAkB;;;;;;;;;;;IAWvC,CAAC;;IAEDC,UAAU,WAAAA,WAAA,EAAG;MACX,OAAOjE,GAAG,CAAAkE,iBAAA,KAAAA,iBAAA,GAAA9D,2BAAA;;;;;;;;IAQZ,CAAC;IACD+D,eAAe,WAAAA,gBAAA,EAAG;MAChB,OAAOnE,GAAG,CAAAoE,iBAAA,KAAAA,iBAAA,GAAAhE,2BAAA;;;;;IAKZ,CAAC;IACDiE,oBAAoB,WAAAA,qBAACnE,CAAQ,EAAE;MAC7B,OAAOF,GAAG,CAAAsE,iBAAA,KAAAA,iBAAA,GAAAlE,2BAAA;MACAF,CAAC,CAACqE,uBAAuB;MACxBrE,CAAC,CAACqE,uBAAuB;;IAEtC,CAAC;IACDC,qBAAqB,WAAAA,sBAACtE,CAAQ,EAAE;MAC9B,OAAOF,GAAG,CAAAyE,iBAAA,KAAAA,iBAAA,GAAArE,2BAAA;MACAF,CAAC,CAACwE,wBAAwB;MACzBxE,CAAC,CAACwE,wBAAwB;;IAEvC,CAAC;IACDC,oBAAoB,WAAAA,qBAACzE,CAAQ,EAAE;MAC7B,OAAOF,GAAG,CAAA4E,iBAAA,KAAAA,iBAAA,GAAAxE,2BAAA;MACAF,CAAC,CAAC2E,uBAAuB;MACxB3E,CAAC,CAAC2E,uBAAuB;;IAEtC;EACF,CAAC,EAAC,CAAC","ignoreList":[]}

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

@@ -2,7 +2,7 @@ import type { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     removeIcon: string;
 };
-export declare const styles: {
+export declare const getStyles: import("../../lib/theming/Emotion").StylesGetter<{
     token(t: Theme): string;
     tokenSmall(t: Theme): string;
     tokenMedium(t: Theme): string;
@@ -20,4 +20,4 @@ export declare const styles: {
     helperContainerSmall(t: Theme): string;
     helperContainerMedium(t: Theme): string;
     helperContainerLarge(t: Theme): string;
-};
+}>;

package/components/Token/TokenView/TokenView.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["size", "children", "closeButton", "hideCloseButton", "className"];
-import React, { useContext } from 'react';
+import React, { forwardRef, useContext } from 'react';
+import { useEmotion, useStyles } from "../../../lib/renderEnvironment";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { cx } from "../../../lib/theming/Emotion";
-import { globalClasses, styles } from "../Token.styles";
-export function TokenView(props) {
+import { globalClasses, getStyles } from "../Token.styles";
+export var TokenView = /*#__PURE__*/forwardRef(function (props, ref) {
   var _cx;
   var _props$size = props.size,
     size = _props$size === void 0 ? 'small' : _props$size,
@@ -15,6 +15,9 @@ export function TokenView(props) {
     hideCloseButton = props.hideCloseButton,
     className = props.className,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var _useEmotion = useEmotion(),
+    cx = _useEmotion.cx;
+  var styles = useStyles(getStyles);
   var theme = useContext(ThemeContext);
   var getSizeClassName = function getSizeClassName(size) {
     switch (size) {
@@ -32,9 +35,11 @@ export function TokenView(props) {
     className: cx(styles.removeIcon(theme), globalClasses.removeIcon)
   }, closeButton);
   return /*#__PURE__*/(
-    React.createElement(CommonWrapper, props, /*#__PURE__*/
+    React.createElement(CommonWrapper, _extends({}, props, {
+      ref: ref
+    }), /*#__PURE__*/
     React.createElement("div", _extends({}, rest, {
       className: cx(getSizeClassName(size), (_cx = {}, _cx[styles.token(theme)] = true, _cx))
     }), children, closeButtonNode))
   );
-}
+});

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

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","CommonWrapper","ThemeContext","cx","globalClasses","styles","TokenView","props","_cx","_props$size","size","children","closeButton","hideCloseButton","className","rest","_objectWithoutPropertiesLoose","_excluded","theme","getSizeClassName","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","createElement","removeIcon","_extends","token"],"sources":["TokenView.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useContext } from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport type { TokenSize } from './Token';\nimport { globalClasses, styles } from './Token.styles';\n\nexport interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Задает размер контрола. */\n  size?: TokenSize;\n  /** Задает компонент крестика для удаления токена. */\n  closeButton?: ReactNode;\n  /** Определяет, скрывать ли крестик для удаления токена. */\n  hideCloseButton?: boolean;\n}\n\nexport function TokenView(props: TokenViewProps) {\n  const { size = 'small', children, closeButton, hideCloseButton, 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  const closeButtonNode = hideCloseButton ? null : (\n    <span className={cx(styles.removeIcon(theme), globalClasses.removeIcon)}>{closeButton}</span>\n  );\n\n  return (\n    <CommonWrapper {...props}>\n      <div\n        {...rest}\n        className={cx(getSizeClassName(size), {\n          [styles.token(theme)]: true,\n        })}\n      >\n        {children}\n        {closeButtonNode}\n      </div>\n    </CommonWrapper>\n  );\n}\n"],"mappings":";AACA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,EAAE,QAAQ,2BAA2B;;;AAG9C,SAASC,aAAa,EAAEC,MAAM,QAAQ,gBAAgB;;;;;;;;;;;AAWtD,OAAO,SAASC,SAASA,CAACC,KAAqB,EAAE,KAAAC,GAAA;EAC/C,IAAAC,WAAA,GAAuFF,KAAK,CAApFG,IAAI,CAAJA,IAAI,GAAAD,WAAA,cAAG,OAAO,GAAAA,WAAA,CAAEE,QAAQ,GAAuDJ,KAAK,CAApEI,QAAQ,CAAEC,WAAW,GAA0CL,KAAK,CAA1DK,WAAW,CAAEC,eAAe,GAAyBN,KAAK,CAA7CM,eAAe,CAAEC,SAAS,GAAcP,KAAK,CAA5BO,SAAS,CAAKC,IAAI,GAAAC,6BAAA,CAAKT,KAAK,EAAAU,SAAA;EAC5F,IAAMC,KAAK,GAAGlB,UAAU,CAACE,YAAY,CAAC;EACtC,IAAMiB,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIT,IAAe,EAAK;IAC5C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAOL,MAAM,CAACe,UAAU,CAACF,KAAK,CAAC;MACjC,KAAK,QAAQ;QACX,OAAOb,MAAM,CAACgB,WAAW,CAACH,KAAK,CAAC;MAClC,KAAK,OAAO;MACZ;QACE,OAAOb,MAAM,CAACiB,UAAU,CAACJ,KAAK,CAAC;IACnC;EACF,CAAC;EACD,IAAMK,eAAe,GAAGV,eAAe,GAAG,IAAI;EAC5Cd,KAAA,CAAAyB,aAAA,WAAMV,SAAS,EAAEX,EAAE,CAACE,MAAM,CAACoB,UAAU,CAACP,KAAK,CAAC,EAAEd,aAAa,CAACqB,UAAU,CAAE,IAAEb,WAAkB,CAC7F;;;EAED;IACEb,KAAA,CAAAyB,aAAA,CAACvB,aAAa,EAAKM,KAAK;IACtBR,KAAA,CAAAyB,aAAA,QAAAE,QAAA;IACMX,IAAI;MACRD,SAAS,EAAEX,EAAE,CAACgB,gBAAgB,CAACT,IAAI,CAAC,GAAAF,GAAA,OAAAA,GAAA;MACjCH,MAAM,CAACsB,KAAK,CAACT,KAAK,CAAC,IAAG,IAAI,EAAAV,GAAA;MAC5B,CAAE;;IAEFG,QAAQ;IACRY;IACE;IACQ,CAAC;;AAEpB","ignoreList":[]}
+{"version":3,"names":["React","forwardRef","useContext","useEmotion","useStyles","CommonWrapper","ThemeContext","globalClasses","getStyles","TokenView","props","ref","_cx","_props$size","size","children","closeButton","hideCloseButton","className","rest","_objectWithoutPropertiesLoose","_excluded","_useEmotion","cx","styles","theme","getSizeClassName","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","createElement","removeIcon","_extends","token"],"sources":["TokenView.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { forwardRef, useContext } from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment';\nimport { type CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport type { TokenSize } from './Token';\nimport { globalClasses, getStyles } from './Token.styles';\n\nexport interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Задает размер контрола. */\n  size?: TokenSize;\n  /** Задает компонент крестика для удаления токена. */\n  closeButton?: ReactNode;\n  /** Определяет, скрывать ли крестик для удаления токена. */\n  hideCloseButton?: boolean;\n}\n\nexport const TokenView = forwardRef((props: TokenViewProps, ref: React.Ref<CommonWrapper<CommonProps>>) => {\n  const { size = 'small', children, closeButton, hideCloseButton, className, ...rest } = props;\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\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  const closeButtonNode = hideCloseButton ? null : (\n    <span className={cx(styles.removeIcon(theme), globalClasses.removeIcon)}>{closeButton}</span>\n  );\n\n  return (\n    <CommonWrapper {...props} ref={ref}>\n      <div\n        {...rest}\n        className={cx(getSizeClassName(size), {\n          [styles.token(theme)]: true,\n        })}\n      >\n        {children}\n        {closeButtonNode}\n      </div>\n    </CommonWrapper>\n  );\n});\n"],"mappings":";AACA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,UAAU,QAAQ,OAAO;;AAErD,SAASC,UAAU,EAAEC,SAAS,QAAQ,6BAA6B;AACnE,SAA2BC,aAAa,QAAQ,8BAA8B;AAC9E,SAASC,YAAY,QAAQ,gCAAgC;;;AAG7D,SAASC,aAAa,EAAEC,SAAS,QAAQ,gBAAgB;;;;;;;;;;;AAWzD,OAAO,IAAMC,SAAS,gBAAGR,UAAU,CAAC,UAACS,KAAqB,EAAEC,GAA0C,EAAK,KAAAC,GAAA;EACzG,IAAAC,WAAA,GAAuFH,KAAK,CAApFI,IAAI,CAAJA,IAAI,GAAAD,WAAA,cAAG,OAAO,GAAAA,WAAA,CAAEE,QAAQ,GAAuDL,KAAK,CAApEK,QAAQ,CAAEC,WAAW,GAA0CN,KAAK,CAA1DM,WAAW,CAAEC,eAAe,GAAyBP,KAAK,CAA7CO,eAAe,CAAEC,SAAS,GAAcR,KAAK,CAA5BQ,SAAS,CAAKC,IAAI,GAAAC,6BAAA,CAAKV,KAAK,EAAAW,SAAA;EAC5F,IAAAC,WAAA,GAAenB,UAAU,CAAC,CAAC,CAAnBoB,EAAE,GAAAD,WAAA,CAAFC,EAAE;EACV,IAAMC,MAAM,GAAGpB,SAAS,CAACI,SAAS,CAAC;EACnC,IAAMiB,KAAK,GAAGvB,UAAU,CAACI,YAAY,CAAC;EACtC,IAAMoB,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIZ,IAAe,EAAK;IAC5C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAOU,MAAM,CAACG,UAAU,CAACF,KAAK,CAAC;MACjC,KAAK,QAAQ;QACX,OAAOD,MAAM,CAACI,WAAW,CAACH,KAAK,CAAC;MAClC,KAAK,OAAO;MACZ;QACE,OAAOD,MAAM,CAACK,UAAU,CAACJ,KAAK,CAAC;IACnC;EACF,CAAC;EACD,IAAMK,eAAe,GAAGb,eAAe,GAAG,IAAI;EAC5CjB,KAAA,CAAA+B,aAAA,WAAMb,SAAS,EAAEK,EAAE,CAACC,MAAM,CAACQ,UAAU,CAACP,KAAK,CAAC,EAAElB,aAAa,CAACyB,UAAU,CAAE,IAAEhB,WAAkB,CAC7F;;;EAED;IACEhB,KAAA,CAAA+B,aAAA,CAAC1B,aAAa,EAAA4B,QAAA,KAAKvB,KAAK,IAAEC,GAAG,EAAEA,GAAI;IACjCX,KAAA,CAAA+B,aAAA,QAAAE,QAAA;IACMd,IAAI;MACRD,SAAS,EAAEK,EAAE,CAACG,gBAAgB,CAACZ,IAAI,CAAC,GAAAF,GAAA,OAAAA,GAAA;MACjCY,MAAM,CAACU,KAAK,CAACT,KAAK,CAAC,IAAG,IAAI,EAAAb,GAAA;MAC5B,CAAE;;IAEFG,QAAQ;IACRe;IACE;IACQ,CAAC;;AAEpB,CAAC,CAAC","ignoreList":[]}

package/components/Token/TokenView.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import React from 'react';
+import { type CommonProps, CommonWrapper } from '../../internal/CommonWrapper';
 import type { TokenSize } from './Token';
 export interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Задает размер контрола. */
@@ -9,4 +10,4 @@ export interface TokenViewProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Определяет, скрывать ли крестик для удаления токена. */
     hideCloseButton?: boolean;
 }
-export declare function TokenView(props: TokenViewProps): React.JSX.Element;
+export declare const TokenView: React.ForwardRefExoticComponent<TokenViewProps & React.RefAttributes<CommonWrapper<CommonProps>>>;

package/components/TokenInput/TextWidthHelper/TextWidthHelper.js

@@ -1,9 +1,10 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _class;
 import React from 'react';
-import { cx } from "../../../lib/theming/Emotion";
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import { TokenView } from "../../Token/TokenView";
-import { styles } from "../../Token/Token.styles";
+import { getStyles } from "../../Token/Token.styles";
+import { withRenderEnvironment } from "../../../lib/renderEnvironment";
 
 // a thin character to preserve some space
 // for the caret visibillity in the input
@@ -13,7 +14,7 @@ var THIN_SPACE = "\u2009";
  * Херпер позволяет вычислить размеры блока с текстом
  * для последующего выставления размеров input
  */
-export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
+export var TextWidthHelper = withRenderEnvironment(_class = /*#__PURE__*/function (_React$Component) {
   function TextWidthHelper() {
     var _this;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -22,7 +23,7 @@ export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.element = null;
     _this.elementRef = function (node) {
-      return _this.element = node;
+      _this.element = node;
     };
     return _this;
   }
@@ -31,20 +32,21 @@ export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
   _proto.getSizeClassName = function getSizeClassName(size) {
     switch (size) {
       case 'large':
-        return styles.helperContainerLarge(this.props.theme);
+        return this.styles.helperContainerLarge(this.props.theme);
       case 'medium':
-        return styles.helperContainerMedium(this.props.theme);
+        return this.styles.helperContainerMedium(this.props.theme);
       case 'small':
       default:
-        return styles.helperContainerSmall(this.props.theme);
+        return this.styles.helperContainerSmall(this.props.theme);
     }
   };
   _proto.render = function render() {
+    this.styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(TokenView, {
       size: this.props.size,
-      className: cx(styles.helperContainer(), this.getSizeClassName(this.props.size))
+      className: this.cx(this.styles.helperContainer(), this.getSizeClassName(this.props.size))
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles.helperText(),
+      className: this.styles.helperText(),
       ref: this.elementRef
     }, this.props.text || THIN_SPACE));
   };
@@ -55,4 +57,4 @@ export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
     return getDOMRect(this.element).height;
   };
   return TextWidthHelper;
-}(React.Component);
+}(React.Component)) || _class;

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

@@ -1 +1 @@
-{"version":3,"names":["React","cx","getDOMRect","TokenView","styles","THIN_SPACE","TextWidthHelper","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","element","elementRef","node","_inheritsLoose","_proto","prototype","getSizeClassName","size","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","createElement","className","helperContainer","helperText","ref","text","getTextWidth","width","getTextHeight","height","Component"],"sources":["TextWidthHelper.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { TokenView } from '../Token/TokenView';\nimport type { 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  /** Задает текст в поле ввода, еще не ставший токеном. */\n  text?: string;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme: Theme;\n\n  /** Задает размер контрола. */\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"],"mappings":"sEAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,EAAE,QAAQ,2BAA2B;;AAE9C,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,SAAS,QAAQ,oBAAoB;;AAE9C,SAASC,MAAM,QAAQ,uBAAuB;;AAE9C;AACA;AACA,IAAMC,UAAU,GAAG,QAAQ;;;;;;;;;;;;AAY3B;AACA;AACA;AACA;AACA,WAAaC,eAAe,0BAAAC,gBAAA,YAAAD,gBAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;IAClBU,OAAO,GAA0B,IAAI,CAAAV,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmCrCW,UAAU,GAAG,UAACC,IAAoB,UAAMZ,KAAA,CAAKU,OAAO,GAAGE,IAAI,EAAC,QAAAZ,KAAA,EAAAa,cAAA,CAAAf,eAAA,EAAAC,gBAAA,MAAAe,MAAA,GAAAhB,eAAA,CAAAiB,SAAA,CAAAD,MAAA,CAjC5DE,gBAAgB,GAAxB,SAAAA,iBAAyBC,IAAe,EAAE,CACxC,QAAQA,IAAI,GACV,KAAK,OAAO,CACV,OAAOrB,MAAM,CAACsB,oBAAoB,CAAC,IAAI,CAACC,KAAK,CAACC,KAAK,CAAC,CACtD,KAAK,QAAQ,CACX,OAAOxB,MAAM,CAACyB,qBAAqB,CAAC,IAAI,CAACF,KAAK,CAACC,KAAK,CAAC,CACvD,KAAK,OAAO,CACZ,QACE,OAAOxB,MAAM,CAAC0B,oBAAoB,CAAC,IAAI,CAACH,KAAK,CAACC,KAAK,CAAC,CACxD,CACF,CAAC,CAAAN,MAAA,CAEMS,MAAM,GAAb,SAAAA,OAAA,EAAgB,CACd,oBACE/B,KAAA,CAAAgC,aAAA,CAAC7B,SAAS,IACRsB,IAAI,EAAE,IAAI,CAACE,KAAK,CAACF,IAAK,EACtBQ,SAAS,EAAEhC,EAAE,CAACG,MAAM,CAAC8B,eAAe,CAAC,CAAC,EAAE,IAAI,CAACV,gBAAgB,CAAC,IAAI,CAACG,KAAK,CAACF,IAAI,CAAC,CAAE,iBAEhFzB,KAAA,CAAAgC,aAAA,UAAKC,SAAS,EAAE7B,MAAM,CAAC+B,UAAU,CAAC,CAAE,EAACC,GAAG,EAAE,IAAI,CAACjB,UAAW,IACvD,IAAI,CAACQ,KAAK,CAACU,IAAI,IAAIhC,UACjB,CACI,CAAC,CAEhB,CAAC,CAAAiB,MAAA,CAEMgB,YAAY,GAAnB,SAAAA,aAAA,EAA8B,CAC5B,OAAOpC,UAAU,CAAC,IAAI,CAACgB,OAAO,CAAC,CAACqB,KAAK,CACvC,CAAC,CAAAjB,MAAA,CAEMkB,aAAa,GAApB,SAAAA,cAAA,EAA+B,CAC7B,OAAOtC,UAAU,CAAC,IAAI,CAACgB,OAAO,CAAC,CAACuB,MAAM,CACxC,CAAC,QAAAnC,eAAA,GAlCkCN,KAAK,CAAC0C,SAAS","ignoreList":[]}
+{"version":3,"names":["React","getDOMRect","TokenView","getStyles","withRenderEnvironment","THIN_SPACE","TextWidthHelper","_class","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","element","elementRef","node","_inheritsLoose","_proto","prototype","getSizeClassName","size","styles","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","emotion","createElement","className","cx","helperContainer","helperText","ref","text","getTextWidth","width","getTextHeight","height","Component"],"sources":["TextWidthHelper.tsx"],"sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\nimport type { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { TokenView } from '../Token/TokenView';\nimport type { TokenSize } from '../Token';\nimport { getStyles } from '../Token/Token.styles';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment';\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  /** Задает текст в поле ввода, еще не ставший токеном. */\n  text?: string;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme: Theme;\n\n  /** Задает размер контрола. */\n  size: TokenSize;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\n@withRenderEnvironment\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n\n  private getSizeClassName(size: TokenSize) {\n    switch (size) {\n      case 'large':\n        return this.styles.helperContainerLarge(this.props.theme);\n      case 'medium':\n        return this.styles.helperContainerMedium(this.props.theme);\n      case 'small':\n      default:\n        return this.styles.helperContainerSmall(this.props.theme);\n    }\n  }\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <TokenView\n        size={this.props.size}\n        className={this.cx(this.styles.helperContainer(), this.getSizeClassName(this.props.size))}\n      >\n        <div className={this.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) => {\n    this.element = node;\n  };\n}\n"],"mappings":"iFAAA,OAAOA,KAAK,MAAM,OAAO;;;;AAIzB,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,SAAS,QAAQ,oBAAoB;;AAE9C,SAASC,SAAS,QAAQ,uBAAuB;AACjD,SAASC,qBAAqB,QAAQ,6BAA6B;;AAEnE;AACA;AACA,IAAMC,UAAU,GAAG,QAAQ;;;;;;;;;;;;AAY3B;AACA;AACA;AACA;AACA;AACaC,eAAe,GAD3BF,qBAAqB,CAAAG,MAAA,0BAAAC,gBAAA,YAAAF,gBAAA,OAAAG,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;IAEZU,OAAO,GAA0B,IAAI,CAAAV,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwCrCW,UAAU,GAAG,UAACC,IAAoB,EAAK;MAC7CZ,KAAA,CAAKU,OAAO,GAAGE,IAAI;IACrB,CAAC,QAAAZ,KAAA,EAAAa,cAAA,CAAAhB,eAAA,EAAAE,gBAAA,MAAAe,MAAA,GAAAjB,eAAA,CAAAkB,SAAA,CAAAD,MAAA,CArCOE,gBAAgB,GAAxB,SAAAA,iBAAyBC,IAAe,EAAE,CACxC,QAAQA,IAAI,GACV,KAAK,OAAO,CACV,OAAO,IAAI,CAACC,MAAM,CAACC,oBAAoB,CAAC,IAAI,CAACC,KAAK,CAACC,KAAK,CAAC,CAC3D,KAAK,QAAQ,CACX,OAAO,IAAI,CAACH,MAAM,CAACI,qBAAqB,CAAC,IAAI,CAACF,KAAK,CAACC,KAAK,CAAC,CAC5D,KAAK,OAAO,CACZ,QACE,OAAO,IAAI,CAACH,MAAM,CAACK,oBAAoB,CAAC,IAAI,CAACH,KAAK,CAACC,KAAK,CAAC,CAC7D,CACF,CAAC,CAAAP,MAAA,CAEMU,MAAM,GAAb,SAAAA,OAAA,EAAmC,CACjC,IAAI,CAACN,MAAM,GAAGxB,SAAS,CAAC,IAAI,CAAC+B,OAAO,CAAC,CAErC,oBACElC,KAAA,CAAAmC,aAAA,CAACjC,SAAS,IACRwB,IAAI,EAAE,IAAI,CAACG,KAAK,CAACH,IAAK,EACtBU,SAAS,EAAE,IAAI,CAACC,EAAE,CAAC,IAAI,CAACV,MAAM,CAACW,eAAe,CAAC,CAAC,EAAE,IAAI,CAACb,gBAAgB,CAAC,IAAI,CAACI,KAAK,CAACH,IAAI,CAAC,CAAE,iBAE1F1B,KAAA,CAAAmC,aAAA,UAAKC,SAAS,EAAE,IAAI,CAACT,MAAM,CAACY,UAAU,CAAC,CAAE,EAACC,GAAG,EAAE,IAAI,CAACpB,UAAW,IAC5D,IAAI,CAACS,KAAK,CAACY,IAAI,IAAIpC,UACjB,CACI,CAAC,CAEhB,CAAC,CAAAkB,MAAA,CAEMmB,YAAY,GAAnB,SAAAA,aAAA,EAA8B,CAC5B,OAAOzC,UAAU,CAAC,IAAI,CAACkB,OAAO,CAAC,CAACwB,KAAK,CACvC,CAAC,CAAApB,MAAA,CAEMqB,aAAa,GAApB,SAAAA,cAAA,EAA+B,CAC7B,OAAO3C,UAAU,CAAC,IAAI,CAACkB,OAAO,CAAC,CAAC0B,MAAM,CACxC,CAAC,QAAAvC,eAAA,GAvCkCN,KAAK,CAAC8C,SAAS,MAAAvC,MAAA","ignoreList":[]}

package/components/TokenInput/TextWidthHelper.d.ts

@@ -15,6 +15,9 @@ export interface TextWidthHelperProps {
  */
 export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
     private element;
+    private emotion;
+    private cx;
+    private styles;
     private getSizeClassName;
     render(): React.JSX.Element;
     getTextWidth(): number;