@primer/react-brand 0.63.0 → 0.64.0

package/lib/Box/Box.d.ts

@@ -9,11 +9,16 @@ type ResponsiveSpacingMap = {
     wide?: SpacingValues;
 };
 export declare const BoxBackgroundColors: readonly ["default", "inset", "subtle", "overlay"];
-type BackgroundColors = (typeof BoxBackgroundColors)[number];
+type BackgroundColors = (typeof BoxBackgroundColors)[number] | AnyString;
 export declare const BoxBorderRadiusOptions: readonly ["small", "medium", "large", "xlarge", "full"];
 type BorderRadiusOptions = (typeof BoxBorderRadiusOptions)[number];
-export declare const BoxBorderWidthOptions: readonly ["thin", "thick", "thicker"];
+export declare const BoxBorderWidthOptions: readonly ["none", "thin", "thick", "thicker"];
 type BorderWidthOptions = (typeof BoxBorderWidthOptions)[number];
+type ResponsiveBorderWidthMap = {
+    narrow?: BorderWidthOptions;
+    regular?: BorderWidthOptions;
+    wide?: BorderWidthOptions;
+};
 export declare const BoxBorderColorOptions: readonly ["default", "muted", "subtle"];
 type BorderColorOptions = (typeof BoxBorderColorOptions)[number];
 type BorderStyleOptions = Extract<React.CSSProperties['borderStyle'], 'solid' | 'none'>;
@@ -57,11 +62,11 @@ type BoxProps = {
     marginInlineStart?: SpacingValues | ResponsiveSpacingMap;
     backgroundColor?: BackgroundColors;
     borderRadius?: BorderRadiusOptions;
-    borderWidth?: BorderWidthOptions;
-    borderBlockStartWidth?: BorderWidthOptions;
-    borderInlineEndWidth?: BorderWidthOptions;
-    borderBlockEndWidth?: BorderWidthOptions;
-    borderInlineStartWidth?: BorderWidthOptions;
+    borderWidth?: BorderWidthOptions | ResponsiveBorderWidthMap;
+    borderBlockStartWidth?: BorderWidthOptions | ResponsiveBorderWidthMap;
+    borderInlineEndWidth?: BorderWidthOptions | ResponsiveBorderWidthMap;
+    borderBlockEndWidth?: BorderWidthOptions | ResponsiveBorderWidthMap;
+    borderInlineStartWidth?: BorderWidthOptions | ResponsiveBorderWidthMap;
     borderColor?: BorderColorOptions;
     borderStyle?: BorderStyleOptions;
     /**

package/lib/Card/Card.d.ts

@@ -42,7 +42,9 @@ export type CardProps = {
      */
     align?: 'start' | 'center';
 } & Omit<BaseProps<HTMLDivElement>, 'animate'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> & Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
-type CardImageProps = ImageProps;
+type CardImageProps = {
+    position?: 'block-start' | 'block-end';
+} & ImageProps;
 declare function CardImage({ className, ...rest }: CardImageProps): import("react/jsx-runtime").JSX.Element;
 type CardIconProps = IconProps;
 type CardLabelProps = BaseProps<HTMLSpanElement> & {

package/lib/Hero/Hero.d.ts

@@ -1,17 +1,18 @@
-import React, { PropsWithChildren } from 'react';
-import { ButtonBaseProps } from '../Button';
-import { HeadingProps } from '../Heading';
-import { TextSizes, TextWeightVariants, ResponsiveWeightMap } from '../Text';
-import { LabelProps } from '../Label';
+import React from 'react';
 import type { BaseProps } from '../component-helpers';
+import type { HeroAlign, HeroVariant } from './HeroContext';
 /**
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css';
 export type HeroProps = BaseProps<HTMLElement> & {
-    align?: 'start' | 'center';
+    align?: HeroAlign;
     imageContainerClassName?: string;
     imageContainerStyle?: React.CSSProperties;
+    imageContainerRef?: React.RefObject<HTMLDivElement | null>;
+    imageBackgroundColor?: 'default' | 'subtle';
+    variant?: HeroVariant;
+    enableAnimation?: boolean;
     /**
      * Escape-hatch for inserting custom React components.
      * Warning:
@@ -21,25 +22,16 @@ export type HeroProps = BaseProps<HTMLElement> & {
     trailingComponent?: React.FunctionComponent;
     'data-testid'?: string;
 };
-type HeroHeadingProps = Omit<HeadingProps, 'as'> & {
-    fullWidth?: boolean;
-};
-type HeroVideoProps = {
-    position?: 'inline-end' | 'block-end';
-    'data-testid'?: string;
-} & PropsWithChildren<BaseProps<HTMLDivElement>>;
-type HeroEyebrowProps = PropsWithChildren<BaseProps<HTMLDivElement>>;
-type HeroLabelProps = LabelProps & BaseProps<HTMLSpanElement>;
 export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<HeroProps>, "ref"> & React.RefAttributes<HTMLElement>> & {
-    Heading: React.ForwardRefExoticComponent<Omit<HeroHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Heading: React.ForwardRefExoticComponent<Omit<import("./sub-components").HeroHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<(Omit<{
-        size?: (typeof TextSizes)[number];
-        weight?: TextWeightVariants | ResponsiveWeightMap;
+        size?: typeof import("..").TextSizes[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
     } & BaseProps<HTMLParagraphElement> & {
         font?: import("..").TextFontVariants;
-        size?: (typeof TextSizes)[number];
+        size?: typeof import("..").TextSizes[number];
         variant?: typeof import("..").TextVariants[number];
-        weight?: TextWeightVariants | ResponsiveWeightMap;
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
         align?: "start" | "center" | "end";
         hasAntiAliasing?: boolean;
     } & {
@@ -49,13 +41,13 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     } & {
         children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
-        size?: (typeof TextSizes)[number];
-        weight?: TextWeightVariants | ResponsiveWeightMap;
+        size?: typeof import("..").TextSizes[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
     } & BaseProps<HTMLParagraphElement> & {
         font?: import("..").TextFontVariants;
-        size?: (typeof TextSizes)[number];
+        size?: typeof import("..").TextSizes[number];
         variant?: typeof import("..").TextVariants[number];
-        weight?: TextWeightVariants | ResponsiveWeightMap;
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
         align?: "start" | "center" | "end";
         hasAntiAliasing?: boolean;
     } & {
@@ -65,13 +57,13 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     } & {
         children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
-        size?: (typeof TextSizes)[number];
-        weight?: TextWeightVariants | ResponsiveWeightMap;
+        size?: typeof import("..").TextSizes[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
     } & BaseProps<HTMLParagraphElement> & {
         font?: import("..").TextFontVariants;
-        size?: (typeof TextSizes)[number];
+        size?: typeof import("..").TextSizes[number];
         variant?: typeof import("..").TextVariants[number];
-        weight?: TextWeightVariants | ResponsiveWeightMap;
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
         align?: "start" | "center" | "end";
         hasAntiAliasing?: boolean;
     } & {
@@ -81,13 +73,13 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     } & {
         children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
-        size?: (typeof TextSizes)[number];
-        weight?: TextWeightVariants | ResponsiveWeightMap;
+        size?: typeof import("..").TextSizes[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
     } & BaseProps<HTMLParagraphElement> & {
         font?: import("..").TextFontVariants;
-        size?: (typeof TextSizes)[number];
+        size?: typeof import("..").TextSizes[number];
         variant?: typeof import("..").TextVariants[number];
-        weight?: TextWeightVariants | ResponsiveWeightMap;
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
         align?: "start" | "center" | "end";
         hasAntiAliasing?: boolean;
     } & {
@@ -97,13 +89,13 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     } & {
         children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
-        size?: (typeof TextSizes)[number];
-        weight?: TextWeightVariants | ResponsiveWeightMap;
+        size?: typeof import("..").TextSizes[number];
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
     } & BaseProps<HTMLParagraphElement> & {
         font?: import("..").TextFontVariants;
-        size?: (typeof TextSizes)[number];
+        size?: typeof import("..").TextSizes[number];
         variant?: typeof import("..").TextVariants[number];
-        weight?: TextWeightVariants | ResponsiveWeightMap;
+        weight?: import("..").TextWeightVariants | import("..").ResponsiveWeightMap;
         align?: "start" | "center" | "end";
         hasAntiAliasing?: boolean;
     } & {
@@ -116,14 +108,14 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     PrimaryAction: React.ForwardRefExoticComponent<(Omit<{
         as?: "a" | "button";
         href: string;
-    } & ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
+    } & import("..").ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
         as?: "a";
     } & {
         children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
         as?: "a" | "button";
         href: string;
-    } & ButtonBaseProps & BaseProps<HTMLButtonElement> & {
+    } & import("..").ButtonBaseProps & BaseProps<HTMLButtonElement> & {
         as?: "button";
     } & {
         children?: React.ReactNode | undefined;
@@ -131,20 +123,21 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     SecondaryAction: React.ForwardRefExoticComponent<(Omit<{
         as?: "a" | "button";
         href: string;
-    } & ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
+    } & import("..").ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
         as?: "a";
     } & {
         children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
         as?: "a" | "button";
         href: string;
-    } & ButtonBaseProps & BaseProps<HTMLButtonElement> & {
+    } & import("..").ButtonBaseProps & BaseProps<HTMLButtonElement> & {
         as?: "button";
     } & {
         children?: React.ReactNode | undefined;
     }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     Image: React.ForwardRefExoticComponent<(Omit<{
-        position?: "inline-end" | "block-end";
+        position?: import("./HeroContext").HeroMediaPositions;
+        enableBorder?: boolean;
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
         alt: string;
@@ -156,7 +149,8 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         as?: "img";
         srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
     }, "ref"> | Omit<{
-        position?: "inline-end" | "block-end";
+        position?: import("./HeroContext").HeroMediaPositions;
+        enableBorder?: boolean;
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
         alt: string;
@@ -172,12 +166,33 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         }[];
         srcSet?: undefined;
     }, "ref">) & React.RefAttributes<HTMLImageElement>>;
-    Video: React.ForwardRefExoticComponent<Omit<HeroVideoProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Label: React.ForwardRefExoticComponent<Omit<HeroLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-    Eyebrow: React.ForwardRefExoticComponent<Omit<HeroEyebrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Video: React.ForwardRefExoticComponent<(Omit<{
+        position?: import("./HeroContext").HeroMediaPositions;
+        enableBorder?: boolean;
+        'data-testid'?: string;
+    } & BaseProps<HTMLDivElement> & {
+        children?: React.ReactNode | undefined;
+    } & {
+        poster?: never;
+        posterAltText?: never;
+        posterTitle?: never;
+    }, "ref"> | Omit<{
+        position?: import("./HeroContext").HeroMediaPositions;
+        enableBorder?: boolean;
+        'data-testid'?: string;
+    } & BaseProps<HTMLDivElement> & {
+        children?: React.ReactNode | undefined;
+    } & {
+        poster: string;
+        posterAltText: string;
+        posterTitle: string;
+    }, "ref">) & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<import("./sub-components").HeroLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Eyebrow: React.ForwardRefExoticComponent<Omit<import("./sub-components").HeroEyebrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     testIds: {
         root: string;
         readonly video: string;
+        readonly grid: string;
+        readonly imageWrapper: string;
     };
 };
-export {};

package/lib/Hero/HeroContext.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export declare const HeroAlignOptions: readonly ["start", "center"];
+export type HeroAlign = (typeof HeroAlignOptions)[number];
+export declare const HeroVariantOptions: readonly ["default", "gridline", "gridline-expressive"];
+export type HeroVariant = (typeof HeroVariantOptions)[number];
+export declare const heroMediaPositions: readonly ["block-end", "block-end-padded", "inline-start", "inline-end", "inline-end-padded", "inline-start-padded"];
+export declare const heroMediaInlinePositions: ("block-end" | "block-end-padded" | "inline-start" | "inline-end" | "inline-end-padded" | "inline-start-padded")[];
+export type HeroMediaPositions = (typeof heroMediaPositions)[number];
+export type HeroMediaInlinePositions = (typeof heroMediaInlinePositions)[number];
+type HeroContextType = {
+    /**
+     * The active variant of the Hero component
+     */
+    variant: HeroVariant;
+    /**
+     * The alignment of the Hero content
+     */
+    align: HeroAlign;
+    /**
+     * Image position within the Hero
+     */
+    imagePosition: HeroMediaPositions;
+    /**
+     * Hero.Image is an inline media position
+     */
+    hasInlineMedia: boolean;
+    /**
+     * Whether animation is enabled for the Hero
+     */
+    enableAnimation: boolean;
+};
+export declare const HeroContext: React.Context<HeroContextType | undefined>;
+export declare const useHeroContext: () => HeroContextType;
+export {};

package/lib/Hero/sub-components/HeroDescription.d.ts

@@ -0,0 +1,87 @@
+import { TextSizes, TextWeightVariants, ResponsiveWeightMap, TextProps } from '../../Text';
+import type { BaseProps } from '../../component-helpers';
+export type HeroDescriptionProps = {
+    size?: (typeof TextSizes)[number];
+    weight?: TextWeightVariants | ResponsiveWeightMap;
+} & BaseProps<HTMLParagraphElement> & TextProps;
+export declare const HeroDescription: import("react").ForwardRefExoticComponent<(Omit<{
+    size?: (typeof TextSizes)[number];
+    weight?: TextWeightVariants | ResponsiveWeightMap;
+} & BaseProps<HTMLParagraphElement> & {
+    font?: import("../..").TextFontVariants;
+    size?: (typeof TextSizes)[number];
+    variant?: typeof import("../..").TextVariants[number];
+    weight?: TextWeightVariants | ResponsiveWeightMap;
+    align?: "start" | "center" | "end";
+    hasAntiAliasing?: boolean;
+} & {
+    as?: typeof import("../..").TextTags[number];
+} & import("react").HTMLAttributes<HTMLParagraphElement> & {
+    as?: "p";
+} & {
+    children?: import("react").ReactNode | undefined;
+}, "ref"> | Omit<{
+    size?: (typeof TextSizes)[number];
+    weight?: TextWeightVariants | ResponsiveWeightMap;
+} & BaseProps<HTMLParagraphElement> & {
+    font?: import("../..").TextFontVariants;
+    size?: (typeof TextSizes)[number];
+    variant?: typeof import("../..").TextVariants[number];
+    weight?: TextWeightVariants | ResponsiveWeightMap;
+    align?: "start" | "center" | "end";
+    hasAntiAliasing?: boolean;
+} & {
+    as?: typeof import("../..").TextTags[number];
+} & import("react").HTMLAttributes<HTMLSpanElement> & BaseProps<HTMLSpanElement> & {
+    as?: "span";
+} & {
+    children?: import("react").ReactNode | undefined;
+}, "ref"> | Omit<{
+    size?: (typeof TextSizes)[number];
+    weight?: TextWeightVariants | ResponsiveWeightMap;
+} & BaseProps<HTMLParagraphElement> & {
+    font?: import("../..").TextFontVariants;
+    size?: (typeof TextSizes)[number];
+    variant?: typeof import("../..").TextVariants[number];
+    weight?: TextWeightVariants | ResponsiveWeightMap;
+    align?: "start" | "center" | "end";
+    hasAntiAliasing?: boolean;
+} & {
+    as?: typeof import("../..").TextTags[number];
+} & import("react").HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {
+    as?: "div";
+} & {
+    children?: import("react").ReactNode | undefined;
+}, "ref"> | Omit<{
+    size?: (typeof TextSizes)[number];
+    weight?: TextWeightVariants | ResponsiveWeightMap;
+} & BaseProps<HTMLParagraphElement> & {
+    font?: import("../..").TextFontVariants;
+    size?: (typeof TextSizes)[number];
+    variant?: typeof import("../..").TextVariants[number];
+    weight?: TextWeightVariants | ResponsiveWeightMap;
+    align?: "start" | "center" | "end";
+    hasAntiAliasing?: boolean;
+} & {
+    as?: typeof import("../..").TextTags[number];
+} & import("react").HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
+    as?: "strong";
+} & {
+    children?: import("react").ReactNode | undefined;
+}, "ref"> | Omit<{
+    size?: (typeof TextSizes)[number];
+    weight?: TextWeightVariants | ResponsiveWeightMap;
+} & BaseProps<HTMLParagraphElement> & {
+    font?: import("../..").TextFontVariants;
+    size?: (typeof TextSizes)[number];
+    variant?: typeof import("../..").TextVariants[number];
+    weight?: TextWeightVariants | ResponsiveWeightMap;
+    align?: "start" | "center" | "end";
+    hasAntiAliasing?: boolean;
+} & {
+    as?: typeof import("../..").TextTags[number];
+} & import("react").HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
+    as?: "em";
+} & {
+    children?: import("react").ReactNode | undefined;
+}, "ref">) & import("react").RefAttributes<HTMLParagraphElement>>;

package/lib/Hero/sub-components/HeroEyebrow.d.ts

@@ -0,0 +1,4 @@
+import React, { PropsWithChildren } from 'react';
+import type { BaseProps } from '../../component-helpers';
+export type HeroEyebrowProps = PropsWithChildren<BaseProps<HTMLDivElement>>;
+export declare const HeroEyebrow: React.ForwardRefExoticComponent<Omit<HeroEyebrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/Hero/sub-components/HeroHeading.d.ts

@@ -0,0 +1,5 @@
+import { HeadingProps } from '../../Heading';
+export type HeroHeadingProps = Omit<HeadingProps, 'as'> & {
+    fullWidth?: boolean;
+};
+export declare const HeroHeading: import("react").ForwardRefExoticComponent<Omit<HeroHeadingProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

package/lib/Hero/sub-components/HeroImage.d.ts

@@ -0,0 +1,38 @@
+import { ImageProps } from '../../Image';
+import type { BaseProps } from '../../component-helpers';
+import { type HeroMediaPositions } from '../HeroContext';
+export type HeroImageProps = {
+    position?: HeroMediaPositions;
+    enableBorder?: boolean;
+} & ImageProps & BaseProps<HTMLImageElement>;
+export declare const HeroImage: import("react").ForwardRefExoticComponent<(Omit<{
+    position?: HeroMediaPositions;
+    enableBorder?: boolean;
+} & import("react").ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
+    src: string;
+    alt: string;
+    aspectRatio?: import("../..").ImageAspectRatio;
+    media?: string;
+    borderRadius?: import("../..").ImageBorderRadiusOptions;
+    srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
+} & {
+    as?: "img";
+    srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
+}, "ref"> | Omit<{
+    position?: HeroMediaPositions;
+    enableBorder?: boolean;
+} & import("react").ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
+    src: string;
+    alt: string;
+    aspectRatio?: import("../..").ImageAspectRatio;
+    media?: string;
+    borderRadius?: import("../..").ImageBorderRadiusOptions;
+    srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
+} & {
+    as: "picture";
+    sources?: {
+        srcset: string;
+        media: string;
+    }[];
+    srcSet?: undefined;
+}, "ref">) & import("react").RefAttributes<HTMLImageElement>>;

package/lib/Hero/sub-components/HeroLabel.d.ts

@@ -0,0 +1,7 @@
+import { TextProps } from '../../Text';
+import type { BaseProps } from '../../component-helpers';
+export type HeroLabelProps = Omit<TextProps, 'as' | 'ref' | 'animate'> & Omit<BaseProps<HTMLSpanElement>, 'animate'> & {
+    animate?: boolean;
+    animationDelay?: number;
+};
+export declare const HeroLabel: import("react").ForwardRefExoticComponent<Omit<HeroLabelProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/Hero/sub-components/HeroPrimaryAction.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ButtonBaseProps } from '../../Button';
+import type { BaseProps } from '../../component-helpers';
+type RestrictedPolymorphism = (BaseProps<HTMLAnchorElement> & {
+    as?: 'a';
+}) | (BaseProps<HTMLButtonElement> & {
+    as?: 'button';
+});
+export type HeroPrimaryActionProps = {
+    as?: 'a' | 'button';
+    href: string;
+} & ButtonBaseProps & RestrictedPolymorphism;
+export declare const HeroPrimaryAction: React.ForwardRefExoticComponent<(Omit<{
+    as?: "a" | "button";
+    href: string;
+} & ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
+    as?: "a";
+} & {
+    children?: React.ReactNode | undefined;
+}, "ref"> | Omit<{
+    as?: "a" | "button";
+    href: string;
+} & ButtonBaseProps & BaseProps<HTMLButtonElement> & {
+    as?: "button";
+} & {
+    children?: React.ReactNode | undefined;
+}, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export {};

package/lib/Hero/sub-components/HeroSecondaryAction.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ButtonBaseProps } from '../../Button';
+import type { BaseProps } from '../../component-helpers';
+type RestrictedPolymorphism = (BaseProps<HTMLAnchorElement> & {
+    as?: 'a';
+}) | (BaseProps<HTMLButtonElement> & {
+    as?: 'button';
+});
+export type HeroSecondaryActionProps = {
+    as?: 'a' | 'button';
+    href: string;
+} & ButtonBaseProps & RestrictedPolymorphism;
+export declare const HeroSecondaryAction: React.ForwardRefExoticComponent<(Omit<{
+    as?: "a" | "button";
+    href: string;
+} & ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
+    as?: "a";
+} & {
+    children?: React.ReactNode | undefined;
+}, "ref"> | Omit<{
+    as?: "a" | "button";
+    href: string;
+} & ButtonBaseProps & BaseProps<HTMLButtonElement> & {
+    as?: "button";
+} & {
+    children?: React.ReactNode | undefined;
+}, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export {};

package/lib/Hero/sub-components/HeroVideo.d.ts

@@ -0,0 +1,40 @@
+import React, { PropsWithChildren } from 'react';
+import type { BaseProps } from '../../component-helpers';
+import type { HeroMediaPositions } from '../HeroContext';
+type HeroVideoBaseProps = {
+    position?: HeroMediaPositions;
+    enableBorder?: boolean;
+    'data-testid'?: string;
+} & PropsWithChildren<BaseProps<HTMLDivElement>>;
+type PosterProps = {
+    poster?: never;
+    posterAltText?: never;
+    posterTitle?: never;
+} | {
+    poster: string;
+    posterAltText: string;
+    posterTitle: string;
+};
+export type HeroVideoProps = HeroVideoBaseProps & PosterProps;
+export declare const HeroVideo: React.ForwardRefExoticComponent<(Omit<{
+    position?: HeroMediaPositions;
+    enableBorder?: boolean;
+    'data-testid'?: string;
+} & BaseProps<HTMLDivElement> & {
+    children?: React.ReactNode | undefined;
+} & {
+    poster?: never;
+    posterAltText?: never;
+    posterTitle?: never;
+}, "ref"> | Omit<{
+    position?: HeroMediaPositions;
+    enableBorder?: boolean;
+    'data-testid'?: string;
+} & BaseProps<HTMLDivElement> & {
+    children?: React.ReactNode | undefined;
+} & {
+    poster: string;
+    posterAltText: string;
+    posterTitle: string;
+}, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/Hero/sub-components/index.d.ts

@@ -0,0 +1,16 @@
+export { HeroLabel } from './HeroLabel';
+export type { HeroLabelProps } from './HeroLabel';
+export { HeroHeading } from './HeroHeading';
+export type { HeroHeadingProps } from './HeroHeading';
+export { HeroDescription } from './HeroDescription';
+export type { HeroDescriptionProps } from './HeroDescription';
+export { HeroImage } from './HeroImage';
+export type { HeroImageProps } from './HeroImage';
+export { HeroVideo } from './HeroVideo';
+export type { HeroVideoProps } from './HeroVideo';
+export { HeroEyebrow } from './HeroEyebrow';
+export type { HeroEyebrowProps } from './HeroEyebrow';
+export { HeroPrimaryAction } from './HeroPrimaryAction';
+export type { HeroPrimaryActionProps } from './HeroPrimaryAction';
+export { HeroSecondaryAction } from './HeroSecondaryAction';
+export type { HeroSecondaryActionProps } from './HeroSecondaryAction';

package/lib/TextCursorAnimation/TextCursorAnimation.d.ts

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+import { TextProps } from '../Text/Text';
+export declare const testIds: {
+    root: string;
+    readonly cursor: string;
+};
+export type TextCursorAnimationProps = {
+    /**
+     * Whether to animate the text reveal with a sliding wipe animation
+     * and a cursor that transitions from grey to green.
+     */
+    animate?: boolean;
+    ['data-testid']?: string;
+    delay?: number;
+    waitForPageLoad?: boolean;
+} & React.HTMLAttributes<HTMLSpanElement> & Omit<TextProps, 'animate' | 'as'>;
+export declare function TextCursorAnimation({ children, className, animate, 'data-testid': testId, delay, waitForPageLoad, variant, }: PropsWithChildren<TextCursorAnimationProps>): import("react/jsx-runtime").JSX.Element;

package/lib/TextCursorAnimation/index.d.ts

@@ -0,0 +1 @@
+export * from './TextCursorAnimation';

package/lib/animation/AnimationProvider/AnimationProvider.d.ts

@@ -3,7 +3,7 @@ import React, { PropsWithChildren } from 'react';
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/animation/base.css';
-export declare const AnimationVariants: readonly ["fade-in", "fade-out", "slide-in-up", "slide-in-down", "slide-in-left", "slide-in-right", "scale-in-up", "scale-in-down", "scale-in", "fill-in-top", "scale-in-right", "scale-in-left", "fill-in-right"];
+export declare const AnimationVariants: readonly ["fade-in", "fade-out", "slide-in-up", "slide-in-down", "slide-in-left", "slide-in-right", "scale-in-up", "scale-in-down", "scale-in", "fill-in-top", "scale-in-right", "scale-in-left", "fill-in-right", "reveal-in-up"];
 type Variant = (typeof AnimationVariants)[number];
 type VariantAdvanced = {
     variant: Variant;
@@ -12,7 +12,7 @@ type VariantAdvanced = {
     ease?: string;
 };
 export type AnimateProps = Variant | VariantAdvanced;
-type AnimationTrigger = 'click' | 'on-visible';
+type AnimationTrigger = 'click' | 'on-visible' | 'immediate';
 type IntersectionVisibilityeOptions = 'bottom-of-screen' | 'middle-of-screen' | 'about-to-leave' | number;
 type AnimationProviderProps = {
     /**
@@ -20,7 +20,7 @@ type AnimationProviderProps = {
      */
     disableAnimations?: boolean;
     /**
-     * Controls the trigger method for the animation. One of `click` or `on-visible`.
+     * Controls the trigger method for the animation. One of `click`, `on-visible`, or `immediate`.
      */
     animationTrigger?: AnimationTrigger;
     /**