@primer/react-brand 0.70.0-rc.138127ad → 0.70.0-rc.4599efb5

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.70.0-rc.138127ad)
+# Primer Brand docs (v0.70.0-rc.4599efb5)
 
-These docs are bundled with `@primer/react-brand@0.70.0-rc.138127ad` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.70.0-rc.4599efb5` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/Token/Token.js

@@ -25,7 +25,6 @@ var l = [
 	}), /* @__PURE__ */ s(n, {
 		as: "span",
 		size: "100",
-		font: "monospace",
 		className: r.Token__label,
 		children: p
 	})] });

package/esm/Token/Token.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.js","names":[],"sources":["../../src/Token/Token.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref} from 'react'\n\nimport {Text} from '../Text'\nimport {useAnimation} from '../animation'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css'\n\nimport styles from './Token.module.css'\n\nexport const TokenVariants = ['default', 'accent', 'outline', 'invisible'] as const\n\nexport const defaultTokenVariant = TokenVariants[0]\n\ntype TokenLeadingVisual = React.ReactElement | React.ComponentType<{className?: string}>\n\ntype TokenSharedProps = {\n  /**\n   * The leading visual appears before the Token content.\n   * Pass an element to supply custom props, or a component type that accepts an optional className.\n   */\n  leadingVisual?: TokenLeadingVisual\n  /**\n   * The variant variations available in Token.\n   */\n  variant?: (typeof TokenVariants)[number]\n  /**\n   * The HTML element rendered by Token.\n   */\n  as?: 'span' | 'a'\n  ['data-testid']?: string\n}\n\ntype TokenSpanProps = BaseProps<HTMLSpanElement> &\n  TokenSharedProps & {\n    as?: 'span'\n  } & React.ComponentPropsWithoutRef<'span'>\n\ntype TokenAnchorProps = BaseProps<HTMLAnchorElement> &\n  TokenSharedProps & {\n    as: 'a'\n    href: string\n  } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nexport type TokenProps = TokenSpanProps | TokenAnchorProps\n\nconst testIds = {\n  root: 'Token',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n}\n\nconst _Token = forwardRef<HTMLSpanElement | HTMLAnchorElement, TokenProps>(\n  (\n    {\n      animate,\n      variant = defaultTokenVariant,\n      as = 'span',\n      children,\n      className,\n      'data-testid': testId,\n      leadingVisual: LeadingVisual,\n      style,\n      ...props\n    },\n    ref: Ref<HTMLSpanElement | HTMLAnchorElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const tokenClassName = clsx(\n      animationClasses,\n      styles.Token,\n      LeadingVisual && styles['Token--hasLeadingVisual'],\n      as === 'a' && styles['Token--interactive'],\n      styles[`Token--variant-${variant}`],\n      className,\n    )\n\n    const tokenChildren = (\n      <>\n        {LeadingVisual && (\n          <span className={styles['Token__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n            {typeof LeadingVisual === 'function' ? (\n              <LeadingVisual className={styles['Token__visual']} />\n            ) : (\n              React.isValidElement<{className?: string}>(LeadingVisual) &&\n              React.cloneElement(LeadingVisual, {\n                className: clsx(styles['Token__visual'], LeadingVisual.props.className),\n              })\n            )}\n          </span>\n        )}\n        <Text as=\"span\" size=\"100\" font=\"monospace\" className={styles['Token__label']}>\n          {children}\n        </Text>\n      </>\n    )\n\n    if (as === 'a') {\n      return (\n        <a\n          ref={ref as Ref<HTMLAnchorElement>}\n          className={tokenClassName}\n          data-testid={testId || testIds.root}\n          style={{...animationInlineStyles, ...style}}\n          {...props}\n        >\n          {tokenChildren}\n        </a>\n      )\n    }\n\n    return (\n      <span\n        ref={ref as Ref<HTMLSpanElement>}\n        className={tokenClassName}\n        data-testid={testId || testIds.root}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {tokenChildren}\n      </span>\n    )\n  },\n)\n\n/**\n * Use a Token to group short metadata or categories, with optional leading visuals.\n * @see https://primer.style/brand\n */\nexport const Token = Object.assign(_Token, {testIds})\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAgB;CAAC;CAAW;CAAU;CAAW;CAAY,EAE7D,IAAsB,EAAc,IAkC3C,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;AAClB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEK,IAAS,GAEX,EACE,YACA,aAAU,GACV,QAAK,QACL,aACA,cACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAiB,EACrB,GACA,EAAO,OACP,KAAiB,EAAO,4BACxB,MAAO,OAAO,EAAO,uBACrB,EAAO,kBAAkB,MACzB,EACD,EAEK,IACJ,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA0B,eAAa,EAAQ;EAAe,eAAY;YAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,EAAe,WAAW,EAAO,eAAoB,CAAA,GAErD,EAAM,eAAqC,EAAc,IACzD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,eAAkB,EAAc,MAAM,UAAU,EACxE,CAAC;EAEC,CAAA,EAET,kBAAC,GAAD;EAAM,IAAG;EAAO,MAAK;EAAM,MAAK;EAAY,WAAW,EAAO;EAC3D;EACI,CAAA,CACN,EAAA,CAAA;AAiBL,QAZI,EAFA,MAAO,MAEN,MAaF,QAbC;EACO;EACL,WAAW;EACX,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAEH;EACC,CAAA;EAgBX,EAMY,IAAQ,OAAO,OAAO,GAAQ,EAAC,YAAQ,CAAC"}
+{"version":3,"file":"Token.js","names":[],"sources":["../../src/Token/Token.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref} from 'react'\n\nimport {Text} from '../Text'\nimport {useAnimation} from '../animation'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/token/colors-with-modes.css'\n\nimport styles from './Token.module.css'\n\nexport const TokenVariants = ['default', 'accent', 'outline', 'invisible'] as const\n\nexport const defaultTokenVariant = TokenVariants[0]\n\ntype TokenLeadingVisual = React.ReactElement | React.ComponentType<{className?: string}>\n\ntype TokenSharedProps = {\n  /**\n   * The leading visual appears before the Token content.\n   * Pass an element to supply custom props, or a component type that accepts an optional className.\n   */\n  leadingVisual?: TokenLeadingVisual\n  /**\n   * The variant variations available in Token.\n   */\n  variant?: (typeof TokenVariants)[number]\n  /**\n   * The HTML element rendered by Token.\n   */\n  as?: 'span' | 'a'\n  ['data-testid']?: string\n}\n\ntype TokenSpanProps = BaseProps<HTMLSpanElement> &\n  TokenSharedProps & {\n    as?: 'span'\n  } & React.ComponentPropsWithoutRef<'span'>\n\ntype TokenAnchorProps = BaseProps<HTMLAnchorElement> &\n  TokenSharedProps & {\n    as: 'a'\n    href: string\n  } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>\n\nexport type TokenProps = TokenSpanProps | TokenAnchorProps\n\nconst testIds = {\n  root: 'Token',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n}\n\nconst _Token = forwardRef<HTMLSpanElement | HTMLAnchorElement, TokenProps>(\n  (\n    {\n      animate,\n      variant = defaultTokenVariant,\n      as = 'span',\n      children,\n      className,\n      'data-testid': testId,\n      leadingVisual: LeadingVisual,\n      style,\n      ...props\n    },\n    ref: Ref<HTMLSpanElement | HTMLAnchorElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const tokenClassName = clsx(\n      animationClasses,\n      styles.Token,\n      LeadingVisual && styles['Token--hasLeadingVisual'],\n      as === 'a' && styles['Token--interactive'],\n      styles[`Token--variant-${variant}`],\n      className,\n    )\n\n    const tokenChildren = (\n      <>\n        {LeadingVisual && (\n          <span className={styles['Token__leading-visual']} data-testid={testIds.leadingVisual} aria-hidden=\"true\">\n            {typeof LeadingVisual === 'function' ? (\n              <LeadingVisual className={styles['Token__visual']} />\n            ) : (\n              React.isValidElement<{className?: string}>(LeadingVisual) &&\n              React.cloneElement(LeadingVisual, {\n                className: clsx(styles['Token__visual'], LeadingVisual.props.className),\n              })\n            )}\n          </span>\n        )}\n        <Text as=\"span\" size=\"100\" className={styles['Token__label']}>\n          {children}\n        </Text>\n      </>\n    )\n\n    if (as === 'a') {\n      return (\n        <a\n          ref={ref as Ref<HTMLAnchorElement>}\n          className={tokenClassName}\n          data-testid={testId || testIds.root}\n          style={{...animationInlineStyles, ...style}}\n          {...props}\n        >\n          {tokenChildren}\n        </a>\n      )\n    }\n\n    return (\n      <span\n        ref={ref as Ref<HTMLSpanElement>}\n        className={tokenClassName}\n        data-testid={testId || testIds.root}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {tokenChildren}\n      </span>\n    )\n  },\n)\n\n/**\n * Use a Token to group short metadata or categories, with optional leading visuals.\n * @see https://primer.style/brand\n */\nexport const Token = Object.assign(_Token, {testIds})\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAgB;CAAC;CAAW;CAAU;CAAW;CAAY,EAE7D,IAAsB,EAAc,IAkC3C,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;AAClB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEK,IAAS,GAEX,EACE,YACA,aAAU,GACV,QAAK,QACL,aACA,cACA,eAAe,GACf,eAAe,GACf,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAiB,EACrB,GACA,EAAO,OACP,KAAiB,EAAO,4BACxB,MAAO,OAAO,EAAO,uBACrB,EAAO,kBAAkB,MACzB,EACD,EAEK,IACJ,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA0B,eAAa,EAAQ;EAAe,eAAY;YAC/F,OAAO,KAAkB,aACxB,kBAAC,GAAD,EAAe,WAAW,EAAO,eAAoB,CAAA,GAErD,EAAM,eAAqC,EAAc,IACzD,EAAM,aAAa,GAAe,EAChC,WAAW,EAAK,EAAO,eAAkB,EAAc,MAAM,UAAU,EACxE,CAAC;EAEC,CAAA,EAET,kBAAC,GAAD;EAAM,IAAG;EAAO,MAAK;EAAM,WAAW,EAAO;EAC1C;EACI,CAAA,CACN,EAAA,CAAA;AAiBL,QAZI,EAFA,MAAO,MAEN,MAaF,QAbC;EACO;EACL,WAAW;EACX,eAAa,KAAU,EAAQ;EAC/B,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAEH;EACC,CAAA;EAgBX,EAMY,IAAQ,OAAO,OAAO,GAAQ,EAAC,YAAQ,CAAC"}

package/esm/Token/{Token.module-BcKU1KwK.css → Token.module-DtWE9IPI.css}

@@ -1 +1 @@
-.Primer_Brand__Token-module__Token___nJxhW{border:var(--brand-borderWidth-thin) solid transparent;border-radius:var(--brand-borderRadius-small);align-items:center;gap:var(--base-size-8);min-width:0;max-width:100%;padding-inline:var(--base-size-8);padding-block:var(--base-size-6);vertical-align:middle;padding-block-end:var(--base-size-6);display:inline-flex}.Primer_Brand__Token-module__Token--hasLeadingVisual___Erv8L{padding-inline:calc((var(--base-size-4) + var(--base-size-8)) / 2);padding-block:calc((var(--base-size-4) + var(--base-size-8)) / 2)}.Primer_Brand__Token-module__Token--interactive___ZpgTX{cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Token-module__Token--interactive___ZpgTX:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}[data-color-mode=dark] .Primer_Brand__Token-module__Token___nJxhW{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}.Primer_Brand__Token-module__Token--variant-default___eMkcM{background-color:var(--brand-Token-bgColor-default);color:var(--brand-Token-fgColor-default)}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-default___eMkcM:hover{background-color:var(--brand-Token-bgColor-hover-default)}.Primer_Brand__Token-module__Token--variant-accent___fSxf7{background-color:var(--brand-Token-bgColor-accent);color:var(--brand-Token-fgColor-accent)}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-accent___fSxf7:hover{background-color:var(--brand-Token-bgColor-hover-accent)}.Primer_Brand__Token-module__Token--variant-outline___GTmIy{background-color:var(--brand-Token-bgColor-outline);border-color:var(--brand-Token-border-outline);color:var(--brand-Token-fgColor-outline)}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-outline___GTmIy:hover{background-color:var(--brand-Token-bgColor-hover-outline)}.Primer_Brand__Token-module__Token--variant-invisible___IR7Ki{color:var(--brand-Token-fgColor-invisible);background-color:#0000}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-invisible___IR7Ki:hover{background-color:var(--brand-Token-bgColor-hover-invisible)}.Primer_Brand__Token-module__Token__label___e3Cx3{text-overflow:ellipsis;text-transform:uppercase;min-width:0;font-weight:var(--base-text-weight-normal);white-space:nowrap;letter-spacing:var(--brand-text-letterSpacing-100);flex:auto;line-height:.85;display:block;overflow:hidden}.Primer_Brand__Token-module__Token___nJxhW>.Primer_Brand__Token-module__Token__label___e3Cx3{color:inherit}.Primer_Brand__Token-module__Token__leading-visual____uvYs{width:calc((var(--base-size-16) + var(--base-size-20)) / 2);height:calc((var(--base-size-16) + var(--base-size-20)) / 2);flex-shrink:0;justify-content:center;align-items:center;display:flex}.Primer_Brand__Token-module__Token__visual___Nlxfv{display:block}.Primer_Brand__Token-module__Token__leading-visual____uvYs>.Primer_Brand__Token-module__Token__visual___Nlxfv{width:calc((var(--base-size-16) + var(--base-size-20)) / 2);height:calc((var(--base-size-16) + var(--base-size-20)) / 2);max-width:calc((var(--base-size-16) + var(--base-size-20)) / 2);max-height:calc((var(--base-size-16) + var(--base-size-20)) / 2);border-radius:2px}.Primer_Brand__Token-module__Token__leading-visual____uvYs>.Primer_Brand__Token-module__Token__visual___Nlxfv svg,.Primer_Brand__Token-module__Token__leading-visual____uvYs>.Primer_Brand__Token-module__Token__visual___Nlxfv img{width:100%;height:100%}@media (forced-colors:active){.Primer_Brand__Token-module__Token___nJxhW{outline:var(--brand-borderWidth-thin) solid transparent}.Primer_Brand__Token-module__Token--interactive___ZpgTX:focus-visible{outline-color:highlight}}
+.Primer_Brand__Token-module__Token___nJxhW{border:var(--brand-borderWidth-thin) solid transparent;border-radius:var(--brand-borderRadius-small);align-items:center;gap:var(--base-size-8);min-width:0;max-width:100%;padding-inline:var(--base-size-8);padding-block:var(--base-size-6);vertical-align:middle;padding-block-end:var(--base-size-6);display:inline-flex}.Primer_Brand__Token-module__Token--hasLeadingVisual___Erv8L{padding-inline:calc((var(--base-size-4) + var(--base-size-8)) / 2);padding-block:calc((var(--base-size-4) + var(--base-size-8)) / 2)}.Primer_Brand__Token-module__Token--interactive___ZpgTX{cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Token-module__Token--interactive___ZpgTX:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}[data-color-mode=dark] .Primer_Brand__Token-module__Token___nJxhW{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto}.Primer_Brand__Token-module__Token--variant-default___eMkcM{background-color:var(--brand-Token-bgColor-default);color:var(--brand-Token-fgColor-default)}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-default___eMkcM:hover{background-color:var(--brand-Token-bgColor-hover-default)}.Primer_Brand__Token-module__Token--variant-accent___fSxf7{background-color:var(--brand-Token-bgColor-accent);color:var(--brand-Token-fgColor-accent)}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-accent___fSxf7:hover{background-color:var(--brand-Token-bgColor-hover-accent)}.Primer_Brand__Token-module__Token--variant-outline___GTmIy{background-color:var(--brand-Token-bgColor-outline);border-color:var(--brand-Token-border-outline);color:var(--brand-Token-fgColor-outline)}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-outline___GTmIy:hover{background-color:var(--brand-Token-bgColor-hover-outline)}.Primer_Brand__Token-module__Token--variant-invisible___IR7Ki{color:var(--brand-Token-fgColor-invisible);background-color:#0000}.Primer_Brand__Token-module__Token--interactive___ZpgTX.Primer_Brand__Token-module__Token--variant-invisible___IR7Ki:hover{background-color:var(--brand-Token-bgColor-hover-invisible)}.Primer_Brand__Token-module__Token__label___e3Cx3{text-overflow:ellipsis;min-width:0;font-weight:var(--base-text-weight-normal);line-height:var(--brand-text-lineHeight-100);white-space:nowrap;letter-spacing:var(--brand-text-letterSpacing-100);flex:auto;display:block;overflow:hidden}.Primer_Brand__Token-module__Token___nJxhW>.Primer_Brand__Token-module__Token__label___e3Cx3{color:inherit}.Primer_Brand__Token-module__Token__leading-visual____uvYs{width:calc((var(--base-size-16) + var(--base-size-20)) / 2);height:calc((var(--base-size-16) + var(--base-size-20)) / 2);flex-shrink:0;justify-content:center;align-items:center;display:flex}.Primer_Brand__Token-module__Token__visual___Nlxfv{display:block}.Primer_Brand__Token-module__Token__leading-visual____uvYs>.Primer_Brand__Token-module__Token__visual___Nlxfv{width:calc((var(--base-size-16) + var(--base-size-20)) / 2);height:calc((var(--base-size-16) + var(--base-size-20)) / 2);max-width:calc((var(--base-size-16) + var(--base-size-20)) / 2);max-height:calc((var(--base-size-16) + var(--base-size-20)) / 2);border-radius:2px}.Primer_Brand__Token-module__Token__leading-visual____uvYs>.Primer_Brand__Token-module__Token__visual___Nlxfv svg,.Primer_Brand__Token-module__Token__leading-visual____uvYs>.Primer_Brand__Token-module__Token__visual___Nlxfv img{width:100%;height:100%}@media (forced-colors:active){.Primer_Brand__Token-module__Token___nJxhW{outline:var(--brand-borderWidth-thin) solid transparent}.Primer_Brand__Token-module__Token--interactive___ZpgTX:focus-visible{outline-color:highlight}}

package/esm/Token/Token.module.js

@@ -1,4 +1,4 @@
-import './Token.module-BcKU1KwK.css';var e = {
+import './Token.module-DtWE9IPI.css';var e = {
 	Token: "Primer_Brand__Token-module__Token___nJxhW",
 	"Token--hasLeadingVisual": "Primer_Brand__Token-module__Token--hasLeadingVisual___Erv8L",
 	"Token--interactive": "Primer_Brand__Token-module__Token--interactive___ZpgTX",

package/esm/Token/Token.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Token.module.js","names":[],"sources":["../../src/Token/Token.module.css"],"sourcesContent":[".Token {\n  align-items: center;\n  border: var(--brand-borderWidth-thin) solid transparent;\n  border-radius: var(--brand-borderRadius-small);\n  display: inline-flex;\n  gap: var(--base-size-8);\n  min-width: 0;\n  max-width: 100%;\n  padding-inline: var(--base-size-8);\n  padding-block: var(--base-size-6);\n  padding-block-end: var(--base-size-6);\n  vertical-align: middle;\n}\n\n.Token--hasLeadingVisual {\n  padding-inline: calc((var(--base-size-4) + var(--base-size-8)) / 2);\n  padding-block: calc((var(--base-size-4) + var(--base-size-8)) / 2);\n}\n\n.Token--interactive {\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.Token--interactive:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n[data-color-mode='dark'] .Token {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: auto;\n}\n\n.Token--variant-default {\n  background-color: var(--brand-Token-bgColor-default);\n  color: var(--brand-Token-fgColor-default);\n}\n\n.Token--interactive.Token--variant-default:hover {\n  background-color: var(--brand-Token-bgColor-hover-default);\n}\n\n.Token--variant-accent {\n  background-color: var(--brand-Token-bgColor-accent);\n  color: var(--brand-Token-fgColor-accent);\n}\n\n.Token--interactive.Token--variant-accent:hover {\n  background-color: var(--brand-Token-bgColor-hover-accent);\n}\n\n.Token--variant-outline {\n  background-color: var(--brand-Token-bgColor-outline);\n  border-color: var(--brand-Token-border-outline);\n  color: var(--brand-Token-fgColor-outline);\n}\n\n.Token--interactive.Token--variant-outline:hover {\n  background-color: var(--brand-Token-bgColor-hover-outline);\n}\n\n.Token--variant-invisible {\n  background-color: transparent;\n  color: var(--brand-Token-fgColor-invisible);\n}\n\n.Token--interactive.Token--variant-invisible:hover {\n  background-color: var(--brand-Token-bgColor-hover-invisible);\n}\n\n.Token__label {\n  display: block;\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n  font-weight: var(--base-text-weight-normal);\n  line-height: 0.85;\n  white-space: nowrap;\n  letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.Token > .Token__label {\n  color: inherit;\n}\n\n.Token__leading-visual {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  height: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n}\n\n.Token__visual {\n  display: block;\n}\n\n/* Keep leading visuals inside a fixed 18x18 slot so larger children like Avatar dont increase Token height. */\n.Token__leading-visual > .Token__visual {\n  width: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  height: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  max-width: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  max-height: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  border-radius: 2px;\n}\n\n.Token__leading-visual > .Token__visual svg,\n.Token__leading-visual > .Token__visual img {\n  width: 100%;\n  height: 100%;\n}\n\n@media (forced-colors: active) {\n  .Token {\n    outline: var(--brand-borderWidth-thin) solid transparent;\n  }\n\n  .Token--interactive:focus-visible {\n    outline-color: Highlight;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Token.module.js","names":[],"sources":["../../src/Token/Token.module.css"],"sourcesContent":[".Token {\n  align-items: center;\n  border: var(--brand-borderWidth-thin) solid transparent;\n  border-radius: var(--brand-borderRadius-small);\n  display: inline-flex;\n  gap: var(--base-size-8);\n  min-width: 0;\n  max-width: 100%;\n  padding-inline: var(--base-size-8);\n  padding-block: var(--base-size-6);\n  padding-block-end: var(--base-size-6);\n  vertical-align: middle;\n}\n\n.Token--hasLeadingVisual {\n  padding-inline: calc((var(--base-size-4) + var(--base-size-8)) / 2);\n  padding-block: calc((var(--base-size-4) + var(--base-size-8)) / 2);\n}\n\n.Token--interactive {\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.Token--interactive:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n[data-color-mode='dark'] .Token {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: auto;\n}\n\n.Token--variant-default {\n  background-color: var(--brand-Token-bgColor-default);\n  color: var(--brand-Token-fgColor-default);\n}\n\n.Token--interactive.Token--variant-default:hover {\n  background-color: var(--brand-Token-bgColor-hover-default);\n}\n\n.Token--variant-accent {\n  background-color: var(--brand-Token-bgColor-accent);\n  color: var(--brand-Token-fgColor-accent);\n}\n\n.Token--interactive.Token--variant-accent:hover {\n  background-color: var(--brand-Token-bgColor-hover-accent);\n}\n\n.Token--variant-outline {\n  background-color: var(--brand-Token-bgColor-outline);\n  border-color: var(--brand-Token-border-outline);\n  color: var(--brand-Token-fgColor-outline);\n}\n\n.Token--interactive.Token--variant-outline:hover {\n  background-color: var(--brand-Token-bgColor-hover-outline);\n}\n\n.Token--variant-invisible {\n  background-color: transparent;\n  color: var(--brand-Token-fgColor-invisible);\n}\n\n.Token--interactive.Token--variant-invisible:hover {\n  background-color: var(--brand-Token-bgColor-hover-invisible);\n}\n\n.Token__label {\n  display: block;\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--brand-text-lineHeight-100);\n  white-space: nowrap;\n  letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.Token > .Token__label {\n  color: inherit;\n}\n\n.Token__leading-visual {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  height: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n}\n\n.Token__visual {\n  display: block;\n}\n\n/* Keep leading visuals inside a fixed 18x18 slot so larger children like Avatar dont increase Token height. */\n.Token__leading-visual > .Token__visual {\n  width: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  height: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  max-width: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  max-height: calc((var(--base-size-16) + var(--base-size-20)) / 2);\n  border-radius: 2px;\n}\n\n.Token__leading-visual > .Token__visual svg,\n.Token__leading-visual > .Token__visual img {\n  width: 100%;\n  height: 100%;\n}\n\n@media (forced-colors: active) {\n  .Token {\n    outline: var(--brand-borderWidth-thin) solid transparent;\n  }\n\n  .Token--interactive:focus-visible {\n    outline-color: Highlight;\n  }\n}\n"],"mappings":""}