@czi-sds/components 22.1.2 → 22.2.1

package/dist/index.esm.d.ts

@@ -28,9 +28,9 @@ import { ListProps as RawListProps } from "@mui/material";
 import { ListItemProps as RawListItemProps } from "@mui/material";
 import { ListSubheaderProps as RawListSubheaderProps } from "@mui/material";
 import { MenuProps as RawMenuProps } from "@mui/material";
+import { ChipProps as ChipProps$0 } from "@mui/material";
 import { TabProps as RawTabProps } from "@mui/material";
 import { TabsProps as RawTabsProps } from "@mui/material";
-import { ChipProps as ChipProps$0 } from "@mui/material";
 import React from "react";
 import { CSSProperties, ReactElement, ReactNode, SyntheticEvent, ComponentType } from "react";
 import { Theme, ThemeOptions, TypographyStyle, Breakpoints, PaletteOptions } from "@mui/material/styles";
@@ -80,6 +80,7 @@ interface BaseColor {
     textSecondary: string;
     textSecondaryInverse: string;
     textDisabled: string;
+    textDisabledInverse: string;
     textOnFill: string;
     fillHover: string;
     fillPressed: string;
@@ -92,14 +93,20 @@ interface BaseColor {
     border: string;
     borderInverse: string;
     borderHover: string;
+    borderHoverInverse: string;
+    borderOnFill: string;
     borderPressed: string;
+    borderPressedInverse: string;
     borderDisabled: string;
+    borderDisabledInverse: string;
     borderTable: string;
     ornamentDisabled: string;
+    ornamentDisabledInverse: string;
     ornamentOnFill: string;
     ornamentPrimary: string;
     ornamentPrimaryInverse: string;
     ornamentSecondary: string;
+    ornamentSecondaryInverse: string;
     ornamentSecondaryHover: string;
     ornamentSecondaryPressed: string;
 }
@@ -611,6 +618,7 @@ interface AccessibleInputSearchProps {
     id: string;
     handleSubmit?: (value: string) => void;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    customTheme?: "light" | "dark" | "auto";
 }
 type InputSearchProps = RawTextFieldSearchProps & AccessibleInputSearchProps & InputSearchExtraProps;
 /**
@@ -711,7 +719,7 @@ declare const StyledPopper: import("@emotion/styled").StyledComponent<import("@m
 } & StyleProps$0, {}, {}>;
 declare const StyledPaper$0: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "className" | "style" | "classes" | "children" | "sx" | "elevation" | "variant" | "square"> & {
+}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "elevation" | "square"> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & StyleProps$0, {}, {}>;
 interface ExtraAutocompleteMultiColumnProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> extends StyleProps$0 {
@@ -761,61 +769,53 @@ interface ExtraAutocompleteProps$0<T, Multiple extends boolean | undefined, Disa
 }
 type AutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = Omit<AutocompleteBaseProps<T, Multiple, DisableClearable, FreeSolo>, "options" | "value" | "onChange"> & ExtraAutocompleteProps$0<T, Multiple, DisableClearable, FreeSolo>;
 declare const Autocomplete$0: <T extends DefaultAutocompleteOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>(props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
+type ButtonTypeMap = {
+    icon: "primary" | "secondary" | "tertiary";
+    minimal: "primary" | "secondary";
+    rounded: "primary" | "secondary" | "destructive";
+    square: "primary" | "secondary" | "destructive";
+};
 type ButtonSize = "small" | "medium" | "large";
-type SdsProps = {
-    sdsStyle?: "icon";
-    sdsType?: "primary" | "secondary" | "tertiary";
+interface BaseButtonProps {
+    children?: React.ReactNode;
     isAllCaps?: boolean;
-    isRounded?: boolean;
+}
+interface SdsIconButtonProps extends BaseButtonProps {
+    sdsStyle: "icon";
+    sdsType?: ButtonTypeMap["icon"];
     sdsSize?: ButtonSize;
-    icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
+    icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
     sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
-} | {
-    sdsStyle?: "minimal";
-    sdsType?: "primary" | "secondary";
-    isAllCaps?: boolean;
-    isRounded?: boolean;
-} | {
-    sdsStyle?: "rounded" | "square";
-    sdsType?: "primary" | "secondary" | "destructive";
-    isAllCaps?: boolean;
+}
+interface SdsMinimalButtonProps extends BaseButtonProps {
+    sdsStyle: "minimal";
+    sdsType?: ButtonTypeMap["minimal"];
+    children: React.ReactNode;
+}
+interface SdsButtonProps extends BaseButtonProps {
+    sdsStyle: "rounded" | "square";
     isRounded?: boolean;
-};
+    sdsType?: ButtonTypeMap["rounded" | "square"];
+    children: React.ReactNode;
+}
+type SdsProps = SdsIconButtonProps | SdsMinimalButtonProps | SdsButtonProps;
 type ButtonProps = RawButtonProps & SdsProps;
 /**
  * @see https://mui.com/material-ui/react-button/
  */
 declare const Button: React.ForwardRefExoticComponent<(Omit<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "variant" | "href" | "disableFocusRipple" | "disableElevation" | "endIcon" | "fullWidth" | "size" | "startIcon"> & {
+}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & {
     component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-} & {
-    sdsStyle?: "icon" | undefined;
-    sdsType?: "primary" | "secondary" | "tertiary" | undefined;
-    isAllCaps?: boolean | undefined;
-    isRounded?: boolean | undefined;
-    sdsSize?: ButtonSize | undefined;
-    icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps, string | React.JSXElementConstructor<any>> | undefined;
-    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>> | undefined;
-}, "ref"> | Omit<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+} & SdsIconButtonProps, "ref"> | Omit<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "variant" | "href" | "disableFocusRipple" | "disableElevation" | "endIcon" | "fullWidth" | "size" | "startIcon"> & {
+}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & {
     component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-} & {
-    sdsStyle?: "minimal" | undefined;
-    sdsType?: "primary" | "secondary" | undefined;
-    isAllCaps?: boolean | undefined;
-    isRounded?: boolean | undefined;
-}, "ref"> | Omit<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+} & SdsMinimalButtonProps, "ref"> | Omit<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "variant" | "href" | "disableFocusRipple" | "disableElevation" | "endIcon" | "fullWidth" | "size" | "startIcon"> & {
+}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & {
     component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-} & {
-    sdsStyle?: "square" | "rounded" | undefined;
-    sdsType?: "primary" | "secondary" | "destructive" | undefined;
-    isAllCaps?: boolean | undefined;
-    isRounded?: boolean | undefined;
-}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+} & SdsButtonProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
 interface BannerExtraProps extends CommonThemeProps {
     sdsType: "primary" | "secondary";
 }
@@ -828,20 +828,45 @@ interface BannerProps extends BannerExtraProps {
     onClose?: (e: React.MouseEvent) => void;
 }
 declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement | null>>;
+type SDSButtonDropdownSizes = "small" | "medium" | "large";
 type SdsProps$0 = {
+    sdsStyle: "icon";
+    sdsType?: "primary" | "secondary" | "tertiary";
+    icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
+    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
+    sdsSize?: SDSButtonDropdownSizes;
+} | {
+    sdsStyle: "rounded" | "square";
+    sdsType?: "primary" | "secondary" | "destructive";
     icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
-    sdsStyle?: "rounded" | "square" | "icon";
-    sdsType?: "primary" | "secondary";
     sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
-    sdsSize?: "small" | "medium" | "large";
+    sdsSize?: SDSButtonDropdownSizes;
 };
-type ButtonDropdownProps<C extends React.ElementType = "button"> = RawButtonProps<C, {
-    component?: C;
-}> & SdsProps$0;
+type ButtonDropdownProps = ButtonProps & SdsProps$0;
 /**
  * @see https://mui.com/material-ui/react-button/
  */
-declare const ButtonDropdown: React.ForwardRefExoticComponent<Omit<ButtonDropdownProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ButtonDropdown: React.ForwardRefExoticComponent<(Omit<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & {
+    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+} & SdsIconButtonProps & {
+    sdsStyle: "icon";
+    sdsType?: "primary" | "secondary" | "tertiary" | undefined;
+    icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
+    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>> | undefined;
+    sdsSize?: SDSButtonDropdownSizes | undefined;
+}, "ref"> | Omit<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & {
+    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+} & SdsButtonProps & {
+    sdsStyle: "rounded" | "square";
+    sdsType?: "primary" | "secondary" | "destructive" | undefined;
+    icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps, string | React.JSXElementConstructor<any>> | undefined;
+    sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>> | undefined;
+    sdsSize?: SDSButtonDropdownSizes | undefined;
+}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
 interface ButtonIconExtraProps extends CommonThemeProps {
     disabled?: boolean;
     sdsSize?: "small" | "medium" | "large";
@@ -890,7 +915,7 @@ interface CalloutProps {
     sdsStage?: typeof SDS_STAGE_CLOSED | typeof SDS_STAGE_OPEN;
     title?: string;
     hideTitle?: boolean;
-    body?: string;
+    body?: React.ReactNode;
     hideBody?: boolean;
     extraContent?: React.ReactNode;
     sdsStyle?: CalloutSdsStyleType;
@@ -1012,7 +1037,7 @@ declare const StyledPopper$1: import("@emotion/styled").StyledComponent<import("
 } & CommonThemeProps, {}, {}>;
 declare const StyledPaper$1: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "className" | "style" | "classes" | "children" | "sx" | "elevation" | "variant" | "square"> & {
+}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "elevation" | "square"> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & StyleProps$1, {}, {}>;
 /**
@@ -1127,17 +1152,17 @@ declare const _default: import("react").ForwardRefExoticComponent<Omit<RawDialog
 type DialogTitleExtraProps = CommonThemeProps;
 declare const Title: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "p" | "color" | "variant" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+}, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & DialogTitleExtraProps, {}, {}>;
 declare const Subtitle$0: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "p" | "color" | "variant" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+}, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & DialogTitleExtraProps, {}, {}>;
 declare const Overline: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "p" | "color" | "variant" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+}, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & DialogTitleExtraProps, {}, {}>;
 interface DialogTitleProps extends DialogTitleExtraProps, RawDialogTitleProps {
@@ -1322,6 +1347,83 @@ type MenuSelectProps<T, Multiple extends boolean | undefined = undefined, Disabl
  * Please use `Autocomplete` or `Dropdown` instead.
  */
 declare const MenuSelect: <T extends DefaultMenuSelectOption, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined>(props: MenuSelectProps<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
+type SdsTagColorType = "info" | "positive" | "notice" | "negative" | "neutral" | "beta" | [
+    string,
+    string
+] | [
+    string,
+    string,
+    string
+];
+interface ExtraSmallTagProps extends CommonThemeProps {
+    hover?: boolean;
+    sdsType?: "primary" | "secondary";
+    sdsStyle?: "square" | "rounded";
+    sdsSize?: "s";
+    tagColor?: SdsTagColorType;
+    icon?: JSX.Element;
+}
+interface ExtraLargeTagProps extends CommonThemeProps {
+    hover?: boolean;
+    sdsType?: "primary" | "secondary";
+    sdsStyle?: "square" | "rounded";
+    sdsSize?: "l";
+    tagColor?: SdsTagColorType;
+    icon: JSX.Element;
+}
+type ExtraTagProps = ExtraSmallTagProps | ExtraLargeTagProps;
+interface SdsTagProps extends Omit<ChipProps$0, "color"> {
+    label: string;
+    color?: SdsTagColorType;
+}
+type TagProps = SdsTagProps & ExtraTagProps;
+/**
+ * @see https://mui.com/material-ui/react-chip/
+ *
+ * @props color: {string}                   - applies color for tag based on default theme color values
+ *               [string, string]           - applies custom colors for [font, background]
+ *               [string, string, string]   - applies custom colors for [font, background, icon]
+ */
+declare const Tag: (props: TagProps) => JSX.Element;
+interface NavigationHeaderPrimaryNavItem<T extends string> extends Record<string, unknown> {
+    key: T;
+    label: ReactNode;
+    tag?: string;
+    tagColor?: SdsTagColorType;
+    onClick?: (e: React.SyntheticEvent) => void;
+}
+interface BaseHeaderSecondaryNavItem {
+    label: string;
+}
+interface TextHeaderSecondaryNavItem extends BaseHeaderSecondaryNavItem {
+    onClick?(): void;
+    type: "text";
+}
+interface DropdownHeaderSecondaryNavItem extends BaseHeaderSecondaryNavItem {
+    type: "dropdown";
+    items: Pick<TextHeaderSecondaryNavItem, "label" | "onClick">[];
+}
+type NavigationHeaderSecondaryNavItem = TextHeaderSecondaryNavItem | DropdownHeaderSecondaryNavItem;
+interface NavigationHeaderProps<T extends string = string> {
+    activePrimaryNavKey?: string;
+    buttons?: (SdsProps$0 & ButtonProps$0)[];
+    hasInvertedStyle?: boolean;
+    logo?: ReactNode;
+    logoUrl?: string;
+    primaryNavItems?: NavigationHeaderPrimaryNavItem<T>[];
+    primaryNavPosition?: "left" | "right";
+    searchProps?: Partial<InputSearchProps>;
+    secondaryNavItems?: NavigationHeaderSecondaryNavItem[];
+    setActivePrimaryNavKey?(key: string): void;
+    showSearch?: boolean;
+    tag?: string;
+    tagColor?: SdsTagColorType;
+    title: string;
+}
+type IconButtonProps = SdsIconButtonProps & {
+    children?: string;
+};
+declare const NavigationHeader: import("react").ForwardRefExoticComponent<NavigationHeaderProps<string> & import("react").RefAttributes<HTMLDivElement>>;
 interface NavigationJumpToExtraProps extends Omit<TabsProps, "onChange">, CommonThemeProps {
 }
 type Item = {
@@ -1445,44 +1547,6 @@ interface TabProps$0 extends RawTabProps {
  * @see https://mui.com/material-ui/react-tabs/
  */
 declare const Tab: React.ForwardRefExoticComponent<Omit<TabProps$0, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type SdsTagColorType = "info" | "positive" | "notice" | "negative" | "neutral" | "beta" | [
-    string,
-    string
-] | [
-    string,
-    string,
-    string
-];
-interface ExtraSmallTagProps extends CommonThemeProps {
-    hover?: boolean;
-    sdsType?: "primary" | "secondary";
-    sdsStyle?: "square" | "rounded";
-    sdsSize?: "s";
-    tagColor?: SdsTagColorType;
-    icon?: JSX.Element;
-}
-interface ExtraLargeTagProps extends CommonThemeProps {
-    hover?: boolean;
-    sdsType?: "primary" | "secondary";
-    sdsStyle?: "square" | "rounded";
-    sdsSize?: "l";
-    tagColor?: SdsTagColorType;
-    icon: JSX.Element;
-}
-type ExtraTagProps = ExtraSmallTagProps | ExtraLargeTagProps;
-interface SdsTagProps extends Omit<ChipProps$0, "color"> {
-    label: string;
-    color?: SdsTagColorType;
-}
-type TagProps = SdsTagProps & ExtraTagProps;
-/**
- * @see https://mui.com/material-ui/react-chip/
- *
- * @props color: {string}                   - applies color for tag based on default theme color values
- *               [string, string]           - applies custom colors for [font, background]
- *               [string, string, string]   - applies custom colors for [font, background, icon]
- */
-declare const Tag: (props: TagProps) => JSX.Element;
 interface SdsTagFilterProps extends Omit<ChipProps$0, "color" | "variant"> {
     label: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1523,5 +1587,5 @@ type TooltipTableContentProps = TooltipTableExtraProps;
  * @see https://mui.com/material-ui/react-table/
  */
 declare const TooltipTableContent: (props: TooltipTableContentProps) => JSX.Element;
-export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerProps, Banner, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggleProps, ButtonToggle, CalloutIntentType, CalloutSdsStyleType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ComplexFilterProps, ComplexFilter, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle$0 as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, StyledPaper$1 as DropdownPaper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps$0 as LinkProps, Link, ListProps, List, ListItemLabel, ListItemProps, ListItem, ListSubheaderProps, ListSubheader, LoadingIndicatorProps$0 as LoadingIndicatorProps, LoadingIndicator, MenuProps, Menu, IconNameToSmallSizes, MenuItemExtraProps, MenuItemProps, MenuItem, DefaultMenuSelectOption, MenuSelectProps, MenuSelect, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, Panel, SingleButtonDefinition, SegmentedControlProps, SegmentedControl, SdsTableProps, TableProps, Table, TableHeaderProps, TableHeader, TableRowProps, TableRow, Tabs, TabProps$0 as TabProps, Tab, SdsTagProps, TagProps, Tag, SdsTagFilterProps, TagFilterProps, TagFilter, Tooltip, TooltipCondensedProps, TooltipCondensed, TooltipTableContent, TooltipTableContent as TooltipTable, AccentColor, BaseColor, IntentColor, SDSPalette, SDSTheme, SDSThemeOptions, AppTheme, Shadows, TypographyStyles, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, IconSize, IconSizes, Border, Borders, Theme$0 as Theme, defaultTheme, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXs, fontTabularS, fontTabularSemiboldXs, fontTabularSemiboldS, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints };
+export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerProps, Banner, SdsIconButtonProps, SdsMinimalButtonProps, SdsButtonProps, SdsProps, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggleProps, ButtonToggle, CalloutIntentType, CalloutSdsStyleType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ComplexFilterProps, ComplexFilter, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle$0 as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, StyledPaper$1 as DropdownPaper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps$0 as LinkProps, Link, ListProps, List, ListItemLabel, ListItemProps, ListItem, ListSubheaderProps, ListSubheader, LoadingIndicatorProps$0 as LoadingIndicatorProps, LoadingIndicator, MenuProps, Menu, IconNameToSmallSizes, MenuItemExtraProps, MenuItemProps, MenuItem, DefaultMenuSelectOption, MenuSelectProps, MenuSelect, NavigationHeaderProps, IconButtonProps, NavigationHeader, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, Panel, SingleButtonDefinition, SegmentedControlProps, SegmentedControl, SdsTableProps, TableProps, Table, TableHeaderProps, TableHeader, TableRowProps, TableRow, Tabs, TabProps$0 as TabProps, Tab, SdsTagProps, TagProps, Tag, SdsTagFilterProps, TagFilterProps, TagFilter, Tooltip, TooltipCondensedProps, TooltipCondensed, TooltipTableContent, TooltipTableContent as TooltipTable, AccentColor, BaseColor, IntentColor, SDSPalette, SDSTheme, SDSThemeOptions, AppTheme, Shadows, TypographyStyles, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, IconSize, IconSizes, Border, Borders, Theme$0 as Theme, defaultTheme, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXs, fontTabularS, fontTabularSemiboldXs, fontTabularSemiboldS, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints };
 export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };