Part of #17670 for ui\components\app\transaction-detail-item\transaction-detail-item.component.js (#19980)

* Part of #17670 for ui\components\app\transaction-detail-item\transaction-detail-item.component.js

* Update transaction-detail-item.component.js

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap

@@ -10,7 +10,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
       class="transaction-detail-item__row"
     >
       <h6
-        class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
       >
         <div
           class="box box--display-flex box--flex-direction-row"
@@ -58,7 +58,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
         class="transaction-detail-item__detail-values"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
         >
           <div
             class="gas-details-item__currency-container"
@@ -79,7 +79,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
           </div>
         </h6>
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
         >
           <div
             class="gas-details-item__currency-container"
@@ -117,7 +117,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
         </h6>
       </div>
       <h6
-        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+        class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
       >
         <div
           class="box gas-details-item__gasfee-label box--display-inline-flex box--flex-direction-row"

ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap

@@ -9,7 +9,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
       class="transaction-detail-item__row"
     >
       <h6
-        class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
       >
         Estimated gas fee
         <div
@@ -42,7 +42,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         class="transaction-detail-item__detail-values"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
         >
           <div>
             <div
@@ -61,7 +61,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
           </div>
         </h6>
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
         >
           <div>
             <div
@@ -91,7 +91,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
     >
       <div />
       <h6
-        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+        class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
       >
         <strong>
           Max fee:

ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap

@@ -12,7 +12,7 @@ exports[`Multi layer fee message when balance and token price checker is disable
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
         >
           Layer 1 fees
         </h6>
@@ -20,7 +20,7 @@ exports[`Multi layer fee message when balance and token price checker is disable
           class="transaction-detail-item__detail-values"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
           >
             Unknown
           </h6>
@@ -30,10 +30,10 @@ exports[`Multi layer fee message when balance and token price checker is disable
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
         />
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+          class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
         />
       </div>
     </div>
@@ -44,7 +44,7 @@ exports[`Multi layer fee message when balance and token price checker is disable
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
         >
           Total
         </h6>
@@ -52,7 +52,7 @@ exports[`Multi layer fee message when balance and token price checker is disable
           class="transaction-detail-item__detail-values"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
           >
             0.001000021000 ETH
           </h6>
@@ -62,12 +62,12 @@ exports[`Multi layer fee message when balance and token price checker is disable
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
         >
           Amount + fees
         </h6>
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+          class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
         />
       </div>
     </div>
@@ -87,7 +87,7 @@ exports[`Multi layer fee message when balance and token price checker is enabled
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
         >
           Layer 1 fees
         </h6>
@@ -95,12 +95,12 @@ exports[`Multi layer fee message when balance and token price checker is enabled
           class="transaction-detail-item__detail-values"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
           >
             Unknown
           </h6>
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
           >
             Unknown
           </h6>
@@ -110,10 +110,10 @@ exports[`Multi layer fee message when balance and token price checker is enabled
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
         />
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+          class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
         />
       </div>
     </div>
@@ -124,7 +124,7 @@ exports[`Multi layer fee message when balance and token price checker is enabled
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
         >
           Total
         </h6>
@@ -132,7 +132,7 @@ exports[`Multi layer fee message when balance and token price checker is enabled
           class="transaction-detail-item__detail-values"
         >
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
           >
             <div
               class="currency-display-component"
@@ -149,7 +149,7 @@ exports[`Multi layer fee message when balance and token price checker is enabled
             </div>
           </h6>
           <h6
-            class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
           >
             0.001000021000 ETH
           </h6>
@@ -159,12 +159,12 @@ exports[`Multi layer fee message when balance and token price checker is enabled
         class="transaction-detail-item__row"
       >
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+          class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
         >
           Amount + fees
         </h6>
         <h6
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+          class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
         />
       </div>
     </div>

ui/components/app/transaction-detail-item/transaction-detail-item.component.js

@@ -2,16 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import Typography from '../../ui/typography/typography';
 import {
   Color,
   FontWeight,
-  TypographyVariant,
-  DISPLAY,
-  FLEX_WRAP,
   AlignItems,
   TextAlign,
+  TextVariant,
+  Display,
+  FlexWrap,
 } from '../../../helpers/constants/design-system';
+import { Text } from '../../component-library';
 
 export default function TransactionDetailItem({
   'data-testid': dataTestId,
@@ -27,18 +27,16 @@ export default function TransactionDetailItem({
   return (
     <div className="transaction-detail-item" data-testid={dataTestId}>
       <div className="transaction-detail-item__row">
-        <Typography
+        <Text
+          as="h6"
           color={detailTitleColor}
           fontWeight={boldHeadings ? FontWeight.Bold : FontWeight.Normal}
-          variant={TypographyVariant.H6}
-          boxProps={{
-            display: DISPLAY.FLEX,
-            flexWrap: FLEX_WRAP.NO_WRAP,
-            alignItems: AlignItems.center,
-          }}
+          display={Display.Flex}
+          flexWrap={FlexWrap.NoWrap}
+          alignItems={AlignItems.center}
         >
           {detailTitle}
-        </Typography>
+        </Text>
         <div
           className={classnames('transaction-detail-item__detail-values', {
             'transaction-detail-item__detail-values--flex-width':
@@ -46,46 +44,43 @@ export default function TransactionDetailItem({
           })}
         >
           {detailText && (
-            <Typography
-              variant={TypographyVariant.H6}
-              color={Color.textAlternative}
-            >
+            <Text as="h6" color={Color.textAlternative}>
               {detailText}
-            </Typography>
+            </Text>
           )}
-          <Typography
+          <Text
+            as="h6"
             color={Color.textDefault}
             fontWeight={boldHeadings ? FontWeight.Bold : FontWeight.Normal}
-            variant={TypographyVariant.H6}
-            marginTop={1}
-            marginBottom={1}
             marginLeft={1}
-            boxProps={{ textAlign: TextAlign.Right }}
+            textAlign={TextAlign.Right}
           >
             {detailTotal}
-          </Typography>
+          </Text>
         </div>
       </div>
       <div className="transaction-detail-item__row">
         {React.isValidElement(subTitle) ? (
           <div>{subTitle}</div>
         ) : (
-          <Typography
-            variant={TypographyVariant.H7}
+          <Text
+            as="h6"
+            variant={TextVariant.bodySm}
             color={Color.textAlternative}
           >
             {subTitle}
-          </Typography>
+          </Text>
         )}
 
-        <Typography
-          variant={TypographyVariant.H7}
+        <Text
+          as="h6"
+          variant={TextVariant.bodySm}
           color={Color.textAlternative}
-          align="end"
+          textAlign={TextAlign.End}
           className="transaction-detail-item__row-subText"
         >
           {subText}
-        </Typography>
+        </Text>
       </div>
     </div>
   );

ui/components/app/transaction-detail-item/transaction-detail-item.stories.js

@@ -9,7 +9,6 @@ import TransactionDetailItem from '.';
 
 export default {
   title: 'Components/App/TransactionDetailItem',
-
   component: TransactionDetailItem,
   parameters: {
     docs: {

ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap

@@ -394,7 +394,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                 class="transaction-detail-item__row"
               >
                 <h6
-                  class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
                 >
                   <div
                     class="box box--display-flex box--flex-direction-row"
@@ -442,7 +442,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                   class="transaction-detail-item__detail-values"
                 >
                   <h6
-                    class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+                    class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
                   >
                     <div
                       class="gas-details-item__currency-container"
@@ -463,7 +463,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                     </div>
                   </h6>
                   <h6
-                    class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+                    class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
                   >
                     <div
                       class="gas-details-item__currency-container"
@@ -501,7 +501,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                   </h6>
                 </div>
                 <h6
-                  class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+                  class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
                 >
                   <div
                     class="box gas-details-item__gasfee-label box--display-inline-flex box--flex-direction-row"
@@ -546,7 +546,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                 class="transaction-detail-item__row"
               >
                 <h6
-                  class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
                 >
                   Total
                 </h6>
@@ -554,7 +554,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                   class="transaction-detail-item__detail-values"
                 >
                   <h6
-                    class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+                    class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
                   >
                     <div
                       class="confirm-page-container-content__total-value"
@@ -575,7 +575,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                     </div>
                   </h6>
                   <h6
-                    class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+                    class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
                   >
                     <div
                       class="confirm-page-container-content__total-value"
@@ -606,12 +606,12 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                 class="transaction-detail-item__row"
               >
                 <h6
-                  class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+                  class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
                 >
                   Amount + gas fee
                 </h6>
                 <h6
-                  class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+                  class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
                 >
                   <div
                     class="confirm-page-container-content__total-amount"

ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap

@@ -341,7 +341,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                     class="transaction-detail-item__row"
                   >
                     <h6
-                      class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
                     >
                       Estimated gas fee
                       <div
@@ -374,7 +374,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                       class="transaction-detail-item__detail-values"
                     >
                       <h6
-                        class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+                        class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
                       >
                         <div>
                           <div
@@ -399,7 +399,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                   >
                     <div />
                     <h6
-                      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+                      class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
                     >
                       <strong>
                         Max fee:
@@ -429,7 +429,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                     class="transaction-detail-item__row"
                   >
                     <h6
-                      class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+                      class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
                     >
                       Total
                     </h6>
@@ -437,7 +437,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                       class="transaction-detail-item__detail-values"
                     >
                       <h6
-                        class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+                        class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
                       >
                         <div
                           class="confirm-page-container-content__total-value"
@@ -463,12 +463,12 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                     class="transaction-detail-item__row"
                   >
                     <h6
-                      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+                      class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
                     >
                       Amount + gas fee
                     </h6>
                     <h6
-                      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+                      class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
                     >
                       <div
                         class="confirm-page-container-content__total-amount"

ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap

@@ -187,7 +187,7 @@ exports[`SendContent Component render should match snapshot 1`] = `
                 class="transaction-detail-item__row"
               >
                 <h6
-                  class="box box--margin-top-1 box--margin-bottom-1 box--display-flex box--flex-direction-row box--flex-wrap-nowrap box--align-items-center typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-box--display-flex mm-box--flex-wrap-nowrap mm-box--align-items-center mm-box--color-text-default"
                 >
                   <div
                     class="box box--display-flex box--flex-direction-row"
@@ -235,7 +235,7 @@ exports[`SendContent Component render should match snapshot 1`] = `
                   class="transaction-detail-item__detail-values"
                 >
                   <h6
-                    class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-1 box--flex-direction-row box--text-align-right typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+                    class="mm-box mm-text mm-text--body-md mm-text--font-weight-bold mm-text--text-align-right mm-box--margin-left-1 mm-box--color-text-default"
                   >
                     <div
                       class="gas-details-item__currency-container"
@@ -273,7 +273,7 @@ exports[`SendContent Component render should match snapshot 1`] = `
                   </h6>
                 </div>
                 <h6
-                  class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography transaction-detail-item__row-subText typography--h7 typography--weight-normal typography--style-normal typography--align-end typography--color-text-alternative"
+                  class="mm-box mm-text transaction-detail-item__row-subText mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
                 >
                   <div
                     class="box gas-details-item__gasfee-label box--display-inline-flex box--flex-direction-row"