@primer/react-brand 0.64.1-rc.83bbe583 → 0.65.0-rc.0895cfab

package/lib/Accordion/Accordion.d.ts

@@ -19,6 +19,7 @@ export type AccordionHeadingProps = HTMLAttributes<HTMLElement> & {
     as?: HeadingProps['as'];
     reversedToggles?: boolean;
     toggleColor?: (typeof AccordionToggleColors)[number];
+    weight?: HeadingProps['weight'];
 };
 /**
  * TODO This type is incorrect
@@ -29,6 +30,7 @@ export declare const AccordionHeading: React.ForwardRefExoticComponent<React.HTM
     as?: HeadingProps["as"];
     reversedToggles?: boolean;
     toggleColor?: (typeof AccordionToggleColors)[number];
+    weight?: HeadingProps["weight"];
 } & React.RefAttributes<HTMLHeadingElement>>;
 export type AccordionContentProps = HTMLAttributes<HTMLElement>;
 export declare const AccordionContent: ({ className, ...rest }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
@@ -42,5 +44,6 @@ export declare const Accordion: React.ForwardRefExoticComponent<React.DetailsHTM
         as?: HeadingProps["as"];
         reversedToggles?: boolean;
         toggleColor?: (typeof AccordionToggleColors)[number];
+        weight?: HeadingProps["weight"];
     } & React.RefAttributes<HTMLHeadingElement>>;
 };

package/lib/FAQ/FAQ.d.ts

@@ -7,7 +7,9 @@ import type { BaseProps } from '../component-helpers';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/faq.css';
-export type FAQRootProps = PropsWithChildren<BaseProps<HTMLElement>> & React.HTMLAttributes<HTMLElement>;
+export type FAQRootProps = {
+    variant?: 'default' | 'gridline';
+} & PropsWithChildren<BaseProps<HTMLElement>> & React.HTMLAttributes<HTMLElement>;
 type FAQHeadingProps = BaseProps<HTMLHeadingElement> & {
     align?: 'start' | 'center';
     children: React.ReactNode | React.ReactNode[];
@@ -18,7 +20,7 @@ export type FAQSubheadingProps = BaseProps<HTMLHeadingElement> & {
     children: React.ReactNode | React.ReactNode[];
     as?: Exclude<HeadingProps['as'], 'h1'>;
 } & HeadingProps;
-declare function FAQSubheading({ children, className, as, size, weight, ...rest }: FAQSubheadingProps): import("react/jsx-runtime").JSX.Element;
+declare function FAQSubheading({ children, className, as, size, font, weight, ...rest }: FAQSubheadingProps): import("react/jsx-runtime").JSX.Element;
 /**
  * FAQ component:
  * {@link https://primer.style/brand/components/FAQ/ See usage examples}.
@@ -35,6 +37,7 @@ export declare const FAQ: React.ForwardRefExoticComponent<Omit<FAQRootProps, "re
         as?: HeadingProps["as"];
         reversedToggles?: boolean;
         toggleColor?: typeof import("..").AccordionToggleColors[number];
+        weight?: HeadingProps["weight"];
     } & React.RefAttributes<HTMLHeadingElement>>;
     Answer: ({ className, ...rest }: import("..").AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
 };

package/lib/FAQ/FAQGroup.d.ts

@@ -9,10 +9,11 @@ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/compone
 declare function HeadingBase({ children, className, as, ...rest }: FAQSubheadingProps): import("react/jsx-runtime").JSX.Element;
 export type FAQGroupProps = React.PropsWithChildren<{
     id?: string;
+    variant?: 'default' | 'gridline';
     defaultSelectedIndex?: number;
     tabAttributes?: (children: React.ReactNode, index: number) => Record<string, unknown>;
 }>;
-declare function FAQGroupBase({ children, id, defaultSelectedIndex, tabAttributes, ...rest }: FAQGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function FAQGroupBase({ children, id, variant, defaultSelectedIndex, tabAttributes, ...rest }: FAQGroupProps): import("react/jsx-runtime").JSX.Element;
 /**
  * FAQGroup component:
  * {@link https://primer.style/brand/components/FAQ#grouped-faqs See usage examples}.

package/lib/Grid/Grid.d.ts

@@ -24,6 +24,18 @@ export type GridProps<T extends keyof JSX.IntrinsicElements = 'div'> = React.HTM
      * Visual aid to help with alignment.
      */
     enableOverlay?: boolean;
+    /**
+     * Enable/disable default gutters
+     */
+    enableGutters?: boolean;
+    /**
+     * Sets the gap between columns.
+     */
+    columnGap?: 'none' | 'default';
+    /**
+     * Sets the gap between rows.
+     */
+    rowGap?: 'none' | 'default';
     /**
      * Fills the width of the parent container and removes the max-width.
      */
@@ -57,6 +69,18 @@ export declare const Grid: React.NamedExoticComponent<React.HTMLAttributes<"div"
      * Visual aid to help with alignment.
      */
     enableOverlay?: boolean;
+    /**
+     * Enable/disable default gutters
+     */
+    enableGutters?: boolean;
+    /**
+     * Sets the gap between columns.
+     */
+    columnGap?: "none" | "default";
+    /**
+     * Sets the gap between rows.
+     */
+    rowGap?: "none" | "default";
     /**
      * Fills the width of the parent container and removes the max-width.
      */
@@ -68,7 +92,7 @@ export declare const Grid: React.NamedExoticComponent<React.HTMLAttributes<"div"
 } & BaseProps<HTMLDivElement> & {
     children?: React.ReactNode | undefined;
 }> & {
-    readonly type: ({ className, children, as, fullWidth, enableOverlay, ["data-testid"]: testId, ...rest }: PropsWithChildren<GridProps>) => import("react/jsx-runtime").JSX.Element;
+    readonly type: ({ className, children, as, fullWidth, enableOverlay, enableGutters, columnGap, rowGap, ["data-testid"]: testId, ...rest }: PropsWithChildren<GridProps>) => import("react/jsx-runtime").JSX.Element;
 } & {
     Column: React.MemoExoticComponent<({ children, as, span, start, className, ...rest }: PropsWithChildren<GridColumnProps>) => import("react/jsx-runtime").JSX.Element>;
     testIds: {

package/lib/LogoSuite/LogoSuite.d.ts

@@ -19,6 +19,10 @@ export type LogoSuiteProps = {
      * Test id for the root LogoSuite element.
      */
     'data-testid'?: string;
+    /**
+     * Alternative presentation
+     */
+    variant?: 'default' | 'gridline-expressive';
 } & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
 export type LogoSuiteHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps & {
     /**
@@ -47,12 +51,18 @@ export type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {
      * The stylistic variant of the LogoBar.
      */
     variant?: 'muted' | 'emphasis';
+    /**
+     * Displays an optional takeover button (as an anchor) on hover/focus.
+     */
+    takeoverButton?: {
+        label: string;
+    } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & BaseProps<HTMLAnchorElement>;
 };
 /**
  * Use LogoSuite to present a list of logos, such as sponsors or vendors.
  * @see https://primer.style/brand/components/LogoSuite
  */
-export declare const LogoSuite: (({ align, children, className, hasDivider, "data-testid": testId, }: PropsWithChildren<LogoSuiteProps>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const LogoSuite: (({ align, children, className, hasDivider, variant, "data-testid": testId, }: PropsWithChildren<LogoSuiteProps>) => import("react/jsx-runtime").JSX.Element) & {
     Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<LogoSuiteHeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<(Omit<BaseProps<HTMLParagraphElement> & {
         font?: import("../Text").TextFontVariants;