From 07423843a198b440ae5d8b231ba6ed1863e1a48f Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Mon, 4 Aug 2025 12:05:08 -0600 Subject: [PATCH 1/8] replaced kyper/mui with mxui --- package-lock.json | 430 ++++++++++-------- package.json | 6 +- src/ConnectedTokenProvider.tsx | 2 +- src/components/ActionTile.js | 4 +- src/components/ActionableUtilityRow.tsx | 2 +- src/components/ConfigError.tsx | 2 +- src/components/ConnectLogoHeader.tsx | 2 +- src/components/ConnectSuccessSurvey.tsx | 2 +- src/components/DataCluster.js | 2 +- src/components/DataClusterDropDown.tsx | 4 +- src/components/DayOfMonthPicker.tsx | 2 +- src/components/DeleteMemberSurvey.js | 2 +- src/components/DetailReviewItem.js | 2 +- src/components/FindAccountInfo.js | 2 +- src/components/GenericError.js | 2 +- src/components/InstitutionBlock.js | 2 +- src/components/InstitutionGridTile.js | 2 +- src/components/InstitutionTile.js | 2 +- src/components/InstructionList.js | 2 +- src/components/InstructionalText.js | 2 +- src/components/LeavingNoticeFlat.js | 2 +- src/components/MemberError.js | 2 +- src/components/ThankYouMessage.tsx | 2 +- src/components/ViewTitle.js | 2 +- src/components/app/IEDeprecationDialog.js | 2 +- src/components/app/TooSmallDialog.tsx | 2 +- src/components/support/GeneralSupport.js | 2 +- src/components/support/RequestInstitution.js | 2 +- src/components/support/SupportMenu.js | 2 +- src/components/support/SupportSuccess.js | 2 +- src/privacy/input.ts | 2 +- src/views/actionableError/ActionableError.tsx | 2 +- .../AdditionalProductStep.tsx | 2 +- src/views/connected/Connected.tsx | 4 +- src/views/connecting/Connecting.js | 2 +- .../connecting/progress/ProgressMessage.js | 2 +- src/views/consent/ConsentModal.tsx | 2 +- src/views/consent/DynamicDisclosure.tsx | 6 +- src/views/credentials/Credentials.js | 2 +- .../usePasswordInputValidation.tsx | 2 +- src/views/disclosure/DataAvailable.js | 2 +- src/views/disclosure/DataRequested.js | 2 +- src/views/disclosure/Disclosure.js | 2 +- src/views/disclosure/Interstitial.js | 2 +- src/views/disclosure/PoweredByMXText.js | 2 +- src/views/disclosure/PrivacyPolicy.js | 2 +- src/views/loginError/ImpededMemberError.js | 2 +- src/views/loginError/LoginError.js | 2 +- src/views/loginError/MessageBoxStatus.js | 2 +- .../loginError/NoEligibleAccountsError.js | 2 +- src/views/manualAccount/ManualAccountForm.tsx | 2 +- src/views/manualAccount/ManualAccountMenu.js | 2 +- .../manualAccount/ManualAccountSuccess.js | 2 +- src/views/mfa/MFAImages.js | 2 +- src/views/mfa/MFAOptions.js | 2 +- src/views/microdeposits/AccountInfo.js | 2 +- src/views/microdeposits/ComeBack.js | 2 +- src/views/microdeposits/ConfirmDetails.js | 2 +- src/views/microdeposits/HowItWorks.js | 2 +- src/views/microdeposits/MicrodepositErrors.js | 2 +- src/views/microdeposits/PersonalInfoForm.js | 2 +- src/views/microdeposits/RoutingNumber.js | 2 +- .../microdeposits/SharedRoutingNumber.js | 2 +- src/views/microdeposits/Verified.js | 2 +- src/views/microdeposits/VerifyDeposits.js | 2 +- src/views/microdeposits/Verifying.js | 2 +- src/views/oauth/OAuthError.js | 2 +- src/views/oauth/WaitingForOAuth.js | 2 +- src/views/search/Search.js | 2 +- src/views/search/views/SearchNoResult.js | 2 +- .../search/views/SearchedInstitutionsList.js | 2 +- src/views/verification/VerifyError.js | 2 +- .../verification/VerifyExistingMember.tsx | 2 +- 73 files changed, 329 insertions(+), 259 deletions(-) diff --git a/package-lock.json b/package-lock.json index c2b6f89172..40671383aa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,6 @@ "@kyper/input": "^6.1.0", "@kyper/institutionlogo": "^3.1.0", "@kyper/messagebox": "^3.1.0", - "@kyper/mui": "^4.5.0", "@kyper/progressindicators": "^3.1.0", "@kyper/select": "^2.0.0", "@kyper/selectionbox": "^2.1.0", @@ -27,6 +26,7 @@ "@kyper/utilityrow": "^2.1.0", "@mui/icons-material": "^6.1.5", "@mui/material": "^6.1.5", + "@mxenabled/mxui": "^1.4.0", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "axios": "^1.8.4", @@ -1450,104 +1450,6 @@ "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/@kyper/mui": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/@kyper/mui/-/mui-4.5.0.tgz", - "integrity": "sha512-YIlgHF1DWqyKPOXc0LagDIPotqgyd39eLaayUxWfu16hypz7rmlT3vf7dWxA/flRQEtLAldnvK0Q2A+mXUz2cQ==", - "dependencies": { - "@emotion/react": "^11.13.3", - "@emotion/styled": "^11.13.0", - "@mui/icons-material": "^5.16.7", - "@mui/material": "^5.16.7", - "@mui/system": "^5.16.7", - "@mui/x-data-grid-pro": "^7.21.0", - "@mui/x-date-pickers": "^7.21.0", - "@mui/x-date-pickers-pro": "^7.21.0", - "@mui/x-license-pro": "^6.10.2", - "@mxenabled/design-tokens": "^1.0.3", - "date-fns": "^4.1.0", - "react": "^18.3.1", - "react-dom": "^18.3.1" - } - }, - "node_modules/@kyper/mui/node_modules/@mui/core-downloads-tracker": { - "version": "5.16.7", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz", - "integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - } - }, - "node_modules/@kyper/mui/node_modules/@mui/icons-material": { - "version": "5.16.7", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.7.tgz", - "integrity": "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==", - "dependencies": { - "@babel/runtime": "^7.23.9" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@mui/material": "^5.0.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@kyper/mui/node_modules/@mui/material": { - "version": "5.16.7", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz", - "integrity": "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/core-downloads-tracker": "^5.16.7", - "@mui/system": "^5.16.7", - "@mui/types": "^7.2.15", - "@mui/utils": "^5.16.6", - "@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": "^18.3.1", - "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", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@emotion/react": { - "optional": true - }, - "@emotion/styled": { - "optional": true - }, - "@types/react": { - "optional": true - } - } - }, "node_modules/@kyper/progressindicators": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@kyper/progressindicators/-/progressindicators-3.1.0.tgz", @@ -2024,12 +1926,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 +1942,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 +1952,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 +1972,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 +1984,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 +2007,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 +2036,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 +2055,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 +2064,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.8", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.29.8.tgz", + "integrity": "sha512-m4Dp1Vig8gFiBlcEOWimUku182cEw5YrAyXS3PfTSdbxa/20bFw7a8mlHdxO9ChHQRMf6TqbisdRm23CDIIdog==", "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 +2092,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 +2107,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.8", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid-pro/-/x-data-grid-pro-7.29.8.tgz", + "integrity": "sha512-0hwICtGqjrKt/aU80pd6QjZBWd04uxEBDjxiFTMmsbjmSqlpSZLSRe2gVQyDvZkonR7Qvfr7uhjso5T1009ehw==", "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.8", + "@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 +2127,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 +2142,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 +2164,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 +2207,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 +2226,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 +2269,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 +2284,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 +2442,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.4.0", + "resolved": "https://registry.npmjs.org/@mxenabled/mxui/-/mxui-1.4.0.tgz", + "integrity": "sha512-0NkRC6nB30ejYmljEX0nhfj9cXjI+j5i831isMQi8H4GsMRNwuHrxYLfyTsBbRWurXDy2Mu045AqakNDF46zbA==", + "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..f8da688963 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "@kyper/input": "^6.1.0", "@kyper/institutionlogo": "^3.1.0", "@kyper/messagebox": "^3.1.0", - "@kyper/mui": "^4.5.0", "@kyper/progressindicators": "^3.1.0", "@kyper/select": "^2.0.0", "@kyper/selectionbox": "^2.1.0", @@ -46,6 +45,7 @@ "@kyper/utilityrow": "^2.1.0", "@mui/icons-material": "^6.1.5", "@mui/material": "^6.1.5", + "@mxenabled/mxui": "^1.4.0", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "axios": "^1.8.4", @@ -118,6 +118,8 @@ } }, "release": { - "branches": ["master"] + "branches": [ + "master" + ] } } diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx index 0b19315e1e..c91ca7a3de 100644 --- a/src/ConnectedTokenProvider.tsx +++ b/src/ConnectedTokenProvider.tsx @@ -6,7 +6,7 @@ import { useSelector } from 'react-redux' import { Theme, ThemeProvider } from '@mui/material' import { deepmerge } from '@mui/utils' -import { createMXTheme, Icon, IconWeight } from '@kyper/mui' +import { createMXTheme, Icon, IconWeight } from '@mxenabled/mxui' import { TokenProvider, THEMES } from '@kyper/tokenprovider' import { getTokenProviderValues } from 'src/redux/selectors/ClientColorScheme' diff --git a/src/components/ActionTile.js b/src/components/ActionTile.js index ebd140ea04..3253c79e6b 100644 --- a/src/components/ActionTile.js +++ b/src/components/ActionTile.js @@ -2,8 +2,8 @@ import React from 'react' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' -import { ChevronRightIcon } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' +import { ChevronRightIcon } from '@mxenabled/mxui' import { Button } from '@mui/material' export const ActionTile = (props) => { diff --git a/src/components/ActionableUtilityRow.tsx b/src/components/ActionableUtilityRow.tsx index 4ee1284f05..a84e2b321f 100644 --- a/src/components/ActionableUtilityRow.tsx +++ b/src/components/ActionableUtilityRow.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import React from 'react' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' import { Button } from '@mui/material' diff --git a/src/components/ConfigError.tsx b/src/components/ConfigError.tsx index 52c4a73378..ad1b52c958 100644 --- a/src/components/ConfigError.tsx +++ b/src/components/ConfigError.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' import { Container } from 'src/components/Container' import { AttentionFilled } from '@kyper/icon/AttentionFilled' diff --git a/src/components/ConnectLogoHeader.tsx b/src/components/ConnectLogoHeader.tsx index 6bfe31b173..d9de6d6d71 100644 --- a/src/components/ConnectLogoHeader.tsx +++ b/src/components/ConnectLogoHeader.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import React from 'react' import { useSelector } from 'react-redux' -import { InstitutionLogo } from '@kyper/mui' +import { InstitutionLogo } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' import { selectColorScheme } from 'src/redux/reducers/configSlice' diff --git a/src/components/ConnectSuccessSurvey.tsx b/src/components/ConnectSuccessSurvey.tsx index e82fd48c94..54e1b92b2f 100644 --- a/src/components/ConnectSuccessSurvey.tsx +++ b/src/components/ConnectSuccessSurvey.tsx @@ -1,5 +1,5 @@ import React, { useState, useImperativeHandle, useContext } from 'react' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Button, TextField } from '@mui/material' import ToggleButton from '@mui/material/ToggleButton' import ToggleButtonGroup from '@mui/material/ToggleButtonGroup' diff --git a/src/components/DataCluster.js b/src/components/DataCluster.js index db27430feb..788dadfe4f 100644 --- a/src/components/DataCluster.js +++ b/src/components/DataCluster.js @@ -1,7 +1,7 @@ import React, { Fragment } from 'react' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' export const DataCluster = (props) => { const tokens = useTokens() diff --git a/src/components/DataClusterDropDown.tsx b/src/components/DataClusterDropDown.tsx index a5f461bab5..c283a5ed17 100644 --- a/src/components/DataClusterDropDown.tsx +++ b/src/components/DataClusterDropDown.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { useTokens } from '@kyper/mui' +import { useTokens } from '@mxenabled/mxui' import { Accordion, AccordionSummary, @@ -10,7 +10,7 @@ import { Icon, Stack, } from '@mui/material' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { __ } from 'src/utilities/Intl' diff --git a/src/components/DayOfMonthPicker.tsx b/src/components/DayOfMonthPicker.tsx index 4ab50c3424..dc09c84cc6 100644 --- a/src/components/DayOfMonthPicker.tsx +++ b/src/components/DayOfMonthPicker.tsx @@ -4,7 +4,7 @@ import _range from 'lodash/range' import { useTokens } from '@kyper/tokenprovider' import { Button } from '@kyper/button' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { fadeOut } from 'src/utilities/Animation' import { __ } from 'src/utilities/Intl' diff --git a/src/components/DeleteMemberSurvey.js b/src/components/DeleteMemberSurvey.js index df2296f836..9882267feb 100644 --- a/src/components/DeleteMemberSurvey.js +++ b/src/components/DeleteMemberSurvey.js @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef } from 'react' import PropTypes from 'prop-types' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' import { MessageBox } from '@kyper/messagebox' import { AttentionFilled } from '@kyper/icon/AttentionFilled' diff --git a/src/components/DetailReviewItem.js b/src/components/DetailReviewItem.js index 22890404d6..662b2d6dc3 100644 --- a/src/components/DetailReviewItem.js +++ b/src/components/DetailReviewItem.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Text as ProtectedText } from 'src/privacy/components' import { Edit } from '@kyper/icon/Edit' import { IconButton } from '@mui/material' diff --git a/src/components/FindAccountInfo.js b/src/components/FindAccountInfo.js index 4350bce5b4..61ce62daff 100644 --- a/src/components/FindAccountInfo.js +++ b/src/components/FindAccountInfo.js @@ -2,7 +2,7 @@ import React, { useRef } from 'react' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Button } from '@mui/material' import { fadeOut } from 'src/utilities/Animation' diff --git a/src/components/GenericError.js b/src/components/GenericError.js index 8e2372aeaa..8be005b22a 100644 --- a/src/components/GenericError.js +++ b/src/components/GenericError.js @@ -2,7 +2,7 @@ import React, { useEffect } from 'react' import PropTypes from 'prop-types' import { AttentionFilled } from '@kyper/icon/AttentionFilled' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { isRunningE2ETests } from 'src/utilities/e2e' import { PageviewInfo } from 'src/const/Analytics' diff --git a/src/components/InstitutionBlock.js b/src/components/InstitutionBlock.js index e5583b2b39..b5fc939984 100644 --- a/src/components/InstitutionBlock.js +++ b/src/components/InstitutionBlock.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { __ } from 'src/utilities/Intl' import { useTokens } from '@kyper/tokenprovider' -import { InstitutionLogo } from '@kyper/mui' +import { InstitutionLogo } from '@mxenabled/mxui' import { formatUrl } from 'src/utilities/FormatUrl' diff --git a/src/components/InstitutionGridTile.js b/src/components/InstitutionGridTile.js index fddb34c46b..919f91541c 100644 --- a/src/components/InstitutionGridTile.js +++ b/src/components/InstitutionGridTile.js @@ -6,7 +6,7 @@ import { css } from '@mxenabled/cssinjs' import { __ } from 'src/utilities/Intl' import { useTokens } from '@kyper/tokenprovider' -import { InstitutionLogo } from '@kyper/mui' +import { InstitutionLogo } from '@mxenabled/mxui' import { Button } from '@mui/material' import { getTrueWidth } from 'src/redux/selectors/Browser' diff --git a/src/components/InstitutionTile.js b/src/components/InstitutionTile.js index b2281b4707..2d2ca89d34 100644 --- a/src/components/InstitutionTile.js +++ b/src/components/InstitutionTile.js @@ -7,7 +7,7 @@ import { useTokens } from '@kyper/tokenprovider' import { ChevronRight } from '@kyper/icon/ChevronRight' import { Button } from '@mui/material' -import { InstitutionLogo } from '@kyper/mui' +import { InstitutionLogo } from '@mxenabled/mxui' import { formatUrl } from 'src/utilities/FormatUrl' diff --git a/src/components/InstructionList.js b/src/components/InstructionList.js index 196d0fa70c..bcc25dcc69 100644 --- a/src/components/InstructionList.js +++ b/src/components/InstructionList.js @@ -4,7 +4,7 @@ import { css } from '@mxenabled/cssinjs' import DOMPurify from 'dompurify' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { goToUrlLink } from 'src/utilities/global' diff --git a/src/components/InstructionalText.js b/src/components/InstructionalText.js index 53d85a193e..b22881af61 100644 --- a/src/components/InstructionalText.js +++ b/src/components/InstructionalText.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import DOMPurify from 'dompurify' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { goToUrlLink } from 'src/utilities/global' diff --git a/src/components/LeavingNoticeFlat.js b/src/components/LeavingNoticeFlat.js index f325ea0138..409091ca20 100644 --- a/src/components/LeavingNoticeFlat.js +++ b/src/components/LeavingNoticeFlat.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types' import { __ } from 'src/utilities/Intl' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { AttentionFilled } from '@kyper/icon/AttentionFilled' import { Button } from '@mui/material' import { useTokens } from '@kyper/tokenprovider' diff --git a/src/components/MemberError.js b/src/components/MemberError.js index fd0234e06b..ccf74fd9c9 100644 --- a/src/components/MemberError.js +++ b/src/components/MemberError.js @@ -2,7 +2,7 @@ import React, { Fragment, useEffect, useContext } from 'react' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' import { MessageBox } from '@kyper/messagebox' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { __ } from 'src/utilities/Intl' import { AriaLive } from 'src/components/AriaLive' diff --git a/src/components/ThankYouMessage.tsx b/src/components/ThankYouMessage.tsx index aa06af8aa9..611c5ee7a6 100644 --- a/src/components/ThankYouMessage.tsx +++ b/src/components/ThankYouMessage.tsx @@ -3,7 +3,7 @@ import { createPortal } from 'react-dom' import { __ } from 'src/utilities/Intl' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Button } from '@mui/material' import { CheckmarkFilled } from '@kyper/icon/CheckmarkFilled' import { useTokens } from '@kyper/tokenprovider' diff --git a/src/components/ViewTitle.js b/src/components/ViewTitle.js index 725cf46c73..25644b2035 100644 --- a/src/components/ViewTitle.js +++ b/src/components/ViewTitle.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' import { InfoFilled } from '@kyper/icon/InfoFilled' import { AttentionFilled } from '@kyper/icon/AttentionFilled' diff --git a/src/components/app/IEDeprecationDialog.js b/src/components/app/IEDeprecationDialog.js index 58a69e4dce..fe8a1d0eca 100644 --- a/src/components/app/IEDeprecationDialog.js +++ b/src/components/app/IEDeprecationDialog.js @@ -4,7 +4,7 @@ import { useSelector } from 'react-redux' import { AttentionFilled } from '@kyper/icon/AttentionFilled' import { Close } from '@kyper/icon/Close' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' import { Button, Link } from '@mui/material' diff --git a/src/components/app/TooSmallDialog.tsx b/src/components/app/TooSmallDialog.tsx index ea153d0b16..3fa38eb8ad 100644 --- a/src/components/app/TooSmallDialog.tsx +++ b/src/components/app/TooSmallDialog.tsx @@ -6,7 +6,7 @@ import { getUnixTime } from 'date-fns' import { defer } from 'rxjs' import { AttentionFilled } from '@kyper/icon/AttentionFilled' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' import { Button } from '@mui/material' diff --git a/src/components/support/GeneralSupport.js b/src/components/support/GeneralSupport.js index 6beba8ce5f..a5344bf945 100644 --- a/src/components/support/GeneralSupport.js +++ b/src/components/support/GeneralSupport.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import _isEmpty from 'lodash/isEmpty' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { TextField } from 'src/privacy/input' import { Button } from '@mui/material' diff --git a/src/components/support/RequestInstitution.js b/src/components/support/RequestInstitution.js index cf6c6efaa0..dbf5eab530 100644 --- a/src/components/support/RequestInstitution.js +++ b/src/components/support/RequestInstitution.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import _isEmpty from 'lodash/isEmpty' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { TextField } from 'src/privacy/input' import { Button } from '@mui/material' diff --git a/src/components/support/SupportMenu.js b/src/components/support/SupportMenu.js index e9d670b250..9ab7ca0aae 100644 --- a/src/components/support/SupportMenu.js +++ b/src/components/support/SupportMenu.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' import { UtilityRow } from '@kyper/utilityrow' import { ChevronRight } from '@kyper/icon/ChevronRight' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { __ } from 'src/utilities/Intl' diff --git a/src/components/support/SupportSuccess.js b/src/components/support/SupportSuccess.js index db2c4c0ac3..4c3d197619 100644 --- a/src/components/support/SupportSuccess.js +++ b/src/components/support/SupportSuccess.js @@ -2,7 +2,7 @@ import React, { useEffect } from 'react' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Button } from '@mui/material' import { fadeOut } from 'src/utilities/Animation' diff --git a/src/privacy/input.ts b/src/privacy/input.ts index bc0f1764d1..a3808fa468 100644 --- a/src/privacy/input.ts +++ b/src/privacy/input.ts @@ -6,7 +6,7 @@ import { Select } from '@kyper/select' import { SelectionBox } from '@kyper/selectionbox' import { UserFeedback } from '@kyper/userfeedback' import { withProtection } from 'src/privacy/withProtection' -import { TextField } from '@kyper/mui' +import { TextField } from '@mxenabled/mxui' /* Add security to Kyper Inputs by wrapping them in a Higher Order Component that diff --git a/src/views/actionableError/ActionableError.tsx b/src/views/actionableError/ActionableError.tsx index 2cfc752380..844ae5b693 100644 --- a/src/views/actionableError/ActionableError.tsx +++ b/src/views/actionableError/ActionableError.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect, useMemo } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { InstitutionLogo, Text } from '@kyper/mui' +import { InstitutionLogo, Text } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' import { Button, Badge } from '@mui/material' diff --git a/src/views/additionalProduct/AdditionalProductStep.tsx b/src/views/additionalProduct/AdditionalProductStep.tsx index de2dbfb10d..4e6e1854dd 100644 --- a/src/views/additionalProduct/AdditionalProductStep.tsx +++ b/src/views/additionalProduct/AdditionalProductStep.tsx @@ -1,5 +1,5 @@ import React, { useImperativeHandle } from 'react' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Button } from '@mui/material' import { InstitutionBlock } from 'src/components/InstitutionBlock' import { useSelector } from 'react-redux' diff --git a/src/views/connected/Connected.tsx b/src/views/connected/Connected.tsx index c132d1b459..8596f8f6b0 100644 --- a/src/views/connected/Connected.tsx +++ b/src/views/connected/Connected.tsx @@ -7,9 +7,9 @@ import { __ } from 'src/utilities/Intl' import { fadeOut } from 'src/utilities/Animation' import { Button } from '@mui/material' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' -import { Icon, IconWeight } from '@kyper/mui' +import { Icon, IconWeight } from '@mxenabled/mxui' import { SlideDown } from 'src/components/SlideDown' import { getDelay } from 'src/utilities/getDelay' diff --git a/src/views/connecting/Connecting.js b/src/views/connecting/Connecting.js index 8bfc192a2c..9ceb7bacd3 100644 --- a/src/views/connecting/Connecting.js +++ b/src/views/connecting/Connecting.js @@ -14,7 +14,7 @@ import { } from 'rxjs/operators' import { useSelector, useDispatch } from 'react-redux' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' import { SlideDown } from 'src/components/SlideDown' diff --git a/src/views/connecting/progress/ProgressMessage.js b/src/views/connecting/progress/ProgressMessage.js index d518ab594f..fc5aaa957d 100644 --- a/src/views/connecting/progress/ProgressMessage.js +++ b/src/views/connecting/progress/ProgressMessage.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { from, of } from 'rxjs' import { delay, concatMap, repeat } from 'rxjs/operators' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { JOB_TYPES } from 'src/const/consts' diff --git a/src/views/consent/ConsentModal.tsx b/src/views/consent/ConsentModal.tsx index 1958844d71..3c2c1603af 100644 --- a/src/views/consent/ConsentModal.tsx +++ b/src/views/consent/ConsentModal.tsx @@ -1,6 +1,6 @@ import React, { Dispatch, SetStateAction } from 'react' -import { Text, DialogFooter } from '@kyper/mui' +import { Text, DialogFooter } from '@mxenabled/mxui' import { Box, Dialog, DialogContent, DialogTitle } from '@mui/material' import { __ } from 'src/utilities/Intl' import { goToUrlLink } from 'src/utilities/global' diff --git a/src/views/consent/DynamicDisclosure.tsx b/src/views/consent/DynamicDisclosure.tsx index bb18a2578a..2f81b99d33 100644 --- a/src/views/consent/DynamicDisclosure.tsx +++ b/src/views/consent/DynamicDisclosure.tsx @@ -6,9 +6,9 @@ import type { RootState } from 'reduxify/Store' import { __, getLocale, setLocale } from 'src/utilities/Intl' import { Box, Button, IconButton, Link, Stack } from '@mui/material' -import { Icon, IconWeight } from '@kyper/mui' -import { Text } from '@kyper/mui' -import { useTokens } from '@kyper/mui' +import { Icon, IconWeight } from '@mxenabled/mxui' +import { Text } from '@mxenabled/mxui' +import { useTokens } from '@mxenabled/mxui' import { SlideDown } from 'src/components/SlideDown' import { getDelay } from 'src/utilities/getDelay' diff --git a/src/views/credentials/Credentials.js b/src/views/credentials/Credentials.js index 7394eaf4ce..b8a762b535 100644 --- a/src/views/credentials/Credentials.js +++ b/src/views/credentials/Credentials.js @@ -10,7 +10,7 @@ import PropTypes from 'prop-types' import _isEmpty from 'lodash/isEmpty' import { useSelector } from 'react-redux' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { MessageBox } from '@kyper/messagebox' import { useTokens } from '@kyper/tokenprovider' import { TextField } from 'src/privacy/input' diff --git a/src/views/credentials/usePasswordInputValidation.tsx b/src/views/credentials/usePasswordInputValidation.tsx index b964be6068..5751e7aab0 100644 --- a/src/views/credentials/usePasswordInputValidation.tsx +++ b/src/views/credentials/usePasswordInputValidation.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react' import { IconButton, InputAdornment } from '@mui/material' -import { Icon } from '@kyper/mui' +import { Icon } from '@mxenabled/mxui' import { __ } from 'src/utilities/Intl' import { PasswordValidations } from 'src/privacy/input' import { preventDefaultAndStopAllPropagation } from 'src/utilities/KeyPress' diff --git a/src/views/disclosure/DataAvailable.js b/src/views/disclosure/DataAvailable.js index 2073421faa..af9df0f25f 100644 --- a/src/views/disclosure/DataAvailable.js +++ b/src/views/disclosure/DataAvailable.js @@ -2,7 +2,7 @@ import React, { Fragment } from 'react' import { useSelector } from 'react-redux' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { PageviewInfo } from 'src/const/Analytics' diff --git a/src/views/disclosure/DataRequested.js b/src/views/disclosure/DataRequested.js index 864de726e0..4b9efc464d 100644 --- a/src/views/disclosure/DataRequested.js +++ b/src/views/disclosure/DataRequested.js @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { ChevronRight } from '@kyper/icon/ChevronRight' import { Link } from '@mui/material' diff --git a/src/views/disclosure/Disclosure.js b/src/views/disclosure/Disclosure.js index b6b9e75cf8..39ef584d61 100644 --- a/src/views/disclosure/Disclosure.js +++ b/src/views/disclosure/Disclosure.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { css } from '@mxenabled/cssinjs' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Lock } from '@kyper/icon/Lock' import { Link } from '@mui/material' import { Button } from '@mui/material' diff --git a/src/views/disclosure/Interstitial.js b/src/views/disclosure/Interstitial.js index ac8fc26d27..066b948630 100644 --- a/src/views/disclosure/Interstitial.js +++ b/src/views/disclosure/Interstitial.js @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Link as LinkIcon } from '@kyper/icon/Link' import { Lock } from '@kyper/icon/Lock' import { InfoOutline } from '@kyper/icon/InfoOutline' diff --git a/src/views/disclosure/PoweredByMXText.js b/src/views/disclosure/PoweredByMXText.js index 5b4f4bf3d6..834d3eb360 100644 --- a/src/views/disclosure/PoweredByMXText.js +++ b/src/views/disclosure/PoweredByMXText.js @@ -1,7 +1,7 @@ import React from 'react' import { MXLogo } from '@kyper/icon/MXLogo' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' import { __ } from 'src/utilities/Intl' diff --git a/src/views/disclosure/PrivacyPolicy.js b/src/views/disclosure/PrivacyPolicy.js index fba6e2fa1e..5ae2be0299 100644 --- a/src/views/disclosure/PrivacyPolicy.js +++ b/src/views/disclosure/PrivacyPolicy.js @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux' import { css } from '@mxenabled/cssinjs' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Link } from '@mui/material' import { SlideDown } from 'src/components/SlideDown' diff --git a/src/views/loginError/ImpededMemberError.js b/src/views/loginError/ImpededMemberError.js index d01c599d46..bd273b56d4 100644 --- a/src/views/loginError/ImpededMemberError.js +++ b/src/views/loginError/ImpededMemberError.js @@ -7,7 +7,7 @@ import { getInstitutionLoginUrl } from 'src/utilities/Institution' import { goToUrlLink } from 'src/utilities/global' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { ChevronRight } from '@kyper/icon/ChevronRight' import { Link } from '@mui/material' diff --git a/src/views/loginError/LoginError.js b/src/views/loginError/LoginError.js index 3a4cc72108..2fbbbaca2b 100644 --- a/src/views/loginError/LoginError.js +++ b/src/views/loginError/LoginError.js @@ -9,7 +9,7 @@ import React, { import { useSelector, useDispatch } from 'react-redux' import PropTypes from 'prop-types' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { __ } from 'src/utilities/Intl' diff --git a/src/views/loginError/MessageBoxStatus.js b/src/views/loginError/MessageBoxStatus.js index 66e1dedef2..a1098842d8 100644 --- a/src/views/loginError/MessageBoxStatus.js +++ b/src/views/loginError/MessageBoxStatus.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { MessageBox } from '@kyper/messagebox' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { __ } from 'src/utilities/Intl' export const MessageBoxStatus = ({ variant, message }) => { diff --git a/src/views/loginError/NoEligibleAccountsError.js b/src/views/loginError/NoEligibleAccountsError.js index 41ba4e7617..244f0ee57b 100644 --- a/src/views/loginError/NoEligibleAccountsError.js +++ b/src/views/loginError/NoEligibleAccountsError.js @@ -2,7 +2,7 @@ import React, { useContext } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { AttentionFilled } from '@kyper/icon/AttentionFilled' import { Button } from '@mui/material' diff --git a/src/views/manualAccount/ManualAccountForm.tsx b/src/views/manualAccount/ManualAccountForm.tsx index c7fb975890..926ed8e3fe 100644 --- a/src/views/manualAccount/ManualAccountForm.tsx +++ b/src/views/manualAccount/ManualAccountForm.tsx @@ -9,7 +9,7 @@ import _startsWith from 'lodash/startsWith' import _isEmpty from 'lodash/isEmpty' import Button from '@mui/material/Button' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { MessageBox } from '@kyper/messagebox' import { useTokens } from '@kyper/tokenprovider' import { Select, SelectionBox, TextField } from 'src/privacy/input' diff --git a/src/views/manualAccount/ManualAccountMenu.js b/src/views/manualAccount/ManualAccountMenu.js index 5d7dde3919..5d1e1f2458 100644 --- a/src/views/manualAccount/ManualAccountMenu.js +++ b/src/views/manualAccount/ManualAccountMenu.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { __ } from 'src/utilities/Intl' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { UtilityRow } from '@kyper/utilityrow' import { ChevronRight } from '@kyper/icon/ChevronRight' import { Check } from '@kyper/icon/Check' diff --git a/src/views/manualAccount/ManualAccountSuccess.js b/src/views/manualAccount/ManualAccountSuccess.js index eb9aefabdb..55441d7ab5 100644 --- a/src/views/manualAccount/ManualAccountSuccess.js +++ b/src/views/manualAccount/ManualAccountSuccess.js @@ -4,7 +4,7 @@ import { __ } from 'src/utilities/Intl' import { useTokens } from '@kyper/tokenprovider' import { Button } from '@kyper/button' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { fadeOut } from 'src/utilities/Animation' diff --git a/src/views/mfa/MFAImages.js b/src/views/mfa/MFAImages.js index 6ec50890ff..3166e6a425 100644 --- a/src/views/mfa/MFAImages.js +++ b/src/views/mfa/MFAImages.js @@ -14,7 +14,7 @@ import { PageviewInfo, AnalyticEvents } from 'src/const/Analytics' import { CheckmarkFilled } from '@kyper/icon/CheckmarkFilled' import { AttentionFilled } from '@kyper/icon/AttentionFilled' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Button } from '@mui/material' export const MFAImages = (props) => { diff --git a/src/views/mfa/MFAOptions.js b/src/views/mfa/MFAOptions.js index 3363ec7e48..1c3968e80f 100644 --- a/src/views/mfa/MFAOptions.js +++ b/src/views/mfa/MFAOptions.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types' import { sha256 } from 'js-sha256' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { AttentionFilled } from '@kyper/icon/AttentionFilled' import { SelectionBox } from 'src/privacy/input' import { Button, FormLabel } from '@mui/material' diff --git a/src/views/microdeposits/AccountInfo.js b/src/views/microdeposits/AccountInfo.js index d95152674f..9289e53438 100644 --- a/src/views/microdeposits/AccountInfo.js +++ b/src/views/microdeposits/AccountInfo.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import _isEmpty from 'lodash/isEmpty' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { ChevronRight } from '@kyper/icon/ChevronRight' import { TextField, SelectionBox } from 'src/privacy/input' import { Button } from '@mui/material' diff --git a/src/views/microdeposits/ComeBack.js b/src/views/microdeposits/ComeBack.js index 22f095e429..3c046d2b83 100644 --- a/src/views/microdeposits/ComeBack.js +++ b/src/views/microdeposits/ComeBack.js @@ -2,7 +2,7 @@ import React, { useContext, useRef } from 'react' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Text as ProtectedText } from 'src/privacy/components' import { Button } from '@mui/material' diff --git a/src/views/microdeposits/ConfirmDetails.js b/src/views/microdeposits/ConfirmDetails.js index aced73f685..be98c997b5 100644 --- a/src/views/microdeposits/ConfirmDetails.js +++ b/src/views/microdeposits/ConfirmDetails.js @@ -4,7 +4,7 @@ import { defer } from 'rxjs' import { useSelector } from 'react-redux' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Button } from '@mui/material' import { __ } from 'src/utilities/Intl' diff --git a/src/views/microdeposits/HowItWorks.js b/src/views/microdeposits/HowItWorks.js index 6f77ad4be4..c6f2a1bdf6 100644 --- a/src/views/microdeposits/HowItWorks.js +++ b/src/views/microdeposits/HowItWorks.js @@ -2,7 +2,7 @@ import React, { useRef } from 'react' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Button } from '@mui/material' import { __ } from 'src/utilities/Intl' diff --git a/src/views/microdeposits/MicrodepositErrors.js b/src/views/microdeposits/MicrodepositErrors.js index b215048486..21fb0858cd 100644 --- a/src/views/microdeposits/MicrodepositErrors.js +++ b/src/views/microdeposits/MicrodepositErrors.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { css } from '@mxenabled/cssinjs' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Text as ProtectedText } from 'src/privacy/components' import { MessageBox } from '@kyper/messagebox' import { Button } from '@mui/material' diff --git a/src/views/microdeposits/PersonalInfoForm.js b/src/views/microdeposits/PersonalInfoForm.js index bf2dff6b1c..5c7c7e3e7b 100644 --- a/src/views/microdeposits/PersonalInfoForm.js +++ b/src/views/microdeposits/PersonalInfoForm.js @@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { TextField } from 'src/privacy/input' import { Button } from '@mui/material' diff --git a/src/views/microdeposits/RoutingNumber.js b/src/views/microdeposits/RoutingNumber.js index d008852e7c..84568236ac 100644 --- a/src/views/microdeposits/RoutingNumber.js +++ b/src/views/microdeposits/RoutingNumber.js @@ -5,7 +5,7 @@ import { defer } from 'rxjs' import _isEmpty from 'lodash/isEmpty' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { ChevronRight } from '@kyper/icon/ChevronRight' import { TextField } from 'src/privacy/input' import { Button } from '@mui/material' diff --git a/src/views/microdeposits/SharedRoutingNumber.js b/src/views/microdeposits/SharedRoutingNumber.js index ab3b37ec73..991f36bd87 100644 --- a/src/views/microdeposits/SharedRoutingNumber.js +++ b/src/views/microdeposits/SharedRoutingNumber.js @@ -2,7 +2,7 @@ import React, { useRef } from 'react' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Accounts } from '@kyper/icon/Accounts' import { Tag } from '@kyper/tag' diff --git a/src/views/microdeposits/Verified.js b/src/views/microdeposits/Verified.js index 4114a3d847..2522e0a85d 100644 --- a/src/views/microdeposits/Verified.js +++ b/src/views/microdeposits/Verified.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { useSelector } from 'react-redux' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Button } from '@mui/material' import { __ } from 'src/utilities/Intl' diff --git a/src/views/microdeposits/VerifyDeposits.js b/src/views/microdeposits/VerifyDeposits.js index 3e2accbdfa..5fbed63b0c 100644 --- a/src/views/microdeposits/VerifyDeposits.js +++ b/src/views/microdeposits/VerifyDeposits.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { defer } from 'rxjs' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Text as ProtectedText } from 'src/privacy/components' import { MessageBox } from '@kyper/messagebox' import { TextField } from 'src/privacy/input' diff --git a/src/views/microdeposits/Verifying.js b/src/views/microdeposits/Verifying.js index f9c7f87571..f768d0350e 100644 --- a/src/views/microdeposits/Verifying.js +++ b/src/views/microdeposits/Verifying.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { defer, interval } from 'rxjs' import { filter, mergeMap, pluck, scan, switchMap, take } from 'rxjs/operators' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { __ } from 'src/utilities/Intl' diff --git a/src/views/oauth/OAuthError.js b/src/views/oauth/OAuthError.js index 2c2b36d7a6..93a553e57e 100644 --- a/src/views/oauth/OAuthError.js +++ b/src/views/oauth/OAuthError.js @@ -1,7 +1,7 @@ import React, { useEffect, useImperativeHandle, useContext } from 'react' import { useSelector } from 'react-redux' import PropTypes from 'prop-types' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { MessageBox } from '@kyper/messagebox' import { useTokens } from '@kyper/tokenprovider' import { Button } from '@mui/material' diff --git a/src/views/oauth/WaitingForOAuth.js b/src/views/oauth/WaitingForOAuth.js index a3f105d7b6..895e9dbc86 100644 --- a/src/views/oauth/WaitingForOAuth.js +++ b/src/views/oauth/WaitingForOAuth.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { of, defer } from 'rxjs' import { map, mergeMap, delay, pluck } from 'rxjs/operators' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' import { Button } from '@mui/material' diff --git a/src/views/search/Search.js b/src/views/search/Search.js index ac40fac540..38cb4c5bdc 100644 --- a/src/views/search/Search.js +++ b/src/views/search/Search.js @@ -13,7 +13,7 @@ import { map, catchError } from 'rxjs/operators' import _unionBy from 'lodash/unionBy' import _debounce from 'lodash/debounce' import _find from 'lodash/find' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' import { CloseOutline } from '@kyper/icon/CloseOutline' import { Search as SearchIcon } from '@kyper/icon/Search' diff --git a/src/views/search/views/SearchNoResult.js b/src/views/search/views/SearchNoResult.js index 1905c5dc0e..a38ad4c1c5 100644 --- a/src/views/search/views/SearchNoResult.js +++ b/src/views/search/views/SearchNoResult.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { Button } from '@mui/material' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { useTokens } from '@kyper/tokenprovider' import { __ } from 'src/utilities/Intl' diff --git a/src/views/search/views/SearchedInstitutionsList.js b/src/views/search/views/SearchedInstitutionsList.js index d72684af04..4c28dd39d7 100644 --- a/src/views/search/views/SearchedInstitutionsList.js +++ b/src/views/search/views/SearchedInstitutionsList.js @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Button } from '@mui/material' import useAnalyticsPath from 'src/hooks/useAnalyticsPath' diff --git a/src/views/verification/VerifyError.js b/src/views/verification/VerifyError.js index cdc3f8238f..c51ebfe417 100644 --- a/src/views/verification/VerifyError.js +++ b/src/views/verification/VerifyError.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' import { MessageBox } from '@kyper/messagebox' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { Button } from '@mui/material' import { SlideDown } from 'src/components/SlideDown' diff --git a/src/views/verification/VerifyExistingMember.tsx b/src/views/verification/VerifyExistingMember.tsx index a863282eea..022c052f50 100644 --- a/src/views/verification/VerifyExistingMember.tsx +++ b/src/views/verification/VerifyExistingMember.tsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types' import { useDispatch, useSelector } from 'react-redux' import { useTokens } from '@kyper/tokenprovider' -import { Text } from '@kyper/mui' +import { Text } from '@mxenabled/mxui' import { UtilityRow } from '@kyper/utilityrow' import { InstitutionLogo } from '@kyper/institutionlogo' import { Button } from '@mui/material' From fe6b94b10959513ea92e2c7ed11584f6d5ef1271 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Mon, 4 Aug 2025 13:48:13 -0600 Subject: [PATCH 2/8] feat: switch from Kyper MUI to MXUI --- vite.config.ts | 5 +++++ 1 file changed, 5 insertions(+) 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 94541d3c8a3f300b91374e98e12bfe437fc6da28 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Mon, 4 Aug 2025 17:18:14 -0600 Subject: [PATCH 3/8] bump mxui version --- 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 40671383aa..e8755fa268 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,7 @@ "@kyper/utilityrow": "^2.1.0", "@mui/icons-material": "^6.1.5", "@mui/material": "^6.1.5", - "@mxenabled/mxui": "^1.4.0", + "@mxenabled/mxui": "^1.5.1", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "axios": "^1.8.4", @@ -2513,9 +2513,9 @@ "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==" }, "node_modules/@mxenabled/mxui": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@mxenabled/mxui/-/mxui-1.4.0.tgz", - "integrity": "sha512-0NkRC6nB30ejYmljEX0nhfj9cXjI+j5i831isMQi8H4GsMRNwuHrxYLfyTsBbRWurXDy2Mu045AqakNDF46zbA==", + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@mxenabled/mxui/-/mxui-1.5.1.tgz", + "integrity": "sha512-dcpKAtiOSM9b977RlzzcbobpsAJDGjoBzOOrDsTDaQwvVpGsBpgladSSwQkD/3zKI6rSUAMk29BXClyokCIsDQ==", "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", diff --git a/package.json b/package.json index f8da688963..f008e7d9c7 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "@kyper/utilityrow": "^2.1.0", "@mui/icons-material": "^6.1.5", "@mui/material": "^6.1.5", - "@mxenabled/mxui": "^1.4.0", + "@mxenabled/mxui": "^1.5.1", "@reduxjs/toolkit": "^2.2.7", "@types/node": "^22.1.0", "axios": "^1.8.4", From 2b190422ae235fa35bebb167c613ab150c985956 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Fri, 5 Sep 2025 17:17:12 -0600 Subject: [PATCH 4/8] fixed client overrides --- src/ConnectedTokenProvider.tsx | 66 ++++++++----------- src/views/consent/DynamicDisclosure.tsx | 3 +- .../InstitutionDisabled.tsx | 2 +- 3 files changed, 29 insertions(+), 42 deletions(-) diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx index 9448c524fd..6ab9abc40c 100644 --- a/src/ConnectedTokenProvider.tsx +++ b/src/ConnectedTokenProvider.tsx @@ -1,9 +1,8 @@ import React from 'react' import { RootState } from 'src/redux/Store' -import _isEmpty from 'lodash/isEmpty' import { useSelector } from 'react-redux' -import { Theme, ThemeProvider } from '@mui/material' +import { Theme, ThemeProvider, CssBaseline } from '@mui/material' import { deepmerge } from '@mui/utils' import { createMXTheme, Icon, IconWeight } from '@mxenabled/mxui' @@ -23,30 +22,6 @@ declare module '@mui/material/styles' { } } -interface ColorScheme { - Brand100?: string - Brand200?: string - Brand300?: string - Brand400?: string - Brand500?: string -} - -export const clientThemeOverrides = (colorScheme: ColorScheme) => { - if (!_isEmpty(colorScheme)) { - return { - palette: { - primary: { - lighter: colorScheme.Brand100, - light: colorScheme.Brand200, - main: colorScheme.Brand300, - dark: colorScheme.Brand400, - darker: colorScheme.Brand500, - }, - }, - } - } - return {} -} const connectThemeOverrides = (palette: Theme['palette']) => ({ components: { MuiTypography: { @@ -111,12 +86,6 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({ }, MuiFormLabel: { styleOverrides: { - root: { - '&.MuiFormLabel-root': { - fontSize: '13px', - lineHeight: '20px', - }, - }, asterisk: { color: '#E32727', '&$error': { @@ -164,22 +133,41 @@ export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode => // Dark mode: true or false const isDarkModeEnabled: boolean = colorScheme === THEMES.DARK // Theme object with MX overrides - const mxTheme = createMXTheme(isDarkModeEnabled ? 'dark' : 'light') + const mxTheme = createMXTheme(isDarkModeEnabled ? 'dark' : 'light', { + paletteOptions: { + primary: clientCustomTokens.tokenOverrides.Color.Brand300, + }, + }) const combinedTheme = deepmerge( mxTheme, - deepmerge( - clientThemeOverrides(clientCustomTokens.tokenOverrides.Color), // Theme object with client custom overrides - connectThemeOverrides(mxTheme.palette as Theme['palette']), // Theme object with connect overrides - ), + connectThemeOverrides(mxTheme.palette as Theme['palette']), // Theme object with connect overrides ) + const kyperTokenOverrides = { + Color: { + Brand100: isDarkModeEnabled ? mxTheme.palette.primary[800] : mxTheme.palette.primary[100], + Brand200: mxTheme.palette.primary.light, + Brand300: mxTheme.palette.primary.main, + Brand400: mxTheme.palette.primary.dark, + Brand500: isDarkModeEnabled ? mxTheme.palette.primary[50] : mxTheme.palette.primary[900], + Primary100: isDarkModeEnabled ? mxTheme.palette.primary[800] : mxTheme.palette.primary[100], + Primary200: mxTheme.palette.primary.light, + Primary300: mxTheme.palette.primary.main, + Primary400: mxTheme.palette.primary.dark, + Primary500: isDarkModeEnabled ? mxTheme.palette.primary[50] : mxTheme.palette.primary[900], + }, + } + return ( - {children} + + + {children} + ) } diff --git a/src/views/consent/DynamicDisclosure.tsx b/src/views/consent/DynamicDisclosure.tsx index bce63aa3b2..1ff3110383 100644 --- a/src/views/consent/DynamicDisclosure.tsx +++ b/src/views/consent/DynamicDisclosure.tsx @@ -210,10 +210,9 @@ export const DynamicDisclosure = React.forwardRef( 'This app and MX Technologies will only collect, use, and retain your data to help manage your finances and will protect your data as required by', )} {__('applicable open banking regulations.')} diff --git a/src/views/institutionDisabled/InstitutionDisabled.tsx b/src/views/institutionDisabled/InstitutionDisabled.tsx index 0dfd4f089b..9b0cc742d8 100644 --- a/src/views/institutionDisabled/InstitutionDisabled.tsx +++ b/src/views/institutionDisabled/InstitutionDisabled.tsx @@ -2,7 +2,7 @@ import React, { useContext, useImperativeHandle } from 'react' import { useDispatch, useSelector } from 'react-redux' import { Button } from '@mui/material' import { P, H2 } from '@mxenabled/mxui' -import { Icon, InstitutionLogo } from '@kyper/mui' +import { Icon, InstitutionLogo } from '@mxenabled/mxui' import { __ } from 'src/utilities/Intl' import useAnalyticsPath from 'src/hooks/useAnalyticsPath' From f2d8e468221dc091da851de493a47143efe9fe44 Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Sun, 7 Sep 2025 22:23:20 -0600 Subject: [PATCH 5/8] fixed the test --- package-lock.json | 46 +++++++++++++++++-- .../InstitutionDisabled.tsx | 9 +--- .../__tests__/InstitutionDisabled-test.tsx | 7 ++- 3 files changed, 48 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index a68582e271..c1c4cc4c37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2096,10 +2096,47 @@ } } }, - "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/types": { + "version": "7.2.24", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz", + "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==", + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/utils": { + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.4.9.tgz", + "integrity": "sha512-Y12Q9hbK9g+ZY0T3Rxrx9m2m10gaphDuUMgWxyV5kNJevVxXYCLclYUCC9vXaIk1/NdNDTcW2Yfr2OGvNFNmHg==", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/types": "~7.2.24", + "@types/prop-types": "^15.7.14", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^19.0.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } }, "node_modules/@mui/x-data-grid": { "version": "7.29.9", @@ -8594,6 +8631,7 @@ "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.1.tgz", "integrity": "sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==", "dev": true, + "optional": true, "engines": { "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } diff --git a/src/views/institutionDisabled/InstitutionDisabled.tsx b/src/views/institutionDisabled/InstitutionDisabled.tsx index 9b0cc742d8..0fea08f772 100644 --- a/src/views/institutionDisabled/InstitutionDisabled.tsx +++ b/src/views/institutionDisabled/InstitutionDisabled.tsx @@ -66,14 +66,7 @@ export const InstitutionDisabled = React.forwardRef - +

{__('Free %1 Connections Are No Longer Available', institution.name)} diff --git a/src/views/institutionDisabled/__tests__/InstitutionDisabled-test.tsx b/src/views/institutionDisabled/__tests__/InstitutionDisabled-test.tsx index 25092de312..a63301ae54 100644 --- a/src/views/institutionDisabled/__tests__/InstitutionDisabled-test.tsx +++ b/src/views/institutionDisabled/__tests__/InstitutionDisabled-test.tsx @@ -27,19 +27,22 @@ describe('InstitutionDisabled', () => { }, } + let container: HTMLElement + beforeEach(() => { // Reset the mock before each test mockDispatch.mockClear() mockedUseDispatch.mockReturnValue(mockDispatch) - render(, { + const result = render(, { preloadedState, }) + container = result.container }) it('renders institution logo with disabled icon', () => { const logo = screen.getByAltText('Logo for Gringotts') - const disabledIcon = screen.getByTestId('institution-disabled-icon') + const disabledIcon = container.querySelector('.MuiSvgIcon-colorError') expect(logo).toBeInTheDocument() expect(logo).toHaveAttribute('src', expect.stringContaining('INS-123')) From 351176e17a4b9fd054174a96737ec43014047d7f Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Mon, 8 Sep 2025 00:55:47 -0600 Subject: [PATCH 6/8] added a comment --- src/ConnectedTokenProvider.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx index 6ab9abc40c..d9de66e9b4 100644 --- a/src/ConnectedTokenProvider.tsx +++ b/src/ConnectedTokenProvider.tsx @@ -135,6 +135,8 @@ export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode => // Theme object with MX overrides const mxTheme = createMXTheme(isDarkModeEnabled ? 'dark' : 'light', { paletteOptions: { + // Override primary color with widget_brand_color from batcave if it exists or use primary_300 from batcave and + // let the rest of the palette colors be generated by MXUI. primary: clientCustomTokens.tokenOverrides.Color.Brand300, }, }) From d0baafe355cc0f6937ef2fa5ebd5533220153abc Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Mon, 8 Sep 2025 01:32:01 -0600 Subject: [PATCH 7/8] fixed the test --- src/ConnectedTokenProvider.tsx | 8 +- src/redux/selectors/ClientColorScheme.js | 80 ++----------------- .../__tests__/ClientColorScheme-test.js | 63 ++++++--------- 3 files changed, 35 insertions(+), 116 deletions(-) diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx index d9de66e9b4..4f014e6059 100644 --- a/src/ConnectedTokenProvider.tsx +++ b/src/ConnectedTokenProvider.tsx @@ -8,7 +8,7 @@ import { deepmerge } from '@mui/utils' import { createMXTheme, Icon, IconWeight } from '@mxenabled/mxui' import { TokenProvider, THEMES } from '@kyper/tokenprovider' -import { getTokenProviderValues } from 'src/redux/selectors/ClientColorScheme' +import { getPrimarySeedColor } from 'src/redux/selectors/ClientColorScheme' declare module '@mui/material/styles' { interface PaletteColor { @@ -126,8 +126,8 @@ interface Props { } export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode => { - // Client custom tokens from batcave - const clientCustomTokens = useSelector(getTokenProviderValues) + // Client primary seed color from batcave + const clientPrimarySeedColor = useSelector(getPrimarySeedColor) // "Light" or "Dark" const colorScheme = useSelector((state: RootState) => state.config.color_scheme) // Dark mode: true or false @@ -137,7 +137,7 @@ export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode => paletteOptions: { // Override primary color with widget_brand_color from batcave if it exists or use primary_300 from batcave and // let the rest of the palette colors be generated by MXUI. - primary: clientCustomTokens.tokenOverrides.Color.Brand300, + primary: clientPrimarySeedColor, }, }) diff --git a/src/redux/selectors/ClientColorScheme.js b/src/redux/selectors/ClientColorScheme.js index ff7f1eed45..b167ab090e 100644 --- a/src/redux/selectors/ClientColorScheme.js +++ b/src/redux/selectors/ClientColorScheme.js @@ -1,79 +1,9 @@ -import _every from 'lodash/every' import { createSelector } from '@reduxjs/toolkit' -// Memoized selectors for individual pieces of state -const getTheme = (state) => state.config.color_scheme const getClientColorScheme = (state) => state.profiles.clientColorScheme - -// Memoized selector for new client colors(primary 100-500) -export const getNewClientColors = createSelector([getClientColorScheme], (colorScheme) => ({ - Brand100: colorScheme?.primary_100, - Brand200: colorScheme?.primary_200, - Brand300: colorScheme?.primary_300, - Brand400: colorScheme?.primary_400, - Brand500: colorScheme?.primary_500, -})) - -// Memoized selector for old client colors -// This should only be used in conjuction with the TokenProvider to accomodate custom brand color via `widget_brand_color`. -// Set in Batcave>Client>Client Color Scheme>Widget Brand Color -export const getOldClientColors = createSelector( - [getClientColorScheme], - ({ widget_brand_color }) => { - return widget_brand_color - ? { - Brand100: '#F8F9FB', // We couldn't come up with a consistent good looking color with the proper aspect ratio. Defaults to Neutral_100. - Brand200: adjustColor(widget_brand_color, +15), - Brand300: widget_brand_color, - Brand400: adjustColor(widget_brand_color, -15), - Brand500: adjustColor(widget_brand_color, -30), - } - : {} - }, -) - -// Main selector that combines the results -export const getTokenProviderValues = createSelector( - [getTheme, getNewClientColors, getOldClientColors], - (theme, newColors, oldColors) => { - // If we have all the new client colors from the database, use the new colors - const hasNewColors = _every(Object.values(newColors), Boolean) - - return { - tokenOverrides: { Color: hasNewColors ? newColors : oldColors }, - theme, - } - }, +export const getPrimarySeedColor = createSelector( + getClientColorScheme, + // The primary seed color is either the `widget_brand_color` or the `primary_300` + // This is used to set the primary color in the theme paletteOptions and let MXUI generate the rest of the colors(primary 100-500) + (colorScheme) => colorScheme?.widget_brand_color || colorScheme?.primary_300, ) - -// Helper function for color adjustment -export const adjustColor = (col, amt) => { - let color = col - let usePound = false - - if (color[0] === '#') { - // remove hash sign - color = color.slice(1) - usePound = true - } - - // turn it into a 6 digit string - const colorPadded = color.padStart(6, '0') - - // subtract amount from each individual red/green/blue value - let intRVal = parseInt(colorPadded.slice(0, 2), 16) + amt - let intGVal = parseInt(colorPadded.slice(2, 4), 16) + amt - let intBVal = parseInt(colorPadded.slice(4, 6), 16) + amt - - // ensure each value is between 0 and 255 - intRVal = Math.min(Math.max(intRVal, 0), 255) - intGVal = Math.min(Math.max(intGVal, 0), 255) - intBVal = Math.min(Math.max(intBVal, 0), 255) - - // pad each 2 digit hex value to ensure it is in the correct format for css - const hexR = intRVal.toString(16).padStart(2, '0') - const hexG = intGVal.toString(16).padStart(2, '0') - const hexB = intBVal.toString(16).padStart(2, '0') - - return (usePound ? '#' : '') + (hexR + hexG + hexB) -} diff --git a/src/redux/selectors/__tests__/ClientColorScheme-test.js b/src/redux/selectors/__tests__/ClientColorScheme-test.js index abaf9fc337..bb2c656adf 100644 --- a/src/redux/selectors/__tests__/ClientColorScheme-test.js +++ b/src/redux/selectors/__tests__/ClientColorScheme-test.js @@ -1,4 +1,4 @@ -import { getTokenProviderValues } from 'src/redux/selectors/ClientColorScheme' +import { getPrimarySeedColor } from 'src/redux/selectors/ClientColorScheme' describe('ClientcolorScheme Selectors', () => { let state = { @@ -11,30 +11,35 @@ describe('ClientcolorScheme Selectors', () => { }, }, } - describe('getTokenProviderValues', () => { - it('should return the theme primary color if there is no client color scheme', () => { - const res = getTokenProviderValues(state) + describe('getPrimarySeedColor', () => { + it('should return widget_brand_color if it exists', () => { + const res = getPrimarySeedColor(state) - expect(res.tokenOverrides.Color.Brand300).toEqual( - state.profiles.clientColorScheme.widget_brand_color, - ) + expect(res).toEqual(state.profiles.clientColorScheme.widget_brand_color) }) - it('should have five different colors based on widget_brand_color', () => { - const res = getTokenProviderValues(state) - const colors = [ - res.tokenOverrides.Color.Brand100, - res.tokenOverrides.Color.Brand200, - res.tokenOverrides.Color.Brand300, - res.tokenOverrides.Color.Brand400, - res.tokenOverrides.Color.Brand500, - ] - const distinctColors = [...new Set(colors)] + it('should return primary_300 if widget_brand_color does not exist', () => { + state = { + config: { + color_scheme: 'light', + }, + profiles: { + clientColorScheme: { + primary_100: '100', + primary_200: '200', + primary_300: '300', + primary_400: '400', + primary_500: '500', + }, + }, + } + + const res = getPrimarySeedColor(state) - expect(distinctColors).toHaveLength(5) + expect(res).toEqual(state.profiles.clientColorScheme.primary_300) }) - it('should use the client color scheme if it exist', () => { + it('should return undefined if neither widget_brand_color or primary_300 exist', () => { state = { config: { color_scheme: 'light', @@ -43,30 +48,14 @@ describe('ClientcolorScheme Selectors', () => { clientColorScheme: { primary_100: '100', primary_200: '200', - primary_300: '300', primary_400: '400', primary_500: '500', }, }, } + const res = getPrimarySeedColor(state) - const res = getTokenProviderValues(state) - - expect(res.tokenOverrides.Color.Brand100).toEqual( - state.profiles.clientColorScheme.primary_100, - ) - expect(res.tokenOverrides.Color.Brand200).toEqual( - state.profiles.clientColorScheme.primary_200, - ) - expect(res.tokenOverrides.Color.Brand300).toEqual( - state.profiles.clientColorScheme.primary_300, - ) - expect(res.tokenOverrides.Color.Brand400).toEqual( - state.profiles.clientColorScheme.primary_400, - ) - expect(res.tokenOverrides.Color.Brand500).toEqual( - state.profiles.clientColorScheme.primary_500, - ) + expect(res).toBeUndefined() }) }) }) From d334aed0c16ba0ded83b2ecf7b0ab383293c64dd Mon Sep 17 00:00:00 2001 From: Clement Mwimo Date: Mon, 8 Sep 2025 15:56:45 -0600 Subject: [PATCH 8/8] fixed misaligned styles --- src/ConnectedTokenProvider.tsx | 26 ++++++++++++++++---------- src/components/DeleteMemberSurvey.js | 2 +- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx index 4f014e6059..6ff0300395 100644 --- a/src/ConnectedTokenProvider.tsx +++ b/src/ConnectedTokenProvider.tsx @@ -2,7 +2,7 @@ import React from 'react' import { RootState } from 'src/redux/Store' import { useSelector } from 'react-redux' -import { Theme, ThemeProvider, CssBaseline } from '@mui/material' +import { Theme, ThemeProvider } from '@mui/material' import { deepmerge } from '@mui/utils' import { createMXTheme, Icon, IconWeight } from '@mxenabled/mxui' @@ -30,11 +30,6 @@ 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: { @@ -118,6 +113,20 @@ const connectThemeOverrides = (palette: Theme['palette']) => ({ }, }, }, + MuiLink: { + defaultProps: { + sx: { + display: 'inline-flex', + alignItems: 'center', + '&:hover': { + textDecoration: 'underline', + }, + '&:focus': { + textDecoration: 'underline', + }, + }, + }, + }, }, }) @@ -166,10 +175,7 @@ export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode => theme={isDarkModeEnabled ? THEMES.DARK : colorScheme} tokenOverrides={kyperTokenOverrides} > - - - {children} - + {children} ) } diff --git a/src/components/DeleteMemberSurvey.js b/src/components/DeleteMemberSurvey.js index 9882267feb..6866b03454 100644 --- a/src/components/DeleteMemberSurvey.js +++ b/src/components/DeleteMemberSurvey.js @@ -107,8 +107,8 @@ export const DeleteMemberSurvey = (props) => { 'Why do you want to disconnect %1?', member.name, )} + * - *
{reasonList.map((reason, i) => (