@primer/react-brand 0.41.1-rc.a76baae0 → 0.42.0-rc.1ce0b8dd

package/lib/Bento/Bento.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
-import { Icon } from '@primer/octicons-react';
 import type { BaseProps } from '../component-helpers';
 import { HeadingProps, ColorMode as FullColorMode } from '../';
+import type { IconProps } from '../Icon';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css';
 type ColorMode = Exclude<FullColorMode, 'auto'>;
 export type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
@@ -29,7 +29,7 @@ type BentoItemProps = {
     bgColor?: 'default' | 'subtle';
 } & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>;
 type BentoContentProps = {
-    leadingVisual?: ReactElement | Icon;
+    leadingVisual?: ReactElement<IconProps>;
     padding?: Padding | ResponsivePadding;
     verticalAlign?: Align | ResponsiveAlign;
     horizontalAlign?: Exclude<Align, 'end'> | Partial<Record<Size, Exclude<Align, 'end'>>>;

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

@@ -35,10 +35,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/Card/Card.d.ts

@@ -1,14 +1,12 @@
 import React from 'react';
-import { HeadingProps } from '..';
-import { LabelColors } from '../Label';
-import { ImageProps } from '../Image';
+import { HeadingProps, type ImageProps, LabelColors } from '..';
+import { type IconProps } from '../Icon';
 import type { BaseProps } from '../component-helpers';
 /**
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css';
-import { Icon as IconProps } from '@primer/octicons-react';
 export declare const CardIconColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow"];
 export declare const defaultCardIconColor: "default";
 export type CardProps = {
@@ -40,13 +38,7 @@ export type CardProps = {
 } & Omit<BaseProps<HTMLDivElement>, 'animate'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> & Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'>;
 type CardImageProps = ImageProps;
 declare function CardImage({ className, ...rest }: CardImageProps): JSX.Element;
-type CardIconProps = BaseProps<HTMLSpanElement> & {
-    icon: React.ReactNode | IconProps;
-    color?: (typeof CardIconColors)[number];
-    hasBackground?: boolean;
-    ['aria-hidden']?: boolean;
-};
-declare function CardIcon({ 'aria-hidden': ariaHidden, icon: Icon, className, color, hasBackground, ...rest }: CardIconProps): JSX.Element;
+type CardIconProps = IconProps;
 type CardLabelProps = BaseProps<HTMLSpanElement> & {
     children: React.ReactNode | React.ReactNode[];
     color?: (typeof LabelColors)[number];
@@ -66,7 +58,7 @@ type CardDescriptionProps = BaseProps<HTMLParagraphElement> & {
 export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Image: typeof CardImage;
     Label: React.ForwardRefExoticComponent<Omit<CardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-    Icon: typeof CardIcon;
+    Icon: ({ className, ...props }: IconProps) => JSX.Element;
     Heading: React.ForwardRefExoticComponent<Omit<CardHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<Omit<CardDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 };

package/lib/Icon/Icon.d.ts

@@ -1,6 +1,7 @@
-import { type SVGAttributes } from 'react';
+import React, { type SVGAttributes } from 'react';
 import { type Icon as OcticonProps } from '@primer/octicons-react';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon/colors.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/icon/colors-with-modes.css';
 export declare const namedIconSizes: readonly ["small", "medium", "large"];
 export type NamedIconSize = (typeof namedIconSizes)[number];
 export declare const numericIconSizes: readonly [20, 24, 28, 32, 36, 40, 44];
@@ -13,7 +14,7 @@ export declare const iconColors: readonly ["default", "blue", "coral", "green",
 export type IconColor = (typeof iconColors)[number];
 export declare const defaultIconColor: "default";
 export type IconProps = SVGAttributes<SVGElement> & {
-    icon: OcticonProps;
+    icon: OcticonProps | React.ReactElement<OcticonProps>;
     color?: IconColor;
     hasBackground?: boolean;
     size?: IconSize;