@umami/react-zen 0.219.0 → 0.221.0

package/dist/index.mjs

@@ -35,7 +35,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is2;
     var useState18 = React5.useState;
-    var useEffect12 = React5.useEffect;
+    var useEffect13 = React5.useEffect;
     var useLayoutEffect3 = React5.useLayoutEffect;
     var useDebugValue = React5.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
@@ -48,7 +48,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe, value, getSnapshot]
       );
-      useEffect12(
+      useEffect13(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe(function() {
@@ -109,7 +109,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe, value, getSnapshot]
         );
-        useEffect12(
+        useEffect13(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe(function() {
@@ -135,7 +135,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React5 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React5.useState, useEffect12 = React5.useEffect, useLayoutEffect3 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React5 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React5.useState, useEffect13 = React5.useEffect, useLayoutEffect3 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React5.useSyncExternalStore ? React5.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
@@ -30978,6 +30978,38 @@ var gridAutoFlowMap = {
   "row-dense": "grid-flow-row-dense",
   "column-dense": "grid-flow-col-dense"
 };
+var gridColumnsMap = {
+  "1": "grid-cols-1",
+  "2": "grid-cols-2",
+  "3": "grid-cols-3",
+  "4": "grid-cols-4",
+  "5": "grid-cols-5",
+  "6": "grid-cols-6",
+  "7": "grid-cols-7",
+  "8": "grid-cols-8",
+  "9": "grid-cols-9",
+  "10": "grid-cols-10",
+  "11": "grid-cols-11",
+  "12": "grid-cols-12",
+  none: "grid-cols-none",
+  subgrid: "grid-cols-subgrid"
+};
+var gridRowsMap = {
+  "1": "grid-rows-1",
+  "2": "grid-rows-2",
+  "3": "grid-rows-3",
+  "4": "grid-rows-4",
+  "5": "grid-rows-5",
+  "6": "grid-rows-6",
+  "7": "grid-rows-7",
+  "8": "grid-rows-8",
+  "9": "grid-rows-9",
+  "10": "grid-rows-10",
+  "11": "grid-rows-11",
+  "12": "grid-rows-12",
+  none: "grid-rows-none",
+  subgrid: "grid-rows-subgrid"
+};
 var borderMap = {
   true: "border border-edge",
   none: "border-0",
@@ -31135,6 +31167,12 @@ function mapTextIndent(value) {
 function mapGridAutoFlow(value) {
   return mapResponsive(value, (v) => gridAutoFlowMap[v]);
 }
+function mapGridColumns(value) {
+  return mapResponsive(value, (v) => gridColumnsMap[v]);
+}
+function mapGridRows(value) {
+  return mapResponsive(value, (v) => gridRowsMap[v]);
+}
 function mapBorder(value) {
   return mapResponsive(value, (v) => borderMap[String(v)]);
 }
@@ -32483,10 +32521,55 @@ function Container({
 }
 
 // src/components/DataCard.tsx
-import { Fragment as Fragment6 } from "react";
+import { Fragment as Fragment7 } from "react";
 
 // src/components/Grid.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { useId as useId2 } from "react";
+import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+var PRESET_VALUES = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none", "subgrid"];
+var BREAKPOINT_QUERIES = {
+  base: "",
+  sm: "@media (min-width: 640px)",
+  md: "@media (min-width: 768px)",
+  lg: "@media (min-width: 1024px)",
+  xl: "@media (min-width: 1280px)",
+  "2xl": "@media (min-width: 1536px)"
+};
+function isPresetValue(value) {
+  return PRESET_VALUES.includes(value);
+}
+function isResponsiveObject(value) {
+  return value !== void 0 && typeof value !== "string" && typeof value === "object";
+}
+function hasCustomResponsiveValues(value) {
+  if (!isResponsiveObject(value)) return false;
+  return Object.values(value).some((v) => typeof v === "string" && !isPresetValue(v));
+}
+function generateResponsiveStyles(id, columns, rows) {
+  const styles = [];
+  const breakpoints2 = ["base", "sm", "md", "lg", "xl", "2xl"];
+  for (const bp of breakpoints2) {
+    const rules = [];
+    if (isResponsiveObject(columns)) {
+      const colValue = columns[bp];
+      if (colValue && !isPresetValue(colValue)) {
+        rules.push(`grid-template-columns: ${colValue}`);
+      }
+    }
+    if (isResponsiveObject(rows)) {
+      const rowValue = rows[bp];
+      if (rowValue && !isPresetValue(rowValue)) {
+        rules.push(`grid-template-rows: ${rowValue}`);
+      }
+    }
+    if (rules.length > 0) {
+      const query = BREAKPOINT_QUERIES[bp];
+      const ruleBlock = `.${id} { ${rules.join("; ")}; }`;
+      styles.push(query ? `${query} { ${ruleBlock} }` : ruleBlock);
+    }
+  }
+  return styles.join(" ");
+}
 function Grid({
   display = "grid",
   justifyContent,
@@ -32505,6 +32588,13 @@ function Grid({
   children,
   ...props
 }) {
+  const reactId = useId2();
+  const id = `zen-grid-${reactId.replace(/:/g, "")}`;
+  const isCustomColumns = typeof columns === "string" && !isPresetValue(columns);
+  const isCustomRows = typeof rows === "string" && !isPresetValue(rows);
+  const hasResponsiveCustomColumns = hasCustomResponsiveValues(columns);
+  const hasResponsiveCustomRows = hasCustomResponsiveValues(rows);
+  const needsStyleTag = hasResponsiveCustomColumns || hasResponsiveCustomRows;
   const classes = cn(
     mapDisplay(display),
     mapJustifyContent(justifyContent),
@@ -32515,16 +32605,22 @@ function Grid({
     mapGap(gapX, "x"),
     mapGap(gapY, "y"),
     mapGridAutoFlow(autoFlow),
+    !isCustomColumns && !hasResponsiveCustomColumns && mapGridColumns(columns),
+    !isCustomRows && !hasResponsiveCustomRows && mapGridRows(rows),
+    needsStyleTag && id,
     className
   );
   const inlineStyles = {
     ...style,
-    ...rows && { gridTemplateRows: rows },
-    ...columns && { gridTemplateColumns: columns },
+    ...isCustomColumns && { gridTemplateColumns: columns },
+    ...isCustomRows && { gridTemplateRows: rows },
     ...areas && { gridTemplateAreas: areas }
   };
-  const hasInlineStyles = Object.keys(inlineStyles).length > (style ? Object.keys(style).length : 0);
-  return /* @__PURE__ */ jsx26(Box, { ...props, className: classes, style: hasInlineStyles || style ? inlineStyles : void 0, children });
+  const hasInlineStyles = isCustomColumns || isCustomRows || areas || style && Object.keys(style).length > 0;
+  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
+    needsStyleTag && /* @__PURE__ */ jsx26("style", { children: generateResponsiveStyles(id, columns, rows) }),
+    /* @__PURE__ */ jsx26(Box, { ...props, className: classes, style: hasInlineStyles ? inlineStyles : void 0, children })
+  ] });
 }
 
 // src/lib/utils.ts
@@ -32542,7 +32638,7 @@ function mapIdProperty(data) {
 }
 
 // src/components/DataCard.tsx
-import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
 function DataCard({ data = [], labelWidth = "auto", ...props }) {
   const rows = mapIdProperty(data);
   return /* @__PURE__ */ jsx27(
@@ -32555,7 +32651,7 @@ function DataCard({ data = [], labelWidth = "auto", ...props }) {
       padding: "6",
       ...props,
       children: rows.map((row, index) => {
-        return /* @__PURE__ */ jsxs12(Fragment6, { children: [
+        return /* @__PURE__ */ jsxs13(Fragment7, { children: [
           /* @__PURE__ */ jsx27(Row, { paddingY: "3", border: "bottom", borderColor: "muted", paddingRight: "6", children: /* @__PURE__ */ jsx27(Text, { weight: "bold", children: row?.label }) }),
           /* @__PURE__ */ jsx27(Row, { paddingY: "3", border: "bottom", children: /* @__PURE__ */ jsx27(Text, { children: row?.value }) })
         ] }, index);
@@ -32651,7 +32747,7 @@ function TableCell({ children, className, align, ...props }) {
 }
 
 // src/components/DataTable.tsx
-import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
 import { createElement as createElement5 } from "react";
 function DataTable({
   data = [],
@@ -32679,7 +32775,7 @@ function DataTable({
       return /* @__PURE__ */ jsx29(DataCard, { data: items }, `${row.id}-${index}`);
     }) });
   }
-  return /* @__PURE__ */ jsxs13(Table2, { ...props, className: cn("relative text-base", className), children: [
+  return /* @__PURE__ */ jsxs14(Table2, { ...props, className: cn("relative text-base", className), children: [
     /* @__PURE__ */ jsx29(TableHeader, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, label, as, hidden, width, ...columnProps }) => {
       if (hidden) {
         return null;
@@ -32710,7 +32806,7 @@ function DataColumn(props) {
 }
 
 // src/components/Dots.tsx
-import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 var sizeMap2 = {
   sm: "w-1.5 h-1.5",
   md: "w-2 h-2",
@@ -32725,7 +32821,7 @@ var gapMap2 = {
   lg: "2"
 };
 function Dots({ size = "md", className, color: _color, ...props }) {
-  return /* @__PURE__ */ jsxs14(Row, { ...props, alignItems: "center", gap: gapMap2[size], className, children: [
+  return /* @__PURE__ */ jsxs15(Row, { ...props, alignItems: "center", gap: gapMap2[size], className, children: [
     /* @__PURE__ */ jsx30(Dot, { size }),
     /* @__PURE__ */ jsx30(Dot, { size }),
     /* @__PURE__ */ jsx30(Dot, { size })
@@ -32736,16 +32832,29 @@ function Dots({ size = "md", className, color: _color, ...props }) {
 import { useEffect as useEffect2, useState as useState5 } from "react";
 
 // src/components/Tooltip.tsx
-import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 function Tooltip2({ children, className, showArrow, ...props }) {
-  return /* @__PURE__ */ jsx31($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: cn(tooltip(), className), children: /* @__PURE__ */ jsx31(TooltipBubble, { showArrow, children }) });
-}
-function TooltipBubble({ showArrow, children, className, color: _color, ...props }) {
-  return /* @__PURE__ */ jsxs15(Box, { ...props, className, children: [
-    showArrow && /* @__PURE__ */ jsx31($44f671af83e7d9e0$export$746d02f47f4d381, { className: "fill-surface-inverted", children: /* @__PURE__ */ jsx31("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx31("path", { d: "M0 0 L4 4 L8 0" }) }) }),
-    /* @__PURE__ */ jsx31(Box, { children })
+  return /* @__PURE__ */ jsxs16($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: cn("group", tooltip(), className), children: [
+    showArrow && /* @__PURE__ */ jsx31($44f671af83e7d9e0$export$746d02f47f4d381, { className: "w-2 h-2", children: /* @__PURE__ */ jsx31(
+      "svg",
+      {
+        viewBox: "0 0 8 8",
+        className: cn(
+          "block fill-surface-inverted",
+          "group-data-[placement=bottom]:rotate-180",
+          "group-data-[placement=left]:-rotate-90",
+          "group-data-[placement=right]:rotate-90"
+        ),
+        children: /* @__PURE__ */ jsx31("path", { d: "M0 0 L4 4 L8 0" })
+      }
+    ) }),
+    children,
+    "for"
   ] });
 }
+function TooltipBubble({ children, className, color: _color, ...props }) {
+  return /* @__PURE__ */ jsx31(Box, { ...props, className, children });
+}
 
 // src/components/FloatingTooltip.tsx
 import { jsx as jsx32 } from "react/jsx-runtime";
@@ -34807,7 +34916,7 @@ function useForm(props = {}) {
 }
 
 // src/components/forms/Form.tsx
-import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 function Form({
   autoComplete,
   onSubmit,
@@ -34861,7 +34970,7 @@ function Form({
       formValues.reset(void 0, { keepDirty: true, keepValues: true });
     }
   }, [error, formValues]);
-  return /* @__PURE__ */ jsxs16(FormProvider, { ...formValues, children: [
+  return /* @__PURE__ */ jsxs17(FormProvider, { ...formValues, children: [
     error && /* @__PURE__ */ jsx33(
       AlertBanner,
       {
@@ -34898,7 +35007,7 @@ function FormController({ children, ...props }) {
 
 // src/components/forms/FormField.tsx
 import { Children as Children2, cloneElement as cloneElement2 } from "react";
-import { jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
 function FormField({
   id,
   name,
@@ -34914,7 +35023,7 @@ function FormField({
   const context = useFormContext();
   const { control } = context;
   const { invalid, error } = context.getFieldState(name);
-  return /* @__PURE__ */ jsxs17(Column, { ...props, gap: "1", className, children: [
+  return /* @__PURE__ */ jsxs18(Column, { ...props, gap: "1", className, children: [
     label && /* @__PURE__ */ jsx36(Label2, { htmlFor: fieldId, children: label }),
     /* @__PURE__ */ jsx36(FormController, { name, control, rules, children: ({ field }) => {
       return Children2.map(
@@ -34933,7 +35042,7 @@ function FormField({
 }
 
 // src/components/forms/FormFieldArray.tsx
-import { jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
 function FormFieldArray({
   id,
   name,
@@ -34955,7 +35064,7 @@ function FormFieldArray({
   register(name, rules);
   const errors = formState?.errors || {};
   const errorMessage = errors[name]?.message;
-  return /* @__PURE__ */ jsxs18(Column, { ...props, gap: "1", className, children: [
+  return /* @__PURE__ */ jsxs19(Column, { ...props, gap: "1", className, children: [
     label && /* @__PURE__ */ jsx37(Label2, { htmlFor: fieldId, children: label }),
     description && /* @__PURE__ */ jsx37(Text, { color: "muted", children: description }),
     errorMessage && /* @__PURE__ */ jsx37(Text, { className: "text-red-500", children: errorMessage }),
@@ -34975,7 +35084,7 @@ function FormResetButton({ values = {}, children, onPress, ...props }) {
 }
 
 // src/components/Spinner.tsx
-import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 var sizeMap3 = {
   sm: "w-4 h-4",
   md: "w-7 h-7",
@@ -34988,7 +35097,7 @@ function Spinner(props) {
     {
       ...domProps,
       className: cn("relative inline-flex justify-center items-center", sizeMap3[size], className),
-      children: /* @__PURE__ */ jsxs19("svg", { viewBox: "25 25 50 50", className: "zen-spinner-svg w-full h-full", children: [
+      children: /* @__PURE__ */ jsxs20("svg", { viewBox: "25 25 50 50", className: "zen-spinner-svg w-full h-full", children: [
         !quiet && /* @__PURE__ */ jsx39("circle", { className: "zen-spinner-track stroke-track", cx: "50", cy: "50", r: "20" }),
         /* @__PURE__ */ jsx39(
           "circle",
@@ -35008,7 +35117,7 @@ function Spinner(props) {
 }
 
 // src/components/LoadingButton.tsx
-import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
 function LoadingButton({
   isLoading,
   isDisabled,
@@ -35016,7 +35125,7 @@ function LoadingButton({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs20(Button2, { ...props, isDisabled, children: [
+  return /* @__PURE__ */ jsxs21(Button2, { ...props, isDisabled, children: [
     isLoading && /* @__PURE__ */ jsx40(Icon2, { size: "sm", children: /* @__PURE__ */ jsx40(Spinner, { isDisabled }) }),
     showText && children
   ] });
@@ -35049,7 +35158,7 @@ function FormSubmitButton({
 
 // src/components/HoverTrigger.tsx
 import { useEffect as useEffect4, useRef as useRef2, useState as useState6 } from "react";
-import { Fragment as Fragment7, jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
 var CLOSE_DELAY = 500;
 function HoverTrigger({
   isOpen,
@@ -35100,7 +35209,7 @@ function HoverTrigger({
       }
     }, closeDelay);
   };
-  return /* @__PURE__ */ jsxs21(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment8, { children: [
     /* @__PURE__ */ jsx42("span", { ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: triggerElement }),
     /* @__PURE__ */ jsx42(Popover2, { isOpen: open, isNonModal: true, triggerRef, children: /* @__PURE__ */ jsx42("div", { onMouseEnter: handleMenuEnter, onMouseLeave: handleMenuLeave, children: popupElement }) })
   ] });
@@ -38858,7 +38967,7 @@ var animated = host.animated;
 import { useEffect as useEffect10, useState as useState11 } from "react";
 
 // src/components/toast/Toast.tsx
-import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 var TOAST_CLOSE_ACTION = "close";
 function Toast({
   id,
@@ -38874,8 +38983,8 @@ function Toast({
   ...props
 }) {
   const hasActions = actions?.length > 0;
-  return /* @__PURE__ */ jsxs22(Row, { ...props, className: cn(toast({ variant }), className), children: [
-    /* @__PURE__ */ jsxs22(Column, { flexGrow: 1, gap: "1", children: [
+  return /* @__PURE__ */ jsxs23(Row, { ...props, className: cn(toast({ variant }), className), children: [
+    /* @__PURE__ */ jsxs23(Column, { flexGrow: 1, gap: "1", children: [
       title && /* @__PURE__ */ jsx43(Text, { weight: "semibold", children: title }),
       message && /* @__PURE__ */ jsx43(Text, { color: "muted", children: message })
     ] }),
@@ -38956,10 +39065,10 @@ function Toaster({ duration = 0, position = "bottom-right" }) {
 }
 
 // src/components/toast/ToastProvider.tsx
-import { jsx as jsx45, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
 var ToastContext = createContext2({});
 function ToastProvider({ children, ...props }) {
-  return /* @__PURE__ */ jsxs23(ToastContext.Provider, { value: props, children: [
+  return /* @__PURE__ */ jsxs24(ToastContext.Provider, { value: props, children: [
     children,
     /* @__PURE__ */ jsx45(Toaster, { ...props })
   ] });
@@ -38996,7 +39105,7 @@ function useToast() {
 }
 
 // src/components/IconLabel.tsx
-import { jsx as jsx46, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
 function IconLabel({
   icon,
   label,
@@ -39006,7 +39115,7 @@ function IconLabel({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs24(Row, { alignItems: "center", gap: true, ...props, children: [
+  return /* @__PURE__ */ jsxs25(Row, { alignItems: "center", gap: true, ...props, children: [
     icon && /* @__PURE__ */ jsx46(Icon2, { ...iconProps, children: icon }),
     showLabel && label && /* @__PURE__ */ jsx46(Text, { ...labelProps, children: label }),
     showLabel && children
@@ -39045,7 +39154,7 @@ function Image({
 }
 
 // src/components/Loading.tsx
-import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
 var placementClasses = {
   absolute: "absolute inset-0 m-auto",
   center: "m-auto",
@@ -39058,7 +39167,7 @@ function Loading({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     Box,
     {
       ...props,
@@ -39076,7 +39185,7 @@ function Loading({
 }
 
 // src/components/Menu.tsx
-import { Fragment as Fragment9, jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
 function Menu2({ className, children, ...props }) {
   return /* @__PURE__ */ jsx49(
     $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
@@ -39111,7 +39220,7 @@ function MenuItem2({
         "data-[selected]:font-semibold",
         className
       ),
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs26(Fragment9, { children: [
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs27(Fragment10, { children: [
         /* @__PURE__ */ jsx49(IconLabel, { icon, label, children }),
         showChecked && isSelected && /* @__PURE__ */ jsx49(Icon2, { "aria-hidden": "true", children: /* @__PURE__ */ jsx49(Check, {}) }),
         showSubMenuIcon && /* @__PURE__ */ jsx49(Icon2, { "aria-hidden": "true", children: /* @__PURE__ */ jsx49(ChevronRight, {}) })
@@ -39134,7 +39243,7 @@ function MenuSection({
     maxHeight,
     overflow: maxHeight ? "auto" : void 0
   };
-  return /* @__PURE__ */ jsxs26(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs27(Fragment10, { children: [
     title && /* @__PURE__ */ jsx49($72a5793c14baf454$export$8b251419efc915eb, { className: "text-base font-bold px-2 py-1.5", children: title }),
     /* @__PURE__ */ jsx49(
       $3674c52c6b3c5bce$export$4b1545b4f2016d26,
@@ -39190,7 +39299,7 @@ import {
   useContext as useContext5,
   useState as useState12
 } from "react";
-import { jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
 var NavbarContext = createContext3(void 0);
 var useNavigationContext = () => {
   const context = useContext5(NavbarContext);
@@ -39218,8 +39327,8 @@ function NavbarItem({
 }) {
   const { activeMenu, setActiveMenu } = useNavigationContext();
   if (label) {
-    return /* @__PURE__ */ jsxs27(HoverTrigger, { isOpen: activeMenu === label, onHoverStart: () => setActiveMenu(label), children: [
-      /* @__PURE__ */ jsxs27(
+    return /* @__PURE__ */ jsxs28(HoverTrigger, { isOpen: activeMenu === label, onHoverStart: () => setActiveMenu(label), children: [
+      /* @__PURE__ */ jsxs28(
         Row,
         {
           ...props,
@@ -39255,7 +39364,7 @@ function NavbarItem({
 
 // src/components/NavMenu.tsx
 import { createContext as createContext4, useContext as useContext6, useState as useState13 } from "react";
-import { jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs29 } from "react/jsx-runtime";
 var NavMenuContext = createContext4(null);
 function NavMenu({ muteItems, onItemClick, className, children, ...props }) {
   return /* @__PURE__ */ jsx52(NavMenuContext.Provider, { value: { onItemClick }, children: /* @__PURE__ */ jsx52(Column, { ...props, color: muteItems ? "muted" : void 0, className, children }) });
@@ -39274,7 +39383,7 @@ function NavMenuGroup({
       setMinimized((state2) => !state2);
     }
   };
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     Column,
     {
       ...props,
@@ -39284,7 +39393,7 @@ function NavMenuGroup({
         allowMinimize && minimized && "[&_.navmenu-children]:hidden"
       ),
       children: [
-        /* @__PURE__ */ jsxs28(
+        /* @__PURE__ */ jsxs29(
           Row,
           {
             paddingY: "2",
@@ -39328,8 +39437,8 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 import { useState as useState14 } from "react";
 
 // src/components/svg/EyeSlash.tsx
-import { jsx as jsx53, jsxs as jsxs29 } from "react/jsx-runtime";
-var SvgEyeSlash = (props) => /* @__PURE__ */ jsxs29("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
+import { jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
+var SvgEyeSlash = (props) => /* @__PURE__ */ jsxs30("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
   /* @__PURE__ */ jsx53("path", { fill: "none", d: "M0 0h256v256H0z" }),
   /* @__PURE__ */ jsx53(
     "path",
@@ -39357,8 +39466,8 @@ var SvgEyeSlash = (props) => /* @__PURE__ */ jsxs29("svg", { xmlns: "http://www.
 var EyeSlash_default = SvgEyeSlash;
 
 // src/components/svg/Eye.tsx
-import { jsx as jsx54, jsxs as jsxs30 } from "react/jsx-runtime";
-var SvgEye = (props) => /* @__PURE__ */ jsxs30("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
+import { jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
+var SvgEye = (props) => /* @__PURE__ */ jsxs31("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
   /* @__PURE__ */ jsx54("path", { fill: "none", d: "M0 0h256v256H0z" }),
   /* @__PURE__ */ jsx54(
     "path",
@@ -39391,17 +39500,17 @@ var Eye_default = SvgEye;
 import { jsx as jsx55 } from "react/jsx-runtime";
 
 // src/components/svg/Logo.tsx
-import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs32 } from "react/jsx-runtime";
 
 // src/components/PasswordField.tsx
-import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs33 } from "react/jsx-runtime";
 function PasswordField({ label, className, ...props }) {
   const [show, setShow] = useState14(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state2) => !state2);
-  return /* @__PURE__ */ jsxs32(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment11, { children: [
     label && /* @__PURE__ */ jsx57(Label2, { children: label }),
-    /* @__PURE__ */ jsxs32(
+    /* @__PURE__ */ jsxs33(
       $bcdf0525bf22703d$export$2c73285ae9390cec,
       {
         "aria-label": "Password",
@@ -39423,7 +39532,7 @@ function PasswordField({ label, className, ...props }) {
 }
 
 // src/components/ProgressBar.tsx
-import { Fragment as Fragment11, jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx58, jsxs as jsxs34 } from "react/jsx-runtime";
 function Track({ children }) {
   return /* @__PURE__ */ jsx58(Box, { position: "relative", borderRadius: "full", overflow: "hidden", className: "w-full h-2 bg-track", children });
 }
@@ -39443,7 +39552,7 @@ function Fill({ percentage }) {
 }
 function ProgressBar2({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx58($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: cn("flex items-center gap-3 w-full", className), children: ({ percentage = 0, valueText }) => {
-    return /* @__PURE__ */ jsxs33(Fragment11, { children: [
+    return /* @__PURE__ */ jsxs34(Fragment12, { children: [
       /* @__PURE__ */ jsx58(Track, { children: /* @__PURE__ */ jsx58(Fill, { percentage }) }),
       showPercentage && /* @__PURE__ */ jsx58(Text, { className: "tabular-nums", children: valueText })
     ] });
@@ -39451,14 +39560,14 @@ function ProgressBar2({ className, showPercentage, ...props }) {
 }
 
 // src/components/ProgressCircle.tsx
-import { Fragment as Fragment12, jsx as jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx59, jsxs as jsxs35 } from "react/jsx-runtime";
 function ProgressCircle({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx59($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: cn("relative flex justify-center items-center", className), children: ({ percentage = 0, valueText }) => {
     const radius = 45;
     const circumference = radius * 2 * Math.PI;
     const offset = circumference - percentage / 100 * circumference;
-    return /* @__PURE__ */ jsxs34(Fragment12, { children: [
-      /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs35(Fragment13, { children: [
+      /* @__PURE__ */ jsxs35(
         "svg",
         {
           viewBox: "0 0 100 100",
@@ -39486,9 +39595,9 @@ function ProgressCircle({ className, showPercentage, ...props }) {
 }
 
 // src/components/RadioGroup.tsx
-import { jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
 function RadioGroup2({ label, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     $b6c3ddc6086f204d$export$a98f0dcb43a68a25,
     {
       "aria-label": "RadioGroup",
@@ -39522,7 +39631,7 @@ function Radio2({ children, className, ...props }) {
 
 // src/components/SearchField.tsx
 import { useEffect as useEffect11, useState as useState15 } from "react";
-import { Fragment as Fragment13, jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx61, jsxs as jsxs37 } from "react/jsx-runtime";
 function SearchField2({
   label,
   placeholder,
@@ -39553,7 +39662,7 @@ function SearchField2({
       onSearch?.(searchValue);
     }
   }, [searchValue, delay]);
-  return /* @__PURE__ */ jsxs36(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs37(Fragment14, { children: [
     label && /* @__PURE__ */ jsx61(Label2, { children: label }),
     /* @__PURE__ */ jsx61(
       $440f4836bcb56932$export$b94867ecbd698f21,
@@ -39562,7 +39671,7 @@ function SearchField2({
         ...props,
         className: cn("relative", className),
         onChange: handleChange,
-        children: /* @__PURE__ */ jsxs36(
+        children: /* @__PURE__ */ jsxs37(
           $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
           {
             className: cn(
@@ -39590,7 +39699,7 @@ function SearchField2({
 
 // src/components/Select.tsx
 import { useState as useState16 } from "react";
-import { jsx as jsx62, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs38 } from "react/jsx-runtime";
 function Select2({
   items = [],
   value,
@@ -39623,7 +39732,7 @@ function Select2({
     setSearch("");
     onSearch?.("");
   };
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     $82d7e5349645de74$export$ef9b1a59e592288f,
     {
       "aria-label": "Select",
@@ -39634,11 +39743,11 @@ function Select2({
       onChange: handleChange,
       children: [
         label && /* @__PURE__ */ jsx62(Label2, { children: label }),
-        /* @__PURE__ */ jsx62(Button2, { variant: "outline", ...buttonProps, className: cn("w-full", buttonProps?.className), children: /* @__PURE__ */ jsxs37(Row, { flexGrow: 1, alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx62(Button2, { variant: "outline", ...buttonProps, className: cn("w-full", buttonProps?.className), children: /* @__PURE__ */ jsxs38(Row, { flexGrow: 1, alignItems: "center", justifyContent: "space-between", children: [
           /* @__PURE__ */ jsx62($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
           /* @__PURE__ */ jsx62(Icon2, { rotate: 90, "aria-hidden": "true", size: "sm", children: /* @__PURE__ */ jsx62(ChevronRight, {}) })
         ] }) }),
-        /* @__PURE__ */ jsx62(Popover2, { ...popoverProps, onOpenChange: handleOpenChange, isFullscreen, children: /* @__PURE__ */ jsxs37(
+        /* @__PURE__ */ jsx62(Popover2, { ...popoverProps, onOpenChange: handleOpenChange, isFullscreen, children: /* @__PURE__ */ jsxs38(
           Column,
           {
             gap: "2",
@@ -39685,7 +39794,7 @@ function Select2({
 
 // src/components/Sidebar.tsx
 import { createContext as createContext5, useContext as useContext7 } from "react";
-import { jsx as jsx63, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
 var SidebarContext = createContext5(null);
 function Sidebar({ isCollapsed, muteItems, className, children, ...props }) {
   return /* @__PURE__ */ jsx63(SidebarContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ jsx63(
@@ -39709,7 +39818,7 @@ function SidebarSection({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs38(Column, { ...props, paddingY: "2", className, children: [
+  return /* @__PURE__ */ jsxs39(Column, { ...props, paddingY: "2", className, children: [
     title && /* @__PURE__ */ jsx63(Box, { paddingX: "4", paddingY: "2", children: /* @__PURE__ */ jsx63(Text, { size: "xs", weight: "semibold", transform: "uppercase", color: "muted", children: title }) }),
     /* @__PURE__ */ jsx63(Column, { children })
   ] });
@@ -39721,7 +39830,7 @@ function SidebarHeader({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs38(Row, { ...props, paddingX: "4", paddingY: "3", gap: "3", alignItems: "center", className, children: [
+  return /* @__PURE__ */ jsxs39(Row, { ...props, paddingX: "4", paddingY: "3", gap: "3", alignItems: "center", className, children: [
     icon && /* @__PURE__ */ jsx63(Icon2, { size: "sm", children: icon }),
     label && /* @__PURE__ */ jsx63(Text, { weight: "semibold", children: label }),
     children
@@ -39736,8 +39845,8 @@ function SidebarItem({
   ...props
 }) {
   const { isCollapsed } = useContext7(SidebarContext);
-  return /* @__PURE__ */ jsxs38($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
-    /* @__PURE__ */ jsx63($f645667febf57a63$export$35a3bebf7ef2d934, { children: /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
+    /* @__PURE__ */ jsx63($f645667febf57a63$export$35a3bebf7ef2d934, { children: /* @__PURE__ */ jsxs39(
       Row,
       {
         ...props,
@@ -39765,7 +39874,7 @@ function SidebarItem({
 }
 
 // src/components/Slider.tsx
-import { Fragment as Fragment14, jsx as jsx64, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx64, jsxs as jsxs40 } from "react/jsx-runtime";
 function Fill2({ percentage }) {
   const width = `calc(10px + ${percentage}% - ${percentage * 0.2}px)`;
   return /* @__PURE__ */ jsx64("div", { className: "absolute inset-y-0 left-0 rounded-full bg-track-fill", style: { width } });
@@ -39784,14 +39893,14 @@ function Thumb({ percentage }) {
   );
 }
 function Slider2({ className, showValue = true, label, ...props }) {
-  return /* @__PURE__ */ jsxs39($6f909507e6374d18$export$472062a354075cee, { ...props, className: cn("flex flex-col gap-2 w-full", className), children: [
-    /* @__PURE__ */ jsxs39(Row, { justifyContent: "space-between", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs40($6f909507e6374d18$export$472062a354075cee, { ...props, className: cn("flex flex-col gap-2 w-full", className), children: [
+    /* @__PURE__ */ jsxs40(Row, { justifyContent: "space-between", alignItems: "center", children: [
       label && /* @__PURE__ */ jsx64(Label2, { children: label }),
       showValue && /* @__PURE__ */ jsx64($6f909507e6374d18$export$a590f758a961cb5b, { className: "text-base tabular-nums" })
     ] }),
     /* @__PURE__ */ jsx64($6f909507e6374d18$export$105594979f116971, { className: "relative h-5 w-full", children: ({ state: state2 }) => {
       const percentage = state2.getThumbPercent(0) * 100;
-      return /* @__PURE__ */ jsxs39(Fragment14, { children: [
+      return /* @__PURE__ */ jsxs40(Fragment15, { children: [
         /* @__PURE__ */ jsx64("div", { className: "absolute inset-x-0 top-1/2 -translate-y-1/2 h-1 rounded-full bg-track overflow-hidden", children: /* @__PURE__ */ jsx64(Fill2, { percentage }) }),
         /* @__PURE__ */ jsx64(Thumb, { percentage })
       ] });
@@ -39800,7 +39909,7 @@ function Slider2({ className, showValue = true, label, ...props }) {
 }
 
 // src/components/StatusLight.tsx
-import { jsx as jsx65, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs41 } from "react/jsx-runtime";
 var variantColors = {
   success: "bg-green-500",
   warning: "bg-yellow-500",
@@ -39821,19 +39930,19 @@ function StatusDot({ color, variant }) {
 }
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  return /* @__PURE__ */ jsxs40(Row, { ...domProps, alignItems: "center", gap: "2", className, children: [
+  return /* @__PURE__ */ jsxs41(Row, { ...domProps, alignItems: "center", gap: "2", className, children: [
     /* @__PURE__ */ jsx65(StatusDot, { color, variant }),
     children
   ] });
 }
 
 // src/components/Switch.tsx
-import { jsx as jsx66, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs42 } from "react/jsx-runtime";
 function Switch2({ label, children, className, ...props }) {
   const styles = switchVariant();
-  return /* @__PURE__ */ jsxs41(Column, { children: [
+  return /* @__PURE__ */ jsxs42(Column, { children: [
     label && /* @__PURE__ */ jsx66(Label2, { children: label }),
-    /* @__PURE__ */ jsxs41($8e59e948500a8fe1$export$b5d5cf8927ab7262, { ...props, className: cn(styles.root(), className), children: [
+    /* @__PURE__ */ jsxs42($8e59e948500a8fe1$export$b5d5cf8927ab7262, { ...props, className: cn(styles.root(), className), children: [
       /* @__PURE__ */ jsx66(Box, { className: styles.track(), children: /* @__PURE__ */ jsx66(Box, { className: styles.thumb() }) }),
       children
     ] })
@@ -39880,8 +39989,11 @@ function TabPanel2({ children, className, ...props }) {
 }
 
 // src/components/ThemeButton.tsx
-import { useState as useState17 } from "react";
-import { jsx as jsx68, jsxs as jsxs42 } from "react/jsx-runtime";
+import { useEffect as useEffect12, useRef as useRef7, useState as useState17 } from "react";
+import { jsx as jsx68, jsxs as jsxs43 } from "react/jsx-runtime";
+function getElement(target) {
+  return "current" in target ? target.current : target;
+}
 function applyTheme2(element, theme) {
   element.setAttribute("data-theme", theme);
   if (theme === "dark") {
@@ -39898,9 +40010,20 @@ function ThemeButton({
   ...props
 }) {
   const globalTheme = useTheme();
-  const [localTheme, setLocalTheme] = useState17("light");
+  const [localTheme, setLocalTheme] = useState17(null);
+  const initializedRef = useRef7(false);
   const isLocal = !!target;
-  const theme = isLocal ? localTheme : globalTheme.theme;
+  useEffect12(() => {
+    if (isLocal && target && !initializedRef.current) {
+      const element = getElement(target);
+      if (element) {
+        initializedRef.current = true;
+        setLocalTheme(globalTheme.theme);
+        applyTheme2(element, globalTheme.theme);
+      }
+    }
+  }, [isLocal, target, globalTheme.theme]);
+  const theme = isLocal ? localTheme ?? globalTheme.theme : globalTheme.theme;
   const transitions = useTransition(theme, {
     initial: { opacity: 1 },
     from: {
@@ -39915,8 +40038,8 @@ function ThemeButton({
   });
   function handleClick(e) {
     const newTheme = theme === "light" ? "dark" : "light";
-    if (isLocal) {
-      const element = "current" in target ? target.current : target;
+    if (isLocal && target) {
+      const element = getElement(target);
       if (element) {
         applyTheme2(element, newTheme);
         setLocalTheme(newTheme);
@@ -39926,7 +40049,7 @@ function ThemeButton({
     }
     onPress?.(e);
   }
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43(
     Button2,
     {
       ...props,
@@ -39948,10 +40071,10 @@ function ThemeButton({
 }
 
 // src/components/Toggle.tsx
-import { Fragment as Fragment15, jsx as jsx69, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx69, jsxs as jsxs44 } from "react/jsx-runtime";
 function Toggle({ label, children, className, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ jsxs43(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs44(Fragment16, { children: [
     label && /* @__PURE__ */ jsx69(Label2, { children: label }),
     /* @__PURE__ */ jsx69(
       $efde0372d7a700fe$export$d2b052e7b4be1756,
@@ -39972,7 +40095,7 @@ function Toggle({ label, children, className, ...props }) {
 }
 
 // src/components/ToggleGroup.tsx
-import { jsx as jsx70, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs45 } from "react/jsx-runtime";
 function ToggleGroup({
   label,
   value,
@@ -39991,7 +40114,7 @@ function ToggleGroup({
     onSelectionChange?.(keys);
     onChange?.(Array.from(keys).map((k) => k.toString()));
   };
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     $eaf9e70818b436db$export$67ea30858aaf75e3,
     {
       ...props,