@primer/react-brand 0.36.0-rc.f6b4a088 → 0.36.1-rc.1b562c90

package/lib/ActionMenu/ActionMenu.d.ts

@@ -5,7 +5,7 @@ import type { BaseProps } from '../component-helpers';
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css';
-export declare const actionMenuOverlaySides: import("@primer/behaviors").AnchorSide[];
+export declare const actionMenuOverlaySides: PositionSettings["side"][];
 export type ActionMenuSizes = 'small' | 'medium';
 export type ActionMenuProps = {
     /**
@@ -90,82 +90,82 @@ export declare const ActionMenu: React.NamedExoticComponent<{
     /**
      * Determines whether the ActionMenu is disabled
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
      * Determines whether the ActionMenu is open by default
      */
-    open?: boolean | undefined;
+    open?: boolean;
     /**
      * Callback that is called when an item is selected.
      * The value of the selected item is passed as an argument.
      */
-    onSelect?: ((newValue: string) => void) | undefined;
+    onSelect?: (newValue: string) => void;
     /**
      * The selection variant of the ActionMenu.
      * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.
      * - `none`: No items can be selected. Menu items as a menuitem.
      */
-    selectionVariant?: "none" | "single" | undefined;
+    selectionVariant?: "single" | "none";
     /**
      * Test id for the ActionMenu
      */
-    'data-testid'?: string | undefined;
+    'data-testid'?: string;
     /**
      * Horizontal alignment of the menu relative to the bottom of the button
      */
-    menuAlignment?: "start" | "end" | undefined;
+    menuAlignment?: "start" | "end";
     /**
      * Size configuratin of the ActionMenu
      */
-    size?: ActionMenuSizes | undefined;
-    menuSide?: import("@primer/behaviors").AnchorSide | undefined;
+    size?: ActionMenuSizes;
+    menuSide?: PositionSettings["side"];
 } & BaseProps<HTMLDivElement>> & {
     readonly type: ({ id, children, "data-testid": testId, disabled, open, selectionVariant, menuAlignment, size, menuSide, onSelect, }: ActionMenuProps) => JSX.Element;
 } & {
     Button: React.ForwardRefExoticComponent<(Omit<((instance: HTMLButtonElement | null) => void) & {
-        children?: React.ReactNode;
+        children?: React.ReactNode | undefined;
     } & {
-        id?: string | undefined;
-        ref?: React.RefObject<HTMLButtonElement> | undefined;
-        className?: string | undefined;
-        menuOpen?: boolean | undefined;
-        disabled?: boolean | undefined;
-        onClick?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
-        'data-testid'?: string | undefined;
-        size?: ActionMenuSizes | undefined;
+        id?: string;
+        ref?: React.RefObject<HTMLButtonElement>;
+        className?: string;
+        menuOpen?: boolean;
+        disabled?: boolean;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+        'data-testid'?: string;
+        size?: ActionMenuSizes;
     }, "ref"> | Omit<React.RefObject<HTMLButtonElement> & {
-        children?: React.ReactNode;
+        children?: React.ReactNode | undefined;
     } & {
-        id?: string | undefined;
-        ref?: React.RefObject<HTMLButtonElement> | undefined;
-        className?: string | undefined;
-        menuOpen?: boolean | undefined;
-        disabled?: boolean | undefined;
-        onClick?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
-        'data-testid'?: string | undefined;
-        size?: ActionMenuSizes | undefined;
+        id?: string;
+        ref?: React.RefObject<HTMLButtonElement>;
+        className?: string;
+        menuOpen?: boolean;
+        disabled?: boolean;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+        'data-testid'?: string;
+        size?: ActionMenuSizes;
     }, "ref">) & React.RefAttributes<HTMLButtonElement>>;
     Item: ({ children, className, disabled, handler, selected, type, value, ...props }: ActionMenuItemProps) => JSX.Element;
     Overlay: React.ForwardRefExoticComponent<(Omit<((instance: HTMLUListElement | null) => void) & {
-        children?: React.ReactNode;
+        children?: React.ReactNode | undefined;
     } & {
         'aria-label': string;
-        id?: string | undefined;
-        ref?: React.RefObject<HTMLUListElement> | undefined;
-        className?: string | undefined;
-        'data-testid'?: string | undefined;
-        menuOpen?: boolean | undefined;
-        style?: React.CSSProperties | undefined;
+        id?: string;
+        ref?: React.RefObject<HTMLUListElement>;
+        className?: string;
+        'data-testid'?: string;
+        menuOpen?: boolean;
+        style?: React.CSSProperties;
     }, "ref"> | Omit<React.RefObject<HTMLUListElement> & {
-        children?: React.ReactNode;
+        children?: React.ReactNode | undefined;
     } & {
         'aria-label': string;
-        id?: string | undefined;
-        ref?: React.RefObject<HTMLUListElement> | undefined;
-        className?: string | undefined;
-        'data-testid'?: string | undefined;
-        menuOpen?: boolean | undefined;
-        style?: React.CSSProperties | undefined;
+        id?: string;
+        ref?: React.RefObject<HTMLUListElement>;
+        className?: string;
+        'data-testid'?: string;
+        menuOpen?: boolean;
+        style?: React.CSSProperties;
     }, "ref">) & React.RefAttributes<HTMLUListElement>>;
     testIds: {
         root: string;

package/lib/BreakoutBanner/BreakoutBanner.d.ts

@@ -0,0 +1,133 @@
+import React, { ReactElement } from 'react';
+import { Icon } from '@primer/octicons-react';
+import type { BaseProps } from '../component-helpers';
+type ResponsiveMap<T> = {
+    narrow?: T;
+    regular?: T;
+    wide?: T;
+};
+export declare const BreakoutBannerBackgroundColors: readonly ["default", "subtle"];
+type ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>;
+type BackgroundColors = (typeof BreakoutBannerBackgroundColors)[number] | AnyString;
+type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;
+type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
+type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
+export type BreakoutBannerProps = BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * The alignment of the content within the banner
+     */
+    align?: 'start' | 'center';
+    /**
+     * Optional, custom background color
+     */
+    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
+    /**
+     * Optional, custom background image
+     */
+    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap;
+    /**
+     * Optional, custom background position
+     */
+    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap;
+    /**
+     * Optional, custom background size
+     */
+    backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap;
+    /**
+     * An optional leading visual that appears before the heading
+     */
+    leadingVisual?: ReactElement | Icon;
+};
+/**
+ * Breakout banner component
+ * {@link https://primer.style/brand/components/BreakoutBanner/ See usage examples}.
+ */
+export declare const BreakoutBanner: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * The alignment of the content within the banner
+     */
+    align?: "start" | "center";
+    /**
+     * Optional, custom background color
+     */
+    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
+    /**
+     * Optional, custom background image
+     */
+    backgroundImageSrc?: string | ResponsiveBackgroundImageSrcMap;
+    /**
+     * Optional, custom background position
+     */
+    backgroundImagePosition?: string | ResponsiveBackgroundImagePositionMap;
+    /**
+     * Optional, custom background size
+     */
+    backgroundImageSize?: string | ResponsiveBackgroundImageSizeMap;
+    /**
+     * An optional leading visual that appears before the heading
+     */
+    leadingVisual?: ReactElement | Icon;
+}, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Heading: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLHeadingElement> & {
+        children: React.ReactNode | React.ReactNode[];
+    } & {
+        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";
+        };
+        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";
+        };
+        font?: "mona-sans" | "hubot-sans" | "monospace";
+    } & React.HTMLAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLParagraphElement> & {
+        children: React.ReactNode | React.ReactNode[];
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    LinkGroup: React.ForwardRefExoticComponent<Omit<Omit<BaseProps<HTMLElement> & {
+        children: React.ReactNode[] | React.ReactNode;
+        direction?: ("horizontal" | "vertical") | {
+            narrow?: "horizontal" | "vertical";
+            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;
+        };
+        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;
+        };
+        justifyContent?: ("center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start") | {
+            narrow?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start";
+            regular?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start";
+            wide?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start";
+        };
+        style?: React.CSSProperties;
+        flexWrap?: ("nowrap" | "wrap") | {
+            narrow?: "nowrap" | "wrap";
+            regular?: "nowrap" | "wrap";
+            wide?: "nowrap" | "wrap";
+        };
+    } & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/lib/BreakoutBanner/BreakoutBanner.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/BreakoutBanner/index.d.ts

@@ -0,0 +1 @@
+export * from './BreakoutBanner';

package/lib/ButtonGroup/ButtonGroup.d.ts

@@ -9,7 +9,7 @@ export type ButtonGroupProps = BaseProps<HTMLDivElement> & {
 };
 export declare const ButtonGroup: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLDivElement> & {
     children: PrimerBrandButtonType[] | PrimerBrandButtonType;
-    buttonSize?: ButtonProps<'button' | 'a'>['size'];
-    buttonsAs?: React.ElementType<any> | undefined;
+    buttonSize?: ButtonProps<"button" | "a">["size"];
+    buttonsAs?: React.ElementType;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/CTABanner/CTABanner.d.ts

@@ -14,40 +14,40 @@ export type CTABannerProps = BaseProps<HTMLElement> & React.HTMLAttributes<HTMLE
 };
 export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
     children: React.ReactNode | React.ReactNode[];
-    align?: "start" | "center" | undefined;
-    hasBorder?: boolean | undefined;
-    hasShadow?: boolean | undefined;
-    hasBackground?: boolean | undefined;
-    trailingComponent?: React.FunctionComponent<{}> | undefined;
+    align?: "start" | "center";
+    hasBorder?: boolean;
+    hasShadow?: boolean;
+    hasBackground?: boolean;
+    trailingComponent?: React.FunctionComponent;
 }, "ref"> & React.RefAttributes<HTMLElement>> & {
     Heading: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLHeadingElement> & {
         children: React.ReactNode | React.ReactNode[];
     } & {
-        as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
-        size?: "display" | "1" | "2" | "3" | "4" | "5" | "6" | "subhead-large" | "subhead-medium" | undefined;
-        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | {
-            narrow?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | undefined;
-            regular?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | undefined;
-            wide?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | undefined;
-        } | undefined;
-        stretch?: "normal" | "condensed" | "expanded" | {
-            narrow?: "normal" | "condensed" | "expanded" | undefined;
-            regular?: "normal" | "condensed" | "expanded" | undefined;
-            wide?: "normal" | "condensed" | "expanded" | undefined;
-        } | undefined;
-        letterSpacing?: "normal" | "condensed" | "none" | {
-            narrow?: "normal" | "condensed" | "none" | undefined;
-            regular?: "normal" | "condensed" | "none" | undefined;
-            wide?: "normal" | "condensed" | "none" | undefined;
-        } | undefined;
-        font?: "mona-sans" | "hubot-sans" | "monospace" | undefined;
+        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";
+        };
+        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";
+        };
+        font?: "mona-sans" | "hubot-sans" | "monospace";
     } & React.HTMLAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLParagraphElement> & {
         children: React.ReactNode | React.ReactNode[];
     }, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     ButtonGroup: React.ForwardRefExoticComponent<Omit<Omit<BaseProps<HTMLDivElement> & {
-        children: React.ReactElement<import("..").ButtonProps<React.ElementType<"a" | "button">>, string | React.JSXElementConstructor<any>> | React.ReactElement<import("..").ButtonProps<React.ElementType<"a" | "button">>, string | React.JSXElementConstructor<any>>[];
-        buttonSize?: "medium" | "small" | "large" | undefined;
-        buttonsAs?: React.ElementType<any> | undefined;
+        children: React.ReactElement<import("..").ButtonProps<React.ElementType<"a" | "button">>, string | React.JSXElementConstructor<any>>[] | React.ReactElement<import("..").ButtonProps<React.ElementType<"a" | "button">>, string | React.JSXElementConstructor<any>>;
+        buttonSize?: import("..").ButtonProps<"button" | "a">["size"];
+        buttonsAs?: React.ElementType;
     }, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };

package/lib/ComparisonTable/ComparisonTable.d.ts

@@ -13,9 +13,9 @@ export type ComparisonTableProps<C extends React.ElementType> = BaseProps<C> & {
 } & React.ComponentPropsWithoutRef<C>;
 export declare const _ComparisonTable: React.ForwardRefExoticComponent<Omit<BaseProps<React.ElementType<any>> & {
     as?: React.ElementType<any> | undefined;
-    heading?: string | undefined;
-    variant?: "default" | "minimal" | undefined;
-    featuredColumn?: number | undefined;
+    heading?: string;
+    variant?: "default" | "minimal";
+    featuredColumn?: number;
 } & Omit<any, "ref">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 type RowProps = {
     header?: boolean;
@@ -32,9 +32,9 @@ export type FootnoteProps = BaseProps<HTMLParagraphElement>;
  */
 export declare const ComparisonTable: React.ForwardRefExoticComponent<Omit<BaseProps<React.ElementType<any>> & {
     as?: React.ElementType<any> | undefined;
-    heading?: string | undefined;
-    variant?: "default" | "minimal" | undefined;
-    featuredColumn?: number | undefined;
+    heading?: string;
+    variant?: "default" | "minimal";
+    featuredColumn?: number;
 } & Omit<any, "ref">, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Row: ({ children, ...rest }: PropsWithChildren<RowProps>) => JSX.Element;
     Cell: ({ as, children, ...props }: PropsWithChildren<CellProps>) => JSX.Element;

package/lib/ExpandableArrow/ExpandableArrow.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type ExpandableArrowProps = {
     className?: string;
     /** Animate between a chevron arrow and an arrow with a stem by toggling the value of `expanded` */

package/lib/FAQ/FAQ.d.ts

@@ -28,15 +28,15 @@ export declare const FAQ: React.ForwardRefExoticComponent<Omit<FAQRootProps, "re
     Heading: React.ForwardRefExoticComponent<Omit<FAQHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Item: React.ForwardRefExoticComponent<Omit<import("..").AccordionRootProps, "ref"> & React.RefAttributes<HTMLDetailsElement>>;
     Question: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLHeadingElement> & {
-        children?: React.ReactNode;
+        children?: React.ReactNode | undefined;
     } & {
-        className?: string | undefined;
-        as?: "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
-        reversedToggles?: boolean | undefined;
-        variant?: "default" | "emphasis" | undefined;
-        open?: boolean | undefined;
-        handleOpen?: ((boolean: any) => void) | undefined;
-        parentRef?: React.RefObject<HTMLDetailsElement> | undefined;
+        className?: string;
+        as?: "h2" | "h3" | "h4" | "h5" | "h6";
+        reversedToggles?: boolean;
+        variant?: "default" | "emphasis";
+        open?: boolean;
+        handleOpen?: (boolean: any) => void;
+        parentRef?: React.RefObject<HTMLDetailsElement>;
     }, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Answer: typeof AccordionContent;
 };

package/lib/Grid/Grid.d.ts

@@ -55,17 +55,17 @@ export declare const Grid: React.NamedExoticComponent<React.HTMLAttributes<"div"
     /**
      * Visual aid to help with alignment.
      */
-    enableOverlay?: boolean | undefined;
+    enableOverlay?: boolean;
     /**
      * Fills the width of the parent container and removes the max-width.
      */
-    fullWidth?: boolean | undefined;
+    fullWidth?: boolean;
     /**
      * Test id for the root element.
      */
-    "data-testid"?: string | undefined;
+    "data-testid"?: string;
 } & BaseProps<HTMLDivElement> & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }> & {
     readonly type: ({ className, children, as, fullWidth, enableOverlay, ["data-testid"]: testId, ...rest }: PropsWithChildren<GridProps>) => JSX.Element;
 } & {

package/lib/Hero/Hero.d.ts

@@ -30,62 +30,62 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
     Heading: React.ForwardRefExoticComponent<Omit<HeroHeadingProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<HeroDescriptionProps>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     PrimaryAction: React.ForwardRefExoticComponent<(Omit<{
-        as?: "a" | "button" | undefined;
+        as?: "a" | "button";
         href: string;
     } & ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
-        as?: "a" | undefined;
+        as?: "a";
     } & {
-        children?: React.ReactNode;
+        children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
-        as?: "a" | "button" | undefined;
+        as?: "a" | "button";
         href: string;
     } & ButtonBaseProps & BaseProps<HTMLButtonElement> & {
-        as?: "button" | undefined;
+        as?: "button";
     } & {
-        children?: React.ReactNode;
+        children?: React.ReactNode | undefined;
     }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     SecondaryAction: React.ForwardRefExoticComponent<(Omit<{
-        as?: "a" | "button" | undefined;
+        as?: "a" | "button";
         href: string;
     } & ButtonBaseProps & BaseProps<HTMLAnchorElement> & {
-        as?: "a" | undefined;
+        as?: "a";
     } & {
-        children?: React.ReactNode;
+        children?: React.ReactNode | undefined;
     }, "ref"> | Omit<{
-        as?: "a" | "button" | undefined;
+        as?: "a" | "button";
         href: string;
     } & ButtonBaseProps & BaseProps<HTMLButtonElement> & {
-        as?: "button" | undefined;
+        as?: "button";
     } & {
-        children?: React.ReactNode;
+        children?: React.ReactNode | undefined;
     }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     Image: React.ForwardRefExoticComponent<(Omit<{
-        position?: "inline-end" | "block-end" | undefined;
+        position?: "inline-end" | "block-end";
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
         alt: string;
-        aspectRatio?: import("../Image").ImageAspectRatio | undefined;
-        media?: string | undefined;
-        borderRadius?: "medium" | "small" | "large" | "xlarge" | "full" | undefined;
-        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet"> | undefined;
+        aspectRatio?: import("../Image").ImageAspectRatio;
+        media?: string;
+        borderRadius?: import("../Image").ImageBorderRadiusOptions;
+        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
     } & {
-        as?: "img" | undefined;
-        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet"> | undefined;
+        as?: "img";
+        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
     }, "ref"> | Omit<{
-        position?: "inline-end" | "block-end" | undefined;
+        position?: "inline-end" | "block-end";
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
         alt: string;
-        aspectRatio?: import("../Image").ImageAspectRatio | undefined;
-        media?: string | undefined;
-        borderRadius?: "medium" | "small" | "large" | "xlarge" | "full" | undefined;
-        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet"> | undefined;
+        aspectRatio?: import("../Image").ImageAspectRatio;
+        media?: string;
+        borderRadius?: import("../Image").ImageBorderRadiusOptions;
+        srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet">;
     } & {
         as: "picture";
         sources?: {
             srcset: string;
             media: string;
-        }[] | undefined;
+        }[];
         srcSet?: undefined;
     }, "ref">) & React.RefAttributes<HTMLImageElement>>;
     Label: React.ForwardRefExoticComponent<Omit<HeroLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/lib/IDE/IDE.d.ts

@@ -76,17 +76,17 @@ export declare const IDE: React.NamedExoticComponent<{
     /**
      * Test id for the IDE
      */
-    'data-testid'?: string | undefined;
+    'data-testid'?: string;
     /**
      * The optionally configurable height of the IDE
      */
-    height?: number | undefined;
+    height?: number;
     /**
      * Alternative presentation of the IDE
      */
-    variant?: "default" | "glass" | undefined;
+    variant?: "default" | "glass";
 } & BaseProps<HTMLDivElement> & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }> & {
     readonly type: ({ alternativeText, children, className, "data-testid": testId, height, variant, ...rest }: PropsWithChildren<IDEProps>) => JSX.Element;
 } & {
@@ -103,7 +103,7 @@ export declare const IDE: React.NamedExoticComponent<{
         /**
          * The index of the active tab.
          */
-        activeTab?: number | undefined;
+        activeTab?: number;
         /**
          * An array of IDE editor files.
          */
@@ -111,27 +111,27 @@ export declare const IDE: React.NamedExoticComponent<{
         /**
          * Determines whether line numbers should be shown in the editor.
          */
-        showLineNumbers?: boolean | undefined;
+        showLineNumbers?: boolean;
         /**
          * Controls the size of the editor text.
          */
-        size?: "medium" | "small" | "large" | undefined;
+        size?: "small" | "medium" | "large";
         /**
          * Used for triggering animation externally.
          */
-        triggerAnimation?: boolean | undefined;
+        triggerAnimation?: boolean;
         /**
          * Determines whether the replay button should be shown.
          */
-        showReplayButton?: boolean | undefined;
+        showReplayButton?: boolean;
         /**
          * Test id for the IDE.
          */
-        'data-testid'?: string | undefined;
+        'data-testid'?: string;
         /**
          * Enable user customisation of the icons used in file tabs.
          */
-        tabIcons?: IDEEditorTabIcon | undefined;
+        tabIcons?: IDEEditorTabIcon;
     } & BaseProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>>;
 };
 export {};