@skbkontur/react-ui 0.0.0-ce2a893b1a → 0.0.0-d1bb8f344a

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

@@ -1,25 +1,71 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
 
 import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
+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      padding: ", " ", ";\n      line-height: ", ";\n      font-size: ", ";\n      margin: ", " ", ";\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])), t.tokenBorderRadius, t.tokenPaddingY, t.tokenPaddingX, t.tokenLineHeight, t.tokenFontSize, t.tokenMarginY, t.tokenMarginX);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])), t.tokenBorderRadius);
+  },
+  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));
+  },
+  token2022: function token2022(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      border: solid ", " transparent;\n    "])), t.tokenBorderWidth);
+  },
+  tokenDefaultIdle2022: function tokenDefaultIdle2022(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      background-clip: border-box;\n    "])), t.tokenDefaultIdleColor, t.tokenDefaultIdleBg, t.tokenDefaultIdleBorderColor);
+  },
+  tokenDefaultIdleHovering2022: function tokenDefaultIdleHovering2022(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "])), t.tokenDefaultIdleColorHover, t.tokenDefaultIdleBgHover, t.tokenBorderWidth, t.tokenDefaultIdleBorderColorHover);
+  },
+  tokenDefaultActive2022: function tokenDefaultActive2022(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])), t.tokenDefaultActiveColor, t.tokenDefaultActiveBg, t.tokenBorderWidth, t.tokenDefaultActiveBorderColor);
+  },
+  tokenError2022: function tokenError2022(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorError, t.tokenOutlineWidth, t.tokenBorderColorError);
+  },
+  tokenWarning2022: function tokenWarning2022(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.tokenBorderWidth, t.tokenBorderColorWarning, t.tokenOutlineWidth, t.tokenBorderColorWarning);
+  },
+  tokenDisabled2022: function tokenDisabled2022(t) {
+    return css(_templateObject11 || (_templateObject11 = _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);
   },
   disabled: function disabled(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenPaddingYDisabled, t.tokenPaddingXDisabled, t.tokenMarginYDisabled, t.tokenMarginXDisabled, t.tokenTextColorDisabled, globalClasses.removeIcon);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenTextColorDisabled, globalClasses.removeIcon);
   },
   text: function text(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])), t.tokenLegacyTextShift);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])), t.tokenLegacyTextShift);
   },
   removeIcon: function removeIcon(t) {
-    return css(_templateObject4 || (_templateObject4 = _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\n      &:hover {\n        opacity: 1;\n      }\n    "])), t.tokenRemoveIconSize, t.tokenRemoveIconSize, t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX, t.tokenRemoveIconBoxSizing, t.tokenRemoveIconGap);
+    return css(_templateObject14 || (_templateObject14 = _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(_templateObject15 || (_templateObject15 = _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(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      position: absolute;\n      visibility: hidden;\n    "])));
+  },
+  helperContainerSmall: function helperContainerSmall(t) {
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXSmall, t.tokenInputPaddingXSmall);
+  },
+  helperContainerMedium: function helperContainerMedium(t) {
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXMedium, t.tokenInputPaddingXMedium);
+  },
+  helperContainerLarge: function helperContainerLarge(t) {
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      left: ", ";\n      right: ", ";\n    "])), t.tokenInputPaddingXLarge, t.tokenInputPaddingXLarge);
   }
 });
 export var colorStyles = [{
@@ -100,24 +146,24 @@ export var colorStyles = [{
   return _extends({}, colors, (_extends2 = {}, _extends2[name] = function (t, v) {
     var getVStyle = function getVStyle() {
       if (v === 'error') {
-        return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])), t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
+        return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])), t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
       } else if (v === 'warning') {
-        return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
+        return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
       }
 
       return '';
     };
 
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        color: ", ";\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n\n        ", "\n\n        .", ":hover {\n          color: ", ";\n        }\n      "])), color(t), ColorFunctions.contrast(color(t)), t.tokenBorderWidth, ColorFunctions.darken(color(t), '5%'), color(t), getVStyle(), globalClasses.removeIcon, ColorFunctions.contrast(color(t)));
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        color: ", ";\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n\n        ", "\n\n        .", ":hover {\n          color: ", ";\n        }\n      "])), color(t), ColorFunctions.contrast(color(t)), t.tokenBorderWidth, ColorFunctions.darken(color(t), '5%'), color(t), getVStyle(), globalClasses.removeIcon, ColorFunctions.contrast(color(t)));
   }, _extends2));
 }, {
   defaultDisabled: function defaultDisabled(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])), t.tokenDisabledBg, t.tokenShadowDisabled);
+    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])), t.tokenDisabledBg, t.tokenShadowDisabled);
   },
   defaultDisabledWarning: function defaultDisabledWarning(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
+    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
   },
   defaultDisabledError: function defaultDisabledError(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
+    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
   }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["Token.styles.ts"],"names":["css","memoizeStyle","prefix","ColorFunctions","globalClasses","removeIcon","styles","token","t","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","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":["css","memoizeStyle","prefix","ColorFunctions","tokenSizeMixin","globalClasses","removeIcon","styles","token","t","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","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/components/Token/Token.styles.d.ts

@@ -4,9 +4,24 @@ export declare const globalClasses: {
 };
 export declare const styles: {
     token(t: Theme): string;
+    tokenSmall(t: Theme): string;
+    tokenMedium(t: Theme): string;
+    tokenLarge(t: Theme): string;
+    token2022(t: Theme): string;
+    tokenDefaultIdle2022(t: Theme): string;
+    tokenDefaultIdleHovering2022(t: Theme): string;
+    tokenDefaultActive2022(t: Theme): string;
+    tokenError2022(t: Theme): string;
+    tokenWarning2022(t: Theme): string;
+    tokenDisabled2022(t: Theme): string;
     disabled(t: Theme): string;
     text(t: Theme): string;
     removeIcon(t: Theme): string;
+    helperText(): string;
+    helperContainer(): string;
+    helperContainerSmall(t: Theme): string;
+    helperContainerMedium(t: Theme): string;
+    helperContainerLarge(t: Theme): string;
 };
 export declare const colorStyles: {
     defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;

package/components/Token/TokenView/TokenView.js

@@ -0,0 +1,43 @@
+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 { CommonWrapper } from "../../../internal/CommonWrapper";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { globalClasses, styles } from "../Token.styles";
+export function TokenView(props) {
+  var _cx;
+
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
+      children = props.children,
+      closeButton = props.closeButton,
+      hideCloseButton = props.hideCloseButton,
+      className = props.className,
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var theme = useContext(ThemeContext);
+
+  var getSizeClassName = function getSizeClassName(size) {
+    switch (size) {
+      case 'large':
+        return styles.tokenLarge(theme);
+
+      case 'medium':
+        return styles.tokenMedium(theme);
+
+      case 'small':
+      default:
+        return styles.tokenSmall(theme);
+    }
+  };
+
+  var closeButtonNode = hideCloseButton ? null : /*#__PURE__*/React.createElement("span", {
+    className: cx(styles.removeIcon(theme), globalClasses.removeIcon)
+  }, closeButton);
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(getSizeClassName(size), (_cx = {}, _cx[styles.token(theme)] = true, _cx[styles.token2022(theme)] = isTheme2022(theme), _cx))
+  }), children, closeButtonNode));
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TokenView.tsx"],"names":["React","useContext","CommonWrapper","ThemeContext","cx","isTheme2022","globalClasses","styles","TokenView","props","size","children","closeButton","hideCloseButton","className","rest","theme","getSizeClassName","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","removeIcon","token","token2022"],"mappings":"kPAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;;AAEA,SAASC,aAAT,QAA8B,8BAA9B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,gCAA5B;;;AAGA,SAASC,aAAT,EAAwBC,MAAxB,QAAsC,gBAAtC;;;;;;;;AAQA,OAAO,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AAC/C,oBAAuFA,KAAvF,CAAQC,IAAR,CAAQA,IAAR,4BAAe,OAAf,eAAwBC,QAAxB,GAAuFF,KAAvF,CAAwBE,QAAxB,CAAkCC,WAAlC,GAAuFH,KAAvF,CAAkCG,WAAlC,CAA+CC,eAA/C,GAAuFJ,KAAvF,CAA+CI,eAA/C,CAAgEC,SAAhE,GAAuFL,KAAvF,CAAgEK,SAAhE,CAA8EC,IAA9E,iCAAuFN,KAAvF;AACA,MAAMO,KAAK,GAAGf,UAAU,CAACE,YAAD,CAAxB;AACA,MAAMc,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACP,IAAD,EAAqB;AAC5C,YAAQA,IAAR;AACE,WAAK,OAAL;AACE,eAAOH,MAAM,CAACW,UAAP,CAAkBF,KAAlB,CAAP;AACF,WAAK,QAAL;AACE,eAAOT,MAAM,CAACY,WAAP,CAAmBH,KAAnB,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOT,MAAM,CAACa,UAAP,CAAkBJ,KAAlB,CAAP,CAPJ;;AASD,GAVD;AAWA,MAAMK,eAAe,GAAGR,eAAe,GAAG,IAAH;AACrC,gCAAM,SAAS,EAAET,EAAE,CAACG,MAAM,CAACe,UAAP,CAAkBN,KAAlB,CAAD,EAA2BV,aAAa,CAACgB,UAAzC,CAAnB,IAA0EV,WAA1E,CADF;;;AAIA;AACE,wBAAC,aAAD,EAAmBH,KAAnB;AACE;AACMM,IAAAA,IADN;AAEE,MAAA,SAAS,EAAEX,EAAE,CAACa,gBAAgB,CAACP,IAAD,CAAjB;AACVH,MAAAA,MAAM,CAACgB,KAAP,CAAaP,KAAb,CADU,IACY,IADZ;AAEVT,MAAAA,MAAM,CAACiB,SAAP,CAAiBR,KAAjB,CAFU,IAEgBX,WAAW,CAACW,KAAD,CAF3B,OAFf;;;AAOGL,IAAAA,QAPH;AAQGU,IAAAA,eARH,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  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          [styles.token2022(theme)]: isTheme2022(theme),\n        })}\n      >\n        {children}\n        {closeButtonNode}\n      </div>\n    </CommonWrapper>\n  );\n}\n"]}

package/components/Token/TokenView/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Token/TokenView.js",
+  "module": "TokenView",
+  "types": "../TokenView.d.ts",
+  "sideEffects": false
+}

package/components/Token/TokenView.d.ts

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

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

@@ -0,0 +1,8 @@
+import { LocaleHelper } from "../../../../lib/locale/LocaleHelper";
+import { componentsLocales as en_GB } from "../locales/en";
+import { componentsLocales as ru_RU } from "../locales/ru";
+export * from "../types";
+export var TokenLocaleHelper = new LocaleHelper({
+  ru_RU: ru_RU,
+  en_GB: en_GB
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","TokenLocaleHelper"],"mappings":"AAAA,SAASA,YAAT,QAA6B,kCAA7B;;AAEA,SAASC,iBAAiB,IAAIC,KAA9B,QAA2C,cAA3C;AACA,SAASD,iBAAiB,IAAIE,KAA9B,QAA2C,cAA3C;;;AAGA,cAAc,SAAd;;AAEA,OAAO,IAAMC,iBAAiB,GAAG,IAAIJ,YAAJ,CAA8B;AAC7DG,EAAAA,KAAK,EAALA,KAD6D;AAE7DD,EAAAA,KAAK,EAALA,KAF6D,EAA9B,CAA1B","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/components/Token/locale/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../cjs/components/Token/locale/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/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/components/Token/locale/locales/en/en.js

@@ -0,0 +1,3 @@
+export var componentsLocales = {
+  removeButtonAriaLabel: 'Remove token'
+};

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

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

package/components/Token/locale/locales/en/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../../cjs/components/Token/locale/locales/en.js",
+  "module": "en",
+  "types": "../en.d.ts",
+  "sideEffects": false
+}

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

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

package/components/Token/locale/locales/ru/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../../cjs/components/Token/locale/locales/ru.js",
+  "module": "ru",
+  "types": "../ru.d.ts",
+  "sideEffects": false
+}

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

@@ -0,0 +1,3 @@
+export var componentsLocales = {
+  removeButtonAriaLabel: 'Удалить токен'
+};

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

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

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

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

package/components/Token/locale/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Token/locale/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/Token/locale/types/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../cjs/components/Token/locale/types.js",
+  "module": "types",
+  "types": "../types.d.ts",
+  "sideEffects": false
+}

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

@@ -0,0 +1 @@
+export {};

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

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

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

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

package/components/TokenInput/TextWidthHelper/TextWidthHelper.js

@@ -1,7 +1,9 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
+import { cx } from "../../../lib/theming/Emotion";
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
-import { styles } from "../TokenInput.styles"; // a thin character to preserve some space
+import { TokenView } from "../../Token/TokenView";
+import { styles } from "../../Token/Token.styles"; // a thin character to preserve some space
 // for the caret visibillity in the input
 
 var THIN_SPACE = "\u2009";
@@ -32,11 +34,26 @@ export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
 
   var _proto = TextWidthHelper.prototype;
 
+  _proto.getSizeClassName = function getSizeClassName(size) {
+    switch (size) {
+      case 'large':
+        return styles.helperContainerLarge(this.props.theme);
+
+      case 'medium':
+        return styles.helperContainerMedium(this.props.theme);
+
+      case 'small':
+      default:
+        return styles.helperContainerSmall(this.props.theme);
+    }
+  };
+
   _proto.render = function render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.helperContainer(this.props.theme)
+    return /*#__PURE__*/React.createElement(TokenView, {
+      size: this.props.size,
+      className: cx(styles.helperContainer(), this.getSizeClassName(this.props.size))
     }, /*#__PURE__*/React.createElement("div", {
-      className: this.props.classHelp,
+      className: styles.helperText(),
       ref: this.elementRef
     }, this.props.text || THIN_SPACE));
   };

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

@@ -1 +1 @@
-{"version":3,"sources":["TextWidthHelper.tsx"],"names":["React","getDOMRect","styles","THIN_SPACE","TextWidthHelper","element","elementRef","node","render","helperContainer","props","theme","classHelp","text","getTextWidth","width","getTextHeight","height","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,UAAT,QAA2B,0BAA3B;;AAEA,SAASC,MAAT,QAAuB,qBAAvB;;AAEA;AACA;AACA,IAAMC,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA;AACA,WAAaC,eAAb;AACUC,IAAAA,OADV,GAC2C,IAD3C;;;;;;;;;;;;;;;;;;;;AAqBUC,IAAAA,UArBV,GAqBuB,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,EArBvB,6DAGSC,MAHT,GAGE,kBAAgB,CACd,oBACE,6BAAK,SAAS,EAAEN,MAAM,CAACO,eAAP,CAAuB,KAAKC,KAAL,CAAWC,KAAlC,CAAhB,iBACE,6BAAK,SAAS,EAAE,KAAKD,KAAL,CAAWE,SAA3B,EAAsC,GAAG,EAAE,KAAKN,UAAhD,IACG,KAAKI,KAAL,CAAWG,IAAX,IAAmBV,UADtB,CADF,CADF,CAOD,CAXH,QAaSW,YAbT,GAaE,wBAA8B,CAC5B,OAAOb,UAAU,CAAC,KAAKI,OAAN,CAAV,CAAyBU,KAAhC,CACD,CAfH,QAiBSC,aAjBT,GAiBE,yBAA+B,CAC7B,OAAOf,UAAU,CAAC,KAAKI,OAAN,CAAV,CAAyBY,MAAhC,CACD,CAnBH,0BAAqCjB,KAAK,CAACkB,SAA3C","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":["React","cx","getDOMRect","TokenView","styles","THIN_SPACE","TextWidthHelper","element","elementRef","node","getSizeClassName","size","helperContainerLarge","props","theme","helperContainerMedium","helperContainerSmall","render","helperContainer","helperText","text","getTextWidth","width","getTextHeight","height","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,UAAT,QAA2B,0BAA3B;AACA,SAASC,SAAT,QAA0B,oBAA1B;;AAEA,SAASC,MAAT,QAAuB,uBAAvB;;AAEA;AACA;AACA,IAAMC,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA;AACA,WAAaC,eAAb;AACUC,IAAAA,OADV,GAC2C,IAD3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCUC,IAAAA,UApCV,GAoCuB,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,EApCvB,6DAGUC,gBAHV,GAGE,0BAAyBC,IAAzB,EAA0C,CACxC,QAAQA,IAAR,GACE,KAAK,OAAL,CACE,OAAOP,MAAM,CAACQ,oBAAP,CAA4B,KAAKC,KAAL,CAAWC,KAAvC,CAAP,CACF,KAAK,QAAL,CACE,OAAOV,MAAM,CAACW,qBAAP,CAA6B,KAAKF,KAAL,CAAWC,KAAxC,CAAP,CACF,KAAK,OAAL,CACA,QACE,OAAOV,MAAM,CAACY,oBAAP,CAA4B,KAAKH,KAAL,CAAWC,KAAvC,CAAP,CAPJ,CASD,CAbH,QAeSG,MAfT,GAeE,kBAAgB,CACd,oBACE,oBAAC,SAAD,IACE,IAAI,EAAE,KAAKJ,KAAL,CAAWF,IADnB,EAEE,SAAS,EAAEV,EAAE,CAACG,MAAM,CAACc,eAAP,EAAD,EAA2B,KAAKR,gBAAL,CAAsB,KAAKG,KAAL,CAAWF,IAAjC,CAA3B,CAFf,iBAIE,6BAAK,SAAS,EAAEP,MAAM,CAACe,UAAP,EAAhB,EAAqC,GAAG,EAAE,KAAKX,UAA/C,IACG,KAAKK,KAAL,CAAWO,IAAX,IAAmBf,UADtB,CAJF,CADF,CAUD,CA1BH,QA4BSgB,YA5BT,GA4BE,wBAA8B,CAC5B,OAAOnB,UAAU,CAAC,KAAKK,OAAN,CAAV,CAAyBe,KAAhC,CACD,CA9BH,QAgCSC,aAhCT,GAgCE,yBAA+B,CAC7B,OAAOrB,UAAU,CAAC,KAAKK,OAAN,CAAV,CAAyBiB,MAAhC,CACD,CAlCH,0BAAqCxB,KAAK,CAACyB,SAA3C","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/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;