@primer/react-brand 0.45.1-rc.e6eecf72 → 0.45.2-rc.1d48e726

package/lib/BreakoutBanner/BreakoutBanner.d.ts

@@ -75,20 +75,20 @@ export declare const BreakoutBanner: React.ForwardRefExoticComponent<Omit<BasePr
     } & {
         as?: typeof import("../").HeadingTags[number];
         size?: typeof import("../").HeadingSizes[number];
-        weight?: ("medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight") | {
-            narrow?: "medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight";
-            regular?: "medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight";
-            wide?: "medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight";
+        weight?: ("medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight") | {
+            narrow?: "medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight";
+            regular?: "medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight";
+            wide?: "medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight";
         };
         stretch?: ("normal" | "condensed" | "expanded") | {
             narrow?: "normal" | "condensed" | "expanded";
             regular?: "normal" | "condensed" | "expanded";
             wide?: "normal" | "condensed" | "expanded";
         };
-        letterSpacing?: ("normal" | "condensed" | "none") | {
-            narrow?: "normal" | "condensed" | "none";
-            regular?: "normal" | "condensed" | "none";
-            wide?: "normal" | "condensed" | "none";
+        letterSpacing?: ("normal" | "none" | "condensed") | {
+            narrow?: "normal" | "none" | "condensed";
+            regular?: "normal" | "none" | "condensed";
+            wide?: "normal" | "none" | "condensed";
         };
         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 | "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;
+        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;
         };
         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 | "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;
+        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;
         };
         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

@@ -103,20 +103,20 @@ export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<H
     } & {
         as?: typeof import("../Heading").HeadingTags[number];
         size?: typeof import("../Heading").HeadingSizes[number];
-        weight?: ("medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight") | {
-            narrow?: "medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight";
-            regular?: "medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight";
-            wide?: "medium" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "light" | "extralight";
+        weight?: ("medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight") | {
+            narrow?: "medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight";
+            regular?: "medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight";
+            wide?: "medium" | "light" | "heavy" | "extrabold" | "bold" | "semibold" | "normal" | "extralight";
         };
         stretch?: ("normal" | "condensed" | "expanded") | {
             narrow?: "normal" | "condensed" | "expanded";
             regular?: "normal" | "condensed" | "expanded";
             wide?: "normal" | "condensed" | "expanded";
         };
-        letterSpacing?: ("normal" | "condensed" | "none") | {
-            narrow?: "normal" | "condensed" | "none";
-            regular?: "normal" | "condensed" | "none";
-            wide?: "normal" | "condensed" | "none";
+        letterSpacing?: ("normal" | "none" | "condensed") | {
+            narrow?: "normal" | "none" | "condensed";
+            regular?: "normal" | "none" | "condensed";
+            wide?: "normal" | "none" | "condensed";
         };
         font?: "mona-sans" | "hubot-sans" | "monospace";
     } & React.HTMLAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/lib/Link/Link.d.ts

@@ -1,15 +1,17 @@
 import React from 'react';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/link/colors-with-modes.css';
 export declare const LinkVariants: readonly ["default", "accent"];
+export declare const LinkSizes: readonly ["medium", "large"];
+export declare const LinkArrowDirections: readonly ["start", "end", "none"];
 export type LinkProps = {
     /**
      * The size variations available in Link
      */
-    size?: 'medium' | 'large';
+    size?: (typeof LinkSizes)[number];
     /**
      * Position of the arrow.
      */
-    arrowDirection?: 'start' | 'end' | 'none';
+    arrowDirection?: (typeof LinkArrowDirections)[number];
     /**
      * Specify alternative link appearance
      */

package/lib/Pillar/Pillar.d.ts

@@ -17,6 +17,10 @@ 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;

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>;