@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

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

@@ -1 +1 @@
-{"version":3,"sources":["Token.tsx"],"names":["React","locale","CrossIcon","emptyHandler","getChildrenText","ThemeContext","CommonWrapper","cx","rootNode","isTheme2022","CloseButtonIcon","styles","colorStyles","globalClasses","TokenLocaleHelper","getValidation","error","warning","TokenDataTids","root","removeIcon","Token","onRemoveClick","event","props","disabled","onRemove","preventDefault","render","theme","renderMain","children","isActive","colors","idle","active","ariaDescribedby","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","removeButtonAriaLabel","icon","classNames","tokenDefaultIdle2022","tokenDefaultIdleHovering2022","tokenDefaultActive2022","tokenWarning2022","tokenError2022","tokenDisabled2022","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassNames","token","setRootNode","text","undefined","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler, getChildrenText } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles, colorStyles, globalClasses } from './Token.styles';\nimport { TokenLocale, TokenLocaleHelper } from './locale';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n  idle: TokenColorName;\n  active?: TokenColorName;\n}\n\nexport interface TokenProps extends Pick<AriaAttributes, 'aria-describedby'>, CommonProps {\n  colors?: TokenColors;\n  isActive?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n  disabled?: boolean;\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n  onRemove?: React.MouseEventHandler<HTMLElement>;\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nconst getValidation = (error: TokenProps['error'], warning: TokenProps['warning']) => {\n  if (error) {\n    return 'error';\n  } else if (warning) {\n    return 'warning';\n  }\n\n  return null;\n};\n\nexport const TokenDataTids = {\n  root: 'Token__root',\n  removeIcon: 'Token__removeIcon',\n} as const;\n\n@rootNode\n@locale('Token', TokenLocaleHelper)\nexport class Token extends React.Component<TokenProps> {\n  public static __KONTUR_REACT_UI__ = 'Token';\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: TokenLocale;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const {\n      children,\n      isActive,\n      colors = { idle: 'defaultIdle', active: 'defaultActive' },\n      error,\n      warning,\n      disabled,\n      'aria-describedby': ariaDescribedby,\n      onClick = emptyHandler,\n      onDoubleClick = emptyHandler,\n      onMouseEnter = emptyHandler,\n      onMouseLeave = emptyHandler,\n      onFocus = emptyHandler,\n      onBlur = emptyHandler,\n    } = this.props;\n\n    const theme = this.theme;\n\n    const validation = getValidation(error, warning);\n    const removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + getChildrenText(children);\n\n    const icon = isTheme2022(theme) ? (\n      <CloseButtonIcon side={16} color=\"inherit\" colorHover=\"inherit\" role=\"none\" tabbable={false} />\n    ) : (\n      <CrossIcon />\n    );\n\n    let classNames = '';\n    if (isTheme2022(theme)) {\n      classNames = cx(\n        styles.tokenDefaultIdle2022(theme),\n        !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme),\n        isActive && styles.tokenDefaultActive2022(theme),\n        warning && styles.tokenWarning2022(theme),\n        error && styles.tokenError2022(theme),\n        disabled && styles.tokenDisabled2022(theme),\n      );\n    } else {\n      classNames = cx(\n        colorStyles[colors.idle](theme, validation),\n        !!isActive && colorStyles[colors.active || colors.idle](theme, validation),\n        !!disabled && styles.disabled(theme),\n        !!disabled && colorStyles.defaultDisabled(theme),\n        !!disabled && warning && colorStyles.defaultDisabledWarning(theme),\n        !!disabled && error && colorStyles.defaultDisabledError(theme),\n      );\n    }\n\n    const tokenClassNames = cx(styles.token(this.theme), classNames);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={TokenDataTids.root}\n          className={tokenClassNames}\n          aria-describedby={ariaDescribedby}\n          onClick={onClick}\n          onDoubleClick={onDoubleClick}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onFocus={onFocus}\n          onBlur={onBlur}\n        >\n          <span className={styles.text(this.theme)}>{children}</span>\n          <span\n            role={isTheme2022(theme) ? undefined : 'button'}\n            aria-label={isTheme2022(theme) ? undefined : removeButtonAriaLabel}\n            className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)}\n            onClick={this.onRemoveClick}\n            data-tid={TokenDataTids.removeIcon}\n          >\n            {icon}\n          </span>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n    const { disabled, onRemove = emptyHandler } = this.props;\n\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onRemove(event);\n  };\n}\n"]}
+{"version":3,"sources":["Token.tsx"],"names":["React","locale","CrossIcon","emptyHandler","CommonWrapper","EmotionConsumer","rootNode","isTheme2022","CloseButtonIcon","reactGetTextContent","ThemeContext","getColorStyles","getStyles","TokenLocaleHelper","TokenView","getValidation","error","warning","TokenDataTids","root","removeIcon","Token","onRemoveClick","event","props","disabled","onRemove","preventDefault","render","emotion","theme","renderMain","size","children","isActive","colors","idle","active","ariaDescribedby","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","removeButtonAriaLabel","icon","styles","colorStyles","classNames","cx","tokenDefaultIdle2022","tokenDefaultIdleHovering2022","tokenDefaultActive2022","tokenWarning2022","tokenError2022","tokenDisabled2022","defaultDisabled","defaultDisabledWarning","defaultDisabledError","textholder","text","closeButton","undefined","setRootNode","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler } from '../../lib/utils';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\nimport { SizeProp } from '../../lib/types/props';\nimport { reactGetTextContent } from '../../lib/reactGetTextContent';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getColorStyles, getStyles } from './Token.styles';\nimport { TokenLocale, TokenLocaleHelper } from './locale';\nimport { TokenView } from './TokenView';\n\nexport type TokenColorName = keyof ReturnType<typeof getColorStyles>;\n\nexport interface TokenColors {\n  idle: TokenColorName;\n  active?: TokenColorName;\n}\n\nexport type TokenSize = SizeProp;\n\nexport interface TokenProps extends Pick<AriaAttributes, 'aria-describedby'>, CommonProps {\n  colors?: TokenColors;\n  isActive?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n  disabled?: boolean;\n  /**\n   * Размер\n   */\n  size?: TokenSize;\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n  onRemove?: React.MouseEventHandler<HTMLElement>;\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nconst getValidation = (error: TokenProps['error'], warning: TokenProps['warning']) => {\n  if (error) {\n    return 'error';\n  } else if (warning) {\n    return 'warning';\n  }\n\n  return null;\n};\n\nexport const TokenDataTids = {\n  root: 'Token__root',\n  removeIcon: 'Token__removeIcon',\n} as const;\n\n@rootNode\n@locale('Token', TokenLocaleHelper)\nexport class Token extends React.Component<TokenProps> {\n  public static __KONTUR_REACT_UI__ = 'Token';\n  public static displayName = 'Token';\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: TokenLocale;\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private renderMain() {\n    const {\n      size,\n      children,\n      isActive,\n      colors = { idle: 'defaultIdle', active: 'defaultActive' },\n      error,\n      warning,\n      disabled,\n      'aria-describedby': ariaDescribedby,\n      onClick = emptyHandler,\n      onDoubleClick = emptyHandler,\n      onMouseEnter = emptyHandler,\n      onMouseLeave = emptyHandler,\n      onFocus = emptyHandler,\n      onBlur = emptyHandler,\n    } = this.props;\n\n    const theme = this.theme;\n\n    const validation = getValidation(error, warning);\n    const removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + reactGetTextContent(children);\n\n    const icon = isTheme2022(theme) ? (\n      <CloseButtonIcon\n        side={16}\n        color=\"inherit\"\n        colorHover=\"inherit\"\n        aria-label={removeButtonAriaLabel}\n        tabbable={false}\n      />\n    ) : (\n      <CrossIcon />\n    );\n\n    const styles = getStyles(this.emotion);\n    const colorStyles = getColorStyles(this.emotion);\n    const classNames = isTheme2022(theme)\n      ? this.emotion.cx(\n          styles.tokenDefaultIdle2022(theme),\n          !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme),\n          isActive && styles.tokenDefaultActive2022(theme),\n          warning && styles.tokenWarning2022(theme),\n          error && styles.tokenError2022(theme),\n          disabled && styles.tokenDisabled2022(theme),\n        )\n      : this.emotion.cx(\n          colorStyles[colors.idle](theme, validation),\n          !!isActive && colorStyles[colors.active || colors.idle](theme, validation),\n          !!disabled && styles.disabled(theme),\n          !!disabled && colorStyles.defaultDisabled(theme),\n          !!disabled && warning && colorStyles.defaultDisabledWarning(theme),\n          !!disabled && error && colorStyles.defaultDisabledError(theme),\n        );\n\n    const textholder = <span className={styles.text(this.theme)}>{children}</span>;\n\n    const closeButton = (\n      <span\n        role={isTheme2022(theme) ? undefined : 'button'}\n        aria-label={isTheme2022(theme) ? undefined : removeButtonAriaLabel}\n        onClick={this.onRemoveClick}\n        data-tid={TokenDataTids.removeIcon}\n      >\n        {icon}\n      </span>\n    );\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <TokenView\n          className={classNames}\n          size={size}\n          closeButton={closeButton}\n          data-tid={TokenDataTids.root}\n          aria-describedby={ariaDescribedby}\n          onClick={onClick}\n          onDoubleClick={onDoubleClick}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onFocus={onFocus}\n          onBlur={onBlur}\n        >\n          {textholder}\n        </TokenView>\n      </CommonWrapper>\n    );\n  }\n\n  private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n    const { disabled, onRemove = emptyHandler } = this.props;\n\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onRemove(event);\n  };\n}\n"]}

package/components/Token/Token.d.ts

@@ -1,11 +1,13 @@
 import React, { AriaAttributes } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
-import { colorStyles } from './Token.styles';
-export declare type TokenColorName = keyof typeof colorStyles;
+import { SizeProp } from '../../lib/types/props';
+import { getColorStyles } from './Token.styles';
+export declare type TokenColorName = keyof ReturnType<typeof getColorStyles>;
 export interface TokenColors {
     idle: TokenColorName;
     active?: TokenColorName;
 }
+export declare type TokenSize = SizeProp;
 export interface TokenProps extends Pick<AriaAttributes, 'aria-describedby'>, CommonProps {
     colors?: TokenColors;
     isActive?: boolean;
@@ -18,6 +20,10 @@ export interface TokenProps extends Pick<AriaAttributes, 'aria-describedby'>, Co
      */
     warning?: boolean;
     disabled?: boolean;
+    /**
+     * Размер
+     */
+    size?: TokenSize;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onRemove?: React.MouseEventHandler<HTMLElement>;
@@ -32,7 +38,9 @@ export declare const TokenDataTids: {
 };
 export declare class Token extends React.Component<TokenProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     private theme;
+    private emotion;
     private setRootNode;
     private readonly locale;
     render(): JSX.Element;

package/components/Token/Token.md

@@ -110,3 +110,19 @@ import { Gapped, Token } from '@skbkontur/react-ui';
   </Gapped>
 </Gapped>;
 ```
+
+У Token есть 3 стандартных размера.
+
+```jsx harmony
+<Gapped vertical>
+  <Token size="small">
+    Маленький
+  </Token>
+  <Token size="medium">
+    Средний
+  </Token>
+  <Token size="large">
+    Большой
+  </Token>
+</Gapped>
+```

package/components/Token/Token.mixins/Token.mixins.js

@@ -0,0 +1,9 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject;
+
+export var tokenSizeMixin = function tokenSizeMixin(emotion) {
+  return function (tokenPaddingY, tokenPaddingX, lineHeight, fontSize, tokenMarginY, tokenMarginX) {
+    return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    padding: ", " ", ";\n    margin: ", " ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "])), tokenPaddingY, tokenPaddingX, tokenMarginY, tokenMarginX, lineHeight, fontSize);
+  };
+};

package/components/Token/Token.mixins/Token.mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Token.mixins.ts"],"names":["tokenSizeMixin","emotion","tokenPaddingY","tokenPaddingX","lineHeight","fontSize","tokenMarginY","tokenMarginX","css"],"mappings":";;AAEA,OAAO,IAAMA,cAAc;AACzB,SADWA,cACX,CAACC,OAAD;AACA;AACEC,IAAAA,aADF;AAEEC,IAAAA,aAFF;AAGEC,IAAAA,UAHF;AAIEC,IAAAA,QAJF;AAKEC,IAAAA,YALF;AAMEC,IAAAA,YANF;AAOK;AACH,aAAON,OAAO,CAACO,GAAf;AACWN,MAAAA,aADX,EAC4BC,aAD5B;AAEUG,MAAAA,YAFV,EAE0BC,YAF1B;AAGeH,MAAAA,UAHf;AAIaC,MAAAA,QAJb;;AAMD,KAfD,GADK","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nexport const tokenSizeMixin =\n  (emotion: Emotion) =>\n  (\n    tokenPaddingY: string,\n    tokenPaddingX: string,\n    lineHeight: string,\n    fontSize: string,\n    tokenMarginY: string,\n    tokenMarginX: string,\n  ) => {\n    return emotion.css`\n    padding: ${tokenPaddingY} ${tokenPaddingX};\n    margin: ${tokenMarginY} ${tokenMarginX};\n    line-height: ${lineHeight};\n    font-size: ${fontSize};\n  `;\n  };\n"]}

package/components/Token/Token.mixins/package.json

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

package/components/Token/Token.mixins.d.ts

@@ -0,0 +1,2 @@
+import type { Emotion } from '@emotion/css/create-instance';
+export declare const tokenSizeMixin: (emotion: Emotion) => (tokenPaddingY: string, tokenPaddingX: string, lineHeight: string, fontSize: string, tokenMarginY: string, tokenMarginX: string) => string;

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

@@ -1,141 +1,174 @@
 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, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+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 { 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);
-  },
-  tokenDefaultIdle2022: function tokenDefaultIdle2022(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n      background-clip: border-box;\n    "])), t.tokenDefaultIdleColor, t.tokenDefaultIdleBg, t.tokenBorderWidth, t.tokenDefaultIdleBorderColor);
-  },
-  tokenDefaultIdleHovering2022: function tokenDefaultIdleHovering2022(t) {
-    return css(_templateObject3 || (_templateObject3 = _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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])), t.tokenDefaultActiveColor, t.tokenDefaultActiveBg, t.tokenBorderWidth, t.tokenDefaultActiveBorderColor);
-  },
-  tokenError2022: function tokenError2022(t) {
-    return css(_templateObject5 || (_templateObject5 = _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(_templateObject6 || (_templateObject6 = _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(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      margin: ", " ", ";\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.tokenPaddingYDisabled, t.tokenPaddingXDisabled, t.tokenMarginYDisabled, t.tokenMarginXDisabled, t.tokenTextColorDisabled, t.tokenBorderColorDisabled, globalClasses.removeIcon);
-  },
-  disabled: function disabled(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n\n      .", " {\n        visibility: hidden;\n      }\n    "])), t.tokenPaddingYDisabled, t.tokenPaddingXDisabled, t.tokenMarginYDisabled, t.tokenMarginXDisabled, t.tokenTextColorDisabled, globalClasses.removeIcon);
-  },
-  text: function text(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])), t.tokenLegacyTextShift);
-  },
-  removeIcon: function removeIcon(t) {
-    return css(_templateObject10 || (_templateObject10 = _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);
-  }
-});
-export var colorStyles = [{
-  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;
+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 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 css(_templateObject11 || (_templateObject11 = _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(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])), t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
-      }
+    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 '';
+      };
 
-    return css(_templateObject13 || (_templateObject13 = _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(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])), t.tokenDisabledBg, t.tokenShadowDisabled);
-  },
-  defaultDisabledWarning: function defaultDisabledWarning(t) {
-    return css(_templateObject15 || (_templateObject15 = _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(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])), t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
-  }
-});
+      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","memoizeStyle","prefix","ColorFunctions","globalClasses","removeIcon","styles","token","t","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","tokenDefaultIdle2022","tokenDefaultIdleColor","tokenDefaultIdleBg","tokenBorderWidth","tokenDefaultIdleBorderColor","tokenDefaultIdleHovering2022","tokenDefaultIdleColorHover","tokenDefaultIdleBgHover","tokenDefaultIdleBorderColorHover","tokenDefaultActive2022","tokenDefaultActiveColor","tokenDefaultActiveBg","tokenDefaultActiveBorderColor","tokenError2022","tokenBorderColorError","tokenOutlineWidth","tokenWarning2022","tokenBorderColorWarning","tokenDisabled2022","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","tokenBorderColorDisabled","disabled","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","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\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  tokenDefaultIdle2022(t: Theme) {\n    return css`\n      color: ${t.tokenDefaultIdleColor};\n      background: ${t.tokenDefaultIdleBg};\n      border: solid ${t.tokenBorderWidth} ${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      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\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      padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n      margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\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\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":["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,9 +1,14 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     removeIcon: string;
 };
-export declare const styles: {
+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;
@@ -13,8 +18,13 @@ export declare const styles: {
     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: {
+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;