@vector-im/compound-web 8.4.0 → 9.0.1

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

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

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

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

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

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

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

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

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

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

package/dist/components/Menu/MenuTitle.cjs

@@ -1,16 +1,23 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const Text = require("../Typography/Text.cjs");
-const MenuTitle_module = require("./MenuTitle.module.css.cjs");
-const classNames = require("classnames");
-const MenuTitle = ({
-  title,
-  id,
-  className
-}) => {
-  const classes = classNames(MenuTitle_module.default["menu-title"], className);
-  return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { as: "h3", id, className: classes, size: "sm", weight: "semibold", children: title });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Text = require("../Typography/Text.cjs");
+const require_MenuTitle_module = require("./MenuTitle.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Menu/MenuTitle.tsx
+var MenuTitle = ({ title, id, className }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+		as: "h3",
+		id,
+		className: (0, classnames.default)(require_MenuTitle_module.default["menu-title"], className),
+		size: "sm",
+		weight: "semibold",
+		children: title
+	});
 };
+//#endregion
 exports.MenuTitle = MenuTitle;
-//# sourceMappingURL=MenuTitle.cjs.map
+
+//# sourceMappingURL=MenuTitle.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuTitle.cjs","sources":["../../../src/components/Menu/MenuTitle.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React from \"react\";\nimport { Text } from \"../Typography/Text.tsx\";\nimport styles from \"./MenuTitle.module.css\";\nimport classnames from \"classnames\";\n\ninterface MenuTitleProps {\n  /**\n   * The title of the menu.\n   */\n  title: string;\n  /**\n   * The id of the menu title.\n   */\n  id?: string;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n}\n\nexport const MenuTitle: React.FC<MenuTitleProps> = ({\n  title,\n  id,\n  className,\n}) => {\n  const classes = classnames(styles[\"menu-title\"], className);\n\n  return (\n    <Text as=\"h3\" id={id} className={classes} size=\"sm\" weight=\"semibold\">\n      {title}\n    </Text>\n  );\n};\n"],"names":["classnames","styles","jsx","Text"],"mappings":";;;;;;AA2BO,MAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,UAAUA,WAAWC,iBAAAA,QAAO,YAAY,GAAG,SAAS;AAE1D,SACEC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,IAAG,MAAK,IAAQ,WAAW,SAAS,MAAK,MAAK,QAAO,YACxD,UAAA,MAAA,CACH;AAEJ;;"}
+{"version":3,"file":"MenuTitle.cjs","names":[],"sources":["../../../src/components/Menu/MenuTitle.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React from \"react\";\nimport { Text } from \"../Typography/Text.tsx\";\nimport styles from \"./MenuTitle.module.css\";\nimport classnames from \"classnames\";\n\ninterface MenuTitleProps {\n  /**\n   * The title of the menu.\n   */\n  title: string;\n  /**\n   * The id of the menu title.\n   */\n  id?: string;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n}\n\nexport const MenuTitle: React.FC<MenuTitleProps> = ({\n  title,\n  id,\n  className,\n}) => {\n  const classes = classnames(styles[\"menu-title\"], className);\n\n  return (\n    <Text as=\"h3\" id={id} className={classes} size=\"sm\" weight=\"semibold\">\n      {title}\n    </Text>\n  );\n};\n"],"mappings":";;;;;;;;;AA2BA,IAAa,aAAuC,EAClD,OACA,IACA,gBACI;AAGJ,QACE,iBAAA,GAAA,kBAAA,KAAC,aAAA,MAAD;EAAM,IAAG;EAAS;EAAI,YAAA,GAAA,WAAA,SAHG,yBAAA,QAAO,eAAe,UAAU;EAGf,MAAK;EAAK,QAAO;YACxD;EACI,CAAA"}

package/dist/components/Menu/MenuTitle.js

@@ -1,16 +1,20 @@
-import { jsx } from "react/jsx-runtime";
 import { Text } from "../Typography/Text.js";
-import styles from "./MenuTitle.module.css.js";
+import MenuTitle_module_default from "./MenuTitle.module.js";
 import classNames from "classnames";
-const MenuTitle = ({
-  title,
-  id,
-  className
-}) => {
-  const classes = classNames(styles["menu-title"], className);
-  return /* @__PURE__ */ jsx(Text, { as: "h3", id, className: classes, size: "sm", weight: "semibold", children: title });
-};
-export {
-  MenuTitle
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Menu/MenuTitle.tsx
+var MenuTitle = ({ title, id, className }) => {
+	return /* @__PURE__ */ jsx(Text, {
+		as: "h3",
+		id,
+		className: classNames(MenuTitle_module_default["menu-title"], className),
+		size: "sm",
+		weight: "semibold",
+		children: title
+	});
 };
-//# sourceMappingURL=MenuTitle.js.map
+//#endregion
+export { MenuTitle };
+
+//# sourceMappingURL=MenuTitle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuTitle.js","sources":["../../../src/components/Menu/MenuTitle.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React from \"react\";\nimport { Text } from \"../Typography/Text.tsx\";\nimport styles from \"./MenuTitle.module.css\";\nimport classnames from \"classnames\";\n\ninterface MenuTitleProps {\n  /**\n   * The title of the menu.\n   */\n  title: string;\n  /**\n   * The id of the menu title.\n   */\n  id?: string;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n}\n\nexport const MenuTitle: React.FC<MenuTitleProps> = ({\n  title,\n  id,\n  className,\n}) => {\n  const classes = classnames(styles[\"menu-title\"], className);\n\n  return (\n    <Text as=\"h3\" id={id} className={classes} size=\"sm\" weight=\"semibold\">\n      {title}\n    </Text>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;AA2BO,MAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,UAAUA,WAAW,OAAO,YAAY,GAAG,SAAS;AAE1D,SACE,oBAAC,MAAA,EAAK,IAAG,MAAK,IAAQ,WAAW,SAAS,MAAK,MAAK,QAAO,YACxD,UAAA,MAAA,CACH;AAEJ;"}
+{"version":3,"file":"MenuTitle.js","names":[],"sources":["../../../src/components/Menu/MenuTitle.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React from \"react\";\nimport { Text } from \"../Typography/Text.tsx\";\nimport styles from \"./MenuTitle.module.css\";\nimport classnames from \"classnames\";\n\ninterface MenuTitleProps {\n  /**\n   * The title of the menu.\n   */\n  title: string;\n  /**\n   * The id of the menu title.\n   */\n  id?: string;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n}\n\nexport const MenuTitle: React.FC<MenuTitleProps> = ({\n  title,\n  id,\n  className,\n}) => {\n  const classes = classnames(styles[\"menu-title\"], className);\n\n  return (\n    <Text as=\"h3\" id={id} className={classes} size=\"sm\" weight=\"semibold\">\n      {title}\n    </Text>\n  );\n};\n"],"mappings":";;;;;;AA2BA,IAAa,aAAuC,EAClD,OACA,IACA,gBACI;AAGJ,QACE,oBAAC,MAAD;EAAM,IAAG;EAAS;EAAI,WAHR,WAAW,yBAAO,eAAe,UAAU;EAGf,MAAK;EAAK,QAAO;YACxD;EACI,CAAA"}

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

@@ -0,0 +1,6 @@
+//#region src/components/Menu/MenuTitle.module.css
+var MenuTitle_module_default = { "menu-title": "_menu-title_1sgvx_8" };
+//#endregion
+exports.default = MenuTitle_module_default;
+
+//# sourceMappingURL=MenuTitle.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTitle.module.cjs","names":[],"sources":["../../../src/components/Menu/MenuTitle.module.css"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\n.menu-title {\n  color: var(--cpd-color-text-secondary);\n  padding-inline: var(--cpd-space-4x);\n  padding-block-end: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));\n  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);\n  margin-block: var(--cpd-space-2x);\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/components/Menu/MenuTitle.module.css
+var MenuTitle_module_default = { "menu-title": "_menu-title_1sgvx_8" };
+//#endregion
+export { MenuTitle_module_default as default };
+
+//# sourceMappingURL=MenuTitle.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTitle.module.js","names":[],"sources":["../../../src/components/Menu/MenuTitle.module.css"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\n.menu-title {\n  color: var(--cpd-color-text-secondary);\n  padding-inline: var(--cpd-space-4x);\n  padding-block-end: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));\n  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);\n  margin-block: var(--cpd-space-2x);\n}\n"],"mappings":""}

package/dist/components/Menu/RadioMenuItem.cjs

@@ -1,38 +1,36 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const MenuItem = require("./MenuItem.cjs");
-const Radio = require("../Form/Controls/Radio/Radio.cjs");
-const RadioMenuItem = React.forwardRef(
-  function RadioMenuItem2({ className, label, onSelect, checked, disabled }, ref) {
-    const toggleId = React.useId();
-    const onChange = React.useCallback(() => {
-    }, []);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      MenuItem.MenuItem,
-      {
-        as: "div",
-        role: "menuitemradio",
-        "aria-checked": checked,
-        className,
-        label,
-        onSelect,
-        disabled,
-        Icon: /* @__PURE__ */ jsxRuntime.jsx(
-          Radio.RadioInput,
-          {
-            id: toggleId,
-            ref,
-            "aria-hidden": true,
-            checked,
-            disabled,
-            onChange
-          }
-        )
-      }
-    );
-  }
-);
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_MenuItem = require("./MenuItem.cjs");
+const require_Radio = require("../Form/Controls/Radio/Radio.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Menu/RadioMenuItem.tsx
+/**
+* A menu item with a radio control.
+* Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+*/
+var RadioMenuItem = (0, react.forwardRef)(function RadioMenuItem({ className, label, onSelect, checked, disabled }, ref) {
+	const toggleId = (0, react.useId)();
+	const onChange = (0, react.useCallback)(() => {}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
+		as: "div",
+		role: "menuitemradio",
+		"aria-checked": checked,
+		className,
+		label,
+		onSelect,
+		disabled,
+		Icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Radio.RadioInput, {
+			id: toggleId,
+			ref,
+			"aria-hidden": true,
+			checked,
+			disabled,
+			onChange
+		})
+	});
+});
+//#endregion
 exports.RadioMenuItem = RadioMenuItem;
-//# sourceMappingURL=RadioMenuItem.cjs.map
+
+//# sourceMappingURL=RadioMenuItem.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioMenuItem.cjs","sources":["../../../src/components/Menu/RadioMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { RadioInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the radio is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a radio control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const RadioMenuItem = forwardRef<HTMLInputElement, Props>(\n  function RadioMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The radio is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemradio, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemradio\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <RadioInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      ></MenuItem>\n    );\n  },\n);\n"],"names":["forwardRef","RadioMenuItem","useId","useCallback","jsx","MenuItem","RadioInput"],"mappings":";;;;;;AA8BO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,SAASC,eACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAA,GACvC,KACA;AACA,UAAM,WAAWC,MAAAA,MAAA;AAGjB,UAAM,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MACED,2BAAAA;AAAAA,UAACE,MAAAA;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAIR;AACF;;"}
+{"version":3,"file":"RadioMenuItem.cjs","names":[],"sources":["../../../src/components/Menu/RadioMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { RadioInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the radio is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a radio control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const RadioMenuItem = forwardRef<HTMLInputElement, Props>(\n  function RadioMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The radio is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemradio, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemradio\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <RadioInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      ></MenuItem>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AA8BA,IAAa,iBAAA,GAAA,MAAA,YACX,SAAS,cACP,EAAE,WAAW,OAAO,UAAU,SAAS,YACvC,KACA;CACA,MAAM,YAAA,GAAA,MAAA,QAAkB;CAGxB,MAAM,YAAA,GAAA,MAAA,mBAA6B,IAAI,EAAE,CAAC;AAK1C,QACE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,UAAD;EACE,IAAG;EACH,MAAK;EACL,gBAAc;EACH;EACJ;EACG;EACA;EACV,MACE,iBAAA,GAAA,kBAAA,KAAC,cAAA,YAAD;GACE,IAAI;GACC;GAEL,eAAA;GACS;GACC;GACA;GACV,CAAA;EAEM,CAAA;EAGjB"}

package/dist/components/Menu/RadioMenuItem.js

@@ -1,38 +1,34 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useId, useCallback } from "react";
 import { MenuItem } from "./MenuItem.js";
 import { RadioInput } from "../Form/Controls/Radio/Radio.js";
-const RadioMenuItem = forwardRef(
-  function RadioMenuItem2({ className, label, onSelect, checked, disabled }, ref) {
-    const toggleId = useId();
-    const onChange = useCallback(() => {
-    }, []);
-    return /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        as: "div",
-        role: "menuitemradio",
-        "aria-checked": checked,
-        className,
-        label,
-        onSelect,
-        disabled,
-        Icon: /* @__PURE__ */ jsx(
-          RadioInput,
-          {
-            id: toggleId,
-            ref,
-            "aria-hidden": true,
-            checked,
-            disabled,
-            onChange
-          }
-        )
-      }
-    );
-  }
-);
-export {
-  RadioMenuItem
-};
-//# sourceMappingURL=RadioMenuItem.js.map
+import { forwardRef, useCallback, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Menu/RadioMenuItem.tsx
+/**
+* A menu item with a radio control.
+* Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+*/
+var RadioMenuItem = forwardRef(function RadioMenuItem({ className, label, onSelect, checked, disabled }, ref) {
+	const toggleId = useId();
+	const onChange = useCallback(() => {}, []);
+	return /* @__PURE__ */ jsx(MenuItem, {
+		as: "div",
+		role: "menuitemradio",
+		"aria-checked": checked,
+		className,
+		label,
+		onSelect,
+		disabled,
+		Icon: /* @__PURE__ */ jsx(RadioInput, {
+			id: toggleId,
+			ref,
+			"aria-hidden": true,
+			checked,
+			disabled,
+			onChange
+		})
+	});
+});
+//#endregion
+export { RadioMenuItem };
+
+//# sourceMappingURL=RadioMenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioMenuItem.js","sources":["../../../src/components/Menu/RadioMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { RadioInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the radio is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a radio control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const RadioMenuItem = forwardRef<HTMLInputElement, Props>(\n  function RadioMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The radio is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemradio, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemradio\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <RadioInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      ></MenuItem>\n    );\n  },\n);\n"],"names":["RadioMenuItem"],"mappings":";;;;AA8BO,MAAM,gBAAgB;AAAA,EAC3B,SAASA,eACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAA,GACvC,KACA;AACA,UAAM,WAAW,MAAA;AAGjB,UAAM,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAIR;AACF;"}
+{"version":3,"file":"RadioMenuItem.js","names":[],"sources":["../../../src/components/Menu/RadioMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { RadioInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the radio is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a radio control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const RadioMenuItem = forwardRef<HTMLInputElement, Props>(\n  function RadioMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The radio is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemradio, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemradio\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <RadioInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      ></MenuItem>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AA8BA,IAAa,gBAAgB,WAC3B,SAAS,cACP,EAAE,WAAW,OAAO,UAAU,SAAS,YACvC,KACA;CACA,MAAM,WAAW,OAAO;CAGxB,MAAM,WAAW,kBAAkB,IAAI,EAAE,CAAC;AAK1C,QACE,oBAAC,UAAD;EACE,IAAG;EACH,MAAK;EACL,gBAAc;EACH;EACJ;EACG;EACA;EACV,MACE,oBAAC,YAAD;GACE,IAAI;GACC;GAEL,eAAA;GACS;GACC;GACA;GACV,CAAA;EAEM,CAAA;EAGjB"}

package/dist/components/Menu/ToggleMenuItem.cjs

@@ -1,42 +1,40 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const MenuItem = require("./MenuItem.cjs");
-const Toggle = require("../Form/Controls/Toggle/Toggle.cjs");
-const ToggleMenuItem = React.forwardRef(
-  function ToggleMenuItem2({ className, Icon, label, onSelect, checked, disabled, onClick }, ref) {
-    const toggleId = React.useId();
-    const onChange = React.useCallback(() => {
-    }, []);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      MenuItem.MenuItem,
-      {
-        as: "button",
-        role: "menuitemcheckbox",
-        "aria-checked": checked,
-        className,
-        Icon,
-        label,
-        hideChevron: true,
-        onSelect,
-        disabled,
-        onClick,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Toggle.ToggleInput,
-          {
-            id: toggleId,
-            ref,
-            "aria-hidden": true,
-            tabIndex: -1,
-            checked,
-            disabled,
-            onChange
-          }
-        )
-      }
-    );
-  }
-);
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_MenuItem = require("./MenuItem.cjs");
+const require_Toggle = require("../Form/Controls/Toggle/Toggle.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Menu/ToggleMenuItem.tsx
+/**
+* A menu item with a toggle control.
+* Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+*/
+var ToggleMenuItem = (0, react.forwardRef)(function ToggleMenuItem({ className, Icon, label, onSelect, checked, disabled, onClick }, ref) {
+	const toggleId = (0, react.useId)();
+	const onChange = (0, react.useCallback)(() => {}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
+		as: "button",
+		role: "menuitemcheckbox",
+		"aria-checked": checked,
+		className,
+		Icon,
+		label,
+		hideChevron: true,
+		onSelect,
+		disabled,
+		onClick,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Toggle.ToggleInput, {
+			id: toggleId,
+			ref,
+			"aria-hidden": true,
+			tabIndex: -1,
+			checked,
+			disabled,
+			onChange
+		})
+	});
+});
+//#endregion
 exports.ToggleMenuItem = ToggleMenuItem;
-//# sourceMappingURL=ToggleMenuItem.cjs.map
+
+//# sourceMappingURL=ToggleMenuItem.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleMenuItem.cjs","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 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 React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          tabIndex={-1}\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["forwardRef","ToggleMenuItem","useId","useCallback","jsx","MenuItem","ToggleInput"],"mappings":";;;;;;AA8BO,MAAM,iBAAiBA,MAAAA;AAAAA,EAC5B,SAASC,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,QAAA,GACvD,KACA;AACA,UAAM,WAAWC,MAAAA,MAAA;AAGjB,UAAM,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAAD,2BAAAA;AAAAA,UAACE,OAAAA;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;;"}
+{"version":3,"file":"ToggleMenuItem.cjs","names":[],"sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 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 React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          tabIndex={-1}\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AA8BA,IAAa,kBAAA,GAAA,MAAA,YACX,SAAS,eACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,WACvD,KACA;CACA,MAAM,YAAA,GAAA,MAAA,QAAkB;CAGxB,MAAM,YAAA,GAAA,MAAA,mBAA6B,IAAI,EAAE,CAAC;AAK1C,QACE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,UAAD;EACE,IAAG;EACH,MAAK;EACL,gBAAc;EACH;EACL;EACC;EACP,aAAA;EACU;EACA;EACD;YAET,iBAAA,GAAA,kBAAA,KAAC,eAAA,aAAD;GACE,IAAI;GACC;GAEL,eAAA;GACA,UAAU;GACD;GACC;GACA;GACV,CAAA;EACO,CAAA;EAGhB"}

package/dist/components/Menu/ToggleMenuItem.js

@@ -1,42 +1,38 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useId, useCallback } from "react";
 import { MenuItem } from "./MenuItem.js";
 import { ToggleInput } from "../Form/Controls/Toggle/Toggle.js";
-const ToggleMenuItem = forwardRef(
-  function ToggleMenuItem2({ className, Icon, label, onSelect, checked, disabled, onClick }, ref) {
-    const toggleId = useId();
-    const onChange = useCallback(() => {
-    }, []);
-    return /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        as: "button",
-        role: "menuitemcheckbox",
-        "aria-checked": checked,
-        className,
-        Icon,
-        label,
-        hideChevron: true,
-        onSelect,
-        disabled,
-        onClick,
-        children: /* @__PURE__ */ jsx(
-          ToggleInput,
-          {
-            id: toggleId,
-            ref,
-            "aria-hidden": true,
-            tabIndex: -1,
-            checked,
-            disabled,
-            onChange
-          }
-        )
-      }
-    );
-  }
-);
-export {
-  ToggleMenuItem
-};
-//# sourceMappingURL=ToggleMenuItem.js.map
+import { forwardRef, useCallback, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Menu/ToggleMenuItem.tsx
+/**
+* A menu item with a toggle control.
+* Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+*/
+var ToggleMenuItem = forwardRef(function ToggleMenuItem({ className, Icon, label, onSelect, checked, disabled, onClick }, ref) {
+	const toggleId = useId();
+	const onChange = useCallback(() => {}, []);
+	return /* @__PURE__ */ jsx(MenuItem, {
+		as: "button",
+		role: "menuitemcheckbox",
+		"aria-checked": checked,
+		className,
+		Icon,
+		label,
+		hideChevron: true,
+		onSelect,
+		disabled,
+		onClick,
+		children: /* @__PURE__ */ jsx(ToggleInput, {
+			id: toggleId,
+			ref,
+			"aria-hidden": true,
+			tabIndex: -1,
+			checked,
+			disabled,
+			onChange
+		})
+	});
+});
+//#endregion
+export { ToggleMenuItem };
+
+//# sourceMappingURL=ToggleMenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleMenuItem.js","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 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 React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          tabIndex={-1}\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["ToggleMenuItem"],"mappings":";;;;AA8BO,MAAM,iBAAiB;AAAA,EAC5B,SAASA,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,QAAA,GACvD,KACA;AACA,UAAM,WAAW,MAAA;AAGjB,UAAM,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"ToggleMenuItem.js","names":[],"sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 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 React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          tabIndex={-1}\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AA8BA,IAAa,iBAAiB,WAC5B,SAAS,eACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,WACvD,KACA;CACA,MAAM,WAAW,OAAO;CAGxB,MAAM,WAAW,kBAAkB,IAAI,EAAE,CAAC;AAK1C,QACE,oBAAC,UAAD;EACE,IAAG;EACH,MAAK;EACL,gBAAc;EACH;EACL;EACC;EACP,aAAA;EACU;EACA;EACD;YAET,oBAAC,aAAD;GACE,IAAI;GACC;GAEL,eAAA;GACA,UAAU;GACD;GACC;GACA;GACV,CAAA;EACO,CAAA;EAGhB"}