@primer/react-brand 0.46.0 → 0.47.0-rc.92f76d23

package/lib/list/OrderedList/OrderedList.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import type { BaseProps } from '../../component-helpers';
 export type OrderedListProps = PropsWithChildren<BaseProps<HTMLOListElement>>;
-declare function Root({ children, ...props }: OrderedListProps): JSX.Element;
+declare function Root({ children, ...props }: OrderedListProps): import("react/jsx-runtime").JSX.Element;
 export declare const OrderedList: typeof Root & {
     Item: any;
 };

package/lib/list/UnorderedList/UnorderedList.d.ts

@@ -6,7 +6,7 @@ export type UnorderedListProps = PropsWithChildren<BaseProps<HTMLUListElement>>
      */
     variant?: 'default' | 'checked' | 'x';
 };
-declare function Root({ variant, children, ...props }: UnorderedListProps): JSX.Element;
+declare function Root({ variant, children, ...props }: UnorderedListProps): import("react/jsx-runtime").JSX.Element;
 export declare const UnorderedList: typeof Root & {
     Item: any;
 };

package/lib/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOne.d.ts

@@ -8,5 +8,5 @@ type FeaturePreviewLevelOneProps = {
     heroTitle: string;
     heroDescription: string;
 };
-export declare function FeaturePreviewLevelOne({ accentColor, colorMode, ...args }: FeaturePreviewLevelOneProps): JSX.Element;
+export declare function FeaturePreviewLevelOne({ accentColor, colorMode, ...args }: FeaturePreviewLevelOneProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/FeaturePreviewLevelOneSideBySide.d.ts

@@ -9,5 +9,5 @@ type FeaturePreviewLevelOneSideBySideProps = {
     heroDescription: string;
     isEnterprise: boolean;
 };
-export declare function FeaturePreviewLevelOneSideBySide({ accentColor, colorMode, isEnterprise, ...args }: FeaturePreviewLevelOneSideBySideProps): JSX.Element;
+export declare function FeaturePreviewLevelOneSideBySide({ accentColor, colorMode, isEnterprise, ...args }: FeaturePreviewLevelOneSideBySideProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/recipes/FeaturePreviewLPs/FeaturePreviewLevelOne/components/FormExample.d.ts

@@ -3,5 +3,5 @@ type FormExampleProps = {
     colorMode?: ColorModesEnum.LIGHT | ColorModesEnum.DARK;
     type?: 'default' | 'extended';
 };
-export declare function FormExample({ type, colorMode }: FormExampleProps): JSX.Element;
+export declare function FormExample({ type, colorMode }: FormExampleProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/recipes/FeaturePreviewLPs/FeaturePreviewLevelTwo/FeaturePreviewLevelTwo.d.ts

@@ -44,5 +44,5 @@ type FeaturePreviewLevelTwoProps = {
     faqType: 'group' | 'single';
     cardsVisible: boolean;
 };
-export declare function FeaturePreviewLevelTwo({ accentColor, variant, gridOverlay, colorMode, ...args }: FeaturePreviewLevelTwoProps): JSX.Element;
+export declare function FeaturePreviewLevelTwo({ accentColor, variant, gridOverlay, colorMode, ...args }: FeaturePreviewLevelTwoProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/recipes/FeaturePreviewLPs/FeaturePreviewLevelZero/FeaturePreviewLevelZero.d.ts

@@ -12,5 +12,5 @@ type FeaturePreviewLevelZeroProps = {
     heroCtaTextPrimary: string;
     heroCtaTextSecondary: string;
 };
-export declare function FeaturePreviewLevelZero({ accentColor, colorMode, ...args }: FeaturePreviewLevelZeroProps): JSX.Element;
+export declare function FeaturePreviewLevelZero({ accentColor, colorMode, ...args }: FeaturePreviewLevelZeroProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/recipes/SolutionTemplates/CategoryPage/CategoryPage.d.ts

@@ -11,5 +11,5 @@ type CategoryPageProps = {
     introVariant: 'pillars' | 'editorial prose' | 'editorial list';
     [key: string]: unknown;
 };
-export declare function CategoryPage({ variant, gridOverlay, colorMode, ...args }: CategoryPageProps): JSX.Element;
+export declare function CategoryPage({ variant, gridOverlay, colorMode, ...args }: CategoryPageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/recipes/SolutionTemplates/SolutionPage/SolutionPage.d.ts

@@ -3,13 +3,30 @@ type SolutionPageProps = {
     variant: 'size' | 'industry' | 'use-case';
     gridOverlay?: boolean;
     colorMode?: ColorModesEnum.LIGHT | ColorModesEnum.DARK;
+    heroImage?: boolean;
+    heroVideo?: boolean;
     heroLabel: string;
     heroTitle: string;
     heroDescription: string;
     heroCtaTextPrimary: string;
     heroCtaTextSecondary: string;
+    sectionIntroText?: string;
+    sectionIntroCTAText?: string;
     introVariant: 'pillars' | 'editorial list';
+    logoBarVisible?: boolean;
+    jtbd1Visible?: boolean;
+    jtbd2Visible?: boolean;
+    jtbd3Visible?: boolean;
+    jtbdBentosVisible?: boolean;
+    testimonialsVisible?: boolean;
+    pricingOptionsVisible?: boolean;
+    statisticsVisible?: boolean;
+    breakoutBannerVisible?: boolean;
+    customerStoryVisible?: boolean;
+    riverVisible?: boolean;
+    faqVisible?: boolean;
+    breadcrumbsVisible?: boolean;
     [key: string]: unknown;
 };
-export declare function SolutionPage({ variant, gridOverlay, colorMode, ...args }: SolutionPageProps): JSX.Element;
+export declare function SolutionPage({ variant, gridOverlay, colorMode, ...args }: SolutionPageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/recipes/SolutionTemplates/SolutionsOverview/SolutionsOverview.d.ts

@@ -8,8 +8,9 @@ type SolutionsOverviewProps = {
     heroDescription: string;
     heroCtaTextPrimary: string;
     heroCtaTextSecondary: string;
+    sectionIntroText: string;
     introVariant: 'pillars' | 'editorial prose' | 'editorial list';
     [key: string]: unknown;
 };
-export declare function SolutionsOverview({ variant, gridOverlay, colorMode, ...args }: SolutionsOverviewProps): JSX.Element;
+export declare function SolutionsOverview({ variant, gridOverlay, colorMode, ...args }: SolutionsOverviewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/recipes/seo/Article/Article.d.ts

@@ -9,5 +9,5 @@ type ArticleProps = {
     accentColor: Themes;
     isLightHero?: boolean;
 };
-export declare function Article({ heroTitle, lede, content, gridOverlay, colorMode, isLightHero, accentColor, ...args }: ArticleProps): JSX.Element;
+export declare function Article({ heroTitle, lede, content, gridOverlay, colorMode, isLightHero, accentColor, ...args }: ArticleProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/recipes/seo/Article/ArticleToC.d.ts

@@ -1,3 +1,3 @@
 export declare const ArticleToC: ({ content }: {
     content?: string | undefined;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/recipes/seo/Category/CategoryPage.d.ts

@@ -5,4 +5,4 @@ export declare function CategoryPage({ accentColor, variant, gridOverlay, colorM
     variant: any;
     gridOverlay?: boolean | undefined;
     colorMode?: ColorModesEnum | undefined;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/river/River/River.d.ts

@@ -52,33 +52,7 @@ export type RiverContentProps = BaseProps<HTMLDivElement> & {
      */
     children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[];
 } & React.HTMLAttributes<HTMLDivElement>;
-export declare const RiverContent: React.ForwardRefExoticComponent<Omit<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;
-    /**
-     * When `true`, a divider will be rendered between the standard river and optional trailing content.
-     */
-    trailingComponentDivider?: boolean;
-    /**
-     * 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;
-    /**
-     * 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>[];
-} & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const RiverContent: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type RiverVisualProps = BaseProps<HTMLDivElement> & React.HtmlHTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
      * Applies automatic size constraints to child images and video.
@@ -99,49 +73,7 @@ export type RiverVisualProps = BaseProps<HTMLDivElement> & React.HtmlHTMLAttribu
 /**
  * Alternating text and image pairs.
  */
-export declare const River: React.ForwardRefExoticComponent<Omit<{
-    /**
-     * 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";
-    /**
-     * Adjust the order of the `Content` column. The default is `start`.
-     */
-    align?: "start" | "end" | "center";
-} & BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>> & {
-    Visual: React.ForwardRefExoticComponent<Omit<RiverVisualProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<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;
-        /**
-         * When `true`, a divider will be rendered between the standard river and optional trailing content.
-         */
-        trailingComponentDivider?: boolean;
-        /**
-         * 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;
-        /**
-         * 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>[];
-    } & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const River: React.ForwardRefExoticComponent<Omit<RiverProps, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Visual: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<RiverVisualProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };

package/lib/river/RiverBreakout/RiverBreakout.d.ts

@@ -2,15 +2,10 @@ import React from 'react';
 import { RiverProps } from '../River';
 type RiverBreakoutProps = Omit<RiverProps, 'align' | 'imageTextRatio'>;
 export declare const RiverBreakout: React.ForwardRefExoticComponent<Omit<RiverBreakoutProps, "ref"> & React.RefAttributes<HTMLElement>> & {
-    Visual: React.ForwardRefExoticComponent<Omit<import("../River").RiverVisualProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<import("../../component-helpers").BaseProps<HTMLDivElement> & {
-        trailingComponent?: React.FunctionComponent;
-        trailingComponentDivider?: boolean;
-        leadingComponent?: React.FunctionComponent;
-        children: React.ReactElement<import("../..").TextProps> | React.ReactElement<import("../../Heading").HeadingProps | import("../..").TextProps | import("../..").LinkProps>[];
-    } & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Visual: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<import("../River").RiverVisualProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<import("../River").RiverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     A11yHeading: ({ as, children }: React.PropsWithChildren<{
         as?: "h2" | "h3";
-    }>) => JSX.Element;
+    }>) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/lib/river/RiverStoryScroll/RiverStoryScroll.d.ts

@@ -19,4 +19,4 @@ export type RiverStoryScrollProps = {
      */
     children?: React.ReactElement<RiverProps>[];
 };
-export declare function RiverStoryScroll({ children, disabled }: RiverStoryScrollProps): JSX.Element;
+export declare function RiverStoryScroll({ children, disabled }: RiverStoryScrollProps): import("react/jsx-runtime").JSX.Element;

package/lib/river/RiverStoryScroll/RiverStoryScrollProvider.d.ts

@@ -8,5 +8,5 @@ export declare function RiverStoryScrollProvider({ children, className, initialS
     children: ReactNode;
     className?: string;
     initialStates: boolean[];
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/river/RiverStoryScroll/RiverStoryScrollResponder.d.ts

@@ -6,5 +6,5 @@ type RiverStoryScrollResponderProps = {
     visibleClassName?: string;
     hiddenClassName?: string;
 };
-export declare function RiverStoryScrollResponder({ index, children, className, visibleClassName, hiddenClassName, }: RiverStoryScrollResponderProps): JSX.Element;
+export declare function RiverStoryScrollResponder({ index, children, className, visibleClassName, hiddenClassName, }: RiverStoryScrollResponderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/river/RiverStoryScroll/RiverStoryScrollTracker.d.ts

@@ -5,5 +5,5 @@ type RiverStoryScrollTrackerProps = {
     className?: string;
     location?: string;
 };
-export declare const RiverStoryScrollTracker: ({ index, children, className }: RiverStoryScrollTrackerProps) => JSX.Element;
+export declare const RiverStoryScrollTracker: ({ index, children, className }: RiverStoryScrollTrackerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/test-utils/setupTests.d.ts

@@ -1 +1,2 @@
 import './mocks/popover-polyfill';
+import 'jest-axe/extend-expect';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react-brand",
-  "version": "0.46.0",
+  "version": "0.47.0-rc.92f76d23",
   "description": "Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.",
   "keywords": [
     "primer",
@@ -43,30 +43,29 @@
   },
   "dependencies": {
     "@oddbird/popover-polyfill": "0.4.3",
-    "@primer/behaviors": "^1.3.4",
+    "@primer/behaviors": "1.8.0",
     "clsx": "^1.2.1"
   },
   "devDependencies": {
-    "@figma/code-connect": "^1.0.5",
+    "@figma/code-connect": "1.2.4",
     "@juggle/resize-observer": "^3.4.0",
-    "@primer/octicons-react": "^19.8.0",
-    "@reach/auto-id": "^0.17.0",
-    "@testing-library/dom": "^8.20.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "^13.5.0",
+    "@primer/octicons-react": "19.8.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.2.0",
+    "@testing-library/user-event": "14.6.0",
     "@types/jest": "^27.5.2",
-    "@types/react": "^17.0.62",
-    "@types/react-dom": "^17.0.20",
+    "@types/jest-axe": "3.5.9",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.0",
     "@types/webpack": "^5.28.1",
     "autoprefixer": "^9.8.8",
     "axe-playwright": "^1.2.3",
-    "color2k": "^2.0.2",
+    "color2k": "2.0.3",
     "css-loader": "^6.7.4",
     "identity-obj-proxy": "^3.0.0",
-    "jest-axe": "^6.0.1",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest-axe": "9.0.0",
+    "jest-environment-jsdom": "29.7.0",
     "mini-css-extract-plugin": "^2.7.6",
     "postcss": "^8.4.23",
     "postcss-loader": "^6.2.1",
@@ -80,8 +79,18 @@
     "webpack-cli": "^4.10.0"
   },
   "peerDependencies": {
-    "react": ">=17 <20",
-    "react-dom": ">=17 <20"
+    "@types/react": ">=18 <20",
+    "@types/react-dom": ">=18 <20",
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
   },
   "engines": {
     "node": ">=16.0.0",