@primer/react-brand 0.73.0 → 0.74.0-rc.101f122b

package/esm/Card/Card.js.map

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

package/esm/Card/Card.module-Svi04dp7.css

@@ -0,0 +1 @@
+.Primer_Brand__Card-module__Card___txAQX{--Card-grid-template-rows:auto auto auto auto auto auto 1fr auto;color:var(--brand-color-text-default);padding:var(--brand-Card-padding-block) var(--brand-Card-padding-inline);grid-template:"image image""leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description"1fr"action action"/1fr 1fr;grid-template-rows:var(--Card-grid-template-rows);border-radius:var(--brand-borderRadius-medium);flex:auto;height:100%;-webkit-text-decoration:none;text-decoration:none;display:grid;position:relative}@media screen and (width>=64rem){.Primer_Brand__Card-module__Card___txAQX{--brand-Card-padding-inline:var(--base-size-32)}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{--brand-Card-padding-block:var(--base-size-64);--brand-Card-padding-inline:var(--base-size-40);text-align:center}@media screen and (width>=64rem){.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{--brand-Card-padding-inline:var(--base-size-80)}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{grid-template-columns:1fr;grid-template-areas:"image""leadingVisual""icon""tokens""label""heading""description""action";justify-items:center}.Primer_Brand__Card-module__Card--backgroundColor-default___1JGan{background-color:var(--brand-Card-background-default)}.Primer_Brand__Card-module__Card--backgroundColor-subtle___0bVGO{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Card-module__Card--backgroundColor-none___GVX0n{background-color:#0000}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"image image""leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"image""leadingVisual""icon""label""heading""description""tokens""action"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{grid-template-areas:"leadingVisual""icon""tokens""label""heading""description""action""image"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto 1fr auto auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"leadingVisual""icon""label""heading""description""tokens""action""image"}.Primer_Brand__Card-module__Card--hasLeadingVisual___M8XW4{--brand-Card-padding-block:var(--base-size-64);--brand-Card-padding-inline:var(--base-size-40)}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_ .Primer_Brand__Card-module__Card__image___3J5wL{margin-bottom:0;margin-top:var(--base-size-28)}.Primer_Brand__Card-module__Card--maxWidth___vGoIk{max-width:var(--brand-Card-maxWidth)}.Primer_Brand__Card-module__Card--fullWidth___nh9Zq{max-width:none;max-width:initial}.Primer_Brand__Card-module__Card--variant-minimal___V3m21,.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--variant-minimal___V3m21{padding:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH{--Card-arrowAction-endInset:var(--base-size-40)}.Primer_Brand__Card-module__Card___txAQX:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Card-module__Card__link___LyRm6{color:currentColor;-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__Card-module__Card__link___LyRm6 code,.Primer_Brand__Card-module__Card__description___6RhVF code{font-family:var(--brand-fontStack-monospace);font-size:calc(1em - 1px);font-weight:var(--base-text-weight-regular);color:var(--brand-InlineCode-color-fg-default);background-color:var(--brand-InlineCode-bgColor);padding-block:0;padding-inline:var(--base-size-4);border-radius:var(--base-size-2);white-space:normal;word-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.6}.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc:hover .Primer_Brand__Card-module__Card__link___LyRm6{-webkit-text-decoration:underline!important;text-decoration:underline!important}.Primer_Brand__Card-module__Card__link___LyRm6:focus{outline:none}.Primer_Brand__Card-module__Card__link___LyRm6:before{content:"";position:absolute;inset:0}.Primer_Brand__Card-module__Card--border___7rvcG{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY{height:100%}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21){border-radius:var(--brand-borderRadius-small)}.Primer_Brand__Card-module__Card__outer___FFzJY:focus-within{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21):focus-within{outline-offset:var(--base-size-12)}.Primer_Brand__Card-module__Card__image___3J5wL{border-radius:var(--brand-borderRadius-medium);grid-area:image;margin-block-end:var(--base-size-28);overflow:hidden}.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-inline:calc(var(--brand-Card-padding-inline) * -1)}.Primer_Brand__Card-module__Card__image--position-block-start___Tdkgr.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-block-start:calc(var(--brand-Card-padding-block) * -1)}.Primer_Brand__Card-module__Card__image--position-block-end___E_0LZ.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-block-end:calc(var(--brand-Card-padding-block) * -1)}.Primer_Brand__Card-module__Card--border___7rvcG .Primer_Brand__Card-module__Card__image--position-block-start___Tdkgr.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{border-end-end-radius:0;border-end-start-radius:0}.Primer_Brand__Card-module__Card--border___7rvcG .Primer_Brand__Card-module__Card__image--position-block-end___E_0LZ.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);border-start-start-radius:0;border-start-end-radius:0}.Primer_Brand__Card-module__Card--variant-minimal___V3m21 .Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-inline:0}.Primer_Brand__Card-module__Card--variant-minimal___V3m21 .Primer_Brand__Card-module__Card__image--position-block-start___Tdkgr.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-block-start:0}.Primer_Brand__Card-module__Card--variant-minimal___V3m21 .Primer_Brand__Card-module__Card__image--position-block-end___E_0LZ.Primer_Brand__Card-module__Card__image--padding-none___Bh_kj{margin-block-end:0}.Primer_Brand__Card-module__Card__image___3J5wL img,.Primer_Brand__Card-module__Card__image___3J5wL picture,.Primer_Brand__Card-module__Card__image___3J5wL span{display:block}.Primer_Brand__Card-module__Card__leadingVisual___l_R3_{grid-area:leadingVisual;align-items:center;margin-block-end:var(--base-size-36);display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__leadingVisual___l_R3_{justify-content:center}.Primer_Brand__Card-module__Card__leadingVisualItem___ICuuV{max-width:100%;height:var(--base-size-40);width:auto;display:block}.Primer_Brand__Card-module__Card__icon___gPD1k{margin-bottom:var(--base-size-24);grid-area:icon}.Primer_Brand__Card-module__Card__tokens___9L_4a{gap:var(--base-size-8);margin-bottom:var(--base-size-20);flex-wrap:wrap;grid-area:tokens;display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__tokens___9L_4a{justify-content:center}.Primer_Brand__Card-module__Card__tokens--position-block-end___TL4R0{margin-block-start:var(--base-size-20);margin-block-end:0}.Primer_Brand__Card-module__Card__label___q_cqg{grid-area:label;inline-size:fit-content;max-inline-size:100%;margin-block-end:var(--base-size-20)}.Primer_Brand__Card-module__Card__heading___vdQlj{grid-area:heading;margin-block-end:var(--base-size-12)}.Primer_Brand__Card-module__Card__description___6RhVF{grid-area:description;margin-block-end:var(--base-size-24)}.Primer_Brand__Card-module__Card__action___NKFQ0{pointer-events:none;grid-area:action;align-items:center;max-inline-size:100%;margin-block-start:auto;display:inline-flex}.Primer_Brand__Card-module__Card__actionIcon___KF4ar{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:clip;white-space:normal;min-inline-size:0;display:block;overflow:visible}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0{inline-size:100%;min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0>span:first-child{min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:clip;white-space:normal;word-wrap:anywhere;overflow:visible}.Primer_Brand__Card-module__Card--align-center___zuZI_:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-align:center}.Primer_Brand__Card-module__Card__actionLabelClip___kEth0{display:contents}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy .Primer_Brand__Card-module__Card__action___NKFQ0{margin-block-start:var(--base-size-20)}.Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{--actionArrow-duration:.3s;min-height:var(--base-size-40);width:auto;min-inline-size:0;max-inline-size:calc(100% - var(--Card-arrowAction-endInset));-moz-column-gap:var(--base-size-8);justify-content:flex-start;column-gap:var(--base-size-8);padding-block:var(--base-size-4);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-Card-background-overlay);flex-shrink:0;margin-block-start:var(--base-size-20);padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4);overflow:hidden}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1{width:var(--base-size-32);min-width:var(--base-size-32);height:var(--base-size-32);min-height:var(--base-size-32);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-color-canvas-default)}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__action___NKFQ0{justify-content:center}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 span{color:var(--brand-Link-color-accent)}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 *{cursor:inherit}.Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card--expandableArrow____CfmY{--ExpandableArrow-duration:var(--brand-Card-animation-duration);--ExpandableArrow-easing:var(--brand-Card-animation-easing)}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1 .Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__description___6RhVF{margin-bottom:var(--base-size-12)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:start;min-inline-size:0}@media (hover:hover){.Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{-moz-column-gap:0;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out, -moz-column-gap var(--actionArrow-duration) ease-out;background-color:#0000;border-color:#0000;column-gap:0;padding-inline:0}.Primer_Brand__Card-module__Card__actionLabelClip___kEth0{--actionLabelClip-duration:.4s;opacity:0;min-inline-size:0;max-inline-size:0;transform:translateX(calc(var(--base-size-12) * -1));transition:max-inline-size .4s var(--brand-Card-animation-easing), opacity .4s ease-out, transform .4s ease-out, margin-inline .4s ease-out, padding-inline .4s ease-out;transition:max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing), opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out, margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;background-color:#0000;flex:auto;align-self:stretch;align-items:center;margin-inline:0;padding-inline:0;display:inline-flex;overflow:hidden}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:center}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{-moz-column-gap:var(--base-size-8);column-gap:var(--base-size-8);border-color:var(--brand-color-border-default);background-color:var(--brand-Card-background-overlay);padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__actionLabelClip___kEth0,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__actionLabelClip___kEth0{opacity:1;max-inline-size:100%;margin-inline-start:calc(var(--base-size-12) * -1);margin-inline-end:0;padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4);transform:translate(0)}.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY,.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY{transform:translateX(var(--base-size-2))}.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2),.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2){stroke-dashoffset:20px}.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc,.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc *{transition:none;animation:none}@media (prefers-reduced-motion:reduce){.Primer_Brand__Card-module__Card___txAQX,.Primer_Brand__Card-module__Card___txAQX:before,.Primer_Brand__Card-module__Card___txAQX:after,.Primer_Brand__Card-module__Card___txAQX *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Card/Card.module.js

@@ -1,4 +1,4 @@
-import './Card.module-4GGxtM9r.css';var e = {
+import './Card.module-Svi04dp7.css';var e = {
 	Card: "Primer_Brand__Card-module__Card___txAQX",
 	"Card--align-center": "Primer_Brand__Card-module__Card--align-center___zuZI_",
 	"Card--backgroundColor-default": "Primer_Brand__Card-module__Card--backgroundColor-default___1JGan",
@@ -33,9 +33,6 @@ import './Card.module-4GGxtM9r.css';var e = {
 	Card__actionLabelClip: "Primer_Brand__Card-module__Card__actionLabelClip___kEth0",
 	"Card__action--arrowOnly": "Primer_Brand__Card-module__Card__action--arrowOnly___19e3M",
 	"Card__actionIcon--arrowOnly": "Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1",
-	"Card--skew": "Primer_Brand__Card-module__Card--skew___k2nMy",
-	Card__torch: "Primer_Brand__Card-module__Card__torch___hdUqp",
-	"Card__skew-bounding": "Primer_Brand__Card-module__Card__skew-bounding___g108S",
 	"Card--expandableArrow": "Primer_Brand__Card-module__Card--expandableArrow____CfmY"
 };
 //#endregion

package/esm/Card/Card.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n  /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. */\n  --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n  text-decoration: none;\n  color: var(--brand-color-text-default);\n\n  padding: var(--brand-Card-padding-block) var(--brand-Card-padding-inline);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action';\n  flex: auto;\n  grid-template-rows: var(--Card-grid-template-rows);\n  position: relative;\n  height: 100%;\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 64rem) {\n  .Card {\n    --brand-Card-padding-inline: var(--base-size-32);\n  }\n}\n\n.Card--align-center .Card {\n  --brand-Card-padding-block: var(--base-size-64);\n  --brand-Card-padding-inline: var(--base-size-40);\n\n  text-align: center;\n}\n\n@media screen and (min-width: 64rem) {\n  .Card--align-center .Card {\n    --brand-Card-padding-inline: var(--base-size-80);\n  }\n}\n\n.Card--align-center .Card {\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action';\n  justify-items: center;\n}\n\n.Card--backgroundColor-default {\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n  background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action';\n}\n\n/** Block end image position option */\n.Card--imagePos-block-end {\n  /* Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action'\n    'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. */\n  --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action'\n    'image';\n}\n\n.Card--hasLeadingVisual {\n  --brand-Card-padding-block: var(--base-size-64);\n  --brand-Card-padding-inline: var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n  margin-bottom: 0;\n  margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n  max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n  max-width: unset;\n}\n\n.Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n  --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n  text-decoration: none;\n}\n\n.Card__link {\n  color: currentColor;\n  text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace);\n  background-color: var(--brand-color-canvas-subtle);\n  padding: 0 var(--base-size-4) var(--base-size-2);\n  margin-inline: var(--base-size-2);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-small);\n  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.Card__description code {\n  padding: var(--base-size-2) var(--base-size-4) 0;\n}\n.Card__link:has(code) {\n  line-height: calc(1lh * 1.4);\n}\n\n.Card__description.Card__description:has(code) {\n  line-height: calc(1lh * 1.25);\n}\n\n.Card--disableAnimation:hover .Card__link {\n  text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title */\n.Card__link:focus {\n  outline: none;\n}\n\n.Card__link::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n}\n\n.Card--border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n  height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n  outline-offset: var(\n    --base-size-12\n  ); /* This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` */\n}\n\n.Card__image {\n  margin-block-end: var(--base-size-28);\n  border-radius: var(--brand-borderRadius-medium);\n  overflow: hidden;\n  grid-area: image;\n}\n\n.Card__image--padding-none {\n  margin-inline: calc(var(--brand-Card-padding-inline) * -1);\n}\n\n.Card__image--position-block-start.Card__image--padding-none {\n  margin-block-start: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card__image--position-block-end.Card__image--padding-none {\n  margin-block-end: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card--border .Card__image--position-block-start.Card__image--padding-none {\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n}\n\n.Card--border .Card__image--position-block-end.Card__image--padding-none {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-start-start-radius: 0;\n  border-start-end-radius: 0;\n}\n\n.Card--variant-minimal .Card__image--padding-none {\n  margin-inline: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-start.Card__image--padding-none {\n  margin-block-start: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-end.Card__image--padding-none {\n  margin-block-end: 0;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n  display: block;\n}\n\n.Card__leadingVisual {\n  margin-block-end: var(--base-size-36);\n  display: flex;\n  align-items: center;\n  grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n  justify-content: center;\n}\n\n.Card__leadingVisualItem {\n  display: block;\n  max-width: 100%;\n  height: var(--base-size-40);\n  width: auto;\n}\n\n.Card__icon {\n  margin-bottom: var(--base-size-24);\n  grid-area: icon;\n}\n\n.Card__tokens {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-8);\n  grid-area: tokens;\n  margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n  justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n  margin-block-start: var(--base-size-20);\n  margin-block-end: 0;\n}\n\n.Card__label {\n  margin-block-end: var(--base-size-20);\n  grid-area: label;\n  inline-size: fit-content;\n  max-inline-size: 100%;\n}\n\n.Card__heading {\n  margin-block-end: var(--base-size-12);\n  grid-area: heading;\n}\n\n.Card__description {\n  margin-block-end: var(--base-size-24);\n  grid-area: description;\n}\n\n.Card__action {\n  grid-area: action;\n  margin-block-start: auto;\n  display: inline-flex;\n  align-items: center;\n  max-inline-size: 100%;\n  pointer-events: none;\n}\n\n.Card__actionIcon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.Card__actionLabel {\n  display: block;\n  min-inline-size: 0;\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n  inline-size: 100%;\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  text-align: center;\n}\n\n.Card__actionLabelClip {\n  display: contents;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n  margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n  --actionArrow-duration: 300ms;\n\n  margin-block-start: var(--base-size-20);\n  min-height: var(--base-size-40);\n  width: auto;\n  min-inline-size: 0;\n  max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n  justify-content: flex-start;\n  column-gap: var(--base-size-8);\n  padding-block: var(--base-size-4);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-Card-background-overlay);\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.Card__actionIcon--arrowOnly {\n  width: var(--base-size-32);\n  min-width: var(--base-size-32);\n  height: var(--base-size-32);\n  min-height: var(--base-size-32);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n  justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n  color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action * {\n  cursor: inherit;\n}\n\n.Card--skew:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.Card--skew:hover .Card__torch {\n  opacity: 0.85;\n}\n\n.Card__skew-bounding {\n  border-radius: var(--brand-borderRadius-medium);\n  position: relative;\n  overflow: hidden;\n  z-index: 1;\n  height: 100%;\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card__torch {\n  width: 650px;\n  height: 650px;\n  background-color: var(--brand-color-accent-primary);\n  filter: blur(180px);\n  border-radius: 300px;\n  opacity: 0;\n  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n  mix-blend-mode: soft-light;\n  will-change: transform;\n  pointer-events: none;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  z-index: -1;\n}\n\n.Card--expandableArrow {\n  margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n  --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n  --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n  margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n  margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow .Card__action {\n  min-inline-size: 0;\n  justify-self: start;\n}\n\n@media (hover: hover) {\n  .Card__action--arrowOnly {\n    column-gap: 0;\n    padding-inline: 0;\n    border-color: transparent;\n    background-color: transparent;\n    transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n      column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n  }\n\n  .Card__actionLabelClip {\n    --actionLabelClip-duration: 400ms;\n\n    display: inline-flex;\n    flex: 1 1 auto;\n    align-items: center;\n    align-self: stretch;\n    min-inline-size: 0;\n    overflow: hidden;\n    max-inline-size: 0;\n    background-color: transparent;\n    opacity: 0;\n    transform: translateX(calc(var(--base-size-12) * -1));\n    margin-inline: 0;\n    padding-inline: 0;\n    transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n      opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n      margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n  }\n\n  .Card--ctaVariant-arrow .Card__actionLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n  justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n  column-gap: var(--base-size-8);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border-color: var(--brand-color-border-default);\n  background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n  max-inline-size: 100%;\n  opacity: 1;\n  transform: translateX(0);\n  margin-inline-start: calc(var(--base-size-12) * -1);\n  margin-inline-end: 0;\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n  transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n  stroke-dashoffset: 20;\n}\n\n.Card--disableAnimation,\n.Card--disableAnimation * {\n  animation: none;\n  transition: none;\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  .Card,\n  .Card::before,\n  .Card::after,\n  .Card * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n  /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. */\n  --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n  text-decoration: none;\n  color: var(--brand-color-text-default);\n\n  padding: var(--brand-Card-padding-block) var(--brand-Card-padding-inline);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action';\n  flex: auto;\n  grid-template-rows: var(--Card-grid-template-rows);\n  position: relative;\n  height: 100%;\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 64rem) {\n  .Card {\n    --brand-Card-padding-inline: var(--base-size-32);\n  }\n}\n\n.Card--align-center .Card {\n  --brand-Card-padding-block: var(--base-size-64);\n  --brand-Card-padding-inline: var(--base-size-40);\n\n  text-align: center;\n}\n\n@media screen and (min-width: 64rem) {\n  .Card--align-center .Card {\n    --brand-Card-padding-inline: var(--base-size-80);\n  }\n}\n\n.Card--align-center .Card {\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action';\n  justify-items: center;\n}\n\n.Card--backgroundColor-default {\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n  background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action';\n}\n\n/** Block end image position option */\n.Card--imagePos-block-end {\n  /* Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action'\n    'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. */\n  --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action'\n    'image';\n}\n\n.Card--hasLeadingVisual {\n  --brand-Card-padding-block: var(--base-size-64);\n  --brand-Card-padding-inline: var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n  margin-bottom: 0;\n  margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n  max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n  max-width: unset;\n}\n\n.Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n  --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n  text-decoration: none;\n}\n\n.Card__link {\n  color: currentColor;\n  text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n  font-family: var(--brand-fontStack-monospace);\n  /* optical resize relative to parent. monospace tends to be a little taller than sans-serif */\n  font-size: calc(1em - 1px);\n  font-weight: var(--base-text-weight-regular);\n  /* Keep the background clear of adjacent lines when large text wraps. */\n  line-height: 1.6;\n  color: var(--brand-InlineCode-color-fg-default);\n  background-color: var(--brand-InlineCode-bgColor);\n  padding-block: 0;\n  padding-inline: var(--base-size-4);\n  border-radius: var(--base-size-2);\n  white-space: normal;\n  overflow-wrap: anywhere;\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n}\n\n.Card--disableAnimation:hover .Card__link {\n  text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title */\n.Card__link:focus {\n  outline: none;\n}\n\n.Card__link::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n}\n\n.Card--border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n  height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n  outline-offset: var(\n    --base-size-12\n  ); /* This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` */\n}\n\n.Card__image {\n  margin-block-end: var(--base-size-28);\n  border-radius: var(--brand-borderRadius-medium);\n  overflow: hidden;\n  grid-area: image;\n}\n\n.Card__image--padding-none {\n  margin-inline: calc(var(--brand-Card-padding-inline) * -1);\n}\n\n.Card__image--position-block-start.Card__image--padding-none {\n  margin-block-start: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card__image--position-block-end.Card__image--padding-none {\n  margin-block-end: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card--border .Card__image--position-block-start.Card__image--padding-none {\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n}\n\n.Card--border .Card__image--position-block-end.Card__image--padding-none {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-start-start-radius: 0;\n  border-start-end-radius: 0;\n}\n\n.Card--variant-minimal .Card__image--padding-none {\n  margin-inline: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-start.Card__image--padding-none {\n  margin-block-start: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-end.Card__image--padding-none {\n  margin-block-end: 0;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n  display: block;\n}\n\n.Card__leadingVisual {\n  margin-block-end: var(--base-size-36);\n  display: flex;\n  align-items: center;\n  grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n  justify-content: center;\n}\n\n.Card__leadingVisualItem {\n  display: block;\n  max-width: 100%;\n  height: var(--base-size-40);\n  width: auto;\n}\n\n.Card__icon {\n  margin-bottom: var(--base-size-24);\n  grid-area: icon;\n}\n\n.Card__tokens {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-8);\n  grid-area: tokens;\n  margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n  justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n  margin-block-start: var(--base-size-20);\n  margin-block-end: 0;\n}\n\n.Card__label {\n  margin-block-end: var(--base-size-20);\n  grid-area: label;\n  inline-size: fit-content;\n  max-inline-size: 100%;\n}\n\n.Card__heading {\n  margin-block-end: var(--base-size-12);\n  grid-area: heading;\n}\n\n.Card__description {\n  margin-block-end: var(--base-size-24);\n  grid-area: description;\n}\n\n.Card__action {\n  grid-area: action;\n  margin-block-start: auto;\n  display: inline-flex;\n  align-items: center;\n  max-inline-size: 100%;\n  pointer-events: none;\n}\n\n.Card__actionIcon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.Card__actionLabel {\n  display: block;\n  min-inline-size: 0;\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n  inline-size: 100%;\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  text-align: center;\n}\n\n.Card__actionLabelClip {\n  display: contents;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n  margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n  --actionArrow-duration: 300ms;\n\n  margin-block-start: var(--base-size-20);\n  min-height: var(--base-size-40);\n  width: auto;\n  min-inline-size: 0;\n  max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n  justify-content: flex-start;\n  column-gap: var(--base-size-8);\n  padding-block: var(--base-size-4);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-Card-background-overlay);\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.Card__actionIcon--arrowOnly {\n  width: var(--base-size-32);\n  min-width: var(--base-size-32);\n  height: var(--base-size-32);\n  min-height: var(--base-size-32);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n  justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n  color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action * {\n  cursor: inherit;\n}\n\n.Card--expandableArrow {\n  margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n  --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n  --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n  margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n  margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow .Card__action {\n  min-inline-size: 0;\n  justify-self: start;\n}\n\n@media (hover: hover) {\n  .Card__action--arrowOnly {\n    column-gap: 0;\n    padding-inline: 0;\n    border-color: transparent;\n    background-color: transparent;\n    transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n      column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n  }\n\n  .Card__actionLabelClip {\n    --actionLabelClip-duration: 400ms;\n\n    display: inline-flex;\n    flex: 1 1 auto;\n    align-items: center;\n    align-self: stretch;\n    min-inline-size: 0;\n    overflow: hidden;\n    max-inline-size: 0;\n    background-color: transparent;\n    opacity: 0;\n    transform: translateX(calc(var(--base-size-12) * -1));\n    margin-inline: 0;\n    padding-inline: 0;\n    transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n      opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n      margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n  }\n\n  .Card--ctaVariant-arrow .Card__actionLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n  justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n  column-gap: var(--base-size-8);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border-color: var(--brand-color-border-default);\n  background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n  max-inline-size: 100%;\n  opacity: 1;\n  transform: translateX(0);\n  margin-inline-start: calc(var(--base-size-12) * -1);\n  margin-inline-end: 0;\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n  transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n  stroke-dashoffset: 20;\n}\n\n.Card--disableAnimation,\n.Card--disableAnimation * {\n  animation: none;\n  transition: none;\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  .Card,\n  .Card::before,\n  .Card::after,\n  .Card * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/Card/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Card';
-export * from './CardSkewEffect';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/esm/InlineCode/InlineCode.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css';
+export type InlineCodeProps = React.ComponentPropsWithoutRef<'code'> & BaseProps<HTMLElement> & {
+    /**
+     * Controls whether the code fragment can wrap.
+     * Disable only for short fragments that must remain together.
+     * @default true
+     */
+    wrap?: boolean;
+};
+/**
+ * Use InlineCode to render a short inline code fragment.
+ */
+export declare const InlineCode: React.ForwardRefExoticComponent<Omit<InlineCodeProps, "ref"> & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=InlineCode.d.ts.map

package/esm/InlineCode/InlineCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCode.d.ts","sourceRoot":"","sources":["../../src/InlineCode/InlineCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAEnD;;GAEG;AACH,OAAO,+GAA+G,CAAA;AAKtH,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,GAClE,SAAS,CAAC,WAAW,CAAC,GAAG;IACvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAaH;;GAEG;AACH,eAAO,MAAM,UAAU,kGAA2D,CAAA"}

package/esm/InlineCode/InlineCode.js

@@ -0,0 +1,22 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css';/* empty css                                                                                                         */
+import t from "./InlineCode.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/InlineCode/InlineCode.tsx
+function i({ className: n, children: i, wrap: a = !0, ...o }, s) {
+	return /* @__PURE__ */ r("code", {
+		ref: s,
+		className: e(t.InlineCode, !a && t["InlineCode--nowrap"], n),
+		...o,
+		children: /* @__PURE__ */ r("span", {
+			className: t.InlineCode__text,
+			children: i
+		})
+	});
+}
+var a = n(i);
+//#endregion
+export { a as InlineCode };
+
+//# sourceMappingURL=InlineCode.js.map

package/esm/InlineCode/InlineCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCode.js","names":[],"sources":["../../src/InlineCode/InlineCode.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './InlineCode.module.css'\n\nexport type InlineCodeProps = React.ComponentPropsWithoutRef<'code'> &\n  BaseProps<HTMLElement> & {\n    /**\n     * Controls whether the code fragment can wrap.\n     * Disable only for short fragments that must remain together.\n     * @default true\n     */\n    wrap?: boolean\n  }\n\nfunction InlineCodeRoot(\n  {className, children, wrap = true, ...rest}: InlineCodeProps,\n  ref: React.ForwardedRef<HTMLElement>,\n) {\n  return (\n    <code ref={ref} className={clsx(styles.InlineCode, !wrap && styles['InlineCode--nowrap'], className)} {...rest}>\n      <span className={styles.InlineCode__text}>{children}</span>\n    </code>\n  )\n}\n\n/**\n * Use InlineCode to render a short inline code fragment.\n */\nexport const InlineCode = forwardRef<HTMLElement, InlineCodeProps>(InlineCodeRoot)\n"],"mappings":";;;;;;AAsBA,SAAS,EACP,EAAC,cAAW,aAAU,UAAO,IAAM,GAAG,KACtC,GACA;AACA,QACE,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAK,EAAO,YAAY,CAAC,KAAQ,EAAO,uBAAuB,EAAU;EAAE,GAAI;YACxG,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAmB;GAAgB,CAAA;EACtD,CAAA;;AAOX,IAAa,IAAa,EAAyC,EAAe"}

package/esm/InlineCode/InlineCode.module-Br3-YmSA.css

@@ -0,0 +1 @@
+.Primer_Brand__InlineCode-module__InlineCode___CY8l3{font-family:var(--brand-fontStack-monospace);font-size:calc(1em - 1px);font-weight:var(--base-text-weight-regular);color:var(--brand-InlineCode-color-fg-default);background-color:var(--brand-InlineCode-bgColor);padding-block:0;padding-inline:var(--base-size-4);border-radius:var(--base-size-2);-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:normal;word-wrap:anywhere;line-height:1.6}.Primer_Brand__InlineCode-module__InlineCode___CY8l3.Primer_Brand__InlineCode-module__InlineCode--nowrap___YpKts{white-space:nowrap;word-wrap:normal}:where(h1,h2,h3,h4,h5,h6) .Primer_Brand__InlineCode-module__InlineCode___CY8l3{border-radius:var(--base-size-4)}:where(h1,h2,h3,h4,h5,h6) .Primer_Brand__InlineCode-module__InlineCode__text___Hn_4j{color:var(--brand-InlineCode-color-fg-heading)}.Primer_Brand__InlineCode-module__InlineCode__text___Hn_4j{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto;position:relative;inset-block-start:-.03em}

package/esm/InlineCode/InlineCode.module.js

@@ -0,0 +1,9 @@
+import './InlineCode.module-Br3-YmSA.css';var e = {
+	InlineCode: "Primer_Brand__InlineCode-module__InlineCode___CY8l3",
+	"InlineCode--nowrap": "Primer_Brand__InlineCode-module__InlineCode--nowrap___YpKts",
+	InlineCode__text: "Primer_Brand__InlineCode-module__InlineCode__text___Hn_4j"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=InlineCode.module.js.map

package/esm/InlineCode/InlineCode.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCode.module.js","names":[],"sources":["../../src/InlineCode/InlineCode.module.css"],"sourcesContent":[".InlineCode {\n  font-family: var(--brand-fontStack-monospace);\n  /* optical resize relative to parent. monospace tends to be a little taller than sans-serif */\n  font-size: calc(1em - 1px);\n  font-weight: var(--base-text-weight-regular);\n  /* Keep the background clear of adjacent lines when large text wraps. */\n  line-height: 1.6;\n  color: var(--brand-InlineCode-color-fg-default);\n  background-color: var(--brand-InlineCode-bgColor);\n  padding-block: 0;\n  padding-inline: var(--base-size-4);\n  border-radius: var(--base-size-2);\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.InlineCode.InlineCode--nowrap {\n  white-space: nowrap;\n  overflow-wrap: normal;\n}\n\n:where(h1, h2, h3, h4, h5, h6) .InlineCode {\n  border-radius: var(--base-size-4);\n}\n\n:where(h1, h2, h3, h4, h5, h6) .InlineCode__text {\n  color: var(--brand-InlineCode-color-fg-heading);\n}\n\n.InlineCode__text {\n  position: relative;\n  /* TODO: this is some optical correction, but doesn't work well for uppercase. */\n  inset-block-start: -0.03em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: auto;\n}\n"],"mappings":""}

package/esm/InlineCode/index.d.ts

@@ -0,0 +1,2 @@
+export * from './InlineCode';
+//# sourceMappingURL=index.d.ts.map

package/esm/InlineCode/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InlineCode/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/esm/MinimalFooter/MinimalFooter.d.ts

@@ -4,6 +4,7 @@ import { BaseProps } from '../component-helpers';
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/footer/base.css';
 declare const socialLinkData: {
     readonly x: {
         readonly fullName: "X";
@@ -64,6 +65,13 @@ declare const socialLinkData: {
 };
 type SocialLinkName = keyof typeof socialLinkData;
 export type MinimalFooterProps = {
+    /**
+     * Escape-hatch for inserting custom React components.
+     * Warning:
+     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
+     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
+     */
+    centerComponent?: React.ReactElement;
     /**
      * An array of social links to be displayed in the footer.
      */
@@ -78,12 +86,27 @@ export type MinimalFooterProps = {
      */
     copyrightStatement?: string | React.ReactElement;
 } & BaseProps<HTMLElement>;
-declare function Root({ className, children, copyrightStatement, logoHref, socialLinks, ...rest }: PropsWithChildren<MinimalFooterProps>): import("react/jsx-runtime").JSX.Element;
+declare function Root({ centerComponent, className, children, copyrightStatement, logoHref, socialLinks, ...rest }: PropsWithChildren<MinimalFooterProps>): import("react/jsx-runtime").JSX.Element;
 type FootnoteProps = BaseProps<HTMLElement>;
 declare function Footnotes({ children, className }: PropsWithChildren<FootnoteProps>): import("react/jsx-runtime").JSX.Element;
 type LinkProps<C extends React.ElementType> = BaseProps<C> & {
     as?: 'a' | 'button';
 } & Omit<React.ComponentPropsWithoutRef<C>, keyof C>;
+export type MinimalFooterBackToTopProps = {
+    /**
+     * The visible and accessible label.
+     */
+    children: React.ReactNode;
+    /**
+     * The ID of the semantic top-of-page element that receives focus after keyboard activation.
+     * Defaults to the first `<main>` element, then falls back to `<body>`.
+     */
+    focusTargetId?: string;
+    /**
+     * Runs before the built-in behavior. Call `event.preventDefault()` to cancel scrolling and focus transfer.
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+} & BaseProps<HTMLButtonElement> & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children'>;
 /**
  * Use MinimalFooter to render a global footer on all GitHub pages.
  * @see https://primer.style/brand/components/MinimalFooter
@@ -91,6 +114,7 @@ type LinkProps<C extends React.ElementType> = BaseProps<C> & {
 export declare const MinimalFooter: typeof Root & {
     Footnotes: typeof Footnotes;
     Link: <C extends React.ElementType = "a">({ as, children, ...rest }: PropsWithChildren<LinkProps<C>>) => import("react/jsx-runtime").JSX.Element;
+    BackToTop: React.ForwardRefExoticComponent<Omit<MinimalFooterBackToTopProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 };
 export {};
 //# sourceMappingURL=MinimalFooter.d.ts.map

package/esm/MinimalFooter/MinimalFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MinimalFooter.d.ts","sourceRoot":"","sources":["../../src/MinimalFooter/MinimalFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C;;GAEG;AACH,OAAO,0GAA0G,CAAA;AAOjH,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDV,CAAA;AAEV,KAAK,cAAc,GAAG,MAAM,OAAO,cAAc,CAAA;AAKjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,EAAE,GAAG,KAAK,CAAA;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAA;CACjD,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE1B,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,QAAQ,EACR,kBAAkB,EAClB,QAA+B,EAC/B,WAAW,EACX,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,2CAqEvC;AAED,KAAK,aAAa,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE3C,iBAAS,SAAS,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,2CAyBzE;AAoED,KAAK,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAA;CAAC,GAAG,IAAI,CACrF,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EACjC,MAAM,CAAC,CACR,CAAA;AAmBH;;;GAGG;AACH,eAAO,MAAM,aAAa;;WArBZ,CAAC,SAAS,KAAK,CAAC,WAAW,mCAAiC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CAwBvG,CAAA"}
+{"version":3,"file":"MinimalFooter.d.ts","sourceRoot":"","sources":["../../src/MinimalFooter/MinimalFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAc,MAAM,OAAO,CAAA;AAKvE,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAG9C;;GAEG;AACH,OAAO,0GAA0G,CAAA;AACjH,OAAO,6FAA6F,CAAA;AAOpG,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDV,CAAA;AAEV,KAAK,cAAc,GAAG,MAAM,OAAO,cAAc,CAAA;AAGjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,EAAE,GAAG,KAAK,CAAA;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAA;CACjD,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE1B,iBAAS,IAAI,CAAC,EACZ,eAAe,EACf,SAAS,EACT,QAAQ,EACR,kBAAkB,EAClB,QAA+B,EAC/B,WAAW,EACX,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,2CA4EvC;AAED,KAAK,aAAa,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE3C,iBAAS,SAAS,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,2CA2BzE;AAmDD,KAAK,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAA;CAAC,GAAG,IAAI,CACrF,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EACjC,MAAM,CAAC,CACR,CAAA;AAyBH,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACrD,GAAG,SAAS,CAAC,iBAAiB,CAAC,GAC9B,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,CAAA;AAuE7E;;;GAGG;AACH,eAAO,MAAM,aAAa;;WAjHZ,CAAC,SAAS,KAAK,CAAC,WAAW,mCAAiC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;;CAqHvG,CAAA"}