@czi-sds/components 22.3.0 → 22.3.2

package/dist/index.cjs.d.ts

@@ -29,10 +29,11 @@ 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 { LinkProps as LinkProps$1 } from "@mui/material";
 import { TabProps as RawTabProps } from "@mui/material";
 import { TabsProps as RawTabsProps } from "@mui/material";
 import React from "react";
-import { CSSProperties, ReactElement, ReactNode, SyntheticEvent, ComponentType, ElementType } from "react";
+import { CSSProperties, ReactElement, ReactNode, SyntheticEvent, HTMLAttributeAnchorTarget, ComponentType, ElementType } from "react";
 import { Theme, ThemeOptions, TypographyStyle, Breakpoints, PaletteOptions } from "@mui/material/styles";
 import { SerializedStyles } from "@emotion/react";
 import { AlertProps } from "@mui/lab";
@@ -776,9 +777,10 @@ type ButtonTypeMap = {
     square: "primary" | "secondary" | "destructive";
 };
 type ButtonSize = "small" | "medium" | "large";
-interface BaseButtonProps {
+interface BaseButtonProps extends RawButtonProps {
     children?: React.ReactNode;
     isAllCaps?: boolean;
+    target?: HTMLAttributeAnchorTarget;
 }
 interface SdsIconButtonProps extends BaseButtonProps {
     sdsStyle: "icon";
@@ -799,23 +801,11 @@ interface SdsButtonProps extends BaseButtonProps {
     children: React.ReactNode;
 }
 type SdsProps = SdsIconButtonProps | SdsMinimalButtonProps | SdsButtonProps;
-type ButtonProps = RawButtonProps & SdsProps;
+type ButtonProps = 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" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & {
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-} & 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" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & {
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-} & 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" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & {
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-} & SdsButtonProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<(Omit<SdsIconButtonProps, "ref"> | Omit<SdsMinimalButtonProps, "ref"> | Omit<SdsButtonProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
 interface BannerExtraProps extends CommonThemeProps {
     sdsType: "primary" | "secondary";
 }
@@ -846,21 +836,13 @@ type ButtonDropdownProps = ButtonProps & SdsProps$0;
 /**
  * @see https://mui.com/material-ui/react-button/
  */
-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 & {
+declare const ButtonDropdown: React.ForwardRefExoticComponent<(Omit<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 & {
+}, "ref"> | Omit<SdsButtonProps & {
     sdsStyle: "rounded" | "square";
     sdsType?: "primary" | "secondary" | "destructive" | undefined;
     icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps, string | React.JSXElementConstructor<any>> | undefined;
@@ -1129,10 +1111,20 @@ interface ContentCardTitleProps {
     titleText?: string;
     subtitleText?: string;
     metadataText?: string;
+    classes?: {
+        cardHeader?: string;
+        cardOverline?: string;
+        cardTitle?: string;
+        cardSubtitle?: string;
+        cardMetadata?: string;
+    };
 }
 interface ContentCardActionsProps {
     buttonsPosition?: "left" | "right";
     clickableCard?: ContentCardProps["clickableCard"];
+    classes?: {
+        cardActions?: string;
+    };
     children: React.ReactElement<ButtonProps> | Array<React.ReactElement<ButtonProps>>;
 }
 /**
@@ -1149,7 +1141,20 @@ interface BaseContentCardProps extends CardProps {
     decorativeBorder?: boolean;
     children?: React.ReactNode;
     clickableCard?: boolean;
+    clickableCardProps?: Partial<SdsMinimalButtonProps>;
     buttonsPosition?: "left" | "right";
+    classes?: {
+        cardPaper?: string;
+        cardContent?: string;
+        cardHeader?: string;
+        cardMedia?: string;
+        cardOverline?: string;
+        cardTitle?: string;
+        cardSubtitle?: string;
+        cardMetadata?: string;
+        cardActions?: string;
+        clickableCardButton?: string;
+    };
 }
 interface ImageContentCardProps extends BaseContentCardProps {
     visualElementType: "image";
@@ -1486,16 +1491,16 @@ interface NavigationHeaderPrimaryNavItem<T extends string> extends Record<string
     tagColor?: SdsTagColorType;
     onClick?: (e: React.SyntheticEvent) => void;
 }
-interface BaseHeaderSecondaryNavItem {
+interface BaseHeaderSecondaryNavItem extends Partial<SdsMinimalButtonProps> {
     label: string;
 }
 interface TextHeaderSecondaryNavItem extends BaseHeaderSecondaryNavItem {
     onClick?(): void;
-    type: "text";
+    itemType: "text";
 }
 interface DropdownHeaderSecondaryNavItem extends BaseHeaderSecondaryNavItem {
-    type: "dropdown";
-    items: Pick<TextHeaderSecondaryNavItem, "label" | "onClick">[];
+    itemType: "dropdown";
+    items: Pick<TextHeaderSecondaryNavItem, "label" | "onClick" | "component" | "href">[];
 }
 type NavigationHeaderSecondaryNavItem = TextHeaderSecondaryNavItem | DropdownHeaderSecondaryNavItem;
 interface NavigationHeaderProps<T extends string = string> {
@@ -1504,6 +1509,8 @@ interface NavigationHeaderProps<T extends string = string> {
     hasInvertedStyle?: boolean;
     logo?: ReactNode;
     logoUrl?: string;
+    logoLinkComponent?: ElementType;
+    logoLinkProps?: LinkProps$1;
     primaryNavItems?: NavigationHeaderPrimaryNavItem<T>[];
     primaryNavPosition?: "left" | "right";
     searchProps?: Partial<InputSearchProps>;
@@ -1682,4 +1689,4 @@ type TooltipTableContentProps = TooltipTableExtraProps;
  */
 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, 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, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, ContentCard, 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, NavigationFooterNavItem, FooterImage, NavigationFooterProps, NavItemProps, FooterLinkProps, NavigationFooter, 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, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };
+export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, NavigationHeaderSecondaryNavItem, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };

package/dist/index.cjs.js

@@ -6901,6 +6901,9 @@ var doNotForwardProps$o = [
     "buttonsPosition",
     "clickableCard",
     "imageSize",
+    "clickableCardProps",
+    "cardSdsType",
+    "classes",
 ];
 var StyledCard = styled__default.default(material.Card, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
@@ -6918,24 +6921,25 @@ var StyledCard = styled__default.default(material.Card, {
     var showDecorativeBorder = visualElementType === "image"
         ? boundingBox && decorativeBorder && imagePadding
         : boundingBox && decorativeBorder;
-    return react.css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n      display: flex;\n      background-color: ", ";\n      flex-direction: ", ";\n      box-shadow: none;\n\n      .MuiCardActionArea-focusHighlight {\n        background: transparent;\n      }\n\n      ", "\n\n      ", "\n\n      ", "\n    "], ["\n      display: flex;\n      background-color: ", ";\n      flex-direction: ", ";\n      box-shadow: none;\n\n      .MuiCardActionArea-focusHighlight {\n        background: transparent;\n      }\n\n      ", "\n\n      ", "\n\n      ", "\n    "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, flexDirection, boundingBox && react.css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n        border: 1px solid ", ";\n      "], ["\n        border: 1px solid ", ";\n      "])), (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderSecondary), sdsType === "wide" &&
+    return react.css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n      display: flex;\n      background-color: ", ";\n      flex-direction: ", ";\n      box-shadow: none;\n      overflow: visible;\n\n      .MuiCardActionArea-focusHighlight {\n        background: transparent;\n      }\n\n      ", "\n\n      ", "\n\n      ", "\n    "], ["\n      display: flex;\n      background-color: ", ";\n      flex-direction: ", ";\n      box-shadow: none;\n      overflow: visible;\n\n      .MuiCardActionArea-focusHighlight {\n        background: transparent;\n      }\n\n      ", "\n\n      ", "\n\n      ", "\n    "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, flexDirection, boundingBox && react.css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n        border: 1px solid ", ";\n      "], ["\n        border: 1px solid ", ";\n      "])), (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderSecondary), sdsType === "wide" &&
         showDecorativeBorder && react.css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n        border-left: 4px solid ", ";\n      "], ["\n        border-left: 4px solid ", ";\n      "])), (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.border), sdsType === "narrow" &&
         showDecorativeBorder && react.css(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n        border-top: 4px solid ", ";\n      "], ["\n        border-top: 4px solid ", ";\n      "])), (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border));
 });
-var StyledCardActionArea = styled__default.default(material.CardActionArea, {
+var StyledCardActionArea = styled__default.default(Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
 })(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
-    var _c = props.imagePosition, imagePosition = _c === void 0 ? "left" : _c, _d = props.sdsType, sdsType = _d === void 0 ? "wide" : _d, visualElementType = props.visualElementType;
+    var _c = props.imagePosition, imagePosition = _c === void 0 ? "left" : _c, _d = props.cardSdsType, cardSdsType = _d === void 0 ? "wide" : _d, visualElementType = props.visualElementType;
     var semanticColors = getSemanticColors(props);
-    var flexDirection = sdsType === "wide"
+    var shadows = getShadows(props);
+    var flexDirection = cardSdsType === "wide"
         ? imagePosition === "left"
             ? "row"
             : "row-reverse"
         : visualElementType === "image"
             ? "column"
             : "row";
-    return "\n      display: flex;\n      flex-direction: ".concat(flexDirection, ";\n      align-items: unset;\n\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, ";\n\n      &:hover,\n      &:active {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.backgroundSecondary, ";\n      }\n    ");
+    return "\n      display: flex;\n      flex-direction: ".concat(flexDirection, ";\n      align-items: unset;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      overflow: auto;\n      text-align: unset;\n\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, ";\n\n      &:hover,\n      &:active {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface, ";\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, " !important;\n      }\n    ");
 });
 var StyledIconMediaWrapper = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
@@ -6948,9 +6952,9 @@ var StyledIconMediaWrapper = styled__default.default("div", {
 var StyledCardContent = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
 })(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a, _b = props.clickableCard, clickableCard = _b === void 0 ? false : _b;
+    var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
     var spaces = getSpaces(props);
-    return react.css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      height: ", ";\n      min-width: 100px;\n      width: 100%;\n\n      ", "\n    "], ["\n      display: flex;\n      flex-direction: column;\n      height: ", ";\n      min-width: 100px;\n      width: 100%;\n\n      ", "\n    "])), clickableCard ? "100%" : "auto", boundingBox && react.css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n        padding: ", "px;\n      "], ["\n        padding: ", "px;\n      "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
+    return react.css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      min-width: 100px;\n      width: 100%;\n      height: 100%;\n\n      ", "\n    "], ["\n      display: flex;\n      flex-direction: column;\n      min-width: 100px;\n      width: 100%;\n      height: 100%;\n\n      ", "\n    "])), boundingBox && react.css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n        padding: ", "px;\n      "], ["\n        padding: ", "px;\n      "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
 });
 var StyledContentCardBody = styled__default.default(material.CardContent, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
@@ -7015,8 +7019,9 @@ var templateObject_1$H, templateObject_2$q, templateObject_3$i, templateObject_4
  * @see https://mui.com/material-ui/react-dialog/
  */
 var ContentCardTitle = React.forwardRef(function ContentCardTitle(props, ref) {
-    var overlineText = props.overlineText, titleText = props.titleText, subtitleText = props.subtitleText, metadataText = props.metadataText;
-    return (jsxRuntime.jsxs("div", { ref: ref, children: [jsxRuntime.jsxs(StyledTitleWrapper, { children: [overlineText && (jsxRuntime.jsx(StyledOverlineText, { children: overlineText })), titleText && jsxRuntime.jsx(StyledTitleText, { children: titleText }), subtitleText && (jsxRuntime.jsx(StyledSubtitleText, { children: subtitleText }))] }), metadataText && (jsxRuntime.jsx(StyledMetadataText, { children: metadataText }))] }));
+    var overlineText = props.overlineText, titleText = props.titleText, subtitleText = props.subtitleText, metadataText = props.metadataText, _a = props.classes, classes = _a === void 0 ? EMPTY_OBJECT : _a;
+    var cardHeader = classes.cardHeader, cardOverline = classes.cardOverline, cardTitle = classes.cardTitle, cardSubtitle = classes.cardSubtitle, cardMetadata = classes.cardMetadata;
+    return (jsxRuntime.jsxs("div", { ref: ref, children: [jsxRuntime.jsxs(StyledTitleWrapper, { className: cardHeader, children: [overlineText && (jsxRuntime.jsx(StyledOverlineText, { className: cardOverline, children: overlineText })), titleText && (jsxRuntime.jsx(StyledTitleText, { className: cardTitle, children: titleText })), subtitleText && (jsxRuntime.jsx(StyledSubtitleText, { className: cardSubtitle, children: subtitleText }))] }), metadataText && (jsxRuntime.jsx(StyledMetadataText, { className: cardMetadata, children: metadataText }))] }));
 });
 
 var doNotForwardProps$m = ["buttonsPosition"];
@@ -7042,7 +7047,8 @@ var isButtonElement = function (child) {
  * @see https://mui.com/material-ui/api/card-actions/
  */
 var ContentCardActions = React.forwardRef(function ContentCardActions(props, ref) {
-    var buttonsPosition = props.buttonsPosition, clickableCard = props.clickableCard, children = props.children;
+    var buttonsPosition = props.buttonsPosition, clickableCard = props.clickableCard, children = props.children, _a = props.classes, classes = _a === void 0 ? EMPTY_OBJECT : _a;
+    var cardActions = classes.cardActions;
     /**
      * (masoudmanson):
      * We need to ensure that only SDS buttons are used within the
@@ -7070,11 +7076,11 @@ var ContentCardActions = React.forwardRef(function ContentCardActions(props, ref
         if (!clickableCardButton) {
             return null;
         }
-        return (jsxRuntime.jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, children: [
-                React__namespace.default.cloneElement(clickableCardButton, __assign({ component: "a" }, clickableCardButton === null || clickableCardButton === void 0 ? void 0 : clickableCardButton.props)),
+        return (jsxRuntime.jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, className: cardActions, children: [
+                React__namespace.default.cloneElement(clickableCardButton, __assign({ component: "div" }, clickableCardButton === null || clickableCardButton === void 0 ? void 0 : clickableCardButton.props)),
             ] }));
     }
-    return (jsxRuntime.jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, children: validChildren }));
+    return (jsxRuntime.jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, className: cardActions, children: validChildren }));
 });
 
 var doNotForwardProps$l = [
@@ -7108,7 +7114,7 @@ var templateObject_1$F, templateObject_2$p, templateObject_3$h, templateObject_4
  * @see https://mui.com/material-ui/api/card-media/
  */
 var ContentCardImageMedia = React.forwardRef(function ContentCardImageMedia(props, ref) {
-    var image = props.image, imageSize = props.imageSize, sdsType = props.sdsType;
+    var image = props.image, imageSize = props.imageSize, sdsType = props.sdsType, className = props.className;
     /**
      * (masoudmanson): These styles makes the image responsive and
      * ensures the image is the right aspect ratio in different card sizes.
@@ -7125,12 +7131,16 @@ var ContentCardImageMedia = React.forwardRef(function ContentCardImageMedia(prop
      * (masoudmanson): We need to make sure the image is wrapped in a CardMedia component.
      * - If it's a string, wrap it in CardMedia with proper styles.
      * - If it's already a CardMedia component, clone it and apply the styles.
+     * - If it's a valid element, clone it and apply the styles.
+     * - If it's null, return null.
      */
     var imageElement = typeof image === "string" ? (jsxRuntime.jsx(material.CardMedia, { component: "img", src: image, alt: "Content Card Media", sx: __assign({}, imageMediaStyles) })) : React__namespace.default.isValidElement(image) && image.type === material.CardMedia ? (React__namespace.default.cloneElement(image, {
         component: "img",
         sx: __assign(__assign({}, image.props.sx), imageMediaStyles),
+    })) : React__namespace.default.isValidElement(image) ? (React__namespace.default.cloneElement(image, {
+        style: __assign(__assign({}, imageMediaStyles), { objectFit: "cover", objectPosition: "center" }),
     })) : null;
-    return (jsxRuntime.jsx(StyledImageMediaWrapper, __assign({ ref: ref }, props, { children: imageElement })));
+    return (jsxRuntime.jsx(StyledImageMediaWrapper, __assign({ ref: ref }, props, { className: className, children: imageElement })));
 });
 
 var CONTENT_CARD_DEFAULT_IMAGE_MEDIA_SIZE = 300;
@@ -7158,10 +7168,10 @@ var useResponsiveWidth = function (initialSdsType) {
  * (masoudmanson): This function is used to add the clickableCard and
  * buttonsPosition props to the ContentCardActions sub-component.
  */
-var enhanceChildrenWithCardActionsProps = function (children, clickableCard, buttonsPosition) {
+var enhanceChildrenWithCardActionsProps = function (children, clickableCard, buttonsPosition, classes) {
     return React__namespace.default.Children.map(children, function (child) {
         if (React__namespace.default.isValidElement(child) && child.type === ContentCardActions) {
-            return React__namespace.default.cloneElement(child, __assign(__assign({}, child.props), { buttonsPosition: buttonsPosition, clickableCard: clickableCard }));
+            return React__namespace.default.cloneElement(child, __assign(__assign({}, child.props), { buttonsPosition: buttonsPosition, classes: classes, clickableCard: clickableCard }));
         }
         return child;
     });
@@ -7170,11 +7180,12 @@ var enhanceChildrenWithCardActionsProps = function (children, clickableCard, but
  * @see https://mui.com/material-ui/react-card/
  */
 var ContentCard = React__namespace.default.forwardRef(function (props, ref) {
-    var _a = props.visualElementType, visualElementType = _a === void 0 ? "none" : _a, image = props.image, icon = props.icon, _b = props.imagePadding, imagePadding = _b === void 0 ? false : _b, _c = props.imageSize, imageSize = _c === void 0 ? CONTENT_CARD_DEFAULT_IMAGE_MEDIA_SIZE : _c, overlineText = props.overlineText, titleText = props.titleText, subtitleText = props.subtitleText, metadataText = props.metadataText, _d = props.boundingBox, propsBoundingBox = _d === void 0 ? true : _d, children = props.children, _e = props.sdsType, sdsType = _e === void 0 ? "wide" : _e, _f = props.clickableCard, clickableCard = _f === void 0 ? false : _f, _g = props.imagePosition, imagePosition = _g === void 0 ? "left" : _g, _h = props.buttonsPosition, buttonsPosition = _h === void 0 ? "left" : _h;
+    var _a = props.visualElementType, visualElementType = _a === void 0 ? "none" : _a, image = props.image, icon = props.icon, _b = props.imagePadding, imagePadding = _b === void 0 ? false : _b, _c = props.imageSize, imageSize = _c === void 0 ? CONTENT_CARD_DEFAULT_IMAGE_MEDIA_SIZE : _c, overlineText = props.overlineText, titleText = props.titleText, subtitleText = props.subtitleText, metadataText = props.metadataText, _d = props.boundingBox, propsBoundingBox = _d === void 0 ? true : _d, children = props.children, _e = props.sdsType, sdsType = _e === void 0 ? "wide" : _e, _f = props.clickableCard, clickableCard = _f === void 0 ? false : _f, _g = props.imagePosition, imagePosition = _g === void 0 ? "left" : _g, _h = props.buttonsPosition, buttonsPosition = _h === void 0 ? "left" : _h, clickableCardProps = props.clickableCardProps, _j = props.classes, classes = _j === void 0 ? EMPTY_OBJECT : _j;
+    var cardMedia = classes.cardMedia, cardContent = classes.cardContent, cardHeader = classes.cardHeader, cardMetadata = classes.cardMetadata, cardOverline = classes.cardOverline, cardSubtitle = classes.cardSubtitle, cardTitle = classes.cardTitle, cardActions = classes.cardActions, cardPaper = classes.cardPaper, clickableCardButton = classes.clickableCardButton;
     // Force boundingBox to be true when clickableCard is true
     var boundingBox = clickableCard ? true : propsBoundingBox;
     var cardRef = React.useRef(null);
-    var _j = useResponsiveWidth(sdsType), handleResize = _j.handleResize, dynamicSdsType = _j.dynamicSdsType;
+    var _k = useResponsiveWidth(sdsType), handleResize = _k.handleResize, dynamicSdsType = _k.dynamicSdsType;
     React.useEffect(function () {
         var element = cardRef.current;
         if (!element)
@@ -7190,9 +7201,21 @@ var ContentCard = React__namespace.default.forwardRef(function (props, ref) {
             resizeObserver.disconnect();
         };
     }, [handleResize]);
-    var visualElement = visualElementType === "image" && image ? (jsxRuntime.jsx(ContentCardImageMedia, { imagePadding: imagePadding, boundingBox: boundingBox, sdsType: dynamicSdsType, imageSize: imageSize, image: image, imagePosition: imagePosition })) : visualElementType === "icon" && icon ? (jsxRuntime.jsx(StyledIconMediaWrapper, { boundingBox: boundingBox, children: icon })) : null;
-    var cardInnerContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [visualElement, jsxRuntime.jsxs(StyledCardContent, { boundingBox: boundingBox, clickableCard: clickableCard, children: [jsxRuntime.jsx(ContentCardTitle, { overlineText: overlineText, titleText: titleText, subtitleText: subtitleText, metadataText: metadataText }), jsxRuntime.jsx(StyledCardContentAligner, { children: enhanceChildrenWithCardActionsProps(children, clickableCard, buttonsPosition) })] })] }));
-    return (jsxRuntime.jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, children: clickableCard ? (jsxRuntime.jsx(StyledCardActionArea, { sdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, children: cardInnerContent })) : (cardInnerContent) })));
+    var visualElement = visualElementType === "image" && image ? (jsxRuntime.jsx(ContentCardImageMedia, { imagePadding: imagePadding, boundingBox: boundingBox, sdsType: dynamicSdsType, imageSize: imageSize, image: image, imagePosition: imagePosition, className: cardMedia })) : visualElementType === "icon" && icon ? (jsxRuntime.jsx(StyledIconMediaWrapper, { boundingBox: boundingBox, className: cardMedia, children: icon })) : null;
+    var cardInnerContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [visualElement, jsxRuntime.jsxs(StyledCardContent, { boundingBox: boundingBox, clickableCard: clickableCard, className: cardContent, children: [jsxRuntime.jsx(ContentCardTitle, { overlineText: overlineText, titleText: titleText, subtitleText: subtitleText, metadataText: metadataText, classes: {
+                            cardHeader: cardHeader,
+                            cardMetadata: cardMetadata,
+                            cardOverline: cardOverline,
+                            cardSubtitle: cardSubtitle,
+                            cardTitle: cardTitle,
+                        } }), jsxRuntime.jsx(StyledCardContentAligner, { children: enhanceChildrenWithCardActionsProps(children, clickableCard, buttonsPosition, {
+                            cardActions: cardActions,
+                        }) })] })] }));
+    return (jsxRuntime.jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, className: cardPaper, children: clickableCard ? (jsxRuntime.jsx(StyledCardActionArea, __assign({}, clickableCardProps, { 
+            // (masoudmanson): The following props are for internal use only and should not be user editable.
+            // To prevent users from overriding them, we use the spread operator to pass user provided props
+            // to the StyledCardActionArea component on top while hardcoding the rest after it.
+            sdsStyle: "minimal", cardSdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, className: clickableCardButton, children: cardInnerContent }))) : (cardInnerContent) })));
 });
 
 var DialogContext = React.createContext({ sdsSize: "m" });
@@ -14296,6 +14319,8 @@ var doNotForwardProps$9 = [
     "isNarrow",
     "primaryNavPosition",
     "showSearch",
+    "logoLinkComponent",
+    "logoLinkProps",
 ];
 var StyledHeader = styled__default.default(material.AppBar, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
@@ -14542,7 +14567,7 @@ var NarrowStyledTextItem = function (props) {
 };
 var StyledTextItem = styled__default.default(Button, {
     shouldForwardProp: function (prop) { return !ButtonDoNotForwardProps.includes(prop); },
-})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  ", "\n\n  background: none;\n  justify-content: flex-start;\n  min-height: 44px;\n  width: 100%;\n\n  ", "\n"], ["\n  ", "\n\n  background: none;\n  justify-content: flex-start;\n  min-height: 44px;\n  width: 100%;\n\n  ", "\n"])), fontHeaderS, function (props) {
+})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  ", "\n\n  background: none;\n  justify-content: flex-start;\n  min-height: 44px;\n  width: fit-content;\n  min-width: unset;\n\n  ", "\n"], ["\n  ", "\n\n  background: none;\n  justify-content: flex-start;\n  min-height: 44px;\n  width: fit-content;\n  min-width: unset;\n\n  ", "\n"])), fontHeaderS, function (props) {
     var _a, _b;
     var hasInvertedStyle = props.hasInvertedStyle, open = props.open, isNarrow = props.isNarrow;
     var semanticColors = getSemanticColors(props);
@@ -14568,7 +14593,7 @@ var StyledTextItem = styled__default.default(Button, {
 var doNotForwardProps$6 = ["hasInvertedStyle", "isNarrow"];
 var StyledAccordion = styled__default.default(Accordion, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
-})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  width: 100%;\n\n  .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n    ", "\n  }\n\n  ", "\n"], ["\n  width: 100%;\n\n  .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n    ", "\n  }\n\n  ", "\n"])), fontBodyS$1, function (props) {
+})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  width: fit-content;\n  min-width: unset;\n\n  .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n    ", "\n  }\n\n  ", "\n"], ["\n  width: fit-content;\n  min-width: unset;\n\n  .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n    ", "\n  }\n\n  ", "\n"])), fontBodyS$1, function (props) {
     var _a, _b;
     var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
     var spaces = getSpaces(props);
@@ -14602,7 +14627,7 @@ var StyledSubItem = styled__default.default(MenuItem)(templateObject_7 || (templ
 var templateObject_1$g, templateObject_2$9, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$1, templateObject_7;
 
 function SecondaryNavItem(_a) {
-    var item = _a.item, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
+    var item = _a.item, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, rest = __rest(_a, ["item", "hasInvertedStyle", "isNarrow"]);
     var _b = React.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
     var open = Boolean(anchorEl);
     function onClose() {
@@ -14617,32 +14642,39 @@ function SecondaryNavItem(_a) {
         }
         setMenuWidth(button.offsetWidth);
     }, []);
-    return (jsxRuntime.jsxs(React.Fragment, { children: [item.type === "text" && (jsxRuntime.jsx(StyledTextItem, { sdsStyle: "minimal", onClick: item.onClick, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, children: item.label })), item.type === "dropdown" && !isNarrow && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledTextItem, { sdsStyle: "minimal", ref: buttonRef, onClick: function (event) { return setAnchorEl(event.currentTarget); }, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, children: [jsxRuntime.jsx("span", { children: item.label }), jsxRuntime.jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }), jsxRuntime.jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, children: item.items.map(function (subItem) { return (jsxRuntime.jsx(MenuItem, { onClick: function () {
-                                var _a;
-                                (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
-                                onClose();
-                            }, sx: { background: "red", width: menuWidth }, children: subItem.label }, subItem.label)); }) })] })), item.type === "dropdown" && isNarrow && (jsxRuntime.jsxs(StyledAccordion, { id: "".concat(item.label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(AccordionHeader, { children: item.label }), jsxRuntime.jsx(AccordionDetails, { children: item.items.map(function (subItem) { return (jsxRuntime.jsx(StyledSubItem, { onClick: function () {
-                                var _a;
-                                (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
-                                onClose();
-                            }, sx: { width: menuWidth }, children: subItem.label }, subItem.label)); }) })] }))] }, item.label));
+    return (jsxRuntime.jsxs(React.Fragment, { children: [item.itemType === "text" && (jsxRuntime.jsx(StyledTextItem, __assign({ sdsStyle: "minimal", onClick: item.onClick, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow }, rest, { children: item.label }))), item.itemType === "dropdown" && !isNarrow && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledTextItem, { sdsStyle: "minimal", ref: buttonRef, onClick: function (event) { return setAnchorEl(event.currentTarget); }, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, children: [jsxRuntime.jsx("span", { children: item.label }), jsxRuntime.jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }), jsxRuntime.jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, children: item.items.map(function (subItem) {
+                            var label = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
+                            return (jsxRuntime.jsx(MenuItem, __assign({ onClick: function () {
+                                    onClick === null || onClick === void 0 ? void 0 : onClick();
+                                    onClose();
+                                } }, subItemRest, { children: label }), label));
+                        }) })] })), item.itemType === "dropdown" && isNarrow && (jsxRuntime.jsxs(StyledAccordion, { id: "".concat(item.label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(AccordionHeader, { children: item.label }), jsxRuntime.jsx(AccordionDetails, { children: item.items.map(function (subItem) {
+                            var label = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
+                            return (jsxRuntime.jsx(StyledSubItem, __assign({ onClick: function () {
+                                    onClick === null || onClick === void 0 ? void 0 : onClick();
+                                    onClose();
+                                }, sx: { width: menuWidth } }, accordionSubItemRest, { children: label }), label));
+                        }) })] }))] }, item.label));
 }
 function NavigationHeaderSecondaryNav(_a) {
     var items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
-    return (jsxRuntime.jsx(StyledSection, { gap: "l", isNarrow: isNarrow, children: items.map(function (item) { return (jsxRuntime.jsx(SecondaryNavItem, { item: item, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow }, "".concat(item.label, "-").concat(item.type))); }) }));
+    return (jsxRuntime.jsx(StyledSection, { gap: "l", isNarrow: isNarrow, children: items.map(function (item) {
+            var itemType = item.itemType, label = item.label, rest = __rest(item, ["itemType", "label"]);
+            return (jsxRuntime.jsx(SecondaryNavItem, __assign({ item: item, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow }, rest), "".concat(label, "-").concat(itemType)));
+        }) }));
 }
 
 var NavigationHeader = React.forwardRef(function (props, ref) {
-    var activePrimaryNavKey = props.activePrimaryNavKey, buttons = props.buttons, hasInvertedStyle = props.hasInvertedStyle, logo = props.logo, logoUrl = props.logoUrl, primaryNavItems = props.primaryNavItems, _a = props.primaryNavPosition, primaryNavPosition = _a === void 0 ? "left" : _a, searchProps = props.searchProps, secondaryNavItems = props.secondaryNavItems, setActivePrimaryNavKey = props.setActivePrimaryNavKey, _b = props.showSearch, showSearch = _b === void 0 ? true : _b, tag = props.tag, tagColor = props.tagColor, title = props.title, rest = __rest(props, ["activePrimaryNavKey", "buttons", "hasInvertedStyle", "logo", "logoUrl", "primaryNavItems", "primaryNavPosition", "searchProps", "secondaryNavItems", "setActivePrimaryNavKey", "showSearch", "tag", "tagColor", "title"]);
+    var activePrimaryNavKey = props.activePrimaryNavKey, buttons = props.buttons, hasInvertedStyle = props.hasInvertedStyle, logo = props.logo, logoUrl = props.logoUrl, _a = props.logoLinkComponent, logoLinkComponent = _a === void 0 ? "a" : _a, logoLinkProps = props.logoLinkProps, primaryNavItems = props.primaryNavItems, _b = props.primaryNavPosition, primaryNavPosition = _b === void 0 ? "left" : _b, searchProps = props.searchProps, secondaryNavItems = props.secondaryNavItems, setActivePrimaryNavKey = props.setActivePrimaryNavKey, _c = props.showSearch, showSearch = _c === void 0 ? true : _c, tag = props.tag, tagColor = props.tagColor, title = props.title, rest = __rest(props, ["activePrimaryNavKey", "buttons", "hasInvertedStyle", "logo", "logoUrl", "logoLinkComponent", "logoLinkProps", "primaryNavItems", "primaryNavPosition", "searchProps", "secondaryNavItems", "setActivePrimaryNavKey", "showSearch", "tag", "tagColor", "title"]);
     var navRef = React.useRef(null);
     var theme = useTheme();
     var isMdScreen = material.useMediaQuery(theme.breakpoints.down("md"));
     React.useEffect(function () {
         setIsNarrow(isMdScreen);
     }, [isMdScreen]);
-    var _c = React.useState(true), drawerOpen = _c[0], setDrawerOpen = _c[1];
-    var _d = React.useState(isMdScreen), isNarrow = _d[0], setIsNarrow = _d[1];
-    var _e = React.useState(0), breakpoint = _e[0], setBreakpoint = _e[1];
+    var _d = React.useState(true), drawerOpen = _d[0], setDrawerOpen = _d[1];
+    var _e = React.useState(isMdScreen), isNarrow = _e[0], setIsNarrow = _e[1];
+    var _f = React.useState(0), breakpoint = _f[0], setBreakpoint = _f[1];
     var checkScrollable = React.useCallback(function () {
         if (!navRef.current)
             return;
@@ -14667,8 +14699,8 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
     };
     var renderLogoNode = function () {
         var logoNode = (jsxRuntime.jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(StyledLogoWrapper, { children: logo }), jsxRuntime.jsx("p", { children: title }), tag && jsxRuntime.jsx(StyledTag, { color: tagColor, label: tag, hover: false })] }));
-        if (logoUrl) {
-            logoNode = (jsxRuntime.jsx(StyledLogoLinkWrapper, { href: logoUrl, isNarrow: isNarrow, children: logoNode }));
+        if (logoLinkComponent || logoUrl) {
+            logoNode = (jsxRuntime.jsx(StyledLogoLinkWrapper, __assign({ component: logoLinkComponent, href: logoUrl }, logoLinkProps, { isNarrow: isNarrow, children: logoNode })));
         }
         return logoNode;
     };