@umami/react-zen 0.39.0 → 0.41.0

package/dist/index.mjs

@@ -25987,6 +25987,9 @@ var CSS_MAP = {
   marginRight: "margin-right",
   marginBottom: "margin-bottom",
   marginLeft: "margin-left",
+  overflow: "overflow",
+  overflowX: "overflow-x",
+  overflowY: "overflow-y",
   width: "width",
   height: "height",
   minHeight: "min-height",
@@ -26103,6 +26106,9 @@ function Box({
   marginRight,
   marginBottom,
   marginLeft,
+  overflow,
+  overflowX,
+  overflowY,
   width,
   minWidth,
   maxWidth,
@@ -26151,6 +26157,9 @@ function Box({
     marginRight,
     marginBottom,
     marginLeft,
+    overflow,
+    overflowX,
+    overflowY,
     width,
     minWidth,
     maxWidth,
@@ -30312,17 +30321,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
 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: (dialogProps) => {
-    return /* @__PURE__ */ jsxs10(Fragment2, { children: [
-      title && /* @__PURE__ */ jsx20("div", { className: Dialog_default.title, children: title }),
-      typeof children === "function" ? children(dialogProps) : children
-    ] });
-  } });
+function Dialog({ title, variant, children, className, ...props }) {
+  return /* @__PURE__ */ jsx20(
+    $de32f1b87079253c$export$3ddf2d174ce01153,
+    {
+      ...props,
+      className: (0, import_classnames13.default)(Dialog_default.dialog, variant && Dialog_default[variant], className),
+      children: (dialogProps) => {
+        return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+          title && /* @__PURE__ */ jsx20("div", { className: Dialog_default.title, children: title }),
+          typeof children === "function" ? children(dialogProps) : children
+        ] });
+      }
+    }
+  );
 }
 
 // src/components/Row.tsx
@@ -31074,40 +31090,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
 import { jsx as jsx47 } from "react/jsx-runtime";
-function Modal({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx47($f3f84453ead64de5$export$8948f78d83984c69, { ...props, className: Modal_default.overlay, children: /* @__PURE__ */ jsx47(
-    $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__YjAxN", "dialog": "MobileMenuButton_dialog__Mzc5Y", "content": "MobileMenuButton_content__MjQ3N" };
-
-// 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 })
-      ] });
-    } }) })
-  ] });
+function Modal({
+  position = "center",
+  offset,
+  children,
+  className,
+  style = {},
+  ...props
+}) {
+  if (offset) {
+    style[`--modal-offset`] = offset;
+  }
+  return /* @__PURE__ */ jsx47($f3f84453ead64de5$export$8948f78d83984c69, { ...props, className: Modal_default.overlay, style, isDismissable: true, children: /* @__PURE__ */ jsx47($f3f84453ead64de5$export$2b77a92f1a5ad772, { className: (0, import_classnames36.default)(Modal_default.modal, position && Modal_default[position], className), children }) });
 }
 
 // src/components/NavigationMenu.tsx
@@ -31125,14 +31123,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 jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
 function NavigationMenu({
   showArrow = true,
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx49("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.nav, className), children });
+  return /* @__PURE__ */ jsx48("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.nav, className), children });
 }
 function NavigationMenuItem({
   label,
@@ -31142,15 +31140,15 @@ function NavigationMenuItem({
 }) {
   const { activeMenu } = useNavigationMenu();
   if (label) {
-    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, {}) })
+    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, {}) })
       ] }),
       children
     ] });
   }
-  return /* @__PURE__ */ jsx49("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children });
+  return /* @__PURE__ */ jsx48("div", { ...props, className: (0, import_classnames37.default)(NavigationMenu_default.item, className), children });
 }
 
 // src/components/PasswordField.tsx
@@ -31161,17 +31159,17 @@ var import_classnames38 = __toESM(require_classnames());
 var PasswordField_default = { "icon": "PasswordField_icon__NDMyZ" };
 
 // src/components/PasswordField.tsx
-import { jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs27 } 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__ */ 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, {}) })
+    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, {}) })
       ] })
     ] });
   }
@@ -31184,12 +31182,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 jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
 function ProgressBar({ className, showValue, ...props }) {
-  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 })
+  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 })
     ] });
   } });
 }
@@ -31201,16 +31199,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 jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
 function ProgressCircle({ className, showValue, ...props }) {
-  return /* @__PURE__ */ jsx52($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames40.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
+  return /* @__PURE__ */ jsx51($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__ */ 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(
+    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(
           "circle",
           {
             className: ProgressCircle_default.fill,
@@ -31222,7 +31220,7 @@ function ProgressCircle({ className, showValue, ...props }) {
           }
         )
       ] }),
-      showValue && /* @__PURE__ */ jsx52("label", { className: ProgressCircle_default.value, children: valueText })
+      showValue && /* @__PURE__ */ jsx51("label", { className: ProgressCircle_default.value, children: valueText })
     ] });
   } });
 }
@@ -31235,17 +31233,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 jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
 var RadioGroup = forwardRef7(
   ({ label, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs31($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames41.default)(RadioGroup_default.radiogroup, className), children: [
-      label && /* @__PURE__ */ jsx53(Label, { children: label }),
+    return /* @__PURE__ */ jsxs30($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, ref, className: (0, import_classnames41.default)(RadioGroup_default.radiogroup, className), children: [
+      label && /* @__PURE__ */ jsx52(Label, { children: label }),
       children
     ] });
   }
 );
 function Radio({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx53($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames41.default)(RadioGroup_default.radio, className), children });
+  return /* @__PURE__ */ jsx52($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames41.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx
@@ -31256,7 +31254,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 jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
 var SearchField = forwardRef8(
   ({ label, value, delay = 0, onSearch, className, ...props }, ref) => {
     const [search, setSearch] = useState14(value ?? "");
@@ -31277,24 +31275,24 @@ var SearchField = forwardRef8(
         onSearch?.(searchValue);
       }
     }, [searchValue, delay, onSearch]);
-    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(
+    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(
             $3985021b0ad6602f$export$f5b8910cec6cf069,
             {
               className: (0, import_classnames42.default)(SearchField_default.input, input_default.input),
               onChange: handleChange
             }
           ),
-          state.value && /* @__PURE__ */ jsx54(
+          state.value && /* @__PURE__ */ jsx53(
             $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
             {
               className: (0, import_classnames42.default)(SearchField_default.close, input_default.icon),
               onPress: resetSearch,
-              children: /* @__PURE__ */ jsx54(Icon, { children: /* @__PURE__ */ jsx54(Icons.Close, {}) })
+              children: /* @__PURE__ */ jsx53(Icon, { children: /* @__PURE__ */ jsx53(Icons.Close, {}) })
             }
           )
         ] })
@@ -31311,7 +31309,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 jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
 var Select = forwardRef9(
   ({
     children,
@@ -31327,7 +31325,7 @@ var Select = forwardRef9(
       onSelectionChange?.(e);
       onChange?.(e);
     };
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs32(
       $82d7e5349645de74$export$ef9b1a59e592288f,
       {
         ...props,
@@ -31335,12 +31333,12 @@ var Select = forwardRef9(
         className: (0, import_classnames43.default)(input_default.field, className),
         onSelectionChange: handleChange,
         children: [
-          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, {}) }) })
+          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, {}) }) })
           ] }) }),
-          /* @__PURE__ */ jsx55(Popover, { children: /* @__PURE__ */ jsx55(List, { items, className: Select_default.list, children }) })
+          /* @__PURE__ */ jsx54(Popover, { children: /* @__PURE__ */ jsx54(List, { items, className: Select_default.list, children }) })
         ]
       }
     );
@@ -31355,18 +31353,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 jsx56, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
 var Slider = forwardRef10(
   ({ className, showValue = true, label, ...props }, ref) => {
-    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 })
+    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 })
       ] }),
-      /* @__PURE__ */ jsx56($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
+      /* @__PURE__ */ jsx55($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
         const isHorizontal = state.orientation === "horizontal";
-        return /* @__PURE__ */ jsxs34(Fragment9, { children: [
-          /* @__PURE__ */ jsx56(
+        return /* @__PURE__ */ jsxs33(Fragment9, { children: [
+          /* @__PURE__ */ jsx55(
             "div",
             {
               className: Slider_default.fill,
@@ -31375,7 +31373,7 @@ var Slider = forwardRef10(
               }
             }
           ),
-          /* @__PURE__ */ jsx56($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
+          /* @__PURE__ */ jsx55($6f909507e6374d18$export$2c1b491743890dec, { className: Slider_default.thumb })
         ] });
       } })
     ] });
@@ -31389,11 +31387,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 jsx57, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs34 } from "react/jsx-runtime";
 function StatusLight(props) {
   const { color, variant = "inactive", children, className, ...domProps } = props;
-  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(
+  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(
       "div",
       {
         className: (0, import_classnames45.default)(StatusLight_default.status, StatusLight_default[variant]),
@@ -31412,13 +31410,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 jsx58, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs35 } from "react/jsx-runtime";
 var Switch = forwardRef11(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ jsxs36(Fragment10, { children: [
-      label && /* @__PURE__ */ jsx58(Label, { children: label }),
-      /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs35(Fragment10, { children: [
+      label && /* @__PURE__ */ jsx57(Label, { children: label }),
+      /* @__PURE__ */ jsxs35(
         $8e59e948500a8fe1$export$b5d5cf8927ab7262,
         {
           ...props,
@@ -31426,7 +31424,7 @@ var Switch = forwardRef11(
           ref,
           className: (0, import_classnames46.default)(Switch_default.switch, className),
           children: [
-            /* @__PURE__ */ jsx58("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx58("div", { className: Switch_default.knob }) }),
+            /* @__PURE__ */ jsx57("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx57("div", { className: Switch_default.knob }) }),
             children
           ]
         }
@@ -31439,18 +31437,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 jsx59 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function Tabs({ children, ...props }) {
-  return /* @__PURE__ */ jsx59($5e8ad37a45e1c704$export$b2539bed5023c21c, { ...props, className: Tabs_default.tabs, children });
+  return /* @__PURE__ */ jsx58($5e8ad37a45e1c704$export$b2539bed5023c21c, { ...props, className: Tabs_default.tabs, children });
 }
 function TabList({ children, ...props }) {
-  return /* @__PURE__ */ jsx59($5e8ad37a45e1c704$export$e51a686c67fdaa2d, { ...props, className: Tabs_default.list, children });
+  return /* @__PURE__ */ jsx58($5e8ad37a45e1c704$export$e51a686c67fdaa2d, { ...props, className: Tabs_default.list, children });
 }
 function Tab({ children, ...props }) {
-  return /* @__PURE__ */ jsx59($5e8ad37a45e1c704$export$3e41faf802a29e71, { ...props, className: Tabs_default.tab, children });
+  return /* @__PURE__ */ jsx58($5e8ad37a45e1c704$export$3e41faf802a29e71, { ...props, className: Tabs_default.tab, children });
 }
 function TabPanel({ children, ...props }) {
-  return /* @__PURE__ */ jsx59($5e8ad37a45e1c704$export$3d96ec278d3efce4, { ...props, className: Tabs_default.panel, children });
+  return /* @__PURE__ */ jsx58($5e8ad37a45e1c704$export$3d96ec278d3efce4, { ...props, className: Tabs_default.panel, children });
 }
 
 // src/components/TextArea.tsx
@@ -31461,17 +31459,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 jsx60 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var TextArea = forwardRef12(
   ({ rows, cols, resize, className, style, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsx59(
       TextField,
       {
         ...props,
         ref,
         className: (0, import_classnames47.default)(resize && TextArea_default[`resize-${resize}`]),
         asChild: true,
-        children: /* @__PURE__ */ jsx60($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
+        children: /* @__PURE__ */ jsx59($216918bed6669f72$export$f5c9f3c2c4054eec, { rows, cols, style: { ...style }, children })
       }
     );
   }
@@ -31484,7 +31482,7 @@ var import_classnames48 = __toESM(require_classnames());
 var ThemeButton_default = { "button": "ThemeButton_button__OWVmZ" };
 
 // src/components/ThemeButton.tsx
-import { jsx as jsx61, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
 function ThemeButton({ className, variant = "quiet", ...props }) {
   const { theme, setTheme: setTheme2 } = useTheme();
   const transitions = useTransition(theme, {
@@ -31502,7 +31500,7 @@ function ThemeButton({ className, variant = "quiet", ...props }) {
   function handleClick() {
     setTheme2(theme === "light" ? "dark" : "light");
   }
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs36(
     Button,
     {
       ...props,
@@ -31512,7 +31510,7 @@ function ThemeButton({ className, variant = "quiet", ...props }) {
       children: [
         transitions((style, item) => (
           // @ts-ignore
-          /* @__PURE__ */ jsx61(animated.div, { style, children: /* @__PURE__ */ jsx61(Icon, { size: "sm", children: item === "light" ? /* @__PURE__ */ jsx61(Icons.Sun, {}) : /* @__PURE__ */ jsx61(Icons.Moon, {}) }) }, item)
+          /* @__PURE__ */ jsx60(animated.div, { style, children: /* @__PURE__ */ jsx60(Icon, { size: "sm", children: item === "light" ? /* @__PURE__ */ jsx60(Icons.Sun, {}) : /* @__PURE__ */ jsx60(Icons.Moon, {}) }) }, item)
         )),
         "\xA0"
       ]
@@ -31528,13 +31526,13 @@ var import_classnames49 = __toESM(require_classnames());
 var Toggle_default = { "toggle": "Toggle_toggle__NGNlM" };
 
 // src/components/Toggle.tsx
-import { Fragment as Fragment11, jsx as jsx62, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx61, jsxs as jsxs37 } from "react/jsx-runtime";
 var Toggle = forwardRef13(
   ({ label, children, className, ...props }, ref) => {
     const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-    return /* @__PURE__ */ jsxs38(Fragment11, { children: [
-      label && /* @__PURE__ */ jsx62(Label, { children: label }),
-      /* @__PURE__ */ jsx62(
+    return /* @__PURE__ */ jsxs37(Fragment11, { children: [
+      label && /* @__PURE__ */ jsx61(Label, { children: label }),
+      /* @__PURE__ */ jsx61(
         $efde0372d7a700fe$export$d2b052e7b4be1756,
         {
           ...props,
@@ -31555,15 +31553,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 jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs38 } from "react/jsx-runtime";
 function ToggleGroup({ label, className, children, ...props }) {
-  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 })
+  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 })
   ] });
 }
 function ToggleGroupItem({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx63($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.item, className), children });
+  return /* @__PURE__ */ jsx62($eaf9e70818b436db$export$3288d34c523a1192, { ...props, className: (0, import_classnames50.default)(ToggleGroup_default.item, className), children });
 }
 
 // src/components/Tooltip.tsx
@@ -31573,19 +31571,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 jsx64, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
 function Tooltip({ children, className, ...props }) {
-  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" }) }) }),
+  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" }) }) }),
     children
   ] });
 }
 
 // src/components/ZenProvider.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 function ZenProvider({ children, ...props }) {
   const { toast } = props;
-  return /* @__PURE__ */ jsx65(ToastProvider, { ...toast, children });
+  return /* @__PURE__ */ jsx64(ToastProvider, { ...toast, children });
 }
 export {
   Accordion,
@@ -31631,7 +31629,6 @@ 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.39.0",
+  "version": "0.41.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.22.0",
+    "@umami/shiso": "^0.26.0",
     "classnames": "^2.5.1",
     "dts-bundle": "^0.7.3",
     "glob": "^10.3.10",