diff --git a/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap b/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap
index 94518221a..caad709f3 100644
--- a/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap
+++ b/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap
@@ -67,7 +67,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
           class="box custom-spending-cap__max box--margin-left-auto box--padding-right-4 box--padding-bottom-2 box--flex-direction-row box--text-align-end box--width-max"
         >
           <button
-            class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+            class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           >
             Max
           </button>
@@ -93,7 +93,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
             </span>
           </h6>
           <a
-            class="box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium box--margin-bottom-2 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+            class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--margin-bottom-2 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
             href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
             target="_blank"
           >
diff --git a/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap b/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap
index 1d259f4b9..6aafe8e2c 100644
--- a/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap
+++ b/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap
@@ -37,7 +37,7 @@ exports[`LedgerInstructionField Component rendering should render properly with
             >
               <span>
                 <button
-                  class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--text-align-left box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                  class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--text-align-left mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
                 >
                   Go to full screen to connect your Ledger.
                 </button>
diff --git a/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap b/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
index bfa567807..291e11374 100644
--- a/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
+++ b/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
@@ -37,7 +37,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
           >
             This is an advanced feature, use cautiously.
             <a
-              class="box mm-text mm-button-base customize-nonce-modal__link mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+              class="mm-box mm-text mm-button-base customize-nonce-modal__link mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               href="https://metamask.zendesk.com/hc/en-us/articles/7417499333531-How-to-customize-a-transaction-nonce"
               rel="noopener noreferrer"
               target="_blank"
@@ -61,7 +61,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
               class="mm-box mm-box--width-1/6"
             >
               <button
-                class="box mm-text mm-button-base customize-nonce-modal__reset mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                class="mm-box mm-text mm-button-base customize-nonce-modal__reset mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
                 data-testid="customize-nonce-reset"
               >
                 Reset
diff --git a/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap b/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap
index 6cf56f801..25761932d 100644
--- a/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap
+++ b/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap
@@ -32,7 +32,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
     >
       Allowing eth_sign requests can make you vulnerable to phishing attacks. Always review the URL and be careful when signing  messages that contain code.
       <a
-        class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         href="https://support.metamask.io/hc/en-us/articles/14764161421467"
         rel="noopener noreferrer"
         target="_blank"
@@ -63,7 +63,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
         type="checkbox"
       />
       <label
-        class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
+        class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
         for="eth-sign__checkbox"
       >
         <span
@@ -77,12 +77,12 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
       class="box box--margin-top-6 box--display-flex box--gap-4 box--flex-direction-row box--justify-content-space-between"
     >
       <button
-        class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
       >
         Cancel
       </button>
       <button
-        class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
         disabled=""
       >
         Continue
diff --git a/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap b/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap
index a0b725bbe..55311667a 100644
--- a/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap
+++ b/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap
@@ -80,7 +80,7 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = `
         class="box box--padding-right-5 box--padding-left-5 box--display-flex box--flex-direction-column box--align-items-flex-start box--width-full"
       >
         <label
-          class="box mm-text mm-label mm-text--body-sm mm-text--font-weight-medium box--margin-bottom-2 box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
+          class="mm-box mm-text mm-label mm-text--body-sm mm-text--font-weight-medium mm-box--margin-bottom-2 mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
         >
           Type your MetaMask password
         </label>
@@ -90,7 +90,7 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = `
         >
           <input
             autocomplete="off"
-            class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-4 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
+            class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
             focused="false"
             placeholder="Enter password"
             type="password"
@@ -110,7 +110,7 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = `
         />
         <div>
           <p
-            class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
           >
             Warning: Never disclose this key. Anyone with your private keys can steal any assets held in your account.
           </p>
@@ -120,13 +120,13 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = `
         class="box box--margin-top-3 box--padding-5 box--md:padding-5 box--display-flex box--flex-direction-row box--justify-content-space-between box--width-full"
       >
         <button
-          class="box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium box--margin-right-4 box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-1/2 box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--margin-right-4 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
           type="secondary"
         >
           Cancel
         </button>
         <button
-          class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-1/2 box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
           disabled=""
           type="primary"
         >
diff --git a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
index f2a08036e..036060648 100644
--- a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
+++ b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
@@ -63,7 +63,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
               style="top: -4px; right: -4px;"
             >
               <div
-                class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network nft-item__network-badge mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-background-default box--border-width-2 box--border-style-solid"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network nft-item__network-badge mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
                 data-testid="nft-network-badge"
               >
                 C
diff --git a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
index 7a238771b..bfc4fd66e 100644
--- a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
+++ b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
@@ -15,7 +15,7 @@ exports[`Token Cell should match snapshot 1`] = `
         class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
       >
         <div
-          class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
         >
           T
         </div>
@@ -23,7 +23,7 @@ exports[`Token Cell should match snapshot 1`] = `
           class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
         >
           <div
-            class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-muted box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
           >
             <img
               alt="Ethereum Mainnet logo"
diff --git a/ui/components/component-library/avatar-account/__snapshots__/avatar-account.test.js.snap b/ui/components/component-library/avatar-account/__snapshots__/avatar-account.test.js.snap
index 6a46eb546..667bbe8a3 100644
--- a/ui/components/component-library/avatar-account/__snapshots__/avatar-account.test.js.snap
+++ b/ui/components/component-library/avatar-account/__snapshots__/avatar-account.test.js.snap
@@ -3,7 +3,7 @@
 exports[`AvatarAccount should render correctly 1`] = `
 <div>
   <div
-    class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
+    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
     data-testid="avatar-account"
   >
     <div
diff --git a/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.tsx.snap b/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.tsx.snap
index 08ef452cd..664a525dd 100644
--- a/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.tsx.snap
+++ b/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AvatarBase should render correctly 1`] = `
 <div>
   <div
-    class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
+    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
     data-testid="avatar-base"
   />
 </div>
diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.tsx b/ui/components/component-library/avatar-base/avatar-base.stories.tsx
index 74a25c603..1a8536fcf 100644
--- a/ui/components/component-library/avatar-base/avatar-base.stories.tsx
+++ b/ui/components/component-library/avatar-base/avatar-base.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import {
   AlignItems,
@@ -9,12 +9,9 @@ import {
   IconColor,
 } from '../../../helpers/constants/design-system';
 
-import Box from '../../ui/box/box';
-
-import { Icon, IconName } from '..';
+import { AvatarBase, Icon, IconName, Box } from '..';
+import { AvatarBaseSize } from './avatar-base.types';
 import README from './README.mdx';
-import { AvatarBase } from './avatar-base';
-import { AvatarBaseProps, AvatarBaseSize } from './avatar-base.types';
 
 const marginSizeKnobOptions = [
   0,
@@ -35,7 +32,6 @@ const marginSizeKnobOptions = [
 
 export default {
   title: 'Components/ComponentLibrary/AvatarBase',
-
   component: AvatarBase,
   parameters: {
     docs: {
@@ -47,6 +43,9 @@ export default {
       control: 'select',
       options: Object.values(AvatarBaseSize),
     },
+    children: {
+      control: 'text',
+    },
     color: {
       options: Object.values(TextColor),
       control: 'select',
@@ -94,11 +93,13 @@ export default {
   },
 } as Meta<typeof AvatarBase>;
 
-export const DefaultStory = (args: AvatarBaseProps) => <AvatarBase {...args} />;
+export const DefaultStory: StoryFn<typeof AvatarBase> = (args) => (
+  <AvatarBase {...args} />
+);
 
 DefaultStory.storyName = 'Default';
 
-export const Size = (args: AvatarBaseProps) => (
+export const Size: StoryFn<typeof AvatarBase> = (args) => (
   <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
     <AvatarBase {...args} size={AvatarBaseSize.Xs} />
     <AvatarBase {...args} size={AvatarBaseSize.Sm} />
@@ -108,7 +109,7 @@ export const Size = (args: AvatarBaseProps) => (
   </Box>
 );
 
-export const Children = (args: AvatarBaseProps) => (
+export const Children: StoryFn<typeof AvatarBase> = (args) => (
   <Box display={Display.Flex} gap={1}>
     <AvatarBase {...args}>
       <img src="./images/eth_logo.png" />
@@ -130,7 +131,9 @@ export const Children = (args: AvatarBaseProps) => (
   </Box>
 );
 
-export const ColorBackgroundColorAndBorderColor = (args: AvatarBaseProps) => (
+export const ColorBackgroundColorAndBorderColor: StoryFn<typeof AvatarBase> = (
+  args,
+) => (
   <Box display={Display.Flex} gap={1}>
     <AvatarBase {...args}>B</AvatarBase>
     <AvatarBase
diff --git a/ui/components/component-library/avatar-base/avatar-base.test.tsx b/ui/components/component-library/avatar-base/avatar-base.test.tsx
index 7f69ddfa9..c561dee4f 100644
--- a/ui/components/component-library/avatar-base/avatar-base.test.tsx
+++ b/ui/components/component-library/avatar-base/avatar-base.test.tsx
@@ -79,10 +79,10 @@ describe('AvatarBase', () => {
       </>,
     );
     expect(getByTestId(TextColor.successDefault)).toHaveClass(
-      `box--color-${TextColor.successDefault}`,
+      `mm-box--color-${TextColor.successDefault}`,
     );
     expect(getByTestId(TextColor.errorDefault)).toHaveClass(
-      `box--color-${TextColor.errorDefault}`,
+      `mm-box--color-${TextColor.errorDefault}`,
     );
   });
   // background color
@@ -100,10 +100,10 @@ describe('AvatarBase', () => {
       </>,
     );
     expect(getByTestId(Color.successDefault)).toHaveClass(
-      `box--background-color-${Color.successDefault}`,
+      `mm-box--background-color-${Color.successDefault}`,
     );
     expect(getByTestId(Color.errorDefault)).toHaveClass(
-      `box--background-color-${Color.errorDefault}`,
+      `mm-box--background-color-${Color.errorDefault}`,
     );
   });
   // border color
@@ -121,10 +121,10 @@ describe('AvatarBase', () => {
       </>,
     );
     expect(getByTestId(Color.successDefault)).toHaveClass(
-      `box--border-color-${Color.successDefault}`,
+      `mm-box--border-color-${Color.successDefault}`,
     );
     expect(getByTestId(Color.errorDefault)).toHaveClass(
-      `box--border-color-${Color.errorDefault}`,
+      `mm-box--border-color-${Color.errorDefault}`,
     );
   });
   it('should forward a ref to the root html element', () => {
diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.tsx
index 516959f32..4f42fc394 100644
--- a/ui/components/component-library/avatar-base/avatar-base.tsx
+++ b/ui/components/component-library/avatar-base/avatar-base.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, Ref } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 
 import {
@@ -13,12 +13,17 @@ import {
   TextTransform,
 } from '../../../helpers/constants/design-system';
 
-import { Text } from '../text/deprecated';
+import type { PolymorphicRef } from '../box';
+import { Text } from '../text';
 
-import { AvatarBaseProps, AvatarBaseSize } from './avatar-base.types';
+import {
+  AvatarBaseComponent,
+  AvatarBaseProps,
+  AvatarBaseSize,
+} from './avatar-base.types';
 
-export const AvatarBase = forwardRef(
-  (
+export const AvatarBase: AvatarBaseComponent = React.forwardRef(
+  <C extends React.ElementType = 'div'>(
     {
       size = AvatarBaseSize.Md,
       children,
@@ -27,8 +32,8 @@ export const AvatarBase = forwardRef(
       color = TextColor.textDefault,
       className = '',
       ...props
-    }: AvatarBaseProps,
-    ref: Ref<HTMLElement>,
+    }: AvatarBaseProps<C>,
+    ref?: PolymorphicRef<C>,
   ) => {
     let fallbackTextVariant;
 
@@ -54,7 +59,8 @@ export const AvatarBase = forwardRef(
         borderRadius={BorderRadius.full}
         variant={fallbackTextVariant}
         textTransform={TextTransform.Uppercase}
-        {...{ backgroundColor, borderColor, color, ...props }}
+        {...{ backgroundColor, borderColor, color }}
+        {...props} // TODO: There is a typing issue with spreading props to the Box component. It still works but TypeScript complains.
       >
         {children}
       </Text>
diff --git a/ui/components/component-library/avatar-base/avatar-base.types.ts b/ui/components/component-library/avatar-base/avatar-base.types.ts
index bca4653f6..5c5aeef9b 100644
--- a/ui/components/component-library/avatar-base/avatar-base.types.ts
+++ b/ui/components/component-library/avatar-base/avatar-base.types.ts
@@ -3,7 +3,8 @@ import {
   BorderColor,
   TextColor,
 } from '../../../helpers/constants/design-system';
-import type { TextProps } from '../text/deprecated';
+import type { PolymorphicComponentPropWithRef } from '../box';
+import type { TextStyleUtilityProps } from '../text';
 
 export enum AvatarBaseSize {
   Xs = 'xs',
@@ -13,7 +14,7 @@ export enum AvatarBaseSize {
   Xl = 'xl',
 }
 
-export interface AvatarBaseProps extends TextProps {
+export interface Props extends TextStyleUtilityProps {
   /**
    * The size of the AvatarBase.
    * Possible values could be 'AvatarBaseSize.Xs'(16px), 'AvatarBaseSize.Sm'(24px),
@@ -45,3 +46,10 @@ export interface AvatarBaseProps extends TextProps {
    */
   className?: string;
 }
+
+export type AvatarBaseProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, Props>;
+
+export type AvatarBaseComponent = <C extends React.ElementType = 'span'>(
+  props: AvatarBaseProps<C>,
+) => React.ReactElement | null;
diff --git a/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap b/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
index 0e223a9a4..9addad983 100644
--- a/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
+++ b/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
@@ -3,7 +3,7 @@
 exports[`AvatarFavicon should render correctly 1`] = `
 <div>
   <div
-    class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
+    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     data-testid="avatar-favicon"
   >
     <span
diff --git a/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap b/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap
index e1ee4f9de..f3d2944ec 100644
--- a/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap
+++ b/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap
@@ -3,7 +3,7 @@
 exports[`AvatarIcon should render correctly 1`] = `
 <div>
   <div
-    class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-icon mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-primary-muted box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
+    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-icon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-primary-muted mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     data-testid="avatar-icon"
   >
     <span
diff --git a/ui/components/component-library/avatar-icon/avatar-icon.test.js b/ui/components/component-library/avatar-icon/avatar-icon.test.js
index e334dd81b..4262b288b 100644
--- a/ui/components/component-library/avatar-icon/avatar-icon.test.js
+++ b/ui/components/component-library/avatar-icon/avatar-icon.test.js
@@ -100,9 +100,9 @@ describe('AvatarIcon', () => {
       />,
     );
 
-    expect(getByTestId('success')).toHaveClass('box--color-success-default');
+    expect(getByTestId('success')).toHaveClass('mm-box--color-success-default');
     expect(getByTestId('success')).toHaveClass(
-      'box--background-color-success-muted',
+      'mm-box--background-color-success-muted',
     );
   });
   it('should forward a ref to the root html element', () => {
diff --git a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap
index 71f0095fa..36aa6b484 100644
--- a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap
+++ b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap
@@ -3,7 +3,7 @@
 exports[`AvatarNetwork should render correctly 1`] = `
 <div>
   <div
-    class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
+    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     data-testid="avatar-network"
   >
     ?
diff --git a/ui/components/component-library/avatar-network/avatar-network.test.js b/ui/components/component-library/avatar-network/avatar-network.test.js
index 4693c4e59..4eb5ed202 100644
--- a/ui/components/component-library/avatar-network/avatar-network.test.js
+++ b/ui/components/component-library/avatar-network/avatar-network.test.js
@@ -75,10 +75,10 @@ describe('AvatarNetwork', () => {
       </>,
     );
     expect(getByTestId(TextColor.successDefault)).toHaveClass(
-      `box--color-${TextColor.successDefault}`,
+      `mm-box--color-${TextColor.successDefault}`,
     );
     expect(getByTestId(TextColor.errorDefault)).toHaveClass(
-      `box--color-${TextColor.errorDefault}`,
+      `mm-box--color-${TextColor.errorDefault}`,
     );
   });
   // background color
@@ -96,10 +96,10 @@ describe('AvatarNetwork', () => {
       </>,
     );
     expect(getByTestId(BackgroundColor.successDefault)).toHaveClass(
-      `box--background-color-${BackgroundColor.successDefault}`,
+      `mm-box--background-color-${BackgroundColor.successDefault}`,
     );
     expect(getByTestId(BackgroundColor.errorDefault)).toHaveClass(
-      `box--background-color-${BackgroundColor.errorDefault}`,
+      `mm-box--background-color-${BackgroundColor.errorDefault}`,
     );
   });
   // border color
@@ -117,10 +117,10 @@ describe('AvatarNetwork', () => {
       </>,
     );
     expect(getByTestId(BorderColor.successDefault)).toHaveClass(
-      `box--border-color-${BorderColor.successDefault}`,
+      `mm-box--border-color-${BorderColor.successDefault}`,
     );
     expect(getByTestId(BorderColor.errorDefault)).toHaveClass(
-      `box--border-color-${BorderColor.errorDefault}`,
+      `mm-box--border-color-${BorderColor.errorDefault}`,
     );
   });
   it('should forward a ref to the root html element', () => {
diff --git a/ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap b/ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap
index 39d54154f..ee869c0a5 100644
--- a/ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap
+++ b/ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap
@@ -3,7 +3,7 @@
 exports[`AvatarToken should render correctly 1`] = `
 <div>
   <div
-    class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
+    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     data-testid="avatar-token"
   >
     <img
diff --git a/ui/components/component-library/avatar-token/avatar-token.stories.js b/ui/components/component-library/avatar-token/avatar-token.stories.js
index 9c84fd7d5..4262f30d1 100644
--- a/ui/components/component-library/avatar-token/avatar-token.stories.js
+++ b/ui/components/component-library/avatar-token/avatar-token.stories.js
@@ -10,8 +10,13 @@ import {
 
 import Box from '../../ui/box/box';
 
-import { AvatarNetwork, BUTTON_LINK_SIZES, BadgeWrapper, ButtonLink } from '..';
-import { Text } from '../text/deprecated';
+import {
+  AvatarNetwork,
+  BUTTON_LINK_SIZES,
+  BadgeWrapper,
+  ButtonLink,
+  Text,
+} from '..';
 
 import README from './README.mdx';
 
diff --git a/ui/components/component-library/avatar-token/avatar-token.test.js b/ui/components/component-library/avatar-token/avatar-token.test.js
index 9fef751ca..496188b23 100644
--- a/ui/components/component-library/avatar-token/avatar-token.test.js
+++ b/ui/components/component-library/avatar-token/avatar-token.test.js
@@ -73,10 +73,10 @@ describe('AvatarToken', () => {
       </>,
     );
     expect(getByTestId(TextColor.successDefault)).toHaveClass(
-      `box--color-${TextColor.successDefault}`,
+      `mm-box--color-${TextColor.successDefault}`,
     );
     expect(getByTestId(TextColor.errorDefault)).toHaveClass(
-      `box--color-${TextColor.errorDefault}`,
+      `mm-box--color-${TextColor.errorDefault}`,
     );
   });
   // background color
@@ -94,10 +94,10 @@ describe('AvatarToken', () => {
       </>,
     );
     expect(getByTestId(BackgroundColor.successDefault)).toHaveClass(
-      `box--background-color-${BackgroundColor.successDefault}`,
+      `mm-box--background-color-${BackgroundColor.successDefault}`,
     );
     expect(getByTestId(BackgroundColor.errorDefault)).toHaveClass(
-      `box--background-color-${BackgroundColor.errorDefault}`,
+      `mm-box--background-color-${BackgroundColor.errorDefault}`,
     );
   });
   // border color
@@ -115,10 +115,10 @@ describe('AvatarToken', () => {
       </>,
     );
     expect(getByTestId(BorderColor.successDefault)).toHaveClass(
-      `box--border-color-${BorderColor.successDefault}`,
+      `mm-box--border-color-${BorderColor.successDefault}`,
     );
     expect(getByTestId(BorderColor.errorDefault)).toHaveClass(
-      `box--border-color-${BorderColor.errorDefault}`,
+      `mm-box--border-color-${BorderColor.errorDefault}`,
     );
   });
   it('should forward a ref to the root html element', () => {
diff --git a/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap b/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap
index ce95af294..47a6ef8f8 100644
--- a/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap
+++ b/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap
@@ -12,13 +12,13 @@ exports[`BannerAlert should render BannerAlert element correctly 1`] = `
     />
     <div>
       <h5
-        class="box mm-text mm-banner-base__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-banner-base__title mm-text--body-lg-medium mm-box--color-text-default"
         data-testid="mm-banner-base-title"
       >
         BannerAlert test
       </h5>
       <p
-        class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
       >
         should render BannerAlert element correctly
       </p>
diff --git a/ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap b/ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap
index 09de86c7f..d155bd2c9 100644
--- a/ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap
+++ b/ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap
@@ -8,13 +8,13 @@ exports[`BannerBase should render bannerbase element correctly 1`] = `
   >
     <div>
       <h5
-        class="box mm-text mm-banner-base__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-banner-base__title mm-text--body-lg-medium mm-box--color-text-default"
         data-testid="mm-banner-base-title"
       >
         Bannerbase test
       </h5>
       <p
-        class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
       >
         should render bannerbase element correctly
       </p>
diff --git a/ui/components/component-library/banner-base/banner-base.js b/ui/components/component-library/banner-base/banner-base.js
index a2c790815..fc861c1e5 100644
--- a/ui/components/component-library/banner-base/banner-base.js
+++ b/ui/components/component-library/banner-base/banner-base.js
@@ -12,8 +12,7 @@ import {
 
 import Box from '../../ui/box';
 
-import { ButtonLink, IconName, ButtonIcon } from '..';
-import { Text } from '../text/deprecated';
+import { ButtonLink, IconName, ButtonIcon, Text } from '..';
 
 export const BannerBase = ({
   className,
@@ -93,7 +92,7 @@ BannerBase.propTypes = {
   /**
    * Additional props to pass to the `Text` component used for the `title` text
    */
-  titleProps: PropTypes.shape(Text.propTypes),
+  titleProps: PropTypes.object,
   /**
    * The description is the content area below BannerBase title
    */
@@ -101,7 +100,7 @@ BannerBase.propTypes = {
   /**
    * Additional props to pass to the `Text` component used for the `description` text
    */
-  descriptionProps: PropTypes.shape(Text.propTypes),
+  descriptionProps: PropTypes.object,
   /**
    * The children is an alternative to using the description prop for BannerBase content below the title
    */
@@ -113,7 +112,7 @@ BannerBase.propTypes = {
   /**
    * Props for action button (ButtonLink) of the BannerBase below the children
    */
-  actionButtonProps: PropTypes.shape(ButtonLink.propTypes),
+  actionButtonProps: PropTypes.object,
   /**
    * The onClick handler for the action button (ButtonLink)
    */
@@ -130,7 +129,7 @@ BannerBase.propTypes = {
   /**
    * The props to pass to the close button
    */
-  closeButtonProps: PropTypes.shape(ButtonIcon.propTypes),
+  closeButtonProps: PropTypes.object,
   /**
    * An additional className to apply to the BannerBase
    */
diff --git a/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap b/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
index d14c06b7f..8658c76c7 100644
--- a/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
+++ b/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.js.snap
@@ -17,13 +17,13 @@ exports[`BannerTip should render BannerTip element correctly 1`] = `
     </div>
     <div>
       <h5
-        class="box mm-text mm-banner-base__title mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-banner-base__title mm-text--body-lg-medium mm-box--color-text-default"
         data-testid="mm-banner-base-title"
       >
         BannerTip test
       </h5>
       <p
-        class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
       >
         should render BannerTip element correctly
       </p>
diff --git a/ui/components/component-library/banner-tip/banner-tip.js b/ui/components/component-library/banner-tip/banner-tip.js
index 8864a6e21..d6ccd0a78 100644
--- a/ui/components/component-library/banner-tip/banner-tip.js
+++ b/ui/components/component-library/banner-tip/banner-tip.js
@@ -60,11 +60,11 @@ BannerTip.propTypes = {
   /**
    * logoProps accepts all the props from Box
    */
-  logoProps: PropTypes.shape(Box.propTypes),
+  logoProps: PropTypes.object,
   /**
    * logoWrapperProps accepts all the props from Box
    */
-  logoWrapperProps: PropTypes.shape(Box.propTypes),
+  logoWrapperProps: PropTypes.object,
   /**
    * The start(defualt left) content area of BannerBase
    */
diff --git a/ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap b/ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap
index 3fc9db839..41cbd693d 100644
--- a/ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap
+++ b/ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap
@@ -3,7 +3,7 @@
 exports[`ButtonBase should render anchor element correctly by href and externalLink, href target and rel exist 1`] = `
 <div>
   <a
-    class="box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-pill"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-pill"
     data-testid="button-base"
     href="https://www.test.com/"
     rel="noopener noreferrer"
@@ -17,7 +17,7 @@ exports[`ButtonBase should render anchor element correctly by href and externalL
 exports[`ButtonBase should render button element correctly and match snapshot 1`] = `
 <div>
   <button
-    class="box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-pill"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-pill"
     data-testid="button-base"
   >
     Button base
diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js
index 435b0b62e..ec32327b0 100644
--- a/ui/components/component-library/button-base/button-base.js
+++ b/ui/components/component-library/button-base/button-base.js
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 
 import Box from '../../ui/box';
 import { IconName, Icon, IconSize } from '../icon';
-import { Text } from '../text/deprecated';
+import { Text } from '..';
 
 import {
   AlignItems,
@@ -133,7 +133,7 @@ ButtonBase.propTypes = {
   /**
    * Additional props to pass to the Text component that wraps the button children
    */
-  buttonTextProps: PropTypes.shape(Text.propTypes),
+  buttonTextProps: PropTypes.object,
   /**
    * The children to be rendered inside the ButtonBase
    */
@@ -195,7 +195,7 @@ ButtonBase.propTypes = {
   /**
    * textProps accepts all the props from Icon
    */
-  textProps: PropTypes.shape(Text.propTypes),
+  textProps: PropTypes.object,
   /**
    * ButtonBase accepts all the props from Box
    */
diff --git a/ui/components/component-library/button-base/button-base.scss b/ui/components/component-library/button-base/button-base.scss
index 97115a116..0aedff9e9 100644
--- a/ui/components/component-library/button-base/button-base.scss
+++ b/ui/components/component-library/button-base/button-base.scss
@@ -1,7 +1,6 @@
 .mm-button-base {
   position: relative;
   height: 40px;
-  padding: 0; // TODO: remove once https://github.com/MetaMask/metamask-extension/pull/17006 is merged
   cursor: pointer;
   vertical-align: middle;
   user-select: none;
diff --git a/ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap b/ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap
index 79dc5ba6e..30f895a96 100644
--- a/ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap
+++ b/ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap
@@ -3,7 +3,7 @@
 exports[`ButtonLink should render button element correctly 1`] = `
 <div>
   <button
-    class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+    class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
     data-testid="button-link"
   >
     Button Link
diff --git a/ui/components/component-library/button-primary/__snapshots__/button-primary.test.js.snap b/ui/components/component-library/button-primary/__snapshots__/button-primary.test.js.snap
index e318eaf46..813645ab8 100644
--- a/ui/components/component-library/button-primary/__snapshots__/button-primary.test.js.snap
+++ b/ui/components/component-library/button-primary/__snapshots__/button-primary.test.js.snap
@@ -3,7 +3,7 @@
 exports[`ButtonPrimary should render button element correctly 1`] = `
 <div>
   <button
-    class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
     data-testid="button-primary"
   >
     Button Primary
diff --git a/ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap b/ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap
index c5e991054..96137b83f 100644
--- a/ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap
+++ b/ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap
@@ -3,7 +3,7 @@
 exports[`ButtonSecondary should render button element correctly 1`] = `
 <div>
   <button
-    class="box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
     data-testid="button-secondary"
   >
     Button Secondary
diff --git a/ui/components/component-library/button/__snapshots__/button.test.js.snap b/ui/components/component-library/button/__snapshots__/button.test.js.snap
index e579fb517..1d0f1f4c2 100644
--- a/ui/components/component-library/button/__snapshots__/button.test.js.snap
+++ b/ui/components/component-library/button/__snapshots__/button.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Button should render button element correctly 1`] = `
 <div>
   <button
-    class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
     data-testid="button"
   >
     Button
@@ -14,19 +14,19 @@ exports[`Button should render button element correctly 1`] = `
 exports[`Button should render with different button types 1`] = `
 <div>
   <button
-    class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
     data-testid="primary"
   >
     Button
   </button>
   <button
-    class="box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
     data-testid="secondary"
   >
     Button
   </button>
   <button
-    class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+    class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
     data-testid="link"
   >
     Button
diff --git a/ui/components/component-library/checkbox/checkbox.tsx b/ui/components/component-library/checkbox/checkbox.tsx
index 83d0a8113..e1472e475 100644
--- a/ui/components/component-library/checkbox/checkbox.tsx
+++ b/ui/components/component-library/checkbox/checkbox.tsx
@@ -56,7 +56,7 @@ export const Checkbox: CheckboxComponent = React.forwardRef(
         alignItems={AlignItems.center}
         ref={ref}
         htmlFor={id}
-        {...props}
+        {...props} // TODO: There is a typing issue with spreading props to the Box component. It still works but TypeScript complains.
       >
         <span className="mm-checkbox__input-wrapper">
           <Box
diff --git a/ui/components/component-library/form-text-field/__snapshots__/form-text-field.test.js.snap b/ui/components/component-library/form-text-field/__snapshots__/form-text-field.test.js.snap
index ef767bacc..32844ac4d 100644
--- a/ui/components/component-library/form-text-field/__snapshots__/form-text-field.test.js.snap
+++ b/ui/components/component-library/form-text-field/__snapshots__/form-text-field.test.js.snap
@@ -10,7 +10,7 @@ exports[`FormTextField should render correctly 1`] = `
     >
       <input
         autocomplete="off"
-        class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-4 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
+        class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
         focused="false"
         type="text"
         value=""
diff --git a/ui/components/component-library/form-text-field/form-text-field.test.js b/ui/components/component-library/form-text-field/form-text-field.test.js
index 3f18643f5..92c54a2b5 100644
--- a/ui/components/component-library/form-text-field/form-text-field.test.js
+++ b/ui/components/component-library/form-text-field/form-text-field.test.js
@@ -79,7 +79,9 @@ describe('FormTextField', () => {
       />,
     );
     expect(getByTestId('text-field')).toHaveClass('mm-text-field--error');
-    expect(getByText('test help text')).toHaveClass('box--color-error-default');
+    expect(getByText('test help text')).toHaveClass(
+      'mm-box--color-error-default',
+    );
   });
   // helpText
   it('should render with helpText', () => {
diff --git a/ui/components/component-library/help-text/__snapshots__/help-text.test.js.snap b/ui/components/component-library/help-text/__snapshots__/help-text.test.js.snap
index 81e58e095..45f6911e1 100644
--- a/ui/components/component-library/help-text/__snapshots__/help-text.test.js.snap
+++ b/ui/components/component-library/help-text/__snapshots__/help-text.test.js.snap
@@ -3,7 +3,7 @@
 exports[`HelpText should match snapshot 1`] = `
 <div>
   <p
-    class="box mm-text mm-help-text mm-text--body-xs box--flex-direction-row box--color-text-default"
+    class="mm-box mm-text mm-help-text mm-text--body-xs mm-box--color-text-default"
   >
     help text
   </p>
diff --git a/ui/components/component-library/help-text/help-text.js b/ui/components/component-library/help-text/help-text.js
index fb3d77bd6..354207d09 100644
--- a/ui/components/component-library/help-text/help-text.js
+++ b/ui/components/component-library/help-text/help-text.js
@@ -9,7 +9,9 @@ import {
   SEVERITIES,
 } from '../../../helpers/constants/design-system';
 
-import { Text } from '../text/deprecated';
+import Box from '../../ui/box';
+
+import { Text } from '../text';
 
 export const HelpText = ({
   severity,
@@ -60,7 +62,7 @@ HelpText.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * HelpText also accepts all Text and Box props
+   * HelpText also accepts all Box props
    */
-  ...Text.propTypes,
+  ...Box.propTypes,
 };
diff --git a/ui/components/component-library/help-text/help-text.test.js b/ui/components/component-library/help-text/help-text.test.js
index 685d32b31..e43fb54c5 100644
--- a/ui/components/component-library/help-text/help-text.test.js
+++ b/ui/components/component-library/help-text/help-text.test.js
@@ -40,10 +40,10 @@ describe('HelpText', () => {
         <HelpText severity={SEVERITIES.INFO}>info</HelpText>
       </>,
     );
-    expect(getByText('error')).toHaveClass('box--color-error-default');
-    expect(getByText('success')).toHaveClass('box--color-success-default');
-    expect(getByText('warning')).toHaveClass('box--color-warning-default');
-    expect(getByText('info')).toHaveClass('box--color-info-default');
+    expect(getByText('error')).toHaveClass('mm-box--color-error-default');
+    expect(getByText('success')).toHaveClass('mm-box--color-success-default');
+    expect(getByText('warning')).toHaveClass('mm-box--color-warning-default');
+    expect(getByText('info')).toHaveClass('mm-box--color-info-default');
   });
   it('should render with different colors', () => {
     const { getByText } = render(
@@ -54,12 +54,12 @@ describe('HelpText', () => {
         <HelpText color={Color.textMuted}>text muted</HelpText>
       </>,
     );
-    expect(getByText('default')).toHaveClass('box--color-text-default');
-    expect(getByText('text default')).toHaveClass('box--color-text-default');
+    expect(getByText('default')).toHaveClass('mm-box--color-text-default');
+    expect(getByText('text default')).toHaveClass('mm-box--color-text-default');
     expect(getByText('text alternative')).toHaveClass(
-      'box--color-text-alternative',
+      'mm-box--color-text-alternative',
     );
-    expect(getByText('text muted')).toHaveClass('box--color-text-muted');
+    expect(getByText('text muted')).toHaveClass('mm-box--color-text-muted');
   });
   it('should render with a different html element if children is an object', () => {
     const { getByText, getByTestId } = render(
diff --git a/ui/components/component-library/input/__snapshots__/input.test.js.snap b/ui/components/component-library/input/__snapshots__/input.test.js.snap
index 4e663724e..90ee2b97f 100644
--- a/ui/components/component-library/input/__snapshots__/input.test.js.snap
+++ b/ui/components/component-library/input/__snapshots__/input.test.js.snap
@@ -4,7 +4,7 @@ exports[`Input should render correctly 1`] = `
 <div>
   <input
     autocomplete="off"
-    class="box mm-text mm-input mm-text--body-md box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
+    class="mm-box mm-text mm-input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
     type="text"
     value=""
   />
diff --git a/ui/components/component-library/input/input.js b/ui/components/component-library/input/input.js
index 3a67a6919..f4c7510bd 100644
--- a/ui/components/component-library/input/input.js
+++ b/ui/components/component-library/input/input.js
@@ -10,7 +10,7 @@ import {
 
 import Box from '../../ui/box';
 
-import { Text } from '../text/deprecated';
+import { Text } from '..';
 
 import { INPUT_TYPES } from './input.constants';
 
diff --git a/ui/components/component-library/label/__snapshots__/label.test.js.snap b/ui/components/component-library/label/__snapshots__/label.test.js.snap
index 3691978d9..e2d20a61f 100644
--- a/ui/components/component-library/label/__snapshots__/label.test.js.snap
+++ b/ui/components/component-library/label/__snapshots__/label.test.js.snap
@@ -3,7 +3,7 @@
 exports[`label should render text inside the label 1`] = `
 <div>
   <label
-    class="box mm-text mm-label mm-text--body-md mm-text--font-weight-medium box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
+    class="mm-box mm-text mm-label mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
   >
     label
   </label>
diff --git a/ui/components/component-library/label/label.js b/ui/components/component-library/label/label.js
index 4ad84b79d..7eca591b2 100644
--- a/ui/components/component-library/label/label.js
+++ b/ui/components/component-library/label/label.js
@@ -7,7 +7,7 @@ import {
   Display,
   AlignItems,
 } from '../../../helpers/constants/design-system';
-import { Text } from '../text/deprecated';
+import { Text } from '..';
 
 export const Label = ({ htmlFor, className, children, ...props }) => (
   <Text
diff --git a/ui/components/component-library/modal-header/__snapshots__/modal-header.test.tsx.snap b/ui/components/component-library/modal-header/__snapshots__/modal-header.test.tsx.snap
index e6ff624af..67298b339 100644
--- a/ui/components/component-library/modal-header/__snapshots__/modal-header.test.tsx.snap
+++ b/ui/components/component-library/modal-header/__snapshots__/modal-header.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`ModalHeader should render ModalHeader correctly 1`] = `
       class="box box--flex-direction-row box--width-full"
     >
       <header
-        class="box mm-text mm-text--heading-sm mm-text--text-align-center box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-text-default"
       >
         Modal header
       </header>
diff --git a/ui/components/component-library/modal-header/modal-header.stories.tsx b/ui/components/component-library/modal-header/modal-header.stories.tsx
index 1193d2e48..299221ca5 100644
--- a/ui/components/component-library/modal-header/modal-header.stories.tsx
+++ b/ui/components/component-library/modal-header/modal-header.stories.tsx
@@ -10,8 +10,7 @@ import {
   JustifyContent,
 } from '../../../helpers/constants/design-system';
 
-import { AvatarAccount, BUTTON_SIZES, Button } from '..';
-import { Text } from '../text/deprecated';
+import { AvatarAccount, BUTTON_SIZES, Button, Text } from '..';
 
 import { ModalHeader } from './modal-header';
 import README from './README.mdx';
diff --git a/ui/components/component-library/modal-header/modal-header.tsx b/ui/components/component-library/modal-header/modal-header.tsx
index 91bdd502b..235f7dff3 100644
--- a/ui/components/component-library/modal-header/modal-header.tsx
+++ b/ui/components/component-library/modal-header/modal-header.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import { HeaderBase, ButtonIcon, ButtonIconSize, IconName, ValidTag } from '..';
-import { Text } from '../text/deprecated';
+import { HeaderBase, Text, ButtonIcon, ButtonIconSize, IconName } from '..';
 import {
   TextVariant,
   TextAlign,
@@ -52,7 +51,7 @@ export const ModalHeader: React.FC<ModalHeaderProps> = ({
     >
       {typeof children === 'string' ? (
         <Text
-          as={ValidTag.Header}
+          as="header"
           variant={TextVariant.headingSm}
           textAlign={TextAlign.Center}
         >
diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
index d92ee9fef..510227656 100644
--- a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
+++ b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
@@ -7,12 +7,12 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
     data-testid="picker-network"
   >
     <div
-      class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
+      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     >
       I
     </div>
     <p
-      class="box mm-text mm-text--body-sm mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
     >
       Imported
     </p>
diff --git a/ui/components/component-library/picker-network/picker-network.js b/ui/components/component-library/picker-network/picker-network.js
index eb9c8a9bd..29b52c33d 100644
--- a/ui/components/component-library/picker-network/picker-network.js
+++ b/ui/components/component-library/picker-network/picker-network.js
@@ -1,9 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { AvatarNetwork, IconName, Icon, IconSize } from '..';
-import { Text } from '../text/deprecated';
-import Box from '../../ui/box';
 import {
   AlignItems,
   DISPLAY,
@@ -13,6 +10,8 @@ import {
   IconColor,
   BackgroundColor,
 } from '../../../helpers/constants/design-system';
+import Box from '../../ui/box';
+import { AvatarNetwork, IconName, Icon, IconSize, Text } from '..';
 
 export const PickerNetwork = ({
   className,
@@ -68,7 +67,7 @@ PickerNetwork.propTypes = {
   /**
    * It accepts all the props from AvatarNetwork
    */
-  avatarNetworkProps: PropTypes.shape(AvatarNetwork.propTypes),
+  avatarNetworkProps: PropTypes.object,
   /**
    * It accepts all the props from Icon
    */
diff --git a/ui/components/component-library/popover-header/__snapshots__/popover-header.test.tsx.snap b/ui/components/component-library/popover-header/__snapshots__/popover-header.test.tsx.snap
index 1525bd839..06201d78f 100644
--- a/ui/components/component-library/popover-header/__snapshots__/popover-header.test.tsx.snap
+++ b/ui/components/component-library/popover-header/__snapshots__/popover-header.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`PopoverHeader should render PopoverHeader correctly 1`] = `
       class="box box--flex-direction-row box--width-full"
     >
       <h4
-        class="box mm-text mm-text--heading-sm mm-text--text-align-center box--flex-direction-row box--color-inherit"
+        class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-inherit"
       >
         PopoverHeader
       </h4>
diff --git a/ui/components/component-library/popover-header/popover-header.tsx b/ui/components/component-library/popover-header/popover-header.tsx
index 1cb83ce4b..1bd004bef 100644
--- a/ui/components/component-library/popover-header/popover-header.tsx
+++ b/ui/components/component-library/popover-header/popover-header.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 import classnames from 'classnames';
-import { HeaderBase, ButtonIcon, ButtonIconSize, IconName } from '..';
-import { Text } from '../text/deprecated';
+import { HeaderBase, ButtonIcon, ButtonIconSize, IconName, Text } from '..';
 import {
   IconColor,
   TextVariant,
   TextAlign,
-  Color,
+  TextColor,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { PopoverHeaderProps } from '.';
@@ -58,7 +57,7 @@ export const PopoverHeader: React.FC<PopoverHeaderProps> = ({
         <Text
           variant={TextVariant.headingSm}
           textAlign={TextAlign.Center}
-          color={Color.inherit}
+          color={TextColor.inherit}
         >
           {children}
         </Text>
diff --git a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
index ffdde8025..5407e13ac 100644
--- a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
+++ b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
@@ -7,7 +7,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
     data-testid="tag-url"
   >
     <div
-      class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
+      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     >
       <span
         class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"
@@ -15,7 +15,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
       />
     </div>
     <p
-      class="box mm-text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default"
     >
       https://app.uniswap.org
     </p>
diff --git a/ui/components/component-library/tag-url/tag-url.js b/ui/components/component-library/tag-url/tag-url.js
index 94e7d608e..fbfa0f4b0 100644
--- a/ui/components/component-library/tag-url/tag-url.js
+++ b/ui/components/component-library/tag-url/tag-url.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Box from '../../ui/box/box';
-import { Text } from '../text/deprecated';
 import {
   AlignItems,
   BackgroundColor,
@@ -13,7 +11,8 @@ import {
   Size,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import { AvatarFavicon, ButtonLink, IconName, Icon, IconSize } from '..';
+import Box from '../../ui/box/box';
+import { AvatarFavicon, ButtonLink, IconName, Icon, IconSize, Text } from '..';
 
 export const TagUrl = ({
   label,
@@ -85,7 +84,7 @@ TagUrl.propTypes = {
   /**
    * It accepts all the props from Avatar Favicon
    */
-  avatarFaviconProps: PropTypes.shape(AvatarFavicon.propTypes),
+  avatarFaviconProps: PropTypes.object,
   /**
    * It accepts all the props from Icon
    */
@@ -97,7 +96,7 @@ TagUrl.propTypes = {
   /**
    * It accepts all the props from Text Component
    */
-  labelProps: PropTypes.shape(Text.propTypes),
+  labelProps: PropTypes.object,
   /**
    * If we want a button in TagUrl component.
    */
@@ -105,7 +104,7 @@ TagUrl.propTypes = {
   /**
    * It accepts all the props from ButtonLink
    */
-  actionButtonProps: PropTypes.shape(ButtonLink.propTypes),
+  actionButtonProps: PropTypes.object,
   /**
    * Additional classNames to be added to the TagUrl component
    */
diff --git a/ui/components/component-library/tag/__snapshots__/tag.test.js.snap b/ui/components/component-library/tag/__snapshots__/tag.test.js.snap
index a07e42e0e..e0d709483 100644
--- a/ui/components/component-library/tag/__snapshots__/tag.test.js.snap
+++ b/ui/components/component-library/tag/__snapshots__/tag.test.js.snap
@@ -7,7 +7,7 @@ exports[`Tag should render the label inside the tag and match snapshot 1`] = `
     data-testid="tag"
   >
     <p
-      class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text mm-text--body-sm mm-box--color-text-default"
     >
       Imported
     </p>
diff --git a/ui/components/component-library/tag/tag.js b/ui/components/component-library/tag/tag.js
index 61191db62..da927ba02 100644
--- a/ui/components/component-library/tag/tag.js
+++ b/ui/components/component-library/tag/tag.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Box from '../../ui/box/box';
-import { Text } from '../text/deprecated';
 import {
   AlignItems,
   BackgroundColor,
@@ -12,6 +10,8 @@ import {
   JustifyContent,
   TextVariant,
 } from '../../../helpers/constants/design-system';
+import Box from '../../ui/box/box';
+import { Text } from '..';
 
 export const Tag = ({ label, className, labelProps, ...props }) => {
   return (
@@ -43,7 +43,7 @@ Tag.propTypes = {
   /**
    * The label props of the component. Most Text component props can be used
    */
-  labelProps: PropTypes.shape(Text.propTypes),
+  labelProps: PropTypes.object,
   /**
    * Additional classNames to be added to the Tag component
    */
diff --git a/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap b/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
index 405e0fd7e..4f2c22dc7 100644
--- a/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
+++ b/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
@@ -11,7 +11,7 @@ exports[`TextFieldSearch should render correctly 1`] = `
     />
     <input
       autocomplete="off"
-      class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--margin-right-6 box--padding-right-4 box--padding-left-2 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
+      class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--margin-right-6 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-2 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
       focused="false"
       type="search"
       value=""
diff --git a/ui/components/component-library/text-field-search/text-field-search.js b/ui/components/component-library/text-field-search/text-field-search.js
index 46b28eb80..28efee9e5 100644
--- a/ui/components/component-library/text-field-search/text-field-search.js
+++ b/ui/components/component-library/text-field-search/text-field-search.js
@@ -87,7 +87,7 @@ TextFieldSearch.propTypes = {
   /**
    * The props to pass to the clear button
    */
-  clearButtonProps: PropTypes.shape(ButtonIcon.propTypes),
+  clearButtonProps: PropTypes.object,
   /**
    * An additional className to apply to the TextFieldSearch
    */
diff --git a/ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap b/ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap
index b8a4a4b6f..d985c5dc7 100644
--- a/ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap
+++ b/ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap
@@ -7,7 +7,7 @@ exports[`TextField should render correctly 1`] = `
   >
     <input
       autocomplete="off"
-      class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-4 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
+      class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
       focused="false"
       type="text"
       value=""
diff --git a/ui/components/institutional/compliance-settings/__snapshots__/compliance-settings.test.js.snap b/ui/components/institutional/compliance-settings/__snapshots__/compliance-settings.test.js.snap
index e93b58e98..52b06d34b 100644
--- a/ui/components/institutional/compliance-settings/__snapshots__/compliance-settings.test.js.snap
+++ b/ui/components/institutional/compliance-settings/__snapshots__/compliance-settings.test.js.snap
@@ -14,13 +14,13 @@ exports[`Compliance Settings shows disconnect when Compliance is activated 1`] =
       class="box institutional-feature__footer box--padding-4 box--sm:padding-6 box--flex-direction-row box--border-style-solid box--border-color-border-muted box--border-width-1"
     >
       <button
-        class="box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
         data-testid="disconnect-compliance"
       >
         Disconnect
       </button>
       <button
-        class="box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         data-testid="start-compliance"
       >
         Open Codefi Compliance
@@ -80,7 +80,7 @@ exports[`Compliance Settings shows start btn when Compliance its not activated 1
         class="box institutional-feature__footer box--padding-4 box--sm:padding-6 box--flex-direction-row box--border-style-solid box--border-color-border-muted box--border-width-1"
       >
         <button
-          class="box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           data-testid="start-compliance"
         >
           Open Codefi Compliance
diff --git a/ui/components/institutional/custody-labels/__snapshots__/custody-labels.test.js.snap b/ui/components/institutional/custody-labels/__snapshots__/custody-labels.test.js.snap
index aea647170..0f4ddf10a 100644
--- a/ui/components/institutional/custody-labels/__snapshots__/custody-labels.test.js.snap
+++ b/ui/components/institutional/custody-labels/__snapshots__/custody-labels.test.js.snap
@@ -3,7 +3,7 @@
 exports[`CustodyLabels Component should render correctly 1`] = `
 <div>
   <label
-    class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+    class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center mm-box--color-text-default"
     for="address-index"
   >
     <p
diff --git a/ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap b/ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap
index 55214eea8..eaa4457a6 100644
--- a/ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap
+++ b/ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap
@@ -12,7 +12,7 @@ exports[`NoteToTrader should render the Note to trader component 1`] = `
         class="box note-header box--display-flex box--flex-direction-row box--justify-content-space-between"
       >
         <label
-          class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
+          class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
           for="transaction-note"
         >
           Transaction note
diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
index 13fb9415e..cd5df6672 100644
--- a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
+++ b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
@@ -6,7 +6,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
     class="mm-box multichain-account-list-item mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent"
   >
     <div
-      class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase box--margin-inline-end-2 box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
+      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase mm-box--margin-inline-end-2 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     >
       <div
         class="mm-avatar-account__jazzicon"
@@ -61,10 +61,10 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             class="box mm-text multichain-account-list-item__account-name mm-text--body-md mm-text--ellipsis box--margin-inline-end-2 box--flex-direction-row box--color-text-default"
           >
             <button
-              class="box mm-text mm-button-base mm-button-base--ellipsis multichain-account-list-item__account-name__button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--ellipsis box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent"
+              class="mm-box mm-text mm-button-base mm-button-base--ellipsis multichain-account-list-item__account-name__button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent"
             >
               <span
-                class="box mm-text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
               >
                 Test Account
               </span>
diff --git a/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
index 0df9b5df5..e78078c98 100644
--- a/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
+++ b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap
@@ -3,14 +3,14 @@
 exports[`AccountPicker renders properly 1`] = `
 <div>
   <button
-    class="box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-transparent box--rounded-lg"
+    class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-lg"
     data-testid="account-menu-icon"
   >
     <span
-      class="box mm-text mm-text--inherit mm-text--ellipsis box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--color-primary-inverse"
+      class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-primary-inverse"
     >
       <div
-        class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-background-default box--border-style-solid box--border-width-1"
+        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
       >
         <canvas
           height="32"
diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
index a547951d2..e94459761 100644
--- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
+++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
@@ -212,12 +212,12 @@ exports[`App Header should match snapshot 1`] = `
           disabled=""
         >
           <div
-            class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             C
           </div>
           <p
-            class="box mm-text mm-text--body-sm mm-text--ellipsis box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
           >
             Chain 5
           </p>
@@ -228,14 +228,14 @@ exports[`App Header should match snapshot 1`] = `
         </button>
       </div>
       <button
-        class="box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-transparent box--rounded-lg"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--ellipsis multichain-account-picker mm-button-primary mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-transparent mm-box--rounded-lg"
         data-testid="account-menu-icon"
       >
         <span
-          class="box mm-text mm-text--inherit mm-text--ellipsis box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--color-primary-inverse"
+          class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-primary-inverse"
         >
           <div
-            class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-background-default box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
           >
             <div
               class="mm-avatar-account__jazzicon"
diff --git a/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap b/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap
index 632d8860c..b1d178d0d 100644
--- a/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap
+++ b/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap
@@ -12,12 +12,12 @@ exports[`DetectedTokensBanner should render correctly 1`] = `
     />
     <div>
       <p
-        class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
       >
         3 new tokens found in this account
       </p>
       <button
-        class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
       >
         Import tokens
       </button>
diff --git a/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap b/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
index 763497971..2fcf0b8db 100644
--- a/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
+++ b/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Json should match snapshot 1`] = `
   >
     Used by a variety of different clients
     <a
-      class="box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+      class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
       href="https://metamask.zendesk.com/hc/en-us/articles/360015289932"
       rel="noopener noreferrer"
       target="_blank"
@@ -30,7 +30,7 @@ exports[`Json should match snapshot 1`] = `
       <input
         aria-invalid="true"
         autocomplete="off"
-        class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-4 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
+        class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
         focused="true"
         id="json-password-box"
         placeholder="Enter optional password"
@@ -43,12 +43,12 @@ exports[`Json should match snapshot 1`] = `
     class="mm-box mm-box--display-flex mm-box--gap-4"
   >
     <button
-      class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
+      class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
     >
       Cancel
     </button>
     <button
-      class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+      class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
       data-testid="import-account-confirm-button"
       disabled=""
     >
diff --git a/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap b/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
index 2e57b6243..73c678f61 100644
--- a/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
+++ b/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
@@ -9,7 +9,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
       class="mm-box mm-box--display-flex mm-box--align-items-center"
     >
       <button
-        class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         data-testid="import-token-button"
       >
         <span
@@ -23,7 +23,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
       class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
     >
       <button
-        class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         data-testid="refresh-list-button"
       >
         <span
@@ -46,7 +46,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
       class="mm-box mm-box--display-flex mm-box--align-items-center"
     >
       <button
-        class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         data-testid="import-token-button"
       >
         <span
@@ -60,7 +60,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
       class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
     >
       <button
-        class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         data-testid="refresh-list-button"
       >
         <span
diff --git a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
index 83a310649..dea38ffb6 100644
--- a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
+++ b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
@@ -6,7 +6,7 @@ exports[`NetworkListItem renders properly 1`] = `
     class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--display-flex mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
   >
     <div
-      class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
+      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     >
       <img
         alt="Polygon logo"
@@ -18,10 +18,10 @@ exports[`NetworkListItem renders properly 1`] = `
       class="mm-box multichain-network-list-item__network-name"
     >
       <button
-        class="box mm-text mm-button-base mm-button-base--ellipsis mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--ellipsis box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent"
+        class="mm-box mm-text mm-button-base mm-button-base--ellipsis mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-text--ellipsis mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent"
       >
         <span
-          class="box mm-text mm-text--inherit mm-text--ellipsis box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
         >
           Polygon
         </span>
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
index 05cb9b747..3d7fea2a5 100644
--- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
+++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
@@ -15,7 +15,7 @@ exports[`TokenListItem should render correctly 1`] = `
         class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
       >
         <div
-          class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
         >
           ?
         </div>
@@ -23,7 +23,7 @@ exports[`TokenListItem should render correctly 1`] = `
           class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
         >
           <div
-            class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-muted box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
           >
             <img
               alt="Ethereum Mainnet logo"
diff --git a/ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap b/ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap
index eb21729f2..dc9d1836c 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap
+++ b/ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap
@@ -140,7 +140,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
                 Nonce
               </h6>
               <button
-                class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--margin-left-3 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               >
                 Edit
               </button>
@@ -325,7 +325,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
                 Nonce
               </h6>
               <button
-                class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--margin-left-3 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               >
                 Edit
               </button>
@@ -510,7 +510,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
                 Nonce
               </h6>
               <button
-                class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--margin-left-3 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               >
                 Edit
               </button>
@@ -695,7 +695,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
                 Nonce
               </h6>
               <button
-                class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--margin-left-3 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-left-3 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               >
                 Edit
               </button>
diff --git a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index eb03607db..7a2fde6eb 100644
--- a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -322,7 +322,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
             />
             <div>
               <p
-                class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
               >
                 Network is busy. Gas prices are high and estimates are less accurate.
               </p>
@@ -677,4 +677,4 @@ exports[`ConfirmSendEther should render correct information for for confirm send
     </div>
   </div>,
 ]
-`;
\ No newline at end of file
+`;
diff --git a/ui/pages/confirmation/templates/__snapshots__/error.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/error.test.js.snap
index 30d96b667..ccb7cdb0e 100644
--- a/ui/pages/confirmation/templates/__snapshots__/error.test.js.snap
+++ b/ui/pages/confirmation/templates/__snapshots__/error.test.js.snap
@@ -20,7 +20,7 @@ exports[`error template matches the snapshot 1`] = `
           class="box box--padding-top-2 box--padding-bottom-2 box--flex-direction-column box--justify-content-center box--align-items-center box--height-full box--display-flex"
         >
           <div
-            class="box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-icon mm-text--body-lg-medium mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-error-default box--background-color-error-muted box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-icon mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-error-default mm-box--background-color-error-muted mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <span
               class="box mm-icon mm-icon--size-xl box--display-inline-block box--flex-direction-row box--color-inherit"
diff --git a/ui/pages/confirmation/templates/__snapshots__/success.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/success.test.js.snap
index 2c473b06d..9f126239a 100644
--- a/ui/pages/confirmation/templates/__snapshots__/success.test.js.snap
+++ b/ui/pages/confirmation/templates/__snapshots__/success.test.js.snap
@@ -20,7 +20,7 @@ exports[`success template matches the snapshot 1`] = `
           class="box box--padding-top-2 box--padding-bottom-2 box--flex-direction-column box--justify-content-center box--align-items-center box--height-full box--display-flex"
         >
           <div
-            class="box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-icon mm-text--body-lg-medium mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-success-default box--background-color-success-muted box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-icon mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-success-default mm-box--background-color-success-muted mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <span
               class="box mm-icon mm-icon--size-xl box--display-inline-block box--flex-direction-row box--color-inherit"
diff --git a/ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap b/ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap
index 9c92ffb51..b61c196b7 100644
--- a/ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap
+++ b/ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap
@@ -156,7 +156,7 @@ exports[`Desktop Pairing page should render otp component 1`] = `
       class="box box--flex-direction-row"
     >
       <button
-        class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
       >
         Done
       </button>
diff --git a/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap b/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap
index 1eb623034..87ea155d8 100644
--- a/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap
+++ b/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap
@@ -29,7 +29,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
             class="mm-box mm-box--margin-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
           >
             <label
-              class="box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+              class="mm-box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium mm-box--margin-top-2 mm-box--margin-left-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-default"
               for="address-0"
             >
               <span
@@ -39,20 +39,20 @@ exports[`CustodyAccountList renders accounts 1`] = `
               </span>
             </label>
             <label
-              class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-right-3 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+              class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--margin-top-2 mm-box--margin-right-3 mm-box--margin-left-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-default"
               for="address-0"
             >
               <span
                 class="box mm-text custody-account-list__item mm-text--body-md box--display-flex box--flex-direction-row box--color-text-default"
               >
                 <a
-                  class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                  class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
                   href="https://etherscan.io/address/0x1234567890123456789012345678901234567890"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
                   <span
-                    class="box mm-text mm-text--inherit box--flex-direction-row box--color-primary-default"
+                    class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
                   >
                     0x123...7890
                     <span
@@ -104,7 +104,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
             class="mm-box mm-box--margin-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
           >
             <label
-              class="box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+              class="mm-box mm-text mm-label mm-label--html-for custody-account-list__item__title mm-text--body-md mm-text--font-weight-medium mm-box--margin-top-2 mm-box--margin-left-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-default"
               for="address-1"
             >
               <span
@@ -114,20 +114,20 @@ exports[`CustodyAccountList renders accounts 1`] = `
               </span>
             </label>
             <label
-              class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--margin-top-2 box--margin-right-3 box--margin-left-2 box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
+              class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--margin-top-2 mm-box--margin-right-3 mm-box--margin-left-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-default"
               for="address-1"
             >
               <span
                 class="box mm-text custody-account-list__item mm-text--body-md box--display-flex box--flex-direction-row box--color-text-default"
               >
                 <a
-                  class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                  class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
                   href="https://etherscan.io/address/0x0987654321098765432109876543210987654321"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
                   <span
-                    class="box mm-text mm-text--inherit box--flex-direction-row box--color-primary-default"
+                    class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
                   >
                     0x098...4321
                     <span
@@ -171,13 +171,13 @@ exports[`CustodyAccountList renders accounts 1`] = `
         class="mm-box mm-box--display-flex mm-box--gap-4"
       >
         <button
-          class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block custody-account-list__button mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block custody-account-list__button mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
           data-testid="custody-account-cancel-button"
         >
           [cancel]
         </button>
         <button
-          class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block custody-account-list__button mm-button-primary mm-button-primary--disabled mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-base--block custody-account-list__button mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
           data-testid="custody-account-connect-button"
           disabled=""
         >
diff --git a/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap b/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
index 83e74b31a..4a5a1184c 100644
--- a/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
+++ b/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
@@ -81,7 +81,7 @@ exports[`CustodyPage renders CustodyPage 2`] = `
               </p>
             </div>
             <button
-              class="box mm-text mm-button-base mm-button-base--size-sm mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+              class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
               data-testid="custody-connect-button"
             >
               Select
diff --git a/ui/pages/institutional/interactive-replacement-token-page/__snapshots__/interactive-replacement-token-page.test.js.snap b/ui/pages/institutional/interactive-replacement-token-page/__snapshots__/interactive-replacement-token-page.test.js.snap
index 000687750..886dd9d7d 100644
--- a/ui/pages/institutional/interactive-replacement-token-page/__snapshots__/interactive-replacement-token-page.test.js.snap
+++ b/ui/pages/institutional/interactive-replacement-token-page/__snapshots__/interactive-replacement-token-page.test.js.snap
@@ -95,12 +95,12 @@ exports[`Interactive Replacement Token Page should reject if there are errors 2`
         class="mm-box mm-box--display-flex mm-box--gap-4"
       >
         <button
-          class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
         >
           Reject
         </button>
         <button
-          class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+          class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
         >
           displayName
         </button>
diff --git a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
index 686548cf8..e95fb8012 100644
--- a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
+++ b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
@@ -17,7 +17,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
          
         The 
         <a
-          class="box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           href="https://metamask.zendesk.com/hc/en-us/articles/360060826432-What-is-a-Secret-Recovery-Phrase-and-how-to-keep-your-crypto-wallet-secure"
           rel="noopener noreferrer"
           target="_blank"
@@ -42,7 +42,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
          
         MetaMask is a 
         <a
-          class="box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           href="https://metamask.zendesk.com/hc/en-us/articles/360059952212-MetaMask-is-a-non-custodial-wallet"
           rel="noopener noreferrer"
           target="_blank"
@@ -80,7 +80,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
     </div>
     <form>
       <label
-        class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium box--display-inline-flex box--flex-direction-row box--align-items-center box--color-text-default"
+        class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
         for="password-box"
       >
         Enter password to continue
@@ -90,7 +90,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
       >
         <input
           autocomplete="off"
-          class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-4 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
+          class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
           data-testid="input-password"
           focused="true"
           id="password-box"
@@ -104,12 +104,12 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
       class="box box--margin-top-auto box--display-flex box--gap-4 box--flex-direction-row"
     >
       <button
-        class="box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-full box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
       >
         Cancel
       </button>
       <button
-        class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--width-full box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
         disabled=""
       >
         Next
diff --git a/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap b/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap
index 10f0d80f3..df8387fb1 100644
--- a/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap
+++ b/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
         class="mm-box mm-box--margin-bottom-4 mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
       >
         <button
-          class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--margin-right-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+          class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--margin-right-4 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
         >
           Create a Snap Account
         </button>
@@ -42,7 +42,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="mm-box"
         >
           <button
-            class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+            class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
           >
             Install snap
           </button>
@@ -64,7 +64,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="box mm-tag box--margin-right-1 box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--color-info-default box--background-color-info-muted box--rounded-pill box--border-color-info-muted box--border-width-1 box--border-style-solid"
         >
           <p
-            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-info-default"
+            class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
@@ -86,7 +86,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="box mm-tag box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--color-info-default box--background-color-info-muted box--rounded-pill box--border-color-info-muted box--border-width-1 box--border-style-solid"
         >
           <p
-            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-info-default"
+            class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
@@ -138,7 +138,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
             class="box mm-tag box--margin-right-1 box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
           >
             <p
-              class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
+              class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
             >
               EOA
             </p>
@@ -180,7 +180,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
             class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
           >
             <a
-              class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+              class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               href="auditUrl1"
             >
               auditUrl1
@@ -190,7 +190,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
             class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
           >
             <a
-              class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+              class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               href="auditUrl2"
             >
               auditUrl2
diff --git a/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap b/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap
index 4a9664988..d9763d392 100644
--- a/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap
+++ b/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`SnapCard should render 1`] = `
         </div>
       </div>
       <button
-        class="box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
+        class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-secondary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
         data-testid="install-snap-button"
       >
         Install
diff --git a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
index f99fa8b7c..7f219c7bd 100644
--- a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
+++ b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
@@ -24,7 +24,7 @@ exports[`Security Tab should match snapshot 1`] = `
       class="settings-page__content-padded"
     >
       <button
-        class="box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
         data-testid="reveal-seed-words"
         type="danger"
       >
@@ -357,7 +357,7 @@ exports[`Security Tab should match snapshot 1`] = `
             class="settings-page__content-item-col"
           >
             <button
-              class="box mm-text mm-button-base mm-button-base--size-md settings-page__button mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
+              class="mm-box mm-text mm-button-base mm-button-base--size-md settings-page__button mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
               type="secondary"
             >
               Add custom network
diff --git a/ui/pages/swaps/list-with-search/__snapshots__/list-with-search.test.js.snap b/ui/pages/swaps/list-with-search/__snapshots__/list-with-search.test.js.snap
index 4fd33e151..01f1de5fd 100644
--- a/ui/pages/swaps/list-with-search/__snapshots__/list-with-search.test.js.snap
+++ b/ui/pages/swaps/list-with-search/__snapshots__/list-with-search.test.js.snap
@@ -11,7 +11,7 @@ exports[`ListWithSearch renders the component with initial props 1`] = `
   />
   <input
     autocomplete="off"
-    class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md box--padding-right-4 box--padding-left-2 box--flex-direction-row box--color-text-default box--background-color-transparent box--border-style-none"
+    class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--margin-right-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-2 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
     focused="true"
     id="list-with-search__text-search"
     placeholder="Enter token name or paste address"
diff --git a/ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap b/ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap
index e8f74b0ee..452f83966 100644
--- a/ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap
+++ b/ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap
@@ -408,7 +408,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
               class="box custom-spending-cap__max box--margin-left-auto box--padding-right-4 box--padding-bottom-2 box--flex-direction-row box--text-align-end box--width-max"
             >
               <button
-                class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               >
                 Max
               </button>
@@ -434,7 +434,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
                 </span>
               </h6>
               <a
-                class="box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium box--margin-bottom-2 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--margin-bottom-2 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
                 href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
                 target="_blank"
               >