@octavius2929-personal/design-system 0.14.0 → 0.15.0

package/dist/index.js

@@ -101,10 +101,264 @@ var Container = ContainerForwarded;
 import { forwardRef as forwardRef2 } from "react";
 
 // src/components/typography/use-styles.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
+
+// ../core/dist/index.js
+import { useEffect as useEffect2, useMemo as useMemo3, useState as useState2 } from "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] = useState2(() => storage.read());
+  const [schema, setSchema] = useState2(persisted?.schema ?? defaultSchema);
+  const [preference, setPreference] = useState2(
+    persisted?.preference ?? defaultMode
+  );
+  const [systemMode, setSystemMode] = useState2(() => system.get());
+  useEffect2(() => {
+    if (preference !== "system") return;
+    const update = () => setSystemMode(system.get());
+    update();
+    return system.subscribe(update);
+  }, [preference, system]);
+  const mode = resolveMode(preference, systemMode);
+  useEffect2(() => {
+    storage.write({ schema, preference });
+  }, [schema, preference, storage]);
+  return useMemo3(
+    () => ({
+      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
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo4 } from "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
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo3, useState as useState2 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var noop = () => {
 };
@@ -119,28 +373,6 @@ var DEFAULT_VALUE = {
   cycleMode: noop
 };
 var ThemeContext = createContext2(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 {
-  }
-}
 function ThemeProvider({
   children,
   defaultSchema = "tinta",
@@ -148,45 +380,24 @@ function ThemeProvider({
   storageKey = "ds-theme",
   persist = true
 }) {
-  const [schema, setSchema] = useState2(
-    () => persist && readStored(storageKey)?.schema || defaultSchema
+  const storage = useMemo4(
+    () => createWebStorageAdapter(storageKey, persist),
+    [storageKey, persist]
   );
-  const [preference, setPreference] = useState2(
-    () => (persist ? readStored(storageKey)?.preference : null) ?? defaultMode
-  );
-  const [systemMode, setSystemMode] = useState2(resolveSystemMode);
-  useEffect2(() => {
-    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;
-  useEffect2(() => {
-    if (persist) writeStored(storageKey, { schema, preference });
-  }, [schema, preference, persist, storageKey]);
-  const value = useMemo3(
+  const system = useMemo4(() => createWebSystemModeAdapter(), []);
+  const store = useThemeStore({ defaultSchema, defaultMode }, storage, system);
+  const value = useMemo4(
     () => ({
-      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__ */ jsx3(ThemeContext.Provider, { value, children });
 }
@@ -209,7 +420,7 @@ function useStyles2({
   align: align2
 }) {
   const { themeClass } = useTheme();
-  const className = useMemo4(
+  const className = useMemo5(
     () => [
       themeClass,
       base,
@@ -260,7 +471,7 @@ function states(map) {
 }
 
 // src/components/button/use-styles.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 
 // src/components/button/use-styles.css.ts
 var full = "use-styles_full__1pbtill4";
@@ -281,7 +492,7 @@ function useStyles3({
   className
 }) {
   const { themeClass } = useTheme();
-  const container = useMemo5(
+  const container = useMemo6(
     () => [
       themeClass,
       root,
@@ -336,7 +547,7 @@ var Button = forwardRef3(function Button2({
 import { forwardRef as forwardRef4 } from "react";
 
 // src/components/divider/use-styles.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 
 // src/components/divider/use-styles.css.ts
 var horizontal = "use-styles_horizontal__1n7v7yj1";
@@ -349,7 +560,7 @@ var vertical = "use-styles_vertical__1n7v7yj2";
 // src/components/divider/use-styles.ts
 function useStyles4({ vertical: vertical2, hasLabel }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo6(
+  const root24 = useMemo7(
     () => [
       themeClass,
       root2,
@@ -380,7 +591,7 @@ var Divider = forwardRef4(function Divider2({ vertical: vertical2, label: label7
 import { forwardRef as forwardRef5 } from "react";
 
 // src/components/avatar/use-styles.ts
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 
 // src/components/avatar/use-styles.css.ts
 var root3 = "use-styles_root__1mn1rmu0";
@@ -394,7 +605,7 @@ function useStyles5({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo7(
+  const root24 = useMemo8(
     () => [
       themeClass,
       root3,
@@ -419,7 +630,7 @@ var Avatar = forwardRef5(function Avatar2({ size: size3, filled, className, chil
 import { forwardRef as forwardRef6 } from "react";
 
 // src/components/badge/use-styles.ts
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo9 } from "react";
 
 // src/components/badge/use-styles.css.ts
 var dot = "use-styles_dot__1wpei6p1";
@@ -432,11 +643,11 @@ function useStyles6({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo8(
+  const root24 = useMemo9(
     () => [themeClass, root4, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
-  const dot3 = useMemo8(() => [dot, tone2[tone4]].join(" "), [tone4]);
+  const dot3 = useMemo9(() => [dot, tone2[tone4]].join(" "), [tone4]);
   return { root: root24, dot: dot3 };
 }
 
@@ -455,7 +666,7 @@ var Badge = forwardRef6(function Badge2({ count, tone: tone4, className, childre
 import { forwardRef as forwardRef7 } from "react";
 
 // src/components/progress/use-styles.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo10 } from "react";
 
 // src/components/progress/use-styles.css.ts
 var bar = "use-styles_bar__kbop7v3";
@@ -471,7 +682,7 @@ function useStyles7({
 }) {
   const { themeClass } = useTheme();
   const indeterminate2 = value === void 0;
-  return useMemo9(() => {
+  return useMemo10(() => {
     const root24 = (...classes) => [themeClass, ...classes, className].filter(Boolean).join(" ");
     if (variant2 === "circular") {
       return { track: "", bar: "", spinner: root24(spinner) };
@@ -560,7 +771,7 @@ function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/chip/use-styles.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 
 // src/components/chip/use-styles.css.ts
 var clickable = "use-styles_clickable__1axilf44";
@@ -576,7 +787,7 @@ function useStyles8({
   clickable: clickable2
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo10(
+  const root24 = useMemo11(
     () => [
       themeClass,
       root5,
@@ -651,7 +862,7 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/checkbox/use-styles.ts
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 
 // src/components/checkbox/use-styles.css.ts
 var box = "use-styles_box__9zoga91";
@@ -664,11 +875,11 @@ var root6 = "use-styles_root__9zoga90";
 // src/components/checkbox/use-styles.ts
 function useStyles9({ checked, disabled: disabled3 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo11(
+  const root24 = useMemo12(
     () => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
     [themeClass, disabled3]
   );
-  const box2 = useMemo11(
+  const box2 = useMemo12(
     () => [box, checked && boxChecked].filter(Boolean).join(" "),
     [checked]
   );
@@ -707,7 +918,7 @@ var Checkbox = forwardRef9(function Checkbox2({ checked = false, onChange, label
 import { forwardRef as forwardRef10 } from "react";
 
 // src/components/radio/use-styles.ts
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo13 } from "react";
 
 // src/components/radio/use-styles.css.ts
 var circle = "use-styles_circle__vy61b42";
@@ -723,7 +934,7 @@ function useStyles10({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo12(
+  const root24 = useMemo13(
     () => [themeClass, root7, disabled3 && disabled2, className].filter(Boolean).join(" "),
     [themeClass, disabled3, className]
   );
@@ -765,7 +976,7 @@ var Radio = forwardRef10(function Radio2({ checked, onChange, label: label7, nam
 import { forwardRef as forwardRef11 } from "react";
 
 // src/components/switch/use-styles.ts
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo14 } from "react";
 
 // src/components/switch/use-styles.css.ts
 var input3 = "surfaces_srOnly__1qa7atn0";
@@ -779,7 +990,7 @@ var trackChecked = "use-styles_trackChecked__1r6kem72";
 // src/components/switch/use-styles.ts
 function useStyles11({ checked }) {
   const { themeClass } = useTheme();
-  return useMemo13(
+  return useMemo14(
     () => ({
       root: [themeClass, root8].filter(Boolean).join(" "),
       input: input3,
@@ -826,7 +1037,7 @@ import { forwardRef as forwardRef13 } from "react";
 import { forwardRef as forwardRef12, useId } from "react";
 
 // src/components/base-field/use-styles.ts
-import { useMemo as useMemo14 } from "react";
+import { useMemo as useMemo15 } from "react";
 
 // src/components/base-field/use-styles.css.ts
 var field = "use-styles_field__1c3cgd3";
@@ -845,7 +1056,7 @@ var trailingSlot = "use-styles_trailingSlot__1c3cgdb";
 // src/components/base-field/use-styles.ts
 function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
   const { themeClass } = useTheme();
-  return useMemo14(() => {
+  return useMemo15(() => {
     const root24 = [themeClass, root9].filter(Boolean).join(" ");
     const labelText2 = [labelText, error && labelTextError].filter(Boolean).join(" ");
     const input6 = [
@@ -1025,14 +1236,14 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/password-field/use-styles.ts
-import { useMemo as useMemo15 } from "react";
+import { useMemo as useMemo16 } from "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 useMemo15(() => ({ revealButton }), []);
+  return useMemo16(() => ({ revealButton }), []);
 }
 
 // src/components/password-field/index.tsx
@@ -1085,7 +1296,7 @@ var PasswordField = forwardRef14(
 );
 
 // src/components/money-field/index.tsx
-import { forwardRef as forwardRef15, useMemo as useMemo16, useState as useState4 } from "react";
+import { forwardRef as forwardRef15, useMemo as useMemo17, useState as useState4 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 function parseAmount(raw) {
   const cleaned = raw.replace(/[^0-9.-]/g, "");
@@ -1110,7 +1321,7 @@ var MoneyField = forwardRef15(function MoneyField2({
 }, ref) {
   const [focused, setFocused] = useState4(false);
   const [draft, setDraft] = useState4("");
-  const formatter = useMemo16(
+  const formatter = useMemo17(
     () => new Intl.NumberFormat(locale, { style: "currency", currency }),
     [locale, currency]
   );
@@ -1156,7 +1367,7 @@ var MoneyField = forwardRef15(function MoneyField2({
 import { forwardRef as forwardRef16 } from "react";
 
 // src/components/icon-button/use-styles.ts
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo18 } from "react";
 
 // src/components/icon-button/use-styles.css.ts
 var accent = "use-styles_accent__18np0q02";
@@ -1169,7 +1380,7 @@ function useStyles14({
   tone: tone4 = "ink"
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo17(
+  const root24 = useMemo18(
     () => [themeClass, root10, tone4 === "accent" && accent, active2 && active].filter(Boolean).join(" "),
     [themeClass, active2, tone4]
   );
@@ -1208,7 +1419,7 @@ var IconButton = forwardRef16(function IconButton2({ icon: Icon, active: active2
 import { forwardRef as forwardRef17 } from "react";
 
 // src/components/card/use-styles.ts
-import { useMemo as useMemo18 } from "react";
+import { useMemo as useMemo19 } from "react";
 
 // src/components/card/use-styles.css.ts
 var body = "use-styles_body__1fuvd022";
@@ -1219,7 +1430,7 @@ var root11 = "use-styles_root__1fuvd020";
 // src/components/card/use-styles.ts
 function useStyles15() {
   const { themeClass } = useTheme();
-  const root24 = useMemo18(() => `${themeClass} ${root11}`, [themeClass]);
+  const root24 = useMemo19(() => `${themeClass} ${root11}`, [themeClass]);
   return { root: root24, header, body, footer };
 }
 
@@ -1359,7 +1570,7 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/alert/use-styles.ts
-import { useMemo as useMemo19 } from "react";
+import { useMemo as useMemo20 } from "react";
 
 // src/components/alert/use-styles.css.ts
 var content = "use-styles_content__ivsh6u6";
@@ -1373,7 +1584,7 @@ function useStyles16({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo19(
+  const root24 = useMemo20(
     () => [themeClass, root12, severity[severity2], className].filter(Boolean).join(" "),
     [themeClass, severity2, className]
   );
@@ -1416,7 +1627,7 @@ import {
 } from "react";
 
 // src/components/tooltip/use-styles.ts
-import { useMemo as useMemo20 } from "react";
+import { useMemo as useMemo21 } from "react";
 
 // src/components/tooltip/use-styles.css.ts
 var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__1qa7atn2";
@@ -1428,11 +1639,11 @@ function useStyles17({
   placement: placement2 = "top"
 }) {
   const { themeClass } = useTheme();
-  const wrapper4 = useMemo20(
+  const wrapper4 = useMemo21(
     () => [themeClass, wrapper].filter(Boolean).join(" "),
     [themeClass]
   );
-  const bubble2 = useMemo20(
+  const bubble2 = useMemo21(
     () => [bubble, placement[placement2]].filter(Boolean).join(" "),
     [placement2]
   );
@@ -1536,7 +1747,7 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/select/use-styles.ts
-import { useMemo as useMemo21 } from "react";
+import { useMemo as useMemo22 } from "react";
 
 // src/components/select/use-styles.css.ts
 var chevron = "use-styles_chevron__1w1czpb4";
@@ -1555,7 +1766,7 @@ function useStyles18({
   open = false
 }) {
   const { themeClass } = useTheme();
-  return useMemo21(() => {
+  return useMemo22(() => {
     const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
     return {
       root: [themeClass, root13].filter(Boolean).join(" "),
@@ -1706,7 +1917,7 @@ var Select = forwardRef20(function Select2({ options, value, onChange, placehold
 import { forwardRef as forwardRef21 } from "react";
 
 // src/components/slider/use-styles.ts
-import { useMemo as useMemo22 } from "react";
+import { useMemo as useMemo23 } from "react";
 
 // src/components/slider/use-styles.css.ts
 var input5 = "use-styles_input__okw59n3";
@@ -1720,7 +1931,7 @@ var wrapper2 = "use-styles_wrapper__okw59n6";
 // src/components/slider/use-styles.ts
 function useStyles19() {
   const { themeClass } = useTheme();
-  return useMemo22(() => {
+  return useMemo23(() => {
     const root24 = [themeClass, root14].filter(Boolean).join(" ");
     return {
       wrapper: wrapper2,
@@ -1773,7 +1984,7 @@ var Slider = forwardRef21(function Slider2({ value = 0, onChange, min = 0, max =
 import { forwardRef as forwardRef22, useState as useState7 } from "react";
 
 // src/components/accordion/use-styles.ts
-import { useMemo as useMemo23 } from "react";
+import { useMemo as useMemo24 } from "react";
 
 // src/components/accordion/use-styles.css.ts
 var chevron2 = "use-styles_chevron__1cjrdh93";
@@ -1786,7 +1997,7 @@ var root15 = "use-styles_root__1cjrdh90";
 // src/components/accordion/use-styles.ts
 function useStyles20({ className }) {
   const { themeClass } = useTheme();
-  return useMemo23(
+  return useMemo24(
     () => ({
       root: [themeClass, root15, className].filter(Boolean).join(" "),
       item,
@@ -1883,7 +2094,7 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/breadcrumbs/use-styles.ts
-import { useMemo as useMemo24 } from "react";
+import { useMemo as useMemo25 } from "react";
 
 // src/components/breadcrumbs/use-styles.css.ts
 var crumb = "use-styles_crumb__7u0du61";
@@ -1894,7 +2105,7 @@ var separator = "use-styles_separator__7u0du63";
 // src/components/breadcrumbs/use-styles.ts
 function useStyles21({ className }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo24(
+  const root24 = useMemo25(
     () => [themeClass, root16, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1942,7 +2153,7 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/pagination/use-styles.ts
-import { useMemo as useMemo25 } from "react";
+import { useMemo as useMemo26 } from "react";
 
 // src/components/pagination/use-styles.css.ts
 var ellipsis = "use-styles_ellipsis__1azgzoh3";
@@ -1954,7 +2165,7 @@ var root17 = "use-styles_root__1azgzoh0";
 // src/components/pagination/use-styles.ts
 function useStyles22() {
   const { themeClass } = useTheme();
-  return useMemo25(
+  return useMemo26(
     () => ({
       root: [themeClass, root17].filter(Boolean).join(" "),
       pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
@@ -2041,7 +2252,7 @@ var Pagination = forwardRef24(function Pagination2({ count, page = 1, onChange,
 import { Fragment as Fragment2, forwardRef as forwardRef25 } from "react";
 
 // src/components/stepper/use-styles.ts
-import { useMemo as useMemo26 } from "react";
+import { useMemo as useMemo27 } from "react";
 
 // src/components/stepper/use-styles.css.ts
 var connector = "use-styles_connector__79pt4e7";
@@ -2056,7 +2267,7 @@ var step = "use-styles_step__79pt4e1";
 // src/components/stepper/use-styles.ts
 function useStyles23({ className }) {
   const { themeClass } = useTheme();
-  return useMemo26(() => {
+  return useMemo27(() => {
     const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
     const markerFor = (state) => [
       marker,
@@ -2102,7 +2313,7 @@ var Stepper = forwardRef25(function Stepper2({ steps, active: active2 = 0, class
 import { forwardRef as forwardRef26, useId as useId4, useRef as useRef4 } from "react";
 
 // src/components/tabs/use-styles.ts
-import { useMemo as useMemo27 } from "react";
+import { useMemo as useMemo28 } from "react";
 
 // src/components/tabs/use-styles.css.ts
 var panel2 = "use-styles_panel__1l4m7t43";
@@ -2113,7 +2324,7 @@ var tabActive = "use-styles_tabActive__1l4m7t42";
 // src/components/tabs/use-styles.ts
 function useStyles24() {
   const { themeClass } = useTheme();
-  return useMemo27(() => {
+  return useMemo28(() => {
     const root24 = [themeClass, root19].filter(Boolean).join(" ");
     const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
     return { root: root24, tab, tabClass, panel: panel2 };
@@ -2212,7 +2423,7 @@ import {
 } from "react";
 
 // src/components/menu/use-styles.ts
-import { useMemo as useMemo28 } from "react";
+import { useMemo as useMemo29 } from "react";
 
 // src/components/menu/use-styles.css.ts
 var danger = "use-styles_danger__1uyxaj3";
@@ -2223,7 +2434,7 @@ var wrapper3 = "use-styles_wrapper__1uyxaj0";
 // src/components/menu/use-styles.ts
 function useStyles25() {
   const { themeClass } = useTheme();
-  return useMemo28(
+  return useMemo29(
     () => ({
       wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
       list,
@@ -2391,7 +2602,7 @@ import {
 import { createPortal } from "react-dom";
 
 // src/components/dialog/use-styles.ts
-import { useMemo as useMemo29 } from "react";
+import { useMemo as useMemo30 } from "react";
 
 // src/components/dialog/use-styles.css.ts
 var actions = "use-styles_actions__5tstu83";
@@ -2402,7 +2613,7 @@ var surface = "use-styles_surface__5tstu81";
 // src/components/dialog/use-styles.ts
 function useStyles26() {
   const { themeClass } = useTheme();
-  return useMemo29(
+  return useMemo30(
     () => ({
       overlay: [themeClass, overlay].filter(Boolean).join(" "),
       surface,
@@ -2511,7 +2722,7 @@ import { forwardRef as forwardRef29 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/snackbar/use-styles.ts
-import { useMemo as useMemo30 } from "react";
+import { useMemo as useMemo31 } from "react";
 
 // src/components/snackbar/use-styles.css.ts
 var closeBtn = "use-styles_closeBtn__ihzsep2";
@@ -2521,7 +2732,7 @@ var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__1qa7atn2";
 // src/components/snackbar/use-styles.ts
 function useStyles27() {
   const { themeClass } = useTheme();
-  return useMemo30(
+  return useMemo31(
     () => ({
       root: [themeClass, root20].filter(Boolean).join(" "),
       message,
@@ -2561,7 +2772,7 @@ var Snackbar = forwardRef29(function Snackbar2({ open, message: message2, action
 import { forwardRef as forwardRef30 } from "react";
 
 // src/components/table/use-styles.ts
-import { useMemo as useMemo31 } from "react";
+import { useMemo as useMemo32 } from "react";
 
 // src/components/table/use-styles.css.ts
 var alignRight = "use-styles_alignRight__1n2cz6i3";
@@ -2573,7 +2784,7 @@ var th = "use-styles_th__1n2cz6i1";
 // src/components/table/use-styles.ts
 function useStyles28({ className }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo31(
+  const root24 = useMemo32(
     () => [themeClass, root21, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2607,7 +2818,7 @@ var Table = TableForwarded;
 import { forwardRef as forwardRef31 } from "react";
 
 // src/components/app-bar/use-styles.ts
-import { useMemo as useMemo32 } from "react";
+import { useMemo as useMemo33 } from "react";
 
 // src/components/app-bar/use-styles.css.ts
 var actions2 = "use-styles_actions__1h133nh2";
@@ -2617,7 +2828,7 @@ var root22 = "use-styles_root__1h133nh0";
 // src/components/app-bar/use-styles.ts
 function useStyles29({ className }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo32(
+  const root24 = useMemo33(
     () => [themeClass, root22, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2640,7 +2851,7 @@ var AppBar = forwardRef31(function AppBar2({ brand: brand2, actions: actions3, c
 import { forwardRef as forwardRef32 } from "react";
 
 // src/components/list-item/use-styles.ts
-import { useMemo as useMemo33 } from "react";
+import { useMemo as useMemo34 } from "react";
 
 // src/components/list-item/use-styles.css.ts
 var content2 = "use-styles_content__kbreq13";
@@ -2655,7 +2866,7 @@ function useStyles30({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo33(
+  const root24 = useMemo34(
     () => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
     [themeClass, selected3, className]
   );