@czi-sds/components 22.3.0 → 22.3.1

package/dist/index.esm.js

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { forwardRef, useEffect, useRef, useState, useCallback, createElement, useMemo, createContext, memo, Fragment as Fragment$1, useContext } from 'react';
 import { css, ThemeContext as ThemeContext$1 } from '@emotion/react';
-import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, useTheme as useTheme$4, Popper, ClickAwayListener, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, darken as darken$1, Card, CardActionArea, CardContent, styled as styled$3, CardActions, css as css$2, CardMedia, Dialog as Dialog$1, DialogActions as DialogActions$1, dialogActionsClasses, DialogContent, DialogTitle as DialogTitle$1, Typography, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, Divider, useMediaQuery, AppBar, Toolbar, Drawer, Tabs as Tabs$1, tabsClasses, Tab as Tab$1, Slide, Box as Box$1, drawerClasses, ToggleButtonGroup, toggleButtonClasses, ToggleButton, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
+import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, useTheme as useTheme$4, Popper, ClickAwayListener, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, darken as darken$1, Card, CardContent, styled as styled$3, CardActions, css as css$2, CardMedia, Dialog as Dialog$1, DialogActions as DialogActions$1, dialogActionsClasses, DialogContent, DialogTitle as DialogTitle$1, Typography, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, Divider, useMediaQuery, AppBar, Toolbar, Drawer, Tabs as Tabs$1, tabsClasses, Tab as Tab$1, Slide, Box as Box$1, drawerClasses, ToggleButtonGroup, toggleButtonClasses, ToggleButton, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
 export { CardMedia as ContentCardMedia } from '@mui/material';
 import styled$2 from '@emotion/styled';
 import { Check, Remove, Clear } from '@mui/icons-material';
@@ -6878,6 +6878,9 @@ var doNotForwardProps$o = [
     "buttonsPosition",
     "clickableCard",
     "imageSize",
+    "clickableCardProps",
+    "cardSdsType",
+    "classes",
 ];
 var StyledCard = styled$2(Card, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
@@ -6895,24 +6898,25 @@ var StyledCard = styled$2(Card, {
     var showDecorativeBorder = visualElementType === "image"
         ? boundingBox && decorativeBorder && imagePadding
         : boundingBox && decorativeBorder;
-    return 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 && 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 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 && 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 && 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 && 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$2(CardActionArea, {
+var StyledCardActionArea = styled$2(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: scroll;\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$2("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
@@ -6925,9 +6929,9 @@ var StyledIconMediaWrapper = styled$2("div", {
 var StyledCardContent = styled$2("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 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 && 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 css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      min-width: 100px;\n      width: 100%;\n\n      ", "\n    "], ["\n      display: flex;\n      flex-direction: column;\n      min-width: 100px;\n      width: 100%;\n\n      ", "\n    "])), boundingBox && 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$2(CardContent, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
@@ -6992,8 +6996,9 @@ var templateObject_1$H, templateObject_2$q, templateObject_3$i, templateObject_4
  * @see https://mui.com/material-ui/react-dialog/
  */
 var ContentCardTitle = forwardRef(function ContentCardTitle(props, ref) {
-    var overlineText = props.overlineText, titleText = props.titleText, subtitleText = props.subtitleText, metadataText = props.metadataText;
-    return (jsxs("div", { ref: ref, children: [jsxs(StyledTitleWrapper, { children: [overlineText && (jsx(StyledOverlineText, { children: overlineText })), titleText && jsx(StyledTitleText, { children: titleText }), subtitleText && (jsx(StyledSubtitleText, { children: subtitleText }))] }), metadataText && (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 (jsxs("div", { ref: ref, children: [jsxs(StyledTitleWrapper, { className: cardHeader, children: [overlineText && (jsx(StyledOverlineText, { className: cardOverline, children: overlineText })), titleText && (jsx(StyledTitleText, { className: cardTitle, children: titleText })), subtitleText && (jsx(StyledSubtitleText, { className: cardSubtitle, children: subtitleText }))] }), metadataText && (jsx(StyledMetadataText, { className: cardMetadata, children: metadataText }))] }));
 });
 
 var doNotForwardProps$m = ["buttonsPosition"];
@@ -7019,7 +7024,8 @@ var isButtonElement = function (child) {
  * @see https://mui.com/material-ui/api/card-actions/
  */
 var ContentCardActions = 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
@@ -7047,11 +7053,11 @@ var ContentCardActions = forwardRef(function ContentCardActions(props, ref) {
         if (!clickableCardButton) {
             return null;
         }
-        return (jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, children: [
-                React__default.cloneElement(clickableCardButton, __assign({ component: "a" }, clickableCardButton === null || clickableCardButton === void 0 ? void 0 : clickableCardButton.props)),
+        return (jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, className: cardActions, children: [
+                React__default.cloneElement(clickableCardButton, __assign({ component: "div" }, clickableCardButton === null || clickableCardButton === void 0 ? void 0 : clickableCardButton.props)),
             ] }));
     }
-    return (jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, children: validChildren }));
+    return (jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, className: cardActions, children: validChildren }));
 });
 
 var doNotForwardProps$l = [
@@ -7085,7 +7091,7 @@ var templateObject_1$F, templateObject_2$p, templateObject_3$h, templateObject_4
  * @see https://mui.com/material-ui/api/card-media/
  */
 var ContentCardImageMedia = 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.
@@ -7102,12 +7108,16 @@ var ContentCardImageMedia = forwardRef(function ContentCardImageMedia(props, ref
      * (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" ? (jsx(CardMedia, { component: "img", src: image, alt: "Content Card Media", sx: __assign({}, imageMediaStyles) })) : React__default.isValidElement(image) && image.type === CardMedia ? (React__default.cloneElement(image, {
         component: "img",
         sx: __assign(__assign({}, image.props.sx), imageMediaStyles),
+    })) : React__default.isValidElement(image) ? (React__default.cloneElement(image, {
+        style: __assign(__assign({}, imageMediaStyles), { objectFit: "cover", objectPosition: "center" }),
     })) : null;
-    return (jsx(StyledImageMediaWrapper, __assign({ ref: ref }, props, { children: imageElement })));
+    return (jsx(StyledImageMediaWrapper, __assign({ ref: ref }, props, { className: className, children: imageElement })));
 });
 
 var CONTENT_CARD_DEFAULT_IMAGE_MEDIA_SIZE = 300;
@@ -7135,10 +7145,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__default.Children.map(children, function (child) {
         if (React__default.isValidElement(child) && child.type === ContentCardActions) {
-            return React__default.cloneElement(child, __assign(__assign({}, child.props), { buttonsPosition: buttonsPosition, clickableCard: clickableCard }));
+            return React__default.cloneElement(child, __assign(__assign({}, child.props), { buttonsPosition: buttonsPosition, classes: classes, clickableCard: clickableCard }));
         }
         return child;
     });
@@ -7147,11 +7157,12 @@ var enhanceChildrenWithCardActionsProps = function (children, clickableCard, but
  * @see https://mui.com/material-ui/react-card/
  */
 var ContentCard = React__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 = useRef(null);
-    var _j = useResponsiveWidth(sdsType), handleResize = _j.handleResize, dynamicSdsType = _j.dynamicSdsType;
+    var _k = useResponsiveWidth(sdsType), handleResize = _k.handleResize, dynamicSdsType = _k.dynamicSdsType;
     useEffect(function () {
         var element = cardRef.current;
         if (!element)
@@ -7167,9 +7178,17 @@ var ContentCard = React__default.forwardRef(function (props, ref) {
             resizeObserver.disconnect();
         };
     }, [handleResize]);
-    var visualElement = visualElementType === "image" && image ? (jsx(ContentCardImageMedia, { imagePadding: imagePadding, boundingBox: boundingBox, sdsType: dynamicSdsType, imageSize: imageSize, image: image, imagePosition: imagePosition })) : visualElementType === "icon" && icon ? (jsx(StyledIconMediaWrapper, { boundingBox: boundingBox, children: icon })) : null;
-    var cardInnerContent = (jsxs(Fragment, { children: [visualElement, jsxs(StyledCardContent, { boundingBox: boundingBox, clickableCard: clickableCard, children: [jsx(ContentCardTitle, { overlineText: overlineText, titleText: titleText, subtitleText: subtitleText, metadataText: metadataText }), jsx(StyledCardContentAligner, { children: enhanceChildrenWithCardActionsProps(children, clickableCard, buttonsPosition) })] })] }));
-    return (jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, children: clickableCard ? (jsx(StyledCardActionArea, { sdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, children: cardInnerContent })) : (cardInnerContent) })));
+    var visualElement = visualElementType === "image" && image ? (jsx(ContentCardImageMedia, { imagePadding: imagePadding, boundingBox: boundingBox, sdsType: dynamicSdsType, imageSize: imageSize, image: image, imagePosition: imagePosition, className: cardMedia })) : visualElementType === "icon" && icon ? (jsx(StyledIconMediaWrapper, { boundingBox: boundingBox, className: cardMedia, children: icon })) : null;
+    var cardInnerContent = (jsxs(Fragment, { children: [visualElement, jsxs(StyledCardContent, { boundingBox: boundingBox, clickableCard: clickableCard, className: cardContent, children: [jsx(ContentCardTitle, { overlineText: overlineText, titleText: titleText, subtitleText: subtitleText, metadataText: metadataText, classes: {
+                            cardHeader: cardHeader,
+                            cardMetadata: cardMetadata,
+                            cardOverline: cardOverline,
+                            cardSubtitle: cardSubtitle,
+                            cardTitle: cardTitle,
+                        } }), jsx(StyledCardContentAligner, { children: enhanceChildrenWithCardActionsProps(children, clickableCard, buttonsPosition, {
+                            cardActions: cardActions,
+                        }) })] })] }));
+    return (jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, className: cardPaper, children: clickableCard ? (jsx(StyledCardActionArea, __assign({ sdsStyle: "minimal", cardSdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, className: clickableCardButton }, clickableCardProps, { children: cardInnerContent }))) : (cardInnerContent) })));
 });
 
 var DialogContext = createContext({ sdsSize: "m" });
@@ -14273,6 +14292,8 @@ var doNotForwardProps$9 = [
     "isNarrow",
     "primaryNavPosition",
     "showSearch",
+    "logoLinkComponent",
+    "logoLinkProps",
 ];
 var StyledHeader = styled$2(AppBar, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
@@ -14519,7 +14540,7 @@ var NarrowStyledTextItem = function (props) {
 };
 var StyledTextItem = styled$2(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);
@@ -14545,7 +14566,7 @@ var StyledTextItem = styled$2(Button, {
 var doNotForwardProps$6 = ["hasInvertedStyle", "isNarrow"];
 var StyledAccordion = styled$2(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);
@@ -14579,7 +14600,7 @@ var StyledSubItem = styled$2(MenuItem)(templateObject_7 || (templateObject_7 = _
 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 = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
     var open = Boolean(anchorEl);
     function onClose() {
@@ -14594,32 +14615,39 @@ function SecondaryNavItem(_a) {
         }
         setMenuWidth(button.offsetWidth);
     }, []);
-    return (jsxs(Fragment$1, { children: [item.type === "text" && (jsx(StyledTextItem, { sdsStyle: "minimal", onClick: item.onClick, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, children: item.label })), item.type === "dropdown" && !isNarrow && (jsxs(Fragment, { children: [jsxs(StyledTextItem, { sdsStyle: "minimal", ref: buttonRef, onClick: function (event) { return setAnchorEl(event.currentTarget); }, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, children: [jsx("span", { children: item.label }), jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }), jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, children: item.items.map(function (subItem) { return (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 && (jsxs(StyledAccordion, { id: "".concat(item.label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsx(AccordionHeader, { children: item.label }), jsx(AccordionDetails, { children: item.items.map(function (subItem) { return (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 (jsxs(Fragment$1, { children: [item.itemType === "text" && (jsx(StyledTextItem, __assign({ sdsStyle: "minimal", onClick: item.onClick, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow }, rest, { children: item.label }))), item.itemType === "dropdown" && !isNarrow && (jsxs(Fragment, { children: [jsxs(StyledTextItem, { sdsStyle: "minimal", ref: buttonRef, onClick: function (event) { return setAnchorEl(event.currentTarget); }, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, children: [jsx("span", { children: item.label }), jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }), 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 (jsx(MenuItem, __assign({ onClick: function () {
+                                    onClick === null || onClick === void 0 ? void 0 : onClick();
+                                    onClose();
+                                } }, subItemRest, { children: label }), label));
+                        }) })] })), item.itemType === "dropdown" && isNarrow && (jsxs(StyledAccordion, { id: "".concat(item.label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsx(AccordionHeader, { children: item.label }), jsx(AccordionDetails, { children: item.items.map(function (subItem) {
+                            var label = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
+                            return (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 (jsx(StyledSection, { gap: "l", isNarrow: isNarrow, children: items.map(function (item) { return (jsx(SecondaryNavItem, { item: item, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow }, "".concat(item.label, "-").concat(item.type))); }) }));
+    return (jsx(StyledSection, { gap: "l", isNarrow: isNarrow, children: items.map(function (item) {
+            var itemType = item.itemType, label = item.label, rest = __rest(item, ["itemType", "label"]);
+            return (jsx(SecondaryNavItem, __assign({ item: item, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow }, rest), "".concat(label, "-").concat(itemType)));
+        }) }));
 }
 
 var NavigationHeader = 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 = useRef(null);
     var theme = useTheme();
     var isMdScreen = useMediaQuery(theme.breakpoints.down("md"));
     useEffect(function () {
         setIsNarrow(isMdScreen);
     }, [isMdScreen]);
-    var _c = useState(true), drawerOpen = _c[0], setDrawerOpen = _c[1];
-    var _d = useState(isMdScreen), isNarrow = _d[0], setIsNarrow = _d[1];
-    var _e = useState(0), breakpoint = _e[0], setBreakpoint = _e[1];
+    var _d = useState(true), drawerOpen = _d[0], setDrawerOpen = _d[1];
+    var _e = useState(isMdScreen), isNarrow = _e[0], setIsNarrow = _e[1];
+    var _f = useState(0), breakpoint = _f[0], setBreakpoint = _f[1];
     var checkScrollable = useCallback(function () {
         if (!navRef.current)
             return;
@@ -14644,8 +14672,8 @@ var NavigationHeader = forwardRef(function (props, ref) {
     };
     var renderLogoNode = function () {
         var logoNode = (jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsx(StyledLogoWrapper, { children: logo }), jsx("p", { children: title }), tag && jsx(StyledTag, { color: tagColor, label: tag, hover: false })] }));
-        if (logoUrl) {
-            logoNode = (jsx(StyledLogoLinkWrapper, { href: logoUrl, isNarrow: isNarrow, children: logoNode }));
+        if (logoLinkComponent || logoUrl) {
+            logoNode = (jsx(StyledLogoLinkWrapper, __assign({ component: logoLinkComponent, href: logoUrl }, logoLinkProps, { isNarrow: isNarrow, children: logoNode })));
         }
         return logoNode;
     };