@umami/react-zen 0.36.0 → 0.38.0

package/dist/index.css

@@ -3263,6 +3263,22 @@ body a.Button_button__N2NhN {
   }
 }
 
+/* virtual-css:css:3bfbb09f24953e4c776b7494b4f2e619 */
+.MobileMenuButton_modal__N2FhM,
+.MobileMenuButton_dialog__OTM5N {
+  width: 100vw !important;
+  height: 100vh !important;
+  overflow: hidden;
+}
+.MobileMenuButton_dialog__OTM5N {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.MobileMenuButton_content__ZTg2O {
+  overflow: auto;
+}
+
 /* virtual-css:css:f06faaaaad4324b9459c87ab9d58d827 */
 .NavigationMenu_nav__MzRiY {
   display: flex;

package/dist/index.d.ts

@@ -48,6 +48,7 @@ declare module '@umami/react-zen' {
     import { LoadingButton } from '@umami/react-zen/LoadingButton';
     import { Menu } from '@umami/react-zen/Menu';
     import { MenuItem } from '@umami/react-zen/MenuItem';
+    import { MobileMenuButton } from '@umami/react-zen/MobileMenuButton';
     import { Modal } from '@umami/react-zen/Modal';
     import { NavigationMenu, NavigationMenuItem } from '@umami/react-zen/NavigationMenu';
     import { PasswordField } from '@umami/react-zen/PasswordField';
@@ -73,7 +74,7 @@ declare module '@umami/react-zen' {
     import { ToggleGroup, ToggleGroupItem } from '@umami/react-zen/ToggleGroup';
     import { Tooltip } from '@umami/react-zen/Tooltip';
     import { ZenProvider } from '@umami/react-zen/ZenProvider';
-    export { Form, FormField, FormResetButton, FormSubmitButton, Toast, Toaster, ToastProvider, useDebounce, useTheme, useToast, Accordion, AccordionItem, AlertBanner, AlertDialog, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, Combobox, Container, ConfirmationDialog, DataTable, DataColumn, Dialog, DialogTrigger, Dots, FileTrigger, Flexbox, Grid, Heading, HoverTrigger, Icon, Icons, InlineEditField, Label, List, ListItem, ListSection, Loading, LoadingButton, Menu, MenuItem, MenuTrigger, Modal, NavigationMenu, NavigationMenuItem, PasswordField, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, SearchField, Select, ListSeparator, Slider, Slot, Spinner, StatusLight, SubmenuTrigger, Switch, Table, TableHeader, TableBody, TableRow, TableColumn, TableCell, Tab, Tabs, TabList, TabPanel, Text, TextField, TextArea, ThemeButton, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipTrigger, ZenProvider, };
+    export { Form, FormField, FormResetButton, FormSubmitButton, Toast, Toaster, ToastProvider, useDebounce, useTheme, useToast, Accordion, AccordionItem, AlertBanner, AlertDialog, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, Combobox, Container, ConfirmationDialog, DataTable, DataColumn, Dialog, DialogTrigger, Dots, FileTrigger, Flexbox, Grid, Heading, HoverTrigger, Icon, Icons, InlineEditField, Label, List, ListItem, ListSection, Loading, LoadingButton, Menu, MenuItem, MenuTrigger, MobileMenuButton, Modal, NavigationMenu, NavigationMenuItem, PasswordField, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, SearchField, Select, ListSeparator, Slider, Slot, Spinner, StatusLight, SubmenuTrigger, Switch, Table, TableHeader, TableBody, TableRow, TableColumn, TableCell, Tab, Tabs, TabList, TabPanel, Text, TextField, TextArea, ThemeButton, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipTrigger, ZenProvider, };
 }
 
 declare module '@umami/react-zen/forms/Form' {
@@ -624,6 +625,14 @@ declare module '@umami/react-zen/MenuItem' {
     export default MenuItem;
 }
 
+declare module '@umami/react-zen/MobileMenuButton' {
+    import { ButtonProps } from '@umami/react-zen/Button';
+    export interface MobileMenuButtonProps extends ButtonProps {
+        title?: string;
+    }
+    export function MobileMenuButton({ title, children, ...props }: MobileMenuButtonProps): import("react").JSX.Element;
+}
+
 declare module '@umami/react-zen/Modal' {
     import { ReactNode } from 'react';
     import { ModalRenderProps } from 'react-aria-components';

package/dist/index.js

@@ -319,6 +319,7 @@ __export(index_exports, {
   Menu: () => Menu,
   MenuItem: () => MenuItem2,
   MenuTrigger: () => $3674c52c6b3c5bce$export$27d2ad3c5815583e,
+  MobileMenuButton: () => MobileMenuButton,
   Modal: () => Modal,
   NavigationMenu: () => NavigationMenu,
   NavigationMenuItem: () => NavigationMenuItem,
@@ -30416,10 +30417,10 @@ var Dialog_default = { "dialog": "Dialog_dialog__YjBmO", "title": "Dialog_title_
 // 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: ({ close }) => {
+  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({ close }) : children
+      typeof children === "function" ? children(dialogProps) : children
     ] });
   } });
 }
@@ -31189,6 +31190,26 @@ function Modal({ children, className, ...props }) {
   ) });
 }
 
+// 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 })
+      ] });
+    } }) })
+  ] });
+}
+
 // src/components/NavigationMenu.tsx
 var import_classnames37 = __toESM(require_classnames());
 
@@ -31204,14 +31225,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_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function NavigationMenu({
   showArrow = true,
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.nav, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.nav, className), children });
 }
 function NavigationMenuItem({
   label,
@@ -31221,15 +31242,15 @@ function NavigationMenuItem({
 }) {
   const { activeMenu } = useNavigationMenu();
   if (label) {
-    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, {}) })
+    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, {}) })
       ] }),
       children
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children });
 }
 
 // src/components/PasswordField.tsx
@@ -31240,17 +31261,17 @@ var import_classnames38 = __toESM(require_classnames());
 var PasswordField_default = { "icon": "PasswordField_icon__NDMyZ" };
 
 // src/components/PasswordField.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = 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_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, {}) })
+    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, {}) })
       ] })
     ] });
   }
@@ -31263,12 +31284,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_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function ProgressBar({ className, showValue, ...props }) {
-  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 })
+  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 })
     ] });
   } });
 }
@@ -31280,16 +31301,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_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function ProgressCircle({ className, showValue, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames40.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.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_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)(
+    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)(
           "circle",
           {
             className: ProgressCircle_default.fill,
@@ -31301,7 +31322,7 @@ function ProgressCircle({ className, showValue, ...props }) {
           }
         )
       ] }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("label", { className: ProgressCircle_default.value, children: valueText })
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("label", { className: ProgressCircle_default.value, children: valueText })
     ] });
   } });
 }
@@ -31314,17 +31335,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_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var RadioGroup = (0, import_react183.forwardRef)(
   ({ label, children, className, ...props }, ref) => {
-    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 }),
+    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 }),
       children
     ] });
   }
 );
 function Radio({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames41.default)(RadioGroup_default.radio, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames41.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx
@@ -31335,7 +31356,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_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = 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 ?? "");
@@ -31356,24 +31377,24 @@ var SearchField = (0, import_react184.forwardRef)(
         onSearch?.(searchValue);
       }
     }, [searchValue, delay, onSearch]);
-    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)(
+    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)(
             $3985021b0ad6602f$export$f5b8910cec6cf069,
             {
               className: (0, import_classnames42.default)(SearchField_default.input, input_default.input),
               onChange: handleChange
             }
           ),
-          state.value && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          state.value && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
             {
               className: (0, import_classnames42.default)(SearchField_default.close, input_default.icon),
               onPress: resetSearch,
-              children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icons.Close, {}) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icons.Close, {}) })
             }
           )
         ] })
@@ -31390,7 +31411,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_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var Select = (0, import_react185.forwardRef)(
   ({
     children,
@@ -31406,7 +31427,7 @@ var Select = (0, import_react185.forwardRef)(
       onSelectionChange?.(e);
       onChange?.(e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       $82d7e5349645de74$export$ef9b1a59e592288f,
       {
         ...props,
@@ -31414,12 +31435,12 @@ var Select = (0, import_react185.forwardRef)(
         className: (0, import_classnames43.default)(input_default.field, className),
         onSelectionChange: handleChange,
         children: [
-          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, {}) }) })
+          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, {}) }) })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(List, { items, className: Select_default.list, children }) })
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(List, { items, className: Select_default.list, children }) })
         ]
       }
     );
@@ -31434,18 +31455,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_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var Slider = (0, import_react186.forwardRef)(
   ({ className, showValue = true, label, ...props }, ref) => {
-    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 })
+    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 })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
         const isHorizontal = state.orientation === "horizontal";
-        return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             "div",
             {
               className: Slider_default.fill,
@@ -31454,7 +31475,7 @@ var Slider = (0, import_react186.forwardRef)(
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
         ] });
       } })
     ] });
@@ -31468,11 +31489,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_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  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)(
+  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)(
       "div",
       {
         className: (0, import_classnames45.default)(StatusLight_default.status, StatusLight_default[variant]),
@@ -31491,13 +31512,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_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = 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_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Label, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+    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)(
         $8e59e948500a8fe1$export$b5d5cf8927ab7262,
         {
           ...props,
@@ -31505,7 +31526,7 @@ var Switch = (0, import_react187.forwardRef)(
           ref,
           className: (0, import_classnames46.default)(Switch_default.switch, className),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: Switch_default.knob }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: Switch_default.knob }) }),
             children
           ]
         }
@@ -31518,18 +31539,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_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function Tabs({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)($5e8ad37a45e1c704$export$b2539bed5023c21c, { ...props, className: Tabs_default.tabs, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)($5e8ad37a45e1c704$export$b2539bed5023c21c, { ...props, className: Tabs_default.tabs, children });
 }
 function TabList({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)($5e8ad37a45e1c704$export$e51a686c67fdaa2d, { ...props, className: Tabs_default.list, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)($5e8ad37a45e1c704$export$e51a686c67fdaa2d, { ...props, className: Tabs_default.list, children });
 }
 function Tab({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)($5e8ad37a45e1c704$export$3e41faf802a29e71, { ...props, className: Tabs_default.tab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)($5e8ad37a45e1c704$export$3e41faf802a29e71, { ...props, className: Tabs_default.tab, children });
 }
 function TabPanel({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)($5e8ad37a45e1c704$export$3d96ec278d3efce4, { ...props, className: Tabs_default.panel, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)($5e8ad37a45e1c704$export$3d96ec278d3efce4, { ...props, className: Tabs_default.panel, children });
 }
 
 // src/components/TextArea.tsx
@@ -31540,17 +31561,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_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var TextArea = (0, import_react188.forwardRef)(
   ({ rows, cols, resize, className, style, children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       TextField,
       {
         ...props,
         ref,
         className: (0, import_classnames47.default)(resize && TextArea_default[`resize-${resize}`]),
         asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
       }
     );
   }
@@ -31563,7 +31584,7 @@ var import_classnames48 = __toESM(require_classnames());
 var ThemeButton_default = { "button": "ThemeButton_button__OWVmZ" };
 
 // src/components/ThemeButton.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function ThemeButton({ className, variant = "quiet", ...props }) {
   const { theme, setTheme: setTheme2 } = useTheme();
   const transitions = useTransition(theme, {
@@ -31581,7 +31602,7 @@ function ThemeButton({ className, variant = "quiet", ...props }) {
   function handleClick() {
     setTheme2(theme === "light" ? "dark" : "light");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     Button,
     {
       ...props,
@@ -31591,7 +31612,7 @@ function ThemeButton({ className, variant = "quiet", ...props }) {
       children: [
         transitions((style, item) => (
           // @ts-ignore
-          /* @__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)
+          /* @__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)
         )),
         "\xA0"
       ]
@@ -31607,13 +31628,13 @@ var import_classnames49 = __toESM(require_classnames());
 var Toggle_default = { "toggle": "Toggle_toggle__NGNlM" };
 
 // src/components/Toggle.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = 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_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Label, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    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)(
         $efde0372d7a700fe$export$d2b052e7b4be1756,
         {
           ...props,
@@ -31634,15 +31655,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_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function ToggleGroup({ label, className, children, ...props }) {
-  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 })
+  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 })
   ] });
 }
 function ToggleGroupItem({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.item, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.item, className), children });
 }
 
 // src/components/Tooltip.tsx
@@ -31652,19 +31673,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_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function Tooltip({ children, className, ...props }) {
-  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" }) }) }),
+  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" }) }) }),
     children
   ] });
 }
 
 // src/components/ZenProvider.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function ZenProvider({ children, ...props }) {
   const { toast } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ToastProvider, { ...toast, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ToastProvider, { ...toast, children });
 }
 /*! Bundled license information:
 

package/dist/index.mjs

@@ -30317,10 +30317,10 @@ var Dialog_default = { "dialog": "Dialog_dialog__YjBmO", "title": "Dialog_title_
 // src/components/Dialog.tsx
 import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function Dialog({ title, children, className, ...props }) {
-  return /* @__PURE__ */ jsx20($de32f1b87079253c$export$3ddf2d174ce01153, { ...props, className: (0, import_classnames13.default)(Dialog_default.dialog, className), children: ({ close }) => {
+  return /* @__PURE__ */ jsx20($de32f1b87079253c$export$3ddf2d174ce01153, { ...props, className: (0, import_classnames13.default)(Dialog_default.dialog, className), children: (dialogProps) => {
     return /* @__PURE__ */ jsxs10(Fragment2, { children: [
       title && /* @__PURE__ */ jsx20("div", { className: Dialog_default.title, children: title }),
-      typeof children === "function" ? children({ close }) : children
+      typeof children === "function" ? children(dialogProps) : children
     ] });
   } });
 }
@@ -31090,6 +31090,26 @@ function Modal({ children, className, ...props }) {
   ) });
 }
 
+// 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
+import { jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
+function MobileMenuButton({ title, children, ...props }) {
+  return /* @__PURE__ */ jsxs26($de32f1b87079253c$export$2e1e1122cf0cba88, { children: [
+    /* @__PURE__ */ jsx48(Button, { variant: "quiet", children: /* @__PURE__ */ jsx48(Icon, { children: /* @__PURE__ */ jsx48(Icons.Menu, {}) }) }),
+    /* @__PURE__ */ jsx48(Modal, { className: MobileMenuButton_default.modal, children: /* @__PURE__ */ jsx48(Dialog, { className: MobileMenuButton_default.dialog, children: ({ close }) => {
+      return /* @__PURE__ */ jsxs26(Grid, { rows: "auto 1fr", height: "100%", width: "100%", children: [
+        /* @__PURE__ */ jsxs26(Row, { justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsx48(Text, { size: "3", weight: "bold", children: title }),
+          /* @__PURE__ */ jsx48(Button, { onPress: () => close(), variant: "quiet", children: /* @__PURE__ */ jsx48(Icon, { children: /* @__PURE__ */ jsx48(Icons.Close, {}) }) })
+        ] }),
+        /* @__PURE__ */ jsx48(Box, { className: MobileMenuButton_default.content, children })
+      ] });
+    } }) })
+  ] });
+}
+
 // src/components/NavigationMenu.tsx
 var import_classnames37 = __toESM(require_classnames());
 
@@ -31105,14 +31125,14 @@ var useNavigationMenu = store3;
 var NavigationMenu_default = { "nav": "NavigationMenu_nav__MzRiY", "item": "NavigationMenu_item__YTI0N", "icon": "NavigationMenu_icon__ZDczY" };
 
 // src/components/NavigationMenu.tsx
-import { jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
 function NavigationMenu({
   showArrow = true,
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx48("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.nav, className), children });
+  return /* @__PURE__ */ jsx49("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.nav, className), children });
 }
 function NavigationMenuItem({
   label,
@@ -31122,15 +31142,15 @@ function NavigationMenuItem({
 }) {
   const { activeMenu } = useNavigationMenu();
   if (label) {
-    return /* @__PURE__ */ jsxs26(HoverTrigger, { isOpen: activeMenu === label, onHoverStart: () => setActiveMenu(label), children: [
-      /* @__PURE__ */ jsxs26("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children: [
-        /* @__PURE__ */ jsx48(Text, { children: label }),
-        /* @__PURE__ */ jsx48(Icon, { rotate: 90, size: "xs", className: NavigationMenu_default.icon, children: /* @__PURE__ */ jsx48(Icons.Chevron, {}) })
+    return /* @__PURE__ */ jsxs27(HoverTrigger, { isOpen: activeMenu === label, onHoverStart: () => setActiveMenu(label), children: [
+      /* @__PURE__ */ jsxs27("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children: [
+        /* @__PURE__ */ jsx49(Text, { children: label }),
+        /* @__PURE__ */ jsx49(Icon, { rotate: 90, size: "xs", className: NavigationMenu_default.icon, children: /* @__PURE__ */ jsx49(Icons.Chevron, {}) })
       ] }),
       children
     ] });
   }
-  return /* @__PURE__ */ jsx48("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children });
+  return /* @__PURE__ */ jsx49("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children });
 }
 
 // src/components/PasswordField.tsx
@@ -31141,17 +31161,17 @@ var import_classnames38 = __toESM(require_classnames());
 var PasswordField_default = { "icon": "PasswordField_icon__NDMyZ" };
 
 // src/components/PasswordField.tsx
-import { jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
 var PasswordField = forwardRef6(
   ({ label, className, ...props }, ref) => {
     const [show, setShow] = useState13(false);
     const type = show ? "text" : "password";
     const handleShowPassword = () => setShow((state) => !state);
-    return /* @__PURE__ */ jsxs27($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames38.default)(input_default.field, className), children: [
-      label && /* @__PURE__ */ jsx49(Label, { children: label }),
-      /* @__PURE__ */ jsxs27("div", { className: input_default.row, children: [
-        /* @__PURE__ */ jsx49($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: input_default.input }),
-        /* @__PURE__ */ jsx49(Icon, { onClick: handleShowPassword, className: (0, import_classnames38.default)(PasswordField_default.icon, input_default.icon), children: show ? /* @__PURE__ */ jsx49(Icons.EyeSlash, {}) : /* @__PURE__ */ jsx49(Icons.Eye, {}) })
+    return /* @__PURE__ */ jsxs28($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, ref, className: (0, import_classnames38.default)(input_default.field, className), children: [
+      label && /* @__PURE__ */ jsx50(Label, { children: label }),
+      /* @__PURE__ */ jsxs28("div", { className: input_default.row, children: [
+        /* @__PURE__ */ jsx50($3985021b0ad6602f$export$f5b8910cec6cf069, { type, className: input_default.input }),
+        /* @__PURE__ */ jsx50(Icon, { onClick: handleShowPassword, className: (0, import_classnames38.default)(PasswordField_default.icon, input_default.icon), children: show ? /* @__PURE__ */ jsx50(Icons.EyeSlash, {}) : /* @__PURE__ */ jsx50(Icons.Eye, {}) })
       ] })
     ] });
   }
@@ -31164,12 +31184,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
-import { Fragment as Fragment6, jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
 function ProgressBar({ className, showValue, ...props }) {
-  return /* @__PURE__ */ jsx50($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames39.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
-    return /* @__PURE__ */ jsxs28(Fragment6, { children: [
-      /* @__PURE__ */ jsx50("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ jsx50("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
-      showValue && /* @__PURE__ */ jsx50("div", { className: ProgressBar_default.value, children: valueText })
+  return /* @__PURE__ */ jsx51($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames39.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
+    return /* @__PURE__ */ jsxs29(Fragment6, { children: [
+      /* @__PURE__ */ jsx51("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ jsx51("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
+      showValue && /* @__PURE__ */ jsx51("div", { className: ProgressBar_default.value, children: valueText })
     ] });
   } });
 }
@@ -31181,16 +31201,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
-import { Fragment as Fragment7, jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
 function ProgressCircle({ className, showValue, ...props }) {
-  return /* @__PURE__ */ jsx51($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames40.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
+  return /* @__PURE__ */ jsx52($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__ */ jsxs29(Fragment7, { children: [
-      /* @__PURE__ */ jsxs29("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx51("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
-        /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsxs30(Fragment7, { children: [
+      /* @__PURE__ */ jsxs30("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx52("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
+        /* @__PURE__ */ jsx52(
           "circle",
           {
             className: ProgressCircle_default.fill,
@@ -31202,7 +31222,7 @@ function ProgressCircle({ className, showValue, ...props }) {
           }
         )
       ] }),
-      showValue && /* @__PURE__ */ jsx51("label", { className: ProgressCircle_default.value, children: valueText })
+      showValue && /* @__PURE__ */ jsx52("label", { className: ProgressCircle_default.value, children: valueText })
     ] });
   } });
 }
@@ -31215,17 +31235,17 @@ var import_classnames41 = __toESM(require_classnames());
 var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__M2FmO", "radio": "RadioGroup_radio__NjdlY" };
 
 // src/components/RadioGroup.tsx
-import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
 var RadioGroup = forwardRef7(
   ({ label, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs30($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames41.default)(RadioGroup_default.radiogroup, className), children: [
-      label && /* @__PURE__ */ jsx52(Label, { children: label }),
+    return /* @__PURE__ */ jsxs31($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames41.default)(RadioGroup_default.radiogroup, className), children: [
+      label && /* @__PURE__ */ jsx53(Label, { children: label }),
       children
     ] });
   }
 );
 function Radio({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx52($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames41.default)(RadioGroup_default.radio, className), children });
+  return /* @__PURE__ */ jsx53($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames41.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx
@@ -31236,7 +31256,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
-import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
 var SearchField = forwardRef8(
   ({ label, value, delay = 0, onSearch, className, ...props }, ref) => {
     const [search, setSearch] = useState14(value ?? "");
@@ -31257,24 +31277,24 @@ var SearchField = forwardRef8(
         onSearch?.(searchValue);
       }
     }, [searchValue, delay, onSearch]);
-    return /* @__PURE__ */ jsx53($440f4836bcb56932$export$b94867ecbd698f21, { ...props, ref, className: (0, import_classnames42.default)(input_default.field, className), children: ({ state }) => {
-      return /* @__PURE__ */ jsxs31(Fragment8, { children: [
-        label && /* @__PURE__ */ jsx53(Label, { children: label }),
-        /* @__PURE__ */ jsxs31("div", { className: input_default.row, children: [
-          /* @__PURE__ */ jsx53(Icons.MagnifyingGlass, { className: (0, import_classnames42.default)(SearchField_default.search, input_default.icon) }),
-          /* @__PURE__ */ jsx53(
+    return /* @__PURE__ */ jsx54($440f4836bcb56932$export$b94867ecbd698f21, { ...props, ref, className: (0, import_classnames42.default)(input_default.field, className), children: ({ state }) => {
+      return /* @__PURE__ */ jsxs32(Fragment8, { children: [
+        label && /* @__PURE__ */ jsx54(Label, { children: label }),
+        /* @__PURE__ */ jsxs32("div", { className: input_default.row, children: [
+          /* @__PURE__ */ jsx54(Icons.MagnifyingGlass, { className: (0, import_classnames42.default)(SearchField_default.search, input_default.icon) }),
+          /* @__PURE__ */ jsx54(
             $3985021b0ad6602f$export$f5b8910cec6cf069,
             {
               className: (0, import_classnames42.default)(SearchField_default.input, input_default.input),
               onChange: handleChange
             }
           ),
-          state.value && /* @__PURE__ */ jsx53(
+          state.value && /* @__PURE__ */ jsx54(
             $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
             {
               className: (0, import_classnames42.default)(SearchField_default.close, input_default.icon),
               onPress: resetSearch,
-              children: /* @__PURE__ */ jsx53(Icon, { children: /* @__PURE__ */ jsx53(Icons.Close, {}) })
+              children: /* @__PURE__ */ jsx54(Icon, { children: /* @__PURE__ */ jsx54(Icons.Close, {}) })
             }
           )
         ] })
@@ -31291,7 +31311,7 @@ import { forwardRef as forwardRef9 } from "react";
 var Select_default = { "button": "Select_button__YTM3Z", "list": "Select_list__MjJiN", "icon": "Select_icon__NzlhY" };
 
 // src/components/Select.tsx
-import { jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
 var Select = forwardRef9(
   ({
     children,
@@ -31307,7 +31327,7 @@ var Select = forwardRef9(
       onSelectionChange?.(e);
       onChange?.(e);
     };
-    return /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs33(
       $82d7e5349645de74$export$ef9b1a59e592288f,
       {
         ...props,
@@ -31315,12 +31335,12 @@ var Select = forwardRef9(
         className: (0, import_classnames43.default)(input_default.field, className),
         onSelectionChange: handleChange,
         children: [
-          label && /* @__PURE__ */ jsx54(Label, { children: label }),
-          /* @__PURE__ */ jsx54($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames43.default)(input_default.input, className), children: /* @__PURE__ */ jsxs32(Row, { justifyContent: "space-between", gap: "3", children: [
-            /* @__PURE__ */ jsx54($82d7e5349645de74$export$e288731fd71264f0, {}),
-            /* @__PURE__ */ jsx54("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx54(Icon, { rotate: 90, size: "xs", className: input_default.icon, children: /* @__PURE__ */ jsx54(Icons.Chevron, {}) }) })
+          label && /* @__PURE__ */ jsx55(Label, { children: label }),
+          /* @__PURE__ */ jsx55($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames43.default)(input_default.input, className), children: /* @__PURE__ */ jsxs33(Row, { justifyContent: "space-between", gap: "3", children: [
+            /* @__PURE__ */ jsx55($82d7e5349645de74$export$e288731fd71264f0, {}),
+            /* @__PURE__ */ jsx55("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx55(Icon, { rotate: 90, size: "xs", className: input_default.icon, children: /* @__PURE__ */ jsx55(Icons.Chevron, {}) }) })
           ] }) }),
-          /* @__PURE__ */ jsx54(Popover, { children: /* @__PURE__ */ jsx54(List, { items, className: Select_default.list, children }) })
+          /* @__PURE__ */ jsx55(Popover, { children: /* @__PURE__ */ jsx55(List, { items, className: Select_default.list, children }) })
         ]
       }
     );
@@ -31335,18 +31355,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
-import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx56, jsxs as jsxs34 } from "react/jsx-runtime";
 var Slider = forwardRef10(
   ({ className, showValue = true, label, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs33($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames44.default)(Slider_default.slider, className), children: [
-      /* @__PURE__ */ jsxs33("div", { className: Slider_default.header, children: [
-        label && /* @__PURE__ */ jsx55(Label, { className: Slider_default.label, children: label }),
-        showValue && /* @__PURE__ */ jsx55($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
+    return /* @__PURE__ */ jsxs34($6f909507e6374d18$export$472062a354075cee, { ...props, ref, className: (0, import_classnames44.default)(Slider_default.slider, className), children: [
+      /* @__PURE__ */ jsxs34("div", { className: Slider_default.header, children: [
+        label && /* @__PURE__ */ jsx56(Label, { className: Slider_default.label, children: label }),
+        showValue && /* @__PURE__ */ jsx56($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output })
       ] }),
-      /* @__PURE__ */ jsx55($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
+      /* @__PURE__ */ jsx56($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
         const isHorizontal = state.orientation === "horizontal";
-        return /* @__PURE__ */ jsxs33(Fragment9, { children: [
-          /* @__PURE__ */ jsx55(
+        return /* @__PURE__ */ jsxs34(Fragment9, { children: [
+          /* @__PURE__ */ jsx56(
             "div",
             {
               className: Slider_default.fill,
@@ -31355,7 +31375,7 @@ var Slider = forwardRef10(
               }
             }
           ),
-          /* @__PURE__ */ jsx55($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
+          /* @__PURE__ */ jsx56($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
         ] });
       } })
     ] });
@@ -31369,11 +31389,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
-import { jsx as jsx56, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs35 } from "react/jsx-runtime";
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  return /* @__PURE__ */ jsxs34("div", { ...domProps, className: (0, import_classnames45.default)(StatusLight_default.statuslight, className), children: [
-    /* @__PURE__ */ jsx56("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs35("div", { ...domProps, className: (0, import_classnames45.default)(StatusLight_default.statuslight, className), children: [
+    /* @__PURE__ */ jsx57("div", { className: StatusLight_default.bg, children: /* @__PURE__ */ jsx57(
       "div",
       {
         className: (0, import_classnames45.default)(StatusLight_default.status, StatusLight_default[variant]),
@@ -31392,13 +31412,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
-import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx58, jsxs as jsxs36 } from "react/jsx-runtime";
 var Switch = forwardRef11(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ jsxs35(Fragment10, { children: [
-      label && /* @__PURE__ */ jsx57(Label, { children: label }),
-      /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs36(Fragment10, { children: [
+      label && /* @__PURE__ */ jsx58(Label, { children: label }),
+      /* @__PURE__ */ jsxs36(
         $8e59e948500a8fe1$export$b5d5cf8927ab7262,
         {
           ...props,
@@ -31406,7 +31426,7 @@ var Switch = forwardRef11(
           ref,
           className: (0, import_classnames46.default)(Switch_default.switch, className),
           children: [
-            /* @__PURE__ */ jsx57("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx57("div", { className: Switch_default.knob }) }),
+            /* @__PURE__ */ jsx58("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx58("div", { className: Switch_default.knob }) }),
             children
           ]
         }
@@ -31419,18 +31439,18 @@ var Switch = forwardRef11(
 var Tabs_default = { "tabs": "Tabs_tabs__ZmM4Z", "list": "Tabs_list__MGM4O", "quiet": "Tabs_quiet__YmI3N", "tab": "Tabs_tab__NWEyN" };
 
 // src/components/Tabs.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function Tabs({ children, ...props }) {
-  return /* @__PURE__ */ jsx58($5e8ad37a45e1c704$export$b2539bed5023c21c, { ...props, className: Tabs_default.tabs, children });
+  return /* @__PURE__ */ jsx59($5e8ad37a45e1c704$export$b2539bed5023c21c, { ...props, className: Tabs_default.tabs, children });
 }
 function TabList({ children, ...props }) {
-  return /* @__PURE__ */ jsx58($5e8ad37a45e1c704$export$e51a686c67fdaa2d, { ...props, className: Tabs_default.list, children });
+  return /* @__PURE__ */ jsx59($5e8ad37a45e1c704$export$e51a686c67fdaa2d, { ...props, className: Tabs_default.list, children });
 }
 function Tab({ children, ...props }) {
-  return /* @__PURE__ */ jsx58($5e8ad37a45e1c704$export$3e41faf802a29e71, { ...props, className: Tabs_default.tab, children });
+  return /* @__PURE__ */ jsx59($5e8ad37a45e1c704$export$3e41faf802a29e71, { ...props, className: Tabs_default.tab, children });
 }
 function TabPanel({ children, ...props }) {
-  return /* @__PURE__ */ jsx58($5e8ad37a45e1c704$export$3d96ec278d3efce4, { ...props, className: Tabs_default.panel, children });
+  return /* @__PURE__ */ jsx59($5e8ad37a45e1c704$export$3d96ec278d3efce4, { ...props, className: Tabs_default.panel, children });
 }
 
 // src/components/TextArea.tsx
@@ -31441,17 +31461,17 @@ import { forwardRef as forwardRef12 } from "react";
 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
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var TextArea = forwardRef12(
   ({ rows, cols, resize, className, style, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx59(
+    return /* @__PURE__ */ jsx60(
       TextField,
       {
         ...props,
         ref,
         className: (0, import_classnames47.default)(resize && TextArea_default[`resize-${resize}`]),
         asChild: true,
-        children: /* @__PURE__ */ jsx59($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
+        children: /* @__PURE__ */ jsx60($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
       }
     );
   }
@@ -31464,7 +31484,7 @@ var import_classnames48 = __toESM(require_classnames());
 var ThemeButton_default = { "button": "ThemeButton_button__OWVmZ" };
 
 // src/components/ThemeButton.tsx
-import { jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs37 } from "react/jsx-runtime";
 function ThemeButton({ className, variant = "quiet", ...props }) {
   const { theme, setTheme: setTheme2 } = useTheme();
   const transitions = useTransition(theme, {
@@ -31482,7 +31502,7 @@ function ThemeButton({ className, variant = "quiet", ...props }) {
   function handleClick() {
     setTheme2(theme === "light" ? "dark" : "light");
   }
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     Button,
     {
       ...props,
@@ -31492,7 +31512,7 @@ function ThemeButton({ className, variant = "quiet", ...props }) {
       children: [
         transitions((style, item) => (
           // @ts-ignore
-          /* @__PURE__ */ jsx60(animated.div, { style, children: /* @__PURE__ */ jsx60(Icon, { size: "sm", children: item === "light" ? /* @__PURE__ */ jsx60(Icons.Sun, {}) : /* @__PURE__ */ jsx60(Icons.Moon, {}) }) }, item)
+          /* @__PURE__ */ jsx61(animated.div, { style, children: /* @__PURE__ */ jsx61(Icon, { size: "sm", children: item === "light" ? /* @__PURE__ */ jsx61(Icons.Sun, {}) : /* @__PURE__ */ jsx61(Icons.Moon, {}) }) }, item)
         )),
         "\xA0"
       ]
@@ -31508,13 +31528,13 @@ var import_classnames49 = __toESM(require_classnames());
 var Toggle_default = { "toggle": "Toggle_toggle__NGNlM" };
 
 // src/components/Toggle.tsx
-import { Fragment as Fragment11, jsx as jsx61, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx62, jsxs as jsxs38 } from "react/jsx-runtime";
 var Toggle = forwardRef13(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ jsxs37(Fragment11, { children: [
-      label && /* @__PURE__ */ jsx61(Label, { children: label }),
-      /* @__PURE__ */ jsx61(
+    return /* @__PURE__ */ jsxs38(Fragment11, { children: [
+      label && /* @__PURE__ */ jsx62(Label, { children: label }),
+      /* @__PURE__ */ jsx62(
         $efde0372d7a700fe$export$d2b052e7b4be1756,
         {
           ...props,
@@ -31535,15 +31555,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
-import { jsx as jsx62, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
 function ToggleGroup({ label, className, children, ...props }) {
-  return /* @__PURE__ */ jsxs38($eaf9e70818b436db$export$67ea30858aaf75e3, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.group, className), selectionBehavior: "toggle", children: [
-    label && /* @__PURE__ */ jsx62(Label, { children: label }),
-    /* @__PURE__ */ jsx62($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
+  return /* @__PURE__ */ jsxs39($eaf9e70818b436db$export$67ea30858aaf75e3, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.group, className), selectionBehavior: "toggle", children: [
+    label && /* @__PURE__ */ jsx63(Label, { children: label }),
+    /* @__PURE__ */ jsx63($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })
   ] });
 }
 function ToggleGroupItem({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx62($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.item, className), children });
+  return /* @__PURE__ */ jsx63($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.item, className), children });
 }
 
 // src/components/Tooltip.tsx
@@ -31553,19 +31573,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
-import { jsx as jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs40 } from "react/jsx-runtime";
 function Tooltip({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs39($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames51.default)(Tooltip_default.tooltip, className), children: [
-    /* @__PURE__ */ jsx63($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ jsx63("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx63("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+  return /* @__PURE__ */ jsxs40($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: (0, import_classnames51.default)(Tooltip_default.tooltip, className), children: [
+    /* @__PURE__ */ jsx64($44f671af83e7d9e0$export$746d02f47f4d381, { className: Tooltip_default.arrow, children: /* @__PURE__ */ jsx64("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx64("path", { d: "M0 0 L4 4 L8 0" }) }) }),
     children
   ] });
 }
 
 // src/components/ZenProvider.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 function ZenProvider({ children, ...props }) {
   const { toast } = props;
-  return /* @__PURE__ */ jsx64(ToastProvider, { ...toast, children });
+  return /* @__PURE__ */ jsx65(ToastProvider, { ...toast, children });
 }
 export {
   Accordion,
@@ -31611,6 +31631,7 @@ export {
   Menu,
   MenuItem2 as MenuItem,
   $3674c52c6b3c5bce$export$27d2ad3c5815583e as MenuTrigger,
+  MobileMenuButton,
   Modal,
   NavigationMenu,
   NavigationMenuItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.36.0",
+  "version": "0.38.0",
   "description": "React components built by Umami",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",
@@ -49,7 +49,7 @@
     "@fontsource/jetbrains-mono": "^5.0.18",
     "@react-spring/web": "^9.7.5",
     "@umami/esbuild-plugin-css-modules": "0.2.0",
-    "@umami/shiso": "^0.21.0",
+    "@umami/shiso": "^0.22.0",
     "classnames": "^2.5.1",
     "dts-bundle": "^0.7.3",
     "glob": "^10.3.10",

package/styles.css

@@ -3531,6 +3531,22 @@ body a.Button_button__N2NhN {
   }
 }
 
+/* virtual-css:css:3bfbb09f24953e4c776b7494b4f2e619 */
+.MobileMenuButton_modal__N2FhM,
+.MobileMenuButton_dialog__OTM5N {
+  width: 100vw !important;
+  height: 100vh !important;
+  overflow: hidden;
+}
+.MobileMenuButton_dialog__OTM5N {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.MobileMenuButton_content__ZTg2O {
+  overflow: auto;
+}
+
 /* virtual-css:css:f06faaaaad4324b9459c87ab9d58d827 */
 .NavigationMenu_nav__MzRiY {
   display: flex;