diff --git a/ui/components/component-library/text/deprecated/__snapshots__/text.test.tsx.snap b/ui/components/component-library/text/deprecated/__snapshots__/text.test.tsx.snap
deleted file mode 100644
index de0c46263..000000000
--- a/ui/components/component-library/text/deprecated/__snapshots__/text.test.tsx.snap
+++ /dev/null
@@ -1,71 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Text should render the Text with proper variant class name 1`] = `
-<div>
-  <h1
-    class="box mm-text mm-text--display-md box--flex-direction-row box--color-text-default"
-  >
-    display-md
-  </h1>
-  <h2
-    class="box mm-text mm-text--heading-lg box--flex-direction-row box--color-text-default"
-  >
-    heading-lg
-  </h2>
-  <h3
-    class="box mm-text mm-text--heading-md box--flex-direction-row box--color-text-default"
-  >
-    heading-md
-  </h3>
-  <h4
-    class="box mm-text mm-text--heading-sm box--flex-direction-row box--color-text-default"
-  >
-    heading-sm
-  </h4>
-  <p
-    class="box mm-text mm-text--body-lg-medium box--flex-direction-row box--color-text-default"
-  >
-    body-lg-medium
-  </p>
-  <p
-    class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
-  >
-    body-md
-  </p>
-  <p
-    class="box mm-text mm-text--body-md-medium box--flex-direction-row box--color-text-default"
-  >
-    body-md-medium
-  </p>
-  <p
-    class="box mm-text mm-text--body-md-bold box--flex-direction-row box--color-text-default"
-  >
-    body-md-bold
-  </p>
-  <p
-    class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-default"
-  >
-    body-sm
-  </p>
-  <p
-    class="box mm-text mm-text--body-sm-medium box--flex-direction-row box--color-text-default"
-  >
-    body-sm-medium
-  </p>
-  <p
-    class="box mm-text mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
-  >
-    body-sm-bold
-  </p>
-  <p
-    class="box mm-text mm-text--body-xs box--flex-direction-row box--color-text-default"
-  >
-    body-xs
-  </p>
-  <p
-    class="box mm-text mm-text--body-xs-medium box--flex-direction-row box--color-text-default"
-  >
-    body-xs-medium
-  </p>
-</div>
-`;
diff --git a/ui/components/component-library/text/deprecated/index.ts b/ui/components/component-library/text/deprecated/index.ts
deleted file mode 100644
index 0e4a6d9a9..000000000
--- a/ui/components/component-library/text/deprecated/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { Text } from './text';
-export { ValidTag, TextDirection, InvisibleCharacter } from './text.types';
-export type { TextProps, ValidTagType } from './text.types';
diff --git a/ui/components/component-library/text/deprecated/text.test.tsx b/ui/components/component-library/text/deprecated/text.test.tsx
deleted file mode 100644
index 4608da9c4..000000000
--- a/ui/components/component-library/text/deprecated/text.test.tsx
+++ /dev/null
@@ -1,249 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import {
-  FontStyle,
-  FontWeight,
-  OverflowWrap,
-  TextAlign,
-  TextColor,
-  TextTransform,
-  TextVariant,
-  Color,
-} from '../../../../helpers/constants/design-system';
-import { TextDirection } from './text.types';
-import { Text } from '.';
-
-describe('Text', () => {
-  it('should render the Text without crashing', () => {
-    const { getByText } = render(<Text>Test type</Text>);
-    expect(getByText('Test type')).toBeDefined();
-  });
-  it('should render the Text with correct html elements', () => {
-    const { getByText, container } = render(
-      <>
-        <Text as="p">p</Text>
-        <Text as="h1">h1</Text>
-        <Text as="h2">h2</Text>
-        <Text as="h3">h3</Text>
-        <Text as="h4">h4</Text>
-        <Text as="h5">h5</Text>
-        <Text as="h6">h6</Text>
-        <Text as="span">span</Text>
-        <Text as="strong">strong</Text>
-        <Text as="em">em</Text>
-        <Text as="li">li</Text>
-        <Text as="div">div</Text>
-        <Text as="dt">dt</Text>
-        <Text as="dd">dd</Text>
-      </>,
-    );
-    expect(container.querySelector('p')).toBeDefined();
-    expect(getByText('p')).toBeDefined();
-    expect(container.querySelector('h1')).toBeDefined();
-    expect(getByText('h1')).toBeDefined();
-    expect(container.querySelector('h2')).toBeDefined();
-    expect(getByText('h2')).toBeDefined();
-    expect(container.querySelector('h3')).toBeDefined();
-    expect(getByText('h3')).toBeDefined();
-    expect(container.querySelector('h4')).toBeDefined();
-    expect(getByText('h4')).toBeDefined();
-    expect(container.querySelector('h5')).toBeDefined();
-    expect(getByText('h5')).toBeDefined();
-    expect(container.querySelector('h6')).toBeDefined();
-    expect(getByText('h6')).toBeDefined();
-    expect(container.querySelector('span')).toBeDefined();
-    expect(getByText('span')).toBeDefined();
-    expect(container.querySelector('strong')).toBeDefined();
-    expect(getByText('strong')).toBeDefined();
-    expect(container.querySelector('em')).toBeDefined();
-    expect(getByText('em')).toBeDefined();
-    expect(container.querySelector('li')).toBeDefined();
-    expect(getByText('li')).toBeDefined();
-    expect(container.querySelector('div')).toBeDefined();
-    expect(getByText('div')).toBeDefined();
-    expect(container.querySelector('dt')).toBeDefined();
-    expect(getByText('dt')).toBeDefined();
-    expect(container.querySelector('dd')).toBeDefined();
-    expect(getByText('dd')).toBeDefined();
-  });
-
-  it('should render the Text with proper variant class name', () => {
-    const { getByText, container } = render(
-      <>
-        <Text variant={TextVariant.displayMd}>display-md</Text>
-        <Text variant={TextVariant.headingLg}>heading-lg</Text>
-        <Text variant={TextVariant.headingMd}>heading-md</Text>
-        <Text variant={TextVariant.headingSm}>heading-sm</Text>
-        <Text variant={TextVariant.bodyLgMedium}>body-lg-medium</Text>
-        <Text variant={TextVariant.bodyMd}>body-md</Text>
-        <Text variant={TextVariant.bodyMdMedium}>body-md-medium</Text>
-        <Text variant={TextVariant.bodyMdBold}>body-md-bold</Text>
-        <Text variant={TextVariant.bodySm}>body-sm</Text>
-        <Text variant={TextVariant.bodySmMedium}>body-sm-medium</Text>
-        <Text variant={TextVariant.bodySmBold}>body-sm-bold</Text>
-        <Text variant={TextVariant.bodyXs}>body-xs</Text>
-        <Text variant={TextVariant.bodyXsMedium}>body-xs-medium</Text>
-      </>,
-    );
-
-    expect(getByText('display-md')).toHaveClass('mm-text--display-md');
-    expect(getByText('heading-lg')).toHaveClass('mm-text--heading-lg');
-    expect(getByText('heading-md')).toHaveClass('mm-text--heading-md');
-    expect(getByText('heading-sm')).toHaveClass('mm-text--heading-sm');
-    expect(getByText('body-lg-medium')).toHaveClass('mm-text--body-lg-medium');
-    expect(getByText('body-md')).toHaveClass('mm-text--body-md');
-    expect(getByText('body-md-medium')).toHaveClass('mm-text--body-md-medium');
-    expect(getByText('body-md-bold')).toHaveClass('mm-text--body-md-bold');
-    expect(getByText('body-sm')).toHaveClass('mm-text--body-sm');
-    expect(getByText('body-sm-medium')).toHaveClass('mm-text--body-sm-medium');
-    expect(getByText('body-sm-bold')).toHaveClass('mm-text--body-sm-bold');
-    expect(getByText('body-xs')).toHaveClass('mm-text--body-xs');
-    expect(getByText('body-xs-medium')).toHaveClass('mm-text--body-xs-medium');
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should render the Text with proper font weight class name', () => {
-    const { getByText } = render(
-      <>
-        <Text fontWeight={FontWeight.Bold}>bold</Text>
-        <Text fontWeight={FontWeight.Medium}>medium</Text>
-        <Text fontWeight={FontWeight.Normal}>normal</Text>
-      </>,
-    );
-    expect(getByText('bold')).toHaveClass('mm-text--font-weight-bold');
-    expect(getByText('medium')).toHaveClass('mm-text--font-weight-medium');
-    expect(getByText('normal')).toHaveClass('mm-text--font-weight-normal');
-  });
-
-  it('should render the Text with proper text color class name', () => {
-    const { getByText } = render(
-      <>
-        <Text color={TextColor.textDefault}>text-default</Text>
-        <Text color={TextColor.textAlternative}>text-alternative</Text>
-        <Text color={TextColor.textMuted}>text-muted</Text>
-        <Text color={Color.overlayInverse}>overlay-inverse</Text>
-        <Text color={TextColor.primaryDefault}>primary-default</Text>
-        <Text color={TextColor.primaryInverse}>primary-inverse</Text>
-        <Text color={TextColor.errorDefault}>error-default</Text>
-        <Text color={TextColor.errorInverse}>error-inverse</Text>
-        <Text color={TextColor.successDefault}>success-default</Text>
-        <Text color={TextColor.successInverse}>success-inverse</Text>
-        <Text color={TextColor.warningInverse}>warning-inverse</Text>
-        <Text color={TextColor.infoDefault}>info-default</Text>
-        <Text color={TextColor.infoInverse}>info-inverse</Text>
-      </>,
-    );
-    expect(getByText('text-default')).toHaveClass('box--color-text-default');
-    expect(getByText('text-alternative')).toHaveClass(
-      'box--color-text-alternative',
-    );
-    expect(getByText('text-muted')).toHaveClass('box--color-text-muted');
-    expect(getByText('primary-default')).toHaveClass(
-      'box--color-primary-default',
-    );
-    expect(getByText('primary-inverse')).toHaveClass(
-      'box--color-primary-inverse',
-    );
-    expect(getByText('error-default')).toHaveClass('box--color-error-default');
-    expect(getByText('error-inverse')).toHaveClass('box--color-error-inverse');
-    expect(getByText('success-default')).toHaveClass(
-      'box--color-success-default',
-    );
-    expect(getByText('success-inverse')).toHaveClass(
-      'box--color-success-inverse',
-    );
-    expect(getByText('warning-inverse')).toHaveClass(
-      'box--color-warning-inverse',
-    );
-    expect(getByText('info-default')).toHaveClass('box--color-info-default');
-    expect(getByText('info-inverse')).toHaveClass('box--color-info-inverse');
-  });
-
-  it('should render the Text with proper font style class name', () => {
-    const { getByText } = render(
-      <>
-        <Text fontStyle={FontStyle.Italic}>italic</Text>
-        <Text fontStyle={FontStyle.Normal}>normal</Text>
-      </>,
-    );
-    expect(getByText('italic')).toHaveClass('mm-text--font-style-italic');
-    expect(getByText('normal')).toHaveClass('mm-text--font-style-normal');
-  });
-
-  it('should render the Text with proper text align class name', () => {
-    const { getByText } = render(
-      <>
-        <Text textAlign={TextAlign.Left}>left</Text>
-        <Text textAlign={TextAlign.Center}>center</Text>
-        <Text textAlign={TextAlign.Right}>right</Text>
-        <Text textAlign={TextAlign.Justify}>justify</Text>
-        <Text textAlign={TextAlign.End}>end</Text>
-      </>,
-    );
-
-    expect(getByText('left')).toHaveClass('mm-text--text-align-left');
-    expect(getByText('center')).toHaveClass('mm-text--text-align-center');
-    expect(getByText('right')).toHaveClass('mm-text--text-align-right');
-    expect(getByText('justify')).toHaveClass('mm-text--text-align-justify');
-    expect(getByText('end')).toHaveClass('mm-text--text-align-end');
-  });
-
-  it('should render the Text with proper overflow wrap class name', () => {
-    const { getByText } = render(
-      <>
-        <Text overflowWrap={OverflowWrap.BreakWord}>break-word</Text>
-        <Text overflowWrap={OverflowWrap.Normal}>normal</Text>
-      </>,
-    );
-    expect(getByText('break-word')).toHaveClass(
-      'mm-text--overflow-wrap-break-word',
-    );
-    expect(getByText('normal')).toHaveClass('mm-text--overflow-wrap-normal');
-  });
-
-  it('should render the Text with proper ellipsis class name', () => {
-    const { getByText } = render(
-      <>
-        <Text ellipsis>ellipsis</Text>
-      </>,
-    );
-    expect(getByText('ellipsis')).toHaveClass('mm-text--ellipsis');
-  });
-
-  it('should render the Text with proper text transform class name', () => {
-    const { getByText } = render(
-      <>
-        <Text textTransform={TextTransform.Uppercase}>uppercase</Text>
-        <Text textTransform={TextTransform.Lowercase}>lowercase</Text>
-        <Text textTransform={TextTransform.Capitalize}>capitalize</Text>
-      </>,
-    );
-    expect(getByText('uppercase')).toHaveClass(
-      'mm-text--text-transform-uppercase',
-    );
-    expect(getByText('lowercase')).toHaveClass(
-      'mm-text--text-transform-lowercase',
-    );
-    expect(getByText('capitalize')).toHaveClass(
-      'mm-text--text-transform-capitalize',
-    );
-  });
-  it('should accept a ref prop that is passed down to the html element', () => {
-    const mockRef = jest.fn();
-    render(<Text ref={mockRef} />);
-    expect(mockRef).toHaveBeenCalledTimes(1);
-  });
-
-  it('should render the Text with proper direction', () => {
-    const { getByText } = render(
-      <>
-        <Text textDirection={TextDirection.Auto}>auto</Text>
-        <Text textDirection={TextDirection.LeftToRight}>ltr</Text>
-        <Text textDirection={TextDirection.RightToLeft}>rtl</Text>
-      </>,
-    );
-    expect(getByText('auto')).toHaveAttribute('dir', 'auto');
-    expect(getByText('ltr')).toHaveAttribute('dir', 'ltr');
-    expect(getByText('rtl')).toHaveAttribute('dir', 'rtl');
-  });
-});
diff --git a/ui/components/component-library/text/deprecated/text.tsx b/ui/components/component-library/text/deprecated/text.tsx
deleted file mode 100644
index cc3a551ff..000000000
--- a/ui/components/component-library/text/deprecated/text.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { forwardRef, Ref } from 'react';
-import classnames from 'classnames';
-import Box from '../../../ui/box';
-import {
-  FontWeight,
-  TextVariant,
-  TextColor,
-} from '../../../../helpers/constants/design-system';
-import { TextProps } from './text.types';
-
-const getTextElementDefault = (variant: TextVariant) => {
-  switch (variant) {
-    case TextVariant.displayMd:
-      return 'h1';
-    case TextVariant.headingLg:
-      return 'h2';
-    case TextVariant.headingMd:
-      return 'h3';
-    case TextVariant.headingSm:
-      return 'h4';
-    case TextVariant.inherit:
-      return 'span';
-    // TextVariant.bodyLgMedium, TextVariant.bodyMd, TextVariant.bodyMdBold, TextVariant.bodySm, TextVariant.bodySmBold, TextVariant.bodyXs use default 'p' tag
-    default:
-      return 'p';
-  }
-};
-
-/**
- * @deprecated This version of the `<Text />` component has been deprecated
- * Use `import { Text } from '../../component-library';` instead
- */
-
-export const Text = forwardRef(function Text(
-  {
-    variant = TextVariant.bodyMd,
-    color = TextColor.textDefault,
-    fontWeight,
-    fontStyle,
-    textTransform,
-    textAlign,
-    textDirection,
-    overflowWrap,
-    ellipsis,
-    as,
-    className = '',
-    children,
-    ...props
-  }: TextProps,
-  ref: Ref<HTMLElement>,
-) {
-  // Check if as is set otherwise set a default tag based on variant
-  const Tag = as ?? getTextElementDefault(variant);
-  let strongTagFontWeight;
-
-  if (Tag === 'strong') {
-    strongTagFontWeight = FontWeight.Bold;
-  }
-
-  const computedClassName = classnames(
-    'mm-text',
-    className,
-    `mm-text--${variant}`,
-    {
-      [`mm-text--font-weight-${strongTagFontWeight || fontWeight}`]: Boolean(
-        strongTagFontWeight || fontWeight,
-      ),
-      [`mm-text--font-style-${String(fontStyle)}`]: Boolean(fontStyle),
-      [`mm-text--ellipsis`]: Boolean(ellipsis),
-      [`mm-text--text-transform-${String(textTransform)}`]:
-        Boolean(textTransform),
-      [`mm-text--text-align-${String(textAlign)}`]: Boolean(textAlign),
-      [`mm-text--overflow-wrap-${String(overflowWrap)}`]: Boolean(overflowWrap),
-    },
-  );
-
-  return (
-    <Box
-      className={classnames(computedClassName)}
-      as={Tag}
-      dir={textDirection}
-      color={color}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </Box>
-  );
-});
diff --git a/ui/components/component-library/text/deprecated/text.types.ts b/ui/components/component-library/text/deprecated/text.types.ts
deleted file mode 100644
index f6d5debc5..000000000
--- a/ui/components/component-library/text/deprecated/text.types.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-import React from 'react';
-import type { BoxProps } from '../../../ui/box/box.d';
-import {
-  FontWeight,
-  FontStyle,
-  TextVariant,
-  TextAlign,
-  TextTransform,
-  OverflowWrap,
-  TextColor,
-  Color,
-} from '../../../../helpers/constants/design-system';
-
-export enum TextDirection {
-  LeftToRight = 'ltr',
-  RightToLeft = 'rtl',
-  Auto = 'auto',
-}
-
-/**
- * The InvisibleCharacter is a very useful tool if you want to make sure a line of text
- * takes up vertical space even if it's empty.
- */
-export const InvisibleCharacter = '\u200B';
-
-/**
- * @deprecated ValidTag enum is deprecated in favor of a union of strings.
- * To change the root html element tag of the Text component, use the `as` prop and string value.
- * e.g. `<Text as="h1">Hello World</Text>`
- *
- * Contribute to replacing the enum with a union of string by submitting a PR
- */
-
-export enum ValidTag {
-  Dd = 'dd',
-  Div = 'div',
-  Dt = 'dt',
-  Em = 'em',
-  H1 = 'h1',
-  H2 = 'h2',
-  H3 = 'h3',
-  H4 = 'h4',
-  H5 = 'h5',
-  H6 = 'h6',
-  Li = 'li',
-  P = 'p',
-  Span = 'span',
-  Strong = 'strong',
-  Ul = 'ul',
-  Label = 'label',
-  Input = 'input',
-  Header = 'header',
-}
-
-export type ValidTagType =
-  | 'dd'
-  | 'div'
-  | 'dt'
-  | 'em'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'li'
-  | 'p'
-  | 'span'
-  | 'strong'
-  | 'ul'
-  | 'label'
-  | 'input'
-  | 'header';
-
-export interface TextProps extends BoxProps {
-  /**
-   * The text content of the Text component
-   */
-  children?: React.ReactNode;
-  /**
-   * The variation of font styles including sizes and weights of the Text component
-   * Possible values:
-   * `displayMd` large screen: 48px / small screen: 32px,
-   * `headingLg` large screen: 32px / small screen: 24px,
-   * `headingMd` large screen: 24px / small screen: 18px,
-   * `headingSm` large screen: 18px / small screen: 16px,
-   * `bodyLgMedium` large screen: 18px / small screen: 16px,
-   * `bodyMd` large screen: 16px / small screen: 14px,
-   * `bodyMdMedium` large screen: 16px / small screen: 14px,
-   * `bodyMdBold` large screen: 16px / small screen: 14px,
-   * `bodySm` large screen: 14px / small screen: 12px,
-   * `bodySmMedium` large screen: 14px / small screen: 12px,
-   * `bodySmBold` large screen: 14px / small screen: 12px,
-   * `bodyXsMedium` large screen: 12px / small screen: 10px,
-   * `bodyXs` large screen: 12px / small screen: 10px,
-   * `inherit`
-   */
-  variant?: TextVariant;
-  /**
-   * The color of the Text component Should use the COLOR object from
-   * ./ui/helpers/constants/design-system.js
-   */
-  color?: TextColor | Color;
-  /**
-   * The font-weight of the Text component. Should use the FontWeight enum from
-   * ./ui/helpers/constants/design-system.js
-   */
-  fontWeight?: FontWeight;
-  /**
-   * The font-style of the Text component. Should use the FontStyle enum from
-   * ./ui/helpers/constants/design-system.js
-   */
-  fontStyle?: FontStyle;
-  /**
-   * The textTransform of the Text component. Should use the TextTransform enum from
-   * ./ui/helpers/constants/design-system.js
-   */
-  textTransform?: TextTransform;
-  /**
-   * The text-align of the Text component. Should use the TextAlign enum from
-   * ./ui/helpers/constants/design-system.js
-   */
-  textAlign?: TextAlign;
-  /**
-   * Change the dir (direction) global attribute of text to support the direction a language is written
-   * Possible values: `LEFT_TO_RIGHT` (default), `RIGHT_TO_LEFT`, `AUTO` (user agent decides)
-   */
-  textDirection?: TextDirection;
-  /**
-   * The overflow-wrap of the Text component. Should use the OverflowWrap enum from
-   * ./ui/helpers/constants/design-system.js
-   */
-  overflowWrap?: OverflowWrap;
-  /**
-   * Used for long strings that can be cut off...
-   */
-  ellipsis?: boolean;
-  /**
-   * Changes the root html element tag of the Text component.
-   */
-  as?: ValidTagType;
-  /**
-   * Additional className to assign the Text component
-   */
-  className?: string;
-}