@primer/react 38.24.0 → 38.25.0-rc.3cd58f825

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @primer/react
 
+## 38.25.0
+
+### Minor Changes
+
+- [#7852](https://github.com/primer/react/pull/7852) [`5504680`](https://github.com/primer/react/commit/5504680614bacc2ce3eecaaa55d10887e6fb152d) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Card: Add `data-component` attributes to `Card` and its subcomponents (`Icon`, `Image`, `Heading`, `Description`, `Metadata`, `Menu`). Add an `as` prop (`'div' | 'section'`) so standalone Cards can render as a labelled region landmark; `as="section"` requires `aria-label` or `aria-labelledby`. `Card` now requires `children`. Also improves docs and stories.
+
+### Patch Changes
+
+- [#7843](https://github.com/primer/react/pull/7843) [`fc571fd`](https://github.com/primer/react/commit/fc571fd8c3899f19a1dd9e77b8a22f6528d776e2) Thanks [@joshblack](https://github.com/joshblack)! - Update useMergedRefs so that in React 18 no warning is emitted
+
 ## 38.24.0
 
 ### Minor Changes

package/dist/Card/{Card-cec366f8.css → Card-d8a02dd9.css}

@@ -1,2 +1,2 @@
-.prc-Card-Card-pYjuL{background-color:var(--bgColor-default,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);box-shadow:var(--shadow-resting-small,0 1px 1px 0 #1f23280a,0 1px 2px 0 #1f232808);display:grid;gap:var(--stack-gap-normal,1rem);grid-auto-rows:max-content auto;overflow:hidden;position:relative}.prc-Card-Card-pYjuL[data-border-radius=large]{border-radius:var(--borderRadius-large,.75rem)}.prc-Card-Card-pYjuL[data-border-radius=medium]{border-radius:var(--borderRadius-medium,.375rem)}.prc-Card-Card-pYjuL[data-padding=normal]{padding:var(--stack-padding-spacious,1.5rem)}.prc-Card-Card-pYjuL[data-padding=condensed]{padding:var(--stack-padding-condensed,.5rem)}.prc-Card-Card-pYjuL[data-padding=none]{padding:0}.prc-Card-CardHeader-P5Qbb{display:block;height:auto;width:100%}.prc-Card-CardHeaderEdgeToEdge-3yCqT{margin-left:calc(var(--stack-padding-spacious,1.5rem)*-1);margin-right:calc(var(--stack-padding-spacious,1.5rem)*-1);margin-top:calc(var(--stack-padding-spacious,1.5rem)*-1);width:calc(100% + var(--stack-padding-spacious,1.5rem)*2)}.prc-Card-CardImage-2M8DM{display:block;height:auto;width:100%}.prc-Card-CardIcon-mIMfj{align-items:center;background-color:var(--bgColor-muted,#f6f8fa);border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,#59636e);display:flex;height:var(--base-size-32,2rem);justify-content:center;width:var(--base-size-32,2rem)}.prc-Card-CardBody-W1o-l{display:grid;gap:var(--stack-gap-normal,1rem)}.prc-Card-CardContent-omZDS{display:grid;gap:var(--stack-gap-condensed,.5rem)}.prc-Card-CardHeading-3HXyS{color:var(--fgColor-default,#1f2328);font:var(--text-title-shorthand-small,600 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");margin:0}.prc-Card-CardDescription-MnJ3F{margin:0}.prc-Card-CardDescription-MnJ3F,.prc-Card-CardMetadataContainer-K-UlH{color:var(--fgColor-muted,#59636e);font:var(--text-body-shorthand-medium,400 .875rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji")}.prc-Card-CardMetadataContainer-K-UlH{align-items:center;display:flex;gap:var(--stack-gap-normal,1rem)}.prc-Card-CardMetadataItem-ellY9{align-items:center;display:flex;font:var(--text-body-shorthand-small,400 .75rem/1.625 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");gap:var(--stack-gap-condensed,.5rem)}.prc-Card-CardMenu-1b3uS{position:absolute;right:var(--base-size-16,1rem);top:var(--base-size-16,1rem);z-index:1}
-/*# sourceMappingURL=Card-cec366f8.css.map */
+.prc-Card-Card-pYjuL{background-color:var(--bgColor-default,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);box-shadow:var(--shadow-resting-small,0 1px 1px 0 #1f23280a,0 1px 2px 0 #1f232808);display:grid;gap:var(--stack-gap-normal,1rem);grid-auto-rows:max-content auto;overflow:hidden;position:relative}.prc-Card-Card-pYjuL[data-border-radius=large]{border-radius:var(--borderRadius-large,.75rem)}.prc-Card-Card-pYjuL[data-border-radius=medium]{border-radius:var(--borderRadius-medium,.375rem)}.prc-Card-Card-pYjuL[data-padding=normal]{padding:var(--stack-padding-spacious,1.5rem)}.prc-Card-Card-pYjuL[data-padding=condensed]{padding:var(--stack-padding-condensed,.5rem)}.prc-Card-Card-pYjuL[data-padding=none]{padding:0}.prc-Card-CardHeader-P5Qbb{display:block;height:auto;width:100%}.prc-Card-CardHeaderEdgeToEdge-3yCqT{margin-left:calc(var(--stack-padding-spacious,1.5rem)*-1);margin-right:calc(var(--stack-padding-spacious,1.5rem)*-1);margin-top:calc(var(--stack-padding-spacious,1.5rem)*-1);width:calc(100% + var(--stack-padding-spacious,1.5rem)*2)}.prc-Card-CardImage-2M8DM{display:block;height:auto;width:100%}.prc-Card-CardIcon-mIMfj{align-items:center;background-color:var(--bgColor-muted,#f6f8fa);border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-muted,#59636e);display:flex;height:var(--base-size-32,2rem);justify-content:center;width:var(--base-size-32,2rem)}.prc-Card-CardBody-W1o-l{display:grid;gap:var(--stack-gap-normal,1rem)}.prc-Card-CardContent-omZDS{display:grid;gap:var(--stack-gap-condensed,.5rem)}.prc-Card-CardHeading-3HXyS{color:var(--fgColor-default,#1f2328);font:var(--text-title-shorthand-small,600 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");margin:0}.prc-Card-CardDescription-MnJ3F{margin:0}.prc-Card-CardDescription-MnJ3F,.prc-Card-CardMetadataContainer-K-UlH{color:var(--fgColor-muted,#59636e);font:var(--text-body-shorthand-medium,400 .875rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji")}.prc-Card-CardMetadataContainer-K-UlH{align-items:center;display:flex;gap:var(--stack-gap-normal,1rem)}.prc-Card-CardMetadataItem-ellY9{align-items:center;display:flex;font:var(--text-body-shorthand-small,400 .75rem/1.625 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");gap:var(--stack-gap-condensed,.5rem)}.prc-Card-CardAction-VtI49{position:absolute;right:var(--base-size-16,1rem);top:var(--base-size-16,1rem);z-index:1}
+/*# sourceMappingURL=Card-d8a02dd9.css.map */

package/dist/Card/{Card-cec366f8.css.map → Card-d8a02dd9.css.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/Card/Card.module.css.js"],"names":[],"mappings":"AAAA,qBAOE,4CAAwC,CAFxC,gFAAgE,CAChE,kFAAuC,CALvC,YAAa,CAOb,gCAA4B,CAJ5B,+BAAgC,CADhC,eAAgB,CADhB,iBA6BF,CArBE,+CACE,8CACF,CAEA,gDACE,gDACF,CAEA,0CAEE,4CACF,CAEA,6CAEE,4CACF,CAEA,wCACE,SACF,CAGF,2BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,qCAIE,yDAAqD,CADrD,0DAAsD,CADtD,wDAAoD,CAGpD,yDAEF,CAEA,0BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,yBAEE,kBAAmB,CAKnB,6CAAsC,CADtC,gDAAyC,CAEzC,kCAA2B,CAP3B,YAAa,CAIb,+BAA2B,CAF3B,sBAAuB,CACvB,8BAKF,CAEA,yBACE,YAAa,CACb,gCACF,CAEA,4BACE,YAAa,CACb,oCACF,CAEA,4BAEE,oCAA6B,CAD7B,2KAAuC,CAEvC,QACF,CAEA,gCAGE,QACF,CAEA,sEAJE,kCAA2B,CAD3B,8KAWF,CANA,sCAEE,kBAAmB,CADnB,YAAa,CAEb,gCAGF,CAEA,iCAEE,kBAAmB,CADnB,YAAa,CAGb,8KAAsC,CADtC,oCAEF,CAEA,yBACE,iBAAkB,CAElB,8BAA0B,CAD1B,4BAAwB,CAExB,SACF","file":"Card-cec366f8.css","sourcesContent":[".Card {\n  display: grid;\n  position: relative;\n  overflow: hidden;\n  grid-auto-rows: max-content auto;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  box-shadow: var(--shadow-resting-small);\n  background-color: var(--bgColor-default);\n  gap: var(--stack-gap-normal);\n\n  &[data-border-radius='large'] {\n    border-radius: var(--borderRadius-large);\n  }\n\n  &[data-border-radius='medium'] {\n    border-radius: var(--borderRadius-medium);\n  }\n\n  &[data-padding='normal'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-spacious);\n  }\n\n  &[data-padding='condensed'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-condensed);\n  }\n\n  &[data-padding='none'] {\n    padding: 0;\n  }\n}\n\n.CardHeader {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n.CardHeaderEdgeToEdge {\n  /* stylelint-disable primer/spacing */\n  margin-top: calc(-1 * var(--stack-padding-spacious));\n  margin-right: calc(-1 * var(--stack-padding-spacious));\n  margin-left: calc(-1 * var(--stack-padding-spacious));\n  width: calc(100% + 2 * var(--stack-padding-spacious));\n  /* stylelint-enable primer/spacing */\n}\n\n.CardImage {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n.CardIcon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n  border-radius: var(--borderRadius-medium);\n  background-color: var(--bgColor-muted);\n  color: var(--fgColor-muted);\n}\n\n.CardBody {\n  display: grid;\n  gap: var(--stack-gap-normal);\n}\n\n.CardContent {\n  display: grid;\n  gap: var(--stack-gap-condensed);\n}\n\n.CardHeading {\n  font: var(--text-title-shorthand-small);\n  color: var(--fgColor-default);\n  margin: 0;\n}\n\n.CardDescription {\n  font: var(--text-body-shorthand-medium);\n  color: var(--fgColor-muted);\n  margin: 0;\n}\n\n.CardMetadataContainer {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-normal);\n  font: var(--text-body-shorthand-medium);\n  color: var(--fgColor-muted);\n}\n\n.CardMetadataItem {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n  font: var(--text-body-shorthand-small);\n}\n\n.CardMenu {\n  position: absolute;\n  top: var(--base-size-16);\n  right: var(--base-size-16);\n  z-index: 1;\n}\n"]}
+{"version":3,"sources":["../src/Card/Card.module.css.js"],"names":[],"mappings":"AAAA,qBAOE,4CAAwC,CAFxC,gFAAgE,CAChE,kFAAuC,CALvC,YAAa,CAOb,gCAA4B,CAJ5B,+BAAgC,CADhC,eAAgB,CADhB,iBA6BF,CArBE,+CACE,8CACF,CAEA,gDACE,gDACF,CAEA,0CAEE,4CACF,CAEA,6CAEE,4CACF,CAEA,wCACE,SACF,CAGF,2BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,qCAIE,yDAAqD,CADrD,0DAAsD,CADtD,wDAAoD,CAGpD,yDAEF,CAEA,0BACE,aAAc,CAEd,WAAY,CADZ,UAEF,CAEA,yBAEE,kBAAmB,CAKnB,6CAAsC,CADtC,gDAAyC,CAEzC,kCAA2B,CAP3B,YAAa,CAIb,+BAA2B,CAF3B,sBAAuB,CACvB,8BAKF,CAEA,yBACE,YAAa,CACb,gCACF,CAEA,4BACE,YAAa,CACb,oCACF,CAEA,4BAEE,oCAA6B,CAD7B,2KAAuC,CAEvC,QACF,CAEA,gCAGE,QACF,CAEA,sEAJE,kCAA2B,CAD3B,8KAWF,CANA,sCAEE,kBAAmB,CADnB,YAAa,CAEb,gCAGF,CAEA,iCAEE,kBAAmB,CADnB,YAAa,CAGb,8KAAsC,CADtC,oCAEF,CAEA,2BACE,iBAAkB,CAElB,8BAA0B,CAD1B,4BAAwB,CAExB,SACF","file":"Card-d8a02dd9.css","sourcesContent":[".Card {\n  display: grid;\n  position: relative;\n  overflow: hidden;\n  grid-auto-rows: max-content auto;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  box-shadow: var(--shadow-resting-small);\n  background-color: var(--bgColor-default);\n  gap: var(--stack-gap-normal);\n\n  &[data-border-radius='large'] {\n    border-radius: var(--borderRadius-large);\n  }\n\n  &[data-border-radius='medium'] {\n    border-radius: var(--borderRadius-medium);\n  }\n\n  &[data-padding='normal'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-spacious);\n  }\n\n  &[data-padding='condensed'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-condensed);\n  }\n\n  &[data-padding='none'] {\n    padding: 0;\n  }\n}\n\n.CardHeader {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n.CardHeaderEdgeToEdge {\n  /* stylelint-disable primer/spacing */\n  margin-top: calc(-1 * var(--stack-padding-spacious));\n  margin-right: calc(-1 * var(--stack-padding-spacious));\n  margin-left: calc(-1 * var(--stack-padding-spacious));\n  width: calc(100% + 2 * var(--stack-padding-spacious));\n  /* stylelint-enable primer/spacing */\n}\n\n.CardImage {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n.CardIcon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n  border-radius: var(--borderRadius-medium);\n  background-color: var(--bgColor-muted);\n  color: var(--fgColor-muted);\n}\n\n.CardBody {\n  display: grid;\n  gap: var(--stack-gap-normal);\n}\n\n.CardContent {\n  display: grid;\n  gap: var(--stack-gap-condensed);\n}\n\n.CardHeading {\n  font: var(--text-title-shorthand-small);\n  color: var(--fgColor-default);\n  margin: 0;\n}\n\n.CardDescription {\n  font: var(--text-body-shorthand-medium);\n  color: var(--fgColor-muted);\n  margin: 0;\n}\n\n.CardMetadataContainer {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-normal);\n  font: var(--text-body-shorthand-medium);\n  color: var(--fgColor-muted);\n}\n\n.CardMetadataItem {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n  font: var(--text-body-shorthand-small);\n}\n\n.CardAction {\n  position: absolute;\n  top: var(--base-size-16);\n  right: var(--base-size-16);\n  z-index: 1;\n}\n"]}

package/dist/Card/Card.d.ts

@@ -1,21 +1,19 @@
 import React from 'react';
-export type CardProps = React.ComponentPropsWithoutRef<'div'> & {
-    /**
-     * Provide an optional className to add to the outermost element rendered by
-     * the Card
-     */
+import { type PolymorphicProps } from '../utils/modern-polymorphic';
+type CardAs = 'div' | 'section';
+export type CardProps<As extends CardAs = 'div'> = PolymorphicProps<As, 'div', {
+    /** Optional className for the root element. */
     className?: string;
-    /**
-     * Controls the internal padding of the Card.
-     * @default 'normal'
-     */
+    /** Internal padding. @default 'normal' */
     padding?: 'none' | 'condensed' | 'normal';
+    /** Border radius. @default 'large' */
+    borderRadius?: 'medium' | 'large';
     /**
-     * Controls the border radius of the Card.
-     * @default 'large'
+     * Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
+     * `Card.Description`, `Card.Metadata`) or custom content.
      */
-    borderRadius?: 'medium' | 'large';
-};
+    children: React.ReactNode;
+}>;
 type HeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 type HeadingProps = React.ComponentPropsWithoutRef<'h3'> & {
     /**
@@ -25,6 +23,9 @@ type HeadingProps = React.ComponentPropsWithoutRef<'h3'> & {
     children: React.ReactNode;
 };
 type DescriptionProps = React.ComponentPropsWithoutRef<'p'> & {
+    /**
+     * Card description. Rendered as a `<p>`, so keep it to flowing text.
+     */
     children: React.ReactNode;
 };
 type IconProps = {
@@ -48,37 +49,58 @@ type ImageProps = React.ComponentPropsWithoutRef<'img'> & {
      */
     alt?: string;
 };
-type MenuProps = {
+type ActionProps = {
+    /** Interactive control for the top-right corner of the card. */
     children: React.ReactNode;
 };
 type MetadataProps = React.ComponentPropsWithoutRef<'div'> & {
-    children: React.ReactNode;
-};
-declare const CardImpl: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
-     * Provide an optional className to add to the outermost element rendered by
-     * the Card
+     * Metadata row at the bottom of the card. Any content works: text, icons,
+     * a `Label`, an `Octicon`.
      */
+    children: React.ReactNode;
+};
+declare const CardImpl: <As extends CardAs>(props: (React.ComponentPropsWithRef<React.ElementType extends As ? "div" : As> & {
+    /** Optional className for the root element. */
     className?: string;
+    /** Internal padding. @default 'normal' */
+    padding?: "none" | "condensed" | "normal";
+    /** Border radius. @default 'large' */
+    borderRadius?: "medium" | "large";
     /**
-     * Controls the internal padding of the Card.
-     * @default 'normal'
+     * Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
+     * `Card.Description`, `Card.Metadata`) or custom content.
      */
+    children: React.ReactNode;
+} extends infer T ? T extends React.ComponentPropsWithRef<React.ElementType extends As ? "div" : As> & {
+    /** Optional className for the root element. */
+    className?: string;
+    /** Internal padding. @default 'normal' */
     padding?: "none" | "condensed" | "normal";
+    /** Border radius. @default 'large' */
+    borderRadius?: "medium" | "large";
     /**
-     * Controls the border radius of the Card.
-     * @default 'large'
+     * Card contents. Provide either `Card.*` subcomponents (e.g. `Card.Heading`,
+     * `Card.Description`, `Card.Metadata`) or custom content.
      */
-    borderRadius?: "medium" | "large";
-} & React.RefAttributes<HTMLDivElement>>;
-declare const CardIcon: {
-    ({ icon: IconComponent, "aria-label": ariaLabel, className }: IconProps): React.JSX.Element;
-    displayName: string;
-};
-declare const CardImage: {
-    ({ src, alt, className, ...rest }: ImageProps): React.JSX.Element;
-    displayName: string;
-};
+    children: React.ReactNode;
+} ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
+    as?: As | undefined;
+} & React.RefAttributes<any>) => React.ReactNode;
+declare function CardIcon({ icon: IconComponent, 'aria-label': ariaLabel, className }: IconProps): React.JSX.Element;
+declare namespace CardIcon {
+    var displayName: string;
+}
+declare function CardImage({ src, alt, className, ...rest }: ImageProps): React.JSX.Element;
+declare namespace CardImage {
+    var displayName: string;
+}
+/**
+ * Heading shown at the top of a Card.
+ *
+ * When the parent Card uses `as="section"`, the heading's `id` is
+ * automatically wired to the section's `aria-labelledby`.
+ */
 declare const CardHeading: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     /**
      * The heading level to render. Defaults to 'h3'.
@@ -87,20 +109,34 @@ declare const CardHeading: React.ForwardRefExoticComponent<Omit<React.DetailedHT
     children: React.ReactNode;
 } & React.RefAttributes<HTMLHeadingElement>>;
 declare const CardDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    /**
+     * Card description. Rendered as a `<p>`, so keep it to flowing text.
+     */
     children: React.ReactNode;
 } & React.RefAttributes<HTMLParagraphElement>>;
-declare const CardMenu: {
-    ({ children }: MenuProps): React.JSX.Element;
-    displayName: string;
-};
+/**
+ * Top-right slot for a single interactive control.
+ *
+ * Give the control a label that names the card (e.g. `"More options for
+ * Project Alpha"`, not just `"More options"`) so users can tell which card
+ * the action applies to when several cards are visible.
+ */
+declare function CardAction({ children }: ActionProps): React.JSX.Element;
+declare namespace CardAction {
+    var displayName: string;
+}
 declare const CardMetadata: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Metadata row at the bottom of the card. Any content works: text, icons,
+     * a `Label`, an `Octicon`.
+     */
     children: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
-export { CardImpl, CardIcon, CardImage, CardHeading, CardDescription, CardMenu, CardMetadata };
+export { CardImpl, CardIcon, CardImage, CardHeading, CardDescription, CardAction, CardMetadata };
 export type { HeadingProps as CardHeadingProps };
 export type { DescriptionProps as CardDescriptionProps };
 export type { IconProps as CardIconProps };
 export type { ImageProps as CardImageProps };
-export type { MenuProps as CardMenuProps };
+export type { ActionProps as CardActionProps };
 export type { MetadataProps as CardMetadataProps };
 //# sourceMappingURL=Card.d.ts.map

package/dist/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC9D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;IAEzC;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAClC,CAAA;AAED,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEpD,KAAK,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,GAAG;IACzD;;OAEG;IACH,EAAE,CAAC,EAAE,YAAY,CAAA;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAAG;IAC5D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,KAAK,SAAS,GAAG;IACf;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,WAAW,CAAA;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACxD;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,KAAK,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,QAAA,MAAM,QAAQ;IAhEZ;;;OAGG;gBACS,MAAM;IAElB;;;OAGG;cACO,MAAM,GAAG,WAAW,GAAG,QAAQ;IAEzC;;;OAGG;mBACY,QAAQ,GAAG,OAAO;wCAoHjC,CAAA;AAEF,QAAA,MAAM,QAAQ;kEAA+D,SAAS;;CAWrF,CAAA;AAID,QAAA,MAAM,SAAS;uCAAyC,UAAU;;CAEjE,CAAA;AAID,QAAA,MAAM,WAAW;IArIf;;OAEG;SACE,YAAY;cACP,KAAK,CAAC,SAAS;4CA0IzB,CAAA;AAEF,QAAA,MAAM,eAAe;cAxIT,KAAK,CAAC,SAAS;8CAiJzB,CAAA;AAEF,QAAA,MAAM,QAAQ;mBAAgB,SAAS;;CAEtC,CAAA;AAID,QAAA,MAAM,YAAY;cA1HN,KAAK,CAAC,SAAS;wCAmIzB,CAAA;AAEF,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,EAAC,CAAA;AAC5F,YAAY,EAAC,YAAY,IAAI,gBAAgB,EAAC,CAAA;AAC9C,YAAY,EAAC,gBAAgB,IAAI,oBAAoB,EAAC,CAAA;AACtD,YAAY,EAAC,SAAS,IAAI,aAAa,EAAC,CAAA;AACxC,YAAY,EAAC,UAAU,IAAI,cAAc,EAAC,CAAA;AAC1C,YAAY,EAAC,SAAS,IAAI,aAAa,EAAC,CAAA;AACxC,YAAY,EAAC,aAAa,IAAI,iBAAiB,EAAC,CAAA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/dist/Card/Card.js

@@ -1,43 +1,39 @@
 import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext, createContext } from 'react';
 import classes from './Card.module.css.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { fixedForwardRef } from '../utils/modern-polymorphic.js';
+import { useId } from '../hooks/useId.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
-  const $ = c(53);
-  let children;
-  let className;
-  let rest;
-  let t1;
-  let t2;
-  if ($[0] !== t0) {
-    ({
-      children,
-      className,
-      padding: t1,
-      borderRadius: t2,
-      ...rest
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = className;
-    $[3] = rest;
-    $[4] = t1;
-    $[5] = t2;
-  } else {
-    children = $[1];
-    className = $[2];
-    rest = $[3];
-    t1 = $[4];
-    t2 = $[5];
+const CardContext = /*#__PURE__*/createContext({});
+function CardComponent(props, ref) {
+  const $ = c(67);
+  const {
+    children,
+    className,
+    padding: t0,
+    borderRadius: t1,
+    as: t2,
+    ...rest
+  } = props;
+  const padding = t0 === undefined ? "normal" : t0;
+  const borderRadius = t1 === undefined ? "large" : t1;
+  const as = t2 === undefined ? "div" : t2;
+  const Component = as;
+  const generatedId = useId();
+  const titleId = as === "section" ? generatedId : undefined;
+  if (as === "section" && !("aria-label" in props) && !("aria-labelledby" in props)) {
+    rest["aria-labelledby"] = titleId;
   }
-  const padding = t1 === undefined ? "normal" : t1;
-  const borderRadius = t2 === undefined ? "large" : t2;
+  let T0;
+  let T1;
   let description;
   let heading;
   let menu;
   let metadata;
+  let t10;
+  let t11;
   let t3;
   let t4;
   let t5;
@@ -45,8 +41,8 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
   let t7;
   let t8;
   let t9;
-  if ($[6] !== borderRadius || $[7] !== children || $[8] !== className || $[9] !== padding || $[10] !== ref || $[11] !== rest) {
-    t9 = Symbol.for("react.early_return_sentinel");
+  if ($[0] !== Component || $[1] !== borderRadius || $[2] !== children || $[3] !== className || $[4] !== padding || $[5] !== ref || $[6] !== rest || $[7] !== titleId) {
+    t11 = Symbol.for("react.early_return_sentinel");
     bb0: {
       let icon = null;
       let image = null;
@@ -74,7 +70,7 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
                 if (child.type === CardMetadata) {
                   metadata = child;
                 } else {
-                  if (child.type === CardMenu) {
+                  if (child.type === CardAction) {
                     menu = child;
                   }
                 }
@@ -84,64 +80,111 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
         }
       }
       const hasSlotChildren = icon || image || heading || description || metadata || menu;
+      const isEmpty = !hasSlotChildren && childArray.length === 0;
+      if (isEmpty) {
+        t11 = null;
+        break bb0;
+      }
       if (!hasSlotChildren) {
-        let t10;
-        if ($[23] !== className) {
-          t10 = clsx(classes.Card, className);
-          $[23] = className;
-          $[24] = t10;
+        let t12;
+        if ($[23] !== titleId) {
+          t12 = {
+            titleId
+          };
+          $[23] = titleId;
+          $[24] = t12;
         } else {
-          t10 = $[24];
+          t12 = $[24];
         }
-        let t11;
-        if ($[25] !== borderRadius || $[26] !== children || $[27] !== padding || $[28] !== ref || $[29] !== rest || $[30] !== t10) {
-          t11 = /*#__PURE__*/jsx("div", {
+        let t13;
+        if ($[25] !== className) {
+          t13 = clsx(classes.Card, className);
+          $[25] = className;
+          $[26] = t13;
+        } else {
+          t13 = $[26];
+        }
+        let t14;
+        if ($[27] !== Component || $[28] !== borderRadius || $[29] !== children || $[30] !== padding || $[31] !== ref || $[32] !== rest || $[33] !== t13) {
+          t14 = /*#__PURE__*/jsx(Component, {
             ref: ref,
-            className: t10,
+            className: t13,
+            "data-component": "Card",
             "data-padding": padding,
             "data-border-radius": borderRadius,
             ...rest,
             children: children
           });
-          $[25] = borderRadius;
-          $[26] = children;
-          $[27] = padding;
-          $[28] = ref;
-          $[29] = rest;
-          $[30] = t10;
-          $[31] = t11;
+          $[27] = Component;
+          $[28] = borderRadius;
+          $[29] = children;
+          $[30] = padding;
+          $[31] = ref;
+          $[32] = rest;
+          $[33] = t13;
+          $[34] = t14;
         } else {
-          t11 = $[31];
+          t14 = $[34];
         }
-        t9 = t11;
+        let t15;
+        if ($[35] !== t12 || $[36] !== t14) {
+          t15 = /*#__PURE__*/jsx(CardContext.Provider, {
+            value: t12,
+            children: t14
+          });
+          $[35] = t12;
+          $[36] = t14;
+          $[37] = t15;
+        } else {
+          t15 = $[37];
+        }
+        t11 = t15;
         break bb0;
       }
+      T1 = CardContext.Provider;
+      if ($[38] !== titleId) {
+        t10 = {
+          titleId
+        };
+        $[38] = titleId;
+        $[39] = t10;
+      } else {
+        t10 = $[39];
+      }
+      T0 = Component;
       t3 = ref;
-      if ($[32] !== className) {
+      if ($[40] !== className) {
         t4 = clsx(classes.Card, className);
-        $[32] = className;
-        $[33] = t4;
+        $[40] = className;
+        $[41] = t4;
       } else {
-        t4 = $[33];
+        t4 = $[41];
       }
-      t5 = padding;
-      t6 = borderRadius;
-      t7 = rest;
-      t8 = (image || icon) && /*#__PURE__*/jsx("div", {
+      t5 = "Card";
+      t6 = padding;
+      t7 = borderRadius;
+      t8 = rest;
+      t9 = (image || icon) && /*#__PURE__*/jsx("div", {
         className: clsx(classes.CardHeader, image && classes.CardHeaderEdgeToEdge),
         children: image || icon
       });
     }
-    $[6] = borderRadius;
-    $[7] = children;
-    $[8] = className;
-    $[9] = padding;
-    $[10] = ref;
-    $[11] = rest;
-    $[12] = description;
-    $[13] = heading;
-    $[14] = menu;
-    $[15] = metadata;
+    $[0] = Component;
+    $[1] = borderRadius;
+    $[2] = children;
+    $[3] = className;
+    $[4] = padding;
+    $[5] = ref;
+    $[6] = rest;
+    $[7] = titleId;
+    $[8] = T0;
+    $[9] = T1;
+    $[10] = description;
+    $[11] = heading;
+    $[12] = menu;
+    $[13] = metadata;
+    $[14] = t10;
+    $[15] = t11;
     $[16] = t3;
     $[17] = t4;
     $[18] = t5;
@@ -150,10 +193,14 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
     $[21] = t8;
     $[22] = t9;
   } else {
-    description = $[12];
-    heading = $[13];
-    menu = $[14];
-    metadata = $[15];
+    T0 = $[8];
+    T1 = $[9];
+    description = $[10];
+    heading = $[11];
+    menu = $[12];
+    metadata = $[13];
+    t10 = $[14];
+    t11 = $[15];
     t3 = $[16];
     t4 = $[17];
     t5 = $[18];
@@ -162,80 +209,98 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
     t8 = $[21];
     t9 = $[22];
   }
-  if (t9 !== Symbol.for("react.early_return_sentinel")) {
-    return t9;
+  if (t11 !== Symbol.for("react.early_return_sentinel")) {
+    return t11;
   }
-  let t10;
-  if ($[34] !== description || $[35] !== heading) {
-    t10 = /*#__PURE__*/jsxs("div", {
+  let t12;
+  if ($[42] !== description || $[43] !== heading) {
+    t12 = /*#__PURE__*/jsxs("div", {
       className: classes.CardContent,
       children: [heading, description]
     });
-    $[34] = description;
-    $[35] = heading;
-    $[36] = t10;
+    $[42] = description;
+    $[43] = heading;
+    $[44] = t12;
   } else {
-    t10 = $[36];
+    t12 = $[44];
   }
-  let t11;
-  if ($[37] !== metadata) {
-    t11 = metadata ? /*#__PURE__*/jsx("div", {
+  let t13;
+  if ($[45] !== metadata) {
+    t13 = metadata ? /*#__PURE__*/jsx("div", {
       className: classes.CardMetadataContainer,
       children: metadata
     }) : null;
-    $[37] = metadata;
-    $[38] = t11;
+    $[45] = metadata;
+    $[46] = t13;
   } else {
-    t11 = $[38];
+    t13 = $[46];
   }
-  let t12;
-  if ($[39] !== t10 || $[40] !== t11) {
-    t12 = /*#__PURE__*/jsxs("div", {
+  let t14;
+  if ($[47] !== t12 || $[48] !== t13) {
+    t14 = /*#__PURE__*/jsxs("div", {
       className: classes.CardBody,
-      children: [t10, t11]
+      children: [t12, t13]
     });
-    $[39] = t10;
-    $[40] = t11;
-    $[41] = t12;
+    $[47] = t12;
+    $[48] = t13;
+    $[49] = t14;
   } else {
-    t12 = $[41];
+    t14 = $[49];
   }
-  let t13;
-  if ($[42] !== menu) {
-    t13 = menu ? /*#__PURE__*/jsx("div", {
-      className: classes.CardMenu,
+  let t15;
+  if ($[50] !== menu) {
+    t15 = menu ? /*#__PURE__*/jsx("div", {
+      className: classes.CardAction,
       children: menu
     }) : null;
-    $[42] = menu;
-    $[43] = t13;
+    $[50] = menu;
+    $[51] = t15;
   } else {
-    t13 = $[43];
+    t15 = $[51];
   }
-  let t14;
-  if ($[44] !== t12 || $[45] !== t13 || $[46] !== t3 || $[47] !== t4 || $[48] !== t5 || $[49] !== t6 || $[50] !== t7 || $[51] !== t8) {
-    t14 = /*#__PURE__*/jsxs("div", {
+  let t16;
+  if ($[52] !== T0 || $[53] !== t14 || $[54] !== t15 || $[55] !== t3 || $[56] !== t4 || $[57] !== t5 || $[58] !== t6 || $[59] !== t7 || $[60] !== t8 || $[61] !== t9) {
+    t16 = /*#__PURE__*/jsxs(T0, {
       ref: t3,
       className: t4,
-      "data-padding": t5,
-      "data-border-radius": t6,
-      ...t7,
-      children: [t8, t12, t13]
+      "data-component": t5,
+      "data-padding": t6,
+      "data-border-radius": t7,
+      ...t8,
+      children: [t9, t14, t15]
     });
-    $[44] = t12;
-    $[45] = t13;
-    $[46] = t3;
-    $[47] = t4;
-    $[48] = t5;
-    $[49] = t6;
-    $[50] = t7;
-    $[51] = t8;
-    $[52] = t14;
+    $[52] = T0;
+    $[53] = t14;
+    $[54] = t15;
+    $[55] = t3;
+    $[56] = t4;
+    $[57] = t5;
+    $[58] = t6;
+    $[59] = t7;
+    $[60] = t8;
+    $[61] = t9;
+    $[62] = t16;
   } else {
-    t14 = $[52];
+    t16 = $[62];
   }
-  return t14;
-});
-const CardIcon = t0 => {
+  let t17;
+  if ($[63] !== T1 || $[64] !== t10 || $[65] !== t16) {
+    t17 = /*#__PURE__*/jsx(T1, {
+      value: t10,
+      children: t16
+    });
+    $[63] = T1;
+    $[64] = t10;
+    $[65] = t16;
+    $[66] = t17;
+  } else {
+    t17 = $[66];
+  }
+  return t17;
+}
+CardComponent.displayName = 'Card';
+const CardImpl = fixedForwardRef(CardComponent);
+function CardIcon(t0) {
   const $ = c(10);
   const {
     icon: IconComponent,
@@ -264,6 +329,7 @@ const CardIcon = t0 => {
   if ($[4] !== ariaLabel || $[5] !== t1 || $[6] !== t2 || $[7] !== t3 || $[8] !== t4) {
     t5 = /*#__PURE__*/jsx("span", {
       className: t1,
+      "data-component": "Card.Icon",
       role: t2,
       "aria-label": ariaLabel,
       "aria-hidden": t3,
@@ -279,9 +345,9 @@ const CardIcon = t0 => {
     t5 = $[9];
   }
   return t5;
-};
+}
 CardIcon.displayName = 'Card.Icon';
-const CardImage = t0 => {
+function CardImage(t0) {
   const $ = c(12);
   let className;
   let rest;
@@ -317,10 +383,11 @@ const CardImage = t0 => {
   let t3;
   if ($[7] !== alt || $[8] !== rest || $[9] !== src || $[10] !== t2) {
     t3 = /*#__PURE__*/jsx("img", {
+      ...rest,
       src: src,
       alt: alt,
       className: t2,
-      ...rest
+      "data-component": "Card.Image"
     });
     $[7] = alt;
     $[8] = rest;
@@ -331,12 +398,21 @@ const CardImage = t0 => {
     t3 = $[11];
   }
   return t3;
-};
+}
 CardImage.displayName = 'Card.Image';
+
+/**
+ * Heading shown at the top of a Card.
+ *
+ * When the parent Card uses `as="section"`, the heading's `id` is
+ * automatically wired to the section's `aria-labelledby`.
+ */
 const CardHeading = /*#__PURE__*/forwardRef(function CardHeading(t0, ref) {
-  const $ = c(13);
+  var _id;
+  const $ = c(15);
   let children;
   let className;
+  let id;
   let rest;
   let t1;
   if ($[0] !== t0) {
@@ -344,47 +420,58 @@ const CardHeading = /*#__PURE__*/forwardRef(function CardHeading(t0, ref) {
       as: t1,
       children,
       className,
+      id,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
     $[2] = className;
-    $[3] = rest;
-    $[4] = t1;
+    $[3] = id;
+    $[4] = rest;
+    $[5] = t1;
   } else {
     children = $[1];
     className = $[2];
-    rest = $[3];
-    t1 = $[4];
+    id = $[3];
+    rest = $[4];
+    t1 = $[5];
   }
   const Component = t1 === undefined ? "h3" : t1;
-  let t2;
-  if ($[5] !== className) {
-    t2 = clsx(classes.CardHeading, className);
-    $[5] = className;
-    $[6] = t2;
+  const {
+    titleId
+  } = useContext(CardContext);
+  const t2 = (_id = id) !== null && _id !== void 0 ? _id : titleId;
+  let t3;
+  if ($[6] !== className) {
+    t3 = clsx(classes.CardHeading, className);
+    $[6] = className;
+    $[7] = t3;
   } else {
-    t2 = $[6];
+    t3 = $[7];
   }
-  let t3;
-  if ($[7] !== Component || $[8] !== children || $[9] !== ref || $[10] !== rest || $[11] !== t2) {
-    t3 = /*#__PURE__*/jsx(Component, {
-      ref: ref,
-      className: t2,
+  let t4;
+  if ($[8] !== Component || $[9] !== children || $[10] !== ref || $[11] !== rest || $[12] !== t2 || $[13] !== t3) {
+    t4 = /*#__PURE__*/jsx(Component, {
       ...rest,
+      ref: ref,
+      id: t2,
+      className: t3,
+      "data-component": "Card.Heading",
       children: children
     });
-    $[7] = Component;
-    $[8] = children;
-    $[9] = ref;
-    $[10] = rest;
-    $[11] = t2;
-    $[12] = t3;
+    $[8] = Component;
+    $[9] = children;
+    $[10] = ref;
+    $[11] = rest;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
   } else {
-    t3 = $[12];
+    t4 = $[14];
   }
-  return t3;
+  return t4;
 });
+CardHeading.displayName = 'Card.Heading';
 const CardDescription = /*#__PURE__*/forwardRef(function CardDescription(t0, ref) {
   const $ = c(11);
   let children;
@@ -416,9 +503,10 @@ const CardDescription = /*#__PURE__*/forwardRef(function CardDescription(t0, ref
   let t2;
   if ($[6] !== children || $[7] !== ref || $[8] !== rest || $[9] !== t1) {
     t2 = /*#__PURE__*/jsx("p", {
+      ...rest,
       ref: ref,
       className: t1,
-      ...rest,
+      "data-component": "Card.Description",
       children: children
     });
     $[6] = children;
@@ -431,14 +519,24 @@ const CardDescription = /*#__PURE__*/forwardRef(function CardDescription(t0, ref
   }
   return t2;
 });
-const CardMenu = t0 => {
+CardDescription.displayName = 'Card.Description';
+
+/**
+ * Top-right slot for a single interactive control.
+ *
+ * Give the control a label that names the card (e.g. `"More options for
+ * Project Alpha"`, not just `"More options"`) so users can tell which card
+ * the action applies to when several cards are visible.
+ */
+function CardAction(t0) {
   const $ = c(2);
   const {
     children
   } = t0;
   let t1;
   if ($[0] !== children) {
-    t1 = /*#__PURE__*/jsx(Fragment, {
+    t1 = /*#__PURE__*/jsx("div", {
+      "data-component": "Card.Action",
       children: children
     });
     $[0] = children;
@@ -447,8 +545,8 @@ const CardMenu = t0 => {
     t1 = $[1];
   }
   return t1;
-};
-CardMenu.displayName = 'Card.Menu';
+}
+CardAction.displayName = 'Card.Action';
 const CardMetadata = /*#__PURE__*/forwardRef(function CardMetadata(t0, ref) {
   const $ = c(11);
   let children;
@@ -480,9 +578,10 @@ const CardMetadata = /*#__PURE__*/forwardRef(function CardMetadata(t0, ref) {
   let t2;
   if ($[6] !== children || $[7] !== ref || $[8] !== rest || $[9] !== t1) {
     t2 = /*#__PURE__*/jsx("div", {
+      ...rest,
       ref: ref,
       className: t1,
-      ...rest,
+      "data-component": "Card.Metadata",
       children: children
     });
     $[6] = children;
@@ -495,5 +594,6 @@ const CardMetadata = /*#__PURE__*/forwardRef(function CardMetadata(t0, ref) {
   }
   return t2;
 });
+CardMetadata.displayName = 'Card.Metadata';
 
-export { CardDescription, CardHeading, CardIcon, CardImage, CardImpl, CardMenu, CardMetadata };
+export { CardAction, CardDescription, CardHeading, CardIcon, CardImage, CardImpl, CardMetadata };

package/dist/Card/Card.module.css.js

@@ -1,5 +1,5 @@
-import './Card-cec366f8.css';
+import './Card-d8a02dd9.css';
 
-var classes = {"Card":"prc-Card-Card-pYjuL","CardHeader":"prc-Card-CardHeader-P5Qbb","CardHeaderEdgeToEdge":"prc-Card-CardHeaderEdgeToEdge-3yCqT","CardImage":"prc-Card-CardImage-2M8DM","CardIcon":"prc-Card-CardIcon-mIMfj","CardBody":"prc-Card-CardBody-W1o-l","CardContent":"prc-Card-CardContent-omZDS","CardHeading":"prc-Card-CardHeading-3HXyS","CardDescription":"prc-Card-CardDescription-MnJ3F","CardMetadataContainer":"prc-Card-CardMetadataContainer-K-UlH","CardMetadataItem":"prc-Card-CardMetadataItem-ellY9","CardMenu":"prc-Card-CardMenu-1b3uS"};
+var classes = {"Card":"prc-Card-Card-pYjuL","CardHeader":"prc-Card-CardHeader-P5Qbb","CardHeaderEdgeToEdge":"prc-Card-CardHeaderEdgeToEdge-3yCqT","CardImage":"prc-Card-CardImage-2M8DM","CardIcon":"prc-Card-CardIcon-mIMfj","CardBody":"prc-Card-CardBody-W1o-l","CardContent":"prc-Card-CardContent-omZDS","CardHeading":"prc-Card-CardHeading-3HXyS","CardDescription":"prc-Card-CardDescription-MnJ3F","CardMetadataContainer":"prc-Card-CardMetadataContainer-K-UlH","CardMetadataItem":"prc-Card-CardMetadataItem-ellY9","CardAction":"prc-Card-CardAction-VtI49"};
 
 export { classes as default };

package/dist/Card/index.d.ts

@@ -1,17 +1,20 @@
-import type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardMenuProps, CardMetadataProps } from './Card';
-declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+import { CardIcon, CardImage, CardAction } from './Card';
+import type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardActionProps, CardMetadataProps } from './Card';
+declare const Card: (<As extends "div" | "section">(props: (import("react").ComponentPropsWithRef<import("react").ElementType extends As ? "div" : As> & {
     className?: string;
     padding?: "none" | "condensed" | "normal";
     borderRadius?: "medium" | "large";
-} & import("react").RefAttributes<HTMLDivElement>> & {
-    Icon: {
-        ({ icon: IconComponent, "aria-label": ariaLabel, className }: CardIconProps): import("react").JSX.Element;
-        displayName: string;
-    };
-    Image: {
-        ({ src, alt, className, ...rest }: CardImageProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    children: React.ReactNode;
+} extends infer T ? T extends import("react").ComponentPropsWithRef<import("react").ElementType extends As ? "div" : As> & {
+    className?: string;
+    padding?: "none" | "condensed" | "normal";
+    borderRadius?: "medium" | "large";
+    children: React.ReactNode;
+} ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
+    as?: As | undefined;
+} & import("react").RefAttributes<any>) => React.ReactNode) & {
+    Icon: typeof CardIcon;
+    Image: typeof CardImage;
     Heading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
         as?: "h2" | "h3" | "h4" | "h5" | "h6";
         children: React.ReactNode;
@@ -19,14 +22,11 @@ declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react
     Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         children: React.ReactNode;
     } & import("react").RefAttributes<HTMLParagraphElement>>;
-    Menu: {
-        ({ children }: CardMenuProps): import("react").JSX.Element;
-        displayName: string;
-    };
+    Action: typeof CardAction;
     Metadata: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         children: React.ReactNode;
     } & import("react").RefAttributes<HTMLDivElement>>;
 };
 export { Card };
-export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardMenuProps, CardMetadataProps, };
+export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardActionProps, CardMetadataProps, };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,aAAa,EACb,iBAAiB,EAClB,MAAM,QAAQ,CAAA;AAEf,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOR,CAAA;AAEF,OAAO,EAAC,IAAI,EAAC,CAAA;AACb,YAAY,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,aAAa,EACb,iBAAiB,GAClB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,QAAQ,EAAE,SAAS,EAAgC,UAAU,EAAe,MAAM,QAAQ,CAAA;AAC5G,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EAClB,MAAM,QAAQ,CAAA;AAEf,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAOR,CAAA;AAEF,OAAO,EAAC,IAAI,EAAC,CAAA;AACb,YAAY,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,GAClB,CAAA"}

package/dist/Card/index.js

@@ -1,11 +1,11 @@
-import { CardImpl, CardMetadata, CardMenu, CardDescription, CardHeading, CardImage, CardIcon } from './Card.js';
+import { CardImpl, CardMetadata, CardAction, CardDescription, CardHeading, CardImage, CardIcon } from './Card.js';
 
 const Card = Object.assign(CardImpl, {
   Icon: CardIcon,
   Image: CardImage,
   Heading: CardHeading,
   Description: CardDescription,
-  Menu: CardMenu,
+  Action: CardAction,
   Metadata: CardMetadata
 });
 

package/dist/experimental/index.d.ts

@@ -10,7 +10,7 @@ export type { BlankslateProps } from '../Blankslate';
 export { ButtonBase } from '../Button';
 export type { ButtonBaseProps } from '../Button';
 export { Card } from '../Card';
-export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardMenuProps, CardMetadataProps, } from '../Card';
+export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardActionProps, CardMetadataProps, } from '../Card';
 export { DataTable, Table, createColumnHelper } from '../DataTable';
 export type { DataTableProps, TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableHeaderProps, TableCellProps, TableContainerProps, TableTitleProps, TableSubtitleProps, TableActionsProps, Column, CellAlignment, ColumnWidth, UniqueRow, ObjectPaths, } from '../DataTable';
 export * from '../Dialog';

package/dist/experimental/index.d.ts.map

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

package/dist/hooks/useMergedRefs.d.ts

@@ -29,7 +29,7 @@ import type { ForwardedRef, Ref as StandardRef } from 'react';
  *  return <button ref={combinedRef} />
  * }
  */
-export declare function useMergedRefs<T>(refA: Ref<T | null>, refB: Ref<T | null>): (value: T | null) => () => void;
+export declare function useMergedRefs<T>(refA: Ref<T | null>, refB: Ref<T | null>): (value: T | null) => (() => void) | undefined;
 type CleanupFunction = () => void;
 /**
  * React 19 supports callback refs that can return a cleanup function. If a cleanup function is returned, the

package/dist/hooks/useMergedRefs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMergedRefs.d.ts","sourceRoot":"","sources":["../../src/hooks/useMergedRefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAE,GAAG,IAAI,WAAW,EAAmB,MAAM,OAAO,CAAA;AAG7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,WAE7D,CAAC,GAAG,IAAI,gBAiBnB;AAED,KAAK,eAAe,GAAG,MAAM,IAAI,CAAA;AAEjC;;;GAGG;AAEH,KAAK,kBAAkB,CAAC,CAAC,IAAI;IAC3B,cAAc,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,GAAG,eAAe,CAAA;CACpD,CAAC,gBAAgB,CAAC,CAAA;AAEnB;;;;;;;GAOG;AACH,KAAK,GAAG,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA"}
+{"version":3,"file":"useMergedRefs.d.ts","sourceRoot":"","sources":["../../src/hooks/useMergedRefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAE,GAAG,IAAI,WAAW,EAAmB,MAAM,OAAO,CAAA;AAa7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,WAE7D,CAAC,GAAG,IAAI,8BAsBnB;AAED,KAAK,eAAe,GAAG,MAAM,IAAI,CAAA;AAEjC;;;GAGG;AAEH,KAAK,kBAAkB,CAAC,CAAC,IAAI;IAC3B,cAAc,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,GAAG,eAAe,CAAA;CACpD,CAAC,gBAAgB,CAAC,CAAA;AAEnB;;;;;;;GAOG;AACH,KAAK,GAAG,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA"}

package/dist/hooks/useMergedRefs.js

@@ -1,5 +1,15 @@
 import { c } from 'react-compiler-runtime';
 import 'react';
+import { reactMajorVersion, isExperimentalReactVersion } from '../utils/environment.js';
+
+/**
+ * Cleanup functions for refs were introduced in React 19. For feature detection,
+ * we look to see if current version of React is >= 19 or if it is an
+ * experimental version of React
+ *
+ * @see https://react.dev/blog/2024/12/05/react-19
+ */
+const supportsRefCleanup = reactMajorVersion >= 19 || isExperimentalReactVersion;
 
 /**
  * Combine two refs of matching type (typically an external or forwarded ref and an internal `useRef` object or
@@ -38,6 +48,9 @@ function useMergedRefs(refA, refB) {
     t0 = value => {
       const cleanupA = setRef(refA, value);
       const cleanupB = setRef(refB, value);
+      if (!supportsRefCleanup) {
+        return;
+      }
       return () => {
         if (cleanupA) {
           cleanupA();

package/dist/utils/environment.d.ts

@@ -3,5 +3,8 @@
  *
  * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
  */
-export const canUseDOM: boolean;
+declare const canUseDOM: boolean;
+declare const reactMajorVersion: number;
+declare const isExperimentalReactVersion: boolean;
+export { canUseDOM, reactMajorVersion, isExperimentalReactVersion };
 //# sourceMappingURL=environment.d.ts.map

package/dist/utils/environment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"environment.d.ts","sourceRoot":"","sources":["../../src/utils/environment.js"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,gCAA8G"}
+{"version":3,"file":"environment.d.ts","sourceRoot":"","sources":["../../src/utils/environment.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,SAAS,SAAwF,CAAA;AAWvG,QAAA,MAAM,iBAAiB,QAAgC,CAAA;AAGvD,QAAA,MAAM,0BAA0B,SAAiD,CAAA;AAEjF,OAAO,EAAC,SAAS,EAAE,iBAAiB,EAAE,0BAA0B,EAAC,CAAA"}

package/dist/utils/environment.js

@@ -1,9 +1,24 @@
+import { version } from 'react';
+
 /**
  * Indicate whether current execution environment can access the DOM.
  *
  * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
  */
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition,ssr-friendly/no-dom-globals-in-module-scope
 const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
 
-export { canUseDOM };
+// Grab the major version from react. This could be formatted as any valid
+// semver version, e.g.:
+//
+// - 19.0.0
+// - 19.0.0-rc.1
+// - 0.0.0-{channel}-{commit}-{time}
+//
+// So we only pull the first part of the version and parse it.
+const reactVersion = version.split('.');
+const reactMajorVersion = parseInt(reactVersion[0], 10);
+const EXPERIMENTAL_REACT_VERSION_REGEX = /^0\.0\.0-experimental-[a-f0-9]{8}-\d{8}$/;
+const isExperimentalReactVersion = EXPERIMENTAL_REACT_VERSION_REGEX.test(version);
+
+export { canUseDOM, isExperimentalReactVersion, reactMajorVersion };

package/generated/components.json

@@ -2126,18 +2126,40 @@
       "stories": [
         {
           "id": "experimental-components-card--default",
-          "code": "() => {\n  return (\n    <div\n      style={{\n        maxWidth: '400px',\n      }}\n    >\n      <Card>\n        <Card.Icon icon={RocketIcon} />\n        <Card.Heading>Card Heading</Card.Heading>\n        <Card.Description>\n          This is a description of the card providing supplemental information.\n        </Card.Description>\n        <Card.Metadata>Updated 2 hours ago</Card.Metadata>\n      </Card>\n    </div>\n  )\n}"
+          "code": "() => {\n  return (\n    <Card>\n      <Card.Icon icon={RocketIcon} />\n      <Card.Heading>Card Heading</Card.Heading>\n      <Card.Description>\n        This is a description of the card providing supplemental information.\n      </Card.Description>\n      <Card.Metadata>\n        <PeopleIcon size={16} />3 contributors\n      </Card.Metadata>\n    </Card>\n  )\n}"
         },
         {
           "id": "experimental-components-card-features--with-image",
-          "code": "() => {\n  return (\n    <div\n      style={{\n        maxWidth: '400px',\n      }}\n    >\n      <Card>\n        <Card.Image src=\"https://github.com/octocat.png\" alt=\"Octocat\" />\n        <Card.Heading>Card with Image</Card.Heading>\n        <Card.Description>\n          This card uses an edge-to-edge image instead of an icon.\n        </Card.Description>\n      </Card>\n    </div>\n  )\n}"
+          "code": "() => {\n  return (\n    <Card>\n      <Card.Image src=\"https://github.com/octocat.png\" alt=\"Octocat\" />\n      <Card.Heading>Card with Image</Card.Heading>\n      <Card.Description>\n        This card uses an edge-to-edge image instead of an icon.\n      </Card.Description>\n    </Card>\n  )\n}"
         },
         {
           "id": "experimental-components-card-features--with-metadata",
-          "code": "() => {\n  return (\n    <div\n      style={{\n        maxWidth: '400px',\n      }}\n    >\n      <Card>\n        <Card.Icon icon={RepoIcon} />\n        <Card.Heading>primer/react</Card.Heading>\n        <Card.Description>\n          {\n            \"GitHub's design system implemented as React components for building consistent user interfaces.\"\n          }\n        </Card.Description>\n        <Card.Metadata>\n          <StarIcon size={16} />\n          1.2k stars\n        </Card.Metadata>\n      </Card>\n    </div>\n  )\n}"
+          "code": "() => {\n  return (\n    <Card>\n      <Card.Icon icon={RepoIcon} />\n      <Card.Heading>primer/react</Card.Heading>\n      <Card.Description>\n        {\n          \"GitHub's design system implemented as React components for building consistent user interfaces.\"\n        }\n      </Card.Description>\n      <Card.Metadata>\n        <StarIcon size={16} />\n        1.2k stars\n      </Card.Metadata>\n    </Card>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-card-features--with-menu",
+          "code": "() => {\n  return (\n    <Card>\n      <Card.Icon icon={RepoIcon} />\n      <Card.Heading>primer/react</Card.Heading>\n      <Card.Description>\n        {\n          \"GitHub's design system implemented as React components for building consistent user interfaces.\"\n        }\n      </Card.Description>\n      <Card.Action>\n        <ActionMenu>\n          <ActionMenu.Anchor>\n            <IconButton\n              icon={KebabHorizontalIcon}\n              aria-label=\"More options for primer/react\"\n              variant=\"invisible\"\n            />\n          </ActionMenu.Anchor>\n          <ActionMenu.Overlay>\n            <ActionList>\n              <ActionList.Item>Star</ActionList.Item>\n              <ActionList.Item>Watch</ActionList.Item>\n              <ActionList.Item>Fork</ActionList.Item>\n            </ActionList>\n          </ActionMenu.Overlay>\n        </ActionMenu>\n      </Card.Action>\n    </Card>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-card-features--standalone-section",
+          "code": "() => (\n  <Card as=\"section\">\n    <Card.Icon icon={RepoIcon} />\n    <Card.Heading>primer/react</Card.Heading>\n    <Card.Description>\n      {\n        'Standalone cards render as a labelled <section> landmark. aria-labelledby is automatically wired to Card.Heading.'\n      }\n    </Card.Description>\n  </Card>\n)"
+        },
+        {
+          "id": "experimental-components-card-features--in-list",
+          "code": "() => (\n  <ul className={classes.CardList} aria-label=\"Repositories\">\n    <li>\n      <Card>\n        <Card.Icon icon={RepoIcon} />\n        <Card.Description>primer/react</Card.Description>\n        <Card.Metadata>\n          <StarIcon size={16} />\n          1.2k stars\n        </Card.Metadata>\n      </Card>\n    </li>\n    <li>\n      <Card>\n        <Card.Icon icon={RepoIcon} />\n        <Card.Description>primer/css</Card.Description>\n        <Card.Metadata>\n          <StarIcon size={16} />\n          850 stars\n        </Card.Metadata>\n      </Card>\n    </li>\n    <li>\n      <Card>\n        <Card.Icon icon={RepoIcon} />\n        <Card.Description>primer/octicons</Card.Description>\n        <Card.Metadata>\n          <StarIcon size={16} />\n          2.1k stars\n        </Card.Metadata>\n      </Card>\n    </li>\n  </ul>\n)"
+        },
+        {
+          "id": "experimental-components-card-features--interactive-content",
+          "code": "() => {\n  const repos = [\n    {\n      name: 'primer/react',\n    },\n    {\n      name: 'primer/css',\n    },\n    {\n      name: 'primer/octicons',\n    },\n  ]\n  return (\n    <ul className={classes.CardList} aria-label=\"Repositories\">\n      {repos.map((repo) => (\n        <li key={repo.name}>\n          <Card>\n            <Card.Icon icon={RepoIcon} />\n            <Card.Description>{repo.name}</Card.Description>\n            <Card.Metadata>\n              <Button leadingVisual={StarIcon} size=\"small\">\n                Star <VisuallyHidden>{repo.name}</VisuallyHidden>\n              </Button>\n              <Button leadingVisual={RepoForkedIcon} size=\"small\">\n                Fork <VisuallyHidden>{repo.name}</VisuallyHidden>\n              </Button>\n            </Card.Metadata>\n          </Card>\n        </li>\n      ))}\n    </ul>\n  )\n}"
         }
       ],
       "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "required": true,
+          "description": "The contents of the card. Provide either `Card.*` subcomponents (for example `Card.Heading`, `Card.Description`, `Card.Metadata`) or any custom content. A card with no children will not render."
+        },
         {
           "name": "className",
           "type": "string",
@@ -2154,6 +2176,12 @@
           "type": "'medium' | 'large'",
           "defaultValue": "'large'",
           "description": "Controls the border radius of the Card."
+        },
+        {
+          "name": "as",
+          "type": "'div' | 'section'",
+          "defaultValue": "'div'",
+          "description": "The HTML element to render. Use `'section'` for **standalone** Cards (not inside a list of cards) so screen readers announce the Card as a labelled region. When `Card.Heading` is present, `aria-labelledby` is automatically wired. Use the default `'div'` when the Card is inside an `<li>` of a list of cards."
         }
       ],
       "subcomponents": [
@@ -2195,21 +2223,42 @@
               "name": "as",
               "type": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
               "defaultValue": "'h3'",
-              "description": "The heading level to render."
+              "description": "The heading level to render. When the parent Card uses `as=\"section\"`, the heading's `id` is automatically wired to the section's `aria-labelledby`."
             }
           ]
         },
         {
           "name": "Card.Description",
-          "props": []
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode",
+              "required": true,
+              "description": "The descriptive text for the card. Rendered inside a `<p>` element so should be flowing text content."
+            }
+          ]
         },
         {
-          "name": "Card.Menu",
-          "props": []
+          "name": "Card.Action",
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode",
+              "required": true,
+              "description": "Interactive control for the top-right corner of the card."
+            }
+          ]
         },
         {
           "name": "Card.Metadata",
-          "props": []
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode",
+              "required": true,
+              "description": "Metadata content for the bottom of the card. Accepts any content: plain text, icons, or other Primer components."
+            }
+          ]
         }
       ]
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.24.0",
+  "version": "38.25.0-rc.3cd58f825",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",