@primer/react-brand 0.77.1-rc.bd5b9efe → 0.78.0-rc.85e39cb4

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} 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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"}
+{"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 {IconButton, type IconButtonProps} from '../IconButton'\nimport {Text} from '../Text'\nimport {ThemeProvider, useTheme} from '../ThemeProvider'\nimport {useAnchoredPosition} from '../hooks/useAnchoredPosition'\nimport {useOnClickOutside} from '../hooks/useOnClickOutside'\nimport {useKeyboardEscape} from '../hooks/useKeyboardEscape'\nimport {\n  ActionMenuProvider,\n  useActionMenuContext,\n  type ActionMenuButtonModes as ActionMenuButtonMode,\n  type ActionMenuSizes as ActionMenuSize,\n} from './ActionMenuContext'\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 {ActionMenuButtonModes, ActionMenuProvider, ActionMenuSizes, useActionMenuContext} from './ActionMenuContext'\n\nexport type ActionMenuProps = {\n  /**\n   * The content of the ActionMenu. Must include an ActionMenu.Button or ActionMenu.IconButton and an ActionMenu.Overlay\n   */\n  children:\n    | ReactElement<ActionMenuButtonProps>\n    | ReactElement<ActionMenuIconButtonProps>\n    | ReactElement<ActionMenuOverlayProps>\n    | Array<\n        | ReactElement<ActionMenuButtonProps>\n        | ReactElement<ActionMenuIconButtonProps>\n        | ReactElement<ActionMenuOverlayProps>\n      >\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?: ActionMenuSize\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?: ActionMenuButtonMode\n} & BaseProps<HTMLDivElement>\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 childrenArray = Children.toArray(children)\n    const menuLabel = childrenArray.find(\n      (child): child is ReactElement<ActionMenuOverlayProps> =>\n        isValidElement<ActionMenuOverlayProps>(child) && child.type === ActionMenuOverlay,\n    )?.props['aria-label']\n\n    const {Button: SelectButton, Overlay: SelectOverlay} = childrenArray.reduce<{\n      Button?: ReactElement<ActionMenuButtonProps | ActionMenuIconButtonProps>\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        })\n      } else if (isValidElement<ActionMenuIconButtonInternalProps>(child) && child.type === ActionMenuIconButton) {\n        acc.Button = cloneElement(child, {\n          ref: anchorElementRef as React.RefObject<HTMLButtonElement>,\n          className: clsx(child.props.className, mode === 'split-button' && styles['ActionMenu__button--split-button']),\n          menuOpen: showMenu,\n          disabled,\n          id: `${instanceId}-button`,\n          size,\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} mode={mode} menuLabel={menuLabel} 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?: ActionMenuSize\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      onClick,\n      leadingVisual,\n      variant,\n      ...props\n    },\n    ref,\n  ) => {\n    const {menuLabel, mode, onMenuToggle} = useActionMenuContext()\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        onClick?.(event)\n\n        if (!event.defaultPrevented) {\n          onMenuToggle?.()\n        }\n      },\n      [disabled, onClick, onMenuToggle],\n    )\n    const handlePrimaryActionClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        onClick?.(event)\n      },\n      [disabled, onClick],\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--split-button-primary'],\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={handlePrimaryActionClick}\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={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles['ActionMenu__innerButton--split-button-menu'],\n            )}\n            variant={splitButtonVariant}\n            aria-haspopup=\"true\"\n            aria-label={menuLabel}\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\nexport type ActionMenuIconButtonProps<C extends React.ElementType = 'button'> = Omit<IconButtonProps<C>, 'size'> & {\n  'data-testid'?: string\n}\n\ntype ActionMenuIconButtonInternalProps = React.PropsWithoutRef<ActionMenuIconButtonProps<React.ElementType>> & {\n  ref?: React.Ref<HTMLButtonElement>\n  menuOpen?: boolean\n  size?: ActionMenuSize\n}\n\ntype ActionMenuIconButtonComponent = <C extends React.ElementType = 'button'>(\n  props: ActionMenuIconButtonProps<C> & React.RefAttributes<HTMLButtonElement>,\n) => React.ReactElement | null\n\nconst ActionMenuIconButton = forwardRef<HTMLButtonElement, ActionMenuIconButtonInternalProps>(\n  (\n    {\n      as,\n      id,\n      icon,\n      className,\n      'aria-label': ariaLabel,\n      'data-testid': testId,\n      disabled,\n      menuOpen,\n      size,\n      variant,\n      onClick,\n      ...props\n    },\n    ref,\n  ) => {\n    const {menuLabel, mode, onMenuToggle} = useActionMenuContext()\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        onClick?.(event)\n\n        if (!event.defaultPrevented) {\n          onMenuToggle?.()\n        }\n      },\n      [disabled, onClick, onMenuToggle],\n    )\n    const handlePrimaryActionClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault()\n          return\n        }\n\n        onClick?.(event)\n      },\n      [disabled, onClick],\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          <IconButton\n            {...props}\n            as={as}\n            icon={icon}\n            aria-label={ariaLabel}\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles['ActionMenu__innerButton--split-button-primary'],\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            onClick={handlePrimaryActionClick}\n          />\n          <IconButton\n            ref={ref}\n            id={id}\n            icon={ChevronDownIcon}\n            aria-label={menuLabel}\n            className={clsx(\n              styles['ActionMenu__innerButton--split-button'],\n              styles['ActionMenu__innerButton--split-button-menu'],\n            )}\n            variant={splitButtonVariant}\n            aria-haspopup=\"menu\"\n            size={size}\n            aria-expanded={menuOpen ? 'true' : 'false'}\n            onClick={onMenuToggle}\n            disabled={disabled}\n          />\n        </div>\n      )\n    }\n\n    return (\n      <IconButton\n        {...props}\n        ref={ref}\n        as={as}\n        id={id}\n        icon={icon}\n        aria-label={ariaLabel}\n        className={className}\n        aria-haspopup=\"menu\"\n        aria-expanded={menuOpen ? 'true' : 'false'}\n        disabled={disabled}\n        data-testid={testId || testIds.button}\n        size={size}\n        variant={variant}\n        onClick={handleClick}\n      />\n    )\n  },\n) as ActionMenuIconButtonComponent\n\ntype ActionMenuItemBaseProps = {\n  handler?: (newValue: string) => void\n  type?: 'none' | 'single' | 'link'\n  disabled?: boolean\n  size?: ActionMenuSize\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  IconButton: ActionMenuIconButton,\n  Item: ActionMenuItem,\n  Overlay: ActionMenuOverlay,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/ActionMenu/ActionMenu.module-DlO2FtEt.css

@@ -0,0 +1 @@
+.Primer_Brand__ActionMenu-module__ActionMenu___xLxGU{--focus-outline-width:3px;position:relative}.Primer_Brand__ActionMenu-module__ActionMenu--disabled___UsizV{cursor:not-allowed}.Primer_Brand__ActionMenu-module__ActionMenu__button___vFLAF{height:auto}.Primer_Brand__ActionMenu-module__ActionMenu__button--default___heDoV{--brand-borderRadius-medium:var(--brand-borderRadius-full)}.Primer_Brand__ActionMenu-module__ActionMenu__button--small___UAUPB{padding:calc(var(--base-size-4) / 2) var(--base-size-12)}.Primer_Brand__ActionMenu-module__ActionMenu__button--medium___n5ovs{padding:calc(var(--base-size-8) + 2px) var(--base-size-28)}.Primer_Brand__ActionMenu-module__ActionMenu__button___vFLAF>span:first-of-type{max-width:200px;overflow:hidden}.Primer_Brand__ActionMenu-module__ActionMenu__button--split-button___2Grop{border-radius:var(--brand-borderRadius-medium);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-default);padding:0;display:inline-flex}.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button___JwpBc.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button-primary___yz3PG,.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button___JwpBc.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button-primary___yz3PG:hover{z-index:1;border-top-right-radius:0;border-bottom-right-radius:0;position:relative}.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button___JwpBc.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button-primary___yz3PG:before,.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button___JwpBc.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button-primary___yz3PG:hover:before{content:"";top:calc(var(--base-size-2) / -2);right:calc(var(--base-size-2) * -1);width:var(--brand-borderWidth-thin);height:calc(100% + var(--base-size-2));background-color:var(--brand-ActionMenu-color-splitButton-divider-default);position:absolute}.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--primary___OLMZs.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button___JwpBc.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button-primary___yz3PG:before{background-color:var(--brand-ActionMenu-color-splitButton-divider-primary)}.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--subtle___9VQgI.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button___JwpBc.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button-primary___yz3PG:before{top:calc(var(--base-size-2) * -1);height:calc(100% + var(--base-size-4))}.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--subtle___9VQgI.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button___JwpBc.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button-primary___yz3PG:active:before{width:0}.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--medium___C2bJi.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button___JwpBc,.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button___JwpBc.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button-menu___JFr87{padding:var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal)}.Primer_Brand__ActionMenu-module__ActionMenu__inner-button-dropdown-icon___IGvTk{vertical-align:middle!important}.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button___JwpBc.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button-menu___JFr87{z-index:0;border-top-left-radius:0;border-bottom-left-radius:0;position:relative}.Primer_Brand__ActionMenu-module__ActionMenu__innerButton--disabled___WrkOb{cursor:not-allowed;pointer-events:none}.Primer_Brand__ActionMenu-module__ActionMenu__menu___BEldF{z-index:100;padding:var(--base-size-12);visibility:hidden;background-color:var(--brand-color-canvas-default);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);border-radius:var(--brand-borderRadius-large);min-width:min-content;max-height:460px;position:absolute;overflow-y:auto;box-shadow:0 100px 80px #00000003,0 41px 33px #00000005,0 22px 17px #00000005,0 12px 10px #00000008,0 6px 5px #0000000a,0 2px 2px #00000012}.Primer_Brand__ActionMenu-module__ActionMenu__menu--small___xbb8m{padding:var(--base-size-8)}.Primer_Brand__ActionMenu-module__ActionMenu__menu--medium___3QqgD{padding:var(--base-size-12)}.Primer_Brand__ActionMenu-module__ActionMenu__menu--visible___QzhaX{visibility:visible}.Primer_Brand__ActionMenu-module__ActionMenu__menu--pos-outside-bottom___KAAm0{animation:.189s var(--brand-animation-easing-glide) 0s 1 normal none running Primer_Brand__ActionMenu-module__overlay-appear-outside-bottom___egiij}.Primer_Brand__ActionMenu-module__ActionMenu__menu--pos-outside-top___4TZek{animation:.189s var(--brand-animation-easing-glide) 0s 1 normal none running Primer_Brand__ActionMenu-module__overlay-appear-outside-top____Ko4E}@keyframes Primer_Brand__ActionMenu-module__overlay-appear-outside-bottom___egiij{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes Primer_Brand__ActionMenu-module__overlay-appear-outside-top____Ko4E{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.Primer_Brand__ActionMenu-module__ActionMenu__menu--medium___3QqgD.Primer_Brand__ActionMenu-module__ActionMenu__menu--pos-outside-bottom___KAAm0{margin-block-start:var(--base-size-8)}.Primer_Brand__ActionMenu-module__ActionMenu__menu--medium___3QqgD.Primer_Brand__ActionMenu-module__ActionMenu__menu--pos-outside-top___4TZek{margin-block-start:calc(var(--base-size-8) * -1)}.Primer_Brand__ActionMenu-module__ActionMenu__menu--small___xbb8m.Primer_Brand__ActionMenu-module__ActionMenu__menu--pos-outside-bottom___KAAm0{margin-block-start:var(--base-size-4)}.Primer_Brand__ActionMenu-module__ActionMenu__menu--small___xbb8m.Primer_Brand__ActionMenu-module__ActionMenu__menu--pos-outside-top___4TZek{margin-block-start:calc(var(--base-size-4) * -1)}.Primer_Brand__ActionMenu-module__ActionMenu__menu___BEldF::-webkit-scrollbar{width:var(--base-size-12)}.Primer_Brand__ActionMenu-module__ActionMenu__menu___BEldF::-webkit-scrollbar-track{border-left:1px solid var(--brand-color-border-muted);border-top-right-radius:var(--brand-borderRadius-large);border-bottom-right-radius:var(--brand-borderRadius-large)}.Primer_Brand__ActionMenu-module__ActionMenu__menu___BEldF::-webkit-scrollbar-thumb{border-radius:var(--brand-borderRadius-medium);border:1px solid var(--brand-color-border-default);background-color:var(--brand-ActionMenu-color-scrollbar-thumb-bg)}.Primer_Brand__ActionMenu-module__ActionMenu__item___2FZw4{border-radius:var(--brand-borderRadius-medium);flex:1 0 auto;grid-template-columns:min-content 1fr;grid-template-areas:"leadingVisual text";align-items:center;list-style:none;display:grid}.Primer_Brand__ActionMenu-module__ActionMenu__item-anchor___dX7CI{grid-template-columns:subgrid;grid-template-rows:subgrid;grid-gap:var(--base-size-8);align-items:center;gap:var(--base-size-8);color:var(--brand-color-text-default);grid-area:1/1/-1/-1;-webkit-text-decoration:none;text-decoration:none;display:grid}.Primer_Brand__ActionMenu-module__ActionMenu__item-anchor--disabled___Lx1Az{pointer-events:none;cursor:not-allowed}.Primer_Brand__ActionMenu-module__ActionMenu__item-anchor___dX7CI:focus-visible{box-shadow:none;outline:none}.Primer_Brand__ActionMenu-module__ActionMenu__item___2FZw4:has(.Primer_Brand__ActionMenu-module__ActionMenu__item-anchor___dX7CI:focus-visible){box-shadow:0 0 0 var(--focus-outline-width) var(--brand-color-focus);outline:none;transition:none}.Primer_Brand__ActionMenu-module__ActionMenu__item--medium___YWN8M{padding:var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal);min-height:var(--brand-control-medium-size)}.Primer_Brand__ActionMenu-module__ActionMenu__item--medium___YWN8M:has(.Primer_Brand__ActionMenu-module__ActionMenu__item-anchor___dX7CI){padding:0}.Primer_Brand__ActionMenu-module__ActionMenu__item--medium___YWN8M .Primer_Brand__ActionMenu-module__ActionMenu__item-anchor___dX7CI{padding:var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal)}.Primer_Brand__ActionMenu-module__ActionMenu__item--small___MOwms{padding:var(--base-size-8) var(--brand-control-small-paddingInline-condensed)}.Primer_Brand__ActionMenu-module__ActionMenu__item___2FZw4[aria-disabled=true]{cursor:not-allowed}.Primer_Brand__ActionMenu-module__ActionMenu__item___2FZw4:hover:not(.Primer_Brand__ActionMenu-module__ActionMenu__item___2FZw4[aria-disabled=true]){cursor:pointer;background-color:var(--brand-ActionMenu-color-item-hover)}.Primer_Brand__ActionMenu-module__ActionMenu__item--selection-type-single___Us_p_{padding-right:var(--base-size-48)}.Primer_Brand__ActionMenu-module__ActionMenu__item___2FZw4:focus-visible{box-shadow:0 0 0 var(--focus-outline-width) var(--brand-color-focus);outline:none;transition:none}.Primer_Brand__ActionMenu-module__ActionMenu__item-leadingVisual___WSTdj{min-width:var(--base-size-16);margin-right:var(--brand-control-medium-gap);color:var(--brand-color-text-default);pointer-events:none;grid-area:leadingVisual;display:flex}.Primer_Brand__ActionMenu-module__ActionMenu__item-text___agGYz{grid-area:text;width:max-content;display:grid}.Primer_Brand__ActionMenu-module__ActionMenu__item-text___agGYz>span{line-height:var(--brand-control-medium-lineBoxHeight)}.Primer_Brand__ActionMenu-module__ActionMenu__item-icon___2a7ve{fill:var(--brand-color-text-default)}.Primer_Brand__ActionMenu-module__ActionMenu__item-content--disabled___rRo6_{color:var(--base-color-scale-gray-3)}.Primer_Brand__ActionMenu-module__ActionMenu__item-icon--disabled___BjIIo{fill:var(--base-color-scale-gray-3)}@media (forced-colors:active){.Primer_Brand__ActionMenu-module__ActionMenu__item___2FZw4:focus-visible{outline:var(--brand-borderWidth-thick) solid Highlight;outline-offset:var(--base-size-2)}}@media (prefers-reduced-motion:reduce){.Primer_Brand__ActionMenu-module__ActionMenu___xLxGU,.Primer_Brand__ActionMenu-module__ActionMenu___xLxGU:before,.Primer_Brand__ActionMenu-module__ActionMenu___xLxGU:after,.Primer_Brand__ActionMenu-module__ActionMenu___xLxGU *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/ActionMenu/ActionMenu.module.js

@@ -1,4 +1,4 @@
-import './ActionMenu.module-BAeHTqHw.css';//#region src/ActionMenu/ActionMenu.module.css
+import './ActionMenu.module-DlO2FtEt.css';//#region src/ActionMenu/ActionMenu.module.css
 var e = "Primer_Brand__ActionMenu-module__ActionMenu___xLxGU", t = "Primer_Brand__ActionMenu-module__ActionMenu__button___vFLAF", n = "Primer_Brand__ActionMenu-module__ActionMenu__menu___BEldF", r = "Primer_Brand__ActionMenu-module__ActionMenu__item___2FZw4", i = {
 	ActionMenu: e,
 	"ActionMenu--disabled": "Primer_Brand__ActionMenu-module__ActionMenu--disabled___UsizV",
@@ -8,8 +8,11 @@ var e = "Primer_Brand__ActionMenu-module__ActionMenu___xLxGU", t = "Primer_Brand
 	"ActionMenu__button--medium": "Primer_Brand__ActionMenu-module__ActionMenu__button--medium___n5ovs",
 	"ActionMenu__button--split-button": "Primer_Brand__ActionMenu-module__ActionMenu__button--split-button___2Grop",
 	"ActionMenu__innerButton--split-button": "Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button___JwpBc",
+	"ActionMenu__innerButton--split-button-primary": "Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button-primary___yz3PG",
+	"ActionMenu__innerButton--primary": "Primer_Brand__ActionMenu-module__ActionMenu__innerButton--primary___OLMZs",
 	"ActionMenu__innerButton--subtle": "Primer_Brand__ActionMenu-module__ActionMenu__innerButton--subtle___9VQgI",
 	"ActionMenu__innerButton--medium": "Primer_Brand__ActionMenu-module__ActionMenu__innerButton--medium___C2bJi",
+	"ActionMenu__innerButton--split-button-menu": "Primer_Brand__ActionMenu-module__ActionMenu__innerButton--split-button-menu___JFr87",
 	"ActionMenu__inner-button-dropdown-icon": "Primer_Brand__ActionMenu-module__ActionMenu__inner-button-dropdown-icon___IGvTk",
 	"ActionMenu__innerButton--disabled": "Primer_Brand__ActionMenu-module__ActionMenu__innerButton--disabled___WrkOb",
 	ActionMenu__menu: n,

package/esm/ActionMenu/ActionMenu.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.module.js","names":[],"sources":["../../src/ActionMenu/ActionMenu.module.css"],"sourcesContent":[".ActionMenu {\n  --focus-outline-width: 3px;\n  position: relative;\n}\n\n.ActionMenu--disabled {\n  cursor: not-allowed;\n}\n\n.ActionMenu__button {\n  height: auto;\n}\n\n.ActionMenu__button--default {\n  /* avoid specificity issues */\n  --brand-borderRadius-medium: var(--brand-borderRadius-full);\n}\n\n.ActionMenu__button--small {\n  padding: calc(var(--base-size-4) / 2) var(--base-size-12);\n}\n\n.ActionMenu__button--medium {\n  padding: calc(var(--base-size-8) + 2px) var(--base-size-28);\n}\n\n.ActionMenu__button > span:first-of-type {\n  max-width: 200px;\n  overflow: hidden;\n}\n\n.ActionMenu__button--split-button {\n  display: inline-flex;\n  padding: 0;\n  border-radius: var(--brand-borderRadius-medium);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.ActionMenu__innerButton--split-button:first-child,\n.ActionMenu__innerButton--split-button:first-child:hover {\n  position: relative;\n  z-index: 1;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.ActionMenu__innerButton--split-button:first-child::before,\n.ActionMenu__innerButton--split-button:hover:first-child::before {\n  content: '';\n  position: absolute;\n  top: calc(var(--base-size-2) / -2);\n  right: calc(var(--base-size-2) * -1);\n  width: var(--brand-borderWidth-thin);\n  height: calc(100% + var(--base-size-2));\n  background-color: var(--brand-color-border-muted);\n}\n\n.ActionMenu__innerButton--subtle.ActionMenu__innerButton--split-button::before {\n  top: calc(var(--base-size-2) * -1);\n  height: calc(100% + var(--base-size-4));\n}\n\n.ActionMenu__innerButton--subtle.ActionMenu__innerButton--split-button:active:first-child::before {\n  width: 0;\n}\n\n.ActionMenu__innerButton--medium.ActionMenu__innerButton--split-button,\n.ActionMenu__innerButton--split-button:last-child {\n  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal); /* Override the default button padding */\n}\n\n.ActionMenu__inner-button-dropdown-icon {\n  vertical-align: middle !important;\n}\n\n.ActionMenu__innerButton--split-button:last-child {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  position: relative;\n  z-index: 0;\n}\n\n.ActionMenu__innerButton--disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.ActionMenu__menu {\n  position: absolute;\n  z-index: 100;\n  padding: var(--base-size-12);\n  min-width: min-content;\n  visibility: hidden;\n  background-color: var(--brand-color-canvas-default);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-radius: var(--brand-borderRadius-large);\n  max-height: 460px;\n  overflow-y: auto;\n  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.01), 0px 41px 33px rgba(0, 0, 0, 0.02), 0px 22px 17px rgba(0, 0, 0, 0.02),\n    0px 12px 10px rgba(0, 0, 0, 0.03), 0px 6px 5px rgba(0, 0, 0, 0.04), 0px 2px 2px rgba(0, 0, 0, 0.07);\n}\n\n.ActionMenu__menu--small {\n  padding: var(--base-size-8);\n}\n\n.ActionMenu__menu--medium {\n  padding: var(--base-size-12);\n}\n\n.ActionMenu__menu--visible {\n  visibility: visible;\n}\n\n.ActionMenu__menu--pos-outside-bottom {\n  animation: 189ms var(--brand-animation-easing-glide) 0s 1 normal none running overlay-appear-outside-bottom;\n}\n\n.ActionMenu__menu--pos-outside-top {\n  animation: 189ms var(--brand-animation-easing-glide) 0s 1 normal none running overlay-appear-outside-top;\n}\n\n@keyframes overlay-appear-outside-bottom {\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes overlay-appear-outside-top {\n  0% {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ActionMenu__menu--medium.ActionMenu__menu--pos-outside-bottom {\n  margin-block-start: var(--base-size-8);\n}\n\n.ActionMenu__menu--medium.ActionMenu__menu--pos-outside-top {\n  margin-block-start: calc(var(--base-size-8) * -1);\n}\n\n.ActionMenu__menu--small.ActionMenu__menu--pos-outside-bottom {\n  margin-block-start: var(--base-size-4);\n}\n\n.ActionMenu__menu--small.ActionMenu__menu--pos-outside-top {\n  margin-block-start: calc(var(--base-size-4) * -1);\n}\n\n.ActionMenu__menu::-webkit-scrollbar {\n  width: var(--base-size-12);\n}\n\n.ActionMenu__menu::-webkit-scrollbar-track {\n  border-left: 1px solid var(--brand-color-border-muted);\n  border-top-right-radius: var(--brand-borderRadius-large);\n  border-bottom-right-radius: var(--brand-borderRadius-large);\n}\n\n.ActionMenu__menu::-webkit-scrollbar-thumb {\n  border-radius: var(--brand-borderRadius-medium);\n  border: 1px solid var(--brand-color-border-default);\n  background-color: var(--brand-ActionMenu-color-scrollbar-thumb-bg);\n}\n\n.ActionMenu__item {\n  flex: 1 0 auto;\n  display: grid;\n  align-items: center;\n  grid-template-areas: 'leadingVisual text';\n  grid-template-columns: min-content 1fr;\n  list-style: none;\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.ActionMenu__item-anchor {\n  display: grid;\n  grid-template-columns: subgrid;\n  grid-template-rows: subgrid;\n  grid-column: 1 / -1;\n  grid-row: 1 / -1;\n  align-items: center;\n  gap: var(--base-size-8);\n  text-decoration: none;\n  color: var(--brand-color-text-default);\n}\n\n.ActionMenu__item-anchor--disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n.ActionMenu__item-anchor:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n\n.ActionMenu__item:has(.ActionMenu__item-anchor:focus-visible) {\n  outline: none;\n  box-shadow: 0 0 0 var(--focus-outline-width) var(--brand-color-focus);\n  transition: none;\n}\n\n.ActionMenu__item--medium {\n  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal);\n  min-height: var(--brand-control-medium-size);\n}\n\n.ActionMenu__item--medium:has(.ActionMenu__item-anchor) {\n  padding: 0;\n}\n\n.ActionMenu__item--medium .ActionMenu__item-anchor {\n  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal);\n}\n\n.ActionMenu__item--small {\n  padding: var(--base-size-8) var(--brand-control-small-paddingInline-condensed);\n}\n\n.ActionMenu__item[aria-disabled='true'] {\n  cursor: not-allowed;\n}\n\n.ActionMenu__item:hover:not(.ActionMenu__item[aria-disabled='true']) {\n  cursor: pointer;\n  background-color: var(--brand-ActionMenu-color-item-hover);\n}\n\n.ActionMenu__item--selection-type-single {\n  padding-right: var(--base-size-48);\n}\n\n.ActionMenu__item:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 var(--focus-outline-width) var(--brand-color-focus);\n  transition: none;\n}\n\n.ActionMenu__item-leadingVisual {\n  display: flex;\n  min-width: var(--base-size-16);\n  margin-right: var(--brand-control-medium-gap);\n  color: var(--brand-color-text-default);\n  pointer-events: none;\n  grid-area: leadingVisual / leadingVisual;\n}\n\n.ActionMenu__item-text {\n  grid-area: text / text;\n  /* display grid collapses the text line box height for optical alignment */\n  display: grid;\n  width: max-content;\n}\n\n.ActionMenu__item-text > span {\n  line-height: var(--brand-control-medium-lineBoxHeight);\n}\n\n.ActionMenu__item-icon {\n  fill: var(--brand-color-text-default);\n}\n\n.ActionMenu__item-content--disabled {\n  color: var(--base-color-scale-gray-3);\n}\n\n.ActionMenu__item-icon--disabled {\n  fill: var(--base-color-scale-gray-3);\n}\n\n@media (forced-colors: active) {\n  .ActionMenu__item:focus-visible {\n    outline: var(--brand-borderWidth-thick) solid Highlight;\n    outline-offset: var(--base-size-2);\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .ActionMenu,\n  .ActionMenu::before,\n  .ActionMenu::after,\n  .ActionMenu * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ActionMenu.module.js","names":[],"sources":["../../src/ActionMenu/ActionMenu.module.css"],"sourcesContent":[".ActionMenu {\n  --focus-outline-width: 3px;\n  position: relative;\n}\n\n.ActionMenu--disabled {\n  cursor: not-allowed;\n}\n\n.ActionMenu__button {\n  height: auto;\n}\n\n.ActionMenu__button--default {\n  /* avoid specificity issues */\n  --brand-borderRadius-medium: var(--brand-borderRadius-full);\n}\n\n.ActionMenu__button--small {\n  padding: calc(var(--base-size-4) / 2) var(--base-size-12);\n}\n\n.ActionMenu__button--medium {\n  padding: calc(var(--base-size-8) + 2px) var(--base-size-28);\n}\n\n.ActionMenu__button > span:first-of-type {\n  max-width: 200px;\n  overflow: hidden;\n}\n\n.ActionMenu__button--split-button {\n  display: inline-flex;\n  padding: 0;\n  border-radius: var(--brand-borderRadius-medium);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary,\n.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary:hover {\n  position: relative;\n  z-index: 1;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary::before,\n.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary:hover::before {\n  content: '';\n  position: absolute;\n  top: calc(var(--base-size-2) / -2);\n  right: calc(var(--base-size-2) * -1);\n  width: var(--brand-borderWidth-thin);\n  height: calc(100% + var(--base-size-2));\n  background-color: var(--brand-ActionMenu-color-splitButton-divider-default);\n}\n\n.ActionMenu__innerButton--primary.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary::before {\n  background-color: var(--brand-ActionMenu-color-splitButton-divider-primary);\n}\n\n.ActionMenu__innerButton--subtle.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary::before {\n  top: calc(var(--base-size-2) * -1);\n  height: calc(100% + var(--base-size-4));\n}\n\n.ActionMenu__innerButton--subtle.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary:active::before {\n  width: 0;\n}\n\n.ActionMenu__innerButton--medium.ActionMenu__innerButton--split-button,\n.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-menu {\n  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal); /* Override the default button padding */\n}\n\n.ActionMenu__inner-button-dropdown-icon {\n  vertical-align: middle !important;\n}\n\n.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-menu {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  position: relative;\n  z-index: 0;\n}\n\n.ActionMenu__innerButton--disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.ActionMenu__menu {\n  position: absolute;\n  z-index: 100;\n  padding: var(--base-size-12);\n  min-width: min-content;\n  visibility: hidden;\n  background-color: var(--brand-color-canvas-default);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-radius: var(--brand-borderRadius-large);\n  max-height: 460px;\n  overflow-y: auto;\n  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.01), 0px 41px 33px rgba(0, 0, 0, 0.02), 0px 22px 17px rgba(0, 0, 0, 0.02),\n    0px 12px 10px rgba(0, 0, 0, 0.03), 0px 6px 5px rgba(0, 0, 0, 0.04), 0px 2px 2px rgba(0, 0, 0, 0.07);\n}\n\n.ActionMenu__menu--small {\n  padding: var(--base-size-8);\n}\n\n.ActionMenu__menu--medium {\n  padding: var(--base-size-12);\n}\n\n.ActionMenu__menu--visible {\n  visibility: visible;\n}\n\n.ActionMenu__menu--pos-outside-bottom {\n  animation: 189ms var(--brand-animation-easing-glide) 0s 1 normal none running overlay-appear-outside-bottom;\n}\n\n.ActionMenu__menu--pos-outside-top {\n  animation: 189ms var(--brand-animation-easing-glide) 0s 1 normal none running overlay-appear-outside-top;\n}\n\n@keyframes overlay-appear-outside-bottom {\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes overlay-appear-outside-top {\n  0% {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ActionMenu__menu--medium.ActionMenu__menu--pos-outside-bottom {\n  margin-block-start: var(--base-size-8);\n}\n\n.ActionMenu__menu--medium.ActionMenu__menu--pos-outside-top {\n  margin-block-start: calc(var(--base-size-8) * -1);\n}\n\n.ActionMenu__menu--small.ActionMenu__menu--pos-outside-bottom {\n  margin-block-start: var(--base-size-4);\n}\n\n.ActionMenu__menu--small.ActionMenu__menu--pos-outside-top {\n  margin-block-start: calc(var(--base-size-4) * -1);\n}\n\n.ActionMenu__menu::-webkit-scrollbar {\n  width: var(--base-size-12);\n}\n\n.ActionMenu__menu::-webkit-scrollbar-track {\n  border-left: 1px solid var(--brand-color-border-muted);\n  border-top-right-radius: var(--brand-borderRadius-large);\n  border-bottom-right-radius: var(--brand-borderRadius-large);\n}\n\n.ActionMenu__menu::-webkit-scrollbar-thumb {\n  border-radius: var(--brand-borderRadius-medium);\n  border: 1px solid var(--brand-color-border-default);\n  background-color: var(--brand-ActionMenu-color-scrollbar-thumb-bg);\n}\n\n.ActionMenu__item {\n  flex: 1 0 auto;\n  display: grid;\n  align-items: center;\n  grid-template-areas: 'leadingVisual text';\n  grid-template-columns: min-content 1fr;\n  list-style: none;\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.ActionMenu__item-anchor {\n  display: grid;\n  grid-template-columns: subgrid;\n  grid-template-rows: subgrid;\n  grid-column: 1 / -1;\n  grid-row: 1 / -1;\n  align-items: center;\n  gap: var(--base-size-8);\n  text-decoration: none;\n  color: var(--brand-color-text-default);\n}\n\n.ActionMenu__item-anchor--disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n.ActionMenu__item-anchor:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n\n.ActionMenu__item:has(.ActionMenu__item-anchor:focus-visible) {\n  outline: none;\n  box-shadow: 0 0 0 var(--focus-outline-width) var(--brand-color-focus);\n  transition: none;\n}\n\n.ActionMenu__item--medium {\n  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal);\n  min-height: var(--brand-control-medium-size);\n}\n\n.ActionMenu__item--medium:has(.ActionMenu__item-anchor) {\n  padding: 0;\n}\n\n.ActionMenu__item--medium .ActionMenu__item-anchor {\n  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal);\n}\n\n.ActionMenu__item--small {\n  padding: var(--base-size-8) var(--brand-control-small-paddingInline-condensed);\n}\n\n.ActionMenu__item[aria-disabled='true'] {\n  cursor: not-allowed;\n}\n\n.ActionMenu__item:hover:not(.ActionMenu__item[aria-disabled='true']) {\n  cursor: pointer;\n  background-color: var(--brand-ActionMenu-color-item-hover);\n}\n\n.ActionMenu__item--selection-type-single {\n  padding-right: var(--base-size-48);\n}\n\n.ActionMenu__item:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 var(--focus-outline-width) var(--brand-color-focus);\n  transition: none;\n}\n\n.ActionMenu__item-leadingVisual {\n  display: flex;\n  min-width: var(--base-size-16);\n  margin-right: var(--brand-control-medium-gap);\n  color: var(--brand-color-text-default);\n  pointer-events: none;\n  grid-area: leadingVisual / leadingVisual;\n}\n\n.ActionMenu__item-text {\n  grid-area: text / text;\n  /* display grid collapses the text line box height for optical alignment */\n  display: grid;\n  width: max-content;\n}\n\n.ActionMenu__item-text > span {\n  line-height: var(--brand-control-medium-lineBoxHeight);\n}\n\n.ActionMenu__item-icon {\n  fill: var(--brand-color-text-default);\n}\n\n.ActionMenu__item-content--disabled {\n  color: var(--base-color-scale-gray-3);\n}\n\n.ActionMenu__item-icon--disabled {\n  fill: var(--base-color-scale-gray-3);\n}\n\n@media (forced-colors: active) {\n  .ActionMenu__item:focus-visible {\n    outline: var(--brand-borderWidth-thick) solid Highlight;\n    outline-offset: var(--base-size-2);\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .ActionMenu,\n  .ActionMenu::before,\n  .ActionMenu::after,\n  .ActionMenu * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/ActionMenu/ActionMenuContext.d.ts

@@ -0,0 +1,23 @@
+import React, { PropsWithChildren } from 'react';
+export declare const ActionMenuSizes: readonly ["small", "medium"];
+export type ActionMenuSizes = (typeof ActionMenuSizes)[number];
+export declare const ActionMenuButtonModes: readonly ["default", "split-button"];
+export type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number];
+type ActionMenuContextType = {
+    menuLabel: string;
+    mode: ActionMenuButtonModes;
+    onMenuToggle?: () => void;
+    setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes | undefined>>;
+    size?: ActionMenuSizes;
+};
+export declare const ActionMenuContext: React.Context<ActionMenuContextType | undefined>;
+type ActionMenuProviderProps = PropsWithChildren<{
+    menuLabel?: string;
+    mode?: ActionMenuButtonModes;
+    onMenuToggle?: () => void;
+    size?: ActionMenuSizes;
+}>;
+export declare const ActionMenuProvider: ({ children, menuLabel, mode, onMenuToggle, size, }: ActionMenuProviderProps) => React.JSX.Element;
+export declare const useActionMenuContext: () => ActionMenuContextType;
+export {};
+//# sourceMappingURL=ActionMenuContext.d.ts.map

package/esm/ActionMenu/ActionMenuContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionMenuContext.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenuContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAExD,eAAO,MAAM,eAAe,8BAA+B,CAAA;AAC3D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D,eAAO,MAAM,qBAAqB,sCAAuC,CAAA;AACzE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE1E,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,qBAAqB,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC,CAAA;IAC3E,IAAI,CAAC,EAAE,eAAe,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,iBAAiB,kDAAoE,CAAA;AAElG,KAAK,uBAAuB,GAAG,iBAAiB,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,qBAAqB,CAAA;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,IAAI,CAAC,EAAE,eAAe,CAAA;CACvB,CAAC,CAAA;AAEF,eAAO,MAAM,kBAAkB,GAAI,oDAMhC,uBAAuB,sBAQzB,CAAA;AAED,eAAO,MAAM,oBAAoB,QAAO,qBAOvC,CAAA"}

package/esm/ActionMenu/ActionMenuContext.js

@@ -0,0 +1,24 @@
+import e, { useState as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/ActionMenu/ActionMenuContext.tsx
+var r = ["small", "medium"], i = ["default", "split-button"], a = e.createContext(void 0), o = ({ children: e, menuLabel: r = "Menu", mode: i = "default", onMenuToggle: o, size: s }) => {
+	let [c, l] = t(s);
+	return /* @__PURE__ */ n(a.Provider, {
+		value: {
+			menuLabel: r,
+			mode: i,
+			onMenuToggle: o,
+			setSize: l,
+			size: c
+		},
+		children: e
+	});
+}, s = () => {
+	let t = e.useContext(a);
+	if (!t) throw Error("useActionMenuContext must be used within an ActionMenuProvider");
+	return t;
+};
+//#endregion
+export { i as ActionMenuButtonModes, a as ActionMenuContext, o as ActionMenuProvider, r as ActionMenuSizes, s as useActionMenuContext };
+
+//# sourceMappingURL=ActionMenuContext.js.map

package/esm/ActionMenu/ActionMenuContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionMenuContext.js","names":[],"sources":["../../src/ActionMenu/ActionMenuContext.tsx"],"sourcesContent":["import React, {PropsWithChildren, useState} from 'react'\n\nexport const ActionMenuSizes = ['small', 'medium'] as const\nexport type ActionMenuSizes = (typeof ActionMenuSizes)[number]\n\nexport const ActionMenuButtonModes = ['default', 'split-button'] as const\nexport type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number]\n\ntype ActionMenuContextType = {\n  menuLabel: string\n  mode: ActionMenuButtonModes\n  onMenuToggle?: () => void\n  setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes | undefined>>\n  size?: ActionMenuSizes\n}\n\nexport const ActionMenuContext = React.createContext<ActionMenuContextType | undefined>(undefined)\n\ntype ActionMenuProviderProps = PropsWithChildren<{\n  menuLabel?: string\n  mode?: ActionMenuButtonModes\n  onMenuToggle?: () => void\n  size?: ActionMenuSizes\n}>\n\nexport const ActionMenuProvider = ({\n  children,\n  menuLabel = 'Menu',\n  mode = 'default',\n  onMenuToggle,\n  size,\n}: ActionMenuProviderProps) => {\n  const [currentSize, setSize] = useState(size)\n\n  return (\n    <ActionMenuContext.Provider value={{menuLabel, mode, onMenuToggle, setSize, size: currentSize}}>\n      {children}\n    </ActionMenuContext.Provider>\n  )\n}\n\nexport const useActionMenuContext = (): ActionMenuContextType => {\n  const context = React.useContext(ActionMenuContext)\n  if (!context) {\n    throw new Error('useActionMenuContext must be used within an ActionMenuProvider')\n  }\n\n  return context\n}\n"],"mappings":";;;AAEA,IAAa,IAAkB,CAAC,SAAS,QAAQ,GAGpC,IAAwB,CAAC,WAAW,cAAc,GAWlD,IAAoB,EAAM,cAAiD,KAAA,CAAS,GASpF,KAAsB,EACjC,aACA,eAAY,QACZ,UAAO,WACP,iBACA,cAC6B;CAC7B,IAAM,CAAC,GAAa,KAAW,EAAS,CAAI;CAE5C,OACE,kBAAC,EAAkB,UAAnB;EAA4B,OAAO;GAAC;GAAW;GAAM;GAAc;GAAS,MAAM;EAAW;EAC1F;CACyB,CAAA;AAEhC,GAEa,UAAoD;CAC/D,IAAM,IAAU,EAAM,WAAW,CAAiB;CAClD,IAAI,CAAC,GACH,MAAU,MAAM,gEAAgE;CAGlF,OAAO;AACT"}

package/esm/Button/Button.d.ts

@@ -1,12 +1,14 @@
 import React, { ReactElement } from 'react';
 import type { Icon } from '@primer/octicons-react';
 import type { BaseProps } from '../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/button/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css';
 export declare const ButtonVariants: readonly ["primary", "secondary", "subtle"];
 export declare const ButtonSizes: readonly ["small", "medium", "large"];
 export declare const defaultButtonVariant: "secondary";
 export declare const defaultButtonSize: "medium";
 export type ButtonVariant = (typeof ButtonVariants)[number];
+export type ButtonSize = (typeof ButtonSizes)[number];
 export type ButtonBaseProps = {
     /**
      * The leading visual appears before the button content
@@ -23,7 +25,7 @@ export type ButtonBaseProps = {
     /**
      * The size variations available in Button
      */
-    size?: (typeof ButtonSizes)[number];
+    size?: ButtonSize;
     /**
      * A flag to show/hide the arrow icon
      * @deprecated The hasArrow prop is deprecated and will be removed in a future release.
@@ -34,7 +36,7 @@ export type ButtonBaseProps = {
      */
     block?: boolean;
 };
-export type ButtonProps<C extends React.ElementType> = BaseProps<C> & {
+export type ButtonProps<C extends React.ElementType = 'button'> = BaseProps<C> & {
     as?: C;
 } & ButtonBaseProps & React.ComponentPropsWithoutRef<C>;
 export declare const _Button: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/esm/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAoC,YAAY,EAAC,MAAM,OAAO,CAAA;AAC5E,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAInD,OAAO,0GAA0G,CAAA;AAGjH,eAAO,MAAM,cAAc,6CAA8C,CAAA;AACzE,eAAO,MAAM,WAAW,uCAAwC,CAAA;AAEhE,eAAO,MAAM,oBAAoB,aAAoB,CAAA;AACrD,eAAO,MAAM,iBAAiB,UAAiB,CAAA;AAE/C,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3D,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG;IACpE,EAAE,CAAC,EAAE,CAAC,CAAA;CACP,GAAG,eAAe,GACjB,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAA;AAenC,eAAO,MAAM,OAAO,+JAgKnB,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;CAAoC,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAoC,YAAY,EAAC,MAAM,OAAO,CAAA;AAC5E,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAInD,OAAO,6FAA6F,CAAA;AACpG,OAAO,0GAA0G,CAAA;AAGjH,eAAO,MAAM,cAAc,6CAA8C,CAAA;AACzE,eAAO,MAAM,WAAW,uCAAwC,CAAA;AAEhE,eAAO,MAAM,oBAAoB,aAAoB,CAAA;AACrD,eAAO,MAAM,iBAAiB,UAAiB,CAAA;AAE/C,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC3D,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAErD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACnC;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG;IAC/E,EAAE,CAAC,EAAE,CAAC,CAAA;CACP,GAAG,eAAe,GACjB,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAA;AAenC,eAAO,MAAM,OAAO,+JA2KnB,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;CAAoC,CAAA"}

package/esm/Button/Button.js

@@ -2,7 +2,8 @@ import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useAnimation as t } from "../animation/useAnimation.js";
 import { Text as n } from "../Text/Text.js";
 import { ExpandableArrow as r } from "../ExpandableArrow/ExpandableArrow.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes-kII0kqk3.css';/* empty css                                                                                                    */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes-kII0kqk3.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/base-DhkVnZYz.css';/* empty css                                                                                       */
+/* empty css                                                                                                    */
 import i from "./Button.module.js";
 import a, { forwardRef as o, useCallback as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
@@ -27,66 +28,66 @@ var u = [
 		return `${this.root}-expandable-arrow`;
 	}
 }, h = o(({ animate: o, as: u, variant: d = f, size: h = p, hasArrow: g, block: _ = !1, className: v, children: y, disabled: b, "aria-disabled": x, onMouseEnter: S, onMouseLeave: C, onFocus: w, onBlur: T, leadingVisual: E, trailingVisual: D, style: O, ...k }, A) => {
-	let [j, M] = a.useState(!1), [N, P] = a.useState(!1), F = u || "button", I = b || x === "true" || typeof x == "boolean" && x === !0, { classes: L, styles: R } = t(o), z = !!g, B = s((e) => {
+	let [j, M] = a.useState(!1), [N, P] = a.useState(!1), F = u || "button", I = !!b, L = x === "true" || x === !0, R = I || L, { classes: z, styles: B } = t(o), V = !!g, H = s((e) => {
 		if (a.isValidElement(e)) return e;
 		if (typeof e == "function") return a.createElement(e);
-	}, []), V = B(E), H = B(D), U = s((e) => {
+	}, []), U = H(E), W = H(D), G = s((e) => {
 		I || (M(!0), S?.(e));
-	}, [I, S]), W = s((e) => {
+	}, [I, S]), K = s((e) => {
 		I || (M(!1), C?.(e));
-	}, [I, C]), G = s((e) => {
+	}, [I, C]), q = s((e) => {
 		I || (P(!0), w?.(e));
-	}, [I, w]), K = s((e) => {
+	}, [I, w]), J = s((e) => {
 		I || (P(!1), T?.(e));
 	}, [I, T]);
 	return /* @__PURE__ */ l(F, {
 		ref: A,
-		className: e(i.Button, i[`Button--${d}`], i[`Button--size-${h}`], _ && i["Button--block"], I && i["Button--disabled"], L, v),
-		onMouseEnter: U,
-		onMouseLeave: W,
-		onFocus: G,
-		onBlur: K,
+		className: e(i.Button, i[`Button--${d}`], i[`Button--size-${h}`], _ && i["Button--block"], R && i["Button--disabled"], z, v),
+		onMouseEnter: G,
+		onMouseLeave: K,
+		onFocus: q,
+		onBlur: J,
 		disabled: I && F === "button" || void 0,
-		"aria-disabled": I && F !== "button" || void 0,
+		"aria-disabled": L || I && F !== "button" || void 0,
 		style: {
-			...R,
+			...B,
 			...O
 		},
 		...k,
 		children: [
-			a.isValidElement(V) && /* @__PURE__ */ c("span", {
+			a.isValidElement(U) && /* @__PURE__ */ c("span", {
 				className: i["Button__leading-visual"],
 				"data-testid": m.leadingVisual,
-				children: a.cloneElement(V, {
-					className: e(i["Button__icon-visual"], I && i["Button__icon-visual--disabled"]),
+				children: a.cloneElement(U, {
+					className: e(U.props.className, i["Button__icon-visual"], R && i["Button__icon-visual--disabled"]),
 					"aria-hidden": "true",
 					focusable: "false"
 				})
 			}),
-			/* @__PURE__ */ c("span", {
+			y && /* @__PURE__ */ c("span", {
 				className: i.Button__text,
 				children: /* @__PURE__ */ c(n, {
 					as: "span",
 					size: h === "small" ? "100" : h === "medium" ? "200" : "400",
 					weight: "medium",
-					className: e(i["Button--label"], i[`Button--label-${h}`], i[`Button--label-${d}`], I && i["Button-label--disabled"]),
+					className: e(i["Button--label"], i[`Button--label-${h}`], i[`Button--label-${d}`], R && i["Button-label--disabled"]),
 					children: y
 				})
 			}),
-			!D && z && /* @__PURE__ */ c("span", {
+			!D && V && /* @__PURE__ */ c("span", {
 				className: e(i["Button__trailing-visual"]),
 				children: /* @__PURE__ */ c(r, {
 					hidden: !0,
-					className: e(i["Button-arrow"], I && i["Button-arrow--disabled"]),
-					expanded: !I && (j || N),
+					className: e(i["Button-arrow"], R && i["Button-arrow--disabled"]),
+					expanded: !R && (j || N),
 					"data-testid": m.expandableArrow
 				})
 			}),
-			a.isValidElement(H) && /* @__PURE__ */ c("span", {
+			a.isValidElement(W) && /* @__PURE__ */ c("span", {
 				className: e(i["Button__trailing-visual"]),
 				"data-testid": m.trailingVisual,
-				children: a.cloneElement(H, {
-					className: e(i["Button__icon-visual"], I && i["Button__icon-visual--disabled"]),
+				children: a.cloneElement(W, {
+					className: e(W.props.className, i["Button__icon-visual"], R && i["Button__icon-visual--disabled"]),
 					"aria-hidden": "true",
 					focusable: "false"
 				})

package/esm/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useCallback, type Ref, ReactElement} from 'react'\nimport type {Icon} from '@primer/octicons-react'\n\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {Text} from '../Text'\nimport type {BaseProps} from '../component-helpers'\n\nimport {useAnimation} from '../'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css'\nimport styles from './Button.module.css'\n\nexport const ButtonVariants = ['primary', 'secondary', 'subtle'] as const\nexport const ButtonSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultButtonVariant = ButtonVariants[1]\nexport const defaultButtonSize = ButtonSizes[1]\n\nexport type ButtonVariant = (typeof ButtonVariants)[number]\n\nexport type ButtonBaseProps = {\n  /**\n   * The leading visual appears before the button content\n   */\n  leadingVisual?: ReactElement | Icon\n  /**\n   * The trailing visual appears after the button content\n   */\n  trailingVisual?: ReactElement | Icon\n  /**\n   * The styling variations available in Button\n   */\n  variant?: ButtonVariant\n  /**\n   * The size variations available in Button\n   */\n  size?: (typeof ButtonSizes)[number]\n  /**\n   * A flag to show/hide the arrow icon\n   * @deprecated The hasArrow prop is deprecated and will be removed in a future release.\n   */\n  hasArrow?: boolean\n  /**\n   * The Button spans the full width\n   */\n  block?: boolean\n}\n\nexport type ButtonProps<C extends React.ElementType> = BaseProps<C> & {\n  as?: C\n} & ButtonBaseProps &\n  React.ComponentPropsWithoutRef<C>\n\nconst testIds = {\n  root: 'Button',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n  get trailingVisual() {\n    return `${this.root}-trailing-visual`\n  },\n  get expandableArrow() {\n    return `${this.root}-expandable-arrow`\n  },\n}\n\nexport const _Button = forwardRef(\n  <C extends React.ElementType>(\n    {\n      animate,\n      as,\n      variant = defaultButtonVariant,\n      size = defaultButtonSize,\n      hasArrow,\n      block = false,\n      className,\n      children,\n      disabled,\n      'aria-disabled': ariaDisabled,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      leadingVisual: LeadingVisual,\n      trailingVisual: TrailingVisual,\n      style,\n      ...props\n    }: ButtonProps<C>,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const [isHovered, setIsHovered] = React.useState(false)\n    const [isFocused, setIsFocused] = React.useState(false)\n    const Component = as || 'button'\n    const isDisabled =\n      disabled || ariaDisabled === 'true' || (typeof ariaDisabled === 'boolean' && ariaDisabled === true)\n\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const showArrow = Boolean(hasArrow)\n\n    const returnValidComponent = useCallback((component?: ReactElement | Icon) => {\n      if (React.isValidElement(component)) {\n        return component\n      }\n\n      if (typeof component === 'function') {\n        return React.createElement(component)\n      }\n    }, [])\n\n    const LeadingVisualComponent = returnValidComponent(LeadingVisual)\n    const TrailingVisualComponent = returnValidComponent(TrailingVisual)\n\n    const handleOnMouseEnter = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsHovered(true)\n          onMouseEnter?.(event)\n        }\n      },\n      [isDisabled, onMouseEnter],\n    )\n\n    const handleOnMouseLeave = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsHovered(false)\n          onMouseLeave?.(event)\n        }\n      },\n      [isDisabled, onMouseLeave],\n    )\n\n    const handleOnFocus = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsFocused(true)\n          onFocus?.(event)\n        }\n      },\n      [isDisabled, onFocus],\n    )\n\n    const handleOnBlur = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsFocused(false)\n          onBlur?.(event)\n        }\n      },\n      [isDisabled, onBlur],\n    )\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx(\n          styles.Button,\n          styles[`Button--${variant}`],\n          styles[`Button--size-${size}`],\n          block && styles['Button--block'],\n          isDisabled && styles[`Button--disabled`],\n          animationClasses,\n          className,\n        )}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleOnMouseLeave}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        disabled={(isDisabled && Component === 'button') || undefined}\n        aria-disabled={(isDisabled && Component !== 'button') || undefined}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n          LeadingVisualComponent,\n        ) && (\n          <span className={styles['Button__leading-visual']} data-testid={testIds.leadingVisual}>\n            {React.cloneElement(LeadingVisualComponent, {\n              className: clsx(styles['Button__icon-visual'], isDisabled && styles['Button__icon-visual--disabled']),\n              ['aria-hidden']: 'true',\n              focusable: 'false',\n            })}\n          </span>\n        )}\n\n        <span className={styles['Button__text']}>\n          <Text\n            as=\"span\"\n            size={size === 'small' ? '100' : size === 'medium' ? '200' : '400'}\n            weight=\"medium\"\n            className={clsx(\n              styles['Button--label'],\n              styles[`Button--label-${size}`],\n              styles[`Button--label-${variant}`],\n              isDisabled && styles[`Button-label--disabled`],\n            )}\n          >\n            {children}\n          </Text>\n        </span>\n\n        {!TrailingVisual && showArrow && (\n          <span className={clsx(styles['Button__trailing-visual'])}>\n            <ExpandableArrow\n              hidden\n              className={clsx(styles['Button-arrow'], isDisabled && styles[`Button-arrow--disabled`])}\n              expanded={!isDisabled && (isHovered || isFocused)}\n              data-testid={testIds.expandableArrow}\n            />\n          </span>\n        )}\n        {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n          TrailingVisualComponent,\n        ) && (\n          <span className={clsx(styles['Button__trailing-visual'])} data-testid={testIds.trailingVisual}>\n            {React.cloneElement(TrailingVisualComponent, {\n              className: clsx(styles['Button__icon-visual'], isDisabled && styles['Button__icon-visual--disabled']),\n              ['aria-hidden']: 'true',\n              focusable: 'false',\n            })}\n          </span>\n        )}\n      </Component>\n    )\n  },\n)\n\nexport const Button = Object.assign(_Button, {testIds})\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useCallback, type Ref, ReactElement} from 'react'\nimport type {Icon} from '@primer/octicons-react'\n\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {Text} from '../Text'\nimport type {BaseProps} from '../component-helpers'\n\nimport {useAnimation} from '../animation'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/button/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css'\nimport styles from './Button.module.css'\n\nexport const ButtonVariants = ['primary', 'secondary', 'subtle'] as const\nexport const ButtonSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultButtonVariant = ButtonVariants[1]\nexport const defaultButtonSize = ButtonSizes[1]\n\nexport type ButtonVariant = (typeof ButtonVariants)[number]\nexport type ButtonSize = (typeof ButtonSizes)[number]\n\nexport type ButtonBaseProps = {\n  /**\n   * The leading visual appears before the button content\n   */\n  leadingVisual?: ReactElement | Icon\n  /**\n   * The trailing visual appears after the button content\n   */\n  trailingVisual?: ReactElement | Icon\n  /**\n   * The styling variations available in Button\n   */\n  variant?: ButtonVariant\n  /**\n   * The size variations available in Button\n   */\n  size?: ButtonSize\n  /**\n   * A flag to show/hide the arrow icon\n   * @deprecated The hasArrow prop is deprecated and will be removed in a future release.\n   */\n  hasArrow?: boolean\n  /**\n   * The Button spans the full width\n   */\n  block?: boolean\n}\n\nexport type ButtonProps<C extends React.ElementType = 'button'> = BaseProps<C> & {\n  as?: C\n} & ButtonBaseProps &\n  React.ComponentPropsWithoutRef<C>\n\nconst testIds = {\n  root: 'Button',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n  get trailingVisual() {\n    return `${this.root}-trailing-visual`\n  },\n  get expandableArrow() {\n    return `${this.root}-expandable-arrow`\n  },\n}\n\nexport const _Button = forwardRef(\n  <C extends React.ElementType>(\n    {\n      animate,\n      as,\n      variant = defaultButtonVariant,\n      size = defaultButtonSize,\n      hasArrow,\n      block = false,\n      className,\n      children,\n      disabled,\n      'aria-disabled': ariaDisabled,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      leadingVisual: LeadingVisual,\n      trailingVisual: TrailingVisual,\n      style,\n      ...props\n    }: ButtonProps<C>,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const [isHovered, setIsHovered] = React.useState(false)\n    const [isFocused, setIsFocused] = React.useState(false)\n    const Component = as || 'button'\n    const isDisabled = Boolean(disabled)\n    const isAriaDisabled = ariaDisabled === 'true' || ariaDisabled === true\n    const hasDisabledAppearance = isDisabled || isAriaDisabled\n\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const showArrow = Boolean(hasArrow)\n\n    const returnValidComponent = useCallback((component?: ReactElement | Icon) => {\n      if (React.isValidElement(component)) {\n        return component\n      }\n\n      if (typeof component === 'function') {\n        return React.createElement(component)\n      }\n    }, [])\n\n    const LeadingVisualComponent = returnValidComponent(LeadingVisual)\n    const TrailingVisualComponent = returnValidComponent(TrailingVisual)\n\n    const handleOnMouseEnter = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsHovered(true)\n          onMouseEnter?.(event)\n        }\n      },\n      [isDisabled, onMouseEnter],\n    )\n\n    const handleOnMouseLeave = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsHovered(false)\n          onMouseLeave?.(event)\n        }\n      },\n      [isDisabled, onMouseLeave],\n    )\n\n    const handleOnFocus = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsFocused(true)\n          onFocus?.(event)\n        }\n      },\n      [isDisabled, onFocus],\n    )\n\n    const handleOnBlur = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsFocused(false)\n          onBlur?.(event)\n        }\n      },\n      [isDisabled, onBlur],\n    )\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx(\n          styles.Button,\n          styles[`Button--${variant}`],\n          styles[`Button--size-${size}`],\n          block && styles['Button--block'],\n          hasDisabledAppearance && styles['Button--disabled'],\n          animationClasses,\n          className,\n        )}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleOnMouseLeave}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        disabled={(isDisabled && Component === 'button') || undefined}\n        aria-disabled={isAriaDisabled || (isDisabled && Component !== 'button') || undefined}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n          LeadingVisualComponent,\n        ) && (\n          <span className={styles['Button__leading-visual']} data-testid={testIds.leadingVisual}>\n            {React.cloneElement(LeadingVisualComponent, {\n              className: clsx(\n                LeadingVisualComponent.props.className,\n                styles['Button__icon-visual'],\n                hasDisabledAppearance && styles['Button__icon-visual--disabled'],\n              ),\n              ['aria-hidden']: 'true',\n              focusable: 'false',\n            })}\n          </span>\n        )}\n\n        {children && (\n          <span className={styles['Button__text']}>\n            <Text\n              as=\"span\"\n              size={size === 'small' ? '100' : size === 'medium' ? '200' : '400'}\n              weight=\"medium\"\n              className={clsx(\n                styles['Button--label'],\n                styles[`Button--label-${size}`],\n                styles[`Button--label-${variant}`],\n                hasDisabledAppearance && styles['Button-label--disabled'],\n              )}\n            >\n              {children}\n            </Text>\n          </span>\n        )}\n\n        {!TrailingVisual && showArrow && (\n          <span className={clsx(styles['Button__trailing-visual'])}>\n            <ExpandableArrow\n              hidden\n              className={clsx(styles['Button-arrow'], hasDisabledAppearance && styles['Button-arrow--disabled'])}\n              expanded={!hasDisabledAppearance && (isHovered || isFocused)}\n              data-testid={testIds.expandableArrow}\n            />\n          </span>\n        )}\n        {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n          TrailingVisualComponent,\n        ) && (\n          <span className={clsx(styles['Button__trailing-visual'])} data-testid={testIds.trailingVisual}>\n            {React.cloneElement(TrailingVisualComponent, {\n              className: clsx(\n                TrailingVisualComponent.props.className,\n                styles['Button__icon-visual'],\n                hasDisabledAppearance && styles['Button__icon-visual--disabled'],\n              ),\n              ['aria-hidden']: 'true',\n              focusable: 'false',\n            })}\n          </span>\n        )}\n      </Component>\n    )\n  },\n)\n\nexport const Button = Object.assign(_Button, {testIds})\n"],"mappings":"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"}

package/esm/Button/Button.module-CqRiLusx.css

@@ -0,0 +1 @@
+.Primer_Brand__Button-module__Button___scH9Z{appearance:none;-webkit-user-select:none;user-select:none;vertical-align:middle;border-radius:var(--base-size-6);cursor:pointer;border:solid var(--brand-borderWidth-thin) transparent;box-sizing:border-box;justify-content:center;align-items:center;gap:var(--brand-control-medium-gap);background:0 0;-webkit-text-decoration:none;text-decoration:none;transition:background-color .2s,border-color .2s;display:inline-flex}.Primer_Brand__Button-module__Button___scH9Z:where(button){font:inherit}.Primer_Brand__Button-module__Button___scH9Z:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Button-module__Button___scH9Z:focus-visible{outline:4px solid var(--brand-color-focus);outline-offset:2px;transition:none}.Primer_Brand__Button-module__Button--disabled___IHZ7f,.Primer_Brand__Button-module__Button--disabled___IHZ7f:hover,.Primer_Brand__Button-module__Button--disabled___IHZ7f:focus{cursor:not-allowed}.Primer_Brand__Button-module__Button--size-small___zQrEw .Primer_Brand__Button-module__Button__text___ED0bX{display:flex}.Primer_Brand__Button-module__Button__text___ED0bX{position:relative}.Primer_Brand__Button-module__Button--label___qrkyz{font-family:var(--brand-body-fontFamily);font-style:normal;font-weight:var(--base-text-weight-medium);text-align:center}.Primer_Brand__Button-module__Button__icon-visual____qybb{height:var(--brand-Button-icon-size-medium);fill:currentColor;align-self:center;width:auto;display:flex}.Primer_Brand__Button-module__Button__trailing-visual___5i3xR,.Primer_Brand__Button-module__Button__leading-visual___jjtTe{display:flex}.Primer_Brand__Button-module__Button-arrow___F4HtG{margin-inline-start:calc(var(--base-size-8) * -1);margin-inline-end:calc(var(--base-size-4) * -1)}.Primer_Brand__Button-module__Button--primary___MSbnU{color:var(--brand-button-primary-fgColor-rest);background-color:var(--brand-button-primary-bgColor-rest)}.Primer_Brand__Button-module__Button--size-small___zQrEw.Primer_Brand__Button-module__Button--primary___MSbnU{border-width:var(--brand-borderWidth-thin)}.Primer_Brand__Button-module__Button--primary___MSbnU:where(:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true])):hover{background-color:var(--brand-button-primary-bgColor-hover)}.Primer_Brand__Button-module__Button--primary___MSbnU:where(:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true])):active,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-expanded=true]{background:var(--brand-button-primary-bgColor-active);border-color:var(--brand-button-primary-borderColor-active)}.Primer_Brand__Button-module__Button--label-primary___QX1u5{color:var(--brand-button-primary-fgColor-rest)}.Primer_Brand__Button-module__Button--primary___MSbnU:disabled,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true],.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f{background-color:var(--brand-button-primary-bgColor-disabled)}.Primer_Brand__Button-module__Button--primary___MSbnU:where(:disabled,[aria-disabled=true],.Primer_Brand__Button-module__Button--disabled___IHZ7f) :where(.Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg),.Primer_Brand__Button-module__Button--label-primary___QX1u5.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-primary-fgColor-disabled)}.Primer_Brand__Button-module__Button--secondary___gHnw_{background-color:var(--brand-button-secondary-bgColor-rest);border-color:var(--brand-button-secondary-borderColor-rest);color:var(--brand-button-secondary-fgColor-rest);-webkit-backdrop-filter:blur(var(--base-size-20));backdrop-filter:blur(var(--base-size-20))}.Primer_Brand__Button-module__Button--secondary___gHnw_:where(:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true])):hover{background-color:var(--brand-button-secondary-bgColor-hover);border-color:var(--brand-button-secondary-borderColor-hover)}.Primer_Brand__Button-module__Button--secondary___gHnw_:where(:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true])):active,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-expanded=true]{background-color:var(--brand-button-secondary-bgColor-active);border-color:var(--brand-button-secondary-borderColor-active)}.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled{border-color:var(--brand-button-secondary-fgColor-disabled)}.Primer_Brand__Button-module__Button--secondary___gHnw_:where(:disabled,[aria-disabled=true],.Primer_Brand__Button-module__Button--disabled___IHZ7f) :where(.Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg),.Primer_Brand__Button-module__Button--label-secondary___eJ0_a.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-secondary-fgColor-disabled)}.Primer_Brand__Button-module__Button--subtle___F7pEE{background-color:var(--brand-button-subtle-bgColor-rest);border-width:var(--brand-borderWidth-thin);border-color:var(--brand-button-subtle-borderColor-rest);color:var(--brand-color-text-default);-webkit-backdrop-filter:blur(var(--base-size-20));backdrop-filter:blur(var(--base-size-20))}.Primer_Brand__Button-module__Button--subtle___F7pEE:where(:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true])):hover{background-color:var(--brand-button-subtle-bgColor-hover);border-color:var(--brand-button-subtle-borderColor-hover)}.Primer_Brand__Button-module__Button--subtle___F7pEE:where(:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true])):active,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-expanded=true]{background-color:var(--brand-button-subtle-bgColor-active);border-color:var(--brand-button-subtle-borderColor-active)}.Primer_Brand__Button-module__Button--label-subtle___8ndWH{color:var(--brand-button-subtle-fgColor-rest)}.Primer_Brand__Button-module__Button--subtle___F7pEE:where(:disabled,[aria-disabled=true],.Primer_Brand__Button-module__Button--disabled___IHZ7f) :where(.Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg),.Primer_Brand__Button-module__Button--label-subtle___8ndWH.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-subtle-fgColor-disabled)}.Primer_Brand__Button-module__Button--size-small___zQrEw{min-height:var(--brand-Button-control-size-small);padding-inline:var(--brand-control-small-paddingInline-normal)}.Primer_Brand__Button-module__Button--size-medium___KFmzx{min-height:var(--brand-Button-control-size-medium);padding:var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20)}.Primer_Brand__Button-module__Button--size-large___J6UCI{min-height:var(--brand-Button-control-size-large);padding:var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious)}.Primer_Brand__Button-module__Button--size-small___zQrEw :where(.Primer_Brand__Button-module__Button__icon-visual____qybb){height:var(--brand-Button-icon-size-small)}.Primer_Brand__Button-module__Button--size-medium___KFmzx :where(.Primer_Brand__Button-module__Button__icon-visual____qybb){height:var(--brand-Button-icon-size-medium)}.Primer_Brand__Button-module__Button--size-large___J6UCI :where(.Primer_Brand__Button-module__Button__icon-visual____qybb,.Primer_Brand__Button-module__Button-arrow___F4HtG){height:var(--brand-Button-icon-size-large);width:var(--brand-Button-icon-size-large)}.Primer_Brand__Button-module__Button--label-medium___ClmeR{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);letter-spacing:.01rem}.Primer_Brand__Button-module__Button--label-large___UDxqS{font-size:var(--brand-text-subhead-size-large);line-height:var(--brand-text-subhead-lineHeight-large)}.Primer_Brand__Button-module__Button--block___kCYDx{width:100%}@media (forced-colors:active){.Primer_Brand__Button-module__Button--disabled___IHZ7f{outline-color:graytext}.Primer_Brand__Button-module__Button--label___qrkyz.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:graytext}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Button-module__Button___scH9Z,.Primer_Brand__Button-module__Button___scH9Z:before,.Primer_Brand__Button-module__Button___scH9Z:after,.Primer_Brand__Button-module__Button___scH9Z *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Button/Button.module.js

@@ -1,4 +1,4 @@
-import './Button.module-9oHHqqnx.css';//#region src/Button/Button.module.css
+import './Button.module-CqRiLusx.css';//#region src/Button/Button.module.css
 var e = "Primer_Brand__Button-module__Button___scH9Z", t = "Primer_Brand__Button-module__Button__text___ED0bX", n = {
 	Button: e,
 	"Button--disabled": "Primer_Brand__Button-module__Button--disabled___IHZ7f",

package/esm/Button/Button.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.module.js","names":[],"sources":["../../src/Button/Button.module.css"],"sourcesContent":[".Button {\n  appearance: none;\n  user-select: none;\n  vertical-align: middle;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s, border-color 0.2s;\n  text-decoration: none;\n  border-radius: var(--base-size-6);\n  cursor: pointer;\n  border: solid var(--brand-borderWidth-thin) transparent;\n  background: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: var(--brand-control-medium-gap);\n}\n\n.Button:where(button) {\n  font: inherit;\n}\n\n.Button:hover {\n  text-decoration: none;\n}\n\n.Button:focus-visible {\n  transition: none;\n  outline: 4px solid var(--brand-color-focus);\n  outline-offset: 2px;\n}\n\n.Button--disabled,\n.Button--disabled:hover,\n.Button--disabled:focus {\n  cursor: not-allowed;\n}\n\n.Button--size-small .Button__text {\n  display: flex;\n}\n\n.Button__text {\n  position: relative;\n}\n\n.Button--label {\n  font-family: var(--brand-body-fontFamily);\n  font-style: normal;\n  font-weight: var(--base-text-weight-medium);\n  text-align: center;\n}\n\n.Button__icon-visual {\n  display: flex;\n  align-self: center;\n  height: var(--base-size-16);\n  width: auto;\n  fill: currentcolor;\n}\n\n.Button__trailing-visual,\n.Button__leading-visual {\n  display: flex;\n}\n\n/* optically adjust arrow to align with the end (right) padding */\n/* reduce gap between label and arrow */\n.Button-arrow {\n  margin-inline-end: calc(var(--base-size-4) * -1);\n  margin-inline-start: calc(var(--base-size-8) * -1);\n}\n\n/* primary */\n\n.Button--primary {\n  color: var(--brand-button-primary-fgColor-rest);\n  background-color: var(--brand-button-primary-bgColor-rest);\n}\n\n.Button--size-small.Button--primary {\n  border-width: var(--brand-borderWidth-thin);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  background-color: var(--brand-button-primary-bgColor-hover);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--primary[aria-expanded='true'] {\n  background: var(--brand-button-primary-bgColor-active);\n  border-color: var(--brand-button-primary-borderColor-active);\n}\n\n.Button--label-primary {\n  color: var(--brand-button-primary-fgColor-rest);\n}\n\n.Button--primary:disabled,\n.Button--primary[aria-disabled='true'],\n.Button--primary.Button--disabled {\n  background-color: var(--brand-button-primary-bgColor-disabled);\n}\n\n.Button--primary:disabled .Button-arrow--disabled,\n.Button--primary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--primary.Button--disabled .Button-arrow--disabled,\n.Button--primary:disabled .Button__icon-visual--disabled,\n.Button--primary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--primary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-primary.Button-label--disabled {\n  color: var(--brand-button-primary-fgColor-disabled);\n}\n\n/* secondary */\n\n.Button--secondary {\n  background-color: var(--brand-button-secondary-bgColor-rest);\n  border-color: var(--brand-button-secondary-borderColor-rest);\n  color: var(--brand-button-secondary-fgColor-rest);\n  backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  background-color: var(--brand-button-secondary-bgColor-hover);\n  border-color: var(--brand-button-secondary-borderColor-hover);\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--secondary[aria-expanded='true'] {\n  background-color: var(--brand-button-secondary-bgColor-active);\n  border-color: var(--brand-button-secondary-borderColor-active);\n}\n\n.Button--secondary:disabled {\n  border-color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n.Button--secondary:disabled .Button-arrow--disabled,\n.Button--secondary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--secondary.Button--disabled .Button-arrow--disabled,\n.Button--secondary:disabled .Button__icon-visual--disabled,\n.Button--secondary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--secondary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-secondary.Button-label--disabled {\n  color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n/* subtle */\n\n.Button--subtle {\n  background-color: var(--brand-button-subtle-bgColor-rest);\n  border-width: var(--brand-borderWidth-thin);\n  border-color: var(--brand-button-subtle-borderColor-rest);\n  color: var(--brand-color-text-default);\n  backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  background-color: var(--brand-button-subtle-bgColor-hover);\n  border-color: var(--brand-button-subtle-borderColor-hover);\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--subtle[aria-expanded='true'] {\n  background-color: var(--brand-button-subtle-bgColor-active);\n  border-color: var(--brand-button-subtle-borderColor-active);\n}\n\n.Button--label-subtle {\n  color: var(--brand-button-subtle-fgColor-rest);\n}\n\n.Button--subtle:disabled .Button-arrow--disabled,\n.Button--subtle[aria-disabled='true'] .Button-arrow--disabled,\n.Button--subtle.Button--disabled .Button-arrow--disabled,\n.Button--subtle:disabled .Button__icon-visual--disabled,\n.Button--subtle[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--subtle.Button--disabled .Button__icon-visual--disabled,\n.Button--label-subtle.Button-label--disabled {\n  color: var(--brand-button-subtle-fgColor-disabled);\n}\n\n/* size */\n\n.Button--size-small {\n  min-height: var(--brand-control-small-size);\n  padding-inline: var(--brand-control-small-paddingInline-normal);\n}\n\n.Button--size-medium {\n  min-height: var(--brand-control-medium-size);\n  padding: var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20);\n}\n\n.Button--size-large {\n  min-height: var(--brand-control-large-size);\n  padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);\n}\n\n.Button--size-large .Button__icon-visual,\n.Button--size-large .Button-arrow {\n  height: var(--base-size-20);\n  width: var(--base-size-20);\n}\n\n.Button--label-medium {\n  font-size: var(--brand-text-size-200);\n  line-height: var(--brand-text-lineHeight-200);\n  letter-spacing: 0.01rem;\n}\n\n.Button--label-large {\n  font-size: var(--brand-text-subhead-size-large);\n  line-height: var(--brand-text-subhead-lineHeight-large);\n}\n\n.Button--block {\n  width: 100%;\n}\n\n@media (forced-colors: active) {\n  .Button--disabled {\n    outline-color: GrayText;\n  }\n\n  /* Indicates disabled state in WHCM */\n  .Button--label.Button-label--disabled {\n    color: GrayText;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Button,\n  .Button::before,\n  .Button::after,\n  .Button * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.js","names":[],"sources":["../../src/Button/Button.module.css"],"sourcesContent":[".Button {\n  appearance: none;\n  user-select: none;\n  vertical-align: middle;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s, border-color 0.2s;\n  text-decoration: none;\n  border-radius: var(--base-size-6);\n  cursor: pointer;\n  border: solid var(--brand-borderWidth-thin) transparent;\n  background: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: var(--brand-control-medium-gap);\n}\n\n.Button:where(button) {\n  font: inherit;\n}\n\n.Button:hover {\n  text-decoration: none;\n}\n\n.Button:focus-visible {\n  transition: none;\n  outline: 4px solid var(--brand-color-focus);\n  outline-offset: 2px;\n}\n\n.Button--disabled,\n.Button--disabled:hover,\n.Button--disabled:focus {\n  cursor: not-allowed;\n}\n\n.Button--size-small .Button__text {\n  display: flex;\n}\n\n.Button__text {\n  position: relative;\n}\n\n.Button--label {\n  font-family: var(--brand-body-fontFamily);\n  font-style: normal;\n  font-weight: var(--base-text-weight-medium);\n  text-align: center;\n}\n\n.Button__icon-visual {\n  display: flex;\n  align-self: center;\n  height: var(--brand-Button-icon-size-medium);\n  width: auto;\n  fill: currentcolor;\n}\n\n.Button__trailing-visual,\n.Button__leading-visual {\n  display: flex;\n}\n\n/* optically adjust arrow to align with the end (right) padding */\n/* reduce gap between label and arrow */\n.Button-arrow {\n  margin-inline-end: calc(var(--base-size-4) * -1);\n  margin-inline-start: calc(var(--base-size-8) * -1);\n}\n\n/* primary */\n\n.Button--primary {\n  color: var(--brand-button-primary-fgColor-rest);\n  background-color: var(--brand-button-primary-bgColor-rest);\n}\n\n.Button--size-small.Button--primary {\n  border-width: var(--brand-borderWidth-thin);\n}\n\n.Button--primary:where(:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true'])):hover {\n  background-color: var(--brand-button-primary-bgColor-hover);\n}\n\n.Button--primary:where(:not(.Button[disabled], .Button[aria-disabled='true'])):active,\n.Button--primary[aria-expanded='true'] {\n  background: var(--brand-button-primary-bgColor-active);\n  border-color: var(--brand-button-primary-borderColor-active);\n}\n\n.Button--label-primary {\n  color: var(--brand-button-primary-fgColor-rest);\n}\n\n.Button--primary:disabled,\n.Button--primary[aria-disabled='true'],\n.Button--primary.Button--disabled {\n  background-color: var(--brand-button-primary-bgColor-disabled);\n}\n\n.Button--primary:where(:disabled, [aria-disabled='true'], .Button--disabled)\n  :where(.Button-arrow--disabled, .Button__icon-visual--disabled),\n.Button--label-primary.Button-label--disabled {\n  color: var(--brand-button-primary-fgColor-disabled);\n}\n\n/* secondary */\n\n.Button--secondary {\n  background-color: var(--brand-button-secondary-bgColor-rest);\n  border-color: var(--brand-button-secondary-borderColor-rest);\n  color: var(--brand-button-secondary-fgColor-rest);\n  backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--secondary:where(:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true'])):hover {\n  background-color: var(--brand-button-secondary-bgColor-hover);\n  border-color: var(--brand-button-secondary-borderColor-hover);\n}\n\n.Button--secondary:where(:not(.Button[disabled], .Button[aria-disabled='true'])):active,\n.Button--secondary[aria-expanded='true'] {\n  background-color: var(--brand-button-secondary-bgColor-active);\n  border-color: var(--brand-button-secondary-borderColor-active);\n}\n\n.Button--secondary:disabled {\n  border-color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n.Button--secondary:where(:disabled, [aria-disabled='true'], .Button--disabled)\n  :where(.Button-arrow--disabled, .Button__icon-visual--disabled),\n.Button--label-secondary.Button-label--disabled {\n  color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n/* subtle */\n\n.Button--subtle {\n  background-color: var(--brand-button-subtle-bgColor-rest);\n  border-width: var(--brand-borderWidth-thin);\n  border-color: var(--brand-button-subtle-borderColor-rest);\n  color: var(--brand-color-text-default);\n  backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--subtle:where(:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true'])):hover {\n  background-color: var(--brand-button-subtle-bgColor-hover);\n  border-color: var(--brand-button-subtle-borderColor-hover);\n}\n\n.Button--subtle:where(:not(.Button[disabled], .Button[aria-disabled='true'])):active,\n.Button--subtle[aria-expanded='true'] {\n  background-color: var(--brand-button-subtle-bgColor-active);\n  border-color: var(--brand-button-subtle-borderColor-active);\n}\n\n.Button--label-subtle {\n  color: var(--brand-button-subtle-fgColor-rest);\n}\n\n.Button--subtle:where(:disabled, [aria-disabled='true'], .Button--disabled)\n  :where(.Button-arrow--disabled, .Button__icon-visual--disabled),\n.Button--label-subtle.Button-label--disabled {\n  color: var(--brand-button-subtle-fgColor-disabled);\n}\n\n/* size */\n\n.Button--size-small {\n  min-height: var(--brand-Button-control-size-small);\n  padding-inline: var(--brand-control-small-paddingInline-normal);\n}\n\n.Button--size-medium {\n  min-height: var(--brand-Button-control-size-medium);\n  padding: var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20);\n}\n\n.Button--size-large {\n  min-height: var(--brand-Button-control-size-large);\n  padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);\n}\n\n/* Keep visual sizing overridable by composed controls such as IconButton. */\n.Button--size-small :where(.Button__icon-visual) {\n  height: var(--brand-Button-icon-size-small);\n}\n\n.Button--size-medium :where(.Button__icon-visual) {\n  height: var(--brand-Button-icon-size-medium);\n}\n\n.Button--size-large :where(.Button__icon-visual, .Button-arrow) {\n  height: var(--brand-Button-icon-size-large);\n  width: var(--brand-Button-icon-size-large);\n}\n\n.Button--label-medium {\n  font-size: var(--brand-text-size-200);\n  line-height: var(--brand-text-lineHeight-200);\n  letter-spacing: 0.01rem;\n}\n\n.Button--label-large {\n  font-size: var(--brand-text-subhead-size-large);\n  line-height: var(--brand-text-subhead-lineHeight-large);\n}\n\n.Button--block {\n  width: 100%;\n}\n\n@media (forced-colors: active) {\n  .Button--disabled {\n    outline-color: GrayText;\n  }\n\n  /* Indicates disabled state in WHCM */\n  .Button--label.Button-label--disabled {\n    color: GrayText;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Button,\n  .Button::before,\n  .Button::after,\n  .Button * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/ButtonGroup/ButtonGroup.d.ts

@@ -1,14 +1,20 @@
 import React from 'react';
 import type { BaseProps } from '../component-helpers';
 import { ButtonProps } from '../Button';
+import { type IconButtonProps } from '../IconButton';
 import { ActionMenuProps } from '../ActionMenu';
 export type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>;
+export type PrimerBrandIconButtonType = React.ReactElement<IconButtonProps<React.ElementType<'button' | 'a'>>>;
 export type PrimerBrandActionMenuType = React.ReactElement<ActionMenuProps>;
-export type ButtonGroupChild = PrimerBrandButtonType | PrimerBrandActionMenuType | false | null | undefined;
+export declare const ButtonGroupVariants: readonly ["default", "joined"];
+export declare const defaultButtonGroupVariant: "default";
+export type ButtonGroupVariant = (typeof ButtonGroupVariants)[number];
+export type ButtonGroupChild = PrimerBrandButtonType | PrimerBrandIconButtonType | PrimerBrandActionMenuType | false | null | undefined;
 export type ButtonGroupProps = BaseProps<HTMLDivElement> & {
     children: ButtonGroupChild | ButtonGroupChild[];
     buttonSize?: ButtonProps<'button' | 'a'>['size'];
     buttonsAs?: 'button' | 'a';
+    variant?: ButtonGroupVariant;
 };
 export declare const ButtonGroup: React.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=ButtonGroup.d.ts.map

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;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;AAC3E,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,yBAAyB,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAA;AAE3G,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACzD,QAAQ,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAA;IAC/C,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"}
+{"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,KAAK,eAAe,EAAC,MAAM,eAAe,CAAA;AAC9D,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,KAAK,CAAC,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;AAC9G,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAAA;AAC3E,eAAO,MAAM,mBAAmB,gCAAiC,CAAA;AACjE,eAAO,MAAM,yBAAyB,WAAyB,CAAA;AAE/D,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AACrE,MAAM,MAAM,gBAAgB,GACxB,qBAAqB,GACrB,yBAAyB,GACzB,yBAAyB,GACzB,KAAK,GACL,IAAI,GACJ,SAAS,CAAA;AAEb,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACzD,QAAQ,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAA;IAC/C,UAAU,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAA;IAC1B,OAAO,CAAC,EAAE,kBAAkB,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,WAAW,sGAqGvB,CAAA"}