Using SelectionBox component from MXUI

package.json

@@ -46,6 +46,7 @@
     "@kyper/utilityrow": "^2.1.0",
     "@mui/icons-material": "^6.1.5",
     "@mui/material": "^6.1.5",
+    "@mxenabled/mxui": "^1.5.2",
     "@reduxjs/toolkit": "^2.2.7",
     "@types/node": "^22.1.0",
     "axios": "^1.8.4",
@@ -118,6 +119,8 @@
     }
   },
   "release": {
-    "branches": ["master"]
+    "branches": [
+      "master"
+    ]
   }
 }

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

@@ -91,31 +91,34 @@ export const AccountInfo = (props) => {
             {__('Account Type')}
           </label>
           <div data-test="selection-boxes" style={styles.selectBoxes}>
-            <SelectionBox
-              autoFocus={
-                focus === AccountFields.ACCOUNT_TYPE &&
-                accountType === ReadableAccountTypes.CHECKING
-              }
-              checked={accountType === ReadableAccountTypes.CHECKING}
-              id={AccountTypeLabels[ReadableAccountTypes.CHECKING]}
-              label={AccountTypeLabels[ReadableAccountTypes.CHECKING]}
-              name="accountType"
-              onChange={() => setAccountType(ReadableAccountTypes.CHECKING)}
-              style={styles.selectBox}
-              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]}
-              name="accountType"
-              onChange={() => setAccountType(ReadableAccountTypes.SAVINGS)}
-              style={styles.selectBox}
-              value={AccountTypeLabels[ReadableAccountTypes.SAVINGS]}
-            />
+            <div style={styles.selectBox}>
+              <SelectionBox
+                autoFocus={
+                  focus === AccountFields.ACCOUNT_TYPE &&
+                  accountType === ReadableAccountTypes.CHECKING
+                }
+                id={AccountTypeLabels[ReadableAccountTypes.CHECKING]}
+                message={AccountTypeLabels[ReadableAccountTypes.CHECKING]}
+                name="accountType"
+                onChange={() => setAccountType(ReadableAccountTypes.CHECKING)}
+                selected={accountType === ReadableAccountTypes.CHECKING}
+                value={AccountTypeLabels[ReadableAccountTypes.CHECKING]}
+              />
+            </div>
+            <div style={styles.selectBox}>
+              <SelectionBox
+                autoFocus={
+                  focus === AccountFields.ACCOUNT_TYPE &&
+                  accountType === ReadableAccountTypes.SAVINGS
+                }
+                id={AccountTypeLabels[ReadableAccountTypes.SAVINGS]}
+                message={AccountTypeLabels[ReadableAccountTypes.SAVINGS]}
+                name="accountType"
+                onChange={() => setAccountType(ReadableAccountTypes.SAVINGS)}
+                selected={accountType === ReadableAccountTypes.SAVINGS}
+                value={AccountTypeLabels[ReadableAccountTypes.SAVINGS]}
+              />
+            </div>
           </div>
         </SlideDown>
 

vite.config.ts

@@ -74,5 +74,10 @@ export default defineConfig({
     environment: 'jsdom',
     setupFiles: './src/testSetup.ts',
     include: ['**/*-{test,spec}.?(c|m)[jt]s?(x)'],
+    server: {
+      deps: {
+        inline: ['@mxenabled/mx-icons'],
+      },
+    },
   },
 })