@octavius2929-personal/design-system 0.5.1 → 0.6.0

package/dist/index.cjs

@@ -63,6 +63,7 @@ __export(index_exports, {
   ThemeProvider: () => ThemeProvider,
   Tooltip: () => Tooltip,
   TriangleAlertIcon: () => TriangleAlertIcon,
+  Typography: () => Typography,
   XIcon: () => XIcon,
   colorVars: () => colorVars,
   modeNames: () => modeNames,
@@ -101,7 +102,7 @@ function useToggle(initial = false) {
   return [on, toggle, setOn];
 }
 
-// src/components/button/use-styles.ts
+// src/components/typography/use-styles.ts
 var import_react4 = require("react");
 
 // src/theme/context/theme-context.tsx
@@ -195,6 +196,65 @@ function useTheme() {
   return (0, import_react3.useContext)(ThemeContext) ?? DEFAULT_VALUE;
 }
 
+// src/theme/typography.css.ts
+var text = { eyebrow: "typography_text_eyebrow__1wmlzy0", display: "typography_text_display__1wmlzy1", h1: "typography_text_h1__1wmlzy2", h2: "typography_text_h2__1wmlzy3", h3: "typography_text_h3__1wmlzy4", h4: "typography_text_h4__1wmlzy5", body: "typography_text_body__1wmlzy6", lead: "typography_text_lead__1wmlzy7", small: "typography_text_small__1wmlzy8", caption: "typography_text_caption__1wmlzy9", code: "typography_text_code__1wmlzya", blackletter: "typography_text_blackletter__1wmlzyb" };
+
+// src/components/typography/use-styles.css.ts
+var align = { left: "use-styles_align_left__d74jf69", center: "use-styles_align_center__d74jf6a", right: "use-styles_align_right__d74jf6b" };
+var base = "use-styles_base__d74jf60";
+var color = { fg1: "use-styles_color_fg1__d74jf61", fg2: "use-styles_color_fg2__d74jf62", fg3: "use-styles_color_fg3__d74jf63", accent: "use-styles_color_accent__d74jf64", danger: "use-styles_color_danger__d74jf65", ok: "use-styles_color_ok__d74jf66", warn: "use-styles_color_warn__d74jf67", info: "use-styles_color_info__d74jf68" };
+
+// src/components/typography/use-styles.ts
+function useStyles({
+  variant: variant2,
+  color: color2,
+  align: align2
+}) {
+  const { themeClass } = useTheme();
+  const className = (0, import_react4.useMemo)(
+    () => [
+      themeClass,
+      base,
+      text[variant2],
+      color2 && color[color2],
+      align2 && align[align2]
+    ].filter(Boolean).join(" "),
+    [themeClass, variant2, color2, align2]
+  );
+  return { text: className };
+}
+
+// src/components/typography/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var defaultElement = {
+  display: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  body: "p",
+  lead: "p",
+  small: "span",
+  caption: "span",
+  eyebrow: "span",
+  code: "code",
+  blackletter: "span"
+};
+function Typography({
+  variant: variant2,
+  as,
+  color: color2,
+  align: align2,
+  ...rest
+}) {
+  const Component = as ?? defaultElement[variant2];
+  const { text: text2 } = useStyles({ variant: variant2, color: color2, align: align2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...rest, className: text2 });
+}
+
+// src/components/button/use-styles.ts
+var import_react5 = require("react");
+
 // src/components/button/use-styles.css.ts
 var full = "use-styles_full__1pbtill4";
 var root = "use-styles_root__1pbtill0";
@@ -205,7 +265,7 @@ var tone = { filledInk: "use-styles_tone_filledInk__1pbtill5", filledAccent: "us
 function toneKey(variant2, tone4) {
   return `${variant2}${tone4 === "ink" ? "Ink" : "Accent"}`;
 }
-function useStyles({
+function useStyles2({
   variant: variant2 = "filled",
   tone: tone4 = "ink",
   size: size3 = "md",
@@ -213,7 +273,7 @@ function useStyles({
   className
 }) {
   const { themeClass } = useTheme();
-  const container = (0, import_react4.useMemo)(
+  const container = (0, import_react5.useMemo)(
     () => [
       themeClass,
       root,
@@ -228,7 +288,7 @@ function useStyles({
 }
 
 // src/components/button/index.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var ICON_SIZE = { sm: 14, md: 16, lg: 18 };
 function Button({
   variant: variant2,
@@ -241,17 +301,17 @@ function Button({
   children,
   ...rest
 }) {
-  const { container } = useStyles({ variant: variant2, tone: tone4, size: size3, full: full2, className });
+  const { container } = useStyles2({ variant: variant2, tone: tone4, size: size3, full: full2, className });
   const iconSize = ICON_SIZE[size3];
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { className: container, ...rest, children: [
-    StartIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StartIcon, { size: iconSize }),
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: container, ...rest, children: [
+    StartIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StartIcon, { size: iconSize }),
     children,
-    EndIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EndIcon, { size: iconSize })
+    EndIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EndIcon, { size: iconSize })
   ] });
 }
 
 // src/components/divider/use-styles.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/divider/use-styles.css.ts
 var horizontal = "use-styles_horizontal__1n7v7yj1";
@@ -262,9 +322,9 @@ var root2 = "use-styles_root__1n7v7yj0";
 var vertical = "use-styles_vertical__1n7v7yj2";
 
 // src/components/divider/use-styles.ts
-function useStyles2({ vertical: vertical2, hasLabel }) {
+function useStyles3({ vertical: vertical2, hasLabel }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react5.useMemo)(
+  const root24 = (0, import_react6.useMemo)(
     () => [
       themeClass,
       root2,
@@ -276,22 +336,22 @@ function useStyles2({ vertical: vertical2, hasLabel }) {
 }
 
 // src/components/divider/index.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Divider({ vertical: vertical2, label: label7, ...rest }) {
   const hasLabel = label7 != null;
-  const { root: root24, line: line2, label: labelClass } = useStyles2({ vertical: vertical2, hasLabel });
+  const { root: root24, line: line2, label: labelClass } = useStyles3({ vertical: vertical2, hasLabel });
   if (hasLabel) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "separator", className: root24, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: line2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: labelClass, children: label7 }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: line2 })
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "separator", className: root24, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: line2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: labelClass, children: label7 }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: line2 })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "separator", className: root24, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { role: "separator", className: root24, ...rest });
 }
 
 // src/components/avatar/use-styles.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/avatar/use-styles.css.ts
 var root3 = "use-styles_root__1mn1rmu0";
@@ -299,13 +359,13 @@ var size2 = { sm: "use-styles_size_sm__1mn1rmu1", md: "use-styles_size_md__1mn1r
 var variant = { "default": "use-styles_variant_default__1mn1rmu4", filled: "use-styles_variant_filled__1mn1rmu5" };
 
 // src/components/avatar/use-styles.ts
-function useStyles3({
+function useStyles4({
   size: size3 = "md",
   filled,
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react6.useMemo)(
+  const root24 = (0, import_react7.useMemo)(
     () => [
       themeClass,
       root3,
@@ -319,14 +379,14 @@ function useStyles3({
 }
 
 // src/components/avatar/index.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function Avatar({ size: size3, filled, className, children, ...rest }) {
-  const { root: root24 } = useStyles3({ size: size3, filled, className });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: root24, ...rest, children });
+  const { root: root24 } = useStyles4({ size: size3, filled, className });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: root24, ...rest, children });
 }
 
 // src/components/badge/use-styles.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/badge/use-styles.css.ts
 var dot = "use-styles_dot__1wpei6p1";
@@ -334,31 +394,31 @@ var root4 = "use-styles_root__1wpei6p0";
 var tone2 = { ink: "use-styles_tone_ink__1wpei6p2", accent: "use-styles_tone_accent__1wpei6p3" };
 
 // src/components/badge/use-styles.ts
-function useStyles4({
+function useStyles5({
   tone: tone4 = "ink",
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react7.useMemo)(
+  const root24 = (0, import_react8.useMemo)(
     () => [themeClass, root4, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
-  const dot3 = (0, import_react7.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
+  const dot3 = (0, import_react8.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
   return { root: root24, dot: dot3 };
 }
 
 // src/components/badge/index.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Badge({ count, tone: tone4, className, children, ...rest }) {
-  const { root: root24, dot: dot3 } = useStyles4({ tone: tone4, className });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: root24, ...rest, children: [
+  const { root: root24, dot: dot3 } = useStyles5({ tone: tone4, className });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: root24, ...rest, children: [
     children,
-    count != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: dot3, children: count })
+    count != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: dot3, children: count })
   ] });
 }
 
 // src/components/progress/use-styles.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/progress/use-styles.css.ts
 var bar = "use-styles_bar__kbop7v3";
@@ -367,14 +427,14 @@ var spinner = "use-styles_spinner__kbop7v5";
 var track = "use-styles_track__kbop7v2";
 
 // src/components/progress/use-styles.ts
-function useStyles5({
+function useStyles6({
   variant: variant2 = "linear",
   value,
   className
 }) {
   const { themeClass } = useTheme();
   const indeterminate2 = value === void 0;
-  return (0, import_react8.useMemo)(() => {
+  return (0, import_react9.useMemo)(() => {
     const root24 = (...classes) => [themeClass, ...classes, className].filter(Boolean).join(" ");
     if (variant2 === "circular") {
       return { track: "", bar: "", spinner: root24(spinner) };
@@ -388,7 +448,7 @@ function useStyles5({
 }
 
 // src/components/progress/index.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Progress({
   variant: variant2 = "linear",
   value,
@@ -396,10 +456,10 @@ function Progress({
   className,
   ...rest
 }) {
-  const { track: track4, bar: bar2, spinner: spinner2 } = useStyles5({ variant: variant2, value, className });
+  const { track: track4, bar: bar2, spinner: spinner2 } = useStyles6({ variant: variant2, value, className });
   const indeterminate2 = value === void 0;
   if (variant2 === "circular") {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "span",
       {
         className: spinner2,
@@ -412,7 +472,7 @@ function Progress({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: track4,
@@ -421,15 +481,15 @@ function Progress({
       "aria-valuemin": indeterminate2 ? void 0 : 0,
       "aria-valuemax": indeterminate2 ? void 0 : 100,
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: bar2, style: indeterminate2 ? void 0 : { width: `${value}%` } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: bar2, style: indeterminate2 ? void 0 : { width: `${value}%` } })
     }
   );
 }
 
 // src/components/icons/x/index.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -444,15 +504,15 @@ function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M18 6 6 18" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "m6 6 12 12" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "m6 6 12 12" })
       ]
     }
   );
 }
 
 // src/components/chip/use-styles.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/chip/use-styles.css.ts
 var clickable = "use-styles_clickable__1axilf44";
@@ -462,13 +522,13 @@ var selected = "use-styles_selected__1axilf43";
 var tone3 = { ink: "use-styles_tone_ink__1axilf41", accent: "use-styles_tone_accent__1axilf42" };
 
 // src/components/chip/use-styles.ts
-function useStyles6({
+function useStyles7({
   selected: selected3,
   tone: tone4 = "ink",
   clickable: clickable2
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react9.useMemo)(
+  const root24 = (0, import_react10.useMemo)(
     () => [
       themeClass,
       root5,
@@ -481,24 +541,24 @@ function useStyles6({
 }
 
 // src/components/chip/index.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Chip({ selected: selected3, tone: tone4, onDelete, onClick, children, ...rest }) {
   const clickable2 = Boolean(onClick);
-  const { root: root24, deleteBtn: deleteBtn2 } = useStyles6({ selected: selected3, tone: tone4, clickable: clickable2 });
+  const { root: root24, deleteBtn: deleteBtn2 } = useStyles7({ selected: selected3, tone: tone4, clickable: clickable2 });
   const handleDelete = (event) => {
     event.stopPropagation();
     onDelete?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: root24, onClick, ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: root24, onClick, ...rest, children: [
     children,
-    onDelete && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: deleteBtn2, "aria-label": "Remove", onClick: handleDelete, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(XIcon, { size: 13 }) })
+    onDelete && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: deleteBtn2, "aria-label": "Remove", onClick: handleDelete, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(XIcon, { size: 13 }) })
   ] });
 }
 
 // src/components/icons/check/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -512,13 +572,13 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M20 6 9 17l-5-5" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M20 6 9 17l-5-5" })
     }
   );
 }
 
 // src/components/checkbox/use-styles.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/checkbox/use-styles.css.ts
 var box = "use-styles_box__9zoga91";
@@ -529,13 +589,13 @@ var input = "surfaces_srOnly__6hs0fg0";
 var root6 = "use-styles_root__9zoga90";
 
 // src/components/checkbox/use-styles.ts
-function useStyles7({ checked, disabled: disabled3 }) {
+function useStyles8({ checked, disabled: disabled3 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react10.useMemo)(
+  const root24 = (0, import_react11.useMemo)(
     () => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
     [themeClass, disabled3]
   );
-  const box2 = (0, import_react10.useMemo)(
+  const box2 = (0, import_react11.useMemo)(
     () => [box, checked && boxChecked].filter(Boolean).join(" "),
     [checked]
   );
@@ -543,7 +603,7 @@ function useStyles7({ checked, disabled: disabled3 }) {
 }
 
 // src/components/checkbox/index.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Checkbox({
   checked = false,
   onChange,
@@ -551,13 +611,13 @@ function Checkbox({
   disabled: disabled3 = false,
   id
 }) {
-  const { root: root24, input: input6, box: box2, check: check2 } = useStyles7({ checked, disabled: disabled3 });
+  const { root: root24, input: input6, box: box2, check: check2 } = useStyles8({ checked, disabled: disabled3 });
   const handleChange = (e) => {
     if (disabled3) return;
     onChange?.(e.target.checked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: root24, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: root24, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "input",
       {
         type: "checkbox",
@@ -568,13 +628,13 @@ function Checkbox({
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: box2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckIcon, { size: 12, className: check2 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: box2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckIcon, { size: 12, className: check2 }) }),
     label7
   ] });
 }
 
 // src/components/radio/use-styles.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/radio/use-styles.css.ts
 var circle = "use-styles_circle__vy61b42";
@@ -585,12 +645,12 @@ var label2 = "use-styles_label__vy61b44";
 var root7 = "use-styles_root__vy61b40";
 
 // src/components/radio/use-styles.ts
-function useStyles8({
+function useStyles9({
   disabled: disabled3,
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react11.useMemo)(
+  const root24 = (0, import_react12.useMemo)(
     () => [themeClass, root7, disabled3 && disabled2, className].filter(Boolean).join(" "),
     [themeClass, disabled3, className]
   );
@@ -604,11 +664,11 @@ function useStyles8({
 }
 
 // src/components/radio/index.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function Radio({ checked, onChange, label: label7, name, value, disabled: disabled3 }) {
-  const { root: root24, input: input6, circle: circle2, dot: dot3, label: labelClass } = useStyles8({ disabled: disabled3 });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: root24, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const { root: root24, input: input6, circle: circle2, dot: dot3, label: labelClass } = useStyles9({ disabled: disabled3 });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: root24, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "input",
       {
         className: input6,
@@ -620,13 +680,13 @@ function Radio({ checked, onChange, label: label7, name, value, disabled: disabl
         onChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: circle2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: dot3 }) }),
-    label7 != null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: labelClass, children: label7 })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: circle2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: dot3 }) }),
+    label7 != null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: labelClass, children: label7 })
   ] });
 }
 
 // src/components/switch/use-styles.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/switch/use-styles.css.ts
 var input3 = "surfaces_srOnly__6hs0fg0";
@@ -638,9 +698,9 @@ var track2 = "use-styles_track__1r6kem71";
 var trackChecked = "use-styles_trackChecked__1r6kem72";
 
 // src/components/switch/use-styles.ts
-function useStyles9({ checked }) {
+function useStyles10({ checked }) {
   const { themeClass } = useTheme();
-  return (0, import_react12.useMemo)(
+  return (0, import_react13.useMemo)(
     () => ({
       root: [themeClass, root8].filter(Boolean).join(" "),
       input: input3,
@@ -653,11 +713,11 @@ function useStyles9({ checked }) {
 }
 
 // src/components/switch/index.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Switch({ checked = false, onChange, label: label7, disabled: disabled3 }) {
-  const { root: root24, input: input6, track: track4, knob: knob2, label: labelClass } = useStyles9({ checked });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: root24, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  const { root: root24, input: input6, track: track4, knob: knob2, label: labelClass } = useStyles10({ checked });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: root24, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "input",
       {
         type: "checkbox",
@@ -672,18 +732,18 @@ function Switch({ checked = false, onChange, label: label7, disabled: disabled3
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: track4, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: knob2 }) }),
-    label7 != null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: labelClass, children: label7 })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: track4, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: knob2 }) }),
+    label7 != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: labelClass, children: label7 })
   ] });
 }
 
 // src/components/text-field/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/icons/eye/index.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -698,17 +758,17 @@ function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "12", cy: "12", r: "3" })
       ]
     }
   );
 }
 
 // src/components/icons/eye-off/index.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -723,17 +783,17 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "m2 2 20 20" })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "m2 2 20 20" })
       ]
     }
   );
 }
 
 // src/components/text-field/use-styles.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/text-field/use-styles.css.ts
 var field = "use-styles_field__vat8gv3";
@@ -750,9 +810,9 @@ var root9 = "use-styles_root__vat8gv0";
 var startIcon = "use-styles_startIcon__vat8gva";
 
 // src/components/text-field/use-styles.ts
-function useStyles10({ error, hasStartIcon, hasReveal, className }) {
+function useStyles11({ error, hasStartIcon, hasReveal, className }) {
   const { themeClass } = useTheme();
-  return (0, import_react13.useMemo)(() => {
+  return (0, import_react14.useMemo)(() => {
     const root24 = [themeClass, root9].filter(Boolean).join(" ");
     const labelText2 = [labelText, error && labelTextError].filter(Boolean).join(" ");
     const input6 = [
@@ -776,7 +836,7 @@ function useStyles10({ error, hasStartIcon, hasReveal, className }) {
 }
 
 // src/components/text-field/index.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function TextField({
   label: label7,
   help,
@@ -790,13 +850,13 @@ function TextField({
   id,
   ...rest
 }) {
-  const [reveal, setReveal] = (0, import_react14.useState)(false);
+  const [reveal, setReveal] = (0, import_react15.useState)(false);
   const isPassword = type === "password";
   const hasReveal = isPassword;
   const effectiveType = isPassword ? reveal ? "text" : "password" : type;
-  const autoId = (0, import_react14.useId)();
+  const autoId = (0, import_react15.useId)();
   const controlId = id ?? autoId;
-  const classes = useStyles10({
+  const classes = useStyles11({
     error,
     hasStartIcon: Boolean(StartIcon),
     hasReveal,
@@ -811,11 +871,11 @@ function TextField({
   const handleToggleMouseDown = (e) => {
     e.preventDefault();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: classes.root, children: [
-    label7 != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: controlId, className: classes.labelText, children: label7 }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: classes.field, children: [
-      StartIcon != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: classes.startIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StartIcon, { size: 18 }) }),
-      multiline ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: classes.root, children: [
+    label7 != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { htmlFor: controlId, className: classes.labelText, children: label7 }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: classes.field, children: [
+      StartIcon != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: classes.startIcon, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StartIcon, { size: 18 }) }),
+      multiline ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "textarea",
         {
           id: controlId,
@@ -824,7 +884,7 @@ function TextField({
           onChange: handleTextareaChange,
           ...rest
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "input",
         {
           id: controlId,
@@ -834,7 +894,7 @@ function TextField({
           ...rest
         }
       ),
-      hasReveal && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      hasReveal && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
         {
           type: "button",
@@ -843,16 +903,16 @@ function TextField({
           "aria-label": reveal ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
           onMouseDown: handleToggleMouseDown,
           onClick: () => setReveal((r) => !r),
-          children: reveal ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(EyeIcon, { size: 18 })
+          children: reveal ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(EyeIcon, { size: 18 })
         }
       )
     ] }),
-    help != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: classes.helpText, children: help })
+    help != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: classes.helpText, children: help })
   ] });
 }
 
 // src/components/icon-button/use-styles.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/icon-button/use-styles.css.ts
 var accent = "use-styles_accent__18np0q02";
@@ -860,12 +920,12 @@ var active = "use-styles_active__18np0q01";
 var root10 = "use-styles_root__18np0q00";
 
 // src/components/icon-button/use-styles.ts
-function useStyles11({
+function useStyles12({
   active: active2 = false,
   tone: tone4 = "ink"
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react15.useMemo)(
+  const root24 = (0, import_react16.useMemo)(
     () => [themeClass, root10, tone4 === "accent" && accent, active2 && active].filter(Boolean).join(" "),
     [themeClass, active2, tone4]
   );
@@ -873,14 +933,14 @@ function useStyles11({
 }
 
 // src/components/icon-button/index.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function IconButton({ icon: Icon, active: active2, tone: tone4, title, ...rest }) {
-  const { root: root24 } = useStyles11({ active: active2, tone: tone4 });
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { className: root24, "aria-label": title, title, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { size: 18 }) });
+  const { root: root24 } = useStyles12({ active: active2, tone: tone4 });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: root24, "aria-label": title, title, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { size: 18 }) });
 }
 
 // src/components/card/use-styles.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/components/card/use-styles.css.ts
 var body = "use-styles_body__1fuvd022";
@@ -889,29 +949,29 @@ var header = "use-styles_header__1fuvd021";
 var root11 = "use-styles_root__1fuvd020";
 
 // src/components/card/use-styles.ts
-function useStyles12() {
+function useStyles13() {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react16.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
+  const root24 = (0, import_react17.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
   return { root: root24, header, body, footer };
 }
 
 // src/components/card/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function CardRoot({ children, ...rest }) {
-  const { root: root24 } = useStyles12();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: root24, ...rest, children });
+  const { root: root24 } = useStyles13();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: root24, ...rest, children });
 }
 function CardHeader({ children, ...rest }) {
-  const { header: header3 } = useStyles12();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: header3, ...rest, children });
+  const { header: header3 } = useStyles13();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: header3, ...rest, children });
 }
 function CardBody({ children, ...rest }) {
-  const { body: body4 } = useStyles12();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: body4, ...rest, children });
+  const { body: body3 } = useStyles13();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: body3, ...rest, children });
 }
 function CardFooter({ children, ...rest }) {
-  const { footer: footer2 } = useStyles12();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: footer2, ...rest, children });
+  const { footer: footer2 } = useStyles13();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: footer2, ...rest, children });
 }
 CardRoot.displayName = "Card";
 CardHeader.displayName = "Card.Header";
@@ -924,9 +984,9 @@ var Card = Object.assign(CardRoot, {
 });
 
 // src/components/icons/circle-check/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -941,17 +1001,17 @@ function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "m9 12 2 2 4-4" })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "m9 12 2 2 4-4" })
       ]
     }
   );
 }
 
 // src/components/icons/circle-x/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -966,18 +1026,18 @@ function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "m15 9-6 6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "m9 9 6 6" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "m15 9-6 6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "m9 9 6 6" })
       ]
     }
   );
 }
 
 // src/components/icons/info/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -992,18 +1052,18 @@ function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M12 16v-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M12 8h.01" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M12 8h.01" })
       ]
     }
   );
 }
 
 // src/components/icons/triangle-alert/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1018,46 +1078,42 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M12 9v4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M12 17h.01" })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M12 9v4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M12 17h.01" })
       ]
     }
   );
 }
 
 // src/components/alert/use-styles.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/alert/use-styles.css.ts
-var body2 = "use-styles_body__ivsh6u8";
 var content = "use-styles_content__ivsh6u6";
 var iconSlot = "use-styles_iconSlot__ivsh6u5";
 var root12 = "use-styles_root__ivsh6u0";
 var severity = { info: "use-styles_severity_info__ivsh6u1", ok: "use-styles_severity_ok__ivsh6u2", warn: "use-styles_severity_warn__ivsh6u3", danger: "use-styles_severity_danger__ivsh6u4" };
-var titleText = "use-styles_titleText__ivsh6u7";
 
 // src/components/alert/use-styles.ts
-function useStyles13({
+function useStyles14({
   severity: severity2 = "info",
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react17.useMemo)(
+  const root24 = (0, import_react18.useMemo)(
     () => [themeClass, root12, severity[severity2], className].filter(Boolean).join(" "),
     [themeClass, severity2, className]
   );
   return {
     root: root24,
     iconSlot,
-    content,
-    titleText,
-    body: body2
+    content
   };
 }
 
 // src/components/alert/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var defaultIcons = {
   info: InfoIcon,
   ok: CircleCheckIcon,
@@ -1072,22 +1128,22 @@ function Alert({
   children,
   ...rest
 }) {
-  const styles = useStyles13({ severity: severity2, className });
+  const styles = useStyles14({ severity: severity2, className });
   const IconComponent = icon ?? defaultIcons[severity2];
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { role: "alert", className: styles.root, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: styles.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconComponent, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: styles.content, children: [
-      title != null && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: styles.titleText, children: title }),
-      children != null && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: styles.body, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { role: "alert", className: styles.root, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: styles.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconComponent, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: styles.content, children: [
+      title != null && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { variant: "h4", children: title }),
+      children != null && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { variant: "body", color: "fg2", children })
     ] })
   ] });
 }
 
 // src/components/tooltip/index.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/tooltip/use-styles.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/tooltip/use-styles.css.ts
 var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__6hs0fg2";
@@ -1095,15 +1151,15 @@ var placement = { top: "use-styles_placement_top__h9kvh2", bottom: "use-styles_p
 var wrapper = "use-styles_wrapper__h9kvh0";
 
 // src/components/tooltip/use-styles.ts
-function useStyles14({
+function useStyles15({
   placement: placement2 = "top"
 }) {
   const { themeClass } = useTheme();
-  const wrapper4 = (0, import_react18.useMemo)(
+  const wrapper4 = (0, import_react19.useMemo)(
     () => [themeClass, wrapper].filter(Boolean).join(" "),
     [themeClass]
   );
-  const bubble2 = (0, import_react18.useMemo)(
+  const bubble2 = (0, import_react19.useMemo)(
     () => [bubble, placement[placement2]].filter(Boolean).join(" "),
     [placement2]
   );
@@ -1111,29 +1167,29 @@ function useStyles14({
 }
 
 // src/components/tooltip/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Tooltip({ label: label7, children, placement: placement2 }) {
-  const [open, setOpen] = (0, import_react19.useState)(false);
-  const tooltipId = (0, import_react19.useId)();
-  const { wrapper: wrapper4, bubble: bubble2 } = useStyles14({ placement: placement2 });
+  const [open, setOpen] = (0, import_react20.useState)(false);
+  const tooltipId = (0, import_react20.useId)();
+  const { wrapper: wrapper4, bubble: bubble2 } = useStyles15({ placement: placement2 });
   const show = () => setOpen(true);
   const hide = () => setOpen(false);
   const previousDescribedBy = children.props["aria-describedby"];
   const describedBy = open ? [previousDescribedBy, tooltipId].filter(Boolean).join(" ") : previousDescribedBy;
-  const trigger2 = (0, import_react19.cloneElement)(children, { "aria-describedby": describedBy });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: wrapper4, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: [
+  const trigger2 = (0, import_react20.cloneElement)(children, { "aria-describedby": describedBy });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: wrapper4, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: [
     trigger2,
-    open && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { id: tooltipId, role: "tooltip", className: bubble2, children: label7 })
+    open && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { id: tooltipId, role: "tooltip", className: bubble2, children: label7 })
   ] });
 }
 
 // src/components/select/index.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/icons/chevron-down/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1147,13 +1203,13 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "m6 9 6 6 6-6" })
     }
   );
 }
 
 // src/components/select/use-styles.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/select/use-styles.css.ts
 var chevron = "use-styles_chevron__1w1czpb4";
@@ -1168,11 +1224,11 @@ var root13 = "use-styles_root__1w1czpb0";
 var trigger = "use-styles_trigger__1w1czpb2";
 
 // src/components/select/use-styles.ts
-function useStyles15({
+function useStyles16({
   open = false
 }) {
   const { themeClass } = useTheme();
-  return (0, import_react20.useMemo)(() => {
+  return (0, import_react21.useMemo)(() => {
     const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
     return {
       root: [themeClass, root13].filter(Boolean).join(" "),
@@ -1187,12 +1243,12 @@ function useStyles15({
 }
 
 // src/components/select/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Select({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3 }) {
-  const [open, setOpen] = (0, import_react21.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react21.useState)(0);
-  const rootRef = (0, import_react21.useRef)(null);
-  const baseId = (0, import_react21.useId)();
+  const [open, setOpen] = (0, import_react22.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react22.useState)(0);
+  const rootRef = (0, import_react22.useRef)(null);
+  const baseId = (0, import_react22.useId)();
   const labelId = `${baseId}-label`;
   const optionId = (index) => `${baseId}-option-${index}`;
   const {
@@ -1203,8 +1259,8 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
     chevron: chevron3,
     menu: menu2,
     optionClass
-  } = useStyles15({ open });
-  (0, import_react21.useEffect)(() => {
+  } = useStyles16({ open });
+  (0, import_react22.useEffect)(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (rootRef.current && !rootRef.current.contains(event.target)) {
@@ -1264,9 +1320,9 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: rootRef, className: root24, children: [
-    label7 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { id: labelId, className: labelClass, children: label7 }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref: rootRef, className: root24, children: [
+    label7 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { id: labelId, className: labelClass, children: label7 }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "button",
       {
         type: "button",
@@ -1286,17 +1342,17 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
         },
         onKeyDown: handleKeyDown,
         children: [
-          selected3 ? selected3.label : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: placeholderClass, children: placeholder2 }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: chevron3, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChevronDownIcon, { size: 18 }) })
+          selected3 ? selected3.label : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: placeholderClass, children: placeholder2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: chevron3, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChevronDownIcon, { size: 18 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: menu2, role: "listbox", children: options.map((option2, index) => {
+    open && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: menu2, role: "listbox", children: options.map((option2, index) => {
       const isSelected = option2.value === value;
       const isActive = index === activeIndex;
       return (
         // biome-ignore lint/a11y/useKeyWithClickEvents: keyboard nav lives on the trigger via aria-activedescendant; options are not focusable.
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "div",
           {
             id: optionId(index),
@@ -1315,7 +1371,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
 }
 
 // src/components/slider/use-styles.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/slider/use-styles.css.ts
 var input5 = "use-styles_input__okw59n3";
@@ -1327,9 +1383,9 @@ var track3 = "use-styles_track__okw59n1";
 var wrapper2 = "use-styles_wrapper__okw59n6";
 
 // src/components/slider/use-styles.ts
-function useStyles16() {
+function useStyles17() {
   const { themeClass } = useTheme();
-  return (0, import_react22.useMemo)(() => {
+  return (0, import_react23.useMemo)(() => {
     const root24 = [themeClass, root14].filter(Boolean).join(" ");
     return {
       wrapper: wrapper2,
@@ -1344,7 +1400,7 @@ function useStyles16() {
 }
 
 // src/components/slider/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Slider({
   value = 0,
   onChange,
@@ -1354,19 +1410,19 @@ function Slider({
   disabled: disabled3,
   label: label7
 }) {
-  const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles16();
+  const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles17();
   const span = max - min;
   const percent = span > 0 ? (value - min) / span * 100 : 0;
   const clamped = Math.max(0, Math.min(100, percent));
   const handleChange = (e) => {
     onChange?.(Number(e.target.value));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: wrapper4, children: [
-    label7 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: labelClass, children: label7 }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: root24, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: track4 }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: range2, style: { width: `${clamped}%` } }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: wrapper4, children: [
+    label7 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: labelClass, children: label7 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: root24, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: track4 }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: range2, style: { width: `${clamped}%` } }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "input",
         {
           className: input6,
@@ -1379,16 +1435,16 @@ function Slider({
           onChange: handleChange
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: thumb2, style: { left: `${clamped}%` } })
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: thumb2, style: { left: `${clamped}%` } })
     ] })
   ] });
 }
 
 // src/components/accordion/index.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/components/accordion/use-styles.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/components/accordion/use-styles.css.ts
 var chevron2 = "use-styles_chevron__1cjrdh93";
@@ -1399,9 +1455,9 @@ var panel = "use-styles_panel__1cjrdh95";
 var root15 = "use-styles_root__1cjrdh90";
 
 // src/components/accordion/use-styles.ts
-function useStyles17({ className }) {
+function useStyles18({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react23.useMemo)(
+  return (0, import_react24.useMemo)(
     () => ({
       root: [themeClass, root15, className].filter(Boolean).join(" "),
       item,
@@ -1414,15 +1470,15 @@ function useStyles17({ className }) {
 }
 
 // src/components/accordion/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Accordion({
   items,
   multiple = false,
   defaultOpen = [],
   className
 }) {
-  const [open, setOpen] = (0, import_react24.useState)(defaultOpen);
-  const { root: root24, item: item3, header: header3, chevronFor, panel: panel2 } = useStyles17({ className });
+  const [open, setOpen] = (0, import_react25.useState)(defaultOpen);
+  const { root: root24, item: item3, header: header3, chevronFor, panel: panel2 } = useStyles18({ className });
   const toggle = (id) => {
     setOpen((current2) => {
       const isOpen = current2.includes(id);
@@ -1430,12 +1486,12 @@ function Accordion({
       return multiple ? [...current2, id] : [id];
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: root24, children: items.map((it) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: root24, children: items.map((it) => {
     const isOpen = open.includes(it.id);
     const panelId = `accordion-panel-${it.id}`;
     const headerId = `accordion-header-${it.id}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: item3, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: item3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "button",
         {
           type: "button",
@@ -1446,22 +1502,22 @@ function Accordion({
           onClick: () => toggle(it.id),
           children: [
             it.title,
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChevronDownIcon, { className: chevronFor(isOpen) })
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronDownIcon, { className: chevronFor(isOpen) })
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { id: panelId, className: panel2, role: "region", "aria-labelledby": headerId, children: it.content })
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { id: panelId, className: panel2, role: "region", "aria-labelledby": headerId, children: it.content })
     ] }, it.id);
   }) });
 }
 
 // src/components/breadcrumbs/index.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/icons/chevron-right/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1475,13 +1531,13 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "m9 18 6-6-6-6" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "m9 18 6-6-6-6" })
     }
   );
 }
 
 // src/components/breadcrumbs/use-styles.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/components/breadcrumbs/use-styles.css.ts
 var crumb = "use-styles_crumb__7u0du61";
@@ -1490,9 +1546,9 @@ var root16 = "use-styles_root__7u0du60";
 var separator = "use-styles_separator__7u0du63";
 
 // src/components/breadcrumbs/use-styles.ts
-function useStyles18({ className }) {
+function useStyles19({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react25.useMemo)(
+  const root24 = (0, import_react26.useMemo)(
     () => [themeClass, root16, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1500,23 +1556,23 @@ function useStyles18({ className }) {
 }
 
 // src/components/breadcrumbs/index.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Breadcrumbs({ items, className, ...rest }) {
-  const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles18({ className });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("nav", { "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
+  const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles19({ className });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("nav", { "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
     const isLast = index === items.length - 1;
     const key = index;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react26.Fragment, { children: [
-      isLast ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: crumb2, children: item3.label }),
-      !isLast && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: separator2, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronRightIcon, { size: 14 }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react27.Fragment, { children: [
+      isLast ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: crumb2, children: item3.label }),
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: separator2, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronRightIcon, { size: 14 }) })
     ] }, key);
   }) });
 }
 
 // src/components/icons/chevron-left/index.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1530,13 +1586,13 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "m15 18-6-6 6-6" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "m15 18-6-6 6-6" })
     }
   );
 }
 
 // src/components/pagination/use-styles.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/pagination/use-styles.css.ts
 var ellipsis = "use-styles_ellipsis__1azgzoh3";
@@ -1546,9 +1602,9 @@ var pageBtn = "use-styles_pageBtn__1azgzoh1";
 var root17 = "use-styles_root__1azgzoh0";
 
 // src/components/pagination/use-styles.ts
-function useStyles19() {
+function useStyles20() {
   const { themeClass } = useTheme();
-  return (0, import_react27.useMemo)(
+  return (0, import_react28.useMemo)(
     () => ({
       root: [themeClass, root17].filter(Boolean).join(" "),
       pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
@@ -1560,7 +1616,7 @@ function useStyles19() {
 }
 
 // src/components/pagination/index.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function buildItems(count, page, siblingCount) {
   const total = Math.max(1, count);
   const first = 1;
@@ -1575,13 +1631,13 @@ function buildItems(count, page, siblingCount) {
   return items;
 }
 function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
-  const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles19();
+  const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles20();
   const total = Math.max(1, count);
   const current2 = Math.min(Math.max(1, page), total);
   const items = buildItems(total, current2, siblingCount);
   const go = (n) => onChange?.(Math.min(Math.max(1, n), total));
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("nav", { className: root24, "aria-label": "Pagination", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("nav", { className: root24, "aria-label": "Pagination", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "button",
       {
         type: "button",
@@ -1589,14 +1645,14 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
         "aria-label": "Previous page",
         disabled: current2 <= 1,
         onClick: () => go(current2 - 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronLeftIcon, { size: 18 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronLeftIcon, { size: 18 })
       }
     ),
     items.map(
       (item3, index) => item3 === "ellipsis" ? (
         // biome-ignore lint/suspicious/noArrayIndexKey: ellipsis position is stable per render
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: ellipsis2, children: "\u2026" }, `ellipsis-${index}`)
-      ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: ellipsis2, children: "\u2026" }, `ellipsis-${index}`)
+      ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
           type: "button",
@@ -1608,7 +1664,7 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
         item3
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "button",
       {
         type: "button",
@@ -1616,17 +1672,17 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
         "aria-label": "Next page",
         disabled: current2 >= total,
         onClick: () => go(current2 + 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronRightIcon, { size: 18 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronRightIcon, { size: 18 })
       }
     )
   ] });
 }
 
 // src/components/stepper/index.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/stepper/use-styles.ts
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/components/stepper/use-styles.css.ts
 var connector = "use-styles_connector__79pt4e7";
@@ -1639,9 +1695,9 @@ var root18 = "use-styles_root__79pt4e0";
 var step = "use-styles_step__79pt4e1";
 
 // src/components/stepper/use-styles.ts
-function useStyles20({ className }) {
+function useStyles21({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react28.useMemo)(() => {
+  return (0, import_react29.useMemo)(() => {
     const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
     const markerFor = (state) => [
       marker,
@@ -1654,27 +1710,27 @@ function useStyles20({ className }) {
 }
 
 // src/components/stepper/index.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Stepper({ steps, active: active2 = 0, className, ...rest }) {
-  const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles20({ className });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: root24, ...rest, children: steps.map((s, index) => {
+  const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles21({ className });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: root24, ...rest, children: steps.map((s, index) => {
     const state = index < active2 ? "done" : index === active2 ? "active" : "upcoming";
     const isActive = state === "active";
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: steps are a static, ordered list with no stable id.
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react29.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: step2, "aria-current": isActive ? "step" : void 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckIcon, { size: 14 }) : index + 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: labelFor(isActive), children: s.label })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react30.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: step2, "aria-current": isActive ? "step" : void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckIcon, { size: 14 }) : index + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: labelFor(isActive), children: s.label })
         ] }),
-        index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { "data-part": "connector", className: connector2 })
+        index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { "data-part": "connector", className: connector2 })
       ] }, index)
     );
   }) });
 }
 
 // src/components/tabs/use-styles.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/tabs/use-styles.css.ts
 var root19 = "use-styles_root__1l4m7t40";
@@ -1682,9 +1738,9 @@ var tab = "use-styles_tab__1l4m7t41";
 var tabActive = "use-styles_tabActive__1l4m7t42";
 
 // src/components/tabs/use-styles.ts
-function useStyles21() {
+function useStyles22() {
   const { themeClass } = useTheme();
-  return (0, import_react30.useMemo)(() => {
+  return (0, import_react31.useMemo)(() => {
     const root24 = [themeClass, root19].filter(Boolean).join(" ");
     const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
     return { root: root24, tab, tabClass };
@@ -1692,12 +1748,12 @@ function useStyles21() {
 }
 
 // src/components/tabs/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Tabs({ items, value, onChange }) {
-  const { root: root24, tabClass } = useStyles21();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "tablist", className: root24, children: items.map((item3) => {
+  const { root: root24, tabClass } = useStyles22();
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { role: "tablist", className: root24, children: items.map((item3) => {
     const active2 = item3.value === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "button",
       {
         type: "button",
@@ -1713,10 +1769,10 @@ function Tabs({ items, value, onChange }) {
 }
 
 // src/components/menu/index.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/components/menu/use-styles.ts
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/components/menu/use-styles.css.ts
 var danger = "use-styles_danger__1uyxaj3";
@@ -1725,9 +1781,9 @@ var list = "use-styles_list__1uyxaj1 surfaces_panelSurface__6hs0fg1";
 var wrapper3 = "use-styles_wrapper__1uyxaj0";
 
 // src/components/menu/use-styles.ts
-function useStyles22() {
+function useStyles23() {
   const { themeClass } = useTheme();
-  return (0, import_react31.useMemo)(
+  return (0, import_react32.useMemo)(
     () => ({
       wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
       list,
@@ -1739,17 +1795,17 @@ function useStyles22() {
 }
 
 // src/components/menu/index.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
 function Menu({ trigger: trigger2, items }) {
-  const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles22();
-  const [open, setOpen] = (0, import_react32.useState)(false);
-  const rootRef = (0, import_react32.useRef)(null);
-  const listRef = (0, import_react32.useRef)(null);
-  const triggerRef = (0, import_react32.useRef)(null);
+  const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles23();
+  const [open, setOpen] = (0, import_react33.useState)(false);
+  const rootRef = (0, import_react33.useRef)(null);
+  const listRef = (0, import_react33.useRef)(null);
+  const triggerRef = (0, import_react33.useRef)(null);
   const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
   const focusItemAt = (index) => {
     const menuItems = getMenuItems();
@@ -1761,7 +1817,7 @@ function Menu({ trigger: trigger2, items }) {
     setOpen(false);
     triggerRef.current?.focus();
   };
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (!open) return;
     listRef.current?.querySelector('[role="menuitem"]')?.focus();
     const onDocMouseDown = (event) => {
@@ -1817,7 +1873,7 @@ function Menu({ trigger: trigger2, items }) {
     triggerRef.current = node;
     assignRef(consumerRef, node);
   };
-  const clonedTrigger = (0, import_react32.cloneElement)(trigger2, {
+  const clonedTrigger = (0, import_react33.cloneElement)(trigger2, {
     ref: mergedTriggerRef,
     "aria-haspopup": "menu",
     "aria-expanded": open,
@@ -1826,9 +1882,9 @@ function Menu({ trigger: trigger2, items }) {
       setOpen((prev) => !prev);
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ref: rootRef, className: wrapper4, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ref: rootRef, className: wrapper4, children: [
     clonedTrigger,
-    open && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref: listRef, role: "menu", className: list2, onKeyDown: onMenuKeyDown, children: items.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: listRef, role: "menu", className: list2, onKeyDown: onMenuKeyDown, children: items.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "button",
       {
         type: "button",
@@ -1847,28 +1903,26 @@ function Menu({ trigger: trigger2, items }) {
 }
 
 // src/components/dialog/index.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/dialog/use-styles.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/components/dialog/use-styles.css.ts
-var actions = "use-styles_actions__5tstu84";
-var body3 = "use-styles_body__5tstu83";
+var actions = "use-styles_actions__5tstu83";
+var body2 = "use-styles_body__5tstu82";
 var overlay = "use-styles_overlay__5tstu80";
 var surface = "use-styles_surface__5tstu81";
-var titleText2 = "use-styles_titleText__5tstu82";
 
 // src/components/dialog/use-styles.ts
-function useStyles23() {
+function useStyles24() {
   const { themeClass } = useTheme();
-  return (0, import_react33.useMemo)(
+  return (0, import_react34.useMemo)(
     () => ({
       overlay: [themeClass, overlay].filter(Boolean).join(" "),
       surface,
-      titleText: titleText2,
-      body: body3,
+      body: body2,
       actions
     }),
     [themeClass]
@@ -1876,15 +1930,15 @@ function useStyles23() {
 }
 
 // src/components/dialog/index.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Dialog({ open, onClose, title, actions: actions3, children }) {
-  const { overlay: overlay2, surface: surface2, titleText: titleText3, body: body4, actions: actionsClass } = useStyles23();
-  const surfaceRef = (0, import_react34.useRef)(null);
-  const previouslyFocused = (0, import_react34.useRef)(null);
-  const generatedId = (0, import_react34.useId)();
+  const { overlay: overlay2, surface: surface2, body: body3, actions: actionsClass } = useStyles24();
+  const surfaceRef = (0, import_react35.useRef)(null);
+  const previouslyFocused = (0, import_react35.useRef)(null);
+  const generatedId = (0, import_react35.useId)();
   const titleId = title != null ? generatedId : void 0;
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -1892,13 +1946,13 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;
     surfaceRef.current?.focus();
     return () => previouslyFocused.current?.focus?.();
   }, [open]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!open) return;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -1936,7 +1990,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
   };
   return (0, import_react_dom.createPortal)(
     // biome-ignore lint/a11y/useKeyWithClickEvents: ESC handled by a document keydown listener.
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "div",
       {
         ref: surfaceRef,
@@ -1948,9 +2002,9 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
         onClick: stop,
         onKeyDown: onSurfaceKeyDown,
         children: [
-          title != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { id: titleId, className: titleText3, children: title }),
-          children != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: body4, children }),
-          actions3 != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: actionsClass, children: actions3 })
+          title != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Typography, { variant: "h3", as: "h2", id: titleId, children: title }),
+          children != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: body3, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Typography, { variant: "body", color: "fg2", children }) }),
+          actions3 != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: actionsClass, children: actions3 })
         ]
       }
     ) }),
@@ -1962,7 +2016,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
 var import_react_dom2 = require("react-dom");
 
 // src/components/snackbar/use-styles.ts
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/snackbar/use-styles.css.ts
 var closeBtn = "use-styles_closeBtn__ihzsep2";
@@ -1970,9 +2024,9 @@ var message = "use-styles_message__ihzsep1";
 var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__6hs0fg2";
 
 // src/components/snackbar/use-styles.ts
-function useStyles24() {
+function useStyles25() {
   const { themeClass } = useTheme();
-  return (0, import_react35.useMemo)(
+  return (0, import_react36.useMemo)(
     () => ({
       root: [themeClass, root20].filter(Boolean).join(" "),
       message,
@@ -1983,22 +2037,22 @@ function useStyles24() {
 }
 
 // src/components/snackbar/index.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Snackbar({ open, message: message2, action, onClose }) {
-  const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles24();
+  const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles25();
   if (!open || typeof document === "undefined") return null;
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { role: "status", className: root24, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: messageClass, children: message2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { role: "status", className: root24, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: messageClass, children: message2 }),
       action,
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(XIcon, { size: 18 }) })
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(XIcon, { size: 18 }) })
     ] }),
     document.body
   );
 }
 
 // src/components/table/use-styles.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/components/table/use-styles.css.ts
 var alignRight = "use-styles_alignRight__1n2cz6i3";
@@ -2007,9 +2061,9 @@ var td = "use-styles_td__1n2cz6i2";
 var th = "use-styles_th__1n2cz6i1";
 
 // src/components/table/use-styles.ts
-function useStyles25({ className }) {
+function useStyles26({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react36.useMemo)(
+  const root24 = (0, import_react37.useMemo)(
     () => [themeClass, root21, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2017,7 +2071,7 @@ function useStyles25({ className }) {
 }
 
 // src/components/table/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Table({
   columns,
   rows,
@@ -2025,17 +2079,17 @@ function Table({
   className,
   ...rest
 }) {
-  const { root: root24, th: th2, td: td2, alignRight: alignRight2 } = useStyles25({ className });
+  const { root: root24, th: th2, td: td2, alignRight: alignRight2 } = useStyles26({ className });
   const headClass = (column) => column.align === "right" ? `${th2} ${alignRight2}` : th2;
   const cellClass = (column) => column.align === "right" ? `${td2} ${alignRight2}` : td2;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("table", { className: root24, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("th", { className: headClass(column), children: column.header }, column.key)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tbody", { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("table", { className: root24, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("th", { className: headClass(column), children: column.header }, column.key)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tbody", { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
   ] });
 }
 
 // src/components/app-bar/use-styles.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/components/app-bar/use-styles.css.ts
 var actions2 = "use-styles_actions__1h133nh2";
@@ -2043,9 +2097,9 @@ var brand = "use-styles_brand__1h133nh1";
 var root22 = "use-styles_root__1h133nh0";
 
 // src/components/app-bar/use-styles.ts
-function useStyles26({ className }) {
+function useStyles27({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react37.useMemo)(
+  const root24 = (0, import_react38.useMemo)(
     () => [themeClass, root22, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2053,18 +2107,18 @@ function useStyles26({ className }) {
 }
 
 // src/components/app-bar/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function AppBar({ brand: brand2, actions: actions3, className, children, ...rest }) {
-  const styles = useStyles26({ className });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("header", { className: styles.root, ...rest, children: [
-    brand2 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: styles.brand, children: brand2 }) : null,
+  const styles = useStyles27({ className });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("header", { className: styles.root, ...rest, children: [
+    brand2 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: styles.brand, children: brand2 }) : null,
     children,
-    actions3 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: styles.actions, children: actions3 }) : null
+    actions3 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: styles.actions, children: actions3 }) : null
   ] });
 }
 
 // src/components/list-item/use-styles.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // src/components/list-item/use-styles.css.ts
 var content2 = "use-styles_content__kbreq13";
@@ -2074,12 +2128,12 @@ var selected2 = "use-styles_selected__kbreq11";
 var trailing = "use-styles_trailing__kbreq14";
 
 // src/components/list-item/use-styles.ts
-function useStyles27({
+function useStyles28({
   selected: selected3,
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react38.useMemo)(
+  const root24 = (0, import_react39.useMemo)(
     () => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
     [themeClass, selected3, className]
   );
@@ -2087,7 +2141,7 @@ function useStyles27({
 }
 
 // src/components/list-item/index.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function ListItem({
   leading: leading2,
   trailing: trailing2,
@@ -2096,18 +2150,18 @@ function ListItem({
   children,
   ...rest
 }) {
-  const styles = useStyles27({ selected: selected3, className });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: styles.root, ...rest, children: [
-    leading2 != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: styles.leading, children: leading2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: styles.content, children }),
-    trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: styles.trailing, children: trailing2 })
+  const styles = useStyles28({ selected: selected3, className });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: styles.root, ...rest, children: [
+    leading2 != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: styles.leading, children: leading2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: styles.content, children }),
+    trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: styles.trailing, children: trailing2 })
   ] });
 }
 
 // src/components/icons/chevron-up/index.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2121,15 +2175,15 @@ function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "m18 15-6-6-6 6" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "m18 15-6-6-6 6" })
     }
   );
 }
 
 // src/components/icons/search/index.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2144,17 +2198,17 @@ function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "m21 21-4.3-4.3" })
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "m21 21-4.3-4.3" })
       ]
     }
   );
 }
 
 // src/components/icons/plus/index.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2169,17 +2223,17 @@ function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M5 12h14" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M12 5v14" })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { d: "M12 5v14" })
       ]
     }
   );
 }
 
 // src/components/icons/minus/index.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2193,15 +2247,15 @@ function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { d: "M5 12h14" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M5 12h14" })
     }
   );
 }
 
 // src/components/icons/more-horizontal/index.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2216,16 +2270,13 @@ function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("circle", { cx: "5", cy: "12", r: "1" })
       ]
     }
   );
 }
-
-// src/theme/typography.css.ts
-var text = { eyebrow: "typography_text_eyebrow__1wmlzy0", display: "typography_text_display__1wmlzy1", h1: "typography_text_h1__1wmlzy2", h2: "typography_text_h2__1wmlzy3", h3: "typography_text_h3__1wmlzy4", h4: "typography_text_h4__1wmlzy5", body: "typography_text_body__1wmlzy6", lead: "typography_text_lead__1wmlzy7", small: "typography_text_small__1wmlzy8", caption: "typography_text_caption__1wmlzy9", code: "typography_text_code__1wmlzya", blackletter: "typography_text_blackletter__1wmlzyb" };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -2271,6 +2322,7 @@ var text = { eyebrow: "typography_text_eyebrow__1wmlzy0", display: "typography_t
   ThemeProvider,
   Tooltip,
   TriangleAlertIcon,
+  Typography,
   XIcon,
   colorVars,
   modeNames,