npm - @czi-sds/components - Versions diffs - 21.6.1 → 21.6.3 - Mend

@czi-sds/components 21.6.1 → 21.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.cjs.js CHANGED Viewed

@@ -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.
@@ -1257,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);
 });
@@ -1268,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);
@@ -4015,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;
 /**
@@ -4049,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());
     },
@@ -4076,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);
@@ -4087,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);
@@ -4266,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;
@@ -4291,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)
@@ -4360,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;
@@ -4418,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);
@@ -4479,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());
     },
@@ -4495,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);
@@ -4506,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;
@@ -4515,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);
@@ -4528,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;
@@ -4551,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;
@@ -4737,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;
@@ -4747,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;
@@ -4758,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);
@@ -4773,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) {
@@ -4944,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);
@@ -5015,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";
     },
@@ -5028,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;
@@ -5036,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;
@@ -5065,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);
@@ -5232,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);
     },
@@ -5247,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);
     },
@@ -5259,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);
@@ -5271,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;
@@ -5317,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 () {
@@ -5352,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;
@@ -5365,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)));
@@ -5379,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;
@@ -5471,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    ");
 });
@@ -5503,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    ");
@@ -5525,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;
 /**
@@ -5619,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;
@@ -5632,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;
@@ -5653,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;
@@ -5664,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;
@@ -5675,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    ");
 });
@@ -5698,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);
@@ -5725,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;
@@ -5734,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;
@@ -5743,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;
@@ -5846,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;
@@ -5883,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;
@@ -5891,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";
     },
@@ -5904,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;
@@ -5914,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    ");
@@ -6032,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;
@@ -6044,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;
@@ -6052,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;
@@ -6064,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;
@@ -6073,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;
@@ -6082,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) {
@@ -6278,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;
@@ -6300,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);
@@ -6330,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    ");
 });
@@ -6428,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;
@@ -6491,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);
@@ -6507,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(
@@ -6518,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    ");
 });
@@ -6538,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);
@@ -6569,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);
@@ -6754,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);
@@ -6769,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);
@@ -6835,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);
@@ -6850,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);
@@ -6913,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    ");
 });
@@ -6944,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());
     },
@@ -7022,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    ");
 });
@@ -7059,7 +7063,7 @@ 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());
     },
@@ -7083,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)
@@ -7121,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;
@@ -7154,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    ");
 });
@@ -7168,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      ");
 });
@@ -7181,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    ");
 });
@@ -7198,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;
@@ -7213,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);
@@ -7236,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;
@@ -7259,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;
@@ -7370,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;
@@ -7378,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;
@@ -7532,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;
@@ -7554,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    ");
 });
@@ -7619,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;
@@ -7633,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) {
@@ -7641,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;
@@ -7653,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) {
@@ -7797,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;
@@ -7806,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    ");
 });
@@ -7823,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) {
@@ -7840,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
@@ -7878,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;
@@ -7895,18 +7899,16 @@ 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;
     var handleActive = function (event, newActive) {
-        if (newActive !== null) {
-            if (!isControlled) {
-                setActive(newActive);
-            }
-            if (onChangeProp) {
-                onChangeProp(event, newActive);
-            }
+        if (!isControlled) {
+            setActive(newActive);
+        }
+        if (onChangeProp) {
+            onChangeProp(event, newActive);
         }
     };
     return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: [buttonDefinition.map(function (button) {
@@ -7918,7 +7920,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) {
@@ -7946,7 +7948,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;
@@ -7965,7 +7967,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    ");
@@ -7979,13 +7981,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));
     },
@@ -8000,7 +8002,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));
     },
@@ -8024,7 +8026,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));
     },
@@ -8037,7 +8039,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;
@@ -8060,7 +8062,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]);
@@ -8134,13 +8136,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);
@@ -8148,7 +8150,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());
     },
@@ -8156,12 +8158,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;
 /**