From 9a4b4bb9196fec4d584e9e96a2597572e85576fa Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Thu, 20 Jul 2023 10:16:25 -0700
Subject: [PATCH 1/2] Updating remaining Text import paths

---
 ui/helpers/utils/permission.js                             | 2 +-
 .../confirm-add-suggested-nft/confirm-add-suggested-nft.js | 2 +-
 .../confirm-approve-content.component.js                   | 2 +-
 .../confirm-deploy-contract.component.js                   | 2 +-
 ui/pages/create-account/connect-hardware/index.js          | 2 +-
 ui/pages/desktop-pairing/desktop-pairing.component.js      | 3 +--
 ui/pages/home/home.component.js                            | 2 +-
 .../confirm-add-custodian-token.js                         | 2 +-
 ui/pages/institutional/connect-custody/account-list.js     | 2 +-
 ui/pages/institutional/custody/custody.js                  | 2 +-
 .../institutional-entity-done-page.js                      | 2 +-
 .../interactive-replacement-token-page.js                  | 2 +-
 ui/pages/keychains/reveal-seed.js                          | 2 +-
 .../add-snap-account-modal/add-snap-account-modal.tsx      | 2 +-
 .../new-snap-account-page/new-snap-account-page.tsx        | 3 +--
 ui/pages/keyring-snaps/snap-account-detail-page/detail.tsx | 3 +--
 ui/pages/keyring-snaps/snap-account-detail-page/header.tsx | 2 +-
 .../snap-account-detail-page/snap-account-detail-page.tsx  | 2 +-
 ui/pages/keyring-snaps/snap-card/snap-card.tsx             | 2 +-
 ui/pages/onboarding-flow/pin-extension/pin-extension.js    | 2 +-
 .../secure-your-wallet/secure-your-wallet.js               | 2 +-
 ui/pages/onboarding-flow/welcome/welcome.js                | 2 +-
 .../permissions-connect/snaps/snap-install/snap-install.js | 2 +-
 .../permissions-connect/snaps/snap-result/snap-result.js   | 2 +-
 .../permissions-connect/snaps/snap-update/snap-update.js   | 2 +-
 .../snaps/snaps-connect/snaps-connect.js                   | 7 +++++--
 .../send-content/add-recipient/add-recipient.component.js  | 2 +-
 .../send-asset-row/send-asset-row.component.js             | 2 +-
 .../edit-contact/edit-contact.component.js                 | 3 ++-
 .../view-contact/view-contact.component.js                 | 2 +-
 .../experimental-tab/experimental-tab.component.js         | 2 +-
 .../settings/networks-tab/networks-list/networks-list.js   | 2 +-
 ui/pages/settings/settings-tab/settings-tab.component.js   | 2 +-
 ui/pages/settings/settings.component.js                    | 2 +-
 ui/pages/settings/snaps/snaps-list-tab/snap-list-tab.js    | 2 +-
 ui/pages/settings/snaps/view-snap/view-snap.js             | 5 ++---
 ui/pages/swaps/awaiting-signatures/awaiting-signatures.js  | 2 +-
 ui/pages/swaps/fee-card/fee-card.js                        | 2 +-
 ui/pages/swaps/import-token/import-token.js                | 2 +-
 ui/pages/swaps/list-with-search/list-with-search.js        | 2 +-
 ui/pages/swaps/notification-page/notification-page.js      | 3 +--
 ui/pages/swaps/prepare-swap-page/prepare-swap-page.js      | 4 ++--
 .../swaps/prepare-swap-page/quotes-loading-animation.js    | 2 +-
 ui/pages/swaps/prepare-swap-page/review-quote.js           | 7 +++++--
 .../swaps/prepare-swap-page/smart-transactions-popover.js  | 2 +-
 .../swaps/prepare-swap-page/view-quote-price-difference.js | 7 +++++--
 ui/pages/swaps/slippage-buttons/slippage-buttons.js        | 2 +-
 .../smart-transaction-status/smart-transaction-status.js   | 2 +-
 ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js    | 4 ++--
 ui/pages/token-allowance/token-allowance.js                | 3 +--
 ui/pages/token-details/token-details-page.js               | 2 +-
 51 files changed, 67 insertions(+), 63 deletions(-)

diff --git a/ui/helpers/utils/permission.js b/ui/helpers/utils/permission.js
index 0efb8b49ca30..fa1b00a531f2 100644
--- a/ui/helpers/utils/permission.js
+++ b/ui/helpers/utils/permission.js
@@ -18,12 +18,12 @@ import {
   AvatarIcon,
   ///: BEGIN:ONLY_INCLUDE_IN(snaps)
   Icon,
+  Text,
   ///: END:ONLY_INCLUDE_IN
   IconName,
   IconSize,
 } from '../../components/component-library';
 ///: BEGIN:ONLY_INCLUDE_IN(snaps)
-import { Text } from '../../components/component-library/text/deprecated';
 import { Color, FontWeight, IconColor } from '../constants/design-system';
 import {
   coinTypeToProtocolName,
diff --git a/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js b/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js
index f74dd27e94ac..4285135b9654 100644
--- a/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js
+++ b/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js
@@ -25,8 +25,8 @@ import {
   ButtonLink,
   IconName,
   Box,
+  Text,
 } from '../../components/component-library';
-import { Text } from '../../components/component-library/text/deprecated';
 import {
   getCurrentChainId,
   getRpcPrefsForCurrentProvider,
diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
index 3a81f204c27b..b25933c8bb70 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@@ -31,8 +31,8 @@ import {
   ButtonIcon,
   Icon,
   IconName,
+  Text,
 } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
 import TransactionDetailItem from '../../../components/app/transaction-detail-item/transaction-detail-item.component';
 import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display';
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
diff --git a/ui/pages/confirm-deploy-contract/confirm-deploy-contract.component.js b/ui/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
index 840f5b8acce3..f68aa5670a04 100644
--- a/ui/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
+++ b/ui/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ConfirmTransactionBase from '../confirm-transaction-base';
 import { toBuffer } from '../../../shared/modules/buffer-utils';
 import Box from '../../components/ui/box';
-import { Text } from '../../components/component-library/text/deprecated';
+import { Text } from '../../components/component-library;
 import {
   Color,
   DISPLAY,
diff --git a/ui/pages/create-account/connect-hardware/index.js b/ui/pages/create-account/connect-hardware/index.js
index b93a8671b297..717192998837 100644
--- a/ui/pages/create-account/connect-hardware/index.js
+++ b/ui/pages/create-account/connect-hardware/index.js
@@ -24,8 +24,8 @@ import {
   BUTTON_VARIANT,
   BUTTON_SIZES,
   Button,
+  Text,
 } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 import { TextColor } from '../../../helpers/constants/design-system';
 import SelectHardware from './select-hardware';
diff --git a/ui/pages/desktop-pairing/desktop-pairing.component.js b/ui/pages/desktop-pairing/desktop-pairing.component.js
index fb42e1d54ce1..06cdd3ece2a9 100644
--- a/ui/pages/desktop-pairing/desktop-pairing.component.js
+++ b/ui/pages/desktop-pairing/desktop-pairing.component.js
@@ -16,8 +16,7 @@ import {
 import Box from '../../components/ui/box/box';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
 import Tooltip from '../../components/ui/tooltip';
-import { Button } from '../../components/component-library';
-import { Text } from '../../components/component-library/text/deprecated';
+import { Button, Text } from '../../components/component-library';
 
 export default function DesktopPairingPage({
   generateDesktopOtp,
diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js
index a61b285fcab1..5f4eb0c296b8 100644
--- a/ui/pages/home/home.component.js
+++ b/ui/pages/home/home.component.js
@@ -46,8 +46,8 @@ import {
   ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-mmi)
   ButtonLink,
   ///: END:ONLY_INCLUDE_IN
+  Text,
 } from '../../components/component-library';
-import { Text } from '../../components/component-library/text/deprecated';
 
 import {
   ASSET_ROUTE,
diff --git a/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js
index c3ba507c55c7..f8d867f6aa56 100644
--- a/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js
+++ b/ui/pages/institutional/confirm-add-custodian-token/confirm-add-custodian-token.js
@@ -24,8 +24,8 @@ import {
   BUTTON_SIZES,
   BUTTON_VARIANT,
   Box,
+  Text,
 } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
 import {
   MetaMetricsEventCategory,
   MetaMetricsEventName,
diff --git a/ui/pages/institutional/connect-custody/account-list.js b/ui/pages/institutional/connect-custody/account-list.js
index a4f868b1839c..6541de160f67 100644
--- a/ui/pages/institutional/connect-custody/account-list.js
+++ b/ui/pages/institutional/connect-custody/account-list.js
@@ -25,8 +25,8 @@ import {
   ButtonLink,
   BUTTON_VARIANT,
   BUTTON_SIZES,
+  Text,
 } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 
 const getButtonLinkHref = (account) => {
diff --git a/ui/pages/institutional/custody/custody.js b/ui/pages/institutional/custody/custody.js
index f5e5734542e1..07a171866f33 100644
--- a/ui/pages/institutional/custody/custody.js
+++ b/ui/pages/institutional/custody/custody.js
@@ -20,8 +20,8 @@ import {
   BUTTON_SIZES,
   BUTTON_VARIANT,
   Box,
+  Text,
 } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
 import {
   AlignItems,
   Display,
diff --git a/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js
index 48b8f01451bd..07fdf345b5b0 100644
--- a/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js
+++ b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js
@@ -7,8 +7,8 @@ import {
   Box,
   Button,
   BUTTON_VARIANT,
+  Text,
 } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
 import {
   TextColor,
   TypographyVariant,
diff --git a/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.js b/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.js
index b39fc78ebc1c..db0c2d5af4b6 100644
--- a/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.js
+++ b/ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.js
@@ -26,8 +26,8 @@ import {
   Button,
   BUTTON_VARIANT,
   BUTTON_SIZES,
+  Text,
 } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
 import {
   OverflowWrap,
   TextColor,
diff --git a/ui/pages/keychains/reveal-seed.js b/ui/pages/keychains/reveal-seed.js
index 3b045a1733a6..8484f201aefb 100644
--- a/ui/pages/keychains/reveal-seed.js
+++ b/ui/pages/keychains/reveal-seed.js
@@ -31,8 +31,8 @@ import {
   TEXT_FIELD_SIZES,
   TEXT_FIELD_TYPES,
   BUTTON_SIZES,
+  Text,
 } from '../../components/component-library';
-import { Text } from '../../components/component-library/text/deprecated';
 import { useI18nContext } from '../../hooks/useI18nContext';
 import { MetaMetricsContext } from '../../contexts/metametrics';
 import ZENDESK_URLS from '../../helpers/constants/zendesk-url';
diff --git a/ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.tsx b/ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.tsx
index 37ea6e02d859..41d472c25de0 100644
--- a/ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.tsx
+++ b/ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.tsx
@@ -7,8 +7,8 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  Text
 } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
 import {
   AlignItems,
   Display,
diff --git a/ui/pages/keyring-snaps/new-snap-account-page/new-snap-account-page.tsx b/ui/pages/keyring-snaps/new-snap-account-page/new-snap-account-page.tsx
index 5510fdf735ae..2ec9aea8c6e9 100644
--- a/ui/pages/keyring-snaps/new-snap-account-page/new-snap-account-page.tsx
+++ b/ui/pages/keyring-snaps/new-snap-account-page/new-snap-account-page.tsx
@@ -2,8 +2,7 @@ import { Snap } from '@metamask/snaps-utils';
 import React, { useState, useEffect } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import { Box } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Box, Text } from '../../../components/component-library';
 import {
   AlignItems,
   Display,
diff --git a/ui/pages/keyring-snaps/snap-account-detail-page/detail.tsx b/ui/pages/keyring-snaps/snap-account-detail-page/detail.tsx
index 32aa9db0f6f1..7e47b59adc33 100644
--- a/ui/pages/keyring-snaps/snap-account-detail-page/detail.tsx
+++ b/ui/pages/keyring-snaps/snap-account-detail-page/detail.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Box } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Box, Text } from '../../../components/component-library';
 import {
   FlexDirection,
   TextVariant,
diff --git a/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx b/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx
index e0aac1947e2d..ff44b01d4906 100644
--- a/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx
+++ b/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx
@@ -9,8 +9,8 @@ import {
   Icon,
   IconName,
   Tag,
+  Text,
 } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
 import {
   AlignItems,
   BackgroundColor,
diff --git a/ui/pages/keyring-snaps/snap-account-detail-page/snap-account-detail-page.tsx b/ui/pages/keyring-snaps/snap-account-detail-page/snap-account-detail-page.tsx
index ae8cd738f517..711446ef4863 100644
--- a/ui/pages/keyring-snaps/snap-account-detail-page/snap-account-detail-page.tsx
+++ b/ui/pages/keyring-snaps/snap-account-detail-page/snap-account-detail-page.tsx
@@ -7,8 +7,8 @@ import {
   Box,
   Button,
   Tag,
+  Text,
 } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
 import {
   BlockSize,
   Display,
diff --git a/ui/pages/keyring-snaps/snap-card/snap-card.tsx b/ui/pages/keyring-snaps/snap-card/snap-card.tsx
index c44e068d4757..b7040bb7e249 100644
--- a/ui/pages/keyring-snaps/snap-card/snap-card.tsx
+++ b/ui/pages/keyring-snaps/snap-card/snap-card.tsx
@@ -9,8 +9,8 @@ import {
   Button,
   Icon,
   IconName,
+  Text,
 } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
 import {
   AlignItems,
   BackgroundColor,
diff --git a/ui/pages/onboarding-flow/pin-extension/pin-extension.js b/ui/pages/onboarding-flow/pin-extension/pin-extension.js
index 75b6e3e6c8a0..2a36be10ef68 100644
--- a/ui/pages/onboarding-flow/pin-extension/pin-extension.js
+++ b/ui/pages/onboarding-flow/pin-extension/pin-extension.js
@@ -18,7 +18,7 @@ import {
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding';
 import { getFirstTimeFlowType } from '../../../selectors';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Text } from '../../../components/component-library/';
 import OnboardingPinBillboard from './pin-billboard';
 
 export default function OnboardingPinExtension() {
diff --git a/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js b/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js
index 9775b7cbbcc4..d9056a546277 100644
--- a/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js
+++ b/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js
@@ -30,8 +30,8 @@ import {
   Button,
   BUTTON_VARIANT,
   BUTTON_SIZES,
+  Text,
 } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
 import SkipSRPBackup from './skip-srp-backup-popover';
 
 export default function SecureYourWallet() {
diff --git a/ui/pages/onboarding-flow/welcome/welcome.js b/ui/pages/onboarding-flow/welcome/welcome.js
index 2808a8a1ee2d..667d5e8fab8a 100644
--- a/ui/pages/onboarding-flow/welcome/welcome.js
+++ b/ui/pages/onboarding-flow/welcome/welcome.js
@@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom';
 import { Carousel } from 'react-responsive-carousel';
 import Mascot from '../../../components/ui/mascot';
 import Button from '../../../components/ui/button';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Text } from '../../../components/component-library';
 import CheckBox from '../../../components/ui/check-box';
 import Box from '../../../components/ui/box';
 import {
diff --git a/ui/pages/permissions-connect/snaps/snap-install/snap-install.js b/ui/pages/permissions-connect/snaps/snap-install/snap-install.js
index a69046846be3..435cace34262 100644
--- a/ui/pages/permissions-connect/snaps/snap-install/snap-install.js
+++ b/ui/pages/permissions-connect/snaps/snap-install/snap-install.js
@@ -23,8 +23,8 @@ import {
   AvatarIcon,
   IconName,
   ValidTag,
+  Text,
 } from '../../../../components/component-library';
-import { Text } from '../../../../components/component-library/text/deprecated';
 import { getSnapName } from '../../../../helpers/utils/util';
 import SnapPermissionsList from '../../../../components/app/snaps/snap-permissions-list';
 import { useScrollRequired } from '../../../../hooks/useScrollRequired';
diff --git a/ui/pages/permissions-connect/snaps/snap-result/snap-result.js b/ui/pages/permissions-connect/snaps/snap-result/snap-result.js
index 086f9f67d1ca..b5336e0e103b 100644
--- a/ui/pages/permissions-connect/snaps/snap-result/snap-result.js
+++ b/ui/pages/permissions-connect/snaps/snap-result/snap-result.js
@@ -22,8 +22,8 @@ import {
   IconName,
   IconSize,
   ValidTag,
+  Text,
 } from '../../../../components/component-library';
-import { Text } from '../../../../components/component-library/text/deprecated';
 import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader';
 import InstallError from '../../../../components/app/snaps/install-error/install-error';
 import SnapAuthorshipHeader from '../../../../components/app/snaps/snap-authorship-header';
diff --git a/ui/pages/permissions-connect/snaps/snap-update/snap-update.js b/ui/pages/permissions-connect/snaps/snap-update/snap-update.js
index 152d2a60696f..15bd1eda1cec 100644
--- a/ui/pages/permissions-connect/snaps/snap-update/snap-update.js
+++ b/ui/pages/permissions-connect/snaps/snap-update/snap-update.js
@@ -26,8 +26,8 @@ import {
   AvatarIcon,
   IconName,
   ValidTag,
+  Text,
 } from '../../../../components/component-library';
-import { Text } from '../../../../components/component-library/text/deprecated';
 import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
 import { getSnapName } from '../../../../helpers/utils/util';
 import { useScrollRequired } from '../../../../hooks/useScrollRequired';
diff --git a/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js b/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
index caa8862e6545..5462699eafee 100644
--- a/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
+++ b/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
@@ -4,8 +4,11 @@ import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import Box from '../../../../components/ui/box';
 import SiteOrigin from '../../../../components/ui/site-origin';
-import { IconSize, ValidTag } from '../../../../components/component-library';
-import { Text } from '../../../../components/component-library/text/deprecated';
+import {
+  IconSize,
+  ValidTag,
+  Text,
+} from '../../../../components/component-library';
 import {
   FlexDirection,
   TextVariant,
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.component.js b/ui/pages/send/send-content/add-recipient/add-recipient.component.js
index 72f23f1ee617..62e7ed0088ef 100644
--- a/ui/pages/send/send-content/add-recipient/add-recipient.component.js
+++ b/ui/pages/send/send-content/add-recipient/add-recipient.component.js
@@ -7,7 +7,7 @@ import ContactList from '../../../../components/app/contact-list';
 import RecipientGroup from '../../../../components/app/contact-list/recipient-group/recipient-group.component';
 import { ellipsify } from '../../send.utils';
 import Confusable from '../../../../components/ui/confusable';
-import { Text } from '../../../../components/component-library/text/deprecated';
+import { Text } from '../../../../components/component-library/';
 import Box from '../../../../components/ui/box';
 import {
   TextColor,
diff --git a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
index b9b5f4c3baec..8b8b6d165e91 100644
--- a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
+++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
@@ -12,7 +12,7 @@ import {
   AssetType,
   TokenStandard,
 } from '../../../../../shared/constants/transaction';
-import { Text } from '../../../../components/component-library/text/deprecated';
+import { Text } from '../../../../components/component-library';
 import { TextVariant } from '../../../../helpers/constants/design-system';
 
 export default class SendAssetRow extends Component {
diff --git a/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js b/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
index 8ff1a3b568c1..a53753ff34da 100644
--- a/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
+++ b/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
@@ -12,8 +12,9 @@ import {
   AvatarAccount,
   AvatarAccountSize,
   Box,
+  Text,
 } from '../../../../components/component-library';
-import { Text } from '../../../../components/component-library/text/deprecated';
+
 import {
   AlignItems,
   Display,
diff --git a/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js b/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js
index 21c80d990ea4..40c3e410f7b0 100644
--- a/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js
+++ b/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js
@@ -11,8 +11,8 @@ import {
   ButtonIcon,
   ButtonIconSize,
   IconName,
+  Text,
 } from '../../../../components/component-library';
-import { Text } from '../../../../components/component-library/text/deprecated';
 
 import Tooltip from '../../../../components/ui/tooltip';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js
index 34e444c1a5d2..7fb22d178329 100644
--- a/ui/pages/settings/experimental-tab/experimental-tab.component.js
+++ b/ui/pages/settings/experimental-tab/experimental-tab.component.js
@@ -7,7 +7,7 @@ import {
 } from '../../../helpers/utils/settings-search';
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
 import Typography from '../../../components/ui/typography/typography';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Text } from '../../../components/component-library';
 import {
   FONT_WEIGHT,
   TextColor,
diff --git a/ui/pages/settings/networks-tab/networks-list/networks-list.js b/ui/pages/settings/networks-tab/networks-list/networks-list.js
index 9fa629cd0e9a..7cb42959acf3 100644
--- a/ui/pages/settings/networks-tab/networks-list/networks-list.js
+++ b/ui/pages/settings/networks-tab/networks-list/networks-list.js
@@ -8,7 +8,7 @@ import {
   TextVariant,
 } from '../../../../helpers/constants/design-system';
 import NetworksListItem from '../networks-list-item';
-import { Text } from '../../../../components/component-library/text/deprecated';
+import { Text } from '../../../../components/component-library';
 
 const NetworksList = ({
   networkIsSelected,
diff --git a/ui/pages/settings/settings-tab/settings-tab.component.js b/ui/pages/settings/settings-tab/settings-tab.component.js
index 1f3e5770a12f..a823478c2143 100644
--- a/ui/pages/settings/settings-tab/settings-tab.component.js
+++ b/ui/pages/settings/settings-tab/settings-tab.component.js
@@ -18,7 +18,7 @@ import {
   handleSettingsRefs,
 } from '../../../helpers/utils/settings-search';
 import { ThemeType } from '../../../../shared/constants/preferences';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Text } from '../../../components/component-library';
 
 const sortedCurrencies = availableCurrencies.sort((a, b) => {
   return a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase());
diff --git a/ui/pages/settings/settings.component.js b/ui/pages/settings/settings.component.js
index 337c179522f3..c67769bada0f 100644
--- a/ui/pages/settings/settings.component.js
+++ b/ui/pages/settings/settings.component.js
@@ -34,8 +34,8 @@ import {
   Icon,
   IconName,
   Box,
+  Text,
 } from '../../components/component-library';
-import { Text } from '../../components/component-library/text/deprecated';
 import {
   AlignItems,
   Color,
diff --git a/ui/pages/settings/snaps/snaps-list-tab/snap-list-tab.js b/ui/pages/settings/snaps/snaps-list-tab/snap-list-tab.js
index 422552a5af9c..86c722425def 100644
--- a/ui/pages/settings/snaps/snaps-list-tab/snap-list-tab.js
+++ b/ui/pages/settings/snaps/snaps-list-tab/snap-list-tab.js
@@ -23,8 +23,8 @@ import {
   Icon,
   IconName,
   IconSize,
+  Text,
 } from '../../../../components/component-library';
-import { Text } from '../../../../components/component-library/text/deprecated';
 
 const SnapListTab = () => {
   const t = useI18nContext();
diff --git a/ui/pages/settings/snaps/view-snap/view-snap.js b/ui/pages/settings/snaps/view-snap/view-snap.js
index 79d8ccb7eefa..6843799fb371 100644
--- a/ui/pages/settings/snaps/view-snap/view-snap.js
+++ b/ui/pages/settings/snaps/view-snap/view-snap.js
@@ -33,8 +33,7 @@ import {
   getTargetSubjectMetadata,
 } from '../../../../selectors';
 import { getSnapName } from '../../../../helpers/utils/util';
-import { BUTTON_VARIANT } from '../../../../components/component-library';
-import { Text } from '../../../../components/component-library/text/deprecated';
+import { Text } from '../../../../components/component-library';
 import SnapPermissionsList from '../../../../components/app/snaps/snap-permissions-list';
 import { SnapDelineator } from '../../../../components/app/snaps/snap-delineator';
 import { DelineatorType } from '../../../../helpers/constants/snaps';
@@ -138,7 +137,7 @@ function ViewSnap() {
             {shouldDisplayMoreButton && (
               <Button
                 className="view-snap__description__more-button"
-                type={BUTTON_VARIANT.LINK}
+                type="link"
                 onClick={handleMoreClick}
               >
                 <Text color={Color.infoDefault}>{t('more')}</Text>
diff --git a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
index da6b202d88c3..dacb937294d9 100644
--- a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
+++ b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
@@ -32,7 +32,7 @@ import {
 import SwapsFooter from '../swaps-footer';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Text } from '../../../components/component-library';
 import SwapStepIcon from './swap-step-icon';
 
 export default function AwaitingSignatures() {
diff --git a/ui/pages/swaps/fee-card/fee-card.js b/ui/pages/swaps/fee-card/fee-card.js
index 8d02a2ee16bd..c9856fcb3df4 100644
--- a/ui/pages/swaps/fee-card/fee-card.js
+++ b/ui/pages/swaps/fee-card/fee-card.js
@@ -14,7 +14,7 @@ import {
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
 import { getUseCurrencyRateCheck } from '../../../selectors';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Text } from '../../../components/component-library';
 
 const GAS_FEES_LEARN_MORE_URL =
   'https://community.metamask.io/t/what-is-gas-why-do-transactions-take-so-long/3172';
diff --git a/ui/pages/swaps/import-token/import-token.js b/ui/pages/swaps/import-token/import-token.js
index 373da102878d..eb8983262d4c 100644
--- a/ui/pages/swaps/import-token/import-token.js
+++ b/ui/pages/swaps/import-token/import-token.js
@@ -5,7 +5,7 @@ import UrlIcon from '../../../components/ui/url-icon';
 import Popover from '../../../components/ui/popover';
 import Button from '../../../components/ui/button';
 import Box from '../../../components/ui/box';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Text } from '../../../components/component-library';
 import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
 import {
   TextVariant,
diff --git a/ui/pages/swaps/list-with-search/list-with-search.js b/ui/pages/swaps/list-with-search/list-with-search.js
index 86a8897e2d6e..1b8096d666e7 100644
--- a/ui/pages/swaps/list-with-search/list-with-search.js
+++ b/ui/pages/swaps/list-with-search/list-with-search.js
@@ -14,7 +14,7 @@ import {
   BlockSize,
 } from '../../../helpers/constants/design-system';
 import { TextFieldSearch } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Text } from '../../../components/component-library';
 import ItemList from '../searchable-item-list/item-list';
 import { isValidHexAddress } from '../../../../shared/modules/hexstring-utils';
 import { I18nContext } from '../../../contexts/i18n';
diff --git a/ui/pages/swaps/notification-page/notification-page.js b/ui/pages/swaps/notification-page/notification-page.js
index 67fb6e263521..0d114d0d0f73 100644
--- a/ui/pages/swaps/notification-page/notification-page.js
+++ b/ui/pages/swaps/notification-page/notification-page.js
@@ -14,8 +14,7 @@ import {
   TEXT_ALIGN,
   IconColor,
 } from '../../../helpers/constants/design-system';
-import { Icon, IconName } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Icon, IconName, Text } from '../../../components/component-library';
 import { PREPARE_SWAP_ROUTE } from '../../../helpers/constants/routes';
 import SwapsFooter from '../swaps-footer';
 import { QUOTES_EXPIRED_ERROR } from '../../../../shared/constants/swaps';
diff --git a/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js b/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
index 654d2b766612..2226b82d5d22 100644
--- a/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
+++ b/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js
@@ -119,9 +119,9 @@ import {
   ModalOverlay,
   ModalContent,
   ModalHeader,
+  BannerAlert,
+  Text,
 } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
-import { BannerAlert } from '../../../components/component-library/banner-alert';
 import { SWAPS_NOTIFICATION_ROUTE } from '../../../helpers/constants/routes';
 import ImportToken from '../import-token';
 import TransactionSettings from '../transaction-settings/transaction-settings';
diff --git a/ui/pages/swaps/prepare-swap-page/quotes-loading-animation.js b/ui/pages/swaps/prepare-swap-page/quotes-loading-animation.js
index f013dfe8386c..771e216392bc 100644
--- a/ui/pages/swaps/prepare-swap-page/quotes-loading-animation.js
+++ b/ui/pages/swaps/prepare-swap-page/quotes-loading-animation.js
@@ -11,7 +11,7 @@ import {
   AlignItems,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Text } from '../../../components/component-library';
 import MascotBackgroundAnimation from '../mascot-background-animation/mascot-background-animation';
 
 export default function QuotesLoadingAnimation(props) {
diff --git a/ui/pages/swaps/prepare-swap-page/review-quote.js b/ui/pages/swaps/prepare-swap-page/review-quote.js
index 3e73d97ce15d..2f9a5b4174c1 100644
--- a/ui/pages/swaps/prepare-swap-page/review-quote.js
+++ b/ui/pages/swaps/prepare-swap-page/review-quote.js
@@ -115,8 +115,11 @@ import {
   TEXT_ALIGN,
   Size,
 } from '../../../helpers/constants/design-system';
-import { BannerAlert, ButtonLink } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
+import {
+  BannerAlert,
+  ButtonLink,
+  Text,
+} from '../../../components/component-library';
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
 import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils';
 import { parseStandardTokenTransactionData } from '../../../../shared/modules/transaction.utils';
diff --git a/ui/pages/swaps/prepare-swap-page/smart-transactions-popover.js b/ui/pages/swaps/prepare-swap-page/smart-transactions-popover.js
index 839e11ececb6..75c4056ac011 100644
--- a/ui/pages/swaps/prepare-swap-page/smart-transactions-popover.js
+++ b/ui/pages/swaps/prepare-swap-page/smart-transactions-popover.js
@@ -14,7 +14,7 @@ import {
   FONT_WEIGHT,
   TextColor,
 } from '../../../helpers/constants/design-system';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Text } from '../../../components/component-library';
 import PopoverCustomBackground from '../popover-custom-background/popover-custom-background';
 
 export default function SmartTransactionsPopover({
diff --git a/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js b/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js
index 9db5fd2e92a7..c32d784397bf 100644
--- a/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js
+++ b/ui/pages/swaps/prepare-swap-page/view-quote-price-difference.js
@@ -12,8 +12,11 @@ import {
   BLOCK_SIZES,
 } from '../../../helpers/constants/design-system';
 import { GasRecommendations } from '../../../../shared/constants/gas';
-import { BannerAlert, ButtonLink } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
+import {
+  BannerAlert,
+  ButtonLink,
+  Text,
+} from '../../../components/component-library';
 
 export default function ViewQuotePriceDifference(props) {
   const {
diff --git a/ui/pages/swaps/slippage-buttons/slippage-buttons.js b/ui/pages/swaps/slippage-buttons/slippage-buttons.js
index b649e2442608..64f81d7f956d 100644
--- a/ui/pages/swaps/slippage-buttons/slippage-buttons.js
+++ b/ui/pages/swaps/slippage-buttons/slippage-buttons.js
@@ -15,7 +15,7 @@ import {
 } from '../../../helpers/constants/design-system';
 import { getTranslatedStxErrorMessage } from '../swaps.util';
 import { Slippage } from '../../../../shared/constants/swaps';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Text } from '../../../components/component-library';
 
 export default function SlippageButtons({
   onSelect,
diff --git a/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js b/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
index 7abba8697cfa..9285fcb5e7d6 100644
--- a/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
+++ b/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
@@ -31,7 +31,7 @@ import {
   DEFAULT_ROUTE,
   BUILD_QUOTE_ROUTE,
 } from '../../../helpers/constants/routes';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { Text } from '../../../components/component-library';
 import Box from '../../../components/ui/box';
 import UrlIcon from '../../../components/ui/url-icon';
 import {
diff --git a/ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js b/ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js
index ef9bc00633b0..992ca97e9069 100644
--- a/ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js
+++ b/ui/pages/swaps/swaps-banner-alert/swaps-banner-alert.js
@@ -11,8 +11,8 @@ import {
   Size,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import { ButtonLink } from '../../../components/component-library';
-import { Text } from '../../../components/component-library/text/deprecated';
+import { ButtonLink, Text } from '../../../components/component-library';
+
 import {
   QUOTES_EXPIRED_ERROR,
   SWAP_FAILED_ERROR,
diff --git a/ui/pages/token-allowance/token-allowance.js b/ui/pages/token-allowance/token-allowance.js
index aeae9d5c5c61..d5c90a3a52bc 100644
--- a/ui/pages/token-allowance/token-allowance.js
+++ b/ui/pages/token-allowance/token-allowance.js
@@ -65,8 +65,7 @@ import { useSimulationFailureWarning } from '../../hooks/useSimulationFailureWar
 import SimulationErrorMessage from '../../components/ui/simulation-error-message';
 import LedgerInstructionField from '../../components/app/ledger-instruction-field/ledger-instruction-field';
 import SecurityProviderBannerMessage from '../../components/app/security-provider-banner-message/security-provider-banner-message';
-import { Icon, IconName } from '../../components/component-library';
-import { Text } from '../../components/component-library/text/deprecated';
+import { Icon, IconName, Text } from '../../components/component-library';
 import { ConfirmPageContainerWarning } from '../../components/app/confirm-page-container/confirm-page-container-content';
 import CustomNonce from '../../components/app/custom-nonce';
 
diff --git a/ui/pages/token-details/token-details-page.js b/ui/pages/token-details/token-details-page.js
index 9b9d515ef714..17f058187780 100644
--- a/ui/pages/token-details/token-details-page.js
+++ b/ui/pages/token-details/token-details-page.js
@@ -28,8 +28,8 @@ import {
   ButtonIcon,
   ButtonIconSize,
   IconName,
+  Text,
 } from '../../components/component-library';
-import { Text } from '../../components/component-library/text/deprecated';
 
 export default function TokenDetailsPage() {
   const dispatch = useDispatch();

From 59cb054d91efb4ab1b21e361278813ad2f6ae14e Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Thu, 20 Jul 2023 10:48:41 -0700
Subject: [PATCH 2/2] Updating snapshots

---
 ...irm-approve-content.component.test.js.snap |  8 ++---
 .../confirm-deploy-contract.component.js      |  2 +-
 .../desktop-pairing.test.js.snap              | 10 +++---
 .../__snapshots__/account-list.test.js.snap   |  8 ++---
 .../__snapshots__/custody.test.js.snap        |  8 ++---
 ...active-replacement-token-page.test.js.snap |  2 +-
 .../__snapshots__/reveal-seed.test.js.snap    | 12 +++----
 .../add-snap-account-modal.tsx                |  2 +-
 .../snap-account-detail-page.test.tsx.snap    | 34 +++++++++----------
 .../__snapshots__/snap-card.test.tsx.snap     |  6 ++--
 .../pin-extension/pin-extension.js            |  2 +-
 .../add-recipient.component.test.js.snap      |  6 ++--
 .../add-recipient/add-recipient.component.js  |  2 +-
 .../experimental-tab.test.js.snap             | 16 ++++-----
 .../list-with-search/list-with-search.js      |  3 +-
 .../token-allowance.test.js.snap              | 10 +++---
 16 files changed, 65 insertions(+), 66 deletions(-)

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 dc9d1836c44f..b8541a2cd3ea 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
@@ -21,7 +21,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
           />
         </div>
         <h6
-          class="box mm-text mm-text--body-sm box--margin-left-1 box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-box--margin-left-1 mm-box--color-text-alternative"
         >
           https://metamask.github.io/test-dapp/
         </h6>
@@ -195,7 +195,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
           />
         </div>
         <h6
-          class="box mm-text mm-text--body-sm box--margin-left-1 box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-box--margin-left-1 mm-box--color-text-alternative"
         >
           https://metamask.github.io/test-dapp/
         </h6>
@@ -380,7 +380,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
           />
         </div>
         <h6
-          class="box mm-text mm-text--body-sm box--margin-left-1 box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-box--margin-left-1 mm-box--color-text-alternative"
         >
           https://metamask.github.io/test-dapp/
         </h6>
@@ -565,7 +565,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr
           />
         </div>
         <h6
-          class="box mm-text mm-text--body-sm box--margin-left-1 box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-box--margin-left-1 mm-box--color-text-alternative"
         >
           https://metamask.github.io/test-dapp/
         </h6>
diff --git a/ui/pages/confirm-deploy-contract/confirm-deploy-contract.component.js b/ui/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
index f68aa5670a04..6c663db0be27 100644
--- a/ui/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
+++ b/ui/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ConfirmTransactionBase from '../confirm-transaction-base';
 import { toBuffer } from '../../../shared/modules/buffer-utils';
 import Box from '../../components/ui/box';
-import { Text } from '../../components/component-library;
+import { Text } from '../../components/component-library';
 import {
   Color,
   DISPLAY,
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 b61c196b7939..4a7735af9233 100644
--- a/ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap
+++ b/ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap
@@ -92,13 +92,13 @@ exports[`Desktop Pairing page should render otp component 1`] = `
     </div>
     <h3
       align="center"
-      class="box mm-text mm-text--heading-md box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text mm-text--heading-md mm-box--color-text-default"
     >
       Pair with Desktop
     </h3>
     <p
       align="center"
-      class="box mm-text mm-text--body-md box--margin-top-2 box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text mm-text--body-md mm-box--margin-top-2 mm-box--color-text-default"
     >
       Open your MetaMask Desktop and type this code
     </p>
@@ -119,7 +119,7 @@ exports[`Desktop Pairing page should render otp component 1`] = `
         >
           <h1
             align="center"
-            class="box mm-text desktop-pairing__otp mm-text--display-md box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text desktop-pairing__otp mm-text--display-md mm-box--color-text-default"
           >
             123456
           </h1>
@@ -130,7 +130,7 @@ exports[`Desktop Pairing page should render otp component 1`] = `
       >
         <p
           align="center"
-          class="box mm-text desktop-pairing__countdown-timer mm-text--body-md box--padding-2 box--flex-direction-row box--color-text-default box--background-color-background-default box--rounded-xl"
+          class="mm-box mm-text desktop-pairing__countdown-timer mm-text--body-md mm-box--padding-2 mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-xl"
         >
           <span>
              
@@ -147,7 +147,7 @@ exports[`Desktop Pairing page should render otp component 1`] = `
       </div>
       <p
         align="center"
-        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"
       >
         If the pairing is successful, extension will restart and you'll have to re-enter your password.
       </p>
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 87ea155d8711..21d5935acd4e 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
@@ -33,7 +33,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
               for="address-0"
             >
               <span
-                class="box mm-text custody-account-list__item__name mm-text--inherit box--padding-right-1 box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text custody-account-list__item__name mm-text--inherit mm-box--padding-right-1 mm-box--color-text-default"
               >
                 Test Account 1
               </span>
@@ -43,7 +43,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
               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"
+                class="mm-box mm-text custody-account-list__item mm-text--body-md mm-box--display-flex mm-box--color-text-default"
               >
                 <a
                   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"
@@ -108,7 +108,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
               for="address-1"
             >
               <span
-                class="box mm-text custody-account-list__item__name mm-text--inherit box--padding-right-1 box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text custody-account-list__item__name mm-text--inherit mm-box--padding-right-1 mm-box--color-text-default"
               >
                 Test Account 2
               </span>
@@ -118,7 +118,7 @@ exports[`CustodyAccountList renders accounts 1`] = `
               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"
+                class="mm-box mm-text custody-account-list__item mm-text--body-md mm-box--display-flex mm-box--color-text-default"
               >
                 <a
                   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"
diff --git a/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap b/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
index 4a5a1184caa0..eaacf61073e3 100644
--- a/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
+++ b/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap
@@ -41,18 +41,18 @@ exports[`CustodyPage renders CustodyPage 2`] = `
           />
         </button>
         <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"
         >
           Back
         </p>
       </div>
       <h4
-        class="box mm-text mm-text--body-lg-medium box--margin-top-4 box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--body-lg-medium mm-box--margin-top-4 mm-box--color-text-default"
       >
         Custodial Accounts
       </h4>
       <h6
-        class="box mm-text mm-text--body-md box--margin-top-2 box--margin-bottom-5 box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-box--margin-top-2 mm-box--margin-bottom-5 mm-box--color-text-default"
       >
         Please choose the custodian you want to connect in order to add or refresh a token.
       </h6>
@@ -75,7 +75,7 @@ exports[`CustodyPage renders CustodyPage 2`] = `
                 width="32"
               />
               <p
-                class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-text-default"
               >
                 Saturn Custody
               </p>
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 886dd9d7d799..c0c0e80554cf 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
@@ -81,7 +81,7 @@ exports[`Interactive Replacement Token Page should reject if there are errors 2`
         overflowwrap="break-word"
       >
         <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"
           data-testid="connect-error-message"
         >
           Please go to displayName and click the 'Connect to MMI' button within their user interface to connect your accounts to MMI again.
diff --git a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
index e95fb80121c2..0d6c31b91822 100644
--- a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
+++ b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
@@ -6,12 +6,12 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
     class="box page-container box--padding-top-8 box--padding-right-4 box--padding-bottom-8 box--padding-left-4 box--gap-4 box--flex-direction-row"
   >
     <h2
-      class="box mm-text mm-text--heading-lg box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text mm-text--heading-lg mm-box--color-text-default"
     >
       Secret Recovery Phrase
     </h2>
     <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"
     >
       <span>
          
@@ -26,7 +26,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
         </a>
          provides 
         <strong
-          class="box mm-text mm-text--body-md-bold mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text mm-text--body-md-bold mm-box--color-text-default"
         >
           full access to your wallet and funds.
 
@@ -36,7 +36,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
       </span>
     </p>
     <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"
     >
       <span>
          
@@ -62,13 +62,13 @@ exports[`Reveal Seed Page 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"
         >
           <span>
              
             Make sure no one is looking at your screen. 
             <strong
-              class="box mm-text mm-text--body-md-bold mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
+              class="mm-box mm-text mm-text--body-md-bold mm-box--color-text-default"
             >
               MetaMask Support will never request this.
             </strong>
diff --git a/ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.tsx b/ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.tsx
index 41d472c25de0..374f17b461b9 100644
--- a/ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.tsx
+++ b/ui/pages/keyring-snaps/add-snap-account-modal/add-snap-account-modal.tsx
@@ -7,7 +7,7 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
-  Text
+  Text,
 } from '../../../components/component-library';
 import {
   AlignItems,
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 df8387fb1dff..2cf92a64007c 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
@@ -21,7 +21,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           style="mask-image: url('./images/icons/arrow-right.svg');"
         />
         <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"
         >
           Metamask Simple Keyring
         </p>
@@ -33,7 +33,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
         >
           <h2
-            class="box mm-text mm-text--heading-lg box--margin-right-1 box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text mm-text--heading-lg mm-box--margin-right-1 mm-box--color-text-default"
           >
             Metamask Simple Keyring
           </h2>
@@ -75,7 +75,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
               />
                
               <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"
               >
                 By MetaMask
               </p>
@@ -97,7 +97,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
               />
                
               <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"
               >
                 Audited
               </p>
@@ -113,12 +113,12 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
         class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--width-4/5"
       >
         <p
-          class="box mm-text mm-text--body-md-bold box--margin-bottom-2 box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-md-bold mm-box--margin-bottom-2 mm-box--color-text-alternative"
         >
           Secure your account with MetaMask Mobile
         </p>
         <p
-          class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
         >
           A simple private key is a randomly generated string of characters that is used to sign transactions. This private key is stored securely within this snap.
         </p>
@@ -130,7 +130,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="mm-box mm-box--margin-bottom-4 mm-box--flex-direction-column"
         >
           <p
-            class="box mm-text mm-text--body-sm-bold box--margin-bottom-1 box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm-bold mm-box--margin-bottom-1 mm-box--color-text-default"
           >
             Tags
           </p>
@@ -148,12 +148,12 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="mm-box mm-box--margin-bottom-4 mm-box--flex-direction-column"
         >
           <p
-            class="box mm-text mm-text--body-sm-bold box--margin-bottom-1 box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm-bold mm-box--margin-bottom-1 mm-box--color-text-default"
           >
             Developer
           </p>
           <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"
           >
             Metamask
           </p>
@@ -162,7 +162,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="mm-box mm-box--margin-bottom-4 mm-box--flex-direction-column"
         >
           <p
-            class="box mm-text mm-text--body-sm-bold box--margin-bottom-1 box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm-bold mm-box--margin-bottom-1 mm-box--color-text-default"
           >
             Website
           </p>
@@ -172,12 +172,12 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="mm-box mm-box--margin-bottom-4 mm-box--flex-direction-column"
         >
           <p
-            class="box mm-text mm-text--body-sm-bold box--margin-bottom-1 box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm-bold mm-box--margin-bottom-1 mm-box--color-text-default"
           >
             Audit
           </p>
           <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"
           >
             <a
               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"
@@ -187,7 +187,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
             </a>
           </p>
           <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"
           >
             <a
               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"
@@ -201,12 +201,12 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="mm-box mm-box--margin-bottom-4 mm-box--flex-direction-column"
         >
           <p
-            class="box mm-text mm-text--body-sm-bold box--margin-bottom-1 box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm-bold mm-box--margin-bottom-1 mm-box--color-text-default"
           >
             Version
           </p>
           <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"
           >
             1.0.0
           </p>
@@ -215,12 +215,12 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           class="mm-box mm-box--margin-bottom-4 mm-box--flex-direction-column"
         >
           <p
-            class="box mm-text mm-text--body-sm-bold box--margin-bottom-1 box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm-bold mm-box--margin-bottom-1 mm-box--color-text-default"
           >
             Updated
           </p>
           <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"
           >
             April 20, 2023
           </p>
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 d9763d39293f..8ebecf6189c8 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
@@ -17,7 +17,7 @@ exports[`SnapCard should render 1`] = `
           class="mm-box snap-detail-icon mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
         >
           <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"
           >
             M
           </p>
@@ -31,12 +31,12 @@ exports[`SnapCard should render 1`] = `
       </button>
     </div>
     <p
-      class="box mm-text mm-text--body-sm box--margin-bottom-2 box--flex-direction-row box--color-text-alternative"
+      class="mm-box mm-text mm-text--body-sm mm-box--margin-bottom-2 mm-box--color-text-alternative"
     >
       Metamask Simple Keyring
     </p>
     <h3
-      class="box mm-text mm-text--heading-md box--margin-bottom-auto box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text mm-text--heading-md mm-box--margin-bottom-auto mm-box--color-text-default"
     >
       Secure your account with MetaMask Mobile
     </h3>
diff --git a/ui/pages/onboarding-flow/pin-extension/pin-extension.js b/ui/pages/onboarding-flow/pin-extension/pin-extension.js
index 2a36be10ef68..0c14d704edde 100644
--- a/ui/pages/onboarding-flow/pin-extension/pin-extension.js
+++ b/ui/pages/onboarding-flow/pin-extension/pin-extension.js
@@ -18,7 +18,7 @@ import {
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding';
 import { getFirstTimeFlowType } from '../../../selectors';
-import { Text } from '../../../components/component-library/';
+import { Text } from '../../../components/component-library';
 import OnboardingPinBillboard from './pin-billboard';
 
 export default function OnboardingPinExtension() {
diff --git a/ui/pages/send/send-content/add-recipient/__snapshots__/add-recipient.component.test.js.snap b/ui/pages/send/send-content/add-recipient/__snapshots__/add-recipient.component.test.js.snap
index d45ee0317bfc..b6587dd99582 100644
--- a/ui/pages/send/send-content/add-recipient/__snapshots__/add-recipient.component.test.js.snap
+++ b/ui/pages/send/send-content/add-recipient/__snapshots__/add-recipient.component.test.js.snap
@@ -9,7 +9,7 @@ exports[`Add Recipient Component Domain Resolution should match snapshot 1`] = `
       class="box box--margin-top-2 box--margin-right-4 box--margin-bottom-2 box--margin-left-4 box--flex-direction-row"
     >
       <p
-        class="box mm-text mm-text--body-lg-medium box--flex-direction-row box--color-text-alternative"
+        class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-alternative"
       >
         Your accounts
       </p>
@@ -445,7 +445,7 @@ exports[`Add Recipient Component render should match snapshot 1`] = `
       class="box box--margin-top-2 box--margin-right-4 box--margin-bottom-2 box--margin-left-4 box--flex-direction-row"
     >
       <p
-        class="box mm-text mm-text--body-lg-medium box--flex-direction-row box--color-text-alternative"
+        class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-alternative"
       >
         Your accounts
       </p>
@@ -718,7 +718,7 @@ exports[`Add Recipient Component render should match snapshot 1`] = `
         class="box box--margin-top-2 box--margin-right-4 box--margin-bottom-2 box--margin-left-4 box--flex-direction-row"
       >
         <p
-          class="box mm-text mm-text--body-lg-medium box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-alternative"
         >
           Contacts
         </p>
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.component.js b/ui/pages/send/send-content/add-recipient/add-recipient.component.js
index 62e7ed0088ef..67533a739787 100644
--- a/ui/pages/send/send-content/add-recipient/add-recipient.component.js
+++ b/ui/pages/send/send-content/add-recipient/add-recipient.component.js
@@ -7,7 +7,7 @@ import ContactList from '../../../../components/app/contact-list';
 import RecipientGroup from '../../../../components/app/contact-list/recipient-group/recipient-group.component';
 import { ellipsify } from '../../send.utils';
 import Confusable from '../../../../components/ui/confusable';
-import { Text } from '../../../../components/component-library/';
+import { Text } from '../../../../components/component-library';
 import Box from '../../../../components/ui/box';
 import {
   TextColor,
diff --git a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
index ecab1af296d7..ea627b70cff9 100644
--- a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
+++ b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
@@ -6,7 +6,7 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
     class="settings-page__body"
   >
     <h4
-      class="box mm-text mm-text--heading-sm box--margin-bottom-2 box--flex-direction-row box--color-text-alternative"
+      class="mm-box mm-text mm-text--heading-sm mm-box--margin-bottom-2 mm-box--color-text-alternative"
     >
       Security
     </h4>
@@ -23,17 +23,17 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
           class="settings-page__content-description"
         >
           <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"
           >
             Enable this to have your transactions and signature requests reviewed locally (no data shared with third parties) and warnings displayed when malicious activity is detected.
           </p>
           <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"
           >
             Always be sure to do your own due diligence before approving any requests. There's no guarantee all mailcious activity will be detected by this feature.
           </p>
           <p
-            class="box mm-text mm-text--body-sm box--margin-top-3 box--margin-bottom-1 box--flex-direction-row box--color-text-alternative"
+            class="mm-box mm-text mm-text--body-sm mm-box--margin-top-3 mm-box--margin-bottom-1 mm-box--color-text-alternative"
           >
             Select providers:
           </p>
@@ -41,7 +41,7 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
             class="settings-page__content-item-col settings-page__content-item-col-open-sea"
           >
             <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--margin-bottom-0 mm-box--color-text-default"
             >
               Blockaid
             </p>
@@ -88,7 +88,7 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
             </label>
           </div>
           <p
-            class="box mm-text mm-text--body-md box--margin-top-2 box--flex-direction-row box--color-text-muted"
+            class="mm-box mm-text mm-text--body-md mm-box--margin-top-2 mm-box--color-text-muted"
           >
             More coming soon...
           </p>
@@ -279,7 +279,7 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
           class="settings-page__content-description"
         >
           <p
-            class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-alternative"
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
           >
             We use third-party APIs to detect NFTs in your wallet, which means your IP address may be exposed to centralized servers. There are a few things to be cautious about when enabling this feature.
           </p>
@@ -297,7 +297,7 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
             </li>
           </ul>
           <p
-            class="box mm-text mm-text--body-md box--padding-top-4 box--flex-direction-row box--color-text-alternative"
+            class="mm-box mm-text mm-text--body-md mm-box--padding-top-4 mm-box--color-text-alternative"
           >
             Leave this feature off if you don't want the app to pull data from those services.
           </p>
diff --git a/ui/pages/swaps/list-with-search/list-with-search.js b/ui/pages/swaps/list-with-search/list-with-search.js
index 1b8096d666e7..aeddbacb1592 100644
--- a/ui/pages/swaps/list-with-search/list-with-search.js
+++ b/ui/pages/swaps/list-with-search/list-with-search.js
@@ -13,8 +13,7 @@ import {
   TextVariant,
   BlockSize,
 } from '../../../helpers/constants/design-system';
-import { TextFieldSearch } from '../../../components/component-library';
-import { Text } from '../../../components/component-library';
+import { TextFieldSearch, Text } from '../../../components/component-library';
 import ItemList from '../searchable-item-list/item-list';
 import { isValidHexAddress } from '../../../../shared/modules/hexstring-utils';
 import { I18nContext } from '../../../contexts/i18n';
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 ea4f9bf143b3..a99d49bc0beb 100644
--- a/ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap
+++ b/ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap
@@ -85,7 +85,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
         class="box box--flex-direction-row box--text-align-end"
       >
         <h6
-          class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-muted"
+          class="mm-box mm-text mm-text--body-sm mm-text--font-weight-bold mm-box--color-text-muted"
         >
           1
            
@@ -207,7 +207,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
           />
         </div>
         <h6
-          class="box mm-text mm-text--body-sm box--margin-left-1 box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-box--margin-left-1 mm-box--color-text-alternative"
         >
           https://metamask.github.io
         </h6>
@@ -218,7 +218,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
     >
       <h3
         align="center"
-        class="box mm-text mm-text--heading-md box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--heading-md mm-box--color-text-default"
       >
         <span>
            
@@ -334,7 +334,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
         tabindex="0"
       >
         <h6
-          class="box mm-text mm-text--body-sm box--flex-direction-row box--color-primary-default"
+          class="mm-box mm-text mm-text--body-sm mm-box--color-primary-default"
         >
           Verify third-party details
         </h6>
@@ -452,7 +452,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
         tabindex="0"
       >
         <h6
-          class="box mm-text mm-text--body-sm box--margin-right-1 box--flex-direction-row box--color-primary-default"
+          class="mm-box mm-text mm-text--body-sm mm-box--margin-right-1 mm-box--color-primary-default"
         >
           View details
         </h6>