@primer/react-brand 0.80.1-rc.bcf1e5f2 → 0.80.2-rc.93619886

package/esm/ActionMenu/ActionMenu.js.map

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

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

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

package/esm/ComparisonTable/ComparisonTable.js

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

package/esm/ComparisonTable/ComparisonTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComparisonTable.js","names":[],"sources":["../../src/ComparisonTable/ComparisonTable.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref, useMemo, PropsWithChildren} from 'react'\nimport {Heading, Text, useAnimation} from '../'\n\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './ComparisonTable.module.css'\n\nexport type ComparisonTableProps<C extends React.ElementType> = BaseProps<C> & {\n  as?: C\n  heading?: string\n  variant?: 'default' | 'minimal'\n  featuredColumn?: number\n} & React.ComponentPropsWithoutRef<C>\n\nexport const _ComparisonTable = forwardRef(\n  <C extends React.ElementType>(\n    {\n      as,\n      animate,\n      children,\n      className,\n      heading,\n      featuredColumn = 1,\n      visuallyHiddenFeaturedLabel = 'featured',\n      variant = 'default',\n      style,\n      ...props\n    }: ComparisonTableProps<C>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const Component = as || 'section'\n\n    const Children = useMemo(\n      () =>\n        React.Children.toArray(children).filter(\n          (child): child is React.ReactElement => React.isValidElement(child) && typeof child.type !== 'string',\n        ),\n      [children],\n    )\n\n    const rowChildren = Children.filter(\n      (child): child is React.ReactElement<PropsWithChildren<RowProps>> => child.type === Row,\n    )\n\n    const HeaderRow = rowChildren\n      .map((child, index) => {\n        if (index === 0) {\n          return React.cloneElement(child, {\n            className: clsx(styles['ComparisonTable-row'], child.props.className),\n            children: React.Children.map(child.props.children, (rowChild, rowChildIndex) => {\n              if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n                const isFeatured = rowChildIndex === featuredColumn\n                return React.cloneElement(rowChild, {\n                  as: rowChild.props.children ? 'th' : 'td',\n                  className: clsx(\n                    styles['ComparisonTable-cell'],\n                    styles[`ComparisonTable-cell-heading`],\n                    styles[`ComparisonTable-cell-heading--${variant}`],\n                    rowChildIndex === 0 && styles[`ComparisonTable-cell-heading--first`],\n                    isFeatured && styles[`ComparisonTable-cell-heading--featured`],\n                    child.props.className,\n                  ),\n                  children: (\n                    <span\n                      className={clsx(\n                        rowChildIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n                      )}\n                    >\n                      {rowChild.props.children}\n                      {isFeatured && <span className=\"visually-hidden\">({visuallyHiddenFeaturedLabel})</span>}\n                    </span>\n                  ),\n                })\n              }\n              return null\n            }),\n          })\n        }\n        return null\n      })\n      .filter(Boolean)\n\n    const headerRowNames = useMemo(() => {\n      const firstRow = rowChildren.at(0)\n      if (!firstRow) return []\n\n      return (\n        React.Children.map(firstRow.props.children, child => {\n          if (React.isValidElement<CellProps>(child)) {\n            return child.props.children\n          }\n          return undefined\n        }) || []\n      )\n    }, [rowChildren])\n\n    const [, ...regularRows] = rowChildren\n\n    const RegularRows = regularRows.map((child, index) => {\n      return React.cloneElement(child, {\n        className: clsx(styles['ComparisonTable-row'], `ComparisonTable-row--${index}`, child.props.className),\n        children: React.Children.map(child.props.children, (rowChild, cellIndex) => {\n          if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n            return (\n              <Cell\n                {...rowChild.props}\n                as={cellIndex === 0 ? 'th' : 'td'}\n                className={clsx(\n                  styles['ComparisonTable-cell'],\n                  styles[`ComparisonTable-cell--${variant}`],\n                  cellIndex === 0 && styles[`ComparisonTable-cell-heading`],\n                  cellIndex === 0 && styles[`ComparisonTable-cell-heading--${variant}`],\n                  cellIndex === featuredColumn && styles[`ComparisonTable-cell--featured`],\n                  regularRows.length - 1 === index && styles['ComparisonTable-cell--lastrow'],\n                  child.props.className,\n                )}\n              >\n                {cellIndex >= 1 && (\n                  <span\n                    className={clsx(\n                      styles['ComparisonTable-inline-cell-label'],\n                      styles['ComparisonTable--hide-element-on-narrow'],\n                      cellIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n                    )}\n                  >\n                    {headerRowNames[cellIndex]}\n                  </span>\n                )}\n                <span\n                  className={clsx(\n                    styles['ComparisonTable-cell-container'],\n                    cellIndex === featuredColumn && styles['ComparisonTable-cell-container--featured'],\n                  )}\n                >\n                  {rowChild.props.children}\n                </span>\n              </Cell>\n            )\n          }\n          return null\n        }),\n      })\n    })\n\n    const FootnoteChild = Children.find(\n      (child): child is React.ReactElement<PropsWithChildren<FootnoteProps>> => child.type === Footnote,\n    )\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx(animationClasses, className)}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {heading && (\n          <Heading className={styles['ComparisonTable--heading']} as=\"h3\" size=\"4\">\n            {heading}\n          </Heading>\n        )}\n        <table className={clsx(styles.ComparisonTable, `ComparisonTable--${variant}`)}>\n          {HeaderRow.length && <thead>{HeaderRow}</thead>}\n          {RegularRows.length && <tbody>{RegularRows}</tbody>}\n        </table>\n        {FootnoteChild && <footer className={styles['ComparisonTable-footnote']}>{FootnoteChild}</footer>}\n      </Component>\n    )\n  },\n)\n\ntype RowProps = React.HTMLAttributes<HTMLTableRowElement> & {\n  header?: boolean\n}\n\nconst Row = ({children, ...rest}: PropsWithChildren<RowProps>) => {\n  return <tr {...rest}>{children}</tr>\n}\n\nexport type CellProps = BaseProps<HTMLTableCellElement> &\n  React.HTMLAttributes<HTMLTableCellElement> & {\n    as?: 'td' | 'th'\n  }\n\nconst Cell = ({as, children, ...props}: PropsWithChildren<CellProps>) => {\n  const Tag = as || 'td'\n  return <Tag {...props}>{children}</Tag>\n}\n\nexport type FootnoteProps = BaseProps<HTMLParagraphElement>\n\nconst Footnote = ({children, ...props}: PropsWithChildren<FootnoteProps>) => {\n  if (typeof children === 'string') {\n    return (\n      <Text as=\"p\" size=\"100\" variant=\"muted\">\n        {children}\n      </Text>\n    )\n  }\n  return <div {...props}>{children}</div>\n}\n\n/**\n * @description\n *  Comparison tables are used to aid decision-making by displaying a list of features and their associated qualities side-by-side.\n *  They are useful for comparing products, plans, or features in marketing pages.\n * @see https://primer.style/brand/components/ComparisonTable\n */\nexport const ComparisonTable = Object.assign(_ComparisonTable, {\n  Row,\n  Cell,\n  Footnote,\n})\n"],"mappings":"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"}
+{"version":3,"file":"ComparisonTable.js","names":[],"sources":["../../src/ComparisonTable/ComparisonTable.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, type Ref, useMemo, PropsWithChildren} from 'react'\nimport {Heading, Text, useAnimation} from '../'\n\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './ComparisonTable.module.css'\n\nexport type ComparisonTableProps<C extends React.ElementType> = BaseProps<C> & {\n  as?: C\n  heading?: string\n  variant?: 'default' | 'minimal'\n  featuredColumn?: number\n} & React.ComponentPropsWithoutRef<C>\n\nexport const _ComparisonTable = forwardRef(\n  <C extends React.ElementType>(\n    {\n      as,\n      animate,\n      children,\n      className,\n      heading,\n      featuredColumn = 1,\n      visuallyHiddenFeaturedLabel = 'featured',\n      variant = 'default',\n      style,\n      ...props\n    }: ComparisonTableProps<C>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const Component = as || 'section'\n\n    const Children = useMemo(\n      () =>\n        React.Children.toArray(children).filter(\n          (child): child is React.ReactElement => React.isValidElement(child) && typeof child.type !== 'string',\n        ),\n      [children],\n    )\n\n    const rowChildren = Children.filter(\n      (child): child is React.ReactElement<PropsWithChildren<RowProps>> => child.type === Row,\n    )\n\n    const HeaderRow = rowChildren\n      .map((child, index) => {\n        if (index === 0) {\n          return React.cloneElement(child, {\n            className: clsx(styles['ComparisonTable-row'], child.props.className),\n            children: React.Children.map(child.props.children, (rowChild, rowChildIndex) => {\n              if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n                const isFeatured = rowChildIndex === featuredColumn\n                return React.cloneElement(rowChild, {\n                  as: rowChild.props.children ? 'th' : 'td',\n                  className: clsx(\n                    styles['ComparisonTable-cell'],\n                    styles[`ComparisonTable-cell-heading`],\n                    styles[`ComparisonTable-cell-heading--${variant}`],\n                    rowChildIndex === 0 && styles[`ComparisonTable-cell-heading--first`],\n                    (rowChildIndex !== 0 || !rowChild.props.children) &&\n                      styles['ComparisonTable-cell-heading--hidden-on-narrow'],\n                    variant === 'default' && rowChildIndex !== 0 && styles['ComparisonTable-cell--bordered-on-narrow'],\n                    isFeatured && styles[`ComparisonTable-cell-heading--featured`],\n                    child.props.className,\n                  ),\n                  children: (\n                    <span\n                      className={clsx(\n                        rowChildIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n                      )}\n                    >\n                      {rowChild.props.children}\n                      {isFeatured && <span className=\"visually-hidden\">({visuallyHiddenFeaturedLabel})</span>}\n                    </span>\n                  ),\n                })\n              }\n              return null\n            }),\n          })\n        }\n        return null\n      })\n      .filter(Boolean)\n\n    const headerRowNames = useMemo(() => {\n      const firstRow = rowChildren.at(0)\n      if (!firstRow) return []\n\n      return (\n        React.Children.map(firstRow.props.children, child => {\n          if (React.isValidElement<CellProps>(child)) {\n            return child.props.children\n          }\n          return undefined\n        }) || []\n      )\n    }, [rowChildren])\n\n    const [, ...regularRows] = rowChildren\n\n    const RegularRows = regularRows.map((child, index) => {\n      return React.cloneElement(child, {\n        className: clsx(styles['ComparisonTable-row'], `ComparisonTable-row--${index}`, child.props.className),\n        children: React.Children.map(child.props.children, (rowChild, cellIndex) => {\n          if (React.isValidElement<CellProps>(rowChild) && rowChild.type === Cell) {\n            return (\n              <Cell\n                {...rowChild.props}\n                as={cellIndex === 0 ? 'th' : 'td'}\n                className={clsx(\n                  styles['ComparisonTable-cell'],\n                  styles[`ComparisonTable-cell--${variant}`],\n                  variant === 'default' && styles['ComparisonTable-cell--bordered-on-narrow'],\n                  cellIndex === 0 && styles[`ComparisonTable-cell-heading`],\n                  cellIndex === 0 && styles[`ComparisonTable-cell-heading--${variant}`],\n                  cellIndex === featuredColumn && styles[`ComparisonTable-cell--featured`],\n                  regularRows.length - 1 === index && styles['ComparisonTable-cell--lastrow'],\n                  child.props.className,\n                )}\n              >\n                {cellIndex >= 1 && (\n                  <span\n                    className={clsx(\n                      styles['ComparisonTable-inline-cell-label'],\n                      styles['ComparisonTable--hide-element-on-narrow'],\n                      cellIndex === featuredColumn && styles['ComparisonTable-cell-heading-label--featured'],\n                    )}\n                  >\n                    {headerRowNames[cellIndex]}\n                  </span>\n                )}\n                <span\n                  className={clsx(\n                    styles['ComparisonTable-cell-container'],\n                    cellIndex === featuredColumn && styles['ComparisonTable-cell-container--featured'],\n                  )}\n                >\n                  {rowChild.props.children}\n                </span>\n              </Cell>\n            )\n          }\n          return null\n        }),\n      })\n    })\n\n    const FootnoteChild = Children.find(\n      (child): child is React.ReactElement<PropsWithChildren<FootnoteProps>> => child.type === Footnote,\n    )\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx(animationClasses, className)}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {heading && (\n          <Heading className={styles['ComparisonTable--heading']} as=\"h3\" size=\"4\">\n            {heading}\n          </Heading>\n        )}\n        <table className={clsx(styles.ComparisonTable, `ComparisonTable--${variant}`)}>\n          {HeaderRow.length && <thead>{HeaderRow}</thead>}\n          {RegularRows.length && <tbody>{RegularRows}</tbody>}\n        </table>\n        {FootnoteChild && <footer className={styles['ComparisonTable-footnote']}>{FootnoteChild}</footer>}\n      </Component>\n    )\n  },\n)\n\ntype RowProps = React.HTMLAttributes<HTMLTableRowElement> & {\n  header?: boolean\n}\n\nconst Row = ({children, ...rest}: PropsWithChildren<RowProps>) => {\n  return <tr {...rest}>{children}</tr>\n}\n\nexport type CellProps = BaseProps<HTMLTableCellElement> &\n  React.HTMLAttributes<HTMLTableCellElement> & {\n    as?: 'td' | 'th'\n  }\n\nconst Cell = ({as, children, ...props}: PropsWithChildren<CellProps>) => {\n  const Tag = as || 'td'\n  return <Tag {...props}>{children}</Tag>\n}\n\nexport type FootnoteProps = BaseProps<HTMLParagraphElement>\n\nconst Footnote = ({children, ...props}: PropsWithChildren<FootnoteProps>) => {\n  if (typeof children === 'string') {\n    return (\n      <Text as=\"p\" size=\"100\" variant=\"muted\">\n        {children}\n      </Text>\n    )\n  }\n  return <div {...props}>{children}</div>\n}\n\n/**\n * @description\n *  Comparison tables are used to aid decision-making by displaying a list of features and their associated qualities side-by-side.\n *  They are useful for comparing products, plans, or features in marketing pages.\n * @see https://primer.style/brand/components/ComparisonTable\n */\nexport const ComparisonTable = Object.assign(_ComparisonTable, {\n  Row,\n  Cell,\n  Footnote,\n})\n"],"mappings":"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"}

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

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

package/esm/ComparisonTable/ComparisonTable.module.js

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

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

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

package/esm/MediaPlaylist/{MediaPlaylist.module-BddC0boN.css → MediaPlaylist.module-C4Y3VORG.css}

@@ -1 +1 @@
-.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{padding-block-start:var(--base-size-36);padding-inline:var(--base-size-20)}@media screen and (width<=63.24rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{width:100%;max-width:38.625rem;margin-inline:auto;padding:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h1+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h2+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h3+p{margin-block-start:var(--base-size-12)}}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17{background:var(--brand-MediaPlaylist-bgColor);flex-direction:column;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);order:2;min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj{min-height:var(--base-size-48);align-items:center;gap:var(--base-size-8);padding:var(--base-size-12) var(--base-size-16);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);text-transform:uppercase;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingLabel___cOPfs{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;margin:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs{align-items:center;gap:var(--base-size-8);color:var(--brand-color-text-default);display:inline-flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs:before{content:"•";color:var(--brand-color-text-muted)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{width:100%;padding:var(--base-size-16);order:1}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2{min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2[hidden]{display:none}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx{gap:var(--base-size-20);flex-direction:column;width:100%;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr{max-width:var(--brand-Prose-lineLength)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb{background-color:var(--base-color-scale-black-0);overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb img,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb picture,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb video,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb iframe{width:100%;max-width:100%;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{flex-direction:column;order:2;display:flex;overflow-x:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc .Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{max-block-size:calc((3 * var(--base-size-64)) + (6 * var(--base-size-12)));overscroll-behavior:contain;scroll-padding-block:var(--base-size-24);overflow-y:auto}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__pagination___mct_v{padding:var(--base-size-12) var(--base-size-16) var(--base-size-16);border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);order:3;justify-content:center;margin:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C{min-width:0;min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-12)));flex-direction:column;flex:none;align-items:flex-start;display:flex;position:relative;overflow-x:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C:before{content:"";height:var(--brand-borderWidth-thin);transform-origin:50% 100%;background-color:var(--brand-color-border-muted);transition:transform var(--brand-animation-duration-fast) ease, background-color var(--brand-animation-duration-fast) ease;position:absolute;inset-block-end:0;inset-inline:0;transform:scaleY(1)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G:before{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s{color:var(--brand-color-text-muted);margin:0;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G .Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s{color:var(--brand-color-text-default)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingContent___pzVd0{flex:auto;min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu{gap:var(--base-size-4);flex-direction:column;min-width:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingTitle___F1sIm{color:inherit;word-wrap:anywhere;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX{box-sizing:border-box;width:100%;min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-12)));color:inherit;font:inherit;text-align:left;cursor:pointer;padding:var(--base-size-12) var(--base-size-16);background:0 0;border:0;outline:none;flex-direction:column;align-items:flex-start;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ{align-items:flex-start;gap:var(--base-size-12);width:100%;min-width:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA{width:var(--base-size-112);block-size:calc(var(--base-size-64) - var(--brand-borderWidth-thin));aspect-ratio:16/9;border-radius:var(--brand-borderRadius-small);background-color:var(--brand-color-canvas-subtle);flex-shrink:0;display:block;overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA>*{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-4)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__content___m36IL{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:flex}@media screen and (width<=63.24rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{padding-block-end:var(--base-size-24)}}@media screen and (width>=38.625rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=63.25rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{box-sizing:border-box;width:100%;border-inline:none;max-inline-size:80rem;margin-inline:auto;padding:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17{--brand-MediaPlaylist-desktopGutter:3.75rem;--brand-MediaPlaylist-sidebarWidth:27rem;box-sizing:border-box;grid-template-columns:minmax(0,1fr) minmax(0,27rem);grid-template-areas:"media tabs";grid-template-columns:minmax(0, 1fr) minmax(0, var(--brand-MediaPlaylist-sidebarWidth));grid-column-gap:3.75rem;grid-column-gap:var(--brand-MediaPlaylist-desktopGutter);-moz-column-gap:3.75rem;-moz-column-gap:var(--brand-MediaPlaylist-desktopGutter);column-gap:3.75rem;column-gap:var(--brand-MediaPlaylist-desktopGutter);width:100%;padding-inline-start:3.75rem;padding-inline-start:var(--brand-MediaPlaylist-desktopGutter);display:grid}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);flex-direction:column;grid-area:tabs;align-self:stretch;padding-block-start:calc(var(--base-size-48) + var(--base-size-12));display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc .Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{max-block-size:calc((3 * var(--base-size-64)) + (6 * var(--base-size-20)))}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{padding-block:var(--base-size-80);grid-area:media;justify-content:flex-start;align-items:flex-start;padding-inline:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2{width:100%}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx{gap:var(--base-size-40)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb{width:100%}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb iframe{aspect-ratio:16/9;border-radius:var(--base-size-6)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h1+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h2+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h3+p{margin-block-start:var(--base-size-12)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj{min-height:auto;padding-block-start:var(--base-size-24);padding-block-end:var(--base-size-12);padding-inline-start:var(--base-size-32);padding-inline-end:var(--brand-MediaPlaylist-desktopGutter)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C{min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-20)))}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX{min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-20)));padding-block:var(--base-size-20);padding-inline-start:var(--base-size-32);padding-inline-end:var(--brand-MediaPlaylist-desktopGutter)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ{align-items:center}}@media screen and (width>=80rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border-inline-end:0}}
+.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{padding-block-start:var(--base-size-36);padding-inline:var(--base-size-20)}@media screen and (width<=63.24rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{width:100%;max-width:38.625rem;margin-inline:auto;padding:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h1+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h2+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h3+p{margin-block-start:var(--base-size-12)}}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17{background:var(--brand-MediaPlaylist-bgColor);flex-direction:column;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);order:2;min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj{min-height:var(--base-size-48);align-items:center;gap:var(--base-size-8);padding:var(--base-size-12) var(--base-size-16);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);color:var(--brand-color-text-muted);font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);text-transform:uppercase;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingLabel___cOPfs{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;margin:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs{align-items:center;gap:var(--base-size-8);color:var(--brand-color-text-default);display:inline-flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs:before{content:"•";color:var(--brand-color-text-muted)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{width:100%;padding:var(--base-size-16);order:1}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2{min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2[hidden]{display:none}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx{gap:var(--base-size-20);flex-direction:column;width:100%;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr{max-width:var(--brand-Prose-lineLength)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb{background-color:var(--base-color-scale-black-0);overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb img,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb picture,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb video,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb iframe{width:100%;max-width:100%;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{flex-direction:column;order:2;display:flex;overflow-x:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc .Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{max-block-size:calc((3 * var(--base-size-64)) + (6 * var(--base-size-12)));overscroll-behavior:contain;scroll-padding-block:var(--base-size-24);overflow-y:auto}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__pagination___mct_v{padding:var(--base-size-12) var(--base-size-16) var(--base-size-16);border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);order:3;justify-content:center;margin:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C{min-width:0;min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-12)));flex-direction:column;flex:none;align-items:flex-start;display:flex;position:relative;overflow-x:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C:before{content:"";height:var(--brand-borderWidth-thin);transform-origin:50% 100%;background-color:var(--brand-color-border-muted);transition:transform var(--brand-animation-duration-fast) ease, background-color var(--brand-animation-duration-fast) ease;position:absolute;inset-block-end:0;inset-inline:0;transform:scaleY(1)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G:before{background-color:var(--brand-color-accent-primary);transform:scaleY(2)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s{color:var(--brand-color-text-muted);margin:0;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item--selected___Ihn_G .Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s{color:var(--brand-color-text-default)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingContent___pzVd0{flex:auto;min-width:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu{gap:var(--base-size-4);flex-direction:column;min-width:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingTitle___F1sIm{color:inherit;word-wrap:anywhere;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX{box-sizing:border-box;width:100%;min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-12)));color:inherit;font:inherit;text-align:left;cursor:pointer;padding:var(--base-size-12) var(--base-size-16);background:0 0;border:0;outline:none;flex-direction:column;align-items:flex-start;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ{align-items:flex-start;gap:var(--base-size-12);width:100%;min-width:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA{width:var(--base-size-112);block-size:calc(var(--base-size-64) - var(--brand-borderWidth-thin));aspect-ratio:16/9;border-radius:var(--brand-borderRadius-small);background-color:var(--brand-color-canvas-subtle);flex-shrink:0;display:block;overflow:hidden}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA>*{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;display:block}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:calc(-1 * var(--base-size-4))}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__content___m36IL{align-items:flex-start;gap:var(--base-size-12);flex-direction:column;display:flex}@media screen and (width<=63.24rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{padding-block-end:var(--base-size-24)}}@media screen and (width>=38.625rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=63.25rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{box-sizing:border-box;width:100%;border-inline:none;max-inline-size:80rem;margin-inline:auto;padding:0}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17{--brand-MediaPlaylist-desktopGutter:3.75rem;--brand-MediaPlaylist-sidebarWidth:27rem;box-sizing:border-box;grid-template-columns:minmax(0,1fr) minmax(0,27rem);grid-template-areas:"media tabs";grid-template-columns:minmax(0, 1fr) minmax(0, var(--brand-MediaPlaylist-sidebarWidth));grid-column-gap:3.75rem;grid-column-gap:var(--brand-MediaPlaylist-desktopGutter);-moz-column-gap:3.75rem;-moz-column-gap:var(--brand-MediaPlaylist-desktopGutter);column-gap:3.75rem;column-gap:var(--brand-MediaPlaylist-desktopGutter);width:100%;padding-inline-start:3.75rem;padding-inline-start:var(--brand-MediaPlaylist-desktopGutter);display:grid}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);flex-direction:column;grid-area:tabs;align-self:stretch;padding-block-start:calc(var(--base-size-48) + var(--base-size-12));display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist--overflowItems___QWHRc .Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB{max-block-size:calc((3 * var(--base-size-64)) + (6 * var(--base-size-20)))}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2{padding-block:var(--base-size-80);grid-area:media;justify-content:flex-start;align-items:flex-start;padding-inline:0;display:flex}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2{width:100%}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx{gap:var(--base-size-40)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb{width:100%}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb iframe{aspect-ratio:16/9;border-radius:var(--base-size-6)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h1+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h2+p,.Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr h3+p{margin-block-start:var(--base-size-12)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj{min-height:auto;padding-block-start:var(--base-size-24);padding-block-end:var(--base-size-12);padding-inline-start:var(--base-size-32);padding-inline-end:var(--brand-MediaPlaylist-desktopGutter)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C{min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-20)))}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX{min-block-size:calc(var(--base-size-64) + (2 * var(--base-size-20)));padding-block:var(--base-size-20);padding-inline-start:var(--base-size-32);padding-inline-end:var(--brand-MediaPlaylist-desktopGutter)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ{align-items:center}}@media screen and (width>=80rem){.Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y{border-inline-end:0}}

package/esm/MediaPlaylist/MediaPlaylist.module.js

@@ -1,4 +1,4 @@
-import './MediaPlaylist.module-BddC0boN.css';//#region src/MediaPlaylist/MediaPlaylist.module.css
+import './MediaPlaylist.module-C4Y3VORG.css';//#region src/MediaPlaylist/MediaPlaylist.module.css
 var e = "Primer_Brand__MediaPlaylist-module__MediaPlaylist___mqadg", t = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__panelContent___nD2Xr", n = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__layout___Jxb17", r = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__playlist___r232y", i = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__heading___bvLnj", a = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingLabel___cOPfs", o = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__headingCounter___xJSQs", s = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanels___bgH_2", c = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__mediaPanel___YI_I2", l = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__panel___iC9Tx", u = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__media___HVCCb", d = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__tablist___EhGxB", f = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__pagination___mct_v", p = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__item___KJx6C", m = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeading___j5Q2s", h = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingContent___pzVd0", g = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingDetails___wQCnu", _ = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__itemHeadingTitle___F1sIm", v = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__tab___LvxjX", y = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__tabContent___9cPbZ", b = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__thumbnail___PENaA", x = "Primer_Brand__MediaPlaylist-module__MediaPlaylist__content___m36IL", S = {
 	MediaPlaylist: e,
 	MediaPlaylist__panelContent: t,

package/esm/MediaPlaylist/MediaPlaylist.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaPlaylist.module.js","names":[],"sources":["../../src/MediaPlaylist/MediaPlaylist.module.css"],"sourcesContent":[".MediaPlaylist {\n  padding-block-start: var(--base-size-36);\n  padding-inline: var(--base-size-20);\n}\n\n@media screen and (max-width: 63.24rem) {\n  .MediaPlaylist {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n    padding: 0;\n  }\n\n  .MediaPlaylist__panelContent :is(h1, h2, h3) + p {\n    margin-block-start: var(--base-size-12);\n  }\n}\n\n.MediaPlaylist__layout {\n  display: flex;\n  flex-direction: column;\n  background: var(--brand-MediaPlaylist-bgColor);\n}\n\n.MediaPlaylist__playlist {\n  order: 2;\n  min-width: 0;\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.MediaPlaylist__heading {\n  display: flex;\n  min-height: var(--base-size-48);\n  align-items: center;\n  gap: var(--base-size-8);\n  padding: var(--base-size-12) var(--base-size-16);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  color: var(--brand-color-text-muted);\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n  text-transform: uppercase;\n}\n\n.MediaPlaylist__headingLabel {\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  text-transform: inherit;\n}\n\n.MediaPlaylist__headingCounter {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  color: var(--brand-color-text-default);\n}\n\n.MediaPlaylist__headingCounter::before {\n  content: '•';\n  color: var(--brand-color-text-muted);\n}\n\n.MediaPlaylist__mediaPanels {\n  order: 1;\n  width: 100%;\n  padding: var(--base-size-16);\n}\n\n.MediaPlaylist__mediaPanel {\n  min-width: 0;\n}\n\n.MediaPlaylist__mediaPanel[hidden] {\n  display: none;\n}\n\n.MediaPlaylist__panel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-20);\n  width: 100%;\n}\n\n.MediaPlaylist__panelContent {\n  max-width: var(--brand-Prose-lineLength);\n}\n\n.MediaPlaylist__media {\n  overflow: hidden;\n  background-color: var(--base-color-scale-black-0);\n}\n\n.MediaPlaylist__media :is(img, picture, video, iframe) {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n}\n\n.MediaPlaylist__tablist {\n  order: 2;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n}\n\n.MediaPlaylist--overflowItems .MediaPlaylist__tablist {\n  max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-12)));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scroll-padding-block: var(--base-size-24);\n}\n\n.MediaPlaylist__pagination {\n  order: 3;\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: var(--base-size-12) var(--base-size-16) var(--base-size-16);\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.MediaPlaylist__item {\n  position: relative;\n  min-width: 0;\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: column;\n  align-items: flex-start;\n  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));\n  overflow-x: hidden;\n}\n\n.MediaPlaylist__item::before {\n  content: '';\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline: 0;\n  height: var(--brand-borderWidth-thin);\n  transform: scaleY(1);\n  transform-origin: 50% 100%;\n  background-color: var(--brand-color-border-muted);\n  transition: transform var(--brand-animation-duration-fast) ease,\n    background-color var(--brand-animation-duration-fast) ease;\n}\n\n.MediaPlaylist__item--selected {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.MediaPlaylist__item--selected::before {\n  transform: scaleY(2);\n  background-color: var(--brand-color-accent-primary);\n}\n\n.MediaPlaylist__itemHeading {\n  display: block;\n  margin: 0;\n  color: var(--brand-color-text-muted);\n}\n\n.MediaPlaylist__item--selected .MediaPlaylist__itemHeading {\n  color: var(--brand-color-text-default);\n}\n\n.MediaPlaylist__itemHeadingContent {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.MediaPlaylist__itemHeadingDetails {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-4);\n  min-width: 0;\n}\n\n.MediaPlaylist__itemHeadingTitle {\n  display: -webkit-box;\n  color: inherit;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n\n.MediaPlaylist__tab {\n  box-sizing: border-box;\n  width: 100%;\n  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  cursor: pointer;\n  outline: none;\n  padding: var(--base-size-12) var(--base-size-16);\n}\n\n.MediaPlaylist__tabContent {\n  display: flex;\n  align-items: flex-start;\n  min-width: 0;\n  width: 100%;\n  gap: var(--base-size-12);\n}\n\n.MediaPlaylist__thumbnail {\n  display: block;\n  flex-shrink: 0;\n  width: var(--base-size-112);\n  block-size: calc(var(--base-size-64) - var(--brand-borderWidth-thin));\n  overflow: hidden;\n  aspect-ratio: 16 / 9;\n  border-radius: var(--brand-borderRadius-small);\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.MediaPlaylist__thumbnail > * {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.MediaPlaylist__tab:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-4);\n}\n\n.MediaPlaylist__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n@media screen and (max-width: 63.24rem) {\n  .MediaPlaylist__mediaPanels {\n    padding-block-end: var(--base-size-24);\n  }\n}\n\n@media screen and (min-width: 38.625rem) {\n  .MediaPlaylist {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .MediaPlaylist {\n    box-sizing: border-box;\n    width: 100%;\n    max-inline-size: 80rem;\n    margin-inline: auto;\n    padding: 0;\n    border-inline: none;\n  }\n\n  .MediaPlaylist__layout {\n    --brand-MediaPlaylist-desktopGutter: 3.75rem;\n    --brand-MediaPlaylist-sidebarWidth: 27rem;\n\n    display: grid;\n    box-sizing: border-box;\n    width: 100%;\n    grid-template-areas: 'media tabs';\n    grid-template-columns: minmax(0, 1fr) minmax(0, var(--brand-MediaPlaylist-sidebarWidth));\n    column-gap: var(--brand-MediaPlaylist-desktopGutter);\n    padding-inline-start: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__playlist {\n    grid-area: tabs;\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    padding-block-start: calc(var(--base-size-48) + var(--base-size-12));\n    border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .MediaPlaylist--overflowItems .MediaPlaylist__tablist {\n    max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-20)));\n  }\n\n  .MediaPlaylist__mediaPanels {\n    grid-area: media;\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    padding-block: var(--base-size-80);\n    padding-inline: 0;\n  }\n\n  .MediaPlaylist__mediaPanel {\n    width: 100%;\n  }\n\n  .MediaPlaylist__panel {\n    gap: var(--base-size-40);\n  }\n\n  .MediaPlaylist__panelContent {\n    width: 100%;\n  }\n\n  .MediaPlaylist__media {\n    width: 100%;\n  }\n\n  .MediaPlaylist__media iframe {\n    aspect-ratio: 16 / 9;\n    border-radius: var(--base-size-6);\n  }\n\n  .MediaPlaylist__itemHeadingDetails {\n    font-size: var(--brand-text-size-200);\n    line-height: var(--brand-text-lineHeight-200);\n  }\n\n  .MediaPlaylist__panelContent :is(h1, h2, h3) + p {\n    margin-block-start: var(--base-size-12);\n  }\n\n  .MediaPlaylist__heading {\n    min-height: auto;\n    padding-block-start: var(--base-size-24);\n    padding-block-end: var(--base-size-12);\n    padding-inline-start: var(--base-size-32);\n    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__item {\n    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));\n  }\n\n  .MediaPlaylist__tab {\n    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));\n    padding-block: var(--base-size-20);\n    padding-inline-start: var(--base-size-32);\n    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__tabContent {\n    align-items: center;\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .MediaPlaylist {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .MediaPlaylist__playlist {\n    border-inline-end: 0;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"MediaPlaylist.module.js","names":[],"sources":["../../src/MediaPlaylist/MediaPlaylist.module.css"],"sourcesContent":[".MediaPlaylist {\n  padding-block-start: var(--base-size-36);\n  padding-inline: var(--base-size-20);\n}\n\n@media screen and (max-width: 63.24rem) {\n  .MediaPlaylist {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n    padding: 0;\n  }\n\n  .MediaPlaylist__panelContent :is(h1, h2, h3) + p {\n    margin-block-start: var(--base-size-12);\n  }\n}\n\n.MediaPlaylist__layout {\n  display: flex;\n  flex-direction: column;\n  background: var(--brand-MediaPlaylist-bgColor);\n}\n\n.MediaPlaylist__playlist {\n  order: 2;\n  min-width: 0;\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.MediaPlaylist__heading {\n  display: flex;\n  min-height: var(--base-size-48);\n  align-items: center;\n  gap: var(--base-size-8);\n  padding: var(--base-size-12) var(--base-size-16);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  color: var(--brand-color-text-muted);\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n  text-transform: uppercase;\n}\n\n.MediaPlaylist__headingLabel {\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  text-transform: inherit;\n}\n\n.MediaPlaylist__headingCounter {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  color: var(--brand-color-text-default);\n}\n\n.MediaPlaylist__headingCounter::before {\n  content: '•';\n  color: var(--brand-color-text-muted);\n}\n\n.MediaPlaylist__mediaPanels {\n  order: 1;\n  width: 100%;\n  padding: var(--base-size-16);\n}\n\n.MediaPlaylist__mediaPanel {\n  min-width: 0;\n}\n\n.MediaPlaylist__mediaPanel[hidden] {\n  display: none;\n}\n\n.MediaPlaylist__panel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-20);\n  width: 100%;\n}\n\n.MediaPlaylist__panelContent {\n  max-width: var(--brand-Prose-lineLength);\n}\n\n.MediaPlaylist__media {\n  overflow: hidden;\n  background-color: var(--base-color-scale-black-0);\n}\n\n.MediaPlaylist__media :is(img, picture, video, iframe) {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n}\n\n.MediaPlaylist__tablist {\n  order: 2;\n  display: flex;\n  flex-direction: column;\n  overflow-x: hidden;\n}\n\n.MediaPlaylist--overflowItems .MediaPlaylist__tablist {\n  max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-12)));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scroll-padding-block: var(--base-size-24);\n}\n\n.MediaPlaylist__pagination {\n  order: 3;\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: var(--base-size-12) var(--base-size-16) var(--base-size-16);\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.MediaPlaylist__item {\n  position: relative;\n  min-width: 0;\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: column;\n  align-items: flex-start;\n  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));\n  overflow-x: hidden;\n}\n\n.MediaPlaylist__item::before {\n  content: '';\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline: 0;\n  height: var(--brand-borderWidth-thin);\n  transform: scaleY(1);\n  transform-origin: 50% 100%;\n  background-color: var(--brand-color-border-muted);\n  transition: transform var(--brand-animation-duration-fast) ease,\n    background-color var(--brand-animation-duration-fast) ease;\n}\n\n.MediaPlaylist__item--selected {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.MediaPlaylist__item--selected::before {\n  transform: scaleY(2);\n  background-color: var(--brand-color-accent-primary);\n}\n\n.MediaPlaylist__itemHeading {\n  display: block;\n  margin: 0;\n  color: var(--brand-color-text-muted);\n}\n\n.MediaPlaylist__item--selected .MediaPlaylist__itemHeading {\n  color: var(--brand-color-text-default);\n}\n\n.MediaPlaylist__itemHeadingContent {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.MediaPlaylist__itemHeadingDetails {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-4);\n  min-width: 0;\n}\n\n.MediaPlaylist__itemHeadingTitle {\n  display: -webkit-box;\n  color: inherit;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n\n.MediaPlaylist__tab {\n  box-sizing: border-box;\n  width: 100%;\n  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  cursor: pointer;\n  outline: none;\n  padding: var(--base-size-12) var(--base-size-16);\n}\n\n.MediaPlaylist__tabContent {\n  display: flex;\n  align-items: flex-start;\n  min-width: 0;\n  width: 100%;\n  gap: var(--base-size-12);\n}\n\n.MediaPlaylist__thumbnail {\n  display: block;\n  flex-shrink: 0;\n  width: var(--base-size-112);\n  block-size: calc(var(--base-size-64) - var(--brand-borderWidth-thin));\n  overflow: hidden;\n  aspect-ratio: 16 / 9;\n  border-radius: var(--brand-borderRadius-small);\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.MediaPlaylist__thumbnail > * {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.MediaPlaylist__tab:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: calc(-1 * var(--base-size-4));\n}\n\n.MediaPlaylist__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-12);\n}\n\n@media screen and (max-width: 63.24rem) {\n  .MediaPlaylist__mediaPanels {\n    padding-block-end: var(--base-size-24);\n  }\n}\n\n@media screen and (min-width: 38.625rem) {\n  .MediaPlaylist {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .MediaPlaylist {\n    box-sizing: border-box;\n    width: 100%;\n    max-inline-size: 80rem;\n    margin-inline: auto;\n    padding: 0;\n    border-inline: none;\n  }\n\n  .MediaPlaylist__layout {\n    --brand-MediaPlaylist-desktopGutter: 3.75rem;\n    --brand-MediaPlaylist-sidebarWidth: 27rem;\n\n    display: grid;\n    box-sizing: border-box;\n    width: 100%;\n    grid-template-areas: 'media tabs';\n    grid-template-columns: minmax(0, 1fr) minmax(0, var(--brand-MediaPlaylist-sidebarWidth));\n    column-gap: var(--brand-MediaPlaylist-desktopGutter);\n    padding-inline-start: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__playlist {\n    grid-area: tabs;\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    padding-block-start: calc(var(--base-size-48) + var(--base-size-12));\n    border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .MediaPlaylist--overflowItems .MediaPlaylist__tablist {\n    max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-20)));\n  }\n\n  .MediaPlaylist__mediaPanels {\n    grid-area: media;\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    padding-block: var(--base-size-80);\n    padding-inline: 0;\n  }\n\n  .MediaPlaylist__mediaPanel {\n    width: 100%;\n  }\n\n  .MediaPlaylist__panel {\n    gap: var(--base-size-40);\n  }\n\n  .MediaPlaylist__panelContent {\n    width: 100%;\n  }\n\n  .MediaPlaylist__media {\n    width: 100%;\n  }\n\n  .MediaPlaylist__media iframe {\n    aspect-ratio: 16 / 9;\n    border-radius: var(--base-size-6);\n  }\n\n  .MediaPlaylist__itemHeadingDetails {\n    font-size: var(--brand-text-size-200);\n    line-height: var(--brand-text-lineHeight-200);\n  }\n\n  .MediaPlaylist__panelContent :is(h1, h2, h3) + p {\n    margin-block-start: var(--base-size-12);\n  }\n\n  .MediaPlaylist__heading {\n    min-height: auto;\n    padding-block-start: var(--base-size-24);\n    padding-block-end: var(--base-size-12);\n    padding-inline-start: var(--base-size-32);\n    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__item {\n    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));\n  }\n\n  .MediaPlaylist__tab {\n    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));\n    padding-block: var(--base-size-20);\n    padding-inline-start: var(--base-size-32);\n    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);\n  }\n\n  .MediaPlaylist__tabContent {\n    align-items: center;\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .MediaPlaylist {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  .MediaPlaylist__playlist {\n    border-inline-end: 0;\n  }\n}\n"],"mappings":""}

package/esm/MinimalFooter/MinimalFooter.module-DzY1SyHQ.css

@@ -0,0 +1 @@
+.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65{border-top:var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);background-color:var(--brand-footer-bg-color);position:relative}.Primer_Brand__MinimalFooter-module__MinimalFooter--withFootnotes___oUvH8{border-top:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8{max-width:1280px;max-width:var(--brand-footer-max-width,1280px);padding-inline:var(--base-size-20);margin-left:auto;margin-right:auto}@media screen and (width>=48rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8{padding-inline:var(--base-size-32)}}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms___gwB2R{padding:var(--base-size-48) 0}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms-item___VB5Sx{margin-bottom:var(--base-size-24)}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms-item___VB5Sx sup{font-size:var(--base-size-12);vertical-align:super;margin-right:var(--base-size-4);display:inline-block}.Primer_Brand__MinimalFooter-module__MinimalFooter__terms-item___VB5Sx:last-child{margin-bottom:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__top___UXzkJ{padding-top:var(--base-size-48);padding-bottom:var(--base-size-32);border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle)}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-row____WR7L{grid-gap:var(--base-size-24);align-items:center;gap:var(--base-size-24);grid-template-columns:auto 1fr;display:grid}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd{display:contents}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd>.Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2{grid-area:2/1/auto/-1;justify-content:flex-start}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd>.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit{grid-area:1/2;justify-self:flex-end}.Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw{color:var(--brand-color-text-default);display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw>svg{width:var(--base-size-24);height:var(--base-size-24)}.Primer_Brand__MinimalFooter-module__MinimalFooter__bottom___oi9Jk{padding-top:var(--base-size-32);padding-bottom:var(--base-size-32)}@media screen and (width>=80rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__top___UXzkJ{padding-top:var(--base-size-32)}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-row____WR7L{justify-content:space-between;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd{justify-content:flex-end;align-items:center;gap:var(--base-size-20);flex-wrap:wrap;flex:1;min-width:0;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__top-actions___dz_zd>.Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2{justify-content:flex-end}.Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw>svg{width:var(--base-size-32);height:var(--base-size-32)}}.Primer_Brand__MinimalFooter-module__MinimalFooter__section___W7x7a{min-width:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__section--footnotes___9t40F{border-bottom:var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);background-color:var(--brand-color-canvas-default)}.Primer_Brand__MinimalFooter-module__MinimalFooter__section--center___K3_Ia>.Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8{padding-top:var(--base-size-32);padding-bottom:var(--base-size-32)}.Primer_Brand__MinimalFooter-module__MinimalFooter__section--center___K3_Ia+.Primer_Brand__MinimalFooter-module__MinimalFooter__section--bottom___HwSJJ{border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle)}.Primer_Brand__MinimalFooter-module__MinimalFooter__bottom-row___kcZck{align-items:flex-start;gap:var(--base-size-24);flex-direction:column;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-links___0zKRs{justify-content:flex-start;align-items:center;gap:var(--base-size-16);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-link___T5TF0{min-width:var(--base-size-24);min-height:var(--base-size-24);justify-content:center;align-items:center;display:flex;position:relative}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-link___T5TF0:hover .Primer_Brand__MinimalFooter-module__MinimalFooter__social-icon___N1tDK,.Primer_Brand__MinimalFooter-module__MinimalFooter__social-link___T5TF0:focus-visible .Primer_Brand__MinimalFooter-module__MinimalFooter__social-icon___N1tDK{filter:var(--brand-footer-socialIcon-hoverFilter)}.Primer_Brand__MinimalFooter-module__MinimalFooter__social-icon___N1tDK{width:auto;height:auto;max-height:var(--base-size-20);filter:var(--brand-footer-socialIcon-restFilter);display:block}.Primer_Brand__MinimalFooter-module__MinimalFooter__copyright___qQ3QR{text-transform:uppercase;margin:0}.Primer_Brand__MinimalFooter-module__MinimalFooter__metaText___peNSx{font-size:var(--base-size-12)}.Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2{align-items:center;gap:var(--base-size-20);flex-wrap:wrap;display:flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__link___T4gI3{color:var(--brand-color-text-muted);cursor:pointer;text-transform:uppercase;background-color:#0000;border:0;align-self:center;padding:0;-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__MinimalFooter-module__MinimalFooter__link___T4gI3:where(button){font:inherit}.Primer_Brand__MinimalFooter-module__MinimalFooter__link___T4gI3:hover{-webkit-text-decoration:underline;text-decoration:underline}@media screen and (width>=48rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__social-links___0zKRs{gap:var(--base-size-20)}}@media screen and (width>=80rem){.Primer_Brand__MinimalFooter-module__MinimalFooter__bottom-row___kcZck{flex-direction:row;justify-content:space-between;align-items:center}}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit{appearance:none;font:inherit;color:var(--brand-color-text-default);cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:disabled,.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit[aria-disabled=true]{cursor:not-allowed}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-content___umaLY{align-items:center;gap:var(--base-size-12);display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-icon___y85GZ{border:var(--brand-borderWidth-thin) solid var(--brand-footer-backToTop-borderColor-rest);border-radius:var(--base-size-6);background-color:var(--brand-footer-backToTop-bgColor-rest);min-width:var(--brand-footer-backToTop-minTarget);min-height:var(--brand-footer-backToTop-minTarget);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:not([disabled]):not([aria-disabled=true]):hover .Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-icon___y85GZ{border-color:var(--brand-footer-backToTop-borderColor-hover);background-color:var(--brand-footer-backToTop-bgColor-hover)}.Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit:not([disabled]):not([aria-disabled=true]):active .Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop-icon___y85GZ{border-color:var(--brand-footer-backToTop-borderColor-active);background-color:var(--brand-footer-backToTop-bgColor-active)}@media (prefers-reduced-motion:reduce){.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65,.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65:before,.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65:after,.Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65 *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/MinimalFooter/MinimalFooter.module.js

@@ -1,4 +1,4 @@
-import './MinimalFooter.module-BKn_6UZK.css';//#region src/MinimalFooter/MinimalFooter.module.css
+import './MinimalFooter.module-DzY1SyHQ.css';//#region src/MinimalFooter/MinimalFooter.module.css
 var e = "Primer_Brand__MinimalFooter-module__MinimalFooter___xLq65", t = "Primer_Brand__MinimalFooter-module__MinimalFooter__container___mhY_8", n = "Primer_Brand__MinimalFooter-module__MinimalFooter__terms___gwB2R", r = "Primer_Brand__MinimalFooter-module__MinimalFooter__top___UXzkJ", i = "Primer_Brand__MinimalFooter-module__MinimalFooter__links___kwBz2", a = "Primer_Brand__MinimalFooter-module__MinimalFooter__backToTop___fmxit", o = "Primer_Brand__MinimalFooter-module__MinimalFooter__logo___rFLvw", s = "Primer_Brand__MinimalFooter-module__MinimalFooter__bottom___oi9Jk", c = "Primer_Brand__MinimalFooter-module__MinimalFooter__section___W7x7a", l = "Primer_Brand__MinimalFooter-module__MinimalFooter__copyright___qQ3QR", u = "Primer_Brand__MinimalFooter-module__MinimalFooter__metaText___peNSx", d = "Primer_Brand__MinimalFooter-module__MinimalFooter__link___T4gI3", f = {
 	MinimalFooter: e,
 	"MinimalFooter--withFootnotes": "Primer_Brand__MinimalFooter-module__MinimalFooter--withFootnotes___oUvH8",

package/esm/MinimalFooter/MinimalFooter.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"MinimalFooter.module.js","names":[],"sources":["../../src/MinimalFooter/MinimalFooter.module.css"],"sourcesContent":[".MinimalFooter {\n  position: relative;\n  border-top: var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);\n  background-color: var(--brand-footer-bg-color);\n}\n\n.MinimalFooter--withFootnotes {\n  border-top: 0;\n}\n\n/**\n * MinimalFooter shared styles\n */\n.MinimalFooter__container {\n  max-width: var(--brand-footer-max-width, 1280px);\n  padding-inline: var(--base-size-20);\n  margin-right: auto;\n  margin-left: auto;\n}\n\n@media screen and (min-width: 48rem) {\n  .MinimalFooter__container {\n    padding-inline: var(--base-size-32);\n  }\n}\n\n/**\n * MinimalFooter terms section\n */\n.MinimalFooter__terms {\n  padding: var(--base-size-48) 0;\n}\n\n.MinimalFooter__terms-item {\n  margin-bottom: var(--base-size-24);\n}\n\n.MinimalFooter__terms-item sup {\n  font-size: var(--base-size-12);\n  vertical-align: super;\n  display: inline-block;\n  margin-right: var(--base-size-4);\n}\n\n.MinimalFooter__terms-item:last-child {\n  margin-bottom: 0;\n}\n\n/**\n * MinimalFooter top section\n */\n.MinimalFooter__top {\n  padding-top: var(--base-size-48);\n  padding-bottom: var(--base-size-32);\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n.MinimalFooter__top-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  gap: var(--base-size-24);\n}\n\n.MinimalFooter__top-actions {\n  display: contents;\n}\n\n.MinimalFooter__top-actions > .MinimalFooter__links {\n  grid-column: 1 / -1;\n  grid-row: 2;\n  justify-content: flex-start;\n}\n\n.MinimalFooter__top-actions > .MinimalFooter__backToTop {\n  grid-column: 2;\n  grid-row: 1;\n  justify-self: flex-end;\n}\n\n.MinimalFooter__logo {\n  display: inline-flex;\n  color: var(--brand-color-text-default);\n}\n\n.MinimalFooter__logo > svg {\n  width: var(--base-size-24);\n  height: var(--base-size-24);\n}\n\n.MinimalFooter__bottom {\n  padding-top: var(--base-size-32);\n  padding-bottom: var(--base-size-32);\n}\n\n@media screen and (min-width: 80rem) {\n  .MinimalFooter__top {\n    padding-top: var(--base-size-32);\n  }\n\n  .MinimalFooter__top-row {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .MinimalFooter__top-actions {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--base-size-20);\n    min-width: 0;\n  }\n\n  .MinimalFooter__top-actions > .MinimalFooter__links {\n    justify-content: flex-end;\n  }\n\n  .MinimalFooter__logo > svg {\n    width: var(--base-size-32);\n    height: var(--base-size-32);\n  }\n}\n\n.MinimalFooter__section {\n  min-width: 0;\n}\n\n.MinimalFooter__section--footnotes {\n  border-bottom: var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.MinimalFooter__section--center > .MinimalFooter__container {\n  padding-top: var(--base-size-32);\n  padding-bottom: var(--base-size-32);\n}\n\n.MinimalFooter__section--center + .MinimalFooter__section--bottom {\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n/**\n * MinimalFooter bottom section\n */\n.MinimalFooter__bottom-row {\n  display: flex;\n}\n\n.MinimalFooter__bottom-row {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-24);\n}\n\n.MinimalFooter__social-links {\n  display: flex;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--base-size-16);\n}\n\n.MinimalFooter__social-link {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--base-size-24);\n  min-height: var(--base-size-24);\n}\n\n.MinimalFooter__social-link:hover .MinimalFooter__social-icon,\n.MinimalFooter__social-link:focus-visible .MinimalFooter__social-icon {\n  filter: var(--brand-footer-socialIcon-hoverFilter);\n}\n\n.MinimalFooter__social-icon {\n  display: block;\n  width: auto;\n  height: auto;\n  max-height: var(--base-size-20);\n  filter: var(--brand-footer-socialIcon-restFilter);\n}\n\n.MinimalFooter__copyright {\n  margin: 0;\n  text-transform: uppercase;\n}\n\n/* Keep the size-100 text rhythm, but use the approved 12px size token for footer chrome. */\n.MinimalFooter__metaText {\n  font-size: var(--base-size-12);\n}\n\n.MinimalFooter__links {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--base-size-20);\n}\n\n.MinimalFooter__link {\n  align-self: center;\n  color: var(--brand-color-text-muted);\n  text-decoration: none;\n  border: 0;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  text-transform: uppercase;\n}\n\n.MinimalFooter__link:where(button) {\n  font: inherit;\n}\n\n.MinimalFooter__link:hover {\n  text-decoration: underline;\n}\n\n@media screen and (min-width: 48rem) {\n  .MinimalFooter__social-links {\n    gap: var(--base-size-20);\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .MinimalFooter__bottom-row {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  }\n}\n\n.MinimalFooter__backToTop {\n  appearance: none;\n  font: inherit;\n  display: inline-flex;\n  padding: 0;\n  border: 0;\n  color: var(--brand-color-text-default);\n  background: none;\n  cursor: pointer;\n}\n\n.MinimalFooter__backToTop:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.MinimalFooter__backToTop:disabled,\n.MinimalFooter__backToTop[aria-disabled='true'] {\n  cursor: not-allowed;\n}\n\n.MinimalFooter__backToTop-content {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-12);\n}\n\n.MinimalFooter__backToTop-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: var(--brand-borderWidth-thin) solid var(--brand-footer-backToTop-borderColor-rest);\n  border-radius: var(--base-size-6);\n  background-color: var(--brand-footer-backToTop-bgColor-rest);\n  min-width: var(--brand-footer-backToTop-minTarget);\n  min-height: var(--brand-footer-backToTop-minTarget);\n  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n    border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.MinimalFooter__backToTop:not([disabled], [aria-disabled='true']):hover .MinimalFooter__backToTop-icon {\n  border-color: var(--brand-footer-backToTop-borderColor-hover);\n  background-color: var(--brand-footer-backToTop-bgColor-hover);\n}\n\n.MinimalFooter__backToTop:not([disabled], [aria-disabled='true']):active .MinimalFooter__backToTop-icon {\n  border-color: var(--brand-footer-backToTop-borderColor-active);\n  background-color: var(--brand-footer-backToTop-bgColor-active);\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .MinimalFooter,\n  .MinimalFooter::before,\n  .MinimalFooter::after,\n  .MinimalFooter * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"MinimalFooter.module.js","names":[],"sources":["../../src/MinimalFooter/MinimalFooter.module.css"],"sourcesContent":[".MinimalFooter {\n  position: relative;\n  border-top: var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);\n  background-color: var(--brand-footer-bg-color);\n}\n\n.MinimalFooter--withFootnotes {\n  border-top: 0;\n}\n\n/**\n * MinimalFooter shared styles\n */\n.MinimalFooter__container {\n  max-width: var(--brand-footer-max-width, 1280px);\n  padding-inline: var(--base-size-20);\n  margin-right: auto;\n  margin-left: auto;\n}\n\n@media screen and (min-width: 48rem) {\n  .MinimalFooter__container {\n    padding-inline: var(--base-size-32);\n  }\n}\n\n/**\n * MinimalFooter terms section\n */\n.MinimalFooter__terms {\n  padding: var(--base-size-48) 0;\n}\n\n.MinimalFooter__terms-item {\n  margin-bottom: var(--base-size-24);\n}\n\n.MinimalFooter__terms-item sup {\n  font-size: var(--base-size-12);\n  vertical-align: super;\n  display: inline-block;\n  margin-right: var(--base-size-4);\n}\n\n.MinimalFooter__terms-item:last-child {\n  margin-bottom: 0;\n}\n\n/**\n * MinimalFooter top section\n */\n.MinimalFooter__top {\n  padding-top: var(--base-size-48);\n  padding-bottom: var(--base-size-32);\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n.MinimalFooter__top-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  gap: var(--base-size-24);\n}\n\n.MinimalFooter__top-actions {\n  display: contents;\n}\n\n.MinimalFooter__top-actions > .MinimalFooter__links {\n  grid-column: 1 / -1;\n  grid-row: 2;\n  justify-content: flex-start;\n}\n\n.MinimalFooter__top-actions > .MinimalFooter__backToTop {\n  grid-column: 2;\n  grid-row: 1;\n  justify-self: flex-end;\n}\n\n.MinimalFooter__logo {\n  display: inline-flex;\n  color: var(--brand-color-text-default);\n}\n\n.MinimalFooter__logo > svg {\n  width: var(--base-size-24);\n  height: var(--base-size-24);\n}\n\n.MinimalFooter__bottom {\n  padding-top: var(--base-size-32);\n  padding-bottom: var(--base-size-32);\n}\n\n@media screen and (min-width: 80rem) {\n  .MinimalFooter__top {\n    padding-top: var(--base-size-32);\n  }\n\n  .MinimalFooter__top-row {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .MinimalFooter__top-actions {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--base-size-20);\n    min-width: 0;\n  }\n\n  .MinimalFooter__top-actions > .MinimalFooter__links {\n    justify-content: flex-end;\n  }\n\n  .MinimalFooter__logo > svg {\n    width: var(--base-size-32);\n    height: var(--base-size-32);\n  }\n}\n\n.MinimalFooter__section {\n  min-width: 0;\n}\n\n.MinimalFooter__section--footnotes {\n  border-bottom: var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.MinimalFooter__section--center > .MinimalFooter__container {\n  padding-top: var(--base-size-32);\n  padding-bottom: var(--base-size-32);\n}\n\n.MinimalFooter__section--center + .MinimalFooter__section--bottom {\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n/**\n * MinimalFooter bottom section\n */\n.MinimalFooter__bottom-row {\n  display: flex;\n}\n\n.MinimalFooter__bottom-row {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-24);\n}\n\n.MinimalFooter__social-links {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--base-size-16);\n}\n\n.MinimalFooter__social-link {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--base-size-24);\n  min-height: var(--base-size-24);\n}\n\n.MinimalFooter__social-link:hover .MinimalFooter__social-icon,\n.MinimalFooter__social-link:focus-visible .MinimalFooter__social-icon {\n  filter: var(--brand-footer-socialIcon-hoverFilter);\n}\n\n.MinimalFooter__social-icon {\n  display: block;\n  width: auto;\n  height: auto;\n  max-height: var(--base-size-20);\n  filter: var(--brand-footer-socialIcon-restFilter);\n}\n\n.MinimalFooter__copyright {\n  margin: 0;\n  text-transform: uppercase;\n}\n\n/* Keep the size-100 text rhythm, but use the approved 12px size token for footer chrome. */\n.MinimalFooter__metaText {\n  font-size: var(--base-size-12);\n}\n\n.MinimalFooter__links {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--base-size-20);\n}\n\n.MinimalFooter__link {\n  align-self: center;\n  color: var(--brand-color-text-muted);\n  text-decoration: none;\n  border: 0;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  text-transform: uppercase;\n}\n\n.MinimalFooter__link:where(button) {\n  font: inherit;\n}\n\n.MinimalFooter__link:hover {\n  text-decoration: underline;\n}\n\n@media screen and (min-width: 48rem) {\n  .MinimalFooter__social-links {\n    gap: var(--base-size-20);\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .MinimalFooter__bottom-row {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  }\n}\n\n.MinimalFooter__backToTop {\n  appearance: none;\n  font: inherit;\n  display: inline-flex;\n  padding: 0;\n  border: 0;\n  color: var(--brand-color-text-default);\n  background: none;\n  cursor: pointer;\n}\n\n.MinimalFooter__backToTop:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.MinimalFooter__backToTop:disabled,\n.MinimalFooter__backToTop[aria-disabled='true'] {\n  cursor: not-allowed;\n}\n\n.MinimalFooter__backToTop-content {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-12);\n}\n\n.MinimalFooter__backToTop-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: var(--brand-borderWidth-thin) solid var(--brand-footer-backToTop-borderColor-rest);\n  border-radius: var(--base-size-6);\n  background-color: var(--brand-footer-backToTop-bgColor-rest);\n  min-width: var(--brand-footer-backToTop-minTarget);\n  min-height: var(--brand-footer-backToTop-minTarget);\n  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n    border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.MinimalFooter__backToTop:not([disabled], [aria-disabled='true']):hover .MinimalFooter__backToTop-icon {\n  border-color: var(--brand-footer-backToTop-borderColor-hover);\n  background-color: var(--brand-footer-backToTop-bgColor-hover);\n}\n\n.MinimalFooter__backToTop:not([disabled], [aria-disabled='true']):active .MinimalFooter__backToTop-icon {\n  border-color: var(--brand-footer-backToTop-borderColor-active);\n  background-color: var(--brand-footer-backToTop-bgColor-active);\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .MinimalFooter,\n  .MinimalFooter::before,\n  .MinimalFooter::after,\n  .MinimalFooter * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}