Update Text import paths: /institutional (#20064)

* Updating Text import paths and deprecated consts

* Update to button

ui/components/institutional/compliance-details/__snapshots__/compliance-details.test.js.snap

@@ -9,12 +9,12 @@ exports[`ComplianceDetails should render correctly 1`] = `
       class="mm-box compliance-details__row mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--height-2/3"
     >
       <p
-        class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
       >
         Address
       </p>
       <p
-        class="box mm-text mm-text--body-xs box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--body-xs mm-box--color-text-default"
       >
         0xAddress
       </p>
@@ -26,7 +26,7 @@ exports[`ComplianceDetails should render correctly 1`] = `
         class="mm-box mm-box--margin-bottom-1 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
       >
         <p
-          class="box mm-text mm-text--body-md box--margin-right-2 box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-default"
         >
           Risk rating
         </p>
@@ -60,7 +60,7 @@ exports[`ComplianceDetails should render correctly 1`] = `
         class="mm-box compliance-row__column-risk compliance-row__column-risk--green"
       >
         <p
-          class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
         >
           low
         </p>
@@ -73,7 +73,7 @@ exports[`ComplianceDetails should render correctly 1`] = `
         class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
       >
         <p
-          class="box mm-text mm-text--body-md box--margin-right-2 box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-default"
         >
           Report last run
         </p>
@@ -104,7 +104,7 @@ exports[`ComplianceDetails should render correctly 1`] = `
         </div>
       </div>
       <p
-        class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
       />
     </div>
     <div

ui/components/institutional/compliance-details/compliance-details.js

@@ -11,8 +11,8 @@ import {
   getComplianceTenantSubdomain,
 } from '../../../ducks/institutional/institutional';
 import { formatDate } from '../../../helpers/utils/util';
-import { Box } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { Box, Text } from '../../component-library';
+
 import {
   TextColor,
   TextVariant,

ui/components/institutional/compliance-modal/__snapshots__/compliance-modal.test.js.snap

@@ -9,13 +9,13 @@ exports[`ComplianceModal should render the correct content 1`] = `
       class="modal-container__content"
     >
       <div
-        class="box box--flex-direction-row"
+        class="mm-box"
       >
         <header
-          class="box box--display-flex box--flex-direction-row box--justify-content-space-between"
+          class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
         >
           <div
-            class="box box--display-flex box--flex-direction-row box--justify-content-flex-start box--align-items-center"
+            class="mm-box mm-box--display-flex mm-box--justify-content-flex-start mm-box--align-items-center"
           >
             <img
               alt="Codefi Compliance"
@@ -24,7 +24,7 @@ exports[`ComplianceModal should render the correct content 1`] = `
               width="32"
             />
             <h4
-              class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default"
+              class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-text-default"
             >
               [codefiCompliance]
             </h4>
@@ -41,18 +41,18 @@ exports[`ComplianceModal should render the correct content 1`] = `
           </button>
         </header>
         <p
-          class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-md mm-box--padding-bottom-3 mm-box--color-text-alternative"
           data-testid="compliance-info"
         >
           [complianceBlurb0]
         </p>
         <p
-          class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-md mm-box--padding-bottom-3 mm-box--color-text-alternative"
         >
           [complianceBlurb1]
         </p>
         <p
-          class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-alternative"
+          class="mm-box mm-text mm-text--body-md mm-box--padding-bottom-3 mm-box--color-text-alternative"
         >
           [complianceBlurpStep0]
         </p>

ui/components/institutional/compliance-modal/compliance-modal.js

@@ -3,14 +3,20 @@ import { useDispatch } from 'react-redux';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { hideModal } from '../../../store/actions';
 import Modal from '../../app/modal';
-import Box from '../../ui/box';
-import { ButtonIcon, IconSize, IconName } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+
+import {
+  ButtonIcon,
+  IconSize,
+  IconName,
+  Text,
+  Box,
+} from '../../component-library';
+
 import {
   AlignItems,
   JustifyContent,
   TextColor,
-  DISPLAY,
+  Display,
 } from '../../../helpers/constants/design-system';
 
 const ComplianceModal = () => {
@@ -35,11 +41,11 @@ const ComplianceModal = () => {
       <Box>
         <Box
           as="header"
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           justifyContent={JustifyContent.spaceBetween}
         >
           <Box
-            display={DISPLAY.FLEX}
+            display={Display.Flex}
             justifyContent={JustifyContent.flexStart}
             alignItems={AlignItems.center}
           >

ui/components/institutional/compliance-settings/__snapshots__/compliance-settings.test.js.snap

@@ -3,15 +3,15 @@
 exports[`Compliance Settings shows disconnect when Compliance is activated 1`] = `
 <div>
   <div
-    class="box box--flex-direction-row"
+    class="mm-box"
   >
     <h6
-      class="box mm-text institutional-feature__content mm-text--body-sm box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text institutional-feature__content mm-text--body-sm mm-box--color-text-default"
     >
       Change your settings or view reports by opening up Codefi Compliance or disconnect below.
     </h6>
     <div
-      class="box institutional-feature__footer box--padding-4 box--sm:padding-6 box--flex-direction-row box--border-style-solid box--border-color-border-muted box--border-width-1"
+      class="mm-box institutional-feature__footer mm-box--padding-4 mm-box--sm:padding-6 mm-box--border-style-solid mm-box--border-color-border-muted mm-box--border-width-1"
     >
       <button
         class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
@@ -33,25 +33,25 @@ exports[`Compliance Settings shows disconnect when Compliance is activated 1`] =
 exports[`Compliance Settings shows start btn when Compliance its not activated 1`] = `
 <div>
   <div
-    class="box box--sm:padding-6 box--flex-direction-row box--color-text-alternative"
+    class="mm-box mm-box--padding-0 mm-box--sm:padding-6 mm-box--color-text-alternative"
     data-testid="institutional-content"
   >
     <div
-      class="box institutional-feature__content box--flex-direction-row"
+      class="mm-box institutional-feature__content"
       variant="body-sm"
     >
       <p
-        class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-box--padding-bottom-3 mm-box--color-text-default"
       >
         DeFi raises AML/CFT risk for institutions, given the decentralised pools and pseudonymous counterparties.
       </p>
       <p
-        class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-box--padding-bottom-3 mm-box--color-text-default"
       >
         Codefi Compliance is the only product capable of running AML/CFT analysis on DeFi pools. This allows you to identify and avoid pools and counterparties that fail your risk setting.
       </p>
       <p
-        class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-box--padding-bottom-3 mm-box--color-text-default"
       >
         Steps to enable AML/CFT Compliance:
       </p>
@@ -74,10 +74,10 @@ exports[`Compliance Settings shows start btn when Compliance its not activated 1
       </ol>
     </div>
     <div
-      class="box box--display-flex box--flex-direction-row box--justify-content-center"
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center"
     >
       <div
-        class="box institutional-feature__footer box--padding-4 box--sm:padding-6 box--flex-direction-row box--border-style-solid box--border-color-border-muted box--border-width-1"
+        class="mm-box institutional-feature__footer mm-box--padding-4 mm-box--sm:padding-6 mm-box--border-style-solid mm-box--border-color-border-muted mm-box--border-width-1"
       >
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"

ui/components/institutional/compliance-settings/compliance-settings.js

@@ -2,18 +2,22 @@ import React, { useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   JustifyContent,
-  DISPLAY,
+  Display,
   TextColor,
-  FLEX_DIRECTION,
+  FlexDirection,
   TextVariant,
   BorderStyle,
   BorderColor,
 } from '../../../helpers/constants/design-system';
 import { I18nContext } from '../../../contexts/i18n';
 import { mmiActionsFactory } from '../../../store/institutional/institution-background';
-import { Button, BUTTON_VARIANT, BUTTON_SIZES } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
-import Box from '../../ui/box';
+import {
+  Button,
+  BUTTON_VARIANT,
+  BUTTON_SIZES,
+  Text,
+  Box,
+} from '../../component-library';
 
 const ComplianceSettings = () => {
   const t = useContext(I18nContext);
@@ -89,8 +93,8 @@ const ComplianceSettings = () => {
         </ol>
       </Box>
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.ROW}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
         justifyContent={JustifyContent.center}
       >
         <Box

ui/components/institutional/custody-labels/__snapshots__/custody-labels.test.js.snap

@@ -7,7 +7,7 @@ exports[`CustodyLabels Component should render correctly 1`] = `
     for="address-index"
   >
     <p
-      class="box mm-text custody-label mm-text--body-xs mm-text--font-weight-normal mm-text--text-transform-capitalize box--margin-top-1 box--margin-right-1 box--margin-bottom-2 box--padding-top-1 box--padding-right-2 box--padding-bottom-1 box--padding-left-2 box--flex-direction-row box--color-text-default box--background-color-background-alternative box--rounded-sm"
+      class="mm-box mm-text custody-label mm-text--body-xs mm-text--font-weight-normal mm-text--text-transform-capitalize mm-box--margin-top-1 mm-box--margin-right-1 mm-box--margin-bottom-2 mm-box--padding-top-1 mm-box--padding-right-2 mm-box--padding-bottom-1 mm-box--padding-left-2 mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-sm"
     >
       value
     </p>

ui/components/institutional/custody-labels/custody-labels.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { Label, Text } from '../../component-library';
+
 import {
   TextTransform,
   BackgroundColor,

ui/components/institutional/interactive-replacement-token-notification/interactive-replacement-token-notification.js

@@ -25,8 +25,8 @@ import {
   IconSize,
   ButtonLink,
   Box,
+  Text,
 } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
 
 const InteractiveReplacementTokenNotification = ({ isVisible }) => {
   const t = useI18nContext();

ui/components/institutional/jwt-dropdown/__snapshots__/jwt-dropdown.test.js.snap

@@ -6,7 +6,7 @@ exports[`JwtDropdown should render the Jwt dropdown component 1`] = `
     class="mm-box"
   >
     <p
-      class="box mm-text custody-search-jwt__select-title mm-text--body-md box--padding-1 box--flex-direction-row box--color-text-default"
+      class="mm-box mm-text custody-search-jwt__select-title mm-text--body-md mm-box--padding-1 mm-box--color-text-default"
     >
       [selectJWT]
     </p>

ui/components/institutional/jwt-dropdown/jwt-dropdown.js

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Dropdown from '../../ui/dropdown';
 import { Color } from '../../../helpers/constants/design-system';
-import { Box } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { Box, Text } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
 const JwtDropdown = (props) => {

ui/components/institutional/jwt-url-form/__snapshots__/jwt-url-form.test.js.snap

@@ -12,7 +12,7 @@ exports[`JwtUrlForm shows JWT text area when no jwt token exists 1`] = `
         class="mm-box mm-box--width-full"
       >
         <p
-          class="box mm-text jwt-url-form__instruction mm-text--body-md box--margin-bottom-4 box--display-block box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text jwt-url-form__instruction mm-text--body-md mm-box--margin-bottom-4 mm-box--display-block mm-box--color-text-default"
         >
           input text
         </p>
@@ -27,7 +27,7 @@ exports[`JwtUrlForm shows JWT text area when no jwt token exists 1`] = `
       class="mm-box mm-box--width-full"
     >
       <p
-        class="box mm-text jwt-url-form__instruction mm-text--body-md box--display-block box--flex-direction-row box--color-text-default"
+        class="mm-box mm-text jwt-url-form__instruction mm-text--body-md mm-box--display-block mm-box--color-text-default"
       />
       <div
         class="mm-box mm-box--margin-top-4"

ui/components/institutional/jwt-url-form/jwt-url-form.js

@@ -8,8 +8,7 @@ import {
   FlexDirection,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import { Box, Button } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { BUTTON_VARIANT, Box, Button, Text } from '../../component-library';
 import JwtDropdown from '../jwt-dropdown';
 
 const JwtUrlForm = (props) => {
@@ -54,14 +53,13 @@ const JwtUrlForm = (props) => {
             <Text>{t('or')}</Text>
             <Button
               data-testid="addNewToken-btn"
-              type="secondary"
-              medium="true"
+              variant={BUTTON_VARIANT.SECONDARY}
               onClick={() => {
                 props.onJwtChange('');
                 setAddNewTokenClicked(true);
               }}
             >
-              <Text>{t('addNewToken')}</Text>
+              {t('addNewToken')}
             </Button>
           </Box>
         )}

ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap

@@ -3,13 +3,13 @@
 exports[`NoteToTrader should render the Note to trader component 1`] = `
 <div>
   <div
-    class="box confirm-page-container-content__data box--flex-direction-row"
+    class="mm-box confirm-page-container-content__data"
   >
     <div
-      class="box box--padding-4 box--display-flex box--flex-direction-column"
+      class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column"
     >
       <div
-        class="box note-header box--display-flex box--flex-direction-row box--justify-content-space-between"
+        class="mm-box note-header mm-box--display-flex mm-box--justify-content-space-between"
       >
         <label
           class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
@@ -18,7 +18,7 @@ exports[`NoteToTrader should render the Note to trader component 1`] = `
           Transaction note
         </label>
         <p
-          class="box mm-text note-header__counter mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="mm-box mm-text note-header__counter mm-text--body-md mm-box--color-text-default"
         >
           9
           /
@@ -26,7 +26,7 @@ exports[`NoteToTrader should render the Note to trader component 1`] = `
         </p>
       </div>
       <div
-        class="box note-field box--display-flex box--flex-direction-column"
+        class="mm-box note-field mm-box--display-flex mm-box--flex-direction-column"
       >
         <textarea
           data-testid="transaction-note"

ui/components/institutional/note-to-trader/note-to-trader.js

@@ -5,9 +5,7 @@ import {
   FlexDirection,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
-import { Label } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
-import Box from '../../ui/box';
+import { Label, Box, Text } from '../../component-library';
 
 const NoteToTrader = (props) => {
   const { placeholder, maxLength, onChange, noteText, labelText } = props;

ui/components/institutional/wrong-network-notification/wrong-network-notification.js

@@ -1,20 +1,18 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import {
-  DISPLAY,
+  Display,
   AlignItems,
   JustifyContent,
   BackgroundColor,
-  BLOCK_SIZES,
+  BlockSize,
   IconColor,
 } from '../../../helpers/constants/design-system';
 import { getSelectedAccountCachedBalance } from '../../../selectors';
 import { getIsCustodianSupportedChain } from '../../../selectors/institutional/selectors';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getProviderConfig } from '../../../ducks/metamask/metamask';
-import { Icon, IconName, IconSize } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
-import Box from '../../ui/box';
+import { Icon, IconName, IconSize, Box, Text } from '../../component-library';
 
 const WrongNetworkNotification = () => {
   const t = useI18nContext();
@@ -29,12 +27,12 @@ const WrongNetworkNotification = () => {
     <Box
       className="wrong-network-notification"
       data-testid="wrong-network-notification"
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       justifyContent={JustifyContent.center}
       alignItems={AlignItems.center}
       padding={[1, 6]}
       backgroundColor={BackgroundColor.errorMuted}
-      width={BLOCK_SIZES.FULL}
+      width={BlockSize.Full}
     >
       <Icon
         name={IconName.Danger}