@umami/react-zen 0.38.0 → 0.40.0

package/dist/index.js

@@ -319,7 +319,6 @@ __export(index_exports, {
   Menu: () => Menu,
   MenuItem: () => MenuItem2,
   MenuTrigger: () => $3674c52c6b3c5bce$export$27d2ad3c5815583e,
-  MobileMenuButton: () => MobileMenuButton,
   Modal: () => Modal,
   NavigationMenu: () => NavigationMenu,
   NavigationMenuItem: () => NavigationMenuItem,
@@ -30412,17 +30411,24 @@ var import_classnames14 = __toESM(require_classnames());
 var import_classnames13 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Dialog.module.css
-var Dialog_default = { "dialog": "Dialog_dialog__YjBmO", "title": "Dialog_title__MmNiZ" };
+var Dialog_default = { "dialog": "Dialog_dialog__OTEwM", "title": "Dialog_title__MTE4N", "sheet": "Dialog_sheet__MWQ0Z" };
 
 // src/components/Dialog.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-function Dialog({ title, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)($de32f1b87079253c$export$3ddf2d174ce01153, { ...props, className: (0, import_classnames13.default)(Dialog_default.dialog, className), children: (dialogProps) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: Dialog_default.title, children: title }),
-      typeof children === "function" ? children(dialogProps) : children
-    ] });
-  } });
+function Dialog({ title, variant, children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    $de32f1b87079253c$export$3ddf2d174ce01153,
+    {
+      ...props,
+      className: (0, import_classnames13.default)(Dialog_default.dialog, variant && Dialog_default[variant], className),
+      children: (dialogProps) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: Dialog_default.title, children: title }),
+          typeof children === "function" ? children(dialogProps) : children
+        ] });
+      }
+    }
+  );
 }
 
 // src/components/Row.tsx
@@ -31174,40 +31180,22 @@ function Menu({ items, className, children, ...props }) {
 var import_classnames36 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Modal.module.css
-var Modal_default = { "overlay": "Modal_overlay__NDQ5M", "modal-fade": "Modal_modal-fade__ZWUyZ", "modal": "Modal_modal__ZmIxM", "modal-zoom": "Modal_modal-zoom__MDZmY" };
+var Modal_default = { "overlay": "Modal_overlay__MzYwN", "modal-fade-in": "Modal_modal-fade-in__MDBkZ", "modal": "Modal_modal__ZTRjZ", "left": "Modal_left__NWIxM", "right": "Modal_right__MGNkY", "top": "Modal_top__ZmViY", "bottom": "Modal_bottom__Zjg4M", "fullscreen": "Modal_fullscreen__NmZiM", "center": "Modal_center__ZWFmO", "modal-zoom": "Modal_modal-zoom__MmU0M", "modal-left": "Modal_modal-left__MWY5M", "modal-right": "Modal_modal-right__OWVlM", "modal-top": "Modal_modal-top__NDc4M", "modal-bottom": "Modal_modal-bottom__YTE1Z" };
 
 // src/components/Modal.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-function Modal({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)($f3f84453ead64de5$export$8948f78d83984c69, { ...props, className: Modal_default.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-    $f3f84453ead64de5$export$2b77a92f1a5ad772,
-    {
-      className: (0, import_classnames36.default)(Modal_default.modal, className),
-      isDismissable: true,
-      isKeyboardDismissDisabled: true,
-      children
-    }
-  ) });
-}
-
-// css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/MobileMenuButton.module.css
-var MobileMenuButton_default = { "modal": "MobileMenuButton_modal__N2FhM", "dialog": "MobileMenuButton_dialog__OTM5N", "content": "MobileMenuButton_content__ZTg2O" };
-
-// src/components/MobileMenuButton.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
-function MobileMenuButton({ title, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)($de32f1b87079253c$export$2e1e1122cf0cba88, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button, { variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icons.Menu, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Modal, { className: MobileMenuButton_default.modal, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Dialog, { className: MobileMenuButton_default.dialog, children: ({ close }) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Grid, { rows: "auto 1fr", height: "100%", width: "100%", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Row, { justifyContent: "space-between", alignItems: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { size: "3", weight: "bold", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icons.Close, {}) }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Box, { className: MobileMenuButton_default.content, children })
-      ] });
-    } }) })
-  ] });
+function Modal({
+  position = "center",
+  offset,
+  children,
+  className,
+  style = {},
+  ...props
+}) {
+  if (offset) {
+    style[`--modal-offset`] = offset;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)($f3f84453ead64de5$export$8948f78d83984c69, { ...props, className: Modal_default.overlay, style, isDismissable: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)($f3f84453ead64de5$export$2b77a92f1a5ad772, { className: (0, import_classnames36.default)(Modal_default.modal, position && Modal_default[position], className), children }) });
 }
 
 // src/components/NavigationMenu.tsx
@@ -31225,14 +31213,14 @@ var useNavigationMenu = store3;
 var NavigationMenu_default = { "nav": "NavigationMenu_nav__MzRiY", "item": "NavigationMenu_item__YTI0N", "icon": "NavigationMenu_icon__ZDczY" };
 
 // src/components/NavigationMenu.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function NavigationMenu({
   showArrow = true,
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.nav, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.nav, className), children });
 }
 function NavigationMenuItem({
   label,
@@ -31242,15 +31230,15 @@ function NavigationMenuItem({
 }) {
   const { activeMenu } = useNavigationMenu();
   if (label) {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(HoverTrigger, { isOpen: activeMenu === label, onHoverStart: () => setActiveMenu(label), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { rotate: 90, size: "xs", className: NavigationMenu_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icons.Chevron, {}) })
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(HoverTrigger, { isOpen: activeMenu === label, onHoverStart: () => setActiveMenu(label), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { rotate: 90, size: "xs", className: NavigationMenu_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icons.Chevron, {}) })
       ] }),
       children
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children });
 }
 
 // src/components/PasswordField.tsx
@@ -31261,17 +31249,17 @@ var import_classnames38 = __toESM(require_classnames());
 var PasswordField_default = { "icon": "PasswordField_icon__NDMyZ" };
 
 // src/components/PasswordField.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var PasswordField = (0, import_react182.forwardRef)(
   ({ label, className, ...props }, ref) => {
     const [show, setShow] = (0, import_react182.useState)(false);
     const type = show ? "text" : "password";
     const handleShowPassword = () => setShow((state) => !state);
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames38.default)(input_default.field, className), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Label, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: input_default.row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: input_default.input }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, { onClick: handleShowPassword, className: (0, import_classnames38.default)(PasswordField_default.icon, input_default.icon), children: show ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icons.EyeSlash, {}) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icons.Eye, {}) })
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames38.default)(input_default.field, className), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Label, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: input_default.row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: input_default.input }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { onClick: handleShowPassword, className: (0, import_classnames38.default)(PasswordField_default.icon, input_default.icon), children: show ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icons.EyeSlash, {}) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icons.Eye, {}) })
       ] })
     ] });
   }
@@ -31284,12 +31272,12 @@ var import_classnames39 = __toESM(require_classnames());
 var ProgressBar_default = { "progressbar": "ProgressBar_progressbar__MTQwN", "track": "ProgressBar_track__YTM0O", "fill": "ProgressBar_fill__ZTkyN", "value": "ProgressBar_value__YTU3N" };
 
 // src/components/ProgressBar.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function ProgressBar({ className, showValue, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames39.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: ProgressBar_default.value, children: valueText })
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames39.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: ProgressBar_default.value, children: valueText })
     ] });
   } });
 }
@@ -31301,16 +31289,16 @@ var import_classnames40 = __toESM(require_classnames());
 var ProgressCircle_default = { "progresscircle": "ProgressCircle_progresscircle__NTQ3N", "track": "ProgressCircle_track__Mjk3Y", "fill": "ProgressCircle_fill__OWJlY", "value": "ProgressCircle_value__NzQ5Y" };
 
 // src/components/ProgressCircle.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function ProgressCircle({ className, showValue, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames40.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames40.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_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "circle",
           {
             className: ProgressCircle_default.fill,
@@ -31322,7 +31310,7 @@ function ProgressCircle({ className, showValue, ...props }) {
           }
         )
       ] }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("label", { className: ProgressCircle_default.value, children: valueText })
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("label", { className: ProgressCircle_default.value, children: valueText })
     ] });
   } });
 }
@@ -31335,17 +31323,17 @@ var import_classnames41 = __toESM(require_classnames());
 var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__M2FmO", "radio": "RadioGroup_radio__NjdlY" };
 
 // src/components/RadioGroup.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var RadioGroup = (0, import_react183.forwardRef)(
   ({ label, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames41.default)(RadioGroup_default.radiogroup, className), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label, { children: label }),
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames41.default)(RadioGroup_default.radiogroup, className), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Label, { children: label }),
       children
     ] });
   }
 );
 function Radio({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames41.default)(RadioGroup_default.radio, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames41.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx
@@ -31356,7 +31344,7 @@ var import_classnames42 = __toESM(require_classnames());
 var SearchField_default = { "search": "SearchField_search__MmNlZ", "input": "SearchField_input__NTAwN", "close": "SearchField_close__NzZiM" };
 
 // src/components/SearchField.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var SearchField = (0, import_react184.forwardRef)(
   ({ label, value, delay = 0, onSearch, className, ...props }, ref) => {
     const [search, setSearch] = (0, import_react184.useState)(value ?? "");
@@ -31377,24 +31365,24 @@ var SearchField = (0, import_react184.forwardRef)(
         onSearch?.(searchValue);
       }
     }, [searchValue, delay, onSearch]);
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)($440f4836bcb56932$export$b94867ecbd698f21, { ...props, ref, className: (0, import_classnames42.default)(input_default.field, className), children: ({ state }) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Label, { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: input_default.row, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icons.MagnifyingGlass, { className: (0, import_classnames42.default)(SearchField_default.search, input_default.icon) }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($440f4836bcb56932$export$b94867ecbd698f21, { ...props, ref, className: (0, import_classnames42.default)(input_default.field, className), children: ({ state }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: input_default.row, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icons.MagnifyingGlass, { className: (0, import_classnames42.default)(SearchField_default.search, input_default.icon) }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             $3985021b0ad6602f$export$f5b8910cec6cf069,
             {
               className: (0, import_classnames42.default)(SearchField_default.input, input_default.input),
               onChange: handleChange
             }
           ),
-          state.value && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          state.value && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
             {
               className: (0, import_classnames42.default)(SearchField_default.close, input_default.icon),
               onPress: resetSearch,
-              children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icons.Close, {}) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icons.Close, {}) })
             }
           )
         ] })
@@ -31411,7 +31399,7 @@ var import_classnames43 = __toESM(require_classnames());
 var Select_default = { "button": "Select_button__YTM3Z", "list": "Select_list__MjJiN", "icon": "Select_icon__NzlhY" };
 
 // src/components/Select.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var Select = (0, import_react185.forwardRef)(
   ({
     children,
@@ -31427,7 +31415,7 @@ var Select = (0, import_react185.forwardRef)(
       onSelectionChange?.(e);
       onChange?.(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
       $82d7e5349645de74$export$ef9b1a59e592288f,
       {
         ...props,
@@ -31435,12 +31423,12 @@ var Select = (0, import_react185.forwardRef)(
         className: (0, import_classnames43.default)(input_default.field, className),
         onSelectionChange: handleChange,
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Label, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames43.default)(input_default.input, className), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Row, { justifyContent: "space-between", gap: "3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)($82d7e5349645de74$export$e288731fd71264f0, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { rotate: 90, size: "xs", className: input_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icons.Chevron, {}) }) })
+          label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Label, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames43.default)(input_default.input, className), children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Row, { justifyContent: "space-between", gap: "3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)($82d7e5349645de74$export$e288731fd71264f0, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { rotate: 90, size: "xs", className: input_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icons.Chevron, {}) }) })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(List, { items, className: Select_default.list, children }) })
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(List, { items, className: Select_default.list, children }) })
         ]
       }
     );
@@ -31455,18 +31443,18 @@ var import_classnames44 = __toESM(require_classnames());
 var Slider_default = { "slider": "Slider_slider__ODQ1M", "header": "Slider_header__NmYzN", "track": "Slider_track__Y2M4O", "fill": "Slider_fill__MWM4N", "thumb": "Slider_thumb__NGU2Z" };
 
 // src/components/Slider.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var Slider = (0, import_react186.forwardRef)(
   ({ className, showValue = true, label, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames44.default)(Slider_default.slider, className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: Slider_default.header, children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Label, { className: Slider_default.label, children: label }),
-        showValue && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames44.default)(Slider_default.slider, className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: Slider_default.header, children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Label, { className: Slider_default.label, children: label }),
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
         const isHorizontal = state.orientation === "horizontal";
-        return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             "div",
             {
               className: Slider_default.fill,
@@ -31475,7 +31463,7 @@ var Slider = (0, import_react186.forwardRef)(
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
         ] });
       } })
     ] });
@@ -31489,11 +31477,11 @@ var import_classnames45 = __toESM(require_classnames());
 var StatusLight_default = { "statuslight": "StatusLight_statuslight__NGIzM", "status": "StatusLight_status__NjQ5O", "bg": "StatusLight_bg__MDIxM", "success": "StatusLight_success__NGRjZ", "warning": "StatusLight_warning__MTFhZ", "error": "StatusLight_error__NzBjO", "active": "StatusLight_active__YTJhM", "inactive": "StatusLight_inactive__ZDZmN" };
 
 // src/components/StatusLight.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { ...domProps, className: (0, import_classnames45.default)(StatusLight_default.statuslight, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ...domProps, className: (0, import_classnames45.default)(StatusLight_default.statuslight, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       "div",
       {
         className: (0, import_classnames45.default)(StatusLight_default.status, StatusLight_default[variant]),
@@ -31512,13 +31500,13 @@ var import_classnames46 = __toESM(require_classnames());
 var Switch_default = { "switch": "Switch_switch__YzA5O", "track": "Switch_track__MTM0M", "knob": "Switch_knob__OWM5N" };
 
 // src/components/Switch.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var Switch = (0, import_react187.forwardRef)(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Label, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
         $8e59e948500a8fe1$export$b5d5cf8927ab7262,
         {
           ...props,
@@ -31526,7 +31514,7 @@ var Switch = (0, import_react187.forwardRef)(
           ref,
           className: (0, import_classnames46.default)(Switch_default.switch, className),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: Switch_default.knob }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: Switch_default.knob }) }),
             children
           ]
         }
@@ -31539,18 +31527,18 @@ var Switch = (0, import_react187.forwardRef)(
 var Tabs_default = { "tabs": "Tabs_tabs__ZmM4Z", "list": "Tabs_list__MGM4O", "quiet": "Tabs_quiet__YmI3N", "tab": "Tabs_tab__NWEyN" };
 
 // src/components/Tabs.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function Tabs({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)($5e8ad37a45e1c704$export$b2539bed5023c21c, { ...props, className: Tabs_default.tabs, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)($5e8ad37a45e1c704$export$b2539bed5023c21c, { ...props, className: Tabs_default.tabs, children });
 }
 function TabList({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)($5e8ad37a45e1c704$export$e51a686c67fdaa2d, { ...props, className: Tabs_default.list, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)($5e8ad37a45e1c704$export$e51a686c67fdaa2d, { ...props, className: Tabs_default.list, children });
 }
 function Tab({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)($5e8ad37a45e1c704$export$3e41faf802a29e71, { ...props, className: Tabs_default.tab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)($5e8ad37a45e1c704$export$3e41faf802a29e71, { ...props, className: Tabs_default.tab, children });
 }
 function TabPanel({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)($5e8ad37a45e1c704$export$3d96ec278d3efce4, { ...props, className: Tabs_default.panel, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)($5e8ad37a45e1c704$export$3d96ec278d3efce4, { ...props, className: Tabs_default.panel, children });
 }
 
 // src/components/TextArea.tsx
@@ -31561,17 +31549,17 @@ var import_classnames47 = __toESM(require_classnames());
 var TextArea_default = { "textarea": "TextArea_textarea__YzRiM", "resize-none": "TextArea_resize-none__ZTljZ", "resize-horizontal": "TextArea_resize-horizontal__NzgyN", "resize-vertical": "TextArea_resize-vertical__MTIxZ" };
 
 // src/components/TextArea.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var TextArea = (0, import_react188.forwardRef)(
   ({ rows, cols, resize, className, style, children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       TextField,
       {
         ...props,
         ref,
         className: (0, import_classnames47.default)(resize && TextArea_default[`resize-${resize}`]),
         asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
       }
     );
   }
@@ -31584,7 +31572,7 @@ var import_classnames48 = __toESM(require_classnames());
 var ThemeButton_default = { "button": "ThemeButton_button__OWVmZ" };
 
 // src/components/ThemeButton.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function ThemeButton({ className, variant = "quiet", ...props }) {
   const { theme, setTheme: setTheme2 } = useTheme();
   const transitions = useTransition(theme, {
@@ -31602,7 +31590,7 @@ function ThemeButton({ className, variant = "quiet", ...props }) {
   function handleClick() {
     setTheme2(theme === "light" ? "dark" : "light");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     Button,
     {
       ...props,
@@ -31612,7 +31600,7 @@ function ThemeButton({ className, variant = "quiet", ...props }) {
       children: [
         transitions((style, item) => (
           // @ts-ignore
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(animated.div, { style, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { size: "sm", children: item === "light" ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icons.Sun, {}) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icons.Moon, {}) }) }, item)
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(animated.div, { style, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { size: "sm", children: item === "light" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icons.Sun, {}) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icons.Moon, {}) }) }, item)
         )),
         "\xA0"
       ]
@@ -31628,13 +31616,13 @@ var import_classnames49 = __toESM(require_classnames());
 var Toggle_default = { "toggle": "Toggle_toggle__NGNlM" };
 
 // src/components/Toggle.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Toggle = (0, import_react189.forwardRef)(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Label, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Label, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         $efde0372d7a700fe$export$d2b052e7b4be1756,
         {
           ...props,
@@ -31655,15 +31643,15 @@ var import_classnames50 = __toESM(require_classnames());
 var ToggleGroup_default = { "group": "ToggleGroup_group__NDAzY", "list": "ToggleGroup_list__ZDEwO", "item": "ToggleGroup_item__N2ZmN" };
 
 // src/components/ToggleGroup.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function ToggleGroup({ label, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)($eaf9e70818b436db$export$67ea30858aaf75e3, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.group, className), selectionBehavior: "toggle", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Label, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)($eaf9e70818b436db$export$67ea30858aaf75e3, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.group, className), selectionBehavior: "toggle", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Label, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
   ] });
 }
 function ToggleGroupItem({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.item, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.item, className), children });
 }
 
 // src/components/Tooltip.tsx
@@ -31673,19 +31661,19 @@ var import_classnames51 = __toESM(require_classnames());
 var Tooltip_default = { "tooltip": "Tooltip_tooltip__Y2Y2N", "arrow": "Tooltip_arrow__NzgwN", "slide": "Tooltip_slide__ODJjZ" };
 
 // src/components/Tooltip.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function Tooltip({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames51.default)(Tooltip_default.tooltip, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames51.default)(Tooltip_default.tooltip, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
     children
   ] });
 }
 
 // src/components/ZenProvider.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function ZenProvider({ children, ...props }) {
   const { toast } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ToastProvider, { ...toast, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ToastProvider, { ...toast, children });
 }
 /*! Bundled license information: