From 6fd42394b911a01ad55583d7372a88cbc1a2f965 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Tue, 12 Aug 2025 13:52:34 -0600 Subject: [PATCH 1/4] Revert "fix: revert use SelectionBox from MXUI" This reverts commit fe8454881b7b67654faf466ce7a1cce954e7cc81. --- package-lock.json | 331 +++++++++++++----- package.json | 5 +- src/privacy/input.ts | 2 +- src/privacy/withProtection.tsx | 17 +- src/views/manualAccount/ManualAccountForm.tsx | 38 +- src/views/mfa/MFAOptions.js | 21 +- src/views/microdeposits/AccountInfo.js | 53 +-- vite.config.ts | 5 + 8 files changed, 316 insertions(+), 156 deletions(-) diff --git a/package-lock.json b/package-lock.json index c2b6f89172..5622b2dc88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,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", @@ -2024,12 +2025,12 @@ } }, "node_modules/@mui/private-theming": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz", - "integrity": "sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==", + "version": "5.17.1", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.17.1.tgz", + "integrity": "sha512-XMxU0NTYcKqdsG8LRmSoxERPXwMbp16sIXPcLVgLGII/bVNagX0xaheWAwFv8+zDK7tI3ajllkuD3GZZE++ICQ==", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.16.6", + "@mui/utils": "^5.17.1", "prop-types": "^15.8.1" }, "engines": { @@ -2040,8 +2041,8 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -2050,12 +2051,13 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.6.tgz", - "integrity": "sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==", + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.18.0.tgz", + "integrity": "sha512-BN/vKV/O6uaQh2z5rXV+MBlVrEkwoS/TK75rFQ2mjxA7+NBo8qtTAOA4UaM0XeJfn7kh2wZ+xQw2HAx0u+TiBg==", "dependencies": { "@babel/runtime": "^7.23.9", - "@emotion/cache": "^11.11.0", + "@emotion/cache": "^11.13.5", + "@emotion/serialize": "^1.3.3", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, @@ -2069,7 +2071,7 @@ "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", - "react": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -2081,15 +2083,15 @@ } }, "node_modules/@mui/system": { - "version": "5.16.7", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz", - "integrity": "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==", + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.18.0.tgz", + "integrity": "sha512-ojZGVcRWqWhu557cdO3pWHloIGJdzVtxs3rk0F9L+x55LsUjcMUVkEhiF7E4TMxZoF9MmIHGGs0ZX3FDLAf0Xw==", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/private-theming": "^5.16.6", - "@mui/styled-engine": "^5.16.6", - "@mui/types": "^7.2.15", - "@mui/utils": "^5.16.6", + "@mui/private-theming": "^5.17.1", + "@mui/styled-engine": "^5.18.0", + "@mui/types": "~7.2.15", + "@mui/utils": "^5.17.1", "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -2104,8 +2106,8 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -2133,16 +2135,16 @@ } }, "node_modules/@mui/utils": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz", - "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==", + "version": "5.17.1", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.17.1.tgz", + "integrity": "sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg==", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/types": "^7.2.15", + "@mui/types": "~7.2.15", "@types/prop-types": "^15.7.12", "clsx": "^2.1.1", "prop-types": "^15.8.1", - "react-is": "^18.3.1" + "react-is": "^19.0.0" }, "engines": { "node": ">=12.0.0" @@ -2152,8 +2154,8 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -2161,17 +2163,23 @@ } } }, + "node_modules/@mui/utils/node_modules/react-is": { + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz", + "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==" + }, "node_modules/@mui/x-data-grid": { - "version": "7.22.0", - "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.22.0.tgz", - "integrity": "sha512-gXl7+hG0YRNU3YODlPvz6Q/9+EeUsPAWn/u2YMQmYTgwAxeY5QE3lY224VRnwM5v9SfTFheo1kzAKmXPdjb9tQ==", + "version": "7.29.9", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.29.9.tgz", + "integrity": "sha512-RfK7Fnuu4eyv/4eD3MEB1xxZsx0xRBsofb1kifghIjyQV1EKAeRcwvczyrzQggj7ZRT5AqkwCzhLsZDvE5O0nQ==", "dependencies": { "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0", - "@mui/x-internals": "7.21.0", + "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0", + "@mui/x-internals": "7.29.0", "clsx": "^2.1.1", "prop-types": "^15.8.1", - "reselect": "^5.1.1" + "reselect": "^5.1.1", + "use-sync-external-store": "^1.0.0" }, "engines": { "node": ">=14.0.0" @@ -2183,10 +2191,10 @@ "peerDependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", - "@mui/material": "^5.15.14 || ^6.0.0", - "@mui/system": "^5.15.14 || ^6.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0", + "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -2198,15 +2206,15 @@ } }, "node_modules/@mui/x-data-grid-pro": { - "version": "7.22.0", - "resolved": "https://registry.npmjs.org/@mui/x-data-grid-pro/-/x-data-grid-pro-7.22.0.tgz", - "integrity": "sha512-pOUxnJkQ1Zqs1eO7TTnUHuE8wVKMRchmahZvMaGBandy0+GFgU8YJy8S593yd43vVTA1vtDqfS+z2wG+8z968Q==", + "version": "7.29.9", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid-pro/-/x-data-grid-pro-7.29.9.tgz", + "integrity": "sha512-ulh/hvvSboZZfHS+ajM0rtRTsBAmQEh519GHjkFfyTdn94o6a+4pFhhuBFN0toyj6264HV0NLs5FJp/zx+bEwA==", "dependencies": { "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0", - "@mui/x-data-grid": "7.22.0", - "@mui/x-internals": "7.21.0", - "@mui/x-license": "7.21.0", + "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0", + "@mui/x-data-grid": "7.29.9", + "@mui/x-internals": "7.29.0", + "@mui/x-license": "7.29.1", "@types/format-util": "^1.0.4", "clsx": "^2.1.1", "prop-types": "^15.8.1", @@ -2218,10 +2226,10 @@ "peerDependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", - "@mui/material": "^5.15.14 || ^6.0.0", - "@mui/system": "^5.15.14 || ^6.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0", + "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -2233,13 +2241,13 @@ } }, "node_modules/@mui/x-date-pickers": { - "version": "7.22.0", - "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.22.0.tgz", - "integrity": "sha512-hopYo3ORP7ddYKnyBsqAtO2txEe2Zf6cehdikS5b1cqMTGOSL+18b11jfGVod9oipjb9L2JcT/WWkjoifs9Iww==", + "version": "7.29.4", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.29.4.tgz", + "integrity": "sha512-wJ3tsqk/y6dp+mXGtT9czciAMEO5Zr3IIAHg9x6IL0Eqanqy0N3chbmQQZv3iq0m2qUpQDLvZ4utZBUTJdjNzw==", "dependencies": { "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0", - "@mui/x-internals": "7.21.0", + "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0", + "@mui/x-internals": "7.29.0", "@types/react-transition-group": "^4.4.11", "clsx": "^2.1.1", "prop-types": "^15.8.1", @@ -2255,17 +2263,17 @@ "peerDependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", - "@mui/material": "^5.15.14 || ^6.0.0", - "@mui/system": "^5.15.14 || ^6.0.0", + "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0", + "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0", "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0", - "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0", + "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0", "dayjs": "^1.10.7", "luxon": "^3.0.2", "moment": "^2.29.4", - "moment-hijri": "^2.1.2", + "moment-hijri": "^2.1.2 || ^3.0.0", "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -2298,15 +2306,15 @@ } }, "node_modules/@mui/x-date-pickers-pro": { - "version": "7.22.0", - "resolved": "https://registry.npmjs.org/@mui/x-date-pickers-pro/-/x-date-pickers-pro-7.22.0.tgz", - "integrity": "sha512-GIUWc6jOSKnQ1xcR9IE0mOYlLVJWjJk73Ea/LJ+auT4kY0c79Jj0p+bYInC2mNN6RqbcGbhiCwQmbQCMZshIdQ==", + "version": "7.29.4", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers-pro/-/x-date-pickers-pro-7.29.4.tgz", + "integrity": "sha512-ifQliSaaLvSQLX8ys6loC0n9klza+BRbcQLC4f3/QLNC6w40sTEV3HEDJQUZChJCUk0bPqoxVuDKGTvgc02yhg==", "dependencies": { "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0", - "@mui/x-date-pickers": "7.22.0", - "@mui/x-internals": "7.21.0", - "@mui/x-license": "7.21.0", + "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0", + "@mui/x-date-pickers": "7.29.4", + "@mui/x-internals": "7.29.0", + "@mui/x-license": "7.29.1", "clsx": "^2.1.1", "prop-types": "^15.8.1", "react-transition-group": "^4.4.5" @@ -2317,17 +2325,17 @@ "peerDependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", - "@mui/material": "^5.15.14 || ^6.0.0", - "@mui/system": "^5.15.14 || ^6.0.0", + "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0", + "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0", "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0", - "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0", + "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0", "dayjs": "^1.10.7", "luxon": "^3.0.2", "moment": "^2.29.4", - "moment-hijri": "^2.1.2", + "moment-hijri": "^2.1.2 || ^3.0.0", "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -2360,12 +2368,12 @@ } }, "node_modules/@mui/x-internals": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.21.0.tgz", - "integrity": "sha512-94YNyZ0BhK5Z+Tkr90RKf47IVCW8R/1MvdUhh6MCQg6sZa74jsX+x+gEZ4kzuCqOsuyTyxikeQ8vVuCIQiP7UQ==", + "version": "7.29.0", + "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.29.0.tgz", + "integrity": "sha512-+Gk6VTZIFD70XreWvdXBwKd8GZ2FlSCuecQFzm6znwqXg1ZsndavrhG9tkxpxo2fM1Zf7Tk8+HcOO0hCbhTQFA==", "dependencies": { "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0" + "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0" }, "engines": { "node": ">=14.0.0" @@ -2375,22 +2383,23 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "react": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@mui/x-license": { - "version": "7.21.0", - "resolved": "https://registry.npmjs.org/@mui/x-license/-/x-license-7.21.0.tgz", - "integrity": "sha512-w48L2XQxlSdvld4E5s6pjZ5HPjtqERNun21FQtQJlodLB0JUt8pigseyC8N3X40j+Mw0Atg7UKNhf6OK/MbQ1A==", + "version": "7.29.1", + "resolved": "https://registry.npmjs.org/@mui/x-license/-/x-license-7.29.1.tgz", + "integrity": "sha512-+6D4/2IVal8Gfzu7iZS0ZJgL5cMes0gES+uK9D8I4rlMjPQ779N/rXYMe42mGQZbZuRpoqwSq6VLQx3Gr3SkLQ==", "dependencies": { "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0" + "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0", + "@mui/x-internals": "7.29.0" }, "engines": { "node": ">=14.0.0" }, "peerDependencies": { - "react": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@mui/x-license-pro": { @@ -2532,6 +2541,164 @@ "npm": ">=6.14.0" } }, + "node_modules/@mxenabled/mx-icons": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@mxenabled/mx-icons/-/mx-icons-1.5.1.tgz", + "integrity": "sha512-BGnzGGEkfRb8hpWNewiSHTTLLL+jA6/p93jTBFfMFRYqBiDsJwymRYgbSWUJQqJ6YcrdKRKlE0fvQ235NXw1yQ==", + "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/material": "^5.16.14", + "react": "^18.3.1", + "react-dom": "^18.3.1" + } + }, + "node_modules/@mxenabled/mx-icons/node_modules/@mui/core-downloads-tracker": { + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.18.0.tgz", + "integrity": "sha512-jbhwoQ1AY200PSSOrNXmrFCaSDSJWP7qk6urkTmIirvRXDROkqe+QwcLlUiw/PrREwsIF/vm3/dAXvjlMHF0RA==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + } + }, + "node_modules/@mxenabled/mx-icons/node_modules/@mui/material": { + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.18.0.tgz", + "integrity": "sha512-bbH/HaJZpFtXGvWg3TsBWG4eyt3gah3E7nCNU8GLyRjVoWcA91Vm/T+sjHfUcwgJSw9iLtucfHBoq+qW/T30aA==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/core-downloads-tracker": "^5.18.0", + "@mui/system": "^5.18.0", + "@mui/types": "~7.2.15", + "@mui/utils": "^5.17.1", + "@popperjs/core": "^2.11.8", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1", + "react-is": "^19.0.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mxenabled/mx-icons/node_modules/react-is": { + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz", + "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==" + }, + "node_modules/@mxenabled/mxui": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@mxenabled/mxui/-/mxui-1.5.2.tgz", + "integrity": "sha512-jfbbksuC+CHmTFMWjcNm/UbxXkYkyvYmuMYXswy0dKPz6/A68t5/pAEnIa8ywqH+xWKajnFwlNkUJV+CokGl6A==", + "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", + "@mui/material": "^5.16.14", + "@mui/system": "^5.16.14", + "@mui/x-data-grid-pro": "^7.27.3", + "@mui/x-date-pickers": "^7.27.3", + "@mui/x-date-pickers-pro": "^7.27.3", + "@mui/x-license-pro": "^6.10.2", + "@mxenabled/design-tokens": "^1.0.3", + "@mxenabled/mx-icons": "^1.5.1", + "date-fns": "^4.1.0", + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "peerDependencies": { + "@mui/material": "^5", + "@mui/x-data-grid-pro": "^7", + "@mui/x-date-pickers": "^7", + "@mui/x-date-pickers-pro": "^7", + "@mxenabled/mxui": "^1", + "date-fns": "^4", + "react": "^18", + "react-dom": "^18" + } + }, + "node_modules/@mxenabled/mxui/node_modules/@mui/core-downloads-tracker": { + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.18.0.tgz", + "integrity": "sha512-jbhwoQ1AY200PSSOrNXmrFCaSDSJWP7qk6urkTmIirvRXDROkqe+QwcLlUiw/PrREwsIF/vm3/dAXvjlMHF0RA==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + } + }, + "node_modules/@mxenabled/mxui/node_modules/@mui/material": { + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.18.0.tgz", + "integrity": "sha512-bbH/HaJZpFtXGvWg3TsBWG4eyt3gah3E7nCNU8GLyRjVoWcA91Vm/T+sjHfUcwgJSw9iLtucfHBoq+qW/T30aA==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/core-downloads-tracker": "^5.18.0", + "@mui/system": "^5.18.0", + "@mui/types": "~7.2.15", + "@mui/utils": "^5.17.1", + "@popperjs/core": "^2.11.8", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1", + "react-is": "^19.0.0", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mxenabled/mxui/node_modules/react-is": { + "version": "19.1.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz", + "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==" + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", diff --git a/package.json b/package.json index c922eeaab5..ca4888be56 100644 --- a/package.json +++ b/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" + ] } } diff --git a/src/privacy/input.ts b/src/privacy/input.ts index bc0f1764d1..19981b24bf 100644 --- a/src/privacy/input.ts +++ b/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' diff --git a/src/privacy/withProtection.tsx b/src/privacy/withProtection.tsx index 73f984ccff..3531ea78ef 100644 --- a/src/privacy/withProtection.tsx +++ b/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 } return ( - + // Wrap the sensitive component in a div with the protection class from Posthog to prevent capturing +
+ +
) } diff --git a/src/views/manualAccount/ManualAccountForm.tsx b/src/views/manualAccount/ManualAccountForm.tsx index c7fb975890..ca91b56168 100644 --- a/src/views/manualAccount/ManualAccountForm.tsx +++ b/src/views/manualAccount/ManualAccountForm.tsx @@ -251,24 +251,26 @@ export const ManualAccountForm = React.forwardRef - setIsPersonal(true)} - style={styles.selectBox} - value={'personal'} - /> - setIsPersonal(false)} - style={styles.selectBox} - value={'business'} - /> +
+ setIsPersonal(true)} + selected={isPersonal} + value={'personal'} + /> +
+
+ setIsPersonal(false)} + selected={!isPersonal} + value={'business'} + /> +
) } else if (field.type === 'DateInput') { diff --git a/src/views/mfa/MFAOptions.js b/src/views/mfa/MFAOptions.js index 3363ec7e48..afb03d7309 100644 --- a/src/views/mfa/MFAOptions.js +++ b/src/views/mfa/MFAOptions.js @@ -76,20 +76,10 @@ export const MFAOptions = (props) => { > - {option.label} - - } + 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" /> ) @@ -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, diff --git a/src/views/microdeposits/AccountInfo.js b/src/views/microdeposits/AccountInfo.js index d95152674f..eef3d5a7ec 100644 --- a/src/views/microdeposits/AccountInfo.js +++ b/src/views/microdeposits/AccountInfo.js @@ -91,31 +91,34 @@ export const AccountInfo = (props) => { {__('Account Type')}
- setAccountType(ReadableAccountTypes.CHECKING)} - style={styles.selectBox} - value={AccountTypeLabels[ReadableAccountTypes.CHECKING]} - /> - setAccountType(ReadableAccountTypes.SAVINGS)} - style={styles.selectBox} - value={AccountTypeLabels[ReadableAccountTypes.SAVINGS]} - /> +
+ setAccountType(ReadableAccountTypes.CHECKING)} + selected={accountType === ReadableAccountTypes.CHECKING} + value={AccountTypeLabels[ReadableAccountTypes.CHECKING]} + /> +
+
+ setAccountType(ReadableAccountTypes.SAVINGS)} + selected={accountType === ReadableAccountTypes.SAVINGS} + value={AccountTypeLabels[ReadableAccountTypes.SAVINGS]} + /> +
diff --git a/vite.config.ts b/vite.config.ts index b21217dad4..2da1051c81 100644 --- a/vite.config.ts +++ b/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'], + }, + }, }, }) From 02f8b05dd7761772c5f5da3ee1b4eecad443cae9 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Fri, 15 Aug 2025 14:49:55 -0600 Subject: [PATCH 2/4] fix: use SelectionBox from MXUI to fix a reported bug' --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5622b2dc88..394907f557 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,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.3", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "axios": "^1.8.4", @@ -2612,9 +2612,9 @@ "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==" }, "node_modules/@mxenabled/mxui": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/@mxenabled/mxui/-/mxui-1.5.2.tgz", - "integrity": "sha512-jfbbksuC+CHmTFMWjcNm/UbxXkYkyvYmuMYXswy0dKPz6/A68t5/pAEnIa8ywqH+xWKajnFwlNkUJV+CokGl6A==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@mxenabled/mxui/-/mxui-1.5.3.tgz", + "integrity": "sha512-vXPD6Ih3B5DGTnLg3ubXbSSS+85Rplz/0lTJhZxh3hNxDkMuAliVSfJTcwZFg/6HFtBb/SL/9iWs9GS/How4ew==", "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", diff --git a/package.json b/package.json index ca4888be56..b86fc62d48 100644 --- a/package.json +++ b/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.3", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "axios": "^1.8.4", From 2f2f783882796d27e3a57ee609bb11de079dd3f8 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Wed, 20 Aug 2025 17:56:55 -0600 Subject: [PATCH 3/4] using a new SelectionBox version and following MUI pattern --- package-lock.json | 8 +-- package.json | 2 +- src/ConnectedTokenProvider.tsx | 10 ++++ src/views/microdeposits/AccountInfo.js | 76 ++++++++++++++------------ 4 files changed, 56 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index cad20c1410..3f0427eed6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "@kyper/utilityrow": "^2.1.0", "@mui/icons-material": "^6.1.5", "@mui/material": "^6.1.5", - "@mxenabled/mxui": "^1.5.3", + "@mxenabled/mxui": "^1.5.4", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "axios": "^1.8.4", @@ -2612,9 +2612,9 @@ "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==" }, "node_modules/@mxenabled/mxui": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@mxenabled/mxui/-/mxui-1.5.3.tgz", - "integrity": "sha512-vXPD6Ih3B5DGTnLg3ubXbSSS+85Rplz/0lTJhZxh3hNxDkMuAliVSfJTcwZFg/6HFtBb/SL/9iWs9GS/How4ew==", + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@mxenabled/mxui/-/mxui-1.5.4.tgz", + "integrity": "sha512-sy7tauVGwZjCnmuEqd3y6MxBXRIvPMboJ+fVEF3gijKF5olVLU9Uqlgpkq0C732z8OU5Bzaorx8Wk3MLTII7LQ==", "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", diff --git a/package.json b/package.json index 728f7ef20d..d484fc6fb3 100644 --- a/package.json +++ b/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.3", + "@mxenabled/mxui": "^1.5.4", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "axios": "^1.8.4", diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx index 0b19315e1e..7518c5b9e5 100644 --- a/src/ConnectedTokenProvider.tsx +++ b/src/ConnectedTokenProvider.tsx @@ -121,6 +121,16 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({ }, }, }, + MuiFormControlLabel: { + styleOverrides: { + root: { + '&.MuiFormControlLabel-labelPlacementStart': { + marginLeft: 0, + marginRight: 0, + }, + }, + }, + }, }, }) diff --git a/src/views/microdeposits/AccountInfo.js b/src/views/microdeposits/AccountInfo.js index 1f9e41c3e8..5e0d3dd1be 100644 --- a/src/views/microdeposits/AccountInfo.js +++ b/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,40 +88,46 @@ export const AccountInfo = (props) => {
e.preventDefault()}> -
- {__('Account type')} - -
-
- setAccountType(ReadableAccountTypes.CHECKING)} - selected={accountType === ReadableAccountTypes.CHECKING} - value={AccountTypeLabels[ReadableAccountTypes.CHECKING]} - /> -
-
- setAccountType(ReadableAccountTypes.SAVINGS)} - selected={accountType === ReadableAccountTypes.SAVINGS} - value={AccountTypeLabels[ReadableAccountTypes.SAVINGS]} - /> -
-
-
+ + {__('Account type')} + .ph-no-capture': { + width: '48%', + }, + }} + > + setAccountType(ReadableAccountTypes.CHECKING)} + selected={accountType === ReadableAccountTypes.CHECKING} + value={AccountTypeLabels[ReadableAccountTypes.CHECKING]} + /> + setAccountType(ReadableAccountTypes.SAVINGS)} + selected={accountType === ReadableAccountTypes.SAVINGS} + value={AccountTypeLabels[ReadableAccountTypes.SAVINGS]} + /> + + From e93d7947238fdf27d48db05795bfc9d6b6085ece Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Thu, 21 Aug 2025 20:24:27 -0600 Subject: [PATCH 4/4] fixed the styles --- src/ConnectedTokenProvider.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx index 7518c5b9e5..7f93db5c9f 100644 --- a/src/ConnectedTokenProvider.tsx +++ b/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': {