@primer/react-brand 0.3.1 → 0.4.0-rc.420e2e9

package/CHANGELOG.md

@@ -0,0 +1,198 @@
+# @primer/react-brand
+
+## 0.4.0
+
+### Minor Changes
+
+- [#69](https://github.com/primer/brand/pull/69) [`7838af5`](https://github.com/primer/brand/commit/7838af57ae2fdb94d07c188a142feebc0a4a605d) Thanks [@rezrah](https://github.com/rezrah)! - Added `FormControl`, `Checkbox`, `TextInput` and `Select` components.
+
+  **Read the Technical Previews for usage examples:**
+
+  [🔗 FormControl](https://primer.style/brand/components/FormControl)
+
+  [🔗 Checkbox](https://primer.style/brand/components/Checkbox)
+
+  [🔗 TextInput](https://primer.style/brand/components/TextInput)
+
+  [🔗 Select](https://primer.style/brand/components/Select)
+
+## 0.3.1
+
+### Patch Changes
+
+- [#59](https://github.com/primer/brand/pull/59) [`fdc731b`](https://github.com/primer/brand/commit/fdc731bda050aaef7041aafe6aaa7857c49ea03b) Thanks [@rezrah](https://github.com/rezrah)! - Added `fillMedia` prop to River.Visual
+
+  Previously, all image and video children were automatically styled to fit the parent elements dimensions.
+
+  This isn't ideal in all situations, so the ability to toggle-off this behaviour is now available through an `fillMedia` prop.
+
+## 0.3.0
+
+### Minor Changes
+
+- [`c8609a8`](https://github.com/primer/brand/commit/c8609a8d35ea80192d85e97794390207f4624e63) Thanks [@rezrah](https://github.com/rezrah)! - added an FAQ component, which displays a list of questions and answers relating to a particular subject.
+
+  [See usage examples](https://primer.style/brand/components/FAQ)
+
+* [#45](https://github.com/primer/brand/pull/45) [`2fb6924`](https://github.com/primer/brand/commit/2fb6924a834ddcbad34cfb97ecfc1659d54f4ed5) Thanks [@rezrah](https://github.com/rezrah)! - > **Warning**
+
+  > This is a breaking change, but as the library is a pre-v1 release we are publishing this update as a `minor` change.
+  > Please read the following instructions carefully before updating:
+
+  ### Updated references for "left" and "right" to "start" and "end"
+
+  For improved i18n support and closer alignment with our Figma naming conventions, we have updated the references for "left" and "right" to "start" and "end" respectively in `Hero` and `River` components.
+
+  ```diff
+  - <River align="left">
+  - <River align="right">
+  + <River align="start">
+  + <River align="end">
+  ```
+
+## 0.2.1
+
+### Patch Changes
+
+- [#38](https://github.com/primer/brand/pull/38) [`b0c9293`](https://github.com/primer/brand/commit/b0c929389d62f184e5ae447c0b00e351cb2d1c6e) Thanks [@rezrah](https://github.com/rezrah)! - updated `css-loader` to generate valid (escaped) class names
+
+## 0.2.0
+
+### Minor Changes
+
+- [#33](https://github.com/primer/brand/pull/33) [`662fcfc`](https://github.com/primer/brand/commit/662fcfc6d123460730317b7ddd3d3a4622d30dce) Thanks [@rezrah](https://github.com/rezrah)! - - Adds `River` component
+
+  - Renames `LinkButton` to `Button` :warning: (see below)
+  - Button supports polymorphism and can be used `as` either `a` or `button`
+
+  ### `River`
+
+  **NEW** Component :sparkles:
+
+  <table>
+  <tr>
+  <th> Before</th> <th> After</th>
+  </tr>
+  <tr>
+  <td valign="top">❌</td>
+  <td valign="top">
+
+  ```jsx
+  // import {River} from "@primer/react-brand";
+
+  <River>
+    <River.Visual>
+      <img
+        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
+        alt="placeholder, blank area with an off-white background color"
+      />
+    </River.Visual>
+    <River.Content>
+      <Heading>Heading</Heading>
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
+        felis nam pulvinar risus elementum.
+      </Text>
+      <Link href="#">Call to action</Link>
+    </River.Content>
+  </River>
+  ```
+
+  </td>
+  </tr>
+  </table>
+
+  See more examples in our documentation.
+  https://primer.style/brand/components/River
+
+  ### `LinkButton`
+
+  > **Warning**
+  > The changes below should be considered a breaking change for anyone relying on `LinkButton`, but as we are shipping a pre-v1 library, this has been marked as a `minor` release rather than `major`. Please remember to update your usage per the below example.
+
+  <table>
+  <tr>
+  <th> Before</th> <th> After</th>
+  </tr>
+  <tr>
+  <td valign="top">
+
+  ```jsx
+  //import { LinkButton } from '@primer/react-brand';
+
+  <LinkButton href="#">Sign up</LinkButton>
+  ```
+
+  </td>
+  <td valign="top">
+
+  ```jsx
+  //import { Button } from '@primer/react-brand';
+
+  <Button as="a" href="#">
+    Sign up
+  </Button>
+  ```
+
+  </td>
+  </tr>
+  <tr>
+  <td valign="top">
+
+  ❌
+
+  </td>
+  <td valign="top">
+
+  ```jsx
+  //import { Button } from '@primer/react-brand';
+
+  <Button onClick={handler}>Sign Up</Button>
+  ```
+
+  </td>
+  </tr>
+
+  </table>
+
+## 0.1.0
+
+### Minor Changes
+
+- [#19](https://github.com/primer/brand/pull/19) [`3b22e9e`](https://github.com/primer/brand/commit/3b22e9e0823401104d6e33b3c4f8664b755ea6ba) Thanks [@colebemis](https://github.com/colebemis)! - Add `size` prop to `Hero` component
+
+### Patch Changes
+
+- [#23](https://github.com/primer/brand/pull/23) [`77abf53`](https://github.com/primer/brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - add Text and Heading components
+
+* [#29](https://github.com/primer/brand/pull/29) [`144c7d7`](https://github.com/primer/brand/commit/144c7d762a91cb691699e4f8923ab08385c77966) Thanks [@rezrah](https://github.com/rezrah)! - Removed `gh-variables.css` from package as Brand variables are now surfaced in main.css
+
+  **To upgrade:**
+
+  - _Remove_ `import "@primer/react-brand/lib/css/gh-variables.css"`
+
+  - _Add_ `import "@primer/react-brand/lib/css/main.css"`
+
+- [#23](https://github.com/primer/brand/pull/23) [`77abf53`](https://github.com/primer/brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - forward className in Hero
+
+* [#25](https://github.com/primer/brand/pull/25) [`4b00b72`](https://github.com/primer/brand/commit/4b00b72f5dbf5e578351ea77e1e74cddc69833e7) Thanks [@rezrah](https://github.com/rezrah)! - adds baseline tokens
+
+- [#21](https://github.com/primer/brand/pull/21) [`ab06cce`](https://github.com/primer/brand/commit/ab06cceb6ed3b2eaca70f9738b9708343b4e6db9) Thanks [@rezrah](https://github.com/rezrah)! - Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.
+
+* [#27](https://github.com/primer/brand/pull/27) [`ca2d300`](https://github.com/primer/brand/commit/ca2d3002ba6f7ca9c719f80077c4d95246f33410) Thanks [@rezrah](https://github.com/rezrah)! - Updated Hero text appearance
+
+  - **updated** Hero description text size from `500` to `400`
+  - **updated** button alignment to not stretch on mobile viewports
+  - **removed** `size` prop. Now only one responsive size available.
+
+## 0.0.3
+
+### Patch Changes
+
+- [#18](https://github.com/primer/brand/pull/18) [`0835830`](https://github.com/primer/brand/commit/0835830fc15c582e280ac692ff3d578d6bcf282e) Thanks [@rezrah](https://github.com/rezrah)! - Fixes for production bundles
+
+## 0.0.2
+
+### Patch Changes
+
+- [#2](https://github.com/primer/brand/pull/2) [`ab01a8a`](https://github.com/primer/brand/commit/ab01a8ad1dc504f7a2865213b6f41c0b0adba131) Thanks [@colebemis](https://github.com/colebemis)! - Initialize releases with [changesets](https://github.com/changesets/changesets)

package/README.md

@@ -2,30 +2,38 @@
   <img width="300px" src="https://user-images.githubusercontent.com/4608155/127241386-f11da52d-00d9-4366-b01c-6f4c1ebcf7f2.png">
 </p>
 
-<h1 align="center">Primer React Brand</h1>
+<h1 align="center">Primer Brand</h1>
 
-<p align="center">A React implementation of GitHub's Brand Design System</p>
+<p align="center"><strong>Primer Brand is a GitHub’s design system for creating one-off marketing websites and digital experiences.</strong>
+</p>
+
+<p align="center">The design system comprises a Figma library and corresponding React components.
+</p>
 
 <p align="center">
   <a aria-label="npm package" href="https://www.npmjs.com/package/@primer/react-brand">
     <img alt="" src="https://img.shields.io/npm/v/@primer/react-brand.svg">
   </a>
-  <a aria-label="build status" href="https://github.com/primer/react-brand/actions/workflows/ci.yml">
-    <img alt="" src="https://github.com/primer/react-brand/actions/workflows/ci.yml/badge.svg">
+  <a aria-label="build status" href="https://github.com/primer/brand/actions/workflows/ci.yml">
+    <img alt="" src="https://github.com/primer/brand/actions/workflows/ci.yml/badge.svg">
   </a>
   <img src="https://img.shields.io/badge/status-experimental-red" alt="status: experimental">
-  <a aria-label="license" href="https://github.com/primer/react-brand/blob/main/LICENSE">
-    <img src="https://img.shields.io/github/license/primer/react-brand.svg" alt="">
+  <a aria-label="license" href="https://github.com/primer/brand/blob/main/LICENSE">
+    <img src="https://img.shields.io/github/license/primer/brand" alt="">
   </a>
 </p>
 
 <p align="center">
-    <a href="https://primer.github.io/react-brand/" target="_blank">https://primer.github.io/react-brand</a>
+    <a href="https://primer.github.io/brand/" target="_blank">https://primer.style/brand</a>
 </p>
 
+## Documentation
+
+Our documentation site lives at [primer.style/brand](https://primer.style/brand). You'll be able to find detailed documentation on getting started, all of the components and more.
+
 ## Install
 
-This repository is distributed on [npm]. After [installing npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), you can install `@primer/react-brand` as a dependency of your project:
+Primer Brand libraries are published to the [npm](https://www.npmjs.com/package/@primer/react-brand) registry. After [installing npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), you can install `@primer/react-brand` as a dependency of your project:
 
 ```sh
 npm install @primer/react-brand
@@ -33,7 +41,15 @@ npm install @primer/react-brand
 
 ## Usage
 
-See our [getting started guide](https://primer.github.io/react-brand/getting-started) for more information.
+See our [getting started guide](https://primer.github.io/brand/getting-started) for more information.
+
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for development and contribution guidelines.
+
+## Releasing (for GitHub staff)
+
+You can find docs about our release process in [RELEASING.md](RELEASING.md).
 
 ## License
 

package/lib/Accordion/Accordion.d.ts

@@ -1,29 +1,29 @@
 import React from 'react';
+import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens
  */
 import '../../lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css';
-export declare type AccordionRootProps = {
+export declare type AccordionRootProps = BaseProps<HTMLDetailsElement> & {
     open?: boolean;
-    className?: string;
     children: React.ReactElement<AccordionHeadingProps | AccordionContentProps>[];
 } & React.HTMLAttributes<HTMLDetailsElement>;
-export declare function AccordionRoot({ children, className, open, ...rest }: AccordionRootProps): JSX.Element;
-declare type AccordionHeadingProps = {
+export declare const AccordionRoot: React.ForwardRefExoticComponent<Pick<AccordionRootProps, "children" | "className" | "id" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "open"> & React.RefAttributes<HTMLDetailsElement>>;
+declare type AccordionHeadingProps = BaseProps<HTMLHeadingElement> & {
     className?: string;
     children: string;
 };
-export declare function AccordionHeading({ children, className }: AccordionHeadingProps): JSX.Element;
-declare type AccordionContentProps = {
+export declare const AccordionHeading: React.ForwardRefExoticComponent<Pick<AccordionHeadingProps, "children" | "className" | "id"> & React.RefAttributes<HTMLHeadingElement>>;
+declare type AccordionContentProps = BaseProps<HTMLElement> & {
     className?: string;
     children: React.ReactElement | React.ReactElement[];
 };
-export declare function AccordionContent({ children, className }: AccordionContentProps): JSX.Element;
+export declare function AccordionContent({ children, className, ...rest }: AccordionContentProps): JSX.Element;
 /**
  * Branded Accordion component
  */
-export declare const Accordion: typeof AccordionRoot & {
+export declare const Accordion: React.ForwardRefExoticComponent<Pick<AccordionRootProps, "children" | "className" | "id" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "open"> & React.RefAttributes<HTMLDetailsElement>> & {
     Content: typeof AccordionContent;
-    Heading: typeof AccordionHeading;
+    Heading: React.ForwardRefExoticComponent<Pick<AccordionHeadingProps, "children" | "className" | "id"> & React.RefAttributes<HTMLHeadingElement>>;
 };
 export {};

package/lib/Button/Button.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
 import '../../lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css';
-export declare type ButtonProps<C extends React.ElementType> = {
+import type { BaseProps } from '../component-helpers';
+export declare type ButtonProps<C extends React.ElementType> = BaseProps<C> & {
     as?: C;
     variant?: 'primary' | 'secondary';
 } & React.ComponentPropsWithoutRef<C>;
-export declare function Button<C extends React.ElementType>({ as, variant, className, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: ButtonProps<C>): JSX.Element;
+export declare const Button: React.ForwardRefExoticComponent<Pick<BaseProps<React.ElementType<any>> & {
+    as?: React.ElementType<any> | undefined;
+    variant?: "primary" | "secondary" | undefined;
+} & Pick<any, string | number | symbol>, string | number | symbol> & React.RefAttributes<HTMLButtonElement>>;

package/lib/FAQ/FAQ.d.ts

@@ -1,37 +1,36 @@
 import React from 'react';
-import { AccordionHeading, AccordionContent, AccordionRoot, AccordionRootProps } from '..';
+import { AccordionContent, AccordionRootProps } from '..';
+import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens
  */
 import '../../lib/design-tokens/css/tokens/functional/components/faq/base.css';
 import '../../lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css';
-declare type FAQRootProps = {
-    className?: string;
+declare type FAQRootProps = BaseProps<HTMLElement> & {
     children: React.ReactElement<FAQHeadingProps | FAQSubheadingProps | AccordionRootProps>[];
 };
-declare function FAQRoot({ children, className }: FAQRootProps): JSX.Element;
-declare type FAQHeadingProps = {
-    className?: string;
+declare type FAQHeadingProps = BaseProps<HTMLHeadingElement> & {
     size?: 'medium' | 'large';
     align?: 'start' | 'center';
     children: string;
 };
-declare function FAQHeading({ children, className, size, align }: FAQHeadingProps): JSX.Element;
-declare type FAQSubheadingProps = {
+declare type FAQSubheadingProps = BaseProps<HTMLHeadingElement> & {
     align?: 'start' | 'center';
-    className?: string;
     children: string;
 };
-declare function FAQSubheading({ children, className }: FAQSubheadingProps): JSX.Element;
+declare function FAQSubheading({ children, className, ...rest }: FAQSubheadingProps): JSX.Element;
 /**
  * FAQ component:
- * {@link https://primer.style/react-brand/components/FAQ/ See usage examples}.
+ * {@link https://primer.style/brand/components/FAQ/ See usage examples}.
  */
-export declare const FAQ: typeof FAQRoot & {
+export declare const FAQ: React.ForwardRefExoticComponent<Pick<FAQRootProps, "children" | "className" | "id"> & React.RefAttributes<HTMLElement>> & {
     Subheading: typeof FAQSubheading;
-    Heading: typeof FAQHeading;
-    Item: typeof AccordionRoot;
-    Question: typeof AccordionHeading;
+    Heading: React.ForwardRefExoticComponent<Pick<FAQHeadingProps, "children" | "className" | "align" | "id" | "size"> & React.RefAttributes<HTMLHeadingElement>>;
+    Item: React.ForwardRefExoticComponent<Pick<AccordionRootProps, "children" | "className" | "id" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "open"> & React.RefAttributes<HTMLDetailsElement>>;
+    Question: React.ForwardRefExoticComponent<Pick<BaseProps<HTMLHeadingElement> & {
+        className?: string | undefined;
+        children: string;
+    }, "children" | "className" | "id"> & React.RefAttributes<HTMLHeadingElement>>;
     Answer: typeof AccordionContent;
 };
 export {};

package/lib/Heading/Heading.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
+import type { BaseProps } from '../component-helpers';
 export declare const HeadingSizes: readonly ["1", "2", "3", "4", "5", "6"];
 export declare const HeadingTags: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 export declare const defaultHeadingTag: "h2";
@@ -10,11 +11,11 @@ export declare const classMap: {
     h5: "5";
     h6: "6";
 };
-declare type HeadingTags = {
+declare type HeadingTags = BaseProps<HTMLHeadingElement> & {
     as?: typeof HeadingTags[number];
 } & React.HTMLAttributes<HTMLHeadingElement>;
 export declare type HeadingProps = {
     className?: string;
 } & HeadingTags;
-export declare function Heading({ className, children, as, ...rest }: PropsWithChildren<HeadingProps>): JSX.Element;
+export declare const Heading: React.ForwardRefExoticComponent<Pick<HeadingProps, "children" | "className" | "id" | "slot" | "style" | "title" | "as" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLHeadingElement>>;
 export {};

package/lib/Hero/Hero.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
+import type { BaseProps } from '../component-helpers';
 import '../../lib/design-tokens/css/tokens/functional/components/hero/base.css';
 declare type Action = {
     text: string;
     href: string;
 };
-export declare type HeroProps = {
-    className?: string;
+export declare type HeroProps = BaseProps<HTMLDivElement> & {
     heading: string | React.ReactElement;
     description?: string | React.ReactElement;
     primaryAction: Action;
     secondaryAction?: Action;
     align?: 'start' | 'center';
 };
-export declare function Hero({ className, heading, description, primaryAction, secondaryAction, align }: HeroProps): JSX.Element;
+export declare const Hero: React.ForwardRefExoticComponent<Pick<HeroProps, "className" | "heading" | "description" | "primaryAction" | "secondaryAction" | "align" | "id"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/InlineLink/InlineLink.d.ts

@@ -1,14 +1,11 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { TextSizes } from '../';
+import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens
  */
 import '../../lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css';
-export declare type InlineLinkProps = {
-    /**
-     * Forward a custom HTML class attribute
-     */
-    className?: string;
+export declare type InlineLinkProps = BaseProps<HTMLAnchorElement> & {
     /**
      * Specify the links destination
      */
@@ -21,4 +18,4 @@ export declare type InlineLinkProps = {
 /**
  * A HTML anchor link component that renders inline with adjacent text.
  */
-export declare function InlineLink({ className, size, children, href, ...rest }: PropsWithChildren<InlineLinkProps>): JSX.Element;
+export declare const InlineLink: React.ForwardRefExoticComponent<Pick<InlineLinkProps, "children" | "className" | "id" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "href" | "type" | "download" | "hrefLang" | "media" | "ping" | "rel" | "target" | "referrerPolicy"> & React.RefAttributes<HTMLAnchorElement>>;

package/lib/River/River.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { HeadingTags, LinkProps, HeadingProps, TextProps } from '../';
+import type { BaseProps } from '../component-helpers';
 import '../../lib/design-tokens/css/tokens/functional/components/river/base.css';
-export declare type RiverProps = {
+export declare type RiverProps = BaseProps<HTMLElement> & {
     /**
      * Only specific children are valid.
      * These include: `River.Visual` and `River.Content`.
@@ -9,10 +10,6 @@ export declare type RiverProps = {
      * to enforce correct HTML semantics.
      */
     children: React.ReactElement<RiverVisualProps | RiverContentProps>[];
-    /**
-     * Apply a custom classname that will be forwarded to the root River element.
-     */
-    className?: string;
     /**
      * Apply an alternative image to text column ratio. The default is `50:50`.
      */
@@ -24,8 +21,7 @@ export declare type RiverProps = {
 };
 export declare const defaultRiverImageTextRatio = "50:50";
 export declare const defaultRiverAlign = "start";
-declare function Root({ imageTextRatio, align, className, children, ...rest }: RiverProps): JSX.Element;
-declare type RiverContentProps = {
+declare type RiverContentProps = BaseProps<HTMLDivElement> & {
     /**
      * Escape-hatch for inserting custom React components.
      * Warning:
@@ -49,26 +45,61 @@ declare type RiverContentProps = {
     children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[];
 };
 export declare const getHeadingWarning: (size: (typeof HeadingTags)[number]) => string;
-declare function Content({ children, leadingComponent: LeadingComponent, trailingComponent: TrailingComponent }: RiverContentProps): JSX.Element;
-declare type RiverVisualProps = {
+declare type RiverVisualProps = BaseProps<HTMLDivElement> & PropsWithChildren<{
     /**
      * Applies automatic size constraints to child images and video.
      * This can be disabled by setting this prop to `false`.
      */
     fillMedia?: boolean;
-    className?: string;
     /**
      * `img` and `video` elements will apply a shadow by default.
      * This can be disabled by setting this prop to `false`.
      */
     hasShadow?: boolean;
-};
-declare function Visual({ fillMedia, children, className, hasShadow }: React.PropsWithChildren<RiverVisualProps>): JSX.Element;
+}>;
 /**
  * Alternating text and image pairs.
  */
-export declare const River: typeof Root & {
-    Visual: typeof Visual;
-    Content: typeof Content;
+export declare const River: React.ForwardRefExoticComponent<Pick<BaseProps<HTMLElement> & {
+    /**
+     * Only specific children are valid.
+     * These include: `River.Visual` and `River.Content`.
+     * The declarative order of the children will be ignored in the rendered output
+     * to enforce correct HTML semantics.
+     */
+    children: React.ReactElement<RiverVisualProps | RiverContentProps>[];
+    /**
+     * Apply an alternative image to text column ratio. The default is `50:50`.
+     */
+    imageTextRatio?: "60:40" | "50:50" | undefined;
+    /**
+     * Adjust the order of the `Content` column. The default is `start`.
+     */
+    align?: "start" | "center" | "end" | undefined;
+}, "children" | "className" | "align" | "id" | "imageTextRatio"> & React.RefAttributes<HTMLElement>> & {
+    Visual: React.ForwardRefExoticComponent<Pick<RiverVisualProps, "children" | "className" | "id" | "fillMedia" | "hasShadow"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Pick<BaseProps<HTMLDivElement> & {
+        /**
+         * Escape-hatch for inserting custom React components.
+         * Warning:
+         *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
+         *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
+         */
+        trailingComponent?: React.FunctionComponent<{}> | undefined;
+        /**
+         * Escape-hatch for inserting custom React components.
+         * Warning:
+         *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
+         *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
+         */
+        leadingComponent?: React.FunctionComponent<{}> | undefined;
+        /**
+         * Only valid children are allowed.
+         * These include: `Heading`, `Text` and `Link`.
+         * The declarative order of the children will be ignored in the rendered output
+         * to enforce correct HTML semantics.
+         */
+        children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[];
+    }, "children" | "className" | "id" | "leadingComponent" | "trailingComponent"> & React.RefAttributes<HTMLDivElement>>;
 };
 export {};