@czi-sds/components 21.6.0 → 21.6.2

package/dist/index.cjs.js

@@ -9,7 +9,10 @@ var styled = require('@emotion/styled');
 var iconsMaterial = require('@mui/icons-material');
 var css = require('@emotion/css');
 
-function _interopNamespaceDefault(e) {
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -26,7 +29,8 @@ function _interopNamespaceDefault(e) {
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -548,120 +552,71 @@ var sharedAppTheme = {
         },
     },
 };
-var SDSLightAppTheme = __assign(__assign({}, sharedAppTheme), { colors: SDSLightThemeColors });
-// (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,
-// we allow other apps to specify their colors once, and have them apply
-// throughout the application, such as in borders, etc without having to manually
-// override every theme property that makes use of colors.
-SDSLightAppTheme.borders = {
-    accent: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
-        focused: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
-        hover: "1px solid ".concat(SDSLightAppTheme.colors.blue[600]),
-        open: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
-        pressed: "1px solid ".concat(SDSLightAppTheme.colors.blue[700]),
-        selected: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
-    },
-    base: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.gray[500]),
-        disabled: "1px solid ".concat(SDSLightAppTheme.colors.gray[300]),
-        divider: "1px solid ".concat(SDSLightAppTheme.colors.gray[200]),
-        hover: "1px solid ".concat(SDSLightAppTheme.colors.gray[900]),
-        pressed: "1px solid ".concat(SDSLightAppTheme.colors.gray[900]),
-        table: "1px solid ".concat(SDSLightAppTheme.colors.gray[300]),
-    },
-    beta: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.purple[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.purple[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.purple[600]),
-    },
-    info: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.blue[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.blue[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.blue[600]),
-    },
-    link: {
-        dashed: "1px dashed",
-        solid: "1px solid",
-    },
-    negative: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.red[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.red[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.red[600]),
-    },
-    neutral: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.gray[500]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.gray[500]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.gray[500]),
-    },
-    none: "none",
-    notice: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.yellow[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.yellow[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.yellow[600]),
-    },
-    positive: {
-        default: "1px solid ".concat(SDSLightAppTheme.colors.green[600]),
-        extraThick: "4px solid ".concat(SDSLightAppTheme.colors.green[600]),
-        thick: "2px solid ".concat(SDSLightAppTheme.colors.green[600]),
-    },
-};
-var SDSDarkAppTheme = __assign(__assign({}, sharedAppTheme), { colors: SDSDarkThemeColors });
-SDSDarkAppTheme.borders = {
-    accent: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
-        focused: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
-        hover: "1px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
-        open: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
-        pressed: "1px solid ".concat(SDSDarkAppTheme.colors.blue[700]),
-        selected: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
-    },
-    base: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
-        disabled: "1px solid ".concat(SDSDarkAppTheme.colors.gray[300]),
-        divider: "1px solid ".concat(SDSDarkAppTheme.colors.gray[200]),
-        hover: "1px solid ".concat(SDSDarkAppTheme.colors.gray[900]),
-        pressed: "1px solid ".concat(SDSDarkAppTheme.colors.gray[900]),
-        table: "1px solid ".concat(SDSDarkAppTheme.colors.gray[300]),
-    },
-    beta: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.purple[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.purple[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.purple[600]),
-    },
-    info: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
-    },
-    link: {
-        dashed: "1px dashed",
-        solid: "1px solid",
-    },
-    negative: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.red[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.red[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.red[600]),
-    },
-    neutral: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
-    },
-    none: "none",
-    notice: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.yellow[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.yellow[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.yellow[600]),
-    },
-    positive: {
-        default: "1px solid ".concat(SDSDarkAppTheme.colors.green[600]),
-        extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.green[600]),
-        thick: "2px solid ".concat(SDSDarkAppTheme.colors.green[600]),
-    },
-};
+/**
+ * Create a SDS App Theme with custom colors that follows the SDS color model.
+ */
+var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), { 
+    // (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,
+    // we allow other apps to specify their colors once, and have them apply
+    // throughout the application, such as in borders, etc without having to manually
+    // override every theme property that makes use of colors.
+    borders: {
+        accent: {
+            default: "1px solid ".concat(colors.blue[500]),
+            focused: "1px solid ".concat(colors.blue[500]),
+            hover: "1px solid ".concat(colors.blue[600]),
+            open: "1px solid ".concat(colors.blue[500]),
+            pressed: "1px solid ".concat(colors.blue[700]),
+            selected: "1px solid ".concat(colors.blue[500]),
+        },
+        base: {
+            default: "1px solid ".concat(colors.gray[500]),
+            disabled: "1px solid ".concat(colors.gray[300]),
+            divider: "1px solid ".concat(colors.gray[200]),
+            hover: "1px solid ".concat(colors.gray[900]),
+            pressed: "1px solid ".concat(colors.gray[900]),
+            table: "1px solid ".concat(colors.gray[300]),
+        },
+        beta: {
+            default: "1px solid ".concat(colors.purple[600]),
+            extraThick: "4px solid ".concat(colors.purple[600]),
+            thick: "2px solid ".concat(colors.purple[600]),
+        },
+        info: {
+            default: "1px solid ".concat(colors.blue[600]),
+            extraThick: "4px solid ".concat(colors.blue[600]),
+            thick: "2px solid ".concat(colors.blue[600]),
+        },
+        link: {
+            dashed: "1px dashed",
+            solid: "1px solid",
+        },
+        negative: {
+            default: "1px solid ".concat(colors.red[600]),
+            extraThick: "4px solid ".concat(colors.red[600]),
+            thick: "2px solid ".concat(colors.red[600]),
+        },
+        neutral: {
+            default: "1px solid ".concat(colors.gray[500]),
+            extraThick: "4px solid ".concat(colors.gray[500]),
+            thick: "2px solid ".concat(colors.gray[500]),
+        },
+        none: "none",
+        notice: {
+            default: "1px solid ".concat(colors.yellow[600]),
+            extraThick: "4px solid ".concat(colors.yellow[600]),
+            thick: "2px solid ".concat(colors.yellow[600]),
+        },
+        positive: {
+            default: "1px solid ".concat(colors.green[600]),
+            extraThick: "4px solid ".concat(colors.green[600]),
+            thick: "2px solid ".concat(colors.green[600]),
+        },
+    }, colors: colors })); };
+var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
+var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors);
 /**
  * Helper function to select the appropriate theme settings.
  *
@@ -1306,7 +1261,7 @@ function themeToCss(fontTheme, fontFamily) {
 }
 var templateObject_1$Y, templateObject_2$C, templateObject_3$t, templateObject_4$p;
 
-var StyledAccordionDetails = styled(material.AccordionDetails)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
+var StyledAccordionDetails = styled__default.default(material.AccordionDetails)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
     var spaces = getSpaces(props);
     return react.css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n      padding: ", "px ", "px ", "px;\n    "], ["\n      padding: ", "px ", "px ", "px;\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m);
 });
@@ -1317,13 +1272,13 @@ var AccordionDetails = function (props) {
     return jsxRuntime.jsx(StyledAccordionDetails, { children: children });
 };
 
-var StyledAccordionHeader = styled(material.AccordionSummary)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontHeaderS, function (props) {
+var StyledAccordionHeader = styled__default.default(material.AccordionSummary)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontHeaderS, function (props) {
     var _a, _b;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
     return react.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n      padding: ", "px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      .", " {\n        margin: 0;\n        flex-direction: column;\n\n        &.", " {\n          margin: 0;\n        }\n      }\n\n      & .", " {\n        margin-left: ", "px;\n        margin-top: ", "px !important;\n        align-self: center;\n\n        svg {\n          color: ", ";\n        }\n      }\n\n      &:hover {\n        & .", " {\n          svg {\n            color: ", ";\n          }\n        }\n      }\n    "], ["\n      padding: ", "px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      .", " {\n        margin: 0;\n        flex-direction: column;\n\n        &.", " {\n          margin: 0;\n        }\n      }\n\n      & .", " {\n        margin-left: ", "px;\n        margin-top: ", "px !important;\n        align-self: center;\n\n        svg {\n          color: ", ";\n        }\n      }\n\n      &:hover {\n        & .", " {\n          svg {\n            color: ", ";\n          }\n        }\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, material.accordionSummaryClasses.content, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, material.accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryHover);
 });
-var StyledSubtitle = styled("p")(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
+var StyledSubtitle = styled__default.default("p")(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a;
     var semanticColors = getSemanticColors(props);
     return react.css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n      color: ", ";\n      margin: 0;\n    "], ["\n      color: ", ";\n      margin: 0;\n    "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary);
@@ -4064,13 +4019,13 @@ function interactive(props) {
     return react.css(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    &:disabled {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    &:disabled {\n      color: ", ";\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryHover, (_c = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _c === void 0 ? void 0 : _c[shade], (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled);
 }
 var doNotForwardProps$s = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
-var StyledSvgIcon = styled(material.SvgIcon, {
+var StyledSvgIcon = styled__default.default(material.SvgIcon, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
 })(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var sdsType = props.sdsType;
     return react.css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsType !== "iconButton" && iconSize(props), sdsType === "static" && staticStyle(props), sdsType === "interactive" && interactive(props), sdsType === "button" && buttonStyle());
 });
-var StyledIcon = styled("div")(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n  display: contents;\n"], ["\n  /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n  display: contents;\n"])));
+var StyledIcon = styled__default.default("div")(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n  display: contents;\n"], ["\n  /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n  display: contents;\n"])));
 var templateObject_1$V, templateObject_2$z, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$d, templateObject_7$9;
 
 /**
@@ -4098,7 +4053,7 @@ var AccordionHeader = function (props) {
 };
 
 var sdsPropNames$3 = ["useDivider", "togglePosition"];
-var StyledAccordion = styled(material.Accordion, {
+var StyledAccordion = styled__default.default(material.Accordion, {
     shouldForwardProp: function (prop) {
         return !sdsPropNames$3.includes(prop.toString());
     },
@@ -4125,9 +4080,9 @@ var templateObject_1$U, templateObject_2$y, templateObject_3$q;
 /**
  * @see https://mui.com/material-ui/react-accordion/
  */
-var Accordion = React.forwardRef(function (props, ref) {
+var Accordion = React__namespace.default.forwardRef(function (props, ref) {
     var children = props.children, useDivider = props.useDivider, _a = props.togglePosition, togglePosition = _a === void 0 ? "right" : _a, id = props.id, _b = props.defaultExpanded, defaultExpanded = _b === void 0 ? false : _b;
-    var _c = React.useState(defaultExpanded ? id : false), expanded = _c[0], setExpanded = _c[1];
+    var _c = React__namespace.default.useState(defaultExpanded ? id : false), expanded = _c[0], setExpanded = _c[1];
     var handleChange = function (panel) {
         return function (_event, isExpanded) {
             setExpanded(isExpanded ? panel : false);
@@ -4136,7 +4091,7 @@ var Accordion = React.forwardRef(function (props, ref) {
     return (jsxRuntime.jsx(StyledAccordion, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, expanded: expanded === id, onChange: handleChange(id), ref: ref }, props, { children: children })));
 });
 
-var StyledAlert = styled(material.Alert)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledAlert = styled__default.default(material.Alert)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
     var colors = getColors(props);
     var spaces = getSpaces(props);
@@ -4315,7 +4270,7 @@ var DestructiveButton = function (props) {
         : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _e === void 0 ? void 0 : _e.fillPrimary;
     return react.css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n    border: none;\n    box-shadow: inset 0 0 0 1px ", ";\n    color: ", ";\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "], ["\n    border: none;\n    box-shadow: inset 0 0 0 1px ", ";\n    color: ", ";\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "])), (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border, contentColor, backgroundColor, ornamentColor, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _h === void 0 ? void 0 : _h.fillHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _j === void 0 ? void 0 : _j.fillHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.iconPrimaryInverse, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimaryInverse, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _m === void 0 ? void 0 : _m.fillPressed, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _o === void 0 ? void 0 : _o.fillPressed, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _p === void 0 ? void 0 : _p.iconPrimaryInverse, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _q === void 0 ? void 0 : _q.textDisabled, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.iconDisabled);
 };
-var StyledButton$3 = styled(material.Button, {
+var StyledButton$3 = styled__default.default(material.Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
 })(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
     var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
@@ -4340,13 +4295,13 @@ var SecondaryMinimalButton = function (props) {
     var semanticColors = getSemanticColors(props);
     return react.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n    ", "\n    color: ", ";\n  "], ["\n    ", "\n    color: ", ";\n  "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary);
 };
-var StyledMinimalButton = styled(material.Button, {
+var StyledMinimalButton = styled__default.default(material.Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
 })(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var sdsType = props.sdsType;
     return react.css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
 });
-var StyledButtonLegacy = styled(material.Button, {
+var StyledButtonLegacy = styled__default.default(material.Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
 })(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
     if (!props.isRounded)
@@ -4409,7 +4364,7 @@ var doNotForwardProps$q = [
     "sdsIcon",
     "sdsIconProps",
 ];
-var StyledButtonIcon = styled(material.IconButton, {
+var StyledButtonIcon = styled__default.default(material.IconButton, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
 })(templateObject_9$2 || (templateObject_9$2 = __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;
@@ -4467,7 +4422,7 @@ var MUI_VARIANT_MAP = {
 /**
  * @see https://mui.com/material-ui/react-button/
  */
-var Button = React.forwardRef(function (props, ref) {
+var Button = React__namespace.default.forwardRef(function (props, ref) {
     var sdsStyle = props.sdsStyle, sdsType = props.sdsType;
     if (!sdsStyle || !sdsType) {
         showWarningIfFirstOccurence(SDSWarningTypes.ButtonMissingSDSProps);
@@ -4528,11 +4483,11 @@ var disabledStyled$2 = function (props) {
     var semanticColors = getSemanticColors(props);
     return react.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n    .", " {\n      .", " {\n        border: 1px solid ", " !important;\n      }\n\n      .", " svg {\n        color: ", ";\n      }\n\n      &:hover .", " {\n        border: 1px solid ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "], ["\n    .", " {\n      .", " {\n        border: 1px solid ", " !important;\n      }\n\n      .", " svg {\n        color: ", ";\n      }\n\n      &:hover .", " {\n        border: 1px solid ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textDisabled);
 };
-var StyledLabel$2 = styled("label")(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyM$1, function (props) {
+var StyledLabel$2 = styled__default.default("label")(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyM$1, function (props) {
     var spaces = getSpaces(props);
     return "\n      margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n      position: absolute;\n      overflow: hidden;\n      clip: rect(0 0 0 0);\n      height: 1px;\n      width: 1px;\n      margin: -1px; \n      padding: 0; \n      border: 0;\n    ");
 });
-var StyledSearchBase = styled(material.TextField, {
+var StyledSearchBase = styled__default.default(material.TextField, {
     shouldForwardProp: function (prop) {
         return !sdsPropNames$2.includes(prop.toString());
     },
@@ -4544,10 +4499,10 @@ var StyledSearchBase = styled(material.TextField, {
     var semanticColors = getSemanticColors(props);
     return react.css(templateObject_5$f || (templateObject_5$f = __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        opacity: 0;\n        cursor: pointer;\n\n        svg {\n          height: ", "px;\n          width: ", "px;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n        background-color: ", ";\n        width: 100%;\n\n        .", " {\n          padding-right: ", "px;\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          opacity: 1;\n\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        background-color: ", ";\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        opacity: 0;\n        cursor: pointer;\n\n        svg {\n          height: ", "px;\n          width: ", "px;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n        background-color: ", ";\n        width: 100%;\n\n        .", " {\n          padding-right: ", "px;\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          opacity: 1;\n\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        background-color: ", ";\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, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, material.outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, 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.border, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.iconPrimaryHover, (_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, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.surfacePrimary, material.outlinedInputClasses.root, material.buttonBaseClasses.root, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, material.outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.icon, material.outlinedInputClasses.root, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.borderHover, 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(material.InputAdornment)(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  position: relative;\n  height: unset;\n  margin: 0;\n"], ["\n  position: relative;\n  height: unset;\n  margin: 0;\n"])));
+var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  position: relative;\n  height: unset;\n  margin: 0;\n"], ["\n  position: relative;\n  height: unset;\n  margin: 0;\n"])));
 var templateObject_1$Q, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$6;
 
-var StyledMenuItem$1 = styled(material.MenuItem)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var selected = props.selected;
     var fontWeights = getFontWeights(props);
@@ -4555,7 +4510,7 @@ var StyledMenuItem$1 = styled(material.MenuItem)(templateObject_1$P || (template
     var semanticColors = getSemanticColors(props);
     return "\n      padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n      min-height: unset;\n      opacity: 1;\n\n      &.MuiAutocomplete-option {\n        min-height: unset;\n      }\n      \n      .primary-text {\n        font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n      }\n\n      &.MuiButtonBase-root {\n        background-color: transparent;\n        opacity: 1;\n\n        &:hover, &.").concat(material.menuItemClasses.focusVisible, " {\n          background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n          &[aria-selected=\"true\"] {\n            background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n          }\n        }\n      }\n\n      &.").concat(material.menuItemClasses.root, " .MuiSvgIcon-root {\n        align-self: flex-start;\n      }\n\n      &.").concat(material.menuItemClasses.root, " .").concat(material.menuItemClasses.disabled, " {\n        opacity: 1 !important;\n      }\n\n      &.MuiAutocomplete-option[aria-selected=\"true\"] {\n        &:hover {\n          background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n        }\n\n        svg.check-icon {\n          color: ").concat(selected ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconSelected : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, ";\n        }\n      }\n\n      &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n        opacity: 1;\n      }\n\n      &:hover {\n        background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n        svg.check-icon {\n          color: ").concat(selected ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimary, ";\n        }\n      }\n\n      &.Mui-selected.MuiListItem-root.MuiListItem-button {\n        background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surfacePrimary, ";\n        &:hover {\n          background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n        }\n        .primary-text {\n          font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n        }\n      }\n\n      &:active {\n        svg.check-icon {\n          color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.iconPressed, ";\n        }\n\n        &:active {\n          svg.check-icon {\n            color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.iconPressed, ";\n          }\n\n          .primary-text {\n            font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n          }\n        }\n      }\n    ");
 });
-var ContentWrapper = styled("span")(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"])));
+var ContentWrapper = styled__default.default("span")(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"])));
 var disabledStyles = function (props) {
     var _a;
     var disabled = props.disabled;
@@ -4564,12 +4519,12 @@ var disabledStyles = function (props) {
     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.textDisabled, ";\n    cursor: default;\n  ");
 };
-var TextWrapper = styled("span")(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
+var TextWrapper = styled__default.default("span")(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n"])), fontBodyXs$2, 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.textPrimary, ";\n      display: flex;\n      white-space: pre-wrap;\n    ");
 }, disabledStyles);
-var StyledMenuItemIcon = styled("span")(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
     var disabled = props.disabled;
     var spaces = getSpaces(props);
@@ -4577,18 +4532,18 @@ var StyledMenuItemIcon = styled("span")(templateObject_4$j || (templateObject_4$
     var semanticColors = getSemanticColors(props);
     return "\n      margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n      margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n      .MuiSvgIcon-root {\n        ").concat(disabled ? "color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, ";") : null, "\n      }\n    ");
 });
-var ColumnWrapper = styled("span")(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
+var ColumnWrapper = styled__default.default("span")(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
     var _a;
     var semanticColors = getSemanticColors(props);
     var spaces = getSpaces(props);
     return "\n      text-align: right;\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n      margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    ");
 }, disabledStyles);
-var StyledIconWrapper = styled("span")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledIconWrapper = styled__default.default("span")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
     return "\n      align-self: start;\n      margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n    ");
 });
-var StyledCheck = styled(iconsMaterial.Check, {
+var StyledCheck = styled__default.default(iconsMaterial.Check, {
     shouldForwardProp: function (prop) { return prop !== "selected"; },
 })(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
@@ -4600,7 +4555,7 @@ var StyledCheck = styled(iconsMaterial.Check, {
         : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
     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 StyledMinus = styled(iconsMaterial.Remove, {
+var StyledMinus = styled__default.default(iconsMaterial.Remove, {
     shouldForwardProp: function (prop) { return prop !== "selected"; },
 })(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
@@ -4786,7 +4741,7 @@ var doNotForwardProps$p = [
     "PopperBaseProps",
     "onClickAway",
 ];
-var StyledAutocompleteBase = styled(material.Autocomplete, {
+var StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
 })(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  + .", "\n    > .", "\n    .", " {\n    ", "\n  }\n\n  ", "\n"], ["\n  + .", "\n    > .", "\n    .", " {\n    ", "\n  }\n\n  ", "\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper, material.autocompleteClasses.groupLabel, fontCapsXxxxs, function (props) {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -4796,7 +4751,7 @@ var StyledAutocompleteBase = styled(material.Autocomplete, {
     var semanticColors = getSemanticColors(props);
     return "\n      ".concat(!search && "height: 0; margin: 0 !important;", ";\n      \n      // (masoudmanson): We need to apply the focus styles to the input element\n      // when the user is tabbing through the options. To find out more, take a\n      // look at the useDetectUserTabbing hook.\n      &[data-user-is-tabbing=\"true\"]:focus-within {\n        border-radius: 4px;\n        outline: 2px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, ";\n        outline-offset: 1px;\n      }\n\n      .MuiFormControl-root {\n        outline: none;\n      }\n\n      .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n        padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n        .MuiAutocomplete-input {\n          padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n        }\n      }\n\n      & + .").concat(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n        .").concat(material.autocompleteClasses.listbox, " {\n          max-height: 40vh;\n          padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n          .").concat(material.autocompleteClasses.option, " {\n            min-height: unset;\n\n            &.").concat(material.autocompleteClasses.focused, " {\n              background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfaceSecondary, ";\n            }\n\n            &[aria-selected=\"true\"] {\n              background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, ";\n            }\n\n            &[aria-disabled=\"true\"] {\n              opacity: 1;\n            }\n\n            &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n              background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfaceSecondary, ";\n            }\n          }\n\n          & > li:last-child .").concat(material.autocompleteClasses.groupUl, " {\n            border-bottom: none;\n            margin-bottom: 0;\n            padding-bottom: 0;\n          }\n        }\n\n        .").concat(material.autocompleteClasses.groupLabel, " {\n          top: 0;\n          color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textSecondary, ";\n          background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surfacePrimary, ";\n          padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n        }\n\n        .").concat(material.autocompleteClasses.groupUl, " {\n          position: relative;\n          margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n          border-bottom: ").concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.divider, ";\n          padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n          & li:last-of-type {\n            position: relative;\n          }\n        }\n\n        .").concat(material.autocompleteClasses.noOptions, " {\n          padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n          margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n        }\n\n        .").concat(material.autocompleteClasses.loading, " {\n          padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n        }\n      }\n    ");
 });
-var InputBaseWrapper$1 = styled("div", {
+var InputBaseWrapper$1 = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
 })(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var search = props.search;
@@ -4807,13 +4762,13 @@ var InputBaseWrapper$1 = styled("div", {
         return "\n        border: 0;\n        padding: 0;\n        white-space: nowrap;\n        clip-path: inset(100%);\n        clip: rect(0 0 0 0);\n        overflow: hidden;\n        margin: 0;\n        speak: none;\n      ";
     }
 });
-var StyledMenuInputSearch$1 = styled(InputSearch, {
+var StyledMenuInputSearch$1 = styled__default.default(InputSearch, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
 })(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  margin: 0;\n  .MuiInputBase-root {\n    width: 100%;\n  }\n  /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n  caret-color: ", ";\n"], ["\n  margin: 0;\n  .MuiInputBase-root {\n    width: 100%;\n  }\n  /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n  caret-color: ", ";\n"])), function (_a) {
     var search = _a.search;
     return (search ? "auto" : "transparent");
 });
-var StyledPaper$3 = styled(material.Paper)(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
     var spaces = getSpaces(props);
     var corners = getCorners(props);
@@ -4822,12 +4777,12 @@ var StyledPaper$3 = styled(material.Paper)(templateObject_4$i || (templateObject
     var semanticColors = getSemanticColors(props);
     return "\n      background-image: none;\n      padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ;\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n      box-sizing: border-box;\n    ");
 });
-var StyledMenuItemDetails = styled("div")(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyXxs$1, function (props) {
+var StyledMenuItemDetails = styled__default.default("div")(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\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      white-space: pre-wrap;\n    ");
 });
-var StyledMenuItemText = styled("div")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var StyledMenuItemText = styled__default.default("div")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var templateObject_1$O, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8;
 
 var AutocompleteBase = function (props) {
@@ -4993,20 +4948,20 @@ var AutocompleteBase = function (props) {
     }
 };
 
-var StyledColumn = styled("div")(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledColumn = styled__default.default("div")(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
     var _b = props.width, width = _b === void 0 ? 280 : _b;
     var spaces = getSpaces(props);
     var borders = getBorders(props);
     return "\n      position: relative;\n      width: ".concat(width, "px;\n\n      &:not(:last-child) {\n        border-right: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      }\n\n      // (masoudmanson): This code hides the relation icon of the last column\n      &:last-of-type {\n        .SdsAutocompleteMultiColumn-column-relation-icon {\n          display: none;\n        }\n      }\n    ");
 });
-var StyledColumnTitle = styled("p")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontCapsXxxxs, function (props) {
+var StyledColumnTitle = styled__default.default("p")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontCapsXxxxs, function (props) {
     var _a;
     var spaces = getSpaces(props);
     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      padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n      margin: 0;\n    ");
 });
-var StyledColumnIcon = styled("span")(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledColumnIcon = styled__default.default("span")(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
@@ -5064,7 +5019,7 @@ var doNotForwardProps$o = [
     "onClickAway",
     "ClickAwayListenerProps",
 ];
-var StyledPopper$2 = styled(material.Popper, {
+var StyledPopper$2 = styled__default.default(material.Popper, {
     shouldForwardProp: function (prop) {
         return !doNotForwardProps$o.includes(prop) || prop === "anchorEl";
     },
@@ -5077,7 +5032,7 @@ var StyledPopper$2 = styled(material.Popper, {
     var semanticColors = getSemanticColors(props);
     return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n      background-image: none;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      box-sizing: border-box;\n      z-index: 1400;\n\n      .").concat(material.autocompleteClasses.popper, ".").concat(material.autocompleteClasses.popperDisablePortal, " {\n        position: relative !important;\n        transform: none !important;\n      \n        .MuiPaper-root .").concat(material.autocompleteClasses.listbox, " {\n          padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n        }\n      }\n    ");
 });
-var StyledPaper$2 = styled(material.Paper, {
+var StyledPaper$2 = styled__default.default(material.Paper, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
 })(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
@@ -5085,8 +5040,8 @@ var StyledPaper$2 = styled(material.Paper, {
     var semanticColors = getSemanticColors(props);
     return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n      background-image: none;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n      margin: 0;\n      border-radius: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n    ");
 });
-var StyledAutocompleteGroupWrapper = styled("div")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var StyledAutocompleteInput = styled(InputSearch, {
+var StyledAutocompleteGroupWrapper = styled__default.default("div")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var StyledAutocompleteInput = styled__default.default(InputSearch, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
 })(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  ", "\n\n  margin: 0;\n  .MuiInputBase-root {\n    width: 100%;\n  }\n  /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n  caret-color: ", ";\n"], ["\n  ", "\n\n  margin: 0;\n  .MuiInputBase-root {\n    width: 100%;\n  }\n  /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n  caret-color: ", ";\n"])), function (_a) {
     var search = _a.search;
@@ -5114,7 +5069,7 @@ var AutocompleteMultiColumn = function (props) {
         }
     }, [isOpenControlled, open]);
     var anchorRef = React.useRef(null);
-    var _h = React.useState(null), anchorEl = _h[0], setAnchorEl = _h[1];
+    var _h = React__namespace.default.useState(null), anchorEl = _h[0], setAnchorEl = _h[1];
     useDetectUserTabbing(anchorRef);
     React.useEffect(function () {
         setAnchorEl(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
@@ -5281,9 +5236,9 @@ var Autocomplete = function (props) {
     }
 };
 
-var Centered = styled("div")(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  flex: 1 1 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  flex: 1 1 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+var Centered = styled__default.default("div")(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  flex: 1 1 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  flex: 1 1 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 var doNotForwardPropsIconWrapper = ["bannerType"];
-var IconWrapper$1 = styled("div", {
+var IconWrapper$1 = styled__default.default("div", {
     shouldForwardProp: function (prop) {
         return !doNotForwardPropsIconWrapper.includes(prop);
     },
@@ -5296,7 +5251,7 @@ var IconWrapper$1 = styled("div", {
     return "\n      height: ".concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      svg {\n        fill: ").concat(bannerType === "primary" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.ornament, ";\n      }\n    ");
 });
 var doNotForwardPropsButtonIcon = ["bannerType", "textChild"];
-var StyledButton$2 = styled(Button, {
+var StyledButton$2 = styled__default.default(Button, {
     shouldForwardProp: function (prop) {
         return !doNotForwardPropsButtonIcon.includes(prop);
     },
@@ -5308,7 +5263,7 @@ var StyledButton$2 = styled(Button, {
         return "";
     return "\n      svg {\n        fill: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse, ";\n      }\n\n      svg:hover {\n        fill: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryInverseHover, ";\n      }\n    ");
 });
-styled("div")(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), fontBodyS$1);
+styled__default.default("div")(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), fontBodyS$1);
 var primary$1 = function (props) {
     var _a, _b;
     var semanticColors = getSemanticColors(props);
@@ -5320,7 +5275,7 @@ var secondary$1 = function (props) {
     return "\n    background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n    color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n  ");
 };
 var doNotForwardProps$n = ["sdsType", "textChild"];
-var StyledBanner = styled("div", {
+var StyledBanner = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
 })(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
     var sdsType = props.sdsType;
@@ -5366,7 +5321,7 @@ var BUTTON_ICON_SIZE_TO_SDS_ICON_SIZE = {
 /**
  * @see https://mui.com/material-ui/react-button/
  */
-var ButtonDropdown = React.forwardRef(function (props, ref) {
+var ButtonDropdown = React__namespace.default.forwardRef(function (props, ref) {
     var icon = props.icon, sdsStyle = props.sdsStyle, sdsType = props.sdsType, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, sdsIconProps = props.sdsIconProps;
     var iconSize = BUTTON_ICON_SIZE_TO_SDS_ICON_SIZE[sdsSize];
     var iconItem = function () {
@@ -5401,7 +5356,7 @@ var ButtonDropdown = React.forwardRef(function (props, ref) {
  * the component won’t function as expected.
  */
 var doNotForwardProps$m = ["sdsStage"];
-var StyledButtonToggle = styled(ButtonIcon, {
+var StyledButtonToggle = styled__default.default(ButtonIcon, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
 })(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
@@ -5414,7 +5369,7 @@ var templateObject_1$K;
 /**
  * @see https://mui.com/material-ui/react-button/
  */
-var ButtonToggle = React.forwardRef(function (props, ref) {
+var ButtonToggle = React__namespace.default.forwardRef(function (props, ref) {
     var icon = props.icon, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsStage, sdsStage = _b === void 0 ? "off" : _b, _c = props.sdsType, sdsType = _c === void 0 ? "primary" : _c, rest = __rest(props, ["icon", "sdsSize", "sdsStage", "sdsType"]);
     if (icon !== undefined) {
         return (jsxRuntime.jsx(StyledButtonToggle, __assign({ icon: icon, sdsType: sdsType, sdsSize: sdsSize, sdsStage: sdsStage, ref: ref }, rest)));
@@ -5428,7 +5383,7 @@ var ButtonToggle = React.forwardRef(function (props, ref) {
 var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
 
 var doNotForwardProps$l = ["calloutTitle", "collapsed", "severity"];
-var StyledCallout = styled(material.Alert, {
+var StyledCallout = styled__default.default(material.Alert, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
 })(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyXs$2, function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -5520,7 +5475,7 @@ var Callout = function (_a) {
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Grow, { in: !hide, children: jsxRuntime.jsxs(StyledCallout, __assign({ onClose: onClose ? handleClose : undefined, action: getAction(collapsed), icon: getIcon(), intent: intent, collapsed: collapsed || false }, rest, { children: [calloutTitle, !collapsed && calloutContent] })) }) }));
 };
 
-var StyledCalloutTitle = styled(material.AlertTitle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
+var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
     var spaces = getSpaces(props);
     return "\n      margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n    ");
 });
@@ -5552,7 +5507,7 @@ var tableStyles = function (props) {
     var spaces = getSpaces(props);
     return css.css(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n    padding: ", "px;\n  "], ["\n    padding: ", "px;\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
 };
-var Subtitle$1 = styled("div")(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
+var Subtitle$1 = styled__default.default("div")(templateObject_5$b || (templateObject_5$b = __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.textSecondaryInverse, ";\n    ");
@@ -5574,7 +5529,7 @@ var arrowCss = function (props) {
  * (masoudmanson): !important is needed to override arrow's
  * default placement which is calculated by javascript
  */
-var StyledPopper$1 = styled(material.Popper)(templateObject_8$3 || (templateObject_8$3 = __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 StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$3 || (templateObject_8$3 = __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$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$b, templateObject_6$7, templateObject_7$4, templateObject_8$3;
 
 /**
@@ -5668,7 +5623,7 @@ var verticalAlignToFlexMap = {
     center: "center",
     top: "flex-start",
 };
-var StyledTableData = styled("td", {
+var StyledTableData = styled__default.default("td", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
 })(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
     var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
@@ -5681,20 +5636,20 @@ var ShouldWrap = function (lineCount) {
 var ShouldTruncate = function () {
     return "\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  ";
 };
-var StyledCellContent = styled("div")(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var StyledCellContentWrapper = styled("div")(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var StyledCellIconWrapper = styled("div", {
+var StyledCellContent = styled__default.default("div")(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var StyledCellContentWrapper = styled__default.default("div")(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var StyledCellIconWrapper = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
 })(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
     var spaces = getSpaces(props);
     return "\n      padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      display: flex;\n      flex-direction: column;\n      justify-content: ").concat(verticalAlignToFlexMap[iconVerticalAlign], ";\n    ");
 });
-var PrimaryTextWrapper = styled("div")(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var PrimaryTextWrapper = styled__default.default("div")(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var horizontalAlign = props.horizontalAlign;
     return "\n      display: flex;\n      justify-content: ".concat(horizontalAlign === "left" ? "flex-start" : "flex-end", ";\n    ");
 });
-var PrimaryText = styled("div", {
+var PrimaryText = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
 })(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
     var _a = props.primaryTextWrapLineCount, primaryTextWrapLineCount = _a === void 0 ? 3 : _a;
@@ -5702,7 +5657,7 @@ var PrimaryText = styled("div", {
         ? ShouldWrap(primaryTextWrapLineCount)
         : ShouldTruncate(), "\n    ");
 });
-var SecondaryText = styled("span", {
+var SecondaryText = styled__default.default("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
 })(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a;
@@ -5713,7 +5668,7 @@ var SecondaryText = styled("span", {
         ? ShouldWrap(secondaryTextWrapLineCount)
         : ShouldTruncate(), "\n    ");
 });
-var TertiaryText = styled("span", {
+var TertiaryText = styled__default.default("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
 })(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a;
@@ -5724,11 +5679,11 @@ var TertiaryText = styled("span", {
         ? ShouldWrap(tertiaryTextWrapLineCount)
         : ShouldTruncate(), "\n    ");
 });
-var PrimaryTextComponentSlotBottomWrapper = styled("div")(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var PrimaryTextComponentSlotBottomWrapper = styled__default.default("div")(templateObject_9$1 || (templateObject_9$1 = __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("div")(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var PrimaryTextComponentSlotRightWrapper = styled__default.default("div")(templateObject_10$1 || (templateObject_10$1 = __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    ");
 });
@@ -5747,7 +5702,7 @@ var CellBasic = React.forwardRef(function (props, ref) {
 });
 
 var doNotForwardProps$j = ["horizontalAlign", "verticalAlign"];
-var StyledCellComponentData = styled("td", {
+var StyledCellComponentData = styled__default.default("td", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
 })(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
     var spaces = getSpaces(props);
@@ -5774,7 +5729,7 @@ var doNotForwardProps$i = [
     "tooltipText",
     "hideSortIcon",
 ];
-var StyledSortingIcon = styled(Icon, {
+var StyledSortingIcon = styled__default.default(Icon, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
 })(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
@@ -5783,7 +5738,7 @@ var StyledSortingIcon = styled(Icon, {
     var semanticColors = getSemanticColors(props);
     return "\n      margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n      margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n      color: ").concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.icon : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\n      opacity: ").concat(hideSortIcon ? (active ? 1 : 0) : 1, ";\n      outline: none !important;\n    ");
 });
-var StyledTableHeader$1 = styled("th", {
+var StyledTableHeader$1 = styled__default.default("th", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
 })(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -5792,7 +5747,7 @@ var StyledTableHeader$1 = styled("th", {
     var semanticColors = getSemanticColors(props);
     return "\n      color: ".concat(active ? (_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.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      text-align: ").concat(horizontalAlign, ";\n      min-width: 96px;\n      width: 96px;\n      cursor: pointer;\n      vertical-align: bottom;\n\n      & .MuiButtonBase-root {\n        outline: none;\n      }\n\n      &:hover {\n        color: ").concat(active ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n        & .MuiButtonBase-root {\n          color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.textActionHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n          opacity: 1;\n        }\n\n        & svg {\n          color: ").concat(active ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimaryHover, ";\n        }\n      }\n    ");
 });
-var StyledCellHeaderContainer = styled("div", {
+var StyledCellHeaderContainer = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
 })(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
@@ -5895,7 +5850,7 @@ var statusToCss = {
     warning: warning,
 };
 var doNotForwardProps$h = ["isRounded"];
-var StyledChip = styled(material.Chip, {
+var StyledChip = styled__default.default(material.Chip, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
 })(templateObject_7$2 || (templateObject_7$2 = __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;
@@ -5932,7 +5887,7 @@ var doNotForwardProps$g = [
     "forceOpen",
     "isMultiColumn",
 ];
-var StyledHeaderTitle = styled("div", {
+var StyledHeaderTitle = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
 })(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontHeaderXs, function (props) {
     var _a;
@@ -5940,8 +5895,8 @@ var StyledHeaderTitle = styled("div", {
     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.textPrimary, ";\n      padding-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    ");
 });
-var StyledDropdownMenuAutocompleteWrapper = styled("div")(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  & .", ", & .MuiPopper-root,\n  .base-Popper-root {\n    position: relative !important;\n    transform: none !important;\n    width: 100% !important;\n    box-shadow: none;\n    padding: 0;\n    border: none;\n\n    .", ", .MuiPaper-root {\n      box-shadow: none !important;\n      border: none !important;\n      border-radius: 0;\n      margin: 0;\n      padding: 0;\n    }\n  }\n"], ["\n  & .", ", & .MuiPopper-root,\n  .base-Popper-root {\n    position: relative !important;\n    transform: none !important;\n    width: 100% !important;\n    box-shadow: none;\n    padding: 0;\n    border: none;\n\n    .", ", .MuiPaper-root {\n      box-shadow: none !important;\n      border: none !important;\n      border-radius: 0;\n      margin: 0;\n      padding: 0;\n    }\n  }\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper);
-var StyledPopper = styled(material.Popper, {
+var StyledDropdownMenuAutocompleteWrapper = styled__default.default("div")(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  & .", ", & .MuiPopper-root,\n  .base-Popper-root {\n    position: relative !important;\n    transform: none !important;\n    width: 100% !important;\n    box-shadow: none;\n    padding: 0;\n    border: none;\n\n    .", ", .MuiPaper-root {\n      box-shadow: none !important;\n      border: none !important;\n      border-radius: 0;\n      margin: 0;\n      padding: 0;\n    }\n  }\n"], ["\n  & .", ", & .MuiPopper-root,\n  .base-Popper-root {\n    position: relative !important;\n    transform: none !important;\n    width: 100% !important;\n    box-shadow: none;\n    padding: 0;\n    border: none;\n\n    .", ", .MuiPaper-root {\n      box-shadow: none !important;\n      border: none !important;\n      border-radius: 0;\n      margin: 0;\n      padding: 0;\n    }\n  }\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper);
+var StyledPopper = styled__default.default(material.Popper, {
     shouldForwardProp: function (prop) {
         return !doNotForwardProps$g.includes(prop) || prop === "anchorEl";
     },
@@ -5953,7 +5908,7 @@ var StyledPopper = styled(material.Popper, {
     var semanticColors = getSemanticColors(props);
     return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n      background-image: none;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n      box-sizing: border-box;\n      z-index: 1400;\n    ");
 });
-var StyledPaper$1 = styled(material.Paper, {
+var StyledPaper$1 = styled__default.default(material.Paper, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
 })(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
@@ -5963,7 +5918,7 @@ var StyledPaper$1 = styled(material.Paper, {
     var semanticColors = getSemanticColors(props);
     return "\n      box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n      background-image: none;\n      margin: 0;\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n      .MuiAutocomplete-root,\n      .MuiFormControl-root.MuiTextField-root {\n        margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      }\n\n      // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n      // as it has been added to the parent container\n      .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n        margin-right: 0;\n        margin-bottom: 0;  \n      }\n    ");
 });
-var StyledDropdownMenuHeader = styled("div")(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledDropdownMenuHeader = styled__default.default("div")(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var search = props.search;
     var spaces = getSpaces(props);
     return "\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      margin-bottom: ").concat(search ? spaces === null || spaces === void 0 ? void 0 : spaces.s : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    ");
@@ -6081,7 +6036,7 @@ var isDisabled = function (props) {
  * passed to the underlying Button component. So we have added the style prop
  * to the InputDropdownProps interface.
  */
-var StyledInputDropdown = styled(Button, {
+var StyledInputDropdown = styled__default.default(Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
 })(templateObject_10 || (templateObject_10 = __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;
@@ -6093,7 +6048,7 @@ var StyledInputDropdown = styled(Button, {
         sdsStyle !== "minimal" &&
         applyIntentColor$1(props, "positive"), state === "open" && isOpen(props), disabled && isDisabled(props));
 });
-var StyledDetail = styled("span", {
+var StyledDetail = styled__default.default("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
 })(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
@@ -6101,7 +6056,7 @@ var StyledDetail = styled("span", {
     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      margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    ");
 });
-var StyledLabel$1 = styled("span", {
+var StyledLabel$1 = styled__default.default("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
 })(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
@@ -6113,7 +6068,7 @@ var StyledLabel$1 = styled("span", {
         : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
     return "\n      color: ".concat(labelColor, ";\n\n      font-weight: ").concat(sdsType === "label" ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n    ");
 });
-var StyledCounter = styled("span", {
+var StyledCounter = styled__default.default("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
 })(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
@@ -6122,7 +6077,7 @@ var StyledCounter = styled("span", {
     var semanticColors = getSemanticColors(props);
     return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n      color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textAction, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n      padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n      margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n    ");
 });
-var MinimalDetails = styled("div", {
+var MinimalDetails = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
 })(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n  text-align: left;\n  width: 100%;\n\n  ", "\n"], ["\n  ", "\n  text-align: left;\n  width: 100%;\n\n  ", "\n"])), labelFontBodyS, function (props) {
     var _a;
@@ -6131,13 +6086,13 @@ var MinimalDetails = styled("div", {
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n\n      ").concat(shouldTruncateMinimalDetails &&
         "overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;", "\n    ");
 });
-var LabelWrapper = styled("span", {
+var LabelWrapper = styled__default.default("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
 })(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var isMinimal = _a.isMinimal;
     return "\n      align-items: ".concat(isMinimal ? "center" : undefined, ";\n      display: ").concat(isMinimal ? "inline-flex" : "contents", ";\n      justify-content: ").concat(isMinimal ? "space-between" : undefined, ";\n      width: 100%;\n    ");
 });
-var IconWrapper = styled("span", {
+var IconWrapper = styled__default.default("span", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
 })(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n"], ["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n"])));
 function labelStyle(props) {
@@ -6327,7 +6282,7 @@ var doNotForwardProps$e = [
     "tagColor",
     "hover",
 ];
-var StyledTag$1 = styled(material.Chip, {
+var StyledTag$1 = styled__default.default(material.Chip, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
 })(templateObject_8 || (templateObject_8 = __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;
@@ -6349,7 +6304,7 @@ var Tag = function (props) {
     return jsxRuntime.jsx(StyledTag$1, __assign({ tagColor: color }, props, { color: "primary" }));
 };
 
-var StyledTag = styled(Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledTag = styled__default.default(Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f, _g;
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
@@ -6379,8 +6334,8 @@ var Chips = function (_a) {
         }) }));
 };
 
-var Wrapper$1 = styled("div")(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  min-width: 150px;\n"], ["\n  min-width: 150px;\n"])));
-var StyledChipsWrapper = styled("div")(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var Wrapper$1 = styled__default.default("div")(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  min-width: 150px;\n"], ["\n  min-width: 150px;\n"])));
+var StyledChipsWrapper = styled__default.default("div")(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     return "\n      margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n    ");
 });
@@ -6477,7 +6432,7 @@ var DialogContext = React.createContext({ sdsSize: "m" });
 
 // (thuang): Please keep this in sync with the props used in `ExtraProps`
 var doNotForwardProps$d = ["sdsSize"];
-var StyledPaper = styled(material.Paper, {
+var StyledPaper = styled__default.default(material.Paper, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
 })(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  & {\n    ", "\n\n    ", "\n  }\n"], ["\n  & {\n    ", "\n\n    ", "\n  }\n"])), paperDimensions, function (props) {
     var _a;
@@ -6540,7 +6495,7 @@ var Dialog = React.forwardRef(function Dialog(props, ref) {
 
 // (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
 var doNotForwardProps$c = ["buttonPosition"];
-var StyledDialogActions = styled(material.DialogActions, {
+var StyledDialogActions = styled__default.default(material.DialogActions, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
 })(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  padding: 0;\n\n  ", "\n"], ["\n  padding: 0;\n\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
@@ -6556,7 +6511,7 @@ var DialogActions = React.forwardRef(function DialogActions(props, ref) {
     return jsxRuntime.jsx(StyledDialogActions, __assign({ ref: ref }, props));
 });
 
-var StyledDialogContent = styled(material.DialogContent)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  ", "\n  padding: 0;\n"], ["\n  ", "\n  padding: 0;\n"])), fontBodyS$1);
+var StyledDialogContent = styled__default.default(material.DialogContent)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  ", "\n  padding: 0;\n"], ["\n  ", "\n  padding: 0;\n"])), fontBodyS$1);
 var templateObject_1$v;
 
 var index = React.forwardRef(
@@ -6567,7 +6522,7 @@ function DialogContent(props, ref) {
     return jsxRuntime.jsx(StyledDialogContent, __assign({ ref: ref }, props));
 });
 
-var StyledButton$1 = styled(Button)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  position: absolute;\n\n  ", "\n"], ["\n  position: absolute;\n\n  ", "\n"])), function (props) {
+var StyledButton$1 = styled__default.default(Button)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  position: absolute;\n\n  ", "\n"], ["\n  position: absolute;\n\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     return "\n      right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n    ");
 });
@@ -6587,21 +6542,21 @@ var CloseButton = React.forwardRef(function CloseButton(props, ref) {
         } }));
 });
 
-var StyledDialogTitle = styled(material.DialogTitle)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  padding: 0;\n  ", "\n"], ["\n  padding: 0;\n  ", "\n"])), function (props) {
+var StyledDialogTitle = styled__default.default(material.DialogTitle)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  padding: 0;\n  ", "\n"], ["\n  padding: 0;\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     return "\n      margin-bottom: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n    ");
 });
-var Title = styled(material.Typography)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontHeaderXl, function (props) {
+var Title = styled__default.default(material.Typography)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontHeaderXl, 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.textPrimary, ";\n    ");
 });
-var Subtitle = styled(material.Typography)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
+var Subtitle = styled__default.default(material.Typography)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, 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    ");
 });
-var Overline = styled(material.Typography)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
+var Overline = styled__default.default(material.Typography)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
     var _a;
     var semanticColors = getSemanticColors(props);
     var spaces = getSpaces(props);
@@ -6618,13 +6573,13 @@ var DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
 });
 
 var doNotForwardProps$b = ["buttonPosition"];
-var StyledButtonsWrapper = styled("div", {
+var StyledButtonsWrapper = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
 })(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var buttonPosition = props.buttonPosition;
     return "\n      display: flex;\n      justify-content: ".concat(buttonPosition === "left" ? "start" : "end", ";\n    ");
 });
-var StyledButton = styled(Button, {
+var StyledButton = styled__default.default(Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
 })(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
@@ -6803,7 +6758,7 @@ var SvgIconCheckboxUnchecked = function SvgIconCheckboxUnchecked(props) {
   })));
 };
 
-var StyledCheckbox = styled(material.Checkbox)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledCheckbox = styled__default.default(material.Checkbox)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f;
     var _g = props.intent, intent = _g === void 0 ? "default" : _g;
     var iconSizes = getIconSizes(props);
@@ -6818,16 +6773,16 @@ var StyledCheckbox = styled(material.Checkbox)(templateObject_1$r || (templateOb
     var checkboxColor = intentToColor[intent];
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[checkboxColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n      &:hover {\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n        background-color: transparent;\n      }\n\n      &.").concat(material.checkboxClasses.disabled, " {\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n      }\n\n      &.").concat(material.checkboxClasses.checked, " {\n        color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n        &:hover {\n          color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n          background-color: transparent;\n        }\n\n        &.").concat(material.checkboxClasses.disabled, " {\n          color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n        }\n      }\n\n      &.").concat(material.checkboxClasses.root, " {\n        ").concat(focusVisibleA11yStyle(props), "\n        padding: 0;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n        border-radius: 0;\n      }\n\n      .MuiSvgIcon-root {\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    ");
 });
-var StyledFormControlLabel$1 = styled(material.FormControlLabel)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(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    ");
 });
-var StyledLabelContainer$1 = styled("span")(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n"], ["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n"])));
-var StyledCheckboxLabel = styled("span")(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
+var StyledLabelContainer$1 = styled__default.default("span")(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n"], ["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n"])));
+var StyledCheckboxLabel = styled__default.default("span")(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
     var spaces = getSpaces(props);
     return "\n      margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n    ");
 });
-var StyledCheckboxCaption = styled("span")(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
+var StyledCheckboxCaption = styled__default.default("span")(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a, _b;
     var disabled = props.disabled;
     var semanticColors = getSemanticColors(props);
@@ -6884,7 +6839,7 @@ var SvgIconRadioUnchecked = function SvgIconRadioUnchecked(props) {
   })));
 };
 
-var StyledRadioButton = styled(material.Radio)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledRadioButton = styled__default.default(material.Radio)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f;
     var _g = props.intent, intent = _g === void 0 ? "default" : _g;
     var spaces = getSpaces(props);
@@ -6899,16 +6854,16 @@ var StyledRadioButton = styled(material.Radio)(templateObject_1$q || (templateOb
     var radioColor = intentToColor[intent];
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[radioColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n      &:hover {\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n        background-color: transparent;\n      }\n\n      &.").concat(material.radioClasses.disabled, " {\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n      }\n\n      &.").concat(material.radioClasses.checked, " {\n        color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n        &:hover {\n          color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n          background-color: transparent;\n        }\n\n        &.").concat(material.radioClasses.disabled, " {\n          color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n        }\n      }\n\n      &.").concat(material.radioClasses.root, " {\n        ").concat(focusVisibleA11yStyle(props), "\n        margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0 0;\n        padding: 0;\n      }\n\n      .MuiSvgIcon-root {\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    ");
 });
-var StyledFormControlLabel = styled(material.FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(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    ");
 });
-var StyledLabelContainer = styled("span")(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n"], ["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n"])));
-var StyledRadioLabel = styled("span")(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
+var StyledLabelContainer = styled__default.default("span")(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n"], ["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n"])));
+var StyledRadioLabel = styled__default.default("span")(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
     var spaces = getSpaces(props);
     return "\n      margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n    ");
 });
-var StyledRadioCaption = styled("span")(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
+var StyledRadioCaption = styled__default.default("span")(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a, _b;
     var disabled = props.disabled;
     var semanticColors = getSemanticColors(props);
@@ -6962,7 +6917,7 @@ var disabledSlider = function (props) {
     var mode = getMode(props);
     return "\n    .".concat(material.sliderClasses.track, " {\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, ";\n    }\n\n    .").concat(material.sliderClasses.thumb, ".").concat(material.sliderClasses.disabled, " {\n      background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillDisabled, ";\n    }\n\n    .").concat(material.sliderClasses.valueLabel, " {\n      color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n      background-color: ").concat(mode === "light" ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfaceSecondary : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n      \n      & * {\n        color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, ";\n      }\n    }\n\n    .").concat(material.sliderClasses.markLabel, " {\n      color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, "\n    }\n\n    .").concat(material.sliderClasses.mark, " {\n      background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, ";\n    }\n  ");
 };
-var StyledSlider = styled(material.Slider)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
+var StyledSlider = styled__default.default(material.Slider)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var disabled = props.disabled;
     return "\n      ".concat(inputSlider(props), "\n      ").concat(horizontal(props), "\n      ").concat(disabled ? disabledSlider(props) : "", "\n    ");
 });
@@ -6993,11 +6948,11 @@ var textArea = function (props) {
     var spaces = getSpaces(props);
     return react.css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n    .", " {\n      padding: ", "px;\n\n      > .", " {\n        padding: ", "px ", "px ", "px;\n        resize: both;\n      }\n    }\n  "], ["\n    .", " {\n      padding: ", "px;\n\n      > .", " {\n        padding: ", "px ", "px ", "px;\n        resize: both;\n      }\n    }\n  "])), material.outlinedInputClasses.multiline, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.outlinedInputClasses.inputMultiline, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m);
 };
-var StyledLabel = styled("label")(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  display: block;\n  ", "\n\n  ", "\n"], ["\n  display: block;\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
+var StyledLabel = styled__default.default("label")(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  display: block;\n  ", "\n\n  ", "\n"], ["\n  display: block;\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
     var spaces = getSpaces(props);
     return "\n      margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n    ");
 });
-var StyledInputBase = styled(material.TextField, {
+var StyledInputBase = styled__default.default(material.TextField, {
     shouldForwardProp: function (prop) {
         return !sdsPropNames$1.includes(prop.toString());
     },
@@ -7071,7 +7026,7 @@ var toggleOff = function (props) {
         : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimary, ";\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    }\n\n    .").concat(material.switchClasses.switchBase, " {\n      right: unset;\n      left: 0;\n      transform: unset;\n      padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n      .MuiIconButton-label {\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n      }\n\n      &:after {\n        color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textSecondary, ";\n        content: \"").concat(value, "\";\n      }\n    }\n\n    &:hover {\n      .").concat(material.switchClasses.switchBase, " {\n        &:after {\n          color: ").concat(disabled ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, ";\n        }\n      }\n    }\n\n    .").concat(material.switchClasses.track, " {\n      background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.fillPrimary, " !important;\n      opacity: 1 !important;\n    }\n\n    ").concat(!disabled &&
         "&:hover {\n        outline: ".concat((_k = borders === null || borders === void 0 ? void 0 : borders.base) === null || _k === void 0 ? void 0 : _k.hover, ";\n\n        .").concat(material.switchClasses.thumb, " {\n          color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.iconPrimaryHover, ";\n        }\n      }"), "\n  ");
 };
-var Toggle = styled(material.Switch)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyXs$2, function (props) {
+var Toggle = styled__default.default(material.Switch)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyXs$2, function (props) {
     var checked = props.checked;
     return "\n      ".concat(toggle(props), "\n      ").concat(checked ? toggleOn(props) : toggleOff(props), "\n    ");
 });
@@ -7095,16 +7050,12 @@ var InputToggle = function (props) {
 
 var doNotForwardProps$a = ["sdsStyle", "sdsSize", "fontWeight"];
 var defaultStyle = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var _h = props.sdsSize, sdsSize = _h === void 0 ? "s" : _h;
+    var _a, _b, _c, _d;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n    color: ", ";\n    position: relative;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      height: 1px;\n      margin-top: ", "px;\n      width: 100%;\n    }\n\n    &:hover {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:focus {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "], ["\n    color: ", ";\n    position: relative;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      height: 1px;\n      margin-top: ", "px;\n      width: 100%;\n    }\n\n    &:hover {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:focus {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, sdsSize === "s" ? -4 : -3, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textActionHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.borderHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.textActionPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.borderPressed);
+    return react.css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n    color: ", ";\n    position: relative;\n    text-decoration: none;\n    text-underline-offset: 2.5px;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:focus {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  "], ["\n    color: ", ";\n    position: relative;\n    text-decoration: none;\n    text-underline-offset: 2.5px;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:focus {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  "])), (_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.textActionHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed);
 };
-var dashedStyle = function (props) {
-    var _a, _b, _c;
-    var _d = props.sdsSize, sdsSize = _d === void 0 ? "s" : _d;
-    var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n    color: inherit;\n    position: relative;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      height: 1px;\n      margin-top: ", "px;\n      margin-left: 1px;\n      width: 100%;\n      background-image: linear-gradient(\n        to right,\n        ", " 60%,\n        transparent 60%\n      );\n      background-size: 5px 100%;\n    }\n\n    &:hover,\n    &:focus {\n      text-decoration: none;\n      &::after {\n        background-image: linear-gradient(\n          to right,\n          ", " 60%,\n          ", " 60%\n        );\n      }\n    }\n  "], ["\n    color: inherit;\n    position: relative;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      height: 1px;\n      margin-top: ", "px;\n      margin-left: 1px;\n      width: 100%;\n      background-image: linear-gradient(\n        to right,\n        ", " 60%,\n        transparent 60%\n      );\n      background-size: 5px 100%;\n    }\n\n    &:hover,\n    &:focus {\n      text-decoration: none;\n      &::after {\n        background-image: linear-gradient(\n          to right,\n          ", " 60%,\n          ", " 60%\n        );\n      }\n    }\n  "])), sdsSize === "s" ? -4 : -3, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderHover);
+var dashedStyle = function () {
+    return react.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n    color: inherit;\n    position: relative;\n    text-decoration: underline dashed;\n    text-underline-offset: 2.5px;\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-visible {\n      text-decoration-style: solid;\n    }\n  "], ["\n    color: inherit;\n    position: relative;\n    text-decoration: underline dashed;\n    text-underline-offset: 2.5px;\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-visible {\n      text-decoration-style: solid;\n    }\n  "])));
 };
 var smallStyle = function (props) {
     return fontBodyS$1(props);
@@ -7112,13 +7063,13 @@ var smallStyle = function (props) {
 var extraSmallStyle = function (props) {
     return fontBodyXs$2(props);
 };
-var StyledLink = styled(material.Link, {
+var StyledLink = styled__default.default(material.Link, {
     shouldForwardProp: function (prop) {
         return !doNotForwardProps$a.includes(prop.toString());
     },
 })(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  all: unset;\n\n  ", "\n\n  ", "\n"], ["\n  all: unset;\n\n  ", "\n\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
     var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
-    return react.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(props), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
+    return react.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
 });
 var templateObject_1$m, templateObject_2$b, templateObject_3$6, templateObject_4$5;
 
@@ -7136,7 +7087,7 @@ var Link = React.forwardRef(function (props, ref) {
 
 // (thuang): Please keep this in sync with the props used in `ListExtraProps`
 var doNotForwardProps$9 = ["marginBottom", "ordered"];
-var StyledList = styled(material.List, {
+var StyledList = styled__default.default(material.List, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
 })(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  .MuiListSubheader-root {\n    ", "\n  }\n\n  ", "\n"], ["\n  .MuiListSubheader-root {\n    ", "\n  }\n\n  ", "\n"])), propsToMarginBottom$1, function (props) {
     if (!props.ordered)
@@ -7174,7 +7125,7 @@ var fontBodyXxs = fontBody("xxs");
 var fontBodyXxxs = fontBody("xxxs");
 // (thuang): Please keep this in sync with the props used in `ListItemExtraProps`
 var doNotForwardProps$8 = ["marginBottom", "fontSize", "ordered"];
-var StyledListItem = styled(material.ListItem, {
+var StyledListItem = styled__default.default(material.ListItem, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
 })(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  ", "\n  ", "\n\n  padding: 0;\n\n  ", "\n\n  &:before {\n    display: inline-block;\n\n    ", "\n  }\n"], ["\n  ", "\n  ", "\n\n  padding: 0;\n\n  ", "\n\n  &:before {\n    display: inline-block;\n\n    ", "\n  }\n"])), propsToMarginBottom, propsToFontBody, function (props) {
     var ordered = props.ordered;
@@ -7207,7 +7158,7 @@ function propsToMarginBottom(props) {
     var marginBottom = props.marginBottom;
     return "\n    margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "xs"], "px;\n  ");
 }
-var ListItemLabel = styled("span")(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  margin-right: 5px;\n\n  ", "\n"], ["\n  margin-right: 5px;\n\n  ", "\n"])), function (props) {
+var ListItemLabel = styled__default.default("span")(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  margin-right: 5px;\n\n  ", "\n"], ["\n  margin-right: 5px;\n\n  ", "\n"])), function (props) {
     var fontWeights = getFontWeights(props);
     return "\n      font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n    ");
 });
@@ -7221,7 +7172,7 @@ var ListItem = function (props) {
 };
 
 var fontHeaderM = fontHeader("m");
-var StyledListSubheader = styled(material.ListSubheader)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  &.MuiListSubheader-root {\n    ", "\n\n    line-height: unset;\n    color: unset;\n\n    ", "\n  }\n"], ["\n  &.MuiListSubheader-root {\n    ", "\n\n    line-height: unset;\n    color: unset;\n\n    ", "\n  }\n"])), fontHeaderM, function (props) {
+var StyledListSubheader = styled__default.default(material.ListSubheader)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  &.MuiListSubheader-root {\n    ", "\n\n    line-height: unset;\n    color: unset;\n\n    ", "\n  }\n"], ["\n  &.MuiListSubheader-root {\n    ", "\n\n    line-height: unset;\n    color: unset;\n\n    ", "\n  }\n"])), fontHeaderM, function (props) {
     var spaces = getSpaces(props);
     return "\n        margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      ");
 });
@@ -7234,7 +7185,7 @@ var ListSubheader = function (props) {
     return jsxRuntime.jsx(StyledListSubheader, __assign({ disableGutters: true }, props));
 };
 
-var StyledText = styled("span")(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledText = styled__default.default("span")(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     return "\n      margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n    ");
 });
@@ -7251,7 +7202,7 @@ var tag = function (props) {
     return react.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n    ", "\n\n    background-color: ", ";\n    border-radius: ", "px;\n    color: ", ";\n\n    svg {\n      path {\n        fill: ", ";\n      }\n    }\n  "], ["\n    ", "\n\n    background-color: ", ";\n    border-radius: ", "px;\n    color: ", ";\n\n    svg {\n      path {\n        fill: ", ";\n      }\n    }\n  "])), fontCapsXxxxs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfacePrimary, corners === null || corners === void 0 ? void 0 : corners.l, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.text, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _c === void 0 ? void 0 : _c.ornament);
 };
 var doNotForwardProps$7 = ["sdsStyle"];
-var StyledLoadingIndicator = styled("div", {
+var StyledLoadingIndicator = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$7.includes(prop); },
 })(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var sdsStyle = props.sdsStyle;
@@ -7266,7 +7217,7 @@ var LoadingIndicator = function (_a) {
     return (jsxRuntime.jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsxRuntime.jsx(Icon, { sdsIcon: "Loading", sdsSize: "l", sdsType: "static" }), jsxRuntime.jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
 };
 
-var StyledMenu = styled(material.Menu)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  & {\n    .", " {\n      ", "\n    }\n\n    .MuiList-padding {\n      padding: 0;\n    }\n  }\n"], ["\n  & {\n    .", " {\n      ", "\n    }\n\n    .MuiList-padding {\n      padding: 0;\n    }\n  }\n"])), material.menuClasses.paper, function (props) {
+var StyledMenu = styled__default.default(material.Menu)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  & {\n    .", " {\n      ", "\n    }\n\n    .MuiList-padding {\n      padding: 0;\n    }\n  }\n"], ["\n  & {\n    .", " {\n      ", "\n    }\n\n    .MuiList-padding {\n      padding: 0;\n    }\n  }\n"])), material.menuClasses.paper, function (props) {
     var _a;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
@@ -7289,17 +7240,17 @@ var Menu = function (props) {
     return (jsxRuntime.jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
 };
 
-var StyledMenuItem = styled(MenuItem)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var StyledMenuItem = styled__default.default(MenuItem)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 var doNotForwardProps$6 = ["search", "InputBaseProps", "keepSearchOnSelect"];
 // (thuang): Casting the type to `Autocomplete`
 //  per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
-var StyledAutocomplete = styled(material.Autocomplete, {
+var StyledAutocomplete = styled__default.default(material.Autocomplete, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
 })(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  ", "\n  width: 100%;\n"], ["\n  ", "\n  width: 100%;\n"])), function (_a) {
     var search = _a.search;
     return !search && "height: 0; margin: 0 !important;";
 });
-var InputBaseWrapper = styled("div", {
+var InputBaseWrapper = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
 })(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var search = props.search;
@@ -7312,7 +7263,7 @@ var InputBaseWrapper = styled("div", {
     var spaces = getSpaces(props);
     return "\n      margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n    ");
 });
-var StyledMenuInputSearch = styled(InputSearch, {
+var StyledMenuInputSearch = styled__default.default(InputSearch, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
 })(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  && {\n    margin: 0;\n\n    .", " {\n      width: 100%;\n      padding: 0;\n      padding-right: 14px !important;\n    }\n\n    /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n    caret-color: ", ";\n  }\n"], ["\n  && {\n    margin: 0;\n\n    .", " {\n      width: 100%;\n      padding: 0;\n      padding-right: 14px !important;\n    }\n\n    /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n    caret-color: ", ";\n  }\n"])), material.inputBaseClasses.root, function (_a) {
     var search = _a.search;
@@ -7423,7 +7374,7 @@ var useScrollStopListener = function (callback, timeout) {
 };
 
 var doNotForwardProps$5 = ["items", "sdsIndicatorColor"];
-var StyledTabs$1 = styled(material.Tabs, {
+var StyledTabs$1 = styled__default.default(material.Tabs, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
 })(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
@@ -7431,7 +7382,7 @@ var StyledTabs$1 = styled(material.Tabs, {
     var semanticColors = getSemanticColors(props);
     return "\n      &:before {\n        background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        content: \"\";\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n\n      max-width: 180px;\n      top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n      margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      position: sticky;\n      overflow: visible;\n\n      .").concat(material.tabsClasses.indicator, " {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.borderSelected, " !important;\n        border-radius: 2px;\n        left: 0;\n        width: 2px;\n      }\n\n      .").concat(material.tabsClasses.scroller, " {\n        overflow: visible !important;\n      }\n    ");
 });
-var StyledTab$1 = styled(material.Tab, {
+var StyledTab$1 = styled__default.default(material.Tab, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
 })(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
     var _a, _b, _c, _d;
@@ -7585,7 +7536,7 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
 
 var fontBodyXs = fontBody("xs");
 var doNotForwardProps$4 = ["slideDirection"];
-var StyledNotification = styled(material.Alert, {
+var StyledNotification = styled__default.default(material.Alert, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$4.includes(prop); },
 })(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs, function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -7607,7 +7558,7 @@ var StyledNotification = styled(material.Alert, {
         2);
     return "\n      background-color: ".concat(backgroundColor, ";\n      max-width: 480px;\n      min-width: 280px;\n      box-sizing: border-box;\n      margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0;\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimary, ";\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      align-items: flex-start;\n      border-left: ").concat((_m = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _m === void 0 ? void 0 : _m.extraThick, ";\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.s, ";\n\n      .MuiAlert-icon {\n        height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n        width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, "px;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        padding: 0;\n        path {\n          fill: ").concat(iconColor, ";\n        }\n      }\n\n      .MuiAlert-message {\n        padding: ").concat(alertMessagePaddingTop, "px 0px 0px;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        width: 100%;\n\n        > * {\n          margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0px;\n\n          &:last-child {\n            margin-bottom: 0;\n          }\n        }\n\n        button {\n          display: block;\n        }\n      }\n\n      .MuiAlert-action {\n        margin-right: 0;\n        padding: 0;\n        align-items: flex-start;\n        margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n        > button {\n            padding: 0;\n          }\n        }\n      }\n    ");
 });
-var StyledButtonWrapper = styled("div")(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledButtonWrapper = styled__default.default("div")(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
     return "\n      display: flex;\n      justify-content: ".concat(buttonPosition === "left" ? "flex-start" : "flex-end", ";\n    ");
 });
@@ -7672,12 +7623,12 @@ var doNotForwardProps$3 = [
     "pageSize",
     "truncateDropdown",
 ];
-var StyledPaginationButton = styled(Button)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledPaginationButton = styled__default.default(Button)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c;
     var semanticColors = getSemanticColors(props);
     return "\n      width: 32px;\n      height: 32px;\n      cursor: \"pointer\";\n\n      & .MuiSvgIcon-root {\n        width: 10px;\n        color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, "\n      }\n\n      &:hover {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n\n        & .MuiSvgIcon-root {\n          color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryHover, "\n        }\n      }\n    ");
 });
-var StyledPaginationChevronList = styled("li", {
+var StyledPaginationChevronList = styled__default.default("li", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
 })(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e;
@@ -7686,7 +7637,7 @@ var StyledPaginationChevronList = styled("li", {
     var semanticColors = getSemanticColors(props);
     return "\n      width: 32px;\n      height: 32px;\n      cursor: ".concat(disabled ? "auto" : "pointer", ";\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: 32px;\n\n      &[data-order=\"first\"] {\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      }\n\n      &[data-order=\"last\"] {\n        margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      }\n\n      & .MuiSvgIcon-root {\n        color: ").concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\n      }\n\n      &:hover {\n        background-color: ").concat(disabled ? "transparent" : (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n\n        & .MuiSvgIcon-root {\n          color: ").concat(disabled ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryHover, "\n        }\n      }\n\n      ").concat(focusVisibleA11yStyle(props), "\n    ");
 });
-var StyledPagination = styled("ul", {
+var StyledPagination = styled__default.default("ul", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
 })(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  margin: 0;\n  & li {\n    list-style: none;\n  }\n"], ["\n  ", "\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  margin: 0;\n  & li {\n    list-style: none;\n  }\n"])), fontBodyS$1);
 var selectedPageStyle = function (props) {
@@ -7694,7 +7645,7 @@ var selectedPageStyle = function (props) {
     var semanticColors = getSemanticColors(props);
     return "\n    background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillSelected, ";\n    color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, ";\n\n    &:hover {\n      background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillSelected, ";\n      color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimaryInverse, ";\n    }\n  ");
 };
-var Page = styled("li", {
+var Page = styled__default.default("li", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
 })(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodySemiboldS, function (props) {
     var _a, _b, _c;
@@ -7706,7 +7657,7 @@ var Page = styled("li", {
 });
 var templateObject_1$d, templateObject_2$5, templateObject_3$3, templateObject_4$2;
 
-var StyledPaginationDropdownMenu = styled(Menu)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  & .MuiPaper-root {\n    max-height: 120px;\n  }\n"], ["\n  & .MuiPaper-root {\n    max-height: 120px;\n  }\n"])));
+var StyledPaginationDropdownMenu = styled__default.default(Menu)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  & .MuiPaper-root {\n    max-height: 120px;\n  }\n"], ["\n  & .MuiPaper-root {\n    max-height: 120px;\n  }\n"])));
 var templateObject_1$c;
 
 var PageListDropdown = function (props) {
@@ -7850,7 +7801,7 @@ var overlayPanelStyles = function (props) {
     var shadows = getShadows(props);
     return react.css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    /**\n     * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n     * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n     * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n     * In the meantime, we are ignoring the a11y errors within Storybook.\n     */\n    width: fit-content;\n    height: fit-content;\n    div[data-testid=\"sentinelStart\"],\n    div[data-testid=\"sentinelEnd\"] {\n      width: fit-content;\n    }\n\n    .", " {\n      background-color: ", ";\n      padding: ", "px;\n      min-width: ", "px;\n      min-height: ", "px;\n      box-shadow: ", ";\n      background-image: none;\n    }\n  "], ["\n    /**\n     * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n     * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n     * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n     * In the meantime, we are ignoring the a11y errors within Storybook.\n     */\n    width: fit-content;\n    height: fit-content;\n    div[data-testid=\"sentinelStart\"],\n    div[data-testid=\"sentinelEnd\"] {\n      width: fit-content;\n    }\n\n    .", " {\n      background-color: ", ";\n      padding: ", "px;\n      min-width: ", "px;\n      min-height: ", "px;\n      box-shadow: ", ";\n      background-image: none;\n    }\n  "])), material.drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xl, PANEL_OVERLAY_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, shadows === null || shadows === void 0 ? void 0 : shadows.l);
 };
-var StyledDrawer = styled(material.Drawer, {
+var StyledDrawer = styled__default.default(material.Drawer, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
 })(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a = props.sdsType, sdsType = _a === void 0 ? "basic" : _a, _b = props.anchor, anchor = _b === void 0 ? "left" : _b, width = props.width;
@@ -7859,13 +7810,13 @@ var StyledDrawer = styled(material.Drawer, {
     var panelHeight = anchor !== "bottom" ? "100%" : widthString;
     return react.css(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n      .", " {\n        height: ", ";\n        width: ", ";\n      }\n\n      ", "\n      ", "\n    "], ["\n      .", " {\n        height: ", ";\n        width: ", ";\n      }\n\n      ", "\n      ", "\n    "])), material.drawerClasses.paper, panelHeight, panelWidth, sdsType === "basic" && basicPanelStyles(props), sdsType === "overlay" && overlayPanelStyles(props));
 });
-var StyledHeaderComponent = styled("div")(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledHeaderComponent = styled__default.default("div")(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     return react.css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n      margin-bottom: ", "px;\n      display: flex;\n      justify-content: space-between;\n      align-items: start;\n    "], ["\n      margin-bottom: ", "px;\n      display: flex;\n      justify-content: space-between;\n      align-items: start;\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxl);
 });
 var templateObject_1$b, templateObject_2$4, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;
 
-var StyledPanelHeader = styled("div")(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledPanelHeader = styled__default.default("div")(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     return "\n      width: 100%;\n      height: 100%;\n      margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n    ");
 });
@@ -7876,7 +7827,7 @@ var PanelHeader = function (props) {
     return jsxRuntime.jsx(StyledPanelHeader, { children: children });
 };
 
-var StyledPanelHeaderClose = styled("div")(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: end;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: end;\n  align-items: center;\n"])));
+var StyledPanelHeaderClose = styled__default.default("div")(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: end;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: end;\n  align-items: center;\n"])));
 var templateObject_1$9;
 
 var PanelHeaderClose = function (props) {
@@ -7893,7 +7844,7 @@ var PANEL_OVERLAY_MIN_WIDTH_PX = 320;
 /**
  * @see https://mui.com/material-ui/react-drawer/
  */
-var Panel = React.forwardRef(function (props, ref) {
+var Panel = React__namespace.default.forwardRef(function (props, ref) {
     var children = props.children, _a = props.sdsType, sdsType = _a === void 0 ? "basic" : _a, _b = props.position, position = _b === void 0 ? "left" : _b, width = props.width, ModalProps = props.ModalProps;
     var drawerWidth = width !== null && width !== void 0 ? width : (sdsType === "basic"
         ? PANEL_BASIC_MIN_WIDTH_PX
@@ -7931,7 +7882,7 @@ var Panel = React.forwardRef(function (props, ref) {
 });
 
 var doNotForwardProps$1 = ["buttonDefinition"];
-var StyledSegmentedControl = styled(material.ToggleButtonGroup, {
+var StyledSegmentedControl = styled__default.default(material.ToggleButtonGroup, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
 })(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -7948,7 +7899,7 @@ var SegmentedControl = function (props) {
     var _a;
     var buttonDefinition = props.buttonDefinition, valueProp = props.value, onChangeProp = props.onChange, restProps = __rest(props, ["buttonDefinition", "value", "onChange"]);
     var initialValue = ((_a = buttonDefinition.find(function (button) { return !button.disabled; })) === null || _a === void 0 ? void 0 : _a.value) || null;
-    var _b = React.useState(initialValue), active = _b[0], setActive = _b[1];
+    var _b = React__namespace.default.useState(initialValue), active = _b[0], setActive = _b[1];
     // (masoudmanson): Add Controlled/Uncontrolled Component pattern
     var isControlled = valueProp !== undefined;
     var value = isControlled ? valueProp : active;
@@ -7971,7 +7922,7 @@ var SegmentedControl = function (props) {
             }), ";"] })));
 };
 
-var StyledTable = styled("table")(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0;\n  table-layout: fixed;\n"], ["\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0;\n  table-layout: fixed;\n"])));
+var StyledTable = styled__default.default("table")(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0;\n  table-layout: fixed;\n"], ["\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0;\n  table-layout: fixed;\n"])));
 var templateObject_1$7;
 
 var Table = React.forwardRef(function (props, ref) {
@@ -7999,7 +7950,7 @@ var hoverStyled = function (props) {
     var semanticColors = getSemanticColors(props);
     return "\n    &:hover {\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n    }\n  ");
 };
-var StyledTableRow = styled("tr", {
+var StyledTableRow = styled__default.default("tr", {
     shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
 })(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
     var _a, _b;
@@ -8018,7 +7969,7 @@ var TableRow = React.forwardRef(function (props, ref) {
     return (jsxRuntime.jsx(StyledTableRow, __assign({ ref: ref }, props, { children: children })));
 });
 
-var StyledTableHeader = styled("thead")(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledTableHeader = styled__default.default("thead")(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
     var semanticColors = getSemanticColors(props);
     return "\n      border-bottom: solid 2px ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderTable, ";\n    ");
@@ -8032,13 +7983,13 @@ var TableHeader = React.forwardRef(function (props, ref) {
 
 var TabsContext = React.createContext({ sdsSize: "large" });
 
-var Wrapper = styled("span")(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var Wrapper = styled__default.default("span")(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
     var semanticColors = getSemanticColors(props);
     return "\n      &:active {\n        color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n      }\n\n      &:disabled {\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, ";\n      }\n    ");
 });
 var LABEL_DO_NOT_FORWARD_PROPS = ["sdsSize"];
-var Label = styled("span", {
+var Label = styled__default.default("span", {
     shouldForwardProp: function (prop) {
         return !LABEL_DO_NOT_FORWARD_PROPS.includes(String(prop));
     },
@@ -8053,7 +8004,7 @@ var Label = styled("span", {
     return "\n      margin-right: ".concat(isLarge ? spaces === null || spaces === void 0 ? void 0 : spaces.l : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n  ");
 });
 var COUNT_DO_NOT_FORWARD_PROPS = ["sdsSize"];
-var Count = styled("span", {
+var Count = styled__default.default("span", {
     shouldForwardProp: function (prop) {
         return !COUNT_DO_NOT_FORWARD_PROPS.includes(String(prop));
     },
@@ -8077,7 +8028,7 @@ var LabelWithCount = React.forwardRef(function LabelWithCount(props, ref) {
 
 var TempTabs = function (props) { return jsxRuntime.jsx(material.Tabs, __assign({}, props)); };
 var TABS_DO_NOT_FORWARD_PROPS = ["underlined", "sdsSize"];
-var StyledTabs = styled(TempTabs, {
+var StyledTabs = styled__default.default(TempTabs, {
     shouldForwardProp: function (prop) {
         return !TABS_DO_NOT_FORWARD_PROPS.includes(String(prop));
     },
@@ -8090,7 +8041,7 @@ var StyledTabs = styled(TempTabs, {
     return "\n      margin-top: ".concat(isLarge ? spaces === null || spaces === void 0 ? void 0 : spaces.l : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      margin-bottom: ").concat(isLarge ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      border-bottom: ").concat(underlined ? "2px solid ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";") : "none", ";\n    ");
 });
 var TAB_DO_NOT_FORWARD_PROPS = ["sdsSize"];
-var StyledTab = styled(material.Tab, {
+var StyledTab = styled__default.default(material.Tab, {
     shouldForwardProp: function (prop) { return !TAB_DO_NOT_FORWARD_PROPS.includes(String(prop)); },
 })(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  min-height: unset;\n  padding: 0;\n  min-width: 32px;\n  opacity: 1 !important;\n\n  ", "\n  ", "\n\n  ", "\n"], ["\n  min-height: unset;\n  padding: 0;\n  min-width: 32px;\n  opacity: 1 !important;\n\n  ", "\n  ", "\n\n  ", "\n"])), tabFontMixin, focusVisibleA11yStyle, function (props) {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -8113,7 +8064,7 @@ var TabIndicator = function (theme) {
 var Tabs = React.forwardRef(function Tabs(props, ref) {
     var _a = props.sdsSize, sdsSize = _a === void 0 ? "large" : _a, rest = __rest(props, ["sdsSize"]);
     var theme = material.useTheme();
-    var contextValue = React.useMemo(function () { return ({ sdsSize: sdsSize }); }, [sdsSize]);
+    var contextValue = React__namespace.default.useMemo(function () { return ({ sdsSize: sdsSize }); }, [sdsSize]);
     var indicatorProps = React.useMemo(function () {
         return { className: TabIndicator(theme) };
     }, [theme]);
@@ -8187,13 +8138,13 @@ var disabledStyle = function (props) {
         return "";
     return "\n    color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled, ";\n  ");
 };
-var Section = styled("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), disabledStyle, function (props) {
+var Section = styled__default.default("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), disabledStyle, function (props) {
     var _a;
     var spaces = getSpaces(props);
     var borders = getBorders(props);
     return "\n      &:not(:last-child) {\n        padding-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        border-bottom: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n      }\n\n      &:not(:first-of-type) {\n        padding-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      }\n    ");
 });
-var SectionLabel = styled("div")(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), fontCapsXxxxs, disabledStyle, function (props) {
+var SectionLabel = styled__default.default("div")(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), fontCapsXxxxs, disabledStyle, function (props) {
     var _a;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
@@ -8201,7 +8152,7 @@ var SectionLabel = styled("div")(templateObject_2 || (templateObject_2 = __makeT
         return "";
     return "\n      margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;      \n      color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n    ");
 });
-var RowLabel = styled(material.TableCell, {
+var RowLabel = styled__default.default(material.TableCell, {
     shouldForwardProp: function (prop) {
         return !sdsPropNames.includes(prop.toString());
     },
@@ -8209,12 +8160,12 @@ var RowLabel = styled(material.TableCell, {
     var spaces = getSpaces(props);
     return "\n      padding: 0 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0;\n      width: 50%;\n      border-bottom: none;\n      font-weight: 600;\n    ");
 });
-var RowValue = styled(material.TableCell, {
+var RowValue = styled__default.default(material.TableCell, {
     shouldForwardProp: function (prop) {
         return !sdsPropNames.includes(prop.toString());
     },
 })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: 0 !important;\n  border-bottom: none;\n"], ["\n  ", "\n  ", "\n\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: 0 !important;\n  border-bottom: none;\n"])), fontTabularXs, disabledStyle);
-var Alert = styled("div")(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), fontBodyXxs$1);
+var Alert = styled__default.default("div")(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), fontBodyXxs$1);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 /**
@@ -8350,4 +8301,5 @@ exports.getShadows = getShadows;
 exports.getSpaces = getSpaces;
 exports.getSpacings = getSpacings;
 exports.getTypography = getTypography;
+exports.makeSdsSemanticAppTheme = makeSdsSemanticAppTheme;
 exports.makeThemeOptions = makeThemeOptions;