@umami/react-zen 0.185.0 → 0.186.0

package/dist/index.css

@@ -4193,28 +4193,27 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:3130df15a3cfaee8cb812b182afb7ee1 */
-.Menu_menu__MDZlN {
+.Menu_menu__OGI3N {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
   padding: var(--spacing-2);
   box-shadow: var(--box-shadow-3);
   background: var(--background-color);
-  overflow: hidden;
 }
-.Menu_separator__ZmMzZ {
+.Menu_separator__NzUwY {
   border-bottom: var(--border);
   margin: var(--spacing-2) calc(-1 * var(--spacing-3));
 }
-.Menu_section__OGU4Y:not(:last-child) {
+.Menu_section__ZTEwN:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.Menu_header__YmNkN {
+.Menu_header__NWMzN {
   font-size: var(--font-size-3);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.Menu_item__YjkxY {
+.Menu_item__NDAyO {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4228,36 +4227,39 @@ body a.Button_button__NGQyO {
   outline: none;
   width: 100%;
 }
-.Menu_item__YjkxY[data-disabled] {
+.Menu_item__NDAyO[data-disabled] {
   color: var(--font-color-disabled);
 }
-.Menu_item__YjkxY[data-focus],
-.Menu_item__YjkxY[data-focus-visible] {
+.Menu_item__NDAyO[data-focus],
+.Menu_item__NDAyO[data-focus-visible] {
   outline: var(--outline);
   background: var(--highlight-color);
 }
-.Menu_item__YjkxY:hover {
+.Menu_item__NDAyO:hover {
   background: var(--highlight-color);
 }
-.Menu_item__YjkxY[data-selected] {
+.Menu_item__NDAyO[data-selected] {
   font-weight: bold;
-  & .Menu_checkmark__OTM5Y {
+  & .Menu_checkmark__ZDU2Z {
     display: flex;
     justify-content: flex-end;
   }
 }
-.Menu_checkmark__OTM5Y {
+.Menu_checkmark__ZDU2Z {
   display: none;
 }
-.Menu_hideCheckmark__NWJjY .Menu_checkmark__OTM5Y {
+.Menu_hideCheckmark__MTYxO .Menu_checkmark__ZDU2Z {
   display: none;
 }
-.Menu_label__YjgwY {
+.Menu_label__MmZkZ {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--gap);
 }
+.Menu_content__N2Y0M {
+  overflow: auto;
+}
 
 /* virtual-css:css:593a0302ed618f22d0e6c3631ec684d2 */
 .Modal_overlay__MzBhO {
@@ -4665,39 +4667,35 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:844962527a8f0e375161b58db0fc39ed */
-.Sidebar_sidebar__MDdkM {
+.Sidebar_sidebar__NDg2N {
   height: 100%;
   font-size: var(--font-size);
-  border-right: 1px solid var(--border-color);
   width: var(--sidebar-expanded-width);
-  overflow: hidden;
   transition: width 0.1s ease-out;
   --sidebar-expanded-width: 260px;
   --sidebar-collapsed-width: 68px;
 }
-.Sidebar_header__YzgwY {
+.Sidebar_header__ZGU4M {
   display: flex;
   align-items: center;
   gap: var(--gap);
   padding: var(--padding);
 }
-.Sidebar_header__YzgwY .Sidebar_label__ZWRjN {
+.Sidebar_header__ZGU4M .Sidebar_label__NzZkM {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_section__N2E1Y {
+.Sidebar_section__NDY5Y {
   padding: var(--spacing-3);
-  overflow: hidden;
 }
-.Sidebar_title__ZjM4Z {
+.Sidebar_title__NmU4O {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_content__ZTA1O {
+.Sidebar_content__YjhhO {
   display: grid;
   min-height: 40px;
   gap: var(--gap);
-  overflow: hidden;
 }
-.Sidebar_item__ZWVjN {
+.Sidebar_item__YmFjY {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -4709,41 +4707,37 @@ body a.Button_button__NGQyO {
   border: 1px solid transparent;
   cursor: pointer;
   white-space: nowrap;
-  overflow: hidden;
 }
-.Sidebar_item__ZWVjN.Sidebar_selected__NjU5Z {
+.Sidebar_item__YmFjY.Sidebar_selected__NWU3Y {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_item__ZWVjN:hover {
+.Sidebar_item__YmFjY:hover {
   color: var(--font-color);
 }
-.Sidebar_label__ZWRjN {
+.Sidebar_label__NzZkM {
   opacity: 1;
   width: 100%;
   transition: all 0.3s;
 }
-.Sidebar_collapsed__ZGQyN {
+.Sidebar_collapsed__MDY4N {
   width: var(--sidebar-collapsed-width);
   transition: width 0.2s ease-in-out;
 }
-.Sidebar_collapsed__ZGQyN .Sidebar_item__ZWVjN {
+.Sidebar_collapsed__MDY4N .Sidebar_item__YmFjY {
   gap: 0;
 }
-.Sidebar_collapsed__ZGQyN .Sidebar_label__ZWRjN {
+.Sidebar_collapsed__MDY4N .Sidebar_label__NzZkM {
   display: none;
 }
-.Sidebar_muted__MTI3O .Sidebar_item__ZWVjN {
+.Sidebar_muted__N2U2M .Sidebar_item__YmFjY {
   color: var(--font-color-muted);
 }
-.Sidebar_muted__MTI3O .Sidebar_item__ZWVjN:hover {
+.Sidebar_muted__N2U2M .Sidebar_item__YmFjY:hover {
   color: var(--font-color);
 }
-.Sidebar_muted__MTI3O .Sidebar_item__ZWVjN.Sidebar_selected__NjU5Z {
+.Sidebar_muted__N2U2M .Sidebar_item__YmFjY.Sidebar_selected__NWU3Y {
   color: var(--font-color);
 }
-.Sidebar_sidebar__MDdkM.Sidebar_noborder__ZTFmM {
-  border: 0;
-}
 
 /* virtual-css:css:02d4c53a13519acb012573b18f89110d */
 .Slider_slider__MjBhO {

package/dist/index.d.mts

@@ -502,8 +502,9 @@ declare function MenuItem({ icon, label, showChecked, showSubMenuIcon, children,
 declare function MenuSeparator({ className, ...props }: SeparatorProps): react.JSX.Element;
 interface MenuSectionProps extends MenuSectionProps$1<any> {
     title?: string;
+    maxHeight?: number;
 }
-declare function MenuSection({ title, className, children, ...props }: MenuSectionProps): react.JSX.Element;
+declare function MenuSection({ title, maxHeight, className, style, children, ...props }: MenuSectionProps): react.JSX.Element;
 interface SubmenuTriggerProps extends SubmenuTriggerProps$1 {
 }
 declare function SubMenuTrigger({ children, ...props }: SubmenuTriggerProps): react.JSX.Element;
@@ -609,10 +610,9 @@ interface SidebarProps extends ColumnProps {
     itemBackgroundColor?: string;
     isCollapsed?: boolean;
     muteItems?: boolean;
-    showBorder?: boolean;
     children?: ReactNode;
 }
-declare function Sidebar({ itemBackgroundColor, isCollapsed, muteItems, showBorder, className, children, ...props }: SidebarProps): react.JSX.Element;
+declare function Sidebar({ itemBackgroundColor, isCollapsed, muteItems, className, children, ...props }: SidebarProps): react.JSX.Element;
 declare function SidebarSection({ title, className, children, ...props }: {
     title?: string;
     children: ReactNode;

package/dist/index.d.ts

@@ -502,8 +502,9 @@ declare function MenuItem({ icon, label, showChecked, showSubMenuIcon, children,
 declare function MenuSeparator({ className, ...props }: SeparatorProps): react.JSX.Element;
 interface MenuSectionProps extends MenuSectionProps$1<any> {
     title?: string;
+    maxHeight?: number;
 }
-declare function MenuSection({ title, className, children, ...props }: MenuSectionProps): react.JSX.Element;
+declare function MenuSection({ title, maxHeight, className, style, children, ...props }: MenuSectionProps): react.JSX.Element;
 interface SubmenuTriggerProps extends SubmenuTriggerProps$1 {
 }
 declare function SubMenuTrigger({ children, ...props }: SubmenuTriggerProps): react.JSX.Element;
@@ -609,10 +610,9 @@ interface SidebarProps extends ColumnProps {
     itemBackgroundColor?: string;
     isCollapsed?: boolean;
     muteItems?: boolean;
-    showBorder?: boolean;
     children?: ReactNode;
 }
-declare function Sidebar({ itemBackgroundColor, isCollapsed, muteItems, showBorder, className, children, ...props }: SidebarProps): react.JSX.Element;
+declare function Sidebar({ itemBackgroundColor, isCollapsed, muteItems, className, children, ...props }: SidebarProps): react.JSX.Element;
 declare function SidebarSection({ title, className, children, ...props }: {
     title?: string;
     children: ReactNode;

package/dist/index.js

@@ -33612,7 +33612,7 @@ function Loading({
 var import_classnames36 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Menu.module.css
-var Menu_default = { "menu": "Menu_menu__MDZlN", "separator": "Menu_separator__ZmMzZ", "section": "Menu_section__OGU4Y", "header": "Menu_header__YmNkN", "item": "Menu_item__YjkxY", "checkmark": "Menu_checkmark__OTM5Y", "hideCheckmark": "Menu_hideCheckmark__NWJjY", "label": "Menu_label__YjgwY" };
+var Menu_default = { "menu": "Menu_menu__OGI3N", "separator": "Menu_separator__NzUwY", "section": "Menu_section__ZTEwN", "header": "Menu_header__NWMzN", "item": "Menu_item__NDAyO", "checkmark": "Menu_checkmark__ZDU2Z", "hideCheckmark": "Menu_hideCheckmark__MTYxO", "label": "Menu_label__MmZkZ", "content": "Menu_content__N2Y0M" };
 
 // src/components/Menu.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
@@ -33641,10 +33641,29 @@ function MenuItem2({
 function MenuSeparator({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { ...props, className: (0, import_classnames36.default)(Menu_default.separator, className) });
 }
-function MenuSection({ title, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)($3674c52c6b3c5bce$export$4b1545b4f2016d26, { ...props, className: (0, import_classnames36.default)(Menu_default.section, className), children: [
+function MenuSection({
+  title,
+  maxHeight,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const sectionStyle = {
+    maxHeight,
+    overflow: maxHeight ? "auto" : void 0
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)($72a5793c14baf454$export$8b251419efc915eb, { className: Menu_default.header, children: title }),
-    children
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      $3674c52c6b3c5bce$export$4b1545b4f2016d26,
+      {
+        ...props,
+        className: (0, import_classnames36.default)(Menu_default.section, className),
+        style: { ...sectionStyle, ...style },
+        children
+      }
+    )
   ] });
 }
 function SubMenuTrigger({ children, ...props }) {
@@ -33720,7 +33739,7 @@ var import_jsx_runtime54 = require("react/jsx-runtime");
 var NavMenuContext = (0, import_react193.createContext)(null);
 function NavMenu({
   itemBackgroundColor = "2",
-  muteItems = true,
+  muteItems,
   className,
   style,
   children,
@@ -34054,7 +34073,7 @@ var import_react197 = require("react");
 var import_classnames47 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Sidebar.module.css
-var Sidebar_default = { "sidebar": "Sidebar_sidebar__MDdkM", "header": "Sidebar_header__YzgwY", "label": "Sidebar_label__ZWRjN", "section": "Sidebar_section__N2E1Y", "title": "Sidebar_title__ZjM4Z", "content": "Sidebar_content__ZTA1O", "item": "Sidebar_item__ZWVjN", "selected": "Sidebar_selected__NjU5Z", "collapsed": "Sidebar_collapsed__ZGQyN", "muted": "Sidebar_muted__MTI3O", "noborder": "Sidebar_noborder__ZTFmM" };
+var Sidebar_default = { "sidebar": "Sidebar_sidebar__NDg2N", "header": "Sidebar_header__ZGU4M", "label": "Sidebar_label__NzZkM", "section": "Sidebar_section__NDY5Y", "title": "Sidebar_title__NmU4O", "content": "Sidebar_content__YjhhO", "item": "Sidebar_item__YmFjY", "selected": "Sidebar_selected__NWU3Y", "collapsed": "Sidebar_collapsed__MDY4N", "muted": "Sidebar_muted__N2U2M" };
 
 // src/components/Sidebar.tsx
 var import_jsx_runtime62 = require("react/jsx-runtime");
@@ -34062,8 +34081,7 @@ var SidebarContext = (0, import_react197.createContext)(null);
 function Sidebar({
   itemBackgroundColor = "2",
   isCollapsed,
-  muteItems = true,
-  showBorder = true,
+  muteItems,
   className,
   children,
   ...props
@@ -34071,12 +34089,12 @@ function Sidebar({
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(SidebarContext.Provider, { value: { isCollapsed, itemBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     Column,
     {
+      border: "right",
       ...props,
       className: (0, import_classnames47.default)(
         Sidebar_default.sidebar,
         isCollapsed && Sidebar_default.collapsed,
         muteItems && Sidebar_default.muted,
-        !showBorder && Sidebar_default.noborder,
         className
       ),
       children

package/dist/index.mjs

@@ -33493,10 +33493,10 @@ function Loading({
 var import_classnames36 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Menu.module.css
-var Menu_default = { "menu": "Menu_menu__MDZlN", "separator": "Menu_separator__ZmMzZ", "section": "Menu_section__OGU4Y", "header": "Menu_header__YmNkN", "item": "Menu_item__YjkxY", "checkmark": "Menu_checkmark__OTM5Y", "hideCheckmark": "Menu_hideCheckmark__NWJjY", "label": "Menu_label__YjgwY" };
+var Menu_default = { "menu": "Menu_menu__OGI3N", "separator": "Menu_separator__NzUwY", "section": "Menu_section__ZTEwN", "header": "Menu_header__NWMzN", "item": "Menu_item__NDAyO", "checkmark": "Menu_checkmark__ZDU2Z", "hideCheckmark": "Menu_hideCheckmark__MTYxO", "label": "Menu_label__MmZkZ", "content": "Menu_content__N2Y0M" };
 
 // src/components/Menu.tsx
-import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
 function Menu2({ className, children, ...props }) {
   return /* @__PURE__ */ jsx51($3674c52c6b3c5bce$export$d9b273488cd8ce6f, { ...props, className: (0, import_classnames36.default)(Menu_default.menu, className), children });
 }
@@ -33522,10 +33522,29 @@ function MenuItem2({
 function MenuSeparator({ className, ...props }) {
   return /* @__PURE__ */ jsx51($431f98aba6844401$export$1ff3c3f08ae963c0, { ...props, className: (0, import_classnames36.default)(Menu_default.separator, className) });
 }
-function MenuSection({ title, className, children, ...props }) {
-  return /* @__PURE__ */ jsxs28($3674c52c6b3c5bce$export$4b1545b4f2016d26, { ...props, className: (0, import_classnames36.default)(Menu_default.section, className), children: [
+function MenuSection({
+  title,
+  maxHeight,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const sectionStyle = {
+    maxHeight,
+    overflow: maxHeight ? "auto" : void 0
+  };
+  return /* @__PURE__ */ jsxs28(Fragment9, { children: [
     title && /* @__PURE__ */ jsx51($72a5793c14baf454$export$8b251419efc915eb, { className: Menu_default.header, children: title }),
-    children
+    /* @__PURE__ */ jsx51(
+      $3674c52c6b3c5bce$export$4b1545b4f2016d26,
+      {
+        ...props,
+        className: (0, import_classnames36.default)(Menu_default.section, className),
+        style: { ...sectionStyle, ...style },
+        children
+      }
+    )
   ] });
 }
 function SubMenuTrigger({ children, ...props }) {
@@ -33605,7 +33624,7 @@ import { jsx as jsx54, jsxs as jsxs30 } from "react/jsx-runtime";
 var NavMenuContext = createContext4(null);
 function NavMenu({
   itemBackgroundColor = "2",
-  muteItems = true,
+  muteItems,
   className,
   style,
   children,
@@ -33680,12 +33699,12 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 // src/components/PasswordField.tsx
 import { useState as useState16 } from "react";
 var import_classnames40 = __toESM(require_classnames());
-import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs31 } from "react/jsx-runtime";
 function PasswordField({ label, className, ...props }) {
   const [show, setShow] = useState16(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state) => !state);
-  return /* @__PURE__ */ jsxs31(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs31(Fragment10, { children: [
     label && /* @__PURE__ */ jsx55(Label2, { children: label }),
     /* @__PURE__ */ jsxs31($bcdf0525bf22703d$export$2c73285ae9390cec, { "aria-label": "Password", ...props, className: (0, import_classnames40.default)(TextField_default.field, className), children: [
       /* @__PURE__ */ jsx55($3985021b0ad6602f$export$f5b8910cec6cf069, { type }),
@@ -33713,10 +33732,10 @@ var import_classnames42 = __toESM(require_classnames());
 var ProgressBar_default = { "progressbar": "ProgressBar_progressbar__YzdlO", "track": "ProgressBar_track__YzgzY", "fill": "ProgressBar_fill__ZTJlM", "value": "ProgressBar_value__NDk1Z" };
 
 // src/components/ProgressBar.tsx
-import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
 function ProgressBar2({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx57($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames42.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
-    return /* @__PURE__ */ jsxs32(Fragment10, { children: [
+    return /* @__PURE__ */ jsxs32(Fragment11, { children: [
       /* @__PURE__ */ jsx57("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ jsx57("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
       showPercentage && /* @__PURE__ */ jsx57("div", { className: ProgressBar_default.value, children: valueText })
     ] });
@@ -33730,13 +33749,13 @@ var import_classnames43 = __toESM(require_classnames());
 var ProgressCircle_default = { "progresscircle": "ProgressCircle_progresscircle__NGMyY", "track": "ProgressCircle_track__YzY2M", "fill": "ProgressCircle_fill__ZmMzM", "value": "ProgressCircle_value__YjM0Y" };
 
 // src/components/ProgressCircle.tsx
-import { Fragment as Fragment11, jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
 function ProgressCircle({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx58($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames43.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
     const radius = 45;
     const circumference = radius * 2 * Math.PI;
     const offset = circumference - percentage / 100 * circumference;
-    return /* @__PURE__ */ jsxs33(Fragment11, { children: [
+    return /* @__PURE__ */ jsxs33(Fragment12, { children: [
       /* @__PURE__ */ jsxs33("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ jsx58("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
         /* @__PURE__ */ jsx58(
@@ -33791,7 +33810,7 @@ function Radio2({ children, className, ...props }) {
 // src/components/SearchField.tsx
 import { useState as useState17, useEffect as useEffect11 } from "react";
 var import_classnames45 = __toESM(require_classnames());
-import { Fragment as Fragment12, jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
 function SearchField2({
   label,
   placeholder,
@@ -33822,7 +33841,7 @@ function SearchField2({
       onSearch?.(searchValue);
     }
   }, [searchValue, delay]);
-  return /* @__PURE__ */ jsxs35(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs35(Fragment13, { children: [
     label && /* @__PURE__ */ jsx60(Label2, { children: label }),
     /* @__PURE__ */ jsxs35(
       $440f4836bcb56932$export$b94867ecbd698f21,
@@ -33939,7 +33958,7 @@ var import_classnames47 = __toESM(require_classnames());
 import { createContext as createContext5, useContext as useContext7 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\Sidebar.module.css
-var Sidebar_default = { "sidebar": "Sidebar_sidebar__MDdkM", "header": "Sidebar_header__YzgwY", "label": "Sidebar_label__ZWRjN", "section": "Sidebar_section__N2E1Y", "title": "Sidebar_title__ZjM4Z", "content": "Sidebar_content__ZTA1O", "item": "Sidebar_item__ZWVjN", "selected": "Sidebar_selected__NjU5Z", "collapsed": "Sidebar_collapsed__ZGQyN", "muted": "Sidebar_muted__MTI3O", "noborder": "Sidebar_noborder__ZTFmM" };
+var Sidebar_default = { "sidebar": "Sidebar_sidebar__NDg2N", "header": "Sidebar_header__ZGU4M", "label": "Sidebar_label__NzZkM", "section": "Sidebar_section__NDY5Y", "title": "Sidebar_title__NmU4O", "content": "Sidebar_content__YjhhO", "item": "Sidebar_item__YmFjY", "selected": "Sidebar_selected__NWU3Y", "collapsed": "Sidebar_collapsed__MDY4N", "muted": "Sidebar_muted__N2U2M" };
 
 // src/components/Sidebar.tsx
 import { jsx as jsx62, jsxs as jsxs37 } from "react/jsx-runtime";
@@ -33947,8 +33966,7 @@ var SidebarContext = createContext5(null);
 function Sidebar({
   itemBackgroundColor = "2",
   isCollapsed,
-  muteItems = true,
-  showBorder = true,
+  muteItems,
   className,
   children,
   ...props
@@ -33956,12 +33974,12 @@ function Sidebar({
   return /* @__PURE__ */ jsx62(SidebarContext.Provider, { value: { isCollapsed, itemBackgroundColor }, children: /* @__PURE__ */ jsx62(
     Column,
     {
+      border: "right",
       ...props,
       className: (0, import_classnames47.default)(
         Sidebar_default.sidebar,
         isCollapsed && Sidebar_default.collapsed,
         muteItems && Sidebar_default.muted,
-        !showBorder && Sidebar_default.noborder,
         className
       ),
       children
@@ -34027,7 +34045,7 @@ var import_classnames48 = __toESM(require_classnames());
 var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_header__ZTE2M", "track": "Slider_track__ODk5M", "fill": "Slider_fill__YzdhM", "thumb": "Slider_thumb__NGEzM" };
 
 // src/components/Slider.tsx
-import { Fragment as Fragment13, jsx as jsx63, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx63, jsxs as jsxs38 } from "react/jsx-runtime";
 function Slider2({ className, showValue = true, label, ...props }) {
   return /* @__PURE__ */ jsxs38($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames48.default)(Slider_default.slider, className), children: [
     /* @__PURE__ */ jsxs38("div", { className: Slider_default.header, children: [
@@ -34036,7 +34054,7 @@ function Slider2({ className, showValue = true, label, ...props }) {
     ] }),
     /* @__PURE__ */ jsx63($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
       const isHorizontal = state.orientation === "horizontal";
-      return /* @__PURE__ */ jsxs38(Fragment13, { children: [
+      return /* @__PURE__ */ jsxs38(Fragment14, { children: [
         /* @__PURE__ */ jsx63(
           "div",
           {
@@ -34161,10 +34179,10 @@ var import_classnames52 = __toESM(require_classnames());
 var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
 
 // src/components/Toggle.tsx
-import { Fragment as Fragment14, jsx as jsx68, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx68, jsxs as jsxs42 } from "react/jsx-runtime";
 function Toggle({ label, children, className, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ jsxs42(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs42(Fragment15, { children: [
     label && /* @__PURE__ */ jsx68(Label2, { children: label }),
     /* @__PURE__ */ jsx68(
       $efde0372d7a700fe$export$d2b052e7b4be1756,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.185.0",
+  "version": "0.186.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",

package/styles.css

@@ -4511,28 +4511,27 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:3130df15a3cfaee8cb812b182afb7ee1 */
-.Menu_menu__MDZlN {
+.Menu_menu__OGI3N {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
   padding: var(--spacing-2);
   box-shadow: var(--box-shadow-3);
   background: var(--background-color);
-  overflow: hidden;
 }
-.Menu_separator__ZmMzZ {
+.Menu_separator__NzUwY {
   border-bottom: var(--border);
   margin: var(--spacing-2) calc(-1 * var(--spacing-3));
 }
-.Menu_section__OGU4Y:not(:last-child) {
+.Menu_section__ZTEwN:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.Menu_header__YmNkN {
+.Menu_header__NWMzN {
   font-size: var(--font-size-3);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.Menu_item__YjkxY {
+.Menu_item__NDAyO {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4546,36 +4545,39 @@ body a.Button_button__NGQyO {
   outline: none;
   width: 100%;
 }
-.Menu_item__YjkxY[data-disabled] {
+.Menu_item__NDAyO[data-disabled] {
   color: var(--font-color-disabled);
 }
-.Menu_item__YjkxY[data-focus],
-.Menu_item__YjkxY[data-focus-visible] {
+.Menu_item__NDAyO[data-focus],
+.Menu_item__NDAyO[data-focus-visible] {
   outline: var(--outline);
   background: var(--highlight-color);
 }
-.Menu_item__YjkxY:hover {
+.Menu_item__NDAyO:hover {
   background: var(--highlight-color);
 }
-.Menu_item__YjkxY[data-selected] {
+.Menu_item__NDAyO[data-selected] {
   font-weight: bold;
-  & .Menu_checkmark__OTM5Y {
+  & .Menu_checkmark__ZDU2Z {
     display: flex;
     justify-content: flex-end;
   }
 }
-.Menu_checkmark__OTM5Y {
+.Menu_checkmark__ZDU2Z {
   display: none;
 }
-.Menu_hideCheckmark__NWJjY .Menu_checkmark__OTM5Y {
+.Menu_hideCheckmark__MTYxO .Menu_checkmark__ZDU2Z {
   display: none;
 }
-.Menu_label__YjgwY {
+.Menu_label__MmZkZ {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--gap);
 }
+.Menu_content__N2Y0M {
+  overflow: auto;
+}
 
 /* virtual-css:css:593a0302ed618f22d0e6c3631ec684d2 */
 .Modal_overlay__MzBhO {
@@ -4983,39 +4985,35 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:844962527a8f0e375161b58db0fc39ed */
-.Sidebar_sidebar__MDdkM {
+.Sidebar_sidebar__NDg2N {
   height: 100%;
   font-size: var(--font-size);
-  border-right: 1px solid var(--border-color);
   width: var(--sidebar-expanded-width);
-  overflow: hidden;
   transition: width 0.1s ease-out;
   --sidebar-expanded-width: 260px;
   --sidebar-collapsed-width: 68px;
 }
-.Sidebar_header__YzgwY {
+.Sidebar_header__ZGU4M {
   display: flex;
   align-items: center;
   gap: var(--gap);
   padding: var(--padding);
 }
-.Sidebar_header__YzgwY .Sidebar_label__ZWRjN {
+.Sidebar_header__ZGU4M .Sidebar_label__NzZkM {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_section__N2E1Y {
+.Sidebar_section__NDY5Y {
   padding: var(--spacing-3);
-  overflow: hidden;
 }
-.Sidebar_title__ZjM4Z {
+.Sidebar_title__NmU4O {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_content__ZTA1O {
+.Sidebar_content__YjhhO {
   display: grid;
   min-height: 40px;
   gap: var(--gap);
-  overflow: hidden;
 }
-.Sidebar_item__ZWVjN {
+.Sidebar_item__YmFjY {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -5027,41 +5025,37 @@ body a.Button_button__NGQyO {
   border: 1px solid transparent;
   cursor: pointer;
   white-space: nowrap;
-  overflow: hidden;
 }
-.Sidebar_item__ZWVjN.Sidebar_selected__NjU5Z {
+.Sidebar_item__YmFjY.Sidebar_selected__NWU3Y {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_item__ZWVjN:hover {
+.Sidebar_item__YmFjY:hover {
   color: var(--font-color);
 }
-.Sidebar_label__ZWRjN {
+.Sidebar_label__NzZkM {
   opacity: 1;
   width: 100%;
   transition: all 0.3s;
 }
-.Sidebar_collapsed__ZGQyN {
+.Sidebar_collapsed__MDY4N {
   width: var(--sidebar-collapsed-width);
   transition: width 0.2s ease-in-out;
 }
-.Sidebar_collapsed__ZGQyN .Sidebar_item__ZWVjN {
+.Sidebar_collapsed__MDY4N .Sidebar_item__YmFjY {
   gap: 0;
 }
-.Sidebar_collapsed__ZGQyN .Sidebar_label__ZWRjN {
+.Sidebar_collapsed__MDY4N .Sidebar_label__NzZkM {
   display: none;
 }
-.Sidebar_muted__MTI3O .Sidebar_item__ZWVjN {
+.Sidebar_muted__N2U2M .Sidebar_item__YmFjY {
   color: var(--font-color-muted);
 }
-.Sidebar_muted__MTI3O .Sidebar_item__ZWVjN:hover {
+.Sidebar_muted__N2U2M .Sidebar_item__YmFjY:hover {
   color: var(--font-color);
 }
-.Sidebar_muted__MTI3O .Sidebar_item__ZWVjN.Sidebar_selected__NjU5Z {
+.Sidebar_muted__N2U2M .Sidebar_item__YmFjY.Sidebar_selected__NWU3Y {
   color: var(--font-color);
 }
-.Sidebar_sidebar__MDdkM.Sidebar_noborder__ZTFmM {
-  border: 0;
-}
 
 /* virtual-css:css:02d4c53a13519acb012573b18f89110d */
 .Slider_slider__MjBhO {