From f9649a27f859e460c948c48a553620800de43ff8 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Wed, 19 Jul 2023 10:55:38 -0700
Subject: [PATCH] Update Text import paths: /ui (#20076)

* Updating Text import paths in ui folder

* Updating snapshot
---
 .../tests/custom-token-add-approve.spec.js    |  8 ++---
 .../custom-spending-cap.test.js.snap          | 12 ++++----
 .../custom-spending-cap.js                    |  8 ++---
 ui/components/ui/box/box.stories.tsx          |  2 +-
 ui/components/ui/callout/callout.js           |  3 +-
 ui/components/ui/callout/callout.stories.js   |  4 +--
 .../deprecated-test-networks.js               |  3 +-
 .../ui/editable-label/editable-label.js       | 10 +++++--
 .../export-text-container.component.js        | 16 +++++-----
 ui/components/ui/form-field/form-field.js     | 10 ++-----
 .../ui/form-field/form-field.stories.js       |  3 +-
 ui/components/ui/icon-button/icon-button.js   |  2 +-
 ui/components/ui/logo/logo.stories.js         |  4 +--
 ui/components/ui/menu/menu-item.js            |  3 +-
 .../ui/metafox-logo/metafox-logo.stories.js   |  2 +-
 .../ui/new-network-info/new-network-info.js   |  3 +-
 ui/components/ui/nft-info/nft-info.js         | 21 ++++---------
 .../numeric-input/numeric-input.component.js  |  2 +-
 ui/components/ui/popover/popover.component.js |  9 ++++--
 .../ui/radio-group/radio-group.component.js   |  2 +-
 .../review-spending-cap.js                    | 30 +++++++++++--------
 ui/components/ui/slider/slider.component.js   |  2 +-
 .../tabs/snaps/dropdown-tab/dropdown-tab.js   |  3 +-
 .../add-ethereum-chain.test.js.snap           |  4 +--
 .../switch-ethereum-chain.test.js.snap        |  2 +-
 .../add-network-modal.test.js.snap            | 18 ++++-------
 .../create-password.test.js.snap              |  6 ++--
 .../token-allowance.test.js.snap              | 12 ++++----
 28 files changed, 92 insertions(+), 112 deletions(-)

diff --git a/test/e2e/tests/custom-token-add-approve.spec.js b/test/e2e/tests/custom-token-add-approve.spec.js
index 3745326e1..f694cd564 100644
--- a/test/e2e/tests/custom-token-add-approve.spec.js
+++ b/test/e2e/tests/custom-token-add-approve.spec.js
@@ -159,7 +159,7 @@ describe('Create token, approve token and approve token without gas', function (
 
         const defaultSpendingCap = await driver.findElement({
           text: '7 TST',
-          css: '.box--flex-direction-row > h6',
+          css: '.mm-box > h6',
         });
 
         assert.equal(
@@ -249,7 +249,7 @@ describe('Create token, approve token and approve token without gas', function (
 
         let spendingCap = await driver.findElement({
           text: '5 TST',
-          css: '.box--flex-direction-row > h6',
+          css: '.mm-box > h6',
         });
 
         assert.equal(
@@ -305,7 +305,7 @@ describe('Create token, approve token and approve token without gas', function (
 
         spendingCap = await driver.findElement({
           text: '9 TST',
-          css: '.box--flex-direction-row > h6',
+          css: '.mm-box > h6',
         });
         assert.equal(
           await spendingCap.getText(),
@@ -393,7 +393,7 @@ describe('Create token, approve token and approve token without gas', function (
 
         const maxSpendingCap = await driver.findElement({
           text: '10 TST',
-          css: '.box--flex-direction-row > h6',
+          css: '.mm-box > h6',
         });
 
         assert.equal(
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 caad709f3..e2ec88c0a 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
@@ -24,9 +24,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
                 class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
               >
                 <h6
-                  class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
-                  for="custom-spending-cap"
-                  tag="label"
+                  class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
                 >
                   Custom spending cap
                 </h6>
@@ -76,18 +74,18 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
           class="box custom-spending-cap__description box--flex-direction-row"
         >
           <h6
-            class="box mm-text mm-text--body-sm box--padding-top-2 box--flex-direction-row box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"
           >
             <span>
                
               This allows the third party to spend 
-              <h6
-                class="box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
+              <span
+                class="mm-box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold mm-box--color-text-default"
               >
                 7
                  
                 TST
-              </h6>
+              </span>
                from your current balance.
                
             </span>
diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.js b/ui/components/app/custom-spending-cap/custom-spending-cap.js
index a581dd5be..ec209fd4a 100644
--- a/ui/components/app/custom-spending-cap/custom-spending-cap.js
+++ b/ui/components/app/custom-spending-cap/custom-spending-cap.js
@@ -8,8 +8,8 @@ import { addHexPrefix } from 'ethereumjs-util';
 import { I18nContext } from '../../../contexts/i18n';
 import Box from '../../ui/box';
 import FormField from '../../ui/form-field';
-import { ButtonLink, Icon, IconName } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { ButtonLink, Icon, IconName, Text } from '../../component-library';
+
 import {
   AlignItems,
   TextAlign,
@@ -82,7 +82,7 @@ export default function CustomSpendingCap({
           <Text
             key="custom-spending-cap"
             variant={TextVariant.bodySmBold}
-            as="h6"
+            as="span"
             className="custom-spending-cap__input-value-and-token-name"
           >
             {replaceCommaToDot(inputNumber)} {tokenName}
@@ -197,7 +197,7 @@ export default function CustomSpendingCap({
         <Text
           key="tooltip-text"
           variant={TextVariant.bodySmBold}
-          as="h6"
+          as="span"
           color={TextColor.errorDefault}
         >
           <Icon name={IconName.Warning} /> {t('beCareful')}
diff --git a/ui/components/ui/box/box.stories.tsx b/ui/components/ui/box/box.stories.tsx
index 1450fce89..1491ae6e2 100644
--- a/ui/components/ui/box/box.stories.tsx
+++ b/ui/components/ui/box/box.stories.tsx
@@ -16,7 +16,7 @@ import {
   FlexWrap,
 } from '../../../helpers/constants/design-system';
 
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';
 
 import Box from './box';
 
diff --git a/ui/components/ui/callout/callout.js b/ui/components/ui/callout/callout.js
index 6010129ed..c2a8f671d 100644
--- a/ui/components/ui/callout/callout.js
+++ b/ui/components/ui/callout/callout.js
@@ -4,8 +4,7 @@ import classnames from 'classnames';
 import InfoIconInverted from '../icon/info-icon-inverted.component';
 import { Severity, TextColor } from '../../../helpers/constants/design-system';
 import { MILLISECOND } from '../../../../shared/constants/time';
-import { ButtonIcon, IconName, IconSize } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { ButtonIcon, IconName, IconSize, Text } from '../../component-library';
 
 /**
  * @deprecated `<Callout />` has been deprecated in favor of the `<BannerAlert />`
diff --git a/ui/components/ui/callout/callout.stories.js b/ui/components/ui/callout/callout.stories.js
index 386ae05bf..20e00dcad 100644
--- a/ui/components/ui/callout/callout.stories.js
+++ b/ui/components/ui/callout/callout.stories.js
@@ -4,8 +4,8 @@ import {
   SEVERITIES,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import Box from '../box';
-import { Text } from '../../component-library/text/deprecated';
+
+import { Text, Box } from '../../component-library';
 import Callout from './callout';
 
 export default {
diff --git a/ui/components/ui/deprecated-test-networks/deprecated-test-networks.js b/ui/components/ui/deprecated-test-networks/deprecated-test-networks.js
index a2107f342..3c2bed230 100644
--- a/ui/components/ui/deprecated-test-networks/deprecated-test-networks.js
+++ b/ui/components/ui/deprecated-test-networks/deprecated-test-networks.js
@@ -12,8 +12,7 @@ import Box from '../box/box';
 import ActionableMessage from '../actionable-message/actionable-message';
 import { getCurrentChainId } from '../../../selectors';
 import { getCompletedOnboarding } from '../../../ducks/metamask/metamask';
-import { Icon, IconName, IconSize } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { Icon, IconName, IconSize, Text } from '../../component-library';
 
 export default function DeprecatedTestNetworks() {
   const currentChainID = useSelector(getCurrentChainId);
diff --git a/ui/components/ui/editable-label/editable-label.js b/ui/components/ui/editable-label/editable-label.js
index 651897afa..ec0f18df7 100644
--- a/ui/components/ui/editable-label/editable-label.js
+++ b/ui/components/ui/editable-label/editable-label.js
@@ -8,9 +8,13 @@ import {
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { getAccountNameErrorMessage } from '../../../helpers/utils/accounts';
-import { ButtonIcon, FormTextField, IconName } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
-import Box from '../box/box';
+import {
+  ButtonIcon,
+  FormTextField,
+  IconName,
+  Text,
+  Box,
+} from '../../component-library';
 
 export default class EditableLabel extends Component {
   static propTypes = {
diff --git a/ui/components/ui/export-text-container/export-text-container.component.js b/ui/components/ui/export-text-container/export-text-container.component.js
index 85f1f1943..cf66895df 100644
--- a/ui/components/ui/export-text-container/export-text-container.component.js
+++ b/ui/components/ui/export-text-container/export-text-container.component.js
@@ -6,14 +6,12 @@ import {
   AlignItems,
   BorderColor,
   BorderRadius,
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   JustifyContent,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import Box from '../box/box';
-import { ButtonSecondary } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { ButtonSecondary, Text, Box } from '../../component-library';
 
 function ExportTextContainer({ text = '', onClickCopy = null }) {
   const ONE_MINUTE = 1000 * 60;
@@ -22,9 +20,9 @@ function ExportTextContainer({ text = '', onClickCopy = null }) {
 
   return (
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       justifyContent={JustifyContent.center}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      flexDirection={FlexDirection.Column}
       alignItems={AlignItems.center}
       borderColor={BorderColor.borderDefault}
       borderRadius={BorderRadius.MD}
@@ -32,8 +30,8 @@ function ExportTextContainer({ text = '', onClickCopy = null }) {
       gap={4}
     >
       <Text
-        display={DISPLAY.FLEX}
-        justifyContent={JustifyContent.CENTER}
+        display={Display.Flex}
+        justifyContent={JustifyContent.center}
         className="notranslate"
         variant={TextVariant.bodyLgMedium}
         data-testid="srp_text"
diff --git a/ui/components/ui/form-field/form-field.js b/ui/components/ui/form-field/form-field.js
index ba522fa4b..55b50506a 100644
--- a/ui/components/ui/form-field/form-field.js
+++ b/ui/components/ui/form-field/form-field.js
@@ -12,8 +12,7 @@ import {
 
 import NumericInput from '../numeric-input/numeric-input.component';
 import InfoTooltip from '../info-tooltip/info-tooltip';
-import { Box } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { Text, Box } from '../../component-library';
 
 /**
  * @deprecated The `<FormField />` component has been deprecated in favor of the new `<FormTextField>` component from the component-library.
@@ -70,10 +69,8 @@ export default function FormField({
             {TitleTextCustomComponent ||
               (titleText && (
                 <Text
-                  tag="label"
-                  htmlFor={id}
-                  variant={TextVariant.bodySmBold}
                   as="h6"
+                  variant={TextVariant.bodySmBold}
                   display={Display.InlineBlock}
                 >
                   {titleText}
@@ -82,9 +79,8 @@ export default function FormField({
             {TitleUnitCustomComponent ||
               (titleUnit && (
                 <Text
-                  tag={TextVariant.bodySm}
-                  variant={TextVariant.bodySm}
                   as="h6"
+                  variant={TextVariant.bodySm}
                   color={TextColor.textAlternative}
                   display={Display.InlineBlock}
                 >
diff --git a/ui/components/ui/form-field/form-field.stories.js b/ui/components/ui/form-field/form-field.stories.js
index 1a4f6bc9d..16022af64 100644
--- a/ui/components/ui/form-field/form-field.stories.js
+++ b/ui/components/ui/form-field/form-field.stories.js
@@ -3,8 +3,7 @@
 import React, { useState } from 'react';
 import Tooltip from '../tooltip';
 
-import { Icon, IconName } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { Icon, IconName, Text } from '../../component-library';
 import { AlignItems } from '../../../helpers/constants/design-system';
 import README from './README.mdx';
 import FormField from '.';
diff --git a/ui/components/ui/icon-button/icon-button.js b/ui/components/ui/icon-button/icon-button.js
index 1e4acfffe..cc95d8343 100644
--- a/ui/components/ui/icon-button/icon-button.js
+++ b/ui/components/ui/icon-button/icon-button.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';
 import { TextVariant } from '../../../helpers/constants/design-system';
 import Tooltip from '../tooltip/tooltip';
 
diff --git a/ui/components/ui/logo/logo.stories.js b/ui/components/ui/logo/logo.stories.js
index 802ac739a..dc0accc8e 100644
--- a/ui/components/ui/logo/logo.stories.js
+++ b/ui/components/ui/logo/logo.stories.js
@@ -2,10 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import { BackgroundColor } from '../../../helpers/constants/design-system';
-import { Text } from '../../component-library/text/deprecated';
+import { Text, Box } from '../../component-library';
 
 import Card from '../card';
-import Box from '../box';
 
 import LogoLedger from './logo-ledger';
 import LogoQRBased from './logo-qr-based';
@@ -16,7 +15,6 @@ import README from './README.mdx';
 
 export default {
   title: 'Components/UI/Logo',
-
   parameters: {
     docs: {
       page: README,
diff --git a/ui/components/ui/menu/menu-item.js b/ui/components/ui/menu/menu-item.js
index a22d1ad48..6e91b4e29 100644
--- a/ui/components/ui/menu/menu-item.js
+++ b/ui/components/ui/menu/menu-item.js
@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon, IconSize } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { Icon, IconSize, Text } from '../../component-library';
 import { TextVariant } from '../../../helpers/constants/design-system';
 
 const MenuItem = React.forwardRef(
diff --git a/ui/components/ui/metafox-logo/metafox-logo.stories.js b/ui/components/ui/metafox-logo/metafox-logo.stories.js
index f059e822a..859954144 100644
--- a/ui/components/ui/metafox-logo/metafox-logo.stories.js
+++ b/ui/components/ui/metafox-logo/metafox-logo.stories.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';
 import MetaFoxLogo from '.';
 
 export default {
diff --git a/ui/components/ui/new-network-info/new-network-info.js b/ui/components/ui/new-network-info/new-network-info.js
index 778955dc3..0d449c443 100644
--- a/ui/components/ui/new-network-info/new-network-info.js
+++ b/ui/components/ui/new-network-info/new-network-info.js
@@ -25,8 +25,7 @@ import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes';
 import Chip from '../chip/chip';
 import { setFirstTimeUsedNetwork } from '../../../store/actions';
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
-import { Icon, IconName } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { Icon, IconName, Text } from '../../component-library';
 import { getNetworkLabelKey } from '../../../helpers/utils/i18n-helper';
 
 const NewNetworkInfo = () => {
diff --git a/ui/components/ui/nft-info/nft-info.js b/ui/components/ui/nft-info/nft-info.js
index 7e04db323..c762ebc2d 100644
--- a/ui/components/ui/nft-info/nft-info.js
+++ b/ui/components/ui/nft-info/nft-info.js
@@ -1,27 +1,25 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { I18nContext } from '../../../contexts/i18n';
-import Box from '../box';
 import {
   BackgroundColor,
-  DISPLAY,
+  Display,
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import Identicon from '../identicon';
-import Button from '../button';
-import { Text } from '../../component-library/text/deprecated';
+import { Text, Button, Box, BUTTON_VARIANT } from '../../component-library';
 
 export default function NftInfo({ assetName, tokenAddress, tokenId }) {
   const t = useContext(I18nContext);
 
   return (
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       className="nft-info"
       backgroundColor={BackgroundColor.backgroundAlternative}
     >
-      <Box display={DISPLAY.FLEX} className="nft-info__content">
+      <Box display={Display.Flex} className="nft-info__content">
         <Box margin={4}>
           <Identicon address={tokenAddress} diameter={24} />
         </Box>
@@ -40,15 +38,8 @@ export default function NftInfo({ assetName, tokenAddress, tokenId }) {
         </Box>
       </Box>
       <Box marginTop={4} marginRight={4}>
-        <Button className="nft-info__button" type="link">
-          <Text
-            variant={TextVariant.bodySm}
-            as="h6"
-            marginTop={0}
-            color={TextColor.primaryDefault}
-          >
-            {t('view')}
-          </Text>
+        <Button className="nft-info__button" variant={BUTTON_VARIANT.LINK}>
+          {t('view')}
         </Button>
       </Box>
     </Box>
diff --git a/ui/components/ui/numeric-input/numeric-input.component.js b/ui/components/ui/numeric-input/numeric-input.component.js
index 9ae1756d8..8eba851be 100644
--- a/ui/components/ui/numeric-input/numeric-input.component.js
+++ b/ui/components/ui/numeric-input/numeric-input.component.js
@@ -6,7 +6,7 @@ import {
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { DECIMAL_REGEX } from '../../../../shared/constants/tokens';
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';
 
 export default function NumericInput({
   detailText = '',
diff --git a/ui/components/ui/popover/popover.component.js b/ui/components/ui/popover/popover.component.js
index 51c32f715..261883c56 100644
--- a/ui/components/ui/popover/popover.component.js
+++ b/ui/components/ui/popover/popover.component.js
@@ -19,8 +19,13 @@ import {
   BLOCK_SIZES,
 } from '../../../helpers/constants/design-system';
 
-import { ButtonIcon, Icon, IconName, IconSize } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import {
+  ButtonIcon,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
+} from '../../component-library';
 
 const defaultHeaderProps = {
   padding: [6, 4, 4],
diff --git a/ui/components/ui/radio-group/radio-group.component.js b/ui/components/ui/radio-group/radio-group.component.js
index c63e199d1..3a4b4329d 100644
--- a/ui/components/ui/radio-group/radio-group.component.js
+++ b/ui/components/ui/radio-group/radio-group.component.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { I18nContext } from '../../../contexts/i18n';
 import { Color, TextVariant } from '../../../helpers/constants/design-system';
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';
 
 function Connector({ isFirst, isLast }) {
   if (isFirst) {
diff --git a/ui/components/ui/review-spending-cap/review-spending-cap.js b/ui/components/ui/review-spending-cap/review-spending-cap.js
index c6e700bae..50de96fda 100644
--- a/ui/components/ui/review-spending-cap/review-spending-cap.js
+++ b/ui/components/ui/review-spending-cap/review-spending-cap.js
@@ -1,14 +1,20 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { I18nContext } from '../../../contexts/i18n';
-import Box from '../box';
 import Tooltip from '../tooltip';
-import { ButtonLink, Icon, IconName, IconSize } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import {
+  ButtonLink,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
+  Box,
+} from '../../component-library';
+
 import {
   AlignItems,
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   TextVariant,
   TextAlign,
   Size,
@@ -37,30 +43,30 @@ export default function ReviewSpendingCap({
       paddingTop={4}
       paddingRight={4}
       paddingLeft={4}
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.flexStart}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      flexDirection={FlexDirection.Column}
       backgroundColor={BackgroundColor.backgroundAlternative}
       gap={1}
     >
       <Box
-        flexDirection={FLEX_DIRECTION.ROW}
-        display={DISPLAY.FLEX}
+        flexDirection={FlexDirection.Row}
+        display={Display.Flex}
         alignItems={AlignItems.center}
         className="review-spending-cap__heading"
       >
         <Box
-          flexDirection={FLEX_DIRECTION.ROW}
+          flexDirection={FlexDirection.Row}
           className="review-spending-cap__heading-title"
         >
           <Text
             variant={TextVariant.bodySmBold}
             as="h6"
-            display={DISPLAY.INLINE_BLOCK}
+            display={Display.InlineBlock}
           >
             {t('dappRequestedSpendingCap')}
           </Text>
-          <Box marginLeft={2} display={DISPLAY.INLINE_BLOCK}>
+          <Box marginLeft={2} display={Display.InlineBlock}>
             <Tooltip
               interactive
               position="top"
diff --git a/ui/components/ui/slider/slider.component.js b/ui/components/ui/slider/slider.component.js
index 4bb101809..581665062 100644
--- a/ui/components/ui/slider/slider.component.js
+++ b/ui/components/ui/slider/slider.component.js
@@ -9,7 +9,7 @@ import {
 } from '../../../helpers/constants/design-system';
 
 import InfoTooltip from '../info-tooltip/info-tooltip';
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';
 
 const styles = {
   root: {
diff --git a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js
index 6b8f26e84..bbb48602c 100644
--- a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js
+++ b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js
@@ -14,8 +14,7 @@ import {
   FLEX_WRAP,
   TextVariant,
 } from '../../../../../helpers/constants/design-system';
-import { Icon, IconName, IconSize } from '../../../../component-library';
-import { Text } from '../../../../component-library/text/deprecated';
+import { Icon, IconName, IconSize, Text } from '../../../../component-library';
 
 export const DropdownTab = ({
   activeClassName,
diff --git a/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
index f91a8f82b..a428e168c 100644
--- a/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
@@ -407,7 +407,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
           />
         </svg>
         <p
-          class="box mm-text callout__content mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text callout__content mm-text--body-md mm-box--color-text-default"
         >
           <span>
             This custom network is not recognized
@@ -438,7 +438,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
           />
         </svg>
         <p
-          class="box mm-text callout__content mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text callout__content mm-text--body-md mm-box--color-text-default"
         >
           <span>
             <span>
diff --git a/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
index 1043c0a12..14430aa1c 100644
--- a/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
@@ -241,7 +241,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
           />
         </svg>
         <p
-          class="box mm-text callout__content mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text callout__content mm-text--body-md mm-box--color-text-default"
         >
           <span>
             Switching networks will cancel all pending confirmations
diff --git a/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap b/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap
index 87e162e0a..edcb21dad 100644
--- a/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap
+++ b/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap
@@ -49,8 +49,7 @@ exports[`Add Network Modal should render 1`] = `
               class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
-                class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
-                tag="label"
+                class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
               >
                 Network name
               </h6>
@@ -80,8 +79,7 @@ exports[`Add Network Modal should render 1`] = `
               class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
-                class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
-                tag="label"
+                class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
               >
                 New RPC URL
               </h6>
@@ -111,8 +109,7 @@ exports[`Add Network Modal should render 1`] = `
               class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
-                class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
-                tag="label"
+                class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
               >
                 Chain ID
               </h6>
@@ -167,8 +164,7 @@ exports[`Add Network Modal should render 1`] = `
               class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
-                class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
-                tag="label"
+                class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
               >
                 Currency symbol
               </h6>
@@ -198,14 +194,12 @@ exports[`Add Network Modal should render 1`] = `
               class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
             >
               <h6
-                class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
-                tag="label"
+                class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
               >
                 Block explorer URL
               </h6>
               <h6
-                class="box mm-text mm-text--body-sm box--display-inline-block box--flex-direction-row box--color-text-alternative"
-                tag="body-sm"
+                class="mm-box mm-text mm-text--body-sm mm-box--display-inline-block mm-box--color-text-alternative"
               >
                 (Optional)
               </h6>
diff --git a/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap b/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap
index 9e7958efb..1fa2d9418 100644
--- a/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap
+++ b/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap
@@ -58,8 +58,7 @@ exports[`Onboarding Create Password Render should match snapshot 1`] = `
                 class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
               >
                 <h6
-                  class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
-                  tag="label"
+                  class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
                 >
                   New password (8 characters min)
                 </h6>
@@ -105,8 +104,7 @@ exports[`Onboarding Create Password Render should match snapshot 1`] = `
                 class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
               >
                 <h6
-                  class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
-                  tag="label"
+                  class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
                 >
                   Confirm password
                 </h6>
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 452f83966..465d0b882 100644
--- a/ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap
+++ b/ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap
@@ -365,9 +365,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
                     class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
                   >
                     <h6
-                      class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
-                      for="custom-spending-cap"
-                      tag="label"
+                      class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
                     >
                       Custom spending cap
                     </h6>
@@ -417,18 +415,18 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
               class="box custom-spending-cap__description box--flex-direction-row"
             >
               <h6
-                class="box mm-text mm-text--body-sm box--padding-top-2 box--flex-direction-row box--color-text-default"
+                class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"
               >
                 <span>
                    
                   This allows the third party to spend 
-                  <h6
-                    class="box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
+                  <span
+                    class="mm-box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold mm-box--color-text-default"
                   >
                     7
                      
                     TST
-                  </h6>
+                  </span>
                    from your current balance.
                    
                 </span>