npm - @primer/react-brand - Versions diffs - 0.80.1 → 0.81.0-rc.1b89e69c - Mend

@primer/react-brand 0.80.1 → 0.81.0-rc.1b89e69c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (493) hide show

package/esm/ActionMenu/ActionMenu.js.map CHANGED Viewed

	@@ -1 +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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"}
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 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 CHANGED Viewed

	@@ -1 +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"}
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;AAuC7C,eAAO,MAAM,MAAM;;;;;CAAoC,CAAA"}

package/esm/Avatar/Avatar.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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/ComparisonTable/ComparisonTable.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":"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"}
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 (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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
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-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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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"}

package/esm/Link/Link.js CHANGED Viewed

@@ -4,69 +4,71 @@ import { ExpandableArrow as n } from "../ExpandableArrow/ExpandableArrow.js";
 import { LinkExternalIcon as r } from "../node_modules/@primer/octicons-react/dist/icons/LinkExternalIcon.js";
 import i from "./Link.module.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes-JvDrymoz.css';/* empty css                                                                                                  */
-import a, { useCallback as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import a, { forwardRef as o, useCallback as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/Link/Link.tsx
-var l = ["default", "accent"], u = [
+var u = ["default", "accent"], d = [
 	"small",
 	"medium",
 	"large"
-], d = [
+], f = [
 	"start",
 	"end",
 	"none"
-], f = {
+], p = {
 	small: "100",
 	medium: "200",
 	large: "300"
-}, p = {
+}, m = {
 	small: 16,
 	medium: 16,
 	large: 20
 };
-function m({ size: l = "medium", variant: u = "default", className: d, children: m, isExternal: h, onMouseEnter: g, onMouseLeave: _, onFocus: v, onBlur: y, arrowDirection: b = "end", ...x }) {
-	let [S, C] = a.useState(!1), [w, T] = a.useState(!1), E = o((e) => {
-		C(!S), g?.(e);
-	}, [g, S]), D = o((e) => {
-		C(!S), _?.(e);
-	}, [_, S]), O = o((e) => {
-		T(!w), v?.(e);
-	}, [v, w]), k = o((e) => {
-		T(!w), y?.(e);
-	}, [y, w]);
-	return /* @__PURE__ */ c("a", {
-		className: e(i.Link, i[`Link--${l}`], i[`Link--${u}`], h ? i["Link--is-external"] : i[`Link--arrow-${b}`], d),
-		onMouseEnter: E,
-		onMouseLeave: D,
-		onFocus: O,
-		onBlur: k,
+function h({ size: o = "medium", variant: u = "default", className: d, children: f, isExternal: h, onMouseEnter: g, onMouseLeave: _, onFocus: v, onBlur: y, arrowDirection: b = "end", ...x }, S) {
+	let [C, w] = a.useState(!1), [T, E] = a.useState(!1), D = s((e) => {
+		w(!C), g?.(e);
+	}, [g, C]), O = s((e) => {
+		w(!C), _?.(e);
+	}, [_, C]), k = s((e) => {
+		E(!T), v?.(e);
+	}, [v, T]), A = s((e) => {
+		E(!T), y?.(e);
+	}, [y, T]);
+	return /* @__PURE__ */ l("a", {
+		ref: S,
+		className: e(i.Link, i[`Link--${o}`], i[`Link--${u}`], h ? i["Link--is-external"] : i[`Link--arrow-${b}`], d),
+		onMouseEnter: D,
+		onMouseLeave: O,
+		onFocus: k,
+		onBlur: A,
 		...x,
 		children: [
-			b === "start" && !h && /* @__PURE__ */ s(n, {
+			b === "start" && !h && /* @__PURE__ */ c(n, {
 				className: i["Link-arrow"],
-				expanded: S || w,
+				expanded: C || T,
 				reverse: !0,
 				hidden: !0
 			}),
-			/* @__PURE__ */ s(t, {
+			/* @__PURE__ */ c(t, {
 				as: "span",
-				size: f[l],
+				size: p[o],
 				className: e(i["Link--label"]),
-				children: m
+				children: f
 			}),
-			b === "end" && !h && /* @__PURE__ */ s(n, {
+			b === "end" && !h && /* @__PURE__ */ c(n, {
 				className: i["Link-arrow"],
-				expanded: S || w,
+				expanded: C || T,
 				hidden: !0
 			}),
-			h && /* @__PURE__ */ s(r, {
-				size: p[l],
+			h && /* @__PURE__ */ c(r, {
+				size: m[o],
 				"aria-label": "External link"
 			})
 		]
 	});
 }
+var g = o(h);
 //#endregion
-export { m as Link, d as LinkArrowDirections, u as LinkSizes, l as LinkVariants };
+export { g as Link, f as LinkArrowDirections, d as LinkSizes, u as LinkVariants };
 //# sourceMappingURL=Link.js.map

package/esm/Link/Link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.js","names":[],"sources":["../../src/Link/Link.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {useCallback} from 'react'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {LinkExternalIcon} from '@primer/octicons-react'\nimport {Text} from '../Text'\n\nimport styles from './Link.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css'\n\nexport const LinkVariants = ['default', 'accent'] as const\nexport const LinkSizes = ['small', 'medium', 'large'] as const\nexport const LinkArrowDirections = ['start', 'end', 'none'] as const\n\nconst LinkTextSizes = {\n small: '100',\n medium: '200',\n large: '300',\n} as const\n\nconst LinkExternalIconSizes = {\n small: 16,\n medium: 16,\n large: 20,\n} as const\n\nexport type LinkProps = {\n /*\n The size variations available in Link\n /\n size?: (typeof LinkSizes)[number]\n /\n Position of the arrow.\n /\n arrowDirection?: (typeof LinkArrowDirections)[number]\n /\n Show an external link icon\n /\n isExternal?: boolean\n /\n Specify alternative link appearance\n /\n variant?: (typeof LinkVariants)[number]\n} & React.ComponentPropsWithoutRef<'a'>\n\n/\n Links connect users to related content.\n * These are not intended to be used as a call-to-action.\n */\~~nexport~~ ~~function Link~~({\n size = 'medium',\n variant = 'default',\n className,\n children,\n isExternal,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n arrowDirection = 'end',\n ...props\n}: LinkProps) {\n const [isHovered, setIsHovered] = React.useState(false)\n const [isFocused, setIsFocused] = React.useState(false)\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n setIsHovered(!isHovered)\n onMouseEnter?.(event)\n },\n [onMouseEnter, isHovered],\n )\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n setIsHovered(!isHovered)\n onMouseLeave?.(event)\n },\n [onMouseLeave, isHovered],\n )\n\n const handleOnFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n setIsFocused(!isFocused)\n onFocus?.(event)\n },\n [onFocus, isFocused],\n )\n\n const handleOnBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n setIsFocused(!isFocused)\n onBlur?.(event)\n },\n [onBlur, isFocused],\n )\n\n return (\n <a\n className={clsx(\n styles.Link,\n styles[`Link--${size}`],\n styles[`Link--${variant}`],\n isExternal ? styles['Link--is-external'] : styles[`Link--arrow-${arrowDirection}`],\n className,\n )}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleOnFocus}\n onBlur={handleOnBlur}\n {...props}\n >\n {arrowDirection === 'start' && !isExternal && (\n <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered \|\| isFocused} reverse hidden />\n )}\n\n <Text as=\"span\" size={LinkTextSizes[size]} className={clsx(styles['Link--label'])}>\n {children}\n </Text>\n\n {arrowDirection === 'end' && !isExternal && (\n <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered \|\| isFocused} hidden />\n )}\n\n {isExternal && <LinkExternalIcon size={LinkExternalIconSizes[size]} aria-label=\"External link\" />}\n </a>\n )\n}\n"],"mappings":";;;;;;;;;AASA,IAAa,IAAe,CAAC,WAAW,QAAQ,GACnC,IAAY;CAAC;CAAS;CAAU;AAAO,GACvC,IAAsB;CAAC;CAAS;CAAO;AAAM,GAEpD,IAAgB;CACpB,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAEM,IAAwB;CAC5B,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAyBA,~~SAAgB~~,~~EAAK~~,~~EACnB~~,UAAO,UACP,aAAU,WACV,cACA,aACA,eACA,iBACA,iBACA,YACA,WACA,oBAAiB,OACjB,GAAG,~~KACS~~;~~CACZ~~,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK,GAChD,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK,GAEhD,IAAmB,GACtB,MAA2D;EAE1D,AADA,EAAa,CAAC,CAAS,GACvB,IAAe,CAAK;CACtB,GACA,CAAC,GAAc,CAAS,CAC1B,GAEM,IAAmB,GACtB,MAA2D;EAE1D,AADA,EAAa,CAAC,CAAS,GACvB,IAAe,CAAK;CACtB,GACA,CAAC,GAAc,CAAS,CAC1B,GAEM,IAAgB,GACnB,MAAwD;EAEvD,AADA,EAAa,CAAC,CAAS,GACvB,IAAU,CAAK;CACjB,GACA,CAAC,GAAS,CAAS,CACrB,GAEM,IAAe,GAClB,MAAwD;EAEvD,AADA,EAAa,CAAC,CAAS,GACvB,IAAS,CAAK;CAChB,GACA,CAAC,GAAQ,CAAS,CACpB;CAEA,OACE,kBAAC,KAAD;~~EACE~~,WAAW,EACT,EAAO,MACP,EAAO,SAAS,MAChB,EAAO,SAAS,MAChB,IAAa,EAAO,uBAAuB,EAAO,eAAe,MACjE,CACF;EACA,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,GAAI;~~YAZN~~;~~GAcG~~,MAAmB,WAAW,CAAC,KAC9B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,SAAA;IAAQ,QAAA;GAAQ,CAAA;GAGtG,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,EAAc;IAAO,WAAW,EAAK,EAAO,cAAc;IAC7E;GACG,CAAA;GAEL,MAAmB,SAAS,CAAC,KAC5B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,QAAA;GAAQ,CAAA;GAG7F,KAAc,kBAAC,GAAD;IAAkB,MAAM,EAAsB;IAAO,cAAW;GAAiB,CAAA;EAC/F;;AAEP"}
1	+ {"version":3,"file":"Link.js","names":[],"sources":["../../src/Link/Link.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useCallback} from 'react'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {LinkExternalIcon} from '@primer/octicons-react'\nimport {Text} from '../Text'\n\nimport styles from './Link.module.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css'\n\nexport const LinkVariants = ['default', 'accent'] as const\nexport const LinkSizes = ['small', 'medium', 'large'] as const\nexport const LinkArrowDirections = ['start', 'end', 'none'] as const\n\nconst LinkTextSizes = {\n small: '100',\n medium: '200',\n large: '300',\n} as const\n\nconst LinkExternalIconSizes = {\n small: 16,\n medium: 16,\n large: 20,\n} as const\n\nexport type LinkProps = {\n /*\n The size variations available in Link\n /\n size?: (typeof LinkSizes)[number]\n /\n Position of the arrow.\n /\n arrowDirection?: (typeof LinkArrowDirections)[number]\n /\n Show an external link icon\n /\n isExternal?: boolean\n /\n Specify alternative link appearance\n /\n variant?: (typeof LinkVariants)[number]\n} & React.ComponentPropsWithoutRef<'a'>\n\n/\n Links connect users to related content.\n * These are not intended to be used as a call-to-action.\n */\nfunction LinkBase(\n {\n size = 'medium',\n variant = 'default',\n className,\n children,\n isExternal,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n arrowDirection = 'end',\n ...props\n }: LinkProps,\n ref: React.ForwardedRef<HTMLAnchorElement>,\n) {\n const [isHovered, setIsHovered] = React.useState(false)\n const [isFocused, setIsFocused] = React.useState(false)\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n setIsHovered(!isHovered)\n onMouseEnter?.(event)\n },\n [onMouseEnter, isHovered],\n )\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n setIsHovered(!isHovered)\n onMouseLeave?.(event)\n },\n [onMouseLeave, isHovered],\n )\n\n const handleOnFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n setIsFocused(!isFocused)\n onFocus?.(event)\n },\n [onFocus, isFocused],\n )\n\n const handleOnBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n setIsFocused(!isFocused)\n onBlur?.(event)\n },\n [onBlur, isFocused],\n )\n\n return (\n <a\n ref={ref}\n className={clsx(\n styles.Link,\n styles[`Link--${size}`],\n styles[`Link--${variant}`],\n isExternal ? styles['Link--is-external'] : styles[`Link--arrow-${arrowDirection}`],\n className,\n )}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleOnFocus}\n onBlur={handleOnBlur}\n {...props}\n >\n {arrowDirection === 'start' && !isExternal && (\n <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered \|\| isFocused} reverse hidden />\n )}\n\n <Text as=\"span\" size={LinkTextSizes[size]} className={clsx(styles['Link--label'])}>\n {children}\n </Text>\n\n {arrowDirection === 'end' && !isExternal && (\n <ExpandableArrow className={styles['Link-arrow']} expanded={isHovered \|\| isFocused} hidden />\n )}\n\n {isExternal && <LinkExternalIcon size={LinkExternalIconSizes[size]} aria-label=\"External link\" />}\n </a>\n )\n}\n\nexport const Link = forwardRef(LinkBase)\n"],"mappings":";;;;;;;;;AASA,IAAa,IAAe,CAAC,WAAW,QAAQ,GACnC,IAAY;CAAC;CAAS;CAAU;AAAO,GACvC,IAAsB;CAAC;CAAS;CAAO;AAAM,GAEpD,IAAgB;CACpB,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAEM,IAAwB;CAC5B,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAyBA,SAAS,EACP,EACE,UAAO,UACP,aAAU,WACV,cACA,aACA,eACA,iBACA,iBACA,YACA,WACA,oBAAiB,OACjB,GAAG,KAEL,GACA;CACA,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK,GAChD,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAK,GAEhD,IAAmB,GACtB,MAA2D;EAE1D,AADA,EAAa,CAAC,CAAS,GACvB,IAAe,CAAK;CACtB,GACA,CAAC,GAAc,CAAS,CAC1B,GAEM,IAAmB,GACtB,MAA2D;EAE1D,AADA,EAAa,CAAC,CAAS,GACvB,IAAe,CAAK;CACtB,GACA,CAAC,GAAc,CAAS,CAC1B,GAEM,IAAgB,GACnB,MAAwD;EAEvD,AADA,EAAa,CAAC,CAAS,GACvB,IAAU,CAAK;CACjB,GACA,CAAC,GAAS,CAAS,CACrB,GAEM,IAAe,GAClB,MAAwD;EAEvD,AADA,EAAa,CAAC,CAAS,GACvB,IAAS,CAAK;CAChB,GACA,CAAC,GAAQ,CAAS,CACpB;CAEA,OACE,kBAAC,KAAD;EACO;EACL,WAAW,EACT,EAAO,MACP,EAAO,SAAS,MAChB,EAAO,SAAS,MAChB,IAAa,EAAO,uBAAuB,EAAO,eAAe,MACjE,CACF;EACA,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,GAAI;YAbN;GAeG,MAAmB,WAAW,CAAC,KAC9B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,SAAA;IAAQ,QAAA;GAAQ,CAAA;GAGtG,kBAAC,GAAD;IAAM,IAAG;IAAO,MAAM,EAAc;IAAO,WAAW,EAAK,EAAO,cAAc;IAC7E;GACG,CAAA;GAEL,MAAmB,SAAS,CAAC,KAC5B,kBAAC,GAAD;IAAiB,WAAW,EAAO;IAAe,UAAU,KAAa;IAAW,QAAA;GAAQ,CAAA;GAG7F,KAAc,kBAAC,GAAD;IAAkB,MAAM,EAAsB;IAAO,cAAW;GAAiB,CAAA;EAC/F;;AAEP;AAEA,IAAa,IAAO,EAAW,CAAQ"}