@umami/react-zen 0.190.0 → 0.192.0

package/dist/index.js

@@ -34,18 +34,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
 var require_use_sync_external_store_shim_production = __commonJS({
   "node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
-    var import_react198 = __toESM(require("react"));
-    var React5 = import_react198.default;
+    var import_react199 = __toESM(require("react"));
+    var React5 = import_react199.default;
     function is2(x, y) {
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is2;
-    var useState19 = React5.useState;
-    var useEffect12 = React5.useEffect;
+    var useState20 = React5.useState;
+    var useEffect13 = React5.useEffect;
     var useLayoutEffect3 = React5.useLayoutEffect;
     var useDebugValue = React5.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
-      var value = getSnapshot(), _useState = useState19({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      var value = getSnapshot(), _useState = useState20({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect3(
         function() {
           inst.value = value;
@@ -54,7 +54,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe, value, getSnapshot]
       );
-      useEffect12(
+      useEffect13(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe(function() {
@@ -87,7 +87,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
 // node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
 var require_use_sync_external_store_shim_development = __commonJS({
   "node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
-    var import_react198 = __toESM(require("react"));
+    var import_react199 = __toESM(require("react"));
     (function() {
       function is2(x, y) {
         return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
@@ -103,7 +103,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState19({
+        cachedValue = useState20({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -115,7 +115,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe, value, getSnapshot]
         );
-        useEffect12(
+        useEffect13(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe(function() {
@@ -141,7 +141,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_react198.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState19 = 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_react199.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState20 = 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());
     })();
@@ -241,6 +241,7 @@ __export(index_exports, {
   ConfirmationDialog: () => ConfirmationDialog,
   Container: () => Container,
   CopyButton: () => CopyButton,
+  DataCard: () => DataCard,
   DataColumn: () => DataColumn,
   DataTable: () => DataTable,
   Dialog: () => Dialog2,
@@ -328,6 +329,7 @@ __export(index_exports, {
   TooltipBubble: () => TooltipBubble,
   TooltipTrigger: () => $4e3b923658d69c60$export$8c610744efcf8a1d,
   ZenProvider: () => ZenProvider,
+  useBreakpoint: () => useBreakpoint,
   useDebounce: () => useDebounce,
   useNavigationContext: () => useNavigationContext,
   useTheme: () => useTheme,
@@ -26617,7 +26619,7 @@ function createFormControl(props = {}) {
     state: createSubject()
   };
   const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
-  const debounce = (callback) => (wait) => {
+  const debounce2 = (callback) => (wait) => {
     clearTimeout(timer);
     timer = setTimeout(callback, wait);
   };
@@ -26730,7 +26732,7 @@ function createFormControl(props = {}) {
     const previousFieldError = get(_formState.errors, name);
     const shouldUpdateValid = (_proxyFormState.isValid || _proxySubscribeFormState.isValid) && isBoolean(isValid) && _formState.isValid !== isValid;
     if (_options.delayError && error) {
-      delayErrorCallback = debounce(() => updateErrors(name, error));
+      delayErrorCallback = debounce2(() => updateErrors(name, error));
       delayErrorCallback(_options.delayError);
     } else {
       clearTimeout(timer);
@@ -32565,8 +32567,58 @@ function useInitTheme(preferred, colorScheme) {
   }, [preferred, colorScheme, initTheme]);
 }
 
-// src/components/Accordion.tsx
+// src/components/hooks/useBreakpoint.ts
 var import_react182 = require("react");
+
+// src/lib/utils.ts
+function debounce(func, delay) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = window.setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+}
+function mapIdProperty(data) {
+  return data.length && data?.[0]?.id === void 0 ? data.map((row, id) => ({ ...row, id })) : data;
+}
+
+// src/components/hooks/useBreakpoint.ts
+var breakpoints = {
+  xs: [0, 576],
+  sm: [576, 768],
+  md: [768, 992],
+  lg: [992, 1200],
+  xl: [1200, Infinity]
+};
+var DEBOUNCE_DELAY_MS = 150;
+function useBreakpoint() {
+  const [breakpoint, setBreakpoint] = (0, import_react182.useState)(null);
+  const calculateBreakpoint = (0, import_react182.useCallback)(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const width = window.innerWidth;
+    const currentBreakpointKey = Object.keys(breakpoints).find((key) => {
+      const [min, max] = breakpoints[key];
+      return width >= min && width < max;
+    }) || "xs";
+    setBreakpoint(currentBreakpointKey);
+  }, []);
+  (0, import_react182.useEffect)(() => {
+    calculateBreakpoint();
+    const debouncedResize = debounce(calculateBreakpoint, DEBOUNCE_DELAY_MS);
+    window.addEventListener("resize", debouncedResize);
+    return () => {
+      window.removeEventListener("resize", debouncedResize);
+    };
+  }, [calculateBreakpoint]);
+  return breakpoint;
+}
+
+// src/components/Accordion.tsx
+var import_react183 = require("react");
 var import_classnames14 = __toESM(require_classnames());
 
 // src/components/Text.tsx
@@ -32640,7 +32692,7 @@ function AccordionItem({
   ...props
 }) {
   const [trigger, panel] = children;
-  const [expanded, setExpanded] = (0, import_react182.useState)(defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react183.useState)(defaultExpanded);
   const handleExpandedChange = (isExpanded) => {
     requestAnimationFrame(() => setExpanded(isExpanded));
   };
@@ -32851,7 +32903,7 @@ function Checkbox2({ label, className, children, ...props }) {
 var import_classnames22 = __toESM(require_classnames());
 
 // src/components/List.tsx
-var import_react183 = require("react");
+var import_react184 = require("react");
 var import_classnames20 = __toESM(require_classnames());
 
 // src/lib/constants.ts
@@ -32943,7 +32995,7 @@ function List({
         children: children || items?.map((item) => {
           const id2 = item[idProperty] || item.toString();
           const label2 = item[labelProperty] || item.toString();
-          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react183.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react184.Fragment, { children: [
             item[separatorProperty] && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ListItem, { id: id2, className: List_default.item, children: label2 })
           ] }, id2);
@@ -33063,15 +33115,15 @@ function Code({ asChild, children }) {
 }
 
 // src/components/ConfirmationDialog.tsx
-var import_react186 = require("react");
+var import_react187 = require("react");
 var import_classnames25 = __toESM(require_classnames());
 
 // src/components/TextField.tsx
-var import_react185 = require("react");
+var import_react186 = require("react");
 var import_classnames24 = __toESM(require_classnames());
 
 // src/components/CopyButton.tsx
-var import_react184 = require("react");
+var import_react185 = require("react");
 var import_classnames23 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\CopyButton.module.css
@@ -33081,8 +33133,8 @@ var CopyButton_default = { "icon": "CopyButton_icon__YTM2Y", "copy-button": "Cop
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var TIMEOUT = 2e3;
 function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
-  const [copied, setCopied] = (0, import_react184.useState)(false);
-  const ref = (0, import_react184.useRef)(timeout);
+  const [copied, setCopied] = (0, import_react185.useState)(false);
+  const ref = (0, import_react185.useRef)(timeout);
   const handleCopy = async () => {
     if (value) {
       await navigator.clipboard.writeText(value);
@@ -33114,13 +33166,13 @@ function TextField2({
   children,
   ...props
 }) {
-  const [inputValue, setInputValue] = (0, import_react185.useState)(defaultValue || value);
+  const [inputValue, setInputValue] = (0, import_react186.useState)(defaultValue || value);
   const Component = asTextArea ? $216918bed6669f72$export$f5c9f3c2c4054eec : $3985021b0ad6602f$export$f5b8910cec6cf069;
   const handleChange = (value2) => {
     setInputValue(value2);
     return onChange?.(value2);
   };
-  (0, import_react185.useEffect)(() => {
+  (0, import_react186.useEffect)(() => {
     setInputValue(value);
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
@@ -33163,7 +33215,7 @@ function ConfirmationDialog({
   children,
   ...props
 }) {
-  const [canSave, setCanSave] = (0, import_react186.useState)(false);
+  const [canSave, setCanSave] = (0, import_react187.useState)(false);
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
@@ -33218,9 +33270,21 @@ function Container({
   );
 }
 
+// src/components/DataCard.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function DataCard({ data = [], ...props }) {
+  const rows = mapIdProperty(data);
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Grid, { width: "100%", ...props, children: rows.map((row) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Grid, { columns: "180px 1fr", border: "bottom", gapX: "3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Row, { paddingY: "3", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { size: "3", weight: "bold", children: row?.label }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Row, { paddingY: "3", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { size: "3", children: row?.value }) })
+    ] }, row?.id);
+  }) });
+}
+
 // src/components/DataTable.tsx
 var import_classnames28 = __toESM(require_classnames());
-var import_react187 = require("react");
+var import_react188 = require("react");
 
 // src/components/Table.tsx
 var import_classnames27 = __toESM(require_classnames());
@@ -33229,13 +33293,13 @@ var import_classnames27 = __toESM(require_classnames());
 var Table_default = { "table": "Table_table__NWMxN", "header": "Table_header__YzdmY", "body": "Table_body__Nzg5M", "row": "Table_row__ZWFmM", "column": "Table_column__YTdhZ", "cell": "Table_cell__MjU3N", "start": "Table_start__ZGIyN", "center": "Table_center__Yzg5M", "end": "Table_end__YjA1Y" };
 
 // src/components/Table.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var gridTemplateColumns = "repeat(auto-fit, minmax(140px, 1fr))";
 function Table2({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)($1910c06f0ca9905e$export$54ec01a60f47d33d, { "aria-label": "Table", ...props, className: (0, import_classnames27.default)(Table_default.table, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)($1910c06f0ca9905e$export$54ec01a60f47d33d, { "aria-label": "Table", ...props, className: (0, import_classnames27.default)(Table_default.table, className), children });
 }
 function TableHeader({ children, className, style, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     $1910c06f0ca9905e$export$f850895b287ef28e,
     {
       ...props,
@@ -33246,10 +33310,10 @@ function TableHeader({ children, className, style, ...props }) {
   );
 }
 function TableBody({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames27.default)(Table_default.body, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames27.default)(Table_default.body, className), children });
 }
 function TableRow({ children, className, style, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     $1910c06f0ca9905e$export$b59bdbef9ce70de2,
     {
       ...props,
@@ -33260,7 +33324,7 @@ function TableRow({ children, className, style, ...props }) {
   );
 }
 function TableColumn({ children, className, align, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     $1910c06f0ca9905e$export$816b5d811295e6bc,
     {
       ...props,
@@ -33271,19 +33335,19 @@ function TableColumn({ children, className, align, ...props }) {
   );
 }
 function TableCell({ children, className, align, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames27.default)(Table_default.cell, className, align && Table_default[align]), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames27.default)(Table_default.cell, className, align && Table_default[align]), children });
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\DataTable.module.css
 var DataTable_default = { "datatable": "DataTable_datatable__MWRkN", "cell": "DataTable_cell__MmMyM" };
 
 // src/components/DataTable.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var import_react188 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react189 = require("react");
 function DataTable({ data = [], className, children, ...props }) {
-  const items = data.length && data?.[0]?.id === void 0 ? data.map((row, id) => ({ ...row, id })) : data;
+  const rows = mapIdProperty(data);
   const widths = [];
-  const columns = import_react187.Children.map(children, (child) => {
+  const columns = import_react188.Children.map(children, (child) => {
     if (child) {
       widths.push(child?.props?.width || "1fr");
       return { ...child?.props };
@@ -33291,27 +33355,27 @@ function DataTable({ data = [], className, children, ...props }) {
     return null;
   })?.filter((n) => n);
   const gridTemplateColumns2 = widths.join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Table2, { ...props, className: (0, import_classnames28.default)(DataTable_default.datatable, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableHeader, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, label, as, hidden, width, ...columnProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Table2, { ...props, className: (0, import_classnames28.default)(DataTable_default.datatable, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TableHeader, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, label, as, hidden, width, ...columnProps }) => {
       if (hidden) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_react188.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
+      return /* @__PURE__ */ (0, import_react189.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableBody, { children: items.map((row, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TableBody, { children: rows.map((row, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
         if (hidden) {
           return null;
         }
         const value = typeof children2 === "function" ? children2(row, index) : children2 || row[id];
-        return /* @__PURE__ */ (0, import_react188.createElement)(
+        return /* @__PURE__ */ (0, import_react189.createElement)(
           TableCell,
           {
             ...cellProps,
             key: id,
             className: (0, import_classnames28.default)(DataTable_default.cell, className2)
           },
-          as ? (0, import_react187.createElement)(as, {}, value) : value
+          as ? (0, import_react188.createElement)(as, {}, value) : value
         );
       }) }, index);
     }) })
@@ -33328,17 +33392,17 @@ var import_classnames29 = __toESM(require_classnames());
 var Dots_default = { "dots": "Dots_dots__ZTc4M", "size-sm": "Dots_size-sm__YmFiM", "size-md": "Dots_size-md__MThiY", "size-lg": "Dots_size-lg__MTNlO", "dot": "Dots_dot__YTQ4Y", "dots-blink": "Dots_dots-blink__MjFjZ" };
 
 // src/components/Dots.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Dots({ size = "md", className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ...props, className: (0, import_classnames29.default)(Dots_default.dots, className, Dots_default[`size-${size}`]), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: Dots_default.dot }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: Dots_default.dot }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: Dots_default.dot })
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ...props, className: (0, import_classnames29.default)(Dots_default.dots, className, Dots_default[`size-${size}`]), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: Dots_default.dot }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: Dots_default.dot }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: Dots_default.dot })
   ] });
 }
 
 // src/components/FloatingTooltip.tsx
-var import_react189 = require("react");
+var import_react190 = require("react");
 var import_classnames31 = __toESM(require_classnames());
 
 // src/components/Tooltip.tsx
@@ -33348,14 +33412,14 @@ var import_classnames30 = __toESM(require_classnames());
 var Tooltip_default = { "tooltip": "Tooltip_tooltip__YmY4Z", "bubble": "Tooltip_bubble__MWE0N", "arrow": "Tooltip_arrow__OGM1M", "slide": "Tooltip_slide__MGVmY" };
 
 // src/components/Tooltip.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function Tooltip2({ children, className, showArrow, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames30.default)(Tooltip_default.tooltip, className), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TooltipBubble, { showArrow, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames30.default)(Tooltip_default.tooltip, className), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TooltipBubble, { showArrow, children }) });
 }
 function TooltipBubble({ showArrow, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ...props, children: [
-    showArrow && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: Tooltip_default.bubble, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ...props, children: [
+    showArrow && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: Tooltip_default.bubble, children })
   ] });
 }
 
@@ -33363,10 +33427,10 @@ function TooltipBubble({ showArrow, children, ...props }) {
 var FloatingTooltip_default = { "floating": "FloatingTooltip_floating__ZjM4N" };
 
 // src/components/FloatingTooltip.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function FloatingTooltip({ className, style, children, ...props }) {
-  const [position, setPosition] = (0, import_react189.useState)({ x: -1e3, y: -1e3 });
-  (0, import_react189.useEffect)(() => {
+  const [position, setPosition] = (0, import_react190.useState)({ x: -1e3, y: -1e3 });
+  (0, import_react190.useEffect)(() => {
     const handler = (e) => {
       setPosition({ x: e.clientX, y: e.clientY });
     };
@@ -33375,7 +33439,7 @@ function FloatingTooltip({ className, style, children, ...props }) {
       document.removeEventListener("mousemove", handler);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     TooltipBubble,
     {
       ...props,
@@ -33393,7 +33457,7 @@ var import_classnames32 = __toESM(require_classnames());
 var Heading_default = { "heading": "Heading_heading__MGIyZ" };
 
 // src/components/Heading.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function Heading2({
   size = "3",
   weight,
@@ -33410,7 +33474,7 @@ function Heading2({
     fontWeight: weight,
     letterSpacing: spacing
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     Box,
     {
       ...props,
@@ -33422,13 +33486,13 @@ function Heading2({
 }
 
 // src/components/HoverTrigger.tsx
-var import_react190 = require("react");
+var import_react191 = require("react");
 
 // css-modules:E:\dev\umami-react-zen\src\components\HoverTrigger.module.css
 var HoverTrigger_default = { "wrapper": "HoverTrigger_wrapper__NGFlN" };
 
 // src/components/HoverTrigger.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var CLOSE_DELAY = 500;
 function HoverTrigger({
   isOpen,
@@ -33438,12 +33502,12 @@ function HoverTrigger({
   children
 }) {
   const [triggerElement, popupElement] = children;
-  const triggerRef = (0, import_react190.useRef)(null);
-  const [open, setOpen] = (0, import_react190.useState)(isOpen);
-  const isOverMenu = (0, import_react190.useRef)(false);
-  const isOverButton = (0, import_react190.useRef)(false);
-  const timeout = (0, import_react190.useRef)(null);
-  (0, import_react190.useEffect)(() => {
+  const triggerRef = (0, import_react191.useRef)(null);
+  const [open, setOpen] = (0, import_react191.useState)(isOpen);
+  const isOverMenu = (0, import_react191.useRef)(false);
+  const isOverButton = (0, import_react191.useRef)(false);
+  const timeout = (0, import_react191.useRef)(null);
+  (0, import_react191.useEffect)(() => {
     if (isOpen !== open) {
       setOpen(isOpen);
     }
@@ -33479,9 +33543,9 @@ function HoverTrigger({
       }
     }, closeDelay);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: triggerElement }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Popover2, { isOpen: open, isNonModal: true, triggerRef, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: triggerElement }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Popover2, { isOpen: open, isNonModal: true, triggerRef, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "div",
       {
         className: HoverTrigger_default.wrapper,
@@ -33494,7 +33558,7 @@ function HoverTrigger({
 }
 
 // src/components/IconLabel.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function IconLabel({
   icon,
   label,
@@ -33504,9 +33568,9 @@ function IconLabel({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Row, { alignItems: "center", gap: true, width: "100%", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon2, { ...iconProps, children: icon }),
-    showLabel && label && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { ...labelProps, children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Row, { alignItems: "center", gap: true, width: "100%", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon2, { ...iconProps, children: icon }),
+    showLabel && label && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { ...labelProps, children: label }),
     showLabel && children
   ] });
 }
@@ -33518,7 +33582,7 @@ var import_classnames33 = __toESM(require_classnames());
 var Image_default = { "image": "Image_image__M2EyN", "centered": "Image_centered__ZDFhM", "fill": "Image_fill__YWJhZ", "contain": "Image_contain__ZjAyN", "cover": "Image_cover__ODA4Y", "none": "Image_none__YTdiZ", "scale-down": "Image_scale-down__ODNlN" };
 
 // src/components/Image.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Image({
   src,
   alt,
@@ -33531,7 +33595,7 @@ function Image({
   ...props
 }) {
   const [classes, styleProps] = useDesignProps({ borderRadius, shadow });
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "img",
     {
       ...props,
@@ -33551,14 +33615,14 @@ function Image({
 }
 
 // src/components/InlineEditField.tsx
-var import_react191 = require("react");
+var import_react192 = require("react");
 var import_classnames34 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\InlineEditField.module.css
 var InlineEditField_default = { "edit": "InlineEditField_edit__MDliZ", "icon": "InlineEditField_icon__ZjE1O" };
 
 // src/components/InlineEditField.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function InlineEditField({
   name = "",
   value: defaultValue = "",
@@ -33570,8 +33634,8 @@ function InlineEditField({
   onCancel,
   ...props
 }) {
-  const [value, setValue] = (0, import_react191.useState)(defaultValue);
-  const [edit, setEdit] = (0, import_react191.useState)(defaultEdit);
+  const [value, setValue] = (0, import_react192.useState)(defaultValue);
+  const [edit, setEdit] = (0, import_react192.useState)(defaultEdit);
   const handleEdit = () => setEdit(true);
   const handleChange = (e) => {
     const val = e.target.value;
@@ -33582,7 +33646,7 @@ function InlineEditField({
     setEdit(false);
     onCommit?.(value);
   };
-  const handleCancel = (0, import_react191.useCallback)(() => {
+  const handleCancel = (0, import_react192.useCallback)(() => {
     setEdit(false);
     setValue(defaultValue);
     onCancel?.();
@@ -33594,7 +33658,7 @@ function InlineEditField({
       handleCancel();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "div",
     {
       "aria-label": "Edit",
@@ -33603,8 +33667,8 @@ function InlineEditField({
       onClick: handleEdit,
       children: [
         !edit && children,
-        !edit && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon2, { className: InlineEditField_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SquarePen, {}) }),
-        edit && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        !edit && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon2, { className: InlineEditField_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SquarePen, {}) }),
+        edit && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           TextField2,
           {
             name,
@@ -33627,7 +33691,7 @@ var import_classnames35 = __toESM(require_classnames());
 var Loading_default = { "loading": "Loading_loading__M2YyY", "absolute": "Loading_absolute__N2IxN", "center": "Loading_center__ZmUzM", "inline": "Loading_inline__MTFhM" };
 
 // src/components/Loading.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function Loading({
   size,
   placement = "inline",
@@ -33635,9 +33699,9 @@ function Loading({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ...props, className: (0, import_classnames35.default)(Loading_default.loading, className, Loading_default[placement]), children: [
-    icon === "dots" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Dots, { size }),
-    icon === "spinner" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Spinner, { size })
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { ...props, className: (0, import_classnames35.default)(Loading_default.loading, className, Loading_default[placement]), children: [
+    icon === "dots" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Dots, { size }),
+    icon === "spinner" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Spinner, { size })
   ] });
 }
 
@@ -33648,9 +33712,9 @@ var import_classnames36 = __toESM(require_classnames());
 var Menu_default = { "menu": "Menu_menu__YTM5N", "separator": "Menu_separator__YjFhN", "section": "Menu_section__NWFlM", "header": "Menu_header__YzJkN", "item": "Menu_item__NGRkO", "checkmark": "Menu_checkmark__MWQ1O", "hideCheckmark": "Menu_hideCheckmark__YzBhM", "label": "Menu_label__NGMxM", "content": "Menu_content__MTA2O" };
 
 // src/components/Menu.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function Menu2({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)($3674c52c6b3c5bce$export$d9b273488cd8ce6f, { ...props, className: (0, import_classnames36.default)(Menu_default.menu, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($3674c52c6b3c5bce$export$d9b273488cd8ce6f, { ...props, className: (0, import_classnames36.default)(Menu_default.menu, className), children });
 }
 function MenuItem2({
   icon,
@@ -33661,14 +33725,14 @@ function MenuItem2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames36.default)(Menu_default.item, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(IconLabel, { icon, label, children }),
-    showChecked && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon2, { "aria-hidden": "true", className: Menu_default.checkmark, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Check, {}) }),
-    showSubMenuIcon && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon2, { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ChevronRight, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames36.default)(Menu_default.item, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(IconLabel, { icon, label, children }),
+    showChecked && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon2, { "aria-hidden": "true", className: Menu_default.checkmark, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Check, {}) }),
+    showSubMenuIcon && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon2, { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ChevronRight, {}) })
   ] });
 }
 function MenuSeparator({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { ...props, className: (0, import_classnames36.default)(Menu_default.separator, className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { ...props, className: (0, import_classnames36.default)(Menu_default.separator, className) });
 }
 function MenuSection({
   title,
@@ -33682,9 +33746,9 @@ function MenuSection({
     maxHeight,
     overflow: maxHeight ? "auto" : void 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)($72a5793c14baf454$export$8b251419efc915eb, { className: Menu_default.header, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($72a5793c14baf454$export$8b251419efc915eb, { className: Menu_default.header, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       $3674c52c6b3c5bce$export$4b1545b4f2016d26,
       {
         ...props,
@@ -33696,7 +33760,7 @@ function MenuSection({
   ] });
 }
 function SubMenuTrigger({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)($3674c52c6b3c5bce$export$ecabc99eeffab7ca, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($3674c52c6b3c5bce$export$ecabc99eeffab7ca, { ...props, children });
 }
 
 // src/components/Modal.tsx
@@ -33706,7 +33770,7 @@ var import_classnames37 = __toESM(require_classnames());
 var Modal_default = { "overlay": "Modal_overlay__MzBhO", "modal-fade-in": "Modal_modal-fade-in__OTcxN", "modal": "Modal_modal__YTU3M", "left": "Modal_left__ZDU0O", "right": "Modal_right__MGFhO", "top": "Modal_top__OTY4M", "bottom": "Modal_bottom__NjY4N", "fullscreen": "Modal_fullscreen__YTNkZ", "center": "Modal_center__ZTViM", "modal-zoom": "Modal_modal-zoom__MjY4Y", "modal-left": "Modal_modal-left__YTc0N", "modal-right": "Modal_modal-right__MWY0Z", "modal-top": "Modal_modal-top__OTQ2M", "modal-bottom": "Modal_modal-bottom__NDlkZ" };
 
 // src/components/Modal.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Modal2({
   position = "center",
   offset,
@@ -33718,54 +33782,54 @@ function Modal2({
   if (offset) {
     style[`--modal-offset`] = offset;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($f3f84453ead64de5$export$8948f78d83984c69, { ...props, className: Modal_default.overlay, style, isDismissable: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($f3f84453ead64de5$export$2b77a92f1a5ad772, { className: (0, import_classnames37.default)(Modal_default.modal, position && Modal_default[position], className), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)($f3f84453ead64de5$export$8948f78d83984c69, { ...props, className: Modal_default.overlay, style, isDismissable: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)($f3f84453ead64de5$export$2b77a92f1a5ad772, { className: (0, import_classnames37.default)(Modal_default.modal, position && Modal_default[position], className), children }) });
 }
 
 // src/components/Navbar.tsx
-var import_react192 = require("react");
+var import_react193 = require("react");
 var import_classnames38 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Navbar.module.css
 var Navbar_default = { "nav": "Navbar_nav__ZjEwM", "item": "Navbar_item__MWVhZ", "icon": "Navbar_icon__ZmM1N" };
 
 // src/components/Navbar.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var NavbarContext = (0, import_react192.createContext)(void 0);
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var NavbarContext = (0, import_react193.createContext)(void 0);
 var useNavigationContext = () => {
-  const context = (0, import_react192.useContext)(NavbarContext);
+  const context = (0, import_react193.useContext)(NavbarContext);
   if (!context) {
     throw new Error("useNavigationContext must be used within a Navbar");
   }
   return context;
 };
 function Navbar({ showArrow = true, className, children, ...props }) {
-  const [activeMenu, setActiveMenu] = (0, import_react192.useState)("");
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(NavbarContext.Provider, { value: { activeMenu, setActiveMenu }, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ...props, className: (0, import_classnames38.default)(Navbar_default.nav, className), children }) });
+  const [activeMenu, setActiveMenu] = (0, import_react193.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NavbarContext.Provider, { value: { activeMenu, setActiveMenu }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ...props, className: (0, import_classnames38.default)(Navbar_default.nav, className), children }) });
 }
 function NavbarItem({ label, children, className, ...props }) {
   const { activeMenu, setActiveMenu } = useNavigationContext();
   if (label) {
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(HoverTrigger, { isOpen: activeMenu === label, onHoverStart: () => setActiveMenu(label), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { ...props, className: (0, import_classnames38.default)(Navbar_default.item, className), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon2, { rotate: 90, size: "sm", className: Navbar_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ChevronRight, {}) })
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(HoverTrigger, { isOpen: activeMenu === label, onHoverStart: () => setActiveMenu(label), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { ...props, className: (0, import_classnames38.default)(Navbar_default.item, className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon2, { rotate: 90, size: "sm", className: Navbar_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ChevronRight, {}) })
       ] }),
       children
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ...props, className: (0, import_classnames38.default)(Navbar_default.item, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ...props, className: (0, import_classnames38.default)(Navbar_default.item, className), children });
 }
 
 // src/components/NavMenu.tsx
-var import_react193 = require("react");
+var import_react194 = require("react");
 var import_classnames39 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\NavMenu.module.css
 var NavMenu_default = { "navmenu": "NavMenu_navmenu__MzRmN", "item": "NavMenu_item__ZWRjZ", "selected": "NavMenu_selected__ZDU1N", "muted": "NavMenu_muted__MTgxN", "title": "NavMenu_title__ZjJhN", "clickable": "NavMenu_clickable__Mjg0O" };
 
 // src/components/NavMenu.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var NavMenuContext = (0, import_react193.createContext)(null);
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var NavMenuContext = (0, import_react194.createContext)(null);
 function NavMenu({
   itemBackgroundColor = "2",
   muteItems,
@@ -33774,7 +33838,7 @@ function NavMenu({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NavMenuContext.Provider, { value: { itemBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NavMenuContext.Provider, { value: { itemBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     Column,
     {
       ...props,
@@ -33791,13 +33855,13 @@ function NavMenuGroup({
   children,
   ...props
 }) {
-  const [minimized, setMinimized] = (0, import_react193.useState)(!!isMinimized);
+  const [minimized, setMinimized] = (0, import_react194.useState)(!!isMinimized);
   const handleClick = () => {
     if (allowMinimize) {
       setMinimized((state) => !state);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     Column,
     {
       gap: true,
@@ -33808,7 +33872,7 @@ function NavMenuGroup({
         allowMinimize && minimized && NavMenu_default.minimized
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
           Row,
           {
             className: NavMenu_default.item,
@@ -33816,8 +33880,8 @@ function NavMenuGroup({
             justifyContent: "space-between",
             onClick: handleClick,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { className: NavMenu_default.title, children: title }),
-              allowMinimize && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon2, { rotate: minimized ? 0 : 90, color: "muted", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ChevronRight, {}) })
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { className: NavMenu_default.title, children: title }),
+              allowMinimize && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon2, { rotate: minimized ? 0 : 90, color: "muted", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ChevronRight, {}) })
             ]
           }
         ),
@@ -33827,8 +33891,8 @@ function NavMenuGroup({
   );
 }
 function NavMenuItem({ isSelected, className, children, ...props }) {
-  const { itemBackgroundColor } = (0, import_react193.useContext)(NavMenuContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  const { itemBackgroundColor } = (0, import_react194.useContext)(NavMenuContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     Row,
     {
       ...props,
@@ -33841,18 +33905,18 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 }
 
 // src/components/PasswordField.tsx
-var import_react194 = require("react");
+var import_react195 = require("react");
 var import_classnames40 = __toESM(require_classnames());
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function PasswordField({ label, className, ...props }) {
-  const [show, setShow] = (0, import_react194.useState)(false);
+  const [show, setShow] = (0, import_react195.useState)(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state) => !state);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Label2, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)($bcdf0525bf22703d$export$2c73285ae9390cec, { "aria-label": "Password", ...props, className: (0, import_classnames40.default)(TextField_default.field, className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { type }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon2, { onClick: handleShowPassword, children: show ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(EyeSlash_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Eye_default, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Label2, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)($bcdf0525bf22703d$export$2c73285ae9390cec, { "aria-label": "Password", ...props, className: (0, import_classnames40.default)(TextField_default.field, className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { type }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon2, { onClick: handleShowPassword, children: show ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(EyeSlash_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Eye_default, {}) })
     ] })
   ] });
 }
@@ -33864,9 +33928,9 @@ var import_classnames41 = __toESM(require_classnames());
 var Popover_default = { "popover": "Popover_popover__YmFhM", "popover-slide": "Popover_popover-slide__OGZjY" };
 
 // src/components/Popover.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function Popover2({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)($07b14b47974efb58$export$5b6b19405a83ff9d, { ...props, className: (0, import_classnames41.default)(Popover_default.popover, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)($07b14b47974efb58$export$5b6b19405a83ff9d, { ...props, className: (0, import_classnames41.default)(Popover_default.popover, className), children });
 }
 
 // src/components/ProgressBar.tsx
@@ -33876,12 +33940,12 @@ var import_classnames42 = __toESM(require_classnames());
 var ProgressBar_default = { "progressbar": "ProgressBar_progressbar__YzdlO", "track": "ProgressBar_track__YzgzY", "fill": "ProgressBar_fill__ZTJlM", "value": "ProgressBar_value__NDk1Z" };
 
 // src/components/ProgressBar.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function ProgressBar2({ className, showPercentage, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames42.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
-      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: ProgressBar_default.value, children: valueText })
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames42.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
+      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: ProgressBar_default.value, children: valueText })
     ] });
   } });
 }
@@ -33893,16 +33957,16 @@ var import_classnames43 = __toESM(require_classnames());
 var ProgressCircle_default = { "progresscircle": "ProgressCircle_progresscircle__NGMyY", "track": "ProgressCircle_track__YzY2M", "fill": "ProgressCircle_fill__ZmMzM", "value": "ProgressCircle_value__YjM0Y" };
 
 // src/components/ProgressCircle.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function ProgressCircle({ className, showPercentage, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames43.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames43.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
     const radius = 45;
     const circumference = radius * 2 * Math.PI;
     const offset = circumference - percentage / 100 * circumference;
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "circle",
           {
             className: ProgressCircle_default.fill,
@@ -33914,7 +33978,7 @@ function ProgressCircle({ className, showPercentage, ...props }) {
           }
         )
       ] }),
-      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("label", { className: ProgressCircle_default.value, children: valueText })
+      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("label", { className: ProgressCircle_default.value, children: valueText })
     ] });
   } });
 }
@@ -33926,7 +33990,7 @@ var import_classnames44 = __toESM(require_classnames());
 var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__ZjliM", "inputs": "RadioGroup_inputs__NjA4N", "radio": "RadioGroup_radio__MmE2Z", "variant-circle": "RadioGroup_variant-circle__NzliY", "variant-box": "RadioGroup_variant-box__Mjk3N" };
 
 // src/components/RadioGroup.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function RadioGroup2({
   variant = "circle",
   label,
@@ -33934,27 +33998,27 @@ function RadioGroup2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     $b6c3ddc6086f204d$export$a98f0dcb43a68a25,
     {
       "aria-label": "RadioGroup",
       ...props,
       className: (0, import_classnames44.default)(RadioGroup_default.radiogroup, RadioGroup_default[`variant-${variant}`], className),
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Label2, { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: RadioGroup_default.inputs, children })
+        label && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Label2, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: RadioGroup_default.inputs, children })
       ]
     }
   );
 }
 function Radio2({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)($b6c3ddc6086f204d$export$d7b12c4107be0d61, { "aria-label": "Radio", ...props, className: (0, import_classnames44.default)(RadioGroup_default.radio, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)($b6c3ddc6086f204d$export$d7b12c4107be0d61, { "aria-label": "Radio", ...props, className: (0, import_classnames44.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx
-var import_react195 = require("react");
+var import_react196 = require("react");
 var import_classnames45 = __toESM(require_classnames());
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function SearchField2({
   label,
   placeholder,
@@ -33966,7 +34030,7 @@ function SearchField2({
   className,
   ...props
 }) {
-  const [search, setSearch] = (0, import_react195.useState)(defaultValue);
+  const [search, setSearch] = (0, import_react196.useState)(defaultValue);
   const searchValue = useDebounce(search, delay);
   const handleChange = (value2) => {
     setSearch(value2);
@@ -33980,14 +34044,14 @@ function SearchField2({
     onSearch?.("");
     onChange?.("");
   };
-  (0, import_react195.useEffect)(() => {
+  (0, import_react196.useEffect)(() => {
     if (delay > 0) {
       onSearch?.(searchValue);
     }
   }, [searchValue, delay]);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Label2, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Label2, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
       $440f4836bcb56932$export$b94867ecbd698f21,
       {
         "aria-label": "Search",
@@ -33995,9 +34059,9 @@ function SearchField2({
         className: (0, import_classnames45.default)(TextField_default.field, className),
         onChange: handleChange,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon2, { strokeColor: "8", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Search, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { placeholder, value: search }),
-          search && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon2, { size: "sm", color: "8", onClick: resetSearch, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(X, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon2, { strokeColor: "8", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Search, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { placeholder, value: search }),
+          search && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon2, { size: "sm", color: "8", onClick: resetSearch, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(X, {}) })
         ]
       }
     )
@@ -34005,14 +34069,14 @@ function SearchField2({
 }
 
 // src/components/Select.tsx
-var import_react196 = require("react");
+var import_react197 = require("react");
 var import_classnames46 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
 var Select_default = { "select": "Select_select__NTRiY", "button": "Select_button__ZTJmY", "value": "Select_value__OWU2Z", "list": "Select_list__NTk4N", "search": "Select_search__YWI3Y" };
 
 // src/components/Select.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function Select2({
   items = [],
   value,
@@ -34033,7 +34097,7 @@ function Select2({
   children,
   ...props
 }) {
-  const [search, setSearch] = (0, import_react196.useState)("");
+  const [search, setSearch] = (0, import_react197.useState)("");
   const handleChange = (e) => {
     onSelectionChange?.(e);
     onChange?.(e);
@@ -34046,7 +34110,7 @@ function Select2({
     setSearch("");
     onSearch?.("");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
     $82d7e5349645de74$export$ef9b1a59e592288f,
     {
       "aria-label": "Select",
@@ -34056,21 +34120,21 @@ function Select2({
       defaultSelectedKey: defaultValue,
       onSelectionChange: handleChange,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Label2, { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Label2, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           Button2,
           {
             variant: "outline",
             ...buttonProps,
             className: (0, import_classnames46.default)(Select_default.button, buttonProps?.className),
-            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: Select_default.value, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
-              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon2, { "aria-hidden": "true", rotate: 90, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ChevronRight, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: Select_default.value, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon2, { "aria-hidden": "true", rotate: 90, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ChevronRight, {}) })
             ] })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Popover2, { ...popoverProps, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: Select_default.list, children: [
-          allowSearch && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Popover2, { ...popoverProps, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: Select_default.list, children: [
+          allowSearch && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             SearchField2,
             {
               className: Select_default.search,
@@ -34081,8 +34145,8 @@ function Select2({
               autoFocus: true
             }
           ),
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Loading, { icon: "dots", placement: "center", size: "sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Loading, { icon: "dots", placement: "center", size: "sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             List,
             {
               ...listProps,
@@ -34098,15 +34162,15 @@ function Select2({
 }
 
 // src/components/Sidebar.tsx
-var import_react197 = require("react");
+var import_react198 = require("react");
 var import_classnames47 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Sidebar.module.css
 var Sidebar_default = { "sidebar": "Sidebar_sidebar__NDg2N", "header": "Sidebar_header__ZGU4M", "label": "Sidebar_label__NzZkM", "section": "Sidebar_section__NDY5Y", "title": "Sidebar_title__NmU4O", "content": "Sidebar_content__YjhhO", "item": "Sidebar_item__YmFjY", "selected": "Sidebar_selected__NWU3Y", "collapsed": "Sidebar_collapsed__MDY4N", "muted": "Sidebar_muted__N2U2M" };
 
 // src/components/Sidebar.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
-var SidebarContext = (0, import_react197.createContext)(null);
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var SidebarContext = (0, import_react198.createContext)(null);
 function Sidebar({
   itemBackgroundColor = "2",
   isCollapsed,
@@ -34115,7 +34179,7 @@ function Sidebar({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(SidebarContext.Provider, { value: { isCollapsed, itemBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SidebarContext.Provider, { value: { isCollapsed, itemBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     Column,
     {
       border: "right",
@@ -34136,9 +34200,9 @@ function SidebarSection({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Column, { ...props, className: (0, import_classnames47.default)(Sidebar_default.section, className), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: Sidebar_default.title, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: Sidebar_default.content, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Column, { ...props, className: (0, import_classnames47.default)(Sidebar_default.section, className), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: Sidebar_default.title, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: Sidebar_default.content, children })
   ] });
 }
 function SidebarHeader({
@@ -34148,9 +34212,9 @@ function SidebarHeader({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Row, { ...props, className: (0, import_classnames47.default)(Sidebar_default.header, className), children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon2, { size: "sm", children: icon }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: Sidebar_default.label, children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Row, { ...props, className: (0, import_classnames47.default)(Sidebar_default.header, className), children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon2, { size: "sm", children: icon }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: Sidebar_default.label, children: label }),
     children
   ] });
 }
@@ -34162,9 +34226,9 @@ function SidebarItem({
   children,
   ...props
 }) {
-  const { isCollapsed, itemBackgroundColor } = (0, import_react197.useContext)(SidebarContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)($f645667febf57a63$export$35a3bebf7ef2d934, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+  const { isCollapsed, itemBackgroundColor } = (0, import_react198.useContext)(SidebarContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)($f645667febf57a63$export$35a3bebf7ef2d934, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
       Row,
       {
         ...props,
@@ -34172,13 +34236,13 @@ function SidebarItem({
         hoverBackgroundColor: itemBackgroundColor,
         className: (0, import_classnames47.default)(Sidebar_default.item, className, isSelected && Sidebar_default.selected),
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon2, { size: "sm", children: icon }),
-          label && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Text, { className: (0, import_classnames47.default)(Sidebar_default.label), children: label }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon2, { size: "sm", children: icon }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Text, { className: (0, import_classnames47.default)(Sidebar_default.label), children: label }),
           children
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Tooltip2, { placement: "right", children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Tooltip2, { placement: "right", children: label })
   ] });
 }
 
@@ -34189,17 +34253,17 @@ var import_classnames48 = __toESM(require_classnames());
 var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_header__ZTE2M", "track": "Slider_track__ODk5M", "fill": "Slider_fill__YzdhM", "thumb": "Slider_thumb__NGEzM" };
 
 // src/components/Slider.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function Slider2({ className, showValue = true, label, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames48.default)(Slider_default.slider, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: Slider_default.header, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Label2, { className: Slider_default.label, children: label }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames48.default)(Slider_default.slider, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: Slider_default.header, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Label2, { className: Slider_default.label, children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
       const isHorizontal = state.orientation === "horizontal";
-      return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           "div",
           {
             className: Slider_default.fill,
@@ -34208,7 +34272,7 @@ function Slider2({ className, showValue = true, label, ...props }) {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
       ] });
     } })
   ] });
@@ -34221,11 +34285,11 @@ var import_classnames49 = __toESM(require_classnames());
 var StatusLight_default = { "statuslight": "StatusLight_statuslight__MTliM", "status": "StatusLight_status__MDNmO", "bg": "StatusLight_bg__MjVjN", "success": "StatusLight_success__ZWI1N", "warning": "StatusLight_warning__YWRmM", "error": "StatusLight_error__NjdjM", "active": "StatusLight_active__NGZiY", "inactive": "StatusLight_inactive__NDI0Z" };
 
 // src/components/StatusLight.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { ...domProps, className: (0, import_classnames49.default)(StatusLight_default.statuslight, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ...domProps, className: (0, import_classnames49.default)(StatusLight_default.statuslight, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "div",
       {
         className: (0, import_classnames49.default)(StatusLight_default.status, StatusLight_default[variant]),
@@ -34243,12 +34307,12 @@ var import_classnames50 = __toESM(require_classnames());
 var Switch_default = { "switch": "Switch_switch__NzIwM", "track": "Switch_track__NWQ0M", "knob": "Switch_knob__NDU3M" };
 
 // src/components/Switch.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 function Switch2({ label, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Column, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Label2, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)($8e59e948500a8fe1$export$b5d5cf8927ab7262, { ...props, className: (0, import_classnames50.default)(Switch_default.switch, className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: Switch_default.knob }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Column, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Label2, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)($8e59e948500a8fe1$export$b5d5cf8927ab7262, { ...props, className: (0, import_classnames50.default)(Switch_default.switch, className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: Switch_default.knob }) }),
       children
     ] })
   ] });
@@ -34258,18 +34322,18 @@ function Switch2({ label, children, className, ...props }) {
 var Tabs_default = { "tabs": "Tabs_tabs__OWVjO", "list": "Tabs_list__YWRjM", "tab": "Tabs_tab__ZjgwM", "quiet": "Tabs_quiet__ZTQ1O" };
 
 // src/components/Tabs.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function Tabs2({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)($5e8ad37a45e1c704$export$b2539bed5023c21c, { ...props, className: Tabs_default.tabs, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)($5e8ad37a45e1c704$export$b2539bed5023c21c, { ...props, className: Tabs_default.tabs, children });
 }
 function TabList2({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)($5e8ad37a45e1c704$export$e51a686c67fdaa2d, { ...props, className: Tabs_default.list, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)($5e8ad37a45e1c704$export$e51a686c67fdaa2d, { ...props, className: Tabs_default.list, children });
 }
 function Tab({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)($5e8ad37a45e1c704$export$3e41faf802a29e71, { ...props, className: Tabs_default.tab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)($5e8ad37a45e1c704$export$3e41faf802a29e71, { ...props, className: Tabs_default.tab, children });
 }
 function TabPanel2({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)($5e8ad37a45e1c704$export$3d96ec278d3efce4, { ...props, className: Tabs_default.panel, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)($5e8ad37a45e1c704$export$3d96ec278d3efce4, { ...props, className: Tabs_default.panel, children });
 }
 
 // src/components/ThemeButton.tsx
@@ -34279,7 +34343,7 @@ var import_classnames51 = __toESM(require_classnames());
 var ThemeButton_default = { "button": "ThemeButton_button__MDUzN" };
 
 // src/components/ThemeButton.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function ThemeButton({ className, variant = "quiet", onPress, ...props }) {
   const { theme, setTheme } = useTheme();
   const transitions = useTransition(theme, {
@@ -34298,7 +34362,7 @@ function ThemeButton({ className, variant = "quiet", onPress, ...props }) {
     setTheme(theme === "light" ? "dark" : "light");
     onPress?.(e);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
     Button2,
     {
       ...props,
@@ -34308,7 +34372,7 @@ function ThemeButton({ className, variant = "quiet", onPress, ...props }) {
       children: [
         transitions((style, item) => (
           // @ts-ignore
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(animated.div, { style, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Icon2, { size: "sm", children: item === "light" ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Sun, {}) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Moon, {}) }) }, item)
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(animated.div, { style, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon2, { size: "sm", children: item === "light" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Sun, {}) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Moon, {}) }) }, item)
         )),
         "\xA0"
       ]
@@ -34323,12 +34387,12 @@ var import_classnames52 = __toESM(require_classnames());
 var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
 
 // src/components/Toggle.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 function Toggle({ label, children, className, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Label2, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Label2, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       $efde0372d7a700fe$export$d2b052e7b4be1756,
       {
         ...props,
@@ -34347,7 +34411,7 @@ var import_classnames53 = __toESM(require_classnames());
 var ToggleGroup_default = { "group": "ToggleGroup_group__NDJiO", "list": "ToggleGroup_list__NTM2M", "item": "ToggleGroup_item__MWFiY", "primary": "ToggleGroup_primary__ZTAyY" };
 
 // src/components/ToggleGroup.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 function ToggleGroup({
   label,
   value,
@@ -34366,7 +34430,7 @@ function ToggleGroup({
     onSelectionChange?.(keys);
     onChange?.(Array.from(keys).map((k) => k.toString()));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     $eaf9e70818b436db$export$67ea30858aaf75e3,
     {
       ...props,
@@ -34376,18 +34440,18 @@ function ToggleGroup({
       onSelectionChange: handleChange,
       className: (0, import_classnames53.default)(ToggleGroup_default.group, className, variant && ToggleGroup_default[variant]),
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Label2, { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
+        label && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Label2, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
       ]
     }
   );
 }
 function ToggleGroupItem({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames53.default)(ToggleGroup_default.item, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames53.default)(ToggleGroup_default.item, className), children });
 }
 
 // src/components/ZenProvider.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var defaultToastConfig = {
   duration: 3e3
 };
@@ -34398,7 +34462,7 @@ function ZenProvider({
   toast = defaultToastConfig
 }) {
   useInitTheme(theme, colorScheme);
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToastProvider, { ...toast, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToastProvider, { ...toast, children });
 }
 /*! Bundled license information: