@czi-sds/components 18.1.1 → 19.0.0

package/dist/index.cjs.js

@@ -88,7 +88,7 @@ var FontWeight;
 (function (FontWeight) {
     FontWeight[FontWeight["bold"] = 700] = "bold";
     FontWeight[FontWeight["light"] = 300] = "light";
-    FontWeight[FontWeight["medium"] = 800] = "medium";
+    FontWeight[FontWeight["medium"] = 500] = "medium";
     FontWeight[FontWeight["regular"] = 400] = "regular";
     FontWeight[FontWeight["semibold"] = 600] = "semibold";
 })(FontWeight || (FontWeight = {}));
@@ -563,7 +563,7 @@ var fontCaps = function (fontSize) {
         if (!typography)
             return null;
         var caps = typography.styles.caps;
-        return react.css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n      ", "\n      text-transform: uppercase;\n    "], ["\n      ", "\n      text-transform: uppercase;\n    "])), themeToCss(caps[fontSize]));
+        return react.css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n      ", "\n      text-transform: uppercase;\n    "], ["\n      ", "\n      text-transform: uppercase;\n    "])), themeToCss(caps[fontSize]));
     };
 };
 var fontCapsXxs = fontCaps("xxs");
@@ -587,15 +587,15 @@ var fontHeaderXs = fontHeader("xs");
 var fontHeaderXxs = fontHeader("xxs");
 var fontHeaderXxxs = fontHeader("xxxs");
 function themeToCss(fontTheme) {
-    return react.css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n    font-size: ", "px;\n    line-height: ", ";\n    letter-spacing: ", ";\n    font-weight: ", ";\n    text-transform: ", ";\n  "], ["\n    font-size: ", "px;\n    line-height: ", ";\n    letter-spacing: ", ";\n    font-weight: ", ";\n    text-transform: ", ";\n  "])), fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform);
+    return react.css(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n    font-size: ", "px;\n    line-height: ", ";\n    letter-spacing: ", ";\n    font-weight: ", ";\n    text-transform: ", ";\n  "], ["\n    font-size: ", "px;\n    line-height: ", ";\n    letter-spacing: ", ";\n    font-weight: ", ";\n    text-transform: ", ";\n  "])), fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform);
 }
-var templateObject_1$S, templateObject_2$z;
+var templateObject_1$U, templateObject_2$B;
 
-var StyledAccordionDetails = styles.styled(material.AccordionDetails)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$2, function (props) {
+var StyledAccordionDetails = styles.styled(material.AccordionDetails)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$2, function (props) {
     var spaces = getSpaces(props);
-    return react.css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n      padding: ", "px;\n      padding-top: ", "px;\n    "], ["\n      padding: ", "px;\n      padding-top: ", "px;\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
+    return react.css(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n      padding: ", "px;\n      padding-top: ", "px;\n    "], ["\n      padding: ", "px;\n      padding-top: ", "px;\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
 });
-var templateObject_1$R, templateObject_2$y;
+var templateObject_1$T, templateObject_2$A;
 
 var AccordionDetails = function (props) {
     var children = props.children;
@@ -3088,30 +3088,30 @@ function iconSize(props) {
     var _a, _b;
     var sdsSize = props.sdsSize;
     var iconSizes = getIconSizes(props);
-    return react.css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n    height: ", "px;\n    width: ", "px;\n  "], ["\n    height: ", "px;\n    width: ", "px;\n  "])), (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.width);
+    return react.css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n    height: ", "px;\n    width: ", "px;\n  "], ["\n    height: ", "px;\n    width: ", "px;\n  "])), (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.width);
 }
 function buttonStyle() {
-    return react.css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n    color: inherit;\n  "], ["\n    color: inherit;\n  "])));
+    return react.css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n    color: inherit;\n  "], ["\n    color: inherit;\n  "])));
 }
 function staticStyle(props) {
     var _a = props.iconColor, iconColor = _a === void 0 ? "primary" : _a, _b = props.shade, shade = _b === void 0 ? 400 : _b;
     var colors = getColors(props);
-    return react.css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), colors === null || colors === void 0 ? void 0 : colors[iconColor][shade]);
+    return react.css(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), colors === null || colors === void 0 ? void 0 : colors[iconColor][shade]);
 }
 function interactive(props) {
     var colors = getColors(props);
     var _a = props.iconColor, iconColor = _a === void 0 ? "primary" : _a, _b = props.shade, shade = _b === void 0 ? 400 : _b;
-    return react.css(templateObject_4$j || (templateObject_4$j = __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  "])), colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[600], colors === null || colors === void 0 ? void 0 : colors[iconColor][shade], colors === null || colors === void 0 ? void 0 : colors.gray[300]);
+    return react.css(templateObject_4$k || (templateObject_4$k = __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  "])), colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[600], colors === null || colors === void 0 ? void 0 : colors[iconColor][shade], colors === null || colors === void 0 ? void 0 : colors.gray[300]);
 }
-var doNotForwardProps$l = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
+var doNotForwardProps$n = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
 var StyledSvgIcon = styles.styled(material.SvgIcon, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
 })(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var sdsType = props.sdsType;
     return react.css(templateObject_5$f || (templateObject_5$f = __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 = styles.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 templateObject_1$Q, templateObject_2$x, templateObject_3$o, templateObject_4$j, templateObject_5$f, templateObject_6$c, templateObject_7$9;
+var templateObject_1$S, templateObject_2$z, templateObject_3$q, templateObject_4$k, templateObject_5$f, templateObject_6$c, templateObject_7$9;
 
 /**
  * @see https://mui.com/material-ui/icons/#icons
@@ -3132,16 +3132,16 @@ var Icon = React.forwardRef(function Icon(_a, ref) {
     return null;
 });
 
-var StyledAccordionHeader = styles.styled(material.AccordionSummary)(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontHeaderS, function (props) {
+var StyledAccordionHeader = styles.styled(material.AccordionSummary)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontHeaderS, function (props) {
     var spaces = getSpaces(props);
     var colors = getColors(props);
-    return react.css(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n      padding: ", "px;\n      min-height: 40px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      &.Mui-expanded {\n        min-height: 40px;\n      }\n\n      .MuiAccordionSummary-content {\n        margin: 0;\n        flex-direction: column;\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n      }\n\n      .MuiAccordionSummary-expandIconWrapper {\n        padding: 0px;\n        margin-right: 0;\n        margin-left: ", "px;\n        svg {\n          color: ", ";\n        }\n      }\n    "], ["\n      padding: ", "px;\n      min-height: 40px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      &.Mui-expanded {\n        min-height: 40px;\n      }\n\n      .MuiAccordionSummary-content {\n        margin: 0;\n        flex-direction: column;\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n      }\n\n      .MuiAccordionSummary-expandIconWrapper {\n        padding: 0px;\n        margin-right: 0;\n        margin-left: ", "px;\n        svg {\n          color: ", ";\n        }\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
+    return react.css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n      padding: ", "px;\n      min-height: 40px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      &.Mui-expanded {\n        min-height: 40px;\n      }\n\n      .MuiAccordionSummary-content {\n        margin: 0;\n        flex-direction: column;\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n      }\n\n      .MuiAccordionSummary-expandIconWrapper {\n        padding: 0px;\n        margin-right: 0;\n        margin-left: ", "px;\n        svg {\n          color: ", ";\n        }\n      }\n    "], ["\n      padding: ", "px;\n      min-height: 40px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      &.Mui-expanded {\n        min-height: 40px;\n      }\n\n      .MuiAccordionSummary-content {\n        margin: 0;\n        flex-direction: column;\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n      }\n\n      .MuiAccordionSummary-expandIconWrapper {\n        padding: 0px;\n        margin-right: 0;\n        margin-left: ", "px;\n        svg {\n          color: ", ";\n        }\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
 });
-var StyledSubtitle = styles.styled("p")(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
+var StyledSubtitle = styles.styled("p")(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var colors = getColors(props);
-    return react.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n      color: ", ";\n      margin: 0;\n    "], ["\n      color: ", ";\n      margin: 0;\n    "])), colors === null || colors === void 0 ? void 0 : colors.gray[500]);
+    return react.css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n      color: ", ";\n      margin: 0;\n    "], ["\n      color: ", ";\n      margin: 0;\n    "])), colors === null || colors === void 0 ? void 0 : colors.gray[500]);
 });
-var templateObject_1$P, templateObject_2$w, templateObject_3$n, templateObject_4$i;
+var templateObject_1$R, templateObject_2$y, templateObject_3$p, templateObject_4$j;
 
 var AccordionHeader = function (props) {
     var children = props.children, id = props.id, subtitle = props.subtitle;
@@ -3153,18 +3153,18 @@ var StyledAccordion = styles.styled(material.Accordion, {
     shouldForwardProp: function (prop) {
         return !sdsPropNames$5.includes(prop.toString());
     },
-})(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var useDivider = props.useDivider, togglePosition = props.togglePosition;
     var shadows = getShadows(props);
     var typography = getTypography(props);
     var border = getBorders(props);
-    return react.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n      &.MuiAccordion-root {\n        box-shadow: ", ";\n        font-family: ", ";\n        border-bottom: ", ";\n        height: fit-content;\n\n        & .MuiAccordionSummary-root {\n          padding: 10px;\n          min-height: 40px;\n\n          &.Mui-expanded {\n            min-height: unset;\n          }\n\n          & .MuiAccordionSummary-expandIcon,\n          & .MuiAccordionSummary-expandIconWrapper {\n            padding: 0;\n            align-self: flex-start;\n          }\n        }\n\n        .MuiAccordionDetails-root {\n          padding: 10px;\n          padding-top: 4px;\n        }\n\n        &:before {\n          opacity: 0;\n        }\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n        ", "\n      }\n    "], ["\n      &.MuiAccordion-root {\n        box-shadow: ", ";\n        font-family: ", ";\n        border-bottom: ", ";\n        height: fit-content;\n\n        & .MuiAccordionSummary-root {\n          padding: 10px;\n          min-height: 40px;\n\n          &.Mui-expanded {\n            min-height: unset;\n          }\n\n          & .MuiAccordionSummary-expandIcon,\n          & .MuiAccordionSummary-expandIconWrapper {\n            padding: 0;\n            align-self: flex-start;\n          }\n        }\n\n        .MuiAccordionDetails-root {\n          padding: 10px;\n          padding-top: 4px;\n        }\n\n        &:before {\n          opacity: 0;\n        }\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n        ", "\n      }\n    "])), shadows === null || shadows === void 0 ? void 0 : shadows.none, typography === null || typography === void 0 ? void 0 : typography.fontFamily, useDivider ? border === null || border === void 0 ? void 0 : border.gray[300] : "none", togglePosition === "left" && leftPosition(props));
+    return react.css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n      &.MuiAccordion-root {\n        box-shadow: ", ";\n        font-family: ", ";\n        border-bottom: ", ";\n        height: fit-content;\n\n        & .MuiAccordionSummary-root {\n          padding: 10px;\n          min-height: 40px;\n\n          &.Mui-expanded {\n            min-height: unset;\n          }\n\n          & .MuiAccordionSummary-expandIcon,\n          & .MuiAccordionSummary-expandIconWrapper {\n            padding: 0;\n            align-self: flex-start;\n          }\n        }\n\n        .MuiAccordionDetails-root {\n          padding: 10px;\n          padding-top: 4px;\n        }\n\n        &:before {\n          opacity: 0;\n        }\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n        ", "\n      }\n    "], ["\n      &.MuiAccordion-root {\n        box-shadow: ", ";\n        font-family: ", ";\n        border-bottom: ", ";\n        height: fit-content;\n\n        & .MuiAccordionSummary-root {\n          padding: 10px;\n          min-height: 40px;\n\n          &.Mui-expanded {\n            min-height: unset;\n          }\n\n          & .MuiAccordionSummary-expandIcon,\n          & .MuiAccordionSummary-expandIconWrapper {\n            padding: 0;\n            align-self: flex-start;\n          }\n        }\n\n        .MuiAccordionDetails-root {\n          padding: 10px;\n          padding-top: 4px;\n        }\n\n        &:before {\n          opacity: 0;\n        }\n\n        &.Mui-expanded {\n          margin: 0;\n        }\n        ", "\n      }\n    "])), shadows === null || shadows === void 0 ? void 0 : shadows.none, typography === null || typography === void 0 ? void 0 : typography.fontFamily, useDivider ? border === null || border === void 0 ? void 0 : border.gray[300] : "none", togglePosition === "left" && leftPosition(props));
 });
 var leftPosition = function (props) {
     var spaces = getSpaces(props);
-    return react.css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n    &.MuiAccordion-root {\n      & .MuiAccordionSummary-root {\n        flex-direction: row-reverse;\n\n        .MuiAccordionSummary-content {\n          padding-left: ", "px;\n        }\n\n        .MuiAccordionSummary-expandIconWrapper {\n          margin: 0;\n          transform: rotate(-90deg);\n          align-self: flex-start;\n          margin-top: ", "px;\n\n          &.Mui-expanded {\n            transform: rotate(0deg);\n          }\n        }\n      }\n\n      & .MuiAccordionDetails-root {\n        padding-left: 30px;\n      }\n    }\n  "], ["\n    &.MuiAccordion-root {\n      & .MuiAccordionSummary-root {\n        flex-direction: row-reverse;\n\n        .MuiAccordionSummary-content {\n          padding-left: ", "px;\n        }\n\n        .MuiAccordionSummary-expandIconWrapper {\n          margin: 0;\n          transform: rotate(-90deg);\n          align-self: flex-start;\n          margin-top: ", "px;\n\n          &.Mui-expanded {\n            transform: rotate(0deg);\n          }\n        }\n      }\n\n      & .MuiAccordionDetails-root {\n        padding-left: 30px;\n      }\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
+    return react.css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n    &.MuiAccordion-root {\n      & .MuiAccordionSummary-root {\n        flex-direction: row-reverse;\n\n        .MuiAccordionSummary-content {\n          padding-left: ", "px;\n        }\n\n        .MuiAccordionSummary-expandIconWrapper {\n          margin: 0;\n          transform: rotate(-90deg);\n          align-self: flex-start;\n          margin-top: ", "px;\n\n          &.Mui-expanded {\n            transform: rotate(0deg);\n          }\n        }\n      }\n\n      & .MuiAccordionDetails-root {\n        padding-left: 30px;\n      }\n    }\n  "], ["\n    &.MuiAccordion-root {\n      & .MuiAccordionSummary-root {\n        flex-direction: row-reverse;\n\n        .MuiAccordionSummary-content {\n          padding-left: ", "px;\n        }\n\n        .MuiAccordionSummary-expandIconWrapper {\n          margin: 0;\n          transform: rotate(-90deg);\n          align-self: flex-start;\n          margin-top: ", "px;\n\n          &.Mui-expanded {\n            transform: rotate(0deg);\n          }\n        }\n      }\n\n      & .MuiAccordionDetails-root {\n        padding-left: 30px;\n      }\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
 };
-var templateObject_1$O, templateObject_2$v, templateObject_3$m;
+var templateObject_1$Q, templateObject_2$x, templateObject_3$o;
 
 /**
  * @see https://mui.com/material-ui/react-accordion/
@@ -3180,7 +3180,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 = styles.styled(material.Alert)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledAlert = styles.styled(material.Alert)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var colors = getColors(props);
     var spacings = getSpaces(props);
     var shadows = getShadows(props);
@@ -3191,7 +3191,7 @@ var StyledAlert = styles.styled(material.Alert)(templateObject_1$N || (templateO
     var backgroundColor = colors && colors[severity][100];
     return "\n      background-color: ".concat(backgroundColor, ";\n      margin: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px 0;\n      color: ").concat(defaultTheme.palette.text.primary, ";\n      padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px\n        ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px 9px;\n      background-color: ").concat(alertColor, ";\n      &.elevated {\n        border-left: 5px solid;\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.s, ";\n        border-color: ").concat(borderColor, ";\n      }\n      .MuiAlert-icon {\n        path {\n          fill: ").concat(iconColor, ";\n        }\n      }\n    ");
 });
-var templateObject_1$N;
+var templateObject_1$P;
 
 /**
  * @see https://mui.com/material-ui/react-alert/
@@ -3204,6 +3204,7 @@ var noop = function () { };
 var toKebabCase = function (str) {
     return str.replace(/[\s_]+/g, "-").toLowerCase();
 };
+var EMPTY_OBJECT = {};
 
 var _a;
 var SDSWarningTypes;
@@ -3265,23 +3266,23 @@ var showWarningIfFirstOccurence = function (warningType) {
 var isOn = function (props) {
     var sdsType = props.sdsType;
     var colors = getColors(props);
-    return react.css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), sdsType !== "tertiary" &&
+    return react.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), sdsType !== "tertiary" &&
         "\n      color: ".concat(sdsType === "primary" ? colors === null || colors === void 0 ? void 0 : colors.primary[600] : colors === null || colors === void 0 ? void 0 : colors.primary[400], ";\n\n      &:hover {\n        color: ").concat(colors === null || colors === void 0 ? void 0 : colors.primary[600], ";\n      }\n    "));
 };
 var isDisabled$1 = function (props) {
     var colors = getColors(props);
-    return react.css(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), colors === null || colors === void 0 ? void 0 : colors.gray[300]);
+    return react.css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), colors === null || colors === void 0 ? void 0 : colors.gray[300]);
 };
 var primary$2 = function (props) {
     var colors = getColors(props);
     var sdsSize = props.sdsSize;
-    return react.css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n  "])), colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.gray[200], sdsSize === "small"
+    return react.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n  "])), colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.gray[200], sdsSize === "small"
         ? colors === null || colors === void 0 ? void 0 : colors.primary[600]
         : colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.primary[600]);
 };
 var secondary$2 = function (props) {
     var colors = getColors(props);
-    return react.css(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n    color: ", ";\n\n    &:hover,\n    &:active {\n      background: none;\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    &:hover,\n    &:active {\n      background: none;\n      color: ", ";\n    }\n  "])), colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.primary[400]);
+    return react.css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n    color: ", ";\n\n    &:hover,\n    &:active {\n      background: none;\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    &:hover,\n    &:active {\n      background: none;\n      color: ", ";\n    }\n  "])), colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.primary[400]);
 };
 var tertiary = function (props) {
     var colors = getColors(props);
@@ -3304,7 +3305,7 @@ var large = function (props) {
     var iconSizes = getIconSizes(props);
     return react.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      ", "\n    }\n  "], ["\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      ", "\n    }\n  "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, sdsType === "primary" ? "margin: 5px;" : "");
 };
-var doNotForwardProps$k = [
+var doNotForwardProps$m = [
     "on",
     "sdsSize",
     "sdsType",
@@ -3312,12 +3313,12 @@ var doNotForwardProps$k = [
     "sdsIconProps",
 ];
 var StyledButtonIcon$2 = styles.styled(material.IconButton, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
 })(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  padding: 0;\n\n  :focus-visible {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  ", "\n"], ["\n  padding: 0;\n\n  :focus-visible {\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n  }\n\n  ", "\n"])), function (props) {
     var on = props.on, disabled = props.disabled, sdsSize = props.sdsSize, sdsType = props.sdsType;
     return react.css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), on && isOn(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
 });
-var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$1;
+var templateObject_1$O, templateObject_2$w, templateObject_3$n, templateObject_4$i, templateObject_5$e, templateObject_6$b, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$1;
 
 var ButtonIconSizeToSdsIconSize = {
     large: "xl",
@@ -3337,17 +3338,17 @@ var sdsPropNames$4 = ["sdsStyle", "sdsStage", "intent", "handleSubmit"];
 var rounded$3 = function (props) {
     var corners = getCorners(props);
     var borders = getBorders(props);
-    return react.css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n    .", " .", " {\n      border-radius: ", "px;\n      border: ", ";\n    }\n  "], ["\n    .", " .", " {\n      border-radius: ", "px;\n      border: ", ";\n    }\n  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, borders === null || borders === void 0 ? void 0 : borders.gray[400]);
+    return react.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n    .", " .", " {\n      border-radius: ", "px;\n      border: ", ";\n    }\n  "], ["\n    .", " .", " {\n      border-radius: ", "px;\n      border: ", ";\n    }\n  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, borders === null || borders === void 0 ? void 0 : borders.gray[400]);
 };
 var error$3 = function (props) {
     var borders = getBorders(props);
     var colors = getColors(props);
-    return react.css(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], material.inputAdornmentClasses.root, material.buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
+    return react.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], material.inputAdornmentClasses.root, material.buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
 };
 var warning$3 = function (props) {
     var borders = getBorders(props);
     var colors = getColors(props);
-    return react.css(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], material.inputAdornmentClasses.root, material.buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
+    return react.css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], material.inputAdornmentClasses.root, material.buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
 };
 var userInput$2 = function (props) {
     var intent = props.intent;
@@ -3359,7 +3360,7 @@ var userInput$2 = function (props) {
             ? borders === null || borders === void 0 ? void 0 : borders.warning[400]
             : borders === null || borders === void 0 ? void 0 : borders.primary[400];
     var color = intent === "default" ? colors === null || colors === void 0 ? void 0 : colors.primary[400] : colors === null || colors === void 0 ? void 0 : colors.gray[500];
-    return react.css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", " svg {\n      color: ", ";\n    }\n  "], ["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", " svg {\n      color: ", ";\n    }\n  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border, material.inputAdornmentClasses.root, color);
+    return react.css(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", " svg {\n      color: ", ";\n    }\n  "], ["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", " svg {\n      color: ", ";\n    }\n  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border, material.inputAdornmentClasses.root, color);
 };
 var disabledStyled$2 = function (props) {
     var borders = getBorders(props);
@@ -3383,10 +3384,10 @@ var StyledSearchBase = styles.styled(material.TextField, {
     return react.css(templateObject_7$7 || (templateObject_7$7 = __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        margin-right: ", "px;\n      }\n\n      .", " {\n        .", " {\n          border: ", ";\n        }\n\n        &:hover .input-search-clear-icon,\n        &:focus-within .input-search-clear-icon {\n          opacity: ", ";\n        }\n      }\n\n      .", " {\n        padding: ", "px ", "px;\n        height: 34px;\n        box-sizing: border-box;\n        background-color: #fff;\n      }\n\n      .", ":hover\n        .", " {\n        border: ", ";\n      }\n\n      .", ".", " {\n        .", " {\n          border: ", ";\n        }\n\n        .", " .", ":last-of-type {\n          cursor: default;\n          svg {\n            color: ", ";\n          }\n        }\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        margin-right: ", "px;\n      }\n\n      .", " {\n        .", " {\n          border: ", ";\n        }\n\n        &:hover .input-search-clear-icon,\n        &:focus-within .input-search-clear-icon {\n          opacity: ", ";\n        }\n      }\n\n      .", " {\n        padding: ", "px ", "px;\n        height: 34px;\n        box-sizing: border-box;\n        background-color: #fff;\n      }\n\n      .", ":hover\n        .", " {\n        border: ", ";\n      }\n\n      .", ".", " {\n        .", " {\n          border: ", ";\n        }\n\n        .", " .", ":last-of-type {\n          cursor: default;\n          svg {\n            color: ", ";\n          }\n        }\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), spacings === null || spacings === void 0 ? void 0 : spacings.m, spacings === null || spacings === void 0 ? void 0 : spacings.m, spacings === null || spacings === void 0 ? void 0 : spacings.xl, spacings === null || spacings === void 0 ? void 0 : spacings.s, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[400], value ? 1 : 0, material.inputBaseClasses.inputSizeSmall, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.l, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[500], material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.primary[400], material.inputAdornmentClasses.root, material.buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.primary[400], sdsStyle === "rounded" && rounded$3(props), intent === "error" && error$3(props), intent === "warning" && warning$3(props), disabled && disabledStyled$2(props), sdsStage === "userInput" && userInput$2(props));
 });
 var StyledInputAdornment = styles.styled(material.InputAdornment)(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var templateObject_1$L, templateObject_2$t, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$a, templateObject_7$7, templateObject_8$5, templateObject_9$2;
+var templateObject_1$N, templateObject_2$v, templateObject_3$m, templateObject_4$h, templateObject_5$d, templateObject_6$a, templateObject_7$7, templateObject_8$5, templateObject_9$2;
 
 var fontBodyXs$4 = fontBody("xs");
-var StyledMenuItem$1 = styles.styled(material.MenuItem)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledMenuItem$1 = styles.styled(material.MenuItem)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var selected = props.selected;
     var colors = getColors(props);
     var fontWeights = getFontWeights(props);
@@ -3394,7 +3395,7 @@ var StyledMenuItem$1 = styles.styled(material.MenuItem)(templateObject_1$K || (t
     var primary = colors === null || colors === void 0 ? void 0 : colors.primary[400];
     return "\n      padding: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.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(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n\n          &[aria-selected=\"true\"] {\n            background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n          }\n        }\n      }\n\n      &.MuiMenuItem-root .MuiSvgIcon-root {\n        align-self: flex-start;\n      }\n\n      &.MuiMenuItem-root .Mui-disabled {\n        opacity: 1 !important;\n      }\n\n      &.MuiAutocomplete-option[aria-selected=\"true\"] {\n        &:hover {\n          background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], " !important;\n        }\n\n        svg.check-icon {\n          color: ").concat(selected ? primary : colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n        }\n      }\n\n      &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n        opacity: 1;\n      }\n\n      &:hover {\n        background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n        svg.check-icon {\n          color: ").concat(selected ? primary : colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n        }\n      }\n\n      &.Mui-selected.MuiListItem-root.MuiListItem-button {\n        background-color: white;\n        &:hover {\n          background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\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(primary, ";\n        }\n\n        &:active {\n          svg.check-icon {\n            color: ").concat(primary, ";\n          }\n\n          .primary-text {\n            font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n          }\n        }\n      }\n    ");
 });
-var ContentWrapper = styles.styled("span")(templateObject_2$s || (templateObject_2$s = __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 = styles.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 disabledStyles = function (props) {
     var disabled = props.disabled;
     if (!disabled)
@@ -3402,12 +3403,12 @@ var disabledStyles = function (props) {
     var colors = getColors(props);
     return "\n    color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n    cursor: default;\n  ");
 };
-var TextWrapper = styles.styled("span")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n"])), fontBodyXs$4, function (props) {
+var TextWrapper = styles.styled("span")(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n"])), fontBodyXs$4, function (props) {
     var _a;
     var palette = getPalette(props);
     return "\n      color: ".concat((_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, ";\n      display: flex;\n      white-space: pre-wrap;\n    ");
 }, disabledStyles);
-var StyledMenuItemIcon = styles.styled("span")(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledMenuItemIcon = styles.styled("span")(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var disabled = props.disabled;
     var spacings = getSpaces(props);
     var iconSizes = getIconSizes(props);
@@ -3439,7 +3440,7 @@ var StyledMinus = styles.styled(iconsMaterial.Remove, {
     var selectedColor = disabled ? colors === null || colors === void 0 ? void 0 : colors.gray[300] : colors === null || colors === void 0 ? void 0 : colors.primary[400];
     return "\n      color: ".concat(selected ? selectedColor : "transparent", ";\n      padding: 0;\n      height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n      width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n\n      &.MuiCheckbox-colorPrimary.Mui-checked:hover {\n        background-color: transparent;\n      }\n    ");
 });
-var templateObject_1$K, templateObject_2$s, templateObject_3$j, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$6, templateObject_8$4, templateObject_9$1;
+var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$g, templateObject_5$c, templateObject_6$9, templateObject_7$6, templateObject_8$4, templateObject_9$1;
 
 /**
  * @see https://mui.com/material-ui/react-menu/
@@ -3518,74 +3519,98 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
                  * (masoudmanson): This prevents the browser's default auto completion
                  * menu from being displayed for the InputSearch.
                  */
-                autoComplete: "off" }, rest))] }));
+                autoComplete: "one-time-code" }, rest))] }));
 });
 
-var doNotForwardProps$j = [
+var doNotForwardProps$l = [
     "count",
     "keepSearchOnSelect",
     "search",
     "InputBaseProps",
+    "PopperBaseProps",
+    "onClickAway",
 ];
-var StyledAutocomplete$1 = styles.styled(material.Autocomplete, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
-})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  + .MuiAutocomplete-popper\n    > .MuiAutocomplete-paper\n    .MuiAutocomplete-groupLabel {\n    ", "\n  }\n\n  ", "\n"], ["\n  + .MuiAutocomplete-popper\n    > .MuiAutocomplete-paper\n    .MuiAutocomplete-groupLabel {\n    ", "\n  }\n\n  ", "\n"])), fontCapsXxxxs, function (props) {
+var StyledAutocompleteBase = styles.styled(material.Autocomplete, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
+})(templateObject_1$L || (templateObject_1$L = __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, fontCapsXxxs, function (props) {
     var search = props.search;
     var spacings = getSpaces(props);
     var colors = getColors(props);
     var borders = getBorders(props);
-    return "\n      ".concat(!search && "height: 0", ";\n\n      .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n        padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px 0 0;\n\n        .MuiAutocomplete-input {\n          padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n        }\n      }\n\n      & + .MuiAutocomplete-popper > .MuiAutocomplete-paper {\n        ").concat(search ? "padding-left: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px !important;") : "", "\n\n        .MuiAutocomplete-listbox {\n          max-height: 40vh;\n          padding-top: 0;\n          padding-bottom: 0;\n          padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n\n          .MuiAutocomplete-option {\n            min-height: unset;\n          }\n\n          .MuiAutocomplete-option.Mui-focused {\n            background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n          }\n\n          .MuiAutocomplete-option[aria-selected=\"true\"] {\n            background-color: white;\n          }\n\n          .MuiAutocomplete-option[aria-disabled=\"true\"] {\n            opacity: 1;\n          }\n\n          .MuiAutocomplete-option[aria-selected=\"true\"].Mui-focused {\n            background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n          }\n\n          & > li:last-child .MuiAutocomplete-groupUl {\n            border-bottom: none;\n            margin-bottom: 0;\n          }\n        }\n\n        .MuiAutocomplete-groupLabel {\n          top: 0;\n          color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n          padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0;\n        }\n\n        .MuiAutocomplete-groupUl {\n          margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n          position: relative;\n          padding: 0 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px 0 0;\n          border-bottom: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[200], ";\n\n          & li:last-of-type {\n            position: relative;\n            margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n          }\n        }\n      }\n    ");
+    return "\n      ".concat(!search && "height: 0", ";\n\n      .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n        padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px 0 0;\n\n        .MuiAutocomplete-input {\n          padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "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(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px 0 0;\n\n          .").concat(material.autocompleteClasses.option, " {\n            min-height: unset;\n\n            &.").concat(material.autocompleteClasses.focused, " {\n              background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n            }\n\n            &[aria-selected=\"true\"] {\n              background-color: white;\n            }\n\n            &[aria-disabled=\"true\"] {\n              opacity: 1;\n            }\n\n            &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n              background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\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(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n          padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n        }\n\n        .").concat(material.autocompleteClasses.groupUl, " {\n          position: relative;\n          margin: 0 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n          border-bottom: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[200], ";\n          padding-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n\n          & li:last-of-type {\n            position: relative;\n          }\n        }\n\n        .").concat(material.autocompleteClasses.noOptions, " {\n          padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n          margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n        }\n\n        .").concat(material.autocompleteClasses.loading, " {\n          padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px 0 0;\n        }\n      }\n    ");
 });
 var InputBaseWrapper$1 = styles.styled("div", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
-})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
+})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var search = props.search;
     if (!search) {
         // (thuang): We cannot use `display: none;` here, since
         // the component needs to be in the DOM to handle backdrop
         // click to close the menu
-        return "\n        border: 0;\n        padding: 0;\n\n        white-space: nowrap;\n\n        clip-path: inset(100%);\n        clip: rect(0 0 0 0);\n        overflow: hidden;\n        margin: 0;\n      ";
+        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      ";
     }
 });
 var StyledMenuInputSearch$1 = styles.styled(InputSearch, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
-})(templateObject_3$i || (templateObject_3$i = __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) {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
+})(templateObject_3$k || (templateObject_3$k = __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$2 = styles.styled(material.Paper)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledPaper$3 = styles.styled(material.Paper)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spacings = getSpaces(props);
     var borders = getBorders(props);
     var corners = getCorners(props);
     var shadows = getShadows(props);
-    return "\n      padding: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px 0 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n      background-color: white;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[100], ";\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    ");
+    return "\n      padding: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ;\n      background-color: white;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[100], ";\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 = styles.styled("div")(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var colors = getColors(props);
     return "\n      color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n      white-space: pre-wrap;\n    ");
 });
 var StyledMenuItemText = styles.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 templateObject_1$J, templateObject_2$r, templateObject_3$i, templateObject_4$e, templateObject_5$b, templateObject_6$8;
+var templateObject_1$L, templateObject_2$t, templateObject_3$k, templateObject_4$f, templateObject_5$b, templateObject_6$8;
 
-var Autocomplete = function (props) {
-    var _a = props.multiple, multiple = _a === void 0 ? false : _a, _b = props.disableCloseOnSelect, disableCloseOnSelect = _b === void 0 ? multiple : _b, _c = props.getOptionLabel, getOptionLabel = _c === void 0 ? defaultGetOptionLabel : _c, _d = props.InputBaseProps, InputBaseProps = _d === void 0 ? {} : _d, _e = props.isOptionEqualToValue, isOptionEqualToValue = _e === void 0 ? defaultIsOptionEqualToValue : _e, _f = props.keepSearchOnSelect, keepSearchOnSelect = _f === void 0 ? false : _f, label = props.label, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.PaperComponent, PaperComponent = _l === void 0 ? StyledPaper$2 : _l, _m = props.renderOption, renderOption = _m === void 0 ? defaultRenderOption : _m, _o = props.renderTags, renderTags = _o === void 0 ? defaultRenderTags : _o, _p = props.search, search = _p === void 0 ? false : _p;
-    var _q = React.useState(""), inputValue = _q[0], setInputValue = _q[1];
+var AutocompleteBase = function (props) {
+    var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q;
+    var theme = styles.useTheme();
+    var _r = React.useState(""), inputValue = _r[0], setInputValue = _r[1];
+    return (jsxRuntime.jsx(StyledAutocompleteBase, __assign({ clearOnBlur: clearOnBlur, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: StyledPaper$3, PopperComponent: useDefaultPopperComponent(), renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: defaultRenderInput, multiple: multiple }, props, { 
+        // (masoudmanson): For multiple options (multiple = true), setting blurOnSelect to false
+        // keeps the dropdown open after selecting an option. This feature enhances user experience
+        // by preventing the dropdown from closing, enabling users to select multiple options
+        // without having to reopen the menu repeatedly.
+        blurOnSelect: multiple ? false : blurOnSelect, 
+        // (masoudmanson): Given the necessity of maintaining consistent onBlur functionality,
+        // and clearing the input value on blur, it's crucial to include the onBlur handler
+        // after spreading other props. Furthermore, within the defaultOnBlur function, the
+        // actual onBlur function is invoked for completeness.
+        onBlur: defaultOnBlur, 
+        // (masoudmanson): To ensure component-level actions (changing the input field value)
+        // trigger upon input changes, it's crucial to position the onInputChange handler after
+        // spreading the other props. Furthermore, within the defaultOnInputChange function,
+        // the provided onInputChange from props is called at the end to emit the input changes
+        // to the user.
+        onInputChange: defaultOnInputChange })));
     /**
      * (masoudmanson): Using a custom Popper or Paper with the Autocomplete
-     * without a useCalback results in scroll jumps while selecting an option!
+     * without a useCallback results in scroll jumps while selecting an option!
      */
-    var defaultPopperComponent = React.useCallback(function (popperProps) {
-        return (jsxRuntime.jsx(material.Popper, __assign({ modifiers: [
-                {
-                    enabled: true,
-                    name: "offset",
-                    options: {
-                        offset: [0, 8],
+    function useDefaultPopperComponent() {
+        return React.useCallback(function (popperProps) {
+            var _a;
+            return (jsxRuntime.jsx(material.Popper, __assign({ modifiers: [
+                    {
+                        enabled: true,
+                        name: "offset",
+                        options: {
+                            offset: [0, (_a = theme.app) === null || _a === void 0 ? void 0 : _a.spacing.s],
+                        },
                     },
-                },
-            ] }, popperProps)));
-    }, []);
-    return (jsxRuntime.jsx(StyledAutocomplete$1, __assign({ clearOnBlur: false, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: PaperComponent, PopperComponent: defaultPopperComponent, renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: function (params) { return (jsxRuntime.jsx(InputBaseWrapper$1, { search: search, children: jsxRuntime.jsx(StyledMenuInputSearch$1, __assign({ id: "location-search", label: label, placeholder: label, ref: params.InputProps.ref, search: search, 
+                ] }, popperProps)));
+        }, []);
+    }
+    function defaultRenderInput(params) {
+        return (jsxRuntime.jsx(InputBaseWrapper$1, { search: search, children: jsxRuntime.jsx(StyledMenuInputSearch$1, __assign({ id: "location-search", label: label, placeholder: label, ref: params.InputProps.ref, search: search, 
                 // (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
                 onKeyDown: function (event) {
                     if (event.key === "Backspace") {
@@ -3600,31 +3625,35 @@ var Autocomplete = function (props) {
                                     sdsType: "iconButton",
                                 }, sdsIcon: "xMark" })), jsxRuntime.jsx(ButtonIcon, { "aria-label": "search-button", sdsType: "secondary", sdsSize: "small", sdsIconProps: {
                                     sdsType: "interactive",
-                                }, sdsIcon: "search" })] })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onBlur: function (event) {
-            var _a;
+                                }, sdsIcon: "search" })] })), inputProps: params.inputProps }) }, InputBaseProps)) }));
+    }
+    function defaultOnBlur(event) {
+        var _a;
+        if (clearOnBlur)
             setInputValue("");
-            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
-        }, onInputChange: function (event, value, reason) {
-            if (!multiple) {
-                if (reason === "input") {
-                    setInputValue(value);
-                }
-                else {
-                    setInputValue("");
-                }
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    }
+    function defaultOnInputChange(event, value, reason) {
+        if (!multiple) {
+            if (reason === "input") {
+                setInputValue(value);
             }
             else {
-                if (reason === "clear") {
-                    setInputValue("");
-                }
-                else if (reason === "input" ||
-                    (reason === "reset" && !keepSearchOnSelect)) {
-                    setInputValue(value);
-                }
+                setInputValue("");
             }
-            if (onInputChange)
-                onInputChange(event, value, reason);
-        } })));
+        }
+        else {
+            if (reason === "clear") {
+                setInputValue("");
+            }
+            else if (reason === "input" ||
+                (reason === "reset" && !keepSearchOnSelect)) {
+                setInputValue(value);
+            }
+        }
+        if (onInputChange)
+            onInputChange(event, value, reason);
+    }
     function clearInput() {
         setInputValue("");
         /**
@@ -3660,6 +3689,206 @@ var Autocomplete = function (props) {
     }
 };
 
+var StyledColumn = styles.styled("div")(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var _a = props.width, width = _a === void 0 ? 280 : _a;
+    var colors = getColors(props);
+    var spacings = getSpaces(props);
+    return "\n      position: relative;\n      width: ".concat(width, "px;\n\n      &:not(:last-child) {\n        border-right: solid 1px ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[200], ";\n        margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.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 = styles.styled("p")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontCapsXxxs, function (props) {
+    var spacings = getSpaces(props);
+    var colors = getColors(props);
+    var typography = getTypography(props);
+    return "\n      font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n      color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n      padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n      margin: 0;\n    ");
+});
+var StyledColumnIcon = styles.styled("span")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var spacings = getSpaces(props);
+    var colors = getColors(props);
+    var iconSizes = getIconSizes(props);
+    return "\n      background-color: white;\n      position: absolute;\n      right: -".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n      top: -2px;\n      padding-bottom: 2px;\n\n      svg {\n        color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n        width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, "px;\n        height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, "px;\n      }\n    ");
+});
+var templateObject_1$K, templateObject_2$s, templateObject_3$j;
+
+var AutocompleteGroup = function (props) {
+    var autocompleteProps = props.autocompleteProps, onValueChange = props.onValueChange, propValue = props.value, multiple = props.multiple, label = props.label, InputBaseProps = props.InputBaseProps, popperOpen = props.popperOpen, inputValue = props.inputValue, PaperComponent = props.PaperComponent, rest = __rest(props, ["autocompleteProps", "onValueChange", "value", "multiple", "label", "InputBaseProps", "popperOpen", "inputValue", "PaperComponent"]);
+    var name = autocompleteProps.name, width = autocompleteProps.width, icon = autocompleteProps.icon, propProps = autocompleteProps.props;
+    var _a = React.useState(getInitialValue(multiple, propValue)), value = _a[0], setValue = _a[1];
+    var _b = React.useState(getInitialValue(multiple, propValue)), pendingValue = _b[0], setPendingValue = _b[1];
+    React.useEffect(function () {
+        if (propValue !== undefined) {
+            setValue(propValue);
+        }
+    }, [propValue]);
+    var handleChange = React.useCallback(function (event, newValue, reason, details) {
+        var _a;
+        (_a = propProps === null || propProps === void 0 ? void 0 : propProps.onChange) === null || _a === void 0 ? void 0 : _a.call(propProps, event, newValue, reason, details);
+        onValueChange(name, event, newValue, reason, details);
+        if (multiple) {
+            setPendingValue(newValue);
+        }
+        else {
+            if (newValue &&
+                !Array.isArray(newValue) &&
+                Object.prototype.hasOwnProperty.call(newValue, "name")) {
+                setValue(newValue);
+            }
+        }
+    }, [name, multiple, onValueChange, propProps]);
+    return (jsxRuntime.jsxs(StyledColumn, { width: width, className: "SdsAutocompleteMultiColumn-column-root", children: [icon && (jsxRuntime.jsx(StyledColumnIcon, { className: "SdsAutocompleteMultiColumn-column-relation-icon", children: icon })), jsxRuntime.jsx(StyledColumnTitle, { className: "SdsAutocompleteMultiColumn-column-title", children: name }), jsxRuntime.jsx(AutocompleteBase, __assign({ label: label, InputBaseProps: InputBaseProps, open: popperOpen, multiple: multiple, inputValue: inputValue, options: autocompleteProps.options, onChange: handleChange, value: multiple ? pendingValue : value, search: false, PaperComponent: PaperComponent }, rest, autocompleteProps.props, { 
+                // (masoudmanson): groupBy option is disabled on MultiColumn dropdowns
+                groupBy: undefined }))] }));
+    function getInitialValue(isMultiple, customValue) {
+        if (customValue !== undefined) {
+            return customValue;
+        }
+        return isMultiple
+            ? []
+            : null;
+    }
+};
+
+var doNotForwardProps$k = [
+    "anchorEl",
+    "count",
+    "keepSearchOnSelect",
+    "search",
+    "InputBaseProps",
+    "title",
+    "PopperBaseProps",
+    "onClickAway",
+    "ClickAwayListenerProps",
+];
+var StyledPopper$2 = styles.styled(material.Popper, {
+    shouldForwardProp: function (prop) {
+        return !doNotForwardProps$k.includes(prop) || prop === "anchorEl";
+    },
+})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var borders = getBorders(props);
+    var corners = getCorners(props);
+    var shadows = getShadows(props);
+    var spacings = getSpaces(props);
+    return "\n      background-color: white;\n      border: ".concat(borders === null || borders === void 0 ? void 0 : borders.gray[100], ";\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(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.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(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px 0 0;\n        }\n      }\n    ");
+});
+var StyledPaper$2 = styles.styled(material.Paper, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
+})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  box-shadow: none;\n  margin: 0;\n  border-radius: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n"], ["\n  box-shadow: none;\n  margin: 0;\n  border-radius: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n"])));
+var StyledAutocompleteGroupWrapper = styles.styled("div")(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var StyledAutocompleteInput = styles.styled(InputSearch, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
+})(templateObject_4$e || (templateObject_4$e = __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;
+    return !search && "height: 0; display: none;";
+}, function (_a) {
+    var search = _a.search;
+    return (search ? "auto" : "transparent");
+});
+var templateObject_1$J, templateObject_2$r, templateObject_3$i, templateObject_4$e;
+
+var AutocompleteMultiColumn = function (props) {
+    var _a;
+    var InputBaseProps = props.InputBaseProps, _b = props.open, open = _b === void 0 ? false : _b, _c = props.PopperPlacement, PopperPlacement = _c === void 0 ? "bottom-start" : _c, PopperBaseProps = props.PopperBaseProps, _d = props.search, search = _d === void 0 ? false : _d, _e = props.label, label = _e === void 0 ? "Search" : _e, _f = props.onClickAway, onClickAway = _f === void 0 ? defaultOnClickAway : _f, ClickAwayListenerProps = props.ClickAwayListenerProps, options = props.options, onInputChange = props.onInputChange, onBlur = props.onBlur, multiple = props.multiple, parentInitialValue = props.value, onChange = props.onChange, _g = props.PopperComponent, PopperComponent = _g === void 0 ? StyledPopper$2 : _g, rest = __rest(props, ["InputBaseProps", "open", "PopperPlacement", "PopperBaseProps", "search", "label", "onClickAway", "ClickAwayListenerProps", "options", "onInputChange", "onBlur", "multiple", "value", "onChange", "PopperComponent"]);
+    var theme = styles.useTheme();
+    var _h = React.useState(""), inputValue = _h[0], setInputValue = _h[1];
+    var _j = React.useState(open), popperOpen = _j[0], setPopperOpen = _j[1];
+    var anchorRef = React.useRef(null);
+    var _k = React.useState(null), anchorEl = _k[0], setAnchorEl = _k[1];
+    React.useEffect(function () {
+        setAnchorEl(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
+    }, [anchorRef]);
+    var _l = React.useState({}), autocompleteMultiColumnValue = _l[0], setAutocompleteMultiColumnValue = _l[1];
+    React.useEffect(function () {
+        if (parentInitialValue !== undefined) {
+            setAutocompleteMultiColumnValue(parentInitialValue);
+        }
+    }, [options, parentInitialValue]);
+    var defaultOnValueChange = function (column, event, val, reason, details) {
+        var _a;
+        setAutocompleteMultiColumnValue(function (prev) {
+            var _a;
+            return __assign(__assign({}, prev), (_a = {}, _a[column] = val, _a));
+        });
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, __assign(__assign({}, autocompleteMultiColumnValue), (_a = {}, _a[column] = val, _a)), reason, details);
+    };
+    return (jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledAutocompleteInput, __assign({ id: "location-search", label: label, placeholder: label, value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onBlur: handleInputBlur, ref: anchorRef, search: search, onKeyDown: handleInputKeyDown, InputProps: __assign(__assign({}, InputBaseProps === null || InputBaseProps === void 0 ? void 0 : InputBaseProps.ref), { endAdornment: (jsxRuntime.jsxs(StyledInputAdornment, { position: "end", children: [inputValue && (jsxRuntime.jsx(ButtonIcon, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "primary", sdsSize: "small", sdsIconProps: {
+                                        sdsType: "iconButton",
+                                    }, sdsIcon: "xMark", onClick: clearInput })), jsxRuntime.jsx(ButtonIcon, { "aria-label": "search-button", sdsType: "secondary", sdsSize: "small", sdsIconProps: {
+                                        sdsType: "interactive",
+                                    }, sdsIcon: "search" })] })), 
+                        /**
+                         * (thuang): Works with css caret-color: "transparent" to hide
+                         * mobile keyboard
+                         */
+                        inputMode: "text" }) }, InputBaseProps)), anchorEl && (jsxRuntime.jsx(PopperComponent, __assign({ modifiers: [
+                        {
+                            name: "offset",
+                            options: {
+                                offset: [0, (_a = theme.app) === null || _a === void 0 ? void 0 : _a.spacing.s],
+                            },
+                        },
+                    ], open: popperOpen, anchorEl: anchorEl, placement: PopperPlacement, disablePortal: true }, PopperBaseProps, { children: jsxRuntime.jsx(StyledAutocompleteGroupWrapper, { className: "SdsAutocompleteMultiColumn-wrapper", children: options.map(function (autocompleteOptions) { return (jsxRuntime.jsx(AutocompleteGroup, __assign({ autocompleteProps: autocompleteOptions, onValueChange: defaultOnValueChange, value: autocompleteMultiColumnValue
+                                ? autocompleteMultiColumnValue[autocompleteOptions.name]
+                                : undefined, multiple: multiple, label: label, InputBaseProps: InputBaseProps, popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
+    function clearInput() {
+        setInputValue("");
+        /**
+         * (masoudmanson): Because we are manually firing this event,
+         * we must build a onChange event to transmit the updated value to onChange listeners.
+         */
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange({ target: { value: "" } }, "", "clear");
+    }
+    function handleInputClick(_) {
+        if (popperOpen) {
+            setPopperOpen(false);
+        }
+        else {
+            setPopperOpen(true);
+        }
+    }
+    function handleInputChange(event) {
+        setInputValue(event.target.value);
+        if (onInputChange) {
+            if (event.target.value === "") {
+                onInputChange(event, "", "clear");
+            }
+            else {
+                onInputChange(event, event.target.value, "input");
+            }
+        }
+    }
+    function handleInputBlur(event) {
+        if (props.clearOnBlur)
+            setInputValue("");
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }
+    function defaultOnClickAway() {
+        setPopperOpen(false);
+    }
+    function handleInputKeyDown(event) {
+        // (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
+        if (event.key === "Backspace") {
+            event.stopPropagation();
+        }
+    }
+};
+
+var Autocomplete = function (props) {
+    var options = props.options, value = props.value, onChange = props.onChange, rest = __rest(props, ["options", "value", "onChange"]);
+    // Multi-column options
+    if (options && !!options[0] && "options" in options[0]) {
+        if (options.length > 1) {
+            return (jsxRuntime.jsx(AutocompleteMultiColumn, __assign({ options: options, value: value, onChange: onChange }, rest, { 
+                // (masoudmanson): groupBy option is disabled on MultiColumn dropdowns
+                groupBy: undefined, open: true })));
+        }
+        else {
+            return (jsxRuntime.jsx(AutocompleteBase, __assign({ options: options[0].options, value: value, onChange: onChange }, rest)));
+        }
+    }
+    else {
+        return (jsxRuntime.jsx(AutocompleteBase, __assign({ options: options, onChange: onChange, value: value }, rest)));
+    }
+};
+
 var Centered = styles.styled("div")(templateObject_1$I || (templateObject_1$I = __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 IconWrapper$1 = styles.styled("div")(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var iconSizes = getIconSizes(props);
@@ -3693,9 +3922,9 @@ var secondary$1 = function (props) {
     var colors = getColors(props);
     return "\n    background-color: ".concat(colors === null || colors === void 0 ? void 0 : colors.info[100], ";\n    color: black;\n  ");
 };
-var doNotForwardProps$i = ["sdsType", "textChild"];
+var doNotForwardProps$j = ["sdsType", "textChild"];
 var StyledBanner = styles.styled("div", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
 })(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 40px;\n  width: 100%;\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  height: 40px;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), fontBodyS$2, function (props) {
     var sdsType = props.sdsType;
     var typography = getTypography(props);
@@ -3814,9 +4043,9 @@ var ButtonDropdown = React.forwardRef(function (props, ref) {
 });
 
 var fontBodyXs$3 = fontBody("xs");
-var doNotForwardProps$h = ["calloutTitle", "collapsed"];
+var doNotForwardProps$i = ["calloutTitle", "collapsed"];
 var StyledCallout = styles.styled(material.Alert, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
 })(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyXs$3, function (props) {
     var colors = getColors(props);
     var spacings = getSpaces(props);
@@ -3994,7 +4223,7 @@ function mergeClass$1(_a) {
     return propClassName ? "".concat(propClassName, " ").concat(className) : className;
 }
 
-var doNotForwardProps$g = [
+var doNotForwardProps$h = [
     "icon",
     "iconVerticalAlign",
     "horizontalAlign",
@@ -4020,7 +4249,7 @@ var verticalAlignToFlexMap = {
     top: "flex-start",
 };
 var StyledTableData = styles.styled("td", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
 })(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
     var spacings = getSpaces(props);
@@ -4036,14 +4265,14 @@ var ShouldTruncate = function () {
 var StyledCellContent = styles.styled("div")(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var StyledCellContentWrapper = styles.styled("div")(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 var StyledCellIconWrapper = styles.styled("div", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
 })(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
     var spacings = getSpaces(props);
     return "\n      padding-right: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n      display: flex;\n      flex-direction: column;\n      justify-content: ").concat(verticalAlignToFlexMap[iconVerticalAlign], ";\n    ");
 });
 var PrimaryText = styles.styled("span", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
 })(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$2, function (props) {
     var _a = props.primaryTextWrapLineCount, primaryTextWrapLineCount = _a === void 0 ? 3 : _a;
     return "\n      display: block;\n      line-height: 20px;\n      ".concat(props.shouldTextWrap
@@ -4051,7 +4280,7 @@ var PrimaryText = styles.styled("span", {
         : ShouldTruncate(), "\n    ");
 });
 var SecondaryText = styles.styled("span", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
 })(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _a === void 0 ? 1 : _a;
     var colors = getColors(props);
@@ -4061,7 +4290,7 @@ var SecondaryText = styles.styled("span", {
         : ShouldTruncate(), "\n    ");
 });
 var TertiaryText = styles.styled("span", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
 })(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _a === void 0 ? 1 : _a;
     var colors = getColors(props);
@@ -4084,9 +4313,9 @@ var CellBasic = React.forwardRef(function (props, ref) {
     return (jsxRuntime.jsx(StyledTableData, __assign({ ref: ref }, props, { children: jsxRuntime.jsx(CellBasicContent, __assign({}, props)) })));
 });
 
-var doNotForwardProps$f = ["horizontalAlign", "verticalAlign"];
+var doNotForwardProps$g = ["horizontalAlign", "verticalAlign"];
 var StyledCellComponentData = styles.styled("td", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
 })(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$2, function (props) {
     var spacings = getSpaces(props);
     var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
@@ -4094,13 +4323,13 @@ var StyledCellComponentData = styles.styled("td", {
     return "\n        font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n        align-items: center;\n        text-align: ").concat(horizontalAlign, ";\n        vertical-align: ").concat(verticalAlign, ";\n        overflow: hidden;\n        padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n    ");
 });
 styles.styled("span", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
 })(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontHeaderS, function (props) {
     var typography = getTypography(props);
     return "\n        line-height: 24px;\n        font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n        display: block;\n       \n    ");
 });
 styles.styled("span", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
 })(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var typography = getTypography(props);
     var colors = getColors(props);
@@ -4118,7 +4347,7 @@ var contentPositionMapping = {
     left: "flex-start",
     right: "flex-end",
 };
-var doNotForwardProps$e = [
+var doNotForwardProps$f = [
     "active",
     "horizontalAlign",
     "shouldShowTooltipOnHover",
@@ -4127,7 +4356,7 @@ var doNotForwardProps$e = [
     "hideSortIcon",
 ];
 var StyledSortingIcon = styles.styled(ButtonIcon, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
 })(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a = props.active, active = _a === void 0 ? false : _a;
     var spacings = getSpaces(props);
@@ -4135,7 +4364,7 @@ var StyledSortingIcon = styles.styled(ButtonIcon, {
     return "\n      margin-left: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n      margin-bottom: 2px;\n      color: ").concat(active ? colors === null || colors === void 0 ? void 0 : colors.primary[400] : colors === null || colors === void 0 ? void 0 : colors.gray[400], ";\n      opacity: ").concat(active ? 1 : 0, ";\n      outline: none !important;\n    ");
 });
 var StyledTableHeader$1 = styles.styled("th", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
 })(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontHeaderS, function (props) {
     var _a = props.active, active = _a === void 0 ? false : _a, _b = props.horizontalAlign, horizontalAlign = _b === void 0 ? "left" : _b;
     var spacings = getSpaces(props);
@@ -4144,7 +4373,7 @@ var StyledTableHeader$1 = styles.styled("th", {
     return "\n      color: ".concat(active ? colors === null || colors === void 0 ? void 0 : colors.primary[400] : colors === null || colors === void 0 ? void 0 : colors.gray[600], ";\n      font-family: ").concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n      padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "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 ? colors === null || colors === void 0 ? void 0 : colors.primary[500] : "black", ";\n\n        & .MuiButtonBase-root {\n          color: ").concat(active ? colors === null || colors === void 0 ? void 0 : colors.primary[500] : colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n          opacity: 1;\n        }\n      }\n    ");
 });
 var StyledCellHeaderContainer = styles.styled("div", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
 })(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
     return "\n      align-items: flex-end;\n      width: 100%;\n      display: flex;\n      justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n    ");
@@ -4243,9 +4472,9 @@ var statusToCss = {
     success: success,
     warning: warning$2,
 };
-var doNotForwardProps$d = ["isRounded"];
+var doNotForwardProps$e = ["isRounded"];
 var StyledChip = styles.styled(material.Chip, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
 })(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  border: none;\n\n  ", "\n"], ["\n  border: none;\n\n  ", "\n"])), function (props) {
     var size = props.size, status = props.status, isRounded = props.isRounded;
     return react.css(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), isRounded && rounded$2(props), !isRounded && square$2(props), size === "small" && small(props), size === "medium" && medium(props), status && statusToCss[status](props));
@@ -4264,7 +4493,7 @@ var Chip = function (props) {
     return jsxRuntime.jsx(StyledChip, __assign({}, props));
 };
 
-var doNotForwardProps$c = [
+var doNotForwardProps$d = [
     "anchorEl",
     "count",
     "keepSearchOnSelect",
@@ -4274,63 +4503,70 @@ var doNotForwardProps$c = [
     "PopperBaseProps",
     "onClickAway",
     "ClickAwayListenerProps",
+    "forceOpen",
+    "isMultiColumn",
 ];
-// export const StyledAutocomplete = styled(Autocomplete, {
-//   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
-// })`
-//   ${(props: StyleProps) => {
-//     const spacings = getSpaces(props);
-//     return `
-//     `;
-//   }}
-// ` as typeof Autocomplete;
 var StyledHeaderTitle = styles.styled("div", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
 })(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontHeaderXs, function (props) {
     var search = props.search;
     var typography = getTypography(props);
     var spacings = getSpaces(props);
-    return "\n      font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n      color: black;\n      padding-top: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n      padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n      padding-left: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n      ").concat(search ? "padding-bottom: 0px;" : "padding-bottom: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;"), "\n    ");
+    return "\n      font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n      padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n      margin-bottom: ").concat(search ? spacings === null || spacings === void 0 ? void 0 : spacings.s : spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n    ");
 });
+var StyledDropdownMenuAutocompleteWrapper = styles.styled("div")(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  & .", ", & .MuiPopper-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    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 = styles.styled(material.Popper, {
     shouldForwardProp: function (prop) {
-        return !doNotForwardProps$c.includes(prop) || prop === "anchorEl";
+        return !doNotForwardProps$d.includes(prop) || prop === "anchorEl";
     },
-})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  .MuiAutocomplete-popperDisablePortal {\n    position: relative;\n    width: 100% !important;\n    box-shadow: none;\n    padding: 0;\n    border: none;\n  }\n\n  ", "\n"], ["\n  .MuiAutocomplete-popperDisablePortal {\n    position: relative;\n    width: 100% !important;\n    box-shadow: none;\n    padding: 0;\n    border: none;\n  }\n\n  ", "\n"])), function (props) {
+})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var borders = getBorders(props);
     var corners = getCorners(props);
     var shadows = getShadows(props);
-    var spacings = getSpaces(props);
-    return "\n      background-color: white;\n      border: ".concat(borders === null || borders === void 0 ? void 0 : borders.gray[100], ";\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(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n      box-sizing: border-box;\n      z-index: 1400;\n    ");
+    return "\n      background-color: white;\n      border: ".concat(borders === null || borders === void 0 ? void 0 : borders.gray[100], ";\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 = styles.styled(material.Paper, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
-})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var title = props.title;
+    shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
+})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spacings = getSpaces(props);
-    return "\n      box-shadow: none;\n      margin: 0;\n      border-radius: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n      ".concat(title ? "padding-left: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px !important;") : "", "\n    ");
+    return "\n      box-shadow: none !important;\n      border: none !important;\n      border-radius: 0;\n      margin: 0;\n      padding: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n\n      .MuiFormControl-root.MuiTextField-root {\n        margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n        margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n      }\n    ");
 });
-var StyledAutocompletePopper = styles.styled(material.Popper)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  position: relative !important;\n  transform: none !important;\n  width: 100% !important;\n  box-shadow: none;\n  padding: 0;\n  border: none;\n"], ["\n  position: relative !important;\n  transform: none !important;\n  width: 100% !important;\n  box-shadow: none;\n  padding: 0;\n  border: none;\n"])));
 var templateObject_1$z, templateObject_2$j, templateObject_3$a, templateObject_4$8;
 
+// (masoudmanson): Represents the minimum width defined by design specifications
+// for the dropdownMenu's popper component
+var MINIMUM_DROPDOWN_MENU_POPPER_WIDTH = 160;
+var DEFAULT_POPPER_BASE_PROPS = {
+    disablePortal: true,
+};
 var DropdownMenu = function (props) {
-    var anchorEl = props.anchorEl, id = props.id, _a = props.InputBaseProps, InputBaseProps = _a === void 0 ? {
-        autoFocus: true,
-        sx: {
-            padding: "8px",
-        },
-    } : _a, _b = props.open, open = _b === void 0 ? false : _b, _c = props.PaperComponent, PaperComponent = _c === void 0 ? StyledPaper$1 : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PopperPlacement, PopperPlacement = _e === void 0 ? "bottom-start" : _e, _f = props.PopperBaseProps, PopperBaseProps = _f === void 0 ? {} : _f, _g = props.search, search = _g === void 0 ? false : _g, title = props.title, _h = props.label, label = _h === void 0 ? "Search" : _h, children = props.children, onClickAway = props.onClickAway, ClickAwayListenerProps = props.ClickAwayListenerProps, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PaperComponent", "PopperComponent", "PopperPlacement", "PopperBaseProps", "search", "title", "label", "children", "onClickAway", "ClickAwayListenerProps"]);
-    var defaultPopperComponent = React.useCallback(function (popperProps) {
-        return jsxRuntime.jsx(StyledAutocompletePopper, __assign({}, popperProps));
-    }, []);
+    var _a;
+    var theme = styles.useTheme();
+    var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _b = props.open, open = _b === void 0 ? false : _b, _c = props.PopperComponent, PopperComponent = _c === void 0 ? StyledPopper : _c, _d = props.PaperComponent, PaperComponent = _d === void 0 ? StyledPaper$1 : _d, _e = props.PopperPlacement, PopperPlacement = _e === void 0 ? "bottom-start" : _e, _f = props.PopperBaseProps, PopperBaseProps = _f === void 0 ? {} : _f, _g = props.search, search = _g === void 0 ? false : _g, title = props.title, _h = props.label, label = _h === void 0 ? "Search" : _h, children = props.children, options = props.options, _j = props.onClickAway, onClickAway = _j === void 0 ? noop : _j, ClickAwayListenerProps = props.ClickAwayListenerProps, _k = props.width, width = _k === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _k, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "search", "title", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
+    var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
+    // (masoudmanson): The DropdownMenu's Popper component should have a minimum
+    // width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
+    // a single column dropdown.However, for larger multi-column autocompletes,
+    // the width should be set to 'auto' to accommodate the expanded layout.
+    var dropdownMenuPopperSx = React.useMemo(function () {
+        return __assign(__assign({}, PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx), { width: isMultiColumn || width < MINIMUM_DROPDOWN_MENU_POPPER_WIDTH
+                ? "auto"
+                : width });
+    }, [PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx, isMultiColumn, width]);
+    var DefaultInputBaseProps = React.useMemo(function () {
+        return __assign(__assign({}, InputBaseProps), { onClick: noop });
+    }, [InputBaseProps]);
     return (jsxRuntime.jsx(PopperComponent, __assign({ id: id, modifiers: [
             {
                 name: "offset",
                 options: {
-                    offset: [0, 8],
+                    offset: [0, (_a = theme.app) === null || _a === void 0 ? void 0 : _a.spacing.s],
                 },
             },
-        ], open: open, anchorEl: anchorEl }, PopperBaseProps, { placement: PopperPlacement, children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs("div", { children: [title && (jsxRuntime.jsx(StyledHeaderTitle, { search: search, children: title })), jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, InputBaseProps: InputBaseProps, PaperComponent: React.useCallback(function (paperComponentProps) { return (jsxRuntime.jsx(PaperComponent, __assign({ search: search, title: title }, paperComponentProps))); }, [PaperComponent, search, title]), open: open }, rest, { PopperComponent: defaultPopperComponent })), children] }) })) })));
+        ], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, { 
+        // (masoudmanson): To override the width of the Popper,
+        // the sx prop's value must be set after spreading the PopperBaseProps.
+        sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [title && (jsxRuntime.jsx(StyledHeaderTitle, { search: search, children: title })), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
 };
 
 var labelFontBodyS = fontBody("s");
@@ -4386,7 +4622,7 @@ var isDisabled = function (props) {
     var gray = colors === null || colors === void 0 ? void 0 : colors.gray[300];
     return react.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    cursor: default;\n    border-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n  "], ["\n    cursor: default;\n    border-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n  "])), gray, colors === null || colors === void 0 ? void 0 : colors.gray[300], colors === null || colors === void 0 ? void 0 : colors.gray[300], colors === null || colors === void 0 ? void 0 : colors.gray[300]);
 };
-var doNotForwardProps$b = [
+var doNotForwardProps$c = [
     "intent",
     "state",
     "sdsStage",
@@ -4396,20 +4632,20 @@ var doNotForwardProps$b = [
     "shouldPutAColonAfterLabel",
 ];
 var StyledInputDropdown = styles.styled(Button, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
 })(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\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  /* (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, function (props) {
     var disabled = props.disabled, intent = props.intent, state = props.state, sdsStage = props.sdsStage, sdsStyle = props.sdsStyle;
     return react.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), state === "open" && isOpen(props), sdsStage === "userInput" && userInput$1(props), intent === "warning" && warning$1(props), intent === "error" && error$1(props), disabled && isDisabled(props));
 });
 var StyledDetail = styles.styled("span", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
 })(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var colors = getColors(props);
     var spaces = getSpaces(props);
     return "\n      color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\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 = styles.styled("span", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
 })(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
     var details = props.details, counter = props.counter, sdsType = props.sdsType;
@@ -4422,7 +4658,7 @@ var StyledLabel$1 = styles.styled("span", {
     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 = styles.styled("span", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
 })(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var colors = getColors(props);
     var corners = getCorners(props);
@@ -4430,7 +4666,7 @@ var StyledCounter = styles.styled("span", {
     return "\n      background-color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[200], ";\n      color: ").concat(colors === null || colors === void 0 ? void 0 : colors.primary[400], ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n      padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n      margin-left: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n    ");
 });
 var MinimalDetails = styles.styled("div", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
 })(templateObject_15 || (templateObject_15 = __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 (_a) {
     var shouldTruncateMinimalDetails = _a.shouldTruncateMinimalDetails;
     if (shouldTruncateMinimalDetails) {
@@ -4438,13 +4674,13 @@ var MinimalDetails = styles.styled("div", {
     }
 });
 var LabelWrapper = styles.styled("span", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
 })(templateObject_16 || (templateObject_16 = __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 = styles.styled("span", {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
 })(templateObject_17 || (templateObject_17 = __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) {
     var _a;
@@ -4585,9 +4821,9 @@ var typeToCss = {
     primary: primary,
     secondary: secondary,
 };
-var doNotForwardProps$a = ["sdsType", "sdsStyle", "tagColor", "hover"];
+var doNotForwardProps$b = ["sdsType", "sdsStyle", "tagColor", "hover"];
 var StyledTag$1 = styles.styled(material.Chip, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
 })(templateObject_8$1 || (templateObject_8$1 = __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, icon = props.icon;
     var isRounded = sdsStyle === "rounded";
@@ -4644,30 +4880,22 @@ var templateObject_1$v, templateObject_2$f;
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 var ComplexFilter = function (_a) {
-    var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, onChange = _a.onChange, _e = _a.DropdownMenuProps, DropdownMenuProps = _e === void 0 ? {} : _e, _f = _a.InputDropdownProps, InputDropdownProps = _f === void 0 ? { sdsStyle: "minimal" } : _f, propValue = _a.value, PopperComponent = _a.PopperComponent, _g = _a.InputDropdownComponent, InputDropdownComponent = _g === void 0 ? InputDropdown : _g, _h = _a.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _h === void 0 ? false : _h, rest = __rest(_a, ["options", "label", "multiple", "search", "onChange", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent", "isTriggerChangeOnOptionClick"]);
+    var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, onChange = _a.onChange, _e = _a.DropdownMenuProps, DropdownMenuProps = _e === void 0 ? {} : _e, _f = _a.InputDropdownProps, InputDropdownProps = _f === void 0 ? { sdsStyle: "minimal" } : _f, propValue = _a.value, PopperComponent = _a.PopperComponent, _g = _a.InputDropdownComponent, InputDropdownComponent = _g === void 0 ? InputDropdown : _g, rest = __rest(_a, ["options", "label", "multiple", "search", "onChange", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent"]);
     var isControlled = propValue !== undefined;
-    var _j = React.useState(false), open = _j[0], setOpen = _j[1];
-    var _k = React.useState(null), anchorEl = _k[0], setAnchorEl = _k[1];
-    var _l = React.useState(getInitialValue()), value = _l[0], setValue = _l[1];
-    var _m = React.useState(getInitialValue()), pendingValue = _m[0], setPendingValue = _m[1];
-    React.useEffect(function () {
-        onChange(value);
-        setPendingValue(value);
-    }, [value]);
+    var _h = React.useState(false), open = _h[0], setOpen = _h[1];
+    var _j = React.useState(null), anchorEl = _j[0], setAnchorEl = _j[1];
+    var _k = React.useState((multiple ? [] : null)), value = _k[0], setValue = _k[1];
     React.useEffect(function () {
         if (isControlled) {
             setValue(propValue);
         }
-    }, [propValue]);
+    }, [isControlled, propValue]);
     // * (mlila): likely, this portion on ComplexFilter will need to be replaced with Dropdown (or a
     // * new DropdownFilter) component. As ComplexFilter evolves, there will be more types added,
     // * such as sliders for ranges, inline multi selects, etc.
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper$1, __assign({}, rest, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps)), jsxRuntime.jsx(StyledChipsWrapper, { children: jsxRuntime.jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] })), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, onClose: handleMenuSelectClose, search: search, multiple: multiple, value: (multiple ? pendingValue : value), onChange: handleChange, disableCloseOnSelect: multiple, options: options, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, onClickAway: handleClose }, DropdownMenuProps))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper$1, __assign({}, rest, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps)), jsxRuntime.jsx(StyledChipsWrapper, { children: jsxRuntime.jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] })), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, onClose: handleMenuSelectClose, search: search, multiple: multiple, value: value, onChange: handleChange, disableCloseOnSelect: multiple, options: options, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, onClickAway: handleClose }, DropdownMenuProps, rest))] }));
     function handleClick(event) {
         if (open) {
-            if (multiple) {
-                setValue(pendingValue);
-            }
             setOpen(false);
             if (anchorEl) {
                 anchorEl.focus();
@@ -4675,9 +4903,6 @@ var ComplexFilter = function (_a) {
             setAnchorEl(null);
         }
         else {
-            if (multiple) {
-                setPendingValue(value);
-            }
             setAnchorEl(event.currentTarget);
             setOpen(true);
         }
@@ -4685,9 +4910,6 @@ var ComplexFilter = function (_a) {
     function handleClose() {
         if (open) {
             setOpen(false);
-            if (multiple) {
-                setValue(pendingValue);
-            }
         }
     }
     function handleMenuSelectClose(event, reason) {
@@ -4696,16 +4918,12 @@ var ComplexFilter = function (_a) {
             handleClose();
         }
     }
-    function handleChange(_, newValue) {
-        if (multiple) {
-            if (isTriggerChangeOnOptionClick) {
-                setPendingValue(newValue);
-                return setValue(newValue);
-            }
-            return setPendingValue(newValue);
-        }
+    function handleChange(event, newValue) {
         setValue(newValue);
-        setOpen(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        if (!multiple) {
+            setOpen(false);
+        }
     }
     function handleDelete(option) {
         if (!multiple) {
@@ -4714,14 +4932,6 @@ var ComplexFilter = function (_a) {
         var newValue = (value === null || value === void 0 ? void 0 : value.filter(function (item) { return item !== option; })) || null;
         setValue(newValue);
     }
-    function getInitialValue() {
-        if (isControlled) {
-            return propValue;
-        }
-        return multiple
-            ? []
-            : null;
-    }
 };
 
 var DialogContext = React.createContext({ sdsSize: "m" });
@@ -4734,9 +4944,9 @@ var BoxShadows;
 })(BoxShadows || (BoxShadows = {}));
 
 // (thuang): Please keep this in sync with the props used in `ExtraProps`
-var doNotForwardProps$9 = ["sdsSize"];
+var doNotForwardProps$a = ["sdsSize"];
 var StyledPaper = styles.styled(material.Paper, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
 })(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  & {\n    box-shadow: ", ";\n\n    ", "\n\n    ", "\n  }\n"], ["\n  & {\n    box-shadow: ", ";\n\n    ", "\n\n    ", "\n  }\n"])), BoxShadows.L, paperDimensions, function (props) {
     var spaces = getSpaces(props);
     var corners = getCorners(props);
@@ -4794,9 +5004,9 @@ var Dialog = React.forwardRef(function Dialog(props, ref) {
 });
 
 // (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
-var doNotForwardProps$8 = ["buttonPosition"];
+var doNotForwardProps$9 = ["buttonPosition"];
 var StyledDialogActions = styles.styled(material.DialogActions, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
 })(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  padding: 0;\n\n  ", "\n"], ["\n  padding: 0;\n\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
@@ -4861,47 +5071,70 @@ var DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
     return (jsxRuntime.jsx(StyledDialogTitle, __assign({ ref: ref }, rest, { children: children || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [onClose && jsxRuntime.jsx(CloseButton, { sdsIcon: "xMark", onClick: onClose }), jsxRuntime.jsx(Title, { children: title }), jsxRuntime.jsx(Subtitle, { children: subtitle })] })) })));
 });
 
-styles.styled("div")(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  width: 150px;\n"], ["\n  width: 150px;\n"])));
-var StyledButton = styles.styled(Button)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var doNotForwardProps$8 = ["buttonPosition"];
+var StyledButtonsWrapper = styles.styled("div", {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
+})(templateObject_1$p || (templateObject_1$p = __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 = styles.styled(Button, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
+})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spacings = getSpaces(props);
-    return "\n      margin-top: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n      margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n\n      &:first-of-type {\n        margin-left: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n        margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n      }\n\n      &:last-child {\n        margin-left: 0;\n        margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n      }\n    ");
+    return "\n      margin-top: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n      margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n    ");
 });
 var templateObject_1$p, templateObject_2$d;
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
-var Dropdown = function (_a) {
-    var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, _e = _a.buttonPosition, buttonPosition = _e === void 0 ? "right" : _e, _f = _a.buttons, buttons = _f === void 0 ? false : _f, 
+var Dropdown = function (props) {
+    var options = props.options, _a = props.label, label = _a === void 0 ? "" : _a, _b = props.multiple, multiple = _b === void 0 ? false : _b, _c = props.search, search = _c === void 0 ? false : _c, _d = props.buttonPosition, buttonPosition = _d === void 0 ? "right" : _d, _e = props.buttons, buttons = _e === void 0 ? false : _e, 
     // By default, most dropdowns will close when the user clicks outside the dropdown.
     // The exception is the multiple select variant with Apply/Cancel buttons,
     // which by default will not close on blur. If closeOnBlur is enabled, clicking out
     // is equivalent to clicking the Cancel button, closing the dropdown and losing
     // unapplied changes.
-    _g = _a.closeOnBlur, 
+    _f = props.closeOnBlur, 
     // By default, most dropdowns will close when the user clicks outside the dropdown.
     // The exception is the multiple select variant with Apply/Cancel buttons,
     // which by default will not close on blur. If closeOnBlur is enabled, clicking out
     // is equivalent to clicking the Cancel button, closing the dropdown and losing
     // unapplied changes.
-    closeOnBlur = _g === void 0 ? !buttons : _g, onChange = _a.onChange, onClose = _a.onClose, _h = _a.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, _j = _a.InputDropdownProps, InputDropdownProps = _j === void 0 ? { sdsStyle: "minimal" } : _j, propValue = _a.value, PopperComponent = _a.PopperComponent, _k = _a.InputDropdownComponent, InputDropdownComponent = _k === void 0 ? InputDropdown : _k, _l = _a.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _l === void 0 ? false : _l, _m = _a.disabled, disabled = _m === void 0 ? false : _m, rest = __rest(_a, ["options", "label", "multiple", "search", "buttonPosition", "buttons", "closeOnBlur", "onChange", "onClose", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled"]);
+    closeOnBlur = _f === void 0 ? !buttons : _f, onClose = props.onClose, onChange = props.onChange, _g = props.DropdownMenuProps, DropdownMenuProps = _g === void 0 ? {} : _g, _h = props.InputDropdownProps, InputDropdownProps = _h === void 0 ? { sdsStyle: "minimal" } : _h, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, rest = __rest(props, ["options", "label", "multiple", "search", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value"]);
     if (buttons && !multiple) {
         // eslint-disable-next-line no-console
         console.warn("Warning: buttons are only supported for multiple select dropdowns.");
     }
+    var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
     var isControlled = propValue !== undefined;
-    var _o = React.useState(null), anchorEl = _o[0], setAnchorEl = _o[1];
-    var _p = React.useState(getInitialValue), value = _p[0], setValue = _p[1];
-    var _q = React.useState([]), pendingValue = _q[0], setPendingValue = _q[1];
-    React.useEffect(function () {
-        onChange(value);
-    }, [onChange, value]);
+    var _m = React.useState(null), anchorEl = _m[0], setAnchorEl = _m[1];
+    var _o = React.useState(false), open = _o[0], setOpen = _o[1];
+    var _p = React.useState(getInitialValue()), value = _p[0], setValue = _p[1];
+    var _q = React.useState(getInitialValue()), pendingValue = _q[0], setPendingValue = _q[1];
+    var shouldShowButtons = buttons && !isTriggerChangeOnOptionClick && multiple;
     React.useEffect(function () {
         if (isControlled) {
             setValue(propValue);
         }
     }, [isControlled, propValue]);
-    var _r = React.useState(false), open = _r[0], setOpen = _r[1];
-    var shouldShowButtons = buttons && !isTriggerChangeOnOptionClick && multiple;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, rest)), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, value: (multiple ? pendingValue : value), onChange: handleChange, disableCloseOnSelect: multiple, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, options: options, onClickAway: handleClickAway }, DropdownMenuProps, { children: shouldShowButtons ? (jsxRuntime.jsx("div", { children: buttonPosition === "left" ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsxRuntime.jsx(StyledButton, { onClick: handleClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, { "data-testid": "dropdown" })), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: isMultiColumn ? value : multiple ? pendingValue : value }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsxRuntime.jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsxRuntime.jsx(StyledButton, { onClick: handleClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
+    function getInitialValue() {
+        return multiple
+            ? []
+            : null;
+    }
+    function handleChange(event, newValue, reason, details) {
+        if (multiple) {
+            if (isTriggerChangeOnOptionClick) {
+                setPendingValue(newValue);
+                return setValueAndCallOnChange(event, newValue, reason, details);
+            }
+            return setPendingValue(newValue);
+        }
+        setValueAndCallOnChange(event, newValue, reason, details);
+        if (!isMultiColumn)
+            setOpen(false);
+    }
     function handleClickAway() {
         if (open) {
             // (masoudmanson): We want to keep the dropdown menu open in two scenarios:
@@ -4918,12 +5151,14 @@ var Dropdown = function (_a) {
     }
     function handleClick(event) {
         if (open) {
-            if (multiple) {
-                setValue(pendingValue);
-            }
-            setOpen(false);
-            if (anchorEl) {
-                anchorEl.focus();
+            if (!shouldShowButtons) {
+                if (multiple) {
+                    setValue(pendingValue);
+                }
+                setOpen(false);
+                if (anchorEl) {
+                    anchorEl.focus();
+                }
             }
         }
         else {
@@ -4934,7 +5169,7 @@ var Dropdown = function (_a) {
             setOpen(true);
         }
     }
-    function handleClose(_, reason) {
+    function handleClose(event, reason) {
         // (thuang): We don't want to close the menu when the input is clicked
         if (reason === "toggleInput") {
             return;
@@ -4951,23 +5186,12 @@ var Dropdown = function (_a) {
             anchorEl.focus();
         }
         if (closeOnBlur)
-            onClose === null || onClose === void 0 ? void 0 : onClose();
+            onClose === null || onClose === void 0 ? void 0 : onClose(event, reason);
         if (shouldShowButtons) {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
+            onClose === null || onClose === void 0 ? void 0 : onClose(event, reason);
             setOpen(false);
         }
     }
-    function handleChange(_, newValue) {
-        if (multiple) {
-            if (isTriggerChangeOnOptionClick) {
-                setPendingValue(newValue);
-                return setValue(newValue);
-            }
-            return setPendingValue(newValue);
-        }
-        setValue(newValue);
-        setOpen(false);
-    }
     function handleCancel() {
         if (multiple) {
             // (masoudmanson): To undo the latest actions made on the selections,
@@ -4978,16 +5202,11 @@ var Dropdown = function (_a) {
         if (anchorEl) {
             anchorEl.focus();
         }
-        onClose === null || onClose === void 0 ? void 0 : onClose();
         setOpen(false);
     }
-    function getInitialValue() {
-        if (isControlled) {
-            return propValue;
-        }
-        return multiple
-            ? []
-            : null;
+    function setValueAndCallOnChange(event, newValue, reason, details) {
+        setValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, newValue, reason, details);
     }
 };
 
@@ -5207,8 +5426,6 @@ var disabledStyled$1 = function (props) {
 };
 var textArea = function (props) {
     var spacings = getSpaces(props);
-    console.log(material.outlinedInputClasses.multiline);
-    console.log(material.outlinedInputClasses.inputMultiline);
     return react.css(templateObject_4$5 || (templateObject_4$5 = __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, spacings === null || spacings === void 0 ? void 0 : spacings.xxs, material.outlinedInputClasses.inputMultiline, spacings === null || spacings === void 0 ? void 0 : spacings.xxs, spacings === null || spacings === void 0 ? void 0 : spacings.m, spacings === null || spacings === void 0 ? void 0 : spacings.m);
 };
 var userInput = function (props) {
@@ -6260,6 +6477,8 @@ exports.AccordionDetails = AccordionDetails;
 exports.AccordionHeader = AccordionHeader;
 exports.Alert = Alert$1;
 exports.Autocomplete = Autocomplete;
+exports.AutocompleteMultiColumnStyledPopper = StyledPopper$2;
+exports.AutocompleteSingleColumnStyledPaper = StyledPaper$3;
 exports.Banner = Banner;
 exports.Button = Button;
 exports.ButtonDropdown = ButtonDropdown;
@@ -6300,6 +6519,7 @@ exports.ListItem = ListItem;
 exports.ListItemLabel = ListItemLabel;
 exports.ListSubheader = ListSubheader;
 exports.LoadingIndicator = LoadingIndicator;
+exports.MINIMUM_DROPDOWN_MENU_POPPER_WIDTH = MINIMUM_DROPDOWN_MENU_POPPER_WIDTH;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.MenuSelect = MenuSelect;