@primer/react-brand 0.72.0-rc.f8b72452 → 0.72.0

package/esm/ActionMenu/ActionMenu.js

@@ -1,13 +1,13 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../hooks/useId.js";
 import { Text as n } from "../Text/Text.js";
-import { CheckIcon as r, ChevronDownIcon as i } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import { Button as a } from "../Button/Button.js";
-import { ThemeProvider as o } from "../ThemeProvider/ThemeProvider.js";
-import { useTheme as s } from "../ThemeProvider/useTheme.js";
-import { useOnClickOutside as c } from "../hooks/useOnClickOutside.js";
-import { useKeyboardEscape as l } from "../hooks/useKeyboardEscape.js";
-import { useAnchoredPosition as u } from "../hooks/useAnchoredPosition.js";
+import { Button as r } from "../Button/Button.js";
+import { ThemeProvider as i } from "../ThemeProvider/ThemeProvider.js";
+import { useTheme as a } from "../ThemeProvider/useTheme.js";
+import { useAnchoredPosition as o } from "../hooks/useAnchoredPosition.js";
+import { useOnClickOutside as s } from "../hooks/useOnClickOutside.js";
+import { useKeyboardEscape as c } from "../hooks/useKeyboardEscape.js";
+import { CheckIcon as l, ChevronDownIcon as u } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes-B69RzUbe.css';/* empty css                                                                                                         */
 import d from "./ActionMenu.module.js";
 import f, { Children as p, cloneElement as m, forwardRef as h, isValidElement as g, memo as _, useCallback as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
@@ -48,9 +48,9 @@ var O = {
 		},
 		children: t
 	});
-}, F = _(({ id: n, children: r, "data-testid": i, disabled: a, open: o = !1, selectionVariant: s = "none", menuAlignment: f = "end", size: h = "medium", menuSide: _, onSelect: b, mode: C = "default" }) => {
-	let [k, A] = S(o), j = x(null), M = x(null), N = t(n);
-	c(j, () => A(!1), M), l(v(() => {
+}, F = _(({ id: n, children: r, "data-testid": i, disabled: a, open: l = !1, selectionVariant: u = "none", menuAlignment: f = "end", size: h = "medium", menuSide: _, onSelect: b, mode: C = "default" }) => {
+	let [k, A] = S(l), j = x(null), M = x(null), N = t(n);
+	s(j, () => A(!1), M), c(v(() => {
 		A(!1);
 	}, []));
 	let F = v(() => {
@@ -104,7 +104,7 @@ var O = {
 		F,
 		L
 	]);
-	let { position: B } = u({
+	let { position: B } = o({
 		floatingElementRef: j,
 		anchorElementRef: M,
 		align: f,
@@ -128,7 +128,7 @@ var O = {
 		id: `${N}-menu`,
 		children: p.map(n.props.children, (e) => g(e) ? m(e, {
 			handler: R,
-			type: C === "split-button" ? "link" : s
+			type: C === "split-button" ? "link" : u
 		}) : e)
 	})), t), {});
 	return /* @__PURE__ */ w(P, {
@@ -141,125 +141,125 @@ var O = {
 			children: [V, k ? H : null]
 		})
 	});
-}), I = h(({ as: t, href: n, id: r, children: o, className: s, "data-testid": c, disabled: l, menuOpen: u, size: f, _mode: p = "default", onClick: m, leadingVisual: h, variant: g, ..._ }, y) => {
+}), I = h(({ as: t, href: n, id: i, children: a, className: o, "data-testid": s, disabled: c, menuOpen: l, size: f, _mode: p = "default", onClick: m, leadingVisual: h, variant: g, ..._ }, y) => {
 	let { onMenuToggle: b } = N(), x = v((e) => {
 		m?.(e), e.defaultPrevented || b?.();
 	}, [m, b]);
 	if (p === "split-button") {
 		let p = g ?? "primary";
 		return /* @__PURE__ */ T("div", {
-			className: e(d.ActionMenu__button, d[`ActionMenu__button--${f}`], s),
-			children: [/* @__PURE__ */ w(a, {
+			className: e(d.ActionMenu__button, d[`ActionMenu__button--${f}`], o),
+			children: [/* @__PURE__ */ w(r, {
 				as: t,
 				href: n,
-				className: e(d["ActionMenu__innerButton--split-button"], d[`ActionMenu__innerButton--${p}`], d[`ActionMenu__innerButton--${f}`], l && d["ActionMenu__innerButton--disabled"]),
+				className: e(d["ActionMenu__innerButton--split-button"], d[`ActionMenu__innerButton--${p}`], d[`ActionMenu__innerButton--${f}`], c && d["ActionMenu__innerButton--disabled"]),
 				variant: p,
-				"aria-disabled": l,
-				"data-testid": c || O.button,
+				"aria-disabled": c,
+				"data-testid": s || O.button,
 				size: f,
 				leadingVisual: h,
 				onClick: m,
 				..._,
 				children: /* @__PURE__ */ w("span", {
 					className: d["ActionMenu__button-text"],
-					children: o
+					children: a
 				})
-			}), /* @__PURE__ */ w(a, {
+			}), /* @__PURE__ */ w(r, {
 				ref: y,
-				id: r,
+				id: i,
 				as: "button",
 				className: d["ActionMenu__innerButton--split-button"],
 				variant: p,
 				"aria-haspopup": "true",
 				"aria-label": "Menu",
 				size: f,
-				"aria-expanded": u ? "true" : "false",
+				"aria-expanded": l ? "true" : "false",
 				onClick: b,
-				disabled: l,
-				children: /* @__PURE__ */ w(i, { className: d["ActionMenu__inner-button-dropdown-icon"] })
+				disabled: c,
+				children: /* @__PURE__ */ w(u, { className: d["ActionMenu__inner-button-dropdown-icon"] })
 			})]
 		});
 	}
-	return /* @__PURE__ */ w(a, {
+	return /* @__PURE__ */ w(r, {
 		ref: y,
-		id: r,
-		className: e(d.ActionMenu__button, d[`ActionMenu__button--${f}`], s),
+		id: i,
+		className: e(d.ActionMenu__button, d[`ActionMenu__button--${f}`], o),
 		"aria-haspopup": "true",
-		"aria-expanded": u ? "true" : "false",
-		disabled: l,
-		"data-testid": c || O.button,
+		"aria-expanded": l ? "true" : "false",
+		disabled: c,
+		"data-testid": s || O.button,
 		size: f,
 		variant: g,
 		leadingVisual: h,
-		trailingVisual: /* @__PURE__ */ w(i, {}),
+		trailingVisual: /* @__PURE__ */ w(u, {}),
 		onClick: x,
 		..._,
 		children: /* @__PURE__ */ w("span", {
 			className: d["ActionMenu__button-text"],
-			children: o
+			children: a
 		})
 	});
 }), L = {
 	none: "menuitem",
 	single: "menuitemradio",
 	link: "menuitem"
-}, R = ({ as: t, children: i, className: a, disabled: o, handler: s, selected: c, type: l, value: u, onClick: p, onKeyDown: m, leadingVisual: h, ...g }) => {
+}, R = ({ as: t, children: r, className: i, disabled: a, handler: o, selected: s, type: c, value: u, onClick: p, onKeyDown: m, leadingVisual: h, ...g }) => {
 	let { size: _ } = N(), y = v((e) => {
-		p?.(e), o || s?.(String(u));
+		p?.(e), a || o?.(String(u));
 	}, [
-		s,
-		u,
 		o,
+		u,
+		a,
 		p
 	]), x = v((e) => {
-		m?.(e), !o && e.key === "Enter" && s?.(String(u));
+		m?.(e), !a && e.key === "Enter" && o?.(String(u));
 	}, [
-		s,
-		u,
 		o,
+		u,
+		a,
 		m
 	]), S = b(() => ({
-		className: e(d.ActionMenu__item, l === "single" && d[`ActionMenu__item--selection-type-${l}`], _ && d[`ActionMenu__item--${_}`], a),
-		role: L[l || "single"],
-		"aria-disabled": o,
+		className: e(d.ActionMenu__item, c === "single" && d[`ActionMenu__item--selection-type-${c}`], _ && d[`ActionMenu__item--${_}`], i),
+		role: L[c || "single"],
+		"aria-disabled": a,
 		tabIndex: -1,
 		"data-value": u,
 		...g
 	}), [
 		g,
-		l,
+		c,
 		_,
+		i,
 		a,
-		o,
 		u
 	]), E = b(() => /* @__PURE__ */ T(C, { children: [
 		f.isValidElement(h) ? f.cloneElement(h, {
 			width: h.props.width || 20,
 			height: h.props.width || 20
 		}) : null,
-		l === "single" && /* @__PURE__ */ w("span", {
+		c === "single" && /* @__PURE__ */ w("span", {
 			className: d["ActionMenu__item-leadingVisual"],
-			children: c && /* @__PURE__ */ w(r, {
-				className: e(d["ActionMenu__item-icon"], o && d["ActionMenu__item-icon--disabled"]),
+			children: s && /* @__PURE__ */ w(l, {
+				className: e(d["ActionMenu__item-icon"], a && d["ActionMenu__item-icon--disabled"]),
 				size: 16
 			})
 		}),
 		/* @__PURE__ */ w("span", {
 			className: d["ActionMenu__item-text"],
 			children: /* @__PURE__ */ w(n, {
-				variant: o ? "muted" : "default",
+				variant: a ? "muted" : "default",
 				size: _ === "medium" ? "200" : "100",
-				className: e(o && d["ActionMenu__item-content--disabled"]),
-				children: i
+				className: e(a && d["ActionMenu__item-content--disabled"]),
+				children: r
 			})
 		})
 	] }), [
 		h,
-		i,
-		c,
-		o,
+		r,
+		s,
+		a,
 		_,
-		l
+		c
 	]);
 	return t === "a" ? /* @__PURE__ */ w("li", {
 		role: "menuitem",
@@ -267,28 +267,28 @@ var O = {
 		onClick: p,
 		onKeyDown: m,
 		children: /* @__PURE__ */ w("a", {
-			className: e(d["ActionMenu__item-anchor"], o && d["ActionMenu__item--disabled"]),
+			className: e(d["ActionMenu__item-anchor"], a && d["ActionMenu__item--disabled"]),
 			href: g.href,
 			children: E
 		})
 	}) : /* @__PURE__ */ w("li", {
 		role: "menuitem",
 		...S,
-		"aria-checked": l === "none" ? void 0 : c ? "true" : "false",
+		"aria-checked": c === "none" ? void 0 : s ? "true" : "false",
 		onClick: y,
 		onKeyDown: x,
 		children: E
 	});
-}, z = h(({ children: t, className: n, "data-testid": r, menuOpen: i, ...a }, c) => {
-	let { colorMode: l } = s();
-	return /* @__PURE__ */ w(o, {
+}, z = h(({ children: t, className: n, "data-testid": r, menuOpen: o, ...s }, c) => {
+	let { colorMode: l } = a();
+	return /* @__PURE__ */ w(i, {
 		colorMode: n?.includes("ActionMenu__menu--split") ? "light" : l,
 		children: /* @__PURE__ */ w("ul", {
 			ref: c,
 			className: e(n),
 			role: "menu",
 			"data-testid": r || O.list,
-			...a,
+			...s,
 			children: t
 		})
 	});

package/esm/ActionMenu/ActionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.js","names":[],"sources":["../../src/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, {\n  Children,\n  isValidElement,\n  cloneElement,\n  useRef,\n  useCallback,\n  useState,\n  useEffect,\n  PropsWithChildren,\n  forwardRef,\n  memo,\n  ReactElement,\n  useMemo,\n} from 'react'\nimport {Button, ButtonProps, Text, ThemeProvider, useTheme} from '../'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\n\nimport {clsx} from 'clsx'\nimport {CheckIcon, ChevronDownIcon, type Icon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\n\nimport {FocusKeys, type PositionSettings, focusZone} from '@primer/behaviors'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './ActionMenu.module.css'\n\nconst testIds = {\n  root: 'ActionMenu',\n  get button() {\n    return `${this.root}-button`\n  },\n  get overlay() {\n    return `${this.root}-overlay`\n  },\n  get list() {\n    return `${this.root}-list`\n  },\n  get item() {\n    return `${this.root}-list-item`\n  },\n}\n\n// primer behaviors doesn't export these values, recreating manually\n// https://github.com/primer/behaviors/blob/main/src/anchored-position.ts#L5\nexport const actionMenuOverlaySides = [\n  'inside-top',\n  'inside-bottom',\n  'inside-left',\n  'inside-right',\n  'inside-center',\n  'outside-top',\n  'outside-bottom',\n  'outside-left',\n  'outside-right',\n] as PositionSettings['side'][]\n\nexport const ActionMenuSizes = ['small', 'medium'] as const\n\nexport const ActionMenuButtonModes = ['default', 'split-button'] as const\nexport type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number]\n\nexport type ActionMenuSizes = (typeof ActionMenuSizes)[number]\n\nexport type ActionMenuProps = {\n  /**\n   * The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay\n   */\n  children:\n    | ReactElement<ActionMenuButtonProps>\n    | ReactElement<ActionMenuOverlayProps>\n    | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps>>\n  /**\n   * Determines whether the ActionMenu is disabled\n   */\n  disabled?: boolean\n  /**\n   * Determines whether the ActionMenu is open by default\n   */\n  open?: boolean\n  /**\n   * Callback that is called when an item is selected.\n   * The value of the selected item is passed as an argument.\n   */\n  onSelect?: (newValue: string) => void\n  /**\n   * The selection variant of the ActionMenu.\n   * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.\n   * - `none`: No items can be selected. Menu items as a menuitem.\n   */\n  selectionVariant?: 'single' | 'none'\n  /**\n   * Test id for the ActionMenu\n   */\n  'data-testid'?: string\n  /**\n   * Horizontal alignment of the menu relative to the bottom of the button\n   */\n  menuAlignment?: 'start' | 'end'\n  /**\n   * Size configuratin of the ActionMenu\n   */\n  size?: ActionMenuSizes\n  /*\n   * Side the menu overlay appears\n   */\n  menuSide?: PositionSettings['side']\n  /**\n   * Alternative behavior for the button and menu items\n   * - `default`: The button and menu items behave as a standard button and menu item.\n   * - `split-button`: The button behaves as a split button, and the menu items behave as links.\n   */\n  mode?: ActionMenuButtonModes\n} & BaseProps<HTMLDivElement>\n\ntype ActionMenuContextType = {\n  size?: ActionMenuSizes\n  setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes | undefined>>\n  onMenuToggle?: () => void\n}\n\nconst ActionMenuContext = React.createContext<ActionMenuContextType>({})\n\nexport const useActionMenuContext = (): ActionMenuContextType => {\n  return React.useContext(ActionMenuContext)\n}\n\ntype ActionMenuProviderProps = ActionMenuProps & Pick<ActionMenuContextType, 'onMenuToggle'>\n\nexport const ActionMenuProvider: React.FC<ActionMenuProviderProps> = ({size, children, onMenuToggle}) => {\n  const [currentSize, setSize] = useState(size)\n\n  return (\n    <ActionMenuContext.Provider value={{size: currentSize, setSize, onMenuToggle}}>\n      {children}\n    </ActionMenuContext.Provider>\n  )\n}\n\nconst _ActionMenuRoot = memo(\n  ({\n    id,\n    children,\n    'data-testid': testId,\n    disabled,\n    open = false,\n    selectionVariant = 'none',\n    menuAlignment = 'end',\n    size = 'medium',\n    menuSide,\n    onSelect,\n    mode = 'default',\n  }: ActionMenuProps) => {\n    const [showMenu, setShowMenu] = useState(open)\n    const floatingElementRef = useRef<HTMLUListElement>(null)\n    const anchorElementRef = useRef<HTMLButtonElement>(null)\n    const instanceId = useId(id)\n\n    useOnClickOutside(floatingElementRef, () => setShowMenu(false), anchorElementRef)\n\n    const closeMenuCallback = useCallback(() => {\n      setShowMenu(false)\n    }, [])\n\n    useKeyboardEscape(closeMenuCallback)\n\n    const toggleMenu = useCallback(() => {\n      setShowMenu(!showMenu)\n    }, [showMenu])\n\n    const handleOnSelect = useCallback(\n      (newValue: string) => {\n        if (onSelect) onSelect(newValue)\n        toggleMenu()\n      },\n      [onSelect, toggleMenu],\n    )\n\n    const handleItemSelection = useCallback(\n      (newValue: string) => {\n        handleOnSelect(newValue)\n        toggleMenu()\n        anchorElementRef.current?.focus()\n      },\n      [handleOnSelect, toggleMenu, anchorElementRef],\n    )\n\n    useEffect(() => {\n      if (showMenu && floatingElementRef.current) {\n        const floatingElement = floatingElementRef.current\n        const isSplitLayout = mode === 'split-button'\n        const splitLayoutFilter = isSplitLayout ? element => element.tagName === 'A' : undefined\n\n        focusZone(floatingElementRef.current, {\n          bindKeys: FocusKeys.ArrowVertical,\n          focusableElementFilter: splitLayoutFilter,\n          focusInStrategy: isSplitLayout ? 'first' : undefined,\n        })\n\n        // enter selects item\n        floatingElement.addEventListener('keydown', event => {\n          if (event.key === 'Enter') {\n            const target = event.target as HTMLElement\n\n            // Get the proper element containing the data-value\n            const targetElement = target.tagName === 'A' ? target.closest('li') : target\n\n            if (!targetElement || targetElement.getAttribute('aria-disabled') === 'true') return\n\n            const value = targetElement.getAttribute('data-value')\n            if (value) {\n              handleOnSelect(value)\n              setShowMenu(false)\n              setTimeout(() => {\n                anchorElementRef.current?.focus()\n              }, 10)\n            }\n          }\n        })\n\n        const targetSelector = isSplitLayout ? 'a' : 'li'\n\n        // focusses first item\n        const firstItem = floatingElementRef.current.querySelector(targetSelector)\n        if (firstItem) {\n          setTimeout(() => {\n            firstItem.focus()\n          }, 10)\n        }\n\n        const lastItem =\n          floatingElement.querySelectorAll(targetSelector)[floatingElement.querySelectorAll(targetSelector).length - 1]\n        lastItem.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'ArrowDown') {\n            keyboardEvent.preventDefault()\n            firstItem?.focus()\n          }\n        })\n\n        firstItem?.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'ArrowUp') {\n            keyboardEvent.preventDefault()\n            lastItem.focus()\n          }\n        })\n\n        //on escape refocus\n        floatingElement.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'Escape') {\n            anchorElementRef.current?.focus()\n          }\n        })\n      }\n    }, [showMenu, floatingElementRef, mode, handleItemSelection, toggleMenu, handleOnSelect])\n\n    // Calculate the position of the menu\n    const {position} = useAnchoredPosition(\n      {\n        floatingElementRef,\n        anchorElementRef,\n        align: menuAlignment,\n        allowOutOfBounds: true,\n        side: menuSide,\n      },\n      [showMenu],\n    )\n\n    const {Button: SelectButton, Overlay: SelectOverlay} = Children.toArray(children).reduce<{\n      Button?: ReactElement<ActionMenuButtonProps>\n      Overlay?: ReactElement<ActionMenuOverlayProps>\n    }>((acc, child) => {\n      if (isValidElement<ActionMenuButtonProps>(child) && child.type === ActionMenuButton) {\n        acc.Button = cloneElement(child, {\n          ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n          className: clsx(child.props.className, styles[`ActionMenu__button--${mode}`], showMenu),\n          menuOpen: showMenu,\n          disabled,\n          id: `${instanceId}-button`,\n          size,\n          _mode: mode,\n        })\n      } else if (isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay) {\n        acc.Overlay = cloneElement(child, {\n          ref: floatingElementRef as React.RefObject<HTMLUListElement>,\n          className: clsx(\n            styles.ActionMenu__menu,\n            position && styles['ActionMenu__menu--visible'],\n            position && styles[`ActionMenu__menu--pos-${position.anchorSide}`],\n            styles[`ActionMenu__menu--${size}`],\n            mode === 'split-button' && 'ActionMenu__menu--split',\n          ),\n          style: {\n            top: `${position?.top ?? 0}px`,\n            left: `${position?.left ?? 0}px`,\n          },\n          id: `${instanceId}-menu`,\n          children: Children.map(child.props.children, item => {\n            if (isValidElement<ActionMenuItemBaseProps>(item)) {\n              return cloneElement(item, {\n                handler: handleItemSelection,\n                type: mode === 'split-button' ? 'link' : selectionVariant,\n              })\n            }\n            return item\n          }),\n        })\n      }\n      return acc\n    }, {})\n\n    return (\n      <ActionMenuProvider size={size} onMenuToggle={toggleMenu}>\n        <div\n          id={instanceId}\n          className={clsx(styles.ActionMenu, disabled && styles['ActionMenu--disabled'])}\n          data-testid={testId || testIds.root}\n        >\n          {SelectButton}\n          {showMenu ? SelectOverlay : null}\n        </div>\n      </ActionMenuProvider>\n    )\n  },\n)\n\ntype ActionMenuButtonProps = PropsWithChildren<\n  BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onClick'>\n> & {\n  as?: ButtonProps<'a'>['as']\n  href?: ButtonProps<'a'>['href']\n  menuOpen?: boolean\n  'data-testid'?: string\n  size?: ActionMenuSizes\n  _mode?: ActionMenuButtonModes\n  variant?: ButtonProps<'a'>['variant']\n  leadingVisual?: ButtonProps<'a'>['leadingVisual']\n}\n\nconst ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(\n  (\n    {\n      as,\n      href,\n      id,\n      children,\n      className,\n      'data-testid': testId,\n      disabled,\n      menuOpen,\n      size,\n      _mode = 'default',\n      onClick,\n      leadingVisual,\n      variant,\n      ...props\n    },\n    ref,\n  ) => {\n    const {onMenuToggle} = useActionMenuContext()\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event)\n\n        if (!event.defaultPrevented) {\n          onMenuToggle?.()\n        }\n      },\n      [onClick, onMenuToggle],\n    )\n\n    if (_mode === 'split-button') {\n      const splitButtonVariant = variant ?? 'primary'\n\n      return (\n        <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n          <Button\n            as={as}\n            href={href}\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles[`ActionMenu__innerButton--${splitButtonVariant}`],\n              styles[`ActionMenu__innerButton--${size}`],\n              disabled && styles['ActionMenu__innerButton--disabled'],\n            )}\n            variant={splitButtonVariant}\n            aria-disabled={disabled}\n            data-testid={testId || testIds.button}\n            size={size}\n            leadingVisual={leadingVisual}\n            onClick={onClick}\n            {...props}\n          >\n            <span className={styles['ActionMenu__button-text']}>{children}</span>\n          </Button>\n          <Button\n            ref={ref}\n            id={id}\n            as=\"button\"\n            className={styles['ActionMenu__innerButton--split-button']}\n            variant={splitButtonVariant}\n            aria-haspopup=\"true\"\n            aria-label=\"Menu\"\n            size={size}\n            aria-expanded={menuOpen ? 'true' : 'false'}\n            onClick={onMenuToggle}\n            disabled={disabled}\n          >\n            <ChevronDownIcon className={styles['ActionMenu__inner-button-dropdown-icon']} />\n          </Button>\n        </div>\n      )\n    }\n\n    return (\n      <Button\n        ref={ref}\n        id={id}\n        className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}\n        aria-haspopup=\"true\"\n        aria-expanded={menuOpen ? 'true' : 'false'}\n        disabled={disabled}\n        data-testid={testId || testIds.button}\n        size={size}\n        variant={variant}\n        leadingVisual={leadingVisual}\n        trailingVisual={<ChevronDownIcon />}\n        onClick={handleClick}\n        {...props}\n      >\n        <span className={styles['ActionMenu__button-text']}>{children}</span>\n      </Button>\n    )\n  },\n)\n\ntype ActionMenuItemBaseProps = {\n  handler?: (newValue: string) => void\n  type?: 'none' | 'single' | 'link'\n  disabled?: boolean\n  size?: ActionMenuSizes\n  leadingVisual?: React.ReactElement | React.ReactNode | Icon\n} & PropsWithChildren<React.HTMLProps<HTMLLIElement>>\n\ntype ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {\n  as: 'a'\n} & Omit<React.HTMLProps<HTMLAnchorElement>, keyof ActionMenuItemBaseProps | 'as'>\n\n// Type for when 'as' is not set or is anything other than 'a'\ntype ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {\n  as?: string\n  value?: string\n  selected?: boolean\n} & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps | 'as'>\n\nconst roleTypeMap = {\n  none: 'menuitem',\n  single: 'menuitemradio',\n  link: 'menuitem',\n}\n\nconst ActionMenuItem = ({\n  as,\n  children,\n  className,\n  disabled,\n  handler,\n  selected,\n  type,\n  value,\n  onClick,\n  onKeyDown,\n  leadingVisual: LeadingVisual,\n  ...props\n}: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => {\n  const {size} = useActionMenuContext()\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLLIElement>) => {\n      onClick?.(e)\n\n      if (!disabled) {\n        handler?.(String(value))\n      }\n    },\n    [handler, value, disabled, onClick],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLLIElement>) => {\n      onKeyDown?.(e)\n\n      if (!disabled && e.key === 'Enter') {\n        handler?.(String(value))\n      }\n    },\n    [handler, value, disabled, onKeyDown],\n  )\n\n  const liProps = useMemo<React.HTMLProps<HTMLLIElement> & {'data-value': unknown}>(\n    () => ({\n      className: clsx(\n        styles.ActionMenu__item,\n        type === 'single' && styles[`ActionMenu__item--selection-type-${type}`],\n        size && styles[`ActionMenu__item--${size}`],\n        className,\n      ),\n      role: roleTypeMap[type || 'single'],\n      'aria-disabled': disabled,\n      tabIndex: -1,\n      'data-value': value,\n      ...props,\n    }),\n    [props, type, size, className, disabled, value],\n  )\n\n  const contents = useMemo(\n    () => (\n      <>\n        {React.isValidElement<{width?: number; height?: number}>(LeadingVisual)\n          ? React.cloneElement(LeadingVisual, {\n              width: LeadingVisual.props.width || 20,\n              height: LeadingVisual.props.width || 20,\n            })\n          : null}\n        {type === 'single' && (\n          <span className={styles['ActionMenu__item-leadingVisual']}>\n            {selected && (\n              <CheckIcon\n                className={clsx(styles['ActionMenu__item-icon'], disabled && styles['ActionMenu__item-icon--disabled'])}\n                size={16}\n              />\n            )}\n          </span>\n        )}\n\n        <span className={styles['ActionMenu__item-text']}>\n          <Text\n            variant={disabled ? 'muted' : 'default'}\n            size={size === 'medium' ? '200' : '100'}\n            className={clsx(disabled && styles['ActionMenu__item-content--disabled'])}\n          >\n            {children}\n          </Text>\n        </span>\n      </>\n    ),\n    [LeadingVisual, children, selected, disabled, size, type],\n  )\n\n  if (as === 'a') {\n    return (\n      <li\n        // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n        role=\"menuitem\"\n        {...liProps}\n        // Intentionally not calling handle[Click/KeyDown] here so as to not call the handler\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        <a\n          className={clsx(styles['ActionMenu__item-anchor'], disabled && styles['ActionMenu__item--disabled'])}\n          href={props.href}\n        >\n          {contents}\n        </a>\n      </li>\n    )\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n    <li\n      // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n      role=\"menuitem\"\n      {...liProps}\n      aria-checked={type === 'none' ? undefined : selected ? 'true' : 'false'}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n    >\n      {contents}\n    </li>\n  )\n}\n\ntype ActionMenuOverlayProps = PropsWithChildren<\n  BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>\n> & {\n  'aria-label': string\n  id?: string\n  'data-testid'?: string\n  menuOpen?: boolean\n  style?: React.CSSProperties\n}\n\nconst ActionMenuOverlay = forwardRef<HTMLUListElement, ActionMenuOverlayProps>(\n  ({children, className, 'data-testid': testId, menuOpen, ...rest}, ref) => {\n    const {colorMode: defaultColorMode} = useTheme()\n\n    const colorMode = className?.includes('ActionMenu__menu--split') ? 'light' : defaultColorMode\n\n    return (\n      <ThemeProvider colorMode={colorMode}>\n        <ul ref={ref} className={clsx(className)} role=\"menu\" data-testid={testId || testIds.list} {...rest}>\n          {children}\n        </ul>\n      </ThemeProvider>\n    )\n  },\n)\n\n/**\n * Use ActionMenu to display a list of actions or selections that expand through a trigger button.\n * @see https://primer.style/brand/components/ActionMenu\n */\nexport const ActionMenu = Object.assign(_ActionMenuRoot, {\n  Button: ActionMenuButton,\n  Item: ActionMenuItem,\n  Overlay: ActionMenuOverlay,\n  testIds,\n})\n"],"mappings":"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"}
+{"version":3,"file":"ActionMenu.js","names":[],"sources":["../../src/ActionMenu/ActionMenu.tsx"],"sourcesContent":["import React, {\n  Children,\n  isValidElement,\n  cloneElement,\n  useRef,\n  useCallback,\n  useState,\n  useEffect,\n  PropsWithChildren,\n  forwardRef,\n  memo,\n  ReactElement,\n  useMemo,\n} from 'react'\nimport {Button, ButtonProps} from '../Button'\nimport {Text} from '../Text'\nimport {ThemeProvider, useTheme} from '../ThemeProvider'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\n\nimport {clsx} from 'clsx'\nimport {CheckIcon, ChevronDownIcon, type Icon} from '@primer/octicons-react'\nimport {useId} from '../hooks/useId'\n\nimport {FocusKeys, type PositionSettings, focusZone} from '@primer/behaviors'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './ActionMenu.module.css'\n\nconst testIds = {\n  root: 'ActionMenu',\n  get button() {\n    return `${this.root}-button`\n  },\n  get overlay() {\n    return `${this.root}-overlay`\n  },\n  get list() {\n    return `${this.root}-list`\n  },\n  get item() {\n    return `${this.root}-list-item`\n  },\n}\n\n// primer behaviors doesn't export these values, recreating manually\n// https://github.com/primer/behaviors/blob/main/src/anchored-position.ts#L5\nexport const actionMenuOverlaySides = [\n  'inside-top',\n  'inside-bottom',\n  'inside-left',\n  'inside-right',\n  'inside-center',\n  'outside-top',\n  'outside-bottom',\n  'outside-left',\n  'outside-right',\n] as PositionSettings['side'][]\n\nexport const ActionMenuSizes = ['small', 'medium'] as const\n\nexport const ActionMenuButtonModes = ['default', 'split-button'] as const\nexport type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number]\n\nexport type ActionMenuSizes = (typeof ActionMenuSizes)[number]\n\nexport type ActionMenuProps = {\n  /**\n   * The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay\n   */\n  children:\n    | ReactElement<ActionMenuButtonProps>\n    | ReactElement<ActionMenuOverlayProps>\n    | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps>>\n  /**\n   * Determines whether the ActionMenu is disabled\n   */\n  disabled?: boolean\n  /**\n   * Determines whether the ActionMenu is open by default\n   */\n  open?: boolean\n  /**\n   * Callback that is called when an item is selected.\n   * The value of the selected item is passed as an argument.\n   */\n  onSelect?: (newValue: string) => void\n  /**\n   * The selection variant of the ActionMenu.\n   * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.\n   * - `none`: No items can be selected. Menu items as a menuitem.\n   */\n  selectionVariant?: 'single' | 'none'\n  /**\n   * Test id for the ActionMenu\n   */\n  'data-testid'?: string\n  /**\n   * Horizontal alignment of the menu relative to the bottom of the button\n   */\n  menuAlignment?: 'start' | 'end'\n  /**\n   * Size configuratin of the ActionMenu\n   */\n  size?: ActionMenuSizes\n  /*\n   * Side the menu overlay appears\n   */\n  menuSide?: PositionSettings['side']\n  /**\n   * Alternative behavior for the button and menu items\n   * - `default`: The button and menu items behave as a standard button and menu item.\n   * - `split-button`: The button behaves as a split button, and the menu items behave as links.\n   */\n  mode?: ActionMenuButtonModes\n} & BaseProps<HTMLDivElement>\n\ntype ActionMenuContextType = {\n  size?: ActionMenuSizes\n  setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes | undefined>>\n  onMenuToggle?: () => void\n}\n\nconst ActionMenuContext = React.createContext<ActionMenuContextType>({})\n\nexport const useActionMenuContext = (): ActionMenuContextType => {\n  return React.useContext(ActionMenuContext)\n}\n\ntype ActionMenuProviderProps = ActionMenuProps & Pick<ActionMenuContextType, 'onMenuToggle'>\n\nexport const ActionMenuProvider: React.FC<ActionMenuProviderProps> = ({size, children, onMenuToggle}) => {\n  const [currentSize, setSize] = useState(size)\n\n  return (\n    <ActionMenuContext.Provider value={{size: currentSize, setSize, onMenuToggle}}>\n      {children}\n    </ActionMenuContext.Provider>\n  )\n}\n\nconst _ActionMenuRoot = memo(\n  ({\n    id,\n    children,\n    'data-testid': testId,\n    disabled,\n    open = false,\n    selectionVariant = 'none',\n    menuAlignment = 'end',\n    size = 'medium',\n    menuSide,\n    onSelect,\n    mode = 'default',\n  }: ActionMenuProps) => {\n    const [showMenu, setShowMenu] = useState(open)\n    const floatingElementRef = useRef<HTMLUListElement>(null)\n    const anchorElementRef = useRef<HTMLButtonElement>(null)\n    const instanceId = useId(id)\n\n    useOnClickOutside(floatingElementRef, () => setShowMenu(false), anchorElementRef)\n\n    const closeMenuCallback = useCallback(() => {\n      setShowMenu(false)\n    }, [])\n\n    useKeyboardEscape(closeMenuCallback)\n\n    const toggleMenu = useCallback(() => {\n      setShowMenu(!showMenu)\n    }, [showMenu])\n\n    const handleOnSelect = useCallback(\n      (newValue: string) => {\n        if (onSelect) onSelect(newValue)\n        toggleMenu()\n      },\n      [onSelect, toggleMenu],\n    )\n\n    const handleItemSelection = useCallback(\n      (newValue: string) => {\n        handleOnSelect(newValue)\n        toggleMenu()\n        anchorElementRef.current?.focus()\n      },\n      [handleOnSelect, toggleMenu, anchorElementRef],\n    )\n\n    useEffect(() => {\n      if (showMenu && floatingElementRef.current) {\n        const floatingElement = floatingElementRef.current\n        const isSplitLayout = mode === 'split-button'\n        const splitLayoutFilter = isSplitLayout ? element => element.tagName === 'A' : undefined\n\n        focusZone(floatingElementRef.current, {\n          bindKeys: FocusKeys.ArrowVertical,\n          focusableElementFilter: splitLayoutFilter,\n          focusInStrategy: isSplitLayout ? 'first' : undefined,\n        })\n\n        // enter selects item\n        floatingElement.addEventListener('keydown', event => {\n          if (event.key === 'Enter') {\n            const target = event.target as HTMLElement\n\n            // Get the proper element containing the data-value\n            const targetElement = target.tagName === 'A' ? target.closest('li') : target\n\n            if (!targetElement || targetElement.getAttribute('aria-disabled') === 'true') return\n\n            const value = targetElement.getAttribute('data-value')\n            if (value) {\n              handleOnSelect(value)\n              setShowMenu(false)\n              setTimeout(() => {\n                anchorElementRef.current?.focus()\n              }, 10)\n            }\n          }\n        })\n\n        const targetSelector = isSplitLayout ? 'a' : 'li'\n\n        // focusses first item\n        const firstItem = floatingElementRef.current.querySelector(targetSelector)\n        if (firstItem) {\n          setTimeout(() => {\n            firstItem.focus()\n          }, 10)\n        }\n\n        const lastItem =\n          floatingElement.querySelectorAll(targetSelector)[floatingElement.querySelectorAll(targetSelector).length - 1]\n        lastItem.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'ArrowDown') {\n            keyboardEvent.preventDefault()\n            firstItem?.focus()\n          }\n        })\n\n        firstItem?.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'ArrowUp') {\n            keyboardEvent.preventDefault()\n            lastItem.focus()\n          }\n        })\n\n        //on escape refocus\n        floatingElement.addEventListener('keydown', (event: Event) => {\n          const keyboardEvent = event as KeyboardEvent\n          if (keyboardEvent.key === 'Escape') {\n            anchorElementRef.current?.focus()\n          }\n        })\n      }\n    }, [showMenu, floatingElementRef, mode, handleItemSelection, toggleMenu, handleOnSelect])\n\n    // Calculate the position of the menu\n    const {position} = useAnchoredPosition(\n      {\n        floatingElementRef,\n        anchorElementRef,\n        align: menuAlignment,\n        allowOutOfBounds: true,\n        side: menuSide,\n      },\n      [showMenu],\n    )\n\n    const {Button: SelectButton, Overlay: SelectOverlay} = Children.toArray(children).reduce<{\n      Button?: ReactElement<ActionMenuButtonProps>\n      Overlay?: ReactElement<ActionMenuOverlayProps>\n    }>((acc, child) => {\n      if (isValidElement<ActionMenuButtonProps>(child) && child.type === ActionMenuButton) {\n        acc.Button = cloneElement(child, {\n          ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n          className: clsx(child.props.className, styles[`ActionMenu__button--${mode}`], showMenu),\n          menuOpen: showMenu,\n          disabled,\n          id: `${instanceId}-button`,\n          size,\n          _mode: mode,\n        })\n      } else if (isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay) {\n        acc.Overlay = cloneElement(child, {\n          ref: floatingElementRef as React.RefObject<HTMLUListElement>,\n          className: clsx(\n            styles.ActionMenu__menu,\n            position && styles['ActionMenu__menu--visible'],\n            position && styles[`ActionMenu__menu--pos-${position.anchorSide}`],\n            styles[`ActionMenu__menu--${size}`],\n            mode === 'split-button' && 'ActionMenu__menu--split',\n          ),\n          style: {\n            top: `${position?.top ?? 0}px`,\n            left: `${position?.left ?? 0}px`,\n          },\n          id: `${instanceId}-menu`,\n          children: Children.map(child.props.children, item => {\n            if (isValidElement<ActionMenuItemBaseProps>(item)) {\n              return cloneElement(item, {\n                handler: handleItemSelection,\n                type: mode === 'split-button' ? 'link' : selectionVariant,\n              })\n            }\n            return item\n          }),\n        })\n      }\n      return acc\n    }, {})\n\n    return (\n      <ActionMenuProvider size={size} onMenuToggle={toggleMenu}>\n        <div\n          id={instanceId}\n          className={clsx(styles.ActionMenu, disabled && styles['ActionMenu--disabled'])}\n          data-testid={testId || testIds.root}\n        >\n          {SelectButton}\n          {showMenu ? SelectOverlay : null}\n        </div>\n      </ActionMenuProvider>\n    )\n  },\n)\n\ntype ActionMenuButtonProps = PropsWithChildren<\n  BaseProps<HTMLButtonElement> & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onClick'>\n> & {\n  as?: ButtonProps<'a'>['as']\n  href?: ButtonProps<'a'>['href']\n  menuOpen?: boolean\n  'data-testid'?: string\n  size?: ActionMenuSizes\n  _mode?: ActionMenuButtonModes\n  variant?: ButtonProps<'a'>['variant']\n  leadingVisual?: ButtonProps<'a'>['leadingVisual']\n}\n\nconst ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(\n  (\n    {\n      as,\n      href,\n      id,\n      children,\n      className,\n      'data-testid': testId,\n      disabled,\n      menuOpen,\n      size,\n      _mode = 'default',\n      onClick,\n      leadingVisual,\n      variant,\n      ...props\n    },\n    ref,\n  ) => {\n    const {onMenuToggle} = useActionMenuContext()\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event)\n\n        if (!event.defaultPrevented) {\n          onMenuToggle?.()\n        }\n      },\n      [onClick, onMenuToggle],\n    )\n\n    if (_mode === 'split-button') {\n      const splitButtonVariant = variant ?? 'primary'\n\n      return (\n        <div className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}>\n          <Button\n            as={as}\n            href={href}\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles[`ActionMenu__innerButton--${splitButtonVariant}`],\n              styles[`ActionMenu__innerButton--${size}`],\n              disabled && styles['ActionMenu__innerButton--disabled'],\n            )}\n            variant={splitButtonVariant}\n            aria-disabled={disabled}\n            data-testid={testId || testIds.button}\n            size={size}\n            leadingVisual={leadingVisual}\n            onClick={onClick}\n            {...props}\n          >\n            <span className={styles['ActionMenu__button-text']}>{children}</span>\n          </Button>\n          <Button\n            ref={ref}\n            id={id}\n            as=\"button\"\n            className={styles['ActionMenu__innerButton--split-button']}\n            variant={splitButtonVariant}\n            aria-haspopup=\"true\"\n            aria-label=\"Menu\"\n            size={size}\n            aria-expanded={menuOpen ? 'true' : 'false'}\n            onClick={onMenuToggle}\n            disabled={disabled}\n          >\n            <ChevronDownIcon className={styles['ActionMenu__inner-button-dropdown-icon']} />\n          </Button>\n        </div>\n      )\n    }\n\n    return (\n      <Button\n        ref={ref}\n        id={id}\n        className={clsx(styles.ActionMenu__button, styles[`ActionMenu__button--${size}`], className)}\n        aria-haspopup=\"true\"\n        aria-expanded={menuOpen ? 'true' : 'false'}\n        disabled={disabled}\n        data-testid={testId || testIds.button}\n        size={size}\n        variant={variant}\n        leadingVisual={leadingVisual}\n        trailingVisual={<ChevronDownIcon />}\n        onClick={handleClick}\n        {...props}\n      >\n        <span className={styles['ActionMenu__button-text']}>{children}</span>\n      </Button>\n    )\n  },\n)\n\ntype ActionMenuItemBaseProps = {\n  handler?: (newValue: string) => void\n  type?: 'none' | 'single' | 'link'\n  disabled?: boolean\n  size?: ActionMenuSizes\n  leadingVisual?: React.ReactElement | React.ReactNode | Icon\n} & PropsWithChildren<React.HTMLProps<HTMLLIElement>>\n\ntype ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {\n  as: 'a'\n} & Omit<React.HTMLProps<HTMLAnchorElement>, keyof ActionMenuItemBaseProps | 'as'>\n\n// Type for when 'as' is not set or is anything other than 'a'\ntype ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {\n  as?: string\n  value?: string\n  selected?: boolean\n} & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps | 'as'>\n\nconst roleTypeMap = {\n  none: 'menuitem',\n  single: 'menuitemradio',\n  link: 'menuitem',\n}\n\nconst ActionMenuItem = ({\n  as,\n  children,\n  className,\n  disabled,\n  handler,\n  selected,\n  type,\n  value,\n  onClick,\n  onKeyDown,\n  leadingVisual: LeadingVisual,\n  ...props\n}: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => {\n  const {size} = useActionMenuContext()\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLLIElement>) => {\n      onClick?.(e)\n\n      if (!disabled) {\n        handler?.(String(value))\n      }\n    },\n    [handler, value, disabled, onClick],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLLIElement>) => {\n      onKeyDown?.(e)\n\n      if (!disabled && e.key === 'Enter') {\n        handler?.(String(value))\n      }\n    },\n    [handler, value, disabled, onKeyDown],\n  )\n\n  const liProps = useMemo<React.HTMLProps<HTMLLIElement> & {'data-value': unknown}>(\n    () => ({\n      className: clsx(\n        styles.ActionMenu__item,\n        type === 'single' && styles[`ActionMenu__item--selection-type-${type}`],\n        size && styles[`ActionMenu__item--${size}`],\n        className,\n      ),\n      role: roleTypeMap[type || 'single'],\n      'aria-disabled': disabled,\n      tabIndex: -1,\n      'data-value': value,\n      ...props,\n    }),\n    [props, type, size, className, disabled, value],\n  )\n\n  const contents = useMemo(\n    () => (\n      <>\n        {React.isValidElement<{width?: number; height?: number}>(LeadingVisual)\n          ? React.cloneElement(LeadingVisual, {\n              width: LeadingVisual.props.width || 20,\n              height: LeadingVisual.props.width || 20,\n            })\n          : null}\n        {type === 'single' && (\n          <span className={styles['ActionMenu__item-leadingVisual']}>\n            {selected && (\n              <CheckIcon\n                className={clsx(styles['ActionMenu__item-icon'], disabled && styles['ActionMenu__item-icon--disabled'])}\n                size={16}\n              />\n            )}\n          </span>\n        )}\n\n        <span className={styles['ActionMenu__item-text']}>\n          <Text\n            variant={disabled ? 'muted' : 'default'}\n            size={size === 'medium' ? '200' : '100'}\n            className={clsx(disabled && styles['ActionMenu__item-content--disabled'])}\n          >\n            {children}\n          </Text>\n        </span>\n      </>\n    ),\n    [LeadingVisual, children, selected, disabled, size, type],\n  )\n\n  if (as === 'a') {\n    return (\n      <li\n        // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n        role=\"menuitem\"\n        {...liProps}\n        // Intentionally not calling handle[Click/KeyDown] here so as to not call the handler\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        <a\n          className={clsx(styles['ActionMenu__item-anchor'], disabled && styles['ActionMenu__item--disabled'])}\n          href={props.href}\n        >\n          {contents}\n        </a>\n      </li>\n    )\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n    <li\n      // This role will be overridden by the role prop in `liProps`. It's just here to keep the linter happy\n      role=\"menuitem\"\n      {...liProps}\n      aria-checked={type === 'none' ? undefined : selected ? 'true' : 'false'}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n    >\n      {contents}\n    </li>\n  )\n}\n\ntype ActionMenuOverlayProps = PropsWithChildren<\n  BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>\n> & {\n  'aria-label': string\n  id?: string\n  'data-testid'?: string\n  menuOpen?: boolean\n  style?: React.CSSProperties\n}\n\nconst ActionMenuOverlay = forwardRef<HTMLUListElement, ActionMenuOverlayProps>(\n  ({children, className, 'data-testid': testId, menuOpen, ...rest}, ref) => {\n    const {colorMode: defaultColorMode} = useTheme()\n\n    const colorMode = className?.includes('ActionMenu__menu--split') ? 'light' : defaultColorMode\n\n    return (\n      <ThemeProvider colorMode={colorMode}>\n        <ul ref={ref} className={clsx(className)} role=\"menu\" data-testid={testId || testIds.list} {...rest}>\n          {children}\n        </ul>\n      </ThemeProvider>\n    )\n  },\n)\n\n/**\n * Use ActionMenu to display a list of actions or selections that expand through a trigger button.\n * @see https://primer.style/brand/components/ActionMenu\n */\nexport const ActionMenu = Object.assign(_ActionMenuRoot, {\n  Button: ActionMenuButton,\n  Item: ActionMenuItem,\n  Overlay: ActionMenuOverlay,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/AnchorNav/AnchorNav.js

@@ -1,10 +1,10 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../hooks/useId.js";
 import { Text as n } from "../Text/Text.js";
-import { ChevronDownIcon as r, ChevronUpIcon as i } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
-import { Button as a } from "../Button/Button.js";
-import { useWindowSize as o } from "../hooks/useWindowSize.js";
-import { useKeyboardEscape as s } from "../hooks/useKeyboardEscape.js";
+import { Button as r } from "../Button/Button.js";
+import { useKeyboardEscape as i } from "../hooks/useKeyboardEscape.js";
+import { ChevronDownIcon as a, ChevronUpIcon as o } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { useWindowSize as s } from "../hooks/useWindowSize.js";
 import c from "./AnchorNav.module.js";
 import { useExpandedMenu as l } from "./useExpandedMenu.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes-98imfMkq.css';/* empty css                                                                                                        */
@@ -29,15 +29,15 @@ var v = {
 		return `${this.root}-nav-spacer`;
 	}
 };
-function y({ children: a, enableDefaultBgColor: y = !1, hideUntilSticky: C = !1, ...w }) {
-	let [T, E] = h(!1), [D, ee] = h(!1), [O, k] = h(), [A, j] = h(), [M, N] = h(), [P, F] = h(!1), [I, L] = h(0), R = m(null), z = m(null), B = m(null), V = m(null), { isLarge: H } = o(), U = t(), W = d(() => E(!1), [E]), G = d(() => E(!T), [T]), K = p(() => u.Children.toArray(a).filter((e) => u.isValidElement(e) && typeof e.type != "string"), [a]);
+function y({ children: r, enableDefaultBgColor: y = !1, hideUntilSticky: C = !1, ...w }) {
+	let [T, E] = h(!1), [D, ee] = h(!1), [O, k] = h(), [A, j] = h(), [M, N] = h(), [P, F] = h(!1), [I, L] = h(0), R = m(null), z = m(null), B = m(null), V = m(null), { isLarge: H } = s(), U = t(), W = d(() => E(!1), [E]), G = d(() => E(!T), [T]), K = p(() => u.Children.toArray(r).filter((e) => u.isValidElement(e) && typeof e.type != "string"), [r]);
 	f(() => {
 		M === void 0 && A && N(A.boundingClientRect.y + window.scrollY);
 	}, [M, A]);
 	let q = ([e]) => {
 		j(e);
 	};
-	s(W), l(T, B, V, !H, W), f(() => {
+	i(W), l(T, B, V, !H, W), f(() => {
 		if (R.current) {
 			let e = R.current.offsetHeight;
 			L(e);
@@ -104,7 +104,7 @@ function y({ children: a, enableDefaultBgColor: y = !1, hideUntilSticky: C = !1,
 						"aria-controls": U,
 						"data-testid": v.menuButton,
 						children: [
-							g(T ? i : r, {
+							g(T ? o : a, {
 								size: 16,
 								className: c["AnchorNav-menu-button-arrow"],
 								fill: "currentcolor"
@@ -145,8 +145,8 @@ function y({ children: a, enableDefaultBgColor: y = !1, hideUntilSticky: C = !1,
 		})]
 	});
 }
-function b({ alignment: t = "start", children: r, href: i, isActive: a, toggleMenuCallback: s, prefersReducedMotion: l, intersectionOptions: u = { rootMargin: "middle" }, updateCurrentActiveNav: p, ...m }) {
-	let { isLarge: _ } = o(), [v, y] = h(), b = /^#/.test(i), x = !!v?.isIntersecting, S = ([e]) => {
+function b({ alignment: t = "start", children: r, href: i, isActive: a, toggleMenuCallback: o, prefersReducedMotion: l, intersectionOptions: u = { rootMargin: "middle" }, updateCurrentActiveNav: p, ...m }) {
+	let { isLarge: _ } = s(), [v, y] = h(), b = /^#/.test(i), x = !!v?.isIntersecting, S = ([e]) => {
 		y(e);
 	};
 	f(() => {
@@ -170,8 +170,8 @@ function b({ alignment: t = "start", children: r, href: i, isActive: a, toggleMe
 		p
 	]);
 	let C = d(() => {
-		s && !_ && s();
-	}, [_, s]);
+		o && !_ && o();
+	}, [_, o]);
 	return /* @__PURE__ */ g("a", {
 		className: e(c["AnchorNav-link"], c[`AnchorNav-link--${t}`], x && c["AnchorNav-link--is-active"]),
 		href: b ? i : `#${i}`,
@@ -187,26 +187,26 @@ function b({ alignment: t = "start", children: r, href: i, isActive: a, toggleMe
 		})
 	});
 }
-function x({ children: t, href: n, variant: r = "secondary", size: i = "small", ...o }) {
-	return /* @__PURE__ */ g(a, {
+function x({ children: t, href: n, variant: i = "secondary", size: a = "small", ...o }) {
+	return /* @__PURE__ */ g(r, {
 		as: "a",
-		variant: r,
+		variant: i,
 		className: e(c["AnchorNav-action"]),
 		href: n,
 		"data-testid": v.action,
-		size: i,
+		size: a,
 		...o,
 		children: t
 	});
 }
-function S({ children: t, href: n, variant: r = "secondary", size: i = "small", ...o }) {
-	return /* @__PURE__ */ g(a, {
+function S({ children: t, href: n, variant: i = "secondary", size: a = "small", ...o }) {
+	return /* @__PURE__ */ g(r, {
 		as: "a",
-		variant: r,
+		variant: i,
 		className: e(c["AnchorNav-action"]),
 		href: n,
 		"data-testid": v.secondaryAction,
-		size: i,
+		size: a,
 		...o,
 		children: t
 	});

package/esm/Avatar/Avatar.module-DUQdD7On.css

@@ -0,0 +1 @@
+.Primer_Brand__Avatar-module__Avatar___VP3QQ{width:var(--base-size-40);height:var(--base-size-40);display:inline-block;overflow:hidden}.Primer_Brand__Avatar-module__Avatar--shape-circle___Yz6Zj{border-radius:var(--brand-borderRadius-full)}.Primer_Brand__Avatar-module__Avatar--shape-square___f2Rrz{border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Avatar-module__Avatar__image___ImYTc{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}.Primer_Brand__Avatar-module__Avatar--size-32___P1cC2{width:var(--base-size-32);height:var(--base-size-32)}.Primer_Brand__Avatar-module__Avatar--size-40___fFZWc{width:var(--base-size-40);height:var(--base-size-40)}.Primer_Brand__Avatar-module__Avatar--size-48___ZrSSm{width:var(--base-size-48);height:var(--base-size-48)}.Primer_Brand__Avatar-module__Avatar--size-64___QMrC7{width:var(--base-size-64);height:var(--base-size-64)}.Primer_Brand__Avatar-module__Avatar--size-80___1NIGx{width:var(--base-size-80);height:var(--base-size-80)}.Primer_Brand__Avatar-module__Avatar-narrow--size-32___Dl3Q7{width:var(--base-size-32);height:var(--base-size-32)}.Primer_Brand__Avatar-module__Avatar-narrow--size-40___8KQIy{width:var(--base-size-40);height:var(--base-size-40)}.Primer_Brand__Avatar-module__Avatar-narrow--size-48___gN_Ov{width:var(--base-size-48);height:var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__Avatar-module__Avatar-regular--size-32___Keys0{width:var(--base-size-32);height:var(--base-size-32)}.Primer_Brand__Avatar-module__Avatar-regular--size-40___bajRu{width:var(--base-size-40);height:var(--base-size-40)}.Primer_Brand__Avatar-module__Avatar-regular--size-48___f2itY{width:var(--base-size-48);height:var(--base-size-48)}.Primer_Brand__Avatar-module__Avatar-regular--size-64___6_jqI{width:var(--base-size-64);height:var(--base-size-64)}.Primer_Brand__Avatar-module__Avatar-regular--size-80___q7H8m{width:var(--base-size-80);height:var(--base-size-80)}}@media screen and (width>=80rem){.Primer_Brand__Avatar-module__Avatar-wide--size-32___g7fYr{width:var(--base-size-32);height:var(--base-size-32)}.Primer_Brand__Avatar-module__Avatar-wide--size-40___48LVl{width:var(--base-size-40);height:var(--base-size-40)}.Primer_Brand__Avatar-module__Avatar-wide--size-48___cwlSk{width:var(--base-size-48);height:var(--base-size-48)}.Primer_Brand__Avatar-module__Avatar-wide--size-64___w72xb{width:var(--base-size-64);height:var(--base-size-64)}.Primer_Brand__Avatar-module__Avatar-wide--size-80___MptXL{width:var(--base-size-80);height:var(--base-size-80)}}

package/esm/Avatar/Avatar.module.js

@@ -1,4 +1,4 @@
-import './Avatar.module-DzfWmLu4.css';var e = {
+import './Avatar.module-DUQdD7On.css';var e = {
 	Avatar: "Primer_Brand__Avatar-module__Avatar___VP3QQ",
 	"Avatar--shape-circle": "Primer_Brand__Avatar-module__Avatar--shape-circle___Yz6Zj",
 	"Avatar--shape-square": "Primer_Brand__Avatar-module__Avatar--shape-square___f2Rrz",

package/esm/Avatar/Avatar.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.module.js","names":[],"sources":["../../src/Avatar/Avatar.module.css"],"sourcesContent":[".Avatar {\n  display: inline-block;\n  overflow: hidden;\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.Avatar--shape-circle {\n  border-radius: var(--brand-borderRadius-full);\n}\n\n.Avatar--shape-square {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Avatar__image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.Avatar--size-32 {\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n}\n\n.Avatar--size-40 {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.Avatar--size-48 {\n  width: var(--base-size-48);\n  height: var(--base-size-48);\n}\n\n.Avatar--size-64 {\n  width: var(--base-size-64);\n  height: var(--base-size-64);\n}\n\n.Avatar--size-80 {\n  width: var(--base-size-80);\n  height: var(--base-size-80);\n}\n\n.Avatar-narrow--size-32 {\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n}\n\n.Avatar-narrow--size-40 {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.Avatar-narrow--size-48 {\n  width: var(--base-size-48);\n  height: var(--base-size-48);\n}\n\n@media screen and (min-width: 48rem) {\n  .Avatar-regular--size-32 {\n    width: var(--base-size-32);\n    height: var(--base-size-32);\n  }\n\n  .Avatar-regular--size-40 {\n    width: var(--base-size-40);\n    height: var(--base-size-40);\n  }\n\n  .Avatar-regular--size-48 {\n    width: var(--base-size-48);\n    height: var(--base-size-48);\n  }\n\n  .Avatar-regular--size-64 {\n    width: var(--base-size-64);\n    height: var(--base-size-64);\n  }\n\n  .Avatar-regular--size-80 {\n    width: var(--base-size-80);\n    height: var(--base-size-80);\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .Avatar-wide--size-32 {\n    width: var(--base-size-32);\n    height: var(--base-size-32);\n  }\n\n  .Avatar-wide--size-40 {\n    width: var(--base-size-40);\n    height: var(--base-size-40);\n  }\n\n  .Avatar-wide--size-48 {\n    width: var(--base-size-48);\n    height: var(--base-size-48);\n  }\n\n  .Avatar-wide--size-64 {\n    width: var(--base-size-64);\n    height: var(--base-size-64);\n  }\n\n  .Avatar-wide--size-80 {\n    width: var(--base-size-80);\n    height: var(--base-size-80);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Avatar.module.js","names":[],"sources":["../../src/Avatar/Avatar.module.css"],"sourcesContent":[".Avatar {\n  display: inline-block;\n  overflow: hidden;\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.Avatar--shape-circle {\n  border-radius: var(--brand-borderRadius-full);\n}\n\n.Avatar--shape-square {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Avatar__image {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.Avatar--size-32 {\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n}\n\n.Avatar--size-40 {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.Avatar--size-48 {\n  width: var(--base-size-48);\n  height: var(--base-size-48);\n}\n\n.Avatar--size-64 {\n  width: var(--base-size-64);\n  height: var(--base-size-64);\n}\n\n.Avatar--size-80 {\n  width: var(--base-size-80);\n  height: var(--base-size-80);\n}\n\n.Avatar-narrow--size-32 {\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n}\n\n.Avatar-narrow--size-40 {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.Avatar-narrow--size-48 {\n  width: var(--base-size-48);\n  height: var(--base-size-48);\n}\n\n@media screen and (min-width: 48rem) {\n  .Avatar-regular--size-32 {\n    width: var(--base-size-32);\n    height: var(--base-size-32);\n  }\n\n  .Avatar-regular--size-40 {\n    width: var(--base-size-40);\n    height: var(--base-size-40);\n  }\n\n  .Avatar-regular--size-48 {\n    width: var(--base-size-48);\n    height: var(--base-size-48);\n  }\n\n  .Avatar-regular--size-64 {\n    width: var(--base-size-64);\n    height: var(--base-size-64);\n  }\n\n  .Avatar-regular--size-80 {\n    width: var(--base-size-80);\n    height: var(--base-size-80);\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .Avatar-wide--size-32 {\n    width: var(--base-size-32);\n    height: var(--base-size-32);\n  }\n\n  .Avatar-wide--size-40 {\n    width: var(--base-size-40);\n    height: var(--base-size-40);\n  }\n\n  .Avatar-wide--size-48 {\n    width: var(--base-size-48);\n    height: var(--base-size-48);\n  }\n\n  .Avatar-wide--size-64 {\n    width: var(--base-size-64);\n    height: var(--base-size-64);\n  }\n\n  .Avatar-wide--size-80 {\n    width: var(--base-size-80);\n    height: var(--base-size-80);\n  }\n}\n"],"mappings":""}

package/esm/BreakoutBanner/{BreakoutBanner.module-DGBSJFNJ.css → BreakoutBanner.module-gfmzcUSU.css}

@@ -1 +1 @@
-.Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la{max-width:var(--brand-breakpoint-xlarge);border-radius:var(--brand-borderRadius-large);background-repeat:no-repeat;background-color:var(--brand-BreakoutBanner-narrow-background-color,var(--brand-BreakoutBanner-background-color));background-image:var(--brand-BreakoutBanner-narrow-background-image-src,var(--brand-BreakoutBanner-background-image-src));background-size:var(--brand-BreakoutBanner-narrow-background-image-size,var(--brand-BreakoutBanner-background-image-size));background-position:50%;background-position:var(--brand-BreakoutBanner-narrow-background-image-position,var(--brand-BreakoutBanner-background-image-position,center));width:100%;margin:0 auto;display:flex;position:relative}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-container___JC9dt{border-radius:var(--brand-borderRadius-xlarge);padding:var(--base-size-40) var(--base-size-24) var(--base-size-128);z-index:1;box-sizing:border-box;width:100%}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-content___gZsEk{flex-direction:column;align-items:flex-start;display:flex}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-container--background___Uex_J{background:var(--brand-BreakoutBanner-bgColor)}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-content--center___oB7l0{text-align:center;align-items:center}.Primer_Brand__BreakoutBanner-module__BreakoutBanner__heading___9zftT{max-width:20ch}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-description___nFBHL{max-width:54ch;margin-block-start:var(--base-size-16)}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-linkGroup___g_h1l{margin-block-start:var(--base-size-48)}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-leadingVisual___GRbZf{margin-block-end:var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la{background-color:var(--brand-BreakoutBanner-regular-background-color,var(--brand-BreakoutBanner-background-color));background-image:var(--brand-BreakoutBanner-regular-background-image-src,var(--brand-BreakoutBanner-background-image-src));background-size:var(--brand-BreakoutBanner-regular-background-image-size,var(--brand-BreakoutBanner-background-image-size));background-position:var(--brand-BreakoutBanner-regular-background-image-position,var(--brand-BreakoutBanner-background-image-position))}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-container___JC9dt{padding:var(--base-size-48)}}@media screen and (width>=80rem){.Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la{background-color:var(--brand-BreakoutBanner-wide-background-color,var(--brand-BreakoutBanner-background-color));background-image:var(--brand-BreakoutBanner-wide-background-image-src,var(--brand-BreakoutBanner-background-image-src));background-size:var(--brand-BreakoutBanner-wide-background-image-size,var(--brand-BreakoutBanner-background-image-size));background-position:var(--brand-BreakoutBanner-wide-background-image-position,var(--brand-BreakoutBanner-background-image-position))}}
+.Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la{max-width:var(--brand-breakpoint-xlarge);border-radius:var(--brand-borderRadius-large);background-repeat:no-repeat;background-color:var(--brand-BreakoutBanner-narrow-background-color,var(--brand-BreakoutBanner-background-color));background-image:var(--brand-BreakoutBanner-narrow-background-image-src,var(--brand-BreakoutBanner-background-image-src));background-size:var(--brand-BreakoutBanner-narrow-background-image-size,var(--brand-BreakoutBanner-background-image-size));background-position:50%;background-position:var(--brand-BreakoutBanner-narrow-background-image-position,var(--brand-BreakoutBanner-background-image-position,center));width:100%;margin:0 auto;display:flex;position:relative}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-container___JC9dt{border-radius:var(--brand-borderRadius-xlarge);padding:var(--base-size-40) var(--base-size-24) var(--base-size-128);z-index:1;box-sizing:border-box;width:100%}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-content___gZsEk{flex-direction:column;align-items:flex-start;display:flex}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-container--background___Uex_J{background:var(--brand-BreakoutBanner-bgColor)}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-content--center___oB7l0{text-align:center;align-items:center}.Primer_Brand__BreakoutBanner-module__BreakoutBanner__heading___9zftT{max-width:20ch}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-description___nFBHL{max-width:54ch;margin-block-start:var(--base-size-16)}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-linkGroup___g_h1l{margin-block-start:var(--base-size-48)}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-leadingVisual___GRbZf{margin-block-end:var(--base-size-48)}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-leadingVisual___GRbZf img,.Primer_Brand__BreakoutBanner-module__BreakoutBanner-leadingVisual___GRbZf picture{display:block}@media screen and (width>=48rem){.Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la{background-color:var(--brand-BreakoutBanner-regular-background-color,var(--brand-BreakoutBanner-background-color));background-image:var(--brand-BreakoutBanner-regular-background-image-src,var(--brand-BreakoutBanner-background-image-src));background-size:var(--brand-BreakoutBanner-regular-background-image-size,var(--brand-BreakoutBanner-background-image-size));background-position:var(--brand-BreakoutBanner-regular-background-image-position,var(--brand-BreakoutBanner-background-image-position))}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-container___JC9dt{padding:var(--base-size-48)}}@media screen and (width>=80rem){.Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la{background-color:var(--brand-BreakoutBanner-wide-background-color,var(--brand-BreakoutBanner-background-color));background-image:var(--brand-BreakoutBanner-wide-background-image-src,var(--brand-BreakoutBanner-background-image-src));background-size:var(--brand-BreakoutBanner-wide-background-image-size,var(--brand-BreakoutBanner-background-image-size));background-position:var(--brand-BreakoutBanner-wide-background-image-position,var(--brand-BreakoutBanner-background-image-position))}}

package/esm/BreakoutBanner/BreakoutBanner.module.js

@@ -1,4 +1,4 @@
-import './BreakoutBanner.module-DGBSJFNJ.css';var e = {
+import './BreakoutBanner.module-gfmzcUSU.css';var e = {
 	BreakoutBanner: "Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la",
 	"BreakoutBanner-container": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-container___JC9dt",
 	"BreakoutBanner-content": "Primer_Brand__BreakoutBanner-module__BreakoutBanner-content___gZsEk",

package/esm/BreakoutBanner/BreakoutBanner.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreakoutBanner.module.js","names":[],"sources":["../../src/BreakoutBanner/BreakoutBanner.module.css"],"sourcesContent":[".BreakoutBanner {\n  position: relative;\n  margin: 0 auto;\n  display: flex;\n  max-width: var(--brand-breakpoint-xlarge);\n  width: 100%;\n  border-radius: var(--brand-borderRadius-large);\n  background-repeat: no-repeat;\n  background-color: var(--brand-BreakoutBanner-narrow-background-color, var(--brand-BreakoutBanner-background-color));\n  background-image: var(\n    --brand-BreakoutBanner-narrow-background-image-src,\n    var(--brand-BreakoutBanner-background-image-src)\n  );\n  background-size: var(\n    --brand-BreakoutBanner-narrow-background-image-size,\n    var(--brand-BreakoutBanner-background-image-size)\n  );\n\n  background-position: var(\n    --brand-BreakoutBanner-narrow-background-image-position,\n    var(--brand-BreakoutBanner-background-image-position, center)\n  );\n}\n\n.BreakoutBanner-container {\n  border-radius: var(--brand-borderRadius-xlarge);\n  padding: var(--base-size-40) var(--base-size-24) var(--base-size-128);\n  z-index: 1;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.BreakoutBanner-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.BreakoutBanner-container--background {\n  background: var(--brand-BreakoutBanner-bgColor);\n}\n\n.BreakoutBanner-content--center {\n  align-items: center;\n  text-align: center;\n}\n\n.BreakoutBanner__heading {\n  max-width: 20ch;\n}\n\n.BreakoutBanner-description {\n  max-width: 54ch;\n  margin-block-start: var(--base-size-16);\n}\n\n.BreakoutBanner-linkGroup {\n  margin-block-start: var(--base-size-48);\n}\n\n.BreakoutBanner-leadingVisual {\n  margin-block-end: var(--base-size-48);\n}\n\n/* Regular */\n@media screen and (min-width: 48rem) {\n  .BreakoutBanner {\n    background-color: var(\n      --brand-BreakoutBanner-regular-background-color,\n      var(--brand-BreakoutBanner-background-color)\n    );\n    background-image: var(\n      --brand-BreakoutBanner-regular-background-image-src,\n      var(--brand-BreakoutBanner-background-image-src)\n    );\n    background-size: var(\n      --brand-BreakoutBanner-regular-background-image-size,\n      var(--brand-BreakoutBanner-background-image-size)\n    );\n    background-position: var(\n      --brand-BreakoutBanner-regular-background-image-position,\n      var(--brand-BreakoutBanner-background-image-position)\n    );\n  }\n\n  .BreakoutBanner-container {\n    padding: var(--base-size-48);\n  }\n}\n\n/* Wide */\n@media screen and (min-width: 80rem) {\n  .BreakoutBanner {\n    background-color: var(--brand-BreakoutBanner-wide-background-color, var(--brand-BreakoutBanner-background-color));\n    background-image: var(\n      --brand-BreakoutBanner-wide-background-image-src,\n      var(--brand-BreakoutBanner-background-image-src)\n    );\n    background-size: var(\n      --brand-BreakoutBanner-wide-background-image-size,\n      var(--brand-BreakoutBanner-background-image-size)\n    );\n\n    background-position: var(\n      --brand-BreakoutBanner-wide-background-image-position,\n      var(--brand-BreakoutBanner-background-image-position)\n    );\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"BreakoutBanner.module.js","names":[],"sources":["../../src/BreakoutBanner/BreakoutBanner.module.css"],"sourcesContent":[".BreakoutBanner {\n  position: relative;\n  margin: 0 auto;\n  display: flex;\n  max-width: var(--brand-breakpoint-xlarge);\n  width: 100%;\n  border-radius: var(--brand-borderRadius-large);\n  background-repeat: no-repeat;\n  background-color: var(--brand-BreakoutBanner-narrow-background-color, var(--brand-BreakoutBanner-background-color));\n  background-image: var(\n    --brand-BreakoutBanner-narrow-background-image-src,\n    var(--brand-BreakoutBanner-background-image-src)\n  );\n  background-size: var(\n    --brand-BreakoutBanner-narrow-background-image-size,\n    var(--brand-BreakoutBanner-background-image-size)\n  );\n\n  background-position: var(\n    --brand-BreakoutBanner-narrow-background-image-position,\n    var(--brand-BreakoutBanner-background-image-position, center)\n  );\n}\n\n.BreakoutBanner-container {\n  border-radius: var(--brand-borderRadius-xlarge);\n  padding: var(--base-size-40) var(--base-size-24) var(--base-size-128);\n  z-index: 1;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.BreakoutBanner-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.BreakoutBanner-container--background {\n  background: var(--brand-BreakoutBanner-bgColor);\n}\n\n.BreakoutBanner-content--center {\n  align-items: center;\n  text-align: center;\n}\n\n.BreakoutBanner__heading {\n  max-width: 20ch;\n}\n\n.BreakoutBanner-description {\n  max-width: 54ch;\n  margin-block-start: var(--base-size-16);\n}\n\n.BreakoutBanner-linkGroup {\n  margin-block-start: var(--base-size-48);\n}\n\n.BreakoutBanner-leadingVisual {\n  margin-block-end: var(--base-size-48);\n}\n\n.BreakoutBanner-leadingVisual :is(img, picture) {\n  display: block;\n}\n\n/* Regular */\n@media screen and (min-width: 48rem) {\n  .BreakoutBanner {\n    background-color: var(\n      --brand-BreakoutBanner-regular-background-color,\n      var(--brand-BreakoutBanner-background-color)\n    );\n    background-image: var(\n      --brand-BreakoutBanner-regular-background-image-src,\n      var(--brand-BreakoutBanner-background-image-src)\n    );\n    background-size: var(\n      --brand-BreakoutBanner-regular-background-image-size,\n      var(--brand-BreakoutBanner-background-image-size)\n    );\n    background-position: var(\n      --brand-BreakoutBanner-regular-background-image-position,\n      var(--brand-BreakoutBanner-background-image-position)\n    );\n  }\n\n  .BreakoutBanner-container {\n    padding: var(--base-size-48);\n  }\n}\n\n/* Wide */\n@media screen and (min-width: 80rem) {\n  .BreakoutBanner {\n    background-color: var(--brand-BreakoutBanner-wide-background-color, var(--brand-BreakoutBanner-background-color));\n    background-image: var(\n      --brand-BreakoutBanner-wide-background-image-src,\n      var(--brand-BreakoutBanner-background-image-src)\n    );\n    background-size: var(\n      --brand-BreakoutBanner-wide-background-image-size,\n      var(--brand-BreakoutBanner-background-image-size)\n    );\n\n    background-position: var(\n      --brand-BreakoutBanner-wide-background-image-position,\n      var(--brand-BreakoutBanner-background-image-position)\n    );\n  }\n}\n"],"mappings":""}

package/esm/ButtonGroup/ButtonGroup.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import type { BaseProps } from '../component-helpers';
 import { ButtonProps } from '../Button';
+import { ActionMenuProps } from '../ActionMenu';
 export type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>;
+export type PrimerBrandActionMenuType = React.ReactElement<ActionMenuProps>;
 export type ButtonGroupProps = BaseProps<HTMLDivElement> & {
-    children: PrimerBrandButtonType[] | PrimerBrandButtonType;
+    children: Array<PrimerBrandButtonType | PrimerBrandActionMenuType> | PrimerBrandButtonType | PrimerBrandActionMenuType;
     buttonSize?: ButtonProps<'button' | 'a'>['size'];
     buttonsAs?: 'button' | 'a';
 };

package/esm/ButtonGroup/ButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAS,WAAW,EAAC,MAAM,WAAW,CAAA;AAG7C,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;AAEtG,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACzD,QAAQ,EAAE,qBAAqB,EAAE,GAAG,qBAAqB,CAAA;IACzD,UAAU,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,WAAW,sGAuBvB,CAAA"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAS,WAAW,EAAC,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAa,eAAe,EAAC,MAAM,eAAe,CAAA;AAGzD,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;AACtG,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAAA;AAE3E,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACzD,QAAQ,EAAE,KAAK,CAAC,qBAAqB,GAAG,yBAAyB,CAAC,GAAG,qBAAqB,GAAG,yBAAyB,CAAA;IACtH,UAAU,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,WAAW,sGA6CvB,CAAA"}