@vector-im/compound-web 8.4.0 → 9.0.0

package/dist/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { type FC, type ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport {\n  MenuContext,\n  type MenuData,\n  type MenuItemWrapperProps,\n} from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * CSS classes for the menu.\n   */\n  className?: string;\n\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  className,\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content asChild side={side} align={align} sideOffset={8}>\n          <FloatingMenu\n            className={className}\n            title={title}\n            showTitle={showTitle}\n          >\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;;;;;;;AA6EA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,0BACG,kBAAA,EAAiB,UAAU,YAAY,QAAW,SAAO,MACvD,UACH;AAMK,MAAM,OAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AAGJ,QAAM,WAAW,YAAA;AACjB,QAAM,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EAAA;AAEf,QAAM,WACJ,oBAAC,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAA,cAAa;AAGtD,SAAO,SACL,qBAAC,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAA,oBAAC,OAAO,SAAP,EAAe,SAAO,MAAE,UAAA,SAAQ;AAAA,IACjC,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAW,WAAW,EAAE,GAAG;AAAA,MACtD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAA,oBAAC,YAAA,EAAW,OAAe,SAAA,CAAS,EAAA,CACtC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,IAEA,qBAAC,MAAA,EAAK,MAAY,cAChB,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,SAAO,MAAE,UAAA,SAAQ;AAAA,IAC1B,oBAAC,UACC,UAAA,oBAAC,SAAA,EAAQ,SAAO,MAAC,MAAY,OAAc,YAAY,GACrD,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Menu.js","names":[],"sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { type FC, type ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport {\n  MenuContext,\n  type MenuData,\n  type MenuItemWrapperProps,\n} from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * CSS classes for the menu.\n   */\n  className?: string;\n\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  className,\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content asChild side={side} align={align} sideOffset={8}>\n          <FloatingMenu\n            className={className}\n            title={title}\n            showTitle={showTitle}\n          >\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"mappings":";;;;;;;;;;;AA6EA,IAAM,2BAAqD,EACzD,UACA,eAEA,oBAAC,kBAAD;CAAkB,UAAU,YAAY,KAAA;CAAW,SAAA;CAChD;CACgB,CAAA;;;;AAMrB,IAAa,QAAmB,EAC9B,WACA,OACA,YAAY,MACZ,MACA,cACA,SACA,UAAU,cACV,OAAO,UACP,QAAQ,eACJ;CAGJ,MAAM,WAAW,aAAa;CAC9B,MAAM,SAAS,aAAa,aAAa,aAAa;CACtD,MAAM,UAAoB,eACjB;EACL,iBAAiB,SAAS,OAAO;EACjC;EACD,GACD,CAAC,aAAa,CACf;CACD,MAAM,WACJ,oBAAC,YAAY,UAAb;EAAsB,OAAO;YAAU;EAAoC,CAAA;AAG7E,QAAO,SACL,qBAAC,OAAO,MAAR;EAAmB;EAAoB;YAAvC,CACE,oBAAC,OAAO,SAAR;GAAgB,SAAA;aAAS;GAAyB,CAAA,EAClD,qBAAC,OAAO,QAAR,EAAA,UAAA,CACE,oBAAC,OAAO,SAAR,EAAgB,WAAW,WAAW,0BAAW,GAAG,EAAI,CAAA,EACxD,oBAAC,OAAO,SAAR;GAAgB,SAAA;aACd,oBAAC,YAAD;IAAmB;IAAQ;IAAsB,CAAA;GAClC,CAAA,CACH,EAAA,CAAA,CACJ;MAEd,qBAAC,MAAD;EAAY;EAAoB;YAAhC,CACE,oBAAC,SAAD;GAAS,SAAA;aAAS;GAAkB,CAAA,EACpC,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAD;GAAS,SAAA;GAAc;GAAa;GAAO,YAAY;aACrD,oBAAC,cAAD;IACa;IACJ;IACI;IAEV;IACY,CAAA;GACP,CAAA,EACH,CAAA,CACJ"}

package/dist/components/Menu/MenuContext.cjs

@@ -1,6 +1,11 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const MenuContext = React.createContext(null);
+require("../../_virtual/_rolldown/runtime.cjs");
+//#region src/components/Menu/MenuContext.tsx
+/**
+* A React context providing information about the menu in which a given
+* component resides.
+*/
+var MenuContext = (0, require("react").createContext)(null);
+//#endregion
 exports.MenuContext = MenuContext;
-//# sourceMappingURL=MenuContext.cjs.map
+
+//# sourceMappingURL=MenuContext.cjs.map

package/dist/components/Menu/MenuContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuContext.cjs","sources":["../../../src/components/Menu/MenuContext.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport { type ComponentType, type ReactNode, createContext } from \"react\";\n\nexport interface MenuItemWrapperProps {\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  onSelect: (e: Event) => void;\n  children: ReactNode;\n}\n\nexport interface MenuData {\n  /**\n   * A component that wraps interactive menu items.\n   */\n  MenuItemWrapper: ComponentType<MenuItemWrapperProps> | null;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange: (open: boolean) => void;\n}\n\n/**\n * A React context providing information about the menu in which a given\n * component resides.\n */\nexport const MenuContext = createContext<MenuData | null>(null);\n"],"names":["createContext"],"mappings":";;;AAkCO,MAAM,cAAcA,MAAAA,cAA+B,IAAI;;"}
+{"version":3,"file":"MenuContext.cjs","names":[],"sources":["../../../src/components/Menu/MenuContext.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport { type ComponentType, type ReactNode, createContext } from \"react\";\n\nexport interface MenuItemWrapperProps {\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  onSelect: (e: Event) => void;\n  children: ReactNode;\n}\n\nexport interface MenuData {\n  /**\n   * A component that wraps interactive menu items.\n   */\n  MenuItemWrapper: ComponentType<MenuItemWrapperProps> | null;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange: (open: boolean) => void;\n}\n\n/**\n * A React context providing information about the menu in which a given\n * component resides.\n */\nexport const MenuContext = createContext<MenuData | null>(null);\n"],"mappings":";;;;;;AAkCA,IAAa,eAAA,oBAAA,eAA6C,KAAK"}

package/dist/components/Menu/MenuContext.js

@@ -1,6 +1,11 @@
 import { createContext } from "react";
-const MenuContext = createContext(null);
-export {
-  MenuContext
-};
-//# sourceMappingURL=MenuContext.js.map
+//#region src/components/Menu/MenuContext.tsx
+/**
+* A React context providing information about the menu in which a given
+* component resides.
+*/
+var MenuContext = createContext(null);
+//#endregion
+export { MenuContext };
+
+//# sourceMappingURL=MenuContext.js.map

package/dist/components/Menu/MenuContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuContext.js","sources":["../../../src/components/Menu/MenuContext.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport { type ComponentType, type ReactNode, createContext } from \"react\";\n\nexport interface MenuItemWrapperProps {\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  onSelect: (e: Event) => void;\n  children: ReactNode;\n}\n\nexport interface MenuData {\n  /**\n   * A component that wraps interactive menu items.\n   */\n  MenuItemWrapper: ComponentType<MenuItemWrapperProps> | null;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange: (open: boolean) => void;\n}\n\n/**\n * A React context providing information about the menu in which a given\n * component resides.\n */\nexport const MenuContext = createContext<MenuData | null>(null);\n"],"names":[],"mappings":";AAkCO,MAAM,cAAc,cAA+B,IAAI;"}
+{"version":3,"file":"MenuContext.js","names":[],"sources":["../../../src/components/Menu/MenuContext.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport { type ComponentType, type ReactNode, createContext } from \"react\";\n\nexport interface MenuItemWrapperProps {\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  onSelect: (e: Event) => void;\n  children: ReactNode;\n}\n\nexport interface MenuData {\n  /**\n   * A component that wraps interactive menu items.\n   */\n  MenuItemWrapper: ComponentType<MenuItemWrapperProps> | null;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange: (open: boolean) => void;\n}\n\n/**\n * A React context providing information about the menu in which a given\n * component resides.\n */\nexport const MenuContext = createContext<MenuData | null>(null);\n"],"mappings":";;;;;;AAkCA,IAAa,cAAc,cAA+B,KAAK"}

package/dist/components/Menu/MenuItem.cjs

@@ -1,97 +1,85 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const React = require("react");
-const MenuItem_module = require("./MenuItem.module.css.cjs");
-const Text = require("../Typography/Text.cjs");
-const ChevronRightIcon = require("@vector-im/compound-design-tokens/assets/web/icons/chevron-right");
-const MenuContext = require("./MenuContext.cjs");
-const reactSlot = require("@radix-ui/react-slot");
-const MenuItem = ({
-  as,
-  className,
-  Icon,
-  label,
-  labelProps,
-  onSelect,
-  kind = "primary",
-  children,
-  onClick: onClickProp,
-  disabled,
-  hideChevron,
-  ...props
-}) => {
-  const Component = as ?? "button";
-  const context = React.useContext(MenuContext.MenuContext);
-  const onClick = React.useCallback(
-    (e) => {
-      onClickProp?.(e);
-      if (onSelect !== null && context?.MenuItemWrapper == null) {
-        const selectEvent = new CustomEvent("menu.itemSelect", {
-          bubbles: true,
-          cancelable: true
-        });
-        onSelect(selectEvent);
-        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);
-      }
-    },
-    [context, onSelect]
-  );
-  const iconIsReactElement = React.isValidElement(Icon);
-  const componentIcon = Icon;
-  const SvgIcon = Icon;
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(
-    Component,
-    {
-      role: "menuitem",
-      ...props,
-      className: classNames(className, MenuItem_module.default.item, {
-        [MenuItem_module.default.interactive]: onSelect !== null,
-        [MenuItem_module.default["no-label"]]: label === null,
-        [MenuItem_module.default["no-icon"]]: !Icon,
-        [MenuItem_module.default["disabled"]]: disabled
-      }),
-      "data-kind": kind,
-      onClick,
-      disabled: Component === "button" ? disabled : void 0,
-      "aria-disabled": Component === "button" ? void 0 : disabled,
-      children: [
-        Icon && (iconIsReactElement ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: MenuItem_module.default.icon, children: componentIcon }) : /* @__PURE__ */ jsxRuntime.jsx(
-          SvgIcon,
-          {
-            width: 24,
-            height: 24,
-            className: MenuItem_module.default.icon,
-            "aria-hidden": true
-          }
-        )),
-        label !== null && /* @__PURE__ */ jsxRuntime.jsx(
-          Text.Text,
-          {
-            className: MenuItem_module.default.label,
-            size: "md",
-            weight: "medium",
-            as: "span",
-            ...labelProps,
-            children: label
-          }
-        ),
-        !hideChevron && (Component === "button" || Component === "a") && /* @__PURE__ */ jsxRuntime.jsx(
-          ChevronRightIcon,
-          {
-            width: 8,
-            height: 24,
-            className: MenuItem_module.default["nav-hint"],
-            "aria-hidden": true,
-            viewBox: "8 0 8 24"
-          }
-        ),
-        children
-      ]
-    }
-  );
-  return context?.MenuItemWrapper == null || onSelect === null ? content : /* @__PURE__ */ jsxRuntime.jsx(context.MenuItemWrapper, { onSelect, children: content });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Text = require("../Typography/Text.cjs");
+const require_MenuContext = require("./MenuContext.cjs");
+const require_MenuItem_module = require("./MenuItem.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _vector_im_compound_design_tokens_assets_web_icons_chevron_right = require("@vector-im/compound-design-tokens/assets/web/icons/chevron-right");
+_vector_im_compound_design_tokens_assets_web_icons_chevron_right = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_chevron_right);
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+//#region src/components/Menu/MenuItem.tsx
+/**
+* An item within a menu, acting either as a navigation button, or simply a
+* container for other interactive elements.
+* Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+*/
+var MenuItem = ({ as, className, Icon, label, labelProps, onSelect, kind = "primary", children, onClick: onClickProp, disabled, hideChevron, ...props }) => {
+	const Component = as ?? "button";
+	const context = (0, react.useContext)(require_MenuContext.MenuContext);
+	const onClick = (0, react.useCallback)((e) => {
+		onClickProp?.(e);
+		if (onSelect !== null && context?.MenuItemWrapper == null) {
+			const selectEvent = new CustomEvent("menu.itemSelect", {
+				bubbles: true,
+				cancelable: true
+			});
+			onSelect(selectEvent);
+			if (!selectEvent.defaultPrevented) context?.onOpenChange(false);
+		}
+	}, [context, onSelect]);
+	const iconIsReactElement = (0, react.isValidElement)(Icon);
+	const componentIcon = Icon;
+	const SvgIcon = Icon;
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Component, {
+		role: "menuitem",
+		...props,
+		className: (0, classnames.default)(className, require_MenuItem_module.default.item, {
+			[require_MenuItem_module.default.interactive]: onSelect !== null,
+			[require_MenuItem_module.default["no-label"]]: label === null,
+			[require_MenuItem_module.default["no-icon"]]: !Icon,
+			[require_MenuItem_module.default["disabled"]]: disabled
+		}),
+		"data-kind": kind,
+		onClick,
+		disabled: Component === "button" ? disabled : void 0,
+		"aria-disabled": Component === "button" ? void 0 : disabled,
+		children: [
+			Icon && (iconIsReactElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slot.Slot, {
+				className: require_MenuItem_module.default.icon,
+				children: componentIcon
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgIcon, {
+				width: 24,
+				height: 24,
+				className: require_MenuItem_module.default.icon,
+				"aria-hidden": true
+			})),
+			label !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+				className: require_MenuItem_module.default.label,
+				size: "md",
+				weight: "medium",
+				as: "span",
+				...labelProps,
+				children: label
+			}),
+			!hideChevron && (Component === "button" || Component === "a") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_vector_im_compound_design_tokens_assets_web_icons_chevron_right.default, {
+				width: 8,
+				height: 24,
+				className: require_MenuItem_module.default["nav-hint"],
+				"aria-hidden": true,
+				viewBox: "8 0 8 24"
+			}),
+			children
+		]
+	});
+	return context?.MenuItemWrapper == null || onSelect === null ? content : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(context.MenuItemWrapper, {
+		onSelect,
+		children: content
+	});
 };
+//#endregion
 exports.MenuItem = MenuItem;
-//# sourceMappingURL=MenuItem.cjs.map
+
+//# sourceMappingURL=MenuItem.cjs.map

package/dist/components/Menu/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ElementType,\n  isValidElement,\n  type ReactElement,\n  type SVGAttributes,\n  useCallback,\n  useContext,\n  type MouseEventHandler,\n} from \"react\";\nimport styles from \"./MenuItem.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport ChevronRightIcon from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-right\";\nimport { MenuContext } from \"./MenuContext\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype MenuItemElement = \"button\" | \"a\" | \"div\";\n\ntype Props<C extends MenuItemElement> = {\n  /**\n   * The element type of this menu item.\n   * @default button\n   */\n  as?: C;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon to show on this menu item.\n   * When `Icon` is a ReactElement, it should spread the props\n   */\n  Icon?: ComponentType<SVGAttributes<SVGElement>> | ReactElement;\n  /**\n   * The label to show on this menu item.\n   */\n  // This prop is required because it's rare to not want a label\n  label: string | null;\n  /**\n   * Additional properties to pass to the Text label component.\n   */\n  labelProps?: ComponentPropsWithoutRef<typeof Text>;\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  // This prop is required because it's rare to not want a selection handler\n  onSelect: ((e: Event) => void) | null;\n  /**\n   * Event callback for when the item is clicked.\n   * @param e\n   */\n  onClick?: MouseEventHandler<HTMLElementTagNameMap[C]>;\n  /**\n   * The color variant of the menu item.\n   * @default primary\n   */\n  kind?: \"primary\" | \"critical\";\n  disabled?: boolean;\n  /**\n   * Whether to hide the chevron navigation hint.\n   */\n  hideChevron?: boolean;\n} & Omit<ComponentPropsWithoutRef<C>, \"onSelect\" | \"onClick\">;\n\n/**\n * An item within a menu, acting either as a navigation button, or simply a\n * container for other interactive elements.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const MenuItem = <C extends MenuItemElement = \"button\">({\n  as,\n  className,\n  Icon,\n  label,\n  labelProps,\n  onSelect,\n  kind = \"primary\",\n  children,\n  onClick: onClickProp,\n  disabled,\n  hideChevron,\n  ...props\n}: Props<C>): React.ReactElement => {\n  const Component = as ?? (\"button\" as ElementType);\n  const context = useContext(MenuContext);\n\n  const onClick = useCallback(\n    (e: Parameters<Exclude<typeof onClickProp, undefined>>[0]) => {\n      (onClickProp as ((e_: typeof e) => void) | undefined)?.(e);\n      // If there is no wrapper component to automatically handle onSelect, we\n      // need to handle it manually, dismissing the menu as the default action\n      if (onSelect !== null && context?.MenuItemWrapper == null) {\n        const selectEvent = new CustomEvent(\"menu.itemSelect\", {\n          bubbles: true,\n          cancelable: true,\n        });\n        onSelect(selectEvent);\n        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);\n      }\n    },\n    [context, onSelect],\n  );\n\n  const iconIsReactElement = isValidElement(Icon);\n  const componentIcon = Icon as ReactElement;\n  const SvgIcon = Icon as ComponentType<SVGAttributes<SVGElement>>;\n\n  const content = (\n    <Component\n      role=\"menuitem\"\n      {...props}\n      className={classnames(className, styles.item, {\n        [styles.interactive]: onSelect !== null,\n        [styles[\"no-label\"]]: label === null,\n        [styles[\"no-icon\"]]: !Icon,\n        [styles[\"disabled\"]]: disabled,\n      })}\n      data-kind={kind}\n      onClick={onClick}\n      disabled={Component === \"button\" ? disabled : undefined}\n      aria-disabled={Component === \"button\" ? undefined : disabled}\n    >\n      {Icon &&\n        (iconIsReactElement ? (\n          <Slot className={styles.icon}>{componentIcon}</Slot>\n        ) : (\n          <SvgIcon\n            width={24}\n            height={24}\n            className={styles.icon}\n            aria-hidden={true}\n          />\n        ))}\n\n      {label !== null && (\n        <Text\n          className={styles.label}\n          size=\"md\"\n          weight=\"medium\"\n          as=\"span\"\n          {...labelProps}\n        >\n          {label}\n        </Text>\n      )}\n      {/* We use CSS to swap between this navigation hint and the provided\n      children on hover - see the styles module. */}\n      {!hideChevron && (Component === \"button\" || Component === \"a\") && (\n        <ChevronRightIcon\n          width={8}\n          height={24}\n          className={styles[\"nav-hint\"]}\n          aria-hidden={true}\n          /* The SVG is a small icon in a large canvas. It probably ought to be\n             cropped, but we can adjust the viewBox here to chop off the horizontal\n             space to get it closer to the right hand edge.\n           */\n          viewBox=\"8 0 8 24\"\n        />\n      )}\n      {children}\n    </Component>\n  );\n\n  return context?.MenuItemWrapper == null || onSelect === null ? (\n    content\n  ) : (\n    <context.MenuItemWrapper onSelect={onSelect}>\n      {content}\n    </context.MenuItemWrapper>\n  );\n};\n"],"names":["useContext","MenuContext","useCallback","isValidElement","jsxs","classnames","styles","jsx","Slot","Text"],"mappings":";;;;;;;;;;AAgFO,MAAM,WAAW,CAAuC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoC;AAClC,QAAM,YAAY,MAAO;AACzB,QAAM,UAAUA,MAAAA,WAAWC,uBAAW;AAEtC,QAAM,UAAUC,MAAAA;AAAAA,IACd,CAAC,MAA6D;AAC3D,oBAAuD,CAAC;AAGzD,UAAI,aAAa,QAAQ,SAAS,mBAAmB,MAAM;AACzD,cAAM,cAAc,IAAI,YAAY,mBAAmB;AAAA,UACrD,SAAS;AAAA,UACT,YAAY;AAAA,QAAA,CACb;AACD,iBAAS,WAAW;AACpB,YAAI,CAAC,YAAY,iBAAkB,UAAS,aAAa,KAAK;AAAA,MAChE;AAAA,IACF;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EAAA;AAGpB,QAAM,qBAAqBC,MAAAA,eAAe,IAAI;AAC9C,QAAM,gBAAgB;AACtB,QAAM,UAAU;AAEhB,QAAM,UACJC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWC,WAAW,WAAWC,gBAAAA,QAAO,MAAM;AAAA,QAC5C,CAACA,gBAAAA,QAAO,WAAW,GAAG,aAAa;AAAA,QACnC,CAACA,wBAAO,UAAU,CAAC,GAAG,UAAU;AAAA,QAChC,CAACA,gBAAAA,QAAO,SAAS,CAAC,GAAG,CAAC;AAAA,QACtB,CAACA,gBAAAA,QAAO,UAAU,CAAC,GAAG;AAAA,MAAA,CACvB;AAAA,MACD,aAAW;AAAA,MACX;AAAA,MACA,UAAU,cAAc,WAAW,WAAW;AAAA,MAC9C,iBAAe,cAAc,WAAW,SAAY;AAAA,MAEnD,UAAA;AAAA,QAAA,SACE,qBACCC,+BAACC,UAAAA,MAAA,EAAK,WAAWF,gBAAAA,QAAO,MAAO,yBAAc,IAE7CC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWD,gBAAAA,QAAO;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QAAA;AAAA,QAIlB,UAAU,QACTC,2BAAAA;AAAAA,UAACE,KAAAA;AAAAA,UAAA;AAAA,YACC,WAAWH,gBAAAA,QAAO;AAAA,YAClB,MAAK;AAAA,YACL,QAAO;AAAA,YACP,IAAG;AAAA,YACF,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAKJ,CAAC,gBAAgB,cAAc,YAAY,cAAc,QACxDC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWD,gBAAAA,QAAO,UAAU;AAAA,YAC5B,eAAa;AAAA,YAKb,SAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGX;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIL,SAAO,SAAS,mBAAmB,QAAQ,aAAa,OACtD,UAEAC,+BAAC,QAAQ,iBAAR,EAAwB,UACtB,UAAA,QAAA,CACH;AAEJ;;"}
+{"version":3,"file":"MenuItem.cjs","names":[],"sources":["../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ElementType,\n  isValidElement,\n  type ReactElement,\n  type SVGAttributes,\n  useCallback,\n  useContext,\n  type MouseEventHandler,\n} from \"react\";\nimport styles from \"./MenuItem.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport ChevronRightIcon from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-right\";\nimport { MenuContext } from \"./MenuContext\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype MenuItemElement = \"button\" | \"a\" | \"div\";\n\ntype Props<C extends MenuItemElement> = {\n  /**\n   * The element type of this menu item.\n   * @default button\n   */\n  as?: C;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon to show on this menu item.\n   * When `Icon` is a ReactElement, it should spread the props\n   */\n  Icon?: ComponentType<SVGAttributes<SVGElement>> | ReactElement;\n  /**\n   * The label to show on this menu item.\n   */\n  // This prop is required because it's rare to not want a label\n  label: string | null;\n  /**\n   * Additional properties to pass to the Text label component.\n   */\n  labelProps?: ComponentPropsWithoutRef<typeof Text>;\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  // This prop is required because it's rare to not want a selection handler\n  onSelect: ((e: Event) => void) | null;\n  /**\n   * Event callback for when the item is clicked.\n   * @param e\n   */\n  onClick?: MouseEventHandler<HTMLElementTagNameMap[C]>;\n  /**\n   * The color variant of the menu item.\n   * @default primary\n   */\n  kind?: \"primary\" | \"critical\";\n  disabled?: boolean;\n  /**\n   * Whether to hide the chevron navigation hint.\n   */\n  hideChevron?: boolean;\n} & Omit<ComponentPropsWithoutRef<C>, \"onSelect\" | \"onClick\">;\n\n/**\n * An item within a menu, acting either as a navigation button, or simply a\n * container for other interactive elements.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const MenuItem = <C extends MenuItemElement = \"button\">({\n  as,\n  className,\n  Icon,\n  label,\n  labelProps,\n  onSelect,\n  kind = \"primary\",\n  children,\n  onClick: onClickProp,\n  disabled,\n  hideChevron,\n  ...props\n}: Props<C>): React.ReactElement => {\n  const Component = as ?? (\"button\" as ElementType);\n  const context = useContext(MenuContext);\n\n  const onClick = useCallback(\n    (e: Parameters<Exclude<typeof onClickProp, undefined>>[0]) => {\n      (onClickProp as ((e_: typeof e) => void) | undefined)?.(e);\n      // If there is no wrapper component to automatically handle onSelect, we\n      // need to handle it manually, dismissing the menu as the default action\n      if (onSelect !== null && context?.MenuItemWrapper == null) {\n        const selectEvent = new CustomEvent(\"menu.itemSelect\", {\n          bubbles: true,\n          cancelable: true,\n        });\n        onSelect(selectEvent);\n        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);\n      }\n    },\n    [context, onSelect],\n  );\n\n  const iconIsReactElement = isValidElement(Icon);\n  const componentIcon = Icon as ReactElement;\n  const SvgIcon = Icon as ComponentType<SVGAttributes<SVGElement>>;\n\n  const content = (\n    <Component\n      role=\"menuitem\"\n      {...props}\n      className={classnames(className, styles.item, {\n        [styles.interactive]: onSelect !== null,\n        [styles[\"no-label\"]]: label === null,\n        [styles[\"no-icon\"]]: !Icon,\n        [styles[\"disabled\"]]: disabled,\n      })}\n      data-kind={kind}\n      onClick={onClick}\n      disabled={Component === \"button\" ? disabled : undefined}\n      aria-disabled={Component === \"button\" ? undefined : disabled}\n    >\n      {Icon &&\n        (iconIsReactElement ? (\n          <Slot className={styles.icon}>{componentIcon}</Slot>\n        ) : (\n          <SvgIcon\n            width={24}\n            height={24}\n            className={styles.icon}\n            aria-hidden={true}\n          />\n        ))}\n\n      {label !== null && (\n        <Text\n          className={styles.label}\n          size=\"md\"\n          weight=\"medium\"\n          as=\"span\"\n          {...labelProps}\n        >\n          {label}\n        </Text>\n      )}\n      {/* We use CSS to swap between this navigation hint and the provided\n      children on hover - see the styles module. */}\n      {!hideChevron && (Component === \"button\" || Component === \"a\") && (\n        <ChevronRightIcon\n          width={8}\n          height={24}\n          className={styles[\"nav-hint\"]}\n          aria-hidden={true}\n          /* The SVG is a small icon in a large canvas. It probably ought to be\n             cropped, but we can adjust the viewBox here to chop off the horizontal\n             space to get it closer to the right hand edge.\n           */\n          viewBox=\"8 0 8 24\"\n        />\n      )}\n      {children}\n    </Component>\n  );\n\n  return context?.MenuItemWrapper == null || onSelect === null ? (\n    content\n  ) : (\n    <context.MenuItemWrapper onSelect={onSelect}>\n      {content}\n    </context.MenuItemWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgFA,IAAa,YAAkD,EAC7D,IACA,WACA,MACA,OACA,YACA,UACA,OAAO,WACP,UACA,SAAS,aACT,UACA,aACA,GAAG,YAC+B;CAClC,MAAM,YAAY,MAAO;CACzB,MAAM,WAAA,GAAA,MAAA,YAAqB,oBAAA,YAAY;CAEvC,MAAM,WAAA,GAAA,MAAA,cACH,MAA6D;AAC3D,gBAAuD,EAAE;AAG1D,MAAI,aAAa,QAAQ,SAAS,mBAAmB,MAAM;GACzD,MAAM,cAAc,IAAI,YAAY,mBAAmB;IACrD,SAAS;IACT,YAAY;IACb,CAAC;AACF,YAAS,YAAY;AACrB,OAAI,CAAC,YAAY,iBAAkB,UAAS,aAAa,MAAM;;IAGnE,CAAC,SAAS,SAAS,CACpB;CAED,MAAM,sBAAA,GAAA,MAAA,gBAAoC,KAAK;CAC/C,MAAM,gBAAgB;CACtB,MAAM,UAAU;CAEhB,MAAM,UACJ,iBAAA,GAAA,kBAAA,MAAC,WAAD;EACE,MAAK;EACL,GAAI;EACJ,YAAA,GAAA,WAAA,SAAsB,WAAW,wBAAA,QAAO,MAAM;IAC3C,wBAAA,QAAO,cAAc,aAAa;IAClC,wBAAA,QAAO,cAAc,UAAU;IAC/B,wBAAA,QAAO,aAAa,CAAC;IACrB,wBAAA,QAAO,cAAc;GACvB,CAAC;EACF,aAAW;EACF;EACT,UAAU,cAAc,WAAW,WAAW,KAAA;EAC9C,iBAAe,cAAc,WAAW,KAAA,IAAY;YAZtD;GAcG,SACE,qBACC,iBAAA,GAAA,kBAAA,KAAC,qBAAA,MAAD;IAAM,WAAW,wBAAA,QAAO;cAAO;IAAqB,CAAA,GAEpD,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACE,OAAO;IACP,QAAQ;IACR,WAAW,wBAAA,QAAO;IAClB,eAAa;IACb,CAAA;GAGL,UAAU,QACT,iBAAA,GAAA,kBAAA,KAAC,aAAA,MAAD;IACE,WAAW,wBAAA,QAAO;IAClB,MAAK;IACL,QAAO;IACP,IAAG;IACH,GAAI;cAEH;IACI,CAAA;GAIR,CAAC,gBAAgB,cAAc,YAAY,cAAc,QACxD,iBAAA,GAAA,kBAAA,KAAC,iEAAA,SAAD;IACE,OAAO;IACP,QAAQ;IACR,WAAW,wBAAA,QAAO;IAClB,eAAa;IAKb,SAAQ;IACR,CAAA;GAEH;GACS;;AAGd,QAAO,SAAS,mBAAmB,QAAQ,aAAa,OACtD,UAEA,iBAAA,GAAA,kBAAA,KAAC,QAAQ,iBAAT;EAAmC;YAChC;EACuB,CAAA"}

package/dist/components/Menu/MenuItem.js

@@ -1,97 +1,81 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import { useContext, useCallback, isValidElement } from "react";
-import styles from "./MenuItem.module.css.js";
 import { Text } from "../Typography/Text.js";
-import ChevronRightIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-right";
 import { MenuContext } from "./MenuContext.js";
+import MenuItem_module_default from "./MenuItem.module.js";
+import classNames from "classnames";
+import { isValidElement, useCallback, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ChevronRightIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-right";
 import { Slot } from "@radix-ui/react-slot";
-const MenuItem = ({
-  as,
-  className,
-  Icon,
-  label,
-  labelProps,
-  onSelect,
-  kind = "primary",
-  children,
-  onClick: onClickProp,
-  disabled,
-  hideChevron,
-  ...props
-}) => {
-  const Component = as ?? "button";
-  const context = useContext(MenuContext);
-  const onClick = useCallback(
-    (e) => {
-      onClickProp?.(e);
-      if (onSelect !== null && context?.MenuItemWrapper == null) {
-        const selectEvent = new CustomEvent("menu.itemSelect", {
-          bubbles: true,
-          cancelable: true
-        });
-        onSelect(selectEvent);
-        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);
-      }
-    },
-    [context, onSelect]
-  );
-  const iconIsReactElement = isValidElement(Icon);
-  const componentIcon = Icon;
-  const SvgIcon = Icon;
-  const content = /* @__PURE__ */ jsxs(
-    Component,
-    {
-      role: "menuitem",
-      ...props,
-      className: classNames(className, styles.item, {
-        [styles.interactive]: onSelect !== null,
-        [styles["no-label"]]: label === null,
-        [styles["no-icon"]]: !Icon,
-        [styles["disabled"]]: disabled
-      }),
-      "data-kind": kind,
-      onClick,
-      disabled: Component === "button" ? disabled : void 0,
-      "aria-disabled": Component === "button" ? void 0 : disabled,
-      children: [
-        Icon && (iconIsReactElement ? /* @__PURE__ */ jsx(Slot, { className: styles.icon, children: componentIcon }) : /* @__PURE__ */ jsx(
-          SvgIcon,
-          {
-            width: 24,
-            height: 24,
-            className: styles.icon,
-            "aria-hidden": true
-          }
-        )),
-        label !== null && /* @__PURE__ */ jsx(
-          Text,
-          {
-            className: styles.label,
-            size: "md",
-            weight: "medium",
-            as: "span",
-            ...labelProps,
-            children: label
-          }
-        ),
-        !hideChevron && (Component === "button" || Component === "a") && /* @__PURE__ */ jsx(
-          ChevronRightIcon,
-          {
-            width: 8,
-            height: 24,
-            className: styles["nav-hint"],
-            "aria-hidden": true,
-            viewBox: "8 0 8 24"
-          }
-        ),
-        children
-      ]
-    }
-  );
-  return context?.MenuItemWrapper == null || onSelect === null ? content : /* @__PURE__ */ jsx(context.MenuItemWrapper, { onSelect, children: content });
-};
-export {
-  MenuItem
+//#region src/components/Menu/MenuItem.tsx
+/**
+* An item within a menu, acting either as a navigation button, or simply a
+* container for other interactive elements.
+* Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+*/
+var MenuItem = ({ as, className, Icon, label, labelProps, onSelect, kind = "primary", children, onClick: onClickProp, disabled, hideChevron, ...props }) => {
+	const Component = as ?? "button";
+	const context = useContext(MenuContext);
+	const onClick = useCallback((e) => {
+		onClickProp?.(e);
+		if (onSelect !== null && context?.MenuItemWrapper == null) {
+			const selectEvent = new CustomEvent("menu.itemSelect", {
+				bubbles: true,
+				cancelable: true
+			});
+			onSelect(selectEvent);
+			if (!selectEvent.defaultPrevented) context?.onOpenChange(false);
+		}
+	}, [context, onSelect]);
+	const iconIsReactElement = isValidElement(Icon);
+	const componentIcon = Icon;
+	const SvgIcon = Icon;
+	const content = /* @__PURE__ */ jsxs(Component, {
+		role: "menuitem",
+		...props,
+		className: classNames(className, MenuItem_module_default.item, {
+			[MenuItem_module_default.interactive]: onSelect !== null,
+			[MenuItem_module_default["no-label"]]: label === null,
+			[MenuItem_module_default["no-icon"]]: !Icon,
+			[MenuItem_module_default["disabled"]]: disabled
+		}),
+		"data-kind": kind,
+		onClick,
+		disabled: Component === "button" ? disabled : void 0,
+		"aria-disabled": Component === "button" ? void 0 : disabled,
+		children: [
+			Icon && (iconIsReactElement ? /* @__PURE__ */ jsx(Slot, {
+				className: MenuItem_module_default.icon,
+				children: componentIcon
+			}) : /* @__PURE__ */ jsx(SvgIcon, {
+				width: 24,
+				height: 24,
+				className: MenuItem_module_default.icon,
+				"aria-hidden": true
+			})),
+			label !== null && /* @__PURE__ */ jsx(Text, {
+				className: MenuItem_module_default.label,
+				size: "md",
+				weight: "medium",
+				as: "span",
+				...labelProps,
+				children: label
+			}),
+			!hideChevron && (Component === "button" || Component === "a") && /* @__PURE__ */ jsx(ChevronRightIcon, {
+				width: 8,
+				height: 24,
+				className: MenuItem_module_default["nav-hint"],
+				"aria-hidden": true,
+				viewBox: "8 0 8 24"
+			}),
+			children
+		]
+	});
+	return context?.MenuItemWrapper == null || onSelect === null ? content : /* @__PURE__ */ jsx(context.MenuItemWrapper, {
+		onSelect,
+		children: content
+	});
 };
-//# sourceMappingURL=MenuItem.js.map
+//#endregion
+export { MenuItem };
+
+//# sourceMappingURL=MenuItem.js.map

package/dist/components/Menu/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ElementType,\n  isValidElement,\n  type ReactElement,\n  type SVGAttributes,\n  useCallback,\n  useContext,\n  type MouseEventHandler,\n} from \"react\";\nimport styles from \"./MenuItem.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport ChevronRightIcon from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-right\";\nimport { MenuContext } from \"./MenuContext\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype MenuItemElement = \"button\" | \"a\" | \"div\";\n\ntype Props<C extends MenuItemElement> = {\n  /**\n   * The element type of this menu item.\n   * @default button\n   */\n  as?: C;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon to show on this menu item.\n   * When `Icon` is a ReactElement, it should spread the props\n   */\n  Icon?: ComponentType<SVGAttributes<SVGElement>> | ReactElement;\n  /**\n   * The label to show on this menu item.\n   */\n  // This prop is required because it's rare to not want a label\n  label: string | null;\n  /**\n   * Additional properties to pass to the Text label component.\n   */\n  labelProps?: ComponentPropsWithoutRef<typeof Text>;\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  // This prop is required because it's rare to not want a selection handler\n  onSelect: ((e: Event) => void) | null;\n  /**\n   * Event callback for when the item is clicked.\n   * @param e\n   */\n  onClick?: MouseEventHandler<HTMLElementTagNameMap[C]>;\n  /**\n   * The color variant of the menu item.\n   * @default primary\n   */\n  kind?: \"primary\" | \"critical\";\n  disabled?: boolean;\n  /**\n   * Whether to hide the chevron navigation hint.\n   */\n  hideChevron?: boolean;\n} & Omit<ComponentPropsWithoutRef<C>, \"onSelect\" | \"onClick\">;\n\n/**\n * An item within a menu, acting either as a navigation button, or simply a\n * container for other interactive elements.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const MenuItem = <C extends MenuItemElement = \"button\">({\n  as,\n  className,\n  Icon,\n  label,\n  labelProps,\n  onSelect,\n  kind = \"primary\",\n  children,\n  onClick: onClickProp,\n  disabled,\n  hideChevron,\n  ...props\n}: Props<C>): React.ReactElement => {\n  const Component = as ?? (\"button\" as ElementType);\n  const context = useContext(MenuContext);\n\n  const onClick = useCallback(\n    (e: Parameters<Exclude<typeof onClickProp, undefined>>[0]) => {\n      (onClickProp as ((e_: typeof e) => void) | undefined)?.(e);\n      // If there is no wrapper component to automatically handle onSelect, we\n      // need to handle it manually, dismissing the menu as the default action\n      if (onSelect !== null && context?.MenuItemWrapper == null) {\n        const selectEvent = new CustomEvent(\"menu.itemSelect\", {\n          bubbles: true,\n          cancelable: true,\n        });\n        onSelect(selectEvent);\n        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);\n      }\n    },\n    [context, onSelect],\n  );\n\n  const iconIsReactElement = isValidElement(Icon);\n  const componentIcon = Icon as ReactElement;\n  const SvgIcon = Icon as ComponentType<SVGAttributes<SVGElement>>;\n\n  const content = (\n    <Component\n      role=\"menuitem\"\n      {...props}\n      className={classnames(className, styles.item, {\n        [styles.interactive]: onSelect !== null,\n        [styles[\"no-label\"]]: label === null,\n        [styles[\"no-icon\"]]: !Icon,\n        [styles[\"disabled\"]]: disabled,\n      })}\n      data-kind={kind}\n      onClick={onClick}\n      disabled={Component === \"button\" ? disabled : undefined}\n      aria-disabled={Component === \"button\" ? undefined : disabled}\n    >\n      {Icon &&\n        (iconIsReactElement ? (\n          <Slot className={styles.icon}>{componentIcon}</Slot>\n        ) : (\n          <SvgIcon\n            width={24}\n            height={24}\n            className={styles.icon}\n            aria-hidden={true}\n          />\n        ))}\n\n      {label !== null && (\n        <Text\n          className={styles.label}\n          size=\"md\"\n          weight=\"medium\"\n          as=\"span\"\n          {...labelProps}\n        >\n          {label}\n        </Text>\n      )}\n      {/* We use CSS to swap between this navigation hint and the provided\n      children on hover - see the styles module. */}\n      {!hideChevron && (Component === \"button\" || Component === \"a\") && (\n        <ChevronRightIcon\n          width={8}\n          height={24}\n          className={styles[\"nav-hint\"]}\n          aria-hidden={true}\n          /* The SVG is a small icon in a large canvas. It probably ought to be\n             cropped, but we can adjust the viewBox here to chop off the horizontal\n             space to get it closer to the right hand edge.\n           */\n          viewBox=\"8 0 8 24\"\n        />\n      )}\n      {children}\n    </Component>\n  );\n\n  return context?.MenuItemWrapper == null || onSelect === null ? (\n    content\n  ) : (\n    <context.MenuItemWrapper onSelect={onSelect}>\n      {content}\n    </context.MenuItemWrapper>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;;;;;AAgFO,MAAM,WAAW,CAAuC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoC;AAClC,QAAM,YAAY,MAAO;AACzB,QAAM,UAAU,WAAW,WAAW;AAEtC,QAAM,UAAU;AAAA,IACd,CAAC,MAA6D;AAC3D,oBAAuD,CAAC;AAGzD,UAAI,aAAa,QAAQ,SAAS,mBAAmB,MAAM;AACzD,cAAM,cAAc,IAAI,YAAY,mBAAmB;AAAA,UACrD,SAAS;AAAA,UACT,YAAY;AAAA,QAAA,CACb;AACD,iBAAS,WAAW;AACpB,YAAI,CAAC,YAAY,iBAAkB,UAAS,aAAa,KAAK;AAAA,MAChE;AAAA,IACF;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EAAA;AAGpB,QAAM,qBAAqB,eAAe,IAAI;AAC9C,QAAM,gBAAgB;AACtB,QAAM,UAAU;AAEhB,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWA,WAAW,WAAW,OAAO,MAAM;AAAA,QAC5C,CAAC,OAAO,WAAW,GAAG,aAAa;AAAA,QACnC,CAAC,OAAO,UAAU,CAAC,GAAG,UAAU;AAAA,QAChC,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC;AAAA,QACtB,CAAC,OAAO,UAAU,CAAC,GAAG;AAAA,MAAA,CACvB;AAAA,MACD,aAAW;AAAA,MACX;AAAA,MACA,UAAU,cAAc,WAAW,WAAW;AAAA,MAC9C,iBAAe,cAAc,WAAW,SAAY;AAAA,MAEnD,UAAA;AAAA,QAAA,SACE,qBACC,oBAAC,MAAA,EAAK,WAAW,OAAO,MAAO,yBAAc,IAE7C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QAAA;AAAA,QAIlB,UAAU,QACT;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,MAAK;AAAA,YACL,QAAO;AAAA,YACP,IAAG;AAAA,YACF,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAKJ,CAAC,gBAAgB,cAAc,YAAY,cAAc,QACxD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO,UAAU;AAAA,YAC5B,eAAa;AAAA,YAKb,SAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGX;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIL,SAAO,SAAS,mBAAmB,QAAQ,aAAa,OACtD,UAEA,oBAAC,QAAQ,iBAAR,EAAwB,UACtB,UAAA,QAAA,CACH;AAEJ;"}
+{"version":3,"file":"MenuItem.js","names":[],"sources":["../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ElementType,\n  isValidElement,\n  type ReactElement,\n  type SVGAttributes,\n  useCallback,\n  useContext,\n  type MouseEventHandler,\n} from \"react\";\nimport styles from \"./MenuItem.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport ChevronRightIcon from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-right\";\nimport { MenuContext } from \"./MenuContext\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype MenuItemElement = \"button\" | \"a\" | \"div\";\n\ntype Props<C extends MenuItemElement> = {\n  /**\n   * The element type of this menu item.\n   * @default button\n   */\n  as?: C;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon to show on this menu item.\n   * When `Icon` is a ReactElement, it should spread the props\n   */\n  Icon?: ComponentType<SVGAttributes<SVGElement>> | ReactElement;\n  /**\n   * The label to show on this menu item.\n   */\n  // This prop is required because it's rare to not want a label\n  label: string | null;\n  /**\n   * Additional properties to pass to the Text label component.\n   */\n  labelProps?: ComponentPropsWithoutRef<typeof Text>;\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  // This prop is required because it's rare to not want a selection handler\n  onSelect: ((e: Event) => void) | null;\n  /**\n   * Event callback for when the item is clicked.\n   * @param e\n   */\n  onClick?: MouseEventHandler<HTMLElementTagNameMap[C]>;\n  /**\n   * The color variant of the menu item.\n   * @default primary\n   */\n  kind?: \"primary\" | \"critical\";\n  disabled?: boolean;\n  /**\n   * Whether to hide the chevron navigation hint.\n   */\n  hideChevron?: boolean;\n} & Omit<ComponentPropsWithoutRef<C>, \"onSelect\" | \"onClick\">;\n\n/**\n * An item within a menu, acting either as a navigation button, or simply a\n * container for other interactive elements.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const MenuItem = <C extends MenuItemElement = \"button\">({\n  as,\n  className,\n  Icon,\n  label,\n  labelProps,\n  onSelect,\n  kind = \"primary\",\n  children,\n  onClick: onClickProp,\n  disabled,\n  hideChevron,\n  ...props\n}: Props<C>): React.ReactElement => {\n  const Component = as ?? (\"button\" as ElementType);\n  const context = useContext(MenuContext);\n\n  const onClick = useCallback(\n    (e: Parameters<Exclude<typeof onClickProp, undefined>>[0]) => {\n      (onClickProp as ((e_: typeof e) => void) | undefined)?.(e);\n      // If there is no wrapper component to automatically handle onSelect, we\n      // need to handle it manually, dismissing the menu as the default action\n      if (onSelect !== null && context?.MenuItemWrapper == null) {\n        const selectEvent = new CustomEvent(\"menu.itemSelect\", {\n          bubbles: true,\n          cancelable: true,\n        });\n        onSelect(selectEvent);\n        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);\n      }\n    },\n    [context, onSelect],\n  );\n\n  const iconIsReactElement = isValidElement(Icon);\n  const componentIcon = Icon as ReactElement;\n  const SvgIcon = Icon as ComponentType<SVGAttributes<SVGElement>>;\n\n  const content = (\n    <Component\n      role=\"menuitem\"\n      {...props}\n      className={classnames(className, styles.item, {\n        [styles.interactive]: onSelect !== null,\n        [styles[\"no-label\"]]: label === null,\n        [styles[\"no-icon\"]]: !Icon,\n        [styles[\"disabled\"]]: disabled,\n      })}\n      data-kind={kind}\n      onClick={onClick}\n      disabled={Component === \"button\" ? disabled : undefined}\n      aria-disabled={Component === \"button\" ? undefined : disabled}\n    >\n      {Icon &&\n        (iconIsReactElement ? (\n          <Slot className={styles.icon}>{componentIcon}</Slot>\n        ) : (\n          <SvgIcon\n            width={24}\n            height={24}\n            className={styles.icon}\n            aria-hidden={true}\n          />\n        ))}\n\n      {label !== null && (\n        <Text\n          className={styles.label}\n          size=\"md\"\n          weight=\"medium\"\n          as=\"span\"\n          {...labelProps}\n        >\n          {label}\n        </Text>\n      )}\n      {/* We use CSS to swap between this navigation hint and the provided\n      children on hover - see the styles module. */}\n      {!hideChevron && (Component === \"button\" || Component === \"a\") && (\n        <ChevronRightIcon\n          width={8}\n          height={24}\n          className={styles[\"nav-hint\"]}\n          aria-hidden={true}\n          /* The SVG is a small icon in a large canvas. It probably ought to be\n             cropped, but we can adjust the viewBox here to chop off the horizontal\n             space to get it closer to the right hand edge.\n           */\n          viewBox=\"8 0 8 24\"\n        />\n      )}\n      {children}\n    </Component>\n  );\n\n  return context?.MenuItemWrapper == null || onSelect === null ? (\n    content\n  ) : (\n    <context.MenuItemWrapper onSelect={onSelect}>\n      {content}\n    </context.MenuItemWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAgFA,IAAa,YAAkD,EAC7D,IACA,WACA,MACA,OACA,YACA,UACA,OAAO,WACP,UACA,SAAS,aACT,UACA,aACA,GAAG,YAC+B;CAClC,MAAM,YAAY,MAAO;CACzB,MAAM,UAAU,WAAW,YAAY;CAEvC,MAAM,UAAU,aACb,MAA6D;AAC3D,gBAAuD,EAAE;AAG1D,MAAI,aAAa,QAAQ,SAAS,mBAAmB,MAAM;GACzD,MAAM,cAAc,IAAI,YAAY,mBAAmB;IACrD,SAAS;IACT,YAAY;IACb,CAAC;AACF,YAAS,YAAY;AACrB,OAAI,CAAC,YAAY,iBAAkB,UAAS,aAAa,MAAM;;IAGnE,CAAC,SAAS,SAAS,CACpB;CAED,MAAM,qBAAqB,eAAe,KAAK;CAC/C,MAAM,gBAAgB;CACtB,MAAM,UAAU;CAEhB,MAAM,UACJ,qBAAC,WAAD;EACE,MAAK;EACL,GAAI;EACJ,WAAW,WAAW,WAAW,wBAAO,MAAM;IAC3C,wBAAO,cAAc,aAAa;IAClC,wBAAO,cAAc,UAAU;IAC/B,wBAAO,aAAa,CAAC;IACrB,wBAAO,cAAc;GACvB,CAAC;EACF,aAAW;EACF;EACT,UAAU,cAAc,WAAW,WAAW,KAAA;EAC9C,iBAAe,cAAc,WAAW,KAAA,IAAY;YAZtD;GAcG,SACE,qBACC,oBAAC,MAAD;IAAM,WAAW,wBAAO;cAAO;IAAqB,CAAA,GAEpD,oBAAC,SAAD;IACE,OAAO;IACP,QAAQ;IACR,WAAW,wBAAO;IAClB,eAAa;IACb,CAAA;GAGL,UAAU,QACT,oBAAC,MAAD;IACE,WAAW,wBAAO;IAClB,MAAK;IACL,QAAO;IACP,IAAG;IACH,GAAI;cAEH;IACI,CAAA;GAIR,CAAC,gBAAgB,cAAc,YAAY,cAAc,QACxD,oBAAC,kBAAD;IACE,OAAO;IACP,QAAQ;IACR,WAAW,wBAAO;IAClB,eAAa;IAKb,SAAQ;IACR,CAAA;GAEH;GACS;;AAGd,QAAO,SAAS,mBAAmB,QAAQ,aAAa,OACtD,UAEA,oBAAC,QAAQ,iBAAT;EAAmC;YAChC;EACuB,CAAA"}

package/dist/components/Menu/MenuItem.module.cjs

@@ -0,0 +1,20 @@
+//#region src/components/Menu/MenuItem.module.css
+var item = "_item_lqfwq_8";
+var interactive = "_interactive_lqfwq_26";
+var label = "_label_lqfwq_34";
+var icon = "_icon_lqfwq_50";
+var disabled = "_disabled_lqfwq_118";
+var MenuItem_module_default = {
+	item,
+	interactive,
+	"no-label": "_no-label_lqfwq_30",
+	label,
+	"no-icon": "_no-icon_lqfwq_41",
+	icon,
+	"nav-hint": "_nav-hint_lqfwq_59",
+	disabled
+};
+//#endregion
+exports.default = MenuItem_module_default;
+
+//# sourceMappingURL=MenuItem.module.cjs.map

package/dist/components/Menu/MenuItem.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.module.cjs","names":[],"sources":["../../../src/components/Menu/MenuItem.module.css"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.item {\n  display: grid;\n  grid-template: \"icon label .\" auto \"empty1 label empty2\" auto / auto auto minmax(\n      /* Reserve space for the chevron so that the layout doesn't shift on\n      hover */\n      var(--cpd-space-2x),\n      1fr\n    );\n  place-items: center end;\n  padding-block: var(--cpd-space-2x);\n  padding-inline: var(--cpd-space-4x);\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-inline-size: 200px;\n  color: var(--cpd-color-text-secondary);\n  background: var(--cpd-color-bg-action-secondary-rest);\n}\n\n.item.interactive {\n  cursor: pointer;\n}\n\n.item.no-label {\n  grid-template: \"icon .\" auto / auto 1fr;\n}\n\n.label {\n  grid-area: label;\n  margin-inline-end: var(--cpd-space-4x);\n  text-align: start;\n  word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */\n}\n\n.item.no-icon {\n  grid-template: \"label .\" auto / auto 1fr;\n\n  .label {\n    /* Without icon, the height changes when hovered */\n    min-block-size: 24px;\n  }\n}\n\n.icon {\n  grid-area: icon;\n  margin-inline-end: var(--cpd-space-3x);\n}\n\n.item.no-label .icon {\n  margin-inline-end: var(--cpd-space-4x);\n}\n\n.nav-hint {\n  /* Hidden until the item is hovered over */\n  display: none;\n  flex-shrink: 0;\n}\n\nbutton.item {\n  appearance: none;\n  border: none;\n}\n\n.item[data-kind=\"primary\"] > .label {\n  color: var(--cpd-color-text-primary);\n}\n\n.item[data-kind=\"primary\"] > .icon {\n  color: var(--cpd-color-icon-primary);\n}\n\n.item[data-kind=\"primary\"] > .nav-hint {\n  color: var(--cpd-color-icon-tertiary);\n}\n\n.item[data-kind=\"critical\"] > .label {\n  color: var(--cpd-color-text-critical-primary);\n}\n\n.item[data-kind=\"critical\"] > .icon,\n.item[data-kind=\"critical\"] > .nav-hint {\n  color: var(--cpd-color-icon-critical-primary);\n}\n\n@media (hover) {\n  .item.interactive[data-kind=\"primary\"]:hover {\n    background: var(--cpd-color-bg-action-secondary-hovered);\n  }\n\n  .item.interactive[data-kind=\"critical\"]:hover {\n    background: var(--cpd-color-bg-critical-subtle);\n  }\n\n  /* Replace the children with the navigation hint on hover */\n  .item.interactive:hover > .nav-hint {\n    display: initial;\n  }\n\n  .item.interactive:hover > .nav-hint ~ * {\n    display: none;\n  }\n}\n\n.item.interactive[data-kind=\"primary\"]:active {\n  background: var(--cpd-color-bg-action-secondary-pressed);\n}\n\n.item.interactive[data-kind=\"critical\"]:active {\n  background: var(--cpd-color-bg-critical-subtle-hovered);\n}\n\n.item[data-kind].disabled {\n  pointer-events: none;\n}\n\n.item[data-kind].disabled > .label,\n.item[data-kind].disabled > .icon,\n.item[data-kind].disabled > .nav-hint {\n  color: var(--cpd-color-text-disabled);\n}\n"],"mappings":""}

package/dist/components/Menu/MenuItem.module.js

@@ -0,0 +1,20 @@
+//#region src/components/Menu/MenuItem.module.css
+var item = "_item_lqfwq_8";
+var interactive = "_interactive_lqfwq_26";
+var label = "_label_lqfwq_34";
+var icon = "_icon_lqfwq_50";
+var disabled = "_disabled_lqfwq_118";
+var MenuItem_module_default = {
+	item,
+	interactive,
+	"no-label": "_no-label_lqfwq_30",
+	label,
+	"no-icon": "_no-icon_lqfwq_41",
+	icon,
+	"nav-hint": "_nav-hint_lqfwq_59",
+	disabled
+};
+//#endregion
+export { MenuItem_module_default as default };
+
+//# sourceMappingURL=MenuItem.module.js.map

package/dist/components/Menu/MenuItem.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.module.js","names":[],"sources":["../../../src/components/Menu/MenuItem.module.css"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.item {\n  display: grid;\n  grid-template: \"icon label .\" auto \"empty1 label empty2\" auto / auto auto minmax(\n      /* Reserve space for the chevron so that the layout doesn't shift on\n      hover */\n      var(--cpd-space-2x),\n      1fr\n    );\n  place-items: center end;\n  padding-block: var(--cpd-space-2x);\n  padding-inline: var(--cpd-space-4x);\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-inline-size: 200px;\n  color: var(--cpd-color-text-secondary);\n  background: var(--cpd-color-bg-action-secondary-rest);\n}\n\n.item.interactive {\n  cursor: pointer;\n}\n\n.item.no-label {\n  grid-template: \"icon .\" auto / auto 1fr;\n}\n\n.label {\n  grid-area: label;\n  margin-inline-end: var(--cpd-space-4x);\n  text-align: start;\n  word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */\n}\n\n.item.no-icon {\n  grid-template: \"label .\" auto / auto 1fr;\n\n  .label {\n    /* Without icon, the height changes when hovered */\n    min-block-size: 24px;\n  }\n}\n\n.icon {\n  grid-area: icon;\n  margin-inline-end: var(--cpd-space-3x);\n}\n\n.item.no-label .icon {\n  margin-inline-end: var(--cpd-space-4x);\n}\n\n.nav-hint {\n  /* Hidden until the item is hovered over */\n  display: none;\n  flex-shrink: 0;\n}\n\nbutton.item {\n  appearance: none;\n  border: none;\n}\n\n.item[data-kind=\"primary\"] > .label {\n  color: var(--cpd-color-text-primary);\n}\n\n.item[data-kind=\"primary\"] > .icon {\n  color: var(--cpd-color-icon-primary);\n}\n\n.item[data-kind=\"primary\"] > .nav-hint {\n  color: var(--cpd-color-icon-tertiary);\n}\n\n.item[data-kind=\"critical\"] > .label {\n  color: var(--cpd-color-text-critical-primary);\n}\n\n.item[data-kind=\"critical\"] > .icon,\n.item[data-kind=\"critical\"] > .nav-hint {\n  color: var(--cpd-color-icon-critical-primary);\n}\n\n@media (hover) {\n  .item.interactive[data-kind=\"primary\"]:hover {\n    background: var(--cpd-color-bg-action-secondary-hovered);\n  }\n\n  .item.interactive[data-kind=\"critical\"]:hover {\n    background: var(--cpd-color-bg-critical-subtle);\n  }\n\n  /* Replace the children with the navigation hint on hover */\n  .item.interactive:hover > .nav-hint {\n    display: initial;\n  }\n\n  .item.interactive:hover > .nav-hint ~ * {\n    display: none;\n  }\n}\n\n.item.interactive[data-kind=\"primary\"]:active {\n  background: var(--cpd-color-bg-action-secondary-pressed);\n}\n\n.item.interactive[data-kind=\"critical\"]:active {\n  background: var(--cpd-color-bg-critical-subtle-hovered);\n}\n\n.item[data-kind].disabled {\n  pointer-events: none;\n}\n\n.item[data-kind].disabled > .label,\n.item[data-kind].disabled > .icon,\n.item[data-kind].disabled > .nav-hint {\n  color: var(--cpd-color-text-disabled);\n}\n"],"mappings":""}