@czi-sds/components 20.0.1 → 20.1.0

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { forwardRef, useState, useCallback, useEffect, useRef, useMemo, createContext, useContext } from 'react';
 import { css } from '@emotion/react';
-import { colors, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, IconButton, TextField, outlinedInputClasses, inputBaseClasses, inputAdornmentClasses, buttonBaseClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, Popper, ClickAwayListener, Button as Button$1, buttonClasses, alertClasses, alertTitleClasses, Grow, AlertTitle, Tooltip as Tooltip$1, Chip as Chip$1, darken, Dialog as Dialog$1, DialogActions as DialogActions$1, dialogActionsClasses, DialogContent, DialogTitle as DialogTitle$1, Typography, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, Tabs as Tabs$1, Tab as Tab$1, Slide, Box, ToggleButtonGroup, toggleButtonClasses, ToggleButton, useTheme as useTheme$1, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
+import { colors, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, inputAdornmentClasses, buttonBaseClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, Popper, ClickAwayListener, alertClasses, alertTitleClasses, Grow, AlertTitle, Tooltip as Tooltip$1, Chip as Chip$1, darken, Dialog as Dialog$1, DialogActions as DialogActions$1, dialogActionsClasses, DialogContent, DialogTitle as DialogTitle$1, Typography, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, Tabs as Tabs$1, Tab as Tab$1, Slide, Box, ToggleButtonGroup, toggleButtonClasses, ToggleButton, useTheme as useTheme$1, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
 import { createTheme, styled, useTheme } from '@mui/material/styles';
 import { Check, Remove, Clear } from '@mui/icons-material';
 import { css as css$1 } from '@emotion/css';
@@ -449,14 +449,14 @@ var SDSAppTheme = {
 // override every theme property that makes use of colors.
 SDSAppTheme.borders = {
     accent: {
-        dashed: "2px dashed ".concat(SDSAppTheme.colors.blue[400]),
+        dashed: "1px dashed ".concat(SDSAppTheme.colors.blue[400]),
         default: "1px solid ".concat(SDSAppTheme.colors.blue[400]),
         disabled: "1px solid ".concat(SDSAppTheme.colors.blue[300]),
         hover: "1px solid ".concat(SDSAppTheme.colors.blue[500]),
     },
     base: {
         black: "1px solid ".concat(SDSAppTheme.colors.common.black),
-        dashed: "2px dashed ".concat(SDSAppTheme.colors.gray[400]),
+        dashed: "1px dashed ".concat(SDSAppTheme.colors.gray[400]),
         default: "1px solid ".concat(SDSAppTheme.colors.gray[400]),
         disabled: "1px solid ".concat(SDSAppTheme.colors.gray[300]),
         divider: "1px solid ".concat(SDSAppTheme.colors.gray[200]),
@@ -476,6 +476,9 @@ SDSAppTheme.borders = {
     negative: {
         default: "1px solid ".concat(SDSAppTheme.colors.red[400]),
     },
+    neutral: {
+        default: "1px solid ".concat(SDSAppTheme.colors.gray[400]),
+    },
     none: "none",
     notice: {
         default: "1px solid ".concat(SDSAppTheme.colors.yellow[400]),
@@ -670,6 +673,7 @@ function makeThemeOptions(appTheme) {
                     beta: appTheme.colors.purple[600],
                     info: appTheme.colors.blue[600],
                     negative: appTheme.colors.red[600],
+                    neutral: appTheme.colors.gray[600],
                     notice: appTheme.colors.yellow[600],
                     positive: appTheme.colors.green[600],
                 },
@@ -795,6 +799,10 @@ function makeThemeOptions(appTheme) {
 
 var defaultThemeOptions = makeThemeOptions(SDSAppTheme);
 var defaultTheme = createTheme(defaultThemeOptions);
+/**
+ * (masoudmanson): This is to keep the old defaultAppTheme export for backward compatibility.
+ */
+var defaultAppTheme = defaultTheme;
 
 function focusVisibleA11yStyle() {
     return "\n      &.Mui-focusVisible, &:focus-visible {\n        outline: 5px auto Highlight;\n        outline: 5px auto -webkit-focus-ring-color;\n      }\n  ";
@@ -3530,15 +3538,15 @@ function interactive(props) {
     var semanticComponentColors = getSemanticComponentColors(props);
     return css(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    &:disabled {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    &:disabled {\n      color: ", ";\n    }\n  "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconHover, (_c = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _c === void 0 ? void 0 : _c[shade], (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled);
 }
-var doNotForwardProps$p = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
+var doNotForwardProps$q = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
 var StyledSvgIcon = styled(SvgIcon, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
+    shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
 })(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var sdsType = props.sdsType;
     return css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsType !== "iconButton" && iconSize(props), sdsType === "static" && staticStyle(props), sdsType === "interactive" && interactive(props), sdsType === "button" && buttonStyle());
 });
-var StyledIcon = styled("div")(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n  display: contents;\n"], ["\n  /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n  display: contents;\n"])));
-var templateObject_1$R, templateObject_2$y, templateObject_3$q, templateObject_4$m, templateObject_5$g, templateObject_6$c, templateObject_7$9;
+var StyledIcon = styled("div")(templateObject_7$a || (templateObject_7$a = __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$R, templateObject_2$y, templateObject_3$q, templateObject_4$m, templateObject_5$g, templateObject_6$c, templateObject_7$a;
 
 /**
  * @see https://mui.com/material-ui/icons/#icons
@@ -3564,10 +3572,10 @@ var AccordionHeader = function (props) {
     return (jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "static" }), children: [children, subtitle && jsx(StyledSubtitle, { children: subtitle })] }));
 };
 
-var sdsPropNames$4 = ["useDivider", "togglePosition"];
+var sdsPropNames$3 = ["useDivider", "togglePosition"];
 var StyledAccordion = styled(Accordion$1, {
     shouldForwardProp: function (prop) {
-        return !sdsPropNames$4.includes(prop.toString());
+        return !sdsPropNames$3.includes(prop.toString());
     },
 })(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
@@ -3631,6 +3639,10 @@ var templateObject_1$P;
 
 /**
  * @see https://mui.com/material-ui/react-alert/
+ *
+ * @deprecated
+ * This component is deprecated and will be removed in the next major version.
+ * Please use `Callout` or `Notification` instead.
  */
 var Alert$1 = function (props) {
     return jsx(StyledAlert, __assign({}, props));
@@ -3641,23 +3653,42 @@ var toKebabCase = function (str) {
     return str.replace(/[\s_]+/g, "-").toLowerCase();
 };
 var EMPTY_OBJECT = {};
+function filterProps(props, excludeProps) {
+    var result = {};
+    for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
+        var key = _a[_i];
+        if (!excludeProps.includes(key)) {
+            result[key] = props[key];
+        }
+    }
+    return result;
+}
 
 var _a;
 var SDSWarningTypes;
 (function (SDSWarningTypes) {
+    SDSWarningTypes["ButtonMinimalIsAllCaps"] = "buttonMinimalIsAllCaps";
     SDSWarningTypes["ButtonMissingSDSProps"] = "buttonMissingProps";
+    SDSWarningTypes["ButtonIconMissingIconProp"] = "buttonIconMissingIconProp";
     SDSWarningTypes["ChipDeprecated"] = "chipDeprecated";
     SDSWarningTypes["MenuSelectDeprecated"] = "menuSelectDeprecated";
-    SDSWarningTypes["ButtonIconMediumSize"] = "buttonIconMediumSize";
     SDSWarningTypes["TooltipSubtitle"] = "tooltipSubtitle";
     SDSWarningTypes["TooltipWidth"] = "tooltipWidth";
     SDSWarningTypes["TooltipInverted"] = "tooltipInverted";
 })(SDSWarningTypes || (SDSWarningTypes = {}));
 var SDS_WARNINGS = (_a = {},
+    _a[SDSWarningTypes.ButtonMinimalIsAllCaps] = {
+        hasWarned: false,
+        message: "Warning: isAllCaps is only applied to buttons with sdsStyle='minimal'.",
+    },
     _a[SDSWarningTypes.ButtonMissingSDSProps] = {
         hasWarned: false,
         message: "Warning: Buttons without sdsStyle or sdsType props will be deprecated.",
     },
+    _a[SDSWarningTypes.ButtonIconMissingIconProp] = {
+        hasWarned: false,
+        message: "Warning: Buttons with an SDS type of icon require an icon prop to be provided.",
+    },
     _a[SDSWarningTypes.ChipDeprecated] = {
         hasWarned: false,
         message: "Warning: <Chip /> will be deprecated and replaced with <Tag />",
@@ -3666,10 +3697,6 @@ var SDS_WARNINGS = (_a = {},
         hasWarned: false,
         message: "Warning: MenuSelect will be deprecated and replaced with <DropdownMenu />",
     },
-    _a[SDSWarningTypes.ButtonIconMediumSize] = {
-        hasWarned: false,
-        message: "Warning: A medium size ButtonIcon can only be of type tertiary!",
-    },
     _a[SDSWarningTypes.TooltipSubtitle] = {
         hasWarned: false,
         message: "Warning: The 'subtitle' text is only available for dark tooltips!",
@@ -3699,46 +3726,128 @@ var showWarningIfFirstOccurence = function (warningType) {
     SDS_WARNINGS[warningType].hasWarned = true;
 };
 
-var isOn = function (props) {
-    var sdsType = props.sdsType;
-    var colors = getColors(props);
-    return 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.blue[600] : colors === null || colors === void 0 ? void 0 : colors.blue[400], ";\n\n      &:hover {\n        color: ").concat(colors === null || colors === void 0 ? void 0 : colors.blue[600], ";\n      }\n    "));
+var doNotForwardProps$p = [
+    "isAllCaps",
+    "isRounded",
+    "sdsStyle",
+    "sdsType",
+    "sdsSize",
+];
+// Rounded + Square Button Styles
+var ButtonStyles = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var variant = props.variant, startIcon = props.startIcon, endIcon = props.endIcon;
+    var spaces = getSpaces(props);
+    var shadows = getShadows(props);
+    var iconSizes = getIconSizes(props);
+    var semanticTextColors = getSemanticTextColors(props);
+    var semanticComponentColors = getSemanticComponentColors(props);
+    var hasIcon = !!startIcon || !!endIcon;
+    // (masoudmanson): The padding depends on the presence of an icon.
+    // If the component has either a startIcon or endIcon, the padding will be spaces?.m pixels.
+    // If the component doesn't have any icon at all, the padding will be spaces?.l pixels.
+    var padding = hasIcon
+        ? "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px")
+        : "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px");
+    var contentColor = variant === "outlined"
+        ? (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _a === void 0 ? void 0 : _a.default
+        : (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill;
+    return css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n    border: none;\n    box-shadow: inset 0 0 0 1px ", ";\n    padding: ", ";\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px\n        ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px\n        ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    .", ", .", " {\n      height: ", "px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      svg {\n        max-width: ", "px;\n        max-height: ", "px;\n      }\n    }\n\n    .", " {\n      margin-right: ", "px;\n      margin-left: 0;\n    }\n\n    .", " {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "], ["\n    border: none;\n    box-shadow: inset 0 0 0 1px ", ";\n    padding: ", ";\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px\n        ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px\n        ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    .", ", .", " {\n      height: ", "px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      svg {\n        max-width: ", "px;\n        max-height: ", "px;\n      }\n    }\n\n    .", " {\n      margin-right: ", "px;\n      margin-left: 0;\n    }\n\n    .", " {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "])), (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.border, padding, contentColor, contentColor, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.onFill, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.borderHover, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.fill, (_h = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _h === void 0 ? void 0 : _h.onFill, (_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _j === void 0 ? void 0 : _j.fillPressed, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _k === void 0 ? void 0 : _k.fillPressed, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _l === void 0 ? void 0 : _l.fill, (_m = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _m === void 0 ? void 0 : _m.onFillDisabled, (_o = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _o === void 0 ? void 0 : _o.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_p = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _p === void 0 ? void 0 : _p.onFillDisabled, buttonClasses.startIcon, buttonClasses.endIcon, (_q = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _q === void 0 ? void 0 : _q.width, (_r = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _r === void 0 ? void 0 : _r.width, (_s = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _s === void 0 ? void 0 : _s.width, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
 };
-var isDisabled$1 = function (props) {
+var Rounded = function (props) {
+    var corners = getCorners(props);
+    return css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n    border-radius: ", "px;\n  "], ["\n    border-radius: ", "px;\n  "])), corners === null || corners === void 0 ? void 0 : corners.l);
+};
+var DestructiveButton = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var variant = props.variant;
+    var shadows = getShadows(props);
+    var semanticTextColors = getSemanticTextColors(props);
+    var semanticComponentColors = getSemanticComponentColors(props);
+    var contentColor = variant === "outlined"
+        ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _a === void 0 ? void 0 : _a.icon
+        : (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill;
+    var backgroundColor = variant === "outlined"
+        ? "transparent"
+        : (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _c === void 0 ? void 0 : _c.fill;
+    return css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n    border: none;\n    box-shadow: inset 0 0 0 1px ", ";\n    color: ", ";\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px\n        ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px\n        ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "], ["\n    border: none;\n    box-shadow: inset 0 0 0 1px ", ";\n    color: ", ";\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px\n        ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px\n        ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "])), (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _d === void 0 ? void 0 : _d.border, contentColor, backgroundColor, contentColor, (_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.onFill, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _g === void 0 ? void 0 : _g.fillHover, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.fill, (_j = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _j === void 0 ? void 0 : _j.onFill, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _k === void 0 ? void 0 : _k.fillPressed, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _l === void 0 ? void 0 : _l.fillPressed, (_m = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _m === void 0 ? void 0 : _m.fill, (_o = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _o === void 0 ? void 0 : _o.onFillDisabled, (_p = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _p === void 0 ? void 0 : _p.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_q = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _q === void 0 ? void 0 : _q.onFillDisabled);
+};
+var StyledButton$3 = styled(Button$1, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
+})(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), fontBodySemiboldXs, focusVisibleA11yStyle, function (props) {
+    var sdsStyle = props.sdsStyle, sdsType = props.sdsType;
+    return css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n    "])), ButtonStyles(props), sdsStyle === "rounded" && Rounded(props), sdsType === "destructive" && DestructiveButton(props));
+});
+// Minimal Button Styles
+var Minimal = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var spaces = getSpaces(props);
+    var iconSizes = getIconSizes(props);
+    var semanticTextColors = getSemanticTextColors(props);
+    var semanticComponentColors = getSemanticComponentColors(props);
+    return css(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n    ", "\n    ", "\n\n    min-width: unset;\n    padding: ", "px 0;\n\n    &:hover,\n    &:focus-visible {\n      background-color: transparent;\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n    &:active {\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n    &:disabled {\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    .", ", .", " {\n      height: ", "px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      svg {\n        max-width: ", "px;\n        max-height: ", "px;\n      }\n    }\n\n    .", " {\n      margin-right: ", "px;\n      margin-left: 0;\n    }\n\n    .", " {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "], ["\n    ", "\n    ", "\n\n    min-width: unset;\n    padding: ", "px 0;\n\n    &:hover,\n    &:focus-visible {\n      background-color: transparent;\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n    &:active {\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n    &:disabled {\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    .", ", .", " {\n      height: ", "px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      svg {\n        max-width: ", "px;\n        max-height: ", "px;\n      }\n    }\n\n    .", " {\n      margin-right: ", "px;\n      margin-left: 0;\n    }\n\n    .", " {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "])), focusVisibleA11yStyle(), fontCapsXxxs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.fillHover, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.fillHover, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.fillPressed, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.fillPressed, (_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.onFillDisabled, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.onFillDisabled, buttonClasses.startIcon, buttonClasses.endIcon, (_g = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _g === void 0 ? void 0 : _g.width, (_h = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _h === void 0 ? void 0 : _h.width, (_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _j === void 0 ? void 0 : _j.width, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
+};
+var PrimaryMinimalButton = function (props) {
     var _a;
-    var palette = getPalette(props);
-    return css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n    svg {\n      color: ", ";\n    }\n  "], ["\n    svg {\n      color: ", ";\n    }\n  "])), (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.disabled);
+    var semanticTextColors = getSemanticTextColors(props);
+    return css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n    ", "\n    color: ", ";\n  "], ["\n    ", "\n    color: ", ";\n  "])), Minimal(props), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _a === void 0 ? void 0 : _a.default);
+};
+var SecondaryMinimalButton = function (props) {
+    var _a;
+    var semanticTextColors = getSemanticTextColors(props);
+    return css(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n    ", "\n    color: ", ";\n  "], ["\n    ", "\n    color: ", ";\n  "])), Minimal(props), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary);
+};
+var StyledMinimalButton = styled(Button$1, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
+})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var sdsType = props.sdsType;
+    return css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n    "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
+});
+var StyledButtonLegacy = styled(Button$1, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
+})(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
+    if (!props.isRounded)
+        return "";
+    var corners = getCorners(props);
+    var spaces = getSpaces(props);
+    return "\n      border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    ");
+});
+var templateObject_1$O, templateObject_2$w, templateObject_3$o, templateObject_4$l, templateObject_5$f, templateObject_6$b, templateObject_7$9, templateObject_8$8, templateObject_9$4, templateObject_10$2, templateObject_11$1;
+
+var isDisabled$1 = function (props) {
+    var _a, _b;
+    var semanticComponentColors = getSemanticComponentColors(props);
+    return css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillDisabled);
 };
 var primary$2 = function (props) {
-    var colors = getColors(props);
-    var sdsSize = props.sdsSize;
-    return css(templateObject_3$o || (templateObject_3$o = __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.blue[400], colors === null || colors === void 0 ? void 0 : colors.gray[200], sdsSize === "small" ? colors === null || colors === void 0 ? void 0 : colors.blue[600] : colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[600]);
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var semanticComponentColors = getSemanticComponentColors(props);
+    return css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "], ["\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.fill, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.fill, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.fillHover, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _h === void 0 ? void 0 : _h.fillPressed);
 };
 var secondary$2 = function (props) {
-    var colors = getColors(props);
-    return css(templateObject_4$l || (templateObject_4$l = __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.blue[400]);
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var semanticComponentColors = getSemanticComponentColors(props);
+    return css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "], ["\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.fillHover, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _h === void 0 ? void 0 : _h.fillPressed);
 };
 var tertiary = function (props) {
-    var colors = getColors(props);
-    return css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n    color: ", ";\n\n    &:hover {\n      background: none;\n      color: black;\n    }\n\n    &:active {\n      color: black;\n    }\n  "], ["\n    color: ", ";\n\n    &:hover {\n      background: none;\n      color: black;\n    }\n\n    &:active {\n      color: black;\n    }\n  "])), colors === null || colors === void 0 ? void 0 : colors.gray[500]);
+    var _a, _b, _c, _d, _e, _f;
+    var semanticComponentColors = getSemanticComponentColors(props);
+    return css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: none;\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      background: none;\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "], ["\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: none;\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      background: none;\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.iconHover, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.iconHover, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconPressed, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.iconPressed);
 };
 var small$1 = function (props) {
+    var sdsType = props.sdsType;
     var iconSizes = getIconSizes(props);
-    return css(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n    &:hover {\n      background: none;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    &:hover {\n      background: none;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
+    return css(templateObject_5$e || (templateObject_5$e = __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.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, sdsType !== "tertiary" ? "margin: 7px;" : "");
 };
 var medium$1 = function (props) {
     var sdsType = props.sdsType;
     var iconSizes = getIconSizes(props);
-    if (sdsType === "primary" || sdsType === "secondary") {
-        showWarningIfFirstOccurence(SDSWarningTypes.ButtonIconMediumSize);
-    }
-    return css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n    &:hover {\n      background: none;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    &:hover {\n      background: none;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width);
+    return css(templateObject_6$a || (templateObject_6$a = __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.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, sdsType !== "tertiary" ? "margin: 7px;" : "");
 };
 var large = function (props) {
     var sdsType = props.sdsType;
     var iconSizes = getIconSizes(props);
-    return css(templateObject_8$7 || (templateObject_8$7 = __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;" : "");
+    return css(templateObject_7$8 || (templateObject_7$8 = __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 !== "tertiary" ? "margin: 5px;" : "");
 };
 var doNotForwardProps$o = [
     "on",
@@ -3747,13 +3856,13 @@ var doNotForwardProps$o = [
     "sdsIcon",
     "sdsIconProps",
 ];
-var StyledButtonIcon$2 = styled(IconButton, {
+var StyledButtonIcon = styled(IconButton, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
-})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  padding: 0;\n  ", "\n\n  ", "\n"], ["\n  padding: 0;\n  ", "\n\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
-    var on = props.on, disabled = props.disabled, sdsSize = props.sdsSize, sdsType = props.sdsType;
-    return 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));
+})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n  padding: 0;\n  ", "\n\n  ", "\n"], ["\n  padding: 0;\n  ", "\n\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
+    var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
+    return css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
 });
-var templateObject_1$O, templateObject_2$w, templateObject_3$o, templateObject_4$l, templateObject_5$f, templateObject_6$b, templateObject_7$8, templateObject_8$7, templateObject_9$3, templateObject_10$2;
+var templateObject_1$N, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$e, templateObject_6$a, templateObject_7$8, templateObject_8$7, templateObject_9$3;
 
 var ButtonIconSizeToSdsIconSize = {
     large: "xl",
@@ -3762,6 +3871,10 @@ var ButtonIconSizeToSdsIconSize = {
 };
 /**
  * @see https://mui.com/material-ui/react-button/#icon-buttons
+ *
+ * @deprecated
+ * This component is deprecated and will be removed in the next major version.
+ * Please use `Button` or `ButtonDropdown` with `sdsStyle: icon` instead.
  */
 var ButtonIcon = forwardRef(function ButtonIcon(props, ref) {
     /**
@@ -3786,25 +3899,77 @@ var ButtonIcon = forwardRef(function ButtonIcon(props, ref) {
             }
         }
     };
-    return (jsx(StyledButtonIcon$2, __assign({}, props, { ref: ref, children: iconItem() })));
+    return (jsx(StyledButtonIcon, __assign({}, props, { ref: ref, children: iconItem() })));
 });
 
-var sdsPropNames$3 = ["sdsStyle", "sdsStage", "intent", "handleSubmit"];
+/**
+ * (masoudmanson): The MUI variant prop is determined by the sdsType prop.
+ */
+var MUI_VARIANT_MAP = {
+    destructive: "contained",
+    primary: "contained",
+    secondary: "outlined",
+    tertiary: "text",
+};
+/**
+ * @see https://mui.com/material-ui/react-button/
+ */
+var Button = React__default.forwardRef(function (props, ref) {
+    var sdsStyle = props.sdsStyle, sdsType = props.sdsType;
+    if (!sdsStyle || !sdsType) {
+        showWarningIfFirstOccurence(SDSWarningTypes.ButtonMissingSDSProps);
+    }
+    if (typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean" && sdsStyle !== "minimal") {
+        showWarningIfFirstOccurence(SDSWarningTypes.ButtonMinimalIsAllCaps);
+    }
+    // isAllCaps is only used for the Minimal Button.  It defaults to true.
+    var isAllCaps = typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean" ? props === null || props === void 0 ? void 0 : props.isAllCaps : true;
+    var propsWithDefault = __assign(__assign({}, props), { isAllCaps: isAllCaps });
+    switch (true) {
+        case sdsStyle === "icon":
+            if ((props === null || props === void 0 ? void 0 : props.icon) !== undefined) {
+                // (masoudmanson): We need to remove the props that are not supported by
+                // the ButtonIcon component.
+                var excludedProps = [
+                    "startIcon",
+                    "endIcon",
+                    "sdsStyle",
+                    "isAllCaps",
+                    "sdsType",
+                ];
+                var finalProps = filterProps(propsWithDefault, excludedProps);
+                return (jsx(ButtonIcon, __assign({ icon: props === null || props === void 0 ? void 0 : props.icon }, finalProps, { sdsType: sdsType, ref: ref })));
+            }
+            else {
+                showWarningIfFirstOccurence(SDSWarningTypes.ButtonIconMissingIconProp);
+                return null;
+            }
+        case sdsStyle === "minimal":
+            return (jsx(StyledMinimalButton, __assign({ color: "primary", variant: "text" }, propsWithDefault, { ref: ref })));
+        case sdsStyle === "rounded":
+        case sdsStyle === "square":
+            return (jsx(StyledButton$3, __assign({ color: "primary", variant: sdsType ? MUI_VARIANT_MAP[sdsType] : "text" }, propsWithDefault, { ref: ref })));
+        default:
+            return jsx(StyledButtonLegacy, __assign({}, propsWithDefault, { ref: ref }));
+    }
+});
+
+var sdsPropNames$2 = ["sdsStyle", "sdsStage", "intent", "handleSubmit"];
 var rounded$3 = function (props) {
     var _a;
     var corners = getCorners(props);
     var semanticComponentColors = getSemanticComponentColors(props);
-    return css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n    .", " {\n      border-radius: ", "px;\n\n      .", " {\n        border-radius: ", "px;\n        border: 1px solid ", ";\n      }\n    }\n  "], ["\n    .", " {\n      border-radius: ", "px;\n\n      .", " {\n        border-radius: ", "px;\n        border: 1px solid ", ";\n      }\n    }\n  "])), outlinedInputClasses.root, corners === null || corners === void 0 ? void 0 : corners.l, outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.border);
+    return css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n    .", " {\n      border-radius: ", "px;\n\n      .", " {\n        border-radius: ", "px;\n        border: 1px solid ", ";\n      }\n    }\n  "], ["\n    .", " {\n      border-radius: ", "px;\n\n      .", " {\n        border-radius: ", "px;\n        border: 1px solid ", ";\n      }\n    }\n  "])), outlinedInputClasses.root, corners === null || corners === void 0 ? void 0 : corners.l, outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.border);
 };
 var error$3 = function (props) {
     var _a, _b, _c, _d;
     var semanticComponentColors = getSemanticComponentColors(props);
-    return css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _a === void 0 ? void 0 : _a.border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _b === void 0 ? void 0 : _b.border, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _c === void 0 ? void 0 : _c.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
+    return css(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _a === void 0 ? void 0 : _a.border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _b === void 0 ? void 0 : _b.border, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _c === void 0 ? void 0 : _c.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
 };
 var warning$3 = function (props) {
     var _a, _b, _c, _d;
     var semanticComponentColors = getSemanticComponentColors(props);
-    return css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _a === void 0 ? void 0 : _a.border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _b === void 0 ? void 0 : _b.border, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _c === void 0 ? void 0 : _c.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
+    return css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _a === void 0 ? void 0 : _a.border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _b === void 0 ? void 0 : _b.border, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _c === void 0 ? void 0 : _c.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
 };
 var userInput$2 = function (props) {
     var _a, _b, _c, _d, _e;
@@ -3818,21 +3983,21 @@ var userInput$2 = function (props) {
     var color = intent === "default"
         ? (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.icon
         : (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon;
-    return css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", " svg {\n      color: ", ";\n    }\n  "], ["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", " svg {\n      color: ", ";\n    }\n  "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, inputAdornmentClasses.root, color);
+    return css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", " svg {\n      color: ", ";\n    }\n  "], ["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", " svg {\n      color: ", ";\n    }\n  "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, inputAdornmentClasses.root, color);
 };
 var disabledStyled$2 = function (props) {
     var _a, _b, _c;
     var colors = getColors(props);
     var semanticComponentColors = getSemanticComponentColors(props);
-    return css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n    .", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " svg {\n        color: ", ";\n      }\n\n      &:hover .", " {\n        border: 1px solid ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "], ["\n    .", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " svg {\n        color: ", ";\n      }\n\n      &:hover .", " {\n        border: 1px solid ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, inputAdornmentClasses.root, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, colors === null || colors === void 0 ? void 0 : colors.gray[300]);
+    return css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n    .", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " svg {\n        color: ", ";\n      }\n\n      &:hover .", " {\n        border: 1px solid ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "], ["\n    .", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " svg {\n        color: ", ";\n      }\n\n      &:hover .", " {\n        border: 1px solid ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, inputAdornmentClasses.root, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, colors === null || colors === void 0 ? void 0 : colors.gray[300]);
 };
-var StyledLabel$2 = styled("label")(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyM$1, function (props) {
+var StyledLabel$2 = styled("label")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyM$1, function (props) {
     var spaces = getSpaces(props);
     return "\n      margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n      position: absolute;\n      overflow: hidden;\n      clip: rect(0 0 0 0);\n      height: 1px;\n      width: 1px;\n      margin: -1px; \n      padding: 0; \n      border: 0;\n    ");
 });
 var StyledSearchBase = styled(TextField, {
     shouldForwardProp: function (prop) {
-        return !sdsPropNames$3.includes(prop.toString());
+        return !sdsPropNames$2.includes(prop.toString());
     },
 })(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -3843,9 +4008,9 @@ var StyledSearchBase = styled(TextField, {
     return 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        cursor: pointer;\n\n        svg {\n          height: ", "px;\n          width: ", "px;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n        background-color: ", ";\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        &:hover .input-search-clear-icon,\n        &:focus-within .input-search-clear-icon {\n          opacity: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n\n          &:hover {\n            svg {\n              color: ", " !important;\n            }\n          }\n\n          &:active {\n            svg {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n        background-color: ", ";\n      }\n\n      .", ":hover\n        .", " {\n        border: 1px solid ", ";\n      }\n\n      .", ".", " {\n        .", " {\n          border: 1px solid ", ";\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        cursor: pointer;\n\n        svg {\n          height: ", "px;\n          width: ", "px;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n        background-color: ", ";\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        &:hover .input-search-clear-icon,\n        &:focus-within .input-search-clear-icon {\n          opacity: ", ";\n\n          svg {\n            color: ", " !important;\n          }\n\n          &:hover {\n            svg {\n              color: ", " !important;\n            }\n          }\n\n          &:active {\n            svg {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n        background-color: ", ";\n      }\n\n      .", ":hover\n        .", " {\n        border: 1px solid ", ";\n      }\n\n      .", ".", " {\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        .", " .", ":last-of-type {\n          cursor: default;\n          svg {\n            color: ", ";\n          }\n        }\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.surface, outlinedInputClasses.notchedOutline, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.border, value ? 1 : 0, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.surface, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.borderHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _k === void 0 ? void 0 : _k.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _l === void 0 ? void 0 : _l.icon, 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 = styled(InputAdornment)(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n  position: relative;\n  height: unset;\n  margin: 0;\n"], ["\n  position: relative;\n  height: unset;\n  margin: 0;\n"])));
-var templateObject_1$N, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$e, templateObject_6$a, templateObject_7$7, templateObject_8$6, templateObject_9$2;
+var templateObject_1$M, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$d, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$2;
 
-var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f, _g;
     var selected = props.selected;
     var colors = getColors(props);
@@ -3855,7 +4020,7 @@ var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$M || (templateObject_
     var primary = colors === null || colors === void 0 ? void 0 : colors.blue[400];
     return "\n      padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n      min-height: unset;\n      opacity: 1;\n\n      &.MuiAutocomplete-option {\n        min-height: unset;\n      }\n      \n      .primary-text {\n        font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n      }\n\n      &.MuiButtonBase-root {\n        background-color: transparent;\n        opacity: 1;\n\n        &:hover, &.").concat(menuItemClasses.focusVisible, " {\n          background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n          &[aria-selected=\"true\"] {\n            background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n          }\n        }\n      }\n\n      &.").concat(menuItemClasses.root, " .MuiSvgIcon-root {\n        align-self: flex-start;\n      }\n\n      &.").concat(menuItemClasses.root, " .").concat(menuItemClasses.disabled, " {\n        opacity: 1 !important;\n      }\n\n      &.MuiAutocomplete-option[aria-selected=\"true\"] {\n        &:hover {\n          background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n        }\n\n        svg.check-icon {\n          color: ").concat(selected ? primary : (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon, ";\n        }\n      }\n\n      &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n        opacity: 1;\n      }\n\n      &:hover {\n        background-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n        svg.check-icon {\n          color: ").concat(selected ? primary : (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.icon, ";\n        }\n      }\n\n      &.Mui-selected.MuiListItem-root.MuiListItem-button {\n        background-color: white;\n        &:hover {\n          background-color: ").concat((_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, ";\n        }\n        .primary-text {\n          font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n        }\n      }\n\n      &:active {\n        svg.check-icon {\n          color: ").concat(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 = styled("span")(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"])));
+var ContentWrapper = styled("span")(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"])));
 var disabledStyles = function (props) {
     var _a;
     var disabled = props.disabled;
@@ -3864,12 +4029,12 @@ var disabledStyles = function (props) {
     var semanticComponentColors = getSemanticComponentColors(props);
     return "\n    color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, ";\n    cursor: default;\n  ");
 };
-var TextWrapper = styled("span")(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
+var TextWrapper = styled("span")(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
     var _a;
     var semanticTextColors = getSemanticTextColors(props);
     return "\n      color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, ";\n      display: flex;\n      white-space: pre-wrap;\n    ");
 }, disabledStyles);
-var StyledMenuItemIcon = styled("span")(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledMenuItemIcon = styled("span")(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
     var disabled = props.disabled;
     var spaces = getSpaces(props);
@@ -3877,13 +4042,13 @@ var StyledMenuItemIcon = styled("span")(templateObject_4$j || (templateObject_4$
     var semanticComponentColors = getSemanticComponentColors(props);
     return "\n      margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n      margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n      .MuiSvgIcon-root {\n        ").concat(disabled ? "color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, ";") : null, "\n      }\n    ");
 });
-var ColumnWrapper = styled("span")(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
+var ColumnWrapper = styled("span")(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
     var _a;
     var semanticTextColors = getSemanticTextColors(props);
     var spaces = getSpaces(props);
     return "\n      text-align: right;\n      color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, ";\n      margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    ");
 }, disabledStyles);
-var StyledIconWrapper = styled("span")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledIconWrapper = styled("span")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
     return "\n      align-self: start;\n      margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n    ");
@@ -3912,7 +4077,7 @@ var StyledMinus = styled(Remove, {
         : (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
     return "\n      color: ".concat(selected ? selectedColor : "transparent", ";\n      padding: 0;\n      height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n      width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n\n      &.MuiCheckbox-colorPrimary.Mui-checked:hover {\n        background-color: transparent;\n      }\n    ");
 });
-var templateObject_1$M, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$d, templateObject_6$9, templateObject_7$6, templateObject_8$5;
+var templateObject_1$L, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$c, templateObject_6$8, templateObject_7$6, templateObject_8$5;
 
 /**
  * @see https://mui.com/material-ui/react-menu/
@@ -4005,10 +4170,10 @@ var InputSearch = forwardRef(function InputSearch(props, ref) {
     return (jsxs(Fragment, { children: [jsx(StyledLabel$2, { htmlFor: id, children: label }), jsx(StyledSearchBase, __assign({ ref: ref, 
                 // passed to mui Input
                 InputProps: {
-                    endAdornment: (jsx(StyledInputAdornment, { position: "end", children: jsx(ButtonIcon, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "primary", sdsSize: "small", sdsIconProps: {
+                    endAdornment: (jsx(StyledInputAdornment, { position: "end", children: jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
                                 sdsType: "iconButton",
                             }, icon: "XMarkCircle" }) })),
-                    startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(ButtonIcon, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "secondary", sdsSize: "small", sdsIconProps: {
+                    startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
                                 sdsType: "interactive",
                             }, icon: "Search" }) })),
                 }, type: "search", id: id, variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, sdsStage: hasValue ? "userInput" : "default", onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, 
@@ -4029,7 +4194,7 @@ var doNotForwardProps$n = [
 ];
 var StyledAutocompleteBase = styled(Autocomplete$1, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$n.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"])), autocompleteClasses.popper, autocompleteClasses.paper, autocompleteClasses.groupLabel, fontCapsXxxxs, function (props) {
+})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  + .", "\n    > .", "\n    .", " {\n    ", "\n  }\n\n  ", "\n"], ["\n  + .", "\n    > .", "\n    .", " {\n    ", "\n  }\n\n  ", "\n"])), autocompleteClasses.popper, autocompleteClasses.paper, autocompleteClasses.groupLabel, fontCapsXxxxs, function (props) {
     var _a, _b, _c, _d, _e;
     var search = props.search;
     var spaces = getSpaces(props);
@@ -4040,7 +4205,7 @@ var StyledAutocompleteBase = styled(Autocomplete$1, {
 });
 var InputBaseWrapper$1 = styled("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
-})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var search = props.search;
     if (!search) {
         // (thuang): We cannot use `display: none;` here, since
@@ -4051,11 +4216,11 @@ var InputBaseWrapper$1 = styled("div", {
 });
 var StyledMenuInputSearch$1 = styled(InputSearch, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
-})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  margin: 0;\n  .MuiInputBase-root {\n    width: 100%;\n  }\n  /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n  caret-color: ", ";\n"], ["\n  margin: 0;\n  .MuiInputBase-root {\n    width: 100%;\n  }\n  /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n  caret-color: ", ";\n"])), function (_a) {
+})(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$3 = styled(Paper)(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledPaper$3 = styled(Paper)(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
     var spaces = getSpaces(props);
     var corners = getCorners(props);
@@ -4064,13 +4229,13 @@ var StyledPaper$3 = styled(Paper)(templateObject_4$i || (templateObject_4$i = __
     var semanticComponentColors = getSemanticComponentColors(props);
     return "\n      padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ;\n      background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n      box-sizing: border-box;\n    ");
 });
-var StyledMenuItemDetails = styled("div")(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyXxs$1, function (props) {
+var StyledMenuItemDetails = styled("div")(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a;
     var semanticTextColors = getSemanticTextColors(props);
     return "\n      color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n      white-space: pre-wrap;\n    ");
 });
-var StyledMenuItemText = styled("div")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var templateObject_1$L, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$c, templateObject_6$8;
+var StyledMenuItemText = styled("div")(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var templateObject_1$K, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$b, templateObject_6$7;
 
 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;
@@ -4123,9 +4288,9 @@ var AutocompleteBase = function (props) {
                      * (thuang): Works with css caret-color: "transparent" to hide
                      * mobile keyboard
                      */
-                    inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsx(ButtonIcon, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "primary", sdsSize: "small", sdsIconProps: {
+                    inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
                                 sdsType: "iconButton",
-                            }, icon: "XMarkCircle" })) })), inputProps: params.inputProps, startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(ButtonIcon, { "aria-label": "search-button", onClick: clearInput, sdsType: "secondary", sdsSize: "small", sdsIconProps: {
+                            }, icon: "XMarkCircle" })) })), inputProps: params.inputProps, startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
                                 sdsType: "interactive",
                             }, icon: "Search" }) })) }) }, InputBaseProps)) }));
     }
@@ -4191,27 +4356,27 @@ var AutocompleteBase = function (props) {
     }
 };
 
-var StyledColumn = styled("div")(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledColumn = styled("div")(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
     var _b = props.width, width = _b === void 0 ? 280 : _b;
     var spaces = getSpaces(props);
     var borders = getBorders(props);
     return "\n      position: relative;\n      width: ".concat(width, "px;\n\n      &:not(:last-child) {\n        border-right: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      }\n\n      // (masoudmanson): This code hides the relation icon of the last column\n      &:last-of-type {\n        .SdsAutocompleteMultiColumn-column-relation-icon {\n          display: none;\n        }\n      }\n    ");
 });
-var StyledColumnTitle = styled("p")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontCapsXxxxs, function (props) {
+var StyledColumnTitle = styled("p")(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontCapsXxxxs, function (props) {
     var _a;
     var spaces = getSpaces(props);
     var semanticTextColors = getSemanticTextColors(props);
     return "\n      color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n      padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n      margin: 0;\n    ");
 });
-var StyledColumnIcon = styled("span")(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledColumnIcon = styled("span")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
     var semanticComponentColors = getSemanticComponentColors(props);
     return "\n      background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n      position: absolute;\n      right: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n      top: -2px;\n      padding-bottom: 2px;\n\n      svg {\n        color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, ";\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$k;
+var templateObject_1$J, templateObject_2$r, 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"]);
@@ -4266,7 +4431,7 @@ var StyledPopper$2 = styled(Popper, {
     shouldForwardProp: function (prop) {
         return !doNotForwardProps$m.includes(prop) || prop === "anchorEl";
     },
-})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
     var corners = getCorners(props);
     var shadows = getShadows(props);
@@ -4277,21 +4442,21 @@ var StyledPopper$2 = styled(Popper, {
 });
 var StyledPaper$2 = styled(Paper, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
-})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var shadows = getShadows(props);
     return "\n      box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n      margin: 0;\n      border-radius: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n    ");
 });
-var StyledAutocompleteGroupWrapper = styled("div")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var StyledAutocompleteGroupWrapper = styled("div")(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var StyledAutocompleteInput = styled(InputSearch, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
-})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  ", "\n\n  margin: 0;\n  .MuiInputBase-root {\n    width: 100%;\n  }\n  /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n  caret-color: ", ";\n"], ["\n  ", "\n\n  margin: 0;\n  .MuiInputBase-root {\n    width: 100%;\n  }\n  /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n  caret-color: ", ";\n"])), function (_a) {
+})(templateObject_4$g || (templateObject_4$g = __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$j, templateObject_4$h;
+var templateObject_1$I, templateObject_2$q, templateObject_3$i, templateObject_4$g;
 
 var AutocompleteMultiColumn = function (props) {
     var _a;
@@ -4318,14 +4483,14 @@ var AutocompleteMultiColumn = function (props) {
         });
         onChange === null || onChange === void 0 ? void 0 : onChange(event, __assign(__assign({}, autocompleteMultiColumnValue), (_a = {}, _a[column] = val, _a)), reason, details);
     };
-    return (jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs("div", { children: [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: (jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsx(ButtonIcon, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "primary", sdsSize: "small", sdsIconProps: {
+    return (jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs("div", { children: [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: (jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
                                     sdsType: "iconButton",
                                 }, icon: "XMarkCircle", onClick: clearInput })) })), 
                         /**
                          * (thuang): Works with css caret-color: "transparent" to hide
                          * mobile keyboard
                          */
-                        inputMode: "text", startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(ButtonIcon, { "aria-label": "search-button", sdsType: "secondary", sdsSize: "small", sdsIconProps: {
+                        inputMode: "text", startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
                                     sdsType: "interactive",
                                 }, icon: "Search" }) })) }) }, InputBaseProps)), anchorEl && (jsx(PopperComponent, __assign({ modifiers: [
                         {
@@ -4398,25 +4563,25 @@ var Autocomplete = function (props) {
     }
 };
 
-var Centered = 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 = styled("div")(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var Centered = styled("div")(templateObject_1$H || (templateObject_1$H = __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 = styled("div")(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var iconSizes = getIconSizes(props);
     var spaces = getSpaces(props);
     return "\n      height: ".concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    ");
 });
 var doNotForwardPropsButtonIcon = ["bannerType", "textChild"];
-var StyledButtonIcon$1 = styled(ButtonIcon, {
+var StyledButton$2 = styled(Button, {
     shouldForwardProp: function (prop) {
         return !doNotForwardPropsButtonIcon.includes(prop);
     },
-})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  flex: 0 0 auto;\n\n  ", "\n"], ["\n  flex: 0 0 auto;\n\n  ", "\n"])), function (props) {
+})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  flex: 0 0 auto;\n\n  ", "\n"], ["\n  flex: 0 0 auto;\n\n  ", "\n"])), function (props) {
     var bannerType = props.bannerType;
     var colors = getColors(props);
     if (bannerType !== "primary")
         return "";
     return "\n      svg:hover {\n        fill: ".concat(colors === null || colors === void 0 ? void 0 : colors.blue[300], ";\n      }\n    ");
 });
-styled("div")(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), fontBodyS$1);
+styled("div")(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), fontBodyS$1);
 var primary$1 = function (props) {
     var _a, _b, _c;
     var semanticComponentColors = getSemanticComponentColors(props);
@@ -4432,12 +4597,12 @@ var secondary$1 = function (props) {
 var doNotForwardProps$l = ["sdsType", "textChild"];
 var StyledBanner = styled("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
-})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
+})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
     var sdsType = props.sdsType;
     var spaces = getSpaces(props);
     return "\n      display: flex;\n      align-items: center;\n      padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n  \n      ").concat(sdsType === "primary" ? primary$1(props) : "", "\n      ").concat(sdsType === "secondary" ? secondary$1(props) : "", "\n    ");
 });
-var templateObject_1$I, templateObject_2$q, templateObject_3$i, templateObject_4$g, templateObject_5$b;
+var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$a;
 
 var Banner = forwardRef(function Banner(props, ref) {
     var children = props.children, dismissed = props.dismissed, _a = props.dismissible, dismissible = _a === void 0 ? true : _a, onClose = props.onClose, sdsType = props.sdsType, icon = props.icon, sdsIconProps = props.sdsIconProps, rest = __rest(props, ["children", "dismissed", "dismissible", "onClose", "sdsType", "icon", "sdsIconProps"]);
@@ -4465,124 +4630,44 @@ var Banner = forwardRef(function Banner(props, ref) {
             return (jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l", sdsType: "static" }, sdsIconProps)));
         }
     };
-    return (jsxs(StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [jsxs(Centered, { children: [jsx(IconWrapper$1, { children: iconItem() }), children] }), dismissible && (jsx(StyledButtonIcon$1, { "aria-label": "Close", bannerType: sdsType, sdsType: "tertiary", sdsSize: "small", onClick: handleClose, icon: "XMark" }))] })));
+    return (jsxs(StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [jsxs(Centered, { children: [jsx(IconWrapper$1, { children: iconItem() }), children] }), dismissible && (jsx(StyledButton$2, { "aria-label": "Close", bannerType: sdsType, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", onClick: handleClose, icon: "XMark" }))] })));
 });
 
-var sdsPropNames$2 = ["isAllCaps", "isRounded", "sdsStyle", "sdsType"];
-var ButtonBase = styled(Button$1, {
-    shouldForwardProp: function (prop) { return !sdsPropNames$2.includes(prop); },
-})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n"])), fontBodySemiboldXs, focusVisibleA11yStyle, function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var variant = props.variant, startIcon = props.startIcon, endIcon = props.endIcon;
-    var spaces = getSpaces(props);
-    var shadows = getShadows(props);
-    var iconSizes = getIconSizes(props);
-    var semanticTextColors = getSemanticTextColors(props);
-    var semanticComponentColors = getSemanticComponentColors(props);
-    var hasIcon = !!startIcon || !!endIcon;
-    // (masoudmanson): The padding for the contained variant depends on the presence of an icon.
-    // If the component has either a startIcon or endIcon, the padding will be different.
-    // If the component doesn't have any icon at all, the padding will be different.
-    var containedPadding = hasIcon
-        ? "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px")
-        : "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px");
-    // (thuang): outline variant has border 1px, so padding needs to be smaller
-    var outlinedPadding = hasIcon
-        ? "".concat(((spaces === null || spaces === void 0 ? void 0 : spaces.xxs) || 0) - 1, "px ").concat(((spaces === null || spaces === void 0 ? void 0 : spaces.m) || 0) - 1, "px")
-        : "".concat(((spaces === null || spaces === void 0 ? void 0 : spaces.xs) || 0) - 1, "px ").concat(((spaces === null || spaces === void 0 ? void 0 : spaces.m) || 0) - 1, "px");
-    var padding = variant === "outlined" ? outlinedPadding : containedPadding;
-    var outlineBorder = variant === "outlined"
-        ? "border-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.border, ";")
-        : "";
-    return "\n      ".concat(outlineBorder, "\n      padding: ").concat(padding, ";\n      min-width: 120px;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n\n      &:hover {\n        color: ").concat((_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill, ";\n        background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n      }\n\n      &:active {\n        color: ").concat((_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.onFill, ";\n        background-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.fillPressed, ";\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n      }\n\n      &:disabled {\n        color: ").concat((_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.onFillDisabled, ";\n        background-color: ").concat((_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.fillDisabled, ";\n        border-color: ").concat((_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.borderDisabled, ";\n      }\n\n      .").concat(buttonClasses.startIcon, ", .").concat(buttonClasses.endIcon, " {\n        width: ").concat((_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _j === void 0 ? void 0 : _j.width, "px;\n        height: ").concat((_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _k === void 0 ? void 0 : _k.width, "px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        svg {\n          max-width: ").concat((_l = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _l === void 0 ? void 0 : _l.width, "px;\n          max-height: ").concat((_m = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _m === void 0 ? void 0 : _m.width, "px;\n        }\n      }\n\n      .").concat(buttonClasses.startIcon, " {\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        margin-left: 0;\n      }\n\n      .").concat(buttonClasses.endIcon, " {\n        margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        margin-right: 0;\n      }\n    ");
-});
-var RoundedButton = styled(ButtonBase, {
-    shouldForwardProp: function (prop) { return !sdsPropNames$2.includes(prop); },
-})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var corners = getCorners(props);
-    return "\n      border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n    ");
-});
-var SquareButton = ButtonBase;
-var MinimalButton = styled(Button$1, {
-    shouldForwardProp: function (prop) { return !sdsPropNames$2.includes(prop); },
-})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n  &:hover, &:focus-visible {\n    background-color: transparent;\n  }\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n  &:hover, &:focus-visible {\n    background-color: transparent;\n  }\n"])), focusVisibleA11yStyle, function (props) {
-    var spaces = getSpaces(props);
-    return "\n      padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0;\n    ");
-}, function (props) {
-    if (props === null || props === void 0 ? void 0 : props.isAllCaps) {
-        return fontCapsXxxs;
-    }
-    return "";
-});
-var minimal$2 = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var spaces = getSpaces(props);
-    var iconSizes = getIconSizes(props);
-    var semanticTextColors = getSemanticTextColors(props);
-    var semanticComponentColors = getSemanticComponentColors(props);
-    return "\n    &:hover, &:focus-visible {\n      color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n    }\n    &:active {\n      color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.fillPressed, ";\n    }\n    &:disabled {      \n      color: ").concat((_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.onFillDisabled, ";\n    }\n\n    .").concat(buttonClasses.startIcon, ", .").concat(buttonClasses.endIcon, " {\n      width: ").concat((_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _d === void 0 ? void 0 : _d.width, "px;\n      height: ").concat((_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _e === void 0 ? void 0 : _e.width, "px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      svg {\n        max-width: ").concat((_f = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _f === void 0 ? void 0 : _f.width, "px;\n        max-height: ").concat((_g = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _g === void 0 ? void 0 : _g.width, "px;\n      }\n    }\n\n    .").concat(buttonClasses.startIcon, " {\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n    }\n\n    .").concat(buttonClasses.endIcon, " {\n      margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n    }\n  ");
+var BUTTON_ICON_SIZE_TO_SDS_ICON_SIZE = {
+    large: "xl",
+    medium: "l",
+    small: "s",
 };
-var PrimaryMinimalButton = styled(MinimalButton)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), minimal$2);
-var SecondaryMinimalButton = styled(MinimalButton)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), minimal$2, function (props) {
-    var _a;
-    var semanticTextColors = getSemanticTextColors(props);
-    return "\n      color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, ";\n    ");
-});
-var StyledButton$1 = styled(Button$1, {
-    shouldForwardProp: function (prop) { return !sdsPropNames$2.includes(prop); },
-})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), focusVisibleA11yStyle, function (props) {
-    if (!props.isRounded)
-        return "";
-    var corners = getCorners(props);
-    var spaces = getSpaces(props);
-    return "\n      border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      min-width: 120px;\n    ");
-});
-var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$a, templateObject_6$7;
-
 /**
  * @see https://mui.com/material-ui/react-button/
  */
-var Button = React__default.forwardRef(function (props, ref) {
-    var sdsStyle = props === null || props === void 0 ? void 0 : props.sdsStyle;
-    var sdsType = props === null || props === void 0 ? void 0 : props.sdsType;
-    if (!sdsStyle || !sdsType) {
-        showWarningIfFirstOccurence(SDSWarningTypes.ButtonMissingSDSProps);
-    }
-    if (typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean" && sdsStyle !== "minimal") {
-        // eslint-disable-next-line no-console
-        console.warn("Warning: isAllCaps is only applied to buttons with sdsStyle='minimal'.");
+var ButtonDropdown = React__default.forwardRef(function (props, ref) {
+    var icon = props.icon, sdsStyle = props.sdsStyle, sdsType = props.sdsType, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, sdsIconProps = props.sdsIconProps;
+    var iconSize = BUTTON_ICON_SIZE_TO_SDS_ICON_SIZE[sdsSize];
+    var iconItem = function () {
+        if (icon) {
+            if (typeof icon !== "string") {
+                return icon;
+            }
+            else {
+                return (jsx(Icon, __assign({ sdsType: "iconButton" }, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
+            }
+        }
+    };
+    if (sdsStyle === "icon") {
+        if (icon !== undefined) {
+            return jsx(ButtonIcon, __assign({ icon: icon }, props, { ref: ref }));
+        }
+        else {
+            showWarningIfFirstOccurence(SDSWarningTypes.ButtonIconMissingIconProp);
+            return null;
+        }
     }
-    // isAllCaps is only used for the Minimal Button.  It defaults to true.
-    var isAllCaps = typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean" ? props === null || props === void 0 ? void 0 : props.isAllCaps : true;
-    var propsWithDefault = __assign(__assign({}, props), { isAllCaps: isAllCaps });
-    switch (true) {
-        case sdsStyle === "rounded" && sdsType === "primary":
-            return (jsx(RoundedButton, __assign({ color: "primary", ref: ref, variant: "contained" }, propsWithDefault)));
-        case sdsStyle === "rounded" && sdsType === "secondary":
-            return (jsx(RoundedButton, __assign({ color: "primary", ref: ref, variant: "outlined" }, propsWithDefault)));
-        case sdsStyle === "square" && sdsType === "primary":
-            return (jsx(SquareButton, __assign({ color: "primary", ref: ref, variant: "contained" }, propsWithDefault)));
-        case sdsStyle === "square" && sdsType === "secondary":
-            return (jsx(SquareButton, __assign({ color: "primary", ref: ref, variant: "outlined" }, propsWithDefault)));
-        case sdsStyle === "minimal" && sdsType === "primary":
-            return (jsx(PrimaryMinimalButton, __assign({ color: "primary", ref: ref, variant: "text" }, propsWithDefault)));
-        case sdsStyle === "minimal" && sdsType === "secondary":
-            return (jsx(SecondaryMinimalButton, __assign({ color: "primary", ref: ref, variant: "text" }, propsWithDefault)));
-        default:
-            return jsx(StyledButton$1, __assign({}, propsWithDefault, { ref: ref }));
+    else {
+        return (jsx(Button, __assign({}, props, { endIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "button" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: iconItem() })));
     }
 });
 
-/**
- * @see https://mui.com/material-ui/react-button/
- */
-var ButtonDropdown = React__default.forwardRef(function (props, ref) {
-    var icon = props === null || props === void 0 ? void 0 : props.icon;
-    var sdsStyle = props === null || props === void 0 ? void 0 : props.sdsStyle;
-    var sdsType = props === null || props === void 0 ? void 0 : props.sdsType;
-    return (jsx(Button, __assign({}, props, { endIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "button" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: icon })));
-});
-
 var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
 
 var doNotForwardProps$k = ["calloutTitle", "collapsed", "severity"];
@@ -4659,11 +4744,11 @@ var Callout = function (_a) {
     };
     var getAction = function (collapsed) {
         if (expandable) {
-            return (jsx(ButtonIcon, { "aria-label": collapsed ? "open" : "close", onClick: function () {
+            return (jsx(Button, { "aria-label": collapsed ? "open" : "close", onClick: function () {
                     setStage(collapsed ? SDS_STAGE_OPEN : SDS_STAGE_CLOSED);
-                }, sdsSize: "small", sdsType: "tertiary", icon: collapsed ? "ChevronDown" : "ChevronUp" }));
+                }, sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon", icon: collapsed ? "ChevronDown" : "ChevronUp" }));
         }
-        return onClose ? (jsx(ButtonIcon, { "aria-label": "Dismiss", onClick: handleClose, sdsSize: "small", sdsType: "tertiary", size: "large", icon: "XMark" })) : null;
+        return onClose ? (jsx(Button, { "aria-label": "Dismiss", onClick: handleClose, sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon", size: "large", icon: "XMark" })) : null;
     };
     var collapsed = (expandable && stage === SDS_STAGE_CLOSED) || false;
     // when there is no CalloutTitlecomponent, or there is a single child element
@@ -5051,6 +5136,10 @@ var templateObject_1$A, templateObject_2$l, templateObject_3$d, templateObject_4
 
 /**
  * @see https://mui.com/material-ui/react-chip/
+ *
+ * @deprecated
+ * This component is deprecated and will be removed in the next major version.
+ * Please use `Tag` or `TagFilter` instead.
  */
 var Chip = function (props) {
     showWarningIfFirstOccurence(SDSWarningTypes.ChipDeprecated);
@@ -5140,6 +5229,17 @@ var DropdownMenu = function (props) {
         sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [title && (jsx(StyledHeaderTitle, { search: search, children: title })), anchorEl && (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 doNotForwardProps$e = [
+    "intent",
+    "state",
+    "sdsStage",
+    "sdsType",
+    "isMinimal",
+    "shouldTruncateMinimalDetails",
+    "shouldPutAColonAfterLabel",
+    "value",
+    "sdsStyle",
+];
 var labelFontBodyS = fontBody("s", "regular");
 var labelFontBodyXs = fontBody("xs", "regular");
 var inputDropdownStyles = function (props) {
@@ -5200,15 +5300,14 @@ var isDisabled = function (props) {
     var semanticCommonColors = getSemanticComponentColors(props);
     return 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  "])), (_a = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.disabled, (_d = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.base) === null || _d === void 0 ? void 0 : _d.fillDisabled);
 };
-var doNotForwardProps$e = [
-    "intent",
-    "state",
-    "sdsStage",
-    "sdsType",
-    "isMinimal",
-    "shouldTruncateMinimalDetails",
-    "shouldPutAColonAfterLabel",
-];
+/**
+ * (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
+ * temporary fix for the issue where the props are not correctly passed to
+ * the underlying Button component. This is a workaround until a more permanent
+ * solution is implemented. As a result of this fix, the style prop is not
+ * passed to the underlying Button component. So we have added the style prop
+ * to the InputDropdownProps interface.
+ */
 var StyledInputDropdown = styled(Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$e.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) {
@@ -5473,7 +5572,7 @@ var templateObject_1$w, templateObject_2$h;
  * @see https://mui.com/material-ui/react-chip/
  */
 var TagFilter = function (props) {
-    return (jsx(StyledTag, __assign({ role: "none presentation" }, props, { deleteIcon: jsx(ButtonIcon, { "aria-label": "Delete Tag", icon: "XMark", sdsSize: "small", sdsType: "tertiary" }), color: "info" })));
+    return (jsx(StyledTag, __assign({ role: "none presentation" }, props, { deleteIcon: jsx(Button, { "aria-label": "Delete Tag", icon: "XMark", sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon" }), color: "info" })));
 };
 
 var Chips = function (_a) {
@@ -5645,7 +5744,7 @@ function DialogContent(props, ref) {
     return jsx(StyledDialogContent, __assign({ ref: ref }, props));
 });
 
-var StyledButtonIcon = styled(ButtonIcon)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  position: absolute;\n\n  ", "\n"], ["\n  position: absolute;\n\n  ", "\n"])), function (props) {
+var StyledButton$1 = styled(Button)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  position: absolute;\n\n  ", "\n"], ["\n  position: absolute;\n\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     return "\n      right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n    ");
 });
@@ -5661,7 +5760,7 @@ var CloseButton = forwardRef(function CloseButton(props, ref) {
     return (jsx(DialogContext.Consumer, { children: function (_a) {
             var sdsSize = _a.sdsSize;
             var size = SDS_SIZE_TO_COMPONENT_SIZE[sdsSize];
-            return (jsx(StyledButtonIcon, __assign({ "aria-label": "Close", ref: ref, sdsType: "tertiary", sdsSize: size }, props, { icon: "XMark" })));
+            return (jsx(StyledButton$1, __assign({ "aria-label": "Close", ref: ref, sdsSize: size }, props, { icon: "XMark", sdsStyle: "icon", sdsType: "tertiary" })));
         } }));
 });
 
@@ -5741,7 +5840,7 @@ var Dropdown = function (props) {
             setValue(propValue);
         }
     }, [isControlled, propValue]);
-    return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, { "data-testid": "dropdown" })), 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 ? (jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxs("div", { children: [jsx(StyledButton, { onClick: handleClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxs("div", { children: [jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsx(StyledButton, { onClick: handleClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
+    return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, { "data-testid": "dropdown" })), 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 ? (jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxs("div", { children: [jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxs("div", { children: [jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
     function getInitialValue() {
         return multiple
             ? []
@@ -5816,6 +5915,9 @@ var Dropdown = function (props) {
             setOpen(false);
         }
     }
+    function handleButtonClose(event) {
+        handleClose(event, "selectOption");
+    }
     function handleCancel() {
         if (multiple) {
             // (masoudmanson): To undo the latest actions made on the selections,
@@ -6402,6 +6504,10 @@ var templateObject_1$d, templateObject_2$7, templateObject_3$3, templateObject_4
 
 /**
  * @see https://mui.com/material-ui/react-autocomplete/
+ *
+ * @deprecated
+ * This component is deprecated and will be removed in the next major version.
+ * Please use `Autocomplete` or `Dropdown` instead.
  */
 var MenuSelect = function (props) {
     var _a = props.keepSearchOnSelect, keepSearchOnSelect = _a === void 0 ? true : _a, _b = props.multiple, multiple = _b === void 0 ? false : _b, _c = props.getOptionLabel, getOptionLabel = _c === void 0 ? defaultGetOptionLabel : _c, _d = props.renderTags, renderTags = _d === void 0 ? defaultRenderTags : _d, _e = props.renderOption, renderOption = _e === void 0 ? defaultRenderOption : _e, _f = props.disableCloseOnSelect, disableCloseOnSelect = _f === void 0 ? multiple : _f, _g = props.noOptionsText, noOptionsText = _g === void 0 ? "No options" : _g, _h = props.search, search = _h === void 0 ? false : _h, _j = props.InputBaseProps, InputBaseProps = _j === void 0 ? {} : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k;
@@ -6420,7 +6526,7 @@ var MenuSelect = function (props) {
                      * (thuang): Works with css caret-color: "transparent" to hide
                      * mobile keyboard
                      */
-                    inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(ButtonIcon, { sdsType: "secondary", sdsSize: "small", sdsIconProps: {
+                    inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Button, { sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
                                 sdsType: "interactive",
                             }, icon: "Search" }) })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onInputChange: function (event, value, reason) {
             if (event && event.type === "blur") {
@@ -6734,7 +6840,7 @@ var Notification = function (_a) {
             }
         }
     };
-    return (jsx(Fragment, { children: jsx(Slide, { in: !hide, direction: slideDirection, mountOnEnter: true, unmountOnExit: true, timeout: 250, children: jsx(Box, { children: jsxs(StyledNotification, __assign({ onClose: onClose ? handleClose : undefined, action: onClose ? (jsx(ButtonIcon, { onClick: handleClose, sdsSize: "small", sdsType: "tertiary", "data-testid": "notificationCloseButton", icon: "XMark" })) : null, icon: getIcon(), className: "elevated", intent: intent, slideDirection: slideDirection }, passedProps, { children: [children, buttonOnClick !== undefined && (jsx(StyledButtonWrapper, { buttonPosition: buttonPosition, children: jsx(Button, { sdsStyle: "minimal", sdsType: "secondary", onClick: buttonOnClick, children: buttonText }) }))] })) }) }) }));
+    return (jsx(Fragment, { children: jsx(Slide, { in: !hide, direction: slideDirection, mountOnEnter: true, unmountOnExit: true, timeout: 250, children: jsx(Box, { children: jsxs(StyledNotification, __assign({ onClose: onClose ? handleClose : undefined, action: onClose ? (jsx(Button, { onClick: handleClose, sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon", "data-testid": "notificationCloseButton", icon: "XMark" })) : null, icon: getIcon(), className: "elevated", intent: intent, slideDirection: slideDirection }, passedProps, { children: [children, buttonOnClick !== undefined && (jsx(StyledButtonWrapper, { buttonPosition: buttonPosition, children: jsx(Button, { sdsStyle: "minimal", sdsType: "secondary", onClick: buttonOnClick, children: buttonText }) }))] })) }) }) }));
 };
 
 var doNotForwardProps$2 = [
@@ -6750,13 +6856,10 @@ var doNotForwardProps$2 = [
     "pageSize",
     "truncateDropdown",
 ];
-var StyledPaginationButtonIcon = styled(ButtonIcon, {
-    shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
-})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledPaginationButton = styled(Button)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c;
-    var disabled = props.disabled;
     var semanticComponentColors = getSemanticComponentColors(props);
-    return "\n      width: 32px;\n      height: 32px;\n      cursor: ".concat(disabled ? "auto" : "pointer", ";\n\n      & .MuiSvgIcon-root {\n        width: 10px;\n        color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon, "\n      }\n\n      &:hover {\n        background-color: ").concat(disabled ? "transparent" : (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n\n        & .MuiSvgIcon-root {\n          color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.iconHover, "\n        }\n      }\n    ");
+    return "\n      width: 32px;\n      height: 32px;\n      cursor: \"pointer\";\n\n      & .MuiSvgIcon-root {\n        width: 10px;\n        color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon, "\n      }\n\n      &:hover {\n        background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n\n        & .MuiSvgIcon-root {\n          color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.iconHover, "\n        }\n      }\n    ");
 });
 var StyledPaginationChevronList = styled("li", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
@@ -6801,7 +6904,7 @@ var PageListDropdown = function (props) {
     var handleClose = function () {
         setAnchorEl(null);
     };
-    return (jsxs(Page, { sdsStyle: sdsStyle, children: [jsx(StyledPaginationButtonIcon, { "aria-label": "Go to a page", onClick: handleClick, icon: "DotsHorizontal", sdsSize: "small" }), jsx(StyledPaginationDropdownMenu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, children: pageList.map(function (page) {
+    return (jsxs(Page, { sdsStyle: sdsStyle, children: [jsx(StyledPaginationButton, { "aria-label": "Go to a page", onClick: handleClick, icon: "DotsHorizontal", sdsSize: "small", sdsStyle: "icon", sdsType: "tertiary" }), jsx(StyledPaginationDropdownMenu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, children: pageList.map(function (page) {
                     return (jsx(MenuItem, { onClick: function () {
                             onPageChange(page);
                             handleClose();
@@ -6884,7 +6987,7 @@ var Pagination = forwardRef(function (props, ref) {
                     if (truncateDropdown) {
                         return (jsx(PageListDropdown, { pageList: pageNumber, onPageChange: onPageChange, sdsStyle: sdsStyle }, pageNumber.join("-")));
                     }
-                    return (jsx(Page, { sdsStyle: sdsStyle, children: jsx(StyledPaginationButtonIcon, { "aria-label": "Go to a page", disabled: true, icon: "DotsHorizontal", sdsSize: "small" }) }, pageNumber.join("-")));
+                    return (jsx(Page, { sdsStyle: sdsStyle, children: jsx(StyledPaginationButton, { "aria-label": "Go to a page", disabled: true, icon: "DotsHorizontal", sdsSize: "small", sdsStyle: "icon", sdsType: "tertiary" }) }, pageNumber.join("-")));
                 }
                 return (jsx(Page, { onClick: function () { return onPageChange(pageNumber); }, selected: pageNumber === currentPage, sdsStyle: sdsStyle, children: pageNumber }, pageNumber));
             }), jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, children: jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs", sdsType: "button" }) }, "onNextPage")] })));
@@ -7180,4 +7283,4 @@ var TooltipTableContent = function (props) {
     return (jsxs(TableContainer, __assign({}, rest, { children: [contentAlert && jsx(Alert, { children: contentAlert }), data === null || data === void 0 ? void 0 : data.map(function (section, index) { return (jsxs(Section, { disabled: section.disabled, children: [jsx(SectionLabel, { disabled: section.disabled, label: section.label, children: section.label }), jsx(Table$1, { size: "small", children: jsx(TableBody, { children: section.dataRows.map(function (row, rowIndex) { return (jsxs(TableRow$1, { children: [jsx(RowLabel, { disabled: section.disabled, align: "left", children: row.label }), jsx(RowValue, { disabled: section.disabled, align: itemAlign, children: row.value })] }, row.label + String(rowIndex))); }) }) })] }, "".concat(section.label + String(index)))); })] })));
 };
 
-export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationJumpTo, Notification, Pagination, SDSAppTheme, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getColors, getCorners, getFontWeights, getIconSizes, getPalette, getSemanticComponentColors, getSemanticTextColors, getShadows, getSpaces, getSpacings, getTypography };
+export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationJumpTo, Notification, Pagination, SDSAppTheme, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getColors, getCorners, getFontWeights, getIconSizes, getPalette, getSemanticComponentColors, getSemanticTextColors, getShadows, getSpaces, getSpacings, getTypography, makeThemeOptions };