@umami/react-zen 0.175.0 → 0.176.0

package/dist/index.css

@@ -4194,7 +4194,7 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:3130df15a3cfaee8cb812b182afb7ee1 */
-.Menu_menu__MDc3M {
+.Menu_menu__NjQ5M {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
@@ -4203,21 +4203,22 @@ body a.Button_button__NGQyO {
   background: var(--background-color);
   overflow: hidden;
 }
-.Menu_separator__MWI1M {
+.Menu_separator__Mjg5Y {
   border-bottom: var(--border);
   margin: var(--spacing-2) calc(-1 * var(--spacing-3));
 }
-.Menu_section__OTMzY:not(:last-child) {
+.Menu_section__NThhN:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.Menu_header__YjkwY {
+.Menu_header__ZjQ0Z {
   font-size: var(--font-size-3);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.Menu_item__ODRkY {
+.Menu_item__MWVhY {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: var(--gap);
   font-size: var(--font-size);
   color: var(--font-color);
@@ -4228,30 +4229,35 @@ body a.Button_button__NGQyO {
   outline: none;
   width: 100%;
 }
-.Menu_item__ODRkY[data-disabled] {
+.Menu_item__MWVhY[data-disabled] {
   color: var(--font-color-disabled);
 }
-.Menu_item__ODRkY[data-focus],
-.Menu_item__ODRkY[data-focus-visible] {
+.Menu_item__MWVhY[data-focus],
+.Menu_item__MWVhY[data-focus-visible] {
   outline: var(--outline);
   background: var(--highlight-color);
 }
-.Menu_item__ODRkY:hover {
+.Menu_item__MWVhY:hover {
   background: var(--highlight-color);
 }
-.Menu_item__ODRkY[data-selected] {
+.Menu_item__MWVhY[data-selected] {
   font-weight: bold;
-  & .Menu_checkmark__ZmU2Y {
+  & .Menu_checkmark__ZWVlY {
     display: flex;
     justify-content: flex-end;
   }
 }
-.Menu_checkmark__ZmU2Y {
+.Menu_checkmark__ZWVlY {
   display: none;
 }
-.Menu_hideCheckmark__NGQ4Y .Menu_checkmark__ZmU2Y {
+.Menu_hideCheckmark__MDQxM .Menu_checkmark__ZWVlY {
   display: none;
 }
+.Menu_label__NGU5Z {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap);
+}
 
 /* virtual-css:css:593a0302ed618f22d0e6c3631ec684d2 */
 .Modal_overlay__MzBhO {

package/dist/index.js

@@ -33578,7 +33578,7 @@ function Loading(props) {
 var import_classnames36 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Menu.module.css
-var Menu_default = { "menu": "Menu_menu__MDc3M", "separator": "Menu_separator__MWI1M", "section": "Menu_section__OTMzY", "header": "Menu_header__YjkwY", "item": "Menu_item__ODRkY", "checkmark": "Menu_checkmark__ZmU2Y", "hideCheckmark": "Menu_hideCheckmark__NGQ4Y" };
+var Menu_default = { "menu": "Menu_menu__NjQ5M", "separator": "Menu_separator__Mjg5Y", "section": "Menu_section__NThhN", "header": "Menu_header__ZjQ0Z", "item": "Menu_item__MWVhY", "checkmark": "Menu_checkmark__ZWVlY", "hideCheckmark": "Menu_hideCheckmark__MDQxM", "label": "Menu_label__NGU5Z" };
 
 // src/components/Menu.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
@@ -33587,7 +33587,7 @@ function Menu2({ className, children, ...props }) {
 }
 function MenuItem2({ showChecked = true, children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames36.default)(Menu_default.item, className), children: [
-    children,
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: Menu_default.label, children }),
     showChecked && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { "aria-hidden": "true", className: Menu_default.checkmark, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon2, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Check, {}) }) })
   ] });
 }

package/dist/index.mjs

@@ -33461,7 +33461,7 @@ function Loading(props) {
 var import_classnames36 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Menu.module.css
-var Menu_default = { "menu": "Menu_menu__MDc3M", "separator": "Menu_separator__MWI1M", "section": "Menu_section__OTMzY", "header": "Menu_header__YjkwY", "item": "Menu_item__ODRkY", "checkmark": "Menu_checkmark__ZmU2Y", "hideCheckmark": "Menu_hideCheckmark__NGQ4Y" };
+var Menu_default = { "menu": "Menu_menu__NjQ5M", "separator": "Menu_separator__Mjg5Y", "section": "Menu_section__NThhN", "header": "Menu_header__ZjQ0Z", "item": "Menu_item__MWVhY", "checkmark": "Menu_checkmark__ZWVlY", "hideCheckmark": "Menu_hideCheckmark__MDQxM", "label": "Menu_label__NGU5Z" };
 
 // src/components/Menu.tsx
 import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
@@ -33470,7 +33470,7 @@ function Menu2({ className, children, ...props }) {
 }
 function MenuItem2({ showChecked = true, children, className, ...props }) {
   return /* @__PURE__ */ jsxs28($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames36.default)(Menu_default.item, className), children: [
-    children,
+    /* @__PURE__ */ jsx51("div", { className: Menu_default.label, children }),
     showChecked && /* @__PURE__ */ jsx51("div", { "aria-hidden": "true", className: Menu_default.checkmark, children: /* @__PURE__ */ jsx51(Icon2, { children: /* @__PURE__ */ jsx51(Check, {}) }) })
   ] });
 }

package/package.json

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

package/styles.css

@@ -4512,7 +4512,7 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:3130df15a3cfaee8cb812b182afb7ee1 */
-.Menu_menu__MDc3M {
+.Menu_menu__NjQ5M {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
@@ -4521,21 +4521,22 @@ body a.Button_button__NGQyO {
   background: var(--background-color);
   overflow: hidden;
 }
-.Menu_separator__MWI1M {
+.Menu_separator__Mjg5Y {
   border-bottom: var(--border);
   margin: var(--spacing-2) calc(-1 * var(--spacing-3));
 }
-.Menu_section__OTMzY:not(:last-child) {
+.Menu_section__NThhN:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.Menu_header__YjkwY {
+.Menu_header__ZjQ0Z {
   font-size: var(--font-size-3);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.Menu_item__ODRkY {
+.Menu_item__MWVhY {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: var(--gap);
   font-size: var(--font-size);
   color: var(--font-color);
@@ -4546,30 +4547,35 @@ body a.Button_button__NGQyO {
   outline: none;
   width: 100%;
 }
-.Menu_item__ODRkY[data-disabled] {
+.Menu_item__MWVhY[data-disabled] {
   color: var(--font-color-disabled);
 }
-.Menu_item__ODRkY[data-focus],
-.Menu_item__ODRkY[data-focus-visible] {
+.Menu_item__MWVhY[data-focus],
+.Menu_item__MWVhY[data-focus-visible] {
   outline: var(--outline);
   background: var(--highlight-color);
 }
-.Menu_item__ODRkY:hover {
+.Menu_item__MWVhY:hover {
   background: var(--highlight-color);
 }
-.Menu_item__ODRkY[data-selected] {
+.Menu_item__MWVhY[data-selected] {
   font-weight: bold;
-  & .Menu_checkmark__ZmU2Y {
+  & .Menu_checkmark__ZWVlY {
     display: flex;
     justify-content: flex-end;
   }
 }
-.Menu_checkmark__ZmU2Y {
+.Menu_checkmark__ZWVlY {
   display: none;
 }
-.Menu_hideCheckmark__NGQ4Y .Menu_checkmark__ZmU2Y {
+.Menu_hideCheckmark__MDQxM .Menu_checkmark__ZWVlY {
   display: none;
 }
+.Menu_label__NGU5Z {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap);
+}
 
 /* virtual-css:css:593a0302ed618f22d0e6c3631ec684d2 */
 .Modal_overlay__MzBhO {