@octavius2929-personal/design-system 0.14.0 → 0.15.0

package/dist/index.cjs

@@ -182,13 +182,267 @@ ContainerForwarded.displayName = "Container";
 var Container = ContainerForwarded;
 
 // src/components/typography/index.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/typography/use-styles.ts
+var import_react8 = require("react");
+
+// ../core/dist/index.js
+var import_react6 = require("react");
+var tokens = {
+  font: {
+    display: "'DM Serif Display', 'Times New Roman', serif",
+    text: "'Newsreader', Georgia, serif",
+    mono: "'IBM Plex Mono', 'SFMono-Regular', monospace",
+    black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif"
+  },
+  // Roles tipográficos: tamaño/interlineado/peso/tracking listos para typography.css.ts.
+  text: {
+    eyebrow: { size: "0.694rem", lineHeight: "1.2", weight: "500", letterSpacing: "0.14em" },
+    display: { size: "5.6rem", lineHeight: "1.05", weight: "600", letterSpacing: "-0.01em" },
+    h1: { size: "2.9rem", lineHeight: "1.05", weight: "600", letterSpacing: "-0.01em" },
+    h2: { size: "2.1rem", lineHeight: "1.2", weight: "600", letterSpacing: "0" },
+    h3: { size: "1.563rem", lineHeight: "1.2", weight: "500", letterSpacing: "0" },
+    h4: { size: "1.25rem", lineHeight: "1.2", weight: "600", letterSpacing: "0" },
+    body: { size: "1rem", lineHeight: "1.7", weight: "400", letterSpacing: "0" },
+    lead: { size: "1.25rem", lineHeight: "1.7", weight: "400", letterSpacing: "0" },
+    small: { size: "0.95rem", lineHeight: "1.5", weight: "400", letterSpacing: "0" },
+    caption: { size: "0.833rem", lineHeight: "1.5", weight: "400", letterSpacing: "0.04em" }
+  },
+  space: {
+    s0: "0",
+    s1: "0.25rem",
+    // 4
+    s2: "0.5rem",
+    // 8
+    s3: "0.75rem",
+    // 12
+    s4: "1rem",
+    // 16
+    s5: "1.5rem",
+    // 24
+    s6: "2rem",
+    // 32
+    s7: "3rem",
+    // 48
+    s8: "4rem",
+    // 64
+    s9: "6rem"
+    // 96
+  },
+  radius: { none: "0px", sm: "3px", md: "5px", lg: "8px", base: "4px", full: "999px" },
+  border: { hair: "1px", rule: "1.5px", heavy: "2px" },
+  // Tracking de mayúsculas: escala coherente alineada al uso real (eyebrow = widest).
+  tracking: { tight: "-0.01em", normal: "0", wide: "0.04em", wider: "0.1em", widest: "0.14em" },
+  weight: { light: "300", regular: "400", medium: "500", semibold: "600", bold: "700" },
+  dur: { fast: "120ms", base: "200ms", slow: "360ms" },
+  ease: { ink: "cubic-bezier(0.2, 0, 0, 1)" },
+  shadow: {
+    sm: "0 1px 0 rgba(20,17,14,0.06)",
+    md: "0 2px 10px -4px rgba(20,17,14,0.22)",
+    lg: "0 12px 32px -10px rgba(20,17,14,0.34)"
+  }
+};
+var tintaSchema = {
+  light: {
+    ...tokens,
+    color: {
+      bg1: "#F8F7F4",
+      bg2: "#FFFFFF",
+      bg3: "#EDEBE6",
+      bgInset: "#E4E1DA",
+      fg1: "#15130F",
+      fg2: "#494640",
+      fg3: "#737069",
+      fgOnAccent: "#F8F7F4",
+      border1: "rgba(21, 19, 15, 0.12)",
+      border2: "rgba(21, 19, 15, 0.26)",
+      borderStrong: "rgba(21, 19, 15, 0.85)",
+      accent: "#7B1E1E",
+      accentHover: "#631616",
+      accentSoft: "rgba(123, 30, 30, 0.10)",
+      ok: "#3E5C3A",
+      warn: "#8A6A1E",
+      danger: "#7B1E1E",
+      dangerHover: "#631616",
+      dangerSoft: "rgba(123, 30, 30, 0.10)",
+      info: "#2E4257",
+      focus: "#7B1E1E",
+      scrim: "rgba(20, 17, 14, 0.55)"
+    }
+  },
+  dark: {
+    ...tokens,
+    color: {
+      bg1: "#100E0B",
+      bg2: "#1A1611",
+      bg3: "#070605",
+      bgInset: "#221D16",
+      fg1: "#F2EDE2",
+      fg2: "#B7AF9F",
+      fg3: "#878070",
+      fgOnAccent: "#F2EDE2",
+      border1: "rgba(242, 237, 226, 0.13)",
+      border2: "rgba(242, 237, 226, 0.26)",
+      borderStrong: "rgba(242, 237, 226, 0.80)",
+      accent: "#B23A3A",
+      accentHover: "#CC4A4A",
+      accentSoft: "rgba(178, 58, 58, 0.16)",
+      ok: "#7FA178",
+      warn: "#C7A04E",
+      danger: "#C24A4A",
+      dangerHover: "#D45C5C",
+      dangerSoft: "rgba(194, 74, 74, 0.16)",
+      info: "#6E92B4",
+      focus: "#CC4A4A",
+      scrim: "rgba(7, 6, 5, 0.65)"
+    }
+  },
+  sepia: {
+    ...tokens,
+    color: {
+      bg1: "#E9DDC4",
+      bg2: "#F2E9D5",
+      bg3: "#DCCDAC",
+      bgInset: "#D2C09B",
+      fg1: "#2A2013",
+      fg2: "#5A4A33",
+      fg3: "#6E6046",
+      fgOnAccent: "#F2E9D5",
+      border1: "rgba(42, 32, 19, 0.16)",
+      border2: "rgba(42, 32, 19, 0.32)",
+      borderStrong: "rgba(42, 32, 19, 0.82)",
+      accent: "#7A2E12",
+      accentHover: "#5F2109",
+      accentSoft: "rgba(122, 46, 18, 0.12)",
+      ok: "#4A5A2E",
+      warn: "#8A6A1E",
+      danger: "#7A2E12",
+      dangerHover: "#5F2109",
+      dangerSoft: "rgba(122, 46, 18, 0.12)",
+      info: "#3C4E57",
+      focus: "#7A2E12",
+      scrim: "rgba(42, 32, 19, 0.55)"
+    }
+  },
+  contrast: {
+    ...tokens,
+    color: {
+      bg1: "#FFFFFF",
+      bg2: "#FFFFFF",
+      bg3: "#F2F2F2",
+      bgInset: "#EAEAEA",
+      fg1: "#000000",
+      fg2: "#000000",
+      fg3: "#2B2B2B",
+      fgOnAccent: "#FFFFFF",
+      border1: "#000000",
+      border2: "#000000",
+      borderStrong: "#000000",
+      accent: "#000000",
+      accentHover: "#2B2B2B",
+      accentSoft: "rgba(0, 0, 0, 0.08)",
+      ok: "#000000",
+      warn: "#000000",
+      danger: "#8B0000",
+      dangerHover: "#6B0000",
+      dangerSoft: "rgba(139, 0, 0, 0.10)",
+      info: "#000000",
+      focus: "#000000",
+      scrim: "rgba(0, 0, 0, 0.7)"
+    }
+  }
+};
+var schemas = { tinta: tintaSchema };
+var modeNames2 = ["light", "dark", "sepia", "contrast"];
+function resolveMode(preference, systemMode) {
+  return preference === "system" ? systemMode : preference;
+}
+function useThemeStore(options, storage, system) {
+  const { defaultSchema = "tinta", defaultMode = "light" } = options;
+  const [persisted] = (0, import_react6.useState)(() => storage.read());
+  const [schema, setSchema] = (0, import_react6.useState)(persisted?.schema ?? defaultSchema);
+  const [preference, setPreference] = (0, import_react6.useState)(
+    persisted?.preference ?? defaultMode
+  );
+  const [systemMode, setSystemMode] = (0, import_react6.useState)(() => system.get());
+  (0, import_react6.useEffect)(() => {
+    if (preference !== "system") return;
+    const update = () => setSystemMode(system.get());
+    update();
+    return system.subscribe(update);
+  }, [preference, system]);
+  const mode = resolveMode(preference, systemMode);
+  (0, import_react6.useEffect)(() => {
+    storage.write({ schema, preference });
+  }, [schema, preference, storage]);
+  return (0, import_react6.useMemo)(
+    () => ({
+      schema,
+      mode,
+      preference,
+      colorTokens: schemas[schema][mode].color,
+      setSchema,
+      setMode: setPreference,
+      toggleMode: () => setPreference(mode === "dark" ? "light" : "dark"),
+      cycleMode: () => {
+        const next = modeNames2[(modeNames2.indexOf(mode) + 1) % modeNames2.length];
+        if (next) setPreference(next);
+      }
+    }),
+    [schema, mode, preference]
+  );
+}
+
+// src/theme/context/theme-context.tsx
 var import_react7 = require("react");
 
+// src/theme/adapters.ts
+var SYSTEM_QUERIES = ["(prefers-contrast: more)", "(prefers-color-scheme: dark)"];
+function createWebStorageAdapter(storageKey, persist) {
+  return {
+    read() {
+      if (!persist || typeof window === "undefined") return null;
+      try {
+        const raw = window.localStorage.getItem(storageKey);
+        return raw ? JSON.parse(raw) : null;
+      } catch {
+        return null;
+      }
+    },
+    write(value) {
+      if (!persist || typeof window === "undefined") return;
+      try {
+        window.localStorage.setItem(storageKey, JSON.stringify(value));
+      } catch {
+      }
+    }
+  };
+}
+function createWebSystemModeAdapter() {
+  function get() {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
+    if (window.matchMedia("(prefers-contrast: more)").matches) return "contrast";
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
+    return "light";
+  }
+  return {
+    get,
+    subscribe(onChange) {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+        return () => {
+        };
+      }
+      const mqls = SYSTEM_QUERIES.map((q) => window.matchMedia(q));
+      for (const mql of mqls) mql.addEventListener?.("change", onChange);
+      return () => {
+        for (const mql of mqls) mql.removeEventListener?.("change", onChange);
+      };
+    }
+  };
+}
+
 // src/theme/context/theme-context.tsx
-var import_react6 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var noop = () => {
 };
@@ -202,29 +456,7 @@ var DEFAULT_VALUE = {
   toggleMode: noop,
   cycleMode: noop
 };
-var ThemeContext = (0, import_react6.createContext)(null);
-function resolveSystemMode() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
-  if (window.matchMedia("(prefers-contrast: more)").matches) return "contrast";
-  if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
-  return "light";
-}
-function readStored(key) {
-  if (typeof window === "undefined") return null;
-  try {
-    const raw = window.localStorage.getItem(key);
-    return raw ? JSON.parse(raw) : null;
-  } catch {
-    return null;
-  }
-}
-function writeStored(key, value) {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.setItem(key, JSON.stringify(value));
-  } catch {
-  }
-}
+var ThemeContext = (0, import_react7.createContext)(null);
 function ThemeProvider({
   children,
   defaultSchema = "tinta",
@@ -232,50 +464,29 @@ function ThemeProvider({
   storageKey = "ds-theme",
   persist = true
 }) {
-  const [schema, setSchema] = (0, import_react6.useState)(
-    () => persist && readStored(storageKey)?.schema || defaultSchema
-  );
-  const [preference, setPreference] = (0, import_react6.useState)(
-    () => (persist ? readStored(storageKey)?.preference : null) ?? defaultMode
+  const storage = (0, import_react7.useMemo)(
+    () => createWebStorageAdapter(storageKey, persist),
+    [storageKey, persist]
   );
-  const [systemMode, setSystemMode] = (0, import_react6.useState)(resolveSystemMode);
-  (0, import_react6.useEffect)(() => {
-    if (preference !== "system") return;
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    const mqls = ["(prefers-contrast: more)", "(prefers-color-scheme: dark)"].map(
-      (q) => window.matchMedia(q)
-    );
-    const onChange = () => setSystemMode(resolveSystemMode());
-    onChange();
-    for (const mql of mqls) mql.addEventListener?.("change", onChange);
-    return () => {
-      for (const mql of mqls) mql.removeEventListener?.("change", onChange);
-    };
-  }, [preference]);
-  const mode = preference === "system" ? systemMode : preference;
-  (0, import_react6.useEffect)(() => {
-    if (persist) writeStored(storageKey, { schema, preference });
-  }, [schema, preference, persist, storageKey]);
-  const value = (0, import_react6.useMemo)(
+  const system = (0, import_react7.useMemo)(() => createWebSystemModeAdapter(), []);
+  const store = useThemeStore({ defaultSchema, defaultMode }, storage, system);
+  const value = (0, import_react7.useMemo)(
     () => ({
-      schema,
-      mode,
-      preference,
-      themeClass: themes[schema][mode],
-      setSchema,
-      setMode: setPreference,
-      toggleMode: () => setPreference(mode === "dark" ? "light" : "dark"),
-      cycleMode: () => {
-        const next = modeNames[(modeNames.indexOf(mode) + 1) % modeNames.length];
-        if (next) setPreference(next);
-      }
+      schema: store.schema,
+      mode: store.mode,
+      preference: store.preference,
+      themeClass: themes[store.schema][store.mode],
+      setSchema: store.setSchema,
+      setMode: store.setMode,
+      toggleMode: store.toggleMode,
+      cycleMode: store.cycleMode
     }),
-    [schema, mode, preference]
+    [store]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  return (0, import_react6.useContext)(ThemeContext) ?? DEFAULT_VALUE;
+  return (0, import_react7.useContext)(ThemeContext) ?? DEFAULT_VALUE;
 }
 
 // src/theme/typography.css.ts
@@ -293,7 +504,7 @@ function useStyles2({
   align: align2
 }) {
   const { themeClass } = useTheme();
-  const className = (0, import_react7.useMemo)(
+  const className = (0, import_react8.useMemo)(
     () => [
       themeClass,
       base,
@@ -328,14 +539,14 @@ function TypographyInner({ variant: variant2, as, color: color2, align: align2,
   const { testId: dataTestId } = useTestId("text", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ref, "data-testid": dataTestId, ...rest, className: text2 });
 }
-var TypographyForwarded = (0, import_react8.forwardRef)(
+var TypographyForwarded = (0, import_react9.forwardRef)(
   TypographyInner
 );
 TypographyForwarded.displayName = "Typography";
 var Typography = TypographyForwarded;
 
 // src/components/button/index.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/testing/states.ts
 function states(map) {
@@ -344,7 +555,7 @@ function states(map) {
 }
 
 // src/components/button/use-styles.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/button/use-styles.css.ts
 var full = "use-styles_full__1pbtill4";
@@ -365,7 +576,7 @@ function useStyles3({
   className
 }) {
   const { themeClass } = useTheme();
-  const container = (0, import_react9.useMemo)(
+  const container = (0, import_react10.useMemo)(
     () => [
       themeClass,
       root,
@@ -382,7 +593,7 @@ function useStyles3({
 // src/components/button/index.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ICON_SIZE = { sm: 14, md: 16, lg: 18 };
-var Button = (0, import_react10.forwardRef)(function Button2({
+var Button = (0, import_react11.forwardRef)(function Button2({
   variant: variant2,
   tone: tone4,
   size: size3 = "md",
@@ -417,10 +628,10 @@ var Button = (0, import_react10.forwardRef)(function Button2({
 });
 
 // src/components/divider/index.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/divider/use-styles.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/divider/use-styles.css.ts
 var horizontal = "use-styles_horizontal__1n7v7yj1";
@@ -433,7 +644,7 @@ var vertical = "use-styles_vertical__1n7v7yj2";
 // src/components/divider/use-styles.ts
 function useStyles4({ vertical: vertical2, hasLabel }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react11.useMemo)(
+  const root24 = (0, import_react12.useMemo)(
     () => [
       themeClass,
       root2,
@@ -446,7 +657,7 @@ function useStyles4({ vertical: vertical2, hasLabel }) {
 
 // src/components/divider/index.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Divider = (0, import_react12.forwardRef)(function Divider2({ vertical: vertical2, label: label7, testId, ...rest }, ref) {
+var Divider = (0, import_react13.forwardRef)(function Divider2({ vertical: vertical2, label: label7, testId, ...rest }, ref) {
   const hasLabel = label7 != null;
   const { root: root24, line: line2, label: labelClass } = useStyles4({ vertical: vertical2, hasLabel });
   const { testId: dataTestId, slot } = useTestId("layout", testId);
@@ -461,10 +672,10 @@ var Divider = (0, import_react12.forwardRef)(function Divider2({ vertical: verti
 });
 
 // src/components/avatar/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/avatar/use-styles.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/avatar/use-styles.css.ts
 var root3 = "use-styles_root__1mn1rmu0";
@@ -478,7 +689,7 @@ function useStyles5({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react13.useMemo)(
+  const root24 = (0, import_react14.useMemo)(
     () => [
       themeClass,
       root3,
@@ -493,17 +704,17 @@ function useStyles5({
 
 // src/components/avatar/index.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Avatar = (0, import_react14.forwardRef)(function Avatar2({ size: size3, filled, className, children, testId, ...rest }, ref) {
+var Avatar = (0, import_react15.forwardRef)(function Avatar2({ size: size3, filled, className, children, testId, ...rest }, ref) {
   const { root: root24 } = useStyles5({ size: size3, filled, className });
   const { testId: dataTestId } = useTestId("media", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { ref, className: root24, "data-testid": dataTestId, ...rest, children });
 });
 
 // src/components/badge/index.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/components/badge/use-styles.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/badge/use-styles.css.ts
 var dot = "use-styles_dot__1wpei6p1";
@@ -516,17 +727,17 @@ function useStyles6({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react15.useMemo)(
+  const root24 = (0, import_react16.useMemo)(
     () => [themeClass, root4, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
-  const dot3 = (0, import_react15.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
+  const dot3 = (0, import_react16.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
   return { root: root24, dot: dot3 };
 }
 
 // src/components/badge/index.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Badge = (0, import_react16.forwardRef)(function Badge2({ count, tone: tone4, className, children, testId, ...rest }, ref) {
+var Badge = (0, import_react17.forwardRef)(function Badge2({ count, tone: tone4, className, children, testId, ...rest }, ref) {
   const { root: root24, dot: dot3 } = useStyles6({ tone: tone4, className });
   const { testId: dataTestId, slot } = useTestId("media", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { ref, className: root24, "data-testid": dataTestId, ...rest, children: [
@@ -536,10 +747,10 @@ var Badge = (0, import_react16.forwardRef)(function Badge2({ count, tone: tone4,
 });
 
 // src/components/progress/index.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/progress/use-styles.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/progress/use-styles.css.ts
 var bar = "use-styles_bar__kbop7v3";
@@ -555,7 +766,7 @@ function useStyles7({
 }) {
   const { themeClass } = useTheme();
   const indeterminate2 = value === void 0;
-  return (0, import_react17.useMemo)(() => {
+  return (0, import_react18.useMemo)(() => {
     const root24 = (...classes) => [themeClass, ...classes, className].filter(Boolean).join(" ");
     if (variant2 === "circular") {
       return { track: "", bar: "", spinner: root24(spinner) };
@@ -570,7 +781,7 @@ function useStyles7({
 
 // src/components/progress/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Progress = (0, import_react18.forwardRef)(function Progress2({ variant: variant2 = "linear", value, size: size3 = 20, className, testId, ...rest }, ref) {
+var Progress = (0, import_react19.forwardRef)(function Progress2({ variant: variant2 = "linear", value, size: size3 = 20, className, testId, ...rest }, ref) {
   const { track: track4, bar: bar2, spinner: spinner2 } = useStyles7({ variant: variant2, value, className });
   const indeterminate2 = value === void 0;
   const { testId: dataTestId, slot } = useTestId("media", testId);
@@ -616,7 +827,7 @@ var Progress = (0, import_react18.forwardRef)(function Progress2({ variant: vari
 });
 
 // src/components/chip/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/icons/x/index.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -644,7 +855,7 @@ function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/chip/use-styles.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/chip/use-styles.css.ts
 var clickable = "use-styles_clickable__1axilf44";
@@ -660,7 +871,7 @@ function useStyles8({
   clickable: clickable2
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react19.useMemo)(
+  const root24 = (0, import_react20.useMemo)(
     () => [
       themeClass,
       root5,
@@ -674,7 +885,7 @@ function useStyles8({
 
 // src/components/chip/index.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Chip = (0, import_react20.forwardRef)(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, children, testId, ...rest }, ref) {
+var Chip = (0, import_react21.forwardRef)(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, children, testId, ...rest }, ref) {
   const clickable2 = Boolean(onClick);
   const { root: root24, deleteBtn: deleteBtn2 } = useStyles8({ selected: selected3, tone: tone4, clickable: clickable2 });
   const { testId: dataTestId, slot } = useTestId("media", testId);
@@ -710,7 +921,7 @@ var Chip = (0, import_react20.forwardRef)(function Chip2({ selected: selected3,
 });
 
 // src/components/checkbox/index.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/icons/check/index.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -735,7 +946,7 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/checkbox/use-styles.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/checkbox/use-styles.css.ts
 var box = "use-styles_box__9zoga91";
@@ -748,11 +959,11 @@ var root6 = "use-styles_root__9zoga90";
 // src/components/checkbox/use-styles.ts
 function useStyles9({ checked, disabled: disabled3 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react21.useMemo)(
+  const root24 = (0, import_react22.useMemo)(
     () => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
     [themeClass, disabled3]
   );
-  const box2 = (0, import_react21.useMemo)(
+  const box2 = (0, import_react22.useMemo)(
     () => [box, checked && boxChecked].filter(Boolean).join(" "),
     [checked]
   );
@@ -761,7 +972,7 @@ function useStyles9({ checked, disabled: disabled3 }) {
 
 // src/components/checkbox/index.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Checkbox = (0, import_react22.forwardRef)(function Checkbox2({ checked = false, onChange, label: label7, disabled: disabled3 = false, id, testId, ...rest }, ref) {
+var Checkbox = (0, import_react23.forwardRef)(function Checkbox2({ checked = false, onChange, label: label7, disabled: disabled3 = false, id, testId, ...rest }, ref) {
   const { root: root24, input: input6, box: box2, check: check2 } = useStyles9({ checked, disabled: disabled3 });
   const { testId: dataTestId } = useTestId("toggle", testId);
   const handleChange = (e) => {
@@ -788,10 +999,10 @@ var Checkbox = (0, import_react22.forwardRef)(function Checkbox2({ checked = fal
 });
 
 // src/components/radio/index.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/components/radio/use-styles.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/components/radio/use-styles.css.ts
 var circle = "use-styles_circle__vy61b42";
@@ -807,7 +1018,7 @@ function useStyles10({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react23.useMemo)(
+  const root24 = (0, import_react24.useMemo)(
     () => [themeClass, root7, disabled3 && disabled2, className].filter(Boolean).join(" "),
     [themeClass, disabled3, className]
   );
@@ -822,7 +1033,7 @@ function useStyles10({
 
 // src/components/radio/index.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var Radio = (0, import_react24.forwardRef)(function Radio2({ checked, onChange, label: label7, name, value, disabled: disabled3, testId, ...rest }, ref) {
+var Radio = (0, import_react25.forwardRef)(function Radio2({ checked, onChange, label: label7, name, value, disabled: disabled3, testId, ...rest }, ref) {
   const { root: root24, input: input6, circle: circle2, dot: dot3, label: labelClass } = useStyles10({ disabled: disabled3 });
   const { testId: dataTestId } = useTestId("toggle", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: root24, "data-testid": dataTestId, "data-state": states({ checked, disabled: disabled3 }), children: [
@@ -846,10 +1057,10 @@ var Radio = (0, import_react24.forwardRef)(function Radio2({ checked, onChange,
 });
 
 // src/components/switch/index.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/switch/use-styles.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/components/switch/use-styles.css.ts
 var input3 = "surfaces_srOnly__1qa7atn0";
@@ -863,7 +1074,7 @@ var trackChecked = "use-styles_trackChecked__1r6kem72";
 // src/components/switch/use-styles.ts
 function useStyles11({ checked }) {
   const { themeClass } = useTheme();
-  return (0, import_react25.useMemo)(
+  return (0, import_react26.useMemo)(
     () => ({
       root: [themeClass, root8].filter(Boolean).join(" "),
       input: input3,
@@ -877,7 +1088,7 @@ function useStyles11({ checked }) {
 
 // src/components/switch/index.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var Switch = (0, import_react26.forwardRef)(function Switch2({ checked = false, onChange, label: label7, disabled: disabled3, testId, ...rest }, ref) {
+var Switch = (0, import_react27.forwardRef)(function Switch2({ checked = false, onChange, label: label7, disabled: disabled3, testId, ...rest }, ref) {
   const { root: root24, input: input6, track: track4, knob: knob2, label: labelClass } = useStyles11({ checked });
   const { testId: dataTestId } = useTestId("toggle", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: root24, "data-testid": dataTestId, "data-state": states({ checked, disabled: disabled3 }), children: [
@@ -904,13 +1115,13 @@ var Switch = (0, import_react26.forwardRef)(function Switch2({ checked = false,
 });
 
 // src/components/text-field/index.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/base-field/index.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/components/base-field/use-styles.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/base-field/use-styles.css.ts
 var field = "use-styles_field__1c3cgd3";
@@ -929,7 +1140,7 @@ var trailingSlot = "use-styles_trailingSlot__1c3cgdb";
 // src/components/base-field/use-styles.ts
 function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
   const { themeClass } = useTheme();
-  return (0, import_react27.useMemo)(() => {
+  return (0, import_react28.useMemo)(() => {
     const root24 = [themeClass, root9].filter(Boolean).join(" ");
     const labelText2 = [labelText, error && labelTextError].filter(Boolean).join(" ");
     const input6 = [
@@ -954,8 +1165,8 @@ function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
 
 // src/components/base-field/index.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var BaseField = (0, import_react28.forwardRef)(function BaseField2({ label: label7, help, error, startIcon: StartIcon, trailing: trailing2, id, className, testId, children }, ref) {
-  const autoId = (0, import_react28.useId)();
+var BaseField = (0, import_react29.forwardRef)(function BaseField2({ label: label7, help, error, startIcon: StartIcon, trailing: trailing2, id, className, testId, children }, ref) {
+  const autoId = (0, import_react29.useId)();
   const controlId = id ?? autoId;
   const errorMessage = error != null && error !== false && error !== true && error !== "" ? error : null;
   const hasError = error === true || errorMessage != null;
@@ -1003,7 +1214,7 @@ var import_jsx_runtime17 = (
   // tipo público de la ref es HTMLInputElement (la ref aplica solo a la rama <input>).
   require("react/jsx-runtime")
 );
-var TextField = (0, import_react29.forwardRef)(function TextField2({
+var TextField = (0, import_react30.forwardRef)(function TextField2({
   label: label7,
   help,
   error,
@@ -1054,7 +1265,7 @@ var TextField = (0, import_react29.forwardRef)(function TextField2({
 });
 
 // src/components/password-field/index.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/components/icons/eye/index.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -1109,21 +1320,21 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/password-field/use-styles.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/password-field/use-styles.css.ts
 var revealButton = "use-styles_revealButton__rsu9d50";
 
 // src/components/password-field/use-styles.ts
 function useStyles13() {
-  return (0, import_react30.useMemo)(() => ({ revealButton }), []);
+  return (0, import_react31.useMemo)(() => ({ revealButton }), []);
 }
 
 // src/components/password-field/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var PasswordField = (0, import_react31.forwardRef)(
+var PasswordField = (0, import_react32.forwardRef)(
   function PasswordField2({ label: label7, help, error, startIcon, onChange, id, className, ...rest }, ref) {
-    const [reveal, setReveal] = (0, import_react31.useState)(false);
+    const [reveal, setReveal] = (0, import_react32.useState)(false);
     const classes = useStyles13();
     const handleChange = (e) => {
       onChange?.(e.target.value);
@@ -1169,7 +1380,7 @@ var PasswordField = (0, import_react31.forwardRef)(
 );
 
 // src/components/money-field/index.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function parseAmount(raw) {
   const cleaned = raw.replace(/[^0-9.-]/g, "");
@@ -1177,7 +1388,7 @@ function parseAmount(raw) {
   const n = Number.parseFloat(cleaned);
   return Number.isNaN(n) ? null : n;
 }
-var MoneyField = (0, import_react32.forwardRef)(function MoneyField2({
+var MoneyField = (0, import_react33.forwardRef)(function MoneyField2({
   value,
   onChange,
   currency = "USD",
@@ -1192,9 +1403,9 @@ var MoneyField = (0, import_react32.forwardRef)(function MoneyField2({
   onBlur,
   ...rest
 }, ref) {
-  const [focused, setFocused] = (0, import_react32.useState)(false);
-  const [draft, setDraft] = (0, import_react32.useState)("");
-  const formatter = (0, import_react32.useMemo)(
+  const [focused, setFocused] = (0, import_react33.useState)(false);
+  const [draft, setDraft] = (0, import_react33.useState)("");
+  const formatter = (0, import_react33.useMemo)(
     () => new Intl.NumberFormat(locale, { style: "currency", currency }),
     [locale, currency]
   );
@@ -1237,10 +1448,10 @@ var MoneyField = (0, import_react32.forwardRef)(function MoneyField2({
 });
 
 // src/components/icon-button/index.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/icon-button/use-styles.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/components/icon-button/use-styles.css.ts
 var accent = "use-styles_accent__18np0q02";
@@ -1253,7 +1464,7 @@ function useStyles14({
   tone: tone4 = "ink"
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react33.useMemo)(
+  const root24 = (0, import_react34.useMemo)(
     () => [themeClass, root10, tone4 === "accent" && accent, active2 && active].filter(Boolean).join(" "),
     [themeClass, active2, tone4]
   );
@@ -1262,7 +1473,7 @@ function useStyles14({
 
 // src/components/icon-button/index.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var IconButton = (0, import_react34.forwardRef)(function IconButton2({ icon: Icon, active: active2, tone: tone4, title, type = "button", testId, ...rest }, ref) {
+var IconButton = (0, import_react35.forwardRef)(function IconButton2({ icon: Icon, active: active2, tone: tone4, title, type = "button", testId, ...rest }, ref) {
   if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
     const restProps = rest;
     const hasName = title.trim() !== "" || restProps["aria-label"] != null || restProps["aria-labelledby"] != null;
@@ -1289,10 +1500,10 @@ var IconButton = (0, import_react34.forwardRef)(function IconButton2({ icon: Ico
 });
 
 // src/components/card/index.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/components/card/use-styles.ts
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/card/use-styles.css.ts
 var body = "use-styles_body__1fuvd022";
@@ -1303,13 +1514,13 @@ var root11 = "use-styles_root__1fuvd020";
 // src/components/card/use-styles.ts
 function useStyles15() {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react35.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
+  const root24 = (0, import_react36.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
   return { root: root24, header, body, footer };
 }
 
 // src/components/card/index.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var CardRoot = (0, import_react36.forwardRef)(function Card({ children, testId, ...rest }, ref) {
+var CardRoot = (0, import_react37.forwardRef)(function Card({ children, testId, ...rest }, ref) {
   const { root: root24 } = useStyles15();
   const { testId: dataTestId } = useTestId("layout", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: root24, "data-testid": dataTestId, ...rest, children });
@@ -1337,7 +1548,7 @@ var Card2 = Object.assign(CardRoot, {
 });
 
 // src/components/alert/index.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // src/components/icons/circle-check/index.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
@@ -1443,7 +1654,7 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/alert/use-styles.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/components/alert/use-styles.css.ts
 var content = "use-styles_content__ivsh6u6";
@@ -1457,7 +1668,7 @@ function useStyles16({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react37.useMemo)(
+  const root24 = (0, import_react38.useMemo)(
     () => [themeClass, root12, severity[severity2], className].filter(Boolean).join(" "),
     [themeClass, severity2, className]
   );
@@ -1476,7 +1687,7 @@ var defaultIcons = {
   warn: TriangleAlertIcon,
   danger: CircleXIcon
 };
-var Alert = (0, import_react38.forwardRef)(function Alert2({ severity: severity2 = "info", title, icon, className, testId, children, ...rest }, ref) {
+var Alert = (0, import_react39.forwardRef)(function Alert2({ severity: severity2 = "info", title, icon, className, testId, children, ...rest }, ref) {
   const styles = useStyles16({ severity: severity2, className });
   const { testId: dataTestId, slot } = useTestId("feedback", testId);
   const IconComponent = icon ?? defaultIcons[severity2];
@@ -1490,10 +1701,10 @@ var Alert = (0, import_react38.forwardRef)(function Alert2({ severity: severity2
 });
 
 // src/components/tooltip/index.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 
 // src/components/tooltip/use-styles.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 
 // src/components/tooltip/use-styles.css.ts
 var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__1qa7atn2";
@@ -1505,11 +1716,11 @@ function useStyles17({
   placement: placement2 = "top"
 }) {
   const { themeClass } = useTheme();
-  const wrapper4 = (0, import_react39.useMemo)(
+  const wrapper4 = (0, import_react40.useMemo)(
     () => [themeClass, wrapper].filter(Boolean).join(" "),
     [themeClass]
   );
-  const bubble2 = (0, import_react39.useMemo)(
+  const bubble2 = (0, import_react40.useMemo)(
     () => [bubble, placement[placement2]].filter(Boolean).join(" "),
     [placement2]
   );
@@ -1519,12 +1730,12 @@ function useStyles17({
 // src/components/tooltip/index.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var HIDE_DELAY = 120;
-var Tooltip = (0, import_react40.forwardRef)(function Tooltip2({ label: label7, children, placement: placement2, testId }, ref) {
-  const [open, setOpen] = (0, import_react40.useState)(false);
-  const tooltipId = (0, import_react40.useId)();
+var Tooltip = (0, import_react41.forwardRef)(function Tooltip2({ label: label7, children, placement: placement2, testId }, ref) {
+  const [open, setOpen] = (0, import_react41.useState)(false);
+  const tooltipId = (0, import_react41.useId)();
   const { wrapper: wrapper4, bubble: bubble2 } = useStyles17({ placement: placement2 });
   const { testId: dataTestId, slot } = useTestId("feedback", testId);
-  const hideTimer = (0, import_react40.useRef)(null);
+  const hideTimer = (0, import_react41.useRef)(null);
   const clearHide = () => {
     if (hideTimer.current) {
       clearTimeout(hideTimer.current);
@@ -1543,7 +1754,7 @@ var Tooltip = (0, import_react40.forwardRef)(function Tooltip2({ label: label7,
     clearHide();
     setOpen(false);
   };
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     return () => {
       if (hideTimer.current) clearTimeout(hideTimer.current);
     };
@@ -1556,7 +1767,7 @@ var Tooltip = (0, import_react40.forwardRef)(function Tooltip2({ label: label7,
   };
   const previousDescribedBy = children.props["aria-describedby"];
   const describedBy = open ? [previousDescribedBy, tooltipId].filter(Boolean).join(" ") : previousDescribedBy;
-  const trigger2 = (0, import_react40.cloneElement)(children, { "aria-describedby": describedBy });
+  const trigger2 = (0, import_react41.cloneElement)(children, { "aria-describedby": describedBy });
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "span",
     {
@@ -1588,7 +1799,7 @@ var Tooltip = (0, import_react40.forwardRef)(function Tooltip2({ label: label7,
 });
 
 // src/components/select/index.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/components/icons/chevron-down/index.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
@@ -1613,7 +1824,7 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/select/use-styles.ts
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/components/select/use-styles.css.ts
 var chevron = "use-styles_chevron__1w1czpb4";
@@ -1632,7 +1843,7 @@ function useStyles18({
   open = false
 }) {
   const { themeClass } = useTheme();
-  return (0, import_react41.useMemo)(() => {
+  return (0, import_react42.useMemo)(() => {
     const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
     return {
       root: [themeClass, root13].filter(Boolean).join(" "),
@@ -1648,16 +1859,16 @@ function useStyles18({
 
 // src/components/select/index.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Select = (0, import_react42.forwardRef)(function Select2({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3, ...rest }, ref) {
-  const [open, setOpen] = (0, import_react42.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react42.useState)(0);
-  const rootRef = (0, import_react42.useRef)(null);
+var Select = (0, import_react43.forwardRef)(function Select2({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3, ...rest }, ref) {
+  const [open, setOpen] = (0, import_react43.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react43.useState)(0);
+  const rootRef = (0, import_react43.useRef)(null);
   const setRootRef = (node) => {
     rootRef.current = node;
     if (typeof ref === "function") ref(node);
     else if (ref) ref.current = node;
   };
-  const baseId = (0, import_react42.useId)();
+  const baseId = (0, import_react43.useId)();
   const labelId = `${baseId}-label`;
   const optionId = (index) => `${baseId}-option-${index}`;
   const {
@@ -1669,7 +1880,7 @@ var Select = (0, import_react42.forwardRef)(function Select2({ options, value, o
     menu: menu2,
     optionClass
   } = useStyles18({ open });
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (rootRef.current && !rootRef.current.contains(event.target)) {
@@ -1780,10 +1991,10 @@ var Select = (0, import_react42.forwardRef)(function Select2({ options, value, o
 });
 
 // src/components/slider/index.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 
 // src/components/slider/use-styles.ts
-var import_react43 = require("react");
+var import_react44 = require("react");
 
 // src/components/slider/use-styles.css.ts
 var input5 = "use-styles_input__okw59n3";
@@ -1797,7 +2008,7 @@ var wrapper2 = "use-styles_wrapper__okw59n6";
 // src/components/slider/use-styles.ts
 function useStyles19() {
   const { themeClass } = useTheme();
-  return (0, import_react43.useMemo)(() => {
+  return (0, import_react44.useMemo)(() => {
     const root24 = [themeClass, root14].filter(Boolean).join(" ");
     return {
       wrapper: wrapper2,
@@ -1813,7 +2024,7 @@ function useStyles19() {
 
 // src/components/slider/index.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var Slider = (0, import_react44.forwardRef)(function Slider2({ value = 0, onChange, min = 0, max = 100, step: step2 = 1, disabled: disabled3, label: label7, ...rest }, ref) {
+var Slider = (0, import_react45.forwardRef)(function Slider2({ value = 0, onChange, min = 0, max = 100, step: step2 = 1, disabled: disabled3, label: label7, ...rest }, ref) {
   const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles19();
   const span = max - min;
   const percent = span > 0 ? (value - min) / span * 100 : 0;
@@ -1847,10 +2058,10 @@ var Slider = (0, import_react44.forwardRef)(function Slider2({ value = 0, onChan
 });
 
 // src/components/accordion/index.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 
 // src/components/accordion/use-styles.ts
-var import_react45 = require("react");
+var import_react46 = require("react");
 
 // src/components/accordion/use-styles.css.ts
 var chevron2 = "use-styles_chevron__1cjrdh93";
@@ -1863,7 +2074,7 @@ var root15 = "use-styles_root__1cjrdh90";
 // src/components/accordion/use-styles.ts
 function useStyles20({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react45.useMemo)(
+  return (0, import_react46.useMemo)(
     () => ({
       root: [themeClass, root15, className].filter(Boolean).join(" "),
       item,
@@ -1877,8 +2088,8 @@ function useStyles20({ className }) {
 
 // src/components/accordion/index.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var Accordion = (0, import_react46.forwardRef)(function Accordion2({ items, multiple = false, defaultOpen = [], className, testId }, ref) {
-  const [open, setOpen] = (0, import_react46.useState)(defaultOpen);
+var Accordion = (0, import_react47.forwardRef)(function Accordion2({ items, multiple = false, defaultOpen = [], className, testId }, ref) {
+  const [open, setOpen] = (0, import_react47.useState)(defaultOpen);
   const { root: root24, item: item3, header: header3, chevronFor, panel: panel3 } = useStyles20({ className });
   const { testId: dataTestId, slot } = useTestId("layout", testId);
   const toggle = (id) => {
@@ -1935,7 +2146,7 @@ var Accordion = (0, import_react46.forwardRef)(function Accordion2({ items, mult
 });
 
 // src/components/breadcrumbs/index.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 
 // src/components/icons/chevron-right/index.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
@@ -1960,7 +2171,7 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/breadcrumbs/use-styles.ts
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/components/breadcrumbs/use-styles.css.ts
 var crumb = "use-styles_crumb__7u0du61";
@@ -1971,7 +2182,7 @@ var separator = "use-styles_separator__7u0du63";
 // src/components/breadcrumbs/use-styles.ts
 function useStyles21({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react47.useMemo)(
+  const root24 = (0, import_react48.useMemo)(
     () => [themeClass, root16, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1980,13 +2191,13 @@ function useStyles21({ className }) {
 
 // src/components/breadcrumbs/index.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var Breadcrumbs = (0, import_react48.forwardRef)(function Breadcrumbs2({ items, className, testId, ...rest }, ref) {
+var Breadcrumbs = (0, import_react49.forwardRef)(function Breadcrumbs2({ items, className, testId, ...rest }, ref) {
   const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles21({ className });
   const { testId: dataTestId, slot } = useTestId("nav", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("nav", { ref, "aria-label": "Breadcrumb", className: root24, "data-testid": dataTestId, ...rest, children: items.map((item3, index) => {
     const isLast = index === items.length - 1;
     const key = index;
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react48.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react49.Fragment, { children: [
       isLast ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: current2, "aria-current": "page", "data-testid": slot(`crumb-${index}`), children: item3.label }) : item3.href ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("a", { className: crumb2, href: item3.href, "data-testid": slot(`crumb-${index}`), children: item3.label }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: crumb2, "data-testid": slot(`crumb-${index}`), children: item3.label }),
       !isLast && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: separator2, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronRightIcon, { size: 14 }) })
     ] }, key);
@@ -1994,7 +2205,7 @@ var Breadcrumbs = (0, import_react48.forwardRef)(function Breadcrumbs2({ items,
 });
 
 // src/components/pagination/index.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 
 // src/components/icons/chevron-left/index.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
@@ -2019,7 +2230,7 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/pagination/use-styles.ts
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // src/components/pagination/use-styles.css.ts
 var ellipsis = "use-styles_ellipsis__1azgzoh3";
@@ -2031,7 +2242,7 @@ var root17 = "use-styles_root__1azgzoh0";
 // src/components/pagination/use-styles.ts
 function useStyles22() {
   const { themeClass } = useTheme();
-  return (0, import_react49.useMemo)(
+  return (0, import_react50.useMemo)(
     () => ({
       root: [themeClass, root17].filter(Boolean).join(" "),
       pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
@@ -2057,7 +2268,7 @@ function buildItems(count, page, siblingCount) {
   if (last > first) items.push(last);
   return items;
 }
-var Pagination = (0, import_react50.forwardRef)(function Pagination2({ count, page = 1, onChange, siblingCount = 1, testId, ...rest }, ref) {
+var Pagination = (0, import_react51.forwardRef)(function Pagination2({ count, page = 1, onChange, siblingCount = 1, testId, ...rest }, ref) {
   const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles22();
   const { testId: dataTestId, slot } = useTestId("nav", testId);
   const total = Math.max(1, count);
@@ -2115,10 +2326,10 @@ var Pagination = (0, import_react50.forwardRef)(function Pagination2({ count, pa
 });
 
 // src/components/stepper/index.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 
 // src/components/stepper/use-styles.ts
-var import_react51 = require("react");
+var import_react52 = require("react");
 
 // src/components/stepper/use-styles.css.ts
 var connector = "use-styles_connector__79pt4e7";
@@ -2133,7 +2344,7 @@ var step = "use-styles_step__79pt4e1";
 // src/components/stepper/use-styles.ts
 function useStyles23({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react51.useMemo)(() => {
+  return (0, import_react52.useMemo)(() => {
     const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
     const markerFor = (state) => [
       marker,
@@ -2147,7 +2358,7 @@ function useStyles23({ className }) {
 
 // src/components/stepper/index.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var Stepper = (0, import_react52.forwardRef)(function Stepper2({ steps, active: active2 = 0, className, testId, ...rest }, ref) {
+var Stepper = (0, import_react53.forwardRef)(function Stepper2({ steps, active: active2 = 0, className, testId, ...rest }, ref) {
   const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles23({ className });
   const { testId: dataTestId, slot } = useTestId("nav", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ref, className: root24, "data-testid": dataTestId, ...rest, children: steps.map((s, index) => {
@@ -2155,7 +2366,7 @@ var Stepper = (0, import_react52.forwardRef)(function Stepper2({ steps, active:
     const isActive = state === "active";
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: steps are a static, ordered list with no stable id.
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react52.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react53.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
           "div",
           {
@@ -2176,10 +2387,10 @@ var Stepper = (0, import_react52.forwardRef)(function Stepper2({ steps, active:
 });
 
 // src/components/tabs/index.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 
 // src/components/tabs/use-styles.ts
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // src/components/tabs/use-styles.css.ts
 var panel2 = "use-styles_panel__1l4m7t43";
@@ -2190,7 +2401,7 @@ var tabActive = "use-styles_tabActive__1l4m7t42";
 // src/components/tabs/use-styles.ts
 function useStyles24() {
   const { themeClass } = useTheme();
-  return (0, import_react53.useMemo)(() => {
+  return (0, import_react54.useMemo)(() => {
     const root24 = [themeClass, root19].filter(Boolean).join(" ");
     const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
     return { root: root24, tab, tabClass, panel: panel2 };
@@ -2199,11 +2410,11 @@ function useStyles24() {
 
 // src/components/tabs/index.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var Tabs = (0, import_react54.forwardRef)(function Tabs2({ items, value, onChange, testId, ...rest }, ref) {
+var Tabs = (0, import_react55.forwardRef)(function Tabs2({ items, value, onChange, testId, ...rest }, ref) {
   const { root: root24, tabClass, panel: panel3 } = useStyles24();
   const { testId: dataTestId, slot } = useTestId("nav", testId);
-  const baseId = (0, import_react54.useId)();
-  const tabRefs = (0, import_react54.useRef)([]);
+  const baseId = (0, import_react55.useId)();
+  const tabRefs = (0, import_react55.useRef)([]);
   const hasPanels = items.some((item3) => item3.content !== void 0);
   const activeIndex = items.findIndex((item3) => item3.value === value);
   const tabId = (v) => `${baseId}-tab-${v}`;
@@ -2279,10 +2490,10 @@ var Tabs = (0, import_react54.forwardRef)(function Tabs2({ items, value, onChang
 });
 
 // src/components/menu/index.tsx
-var import_react56 = require("react");
+var import_react57 = require("react");
 
 // src/components/menu/use-styles.ts
-var import_react55 = require("react");
+var import_react56 = require("react");
 
 // src/components/menu/use-styles.css.ts
 var danger = "use-styles_danger__1uyxaj3";
@@ -2293,7 +2504,7 @@ var wrapper3 = "use-styles_wrapper__1uyxaj0";
 // src/components/menu/use-styles.ts
 function useStyles25() {
   const { themeClass } = useTheme();
-  return (0, import_react55.useMemo)(
+  return (0, import_react56.useMemo)(
     () => ({
       wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
       list,
@@ -2310,18 +2521,18 @@ function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var Menu = (0, import_react56.forwardRef)(function Menu2({ trigger: trigger2, items, testId }, ref) {
+var Menu = (0, import_react57.forwardRef)(function Menu2({ trigger: trigger2, items, testId }, ref) {
   const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles25();
   const { testId: rootTestId, slot } = useTestId("menu", testId);
-  const [open, setOpen] = (0, import_react56.useState)(false);
-  const [alignEnd, setAlignEnd] = (0, import_react56.useState)(false);
-  const rootRef = (0, import_react56.useRef)(null);
+  const [open, setOpen] = (0, import_react57.useState)(false);
+  const [alignEnd, setAlignEnd] = (0, import_react57.useState)(false);
+  const rootRef = (0, import_react57.useRef)(null);
   const setRootRef = (node) => {
     rootRef.current = node;
     assignRef(ref, node);
   };
-  const listRef = (0, import_react56.useRef)(null);
-  const triggerRef = (0, import_react56.useRef)(null);
+  const listRef = (0, import_react57.useRef)(null);
+  const triggerRef = (0, import_react57.useRef)(null);
   const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
   const focusItemAt = (index) => {
     const menuItems = getMenuItems();
@@ -2333,7 +2544,7 @@ var Menu = (0, import_react56.forwardRef)(function Menu2({ trigger: trigger2, it
     setOpen(false);
     triggerRef.current?.focus();
   };
-  (0, import_react56.useLayoutEffect)(() => {
+  (0, import_react57.useLayoutEffect)(() => {
     if (!open) {
       setAlignEnd(false);
       return;
@@ -2345,7 +2556,7 @@ var Menu = (0, import_react56.forwardRef)(function Menu2({ trigger: trigger2, it
     const viewport = document.documentElement.clientWidth;
     setAlignEnd(rootLeft + listEl.offsetWidth > viewport);
   }, [open]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!open) return;
     listRef.current?.querySelector('[role="menuitem"]')?.focus();
     const onDocMouseDown = (event) => {
@@ -2401,7 +2612,7 @@ var Menu = (0, import_react56.forwardRef)(function Menu2({ trigger: trigger2, it
     triggerRef.current = node;
     assignRef(consumerRef, node);
   };
-  const clonedTrigger = (0, import_react56.cloneElement)(trigger2, {
+  const clonedTrigger = (0, import_react57.cloneElement)(trigger2, {
     ref: mergedTriggerRef,
     "aria-haspopup": "menu",
     "aria-expanded": open,
@@ -2452,11 +2663,11 @@ var Menu = (0, import_react56.forwardRef)(function Menu2({ trigger: trigger2, it
 });
 
 // src/components/dialog/index.tsx
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/dialog/use-styles.ts
-var import_react57 = require("react");
+var import_react58 = require("react");
 
 // src/components/dialog/use-styles.css.ts
 var actions = "use-styles_actions__5tstu83";
@@ -2467,7 +2678,7 @@ var surface = "use-styles_surface__5tstu81";
 // src/components/dialog/use-styles.ts
 function useStyles26() {
   const { themeClass } = useTheme();
-  return (0, import_react57.useMemo)(
+  return (0, import_react58.useMemo)(
     () => ({
       overlay: [themeClass, overlay].filter(Boolean).join(" "),
       surface,
@@ -2485,18 +2696,18 @@ function assignRef2(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var Dialog = (0, import_react58.forwardRef)(function Dialog2({ open, onClose, title, actions: actions3, children, testId }, ref) {
+var Dialog = (0, import_react59.forwardRef)(function Dialog2({ open, onClose, title, actions: actions3, children, testId }, ref) {
   const { overlay: overlay2, surface: surface2, body: body3, actions: actionsClass } = useStyles26();
   const { testId: rootTestId, slot } = useTestId("dialog", testId);
-  const surfaceRef = (0, import_react58.useRef)(null);
+  const surfaceRef = (0, import_react59.useRef)(null);
   const setSurfaceRef = (node) => {
     surfaceRef.current = node;
     assignRef2(ref, node);
   };
-  const previouslyFocused = (0, import_react58.useRef)(null);
-  const generatedId = (0, import_react58.useId)();
+  const previouslyFocused = (0, import_react59.useRef)(null);
+  const generatedId = (0, import_react59.useId)();
   const titleId = title != null ? generatedId : void 0;
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -2504,13 +2715,13 @@ var Dialog = (0, import_react58.forwardRef)(function Dialog2({ open, onClose, ti
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;
     surfaceRef.current?.focus();
     return () => previouslyFocused.current?.focus?.();
   }, [open]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!open) return;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -2572,11 +2783,11 @@ var Dialog = (0, import_react58.forwardRef)(function Dialog2({ open, onClose, ti
 });
 
 // src/components/snackbar/index.tsx
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/snackbar/use-styles.ts
-var import_react59 = require("react");
+var import_react60 = require("react");
 
 // src/components/snackbar/use-styles.css.ts
 var closeBtn = "use-styles_closeBtn__ihzsep2";
@@ -2586,7 +2797,7 @@ var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__1qa7atn2";
 // src/components/snackbar/use-styles.ts
 function useStyles27() {
   const { themeClass } = useTheme();
-  return (0, import_react59.useMemo)(
+  return (0, import_react60.useMemo)(
     () => ({
       root: [themeClass, root20].filter(Boolean).join(" "),
       message,
@@ -2598,7 +2809,7 @@ function useStyles27() {
 
 // src/components/snackbar/index.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var Snackbar = (0, import_react60.forwardRef)(function Snackbar2({ open, message: message2, action, onClose, testId }, ref) {
+var Snackbar = (0, import_react61.forwardRef)(function Snackbar2({ open, message: message2, action, onClose, testId }, ref) {
   const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles27();
   const { testId: dataTestId, slot } = useTestId("feedback", testId);
   if (!open || typeof document === "undefined") return null;
@@ -2623,10 +2834,10 @@ var Snackbar = (0, import_react60.forwardRef)(function Snackbar2({ open, message
 });
 
 // src/components/table/index.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 
 // src/components/table/use-styles.ts
-var import_react61 = require("react");
+var import_react62 = require("react");
 
 // src/components/table/use-styles.css.ts
 var alignRight = "use-styles_alignRight__1n2cz6i3";
@@ -2638,7 +2849,7 @@ var th = "use-styles_th__1n2cz6i1";
 // src/components/table/use-styles.ts
 function useStyles28({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react61.useMemo)(
+  const root24 = (0, import_react62.useMemo)(
     () => [themeClass, root21, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2664,15 +2875,15 @@ function TableInner({ columns, rows, getRowKey, className, caption: caption2, te
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tbody", { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tr", { "data-testid": slot(`row-${index}`), children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
   ] });
 }
-var TableForwarded = (0, import_react62.forwardRef)(TableInner);
+var TableForwarded = (0, import_react63.forwardRef)(TableInner);
 TableForwarded.displayName = "Table";
 var Table = TableForwarded;
 
 // src/components/app-bar/index.tsx
-var import_react64 = require("react");
+var import_react65 = require("react");
 
 // src/components/app-bar/use-styles.ts
-var import_react63 = require("react");
+var import_react64 = require("react");
 
 // src/components/app-bar/use-styles.css.ts
 var actions2 = "use-styles_actions__1h133nh2";
@@ -2682,7 +2893,7 @@ var root22 = "use-styles_root__1h133nh0";
 // src/components/app-bar/use-styles.ts
 function useStyles29({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react63.useMemo)(
+  const root24 = (0, import_react64.useMemo)(
     () => [themeClass, root22, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2691,7 +2902,7 @@ function useStyles29({ className }) {
 
 // src/components/app-bar/index.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var AppBar = (0, import_react64.forwardRef)(function AppBar2({ brand: brand2, actions: actions3, className, children, testId, ...rest }, ref) {
+var AppBar = (0, import_react65.forwardRef)(function AppBar2({ brand: brand2, actions: actions3, className, children, testId, ...rest }, ref) {
   const styles = useStyles29({ className });
   const { testId: dataTestId, slot } = useTestId("nav", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("header", { ref, className: styles.root, "data-testid": dataTestId, ...rest, children: [
@@ -2702,10 +2913,10 @@ var AppBar = (0, import_react64.forwardRef)(function AppBar2({ brand: brand2, ac
 });
 
 // src/components/list-item/index.tsx
-var import_react66 = require("react");
+var import_react67 = require("react");
 
 // src/components/list-item/use-styles.ts
-var import_react65 = require("react");
+var import_react66 = require("react");
 
 // src/components/list-item/use-styles.css.ts
 var content2 = "use-styles_content__kbreq13";
@@ -2720,7 +2931,7 @@ function useStyles30({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react65.useMemo)(
+  const root24 = (0, import_react66.useMemo)(
     () => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
     [themeClass, selected3, className]
   );
@@ -2729,7 +2940,7 @@ function useStyles30({
 
 // src/components/list-item/index.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var ListItem = (0, import_react66.forwardRef)(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected3, className, testId, children, ...rest }, ref) {
+var ListItem = (0, import_react67.forwardRef)(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected3, className, testId, children, ...rest }, ref) {
   const styles = useStyles30({ selected: selected3, className });
   const { testId: dataTestId, slot } = useTestId("list", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(