@primer/react-brand 0.25.0-rc.d813472 → 0.25.0-rc.e417817

package/lib/CTABanner/CTABanner.d.ts

@@ -4,14 +4,14 @@ import type { BaseProps } from '../component-helpers';
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css';
-export type CTABannerProps = BaseProps<HTMLElement> & {
+export type CTABannerProps = BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
     children: React.ReactNode | React.ReactNode[];
     align?: 'start' | 'center';
     hasBorder?: boolean;
     hasShadow?: boolean;
     hasBackground?: boolean;
 };
-export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLElement> & {
+export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
     children: React.ReactNode | React.ReactNode[];
     align?: "start" | "center" | undefined;
     hasBorder?: boolean | undefined;

package/lib/Grid/Grid.d.ts

@@ -36,7 +36,7 @@ type GridColumnProps<T extends keyof JSX.IntrinsicElements = 'div'> = {
     as?: T | 'div' | 'span' | 'section';
     span?: GridColumnIndex | ResponsiveMap;
     start?: GridColumnIndex | ResponsiveMap;
-} & (T extends 'span' ? BaseProps<HTMLSpanElement> : T extends 'section' ? BaseProps<HTMLElement> : BaseProps<HTMLDivElement>);
+} & (T extends 'span' ? BaseProps<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> : T extends 'section' ? BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> : BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>);
 /**
  * Use Grid to create flexible and responsive grid-based layouts
  * @see https://primer.style/brand/components/Grid

package/lib/Hero/Hero.d.ts

@@ -8,6 +8,8 @@ import type { BaseProps } from '../component-helpers';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css';
 export type HeroProps = BaseProps<HTMLElement> & {
     align?: 'start' | 'center';
+    imageContainerClassName?: string;
+    imageContainerStyle?: React.CSSProperties;
 };
 type HeroHeadingProps = Omit<HeadingProps, 'as'>;
 type HeroDescriptionProps = {

package/lib/MinimalFooter/MinimalFooter.d.ts

@@ -4,7 +4,7 @@ import { BaseProps } from '../component-helpers';
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes.css';
-export declare const MinimalFooterSocialLinks: readonly ["twitter", "github", "linkedin", "youtube", "facebook", "twitch", "tiktok", "instagram"];
+export declare const MinimalFooterSocialLinks: readonly ["x", "github", "linkedin", "youtube", "facebook", "twitch", "tiktok", "instagram"];
 type SocialLinks = (typeof MinimalFooterSocialLinks)[number];
 export type MinimalFooterProps = {
     /**

package/lib/SectionIntro/SectionIntro.d.ts

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

package/lib/Stack/Stack.d.ts

@@ -96,25 +96,25 @@ export declare const Stack: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLE
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    gap?: "normal" | "condensed" | "none" | 4 | 8 | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
+    gap?: "normal" | 4 | "condensed" | "none" | 8 | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
     /**
      * Applies vertical alignment to child elements relative to the Stack, using the align-items CSS property.
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    alignItems?: "center" | "flex-start" | "flex-end" | ResponsiveAlignItemsMap | undefined;
+    alignItems?: "center" | "flex-end" | "flex-start" | ResponsiveAlignItemsMap | undefined;
     /**
      * Defines the padding CSS property on the parent Stack.
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    padding?: "normal" | "condensed" | "none" | 4 | 8 | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
+    padding?: "normal" | 4 | "condensed" | "none" | 8 | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
     /**
      * Applies horizontal alignment to child elements relative to the Stack, using the justify-content CSS property.
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | ResponsiveJustifyContentMap | undefined;
+    justifyContent?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | ResponsiveJustifyContentMap | undefined;
     /**
      * Forward inline styles
      */
@@ -122,6 +122,6 @@ export declare const Stack: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLE
     /**
      * Applies flex-wrap to the Stack, using the flex-wrap CSS property.
      */
-    flexWrap?: "wrap" | "nowrap" | ResponsiveFlexWrapMap | undefined;
+    flexWrap?: "nowrap" | "wrap" | ResponsiveFlexWrapMap | undefined;
 } & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>>;
 export {};

package/lib/Timeline/Timeline.d.ts

@@ -5,12 +5,14 @@ import { BaseProps } from '../component-helpers';
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/timeline/colors-with-modes.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/timeline/base.css';
-export type TimelineProps = BaseProps<HTMLUListElement>;
+export type TimelineProps = {
+    fullWidth?: boolean;
+} & BaseProps<HTMLUListElement>;
 export type TimelineItemProps = BaseProps<HTMLLIElement>;
 /**
  * Use Timeline to display a list of connected items as a vertical timeline.
  * @see https://primer.style/brand/components/Timeline
  */
-export declare const Timeline: (({ animate, className, children, ...rest }: PropsWithChildren<TimelineProps>) => JSX.Element) & {
+export declare const Timeline: (({ animate, className, children, fullWidth, ...rest }: PropsWithChildren<TimelineProps>) => JSX.Element) & {
     Item: ({ className, children, ...rest }: PropsWithChildren<TimelineItemProps>) => JSX.Element;
 };