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

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

@@ -1,212 +1,174 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject10() {
-  var data = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "]);
+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;
 
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: ", "};\n\n        & ", " {\n          fill: ", ";\n          opacity: 1;\n        }\n      "]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _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      "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _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    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _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-word;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
+import { memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
-var styles = {
-  token: function token(t) {
-    return css(_templateObject(), t.tokenBorderRadius, t.tokenPaddingY, t.tokenPaddingX, t.tokenLineHeight, t.tokenFontSize, t.tokenMarginY, t.tokenMarginX);
-  },
-  disabled: function disabled(t) {
-    return css(_templateObject2(), t.tokenPaddingYDisabled, t.tokenPaddingXDisabled, t.tokenMarginYDisabled, t.tokenMarginXDisabled, t.tokenTextColorDisabled);
-  },
-  text: function text(t) {
-    return css(_templateObject3(), t.tokenLegacyTextShift);
-  },
-  removeIcon: function removeIcon(t) {
-    return css(_templateObject4(), t.tokenRemoveIconSize, t.tokenRemoveIconSize, t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX, t.tokenRemoveIconBoxSizing, t.tokenRemoveIconGap);
-  }
+import { tokenSizeMixin } from "../Token.mixins";
+export var globalClasses = prefix('token')({
+  removeIcon: 'remove-icon'
+});
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    token: function token(t) {
+      return emotion.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 emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), tokenSizeMixin(emotion)(t.tokenPaddingYSmall, t.tokenPaddingXSmall, t.tokenLineHeightSmall, t.tokenFontSizeSmall, t.tokenMarginYSmall, t.tokenMarginXSmall));
+    },
+    tokenMedium: function tokenMedium(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), tokenSizeMixin(emotion)(t.tokenPaddingYMedium, t.tokenPaddingXMedium, t.tokenLineHeightMedium, t.tokenFontSizeMedium, t.tokenMarginYMedium, t.tokenMarginXMedium));
+    },
+    tokenLarge: function tokenLarge(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), tokenSizeMixin(emotion)(t.tokenPaddingYLarge, t.tokenPaddingXLarge, t.tokenLineHeightLarge, t.tokenFontSizeLarge, t.tokenMarginYLarge, t.tokenMarginXLarge));
+    },
+    token2022: function token2022(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        border: solid ", " transparent;\n      "])), t.tokenBorderWidth);
+    },
+    tokenDefaultIdle2022: function tokenDefaultIdle2022(t) {
+      return emotion.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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        padding-bottom: ", ";\n      "])), t.tokenLegacyTextShift);
+    },
+    removeIcon: function removeIcon(t) {
+      return emotion.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 emotion.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 emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        position: absolute;\n        visibility: hidden;\n      "])));
+    },
+    helperContainerSmall: function helperContainerSmall(t) {
+      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n        left: ", ";\n        right: ", ";\n      "])), t.tokenInputPaddingXSmall, t.tokenInputPaddingXSmall);
+    },
+    helperContainerMedium: function helperContainerMedium(t) {
+      return emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n        left: ", ";\n        right: ", ";\n      "])), t.tokenInputPaddingXMedium, t.tokenInputPaddingXMedium);
+    },
+    helperContainerLarge: function helperContainerLarge(t) {
+      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n        left: ", ";\n        right: ", ";\n      "])), t.tokenInputPaddingXLarge, t.tokenInputPaddingXLarge);
+    }
+  });
 };
-export var jsStyles = memoizeStyle(styles);
-export var jsTokenColors = [{
-  name: 'defaultIdle',
-  color: function color(t) {
-    return t.tokenDefaultIdle;
-  }
-}, {
-  name: 'defaultActive',
-  color: function color(t) {
-    return t.tokenDefaultActive;
-  }
-}, {
-  name: 'grayIdle',
-  color: function color(t) {
-    return t.tokenGrayIdle;
-  }
-}, {
-  name: 'grayActive',
-  color: function color(t) {
-    return t.tokenGrayActive;
-  }
-}, {
-  name: 'blueIdle',
-  color: function color(t) {
-    return t.tokenBlueIdle;
-  }
-}, {
-  name: 'blueActive',
-  color: function color(t) {
-    return t.tokenBlueActive;
-  }
-}, {
-  name: 'greenIdle',
-  color: function color(t) {
-    return t.tokenGreenIdle;
-  }
-}, {
-  name: 'greenActive',
-  color: function color(t) {
-    return t.tokenGreenActive;
-  }
-}, {
-  name: 'yellowIdle',
-  color: function color(t) {
-    return t.tokenYellowIdle;
-  }
-}, {
-  name: 'yellowActive',
-  color: function color(t) {
-    return t.tokenYellowActive;
-  }
-}, {
-  name: 'redIdle',
-  color: function color(t) {
-    return t.tokenRedIdle;
-  }
-}, {
-  name: 'redActive',
-  color: function color(t) {
-    return t.tokenRedActive;
-  }
-}, {
-  name: 'white',
-  color: function color(t) {
-    return t.tokenWhite;
-  }
-}, {
-  name: 'black',
-  color: function color(t) {
-    return t.tokenBlack;
-  }
-}].reduce(function (colors, _ref) {
-  var _extends2;
-
-  var name = _ref.name,
-      color = _ref.color;
-  return _extends({}, colors, (_extends2 = {}, _extends2[name] = function (t, v) {
-    var warning = css(_templateObject5(), t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
-    var error = css(_templateObject6(), t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
-    var vStyle = v === 'error' ? error : v === 'warning' ? warning : '';
-    return css(_templateObject7(), color(t), ColorFunctions.contrast(color(t)), t.tokenBorderWidth, ColorFunctions.darken(color(t), '5%'), color(t), vStyle, cssName(jsStyles.removeIcon(t)), ColorFunctions.contrast(color(t)));
-  }, _extends2));
-}, {
-  defaultDisabled: function defaultDisabled(t) {
-    return css(_templateObject8(), t.tokenDisabledBg, t.tokenShadowDisabled, cssName(jsStyles.removeIcon(t)), t.tokenTextColorDisabled);
-  },
-  defaultDisabledWarning: function defaultDisabledWarning(t) {
-    return css(_templateObject9(), t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
-  },
-  defaultDisabledError: function defaultDisabledError(t) {
-    return css(_templateObject10(), t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
-  }
-});
+export var getColorStyles = function getColorStyles(emotion) {
+  var tokenColors = [{
+    name: 'defaultIdle',
+    color: function color(t) {
+      return t.tokenDefaultIdle;
+    }
+  }, {
+    name: 'defaultActive',
+    color: function color(t) {
+      return t.tokenDefaultActive;
+    }
+  }, {
+    name: 'grayIdle',
+    color: function color(t) {
+      return t.tokenGrayIdle;
+    }
+  }, {
+    name: 'grayActive',
+    color: function color(t) {
+      return t.tokenGrayActive;
+    }
+  }, {
+    name: 'blueIdle',
+    color: function color(t) {
+      return t.tokenBlueIdle;
+    }
+  }, {
+    name: 'blueActive',
+    color: function color(t) {
+      return t.tokenBlueActive;
+    }
+  }, {
+    name: 'greenIdle',
+    color: function color(t) {
+      return t.tokenGreenIdle;
+    }
+  }, {
+    name: 'greenActive',
+    color: function color(t) {
+      return t.tokenGreenActive;
+    }
+  }, {
+    name: 'yellowIdle',
+    color: function color(t) {
+      return t.tokenYellowIdle;
+    }
+  }, {
+    name: 'yellowActive',
+    color: function color(t) {
+      return t.tokenYellowActive;
+    }
+  }, {
+    name: 'redIdle',
+    color: function color(t) {
+      return t.tokenRedIdle;
+    }
+  }, {
+    name: 'redActive',
+    color: function color(t) {
+      return t.tokenRedActive;
+    }
+  }, {
+    name: 'white',
+    color: function color(t) {
+      return t.tokenWhite;
+    }
+  }, {
+    name: 'black',
+    color: function color(t) {
+      return t.tokenBlack;
+    }
+  }].reduce(function (colors, _ref) {
+    var _extends2;
+
+    var name = _ref.name,
+        color = _ref.color;
+    return _extends({}, colors, (_extends2 = {}, _extends2[name] = function (t, v) {
+      var getVStyle = function getVStyle() {
+        if (v === 'error') {
+          return emotion.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 emotion.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
+        }
+
+        return '';
+      };
+
+      return emotion.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 emotion.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])), t.tokenDisabledBg, t.tokenShadowDisabled);
+    },
+    defaultDisabledWarning: function defaultDisabledWarning(t) {
+      return emotion.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 emotion.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
+    }
+  });
+  return tokenColors;
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["Token.styles.ts"],"names":["css","cssName","memoizeStyle","ColorFunctions","styles","token","t","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","disabled","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","text","tokenLegacyTextShift","removeIcon","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","jsStyles","jsTokenColors","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","warning","tokenOutlineWidth","tokenBorderColorWarning","error","tokenBorderColorError","vStyle","contrast","tokenBorderWidth","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"ggGAAA,SAASA,GAAT,EAAcC,OAAd,EAAuBC,YAAvB,QAA2C,2BAA3C;;AAEA,OAAO,KAAKC,cAAZ,MAAgC,iCAAhC;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,KADa,iBACPC,CADO,EACG;AACd,WAAON,GAAP;;;AAGmBM,IAAAA,CAAC,CAACC,iBAHrB;AAIaD,IAAAA,CAAC,CAACE,aAJf,EAIgCF,CAAC,CAACG,aAJlC;AAKiBH,IAAAA,CAAC,CAACI,eALnB;AAMeJ,IAAAA,CAAC,CAACK,aANjB;AAOYL,IAAAA,CAAC,CAACM,YAPd,EAO8BN,CAAC,CAACO,YAPhC;;;;;;;;;AAgBD,GAlBY;;AAoBbC,EAAAA,QApBa,oBAoBJR,CApBI,EAoBM;AACjB,WAAON,GAAP;AACaM,IAAAA,CAAC,CAACS,qBADf,EACwCT,CAAC,CAACU,qBAD1C;AAEYV,IAAAA,CAAC,CAACW,oBAFd,EAEsCX,CAAC,CAACY,oBAFxC;;;AAKWZ,IAAAA,CAAC,CAACa,sBALb;;AAOD,GA5BY;;AA8BbC,EAAAA,IA9Ba,gBA8BRd,CA9BQ,EA8BE;AACb,WAAON,GAAP;;AAEoBM,IAAAA,CAAC,CAACe,oBAFtB;;AAID,GAnCY;;AAqCbC,EAAAA,UArCa,sBAqCFhB,CArCE,EAqCQ;AACnB,WAAON,GAAP;AACYM,IAAAA,CAAC,CAACiB,mBADd;AAEWjB,IAAAA,CAAC,CAACiB,mBAFb;;AAIajB,IAAAA,CAAC,CAACkB,uBAJf,EAI0ClB,CAAC,CAACmB,uBAJ5C;AAKgBnB,IAAAA,CAAC,CAACoB,wBALlB;AAMiBpB,IAAAA,CAAC,CAACqB,kBANnB;;;;;;;;;;AAgBD,GAtDY,EAAf;;;;;;;;;;;;;;;;;;;;;;;AA6EA,OAAO,IAAMC,QAAQ,GAAG1B,YAAY,CAACE,MAAD,CAA7B;;AAEP,OAAO,IAAMyB,aAAa,GAAG;AAC3B,EAAEC,IAAI,EAAE,aAAR,EAAuBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAAC0B,gBAAhB,EAA9B,EAD2B;AAE3B,EAAEF,IAAI,EAAE,eAAR,EAAyBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAAC2B,kBAAhB,EAAhC,EAF2B;AAG3B,EAAEH,IAAI,EAAE,UAAR,EAAoBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAAC4B,aAAhB,EAA3B,EAH2B;AAI3B,EAAEJ,IAAI,EAAE,YAAR,EAAsBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAAC6B,eAAhB,EAA7B,EAJ2B;AAK3B,EAAEL,IAAI,EAAE,UAAR,EAAoBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAAC8B,aAAhB,EAA3B,EAL2B;AAM3B,EAAEN,IAAI,EAAE,YAAR,EAAsBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAAC+B,eAAhB,EAA7B,EAN2B;AAO3B,EAAEP,IAAI,EAAE,WAAR,EAAqBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAACgC,cAAhB,EAA5B,EAP2B;AAQ3B,EAAER,IAAI,EAAE,aAAR,EAAuBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAACiC,gBAAhB,EAA9B,EAR2B;AAS3B,EAAET,IAAI,EAAE,YAAR,EAAsBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAACkC,eAAhB,EAA7B,EAT2B;AAU3B,EAAEV,IAAI,EAAE,cAAR,EAAwBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAACmC,iBAAhB,EAA/B,EAV2B;AAW3B,EAAEX,IAAI,EAAE,SAAR,EAAmBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAACoC,YAAhB,EAA1B,EAX2B;AAY3B,EAAEZ,IAAI,EAAE,WAAR,EAAqBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAACqC,cAAhB,EAA5B,EAZ2B;AAa3B,EAAEb,IAAI,EAAE,OAAR,EAAiBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAACsC,UAAhB,EAAxB,EAb2B;AAc3B,EAAEd,IAAI,EAAE,OAAR,EAAiBC,KAAK,EAAE,eAACzB,CAAD,UAAcA,CAAC,CAACuC,UAAhB,EAAxB,EAd2B;AAe3BC,MAf2B;AAgB3B,UAACC,MAAD,2BAAwBjB,IAAxB,QAAwBA,IAAxB,CAA8BC,KAA9B,QAA8BA,KAA9B;AACKgB,EAAAA,MADL;AAEGjB,EAAAA,IAFH,cAESxB,CAFT,EAEmB0C,CAFnB,EAE2C;AACvC,QAAMC,OAAO,GAAGjD,GAAH;AACSM,IAAAA,CAAC,CAAC4C,iBADX,EACgC5C,CAAC,CAAC6C,uBADlC,EAC8EpB,KAAK,CAACzB,CAAD,CADnF,CAAb;;AAGA,QAAM8C,KAAK,GAAGpD,GAAH;AACWM,IAAAA,CAAC,CAAC4C,iBADb,EACkC5C,CAAC,CAAC+C,qBADpC,EAC8EtB,KAAK,CAACzB,CAAD,CADnF,CAAX;;AAGA,QAAMgD,MAAM,GAAGN,CAAC,KAAK,OAAN,GAAgBI,KAAhB,GAAwBJ,CAAC,KAAK,SAAN,GAAkBC,OAAlB,GAA4B,EAAnE;;AAEA,WAAOjD,GAAP;AACsB+B,IAAAA,KAAK,CAACzB,CAAD,CAD3B;AAEWH,IAAAA,cAAc,CAACoD,QAAf,CAAwBxB,KAAK,CAACzB,CAAD,CAA7B,CAFX;AAGsBA,IAAAA,CAAC,CAACkD,gBAHxB,EAG4CrD,cAAc,CAACsD,MAAf,CAAsB1B,KAAK,CAACzB,CAAD,CAA3B,EAAgC,IAAhC,CAH5C,EAGsGyB,KAAK,CAACzB,CAAD,CAH3G;;AAKIgD,IAAAA,MALJ;;AAOMrD,IAAAA,OAAO,CAAC2B,QAAQ,CAACN,UAAT,CAAoBhB,CAApB,CAAD,CAPb;AAQaH,IAAAA,cAAc,CAACoD,QAAf,CAAwBxB,KAAK,CAACzB,CAAD,CAA7B,CARb;;;AAWD,GAtBH,eAhB2B;;AAwC3B;AACEoD,EAAAA,eADF,2BACkBpD,CADlB,EAC4B;AACxB,WAAON,GAAP;AACsBM,IAAAA,CAAC,CAACqD,eADxB;AAEgBrD,IAAAA,CAAC,CAACsD,mBAFlB;;AAIM3D,IAAAA,OAAO,CAAC2B,QAAQ,CAACN,UAAT,CAAoBhB,CAApB,CAAD,CAJb;AAKYA,IAAAA,CAAC,CAACa,sBALd;;;;AASD,GAXH;AAYE0C,EAAAA,sBAZF,kCAYyBvD,CAZzB,EAYmC;AAC/B,WAAON,GAAP;AACsBM,IAAAA,CAAC,CAAC4C,iBADxB,EAC6C5C,CAAC,CAAC6C,uBAD/C,EAC2F7C,CAAC,CAACqD,eAD7F;;AAGD,GAhBH;AAiBEG,EAAAA,oBAjBF,gCAiBuBxD,CAjBvB,EAiBiC;AAC7B,WAAON,GAAP;AACsBM,IAAAA,CAAC,CAAC4C,iBADxB,EAC6C5C,CAAC,CAAC+C,qBAD/C,EACyF/C,CAAC,CAACqD,eAD3F;;AAGD,GArBH,EAxC2B,CAAtB","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\r\n\r\nconst styles = {\r\n  token(t: Theme) {\r\n    return css`\r\n      display: inline-flex;\r\n      align-items: center;\r\n      border-radius: ${t.tokenBorderRadius};\r\n      padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\r\n      line-height: ${t.tokenLineHeight};\r\n      font-size: ${t.tokenFontSize};\r\n      margin: ${t.tokenMarginY} ${t.tokenMarginX};\r\n      min-width: 0;\r\n      word-break: break-word;\r\n      user-select: none;\r\n\r\n      &:hover {\r\n        cursor: pointer;\r\n      }\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\r\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\r\n      user-select: text;\r\n      cursor: text;\r\n      color: ${t.tokenTextColorDisabled};\r\n    `;\r\n  },\r\n\r\n  text(t: Theme) {\r\n    return css`\r\n      display: inline-block;\r\n      padding-bottom: ${t.tokenLegacyTextShift};\r\n    `;\r\n  },\r\n\r\n  removeIcon(t: Theme) {\r\n    return css`\r\n      height: ${t.tokenRemoveIconSize};\r\n      width: ${t.tokenRemoveIconSize};\r\n      flex-shrink: 0;\r\n      padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\r\n      box-sizing: ${t.tokenRemoveIconBoxSizing};\r\n      margin-left: ${t.tokenRemoveIconGap};\r\n      transition: none;\r\n      fill: currentColor;\r\n      opacity: 0.5;\r\n      line-height: 0;\r\n\r\n      &:hover {\r\n        opacity: 1;\r\n      }\r\n    `;\r\n  },\r\n};\r\n\r\ninterface TokenColors {\r\n  defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  defaultDisabled: (t: Theme) => string;\r\n  defaultDisabledWarning: (t: Theme) => string;\r\n  defaultDisabledError: (t: Theme) => string;\r\n  grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  redActive: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  white: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n  black: (t: Theme, v: 'error' | 'warning' | null) => string;\r\n}\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n\r\nexport const jsTokenColors = [\r\n  { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\r\n  { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\r\n  { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\r\n  { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\r\n  { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\r\n  { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\r\n  { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\r\n  { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\r\n  { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\r\n  { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\r\n  { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\r\n  { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\r\n  { name: 'white', color: (t: Theme) => t.tokenWhite },\r\n  { name: 'black', color: (t: Theme) => t.tokenBlack },\r\n].reduce(\r\n  (colors: TokenColors, { name, color }) => ({\r\n    ...colors,\r\n    [name](t: Theme, v: 'error' | 'warning') {\r\n      const warning = css`\r\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\r\n      `;\r\n      const error = css`\r\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\r\n      `;\r\n      const vStyle = v === 'error' ? error : v === 'warning' ? warning : '';\r\n\r\n      return css`\r\n        background-color: ${color(t)};\r\n        color: ${ColorFunctions.contrast(color(t))};\r\n        box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\r\n\r\n        ${vStyle}\r\n\r\n        & ${cssName(jsStyles.removeIcon(t))}:hover {\r\n          color: ${ColorFunctions.contrast(color(t))};\r\n        }\r\n      `;\r\n    },\r\n  }),\r\n  {\r\n    defaultDisabled(t: Theme) {\r\n      return css`\r\n        background-color: ${t.tokenDisabledBg};\r\n        box-shadow: ${t.tokenShadowDisabled}};\r\n\r\n        & ${cssName(jsStyles.removeIcon(t))} {\r\n          fill: ${t.tokenTextColorDisabled};\r\n          opacity: 1;\r\n        }\r\n      `;\r\n    },\r\n    defaultDisabledWarning(t: Theme) {\r\n      return css`\r\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\r\n      `;\r\n    },\r\n    defaultDisabledError(t: Theme) {\r\n      return css`\r\n        box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\r\n      `;\r\n    },\r\n  } as TokenColors,\r\n);\r\n"]}
+{"version":3,"sources":["Token.styles.ts"],"names":["memoizeStyle","prefix","ColorFunctions","tokenSizeMixin","globalClasses","removeIcon","getStyles","emotion","token","t","css","tokenBorderRadius","tokenSmall","tokenPaddingYSmall","tokenPaddingXSmall","tokenLineHeightSmall","tokenFontSizeSmall","tokenMarginYSmall","tokenMarginXSmall","tokenMedium","tokenPaddingYMedium","tokenPaddingXMedium","tokenLineHeightMedium","tokenFontSizeMedium","tokenMarginYMedium","tokenMarginXMedium","tokenLarge","tokenPaddingYLarge","tokenPaddingXLarge","tokenLineHeightLarge","tokenFontSizeLarge","tokenMarginYLarge","tokenMarginXLarge","token2022","tokenBorderWidth","tokenDefaultIdle2022","tokenDefaultIdleColor","tokenDefaultIdleBg","tokenDefaultIdleBorderColor","tokenDefaultIdleHovering2022","tokenDefaultIdleColorHover","tokenDefaultIdleBgHover","tokenDefaultIdleBorderColorHover","tokenDefaultActive2022","tokenDefaultActiveColor","tokenDefaultActiveBg","tokenDefaultActiveBorderColor","tokenError2022","tokenBorderColorError","tokenOutlineWidth","tokenWarning2022","tokenBorderColorWarning","tokenDisabled2022","tokenTextColorDisabled","tokenBorderColorDisabled","disabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","helperText","helperContainer","helperContainerSmall","tokenInputPaddingXSmall","helperContainerMedium","tokenInputPaddingXMedium","helperContainerLarge","tokenInputPaddingXLarge","getColorStyles","tokenColors","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":";;AAEA,SAASA,YAAT,EAAuBC,MAAvB,QAAqC,2BAArC;;AAEA,OAAO,KAAKC,cAAZ,MAAgC,iCAAhC;;AAEA,SAASC,cAAT,QAA+B,gBAA/B;;AAEA,OAAO,IAAMC,aAAa,GAAGH,MAAM,CAAC,OAAD,CAAN,CAAgB;AAC3CI,EAAAA,UAAU,EAAE,aAD+B,EAAhB,CAAtB;;;AAIP,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBP,IAAAA,YAAY,CAAC;AACXQ,MAAAA,KADW,iBACLC,CADK,EACK;AACd,eAAOF,OAAO,CAACG,GAAf;;;AAGmBD,QAAAA,CAAC,CAACE,iBAHrB;;;;;;;;;AAYD,OAdU;;AAgBXC,MAAAA,UAhBW,sBAgBAH,CAhBA,EAgBU;AACnB,eAAOF,OAAO,CAACG,GAAf;AACIP,QAAAA,cAAc,CAACI,OAAD,CAAd;AACAE,QAAAA,CAAC,CAACI,kBADF;AAEAJ,QAAAA,CAAC,CAACK,kBAFF;AAGAL,QAAAA,CAAC,CAACM,oBAHF;AAIAN,QAAAA,CAAC,CAACO,kBAJF;AAKAP,QAAAA,CAAC,CAACQ,iBALF;AAMAR,QAAAA,CAAC,CAACS,iBANF,CADJ;;;AAUD,OA3BU;;AA6BXC,MAAAA,WA7BW,uBA6BCV,CA7BD,EA6BW;AACpB,eAAOF,OAAO,CAACG,GAAf;AACIP,QAAAA,cAAc,CAACI,OAAD,CAAd;AACAE,QAAAA,CAAC,CAACW,mBADF;AAEAX,QAAAA,CAAC,CAACY,mBAFF;AAGAZ,QAAAA,CAAC,CAACa,qBAHF;AAIAb,QAAAA,CAAC,CAACc,mBAJF;AAKAd,QAAAA,CAAC,CAACe,kBALF;AAMAf,QAAAA,CAAC,CAACgB,kBANF,CADJ;;;AAUD,OAxCU;;AA0CXC,MAAAA,UA1CW,sBA0CAjB,CA1CA,EA0CU;AACnB,eAAOF,OAAO,CAACG,GAAf;AACIP,QAAAA,cAAc,CAACI,OAAD,CAAd;AACAE,QAAAA,CAAC,CAACkB,kBADF;AAEAlB,QAAAA,CAAC,CAACmB,kBAFF;AAGAnB,QAAAA,CAAC,CAACoB,oBAHF;AAIApB,QAAAA,CAAC,CAACqB,kBAJF;AAKArB,QAAAA,CAAC,CAACsB,iBALF;AAMAtB,QAAAA,CAAC,CAACuB,iBANF,CADJ;;;AAUD,OArDU;;AAuDXC,MAAAA,SAvDW,qBAuDDxB,CAvDC,EAuDS;AAClB,eAAOF,OAAO,CAACG,GAAf;AACkBD,QAAAA,CAAC,CAACyB,gBADpB;;AAGD,OA3DU;;AA6DXC,MAAAA,oBA7DW,gCA6DU1B,CA7DV,EA6DoB;AAC7B,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAAC2B,qBADb;AAEgB3B,QAAAA,CAAC,CAAC4B,kBAFlB;AAGkB5B,QAAAA,CAAC,CAAC6B,2BAHpB;;;AAMD,OApEU;;AAsEXC,MAAAA,4BAtEW,wCAsEkB9B,CAtElB,EAsE4B;AACrC,eAAOF,OAAO,CAACG,GAAf;;AAEaD,QAAAA,CAAC,CAAC+B,0BAFf;AAGkB/B,QAAAA,CAAC,CAACgC,uBAHpB;AAIoBhC,QAAAA,CAAC,CAACyB,gBAJtB,EAI0CzB,CAAC,CAACiC,gCAJ5C;;;AAOD,OA9EU;;AAgFXC,MAAAA,sBAhFW,kCAgFYlC,CAhFZ,EAgFsB;AAC/B,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACmC,uBADb;AAEgBnC,QAAAA,CAAC,CAACoC,oBAFlB;AAGkBpC,QAAAA,CAAC,CAACyB,gBAHpB,EAGwCzB,CAAC,CAACqC,6BAH1C;;AAKD,OAtFU;;AAwFXC,MAAAA,cAxFW,0BAwFItC,CAxFJ,EAwFc;AACvB,eAAOF,OAAO,CAACG,GAAf;AACkBD,QAAAA,CAAC,CAACyB,gBADpB,EACwCzB,CAAC,CAACuC,qBAD1C;AAEsBvC,QAAAA,CAAC,CAACwC,iBAFxB,EAE6CxC,CAAC,CAACuC,qBAF/C;;AAID,OA7FU;;AA+FXE,MAAAA,gBA/FW,4BA+FMzC,CA/FN,EA+FgB;AACzB,eAAOF,OAAO,CAACG,GAAf;AACkBD,QAAAA,CAAC,CAACyB,gBADpB,EACwCzB,CAAC,CAAC0C,uBAD1C;AAEsB1C,QAAAA,CAAC,CAACwC,iBAFxB,EAE6CxC,CAAC,CAAC0C,uBAF/C;;AAID,OApGU;;AAsGXC,MAAAA,iBAtGW,6BAsGO3C,CAtGP,EAsGiB;AAC1B,eAAOF,OAAO,CAACG,GAAf;;;AAGWD,QAAAA,CAAC,CAAC4C,sBAHb;;AAKsB5C,QAAAA,CAAC,CAAC6C,wBALxB;;AAOKlD,QAAAA,aAAa,CAACC,UAPnB;;;;AAWD,OAlHU;;AAoHXkD,MAAAA,QApHW,oBAoHF9C,CApHE,EAoHQ;AACjB,eAAOF,OAAO,CAACG,GAAf;;;AAGWD,QAAAA,CAAC,CAAC4C,sBAHb;;;AAMKjD,QAAAA,aAAa,CAACC,UANnB;;;;AAUD,OA/HU;;AAiIXmD,MAAAA,IAjIW,gBAiIN/C,CAjIM,EAiII;AACb,eAAOF,OAAO,CAACG,GAAf;;AAEoBD,QAAAA,CAAC,CAACgD,oBAFtB;;AAID,OAtIU;;AAwIXpD,MAAAA,UAxIW,sBAwIAI,CAxIA,EAwIU;AACnB,eAAOF,OAAO,CAACG,GAAf;AACYD,QAAAA,CAAC,CAACiD,mBADd;AAEWjD,QAAAA,CAAC,CAACiD,mBAFb;;AAIajD,QAAAA,CAAC,CAACkD,uBAJf,EAI0ClD,CAAC,CAACmD,uBAJ5C;AAKgBnD,QAAAA,CAAC,CAACoD,wBALlB;AAMiBpD,QAAAA,CAAC,CAACqD,kBANnB;;;;;;;;;;;AAiBD,OA1JU;;AA4JXC,MAAAA,UA5JW,wBA4JE;AACX,eAAOxD,OAAO,CAACG,GAAf;;;;;;;;AAQD,OArKU;AAsKXsD,MAAAA,eAtKW,6BAsKO;AAChB,eAAOzD,OAAO,CAACG,GAAf;;;;;AAKD,OA5KU;AA6KXuD,MAAAA,oBA7KW,gCA6KUxD,CA7KV,EA6KoB;AAC7B,eAAOF,OAAO,CAACG,GAAf;AACUD,QAAAA,CAAC,CAACyD,uBADZ;AAEWzD,QAAAA,CAAC,CAACyD,uBAFb;;AAID,OAlLU;AAmLXC,MAAAA,qBAnLW,iCAmLW1D,CAnLX,EAmLqB;AAC9B,eAAOF,OAAO,CAACG,GAAf;AACUD,QAAAA,CAAC,CAAC2D,wBADZ;AAEW3D,QAAAA,CAAC,CAAC2D,wBAFb;;AAID,OAxLU;AAyLXC,MAAAA,oBAzLW,gCAyLU5D,CAzLV,EAyLoB;AAC7B,eAAOF,OAAO,CAACG,GAAf;AACUD,QAAAA,CAAC,CAAC6D,uBADZ;AAEW7D,QAAAA,CAAC,CAAC6D,uBAFb;;AAID,OA9LU,EAAD,CADW,GAAlB;;;;;;;;;;;;;;;;;;;;;;;AAsNP,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAAChE,OAAD,EAAsB;AAClD,MAAMiE,WAAW,GAAG;AAClB,IAAEC,IAAI,EAAE,aAAR,EAAuBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAACkE,gBAAhB,EAA9B,EADkB;AAElB,IAAEF,IAAI,EAAE,eAAR,EAAyBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAACmE,kBAAhB,EAAhC,EAFkB;AAGlB,IAAEH,IAAI,EAAE,UAAR,EAAoBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAACoE,aAAhB,EAA3B,EAHkB;AAIlB,IAAEJ,IAAI,EAAE,YAAR,EAAsBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAACqE,eAAhB,EAA7B,EAJkB;AAKlB,IAAEL,IAAI,EAAE,UAAR,EAAoBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAACsE,aAAhB,EAA3B,EALkB;AAMlB,IAAEN,IAAI,EAAE,YAAR,EAAsBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAACuE,eAAhB,EAA7B,EANkB;AAOlB,IAAEP,IAAI,EAAE,WAAR,EAAqBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAACwE,cAAhB,EAA5B,EAPkB;AAQlB,IAAER,IAAI,EAAE,aAAR,EAAuBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAACyE,gBAAhB,EAA9B,EARkB;AASlB,IAAET,IAAI,EAAE,YAAR,EAAsBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAAC0E,eAAhB,EAA7B,EATkB;AAUlB,IAAEV,IAAI,EAAE,cAAR,EAAwBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAAC2E,iBAAhB,EAA/B,EAVkB;AAWlB,IAAEX,IAAI,EAAE,SAAR,EAAmBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAAC4E,YAAhB,EAA1B,EAXkB;AAYlB,IAAEZ,IAAI,EAAE,WAAR,EAAqBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAAC6E,cAAhB,EAA5B,EAZkB;AAalB,IAAEb,IAAI,EAAE,OAAR,EAAiBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAAC8E,UAAhB,EAAxB,EAbkB;AAclB,IAAEd,IAAI,EAAE,OAAR,EAAiBC,KAAK,EAAE,eAACjE,CAAD,UAAcA,CAAC,CAAC+E,UAAhB,EAAxB,EAdkB;AAelBC,EAAAA,MAfkB;AAgBlB,YAACC,MAAD,2BAAwBjB,IAAxB,QAAwBA,IAAxB,CAA8BC,KAA9B,QAA8BA,KAA9B;AACKgB,IAAAA,MADL;AAEGjB,IAAAA,IAFH,cAEShE,CAFT,EAEmBkF,CAFnB,EAE2C;AACvC,UAAMC,SAAS,GAAG,SAAZA,SAAY,GAAM;AACtB,YAAID,CAAC,KAAK,OAAV,EAAmB;AACjB,iBAAOpF,OAAO,CAACG,GAAf;AACoBD,UAAAA,CAAC,CAACwC,iBADtB,EAC2CxC,CAAC,CAACuC,qBAD7C,EACuF0B,KAAK,CAACjE,CAAD,CAD5F;;AAGD,SAJD,MAIO,IAAIkF,CAAC,KAAK,SAAV,EAAqB;AAC1B,iBAAOpF,OAAO,CAACG,GAAf;AACoBD,UAAAA,CAAC,CAACwC,iBADtB,EAC2CxC,CAAC,CAAC0C,uBAD7C,EACyFuB,KAAK,CAACjE,CAAD,CAD9F;;AAGD;;AAED,eAAO,EAAP;AACD,OAZD;;AAcA,aAAOF,OAAO,CAACG,GAAf;AACoBgE,MAAAA,KAAK,CAACjE,CAAD,CADzB;AAESP,MAAAA,cAAc,CAAC2F,QAAf,CAAwBnB,KAAK,CAACjE,CAAD,CAA7B,CAFT;AAGoBA,MAAAA,CAAC,CAACyB,gBAHtB,EAG0ChC,cAAc,CAAC4F,MAAf,CAAsBpB,KAAK,CAACjE,CAAD,CAA3B,EAAgC,IAAhC,CAH1C,EAGoGiE,KAAK,CAACjE,CAAD,CAHzG;;AAKEmF,MAAAA,SAAS,EALX;;AAOGxF,MAAAA,aAAa,CAACC,UAPjB;AAQWH,MAAAA,cAAc,CAAC2F,QAAf,CAAwBnB,KAAK,CAACjE,CAAD,CAA7B,CARX;;;AAWD,KA5BH,eAhBkB;;AA8ClB;AACEsF,IAAAA,eADF,2BACkBtF,CADlB,EAC4B;AACxB,aAAOF,OAAO,CAACG,GAAf;AACoBD,MAAAA,CAAC,CAACuF,eADtB;AAEcvF,MAAAA,CAAC,CAACwF,mBAFhB;;AAID,KANH;AAOEC,IAAAA,sBAPF,kCAOyBzF,CAPzB,EAOmC;AAC/B,aAAOF,OAAO,CAACG,GAAf;AACoBD,MAAAA,CAAC,CAACwC,iBADtB,EAC2CxC,CAAC,CAAC0C,uBAD7C,EACyF1C,CAAC,CAACuF,eAD3F;;AAGD,KAXH;AAYEG,IAAAA,oBAZF,gCAYuB1F,CAZvB,EAYiC;AAC7B,aAAOF,OAAO,CAACG,GAAf;AACoBD,MAAAA,CAAC,CAACwC,iBADtB,EAC2CxC,CAAC,CAACuC,qBAD7C,EACuFvC,CAAC,CAACuF,eADzF;;AAGD,KAhBH,EA9CkB,CAApB;;;AAiEA,SAAOxB,WAAP;AACD,CAnEM","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { 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 getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    token(t: Theme) {\n      return emotion.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 emotion.css`\n        ${tokenSizeMixin(emotion)(\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 emotion.css`\n        ${tokenSizeMixin(emotion)(\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 emotion.css`\n        ${tokenSizeMixin(emotion)(\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 emotion.css`\n        border: solid ${t.tokenBorderWidth} transparent;\n      `;\n    },\n\n    tokenDefaultIdle2022(t: Theme) {\n      return emotion.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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.css`\n        display: inline-block;\n        padding-bottom: ${t.tokenLegacyTextShift};\n      `;\n    },\n\n    removeIcon(t: Theme) {\n      return emotion.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 emotion.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 emotion.css`\n        display: flex;\n        position: absolute;\n        visibility: hidden;\n      `;\n    },\n    helperContainerSmall(t: Theme) {\n      return emotion.css`\n        left: ${t.tokenInputPaddingXSmall};\n        right: ${t.tokenInputPaddingXSmall};\n      `;\n    },\n    helperContainerMedium(t: Theme) {\n      return emotion.css`\n        left: ${t.tokenInputPaddingXMedium};\n        right: ${t.tokenInputPaddingXMedium};\n      `;\n    },\n    helperContainerLarge(t: Theme) {\n      return emotion.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 getColorStyles = (emotion: Emotion) => {\n  const tokenColors = [\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 emotion.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 emotion.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 emotion.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 emotion.css`\n        background-color: ${t.tokenDisabledBg};\n        box-shadow: ${t.tokenShadowDisabled};\n      `;\n      },\n      defaultDisabledWarning(t: Theme) {\n        return emotion.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 emotion.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  return tokenColors;\n};\n"]}

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

@@ -1,25 +1,45 @@
-export declare const jsStyles: {
-    token(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    text(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    removeIcon(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    removeIcon: string;
 };
-export declare const jsTokenColors: {
-    defaultIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    defaultActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    defaultDisabled: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => string;
-    defaultDisabledWarning: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => string;
-    defaultDisabledError: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => string;
-    grayIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    grayActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    blueIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    blueActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    greenIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    greenActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    yellowIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    yellowActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    redIdle: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    redActive: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    white: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
-    black: (t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>, v: "error" | "warning" | null) => string;
+export declare const getStyles: (emotion: Emotion) => {
+    token(t: Theme): string;
+    tokenSmall(t: Theme): string;
+    tokenMedium(t: Theme): string;
+    tokenLarge(t: Theme): string;
+    token2022(t: Theme): string;
+    tokenDefaultIdle2022(t: Theme): string;
+    tokenDefaultIdleHovering2022(t: Theme): string;
+    tokenDefaultActive2022(t: Theme): string;
+    tokenError2022(t: Theme): string;
+    tokenWarning2022(t: Theme): string;
+    tokenDisabled2022(t: Theme): string;
+    disabled(t: Theme): string;
+    text(t: Theme): string;
+    removeIcon(t: Theme): string;
+    helperText(): string;
+    helperContainer(): string;
+    helperContainerSmall(t: Theme): string;
+    helperContainerMedium(t: Theme): string;
+    helperContainerLarge(t: Theme): string;
+};
+export declare const getColorStyles: (emotion: Emotion) => {
+    defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    defaultDisabled: (t: Theme) => string;
+    defaultDisabledWarning: (t: Theme) => string;
+    defaultDisabledError: (t: Theme) => string;
+    grayIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    grayActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    blueIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    blueActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    greenIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    greenActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    yellowIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    yellowActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    redIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
+    redActive: (t: Theme, v: 'error' | 'warning' | null) => string;
+    white: (t: Theme, v: 'error' | 'warning' | null) => string;
+    black: (t: Theme, v: 'error' | 'warning' | null) => string;
 };

package/components/Token/TokenView/TokenView.js

@@ -0,0 +1,45 @@
+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 from 'react';
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { useEmotion } from "../../../lib/theming/Emotion";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { getStyles, globalClasses } from "../Token.styles";
+export function TokenView(props) {
+  var _emotion$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 = useTheme();
+  var emotion = useEmotion();
+  var styles = getStyles(emotion);
+
+  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: emotion.cx(styles.removeIcon(theme), globalClasses.removeIcon)
+  }, closeButton);
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: emotion.cx(getSizeClassName(size), (_emotion$cx = {}, _emotion$cx[styles.token(theme)] = true, _emotion$cx[styles.token2022(theme)] = isTheme2022(theme), _emotion$cx))
+  }), children, closeButtonNode));
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TokenView.tsx"],"names":["React","CommonWrapper","useEmotion","isTheme2022","useTheme","getStyles","globalClasses","TokenView","props","size","children","closeButton","hideCloseButton","className","rest","theme","emotion","styles","getSizeClassName","tokenLarge","tokenMedium","tokenSmall","closeButtonNode","cx","removeIcon","token","token2022"],"mappings":"kPAAA,OAAOA,KAAP,MAAiC,OAAjC;;AAEA,SAASC,aAAT,QAA8B,8BAA9B;AACA,SAASC,UAAT,QAA2B,2BAA3B;AACA,SAASC,WAAT,QAA4B,gCAA5B;AACA,SAASC,QAAT,QAAyB,4BAAzB;;;AAGA,SAASC,SAAT,EAAoBC,aAApB,QAAyC,gBAAzC;;;;;;;;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,GAAGX,QAAQ,EAAtB;AACA,MAAMY,OAAO,GAAGd,UAAU,EAA1B;AACA,MAAMe,MAAM,GAAGZ,SAAS,CAACW,OAAD,CAAxB;;AAEA,MAAME,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACT,IAAD,EAAqB;AAC5C,YAAQA,IAAR;AACE,WAAK,OAAL;AACE,eAAOQ,MAAM,CAACE,UAAP,CAAkBJ,KAAlB,CAAP;AACF,WAAK,QAAL;AACE,eAAOE,MAAM,CAACG,WAAP,CAAmBL,KAAnB,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOE,MAAM,CAACI,UAAP,CAAkBN,KAAlB,CAAP,CAPJ;;AASD,GAVD;AAWA,MAAMO,eAAe,GAAGV,eAAe,GAAG,IAAH;AACrC,gCAAM,SAAS,EAAEI,OAAO,CAACO,EAAR,CAAWN,MAAM,CAACO,UAAP,CAAkBT,KAAlB,CAAX,EAAqCT,aAAa,CAACkB,UAAnD,CAAjB,IAAkFb,WAAlF,CADF;;;AAIA;AACE,wBAAC,aAAD,EAAmBH,KAAnB;AACE;AACMM,IAAAA,IADN;AAEE,MAAA,SAAS,EAAEE,OAAO,CAACO,EAAR,CAAWL,gBAAgB,CAACT,IAAD,CAA3B;AACRQ,MAAAA,MAAM,CAACQ,KAAP,CAAaV,KAAb,CADQ,IACc,IADd;AAERE,MAAAA,MAAM,CAACS,SAAP,CAAiBX,KAAjB,CAFQ,IAEkBZ,WAAW,CAACY,KAAD,CAF7B,eAFb;;;AAOGL,IAAAA,QAPH;AAQGY,IAAAA,eARH,CADF,CADF;;;;AAcD","sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { TokenSize } from './Token';\nimport { getStyles, globalClasses } 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 = useTheme();\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n\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={emotion.cx(styles.removeIcon(theme), globalClasses.removeIcon)}>{closeButton}</span>\n  );\n\n  return (\n    <CommonWrapper {...props}>\n      <div\n        {...rest}\n        className={emotion.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/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Token';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Token';\n"]}

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"]}