@primer/react-brand 0.74.0-rc.ffd69649 → 0.75.0-rc.5af1749e

package/esm/TextCursorAnimation/TextCursorAnimation.js

@@ -1,47 +1,73 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { useCursorAnimation as t } from "../hooks/useCursorAnimation.js";
 import { EyebrowText as n } from "../EyebrowText/EyebrowText.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes-BODdIvrY.css';/* empty css                                                                                                                   */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes-BucKYl1n.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base-DKbXhPKv.css';/* empty css                                                                                                      */
+/* empty css                                                                                                                   */
 import r from "./TextCursorAnimation.module.js";
 import "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/TextCursorAnimation/TextCursorAnimation.tsx
 var o = {
 	root: "TextCursorAnimation",
+	get text() {
+		return `${this.root}-text`;
+	},
 	get cursor() {
 		return `${this.root}-cursor`;
 	}
 };
-function s({ children: s, className: c, animate: l, "data-testid": u, delay: d = 500, waitForPageLoad: f = !0, variant: p = "muted" }) {
-	let m = typeof s == "string" ? s : "", { showCursor: h, progress: g } = t({
-		text: m,
+function s({ children: s, className: c, animate: l, initialText: u, "data-testid": d, delay: f, waitForPageLoad: p = !0, variant: m = "muted" }) {
+	let h = typeof s == "string" ? s : "", { showCursor: g, visibleText: _, cursorPhase: v } = t({
+		text: h,
+		initialText: u,
 		animate: l,
-		delay: d,
-		waitForPageLoad: f
-	}), _ = {
-		"--brand-TextCursorAnimation-reveal-progress": g,
-		"--brand-TextCursorAnimation-cursor-progress": g
-	}, v = {
-		"--brand-TextCursorAnimation-reveal-progress": 1,
-		"--brand-TextCursorAnimation-cursor-progress": 1
-	}, y = l === !0 && m, b = y ? _ : v, x = m || s;
+		delay: f,
+		waitForPageLoad: p
+	}), y = l === !0 && h.length > 0, b = h || s, x = {
+		initial: r["TextCursorAnimation__cursor--initial"],
+		correction: r["TextCursorAnimation__cursor--correction"],
+		final: r["TextCursorAnimation__cursor--final"],
+		complete: r["TextCursorAnimation__cursor--complete"]
+	}[y ? v : "complete"];
 	return /* @__PURE__ */ i("span", {
 		className: e(r.TextCursorAnimation, c),
-		"data-testid": u || o.root,
+		"data-testid": d || o.root,
 		children: /* @__PURE__ */ a("span", {
-			className: r["TextCursorAnimation-inner"],
-			style: b,
-			children: [/* @__PURE__ */ i(n, {
-				size: "100",
-				variant: p,
-				font: "monospace",
-				weight: "medium",
-				className: r["TextCursorAnimation-text"],
-				children: x
-			}), (h || !y) && /* @__PURE__ */ i("span", {
-				className: r["TextCursorAnimation-cursor"],
-				"aria-hidden": "true",
-				"data-testid": o.cursor
+			className: r.TextCursorAnimation__inner,
+			children: [y && /* @__PURE__ */ a("span", {
+				className: r.TextCursorAnimation__sizingContainer,
+				children: [/* @__PURE__ */ i(n, {
+					size: "100",
+					variant: m,
+					font: "monospace",
+					weight: "medium",
+					className: e(r.TextCursorAnimation__text, r.TextCursorAnimation__sizingText),
+					children: h
+				}), u && u !== h && /* @__PURE__ */ i(n, {
+					size: "100",
+					variant: m,
+					font: "monospace",
+					weight: "medium",
+					className: e(r.TextCursorAnimation__text, r.TextCursorAnimation__sizingText),
+					"aria-hidden": "true",
+					children: u
+				})]
+			}), /* @__PURE__ */ a("span", {
+				className: e(r.TextCursorAnimation__content, y && r["TextCursorAnimation__content--animated"]),
+				"aria-hidden": y ? "true" : void 0,
+				children: [/* @__PURE__ */ i(n, {
+					size: "100",
+					variant: m,
+					font: "monospace",
+					weight: "medium",
+					className: r.TextCursorAnimation__text,
+					"data-testid": o.text,
+					children: y ? _ : b
+				}), g && /* @__PURE__ */ i("span", {
+					className: e(r.TextCursorAnimation__cursor, y && r["TextCursorAnimation__cursor--animated"], x),
+					"aria-hidden": "true",
+					"data-testid": o.cursor
+				})]
 			})]
 		})
 	});

package/esm/TextCursorAnimation/TextCursorAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextCursorAnimation.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useCursorAnimation} from '../hooks/useCursorAnimation'\nimport {EyebrowText} from '../EyebrowText'\nimport {TextProps} from '../Text/Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css'\n\nimport styles from './TextCursorAnimation.module.css'\n\nexport const testIds = {\n  root: 'TextCursorAnimation',\n  get cursor() {\n    return `${this.root}-cursor`\n  },\n}\n\nexport type TextCursorAnimationProps = {\n  /**\n   * Whether to animate the text reveal with a sliding wipe animation\n   * and a cursor that transitions from grey to green.\n   */\n  animate?: boolean\n  ['data-testid']?: string\n  delay?: number\n  waitForPageLoad?: boolean\n} & React.HTMLAttributes<HTMLSpanElement> &\n  Omit<TextProps, 'animate' | 'as'>\n\nexport function TextCursorAnimation({\n  children,\n  className,\n  animate,\n  'data-testid': testId,\n  delay = 500,\n  waitForPageLoad = true,\n  variant = 'muted',\n}: PropsWithChildren<TextCursorAnimationProps>) {\n  const text = typeof children === 'string' ? children : ''\n  const {showCursor, progress} = useCursorAnimation({\n    text,\n    animate,\n    delay,\n    waitForPageLoad,\n  })\n\n  const revealStyle = {\n    '--brand-TextCursorAnimation-reveal-progress': progress,\n    '--brand-TextCursorAnimation-cursor-progress': progress,\n  } as React.CSSProperties\n\n  const staticStyle = {\n    '--brand-TextCursorAnimation-reveal-progress': 1,\n    '--brand-TextCursorAnimation-cursor-progress': 1,\n  } as React.CSSProperties\n\n  const hasAnimation = animate === true && text\n\n  const style = hasAnimation ? revealStyle : staticStyle\n  const content = text || children\n\n  return (\n    <span className={clsx(styles.TextCursorAnimation, className)} data-testid={testId || testIds.root}>\n      <span className={styles['TextCursorAnimation-inner']} style={style}>\n        <EyebrowText\n          size=\"100\"\n          variant={variant}\n          font=\"monospace\"\n          weight=\"medium\"\n          className={styles['TextCursorAnimation-text']}\n        >\n          {content}\n        </EyebrowText>\n        {(showCursor || !hasAnimation) && (\n          <span className={styles['TextCursorAnimation-cursor']} aria-hidden=\"true\" data-testid={testIds.cursor} />\n        )}\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;AAUA,IAAa,IAAU;CACrB,MAAM;CACN,IAAI,SAAS;AACX,SAAO,GAAG,KAAK,KAAK;;CAEvB;AAcD,SAAgB,EAAoB,EAClC,aACA,cACA,YACA,eAAe,GACf,WAAQ,KACR,qBAAkB,IAClB,aAAU,WACoC;CAC9C,IAAM,IAAO,OAAO,KAAa,WAAW,IAAW,IACjD,EAAC,eAAY,gBAAY,EAAmB;EAChD;EACA;EACA;EACA;EACD,CAAC,EAEI,IAAc;EAClB,+CAA+C;EAC/C,+CAA+C;EAChD,EAEK,IAAc;EAClB,+CAA+C;EAC/C,+CAA+C;EAChD,EAEK,IAAe,MAAY,MAAQ,GAEnC,IAAQ,IAAe,IAAc,GACrC,IAAU,KAAQ;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAK,EAAO,qBAAqB,EAAU;EAAE,eAAa,KAAU,EAAQ;YAC3F,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAqC;aAA7D,CACE,kBAAC,GAAD;IACE,MAAK;IACI;IACT,MAAK;IACL,QAAO;IACP,WAAW,EAAO;cAEjB;IACW,CAAA,GACZ,KAAc,CAAC,MACf,kBAAC,QAAD;IAAM,WAAW,EAAO;IAA+B,eAAY;IAAO,eAAa,EAAQ;IAAU,CAAA,CAEtG;;EACF,CAAA"}
+{"version":3,"file":"TextCursorAnimation.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useCursorAnimation} from '../hooks/useCursorAnimation'\nimport {EyebrowText} from '../EyebrowText'\nimport {TextProps} from '../Text/Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css'\n\nimport styles from './TextCursorAnimation.module.css'\n\nexport const testIds = {\n  root: 'TextCursorAnimation',\n  get text() {\n    return `${this.root}-text`\n  },\n  get cursor() {\n    return `${this.root}-cursor`\n  },\n}\n\nexport type TextCursorAnimationProps = {\n  /**\n   * Whether to animate the text with a typing effect.\n   */\n  animate?: boolean\n  /**\n   * Optional text to type before transitioning to the final text\n   */\n  initialText?: string\n  ['data-testid']?: string\n  delay?: number\n  waitForPageLoad?: boolean\n} & React.HTMLAttributes<HTMLSpanElement> &\n  Omit<TextProps, 'animate' | 'as'>\n\nexport function TextCursorAnimation({\n  children,\n  className,\n  animate,\n  initialText,\n  'data-testid': testId,\n  delay,\n  waitForPageLoad = true,\n  variant = 'muted',\n}: PropsWithChildren<TextCursorAnimationProps>) {\n  const text = typeof children === 'string' ? children : ''\n  const {showCursor, visibleText, cursorPhase} = useCursorAnimation({\n    text,\n    initialText,\n    animate,\n    delay,\n    waitForPageLoad,\n  })\n\n  const hasAnimation = animate === true && text.length > 0\n  const content = text || children\n  const cursorPhaseClassName = {\n    initial: styles['TextCursorAnimation__cursor--initial'],\n    correction: styles['TextCursorAnimation__cursor--correction'],\n    final: styles['TextCursorAnimation__cursor--final'],\n    complete: styles['TextCursorAnimation__cursor--complete'],\n  }[hasAnimation ? cursorPhase : 'complete']\n\n  return (\n    <span className={clsx(styles.TextCursorAnimation, className)} data-testid={testId || testIds.root}>\n      <span className={styles.TextCursorAnimation__inner}>\n        {hasAnimation && (\n          <span className={styles.TextCursorAnimation__sizingContainer}>\n            <EyebrowText\n              size=\"100\"\n              variant={variant}\n              font=\"monospace\"\n              weight=\"medium\"\n              className={clsx(styles.TextCursorAnimation__text, styles.TextCursorAnimation__sizingText)}\n            >\n              {text}\n            </EyebrowText>\n            {initialText && initialText !== text && (\n              <EyebrowText\n                size=\"100\"\n                variant={variant}\n                font=\"monospace\"\n                weight=\"medium\"\n                className={clsx(styles.TextCursorAnimation__text, styles.TextCursorAnimation__sizingText)}\n                aria-hidden=\"true\"\n              >\n                {initialText}\n              </EyebrowText>\n            )}\n          </span>\n        )}\n        <span\n          className={clsx(\n            styles.TextCursorAnimation__content,\n            hasAnimation && styles['TextCursorAnimation__content--animated'],\n          )}\n          aria-hidden={hasAnimation ? 'true' : undefined}\n        >\n          <EyebrowText\n            size=\"100\"\n            variant={variant}\n            font=\"monospace\"\n            weight=\"medium\"\n            className={styles.TextCursorAnimation__text}\n            data-testid={testIds.text}\n          >\n            {hasAnimation ? visibleText : content}\n          </EyebrowText>\n          {showCursor && (\n            <span\n              className={clsx(\n                styles.TextCursorAnimation__cursor,\n                hasAnimation && styles['TextCursorAnimation__cursor--animated'],\n                cursorPhaseClassName,\n              )}\n              aria-hidden=\"true\"\n              data-testid={testIds.cursor}\n            />\n          )}\n        </span>\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;;AAWA,IAAa,IAAU;CACrB,MAAM;CACN,IAAI,OAAO;AACT,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,SAAS;AACX,SAAO,GAAG,KAAK,KAAK;;CAEvB;AAiBD,SAAgB,EAAoB,EAClC,aACA,cACA,YACA,gBACA,eAAe,GACf,UACA,qBAAkB,IAClB,aAAU,WACoC;CAC9C,IAAM,IAAO,OAAO,KAAa,WAAW,IAAW,IACjD,EAAC,eAAY,gBAAa,mBAAe,EAAmB;EAChE;EACA;EACA;EACA;EACA;EACD,CAAC,EAEI,IAAe,MAAY,MAAQ,EAAK,SAAS,GACjD,IAAU,KAAQ,GAClB,IAAuB;EAC3B,SAAS,EAAO;EAChB,YAAY,EAAO;EACnB,OAAO,EAAO;EACd,UAAU,EAAO;EAClB,CAAC,IAAe,IAAc;AAE/B,QACE,kBAAC,QAAD;EAAM,WAAW,EAAK,EAAO,qBAAqB,EAAU;EAAE,eAAa,KAAU,EAAQ;YAC3F,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAxB,CACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAK,EAAO,2BAA2B,EAAO,gCAAgC;eAExF;KACW,CAAA,EACb,KAAe,MAAgB,KAC9B,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAK,EAAO,2BAA2B,EAAO,gCAAgC;KACzF,eAAY;eAEX;KACW,CAAA,CAEX;OAET,kBAAC,QAAD;IACE,WAAW,EACT,EAAO,8BACP,KAAgB,EAAO,0CACxB;IACD,eAAa,IAAe,SAAS,KAAA;cALvC,CAOE,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAO;KAClB,eAAa,EAAQ;eAEpB,IAAe,IAAc;KAClB,CAAA,EACb,KACC,kBAAC,QAAD;KACE,WAAW,EACT,EAAO,6BACP,KAAgB,EAAO,0CACvB,EACD;KACD,eAAY;KACZ,eAAa,EAAQ;KACrB,CAAA,CAEC;MACF;;EACF,CAAA"}

package/esm/TextCursorAnimation/TextCursorAnimation.module-BS4hPR8H.css

@@ -0,0 +1 @@
+.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation___fMZNu{align-items:center;display:inline-flex}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__inner____uwkl{align-items:center;display:inline-flex;position:relative}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__text___t1rcc{font-weight:var(--brand-text-weight-500);white-space:pre}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingContainer___7_wcg{clip-path:inset(50%);display:inline-grid}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingText___Mhr64{grid-area:1/1}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content___M_K3E{align-items:center;gap:calc(var(--base-size-8) + var(--base-size-2));display:inline-flex}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content--animated___Zmg8H{position:absolute;inset-block-start:0;inset-inline-start:0}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor___suzWD{width:calc(var(--base-size-8) + var(--base-size-2) / 2);height:calc(var(--base-size-12) + var(--base-size-2));flex:0 0 calc(var(--base-size-8) + var(--base-size-2) / 2)}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--initial___Ozy64{background-color:var(--brand-TextCursorAnimation-cursor-color)}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--animated___EfpR4{animation:Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-cursor-blink___cTxPh var(--brand-TextCursorAnimation-cursor-animationDuration) steps(1, end) .25s 3 forwards}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--correction___y1c10{background-color:var(--brand-TextCursorAnimation-cursor-deleteColor)}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--final___fBBsR,.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--complete___gufWv{background-color:var(--brand-TextCursorAnimation-cursor-finalColor)}@keyframes Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-cursor-blink___cTxPh{0%,79%{opacity:1}80%,99%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor___suzWD{animation:none}}

package/esm/TextCursorAnimation/TextCursorAnimation.module.js

@@ -1,8 +1,18 @@
-import './TextCursorAnimation.module-BJLhwKrK.css';var e = {
+import './TextCursorAnimation.module-BS4hPR8H.css';var e = {
 	TextCursorAnimation: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation___fMZNu",
-	"TextCursorAnimation-inner": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-inner___h__Hj",
-	"TextCursorAnimation-text": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-text___sBYZ9",
-	"TextCursorAnimation-cursor": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-cursor___1_9mQ"
+	TextCursorAnimation__inner: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__inner____uwkl",
+	TextCursorAnimation__text: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__text___t1rcc",
+	TextCursorAnimation__sizingContainer: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingContainer___7_wcg",
+	TextCursorAnimation__sizingText: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingText___Mhr64",
+	TextCursorAnimation__content: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content___M_K3E",
+	"TextCursorAnimation__content--animated": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content--animated___Zmg8H",
+	TextCursorAnimation__cursor: "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor___suzWD",
+	"TextCursorAnimation__cursor--initial": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--initial___Ozy64",
+	"TextCursorAnimation__cursor--animated": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--animated___EfpR4",
+	"TextCursorAnimation-cursor-blink": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-cursor-blink___cTxPh",
+	"TextCursorAnimation__cursor--correction": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--correction___y1c10",
+	"TextCursorAnimation__cursor--final": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--final___fBBsR",
+	"TextCursorAnimation__cursor--complete": "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--complete___gufWv"
 };
 //#endregion
 export { e as default };

package/esm/TextCursorAnimation/TextCursorAnimation.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextCursorAnimation.module.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.module.css"],"sourcesContent":[".TextCursorAnimation {\n  display: inline-flex;\n  align-items: center;\n}\n\n.TextCursorAnimation-inner {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.TextCursorAnimation-text {\n  font-weight: var(--brand-text-weight-500);\n  clip-path: inset(0 calc((1 - var(--brand-TextCursorAnimation-reveal-progress, 1)) * 100%) 0 0);\n  white-space: pre;\n}\n\n.TextCursorAnimation-cursor {\n  position: absolute;\n  left: calc((var(--brand-TextCursorAnimation-reveal-progress, 1) * 100%) + var(--base-size-6));\n  top: calc((1lh - 0.3cap) / 2 - 0.5cap);\n  width: var(--base-size-8);\n  height: 1cap;\n  background-color: color-mix(\n    in srgb,\n    var(--brand-color-canvas-subtle) calc((1 - var(--brand-TextCursorAnimation-cursor-progress, 0)) * 100%),\n    var(--brand-TextCursorAnimation-cursor-color) calc(var(--brand-TextCursorAnimation-cursor-progress, 0) * 100%)\n  );\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .TextCursorAnimation-cursor {\n    display: none;\n  }\n\n  .TextCursorAnimation-text {\n    clip-path: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"TextCursorAnimation.module.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.module.css"],"sourcesContent":[".TextCursorAnimation {\n  display: inline-flex;\n  align-items: center;\n}\n\n.TextCursorAnimation__inner {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.TextCursorAnimation__text {\n  font-weight: var(--brand-text-weight-500);\n  white-space: pre;\n}\n\n.TextCursorAnimation__sizingContainer {\n  display: inline-grid;\n  clip-path: inset(50%);\n}\n\n.TextCursorAnimation__sizingText {\n  grid-area: 1 / 1;\n}\n\n.TextCursorAnimation__content {\n  display: inline-flex;\n  align-items: center;\n  gap: calc(var(--base-size-8) + var(--base-size-2));\n}\n\n.TextCursorAnimation__content--animated {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n}\n\n.TextCursorAnimation__cursor {\n  width: calc(var(--base-size-8) + var(--base-size-2) / 2);\n  height: calc(var(--base-size-12) + var(--base-size-2));\n  flex: 0 0 calc(var(--base-size-8) + var(--base-size-2) / 2);\n}\n\n.TextCursorAnimation__cursor--initial {\n  background-color: var(--brand-TextCursorAnimation-cursor-color);\n}\n\n.TextCursorAnimation__cursor--animated {\n  animation: TextCursorAnimation-cursor-blink var(--brand-TextCursorAnimation-cursor-animationDuration) steps(1, end)\n    250ms 3 forwards;\n}\n\n.TextCursorAnimation__cursor--correction {\n  background-color: var(--brand-TextCursorAnimation-cursor-deleteColor);\n}\n\n.TextCursorAnimation__cursor--final,\n.TextCursorAnimation__cursor--complete {\n  background-color: var(--brand-TextCursorAnimation-cursor-finalColor);\n}\n\n@keyframes TextCursorAnimation-cursor-blink {\n  0%,\n  79% {\n    opacity: 1;\n  }\n\n  80%,\n  99% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .TextCursorAnimation__cursor {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/esm/Token/Token.d.ts

@@ -34,8 +34,8 @@ type TokenAnchorProps = BaseProps<HTMLAnchorElement> & TokenSharedProps & {
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
 export type TokenProps = TokenSpanProps | TokenAnchorProps;
 /**
- * Use a Token to group short metadata or categories, with optional leading visuals.
- * @see https://primer.style/brand
+ * Use Token to display compact metadata that describes or supports adjacent content.
+ * @see https://primer.style/brand/components/Token
  */
 export declare const Token: React.ForwardRefExoticComponent<(Omit<TokenSpanProps, "ref"> | Omit<TokenAnchorProps, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>> & {
     testIds: {

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\" 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"}
+{"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 Token to display compact metadata that describes or supports adjacent content.\n * @see https://primer.style/brand/components/Token\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/hooks/useCursorAnimation.d.ts

@@ -1,38 +1,15 @@
+export type CursorAnimationPhase = 'initial' | 'correction' | 'final' | 'complete';
+export type UseCursorAnimationResult = {
+    visibleText: string;
+    showCursor: boolean;
+    cursorPhase: CursorAnimationPhase;
+};
 export type UseCursorAnimationOptions = {
-    /**
-     * The text content to animate
-     */
     text: string;
-    /**
-     * Whether to animate the text reveal with a cursor effect
-     */
+    initialText?: string;
     animate?: boolean;
-    /**
-     * Duration of the reveal animation in milliseconds
-     */
-    duration?: number;
-    /**
-     * Delay to start the animation in milliseconds
-     */
     delay?: number;
-    /**
-     * Loads after the page has fully loaded
-     */
     waitForPageLoad?: boolean;
 };
-export type UseCursorAnimationResult = {
-    /**
-     * Whether the animation is currently running
-     */
-    isAnimating: boolean;
-    /**
-     * Whether to show the cursor
-     */
-    showCursor: boolean;
-    /**
-     * Progress of the animation (0 to 1)
-     */
-    progress: number;
-};
-export declare function useCursorAnimation({ text, animate, duration, delay, waitForPageLoad, }: UseCursorAnimationOptions): UseCursorAnimationResult;
+export declare function useCursorAnimation({ text, initialText, animate, delay, waitForPageLoad, }: UseCursorAnimationOptions): UseCursorAnimationResult;
 //# sourceMappingURL=useCursorAnimation.d.ts.map

package/esm/hooks/useCursorAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/hooks/useCursorAnimation.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,yBAAyB,GAAG;IACtC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,WAAW,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,QAAc,EACd,KAAW,EACX,eAAsB,GACvB,EAAE,yBAAyB,GAAG,wBAAwB,CAiFtD"}
+{"version":3,"file":"useCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/hooks/useCursorAnimation.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,CAAA;AAElF,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,oBAAoB,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,WAAW,EACX,OAAO,EACP,KAAW,EACX,eAAsB,GACvB,EAAE,yBAAyB,GAAG,wBAAwB,CA6KtD"}

package/esm/hooks/useCursorAnimation.js

@@ -1,50 +1,98 @@
-import { useReducedMotion as e } from "./useReducedMotion.js";
-import { useCallback as t, useEffect as n, useState as r } from "react";
+import e from "./useIsomorphicLayoutEffect.js";
+import { useReducedMotion as t } from "./useReducedMotion.js";
+import { useEffect as n, useState as r } from "react";
 //#region src/hooks/useCursorAnimation.ts
-function i({ text: i, animate: a, duration: o = 500, delay: s = 500, waitForPageLoad: c = !0 }) {
-	let l = e(), u = a === !0 && !l && i.length > 0, [d, f] = r(u), [p, m] = r(+!u), h = t(() => {
-		if (!u) {
-			m(1), f(!1);
-			return;
-		}
-		f(!0), m(0);
-		let e = performance.now(), t = (n) => {
-			let r = n - e, i = Math.min(r / o, 1);
-			m(i), i < 1 ? requestAnimationFrame(t) : f(!1);
+function i({ text: i, initialText: a, animate: o, delay: s = 500, waitForPageLoad: c = !0 }) {
+	let l = t(), u = o === !0 && !l && i.length > 0, d = o === !0 && i.length > 0, [f, p] = r({
+		visibleText: d ? "" : i,
+		showCursor: !d,
+		cursorPhase: d ? "initial" : "complete"
+	});
+	return e(() => {
+		u || p({
+			visibleText: i,
+			showCursor: !0,
+			cursorPhase: "complete"
+		});
+	}, [u, i]), n(() => {
+		if (!u) return;
+		let e = 1e3 / 60, t = 85 / 75 * 24, n = [
+			">",
+			"*",
+			"=",
+			"&",
+			"+",
+			"-",
+			"%",
+			"^",
+			"_"
+		];
+		p({
+			visibleText: "",
+			showCursor: !1,
+			cursorPhase: "initial"
+		});
+		let r = typeof a == "string" && a.length > 0 && a !== i ? a : void 0, o = 0;
+		if (r) for (; o < r.length && o < i.length && r[o] === i[o];) o += 1;
+		let l = r !== void 0 && o < r.length, d = l ? r : i, f = l ? d.length - o : 0, m = d.length / 34 * 1e3, h = m + (l ? 308.8235294117647 : 0), g = h + f / t * 1e3, _ = g + (l ? i.length - o : 0) / 34 * 1e3, v = h - e, y = _ - 6 * e, b = (e, t) => {
+			let r = "", i = 0;
+			for (let a = 0; a < t; a += 1) {
+				let o = e[a];
+				if (/\s/.test(o)) {
+					r = `${r}${o}`;
+					continue;
+				}
+				i += 1, r = `${r}${o}`, a === t - 1 && (r = `${r}${n[(i - 1) % n.length]}`);
+			}
+			return r;
+		}, x = (e) => {
+			let n = "";
+			if (e > 0 && e < m) n = b(d, Math.floor(e / 1e3 * 34));
+			else if (l && e >= m && e < h) n = d;
+			else if (l && e >= h && e < g) {
+				let r = e - h, i = Math.floor(r / 1e3 * t);
+				n = d.slice(0, d.length - i);
+			} else if (l && e >= g && e < _) {
+				let t = e - g, r = Math.min(i.length, o + Math.floor(t / 1e3 * 34));
+				n = i.slice(0, r);
+			} else e >= _ && (n = i);
+			let r = "initial";
+			return l && e >= v && (r = "correction"), e >= y && (r = "final"), e >= _ && (r = "complete"), {
+				visibleText: n,
+				showCursor: n.length > 0,
+				cursorPhase: r
+			};
+		}, S, C, w = () => {
+			let e = performance.now(), t = {
+				visibleText: "",
+				showCursor: !1,
+				cursorPhase: "initial"
+			}, n = (r) => {
+				let i = r - e, a = x(i);
+				(t.visibleText !== a.visibleText || t.showCursor !== a.showCursor || t.cursorPhase !== a.cursorPhase) && (t = a, p(a)), i < _ && (S = window.requestAnimationFrame(n));
+			};
+			S = window.requestAnimationFrame(n);
+		}, T = () => {
+			C = setTimeout(w, s);
 		};
-		requestAnimationFrame(t);
-	}, [u, o]);
-	return n(() => {
-		if (!u) {
-			m(1), f(!1);
-			return;
-		}
-		let e = () => setTimeout(() => {
-			h();
-		}, s), t;
-		if (c && typeof window < "u") if (document.readyState === "complete") t = e();
+		if (c && typeof window < "u") if (document.readyState === "complete") T();
 		else {
-			let n = () => {
-				t = e();
-			};
-			return window.addEventListener("load", n), () => {
-				window.removeEventListener("load", n), t && clearTimeout(t);
+			let e = () => T();
+			return window.addEventListener("load", e), () => {
+				window.removeEventListener("load", e), C !== void 0 && clearTimeout(C), S !== void 0 && window.cancelAnimationFrame(S);
 			};
 		}
-		else t = e();
+		else T();
 		return () => {
-			t && clearTimeout(t);
+			C !== void 0 && clearTimeout(C), S !== void 0 && window.cancelAnimationFrame(S);
 		};
 	}, [
-		h,
 		s,
+		a,
 		u,
+		i,
 		c
-	]), {
-		isAnimating: d,
-		showCursor: !l && a === !0,
-		progress: p
-	};
+	]), f;
 }
 //#endregion
 export { i as useCursorAnimation };

package/esm/hooks/useCursorAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCursorAnimation.js","names":[],"sources":["../../src/hooks/useCursorAnimation.ts"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react'\nimport {useReducedMotion} from './useReducedMotion'\n\nexport type UseCursorAnimationOptions = {\n  /**\n   * The text content to animate\n   */\n  text: string\n  /**\n   * Whether to animate the text reveal with a cursor effect\n   */\n  animate?: boolean\n  /**\n   * Duration of the reveal animation in milliseconds\n   */\n  duration?: number\n  /**\n   * Delay to start the animation in milliseconds\n   */\n  delay?: number\n  /**\n   * Loads after the page has fully loaded\n   */\n  waitForPageLoad?: boolean\n}\n\nexport type UseCursorAnimationResult = {\n  /**\n   * Whether the animation is currently running\n   */\n  isAnimating: boolean\n  /**\n   * Whether to show the cursor\n   */\n  showCursor: boolean\n  /**\n   * Progress of the animation (0 to 1)\n   */\n  progress: number\n}\n\nexport function useCursorAnimation({\n  text,\n  animate,\n  duration = 500,\n  delay = 500,\n  waitForPageLoad = true,\n}: UseCursorAnimationOptions): UseCursorAnimationResult {\n  const prefersReducedMotion = useReducedMotion()\n  const shouldAnimate = animate === true && !prefersReducedMotion && text.length > 0\n\n  const [isAnimating, setIsAnimating] = useState(shouldAnimate)\n  const [progress, setProgress] = useState(shouldAnimate ? 0 : 1)\n\n  const startAnimation = useCallback(() => {\n    if (!shouldAnimate) {\n      setProgress(1)\n      setIsAnimating(false)\n      return\n    }\n\n    setIsAnimating(true)\n    setProgress(0)\n\n    const startTime = performance.now()\n\n    const tick = (currentTime: number) => {\n      const elapsed = currentTime - startTime\n      const newProgress = Math.min(elapsed / duration, 1)\n\n      setProgress(newProgress)\n\n      if (newProgress < 1) {\n        requestAnimationFrame(tick)\n      } else {\n        setIsAnimating(false)\n      }\n    }\n\n    requestAnimationFrame(tick)\n  }, [shouldAnimate, duration])\n\n  useEffect(() => {\n    if (!shouldAnimate) {\n      setProgress(1)\n      setIsAnimating(false)\n      return\n    }\n\n    const startDelayTimer = () => {\n      return setTimeout(() => {\n        startAnimation()\n      }, delay)\n    }\n\n    let delayTimer: ReturnType<typeof setTimeout> | undefined\n\n    if (waitForPageLoad && typeof window !== 'undefined') {\n      // Check if page is already loaded\n      if (document.readyState === 'complete') {\n        delayTimer = startDelayTimer()\n      } else {\n        // Wait for page load before starting the delay timer\n        const handleLoad = () => {\n          delayTimer = startDelayTimer()\n        }\n        window.addEventListener('load', handleLoad)\n        return () => {\n          window.removeEventListener('load', handleLoad)\n          if (delayTimer) clearTimeout(delayTimer)\n        }\n      }\n    } else {\n      delayTimer = startDelayTimer()\n    }\n\n    return () => {\n      if (delayTimer) clearTimeout(delayTimer)\n    }\n  }, [startAnimation, delay, shouldAnimate, waitForPageLoad])\n\n  const showCursor = !prefersReducedMotion && animate === true\n\n  return {\n    isAnimating,\n    showCursor,\n    progress,\n  }\n}\n"],"mappings":";;;AAyCA,SAAgB,EAAmB,EACjC,SACA,YACA,cAAW,KACX,WAAQ,KACR,qBAAkB,MACoC;CACtD,IAAM,IAAuB,GAAkB,EACzC,IAAgB,MAAY,MAAQ,CAAC,KAAwB,EAAK,SAAS,GAE3E,CAAC,GAAa,KAAkB,EAAS,EAAc,EACvD,CAAC,GAAU,KAAe,EAAS,IAAsB,EAEzD,IAAiB,QAAkB;AACvC,MAAI,CAAC,GAAe;AAElB,GADA,EAAY,EAAE,EACd,EAAe,GAAM;AACrB;;AAIF,EADA,EAAe,GAAK,EACpB,EAAY,EAAE;EAEd,IAAM,IAAY,YAAY,KAAK,EAE7B,KAAQ,MAAwB;GACpC,IAAM,IAAU,IAAc,GACxB,IAAc,KAAK,IAAI,IAAU,GAAU,EAAE;AAInD,GAFA,EAAY,EAAY,EAEpB,IAAc,IAChB,sBAAsB,EAAK,GAE3B,EAAe,GAAM;;AAIzB,wBAAsB,EAAK;IAC1B,CAAC,GAAe,EAAS,CAAC;AA2C7B,QAzCA,QAAgB;AACd,MAAI,CAAC,GAAe;AAElB,GADA,EAAY,EAAE,EACd,EAAe,GAAM;AACrB;;EAGF,IAAM,UACG,iBAAiB;AACtB,MAAgB;KACf,EAAM,EAGP;AAEJ,MAAI,KAAmB,OAAO,SAAW,IAEvC,KAAI,SAAS,eAAe,WAC1B,KAAa,GAAiB;OACzB;GAEL,IAAM,UAAmB;AACvB,QAAa,GAAiB;;AAGhC,UADA,OAAO,iBAAiB,QAAQ,EAAW,QAC9B;AAEX,IADA,OAAO,oBAAoB,QAAQ,EAAW,EAC1C,KAAY,aAAa,EAAW;;;MAI5C,KAAa,GAAiB;AAGhC,eAAa;AACX,GAAI,KAAY,aAAa,EAAW;;IAEzC;EAAC;EAAgB;EAAO;EAAe;EAAgB,CAAC,EAIpD;EACL;EACA,YAJiB,CAAC,KAAwB,MAAY;EAKtD;EACD"}
+{"version":3,"file":"useCursorAnimation.js","names":[],"sources":["../../src/hooks/useCursorAnimation.ts"],"sourcesContent":["import {useEffect, useState} from 'react'\nimport useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'\nimport {useReducedMotion} from './useReducedMotion'\n\nexport type CursorAnimationPhase = 'initial' | 'correction' | 'final' | 'complete'\n\nexport type UseCursorAnimationResult = {\n  visibleText: string\n  showCursor: boolean\n  cursorPhase: CursorAnimationPhase\n}\n\nexport type UseCursorAnimationOptions = {\n  text: string\n  initialText?: string\n  animate?: boolean\n  delay?: number\n  waitForPageLoad?: boolean\n}\n\nexport function useCursorAnimation({\n  text,\n  initialText,\n  animate,\n  delay = 500,\n  waitForPageLoad = true,\n}: UseCursorAnimationOptions): UseCursorAnimationResult {\n  const prefersReducedMotion = useReducedMotion()\n\n  const shouldAnimate = animate === true && !prefersReducedMotion && text.length > 0\n  const shouldStartHidden = animate === true && text.length > 0\n\n  const [frame, setFrame] = useState<UseCursorAnimationResult>({\n    visibleText: shouldStartHidden ? '' : text,\n    showCursor: !shouldStartHidden,\n    cursorPhase: shouldStartHidden ? 'initial' : 'complete',\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    if (!shouldAnimate) {\n      setFrame({visibleText: text, showCursor: true, cursorPhase: 'complete'})\n    }\n  }, [shouldAnimate, text])\n\n  useEffect(() => {\n    if (!shouldAnimate) return\n\n    const frameDuration = 1000 / 60\n    const charactersPerSecond = 30 * (85 / 75)\n    const deleteCharactersPerSecond = 24 * (85 / 75)\n    const correctionPauseDuration = 350 / (85 / 75)\n    const scrambleSymbols = ['>', '*', '=', '&', '+', '-', '%', '^', '_']\n\n    setFrame({visibleText: '', showCursor: false, cursorPhase: 'initial'})\n\n    const candidateInitialText =\n      typeof initialText === 'string' && initialText.length > 0 && initialText !== text ? initialText : undefined\n    let sharedPrefixLength = 0\n\n    if (candidateInitialText) {\n      while (\n        sharedPrefixLength < candidateInitialText.length &&\n        sharedPrefixLength < text.length &&\n        candidateInitialText[sharedPrefixLength] === text[sharedPrefixLength]\n      ) {\n        sharedPrefixLength += 1\n      }\n    }\n\n    const hasCorrection = candidateInitialText !== undefined && sharedPrefixLength < candidateInitialText.length\n    const firstText = hasCorrection ? candidateInitialText : text\n    const deletedCharacterCount = hasCorrection ? firstText.length - sharedPrefixLength : 0\n    const firstTypeDuration = (firstText.length / charactersPerSecond) * 1000\n    const correctionStart = firstTypeDuration + (hasCorrection ? correctionPauseDuration : 0)\n    const deleteDuration = (deletedCharacterCount / deleteCharactersPerSecond) * 1000\n    const secondTypeStart = correctionStart + deleteDuration\n    const secondTypeCharacterCount = hasCorrection ? text.length - sharedPrefixLength : 0\n    const secondTypeDuration = (secondTypeCharacterCount / charactersPerSecond) * 1000\n    const typingComplete = secondTypeStart + secondTypeDuration\n    const correctionCursorStart = correctionStart - frameDuration\n    const finalCursorStart = typingComplete - 6 * frameDuration\n\n    const getScrambledText = (sourceText: string, characterCount: number) => {\n      let result = ''\n      let visibleCharacterIndex = 0\n\n      for (let index = 0; index < characterCount; index += 1) {\n        const character = sourceText[index]\n\n        if (/\\s/.test(character)) {\n          result = `${result}${character}`\n          continue\n        }\n\n        visibleCharacterIndex += 1\n        result = `${result}${character}`\n\n        if (index === characterCount - 1) {\n          result = `${result}${scrambleSymbols[(visibleCharacterIndex - 1) % scrambleSymbols.length]}`\n        }\n      }\n\n      return result\n    }\n\n    const getFrame = (elapsed: number): UseCursorAnimationResult => {\n      let nextText = ''\n\n      if (elapsed > 0 && elapsed < firstTypeDuration) {\n        const typedCharacterCount = Math.floor((elapsed / 1000) * charactersPerSecond)\n        nextText = getScrambledText(firstText, typedCharacterCount)\n      } else if (hasCorrection && elapsed >= firstTypeDuration && elapsed < correctionStart) {\n        nextText = firstText\n      } else if (hasCorrection && elapsed >= correctionStart && elapsed < secondTypeStart) {\n        const deleteElapsed = elapsed - correctionStart\n        const currentDeletedCharacterCount = Math.floor((deleteElapsed / 1000) * deleteCharactersPerSecond)\n        nextText = firstText.slice(0, firstText.length - currentDeletedCharacterCount)\n      } else if (hasCorrection && elapsed >= secondTypeStart && elapsed < typingComplete) {\n        const secondTypeElapsed = elapsed - secondTypeStart\n        const typedCharacterCount = Math.min(\n          text.length,\n          sharedPrefixLength + Math.floor((secondTypeElapsed / 1000) * charactersPerSecond),\n        )\n        nextText = text.slice(0, typedCharacterCount)\n      } else if (elapsed >= typingComplete) {\n        nextText = text\n      }\n\n      let nextCursorPhase: CursorAnimationPhase = 'initial'\n      if (hasCorrection && elapsed >= correctionCursorStart) nextCursorPhase = 'correction'\n      if (elapsed >= finalCursorStart) nextCursorPhase = 'final'\n      if (elapsed >= typingComplete) nextCursorPhase = 'complete'\n\n      return {\n        visibleText: nextText,\n        showCursor: nextText.length > 0,\n        cursorPhase: nextCursorPhase,\n      }\n    }\n\n    let animationFrame: number | undefined\n    let delayTimer: ReturnType<typeof setTimeout> | undefined\n\n    const startAnimation = () => {\n      const startTime = performance.now()\n      let previousFrame: UseCursorAnimationResult = {\n        visibleText: '',\n        showCursor: false,\n        cursorPhase: 'initial',\n      }\n\n      const tick = (currentTime: number) => {\n        const elapsed = currentTime - startTime\n        const nextFrame = getFrame(elapsed)\n\n        if (\n          previousFrame.visibleText !== nextFrame.visibleText ||\n          previousFrame.showCursor !== nextFrame.showCursor ||\n          previousFrame.cursorPhase !== nextFrame.cursorPhase\n        ) {\n          previousFrame = nextFrame\n          setFrame(nextFrame)\n        }\n\n        if (elapsed < typingComplete) {\n          animationFrame = window.requestAnimationFrame(tick)\n        }\n      }\n\n      animationFrame = window.requestAnimationFrame(tick)\n    }\n\n    const startDelayTimer = () => {\n      delayTimer = setTimeout(startAnimation, delay)\n    }\n\n    if (waitForPageLoad && typeof window !== 'undefined') {\n      if (document.readyState === 'complete') {\n        startDelayTimer()\n      } else {\n        const handleLoad = () => startDelayTimer()\n        window.addEventListener('load', handleLoad)\n        return () => {\n          window.removeEventListener('load', handleLoad)\n          if (delayTimer !== undefined) clearTimeout(delayTimer)\n          if (animationFrame !== undefined) window.cancelAnimationFrame(animationFrame)\n        }\n      }\n    } else {\n      startDelayTimer()\n    }\n\n    return () => {\n      if (delayTimer !== undefined) clearTimeout(delayTimer)\n      if (animationFrame !== undefined) window.cancelAnimationFrame(animationFrame)\n    }\n  }, [delay, initialText, shouldAnimate, text, waitForPageLoad])\n\n  return frame\n}\n"],"mappings":";;;;AAoBA,SAAgB,EAAmB,EACjC,SACA,gBACA,YACA,WAAQ,KACR,qBAAkB,MACoC;CACtD,IAAM,IAAuB,GAAkB,EAEzC,IAAgB,MAAY,MAAQ,CAAC,KAAwB,EAAK,SAAS,GAC3E,IAAoB,MAAY,MAAQ,EAAK,SAAS,GAEtD,CAAC,GAAO,KAAY,EAAmC;EAC3D,aAAa,IAAoB,KAAK;EACtC,YAAY,CAAC;EACb,aAAa,IAAoB,YAAY;EAC9C,CAAC;AAkKF,QAhKA,QAAgC;AAC9B,EAAK,KACH,EAAS;GAAC,aAAa;GAAM,YAAY;GAAM,aAAa;GAAW,CAAC;IAEzE,CAAC,GAAe,EAAK,CAAC,EAEzB,QAAgB;AACd,MAAI,CAAC,EAAe;EAEpB,IAAM,IAAgB,MAAO,IAEvB,IAAkC,KAAK,KAAX,IAE5B,IAAkB;GAAC;GAAK;GAAK;GAAK;GAAK;GAAK;GAAK;GAAK;GAAK;GAAI;AAErE,IAAS;GAAC,aAAa;GAAI,YAAY;GAAO,aAAa;GAAU,CAAC;EAEtE,IAAM,IACJ,OAAO,KAAgB,YAAY,EAAY,SAAS,KAAK,MAAgB,IAAO,IAAc,KAAA,GAChG,IAAqB;AAEzB,MAAI,EACF,QACE,IAAqB,EAAqB,UAC1C,IAAqB,EAAK,UAC1B,EAAqB,OAAwB,EAAK,IAElD,MAAsB;EAI1B,IAAM,IAAgB,MAAyB,KAAA,KAAa,IAAqB,EAAqB,QAChG,IAAY,IAAgB,IAAuB,GACnD,IAAwB,IAAgB,EAAU,SAAS,IAAqB,GAChF,IAAqB,EAAU,SAAS,KAAuB,KAC/D,IAAkB,KAAqB,IAAgB,oBAA0B,IAEjF,IAAkB,IADA,IAAwB,IAA6B,KAIvE,IAAiB,KAFU,IAAgB,EAAK,SAAS,IAAqB,KAC7B,KAAuB,KAExE,IAAwB,IAAkB,GAC1C,IAAmB,IAAiB,IAAI,GAExC,KAAoB,GAAoB,MAA2B;GACvE,IAAI,IAAS,IACT,IAAwB;AAE5B,QAAK,IAAI,IAAQ,GAAG,IAAQ,GAAgB,KAAS,GAAG;IACtD,IAAM,IAAY,EAAW;AAE7B,QAAI,KAAK,KAAK,EAAU,EAAE;AACxB,SAAS,GAAG,IAAS;AACrB;;AAMF,IAHA,KAAyB,GACzB,IAAS,GAAG,IAAS,KAEjB,MAAU,IAAiB,MAC7B,IAAS,GAAG,IAAS,GAAiB,IAAwB,KAAK,EAAgB;;AAIvF,UAAO;KAGH,KAAY,MAA8C;GAC9D,IAAI,IAAW;AAEf,OAAI,IAAU,KAAK,IAAU,EAE3B,KAAW,EAAiB,GADA,KAAK,MAAO,IAAU,MAAQ,GACnB,CAAoB;YAClD,KAAiB,KAAW,KAAqB,IAAU,EACpE,KAAW;YACF,KAAiB,KAAW,KAAmB,IAAU,GAAiB;IACnF,IAAM,IAAgB,IAAU,GAC1B,IAA+B,KAAK,MAAO,IAAgB,MAAQ,EAA0B;AACnG,QAAW,EAAU,MAAM,GAAG,EAAU,SAAS,EAA6B;cACrE,KAAiB,KAAW,KAAmB,IAAU,GAAgB;IAClF,IAAM,IAAoB,IAAU,GAC9B,IAAsB,KAAK,IAC/B,EAAK,QACL,IAAqB,KAAK,MAAO,IAAoB,MAAQ,GAAoB,CAClF;AACD,QAAW,EAAK,MAAM,GAAG,EAAoB;UACpC,KAAW,MACpB,IAAW;GAGb,IAAI,IAAwC;AAK5C,UAJI,KAAiB,KAAW,MAAuB,IAAkB,eACrE,KAAW,MAAkB,IAAkB,UAC/C,KAAW,MAAgB,IAAkB,aAE1C;IACL,aAAa;IACb,YAAY,EAAS,SAAS;IAC9B,aAAa;IACd;KAGC,GACA,GAEE,UAAuB;GAC3B,IAAM,IAAY,YAAY,KAAK,EAC/B,IAA0C;IAC5C,aAAa;IACb,YAAY;IACZ,aAAa;IACd,EAEK,KAAQ,MAAwB;IACpC,IAAM,IAAU,IAAc,GACxB,IAAY,EAAS,EAAQ;AAWnC,KARE,EAAc,gBAAgB,EAAU,eACxC,EAAc,eAAe,EAAU,cACvC,EAAc,gBAAgB,EAAU,iBAExC,IAAgB,GAChB,EAAS,EAAU,GAGjB,IAAU,MACZ,IAAiB,OAAO,sBAAsB,EAAK;;AAIvD,OAAiB,OAAO,sBAAsB,EAAK;KAG/C,UAAwB;AAC5B,OAAa,WAAW,GAAgB,EAAM;;AAGhD,MAAI,KAAmB,OAAO,SAAW,IACvC,KAAI,SAAS,eAAe,WAC1B,IAAiB;OACZ;GACL,IAAM,UAAmB,GAAiB;AAE1C,UADA,OAAO,iBAAiB,QAAQ,EAAW,QAC9B;AAGX,IAFA,OAAO,oBAAoB,QAAQ,EAAW,EAC1C,MAAe,KAAA,KAAW,aAAa,EAAW,EAClD,MAAmB,KAAA,KAAW,OAAO,qBAAqB,EAAe;;;MAIjF,IAAiB;AAGnB,eAAa;AAEX,GADI,MAAe,KAAA,KAAW,aAAa,EAAW,EAClD,MAAmB,KAAA,KAAW,OAAO,qBAAqB,EAAe;;IAE9E;EAAC;EAAO;EAAa;EAAe;EAAM;EAAgB,CAAC,EAEvD"}

package/esm/index.d.ts

@@ -9,6 +9,7 @@ export * from './river';
 export * from './MediaPlaylist';
 export * from './SubdomainNavBar';
 export * from './InlineLink';
+export * from './InlineCode';
 export * from './Link';
 export * from './Label';
 export * from './Token';

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AAGvB,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA"}

package/esm/index.esm.js

@@ -31,50 +31,51 @@ import { MediaPlaylist as We } from "./MediaPlaylist/MediaPlaylist.js";
 import { useFocusTrap as Ge } from "./hooks/useFocusTrap.js";
 import { SubdomainNavBar as Ke } from "./SubdomainNavBar/SubdomainNavBar.js";
 import { InlineLink as qe } from "./InlineLink/InlineLink.js";
-import { Token as Je, TokenVariants as Ye, defaultTokenVariant as Xe } from "./Token/Token.js";
-import { Accordion as Ze, AccordionContent as Qe, AccordionHeading as $e, AccordionRoot as et, AccordionToggleColors as tt } from "./Accordion/Accordion.js";
-import { FAQ as nt } from "./FAQ/FAQ.js";
-import { FAQGroup as rt } from "./FAQ/FAQGroup.js";
-import { Checkbox as it } from "./forms/Checkbox/Checkbox.js";
-import { DEFAULT_TEXTAREA_COLS as at, DEFAULT_TEXTAREA_RESIZE as ot, DEFAULT_TEXTAREA_ROWS as st, Textarea as ct } from "./forms/Textarea/Textarea.js";
-import { TextInput as lt } from "./forms/TextInput/TextInput.js";
-import { Select as ut } from "./forms/Select/Select.js";
-import { Radio as dt } from "./forms/Radio/Radio.js";
-import { FormControl as ft } from "./forms/FormControl/FormControl.js";
-import { CheckboxGroup as pt } from "./forms/CheckboxGroup/CheckboxGroup.js";
-import { RadioGroup as mt } from "./forms/RadioGroup/RadioGroup.js";
-import { Avatar as ht, AvatarShapes as gt, AvatarSizes as _t } from "./Avatar/Avatar.js";
-import { Testimonial as vt, TestimonialQuoteMarkColors as yt, TestimonialVariants as bt, defaultQuoteMarkColor as xt, defaultTestimonialVariant as St } from "./Testimonial/Testimonial.js";
-import { ComparisonTable as Ct, _ComparisonTable as wt } from "./ComparisonTable/ComparisonTable.js";
-import { AnchorNav as Tt } from "./AnchorNav/AnchorNav.js";
-import { CTABanner as Et, CTABannerBackgroundColors as Dt } from "./CTABanner/CTABanner.js";
-import { UnorderedList as Ot } from "./list/UnorderedList/UnorderedList.js";
-import { OrderedList as kt } from "./list/OrderedList/OrderedList.js";
-import { CTAForm as At } from "./CTAForm/CTAForm.js";
-import { MinimalFooter as jt } from "./MinimalFooter/MinimalFooter.js";
-import { Pillar as Mt, defaultPillarIconColor as Nt, defaultPillarIconSize as Pt } from "./Pillar/Pillar.js";
-import { Card as Ft, CardBackgroundColors as It, CardCTAVariants as Lt, CardIconColors as Rt, CardImagePaddingOptions as zt, CardLabelVariants as Bt, CardTokenPositions as Vt, CardVariants as Ht, defaultCardCTAVariant as Ut, defaultCardIconColor as Wt, defaultCardLabelVariant as Gt } from "./Card/Card.js";
-import { SectionIntro as Kt } from "./SectionIntro/SectionIntro.js";
-import { Prose as qt } from "./Prose/Prose.js";
-import { useVideo as Jt } from "./VideoPlayer/hooks/useVideo.js";
-import { VideoPlayer as Yt } from "./VideoPlayer/VideoPlayer.js";
-import { MinimalVideoPlayer as Xt, _MinimalVideoPlayer as Zt } from "./MinimalVideoPlayer/MinimalVideoPlayer.js";
-import { LogoSuite as Qt } from "./LogoSuite/LogoSuite.js";
-import { Timeline as $t } from "./Timeline/Timeline.js";
-import { Bento as en } from "./Bento/Bento.js";
-import { EyebrowBanner as tn, EyebrowBannerIconColors as nn, EyebrowBannerLabelColors as rn, defaultEyebrowBannerIconColor as an } from "./EyebrowBanner/EyebrowBanner.js";
-import { Tooltip as on, TooltipContext as sn } from "./Tooltip/Tooltip.js";
-import { PricingOptions as cn } from "./PricingOptions/PricingOptions.js";
-import { SubNav as ln, SubNavSubMenuVariants as un, useSubNavContext as dn } from "./SubNav/SubNav.js";
-import { NavList as fn } from "./NavList/NavList.js";
-import { IDE as pn, IDEDefaultIconMap as mn, IDEFileExtensions as hn } from "./IDE/IDE.js";
-import { BreadcrumbVariants as gn, Breadcrumbs as _n } from "./Breadcrumbs/Breadcrumbs.js";
-import { Section as vn, SectionBackgroundColors as yn, SectionPaddingVariants as bn } from "./Section/Section.js";
-import { Statistic as xn, StatisticSizes as Sn, StatisticSpacingValues as Cn } from "./Statistic/Statistic.js";
-import { BreakoutBanner as wn, BreakoutBannerBackgroundColors as Tn } from "./BreakoutBanner/BreakoutBanner.js";
-import { Footnotes as En, FootnotesItemTags as Dn, FootnotesTags as On } from "./Footnotes/Footnotes.js";
-import { FrostedGlassVFX as kn, FrostedGlassVFXIntensity as An, defaultFrostedGlassVFXIntensity as jn } from "./FrostedGlassVFX/FrostedGlassVFX.js";
-import { SectionIntroStacked as Mn, SectionIntroStackedVariants as Nn } from "./SectionIntroStacked/SectionIntroStacked.js";
-import { Tabs as Pn } from "./Tabs/Tabs.js";
-import { Tiles as Fn } from "./Tiles/Tiles.js";
-export { Ze as Accordion, Qe as AccordionContent, $e as AccordionHeading, et as AccordionRoot, tt as AccordionToggleColors, ne as ActionMenu, re as ActionMenuButtonModes, ie as ActionMenuProvider, ae as ActionMenuSizes, Tt as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, ht as Avatar, gt as AvatarShapes, _t as AvatarSizes, en as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, gn as BreadcrumbVariants, _n as Breadcrumbs, wn as BreakoutBanner, Tn as BreakoutBannerBackgroundColors, ze as BreakpointSize, K as Button, ce as ButtonGroup, q as ButtonSizes, J as ButtonVariants, Et as CTABanner, Dt as CTABannerBackgroundColors, At as CTAForm, Ft as Card, It as CardBackgroundColors, Lt as CardCTAVariants, Rt as CardIconColors, zt as CardImagePaddingOptions, Bt as CardLabelVariants, Vt as CardTokenPositions, Ht as CardVariants, it as Checkbox, pt as CheckboxGroup, Q as ColorModesEnum, Ct as ComparisonTable, at as DEFAULT_TEXTAREA_COLS, ot as DEFAULT_TEXTAREA_RESIZE, st as DEFAULT_TEXTAREA_ROWS, tn as EyebrowBanner, nn as EyebrowBannerIconColors, rn as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, nt as FAQ, rt as FAQGroup, En as Footnotes, Dn as FootnotesItemTags, On as FootnotesTags, ft as FormControl, kn as FrostedGlassVFX, An as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, de as Hero, pn as IDE, mn as IDEDefaultIconMap, hn as IDEFileExtensions, je as Icon, le as Image, ue as ImageBorderRadiusOptions, qe as InlineLink, ve as Label, ye as LabelColors, be as LabelSizes, me as Link, he as LinkArrowDirections, ge as LinkSizes, _e as LinkVariants, Qt as LogoSuite, We as MediaPlaylist, jt as MinimalFooter, Xt as MinimalVideoPlayer, fn as NavList, kt as OrderedList, Ue as Pagination, Mt as Pillar, cn as PricingOptions, qt as Prose, dt as Radio, mt as RadioGroup, Ce as River, fe as RiverAccordion, pe as RiverAccordionVariants, ke as RiverBreakout, Ve as RiverBreakoutTabs, Ae as RiverBreakoutVariants, He as RiverStoryScroll, we as RiverVisualPaddingOptions, Te as RiverVisualPositionOptions, vn as Section, yn as SectionBackgroundColors, Kt as SectionIntro, Mn as SectionIntroStacked, Nn as SectionIntroStackedVariants, bn as SectionPaddingVariants, ut as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, xn as Statistic, Sn as StatisticSizes, Cn as StatisticSpacingValues, ln as SubNav, un as SubNavSubMenuVariants, Ke as SubdomainNavBar, Pn as Tabs, vt as Testimonial, yt as TestimonialQuoteMarkColors, bt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, lt as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, ct as Textarea, $ as ThemeContext, ee as ThemeProvider, Fn as Tiles, $t as Timeline, Je as Token, Ye as TokenVariants, on as Tooltip, sn as TooltipContext, Ot as UnorderedList, Yt as VideoPlayer, Y as _Button, wt as _ComparisonTable, e as _GLOBAL_STYLES, Zt as _MinimalVideoPlayer, oe as actionMenuOverlaySides, U as classMap, X as defaultButtonSize, Z as defaultButtonVariant, Ut as defaultCardCTAVariant, Wt as defaultCardIconColor, Gt as defaultCardLabelVariant, an as defaultEyebrowBannerIconColor, O as defaultFontVariant, jn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, Me as defaultIconColor, Ne as defaultIconSize, xe as defaultLabelColor, Se as defaultLabelSize, Nt as defaultPillarIconColor, Pt as defaultPillarIconSize, xt as defaultQuoteMarkColor, Ee as defaultRiverAlign, De as defaultRiverImageTextRatio, Oe as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, St as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Xe as defaultTokenVariant, Pe as iconColors, Fe as iconSizeMap, Ie as iconSizes, Le as namedIconSizes, Re as numericIconSizes, F as testIds, se as useActionMenuContext, o as useAnimation, Ge as useFocusTrap, dn as useSubNavContext, te as useTheme, Jt as useVideo, Be as useWindowSize };
+import { InlineCode as Je } from "./InlineCode/InlineCode.js";
+import { Token as Ye, TokenVariants as Xe, defaultTokenVariant as Ze } from "./Token/Token.js";
+import { Accordion as Qe, AccordionContent as $e, AccordionHeading as et, AccordionRoot as tt, AccordionToggleColors as nt } from "./Accordion/Accordion.js";
+import { FAQ as rt } from "./FAQ/FAQ.js";
+import { FAQGroup as it } from "./FAQ/FAQGroup.js";
+import { Checkbox as at } from "./forms/Checkbox/Checkbox.js";
+import { DEFAULT_TEXTAREA_COLS as ot, DEFAULT_TEXTAREA_RESIZE as st, DEFAULT_TEXTAREA_ROWS as ct, Textarea as lt } from "./forms/Textarea/Textarea.js";
+import { TextInput as ut } from "./forms/TextInput/TextInput.js";
+import { Select as dt } from "./forms/Select/Select.js";
+import { Radio as ft } from "./forms/Radio/Radio.js";
+import { FormControl as pt } from "./forms/FormControl/FormControl.js";
+import { CheckboxGroup as mt } from "./forms/CheckboxGroup/CheckboxGroup.js";
+import { RadioGroup as ht } from "./forms/RadioGroup/RadioGroup.js";
+import { Avatar as gt, AvatarShapes as _t, AvatarSizes as vt } from "./Avatar/Avatar.js";
+import { Testimonial as yt, TestimonialQuoteMarkColors as bt, TestimonialVariants as xt, defaultQuoteMarkColor as St, defaultTestimonialVariant as Ct } from "./Testimonial/Testimonial.js";
+import { ComparisonTable as wt, _ComparisonTable as Tt } from "./ComparisonTable/ComparisonTable.js";
+import { AnchorNav as Et } from "./AnchorNav/AnchorNav.js";
+import { CTABanner as Dt, CTABannerBackgroundColors as Ot } from "./CTABanner/CTABanner.js";
+import { UnorderedList as kt } from "./list/UnorderedList/UnorderedList.js";
+import { OrderedList as At } from "./list/OrderedList/OrderedList.js";
+import { CTAForm as jt } from "./CTAForm/CTAForm.js";
+import { MinimalFooter as Mt } from "./MinimalFooter/MinimalFooter.js";
+import { Pillar as Nt, defaultPillarIconColor as Pt, defaultPillarIconSize as Ft } from "./Pillar/Pillar.js";
+import { Card as It, CardBackgroundColors as Lt, CardCTAVariants as Rt, CardIconColors as zt, CardImagePaddingOptions as Bt, CardLabelVariants as Vt, CardTokenPositions as Ht, CardVariants as Ut, defaultCardCTAVariant as Wt, defaultCardIconColor as Gt, defaultCardLabelVariant as Kt } from "./Card/Card.js";
+import { SectionIntro as qt } from "./SectionIntro/SectionIntro.js";
+import { Prose as Jt } from "./Prose/Prose.js";
+import { useVideo as Yt } from "./VideoPlayer/hooks/useVideo.js";
+import { VideoPlayer as Xt } from "./VideoPlayer/VideoPlayer.js";
+import { MinimalVideoPlayer as Zt, _MinimalVideoPlayer as Qt } from "./MinimalVideoPlayer/MinimalVideoPlayer.js";
+import { LogoSuite as $t } from "./LogoSuite/LogoSuite.js";
+import { Timeline as en } from "./Timeline/Timeline.js";
+import { Bento as tn } from "./Bento/Bento.js";
+import { EyebrowBanner as nn, EyebrowBannerIconColors as rn, EyebrowBannerLabelColors as an, defaultEyebrowBannerIconColor as on } from "./EyebrowBanner/EyebrowBanner.js";
+import { Tooltip as sn, TooltipContext as cn } from "./Tooltip/Tooltip.js";
+import { PricingOptions as ln } from "./PricingOptions/PricingOptions.js";
+import { SubNav as un, SubNavSubMenuVariants as dn, useSubNavContext as fn } from "./SubNav/SubNav.js";
+import { NavList as pn } from "./NavList/NavList.js";
+import { IDE as mn, IDEDefaultIconMap as hn, IDEFileExtensions as gn } from "./IDE/IDE.js";
+import { BreadcrumbVariants as _n, Breadcrumbs as vn } from "./Breadcrumbs/Breadcrumbs.js";
+import { Section as yn, SectionBackgroundColors as bn, SectionPaddingVariants as xn } from "./Section/Section.js";
+import { Statistic as Sn, StatisticSizes as Cn, StatisticSpacingValues as wn } from "./Statistic/Statistic.js";
+import { BreakoutBanner as Tn, BreakoutBannerBackgroundColors as En } from "./BreakoutBanner/BreakoutBanner.js";
+import { Footnotes as Dn, FootnotesItemTags as On, FootnotesTags as kn } from "./Footnotes/Footnotes.js";
+import { FrostedGlassVFX as An, FrostedGlassVFXIntensity as jn, defaultFrostedGlassVFXIntensity as Mn } from "./FrostedGlassVFX/FrostedGlassVFX.js";
+import { SectionIntroStacked as Nn, SectionIntroStackedVariants as Pn } from "./SectionIntroStacked/SectionIntroStacked.js";
+import { Tabs as Fn } from "./Tabs/Tabs.js";
+import { Tiles as In } from "./Tiles/Tiles.js";
+export { Qe as Accordion, $e as AccordionContent, et as AccordionHeading, tt as AccordionRoot, nt as AccordionToggleColors, ne as ActionMenu, re as ActionMenuButtonModes, ie as ActionMenuProvider, ae as ActionMenuSizes, Et as AnchorNav, a as Animate, n as AnimationContext, r as AnimationProvider, i as AnimationVariants, gt as Avatar, _t as AvatarShapes, vt as AvatarSizes, tn as Bento, g as Box, _ as BoxBackgroundColors, v as BoxBorderColorOptions, y as BoxBorderRadiusOptions, b as BoxBorderWidthOptions, x as BoxSpacingValues, _n as BreadcrumbVariants, vn as Breadcrumbs, Tn as BreakoutBanner, En as BreakoutBannerBackgroundColors, ze as BreakpointSize, K as Button, ce as ButtonGroup, q as ButtonSizes, J as ButtonVariants, Dt as CTABanner, Ot as CTABannerBackgroundColors, jt as CTAForm, It as Card, Lt as CardBackgroundColors, Rt as CardCTAVariants, zt as CardIconColors, Bt as CardImagePaddingOptions, Vt as CardLabelVariants, Ht as CardTokenPositions, Ut as CardVariants, at as Checkbox, mt as CheckboxGroup, Q as ColorModesEnum, wt as ComparisonTable, ot as DEFAULT_TEXTAREA_COLS, st as DEFAULT_TEXTAREA_RESIZE, ct as DEFAULT_TEXTAREA_ROWS, nn as EyebrowBanner, rn as EyebrowBannerIconColors, an as EyebrowBannerLabelColors, M as EyebrowText, N as EyebrowTextVariants, rt as FAQ, it as FAQGroup, Dn as Footnotes, On as FootnotesItemTags, kn as FootnotesTags, pt as FormControl, An as FrostedGlassVFX, jn as FrostedGlassVFXIntensity, t as Grid, I as Heading, L as HeadingFontVariants, R as HeadingLetterSpacing, z as HeadingSizes, B as HeadingStretch, V as HeadingTags, H as HeadingWeights, de as Hero, mn as IDE, hn as IDEDefaultIconMap, gn as IDEFileExtensions, je as Icon, le as Image, ue as ImageBorderRadiusOptions, Je as InlineCode, qe as InlineLink, ve as Label, ye as LabelColors, be as LabelSizes, me as Link, he as LinkArrowDirections, ge as LinkSizes, _e as LinkVariants, $t as LogoSuite, We as MediaPlaylist, Mt as MinimalFooter, Zt as MinimalVideoPlayer, pn as NavList, At as OrderedList, Ue as Pagination, Nt as Pillar, ln as PricingOptions, Jt as Prose, ft as Radio, ht as RadioGroup, Ce as River, fe as RiverAccordion, pe as RiverAccordionVariants, ke as RiverBreakout, Ve as RiverBreakoutTabs, Ae as RiverBreakoutVariants, He as RiverStoryScroll, we as RiverVisualPaddingOptions, Te as RiverVisualPositionOptions, yn as Section, bn as SectionBackgroundColors, qt as SectionIntro, Nn as SectionIntroStacked, Pn as SectionIntroStackedVariants, xn as SectionPaddingVariants, dt as Select, c as Stack, l as StackAlignItemVariants, u as StackDirectionVariants, d as StackFlexWrapVariants, f as StackJustifyContentVariants, p as StackSpacingVariants, Sn as Statistic, Cn as StatisticSizes, wn as StatisticSpacingValues, un as SubNav, dn as SubNavSubMenuVariants, Ke as SubdomainNavBar, Fn as Tabs, yt as Testimonial, bt as TestimonialQuoteMarkColors, xt as TestimonialVariants, S as Text, P as TextCursorAnimation, C as TextFontVariants, ut as TextInput, s as TextRevealAnimation, w as TextSizes, T as TextTags, E as TextVariants, D as TextWeights, lt as Textarea, $ as ThemeContext, ee as ThemeProvider, In as Tiles, en as Timeline, Ye as Token, Xe as TokenVariants, sn as Tooltip, cn as TooltipContext, kt as UnorderedList, Xt as VideoPlayer, Y as _Button, Tt as _ComparisonTable, e as _GLOBAL_STYLES, Qt as _MinimalVideoPlayer, oe as actionMenuOverlaySides, U as classMap, X as defaultButtonSize, Z as defaultButtonVariant, Wt as defaultCardCTAVariant, Gt as defaultCardIconColor, Kt as defaultCardLabelVariant, on as defaultEyebrowBannerIconColor, O as defaultFontVariant, Mn as defaultFrostedGlassVFXIntensity, W as defaultHeadingFont, G as defaultHeadingTag, Me as defaultIconColor, Ne as defaultIconSize, xe as defaultLabelColor, Se as defaultLabelSize, Pt as defaultPillarIconColor, Ft as defaultPillarIconSize, St as defaultQuoteMarkColor, Ee as defaultRiverAlign, De as defaultRiverImageTextRatio, Oe as defaultRiverVariant, m as defaultStackDirection, h as defaultStackSpacing, Ct as defaultTestimonialVariant, k as defaultTextSize, A as defaultTextTag, j as defaultTextVariant, Ze as defaultTokenVariant, Pe as iconColors, Fe as iconSizeMap, Ie as iconSizes, Le as namedIconSizes, Re as numericIconSizes, F as testIds, se as useActionMenuContext, o as useAnimation, Ge as useFocusTrap, fn as useSubNavContext, te as useTheme, Yt as useVideo, Be as useWindowSize };