@vector-im/compound-web 9.0.0 → 9.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","names":[],"sources":["../../../src/components/Menu/ContextMenu.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, {\n  type FC,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles 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   * The menu title.\n   */\n  title: string;\n  /**\n   * Wether the title is displayed.\n   * @default true\n   */\n  showTitle?: boolean;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  showTitle = true,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\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 : ContextMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild>\n          <FloatingMenu showTitle={showTitle} title={title}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkEA,IAAM,0BAAoD,EACxD,UACA,eAEA,oBAAC,iBAAD;CAAiB,UAAU,YAAY,KAAA;CAAW,SAAA;CAC/C;CACe,CAAA;;;;AAMpB,IAAa,eAA0B,EACrC,OACA,YAAY,MACZ,cAAc,kBACd,SAAS,aACT,0BACA,UAAU,mBACN;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,eAAe,aAClB,UAAmB;AAClB,UAAQ,MAAM;AACd,qBAAmB,MAAM;IAE3B,CAAC,SAAS,iBAAiB,CAC5B;CAID,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;CAG7E,MAAM,UACJ,oBAAC,SAAD;EACE,iBAAc;EACd,UAAU,2BAA2B,KAAA,IAAY;EACjD,SAAA;YAEC;EACO,CAAA;AASZ,QAAO,SACL,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EAAoB;YAAe;EAAe,CAAA,EAClD,oBAAC,OAAO,MAAR;EAAmB;EAAoB;YACrC,qBAAC,OAAO,QAAR,EAAA,UAAA,CACE,oBAAC,OAAO,SAAR,EAAgB,WAAW,WAAW,0BAAa,GAAG,EAAI,CAAA,EAC1D,oBAAC,OAAO,SAAR;GAAgB,SAAA;aACd,oBAAC,YAAD;IAAmB;IAAQ;IAAsB,CAAA;GAClC,CAAA,CACH,EAAA,CAAA;EACJ,CAAA,CACb,EAAA,CAAA,GAEH,qBAAC,MAAD;EAAoB;YAApB,CACG,SACD,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAD;GAAS,SAAA;aACP,oBAAC,cAAD;IAAyB;IAAkB;IACxC;IACY,CAAA;GACP,CAAA,EACH,CAAA,CACJ"}
+{"version":3,"file":"ContextMenu.js","names":[],"sources":["../../../src/components/Menu/ContextMenu.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, {\n  type FC,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n  ContextMenuSub,\n  ContextMenuSubTrigger,\n  ContextMenuSubContent,\n  ContextMenuPortal,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles from \"./DrawerMenu.module.css\";\nimport {\n  MenuContext,\n  type MenuData,\n  type MenuItemWrapperProps,\n  type SubMenuWrapperProps,\n} from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Wether the title is displayed.\n   * @default true\n   */\n  showTitle?: boolean;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\nconst ContextSubMenuWrapper: FC<SubMenuWrapperProps> = ({\n  trigger,\n  children,\n  open,\n  onOpenChange,\n}) => (\n  <ContextMenuSub open={open} onOpenChange={onOpenChange}>\n    <ContextMenuSubTrigger asChild>{trigger}</ContextMenuSubTrigger>\n    <ContextMenuPortal>\n      <ContextMenuSubContent asChild alignOffset={-20}>\n        <FloatingMenu title=\"\" showTitle={false}>\n          {children}\n        </FloatingMenu>\n      </ContextMenuSubContent>\n    </ContextMenuPortal>\n  </ContextMenuSub>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  showTitle = true,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\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 : ContextMenuItemWrapper,\n      SubMenuWrapper: drawer ? null : ContextSubMenuWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild>\n          <FloatingMenu showTitle={showTitle} title={title}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAuEA,IAAM,0BAAoD,EACxD,UACA,eAEA,oBAAC,iBAAD;CAAiB,UAAU,YAAY,KAAA;CAAW,SAAA;CAC/C;CACe,CAAA;AAGpB,IAAM,yBAAkD,EACtD,SACA,UACA,MACA,mBAEA,qBAAC,gBAAD;CAAsB;CAAoB;WAA1C,CACE,oBAAC,uBAAD;EAAuB,SAAA;YAAS;EAAgC,CAAA,EAChE,oBAAC,mBAAD,EAAA,UACE,oBAAC,uBAAD;EAAuB,SAAA;EAAQ,aAAa;YAC1C,oBAAC,cAAD;GAAc,OAAM;GAAG,WAAW;GAC/B;GACY,CAAA;EACO,CAAA,EACN,CAAA,CACL;;;;;AAMnB,IAAa,eAA0B,EACrC,OACA,YAAY,MACZ,cAAc,kBACd,SAAS,aACT,0BACA,UAAU,mBACN;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,eAAe,aAClB,UAAmB;AAClB,UAAQ,MAAM;AACd,qBAAmB,MAAM;IAE3B,CAAC,SAAS,iBAAiB,CAC5B;CAID,MAAM,WAAW,aAAa;CAC9B,MAAM,SAAS,aAAa,aAAa,aAAa;CACtD,MAAM,UAAoB,eACjB;EACL,iBAAiB,SAAS,OAAO;EACjC,gBAAgB,SAAS,OAAO;EAChC;EACD,GACD,CAAC,aAAa,CACf;CACD,MAAM,WACJ,oBAAC,YAAY,UAAb;EAAsB,OAAO;YAAU;EAAoC,CAAA;CAG7E,MAAM,UACJ,oBAAC,SAAD;EACE,iBAAc;EACd,UAAU,2BAA2B,KAAA,IAAY;EACjD,SAAA;YAEC;EACO,CAAA;AASZ,QAAO,SACL,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EAAoB;YAAe;EAAe,CAAA,EAClD,oBAAC,OAAO,MAAR;EAAmB;EAAoB;YACrC,qBAAC,OAAO,QAAR,EAAA,UAAA,CACE,oBAAC,OAAO,SAAR,EAAgB,WAAW,WAAW,0BAAa,GAAG,EAAI,CAAA,EAC1D,oBAAC,OAAO,SAAR;GAAgB,SAAA;aACd,oBAAC,YAAD;IAAmB;IAAQ;IAAsB,CAAA;GAClC,CAAA,CACH,EAAA,CAAA;EACJ,CAAA,CACb,EAAA,CAAA,GAEH,qBAAC,MAAD;EAAoB;YAApB,CACG,SACD,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAD;GAAS,SAAA;aACP,oBAAC,cAAD;IAAyB;IAAkB;IACxC;IACY,CAAA;GACP,CAAA,EACH,CAAA,CACJ"}

package/dist/components/Menu/DrawerMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/DrawerMenu.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EACZ,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAKf,UAAU,KAAM,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACrD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AAGH,eAAO,MAAM,UAAU,8EAatB,CAAC"}

package/dist/components/Menu/FloatingMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/FloatingMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EACZ,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAIf,UAAU,KAAM,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACrD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AAGH,eAAO,MAAM,YAAY,8EAoBxB,CAAC"}

package/dist/components/Menu/Menu.cjs

@@ -17,6 +17,33 @@ var DropdownMenuItemWrapper = ({ onSelect, children }) => /* @__PURE__ */ (0, re
 	asChild: true,
 	children
 });
+/** Duration of the parent menu's slide-in animation (ms). */
+var MENU_ANIMATION_DURATION = 180;
+var DropdownSubMenuWrapper = ({ trigger, children, open: openProp, onOpenChange }) => {
+	const [deferredOpen, setDeferredOpen] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (openProp) {
+			const timer = setTimeout(() => setDeferredOpen(true), MENU_ANIMATION_DURATION);
+			return () => clearTimeout(timer);
+		} else setDeferredOpen(false);
+	}, [openProp]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.DropdownMenuSub, {
+		open: openProp ? deferredOpen : openProp,
+		onOpenChange,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.DropdownMenuSubTrigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.DropdownMenuSubContent, {
+			asChild: true,
+			alignOffset: -20,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingMenu.FloatingMenu, {
+				title: "",
+				showTitle: false,
+				children
+			})
+		}) })]
+	});
+};
 /**
 * A menu opened by pressing a button.
 */
@@ -25,6 +52,7 @@ var Menu = ({ className, title, showTitle = true, open, onOpenChange, trigger, c
 	const drawer = platform === "android" || platform === "ios";
 	const context = (0, react.useMemo)(() => ({
 		MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,
+		SubMenuWrapper: drawer ? null : DropdownSubMenuWrapper,
 		onOpenChange
 	}), [onOpenChange]);
 	const children = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuContext.MenuContext.Provider, {

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.cjs","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,iBAAA,GAAA,kBAAA,KAAC,8BAAA,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,iBAAA,aAAa;CAC9B,MAAM,SAAS,aAAa,aAAa,aAAa;CACtD,MAAM,WAAA,GAAA,MAAA,gBACG;EACL,iBAAiB,SAAS,OAAO;EACjC;EACD,GACD,CAAC,aAAa,CACf;CACD,MAAM,WACJ,iBAAA,GAAA,kBAAA,KAAC,oBAAA,YAAY,UAAb;EAAsB,OAAO;YAAU;EAAoC,CAAA;AAG7E,QAAO,SACL,iBAAA,GAAA,kBAAA,MAAC,KAAA,OAAO,MAAR;EAAmB;EAAoB;YAAvC,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAA,OAAO,SAAR;GAAgB,SAAA;aAAS;GAAyB,CAAA,EAClD,iBAAA,GAAA,kBAAA,MAAC,KAAA,OAAO,QAAR,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAA,OAAO,SAAR,EAAgB,YAAA,GAAA,WAAA,SAAsB,0BAAA,QAAW,GAAG,EAAI,CAAA,EACxD,iBAAA,GAAA,kBAAA,KAAC,KAAA,OAAO,SAAR;GAAgB,SAAA;aACd,iBAAA,GAAA,kBAAA,KAAC,mBAAA,YAAD;IAAmB;IAAQ;IAAsB,CAAA;GAClC,CAAA,CACH,EAAA,CAAA,CACJ;MAEd,iBAAA,GAAA,kBAAA,MAAC,8BAAA,MAAD;EAAY;EAAoB;YAAhC,CACE,iBAAA,GAAA,kBAAA,KAAC,8BAAA,SAAD;GAAS,SAAA;aAAS;GAAkB,CAAA,EACpC,iBAAA,GAAA,kBAAA,KAAC,8BAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,8BAAA,SAAD;GAAS,SAAA;GAAc;GAAa;GAAO,YAAY;aACrD,iBAAA,GAAA,kBAAA,KAAC,qBAAA,cAAD;IACa;IACJ;IACI;IAEV;IACY,CAAA;GACP,CAAA,EACH,CAAA,CACJ"}
+{"version":3,"file":"Menu.cjs","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, {\n  type FC,\n  type ReactNode,\n  useMemo,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  DropdownMenuPortal,\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  type SubMenuWrapperProps,\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/** Duration of the parent menu's slide-in animation (ms). */\nconst MENU_ANIMATION_DURATION = 180;\n\nconst DropdownSubMenuWrapper: FC<SubMenuWrapperProps> = ({\n  trigger,\n  children,\n  open: openProp,\n  onOpenChange,\n}) => {\n  // When the submenu is programmatically opened at the same time as the parent\n  // menu (e.g. open={true} on mount), the parent is still mid-animation and\n  // the trigger position hasn't settled. Defer the open so the submenu\n  // positions correctly after the parent animation completes.\n  const [deferredOpen, setDeferredOpen] = useState(false);\n\n  useEffect(() => {\n    if (openProp) {\n      const timer = setTimeout(\n        () => setDeferredOpen(true),\n        MENU_ANIMATION_DURATION,\n      );\n      return () => clearTimeout(timer);\n    } else {\n      setDeferredOpen(false);\n    }\n  }, [openProp]);\n\n  const open = openProp ? deferredOpen : openProp;\n\n  return (\n    <DropdownMenuSub open={open} onOpenChange={onOpenChange}>\n      <DropdownMenuSubTrigger asChild>{trigger}</DropdownMenuSubTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuSubContent asChild alignOffset={-20}>\n          <FloatingMenu title=\"\" showTitle={false}>\n            {children}\n          </FloatingMenu>\n        </DropdownMenuSubContent>\n      </DropdownMenuPortal>\n    </DropdownMenuSub>\n  );\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      SubMenuWrapper: drawer ? null : DropdownSubMenuWrapper,\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":";;;;;;;;;;;;;;AAwFA,IAAM,2BAAqD,EACzD,UACA,eAEA,iBAAA,GAAA,kBAAA,KAAC,8BAAA,kBAAD;CAAkB,UAAU,YAAY,KAAA;CAAW,SAAA;CAChD;CACgB,CAAA;;AAIrB,IAAM,0BAA0B;AAEhC,IAAM,0BAAmD,EACvD,SACA,UACA,MAAM,UACN,mBACI;CAKJ,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,UAA4B,MAAM;AAEvD,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,UAAU;GACZ,MAAM,QAAQ,iBACN,gBAAgB,KAAK,EAC3B,wBACD;AACD,gBAAa,aAAa,MAAM;QAEhC,iBAAgB,MAAM;IAEvB,CAAC,SAAS,CAAC;AAId,QACE,iBAAA,GAAA,kBAAA,MAAC,8BAAA,iBAAD;EAAuB,MAHZ,WAAW,eAAe;EAGM;YAA3C,CACE,iBAAA,GAAA,kBAAA,KAAC,8BAAA,wBAAD;GAAwB,SAAA;aAAS;GAAiC,CAAA,EAClE,iBAAA,GAAA,kBAAA,KAAC,8BAAA,oBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,8BAAA,wBAAD;GAAwB,SAAA;GAAQ,aAAa;aAC3C,iBAAA,GAAA,kBAAA,KAAC,qBAAA,cAAD;IAAc,OAAM;IAAG,WAAW;IAC/B;IACY,CAAA;GACQ,CAAA,EACN,CAAA,CACL;;;;;;AAOtB,IAAa,QAAmB,EAC9B,WACA,OACA,YAAY,MACZ,MACA,cACA,SACA,UAAU,cACV,OAAO,UACP,QAAQ,eACJ;CAGJ,MAAM,WAAW,iBAAA,aAAa;CAC9B,MAAM,SAAS,aAAa,aAAa,aAAa;CACtD,MAAM,WAAA,GAAA,MAAA,gBACG;EACL,iBAAiB,SAAS,OAAO;EACjC,gBAAgB,SAAS,OAAO;EAChC;EACD,GACD,CAAC,aAAa,CACf;CACD,MAAM,WACJ,iBAAA,GAAA,kBAAA,KAAC,oBAAA,YAAY,UAAb;EAAsB,OAAO;YAAU;EAAoC,CAAA;AAG7E,QAAO,SACL,iBAAA,GAAA,kBAAA,MAAC,KAAA,OAAO,MAAR;EAAmB;EAAoB;YAAvC,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAA,OAAO,SAAR;GAAgB,SAAA;aAAS;GAAyB,CAAA,EAClD,iBAAA,GAAA,kBAAA,MAAC,KAAA,OAAO,QAAR,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAA,OAAO,SAAR,EAAgB,YAAA,GAAA,WAAA,SAAsB,0BAAA,QAAW,GAAG,EAAI,CAAA,EACxD,iBAAA,GAAA,kBAAA,KAAC,KAAA,OAAO,SAAR;GAAgB,SAAA;aACd,iBAAA,GAAA,kBAAA,KAAC,mBAAA,YAAD;IAAmB;IAAQ;IAAsB,CAAA;GAClC,CAAA,CACH,EAAA,CAAA,CACJ;MAEd,iBAAA,GAAA,kBAAA,MAAC,8BAAA,MAAD;EAAY;EAAoB;YAAhC,CACE,iBAAA,GAAA,kBAAA,KAAC,8BAAA,SAAD;GAAS,SAAA;aAAS;GAAkB,CAAA,EACpC,iBAAA,GAAA,kBAAA,KAAC,8BAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,8BAAA,SAAD;GAAS,SAAA;GAAc;GAAa;GAAO,YAAY;aACrD,iBAAA,GAAA,kBAAA,KAAC,qBAAA,cAAD;IACa;IACJ;IACI;IAEV;IACY,CAAA;GACP,CAAA,EACH,CAAA,CACJ"}

package/dist/components/Menu/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAOA,OAAc,EACZ,KAAK,EAAE,EACP,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAyBf,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;;;OAIG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAsDD;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CAqD1B,CAAC"}

package/dist/components/Menu/Menu.js

@@ -4,16 +4,43 @@ import { MenuContext } from "./MenuContext.js";
 import { getPlatform } from "../../utils/platform.js";
 import { DrawerMenu } from "./DrawerMenu.js";
 import classNames from "classnames";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer } from "vaul";
-import { Content, DropdownMenuItem, Portal, Root, Trigger } from "@radix-ui/react-dropdown-menu";
+import { Content, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, Portal, Root, Trigger } from "@radix-ui/react-dropdown-menu";
 //#region src/components/Menu/Menu.tsx
 var DropdownMenuItemWrapper = ({ onSelect, children }) => /* @__PURE__ */ jsx(DropdownMenuItem, {
 	onSelect: onSelect ?? void 0,
 	asChild: true,
 	children
 });
+/** Duration of the parent menu's slide-in animation (ms). */
+var MENU_ANIMATION_DURATION = 180;
+var DropdownSubMenuWrapper = ({ trigger, children, open: openProp, onOpenChange }) => {
+	const [deferredOpen, setDeferredOpen] = useState(false);
+	useEffect(() => {
+		if (openProp) {
+			const timer = setTimeout(() => setDeferredOpen(true), MENU_ANIMATION_DURATION);
+			return () => clearTimeout(timer);
+		} else setDeferredOpen(false);
+	}, [openProp]);
+	return /* @__PURE__ */ jsxs(DropdownMenuSub, {
+		open: openProp ? deferredOpen : openProp,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(DropdownMenuSubTrigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(DropdownMenuSubContent, {
+			asChild: true,
+			alignOffset: -20,
+			children: /* @__PURE__ */ jsx(FloatingMenu, {
+				title: "",
+				showTitle: false,
+				children
+			})
+		}) })]
+	});
+};
 /**
 * A menu opened by pressing a button.
 */
@@ -22,6 +49,7 @@ var Menu = ({ className, title, showTitle = true, open, onOpenChange, trigger, c
 	const drawer = platform === "android" || platform === "ios";
 	const context = useMemo(() => ({
 		MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,
+		SubMenuWrapper: drawer ? null : DropdownSubMenuWrapper,
 		onOpenChange
 	}), [onOpenChange]);
 	const children = /* @__PURE__ */ jsx(MenuContext.Provider, {

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

@@ -1 +1 @@
-{"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"}
+{"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, {\n  type FC,\n  type ReactNode,\n  useMemo,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  DropdownMenuPortal,\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  type SubMenuWrapperProps,\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/** Duration of the parent menu's slide-in animation (ms). */\nconst MENU_ANIMATION_DURATION = 180;\n\nconst DropdownSubMenuWrapper: FC<SubMenuWrapperProps> = ({\n  trigger,\n  children,\n  open: openProp,\n  onOpenChange,\n}) => {\n  // When the submenu is programmatically opened at the same time as the parent\n  // menu (e.g. open={true} on mount), the parent is still mid-animation and\n  // the trigger position hasn't settled. Defer the open so the submenu\n  // positions correctly after the parent animation completes.\n  const [deferredOpen, setDeferredOpen] = useState(false);\n\n  useEffect(() => {\n    if (openProp) {\n      const timer = setTimeout(\n        () => setDeferredOpen(true),\n        MENU_ANIMATION_DURATION,\n      );\n      return () => clearTimeout(timer);\n    } else {\n      setDeferredOpen(false);\n    }\n  }, [openProp]);\n\n  const open = openProp ? deferredOpen : openProp;\n\n  return (\n    <DropdownMenuSub open={open} onOpenChange={onOpenChange}>\n      <DropdownMenuSubTrigger asChild>{trigger}</DropdownMenuSubTrigger>\n      <DropdownMenuPortal>\n        <DropdownMenuSubContent asChild alignOffset={-20}>\n          <FloatingMenu title=\"\" showTitle={false}>\n            {children}\n          </FloatingMenu>\n        </DropdownMenuSubContent>\n      </DropdownMenuPortal>\n    </DropdownMenuSub>\n  );\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      SubMenuWrapper: drawer ? null : DropdownSubMenuWrapper,\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":";;;;;;;;;;;AAwFA,IAAM,2BAAqD,EACzD,UACA,eAEA,oBAAC,kBAAD;CAAkB,UAAU,YAAY,KAAA;CAAW,SAAA;CAChD;CACgB,CAAA;;AAIrB,IAAM,0BAA0B;AAEhC,IAAM,0BAAmD,EACvD,SACA,UACA,MAAM,UACN,mBACI;CAKJ,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;AAEvD,iBAAgB;AACd,MAAI,UAAU;GACZ,MAAM,QAAQ,iBACN,gBAAgB,KAAK,EAC3B,wBACD;AACD,gBAAa,aAAa,MAAM;QAEhC,iBAAgB,MAAM;IAEvB,CAAC,SAAS,CAAC;AAId,QACE,qBAAC,iBAAD;EAAuB,MAHZ,WAAW,eAAe;EAGM;YAA3C,CACE,oBAAC,wBAAD;GAAwB,SAAA;aAAS;GAAiC,CAAA,EAClE,oBAAC,oBAAD,EAAA,UACE,oBAAC,wBAAD;GAAwB,SAAA;GAAQ,aAAa;aAC3C,oBAAC,cAAD;IAAc,OAAM;IAAG,WAAW;IAC/B;IACY,CAAA;GACQ,CAAA,EACN,CAAA,CACL;;;;;;AAOtB,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,gBAAgB,SAAS,OAAO;EAChC;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.map

@@ -1 +1 @@
-{"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"}
+{"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 SubMenuWrapperProps {\n  /**\n   * The trigger element that opens the submenu (typically a MenuItem).\n   */\n  trigger: ReactNode;\n  /**\n   * The submenu contents.\n   */\n  children: ReactNode;\n  /**\n   * Whether the submenu is open (controlled).\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the submenu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface MenuData {\n  /**\n   * A component that wraps interactive menu items.\n   */\n  MenuItemWrapper: ComponentType<MenuItemWrapperProps> | null;\n  /**\n   * A component that wraps submenus.\n   */\n  SubMenuWrapper: ComponentType<SubMenuWrapperProps> | 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":";;;;;;AAyDA,IAAa,eAAA,oBAAA,eAA6C,KAAK"}

package/dist/{src/components → components}/Menu/MenuContext.d.ts

@@ -8,11 +8,33 @@ export interface MenuItemWrapperProps {
     onSelect: (e: Event) => void;
     children: ReactNode;
 }
+export interface SubMenuWrapperProps {
+    /**
+     * The trigger element that opens the submenu (typically a MenuItem).
+     */
+    trigger: ReactNode;
+    /**
+     * The submenu contents.
+     */
+    children: ReactNode;
+    /**
+     * Whether the submenu is open (controlled).
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the open state of the submenu changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+}
 export interface MenuData {
     /**
      * A component that wraps interactive menu items.
      */
     MenuItemWrapper: ComponentType<MenuItemWrapperProps> | null;
+    /**
+     * A component that wraps submenus.
+     */
+    SubMenuWrapper: ComponentType<SubMenuWrapperProps> | null;
     /**
      * Event handler called when the open state of the menu changes.
      */

package/dist/components/Menu/MenuContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContext.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuContext.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAE1E,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,eAAe,EAAE,aAAa,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;IAC5D;;OAEG;IACH,cAAc,EAAE,aAAa,CAAC,mBAAmB,CAAC,GAAG,IAAI,CAAC;IAC1D;;OAEG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,0CAAuC,CAAC"}

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

@@ -1 +1 @@
-{"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"}
+{"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 SubMenuWrapperProps {\n  /**\n   * The trigger element that opens the submenu (typically a MenuItem).\n   */\n  trigger: ReactNode;\n  /**\n   * The submenu contents.\n   */\n  children: ReactNode;\n  /**\n   * Whether the submenu is open (controlled).\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the submenu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface MenuData {\n  /**\n   * A component that wraps interactive menu items.\n   */\n  MenuItemWrapper: ComponentType<MenuItemWrapperProps> | null;\n  /**\n   * A component that wraps submenus.\n   */\n  SubMenuWrapper: ComponentType<SubMenuWrapperProps> | 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":";;;;;;AAyDA,IAAa,cAAc,cAA+B,KAAK"}

package/dist/components/Menu/MenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EACZ,KAAK,wBAAwB,EAC7B,KAAK,aAAa,EAGlB,KAAK,YAAY,EACjB,KAAK,aAAa,EAGlB,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAK1C,KAAK,eAAe,GAAG,QAAQ,GAAG,GAAG,GAAG,KAAK,CAAC;AAE9C,KAAK,KAAK,CAAC,CAAC,SAAS,eAAe,IAAI;IACtC;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,GAAG,YAAY,CAAC;IAC/D;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC;IACnD;;;;OAIG;IAEH,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AAE9D;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,eAAe,GAAG,QAAQ,EAAE,6HAa5D,KAAK,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,YAyFnB,CAAC"}

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

@@ -1,17 +1,17 @@
 //#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 item = "_item_bym9p_8";
+var interactive = "_interactive_bym9p_26";
+var label = "_label_bym9p_35";
+var icon = "_icon_bym9p_51";
+var disabled = "_disabled_bym9p_140";
 var MenuItem_module_default = {
 	item,
 	interactive,
-	"no-label": "_no-label_lqfwq_30",
+	"no-label": "_no-label_bym9p_31",
 	label,
-	"no-icon": "_no-icon_lqfwq_41",
+	"no-icon": "_no-icon_bym9p_42",
 	icon,
-	"nav-hint": "_nav-hint_lqfwq_59",
+	"nav-hint": "_nav-hint_bym9p_60",
 	disabled
 };
 //#endregion

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

@@ -1 +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":""}
+{"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.item[data-state] {\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/* Submenu triggers: always show the chevron and apply hover style when open */\n.item[data-state] > .nav-hint {\n  display: initial;\n}\n\n.item[data-state] > .nav-hint ~ * {\n  display: none;\n}\n\n.item[data-state=\"open\"][data-kind=\"primary\"] {\n  background: var(--cpd-color-bg-action-secondary-hovered);\n}\n\n.item[data-state=\"open\"][data-kind=\"critical\"] {\n  background: var(--cpd-color-bg-critical-subtle);\n}\n\n@media (hover) {\n  .item.interactive[data-kind=\"primary\"]:hover,\n  .item[data-state][data-kind=\"primary\"]:hover {\n    background: var(--cpd-color-bg-action-secondary-hovered);\n  }\n\n  .item.interactive[data-kind=\"critical\"]:hover,\n  .item[data-state][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.item[data-state][data-kind=\"primary\"]:active {\n  background: var(--cpd-color-bg-action-secondary-pressed);\n}\n\n.item.interactive[data-kind=\"critical\"]:active,\n.item[data-state][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

@@ -1,17 +1,17 @@
 //#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 item = "_item_bym9p_8";
+var interactive = "_interactive_bym9p_26";
+var label = "_label_bym9p_35";
+var icon = "_icon_bym9p_51";
+var disabled = "_disabled_bym9p_140";
 var MenuItem_module_default = {
 	item,
 	interactive,
-	"no-label": "_no-label_lqfwq_30",
+	"no-label": "_no-label_bym9p_31",
 	label,
-	"no-icon": "_no-icon_lqfwq_41",
+	"no-icon": "_no-icon_bym9p_42",
 	icon,
-	"nav-hint": "_nav-hint_lqfwq_59",
+	"nav-hint": "_nav-hint_bym9p_60",
 	disabled
 };
 //#endregion

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

@@ -1 +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":""}
+{"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.item[data-state] {\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/* Submenu triggers: always show the chevron and apply hover style when open */\n.item[data-state] > .nav-hint {\n  display: initial;\n}\n\n.item[data-state] > .nav-hint ~ * {\n  display: none;\n}\n\n.item[data-state=\"open\"][data-kind=\"primary\"] {\n  background: var(--cpd-color-bg-action-secondary-hovered);\n}\n\n.item[data-state=\"open\"][data-kind=\"critical\"] {\n  background: var(--cpd-color-bg-critical-subtle);\n}\n\n@media (hover) {\n  .item.interactive[data-kind=\"primary\"]:hover,\n  .item[data-state][data-kind=\"primary\"]:hover {\n    background: var(--cpd-color-bg-action-secondary-hovered);\n  }\n\n  .item.interactive[data-kind=\"critical\"]:hover,\n  .item[data-state][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.item[data-state][data-kind=\"primary\"]:active {\n  background: var(--cpd-color-bg-action-secondary-pressed);\n}\n\n.item.interactive[data-kind=\"critical\"]:active,\n.item[data-state][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/MenuTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTitle.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuTitle.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,cAAc;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAY9C,CAAC"}

package/dist/components/Menu/RadioMenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/RadioMenuItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAKN,MAAM,OAAO,CAAC;AAcf;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;IAVxB;;OAEG;aACM,OAAO;0CA2CjB,CAAC"}

package/dist/components/Menu/SubMenu.cjs

@@ -0,0 +1,24 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_MenuContext = require("./MenuContext.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Menu/SubMenu.tsx
+/**
+* A submenu within a Menu or ContextMenu. The trigger should be a MenuItem
+* component and the children are the submenu items.
+*/
+var SubMenu = ({ trigger, open, onOpenChange, children }) => {
+	const context = (0, react.useContext)(require_MenuContext.MenuContext);
+	if (context?.SubMenuWrapper == null) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [trigger, children] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(context.SubMenuWrapper, {
+		trigger,
+		open,
+		onOpenChange,
+		children
+	});
+};
+//#endregion
+exports.SubMenu = SubMenu;
+
+//# sourceMappingURL=SubMenu.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.cjs","names":[],"sources":["../../../src/components/Menu/SubMenu.tsx"],"sourcesContent":["/*\nCopyright 2026 Element Creations 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, useContext } from \"react\";\nimport { MenuContext } from \"./MenuContext\";\n\ninterface Props {\n  /**\n   * The trigger element that opens the submenu. This should be a MenuItem.\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the submenu is open (controlled).\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the submenu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The submenu contents (typically MenuItem elements).\n   */\n  children: ReactNode;\n}\n\n/**\n * A submenu within a Menu or ContextMenu. The trigger should be a MenuItem\n * component and the children are the submenu items.\n */\nexport const SubMenu: FC<Props> = ({\n  trigger,\n  open,\n  onOpenChange,\n  children,\n}) => {\n  const context = useContext(MenuContext);\n\n  // When there's no SubMenuWrapper (e.g. drawer on mobile), flatten the\n  // submenu items inline — nested flyouts don't work well in drawers.\n  if (context?.SubMenuWrapper == null) {\n    return (\n      <>\n        {trigger}\n        {children}\n      </>\n    );\n  }\n\n  return (\n    <context.SubMenuWrapper\n      trigger={trigger}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      {children}\n    </context.SubMenuWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;AAiCA,IAAa,WAAsB,EACjC,SACA,MACA,cACA,eACI;CACJ,MAAM,WAAA,GAAA,MAAA,YAAqB,oBAAA,YAAY;AAIvC,KAAI,SAAS,kBAAkB,KAC7B,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,SACA,SACA,EAAA,CAAA;AAIP,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAQ,gBAAT;EACW;EACH;EACQ;EAEb;EACsB,CAAA"}

package/dist/components/Menu/SubMenu.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react';
+interface Props {
+    /**
+     * The trigger element that opens the submenu. This should be a MenuItem.
+     */
+    trigger: ReactNode;
+    /**
+     * Whether the submenu is open (controlled).
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the open state of the submenu changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The submenu contents (typically MenuItem elements).
+     */
+    children: ReactNode;
+}
+/**
+ * A submenu within a Menu or ContextMenu. The trigger should be a MenuItem
+ * component and the children are the submenu items.
+ */
+export declare const SubMenu: FC<Props>;
+export {};
+//# sourceMappingURL=SubMenu.d.ts.map

package/dist/components/Menu/SubMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/SubMenu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAGnE,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,KAAK,CA4B7B,CAAC"}

package/dist/components/Menu/SubMenu.js

@@ -0,0 +1,22 @@
+import { MenuContext } from "./MenuContext.js";
+import { useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Menu/SubMenu.tsx
+/**
+* A submenu within a Menu or ContextMenu. The trigger should be a MenuItem
+* component and the children are the submenu items.
+*/
+var SubMenu = ({ trigger, open, onOpenChange, children }) => {
+	const context = useContext(MenuContext);
+	if (context?.SubMenuWrapper == null) return /* @__PURE__ */ jsxs(Fragment, { children: [trigger, children] });
+	return /* @__PURE__ */ jsx(context.SubMenuWrapper, {
+		trigger,
+		open,
+		onOpenChange,
+		children
+	});
+};
+//#endregion
+export { SubMenu };
+
+//# sourceMappingURL=SubMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.js","names":[],"sources":["../../../src/components/Menu/SubMenu.tsx"],"sourcesContent":["/*\nCopyright 2026 Element Creations 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, useContext } from \"react\";\nimport { MenuContext } from \"./MenuContext\";\n\ninterface Props {\n  /**\n   * The trigger element that opens the submenu. This should be a MenuItem.\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the submenu is open (controlled).\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the submenu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The submenu contents (typically MenuItem elements).\n   */\n  children: ReactNode;\n}\n\n/**\n * A submenu within a Menu or ContextMenu. The trigger should be a MenuItem\n * component and the children are the submenu items.\n */\nexport const SubMenu: FC<Props> = ({\n  trigger,\n  open,\n  onOpenChange,\n  children,\n}) => {\n  const context = useContext(MenuContext);\n\n  // When there's no SubMenuWrapper (e.g. drawer on mobile), flatten the\n  // submenu items inline — nested flyouts don't work well in drawers.\n  if (context?.SubMenuWrapper == null) {\n    return (\n      <>\n        {trigger}\n        {children}\n      </>\n    );\n  }\n\n  return (\n    <context.SubMenuWrapper\n      trigger={trigger}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      {children}\n    </context.SubMenuWrapper>\n  );\n};\n"],"mappings":";;;;;;;;AAiCA,IAAa,WAAsB,EACjC,SACA,MACA,cACA,eACI;CACJ,MAAM,UAAU,WAAW,YAAY;AAIvC,KAAI,SAAS,kBAAkB,KAC7B,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACA,SACA,EAAA,CAAA;AAIP,QACE,oBAAC,QAAQ,gBAAT;EACW;EACH;EACQ;EAEb;EACsB,CAAA"}

package/dist/components/Menu/ToggleMenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAKN,MAAM,OAAO,CAAC;AAcf;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;IAVzB;;OAEG;aACM,OAAO;0CA8CjB,CAAC"}

package/dist/components/Nav/NavBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../../src/components/Nav/NavBar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,iEAMpB,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,4CAqCtC,CAAC"}

package/dist/components/Nav/NavItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../../src/components/Nav/NavItem.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EACZ,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EAEzB,KAAK,iBAAiB,EAEvB,MAAM,OAAO,CAAC;AAIf,KAAK,YAAY,GAAG;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,KAAK,gBAAgB,GAAG,IAAI,CAC1B,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,OAAO,GAAG,WAAW,CACtB,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,YAAY,CAAC;AAEjB,KAAK,kBAAkB,GAAG,IAAI,CAC5B,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,OAAO,GAAG,WAAW,CACtB,GAAG;IACF,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CAC/C,GAAG,YAAY,CAAC;AAmDjB;;;GAGG;AACH,eAAO,MAAM,OAAO,0IAsDlB,CAAC"}

package/dist/components/Nav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Nav/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/PageHeader/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAEZ,KAAK,aAAa,EAElB,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAuBf,eAAO,MAAM,UAAU;UAjBf,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAC9C;;OAEG;aACM,MAAM;IACf;;;OAGG;WACI,IAAI,GAAG,IAAI;IAClB;;;OAGG;cACO,SAAS;+EAgCpB,CAAC"}

package/dist/components/Progress/Progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,KAAK,aAAa,GAAG;IACnB,2CAA2C;IAC3C,IAAI,EAAE,IAAI,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAE3B;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAE3C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACxD,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD;;GAEG;AACH,eAAO,MAAM,QAAQ,mGAiDpB,CAAC"}

package/dist/components/ReleaseAnnouncement/ReleaseAnnouncement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReleaseAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx"],"names":[],"mappings":"AAOA,OAAc,EAGZ,KAAK,GAAG,EACR,KAAK,iBAAiB,EAEvB,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,KAAK,SAAS,EAGf,MAAM,oBAAoB,CAAC;AAQ5B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,KAAK,2BAA2B,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEhF,UAAU,wBAAyB,SAAQ,IAAI,CAC7C,2BAA2B,EAC3B,WAAW,GAAG,cAAc,CAC7B;IACC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC;AAClC;;GAEG;AACH,QAAQ,EACR,SAAmB,EACnB,YAAmB,EACnB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,GAAG,GAAG,CAAC,OAAO,CAW3D"}

package/dist/components/ReleaseAnnouncement/ReleaseAnnouncementContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReleaseAnnouncementContext.d.ts","sourceRoot":"","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncementContext.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,GAAG,IAAI,CAAC;AACpE;;GAEG;AACH,eAAO,MAAM,0BAA0B,sCAAmC,CAAC;AAE3E;;GAEG;AACH,wBAAgB,6BAA6B;;;;;;;;;iCAW0qnC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAD34nC"}

package/dist/components/ReleaseAnnouncement/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReleaseAnnouncement/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/ReleaseAnnouncement/useReleaseAnnouncement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReleaseAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/ReleaseAnnouncement/useReleaseAnnouncement.tsx"],"names":[],"mappings":"AAOA,OAAO,EAKL,KAAK,SAAS,EAMf,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAEhE,UAAU,2BAA2B;IACnC;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC9C;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,MAAM,EACN,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,YAAY,GACb,EAAE,2BAA2B;;;;;;;;;iCA0D6kkC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAD/xkC"}

package/dist/components/Search/Search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/components/Search/Search.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAqB,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAS,MAAM,SAAS,CAAC;AAIvC,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;CAClD,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC,CAAC;AAEjD;;GAEG;AACH,eAAO,MAAM,MAAM,mGA8BjB,CAAC"}

package/dist/components/Separator/Separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,EACZ,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AAIf,KAAK,cAAc,GAAG;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;CAC5C,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAI/C;;GAEG;AACH,eAAO,MAAM,SAAS,oGAgCrB,CAAC"}

package/dist/components/Toast/Toast.cjs

@@ -1,18 +1,43 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Text = require("../Typography/Text.cjs");
+const require_IconButton = require("../Button/IconButton/IconButton.cjs");
 const require_Toast_module = require("./Toast.module.cjs");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let _vector_im_compound_design_tokens_assets_web_icons_close = require("@vector-im/compound-design-tokens/assets/web/icons/close");
+_vector_im_compound_design_tokens_assets_web_icons_close = require_runtime.__toESM(_vector_im_compound_design_tokens_assets_web_icons_close);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/Toast/Toast.tsx
-var Toast = (0, react.forwardRef)(function Toast({ children, className, ...props }, ref) {
-	const classes = (0, classnames.default)(require_Toast_module.default["toast-container"], className);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+var Toast = (0, react.forwardRef)(function Toast({ children, className, Icon, onClose, tooltip, ...props }, ref) {
+	const hasCloseButton = Boolean(onClose);
+	const classes = (0, classnames.default)(require_Toast_module.default["toast-container"], className, { [require_Toast_module.default["has-close"]]: hasCloseButton });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Text.Text, {
 		...props,
+		as: "div",
+		size: "sm",
+		weight: "medium",
 		className: classes,
 		ref,
-		children
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_Toast_module.default.content,
+			children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				className: require_Toast_module.default.icon,
+				width: 20,
+				height: 20,
+				"aria-hidden": true
+			}), children]
+		}), hasCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+			size: "24px",
+			kind: "secondary",
+			noBackground: true,
+			tooltip,
+			tooltipPlacement: "right",
+			className: require_Toast_module.default.close,
+			onClick: onClose,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_vector_im_compound_design_tokens_assets_web_icons_close.default, {})
+		})]
 	});
 });
 //#endregion

package/dist/components/Toast/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/*\nCopyright 2024 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, { forwardRef, type PropsWithChildren } from \"react\";\nimport styles from \"./Toast.module.css\";\n\ntype ToastProps = {\n  className?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  { children, className, ...props }: PropsWithChildren<ToastProps>,\n  ref,\n) {\n  const classes = classnames(styles[\"toast-container\"], className);\n  return (\n    <div {...props} className={classes} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;AAeA,IAAa,SAAA,GAAA,MAAA,YAA+C,SAAS,MACnE,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,MAAM,WAAA,GAAA,WAAA,SAAqB,qBAAA,QAAO,oBAAoB,UAAU;AAChE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAO,WAAW;EAAc;EACtC;EACG,CAAA;EAER"}
+{"version":3,"file":"Toast.cjs","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/*\nCopyright 2024 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  forwardRef,\n  type ComponentType,\n  type MouseEventHandler,\n  type PropsWithChildren,\n} from \"react\";\nimport styles from \"./Toast.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport { IconButton } from \"../Button\";\nimport CloseIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\ntype ToastProps = {\n  className?: string;\n  /**\n   * An icon to display within the button.\n   */\n  Icon?: ComponentType<React.SVGAttributes<SVGElement>>;\n  /**\n   * Whether to show the action button. If true, an action button will be shown on the right side of the toast.\n   */\n  onClose?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to show on the close button. This is only used if `onClose` is provided.\n   */\n  tooltip?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  {\n    children,\n    className,\n    Icon,\n    onClose,\n    tooltip,\n    ...props\n  }: PropsWithChildren<ToastProps>,\n  ref,\n) {\n  const hasCloseButton = Boolean(onClose);\n\n  const classes = classnames(styles[\"toast-container\"], className, {\n    [styles[\"has-close\"]]: hasCloseButton,\n  });\n\n  return (\n    <Text\n      {...props}\n      as=\"div\"\n      size=\"sm\"\n      weight=\"medium\"\n      className={classes}\n      ref={ref}\n    >\n      <div className={styles.content}>\n        {Icon && (\n          <Icon\n            className={styles.icon}\n            width={20}\n            height={20}\n            aria-hidden={true}\n          />\n        )}\n        {children}\n      </div>\n      {hasCloseButton && (\n        <IconButton\n          size=\"24px\"\n          kind=\"secondary\"\n          noBackground={true}\n          tooltip={tooltip}\n          tooltipPlacement=\"right\"\n          className={styles.close}\n          onClick={onClose}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </Text>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAmCA,IAAa,SAAA,GAAA,MAAA,YAA+C,SAAS,MACnE,EACE,UACA,WACA,MACA,SACA,SACA,GAAG,SAEL,KACA;CACA,MAAM,iBAAiB,QAAQ,QAAQ;CAEvC,MAAM,WAAA,GAAA,WAAA,SAAqB,qBAAA,QAAO,oBAAoB,WAAW,GAC9D,qBAAA,QAAO,eAAe,gBACxB,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAAC,aAAA,MAAD;EACE,GAAI;EACJ,IAAG;EACH,MAAK;EACL,QAAO;EACP,WAAW;EACN;YANP,CAQE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAW,qBAAA,QAAO;aAAvB,CACG,QACC,iBAAA,GAAA,kBAAA,KAAC,MAAD;IACE,WAAW,qBAAA,QAAO;IAClB,OAAO;IACP,QAAQ;IACR,eAAa;IACb,CAAA,EAEH,SACG;MACL,kBACC,iBAAA,GAAA,kBAAA,KAAC,mBAAA,YAAD;GACE,MAAK;GACL,MAAK;GACL,cAAc;GACL;GACT,kBAAiB;GACjB,WAAW,qBAAA,QAAO;GAClB,SAAS;aAET,iBAAA,GAAA,kBAAA,KAAC,yDAAA,SAAD,EAAa,CAAA;GACF,CAAA,CAEV;;EAET"}