@umami/react-zen 0.220.0 → 0.222.0

package/dist/index.mjs

@@ -31493,6 +31493,373 @@ function getCssColorValue(value) {
   }
   return void 0;
 }
+var widthMap = {
+  // Spacing scale
+  "0": "w-0",
+  px: "w-px",
+  "0.5": "w-0.5",
+  "1": "w-1",
+  "1.5": "w-1.5",
+  "2": "w-2",
+  "2.5": "w-2.5",
+  "3": "w-3",
+  "3.5": "w-3.5",
+  "4": "w-4",
+  "5": "w-5",
+  "6": "w-6",
+  "7": "w-7",
+  "8": "w-8",
+  "9": "w-9",
+  "10": "w-10",
+  "11": "w-11",
+  "12": "w-12",
+  "14": "w-14",
+  "16": "w-16",
+  "20": "w-20",
+  "24": "w-24",
+  "28": "w-28",
+  "32": "w-32",
+  "36": "w-36",
+  "40": "w-40",
+  "44": "w-44",
+  "48": "w-48",
+  "52": "w-52",
+  "56": "w-56",
+  "60": "w-60",
+  "64": "w-64",
+  "72": "w-72",
+  "80": "w-80",
+  "96": "w-96",
+  // Fractions
+  "1/2": "w-1/2",
+  "1/3": "w-1/3",
+  "2/3": "w-2/3",
+  "1/4": "w-1/4",
+  "2/4": "w-2/4",
+  "3/4": "w-3/4",
+  "1/5": "w-1/5",
+  "2/5": "w-2/5",
+  "3/5": "w-3/5",
+  "4/5": "w-4/5",
+  "1/6": "w-1/6",
+  "2/6": "w-2/6",
+  "3/6": "w-3/6",
+  "4/6": "w-4/6",
+  "5/6": "w-5/6",
+  "1/12": "w-1/12",
+  "2/12": "w-2/12",
+  "3/12": "w-3/12",
+  "4/12": "w-4/12",
+  "5/12": "w-5/12",
+  "6/12": "w-6/12",
+  "7/12": "w-7/12",
+  "8/12": "w-8/12",
+  "9/12": "w-9/12",
+  "10/12": "w-10/12",
+  "11/12": "w-11/12",
+  // Special values
+  auto: "w-auto",
+  full: "w-full",
+  screen: "w-screen",
+  svw: "w-svw",
+  lvw: "w-lvw",
+  dvw: "w-dvw",
+  min: "w-min",
+  max: "w-max",
+  fit: "w-fit"
+};
+var heightMap = {
+  // Spacing scale
+  "0": "h-0",
+  px: "h-px",
+  "0.5": "h-0.5",
+  "1": "h-1",
+  "1.5": "h-1.5",
+  "2": "h-2",
+  "2.5": "h-2.5",
+  "3": "h-3",
+  "3.5": "h-3.5",
+  "4": "h-4",
+  "5": "h-5",
+  "6": "h-6",
+  "7": "h-7",
+  "8": "h-8",
+  "9": "h-9",
+  "10": "h-10",
+  "11": "h-11",
+  "12": "h-12",
+  "14": "h-14",
+  "16": "h-16",
+  "20": "h-20",
+  "24": "h-24",
+  "28": "h-28",
+  "32": "h-32",
+  "36": "h-36",
+  "40": "h-40",
+  "44": "h-44",
+  "48": "h-48",
+  "52": "h-52",
+  "56": "h-56",
+  "60": "h-60",
+  "64": "h-64",
+  "72": "h-72",
+  "80": "h-80",
+  "96": "h-96",
+  // Fractions
+  "1/2": "h-1/2",
+  "1/3": "h-1/3",
+  "2/3": "h-2/3",
+  "1/4": "h-1/4",
+  "2/4": "h-2/4",
+  "3/4": "h-3/4",
+  "1/5": "h-1/5",
+  "2/5": "h-2/5",
+  "3/5": "h-3/5",
+  "4/5": "h-4/5",
+  "1/6": "h-1/6",
+  "2/6": "h-2/6",
+  "3/6": "h-3/6",
+  "4/6": "h-4/6",
+  "5/6": "h-5/6",
+  // Special values
+  auto: "h-auto",
+  full: "h-full",
+  screen: "h-screen",
+  svh: "h-svh",
+  lvh: "h-lvh",
+  dvh: "h-dvh",
+  min: "h-min",
+  max: "h-max",
+  fit: "h-fit"
+};
+var minWidthMap = {
+  "0": "min-w-0",
+  px: "min-w-px",
+  "0.5": "min-w-0.5",
+  "1": "min-w-1",
+  "1.5": "min-w-1.5",
+  "2": "min-w-2",
+  "2.5": "min-w-2.5",
+  "3": "min-w-3",
+  "3.5": "min-w-3.5",
+  "4": "min-w-4",
+  "5": "min-w-5",
+  "6": "min-w-6",
+  "7": "min-w-7",
+  "8": "min-w-8",
+  "9": "min-w-9",
+  "10": "min-w-10",
+  "11": "min-w-11",
+  "12": "min-w-12",
+  "14": "min-w-14",
+  "16": "min-w-16",
+  "20": "min-w-20",
+  "24": "min-w-24",
+  "28": "min-w-28",
+  "32": "min-w-32",
+  "36": "min-w-36",
+  "40": "min-w-40",
+  "44": "min-w-44",
+  "48": "min-w-48",
+  "52": "min-w-52",
+  "56": "min-w-56",
+  "60": "min-w-60",
+  "64": "min-w-64",
+  "72": "min-w-72",
+  "80": "min-w-80",
+  "96": "min-w-96",
+  full: "min-w-full",
+  min: "min-w-min",
+  max: "min-w-max",
+  fit: "min-w-fit"
+};
+var maxWidthMap = {
+  "0": "max-w-0",
+  px: "max-w-px",
+  "0.5": "max-w-0.5",
+  "1": "max-w-1",
+  "1.5": "max-w-1.5",
+  "2": "max-w-2",
+  "2.5": "max-w-2.5",
+  "3": "max-w-3",
+  "3.5": "max-w-3.5",
+  "4": "max-w-4",
+  "5": "max-w-5",
+  "6": "max-w-6",
+  "7": "max-w-7",
+  "8": "max-w-8",
+  "9": "max-w-9",
+  "10": "max-w-10",
+  "11": "max-w-11",
+  "12": "max-w-12",
+  "14": "max-w-14",
+  "16": "max-w-16",
+  "20": "max-w-20",
+  "24": "max-w-24",
+  "28": "max-w-28",
+  "32": "max-w-32",
+  "36": "max-w-36",
+  "40": "max-w-40",
+  "44": "max-w-44",
+  "48": "max-w-48",
+  "52": "max-w-52",
+  "56": "max-w-56",
+  "60": "max-w-60",
+  "64": "max-w-64",
+  "72": "max-w-72",
+  "80": "max-w-80",
+  "96": "max-w-96",
+  // Container sizes
+  none: "max-w-none",
+  xs: "max-w-xs",
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  "7xl": "max-w-7xl",
+  full: "max-w-full",
+  min: "max-w-min",
+  max: "max-w-max",
+  fit: "max-w-fit",
+  prose: "max-w-prose",
+  "screen-sm": "max-w-screen-sm",
+  "screen-md": "max-w-screen-md",
+  "screen-lg": "max-w-screen-lg",
+  "screen-xl": "max-w-screen-xl",
+  "screen-2xl": "max-w-screen-2xl"
+};
+var minHeightMap = {
+  "0": "min-h-0",
+  px: "min-h-px",
+  "0.5": "min-h-0.5",
+  "1": "min-h-1",
+  "1.5": "min-h-1.5",
+  "2": "min-h-2",
+  "2.5": "min-h-2.5",
+  "3": "min-h-3",
+  "3.5": "min-h-3.5",
+  "4": "min-h-4",
+  "5": "min-h-5",
+  "6": "min-h-6",
+  "7": "min-h-7",
+  "8": "min-h-8",
+  "9": "min-h-9",
+  "10": "min-h-10",
+  "11": "min-h-11",
+  "12": "min-h-12",
+  "14": "min-h-14",
+  "16": "min-h-16",
+  "20": "min-h-20",
+  "24": "min-h-24",
+  "28": "min-h-28",
+  "32": "min-h-32",
+  "36": "min-h-36",
+  "40": "min-h-40",
+  "44": "min-h-44",
+  "48": "min-h-48",
+  "52": "min-h-52",
+  "56": "min-h-56",
+  "60": "min-h-60",
+  "64": "min-h-64",
+  "72": "min-h-72",
+  "80": "min-h-80",
+  "96": "min-h-96",
+  full: "min-h-full",
+  screen: "min-h-screen",
+  svh: "min-h-svh",
+  lvh: "min-h-lvh",
+  dvh: "min-h-dvh",
+  min: "min-h-min",
+  max: "min-h-max",
+  fit: "min-h-fit"
+};
+var maxHeightMap = {
+  "0": "max-h-0",
+  px: "max-h-px",
+  "0.5": "max-h-0.5",
+  "1": "max-h-1",
+  "1.5": "max-h-1.5",
+  "2": "max-h-2",
+  "2.5": "max-h-2.5",
+  "3": "max-h-3",
+  "3.5": "max-h-3.5",
+  "4": "max-h-4",
+  "5": "max-h-5",
+  "6": "max-h-6",
+  "7": "max-h-7",
+  "8": "max-h-8",
+  "9": "max-h-9",
+  "10": "max-h-10",
+  "11": "max-h-11",
+  "12": "max-h-12",
+  "14": "max-h-14",
+  "16": "max-h-16",
+  "20": "max-h-20",
+  "24": "max-h-24",
+  "28": "max-h-28",
+  "32": "max-h-32",
+  "36": "max-h-36",
+  "40": "max-h-40",
+  "44": "max-h-44",
+  "48": "max-h-48",
+  "52": "max-h-52",
+  "56": "max-h-56",
+  "60": "max-h-60",
+  "64": "max-h-64",
+  "72": "max-h-72",
+  "80": "max-h-80",
+  "96": "max-h-96",
+  none: "max-h-none",
+  full: "max-h-full",
+  screen: "max-h-screen",
+  svh: "max-h-svh",
+  lvh: "max-h-lvh",
+  dvh: "max-h-dvh",
+  min: "max-h-min",
+  max: "max-h-max",
+  fit: "max-h-fit"
+};
+function mapWidth(value) {
+  return mapResponsive(value, (v) => widthMap[v]);
+}
+function mapHeight(value) {
+  return mapResponsive(value, (v) => heightMap[v]);
+}
+function mapMinWidth(value) {
+  return mapResponsive(value, (v) => minWidthMap[v]);
+}
+function mapMaxWidth(value) {
+  return mapResponsive(value, (v) => maxWidthMap[v]);
+}
+function mapMinHeight(value) {
+  return mapResponsive(value, (v) => minHeightMap[v]);
+}
+function mapMaxHeight(value) {
+  return mapResponsive(value, (v) => maxHeightMap[v]);
+}
+function isWidthPreset(value) {
+  return value in widthMap;
+}
+function isHeightPreset(value) {
+  return value in heightMap;
+}
+function isMinWidthPreset(value) {
+  return value in minWidthMap;
+}
+function isMaxWidthPreset(value) {
+  return value in maxWidthMap;
+}
+function isMinHeightPreset(value) {
+  return value in minHeightMap;
+}
+function isMaxHeightPreset(value) {
+  return value in maxHeightMap;
+}
 
 // src/components/Icon.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -31728,6 +32095,11 @@ var Box = forwardRef3(function Box2({
   ...props
 }, ref) {
   const Component = as;
+  const getSizingStyle = (value, isPreset) => {
+    if (!value) return void 0;
+    if (typeof value === "string" && !isPreset(value)) return value;
+    return void 0;
+  };
   const classes = cn(
     mapDisplay(display),
     mapTextColor(toStringValue(color)),
@@ -31753,6 +32125,12 @@ var Box = forwardRef3(function Box2({
     mapMargin(marginRight, "r"),
     mapMargin(marginBottom, "b"),
     mapMargin(marginLeft, "l"),
+    mapWidth(width),
+    mapMinWidth(minWidth),
+    mapMaxWidth(maxWidth),
+    mapHeight(height),
+    mapMinHeight(minHeight),
+    mapMaxHeight(maxHeight),
     mapPosition(position),
     mapTextAlign(textAlign),
     mapOverflow(overflow),
@@ -31765,14 +32143,20 @@ var Box = forwardRef3(function Box2({
     theme && `${theme}-theme`,
     className
   );
+  const widthStyle = getSizingStyle(width, isWidthPreset);
+  const minWidthStyle = getSizingStyle(minWidth, isMinWidthPreset);
+  const maxWidthStyle = getSizingStyle(maxWidth, isMaxWidthPreset);
+  const heightStyle = getSizingStyle(height, isHeightPreset);
+  const minHeightStyle = getSizingStyle(minHeight, isMinHeightPreset);
+  const maxHeightStyle = getSizingStyle(maxHeight, isMaxHeightPreset);
   const inlineStyles = {
     ...style,
-    ...width && { width },
-    ...minWidth && { minWidth },
-    ...maxWidth && { maxWidth },
-    ...height && { height },
-    ...minHeight && { minHeight },
-    ...maxHeight && { maxHeight },
+    ...widthStyle && { width: widthStyle },
+    ...minWidthStyle && { minWidth: minWidthStyle },
+    ...maxWidthStyle && { maxWidth: maxWidthStyle },
+    ...heightStyle && { height: heightStyle },
+    ...minHeightStyle && { minHeight: minHeightStyle },
+    ...maxHeightStyle && { maxHeight: maxHeightStyle },
     ...top && { top },
     ...right && { right },
     ...bottom && { bottom },
@@ -32521,10 +32905,70 @@ 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,
@@ -32543,12 +32987,13 @@ function Grid({
   children,
   ...props
 }) {
-  const isCustomColumns = typeof columns === "string" && !["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none", "subgrid"].includes(
-    columns
-  );
-  const isCustomRows = typeof rows === "string" && !["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none", "subgrid"].includes(
-    rows
-  );
+  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),
@@ -32559,8 +33004,9 @@ function Grid({
     mapGap(gapX, "x"),
     mapGap(gapY, "y"),
     mapGridAutoFlow(autoFlow),
-    !isCustomColumns && mapGridColumns(columns),
-    !isCustomRows && mapGridRows(rows),
+    !isCustomColumns && !hasResponsiveCustomColumns && mapGridColumns(columns),
+    !isCustomRows && !hasResponsiveCustomRows && mapGridRows(rows),
+    needsStyleTag && id,
     className
   );
   const inlineStyles = {
@@ -32570,7 +33016,10 @@ function Grid({
     ...areas && { gridTemplateAreas: areas }
   };
   const hasInlineStyles = isCustomColumns || isCustomRows || areas || style && Object.keys(style).length > 0;
-  return /* @__PURE__ */ jsx26(Box, { ...props, className: classes, style: hasInlineStyles ? inlineStyles : void 0, children });
+  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
@@ -32588,7 +33037,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(
@@ -32601,7 +33050,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);
@@ -32697,7 +33146,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 = [],
@@ -32725,7 +33174,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;
@@ -32756,7 +33205,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",
@@ -32771,7 +33220,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 })
@@ -32782,9 +33231,9 @@ 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__ */ jsxs15($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: cn("group", tooltip(), className), 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",
       {
@@ -34866,7 +35315,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,
@@ -34920,7 +35369,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,
       {
@@ -34957,7 +35406,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,
@@ -34973,7 +35422,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(
@@ -34992,7 +35441,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,
@@ -35014,7 +35463,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 }),
@@ -35034,7 +35483,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",
@@ -35047,7 +35496,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",
@@ -35067,7 +35516,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,
@@ -35075,7 +35524,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
   ] });
@@ -35108,7 +35557,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,
@@ -35159,7 +35608,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 }) })
   ] });
@@ -38917,7 +39366,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,
@@ -38933,8 +39382,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 })
     ] }),
@@ -39015,10 +39464,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 })
   ] });
@@ -39055,7 +39504,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,
@@ -39065,7 +39514,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
@@ -39104,7 +39553,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",
@@ -39117,7 +39566,7 @@ function Loading({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     Box,
     {
       ...props,
@@ -39135,7 +39584,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,
@@ -39170,7 +39619,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, {}) })
@@ -39193,7 +39642,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,
@@ -39249,7 +39698,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);
@@ -39277,8 +39726,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,
@@ -39314,7 +39763,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 }) });
@@ -39333,7 +39782,7 @@ function NavMenuGroup({
       setMinimized((state2) => !state2);
     }
   };
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     Column,
     {
       ...props,
@@ -39343,7 +39792,7 @@ function NavMenuGroup({
         allowMinimize && minimized && "[&_.navmenu-children]:hidden"
       ),
       children: [
-        /* @__PURE__ */ jsxs28(
+        /* @__PURE__ */ jsxs29(
           Row,
           {
             paddingY: "2",
@@ -39387,8 +39836,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",
@@ -39416,8 +39865,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",
@@ -39450,17 +39899,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",
@@ -39482,7 +39931,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 });
 }
@@ -39502,7 +39951,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 })
     ] });
@@ -39510,14 +39959,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",
@@ -39545,9 +39994,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",
@@ -39581,7 +40030,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,
@@ -39612,7 +40061,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,
@@ -39621,7 +40070,7 @@ function SearchField2({
         ...props,
         className: cn("relative", className),
         onChange: handleChange,
-        children: /* @__PURE__ */ jsxs36(
+        children: /* @__PURE__ */ jsxs37(
           $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
           {
             className: cn(
@@ -39649,7 +40098,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,
@@ -39682,7 +40131,7 @@ function Select2({
     setSearch("");
     onSearch?.("");
   };
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     $82d7e5349645de74$export$ef9b1a59e592288f,
     {
       "aria-label": "Select",
@@ -39693,11 +40142,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",
@@ -39744,7 +40193,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(
@@ -39768,7 +40217,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 })
   ] });
@@ -39780,7 +40229,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
@@ -39795,8 +40244,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,
@@ -39824,7 +40273,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 } });
@@ -39843,14 +40292,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 })
       ] });
@@ -39859,7 +40308,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",
@@ -39880,19 +40329,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
     ] })
@@ -39940,7 +40389,7 @@ function TabPanel2({ children, className, ...props }) {
 
 // src/components/ThemeButton.tsx
 import { useEffect as useEffect12, useRef as useRef7, useState as useState17 } from "react";
-import { jsx as jsx68, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs43 } from "react/jsx-runtime";
 function getElement(target) {
   return "current" in target ? target.current : target;
 }
@@ -39999,7 +40448,7 @@ function ThemeButton({
     }
     onPress?.(e);
   }
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43(
     Button2,
     {
       ...props,
@@ -40021,10 +40470,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,
@@ -40045,7 +40494,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,
@@ -40064,7 +40513,7 @@ function ToggleGroup({
     onSelectionChange?.(keys);
     onChange?.(Array.from(keys).map((k) => k.toString()));
   };
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     $eaf9e70818b436db$export$67ea30858aaf75e3,
     {
       ...props,