@vector-im/compound-web 8.4.0 → 9.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","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"],"names":["classnames","drawerStyles"],"mappings":";;;;;;;;;;AAkEA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,0BACG,iBAAA,EAAgB,UAAU,YAAY,QAAW,SAAO,MACtD,UACH;AAMK,MAAM,cAAyB,CAAC;AAAA,EACrC;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,eAAe;AAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAAA;AAK5B,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,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EAAA;AAUL,SAAO,SACL,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAK,cAA6B,UAAA,QAAA,CAAQ;AAAA,IAC3C,oBAAC,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAWC,WAAa,EAAE,GAAG;AAAA,MACxD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAA,oBAAC,YAAA,EAAW,OAAe,SAAA,CAAS,EAAA,CACtC;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAAA,EAAA,CACF,IAEA,qBAAC,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,IACD,oBAAC,QAAA,EACC,UAAA,oBAAC,SAAA,EAAQ,SAAO,MACd,UAAA,oBAAC,cAAA,EAAa,WAAsB,OACjC,SAAA,CACH,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"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"}

package/dist/components/Menu/DrawerMenu.cjs

@@ -1,24 +1,29 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const DrawerMenu_module = require("./DrawerMenu.module.css.cjs");
-const platform = require("../../utils/platform.cjs");
-const classNames = require("classnames");
-const DrawerMenu = React.forwardRef(
-  ({ title, children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: classNames(className, DrawerMenu_module.default.drawer),
-      "aria-label": title,
-      "data-platform": platform.getPlatform(),
-      ...props,
-      role: "menu",
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: DrawerMenu_module.default.body, children })
-    }
-  )
-);
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_DrawerMenu_module = require("./DrawerMenu.module.cjs");
+const require_platform = require("../../utils/platform.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");
+//#region src/components/Menu/DrawerMenu.tsx
+/**
+* A menu in a drawer, as commonly seen on mobile.
+*/
+var DrawerMenu = (0, react.forwardRef)(({ title, children, className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	ref,
+	className: (0, classnames.default)(className, require_DrawerMenu_module.default.drawer),
+	"aria-label": title,
+	"data-platform": require_platform.getPlatform(),
+	...props,
+	role: "menu",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_DrawerMenu_module.default.body,
+		children
+	})
+}));
 DrawerMenu.displayName = "DrawerMenu";
+//#endregion
 exports.DrawerMenu = DrawerMenu;
-//# sourceMappingURL=DrawerMenu.cjs.map
+
+//# sourceMappingURL=DrawerMenu.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerMenu.cjs","sources":["../../../src/components/Menu/DrawerMenu.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 ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport styles from \"./DrawerMenu.module.css\";\nimport { getPlatform } from \"../../utils/platform\";\nimport classNames from \"classnames\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a drawer, as commonly seen on mobile.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const DrawerMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, children, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={classNames(className, styles.drawer)}\n      aria-label={title}\n      data-platform={getPlatform()}\n      {...props}\n      role=\"menu\"\n    >\n      <div className={styles.body}>{children}</div>\n    </div>\n  ),\n);\n\nDrawerMenu.displayName = \"DrawerMenu\";\n"],"names":["forwardRef","jsx","styles","getPlatform"],"mappings":";;;;;;;AAgCO,MAAM,aAAaA,MAAAA;AAAAA,EACxB,CAAC,EAAE,OAAO,UAAU,WAAW,GAAG,MAAA,GAAS,QACzCC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,WAAW,WAAWC,kBAAAA,QAAO,MAAM;AAAA,MAC9C,cAAY;AAAA,MACZ,iBAAeC,SAAAA,YAAA;AAAA,MACd,GAAG;AAAA,MACJ,MAAK;AAAA,MAEL,UAAAF,2BAAAA,IAAC,OAAA,EAAI,WAAWC,kBAAAA,QAAO,MAAO,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAG7C;AAEA,WAAW,cAAc;;"}
+{"version":3,"file":"DrawerMenu.cjs","names":[],"sources":["../../../src/components/Menu/DrawerMenu.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 ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport styles from \"./DrawerMenu.module.css\";\nimport { getPlatform } from \"../../utils/platform\";\nimport classNames from \"classnames\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a drawer, as commonly seen on mobile.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const DrawerMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, children, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={classNames(className, styles.drawer)}\n      aria-label={title}\n      data-platform={getPlatform()}\n      {...props}\n      role=\"menu\"\n    >\n      <div className={styles.body}>{children}</div>\n    </div>\n  ),\n);\n\nDrawerMenu.displayName = \"DrawerMenu\";\n"],"mappings":";;;;;;;;;;;;AAgCA,IAAa,cAAA,GAAA,MAAA,aACV,EAAE,OAAO,UAAU,WAAW,GAAG,SAAS,QACzC,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,WAAA,SAAsB,WAAW,0BAAA,QAAO,OAAO;CAC/C,cAAY;CACZ,iBAAe,iBAAA,aAAa;CAC5B,GAAI;CACJ,MAAK;WAEL,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAW,0BAAA,QAAO;EAAO;EAAe,CAAA;CACzC,CAAA,CAET;AAED,WAAW,cAAc"}

package/dist/components/Menu/DrawerMenu.js

@@ -1,24 +1,26 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import drawerMenu from "./DrawerMenu.module.css.js";
+import DrawerMenu_module_default from "./DrawerMenu.module.js";
 import { getPlatform } from "../../utils/platform.js";
 import classNames from "classnames";
-const DrawerMenu = forwardRef(
-  ({ title, children, className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: classNames(className, drawerMenu.drawer),
-      "aria-label": title,
-      "data-platform": getPlatform(),
-      ...props,
-      role: "menu",
-      children: /* @__PURE__ */ jsx("div", { className: drawerMenu.body, children })
-    }
-  )
-);
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Menu/DrawerMenu.tsx
+/**
+* A menu in a drawer, as commonly seen on mobile.
+*/
+var DrawerMenu = forwardRef(({ title, children, className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: classNames(className, DrawerMenu_module_default.drawer),
+	"aria-label": title,
+	"data-platform": getPlatform(),
+	...props,
+	role: "menu",
+	children: /* @__PURE__ */ jsx("div", {
+		className: DrawerMenu_module_default.body,
+		children
+	})
+}));
 DrawerMenu.displayName = "DrawerMenu";
-export {
-  DrawerMenu
-};
-//# sourceMappingURL=DrawerMenu.js.map
+//#endregion
+export { DrawerMenu };
+
+//# sourceMappingURL=DrawerMenu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerMenu.js","sources":["../../../src/components/Menu/DrawerMenu.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 ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport styles from \"./DrawerMenu.module.css\";\nimport { getPlatform } from \"../../utils/platform\";\nimport classNames from \"classnames\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a drawer, as commonly seen on mobile.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const DrawerMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, children, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={classNames(className, styles.drawer)}\n      aria-label={title}\n      data-platform={getPlatform()}\n      {...props}\n      role=\"menu\"\n    >\n      <div className={styles.body}>{children}</div>\n    </div>\n  ),\n);\n\nDrawerMenu.displayName = \"DrawerMenu\";\n"],"names":["styles"],"mappings":";;;;;AAgCO,MAAM,aAAa;AAAA,EACxB,CAAC,EAAE,OAAO,UAAU,WAAW,GAAG,MAAA,GAAS,QACzC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,WAAW,WAAWA,WAAO,MAAM;AAAA,MAC9C,cAAY;AAAA,MACZ,iBAAe,YAAA;AAAA,MACd,GAAG;AAAA,MACJ,MAAK;AAAA,MAEL,UAAA,oBAAC,OAAA,EAAI,WAAWA,WAAO,MAAO,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAG7C;AAEA,WAAW,cAAc;"}
+{"version":3,"file":"DrawerMenu.js","names":[],"sources":["../../../src/components/Menu/DrawerMenu.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 ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport styles from \"./DrawerMenu.module.css\";\nimport { getPlatform } from \"../../utils/platform\";\nimport classNames from \"classnames\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a drawer, as commonly seen on mobile.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const DrawerMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, children, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={classNames(className, styles.drawer)}\n      aria-label={title}\n      data-platform={getPlatform()}\n      {...props}\n      role=\"menu\"\n    >\n      <div className={styles.body}>{children}</div>\n    </div>\n  ),\n);\n\nDrawerMenu.displayName = \"DrawerMenu\";\n"],"mappings":";;;;;;;;;AAgCA,IAAa,aAAa,YACvB,EAAE,OAAO,UAAU,WAAW,GAAG,SAAS,QACzC,oBAAC,OAAD;CACO;CACL,WAAW,WAAW,WAAW,0BAAO,OAAO;CAC/C,cAAY;CACZ,iBAAe,aAAa;CAC5B,GAAI;CACJ,MAAK;WAEL,oBAAC,OAAD;EAAK,WAAW,0BAAO;EAAO;EAAe,CAAA;CACzC,CAAA,CAET;AAED,WAAW,cAAc"}

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

@@ -0,0 +1,9 @@
+var DrawerMenu_module_default = {
+	bg: "_bg_610zp_8",
+	drawer: "_drawer_610zp_17",
+	body: "_body_610zp_51"
+};
+//#endregion
+exports.default = DrawerMenu_module_default;
+
+//# sourceMappingURL=DrawerMenu.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerMenu.module.cjs","names":[],"sources":["../../../src/components/Menu/DrawerMenu.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.bg {\n  position: fixed;\n  inset: 0;\n\n  /* TODO: This value is used across modals and menu drawers, so would be worth\n  tokenizing */\n  background: rgb(3 12 27 / 52.8%);\n}\n\n.drawer {\n  position: fixed;\n  background: var(--cpd-color-bg-canvas-default);\n  inset-block-end: 0;\n  inset-inline: 0;\n\n  /* Cap the inline content size at 520px, filling the rest of the space with\n  padding */\n  padding-inline: max(0px, calc((100% - 520px) / 2));\n  border-start-start-radius: var(--border-radius);\n  border-start-end-radius: var(--border-radius);\n  display: flex;\n  flex-direction: column;\n\n  /* Drawer comes in the Android style by default */\n  --border-radius: 28px;\n  --handle-block-size: 4px;\n  --handle-inline-size: 32px;\n  --handle-inset-block-start: var(--cpd-space-4x);\n  --handle-inset-block-end: 0px;\n  --content-inset-block-start: calc(\n    var(--handle-inset-block-start) + var(--handle-block-size) +\n      var(--handle-inset-block-end)\n  );\n}\n\n.drawer[data-platform=\"ios\"] {\n  --border-radius: 10px;\n  --handle-block-size: 5px;\n  --handle-inline-size: 36px;\n  --handle-inset-block-start: var(--cpd-space-1-5x);\n  --handle-inset-block-end: 1px;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cpd-space-2x);\n  padding-block: calc(var(--content-inset-block-start) + var(--cpd-space-6x))\n    var(--cpd-space-12x);\n  border-start-start-radius: var(--border-radius);\n  border-start-end-radius: var(--border-radius);\n\n  /* Even with overflow: auto, the content can still overflow at the corners\n  where it meets with the curved border. A contain: paint fixes that. */\n  contain: paint;\n  overflow: auto;\n  scrollbar-width: none;\n\n  --cpd-separator-spacing: 0;\n  --cpd-separator-inset: var(--cpd-space-4x);\n}\n\n.body::before {\n  content: \"\";\n  position: absolute;\n  block-size: var(--handle-block-size);\n  inset-inline: calc((100% - var(--handle-inline-size)) / 2);\n  inset-block-start: var(--handle-inset-block-start);\n  background: var(--cpd-color-icon-secondary);\n  border-radius: var(--cpd-radius-pill-effect);\n}\n"],"mappings":""}

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

@@ -0,0 +1,9 @@
+var DrawerMenu_module_default = {
+	bg: "_bg_610zp_8",
+	drawer: "_drawer_610zp_17",
+	body: "_body_610zp_51"
+};
+//#endregion
+export { DrawerMenu_module_default as default };
+
+//# sourceMappingURL=DrawerMenu.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerMenu.module.js","names":[],"sources":["../../../src/components/Menu/DrawerMenu.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.bg {\n  position: fixed;\n  inset: 0;\n\n  /* TODO: This value is used across modals and menu drawers, so would be worth\n  tokenizing */\n  background: rgb(3 12 27 / 52.8%);\n}\n\n.drawer {\n  position: fixed;\n  background: var(--cpd-color-bg-canvas-default);\n  inset-block-end: 0;\n  inset-inline: 0;\n\n  /* Cap the inline content size at 520px, filling the rest of the space with\n  padding */\n  padding-inline: max(0px, calc((100% - 520px) / 2));\n  border-start-start-radius: var(--border-radius);\n  border-start-end-radius: var(--border-radius);\n  display: flex;\n  flex-direction: column;\n\n  /* Drawer comes in the Android style by default */\n  --border-radius: 28px;\n  --handle-block-size: 4px;\n  --handle-inline-size: 32px;\n  --handle-inset-block-start: var(--cpd-space-4x);\n  --handle-inset-block-end: 0px;\n  --content-inset-block-start: calc(\n    var(--handle-inset-block-start) + var(--handle-block-size) +\n      var(--handle-inset-block-end)\n  );\n}\n\n.drawer[data-platform=\"ios\"] {\n  --border-radius: 10px;\n  --handle-block-size: 5px;\n  --handle-inline-size: 36px;\n  --handle-inset-block-start: var(--cpd-space-1-5x);\n  --handle-inset-block-end: 1px;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cpd-space-2x);\n  padding-block: calc(var(--content-inset-block-start) + var(--cpd-space-6x))\n    var(--cpd-space-12x);\n  border-start-start-radius: var(--border-radius);\n  border-start-end-radius: var(--border-radius);\n\n  /* Even with overflow: auto, the content can still overflow at the corners\n  where it meets with the curved border. A contain: paint fixes that. */\n  contain: paint;\n  overflow: auto;\n  scrollbar-width: none;\n\n  --cpd-separator-spacing: 0;\n  --cpd-separator-inset: var(--cpd-space-4x);\n}\n\n.body::before {\n  content: \"\";\n  position: absolute;\n  block-size: var(--handle-block-size);\n  inset-inline: calc((100% - var(--handle-inline-size)) / 2);\n  inset-block-start: var(--handle-inset-block-start);\n  background: var(--cpd-color-icon-secondary);\n  border-radius: var(--cpd-radius-pill-effect);\n}\n"],"mappings":""}

package/dist/components/Menu/FloatingMenu.cjs

@@ -1,30 +1,33 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const React = require("react");
-const FloatingMenu_module = require("./FloatingMenu.module.css.cjs");
-const MenuTitle = require("./MenuTitle.cjs");
-const FloatingMenu = React.forwardRef(
-  ({ title, showTitle = true, className, children, ...props }, ref) => {
-    const titleId = React.useId();
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        role: "menu",
-        ref,
-        "aria-label": showTitle ? void 0 : title,
-        "aria-labelledby": showTitle ? titleId : void 0,
-        className: classNames(className, FloatingMenu_module.default.menu),
-        ...props,
-        children: [
-          showTitle && /* @__PURE__ */ jsxRuntime.jsx(MenuTitle.MenuTitle, { className: FloatingMenu_module.default.title, title, id: titleId }),
-          children
-        ]
-      }
-    );
-  }
-);
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_FloatingMenu_module = require("./FloatingMenu.module.cjs");
+const require_MenuTitle = require("./MenuTitle.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");
+//#region src/components/Menu/FloatingMenu.tsx
+/**
+* A menu in a floating box, as commonly seen on desktop.
+*/
+var FloatingMenu = (0, react.forwardRef)(({ title, showTitle = true, className, children, ...props }, ref) => {
+	const titleId = (0, react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "menu",
+		ref,
+		"aria-label": showTitle ? void 0 : title,
+		"aria-labelledby": showTitle ? titleId : void 0,
+		className: (0, classnames.default)(className, require_FloatingMenu_module.default.menu),
+		...props,
+		children: [showTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuTitle.MenuTitle, {
+			className: require_FloatingMenu_module.default.title,
+			title,
+			id: titleId
+		}), children]
+	});
+});
 FloatingMenu.displayName = "FloatingMenu";
+//#endregion
 exports.FloatingMenu = FloatingMenu;
-//# sourceMappingURL=FloatingMenu.cjs.map
+
+//# sourceMappingURL=FloatingMenu.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingMenu.cjs","sources":["../../../src/components/Menu/FloatingMenu.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 ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport styles from \"./FloatingMenu.module.css\";\nimport { MenuTitle } from \"./MenuTitle.tsx\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Whether to show the title. If false, the title will be hidden but still used as a label for screen readers.\n   */\n  showTitle?: boolean;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a floating box, as commonly seen on desktop.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const FloatingMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, showTitle = true, className, children, ...props }, ref) => {\n    const titleId = useId();\n\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        aria-label={showTitle ? undefined : title}\n        aria-labelledby={showTitle ? titleId : undefined}\n        className={classnames(className, styles.menu)}\n        {...props}\n      >\n        {showTitle && (\n          <MenuTitle className={styles.title} title={title} id={titleId} />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nFloatingMenu.displayName = \"FloatingMenu\";\n"],"names":["forwardRef","useId","jsxs","classnames","styles","MenuTitle"],"mappings":";;;;;;;AAyCO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CAAC,EAAE,OAAO,YAAY,MAAM,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AACnE,UAAM,UAAUC,MAAAA,MAAA;AAEhB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,cAAY,YAAY,SAAY;AAAA,QACpC,mBAAiB,YAAY,UAAU;AAAA,QACvC,WAAWC,WAAW,WAAWC,oBAAAA,QAAO,IAAI;AAAA,QAC3C,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,4CACEC,UAAAA,WAAA,EAAU,WAAWD,4BAAO,OAAO,OAAc,IAAI,SAAS;AAAA,UAEhE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}
+{"version":3,"file":"FloatingMenu.cjs","names":[],"sources":["../../../src/components/Menu/FloatingMenu.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 ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport styles from \"./FloatingMenu.module.css\";\nimport { MenuTitle } from \"./MenuTitle.tsx\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Whether to show the title. If false, the title will be hidden but still used as a label for screen readers.\n   */\n  showTitle?: boolean;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a floating box, as commonly seen on desktop.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const FloatingMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, showTitle = true, className, children, ...props }, ref) => {\n    const titleId = useId();\n\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        aria-label={showTitle ? undefined : title}\n        aria-labelledby={showTitle ? titleId : undefined}\n        className={classnames(className, styles.menu)}\n        {...props}\n      >\n        {showTitle && (\n          <MenuTitle className={styles.title} title={title} id={titleId} />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nFloatingMenu.displayName = \"FloatingMenu\";\n"],"mappings":";;;;;;;;;;;;AAyCA,IAAa,gBAAA,GAAA,MAAA,aACV,EAAE,OAAO,YAAY,MAAM,WAAW,UAAU,GAAG,SAAS,QAAQ;CACnE,MAAM,WAAA,GAAA,MAAA,QAAiB;AAEvB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,MAAK;EACA;EACL,cAAY,YAAY,KAAA,IAAY;EACpC,mBAAiB,YAAY,UAAU,KAAA;EACvC,YAAA,GAAA,WAAA,SAAsB,WAAW,4BAAA,QAAO,KAAK;EAC7C,GAAI;YANN,CAQG,aACC,iBAAA,GAAA,kBAAA,KAAC,kBAAA,WAAD;GAAW,WAAW,4BAAA,QAAO;GAAc;GAAO,IAAI;GAAW,CAAA,EAElE,SACG;;EAGX;AAED,aAAa,cAAc"}

package/dist/components/Menu/FloatingMenu.js

@@ -1,30 +1,30 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import FloatingMenu_module_default from "./FloatingMenu.module.js";
+import { MenuTitle } from "./MenuTitle.js";
 import classNames from "classnames";
 import { forwardRef, useId } from "react";
-import styles from "./FloatingMenu.module.css.js";
-import { MenuTitle } from "./MenuTitle.js";
-const FloatingMenu = forwardRef(
-  ({ title, showTitle = true, className, children, ...props }, ref) => {
-    const titleId = useId();
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "menu",
-        ref,
-        "aria-label": showTitle ? void 0 : title,
-        "aria-labelledby": showTitle ? titleId : void 0,
-        className: classNames(className, styles.menu),
-        ...props,
-        children: [
-          showTitle && /* @__PURE__ */ jsx(MenuTitle, { className: styles.title, title, id: titleId }),
-          children
-        ]
-      }
-    );
-  }
-);
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Menu/FloatingMenu.tsx
+/**
+* A menu in a floating box, as commonly seen on desktop.
+*/
+var FloatingMenu = forwardRef(({ title, showTitle = true, className, children, ...props }, ref) => {
+	const titleId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "menu",
+		ref,
+		"aria-label": showTitle ? void 0 : title,
+		"aria-labelledby": showTitle ? titleId : void 0,
+		className: classNames(className, FloatingMenu_module_default.menu),
+		...props,
+		children: [showTitle && /* @__PURE__ */ jsx(MenuTitle, {
+			className: FloatingMenu_module_default.title,
+			title,
+			id: titleId
+		}), children]
+	});
+});
 FloatingMenu.displayName = "FloatingMenu";
-export {
-  FloatingMenu
-};
-//# sourceMappingURL=FloatingMenu.js.map
+//#endregion
+export { FloatingMenu };
+
+//# sourceMappingURL=FloatingMenu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingMenu.js","sources":["../../../src/components/Menu/FloatingMenu.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 ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport styles from \"./FloatingMenu.module.css\";\nimport { MenuTitle } from \"./MenuTitle.tsx\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Whether to show the title. If false, the title will be hidden but still used as a label for screen readers.\n   */\n  showTitle?: boolean;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a floating box, as commonly seen on desktop.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const FloatingMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, showTitle = true, className, children, ...props }, ref) => {\n    const titleId = useId();\n\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        aria-label={showTitle ? undefined : title}\n        aria-labelledby={showTitle ? titleId : undefined}\n        className={classnames(className, styles.menu)}\n        {...props}\n      >\n        {showTitle && (\n          <MenuTitle className={styles.title} title={title} id={titleId} />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nFloatingMenu.displayName = \"FloatingMenu\";\n"],"names":["classnames"],"mappings":";;;;;AAyCO,MAAM,eAAe;AAAA,EAC1B,CAAC,EAAE,OAAO,YAAY,MAAM,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AACnE,UAAM,UAAU,MAAA;AAEhB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,cAAY,YAAY,SAAY;AAAA,QACpC,mBAAiB,YAAY,UAAU;AAAA,QACvC,WAAWA,WAAW,WAAW,OAAO,IAAI;AAAA,QAC3C,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,iCACE,WAAA,EAAU,WAAW,OAAO,OAAO,OAAc,IAAI,SAAS;AAAA,UAEhE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"FloatingMenu.js","names":[],"sources":["../../../src/components/Menu/FloatingMenu.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 ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport styles from \"./FloatingMenu.module.css\";\nimport { MenuTitle } from \"./MenuTitle.tsx\";\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Whether to show the title. If false, the title will be hidden but still used as a label for screen readers.\n   */\n  showTitle?: boolean;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\n/**\n * A menu in a floating box, as commonly seen on desktop.\n */\n// This an internal component not intended for export! Consumers should use it\n// via the Menu or ContextMenu components.\nexport const FloatingMenu = forwardRef<HTMLDivElement, Props>(\n  ({ title, showTitle = true, className, children, ...props }, ref) => {\n    const titleId = useId();\n\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        aria-label={showTitle ? undefined : title}\n        aria-labelledby={showTitle ? titleId : undefined}\n        className={classnames(className, styles.menu)}\n        {...props}\n      >\n        {showTitle && (\n          <MenuTitle className={styles.title} title={title} id={titleId} />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nFloatingMenu.displayName = \"FloatingMenu\";\n"],"mappings":";;;;;;;;;AAyCA,IAAa,eAAe,YACzB,EAAE,OAAO,YAAY,MAAM,WAAW,UAAU,GAAG,SAAS,QAAQ;CACnE,MAAM,UAAU,OAAO;AAEvB,QACE,qBAAC,OAAD;EACE,MAAK;EACA;EACL,cAAY,YAAY,KAAA,IAAY;EACpC,mBAAiB,YAAY,UAAU,KAAA;EACvC,WAAW,WAAW,WAAW,4BAAO,KAAK;EAC7C,GAAI;YANN,CAQG,aACC,oBAAC,WAAD;GAAW,WAAW,4BAAO;GAAc;GAAO,IAAI;GAAW,CAAA,EAElE,SACG;;EAGX;AAED,aAAa,cAAc"}

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

@@ -0,0 +1,14 @@
+//#region src/components/Menu/FloatingMenu.module.css
+var menu = "_menu_1w1u7_8";
+var title = "_title_1w1u7_63";
+var FloatingMenu_module_default = {
+	menu,
+	"slide-in": "_slide-in_1w1u7_1",
+	"fade-in": "_fade-in_1w1u7_1",
+	"fade-out": "_fade-out_1w1u7_1",
+	title
+};
+//#endregion
+exports.default = FloatingMenu_module_default;
+
+//# sourceMappingURL=FloatingMenu.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingMenu.module.cjs","names":[],"sources":["../../../src/components/Menu/FloatingMenu.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.menu {\n  border-radius: var(--cpd-space-3x);\n  background: var(--cpd-color-bg-canvas-default);\n\n  /* Here we use outline to create a border internal to the container. The Radix\n  menu component may try to override it with outline: none, hence the need for\n  !important. */\n  outline: var(--cpd-border-width-1) solid\n    var(--cpd-color-border-interactive-secondary) !important;\n  outline-offset: calc(-1 * var(--cpd-border-width-1));\n  box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);\n  inline-size: fit-content;\n  max-inline-size: 320px;\n  display: flex;\n  flex-direction: column;\n  gap: var(--cpd-space-1x);\n  padding-block: var(--cpd-space-5x) var(--cpd-space-4x);\n\n  --cpd-separator-spacing: 0;\n  --cpd-separator-inset: var(--cpd-space-4x);\n}\n\n@keyframes slide-in {\n  from {\n    opacity: 0;\n    transform: translate(0, var(--cpd-space-3x));\n  }\n}\n\n.menu[data-state=\"open\"] {\n  animation: slide-in 180ms;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n}\n\n@keyframes fade-out {\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion) {\n  .menu[data-state=\"open\"] {\n    animation-name: fade-in;\n  }\n\n  .menu[data-state=\"closed\"] {\n    animation-name: fade-out;\n  }\n}\n\n.title {\n  /** Override MenuTitle margin top **/\n  margin-block-start: 0 !important;\n}\n"],"mappings":""}

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

@@ -0,0 +1,14 @@
+//#region src/components/Menu/FloatingMenu.module.css
+var menu = "_menu_1w1u7_8";
+var title = "_title_1w1u7_63";
+var FloatingMenu_module_default = {
+	menu,
+	"slide-in": "_slide-in_1w1u7_1",
+	"fade-in": "_fade-in_1w1u7_1",
+	"fade-out": "_fade-out_1w1u7_1",
+	title
+};
+//#endregion
+export { FloatingMenu_module_default as default };
+
+//# sourceMappingURL=FloatingMenu.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingMenu.module.js","names":[],"sources":["../../../src/components/Menu/FloatingMenu.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.menu {\n  border-radius: var(--cpd-space-3x);\n  background: var(--cpd-color-bg-canvas-default);\n\n  /* Here we use outline to create a border internal to the container. The Radix\n  menu component may try to override it with outline: none, hence the need for\n  !important. */\n  outline: var(--cpd-border-width-1) solid\n    var(--cpd-color-border-interactive-secondary) !important;\n  outline-offset: calc(-1 * var(--cpd-border-width-1));\n  box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);\n  inline-size: fit-content;\n  max-inline-size: 320px;\n  display: flex;\n  flex-direction: column;\n  gap: var(--cpd-space-1x);\n  padding-block: var(--cpd-space-5x) var(--cpd-space-4x);\n\n  --cpd-separator-spacing: 0;\n  --cpd-separator-inset: var(--cpd-space-4x);\n}\n\n@keyframes slide-in {\n  from {\n    opacity: 0;\n    transform: translate(0, var(--cpd-space-3x));\n  }\n}\n\n.menu[data-state=\"open\"] {\n  animation: slide-in 180ms;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n}\n\n@keyframes fade-out {\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion) {\n  .menu[data-state=\"open\"] {\n    animation-name: fade-in;\n  }\n\n  .menu[data-state=\"closed\"] {\n    animation-name: fade-out;\n  }\n}\n\n.title {\n  /** Override MenuTitle margin top **/\n  margin-block-start: 0 !important;\n}\n"],"mappings":""}

package/dist/components/Menu/Menu.cjs

@@ -1,58 +1,70 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const reactDropdownMenu = require("@radix-ui/react-dropdown-menu");
-const FloatingMenu = require("./FloatingMenu.cjs");
-const vaul = require("vaul");
-const classNames = require("classnames");
-const DrawerMenu_module = require("./DrawerMenu.module.css.cjs");
-const MenuContext = require("./MenuContext.cjs");
-const DrawerMenu = require("./DrawerMenu.cjs");
-const platform = require("../../utils/platform.cjs");
-const DropdownMenuItemWrapper = ({
-  onSelect,
-  children
-}) => /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.DropdownMenuItem, { onSelect: onSelect ?? void 0, asChild: true, children });
-const Menu = ({
-  className,
-  title,
-  showTitle = true,
-  open,
-  onOpenChange,
-  trigger,
-  children: childrenProp,
-  side = "bottom",
-  align = "center"
-}) => {
-  const platform$1 = platform.getPlatform();
-  const drawer = platform$1 === "android" || platform$1 === "ios";
-  const context = React.useMemo(
-    () => ({
-      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,
-      onOpenChange
-    }),
-    [onOpenChange]
-  );
-  const children = /* @__PURE__ */ jsxRuntime.jsx(MenuContext.MenuContext.Provider, { value: context, children: childrenProp });
-  return drawer ? /* @__PURE__ */ jsxRuntime.jsxs(vaul.Drawer.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsxs(vaul.Drawer.Portal, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Overlay, { className: classNames(DrawerMenu_module.default.bg) }),
-      /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerMenu.DrawerMenu, { title, children }) })
-    ] })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactDropdownMenu.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Content, { asChild: true, side, align, sideOffset: 8, children: /* @__PURE__ */ jsxRuntime.jsx(
-      FloatingMenu.FloatingMenu,
-      {
-        className,
-        title,
-        showTitle,
-        children
-      }
-    ) }) })
-  ] });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_FloatingMenu = require("./FloatingMenu.cjs");
+const require_DrawerMenu_module = require("./DrawerMenu.module.cjs");
+const require_MenuContext = require("./MenuContext.cjs");
+const require_platform = require("../../utils/platform.cjs");
+const require_DrawerMenu = require("./DrawerMenu.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 vaul = require("vaul");
+let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
+//#region src/components/Menu/Menu.tsx
+var DropdownMenuItemWrapper = ({ onSelect, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.DropdownMenuItem, {
+	onSelect: onSelect ?? void 0,
+	asChild: true,
+	children
+});
+/**
+* A menu opened by pressing a button.
+*/
+var Menu = ({ className, title, showTitle = true, open, onOpenChange, trigger, children: childrenProp, side = "bottom", align = "center" }) => {
+	const platform = require_platform.getPlatform();
+	const drawer = platform === "android" || platform === "ios";
+	const context = (0, react.useMemo)(() => ({
+		MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,
+		onOpenChange
+	}), [onOpenChange]);
+	const children = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuContext.MenuContext.Provider, {
+		value: context,
+		children: childrenProp
+	});
+	return drawer ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(vaul.Drawer.Root, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Trigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(vaul.Drawer.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Overlay, { className: (0, classnames.default)(require_DrawerMenu_module.default.bg) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(vaul.Drawer.Content, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DrawerMenu.DrawerMenu, {
+				title,
+				children
+			})
+		})] })]
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.Root, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Trigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Content, {
+			asChild: true,
+			side,
+			align,
+			sideOffset: 8,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingMenu.FloatingMenu, {
+				className,
+				title,
+				showTitle,
+				children
+			})
+		}) })]
+	});
 };
+//#endregion
 exports.Menu = Menu;
-//# sourceMappingURL=Menu.cjs.map
+
+//# sourceMappingURL=Menu.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.cjs","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":["DropdownMenuItem","platform","getPlatform","useMemo","jsx","MenuContext","jsxs","Drawer","classnames","drawerMenu","DrawerMenu","Root","Trigger","Portal","Content","FloatingMenu"],"mappings":";;;;;;;;;;;;AA6EA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,qCACGA,oCAAA,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,QAAMC,aAAWC,SAAAA,YAAA;AACjB,QAAM,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAAA;AAAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EAAA;AAEf,QAAM,WACJC,+BAACC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAA,cAAa;AAGtD,SAAO,SACLC,2BAAAA,KAACC,KAAAA,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAAH,2BAAAA,IAACG,KAAAA,OAAO,SAAP,EAAe,SAAO,MAAE,UAAA,SAAQ;AAAA,IACjCD,2BAAAA,KAACC,KAAAA,OAAO,QAAP,EACC,UAAA;AAAA,MAAAH,+BAACG,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAAA,QAAW,EAAE,GAAG;AAAA,MACtDL,2BAAAA,IAACG,KAAAA,OAAO,SAAP,EAAe,SAAO,MACrB,UAAAH,2BAAAA,IAACM,WAAAA,YAAA,EAAW,OAAe,SAAA,CAAS,EAAA,CACtC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,IAEAJ,2BAAAA,KAACK,kBAAAA,MAAA,EAAK,MAAY,cAChB,UAAA;AAAA,IAAAP,2BAAAA,IAACQ,kBAAAA,SAAA,EAAQ,SAAO,MAAE,UAAA,SAAQ;AAAA,IAC1BR,2BAAAA,IAACS,kBAAAA,UACC,UAAAT,2BAAAA,IAACU,kBAAAA,SAAA,EAAQ,SAAO,MAAC,MAAY,OAAc,YAAY,GACrD,UAAAV,2BAAAA;AAAAA,MAACW,aAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;;"}
+{"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"}