@octavius2929-personal/design-system 0.1.0 → 0.4.0

package/dist/index.cjs

@@ -64,69 +64,132 @@ __export(index_exports, {
   Tooltip: () => Tooltip,
   TriangleAlertIcon: () => TriangleAlertIcon,
   XIcon: () => XIcon,
+  colorVars: () => colorVars,
   modeNames: () => modeNames,
   schemaNames: () => schemaNames,
   text: () => text,
   theme: () => vars,
   themes: () => themes,
+  usePrevious: () => usePrevious,
   useTheme: () => useTheme,
   useToggle: () => useToggle
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/theme/theme.css.ts
+var colorVars = { bg1: "var(--bg1__e3grur2c)", bg2: "var(--bg2__e3grur2d)", bg3: "var(--bg3__e3grur2e)", bgInset: "var(--bgInset__e3grur2f)", fg1: "var(--fg1__e3grur2g)", fg2: "var(--fg2__e3grur2h)", fg3: "var(--fg3__e3grur2i)", fgOnAccent: "var(--fgOnAccent__e3grur2j)", border1: "var(--border1__e3grur2k)", border2: "var(--border2__e3grur2l)", borderStrong: "var(--borderStrong__e3grur2m)", accent: "var(--accent__e3grur2n)", accentHover: "var(--accentHover__e3grur2o)", accentSoft: "var(--accentSoft__e3grur2p)", ok: "var(--ok__e3grur2q)", warn: "var(--warn__e3grur2r)", danger: "var(--danger__e3grur2s)", info: "var(--info__e3grur2t)", focus: "var(--focus__e3grur2u)", scrim: "var(--scrim__e3grur2v)" };
 var modeNames = ["light", "dark", "sepia", "contrast"];
 var schemaNames = ["tinta"];
-var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2v", dark: "theme_themes_tinta_dark__e3grur2w", sepia: "theme_themes_tinta_sepia__e3grur2x", contrast: "theme_themes_tinta_contrast__e3grur2y" } };
-var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" }, leading: { tight: "var(--leading-tight__e3grur1w)", snug: "var(--leading-snug__e3grur1x)", normal: "var(--leading-normal__e3grur1y)", relaxed: "var(--leading-relaxed__e3grur1z)" }, weight: { light: "var(--weight-light__e3grur20)", regular: "var(--weight-regular__e3grur21)", medium: "var(--weight-medium__e3grur22)", semibold: "var(--weight-semibold__e3grur23)", bold: "var(--weight-bold__e3grur24)" }, dur: { fast: "var(--dur-fast__e3grur25)", base: "var(--dur-base__e3grur26)", slow: "var(--dur-slow__e3grur27)" }, ease: { ink: "var(--ease-ink__e3grur28)" }, shadow: { sm: "var(--shadow-sm__e3grur29)", md: "var(--shadow-md__e3grur2a)", lg: "var(--shadow-lg__e3grur2b)" }, color: { bg1: "var(--color-bg1__e3grur2c)", bg2: "var(--color-bg2__e3grur2d)", bg3: "var(--color-bg3__e3grur2e)", bgInset: "var(--color-bgInset__e3grur2f)", fg1: "var(--color-fg1__e3grur2g)", fg2: "var(--color-fg2__e3grur2h)", fg3: "var(--color-fg3__e3grur2i)", fgOnAccent: "var(--color-fgOnAccent__e3grur2j)", border1: "var(--color-border1__e3grur2k)", border2: "var(--color-border2__e3grur2l)", borderStrong: "var(--color-borderStrong__e3grur2m)", accent: "var(--color-accent__e3grur2n)", accentHover: "var(--color-accentHover__e3grur2o)", accentSoft: "var(--color-accentSoft__e3grur2p)", ok: "var(--color-ok__e3grur2q)", warn: "var(--color-warn__e3grur2r)", danger: "var(--color-danger__e3grur2s)", info: "var(--color-info__e3grur2t)", scrim: "var(--color-scrim__e3grur2u)" } };
+var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2w", dark: "theme_themes_tinta_dark__e3grur2x", sepia: "theme_themes_tinta_sepia__e3grur2y", contrast: "theme_themes_tinta_contrast__e3grur2z" } };
+var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" }, leading: { tight: "var(--leading-tight__e3grur1w)", snug: "var(--leading-snug__e3grur1x)", normal: "var(--leading-normal__e3grur1y)", relaxed: "var(--leading-relaxed__e3grur1z)" }, weight: { light: "var(--weight-light__e3grur20)", regular: "var(--weight-regular__e3grur21)", medium: "var(--weight-medium__e3grur22)", semibold: "var(--weight-semibold__e3grur23)", bold: "var(--weight-bold__e3grur24)" }, dur: { fast: "var(--dur-fast__e3grur25)", base: "var(--dur-base__e3grur26)", slow: "var(--dur-slow__e3grur27)" }, ease: { ink: "var(--ease-ink__e3grur28)" }, shadow: { sm: "var(--shadow-sm__e3grur29)", md: "var(--shadow-md__e3grur2a)", lg: "var(--shadow-lg__e3grur2b)" }, color: colorVars };
 
-// src/hooks/use-toggle/index.ts
+// src/hooks/use-previous/index.ts
 var import_react = require("react");
+function usePrevious(value, initial) {
+  const ref = (0, import_react.useRef)(initial);
+  (0, import_react.useEffect)(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+// src/hooks/use-toggle/index.ts
+var import_react2 = require("react");
 function useToggle(initial = false) {
-  const [on, setOn] = (0, import_react.useState)(initial);
-  const toggle = (0, import_react.useCallback)(() => setOn((value) => !value), []);
+  const [on, setOn] = (0, import_react2.useState)(initial);
+  const toggle = (0, import_react2.useCallback)(() => setOn((value) => !value), []);
   return [on, toggle, setOn];
 }
 
 // src/components/button/use-styles.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/theme/context/theme-context.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var noop = () => {
 };
 var DEFAULT_VALUE = {
   schema: "tinta",
   mode: "light",
+  preference: "light",
   themeClass: themes.tinta.light,
   setSchema: noop,
   setMode: noop,
-  toggleMode: noop
+  toggleMode: noop,
+  cycleMode: noop
 };
-var ThemeContext = (0, import_react2.createContext)(null);
+var ThemeContext = (0, import_react3.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 {
+  }
+}
 function ThemeProvider({
   children,
   defaultSchema = "tinta",
-  defaultMode = "light"
+  defaultMode = "light",
+  storageKey = "ds-theme",
+  persist = true
 }) {
-  const [schema, setSchema] = (0, import_react2.useState)(defaultSchema);
-  const [mode, setMode] = (0, import_react2.useState)(defaultMode);
-  const value = (0, import_react2.useMemo)(
+  const [schema, setSchema] = (0, import_react3.useState)(
+    () => persist && readStored(storageKey)?.schema || defaultSchema
+  );
+  const [preference, setPreference] = (0, import_react3.useState)(
+    () => (persist ? readStored(storageKey)?.preference : null) ?? defaultMode
+  );
+  const [systemMode, setSystemMode] = (0, import_react3.useState)(resolveSystemMode);
+  (0, import_react3.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_react3.useEffect)(() => {
+    if (persist) writeStored(storageKey, { schema, preference });
+  }, [schema, preference, persist, storageKey]);
+  const value = (0, import_react3.useMemo)(
     () => ({
       schema,
       mode,
+      preference,
       themeClass: themes[schema][mode],
       setSchema,
-      setMode,
-      toggleMode: () => setMode((current2) => current2 === "dark" ? "light" : "dark")
+      setMode: setPreference,
+      toggleMode: () => setPreference(mode === "dark" ? "light" : "dark"),
+      cycleMode: () => setPreference(modeNames[(modeNames.indexOf(mode) + 1) % modeNames.length])
     }),
-    [schema, mode]
+    [schema, mode, preference]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  return (0, import_react2.useContext)(ThemeContext) ?? DEFAULT_VALUE;
+  return (0, import_react3.useContext)(ThemeContext) ?? DEFAULT_VALUE;
 }
 
 // src/components/button/use-styles.css.ts
@@ -147,7 +210,7 @@ function useStyles({
   className
 }) {
   const { themeClass } = useTheme();
-  const container = (0, import_react3.useMemo)(
+  const container = (0, import_react4.useMemo)(
     () => [
       themeClass,
       root,
@@ -185,7 +248,7 @@ function Button({
 }
 
 // src/components/divider/use-styles.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/divider/use-styles.css.ts
 var horizontal = "use-styles_horizontal__1n7v7yj1";
@@ -198,7 +261,7 @@ var vertical = "use-styles_vertical__1n7v7yj2";
 // src/components/divider/use-styles.ts
 function useStyles2({ vertical: vertical2, hasLabel }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react4.useMemo)(
+  const root24 = (0, import_react5.useMemo)(
     () => [
       themeClass,
       root2,
@@ -225,7 +288,7 @@ function Divider({ vertical: vertical2, label: label7, ...rest }) {
 }
 
 // src/components/avatar/use-styles.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/avatar/use-styles.css.ts
 var root3 = "use-styles_root__1mn1rmu0";
@@ -239,7 +302,7 @@ function useStyles3({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react5.useMemo)(
+  const root24 = (0, import_react6.useMemo)(
     () => [
       themeClass,
       root3,
@@ -260,7 +323,7 @@ function Avatar({ size: size3, filled, className, children, ...rest }) {
 }
 
 // src/components/badge/use-styles.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/badge/use-styles.css.ts
 var dot = "use-styles_dot__1wpei6p1";
@@ -270,11 +333,11 @@ var tone2 = { ink: "use-styles_tone_ink__1wpei6p2", accent: "use-styles_tone_acc
 // src/components/badge/use-styles.ts
 function useStyles4({ tone: tone4 = "ink", className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react6.useMemo)(
+  const root24 = (0, import_react7.useMemo)(
     () => [themeClass, root4, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
-  const dot3 = (0, import_react6.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
+  const dot3 = (0, import_react7.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
   return { root: root24, dot: dot3 };
 }
 
@@ -289,7 +352,7 @@ function Badge({ count, tone: tone4, className, children, ...rest }) {
 }
 
 // src/components/progress/use-styles.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/progress/use-styles.css.ts
 var bar = "use-styles_bar__kbop7v3";
@@ -305,7 +368,7 @@ function useStyles5({
 }) {
   const { themeClass } = useTheme();
   const indeterminate2 = value === void 0;
-  return (0, import_react7.useMemo)(() => {
+  return (0, import_react8.useMemo)(() => {
     const root24 = (...classes) => [themeClass, ...classes, className].filter(Boolean).join(" ");
     if (variant2 === "circular") {
       return { track: "", bar: "", spinner: root24(spinner) };
@@ -383,7 +446,7 @@ function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/chip/use-styles.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/chip/use-styles.css.ts
 var clickable = "use-styles_clickable__1axilf44";
@@ -399,7 +462,7 @@ function useStyles6({
   clickable: clickable2
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react8.useMemo)(
+  const root24 = (0, import_react9.useMemo)(
     () => [
       themeClass,
       root5,
@@ -449,7 +512,7 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/checkbox/use-styles.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/checkbox/use-styles.css.ts
 var box = "use-styles_box__9zoga92";
@@ -462,11 +525,11 @@ var root6 = "use-styles_root__9zoga90";
 // src/components/checkbox/use-styles.ts
 function useStyles7({ checked, disabled: disabled3 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react9.useMemo)(
+  const root24 = (0, import_react10.useMemo)(
     () => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
     [themeClass, disabled3]
   );
-  const box2 = (0, import_react9.useMemo)(
+  const box2 = (0, import_react10.useMemo)(
     () => [box, checked && boxChecked].filter(Boolean).join(" "),
     [checked]
   );
@@ -505,7 +568,7 @@ function Checkbox({
 }
 
 // src/components/radio/use-styles.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/radio/use-styles.css.ts
 var circle = "use-styles_circle__vy61b43";
@@ -521,7 +584,7 @@ function useStyles8({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react10.useMemo)(
+  const root24 = (0, import_react11.useMemo)(
     () => [themeClass, root7, disabled3 && disabled2, className].filter(Boolean).join(" "),
     [themeClass, disabled3, className]
   );
@@ -557,7 +620,7 @@ function Radio({ checked, onChange, label: label7, name, value, disabled: disabl
 }
 
 // src/components/switch/use-styles.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/switch/use-styles.css.ts
 var input3 = "use-styles_input__1r6kem71";
@@ -571,7 +634,7 @@ var trackChecked = "use-styles_trackChecked__1r6kem73";
 // src/components/switch/use-styles.ts
 function useStyles9({ checked }) {
   const { themeClass } = useTheme();
-  return (0, import_react11.useMemo)(
+  return (0, import_react12.useMemo)(
     () => ({
       root: [themeClass, root8].filter(Boolean).join(" "),
       input: input3,
@@ -609,7 +672,7 @@ function Switch({ checked = false, onChange, label: label7, disabled: disabled3
 }
 
 // src/components/text-field/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/icons/eye/index.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -664,7 +727,7 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/text-field/use-styles.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/text-field/use-styles.css.ts
 var field = "use-styles_field__vat8gv3";
@@ -683,7 +746,7 @@ var startIcon = "use-styles_startIcon__vat8gva";
 // src/components/text-field/use-styles.ts
 function useStyles10({ error, hasStartIcon, hasReveal, className }) {
   const { themeClass } = useTheme();
-  return (0, import_react12.useMemo)(() => {
+  return (0, import_react13.useMemo)(() => {
     const root24 = [themeClass, root9].filter(Boolean).join(" ");
     const labelText2 = [labelText, error && labelTextError].filter(Boolean).join(" ");
     const input6 = [
@@ -721,11 +784,11 @@ function TextField({
   id,
   ...rest
 }) {
-  const [reveal, setReveal] = (0, import_react13.useState)(false);
+  const [reveal, setReveal] = (0, import_react14.useState)(false);
   const isPassword = type === "password";
   const hasReveal = isPassword;
   const effectiveType = isPassword ? reveal ? "text" : "password" : type;
-  const autoId = (0, import_react13.useId)();
+  const autoId = (0, import_react14.useId)();
   const controlId = id ?? autoId;
   const classes = useStyles10({
     error,
@@ -783,7 +846,7 @@ function TextField({
 }
 
 // src/components/icon-button/use-styles.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/icon-button/use-styles.css.ts
 var accent = "use-styles_accent__18np0q02";
@@ -796,7 +859,7 @@ function useStyles11({
   tone: tone4 = "ink"
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react14.useMemo)(
+  const root24 = (0, import_react15.useMemo)(
     () => [themeClass, root10, tone4 === "accent" && accent, active2 && active].filter(Boolean).join(" "),
     [themeClass, active2, tone4]
   );
@@ -811,7 +874,7 @@ function IconButton({ icon: Icon, active: active2, tone: tone4, title, ...rest }
 }
 
 // src/components/card/use-styles.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/card/use-styles.css.ts
 var body = "use-styles_body__1fuvd022";
@@ -822,7 +885,7 @@ var root11 = "use-styles_root__1fuvd020";
 // src/components/card/use-styles.ts
 function useStyles12() {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react15.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
+  const root24 = (0, import_react16.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
   return { root: root24, header, body, footer };
 }
 
@@ -958,7 +1021,7 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/alert/use-styles.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/components/alert/use-styles.css.ts
 var body2 = "use-styles_body__ivsh6u8";
@@ -974,7 +1037,7 @@ function useStyles13({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react16.useMemo)(
+  const root24 = (0, import_react17.useMemo)(
     () => [themeClass, root12, severity[severity2], className].filter(Boolean).join(" "),
     [themeClass, severity2, className]
   );
@@ -1015,10 +1078,10 @@ function Alert({
 }
 
 // src/components/tooltip/index.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/tooltip/use-styles.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/tooltip/use-styles.css.ts
 var bubble = "use-styles_bubble__h9kvh1";
@@ -1028,11 +1091,11 @@ var wrapper = "use-styles_wrapper__h9kvh0";
 // src/components/tooltip/use-styles.ts
 function useStyles14({ placement: placement2 = "top" }) {
   const { themeClass } = useTheme();
-  const wrapper4 = (0, import_react17.useMemo)(
+  const wrapper4 = (0, import_react18.useMemo)(
     () => [themeClass, wrapper].filter(Boolean).join(" "),
     [themeClass]
   );
-  const bubble2 = (0, import_react17.useMemo)(
+  const bubble2 = (0, import_react18.useMemo)(
     () => [bubble, placement[placement2]].filter(Boolean).join(" "),
     [placement2]
   );
@@ -1042,14 +1105,14 @@ function useStyles14({ placement: placement2 = "top" }) {
 // src/components/tooltip/index.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function Tooltip({ label: label7, children, placement: placement2 }) {
-  const [open, setOpen] = (0, import_react18.useState)(false);
-  const tooltipId = (0, import_react18.useId)();
+  const [open, setOpen] = (0, import_react19.useState)(false);
+  const tooltipId = (0, import_react19.useId)();
   const { wrapper: wrapper4, bubble: bubble2 } = useStyles14({ placement: placement2 });
   const show = () => setOpen(true);
   const hide = () => setOpen(false);
   const previousDescribedBy = children.props["aria-describedby"];
   const describedBy = open ? [previousDescribedBy, tooltipId].filter(Boolean).join(" ") : previousDescribedBy;
-  const trigger2 = (0, import_react18.cloneElement)(children, { "aria-describedby": describedBy });
+  const trigger2 = (0, import_react19.cloneElement)(children, { "aria-describedby": describedBy });
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: wrapper4, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: [
     trigger2,
     open && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { id: tooltipId, role: "tooltip", className: bubble2, children: label7 })
@@ -1057,7 +1120,7 @@ function Tooltip({ label: label7, children, placement: placement2 }) {
 }
 
 // src/components/select/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/icons/chevron-down/index.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
@@ -1082,7 +1145,7 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/select/use-styles.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/select/use-styles.css.ts
 var chevron = "use-styles_chevron__1w1czpb4";
@@ -1101,7 +1164,7 @@ function useStyles15({
   open = false
 }) {
   const { themeClass } = useTheme();
-  return (0, import_react19.useMemo)(() => {
+  return (0, import_react20.useMemo)(() => {
     const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
     return {
       root: [themeClass, root13].filter(Boolean).join(" "),
@@ -1118,10 +1181,10 @@ function useStyles15({
 // src/components/select/index.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function Select({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3 }) {
-  const [open, setOpen] = (0, import_react20.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react20.useState)(0);
-  const rootRef = (0, import_react20.useRef)(null);
-  const baseId = (0, import_react20.useId)();
+  const [open, setOpen] = (0, import_react21.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react21.useState)(0);
+  const rootRef = (0, import_react21.useRef)(null);
+  const baseId = (0, import_react21.useId)();
   const labelId = `${baseId}-label`;
   const optionId = (index) => `${baseId}-option-${index}`;
   const {
@@ -1133,7 +1196,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
     menu: menu2,
     optionClass
   } = useStyles15({ open });
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (rootRef.current && !rootRef.current.contains(event.target)) {
@@ -1244,7 +1307,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
 }
 
 // src/components/slider/use-styles.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/slider/use-styles.css.ts
 var input5 = "use-styles_input__okw59n3";
@@ -1258,7 +1321,7 @@ var wrapper2 = "use-styles_wrapper__okw59n6";
 // src/components/slider/use-styles.ts
 function useStyles16() {
   const { themeClass } = useTheme();
-  return (0, import_react21.useMemo)(() => {
+  return (0, import_react22.useMemo)(() => {
     const root24 = [themeClass, root14].filter(Boolean).join(" ");
     return {
       wrapper: wrapper2,
@@ -1314,10 +1377,10 @@ function Slider({
 }
 
 // src/components/accordion/index.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/components/accordion/use-styles.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/accordion/use-styles.css.ts
 var chevron2 = "use-styles_chevron__1cjrdh93";
@@ -1330,7 +1393,7 @@ var root15 = "use-styles_root__1cjrdh90";
 // src/components/accordion/use-styles.ts
 function useStyles17({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react22.useMemo)(
+  return (0, import_react23.useMemo)(
     () => ({
       root: [themeClass, root15, className].filter(Boolean).join(" "),
       item,
@@ -1350,7 +1413,7 @@ function Accordion({
   defaultOpen = [],
   className
 }) {
-  const [open, setOpen] = (0, import_react23.useState)(defaultOpen);
+  const [open, setOpen] = (0, import_react24.useState)(defaultOpen);
   const { root: root24, item: item3, header: header3, chevronFor, panel: panel2 } = useStyles17({ className });
   const toggle = (id) => {
     setOpen((current2) => {
@@ -1385,7 +1448,7 @@ function Accordion({
 }
 
 // src/components/breadcrumbs/index.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/components/icons/chevron-right/index.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
@@ -1410,7 +1473,7 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/breadcrumbs/use-styles.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/components/breadcrumbs/use-styles.css.ts
 var crumb = "use-styles_crumb__7u0du61";
@@ -1421,7 +1484,7 @@ var separator = "use-styles_separator__7u0du63";
 // src/components/breadcrumbs/use-styles.ts
 function useStyles18({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react24.useMemo)(
+  const root24 = (0, import_react25.useMemo)(
     () => [themeClass, root16, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1435,7 +1498,7 @@ function Breadcrumbs({ items, className, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("nav", { "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
     const isLast = index === items.length - 1;
     const key = index;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react25.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react26.Fragment, { children: [
       isLast ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: crumb2, children: item3.label }),
       !isLast && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: separator2, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronRightIcon, { size: 14 }) })
     ] }, key);
@@ -1465,7 +1528,7 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/pagination/use-styles.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/pagination/use-styles.css.ts
 var ellipsis = "use-styles_ellipsis__1azgzoh3";
@@ -1477,7 +1540,7 @@ var root17 = "use-styles_root__1azgzoh0";
 // src/components/pagination/use-styles.ts
 function useStyles19() {
   const { themeClass } = useTheme();
-  return (0, import_react26.useMemo)(
+  return (0, import_react27.useMemo)(
     () => ({
       root: [themeClass, root17].filter(Boolean).join(" "),
       pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
@@ -1552,10 +1615,10 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
 }
 
 // src/components/stepper/index.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/components/stepper/use-styles.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/stepper/use-styles.css.ts
 var connector = "use-styles_connector__79pt4e7";
@@ -1570,7 +1633,7 @@ var step = "use-styles_step__79pt4e1";
 // src/components/stepper/use-styles.ts
 function useStyles20({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react27.useMemo)(() => {
+  return (0, import_react28.useMemo)(() => {
     const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
     const markerFor = (state) => [
       marker,
@@ -1591,7 +1654,7 @@ function Stepper({ steps, active: active2 = 0, className, ...rest }) {
     const isActive = state === "active";
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: steps are a static, ordered list with no stable id.
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react28.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react29.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: step2, "aria-current": isActive ? "step" : void 0, children: [
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckIcon, { size: 14 }) : index + 1 }),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: labelFor(isActive), children: s.label })
@@ -1603,7 +1666,7 @@ function Stepper({ steps, active: active2 = 0, className, ...rest }) {
 }
 
 // src/components/tabs/use-styles.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/tabs/use-styles.css.ts
 var root19 = "use-styles_root__1l4m7t40";
@@ -1613,7 +1676,7 @@ var tabActive = "use-styles_tabActive__1l4m7t42";
 // src/components/tabs/use-styles.ts
 function useStyles21() {
   const { themeClass } = useTheme();
-  return (0, import_react29.useMemo)(() => {
+  return (0, import_react30.useMemo)(() => {
     const root24 = [themeClass, root19].filter(Boolean).join(" ");
     const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
     return { root: root24, tab, tabClass };
@@ -1642,10 +1705,10 @@ function Tabs({ items, value, onChange }) {
 }
 
 // src/components/menu/index.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/components/menu/use-styles.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/menu/use-styles.css.ts
 var danger = "use-styles_danger__1uyxaj3";
@@ -1656,7 +1719,7 @@ var wrapper3 = "use-styles_wrapper__1uyxaj0";
 // src/components/menu/use-styles.ts
 function useStyles22() {
   const { themeClass } = useTheme();
-  return (0, import_react30.useMemo)(
+  return (0, import_react31.useMemo)(
     () => ({
       wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
       list,
@@ -1675,10 +1738,10 @@ function assignRef(ref, value) {
 }
 function Menu({ trigger: trigger2, items }) {
   const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles22();
-  const [open, setOpen] = (0, import_react31.useState)(false);
-  const rootRef = (0, import_react31.useRef)(null);
-  const listRef = (0, import_react31.useRef)(null);
-  const triggerRef = (0, import_react31.useRef)(null);
+  const [open, setOpen] = (0, import_react32.useState)(false);
+  const rootRef = (0, import_react32.useRef)(null);
+  const listRef = (0, import_react32.useRef)(null);
+  const triggerRef = (0, import_react32.useRef)(null);
   const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
   const focusItemAt = (index) => {
     const menuItems = getMenuItems();
@@ -1690,7 +1753,7 @@ function Menu({ trigger: trigger2, items }) {
     setOpen(false);
     triggerRef.current?.focus();
   };
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!open) return;
     listRef.current?.querySelector('[role="menuitem"]')?.focus();
     const onDocMouseDown = (event) => {
@@ -1746,7 +1809,7 @@ function Menu({ trigger: trigger2, items }) {
     triggerRef.current = node;
     assignRef(consumerRef, node);
   };
-  const clonedTrigger = (0, import_react31.cloneElement)(trigger2, {
+  const clonedTrigger = (0, import_react32.cloneElement)(trigger2, {
     ref: mergedTriggerRef,
     "aria-haspopup": "menu",
     "aria-expanded": open,
@@ -1776,10 +1839,11 @@ function Menu({ trigger: trigger2, items }) {
 }
 
 // src/components/dialog/index.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
+var import_react_dom = require("react-dom");
 
 // src/components/dialog/use-styles.ts
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/components/dialog/use-styles.css.ts
 var actions = "use-styles_actions__5tstu84";
@@ -1791,7 +1855,7 @@ var titleText2 = "use-styles_titleText__5tstu82";
 // src/components/dialog/use-styles.ts
 function useStyles23() {
   const { themeClass } = useTheme();
-  return (0, import_react32.useMemo)(
+  return (0, import_react33.useMemo)(
     () => ({
       overlay: [themeClass, overlay].filter(Boolean).join(" "),
       surface,
@@ -1808,11 +1872,11 @@ var import_jsx_runtime35 = require("react/jsx-runtime");
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Dialog({ open, onClose, title, actions: actions3, children }) {
   const { overlay: overlay2, surface: surface2, titleText: titleText3, body: body4, actions: actionsClass } = useStyles23();
-  const surfaceRef = (0, import_react33.useRef)(null);
-  const previouslyFocused = (0, import_react33.useRef)(null);
-  const generatedId = (0, import_react33.useId)();
+  const surfaceRef = (0, import_react34.useRef)(null);
+  const previouslyFocused = (0, import_react34.useRef)(null);
+  const generatedId = (0, import_react34.useId)();
   const titleId = title != null ? generatedId : void 0;
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -1820,13 +1884,13 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;
     surfaceRef.current?.focus();
     return () => previouslyFocused.current?.focus?.();
   }, [open]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!open) return;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -1834,7 +1898,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
       document.body.style.overflow = previousOverflow;
     };
   }, [open]);
-  if (!open) return null;
+  if (!open || typeof document === "undefined") return null;
   const stop = (event) => event.stopPropagation();
   const onSurfaceKeyDown = (event) => {
     if (event.key !== "Tab") return;
@@ -1861,7 +1925,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
       first.focus();
     }
   };
-  return (
+  return (0, import_react_dom.createPortal)(
     // biome-ignore lint/a11y/useKeyWithClickEvents: ESC handled by a document keydown listener.
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "div",
@@ -1880,12 +1944,16 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
           actions3 != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: actionsClass, children: actions3 })
         ]
       }
-    ) })
+    ) }),
+    document.body
   );
 }
 
+// src/components/snackbar/index.tsx
+var import_react_dom2 = require("react-dom");
+
 // src/components/snackbar/use-styles.ts
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/snackbar/use-styles.css.ts
 var closeBtn = "use-styles_closeBtn__ihzsep2";
@@ -1895,7 +1963,7 @@ var root20 = "use-styles_root__ihzsep0";
 // src/components/snackbar/use-styles.ts
 function useStyles24() {
   const { themeClass } = useTheme();
-  return (0, import_react34.useMemo)(
+  return (0, import_react35.useMemo)(
     () => ({
       root: [themeClass, root20].filter(Boolean).join(" "),
       message,
@@ -1909,16 +1977,19 @@ function useStyles24() {
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function Snackbar({ open, message: message2, action, onClose }) {
   const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles24();
-  if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { role: "status", className: root24, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: messageClass, children: message2 }),
-    action,
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(XIcon, { size: 18 }) })
-  ] });
+  if (!open || typeof document === "undefined") return null;
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { role: "status", className: root24, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: messageClass, children: message2 }),
+      action,
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(XIcon, { size: 18 }) })
+    ] }),
+    document.body
+  );
 }
 
 // src/components/table/use-styles.ts
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/table/use-styles.css.ts
 var alignRight = "use-styles_alignRight__1n2cz6i3";
@@ -1929,7 +2000,7 @@ var th = "use-styles_th__1n2cz6i1";
 // src/components/table/use-styles.ts
 function useStyles25({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react35.useMemo)(
+  const root24 = (0, import_react36.useMemo)(
     () => [themeClass, root21, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1955,7 +2026,7 @@ function Table({
 }
 
 // src/components/app-bar/use-styles.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/components/app-bar/use-styles.css.ts
 var actions2 = "use-styles_actions__1h133nh2";
@@ -1965,7 +2036,7 @@ var root22 = "use-styles_root__1h133nh0";
 // src/components/app-bar/use-styles.ts
 function useStyles26({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react36.useMemo)(
+  const root24 = (0, import_react37.useMemo)(
     () => [themeClass, root22, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1984,7 +2055,7 @@ function AppBar({ brand: brand2, actions: actions3, className, children, ...rest
 }
 
 // src/components/list-item/use-styles.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/components/list-item/use-styles.css.ts
 var content2 = "use-styles_content__kbreq13";
@@ -1996,7 +2067,7 @@ var trailing = "use-styles_trailing__kbreq14";
 // src/components/list-item/use-styles.ts
 function useStyles27({ selected: selected3, className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react37.useMemo)(
+  const root24 = (0, import_react38.useMemo)(
     () => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
     [themeClass, selected3, className]
   );
@@ -2189,11 +2260,14 @@ var text = { eyebrow: "typography_text_eyebrow__1wmlzy0", display: "typography_t
   Tooltip,
   TriangleAlertIcon,
   XIcon,
+  colorVars,
   modeNames,
   schemaNames,
   text,
   theme,
   themes,
+  usePrevious,
   useTheme,
   useToggle
 });
+//# sourceMappingURL=index.cjs.map