Using SelectionBox component from MXUI

package.json

@@ -46,7 +46,7 @@
     "@kyper/utilityrow": "^2.1.0",
     "@mui/icons-material": "^6.1.5",
     "@mui/material": "^6.1.5",
-    "@mxenabled/mxui": "^1.5.2",
+    "@mxenabled/mxui": "^1.5.4",
     "@reduxjs/toolkit": "^2.2.7",
     "@types/node": "^22.1.0",
     "axios": "^1.8.4",

src/ConnectedTokenProvider.tsx

@@ -55,6 +55,11 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
           // Sets the default color of text. Can override singluar usage with color prop.
           color: palette?.text?.primary,
         },
+        // TODO: Remove once we fully migrate to @mxenabled/mxui as it would apply the right theme styles automatically.
+        subtitle2: {
+          fontSize: '13px',
+          lineHeight: '20px',
+        },
       },
     },
     MuiAccordion: {
@@ -106,6 +111,12 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
     },
     MuiFormLabel: {
       styleOverrides: {
+        root: {
+          '&.MuiFormLabel-root': {
+            fontSize: '13px',
+            lineHeight: '20px',
+          },
+        },
         asterisk: {
           color: '#E32727',
           '&$error': {
@@ -121,6 +132,16 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({
         },
       },
     },
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: {
+          '&.MuiFormControlLabel-labelPlacementStart': {
+            marginLeft: 0,
+            marginRight: 0,
+          },
+        },
+      },
+    },
     MuiChip: {
       styleOverrides: {
         label: {

src/privacy/input.ts

@@ -3,7 +3,7 @@
 
 import { Radio, PASSWORD_VALIDATIONS } from '@kyper/input'
 import { Select } from '@kyper/select'
-import { SelectionBox } from '@kyper/selectionbox'
+import { SelectionBox } from '@mxenabled/mxui'
 import { UserFeedback } from '@kyper/userfeedback'
 import { withProtection } from 'src/privacy/withProtection'
 import { TextField } from '@kyper/mui'

src/privacy/withProtection.tsx

@@ -29,31 +29,26 @@ export function withProtection(SensitiveComponent: React.ElementType) {
 
   function ProtectedComponent({
     forwardedRef,
-    className,
     allowCapture = false,
     ...otherProps
   }: {
     forwardedRef: Element
-    className: string
     allowCapture: boolean
   }) {
     const PROTECTION_CLASS = 'ph-no-capture'
 
     const captureProps: keyable = {}
-    let newClassName = className ? `${className} ${PROTECTION_CLASS}` : PROTECTION_CLASS
     if (allowCapture) {
-      // Just apply whatever class was given, removing default protection.
-      newClassName = className
       captureProps[UNMASK_ATTRIBUTE] = allowCapture
+      // When allowCapture is true, render component directly without protection wrapper
+      return <SensitiveComponent ref={forwardedRef} {...captureProps} {...otherProps} />
     }
 
     return (
-      <SensitiveComponent
-        className={newClassName}
-        ref={forwardedRef}
-        {...captureProps}
-        {...otherProps}
-      />
+      // Wrap the sensitive component in a div with the protection class from Posthog to prevent capturing
+      <div className={PROTECTION_CLASS}>
+        <SensitiveComponent ref={forwardedRef} {...otherProps} />
+      </div>
     )
   }
 

src/views/manualAccount/ManualAccountForm.tsx

@@ -251,24 +251,26 @@ export const ManualAccountForm = React.forwardRef<HTMLInputElement, ManualAccoun
             if (field.type === 'SelectionBox') {
               return (
                 <div key={i} style={styles.selectBoxes}>
-                  <SelectionBox
-                    checked={isPersonal}
-                    id={'personal'}
-                    label={__('Personal')}
-                    name="accountType"
-                    onChange={() => setIsPersonal(true)}
-                    style={styles.selectBox}
-                    value={'personal'}
-                  />
-                  <SelectionBox
-                    checked={!isPersonal}
-                    id={'business'}
-                    label={__('Business')}
-                    name="accountType"
-                    onChange={() => setIsPersonal(false)}
-                    style={styles.selectBox}
-                    value={'business'}
-                  />
+                  <div style={styles.selectBox}>
+                    <SelectionBox
+                      id={'personal'}
+                      message={__('Personal')}
+                      name="accountType"
+                      onChange={() => setIsPersonal(true)}
+                      selected={isPersonal}
+                      value={'personal'}
+                    />
+                  </div>
+                  <div style={styles.selectBox}>
+                    <SelectionBox
+                      id={'business'}
+                      message={__('Business')}
+                      name="accountType"
+                      onChange={() => setIsPersonal(false)}
+                      selected={!isPersonal}
+                      value={'business'}
+                    />
+                  </div>
                 </div>
               )
             } else if (field.type === 'DateInput') {

src/views/mfa/MFAOptions.js

@@ -76,20 +76,10 @@ export const MFAOptions = (props) => {
             >
               <SelectionBox
                 autoFocus={i === 0}
-                checked={isSelected}
                 disabled={isSubmitting}
                 id={`${option.guid}`}
                 key={`${option.guid}`}
-                label={
-                  <Text
-                    bold={true}
-                    data-test={option.label.replace(/\s/g, '-')}
-                    truncate={false}
-                    variant="Paragraph"
-                  >
-                    {option.label}
-                  </Text>
-                }
+                message={option.label}
                 name="options-selection-box"
                 onChange={() => {
                   setSelectedOption({ guid: option.guid })
@@ -107,9 +97,9 @@ export const MFAOptions = (props) => {
                     member_guid: sha256(currentMember.guid),
                   })
                 }}
-                style={styles.card}
+                selected={isSelected}
                 value={option.label}
-                variant="radio"
+                variant="outlined"
               />
             </span>
           )
@@ -158,11 +148,6 @@ const getStyles = (tokens) => {
       textAlign: 'left',
       wordBreak: 'break-word',
     },
-    card: {
-      fontWeight: tokens.FontWeight.Bold,
-      padding: tokens.Spacing.SelectionBoxPadding,
-      marginBottom: tokens.Spacing.Small,
-    },
     selected: {
       color: tokens.Color.Brand400,
       backgroundColor: tokens.BackgroundColor.SelectionBoxLinkHover,

src/views/microdeposits/AccountInfo.js

@@ -6,7 +6,7 @@ import { useTokens } from '@kyper/tokenprovider'
 import { Text } from '@kyper/mui'
 import { ChevronRight } from '@kyper/icon/ChevronRight'
 import { TextField, SelectionBox } from 'src/privacy/input'
-import { Button } from '@mui/material'
+import { Button, RadioGroup, FormControl, FormLabel } from '@mui/material'
 
 import useAnalyticsPath from 'src/hooks/useAnalyticsPath'
 
@@ -88,39 +88,46 @@ export const AccountInfo = (props) => {
 
       <form onSubmit={(e) => e.preventDefault()}>
         <SlideDown delay={getNextDelay()}>
-          <fieldset data-test="account-type-label" style={styles.label}>
-            <legend>{__('Account type')}</legend>
-
-            <div data-test="selection-boxes" style={styles.selectBoxes}>
+          <FormControl component="fieldset" sx={{ width: '100%' }}>
+            <FormLabel component="legend">{__('Account type')}</FormLabel>
+            <RadioGroup
+              name="row-radio-buttons-group"
+              row={true}
+              sx={{
+                justifyContent: 'space-between',
+                padding: '0 0 32px 0',
+                marginTop: tokens.Spacing.XSmall,
+                '& > .ph-no-capture': {
+                  width: '48%',
+                },
+              }}
+            >
               <SelectionBox
                 autoFocus={
                   focus === AccountFields.ACCOUNT_TYPE &&
                   accountType === ReadableAccountTypes.CHECKING
                 }
-                checked={accountType === ReadableAccountTypes.CHECKING}
                 id={AccountTypeLabels[ReadableAccountTypes.CHECKING]}
-                label={AccountTypeLabels[ReadableAccountTypes.CHECKING]}
+                message={AccountTypeLabels[ReadableAccountTypes.CHECKING]}
                 name="accountType"
                 onChange={() => setAccountType(ReadableAccountTypes.CHECKING)}
-                style={styles.selectBox}
+                selected={accountType === ReadableAccountTypes.CHECKING}
                 value={AccountTypeLabels[ReadableAccountTypes.CHECKING]}
               />
-
               <SelectionBox
                 autoFocus={
                   focus === AccountFields.ACCOUNT_TYPE &&
                   accountType === ReadableAccountTypes.SAVINGS
                 }
-                checked={accountType === ReadableAccountTypes.SAVINGS}
                 id={AccountTypeLabels[ReadableAccountTypes.SAVINGS]}
-                label={AccountTypeLabels[ReadableAccountTypes.SAVINGS]}
+                message={AccountTypeLabels[ReadableAccountTypes.SAVINGS]}
                 name="accountType"
                 onChange={() => setAccountType(ReadableAccountTypes.SAVINGS)}
-                style={styles.selectBox}
+                selected={accountType === ReadableAccountTypes.SAVINGS}
                 value={AccountTypeLabels[ReadableAccountTypes.SAVINGS]}
               />
-            </div>
-          </fieldset>
+            </RadioGroup>
+          </FormControl>
         </SlideDown>
 
         <SlideDown delay={getNextDelay()}>