@czi-sds/components 21.7.0 → 21.7.1

package/dist/index.cjs.js

@@ -139,12 +139,12 @@ var SDSLightThemeColors = {
     purple: {
         "100": "#efeafe",
         "200": "#e4dbfc",
-        "300": "#cbbaf8",
+        "300": "#cbbaF8",
         "400": "#b296f2",
         "500": "#8b54e2",
         "600": "#6526b5",
         "700": "#490092",
-        "800": "#1a004c",
+        "800": "#26004c",
     },
     red: {
         "100": "#ffe8e6",
@@ -152,31 +152,31 @@ var SDSLightThemeColors = {
         "300": "#ffafa8",
         "400": "#ff7e78",
         "500": "#db2131",
-        "600": "#980013",
+        "600": "#980017",
         "700": "#6f0008",
         "800": "#340000",
     },
     yellow: {
-        "100": "#ffefcf",
+        "100": "#fff3db",
         "200": "#ffdb97",
         "300": "#ffca5c",
         "400": "#fab700",
         "500": "#da9900",
-        "600": "#b77800",
+        "600": "#b07300",
         "700": "#7c3e00",
         "800": "#541700",
     },
 };
 var SDSDarkThemeColors = {
     blue: {
-        "100": "#002573",
-        "200": "#0048c5",
-        "300": "#2573f4",
-        "400": "#5b9aff",
-        "500": "#a2c9ff",
-        "600": "#cde3ff",
-        "700": "#e2eeff",
-        "800": "#f7faff",
+        "100": "#0f1d4a",
+        "200": "#0a216e",
+        "300": "#0647b8",
+        "400": "#2573f4",
+        "500": "#5b9aff",
+        "600": "#a2c9ff",
+        "700": "#cde3ff",
+        "800": "#e2eeff",
     },
     gray: {
         "100": "#333333",
@@ -192,44 +192,44 @@ var SDSDarkThemeColors = {
         "900": "#ffffff",
     },
     green: {
-        "100": "#053918",
-        "200": "#12612e",
-        "300": "#288b49",
-        "400": "#43ae63",
-        "500": "#85d898",
-        "600": "#bcecc5",
-        "700": "#daf4de",
-        "800": "#f7fbf6",
+        "100": "#082608",
+        "200": "#063617",
+        "300": "#10632e",
+        "400": "#278b48",
+        "500": "#4bae68",
+        "600": "#85d898",
+        "700": "#bcecc5",
+        "800": "#daf4de",
     },
     purple: {
-        "100": "#4b0190",
-        "200": "#6b2ebc",
-        "300": "#905de6",
-        "400": "#aa89ef",
-        "500": "#cebef8",
-        "600": "#e4dcfc",
-        "700": "#f0ebfe",
-        "800": "#fbf9ff",
+        "100": "#331252",
+        "200": "#410f70",
+        "300": "#6429b2",
+        "400": "#905de6",
+        "500": "#aa89ef",
+        "600": "#cebef8",
+        "700": "#e4dcfc",
+        "800": "#f0ebfe",
     },
     red: {
-        "100": "#630008",
-        "200": "#A30000",
-        "300": "#E52722",
-        "400": "#FF695B",
-        "500": "#FF9385",
-        "600": "#FFBDB3",
-        "700": "#FFD8D1",
-        "800": "#FFF1EE",
+        "100": "#330603",
+        "200": "#660a12",
+        "300": "#9e1c1c",
+        "400": "#c73028",
+        "500": "#e05043",
+        "600": "#ff988a",
+        "700": "#ffbdb3",
+        "800": "#ffd8d1",
     },
     yellow: {
-        "100": "#552300",
-        "200": "#834500",
-        "300": "#985a00",
-        "400": "#ac6c00",
-        "500": "#cf8e00",
-        "600": "#efad00",
-        "700": "#ffdc9a",
-        "800": "#fcf2e3",
+        "100": "#361b07",
+        "200": "#52270a",
+        "300": "#965a0b",
+        "400": "#bd8804",
+        "500": "#d9a943",
+        "600": "#e5bc63",
+        "700": "#f5d789",
+        "800": "#ffe6a8",
     },
 };
 /**
@@ -818,68 +818,128 @@ var sharedAppTheme = {
 /**
  * Create a SDS App Theme with custom colors that follows the SDS color model.
  */
-var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), { 
-    // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
-    // applications to override those colors using their own custom theme.
-    // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
-    // we allow other apps to specify their colors once, and have them apply
-    // throughout the application, such as in borders, etc without having to manually
-    // override every theme property that makes use of colors.
-    borders: {
-        accent: {
-            default: "1px solid ".concat(colors.blue[500]),
-            focused: "1px solid ".concat(colors.blue[500]),
-            hover: "1px solid ".concat(colors.blue[600]),
-            open: "1px solid ".concat(colors.blue[500]),
-            pressed: "1px solid ".concat(colors.blue[700]),
-            selected: "1px solid ".concat(colors.blue[500]),
-        },
-        base: {
-            default: "1px solid ".concat(colors.gray[500]),
-            disabled: "1px solid ".concat(colors.gray[300]),
-            divider: "1px solid ".concat(colors.gray[200]),
-            hover: "1px solid ".concat(colors.gray[900]),
-            pressed: "1px solid ".concat(colors.gray[900]),
-            table: "1px solid ".concat(colors.gray[300]),
-        },
-        beta: {
-            default: "1px solid ".concat(colors.purple[600]),
-            extraThick: "4px solid ".concat(colors.purple[600]),
-            thick: "2px solid ".concat(colors.purple[600]),
-        },
-        info: {
-            default: "1px solid ".concat(colors.blue[600]),
-            extraThick: "4px solid ".concat(colors.blue[600]),
-            thick: "2px solid ".concat(colors.blue[600]),
-        },
-        link: {
-            dashed: "1px dashed",
-            solid: "1px solid",
-        },
-        negative: {
-            default: "1px solid ".concat(colors.red[600]),
-            extraThick: "4px solid ".concat(colors.red[600]),
-            thick: "2px solid ".concat(colors.red[600]),
-        },
-        neutral: {
-            default: "1px solid ".concat(colors.gray[500]),
-            extraThick: "4px solid ".concat(colors.gray[500]),
-            thick: "2px solid ".concat(colors.gray[500]),
-        },
-        none: "none",
-        notice: {
-            default: "1px solid ".concat(colors.yellow[600]),
-            extraThick: "4px solid ".concat(colors.yellow[600]),
-            thick: "2px solid ".concat(colors.yellow[600]),
-        },
-        positive: {
-            default: "1px solid ".concat(colors.green[600]),
-            extraThick: "4px solid ".concat(colors.green[600]),
-            thick: "2px solid ".concat(colors.green[600]),
-        },
-    }, colors: colors })); };
+var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), { colors: colors })); };
 var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
 var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors);
+// (mlila) whenever our theme uses colors, we need to make sure we allow consuming
+// applications to override those colors using their own custom theme.
+// By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
+// we allow other apps to specify their colors once, and have them apply
+// throughout the application, such as in borders, etc without having to manually
+// override every theme property that makes use of colors.
+//
+// (masoudmanson): We need to define borders separately for light and dark themes
+// because the border colors are different for each theme.
+SDSLightAppTheme.borders = {
+    accent: {
+        default: "1px solid ".concat(SDSLightThemeColors.blue[500]),
+        focused: "1px solid ".concat(SDSLightThemeColors.blue[500]),
+        hover: "1px solid ".concat(SDSLightThemeColors.blue[600]),
+        open: "1px solid ".concat(SDSLightThemeColors.blue[500]),
+        pressed: "1px solid ".concat(SDSLightThemeColors.blue[700]),
+        selected: "1px solid ".concat(SDSLightThemeColors.blue[500]),
+    },
+    base: {
+        default: "1px solid ".concat(SDSLightThemeColors.gray[500]),
+        disabled: "1px solid ".concat(SDSLightThemeColors.gray[300]),
+        divider: "1px solid ".concat(SDSLightThemeColors.gray[200]),
+        dividerInverse: "1px solid ".concat(SDSLightThemeColors.gray[600]),
+        hover: "1px solid ".concat(SDSLightThemeColors.gray[900]),
+        inverse: "1px solid ".concat(SDSLightThemeColors.gray[50]),
+        pressed: "1px solid ".concat(SDSLightThemeColors.gray[900]),
+        table: "1px solid ".concat(SDSLightThemeColors.gray[300]),
+    },
+    beta: {
+        default: "1px solid ".concat(SDSLightThemeColors.purple[600]),
+        extraThick: "4px solid ".concat(SDSLightThemeColors.purple[600]),
+        thick: "2px solid ".concat(SDSLightThemeColors.purple[600]),
+    },
+    info: {
+        default: "1px solid ".concat(SDSLightThemeColors.blue[600]),
+        extraThick: "4px solid ".concat(SDSLightThemeColors.blue[600]),
+        thick: "2px solid ".concat(SDSLightThemeColors.blue[600]),
+    },
+    link: {
+        dashed: "1px dashed",
+        solid: "1px solid",
+    },
+    negative: {
+        default: "1px solid ".concat(SDSLightThemeColors.red[600]),
+        extraThick: "4px solid ".concat(SDSLightThemeColors.red[600]),
+        thick: "2px solid ".concat(SDSLightThemeColors.red[600]),
+    },
+    neutral: {
+        default: "1px solid ".concat(SDSLightThemeColors.gray[500]),
+        extraThick: "4px solid ".concat(SDSLightThemeColors.gray[500]),
+        thick: "2px solid ".concat(SDSLightThemeColors.gray[500]),
+    },
+    none: "none",
+    notice: {
+        default: "1px solid ".concat(SDSLightThemeColors.yellow[600]),
+        extraThick: "4px solid ".concat(SDSLightThemeColors.yellow[600]),
+        thick: "2px solid ".concat(SDSLightThemeColors.yellow[600]),
+    },
+    positive: {
+        default: "1px solid ".concat(SDSLightThemeColors.green[600]),
+        extraThick: "4px solid ".concat(SDSLightThemeColors.green[600]),
+        thick: "2px solid ".concat(SDSLightThemeColors.green[600]),
+    },
+};
+SDSDarkAppTheme.borders = {
+    accent: {
+        default: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
+        focused: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
+        hover: "1px solid ".concat(SDSDarkThemeColors.blue[700]),
+        open: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
+        pressed: "1px solid ".concat(SDSDarkThemeColors.blue[800]),
+        selected: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
+    },
+    base: {
+        default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
+        disabled: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
+        divider: "1px solid ".concat(SDSDarkThemeColors.gray[200]),
+        dividerInverse: "1px solid ".concat(SDSDarkThemeColors.gray[600]),
+        hover: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
+        inverse: "1px solid ".concat(SDSDarkThemeColors.gray[50]),
+        pressed: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
+        table: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
+    },
+    beta: {
+        default: "1px solid ".concat(SDSDarkThemeColors.purple[600]),
+        extraThick: "4px solid ".concat(SDSDarkThemeColors.purple[600]),
+        thick: "2px solid ".concat(SDSDarkThemeColors.purple[600]),
+    },
+    info: {
+        default: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
+        extraThick: "4px solid ".concat(SDSDarkThemeColors.blue[600]),
+        thick: "2px solid ".concat(SDSDarkThemeColors.blue[600]),
+    },
+    link: {
+        dashed: "1px dashed",
+        solid: "1px solid",
+    },
+    negative: {
+        default: "1px solid ".concat(SDSDarkThemeColors.red[600]),
+        extraThick: "4px solid ".concat(SDSDarkThemeColors.red[600]),
+        thick: "2px solid ".concat(SDSDarkThemeColors.red[600]),
+    },
+    neutral: {
+        default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
+        extraThick: "4px solid ".concat(SDSDarkThemeColors.gray[500]),
+        thick: "2px solid ".concat(SDSDarkThemeColors.gray[500]),
+    },
+    none: "none",
+    notice: {
+        default: "1px solid ".concat(SDSDarkThemeColors.yellow[600]),
+        extraThick: "4px solid ".concat(SDSDarkThemeColors.yellow[600]),
+        thick: "2px solid ".concat(SDSDarkThemeColors.yellow[600]),
+    },
+    positive: {
+        default: "1px solid ".concat(SDSDarkThemeColors.green[600]),
+        extraThick: "4px solid ".concat(SDSDarkThemeColors.green[600]),
+        thick: "2px solid ".concat(SDSDarkThemeColors.green[600]),
+    },
+};
 /**
  * Helper function to select the appropriate theme settings.
  *
@@ -913,25 +973,32 @@ var SDSPaletteLight = function (appTheme) {
             fillHover: appTheme.colors.blue[600],
             fillPressed: appTheme.colors.blue[700],
             fillPrimary: appTheme.colors.blue[500],
-            icon: appTheme.colors.blue[500],
-            iconFocus: appTheme.colors.blue[500],
-            iconHover: appTheme.colors.blue[600],
-            iconOpen: appTheme.colors.blue[500],
-            iconPressed: appTheme.colors.blue[700],
-            iconSelected: appTheme.colors.blue[500],
-            surfacePrimary: appTheme.colors.blue[100],
-            surfaceSecondary: appTheme.colors.blue[500],
+            ornament: appTheme.colors.blue[500],
+            ornamentFocus: appTheme.colors.blue[500],
+            ornamentHover: appTheme.colors.blue[600],
+            ornamentOpen: appTheme.colors.blue[500],
+            ornamentPressed: appTheme.colors.blue[700],
+            ornamentSelected: appTheme.colors.blue[500],
+            surfacePrimary: appTheme.colors.blue[500],
+            surfaceSecondary: appTheme.colors.blue[100],
             textAction: appTheme.colors.blue[500],
             textActionHover: appTheme.colors.blue[600],
             textActionPressed: appTheme.colors.blue[700],
         },
         base: {
-            border: appTheme.colors.gray[500],
+            backgroundPrimary: appTheme.colors.gray[50],
+            backgroundPrimaryInverse: appTheme.colors.gray[900],
+            backgroundSecondary: appTheme.colors.gray[100],
+            backgroundSecondaryInverse: appTheme.colors.gray[700],
+            backgroundTertiary: appTheme.colors.gray[200],
+            border: appTheme.colors.gray[600],
             borderDisabled: appTheme.colors.gray[300],
             borderHover: appTheme.colors.gray[900],
+            borderInverse: appTheme.colors.gray[50],
             borderPressed: appTheme.colors.gray[900],
             borderTable: appTheme.colors.gray[300],
             divider: appTheme.colors.gray[200],
+            dividerInverse: appTheme.colors.gray[600],
             fillDisabled: appTheme.colors.gray[200],
             /* the number 47 is the opacity of the color, which is equal to 28% */
             fillHover: appTheme.colors.gray[300] + "47",
@@ -939,56 +1006,53 @@ var SDSPaletteLight = function (appTheme) {
             fillPressed: appTheme.colors.gray[300] + "47",
             fillPrimary: appTheme.colors.gray[50],
             fillSelected: appTheme.colors.gray[900],
-            iconDisabled: appTheme.colors.gray[300],
-            iconPrimary: appTheme.colors.gray[500],
-            iconPrimaryHover: appTheme.colors.gray[900],
-            iconPrimaryInverse: appTheme.colors.gray[50],
-            iconPrimaryInverseHover: appTheme.colors.gray[400],
-            iconPrimaryInversePressed: appTheme.colors.gray[400],
-            iconPrimaryPressed: appTheme.colors.gray[900],
-            iconSecondary: appTheme.colors.gray[900],
-            surfaceBackground: appTheme.colors.gray[50],
-            surfacePrimary: appTheme.colors.gray[50],
-            surfacePrimaryInverse: appTheme.colors.gray[900],
-            surfaceSecondary: appTheme.colors.gray[100],
-            surfaceTertiary: appTheme.colors.gray[200],
+            ornamentDisabled: appTheme.colors.gray[300],
+            ornamentOnFill: appTheme.colors.gray[50],
+            ornamentPrimary: appTheme.colors.gray[900],
+            ornamentPrimaryInverse: appTheme.colors.gray[50],
+            ornamentSecondary: appTheme.colors.gray[600],
+            ornamentSecondaryHover: appTheme.colors.gray[900],
+            ornamentSecondaryPressed: appTheme.colors.gray[900],
+            surface: appTheme.colors.gray[50],
+            surfaceInverse: appTheme.colors.gray[900],
             textDisabled: appTheme.colors.gray[300],
+            textOnFill: appTheme.colors.gray[50],
             textPrimary: appTheme.colors.gray[900],
             textPrimaryInverse: appTheme.colors.gray[50],
             textSecondary: appTheme.colors.gray[600],
             textSecondaryInverse: appTheme.colors.gray[300],
         },
         beta: {
-            border: appTheme.colors.purple[500],
+            border: appTheme.colors.purple[600],
             fillHover: appTheme.colors.purple[600],
             fillPressed: appTheme.colors.purple[700],
             fillPrimary: appTheme.colors.purple[500],
             fillSecondary: appTheme.colors.purple[100],
             ornament: appTheme.colors.purple[600],
-            surfacePrimary: appTheme.colors.purple[100],
-            surfaceSecondary: appTheme.colors.purple[500],
+            surfacePrimary: appTheme.colors.purple[500],
+            surfaceSecondary: appTheme.colors.purple[100],
             text: appTheme.colors.purple[600],
         },
         info: {
-            border: appTheme.colors.blue[500],
+            border: appTheme.colors.blue[600],
             fillHover: appTheme.colors.blue[600],
             fillPressed: appTheme.colors.blue[700],
             fillPrimary: appTheme.colors.blue[500],
             fillSecondary: appTheme.colors.blue[100],
             ornament: appTheme.colors.blue[600],
-            surfacePrimary: appTheme.colors.blue[100],
-            surfaceSecondary: appTheme.colors.blue[500],
+            surfacePrimary: appTheme.colors.blue[500],
+            surfaceSecondary: appTheme.colors.blue[100],
             text: appTheme.colors.blue[600],
         },
         negative: {
-            border: appTheme.colors.red[500],
+            border: appTheme.colors.red[600],
             fillHover: appTheme.colors.red[600],
             fillPressed: appTheme.colors.red[700],
             fillPrimary: appTheme.colors.red[500],
             fillSecondary: appTheme.colors.red[100],
             ornament: appTheme.colors.red[600],
-            surfacePrimary: appTheme.colors.red[100],
-            surfaceSecondary: appTheme.colors.red[500],
+            surfacePrimary: appTheme.colors.red[500],
+            surfaceSecondary: appTheme.colors.red[100],
             text: appTheme.colors.red[600],
         },
         neutral: {
@@ -996,32 +1060,32 @@ var SDSPaletteLight = function (appTheme) {
             fillHover: appTheme.colors.gray[600],
             fillPressed: appTheme.colors.gray[700],
             fillPrimary: appTheme.colors.gray[500],
-            fillSecondary: appTheme.colors.gray[100],
+            fillSecondary: appTheme.colors.gray[200],
             ornament: appTheme.colors.gray[700],
-            surfacePrimary: appTheme.colors.gray[200],
-            surfaceSecondary: appTheme.colors.gray[500],
+            surfacePrimary: appTheme.colors.gray[500],
+            surfaceSecondary: appTheme.colors.gray[200],
             text: appTheme.colors.gray[700],
         },
         notice: {
-            border: appTheme.colors.yellow[500],
+            border: appTheme.colors.yellow[600],
             fillHover: appTheme.colors.yellow[600],
             fillPressed: appTheme.colors.yellow[700],
             fillPrimary: appTheme.colors.yellow[500],
             fillSecondary: appTheme.colors.yellow[100],
             ornament: appTheme.colors.yellow[600],
-            surfacePrimary: appTheme.colors.yellow[100],
-            surfaceSecondary: appTheme.colors.yellow[500],
+            surfacePrimary: appTheme.colors.yellow[500],
+            surfaceSecondary: appTheme.colors.yellow[100],
             text: appTheme.colors.yellow[600],
         },
         positive: {
-            border: appTheme.colors.green[500],
+            border: appTheme.colors.green[600],
             fillHover: appTheme.colors.green[600],
             fillPressed: appTheme.colors.green[700],
             fillPrimary: appTheme.colors.green[500],
             fillSecondary: appTheme.colors.green[100],
             ornament: appTheme.colors.green[600],
-            surfacePrimary: appTheme.colors.green[100],
-            surfaceSecondary: appTheme.colors.green[500],
+            surfacePrimary: appTheme.colors.green[500],
+            surfaceSecondary: appTheme.colors.green[100],
             text: appTheme.colors.green[600],
         },
     };
@@ -1029,34 +1093,41 @@ var SDSPaletteLight = function (appTheme) {
 var SDSPaletteDark = function (appTheme) {
     return {
         accent: {
-            border: appTheme.colors.blue[500],
-            borderFocus: appTheme.colors.blue[500],
-            borderHover: appTheme.colors.blue[600],
-            borderOpen: appTheme.colors.blue[500],
-            borderPressed: appTheme.colors.blue[700],
-            borderSelected: appTheme.colors.blue[500],
-            fillHover: appTheme.colors.blue[600],
-            fillPressed: appTheme.colors.blue[700],
-            fillPrimary: appTheme.colors.blue[500],
-            icon: appTheme.colors.blue[500],
-            iconFocus: appTheme.colors.blue[500],
-            iconHover: appTheme.colors.blue[600],
-            iconOpen: appTheme.colors.blue[500],
-            iconPressed: appTheme.colors.blue[700],
-            iconSelected: appTheme.colors.blue[500],
-            surfacePrimary: appTheme.colors.blue[100],
-            surfaceSecondary: appTheme.colors.blue[500],
-            textAction: appTheme.colors.blue[500],
-            textActionHover: appTheme.colors.blue[600],
-            textActionPressed: appTheme.colors.blue[700],
+            border: appTheme.colors.blue[600],
+            borderFocus: appTheme.colors.blue[600],
+            borderHover: appTheme.colors.blue[700],
+            borderOpen: appTheme.colors.blue[600],
+            borderPressed: appTheme.colors.blue[800],
+            borderSelected: appTheme.colors.blue[600],
+            fillHover: appTheme.colors.blue[700],
+            fillPressed: appTheme.colors.blue[800],
+            fillPrimary: appTheme.colors.blue[400],
+            ornament: appTheme.colors.blue[600],
+            ornamentFocus: appTheme.colors.blue[600],
+            ornamentHover: appTheme.colors.blue[700],
+            ornamentOpen: appTheme.colors.blue[600],
+            ornamentPressed: appTheme.colors.blue[800],
+            ornamentSelected: appTheme.colors.blue[600],
+            surfacePrimary: appTheme.colors.blue[400],
+            surfaceSecondary: appTheme.colors.blue[100],
+            textAction: appTheme.colors.blue[600],
+            textActionHover: appTheme.colors.blue[700],
+            textActionPressed: appTheme.colors.blue[800],
         },
         base: {
-            border: appTheme.colors.gray[500],
+            backgroundPrimary: appTheme.colors.gray[75],
+            backgroundPrimaryInverse: appTheme.colors.gray[900],
+            backgroundSecondary: appTheme.colors.gray[100],
+            backgroundSecondaryInverse: appTheme.colors.gray[700],
+            backgroundTertiary: appTheme.colors.gray[200],
+            border: appTheme.colors.gray[600],
             borderDisabled: appTheme.colors.gray[300],
             borderHover: appTheme.colors.gray[900],
+            borderInverse: appTheme.colors.gray[50],
             borderPressed: appTheme.colors.gray[900],
             borderTable: appTheme.colors.gray[300],
             divider: appTheme.colors.gray[200],
+            dividerInverse: appTheme.colors.gray[600],
             fillDisabled: appTheme.colors.gray[200],
             /* the number 47 is the opacity of the color, which is equal to 28% */
             fillHover: appTheme.colors.gray[300] + "47",
@@ -1064,56 +1135,53 @@ var SDSPaletteDark = function (appTheme) {
             fillPressed: appTheme.colors.gray[300] + "47",
             fillPrimary: appTheme.colors.gray[100],
             fillSelected: appTheme.colors.gray[900],
-            iconDisabled: appTheme.colors.gray[300],
-            iconPrimary: appTheme.colors.gray[500],
-            iconPrimaryHover: appTheme.colors.gray[900],
-            iconPrimaryInverse: appTheme.colors.gray[50],
-            iconPrimaryInverseHover: appTheme.colors.gray[400],
-            iconPrimaryInversePressed: appTheme.colors.gray[400],
-            iconPrimaryPressed: appTheme.colors.gray[900],
-            iconSecondary: appTheme.colors.gray[900],
-            surfaceBackground: appTheme.colors.gray[75],
-            surfacePrimary: appTheme.colors.gray[100],
-            surfacePrimaryInverse: appTheme.colors.gray[900],
-            surfaceSecondary: appTheme.colors.gray[200],
-            surfaceTertiary: appTheme.colors.gray[300],
+            ornamentDisabled: appTheme.colors.gray[300],
+            ornamentOnFill: appTheme.colors.gray[900],
+            ornamentPrimary: appTheme.colors.gray[900],
+            ornamentPrimaryInverse: appTheme.colors.gray[50],
+            ornamentSecondary: appTheme.colors.gray[600],
+            ornamentSecondaryHover: appTheme.colors.gray[900],
+            ornamentSecondaryPressed: appTheme.colors.gray[900],
+            surface: appTheme.colors.gray[100],
+            surfaceInverse: appTheme.colors.gray[900],
             textDisabled: appTheme.colors.gray[300],
+            textOnFill: appTheme.colors.gray[900],
             textPrimary: appTheme.colors.gray[900],
             textPrimaryInverse: appTheme.colors.gray[50],
             textSecondary: appTheme.colors.gray[600],
             textSecondaryInverse: appTheme.colors.gray[300],
         },
         beta: {
-            border: appTheme.colors.purple[500],
-            fillHover: appTheme.colors.purple[600],
-            fillPressed: appTheme.colors.purple[700],
-            fillPrimary: appTheme.colors.purple[500],
+            border: appTheme.colors.purple[600],
+            fillHover: appTheme.colors.purple[700],
+            fillPressed: appTheme.colors.purple[800],
+            fillPrimary: appTheme.colors.purple[400],
             fillSecondary: appTheme.colors.purple[100],
             ornament: appTheme.colors.purple[600],
-            surfacePrimary: appTheme.colors.purple[100],
-            surfaceSecondary: appTheme.colors.purple[500],
+            surfacePrimary: appTheme.colors.purple[400],
+            surfaceSecondary: appTheme.colors.purple[100],
             text: appTheme.colors.purple[600],
         },
         info: {
-            border: appTheme.colors.blue[500],
-            fillHover: appTheme.colors.blue[600],
-            fillPressed: appTheme.colors.blue[700],
-            fillPrimary: appTheme.colors.blue[500],
+            border: appTheme.colors.blue[600],
+            fillHover: appTheme.colors.blue[700],
+            fillPressed: appTheme.colors.blue[800],
+            fillPrimary: appTheme.colors.blue[400],
             fillSecondary: appTheme.colors.blue[100],
             ornament: appTheme.colors.blue[600],
-            surfacePrimary: appTheme.colors.blue[100],
-            surfaceSecondary: appTheme.colors.blue[500],
+            surfacePrimary: appTheme.colors.blue[400],
+            surfaceSecondary: appTheme.colors.blue[100],
             text: appTheme.colors.blue[600],
         },
         negative: {
-            border: appTheme.colors.red[500],
-            fillHover: appTheme.colors.red[600],
-            fillPressed: appTheme.colors.red[700],
-            fillPrimary: appTheme.colors.red[500],
+            border: appTheme.colors.red[600],
+            fillHover: appTheme.colors.red[700],
+            fillPressed: appTheme.colors.red[800],
+            fillPrimary: appTheme.colors.red[400],
             fillSecondary: appTheme.colors.red[100],
             ornament: appTheme.colors.red[600],
-            surfacePrimary: appTheme.colors.red[100],
-            surfaceSecondary: appTheme.colors.red[500],
+            surfacePrimary: appTheme.colors.red[400],
+            surfaceSecondary: appTheme.colors.red[100],
             text: appTheme.colors.red[600],
         },
         neutral: {
@@ -1121,32 +1189,32 @@ var SDSPaletteDark = function (appTheme) {
             fillHover: appTheme.colors.gray[600],
             fillPressed: appTheme.colors.gray[700],
             fillPrimary: appTheme.colors.gray[500],
-            fillSecondary: appTheme.colors.gray[100],
+            fillSecondary: appTheme.colors.gray[200],
             ornament: appTheme.colors.gray[700],
-            surfacePrimary: appTheme.colors.gray[200],
-            surfaceSecondary: appTheme.colors.gray[500],
+            surfacePrimary: appTheme.colors.gray[500],
+            surfaceSecondary: appTheme.colors.gray[200],
             text: appTheme.colors.gray[700],
         },
         notice: {
-            border: appTheme.colors.yellow[500],
-            fillHover: appTheme.colors.yellow[600],
-            fillPressed: appTheme.colors.yellow[700],
-            fillPrimary: appTheme.colors.yellow[500],
+            border: appTheme.colors.yellow[600],
+            fillHover: appTheme.colors.yellow[700],
+            fillPressed: appTheme.colors.yellow[800],
+            fillPrimary: appTheme.colors.yellow[400],
             fillSecondary: appTheme.colors.yellow[100],
             ornament: appTheme.colors.yellow[600],
-            surfacePrimary: appTheme.colors.yellow[100],
-            surfaceSecondary: appTheme.colors.yellow[500],
-            text: appTheme.colors.yellow[700],
+            surfacePrimary: appTheme.colors.yellow[400],
+            surfaceSecondary: appTheme.colors.yellow[100],
+            text: appTheme.colors.yellow[600],
         },
         positive: {
-            border: appTheme.colors.green[500],
-            fillHover: appTheme.colors.green[600],
-            fillPressed: appTheme.colors.green[700],
-            fillPrimary: appTheme.colors.green[500],
+            border: appTheme.colors.green[600],
+            fillHover: appTheme.colors.green[700],
+            fillPressed: appTheme.colors.green[800],
+            fillPrimary: appTheme.colors.green[400],
             fillSecondary: appTheme.colors.green[100],
             ornament: appTheme.colors.green[600],
-            surfacePrimary: appTheme.colors.green[100],
-            surfaceSecondary: appTheme.colors.green[500],
+            surfacePrimary: appTheme.colors.green[400],
+            surfaceSecondary: appTheme.colors.green[100],
             text: appTheme.colors.green[600],
         },
     };
@@ -1486,7 +1554,7 @@ var fontCaps = function (fontSize, isNarrow) {
             return null;
         var caps = typography.wideStyles.caps, narrowCaps = typography.narrowStyles.caps, capsFontFamily = typography.fontFamily.caps;
         return react.css(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n      text-transform: uppercase;\n\n      ", "\n    "], ["\n      text-transform: uppercase;\n\n      ", "\n    "])), isNarrow
-            ? react.css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n            ", " {\n              ", "\n            }\n          "], ["\n            ", " {\n              ", "\n            }\n          "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowCaps.semibold[fontSize], capsFontFamily)) : themeToCss(caps.semibold[fontSize], capsFontFamily));
+            ? react.css(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n            ", " {\n              ", "\n            }\n          "], ["\n            ", " {\n              ", "\n            }\n          "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowCaps.semibold[fontSize], capsFontFamily)) : themeToCss(caps.semibold[fontSize], capsFontFamily));
     };
 };
 var fontCapsXxs = fontCaps("xxs");
@@ -1501,7 +1569,7 @@ var fontHeader = function (fontSize, isNarrow) {
             return null;
         var header = typography.wideStyles.header, narrowHeader = typography.narrowStyles.header, headerFontFamily = typography.fontFamily.header;
         if (isNarrow) {
-            return react.css(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n        ", " {\n          ", "\n        }\n      "], ["\n        ", " {\n          ", "\n        }\n      "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowHeader.semibold[fontSize], headerFontFamily));
+            return react.css(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n        ", " {\n          ", "\n        }\n      "], ["\n        ", " {\n          ", "\n        }\n      "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowHeader.semibold[fontSize], headerFontFamily));
         }
         return themeToCss(header.semibold[fontSize], headerFontFamily);
     };
@@ -1524,7 +1592,7 @@ var fontCode = function (fontSize, fontWeight, isNarrow) {
             return null;
         var code = typography.wideStyles.code, narrowCode = typography.narrowStyles.code, codeFontFamily = typography.fontFamily.code;
         if (isNarrow) {
-            return react.css(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n        ", " {\n          ", "\n        }\n      "], ["\n        ", " {\n          ", "\n        }\n      "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowCode[fontWeight][fontSize], codeFontFamily));
+            return react.css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n        ", " {\n          ", "\n        }\n      "], ["\n        ", " {\n          ", "\n        }\n      "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowCode[fontWeight][fontSize], codeFontFamily));
         }
         return themeToCss(code[fontWeight][fontSize], codeFontFamily);
     };
@@ -1542,8 +1610,8 @@ var fontTabular = function (fontSize, fontWeight, isNarrow) {
         if (!typography)
             return null;
         var tabular = typography.wideStyles.tabular, narrowTabular = typography.narrowStyles.tabular, tabularFontFamily = typography.fontFamily.tabular;
-        return react.css(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n      font-variant-numeric: tabular-nums;\n\n      ", "\n    "], ["\n      font-variant-numeric: tabular-nums;\n\n      ", "\n    "])), isNarrow
-            ? react.css(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n            ", " {\n              ", "\n            }\n          "], ["\n            ", " {\n              ", "\n            }\n          "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowTabular[fontWeight][fontSize], tabularFontFamily)) : themeToCss(tabular[fontWeight][fontSize], tabularFontFamily));
+        return react.css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n      font-variant-numeric: tabular-nums;\n\n      ", "\n    "], ["\n      font-variant-numeric: tabular-nums;\n\n      ", "\n    "])), isNarrow
+            ? react.css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n            ", " {\n              ", "\n            }\n          "], ["\n            ", " {\n              ", "\n            }\n          "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowTabular[fontWeight][fontSize], tabularFontFamily)) : themeToCss(tabular[fontWeight][fontSize], tabularFontFamily));
     };
 };
 var fontTabularXs = fontTabular("xs", "regular");
@@ -1554,33 +1622,33 @@ function themeToCss(fontTheme, fontFamily) {
     if (fontFamily === void 0) { fontFamily = "inherit"; }
     return react.css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: ", ";\n    letter-spacing: ", ";\n    font-weight: ", ";\n    text-transform: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: ", ";\n    letter-spacing: ", ";\n    font-weight: ", ";\n    text-transform: ", ";\n  "])), fontFamily, fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform);
 }
-var templateObject_1$Y, templateObject_2$C, templateObject_3$t, templateObject_4$p, templateObject_5$j, templateObject_6$e, templateObject_7$a, templateObject_8$7;
+var templateObject_1$Y, templateObject_2$D, templateObject_3$t, templateObject_4$o, templateObject_5$i, templateObject_6$d, templateObject_7$9, templateObject_8$7;
 
-var StyledAccordionDetails = styled__default.default(material.AccordionDetails)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
+var StyledAccordionDetails = styled__default.default(material.AccordionDetails)(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
     var spaces = getSpaces(props);
     return react.css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n      padding: ", "px ", "px ", "px;\n    "], ["\n      padding: ", "px ", "px ", "px;\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m);
 });
-var templateObject_1$X, templateObject_2$B;
+var templateObject_1$X, templateObject_2$C;
 
 var AccordionDetails = function (props) {
     var children = props.children;
     return jsxRuntime.jsx(StyledAccordionDetails, { children: children });
 };
 
-var StyledAccordionHeader = styled__default.default(material.AccordionSummary)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontHeaderS, function (props) {
+var StyledAccordionHeader = styled__default.default(material.AccordionSummary)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontHeaderS, function (props) {
     var _a, _b;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n      padding: ", "px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      .", " {\n        margin: 0;\n        flex-direction: column;\n\n        &.", " {\n          margin: 0;\n        }\n      }\n\n      & .", " {\n        margin-left: ", "px;\n        margin-top: ", "px !important;\n        align-self: center;\n\n        svg {\n          color: ", ";\n        }\n      }\n\n      &:hover {\n        & .", " {\n          svg {\n            color: ", ";\n          }\n        }\n      }\n    "], ["\n      padding: ", "px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      .", " {\n        margin: 0;\n        flex-direction: column;\n\n        &.", " {\n          margin: 0;\n        }\n      }\n\n      & .", " {\n        margin-left: ", "px;\n        margin-top: ", "px !important;\n        align-self: center;\n\n        svg {\n          color: ", ";\n        }\n      }\n\n      &:hover {\n        & .", " {\n          svg {\n            color: ", ";\n          }\n        }\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, material.accordionSummaryClasses.content, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, material.accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryHover);
+    return react.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n      padding: ", "px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      .", " {\n        margin: 0;\n        flex-direction: column;\n\n        &.", " {\n          margin: 0;\n        }\n      }\n\n      & .", " {\n        margin-left: ", "px;\n        margin-top: ", "px !important;\n        align-self: center;\n\n        svg {\n          color: ", ";\n        }\n      }\n\n      &:hover {\n        & .", " {\n          svg {\n            color: ", ";\n          }\n        }\n      }\n    "], ["\n      padding: ", "px;\n      align-items: flex-start;\n      box-sizing: border-box;\n\n      .", " {\n        margin: 0;\n        flex-direction: column;\n\n        &.", " {\n          margin: 0;\n        }\n      }\n\n      & .", " {\n        margin-left: ", "px;\n        margin-top: ", "px !important;\n        align-self: center;\n\n        svg {\n          color: ", ";\n        }\n      }\n\n      &:hover {\n        & .", " {\n          svg {\n            color: ", ";\n          }\n        }\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, material.accordionSummaryClasses.content, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, material.accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryHover);
 });
-var StyledSubtitle = styled__default.default("p")(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
+var StyledSubtitle = styled__default.default("p")(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a;
     var semanticColors = getSemanticColors(props);
     return react.css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n      color: ", ";\n      margin: 0;\n    "], ["\n      color: ", ";\n      margin: 0;\n    "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary);
 });
-var templateObject_1$W, templateObject_2$A, templateObject_3$s, templateObject_4$o;
+var templateObject_1$W, templateObject_2$B, templateObject_3$s, templateObject_4$n;
 
-var _path$2b, _path2$E, _path3$6;
+var _path$2b, _path2$C, _path3$6;
 function _extends$2g() { return _extends$2g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2g.apply(null, arguments); }
 var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2g({
@@ -1590,7 +1658,7 @@ var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
   }, props), _path$2b || (_path$2b = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M12.205 14.698a1.956 1.956 0 1 1-3.911 0 1.956 1.956 0 0 1 3.911 0m-1.955.756a.756.756 0 1 0 0-1.512.756.756 0 0 0 0 1.512"
-  })), _path2$E || (_path2$E = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$C || (_path2$C = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M14.248 7.998a1.023 1.023 0 1 0 0-2.047 1.023 1.023 0 0 0 0 2.047m-1.463 4.142a.756.756 0 0 1 .242-1.041l1.033-.643a.756.756 0 0 1 .799 1.282l-1.033.644a.756.756 0 0 1-1.04-.242Zm-2.627-2.83a.756.756 0 1 0 1.491-.249L11.4 7.57a.756.756 0 0 0-1.49.249z"
   })), _path3$6 || (_path3$6 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
@@ -1598,7 +1666,7 @@ var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
   })));
 };
 
-var _path$2a, _path2$D;
+var _path$2a, _path2$B;
 function _extends$2f() { return _extends$2f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2f.apply(null, arguments); }
 var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2f({
@@ -1607,7 +1675,7 @@ var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
     height: 16
   }, props), _path$2a || (_path$2a = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M7.766 7.265a1.484 1.484 0 1 0-.001-2.968 1.484 1.484 0 0 0 .001 2.968m-1.725 4.287a1.478 1.478 0 1 0-.001-2.955 1.478 1.478 0 0 0 .001 2.955"
-  })), _path2$D || (_path2$D = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$B || (_path2$B = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M2.446 4.326.382 2.37A1.22 1.22 0 0 1 .334.645 1.22 1.22 0 0 1 2.058.597L3.667 2.12a5.385 5.385 0 0 1 8.771 1.103l1.881-.767a1.22 1.22 0 1 1 .92 2.261l-2.182.89a5.4 5.4 0 0 1-.333 1.99l-1.575 4.267 1.905 1.76c.495.458.525 1.23.068 1.725a1.22 1.22 0 0 1-1.723.069l-1.582-1.462a5.38 5.38 0 0 1-5.62 1.188A5.39 5.39 0 0 1 1.009 8.22zm8.477 2.605-1.61 4.361a3.465 3.465 0 0 1-4.452 2.05A3.47 3.47 0 0 1 2.81 8.887l1.61-4.361a3.465 3.465 0 0 1 4.452-2.05 3.47 3.47 0 0 1 2.051 4.455"
   })));
@@ -1652,7 +1720,7 @@ var SvgIconBarChartVertical4Small = function SvgIconBarChartVertical4Small(props
   })));
 };
 
-var _path$26, _path2$C;
+var _path$26, _path2$A;
 function _extends$2b() { return _extends$2b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2b.apply(null, arguments); }
 var SvgIconBookLarge = function SvgIconBookLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2b({
@@ -1663,7 +1731,7 @@ var SvgIconBookLarge = function SvgIconBookLarge(props) {
     fillRule: "evenodd",
     d: "M18.895 1.545H5.865a3.04 3.04 0 0 0-3.041 3.041v14.95a1 1 0 0 0 .024.12 3.04 3.04 0 0 0 3.017 2.799h13.03a2.28 2.28 0 0 0 2.078-1.342c.08-.178-.02-.374-.18-.486a2 2 0 0 1-.123-.096 1.4 1.4 0 0 1-.497-1.053c0-.398.18-.778.497-1.052.268-.232.506-.532.506-.886V3.826a2.28 2.28 0 0 0-2.28-2.28m.76 14.95V3.826a.76.76 0 0 0-.76-.76H8.237v13.429zM6.717 3.065h-.851a1.52 1.52 0 0 0-1.52 1.521v12.331c.46-.273.985-.42 1.52-.422h.851zM4.79 20.532c.289.276.677.421 1.076.403h13.543a1.61 1.61 0 0 1-.866-1.426 1.61 1.61 0 0 1 1.012-1.493H5.865a1.46 1.46 0 0 0-1.076 2.516",
     clipRule: "evenodd"
-  })), _path2$C || (_path2$C = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$A || (_path2$A = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10.894 6.222c0-.42.34-.76.76-.76h4.583a.76.76 0 1 1 0 1.52h-4.582a.76.76 0 0 1-.76-.76"
   })));
 };
@@ -1682,7 +1750,7 @@ var SvgIconBookSmall = function SvgIconBookSmall(props) {
   })));
 };
 
-var _path$24, _path2$B;
+var _path$24, _path2$z;
 function _extends$29() { return _extends$29 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$29.apply(null, arguments); }
 var SvgIconCheckCircleLarge = function SvgIconCheckCircleLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$29({
@@ -1691,7 +1759,7 @@ var SvgIconCheckCircleLarge = function SvgIconCheckCircleLarge(props) {
     height: 24
   }, props), _path$24 || (_path$24 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M17.367 8.708a.9.9 0 1 0-1.461-1.052l-5.239 7.276-3.18-3.534a.9.9 0 1 0-1.338 1.204l3.995 4.44a.818.818 0 0 0 1.273-.07z"
-  })), _path2$B || (_path2$B = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$z || (_path2$z = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M22.364 12c0 5.724-4.64 10.364-10.364 10.364S1.636 17.724 1.636 12 6.276 1.636 12 1.636 22.364 6.276 22.364 12m-1.582 0a8.782 8.782 0 1 1-17.564 0 8.782 8.782 0 0 1 17.564 0"
   })));
@@ -1749,7 +1817,7 @@ var SvgIconChevronDownSmall = function SvgIconChevronDownSmall(props) {
   })));
 };
 
-var _path$1$, _path2$A;
+var _path$1$, _path2$y;
 function _extends$24() { return _extends$24 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$24.apply(null, arguments); }
 var SvgIconChevronDown2Small = function SvgIconChevronDown2Small(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$24({
@@ -1758,12 +1826,12 @@ var SvgIconChevronDown2Small = function SvgIconChevronDown2Small(props) {
     height: 16
   }, props), _path$1$ || (_path$1$ = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8.377 15.53a.57.57 0 0 1-.813 0L1.267 9.14a.57.57 0 0 1 .006-.809l.732-.722a.57.57 0 0 1 .808.006l4.757 4.826a.57.57 0 0 0 .812.001l4.793-4.83a.57.57 0 0 1 .808-.004l.73.724a.57.57 0 0 1 .004.809l-6.34 6.39Z"
-  })), _path2$A || (_path2$A = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$y || (_path2$y = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8.377 8.405a.57.57 0 0 1-.813 0l-6.297-6.39a.57.57 0 0 1 .006-.809l.732-.722a.57.57 0 0 1 .808.006L7.57 5.316a.57.57 0 0 0 .812.001l4.793-4.83a.57.57 0 0 1 .808-.004l.73.724a.57.57 0 0 1 .004.809z"
   })));
 };
 
-var _path$1_, _path2$z;
+var _path$1_, _path2$x;
 function _extends$23() { return _extends$23 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$23.apply(null, arguments); }
 var SvgIconChevronLeft2Small = function SvgIconChevronLeft2Small(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$23({
@@ -1772,7 +1840,7 @@ var SvgIconChevronLeft2Small = function SvgIconChevronLeft2Small(props) {
     height: 16
   }, props), _path$1_ || (_path$1_ = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M.47 8.393a.57.57 0 0 1 .002-.813l6.39-6.297a.57.57 0 0 1 .808.006l.722.732a.57.57 0 0 1-.006.808L3.56 7.585a.57.57 0 0 0-.001.813l4.83 4.793a.57.57 0 0 1 .004.808l-.725.73a.57.57 0 0 1-.808.004z"
-  })), _path2$z || (_path2$z = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$x || (_path2$x = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M7.595 8.393a.57.57 0 0 1 .002-.813l6.39-6.297a.57.57 0 0 1 .808.006l.722.732a.57.57 0 0 1-.006.808l-4.826 4.756a.57.57 0 0 0-.002.813l4.832 4.793a.57.57 0 0 1 .003.808l-.725.73a.57.57 0 0 1-.808.004z"
   })));
 };
@@ -1803,7 +1871,7 @@ var SvgIconChevronLeftSmall = function SvgIconChevronLeftSmall(props) {
   })));
 };
 
-var _path$1X, _path2$y;
+var _path$1X, _path2$w;
 function _extends$20() { return _extends$20 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$20.apply(null, arguments); }
 var SvgIconChevronRight2Small = function SvgIconChevronRight2Small(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$20({
@@ -1812,7 +1880,7 @@ var SvgIconChevronRight2Small = function SvgIconChevronRight2Small(props) {
     height: 16
   }, props), _path$1X || (_path$1X = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8.406 8.384a.57.57 0 0 0-.002-.813l-6.39-6.297a.57.57 0 0 0-.807.006l-.722.732a.57.57 0 0 0 .005.808l4.826 4.757a.57.57 0 0 1 .002.812L.486 13.182a.57.57 0 0 0-.003.808l.725.73a.57.57 0 0 0 .808.004z"
-  })), _path2$y || (_path2$y = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$w || (_path2$w = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M15.53 7.571a.57.57 0 0 1 0 .813l-6.39 6.34a.57.57 0 0 1-.807-.004l-.725-.73a.57.57 0 0 1 .003-.808l4.832-4.793a.57.57 0 0 0-.002-.812L7.615 2.82a.57.57 0 0 1-.005-.808l.722-.732a.57.57 0 0 1 .808-.006z"
   })));
 };
@@ -1869,7 +1937,7 @@ var SvgIconChevronUpSmall = function SvgIconChevronUpSmall(props) {
   })));
 };
 
-var _path$1S, _path2$x;
+var _path$1S, _path2$v;
 function _extends$1X() { return _extends$1X = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1X.apply(null, arguments); }
 var SvgIconChevronUp2Small = function SvgIconChevronUp2Small(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1X({
@@ -1878,7 +1946,7 @@ var SvgIconChevronUp2Small = function SvgIconChevronUp2Small(props) {
     height: 16
   }, props), _path$1S || (_path$1S = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8.393 7.602a.57.57 0 0 0-.812.002l-6.298 6.39a.57.57 0 0 0 .006.808l.733.722a.57.57 0 0 0 .808-.006l4.756-4.826a.57.57 0 0 1 .812-.002l4.793 4.832a.57.57 0 0 0 .808.003l.73-.725a.57.57 0 0 0 .004-.808z"
-  })), _path2$x || (_path2$x = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$v || (_path2$v = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M7.58.479a.57.57 0 0 1 .813-.002l6.34 6.39a.57.57 0 0 1-.003.808L14 8.4a.57.57 0 0 1-.809-.003L8.398 3.565a.57.57 0 0 0-.812.002L2.83 8.393a.57.57 0 0 1-.808.006l-.733-.722a.57.57 0 0 1-.006-.809L7.581.478Z"
   })));
 };
@@ -1896,7 +1964,7 @@ var SvgIconCirclesOverlap2Large = function SvgIconCirclesOverlap2Large(props) {
   })));
 };
 
-var _path$1Q, _path2$w;
+var _path$1Q, _path2$u;
 function _extends$1V() { return _extends$1V = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1V.apply(null, arguments); }
 var SvgIconCirclesOverlap2Small = function SvgIconCirclesOverlap2Small(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1V({
@@ -1906,12 +1974,12 @@ var SvgIconCirclesOverlap2Small = function SvgIconCirclesOverlap2Small(props) {
   }, props), _path$1Q || (_path$1Q = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M8 12.473a5.25 5.25 0 1 1 0-8.946 5.25 5.25 0 1 1 0 8.946m-1.256-1.08a3.707 3.707 0 1 1 0-6.787A5.23 5.23 0 0 0 5.5 8a5.23 5.23 0 0 0 1.244 3.394Zm2.512-6.787a3.707 3.707 0 1 1 0 6.787A5.23 5.23 0 0 0 10.5 8a5.23 5.23 0 0 0-1.244-3.394M8 5.514c.595.658.957 1.53.957 2.486S8.595 9.828 8 10.486A3.7 3.7 0 0 1 7.043 8c0-.957.362-1.828.957-2.486"
-  })), _path2$w || (_path2$w = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$u || (_path2$u = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8.957 8c0-.957-.362-1.828-.957-2.486A3.7 3.7 0 0 0 7.043 8c0 .957.362 1.828.957 2.486.595-.658.957-1.53.957-2.486"
   })));
 };
 
-var _path$1P, _path2$v;
+var _path$1P, _path2$t;
 function _extends$1U() { return _extends$1U = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1U.apply(null, arguments); }
 var SvgIconCodeLarge = function SvgIconCodeLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1U({
@@ -1920,7 +1988,7 @@ var SvgIconCodeLarge = function SvgIconCodeLarge(props) {
     height: 24
   }, props), _path$1P || (_path$1P = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.283 3.635a.487.487 0 0 1 .597-.345l.856.23c.26.07.414.337.345.597l-4.354 16.25a.487.487 0 0 1-.597.345l-.857-.23a.487.487 0 0 1-.345-.596z"
-  })), _path2$v || (_path2$v = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$t || (_path2$t = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M.145 12.358a.487.487 0 0 1 0-.693L5.592 6.26c.191-.19.5-.188.69.003l.617.622c.19.191.189.5-.002.69l-4.12 4.087a.487.487 0 0 0 0 .693l4.116 4.056a.487.487 0 0 1 .005.689l-.615.625a.487.487 0 0 1-.69.005L.144 12.36Zm23.71-.73a.486.486 0 0 1 0 .693l-5.448 5.407a.487.487 0 0 1-.69-.003l-.617-.623a.487.487 0 0 1 .002-.689l4.12-4.087a.487.487 0 0 0 0-.693l-4.116-4.056a.487.487 0 0 1-.005-.69l.615-.624a.487.487 0 0 1 .69-.005z"
   })));
@@ -1939,7 +2007,7 @@ var SvgIconCodeSmall = function SvgIconCodeSmall(props) {
   })));
 };
 
-var _path$1N, _path2$u;
+var _path$1N, _path2$s;
 function _extends$1S() { return _extends$1S = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1S.apply(null, arguments); }
 var SvgIconCompassLarge = function SvgIconCompassLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1S({
@@ -1949,13 +2017,13 @@ var SvgIconCompassLarge = function SvgIconCompassLarge(props) {
   }, props), _path$1N || (_path$1N = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M15.926 8.494a.49.49 0 0 1 .71.609l-.034.066-2.773 5.505a.46.46 0 0 1-.148.176l-.067.04-5.544 2.772a.5.5 0 0 1-.216.054.5.5 0 0 1-.348-.147.49.49 0 0 1-.121-.491l.028-.072 2.772-5.525a.46.46 0 0 1 .149-.176l.067-.04zm-1.254 1.929-2.826 1.415 1.411 1.412z"
-  })), _path2$u || (_path2$u = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$s || (_path2$s = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M8.954 2.956s-.009.222-.008.358c-4.163 1.3-7.184 5.186-7.184 9.778 0 5.656 4.586 10.242 10.243 10.242s10.243-4.586 10.243-10.242c0-4.596-3.027-8.484-7.195-9.782v-.472a2.29 2.29 0 0 0-2.285-2.17h-1.526l-.118.003a2.29 2.29 0 0 0-2.17 2.285m4.577 0c0-.395-.3-.72-.685-.759l-.078-.004h-1.526c-.395 0-.72.3-.759.685v.083a10.3 10.3 0 0 1 3.048 0zM3.439 12.232a8.61 8.61 0 0 1 7.706-7.706 1 1 0 0 0-.013.158v.907c0 .5.39.907.873.907.482 0 .873-.406.873-.907v-.907a1 1 0 0 0-.013-.158 8.61 8.61 0 0 1 7.706 7.706 1 1 0 0 0-.16-.014h-.909c-.502 0-.909.391-.909.874 0 .482.407.873.91.873h.908a1 1 0 0 0 .16-.014 8.61 8.61 0 0 1-7.706 7.707 1 1 0 0 0 .013-.159v-.907c0-.5-.39-.907-.873-.907-.482 0-.873.406-.873.907v.907a1 1 0 0 0 .013.159A8.61 8.61 0 0 1 3.44 13.95a1 1 0 0 0 .16.014h.909c.502 0 .909-.391.909-.873 0-.483-.407-.874-.91-.874H3.6a1 1 0 0 0-.16.014Z"
   })));
 };
 
-var _path$1M, _path2$t;
+var _path$1M, _path2$r;
 function _extends$1R() { return _extends$1R = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1R.apply(null, arguments); }
 var SvgIconCopyLarge = function SvgIconCopyLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1R({
@@ -1964,7 +2032,7 @@ var SvgIconCopyLarge = function SvgIconCopyLarge(props) {
     height: 24
   }, props), _path$1M || (_path$1M = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M6.028 18.418h7.164c.485 0 .866-.296.866-.674 0-.377-.381-.673-.866-.673H6.028c-.485 0-.866.296-.866.673s.381.674.866.674m7.164-2.833H6.028c-.477 0-.866-.305-.866-.682 0-.372.381-.664.866-.664h7.164c.477 0 .866.307.866.683 0 .372-.381.663-.866.663"
-  })), _path2$t || (_path2$t = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$r || (_path2$r = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M22.087 5.672c0-.22-.09-.436-.249-.593L17.512.717a.85.85 0 0 0-.593-.248H8.434c-.959 0-1.769.812-1.769 1.773v3.015h-3.01c-.975 0-1.768.795-1.768 1.773v14.723c0 .978.793 1.773 1.769 1.773h11.908c.977 0 1.77-.795 1.77-1.773v-3.015h3.008c.96 0 1.77-.813 1.77-1.773zM3.594 7.006c0-.032.028-.061.062-.061h7.643v3.492c0 .465.377.843.842.843h3.484v10.45a.063.063 0 0 1-.061.061H3.656a.063.063 0 0 1-.062-.061zm13.49 2.837-4.326-4.362a.85.85 0 0 0-.593-.247H8.372V2.242c0-.034.028-.062.062-.062h7.643v3.492c0 .465.377.844.842.844h3.484v10.45a.063.063 0 0 1-.061.06h-3.007v-6.59a.85.85 0 0 0-.25-.593Zm-4.076-.274V8.132l1.434 1.437zm4.753-4.765V3.368l1.434 1.436z"
   })));
@@ -1983,7 +2051,7 @@ var SvgIconCopySmall = function SvgIconCopySmall(props) {
   })));
 };
 
-var _path$1K, _path2$s, _path3$5;
+var _path$1K, _path2$q, _path3$5;
 function _extends$1P() { return _extends$1P = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1P.apply(null, arguments); }
 var SvgIconCubeLarge = function SvgIconCubeLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1P({
@@ -1993,7 +2061,7 @@ var SvgIconCubeLarge = function SvgIconCubeLarge(props) {
   }, props), _path$1K || (_path$1K = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M11.603.376a.82.82 0 0 1 .794 0l9.818 5.454a.818.818 0 0 1 0 1.43l-9.818 5.455a.82.82 0 0 1-.794 0L1.784 7.261a.818.818 0 0 1 0-1.43L11.603.375Zm-7.736 6.17L12 11.063l8.134-4.519L12 2.027 3.867 6.545Z"
-  })), _path2$s || (_path2$s = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$q || (_path2$q = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M22.233 5.84c.25.147.403.416.403.705v10.91a.82.82 0 0 1-.42.715l-9.819 5.454a.818.818 0 0 1-1.215-.715V12c0-.297.16-.57.42-.715l9.819-5.455a.82.82 0 0 1 .812.01m-9.415 6.641v9.038L21 16.973V7.936z"
   })), _path3$5 || (_path3$5 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -2117,7 +2185,7 @@ var SvgIconEditSmall = function SvgIconEditSmall(props) {
   })));
 };
 
-var _path$1A, _path2$r;
+var _path$1A, _path2$p;
 function _extends$1F() { return _extends$1F = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1F.apply(null, arguments); }
 var SvgIconEnvelopeSmall = function SvgIconEnvelopeSmall(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1F({
@@ -2126,12 +2194,12 @@ var SvgIconEnvelopeSmall = function SvgIconEnvelopeSmall(props) {
     height: 16
   }, props), _path$1A || (_path$1A = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M0 3.482V13.2a.8.8 0 0 0 .8.8h14.4a.8.8 0 0 0 .8-.8V3.482l-6.258 6.605a2.4 2.4 0 0 1-3.484 0z"
-  })), _path2$r || (_path2$r = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$p || (_path2$p = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8.58 8.987 15.2 2H.8l6.62 6.987a.8.8 0 0 0 1.16 0"
   })));
 };
 
-var _path$1z, _path2$q;
+var _path$1z, _path2$o;
 function _extends$1E() { return _extends$1E = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1E.apply(null, arguments); }
 var SvgIconExclamationMarkCircleLarge = function SvgIconExclamationMarkCircleLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1E({
@@ -2141,7 +2209,7 @@ var SvgIconExclamationMarkCircleLarge = function SvgIconExclamationMarkCircleLar
   }, props), _path$1z || (_path$1z = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M12 14.53c-.662 0-1.354-.425-1.404-1.375l-.28-6.545v-.025c0-.93.755-1.687 1.685-1.687s1.686.757 1.686 1.687v.024l-.28 6.54A1.41 1.41 0 0 1 12 14.531Zm.453-7.603a.45.45 0 0 0-.9 0l.249 5.791c.01.19.07.223.2.223.058 0 .192-.022.202-.225l.248-5.789Zm-1.816 8.892c.36-.36.857-.566 1.364-.566a1.935 1.935 0 0 1 1.927 1.927c0 .51-.208 1.008-.569 1.365a1.92 1.92 0 0 1-1.358.56 1.94 1.94 0 0 1-1.364-.563 1.94 1.94 0 0 1-.563-1.363c0-.506.206-1.002.563-1.36m.852 1.88c.267.27.757.27 1.019.003A.727.727 0 0 0 12 16.457a.727.727 0 0 0-.512 1.243Z"
-  })), _path2$q || (_path2$q = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$o || (_path2$o = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M22.364 12c0 5.724-4.64 10.364-10.364 10.364S1.636 17.724 1.636 12 6.276 1.636 12 1.636 22.364 6.276 22.364 12m-1.582 0a8.782 8.782 0 1 1-17.564 0 8.782 8.782 0 0 1 17.564 0"
   })));
@@ -2160,7 +2228,7 @@ var SvgIconExclamationMarkCircleSmall = function SvgIconExclamationMarkCircleSma
   })));
 };
 
-var _path$1x, _path2$p, _path3$4;
+var _path$1x, _path2$n, _path3$4;
 function _extends$1C() { return _extends$1C = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1C.apply(null, arguments); }
 var SvgIconExclamationMarkSpeechBubbleLarge = function SvgIconExclamationMarkSpeechBubbleLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1C({
@@ -2169,7 +2237,7 @@ var SvgIconExclamationMarkSpeechBubbleLarge = function SvgIconExclamationMarkSpe
     height: 24
   }, props), _path$1x || (_path$1x = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10.931 9.436a1.036 1.036 0 0 0 2.073 0V2.782a1.036 1.036 0 0 0-2.073 0z"
-  })), _path2$p || (_path2$p = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$n || (_path2$n = /*#__PURE__*/React__namespace.createElement("path", {
     d: "m10.68 18.4-3.477 3.166V18.4H4.027V5.545h3.5a.807.807 0 0 0 .808-.809.807.807 0 0 0-.808-.809h-3.96c-.632 0-1.145.513-1.145 1.146v13.772c0 .633.513 1.146 1.145 1.146h2.03v2.623c0 .997 1.187 1.518 1.921.843l3.774-3.466 9.136.002c.633 0 1.146-.513 1.146-1.146l-.002-13.774c0-.633-.513-1.146-1.146-1.146h-3.723a.809.809 0 0 0 0 1.618h3.263v12.854H10.68Z"
   })), _path3$4 || (_path3$4 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "m12.922 15.012-.005.005c-.226.231-.574.365-.95.365-.377 0-.73-.136-.966-.373a1.4 1.4 0 0 1-.397-.978c0-.356.151-.724.397-.971.257-.258.61-.405.966-.405.348 0 .7.145.964.41l.002.002a1.374 1.374 0 0 1-.011 1.945"
@@ -2189,7 +2257,7 @@ var SvgIconEyeClosedSmall = function SvgIconEyeClosedSmall(props) {
   })));
 };
 
-var _path$1v, _path2$o;
+var _path$1v, _path2$m;
 function _extends$1A() { return _extends$1A = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1A.apply(null, arguments); }
 var SvgIconEyeOpenSmall = function SvgIconEyeOpenSmall(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1A({
@@ -2198,7 +2266,7 @@ var SvgIconEyeOpenSmall = function SvgIconEyeOpenSmall(props) {
     height: 16
   }, props), _path$1v || (_path$1v = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M9.89 8a1.89 1.89 0 1 0-3.78 0 1.89 1.89 0 0 0 3.78 0"
-  })), _path2$o || (_path2$o = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$m || (_path2$m = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M15.868 7.546C15.725 7.334 12.319 2.33 8 2.33S.275 7.334.132 7.546a.84.84 0 0 0 0 .908C.275 8.666 3.68 13.67 8 13.67s7.725-5.004 7.868-5.216a.84.84 0 0 0 0-.908M4.402 8a3.598 3.598 0 1 1 7.196 0 3.598 3.598 0 0 1-7.196 0"
   })));
@@ -2281,7 +2349,7 @@ var SvgIconFlaskLarge = function SvgIconFlaskLarge(props) {
   })));
 };
 
-var _path$1o, _path2$n;
+var _path$1o, _path2$l;
 function _extends$1t() { return _extends$1t = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1t.apply(null, arguments); }
 var SvgIconFlaskPrivateLarge = function SvgIconFlaskPrivateLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1t({
@@ -2293,14 +2361,14 @@ var SvgIconFlaskPrivateLarge = function SvgIconFlaskPrivateLarge(props) {
     fillRule: "evenodd",
     d: "M12.946 18.82v-.235H5.152a.489.489 0 0 1-.407-.768l1.109-1.81h7.84a5.62 5.62 0 0 1 2.806-2.47L13.837 9.12V4.673c.879-.2 1.493-1 1.463-1.908v-.1A1.91 1.91 0 0 0 13.4.75H8.502c-1.05 0-1.901.858-1.901 1.916v.099A1.89 1.89 0 0 0 8.065 4.65v4.447l-3.275 5.42a.7.7 0 0 0-.249.396L3.32 16.935a2.2 2.2 0 0 0 .686 2.988c.348.208.743.32 1.147.327h7.983a5.7 5.7 0 0 1-.189-1.43M9.611 9.805a.8.8 0 0 0 .129-.433V3.867a.84.84 0 0 0-.838-.836h-.4a.225.225 0 0 1-.226-.236v-.13c0-.126.1-.23.226-.235H13.4c.13 0 .234.106.234.236v.099c0 .13-.105.235-.234.235h-.4a.84.84 0 0 0-.83.837V9.34c-.002.15.04.299.12.425l2.755 4.524H6.857z",
     clipRule: "evenodd"
-  })), _path2$n || (_path2$n = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$l || (_path2$l = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18.375 12.75a5.625 5.625 0 1 1 0 11.25 5.625 5.625 0 0 1 0-11.25m.011 2.124c-1.042 0-1.904.81-1.968 1.851v.66a.66.66 0 0 0-.66.652v2.626c0 .364.295.66.66.66h3.93a.653.653 0 0 0 .652-.66l.008-2.625a.65.65 0 0 0-.653-.653v-.66a1.97 1.97 0 0 0-1.969-1.85m-.011 3.583c.27 0 .488.219.488.488a.48.48 0 0 1-.248.413v.674a.24.24 0 0 1-.473 0v-.674a.47.47 0 0 1-.247-.413c0-.266.214-.483.48-.488m0-3.045a1.313 1.313 0 0 1 1.313 1.313v.66h-2.625v-.66a1.32 1.32 0 0 1 1.312-1.313",
     clipRule: "evenodd"
   })));
 };
 
-var _path$1n, _path2$m;
+var _path$1n, _path2$k;
 function _extends$1s() { return _extends$1s = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1s.apply(null, arguments); }
 var SvgIconFlaskPublicLarge = function SvgIconFlaskPublicLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1s({
@@ -2311,7 +2379,7 @@ var SvgIconFlaskPublicLarge = function SvgIconFlaskPublicLarge(props) {
     fill: "#CCC",
     fillRule: "evenodd",
     d: "M12.946 18.82v-.235H5.152a.489.489 0 0 1-.407-.768l1.109-1.81h7.84a5.62 5.62 0 0 1 2.806-2.47L13.837 9.12V4.673c.879-.2 1.493-1 1.463-1.908v-.1A1.91 1.91 0 0 0 13.4.75H8.502c-1.05 0-1.901.858-1.901 1.916v.099A1.89 1.89 0 0 0 8.065 4.65v4.447l-3.275 5.42a.7.7 0 0 0-.249.396L3.32 16.935a2.2 2.2 0 0 0 .686 2.988c.348.208.743.32 1.147.327h7.983a5.7 5.7 0 0 1-.189-1.43ZM9.611 9.805a.8.8 0 0 0 .129-.433V3.867a.84.84 0 0 0-.838-.836h-.4a.225.225 0 0 1-.226-.236v-.13c0-.126.1-.23.226-.235H13.4c.13 0 .234.106.234.236v.099c0 .13-.105.235-.234.235H13a.84.84 0 0 0-.83.837V9.34c-.002.15.04.299.12.425l2.755 4.524H6.857l2.754-4.486Z"
-  })), _path2$m || (_path2$m = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$k || (_path2$k = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18.83 12.768a5.625 5.625 0 1 0-.91 11.214 5.625 5.625 0 0 0 .91-11.213Zm.644.818q.328.077.645.187.176.121.383.173a4.8 4.8 0 0 1 1.582 1.192q.045.053.053.12a.65.65 0 0 1 0 .315.6.6 0 0 0-.045.188.28.28 0 0 0 .217.24q.142.018.285 0a.18.18 0 0 1 .165.12q.064.19.173.36a4.8 4.8 0 0 1 .36 1.657.3.3 0 0 1-.075.21q-.15.166-.263.36a5.5 5.5 0 0 1-.577 1.073 1.2 1.2 0 0 0-.315.45 2.3 2.3 0 0 0-.045.382c0 .053-.098.053-.15 0a2.9 2.9 0 0 1-.405-.937c-.045-.24-.098-.48-.165-.75a.98.98 0 0 0-.435-.578 2.2 2.2 0 0 0-.75-.112.89.89 0 0 1-.75-.27.57.57 0 0 1-.12-.33 1.5 1.5 0 0 1 .75-1.583c.067-.052.142-.075.21-.12a.51.51 0 0 0 .172-.502.068.068 0 0 0-.097-.053q-.212.066-.405.173c-.075 0-.15 0-.12-.075a2.8 2.8 0 0 1 .09-.75 1.04 1.04 0 0 0 0-.75.23.23 0 0 0-.15-.098h-.668q.175-.106.308-.262a.2.2 0 0 1 .142-.03m-2.422.067a.083.083 0 0 1 .12.053c.075.12.12.24.195.382.148.29.165.629.045.93-.165.338-.548.48-.863.653a4.4 4.4 0 0 0-1.605 1.432s-.045.075-.067.075a.083.083 0 0 1-.12-.052.6.6 0 0 1-.195-.165s-.09 0-.09.075a.75.75 0 0 0 .352.862.5.5 0 0 1 .15.09c.09.12 0 .293 0 .435s.263.308.48.285a2.4 2.4 0 0 0 .57-.187 1.44 1.44 0 0 1 1.298.165c.187.12.36.315.547.435a.93.93 0 0 0 .578.187.2.2 0 0 1 .12.045.69.69 0 0 1-.12.6 5 5 0 0 1-.525.503c-.413.457-.503 1.155-.84 1.657a1.4 1.4 0 0 0-.195.308 1.3 1.3 0 0 0-.045.502s0 .075-.045.053a1 1 0 0 1-.24-.098.16.16 0 0 1-.098-.12 6.5 6.5 0 0 0-.697-1.987 1.7 1.7 0 0 0-.525-.645c-.075-.053-.143-.098-.165-.173s0-.12 0-.165a1.85 1.85 0 0 0-.75-1.702.6.6 0 0 1-.24-.218c-.053-.09-.053-.24-.098-.33a1.4 1.4 0 0 0-.337-.292c-.045 0-.045-.068-.045-.12a4.88 4.88 0 0 1 3.45-3.473"
   })));
@@ -2369,7 +2437,7 @@ var SvgIconGridLarge = function SvgIconGridLarge(props) {
   })));
 };
 
-var _path$1i, _path2$l;
+var _path$1i, _path2$j;
 function _extends$1n() { return _extends$1n = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1n.apply(null, arguments); }
 var SvgIconGridPrivateLarge = function SvgIconGridPrivateLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1n({
@@ -2380,13 +2448,13 @@ var SvgIconGridPrivateLarge = function SvgIconGridPrivateLarge(props) {
     fill: "#CCC",
     fillRule: "evenodd",
     d: "M12.852 18.98H10.76v-3.212h2.764a5 5 0 0 1 1.42-1.644v-2.54h3.211v1.27h.3c.373 0 .746.075 1.045.075V2.172a.67.67 0 0 0-.672-.672H1.348c-.374 0-.598.299-.598.672v17.406a.67.67 0 0 0 .672.672h11.654a3.5 3.5 0 0 1-.224-1.27m2.091-16.135h3.212v3.212h-3.212zm0 4.631h3.212v2.764h-3.212zM10.76 2.845h2.764v3.212H10.76zm0 4.631h2.764v2.764H10.76zm0 4.109h2.764v2.764H10.76zM5.232 18.98H2.02v-3.212h3.212zm0-4.631H2.02v-2.764h3.212zm0-4.109H2.02V7.476h3.212zm0-4.183H2.02V2.845h3.212zM9.415 18.98H6.651v-3.212h2.764zm0-4.631H6.651v-2.764h2.764zm0-4.109H6.651V7.476h2.764zm0-4.183H6.651V2.845h2.764z"
-  })), _path2$l || (_path2$l = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$j || (_path2$j = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18.375 12.75c3.15 0 5.625 2.55 5.625 5.625S21.45 24 18.375 24s-5.625-2.55-5.625-5.625 2.55-5.625 5.625-5.625m0 1.95c-1.05 0-1.95.9-1.95 1.95v.675c-.375 0-.675.3-.675.675v2.625c0 .375.3.675.675.675h3.9c.375 0 .675-.3.675-.675V18c0-.375-.3-.675-.675-.675v-.675c0-1.05-.9-1.95-1.95-1.95m0 3.75c.3 0 .525.225.45.45q0 .337-.225.45v.675q0 .225-.225.225t-.225-.225v-.675q-.225-.225-.225-.45c0-.225.15-.45.45-.45m0-3.075c.75 0 1.35.6 1.275 1.35v.675h-2.625v-.675c0-.75.6-1.35 1.35-1.35"
   })));
 };
 
-var _path$1h, _path2$k;
+var _path$1h, _path2$i;
 function _extends$1m() { return _extends$1m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1m.apply(null, arguments); }
 var SvgIconGridPublicLarge = function SvgIconGridPublicLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1m({
@@ -2397,7 +2465,7 @@ var SvgIconGridPublicLarge = function SvgIconGridPublicLarge(props) {
     fill: "#CCC",
     fillRule: "evenodd",
     d: "M12.852 18.98H10.76v-3.212h2.764a5 5 0 0 1 1.42-1.644v-2.54h3.211v1.27h.3c.373 0 .746.075 1.045.075V2.172a.67.67 0 0 0-.672-.672H1.348c-.374 0-.598.299-.598.672v17.406a.67.67 0 0 0 .672.672h11.654a3.5 3.5 0 0 1-.224-1.27m2.091-16.135h3.212v3.212h-3.212zm0 4.631h3.212v2.764h-3.212zM10.76 2.845h2.764v3.212H10.76zm0 4.631h2.764v2.764H10.76zm0 4.109h2.764v2.764H10.76zM5.232 18.98H2.02v-3.212h3.212zm0-4.631H2.02v-2.764h3.212zm0-4.109H2.02V7.476h3.212zm0-4.183H2.02V2.845h3.212zM9.415 18.98H6.651v-3.212h2.764zm0-4.631H6.651v-2.764h2.764zm0-4.109H6.651V7.476h2.764zm0-4.183H6.651V2.845h2.764z"
-  })), _path2$k || (_path2$k = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$i || (_path2$i = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18.823 12.771c-3.437-.299-6.35 2.615-6.052 6.052.224 2.69 2.391 4.932 5.156 5.156 3.437.299 6.35-2.615 6.052-6.052-.224-2.765-2.391-5.006-5.156-5.156m.673.747.672.224c.15.075.224.15.374.15.598.299 1.12.672 1.569 1.195 0 0 .075.075.075.15v.299c0 .074-.075.15-.075.224 0 .15.15.224.224.224h.299a.16.16 0 0 1 .15.15c.074.149.149.298.149.373.224.523.299 1.046.373 1.644 0 .075 0 .15-.074.224a1.6 1.6 0 0 0-.3.374c-.149.299-.298.747-.522.97-.15.15-.3.3-.3.45-.074.149 0 .298-.074.373 0 .074-.075.074-.15 0-.223-.299-.298-.598-.373-.897-.075-.224-.075-.448-.15-.747a1.16 1.16 0 0 0-.448-.598c-.224-.15-.523-.074-.747-.15-.299 0-.523-.074-.747-.298-.075-.075-.15-.224-.15-.299-.149-.598.225-1.27.748-1.569.075-.075.15-.075.224-.15.15-.149.224-.298.15-.522 0-.075-.075-.075-.075-.075-.15.075-.3.075-.374.15-.075 0-.15 0-.15-.075 0-.225 0-.449.075-.748s.15-.523 0-.747c0-.075-.074-.075-.15-.075h-.672a.58.58 0 0 0 .3-.298c.074.149.149.074.149.074m-2.391.075c.075 0 .075 0 .15.075.074.15.149.224.223.373.15.3.224.673.075.897-.15.299-.523.448-.822.672-.672.3-1.195.822-1.569 1.42l-.075.075c-.074 0-.074 0-.149-.075s-.15-.075-.224-.15c0 0-.075 0-.075.075a.75.75 0 0 0 .374.822c.074 0 .074.075.15.075.074.15 0 .299 0 .448 0 .224.298.3.447.3.225 0 .374-.15.598-.225a1.5 1.5 0 0 1 1.27.15c.224.149.374.298.523.448s.374.224.598.224c.075 0 .075 0 .15.075a.58.58 0 0 1-.15.597c-.15.224-.373.3-.523.523-.373.449-.523 1.121-.822 1.644-.075.075-.15.224-.224.3-.075.149-.075.298-.075.522 0 0 0 .075-.074.075-.075 0-.15-.075-.224-.075s-.075-.075-.075-.15a10.7 10.7 0 0 0-.673-2.017c-.15-.224-.299-.523-.523-.672-.074-.075-.15-.075-.15-.15v-.15a1.88 1.88 0 0 0-.746-1.718c-.075-.074-.225-.149-.225-.224s-.074-.224-.074-.299l-.3-.299c-.074 0-.074-.074-.074-.149.3-1.569 1.57-2.989 3.288-3.437"
   })));
@@ -2428,7 +2496,7 @@ var SvgIconHouseSmall = function SvgIconHouseSmall(props) {
   })));
 };
 
-var _path$1e, _path2$j;
+var _path$1e, _path2$h;
 function _extends$1j() { return _extends$1j = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1j.apply(null, arguments); }
 var SvgIconInfoCircleLarge = function SvgIconInfoCircleLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1j({
@@ -2438,7 +2506,7 @@ var SvgIconInfoCircleLarge = function SvgIconInfoCircleLarge(props) {
   }, props), _path$1e || (_path$1e = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M13.365 8.185c-.36.36-.857.566-1.364.566a1.935 1.935 0 0 1-1.926-1.926A1.923 1.923 0 0 1 12 4.899c.51 0 1.006.205 1.364.563.357.357.563.854.563 1.363 0 .507-.206 1.003-.563 1.36Zm-.852-1.88c-.267-.27-.757-.27-1.019-.003a.726.726 0 0 0 .507 1.245.728.728 0 0 0 .512-1.243Zm-.512 3.169c.663 0 1.635.425 1.685 1.375v6.571a1.687 1.687 0 0 1-3.371-.001v-6.564c.043-.898 1.036-1.381 1.686-1.381m-.452 7.603a.45.45 0 0 0 .9 0v-5.565c-.01-.19-.201-.45-.45-.45-.248 0-.44.248-.45.452z"
-  })), _path2$j || (_path2$j = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$h || (_path2$h = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M22.364 12c0 5.724-4.64 10.364-10.364 10.364S1.636 17.724 1.636 12 6.276 1.636 12 1.636 22.364 6.276 22.364 12m-1.582 0a8.782 8.782 0 1 1-17.564 0 8.782 8.782 0 0 1 17.564 0"
   })));
@@ -2483,7 +2551,7 @@ var SvgIconLifeRingSmall = function SvgIconLifeRingSmall(props) {
   })));
 };
 
-var _path$1a, _path2$i;
+var _path$1a, _path2$g;
 function _extends$1f() { return _extends$1f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1f.apply(null, arguments); }
 var SvgIconLightBulbLarge = function SvgIconLightBulbLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1f({
@@ -2493,7 +2561,7 @@ var SvgIconLightBulbLarge = function SvgIconLightBulbLarge(props) {
   }, props), _path$1a || (_path$1a = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M12.296 2.194c3.341.144 6.067 2.783 6.242 6.037a6.1 6.1 0 0 1-1.402 4.172c-.748.9-1.257 1.77-1.58 2.678l-.008.024v3.132c0 .39-.24.703-.57.835-.08.655-.676 2.695-1.294 2.695-.073.046-3.28.046-3.375 0-.672 0-1.213-2.028-1.293-2.673a.92.92 0 0 1-.571-.834v-3.155l-.008-.023c-.323-.908-.831-1.78-1.581-2.704a6.1 6.1 0 0 1-1.401-3.902c0-1.737.728-3.351 2.025-4.552 1.3-1.203 3.025-1.802 4.816-1.73m3.365 9.053a4.5 4.5 0 0 0 1.037-2.992c-.114-2.266-2.05-4.161-4.45-4.27a4.74 4.74 0 0 0-3.462 1.24c-.928.87-1.443 2.02-1.443 3.25 0 1.02.337 1.97.99 2.774.689.839 1.207 1.68 1.593 2.523h4.14c.387-.863.907-1.686 1.595-2.524Zm-1.977 6.094v-1.754H10.31v1.754h3.375Zm-2.489 2.748c.047.081 1.524.067 1.609 0 .11-.188.229-.717.275-.956h-2.164c.047.233.17.767.28.957Z"
-  })), _path2$i || (_path2$i = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$g || (_path2$g = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12.99 6.472c0-.547-.443-.794-.99-.794a2.793 2.793 0 0 0-2.79 2.79c0 .547.315.99.862.99a.99.99 0 0 0 .981-.855l.01-.135c0-.405.428-.939.817-.997l.12-.009a.99.99 0 0 0 .99-.99"
   })));
 };
@@ -2919,7 +2987,7 @@ var SvgIconLoadingSmall = function SvgIconLoadingSmall(props) {
   }))));
 };
 
-var _path$13, _path2$h;
+var _path$13, _path2$f;
 function _extends$16() { return _extends$16 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$16.apply(null, arguments); }
 var SvgIconLockCircleSmall = function SvgIconLockCircleSmall(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$16({
@@ -2928,7 +2996,7 @@ var SvgIconLockCircleSmall = function SvgIconLockCircleSmall(props) {
     height: 16
   }, props), _path$13 || (_path$13 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8 3.733c-1.067 0-1.92.854-1.92 1.92v.96h3.733v-.96C9.92 4.587 9.067 3.733 8 3.733m0 4.374c-.427 0-.64.32-.64.64q0 .32.32.64v.96q0 .32.32.32t.32-.32v-.96q.32-.16.32-.64c.107-.32-.213-.64-.64-.64"
-  })), _path2$h || (_path2$h = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$f || (_path2$f = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M8 0C3.627 0 0 3.627 0 8s3.627 8 8 8 8-3.627 8-8-3.52-8-8-8m3.733 11.2c0 .533-.426.96-.96.96H5.227a.956.956 0 0 1-.96-.96V7.467c0-.534.426-.96.96-.96v-.96c0-1.494 1.28-2.774 2.773-2.774s2.773 1.28 2.773 2.774v.96c.534 0 .96.426.96.96z"
   })));
@@ -2985,7 +3053,7 @@ var SvgIconOpenSmall = function SvgIconOpenSmall(props) {
   })));
 };
 
-var _path$_, _path2$g;
+var _path$_, _path2$e;
 function _extends$11() { return _extends$11 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$11.apply(null, arguments); }
 var SvgIconPauseLarge = function SvgIconPauseLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$11({
@@ -2996,7 +3064,7 @@ var SvgIconPauseLarge = function SvgIconPauseLarge(props) {
     fillRule: "evenodd",
     d: "M9.853 7.185c.664 0 1.636.425 1.686 1.376v6.57a1.687 1.687 0 0 1-3.371 0V8.567c.042-.899 1.036-1.382 1.685-1.382m-.451 7.603a.45.45 0 0 0 .9 0V9.223c-.01-.19-.202-.449-.45-.449-.249 0-.44.248-.45.451zm6.43-6.228c-.05-.95-1.022-1.375-1.686-1.375-.65 0-1.643.483-1.685 1.381v6.565c0 .93.756 1.686 1.685 1.686.93 0 1.686-.756 1.686-1.686zm-1.688 6.668a.45.45 0 0 1-.45-.44V9.225c.01-.203.202-.45.45-.45.25 0 .44.258.45.448v5.565a.45.45 0 0 1-.45.44",
     clipRule: "evenodd"
-  })), _path2$g || (_path2$g = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$e || (_path2$e = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m0-1.667a8.333 8.333 0 1 0 0-16.666 8.333 8.333 0 0 0 0 16.666",
     clipRule: "evenodd"
@@ -3090,7 +3158,7 @@ var SvgIconPinSmall = function SvgIconPinSmall(props) {
   })));
 };
 
-var _path$S, _path2$f;
+var _path$S, _path2$d;
 function _extends$V() { return _extends$V = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$V.apply(null, arguments); }
 var SvgIconPlayLarge = function SvgIconPlayLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$V({
@@ -3100,7 +3168,7 @@ var SvgIconPlayLarge = function SvgIconPlayLarge(props) {
   }, props), _path$S || (_path$S = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M12 20.333a8.333 8.333 0 1 0 0-16.666 8.333 8.333 0 0 0 0 16.666M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10"
-  })), _path2$f || (_path2$f = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$d || (_path2$d = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "m15.333 12.333-5.5-3.175v6.35zm1.334 1.155a1.333 1.333 0 0 0 0-2.31l-6.5-3.752c-.89-.513-2 .128-2 1.155v7.505a1.333 1.333 0 0 0 2 1.155z"
   })));
@@ -3132,7 +3200,7 @@ var SvgIconPlusSmall = function SvgIconPlusSmall(props) {
   })));
 };
 
-var _path$P, _path2$e;
+var _path$P, _path2$c;
 function _extends$S() { return _extends$S = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$S.apply(null, arguments); }
 var SvgIconProjectPrivateLarge = function SvgIconProjectPrivateLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$S({
@@ -3143,13 +3211,13 @@ var SvgIconProjectPrivateLarge = function SvgIconProjectPrivateLarge(props) {
     fill: "#CCC",
     fillRule: "evenodd",
     d: "M21.828 5.775c-.15-.225-.374-.375-.598-.525l.075-.525c.15-1.35-.822-2.55-2.167-2.625H9.576c-.224 0-.448-.075-.597-.3L8.232.9C7.709.375 7.036 0 6.289 0H3.675C3.002 0 2.33.3 1.882.825c-.523.525-.747 1.2-.673 1.95l.3 2.4c-.3.15-.598.3-.897.6A2.48 2.48 0 0 0 .014 7.65l.822 9.375A2.76 2.76 0 0 0 3.6 19.5h9.637c-.075-.3-.075-.6-.075-.9 0-.225 0-.525.075-.75H3.6c-.598 0-1.046-.45-1.046-.975L1.658 7.5a.85.85 0 0 1 .224-.6c.15-.15.373-.3.597-.3h17.556c.224 0 .448.075.597.3a.85.85 0 0 1 .224.6l-.522 5.7c.597.15 1.12.45 1.568.75l.598-6.3c0-.675-.224-1.35-.672-1.875m-2.241-.825H3.152l-.3-2.4c0-.225.076-.45.225-.6s.374-.3.598-.3h2.614c.224 0 .449.075.598.3l.747.9c.448.6 1.12.9 1.868.9h9.263c.224 0 .448.075.597.225.15.15.225.375.225.6z"
-  })), _path2$e || (_path2$e = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$c || (_path2$c = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18.375 12.75c3.15 0 5.625 2.55 5.625 5.625S21.45 24 18.375 24s-5.625-2.55-5.625-5.625 2.55-5.625 5.625-5.625m0 1.95c-1.05 0-1.95.9-1.95 1.95v.675c-.375 0-.675.3-.675.675v2.625c0 .375.3.675.675.675h3.9c.375 0 .675-.3.675-.675V18c0-.375-.3-.675-.675-.675v-.675c0-1.05-.9-1.95-1.95-1.95m0 3.75c.3 0 .525.225.45.45q0 .337-.225.45v.675q0 .225-.225.225t-.225-.225v-.675q-.225-.225-.225-.45c0-.225.15-.45.45-.45m0-3.075c.75 0 1.35.6 1.275 1.35v.675h-2.625v-.675c0-.75.6-1.35 1.35-1.35"
   })));
 };
 
-var _path$O, _path2$d;
+var _path$O, _path2$b;
 function _extends$R() { return _extends$R = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$R.apply(null, arguments); }
 var SvgIconProjectPublicLarge = function SvgIconProjectPublicLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
@@ -3160,7 +3228,7 @@ var SvgIconProjectPublicLarge = function SvgIconProjectPublicLarge(props) {
     fill: "#CCC",
     fillRule: "evenodd",
     d: "M13.123 19.05v-.45c0-.225 0-.525.075-.75H3.61c-.6 0-1.049-.45-1.049-.975L1.662 7.5c0-.225.075-.45.225-.6s.374-.3.6-.3h17.602c.225 0 .45.075.6.3.149.15.224.375.224.6l-.524 5.7c.3.075.524.15.748.3 0 0 .075 0 .075.075.225.15.45.225.675.375l.599-6.3a2.47 2.47 0 0 0-.6-1.875c-.15-.225-.374-.375-.599-.525l.075-.525c.15-1.35-.824-2.55-2.172-2.625H9.602c-.225 0-.45-.075-.6-.3L8.255.9C7.729.375 7.055 0 6.306 0H3.685C3.01 0 2.336.3 1.887.825c-.525.525-.75 1.2-.674 1.95l.3 2.4c-.3.15-.6.3-.9.6A2.48 2.48 0 0 0 .014 7.65l.824 9.375A2.767 2.767 0 0 0 3.61 19.5h9.662c-.075-.15-.075-.3-.15-.45ZM3.085 1.95c.15-.15.375-.3.6-.3h2.621c.225 0 .45.075.6.3l.749.9c.449.6 1.123.9 1.872.9h9.288a.85.85 0 0 1 .6.225.85.85 0 0 1 .224.6l-.075.375H3.085l-.224-2.4c0-.225.075-.45.224-.6"
-  })), _path2$d || (_path2$d = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$b || (_path2$b = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18.823 12.771c-3.437-.299-6.35 2.615-6.052 6.052.224 2.69 2.391 4.932 5.156 5.156 3.437.299 6.35-2.615 6.052-6.052a5.606 5.606 0 0 0-5.156-5.156m.673.822.672.224c.15.075.224.15.374.15.598.298 1.12.672 1.569 1.195 0 0 .075.075.075.15v.298c0 .075-.075.15-.075.225 0 .149.15.224.224.224h.299a.16.16 0 0 1 .15.15c.074.149.149.298.149.373.224.523.299 1.046.373 1.644 0 .074 0 .149-.074.224a1.6 1.6 0 0 0-.3.373c-.149.3-.298.747-.522.972-.15.15-.3.298-.3.448-.074.15 0 .299-.074.373 0 .075-.075.075-.15 0-.223-.298-.298-.597-.373-.896-.075-.224-.075-.448-.15-.747a1.16 1.16 0 0 0-.448-.598c-.224-.15-.523-.075-.747-.15-.299 0-.523-.074-.747-.298-.075-.075-.15-.224-.15-.3-.149-.597.225-1.27.748-1.568.075-.075.15-.075.224-.15.15-.15.224-.299.15-.523 0-.074-.075-.074-.075-.074-.15.074-.3.074-.374.149-.075 0-.15 0-.15-.075 0-.224 0-.448.075-.747s.15-.523 0-.747c0-.075-.074-.075-.15-.075h-.672a.58.58 0 0 0 .3-.299c.074.075.074.075.149.075m-2.391.075c.075 0 .075 0 .15.075.074.149.149.224.223.373.15.299.224.673.075.897-.15.299-.523.448-.822.672-.672.299-1.195.822-1.569 1.42l-.075.075c-.074 0-.074 0-.149-.075s-.15-.075-.224-.15c0 0-.075 0-.075.075a.75.75 0 0 0 .374.822c.074 0 .074.075.15.075.074.15 0 .299 0 .448 0 .224.298.299.447.299s.374-.15.598-.224a1.5 1.5 0 0 1 1.27.15c.224.149.374.298.523.447s.374.225.598.225c.075 0 .075 0 .15.074a.58.58 0 0 1-.15.598c-.15.224-.373.299-.523.523-.373.448-.523 1.12-.822 1.644-.075.075-.15.224-.224.299-.15.15-.15.299-.15.523 0 0 0 .075-.074.075-.075 0-.15-.075-.224-.075s-.075-.075-.075-.15a10.7 10.7 0 0 0-.672-2.017c-.15-.224-.3-.523-.523-.672-.075-.075-.15-.075-.15-.15v-.15a1.88 1.88 0 0 0-.747-1.718c-.075-.075-.224-.15-.224-.224-.075-.075-.075-.224-.075-.299l-.299-.299c-.075 0-.075-.075-.075-.15.3-1.643 1.644-2.988 3.363-3.436"
   })));
@@ -3244,7 +3312,7 @@ var SvgIconRefreshSmall = function SvgIconRefreshSmall(props) {
   })));
 };
 
-var _path$H, _path2$c, _path3$3;
+var _path$H, _path2$a, _path3$3;
 function _extends$K() { return _extends$K = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$K.apply(null, arguments); }
 var SvgIconReportLarge = function SvgIconReportLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
@@ -3253,7 +3321,7 @@ var SvgIconReportLarge = function SvgIconReportLarge(props) {
     height: 24
   }, props), _path$H || (_path$H = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M3.142 21.243h11.554a.77.77 0 1 0 0-1.54H3.912V2.756h9.244v3.851c0 .425.344.77.77.77h3.851V9.69a.77.77 0 1 0 1.54 0V6.61a.78.78 0 0 0-.226-.546l-4.62-4.62a.78.78 0 0 0-.545-.226H3.142a.77.77 0 0 0-.77.77v18.486c0 .425.345.77.77.77ZM14.696 3.846l1.992 1.992h-1.992z"
-  })), _path2$c || (_path2$c = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$a || (_path2$a = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M11.615 9.305c0-2.18-2.018-4.627-2.104-4.73-.294-.35-.89-.35-1.184 0-.086.103-2.104 2.55-2.104 4.73A2.7 2.7 0 0 0 8.92 12a2.7 2.7 0 0 0 2.696-2.695Zm-3.851 0c0-.942.618-2.113 1.156-2.932.537.817 1.154 1.987 1.154 2.932a1.157 1.157 0 0 1-2.31 0m0 5.005a.77.77 0 0 1-.77.77h-.77a.77.77 0 1 1 0-1.54h.77a.77.77 0 0 1 .77.77m6.932 0a.77.77 0 0 1-.77.77h-3.852a.77.77 0 1 1 0-1.54h3.852a.77.77 0 0 1 .77.77m-6.932 3.082a.77.77 0 0 1-.77.77h-.77a.77.77 0 1 1 0-1.54h.77a.77.77 0 0 1 .77.77m6.932 0a.77.77 0 0 1-.77.77h-3.852a.77.77 0 1 1 0-1.54h3.852a.77.77 0 0 1 .77.77m.77-5.392v2.31a.77.77 0 0 0 .77.771v5.392a2.313 2.313 0 0 0 2.311 2.31 2.313 2.313 0 0 0 2.31-2.31V15.08a.77.77 0 0 0 .771-.77V12a.77.77 0 0 0-.77-.77h-4.622a.77.77 0 0 0-.77.77m3.851 8.473a.771.771 0 0 1-1.54 0V15.08h1.54zm-2.31-7.703h3.08v.77h-3.08z"
   })), _path3$3 || (_path3$3 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
@@ -3300,7 +3368,7 @@ var SvgIconRotateRightSmall = function SvgIconRotateRightSmall(props) {
   })));
 };
 
-var _path$D, _path2$b;
+var _path$D, _path2$9;
 function _extends$G() { return _extends$G = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$G.apply(null, arguments); }
 var SvgIconSaveLarge = function SvgIconSaveLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
@@ -3310,7 +3378,7 @@ var SvgIconSaveLarge = function SvgIconSaveLarge(props) {
   }, props), _path$D || (_path$D = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M15.98 14.544a3.98 3.98 0 1 1-7.96 0 3.98 3.98 0 0 1 7.96 0m-1.713 0a2.267 2.267 0 1 1-4.534 0 2.267 2.267 0 0 1 4.534 0"
-  })), _path2$b || (_path2$b = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$9 || (_path2$9 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M3.182 2.182a1 1 0 0 0-1 1v17.636a1 1 0 0 0 1 1h17.636a1 1 0 0 0 1-1V7.024a1 1 0 0 0-.293-.707l-3.842-3.842a1 1 0 0 0-.707-.293zm13.92 2.134 3.003 3.003v12.787H3.895V3.895h3v3.854a1 1 0 0 0 1 1h8.207a1 1 0 0 0 1-1zm-8.495 2.72V3.895h6.782v3.14z"
   })));
@@ -3348,7 +3416,7 @@ var SvgIconSearchLarge = function SvgIconSearchLarge(props) {
   })));
 };
 
-var _path$B, _path2$a;
+var _path$B, _path2$8;
 function _extends$D() { return _extends$D = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$D.apply(null, arguments); }
 var SvgIconSearchLinesHorizontal3Large = function SvgIconSearchLinesHorizontal3Large(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
@@ -3357,13 +3425,13 @@ var SvgIconSearchLinesHorizontal3Large = function SvgIconSearchLinesHorizontal3L
     height: 24
   }, props), _path$B || (_path$B = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M6.51 5.694a.818.818 0 1 0 0 1.636h4.362a.818.818 0 0 0 0-1.636zM5.692 9.24c0-.453.366-.819.818-.819h6.543a.818.818 0 0 1 0 1.636H6.51a.82.82 0 0 1-.818-.818Zm.818 1.908a.818.818 0 1 0 0 1.637h2.726a.818.818 0 1 0 0-1.637z"
-  })), _path2$a || (_path2$a = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$8 || (_path2$8 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M14.81 3.679a7.87 7.87 0 0 1 .681 10.352q.04.033.08.071l6.75 6.751a1.036 1.036 0 0 1-1.465 1.466l-6.751-6.75a1 1 0 0 1-.072-.08 7.876 7.876 0 0 1-10.355-.683 7.865 7.865 0 0 1 0-11.127 7.874 7.874 0 0 1 11.132 0m-1.503 9.628a5.8 5.8 0 1 0-8.203-8.203 5.8 5.8 0 0 0 8.203 8.203"
   })));
 };
 
-var _path$A, _path2$9;
+var _path$A, _path2$7;
 function _extends$C() { return _extends$C = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$C.apply(null, arguments); }
 var SvgIconSearchLinesHorizontal3Small = function SvgIconSearchLinesHorizontal3Small(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
@@ -3372,7 +3440,7 @@ var SvgIconSearchLinesHorizontal3Small = function SvgIconSearchLinesHorizontal3S
     height: 16
   }, props), _path$A || (_path$A = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M4.378 3.799a.516.516 0 1 0 0 1.033h3.099a.516.516 0 1 0 0-1.033zm-.516 2.324c0-.285.23-.517.516-.517H8.51a.516.516 0 1 1 0 1.033H4.378a.516.516 0 0 1-.516-.516m.516 1.291a.516.516 0 1 0 0 1.033h2.066a.516.516 0 0 0 0-1.033z"
-  })), _path2$9 || (_path2$9 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M9.843 2.508a5.19 5.19 0 0 1 .501 6.753 1 1 0 0 1 .079.07l4.36 4.36a.773.773 0 1 1-1.093 1.094l-4.36-4.361a1 1 0 0 1-.07-.08 5.187 5.187 0 1 1 .583-7.836m-1.144 6.19a3.602 3.602 0 1 0-5.095-5.095A3.602 3.602 0 0 0 8.7 8.698Z"
   })));
@@ -3469,7 +3537,7 @@ var SvgIconStarburstSmall = function SvgIconStarburstSmall(props) {
   })));
 };
 
-var _path$s, _path2$8;
+var _path$s, _path2$6;
 function _extends$u() { return _extends$u = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$u.apply(null, arguments); }
 var SvgIconStarLarge = function SvgIconStarLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
@@ -3479,7 +3547,7 @@ var SvgIconStarLarge = function SvgIconStarLarge(props) {
   }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "m11.992 8.712-.64 1.538a1.86 1.86 0 0 1-1.563 1.136l-1.66.133 1.264 1.084c.528.452.759 1.162.598 1.838l-.387 1.62 1.422-.868a1.86 1.86 0 0 1 1.933 0l1.421.868-.386-1.62a1.85 1.85 0 0 1 .597-1.838l1.265-1.084-1.66-.133a1.86 1.86 0 0 1-1.564-1.136zM13 7.015c-.372-.896-1.641-.896-2.014 0L9.892 9.642a.27.27 0 0 1-.23.167l-2.837.228c-.967.077-1.36 1.284-.622 1.916l2.161 1.851a.27.27 0 0 1 .088.27l-.66 2.769c-.225.944.801 1.69 1.63 1.184l2.428-1.484a.27.27 0 0 1 .284 0l2.43 1.484c.827.505 1.854-.24 1.629-1.184l-.66-2.769a.27.27 0 0 1 .087-.27l2.162-1.851c.737-.632.344-1.839-.623-1.916l-2.837-.228a.27.27 0 0 1-.23-.167z"
-  })), _path2$8 || (_path2$8 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M11.201 2.111a.79.79 0 1 1 1.582 0v1.69a.791.791 0 0 1-1.582 0zm11.055 9.091a.79.79 0 0 1 0 1.582h-1.691a.79.79 0 0 1 0-1.582zm-3.466-7.13a.791.791 0 0 1 1.119 1.119l-1.196 1.195a.79.79 0 1 1-1.119-1.118zm1.945 14.727a.79.79 0 1 1-1.119 1.118l-1.195-1.195a.79.79 0 1 1 1.118-1.119zm-9.534 1.386a.79.79 0 0 1 1.582 0v1.69a.791.791 0 0 1-1.582 0zM3.42 11.202a.79.79 0 1 1 0 1.582H1.73a.79.79 0 1 1 0-1.582zm1.028 6.401a.79.79 0 1 1 1.119 1.119L4.37 19.917A.791.791 0 0 1 3.253 18.8zM6.39 5.268a.79.79 0 1 1-1.12 1.118L4.076 5.191a.79.79 0 1 1 1.119-1.119z"
   })));
 };
@@ -3535,7 +3603,7 @@ var SvgIconThumbsUpSmall = function SvgIconThumbsUpSmall(props) {
   }))));
 };
 
-var _path$q, _path2$7, _path3$2;
+var _path$q, _path2$5, _path3$2;
 function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
 var SvgIconTrashCanLarge = function SvgIconTrashCanLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
@@ -3545,7 +3613,7 @@ var SvgIconTrashCanLarge = function SvgIconTrashCanLarge(props) {
   }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M9.188 2.202a2.18 2.18 0 0 0-2.181 2.181v.648H4.102a.49.49 0 0 0-.49.491v.557c0 .27.219.49.49.49h15.796a.49.49 0 0 0 .491-.49v-.557a.49.49 0 0 0-.49-.49h-2.903v-.649a2.18 2.18 0 0 0-2.182-2.181zm-.64 2.201c0-.361.293-.654.655-.654h5.594c.362 0 .655.293.655.654v.62H8.548z"
-  })), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$5 || (_path2$5 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M17.714 7.828a.22.22 0 0 1 .218-.209h1.103c.124 0 .223.103.218.227l-.492 12.336c-.023.411-.213 1.007-.528 1.29s-.732.44-1.166.44H6.929c-.434 0-.852-.157-1.167-.44s-.501-.88-.524-1.29L4.733 7.845a.22.22 0 0 1 .218-.227h1.117c.117 0 .213.093.218.21l.506 12.296s.047.293.363.292l9.698.008c.308 0 .353-.316.353-.316z"
   })), _path3$2 || (_path3$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8.496 9.62a.44.44 0 0 1 .418-.454l.436-.02a.436.436 0 0 1 .454.418l.369 9.175a.44.44 0 0 1-.418.454l-.436.02a.435.435 0 0 1-.454-.418zm3.286-.469a.436.436 0 0 0-.436.437v9.15c0 .241.195.437.436.437h.437c.24 0 .436-.196.436-.437v-9.15a.436.436 0 0 0-.436-.437zm2.424.413a.435.435 0 0 1 .454-.417l.436.019c.24.01.428.214.418.455l-.378 9.174a.435.435 0 0 1-.454.417l-.436-.02a.44.44 0 0 1-.418-.454z"
@@ -3590,7 +3658,7 @@ var SvgIconTreeHorizontalLarge = function SvgIconTreeHorizontalLarge(props) {
   })));
 };
 
-var _path$m, _path2$6;
+var _path$m, _path2$4;
 function _extends$m() { return _extends$m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$m.apply(null, arguments); }
 var SvgIconTreeHorizontalPrivateLarge = function SvgIconTreeHorizontalPrivateLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
@@ -3601,13 +3669,13 @@ var SvgIconTreeHorizontalPrivateLarge = function SvgIconTreeHorizontalPrivateLar
     fill: "#CCC",
     fillRule: "evenodd",
     d: "M13.71 15.9H9.652v-4.8h2.987a2.68 2.68 0 0 0 2.605 2.025c1.531 0 2.757-1.2 2.757-2.7s-1.226-2.7-2.757-2.7a2.68 2.68 0 0 0-2.605 2.025H9.651v-4.8h2.987c.307 1.2 1.379 1.95 2.605 1.95C16.774 6.9 18 5.7 18 4.2s-1.226-2.7-2.757-2.7c-1.226 0-2.375.9-2.605 2.1h-3.6q-.23 0-.46.225-.229.225-.23.45V9.75H5.363a2.68 2.68 0 0 0-2.605-2.025c-1.531 0-2.757 1.2-2.757 2.7v.075c.077 1.425 1.302 2.625 2.757 2.625A2.68 2.68 0 0 0 5.362 11.1h2.987v5.475a.68.68 0 0 0 .69.675h4.059c.076-.525.306-.9.613-1.35Zm1.533-6.825c.766 0 1.378.6 1.378 1.35s-.612 1.425-1.378 1.425-1.38-.6-1.38-1.425c-.076-.75.537-1.35 1.38-1.35m0-6.225c.766 0 1.378.6 1.378 1.425 0 .75-.612 1.35-1.378 1.35s-1.38-.6-1.38-1.35c-.076-.75.614-1.425 1.38-1.425m-12.562 9c-.766 0-1.379-.6-1.379-1.425 0-.75.613-1.35 1.379-1.35s1.455.6 1.455 1.35-.69 1.425-1.455 1.425"
-  })), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18.375 12.75c3.15 0 5.625 2.55 5.625 5.625S21.45 24 18.375 24s-5.625-2.55-5.625-5.625 2.55-5.625 5.625-5.625m0 1.95c-1.05 0-1.95.9-1.95 1.95v.675c-.375 0-.675.3-.675.675v2.625c0 .375.3.675.675.675h3.9c.375 0 .675-.3.675-.675V18c0-.375-.3-.675-.675-.675v-.675c0-1.05-.9-1.95-1.95-1.95m0 3.75c.3 0 .525.225.45.45q0 .337-.225.45v.675q0 .225-.225.225t-.225-.225v-.675q-.225-.225-.225-.45c0-.225.15-.45.45-.45m0-3.075c.75 0 1.35.6 1.275 1.35v.675h-2.625v-.675c0-.75.6-1.35 1.35-1.35"
   })));
 };
 
-var _path$l, _path2$5;
+var _path$l, _path2$3;
 function _extends$l() { return _extends$l = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$l.apply(null, arguments); }
 var SvgIconTreeHorizontalPublicLarge = function SvgIconTreeHorizontalPublicLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
@@ -3618,7 +3686,7 @@ var SvgIconTreeHorizontalPublicLarge = function SvgIconTreeHorizontalPublicLarge
     fill: "#CCC",
     fillRule: "evenodd",
     d: "M13.94 15.9H9.651v-4.8h2.987a2.68 2.68 0 0 0 2.605 2.025c1.531 0 2.757-1.2 2.757-2.7s-1.226-2.7-2.757-2.7a2.68 2.68 0 0 0-2.605 2.025H9.651v-4.8h2.987c.307 1.2 1.379 1.95 2.605 1.95C16.774 6.9 18 5.7 18 4.2s-1.226-2.7-2.757-2.7c-1.226 0-2.375.9-2.605 2.1h-3.6q-.23 0-.46.225-.229.225-.23.45V9.75H5.363a2.68 2.68 0 0 0-2.605-2.025c-1.531 0-2.757 1.2-2.757 2.7v.075c.077 1.425 1.302 2.625 2.757 2.625A2.68 2.68 0 0 0 5.362 11.1h2.987v5.475a.68.68 0 0 0 .69.675h4.289a2.75 2.75 0 0 1 .612-1.35m1.303-6.825c.766 0 1.378.6 1.378 1.35s-.612 1.425-1.378 1.425-1.38-.6-1.38-1.425c-.076-.75.537-1.35 1.38-1.35m0-6.225c.766 0 1.378.6 1.378 1.425 0 .75-.612 1.35-1.378 1.35s-1.38-.6-1.38-1.35c-.076-.75.614-1.425 1.38-1.425m-12.562 9c-.766 0-1.379-.6-1.379-1.425 0-.75.613-1.35 1.379-1.35s1.455.6 1.455 1.35-.69 1.425-1.455 1.425"
-  })), _path2$5 || (_path2$5 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18.823 12.771c-3.437-.299-6.35 2.615-6.052 6.052.224 2.69 2.391 4.932 5.156 5.156 3.437.299 6.35-2.615 6.052-6.052-.224-2.765-2.391-5.006-5.156-5.156m.673.747.672.224c.15.075.224.15.374.15.598.299 1.12.672 1.569 1.195 0 0 .075.075.075.15v.299c0 .074-.075.15-.075.224 0 .15.15.224.224.224h.299a.16.16 0 0 1 .15.15c.074.149.149.298.149.373.224.523.299 1.046.373 1.644 0 .075 0 .15-.074.224a1.6 1.6 0 0 0-.3.374c-.149.299-.298.747-.522.97-.15.15-.3.3-.3.45-.074.149 0 .298-.074.373 0 .074-.075.074-.15 0-.223-.299-.298-.598-.373-.897-.075-.224-.075-.448-.15-.747a1.16 1.16 0 0 0-.448-.598c-.224-.15-.523-.074-.747-.15-.299 0-.523-.074-.747-.298-.075-.075-.15-.224-.15-.299-.149-.598.225-1.27.748-1.569.075-.075.15-.075.224-.15.15-.149.224-.298.15-.522 0-.075-.075-.075-.075-.075-.15.075-.3.075-.374.15-.075 0-.15 0-.15-.075 0-.225 0-.449.075-.748s.15-.523 0-.747c0-.075-.074-.075-.15-.075h-.672a.58.58 0 0 0 .3-.298c.074.149.149.074.149.074m-2.391.075c.075 0 .075 0 .15.075.074.15.149.224.223.373.15.3.224.673.075.897-.15.299-.523.448-.822.672-.672.3-1.195.822-1.569 1.42l-.075.075c-.074 0-.074 0-.149-.075s-.15-.075-.224-.15c0 0-.075 0-.075.075a.75.75 0 0 0 .374.822c.074 0 .074.075.15.075.074.15 0 .299 0 .448 0 .224.298.3.447.3.225 0 .374-.15.598-.225a1.5 1.5 0 0 1 1.27.15c.224.149.374.298.523.448s.374.224.598.224c.075 0 .075 0 .15.075a.58.58 0 0 1-.15.597c-.15.224-.373.3-.523.523-.373.449-.523 1.121-.822 1.644-.075.075-.15.224-.224.3-.075.149-.075.298-.075.522 0 0 0 .075-.074.075-.075 0-.15-.075-.224-.075s-.075-.075-.075-.15a10.7 10.7 0 0 0-.673-2.017c-.15-.224-.299-.523-.523-.672-.074-.075-.15-.075-.15-.15v-.15a1.88 1.88 0 0 0-.746-1.718c-.075-.074-.225-.149-.225-.224s-.074-.224-.074-.299l-.3-.299c-.074 0-.074-.074-.074-.149.3-1.569 1.57-2.989 3.288-3.437"
   })));
@@ -3737,7 +3805,7 @@ var SvgIconUploadLarge = function SvgIconUploadLarge(props) {
   })));
 };
 
-var _path$b, _path2$4;
+var _path$b, _path2$2;
 function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
 var SvgIconUploadSmall = function SvgIconUploadSmall(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
@@ -3746,12 +3814,12 @@ var SvgIconUploadSmall = function SvgIconUploadSmall(props) {
     height: 16
   }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8.006 11.976a.98.98 0 0 1-.713-.299 1.02 1.02 0 0 1-.288-.735v-6.1L5.892 6.139a.98.98 0 0 1-.942.334 1 1 0 0 1-.75-.674 1.03 1.03 0 0 1 .208-1.001l2.847-3.314a.98.98 0 0 1 .74-.34c.284 0 .554.124.742.341l2.844 3.31c.254.282.332.68.205 1.036a.98.98 0 0 1-1.685.31L8.986 4.844v6.094c.006.276-.096.538-.28.733a1 1 0 0 1-.57.296z"
-  })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12.526 11.253c0-.554.417-1.012.956-1.074l.126-.008c.597 0 1.082.485 1.082 1.082l-.002 2.484-.01.178c-.062.538-.52.956-1.074.956H2.396a1.083 1.083 0 0 1-1.081-1.09v-2.527a1.082 1.082 0 1 1 2.163 0l-.001 1.452h9.048z"
   })));
 };
 
-var _path$a, _path2$3, _path3$1, _path4;
+var _path$a, _path2$1, _path3$1, _path4;
 function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
 var SvgIconVirusCircleSLarge = function SvgIconVirusCircleSLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
@@ -3760,7 +3828,7 @@ var SvgIconVirusCircleSLarge = function SvgIconVirusCircleSLarge(props) {
     height: 24
   }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M20.62 10.487c0-.382.308-.803.807-.803.498 0 .785.421.785.803v2.764c0 .28-.15.536-.36.672a6.7 6.7 0 0 0-1.231-.852v-.405h-1.047a5.6 5.6 0 0 0-1.454-.19c-.06 0-.23-.002-.289 0 .014-.167.02-.441.02-.61a6.095 6.095 0 0 0-6.106-6.112c-3.336 0-6.115 2.777-6.115 6.115a6.104 6.104 0 0 0 6.115 6.115c.253 0 .604-.025.852-.055l.001.203c0 .413.068 1.011.153 1.399-.064.008-.15.023-.213.029v1.185h.66c.178.34.445.755.686 1.049-.136.345-.447.57-.749.545h-2.763c-.382 0-.809-.307-.809-.801s.417-.793.799-.793h.586V19.56a7.17 7.17 0 0 1-4.025-1.708l-.89.854.414.415c.268.27.35.765 0 1.117s-.861.268-1.13 0l-1.942-1.942a.8.8 0 0 1-.072-1.202c.382-.382.94-.242 1.189.085l.41.41.862-.896a7.18 7.18 0 0 1-1.677-4.027H2.864v.585c0 .381-.288.797-.793.797a.79.79 0 0 1-.796-.797v-2.764c0-.382.306-.802.796-.802s.793.42.793.802v.585h1.223A7.2 7.2 0 0 1 5.768 7.04l-.852-.889-.416.416a.793.793 0 0 1-1.12 0c-.35-.35-.27-.867-.003-1.137L5.32 3.49c.249-.338.832-.43 1.2-.062s.25.936-.077 1.185l-.415.415.894.86a7.2 7.2 0 0 1 4.027-1.676v-1.22h-.586a.8.8 0 0 1-.795-.796c0-.486.413-.797.795-.797h2.763c.382 0 .797.31.797.797s-.415.796-.797.796h-.588v1.22a7.2 7.2 0 0 1 4.032 1.682l.89-.852-.415-.415c-.305-.261-.393-.82-.038-1.175s.906-.249 1.162.05l1.956 1.942c.267.27.348.777.001 1.127-.347.349-.856.265-1.126-.002l-.412-.413-.828.893a7.2 7.2 0 0 1 1.678 4.027h1.184v-.589Z"
-  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M22.726 17.988c0 2.486-2.014 4.62-4.598 4.62a4.6 4.6 0 0 1-4.61-4.624 4.584 4.584 0 0 1 4.602-4.59c2.55 0 4.606 2.109 4.606 4.594m-3.396 2.284c.293-.264.426-.6.426-1.014 0-.413-.072-.528-.24-.808q-.277-.363-1.029-.722a8 8 0 0 1-.721-.373.8.8 0 0 1-.22-.216.9.9 0 0 1-.112-.361.64.64 0 0 1 .265-.49c.114-.1.31-.145.525-.145q.27 0 .55.07c.187.046.355.105.64.222l.283-.695a4.3 4.3 0 0 0-.705-.243 3.2 3.2 0 0 0-.8-.092c-.573.027-.965.179-1.288.45-.285.326-.358.603-.358 1.016 0 .251.025.364.122.552q.147.282.392.495c.164.141.405.285.736.443.35.166.565.278.678.353.114.076.295.216.318.31.058.081.06.193.06.298 0 .226-.127.452-.303.523q-.197.142-.571.142-.312 0-.688-.099a5 5 0 0 1-.815-.293v.814c.44.215.844.292 1.415.292.62 0 1.147-.164 1.44-.429"
   })), _path3$1 || (_path3$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3771,7 +3839,7 @@ var SvgIconVirusCircleSLarge = function SvgIconVirusCircleSLarge(props) {
   })));
 };
 
-var _path$9, _path2$2, _path3;
+var _path$9, _path2, _path3;
 function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
 var SvgIconVirusLarge = function SvgIconVirusLarge(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
@@ -3781,7 +3849,7 @@ var SvgIconVirusLarge = function SvgIconVirusLarge(props) {
   }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M20.874 10.618c0-.381.297-.8.796-.8s.793.419.793.8v2.764c0 .381-.29.796-.793.796a.79.79 0 0 1-.796-.796v-.585h-1.185c-.155 1.528-.7 2.874-1.692 4.046l.83.87.413-.412c.274-.234.71-.347 1.09.033s.265.813.03 1.087l-.988 1.016-.974.974a.787.787 0 0 1-1.134-.012c-.373-.373-.254-.838.014-1.108l.401-.429-.85-.85a7.2 7.2 0 0 1-4.034 1.68v1.185h.584c.382 0 .802.286.802.796s-.42.793-.802.793h-2.763a.785.785 0 0 1-.791-.793c0-.503.409-.796.79-.796h.586v-1.185a7.23 7.23 0 0 1-4.04-1.717l-.882.852.417.416a.79.79 0 0 1-.002 1.122c-.355.355-.857.26-1.126-.008l-.981-.967-.96-.974a.785.785 0 0 1-.052-1.2c.4-.395.916-.242 1.165.086l.424.41.846-.888a7.15 7.15 0 0 1-1.67-4.019H3.12v.577c0 .381-.25.796-.796.796s-.798-.448-.798-.83v-2.763c0-.381.304-.763.798-.763.493 0 .796.415.796.796v.585h1.22a7.2 7.2 0 0 1 1.679-4.03l-.856-.887-.417.418a.79.79 0 0 1-1.114-.007.8.8 0 0 1 0-1.121l.967-.981.974-.96c.25-.338.826-.453 1.2-.079s.242.943-.086 1.193l-.406.406.905.85c1.177-.98 2.49-1.518 4.015-1.663V3.124h-.585c-.382 0-.803-.303-.803-.793s.421-.801.803-.801h2.763c.382 0 .8.31.8.801 0 .49-.418.793-.8.793h-.585v1.218c1.525.145 2.875.672 4.052 1.653l.861-.825-.419-.419a.8.8 0 0 1-.019-1.165.78.78 0 0 1 1.147.038l.98.967.975.974c.268.27.384.751.016 1.12a.803.803 0 0 1-1.143.008l-.416-.402-.813.873a7.2 7.2 0 0 1 1.674 4.04h1.185zM5.887 12c0 3.312 2.811 6.103 6.107 6.103 3.295 0 6.118-2.645 6.118-6.079s-2.68-6.139-6.115-6.139S5.887 8.689 5.887 12"
-  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8.674 10.683c.822 0 1.312.649 1.312 1.317s-.52 1.321-1.312 1.321S7.361 12.669 7.361 12s.491-1.317 1.313-1.317m3.583 2.607c1.046 0 1.792.864 1.792 1.796 0 .933-.74 1.801-1.792 1.801-1.05 0-1.791-.868-1.791-1.8 0-.933.745-1.798 1.791-1.798Z"
   })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
@@ -4288,54 +4356,36 @@ var iconMap = {
     },
 };
 
+var doNotForwardProps$s = ["sdsIcon", "sdsSize", "iconColor"];
 /**
  * @see https://mui.com/material-ui/icons/#svgicon
  */
-function iconSize(props) {
-    var _a, _b;
-    var sdsSize = props.sdsSize;
-    var iconSizes = getIconSizes(props);
-    return react.css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n    height: ", "px;\n    width: ", "px;\n  "], ["\n    height: ", "px;\n    width: ", "px;\n  "])), (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.width);
-}
-function buttonStyle() {
-    return react.css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n    color: inherit;\n  "], ["\n    color: inherit;\n  "])));
-}
-function staticStyle(props) {
-    var _a;
-    var _b = props.iconColor, iconColor = _b === void 0 ? "blue" : _b, _c = props.shade, shade = _c === void 0 ? 500 : _c;
-    var colors = getColors(props);
-    return react.css(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), (_a = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _a === void 0 ? void 0 : _a[shade]);
-}
-function interactive(props) {
-    var _a, _b, _c, _d;
-    var _e = props.iconColor, iconColor = _e === void 0 ? "blue" : _e, _f = props.shade, shade = _f === void 0 ? 500 : _f;
-    var colors = getColors(props);
-    var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    &:disabled {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    &:disabled {\n      color: ", ";\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryHover, (_c = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _c === void 0 ? void 0 : _c[shade], (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled);
-}
-var doNotForwardProps$s = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
 var StyledSvgIcon = styled__default.default(material.SvgIcon, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
-})(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var sdsType = props.sdsType;
-    return react.css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsType !== "iconButton" && iconSize(props), sdsType === "static" && staticStyle(props), sdsType === "interactive" && interactive(props), sdsType === "button" && buttonStyle());
+})(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var _a, _b, _c;
+    var mode = getMode(props);
+    var _d = props.iconColor, iconColor = _d === void 0 ? "blue" : _d, _e = props.shade, shade = _e === void 0 ? mode === "dark" ? 600 : 500 : _e, sdsSize = props.sdsSize;
+    var iconSizes = getIconSizes(props);
+    var colors = getColors(props);
+    return react.css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n      color: ", ";\n      height: ", "px;\n      width: ", "px;\n    "], ["\n      color: ", ";\n      height: ", "px;\n      width: ", "px;\n    "])), (_a = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _a === void 0 ? void 0 : _a[shade], (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.height, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _c === void 0 ? void 0 : _c.width);
 });
-var StyledIcon = styled__default.default("div")(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n  display: contents;\n"], ["\n  /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n  display: contents;\n"])));
-var templateObject_1$V, templateObject_2$z, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$d, templateObject_7$9;
+var StyledIcon = styled__default.default("div")(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n  display: contents;\n"], ["\n  /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n  display: contents;\n"])));
+var templateObject_1$V, templateObject_2$A, templateObject_3$r;
 
 /**
  * @see https://mui.com/material-ui/icons/#icons
  */
 var Icon = React.forwardRef(function Icon(_a, ref) {
     var _b;
-    var className = _a.className, color = _a.color, shade = _a.shade, sdsIcon = _a.sdsIcon, sdsSize = _a.sdsSize, sdsType = _a.sdsType;
+    var className = _a.className, color = _a.color, shade = _a.shade, sdsIcon = _a.sdsIcon, sdsSize = _a.sdsSize;
     var icon = (_b = iconMap[sdsIcon]) !== null && _b !== void 0 ? _b : {};
     var largeIcon = icon.largeIcon, smallIcon = icon.smallIcon;
     if ((sdsSize === "xs" || sdsSize === "s") && smallIcon) {
-        return (jsxRuntime.jsx(StyledIcon, { ref: ref, children: jsxRuntime.jsx(StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 16 16", width: 16, height: 16, component: smallIcon, sdsSize: sdsSize, sdsType: sdsType, sdsIcon: sdsIcon }) }));
+        return (jsxRuntime.jsx(StyledIcon, { ref: ref, children: jsxRuntime.jsx(StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 16 16", width: 16, height: 16, component: smallIcon, sdsSize: sdsSize, sdsIcon: sdsIcon }) }));
     }
     if ((sdsSize === "l" || sdsSize === "xl") && largeIcon) {
-        return (jsxRuntime.jsx(StyledIcon, { ref: ref, children: jsxRuntime.jsx(StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 24 24", width: 24, height: 24, component: largeIcon, sdsSize: sdsSize, sdsType: sdsType, sdsIcon: sdsIcon }) }));
+        return (jsxRuntime.jsx(StyledIcon, { ref: ref, children: jsxRuntime.jsx(StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 24 24", width: 24, height: 24, component: largeIcon, sdsSize: sdsSize, sdsIcon: sdsIcon }) }));
     }
     // eslint-disable-next-line no-console
     console.error("Error: Icon ".concat(sdsIcon, " not found for size ").concat(sdsSize, ". This is a @czi-sds/components problem."));
@@ -4344,7 +4394,7 @@ var Icon = React.forwardRef(function Icon(_a, ref) {
 
 var AccordionHeader = function (props) {
     var children = props.children, id = props.id, subtitle = props.subtitle;
-    return (jsxRuntime.jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "static" }), children: [children, subtitle && jsxRuntime.jsx(StyledSubtitle, { children: subtitle })] }));
+    return (jsxRuntime.jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), children: [children, subtitle && jsxRuntime.jsx(StyledSubtitle, { children: subtitle })] }));
 };
 
 var sdsPropNames$3 = ["useDivider", "togglePosition"];
@@ -4352,15 +4402,14 @@ var StyledAccordion = styled__default.default(material.Accordion, {
     shouldForwardProp: function (prop) {
         return !sdsPropNames$3.includes(prop.toString());
     },
-})(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var _a, _b, _c;
+})(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var _a, _b;
     var useDivider = props.useDivider, togglePosition = props.togglePosition;
     var shadows = getShadows(props);
     var typography = getTypography(props);
     var borders = getBorders(props);
     var spaces = getSpaces(props);
-    var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n      &.", " {\n        background-color: ", ";\n        background-image: none;\n        box-shadow: ", ";\n        font-family: ", ";\n        border-bottom: ", ";\n        height: fit-content;\n\n        & .", " {\n          ", "\n          min-height: 44px;\n\n          &.", " {\n            background-color: unset;\n          }\n\n          &.", " {\n            min-height: unset;\n          }\n\n          & .MuiAccordionSummary-expandIcon,\n          & .", " {\n            padding: 0;\n            align-self: flex-start;\n            margin-top: ", "px;\n          }\n        }\n\n        .", " {\n          ", "\n          padding: ", "px;\n          padding-top: ", "px;\n        }\n\n        &:before {\n          opacity: 0;\n        }\n\n        &.", " {\n          margin: 0;\n        }\n\n        ", "\n      }\n    "], ["\n      &.", " {\n        background-color: ", ";\n        background-image: none;\n        box-shadow: ", ";\n        font-family: ", ";\n        border-bottom: ", ";\n        height: fit-content;\n\n        & .", " {\n          ", "\n          min-height: 44px;\n\n          &.", " {\n            background-color: unset;\n          }\n\n          &.", " {\n            min-height: unset;\n          }\n\n          & .MuiAccordionSummary-expandIcon,\n          & .", " {\n            padding: 0;\n            align-self: flex-start;\n            margin-top: ", "px;\n          }\n        }\n\n        .", " {\n          ", "\n          padding: ", "px;\n          padding-top: ", "px;\n        }\n\n        &:before {\n          opacity: 0;\n        }\n\n        &.", " {\n          margin: 0;\n        }\n\n        ", "\n      }\n    "])), material.accordionClasses.root, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceBackground, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_b = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _b === void 0 ? void 0 : _b.body, useDivider ? (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.divider : "none", material.accordionSummaryClasses.root, focusVisibleA11yStyle(props), material.accordionSummaryClasses.focusVisible, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
+    return react.css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n      &.", " {\n        background-color: transparent;\n        background-image: none;\n        box-shadow: ", ";\n        font-family: ", ";\n        border-bottom: ", ";\n        height: fit-content;\n\n        & .", " {\n          ", "\n          min-height: 44px;\n\n          &.", " {\n            background-color: unset;\n          }\n\n          &.", " {\n            min-height: unset;\n          }\n\n          & .MuiAccordionSummary-expandIcon,\n          & .", " {\n            padding: 0;\n            align-self: flex-start;\n            margin-top: ", "px;\n          }\n        }\n\n        .", " {\n          ", "\n          padding: ", "px;\n          padding-top: ", "px;\n        }\n\n        &:before {\n          opacity: 0;\n        }\n\n        &.", " {\n          margin: 0;\n        }\n\n        ", "\n      }\n    "], ["\n      &.", " {\n        background-color: transparent;\n        background-image: none;\n        box-shadow: ", ";\n        font-family: ", ";\n        border-bottom: ", ";\n        height: fit-content;\n\n        & .", " {\n          ", "\n          min-height: 44px;\n\n          &.", " {\n            background-color: unset;\n          }\n\n          &.", " {\n            min-height: unset;\n          }\n\n          & .MuiAccordionSummary-expandIcon,\n          & .", " {\n            padding: 0;\n            align-self: flex-start;\n            margin-top: ", "px;\n          }\n        }\n\n        .", " {\n          ", "\n          padding: ", "px;\n          padding-top: ", "px;\n        }\n\n        &:before {\n          opacity: 0;\n        }\n\n        &.", " {\n          margin: 0;\n        }\n\n        ", "\n      }\n    "])), material.accordionClasses.root, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_a = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _a === void 0 ? void 0 : _a.body, useDivider ? (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.divider : "none", material.accordionSummaryClasses.root, focusVisibleA11yStyle(props), material.accordionSummaryClasses.focusVisible, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
 });
 var leftPosition = function (props) {
     var _a, _b, _c;
@@ -4370,7 +4419,7 @@ var leftPosition = function (props) {
         ((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width) !== null && _b !== void 0 ? _b : 12) +
         ((_c = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _c !== void 0 ? _c : 8));
 };
-var templateObject_1$U, templateObject_2$y, templateObject_3$q;
+var templateObject_1$U, templateObject_2$z, templateObject_3$q;
 
 /**
  * @see https://mui.com/material-ui/react-accordion/
@@ -4453,7 +4502,7 @@ var SDSWarningTypes;
     SDSWarningTypes["MenuSelectDeprecated"] = "menuSelectDeprecated";
     SDSWarningTypes["TooltipSubtitle"] = "tooltipSubtitle";
     SDSWarningTypes["TooltipWidth"] = "tooltipWidth";
-    SDSWarningTypes["TooltipInverted"] = "tooltipInverted";
+    SDSWarningTypes["TooltipInvertStyle"] = "tooltipInvertStyle";
 })(SDSWarningTypes || (SDSWarningTypes = {}));
 var SDS_WARNINGS = (_a = {},
     _a[SDSWarningTypes.ButtonMinimalIsAllCaps] = {
@@ -4488,9 +4537,9 @@ var SDS_WARNINGS = (_a = {},
         hasWarned: false,
         message: "Warning: The 'wide' width is only available for light tooltips!",
     },
-    _a[SDSWarningTypes.TooltipInverted] = {
+    _a[SDSWarningTypes.TooltipInvertStyle] = {
         hasWarned: false,
-        message: "Warning: Tooltips using the inverted prop will be deprecated. Please use sdsStyle: 'dark' | 'light' instead!",
+        message: "Warning: Tooltips using the inverted or sdsStyle prop will be deprecated. Please use hasInvertedStyle instead!",
     },
     _a);
 var showWarningIfFirstOccurence = function (warningType) {
@@ -4532,10 +4581,10 @@ var ButtonStyles = function (props) {
         : "".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 = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction
-        : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse;
+        : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill;
     var ornamentColor = variant === "outlined"
-        ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.icon
-        : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryInverse;
+        ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.ornament
+        : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentOnFill;
     var backgroundColor = variant === "outlined"
         ? "transparent"
         : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.fillPrimary;
@@ -4543,11 +4592,14 @@ var ButtonStyles = function (props) {
     var disabledBorder = variant === "outlined"
         ? "inset 0 0 0 1px ".concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderDisabled)
         : "none";
-    return react.css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n    background-color: ", ";\n    border: none;\n    box-shadow: inset 0 0 0 1px ", ";\n    padding: ", ";\n    color: ", ";\n    line-height: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      box-shadow: ", ";\n      border: none;\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    background-color: ", ";\n    border: none;\n    box-shadow: inset 0 0 0 1px ", ";\n    padding: ", ";\n    color: ", ";\n    line-height: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      box-shadow: ", ";\n      border: none;\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  "])), backgroundColor, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border, padding, contentColor, isAllCaps ? "20px" : "unset", ornamentColor, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textPrimaryInverse, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.fillHover, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.borderHover, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.iconPrimaryInverse, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.textPrimaryInverse, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _p === void 0 ? void 0 : _p.fillPressed, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _q === void 0 ? void 0 : _q.fillPressed, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.iconPrimaryInverse, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.textDisabled, disabledBackgroundColor, disabledBorder, (_t = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _t === void 0 ? void 0 : _t.iconDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_u = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _u === void 0 ? void 0 : _u.width, (_v = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _v === void 0 ? void 0 : _v.width, (_w = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _w === void 0 ? void 0 : _w.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
+    var boxshadow = variant === "outlined"
+        ? "inset 0 0 0 1px ".concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border)
+        : "none";
+    return react.css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n    background-color: ", ";\n    border: none;\n    box-shadow: ", ";\n    padding: ", ";\n    color: ", ";\n    line-height: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      box-shadow: ", ";\n      border: none;\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    background-color: ", ";\n    border: none;\n    box-shadow: ", ";\n    padding: ", ";\n    color: ", ";\n    line-height: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      box-shadow: ", ";\n      border: none;\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  "])), backgroundColor, boxshadow, padding, contentColor, isAllCaps ? "20px" : "unset", ornamentColor, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textPrimaryInverse, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.fillHover, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.borderHover, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.ornamentPrimaryInverse, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.textPrimaryInverse, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _p === void 0 ? void 0 : _p.fillPressed, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _q === void 0 ? void 0 : _q.fillPressed, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.ornamentPrimaryInverse, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.textDisabled, disabledBackgroundColor, disabledBorder, (_t = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _t === void 0 ? void 0 : _t.ornamentDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_u = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _u === void 0 ? void 0 : _u.width, (_v = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _v === void 0 ? void 0 : _v.width, (_w = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _w === void 0 ? void 0 : _w.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
 };
 var Rounded = function (props) {
     var corners = getCorners(props);
-    return react.css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n    border-radius: ", "px;\n  "], ["\n    border-radius: ", "px;\n  "])), corners === null || corners === void 0 ? void 0 : corners.l);
+    return react.css(templateObject_2$y || (templateObject_2$y = __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, _r, _s;
@@ -4556,14 +4608,17 @@ var DestructiveButton = function (props) {
     var semanticColors = getSemanticColors(props);
     var contentColor = variant === "outlined"
         ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _a === void 0 ? void 0 : _a.text
-        : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse;
+        : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill;
     var ornamentColor = variant === "outlined"
         ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _c === void 0 ? void 0 : _c.ornament
-        : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryInverse;
+        : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentOnFill;
     var backgroundColor = variant === "outlined"
         ? "transparent"
         : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _e === void 0 ? void 0 : _e.fillPrimary;
-    return react.css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n    border: none;\n    box-shadow: inset 0 0 0 1px ", ";\n    color: ", ";\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "], ["\n    border: none;\n    box-shadow: inset 0 0 0 1px ", ";\n    color: ", ";\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "])), (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border, contentColor, backgroundColor, ornamentColor, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _h === void 0 ? void 0 : _h.fillHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _j === void 0 ? void 0 : _j.fillHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.iconPrimaryInverse, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimaryInverse, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _m === void 0 ? void 0 : _m.fillPressed, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _o === void 0 ? void 0 : _o.fillPressed, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _p === void 0 ? void 0 : _p.iconPrimaryInverse, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _q === void 0 ? void 0 : _q.textDisabled, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.iconDisabled);
+    var boxshadow = variant === "outlined"
+        ? "inset 0 0 0 1px ".concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border)
+        : "none";
+    return react.css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n    border: none;\n    box-shadow: ", ";\n    color: ", ";\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "], ["\n    border: none;\n    box-shadow: ", ";\n    color: ", ";\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      color: ", ";\n      background-color: ", ";\n      border: none;\n      box-shadow: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "])), boxshadow, contentColor, backgroundColor, ornamentColor, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _h === void 0 ? void 0 : _h.fillHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _j === void 0 ? void 0 : _j.fillHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentPrimaryInverse, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimaryInverse, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _m === void 0 ? void 0 : _m.fillPressed, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _o === void 0 ? void 0 : _o.fillPressed, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _p === void 0 ? void 0 : _p.ornamentPrimaryInverse, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _q === void 0 ? void 0 : _q.textDisabled, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.ornamentDisabled);
 };
 var StyledButton$3 = styled__default.default(material.Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
@@ -4573,22 +4628,22 @@ var StyledButton$3 = styled__default.default(material.Button, {
 });
 // Minimal Button Styles
 var Minimal = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var isAllCaps = props.isAllCaps;
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n    ", "\n    ", "\n\n    min-width: unset;\n    padding: ", "px ", "px;\n\n    &:hover,\n    &:focus-visible {\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:hover {\n      background-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 ", "px;\n\n    &:hover,\n    &:focus-visible {\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:hover {\n      background-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(props), isAllCaps ? fontCapsXxxs(props) : fontBodySemiboldXxs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textActionHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.iconHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.iconPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.iconDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_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, (_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _k === void 0 ? void 0 : _k.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
+    return react.css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n    ", "\n    ", "\n\n    min-width: unset;\n    padding: ", "px ", "px;\n\n    &:hover,\n    &:focus-visible {\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\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 ", "px;\n\n    &:hover,\n    &:focus-visible {\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      color: ", ";\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\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(props), isAllCaps ? fontCapsXxxs(props) : fontBodySemiboldXxs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textActionHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.ornamentPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _j === void 0 ? void 0 : _j.width, (_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _k === void 0 ? void 0 : _k.width, (_l = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _l === void 0 ? void 0 : _l.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
 };
 var PrimaryMinimalButton = function (props) {
-    var _a;
+    var _a, _b;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n    ", "\n    color: ", ";\n  "], ["\n    ", "\n    color: ", ";\n  "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction);
+    return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n    ", "\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "], ["\n    ", "\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament);
 };
 var SecondaryMinimalButton = function (props) {
-    var _a;
+    var _a, _b;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n    ", "\n    color: ", ";\n  "], ["\n    ", "\n    color: ", ";\n  "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary);
+    return react.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n    ", "\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "], ["\n    ", "\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary);
 };
 var StyledMinimalButton = styled__default.default(material.Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
@@ -4605,27 +4660,27 @@ var StyledButtonLegacy = styled__default.default(material.Button, {
     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$S, templateObject_2$x, templateObject_3$p, templateObject_4$m, templateObject_5$h, templateObject_6$c, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$2, templateObject_11$1;
+var templateObject_1$S, templateObject_2$y, templateObject_3$p, templateObject_4$m, templateObject_5$h, templateObject_6$c, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$2, templateObject_11$1;
 
 var isDisabled$1 = function (props) {
     var _a, _b;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled);
+    return react.css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n\n    svg {\n      color: ", ";\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled);
 };
 var primary$2 = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_2$w || (templateObject_2$w = __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 = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.iconHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.textActionPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.iconPressed);
+    return react.css(templateObject_2$x || (templateObject_2$x = __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 = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
 };
 var secondary$2 = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_3$o || (templateObject_3$o = __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 = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.iconHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.iconPressed);
+    return react.css(templateObject_3$o || (templateObject_3$o = __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 = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
 };
 var tertiary = function (props) {
     var _a, _b, _c, _d, _e, _f;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_4$l || (templateObject_4$l = __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 = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.iconPrimaryPressed);
+    return react.css(templateObject_4$l || (templateObject_4$l = __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 = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondaryHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryPressed);
 };
 var small$1 = function (props) {
     var sdsType = props.sdsType;
@@ -4665,7 +4720,7 @@ var StyledButtonIcon = styled__default.default(material.IconButton, {
     var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
     return react.css(templateObject_8$5 || (templateObject_8$5 = __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$R, templateObject_2$w, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$b, templateObject_7$7, templateObject_8$5, templateObject_9$2;
+var templateObject_1$R, templateObject_2$x, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$b, templateObject_7$7, templateObject_8$5, templateObject_9$2;
 
 var ButtonIconSizeToSdsIconSize = {
     large: "xl",
@@ -4698,7 +4753,7 @@ var ButtonIcon = React.forwardRef(function ButtonIcon(props, ref) {
                 return icon;
             }
             else {
-                return (jsxRuntime.jsx(Icon, __assign({ sdsType: "iconButton" }, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
+                return (jsxRuntime.jsx(Icon, __assign({}, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
             }
         }
     };
@@ -4772,12 +4827,12 @@ var applyIntentColor$2 = function (props, intent) {
     var _a, _b, _c, _d;
     var semanticColors = getSemanticColors(props);
     var borders = getBorders(props);
-    return react.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _d === void 0 ? void 0 : _d.ornament);
+    return react.css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _d === void 0 ? void 0 : _d.ornament);
 };
 var disabledStyled$2 = function (props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n    .", " {\n      .", " {\n        border: 1px solid ", " !important;\n      }\n\n      .", " svg {\n        color: ", ";\n      }\n\n      &:hover .", " {\n        border: 1px solid ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "], ["\n    .", " {\n      .", " {\n        border: 1px solid ", " !important;\n      }\n\n      .", " svg {\n        color: ", ";\n      }\n\n      &:hover .", " {\n        border: 1px solid ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textDisabled);
+    return react.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n    .", " {\n      .", " {\n        border: 1px solid ", " !important;\n      }\n\n      .", " svg {\n        color: ", ";\n      }\n\n      &:hover {\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        .", " svg {\n          color: ", " !important;\n        }\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "], ["\n    .", " {\n      .", " {\n        border: 1px solid ", " !important;\n      }\n\n      .", " svg {\n        color: ", ";\n      }\n\n      &:hover {\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        .", " svg {\n          color: ", " !important;\n        }\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, material.inputAdornmentClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled);
 };
 var StyledLabel$2 = styled__default.default("label")(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyM$1, function (props) {
     var spaces = getSpaces(props);
@@ -4788,15 +4843,15 @@ var StyledSearchBase = styled__default.default(material.TextField, {
         return !sdsPropNames$2.includes(prop.toString());
     },
 })(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n      margin-top: ", "px;\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      min-width: 120px;\n      display: block;\n\n      [type=\"search\"]::-webkit-search-cancel-button {\n        -webkit-appearance: none;\n        appearance: none;\n      }\n\n      & .input-search-clear-icon {\n        cursor: pointer;\n\n        svg {\n          height: ", "px;\n          width: ", "px;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n        background-color: ", ";\n        width: 100%;\n\n        .", " {\n          padding-right: ", "px;\n        }\n\n        .MuiInputAdornment-positionEnd {\n          position: absolute;\n          right: ", "px;\n        }\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        &:hover .input-search-clear-icon,\n        &:focus-within .input-search-clear-icon {\n          svg {\n            color: ", " !important;\n          }\n\n          &:hover {\n            svg {\n              color: ", " !important;\n            }\n          }\n\n          &:active {\n            svg {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n        background-color: ", ";\n      }\n\n      .", ":hover {\n        & .", ":last-of-type {\n          svg {\n            color: ", ";\n          }\n        }\n        .", " {\n          border: 1px solid ", ";\n        }\n      }\n\n      .", ".", " {\n        outline: none;\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        .", " .", ":last-of-type {\n          cursor: default;\n          svg {\n            color: ", ";\n          }\n        }\n      }\n\n      &.user-is-tabbing .", ":focus-within {\n        outline: 2px solid ", ";\n        outline-offset: 1px;\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      margin-top: ", "px;\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      min-width: 120px;\n      display: block;\n\n      [type=\"search\"]::-webkit-search-cancel-button {\n        -webkit-appearance: none;\n        appearance: none;\n      }\n\n      & .input-search-clear-icon {\n        cursor: pointer;\n\n        svg {\n          height: ", "px;\n          width: ", "px;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n        background-color: ", ";\n        width: 100%;\n\n        .", " {\n          padding-right: ", "px;\n        }\n\n        .MuiInputAdornment-positionEnd {\n          position: absolute;\n          right: ", "px;\n        }\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        &:hover .input-search-clear-icon,\n        &:focus-within .input-search-clear-icon {\n          svg {\n            color: ", " !important;\n          }\n\n          &:hover {\n            svg {\n              color: ", " !important;\n            }\n          }\n\n          &:active {\n            svg {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n        background-color: ", ";\n      }\n\n      .", ":hover {\n        & .", ":last-of-type {\n          svg {\n            color: ", ";\n          }\n        }\n        .", " {\n          border: 1px solid ", ";\n        }\n      }\n\n      .", ".", " {\n        outline: none;\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        .", " .", ":last-of-type {\n          cursor: default;\n          svg {\n            color: ", ";\n          }\n        }\n      }\n\n      &.user-is-tabbing .", ":focus-within {\n        outline: 2px solid ", ";\n        outline-offset: 1px;\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, material.outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, material.outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.iconPrimaryHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, material.inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.surfacePrimary, material.outlinedInputClasses.root, material.buttonBaseClasses.root, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, material.outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.icon, material.outlinedInputClasses.root, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.borderHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
+    return react.css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n      margin-top: ", "px;\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      min-width: 120px;\n      display: block;\n\n      [type=\"search\"]::-webkit-search-cancel-button {\n        -webkit-appearance: none;\n        appearance: none;\n      }\n\n      & .input-search-clear-icon {\n        cursor: pointer;\n\n        svg {\n          height: ", "px;\n          width: ", "px;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n        width: 100%;\n\n        .", " {\n          padding-right: ", "px;\n        }\n\n        .MuiInputAdornment-positionEnd {\n          position: absolute;\n          right: ", "px;\n        }\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        &:hover .input-search-clear-icon,\n        &:focus-within .input-search-clear-icon {\n          svg {\n            color: ", " !important;\n          }\n\n          &:hover {\n            svg {\n              color: ", " !important;\n            }\n          }\n\n          &:active {\n            svg {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n      }\n\n      .", ":hover {\n        & .", ":last-of-type {\n          svg {\n            color: ", ";\n          }\n        }\n        .", " {\n          border: 1px solid ", ";\n        }\n      }\n\n      .", ".", " {\n        outline: none;\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        .", " .", ":last-of-type {\n          cursor: default;\n          svg {\n            color: ", ";\n          }\n        }\n      }\n\n      &.user-is-tabbing .", ":focus-within {\n        outline: 2px solid ", ";\n        outline-offset: 1px;\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      margin-top: ", "px;\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      min-width: 120px;\n      display: block;\n\n      [type=\"search\"]::-webkit-search-cancel-button {\n        -webkit-appearance: none;\n        appearance: none;\n      }\n\n      & .input-search-clear-icon {\n        cursor: pointer;\n\n        svg {\n          height: ", "px;\n          width: ", "px;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n        width: 100%;\n\n        .", " {\n          padding-right: ", "px;\n        }\n\n        .MuiInputAdornment-positionEnd {\n          position: absolute;\n          right: ", "px;\n        }\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        &:hover .input-search-clear-icon,\n        &:focus-within .input-search-clear-icon {\n          svg {\n            color: ", " !important;\n          }\n\n          &:hover {\n            svg {\n              color: ", " !important;\n            }\n          }\n\n          &:active {\n            svg {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n      }\n\n      .", ":hover {\n        & .", ":last-of-type {\n          svg {\n            color: ", ";\n          }\n        }\n        .", " {\n          border: 1px solid ", ";\n        }\n      }\n\n      .", ".", " {\n        outline: none;\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        .", " .", ":last-of-type {\n          cursor: default;\n          svg {\n            color: ", ";\n          }\n        }\n      }\n\n      &.user-is-tabbing .", ":focus-within {\n        outline: 2px solid ", ";\n        outline-offset: 1px;\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, material.outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.border, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.fillPressed, material.inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.outlinedInputClasses.root, material.buttonBaseClasses.root, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, material.outlinedInputClasses.notchedOutline, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.ornamentFocus, material.outlinedInputClasses.root, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.borderHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
 });
 var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n  position: relative;\n  height: unset;\n  margin: 0;\n"], ["\n  position: relative;\n  height: unset;\n  margin: 0;\n"])));
-var templateObject_1$Q, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$6;
+var templateObject_1$Q, templateObject_2$w, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$6;
 
 var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -4804,9 +4859,9 @@ var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject
     var fontWeights = getFontWeights(props);
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n      min-height: unset;\n      opacity: 1;\n\n      &.MuiAutocomplete-option {\n        min-height: unset;\n      }\n      \n      .primary-text {\n        font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n      }\n\n      &.MuiButtonBase-root {\n        background-color: transparent;\n        opacity: 1;\n\n        &:hover, &.").concat(material.menuItemClasses.focusVisible, " {\n          background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n          &[aria-selected=\"true\"] {\n            background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n          }\n        }\n      }\n\n      &.").concat(material.menuItemClasses.root, " .MuiSvgIcon-root {\n        align-self: flex-start;\n      }\n\n      &.").concat(material.menuItemClasses.root, " .").concat(material.menuItemClasses.disabled, " {\n        opacity: 1 !important;\n      }\n\n      &.MuiAutocomplete-option[aria-selected=\"true\"] {\n        &:hover {\n          background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n        }\n\n        svg.check-icon {\n          color: ").concat(selected ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconSelected : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, ";\n        }\n      }\n\n      &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n        opacity: 1;\n      }\n\n      &:hover {\n        background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n        svg.check-icon {\n          color: ").concat(selected ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimary, ";\n        }\n      }\n\n      &.Mui-selected.MuiListItem-root.MuiListItem-button {\n        background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surfacePrimary, ";\n        &:hover {\n          background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n        }\n        .primary-text {\n          font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n        }\n      }\n\n      &:active {\n        svg.check-icon {\n          color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.iconPressed, ";\n        }\n\n        &:active {\n          svg.check-icon {\n            color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.iconPressed, ";\n          }\n\n          .primary-text {\n            font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n          }\n        }\n      }\n    ");
+    return "\n      padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n      min-height: unset;\n      opacity: 1;\n\n      &.MuiAutocomplete-option {\n        min-height: unset;\n      }\n      \n      .primary-text {\n        font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n      }\n\n      &.MuiButtonBase-root {\n        background-color: transparent;\n        opacity: 1;\n\n        &:hover, &.").concat(material.menuItemClasses.focusVisible, " {\n          background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n          &[aria-selected=\"true\"] {\n            background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n          }\n        }\n      }\n\n      &.").concat(material.menuItemClasses.root, " .MuiSvgIcon-root {\n        align-self: flex-start;\n      }\n\n      &.").concat(material.menuItemClasses.root, " .").concat(material.menuItemClasses.disabled, " {\n        opacity: 1 !important;\n      }\n\n      &.MuiAutocomplete-option[aria-selected=\"true\"] {\n        &:hover {\n          background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n        }\n\n        svg.check-icon {\n          color: ").concat(selected ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentSelected : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, ";\n        }\n      }\n\n      &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n        opacity: 1;\n      }\n\n      &:hover {\n        background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n        svg.check-icon {\n          color: ").concat(selected ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondary, ";\n        }\n      }\n\n      &.Mui-selected.MuiListItem-root.MuiListItem-button {\n        background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surface, ";\n        &:hover {\n          background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n        }\n        .primary-text {\n          font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n        }\n      }\n\n      &:active {\n        svg.check-icon {\n          color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.ornamentPressed, ";\n        }\n\n        &:active {\n          svg.check-icon {\n            color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.ornamentPressed, ";\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__default.default("span")(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  width: 100%;\n"])));
+var ContentWrapper = styled__default.default("span")(templateObject_2$v || (templateObject_2$v = __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;
@@ -4826,7 +4881,7 @@ var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$j || (
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n      margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n      .MuiSvgIcon-root {\n        ").concat(disabled ? "color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, ";") : null, "\n      }\n    ");
+    return "\n      margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n      margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n      .MuiSvgIcon-root {\n        ").concat(disabled ? "color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled, ";") : null, ";\n      }\n    ");
 });
 var ColumnWrapper = styled__default.default("span")(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
     var _a;
@@ -4847,8 +4902,8 @@ var StyledCheck = styled__default.default(iconsMaterial.Check, {
     var iconSizes = getIconSizes(props);
     var semanticColors = getSemanticColors(props);
     var selectedColor = disabled
-        ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
-        : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
+        ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled
+        : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
     return "\n      color: ".concat(selected ? selectedColor : "transparent", ";\n      padding: 0;\n      height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n      width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n\n      &.MuiCheckbox-colorPrimary.Mui-checked:hover {\n        background-color: transparent;\n      }\n    ");
 });
 var StyledMinus = styled__default.default(iconsMaterial.Remove, {
@@ -4859,11 +4914,11 @@ var StyledMinus = styled__default.default(iconsMaterial.Remove, {
     var semanticColors = getSemanticColors(props);
     var iconSizes = getIconSizes(props);
     var selectedColor = disabled
-        ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
-        : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
+        ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled
+        : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
     return "\n      color: ".concat(selected ? selectedColor : "transparent", ";\n      padding: 0;\n      height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n      width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n\n      &.MuiCheckbox-colorPrimary.Mui-checked:hover {\n        background-color: transparent;\n      }\n    ");
 });
-var templateObject_1$P, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$9, templateObject_7$5, templateObject_8$4;
+var templateObject_1$P, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$9, templateObject_7$5, templateObject_8$4;
 
 /**
  * @see https://mui.com/material-ui/react-menu/
@@ -4897,7 +4952,7 @@ var MenuItem = React.forwardRef(function MenuItem(props, ref) {
                 return (jsxRuntime.jsx(StyledMenuItemIcon, { disabled: disabled, children: icon }));
             }
             else {
-                return (jsxRuntime.jsx(StyledMenuItemIcon, { disabled: disabled, children: jsxRuntime.jsx(Icon, __assign({ color: "blue" }, sdsIconProps, { sdsType: "static", sdsIcon: icon, sdsSize: "s" })) }));
+                return (jsxRuntime.jsx(StyledMenuItemIcon, { disabled: disabled, children: jsxRuntime.jsx(Icon, __assign({ color: "blue" }, sdsIconProps, { sdsIcon: icon, sdsSize: "s" })) }));
             }
         }
     };
@@ -5015,12 +5070,8 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledLabel$2, { htmlFor: id, children: label }), jsxRuntime.jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef, 
                 // passed to mui Input
                 InputProps: {
-                    endAdornment: value ? (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
-                                sdsType: "iconButton",
-                            }, icon: "XMarkCircle" }) })) : null,
-                    startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
-                                sdsType: "interactive",
-                            }, icon: "Search" }) })),
+                    endAdornment: value ? (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "XMarkCircle" }) })) : null,
+                    startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "Search" }) })),
                 }, type: "search", variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, disabled: disabled, 
                 /**
                  * (masoudmanson): This prevents the browser's default auto completion
@@ -5045,11 +5096,11 @@ var StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
     var spaces = getSpaces(props);
     var borders = getBorders(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      ".concat(!search && "height: 0; margin: 0 !important;", ";\n      \n      // (masoudmanson): We need to apply the focus styles to the input element\n      // when the user is tabbing through the options. To find out more, take a\n      // look at the useDetectUserTabbing hook.\n      &[data-user-is-tabbing=\"true\"]:focus-within {\n        border-radius: 4px;\n        outline: 2px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, ";\n        outline-offset: 1px;\n      }\n\n      .MuiFormControl-root {\n        outline: none;\n      }\n\n      .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n        padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n        .MuiAutocomplete-input {\n          padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n        }\n      }\n\n      & + .").concat(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n        .").concat(material.autocompleteClasses.listbox, " {\n          max-height: 40vh;\n          padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n          .").concat(material.autocompleteClasses.option, " {\n            min-height: unset;\n\n            &.").concat(material.autocompleteClasses.focused, " {\n              background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfaceSecondary, ";\n            }\n\n            &[aria-selected=\"true\"] {\n              background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, ";\n            }\n\n            &[aria-disabled=\"true\"] {\n              opacity: 1;\n            }\n\n            &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n              background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfaceSecondary, ";\n            }\n          }\n\n          & > li:last-child .").concat(material.autocompleteClasses.groupUl, " {\n            border-bottom: none;\n            margin-bottom: 0;\n            padding-bottom: 0;\n          }\n        }\n\n        .").concat(material.autocompleteClasses.groupLabel, " {\n          top: 0;\n          color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textSecondary, ";\n          background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surfacePrimary, ";\n          padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n        }\n\n        .").concat(material.autocompleteClasses.groupUl, " {\n          position: relative;\n          margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n          border-bottom: ").concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.divider, ";\n          padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n          & li:last-of-type {\n            position: relative;\n          }\n        }\n\n        .").concat(material.autocompleteClasses.noOptions, " {\n          padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n          margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n        }\n\n        .").concat(material.autocompleteClasses.loading, " {\n          padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n        }\n      }\n    ");
+    return "\n      ".concat(!search && "height: 0; margin: 0 !important;", ";\n      \n      // (masoudmanson): We need to apply the focus styles to the input element\n      // when the user is tabbing through the options. To find out more, take a\n      // look at the useDetectUserTabbing hook.\n      &[data-user-is-tabbing=\"true\"]:focus-within {\n        border-radius: 4px;\n        outline: 2px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, ";\n        outline-offset: 1px;\n      }\n\n      .MuiFormControl-root {\n        outline: none;\n      }\n\n      .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n        padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n        .MuiAutocomplete-input {\n          padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n        }\n      }\n\n      & + .").concat(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n        .").concat(material.autocompleteClasses.listbox, " {\n          max-height: 40vh;\n          padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n          .").concat(material.autocompleteClasses.option, " {\n            min-height: unset;\n\n            &.").concat(material.autocompleteClasses.focused, " {\n              background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n            }\n\n            &[aria-selected=\"true\"] {\n              background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surface, ";\n            }\n\n            &[aria-disabled=\"true\"] {\n              opacity: 1;\n            }\n\n            &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n              background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, ";\n            }\n          }\n\n          & > li:last-child .").concat(material.autocompleteClasses.groupUl, " {\n            border-bottom: none;\n            margin-bottom: 0;\n            padding-bottom: 0;\n          }\n        }\n\n        .").concat(material.autocompleteClasses.groupLabel, " {\n          top: 0;\n          color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textSecondary, ";\n          background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surface, ";\n          padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n        }\n\n        .").concat(material.autocompleteClasses.groupUl, " {\n          position: relative;\n          margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n          border-bottom: ").concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.divider, ";\n          padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n          & li:last-of-type {\n            position: relative;\n          }\n        }\n\n        .").concat(material.autocompleteClasses.noOptions, " {\n          padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n          margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n        }\n\n        .").concat(material.autocompleteClasses.loading, " {\n          padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n        }\n      }\n    ");
 });
 var InputBaseWrapper$1 = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
-})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var search = props.search;
     if (!search) {
         // (thuang): We cannot use `display: none;` here, since
@@ -5071,7 +5122,7 @@ var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$i |
     var shadows = getShadows(props);
     var borders = getBorders(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      background-image: none;\n      padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ;\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n      box-sizing: border-box;\n    ");
+    return "\n      background-image: none;\n      padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ;\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\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__default.default("div")(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var _a;
@@ -5079,7 +5130,7 @@ var StyledMenuItemDetails = styled__default.default("div")(templateObject_5$d ||
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n      white-space: pre-wrap;\n    ");
 });
 var StyledMenuItemText = styled__default.default("div")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var templateObject_1$O, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8;
+var templateObject_1$O, templateObject_2$u, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8;
 
 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, onClickAway = props.onClickAway, onClick = props.onClick, onOpen = props.onOpen, onClose = props.onClose, disabled = props.disabled, _r = props.intent, intent = _r === void 0 ? "default" : _r;
@@ -5150,9 +5201,7 @@ var AutocompleteBase = function (props) {
                         , { 
                             // (masoudmanson): This is to ensure that the clear button won't be focusable
                             // when the search prop is set to false.
-                            tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, "aria-label": "Clear Button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
-                                sdsType: "iconButton",
-                            }, icon: "XMarkCircle" })) })), 
+                            tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, "aria-label": "Clear Button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "XMarkCircle" })) })), 
                     /**
                      * (thuang): Works with css caret-color: "transparent" to hide
                      * mobile keyboard
@@ -5160,9 +5209,7 @@ var AutocompleteBase = function (props) {
                     inputMode: search ? "text" : "none", inputProps: params.inputProps, startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "Search Button", 
                             // (masoudmanson): This is to ensure that the search button won't be focusable
                             // when the search prop is set to false.
-                            tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
-                                sdsType: "interactive",
-                            }, icon: "Search" }) })) }), intent: intent }, InputBaseProps)) }));
+                            tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "Search" }) })) }), intent: intent }, InputBaseProps)) }));
     }
     function defaultOnBlur(event) {
         var _a;
@@ -5240,7 +5287,7 @@ var AutocompleteBase = function (props) {
         else {
             MenuItemContent = (jsxRuntime.jsxs(StyledMenuItemText, { children: [menuItemLabel, details && (jsxRuntime.jsx(StyledMenuItemDetails, { className: "menuItem-details", children: details }))] }));
         }
-        return (jsxRuntime.jsx(MenuItem, __assign({ column: count, disabled: optionProps["aria-disabled"] === true, icon: icon, sdsIconProps: sdsIconProps, isMultiSelect: multiple, selected: selected }, optionProps, { children: MenuItemContent })));
+        return (React.createElement(MenuItem, __assign({ column: count, disabled: optionProps["aria-disabled"] === true, icon: icon, sdsIconProps: sdsIconProps, isMultiSelect: multiple, selected: selected }, optionProps, { key: option.name }), MenuItemContent));
     }
 };
 
@@ -5251,7 +5298,7 @@ var StyledColumn = styled__default.default("div")(templateObject_1$N || (templat
     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__default.default("p")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontCapsXxxxs, function (props) {
+var StyledColumnTitle = styled__default.default("p")(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontCapsXxxxs, function (props) {
     var _a;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
@@ -5262,9 +5309,9 @@ var StyledColumnIcon = styled__default.default("span")(templateObject_3$k || (te
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.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 = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\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    ");
+    return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\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 = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, ";\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$N, templateObject_2$s, templateObject_3$k;
+var templateObject_1$N, templateObject_2$t, templateObject_3$k;
 
 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"]);
@@ -5326,15 +5373,15 @@ var StyledPopper$2 = styled__default.default(material.Popper, {
     var spaces = getSpaces(props);
     var borders = getBorders(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n      background-image: none;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      box-sizing: border-box;\n      z-index: 1400;\n\n      .").concat(material.autocompleteClasses.popper, ".").concat(material.autocompleteClasses.popperDisablePortal, " {\n        position: relative !important;\n        transform: none !important;\n      \n        .MuiPaper-root .").concat(material.autocompleteClasses.listbox, " {\n          padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n        }\n      }\n    ");
+    return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n      background-image: none;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      box-sizing: border-box;\n      z-index: 1400;\n\n      .").concat(material.autocompleteClasses.popper, ".").concat(material.autocompleteClasses.popperDisablePortal, " {\n        position: relative !important;\n        transform: none !important;\n      \n        .MuiPaper-root .").concat(material.autocompleteClasses.listbox, " {\n          padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n        }\n      }\n    ");
 });
 var StyledPaper$2 = styled__default.default(material.Paper, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
-})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
     var shadows = getShadows(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n      background-image: none;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n      margin: 0;\n      border-radius: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n    ");
+    return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n      background-image: none;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n      margin: 0;\n      border-radius: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n    ");
 });
 var StyledAutocompleteGroupWrapper = styled__default.default("div")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var StyledAutocompleteInput = styled__default.default(InputSearch, {
@@ -5346,7 +5393,7 @@ var StyledAutocompleteInput = styled__default.default(InputSearch, {
     var search = _a.search;
     return (search ? "auto" : "transparent");
 });
-var templateObject_1$M, templateObject_2$r, templateObject_3$j, templateObject_4$h;
+var templateObject_1$M, templateObject_2$s, templateObject_3$j, templateObject_4$h;
 
 var AutocompleteMultiColumn = function (props) {
     var _a;
@@ -5384,16 +5431,12 @@ var AutocompleteMultiColumn = function (props) {
         });
         onChange === null || onChange === void 0 ? void 0 : onChange(event, __assign(__assign({}, autocompleteMultiColumnValue), (_a = {}, _a[column] = val, _a)), reason, details);
     };
-    return (jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: defaultOnClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledAutocompleteInput, __assign({ id: "location-search", label: label, placeholder: label, value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onBlur: handleInputBlur, ref: anchorRef, search: search, onKeyDown: handleInputKeyDown, InputProps: __assign(__assign({}, InputBaseProps === null || InputBaseProps === void 0 ? void 0 : InputBaseProps.ref), { endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
-                                    sdsType: "iconButton",
-                                }, icon: "XMarkCircle", onClick: clearInput })) })), 
+    return (jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: defaultOnClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledAutocompleteInput, __assign({ id: "location-search", label: label, placeholder: label, value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onBlur: handleInputBlur, ref: anchorRef, search: search, onKeyDown: handleInputKeyDown, InputProps: __assign(__assign({}, InputBaseProps === null || InputBaseProps === void 0 ? void 0 : InputBaseProps.ref), { endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "XMarkCircle", onClick: clearInput })) })), 
                         /**
                          * (thuang): Works with css caret-color: "transparent" to hide
                          * mobile keyboard
                          */
-                        inputMode: "text", startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
-                                    sdsType: "interactive",
-                                }, icon: "Search" }) })) }) }, InputBaseProps)), anchorEl && (jsxRuntime.jsx(PopperComponent, __assign({ modifiers: [
+                        inputMode: "text", startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "Search" }) })) }) }, InputBaseProps)), anchorEl && (jsxRuntime.jsx(PopperComponent, __assign({ modifiers: [
                         {
                             name: "offset",
                             options: {
@@ -5538,13 +5581,13 @@ var IconWrapper$1 = styled__default.default("div", {
     shouldForwardProp: function (prop) {
         return !doNotForwardPropsIconWrapper.includes(prop);
     },
-})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
     var bannerType = props.bannerType;
     var iconSizes = getIconSizes(props);
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(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      svg {\n        fill: ").concat(bannerType === "primary" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.ornament, ";\n      }\n    ");
+    return "\n      height: ".concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      svg {\n        fill: ").concat(bannerType === "primary" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentOnFill : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.ornament, ";\n      }\n    ");
 });
 var doNotForwardPropsButtonIcon = ["bannerType", "textChild"];
 var StyledButton$2 = styled__default.default(Button, {
@@ -5555,20 +5598,20 @@ var StyledButton$2 = styled__default.default(Button, {
     var _a, _b;
     var bannerType = props.bannerType;
     var semanticColors = getSemanticColors(props);
-    if (bannerType !== "primary")
-        return "";
-    return "\n      svg {\n        fill: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse, ";\n      }\n\n      svg:hover {\n        fill: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryInverseHover, ";\n      }\n    ");
+    if (bannerType === "primary")
+        return "\n        svg {\n          fill: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentOnFill, ";\n          opacity: .65;\n        }\n\n        svg:hover {\n          opacity: 1;\n        }\n      ");
+    return "\n      svg {\n        fill: ".concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary, ";\n        opacity: .55;\n      }\n\n      svg:hover {\n        opacity: 1;\n      }\n    ");
 });
 styled__default.default("div")(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), fontBodyS$1);
 var primary$1 = function (props) {
     var _a, _b;
     var semanticColors = getSemanticColors(props);
-    return "\n    background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n    color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, ";\n  ");
+    return "\n    background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n    color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill, ";\n  ");
 };
 var secondary$1 = function (props) {
     var _a, _b;
     var semanticColors = getSemanticColors(props);
-    return "\n    background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n    color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n  ");
+    return "\n    background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n    color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n  ");
 };
 var doNotForwardProps$n = ["sdsType", "textChild"];
 var StyledBanner = styled__default.default("div", {
@@ -5578,7 +5621,7 @@ var StyledBanner = styled__default.default("div", {
     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$L, templateObject_2$q, templateObject_3$i, templateObject_4$g, templateObject_5$c;
+var templateObject_1$L, templateObject_2$r, templateObject_3$i, templateObject_4$g, templateObject_5$c;
 
 var Banner = React.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"]);
@@ -5599,11 +5642,11 @@ var Banner = React.forwardRef(function Banner(props, ref) {
                 return icon;
             }
             else {
-                return (jsxRuntime.jsx(Icon, __assign({ sdsIcon: icon, sdsSize: "l", sdsType: "static" }, sdsIconProps)));
+                return jsxRuntime.jsx(Icon, __assign({ sdsIcon: icon, sdsSize: "l" }, sdsIconProps));
             }
         }
         else {
-            return (jsxRuntime.jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l", sdsType: "static" }, sdsIconProps)));
+            return jsxRuntime.jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l" }, sdsIconProps));
         }
     };
     return (jsxRuntime.jsxs(StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [jsxRuntime.jsxs(Centered, { children: [jsxRuntime.jsx(IconWrapper$1, { bannerType: sdsType, children: iconItem() }), children] }), dismissible && (jsxRuntime.jsx(StyledButton$2, { "aria-label": "Close", bannerType: sdsType, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", onClick: handleClose, icon: "XMark" }))] })));
@@ -5626,7 +5669,7 @@ var ButtonDropdown = React__namespace.default.forwardRef(function (props, ref) {
                 return icon;
             }
             else {
-                return (jsxRuntime.jsx(Icon, __assign({ sdsType: "iconButton" }, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
+                return (jsxRuntime.jsx(Icon, __assign({}, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
             }
         }
     };
@@ -5640,7 +5683,7 @@ var ButtonDropdown = React__namespace.default.forwardRef(function (props, ref) {
         }
     }
     else {
-        return (jsxRuntime.jsx(Button, __assign({}, props, { endIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "button" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: iconItem() })));
+        return (jsxRuntime.jsx(Button, __assign({}, props, { endIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: iconItem() })));
     }
 });
 
@@ -5658,7 +5701,7 @@ var StyledButtonToggle = styled__default.default(ButtonIcon, {
     var _a;
     var sdsStage = props.sdsStage;
     var semanticColors = getSemanticColors(props);
-    return "\n      background-color: ".concat(sdsStage === "on" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover : "transparent", ";\n    ");
+    return "\n      background-color: ".concat(sdsStage === "on" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillOpen : "transparent", ";\n    ");
 });
 var templateObject_1$K;
 
@@ -5691,7 +5734,7 @@ var StyledCallout = styled__default.default(material.Alert, {
     var typography = getTypography(props);
     var semanticColors = getSemanticColors(props);
     var iconColor = (_b = (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _a === void 0 ? void 0 : _a.ornament) !== null && _b !== void 0 ? _b : "black";
-    var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfacePrimary) !== null && _d !== void 0 ? _d : "white";
+    var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfaceSecondary) !== null && _d !== void 0 ? _d : "white";
     // when a title is present Mui's default styling has vertical margin,
     // but for an expandable callout that is collapsed, we do not want
     // any bottom margin
@@ -5736,17 +5779,17 @@ var Callout = function (_a) {
                 return icon;
             }
             else {
-                return (jsxRuntime.jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon, sdsType: "static" }, sdsIconProps)));
+                return (jsxRuntime.jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon }, sdsIconProps)));
             }
         }
         else {
             switch (intent) {
                 case "positive":
-                    return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle", sdsType: "static" });
+                    return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle" });
                 case "info":
-                    return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle", sdsType: "static" });
+                    return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle" });
                 default:
-                    return (jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle", sdsType: "static" }));
+                    return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle" });
             }
         }
     };
@@ -5771,7 +5814,7 @@ var Callout = function (_a) {
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Grow, { in: !hide, children: jsxRuntime.jsxs(StyledCallout, __assign({ onClose: onClose ? handleClose : undefined, action: getAction(collapsed), icon: getIcon(), intent: intent, collapsed: collapsed || false }, rest, { children: [calloutTitle, !collapsed && calloutContent] })) }) }));
 };
 
-var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
+var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodySemiboldXs, function (props) {
     var spaces = getSpaces(props);
     return "\n      margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n    ");
 });
@@ -5788,13 +5831,13 @@ var dark = function (props) {
     var _a, _b;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return css.css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: center;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "], ["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: center;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
+    return css.css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: center;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "], ["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: center;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
 };
 var light = function (props) {
     var _a, _b;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return css.css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: left;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "], ["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: left;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
+    return css.css(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: left;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "], ["\n    ", "\n    background-color: ", ";\n    color: ", ";\n    text-align: left;\n    max-width: 250px;\n    padding: ", "px ", "px;\n  "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
 };
 var wide = function () {
     return css.css(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n    max-width: 550px;\n  "], ["\n    max-width: 550px;\n  "])));
@@ -5804,29 +5847,32 @@ var tableStyles = function (props) {
     return css.css(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n    padding: ", "px;\n  "], ["\n    padding: ", "px;\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
 };
 var Subtitle$1 = styled__default.default("div")(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
-    var _a;
+    var _a, _b;
+    var hasInvertedStyle = props.hasInvertedStyle;
     var semanticColors = getSemanticColors(props);
-    return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse, ";\n    ");
+    return "\n      color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n    ");
 });
 var tooltipCss = function (props) {
-    var inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
+    var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
     var shadows = getShadows(props);
-    return css.css(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n    &.MuiTooltip-tooltip {\n      box-shadow: ", ";\n\n      ", "\n      ", "\n\n      ", "\n    }\n  "], ["\n    &.MuiTooltip-tooltip {\n      box-shadow: ", ";\n\n      ", "\n      ", "\n\n      ", "\n    }\n  "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, sdsStyle === "dark" || inverted ? dark(props) : light(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
+    return css.css(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n    &.MuiTooltip-tooltip {\n      box-shadow: ", ";\n\n      ", "\n      ", "\n\n      ", "\n    }\n  "], ["\n    &.MuiTooltip-tooltip {\n      box-shadow: ", ";\n\n      ", "\n      ", "\n\n      ", "\n    }\n  "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, sdsStyle === "dark" || inverted || hasInvertedStyle
+        ? dark(props)
+        : light(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
 };
 var arrowCss = function (props) {
     var _a, _b;
-    var inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
+    var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
     var semanticColors = getSemanticColors(props);
-    return css.css(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n    &.MuiTooltip-arrow {\n      /* (bethbertozzi): !important is needed to fight inline style */\n      left: ", "px !important;\n      color: ", ";\n      &:before {\n        box-sizing: border-box;\n        width: 12px;\n        height: 12px;\n      }\n    }\n  "], ["\n    &.MuiTooltip-arrow {\n      /* (bethbertozzi): !important is needed to fight inline style */\n      left: ", "px !important;\n      color: ", ";\n      &:before {\n        box-sizing: border-box;\n        width: 12px;\n        height: 12px;\n      }\n    }\n  "])), arrowOffset, inverted || sdsStyle === "dark"
-        ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimaryInverse
-        : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary);
+    return css.css(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n    &.MuiTooltip-arrow {\n      /* (bethbertozzi): !important is needed to fight inline style */\n      left: ", "px !important;\n      color: ", ";\n      &:before {\n        box-sizing: border-box;\n        width: 12px;\n        height: 12px;\n      }\n    }\n  "], ["\n    &.MuiTooltip-arrow {\n      /* (bethbertozzi): !important is needed to fight inline style */\n      left: ", "px !important;\n      color: ", ";\n      &:before {\n        box-sizing: border-box;\n        width: 12px;\n        height: 12px;\n      }\n    }\n  "])), arrowOffset, hasInvertedStyle || inverted || sdsStyle === "dark"
+        ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse
+        : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
 };
 /*
  * (masoudmanson): !important is needed to override arrow's
  * default placement which is calculated by javascript
  */
 var StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-bottom: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(0px, -2px);\n      border-bottom-right-radius: 2px;\n      box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-top: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 2px);\n      border-top-left-radius: 2px;\n      box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-right: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 1px);\n      border-top-right-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-left: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(4px, 2px);\n      border-bottom-left-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n"], ["\n  &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-bottom: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(0px, -2px);\n      border-bottom-right-radius: 2px;\n      box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n    width: 24px !important;\n    height: 12px !important;\n    margin-top: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 2px);\n      border-top-left-radius: 2px;\n      box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-right: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(-1px, 1px);\n      border-top-right-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n    width: 12px !important;\n    height: 16px !important;\n    margin-left: -12px !important;\n    &:before {\n      transform: rotate(45deg) translate(4px, 2px);\n      border-bottom-left-radius: 2px;\n      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n"])));
-var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$b, templateObject_6$7, templateObject_7$4, templateObject_8$3;
+var templateObject_1$H, templateObject_2$q, templateObject_3$h, templateObject_4$f, templateObject_5$b, templateObject_6$7, templateObject_7$4, templateObject_8$3;
 
 /**
  * @see https://mui.com/material-ui/react-tooltip/
@@ -5836,24 +5882,20 @@ var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4
  * https://mui.com/components/tooltips/#disabled-elements
  */
 var Tooltip = React.forwardRef(function Tooltip(props, ref) {
-    var arrowOffset = props.arrowOffset, classes = props.classes, inverted = props.inverted, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "light" : _a, subtitle = props.subtitle, title = props.title, _b = props.width, width = _b === void 0 ? "default" : _b, _c = props.PopperComponent, PopperComponent = _c === void 0 ? StyledPopper$1 : _c, rest = __rest(props, ["arrowOffset", "classes", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent"]);
+    var arrowOffset = props.arrowOffset, classes = props.classes, _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "dark" : _b, subtitle = props.subtitle, title = props.title, _c = props.width, width = _c === void 0 ? "default" : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper$1 : _d, rest = __rest(props, ["arrowOffset", "classes", "hasInvertedStyle", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent"]);
     var children = rest.children;
-    if (inverted) {
-        showWarningIfFirstOccurence(SDSWarningTypes.TooltipInverted);
+    if (inverted || sdsStyle) {
+        showWarningIfFirstOccurence(SDSWarningTypes.TooltipInvertStyle);
     }
-    if (width === "wide" && sdsStyle === "dark") {
+    if (width === "wide" && (sdsStyle === "dark" || hasInvertedStyle)) {
         showWarningIfFirstOccurence(SDSWarningTypes.TooltipWidth);
     }
-    if (subtitle && sdsStyle === "light") {
-        showWarningIfFirstOccurence(SDSWarningTypes.TooltipSubtitle);
-    }
     var theme = material.useTheme();
     var extraProps = {
         /* stylelint-disable property-no-unknown -- false positive */
         arrowOffset: arrowOffset,
         classes: classes,
-        inverted: inverted,
-        sdsStyle: sdsStyle,
+        hasInvertedStyle: invertStyleValue(inverted, sdsStyle, hasInvertedStyle),
         theme: theme,
         width: width,
         /* stylelint-enable property-no-unknown -- false positive */
@@ -5872,8 +5914,8 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
     // a tooltip. this matches with the native MUI behavior.
     if (!title && !subtitle)
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
-    var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title, sdsStyle === "dark" && subtitle && jsxRuntime.jsx(Subtitle$1, { children: subtitle })] }));
-    var leaveDelay = inverted || sdsStyle === "dark" ? 0 : 500;
+    var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title, subtitle && (jsxRuntime.jsx(Subtitle$1, { hasInvertedStyle: hasInvertedStyle, children: subtitle }))] }));
+    var leaveDelay = hasInvertedStyle || inverted || sdsStyle === "dark" ? 0 : 500;
     return (jsxRuntime.jsx(material.Tooltip, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent, 
         // (masoudmanson): Setting tabIndex to 0 makes the tooltip component
         // focusable and allows keyboard navigation.
@@ -5883,6 +5925,21 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
         // the arrow is always rendered.
         arrow: true }, rest)));
 });
+/**
+ * (masoudmanson): Temporary function to handle the inversion of the tooltip
+ * based on the sdsStyle, invert and hasInvertedStyle props.
+ * Once the sdsStyle and invert props are completely removed,
+ * this function will be removed as well.
+ */
+function invertStyleValue(inverted, sdsStyle, hasInvertedStyle) {
+    return hasInvertedStyle !== undefined
+        ? hasInvertedStyle
+        : sdsStyle === "dark"
+            ? true
+            : sdsStyle === "light"
+                ? false
+                : inverted;
+}
 function mergeClass$1(_a) {
     var props = _a.props, className = _a.className, key = _a.key;
     var classes = props.classes;
@@ -5932,7 +5989,7 @@ var ShouldWrap = function (lineCount) {
 var ShouldTruncate = function () {
     return "\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  ";
 };
-var StyledCellContent = styled__default.default("div")(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var StyledCellContent = styled__default.default("div")(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var StyledCellContentWrapper = styled__default.default("div")(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 var StyledCellIconWrapper = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
@@ -5983,7 +6040,7 @@ var PrimaryTextComponentSlotRightWrapper = styled__default.default("div")(templa
     var spaces = getSpaces(props);
     return "\n      margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n    ");
 });
-var templateObject_1$G, templateObject_2$o, templateObject_3$g, templateObject_4$e, templateObject_5$a, templateObject_6$6, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1;
+var templateObject_1$G, templateObject_2$p, templateObject_3$g, templateObject_4$e, templateObject_5$a, templateObject_6$6, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1;
 
 var CellBasicContent = function (props) {
     var primaryText = props.primaryText, primaryTextWrapLineCount = props.primaryTextWrapLineCount, secondaryText = props.secondaryText, secondaryTextWrapLineCount = props.secondaryTextWrapLineCount, tertiaryText = props.tertiaryText, tertiaryTextWrapLineCount = props.tertiaryTextWrapLineCount, _a = props.shouldTextWrap, shouldTextWrap = _a === void 0 ? true : _a, icon = props.icon, iconVerticalAlign = props.iconVerticalAlign, primaryTextComponentSlotRight = props.primaryTextComponentSlotRight, primaryTextComponentSlotBottom = props.primaryTextComponentSlotBottom, _b = props.horizontalAlign, horizontalAlign = _b === void 0 ? "left" : _b;
@@ -6028,20 +6085,20 @@ var doNotForwardProps$i = [
 var StyledSortingIcon = styled__default.default(Icon, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
 })(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var _a, _b;
-    var _c = props.active, active = _c === void 0 ? false : _c, hideSortIcon = props.hideSortIcon;
+    var _a;
+    var _b = props.active, active = _b === void 0 ? false : _b, hideSortIcon = props.hideSortIcon;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n      margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n      color: ").concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.icon : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\n      opacity: ").concat(hideSortIcon ? (active ? 1 : 0) : 1, ";\n      outline: none !important;\n    ");
+    return "\n      margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n      margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n      color: ").concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament : "transparent", ";\n      display: ").concat(hideSortIcon ? (active ? "block" : "none") : "block", ";\n      outline: none !important;\n    ");
 });
 var StyledTableHeader$1 = styled__default.default("th", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
-})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
+})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     var _j = props.active, active = _j === void 0 ? false : _j, _k = props.horizontalAlign, horizontalAlign = _k === void 0 ? "left" : _k;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      color: ".concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      text-align: ").concat(horizontalAlign, ";\n      min-width: 96px;\n      width: 96px;\n      cursor: pointer;\n      vertical-align: bottom;\n\n      & .MuiButtonBase-root {\n        outline: none;\n      }\n\n      &:hover {\n        color: ").concat(active ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n        & .MuiButtonBase-root {\n          color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.textActionHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n          opacity: 1;\n        }\n\n        & svg {\n          color: ").concat(active ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimaryHover, ";\n        }\n      }\n    ");
+    return "\n      color: ".concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      text-align: ").concat(horizontalAlign, ";\n      min-width: 96px;\n      cursor: pointer;\n      vertical-align: bottom;\n\n      & .MuiButtonBase-root {\n        outline: none;\n      }\n\n      &:hover {\n        color: ").concat(active ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n        & .MuiButtonBase-root {\n          color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.textActionHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n          opacity: 1;\n        }\n\n        & svg {\n          color: ").concat(active ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, ";\n        }\n      }\n    ");
 });
 var StyledCellHeaderContainer = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
@@ -6049,14 +6106,14 @@ var StyledCellHeaderContainer = styled__default.default("div", {
     var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
     return "\n      align-items: flex-end;\n      width: 100%;\n      display: flex;\n      justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n    ");
 });
-var templateObject_1$E, templateObject_2$n, templateObject_3$f;
+var templateObject_1$E, templateObject_2$o, templateObject_3$f;
 
 var CellHeaderContent = function (props) {
     var active = props.active, children = props.children, _a = props.direction, direction = _a === void 0 ? "desc" : _a, _b = props.hideSortIcon, hideSortIcon = _b === void 0 ? false : _b, horizontalAlign = props.horizontalAlign;
     var sdsIconName = direction === "asc" ? "ChevronUp" : "ChevronDown";
     var sortIcon = (jsxRuntime.jsx(StyledSortingIcon, { "aria-label": direction === "asc"
             ? "Change sort direction from ascending to descending"
-            : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsType: "static", sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
+            : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
     return (jsxRuntime.jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsxRuntime.jsx("span", { children: children }), (!hideSortIcon || active) && sortIcon] }));
 };
 var CellHeader = React.forwardRef(function (props, ref) {
@@ -6074,7 +6131,7 @@ var small = function (props) {
 var medium = function (props) {
     var spaces = getSpaces(props);
     var colors = getColors(props);
-    return react.css(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n    margin: 0 ", "px;\n    height: 24px;\n\n    background-color: ", ";\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    .MuiChip-label {\n      ", "\n      color: white;\n      padding-left: ", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      color: white;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n      height: ", "px;\n      width: ", "px;\n\n      &:hover,\n      &:focus-visible {\n        color: white;\n      }\n    }\n  "], ["\n    margin: 0 ", "px;\n    height: 24px;\n\n    background-color: ", ";\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    .MuiChip-label {\n      ", "\n      color: white;\n      padding-left: ", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      color: white;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n      height: ", "px;\n      width: ", "px;\n\n      &:hover,\n      &:focus-visible {\n        color: white;\n      }\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[500], colors === null || colors === void 0 ? void 0 : colors.blue[600], fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.l);
+    return react.css(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n    margin: 0 ", "px;\n    height: 24px;\n\n    background-color: ", ";\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    .MuiChip-label {\n      ", "\n      color: white;\n      padding-left: ", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      color: white;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n      height: ", "px;\n      width: ", "px;\n\n      &:hover,\n      &:focus-visible {\n        color: white;\n      }\n    }\n  "], ["\n    margin: 0 ", "px;\n    height: 24px;\n\n    background-color: ", ";\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    .MuiChip-label {\n      ", "\n      color: white;\n      padding-left: ", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      color: white;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n      height: ", "px;\n      width: ", "px;\n\n      &:hover,\n      &:focus-visible {\n        color: white;\n      }\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[500], colors === null || colors === void 0 ? void 0 : colors.blue[600], fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.l);
 };
 var rounded$2 = function (props) {
     var corners = getCorners(props);
@@ -6111,27 +6168,27 @@ function createStatusCss(props, status) {
     var statusToColors = {
         beta: {
             dark: (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _a === void 0 ? void 0 : _a.text,
-            light: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _b === void 0 ? void 0 : _b.surfacePrimary,
+            light: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _b === void 0 ? void 0 : _b.surfaceSecondary,
         },
         error: {
             dark: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _c === void 0 ? void 0 : _c.text,
-            light: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _d === void 0 ? void 0 : _d.surfacePrimary,
+            light: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _d === void 0 ? void 0 : _d.surfaceSecondary,
         },
         info: {
             dark: (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _e === void 0 ? void 0 : _e.text,
-            light: (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _f === void 0 ? void 0 : _f.surfacePrimary,
+            light: (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _f === void 0 ? void 0 : _f.surfaceSecondary,
         },
         pending: {
             dark: (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _g === void 0 ? void 0 : _g.text,
-            light: (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _h === void 0 ? void 0 : _h.surfacePrimary,
+            light: (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _h === void 0 ? void 0 : _h.surfaceSecondary,
         },
         success: {
             dark: (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _j === void 0 ? void 0 : _j.text,
-            light: (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _k === void 0 ? void 0 : _k.surfacePrimary,
+            light: (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _k === void 0 ? void 0 : _k.surfaceSecondary,
         },
         warning: {
             dark: colors === null || colors === void 0 ? void 0 : colors.yellow[700],
-            light: (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.notice) === null || _l === void 0 ? void 0 : _l.surfacePrimary,
+            light: (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.notice) === null || _l === void 0 ? void 0 : _l.surfaceSecondary,
         },
     };
     var statusColors = statusToColors[status];
@@ -6152,7 +6209,7 @@ var StyledChip = styled__default.default(material.Chip, {
     var size = props.size, status = props.status, isRounded = props.isRounded;
     return react.css(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), isRounded && rounded$2(props), !isRounded && square$2(props), size === "small" && small(props), size === "medium" && medium(props), status && statusToCss[status](props));
 });
-var templateObject_1$D, templateObject_2$m, templateObject_3$e, templateObject_4$d, templateObject_5$9, templateObject_6$5, templateObject_7$2;
+var templateObject_1$D, templateObject_2$n, templateObject_3$e, templateObject_4$d, templateObject_5$9, templateObject_6$5, templateObject_7$2;
 
 /**
  * @see https://mui.com/material-ui/react-chip/
@@ -6191,7 +6248,7 @@ var StyledHeaderTitle = styled__default.default("div", {
     var semanticColors = getSemanticColors(props);
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n      padding-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    ");
 });
-var StyledDropdownMenuAutocompleteWrapper = styled__default.default("div")(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  & .", ", & .MuiPopper-root,\n  .base-Popper-root {\n    position: relative !important;\n    transform: none !important;\n    width: 100% !important;\n    box-shadow: none;\n    padding: 0;\n    border: none;\n\n    .", ", .MuiPaper-root {\n      box-shadow: none !important;\n      border: none !important;\n      border-radius: 0;\n      margin: 0;\n      padding: 0;\n    }\n  }\n"], ["\n  & .", ", & .MuiPopper-root,\n  .base-Popper-root {\n    position: relative !important;\n    transform: none !important;\n    width: 100% !important;\n    box-shadow: none;\n    padding: 0;\n    border: none;\n\n    .", ", .MuiPaper-root {\n      box-shadow: none !important;\n      border: none !important;\n      border-radius: 0;\n      margin: 0;\n      padding: 0;\n    }\n  }\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper);
+var StyledDropdownMenuAutocompleteWrapper = styled__default.default("div")(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  & .", ", & .MuiPopper-root,\n  .base-Popper-root {\n    position: relative !important;\n    transform: none !important;\n    width: 100% !important;\n    box-shadow: none;\n    padding: 0;\n    border: none;\n\n    .", ", .MuiPaper-root {\n      box-shadow: none !important;\n      border: none !important;\n      border-radius: 0;\n      margin: 0;\n      padding: 0;\n    }\n  }\n"], ["\n  & .", ", & .MuiPopper-root,\n  .base-Popper-root {\n    position: relative !important;\n    transform: none !important;\n    width: 100% !important;\n    box-shadow: none;\n    padding: 0;\n    border: none;\n\n    .", ", .MuiPaper-root {\n      box-shadow: none !important;\n      border: none !important;\n      border-radius: 0;\n      margin: 0;\n      padding: 0;\n    }\n  }\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper);
 var StyledPopper = styled__default.default(material.Popper, {
     shouldForwardProp: function (prop) {
         return !doNotForwardProps$g.includes(prop) || prop === "anchorEl";
@@ -6202,7 +6259,7 @@ var StyledPopper = styled__default.default(material.Popper, {
     var corners = getCorners(props);
     var shadows = getShadows(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n      background-image: none;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n      box-sizing: border-box;\n      z-index: 1400;\n    ");
+    return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n      background-image: none;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n      box-sizing: border-box;\n      z-index: 1400;\n    ");
 });
 var StyledPaper$1 = styled__default.default(material.Paper, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
@@ -6212,14 +6269,14 @@ var StyledPaper$1 = styled__default.default(material.Paper, {
     var borders = getBorders(props);
     var shadows = getShadows(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n      background-image: none;\n      margin: 0;\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n      .MuiAutocomplete-root,\n      .MuiFormControl-root.MuiTextField-root {\n        margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      }\n\n      // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n      // as it has been added to the parent container\n      .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n        margin-right: 0;\n        margin-bottom: 0;  \n      }\n    ");
+    return "\n      box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n      background-image: none;\n      margin: 0;\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n      .MuiAutocomplete-root,\n      .MuiFormControl-root.MuiTextField-root {\n        margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      }\n\n      // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n      // as it has been added to the parent container\n      .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n        margin-right: 0;\n        margin-bottom: 0;  \n      }\n    ");
 });
 var StyledDropdownMenuHeader = styled__default.default("div")(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var search = props.search;
     var spaces = getSpaces(props);
     return "\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      margin-bottom: ").concat(search ? spaces === null || spaces === void 0 ? void 0 : spaces.s : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    ");
 });
-var templateObject_1$C, templateObject_2$l, templateObject_3$d, templateObject_4$c, templateObject_5$8;
+var templateObject_1$C, templateObject_2$m, templateObject_3$d, templateObject_4$c, templateObject_5$8;
 
 // (masoudmanson): Represents the minimum width defined by design specifications
 // for the dropdownMenu's popper component
@@ -6276,7 +6333,7 @@ var intentToColor$2 = {
 var labelFontBodyS = fontBody("s", "regular");
 var labelFontBodyXs = fontBody("xs", "regular");
 var inputDropdownStyles = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var spaces = getSpaces(props);
     var borders = getBorders(props);
     var semanticColors = getSemanticColors(props);
@@ -6285,13 +6342,13 @@ var inputDropdownStyles = function (props) {
      * The top/bottom padding is set to 1px less than the actual value to account for the border.
      */
     var padding = "".concat(((_a = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _a !== void 0 ? _a : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px");
-    return react.css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n    ", "\n\n    border: ", ";\n    background-color: ", ";\n    cursor: pointer;\n    padding: ", ";\n    justify-content: start;\n\n    &.MuiButton-text {\n      &:hover {\n        color: ", ";\n      }\n\n      .styled-label {\n        margin-left: ", "px;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      svg {\n        margin-right: ", "px;\n        margin-left: ", "px;\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:focus {\n      outline-offset: -1px;\n    }\n  "], ["\n    ", "\n\n    border: ", ";\n    background-color: ", ";\n    cursor: pointer;\n    padding: ", ";\n    justify-content: start;\n\n    &.MuiButton-text {\n      &:hover {\n        color: ", ";\n      }\n\n      .styled-label {\n        margin-left: ", "px;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      svg {\n        margin-right: ", "px;\n        margin-left: ", "px;\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:focus {\n      outline-offset: -1px;\n    }\n  "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, padding, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surfacePrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderHover, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimary, (_l = borders === null || borders === void 0 ? void 0 : borders.base) === null || _l === void 0 ? void 0 : _l.pressed, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.textPrimary, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.iconPrimaryPressed);
+    return react.css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n    ", "\n\n    border: ", ";\n    cursor: pointer;\n    padding: ", ";\n    justify-content: start;\n\n    &.MuiButton-text {\n      &:hover {\n        color: ", ";\n      }\n\n      .styled-label {\n        margin-left: ", "px;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      svg {\n        margin-right: ", "px;\n        margin-left: ", "px;\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: transparent;\n      border-color: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:focus {\n      outline-offset: -1px;\n    }\n  "], ["\n    ", "\n\n    border: ", ";\n    cursor: pointer;\n    padding: ", ";\n    justify-content: start;\n\n    &.MuiButton-text {\n      &:hover {\n        color: ", ";\n      }\n\n      .styled-label {\n        margin-left: ", "px;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      svg {\n        margin-right: ", "px;\n        margin-left: ", "px;\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: transparent;\n      border-color: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      border: ", ";\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:focus {\n      outline-offset: -1px;\n    }\n  "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, padding, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.borderHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, (_j = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.pressed, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimary, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentSecondaryPressed);
 };
 var minimal$1 = function (props) {
     var _a, _b, _c, _d, _e, _f, _g;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n    ", "\n    ", "\n\n    /* this is needed to left align the label text */\n    align-items: flex-start;\n    border: none;\n    flex-direction: column;\n    padding: ", "px ", "px;\n    background-color: transparent;\n\n    /* Nesting to increase CSS specificity for style override */\n    &.MuiButton-text {\n      .styled-label {\n        margin: 0;\n      }\n    }\n\n    span {\n      color: ", ";\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border: none;\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n      border: none;\n    }\n\n    &.MuiButton-root.MuiButton-text > span {\n      ", "\n      margin-left: 0;\n    }\n\n    &.MuiButton-root.MuiButton-text svg {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "], ["\n    ", "\n    ", "\n\n    /* this is needed to left align the label text */\n    align-items: flex-start;\n    border: none;\n    flex-direction: column;\n    padding: ", "px ", "px;\n    background-color: transparent;\n\n    /* Nesting to increase CSS specificity for style override */\n    &.MuiButton-text {\n      .styled-label {\n        margin: 0;\n      }\n    }\n\n    span {\n      color: ", ";\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border: none;\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n      border: none;\n    }\n\n    &.MuiButton-root.MuiButton-text > span {\n      ", "\n      margin-left: 0;\n    }\n\n    &.MuiButton-root.MuiButton-text svg {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "])), labelStyle(props), focusVisibleA11yStyle(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
+    return react.css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n    ", "\n    ", "\n\n    /* this is needed to left align the label text */\n    align-items: flex-start;\n    border: none;\n    flex-direction: column;\n    padding: ", "px ", "px;\n    background-color: transparent;\n\n    /* Nesting to increase CSS specificity for style override */\n    &.MuiButton-text {\n      .styled-label {\n        margin: 0;\n      }\n    }\n\n    span {\n      color: ", ";\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border: none;\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n      border: none;\n    }\n\n    &.MuiButton-root.MuiButton-text > span {\n      ", "\n      margin-left: 0;\n    }\n\n    &.MuiButton-root.MuiButton-text svg {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "], ["\n    ", "\n    ", "\n\n    /* this is needed to left align the label text */\n    align-items: flex-start;\n    border: none;\n    flex-direction: column;\n    padding: ", "px ", "px;\n    background-color: transparent;\n\n    /* Nesting to increase CSS specificity for style override */\n    &.MuiButton-text {\n      .styled-label {\n        margin: 0;\n      }\n    }\n\n    span {\n      color: ", ";\n    }\n\n    path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background-color: ", ";\n      border: none;\n      color: ", ";\n\n      path {\n        fill: ", ";\n      }\n\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n      border: none;\n    }\n\n    &.MuiButton-root.MuiButton-text > span {\n      ", "\n      margin-left: 0;\n    }\n\n    &.MuiButton-root.MuiButton-text svg {\n      margin-left: ", "px;\n      margin-right: 0;\n    }\n  "])), labelStyle(props), focusVisibleA11yStyle(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
 };
 var square$1 = function (props) {
     var corners = getCorners(props);
@@ -6302,11 +6359,11 @@ var rounded$1 = function (props) {
     return react.css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n    border-radius: ", "px;\n    min-width: 90px;\n  "], ["\n    border-radius: ", "px;\n    min-width: 90px;\n  "])), corners === null || corners === void 0 ? void 0 : corners.l);
 };
 var userInput = function (props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     var sdsStyle = props.sdsStyle;
     var semanticColors = getSemanticColors(props);
     return react.css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n    & .styled-label {\n      color: ", ";\n    }\n\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    ", "\n  "], ["\n    & .styled-label {\n      color: ", ";\n    }\n\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    ", "\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, sdsStyle === "minimal"
-        ? "\n        \n        background-color: ".concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, "47;\n        border: none;\n        color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n        path {\n          fill: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryHover, ";\n        }\n\n        .styled-label {\n          color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n        }\n      ")
+        ? "\n        border: none;\n        color: ".concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n\n        .styled-label {\n          color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n        }\n      ")
         : "");
 };
 var isOpen = function (props) {
@@ -6315,15 +6372,15 @@ var isOpen = function (props) {
     var borders = getBorders(props);
     var semanticColors = getSemanticColors(props);
     var inputColor = intentToColor$2[intent];
-    return react.css(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    ", "\n\n    path {\n      fill: ", ";\n    }\n\n    border: ", ";\n    background-color: ", ";\n\n    &:hover {\n      path {\n        fill: ", ";\n      }\n\n      border-color: ", ";\n    }\n  "], ["\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    ", "\n\n    path {\n      fill: ", ";\n    }\n\n    border: ", ";\n    background-color: ", ";\n\n    &:hover {\n      path {\n        fill: ", ";\n      }\n\n      border-color: ", ";\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, sdsStyle === "minimal"
+    return react.css(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    ", "\n\n    path {\n      fill: ", ";\n    }\n\n    border: ", ";\n\n    background-color: ", ";\n\n    &:hover {\n      path {\n        fill: ", ";\n      }\n\n      border-color: ", ";\n    }\n  "], ["\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    ", "\n\n    path {\n      fill: ", ";\n    }\n\n    border: ", ";\n\n    background-color: ", ";\n\n    &:hover {\n      path {\n        fill: ", ";\n      }\n\n      border-color: ", ";\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, sdsStyle === "minimal"
         ? "\n        & > span, \n        &:hover > span { \n          color: ".concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, "; \n        }\n\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, "; \n      ")
         : "", inputColor === "accent"
-        ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconOpen
+        ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentOpen
         : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[inputColor]) === null || _e === void 0 ? void 0 : _e.ornament, sdsStyle === "minimal"
         ? borders === null || borders === void 0 ? void 0 : borders.none
         : (_f = borders === null || borders === void 0 ? void 0 : borders[inputColor]) === null || _f === void 0 ? void 0 : _f.open, sdsStyle === "minimal"
-        ? ((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover) + "47"
-        : "transparent", (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimaryHover, (_j = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _j === void 0 ? void 0 : _j.hover);
+        ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillOpen
+        : "transparent", (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderHover);
 };
 var applyIntentColor$1 = function (props, intent) {
     var _a, _b, _c;
@@ -6333,7 +6390,7 @@ var applyIntentColor$1 = function (props, intent) {
 var isDisabled = function (props) {
     var _a, _b, _c, _d;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n    cursor: default;\n    border-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n  "], ["\n    cursor: default;\n    border-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled);
+    return react.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n    cursor: default;\n    border-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n  "], ["\n    cursor: default;\n    border-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n\n    path {\n      fill: ", ";\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled);
 };
 /**
  * (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
@@ -6382,7 +6439,7 @@ var StyledCounter = styled__default.default("span", {
     var corners = getCorners(props);
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n      color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textAction, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n      padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n      margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n    ");
+    return "\n      background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundTertiary, ";\n      color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textAction, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n      padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n      margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n    ");
 });
 var MinimalDetails = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
@@ -6410,7 +6467,7 @@ function labelStyle(props) {
         : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
     return react.css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.MuiButton-text {\n      .styled-label {\n        color: ", ";\n      }\n    }\n  "])), labelColor);
 }
-var templateObject_1$B, templateObject_2$k, templateObject_3$c, templateObject_4$b, templateObject_5$7, templateObject_6$4, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+var templateObject_1$B, templateObject_2$l, templateObject_3$c, templateObject_4$b, templateObject_5$7, templateObject_6$4, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
 
 /**
  * @see https://mui.com/material-ui/react-button/
@@ -6431,7 +6488,7 @@ var InputDropdown = function (props) {
                             sdsType: sdsType,
                             shouldPutAColonAfterLabel: shouldPutAColonAfterLabel,
                             value: value,
-                        }) }), shouldRenderDetails && (jsxRuntime.jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsxRuntime.jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && jsxRuntime.jsx(StyledCounter, { children: counter }), jsxRuntime.jsx(IconWrapper, { children: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "interactive" }) })] }), shouldRenderMinimalDetails && (jsxRuntime.jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
+                        }) }), shouldRenderDetails && (jsxRuntime.jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsxRuntime.jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && jsxRuntime.jsx(StyledCounter, { children: counter }), jsxRuntime.jsx(IconWrapper, { children: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }) })] }), shouldRenderMinimalDetails && (jsxRuntime.jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
 };
 function renderLabelText(props) {
     var sdsType = props.sdsType;
@@ -6477,14 +6534,14 @@ var tagSizeS = function (props) {
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: ", ";\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: ", ";\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
+    return react.css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: ", ";\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: ", ";\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
 };
 var tagSizeL = function (props) {
     var _a;
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: ", ";\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: ", ";\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
+    return react.css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: ", ";\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: ", ";\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
 };
 var rounded = function (props) {
     var corners = getCorners(props);
@@ -6523,12 +6580,8 @@ function generatePrimaryTagColors(intent, colors, semanticColors) {
             backgroundHover: colors.length >= 2
                 ? material.darken(colors[1], 0.15)
                 : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillHover,
-            iconColor: colors.length > 2
-                ? colors[2]
-                : (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse,
-            label: colors.length
-                ? colors[0]
-                : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse,
+            iconColor: colors.length > 2 ? colors[2] : (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentOnFill,
+            label: colors.length ? colors[0] : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill,
         };
     }
     else {
@@ -6536,8 +6589,8 @@ function generatePrimaryTagColors(intent, colors, semanticColors) {
             background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPrimary,
             backgroundClicked: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
             backgroundHover: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillHover,
-            iconColor: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryInverse,
-            label: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimaryInverse,
+            iconColor: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentOnFill,
+            label: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textOnFill,
         };
     }
 }
@@ -6558,7 +6611,7 @@ function generateSecondaryTagColors(intent, colors, semanticColors) {
     }
     else {
         return {
-            background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.surfacePrimary,
+            background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillSecondary,
             backgroundClicked: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
             backgroundHover: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillHover,
             iconColor: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.ornament,
@@ -6576,7 +6629,7 @@ function createTypeCss(props, type) {
         secondary: generateSecondaryTagColors(intent, colors, semanticColors),
     };
     var typeColors = typeToColors[type];
-    return react.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n    ", "\n\n    background-color: ", ";\n    position: relative;\n\n    .MuiChip-label {\n      color: ", ";\n    }\n\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:active {\n      .MuiChip-label {\n        color: ", ";\n      }\n\n      svg {\n        fill: ", ";\n      }\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    &.Mui-focusVisible {\n      background-color: ", ";\n    }x\n  "], ["\n    ", "\n\n    background-color: ", ";\n    position: relative;\n\n    .MuiChip-label {\n      color: ", ";\n    }\n\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:active {\n      .MuiChip-label {\n        color: ", ";\n      }\n\n      svg {\n        fill: ", ";\n      }\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    &.Mui-focusVisible {\n      background-color: ", ";\n    }x\n  "])), focusVisibleA11yStyle(props), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryInverse, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
+    return react.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n    ", "\n\n    background-color: ", ";\n    position: relative;\n\n    .MuiChip-label {\n      color: ", ";\n    }\n\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:active {\n      .MuiChip-label {\n        color: ", ";\n      }\n\n      svg {\n        fill: ", ";\n      }\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    &.Mui-focusVisible {\n      background-color: ", ";\n    }x\n  "], ["\n    ", "\n\n    background-color: ", ";\n    position: relative;\n\n    .MuiChip-label {\n      color: ", ";\n    }\n\n    svg {\n      fill: ", ";\n    }\n\n    &:hover,\n    &:active {\n      .MuiChip-label {\n        color: ", ";\n      }\n\n      svg {\n        fill: ", ";\n      }\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n\n    &.Mui-focusVisible {\n      background-color: ", ";\n    }x\n  "])), focusVisibleA11yStyle(props), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
 }
 var typeToCss = {
     primary: primary,
@@ -6597,7 +6650,7 @@ var StyledTag$1 = styled__default.default(material.Chip, {
     var type = sdsType || "primary";
     return react.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), sdsSize === "l" ? tagSizeL(props) : tagSizeS(props), typeToCss[type](props), isRounded ? rounded(props) : square(props), hover ? withHover(props) : "pointer-events: none;");
 });
-var templateObject_1$A, templateObject_2$j, templateObject_3$b, templateObject_4$a, templateObject_5$6, templateObject_6$3, templateObject_7, templateObject_8;
+var templateObject_1$A, templateObject_2$k, templateObject_3$b, templateObject_4$a, templateObject_5$6, templateObject_6$3, templateObject_7, templateObject_8;
 
 /**
  * @see https://mui.com/material-ui/react-chip/
@@ -6611,14 +6664,14 @@ var Tag = function (props) {
     return jsxRuntime.jsx(StyledTag$1, __assign({ tagColor: color }, props, { color: "primary" }));
 };
 
-var StyledTag = styled__default.default(Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var _a, _b, _c, _d, _e, _f, _g;
+var StyledTag = styled__default.default(Tag)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n      padding: ", "px ", "px;\n      background-color: ", ";\n\n      &:hover,\n      &:focus {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n\n      &:after {\n        display: none;\n      }\n\n      .MuiChip-label {\n        ", "\n      }\n\n      .MuiChip-deleteIcon {\n        margin: 0 0 0 ", "px;\n        width: ", "px !important;\n        height: ", "px !important;\n      }\n\n      .MuiSvgIcon-root {\n        margin: 0;\n        width: ", "px !important;\n        height: ", "px !important;\n      }\n\n      .MuiChip-label,\n      svg {\n        z-index: auto;\n      }\n    "], ["\n      padding: ", "px ", "px;\n      background-color: ", ";\n\n      &:hover,\n      &:focus {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n\n      &:after {\n        display: none;\n      }\n\n      .MuiChip-label {\n        ", "\n      }\n\n      .MuiChip-deleteIcon {\n        margin: 0 0 0 ", "px;\n        width: ", "px !important;\n        height: ", "px !important;\n      }\n\n      .MuiSvgIcon-root {\n        margin: 0;\n        width: ", "px !important;\n        height: ", "px !important;\n      }\n\n      .MuiChip-label,\n      svg {\n        z-index: auto;\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.fillPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPressed, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.width, (_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _e === void 0 ? void 0 : _e.height, (_f = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _f === void 0 ? void 0 : _f.width, (_g = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _g === void 0 ? void 0 : _g.height);
+    return react.css(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n      padding: ", "px ", "px;\n      background-color: ", ";\n\n      .MuiChip-label {\n        ", "\n        z-index: auto;\n      }\n\n      .MuiChip-deleteIcon {\n        margin: 0 0 0 ", "px;\n        width: ", "px !important;\n        height: ", "px !important;\n      }\n\n      .MuiSvgIcon-root {\n        margin: 0;\n        width: ", "px !important;\n        height: ", "px !important;\n      }\n\n      svg {\n        z-index: auto;\n      }\n\n      &:hover,\n      &:focus,\n      &:focus-within {\n        background-color: ", ";\n\n        .MuiChip-label {\n          color: ", " !important;\n        }\n\n        .MuiChip-deleteIcon svg {\n          fill: ", " !important;\n        }\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n\n      &:after {\n        display: none;\n      }\n    "], ["\n      padding: ", "px ", "px;\n      background-color: ", ";\n\n      .MuiChip-label {\n        ", "\n        z-index: auto;\n      }\n\n      .MuiChip-deleteIcon {\n        margin: 0 0 0 ", "px;\n        width: ", "px !important;\n        height: ", "px !important;\n      }\n\n      .MuiSvgIcon-root {\n        margin: 0;\n        width: ", "px !important;\n        height: ", "px !important;\n      }\n\n      svg {\n        z-index: auto;\n      }\n\n      &:hover,\n      &:focus,\n      &:focus-within {\n        background-color: ", ";\n\n        .MuiChip-label {\n          color: ", " !important;\n        }\n\n        .MuiChip-deleteIcon svg {\n          fill: ", " !important;\n        }\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n\n      &:after {\n        display: none;\n      }\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.fillPrimary, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _c === void 0 ? void 0 : _c.height, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.width, (_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _e === void 0 ? void 0 : _e.height, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimaryInverse, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.fillPressed);
 });
-var templateObject_1$z, templateObject_2$i;
+var templateObject_1$z, templateObject_2$j;
 
 /**
  * @see https://mui.com/material-ui/react-chip/
@@ -6642,11 +6695,11 @@ var Chips = function (_a) {
 };
 
 var Wrapper$1 = styled__default.default("div")(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  min-width: 150px;\n"], ["\n  min-width: 150px;\n"])));
-var StyledChipsWrapper = styled__default.default("div")(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledChipsWrapper = styled__default.default("div")(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     return "\n      margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n    ");
 });
-var templateObject_1$y, templateObject_2$h;
+var templateObject_1$y, templateObject_2$i;
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 var ComplexFilter = function (_a) {
@@ -6747,7 +6800,7 @@ var StyledPaper = styled__default.default(material.Paper, {
     var corners = getCorners(props);
     var shadows = getShadows(props);
     var semanticColors = getSemanticColors(props);
-    return "\n        background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n        background-image: none;\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, ";\n        max-height: calc(100vh - ").concat(2 * ((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0), "px);\n        border-radius: ").concat((corners === null || corners === void 0 ? void 0 : corners.m) || 0, "px;\n        padding: ").concat((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0, "px;\n      ");
+    return "\n        background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n        background-image: none;\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, ";\n        max-height: calc(100vh - ").concat(2 * ((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0), "px);\n        border-radius: ").concat((corners === null || corners === void 0 ? void 0 : corners.m) || 0, "px;\n        padding: ").concat((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0, "px;\n      ");
 });
 function paperDimensions(props) {
     var sdsSize = props.sdsSize;
@@ -6853,7 +6906,7 @@ var StyledDialogTitle = styled__default.default(material.DialogTitle)(templateOb
     var spaces = getSpaces(props);
     return "\n      margin-bottom: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n    ");
 });
-var Title = styled__default.default(material.Typography)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontHeaderXl, function (props) {
+var Title = styled__default.default(material.Typography)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontHeaderXl, function (props) {
     var _a;
     var semanticColors = getSemanticColors(props);
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n    ");
@@ -6869,7 +6922,7 @@ var Overline = styled__default.default(material.Typography)(templateObject_4$9 |
     var spaces = getSpaces(props);
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n      padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n    ");
 });
-var templateObject_1$t, templateObject_2$g, templateObject_3$a, templateObject_4$9;
+var templateObject_1$t, templateObject_2$h, templateObject_3$a, templateObject_4$9;
 
 /**
  * @see https://mui.com/material-ui/react-dialog/
@@ -6888,11 +6941,11 @@ var StyledButtonsWrapper = styled__default.default("div", {
 });
 var StyledButton = styled__default.default(Button, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
-})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
     return "\n      margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    ");
 });
-var templateObject_1$s, templateObject_2$f;
+var templateObject_1$s, templateObject_2$g;
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 var Dropdown = function (props) {
@@ -7022,7 +7075,7 @@ var Dropdown = function (props) {
     }
 };
 
-var _path$4, _path2$1;
+var _path$4;
 function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
 var SvgIconCheckboxChecked = function SvgIconCheckboxChecked(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
@@ -7030,15 +7083,11 @@ var SvgIconCheckboxChecked = function SvgIconCheckboxChecked(props) {
     width: 16,
     height: 16
   }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z"
-  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#fff",
-    fillRule: "evenodd",
-    d: "M11.744 3.962a.56.56 0 0 0-.346.239L6.91 10.284 4.59 7.663c-.147-.205-.392-.285-.614-.185-.21.095-.355.33-.382.606-.027.272.062.543.238.703l2.733 3.09c.235.264.594.241.808-.047l4.874-6.612c.167-.22.21-.553.11-.833-.106-.294-.352-.472-.614-.423Z"
+    d: "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2Zm11.744 1.962a.56.56 0 0 0-.346.239L6.91 10.284 4.59 7.663c-.147-.205-.392-.285-.614-.185-.21.095-.355.33-.382.606-.027.272.062.543.238.703l2.733 3.09c.235.264.594.241.808-.047l4.874-6.612c.167-.22.21-.553.11-.833-.106-.294-.352-.472-.614-.423Z"
   })));
 };
 
-var _path$3, _path2;
+var _path$3;
 function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
 var SvgIconCheckboxIndeterminate = function SvgIconCheckboxIndeterminate(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
@@ -7046,10 +7095,7 @@ var SvgIconCheckboxIndeterminate = function SvgIconCheckboxIndeterminate(props)
     width: 16,
     height: 16
   }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z"
-  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#fff",
-    d: "M12.286 8.004a.625.625 0 0 0-.625-.625H4.339a.625.625 0 0 0 0 1.25h7.322c.345 0 .625-.28.625-.625"
+    d: "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2Zm11.661 5.379H4.339a.625.625 0 0 0 0 1.25h7.322a.625.625 0 0 0 0-1.25"
   })));
 };
 
@@ -7080,7 +7126,7 @@ var StyledCheckbox = styled__default.default(material.Checkbox)(templateObject_1
     var checkboxColor = intentToColor$1[intent];
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[checkboxColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n      &:hover {\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n        background-color: transparent;\n      }\n\n      &.").concat(material.checkboxClasses.disabled, " {\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n      }\n\n      &.").concat(material.checkboxClasses.checked, " {\n        color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n        &:hover {\n          color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n          background-color: transparent;\n        }\n\n        &.").concat(material.checkboxClasses.disabled, " {\n          color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n        }\n      }\n\n      &.").concat(material.checkboxClasses.root, " {\n        ").concat(focusVisibleA11yStyle(props), "\n        padding: 0;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n        border-radius: 0;\n      }\n\n      .MuiSvgIcon-root {\n        height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n        width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n      }\n    ");
 });
-var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d;
     var disabled = props.disabled;
     var spaces = getSpaces(props);
@@ -7098,7 +7144,7 @@ var StyledCheckboxCaption = styled__default.default("span")(templateObject_5$5 |
     var semanticColors = getSemanticColors(props);
     return "\n      color: ".concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n    ");
 });
-var templateObject_1$r, templateObject_2$e, templateObject_3$9, templateObject_4$8, templateObject_5$5;
+var templateObject_1$r, templateObject_2$f, templateObject_3$9, templateObject_4$8, templateObject_5$5;
 
 /**
  * @see https://mui.com/material-ui/react-checkbox/
@@ -7164,7 +7210,7 @@ var StyledRadioButton = styled__default.default(material.Radio)(templateObject_1
     var radioColor = intentToColor[intent];
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[radioColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n      &:hover {\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n        background-color: transparent;\n      }\n\n      &.").concat(material.radioClasses.disabled, " {\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n      }\n\n      &.").concat(material.radioClasses.checked, " {\n        color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n        &:hover {\n          color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n          background-color: transparent;\n        }\n\n        &.").concat(material.radioClasses.disabled, " {\n          color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n        }\n      }\n\n      &.").concat(material.radioClasses.root, " {\n        ").concat(focusVisibleA11yStyle(props), "\n        margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0 0;\n        padding: 0;\n      }\n\n      .MuiSvgIcon-root {\n        height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n        width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n      }\n    ");
 });
-var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d;
     var disabled = props.disabled;
     var spaces = getSpaces(props);
@@ -7182,7 +7228,7 @@ var StyledRadioCaption = styled__default.default("span")(templateObject_5$4 || (
     var semanticColors = getSemanticColors(props);
     return "\n      color: ".concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n    ");
 });
-var templateObject_1$q, templateObject_2$d, templateObject_3$8, templateObject_4$7, templateObject_5$4;
+var templateObject_1$q, templateObject_2$e, templateObject_3$8, templateObject_4$7, templateObject_5$4;
 
 /**
  * @see https://mui.com/material-ui/react-radio-button/
@@ -7216,7 +7262,7 @@ var inputSlider = function (props) {
     var corners = getCorners(props);
     var shadows = getShadows(props);
     var semanticColors = getSemanticColors(props);
-    return "\n    position: relative;\n\n    .".concat(material.sliderClasses.rail, ",\n    .").concat(material.sliderClasses.track, " {\n      border-radius: 2px;\n    }\n\n    .").concat(material.sliderClasses.rail, " {\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n      opacity:1;\n    }\n    \n    .").concat(material.sliderClasses.track, " {\n      background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillPrimary, ";\n    }\n\n    .").concat(material.sliderClasses.thumb, " {\n      ").concat(focusVisibleA11yStyle(props), "\n      height: 14px;\n      width: 14px;\n      background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPrimary, ";\n\n      &.").concat(material.sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n      }\n    }\n\n    .").concat(material.sliderClasses.thumb, "::before {\n      display: none;\n    }\n\n    .").concat(material.sliderClasses.thumb, "::after {\n      background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, " !important;\n      height: 6px !important;\n      width: 6px !important;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    .").concat(material.sliderClasses.valueLabel, " {\n      padding: 2px 4px;\n      color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textPrimary, ";\n      background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.surfacePrimary, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      left: unset; \n      top: -3px;\n\n      &::before {\n        display: none;\n      }\n\n      & * {\n        background: transparent;\n        color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimary, ";\n        transform: none;\n        width: unset;\n        height: unset;\n      }\n    }\n\n    .").concat(material.sliderClasses.mark, " {\n      // (masoudmanson): Although the mark is not a icon, but since we don't have \n      // a specific color for the mark, we use the iconDisabled color for it.\n      background-color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconDisabled, ";\n      opacity: 1;\n    }\n\n    .").concat(material.sliderClasses.mark, ".").concat(material.sliderClasses.markActive, " {\n      background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surfacePrimary, ";\n    }\n\n    .").concat(material.sliderClasses.markLabel, " {\n      ").concat((_k = fontBodyXxxs$1(props)) === null || _k === void 0 ? void 0 : _k.styles, "\n      color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textSecondary, ";\n    }\n\n    .").concat(material.sliderClasses.markLabelActive, " {\n      color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.textPrimary, ";\n    }\n  ");
+    return "\n    position: relative;\n\n    .".concat(material.sliderClasses.rail, ",\n    .").concat(material.sliderClasses.track, " {\n      border-radius: 2px;\n    }\n\n    .").concat(material.sliderClasses.rail, " {\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n      opacity:1;\n    }\n    \n    .").concat(material.sliderClasses.track, " {\n      background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillPrimary, ";\n    }\n\n    .").concat(material.sliderClasses.thumb, " {\n      ").concat(focusVisibleA11yStyle(props), "\n      height: 14px;\n      width: 14px;\n      background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPrimary, ";\n\n      &.").concat(material.sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n      }\n    }\n\n    .").concat(material.sliderClasses.thumb, "::before {\n      display: none;\n    }\n\n    .").concat(material.sliderClasses.thumb, "::after {\n      background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.backgroundPrimary, " !important;\n      height: 6px !important;\n      width: 6px !important;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    .").concat(material.sliderClasses.valueLabel, " {\n      padding: 2px 4px;\n      color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textPrimary, ";\n      background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.surfaceSecondary, ";\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      left: unset; \n      top: -3px;\n\n      &::before {\n        display: none;\n      }\n\n      & * {\n        background: transparent;\n        color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimary, ";\n        transform: none;\n        width: unset;\n        height: unset;\n      }\n    }\n\n    .").concat(material.sliderClasses.mark, " {\n      // (masoudmanson): Although the mark is not a icon, but since we don't have \n      // a specific color for the mark, we use the ornamentDisabled color for it.\n      background-color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabled, ";\n      opacity: 1;\n    }\n\n    .").concat(material.sliderClasses.mark, ".").concat(material.sliderClasses.markActive, " {\n      background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.backgroundPrimary, ";\n    }\n\n    .").concat(material.sliderClasses.markLabel, " {\n      ").concat((_k = fontBodyXxxs$1(props)) === null || _k === void 0 ? void 0 : _k.styles, "\n      color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textSecondary, ";\n    }\n\n    .").concat(material.sliderClasses.markLabelActive, " {\n      color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.textPrimary, ";\n    }\n  ");
 };
 var horizontal = function (props) {
     var marks = props.marks;
@@ -7225,10 +7271,8 @@ var horizontal = function (props) {
 };
 var disabledSlider = function (props) {
     var _a, _b, _c, _d, _e, _f, _g;
-    var colors = getColors(props);
     var semanticColors = getSemanticColors(props);
-    var mode = getMode(props);
-    return "\n    .".concat(material.sliderClasses.track, " {\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, ";\n    }\n\n    .").concat(material.sliderClasses.thumb, ".").concat(material.sliderClasses.disabled, " {\n      background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillDisabled, ";\n    }\n\n    .").concat(material.sliderClasses.valueLabel, " {\n      color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n      background-color: ").concat(mode === "light" ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfaceSecondary : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n      \n      & * {\n        color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, ";\n      }\n    }\n\n    .").concat(material.sliderClasses.markLabel, " {\n      color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, "\n    }\n\n    .").concat(material.sliderClasses.mark, " {\n      background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, ";\n    }\n  ");
+    return "\n    .".concat(material.sliderClasses.track, " {\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, ";\n    }\n\n    .").concat(material.sliderClasses.thumb, ".").concat(material.sliderClasses.disabled, " {\n      background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillDisabled, ";\n    }\n\n    .").concat(material.sliderClasses.valueLabel, " {\n      color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, ";\n      background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.backgroundSecondary, ";\n      \n      & * {\n        color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, ";\n      }\n    }\n\n    .").concat(material.sliderClasses.markLabel, " {\n      color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, "\n    }\n\n    .").concat(material.sliderClasses.mark, " {\n      background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, ";\n    }\n  ");
 };
 var StyledSlider = styled__default.default(material.Slider)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXxs$1, function (props) {
     var disabled = props.disabled;
@@ -7255,7 +7299,7 @@ var disabledStyled$1 = function (props) {
     var _a, _b, _c;
     var borders = getBorders(props);
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n    .", " {\n      .", " {\n        border: ", ";\n      }\n\n      &:hover .", " {\n        border: ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "], ["\n    .", " {\n      .", " {\n        border: ", ";\n      }\n\n      &:hover .", " {\n        border: ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled);
+    return react.css(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n    .", " {\n      .", " {\n        border: ", ";\n        opacity: 1;\n      }\n\n      &:hover .", " {\n        border: ", ";\n        opacity: 1;\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "], ["\n    .", " {\n      .", " {\n        border: ", ";\n        opacity: 1;\n      }\n\n      &:hover .", " {\n        border: ", ";\n        opacity: 1;\n      }\n\n      &::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n    }\n  "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled);
 };
 var textArea = function (props) {
     var spaces = getSpaces(props);
@@ -7270,15 +7314,14 @@ var StyledInputBase = styled__default.default(material.TextField, {
         return !sdsPropNames$1.includes(prop.toString());
     },
 })(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
     var spaces = getSpaces(props);
     var borders = getBorders(props);
     var corners = getCorners(props);
-    var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      display: block;\n\n      .", " {\n        width: 100%;\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n        background-color: ", ";\n      }\n\n      .", " {\n        border-radius: ", "px;\n        border: ", ";\n      }\n\n      .", " {\n        outline: none;\n        border-radius: 4px;\n        width: 100%;\n      }\n\n      &.user-is-tabbing .", " {\n        ", "\n      }\n\n      .", ":hover\n        .", " {\n        border: ", ";\n      }\n\n      .", ".", "\n        .", " {\n        border: ", ";\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      display: block;\n\n      .", " {\n        width: 100%;\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n        background-color: ", ";\n      }\n\n      .", " {\n        border-radius: ", "px;\n        border: ", ";\n      }\n\n      .", " {\n        outline: none;\n        border-radius: 4px;\n        width: 100%;\n      }\n\n      &.user-is-tabbing .", " {\n        ", "\n      }\n\n      .", ":hover\n        .", " {\n        border: ", ";\n      }\n\n      .", ".", "\n        .", " {\n        border: ", ";\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.root, material.outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, material.outlinedInputClasses.input, material.outlinedInputClasses.input, focusVisibleA11yStyle(props), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
+    return react.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      display: block;\n\n      .", " {\n        width: 100%;\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n      }\n\n      .", " {\n        border-radius: ", "px;\n        border: ", ";\n      }\n\n      .", " {\n        outline: none;\n        border-radius: 4px;\n        width: 100%;\n      }\n\n      &.user-is-tabbing .", " {\n        ", "\n      }\n\n      .", ":hover\n        .", " {\n        border: ", ";\n      }\n\n      .", ".", "\n        .", " {\n        border: ", ";\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      display: block;\n\n      .", " {\n        width: 100%;\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n      }\n\n      .", " {\n        border-radius: ", "px;\n        border: ", ";\n      }\n\n      .", " {\n        outline: none;\n        border-radius: 4px;\n        width: 100%;\n      }\n\n      &.user-is-tabbing .", " {\n        ", "\n      }\n\n      .", ":hover\n        .", " {\n        border: ", ";\n      }\n\n      .", ".", "\n        .", " {\n        border: ", ";\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.root, material.outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.input, material.outlinedInputClasses.input, focusVisibleA11yStyle(props), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _c === void 0 ? void 0 : _c.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
 });
-var templateObject_1$o, templateObject_2$c, templateObject_3$7, templateObject_4$6, templateObject_5$3, templateObject_6$2;
+var templateObject_1$o, templateObject_2$d, templateObject_3$7, templateObject_4$6, templateObject_5$3, templateObject_6$2;
 
 /**
  * @see https://mui.com/material-ui/react-text-field/
@@ -7317,27 +7360,27 @@ var toggle = function (props) {
     var shadows = getShadows(props);
     var iconSizes = getIconSizes(props);
     var semanticColors = getSemanticColors(props);
-    return "\n    cursor: ".concat(disabled ? "default" : "pointer", ";\n    border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n    height: 24px;\n    width: ").concat(width, "px;\n    line-height: 18px;\n    padding: 0;\n    overflow: visible;\n\n    .").concat(material.switchClasses.switchBase, " {\n      ").concat(focusVisibleA11yStyle(props), "\n      outline-offset: 2px !important;\n      width: 100%;\n      height: 100%;\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n      font: inherit;\n      transform: unset;\n      justify-content: space-between;\n\n      .").concat(material.switchClasses.input, " {\n        width: 100%;\n        height: 100%;\n        left: 0;\n      }\n\n      &.").concat(material.switchClasses.checked, " {\n        transform: unset;\n      }\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    .").concat(material.switchClasses.thumb, " {\n      height: ").concat((_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _a === void 0 ? void 0 : _a.height, "px;\n      width: ").concat((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _b === void 0 ? void 0 : _b.width, "px;\n      min-width: ").concat((_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _c === void 0 ? void 0 : _c.width, "px;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n    }\n\n    .").concat(material.switchClasses.track, " {\n      background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n      opacity: 1;\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n    }\n  ");
+    return "\n    cursor: ".concat(disabled ? "default" : "pointer", ";\n    border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n    height: 24px;\n    width: ").concat(width, "px;\n    line-height: 18px;\n    padding: 0;\n    overflow: visible;\n\n    .").concat(material.switchClasses.switchBase, " {\n      ").concat(focusVisibleA11yStyle(props), "\n      outline-offset: 2px !important;\n      width: 100%;\n      height: 100%;\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n      font: inherit;\n      transform: unset;\n      justify-content: space-between;\n\n      .").concat(material.switchClasses.input, " {\n        width: 100%;\n        height: 100%;\n        left: 0;\n      }\n\n      &.").concat(material.switchClasses.checked, " {\n        transform: unset;\n      }\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    .").concat(material.switchClasses.thumb, " {\n      height: ").concat((_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _a === void 0 ? void 0 : _a.height, "px;\n      width: ").concat((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _b === void 0 ? void 0 : _b.width, "px;\n      min-width: ").concat((_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _c === void 0 ? void 0 : _c.width, "px;\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n    }\n\n    .").concat(material.switchClasses.track, " {\n      // background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.backgroundPrimary, ";\n      opacity: 1;\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n    }\n  ");
 };
 var toggleOn = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     var disabled = props.disabled, value = props.value;
     var borders = getBorders(props);
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n    & {\n      outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _b === void 0 ? void 0 : _b.default, ";\n    }\n\n    .").concat(material.switchClasses.thumb, " {\n      color: ").concat(disabled ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconDisabled : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.icon, ";\n      margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    }\n\n    .").concat(material.switchClasses.switchBase, " {\n      left: unset;\n      right: 0;\n      transform: unset;\n      padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n      .MuiIconButton-label {\n        margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n      }\n\n      &:before {\n        color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n        content: \"").concat(value, "\";\n      }\n    }\n\n    .").concat(material.switchClasses.track, " {\n      background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, " !important;\n      opacity: 1 !important;\n    }\n\n    ").concat(!disabled &&
-        "&:hover {\n        outline: ".concat((_h = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _h === void 0 ? void 0 : _h.hover, ";\n\n        .").concat(material.switchClasses.thumb, " {\n          color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.iconHover, ";\n        }\n      }"), "\n  ");
+    return "\n    & {\n      outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _b === void 0 ? void 0 : _b.default, ";\n    }\n\n    .").concat(material.switchClasses.thumb, " {\n      color: ").concat(disabled ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentDisabled : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornament, ";\n      margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    }\n\n    .").concat(material.switchClasses.switchBase, " {\n      left: unset;\n      right: 0;\n      transform: unset;\n      padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n      .MuiIconButton-label {\n        margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n      }\n\n      &:before {\n        color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n        content: \"").concat(value, "\";\n      }\n    }\n\n    .").concat(material.switchClasses.track, " {\n      background-color: transparent !important;\n      opacity: 1 !important;\n    }\n\n    ").concat(!disabled &&
+        "&:hover {\n        outline: ".concat((_g = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _g === void 0 ? void 0 : _g.hover, ";\n\n        .").concat(material.switchClasses.thumb, " {\n          color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentHover, ";\n        }\n      }"), "\n  ");
 };
 var toggleOff = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var disabled = props.disabled, value = props.value;
     var borders = getBorders(props);
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
     return "\n    & {\n      outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, ";\n    }\n\n    .").concat(material.switchClasses.thumb, " {\n      color: ").concat(disabled
-        ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconDisabled
-        : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimary, ";\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    }\n\n    .").concat(material.switchClasses.switchBase, " {\n      right: unset;\n      left: 0;\n      transform: unset;\n      padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n      .MuiIconButton-label {\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n      }\n\n      &:after {\n        color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textSecondary, ";\n        content: \"").concat(value, "\";\n      }\n    }\n\n    &:hover {\n      .").concat(material.switchClasses.switchBase, " {\n        &:after {\n          color: ").concat(disabled ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, ";\n        }\n      }\n    }\n\n    .").concat(material.switchClasses.track, " {\n      background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.fillPrimary, " !important;\n      opacity: 1 !important;\n    }\n\n    ").concat(!disabled &&
-        "&:hover {\n        outline: ".concat((_k = borders === null || borders === void 0 ? void 0 : borders.base) === null || _k === void 0 ? void 0 : _k.hover, ";\n\n        .").concat(material.switchClasses.thumb, " {\n          color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.iconPrimaryHover, ";\n        }\n      }"), "\n  ");
+        ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentDisabled
+        : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, ";\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n    }\n\n    .").concat(material.switchClasses.switchBase, " {\n      right: unset;\n      left: 0;\n      transform: unset;\n      padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n      .MuiIconButton-label {\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n      }\n\n      &:after {\n        color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textSecondary, ";\n        content: \"").concat(value, "\";\n      }\n    }\n\n    &:hover {\n      .").concat(material.switchClasses.switchBase, " {\n        &:after {\n          color: ").concat(disabled ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, ";\n        }\n      }\n    }\n\n    .").concat(material.switchClasses.track, " {\n      background-color: transparent !important;\n      opacity: 1 !important;\n    }\n\n    ").concat(!disabled &&
+        "&:hover {\n        outline: ".concat((_j = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.hover, ";\n\n        .").concat(material.switchClasses.thumb, " {\n          color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentSecondaryHover, ";\n        }\n      }"), "\n  ");
 };
 var Toggle = styled__default.default(material.Switch)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), fontBodyXs$2, function (props) {
     var checked = props.checked;
@@ -7368,7 +7411,7 @@ var defaultStyle = function (props) {
     return react.css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n    color: ", ";\n    position: relative;\n    text-decoration: none;\n    text-underline-offset: 2.5px;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:focus {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  "], ["\n    color: ", ";\n    position: relative;\n    text-decoration: none;\n    text-underline-offset: 2.5px;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:focus {\n      color: ", ";\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textActionHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed);
 };
 var dashedStyle = function () {
-    return react.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n    color: inherit;\n    position: relative;\n    text-decoration: underline dashed;\n    text-underline-offset: 2.5px;\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-visible {\n      text-decoration-style: solid;\n    }\n  "], ["\n    color: inherit;\n    position: relative;\n    text-decoration: underline dashed;\n    text-underline-offset: 2.5px;\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-visible {\n      text-decoration-style: solid;\n    }\n  "])));
+    return react.css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n    color: inherit;\n    position: relative;\n    text-decoration: underline dashed;\n    text-underline-offset: 2.5px;\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-visible {\n      text-decoration-style: solid;\n    }\n  "], ["\n    color: inherit;\n    position: relative;\n    text-decoration: underline dashed;\n    text-underline-offset: 2.5px;\n\n    &:hover,\n    &:focus,\n    &:active,\n    &:focus-visible {\n      text-decoration-style: solid;\n    }\n  "])));
 };
 var smallStyle = function (props) {
     return fontBodyS$1(props);
@@ -7384,7 +7427,7 @@ var StyledLink = styled__default.default(material.Link, {
     var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
     return react.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n\n      font-weight: ", ";\n      display: inline-block;\n      cursor: pointer;\n    "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
 });
-var templateObject_1$m, templateObject_2$b, templateObject_3$6, templateObject_4$5;
+var templateObject_1$m, templateObject_2$c, templateObject_3$6, templateObject_4$5;
 
 /**
  * @see https://mui.com/material-ui/react-link/
@@ -7471,11 +7514,11 @@ function propsToMarginBottom(props) {
     var marginBottom = props.marginBottom;
     return "\n    margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "xs"], "px;\n  ");
 }
-var ListItemLabel = styled__default.default("span")(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  margin-right: 5px;\n\n  ", "\n"], ["\n  margin-right: 5px;\n\n  ", "\n"])), function (props) {
+var ListItemLabel = styled__default.default("span")(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  margin-right: 5px;\n\n  ", "\n"], ["\n  margin-right: 5px;\n\n  ", "\n"])), function (props) {
     var fontWeights = getFontWeights(props);
     return "\n      font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n    ");
 });
-var templateObject_1$k, templateObject_2$a;
+var templateObject_1$k, templateObject_2$b;
 
 /**
  * @see https://mui.com/material-ui/react-list/
@@ -7506,13 +7549,13 @@ var minimal = function (props) {
     var _a, _b;
     var iconSizes = getIconSizes(props);
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n    ", "\n\n    color: ", ";\n\n    svg {\n      height: ", "px;\n      width: ", "px;\n\n      path {\n        fill: ", ";\n      }\n    }\n  "], ["\n    ", "\n\n    color: ", ";\n\n    svg {\n      height: ", "px;\n      width: ", "px;\n\n      path {\n        fill: ", ";\n      }\n    }\n  "])), fontBodyS$1(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary);
+    return react.css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n    ", "\n\n    color: ", ";\n\n    svg {\n      height: ", "px;\n      width: ", "px;\n\n      path {\n        fill: ", ";\n      }\n    }\n  "], ["\n    ", "\n\n    color: ", ";\n\n    svg {\n      height: ", "px;\n      width: ", "px;\n\n      path {\n        fill: ", ";\n      }\n    }\n  "])), fontBodyS$1(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary);
 };
 var tag = function (props) {
     var _a, _b, _c;
     var corners = getCorners(props);
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n    ", "\n\n    background-color: ", ";\n    border-radius: ", "px;\n    color: ", ";\n\n    svg {\n      path {\n        fill: ", ";\n      }\n    }\n  "], ["\n    ", "\n\n    background-color: ", ";\n    border-radius: ", "px;\n    color: ", ";\n\n    svg {\n      path {\n        fill: ", ";\n      }\n    }\n  "])), fontCapsXxxxs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfacePrimary, corners === null || corners === void 0 ? void 0 : corners.l, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.text, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _c === void 0 ? void 0 : _c.ornament);
+    return react.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n    ", "\n\n    background-color: ", ";\n    border-radius: ", "px;\n    color: ", ";\n\n    svg {\n      path {\n        fill: ", ";\n      }\n    }\n  "], ["\n    ", "\n\n    background-color: ", ";\n    border-radius: ", "px;\n    color: ", ";\n\n    svg {\n      path {\n        fill: ", ";\n      }\n    }\n  "])), fontCapsXxxxs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, corners === null || corners === void 0 ? void 0 : corners.l, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.text, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _c === void 0 ? void 0 : _c.ornament);
 };
 var doNotForwardProps$7 = ["sdsStyle"];
 var StyledLoadingIndicator = styled__default.default("div", {
@@ -7523,18 +7566,18 @@ var StyledLoadingIndicator = styled__default.default("div", {
     var style = react.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n      display: inline-flex;\n      align-items: center;\n      padding: ", "px;\n    "], ["\n      display: inline-flex;\n      align-items: center;\n      padding: ", "px;\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
     return react.css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n    "])), style, sdsStyle === "minimal" && minimal(props), sdsStyle === "tag" && tag(props));
 });
-var templateObject_1$i, templateObject_2$9, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6$1;
+var templateObject_1$i, templateObject_2$a, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6$1;
 
 var LoadingIndicator = function (_a) {
     var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
-    return (jsxRuntime.jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsxRuntime.jsx(Icon, { sdsIcon: "Loading", sdsSize: "l", sdsType: "static" }), jsxRuntime.jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
+    return (jsxRuntime.jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsxRuntime.jsx(Icon, { sdsIcon: "Loading", sdsSize: "l" }), jsxRuntime.jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
 };
 
 var StyledMenu = styled__default.default(material.Menu)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  & {\n    .", " {\n      ", "\n    }\n\n    .MuiList-padding {\n      padding: 0;\n    }\n  }\n"], ["\n  & {\n    .", " {\n      ", "\n    }\n\n    .MuiList-padding {\n      padding: 0;\n    }\n  }\n"])), material.menuClasses.paper, function (props) {
     var _a;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n          background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n          background-image: none;\n          padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n        ");
+    return "\n          background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n          background-image: none;\n          padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n        ");
 });
 var templateObject_1$h;
 
@@ -7559,7 +7602,7 @@ var doNotForwardProps$6 = ["search", "InputBaseProps", "keepSearchOnSelect"];
 //  per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
 var StyledAutocomplete = styled__default.default(material.Autocomplete, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
-})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  ", "\n  width: 100%;\n"], ["\n  ", "\n  width: 100%;\n"])), function (_a) {
+})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  ", "\n  width: 100%;\n"], ["\n  ", "\n  width: 100%;\n"])), function (_a) {
     var search = _a.search;
     return !search && "height: 0; margin: 0 !important;";
 });
@@ -7582,7 +7625,7 @@ var StyledMenuInputSearch = styled__default.default(InputSearch, {
     var search = _a.search;
     return (search ? "auto" : "transparent");
 });
-var templateObject_1$g, templateObject_2$8, templateObject_3$4, templateObject_4$3;
+var templateObject_1$g, templateObject_2$9, templateObject_3$4, templateObject_4$3;
 
 /**
  * @see https://mui.com/material-ui/react-autocomplete/
@@ -7608,9 +7651,7 @@ var MenuSelect = function (props) {
                      * (thuang): Works with css caret-color: "transparent" to hide
                      * mobile keyboard
                      */
-                    inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
-                                sdsType: "interactive",
-                            }, icon: "Search" }) })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onInputChange: function (event, value, reason) {
+                    inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "Search" }) })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onInputChange: function (event, value, reason) {
             if (event && event.type === "blur") {
                 setInputValue("");
             }
@@ -7697,13 +7738,13 @@ var StyledTabs$1 = styled__default.default(material.Tabs, {
 });
 var StyledTab$1 = styled__default.default(material.Tab, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
-})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
-    var _a, _b, _c, _d;
+})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
+    var _a, _b, _c;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      ".concat(focusVisibleA11yStyle(props), "\n      box-sizing: border-box;\n      max-width: 180px;\n      padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      align-items: start;\n      min-height: unset;\n      max-height: unset;\n      text-transform: none;\n      &:last-child {\n        margin-bottom: 0;\n      }\n      &:before {\n        content: \"\";\n        position: absolute;\n        left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        height: 100%;\n        background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n        display: none;\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n      &:hover {\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n        &:before {\n          display: block;\n        }\n      }\n      &.Mui-selected {\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n        font-weight: 600;\n      }\n      &.MuiTabs-indicator {\n        backgroundColor: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfaceTertiary, ";\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n      &.MuiButtonBase-root {\n        white-space: nowrap;\n        padding: 0;\n        overflow: visible;\n      }\n    ");
+    return "\n      ".concat(focusVisibleA11yStyle(props), "\n      box-sizing: border-box;\n      max-width: 180px;\n      padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      align-items: start;\n      min-height: unset;\n      max-height: unset;\n      text-transform: none;\n      &:last-child {\n        margin-bottom: 0;\n      }\n      &:before {\n        content: \"\";\n        position: absolute;\n        left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        height: 100%;\n        background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n        display: none;\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n      &:hover {\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n        &:before {\n          display: block;\n        }\n      }\n      &.Mui-selected {\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n        font-weight: 600;\n      }\n      &.MuiButtonBase-root {\n        white-space: nowrap;\n        padding: 0;\n        overflow: visible;\n      }\n    ");
 });
-var templateObject_1$f, templateObject_2$7;
+var templateObject_1$f, templateObject_2$8;
 
 /**
  * Custom hook that observes elements to determine if they are in the viewport.
@@ -7790,9 +7831,9 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
         };
     };
     // Emit changes only once
-    var handleOnChange = React.useCallback(function (value) {
+    var handleOnChange = React.useCallback(function (value, event, type) {
         if (value !== emittedValue) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(value, event, type);
             setEmittedValue(value);
         }
     }, [emittedValue, onChange]);
@@ -7818,7 +7859,7 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
         // Update the tab value to newValue to adjust the position of the tabsIndicator
         setFirstTabIndexInview(newValue);
         // Invoke the custom onChange prop
-        handleOnChange(newValue);
+        handleOnChange(newValue, event, "click");
     };
     // Observe changes in the sectionIsInView object to update the tabs value
     // based on the index of the visible sections in the viewport.
@@ -7831,9 +7872,12 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
         if (sectionInView > -1 && !navItemClicked) {
             setFirstTabIndexInview(sectionInView);
             // Invoke the custom onChange prop
-            handleOnChange(sectionInView);
+            handleOnChange(sectionInView, {
+                target: items[sectionInView],
+                type: "scroll",
+            }, "scroll");
         }
-    }, [handleOnChange, navItemClicked, sectionIsInView]);
+    }, [handleOnChange, items, navItemClicked, sectionIsInView]);
     // Set navItemClicked to false to re-enable the option
     // to update the tab value based on scroll.
     useScrollStopListener(function () {
@@ -7862,7 +7906,7 @@ var StyledNotification = styled__default.default(material.Alert, {
     var typography = getTypography(props);
     var borders = getBorders(props);
     var iconColor = (_b = (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _a === void 0 ? void 0 : _a.ornament) !== null && _b !== void 0 ? _b : "black";
-    var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfacePrimary) !== null && _d !== void 0 ? _d : "white";
+    var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfaceSecondary) !== null && _d !== void 0 ? _d : "white";
     // (masoudmanson): The Notification Icon should be vertically centered with the Notification
     // Title. The padding-top of the Notification Title is calculated based on the difference
     // between the height of the Icon and the line-height of the Notification Title.
@@ -7871,11 +7915,11 @@ var StyledNotification = styled__default.default(material.Alert, {
         2);
     return "\n      background-color: ".concat(backgroundColor, ";\n      max-width: 480px;\n      min-width: 280px;\n      box-sizing: border-box;\n      margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0;\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimary, ";\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      align-items: flex-start;\n      border-left: ").concat((_m = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _m === void 0 ? void 0 : _m.extraThick, ";\n      box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.s, ";\n\n      .MuiAlert-icon {\n        height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n        width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, "px;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        padding: 0;\n        path {\n          fill: ").concat(iconColor, ";\n        }\n      }\n\n      .MuiAlert-message {\n        padding: ").concat(alertMessagePaddingTop, "px 0px 0px;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        width: 100%;\n\n        > * {\n          margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0px;\n\n          &:last-child {\n            margin-bottom: 0;\n          }\n        }\n\n        button {\n          display: block;\n        }\n      }\n\n      .MuiAlert-action {\n        margin-right: 0;\n        padding: 0;\n        align-items: flex-start;\n        margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n        > button {\n            padding: 0;\n          }\n        }\n      }\n    ");
 });
-var StyledButtonWrapper = styled__default.default("div")(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var StyledButtonWrapper = styled__default.default("div")(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
     return "\n      display: flex;\n      justify-content: ".concat(buttonPosition === "left" ? "flex-start" : "flex-end", ";\n    ");
 });
-var templateObject_1$e, templateObject_2$6;
+var templateObject_1$e, templateObject_2$7;
 
 /**
  * @see https://mui.com/material-ui/react-alert/
@@ -7906,17 +7950,17 @@ var Notification = function (_a) {
                 return icon;
             }
             else {
-                return (jsxRuntime.jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon, sdsType: "static" }, sdsIconProps)));
+                return (jsxRuntime.jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon }, sdsIconProps)));
             }
         }
         else {
             switch (intent) {
                 case "positive":
-                    return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle", sdsType: "static" });
+                    return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle" });
                 case "info":
-                    return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle", sdsType: "static" });
+                    return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle" });
                 default:
-                    return (jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle", sdsType: "static" }));
+                    return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle" });
             }
         }
     };
@@ -7939,16 +7983,16 @@ var doNotForwardProps$3 = [
 var StyledPaginationButton = styled__default.default(Button)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c;
     var semanticColors = getSemanticColors(props);
-    return "\n      width: 32px;\n      height: 32px;\n      cursor: \"pointer\";\n\n      & .MuiSvgIcon-root {\n        width: 10px;\n        color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, "\n      }\n\n      &:hover {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n\n        & .MuiSvgIcon-root {\n          color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryHover, "\n        }\n      }\n    ");
+    return "\n      width: 32px;\n      height: 32px;\n      cursor: \"pointer\";\n\n      & .MuiSvgIcon-root {\n        width: 10px;\n        color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, ";\n      }\n\n      &:hover {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n\n        & .MuiSvgIcon-root {\n          color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondaryHover, "\n        }\n      }\n    ");
 });
 var StyledPaginationChevronList = styled__default.default("li", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
-})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e;
     var disabled = props.disabled;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      width: 32px;\n      height: 32px;\n      cursor: ".concat(disabled ? "auto" : "pointer", ";\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: 32px;\n\n      &[data-order=\"first\"] {\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      }\n\n      &[data-order=\"last\"] {\n        margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      }\n\n      & .MuiSvgIcon-root {\n        color: ").concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\n      }\n\n      &:hover {\n        background-color: ").concat(disabled ? "transparent" : (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n\n        & .MuiSvgIcon-root {\n          color: ").concat(disabled ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryHover, "\n        }\n      }\n\n      ").concat(focusVisibleA11yStyle(props), "\n    ");
+    return "\n      width: 32px;\n      height: 32px;\n      cursor: ".concat(disabled ? "auto" : "pointer", ";\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: 32px;\n\n      &[data-order=\"first\"] {\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      }\n\n      &[data-order=\"last\"] {\n        margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      }\n\n      & .MuiSvgIcon-root {\n        color: ").concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, ";\n      }\n\n      &:hover {\n        background-color: ").concat(disabled ? "transparent" : (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n\n        & .MuiSvgIcon-root {\n          color: ").concat(disabled ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, "\n        }\n      }\n\n      ").concat(focusVisibleA11yStyle(props), "\n    ");
 });
 var StyledPagination = styled__default.default("ul", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
@@ -7968,7 +8012,7 @@ var Page = styled__default.default("li", {
     var semanticColors = getSemanticColors(props);
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n      cursor: pointer;\n      list-style: none;\n      width: 32px;\n      height: 32px;\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: ").concat(sdsStyle === "round" ? corners === null || corners === void 0 ? void 0 : corners.l : corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      user-select: none;\n      &:hover {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n      }\n\n      &:nth-last-of-type(-n+2) {\n        margin-right: 0;\n      }\n\n      ").concat(selected && selectedPageStyle(props), ";\n      ").concat(focusVisibleA11yStyle(props), "\n    ");
 });
-var templateObject_1$d, templateObject_2$5, templateObject_3$3, templateObject_4$2;
+var templateObject_1$d, templateObject_2$6, templateObject_3$3, templateObject_4$2;
 
 var StyledPaginationDropdownMenu = styled__default.default(Menu)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  & .MuiPaper-root {\n    max-height: 120px;\n  }\n"], ["\n  & .MuiPaper-root {\n    max-height: 120px;\n  }\n"])));
 var templateObject_1$c;
@@ -8076,7 +8120,7 @@ var Pagination = React.forwardRef(function (props, ref) {
         return null;
     }
     var lastPage = paginationRange[paginationRange.length - 1];
-    return (jsxRuntime.jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, children: jsxRuntime.jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs", sdsType: "button" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, children: jsxRuntime.jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs", sdsType: "button" }) }, "onNextPage")] })));
+    return (jsxRuntime.jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, children: jsxRuntime.jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, children: jsxRuntime.jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs" }) }, "onNextPage")] })));
     function handleGoBackButtonKeyDown(event) {
         if ((event.key === "Enter" || event.code === "Space") &&
             currentPage > 1) {
@@ -8105,14 +8149,14 @@ var basicPanelStyles = function (props) {
     var _a;
     var semanticColors = getSemanticColors(props);
     var spaces = getSpaces(props);
-    return react.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    .", " {\n      background-color: ", ";\n      padding: ", "px;\n      min-width: ", "px;\n      min-height: ", "px;\n    }\n  "], ["\n    .", " {\n      background-color: ", ";\n      padding: ", "px;\n      min-width: ", "px;\n      min-height: ", "px;\n    }\n  "])), material.drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, spaces === null || spaces === void 0 ? void 0 : spaces.l, PANEL_BASIC_MIN_WIDTH_PX, PANEL_BASIC_MIN_WIDTH_PX);
+    return react.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    .", " {\n      background-color: ", ";\n      padding: ", "px;\n      min-width: ", "px;\n      min-height: ", "px;\n    }\n  "], ["\n    .", " {\n      background-color: ", ";\n      padding: ", "px;\n      min-width: ", "px;\n      min-height: ", "px;\n    }\n  "])), material.drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.l, PANEL_BASIC_MIN_WIDTH_PX, PANEL_BASIC_MIN_WIDTH_PX);
 };
 var overlayPanelStyles = function (props) {
     var _a;
     var semanticColors = getSemanticColors(props);
     var spaces = getSpaces(props);
     var shadows = getShadows(props);
-    return react.css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    /**\n     * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n     * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n     * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n     * In the meantime, we are ignoring the a11y errors within Storybook.\n     */\n    width: fit-content;\n    height: fit-content;\n    div[data-testid=\"sentinelStart\"],\n    div[data-testid=\"sentinelEnd\"] {\n      width: fit-content;\n    }\n\n    .", " {\n      background-color: ", ";\n      padding: ", "px;\n      min-width: ", "px;\n      min-height: ", "px;\n      box-shadow: ", ";\n      background-image: none;\n    }\n  "], ["\n    /**\n     * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n     * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n     * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n     * In the meantime, we are ignoring the a11y errors within Storybook.\n     */\n    width: fit-content;\n    height: fit-content;\n    div[data-testid=\"sentinelStart\"],\n    div[data-testid=\"sentinelEnd\"] {\n      width: fit-content;\n    }\n\n    .", " {\n      background-color: ", ";\n      padding: ", "px;\n      min-width: ", "px;\n      min-height: ", "px;\n      box-shadow: ", ";\n      background-image: none;\n    }\n  "])), material.drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xl, PANEL_OVERLAY_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, shadows === null || shadows === void 0 ? void 0 : shadows.l);
+    return react.css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n    /**\n     * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n     * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n     * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n     * In the meantime, we are ignoring the a11y errors within Storybook.\n     */\n    width: fit-content;\n    height: fit-content;\n    div[data-testid=\"sentinelStart\"],\n    div[data-testid=\"sentinelEnd\"] {\n      width: fit-content;\n    }\n\n    .", " {\n      background-color: ", ";\n      padding: ", "px;\n      min-width: ", "px;\n      min-height: ", "px;\n      box-shadow: ", ";\n      background-image: none;\n    }\n  "], ["\n    /**\n     * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n     * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n     * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n     * In the meantime, we are ignoring the a11y errors within Storybook.\n     */\n    width: fit-content;\n    height: fit-content;\n    div[data-testid=\"sentinelStart\"],\n    div[data-testid=\"sentinelEnd\"] {\n      width: fit-content;\n    }\n\n    .", " {\n      background-color: ", ";\n      padding: ", "px;\n      min-width: ", "px;\n      min-height: ", "px;\n      box-shadow: ", ";\n      background-image: none;\n    }\n  "])), material.drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, spaces === null || spaces === void 0 ? void 0 : spaces.xl, PANEL_OVERLAY_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, shadows === null || shadows === void 0 ? void 0 : shadows.l);
 };
 var StyledDrawer = styled__default.default(material.Drawer, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
@@ -8127,7 +8171,7 @@ var StyledHeaderComponent = styled__default.default("div")(templateObject_6 || (
     var spaces = getSpaces(props);
     return react.css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n      margin-bottom: ", "px;\n      display: flex;\n      justify-content: space-between;\n      align-items: start;\n    "], ["\n      margin-bottom: ", "px;\n      display: flex;\n      justify-content: space-between;\n      align-items: start;\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxl);
 });
-var templateObject_1$b, templateObject_2$4, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;
+var templateObject_1$b, templateObject_2$5, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;
 
 var StyledPanelHeader = styled__default.default("div")(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var spaces = getSpaces(props);
@@ -8201,9 +8245,17 @@ var StyledSegmentedControl = styled__default.default(material.ToggleButtonGroup,
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      .".concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.disabled, " {\n        border-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n      }\n\n      .").concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.selected, " {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillOpen, ";\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.iconSelected, ";\n        border-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\n\n        &:hover {\n          background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n        }\n      }\n\n      .").concat(material.toggleButtonClasses.root, " {\n        ").concat(focusVisibleA11yStyle(props), "\n        background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPrimary, ";\n        border-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.border, ";\n        line-height: 0px;\n        color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconSecondary, ";\n        padding: ").concat(((_j = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _j !== void 0 ? _j : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n        &:hover {\n          border-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.border, ";\n          background-color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.fillHover, ";\n        }\n      }\n    ");
+    return "\n      .".concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.disabled, " {\n        border-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n      }\n\n      .").concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.selected, " {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillOpen, ";\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.ornamentSelected, ";\n        border-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\n\n        &:hover {\n          background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n          color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, ";\n        }\n      }\n\n      .").concat(material.toggleButtonClasses.root, " {\n        ").concat(focusVisibleA11yStyle(props), "\n        background-color: transparent;\n        border-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.border, ";\n        line-height: 0px;\n        color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimary, ";\n        padding: ").concat(((_j = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _j !== void 0 ? _j : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n        &:hover {\n          border-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.border, ";\n          background-color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.fillHover, ";\n        }\n      }\n    ");
+});
+var StyledToggleButton = styled__default.default(material.ToggleButton, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
+})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var _a;
+    var disabled = props.disabled;
+    var semanticColors = getSemanticColors(props);
+    return "\n      svg {\n        color: ".concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled : "currentColor", ";\n      }\n    ");
 });
-var templateObject_1$8;
+var templateObject_1$8, templateObject_2$4;
 
 /**
  * @see https://mui.com/material-ui/react-toggle-button/
@@ -8226,8 +8278,8 @@ var SegmentedControl = function (props) {
     };
     return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: [buttonDefinition.map(function (button) {
                 var icon = button.icon, tooltipText = button.tooltipText, buttonValue = button.value, _a = button.disabled, disabled = _a === void 0 ? false : _a;
-                var iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsxRuntime.jsx(Icon, { sdsIcon: icon, sdsSize: "s", sdsType: "button" }))) : null;
-                var toggleButton = (jsxRuntime.jsx(material.ToggleButton, { "aria-label": tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, value: buttonValue, disabled: disabled, children: jsxRuntime.jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
+                var iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsxRuntime.jsx(Icon, { sdsIcon: icon, sdsSize: "s" }))) : null;
+                var toggleButton = (jsxRuntime.jsx(StyledToggleButton, { "aria-label": tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, value: buttonValue, disabled: disabled, children: jsxRuntime.jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
                 // (masoudmanson): If the button is disabled, we don't want to show the tooltip.
                 return disabled ? (toggleButton) : (jsxRuntime.jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, sdsStyle: "dark", arrow: true, children: toggleButton }, buttonValue));
             }), ";"] })));
@@ -8251,10 +8303,9 @@ var doNotForwardProps = [
     "hover",
 ];
 var disabledStyled = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var semanticColors = getSemanticColors(props);
-    var mode = getMode(props);
-    return "\n    // eslint-disable-next-line sonarjs/no-all-duplicated-branches\n    background-color: ".concat(mode === "light" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceSecondary : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary, ";\n    color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, ";\n    user-select: none;\n\n    &:hover {\n      background-color: ").concat(mode === "light" ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfaceSecondary : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.surfacePrimary, ";\n      color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, ";\n    }\n\n    & span, & div {\n      color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, ";\n    }\n\n    .cell-component {\n      color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textDisabled, ";\n      pointer-events: none;\n      user-select: none;\n      & span, & div {\n        color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textDisabled, ";\n        background-color: ").concat(mode === "light" ? (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.surfaceSecondary : (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.surfacePrimary, ";\n      }\n\n      svg {\n        fill: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.iconDisabled, ";\n      }\n\n      filter: grayscale(100%);\n    }\n  ");
+    return "\n    background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundSecondary, ";\n    color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, ";\n    user-select: none;\n\n    &:hover {\n      background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.backgroundSecondary, ";\n      color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textDisabled, ";\n    }\n\n    & span, & div {\n      color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, ";\n    }\n\n    .cell-component {\n      color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, ";\n      pointer-events: none;\n      user-select: none;\n      & div {\n        color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, ";\n        background-color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.backgroundSecondary, ";\n      }\n\n      & .MuiChip-root {\n        background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.fillDisabled, ";\n\n        & span {\n          color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textDisabled, " !important;\n        }\n      }\n\n      svg {\n        fill: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentDisabled, ";\n      }\n\n      filter: grayscale(100%);\n    }\n  ");
 };
 var hoverStyled = function (props) {
     var _a;
@@ -8429,7 +8480,7 @@ var TooltipCondensed = React.forwardRef(function TooltipCondensed(props, ref) {
         key: "tooltip",
         props: props,
     });
-    return (jsxRuntime.jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, arrow: false, children: children }));
+    return (jsxRuntime.jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, arrow: false, hasInvertedStyle: false, children: children }));
 });
 function mergeClass(_a) {
     var props = _a.props, className = _a.className, key = _a.key;
@@ -8549,6 +8600,8 @@ exports.Panel = Panel;
 exports.SDSChooseTheme = SDSChooseTheme;
 exports.SDSDarkAppTheme = SDSDarkAppTheme;
 exports.SDSLightAppTheme = SDSLightAppTheme;
+exports.SDSPaletteDark = SDSPaletteDark;
+exports.SDSPaletteLight = SDSPaletteLight;
 exports.SegmentedControl = SegmentedControl;
 exports.Tab = Tab;
 exports.Table = Table;