@common-origin/design-system 2.23.0 → 3.1.0

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { type FloatingAlign, type FloatingSide } from '../../../lib/floatingPosition';
+export type MenuSide = FloatingSide;
+export type MenuAlign = FloatingAlign;
+export interface MenuProps {
+    /**
+     * The element that opens the menu, such as a Button or IconButton. Menu gives it
+     * `aria-haspopup`, `aria-expanded` and `aria-controls`, and the menu takes its name from it.
+     */
+    trigger: React.ReactElement;
+    /** `MenuItem`, `MenuItemRadio`, `MenuItemCheckbox`, `MenuGroup` and `MenuDivider` */
+    children: React.ReactNode;
+    /** Whether the menu is open (controlled). Use with `onOpenChange`. */
+    open?: boolean;
+    /**
+     * Whether the menu starts open (uncontrolled).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Called when the menu opens or closes */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The side of the trigger it opens on. It flips when there's no room.
+     * @default 'bottom'
+     */
+    side?: MenuSide;
+    /**
+     * Where it lines up along the trigger's edge.
+     * @default 'start'
+     */
+    align?: MenuAlign;
+    /** Test identifier for the menu */
+    'data-testid'?: string;
+}
+/**
+ * A menu of actions and choices that opens from a trigger (#329), following the WAI-ARIA menu
+ * button pattern. Not a select: for choosing a form value, use Dropdown.
+ */
+export declare const Menu: {
+    ({ trigger, children, open: openProp, defaultOpen, onOpenChange, side, align, "data-testid": dataTestId, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ItemBaseProps {
+    /** The item's label */
+    children: React.ReactNode;
+    /** A leading Icon or Avatar. Decorative: the label names the item (decision 0028). */
+    icon?: React.ReactNode;
+    /** Secondary text under the label, such as a workspace's plan */
+    description?: React.ReactNode;
+    /**
+     * A keyboard shortcut shown at the end of the item: `label` is shown (such as "⌘K") and `keys` is
+     * exposed as `aria-keyshortcuts` (such as "Meta+K"). Display only: Menu doesn't bind the keys.
+     */
+    shortcut?: {
+        label: string;
+        keys: string;
+    };
+    /** Whether the item can be activated. A disabled item can still be focused (WAI-ARIA). */
+    disabled?: boolean;
+    /** Text for typeahead, when the label isn't plain text */
+    textValue?: string;
+    /** Test identifier for the item */
+    'data-testid'?: string;
+}
+export interface MenuItemProps extends ItemBaseProps {
+    /** Called when the item is activated. The menu then closes. */
+    onSelect?: () => void;
+    /**
+     * A destructive action, shown in the danger colour as ActionSheet's are.
+     * @default false
+     */
+    destructive?: boolean;
+}
+export interface MenuItemRadioProps extends ItemBaseProps {
+    /** Whether this is the chosen item of its group */
+    checked: boolean;
+    /** Called when the item is chosen. The menu then closes. */
+    onSelect?: () => void;
+}
+export interface MenuItemCheckboxProps extends ItemBaseProps {
+    /** Whether the item is on */
+    checked: boolean;
+    /** Called with the new state when the item is toggled. The menu stays open. */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/** An action. Activating it closes the menu. */
+export declare const MenuItem: {
+    ({ onSelect, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** One choice of a set, inside a MenuGroup. Choosing it closes the menu. */
+export declare const MenuItemRadio: {
+    ({ onSelect, checked, ...props }: MenuItemRadioProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** An on/off option, inside a MenuGroup. Toggling it keeps the menu open. */
+export declare const MenuItemCheckbox: {
+    ({ onCheckedChange, checked, ...props }: MenuItemCheckboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface MenuGroupProps {
+    /** A visible label for the group, which also names it for assistive technology */
+    label?: string;
+    /** The group's items */
+    children: React.ReactNode;
+}
+/** Groups related items. Radio and checkbox items always sit in a group. */
+export declare const MenuGroup: {
+    ({ label, children }: MenuGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** Separates groups */
+export declare const MenuDivider: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/molecules/Menu/Menu.mjs

@@ -0,0 +1,473 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign, __spreadArray } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useRef, useState, useCallback, useEffect, createContext, useContext } from 'react';
+import styled$module, { keyframes, css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { exitAnimation, reducedMotion, forcedColorsEdge, interactiveRow } from '../../../lib/styleUtils.mjs';
+import { usePresence } from '../../../lib/usePresence.mjs';
+import { laidOutElement } from '../../../lib/floatingPosition.mjs';
+import { useIsomorphicLayoutEffect, useFloatingLayer } from '../../../lib/useFloatingLayer.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+
+var semantic = tokens.semantic;
+var space = semantic.space,
+  color = semantic.color,
+  motion = semantic.motion,
+  radius = semantic.radius,
+  size = semantic.size,
+  elevation = semantic.elevation,
+  border = semantic.border,
+  typography = semantic.typography;
+// Typeahead keeps typed characters together for this long. An input timing, not a motion value.
+var TYPEAHEAD_RESET_MS = 500;
+var ITEM_SELECTOR = '[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]';
+var MenuContext = /*#__PURE__*/createContext(null);
+var useMenu = function useMenu(component) {
+  var context = useContext(MenuContext);
+  if (!context) throw new Error("".concat(component, " must be used inside a Menu"));
+  return context;
+};
+var enter = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(calc(-1 * ", "));\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(calc(-1 * ", "));\n  }\n"])), motion.distance.sm);
+var fade = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from { opacity: 0; }\n"], ["\n  from { opacity: 0; }\n"
+// Dropdown's panel (P5): the raised surface with a decorative outline and floating elevation,
+// dropping in over duration.fast (0037); under reduced motion it only fades (0015)
+])));
+// Dropdown's panel (P5): the raised surface with a decorative outline and floating elevation,
+// dropping in over duration.fast (0037); under reduced motion it only fades (0015)
+var Panel = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Menu__Panel",
+  componentId: "sc-13mple2-0"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-width: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  overflow-y: auto;\n  padding: ", " 0;\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  animation: ", " ", " ", "\n    ", ";\n\n  ", " {\n    animation: ", " ", " ", "\n      ", ";\n  }\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-width: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  overflow-y: auto;\n  padding: ", " 0;\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  animation: ", " ", " ", "\n    ", ";\n\n  ", " {\n    animation: ", " ", " ", "\n      ", ";\n  }\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n"
+// The trigger's wrapper takes no box of its own
+])), size[4500], size[7500], size.menu.maxHeight, space[100], semantic.surface.raised, color.text["default"], border["default"], radius.md, elevation.floating, enter, motion.duration.fast, motion.easing.decelerate, function (_a) {
+  var $exiting = _a.$exiting;
+  return $exiting ? exitAnimation : css(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+}, reducedMotion, fade, motion.duration.fast, motion.easing.decelerate, function (_a) {
+  var $exiting = _a.$exiting;
+  return $exiting ? exitAnimation : css(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
+}, forcedColorsEdge);
+// The trigger's wrapper takes no box of its own
+var Anchor = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Menu__Anchor",
+  componentId: "sc-13mple2-1"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+var focusItem = function focusItem(menu, which) {
+  var _a;
+  var items = menu ? Array.from(menu.querySelectorAll(ITEM_SELECTOR)) : [];
+  (_a = which === 'first' ? items[0] : items[items.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+};
+/**
+ * A menu of actions and choices that opens from a trigger (#329), following the WAI-ARIA menu
+ * button pattern. Not a select: for choosing a form value, use Dropdown.
+ */
+var Menu = function Menu(_a) {
+  var trigger = _a.trigger,
+    children = _a.children,
+    openProp = _a.open,
+    _b = _a.defaultOpen,
+    defaultOpen = _b === void 0 ? false : _b,
+    onOpenChange = _a.onOpenChange,
+    _c = _a.side,
+    side = _c === void 0 ? 'bottom' : _c,
+    _d = _a.align,
+    align = _d === void 0 ? 'start' : _d,
+    dataTestId = _a["data-testid"];
+  var menuId = useId();
+  var triggerId = useId();
+  var anchorRef = useRef(null);
+  var panelRef = useRef(null);
+  // Which item to focus once the menu has opened
+  var initialFocus = useRef('first');
+  var openedFromTrigger = useRef(false);
+  var typeahead = useRef({
+    text: '',
+    timer: undefined
+  });
+  var _e = useState(defaultOpen),
+    uncontrolledOpen = _e[0],
+    setUncontrolledOpen = _e[1];
+  var isControlled = openProp !== undefined;
+  var isOpen = isControlled ? openProp : uncontrolledOpen;
+  var _f = usePresence(isOpen),
+    isPresent = _f.isPresent,
+    isExiting = _f.isExiting;
+  var triggerElement = function triggerElement() {
+    return laidOutElement(anchorRef.current);
+  };
+  var setOpen = useCallback(function (next) {
+    if (!isControlled) setUncontrolledOpen(next);
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+  }, [isControlled, onOpenChange]);
+  var close = useCallback(function (_a) {
+    var _b;
+    var _c = _a === void 0 ? {} : _a,
+      _d = _c.returnFocus,
+      returnFocus = _d === void 0 ? true : _d;
+    setOpen(false);
+    if (returnFocus) (_b = triggerElement()) === null || _b === void 0 ? void 0 : _b.focus();
+  }, [setOpen]);
+  var openWith = function openWith(focus) {
+    initialFocus.current = focus;
+    openedFromTrigger.current = true;
+    setOpen(true);
+  };
+  // The trigger's ARIA is set on the element itself, so it reaches the real control even when the
+  // trigger is wrapped (a Tooltip inside the trigger, for example)
+  useEffect(function () {
+    var element = triggerElement();
+    if (!element) return;
+    if (!element.id) element.id = triggerId;
+    element.setAttribute('aria-haspopup', 'menu');
+    element.setAttribute('aria-expanded', String(isOpen));
+    if (isOpen) element.setAttribute('aria-controls', menuId);else element.removeAttribute('aria-controls');
+  });
+  // The menu is named by its trigger, whose own id is kept if it has one
+  useIsomorphicLayoutEffect(function () {
+    var panel = panelRef.current;
+    var element = triggerElement();
+    if (!isPresent || !panel || !element) return;
+    if (!element.id) element.id = triggerId;
+    panel.setAttribute('aria-labelledby', element.id);
+  }, [isPresent]);
+  // In the top layer beside the trigger; scrolling or resizing closes it, since the trigger moves
+  var detach = useCallback(function () {
+    return close({
+      returnFocus: false
+    });
+  }, [close]);
+  useFloatingLayer({
+    isPresent: isPresent,
+    floatingRef: panelRef,
+    anchorRef: anchorRef,
+    side: side,
+    align: align,
+    onDetach: detach
+  });
+  // Opening from the trigger focuses the first or last item. An open that didn't come from the
+  // trigger (defaultOpen, or a controlled open) leaves focus where it is
+  useEffect(function () {
+    if (!isOpen || !openedFromTrigger.current) return;
+    openedFromTrigger.current = false;
+    focusItem(panelRef.current, initialFocus.current);
+  }, [isOpen]);
+  // A press outside the trigger and the menu closes it, leaving focus where the press put it
+  useEffect(function () {
+    if (!isOpen) return;
+    var onPointerDown = function onPointerDown(event) {
+      var _a, _b;
+      var target = event.target;
+      if (((_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) || ((_b = anchorRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) return;
+      close({
+        returnFocus: false
+      });
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return function () {
+      return document.removeEventListener('pointerdown', onPointerDown, true);
+    };
+  }, [isOpen, close]);
+  useEffect(function () {
+    return function () {
+      return clearTimeout(typeahead.current.timer);
+    };
+  }, []);
+  var onTriggerKeyDown = function onTriggerKeyDown(event) {
+    var _a;
+    if ((_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) return;
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      openWith('first');
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      openWith('last');
+    }
+  };
+  var onTriggerClick = function onTriggerClick(event) {
+    var _a;
+    if ((_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) return;
+    // A keyboard click (Enter, Space) is handled on keydown
+    if (event.detail === 0) return;
+    if (isOpen) close({
+      returnFocus: false
+    });else openWith('first');
+  };
+  var onMenuKeyDown = function onMenuKeyDown(event) {
+    var _a;
+    var items = Array.from(event.currentTarget.querySelectorAll(ITEM_SELECTOR));
+    var current = items.indexOf(document.activeElement);
+    var move = function move(index) {
+      var _a;
+      event.preventDefault();
+      (_a = items[(index + items.length) % items.length]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    switch (event.key) {
+      case 'ArrowDown':
+        return move(current + 1);
+      case 'ArrowUp':
+        return move(current - 1);
+      case 'Home':
+        return move(0);
+      case 'End':
+        return move(items.length - 1);
+      case 'Escape':
+        event.preventDefault();
+        event.stopPropagation();
+        return close();
+      case 'Tab':
+        // Focus moves on to the next element after the trigger, and the menu closes
+        return close({
+          returnFocus: false
+        });
+      default:
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && event.key !== ' ') {
+          var state_1 = typeahead.current;
+          clearTimeout(state_1.timer);
+          state_1.text += event.key.toLowerCase();
+          state_1.timer = setTimeout(function () {
+            state_1.text = '';
+          }, TYPEAHEAD_RESET_MS);
+          // The label alone: not a leading Avatar's initials, the description or the shortcut
+          var label_1 = function label_1(item) {
+            var _a, _b, _c;
+            return ((_c = (_a = item.dataset.label) !== null && _a !== void 0 ? _a : (_b = item.querySelector('[data-menu-label]')) === null || _b === void 0 ? void 0 : _b.textContent) !== null && _c !== void 0 ? _c : '').trim().toLowerCase();
+          };
+          var ordered = __spreadArray(__spreadArray([], items.slice(current + 1), true), items.slice(0, current + 1), true);
+          var search = state_1.text.length > 1 ? __spreadArray([items[current]], ordered, true) : ordered;
+          (_a = search.find(function (item) {
+            return item && label_1(item).startsWith(state_1.text);
+          })) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+  };
+  return jsx(MenuContext.Provider, {
+    value: {
+      close: close
+    },
+    children: jsxs(Anchor, {
+      ref: anchorRef,
+      onKeyDown: onTriggerKeyDown,
+      onClick: onTriggerClick,
+      children: [trigger, isPresent && jsx(Panel, {
+        ref: panelRef,
+        id: menuId,
+        role: "menu",
+        tabIndex: -1,
+        "$exiting": isExiting,
+        onKeyDown: onMenuKeyDown,
+        "data-testid": dataTestId,
+        children: children
+      })]
+    })
+  });
+};
+Menu.displayName = 'Menu';
+var Row = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Menu__Row",
+  componentId: "sc-13mple2-2"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  cursor: ", ";\n  user-select: none;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030): focus shows the hover state (0029); only checked items are\n     light blue, with the checkmark so the state isn't colour alone */\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n  cursor: ", ";\n  user-select: none;\n  transition: background-color ", " ", ",\n    color ", " ", ";\n\n  /* The shared row states (0030): focus shows the hover state (0029); only checked items are\n     light blue, with the checkmark so the state isn't colour alone */\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"])), space[200], size.row.sm, space.inset.xs, space.inset.md, typography.small, function (_a) {
+  var $destructive = _a.$destructive;
+  return $destructive ? color.text.danger : color.text["default"];
+}, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, motion.duration.fast, motion.easing.decelerate, motion.duration.fast, motion.easing.decelerate, function (_a) {
+  var $checked = _a.$checked,
+    $focused = _a.$focused,
+    $disabled = _a.$disabled;
+  return interactiveRow({
+    selected: $checked,
+    focused: $focused,
+    disabled: $disabled
+  });
+}, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), color.text.disabled);
+}, border.focus, border.focusOffset);
+var Leading = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Menu__Leading",
+  componentId: "sc-13mple2-3"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-shrink: 0;\n"], ["\n  display: inline-flex;\n  flex-shrink: 0;\n"])));
+var Text = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Menu__Text",
+  componentId: "sc-13mple2-4"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n"])));
+var Description = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Menu__Description",
+  componentId: "sc-13mple2-5"
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography.caption, color.text.muted);
+var Shortcut = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Menu__Shortcut",
+  componentId: "sc-13mple2-6"
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  flex-shrink: 0;\n  font: ", ";\n  color: ", ";\n"], ["\n  flex-shrink: 0;\n  font: ", ";\n  color: ", ";\n"])), typography.caption, color.text.muted);
+var Check = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Menu__Check",
+  componentId: "sc-13mple2-7"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-shrink: 0;\n  color: inherit;\n"], ["\n  display: inline-flex;\n  flex-shrink: 0;\n  color: inherit;\n"])));
+var RowItem = function RowItem(_a) {
+  var role = _a.role,
+    children = _a.children,
+    icon = _a.icon,
+    description = _a.description,
+    shortcut = _a.shortcut,
+    _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
+    _c = _a.destructive,
+    destructive = _c === void 0 ? false : _c,
+    checked = _a.checked,
+    textValue = _a.textValue,
+    onActivate = _a.onActivate,
+    dataTestId = _a["data-testid"];
+  var _d = useState(false),
+    focused = _d[0],
+    setFocused = _d[1];
+  var checkable = role !== 'menuitem';
+  var activate = function activate() {
+    if (!disabled) onActivate();
+  };
+  return jsxs(Row, {
+    role: role,
+    tabIndex: -1,
+    "aria-disabled": disabled || undefined,
+    "aria-checked": checkable ? Boolean(checked) : undefined,
+    "aria-keyshortcuts": shortcut === null || shortcut === void 0 ? void 0 : shortcut.keys,
+    "data-label": textValue,
+    "data-testid": dataTestId,
+    "$checked": Boolean(checked),
+    "$focused": focused,
+    "$disabled": disabled,
+    "$destructive": destructive,
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    },
+    onPointerMove: function onPointerMove(event) {
+      // The pointer moves focus, so hover and keyboard share one highlighted item
+      if (document.activeElement !== event.currentTarget) event.currentTarget.focus();
+    },
+    onClick: activate,
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        activate();
+      }
+    },
+    children: [icon && jsx(Leading, {
+      "aria-hidden": "true",
+      children: icon
+    }), jsxs(Text, {
+      children: [jsx("span", {
+        "data-menu-label": "",
+        children: children
+      }), description && jsx(Description, {
+        children: description
+      })]
+    }), shortcut && jsx(Shortcut, {
+      "aria-hidden": "true",
+      children: shortcut.label
+    }), checkable && checked && jsx(Check, {
+      children: jsx(Icon, {
+        name: "check",
+        size: "sm",
+        iconColor: "inherit"
+      })
+    })]
+  });
+};
+/** An action. Activating it closes the menu. */
+var MenuItem = function MenuItem(_a) {
+  var onSelect = _a.onSelect,
+    props = __rest(_a, ["onSelect"]);
+  var close = useMenu('MenuItem').close;
+  return jsx(RowItem, __assign({
+    role: "menuitem"
+  }, props, {
+    onActivate: function onActivate() {
+      close();
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    }
+  }));
+};
+/** One choice of a set, inside a MenuGroup. Choosing it closes the menu. */
+var MenuItemRadio = function MenuItemRadio(_a) {
+  var onSelect = _a.onSelect,
+    checked = _a.checked,
+    props = __rest(_a, ["onSelect", "checked"]);
+  var close = useMenu('MenuItemRadio').close;
+  return jsx(RowItem, __assign({
+    role: "menuitemradio",
+    checked: checked
+  }, props, {
+    onActivate: function onActivate() {
+      close();
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    }
+  }));
+};
+/** An on/off option, inside a MenuGroup. Toggling it keeps the menu open. */
+var MenuItemCheckbox = function MenuItemCheckbox(_a) {
+  var onCheckedChange = _a.onCheckedChange,
+    checked = _a.checked,
+    props = __rest(_a, ["onCheckedChange", "checked"]);
+  useMenu('MenuItemCheckbox');
+  return jsx(RowItem, __assign({
+    role: "menuitemcheckbox",
+    checked: checked
+  }, props, {
+    onActivate: function onActivate() {
+      return onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(!checked);
+    }
+  }));
+};
+var GroupLabel = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Menu__GroupLabel",
+  componentId: "sc-13mple2-8"
+})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n"], ["\n  padding: ", " ", ";\n  font: ", ";\n  color: ", ";\n"
+/** Groups related items. Radio and checkbox items always sit in a group. */])), space.inset.xs, space.inset.md, typography.caption, color.text.muted);
+/** Groups related items. Radio and checkbox items always sit in a group. */
+var MenuGroup = function MenuGroup(_a) {
+  var label = _a.label,
+    children = _a.children;
+  var labelId = useId();
+  return jsxs("div", {
+    role: "group",
+    "aria-labelledby": label ? labelId : undefined,
+    children: [label && jsx(GroupLabel, {
+      id: labelId,
+      "aria-hidden": "true",
+      children: label
+    }), children]
+  });
+};
+// Divider's smallest spacing (16px each side) is too loose between dense rows, so the menu draws
+// its own 1px rule with the decorative border
+var Separator = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Menu__Separator",
+  componentId: "sc-13mple2-9"
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  margin: ", " 0;\n  border-top: ", ";\n"], ["\n  margin: ", " 0;\n  border-top: ", ";\n"
+/** Separates groups */])), space[100], border["default"]);
+/** Separates groups */
+var MenuDivider = function MenuDivider() {
+  return jsx(Separator, {
+    role: "separator",
+    "aria-orientation": "horizontal"
+  });
+};
+MenuItem.displayName = 'MenuItem';
+MenuItemRadio.displayName = 'MenuItemRadio';
+MenuItemCheckbox.displayName = 'MenuItemCheckbox';
+MenuGroup.displayName = 'MenuGroup';
+MenuDivider.displayName = 'MenuDivider';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+
+export { Menu, MenuDivider, MenuGroup, MenuItem, MenuItemCheckbox, MenuItemRadio };
+//# sourceMappingURL=Menu.mjs.map

package/dist/components/molecules/Menu/Menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/Menu/index.d.mts

@@ -0,0 +1,2 @@
+export { Menu, MenuItem, MenuItemRadio, MenuItemCheckbox, MenuGroup, MenuDivider } from './Menu.mjs';
+export type { MenuProps, MenuSide, MenuAlign, MenuItemProps, MenuItemRadioProps, MenuItemCheckboxProps, MenuGroupProps, } from './Menu.mjs';

package/dist/components/molecules/Menu/index.d.ts

@@ -0,0 +1,2 @@
+export { Menu, MenuItem, MenuItemRadio, MenuItemCheckbox, MenuGroup, MenuDivider } from './Menu';
+export type { MenuProps, MenuSide, MenuAlign, MenuItemProps, MenuItemRadioProps, MenuItemCheckboxProps, MenuGroupProps, } from './Menu';

package/dist/components/molecules/Modal/Modal.d.mts

@@ -9,7 +9,6 @@ export interface ModalAction {
     onClick: () => void;
     /**
      * Button variant. `accent` is the blue call to action (at most one per view).
-     * `emphasis` is a deprecated alias for `accent` and will be removed in 3.0.
      */
     variant?: ButtonVariant;
     /** Optional leading icon */

package/dist/components/molecules/Modal/Modal.d.ts

@@ -9,7 +9,6 @@ export interface ModalAction {
     onClick: () => void;
     /**
      * Button variant. `accent` is the blue call to action (at most one per view).
-     * `emphasis` is a deprecated alias for `accent` and will be removed in 3.0.
      */
     variant?: ButtonVariant;
     /** Optional leading icon */

package/dist/components/molecules/SearchField/SearchField.mjs

@@ -296,6 +296,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
             role: "option",
             primary: "Clear recent searches",
             interactive: true,
+            // Deprecated prop (0051), kept for this padding until 4.0 removes it
             spacing: "compact",
             onClick: function onClick() {
               return handleSuggestionClick(item);
@@ -324,6 +325,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
           }) : undefined,
           interactive: true,
           "data-highlighted": index === highlightedIndex || undefined,
+          // Deprecated prop (0051), kept for this padding until 4.0 removes it
           spacing: "compact",
           onClick: function onClick() {
             return handleSuggestionClick(item);

package/dist/components/molecules/SidebarNavItem/SidebarNavContext.d.mts

@@ -0,0 +1,13 @@
+import { type ComponentType } from 'react';
+export interface SidebarNavContextValue {
+    /** The nav is the icon rail: rows show their icon only */
+    collapsed: boolean;
+    /** A router's link component for internal URLs, set once on SidebarNav (decision 0008) */
+    linkComponent?: ComponentType<any>;
+    /** SidebarNav draws one gliding hover highlight, so rows don't colour their own hover (0053) */
+    glide: boolean;
+    /** Inside a SidebarNav, whose body is one list: a section is one of its items */
+    inNav?: boolean;
+}
+export declare const SidebarNavContext: import("react").Context<SidebarNavContextValue>;
+export declare const useSidebarNav: () => SidebarNavContextValue;

package/dist/components/molecules/SidebarNavItem/SidebarNavContext.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentType } from 'react';
+export interface SidebarNavContextValue {
+    /** The nav is the icon rail: rows show their icon only */
+    collapsed: boolean;
+    /** A router's link component for internal URLs, set once on SidebarNav (decision 0008) */
+    linkComponent?: ComponentType<any>;
+    /** SidebarNav draws one gliding hover highlight, so rows don't colour their own hover (0053) */
+    glide: boolean;
+    /** Inside a SidebarNav, whose body is one list: a section is one of its items */
+    inNav?: boolean;
+}
+export declare const SidebarNavContext: import("react").Context<SidebarNavContextValue>;
+export declare const useSidebarNav: () => SidebarNavContextValue;