@umami/react-zen 0.47.0 → 0.49.0

package/dist/index.css

@@ -2771,22 +2771,22 @@ body a.Button_button__NjVkM {
 }
 
 /* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
-.List_list__Y2EzO {
+.List_list__MzQ4M {
   min-width: 100px;
   outline: none;
 }
-.List_separator__ZmQ2M {
+.List_separator__ODc0Y {
   border-bottom: var(--border);
 }
-.List_section__OTk2Y:not(:last-child) {
+.List_section__NTZiN:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.List_header__YTlmN {
+.List_header__NTUxM {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.List_item__ZGUyN {
+.List_item__ZjQ4M {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2800,21 +2800,23 @@ body a.Button_button__NjVkM {
   outline: none;
   border-radius: var(--border-radius);
 }
-.List_item__ZGUyN[data-focus],
-.List_item__ZGUyN[data-focus-visible] {
+.List_item__ZjQ4M[data-focus],
+.List_item__ZjQ4M[data-focus-visible] {
   outline: var(--outline);
   background: var(--highlight-color);
 }
-.List_item__ZGUyN:hover {
+.List_item__ZjQ4M:hover {
   background: var(--highlight-color);
 }
-.List_item__ZGUyN[data-selected] {
+.List_item__ZjQ4M[data-selected] {
   font-weight: bold;
 }
-.List_item__ZGUyN[data-selected] .List_check__NjI4Y {
-  display: block;
+.List_item__ZjQ4M[data-selected] .List_check__YTJhM {
+  display: flex;
+  justify-content: flex-end;
+  flex: 1;
 }
-.List_check__NjI4Y {
+.List_check__YTJhM {
   display: none;
 }
 
@@ -3198,7 +3200,7 @@ body a.Button_button__NjVkM {
 }
 
 /* virtual-css:css:3130df15a3cfaee8cb812b182afb7ee1 */
-.Menu_menu__NzMzO {
+.Menu_menu__YzMzM {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
@@ -3206,45 +3208,47 @@ body a.Button_button__NjVkM {
   box-shadow: var(--box-shadow-3);
   background: var(--background-color);
 }
-.Menu_separator__MzFhN {
+.Menu_separator__NDY4M {
   border-bottom: var(--border);
 }
-.Menu_section__NTBjZ:not(:last-child) {
+.Menu_section__MWI1M:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.Menu_header__ZDQ4Y {
+.Menu_header__ZGRjO {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.Menu_item__MmJhY {
+.Menu_item__M2I5Y {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: var(--gap);
   font-size: var(--font-size);
   color: var(--font-color);
   background: var(--background-color);
   padding: var(--padding);
   border-radius: var(--border-radius);
-  gap: var(--gap);
   cursor: pointer;
   outline: none;
+  width: 100%;
 }
-.Menu_item__MmJhY[data-focus],
-.Menu_item__MmJhY[data-focus-visible] {
+.Menu_item__M2I5Y[data-focus],
+.Menu_item__M2I5Y[data-focus-visible] {
   outline: var(--outline);
   background: var(--highlight-color);
 }
-.Menu_item__MmJhY:hover {
+.Menu_item__M2I5Y:hover {
   background: var(--highlight-color);
 }
-.Menu_item__MmJhY[data-selected] {
+.Menu_item__M2I5Y[data-selected] {
   font-weight: bold;
 }
-.Menu_item__MmJhY[data-selected] .Menu_check__NzZjZ {
-  display: block;
+.Menu_item__M2I5Y[data-selected] .Menu_check__NjA5O {
+  display: flex;
+  justify-content: flex-end;
+  flex: 1;
 }
-.Menu_check__NzZjZ {
+.Menu_check__NjA5O {
   display: none;
 }
 

package/dist/index.d.ts

@@ -620,7 +620,7 @@ declare module '@umami/react-zen/LoadingButton' {
 
 declare module '@umami/react-zen/Menu' {
     import { ReactNode } from 'react';
-    import { ListBoxSectionProps, MenuItemProps, MenuProps as AriaMenuProps, SeparatorProps } from 'react-aria-components';
+    import { MenuSectionProps, MenuItemProps, MenuProps as AriaMenuProps, SeparatorProps } from 'react-aria-components';
     interface MenuProps extends AriaMenuProps<any> {
         items?: any[];
         className?: string;
@@ -629,7 +629,7 @@ declare module '@umami/react-zen/Menu' {
     function Menu({ items, className, children, ...props }: MenuProps): import("react").JSX.Element;
     function MenuItem({ children, className, ...props }: MenuItemProps<any>): import("react").JSX.Element;
     function MenuSeparator({ className, ...props }: SeparatorProps): import("react").JSX.Element;
-    function MenuSection({ title, className, children, ...props }: ListBoxSectionProps<any> & {
+    function MenuSection({ title, className, children, ...props }: MenuSectionProps<any> & {
         title?: string;
     }): import("react").JSX.Element;
     export { Menu, MenuItem, MenuSeparator, MenuSection };

package/dist/index.js

@@ -43519,7 +43519,7 @@ var import_classnames20 = __toESM(require_classnames());
 var import_classnames18 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\List.module.css
-var List_default = { "list": "List_list__Y2EzO", "separator": "List_separator__ZmQ2M", "section": "List_section__OTk2Y", "header": "List_header__YTlmN", "item": "List_item__ZGUyN", "check": "List_check__NjI4Y" };
+var List_default = { "list": "List_list__MzQ4M", "separator": "List_separator__ODc0Y", "section": "List_section__NTZiN", "header": "List_header__NTUxM", "item": "List_item__ZjQ4M", "check": "List_check__YTJhM" };
 
 // src/components/List.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
@@ -43534,7 +43534,7 @@ function List({ items, className, children, ...props }) {
 function ListItem({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)($eed445e0843c11d0$export$a11e76429ed99b4, { ...props, className: (0, import_classnames18.default)(List_default.item, className), children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { size: "sm", className: List_default.check, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icons.Check, {}) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-hidden": "true", className: List_default.check, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icons.Check, {}) }) })
   ] });
 }
 function ListSeparator({ className, ...props }) {
@@ -44105,7 +44105,7 @@ function Loading(props) {
 var import_classnames34 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Menu.module.css
-var Menu_default = { "menu": "Menu_menu__NzMzO", "separator": "Menu_separator__MzFhN", "section": "Menu_section__NTBjZ", "header": "Menu_header__ZDQ4Y", "item": "Menu_item__MmJhY", "check": "Menu_check__NzZjZ" };
+var Menu_default = { "menu": "Menu_menu__YzMzM", "separator": "Menu_separator__NDY4M", "section": "Menu_section__MWI1M", "header": "Menu_header__ZGRjO", "item": "Menu_item__M2I5Y", "check": "Menu_check__NjA5O" };
 
 // src/components/Menu.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
@@ -44120,7 +44120,7 @@ function Menu2({ items, className, children, ...props }) {
 function MenuItem2({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames34.default)(Menu_default.item, className), children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { className: Menu_default.check, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icons.Check, {}) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { "aria-hidden": "true", className: Menu_default.check, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icons.Check, {}) }) })
   ] });
 }
 function MenuSeparator({ className, ...props }) {

package/dist/index.mjs

@@ -43417,7 +43417,7 @@ var import_classnames20 = __toESM(require_classnames());
 var import_classnames18 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\List.module.css
-var List_default = { "list": "List_list__Y2EzO", "separator": "List_separator__ZmQ2M", "section": "List_section__OTk2Y", "header": "List_header__YTlmN", "item": "List_item__ZGUyN", "check": "List_check__NjI4Y" };
+var List_default = { "list": "List_list__MzQ4M", "separator": "List_separator__ODc0Y", "section": "List_section__NTZiN", "header": "List_header__NTUxM", "item": "List_item__ZjQ4M", "check": "List_check__YTJhM" };
 
 // src/components/List.tsx
 import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -43432,7 +43432,7 @@ function List({ items, className, children, ...props }) {
 function ListItem({ children, className, ...props }) {
   return /* @__PURE__ */ jsxs15($eed445e0843c11d0$export$a11e76429ed99b4, { ...props, className: (0, import_classnames18.default)(List_default.item, className), children: [
     children,
-    /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28(Icon, { size: "sm", className: List_default.check, children: /* @__PURE__ */ jsx28(Icons.Check, {}) }) })
+    /* @__PURE__ */ jsx28("div", { "aria-hidden": "true", className: List_default.check, children: /* @__PURE__ */ jsx28(Icon, { children: /* @__PURE__ */ jsx28(Icons.Check, {}) }) })
   ] });
 }
 function ListSeparator({ className, ...props }) {
@@ -44003,7 +44003,7 @@ function Loading(props) {
 var import_classnames34 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Menu.module.css
-var Menu_default = { "menu": "Menu_menu__NzMzO", "separator": "Menu_separator__MzFhN", "section": "Menu_section__NTBjZ", "header": "Menu_header__ZDQ4Y", "item": "Menu_item__MmJhY", "check": "Menu_check__NzZjZ" };
+var Menu_default = { "menu": "Menu_menu__YzMzM", "separator": "Menu_separator__NDY4M", "section": "Menu_section__MWI1M", "header": "Menu_header__ZGRjO", "item": "Menu_item__M2I5Y", "check": "Menu_check__NjA5O" };
 
 // src/components/Menu.tsx
 import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -44018,7 +44018,7 @@ function Menu2({ items, className, children, ...props }) {
 function MenuItem2({ children, className, ...props }) {
   return /* @__PURE__ */ jsxs24($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames34.default)(Menu_default.item, className), children: [
     children,
-    /* @__PURE__ */ jsx45("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx45(Icon, { className: Menu_default.check, children: /* @__PURE__ */ jsx45(Icons.Check, {}) }) })
+    /* @__PURE__ */ jsx45("div", { "aria-hidden": "true", className: Menu_default.check, children: /* @__PURE__ */ jsx45(Icon, { children: /* @__PURE__ */ jsx45(Icons.Check, {}) }) })
   ] });
 }
 function MenuSeparator({ className, ...props }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.47.0",
+  "version": "0.49.0",
   "description": "React components built by Umami",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",

package/styles.css

@@ -3039,22 +3039,22 @@ body a.Button_button__NjVkM {
 }
 
 /* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
-.List_list__Y2EzO {
+.List_list__MzQ4M {
   min-width: 100px;
   outline: none;
 }
-.List_separator__ZmQ2M {
+.List_separator__ODc0Y {
   border-bottom: var(--border);
 }
-.List_section__OTk2Y:not(:last-child) {
+.List_section__NTZiN:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.List_header__YTlmN {
+.List_header__NTUxM {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.List_item__ZGUyN {
+.List_item__ZjQ4M {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3068,21 +3068,23 @@ body a.Button_button__NjVkM {
   outline: none;
   border-radius: var(--border-radius);
 }
-.List_item__ZGUyN[data-focus],
-.List_item__ZGUyN[data-focus-visible] {
+.List_item__ZjQ4M[data-focus],
+.List_item__ZjQ4M[data-focus-visible] {
   outline: var(--outline);
   background: var(--highlight-color);
 }
-.List_item__ZGUyN:hover {
+.List_item__ZjQ4M:hover {
   background: var(--highlight-color);
 }
-.List_item__ZGUyN[data-selected] {
+.List_item__ZjQ4M[data-selected] {
   font-weight: bold;
 }
-.List_item__ZGUyN[data-selected] .List_check__NjI4Y {
-  display: block;
+.List_item__ZjQ4M[data-selected] .List_check__YTJhM {
+  display: flex;
+  justify-content: flex-end;
+  flex: 1;
 }
-.List_check__NjI4Y {
+.List_check__YTJhM {
   display: none;
 }
 
@@ -3466,7 +3468,7 @@ body a.Button_button__NjVkM {
 }
 
 /* virtual-css:css:3130df15a3cfaee8cb812b182afb7ee1 */
-.Menu_menu__NzMzO {
+.Menu_menu__YzMzM {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
@@ -3474,45 +3476,47 @@ body a.Button_button__NjVkM {
   box-shadow: var(--box-shadow-3);
   background: var(--background-color);
 }
-.Menu_separator__MzFhN {
+.Menu_separator__NDY4M {
   border-bottom: var(--border);
 }
-.Menu_section__NTBjZ:not(:last-child) {
+.Menu_section__MWI1M:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.Menu_header__ZDQ4Y {
+.Menu_header__ZGRjO {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.Menu_item__MmJhY {
+.Menu_item__M2I5Y {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: var(--gap);
   font-size: var(--font-size);
   color: var(--font-color);
   background: var(--background-color);
   padding: var(--padding);
   border-radius: var(--border-radius);
-  gap: var(--gap);
   cursor: pointer;
   outline: none;
+  width: 100%;
 }
-.Menu_item__MmJhY[data-focus],
-.Menu_item__MmJhY[data-focus-visible] {
+.Menu_item__M2I5Y[data-focus],
+.Menu_item__M2I5Y[data-focus-visible] {
   outline: var(--outline);
   background: var(--highlight-color);
 }
-.Menu_item__MmJhY:hover {
+.Menu_item__M2I5Y:hover {
   background: var(--highlight-color);
 }
-.Menu_item__MmJhY[data-selected] {
+.Menu_item__M2I5Y[data-selected] {
   font-weight: bold;
 }
-.Menu_item__MmJhY[data-selected] .Menu_check__NzZjZ {
-  display: block;
+.Menu_item__M2I5Y[data-selected] .Menu_check__NjA5O {
+  display: flex;
+  justify-content: flex-end;
+  flex: 1;
 }
-.Menu_check__NzZjZ {
+.Menu_check__NjA5O {
   display: none;
 }