@czi-sds/components 22.3.3 → 22.5.0

package/dist/index.cjs.js

@@ -815,12 +815,6 @@ var sharedAppTheme = {
         },
     },
 };
-/**
- * Create a SDS App Theme with custom colors that follows the SDS color model.
- */
-var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), { colors: colors })); };
-var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
-var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors);
 // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
 // applications to override those colors using their own custom theme.
 // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
@@ -830,116 +824,79 @@ var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors);
 //
 // (masoudmanson): We need to define borders separately for light and dark themes
 // because the border colors are different for each theme.
-SDSLightAppTheme.borders = {
-    accent: {
-        default: "1px solid ".concat(SDSLightThemeColors.blue[500]),
-        focused: "1px solid ".concat(SDSLightThemeColors.blue[500]),
-        hover: "1px solid ".concat(SDSLightThemeColors.blue[600]),
-        open: "1px solid ".concat(SDSLightThemeColors.blue[500]),
-        pressed: "1px solid ".concat(SDSLightThemeColors.blue[700]),
-        selected: "1px solid ".concat(SDSLightThemeColors.blue[500]),
-    },
-    base: {
-        default: "1px solid ".concat(SDSLightThemeColors.gray[500]),
-        disabled: "1px solid ".concat(SDSLightThemeColors.gray[300]),
-        divider: "1px solid ".concat(SDSLightThemeColors.gray[200]),
-        dividerInverse: "1px solid ".concat(SDSLightThemeColors.gray[600]),
-        hover: "1px solid ".concat(SDSLightThemeColors.gray[900]),
-        inverse: "1px solid ".concat(SDSLightThemeColors.gray[50]),
-        pressed: "1px solid ".concat(SDSLightThemeColors.gray[900]),
-        table: "1px solid ".concat(SDSLightThemeColors.gray[300]),
-    },
-    beta: {
-        default: "1px solid ".concat(SDSLightThemeColors.purple[600]),
-        extraThick: "4px solid ".concat(SDSLightThemeColors.purple[600]),
-        thick: "2px solid ".concat(SDSLightThemeColors.purple[600]),
-    },
-    info: {
-        default: "1px solid ".concat(SDSLightThemeColors.blue[600]),
-        extraThick: "4px solid ".concat(SDSLightThemeColors.blue[600]),
-        thick: "2px solid ".concat(SDSLightThemeColors.blue[600]),
-    },
-    link: {
-        dashed: "1px dashed",
-        solid: "1px solid",
-    },
-    negative: {
-        default: "1px solid ".concat(SDSLightThemeColors.red[600]),
-        extraThick: "4px solid ".concat(SDSLightThemeColors.red[600]),
-        thick: "2px solid ".concat(SDSLightThemeColors.red[600]),
-    },
-    neutral: {
-        default: "1px solid ".concat(SDSLightThemeColors.gray[500]),
-        extraThick: "4px solid ".concat(SDSLightThemeColors.gray[500]),
-        thick: "2px solid ".concat(SDSLightThemeColors.gray[500]),
-    },
-    none: "none",
-    notice: {
-        default: "1px solid ".concat(SDSLightThemeColors.yellow[600]),
-        extraThick: "4px solid ".concat(SDSLightThemeColors.yellow[600]),
-        thick: "2px solid ".concat(SDSLightThemeColors.yellow[600]),
-    },
-    positive: {
-        default: "1px solid ".concat(SDSLightThemeColors.green[600]),
-        extraThick: "4px solid ".concat(SDSLightThemeColors.green[600]),
-        thick: "2px solid ".concat(SDSLightThemeColors.green[600]),
-    },
-};
-SDSDarkAppTheme.borders = {
-    accent: {
-        default: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
-        focused: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
-        hover: "1px solid ".concat(SDSDarkThemeColors.blue[700]),
-        open: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
-        pressed: "1px solid ".concat(SDSDarkThemeColors.blue[800]),
-        selected: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
-    },
-    base: {
-        default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
-        disabled: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
-        divider: "1px solid ".concat(SDSDarkThemeColors.gray[200]),
-        dividerInverse: "1px solid ".concat(SDSDarkThemeColors.gray[600]),
-        hover: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
-        inverse: "1px solid ".concat(SDSDarkThemeColors.gray[50]),
-        pressed: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
-        table: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
-    },
-    beta: {
-        default: "1px solid ".concat(SDSDarkThemeColors.purple[600]),
-        extraThick: "4px solid ".concat(SDSDarkThemeColors.purple[600]),
-        thick: "2px solid ".concat(SDSDarkThemeColors.purple[600]),
-    },
-    info: {
-        default: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
-        extraThick: "4px solid ".concat(SDSDarkThemeColors.blue[600]),
-        thick: "2px solid ".concat(SDSDarkThemeColors.blue[600]),
-    },
-    link: {
-        dashed: "1px dashed",
-        solid: "1px solid",
-    },
-    negative: {
-        default: "1px solid ".concat(SDSDarkThemeColors.red[600]),
-        extraThick: "4px solid ".concat(SDSDarkThemeColors.red[600]),
-        thick: "2px solid ".concat(SDSDarkThemeColors.red[600]),
-    },
-    neutral: {
-        default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
-        extraThick: "4px solid ".concat(SDSDarkThemeColors.gray[500]),
-        thick: "2px solid ".concat(SDSDarkThemeColors.gray[500]),
-    },
-    none: "none",
-    notice: {
-        default: "1px solid ".concat(SDSDarkThemeColors.yellow[600]),
-        extraThick: "4px solid ".concat(SDSDarkThemeColors.yellow[600]),
-        thick: "2px solid ".concat(SDSDarkThemeColors.yellow[600]),
-    },
-    positive: {
-        default: "1px solid ".concat(SDSDarkThemeColors.green[600]),
-        extraThick: "4px solid ".concat(SDSDarkThemeColors.green[600]),
-        thick: "2px solid ".concat(SDSDarkThemeColors.green[600]),
-    },
+var BorderThickness = {
+    default: 1,
+    extraThick: 4,
+    thick: 2,
+};
+var createAppThemeBorders = function (colors, isDarkMode) {
+    var createSolidBorder = function (color, level, thickness) { return "".concat(BorderThickness[thickness], "px solid ").concat(colors[color][level]); };
+    var createDashedBorder = function () { return "1px dashed"; };
+    return {
+        accent: {
+            default: createSolidBorder("blue", isDarkMode ? 600 : 500, "default"),
+            focused: createSolidBorder("blue", isDarkMode ? 600 : 500, "default"),
+            hover: createSolidBorder("blue", isDarkMode ? 700 : 600, "default"),
+            open: createSolidBorder("blue", isDarkMode ? 600 : 500, "default"),
+            pressed: createSolidBorder("blue", isDarkMode ? 800 : 700, "default"),
+            selected: createSolidBorder("blue", isDarkMode ? 600 : 500, "default"),
+        },
+        base: {
+            default: createSolidBorder("gray", 500, "default"),
+            disabled: createSolidBorder("gray", 300, "default"),
+            divider: createSolidBorder("gray", 200, "default"),
+            dividerInverse: createSolidBorder("gray", 600, "default"),
+            hover: createSolidBorder("gray", 900, "default"),
+            inverse: createSolidBorder("gray", 50, "default"),
+            pressed: createSolidBorder("gray", 900, "default"),
+            table: createSolidBorder("gray", 300, "default"),
+        },
+        beta: {
+            default: createSolidBorder("purple", 600, "default"),
+            extraThick: createSolidBorder("purple", 600, "extraThick"),
+            thick: createSolidBorder("purple", 600, "thick"),
+        },
+        info: {
+            default: createSolidBorder("blue", 600, "default"),
+            extraThick: createSolidBorder("blue", 600, "extraThick"),
+            thick: createSolidBorder("blue", 600, "thick"),
+        },
+        link: {
+            dashed: createDashedBorder(),
+            solid: createSolidBorder("blue", 500, "default"),
+        },
+        negative: {
+            default: createSolidBorder("red", 600, "default"),
+            extraThick: createSolidBorder("red", 600, "extraThick"),
+            thick: createSolidBorder("red", 600, "thick"),
+        },
+        neutral: {
+            default: createSolidBorder("gray", 500, "default"),
+            extraThick: createSolidBorder("gray", 500, "extraThick"),
+            thick: createSolidBorder("gray", 500, "thick"),
+        },
+        none: "none",
+        notice: {
+            default: createSolidBorder("yellow", 600, "default"),
+            extraThick: createSolidBorder("yellow", 600, "extraThick"),
+            thick: createSolidBorder("yellow", 600, "thick"),
+        },
+        positive: {
+            default: createSolidBorder("green", 600, "default"),
+            extraThick: createSolidBorder("green", 600, "extraThick"),
+            thick: createSolidBorder("green", 600, "thick"),
+        },
+    };
 };
+/**
+ * Create a SDS App Theme with custom colors that follows the SDS color model.
+ */
+var makeSdsSemanticAppTheme = function (colors, isDarkTheme) {
+    if (isDarkTheme === void 0) { isDarkTheme = false; }
+    return (__assign(__assign({}, sharedAppTheme), { borders: createAppThemeBorders(colors, isDarkTheme), colors: colors }));
+};
+var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
+var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors, true);
 /**
  * Helper function to select the appropriate theme settings.
  *
@@ -1658,7 +1615,7 @@ var fontTabular = function (fontSize, fontWeight, isNarrow) {
         if (!typography)
             return null;
         var tabular = typography.wideStyles.tabular, narrowTabular = typography.narrowStyles.tabular, tabularFontFamily = typography.fontFamily.tabular;
-        return react.css(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n      font-variant-numeric: tabular-nums;\n\n      ", "\n    "], ["\n      font-variant-numeric: tabular-nums;\n\n      ", "\n    "])), isNarrow
+        return react.css(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n      font-variant-numeric: tabular-nums;\n\n      ", "\n    "], ["\n      font-variant-numeric: tabular-nums;\n\n      ", "\n    "])), isNarrow
             ? react.css(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n            ", " {\n              ", "\n            }\n          "], ["\n            ", " {\n              ", "\n            }\n          "])), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowTabular[fontWeight][fontSize], tabularFontFamily)) : themeToCss(tabular[fontWeight][fontSize], tabularFontFamily));
     };
 };
@@ -1668,9 +1625,9 @@ var fontTabularSemiboldXs = fontTabular("xs", "semibold");
 var fontTabularSemiboldS = fontTabular("s", "semibold");
 function themeToCss(fontTheme, fontFamily) {
     if (fontFamily === void 0) { fontFamily = "inherit"; }
-    return react.css(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: ", " !important;\n    letter-spacing: ", ";\n    font-weight: ", ";\n    text-transform: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: ", " !important;\n    letter-spacing: ", ";\n    font-weight: ", ";\n    text-transform: ", ";\n  "])), fontFamily, fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform);
+    return react.css(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: ", " !important;\n    letter-spacing: ", ";\n    font-weight: ", ";\n    text-transform: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: ", " !important;\n    letter-spacing: ", ";\n    font-weight: ", ";\n    text-transform: ", ";\n  "])), fontFamily, fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform);
 }
-var templateObject_1$1a, templateObject_2$N, templateObject_3$D, templateObject_4$w, templateObject_5$p, templateObject_6$l, templateObject_7$g, templateObject_8$d;
+var templateObject_1$1a, templateObject_2$N, templateObject_3$D, templateObject_4$w, templateObject_5$p, templateObject_6$l, templateObject_7$h, templateObject_8$e;
 
 var StyledAccordionDetails = styled__default.default(material.AccordionDetails)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
     var spaces = getSpaces(props);
@@ -4446,7 +4403,7 @@ var AccordionHeader = function (props) {
 };
 
 var sdsPropNames$2 = ["useDivider", "togglePosition"];
-var StyledAccordion$1 = styled__default.default(material.Accordion, {
+var StyledAccordion$2 = styled__default.default(material.Accordion, {
     shouldForwardProp: function (prop) {
         return !sdsPropNames$2.includes(prop.toString());
     },
@@ -4480,7 +4437,7 @@ var Accordion = React__namespace.default.forwardRef(function (props, ref) {
             setExpanded(isExpanded ? panel : false);
         };
     };
-    return (jsxRuntime.jsx(StyledAccordion$1, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, expanded: expanded === id, onChange: handleChange(id), ref: ref }, props, { children: children })));
+    return (jsxRuntime.jsx(StyledAccordion$2, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, expanded: expanded === id, onChange: handleChange(id), ref: ref }, props, { children: children })));
 });
 
 var StyledAlert = styled__default.default(material.Alert)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
@@ -4717,29 +4674,29 @@ var Minimal = function (props) {
 var PrimaryMinimalButton = function (props) {
     var _a, _b;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n    ", "\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "], ["\n    ", "\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament);
+    return react.css(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n    ", "\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "], ["\n    ", "\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament);
 };
 var SecondaryMinimalButton = function (props) {
     var _a, _b;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n    ", "\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "], ["\n    ", "\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary);
+    return react.css(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n    ", "\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "], ["\n    ", "\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary);
 };
 var StyledMinimalButton = styled__default.default(material.Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
-})(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var sdsType = props.sdsType;
-    return react.css(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
+    return react.css(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
 });
 var StyledButtonLegacy = styled__default.default(material.Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
-})(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
+})(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
     if (!props.isRounded)
         return "";
     var corners = getCorners(props);
     var spaces = getSpaces(props);
     return "\n      border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    ");
 });
-var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$u, templateObject_5$o, templateObject_6$k, templateObject_7$f, templateObject_8$c, templateObject_9$7, templateObject_10$5, templateObject_11$4;
+var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$u, templateObject_5$o, templateObject_6$k, templateObject_7$g, templateObject_8$d, templateObject_9$8, templateObject_10$6, templateObject_11$5;
 
 var isDisabled$1 = function (props) {
     var _a, _b;
@@ -4781,7 +4738,7 @@ var large = function (props) {
     var sdsType = props.sdsType;
     var iconSizes = getIconSizes(props);
     var spaces = getSpaces(props);
-    return react.css(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n    ", "\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      ", "\n    }\n  "], ["\n    ", "\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      ", "\n    }\n  "])), sdsType !== "tertiary"
+    return react.css(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n    ", "\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      ", "\n    }\n  "], ["\n    ", "\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      ", "\n    }\n  "])), sdsType !== "tertiary"
         ? "margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0;")
         : "", iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;") : "");
 };
@@ -4796,11 +4753,11 @@ var doNotForwardProps$D = [
 ];
 var StyledButtonIcon = styled__default.default(material.IconButton, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
-})(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n  padding: 0;\n  ", "\n\n  ", "\n"], ["\n  padding: 0;\n  ", "\n\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
+})(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n  padding: 0;\n  ", "\n\n  ", "\n"], ["\n  padding: 0;\n  ", "\n\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
     var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
-    return react.css(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
+    return react.css(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
 });
-var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$t, templateObject_5$n, templateObject_6$j, templateObject_7$e, templateObject_8$b, templateObject_9$6;
+var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$t, templateObject_5$n, templateObject_6$j, templateObject_7$f, templateObject_8$c, templateObject_9$7;
 
 var ButtonIconSizeToSdsIconSize = {
     large: "xl",
@@ -4938,8 +4895,8 @@ var StyledSearchBase = styled__default.default(material.TextField, {
     var semanticColors = getSemanticColors(props);
     return react.css(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n      margin-top: ", "px;\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      min-width: 120px;\n      display: block;\n\n      [type=\"search\"]::-webkit-search-cancel-button {\n        -webkit-appearance: none;\n        appearance: none;\n      }\n\n      & .input-search-clear-icon {\n        cursor: pointer;\n\n        svg {\n          height: ", "px;\n          width: ", "px;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n        width: 100%;\n\n        .", " {\n          padding-right: ", "px;\n\n          &::placeholder {\n            color: ", ";\n            opacity: 1;\n          }\n        }\n\n        .MuiInputAdornment-positionEnd {\n          position: absolute;\n          right: ", "px;\n        }\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        &:hover .input-search-clear-icon,\n        &:focus-within .input-search-clear-icon {\n          svg {\n            color: ", " !important;\n          }\n\n          &:hover {\n            svg {\n              color: ", " !important;\n            }\n          }\n\n          &:active {\n            svg {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n      }\n\n      .", ":hover {\n        & .", ":last-of-type {\n          svg {\n            color: ", ";\n          }\n        }\n        .", " {\n          border: 1px solid ", ";\n        }\n      }\n\n      .", ".", " {\n        outline: none;\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        .", " .", ":last-of-type {\n          cursor: default;\n          svg {\n            color: ", ";\n          }\n        }\n      }\n\n      &.user-is-tabbing .", ":focus-within {\n        outline: 2px solid ", ";\n        outline-offset: 1px;\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      margin-top: ", "px;\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      min-width: 120px;\n      display: block;\n\n      [type=\"search\"]::-webkit-search-cancel-button {\n        -webkit-appearance: none;\n        appearance: none;\n      }\n\n      & .input-search-clear-icon {\n        cursor: pointer;\n\n        svg {\n          height: ", "px;\n          width: ", "px;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n        width: 100%;\n\n        .", " {\n          padding-right: ", "px;\n\n          &::placeholder {\n            color: ", ";\n            opacity: 1;\n          }\n        }\n\n        .MuiInputAdornment-positionEnd {\n          position: absolute;\n          right: ", "px;\n        }\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        &:hover .input-search-clear-icon,\n        &:focus-within .input-search-clear-icon {\n          svg {\n            color: ", " !important;\n          }\n\n          &:hover {\n            svg {\n              color: ", " !important;\n            }\n          }\n\n          &:active {\n            svg {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n      }\n\n      .", ":hover {\n        & .", ":last-of-type {\n          svg {\n            color: ", ";\n          }\n        }\n        .", " {\n          border: 1px solid ", ";\n        }\n      }\n\n      .", ".", " {\n        outline: none;\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        .", " .", ":last-of-type {\n          cursor: default;\n          svg {\n            color: ", ";\n          }\n        }\n      }\n\n      &.user-is-tabbing .", ":focus-within {\n        outline: 2px solid ", ";\n        outline-offset: 1px;\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, material.outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textTertiary, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, material.inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.outlinedInputClasses.root, material.buttonBaseClasses.root, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, material.outlinedInputClasses.notchedOutline, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderPrimaryHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.ornamentFocus, material.outlinedInputClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.borderPrimaryHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
 });
-var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n  position: relative;\n  height: unset;\n  margin: 0;\n"], ["\n  position: relative;\n  height: unset;\n  margin: 0;\n"])));
-var templateObject_1$12, templateObject_2$G, templateObject_3$x, templateObject_4$s, templateObject_5$m, templateObject_6$i, templateObject_7$d;
+var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n  position: relative;\n  height: unset;\n  margin: 0;\n"], ["\n  position: relative;\n  height: unset;\n  margin: 0;\n"])));
+var templateObject_1$12, templateObject_2$G, templateObject_3$x, templateObject_4$s, templateObject_5$m, templateObject_6$i, templateObject_7$e;
 
 var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -4984,7 +4941,7 @@ var StyledIconWrapper = styled__default.default("span")(templateObject_6$h || (t
 });
 var StyledCheck = styled__default.default(iconsMaterial.Check, {
     shouldForwardProp: function (prop) { return prop !== "selected"; },
-})(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
     var selected = props.selected, disabled = props.disabled;
     var iconSizes = getIconSizes(props);
@@ -4996,7 +4953,7 @@ var StyledCheck = styled__default.default(iconsMaterial.Check, {
 });
 var StyledMinus = styled__default.default(iconsMaterial.Remove, {
     shouldForwardProp: function (prop) { return prop !== "selected"; },
-})(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
     var selected = props.selected, disabled = props.disabled;
     var semanticColors = getSemanticColors(props);
@@ -5006,7 +4963,7 @@ var StyledMinus = styled__default.default(iconsMaterial.Remove, {
         : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
     return "\n      color: ".concat(selected ? selectedColor : "transparent", ";\n      padding: 0;\n      height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n      width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n\n      &.MuiCheckbox-colorPrimary.Mui-checked:hover {\n        background-color: transparent;\n      }\n    ");
 });
-var templateObject_1$11, templateObject_2$F, templateObject_3$w, templateObject_4$r, templateObject_5$l, templateObject_6$h, templateObject_7$c, templateObject_8$a;
+var templateObject_1$11, templateObject_2$F, templateObject_3$w, templateObject_4$r, templateObject_5$l, templateObject_6$h, templateObject_7$d, templateObject_8$b;
 
 /**
  * @see https://mui.com/material-ui/react-menu/
@@ -5953,7 +5910,7 @@ var arrowCss = function (props) {
     var _a, _b;
     var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
     var semanticColors = getSemanticColors(props);
-    return css.css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n    &.MuiTooltip-arrow {\n      /* (bethbertozzi): !important is needed to fight inline style */\n      left: ", "px !important;\n      color: ", ";\n      &:before {\n        box-sizing: border-box;\n        width: 12px;\n        height: 12px;\n      }\n    }\n  "], ["\n    &.MuiTooltip-arrow {\n      /* (bethbertozzi): !important is needed to fight inline style */\n      left: ", "px !important;\n      color: ", ";\n      &:before {\n        box-sizing: border-box;\n        width: 12px;\n        height: 12px;\n      }\n    }\n  "])), arrowOffset, hasInvertedStyle || inverted || sdsStyle === "dark"
+    return css.css(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n    &.MuiTooltip-arrow {\n      /* (bethbertozzi): !important is needed to fight inline style */\n      left: ", "px !important;\n      color: ", ";\n      &:before {\n        box-sizing: border-box;\n        width: 12px;\n        height: 12px;\n      }\n    }\n  "], ["\n    &.MuiTooltip-arrow {\n      /* (bethbertozzi): !important is needed to fight inline style */\n      left: ", "px !important;\n      color: ", ";\n      &:before {\n        box-sizing: border-box;\n        width: 12px;\n        height: 12px;\n      }\n    }\n  "])), arrowOffset, hasInvertedStyle || inverted || sdsStyle === "dark"
         ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse
         : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
 };
@@ -5961,8 +5918,8 @@ var arrowCss = function (props) {
  * (masoudmanson): !important is needed to override arrow's
  * default placement which is calculated by javascript
  */
-var StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n  &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-bottom: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(0px, -2px);\n      border-bottom-right-radius: 2px;\n      box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-top: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 2px);\n      border-top-left-radius: 2px;\n      box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-right: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 1px);\n      border-top-right-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-left: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(4px, 2px);\n      border-bottom-left-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n"], ["\n  &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-bottom: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(0px, -2px);\n      border-bottom-right-radius: 2px;\n      box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-top: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 2px);\n      border-top-left-radius: 2px;\n      box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-right: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 1px);\n      border-top-right-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-left: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(4px, 2px);\n      border-bottom-left-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n"])));
-var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$f, templateObject_7$b, templateObject_8$9;
+var StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n  &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-bottom: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(0px, -2px);\n      border-bottom-right-radius: 2px;\n      box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-top: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 2px);\n      border-top-left-radius: 2px;\n      box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-right: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 1px);\n      border-top-right-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-left: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(4px, 2px);\n      border-bottom-left-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n"], ["\n  &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-bottom: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(0px, -2px);\n      border-bottom-right-radius: 2px;\n      box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-top: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 2px);\n      border-top-left-radius: 2px;\n      box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-right: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 1px);\n      border-top-right-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-left: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(4px, 2px);\n      border-bottom-left-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n"])));
+var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$f, templateObject_7$c, templateObject_8$a;
 
 /**
  * @see https://mui.com/material-ui/react-tooltip/
@@ -6102,7 +6059,7 @@ var PrimaryText = styled__default.default("div", {
 });
 var SecondaryText = styled__default.default("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
-})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
+})(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a;
     var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b;
     var spaces = getSpaces(props);
@@ -6113,7 +6070,7 @@ var SecondaryText = styled__default.default("span", {
 });
 var TertiaryText = styled__default.default("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
-})(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
+})(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a;
     var _b = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _b === void 0 ? 1 : _b;
     var spaces = getSpaces(props);
@@ -6122,15 +6079,15 @@ var TertiaryText = styled__default.default("span", {
         ? ShouldWrap(tertiaryTextWrapLineCount)
         : ShouldTruncate(), "\n    ");
 });
-var PrimaryTextComponentSlotBottomWrapper = styled__default.default("div")(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var PrimaryTextComponentSlotBottomWrapper = styled__default.default("div")(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     return "\n      margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n    ");
 });
-var PrimaryTextComponentSlotRightWrapper = styled__default.default("div")(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var PrimaryTextComponentSlotRightWrapper = styled__default.default("div")(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     return "\n      margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n    ");
 });
-var templateObject_1$S, templateObject_2$z, templateObject_3$q, templateObject_4$m, templateObject_5$h, templateObject_6$e, templateObject_7$a, templateObject_8$8, templateObject_9$5, templateObject_10$4;
+var templateObject_1$S, templateObject_2$z, templateObject_3$q, templateObject_4$m, templateObject_5$h, templateObject_6$e, templateObject_7$b, templateObject_8$9, templateObject_9$6, templateObject_10$5;
 
 var CellBasicContent = function (props) {
     var primaryText = props.primaryText, primaryTextWrapLineCount = props.primaryTextWrapLineCount, secondaryText = props.secondaryText, secondaryTextWrapLineCount = props.secondaryTextWrapLineCount, tertiaryText = props.tertiaryText, tertiaryTextWrapLineCount = props.tertiaryTextWrapLineCount, _a = props.shouldTextWrap, shouldTextWrap = _a === void 0 ? true : _a, icon = props.icon, iconVerticalAlign = props.iconVerticalAlign, primaryTextComponentSlotRight = props.primaryTextComponentSlotRight, primaryTextComponentSlotBottom = props.primaryTextComponentSlotBottom, _b = props.horizontalAlign, horizontalAlign = _b === void 0 ? "left" : _b;
@@ -6302,11 +6259,11 @@ var statusToCss = {
 var doNotForwardProps$s = ["isRounded"];
 var StyledChip = styled__default.default(material.Chip, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
-})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  border: none;\n\n  ", "\n"], ["\n  border: none;\n\n  ", "\n"])), function (props) {
+})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n  border: none;\n\n  ", "\n"], ["\n  border: none;\n\n  ", "\n"])), function (props) {
     var size = props.size, status = props.status, isRounded = props.isRounded;
     return react.css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), isRounded && rounded$2(props), !isRounded && square$2(props), size === "small" && small(props), size === "medium" && medium(props), status && statusToCss[status](props));
 });
-var templateObject_1$P, templateObject_2$x, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$9;
+var templateObject_1$P, templateObject_2$x, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$a;
 
 /**
  * @see https://mui.com/material-ui/react-chip/
@@ -6482,12 +6439,12 @@ var isOpen = function (props) {
 var applyIntentColor$1 = function (props, intent) {
     var _a, _b, _c;
     var borders = getBorders(props);
-    return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n    border: ", ";\n\n    &:hover {\n      border: ", ";\n    }\n\n    &:active {\n      border: ", ";\n    }\n  "], ["\n    border: ", ";\n\n    &:hover {\n      border: ", ";\n    }\n\n    &:active {\n      border: ", ";\n    }\n  "])), (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.pressed);
+    return react.css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n    border: ", ";\n\n    &:hover {\n      border: ", ";\n    }\n\n    &:active {\n      border: ", ";\n    }\n  "], ["\n    border: ", ";\n\n    &:hover {\n      border: ", ";\n    }\n\n    &:active {\n      border: ", ";\n    }\n  "])), (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.pressed);
 };
 var isDisabled = function (props) {
     var _a, _b, _c, _d;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n    cursor: default;\n    border-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n  "], ["\n    cursor: default;\n    border-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled);
+    return react.css(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n    cursor: default;\n    border-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n  "], ["\n    cursor: default;\n    border-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled);
 };
 /**
  * (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
@@ -6499,9 +6456,9 @@ var isDisabled = function (props) {
  */
 var StyledInputDropdown = styled__default.default(Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
-})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n  ", "\n  ", "\n  outline-offset: 1px !important;\n\n  /* (thuang): in Minimal it's a different value */\n  align-items: center;\n  /* (thuang): in Minimal it's a different value */\n  flex-direction: row;\n\n  justify-content: space-between;\n\n  ", "\n"], ["\n  ", "\n  ", "\n  outline-offset: 1px !important;\n\n  /* (thuang): in Minimal it's a different value */\n  align-items: center;\n  /* (thuang): in Minimal it's a different value */\n  flex-direction: row;\n\n  justify-content: space-between;\n\n  ", "\n"])), labelFontBodyXs, focusVisibleA11yStyle, function (props) {
+})(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n  ", "\n  ", "\n  outline-offset: 1px !important;\n\n  /* (thuang): in Minimal it's a different value */\n  align-items: center;\n  /* (thuang): in Minimal it's a different value */\n  flex-direction: row;\n\n  justify-content: space-between;\n\n  ", "\n"], ["\n  ", "\n  ", "\n  outline-offset: 1px !important;\n\n  /* (thuang): in Minimal it's a different value */\n  align-items: center;\n  /* (thuang): in Minimal it's a different value */\n  flex-direction: row;\n\n  justify-content: space-between;\n\n  ", "\n"])), labelFontBodyXs, focusVisibleA11yStyle, function (props) {
     var disabled = props.disabled, intent = props.intent, state = props.state, value = props.value, sdsStyle = props.sdsStyle;
-    return react.css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), value && userInput(props), intent === "notice" &&
+    return react.css(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), value && userInput(props), intent === "notice" &&
         sdsStyle !== "minimal" &&
         applyIntentColor$1(props, "notice"), intent === "negative" &&
         sdsStyle !== "minimal" &&
@@ -6511,7 +6468,7 @@ var StyledInputDropdown = styled__default.default(Button, {
 });
 var StyledDetail = styled__default.default("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
-})(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
@@ -6564,7 +6521,7 @@ function labelStyle(props) {
         : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
     return react.css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n  "])), labelColor);
 }
-var templateObject_1$N, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$8, templateObject_8$7, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$3, templateObject_16$2, templateObject_17$2;
+var templateObject_1$N, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$9, templateObject_8$8, templateObject_9$5, templateObject_10$4, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$3, templateObject_16$2, templateObject_17$2;
 
 /**
  * @see https://mui.com/material-ui/react-button/
@@ -6739,15 +6696,15 @@ var doNotForwardProps$p = [
     "tagColor",
     "hover",
 ];
-var StyledTag$2 = styled__default.default(material.Chip, {
+var StyledTag$3 = styled__default.default(material.Chip, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
-})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  border: none;\n\n  ", "\n"], ["\n  border: none;\n\n  ", "\n"])), function (props) {
+})(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n  border: none;\n\n  ", "\n"], ["\n  border: none;\n\n  ", "\n"])), function (props) {
     var _a = props.hover, hover = _a === void 0 ? true : _a, sdsType = props.sdsType, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
     var isRounded = sdsStyle === "rounded";
     var type = sdsType || "primary";
-    return react.css(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsSize === "l" ? tagSizeL(props) : tagSizeS(props), typeToCss[type](props), isRounded ? rounded(props) : square(props), hover ? withHover(props) : "pointer-events: none;");
+    return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsSize === "l" ? tagSizeL(props) : tagSizeS(props), typeToCss[type](props), isRounded ? rounded(props) : square(props), hover ? withHover(props) : "pointer-events: none;");
 });
-var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$7, templateObject_8$6;
+var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$8, templateObject_8$7;
 
 /**
  * @see https://mui.com/material-ui/react-chip/
@@ -6758,10 +6715,10 @@ var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4
  */
 var Tag = function (props) {
     var color = props.color;
-    return jsxRuntime.jsx(StyledTag$2, __assign({ tagColor: color }, props, { color: "primary" }));
+    return jsxRuntime.jsx(StyledTag$3, __assign({ tagColor: color }, props, { color: "primary" }));
 };
 
-var StyledTag$1 = styled__default.default(Tag)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledTag$2 = styled__default.default(Tag)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
@@ -6774,7 +6731,7 @@ var templateObject_1$L, templateObject_2$t;
  * @see https://mui.com/material-ui/react-chip/
  */
 var TagFilter = function (props) {
-    return (jsxRuntime.jsx(StyledTag$1, __assign({ role: "none presentation" }, props, { deleteIcon: jsxRuntime.jsx(Button, { "aria-label": "Delete Tag", icon: "XMark", sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon" }), color: "info" })));
+    return (jsxRuntime.jsx(StyledTag$2, __assign({ role: "none presentation" }, props, { deleteIcon: jsxRuntime.jsx(Button, { "aria-label": "Delete Tag", icon: "XMark", sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon" }), color: "info" })));
 };
 
 var Chips = function (_a) {
@@ -6946,18 +6903,18 @@ var StyledCardActionArea = styled__default.default(Button, {
 });
 var StyledIconMediaWrapper = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
-})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
     var spaces = getSpaces(props);
-    return react.css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), boundingBox
-        ? react.css(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n            padding: ", "px 0 ", "px ", "px;\n          "], ["\n            padding: ", "px 0 ", "px ", "px;\n          "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl) : react.css(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n            padding-right: ", "px;\n          "], ["\n            padding-right: ", "px;\n          "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
+    return react.css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), boundingBox
+        ? react.css(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n            padding: ", "px 0 ", "px ", "px;\n          "], ["\n            padding: ", "px 0 ", "px ", "px;\n          "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl) : react.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n            padding-right: ", "px;\n          "], ["\n            padding-right: ", "px;\n          "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
 });
 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;
     var spaces = getSpaces(props);
-    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));
+    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$3 || (templateObject_11$3 = __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); },
@@ -6968,7 +6925,7 @@ var StyledContentCardBody = styled__default.default(material.CardContent, {
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n      margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px 0 0;\n      padding: 0;\n    ");
 });
 var StyledCardContentAligner = styled__default.default("div")(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  height: 100%;\n"])));
-var templateObject_1$J, templateObject_2$r, templateObject_3$k, templateObject_4$h, templateObject_5$c, templateObject_6$a, templateObject_7$6, templateObject_8$5, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2;
+var templateObject_1$J, templateObject_2$r, templateObject_3$k, templateObject_4$h, templateObject_5$c, templateObject_6$a, templateObject_7$7, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2;
 
 var doNotForwardProps$n = [
     "visualElement",
@@ -7018,13 +6975,22 @@ var StyledMetadataText = material.styled("p", {
 });
 var templateObject_1$I, templateObject_2$q, templateObject_3$j, templateObject_4$g, templateObject_5$b;
 
-/**
- * @see https://mui.com/material-ui/react-dialog/
- */
+var createTextComponent = function (StyledComponent) {
+    return function (_a) {
+        var text = _a.text, className = _a.className;
+        if (!text)
+            return null;
+        return typeof text === "string" ? (jsxRuntime.jsx(StyledComponent, { className: className, children: text })) : (text);
+    };
+};
+var OverlineText = createTextComponent(StyledOverlineText);
+var TitleText = createTextComponent(StyledTitleText);
+var SubtitleText = createTextComponent(StyledSubtitleText);
+var MetadataText = createTextComponent(StyledMetadataText);
 var ContentCardTitle = React.forwardRef(function ContentCardTitle(props, ref) {
     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 }))] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, children: [jsxRuntime.jsxs(StyledTitleWrapper, { className: cardHeader, children: [jsxRuntime.jsx(OverlineText, { text: overlineText, className: cardOverline }), jsxRuntime.jsx(TitleText, { text: titleText, className: cardTitle }), jsxRuntime.jsx(SubtitleText, { text: subtitleText, className: cardSubtitle })] }), jsxRuntime.jsx(MetadataText, { text: metadataText, className: cardMetadata })] }));
 });
 
 var doNotForwardProps$m = ["buttonsPosition"];
@@ -7096,22 +7062,22 @@ var doNotForwardProps$l = [
 ];
 var StyledImageMediaWrapper = material.styled("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
-})(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a = props.imagePadding, imagePadding = _a === void 0 ? false : _a, _b = props.boundingBox, boundingBox = _b === void 0 ? true : _b, _c = props.sdsType, sdsType = _c === void 0 ? "wide" : _c, _d = props.imagePosition, imagePosition = _d === void 0 ? "left" : _d;
     var spaces = getSpaces(props);
-    return material.css(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n      display: flex;\n      align-items: start;\n\n      ", "\n\n      ", "\n    "], ["\n      display: flex;\n      align-items: start;\n\n      ", "\n\n      ", "\n    "])), boundingBox
+    return material.css(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n      display: flex;\n      align-items: start;\n\n      ", "\n\n      ", "\n    "], ["\n      display: flex;\n      align-items: start;\n\n      ", "\n\n      ", "\n    "])), boundingBox
         ? imagePadding
             ? material.css(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n              padding: ", "px;\n              ", "\n            "], ["\n              padding: ", "px;\n              ", "\n            "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, imagePosition === "left"
                 ? "padding-right: 0;"
                 : "padding-left: 0;") : material.css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n              padding: 0;\n            "], ["\n              padding: 0;\n            "])))
         : material.css(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), imagePosition === "left"
             ? "padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")
-            : "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && material.css(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n        ", "\n\n        justify-content: center;\n      "], ["\n        ", "\n\n        justify-content: center;\n      "])), boundingBox
+            : "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && material.css(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n        ", "\n\n        justify-content: center;\n      "], ["\n        ", "\n\n        justify-content: center;\n      "])), boundingBox
         ? imagePadding
             ? material.css(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n                padding: ", "px;\n                padding-bottom: 0;\n              "], ["\n                padding: ", "px;\n                padding-bottom: 0;\n              "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl) : material.css(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n                padding: 0;\n              "], ["\n                padding: 0;\n              "])))
         : material.css(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n              padding-bottom: ", "px;\n            "], ["\n              padding-bottom: ", "px;\n            "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl)));
 });
-var templateObject_1$G, templateObject_2$p, templateObject_3$i, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2;
+var templateObject_1$G, templateObject_2$p, templateObject_3$i, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$6, templateObject_8$5, templateObject_9$3;
 
 /**
  * @see https://mui.com/material-ui/api/card-media/
@@ -7541,7 +7507,7 @@ var StyledCheckboxLabel = styled__default.default("span")(templateObject_6$8 ||
     var spaces = getSpaces(props);
     return "\n      margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n    ");
 });
-var StyledCheckboxCaption = styled__default.default("span")(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
+var StyledCheckboxCaption = styled__default.default("span")(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a;
     var semanticColors = getSemanticColors(props);
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n    ");
@@ -7552,7 +7518,7 @@ var disabledStyles$1 = function (props) {
     var borders = getBorders(props);
     return "\n    user-select: none;\n\n    ".concat(StyledCheckboxDefaultIcon, " {\n      border: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, ";\n    }\n\n    ").concat(StyledCheckboxCheckedIcon, " {\n      background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, ";\n    }\n\n    ").concat(StyledCheckboxCaption, " {\n      color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, ";\n    }\n\n    &:hover, &:active {\n      ").concat(StyledCheckboxDefaultIcon, " {\n        border: ").concat((_d = borders === null || borders === void 0 ? void 0 : borders.base) === null || _d === void 0 ? void 0 : _d.disabled, ";\n      }\n\n      ").concat(StyledCheckboxCheckedIcon, " {\n        background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentDisabled, ";\n      }\n    }\n  ");
 };
-var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel)(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d;
     var disabled = props.disabled;
     var spaces = getSpaces(props);
@@ -7560,7 +7526,7 @@ var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel
     var borders = getBorders(props);
     return "\n      align-items: start;\n      margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-left: 0;\n      margin-right: 0;\n      width: fit-content;\n\n      &:hover {\n        ").concat(StyledCheckboxDefaultIcon, " {\n          border: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.hover, ";\n        }\n\n        ").concat(StyledCheckboxCheckedIcon, " {\n          background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n        }\n      }\n\n      &:active {\n        ").concat(StyledCheckboxDefaultIcon, " {\n          border: ").concat((_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.pressed, ";\n        }\n\n        ").concat(StyledCheckboxCheckedIcon, " {\n          background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.fillPressed, ";\n        }\n      }\n\n      ").concat(disabled && disabledStyles$1(props), "\n    ");
 });
-var templateObject_1$z, templateObject_2$m, templateObject_3$g, templateObject_4$d, templateObject_5$9, templateObject_6$8, templateObject_7$4, templateObject_8$3;
+var templateObject_1$z, templateObject_2$m, templateObject_3$g, templateObject_4$d, templateObject_5$9, templateObject_6$8, templateObject_7$5, templateObject_8$4;
 
 /**
  * @see https://mui.com/material-ui/react-checkbox/
@@ -7623,7 +7589,7 @@ var StyledRadioLabel = styled__default.default("span")(templateObject_6$7 || (te
     var spaces = getSpaces(props);
     return "\n      margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n    ");
 });
-var StyledRadioCaption = styled__default.default("span")(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
+var StyledRadioCaption = styled__default.default("span")(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a;
     var semanticColors = getSemanticColors(props);
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n    ");
@@ -7633,14 +7599,14 @@ var disabledStyles = function (props) {
     var semanticColors = getSemanticColors(props);
     return "\n    user-select: none;\n\n    ".concat(StyledRadioCaption, " {\n      color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled, ";\n    }\n\n    ").concat(StyledRadioDefaultIcon, " {\n      border: 1px solid ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderPrimaryDisabled, ";\n    }\n\n    ").concat(StyledRadioCheckedIcon, " {\n      background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentDisabled, ";\n    }\n\n    &:hover, &:active {\n      ").concat(StyledRadioDefaultIcon, " {\n        border: 1px solid ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderPrimaryDisabled, ";\n      }\n\n      ").concat(StyledRadioCheckedIcon, " {\n        background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentDisabled, ";\n      }\n    }\n  ");
 };
-var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d;
     var disabled = props.disabled;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
     return "\n      align-items: start;\n      margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-left: 0;\n      margin-right: 0;\n      width: fit-content;\n\n      &:hover {\n        ").concat(StyledRadioDefaultIcon, " {\n          border: 1px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryHover, ";\n        }\n\n        ").concat(StyledRadioCheckedIcon, " {\n          background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n        }\n      }\n\n      &:active {\n        ").concat(StyledRadioDefaultIcon, " {\n          border: 1px solid ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimaryPressed, ";\n        }\n\n        ").concat(StyledRadioCheckedIcon, " {\n          background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.fillPressed, ";\n        }\n      }\n\n      ").concat(disabled && disabledStyles(props), "\n    ");
 });
-var templateObject_1$y, templateObject_2$l, templateObject_3$f, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$3, templateObject_8$2;
+var templateObject_1$y, templateObject_2$l, templateObject_3$f, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$4, templateObject_8$3;
 
 /**
  * @see https://mui.com/material-ui/react-radio-button/
@@ -8115,10 +8081,10 @@ var StyledLogoWrapper$1 = styled__default.default("div", {
 });
 var StyledNavSection = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
-})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var isNarrow = props.isNarrow;
     var spaces = getSpaces(props);
-    return material.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding-left: ", "px;\n      gap: ", "px;\n\n      ", "\n    "], ["\n      display: flex;\n      align-items: center;\n      padding-left: ", "px;\n      gap: ", "px;\n\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && material.css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n        flex-direction: column;\n        gap: 0;\n        margin-top: ", "px;\n        width: 100%;\n        padding-left: 0;\n      "], ["\n        flex-direction: column;\n        gap: 0;\n        margin-top: ", "px;\n        width: 100%;\n        padding-left: 0;\n      "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
+    return material.css(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding-left: ", "px;\n      gap: ", "px;\n\n      ", "\n    "], ["\n      display: flex;\n      align-items: center;\n      padding-left: ", "px;\n      gap: ", "px;\n\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, isNarrow && material.css(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n        flex-direction: column;\n        gap: 0;\n        margin-top: ", "px;\n        width: 100%;\n        padding-left: 0;\n      "], ["\n        flex-direction: column;\n        gap: 0;\n        margin-top: ", "px;\n        width: 100%;\n        padding-left: 0;\n      "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
 });
 var StyledTopSection = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
@@ -8126,11 +8092,11 @@ var StyledTopSection = styled__default.default("div", {
     var isNarrow = props.isNarrow;
     var semanticColors = getSemanticColors(props);
     var spaces = getSpaces(props);
-    return material.css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n      align-items: center;\n      display: flex;\n      justify-content: space-between;\n      margin-bottom: ", "px;\n\n      a:hover {\n        text-decoration: none;\n      }\n\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n        text-decoration: none;\n      }\n\n      ", "\n    "], ["\n      align-items: center;\n      display: flex;\n      justify-content: space-between;\n      margin-bottom: ", "px;\n\n      a:hover {\n        text-decoration: none;\n      }\n\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n        text-decoration: none;\n      }\n\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, props.hasInvertedStyle
+    return material.css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n      align-items: center;\n      display: flex;\n      justify-content: space-between;\n      margin-bottom: ", "px;\n\n      a:hover {\n        text-decoration: none;\n      }\n\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n        text-decoration: none;\n      }\n\n      ", "\n    "], ["\n      align-items: center;\n      display: flex;\n      justify-content: space-between;\n      margin-bottom: ", "px;\n\n      a:hover {\n        text-decoration: none;\n      }\n\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n        text-decoration: none;\n      }\n\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, props.hasInvertedStyle
         ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
         : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, props.hasInvertedStyle
         ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
-        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && material.css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n        flex-direction: column;\n        margin-bottom: ", "px;\n      "], ["\n        flex-direction: column;\n        margin-bottom: ", "px;\n      "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, isNarrow && material.css(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n        flex-direction: column;\n        margin-bottom: ", "px;\n      "], ["\n        flex-direction: column;\n        margin-bottom: ", "px;\n      "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
 });
 var StyledLinkSection = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
@@ -8161,7 +8127,7 @@ var StyledBottomSection = styled__default.default("div", {
     var spaces = getSpaces(props);
     return material.css(templateObject_22$1 || (templateObject_22$1 = __makeTemplateObject(["\n      margin-top: ", "px;\n\n      ", "\n    "], ["\n      margin-top: ", "px;\n\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, isNarrow && material.css(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["\n        flex-direction: column-reverse;\n        margin-top: ", "px;\n      "], ["\n        flex-direction: column-reverse;\n        margin-top: ", "px;\n      "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
 });
-var templateObject_1$n, templateObject_2$f, templateObject_3$a, templateObject_4$7, templateObject_5$5, templateObject_6$4, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1;
+var templateObject_1$n, templateObject_2$f, templateObject_3$a, templateObject_4$7, templateObject_5$5, templateObject_6$4, templateObject_7$3, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1;
 
 /**
  * WARNING: Don't import this directly.
@@ -14428,7 +14394,7 @@ styled__default.default("div", {
 });
 var StyledHeaderButton = styled__default.default(Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
-})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d;
     var sdsType = props.sdsType, hasInvertedStyle = props.hasInvertedStyle;
     var mode = ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.mode) || "light";
@@ -14439,18 +14405,18 @@ var StyledHeaderButton = styled__default.default(Button, {
 var invertedNarrowButtonStyles = function (props) {
     var _a, _b, _c, _d;
     var semanticColors = getSemanticColors(props);
-    return material.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    color: ", ";\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-within {\n      color: ", ";\n      svg {\n        fill: ", ";\n      }\n    }\n  "], ["\n    color: ", ";\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-within {\n      color: ", ";\n      svg {\n        fill: ", ";\n      }\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimaryInverse, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimaryInverse);
+    return material.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n    color: ", ";\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-within {\n      color: ", ";\n      svg {\n        fill: ", ";\n      }\n    }\n  "], ["\n    color: ", ";\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-within {\n      color: ", ";\n      svg {\n        fill: ", ";\n      }\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimaryInverse, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimaryInverse);
 };
 var StyledNarrowIconButton = styled__default.default(Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
-})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var hasInvertedStyle = props.hasInvertedStyle;
-    return material.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), hasInvertedStyle && invertedNarrowButtonStyles(props));
+    return material.css(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), hasInvertedStyle && invertedNarrowButtonStyles(props));
 });
 var invertedWideButtonStyles = function (props) {
     var _a, _b;
     var semanticColors = getSemanticColors(props);
-    return material.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-within {\n      svg {\n        fill: ", ";\n      }\n    }\n  "], ["\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-within {\n      svg {\n        fill: ", ";\n      }\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse);
+    return material.css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-within {\n      svg {\n        fill: ", ";\n      }\n    }\n  "], ["\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-within {\n      svg {\n        fill: ", ";\n      }\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse);
 };
 var StyledWideIconButton = styled__default.default(Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
@@ -14484,7 +14450,7 @@ var StyledTitleTagWrapper = styled__default.default("div", {
     var spaces = getSpaces(props);
     return "\n      display: flex;\n      align-items: center;\n      gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n      p {\n        white-space: nowrap;\n      }\n  ");
 });
-var StyledTag = styled__default.default(Tag)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  margin: 1px 0 0 0;\n\n  .MuiChip-label {\n    ", "\n    ", "\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n"], ["\n  margin: 1px 0 0 0;\n\n  .MuiChip-label {\n    ", "\n    ", "\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n"])), fontBody("xxxs", "regular"), fontBody("xxxs", "regular", /* isNarrow */ true));
+var StyledTag$1 = styled__default.default(Tag)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  margin: 0;\n\n  .MuiChip-label {\n    ", "\n    ", "\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n"], ["\n  margin: 0;\n\n  .MuiChip-label {\n    ", "\n    ", "\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n"])), fontBody("xxxs", "regular"), fontBody("xxxs", "regular", /* isNarrow */ true));
 var StyledPrimaryNavContainer = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
 })(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-grow: 1;\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  flex-grow: 1;\n\n  ", "\n"])), function (props) {
@@ -14553,7 +14519,7 @@ var StyledNarrowButton = styled__default.default(Button, {
     var hasInvertedStyle = props.hasInvertedStyle;
     return material.css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n      ", "\n      margin: 0;\n    "], ["\n      ", "\n      margin: 0;\n    "])), hasInvertedStyle && invertedWideButtonStyles(props));
 });
-var templateObject_1$k, templateObject_2$c, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;
+var templateObject_1$k, templateObject_2$c, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;
 
 var doNotForwardProps$8 = ["active", "hasInvertedStyle", "isNarrow"];
 var NarrowPrimaryNavItem = function (props) {
@@ -14576,30 +14542,46 @@ var NarrowPrimaryNavItem = function (props) {
 };
 var PrimaryNavItem = styled__default.default(Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
-})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: start;\n  background: none;\n  padding: 0;\n  min-width: fit-content;\n\n  ", "\n"], ["\n  display: flex;\n  align-items: start;\n  background: none;\n  padding: 0;\n  min-width: fit-content;\n\n  ", "\n"])), function (props) {
+})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  background: none;\n  padding: 0;\n  min-width: fit-content;\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  background: none;\n  padding: 0;\n  min-width: fit-content;\n\n  ", "\n"])), function (props) {
+    var _a;
     var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
     var spaces = getSpaces(props);
-    var colors = getSemanticColors(props);
-    return react.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n      gap: ", "px;\n\n      &:hover {\n        background: none;\n        box-shadow: none;\n\n        & > span {\n          color: ", ";\n        }\n      }\n\n      ", "\n    "], ["\n      gap: ", "px;\n\n      &:hover {\n        background: none;\n        box-shadow: none;\n\n        & > span {\n          color: ", ";\n        }\n      }\n\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, hasInvertedStyle
-        ? colors === null || colors === void 0 ? void 0 : colors.base.textPrimaryInverse
-        : colors === null || colors === void 0 ? void 0 : colors.base.textPrimary, isNarrow && NarrowPrimaryNavItem(props));
+    var semanticColors = getSemanticColors(props);
+    var ChevronDefaultColor = hasInvertedStyle
+        ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondary;
+    return react.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n      gap: ", "px;\n\n      svg {\n        color: ", ";\n      }\n\n      &:hover {\n        background: none;\n        box-shadow: none;\n\n        & > span {\n          color: ", ";\n        }\n\n        svg {\n          color: ", " !important;\n        }\n      }\n\n      ", "\n    "], ["\n      gap: ", "px;\n\n      svg {\n        color: ", ";\n      }\n\n      &:hover {\n        background: none;\n        box-shadow: none;\n\n        & > span {\n          color: ", ";\n        }\n\n        svg {\n          color: ", " !important;\n        }\n      }\n\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, ChevronDefaultColor, hasInvertedStyle
+        ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
+        ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover, isNarrow && NarrowPrimaryNavItem(props));
 });
 var WideStyledLabel = function (props) {
-    var _a, _b;
-    var hasInvertedStyle = props.hasInvertedStyle, active = props.active;
-    var colors = getSemanticColors(props);
+    var _a, _b, _c;
+    var hasInvertedStyle = props.hasInvertedStyle, active = props.active, _d = props.itemType, itemType = _d === void 0 ? "text" : _d;
+    var semanticColors = getSemanticColors(props);
     var activeBorderColor = hasInvertedStyle
-        ? (_a = colors === null || colors === void 0 ? void 0 : colors.base) === null || _a === void 0 ? void 0 : _a.borderOnFill
-        : (_b = colors === null || colors === void 0 ? void 0 : colors.accent) === null || _b === void 0 ? void 0 : _b.border;
+        ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderOnFill
+        : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.border;
     var inactiveBorderColor = hasInvertedStyle
-        ? colors === null || colors === void 0 ? void 0 : colors.base.borderOnFill
-        : colors === null || colors === void 0 ? void 0 : colors.base.borderPrimary;
-    return react.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n    border-bottom: solid 2px transparent;\n    border-bottom-color: ", ";\n\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  "], ["\n    border-bottom: solid 2px transparent;\n    border-bottom-color: ", ";\n\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  "])), active ? activeBorderColor : "transparent", active ? activeBorderColor : inactiveBorderColor);
+        ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.borderOnFill
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.borderPrimary;
+    var ChevronDefaultColor = hasInvertedStyle
+        ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondary;
+    var ChevronOpenColor = hasInvertedStyle
+        ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentPrimaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent.ornamentOpen;
+    return react.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n    border-bottom: solid 2px transparent;\n    border-bottom-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  "], ["\n    border-bottom: solid 2px transparent;\n    border-bottom-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  "])), active && itemType === "text"
+        ? activeBorderColor
+        : "transparent", active ? ChevronOpenColor : ChevronDefaultColor, active ? activeBorderColor : inactiveBorderColor);
 };
+var StyledTag = styled__default.default(Tag)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  margin: 0;\n\n  .MuiChip-label {\n    ", "\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n"], ["\n  margin: 0;\n\n  .MuiChip-label {\n    ", "\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n"])), fontBody("xxxs", "regular"));
 var StyledLabel = styled__default.default("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
-})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontHeader("m"), function (props) {
+})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontHeader("m"), function (props) {
     var hasInvertedStyle = props.hasInvertedStyle, active = props.active, isNarrow = props.isNarrow;
+    var spaces = getSpaces(props);
     var colors = getSemanticColors(props);
     var activeColor = hasInvertedStyle
         ? colors === null || colors === void 0 ? void 0 : colors.base.textPrimaryInverse
@@ -14607,9 +14589,44 @@ var StyledLabel = styled__default.default("span", {
     var inactiveColor = hasInvertedStyle
         ? colors === null || colors === void 0 ? void 0 : colors.base.textSecondaryInverse
         : colors === null || colors === void 0 ? void 0 : colors.base.textSecondary;
-    return react.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n      color: ", ";\n\n      ", "\n    "], ["\n      color: ", ";\n\n      ", "\n    "])), active ? activeColor : inactiveColor, !isNarrow && WideStyledLabel(props));
+    return react.css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      gap: ", "px;\n      color: ", ";\n\n      ", " {\n        margin-top: -", "px;\n      }\n\n      ", "\n    "], ["\n      display: flex;\n      align-items: center;\n      gap: ", "px;\n      color: ", ";\n\n      ", " {\n        margin-top: -", "px;\n      }\n\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, active ? activeColor : inactiveColor, StyledTag, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, !isNarrow && WideStyledLabel(props));
+});
+var StyledAccordion$1 = styled__default.default(Accordion, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  width: 100%;\n  min-width: unset;\n\n  .MuiAccordionSummary-content {\n    ", "\n  }\n\n  .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n    ", "\n  }\n\n  ", "\n"], ["\n  width: 100%;\n  min-width: unset;\n\n  .MuiAccordionSummary-content {\n    ", "\n  }\n\n  .MuiAccordionDetails-root .MuiButtonBase-root .primary-text {\n    ", "\n  }\n\n  ", "\n"])), fontBodySemiboldM, fontBodyS$1, function (props) {
+    var _a, _b, _c, _d;
+    var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
+    var spaces = getSpaces(props);
+    var semanticColors = getSemanticColors(props);
+    var textDefaultColor = hasInvertedStyle
+        ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary;
+    var textOpenColor = hasInvertedStyle
+        ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary;
+    var ChevronDefaultColor = hasInvertedStyle
+        ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondary;
+    var ChevronOpenColor = hasInvertedStyle
+        ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent.ornamentOpen;
+    var isNarrowStyles = function () { return react.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), hasInvertedStyle
+        ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary); };
+    return react.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      .MuiButtonBase-root {\n        padding: ", "px ", "px;\n        color: ", ";\n\n        .MuiAccordionSummary-expandIconWrapper {\n          margin-top: ", "px !important;\n        }\n\n        svg {\n          color: ", ";\n        }\n\n        &[aria-expanded=\"true\"] {\n          color: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n        }\n\n        &:hover {\n          padding: ", "px ", "px ", "px\n            ", "px;\n          width: 100%;\n          box-shadow: none;\n          background: ", ";\n          border-left: ", "px solid\n            ", ";\n          color: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n\n          ", "\n        }\n      }\n\n      .MuiCollapse-root .MuiAccordionDetails-root {\n        padding: 0;\n\n        .MuiButtonBase-root {\n          padding: ", "px 0 ", "px 34px !important;\n\n          .primary-text {\n            color: ", " !important;\n          }\n\n          &:hover {\n            padding: ", "px 0 ", "px\n              calc(34px - ", "px) !important;\n\n            .primary-text {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n    "], ["\n      .MuiButtonBase-root {\n        padding: ", "px ", "px;\n        color: ", ";\n\n        .MuiAccordionSummary-expandIconWrapper {\n          margin-top: ", "px !important;\n        }\n\n        svg {\n          color: ", ";\n        }\n\n        &[aria-expanded=\"true\"] {\n          color: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n        }\n\n        &:hover {\n          padding: ", "px ", "px ", "px\n            ", "px;\n          width: 100%;\n          box-shadow: none;\n          background: ", ";\n          border-left: ", "px solid\n            ", ";\n          color: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n\n          ", "\n        }\n      }\n\n      .MuiCollapse-root .MuiAccordionDetails-root {\n        padding: 0;\n\n        .MuiButtonBase-root {\n          padding: ", "px 0 ", "px 34px !important;\n\n          .primary-text {\n            color: ", " !important;\n          }\n\n          &:hover {\n            padding: ", "px 0 ", "px\n              calc(34px - ", "px) !important;\n\n            .primary-text {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, textDefaultColor, spaces === null || spaces === void 0 ? void 0 : spaces.s, ChevronDefaultColor, textOpenColor, ChevronOpenColor, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.m, ((_b = spaces === null || spaces === void 0 ? void 0 : spaces.l) !== null && _b !== void 0 ? _b : 0) + ((_c = spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) !== null && _c !== void 0 ? _c : 0), hasInvertedStyle
+        ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.xs, semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.borderPrimary, hasInvertedStyle
+        ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
+        ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover, isNarrow && isNarrowStyles(), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, hasInvertedStyle
+        ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xs, hasInvertedStyle
+        ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary);
 });
-var templateObject_1$j, templateObject_2$b, templateObject_3$6, templateObject_4$4, templateObject_5$3, templateObject_6$2;
+var StyledSubItem$1 = styled__default.default(MenuItem)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  &.MuiButtonBase-root.MuiMenuItem-root:hover {\n    span.primary-text {\n      font-weight: 600;\n    }\n  }\n"], ["\n  &.MuiButtonBase-root.MuiMenuItem-root:hover {\n    span.primary-text {\n      font-weight: 600;\n    }\n  }\n"])));
+var templateObject_1$j, templateObject_2$b, templateObject_3$6, templateObject_4$4, templateObject_5$3, templateObject_6$2, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
 
 var doNotForwardProps$7 = ["isNarrow"];
 var NarrowStyledSection = function () {
@@ -14627,14 +14644,65 @@ var templateObject_1$i, templateObject_2$a, templateObject_3$5;
 
 function NavigationHeaderPrimaryNav(_a) {
     var hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow, items = _a.items, onChange = _a.onChange, value = _a.value;
+    var theme = material.useTheme();
+    var _b = React.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var buttonRef = React.useRef(null);
+    var _c = React.useState("100%"), menuWidth = _c[0], setMenuWidth = _c[1];
+    var open = Boolean(anchorEl);
+    function onClose() {
+        setAnchorEl(null);
+    }
+    React.useEffect(function () {
+        var button = buttonRef.current;
+        if (!button) {
+            return;
+        }
+        setMenuWidth(button.offsetWidth);
+    }, []);
     return (jsxRuntime.jsx(StyledSection, { isNarrow: isNarrow, children: items.map(function (item) {
+            var _a, _b;
             var key = item.key, label = item.label, tag = item.tag, tagColor = item.tagColor, rest = __rest(item, ["key", "label", "tag", "tagColor"]);
             var isActive = key === value;
-            return (jsxRuntime.jsxs(PrimaryNavItem, __assign({}, rest, { sdsStyle: "square", active: isActive, onClick: function (e) {
-                    var _a;
+            if (item.itemType === "dropdown" && !isNarrow) {
+                var dropdownItem = item;
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(PrimaryNavItem, __assign({}, rest, { itemType: item.itemType, ref: buttonRef, sdsStyle: "minimal", active: open, onClick: function (e) {
+                                setAnchorEl(e.currentTarget);
+                                onChange(key);
+                            }, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: jsxRuntime.jsxs(StyledLabel, { itemType: item.itemType, active: open, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [label, jsxRuntime.jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })), jsxRuntime.jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, slotProps: {
+                                paper: {
+                                    style: {
+                                        marginTop: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s,
+                                    },
+                                },
+                            }, anchorOrigin: {
+                                horizontal: "left",
+                                vertical: "bottom",
+                            }, transformOrigin: {
+                                horizontal: "left",
+                                vertical: "top",
+                            }, children: dropdownItem.items.map(function (subItem) {
+                                var subLabel = 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();
+                                    }, sx: { minWidth: menuWidth } }, subItemRest, { children: subLabel }), "menu-item-".concat(subLabel)));
+                            }) })] }, key));
+            }
+            if (item.itemType === "dropdown" && isNarrow) {
+                var dropdownItem = item;
+                return (jsxRuntime.jsxs(StyledAccordion$1, { id: "".concat(item.label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(AccordionHeader, { children: item.label }), jsxRuntime.jsx(AccordionDetails, { children: dropdownItem.items.map(function (subItem) {
+                                var dropdownItemLabel = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
+                                return (jsxRuntime.jsx(StyledSubItem$1, __assign({ onClick: function () {
+                                        onClick === null || onClick === void 0 ? void 0 : onClick();
+                                        onClose();
+                                    } }, accordionSubItemRest, { children: dropdownItemLabel }), "primary-nav-item-".concat(dropdownItemLabel)));
+                            }) })] }, "".concat(item.label, "-dropdown")));
+            }
+            return (jsxRuntime.jsx(PrimaryNavItem, __assign({}, rest, { sdsStyle: "minimal", active: isActive, onClick: function (e) {
+                    var _a, _b;
                     onChange(key);
-                    (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
-                }, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(StyledLabel, { active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: label }), tag && jsxRuntime.jsx(StyledTag, { label: tag, color: tagColor, hover: false })] }), key));
+                    (_b = (_a = item).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                }, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: jsxRuntime.jsxs(StyledLabel, { active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [label, "tag" in item && (jsxRuntime.jsx(StyledTag, { label: tag, color: tagColor, hover: false }))] }) }), key));
         }) }));
 }
 
@@ -14643,13 +14711,13 @@ var NarrowStyledTextItem = function (props) {
     var hasInvertedStyle = props.hasInvertedStyle;
     var semanticColors = getSemanticColors(props);
     var spaces = getSpaces(props);
-    return react.css(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n    padding-left: ", "px;\n    border-radius: 0;\n    width: 100%;\n\n    &:hover {\n      box-shadow: none;\n      background: ", ";\n    }\n  "], ["\n    padding-left: ", "px;\n    border-radius: 0;\n    width: 100%;\n\n    &:hover {\n      box-shadow: none;\n      background: ", ";\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, hasInvertedStyle
+    return react.css(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n    padding-left: ", "px;\n    border-radius: 0;\n    width: 100%;\n    min-height: 44px;\n\n    &:hover {\n      box-shadow: none;\n      background: ", ";\n    }\n  "], ["\n    padding-left: ", "px;\n    border-radius: 0;\n    width: 100%;\n    min-height: 44px;\n\n    &:hover {\n      box-shadow: none;\n      background: ", ";\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, hasInvertedStyle
         ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
         : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary);
 };
 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: fit-content;\n  min-width: unset;\n  padding: 0;\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  padding: 0;\n\n  ", "\n"])), fontHeaderS, function (props) {
+})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  ", "\n\n  background: none;\n  justify-content: flex-start;\n  width: fit-content;\n  min-width: unset;\n  padding: 0;\n\n  ", "\n"], ["\n  ", "\n\n  background: none;\n  justify-content: flex-start;\n  width: fit-content;\n  min-width: unset;\n  padding: 0;\n\n  ", "\n"])), fontHeaderS, function (props) {
     var _a, _b;
     var hasInvertedStyle = props.hasInvertedStyle, open = props.open, isNarrow = props.isNarrow;
     var semanticColors = getSemanticColors(props);
@@ -14695,22 +14763,25 @@ var StyledAccordion = styled__default.default(Accordion, {
     var isNarrowStyles = function () { return react.css(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), hasInvertedStyle
         ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondaryInverse
         : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.backgroundSecondary); };
-    return react.css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n      .MuiButtonBase-root {\n        padding: ", "px ", "px;\n        color: ", ";\n\n        svg {\n          color: ", ";\n        }\n\n        &[aria-expanded=\"true\"] {\n          color: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n        }\n\n        &:hover {\n          color: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n\n          ", "\n        }\n      }\n\n      .MuiCollapse-root .MuiAccordionDetails-root {\n        padding: 0;\n\n        .MuiButtonBase-root {\n          padding: ", "px 0 ", "px 34px !important;\n\n          .primary-text {\n            color: ", " !important;\n\n            &:hover {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n    "], ["\n      .MuiButtonBase-root {\n        padding: ", "px ", "px;\n        color: ", ";\n\n        svg {\n          color: ", ";\n        }\n\n        &[aria-expanded=\"true\"] {\n          color: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n        }\n\n        &:hover {\n          color: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n\n          ", "\n        }\n      }\n\n      .MuiCollapse-root .MuiAccordionDetails-root {\n        padding: 0;\n\n        .MuiButtonBase-root {\n          padding: ", "px 0 ", "px 34px !important;\n\n          .primary-text {\n            color: ", " !important;\n\n            &:hover {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, textDefaultColor, ChevronDefaultColor, textOpenColor, ChevronOpenColor, hasInvertedStyle
+    return react.css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n      .MuiButtonBase-root {\n        padding: ", "px ", "px;\n        color: ", ";\n\n        svg {\n          color: ", ";\n        }\n\n        &[aria-expanded=\"true\"] {\n          color: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n        }\n\n        &:hover {\n          color: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n\n          ", "\n        }\n      }\n\n      .MuiCollapse-root .MuiAccordionDetails-root {\n        padding: 0;\n\n        .primary-text {\n          color: ", " !important;\n\n          &:hover {\n            color: ", " !important;\n          }\n        }\n\n        .MuiButtonBase-root {\n          padding: ", "px 0 ", "px 34px !important;\n\n          &:hover {\n            .primary-text {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n    "], ["\n      .MuiButtonBase-root {\n        padding: ", "px ", "px;\n        color: ", ";\n\n        svg {\n          color: ", ";\n        }\n\n        &[aria-expanded=\"true\"] {\n          color: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n        }\n\n        &:hover {\n          color: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n\n          ", "\n        }\n      }\n\n      .MuiCollapse-root .MuiAccordionDetails-root {\n        padding: 0;\n\n        .primary-text {\n          color: ", " !important;\n\n          &:hover {\n            color: ", " !important;\n          }\n        }\n\n        .MuiButtonBase-root {\n          padding: ", "px 0 ", "px 34px !important;\n\n          &:hover {\n            .primary-text {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, textDefaultColor, ChevronDefaultColor, textOpenColor, ChevronOpenColor, hasInvertedStyle
         ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
         : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
         ? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse
-        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover, isNarrow && isNarrowStyles(), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, hasInvertedStyle
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.ornamentSecondaryHover, isNarrow && isNarrowStyles(), hasInvertedStyle
         ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondaryInverse
         : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textSecondary, hasInvertedStyle
         ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
+        : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, hasInvertedStyle
+        ? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
         : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary);
 });
 var StyledSubItem = styled__default.default(MenuItem)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &.MuiButtonBase-root.MuiMenuItem-root:hover {\n    span.primary-text {\n      font-weight: 600;\n    }\n  }\n"], ["\n  &.MuiButtonBase-root.MuiMenuItem-root:hover {\n    span.primary-text {\n      font-weight: 600;\n    }\n  }\n"])));
 var templateObject_1$h, 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, rest = __rest(_a, ["item", "hasInvertedStyle", "isNarrow"]);
+function NavigationHeaderSecondaryNav(_a) {
+    var items = _a.items, hasInvertedStyle = _a.hasInvertedStyle, isNarrow = _a.isNarrow;
     var _b = React.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var theme = material.useTheme();
     var open = Boolean(anchorEl);
     function onClose() {
         setAnchorEl(null);
@@ -14724,29 +14795,44 @@ function SecondaryNavItem(_a) {
         }
         setMenuWidth(button.offsetWidth);
     }, []);
-    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, __assign({ sdsStyle: "minimal", ref: buttonRef, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow }, rest, { onClick: function (event) {
-                            var _a;
-                            setAnchorEl(event.currentTarget);
-                            (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, event);
-                        }, 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) {
+            var _a, _b;
             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)));
+            if (itemType === "dropdown" && !isNarrow) {
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs(StyledTextItem, __assign({}, rest, { ref: buttonRef, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, sdsStyle: "minimal", onClick: function (event) {
+                                var _a;
+                                setAnchorEl(event.currentTarget);
+                                (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, event);
+                            }, children: [jsxRuntime.jsx("span", { children: label }), jsxRuntime.jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })), jsxRuntime.jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, slotProps: {
+                                paper: {
+                                    style: {
+                                        marginTop: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s,
+                                    },
+                                },
+                            }, anchorOrigin: {
+                                horizontal: "left",
+                                vertical: "bottom",
+                            }, transformOrigin: {
+                                horizontal: "left",
+                                vertical: "top",
+                            }, children: item.items.map(function (subItem) {
+                                var menuLabel = subItem.label, onClick = subItem.onClick, subItemRest = __rest(subItem, ["label", "onClick"]);
+                                return (jsxRuntime.jsx(MenuItem, __assign({ onClick: function (event) {
+                                        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+                                        onClose();
+                                    }, sx: { minWidth: menuWidth } }, subItemRest, { children: menuLabel }), "menu-item-".concat(menuLabel)));
+                            }) })] }, "".concat(label, "-dropdown")));
+            }
+            if (itemType === "dropdown" && isNarrow) {
+                return (jsxRuntime.jsxs(StyledAccordion, { id: "".concat(label, "-dropdown"), hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(AccordionHeader, { children: label }), jsxRuntime.jsx(AccordionDetails, { children: item.items.map(function (subItem) {
+                                var accordionLabel = subItem.label, onClick = subItem.onClick, accordionSubItemRest = __rest(subItem, ["label", "onClick"]);
+                                return (jsxRuntime.jsx(StyledSubItem, __assign({ onClick: function (event) {
+                                        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+                                        onClose();
+                                    } }, accordionSubItemRest, { children: accordionLabel }), "accordion-item-".concat(accordionLabel)));
+                            }) })] }, "".concat(label, "-dropdown")));
+            }
+            return (jsxRuntime.jsx(StyledTextItem, __assign({}, rest, { onClick: item.onClick, hasInvertedStyle: hasInvertedStyle, open: open, isNarrow: isNarrow, sdsStyle: "minimal", children: item.label }), "".concat(label, "-").concat(itemType)));
         }) }));
 }
 
@@ -14841,7 +14927,7 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
         return (showSearch && (jsxRuntime.jsx(StyledSearch, __assign({ id: "nav-bar-search", label: "Search", placeholder: "Search", sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow }, searchProps))));
     };
     var renderLogoNode = function () {
-        var logoNode = (jsxRuntime.jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, children: [logo && jsxRuntime.jsx(StyledLogoWrapper, { children: logo }), jsxRuntime.jsxs(StyledTitleTagWrapper, { children: [title && jsxRuntime.jsx("p", { children: title }), tag && jsxRuntime.jsx(StyledTag, { color: tagColor, label: tag, hover: false })] })] }));
+        var logoNode = (jsxRuntime.jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, children: [logo && jsxRuntime.jsx(StyledLogoWrapper, { children: logo }), jsxRuntime.jsxs(StyledTitleTagWrapper, { children: [title && jsxRuntime.jsx("p", { children: title }), tag && jsxRuntime.jsx(StyledTag$1, { color: tagColor, label: tag, hover: false })] })] }));
         if (logoLinkComponent || logoUrl) {
             logoNode = (jsxRuntime.jsx(StyledLogoLinkWrapper, __assign({ component: logoLinkComponent, href: logoUrl }, logoLinkProps, { isNarrow: dimensions.isNarrow, children: logoNode })));
         }
@@ -15801,6 +15887,10 @@ exports.ComplexFilterPopper = StyledPopper;
 exports.ContentCard = ContentCard;
 exports.ContentCardActions = ContentCardActions;
 exports.ContentCardBody = StyledContentCardBody;
+exports.ContentCardMetadata = StyledMetadataText;
+exports.ContentCardOverline = StyledOverlineText;
+exports.ContentCardSubtitle = StyledSubtitleText;
+exports.ContentCardTitle = StyledTitleText;
 exports.Dialog = Dialog;
 exports.DialogActions = DialogActions;
 exports.DialogContent = index;
@@ -15856,6 +15946,7 @@ exports.Theme = Theme;
 exports.Tooltip = Tooltip;
 exports.TooltipCondensed = TooltipCondensed;
 exports.TooltipTable = TooltipTableContent;
+exports.createAppThemeBorders = createAppThemeBorders;
 exports.defaultAppTheme = defaultAppTheme;
 exports.defaultTheme = defaultTheme$4;
 exports.focusVisibleA11yStyle = focusVisibleA11yStyle;