From 0c9cdce442434395547d104cc6ff8564a5747ffb Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Sat, 15 Feb 2025 00:41:25 -0500
Subject: [PATCH] fix(navigationheader): fixed inverted styles in sub
 components

Buttons and InputSearch
---
 .storybook/preview.js                         | 153 +++++++++++++++++-
 .../__snapshots__/index.test.tsx.snap         |  62 +++----
 .../__snapshots__/banner.test.tsx.snap        |   7 +-
 .../__snapshots__/index.test.tsx.snap         |   5 +-
 packages/components/src/core/Button/index.tsx |  64 +++-----
 .../__snapshots__/index.test.tsx.snap         |   9 +-
 .../__snapshots__/index.test.tsx.snap         |  11 +-
 .../__snapshots__/index.test.tsx.snap         |  83 +++++++---
 .../__snapshots__/index.test.tsx.snap         |  22 ++-
 .../__snapshots__/index.test.tsx.snap         |   9 +-
 .../__snapshots__/index.test.tsx.snap         |   2 +-
 .../components/src/core/InputSearch/index.tsx |  16 +-
 .../__snapshots__/index.test.tsx.snap         |  14 +-
 .../src/core/NavigationHeader/index.tsx       |  31 ++--
 .../src/core/NavigationHeader/style.ts        |  72 +++++++++
 .../__snapshots__/index.test.tsx.snap         |   7 +-
 .../__snapshots__/index.test.tsx.snap         |   9 +-
 .../__snapshots__/index.test.tsx.snap         |   7 +-
 18 files changed, 424 insertions(+), 159 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 01fde1826..cee20836f 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,14 +1,163 @@
 import CssBaseline from "@mui/material/CssBaseline";
-import { Theme } from "../packages/components/src/core/styles";
-import { ThemeProvider } from "@mui/material/styles";
+import {
+  makeThemeOptions,
+  Theme,
+} from "../packages/components/src/core/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { BADGE } from "../packages/components/src/common/storybook/storybookBadges";
+import { makeSdsSemanticAppTheme } from "@czi-sds/components";
 
 export const decorators = [
   (Story, context) => {
     const { theme: storybookTheme } = context.globals;
 
+    // Temporary
+
+    const LightColors = {
+      blue: {
+        100: "#f23",
+        200: "#f23",
+        300: "#f23",
+        400: "#f23",
+        500: "#f23",
+        600: "#f23",
+        700: "#f23",
+        800: "#f23",
+      },
+      gray: {
+        100: "#f3f3f3",
+        200: "#dfdfdf",
+        300: "#c3c3c3",
+        400: "#a5a5a5",
+        50: "#ffffff",
+        500: "#969696",
+        600: "#6c6c6c",
+        700: "#3b3b3b",
+        75: "#fafafa",
+        800: "#1b1b1b",
+        900: "#000000",
+      },
+      green: {
+        100: "#daf4de",
+        200: "#b9ecc3",
+        300: "#7fd693",
+        400: "#50b96d",
+        500: "#238444",
+        600: "#105b2b",
+        700: "#07431d",
+        800: "#001f00",
+      },
+      purple: {
+        100: "#efeafe",
+        200: "#e4dbfc",
+        300: "#cbbaF8",
+        400: "#b296f2",
+        500: "#8b54e2",
+        600: "#6526b5",
+        700: "#490092",
+        800: "#26004c",
+      },
+      red: {
+        100: "#ffe8e6",
+        200: "#ffd6d2",
+        300: "#ffafa8",
+        400: "#ff7e78",
+        500: "#db2131",
+        600: "#980017",
+        700: "#6f0008",
+        800: "#340000",
+      },
+      yellow: {
+        100: "#fff3db",
+        200: "#ffdb97",
+        300: "#ffca5c",
+        400: "#fab700",
+        500: "#da9900",
+        600: "#b07300",
+        700: "#7c3e00",
+        800: "#541700",
+      },
+    };
+
+    const DarkColors = {
+      blue: {
+        100: "#f85",
+        200: "#f85",
+        300: "#f85",
+        400: "#f85",
+        500: "#f85",
+        600: "#f85",
+        700: "#f85",
+        800: "#f85",
+      },
+      gray: {
+        100: "#333333",
+        200: "#494949",
+        300: "#696969",
+        400: "#9b9b9b",
+        50: "#000000",
+        500: "#aaaaaa",
+        600: "#cdcdcd",
+        700: "#ededed",
+        75: "#101010",
+        800: "#fafafa",
+        900: "#ffffff",
+      },
+      green: {
+        100: "#082608",
+        200: "#063617",
+        300: "#10632e",
+        400: "#278b48",
+        500: "#4bae68",
+        600: "#85d898",
+        700: "#bcecc5",
+        800: "#daf4de",
+      },
+      purple: {
+        100: "#331252",
+        200: "#410f70",
+        300: "#6429b2",
+        400: "#905de6",
+        500: "#aa89ef",
+        600: "#cebef8",
+        700: "#e4dcfc",
+        800: "#f0ebfe",
+      },
+      red: {
+        100: "#330603",
+        200: "#660a12",
+        300: "#9e1c1c",
+        400: "#c73028",
+        500: "#e05043",
+        600: "#ff988a",
+        700: "#ffbdb3",
+        800: "#ffd8d1",
+      },
+      yellow: {
+        100: "#361b07",
+        200: "#52270a",
+        300: "#965a0b",
+        400: "#bd8804",
+        500: "#d9a943",
+        600: "#e5bc63",
+        700: "#f5d789",
+        800: "#ffe6a8",
+      },
+    };
+
+    const semanticAppTheme = makeSdsSemanticAppTheme(
+      storybookTheme === "light" ? LightColors : DarkColors
+    );
+    const themeOptions = makeThemeOptions(semanticAppTheme, storybookTheme);
+    const theme = createTheme(themeOptions, {
+      cssVariables: true,
+    });
+
+    // Temporary
+
     return (
       <ThemeProvider theme={Theme(storybookTheme)}>
+        {/* <ThemeProvider theme={theme}> */}
         {/* CssBaseline provides light/dark background MUI theme for all stories */}
         <CssBaseline />
         <Story />
diff --git a/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
index 5f88cc1c9..177bce31e 100644
--- a/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,16 +6,16 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
 >
   <div>
     <label
-      class="css-nnobme"
+      class="css-l5xdrx"
       for="location-search"
     >
       Search by label
     </label>
     <div
-      class="MuiFormControl-root MuiTextField-root css-19wipnm-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiTextField-root css-y1vhlm-MuiFormControl-root-MuiTextField-root"
     >
       <div
-        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-j8s0r8-MuiInputBase-root-MuiOutlinedInput-root"
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-2ehmn7-MuiInputBase-root-MuiOutlinedInput-root"
         inputmode="text"
       >
         <div
@@ -28,7 +28,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
           </span>
           <button
             aria-label="search-button"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-11r3dtg-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-3px3eh-MuiButtonBase-root-MuiIconButton-root"
             icon="Search"
             tabindex="0"
             type="button"
@@ -38,7 +38,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-m01104-MuiSvgIcon-root"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
                 data-file-name="IconSearchSmall"
                 data-testid="IconSearchSmall"
                 fillcontrast="white"
@@ -48,12 +48,15 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                 width="16"
               />
             </div>
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            />
           </button>
         </div>
         <input
           aria-invalid="false"
           autocomplete="one-time-code"
-          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-1ri1tzt-MuiInputBase-input-MuiOutlinedInput-input"
+          class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-16slxrv-MuiInputBase-input-MuiOutlinedInput-input"
           id="location-search"
           placeholder="Search by label"
           type="search"
@@ -63,7 +66,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
           class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1is7ehy-MuiInputAdornment-root"
         >
           <p
-            class="MuiTypography-root MuiTypography-body1 css-1yd4bi3-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
           />
         </div>
         <fieldset
@@ -130,7 +133,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
               class="css-tiqrog"
             >
               <label
-                class="css-nnobme"
+                class="css-l5xdrx"
                 for="location-search"
               >
                 Search by label
@@ -138,12 +141,12 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
               <div
                 aria-hidden="true"
                 aria-label="Search Input"
-                class="MuiFormControl-root MuiTextField-root css-kf5fho-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiTextField-root css-n4omgz-MuiFormControl-root-MuiTextField-root"
                 tabindex="-1"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-j8s0r8-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-2ehmn7-MuiInputBase-root-MuiOutlinedInput-root"
                   inputmode="none"
                 >
                   <div
@@ -157,7 +160,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                     <button
                       aria-hidden="true"
                       aria-label="Search Button"
-                      class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-1xb7fzi-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-l19ret-MuiButtonBase-root-MuiIconButton-root"
                       disabled=""
                       icon="Search"
                       tabindex="-1"
@@ -168,7 +171,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                       >
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-m01104-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
                           data-file-name="IconSearchSmall"
                           data-testid="IconSearchSmall"
                           fillcontrast="white"
@@ -187,7 +190,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1ri1tzt-MuiInputBase-input-MuiOutlinedInput-input"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-16slxrv-MuiInputBase-input-MuiOutlinedInput-input"
                     disabled=""
                     id="autocomplete-demo"
                     placeholder="Search by label"
@@ -200,7 +203,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                     class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1is7ehy-MuiInputAdornment-root"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-1yd4bi3-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
                     />
                   </div>
                   <fieldset
@@ -545,7 +548,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
               class="css-tiqrog"
             >
               <label
-                class="css-nnobme"
+                class="css-l5xdrx"
                 for="location-search"
               >
                 Search by label
@@ -553,12 +556,12 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
               <div
                 aria-hidden="true"
                 aria-label="Search Input"
-                class="MuiFormControl-root MuiTextField-root css-kf5fho-MuiFormControl-root-MuiTextField-root"
+                class="MuiFormControl-root MuiTextField-root css-n4omgz-MuiFormControl-root-MuiTextField-root"
                 tabindex="-1"
               >
                 <div
                   aria-hidden="true"
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-j8s0r8-MuiInputBase-root-MuiOutlinedInput-root"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-2ehmn7-MuiInputBase-root-MuiOutlinedInput-root"
                   inputmode="none"
                 >
                   <div
@@ -572,7 +575,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                     <button
                       aria-hidden="true"
                       aria-label="Search Button"
-                      class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-1xb7fzi-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-l19ret-MuiButtonBase-root-MuiIconButton-root"
                       disabled=""
                       icon="Search"
                       tabindex="-1"
@@ -583,7 +586,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                       >
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-m01104-MuiSvgIcon-root"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
                           data-file-name="IconSearchSmall"
                           data-testid="IconSearchSmall"
                           fillcontrast="white"
@@ -602,7 +605,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                     aria-invalid="false"
                     autocapitalize="none"
                     autocomplete="off"
-                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1ri1tzt-MuiInputBase-input-MuiOutlinedInput-input"
+                    class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-16slxrv-MuiInputBase-input-MuiOutlinedInput-input"
                     disabled=""
                     id="autocomplete-demo"
                     placeholder="Search by label"
@@ -615,7 +618,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                     class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1is7ehy-MuiInputAdornment-root"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body1 css-1yd4bi3-MuiTypography-root"
+                      class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
                     />
                   </div>
                   <fieldset
@@ -971,7 +974,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
       class="css-1oteowz"
     >
       <label
-        class="css-nnobme"
+        class="css-l5xdrx"
         for="location-search"
       >
         Search by label
@@ -979,12 +982,12 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
       <div
         aria-hidden="false"
         aria-label="Search Input"
-        class="MuiFormControl-root MuiTextField-root css-10rgqbk-MuiFormControl-root-MuiTextField-root"
+        class="MuiFormControl-root MuiTextField-root css-gl2zcs-MuiFormControl-root-MuiTextField-root"
         tabindex="0"
       >
         <div
           aria-hidden="false"
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-j8s0r8-MuiInputBase-root-MuiOutlinedInput-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-2ehmn7-MuiInputBase-root-MuiOutlinedInput-root"
           inputmode="text"
         >
           <div
@@ -998,7 +1001,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
             <button
               aria-hidden="false"
               aria-label="Search Button"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-11r3dtg-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-3px3eh-MuiButtonBase-root-MuiIconButton-root"
               icon="Search"
               tabindex="0"
               type="button"
@@ -1008,7 +1011,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-m01104-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
                   data-file-name="IconSearchSmall"
                   data-testid="IconSearchSmall"
                   fillcontrast="white"
@@ -1018,6 +1021,9 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
                   width="16"
                 />
               </div>
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
             </button>
           </div>
           <input
@@ -1026,7 +1032,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
             aria-invalid="false"
             autocapitalize="none"
             autocomplete="off"
-            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1ri1tzt-MuiInputBase-input-MuiOutlinedInput-input"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-16slxrv-MuiInputBase-input-MuiOutlinedInput-input"
             id="autocomplete-demo"
             placeholder="Search by label"
             role="combobox"
@@ -1038,7 +1044,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
             class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1is7ehy-MuiInputAdornment-root"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 css-1yd4bi3-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-1pnmrwp-MuiTypography-root"
             />
           </div>
           <fieldset
diff --git a/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap b/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap
index 9fb57e7be..c07aab37e 100644
--- a/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap
+++ b/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
   </div>
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-p50dty-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-f0g2hw-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -41,7 +41,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-m01104-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconXMarkSmall"
         data-testid="IconXMarkSmall"
         fillcontrast="white"
@@ -51,6 +51,9 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
         width="16"
       />
     </div>
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
 </div>
 `;
diff --git a/packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap
index 7c031bb18..40921c198 100644
--- a/packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,12 +2,15 @@
 
 exports[`<button /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-19167ln-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1qrgpku-MuiButtonBase-root-MuiButton-root"
   icon="Cube"
   tabindex="0"
   text="Label"
   type="button"
 >
   Label
+  <span
+    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+  />
 </button>
 `;
diff --git a/packages/components/src/core/Button/index.tsx b/packages/components/src/core/Button/index.tsx
index 5632a2897..ca98119c7 100644
--- a/packages/components/src/core/Button/index.tsx
+++ b/packages/components/src/core/Button/index.tsx
@@ -1,8 +1,4 @@
-import {
-  ButtonProps as RawButtonProps,
-  ThemeProvider,
-  useTheme,
-} from "@mui/material";
+import { ButtonProps as RawButtonProps } from "@mui/material";
 import React, { ForwardedRef } from "react";
 import {
   SDSWarningTypes,
@@ -12,7 +8,6 @@ import { StyledButton, StyledButtonLegacy, StyledMinimalButton } from "./style";
 import ButtonIcon from "../ButtonIcon";
 import { IconNameToSizes, IconProps } from "../Icon";
 import { filterProps } from "src/common/utils";
-import { Theme } from "../styles";
 
 type ButtonType = "primary" | "secondary" | "tertiary" | "destructive";
 
@@ -26,7 +21,6 @@ type ButtonTypeMap = {
 type ButtonSize = "small" | "medium" | "large";
 
 interface BaseButtonProps {
-  customTheme?: "light" | "dark" | "auto";
   children?: React.ReactNode;
   isAllCaps?: boolean;
 }
@@ -77,11 +71,7 @@ const Button = React.forwardRef(
     props: ButtonProps,
     ref: ForwardedRef<HTMLButtonElement>
   ): JSX.Element | null => {
-    const { sdsStyle = "square", sdsType, customTheme = "auto" } = props;
-
-    const muiTheme = useTheme();
-    const mode = muiTheme?.palette?.mode || "light";
-    const componentTheme = customTheme !== "auto" ? customTheme : mode;
+    const { sdsStyle = "square", sdsType } = props;
 
     if (!sdsStyle || !sdsType) {
       showWarningIfFirstOccurence(SDSWarningTypes.ButtonMissingSDSProps);
@@ -118,14 +108,12 @@ const Button = React.forwardRef(
           const finalProps = filterProps(propsWithDefault, excludedProps);
 
           return (
-            <ThemeProvider theme={Theme(componentTheme)}>
-              <ButtonIcon
-                icon={iconProps?.icon}
-                {...finalProps}
-                sdsType={sdsType as Exclude<ButtonType, "destructive">}
-                ref={ref}
-              />
-            </ThemeProvider>
+            <ButtonIcon
+              icon={iconProps?.icon}
+              {...finalProps}
+              sdsType={sdsType as Exclude<ButtonType, "destructive">}
+              ref={ref}
+            />
           );
         } else {
           showWarningIfFirstOccurence(
@@ -137,36 +125,28 @@ const Button = React.forwardRef(
 
       case sdsStyle === "minimal":
         return (
-          <ThemeProvider theme={Theme(componentTheme)}>
-            <StyledMinimalButton
-              color="primary"
-              variant="text"
-              {...propsWithDefault}
-              ref={ref}
-              data-style={sdsStyle}
-            />
-          </ThemeProvider>
+          <StyledMinimalButton
+            color="primary"
+            variant="text"
+            {...propsWithDefault}
+            ref={ref}
+            data-style={sdsStyle}
+          />
         );
 
       case sdsStyle === "rounded":
       case sdsStyle === "square":
         return (
-          <ThemeProvider theme={Theme(componentTheme)}>
-            <StyledButton
-              color="primary"
-              variant={sdsType ? MUI_VARIANT_MAP[sdsType] : "text"}
-              {...propsWithDefault}
-              ref={ref}
-            />
-          </ThemeProvider>
+          <StyledButton
+            color="primary"
+            variant={sdsType ? MUI_VARIANT_MAP[sdsType] : "text"}
+            {...propsWithDefault}
+            ref={ref}
+          />
         );
 
       default:
-        return (
-          <ThemeProvider theme={Theme(componentTheme)}>
-            <StyledButtonLegacy {...propsWithDefault} ref={ref} />
-          </ThemeProvider>
-        );
+        return <StyledButtonLegacy {...propsWithDefault} ref={ref} />;
     }
   }
 );
diff --git a/packages/components/src/core/ButtonDropdown/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ButtonDropdown/__tests__/__snapshots__/index.test.tsx.snap
index 31f853cf8..ea637e1cd 100644
--- a/packages/components/src/core/ButtonDropdown/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/ButtonDropdown/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1xvf0xn-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1cs60p5-MuiButtonBase-root-MuiButton-root"
   icon="Download"
   tabindex="0"
   type="button"
@@ -15,7 +15,7 @@ exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-18ki404-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconDownloadLarge"
         data-testid="IconDownloadLarge"
         fillcontrast="white"
@@ -35,7 +35,7 @@ exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-d0pkyw-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconChevronDownSmall"
         data-testid="IconChevronDownSmall"
         fillcontrast="white"
@@ -46,5 +46,8 @@ exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
       />
     </div>
   </span>
+  <span
+    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+  />
 </button>
 `;
diff --git a/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap
index ed30bdb74..54230ad14 100644
--- a/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/ComplexFilter/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
 >
   <button
     aria-label="Dropdown input"
-    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-e5aiuf-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-yhozbn-MuiButtonBase-root-MuiButton-root"
     label="Click Target"
     tabindex="0"
     type="button"
@@ -15,7 +15,7 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
       class="css-ae1gg6"
     >
       <span
-        class="styled-label css-bnltsj"
+        class="styled-label css-1ubkbz8"
       >
         Click Target
       </span>
@@ -27,7 +27,7 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-d0pkyw-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
             data-file-name="IconChevronDownSmall"
             data-testid="IconChevronDownSmall"
             fillcontrast="white"
@@ -40,7 +40,10 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
       </span>
     </span>
     <div
-      class="css-1c29ot9"
+      class="css-fty5ct"
+    />
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
     />
   </button>
   <div
diff --git a/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
index 52d277d06..c7bc4700d 100644
--- a/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,13 +2,16 @@
 
 exports[`<Dialog /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-b80hde-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-jrswey-MuiButtonBase-root-MuiButton-root"
   data-style="minimal"
   tabindex="0"
   type="button"
 >
   Open 
   m
+  <span
+    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+  />
 </button>
 `;
 
@@ -20,7 +23,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-fwkm3g-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1y737h3-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -30,7 +33,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-m01104-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconXMarkSmall"
         data-testid="IconXMarkSmall"
         fillcontrast="white"
@@ -40,6 +43,9 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
         width="16"
       />
     </div>
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
   <p
     class="MuiTypography-root MuiTypography-body1 css-1qnp4ei-MuiTypography-root"
@@ -74,18 +80,24 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 3`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-ke1fod-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-t1g6nd-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
     Secondary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-p61vfz-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1cs60p5-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
     Primary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
 </div>
 `;
@@ -98,7 +110,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-slrckh-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-eu9ld9-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -108,7 +120,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-zwwmfn-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconXMarkLarge"
         data-testid="IconXMarkLarge"
         fillcontrast="white"
@@ -118,6 +130,9 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
         width="24"
       />
     </div>
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
   <p
     class="MuiTypography-root MuiTypography-body1 css-1qnp4ei-MuiTypography-root"
@@ -152,18 +167,24 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 6`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-ke1fod-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-t1g6nd-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
     Secondary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-p61vfz-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1cs60p5-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
     Primary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
 </div>
 `;
@@ -176,7 +197,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-182od9f-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-48ut0w-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -186,7 +207,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-18ki404-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconXMarkLarge"
         data-testid="IconXMarkLarge"
         fillcontrast="white"
@@ -196,6 +217,9 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
         width="24"
       />
     </div>
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
   <p
     class="MuiTypography-root MuiTypography-body1 css-1qnp4ei-MuiTypography-root"
@@ -230,18 +254,24 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 9`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-ke1fod-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-t1g6nd-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
     Secondary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-p61vfz-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1cs60p5-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
     Primary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
 </div>
 `;
@@ -254,7 +284,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-182od9f-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-48ut0w-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -264,7 +294,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-18ki404-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
         data-file-name="IconXMarkLarge"
         data-testid="IconXMarkLarge"
         fillcontrast="white"
@@ -274,6 +304,9 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
         width="24"
       />
     </div>
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
   <p
     class="MuiTypography-root MuiTypography-body1 css-1qnp4ei-MuiTypography-root"
@@ -308,18 +341,24 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 12`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-ke1fod-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-t1g6nd-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
     Secondary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-p61vfz-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1cs60p5-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
     Primary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
 </div>
 `;
@@ -330,18 +369,24 @@ exports[`<Dialog /> renders Dialog left positioned buttons 1`] = `
   data-testid="dialog-actions"
 >
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-p61vfz-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1cs60p5-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
     Primary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-ke1fod-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-colorPrimary css-t1g6nd-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
     Secondary Action
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
 </div>
 `;
diff --git a/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap
index d1034b1fc..1f31fa2c6 100644
--- a/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Dropdown /> Default story renders snapshot 1`] = `
 <button
   aria-label="Dropdown input"
-  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-e5aiuf-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-yhozbn-MuiButtonBase-root-MuiButton-root"
   label="Click Target"
   tabindex="0"
   type="button"
@@ -12,7 +12,7 @@ exports[`<Dropdown /> Default story renders snapshot 1`] = `
     class="css-ae1gg6"
   >
     <span
-      class="styled-label css-bnltsj"
+      class="styled-label css-1ubkbz8"
     >
       Click Target
     </span>
@@ -24,7 +24,7 @@ exports[`<Dropdown /> Default story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-d0pkyw-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconChevronDownSmall"
           data-testid="IconChevronDownSmall"
           fillcontrast="white"
@@ -37,7 +37,10 @@ exports[`<Dropdown /> Default story renders snapshot 1`] = `
     </span>
   </span>
   <div
-    class="css-1c29ot9"
+    class="css-fty5ct"
+  />
+  <span
+    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
   />
 </button>
 `;
@@ -45,7 +48,7 @@ exports[`<Dropdown /> Default story renders snapshot 1`] = `
 exports[`<Dropdown /> MultiColumnWithButtons story renders snapshot 1`] = `
 <button
   aria-label="Dropdown input"
-  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-e5aiuf-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-yhozbn-MuiButtonBase-root-MuiButton-root"
   label="Click Target"
   tabindex="0"
   type="button"
@@ -54,7 +57,7 @@ exports[`<Dropdown /> MultiColumnWithButtons story renders snapshot 1`] = `
     class="css-ae1gg6"
   >
     <span
-      class="styled-label css-bnltsj"
+      class="styled-label css-1ubkbz8"
     >
       Click Target
     </span>
@@ -66,7 +69,7 @@ exports[`<Dropdown /> MultiColumnWithButtons story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-d0pkyw-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconChevronDownSmall"
           data-testid="IconChevronDownSmall"
           fillcontrast="white"
@@ -79,7 +82,10 @@ exports[`<Dropdown /> MultiColumnWithButtons story renders snapshot 1`] = `
     </span>
   </span>
   <div
-    class="css-1c29ot9"
+    class="css-fty5ct"
+  />
+  <span
+    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
   />
 </button>
 `;
diff --git a/packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap
index 5c2ff5c9c..88b08a2c1 100644
--- a/packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/InputDropdown/__tests__/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<InputDropdown /> Default story renders snapshot 1`] = `
 <div>
   <button
     aria-label="Dropdown input"
-    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-pwfnai-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-gddzz1-MuiButtonBase-root-MuiButton-root"
     data-testid="InputDropdown"
     label="Label"
     tabindex="0"
@@ -14,7 +14,7 @@ exports[`<InputDropdown /> Default story renders snapshot 1`] = `
       class="css-18dv0oe"
     >
       <span
-        class="styled-label css-bnltsj"
+        class="styled-label css-1ubkbz8"
       >
         Label
       </span>
@@ -26,7 +26,7 @@ exports[`<InputDropdown /> Default story renders snapshot 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-d0pkyw-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
             data-file-name="IconChevronDownSmall"
             data-testid="IconChevronDownSmall"
             fillcontrast="white"
@@ -38,6 +38,9 @@ exports[`<InputDropdown /> Default story renders snapshot 1`] = `
         </div>
       </span>
     </span>
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
   </button>
 </div>
 `;
diff --git a/packages/components/src/core/InputSearch/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputSearch/__tests__/__snapshots__/index.test.tsx.snap
index 626efebeb..1b604ded8 100644
--- a/packages/components/src/core/InputSearch/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/InputSearch/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<InputSearch /> Default story renders snapshot 1`] = `
 <label
-  class="css-nnobme"
+  class="css-l5xdrx"
   for="Test"
 >
   Search
diff --git a/packages/components/src/core/InputSearch/index.tsx b/packages/components/src/core/InputSearch/index.tsx
index e3ba96d00..52683cff2 100644
--- a/packages/components/src/core/InputSearch/index.tsx
+++ b/packages/components/src/core/InputSearch/index.tsx
@@ -1,8 +1,4 @@
-import {
-  TextFieldProps as RawTextFieldSearchProps,
-  ThemeProvider,
-  useTheme,
-} from "@mui/material";
+import { TextFieldProps as RawTextFieldSearchProps } from "@mui/material";
 import React, { forwardRef, useRef, useState } from "react";
 import Button from "src/core/Button";
 import {
@@ -12,7 +8,6 @@ import {
   StyledSearchBase,
 } from "./style";
 import useDetectUserTabbing from "src/common/helpers/userTabbing";
-import { Theme } from "../styles";
 
 export interface AccessibleInputSearchProps {
   label: string;
@@ -41,14 +36,9 @@ const InputSearch = forwardRef<HTMLDivElement, InputSearchProps>(
       handleSubmit,
       onChange,
       disabled,
-      customTheme = "auto",
       ...rest
     } = props;
 
-    const muiTheme = useTheme();
-    const mode = muiTheme?.palette?.mode || "light";
-    const componentTheme = customTheme !== "auto" ? customTheme : mode;
-
     /**
      * (masoudmanson): In case that the ref is not provided, we will create a new one.
      */
@@ -109,7 +99,7 @@ const InputSearch = forwardRef<HTMLDivElement, InputSearchProps>(
     }
 
     return (
-      <ThemeProvider theme={Theme(componentTheme)}>
+      <>
         <StyledLabel htmlFor={id}>{label}</StyledLabel>
         <StyledSearchBase
           id={id}
@@ -161,7 +151,7 @@ const InputSearch = forwardRef<HTMLDivElement, InputSearchProps>(
           autoComplete="one-time-code"
           {...rest}
         />
-      </ThemeProvider>
+      </>
     );
   }
 );
diff --git a/packages/components/src/core/NavigationHeader/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/NavigationHeader/__tests__/__snapshots__/index.test.tsx.snap
index d54dcb642..e2be68f2f 100644
--- a/packages/components/src/core/NavigationHeader/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/NavigationHeader/__tests__/__snapshots__/index.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`<NavigationHeder /> Default story renders snapshot 1`] = `
         </div>
       </a>
       <button
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-pzgwa3-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1xn5g0w-MuiButtonBase-root-MuiIconButton-root"
         icon="XMark"
         tabindex="0"
         type="button"
@@ -49,7 +49,7 @@ exports[`<NavigationHeder /> Default story renders snapshot 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-18ki404-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
             data-file-name="IconXMarkLarge"
             data-testid="IconXMarkLarge"
             fillcontrast="white"
@@ -59,6 +59,9 @@ exports[`<NavigationHeder /> Default story renders snapshot 1`] = `
             width="24"
           />
         </div>
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
       </button>
     </div>
   </header>
@@ -105,7 +108,7 @@ exports[`<NavigationHeder /> matches the snapshot 1`] = `
           </div>
         </a>
         <button
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-pzgwa3-MuiButtonBase-root-MuiIconButton-root"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1xn5g0w-MuiButtonBase-root-MuiIconButton-root"
           icon="XMark"
           tabindex="0"
           type="button"
@@ -115,7 +118,7 @@ exports[`<NavigationHeder /> matches the snapshot 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-18ki404-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
               data-file-name="IconXMarkLarge"
               data-testid="IconXMarkLarge"
               fillcontrast="white"
@@ -125,6 +128,9 @@ exports[`<NavigationHeder /> matches the snapshot 1`] = `
               width="24"
             />
           </div>
+          <span
+            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+          />
         </button>
       </div>
     </header>
diff --git a/packages/components/src/core/NavigationHeader/index.tsx b/packages/components/src/core/NavigationHeader/index.tsx
index 7da0a183e..60e48c4f4 100644
--- a/packages/components/src/core/NavigationHeader/index.tsx
+++ b/packages/components/src/core/NavigationHeader/index.tsx
@@ -17,6 +17,7 @@ import {
   StyledLogoLinkWrapper,
   StyledLogoWrapper,
   StyledNarrowButton,
+  StyledNarrowIconButton,
   StyledPrimaryNavContainer,
   StyledSearch,
   StyledShadowCoverElement,
@@ -24,6 +25,7 @@ import {
   StyledTag,
   StyledTitleContainer,
   StyledToolbar,
+  StyledWideIconButton,
 } from "./style";
 import NavigationHeaderPrimaryNav, {
   NavigationHeaderPrimaryNavItem,
@@ -32,7 +34,7 @@ import { InputSearchProps } from "../InputSearch";
 import NavigationHeaderSecondaryNav, {
   NavigationHeaderSecondaryNavItem,
 } from "./components/NavigationHeaderSecondaryNav";
-import Button, {
+import {
   SdsProps,
   ButtonProps,
   SdsButtonProps,
@@ -58,7 +60,7 @@ export interface NavigationHeaderProps<T extends string = string> {
   title: string;
 }
 
-type IconButtonProps = SdsIconButtonProps & { children: string };
+export type IconButtonProps = SdsIconButtonProps & { children?: string };
 
 const NavigationHeader = forwardRef<HTMLDivElement, NavigationHeaderProps>(
   <T extends string = string>(
@@ -85,7 +87,6 @@ const NavigationHeader = forwardRef<HTMLDivElement, NavigationHeaderProps>(
     const navRef = useRef<HTMLDivElement>(null);
 
     const theme = useTheme();
-    const mode = theme?.palette?.mode || "light";
     const isMdScreen = useMediaQuery(theme.breakpoints.down("md"));
 
     useEffect(() => {
@@ -130,9 +131,6 @@ const NavigationHeader = forwardRef<HTMLDivElement, NavigationHeaderProps>(
             label="Search"
             placeholder="Search"
             sdsStyle="rounded"
-            customTheme={
-              hasInvertedStyle ? (mode === "light" ? "dark" : "light") : "auto"
-            }
             hasInvertedStyle={hasInvertedStyle}
             isNarrow={isNarrow}
             {...searchProps}
@@ -230,35 +228,31 @@ const NavigationHeader = forwardRef<HTMLDivElement, NavigationHeaderProps>(
       key: string,
       fullWidth: { width: string } | undefined
     ) => (
-      <Button
+      <StyledNarrowIconButton
         key={key}
         sx={fullWidth}
         sdsStyle="minimal"
         sdsType="secondary"
         isAllCaps={false}
         startIcon={<Icon sdsSize="s" sdsIcon="Person" />}
-        customTheme={
-          hasInvertedStyle ? (mode === "light" ? "dark" : "light") : "auto"
-        }
+        hasInvertedStyle={hasInvertedStyle}
       >
         {buttonProps.children}
-      </Button>
+      </StyledNarrowIconButton>
     );
 
     const renderWideIconButton = (
       buttonProps: IconButtonProps,
       key: string
     ) => (
-      <Button
+      <StyledWideIconButton
         key={key}
         sdsIconProps={{ sdsSize: "l" }}
         sdsStyle="icon"
         sdsType="secondary"
         icon={buttonProps.icon}
         aria-label={String(buttonProps.children)}
-        customTheme={
-          hasInvertedStyle ? (mode === "light" ? "dark" : "light") : "auto"
-        }
+        hasInvertedStyle={hasInvertedStyle}
       />
     );
 
@@ -318,13 +312,6 @@ const NavigationHeader = forwardRef<HTMLDivElement, NavigationHeaderProps>(
               sdsStyle="icon"
               icon={drawerOpen ? "XMark" : "LinesHorizontal3"}
               onClick={() => setDrawerOpen((prev) => !prev)}
-              customTheme={
-                hasInvertedStyle
-                  ? mode === "light"
-                    ? "dark"
-                    : "light"
-                  : "auto"
-              }
             />
           )}
         </StyledToolbar>
diff --git a/packages/components/src/core/NavigationHeader/style.ts b/packages/components/src/core/NavigationHeader/style.ts
index 9e7924398..8165d39e1 100644
--- a/packages/components/src/core/NavigationHeader/style.ts
+++ b/packages/components/src/core/NavigationHeader/style.ts
@@ -14,6 +14,7 @@ import styled from "@emotion/styled";
 import Link from "../Link";
 import Button, { SdsButtonProps, SdsMinimalButtonProps } from "../Button";
 import { SerializedStyles } from "@emotion/react";
+import { IconButtonProps } from ".";
 
 export interface ExtraHeaderProps extends CommonThemeProps {
   hasInvertedStyle?: boolean;
@@ -137,6 +138,74 @@ export const StyledHeaderButton = styled(Button)<
   }}
 `;
 
+const invertedNarrowButtonStyles = (
+  props: ExtraButtonProps & (SdsMinimalButtonProps | SdsButtonProps)
+): SerializedStyles => {
+  const semanticColors = getSemanticColors(props);
+
+  return css`
+    color: ${semanticColors?.base?.textPrimaryInverse};
+    svg {
+      fill: ${semanticColors?.base?.ornamentPrimaryInverse};
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:focus-within {
+      color: ${semanticColors?.base?.textPrimaryInverse};
+      svg {
+        fill: ${semanticColors?.base?.ornamentPrimaryInverse};
+      }
+    }
+  `;
+};
+
+export const StyledNarrowIconButton = styled(Button)<
+  ExtraButtonProps & (SdsMinimalButtonProps | SdsButtonProps)
+>`
+  ${(props) => {
+    const { hasInvertedStyle } = props;
+
+    return css`
+      ${hasInvertedStyle && invertedNarrowButtonStyles(props)}
+    `;
+  }}
+`;
+
+const invertedWideButtonStyles = (
+  props: ExtraButtonProps & IconButtonProps
+): SerializedStyles => {
+  const semanticColors = getSemanticColors(props);
+
+  return css`
+    svg {
+      fill: ${semanticColors?.base?.ornamentSecondaryInverse};
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:focus-within {
+      svg {
+        fill: ${semanticColors?.base?.ornamentPrimaryInverse};
+      }
+    }
+  `;
+};
+
+export const StyledWideIconButton = styled(Button)<
+  ExtraButtonProps & IconButtonProps
+>`
+  ${(props) => {
+    const { hasInvertedStyle } = props;
+
+    return css`
+      ${hasInvertedStyle && invertedWideButtonStyles(props)}
+    `;
+  }}
+`;
+
 export const StyledLogoLinkWrapper = styled(Link, {
   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
 })`
@@ -271,6 +340,9 @@ export const StyledSearch = styled(InputSearch, {
       max-width: ${isNarrow ? "100%" : "320px"};
       padding: ${isNarrow ? `${spaces?.m}px ${spaces?.xl}px` : ""};
       .MuiInputBase-root {
+        color: ${hasInvertedStyle
+          ? semanticColors?.base.textPrimaryInverse
+          : semanticColors?.base.textPrimary};
         fieldset {
           border-color: ${hasInvertedStyle
             ? semanticColors?.base?.borderInverse
diff --git a/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap
index a94390d43..b643b0344 100644
--- a/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`<Pagination /> Default story renders snapshot 1`] = `
   >
     <button
       aria-label="Go to a page"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1fenqgv-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1br45xa-MuiButtonBase-root-MuiIconButton-root"
       icon="DotsHorizontal"
       tabindex="0"
       type="button"
@@ -71,7 +71,7 @@ exports[`<Pagination /> Default story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-m01104-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconDotsHorizontal3Small"
           data-testid="IconDotsHorizontal3Small"
           fillcontrast="white"
@@ -81,6 +81,9 @@ exports[`<Pagination /> Default story renders snapshot 1`] = `
           width="16"
         />
       </div>
+      <span
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+      />
     </button>
   </li>
   <li
diff --git a/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
index 77c1240f5..a278a7678 100644
--- a/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<TagFilter /> Default story renders snapshot 1`] = `
 >
   <div>
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1qw7xjs-MuiButtonBase-root-MuiButton-root"
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1ys8luo-MuiButtonBase-root-MuiButton-root"
       data-style="minimal"
       disabled=""
       tabindex="-1"
@@ -28,7 +28,7 @@ exports[`<TagFilter /> Default story renders snapshot 1`] = `
       </span>
       <button
         aria-label="Delete Tag"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiChip-deleteIcon MuiChip-deleteIconMedium MuiChip-deleteIconColorPrimary MuiChip-deleteIconFilledColorPrimary css-11r3dtg-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiChip-deleteIcon MuiChip-deleteIconMedium MuiChip-deleteIconColorPrimary MuiChip-deleteIconFilledColorPrimary css-3px3eh-MuiButtonBase-root-MuiIconButton-root"
         icon="XMark"
         tabindex="0"
         type="button"
@@ -38,7 +38,7 @@ exports[`<TagFilter /> Default story renders snapshot 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-m01104-MuiSvgIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
             data-file-name="IconXMarkSmall"
             data-testid="IconXMarkSmall"
             fillcontrast="white"
@@ -48,6 +48,9 @@ exports[`<TagFilter /> Default story renders snapshot 1`] = `
             width="16"
           />
         </div>
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
       </button>
     </div>
   </div>
diff --git a/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap
index cfc4298f1..94fe7d814 100644
--- a/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`<Tooltip /> Default story renders snapshot 1`] = `
   >
     <button
       aria-label="tooltip test button"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1epwecz-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1sh3t66-MuiButtonBase-root-MuiIconButton-root"
       data-mui-internal-clone-element="true"
       icon="ExclamationMarkCircle"
       tabindex="0"
@@ -22,7 +22,7 @@ exports[`<Tooltip /> Default story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-18ki404-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-bgw7zo-MuiSvgIcon-root"
           data-file-name="IconExclamationMarkCircleLarge"
           data-testid="IconExclamationMarkCircleLarge"
           fillcontrast="white"
@@ -32,6 +32,9 @@ exports[`<Tooltip /> Default story renders snapshot 1`] = `
           width="24"
         />
       </div>
+      <span
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+      />
     </button>
   </div>
 </div>