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

package/docs/components/AnchorNav/index.md

@@ -21,7 +21,7 @@ import {AnchorNav} from '@primer/react-brand'
 ### Basic
 
 ```jsx
-<div style={{position: 'relative', overflowX: 'scroll', width: '100%'}}>
+<div style={{position: 'relative', overflowX: 'scroll', width: '100%', contain: 'layout'}}>
   <AnchorNav>
     <AnchorNav.Link href="#basic-section1">Section one</AnchorNav.Link>
     <AnchorNav.Link href="#basic-section2">Section two</AnchorNav.Link>
@@ -35,6 +35,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lemon-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 1
@@ -44,6 +45,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-yellow-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 2
@@ -53,6 +55,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lime-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 3
@@ -62,6 +65,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-green-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 4
@@ -71,6 +75,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-teal-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 5
@@ -83,7 +88,7 @@ import {AnchorNav} from '@primer/react-brand'
 `AnchorNav` can also feature secondary actions. When two actions are present, the first will be presented as the `primary` variant.
 
 ```jsx
-<div style={{position: 'relative', overflowX: 'scroll', width: '100%'}}>
+<div style={{position: 'relative', overflowX: 'scroll', width: '100%', contain: 'layout'}}>
   <AnchorNav>
     <AnchorNav.Link href="#fewer-links-section1">Section one</AnchorNav.Link>
     <AnchorNav.Link href="#fewer-links-section2">Section two</AnchorNav.Link>
@@ -96,6 +101,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lemon-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 1
@@ -105,6 +111,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-yellow-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 2
@@ -114,6 +121,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lime-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 3
@@ -126,7 +134,7 @@ import {AnchorNav} from '@primer/react-brand'
 `AnchorNav` implementations with fewer than `5` links, will automatically align links to the `start`.
 
 ```jsx
-<div style={{position: 'relative', overflowX: 'scroll', width: '100%'}}>
+<div style={{position: 'relative', overflowX: 'scroll', width: '100%', contain: 'layout'}}>
   <AnchorNav>
     <AnchorNav.Link href="#fewer-links-section1">Section one</AnchorNav.Link>
     <AnchorNav.Link href="#fewer-links-section2">Section two</AnchorNav.Link>
@@ -138,6 +146,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lemon-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 1
@@ -147,6 +156,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-yellow-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 2
@@ -156,6 +166,7 @@ import {AnchorNav} from '@primer/react-brand'
     style={{
       padding: '100px 2rem',
       backgroundColor: 'var(--base-color-scale-lime-0)',
+      color: 'var(--base-color-scale-black-0)',
     }}
   >
     Section 3

package/docs/components/BreakoutBanner/react.md

@@ -116,7 +116,7 @@ The content alignment can be changed using the `align` prop on the root `Breakou
 ### Optional background color
 
 ```jsx
-<BreakoutBanner backgroundColor="var(--base-color-scale-blue-0)">
+<BreakoutBanner backgroundColor="var(--brand-color-success-subtle)">
   <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>
   <BreakoutBanner.Description>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis

package/docs/components/MinimalFooter/index.md

@@ -17,7 +17,9 @@ import {MinimalFooter} from '@primer/react-brand'
 ### Default
 
 ```jsx
-<MinimalFooter />
+<div style={{width: '100%'}}>
+  <MinimalFooter />
+</div>
 ```
 
 ### Footer links
@@ -25,35 +27,39 @@ import {MinimalFooter} from '@primer/react-brand'
 Use up to five `MinimalFooter.Link` children. Links can render as anchors or buttons.
 
 ```jsx
-<MinimalFooter>
-  <MinimalFooter.Link href="https://github.com/organizations/enterprise_plan">Try GitHub for free</MinimalFooter.Link>
-  <MinimalFooter.Link href="https://github.com/enterprise">Enterprise</MinimalFooter.Link>
-  <MinimalFooter.Link href="https://github.com/enterprise/contact">Email us</MinimalFooter.Link>
-</MinimalFooter>
+<div style={{width: '100%'}}>
+  <MinimalFooter>
+    <MinimalFooter.Link href="https://github.com/organizations/enterprise_plan">Try GitHub for free</MinimalFooter.Link>
+    <MinimalFooter.Link href="https://github.com/enterprise">Enterprise</MinimalFooter.Link>
+    <MinimalFooter.Link href="https://github.com/enterprise/contact">Email us</MinimalFooter.Link>
+  </MinimalFooter>
+</div>
 ```
 
 ### Footnotes
 
 ```jsx
-<MinimalFooter>
-  <MinimalFooter.Footnotes>
-    <Text>
-      <sup>1</sup>By signing up, GitHub may use your information to personalize and measure the effectiveness of
-      enterprise business ads, including those you see off of GitHub, promotional communications or marketing you
-      receive related to the Enterprise Marketing Pages. We will send you relevant emails and promotional information
-      based on your GitHub profile and any additional information provided in the sign-up form. If you change your mind,
-      you can unsubscribe at any time (an unsubscribe link is provided in every email). For more information on how
-      GitHub uses your personal information, please see the{' '}
-      <InlineLink
-        href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement"
-        target="_blank"
-      >
-        GitHub Privacy Statement
-      </InlineLink>
-      .
-    </Text>
-  </MinimalFooter.Footnotes>
-</MinimalFooter>
+<div style={{width: '100%'}}>
+  <MinimalFooter>
+    <MinimalFooter.Footnotes>
+      <Text>
+        <sup>1</sup>By signing up, GitHub may use your information to personalize and measure the effectiveness of
+        enterprise business ads, including those you see off of GitHub, promotional communications or marketing you
+        receive related to the Enterprise Marketing Pages. We will send you relevant emails and promotional information
+        based on your GitHub profile and any additional information provided in the sign-up form. If you change your
+        mind, you can unsubscribe at any time (an unsubscribe link is provided in every email). For more information on
+        how GitHub uses your personal information, please see the{' '}
+        <InlineLink
+          href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement"
+          target="_blank"
+        >
+          GitHub Privacy Statement
+        </InlineLink>
+        .
+      </Text>
+    </MinimalFooter.Footnotes>
+  </MinimalFooter>
+</div>
 ```
 
 ### Footer social links
@@ -61,7 +67,7 @@ Use up to five `MinimalFooter.Link` children. Links can render as anchors or but
 `MinimalFooter` will render all supported social links by default. Social links can be removed however, by passing `socialLinks={false}`. Alternatively, pass an array of valid social links to filter and reorder the default list.
 
 ```jsx
-<Stack>
+<Stack style={{width: '100%'}}>
   Hide all social links:
   <MinimalFooter socialLinks={false} />
   <br />
@@ -75,18 +81,20 @@ Use up to five `MinimalFooter.Link` children. Links can render as anchors or but
 Use `centerComponent` for an exceptional page-specific control or status indicator between the top and bottom sections.
 
 ```jsx
-<MinimalFooter
-  centerComponent={
-    <Stack direction="horizontal" gap="condensed" padding="none">
-      <Text size="200" variant="muted">
-        Status:
-      </Text>
-      <InlineLink href="https://www.githubstatus.com" size="200">
-        All systems operational
-      </InlineLink>
-    </Stack>
-  }
-/>
+<div style={{width: '100%'}}>
+  <MinimalFooter
+    centerComponent={
+      <Stack direction="horizontal" gap="condensed" padding="none">
+        <Text size="200" variant="muted">
+          Status:
+        </Text>
+        <InlineLink href="https://www.githubstatus.com" size="200">
+          All systems operational
+        </InlineLink>
+      </Stack>
+    }
+  />
+</div>
 ```
 
 ### Back to top
@@ -96,9 +104,11 @@ Use `MinimalFooter.BackToTop` to opt into a control in the top row that scrolls
 After keyboard activation, focus moves to the first `<main>` element, falling back to `<body>` or `<html>` when a main landmark is unavailable. Use `focusTargetId` to identify a different semantic top-of-page destination.
 
 ```jsx
-<MinimalFooter socialLinks={false}>
-  <MinimalFooter.BackToTop>Back to top</MinimalFooter.BackToTop>
-</MinimalFooter>
+<div style={{width: '100%'}}>
+  <MinimalFooter socialLinks={false}>
+    <MinimalFooter.BackToTop>Back to top</MinimalFooter.BackToTop>
+  </MinimalFooter>
+</div>
 ```
 
 ## Component props

package/docs/components/PricingOptions/index.md

@@ -392,15 +392,17 @@ automatically generated label:
 ```jsx
 function FeatureWithCustomContent({customContent}) {
   return (
-    <PricingOptions.FeatureListItem
-      infoTooltip="Interact with Copilot using natural language."
-      infoTooltipAriaLabel="More information about Chat in IDE and Mobile"
-    >
-      <>
-        Chat in IDE and Mobile
-        {customContent ? <Text>Custom footnote</Text> : null}
-      </>
-    </PricingOptions.FeatureListItem>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListItem
+        infoTooltip="Interact with Copilot using natural language."
+        infoTooltipAriaLabel="More information about Chat in IDE and Mobile"
+      >
+        <>
+          Chat in IDE and Mobile
+          {customContent ? <Text>Custom footnote</Text> : null}
+        </>
+      </PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
   )
 }
 ```

package/docs/components/Prose/index.md

@@ -48,7 +48,7 @@ import {Prose} from '@primer/react-brand'
     <h4>Heading level  4</h4>
     <p>
       Secure code as you write it. Automatically review every change to your codebase and identify vulnerabilities
-      before they reach production. <a href="/#">Learn more here.</a>
+      before they reach production. <a href="https://github.com/security/advanced-security/code-security">Learn more about GitHub Code Security.</a>
     </p>
     <h5>Heading level 5</h5>
     <ol>

package/docs/components/River/react.md

@@ -9,7 +9,7 @@ storybook: '/brand/storybook/?path=/story/components-river--default'
 ---
 
 ```js
-import {River, RiverBreakout} from '@primer/react-brand'
+import {MinimalVideoPlayer, River, RiverBreakout} from '@primer/react-brand'
 ```
 
 ## Examples
@@ -150,11 +150,8 @@ The `gridline` variant adds lateral padding and applies a full-bleed visual back
 ```jsx
 <River style={{width: '100%'}} imageTextRatio="60:40">
   <River.Visual hasShadow={false}>
-    <video
-      loop
-      playsInline
-      autoPlay
-      muted
+    <MinimalVideoPlayer
+      title="Break issues into actionable tasks"
       poster="https://github.githubassets.com/images/modules/site/issues/issue-tasks-progress-placeholder.png"
     >
       <source
@@ -165,7 +162,7 @@ The `gridline` variant adds lateral padding and applies a full-bleed visual back
         type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"
         src="https://github.githubassets.com/images/modules/site/issues/issue-tasks-progress.h264.mp4"
       />
-    </video>
+    </MinimalVideoPlayer>
   </River.Visual>
   <River.Content>
     <Heading>Break issues into actionable tasks</Heading>

package/docs/components/Tabs/index.md

@@ -92,7 +92,7 @@ function CustomPanels() {
   }, [])
 
   return (
-    <Stack alignItems="center">
+    <Stack alignItems="center" style={{width: '100%'}}>
       <Tabs onChange={handleTabChange} aria-label="Lifecycle tabs">
         <Tabs.Item id="tab-1" aria-controls="panel-1">
           Code

package/docs/components/Testimonial/react.md

@@ -32,7 +32,7 @@ import {Testimonial} from '@primer/react-brand'
 For an alternative visual appearance and layout, without altering semantic meaning.
 
 ```jsx
-<Stack direction="horizontal" gap="spacious" padding="none">
+<Stack direction={{narrow: 'vertical', regular: 'horizontal'}} gap="spacious" padding="none">
   <Testimonial variant="default">
     <Testimonial.Quote>
       GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
@@ -90,7 +90,7 @@ Use `size` to alternate the text size. Available options are `small` (default) a
 Use `Stack` to help position multiple, adjacent Testimonials alongside one another.
 
 ```jsx
-<Stack direction="horizontal" gap="spacious" padding="spacious">
+<Stack direction={{narrow: 'vertical', regular: 'horizontal'}} gap="spacious" padding="spacious">
   <Testimonial>
     <Testimonial.Quote>
       GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.81.0-rc.1b89e69c)
+# Primer Brand docs (v0.81.0-rc.a8121ac0)
 
-These docs are bundled with `@primer/react-brand@0.81.0-rc.1b89e69c` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.81.0-rc.a8121ac0` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/esm/Card/Card.js

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

package/esm/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, {RefObject, forwardRef} from 'react'\n\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps} from '..'\nimport {EyebrowText} from '../EyebrowText'\nimport {Icon, type IconProps} from '../Icon'\nimport {Token} from '../Token'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport type {BaseProps} from '../component-helpers'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {Colors} from '../constants'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './Card.module.css'\nimport stylesLink from '../Link/Link.module.css'\n\nexport const CardVariants = ['default', 'minimal'] as const\nexport const CardCTAVariants = ['text', 'arrow', 'none'] as const\nexport const CardBackgroundColors = ['default', 'subtle', 'none'] as const\nexport const CardTokenPositions = ['block-start', 'block-end'] as const\nexport const CardLabelVariants = ['token', 'accent-text'] as const\nexport const CardImagePaddingOptions = ['default', 'none'] as const\n\nexport const CardIconColors = Colors\n\nexport const defaultCardIconColor = CardIconColors[0]\nexport const defaultCardCTAVariant = CardCTAVariants[0]\nexport const defaultCardLabelVariant = CardLabelVariants[0]\n\nexport type CardVariants = (typeof CardVariants)[number]\nexport type CardCTAVariant = (typeof CardCTAVariants)[number]\nexport type CardTokenPosition = (typeof CardTokenPositions)[number]\nexport type CardLabelVariant = (typeof CardLabelVariants)[number]\nexport type CardBackgroundColor = (typeof CardBackgroundColors)[number]\nexport type CardImagePadding = (typeof CardImagePaddingOptions)[number]\n\ntype CardLeadingVisual = React.ReactElement | React.ComponentType<{className?: string}>\n\nexport type CardProps = {\n  /**\n   * Specify alternative card appearance\n   */\n  variant?: CardVariants\n  /**\n   * Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description\n   */\n  children:\n    | React.ReactNode\n    | React.ReactElement<CardImageProps>\n    | React.ReactElement<CardIconProps>\n    | React.ReactElement<CardLabelProps>\n    | React.ReactElement<CardTokensProps>\n    | React.ReactElement<CardHeadingProps>\n    | React.ReactElement<CardDescriptionProps>\n  /**\n   * Disable transitions and animations within the Card\n   */\n  disableAnimation?: boolean\n  /**\n   * The href of the link\n   * */\n  href: string\n  /**\n   * Changes the cta text of the card\n   * */\n  ctaText?: string\n  /**\n   * Specifies the presentation of the call-to-action area\n   */\n  ctaVariant?: CardCTAVariant\n  /**\n   * Optional, custom background color.\n   */\n  backgroundColor?: CardBackgroundColor\n  /**\n   * A visual that appears before the heading, commonly used for a logo or brand mark\n   */\n  leadingVisual?: CardLeadingVisual\n  /**\n   * Adds a border to the card.\n   */\n  hasBorder?: boolean\n  /**\n   * Fills the width of the parent container and removes the default max-width.\n   */\n  fullWidth?: boolean\n  /**\n   * Aligns the card content\n   */\n  align?: 'start' | 'center'\n} & Omit<BaseProps<HTMLDivElement>, 'animate'> &\n  Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> &\n  Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      align = 'start',\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      children: childrenMaybeWrappedInFragment,\n      className,\n      ctaText = 'Learn more',\n      ctaVariant = defaultCardCTAVariant,\n      disableAnimation = false,\n      fullWidth = false,\n      href,\n      hasBorder = false,\n      leadingVisual,\n      style,\n      variant = 'default',\n      backgroundColor,\n      ...props\n    },\n    ref,\n  ) => {\n    const cardRef = useProvidedRefOrCreate(ref as RefObject<HTMLDivElement>)\n    const resolvedBackgroundColor =\n      backgroundColor ?? (variant === 'minimal' || ctaVariant === 'arrow' ? 'none' : 'default')\n\n    let children: React.ReactNode | null\n\n    if (childrenMaybeWrappedInFragment == null) {\n      children = null\n    } else if (isFragmentElement(childrenMaybeWrappedInFragment)) {\n      children = childrenMaybeWrappedInFragment.props.children ?? null\n    } else {\n      children = childrenMaybeWrappedInFragment\n    }\n\n    const {cardImage, cardIcon, cardLabel, cardTokensBlockStart, cardTokensBlockEnd, cardHeading, cardDescription} =\n      React.Children.toArray(children).reduce<{\n        cardHeading?: ReturnType<typeof CardHeading>\n        cardImage?: ReturnType<typeof CardImage>\n        cardIcon?: ReturnType<typeof CardIcon>\n        cardLabel?: ReturnType<typeof CardLabel>\n        cardTokensBlockStart?: ReturnType<typeof CardTokens>\n        cardTokensBlockEnd?: ReturnType<typeof CardTokens>\n        cardDescription?: ReturnType<typeof CardDescription>\n      }>((acc, child) => {\n        if (isCardHeading(child)) {\n          acc.cardHeading = React.cloneElement(child, {\n            href,\n          })\n        } else if (isCardImage(child)) {\n          acc.cardImage = child\n        } else if (isCardIcon(child)) {\n          acc.cardIcon = child\n        } else if (isCardLabel(child)) {\n          acc.cardLabel = child\n        } else if (isCardTokens(child)) {\n          if (child.props.position === 'block-end') {\n            acc.cardTokensBlockEnd = child\n          } else {\n            acc.cardTokensBlockStart = child\n          }\n        } else if (isCardDescription(child)) {\n          acc.cardDescription = child\n        }\n\n        return acc\n      }, {})\n\n    if ((process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && leadingVisual && cardIcon) {\n      // eslint-disable-next-line no-console\n      console.warn('Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.')\n    }\n\n    const renderedLeadingVisual = getRenderableLeadingVisual(leadingVisual)\n    const renderedCardIcon = renderedLeadingVisual ? undefined : cardIcon\n    const imagePosition = cardImage ? cardImage.props.position || 'block-start' : null\n    const shouldRenderLinkArrow = !(align === 'center' && ctaVariant === 'text')\n\n    return (\n      <DefaultCardWrapperComponent\n        style={style}\n        className={clsx(\n          fullWidth ? styles['Card--fullWidth'] : styles['Card--maxWidth'],\n          styles[`Card--align-${align}`],\n        )}\n      >\n        <div\n          className={clsx(\n            styles.Card,\n            disableAnimation && styles['Card--disableAnimation'],\n            renderedLeadingVisual && styles['Card--hasLeadingVisual'],\n            ctaVariant === 'arrow' && styles['Card--ctaVariant-arrow'],\n            cardTokensBlockEnd && styles['Card--tokensPosition-block-end'],\n            variant === 'minimal' && styles['Card--variant-minimal'],\n            hasBorder && styles['Card--border'],\n            styles[`Card--backgroundColor-${resolvedBackgroundColor}`],\n            imagePosition && styles[`Card--imagePos-${imagePosition}`],\n            className,\n          )}\n          style={style}\n          ref={cardRef}\n          {...props}\n        >\n          {imagePosition === 'block-start' ? cardImage : null}\n          {renderedLeadingVisual ? <div className={styles.Card__leadingVisual}>{renderedLeadingVisual}</div> : null}\n          {renderedCardIcon}\n          {cardTokensBlockStart}\n          {cardLabel}\n          {cardHeading}\n          {cardDescription}\n          {cardTokensBlockEnd}\n          {imagePosition === 'block-end' ? cardImage : null}\n\n          {ctaVariant !== 'none' ? (\n            <div\n              className={clsx(styles.Card__action, ctaVariant === 'arrow' && styles['Card__action--arrowOnly'])}\n              aria-hidden={ctaVariant === 'arrow' ? true : undefined}\n            >\n              <span className={clsx(ctaVariant === 'arrow' && styles.Card__actionLabelClip)}>\n                <Text as=\"span\" size=\"200\" className={clsx(stylesLink['Link--label'], styles.Card__actionLabel)}>\n                  {ctaText}\n                </Text>\n              </span>\n              {shouldRenderLinkArrow ? (\n                <span\n                  className={clsx(\n                    styles.Card__actionIcon,\n                    ctaVariant === 'arrow' && styles['Card__actionIcon--arrowOnly'],\n                  )}\n                >\n                  <ExpandableArrow\n                    className={clsx(stylesLink['Link-arrow'], styles['Card--expandableArrow'])}\n                    aria-hidden=\"true\"\n                  />\n                </span>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      </DefaultCardWrapperComponent>\n    )\n  },\n)\n\ntype DefaultCardWrapperComponentProps = React.PropsWithChildren<{\n  className?: string\n  style?: React.CSSProperties\n}>\n\nfunction DefaultCardWrapperComponent({className, children, style}: DefaultCardWrapperComponentProps) {\n  return (\n    <div className={clsx(styles['Card__outer'], className)} style={style}>\n      {children}\n    </div>\n  )\n}\n\nfunction getRenderableLeadingVisual(leadingVisual?: CardLeadingVisual) {\n  if (!leadingVisual) {\n    return null\n  }\n\n  if (typeof leadingVisual === 'function') {\n    return React.createElement(leadingVisual, {className: styles['Card__leadingVisualItem']})\n  }\n\n  if (React.isValidElement<{className?: string}>(leadingVisual)) {\n    return React.cloneElement(leadingVisual, {\n      className: clsx(styles['Card__leadingVisualItem'], leadingVisual.props.className),\n    })\n  }\n\n  return null\n}\n\nexport type CardImageProps = {\n  position?: 'block-start' | 'block-end'\n  padding?: CardImagePadding\n} & ImageProps\n\nfunction CardImage({className, position = 'block-start', padding = 'default', ...rest}: CardImageProps) {\n  return (\n    <div\n      className={clsx(\n        styles.Card__image,\n        styles[`Card__image--position-${position}`],\n        padding === 'none' && styles['Card__image--padding-none'],\n      )}\n    >\n      <Image className={className} {...rest} />\n    </div>\n  )\n}\n\ntype CardIconProps = IconProps\n\nconst CardIcon = ({className, hasBackground = true, ...props}: IconProps) => (\n  <Icon className={clsx(styles.Card__icon, className)} hasBackground={hasBackground} {...props} />\n)\n\ntype CardTokensProps = BaseProps<HTMLDivElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  position?: CardTokenPosition\n}\n\nconst CardTokens = forwardRef<HTMLDivElement, CardTokensProps>(\n  ({children, className, position = 'block-start', ...rest}, ref) => {\n    return (\n      <div\n        className={clsx(\n          styles.Card__tokens,\n          position === 'block-end' && styles['Card__tokens--position-block-end'],\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\ntype CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> &\n  Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {\n    children: React.ReactNode | React.ReactNode[]\n    variant?: CardLabelVariant\n  }\n\nconst CardLabel = forwardRef<HTMLSpanElement, CardLabelProps>(\n  ({children, variant = defaultCardLabelVariant, className, ...rest}, ref) => {\n    if (variant === 'accent-text') {\n      return (\n        <EyebrowText ref={ref} className={clsx(styles.Card__label, className)} variant=\"accent\" {...rest}>\n          {children}\n        </EyebrowText>\n      )\n    }\n\n    return (\n      <Token\n        ref={ref as React.Ref<HTMLSpanElement | HTMLAnchorElement>}\n        className={clsx(styles.Card__label, className)}\n        {...rest}\n      >\n        {children}\n      </Token>\n    )\n  },\n)\n\ntype CardHeadingProps = BaseProps<HTMLHeadingElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  as?: Exclude<HeadingProps['as'], 'h1'>\n  href?: string\n} & Omit<HeadingProps, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> &\n  React.ComponentPropsWithoutRef<'a'>\n\nconst CardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n  ({children, as = 'h3', className, href, onMouseEnter, onMouseLeave, onBlur, onFocus, ...rest}, ref) => {\n    return (\n      <Heading size=\"6\" className={clsx(styles.Card__heading, className)} ref={ref} as={as} {...rest}>\n        <a\n          href={href}\n          className={clsx(styles.Card__link)}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onBlur={onBlur}\n          onFocus={onFocus}\n        >\n          {children}\n        </a>\n      </Heading>\n    )\n  },\n)\n\ntype CardDescriptionProps = BaseProps<HTMLParagraphElement> & {\n  children: React.ReactNode | React.ReactNode[]\n}\n\nconst CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({children, className, ...rest}, ref) => {\n    return (\n      <Text variant=\"muted\" ref={ref} size=\"200\" as=\"p\" className={clsx(styles.Card__description, className)} {...rest}>\n        {children}\n      </Text>\n    )\n  },\n)\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement(element) && element.type === componentType\n\nconst isCardImage = createComponentTypeGuard(CardImage)\nconst isCardIcon = createComponentTypeGuard(CardIcon)\nconst isCardLabel = createComponentTypeGuard(CardLabel)\nconst isCardTokens = createComponentTypeGuard(CardTokens)\nconst isCardHeading = createComponentTypeGuard(CardHeading)\nconst isCardDescription = createComponentTypeGuard(CardDescription)\n\n/**\n * Card component:\n * @see https://primer.style/brand/components/Card\n */\nexport const Card = Object.assign(CardRoot, {\n  Image: CardImage,\n  Icon: CardIcon,\n  Label: CardLabel,\n  Tokens: CardTokens,\n  Heading: CardHeading,\n  Description: CardDescription,\n})\n"],"mappings":"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"}
+{"version":3,"file":"Card.js","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, {RefObject, forwardRef} from 'react'\n\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps} from '..'\nimport {EyebrowText} from '../EyebrowText'\nimport {Icon, type IconProps} from '../Icon'\nimport {Token} from '../Token'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport type {BaseProps} from '../component-helpers'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {Colors} from '../constants'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './Card.module.css'\nimport stylesLink from '../Link/Link.module.css'\n\nexport const CardVariants = ['default', 'minimal'] as const\nexport const CardCTAVariants = ['text', 'arrow', 'none'] as const\nexport const CardBackgroundColors = ['default', 'subtle', 'none'] as const\nexport const CardTokenPositions = ['block-start', 'block-end'] as const\nexport const CardLabelVariants = ['token', 'accent-text'] as const\nexport const CardImagePaddingOptions = ['default', 'none'] as const\n\nexport const CardIconColors = Colors\n\nexport const defaultCardIconColor = CardIconColors[0]\nexport const defaultCardCTAVariant = CardCTAVariants[0]\nexport const defaultCardLabelVariant = CardLabelVariants[0]\n\nexport type CardVariants = (typeof CardVariants)[number]\nexport type CardCTAVariant = (typeof CardCTAVariants)[number]\nexport type CardTokenPosition = (typeof CardTokenPositions)[number]\nexport type CardLabelVariant = (typeof CardLabelVariants)[number]\nexport type CardBackgroundColor = (typeof CardBackgroundColors)[number]\nexport type CardImagePadding = (typeof CardImagePaddingOptions)[number]\n\ntype CardLeadingVisual = React.ReactElement | React.ComponentType<{className?: string}>\n\nexport type CardProps = {\n  /**\n   * Specify alternative card appearance\n   */\n  variant?: CardVariants\n  /**\n   * Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description\n   */\n  children:\n    | React.ReactNode\n    | React.ReactElement<CardImageProps>\n    | React.ReactElement<CardIconProps>\n    | React.ReactElement<CardLabelProps>\n    | React.ReactElement<CardTokensProps>\n    | React.ReactElement<CardHeadingProps>\n    | React.ReactElement<CardDescriptionProps>\n  /**\n   * Disable transitions and animations within the Card\n   */\n  disableAnimation?: boolean\n  /**\n   * The href of the link\n   * */\n  href: string\n  /**\n   * Changes the cta text of the card\n   * */\n  ctaText?: string\n  /**\n   * Specifies the presentation of the call-to-action area\n   */\n  ctaVariant?: CardCTAVariant\n  /**\n   * Optional, custom background color.\n   */\n  backgroundColor?: CardBackgroundColor\n  /**\n   * A visual that appears before the heading, commonly used for a logo or brand mark\n   */\n  leadingVisual?: CardLeadingVisual\n  /**\n   * Adds a border to the card.\n   */\n  hasBorder?: boolean\n  /**\n   * Fills the width of the parent container and removes the default max-width.\n   */\n  fullWidth?: boolean\n  /**\n   * Aligns the card content\n   */\n  align?: 'start' | 'center'\n} & Omit<BaseProps<HTMLDivElement>, 'animate'> &\n  Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> &\n  Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      align = 'start',\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      children: childrenMaybeWrappedInFragment,\n      className,\n      ctaText = 'Learn more',\n      ctaVariant = defaultCardCTAVariant,\n      disableAnimation = false,\n      fullWidth = false,\n      href,\n      hasBorder = false,\n      leadingVisual,\n      style,\n      variant = 'default',\n      backgroundColor,\n      ...props\n    },\n    ref,\n  ) => {\n    const cardRef = useProvidedRefOrCreate(ref as RefObject<HTMLDivElement>)\n    const resolvedBackgroundColor =\n      backgroundColor ?? (variant === 'minimal' || ctaVariant === 'arrow' ? 'none' : 'default')\n\n    let children: React.ReactNode | null\n\n    if (childrenMaybeWrappedInFragment == null) {\n      children = null\n    } else if (isFragmentElement(childrenMaybeWrappedInFragment)) {\n      children = childrenMaybeWrappedInFragment.props.children ?? null\n    } else {\n      children = childrenMaybeWrappedInFragment\n    }\n\n    const {cardImage, cardIcon, cardLabel, cardTokensBlockStart, cardTokensBlockEnd, cardHeading, cardDescription} =\n      React.Children.toArray(children).reduce<{\n        cardHeading?: ReturnType<typeof CardHeading>\n        cardImage?: ReturnType<typeof CardImage>\n        cardIcon?: ReturnType<typeof CardIcon>\n        cardLabel?: ReturnType<typeof CardLabel>\n        cardTokensBlockStart?: ReturnType<typeof CardTokens>\n        cardTokensBlockEnd?: ReturnType<typeof CardTokens>\n        cardDescription?: ReturnType<typeof CardDescription>\n      }>((acc, child) => {\n        if (isCardHeading(child)) {\n          acc.cardHeading = React.cloneElement(child, {\n            href,\n          })\n        } else if (isCardImage(child)) {\n          acc.cardImage = child\n        } else if (isCardIcon(child)) {\n          acc.cardIcon = child\n        } else if (isCardLabel(child)) {\n          acc.cardLabel = child\n        } else if (isCardTokens(child)) {\n          if (child.props.position === 'block-end') {\n            acc.cardTokensBlockEnd = child\n          } else {\n            acc.cardTokensBlockStart = child\n          }\n        } else if (isCardDescription(child)) {\n          acc.cardDescription = child\n        }\n\n        return acc\n      }, {})\n\n    if ((process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && leadingVisual && cardIcon) {\n      // eslint-disable-next-line no-console\n      console.warn('Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.')\n    }\n\n    const renderedLeadingVisual = getRenderableLeadingVisual(leadingVisual)\n    const renderedCardIcon = renderedLeadingVisual ? undefined : cardIcon\n    const imagePosition = cardImage ? cardImage.props.position || 'block-start' : null\n    const shouldRenderLinkArrow = !(align === 'center' && ctaVariant === 'text')\n\n    return (\n      <DefaultCardWrapperComponent\n        style={style}\n        className={clsx(\n          fullWidth ? styles['Card--fullWidth'] : styles['Card--maxWidth'],\n          styles[`Card--align-${align}`],\n        )}\n      >\n        <div\n          className={clsx(\n            styles.Card,\n            disableAnimation && styles['Card--disableAnimation'],\n            renderedLeadingVisual && styles['Card--hasLeadingVisual'],\n            ctaVariant === 'arrow' && styles['Card--ctaVariant-arrow'],\n            cardTokensBlockEnd && styles['Card--tokensPosition-block-end'],\n            variant === 'minimal' && styles['Card--variant-minimal'],\n            hasBorder && styles['Card--border'],\n            styles[`Card--backgroundColor-${resolvedBackgroundColor}`],\n            imagePosition && styles[`Card--imagePos-${imagePosition}`],\n            className,\n          )}\n          style={style}\n          ref={cardRef}\n          {...props}\n        >\n          {imagePosition === 'block-start' ? cardImage : null}\n          {renderedLeadingVisual ? <div className={styles.Card__leadingVisual}>{renderedLeadingVisual}</div> : null}\n          {renderedCardIcon}\n          {cardTokensBlockStart}\n          {cardLabel}\n          {cardHeading}\n          {cardDescription}\n          {cardTokensBlockEnd}\n          {imagePosition === 'block-end' ? cardImage : null}\n\n          {ctaVariant !== 'none' ? (\n            <div className={clsx(styles.Card__action, ctaVariant === 'arrow' && styles['Card__action--arrowOnly'])}>\n              <span className={clsx(ctaVariant === 'arrow' && styles.Card__actionLabelClip)}>\n                <Text as=\"span\" size=\"200\" className={clsx(stylesLink['Link--label'], styles.Card__actionLabel)}>\n                  {ctaText}\n                </Text>\n              </span>\n              {shouldRenderLinkArrow ? (\n                <span\n                  className={clsx(\n                    styles.Card__actionIcon,\n                    ctaVariant === 'arrow' && styles['Card__actionIcon--arrowOnly'],\n                  )}\n                >\n                  <ExpandableArrow\n                    className={clsx(stylesLink['Link-arrow'], styles['Card--expandableArrow'])}\n                    aria-hidden=\"true\"\n                  />\n                </span>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      </DefaultCardWrapperComponent>\n    )\n  },\n)\n\ntype DefaultCardWrapperComponentProps = React.PropsWithChildren<{\n  className?: string\n  style?: React.CSSProperties\n}>\n\nfunction DefaultCardWrapperComponent({className, children, style}: DefaultCardWrapperComponentProps) {\n  return (\n    <div className={clsx(styles['Card__outer'], className)} style={style}>\n      {children}\n    </div>\n  )\n}\n\nfunction getRenderableLeadingVisual(leadingVisual?: CardLeadingVisual) {\n  if (!leadingVisual) {\n    return null\n  }\n\n  if (typeof leadingVisual === 'function') {\n    return React.createElement(leadingVisual, {className: styles['Card__leadingVisualItem']})\n  }\n\n  if (React.isValidElement<{className?: string}>(leadingVisual)) {\n    return React.cloneElement(leadingVisual, {\n      className: clsx(styles['Card__leadingVisualItem'], leadingVisual.props.className),\n    })\n  }\n\n  return null\n}\n\nexport type CardImageProps = {\n  position?: 'block-start' | 'block-end'\n  padding?: CardImagePadding\n} & ImageProps\n\nfunction CardImage({className, position = 'block-start', padding = 'default', ...rest}: CardImageProps) {\n  return (\n    <div\n      className={clsx(\n        styles.Card__image,\n        styles[`Card__image--position-${position}`],\n        padding === 'none' && styles['Card__image--padding-none'],\n      )}\n    >\n      <Image className={className} {...rest} />\n    </div>\n  )\n}\n\ntype CardIconProps = IconProps\n\nconst CardIcon = ({className, hasBackground = true, ...props}: IconProps) => (\n  <Icon className={clsx(styles.Card__icon, className)} hasBackground={hasBackground} {...props} />\n)\n\ntype CardTokensProps = BaseProps<HTMLDivElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  position?: CardTokenPosition\n}\n\nconst CardTokens = forwardRef<HTMLDivElement, CardTokensProps>(\n  ({children, className, position = 'block-start', ...rest}, ref) => {\n    return (\n      <div\n        className={clsx(\n          styles.Card__tokens,\n          position === 'block-end' && styles['Card__tokens--position-block-end'],\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\ntype CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> &\n  Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {\n    children: React.ReactNode | React.ReactNode[]\n    variant?: CardLabelVariant\n  }\n\nconst CardLabel = forwardRef<HTMLSpanElement, CardLabelProps>(\n  ({children, variant = defaultCardLabelVariant, className, ...rest}, ref) => {\n    if (variant === 'accent-text') {\n      return (\n        <EyebrowText ref={ref} className={clsx(styles.Card__label, className)} variant=\"accent\" {...rest}>\n          {children}\n        </EyebrowText>\n      )\n    }\n\n    return (\n      <Token\n        ref={ref as React.Ref<HTMLSpanElement | HTMLAnchorElement>}\n        className={clsx(styles.Card__label, className)}\n        {...rest}\n      >\n        {children}\n      </Token>\n    )\n  },\n)\n\ntype CardHeadingProps = BaseProps<HTMLHeadingElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  as?: Exclude<HeadingProps['as'], 'h1'>\n  href?: string\n} & Omit<HeadingProps, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> &\n  React.ComponentPropsWithoutRef<'a'>\n\nconst CardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n  ({children, as = 'h3', className, href, onMouseEnter, onMouseLeave, onBlur, onFocus, ...rest}, ref) => {\n    return (\n      <Heading size=\"6\" className={clsx(styles.Card__heading, className)} ref={ref} as={as} {...rest}>\n        <a\n          href={href}\n          className={clsx(styles.Card__link)}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onBlur={onBlur}\n          onFocus={onFocus}\n        >\n          {children}\n        </a>\n      </Heading>\n    )\n  },\n)\n\ntype CardDescriptionProps = BaseProps<HTMLParagraphElement> & {\n  children: React.ReactNode | React.ReactNode[]\n}\n\nconst CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({children, className, ...rest}, ref) => {\n    return (\n      <Text variant=\"muted\" ref={ref} size=\"200\" as=\"p\" className={clsx(styles.Card__description, className)} {...rest}>\n        {children}\n      </Text>\n    )\n  },\n)\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement(element) && element.type === componentType\n\nconst isCardImage = createComponentTypeGuard(CardImage)\nconst isCardIcon = createComponentTypeGuard(CardIcon)\nconst isCardLabel = createComponentTypeGuard(CardLabel)\nconst isCardTokens = createComponentTypeGuard(CardTokens)\nconst isCardHeading = createComponentTypeGuard(CardHeading)\nconst isCardDescription = createComponentTypeGuard(CardDescription)\n\n/**\n * Card component:\n * @see https://primer.style/brand/components/Card\n */\nexport const Card = Object.assign(CardRoot, {\n  Image: CardImage,\n  Icon: CardIcon,\n  Label: CardLabel,\n  Tokens: CardTokens,\n  Heading: CardHeading,\n  Description: CardDescription,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA0BA,IAAa,IAAe,CAAC,WAAW,SAAS,GACpC,IAAkB;CAAC;CAAQ;CAAS;AAAM,GAC1C,IAAuB;CAAC;CAAW;CAAU;AAAM,GACnD,IAAqB,CAAC,eAAe,WAAW,GAChD,IAAoB,CAAC,SAAS,aAAa,GAC3C,IAA0B,CAAC,WAAW,MAAM,GAE5C,IAAiB,GAEjB,IAAuB,EAAe,IACtC,IAAwB,EAAgB,IACxC,IAA0B,EAAkB,IAmEnD,IAAW,GAEb,EACE,WAAQ,SACR,iBACA,iBACA,YACA,WACA,UAAU,GACV,cACA,aAAU,cACV,gBAAa,GACb,sBAAmB,IACnB,eAAY,IACZ,SACA,eAAY,IACZ,kBACA,UACA,aAAU,WACV,oBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAuB,CAAgC,GACjE,IACJ,MAAoB,MAAY,aAAa,MAAe,UAAU,SAAS,YAE7E;CAEJ,AAKE,IALE,KAAkC,OACzB,OACF,EAAkB,CAA8B,IAC9C,EAA+B,MAAM,YAAY,OAEjD;CAGb,IAAM,EAAC,cAAW,aAAU,cAAW,yBAAsB,uBAAoB,gBAAa,uBAC5F,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,QAQ7B,GAAK,OACH,EAAc,CAAK,IACrB,EAAI,cAAc,EAAM,aAAa,GAAO,EAC1C,QACF,CAAC,IACQ,EAAY,CAAK,IAC1B,EAAI,YAAY,IACP,EAAW,CAAK,IACzB,EAAI,WAAW,IACN,EAAY,CAAK,IAC1B,EAAI,YAAY,IACP,EAAa,CAAK,IACvB,EAAM,MAAM,aAAa,cAC3B,EAAI,qBAAqB,IAEzB,EAAI,uBAAuB,IAEpB,EAAkB,CAAK,MAChC,EAAI,kBAAkB,IAGjB,IACN,CAAC,CAAC;CAEP,CAAA,QAAA,IAAA,aAA8B,iBAAA,QAAA,IAAA,aAA0C,WAAW,KAAiB,KAElG,QAAQ,KAAK,kGAAkG;CAGjH,IAAM,IAAwB,EAA2B,CAAa,GAChE,IAAmB,IAAwB,KAAA,IAAY,GACvD,IAAgB,IAAY,EAAU,MAAM,YAAY,gBAAgB,MACxE,IAAwB,EAAE,MAAU,YAAY,MAAe;CAErE,OACE,kBAAC,GAAD;EACS;EACP,WAAW,EACT,IAAY,EAAO,qBAAqB,EAAO,mBAC/C,EAAO,eAAe,IACxB;YAEA,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,MACP,KAAoB,EAAO,2BAC3B,KAAyB,EAAO,2BAChC,MAAe,WAAW,EAAO,2BACjC,KAAsB,EAAO,mCAC7B,MAAY,aAAa,EAAO,0BAChC,KAAa,EAAO,iBACpB,EAAO,yBAAyB,MAChC,KAAiB,EAAO,kBAAkB,MAC1C,CACF;GACO;GACP,KAAK;GACL,GAAI;aAfN;IAiBG,MAAkB,gBAAgB,IAAY;IAC9C,IAAwB,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAsB;IAA2B,CAAA,IAAI;IACpG;IACA;IACA;IACA;IACA;IACA;IACA,MAAkB,cAAc,IAAY;IAE5C,MAAe,SAqBZ,OApBF,kBAAC,OAAD;KAAK,WAAW,EAAK,EAAO,cAAc,MAAe,WAAW,EAAO,0BAA0B;eAArG,CACE,kBAAC,QAAD;MAAM,WAAW,EAAK,MAAe,WAAW,EAAO,qBAAqB;gBAC1E,kBAAC,GAAD;OAAM,IAAG;OAAO,MAAK;OAAM,WAAW,EAAK,EAAW,gBAAgB,EAAO,iBAAiB;iBAC3F;MACG,CAAA;KACF,CAAA,GACL,IACC,kBAAC,QAAD;MACE,WAAW,EACT,EAAO,kBACP,MAAe,WAAW,EAAO,8BACnC;gBAEA,kBAAC,GAAD;OACE,WAAW,EAAK,EAAW,eAAe,EAAO,wBAAwB;OACzE,eAAY;MACb,CAAA;KACG,CAAA,IACJ,IACD;;GAEJ;;CACsB,CAAA;AAEjC,CACF;AAOA,SAAS,EAA4B,EAAC,cAAW,aAAU,YAA0C;CACnG,OACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,aAAgB,CAAS;EAAU;EAC5D;CACE,CAAA;AAET;AAEA,SAAS,EAA2B,GAAmC;CAerE,OAdK,IAID,OAAO,KAAkB,aACpB,EAAM,cAAc,GAAe,EAAC,WAAW,EAAO,wBAA0B,CAAC,IAGtF,EAAM,eAAqC,CAAa,IACnD,EAAM,aAAa,GAAe,EACvC,WAAW,EAAK,EAAO,yBAA4B,EAAc,MAAM,SAAS,EAClF,CAAC,IAGI,OAbE;AAcX;AAOA,SAAS,EAAU,EAAC,cAAW,cAAW,eAAe,aAAU,WAAW,GAAG,KAAuB;CACtG,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,aACP,EAAO,yBAAyB,MAChC,MAAY,UAAU,EAAO,4BAC/B;YAEA,kBAAC,GAAD;GAAkB;GAAW,GAAI;EAAO,CAAA;CACrC,CAAA;AAET;AAIA,IAAM,KAAY,EAAC,cAAW,mBAAgB,IAAM,GAAG,QACrD,kBAAC,GAAD;CAAM,WAAW,EAAK,EAAO,YAAY,CAAS;CAAkB;CAAe,GAAI;AAAQ,CAAA,GAQ3F,IAAa,GAChB,EAAC,aAAU,cAAW,cAAW,eAAe,GAAG,KAAO,MAEvD,kBAAC,OAAD;CACE,WAAW,EACT,EAAO,cACP,MAAa,eAAe,EAAO,qCACnC,CACF;CACK;CACL,GAAI;CAEH;AACE,CAAA,CAGX,GAQM,IAAY,GACf,EAAC,aAAU,aAAU,GAAyB,cAAW,GAAG,KAAO,MAC9D,MAAY,gBAEZ,kBAAC,GAAD;CAAkB;CAAK,WAAW,EAAK,EAAO,aAAa,CAAS;CAAG,SAAQ;CAAS,GAAI;CACzF;AACU,CAAA,IAKf,kBAAC,GAAD;CACO;CACL,WAAW,EAAK,EAAO,aAAa,CAAS;CAC7C,GAAI;CAEH;AACI,CAAA,CAGb,GASM,IAAc,GACjB,EAAC,aAAU,QAAK,MAAM,cAAW,SAAM,iBAAc,iBAAc,WAAQ,YAAS,GAAG,KAAO,MAE3F,kBAAC,GAAD;CAAS,MAAK;CAAI,WAAW,EAAK,EAAO,eAAe,CAAS;CAAQ;CAAS;CAAI,GAAI;WACxF,kBAAC,KAAD;EACQ;EACN,WAAW,EAAK,EAAO,UAAU;EACnB;EACA;EACN;EACC;EAER;CACA,CAAA;AACI,CAAA,CAGf,GAMM,IAAkB,GACrB,EAAC,aAAU,cAAW,GAAG,KAAO,MAE7B,kBAAC,GAAD;CAAM,SAAQ;CAAa;CAAK,MAAK;CAAM,IAAG;CAAI,WAAW,EAAK,EAAO,mBAAmB,CAAS;CAAG,GAAI;CACzG;AACG,CAAA,CAGZ,GAEM,KACC,OACJ,MACC,EAAM,eAAe,CAAO,KAAK,EAAQ,SAAS,GAEhD,IAAc,EAAyB,CAAS,GAChD,IAAa,EAAyB,CAAQ,GAC9C,IAAc,EAAyB,CAAS,GAChD,IAAe,EAAyB,CAAU,GAClD,IAAgB,EAAyB,CAAW,GACpD,IAAoB,EAAyB,CAAe,GAMrD,IAAO,OAAO,OAAO,GAAU;CAC1C,OAAO;CACP,MAAM;CACN,OAAO;CACP,QAAQ;CACR,SAAS;CACT,aAAa;AACf,CAAC"}

package/esm/LogoSuite/LogoSuite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LogoSuite.d.ts","sourceRoot":"","sources":["../../src/LogoSuite/LogoSuite.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAC,KAAK,iBAAiB,EAAkE,MAAM,OAAO,CAAA;AAGpH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAU,YAAY,EAA2B,SAAS,EAAe,MAAM,KAAK,CAAA;AAG3F;;GAEG;AACH,OAAO,6GAA6G,CAAA;AACpH,OAAO,gGAAgG,CAAA;AAYvG,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,qBAAqB,CAAA;CACzD,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AA4EtC,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAC/D,YAAY,GAAG;IACb;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAiCH,MAAM,MAAM,yBAAyB,GAAG,SAAS,CAAC,oBAAoB,CAAC,GACrE,SAAS,GAAG;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAgDH,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAC9D;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C;;OAEG;IACH,GAAG,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAA;KACd,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GACjE,SAAS,CAAC,iBAAiB,CAAC,CAAA;CAC/B,CAAA;AAmJD;;;GAGG;AACH,eAAO,MAAM,SAAS,iFAjVnB,iBAAiB,CAAC,cAAc,CAAC;;;;;;;;;;;;;;kBA4GtB,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;CA0O/C,CAAA"}
+{"version":3,"file":"LogoSuite.d.ts","sourceRoot":"","sources":["../../src/LogoSuite/LogoSuite.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAC,KAAK,iBAAiB,EAAkE,MAAM,OAAO,CAAA;AAGpH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAU,YAAY,EAA2B,SAAS,EAAe,MAAM,KAAK,CAAA;AAG3F;;GAEG;AACH,OAAO,6GAA6G,CAAA;AACpH,OAAO,gGAAgG,CAAA;AAYvG,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,qBAAqB,CAAA;CACzD,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AA4EtC,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAC/D,YAAY,GAAG;IACb;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAiCH,MAAM,MAAM,yBAAyB,GAAG,SAAS,CAAC,oBAAoB,CAAC,GACrE,SAAS,GAAG;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAgDH,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAC9D;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C;;OAEG;IACH,GAAG,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAA;KACd,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GACjE,SAAS,CAAC,iBAAiB,CAAC,CAAA;CAC/B,CAAA;AAyID;;;GAGG;AACH,eAAO,MAAM,SAAS,iFAvUnB,iBAAiB,CAAC,cAAc,CAAC;;;;;;;;;;;;;;kBA4GtB,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;CAgO/C,CAAA"}

package/esm/LogoSuite/LogoSuite.js

@@ -67,27 +67,23 @@ var y = {
 		"aria-label": e ? "Pause animation" : "Play animation",
 		children: _(e ? s : c, {})
 	});
-}, w = d(({ className: t, children: r, gap: i = "default", marquee: a = !1, marqueeSpeed: s = "normal", variant: c = "muted", takeoverButton: d, ...m }, g) => {
-	let b = n(), [x, S] = h(() => a && !b && s !== "idle");
+}, w = d(({ className: t, children: r, gap: i = "default", marquee: a = !1, marqueeSpeed: s = "normal", variant: c = "muted", takeoverButton: d, ...f }, m) => {
+	let g = n(), [b, x] = h(() => a && !g && s !== "idle");
 	p(() => {
-		S(a && !b && s !== "idle");
+		x(a && !g && s !== "idle");
 	}, [
 		a,
-		b,
+		g,
 		s
 	]), a && d && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.");
-	let w = (e) => {
+	let S = (e) => {
 		let t = u.Children.toArray(e);
-		return t.length > 0 && t.every((e) => u.isValidElement(e) ? e.type === "a" || e.type === u.Fragment && w(e.props.children) : !1);
-	}, T = w(r), E = {
-		ref: g,
-		className: e(l.LogoSuite__logobar, l[`LogoSuite__logobar--variant-${c}`], l[`LogoSuite__logobar--gap-${i}`], T && l["LogoSuite__logobar--has-linked-logos"], t),
-		...m
-	}, [D, O] = h(!1), k = f(() => {
-		O(!0);
-	}, []), A = f((e) => {
-		e.currentTarget.contains(e.relatedTarget) || O(!1);
-	}, []), j = () => {
+		return t.length > 0 && t.every((e) => u.isValidElement(e) ? e.type === "a" || e.type === u.Fragment && S(e.props.children) : !1);
+	}, w = S(r), T = (e) => u.Children.map(e, (e) => u.isValidElement(e) ? e.type === u.Fragment ? u.cloneElement(e, { children: T(e.props.children) }) : u.cloneElement(e, { tabIndex: -1 }) : e), E = {
+		ref: m,
+		className: e(l.LogoSuite__logobar, l[`LogoSuite__logobar--variant-${c}`], l[`LogoSuite__logobar--gap-${i}`], w && l["LogoSuite__logobar--has-linked-logos"], t),
+		...f
+	}, D = () => {
 		if (!d) return null;
 		let { className: t, label: n, ref: r, ...i } = d;
 		return /* @__PURE__ */ _("div", {
@@ -102,27 +98,25 @@ var y = {
 		});
 	};
 	if (a) {
-		let { className: t, ...n } = E, i = !x || b;
+		let { className: t, ...n } = E, i = !b || g;
 		return /* @__PURE__ */ v("div", {
 			...n,
 			className: e(l["LogoSuite__logobar--has-marquee"], t, i && l["LogoSuite__logobar--paused"]),
 			children: [/* @__PURE__ */ v("div", {
-				className: e(l["LogoSuite__logobar-marquee"], D && l["LogoSuite__logobar-marquee--focused"]),
-				onFocus: k,
-				onBlur: A,
+				className: l["LogoSuite__logobar-marquee"],
 				children: [/* @__PURE__ */ _("div", {
 					className: e(l["LogoSuite__logobar-marqueeGroup"], l[`LogoSuite__logobar-marqueeGroup--speed-${s}`]),
 					"data-testid": y.marqueeGroup,
 					children: r
 				}), /* @__PURE__ */ _("div", {
-					inert: !0,
 					"aria-hidden": "true",
+					onPointerDown: (e) => e.preventDefault(),
 					className: e(l["LogoSuite__logobar-marqueeGroup"], l[`LogoSuite__logobar-marqueeGroup--speed-${s}`]),
-					children: r
+					children: T(r)
 				})]
 			}), /* @__PURE__ */ _(C, {
-				onPlayPause: S,
-				isPlaying: x
+				onPlayPause: x,
+				isPlaying: b
 			})]
 		});
 	}
@@ -131,7 +125,7 @@ var y = {
 		return /* @__PURE__ */ v("div", {
 			...n,
 			className: e(t, l["LogoSuite__logobar--has-takeover"]),
-			children: [r, j()]
+			children: [r, D()]
 		});
 	}
 	return /* @__PURE__ */ _("div", {