@primer/react-brand 0.75.0-rc.a3f7dbd6 → 0.75.0

package/esm/Card/Card.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Colors as t } from "../constants.js";
 import { useProvidedRefOrCreate as n } from "../hooks/useRef.js";
 import { Text as r } from "../Text/Text.js";
@@ -7,7 +7,7 @@ import { Heading as a } from "../Heading/Heading.js";
 import { ExpandableArrow as o } from "../ExpandableArrow/ExpandableArrow.js";
 import { Image as s } from "../Image/Image.js";
 import c from "../Link/Link.module.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes-C43pQ5wc.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-DgOt50dE.css';/* empty css                                                                                                         */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes-C43pQ5wc.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/card/base-DgOt50dE.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes-Bj7XtHMY.css';/* empty css                                                                                                         */
 import { Icon as l } from "../Icon/Icon.js";
 import { Token as u } from "../Token/Token.js";
 import { isFragmentElement as d } from "../utils/isFragmentElement.js";
@@ -54,7 +54,7 @@ var _ = ["default", "minimal"], v = [
 				X === "block-end" ? F : null,
 				v === "none" ? null : /* @__PURE__ */ g("div", {
 					className: e(f.Card__action, v === "arrow" && f["Card__action--arrowOnly"]),
-					"aria-hidden": v === "arrow" ? !0 : void 0,
+					"aria-hidden": v === "arrow" || void 0,
 					children: [/* @__PURE__ */ h("span", {
 						className: e(v === "arrow" && f.Card__actionLabelClip),
 						children: /* @__PURE__ */ h(r, {

package/esm/Card/Card.js.map

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

package/esm/Card/Card.module.js

@@ -1,5 +1,6 @@
-import './Card.module-Svi04dp7.css';var e = {
-	Card: "Primer_Brand__Card-module__Card___txAQX",
+import './Card.module-Svi04dp7.css';//#region src/Card/Card.module.css
+var e = "Primer_Brand__Card-module__Card___txAQX", t = "Primer_Brand__Card-module__Card__image___3J5wL", n = "Primer_Brand__Card-module__Card__link___LyRm6", r = "Primer_Brand__Card-module__Card__description___6RhVF", i = "Primer_Brand__Card-module__Card__outer___FFzJY", a = "Primer_Brand__Card-module__Card__leadingVisual___l_R3_", o = "Primer_Brand__Card-module__Card__leadingVisualItem___ICuuV", s = "Primer_Brand__Card-module__Card__icon___gPD1k", c = "Primer_Brand__Card-module__Card__tokens___9L_4a", l = "Primer_Brand__Card-module__Card__label___q_cqg", u = "Primer_Brand__Card-module__Card__heading___vdQlj", d = "Primer_Brand__Card-module__Card__action___NKFQ0", f = "Primer_Brand__Card-module__Card__actionIcon___KF4ar", p = "Primer_Brand__Card-module__Card__actionLabel____icG0", m = "Primer_Brand__Card-module__Card__actionLabelClip___kEth0", h = {
+	Card: e,
 	"Card--align-center": "Primer_Brand__Card-module__Card--align-center___zuZI_",
 	"Card--backgroundColor-default": "Primer_Brand__Card-module__Card--backgroundColor-default___1JGan",
 	"Card--backgroundColor-subtle": "Primer_Brand__Card-module__Card--backgroundColor-subtle___0bVGO",
@@ -7,35 +8,35 @@ import './Card.module-Svi04dp7.css';var e = {
 	"Card--tokensPosition-block-end": "Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy",
 	"Card--imagePos-block-end": "Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_",
 	"Card--hasLeadingVisual": "Primer_Brand__Card-module__Card--hasLeadingVisual___M8XW4",
-	Card__image: "Primer_Brand__Card-module__Card__image___3J5wL",
+	Card__image: t,
 	"Card--maxWidth": "Primer_Brand__Card-module__Card--maxWidth___vGoIk",
 	"Card--fullWidth": "Primer_Brand__Card-module__Card--fullWidth___nh9Zq",
 	"Card--variant-minimal": "Primer_Brand__Card-module__Card--variant-minimal___V3m21",
 	"Card--ctaVariant-arrow": "Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH",
-	Card__link: "Primer_Brand__Card-module__Card__link___LyRm6",
-	Card__description: "Primer_Brand__Card-module__Card__description___6RhVF",
+	Card__link: n,
+	Card__description: r,
 	"Card--disableAnimation": "Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc",
 	"Card--border": "Primer_Brand__Card-module__Card--border___7rvcG",
-	Card__outer: "Primer_Brand__Card-module__Card__outer___FFzJY",
+	Card__outer: i,
 	"Card__image--padding-none": "Primer_Brand__Card-module__Card__image--padding-none___Bh_kj",
 	"Card__image--position-block-start": "Primer_Brand__Card-module__Card__image--position-block-start___Tdkgr",
 	"Card__image--position-block-end": "Primer_Brand__Card-module__Card__image--position-block-end___E_0LZ",
-	Card__leadingVisual: "Primer_Brand__Card-module__Card__leadingVisual___l_R3_",
-	Card__leadingVisualItem: "Primer_Brand__Card-module__Card__leadingVisualItem___ICuuV",
-	Card__icon: "Primer_Brand__Card-module__Card__icon___gPD1k",
-	Card__tokens: "Primer_Brand__Card-module__Card__tokens___9L_4a",
+	Card__leadingVisual: a,
+	Card__leadingVisualItem: o,
+	Card__icon: s,
+	Card__tokens: c,
 	"Card__tokens--position-block-end": "Primer_Brand__Card-module__Card__tokens--position-block-end___TL4R0",
-	Card__label: "Primer_Brand__Card-module__Card__label___q_cqg",
-	Card__heading: "Primer_Brand__Card-module__Card__heading___vdQlj",
-	Card__action: "Primer_Brand__Card-module__Card__action___NKFQ0",
-	Card__actionIcon: "Primer_Brand__Card-module__Card__actionIcon___KF4ar",
-	Card__actionLabel: "Primer_Brand__Card-module__Card__actionLabel____icG0",
-	Card__actionLabelClip: "Primer_Brand__Card-module__Card__actionLabelClip___kEth0",
+	Card__label: l,
+	Card__heading: u,
+	Card__action: d,
+	Card__actionIcon: f,
+	Card__actionLabel: p,
+	Card__actionLabelClip: m,
 	"Card__action--arrowOnly": "Primer_Brand__Card-module__Card__action--arrowOnly___19e3M",
 	"Card__actionIcon--arrowOnly": "Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1",
 	"Card--expandableArrow": "Primer_Brand__Card-module__Card--expandableArrow____CfmY"
 };
 //#endregion
-export { e as default };
+export { e as Card, d as Card__action, f as Card__actionIcon, p as Card__actionLabel, m as Card__actionLabelClip, r as Card__description, u as Card__heading, s as Card__icon, t as Card__image, l as Card__label, a as Card__leadingVisual, o as Card__leadingVisualItem, n as Card__link, i as Card__outer, c as Card__tokens, h as default };
 
 //# sourceMappingURL=Card.module.js.map

package/esm/ComparisonTable/ComparisonTable.d.ts

@@ -26,9 +26,9 @@ export type FootnoteProps = BaseProps<HTMLParagraphElement>;
  * @see https://primer.style/brand/components/ComparisonTable
  */
 export declare const ComparisonTable: React.ForwardRefExoticComponent<Omit<ComparisonTableProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
-    Row: ({ children, ...rest }: PropsWithChildren<RowProps>) => import("react/jsx-runtime").JSX.Element;
-    Cell: ({ as, children, ...props }: PropsWithChildren<CellProps>) => import("react/jsx-runtime").JSX.Element;
-    Footnote: ({ children, ...props }: PropsWithChildren<FootnoteProps>) => import("react/jsx-runtime").JSX.Element;
+    Row: ({ children, ...rest }: PropsWithChildren<RowProps>) => React.JSX.Element;
+    Cell: ({ as, children, ...props }: PropsWithChildren<CellProps>) => React.JSX.Element;
+    Footnote: ({ children, ...props }: PropsWithChildren<FootnoteProps>) => React.JSX.Element;
 };
 export {};
 //# sourceMappingURL=ComparisonTable.d.ts.map

package/esm/ComparisonTable/ComparisonTable.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useAnimation as t } from "../animation/useAnimation.js";
 import { Text as n } from "../Text/Text.js";
 import { Heading as r } from "../Heading/Heading.js";

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                    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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"}

package/esm/ComparisonTable/ComparisonTable.module.js

@@ -1,7 +1,8 @@
-import './ComparisonTable.module-CUq68rV0.css';var e = {
+import './ComparisonTable.module-CUq68rV0.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",
-	ComparisonTable: "Primer_Brand__ComparisonTable-module__ComparisonTable___ZxT9n",
+	ComparisonTable: e,
 	"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",
@@ -15,6 +16,6 @@ import './ComparisonTable.module-CUq68rV0.css';var e = {
 	"ComparisonTable-cell-container--featured": "Primer_Brand__ComparisonTable-module__ComparisonTable-cell-container--featured___ezdmW"
 };
 //#endregion
-export { e as default };
+export { e as ComparisonTable, t as default };
 
 //# sourceMappingURL=ComparisonTable.module.js.map

package/esm/ExpandableArrow/ExpandableArrow.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 type ExpandableArrowProps = {
     className?: string;
     /** Animate between a chevron arrow and an arrow with a stem by toggling the value of `expanded` */
@@ -5,6 +6,6 @@ type ExpandableArrowProps = {
     hidden?: boolean;
     reverse?: boolean;
 };
-export declare function ExpandableArrow({ className, expanded, reverse, hidden, ...rest }: ExpandableArrowProps): import("react/jsx-runtime").JSX.Element;
+export declare function ExpandableArrow({ className, expanded, reverse, hidden, ...rest }: ExpandableArrowProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=ExpandableArrow.d.ts.map

package/esm/ExpandableArrow/ExpandableArrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableArrow.d.ts","sourceRoot":"","sources":["../../src/ExpandableArrow/ExpandableArrow.tsx"],"names":[],"mappings":"AAIA,KAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAAC,SAAS,EAAE,QAAgB,EAAE,OAAe,EAAE,MAAM,EAAE,GAAG,IAAI,EAAC,EAAE,oBAAoB,2CA8BpH"}
+{"version":3,"file":"ExpandableArrow.d.ts","sourceRoot":"","sources":["../../src/ExpandableArrow/ExpandableArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,wBAAgB,eAAe,CAAC,EAAC,SAAS,EAAE,QAAgB,EAAE,OAAe,EAAE,MAAM,EAAE,GAAG,IAAI,EAAC,EAAE,oBAAoB,qBA8BpH"}

package/esm/ExpandableArrow/ExpandableArrow.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import t from "./ExpandableArrow.module.js";
 import "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";

package/esm/ExpandableArrow/ExpandableArrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableArrow.js","names":[],"sources":["../../src/ExpandableArrow/ExpandableArrow.tsx"],"sourcesContent":["import React from 'react'\nimport {clsx} from 'clsx'\nimport styles from './ExpandableArrow.module.css'\n\ntype ExpandableArrowProps = {\n  className?: string\n  /** Animate between a chevron arrow and an arrow with a stem by toggling the value of `expanded` */\n  expanded?: boolean\n  hidden?: boolean\n  reverse?: boolean\n}\n\nexport function ExpandableArrow({className, expanded = false, reverse = false, hidden, ...rest}: ExpandableArrowProps) {\n  return (\n    <svg\n      className={clsx(\n        styles.ExpandableArrow,\n        expanded && styles['ExpandableArrow--expanded'],\n        reverse && styles['ExpandableArrow--reversed'],\n        className,\n      )}\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden={hidden}\n      focusable={hidden ? 'false' : undefined}\n      {...rest}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z\"\n      />\n      <path\n        className={clsx(styles['ExpandableArrow-stem'], expanded && styles['ExpandableArrow-stem--expanded'])}\n        stroke=\"currentColor\"\n        d=\"M1.75 8H11\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  )\n}\n"],"mappings":";;;;;AAYA,SAAgB,EAAgB,EAAC,cAAW,cAAW,IAAO,aAAU,IAAO,WAAQ,GAAG,KAA6B;AACrH,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,iBACP,KAAY,EAAO,8BACnB,KAAW,EAAO,8BAClB,EACD;EACD,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,eAAa;EACb,WAAW,IAAS,UAAU,KAAA;EAC9B,GAAI;YAbN,CAeE,kBAAC,QAAD;GACE,MAAK;GACL,GAAE;GACF,CAAA,EACF,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,yBAAyB,KAAY,EAAO,kCAAkC;GACrG,QAAO;GACP,GAAE;GACF,aAAY;GACZ,eAAc;GACd,CAAA,CACE"}
+{"version":3,"file":"ExpandableArrow.js","names":[],"sources":["../../src/ExpandableArrow/ExpandableArrow.tsx"],"sourcesContent":["import React from 'react'\nimport {clsx} from 'clsx'\nimport styles from './ExpandableArrow.module.css'\n\ntype ExpandableArrowProps = {\n  className?: string\n  /** Animate between a chevron arrow and an arrow with a stem by toggling the value of `expanded` */\n  expanded?: boolean\n  hidden?: boolean\n  reverse?: boolean\n}\n\nexport function ExpandableArrow({className, expanded = false, reverse = false, hidden, ...rest}: ExpandableArrowProps) {\n  return (\n    <svg\n      className={clsx(\n        styles.ExpandableArrow,\n        expanded && styles['ExpandableArrow--expanded'],\n        reverse && styles['ExpandableArrow--reversed'],\n        className,\n      )}\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden={hidden}\n      focusable={hidden ? 'false' : undefined}\n      {...rest}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z\"\n      />\n      <path\n        className={clsx(styles['ExpandableArrow-stem'], expanded && styles['ExpandableArrow-stem--expanded'])}\n        stroke=\"currentColor\"\n        d=\"M1.75 8H11\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  )\n}\n"],"mappings":";;;;;AAYA,SAAgB,EAAgB,EAAC,cAAW,cAAW,IAAO,aAAU,IAAO,WAAQ,GAAG,KAA6B;CACrH,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,iBACP,KAAY,EAAO,8BACnB,KAAW,EAAO,8BAClB,CACF;EACA,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,eAAa;EACb,WAAW,IAAS,UAAU,KAAA;EAC9B,GAAI;YAbN,CAeE,kBAAC,QAAD;GACE,MAAK;GACL,GAAE;EACH,CAAA,GACD,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,yBAAyB,KAAY,EAAO,iCAAiC;GACpG,QAAO;GACP,GAAE;GACF,aAAY;GACZ,eAAc;EACf,CAAA,CACE;;AAET"}

package/esm/ExpandableArrow/ExpandableArrow.module.js

@@ -1,11 +1,12 @@
-import './ExpandableArrow.module-hRhRe88K.css';var e = {
-	ExpandableArrow: "Primer_Brand__ExpandableArrow-module__ExpandableArrow___aaZs9",
+import './ExpandableArrow.module-hRhRe88K.css';//#region src/ExpandableArrow/ExpandableArrow.module.css
+var e = "Primer_Brand__ExpandableArrow-module__ExpandableArrow___aaZs9", t = {
+	ExpandableArrow: e,
 	"ExpandableArrow--expanded": "Primer_Brand__ExpandableArrow-module__ExpandableArrow--expanded____FeTD",
 	"ExpandableArrow-stem": "Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem___0K8Hz",
 	"ExpandableArrow-stem--expanded": "Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem--expanded___uG15m",
 	"ExpandableArrow--reversed": "Primer_Brand__ExpandableArrow-module__ExpandableArrow--reversed___ekIkv"
 };
 //#endregion
-export { e as default };
+export { e as ExpandableArrow, t as default };
 
 //# sourceMappingURL=ExpandableArrow.module.js.map

package/esm/EyebrowBanner/EyebrowBanner.js

@@ -1,8 +1,8 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { BiColorGradients as t, Colors as n } from "../constants.js";
 import { Text as r } from "../Text/Text.js";
 import { ExpandableArrow as i } from "../ExpandableArrow/ExpandableArrow.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner-CPW2Ri4S.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes-BzV3LYhH.css';/* empty css                                                                                                         */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes-BzV3LYhH.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner-CPW2Ri4S.css';/* empty css                                                                                                         */
 /* empty css                                                                                                            */
 import a from "./EyebrowBanner.module.js";
 import o, { forwardRef as s, useCallback as c } from "react";

package/esm/EyebrowBanner/EyebrowBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"EyebrowBanner.js","names":[],"sources":["../../src/EyebrowBanner/EyebrowBanner.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport {type Icon as IconProps} from '@primer/octicons-react'\n\nimport {Text} from '../Text'\nimport {Colors, BiColorGradients} from '../constants'\n\nimport type {BaseProps} from '../component-helpers'\nimport {ExpandableArrow} from '../ExpandableArrow'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './EyebrowBanner.module.css'\n\nexport type EyebrowBannerProps = BaseProps<HTMLAnchorElement> & {\n  href: string\n  ['data-testid']?: string\n} & React.HTMLAttributes<HTMLAnchorElement> &\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n\nconst testIds = {\n  root: 'EyebrowBanner',\n  visual: 'EyebrowBanner__visual',\n  label: 'EyebrowBanner__label',\n  expandableArrow: 'EyebrowBanner__expandableArrow',\n}\n\nconst _EyebrowBanner = forwardRef<HTMLAnchorElement, EyebrowBannerProps>(\n  ({className, children, 'data-testid': testId, href, onMouseEnter, onMouseLeave, onFocus, onBlur, ...rest}, ref) => {\n    const [isHovered, setIsHovered] = React.useState(false)\n    const [isFocused, setIsFocused] = React.useState(false)\n\n    const handleMouseEnter = useCallback(\n      (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        setIsHovered(!isHovered)\n        onMouseEnter?.(event)\n      },\n      [onMouseEnter, isHovered],\n    )\n\n    const handleMouseLeave = useCallback(\n      (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        setIsHovered(!isHovered)\n        onMouseLeave?.(event)\n      },\n      [onMouseLeave, isHovered],\n    )\n\n    const handleOnFocus = useCallback(\n      (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n        setIsFocused(!isFocused)\n        onFocus?.(event)\n      },\n      [onFocus, isFocused],\n    )\n\n    const handleOnBlur = useCallback(\n      (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n        setIsFocused(!isFocused)\n        onBlur?.(event)\n      },\n      [onBlur, isFocused],\n    )\n\n    const HeadingChild = React.Children.toArray(children).filter(child => {\n      if (React.isValidElement(child)) {\n        return child.type === EyebrowBannerHeading\n      }\n    })\n\n    const SubHeadingChild = React.Children.toArray(children).filter(child => {\n      if (React.isValidElement(child)) {\n        return child.type === EyebrowBannerSubHeading\n      }\n    })\n\n    const VisualChild = React.Children.toArray(children).find(child => {\n      if (React.isValidElement(child)) {\n        return child.type === EyebrowBannerVisual\n      }\n    })\n\n    const LabelChild = React.Children.toArray(children).find(child => {\n      if (React.isValidElement(child)) {\n        return child.type === EyebrowBannerLabel\n      }\n    })\n\n    return (\n      <a\n        href={href}\n        ref={ref}\n        className={clsx(styles.EyebrowBanner, className)}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        data-testid={testId || testIds.root}\n        {...rest}\n      >\n        <span className={styles['EyebrowBanner__inner']}>\n          {VisualChild && <span className={styles['EyebrowBanner__leadingVisual']}>{VisualChild}</span>}\n          <span className=\"visually-hidden\">&nbsp;</span>\n          {LabelChild && !VisualChild && <>{LabelChild}</>}\n          <span className=\"visually-hidden\">&nbsp;</span>\n          <span className={styles['EyebrowBanner__headings']}>\n            {HeadingChild}\n            <span className=\"visually-hidden\">&nbsp;</span>\n            {SubHeadingChild}\n          </span>\n\n          <span className={styles['EyebrowBanner__trailingVisual']}>\n            <ExpandableArrow\n              className={styles['EyebrowBanner__trailingVisual-icon']}\n              expanded={isHovered || isFocused}\n              data-testid={testIds.expandableArrow}\n            />\n          </span>\n        </span>\n      </a>\n    )\n  },\n)\n\ntype EyebrowBannerHeadingProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst EyebrowBannerHeading = forwardRef<HTMLSpanElement, EyebrowBannerHeadingProps>(\n  ({className, children, ...rest}, ref) => {\n    return (\n      <Text\n        size=\"100\"\n        variant=\"default\"\n        weight=\"medium\"\n        ref={ref}\n        className={clsx(styles[`EyebrowBanner__heading`], className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype EyebrowBannerSubHeadingProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst EyebrowBannerSubHeading = forwardRef<HTMLSpanElement, EyebrowBannerSubHeadingProps>(\n  ({className, children, ...rest}, ref) => {\n    return (\n      <Text\n        size=\"100\"\n        variant=\"muted\"\n        ref={ref}\n        className={clsx(styles[`EyebrowBanner__subHeading`], className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\nexport const EyebrowBannerIconColors = Colors\n\nexport const defaultEyebrowBannerIconColor = EyebrowBannerIconColors[0]\n\ntype EyebrowBannerVisual = BaseProps<HTMLSpanElement> & {\n  icon?: React.ReactNode | IconProps\n  color?: (typeof EyebrowBannerIconColors)[number]\n  hasBackground?: boolean\n  ['aria-hidden']?: boolean\n  children?: React.ReactNode\n}\n\nconst EyebrowBannerVisual = forwardRef<HTMLSpanElement, EyebrowBannerVisual>(\n  (\n    {\n      className,\n      children,\n      'aria-hidden': ariaHidden,\n      icon: Icon,\n      color = defaultEyebrowBannerIconColor,\n      hasBackground = false,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <span\n        ref={ref}\n        className={clsx(\n          styles[`EyebrowBanner__visual`],\n          Icon && styles.EyebrowBanner__icon,\n          Icon && styles[`EyebrowBanner__icon--color-${color}`],\n          hasBackground && styles['EyebrowBanner__icon--badge'],\n          className,\n        )}\n        data-testid={testIds.visual}\n        aria-hidden={ariaHidden || typeof Icon !== 'function'}\n        {...rest}\n      >\n        {Icon ? typeof Icon === 'function' ? <Icon /> : Icon : children}\n      </span>\n    )\n  },\n)\n\nexport const EyebrowBannerLabelColors = [...BiColorGradients, ...Colors] as const\n\ntype EyebrowBannerLabel = BaseProps<HTMLSpanElement> & {\n  /**\n   * The color variations available in EyebrowBanner.Label\n   */\n  color?: (typeof EyebrowBannerLabelColors)[number]\n}\n\nconst EyebrowBannerLabel = forwardRef<HTMLSpanElement, PropsWithChildren<EyebrowBannerLabel>>(\n  ({className, children, color, ...rest}, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={clsx(\n          styles[`EyebrowBanner__leadingLabel`],\n          color && styles[`EyebrowBanner__leadingLabel--color-${color}`],\n          className,\n        )}\n        data-testid={testIds.label}\n        {...rest}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\n/**\n * Use EyebrowBanner to display a short message at the top of a page.\n * @see https://primer.style/brand/components/EyebrowBanner\n */\nexport const EyebrowBanner = Object.assign(_EyebrowBanner, {\n  Visual: EyebrowBannerVisual,\n  Label: EyebrowBannerLabel,\n  Heading: EyebrowBannerHeading,\n  SubHeading: EyebrowBannerSubHeading,\n  testIds,\n})\n"],"mappings":"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"}
+{"version":3,"file":"EyebrowBanner.js","names":[],"sources":["../../src/EyebrowBanner/EyebrowBanner.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, useCallback} from 'react'\nimport {clsx} from 'clsx'\nimport {type Icon as IconProps} from '@primer/octicons-react'\n\nimport {Text} from '../Text'\nimport {Colors, BiColorGradients} from '../constants'\n\nimport type {BaseProps} from '../component-helpers'\nimport {ExpandableArrow} from '../ExpandableArrow'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './EyebrowBanner.module.css'\n\nexport type EyebrowBannerProps = BaseProps<HTMLAnchorElement> & {\n  href: string\n  ['data-testid']?: string\n} & React.HTMLAttributes<HTMLAnchorElement> &\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n\nconst testIds = {\n  root: 'EyebrowBanner',\n  visual: 'EyebrowBanner__visual',\n  label: 'EyebrowBanner__label',\n  expandableArrow: 'EyebrowBanner__expandableArrow',\n}\n\nconst _EyebrowBanner = forwardRef<HTMLAnchorElement, EyebrowBannerProps>(\n  ({className, children, 'data-testid': testId, href, onMouseEnter, onMouseLeave, onFocus, onBlur, ...rest}, ref) => {\n    const [isHovered, setIsHovered] = React.useState(false)\n    const [isFocused, setIsFocused] = React.useState(false)\n\n    const handleMouseEnter = useCallback(\n      (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        setIsHovered(!isHovered)\n        onMouseEnter?.(event)\n      },\n      [onMouseEnter, isHovered],\n    )\n\n    const handleMouseLeave = useCallback(\n      (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        setIsHovered(!isHovered)\n        onMouseLeave?.(event)\n      },\n      [onMouseLeave, isHovered],\n    )\n\n    const handleOnFocus = useCallback(\n      (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n        setIsFocused(!isFocused)\n        onFocus?.(event)\n      },\n      [onFocus, isFocused],\n    )\n\n    const handleOnBlur = useCallback(\n      (event: React.FocusEvent<HTMLAnchorElement, Element>) => {\n        setIsFocused(!isFocused)\n        onBlur?.(event)\n      },\n      [onBlur, isFocused],\n    )\n\n    const HeadingChild = React.Children.toArray(children).filter(child => {\n      if (React.isValidElement(child)) {\n        return child.type === EyebrowBannerHeading\n      }\n    })\n\n    const SubHeadingChild = React.Children.toArray(children).filter(child => {\n      if (React.isValidElement(child)) {\n        return child.type === EyebrowBannerSubHeading\n      }\n    })\n\n    const VisualChild = React.Children.toArray(children).find(child => {\n      if (React.isValidElement(child)) {\n        return child.type === EyebrowBannerVisual\n      }\n    })\n\n    const LabelChild = React.Children.toArray(children).find(child => {\n      if (React.isValidElement(child)) {\n        return child.type === EyebrowBannerLabel\n      }\n    })\n\n    return (\n      <a\n        href={href}\n        ref={ref}\n        className={clsx(styles.EyebrowBanner, className)}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        data-testid={testId || testIds.root}\n        {...rest}\n      >\n        <span className={styles['EyebrowBanner__inner']}>\n          {VisualChild && <span className={styles['EyebrowBanner__leadingVisual']}>{VisualChild}</span>}\n          <span className=\"visually-hidden\">&nbsp;</span>\n          {LabelChild && !VisualChild && <>{LabelChild}</>}\n          <span className=\"visually-hidden\">&nbsp;</span>\n          <span className={styles['EyebrowBanner__headings']}>\n            {HeadingChild}\n            <span className=\"visually-hidden\">&nbsp;</span>\n            {SubHeadingChild}\n          </span>\n\n          <span className={styles['EyebrowBanner__trailingVisual']}>\n            <ExpandableArrow\n              className={styles['EyebrowBanner__trailingVisual-icon']}\n              expanded={isHovered || isFocused}\n              data-testid={testIds.expandableArrow}\n            />\n          </span>\n        </span>\n      </a>\n    )\n  },\n)\n\ntype EyebrowBannerHeadingProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst EyebrowBannerHeading = forwardRef<HTMLSpanElement, EyebrowBannerHeadingProps>(\n  ({className, children, ...rest}, ref) => {\n    return (\n      <Text\n        size=\"100\"\n        variant=\"default\"\n        weight=\"medium\"\n        ref={ref}\n        className={clsx(styles[`EyebrowBanner__heading`], className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype EyebrowBannerSubHeadingProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst EyebrowBannerSubHeading = forwardRef<HTMLSpanElement, EyebrowBannerSubHeadingProps>(\n  ({className, children, ...rest}, ref) => {\n    return (\n      <Text\n        size=\"100\"\n        variant=\"muted\"\n        ref={ref}\n        className={clsx(styles[`EyebrowBanner__subHeading`], className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\nexport const EyebrowBannerIconColors = Colors\n\nexport const defaultEyebrowBannerIconColor = EyebrowBannerIconColors[0]\n\ntype EyebrowBannerVisual = BaseProps<HTMLSpanElement> & {\n  icon?: React.ReactNode | IconProps\n  color?: (typeof EyebrowBannerIconColors)[number]\n  hasBackground?: boolean\n  ['aria-hidden']?: boolean\n  children?: React.ReactNode\n}\n\nconst EyebrowBannerVisual = forwardRef<HTMLSpanElement, EyebrowBannerVisual>(\n  (\n    {\n      className,\n      children,\n      'aria-hidden': ariaHidden,\n      icon: Icon,\n      color = defaultEyebrowBannerIconColor,\n      hasBackground = false,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <span\n        ref={ref}\n        className={clsx(\n          styles[`EyebrowBanner__visual`],\n          Icon && styles.EyebrowBanner__icon,\n          Icon && styles[`EyebrowBanner__icon--color-${color}`],\n          hasBackground && styles['EyebrowBanner__icon--badge'],\n          className,\n        )}\n        data-testid={testIds.visual}\n        aria-hidden={ariaHidden || typeof Icon !== 'function'}\n        {...rest}\n      >\n        {Icon ? typeof Icon === 'function' ? <Icon /> : Icon : children}\n      </span>\n    )\n  },\n)\n\nexport const EyebrowBannerLabelColors = [...BiColorGradients, ...Colors] as const\n\ntype EyebrowBannerLabel = BaseProps<HTMLSpanElement> & {\n  /**\n   * The color variations available in EyebrowBanner.Label\n   */\n  color?: (typeof EyebrowBannerLabelColors)[number]\n}\n\nconst EyebrowBannerLabel = forwardRef<HTMLSpanElement, PropsWithChildren<EyebrowBannerLabel>>(\n  ({className, children, color, ...rest}, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={clsx(\n          styles[`EyebrowBanner__leadingLabel`],\n          color && styles[`EyebrowBanner__leadingLabel--color-${color}`],\n          className,\n        )}\n        data-testid={testIds.label}\n        {...rest}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\n/**\n * Use EyebrowBanner to display a short message at the top of a page.\n * @see https://primer.style/brand/components/EyebrowBanner\n */\nexport const EyebrowBanner = Object.assign(_EyebrowBanner, {\n  Visual: EyebrowBannerVisual,\n  Label: EyebrowBannerLabel,\n  Heading: EyebrowBannerHeading,\n  SubHeading: EyebrowBannerSubHeading,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/EyebrowBanner/EyebrowBanner.module.js

@@ -1,11 +1,12 @@
-import './EyebrowBanner.module-DYeTmaU9.css';var e = {
-	EyebrowBanner: "Primer_Brand__EyebrowBanner-module__EyebrowBanner___l0pH9",
-	EyebrowBanner__inner: "Primer_Brand__EyebrowBanner-module__EyebrowBanner__inner___FT9Za",
-	EyebrowBanner__headings: "Primer_Brand__EyebrowBanner-module__EyebrowBanner__headings___uqjq6",
-	EyebrowBanner__leadingVisual: "Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingVisual___jOHo0",
-	EyebrowBanner__trailingVisual: "Primer_Brand__EyebrowBanner-module__EyebrowBanner__trailingVisual___GOWPn",
+import './EyebrowBanner.module-DYeTmaU9.css';//#region src/EyebrowBanner/EyebrowBanner.module.css
+var e = "Primer_Brand__EyebrowBanner-module__EyebrowBanner___l0pH9", t = "Primer_Brand__EyebrowBanner-module__EyebrowBanner__inner___FT9Za", n = "Primer_Brand__EyebrowBanner-module__EyebrowBanner__headings___uqjq6", r = "Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingVisual___jOHo0", i = "Primer_Brand__EyebrowBanner-module__EyebrowBanner__trailingVisual___GOWPn", a = "Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel___2iKJT", o = "Primer_Brand__EyebrowBanner-module__EyebrowBanner__heading___pV18r", s = "Primer_Brand__EyebrowBanner-module__EyebrowBanner__subHeading___j_Pgs", c = "Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon___0DNEo", l = {
+	EyebrowBanner: e,
+	EyebrowBanner__inner: t,
+	EyebrowBanner__headings: n,
+	EyebrowBanner__leadingVisual: r,
+	EyebrowBanner__trailingVisual: i,
 	"EyebrowBanner__trailingVisual-icon": "Primer_Brand__EyebrowBanner-module__EyebrowBanner__trailingVisual-icon___RR5Q9",
-	EyebrowBanner__leadingLabel: "Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel___2iKJT",
+	EyebrowBanner__leadingLabel: a,
 	"EyebrowBanner__leadingLabel--color-blue": "Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-blue___Q75Z_",
 	"EyebrowBanner__leadingLabel--color-blue-purple": "Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-blue-purple___u3vdi",
 	"EyebrowBanner__leadingLabel--color-coral": "Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-coral___n4YIN",
@@ -24,10 +25,10 @@ import './EyebrowBanner.module-DYeTmaU9.css';var e = {
 	"EyebrowBanner__leadingLabel--color-red-orange": "Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-red-orange___tNfqQ",
 	"EyebrowBanner__leadingLabel--color-teal": "Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-teal___sHwEi",
 	"EyebrowBanner__leadingLabel--color-yellow": "Primer_Brand__EyebrowBanner-module__EyebrowBanner__leadingLabel--color-yellow___NED2T",
-	EyebrowBanner__heading: "Primer_Brand__EyebrowBanner-module__EyebrowBanner__heading___pV18r",
-	EyebrowBanner__subHeading: "Primer_Brand__EyebrowBanner-module__EyebrowBanner__subHeading___j_Pgs",
+	EyebrowBanner__heading: o,
+	EyebrowBanner__subHeading: s,
 	"EyebrowBanner__icon--badge": "Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--badge___8JXiE",
-	EyebrowBanner__icon: "Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon___0DNEo",
+	EyebrowBanner__icon: c,
 	"EyebrowBanner__icon--color-default": "Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-default___AHn0V",
 	"EyebrowBanner__icon--color-blue": "Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-blue___4OskO",
 	"EyebrowBanner__icon--color-coral": "Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-coral___T_46y",
@@ -44,6 +45,6 @@ import './EyebrowBanner.module-DYeTmaU9.css';var e = {
 	"EyebrowBanner__icon--color-yellow": "Primer_Brand__EyebrowBanner-module__EyebrowBanner__icon--color-yellow___oVyB6"
 };
 //#endregion
-export { e as default };
+export { e as EyebrowBanner, o as EyebrowBanner__heading, n as EyebrowBanner__headings, c as EyebrowBanner__icon, t as EyebrowBanner__inner, a as EyebrowBanner__leadingLabel, r as EyebrowBanner__leadingVisual, s as EyebrowBanner__subHeading, i as EyebrowBanner__trailingVisual, l as default };
 
 //# sourceMappingURL=EyebrowBanner.module.js.map

package/esm/EyebrowText/EyebrowText.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { Text as t } from "../Text/Text.js";
 import n from "./EyebrowText.module.js";
 import { forwardRef as r } from "react";

package/esm/EyebrowText/EyebrowText.js.map

@@ -1 +1 @@
-{"version":3,"file":"EyebrowText.js","names":[],"sources":["../../src/EyebrowText/EyebrowText.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Text, type TextProps} from '../Text'\n\nimport type {BaseProps} from '../component-helpers'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './EyebrowText.module.css'\n\nexport const EyebrowTextVariants = ['default', 'muted', 'accent'] as const\n\nexport type EyebrowTextVariant = (typeof EyebrowTextVariants)[number]\n\nexport type EyebrowTextProps = Omit<TextProps, 'as' | 'animate' | 'variant'> &\n  Omit<BaseProps<HTMLSpanElement>, 'animate'> & {\n    variant?: EyebrowTextVariant\n    ['data-testid']?: string\n  }\n\nconst testIds = {\n  root: 'EyebrowText',\n}\n\nconst _EyebrowText = forwardRef<HTMLSpanElement, EyebrowTextProps>(\n  (\n    {\n      className,\n      children,\n      style,\n      'data-testid': testId,\n      font = 'monospace',\n      size = '100',\n      variant = 'muted',\n      weight = 'normal',\n      ...props\n    },\n    ref: Ref<HTMLSpanElement>,\n  ) => {\n    const textVariant = variant === 'accent' ? 'default' : variant\n\n    return (\n      <Text\n        ref={ref}\n        as=\"span\"\n        size={size}\n        variant={textVariant}\n        font={font}\n        weight={weight}\n        className={clsx(styles.EyebrowText, variant === 'accent' && styles['EyebrowText--variant-accent'], className)}\n        style={style}\n        data-testid={testId || testIds.root}\n        {...props}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\n/**\n * EyebrowText is a simple text component that should be used above Headings.\n */\nexport const EyebrowText = Object.assign(_EyebrowText, {testIds})\n"],"mappings":";;;;;;AASA,IAAa,IAAsB;CAAC;CAAW;CAAS;CAAS,EAU3D,IAAU,EACd,MAAM,eACP,EAEK,IAAe,GAEjB,EACE,cACA,aACA,UACA,eAAe,GACf,UAAO,aACP,UAAO,OACP,aAAU,SACV,YAAS,UACT,GAAG,KAEL,MAKE,kBAAC,GAAD;CACO;CACL,IAAG;CACG;CACN,SAPgB,MAAY,WAAW,YAAY;CAQ7C;CACE;CACR,WAAW,EAAK,EAAO,aAAa,MAAY,YAAY,EAAO,gCAAgC,EAAU;CACtG;CACP,eAAa,KAAU,EAAQ;CAC/B,GAAI;CAEH;CACI,CAAA,CAGZ,EAKY,IAAc,OAAO,OAAO,GAAc,EAAC,YAAQ,CAAC"}
+{"version":3,"file":"EyebrowText.js","names":[],"sources":["../../src/EyebrowText/EyebrowText.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Text, type TextProps} from '../Text'\n\nimport type {BaseProps} from '../component-helpers'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './EyebrowText.module.css'\n\nexport const EyebrowTextVariants = ['default', 'muted', 'accent'] as const\n\nexport type EyebrowTextVariant = (typeof EyebrowTextVariants)[number]\n\nexport type EyebrowTextProps = Omit<TextProps, 'as' | 'animate' | 'variant'> &\n  Omit<BaseProps<HTMLSpanElement>, 'animate'> & {\n    variant?: EyebrowTextVariant\n    ['data-testid']?: string\n  }\n\nconst testIds = {\n  root: 'EyebrowText',\n}\n\nconst _EyebrowText = forwardRef<HTMLSpanElement, EyebrowTextProps>(\n  (\n    {\n      className,\n      children,\n      style,\n      'data-testid': testId,\n      font = 'monospace',\n      size = '100',\n      variant = 'muted',\n      weight = 'normal',\n      ...props\n    },\n    ref: Ref<HTMLSpanElement>,\n  ) => {\n    const textVariant = variant === 'accent' ? 'default' : variant\n\n    return (\n      <Text\n        ref={ref}\n        as=\"span\"\n        size={size}\n        variant={textVariant}\n        font={font}\n        weight={weight}\n        className={clsx(styles.EyebrowText, variant === 'accent' && styles['EyebrowText--variant-accent'], className)}\n        style={style}\n        data-testid={testId || testIds.root}\n        {...props}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\n/**\n * EyebrowText is a simple text component that should be used above Headings.\n */\nexport const EyebrowText = Object.assign(_EyebrowText, {testIds})\n"],"mappings":";;;;;;AASA,IAAa,IAAsB;CAAC;CAAW;CAAS;AAAQ,GAU1D,IAAU,EACd,MAAM,cACR,GAEM,IAAe,GAEjB,EACE,cACA,aACA,UACA,eAAe,GACf,UAAO,aACP,UAAO,OACP,aAAU,SACV,YAAS,UACT,GAAG,KAEL,MAKE,kBAAC,GAAD;CACO;CACL,IAAG;CACG;CACN,SAPgB,MAAY,WAAW,YAAY;CAQ7C;CACE;CACR,WAAW,EAAK,EAAO,aAAa,MAAY,YAAY,EAAO,gCAAgC,CAAS;CACrG;CACP,eAAa,KAAU,EAAQ;CAC/B,GAAI;CAEH;AACG,CAAA,CAGZ,GAKa,IAAc,OAAO,OAAO,GAAc,EAAC,WAAO,CAAC"}

package/esm/EyebrowText/EyebrowText.module.js

@@ -1,8 +1,9 @@
-import './EyebrowText.module-DRReWOj8.css';var e = {
-	EyebrowText: "Primer_Brand__EyebrowText-module__EyebrowText___IBLG_",
+import './EyebrowText.module-DRReWOj8.css';//#region src/EyebrowText/EyebrowText.module.css
+var e = "Primer_Brand__EyebrowText-module__EyebrowText___IBLG_", t = {
+	EyebrowText: e,
 	"EyebrowText--variant-accent": "Primer_Brand__EyebrowText-module__EyebrowText--variant-accent___euIbO"
 };
 //#endregion
-export { e as default };
+export { e as EyebrowText, t as default };
 
 //# sourceMappingURL=EyebrowText.module.js.map

package/esm/FAQ/FAQ.d.ts

@@ -20,7 +20,7 @@ export type FAQSubheadingProps = BaseProps<HTMLHeadingElement> & {
     children: React.ReactNode | React.ReactNode[];
     as?: Exclude<HeadingProps['as'], 'h1'>;
 } & HeadingProps;
-declare function FAQSubheading({ children, className, as, size, font, weight, ...rest }: FAQSubheadingProps): import("react/jsx-runtime").JSX.Element;
+declare function FAQSubheading({ children, className, as, size, font, weight, ...rest }: FAQSubheadingProps): React.JSX.Element;
 /**
  * FAQ component:
  * {@link https://primer.style/brand/components/FAQ/ See usage examples}.
@@ -40,7 +40,7 @@ export declare const FAQ: React.ForwardRefExoticComponent<Omit<FAQRootProps, "re
         toggleColor?: typeof import("..").AccordionToggleColors[number];
         weight?: HeadingProps["weight"];
     } & React.RefAttributes<HTMLHeadingElement>>;
-    Answer: ({ children, className, ...rest }: import("..").AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
+    Answer: ({ children, className, ...rest }: import("..").AccordionContentProps) => React.JSX.Element;
 };
 export {};
 //# sourceMappingURL=FAQ.d.ts.map

package/esm/FAQ/FAQ.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../src/FAQ/FAQ.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAG1D,OAAO,EAA2E,YAAY,EAAC,MAAM,IAAI,CAAA;AACzG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD;;GAEG;AACH,OAAO,0FAA0F,CAAA;AACjG,OAAO,uGAAuG,CAAA;AAC9G,OAAO,yFAAyF,CAAA;AAOhG,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACjC,GAAG,iBAAiB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,GAC3C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAgEnC,KAAK,eAAe,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IACrD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;CACxB,GAAG,YAAY,CAAA;AAmBhB,MAAM,MAAM,kBAAkB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IAC/D,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,GAAG,YAAY,CAAA;AAEhB,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,EAAS,EACT,IAAuB,EACvB,IAAkB,EAClB,MAAiB,EACjB,GAAG,IAAI,EACR,EAAE,kBAAkB,2CAapB;AAED;;;GAGG;AACH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;CAMd,CAAA"}
+{"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../src/FAQ/FAQ.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAG1D,OAAO,EAA2E,YAAY,EAAC,MAAM,IAAI,CAAA;AACzG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD;;GAEG;AACH,OAAO,0FAA0F,CAAA;AACjG,OAAO,uGAAuG,CAAA;AAC9G,OAAO,yFAAyF,CAAA;AAOhG,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACjC,GAAG,iBAAiB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,GAC3C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAgEnC,KAAK,eAAe,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IACrD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;CACxB,GAAG,YAAY,CAAA;AAmBhB,MAAM,MAAM,kBAAkB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IAC/D,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,GAAG,YAAY,CAAA;AAEhB,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,EAAS,EACT,IAAuB,EACvB,IAAkB,EAClB,MAAiB,EACjB,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAapB;AAED;;;GAGG;AACH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;CAMd,CAAA"}

package/esm/FAQ/FAQ.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
 import { useAnimation as t } from "../animation/useAnimation.js";
 import { Heading as n } from "../Heading/Heading.js";
 import { AccordionContent as r, AccordionHeading as i, AccordionRoot as a } from "../Accordion/Accordion.js";

package/esm/FAQ/FAQ.js.map

@@ -1 +1 @@
-{"version":3,"file":"FAQ.js","names":[],"sources":["../../src/FAQ/FAQ.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\n\nimport {useAnimation, Heading, AccordionHeading, AccordionContent, AccordionRoot, HeadingProps} from '..'\nimport type {BaseProps} from '../component-helpers'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/faq.css'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './FAQ.module.css'\n\nexport type FAQRootProps = {\n  variant?: 'default' | 'gridline'\n} & PropsWithChildren<BaseProps<HTMLElement>> &\n  React.HTMLAttributes<HTMLElement>\n\nconst FAQRoot = forwardRef<HTMLElement, FAQRootProps>(\n  ({children, style, animate, className, variant = 'default', ...rest}, ref) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const filteredChildren = React.Children.toArray(children).filter(child => {\n      if (React.isValidElement(child) && typeof child.type !== 'string') {\n        if (\n          isFragmentElement(child) ||\n          (child as React.ReactElement).type === FAQHeading ||\n          (child as React.ReactElement).type === FAQSubheading ||\n          (child as React.ReactElement).type === AccordionRoot\n        ) {\n          return true\n        }\n      }\n      return false\n    })\n\n    const hasSubheading = React.Children.toArray(children).some(\n      child => React.isValidElement(child) && typeof child.type !== 'string' && child.type === FAQSubheading,\n    )\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(styles.FAQ, styles[`FAQ--variant-${variant}`], animationClasses, className)}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {React.Children.toArray(filteredChildren).map((child, index) => {\n          if (React.isValidElement<FAQHeadingProps>(child) && child.type === FAQHeading) {\n            const clonedChild = React.cloneElement(child, {\n              align: hasSubheading ? 'start' : child.props.align,\n              size: hasSubheading ? '3' : child.props.size,\n              weight: hasSubheading ? 'medium' : child.props.weight,\n            })\n\n            if (variant === 'gridline') {\n              return (\n                <div key={child.key ?? index} className={styles[`FAQ__heading-wrapper--${variant}`]}>\n                  {clonedChild}\n                </div>\n              )\n            }\n            return clonedChild\n          }\n\n          const otherChild = child\n\n          return variant === 'gridline' ? (\n            <div key={index} className={styles[`FAQ__content-wrapper--${variant}`]}>\n              {otherChild}\n            </div>\n          ) : (\n            otherChild\n          )\n        })}\n      </section>\n    )\n  },\n)\n\ntype FAQHeadingProps = BaseProps<HTMLHeadingElement> & {\n  align?: 'start' | 'center'\n  children: React.ReactNode | React.ReactNode[]\n  as?: HeadingProps['as']\n} & HeadingProps\n\nconst FAQHeading = forwardRef<HTMLHeadingElement, FAQHeadingProps>(\n  ({children, className, size = '3', align = 'center', as, ...rest}, ref) => {\n    const headingLevel = size === '3' ? 'h3' : 'h2'\n    return (\n      <Heading\n        as={as || headingLevel}\n        size={size}\n        className={clsx(styles.FAQ__heading, styles[`FAQ__heading--${align}`], className)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\nexport type FAQSubheadingProps = BaseProps<HTMLHeadingElement> & {\n  align?: 'start' | 'center'\n  children: React.ReactNode | React.ReactNode[]\n  as?: Exclude<HeadingProps['as'], 'h1'>\n} & HeadingProps\n\nfunction FAQSubheading({\n  children,\n  className,\n  as = 'h3',\n  size = 'subhead-medium',\n  font = 'monospace',\n  weight = 'medium',\n  ...rest\n}: FAQSubheadingProps) {\n  return (\n    <Heading\n      as={as}\n      className={clsx(styles.FAQ__subheading, className)}\n      weight={weight}\n      size={size}\n      font={font}\n      {...rest}\n    >\n      {children}\n    </Heading>\n  )\n}\n\n/**\n * FAQ component:\n * {@link https://primer.style/brand/components/FAQ/ See usage examples}.\n */\nexport const FAQ = Object.assign(FAQRoot, {\n  Subheading: FAQSubheading,\n  Heading: FAQHeading,\n  Item: AccordionRoot,\n  Question: AccordionHeading,\n  Answer: AccordionContent,\n})\n"],"mappings":";;;;;;;;;;;;AAwBA,IAAM,IAAU,GACb,EAAC,aAAU,UAAO,YAAS,cAAW,aAAU,WAAW,GAAG,KAAO,MAAQ;CAC5E,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAmB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAAO,MAC/D,GAAI,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aAErD,EAAkB,EAAM,IACvB,EAA6B,SAAS,KACtC,EAA6B,SAAS,KACtC,EAA6B,SAAS,IAM3C,EAEI,IAAgB,EAAM,SAAS,QAAQ,EAAS,CAAC,MACrD,MAAS,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,YAAY,EAAM,SAAS,EAC1F;AAED,QACE,kBAAC,WAAD;EACO;EACL,WAAW,EAAK,EAAO,KAAK,EAAO,gBAAgB,MAAY,GAAkB,EAAU;EAC3F,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAEH,EAAM,SAAS,QAAQ,EAAiB,CAAC,KAAK,GAAO,MAAU;AAC9D,OAAI,EAAM,eAAgC,EAAM,IAAI,EAAM,SAAS,GAAY;IAC7E,IAAM,IAAc,EAAM,aAAa,GAAO;KAC5C,OAAO,IAAgB,UAAU,EAAM,MAAM;KAC7C,MAAM,IAAgB,MAAM,EAAM,MAAM;KACxC,QAAQ,IAAgB,WAAW,EAAM,MAAM;KAChD,CAAC;AASF,WAPI,MAAY,aAEZ,kBAAC,OAAD;KAA8B,WAAW,EAAO,yBAAyB;eACtE;KACG,EAFI,EAAM,OAAO,EAEjB,GAGH;;GAGT,IAAM,IAAa;AAEnB,UAAO,MAAY,aACjB,kBAAC,OAAD;IAAiB,WAAW,EAAO,yBAAyB;cACzD;IACG,EAFI,EAEJ,GAEN;IAEF;EACM,CAAA;EAGf,EAQK,IAAa,GAChB,EAAC,aAAU,cAAW,UAAO,KAAK,WAAQ,UAAU,OAAI,GAAG,KAAO,MAG/D,kBAAC,GAAD;CACE,IAAI,MAHa,MAAS,MAAM,OAAO;CAIjC;CACN,WAAW,EAAK,EAAO,cAAc,EAAO,iBAAiB,MAAU,EAAU;CAC5E;CACL,GAAI;CAEH;CACO,CAAA,CAGf;AAQD,SAAS,EAAc,EACrB,aACA,cACA,QAAK,MACL,UAAO,kBACP,UAAO,aACP,YAAS,UACT,GAAG,KACkB;AACrB,QACE,kBAAC,GAAD;EACM;EACJ,WAAW,EAAK,EAAO,iBAAiB,EAAU;EAC1C;EACF;EACA;EACN,GAAI;EAEH;EACO,CAAA;;AAQd,IAAa,IAAM,OAAO,OAAO,GAAS;CACxC,YAAY;CACZ,SAAS;CACT,MAAM;CACN,UAAU;CACV,QAAQ;CACT,CAAC"}
+{"version":3,"file":"FAQ.js","names":[],"sources":["../../src/FAQ/FAQ.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\n\nimport {useAnimation, Heading, AccordionHeading, AccordionContent, AccordionRoot, HeadingProps} from '..'\nimport type {BaseProps} from '../component-helpers'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/faq.css'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './FAQ.module.css'\n\nexport type FAQRootProps = {\n  variant?: 'default' | 'gridline'\n} & PropsWithChildren<BaseProps<HTMLElement>> &\n  React.HTMLAttributes<HTMLElement>\n\nconst FAQRoot = forwardRef<HTMLElement, FAQRootProps>(\n  ({children, style, animate, className, variant = 'default', ...rest}, ref) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const filteredChildren = React.Children.toArray(children).filter(child => {\n      if (React.isValidElement(child) && typeof child.type !== 'string') {\n        if (\n          isFragmentElement(child) ||\n          (child as React.ReactElement).type === FAQHeading ||\n          (child as React.ReactElement).type === FAQSubheading ||\n          (child as React.ReactElement).type === AccordionRoot\n        ) {\n          return true\n        }\n      }\n      return false\n    })\n\n    const hasSubheading = React.Children.toArray(children).some(\n      child => React.isValidElement(child) && typeof child.type !== 'string' && child.type === FAQSubheading,\n    )\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(styles.FAQ, styles[`FAQ--variant-${variant}`], animationClasses, className)}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {React.Children.toArray(filteredChildren).map((child, index) => {\n          if (React.isValidElement<FAQHeadingProps>(child) && child.type === FAQHeading) {\n            const clonedChild = React.cloneElement(child, {\n              align: hasSubheading ? 'start' : child.props.align,\n              size: hasSubheading ? '3' : child.props.size,\n              weight: hasSubheading ? 'medium' : child.props.weight,\n            })\n\n            if (variant === 'gridline') {\n              return (\n                <div key={child.key ?? index} className={styles[`FAQ__heading-wrapper--${variant}`]}>\n                  {clonedChild}\n                </div>\n              )\n            }\n            return clonedChild\n          }\n\n          const otherChild = child\n\n          return variant === 'gridline' ? (\n            <div key={index} className={styles[`FAQ__content-wrapper--${variant}`]}>\n              {otherChild}\n            </div>\n          ) : (\n            otherChild\n          )\n        })}\n      </section>\n    )\n  },\n)\n\ntype FAQHeadingProps = BaseProps<HTMLHeadingElement> & {\n  align?: 'start' | 'center'\n  children: React.ReactNode | React.ReactNode[]\n  as?: HeadingProps['as']\n} & HeadingProps\n\nconst FAQHeading = forwardRef<HTMLHeadingElement, FAQHeadingProps>(\n  ({children, className, size = '3', align = 'center', as, ...rest}, ref) => {\n    const headingLevel = size === '3' ? 'h3' : 'h2'\n    return (\n      <Heading\n        as={as || headingLevel}\n        size={size}\n        className={clsx(styles.FAQ__heading, styles[`FAQ__heading--${align}`], className)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\nexport type FAQSubheadingProps = BaseProps<HTMLHeadingElement> & {\n  align?: 'start' | 'center'\n  children: React.ReactNode | React.ReactNode[]\n  as?: Exclude<HeadingProps['as'], 'h1'>\n} & HeadingProps\n\nfunction FAQSubheading({\n  children,\n  className,\n  as = 'h3',\n  size = 'subhead-medium',\n  font = 'monospace',\n  weight = 'medium',\n  ...rest\n}: FAQSubheadingProps) {\n  return (\n    <Heading\n      as={as}\n      className={clsx(styles.FAQ__subheading, className)}\n      weight={weight}\n      size={size}\n      font={font}\n      {...rest}\n    >\n      {children}\n    </Heading>\n  )\n}\n\n/**\n * FAQ component:\n * {@link https://primer.style/brand/components/FAQ/ See usage examples}.\n */\nexport const FAQ = Object.assign(FAQRoot, {\n  Subheading: FAQSubheading,\n  Heading: FAQHeading,\n  Item: AccordionRoot,\n  Question: AccordionHeading,\n  Answer: AccordionContent,\n})\n"],"mappings":";;;;;;;;;;;;AAwBA,IAAM,IAAU,GACb,EAAC,aAAU,UAAO,YAAS,cAAW,aAAU,WAAW,GAAG,KAAO,MAAQ;CAC5E,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,CAAO,GAEjF,IAAmB,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,QAAO,MAC/D,GAAI,EAAM,eAAe,CAAK,KAAK,OAAO,EAAM,QAAS,aAErD,EAAkB,CAAK,KACtB,EAA6B,SAAS,KACtC,EAA6B,SAAS,KACtC,EAA6B,SAAS,GAM5C,GAEK,IAAgB,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,MACrD,MAAS,EAAM,eAAe,CAAK,KAAK,OAAO,EAAM,QAAS,YAAY,EAAM,SAAS,CAC3F;CAEA,OACE,kBAAC,WAAD;EACO;EACL,WAAW,EAAK,EAAO,KAAK,EAAO,gBAAgB,MAAY,GAAkB,CAAS;EAC1F,OAAO;GAAC,GAAG;GAAuB,GAAG;EAAK;EAC1C,GAAI;YAEH,EAAM,SAAS,QAAQ,CAAgB,CAAC,CAAC,KAAK,GAAO,MAAU;GAC9D,IAAI,EAAM,eAAgC,CAAK,KAAK,EAAM,SAAS,GAAY;IAC7E,IAAM,IAAc,EAAM,aAAa,GAAO;KAC5C,OAAO,IAAgB,UAAU,EAAM,MAAM;KAC7C,MAAM,IAAgB,MAAM,EAAM,MAAM;KACxC,QAAQ,IAAgB,WAAW,EAAM,MAAM;IACjD,CAAC;IASD,OAPI,MAAY,aAEZ,kBAAC,OAAD;KAA8B,WAAW,EAAO,yBAAyB;eACtE;IACE,GAFK,EAAM,OAAO,CAElB,IAGF;GACT;GAEA,IAAM,IAAa;GAEnB,OAAO,MAAY,aACjB,kBAAC,OAAD;IAAiB,WAAW,EAAO,yBAAyB;cACzD;GACE,GAFK,CAEL,IAEL;EAEJ,CAAC;CACM,CAAA;AAEb,CACF,GAQM,IAAa,GAChB,EAAC,aAAU,cAAW,UAAO,KAAK,WAAQ,UAAU,OAAI,GAAG,KAAO,MAG/D,kBAAC,GAAD;CACE,IAAI,MAHa,MAAS,MAAM,OAAO;CAIjC;CACN,WAAW,EAAK,EAAO,cAAc,EAAO,iBAAiB,MAAU,CAAS;CAC3E;CACL,GAAI;CAEH;AACM,CAAA,CAGf;AAQA,SAAS,EAAc,EACrB,aACA,cACA,QAAK,MACL,UAAO,kBACP,UAAO,aACP,YAAS,UACT,GAAG,KACkB;CACrB,OACE,kBAAC,GAAD;EACM;EACJ,WAAW,EAAK,EAAO,iBAAiB,CAAS;EACzC;EACF;EACA;EACN,GAAI;EAEH;CACM,CAAA;AAEb;AAMA,IAAa,IAAM,OAAO,OAAO,GAAS;CACxC,YAAY;CACZ,SAAS;CACT,MAAM;CACN,UAAU;CACV,QAAQ;AACV,CAAC"}