@primer/react-brand 0.80.1 → 0.81.0-rc.0d1b7648

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 {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 {originalColorMode, colorMode: defaultColorMode} = useTheme()\n\n    const colorMode = className?.includes('ActionMenu__menu--split') ? 'light' : originalColorMode ?? 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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"}
+{"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  useImperativeHandle,\n} from 'react'\nimport {Button, ButtonProps} from '../Button'\nimport {IconButton, type IconButtonProps} from '../IconButton'\nimport {Text} from '../Text'\nimport {Tooltip} from '../Tooltip'\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 menuButtonRef = useRef<HTMLButtonElement>(null)\n    // Keep consumer callback ref changes independent of Tooltip's internal trigger ref.\n    useImperativeHandle(\n      mode === 'split-button' && !disabled ? ref : null,\n      () => menuButtonRef.current as HTMLButtonElement,\n      [],\n    )\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      const menuButton = (\n        <Button\n          ref={disabled ? ref : undefined}\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      )\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          {disabled ? (\n            menuButton\n          ) : (\n            <Tooltip ref={menuButtonRef} text={menuLabel}>\n              {menuButton}\n            </Tooltip>\n          )}\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 {originalColorMode, colorMode: defaultColorMode} = useTheme()\n\n    const colorMode = className?.includes('ActionMenu__menu--split') ? 'light' : originalColorMode ?? 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/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,eAAO,MAAM,WAAW,+BAAgC,CAAA;AACxD,eAAO,MAAM,YAAY,+BAAgC,CAAA;AAEzD,KAAK,kBAAkB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAAG;IACtD,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAA;IACvD,KAAK,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;IACrC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;AAiC7C,eAAO,MAAM,MAAM;;;;;CAAoC,CAAA"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD,eAAO,MAAM,WAAW,+BAAgC,CAAA;AACxD,eAAO,MAAM,YAAY,+BAAgC,CAAA;AAEzD,KAAK,kBAAkB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,gBAAgB,CAAC,GAAG;IACtD,IAAI,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,GAAG,iBAAiB,CAAA;IACvD,KAAK,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;IACrC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;AAuC7C,eAAO,MAAM,MAAM;;;;;CAAoC,CAAA"}

package/esm/Avatar/Avatar.js

@@ -17,10 +17,10 @@ var a = [
 }, c = n(({ alt: n, className: c, size: l = a[1], shape: u = o[0], "data-testid": d, src: f, ...p }, m) => {
 	let h = r(() => typeof l == "number" ? t[`Avatar--size-${l}`] : Object.keys(l).map((e) => t[`Avatar-${e}--size-${l[e]}`]).join(" "), [l]);
 	return /* @__PURE__ */ i("span", {
-		ref: m,
 		className: e(t.Avatar, h, t[`Avatar--shape-${u}`], c),
 		"data-testid": d || s.root,
 		children: /* @__PURE__ */ i("img", {
+			ref: m,
 			className: e(t.Avatar__image),
 			src: f,
 			alt: n,

package/esm/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Avatar.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const AvatarSizes = [32, 40, 48, 64, 80] as const\nexport const AvatarShapes = ['circle', 'square'] as const\n\ntype AvatarSizeVariants = (typeof AvatarSizes)[number]\n\ntype ResponsiveSizeMap = {\n  narrow?: AvatarSizeVariants\n  regular?: AvatarSizeVariants\n  wide?: AvatarSizeVariants\n}\n\nexport type AvatarProps = BaseProps<HTMLImageElement> & {\n  size?: (typeof AvatarSizes)[number] | ResponsiveSizeMap\n  shape?: (typeof AvatarShapes)[number]\n  src: string\n  alt: string\n  ['data-testid']?: string\n} & React.ImgHTMLAttributes<HTMLImageElement>\n\nconst testIds = {\n  root: 'Avatar',\n  get image() {\n    return `${this.root}__image`\n  },\n}\n\nconst _Avatar = forwardRef<HTMLImageElement, AvatarProps>(\n  ({alt, className, size = AvatarSizes[1], shape = AvatarShapes[0], 'data-testid': testId, src, ...props}, ref) => {\n    const sizeClass = useMemo(() => {\n      return typeof size === 'number'\n        ? styles[`Avatar--size-${size}`]\n        : Object.keys(size)\n            .map(viewport => {\n              return styles[`Avatar-${viewport}--size-${size[viewport]}`]\n            })\n            .join(' ')\n    }, [size])\n\n    return (\n      <span\n        ref={ref}\n        className={clsx(styles.Avatar, sizeClass, styles[`Avatar--shape-${shape}`], className)}\n        data-testid={testId || testIds.root}\n      >\n        <img className={clsx(styles.Avatar__image)} src={src} alt={alt} data-testid={testIds.image} {...props} />\n      </span>\n    )\n  },\n)\n\nexport const Avatar = Object.assign(_Avatar, {testIds})\n"],"mappings":";;;;;AAMA,IAAa,IAAc;CAAC;CAAI;CAAI;CAAI;CAAI;AAAE,GACjC,IAAe,CAAC,UAAU,QAAQ,GAkBzC,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;EACV,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAEM,IAAU,GACb,EAAC,QAAK,cAAW,UAAO,EAAY,IAAI,WAAQ,EAAa,IAAI,eAAe,GAAQ,QAAK,GAAG,KAAQ,MAAQ;CAC/G,IAAM,IAAY,QACT,OAAO,KAAS,WACnB,EAAO,gBAAgB,OACvB,OAAO,KAAK,CAAI,CAAC,CACd,KAAI,MACI,EAAO,UAAU,EAAS,SAAS,EAAK,KAChD,CAAC,CACD,KAAK,GAAG,GACd,CAAC,CAAI,CAAC;CAET,OACE,kBAAC,QAAD;EACO;EACL,WAAW,EAAK,EAAO,QAAQ,GAAW,EAAO,iBAAiB,MAAU,CAAS;EACrF,eAAa,KAAU,EAAQ;YAE/B,kBAAC,OAAD;GAAK,WAAW,EAAK,EAAO,aAAa;GAAQ;GAAU;GAAK,eAAa,EAAQ;GAAO,GAAI;EAAQ,CAAA;CACpG,CAAA;AAEV,CACF,GAEa,IAAS,OAAO,OAAO,GAAS,EAAC,WAAO,CAAC"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Avatar.module.css'\n\nimport type {BaseProps} from '../component-helpers'\n\nexport const AvatarSizes = [32, 40, 48, 64, 80] as const\nexport const AvatarShapes = ['circle', 'square'] as const\n\ntype AvatarSizeVariants = (typeof AvatarSizes)[number]\n\ntype ResponsiveSizeMap = {\n  narrow?: AvatarSizeVariants\n  regular?: AvatarSizeVariants\n  wide?: AvatarSizeVariants\n}\n\nexport type AvatarProps = BaseProps<HTMLImageElement> & {\n  size?: (typeof AvatarSizes)[number] | ResponsiveSizeMap\n  shape?: (typeof AvatarShapes)[number]\n  src: string\n  alt: string\n  ['data-testid']?: string\n} & React.ImgHTMLAttributes<HTMLImageElement>\n\nconst testIds = {\n  root: 'Avatar',\n  get image() {\n    return `${this.root}__image`\n  },\n}\n\nconst _Avatar = forwardRef<HTMLImageElement, AvatarProps>(\n  ({alt, className, size = AvatarSizes[1], shape = AvatarShapes[0], 'data-testid': testId, src, ...props}, ref) => {\n    const sizeClass = useMemo(() => {\n      return typeof size === 'number'\n        ? styles[`Avatar--size-${size}`]\n        : Object.keys(size)\n            .map(viewport => {\n              return styles[`Avatar-${viewport}--size-${size[viewport]}`]\n            })\n            .join(' ')\n    }, [size])\n\n    return (\n      <span\n        className={clsx(styles.Avatar, sizeClass, styles[`Avatar--shape-${shape}`], className)}\n        data-testid={testId || testIds.root}\n      >\n        <img\n          ref={ref}\n          className={clsx(styles.Avatar__image)}\n          src={src}\n          alt={alt}\n          data-testid={testIds.image}\n          {...props}\n        />\n      </span>\n    )\n  },\n)\n\nexport const Avatar = Object.assign(_Avatar, {testIds})\n"],"mappings":";;;;;AAMA,IAAa,IAAc;CAAC;CAAI;CAAI;CAAI;CAAI;AAAE,GACjC,IAAe,CAAC,UAAU,QAAQ,GAkBzC,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;EACV,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GAEM,IAAU,GACb,EAAC,QAAK,cAAW,UAAO,EAAY,IAAI,WAAQ,EAAa,IAAI,eAAe,GAAQ,QAAK,GAAG,KAAQ,MAAQ;CAC/G,IAAM,IAAY,QACT,OAAO,KAAS,WACnB,EAAO,gBAAgB,OACvB,OAAO,KAAK,CAAI,CAAC,CACd,KAAI,MACI,EAAO,UAAU,EAAS,SAAS,EAAK,KAChD,CAAC,CACD,KAAK,GAAG,GACd,CAAC,CAAI,CAAC;CAET,OACE,kBAAC,QAAD;EACE,WAAW,EAAK,EAAO,QAAQ,GAAW,EAAO,iBAAiB,MAAU,CAAS;EACrF,eAAa,KAAU,EAAQ;YAE/B,kBAAC,OAAD;GACO;GACL,WAAW,EAAK,EAAO,aAAa;GAC/B;GACA;GACL,eAAa,EAAQ;GACrB,GAAI;EACL,CAAA;CACG,CAAA;AAEV,CACF,GAEa,IAAS,OAAO,OAAO,GAAS,EAAC,WAAO,CAAC"}

package/esm/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,OAAO,EAAU,YAAY,EAAe,KAAK,UAAU,EAAC,MAAM,IAAI,CAAA;AAEtE,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAKnD;;GAEG;AACH,OAAO,+GAA+G,CAAA;AACtH,OAAO,2FAA2F,CAAA;AAClG,OAAO,wGAAwG,CAAA;AAQ/G,eAAO,MAAM,YAAY,iCAAkC,CAAA;AAC3D,eAAO,MAAM,eAAe,oCAAqC,CAAA;AACjE,eAAO,MAAM,oBAAoB,wCAAyC,CAAA;AAC1E,eAAO,MAAM,kBAAkB,uCAAwC,CAAA;AACvE,eAAO,MAAM,iBAAiB,mCAAoC,CAAA;AAClE,eAAO,MAAM,uBAAuB,8BAA+B,CAAA;AAEnE,eAAO,MAAM,cAAc,wIAAS,CAAA;AAEpC,eAAO,MAAM,oBAAoB,WAAoB,CAAA;AACrD,eAAO,MAAM,qBAAqB,QAAqB,CAAA;AACvD,eAAO,MAAM,uBAAuB,SAAuB,CAAA;AAE3D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AACjE,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AACvE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvE,KAAK,iBAAiB,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CAAA;AAEvF,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAClC,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GACjC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,GAClC,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,GACnC,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,GACpC,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAA;IAC5C;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;SAEK;IACL,IAAI,EAAE,MAAM,CAAA;IACZ;;SAEK;IACL,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAA;IACrC;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC3B,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,GAC5C,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,GACnG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAA;AAoLnG,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,aAAa,GAAG,WAAW,CAAA;IACtC,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B,GAAG,UAAU,CAAA;AAEd,iBAAS,SAAS,CAAC,EAAC,SAAS,EAAE,QAAwB,EAAE,OAAmB,EAAE,GAAG,IAAI,EAAC,EAAE,cAAc,qBAYrG;AAED,KAAK,aAAa,GAAG,SAAS,CAAA;AAM9B,KAAK,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CAC7B,CAAA;AAoBD,KAAK,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,EAAE,SAAS,CAAC,GAC/D,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B,CAAA;AAwBH,KAAK,gBAAgB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,GAC5E,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAqBrC,KAAK,oBAAoB,GAAG,SAAS,CAAC,oBAAoB,CAAC,GAAG;IAC5D,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAwBD;;;GAGG;AACH,eAAO,MAAM,IAAI;;mDA/G8C,SAAS;;;;;CAsHtE,CAAA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/esm/Card/Card.js

@@ -54,7 +54,6 @@ var _ = ["default", "minimal"], v = [
 				X === "block-end" ? F : null,
 				v === "none" ? null : /* @__PURE__ */ g("div", {
 					className: e(f.Card__action, v === "arrow" && f["Card__action--arrowOnly"]),
-					"aria-hidden": v === "arrow" || void 0,
 					children: [/* @__PURE__ */ h("span", {
 						className: e(v === "arrow" && f.Card__actionLabelClip),
 						children: /* @__PURE__ */ h(r, {

package/esm/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, {RefObject, forwardRef} from 'react'\n\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps} from '..'\nimport {EyebrowText} from '../EyebrowText'\nimport {Icon, type IconProps} from '../Icon'\nimport {Token} from '../Token'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport type {BaseProps} from '../component-helpers'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {Colors} from '../constants'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './Card.module.css'\nimport stylesLink from '../Link/Link.module.css'\n\nexport const CardVariants = ['default', 'minimal'] as const\nexport const CardCTAVariants = ['text', 'arrow', 'none'] as const\nexport const CardBackgroundColors = ['default', 'subtle', 'none'] as const\nexport const CardTokenPositions = ['block-start', 'block-end'] as const\nexport const CardLabelVariants = ['token', 'accent-text'] as const\nexport const CardImagePaddingOptions = ['default', 'none'] as const\n\nexport const CardIconColors = Colors\n\nexport const defaultCardIconColor = CardIconColors[0]\nexport const defaultCardCTAVariant = CardCTAVariants[0]\nexport const defaultCardLabelVariant = CardLabelVariants[0]\n\nexport type CardVariants = (typeof CardVariants)[number]\nexport type CardCTAVariant = (typeof CardCTAVariants)[number]\nexport type CardTokenPosition = (typeof CardTokenPositions)[number]\nexport type CardLabelVariant = (typeof CardLabelVariants)[number]\nexport type CardBackgroundColor = (typeof CardBackgroundColors)[number]\nexport type CardImagePadding = (typeof CardImagePaddingOptions)[number]\n\ntype CardLeadingVisual = React.ReactElement | React.ComponentType<{className?: string}>\n\nexport type CardProps = {\n  /**\n   * Specify alternative card appearance\n   */\n  variant?: CardVariants\n  /**\n   * Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description\n   */\n  children:\n    | React.ReactNode\n    | React.ReactElement<CardImageProps>\n    | React.ReactElement<CardIconProps>\n    | React.ReactElement<CardLabelProps>\n    | React.ReactElement<CardTokensProps>\n    | React.ReactElement<CardHeadingProps>\n    | React.ReactElement<CardDescriptionProps>\n  /**\n   * Disable transitions and animations within the Card\n   */\n  disableAnimation?: boolean\n  /**\n   * The href of the link\n   * */\n  href: string\n  /**\n   * Changes the cta text of the card\n   * */\n  ctaText?: string\n  /**\n   * Specifies the presentation of the call-to-action area\n   */\n  ctaVariant?: CardCTAVariant\n  /**\n   * Optional, custom background color.\n   */\n  backgroundColor?: CardBackgroundColor\n  /**\n   * A visual that appears before the heading, commonly used for a logo or brand mark\n   */\n  leadingVisual?: CardLeadingVisual\n  /**\n   * Adds a border to the card.\n   */\n  hasBorder?: boolean\n  /**\n   * Fills the width of the parent container and removes the default max-width.\n   */\n  fullWidth?: boolean\n  /**\n   * Aligns the card content\n   */\n  align?: 'start' | 'center'\n} & Omit<BaseProps<HTMLDivElement>, 'animate'> &\n  Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> &\n  Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      align = 'start',\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      children: childrenMaybeWrappedInFragment,\n      className,\n      ctaText = 'Learn more',\n      ctaVariant = defaultCardCTAVariant,\n      disableAnimation = false,\n      fullWidth = false,\n      href,\n      hasBorder = false,\n      leadingVisual,\n      style,\n      variant = 'default',\n      backgroundColor,\n      ...props\n    },\n    ref,\n  ) => {\n    const cardRef = useProvidedRefOrCreate(ref as RefObject<HTMLDivElement>)\n    const resolvedBackgroundColor =\n      backgroundColor ?? (variant === 'minimal' || ctaVariant === 'arrow' ? 'none' : 'default')\n\n    let children: React.ReactNode | null\n\n    if (childrenMaybeWrappedInFragment == null) {\n      children = null\n    } else if (isFragmentElement(childrenMaybeWrappedInFragment)) {\n      children = childrenMaybeWrappedInFragment.props.children ?? null\n    } else {\n      children = childrenMaybeWrappedInFragment\n    }\n\n    const {cardImage, cardIcon, cardLabel, cardTokensBlockStart, cardTokensBlockEnd, cardHeading, cardDescription} =\n      React.Children.toArray(children).reduce<{\n        cardHeading?: ReturnType<typeof CardHeading>\n        cardImage?: ReturnType<typeof CardImage>\n        cardIcon?: ReturnType<typeof CardIcon>\n        cardLabel?: ReturnType<typeof CardLabel>\n        cardTokensBlockStart?: ReturnType<typeof CardTokens>\n        cardTokensBlockEnd?: ReturnType<typeof CardTokens>\n        cardDescription?: ReturnType<typeof CardDescription>\n      }>((acc, child) => {\n        if (isCardHeading(child)) {\n          acc.cardHeading = React.cloneElement(child, {\n            href,\n          })\n        } else if (isCardImage(child)) {\n          acc.cardImage = child\n        } else if (isCardIcon(child)) {\n          acc.cardIcon = child\n        } else if (isCardLabel(child)) {\n          acc.cardLabel = child\n        } else if (isCardTokens(child)) {\n          if (child.props.position === 'block-end') {\n            acc.cardTokensBlockEnd = child\n          } else {\n            acc.cardTokensBlockStart = child\n          }\n        } else if (isCardDescription(child)) {\n          acc.cardDescription = child\n        }\n\n        return acc\n      }, {})\n\n    if ((process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && leadingVisual && cardIcon) {\n      // eslint-disable-next-line no-console\n      console.warn('Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.')\n    }\n\n    const renderedLeadingVisual = getRenderableLeadingVisual(leadingVisual)\n    const renderedCardIcon = renderedLeadingVisual ? undefined : cardIcon\n    const imagePosition = cardImage ? cardImage.props.position || 'block-start' : null\n    const shouldRenderLinkArrow = !(align === 'center' && ctaVariant === 'text')\n\n    return (\n      <DefaultCardWrapperComponent\n        style={style}\n        className={clsx(\n          fullWidth ? styles['Card--fullWidth'] : styles['Card--maxWidth'],\n          styles[`Card--align-${align}`],\n        )}\n      >\n        <div\n          className={clsx(\n            styles.Card,\n            disableAnimation && styles['Card--disableAnimation'],\n            renderedLeadingVisual && styles['Card--hasLeadingVisual'],\n            ctaVariant === 'arrow' && styles['Card--ctaVariant-arrow'],\n            cardTokensBlockEnd && styles['Card--tokensPosition-block-end'],\n            variant === 'minimal' && styles['Card--variant-minimal'],\n            hasBorder && styles['Card--border'],\n            styles[`Card--backgroundColor-${resolvedBackgroundColor}`],\n            imagePosition && styles[`Card--imagePos-${imagePosition}`],\n            className,\n          )}\n          style={style}\n          ref={cardRef}\n          {...props}\n        >\n          {imagePosition === 'block-start' ? cardImage : null}\n          {renderedLeadingVisual ? <div className={styles.Card__leadingVisual}>{renderedLeadingVisual}</div> : null}\n          {renderedCardIcon}\n          {cardTokensBlockStart}\n          {cardLabel}\n          {cardHeading}\n          {cardDescription}\n          {cardTokensBlockEnd}\n          {imagePosition === 'block-end' ? cardImage : null}\n\n          {ctaVariant !== 'none' ? (\n            <div\n              className={clsx(styles.Card__action, ctaVariant === 'arrow' && styles['Card__action--arrowOnly'])}\n              aria-hidden={ctaVariant === 'arrow' ? true : undefined}\n            >\n              <span className={clsx(ctaVariant === 'arrow' && styles.Card__actionLabelClip)}>\n                <Text as=\"span\" size=\"200\" className={clsx(stylesLink['Link--label'], styles.Card__actionLabel)}>\n                  {ctaText}\n                </Text>\n              </span>\n              {shouldRenderLinkArrow ? (\n                <span\n                  className={clsx(\n                    styles.Card__actionIcon,\n                    ctaVariant === 'arrow' && styles['Card__actionIcon--arrowOnly'],\n                  )}\n                >\n                  <ExpandableArrow\n                    className={clsx(stylesLink['Link-arrow'], styles['Card--expandableArrow'])}\n                    aria-hidden=\"true\"\n                  />\n                </span>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      </DefaultCardWrapperComponent>\n    )\n  },\n)\n\ntype DefaultCardWrapperComponentProps = React.PropsWithChildren<{\n  className?: string\n  style?: React.CSSProperties\n}>\n\nfunction DefaultCardWrapperComponent({className, children, style}: DefaultCardWrapperComponentProps) {\n  return (\n    <div className={clsx(styles['Card__outer'], className)} style={style}>\n      {children}\n    </div>\n  )\n}\n\nfunction getRenderableLeadingVisual(leadingVisual?: CardLeadingVisual) {\n  if (!leadingVisual) {\n    return null\n  }\n\n  if (typeof leadingVisual === 'function') {\n    return React.createElement(leadingVisual, {className: styles['Card__leadingVisualItem']})\n  }\n\n  if (React.isValidElement<{className?: string}>(leadingVisual)) {\n    return React.cloneElement(leadingVisual, {\n      className: clsx(styles['Card__leadingVisualItem'], leadingVisual.props.className),\n    })\n  }\n\n  return null\n}\n\nexport type CardImageProps = {\n  position?: 'block-start' | 'block-end'\n  padding?: CardImagePadding\n} & ImageProps\n\nfunction CardImage({className, position = 'block-start', padding = 'default', ...rest}: CardImageProps) {\n  return (\n    <div\n      className={clsx(\n        styles.Card__image,\n        styles[`Card__image--position-${position}`],\n        padding === 'none' && styles['Card__image--padding-none'],\n      )}\n    >\n      <Image className={className} {...rest} />\n    </div>\n  )\n}\n\ntype CardIconProps = IconProps\n\nconst CardIcon = ({className, hasBackground = true, ...props}: IconProps) => (\n  <Icon className={clsx(styles.Card__icon, className)} hasBackground={hasBackground} {...props} />\n)\n\ntype CardTokensProps = BaseProps<HTMLDivElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  position?: CardTokenPosition\n}\n\nconst CardTokens = forwardRef<HTMLDivElement, CardTokensProps>(\n  ({children, className, position = 'block-start', ...rest}, ref) => {\n    return (\n      <div\n        className={clsx(\n          styles.Card__tokens,\n          position === 'block-end' && styles['Card__tokens--position-block-end'],\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\ntype CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> &\n  Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {\n    children: React.ReactNode | React.ReactNode[]\n    variant?: CardLabelVariant\n  }\n\nconst CardLabel = forwardRef<HTMLSpanElement, CardLabelProps>(\n  ({children, variant = defaultCardLabelVariant, className, ...rest}, ref) => {\n    if (variant === 'accent-text') {\n      return (\n        <EyebrowText ref={ref} className={clsx(styles.Card__label, className)} variant=\"accent\" {...rest}>\n          {children}\n        </EyebrowText>\n      )\n    }\n\n    return (\n      <Token\n        ref={ref as React.Ref<HTMLSpanElement | HTMLAnchorElement>}\n        className={clsx(styles.Card__label, className)}\n        {...rest}\n      >\n        {children}\n      </Token>\n    )\n  },\n)\n\ntype CardHeadingProps = BaseProps<HTMLHeadingElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  as?: Exclude<HeadingProps['as'], 'h1'>\n  href?: string\n} & Omit<HeadingProps, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> &\n  React.ComponentPropsWithoutRef<'a'>\n\nconst CardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n  ({children, as = 'h3', className, href, onMouseEnter, onMouseLeave, onBlur, onFocus, ...rest}, ref) => {\n    return (\n      <Heading size=\"6\" className={clsx(styles.Card__heading, className)} ref={ref} as={as} {...rest}>\n        <a\n          href={href}\n          className={clsx(styles.Card__link)}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onBlur={onBlur}\n          onFocus={onFocus}\n        >\n          {children}\n        </a>\n      </Heading>\n    )\n  },\n)\n\ntype CardDescriptionProps = BaseProps<HTMLParagraphElement> & {\n  children: React.ReactNode | React.ReactNode[]\n}\n\nconst CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({children, className, ...rest}, ref) => {\n    return (\n      <Text variant=\"muted\" ref={ref} size=\"200\" as=\"p\" className={clsx(styles.Card__description, className)} {...rest}>\n        {children}\n      </Text>\n    )\n  },\n)\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement(element) && element.type === componentType\n\nconst isCardImage = createComponentTypeGuard(CardImage)\nconst isCardIcon = createComponentTypeGuard(CardIcon)\nconst isCardLabel = createComponentTypeGuard(CardLabel)\nconst isCardTokens = createComponentTypeGuard(CardTokens)\nconst isCardHeading = createComponentTypeGuard(CardHeading)\nconst isCardDescription = createComponentTypeGuard(CardDescription)\n\n/**\n * Card component:\n * @see https://primer.style/brand/components/Card\n */\nexport const Card = Object.assign(CardRoot, {\n  Image: CardImage,\n  Icon: CardIcon,\n  Label: CardLabel,\n  Tokens: CardTokens,\n  Heading: CardHeading,\n  Description: CardDescription,\n})\n"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, {RefObject, forwardRef} from 'react'\n\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps} from '..'\nimport {EyebrowText} from '../EyebrowText'\nimport {Icon, type IconProps} from '../Icon'\nimport {Token} from '../Token'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport type {BaseProps} from '../component-helpers'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {Colors} from '../constants'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './Card.module.css'\nimport stylesLink from '../Link/Link.module.css'\n\nexport const CardVariants = ['default', 'minimal'] as const\nexport const CardCTAVariants = ['text', 'arrow', 'none'] as const\nexport const CardBackgroundColors = ['default', 'subtle', 'none'] as const\nexport const CardTokenPositions = ['block-start', 'block-end'] as const\nexport const CardLabelVariants = ['token', 'accent-text'] as const\nexport const CardImagePaddingOptions = ['default', 'none'] as const\n\nexport const CardIconColors = Colors\n\nexport const defaultCardIconColor = CardIconColors[0]\nexport const defaultCardCTAVariant = CardCTAVariants[0]\nexport const defaultCardLabelVariant = CardLabelVariants[0]\n\nexport type CardVariants = (typeof CardVariants)[number]\nexport type CardCTAVariant = (typeof CardCTAVariants)[number]\nexport type CardTokenPosition = (typeof CardTokenPositions)[number]\nexport type CardLabelVariant = (typeof CardLabelVariants)[number]\nexport type CardBackgroundColor = (typeof CardBackgroundColors)[number]\nexport type CardImagePadding = (typeof CardImagePaddingOptions)[number]\n\ntype CardLeadingVisual = React.ReactElement | React.ComponentType<{className?: string}>\n\nexport type CardProps = {\n  /**\n   * Specify alternative card appearance\n   */\n  variant?: CardVariants\n  /**\n   * Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description\n   */\n  children:\n    | React.ReactNode\n    | React.ReactElement<CardImageProps>\n    | React.ReactElement<CardIconProps>\n    | React.ReactElement<CardLabelProps>\n    | React.ReactElement<CardTokensProps>\n    | React.ReactElement<CardHeadingProps>\n    | React.ReactElement<CardDescriptionProps>\n  /**\n   * Disable transitions and animations within the Card\n   */\n  disableAnimation?: boolean\n  /**\n   * The href of the link\n   * */\n  href: string\n  /**\n   * Changes the cta text of the card\n   * */\n  ctaText?: string\n  /**\n   * Specifies the presentation of the call-to-action area\n   */\n  ctaVariant?: CardCTAVariant\n  /**\n   * Optional, custom background color.\n   */\n  backgroundColor?: CardBackgroundColor\n  /**\n   * A visual that appears before the heading, commonly used for a logo or brand mark\n   */\n  leadingVisual?: CardLeadingVisual\n  /**\n   * Adds a border to the card.\n   */\n  hasBorder?: boolean\n  /**\n   * Fills the width of the parent container and removes the default max-width.\n   */\n  fullWidth?: boolean\n  /**\n   * Aligns the card content\n   */\n  align?: 'start' | 'center'\n} & Omit<BaseProps<HTMLDivElement>, 'animate'> &\n  Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> &\n  Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      align = 'start',\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      children: childrenMaybeWrappedInFragment,\n      className,\n      ctaText = 'Learn more',\n      ctaVariant = defaultCardCTAVariant,\n      disableAnimation = false,\n      fullWidth = false,\n      href,\n      hasBorder = false,\n      leadingVisual,\n      style,\n      variant = 'default',\n      backgroundColor,\n      ...props\n    },\n    ref,\n  ) => {\n    const cardRef = useProvidedRefOrCreate(ref as RefObject<HTMLDivElement>)\n    const resolvedBackgroundColor =\n      backgroundColor ?? (variant === 'minimal' || ctaVariant === 'arrow' ? 'none' : 'default')\n\n    let children: React.ReactNode | null\n\n    if (childrenMaybeWrappedInFragment == null) {\n      children = null\n    } else if (isFragmentElement(childrenMaybeWrappedInFragment)) {\n      children = childrenMaybeWrappedInFragment.props.children ?? null\n    } else {\n      children = childrenMaybeWrappedInFragment\n    }\n\n    const {cardImage, cardIcon, cardLabel, cardTokensBlockStart, cardTokensBlockEnd, cardHeading, cardDescription} =\n      React.Children.toArray(children).reduce<{\n        cardHeading?: ReturnType<typeof CardHeading>\n        cardImage?: ReturnType<typeof CardImage>\n        cardIcon?: ReturnType<typeof CardIcon>\n        cardLabel?: ReturnType<typeof CardLabel>\n        cardTokensBlockStart?: ReturnType<typeof CardTokens>\n        cardTokensBlockEnd?: ReturnType<typeof CardTokens>\n        cardDescription?: ReturnType<typeof CardDescription>\n      }>((acc, child) => {\n        if (isCardHeading(child)) {\n          acc.cardHeading = React.cloneElement(child, {\n            href,\n          })\n        } else if (isCardImage(child)) {\n          acc.cardImage = child\n        } else if (isCardIcon(child)) {\n          acc.cardIcon = child\n        } else if (isCardLabel(child)) {\n          acc.cardLabel = child\n        } else if (isCardTokens(child)) {\n          if (child.props.position === 'block-end') {\n            acc.cardTokensBlockEnd = child\n          } else {\n            acc.cardTokensBlockStart = child\n          }\n        } else if (isCardDescription(child)) {\n          acc.cardDescription = child\n        }\n\n        return acc\n      }, {})\n\n    if ((process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && leadingVisual && cardIcon) {\n      // eslint-disable-next-line no-console\n      console.warn('Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.')\n    }\n\n    const renderedLeadingVisual = getRenderableLeadingVisual(leadingVisual)\n    const renderedCardIcon = renderedLeadingVisual ? undefined : cardIcon\n    const imagePosition = cardImage ? cardImage.props.position || 'block-start' : null\n    const shouldRenderLinkArrow = !(align === 'center' && ctaVariant === 'text')\n\n    return (\n      <DefaultCardWrapperComponent\n        style={style}\n        className={clsx(\n          fullWidth ? styles['Card--fullWidth'] : styles['Card--maxWidth'],\n          styles[`Card--align-${align}`],\n        )}\n      >\n        <div\n          className={clsx(\n            styles.Card,\n            disableAnimation && styles['Card--disableAnimation'],\n            renderedLeadingVisual && styles['Card--hasLeadingVisual'],\n            ctaVariant === 'arrow' && styles['Card--ctaVariant-arrow'],\n            cardTokensBlockEnd && styles['Card--tokensPosition-block-end'],\n            variant === 'minimal' && styles['Card--variant-minimal'],\n            hasBorder && styles['Card--border'],\n            styles[`Card--backgroundColor-${resolvedBackgroundColor}`],\n            imagePosition && styles[`Card--imagePos-${imagePosition}`],\n            className,\n          )}\n          style={style}\n          ref={cardRef}\n          {...props}\n        >\n          {imagePosition === 'block-start' ? cardImage : null}\n          {renderedLeadingVisual ? <div className={styles.Card__leadingVisual}>{renderedLeadingVisual}</div> : null}\n          {renderedCardIcon}\n          {cardTokensBlockStart}\n          {cardLabel}\n          {cardHeading}\n          {cardDescription}\n          {cardTokensBlockEnd}\n          {imagePosition === 'block-end' ? cardImage : null}\n\n          {ctaVariant !== 'none' ? (\n            <div className={clsx(styles.Card__action, ctaVariant === 'arrow' && styles['Card__action--arrowOnly'])}>\n              <span className={clsx(ctaVariant === 'arrow' && styles.Card__actionLabelClip)}>\n                <Text as=\"span\" size=\"200\" className={clsx(stylesLink['Link--label'], styles.Card__actionLabel)}>\n                  {ctaText}\n                </Text>\n              </span>\n              {shouldRenderLinkArrow ? (\n                <span\n                  className={clsx(\n                    styles.Card__actionIcon,\n                    ctaVariant === 'arrow' && styles['Card__actionIcon--arrowOnly'],\n                  )}\n                >\n                  <ExpandableArrow\n                    className={clsx(stylesLink['Link-arrow'], styles['Card--expandableArrow'])}\n                    aria-hidden=\"true\"\n                  />\n                </span>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      </DefaultCardWrapperComponent>\n    )\n  },\n)\n\ntype DefaultCardWrapperComponentProps = React.PropsWithChildren<{\n  className?: string\n  style?: React.CSSProperties\n}>\n\nfunction DefaultCardWrapperComponent({className, children, style}: DefaultCardWrapperComponentProps) {\n  return (\n    <div className={clsx(styles['Card__outer'], className)} style={style}>\n      {children}\n    </div>\n  )\n}\n\nfunction getRenderableLeadingVisual(leadingVisual?: CardLeadingVisual) {\n  if (!leadingVisual) {\n    return null\n  }\n\n  if (typeof leadingVisual === 'function') {\n    return React.createElement(leadingVisual, {className: styles['Card__leadingVisualItem']})\n  }\n\n  if (React.isValidElement<{className?: string}>(leadingVisual)) {\n    return React.cloneElement(leadingVisual, {\n      className: clsx(styles['Card__leadingVisualItem'], leadingVisual.props.className),\n    })\n  }\n\n  return null\n}\n\nexport type CardImageProps = {\n  position?: 'block-start' | 'block-end'\n  padding?: CardImagePadding\n} & ImageProps\n\nfunction CardImage({className, position = 'block-start', padding = 'default', ...rest}: CardImageProps) {\n  return (\n    <div\n      className={clsx(\n        styles.Card__image,\n        styles[`Card__image--position-${position}`],\n        padding === 'none' && styles['Card__image--padding-none'],\n      )}\n    >\n      <Image className={className} {...rest} />\n    </div>\n  )\n}\n\ntype CardIconProps = IconProps\n\nconst CardIcon = ({className, hasBackground = true, ...props}: IconProps) => (\n  <Icon className={clsx(styles.Card__icon, className)} hasBackground={hasBackground} {...props} />\n)\n\ntype CardTokensProps = BaseProps<HTMLDivElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  position?: CardTokenPosition\n}\n\nconst CardTokens = forwardRef<HTMLDivElement, CardTokensProps>(\n  ({children, className, position = 'block-start', ...rest}, ref) => {\n    return (\n      <div\n        className={clsx(\n          styles.Card__tokens,\n          position === 'block-end' && styles['Card__tokens--position-block-end'],\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\ntype CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> &\n  Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {\n    children: React.ReactNode | React.ReactNode[]\n    variant?: CardLabelVariant\n  }\n\nconst CardLabel = forwardRef<HTMLSpanElement, CardLabelProps>(\n  ({children, variant = defaultCardLabelVariant, className, ...rest}, ref) => {\n    if (variant === 'accent-text') {\n      return (\n        <EyebrowText ref={ref} className={clsx(styles.Card__label, className)} variant=\"accent\" {...rest}>\n          {children}\n        </EyebrowText>\n      )\n    }\n\n    return (\n      <Token\n        ref={ref as React.Ref<HTMLSpanElement | HTMLAnchorElement>}\n        className={clsx(styles.Card__label, className)}\n        {...rest}\n      >\n        {children}\n      </Token>\n    )\n  },\n)\n\ntype CardHeadingProps = BaseProps<HTMLHeadingElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  as?: Exclude<HeadingProps['as'], 'h1'>\n  href?: string\n} & Omit<HeadingProps, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> &\n  React.ComponentPropsWithoutRef<'a'>\n\nconst CardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n  ({children, as = 'h3', className, href, onMouseEnter, onMouseLeave, onBlur, onFocus, ...rest}, ref) => {\n    return (\n      <Heading size=\"6\" className={clsx(styles.Card__heading, className)} ref={ref} as={as} {...rest}>\n        <a\n          href={href}\n          className={clsx(styles.Card__link)}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onBlur={onBlur}\n          onFocus={onFocus}\n        >\n          {children}\n        </a>\n      </Heading>\n    )\n  },\n)\n\ntype CardDescriptionProps = BaseProps<HTMLParagraphElement> & {\n  children: React.ReactNode | React.ReactNode[]\n}\n\nconst CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({children, className, ...rest}, ref) => {\n    return (\n      <Text variant=\"muted\" ref={ref} size=\"200\" as=\"p\" className={clsx(styles.Card__description, className)} {...rest}>\n        {children}\n      </Text>\n    )\n  },\n)\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement(element) && element.type === componentType\n\nconst isCardImage = createComponentTypeGuard(CardImage)\nconst isCardIcon = createComponentTypeGuard(CardIcon)\nconst isCardLabel = createComponentTypeGuard(CardLabel)\nconst isCardTokens = createComponentTypeGuard(CardTokens)\nconst isCardHeading = createComponentTypeGuard(CardHeading)\nconst isCardDescription = createComponentTypeGuard(CardDescription)\n\n/**\n * Card component:\n * @see https://primer.style/brand/components/Card\n */\nexport const Card = Object.assign(CardRoot, {\n  Image: CardImage,\n  Icon: CardIcon,\n  Label: CardLabel,\n  Tokens: CardTokens,\n  Heading: CardHeading,\n  Description: CardDescription,\n})\n"],"mappings":"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"}

package/esm/ComparisonTable/ComparisonTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComparisonTable.d.ts","sourceRoot":"","sources":["../../src/ComparisonTable/ComparisonTable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAgC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAG7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,oHAAoH,CAAA;AAC3H,OAAO,mHAAmH,CAAA;AAK1H,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG;IAC7E,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAA;AAErC,eAAO,MAAM,gBAAgB,qKA4J5B,CAAA;AAED,KAAK,QAAQ,GAAG,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,GAAG;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAMD,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,oBAAoB,CAAC,GACrD,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG;IAC3C,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CACjB,CAAA;AAOH,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,oBAAoB,CAAC,CAAA;AAa3D;;;;;GAKG;AACH,eAAO,MAAM,eAAe;iCAjCM,iBAAiB,CAAC,QAAQ,CAAC;uCASrB,iBAAiB,CAAC,SAAS,CAAC;uCAO5B,iBAAiB,CAAC,aAAa,CAAC;CAqBtE,CAAA"}
+{"version":3,"file":"ComparisonTable.d.ts","sourceRoot":"","sources":["../../src/ComparisonTable/ComparisonTable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAgC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAG7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,oHAAoH,CAAA;AAC3H,OAAO,mHAAmH,CAAA;AAK1H,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG;IAC7E,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAA;AAErC,eAAO,MAAM,gBAAgB,qKAgK5B,CAAA;AAED,KAAK,QAAQ,GAAG,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,GAAG;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAMD,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,oBAAoB,CAAC,GACrD,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG;IAC3C,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CACjB,CAAA;AAOH,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,oBAAoB,CAAC,CAAA;AAa3D;;;;;GAKG;AACH,eAAO,MAAM,eAAe;iCAjCM,iBAAiB,CAAC,QAAQ,CAAC;uCASrB,iBAAiB,CAAC,SAAS,CAAC;uCAO5B,iBAAiB,CAAC,aAAa,CAAC;CAqBtE,CAAA"}

package/esm/ComparisonTable/ComparisonTable.js

@@ -16,7 +16,7 @@ var u = o(({ as: n, animate: o, children: u, className: m, heading: h, featuredC
 				let o = r === g;
 				return a.cloneElement(n, {
 					as: n.props.children ? "th" : "td",
-					className: e(i["ComparisonTable-cell"], i["ComparisonTable-cell-heading"], i[`ComparisonTable-cell-heading--${v}`], r === 0 && i["ComparisonTable-cell-heading--first"], o && i["ComparisonTable-cell-heading--featured"], t.props.className),
+					className: e(i["ComparisonTable-cell"], i["ComparisonTable-cell-heading"], i[`ComparisonTable-cell-heading--${v}`], r === 0 && i["ComparisonTable-cell-heading--first"], (r !== 0 || !n.props.children) && i["ComparisonTable-cell-heading--hidden-on-narrow"], v === "default" && r !== 0 && i["ComparisonTable-cell--bordered-on-narrow"], o && i["ComparisonTable-cell-heading--featured"], t.props.className),
 					children: /* @__PURE__ */ l("span", {
 						className: e(r === g && i["ComparisonTable-cell-heading-label--featured"]),
 						children: [n.props.children, o && /* @__PURE__ */ l("span", {
@@ -42,7 +42,7 @@ var u = o(({ as: n, animate: o, children: u, className: m, heading: h, featuredC
 		children: a.Children.map(t.props.children, (r, o) => a.isValidElement(r) && r.type === f ? /* @__PURE__ */ l(f, {
 			...r.props,
 			as: o === 0 ? "th" : "td",
-			className: e(i["ComparisonTable-cell"], i[`ComparisonTable-cell--${v}`], o === 0 && i["ComparisonTable-cell-heading"], o === 0 && i[`ComparisonTable-cell-heading--${v}`], o === g && i["ComparisonTable-cell--featured"], k.length - 1 === n && i["ComparisonTable-cell--lastrow"], t.props.className),
+			className: e(i["ComparisonTable-cell"], i[`ComparisonTable-cell--${v}`], v === "default" && i["ComparisonTable-cell--bordered-on-narrow"], o === 0 && i["ComparisonTable-cell-heading"], o === 0 && i[`ComparisonTable-cell-heading--${v}`], o === g && i["ComparisonTable-cell--featured"], k.length - 1 === n && i["ComparisonTable-cell--lastrow"], t.props.className),
 			children: [o >= 1 && /* @__PURE__ */ c("span", {
 				className: e(i["ComparisonTable-inline-cell-label"], i["ComparisonTable--hide-element-on-narrow"], o === g && i["ComparisonTable-cell-heading-label--featured"]),
 				children: O[o]

package/esm/ComparisonTable/ComparisonTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComparisonTable.js","names":[],"sources":["../../src/ComparisonTable/ComparisonTable.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref, useMemo, PropsWithChildren} from 'react'\nimport {Heading, Text, useAnimation} from '../'\n\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './ComparisonTable.module.css'\n\nexport type ComparisonTableProps<C extends React.ElementType> = BaseProps<C> & {\n  as?: C\n  heading?: string\n  variant?: 'default' | 'minimal'\n  featuredColumn?: number\n} & React.ComponentPropsWithoutRef<C>\n\nexport const _ComparisonTable = forwardRef(\n  <C extends React.ElementType>(\n    {\n      as,\n      animate,\n      children,\n      className,\n      heading,\n      featuredColumn = 1,\n      visuallyHiddenFeaturedLabel = 'featured',\n      variant = 'default',\n      style,\n      ...props\n    }: ComparisonTableProps<C>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const Component = as || 'section'\n\n    const Children = useMemo(\n      () =>\n        React.Children.toArray(children).filter(\n          (child): child is React.ReactElement => React.isValidElement(child) && typeof child.type !== 'string',\n        ),\n      [children],\n    )\n\n    const rowChildren = Children.filter(\n      (child): child is React.ReactElement<PropsWithChildren<RowProps>> => child.type === Row,\n    )\n\n    const HeaderRow = rowChildren\n      .map((child, index) => {\n        if (index === 0) {\n          return React.cloneElement(child, {\n            className: clsx(styles['ComparisonTable-row'], child.props.className),\n            children: React.Children.map(child.props.children, (rowChild, rowChildIndex) => {\n              if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n                const isFeatured = rowChildIndex === featuredColumn\n                return React.cloneElement(rowChild, {\n                  as: rowChild.props.children ? 'th' : 'td',\n                  className: clsx(\n                    styles['ComparisonTable-cell'],\n                    styles[`ComparisonTable-cell-heading`],\n                    styles[`ComparisonTable-cell-heading--${variant}`],\n                    rowChildIndex === 0 && styles[`ComparisonTable-cell-heading--first`],\n                    isFeatured && styles[`ComparisonTable-cell-heading--featured`],\n                    child.props.className,\n                  ),\n                  children: (\n                    <span\n                      className={clsx(\n                        rowChildIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n                      )}\n                    >\n                      {rowChild.props.children}\n                      {isFeatured && <span className=\"visually-hidden\">({visuallyHiddenFeaturedLabel})</span>}\n                    </span>\n                  ),\n                })\n              }\n              return null\n            }),\n          })\n        }\n        return null\n      })\n      .filter(Boolean)\n\n    const headerRowNames = useMemo(() => {\n      const firstRow = rowChildren.at(0)\n      if (!firstRow) return []\n\n      return (\n        React.Children.map(firstRow.props.children, child => {\n          if (React.isValidElement<CellProps>(child)) {\n            return child.props.children\n          }\n          return undefined\n        }) || []\n      )\n    }, [rowChildren])\n\n    const [, ...regularRows] = rowChildren\n\n    const RegularRows = regularRows.map((child, index) => {\n      return React.cloneElement(child, {\n        className: clsx(styles['ComparisonTable-row'], `ComparisonTable-row--${index}`, child.props.className),\n        children: React.Children.map(child.props.children, (rowChild, cellIndex) => {\n          if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n            return (\n              <Cell\n                {...rowChild.props}\n                as={cellIndex === 0 ? 'th' : 'td'}\n                className={clsx(\n                  styles['ComparisonTable-cell'],\n                  styles[`ComparisonTable-cell--${variant}`],\n                  cellIndex === 0 && styles[`ComparisonTable-cell-heading`],\n                  cellIndex === 0 && styles[`ComparisonTable-cell-heading--${variant}`],\n                  cellIndex === featuredColumn && styles[`ComparisonTable-cell--featured`],\n                  regularRows.length - 1 === index && styles['ComparisonTable-cell--lastrow'],\n                  child.props.className,\n                )}\n              >\n                {cellIndex >= 1 && (\n                  <span\n                    className={clsx(\n                      styles['ComparisonTable-inline-cell-label'],\n                      styles['ComparisonTable--hide-element-on-narrow'],\n                      cellIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n                    )}\n                  >\n                    {headerRowNames[cellIndex]}\n                  </span>\n                )}\n                <span\n                  className={clsx(\n                    styles['ComparisonTable-cell-container'],\n                    cellIndex === featuredColumn && styles['ComparisonTable-cell-container--featured'],\n                  )}\n                >\n                  {rowChild.props.children}\n                </span>\n              </Cell>\n            )\n          }\n          return null\n        }),\n      })\n    })\n\n    const FootnoteChild = Children.find(\n      (child): child is React.ReactElement<PropsWithChildren<FootnoteProps>> => child.type === Footnote,\n    )\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx(animationClasses, className)}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {heading && (\n          <Heading className={styles['ComparisonTable--heading']} as=\"h3\" size=\"4\">\n            {heading}\n          </Heading>\n        )}\n        <table className={clsx(styles.ComparisonTable, `ComparisonTable--${variant}`)}>\n          {HeaderRow.length && <thead>{HeaderRow}</thead>}\n          {RegularRows.length && <tbody>{RegularRows}</tbody>}\n        </table>\n        {FootnoteChild && <footer className={styles['ComparisonTable-footnote']}>{FootnoteChild}</footer>}\n      </Component>\n    )\n  },\n)\n\ntype RowProps = React.HTMLAttributes<HTMLTableRowElement> & {\n  header?: boolean\n}\n\nconst Row = ({children, ...rest}: PropsWithChildren<RowProps>) => {\n  return <tr {...rest}>{children}</tr>\n}\n\nexport type CellProps = BaseProps<HTMLTableCellElement> &\n  React.HTMLAttributes<HTMLTableCellElement> & {\n    as?: 'td' | 'th'\n  }\n\nconst Cell = ({as, children, ...props}: PropsWithChildren<CellProps>) => {\n  const Tag = as || 'td'\n  return <Tag {...props}>{children}</Tag>\n}\n\nexport type FootnoteProps = BaseProps<HTMLParagraphElement>\n\nconst Footnote = ({children, ...props}: PropsWithChildren<FootnoteProps>) => {\n  if (typeof children === 'string') {\n    return (\n      <Text as=\"p\" size=\"100\" variant=\"muted\">\n        {children}\n      </Text>\n    )\n  }\n  return <div {...props}>{children}</div>\n}\n\n/**\n * @description\n *  Comparison tables are used to aid decision-making by displaying a list of features and their associated qualities side-by-side.\n *  They are useful for comparing products, plans, or features in marketing pages.\n * @see https://primer.style/brand/components/ComparisonTable\n */\nexport const ComparisonTable = Object.assign(_ComparisonTable, {\n  Row,\n  Cell,\n  Footnote,\n})\n"],"mappings":";;;;;;;;;;AAsBA,IAAa,IAAmB,GAE5B,EACE,OACA,YACA,aACA,cACA,YACA,oBAAiB,GACjB,iCAA8B,YAC9B,aAAU,WACV,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,CAAO,GAEjF,IAAY,KAAM,WAElB,IAAW,QAEb,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,QAC9B,MAAuC,EAAM,eAAe,CAAK,KAAK,OAAO,EAAM,QAAS,QAC/F,GACF,CAAC,CAAQ,CACX,GAEM,IAAc,EAAS,QAC1B,MAAoE,EAAM,SAAS,CACtF,GAEM,IAAY,EACf,KAAK,GAAO,MACP,MAAU,IACL,EAAM,aAAa,GAAO;EAC/B,WAAW,EAAK,EAAO,wBAAwB,EAAM,MAAM,SAAS;EACpE,UAAU,EAAM,SAAS,IAAI,EAAM,MAAM,WAAW,GAAU,MAAkB;GAC9E,IAAI,EAAM,eAA0B,CAAQ,KAAK,EAAS,SAAS,GAAM;IACvE,IAAM,IAAa,MAAkB;IACrC,OAAO,EAAM,aAAa,GAAU;KAClC,IAAI,EAAS,MAAM,WAAW,OAAO;KACrC,WAAW,EACT,EAAO,yBACP,EAAO,iCACP,EAAO,iCAAiC,MACxC,MAAkB,KAAK,EAAO,wCAC9B,KAAc,EAAO,2CACrB,EAAM,MAAM,SACd;KACA,UACE,kBAAC,QAAD;MACE,WAAW,EACT,MAAkB,KAAkB,EAAO,+CAC7C;gBAHF,CAKG,EAAS,MAAM,UACf,KAAc,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QAAkC;QAAE;QAA4B;OAAO;QAClF;;IAEV,CAAC;GACH;GACA,OAAO;EACT,CAAC;CACH,CAAC,IAEI,IACR,CAAC,CACD,OAAO,OAAO,GAEX,IAAiB,QAAc;EACnC,IAAM,IAAW,EAAY,GAAG,CAAC;EAGjC,OAFK,KAGH,EAAM,SAAS,IAAI,EAAS,MAAM,WAAU,MAAS;GACnD,IAAI,EAAM,eAA0B,CAAK,GACvC,OAAO,EAAM,MAAM;EAGvB,CAAC,KARmB,CAAC;CAUzB,GAAG,CAAC,CAAW,CAAC,GAEV,GAAG,GAAG,KAAe,GAErB,IAAc,EAAY,KAAK,GAAO,MACnC,EAAM,aAAa,GAAO;EAC/B,WAAW,EAAK,EAAO,wBAAwB,wBAAwB,KAAS,EAAM,MAAM,SAAS;EACrG,UAAU,EAAM,SAAS,IAAI,EAAM,MAAM,WAAW,GAAU,MACxD,EAAM,eAA0B,CAAQ,KAAK,EAAS,SAAS,IAE/D,kBAAC,GAAD;GACE,GAAI,EAAS;GACb,IAAI,MAAc,IAAI,OAAO;GAC7B,WAAW,EACT,EAAO,yBACP,EAAO,yBAAyB,MAChC,MAAc,KAAK,EAAO,iCAC1B,MAAc,KAAK,EAAO,iCAAiC,MAC3D,MAAc,KAAkB,EAAO,mCACvC,EAAY,SAAS,MAAM,KAAS,EAAO,kCAC3C,EAAM,MAAM,SACd;aAXF,CAaG,KAAa,KACZ,kBAAC,QAAD;IACE,WAAW,EACT,EAAO,sCACP,EAAO,4CACP,MAAc,KAAkB,EAAO,+CACzC;cAEC,EAAe;GACZ,CAAA,GAER,kBAAC,QAAD;IACE,WAAW,EACT,EAAO,mCACP,MAAc,KAAkB,EAAO,2CACzC;cAEC,EAAS,MAAM;GACZ,CAAA,CACF;OAGH,IACR;CACH,CAAC,CACF,GAEK,IAAgB,EAAS,MAC5B,MAAyE,EAAM,SAAS,CAC3F;CAEA,OACE,kBAAC,GAAD;EACO;EACL,WAAW,EAAK,GAAkB,CAAS;EAC3C,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;EAC1C,GAAI;YAJN;GAMG,KACC,kBAAC,GAAD;IAAS,WAAW,EAAO;IAA6B,IAAG;IAAK,MAAK;cAClE;GACM,CAAA;GAEX,kBAAC,SAAD;IAAO,WAAW,EAAK,EAAO,iBAAiB,oBAAoB,GAAS;cAA5E,CACG,EAAU,UAAU,kBAAC,SAAD,EAAA,UAAQ,EAAiB,CAAA,GAC7C,EAAY,UAAU,kBAAC,SAAD,EAAA,UAAQ,EAAmB,CAAA,CAC7C;;GACN,KAAiB,kBAAC,UAAD;IAAQ,WAAW,EAAO;cAA8B;GAAsB,CAAA;EACvF;;AAEf,CACF,GAMM,KAAO,EAAC,aAAU,GAAG,QAClB,kBAAC,MAAD;CAAI,GAAI;CAAO;AAAa,CAAA,GAQ/B,KAAQ,EAAC,OAAI,aAAU,GAAG,QAEvB,kBADK,KAAM,MACX;CAAK,GAAI;CAAQ;AAAc,CAAA,GAKlC,KAAY,EAAC,aAAU,GAAG,QAC1B,OAAO,KAAa,WAEpB,kBAAC,GAAD;CAAM,IAAG;CAAI,MAAK;CAAM,SAAQ;CAC7B;AACG,CAAA,IAGH,kBAAC,OAAD;CAAK,GAAI;CAAQ;AAAc,CAAA,GAS3B,IAAkB,OAAO,OAAO,GAAkB;CAC7D;CACA;CACA;AACF,CAAC"}
+{"version":3,"file":"ComparisonTable.js","names":[],"sources":["../../src/ComparisonTable/ComparisonTable.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref, useMemo, PropsWithChildren} from 'react'\nimport {Heading, Text, useAnimation} from '../'\n\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './ComparisonTable.module.css'\n\nexport type ComparisonTableProps<C extends React.ElementType> = BaseProps<C> & {\n  as?: C\n  heading?: string\n  variant?: 'default' | 'minimal'\n  featuredColumn?: number\n} & React.ComponentPropsWithoutRef<C>\n\nexport const _ComparisonTable = forwardRef(\n  <C extends React.ElementType>(\n    {\n      as,\n      animate,\n      children,\n      className,\n      heading,\n      featuredColumn = 1,\n      visuallyHiddenFeaturedLabel = 'featured',\n      variant = 'default',\n      style,\n      ...props\n    }: ComparisonTableProps<C>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const Component = as || 'section'\n\n    const Children = useMemo(\n      () =>\n        React.Children.toArray(children).filter(\n          (child): child is React.ReactElement => React.isValidElement(child) && typeof child.type !== 'string',\n        ),\n      [children],\n    )\n\n    const rowChildren = Children.filter(\n      (child): child is React.ReactElement<PropsWithChildren<RowProps>> => child.type === Row,\n    )\n\n    const HeaderRow = rowChildren\n      .map((child, index) => {\n        if (index === 0) {\n          return React.cloneElement(child, {\n            className: clsx(styles['ComparisonTable-row'], child.props.className),\n            children: React.Children.map(child.props.children, (rowChild, rowChildIndex) => {\n              if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n                const isFeatured = rowChildIndex === featuredColumn\n                return React.cloneElement(rowChild, {\n                  as: rowChild.props.children ? 'th' : 'td',\n                  className: clsx(\n                    styles['ComparisonTable-cell'],\n                    styles[`ComparisonTable-cell-heading`],\n                    styles[`ComparisonTable-cell-heading--${variant}`],\n                    rowChildIndex === 0 && styles[`ComparisonTable-cell-heading--first`],\n                    (rowChildIndex !== 0 || !rowChild.props.children) &&\n                      styles['ComparisonTable-cell-heading--hidden-on-narrow'],\n                    variant === 'default' && rowChildIndex !== 0 && styles['ComparisonTable-cell--bordered-on-narrow'],\n                    isFeatured && styles[`ComparisonTable-cell-heading--featured`],\n                    child.props.className,\n                  ),\n                  children: (\n                    <span\n                      className={clsx(\n                        rowChildIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n                      )}\n                    >\n                      {rowChild.props.children}\n                      {isFeatured && <span className=\"visually-hidden\">({visuallyHiddenFeaturedLabel})</span>}\n                    </span>\n                  ),\n                })\n              }\n              return null\n            }),\n          })\n        }\n        return null\n      })\n      .filter(Boolean)\n\n    const headerRowNames = useMemo(() => {\n      const firstRow = rowChildren.at(0)\n      if (!firstRow) return []\n\n      return (\n        React.Children.map(firstRow.props.children, child => {\n          if (React.isValidElement<CellProps>(child)) {\n            return child.props.children\n          }\n          return undefined\n        }) || []\n      )\n    }, [rowChildren])\n\n    const [, ...regularRows] = rowChildren\n\n    const RegularRows = regularRows.map((child, index) => {\n      return React.cloneElement(child, {\n        className: clsx(styles['ComparisonTable-row'], `ComparisonTable-row--${index}`, child.props.className),\n        children: React.Children.map(child.props.children, (rowChild, cellIndex) => {\n          if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n            return (\n              <Cell\n                {...rowChild.props}\n                as={cellIndex === 0 ? 'th' : 'td'}\n                className={clsx(\n                  styles['ComparisonTable-cell'],\n                  styles[`ComparisonTable-cell--${variant}`],\n                  variant === 'default' && styles['ComparisonTable-cell--bordered-on-narrow'],\n                  cellIndex === 0 && styles[`ComparisonTable-cell-heading`],\n                  cellIndex === 0 && styles[`ComparisonTable-cell-heading--${variant}`],\n                  cellIndex === featuredColumn && styles[`ComparisonTable-cell--featured`],\n                  regularRows.length - 1 === index && styles['ComparisonTable-cell--lastrow'],\n                  child.props.className,\n                )}\n              >\n                {cellIndex >= 1 && (\n                  <span\n                    className={clsx(\n                      styles['ComparisonTable-inline-cell-label'],\n                      styles['ComparisonTable--hide-element-on-narrow'],\n                      cellIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n                    )}\n                  >\n                    {headerRowNames[cellIndex]}\n                  </span>\n                )}\n                <span\n                  className={clsx(\n                    styles['ComparisonTable-cell-container'],\n                    cellIndex === featuredColumn && styles['ComparisonTable-cell-container--featured'],\n                  )}\n                >\n                  {rowChild.props.children}\n                </span>\n              </Cell>\n            )\n          }\n          return null\n        }),\n      })\n    })\n\n    const FootnoteChild = Children.find(\n      (child): child is React.ReactElement<PropsWithChildren<FootnoteProps>> => child.type === Footnote,\n    )\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx(animationClasses, className)}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {heading && (\n          <Heading className={styles['ComparisonTable--heading']} as=\"h3\" size=\"4\">\n            {heading}\n          </Heading>\n        )}\n        <table className={clsx(styles.ComparisonTable, `ComparisonTable--${variant}`)}>\n          {HeaderRow.length && <thead>{HeaderRow}</thead>}\n          {RegularRows.length && <tbody>{RegularRows}</tbody>}\n        </table>\n        {FootnoteChild && <footer className={styles['ComparisonTable-footnote']}>{FootnoteChild}</footer>}\n      </Component>\n    )\n  },\n)\n\ntype RowProps = React.HTMLAttributes<HTMLTableRowElement> & {\n  header?: boolean\n}\n\nconst Row = ({children, ...rest}: PropsWithChildren<RowProps>) => {\n  return <tr {...rest}>{children}</tr>\n}\n\nexport type CellProps = BaseProps<HTMLTableCellElement> &\n  React.HTMLAttributes<HTMLTableCellElement> & {\n    as?: 'td' | 'th'\n  }\n\nconst Cell = ({as, children, ...props}: PropsWithChildren<CellProps>) => {\n  const Tag = as || 'td'\n  return <Tag {...props}>{children}</Tag>\n}\n\nexport type FootnoteProps = BaseProps<HTMLParagraphElement>\n\nconst Footnote = ({children, ...props}: PropsWithChildren<FootnoteProps>) => {\n  if (typeof children === 'string') {\n    return (\n      <Text as=\"p\" size=\"100\" variant=\"muted\">\n        {children}\n      </Text>\n    )\n  }\n  return <div {...props}>{children}</div>\n}\n\n/**\n * @description\n *  Comparison tables are used to aid decision-making by displaying a list of features and their associated qualities side-by-side.\n *  They are useful for comparing products, plans, or features in marketing pages.\n * @see https://primer.style/brand/components/ComparisonTable\n */\nexport const ComparisonTable = Object.assign(_ComparisonTable, {\n  Row,\n  Cell,\n  Footnote,\n})\n"],"mappings":"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"}

package/esm/ComparisonTable/ComparisonTable.module-BeNq6ZNV.css

@@ -0,0 +1 @@
+.Primer_Brand__ComparisonTable-module__ComparisonTable--heading___hSsMK{text-align:left;max-width:18ch;margin-bottom:var(--brand-ComparisonTable-heading-marginBottom)}@media screen and (width>=34rem){.Primer_Brand__ComparisonTable-module__ComparisonTable--heading___hSsMK{text-align:center;margin-left:auto;margin-right:auto}}.Primer_Brand__ComparisonTable-module__ComparisonTable-footnote___VE0Vy{text-align:left;margin:var(--base-size-24) 0}@media screen and (width>=34rem){.Primer_Brand__ComparisonTable-module__ComparisonTable-footnote___VE0Vy{text-align:center}}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n{border-collapse:collapse;border-spacing:0;font-family:var(--brand-body-fontFamily);width:100%}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tr{text-align:left;flex-direction:column;width:100%;display:flex}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell___4CiEs{color:var(--brand-color-text-default);font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);padding-bottom:var(--base-size-24)}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ{font-weight:var(--base-text-weight-medium);font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container___NtAjB{padding-top:var(--base-size-8);display:block}@media screen and (width<=34rem){.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--hidden-on-narrow___3_jG9{display:none}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell___4CiEs{margin-bottom:var(--base-size-32);padding-bottom:0}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tbody tr{border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-default)}.Primer_Brand__ComparisonTable-module__ComparisonTable-inline-cell-label___ymZgc{font-weight:var(--brand-heading-weight-400);font-size:var(--brand-text-size-400);line-height:var(--brand-heading-lineHeight-400)}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tbody .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ{margin-top:var(--base-size-24);margin-bottom:var(--base-size-16);font-weight:var(--brand-heading-weight-300);font-size:var(--brand-text-size-300);line-height:var(--brand-heading-lineHeight-300)}}@media screen and (width>=34rem){.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tr{flex-direction:row}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container___NtAjB{padding-top:var(--base-size-24)}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ{text-align:left}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ:first-child{width:25%;margin-right:40px}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tr td:first-of-type:not(.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ),.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tr:first-of-type .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ:nth-child(2){width:40%}.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tr td:nth-of-type(2):not(.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ),.Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n tr:first-of-type .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ:nth-child(3){width:35%;margin-left:40px}.Primer_Brand__ComparisonTable-module__ComparisonTable--hide-element-on-narrow___mI7kt{display:none}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container___NtAjB{border-top:var(--brand-borderWidth-thick) solid var(--brand-color-border-default)}}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--first___MaZ10{color:var(--brand-color-text-muted)}.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ{padding:var(--base-size-24) 0 var(--base-size-16)}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading-label--featured___bySQY{z-index:2;position:relative}@media screen and (width<=34rem){.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell___4CiEs:not(.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ){padding-left:25px;position:relative}.Primer_Brand__ComparisonTable-module__ComparisonTable-cell--bordered-on-narrow___r8FJ5:before{content:"";background:var(--brand-color-border-default);width:5px;position:absolute;top:0;bottom:0;left:0}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj:before{background:linear-gradient(180deg, var(--brand-ComparisonTable-featured-color-start), var(--brand-ComparisonTable-featured-color-end))}}@media screen and (width>=34rem){.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading-label--featured___bySQY{color:#0000;background:linear-gradient(89.46deg, var(--brand-ComparisonTable-featured-color-start) 0.87%, var(--brand-ComparisonTable-featured-color-end) 75.12%);-webkit-background-clip:text;background-clip:text}.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ{font-weight:var(--brand-heading-weight-400);font-size:var(--brand-text-size-400);line-height:var(--brand-heading-lineHeight-400);align-items:flex-end;display:inline-flex}.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--first___MaZ10{font-weight:var(--brand-heading-weight-400);font-size:var(--brand-text-size-400);line-height:var(--brand-heading-lineHeight-400)}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj,.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___m0kpq{padding-left:var(--base-size-24);padding-right:var(--base-size-24);border-right:2px solid var(--brand-ComparisonTable-featured-color-end);border-left:2px solid var(--brand-ComparisonTable-featured-color-start)}.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___m0kpq{background:var(--brand-color-canvas-default);border-top-left-radius:.45rem;border-top-right-radius:.45rem;position:relative}.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___m0kpq:before,.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___m0kpq:after{z-index:0;content:"";background:linear-gradient(90deg, var(--brand-ComparisonTable-featured-color-start), var(--brand-ComparisonTable-featured-color-end));border-top-left-radius:.45rem;border-top-right-radius:.45rem;position:absolute;inset:-2px -2px 0}.ComparisonTable--default thead .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___m0kpq:after{z-index:1;background:var(--brand-color-canvas-default);border-top-left-radius:.35rem;border-top-right-radius:.35rem;top:0;left:0;right:0}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj.Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___yABeN{background:var(--brand-color-canvas-default);border-bottom-right-radius:.45rem;border-bottom-left-radius:.45rem;position:relative}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj.Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___yABeN:after,.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj.Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___yABeN:before{z-index:0;content:"";background:linear-gradient(90deg, var(--brand-ComparisonTable-featured-color-start), var(--brand-ComparisonTable-featured-color-end));border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem;position:absolute;inset:0 -2px}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj.Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___yABeN:after{z-index:1;background:var(--brand-color-canvas-default);border-bottom-right-radius:.35rem;border-bottom-left-radius:.35rem;bottom:2px;left:0;right:0}.ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container--featured___ezdmW{z-index:2;position:relative}}

package/esm/ComparisonTable/ComparisonTable.module.js

@@ -1,4 +1,4 @@
-import './ComparisonTable.module-CUq68rV0.css';//#region src/ComparisonTable/ComparisonTable.module.css
+import './ComparisonTable.module-BeNq6ZNV.css';//#region src/ComparisonTable/ComparisonTable.module.css
 var e = "Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n", t = {
 	"ComparisonTable--heading": "Primer_Brand__ComparisonTable-module__ComparisonTable--heading___hSsMK",
 	"ComparisonTable-footnote": "Primer_Brand__ComparisonTable-module__ComparisonTable-footnote___VE0Vy",
@@ -6,10 +6,12 @@ var e = "Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n", t = {
 	"ComparisonTable-cell": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell___4CiEs",
 	"ComparisonTable-cell-heading": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___GoDXQ",
 	"ComparisonTable-cell-container": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container___NtAjB",
+	"ComparisonTable-cell-heading--hidden-on-narrow": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--hidden-on-narrow___3_jG9",
 	"ComparisonTable-inline-cell-label": "Primer_Brand__ComparisonTable-module__ComparisonTable-inline-cell-label___ymZgc",
 	"ComparisonTable--hide-element-on-narrow": "Primer_Brand__ComparisonTable-module__ComparisonTable--hide-element-on-narrow___mI7kt",
 	"ComparisonTable-cell-heading--first": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--first___MaZ10",
 	"ComparisonTable-cell-heading-label--featured": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading-label--featured___bySQY",
+	"ComparisonTable-cell--bordered-on-narrow": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell--bordered-on-narrow___r8FJ5",
 	"ComparisonTable-cell--featured": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell--featured___ND9Zj",
 	"ComparisonTable-cell-heading--featured": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading--featured___m0kpq",
 	"ComparisonTable-cell--lastrow": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell--lastrow___yABeN",

package/esm/ComparisonTable/ComparisonTable.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComparisonTable.module.js","names":[],"sources":["../../src/ComparisonTable/ComparisonTable.module.css"],"sourcesContent":["/*\n* Heading\n*/\n.ComparisonTable--heading {\n  text-align: left;\n  max-width: 18ch;\n  margin-bottom: var(--brand-ComparisonTable-heading-marginBottom);\n}\n\n/* Narrow breakpoint */\n\n@media screen and (min-width: 34rem) {\n  .ComparisonTable--heading {\n    margin-left: auto;\n    margin-right: auto;\n    text-align: center;\n  }\n}\n\n/**\n * Footnotes\n */\n\n.ComparisonTable-footnote {\n  text-align: left;\n  margin: var(--base-size-24) 0;\n}\n\n@media screen and (min-width: 34rem) {\n  .ComparisonTable-footnote {\n    text-align: center;\n  }\n}\n\n/*\n* Table\n*/\n\n.ComparisonTable {\n  border-collapse: collapse;\n  border-spacing: 0;\n  font-family: var(--brand-body-fontFamily);\n  width: 100%;\n}\n\n.ComparisonTable tr {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  text-align: left;\n}\n\n.ComparisonTable-cell {\n  color: var(--brand-color-text-default);\n  font-weight: var(--brand-text-weight-200);\n  font-size: var(--brand-text-size-200);\n  line-height: var(--brand-text-lineHeight-200);\n  padding-bottom: var(--base-size-24);\n}\n\n.ComparisonTable-cell-heading {\n  font-weight: var(--base-text-weight-medium);\n  font-size: var(--brand-text-size-200);\n  line-height: var(--brand-text-lineHeight-200);\n}\n\n.ComparisonTable-cell-container {\n  display: block;\n  padding-top: var(--base-size-8);\n}\n\n/*\n * Narrow viewport-only styles\n*/\n@media screen and (max-width: 34rem) {\n  .ComparisonTable thead .ComparisonTable-cell-heading {\n    display: none;\n  }\n\n  .ComparisonTable-cell {\n    margin-bottom: var(--base-size-32);\n    padding-bottom: 0;\n  }\n\n  .ComparisonTable tbody tr {\n    border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  }\n\n  .ComparisonTable-inline-cell-label {\n    font-weight: var(--brand-heading-weight-400);\n    font-size: var(--brand-text-size-400);\n    line-height: var(--brand-heading-lineHeight-400);\n  }\n\n  .ComparisonTable tbody .ComparisonTable-cell-heading {\n    margin-top: var(--base-size-24);\n    margin-bottom: var(--base-size-16);\n    font-weight: var(--brand-heading-weight-300);\n    font-size: var(--brand-text-size-300);\n    line-height: var(--brand-heading-lineHeight-300);\n  }\n}\n\n/*\n * Narrow landscape and above viewport styles\n*/\n@media screen and (min-width: 34rem) {\n  .ComparisonTable tr {\n    flex-direction: row;\n  }\n\n  .ComparisonTable-cell-container {\n    padding-top: var(--base-size-24);\n  }\n\n  .ComparisonTable-cell-heading {\n    text-align: left;\n  }\n\n  .ComparisonTable .ComparisonTable-cell-heading:first-child {\n    width: 25%;\n    margin-right: 40px;\n  }\n\n  .ComparisonTable tr td:nth-of-type(1):not(.ComparisonTable-cell-heading),\n  .ComparisonTable tr:nth-of-type(1) .ComparisonTable-cell-heading:nth-child(2) {\n    width: 40%;\n  }\n  .ComparisonTable tr td:nth-of-type(2):not(.ComparisonTable-cell-heading),\n  .ComparisonTable tr:nth-of-type(1) .ComparisonTable-cell-heading:nth-child(3) {\n    width: 35%;\n    margin-left: 40px;\n  }\n\n  .ComparisonTable--hide-element-on-narrow {\n    display: none;\n  }\n\n  .ComparisonTable-cell-container {\n    border-top: var(--brand-borderWidth-thick) solid var(--brand-color-border-default);\n  }\n}\n\n/*\n * Default presentation\n */\n:global(.ComparisonTable--default) .ComparisonTable-cell-heading--first {\n  color: var(--brand-color-text-muted);\n}\n\n:global(.ComparisonTable--default) thead .ComparisonTable-cell-heading {\n  padding: var(--base-size-24) 0 var(--base-size-16);\n}\n\n:global(.ComparisonTable--default) .ComparisonTable-cell-heading-label--featured {\n  position: relative;\n  z-index: 2;\n}\n\n/*\n * Narrow viewport-only styles\n*/\n@media screen and (max-width: 34rem) {\n  :global(.ComparisonTable--default) .ComparisonTable-cell:not(.ComparisonTable-cell-heading) {\n    position: relative;\n    padding-left: 25px;\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    width: 5px;\n    background: var(--brand-color-border-default);\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured::before {\n    background: linear-gradient(\n      180deg,\n      var(--brand-ComparisonTable-featured-color-start),\n      var(--brand-ComparisonTable-featured-color-end)\n    );\n  }\n}\n\n/*\n * Narrow landscape and above viewport styles\n*/\n@media screen and (min-width: 34rem) {\n  :global(.ComparisonTable--default) .ComparisonTable-cell-heading-label--featured {\n    color: transparent;\n    background: linear-gradient(\n      89.46deg,\n      var(--brand-ComparisonTable-featured-color-start) 0.87%,\n      var(--brand-ComparisonTable-featured-color-end) 75.12%\n    );\n    -webkit-background-clip: text;\n    background-clip: text;\n  }\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading {\n    font-weight: var(--brand-heading-weight-400);\n    font-size: var(--brand-text-size-400);\n    line-height: var(--brand-heading-lineHeight-400);\n    display: inline-flex;\n    align-items: flex-end;\n  }\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--first {\n    font-weight: var(--brand-heading-weight-400);\n    font-size: var(--brand-text-size-400);\n    line-height: var(--brand-heading-lineHeight-400);\n  }\n\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured,\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured {\n    padding-left: var(--base-size-24);\n    padding-right: var(--base-size-24);\n    border-right: 2px solid var(--brand-ComparisonTable-featured-color-end);\n    border-left: 2px solid var(--brand-ComparisonTable-featured-color-start);\n  }\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured {\n    position: relative;\n    border-top-left-radius: 0.45rem;\n    border-top-right-radius: 0.45rem;\n    background: var(--brand-color-canvas-default);\n  }\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured::before,\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured::after {\n    position: absolute;\n    top: -2px;\n    right: -2px;\n    bottom: 0;\n    left: -2px;\n    z-index: 0;\n    content: '';\n    background: linear-gradient(\n      90deg,\n      var(--brand-ComparisonTable-featured-color-start),\n      var(--brand-ComparisonTable-featured-color-end)\n    );\n    border-top-left-radius: 0.45rem;\n    border-top-right-radius: 0.45rem;\n  }\n\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured::after {\n    z-index: 1;\n    background: var(--brand-color-canvas-default);\n    top: 0px;\n    left: 0;\n    right: 0;\n    border-top-right-radius: 0.35rem;\n    border-top-left-radius: 0.35rem;\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured.ComparisonTable-cell--lastrow {\n    position: relative;\n    background: var(--brand-color-canvas-default);\n    border-bottom-right-radius: 0.45rem;\n    border-bottom-left-radius: 0.45rem;\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured.ComparisonTable-cell--lastrow::after,\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured.ComparisonTable-cell--lastrow::before {\n    position: absolute;\n    top: 0;\n    right: -2px;\n    bottom: 0;\n    left: -2px;\n    z-index: 0;\n    content: '';\n    background: linear-gradient(\n      90deg,\n      var(--brand-ComparisonTable-featured-color-start),\n      var(--brand-ComparisonTable-featured-color-end)\n    );\n    border-bottom-right-radius: 0.5rem;\n    border-bottom-left-radius: 0.5rem;\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured.ComparisonTable-cell--lastrow::after {\n    z-index: 1;\n    background: var(--brand-color-canvas-default);\n    bottom: 2px;\n    left: 0;\n    right: 0;\n    border-bottom-right-radius: 0.35rem;\n    border-bottom-left-radius: 0.35rem;\n  }\n\n  :global(.ComparisonTable--default) .ComparisonTable-cell-container--featured {\n    position: relative;\n    z-index: 2;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ComparisonTable.module.js","names":[],"sources":["../../src/ComparisonTable/ComparisonTable.module.css"],"sourcesContent":["/*\n* Heading\n*/\n.ComparisonTable--heading {\n  text-align: left;\n  max-width: 18ch;\n  margin-bottom: var(--brand-ComparisonTable-heading-marginBottom);\n}\n\n/* Narrow breakpoint */\n\n@media screen and (min-width: 34rem) {\n  .ComparisonTable--heading {\n    margin-left: auto;\n    margin-right: auto;\n    text-align: center;\n  }\n}\n\n/**\n * Footnotes\n */\n\n.ComparisonTable-footnote {\n  text-align: left;\n  margin: var(--base-size-24) 0;\n}\n\n@media screen and (min-width: 34rem) {\n  .ComparisonTable-footnote {\n    text-align: center;\n  }\n}\n\n/*\n* Table\n*/\n\n.ComparisonTable {\n  border-collapse: collapse;\n  border-spacing: 0;\n  font-family: var(--brand-body-fontFamily);\n  width: 100%;\n}\n\n.ComparisonTable tr {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  text-align: left;\n}\n\n.ComparisonTable-cell {\n  color: var(--brand-color-text-default);\n  font-weight: var(--brand-text-weight-200);\n  font-size: var(--brand-text-size-200);\n  line-height: var(--brand-text-lineHeight-200);\n  padding-bottom: var(--base-size-24);\n}\n\n.ComparisonTable-cell-heading {\n  font-weight: var(--base-text-weight-medium);\n  font-size: var(--brand-text-size-200);\n  line-height: var(--brand-text-lineHeight-200);\n}\n\n.ComparisonTable-cell-container {\n  display: block;\n  padding-top: var(--base-size-8);\n}\n\n/*\n * Narrow viewport-only styles\n*/\n@media screen and (max-width: 34rem) {\n  .ComparisonTable-cell-heading--hidden-on-narrow {\n    display: none;\n  }\n\n  .ComparisonTable-cell {\n    margin-bottom: var(--base-size-32);\n    padding-bottom: 0;\n  }\n\n  .ComparisonTable tbody tr {\n    border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  }\n\n  .ComparisonTable-inline-cell-label {\n    font-weight: var(--brand-heading-weight-400);\n    font-size: var(--brand-text-size-400);\n    line-height: var(--brand-heading-lineHeight-400);\n  }\n\n  .ComparisonTable tbody .ComparisonTable-cell-heading {\n    margin-top: var(--base-size-24);\n    margin-bottom: var(--base-size-16);\n    font-weight: var(--brand-heading-weight-300);\n    font-size: var(--brand-text-size-300);\n    line-height: var(--brand-heading-lineHeight-300);\n  }\n}\n\n/*\n * Narrow landscape and above viewport styles\n*/\n@media screen and (min-width: 34rem) {\n  .ComparisonTable tr {\n    flex-direction: row;\n  }\n\n  .ComparisonTable-cell-container {\n    padding-top: var(--base-size-24);\n  }\n\n  .ComparisonTable-cell-heading {\n    text-align: left;\n  }\n\n  .ComparisonTable .ComparisonTable-cell-heading:first-child {\n    width: 25%;\n    margin-right: 40px;\n  }\n\n  .ComparisonTable tr td:nth-of-type(1):not(.ComparisonTable-cell-heading),\n  .ComparisonTable tr:nth-of-type(1) .ComparisonTable-cell-heading:nth-child(2) {\n    width: 40%;\n  }\n  .ComparisonTable tr td:nth-of-type(2):not(.ComparisonTable-cell-heading),\n  .ComparisonTable tr:nth-of-type(1) .ComparisonTable-cell-heading:nth-child(3) {\n    width: 35%;\n    margin-left: 40px;\n  }\n\n  .ComparisonTable--hide-element-on-narrow {\n    display: none;\n  }\n\n  .ComparisonTable-cell-container {\n    border-top: var(--brand-borderWidth-thick) solid var(--brand-color-border-default);\n  }\n}\n\n/*\n * Default presentation\n */\n:global(.ComparisonTable--default) .ComparisonTable-cell-heading--first {\n  color: var(--brand-color-text-muted);\n}\n\n:global(.ComparisonTable--default) thead .ComparisonTable-cell-heading {\n  padding: var(--base-size-24) 0 var(--base-size-16);\n}\n\n:global(.ComparisonTable--default) .ComparisonTable-cell-heading-label--featured {\n  position: relative;\n  z-index: 2;\n}\n\n/*\n * Narrow viewport-only styles\n*/\n@media screen and (max-width: 34rem) {\n  :global(.ComparisonTable--default) .ComparisonTable-cell:not(.ComparisonTable-cell-heading) {\n    position: relative;\n    padding-left: 25px;\n  }\n  .ComparisonTable-cell--bordered-on-narrow::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    width: 5px;\n    background: var(--brand-color-border-default);\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured::before {\n    background: linear-gradient(\n      180deg,\n      var(--brand-ComparisonTable-featured-color-start),\n      var(--brand-ComparisonTable-featured-color-end)\n    );\n  }\n}\n\n/*\n * Narrow landscape and above viewport styles\n*/\n@media screen and (min-width: 34rem) {\n  :global(.ComparisonTable--default) .ComparisonTable-cell-heading-label--featured {\n    color: transparent;\n    background: linear-gradient(\n      89.46deg,\n      var(--brand-ComparisonTable-featured-color-start) 0.87%,\n      var(--brand-ComparisonTable-featured-color-end) 75.12%\n    );\n    -webkit-background-clip: text;\n    background-clip: text;\n  }\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading {\n    font-weight: var(--brand-heading-weight-400);\n    font-size: var(--brand-text-size-400);\n    line-height: var(--brand-heading-lineHeight-400);\n    display: inline-flex;\n    align-items: flex-end;\n  }\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--first {\n    font-weight: var(--brand-heading-weight-400);\n    font-size: var(--brand-text-size-400);\n    line-height: var(--brand-heading-lineHeight-400);\n  }\n\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured,\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured {\n    padding-left: var(--base-size-24);\n    padding-right: var(--base-size-24);\n    border-right: 2px solid var(--brand-ComparisonTable-featured-color-end);\n    border-left: 2px solid var(--brand-ComparisonTable-featured-color-start);\n  }\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured {\n    position: relative;\n    border-top-left-radius: 0.45rem;\n    border-top-right-radius: 0.45rem;\n    background: var(--brand-color-canvas-default);\n  }\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured::before,\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured::after {\n    position: absolute;\n    top: -2px;\n    right: -2px;\n    bottom: 0;\n    left: -2px;\n    z-index: 0;\n    content: '';\n    background: linear-gradient(\n      90deg,\n      var(--brand-ComparisonTable-featured-color-start),\n      var(--brand-ComparisonTable-featured-color-end)\n    );\n    border-top-left-radius: 0.45rem;\n    border-top-right-radius: 0.45rem;\n  }\n\n  :global(.ComparisonTable--default) thead .ComparisonTable-cell-heading--featured::after {\n    z-index: 1;\n    background: var(--brand-color-canvas-default);\n    top: 0px;\n    left: 0;\n    right: 0;\n    border-top-right-radius: 0.35rem;\n    border-top-left-radius: 0.35rem;\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured.ComparisonTable-cell--lastrow {\n    position: relative;\n    background: var(--brand-color-canvas-default);\n    border-bottom-right-radius: 0.45rem;\n    border-bottom-left-radius: 0.45rem;\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured.ComparisonTable-cell--lastrow::after,\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured.ComparisonTable-cell--lastrow::before {\n    position: absolute;\n    top: 0;\n    right: -2px;\n    bottom: 0;\n    left: -2px;\n    z-index: 0;\n    content: '';\n    background: linear-gradient(\n      90deg,\n      var(--brand-ComparisonTable-featured-color-start),\n      var(--brand-ComparisonTable-featured-color-end)\n    );\n    border-bottom-right-radius: 0.5rem;\n    border-bottom-left-radius: 0.5rem;\n  }\n  :global(.ComparisonTable--default) .ComparisonTable-cell--featured.ComparisonTable-cell--lastrow::after {\n    z-index: 1;\n    background: var(--brand-color-canvas-default);\n    bottom: 2px;\n    left: 0;\n    right: 0;\n    border-bottom-right-radius: 0.35rem;\n    border-bottom-left-radius: 0.35rem;\n  }\n\n  :global(.ComparisonTable--default) .ComparisonTable-cell-container--featured {\n    position: relative;\n    z-index: 2;\n  }\n}\n"],"mappings":""}

package/esm/Link/Link.d.ts

@@ -21,9 +21,22 @@ export type LinkProps = {
      */
     variant?: (typeof LinkVariants)[number];
 } & React.ComponentPropsWithoutRef<'a'>;
-/**
- * Links connect users to related content.
- * These are not intended to be used as a call-to-action.
- */
-export declare function Link({ size, variant, className, children, isExternal, onMouseEnter, onMouseLeave, onFocus, onBlur, arrowDirection, ...props }: LinkProps): React.JSX.Element;
+export declare const Link: React.ForwardRefExoticComponent<{
+    /**
+     * The size variations available in Link
+     */
+    size?: (typeof LinkSizes)[number];
+    /**
+     * Position of the arrow.
+     */
+    arrowDirection?: (typeof LinkArrowDirections)[number];
+    /**
+     * Show an external link icon
+     */
+    isExternal?: boolean;
+    /**
+     * Specify alternative link appearance
+     */
+    variant?: (typeof LinkVariants)[number];
+} & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 //# sourceMappingURL=Link.d.ts.map

package/esm/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAMxC,OAAO,wGAAwG,CAAA;AAE/G,eAAO,MAAM,YAAY,gCAAiC,CAAA;AAC1D,eAAO,MAAM,SAAS,uCAAwC,CAAA;AAC9D,eAAO,MAAM,mBAAmB,mCAAoC,CAAA;AAcpE,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;IACrD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AAEvC;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAe,EACf,OAAmB,EACnB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,cAAsB,EACtB,GAAG,KAAK,EACT,EAAE,SAAS,qBAkEX"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAMpD,OAAO,wGAAwG,CAAA;AAE/G,eAAO,MAAM,YAAY,gCAAiC,CAAA;AAC1D,eAAO,MAAM,SAAS,uCAAwC,CAAA;AAC9D,eAAO,MAAM,mBAAmB,mCAAoC,CAAA;AAcpE,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;IACrD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAA;AA0FvC,eAAO,MAAM,IAAI;IA1Gf;;OAEG;WACI,CAAC,OAAO,SAAS,EAAE,MAAM,CAAC;IACjC;;OAEG;qBACc,CAAC,OAAO,mBAAmB,EAAE,MAAM,CAAC;IACrD;;OAEG;iBACU,OAAO;IACpB;;OAEG;cACO,CAAC,OAAO,YAAY,EAAE,MAAM,CAAC;oJA2FD,CAAA"}