diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx
index aa0a4e65f255..07dd04469b0b 100644
--- a/ui/components/ui/box/README.mdx
+++ b/ui/components/ui/box/README.mdx
@@ -34,15 +34,15 @@ Box is a utility component that can be used for layout or as a base for other UI
 | paddingInline      | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props                                                                                                                                                       | -                  |
 | paddingInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props                                                                                                                                                       | -                  |
 | paddingInlineEnd   | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props                                                                                                                                                       | -                  |
-| display            | DISPLAY values or array of DISPLAY values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)                 | -                  |
-| flexDirection      | FLEX_DIRECTION values or array of FLEX_DIRECTION values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)   | FLEX_DIRECTION.ROW |
-| flexWrap           | FLEX_WRAP values or array of FLEX_WRAP values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)             | -                  |
+| display            | Display values or array of Display values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)                 | -                  |
+| flexDirection      | FlexDirection values or array of FlexDirection values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)   | FlexDirection.Row |
+| flexWrap           | FlexWrap values or array of FlexWrap values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)             | -                  |
 | alignItems         | AlignItems values or array of AlignItems values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)           | -                  |
 | justifyContent     | JustifyContent values or array of JustifyContent values from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)                        | -                  |
 | gap                | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props                                                                                                                                                       | -                  |
 | textAlign          | TEXT_ALIGN values or array of TEXT_ALIGN values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)           | -                  |
-| width              | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)         | -                  |
-| height             | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)              | -                  |
+| width              | BlockSize values or array of BlockSize values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)         | -                  |
+| height             | BlockSize values or array of BlockSize values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)              | -                  |
 | color              | Color values or array of Color values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)                          | -                  |
 | backgroundColor    | BackgroundColor values or array of BackgroundColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | -                  |
 | borderColor        | BorderColor values or array of BorderColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js)         | -                  |
@@ -115,31 +115,31 @@ Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12` or array of these values
 
 The `display` prop can be used to set the display of the `Box` component. All of the display props accept [responsive props](#responsive-props) in the form of array props.
 
-Accepted props imported from the design system `DISPLAY` const are:
+Accepted props imported from the design system `Display` const are:
 
-- `DISPLAY.BLOCK`
-- `DISPLAY.FLEX`
-- `DISPLAY.GRID`
-- `DISPLAY.INLINE_BLOCK`
-- `DISPLAY.INLINE_FLEX`
-- `DISPLAY.INLINE_GRID`
-- `DISPLAY.INLINE`
-- `DISPLAY.LIST_ITEM`
-- `DISPLAY.NONE`
+- `Display.Block`
+- `Display.Flex`
+- `Display.Grid`
+- `Display.InlineBlock`
+- `Display.InlineFlex`
+- `Display.InlineGrid`
+- `Display.Inline`
+- `Display.ListItem`
+- `Display.None`
 
 or array of these values.
 
 ```jsx
-import { DISPLAY } from '../../../helpers/constants/design-system';
+import { Display } from '../../../helpers/constants/design-system';
 import Box from '../ui/box';
 
-<Box display={DISPLAY.BLOCK} />
-<Box display={DISPLAY.FLEX} />
-<Box display={DISPLAY.GRID} />
-<Box display={DISPLAY.INLINE_BLOCK} />
-<Box display={DISPLAY.INLINE_FLEX} />
-<Box display={DISPLAY.INLINE} />
-<Box display={DISPLAY.NONE} />
+<Box display={Display.Block} />
+<Box display={Display.Flex} />
+<Box display={Display.Grid} />
+<Box display={Display.InlineBlock} />
+<Box display={Display.InlineFlex} />
+<Box display={Display.Inline} />
+<Box display={Display.None} />
 ```
 
 ### Color
@@ -318,16 +318,16 @@ import Box from '../../ui/box';
 
 ### Width
 
-Use the `width` prop to pass a singular `BLOCK_SIZES` or for a responsive width pass an array up to 4 `BLOCK_SIZES`
+Use the `width` prop to pass a singular `BlockSize` or for a responsive width pass an array up to 4 `BlockSize`
 
 Responsive widths go from smallest to largest screen sizes
 
-Example: [BLOCK_SIZES.HALF, BLOCK_SIZES.THREE_FOURTHS, BLOCK_SIZES.ONE_FIFTH, BLOCK_SIZES.THREE_SIXTHS]
+Example: [BlockSize.Half, BlockSize.ThreeFourths, BlockSize.OneFifth, BlockSize.ThreeSixths]
 
-- BLOCK_SIZES.HALF is the default width for `base screen size (0px)` and up
-- BLOCK_SIZES.THREE_FOURTHS is the width for `small screen size (576px) ` and up
-- BLOCK_SIZES.ONE_FIFTH is the width for `medium screen size (768px)` and up
-- BLOCK_SIZES.THREE_SIXTHS is the width for `large screen size (1280px)` and up
+- BlockSize.Half is the default width for `base screen size (0px)` and up
+- BlockSize.ThreeFourths is the width for `small screen size (576px) ` and up
+- BlockSize.OneFifth is the width for `medium screen size (768px)` and up
+- BlockSize.ThreeSixths is the width for `large screen size (1280px)` and up
 
 <Canvas>
   <Story id="components-ui-box--width" />
@@ -335,74 +335,82 @@ Example: [BLOCK_SIZES.HALF, BLOCK_SIZES.THREE_FOURTHS, BLOCK_SIZES.ONE_FIFTH, BL
 
 ```jsx
 import {
-  BLOCK_SIZES,
-  DISPLAY,
-  FLEX_WRAP,
+  BlockSize,
+  Display,
+  FlexWrap,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box';
 
 <>
   <p>Static widths</p>
 
-  <Box display={DISPLAY.FLEX}>
-    <Box width={BLOCK_SIZES.FULL}>BLOCK_SIZES.FULL</Box>
-    <Box width={BLOCK_SIZES.HALF}>BLOCK_SIZES.HALF</Box>
-    <Box width={BLOCK_SIZES.HALF}>BLOCK_SIZES.HALF</Box>
-    <Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box>
-    <Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box>
-    <Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box>
-    <Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
-    <Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
-    <Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
-    <Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box>
+  <Box display={Display.Flex}>
+    <Box width={BlockSize.Full}>BlockSize.Full</Box>
+    <Box width={BlockSize.Half}>BlockSize.Half</Box>
+    <Box width={BlockSize.Half}>BlockSize.Half</Box>
+    <Box width={BlockSize.OneThird}>BlockSize.OneThird</Box>
+    <Box width={BlockSize.OneThird}>BlockSize.OneThird</Box>
+    <Box width={BlockSize.OneThird}>BlockSize.OneThird</Box>
+    <Box width={BlockSize.OneFourth}>BlockSize.OneFourth</Box>
+    <Box width={BlockSize.OneFourth}>BlockSize.OneFourth</Box>
+    <Box width={BlockSize.OneFourth}>BlockSize.OneFourth</Box>
+    <Box width={BlockSize.OneFourth}>BlockSize.OneFourth</Box>
   </Box>
 
   <p>Responsive widths</p>
 
-  <Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP}>
+  <Box display={Display.Flex} flexWrap={FlexWrap.Wrap}>
     <Box
       width={[
-        BLOCK_SIZES.FULL,
-        BLOCK_SIZES.HALF,
-        BLOCK_SIZES.ONE_THIRD,
-        BLOCK_SIZES.ONE_FOURTH,
+        BlockSize.Full,
+        BlockSize.Half,
+        BlockSize.OneThird,
+        BlockSize.OneFourth,
       ]}
     >
-      BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
-      BLOCK_SIZES.ONE_FOURTH,
+        BlockSize.Full,
+        BlockSize.Half,
+        BlockSize.OneThird,
+        BlockSize.OneFourth,
     </Box>
     <Box
       width={[
-        BLOCK_SIZES.FULL,
-        BLOCK_SIZES.HALF,
-        BLOCK_SIZES.ONE_THIRD,
-        BLOCK_SIZES.ONE_FOURTH,
+        BlockSize.Full,
+        BlockSize.Half,
+        BlockSize.OneThird,
+        BlockSize.OneFourth,
       ]}
     >
-      BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
-      BLOCK_SIZES.ONE_FOURTH,
+        BlockSize.Full,
+        BlockSize.Half,
+        BlockSize.OneThird,
+        BlockSize.OneFourth,
     </Box>
     <Box
       width={[
-        BLOCK_SIZES.FULL,
-        BLOCK_SIZES.HALF,
-        BLOCK_SIZES.ONE_THIRD,
-        BLOCK_SIZES.ONE_FOURTH,
+        BlockSize.Full,
+        BlockSize.Half,
+        BlockSize.OneThird,
+        BlockSize.OneFourth,
       ]}
     >
-      BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
-      BLOCK_SIZES.ONE_FOURTH,
+        BlockSize.Full,
+        BlockSize.Half,
+        BlockSize.OneThird,
+        BlockSize.OneFourth,  
     </Box>
     <Box
       width={[
-        BLOCK_SIZES.FULL,
-        BLOCK_SIZES.HALF,
-        BLOCK_SIZES.ONE_THIRD,
-        BLOCK_SIZES.ONE_FOURTH,
+        BlockSize.Full,
+        BlockSize.Half,
+        BlockSize.OneThird,
+        BlockSize.OneFourth,
       ]}
     >
-      BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
-      BLOCK_SIZES.ONE_FOURTH,
+        BlockSize.Full,
+        BlockSize.Half,
+        BlockSize.OneThird,
+        BlockSize.OneFourth,
     </Box>
   </Box>
 </>;
diff --git a/ui/components/ui/box/box.d.ts b/ui/components/ui/box/box.d.ts
index 3baeba841179..6c0207b4d2d6 100644
--- a/ui/components/ui/box/box.d.ts
+++ b/ui/components/ui/box/box.d.ts
@@ -2,61 +2,109 @@ import * as React from 'react';
 
 import {
   AlignItems,
+  BlockSize,
   BLOCK_SIZES,
   BorderStyle,
   BackgroundColor,
   BorderColor,
   TextColor,
   IconColor,
+  Display,
   DISPLAY,
   JustifyContent,
+  TextAlign,
   TEXT_ALIGN,
+  FlexDirection,
   FLEX_DIRECTION,
+  FlexWrap,
   FLEX_WRAP,
   BorderRadius,
 } from '../../../helpers/constants/design-system';
 
 export type BoxChildren = React.ReactNode | ((...args: any[]) => any);
 
-export type BoxFlexDirection =
+export type FlexDirectionArray = [
+  FlexDirection,
+  FlexDirection?,
+  FlexDirection?,
+  FlexDirection?,
+];
+
+/**
+ * @deprecated BoxFlexDirection is deprecated. Use FlexDirection instead.
+ */
+type BoxFlexDirection =
   | (typeof FLEX_DIRECTION)[keyof typeof FLEX_DIRECTION]
   | null;
-export type BoxFlexDirectionArray = [
+
+/**
+ * @deprecated BoxFlexDirectionArray is deprecated. Use FlexDirectionArray instead.
+ */
+type BoxFlexDirectionArray = [
   BoxFlexDirection,
   BoxFlexDirection?,
   BoxFlexDirection?,
   BoxFlexDirection?,
 ];
 
-export type BoxFlexWrap = (typeof FLEX_WRAP)[keyof typeof FLEX_WRAP] | null;
-export type BoxFlexWrapArray = [
-  BoxFlexWrap,
-  BoxFlexWrap?,
-  BoxFlexWrap?,
-  BoxFlexWrap?,
-];
+export type FlexWrapArray = [FlexWrap, FlexWrap?, FlexWrap?, FlexWrap?];
+
+/**
+ * @deprecated BoxFlexWrap is deprecated. Use FlexWrap instead.
+ */
+type BoxFlexWrap = (typeof FLEX_WRAP)[keyof typeof FLEX_WRAP] | null;
+
+/**
+ * @deprecated BoxFlexWrapArray is deprecated. Use FlexWrapArray instead.
+ */
+type BoxFlexWrapArray = [BoxFlexWrap, BoxFlexWrap?, BoxFlexWrap?, BoxFlexWrap?];
 
-export type BoxTextAlign = (typeof TEXT_ALIGN)[keyof typeof TEXT_ALIGN] | null;
-export type BoxTextAlignArray = [
+export type TextAlignArray = [TextAlign, TextAlign?, TextAlign?, TextAlign?];
+
+/**
+ * @deprecated BoxTextAlign is deprecated. Use TextAlign instead.
+ */
+type BoxTextAlign = (typeof TEXT_ALIGN)[keyof typeof TEXT_ALIGN] | null;
+/**
+ * @deprecated BoxTextAlignArray is deprecated. Use TextAlignArray instead.
+ */
+type BoxTextAlignArray = [
   BoxTextAlign,
   BoxTextAlign?,
   BoxTextAlign?,
   BoxTextAlign?,
 ];
 
-export type BoxDisplay = (typeof DISPLAY)[keyof typeof DISPLAY] | null;
-export type BoxDisplayArray = [
-  BoxDisplay,
-  BoxDisplay?,
-  BoxDisplay?,
-  BoxDisplay?,
-];
+export type DisplayArray = [Display, Display?, Display?, Display?];
+
+/**
+ * @deprecated BoxDisplay is deprecated. Use Display instead.
+ */
+type BoxDisplay = (typeof DISPLAY)[keyof typeof DISPLAY] | null;
+/**
+ * @deprecated BoxDisplayArray is deprecated. Use DisplayArray instead.
+ */
+type BoxDisplayArray = [BoxDisplay, BoxDisplay?, BoxDisplay?, BoxDisplay?];
 
+export type BlockSizeArray = [BlockSize, BlockSize?, BlockSize?, BlockSize?];
+
+/**
+ * @deprecated BoxWidth is deprecated. Use BlockSize instead.
+ */
 export type BoxWidth = (typeof BLOCK_SIZES)[keyof typeof BLOCK_SIZES] | null;
+/**
+ * @deprecated BoxWidthArray is deprecated. Use BlockSizeArray instead.
+ */
 export type BoxWidthArray = [BoxWidth, BoxWidth?, BoxWidth?, BoxWidth?];
 
-export type BoxHeight = (typeof BLOCK_SIZES)[keyof typeof BLOCK_SIZES] | null;
-export type BoxHeightArray = [BoxHeight, BoxHeight?, BoxHeight?, BoxHeight?];
+/**
+ * @deprecated BoxHeight is deprecated. Use BlockSize instead.
+ */
+type BoxHeight = (typeof BLOCK_SIZES)[keyof typeof BLOCK_SIZES] | null;
+/**
+ * @deprecated BoxHeightArray is deprecated. Use BlockSizeArray instead.
+ */
+type BoxHeightArray = [BoxHeight, BoxHeight?, BoxHeight?, BoxHeight?];
 
 export type SizeNumber =
   | 0
@@ -130,6 +178,7 @@ export type BackgroundColorArray = [
   BackgroundColor?,
   BackgroundColor?,
 ];
+
 export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * The content of the Box component.
@@ -140,7 +189,11 @@ export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
    * Use the FLEX_DIRECTION object from '../../../helpers/constants/design-system';
    * Accepts responsive props in the form of an array.
    */
-  flexDirection?: BoxFlexDirection | BoxFlexDirectionArray;
+  flexDirection?:
+    | FlexDirection
+    | FlexDirectionArray
+    | BoxFlexDirection
+    | BoxFlexDirectionArray;
   /**
    * The flex wrap of the Box component.
    * Use the FLEX_WRAP object from '../../../helpers/constants/design-system';
@@ -296,19 +349,19 @@ export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
    * Use DISPLAY const from '../../../helpers/constants/design-system';
    * Accepts responsive props in the form of an array.
    */
-  display?: BoxDisplay | BoxDisplayArray;
+  display?: Display | DisplayArray | BoxDisplay | BoxDisplayArray;
   /**
    * The width of the Box component.
    * Use BLOCK_SIZES const from '../../../helpers/constants/design-system';
    * Accepts responsive props in the form of an array.
    */
-  width?: BoxWidth | BoxWidthArray;
+  width?: BlockSize | BlockSizeArray | BoxWidth | BoxWidthArray;
   /**
    * The height of the Box component.
    * Use BLOCK_SIZES const from '../../../helpers/constants/design-system';
    * Accepts responsive props in the form of an array.
    */
-  height?: BoxHeight | BoxHeightArray;
+  height?: BlockSize | BlockSizeArray | BoxHeight | BoxHeightArray;
   /**
    * The background-color of the Box component.
    * Use BackgroundColor enum from '../../../helpers/constants/design-system';
diff --git a/ui/components/ui/box/box.js b/ui/components/ui/box/box.js
index 0e381334c848..ceb2011f93d7 100644
--- a/ui/components/ui/box/box.js
+++ b/ui/components/ui/box/box.js
@@ -4,26 +4,26 @@ import classnames from 'classnames';
 import { memoize } from 'lodash';
 import {
   AlignItems,
-  BLOCK_SIZES,
+  BlockSize,
   BorderStyle,
   BackgroundColor,
   BorderColor,
   TextColor,
   IconColor,
-  DISPLAY,
   JustifyContent,
   TEXT_ALIGN,
-  FLEX_DIRECTION,
-  FLEX_WRAP,
+  FlexDirection,
+  FlexWrap,
   BREAKPOINTS,
   BorderRadius,
+  Display,
 } from '../../../helpers/constants/design-system';
 
 const BASE_CLASS_NAME = 'box';
 const Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
 const ValidSize = PropTypes.oneOf(Sizes);
-const ValidBlockSize = PropTypes.oneOf(Object.values(BLOCK_SIZES));
+const ValidBlockSize = PropTypes.oneOf(Object.values(BlockSize));
 const ValidSizeAndAuto = PropTypes.oneOf([...Sizes, 'auto']);
 export const ValidBackgroundColor = PropTypes.oneOf(
   Object.values(BackgroundColor),
@@ -212,7 +212,7 @@ const Box = React.forwardRef(function Box(
     alignItems,
     justifyContent,
     textAlign,
-    flexDirection = FLEX_DIRECTION.ROW,
+    flexDirection = FlexDirection.Row,
     flexWrap,
     gap,
     display,
@@ -329,12 +329,12 @@ function isCustomComponent(element) {
 Box.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   flexDirection: PropTypes.oneOfType([
-    PropTypes.oneOf(Object.values(FLEX_DIRECTION)),
-    PropTypes.arrayOf(PropTypes.oneOf(Object.values(FLEX_DIRECTION))),
+    PropTypes.oneOf(Object.values(FlexDirection)),
+    PropTypes.arrayOf(PropTypes.oneOf(Object.values(FlexDirection))),
   ]),
   flexWrap: PropTypes.oneOfType([
-    PropTypes.oneOf(Object.values(FLEX_WRAP)),
-    PropTypes.arrayOf(PropTypes.oneOf(Object.values(FLEX_WRAP))),
+    PropTypes.oneOf(Object.values(FlexWrap)),
+    PropTypes.arrayOf(PropTypes.oneOf(Object.values(FlexWrap))),
   ]),
   gap: MultipleSizes,
   margin: MultipleSizesAndAuto,
@@ -373,8 +373,8 @@ Box.propTypes = {
     PropTypes.arrayOf(PropTypes.oneOf(Object.values(TEXT_ALIGN))),
   ]),
   display: PropTypes.oneOfType([
-    PropTypes.oneOf(Object.values(DISPLAY)),
-    PropTypes.arrayOf(PropTypes.oneOf(Object.values(DISPLAY))),
+    PropTypes.oneOf(Object.values(Display)),
+    PropTypes.arrayOf(PropTypes.oneOf(Object.values(Display))),
   ]),
   width: MultipleBlockSizes,
   height: MultipleBlockSizes,
diff --git a/ui/components/ui/box/box.stories.tsx b/ui/components/ui/box/box.stories.tsx
index a1c6219c112d..389e36674cce 100644
--- a/ui/components/ui/box/box.stories.tsx
+++ b/ui/components/ui/box/box.stories.tsx
@@ -2,18 +2,18 @@ import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import {
-  BLOCK_SIZES,
+  BlockSize,
   BorderStyle,
   BorderRadius,
   TextColor,
   BorderColor,
   BackgroundColor,
-  DISPLAY,
+  Display,
   AlignItems,
   JustifyContent,
   TEXT_ALIGN,
-  FLEX_DIRECTION,
-  FLEX_WRAP,
+  FlexDirection,
+  FlexWrap,
 } from '../../../helpers/constants/design-system';
 
 import { Text } from '../../component-library';
@@ -53,17 +53,17 @@ export default {
       table: { category: 'children' },
     },
     display: {
-      options: Object.values(DISPLAY),
+      options: Object.values(Display),
       control: 'select',
       table: { category: 'display' },
     },
     width: {
-      options: Object.values(BLOCK_SIZES),
+      options: Object.values(BlockSize),
       control: 'multi-select',
       table: { category: 'display' },
     },
     height: {
-      options: Object.values(BLOCK_SIZES),
+      options: Object.values(BlockSize),
       control: 'select',
       table: { category: 'display' },
     },
@@ -105,12 +105,12 @@ export default {
       table: { category: 'border' },
     },
     flexWrap: {
-      options: Object.values(FLEX_WRAP),
+      options: Object.values(FlexWrap),
       control: 'select',
       table: { category: 'display' },
     },
     flexDirection: {
-      options: Object.values(FLEX_DIRECTION),
+      options: Object.values(FlexDirection),
       control: 'select',
       table: { category: 'display' },
     },
@@ -223,11 +223,11 @@ export const DefaultStory: ComponentStory<typeof Box> = (args) => (
 
 DefaultStory.args = {
   children: 'Box component',
-  display: DISPLAY.FLEX,
+  display: Display.Flex,
   justifyContent: JustifyContent.center,
   alignItems: AlignItems.center,
-  width: BLOCK_SIZES.HALF,
-  height: BLOCK_SIZES.HALF,
+  width: BlockSize.Half,
+  height: BlockSize.Half,
   borderColor: BorderColor.borderDefault,
   padding: 4,
 };
@@ -497,7 +497,7 @@ export const BorderRadiusStory = () => {
   return (
     <>
       <Box
-        display={DISPLAY.GRID}
+        display={Display.Grid}
         style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }}
         gap={4}
       >
@@ -572,7 +572,7 @@ export const BorderRadiusStory = () => {
         borderWidth={2}
         borderRadius={BorderRadius.full}
         margin={4}
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         alignItems={AlignItems.center}
         style={{ height: '250px', width: '250px' }}
       >
@@ -596,11 +596,11 @@ export const ResponsiveProps = () => {
         marginBottom={[0]}
         padding={[2, 4]}
         gap={[2, 4]}
-        display={[DISPLAY.FLEX, null, null, DISPLAY.NONE]}
+        display={[Display.Flex, null, null, Display.None]}
         flexDirection={[
-          FLEX_DIRECTION.COLUMN,
-          FLEX_DIRECTION.COLUMN,
-          FLEX_DIRECTION.ROW,
+          FlexDirection.Column,
+          FlexDirection.Column,
+          FlexDirection.Row,
         ]}
         borderColor={BorderColor.borderDefault}
       >
@@ -699,7 +699,7 @@ export const Width: ComponentStory<typeof Box> = () => {
               ? BackgroundColor.errorMuted
               : BackgroundColor.warningMuted
           }
-          width={BLOCK_SIZES.ONE_TWELFTH}
+          width={BlockSize.OneTwelfth}
         />,
       );
     }
@@ -712,7 +712,7 @@ export const Width: ComponentStory<typeof Box> = () => {
         <b>Static widths</b>
       </p>
       <Box
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         borderColor={BorderColor.borderMuted}
         style={{
           height: '100vh',
@@ -723,9 +723,9 @@ export const Width: ComponentStory<typeof Box> = () => {
         {getColumns()}
 
         <Box
-          width={BLOCK_SIZES.FULL}
-          display={DISPLAY.FLEX}
-          flexWrap={FLEX_WRAP.WRAP}
+          width={BlockSize.Full}
+          display={Display.Flex}
+          flexWrap={FlexWrap.Wrap}
           style={{
             position: 'absolute',
             top: 0,
@@ -738,107 +738,107 @@ export const Width: ComponentStory<typeof Box> = () => {
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
             marginBottom={6}
-            width={BLOCK_SIZES.FULL}
-            display={DISPLAY.FLEX}
+            width={BlockSize.Full}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.FULL
+            BlockSize.Full
           </Box>
           <Box
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
             marginBottom={6}
-            width={BLOCK_SIZES.HALF}
-            display={DISPLAY.FLEX}
+            width={BlockSize.Half}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.HALF
+            BlockSize.Half
           </Box>
           <Box
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
             marginBottom={6}
-            width={BLOCK_SIZES.HALF}
-            display={DISPLAY.FLEX}
+            width={BlockSize.Half}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.HALF
+            BlockSize.Half
           </Box>
           <Box
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
             marginBottom={6}
-            width={BLOCK_SIZES.ONE_THIRD}
-            display={DISPLAY.FLEX}
+            width={BlockSize.OneThird}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.ONE_THIRD
+            BlockSize.OneThird
           </Box>
           <Box
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
             marginBottom={6}
-            width={BLOCK_SIZES.ONE_THIRD}
-            display={DISPLAY.FLEX}
+            width={BlockSize.OneThird}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.ONE_THIRD
+            BlockSize.OneThird
           </Box>
           <Box
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
             marginBottom={6}
-            width={BLOCK_SIZES.ONE_THIRD}
-            display={DISPLAY.FLEX}
+            width={BlockSize.OneThird}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.ONE_THIRD
+            BlockSize.OneThird
           </Box>
           <Box
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
-            width={BLOCK_SIZES.ONE_FOURTH}
-            display={DISPLAY.FLEX}
+            width={BlockSize.OneFourth}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.ONE_FOURTH
+            BlockSize.OneFourth
           </Box>
           <Box
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
-            width={BLOCK_SIZES.ONE_FOURTH}
-            display={DISPLAY.FLEX}
+            width={BlockSize.OneFourth}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.ONE_FOURTH
+            BlockSize.OneFourth
           </Box>
           <Box
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
-            width={BLOCK_SIZES.ONE_FOURTH}
-            display={DISPLAY.FLEX}
+            width={BlockSize.OneFourth}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.ONE_FOURTH
+            BlockSize.OneFourth
           </Box>
           <Box
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
-            width={BLOCK_SIZES.ONE_FOURTH}
-            display={DISPLAY.FLEX}
+            width={BlockSize.OneFourth}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.ONE_FOURTH
+            BlockSize.OneFourth
           </Box>
         </Box>
       </Box>
@@ -846,16 +846,16 @@ export const Width: ComponentStory<typeof Box> = () => {
         <b>Responsive widths</b>
       </p>
       <Box
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         borderColor={BorderColor.borderMuted}
         style={{ height: '100vh', position: 'relative', textAlign: 'center' }}
       >
         {getColumns()}
 
         <Box
-          width={BLOCK_SIZES.FULL}
-          display={DISPLAY.FLEX}
-          flexWrap={FLEX_WRAP.WRAP}
+          width={BlockSize.Full}
+          display={Display.Flex}
+          flexWrap={FlexWrap.Wrap}
           style={{
             position: 'absolute',
             top: 0,
@@ -868,65 +868,65 @@ export const Width: ComponentStory<typeof Box> = () => {
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
             width={[
-              BLOCK_SIZES.FULL,
-              BLOCK_SIZES.HALF,
-              BLOCK_SIZES.ONE_THIRD,
-              BLOCK_SIZES.ONE_FOURTH,
+              BlockSize.Full,
+              BlockSize.Half,
+              BlockSize.OneThird,
+              BlockSize.OneFourth,
             ]}
-            display={DISPLAY.FLEX}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
-            BLOCK_SIZES.ONE_FOURTH,
+            BlockSize.Full, BlockSize.Half, BlockSize.OneThird,
+            BlockSize.OneFourth,
           </Box>
           <Box
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
             width={[
-              BLOCK_SIZES.FULL,
-              BLOCK_SIZES.HALF,
-              BLOCK_SIZES.ONE_THIRD,
-              BLOCK_SIZES.ONE_FOURTH,
+              BlockSize.Full,
+              BlockSize.Half,
+              BlockSize.OneThird,
+              BlockSize.OneFourth,
             ]}
-            display={DISPLAY.FLEX}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
-            BLOCK_SIZES.ONE_FOURTH,
+            BlockSize.Full, BlockSize.Half, BlockSize.OneThird,
+            BlockSize.OneFourth,
           </Box>
           <Box
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
             width={[
-              BLOCK_SIZES.FULL,
-              BLOCK_SIZES.HALF,
-              BLOCK_SIZES.ONE_THIRD,
-              BLOCK_SIZES.ONE_FOURTH,
+              BlockSize.Full,
+              BlockSize.Half,
+              BlockSize.OneThird,
+              BlockSize.OneFourth,
             ]}
-            display={DISPLAY.FLEX}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
-            BLOCK_SIZES.ONE_FOURTH,
+            BlockSize.Full, BlockSize.Half, BlockSize.OneThird,
+            BlockSize.OneFourth,
           </Box>
           <Box
             borderColor={BorderColor.borderMuted}
             borderWidth={6}
             width={[
-              BLOCK_SIZES.FULL,
-              BLOCK_SIZES.HALF,
-              BLOCK_SIZES.ONE_THIRD,
-              BLOCK_SIZES.ONE_FOURTH,
+              BlockSize.Full,
+              BlockSize.Half,
+              BlockSize.OneThird,
+              BlockSize.OneFourth,
             ]}
-            display={DISPLAY.FLEX}
+            display={Display.Flex}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
-            BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD,
-            BLOCK_SIZES.ONE_FOURTH,
+            BlockSize.Full, BlockSize.Half, BlockSize.OneThird,
+            BlockSize.OneFourth,
           </Box>
         </Box>
       </Box>
@@ -936,9 +936,9 @@ export const Width: ComponentStory<typeof Box> = () => {
 
 Width.args = {
   width: [
-    BLOCK_SIZES.HALF,
-    BLOCK_SIZES.ONE_FIFTH,
-    BLOCK_SIZES.THREE_FOURTHS,
-    BLOCK_SIZES.ONE_FOURTH,
+    BlockSize.Half,
+    BlockSize.OneFifth,
+    BlockSize.ThreeFourths,
+    BlockSize.OneFourth,
   ],
 };
diff --git a/ui/components/ui/box/box.test.tsx b/ui/components/ui/box/box.test.tsx
index bc0cd108c09f..364e28dedd81 100644
--- a/ui/components/ui/box/box.test.tsx
+++ b/ui/components/ui/box/box.test.tsx
@@ -2,13 +2,13 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 import {
   BorderStyle,
-  DISPLAY,
-  FLEX_DIRECTION,
-  FLEX_WRAP,
+  Display,
+  FlexDirection,
+  FlexWrap,
   AlignItems,
   JustifyContent,
   TEXT_ALIGN,
-  BLOCK_SIZES,
+  BlockSize,
   BorderRadius,
   BorderColor,
   BackgroundColor,
@@ -487,15 +487,15 @@ describe('Box', () => {
     it('should render the Box with the display classes', () => {
       const { getByText } = render(
         <>
-          <Box display={DISPLAY.BLOCK}>Box display-block</Box>
-          <Box display={DISPLAY.FLEX}>Box display-flex</Box>
-          <Box display={DISPLAY.GRID}>Box display-grid</Box>
-          <Box display={DISPLAY.INLINE}>Box display-inline</Box>
-          <Box display={DISPLAY.INLINE_BLOCK}>Box display-inline-block</Box>
-          <Box display={DISPLAY.INLINE_FLEX}>Box display-inline-flex</Box>
-          <Box display={DISPLAY.INLINE_GRID}>Box display-inline-grid</Box>
-          <Box display={DISPLAY.LIST_ITEM}>Box display-list-item</Box>
-          <Box display={DISPLAY.NONE}>Box display-none</Box>
+          <Box display={Display.Block}>Box display-block</Box>
+          <Box display={Display.Flex}>Box display-flex</Box>
+          <Box display={Display.Grid}>Box display-grid</Box>
+          <Box display={Display.Inline}>Box display-inline</Box>
+          <Box display={Display.InlineBlock}>Box display-inline-block</Box>
+          <Box display={Display.InlineFlex}>Box display-inline-flex</Box>
+          <Box display={Display.InlineGrid}>Box display-inline-grid</Box>
+          <Box display={Display.ListItem}>Box display-list-item</Box>
+          <Box display={Display.None}>Box display-none</Box>
         </>,
       );
 
@@ -522,7 +522,7 @@ describe('Box', () => {
       const { getByText } = render(
         <>
           <Box
-            display={[DISPLAY.BLOCK, DISPLAY.FLEX, DISPLAY.GRID, DISPLAY.NONE]}
+            display={[Display.Block, Display.Flex, Display.Grid, Display.None]}
           >
             Box content
           </Box>
@@ -549,14 +549,14 @@ describe('Box', () => {
     it('should render the Box with the flexDirection classes', () => {
       const { getByText } = render(
         <>
-          <Box flexDirection={FLEX_DIRECTION.ROW}>Box flex-direction-row</Box>
-          <Box flexDirection={FLEX_DIRECTION.ROW_REVERSE}>
+          <Box flexDirection={FlexDirection.Row}>Box flex-direction-row</Box>
+          <Box flexDirection={FlexDirection.RowReverse}>
             Box flex-direction-row-reverse
           </Box>
-          <Box flexDirection={FLEX_DIRECTION.COLUMN}>
+          <Box flexDirection={FlexDirection.Column}>
             Box flex-direction-column
           </Box>
-          <Box flexDirection={FLEX_DIRECTION.COLUMN_REVERSE}>
+          <Box flexDirection={FlexDirection.ColumnReverse}>
             Box flex-direction-column-reverse
           </Box>
         </>,
@@ -580,10 +580,10 @@ describe('Box', () => {
         <>
           <Box
             flexDirection={[
-              FLEX_DIRECTION.ROW,
-              FLEX_DIRECTION.ROW_REVERSE,
-              FLEX_DIRECTION.COLUMN,
-              FLEX_DIRECTION.COLUMN_REVERSE,
+              FlexDirection.Row,
+              FlexDirection.RowReverse,
+              FlexDirection.Column,
+              FlexDirection.ColumnReverse,
             ]}
           >
             Box content
@@ -604,11 +604,9 @@ describe('Box', () => {
     it('should render the Box with the flexWrap classes', () => {
       const { getByText } = render(
         <>
-          <Box flexWrap={FLEX_WRAP.WRAP}>Box flex-wrap-wrap</Box>
-          <Box flexWrap={FLEX_WRAP.WRAP_REVERSE}>
-            Box flex-wrap-wrap-reverse
-          </Box>
-          <Box flexWrap={FLEX_WRAP.NO_WRAP}>Box flex-wrap-nowrap</Box>
+          <Box flexWrap={FlexWrap.Wrap}>Box flex-wrap-wrap</Box>
+          <Box flexWrap={FlexWrap.WrapReverse}>Box flex-wrap-wrap-reverse</Box>
+          <Box flexWrap={FlexWrap.NoWrap}>Box flex-wrap-nowrap</Box>
         </>,
       );
 
@@ -626,11 +624,7 @@ describe('Box', () => {
       const { getByText } = render(
         <>
           <Box
-            flexWrap={[
-              FLEX_WRAP.WRAP,
-              FLEX_WRAP.WRAP_REVERSE,
-              FLEX_WRAP.NO_WRAP,
-            ]}
+            flexWrap={[FlexWrap.Wrap, FlexWrap.WrapReverse, FlexWrap.NoWrap]}
           >
             Box content
           </Box>
@@ -884,10 +878,10 @@ describe('Box', () => {
     it('should render the Box with the width class', () => {
       const { getByText } = render(
         <>
-          <Box width={BLOCK_SIZES.HALF}>Box half</Box>
-          <Box width={BLOCK_SIZES.ONE_FOURTH}>Box one fourth</Box>
-          <Box width={BLOCK_SIZES.MAX}>Box max</Box>
-          <Box width={BLOCK_SIZES.MIN}>Box min</Box>
+          <Box width={BlockSize.Half}>Box half</Box>
+          <Box width={BlockSize.OneFourth}>Box one fourth</Box>
+          <Box width={BlockSize.Max}>Box max</Box>
+          <Box width={BlockSize.Min}>Box min</Box>
         </>,
       );
       expect(getByText('Box half')).toHaveClass('box--width-1/2');
@@ -900,10 +894,10 @@ describe('Box', () => {
         <>
           <Box
             width={[
-              BLOCK_SIZES.HALF,
-              BLOCK_SIZES.ONE_FOURTH,
-              BLOCK_SIZES.MAX,
-              BLOCK_SIZES.MIN,
+              BlockSize.Half,
+              BlockSize.OneFourth,
+              BlockSize.Max,
+              BlockSize.Min,
             ]}
           >
             Box content
@@ -918,10 +912,10 @@ describe('Box', () => {
     it('should render the Box with the height class', () => {
       const { getByText } = render(
         <>
-          <Box height={BLOCK_SIZES.HALF}>Box half</Box>
-          <Box height={BLOCK_SIZES.ONE_FOURTH}>Box one fourth</Box>
-          <Box height={BLOCK_SIZES.MAX}>Box max</Box>
-          <Box height={BLOCK_SIZES.MIN}>Box min</Box>
+          <Box height={BlockSize.Half}>Box half</Box>
+          <Box height={BlockSize.OneFourth}>Box one fourth</Box>
+          <Box height={BlockSize.Max}>Box max</Box>
+          <Box height={BlockSize.Min}>Box min</Box>
         </>,
       );
       expect(getByText('Box half')).toHaveClass('box--height-1/2');
@@ -934,10 +928,10 @@ describe('Box', () => {
         <>
           <Box
             height={[
-              BLOCK_SIZES.HALF,
-              BLOCK_SIZES.ONE_FOURTH,
-              BLOCK_SIZES.MAX,
-              BLOCK_SIZES.MIN,
+              BlockSize.Half,
+              BlockSize.OneFourth,
+              BlockSize.Max,
+              BlockSize.Min,
             ]}
           >
             Box content
diff --git a/ui/helpers/constants/design-system.ts b/ui/helpers/constants/design-system.ts
index 0fb7a5faf2bf..e90fe6874bac 100644
--- a/ui/helpers/constants/design-system.ts
+++ b/ui/helpers/constants/design-system.ts
@@ -2,7 +2,7 @@
  * A note about the existence of both singular and plural variable names here:
  * When dealing with a literal property name, e.g. AlignItems, the constant
  * should match the property. When detailing a collection of things, it should
- * match the plural form of the thing. e.g. Color, TypographyVariant
+ * match the plural form of the thing. e.g. Color, TextVariant, Size
  */
 
 export enum Color {
@@ -235,6 +235,19 @@ export enum JustifyContent {
   spaceEvenly = 'space-evenly',
 }
 
+export enum FlexDirection {
+  Row = 'row',
+  RowReverse = 'row-reverse',
+  Column = 'column',
+  ColumnReverse = 'column-reverse',
+}
+
+/**
+ * @deprecated `FLEX_DIRECTION` const has been deprecated in favour of the `FlexDirection` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ *
+ * Help to replace `FLEX_DIRECTION` with `FlexDirection` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
+ */
+
 export const FLEX_DIRECTION = {
   ROW: 'row',
   ROW_REVERSE: 'row-reverse',
@@ -242,12 +255,42 @@ export const FLEX_DIRECTION = {
   COLUMN_REVERSE: 'column-reverse',
 };
 
+export enum FlexWrap {
+  Wrap = 'wrap',
+  WrapReverse = 'wrap-reverse',
+  NoWrap = 'nowrap',
+}
+
+/**
+ * @deprecated `FLEX_WRAP` const has been deprecated in favour of the `FlexWrap` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ *
+ * Help to replace `FLEX_WRAP` with `FlexWrap` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
+ */
+
 export const FLEX_WRAP = {
   WRAP: 'wrap',
   WRAP_REVERSE: 'wrap-reverse',
   NO_WRAP: 'nowrap',
 };
 
+export enum Display {
+  Block = 'block',
+  Flex = 'flex',
+  Grid = 'grid',
+  InlineBlock = 'inline-block',
+  Inline = 'inline',
+  InlineFlex = 'inline-flex',
+  InlineGrid = 'inline-grid',
+  ListItem = 'list-item',
+  None = 'none',
+}
+
+/**
+ * @deprecated `DISPLAY` const has been deprecated in favour of the `Display` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ *
+ * Help to replace `DISPLAY` with `Display` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
+ */
+
 export const DISPLAY = {
   BLOCK: 'block',
   FLEX: 'flex',
@@ -260,6 +303,12 @@ export const DISPLAY = {
   NONE: 'none',
 };
 
+/**
+ * @deprecated `FRACTIONS` const has been deprecated in favour of the `BlockSize` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ *
+ * Help to replace `FRACTIONS` with `BlockSize` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
+ */
+
 export const FRACTIONS = {
   HALF: '1/2',
   ONE_THIRD: '1/3',
@@ -289,6 +338,45 @@ export const FRACTIONS = {
   ELEVEN_TWELFTHS: '11/12',
 };
 
+export enum BlockSize {
+  Half = '1/2',
+  OneThird = '1/3',
+  TwoThirds = '2/3',
+  OneFourth = '1/4',
+  TwoFourths = '2/4',
+  ThreeFourths = '3/4',
+  OneFifth = '1/5',
+  TwoFifths = '2/5',
+  ThreeFifths = '3/5',
+  FourFifths = '4/5',
+  OneSixth = '1/6',
+  TwoSixths = '2/6',
+  ThreeSixths = '3/6',
+  FourSixths = '4/6',
+  FiveSixths = '5/6',
+  OneTwelfth = '1/12',
+  TwoTwelfths = '2/12',
+  ThreeTwelfths = '3/12',
+  FourTwelfths = '4/12',
+  FiveTwelfths = '5/12',
+  SixTwelfths = '6/12',
+  SevenTwelfths = '7/12',
+  EightTwelfths = '8/12',
+  NineTwelfths = '9/12',
+  TenTwelfths = '10/12',
+  ElevenTwelfths = '11/12',
+  Screen = 'screen',
+  Max = 'max',
+  Min = 'min',
+  Full = 'full',
+}
+
+/**
+ * @deprecated `BLOCK_SIZES` const has been deprecated in favour of the `BlockSize` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ *
+ * Help to replace `BLOCK_SIZES` with `BlockSize` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
+ */
+
 export const BLOCK_SIZES = {
   ...FRACTIONS,
   SCREEN: 'screen',
@@ -389,6 +477,19 @@ export const FONT_STYLE = {
   NORMAL: 'normal',
 };
 
+export enum Severity {
+  Danger = 'danger',
+  Warning = 'warning',
+  Info = 'info',
+  Success = 'success',
+}
+
+/**
+ * @deprecated `SEVERITIES` const has been deprecated in favour of the `Severity` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ *
+ * Help to replace `SEVERITIES` with `FontStyle` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
+ */
+
 export const SEVERITIES = {
   DANGER: 'danger',
   WARNING: 'warning',