@primer/react-brand 0.45.1-rc.1cde35f6 → 0.45.1-rc.7fe89274

package/lib/BreakoutBanner/BreakoutBanner.d.ts

@@ -85,10 +85,10 @@ export declare const BreakoutBanner: React.ForwardRefExoticComponent<Omit<BasePr
             regular?: "normal" | "condensed" | "expanded";
             wide?: "normal" | "condensed" | "expanded";
         };
-        letterSpacing?: ("normal" | "none" | "condensed") | {
-            narrow?: "normal" | "none" | "condensed";
-            regular?: "normal" | "none" | "condensed";
-            wide?: "normal" | "none" | "condensed";
+        letterSpacing?: ("normal" | "condensed" | "none") | {
+            narrow?: "normal" | "condensed" | "none";
+            regular?: "normal" | "condensed" | "none";
+            wide?: "normal" | "condensed" | "none";
         };
         font?: "mona-sans" | "hubot-sans" | "monospace";
     } & React.HTMLAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
@@ -102,20 +102,20 @@ export declare const BreakoutBanner: React.ForwardRefExoticComponent<Omit<BasePr
             regular?: "horizontal" | "vertical";
             wide?: "horizontal" | "vertical";
         };
-        gap?: ("normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128) | {
-            narrow?: "normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128;
-            regular?: "normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128;
-            wide?: "normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128;
+        gap?: ("normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128) | {
+            narrow?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128;
+            regular?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128;
+            wide?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128;
         };
         alignItems?: ("center" | "flex-end" | "flex-start") | {
             narrow?: "center" | "flex-end" | "flex-start";
             regular?: "center" | "flex-end" | "flex-start";
             wide?: "center" | "flex-end" | "flex-start";
         };
-        padding?: ("normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128) | {
-            narrow?: "normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128;
-            regular?: "normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128;
-            wide?: "normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128;
+        padding?: ("normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128) | {
+            narrow?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128;
+            regular?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128;
+            wide?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128;
         };
         justifyContent?: ("center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start") | {
             narrow?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start";

package/lib/CTABanner/CTABanner.d.ts

@@ -113,10 +113,10 @@ export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<H
             regular?: "normal" | "condensed" | "expanded";
             wide?: "normal" | "condensed" | "expanded";
         };
-        letterSpacing?: ("normal" | "none" | "condensed") | {
-            narrow?: "normal" | "none" | "condensed";
-            regular?: "normal" | "none" | "condensed";
-            wide?: "normal" | "none" | "condensed";
+        letterSpacing?: ("normal" | "condensed" | "none") | {
+            narrow?: "normal" | "condensed" | "none";
+            regular?: "normal" | "condensed" | "none";
+            wide?: "normal" | "condensed" | "none";
         };
         font?: "mona-sans" | "hubot-sans" | "monospace";
     } & React.HTMLAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/lib/Pillar/Pillar.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { HeadingProps, LinkProps } from '..';
+import { HeadingProps, type ImageProps, LinkProps } from '..';
 import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens
@@ -17,7 +17,13 @@ export type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.H
      * Aligns the pillar content
      */
     align?: 'start' | 'center';
+    /**
+     * Enables optional border around the pillar content
+     */
+    hasBorder?: boolean;
 } & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>);
+type PillarImageProps = ImageProps;
+declare function PillarImage({ className, ...rest }: PillarImageProps): JSX.Element;
 type PillarIconProps = BaseProps<HTMLSpanElement> & {
     icon: React.ReactNode | IconProps;
     color?: (typeof PillarIconColors)[number];
@@ -34,6 +40,7 @@ type PillarDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>>
  */
 export declare const Pillar: React.ForwardRefExoticComponent<Omit<PillarProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Icon: typeof PillarIcon;
+    Image: typeof PillarImage;
     Heading: React.ForwardRefExoticComponent<Omit<PillarHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<Omit<PillarDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     Link: React.ForwardRefExoticComponent<Omit<{

package/lib/SectionIntro/SectionIntro.d.ts

@@ -6,6 +6,13 @@ import type { BaseProps } from '../component-helpers';
 export type SectionIntroProps = {
     align?: 'start' | 'center';
     fullWidth?: 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;
 } & React.HTMLAttributes<HTMLHeadingElement> & BaseProps<HTMLHeadingElement>;
 type SectionIntroHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps;
 type SectionIntroLabelProps = LabelProps & BaseProps<HTMLDivElement>;