From 691575654b76d61f8bfac63905ac7bc999a56ea9 Mon Sep 17 00:00:00 2001
From: Jack Works <5390719+Jack-Works@users.noreply.github.com>
Date: Sat, 18 Jul 2026 00:00:00 +0000
Subject: [PATCH 01/15] chore: upgrade mui

---
 package.json                                  |  19 +-
 .../EncryptionTargetSelector.tsx              |   2 +-
 .../components/GuideStep/index.tsx            |   8 +-
 .../AutoPasteFailedDialog.tsx                 |  13 +-
 .../DecryptedPost/DecryptedPostSuccess.tsx    |   4 +-
 .../DisabledPluginSuggestion.tsx              |   8 +-
 .../InjectedComponents/PageInspector.tsx      |   2 +-
 .../InjectedComponents/PermissionBoundary.tsx |  10 +-
 .../InjectedComponents/PostDialogHint.tsx     |   4 +-
 .../InjectedComponents/ProfileCard/index.tsx  |   8 +-
 .../InjectedComponents/ProfileTabContent.tsx  |  60 +-
 .../SearchResultInspector.tsx                 |   2 +-
 .../SetupGuide/AccountConnectStatus.tsx       |  10 +-
 .../SetupGuide/WizardDialog.tsx               |   2 +-
 .../SelectProfileUI/SelectProfileUI.tsx       |   2 +-
 .../shared/SelectRecipients/ProfileInList.tsx |   6 +-
 .../SelectRecipientsDialog.tsx                |   2 +-
 .../customization/render-fragments.tsx        |   2 +-
 .../customization/render-fragments.tsx        |   4 +-
 .../customization/render-fragments.tsx        |   8 +-
 .../twitter.com/injection/ToolboxHint_UI.tsx  |   4 +-
 packages/mask/dashboard/Dashboard.tsx         |   3 +-
 .../components/BackupPreview/index.tsx        |   7 +-
 .../components/GoogleDriveFileTable.tsx       |   2 +-
 .../dashboard/components/GoogleDriveLogin.tsx |   2 +-
 .../Mnemonic/DesktopMnemonicConfirm.tsx       |  30 +-
 .../components/Mnemonic/MnemonicReveal.tsx    |   2 +-
 .../components/PasswordField/index.tsx        |  40 +-
 .../components/Restore/AccountStatusBar.tsx   |   7 +-
 .../Restore/RestoreFromPrivateKey.tsx         |   2 +-
 .../Restore/RestoreWalletFromLocal.tsx        |   4 +-
 .../dashboard/components/SetupFrame/index.tsx |  33 +-
 .../BackupPreviewDialog.tsx                   |   6 +-
 .../RestoreBackupDialog.tsx                   |  22 +-
 .../AddDeriveWallet/index.tsx                 |   7 +-
 .../CreateMnemonic/ComponentToPrint.tsx       |   2 +-
 .../CreateMaskWallet/CreateMnemonic/index.tsx |   3 +-
 .../CreateMaskWallet/FireflyWallet/index.tsx  |  10 +-
 .../CreateMaskWallet/Onboarding/index.tsx     |   6 +-
 .../pages/CreateMaskWallet/Recovery/index.tsx |   3 +-
 .../SetupPersona/Backup/Cloud/Preview.tsx     |  26 +-
 .../pages/SetupPersona/Backup/Local.tsx       |   4 +-
 .../Mnemonic/ComponentToPrint.tsx             |   2 +-
 .../pages/SetupPersona/Mnemonic/Words.tsx     |   2 +-
 .../pages/SetupPersona/Mnemonic/index.tsx     |   5 +-
 .../pages/SetupPersona/Onboarding/index.tsx   |   4 +-
 .../PermissionOnboarding/index.tsx            |   4 +-
 .../pages/SetupPersona/Permissions/index.tsx  |   2 +-
 .../pages/SetupPersona/Recovery/Local.tsx     |   6 +-
 .../SetupPersona/Recovery/PrivateKey.tsx      |   2 +-
 .../pages/SetupPersona/SignUp/index.tsx       |  10 +-
 .../pages/SetupPersona/Welcome/Article.tsx    |   2 +-
 .../pages/SignUp/steps/PersonaNameUI.tsx      |  12 +-
 packages/mask/package.json                    |   2 +-
 packages/mask/popups/Popup.tsx                |   2 +-
 .../components/AddContactInputPanel/index.tsx |  11 +-
 .../components/ConnectedWallet/index.tsx      |   9 +-
 .../components/GasSettingMenu/index.tsx       |   8 +-
 .../popups/components/PasswordField/index.tsx |   6 +-
 .../components/PrivateKeyDisplay/index.tsx    |   4 +-
 .../components/SignRequestInfo/index.tsx      |   2 +-
 .../components/SocialAccounts/index.tsx       |   2 +-
 .../components/TokenPicker/TokenItem.tsx      |   2 +-
 .../popups/components/TokenPicker/index.tsx   |   4 +-
 .../components/TransactionPreview/index.tsx   |  13 +-
 .../components/UnlockERC20Token/index.tsx     |  51 +-
 .../popups/components/WalletBalance/index.tsx |   4 +-
 .../popups/components/WalletItem/index.tsx    |   2 +-
 .../components/WalletSettingList/index.tsx    |   4 +-
 .../ChangeBackupPasswordModal/index.tsx       |  18 +-
 .../ChangePaymentPasswordModal/index.tsx      |  12 +-
 .../mask/popups/modals/ChooseToken/index.tsx  |   6 +-
 .../popups/modals/ConnectProvider/index.tsx   |  12 +-
 .../GasSettingModal/GasSettingDialog.tsx      |  80 ++-
 .../modals/PersonaRenameModal/index.tsx       |  32 +-
 .../modals/SelectProviderModal/index.tsx      |  12 +-
 .../modals/SetBackupPasswordModal/index.tsx   |  14 +-
 .../modals/ShowPrivateKeyModal/index.tsx      |   4 +-
 .../modals/SwitchPersonaModal/PersonaItem.tsx |   2 +-
 .../VerifyBackupPasswordModal/index.tsx       |   2 +-
 .../WalletAutoLockSettingModal/index.tsx      |   8 +-
 .../popups/modals/WalletRemoveModal/index.tsx |  20 +-
 .../popups/modals/WalletRenameModal/index.tsx |  40 +-
 .../Friends/ContactCard/Account/index.tsx     |   2 +-
 .../ContactCard/SocialAccount/index.tsx       |   2 +-
 .../pages/Friends/ContactCard/index.tsx       |   2 +-
 .../popups/pages/Friends/Contacts/index.tsx   |   2 +-
 .../pages/Friends/Detail/Account/index.tsx    |  12 +-
 .../Friends/Detail/SocialAccount/index.tsx    |  12 +-
 .../mask/popups/pages/Friends/Detail/UI.tsx   |  18 +-
 .../mask/popups/pages/Friends/Home/UI.tsx     |   2 +-
 .../popups/pages/Friends/SearchList/index.tsx |   2 +-
 .../pages/Personas/AccountDetail/UI.tsx       |   4 +-
 .../pages/Personas/ConnectWallet/index.tsx    |   4 +-
 .../pages/Personas/ExportPrivateKey/index.tsx |   6 +-
 .../mask/popups/pages/Personas/Home/UI.tsx    |   5 +-
 .../popups/pages/Personas/Logout/index.tsx    |   8 +-
 .../Personas/PersonaAvatarSetting/index.tsx   |   6 +-
 .../Personas/PersonaSignRequest/index.tsx     |   2 +-
 .../pages/Wallet/ConnectedSites/index.tsx     |   2 +-
 .../pages/Wallet/CreateWallet/Derive.tsx      |   8 +-
 .../pages/Wallet/ExportPrivateKey/index.tsx   |  16 +-
 .../Wallet/Interaction/PermissionRequest.tsx  |   8 +-
 .../Wallet/Interaction/TransactionRequest.tsx |  10 +-
 .../pages/Wallet/Interaction/interaction.tsx  |  20 +-
 .../pages/Wallet/SelectWallet/index.tsx       |  20 +-
 .../pages/Wallet/SetPaymentPassword/index.tsx |  36 +-
 .../pages/Wallet/SyncTwitterCookies/index.tsx |   2 +-
 .../popups/pages/Wallet/TokenDetail/index.tsx |  19 +-
 .../pages/Wallet/TransactionDetail/index.tsx  |   6 +-
 .../Wallet/Transfer/FungibleTokenSection.tsx  |   6 +-
 .../popups/pages/Wallet/Transfer/index.tsx    |   2 +-
 .../mask/popups/pages/Wallet/Unlock/index.tsx |  12 +-
 .../components/ActivityList/ActivityItem.tsx  |  20 +-
 .../Wallet/components/ActivityList/index.tsx  |   4 +-
 .../Wallet/components/AssetsList/index.tsx    |   8 +-
 .../components/DisconnectModal/index.tsx      |   4 +-
 .../components/ImportCreateWallet/index.tsx   |  13 +-
 .../pages/Wallet/components/StartUp/index.tsx |   4 +-
 .../Wallet/components/WalletAssets/index.tsx  |   4 +-
 .../Wallet/components/WalletHeader/UI.tsx     |   8 +-
 .../TypedMessageRender/Components/Text.tsx    |   4 +-
 .../mask/shared-ui/hooks/useThemeLanguage.ts  |   2 +-
 .../src/SiteAdaptor/components/EventList.tsx  |   4 +-
 .../src/SiteAdaptor/components/NewsList.tsx   |   4 +-
 .../SiteAdaptor/components/BridgeStack.tsx    |   2 +-
 .../components/ConnectionContent.tsx          |  32 +-
 .../src/SiteAdaptor/components/HubContent.tsx |  12 +-
 .../src/SiteAdaptor/components/TabContent.tsx |   6 +-
 .../SiteAdaptor/components/FileBrowser.tsx    |   4 +-
 .../src/SiteAdaptor/components/FileList.tsx   |   3 +-
 .../components/Files/ManageableFile.tsx       |   4 +-
 .../Gitcoin/src/SiteAdaptor/PreviewCard.tsx   |   8 +-
 .../src/SiteAdaptor/CheckSecurityDialog.tsx   |  10 +-
 .../components/CheckSecurityConfirmDialog.tsx |   4 +-
 .../components/DefaultPlaceholder.tsx         |   2 +-
 .../src/SiteAdaptor/components/Footer.tsx     |  26 +-
 .../src/SiteAdaptor/components/NotFound.tsx   |  10 +-
 .../src/SiteAdaptor/components/RiskCard.tsx   |   2 +-
 .../components/RiskWarningDialog.tsx          |   8 +-
 .../src/SiteAdaptor/components/SearchBox.tsx  |  34 +-
 .../SiteAdaptor/components/SecurityPanel.tsx  |  37 +-
 .../src/SiteAdaptor/components/TokenPanel.tsx |  26 +-
 .../Handle/src/SiteAdaptor/PluginHeader.tsx   |  18 +-
 .../SiteAdaptor/AvatarBadge/AvatarBadge.tsx   |   2 +-
 .../SiteAdaptor/FinanceFeeds/FinanceFeed.tsx  |   2 +-
 .../src/SiteAdaptor/FinanceFeeds/index.tsx    |  14 +-
 .../SiteAdaptor/SocialFeeds/SocialFeed.tsx    |   4 +-
 .../src/SiteAdaptor/SocialFeeds/index.tsx     |  14 +-
 .../FeedActions/ProfileLinkAction.tsx         |   6 +-
 .../plugins/RSS3/src/SiteAdaptor/index.tsx    |   2 +-
 .../modals/DetailsModal/TxDetails.tsx         |   8 +-
 .../FinanceFeedDetailsModal/TxDetails.tsx     |   4 +-
 .../src/SiteAdaptor/RedPacket/index.tsx       |   2 +-
 .../SolanaRedPacket/SolanaRedPacketCard.tsx   |   2 +-
 .../SolanaRedpacketDialog/CreateRedpacket.tsx |  16 +-
 .../RedpacketConfirm.tsx                      |   8 +-
 .../SiteAdaptor/components/ClaimOnFirefly.tsx |   5 +-
 .../SiteAdaptor/components/ThemePicker.tsx    |   7 +-
 .../RedPacket/src/SiteAdaptor/index.tsx       |  14 +-
 .../views/CreateTokenRedPacket.tsx            |  14 +-
 .../src/SiteAdaptor/views/History.tsx         |   4 +-
 .../views/TokenRedPacketConfirm.tsx           |   8 +-
 .../Savings/src/SiteAdaptor/SavingsForm.tsx   |  10 +-
 .../SiteAdaptor/SavingsTable/SavingsRow.tsx   |   8 +-
 .../src/SiteAdaptor/SavingsTable/index.tsx    |  10 +-
 .../SiteAdaptor/components/LinkModifier.tsx   |   4 +-
 .../SiteAdaptor/components/PreviewCard.tsx    |   4 +-
 .../src/SiteAdaptor/InformationCard.tsx       |  10 +-
 .../src/SiteAdaptor/LoadingFailCard.tsx       |   4 +-
 .../src/SiteAdaptor/PluginDescriptor.tsx      |  16 +-
 .../src/SiteAdaptor/ProfileProposalList.tsx   |   2 +-
 .../Snapshot/src/SiteAdaptor/ProfileView.tsx  |  10 +-
 .../Snapshot/src/SiteAdaptor/ResultCard.tsx   |   8 +-
 .../Snapshot/src/SiteAdaptor/Snapshot.tsx     |  26 +-
 .../Snapshot/src/SiteAdaptor/SpaceMenu.tsx    |  19 +-
 .../Snapshot/src/SiteAdaptor/VotesCard.tsx    |   8 +-
 .../Snapshot/src/SiteAdaptor/VotingDialog.tsx |  16 +-
 .../src/SiteAdaptor/SwitchLogoDialog.tsx      |  26 +-
 .../components/TipsRealmContent/index.tsx     |  16 +-
 .../RecipientSection/RecipientSelect.tsx      |   4 +-
 .../SiteAdaptor/components/TagModifier.tsx    |   5 +-
 .../trader/views/BridgeConfirm.tsx            |  10 +-
 .../trader/views/BridgeQuoteRoute.tsx         |   4 +-
 .../src/SiteAdaptor/trader/views/Confirm.tsx  |   2 +-
 .../trader/views/NetworkFee/index.tsx         |   4 +-
 .../SiteAdaptor/trader/views/QuoteRoute.tsx   |   6 +-
 .../trader/views/SelectLiquidity.tsx          |   2 +-
 .../src/SiteAdaptor/trader/views/Slippage.tsx |   2 +-
 .../SiteAdaptor/trader/views/Trade/Quote.tsx  |  10 +-
 .../SiteAdaptor/trader/views/Trade/index.tsx  |  26 +-
 .../SiteAdaptor/trader/views/Transaction.tsx  |  10 +-
 .../SiteAdaptor/trending/CoinMarketPanel.tsx  |   2 +-
 .../SiteAdaptor/trending/PluginDescriptor.tsx |  13 +-
 .../src/SiteAdaptor/trending/PriceChart.tsx   |   4 +-
 .../trending/PriceChartDaysControl.tsx        |   2 +-
 .../src/SiteAdaptor/trending/TickersTable.tsx |   8 +-
 .../src/SiteAdaptor/trending/TrendingView.tsx |   4 +-
 .../SiteAdaptor/trending/TrendingViewDeck.tsx |  21 +-
 .../trending/TrendingViewDescriptor.tsx       |  10 +-
 .../trending/TrendingViewSkeleton.tsx         |   4 +-
 .../src/SiteAdaptor/BuyTokenDialog.tsx        |   4 +-
 .../VCent/src/SiteAdaptor/TweetDialog.tsx     |   9 +-
 .../components/Lens/FollowLensDialog.tsx      |   2 +-
 .../components/Lens/HandlerDescription.tsx    |   2 +-
 .../SiteAdaptor/components/ProfilePopup.tsx   |   4 +-
 .../components/Web3ProfileDialog.tsx          |   4 +-
 .../src/UI/components/AccountIcons/index.tsx  |   4 +-
 .../src/UI/components/AddressItem/index.tsx   |   9 +-
 .../shared/src/UI/components/Alert/index.tsx  |   2 +-
 .../UI/components/ApplicationEntry/index.tsx  |  12 +-
 .../src/UI/components/ChainBoundary/index.tsx |   2 +-
 .../CoinMetadataTable/ContractItem.tsx        |   4 +-
 .../CoinMetadataTable/ContractSection.tsx     |  13 +-
 .../UI/components/CoinMetadataTable/index.tsx |  31 +-
 .../ConnectPersonaBoundary/index.tsx          |   6 +-
 .../src/UI/components/CopyButton/index.tsx    |   4 +-
 .../UI/components/CountryCodePicker/index.tsx |   4 +-
 .../src/UI/components/ElementAnchor/index.tsx |   9 +-
 .../src/UI/components/EmptyStatus/index.tsx   |   5 +-
 .../src/UI/components/FileFrame/index.tsx     |   2 +-
 .../src/UI/components/FootnoteMenu/index.tsx  |  17 +-
 .../FungibleCoinMarketTable/index.tsx         |   4 +-
 .../UI/components/FungibleTokenInput/UI.tsx   |   9 +-
 .../FungibleTokenList/FungibleTokenItem.tsx   |   9 +-
 packages/shared/src/UI/components/Linking.tsx |   2 +-
 .../src/UI/components/LoadingStatus/index.tsx |   5 +-
 .../UI/components/MaskPluginWrapper/index.tsx |  19 +-
 .../src/UI/components/NetworkTab/index.tsx    |  14 +-
 .../PersonaAction/PersonaAction.tsx           |   2 +-
 .../PersonaSelectPanel/PersonaItemUI.tsx      |  13 +-
 .../components/PersonaSelectPanel/index.tsx   |  17 +-
 .../src/UI/components/PersonaWallet/index.tsx |   2 +-
 .../UI/components/PhoneNumberField/index.tsx  |  37 +-
 .../UI/components/PluginCardFrame/index.tsx   |  17 +-
 .../components/PluginEnableBoundary/index.tsx |   6 +-
 .../src/UI/components/PluginGuide/index.tsx   |   4 +-
 .../UI/components/PriceChartRange/index.tsx   |   6 +-
 .../ProfileTabContent/WalletSettingsEntry.tsx |   6 +-
 .../src/UI/components/ProvidedBy/index.tsx    |  10 +-
 .../src/UI/components/ReloadStatus/index.tsx  |   5 +-
 .../UI/components/ReversedAddress/index.tsx   |   4 +-
 .../SelectGasSettingsToolbar/index.tsx        |  19 +-
 .../UI/components/SettingsBoard/GasForm.tsx   |  10 +-
 .../UI/components/SettingsBoard/Section.tsx   |   2 +-
 .../SocialAccountList/SocialTooltip.tsx       |   4 +-
 .../UI/components/SocialAccountList/index.tsx |  18 +-
 .../SourceProviderSwitcher/index.tsx          |  10 +-
 .../UI/components/SourceSwitcher/index.tsx    |  13 +-
 .../UI/components/TokenAmountPanel/index.tsx  |   8 +-
 .../src/UI/components/TokenMenuList/index.tsx |  26 +-
 .../src/UI/components/TokenSecurity/index.tsx |  46 +-
 .../TokenTransactionConfirmModal/index.tsx    |  10 +-
 .../src/UI/components/TokenValue/index.tsx    |   5 +-
 .../TokenWithSocialGroupMenu/index.tsx        |  14 +-
 .../shared/src/UI/components/Video/index.tsx  |   2 +-
 .../UI/components/WalletStatusBar/Action.tsx  |   2 +-
 .../WalletStatusBox/TransactionList.tsx       |  22 +-
 .../usePendingTransactions.tsx                |   4 +-
 .../shared/src/UI/contexts/PageUIProvider.tsx |   3 +-
 .../UI/contexts/components/InjectedDialog.tsx |   2 +-
 .../ApplicationSettingPluginList.tsx          |   2 +-
 .../ApplicationSettingPluginSwitch.tsx        |  26 +-
 .../UI/modals/ConnectWalletModal/index.tsx    |  12 +-
 .../LeavePageConfirm.tsx                      |   2 +-
 .../SelectFungibleTokenDialog.tsx             |   4 +-
 .../SelectProviderModal/GuideDialog.tsx       |  18 +-
 .../PluginProviderRender.tsx                  |  12 +-
 .../src/UI/wallet/DeriveWalletTable.tsx       |   2 +-
 .../shared/src/UI/wallet/GasSettingBar.tsx    |   4 +-
 packages/theme/package.json                   |   4 +-
 .../src/Components/ActionButton/index.tsx     |  18 +-
 packages/theme/src/Components/Alert/index.tsx |   4 +-
 .../Components/SearchableList/EmptyResult.tsx |   2 +-
 .../SearchableList/SearchableList.tsx         |  30 +-
 packages/theme/src/Components/Tabs/index.tsx  |   2 +-
 .../ShadowRoot/ShadowRootStyleProvider.tsx    |   2 -
 .../theme/src/Theme/component-changes.tsx     |   6 +-
 pnpm-lock.yaml                                | 564 +++++++++---------
 pnpm-workspace.yaml                           |   5 +
 280 files changed, 1749 insertions(+), 1439 deletions(-)

diff --git a/package.json b/package.json
index e73af76ca3a8..672bf00b00a6 100644
--- a/package.json
+++ b/package.json
@@ -32,17 +32,20 @@
   },
   "dependencies": {
     "@dimensiondev/holoflows-kit": "0.9.0-20240322092738-f9180f3",
-    "@emotion/cache": "11.11.0",
-    "@emotion/react": "11.11.4",
-    "@emotion/serialize": "1.1.4",
-    "@emotion/styled": "11.11.5",
+    "@emotion/cache": "11.14.0",
+    "@emotion/react": "11.14.0",
+    "@emotion/serialize": "1.3.3",
+    "@emotion/styled": "11.14.1",
     "@lingui/core": "^6.5.0",
     "@lingui/react": "^6.5.0",
     "@masknet/kit": "0.4.1",
-    "@mui/icons-material": "5.15.21",
-    "@mui/lab": "5.0.0-alpha.170",
-    "@mui/material": "5.15.20",
-    "@mui/system": "5.15.20",
+    "@mui/icons-material": "9.2.0",
+    "@mui/lab": "9.0.0-beta.6",
+    "@mui/material": "9.2.0",
+    "@mui/private-theming": "9.2.0",
+    "@mui/styled-engine": "9.1.1",
+    "@mui/system": "9.2.0",
+    "@mui/utils": "9.2.0",
     "@tanstack/react-query": "^5.49.2",
     "@types/masknet__global-types": "workspace:^",
     "@types/react": "^19.2.10",
diff --git a/packages/mask/content-script/components/CompositionDialog/EncryptionTargetSelector.tsx b/packages/mask/content-script/components/CompositionDialog/EncryptionTargetSelector.tsx
index e871abdb8dfe..0c034f70b4fd 100644
--- a/packages/mask/content-script/components/CompositionDialog/EncryptionTargetSelector.tsx
+++ b/packages/mask/content-script/components/CompositionDialog/EncryptionTargetSelector.tsx
@@ -70,7 +70,7 @@ export function EncryptionTargetSelector(props: EncryptionTargetSelectorProps) {
                 <Typography className={classes.mainTitle}>
                     <Trans>Persona required.</Trans>
                 </Typography>
-                <Box flex={1} />
+                <Box sx={{ flex: 1 }} />
                 <ConnectPersonaBoundary
                     personas={allPersonas}
                     identity={lastRecognized}
diff --git a/packages/mask/content-script/components/GuideStep/index.tsx b/packages/mask/content-script/components/GuideStep/index.tsx
index e22ff015bdaf..303e8c4d4efa 100644
--- a/packages/mask/content-script/components/GuideStep/index.tsx
+++ b/packages/mask/content-script/components/GuideStep/index.tsx
@@ -204,15 +204,13 @@ export default function GuideStep({ total, step, tip, children, arrow = true, on
                                                 :   'arrow-bottom'
                                             :   '',
                                         )}>
-                                        <Box paddingBottom="16px">
-                                            <Typography fontSize={20}>
+                                        <Box sx={{ paddingBottom: '16px' }}>
+                                            <Typography sx={{ fontSize: 20 }}>
                                                 {step}/{total}
                                             </Typography>
                                         </Box>
                                         <div>
-                                            <Typography fontSize={14} fontWeight={600}>
-                                                {tip}
-                                            </Typography>
+                                            <Typography sx={{ fontSize: 14, fontWeight: 600 }}>{tip}</Typography>
                                         </div>
                                         <div className={classes.buttonContainer}>
                                             {step === total ?
diff --git a/packages/mask/content-script/components/InjectedComponents/AutoPasteFailedDialog.tsx b/packages/mask/content-script/components/InjectedComponents/AutoPasteFailedDialog.tsx
index eb68069595fb..31810fceefaa 100644
--- a/packages/mask/content-script/components/InjectedComponents/AutoPasteFailedDialog.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/AutoPasteFailedDialog.tsx
@@ -65,7 +65,12 @@ function AutoPasteFailedDialog(props: AutoPasteFailedDialogProps) {
                     </DialogContentText>
                     {props.data.text ?
                         <>
-                            <TextField multiline fullWidth value={data.text} InputProps={{ readOnly: true }} />
+                            <TextField
+                                multiline
+                                fullWidth
+                                value={data.text}
+                                slotProps={{ input: { readOnly: true } }}
+                            />
                             <Box
                                 sx={{
                                     marginBottom: 1,
@@ -90,14 +95,14 @@ function AutoPasteFailedDialog(props: AutoPasteFailedDialogProps) {
                             </Button>
                         </>
                     :   null}
-                    <Box marginBottom={1} />
-                    <Box textAlign="left">
+                    <Box sx={{ marginBottom: 1 }} />
+                    <Box sx={{ textAlign: 'left' }}>
                         {data.image ?
                             // It must be img
                             // eslint-disable-next-line @eslint-react/purity
                             <Image src={URL.createObjectURL(data.image)} style={{ width: '100%' }} />
                         :   null}
-                        <Box marginBottom={1} />
+                        <Box sx={{ marginBottom: 1 }} />
                         <Button
                             className={classes.button}
                             variant="contained"
diff --git a/packages/mask/content-script/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx b/packages/mask/content-script/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx
index 69a3131fc6bd..291bc944f489 100644
--- a/packages/mask/content-script/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx
@@ -110,7 +110,7 @@ export const DecryptPostSuccess = memo(function DecryptPostSuccess(props: Decryp
                     {selectedRecipients.length ?
                         <RecipientsToolTip recipients={selectedRecipients} openDialog={() => setShowDialog(true)} />
                     :   <section className={classes.visibilityBox} onClick={() => setShowDialog(true)}>
-                            <Typography color="textPrimary" fontSize={12} fontWeight={500}>
+                            <Typography color="textPrimary" sx={{ fontSize: 12, fontWeight: 500 }}>
                                 <Trans>Only visible to yourself</Trans>
                             </Typography>
                             <div className={classes.iconAdd}>
@@ -130,7 +130,7 @@ export const DecryptPostSuccess = memo(function DecryptPostSuccess(props: Decryp
                     :   null}
                 </>
             :   <section className={classes.visibilityBox}>
-                    <Typography color="textPrimary" fontSize={12} fontWeight={500}>
+                    <Typography color="textPrimary" sx={{ fontSize: 12, fontWeight: 500 }}>
                         <Trans>All Mask Network users</Trans>
                     </Typography>
                 </section>
diff --git a/packages/mask/content-script/components/InjectedComponents/DisabledPluginSuggestion.tsx b/packages/mask/content-script/components/InjectedComponents/DisabledPluginSuggestion.tsx
index 531ac98cf466..76d7a7a9ceee 100644
--- a/packages/mask/content-script/components/InjectedComponents/DisabledPluginSuggestion.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/DisabledPluginSuggestion.tsx
@@ -103,7 +103,7 @@ export function PossiblePluginSuggestionUISingle(props: {
     })
 
     const ButtonIcon = lackHostPermission ? Icons.Approve : Icons.Plugin
-    const wrapperContent = content ?? <FallbackContent disabled={disabled} height={74} />
+    const wrapperContent = content ?? <FallbackContent disabled={disabled} sx={{ height: 74 }} />
     const buttonLabel = lackHostPermission ? <Trans>Approve</Trans> : <Trans>Enable the plugin</Trans>
 
     return (
@@ -172,7 +172,11 @@ function FallbackContent({ disabled, ...rest }: FallbackContentProps) {
             </Box>
         )
     return (
-        <Box component="div" pl={1} {...rest} className={cx(classes.content, rest.className)}>
+        <Box
+            component="div"
+            {...rest}
+            className={cx(classes.content, rest.className)}
+            sx={[{ pl: 1 }, ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx])]}>
             <Skeleton className={classes.rectangle} variant="text" animation={false} width={103} height={16} />
             <Skeleton className={classes.rectangle} variant="text" animation={false} width={68} height={16} />
             <Skeleton className={classes.rectangle} variant="text" animation={false} width={48} height={16} />
diff --git a/packages/mask/content-script/components/InjectedComponents/PageInspector.tsx b/packages/mask/content-script/components/InjectedComponents/PageInspector.tsx
index ed4d185e10b0..ad281218a4fe 100644
--- a/packages/mask/content-script/components/InjectedComponents/PageInspector.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/PageInspector.tsx
@@ -30,7 +30,7 @@ export function PageInspector() {
                         <Typography color="textPrimary">
                             <Trans>Do you need to paste encrypted content manually?</Trans>
                         </Typography>
-                        <Box display="flex" justifyContent="flex-end">
+                        <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                             <Button
                                 color="inherit"
                                 variant="text"
diff --git a/packages/mask/content-script/components/InjectedComponents/PermissionBoundary.tsx b/packages/mask/content-script/components/InjectedComponents/PermissionBoundary.tsx
index a3b1652bafbf..56112d425335 100644
--- a/packages/mask/content-script/components/InjectedComponents/PermissionBoundary.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/PermissionBoundary.tsx
@@ -62,11 +62,13 @@ export function MaskPostExtraPluginWrapperWithPermission({
                         content={
                             <Typography
                                 color={theme.palette.maskColor.publicMain}
-                                fontSize={14}
-                                marginBottom={3.25}
-                                textAlign="left"
                                 component="div"
-                                px="18px">
+                                sx={{
+                                    fontSize: 14,
+                                    marginBottom: 3.25,
+                                    textAlign: 'left',
+                                    px: '18px',
+                                }}>
                                 <Trans>
                                     Mask Network requires you to authorize the following websites before using it.
                                 </Trans>
diff --git a/packages/mask/content-script/components/InjectedComponents/PostDialogHint.tsx b/packages/mask/content-script/components/InjectedComponents/PostDialogHint.tsx
index 736e99e35f55..bd8ca697084f 100644
--- a/packages/mask/content-script/components/InjectedComponents/PostDialogHint.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/PostDialogHint.tsx
@@ -46,9 +46,7 @@ const EntryIconButton = memo(function EntryIconButton(props: PostDialogHintUIPro
             title={<Trans>Mask Network</Trans>}
             placement={tooltip?.placement}
             disableHoverListener={tooltip?.disabled}
-            PopperProps={{
-                disablePortal: false,
-            }}
+            slotProps={{ popper: { disablePortal: false } }}
             arrow>
             <IconButton
                 size="large"
diff --git a/packages/mask/content-script/components/InjectedComponents/ProfileCard/index.tsx b/packages/mask/content-script/components/InjectedComponents/ProfileCard/index.tsx
index 9025ff76d37c..eae43b7bfb89 100644
--- a/packages/mask/content-script/components/InjectedComponents/ProfileCard/index.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/ProfileCard/index.tsx
@@ -236,11 +236,13 @@ export const ProfileCard = memo(({ identity, currentAddress, ...rest }: Props) =
                             <Trans>
                                 Powered by{' '}
                                 <Typography
-                                    fontWeight={700}
-                                    fontSize="inherit"
                                     variant="body1"
                                     component="strong"
-                                    color={(theme) => theme.palette.text.primary}>
+                                    sx={{
+                                        color: (theme) => theme.palette.text.primary,
+                                        fontWeight: 700,
+                                        fontSize: 'inherit',
+                                    }}>
                                     Mask Network
                                 </Typography>
                             </Trans>
diff --git a/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx
index f8007007bc59..06e019087cb5 100644
--- a/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx
@@ -343,12 +343,14 @@ function Content(props: ProfileTabContentProps) {
             <ThemeProvider theme={MaskLightTheme}>
                 <div className={classes.root}>
                     <PluginCardFrameMini>
-                        <Stack display="inline-flex" gap={3} justifyContent="center" alignItems="center">
+                        <Stack sx={{ display: 'inline-flex', gap: 3, justifyContent: 'center', alignItems: 'center' }}>
                             <Typography
-                                fontSize={14}
-                                fontWeight={400}
-                                lineHeight="18px"
-                                color={(t) => t.palette.maskColor.danger}>
+                                sx={{
+                                    fontSize: 14,
+                                    fontWeight: 400,
+                                    lineHeight: '18px',
+                                    color: (t) => t.palette.maskColor.danger,
+                                }}>
                                 <Trans>Load failed</Trans>
                             </Typography>
                             <Button color="primary" className={classes.reload} onClick={handleClick}>
@@ -368,12 +370,20 @@ function Content(props: ProfileTabContentProps) {
             <ThemeProvider theme={MaskLightTheme}>
                 <div className={classes.root}>
                     <PluginCardFrameMini>
-                        <Stack display="inline-flex" gap={3} justifyContent="center" alignItems="center">
+                        <Stack
+                            sx={{
+                                display: 'inline-flex',
+                                gap: 3,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            }}>
                             <Typography
-                                fontSize={14}
-                                fontWeight={400}
-                                lineHeight="18px"
-                                color={(t) => t.palette.maskColor.publicMain}>
+                                sx={{
+                                    fontSize: 14,
+                                    fontWeight: 400,
+                                    lineHeight: '18px',
+                                    color: (t) => t.palette.maskColor.publicMain,
+                                }}>
                                 <Trans>Can't find a valid user address data source.</Trans>
                             </Typography>
                         </Stack>
@@ -388,7 +398,13 @@ function Content(props: ProfileTabContentProps) {
             <ThemeProvider theme={MaskLightTheme}>
                 <div className={classes.root}>
                     <PluginCardFrameMini>
-                        <Stack display="inline-flex" gap={3} justifyContent="center" alignItems="center">
+                        <Stack
+                            sx={{
+                                display: 'inline-flex',
+                                gap: 3,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            }}>
                             <WalletSettingsEntry />
                         </Stack>
                     </PluginCardFrameMini>
@@ -440,17 +456,21 @@ function Content(props: ProfileTabContentProps) {
                     <div className={classes.settingItem}>
                         <Trans>
                             <Typography
-                                fontSize="14px"
-                                fontWeight={700}
-                                marginRight="5px"
-                                color={(theme) => theme.palette.maskColor.secondaryDark}>
+                                sx={{
+                                    fontSize: '14px',
+                                    fontWeight: 700,
+                                    marginRight: '5px',
+                                    color: (theme) => theme.palette.maskColor.secondaryDark,
+                                }}>
                                 Powered by
                             </Typography>
                             <Typography
-                                fontSize="14px"
-                                fontWeight={700}
-                                marginRight="4px"
-                                color={(theme) => theme.palette.maskColor.dark}>
+                                sx={{
+                                    fontSize: '14px',
+                                    fontWeight: 700,
+                                    marginRight: '4px',
+                                    color: (theme) => theme.palette.maskColor.dark,
+                                }}>
                                 Mask Network
                             </Typography>
                         </Trans>
@@ -492,7 +512,7 @@ function Content(props: ProfileTabContentProps) {
                         tabId={componentTabId}
                         socialAccount={selectedSocialAccount}
                     />
-                :   <EmptyStatus height={260}>
+                :   <EmptyStatus sx={{ height: 260 }}>
                         <Trans>There's no content associated with this address.</Trans>
                     </EmptyStatus>
                 }
diff --git a/packages/mask/content-script/components/InjectedComponents/SearchResultInspector.tsx b/packages/mask/content-script/components/InjectedComponents/SearchResultInspector.tsx
index 9ac01a3fc0be..dbc6a735a6af 100644
--- a/packages/mask/content-script/components/InjectedComponents/SearchResultInspector.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/SearchResultInspector.tsx
@@ -114,7 +114,7 @@ export function SearchResultInspector(props: SearchResultInspectorProps) {
                         />
                     </div>
                     {tabs.length ?
-                        <Stack px={2}>
+                        <Stack sx={{ px: 2 }}>
                             <TabContext value={currentTab}>
                                 <MaskTabList variant="base" onChange={onChange} aria-label="Web3Tabs">
                                     {tabs.map((tab) => (
diff --git a/packages/mask/content-script/components/InjectedComponents/SetupGuide/AccountConnectStatus.tsx b/packages/mask/content-script/components/InjectedComponents/SetupGuide/AccountConnectStatus.tsx
index 9579597d2c09..d5a74849e7d5 100644
--- a/packages/mask/content-script/components/InjectedComponents/SetupGuide/AccountConnectStatus.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/SetupGuide/AccountConnectStatus.tsx
@@ -92,7 +92,7 @@ export const AccountConnectStatus = memo<Props>(function AccountConnectStatus({
                     <Typography className={classes.text}>
                         <Trans>Sent verification post successfully.</Trans>
                     </Typography>
-                    <Typography className={classes.text} mt="1.5em">
+                    <Typography className={classes.text} sx={{ mt: '1.5em' }}>
                         <Trans>
                             You could check the verification result on Mask Pop-up after few minutes. If failed, try
                             sending verification post again.
@@ -103,7 +103,7 @@ export const AccountConnectStatus = memo<Props>(function AccountConnectStatus({
                     <Typography className={classes.text}>
                         <Trans>Connected successfully.</Trans>
                     </Typography>
-                    <Typography className={classes.text} mt="1.5em">
+                    <Typography className={classes.text} sx={{ mt: '1.5em' }}>
                         <Trans>Trying exploring more features powered by Mask Network.</Trans>
                     </Typography>
                 </Frame>
@@ -117,10 +117,10 @@ export const AccountConnectStatus = memo<Props>(function AccountConnectStatus({
                         <b>@{currentUserId}</b> connected already.
                     </Trans>
                 </Typography>
-                <Typography className={classes.text} mt="1.5em">
+                <Typography className={classes.text} sx={{ mt: '1.5em' }}>
                     <Trans>Change another account and try again.</Trans>
                 </Typography>
-                <Box mt="auto" width="100%">
+                <Box sx={{ mt: 'auto', width: '100%' }}>
                     <Button fullWidth onClick={rest.onClose}>
                         <Trans>Done</Trans>
                     </Button>
@@ -134,7 +134,7 @@ export const AccountConnectStatus = memo<Props>(function AccountConnectStatus({
                 <Typography className={classes.text}>
                     <Trans>Current account is not the verifying account.</Trans>
                 </Typography>
-                <Typography className={classes.text} mt="1.5em">
+                <Typography className={classes.text} sx={{ mt: '1.5em' }}>
                     <Trans>
                         Please switch to <b>@{expectAccount}</b> to continue the account verification progress.
                     </Trans>
diff --git a/packages/mask/content-script/components/InjectedComponents/SetupGuide/WizardDialog.tsx b/packages/mask/content-script/components/InjectedComponents/SetupGuide/WizardDialog.tsx
index 3146635337d9..3047cd032f0a 100644
--- a/packages/mask/content-script/components/InjectedComponents/SetupGuide/WizardDialog.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/SetupGuide/WizardDialog.tsx
@@ -105,7 +105,7 @@ export function WizardDialog(props: WizardDialogProps) {
     return (
         <Paper className={cx(classes.root, small ? 'small' : '')}>
             <header className={classes.header}>
-                <Typography color="textPrimary" variant="h3" fontSize={24}>
+                <Typography color="textPrimary" variant="h3" sx={{ fontSize: 24 }}>
                     {title}
                 </Typography>
             </header>
diff --git a/packages/mask/content-script/components/shared/SelectProfileUI/SelectProfileUI.tsx b/packages/mask/content-script/components/shared/SelectProfileUI/SelectProfileUI.tsx
index 8d9a1ad4406c..280e0ee836c7 100644
--- a/packages/mask/content-script/components/shared/SelectProfileUI/SelectProfileUI.tsx
+++ b/packages/mask/content-script/components/shared/SelectProfileUI/SelectProfileUI.tsx
@@ -188,7 +188,7 @@ export function SelectProfileUI(props: SelectProfileUIProps) {
                             </Box>
                         </div>
                         {profiles.length ?
-                            <Stack alignItems="center" flexDirection="row" sx={{ padding: '16px 0px' }}>
+                            <Stack sx={{ alignItems: 'center', flexDirection: 'row', padding: '16px 0px' }}>
                                 <Checkbox
                                     sx={{ width: 20, height: 20 }}
                                     onChange={(e) => onSelectedAllChange(e.currentTarget.checked)}
diff --git a/packages/mask/content-script/components/shared/SelectRecipients/ProfileInList.tsx b/packages/mask/content-script/components/shared/SelectRecipients/ProfileInList.tsx
index edbdf5ff3dc7..19601219451a 100644
--- a/packages/mask/content-script/components/shared/SelectRecipients/ProfileInList.tsx
+++ b/packages/mask/content-script/components/shared/SelectRecipients/ProfileInList.tsx
@@ -104,7 +104,6 @@ export const ProfileInList = memo(function ProfileInList(props: ProfileInListPro
                     primary: classes.overflow,
                     secondary: classes.overflow,
                 }}
-                primaryTypographyProps={{ component: 'div' }}
                 primary={
                     <ShadowRootTooltip
                         title={tooltipTitle}
@@ -122,7 +121,10 @@ export const ProfileInList = memo(function ProfileInList(props: ProfileInListPro
                         </div>
                     </ShadowRootTooltip>
                 }
-                secondaryTypographyProps={{ component: 'div' }}
+                slotProps={{
+                    primary: { component: 'div' },
+                    secondary: { component: 'div' },
+                }}
                 secondary={
                     <div className={classes.flex}>
                         <Highlighter
diff --git a/packages/mask/content-script/components/shared/SelectRecipients/SelectRecipientsDialog.tsx b/packages/mask/content-script/components/shared/SelectRecipients/SelectRecipientsDialog.tsx
index a6fdcfd579f6..22d8dcceb7b2 100644
--- a/packages/mask/content-script/components/shared/SelectRecipients/SelectRecipientsDialog.tsx
+++ b/packages/mask/content-script/components/shared/SelectRecipients/SelectRecipientsDialog.tsx
@@ -254,7 +254,7 @@ export function SelectRecipientsDialogUI(props: SelectRecipientsDialogUIProps) {
                                 </div>
                             </div>
                             {results.length > 0 ?
-                                <Stack alignItems="center" flexDirection="row" sx={{ padding: '16px 0' }}>
+                                <Stack sx={{ alignItems: 'center', flexDirection: 'row', padding: '16px 0' }}>
                                     <Checkbox
                                         size="small"
                                         sx={{ width: 20, height: 20 }}
diff --git a/packages/mask/content-script/site-adaptors/facebook.com/customization/render-fragments.tsx b/packages/mask/content-script/site-adaptors/facebook.com/customization/render-fragments.tsx
index 442df5bc070d..d14a248e2591 100644
--- a/packages/mask/content-script/site-adaptors/facebook.com/customization/render-fragments.tsx
+++ b/packages/mask/content-script/site-adaptors/facebook.com/customization/render-fragments.tsx
@@ -8,7 +8,7 @@ function Hash(props: RenderFragmentsContextType.HashLinkProps | RenderFragmentsC
     const target = `/hashtag/${encodeURIComponent(text)}`
     const { hasMatch, ...events } = useTagEnhancer('hash', text)
     return (
-        <Link {...events} href={target} fontSize="inherit">
+        <Link {...events} href={target} sx={{ fontSize: 'inherit' }}>
             {props.children}
         </Link>
     )
diff --git a/packages/mask/content-script/site-adaptors/minds.com/customization/render-fragments.tsx b/packages/mask/content-script/site-adaptors/minds.com/customization/render-fragments.tsx
index 747a8501bc58..915ce5d623c5 100644
--- a/packages/mask/content-script/site-adaptors/minds.com/customization/render-fragments.tsx
+++ b/packages/mask/content-script/site-adaptors/minds.com/customization/render-fragments.tsx
@@ -7,7 +7,7 @@ export const MindsRenderFragments: RenderFragmentsContextType = {
     AtLink: memo(function (props) {
         const target = '/' + props.children.slice(1)
         return (
-            <Link fontSize="inherit" href={target}>
+            <Link href={target} sx={{ fontSize: 'inherit' }}>
                 {props.children}
             </Link>
         )
@@ -19,7 +19,6 @@ export const MindsRenderFragments: RenderFragmentsContextType = {
         return (
             <Link
                 {...events}
-                fontSize="inherit"
                 href={target}
                 onClick={(e) => {
                     e.stopPropagation()
@@ -35,7 +34,6 @@ export const MindsRenderFragments: RenderFragmentsContextType = {
         return (
             <Link
                 {...events}
-                fontSize="inherit"
                 href={target}
                 onClick={(e) => {
                     e.stopPropagation()
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/customization/render-fragments.tsx b/packages/mask/content-script/site-adaptors/twitter.com/customization/render-fragments.tsx
index 814da7ac1c37..1b33ccb8d043 100644
--- a/packages/mask/content-script/site-adaptors/twitter.com/customization/render-fragments.tsx
+++ b/packages/mask/content-script/site-adaptors/twitter.com/customization/render-fragments.tsx
@@ -11,7 +11,7 @@ export const TwitterRenderFragments: RenderFragmentsContextType = {
     AtLink: memo(function (props) {
         const target = '/' + props.children.slice(1)
         return (
-            <Link href={target} fontSize="inherit">
+            <Link href={target} sx={{ fontSize: 'inherit' }}>
                 {props.children}
             </Link>
         )
@@ -20,7 +20,7 @@ export const TwitterRenderFragments: RenderFragmentsContextType = {
         const text = props.children.slice(1)
         const target = `/hashtag/${encodeURIComponent(text)}?src=hashtag_click`
         const link = (
-            <Link href={target} fontSize="inherit">
+            <Link href={target} sx={{ fontSize: 'inherit' }}>
                 {props.children}
                 {props.suggestedPostImage}
             </Link>
@@ -33,7 +33,7 @@ export const TwitterRenderFragments: RenderFragmentsContextType = {
     CashLink: memo(function (props) {
         const target = `/search?q=${encodeURIComponent(props.children)}&src=cashtag_click`
         const link = (
-            <Link href={target} fontSize="inherit">
+            <Link href={target} sx={{ fontSize: 'inherit' }}>
                 {props.children}
             </Link>
         )
@@ -57,7 +57,7 @@ export const TwitterRenderFragments: RenderFragmentsContextType = {
     Link: memo(function LinkFragment(props: RenderFragmentsContextType.LinkProps) {
         const LinkModifier = useActivatedPluginsSiteAdaptor(false).find((x) => x.LinkModifier)?.LinkModifier
         const link = (
-            <Link href={props.href} target="_blank" rel="noopener noreferrer" fontSize="inherit">
+            <Link href={props.href} target="_blank" rel="noopener noreferrer" sx={{ fontSize: 'inherit' }}>
                 {props.children}
                 {props.suggestedPostImage}
             </Link>
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/injection/ToolboxHint_UI.tsx b/packages/mask/content-script/site-adaptors/twitter.com/injection/ToolboxHint_UI.tsx
index 3275b7028d86..9794e6980540 100644
--- a/packages/mask/content-script/site-adaptors/twitter.com/injection/ToolboxHint_UI.tsx
+++ b/packages/mask/content-script/site-adaptors/twitter.com/injection/ToolboxHint_UI.tsx
@@ -48,9 +48,7 @@ export function ToolboxHintAtTwitter(props: { category: 'wallet' | 'application'
     const buttonStyle = ButtonStyle[themeSettings.size]
     const Typography = useMemo(() => {
         return ({ children }: React.PropsWithChildren) => (
-            <Text fontSize={buttonStyle.iconSize} marginLeft={textMarginLeft ?? '20px'}>
-                {children}
-            </Text>
+            <Text sx={{ fontSize: buttonStyle.iconSize, marginLeft: textMarginLeft ?? '20px' }}>{children}</Text>
         )
     }, [buttonStyle.iconSize, textMarginLeft])
     const _mini = useMediaQuery(`(max-width: ${HORIZONTAL_BREAKPOINT}px)`)
diff --git a/packages/mask/dashboard/Dashboard.tsx b/packages/mask/dashboard/Dashboard.tsx
index be3c4cea22d7..879a0eb61586 100644
--- a/packages/mask/dashboard/Dashboard.tsx
+++ b/packages/mask/dashboard/Dashboard.tsx
@@ -1,5 +1,6 @@
 import { cloneElement, useEffect } from 'react'
-import { CssBaseline, ThemeProvider, StyledEngineProvider, GlobalStyles } from '@mui/material'
+import { CssBaseline, ThemeProvider, GlobalStyles } from '@mui/material'
+import { StyledEngineProvider } from '@mui/material/styles'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import {
     CustomSnackbarProvider,
diff --git a/packages/mask/dashboard/components/BackupPreview/index.tsx b/packages/mask/dashboard/components/BackupPreview/index.tsx
index d07a33d04b9d..aa8ab4712a38 100644
--- a/packages/mask/dashboard/components/BackupPreview/index.tsx
+++ b/packages/mask/dashboard/components/BackupPreview/index.tsx
@@ -159,7 +159,7 @@ export const PersonasBackupPreview = memo<PersonasBackupPreviewProps>(function P
                 }
                 action={
                     info.personas.length ?
-                        <Box display="flex" columnGap={1}>
+                        <Box sx={{ display: 'flex', columnGap: 1 }}>
                             <Typography component="div" className={classes.headerAction}>
                                 <TextOverflowTooltip title={personas} arrow placement="top">
                                     <Typography className={classes.personas}>{personas}</Typography>
@@ -252,15 +252,14 @@ export const WalletsBackupPreview = memo<WalletsBackupPreviewProps>(function Wal
                             <ListItemText className={classes.listText}>
                                 <Link
                                     className={classes.link}
-                                    fontSize={0}
+                                    sx={{ fontSize: 0 }}
                                     href={EVMExplorerResolver.addressLink(ChainId.Mainnet, wallet)}
                                     target="_blank">
                                     <ReversedAddress
                                         component="span"
                                         pluginID={NetworkPluginID.PLUGIN_EVM}
                                         address={wallet}
-                                        mr="10px"
-                                        fontWeight={400}
+                                        sx={{ mr: '10px', fontWeight: 400 }}
                                     />
                                     <Icons.LinkOut size={18} color={theme.palette.maskColor.second} />
                                 </Link>
diff --git a/packages/mask/dashboard/components/GoogleDriveFileTable.tsx b/packages/mask/dashboard/components/GoogleDriveFileTable.tsx
index aa70d2b9e04b..0b510ac81999 100644
--- a/packages/mask/dashboard/components/GoogleDriveFileTable.tsx
+++ b/packages/mask/dashboard/components/GoogleDriveFileTable.tsx
@@ -212,7 +212,7 @@ export const GoogleDriveFileTable = memo<GoogleDriveFileTableProps>(function Goo
                 :   <TableBody>
                         <TableRow>
                             <TableCell colSpan={4}>
-                                <EmptyStatus height="300px">
+                                <EmptyStatus sx={{ height: '300px' }}>
                                     <Trans>No backups found</Trans>
                                 </EmptyStatus>
                             </TableCell>
diff --git a/packages/mask/dashboard/components/GoogleDriveLogin.tsx b/packages/mask/dashboard/components/GoogleDriveLogin.tsx
index 8833ded82abd..ee26b515f748 100644
--- a/packages/mask/dashboard/components/GoogleDriveLogin.tsx
+++ b/packages/mask/dashboard/components/GoogleDriveLogin.tsx
@@ -64,7 +64,7 @@ export const GoogleDriveLogin = memo(function GoogleDriveLogin() {
                     when you click Add Google Drive button，you will be forwarded to Google authorization pages.
                 </Trans>
             </Typography>
-            <Box display="flex" justifyContent="center" mt="48px">
+            <Box sx={{ display: 'flex', justifyContent: 'center', mt: '48px' }}>
                 <ActionButton variant="roundedContained" onClick={login} loading={loading}>
                     Add Google Drive
                 </ActionButton>
diff --git a/packages/mask/dashboard/components/Mnemonic/DesktopMnemonicConfirm.tsx b/packages/mask/dashboard/components/Mnemonic/DesktopMnemonicConfirm.tsx
index 525957183207..e60be675bfec 100644
--- a/packages/mask/dashboard/components/Mnemonic/DesktopMnemonicConfirm.tsx
+++ b/packages/mask/dashboard/components/Mnemonic/DesktopMnemonicConfirm.tsx
@@ -51,26 +51,28 @@ export const DesktopMnemonicConfirm = memo(function DesktopMnemonicConfirm(props
             {puzzleWords.map((word, i) => {
                 const no = i + 1
                 return (
-                    <Grid item xs={3} key={i}>
+                    <Grid key={i} size={3}>
                         <TextField
                             sx={{ width: '100%', userSelect: 'none' }}
                             value={word}
                             autoFocus={i === 0}
                             autoComplete="off"
                             type="password"
-                            InputProps={{
-                                disableUnderline: true,
-                                className: classes.input,
-                                startAdornment: <Typography className={classes.end}>{no}.</Typography>,
-                                endAdornment: (
-                                    <Typography className={classes.end}>
-                                        {/* balance the input, make the cursor center */}
-                                    </Typography>
-                                ),
-                                size: 'small',
-                                inputProps: {
-                                    style: {
-                                        textAlign: 'center',
+                            slotProps={{
+                                input: {
+                                    disableUnderline: true,
+                                    className: classes.input,
+                                    startAdornment: <Typography className={classes.end}>{no}.</Typography>,
+                                    endAdornment: (
+                                        <Typography className={classes.end}>
+                                            {/* balance the input, make the cursor center */}
+                                        </Typography>
+                                    ),
+                                    size: 'small',
+                                    inputProps: {
+                                        style: {
+                                            textAlign: 'center',
+                                        },
                                     },
                                 },
                             }}
diff --git a/packages/mask/dashboard/components/Mnemonic/MnemonicReveal.tsx b/packages/mask/dashboard/components/Mnemonic/MnemonicReveal.tsx
index cc65954ce534..489f7edf2ae4 100644
--- a/packages/mask/dashboard/components/Mnemonic/MnemonicReveal.tsx
+++ b/packages/mask/dashboard/components/Mnemonic/MnemonicReveal.tsx
@@ -47,7 +47,7 @@ export function MnemonicReveal(props: MnemonicRevealProps) {
         <Box component="ul" className={classes.container}>
             {words.map((item, index) => (
                 <Box className={classes.wordCard} component="li" key={index}>
-                    <Typography className={classes.text} fontWeight={700} textAlign="center" flex="1 0 0">
+                    <Typography className={classes.text} sx={{ fontWeight: 700, textAlign: 'center', flex: '1 0 0' }}>
                         {item}
                     </Typography>
                 </Box>
diff --git a/packages/mask/dashboard/components/PasswordField/index.tsx b/packages/mask/dashboard/components/PasswordField/index.tsx
index 7d2a046f6385..1f4c575acc7e 100644
--- a/packages/mask/dashboard/components/PasswordField/index.tsx
+++ b/packages/mask/dashboard/components/PasswordField/index.tsx
@@ -15,25 +15,27 @@ export default function PasswordField({ show = true, ...props }: PasswordFieldPr
             {...props}
             type={showPassword ? 'text' : 'password'}
             size="medium"
-            InputProps={{
-                ...props.InputProps,
-                size: 'medium',
-                disableUnderline: true,
-                endAdornment:
-                    show ?
-                        <InputAdornment position="end">
-                            <IconButton
-                                aria-label="toggle password visibility"
-                                onClick={() => setShowPassword(!showPassword)}
-                                onMouseDown={(event) => event.preventDefault()}
-                                edge="end"
-                                size="small">
-                                {showPassword ?
-                                    <Icons.EyeOff size={18} />
-                                :   <Icons.Eye size={18} />}
-                            </IconButton>
-                        </InputAdornment>
-                    :   null,
+            slotProps={{
+                input: {
+                    ...props.InputProps,
+                    size: 'medium',
+                    disableUnderline: true,
+                    endAdornment:
+                        show ?
+                            <InputAdornment position="end">
+                                <IconButton
+                                    aria-label="toggle password visibility"
+                                    onClick={() => setShowPassword(!showPassword)}
+                                    onMouseDown={(event) => event.preventDefault()}
+                                    edge="end"
+                                    size="small">
+                                    {showPassword ?
+                                        <Icons.EyeOff size={18} />
+                                    :   <Icons.Eye size={18} />}
+                                </IconButton>
+                            </InputAdornment>
+                        :   null,
+                },
             }}
         />
     )
diff --git a/packages/mask/dashboard/components/Restore/AccountStatusBar.tsx b/packages/mask/dashboard/components/Restore/AccountStatusBar.tsx
index ab7ac8adcdfa..5a45867c00d9 100644
--- a/packages/mask/dashboard/components/Restore/AccountStatusBar.tsx
+++ b/packages/mask/dashboard/components/Restore/AccountStatusBar.tsx
@@ -21,7 +21,12 @@ interface Props extends BoxProps {
 export const AccountStatusBar = memo(function AccountStatusBar({ label, actionLabel, onAction, ...rest }: Props) {
     const { classes } = useStyles()
     return (
-        <Box display="flex" justifyContent="space-between" alignItems="center" {...rest}>
+        <Box
+            {...rest}
+            sx={[
+                { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
+                ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
+            ]}>
             {label ?
                 <Typography className={classes.label}>{label}</Typography>
             :   null}
diff --git a/packages/mask/dashboard/components/Restore/RestoreFromPrivateKey.tsx b/packages/mask/dashboard/components/Restore/RestoreFromPrivateKey.tsx
index b59599b1ad8a..b6b1a804958d 100644
--- a/packages/mask/dashboard/components/Restore/RestoreFromPrivateKey.tsx
+++ b/packages/mask/dashboard/components/Restore/RestoreFromPrivateKey.tsx
@@ -70,7 +70,7 @@ export const RestoreFromPrivateKey = memo(function RestoreFromPrivateKey({
     }, [isSubmitting, isDirty, handleSubmit, onSubmit])
 
     return (
-        <Box width="100%">
+        <Box sx={{ width: '100%' }}>
             <Controller
                 control={control}
                 render={({ field }) => (
diff --git a/packages/mask/dashboard/components/Restore/RestoreWalletFromLocal.tsx b/packages/mask/dashboard/components/Restore/RestoreWalletFromLocal.tsx
index df906af1fe91..d74d0b216d34 100644
--- a/packages/mask/dashboard/components/Restore/RestoreWalletFromLocal.tsx
+++ b/packages/mask/dashboard/components/Restore/RestoreWalletFromLocal.tsx
@@ -73,7 +73,7 @@ export const RestoreWalletFromLocal = memo(function RestoreWalletFromLocal({
     }, [disabled, keyStoreContent, keyStorePassword])
 
     return (
-        <Box width="100%">
+        <Box sx={{ width: '100%' }}>
             <UploadDropArea onSelectFile={handleSetFile} omitSizeLimit />
             {file ?
                 <>
@@ -92,7 +92,7 @@ export const RestoreWalletFromLocal = memo(function RestoreWalletFromLocal({
                         </Typography>
                     </FileFrame>
                     {readingFile ? null : (
-                        <Box mt={4}>
+                        <Box sx={{ mt: 4 }}>
                             <PasswordField
                                 fullWidth
                                 placeholder={t`Keystore password`}
diff --git a/packages/mask/dashboard/components/SetupFrame/index.tsx b/packages/mask/dashboard/components/SetupFrame/index.tsx
index 5a70ccd70eae..d78985572f9f 100644
--- a/packages/mask/dashboard/components/SetupFrame/index.tsx
+++ b/packages/mask/dashboard/components/SetupFrame/index.tsx
@@ -56,18 +56,27 @@ export const SetupFrame = memo<SetupFrameProps>(function SetupFrame({ hiddenSpli
                     <Outlet />
                 </Box>
             </Box>
-            <Box className={classes.sidebar} position="relative">
+            <Box className={classes.sidebar} sx={{ position: 'relative' }}>
                 {hiddenSpline ? null : (
                     <div style={{ position: 'absolute', width: '100%', height: '100%', backgroundColor: '#d2deff' }}>
-                        <Box position="absolute" marginTop={21.5} width="100%" display="flex" justifyContent="center">
+                        <Box
+                            sx={{
+                                position: 'absolute',
+                                marginTop: 21.5,
+                                width: '100%',
+                                display: 'flex',
+                                justifyContent: 'center',
+                            }}>
                             <Typography
-                                fontSize={36}
-                                fontWeight={700}
-                                lineHeight={1.2}
                                 color={theme.palette.maskColor.publicMain}
-                                display="flex"
-                                width="70%"
-                                justifyContent="center">
+                                sx={{
+                                    fontSize: 36,
+                                    fontWeight: 700,
+                                    lineHeight: 1.2,
+                                    display: 'flex',
+                                    width: '70%',
+                                    justifyContent: 'center',
+                                }}>
                                 {/* Don't translate this slogan */}
                                 The Web3 identity for everyone
                             </Typography>
@@ -79,7 +88,7 @@ export const SetupFrame = memo<SetupFrameProps>(function SetupFrame({ hiddenSpli
                     </div>
                 )}
                 {loading && !hiddenSpline ?
-                    <Box position="absolute" top="calc(50% - 18px)" left="calc(50% - 18px)">
+                    <Box sx={{ position: 'absolute', top: 'calc(50% - 18px)', left: 'calc(50% - 18px)' }}>
                         <LoadingBase size={36} />
                     </Box>
                 :   null}
@@ -90,9 +99,5 @@ export const SetupFrame = memo<SetupFrameProps>(function SetupFrame({ hiddenSpli
 
 interface SetupFrameControllerProps extends PropsWithChildren {}
 export const SetupFrameController = memo<SetupFrameControllerProps>(function SetupFrameController({ children }) {
-    return (
-        <Box marginTop="auto" py={3}>
-            {children}
-        </Box>
-    )
+    return <Box sx={{ marginTop: 'auto', py: 3 }}>{children}</Box>
 })
diff --git a/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx b/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
index 0b34c11d15f5..cf677937a8ed 100644
--- a/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
+++ b/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
@@ -166,7 +166,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
                 </Box>
             )
         return !loading && previewInfo ?
-                <Box display="flex" flexDirection="column">
+                <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                     <PersonasBackupPreview info={previewInfo} />
 
                     <Controller
@@ -208,14 +208,14 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
                         />
                     :   null}
                     {isUpload ?
-                        <Typography color={theme.palette.maskColor.danger} fontSize={14} lineHeight="18px">
+                        <Typography color={theme.palette.maskColor.danger} sx={{ fontSize: 14, lineHeight: '18px' }}>
                             <Trans>
                                 This will overwrite the existing cloud backup with the local data, this cannot be undo.
                             </Trans>
                         </Typography>
                     :   null}
                 </Box>
-            :   <LoadingStatus minHeight={320} />
+            :   <LoadingStatus sx={{ minHeight: 320 }} />
     }, [
         uploadLoading,
         classes.container,
diff --git a/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx b/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx
index 9c5b3ce73927..883c2f650431 100644
--- a/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx
+++ b/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx
@@ -172,30 +172,30 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
                 <Typography className={classes.account}>{account}</Typography>
                 <Box className={classes.box}>
                     <Icons.Message size={24} />
-                    <Box flex={1}>
+                    <Box sx={{ flex: 1 }}>
                         <Typography className={classes.fileName}>{fileName}</Typography>
                         <LinearProgress variant="determinate" value={progress} sx={{ my: 0.5 }} />
                         <Typography
                             color={theme.palette.maskColor.third}
-                            display="flex"
-                            gap={0.5}
-                            fontSize={12}
-                            fontWeight={700}
-                            lineHeight="16px">
+                            sx={{ display: 'flex', gap: 0.5, fontSize: 12, fontWeight: 700, lineHeight: '16px' }}>
                             {progress === 100 ?
                                 <>
                                     <Typography
                                         component="span"
-                                        fontSize={12}
-                                        fontWeight={700}
-                                        lineHeight="16px"
+                                        sx={{
+                                            fontSize: 12,
+                                            fontWeight: 700,
+                                            lineHeight: '16px',
+                                        }}
                                         color={theme.palette.maskColor.main}>
                                         {formatFileSize(Number(size))}
                                     </Typography>
                                     <Typography
                                         component="span"
-                                        fontSize={12}
-                                        lineHeight="16px"
+                                        sx={{
+                                            fontSize: 12,
+                                            lineHeight: '16px',
+                                        }}
                                         color={theme.palette.maskColor.third}>
                                         {formatDateTime(new Date(Number(uploadedAt)), 'yyyy-MM-dd HH:mm')}
                                     </Typography>
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/AddDeriveWallet/index.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/AddDeriveWallet/index.tsx
index 6940809584d1..8cbaba969e32 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/AddDeriveWallet/index.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/AddDeriveWallet/index.tsx
@@ -208,8 +208,7 @@ export const Component = memo(function AddDeriveWallet() {
                     <Trans>Select Address</Trans>
                 </Typography>
             </Box>
-
-            <Typography className={classes.second} mt={2} mb={3}>
+            <Typography className={classes.second} sx={{ mt: 2, mb: 3 }}>
                 <Trans>Ethereum {HD_PATH_WITHOUT_INDEX_ETHEREUM}</Trans>
             </Typography>
 
@@ -220,7 +219,7 @@ export const Component = memo(function AddDeriveWallet() {
                     className={classes.paginationButton}
                     disabled={page === 0 || confirmLoading}
                     onClick={() => setPage((prev) => prev - 1)}>
-                    <Typography fontWeight={700}>
+                    <Typography sx={{ fontWeight: 700 }}>
                         <Trans>Previous</Trans>
                     </Typography>
                 </SecondaryButton>
@@ -228,7 +227,7 @@ export const Component = memo(function AddDeriveWallet() {
                     className={classes.paginationButton}
                     disabled={confirmLoading}
                     onClick={() => setPage((prev) => prev + 1)}>
-                    <Typography fontWeight={700}>
+                    <Typography sx={{ fontWeight: 700 }}>
                         <Trans>Next</Trans>
                     </Typography>
                 </SecondaryButton>
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/ComponentToPrint.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/ComponentToPrint.tsx
index 96aa197f8e07..9f744731b1cc 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/ComponentToPrint.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/ComponentToPrint.tsx
@@ -95,7 +95,7 @@ export function ComponentToPrint(props: ComponentToPrintProps) {
     return (
         <Box className={classes.container} ref={props.ref}>
             <Box className={classes.card}>
-                <Box flex={1}>
+                <Box sx={{ flex: 1 }}>
                     <Typography className={classes.publicKeyTitle}>
                         <Trans>
                             Address:{' '}
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/index.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/index.tsx
index 98022c1befd2..cb1d0ebe0266 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/index.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/index.tsx
@@ -401,7 +401,7 @@ const CreateMnemonicUI = memo<CreateMnemonicUIProps>(function CreateMnemonicUI({
             <Typography className={classes.tips}>
                 <Trans>Please write down or copy these words and save them in a secure place.</Trans>
             </Typography>
-            <Stack direction="row" justifyContent="flex-end" sx={{ marginBottom: (theme) => theme.spacing(2) }}>
+            <Stack direction="row" sx={{ justifyContent: 'flex-end', marginBottom: (theme) => theme.spacing(2) }}>
                 <Button className={classes.refresh} variant="text" onClick={onRefreshWords}>
                     <Icons.Refresh size={16} />
                     <Trans>Refresh</Trans>
@@ -435,7 +435,6 @@ const CreateMnemonicUI = memo<CreateMnemonicUIProps>(function CreateMnemonicUI({
                     <Trans>Kept safely</Trans>
                 </PrimaryButton>
             </SetupFrameController>
-
             <Box sx={{ position: 'absolute', top: -9999 }}>
                 <ComponentToPrint ref={ref} words={words} address={address ?? ''} />
             </Box>
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/FireflyWallet/index.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/FireflyWallet/index.tsx
index 924ca7ae860c..b016d815e389 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/FireflyWallet/index.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/FireflyWallet/index.tsx
@@ -199,9 +199,11 @@ export const Component = memo(function CreateWalletForm() {
             </SetupFrameController>
             <Dialog
                 open={open}
-                PaperProps={{
-                    elevation: 0,
-                    className: classes.dialog,
+                slotProps={{
+                    paper: {
+                        elevation: 0,
+                        className: classes.dialog,
+                    },
                 }}>
                 <DialogTitle className={classes.dialogTitle}>
                     <Trans>Mask needs the following permissions</Trans>
@@ -212,7 +214,7 @@ export const Component = memo(function CreateWalletForm() {
                     </Typography>
                     <div className={classes.permissions} data-hide-scrollbar>
                         {XOAuthRequestOrigins.map((origin) => (
-                            <Typography key={origin} lineHeight="18px">
+                            <Typography key={origin} sx={{ lineHeight: '18px' }}>
                                 {origin}
                             </Typography>
                         ))}
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/Onboarding/index.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/Onboarding/index.tsx
index 7d53ac5359cd..7fffabe3592c 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/Onboarding/index.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/Onboarding/index.tsx
@@ -89,7 +89,7 @@ export const Component = memo(function Onboarding() {
                 <Typography className={classes.pin}>
                     <Trans>Pin Mask Network to the toolbar for easier access:</Trans>
                 </Typography>
-                <Box mt={2.25} display="flex" alignItems="center">
+                <Box sx={{ mt: 2.25, display: 'flex', alignItems: 'center' }}>
                     <Box className={classes.skeleton} />
                     <Box className={classes.plugins}>
                         <Icons.Plugins size={20} />
@@ -97,7 +97,7 @@ export const Component = memo(function Onboarding() {
                     <Icons.More className={classes.more} size={24} />
                 </Box>
                 <Box className={classes.pinCard}>
-                    <Box display="flex" alignItems="center" columnGap={2.5}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', columnGap: 2.5 }}>
                         <Icons.MaskBlue size={32} />
                         {/* There is no need for i18n here. */}
                         <Typography>Mask Network</Typography>
@@ -111,7 +111,7 @@ export const Component = memo(function Onboarding() {
             </Box>
             <SetupFrameController>
                 <PrimaryButton onClick={onOpenPopupWallet} size="large" width={'228px'}>
-                    <Typography fontWeight={700}>
+                    <Typography sx={{ fontWeight: 700 }}>
                         <Trans>Got it</Trans>
                     </Typography>
                 </PrimaryButton>
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/Recovery/index.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/Recovery/index.tsx
index 1627a3635b70..49cef5fdf46b 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/Recovery/index.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/Recovery/index.tsx
@@ -226,8 +226,7 @@ export const Component = memo(function Recovery() {
                     <Trans>Recover your wallet</Trans>
                 </Typography>
             </Box>
-
-            <Typography className={classes.second} mt={2}>
+            <Typography className={classes.second} sx={{ mt: 2 }}>
                 <Trans>
                     Please enter the correct mnemonic words, private key, or upload the correct keystore file.
                 </Trans>
diff --git a/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/Preview.tsx b/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/Preview.tsx
index 2e86208b1ffe..192557556c61 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/Preview.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/Preview.tsx
@@ -120,25 +120,31 @@ export const Component = memo(function CloudBackupPreview() {
                         </Box>
                         <Box className={classes.content}>
                             <Icons.Message size={48} />
-                            <Box display="flex" flexDirection="column" gap="12px" flex={1} minWidth={0}>
+                            <Box sx={{ display: 'flex', flexDirection: 'column', gap: '12px', flex: 1, minWidth: 0 }}>
                                 <TextOverflowTooltip title={previewInfo.abstract} arrow placement="top">
                                     <Typography
                                         className={classes.text}
-                                        whiteSpace="nowrap"
-                                        textOverflow="ellipsis"
-                                        overflow="hidden">
+                                        sx={{
+                                            whiteSpace: 'nowrap',
+                                            textOverflow: 'ellipsis',
+                                            overflow: 'hidden',
+                                        }}>
                                         {previewInfo.abstract}
                                     </Typography>
                                 </TextOverflowTooltip>
 
-                                <Typography display="flex" columnGap="4px">
-                                    <Typography component="span" fontSize={12} fontWeight={700} lineHeight="16px">
+                                <Typography sx={{ display: 'flex', columnGap: '4px' }}>
+                                    <Typography
+                                        component="span"
+                                        sx={{ fontSize: 12, fontWeight: 700, lineHeight: '16px' }}>
                                         {formatFileSize(Number(previewInfo.size))}
                                     </Typography>
                                     <Typography
                                         component="span"
-                                        fontSize={12}
-                                        lineHeight="16px"
+                                        sx={{
+                                            fontSize: 12,
+                                            lineHeight: '16px',
+                                        }}
                                         color={theme.palette.maskColor.third}>
                                         {formatDateTime(
                                             fromUnixTime(Number(previewInfo.uploadedAt)),
@@ -148,7 +154,7 @@ export const Component = memo(function CloudBackupPreview() {
                                 </Typography>
                             </Box>
 
-                            <Box display="flex" justifyContent="flex-end" flex={1} columnGap={1}>
+                            <Box sx={{ display: 'flex', justifyContent: 'flex-end', flex: 1, columnGap: 1 }}>
                                 <ActionButton
                                     className={classes.button}
                                     startIcon={<Icons.Cloud size={18} />}
@@ -170,7 +176,7 @@ export const Component = memo(function CloudBackupPreview() {
                         </Box>
                     </>
                 :   <Box className={classes.container}>
-                        <Box py={0.5} px={2} mt={3} display="flex" justifyContent="space-between">
+                        <Box sx={{ py: 0.5, px: 2, mt: 3, display: 'flex', justifyContent: 'space-between' }}>
                             <Typography className={classes.text}>{previewInfo.account}</Typography>
                             <Typography
                                 sx={{ cursor: 'pointer' }}
diff --git a/packages/mask/dashboard/pages/SetupPersona/Backup/Local.tsx b/packages/mask/dashboard/pages/SetupPersona/Backup/Local.tsx
index b9649ca8628d..5535b5086909 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Backup/Local.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Backup/Local.tsx
@@ -66,7 +66,7 @@ export const Component = memo(function LocalBackup() {
     return (
         <form>
             {!loading && previewInfo ?
-                <Box display="flex" flexDirection="column">
+                <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                     <PersonasBackupPreview info={previewInfo} />
 
                     <Controller
@@ -108,7 +108,7 @@ export const Component = memo(function LocalBackup() {
                         />
                     :   null}
                 </Box>
-            :   <LoadingStatus minHeight={320} />}
+            :   <LoadingStatus sx={{ minHeight: 320 }} />}
             <OutletPortal>
                 <PrimaryButton
                     startIcon={<Icons.Download />}
diff --git a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/ComponentToPrint.tsx b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/ComponentToPrint.tsx
index 942d2e711799..1344c03ac93f 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/ComponentToPrint.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/ComponentToPrint.tsx
@@ -89,7 +89,7 @@ export function ComponentToPrint(props: ComponentToPrintProps) {
     return (
         <Box className={classes.container} ref={ref}>
             <Box className={classes.card}>
-                <Box flex={1}>
+                <Box sx={{ flex: 1 }}>
                     <Typography className={classes.personaName}>
                         <Trans>Persona: {personaName}</Trans>
                     </Typography>
diff --git a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/Words.tsx b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/Words.tsx
index 0e540ade77d0..c8be9d2f5622 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/Words.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/Words.tsx
@@ -45,7 +45,7 @@ export const Words = memo<WordsProps>(function Words({ words, ...props }) {
         <Box component="ul" className={classes.container}>
             {words.map((item, index) => (
                 <Box className={classes.wordCard} component="li" key={index}>
-                    <Typography className={classes.text} component="span" fontWeight={700}>
+                    <Typography className={classes.text} component="span" sx={{ fontWeight: 700 }}>
                         {item}
                     </Typography>
                 </Box>
diff --git a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx
index fd6fb16386d9..fe389643a404 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx
@@ -153,11 +153,10 @@ export const Component = memo(function SignUpMnemonic() {
             <Typography variant="h1" className={classes.title}>
                 <Trans>Persona Recovery Phrase</Trans>
             </Typography>
-            <Typography className={classes.second} mt={2}>
+            <Typography className={classes.second} sx={{ mt: 2 }}>
                 <Trans>12-word recovery phrase is used to recover your persona data.</Trans>
             </Typography>
-
-            <Stack direction="row" justifyContent="flex-end" sx={{ marginBottom: (theme) => theme.spacing(2) }}>
+            <Stack direction="row" sx={{ justifyContent: 'flex-end', marginBottom: (theme) => theme.spacing(2) }}>
                 <Button className={classes.refresh} variant="text" onClick={refreshCallback}>
                     <Icons.Refresh size={16} />
                     <Trans>Refresh</Trans>
diff --git a/packages/mask/dashboard/pages/SetupPersona/Onboarding/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Onboarding/index.tsx
index 25f315fc990a..1c8a85019b9a 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Onboarding/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Onboarding/index.tsx
@@ -136,7 +136,7 @@ export const Component = memo(function Onboarding() {
                 <Typography className={classes.pin}>
                     <Trans>Pin Mask Network to the toolbar for easier access:</Trans>
                 </Typography>
-                <Box mt={2.25} display="flex" alignItems="center">
+                <Box sx={{ mt: 2.25, display: 'flex', alignItems: 'center' }}>
                     <Box className={classes.skeleton} />
                     <Box className={classes.plugins}>
                         <Icons.Plugins size={20} />
@@ -144,7 +144,7 @@ export const Component = memo(function Onboarding() {
                     <Icons.More className={classes.more} size={24} />
                 </Box>
                 <Box className={classes.pinCard}>
-                    <Box display="flex" alignItems="center" columnGap={2.5}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', columnGap: 2.5 }}>
                         <Icons.MaskBlue size={32} />
                         {/* There is no need for i18n here. */}
                         <Typography>Mask Network</Typography>
diff --git a/packages/mask/dashboard/pages/SetupPersona/PermissionOnboarding/index.tsx b/packages/mask/dashboard/pages/SetupPersona/PermissionOnboarding/index.tsx
index 51bcefe41c64..07ba25c6557c 100644
--- a/packages/mask/dashboard/pages/SetupPersona/PermissionOnboarding/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/PermissionOnboarding/index.tsx
@@ -112,7 +112,7 @@ export const Component = memo(function Onboarding() {
                 <Typography className={classes.pin}>
                     <Trans>Pin Mask Network to the toolbar for easier access:</Trans>
                 </Typography>
-                <Box mt={2.25} display="flex" alignItems="center">
+                <Box sx={{ mt: 2.25, display: 'flex', alignItems: 'center' }}>
                     <Box className={classes.skeleton} />
                     <Box className={classes.plugins}>
                         <Icons.Plugins size={20} />
@@ -120,7 +120,7 @@ export const Component = memo(function Onboarding() {
                     <Icons.More className={classes.more} size={24} />
                 </Box>
                 <Box className={classes.pinCard}>
-                    <Box display="flex" alignItems="center" columnGap={2.5}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', columnGap: 2.5 }}>
                         <Icons.MaskBlue size={32} />
                         {/* There is no need for i18n here. */}
                         <Typography>Mask Network</Typography>
diff --git a/packages/mask/dashboard/pages/SetupPersona/Permissions/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Permissions/index.tsx
index 1468a34ce70d..5bf1c19fac25 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Permissions/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Permissions/index.tsx
@@ -104,7 +104,7 @@ export const Component = memo(function Permission() {
                     order to continue working on x.com.
                 </Typography>
 
-                <Typography className={classes.h2} variant="h2" mt="24px">
+                <Typography className={classes.h2} variant="h2" sx={{ mt: '24px' }}>
                     Please grant us permission for these websites.
                 </Typography>
 
diff --git a/packages/mask/dashboard/pages/SetupPersona/Recovery/Local.tsx b/packages/mask/dashboard/pages/SetupPersona/Recovery/Local.tsx
index a8a033441461..37bd29822259 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Recovery/Local.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Recovery/Local.tsx
@@ -157,7 +157,7 @@ export const Component = memo(function RecoveryLocalBackup() {
     }, [loading, !file, restoreStatus, summary, !password])
 
     return (
-        <Box width="100%">
+        <Box sx={{ width: '100%' }}>
             {restoreStatus === RestoreStatus.Verified ? null : (
                 <UploadDropArea onSelectFile={handleSetFile} omitSizeLimit accept=".bin,.json" />
             )}
@@ -178,7 +178,7 @@ export const Component = memo(function RecoveryLocalBackup() {
                 </FileFrame>
             :   null}
             {restoreStatus === RestoreStatus.Decrypting ?
-                <Box mt={4}>
+                <Box sx={{ mt: 4 }}>
                     <PasswordField
                         fullWidth
                         placeholder={t`Backup password`}
@@ -196,7 +196,7 @@ export const Component = memo(function RecoveryLocalBackup() {
             : restoreStatus === RestoreStatus.Verified && summary ?
                 <>
                     <AccountStatusBar label={file?.name} actionLabel={<Trans>Reselect</Trans>} onAction={reset} />
-                    <BackupPreview mt={2} info={summary} />
+                    <BackupPreview sx={{ mt: 2 }} info={summary} />
                 </>
             :   null}
             <OutletPortal>
diff --git a/packages/mask/dashboard/pages/SetupPersona/Recovery/PrivateKey.tsx b/packages/mask/dashboard/pages/SetupPersona/Recovery/PrivateKey.tsx
index f058442452a0..44ed8a1c5515 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Recovery/PrivateKey.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Recovery/PrivateKey.tsx
@@ -75,7 +75,7 @@ export const Component = memo(function RecoveryPrivateKey() {
     )
 
     return (
-        <Box width="100%">
+        <Box sx={{ width: '100%' }}>
             <Controller
                 control={control}
                 render={({ field }) => (
diff --git a/packages/mask/dashboard/pages/SetupPersona/SignUp/index.tsx b/packages/mask/dashboard/pages/SetupPersona/SignUp/index.tsx
index 5ee8e1083915..901babd01510 100644
--- a/packages/mask/dashboard/pages/SetupPersona/SignUp/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/SignUp/index.tsx
@@ -95,10 +95,10 @@ export const Component = memo(function SignUp() {
             <Typography variant="h1" className={classes.title}>
                 <Trans>Create New Mask Identity</Trans>
             </Typography>
-            <Typography className={classes.second} mt={2}>
+            <Typography className={classes.second} sx={{ mt: 2 }}>
                 <Trans>Create your persona to get started</Trans>
             </Typography>
-            <Typography className={classes.second} mt={3} mb={2}>
+            <Typography className={classes.second} sx={{ mt: 3, mb: 2 }}>
                 <Trans>Persona Name</Trans>
             </Typography>
             <TextField
@@ -109,8 +109,10 @@ export const Component = memo(function SignUp() {
                 autoFocus
                 placeholder={t`Example: Alice`}
                 required
-                InputProps={{ disableUnderline: true, size: 'large' }}
-                inputProps={{ maxLength: 24 }}
+                slotProps={{
+                    input: { disableUnderline: true, size: 'large' },
+                    htmlInput: { maxLength: 24 },
+                }}
                 error={!!error}
                 helperText={error}
             />
diff --git a/packages/mask/dashboard/pages/SetupPersona/Welcome/Article.tsx b/packages/mask/dashboard/pages/SetupPersona/Welcome/Article.tsx
index f26e70d93d6b..c076ee40887a 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Welcome/Article.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Welcome/Article.tsx
@@ -60,7 +60,7 @@ function Permissions() {
 
     return (
         <>
-            <Typography className={classes.h2} variant="h2" mt="24px">
+            <Typography className={classes.h2} variant="h2" sx={{ mt: '24px' }}>
                 Please grant us permission for these websites.
             </Typography>
 
diff --git a/packages/mask/dashboard/pages/SignUp/steps/PersonaNameUI.tsx b/packages/mask/dashboard/pages/SignUp/steps/PersonaNameUI.tsx
index c0faa1d4cae3..ec882af1f5e8 100644
--- a/packages/mask/dashboard/pages/SignUp/steps/PersonaNameUI.tsx
+++ b/packages/mask/dashboard/pages/SignUp/steps/PersonaNameUI.tsx
@@ -44,11 +44,10 @@ export function PersonaNameUI({ onNext, error, loading }: PersonaNameUIProps) {
                     <Trans>Set Your Persona Name</Trans>
                 </Typography>
             </Box>
-            <Typography className={classes.second} mt={2}>
+            <Typography className={classes.second} sx={{ mt: 2 }}>
                 <Trans>Set your persona name with maximum length of 24 characters</Trans>
             </Typography>
-
-            <Typography className={classes.second} mt={3} mb={2}>
+            <Typography className={classes.second} sx={{ mt: 3, mb: 2 }}>
                 <Trans>Persona Name</Trans>
             </Typography>
             <TextField
@@ -57,12 +56,13 @@ export function PersonaNameUI({ onNext, error, loading }: PersonaNameUIProps) {
                 }}
                 required
                 autoFocus
-                InputProps={{ disableUnderline: true }}
-                inputProps={{ maxLength: 24 }}
+                slotProps={{
+                    input: { disableUnderline: true },
+                    htmlInput: { maxLength: 24 },
+                }}
                 error={!!error}
                 helperText={error}
             />
-
             <SetupFrameController>
                 <div className={classes.buttonGroup}>
                     <PrimaryButton
diff --git a/packages/mask/package.json b/packages/mask/package.json
index faf375f2f692..e412fc91bd7a 100644
--- a/packages/mask/package.json
+++ b/packages/mask/package.json
@@ -160,6 +160,6 @@
     "webpack-target-webextension": "^2.1.3"
   },
   "peerDependencies": {
-    "tss-react": "^4.9.0"
+    "tss-react": "^4.9.21"
   }
 }
diff --git a/packages/mask/popups/Popup.tsx b/packages/mask/popups/Popup.tsx
index bfb8ba472f50..3f392be33004 100644
--- a/packages/mask/popups/Popup.tsx
+++ b/packages/mask/popups/Popup.tsx
@@ -38,7 +38,7 @@ const personaInitialState = {
 }
 
 const pending = (
-    <Box height="100vh" display="flex">
+    <Box sx={{ height: '100vh', display: 'flex' }}>
         <LoadingPlaceholder />
     </Box>
 )
diff --git a/packages/mask/popups/components/AddContactInputPanel/index.tsx b/packages/mask/popups/components/AddContactInputPanel/index.tsx
index 9a8a09852d07..8f34007ecb71 100644
--- a/packages/mask/popups/components/AddContactInputPanel/index.tsx
+++ b/packages/mask/popups/components/AddContactInputPanel/index.tsx
@@ -109,7 +109,10 @@ const AddContactInputPanel = memo(function AddContactInputPanel({ isManage, auto
     const shouldShowAddress = !!address && address !== userInput
 
     return (
-        <Box padding={2} {...props} className={cx(classes.receiverPanel, props.className)}>
+        <Box
+            {...props}
+            className={cx(classes.receiverPanel, props.className)}
+            sx={[{ padding: 2 }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}>
             {isManage ? null : (
                 <Typography className={classes.toText}>
                     <Trans>To</Trans>
@@ -137,16 +140,16 @@ const AddContactInputPanel = memo(function AddContactInputPanel({ isManage, auto
                     }}
                 />
                 {inputWarningMessage && !addressValidationMessage ?
-                    <Typography className={classes.warning} mt={1}>
+                    <Typography className={classes.warning} sx={{ mt: 1 }}>
                         {inputWarningMessage}
                     </Typography>
                 :   null}
                 {addressValidationMessage ?
-                    <Typography className={classes.validation} mt={1}>
+                    <Typography className={classes.validation} sx={{ mt: 1 }}>
                         {addressValidationMessage}
                     </Typography>
                 : shouldShowAddress ?
-                    <Typography className={classes.receiver} mt={1}>
+                    <Typography className={classes.receiver} sx={{ mt: 1 }}>
                         {address}
                         <Icons.LinkOut
                             size={18}
diff --git a/packages/mask/popups/components/ConnectedWallet/index.tsx b/packages/mask/popups/components/ConnectedWallet/index.tsx
index ec410f8fb48b..086ada8d5dfc 100644
--- a/packages/mask/popups/components/ConnectedWallet/index.tsx
+++ b/packages/mask/popups/components/ConnectedWallet/index.tsx
@@ -1,9 +1,9 @@
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { FormattedAddress, ProgressiveText } from '@masknet/shared'
-import { NetworkPluginID, PopupModalRoutes } from '@masknet/shared-base'
+import { type NetworkPluginID, PopupModalRoutes } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
-import { useChainContext, useWallets, useWeb3State } from '@masknet/web3-hooks-base'
+import { useChainContext, useWallets } from '@masknet/web3-hooks-base'
 import { EVMExplorerResolver } from '@masknet/web3-providers'
 import { formatDomainName, formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { Box, Link, Typography, useTheme } from '@mui/material'
@@ -75,14 +75,13 @@ export const ConnectedWallet = memo(function ConnectedWallet() {
     const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
     const localWallets = useWallets()
     const modalNavigate = useModalNavigate()
-    const { NameService } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
 
     return (
         <Box className={classes.walletList}>
             {localWallets.map((wallet, index) => {
                 return (
                     <Box className={classes.wallet} key={index}>
-                        <Box display="flex" alignItems="center">
+                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                             <WalletAvatar size={24} className={classes.walletIcon} address={wallet.address} />
                             <Typography className={classes.walletInfo} component="div">
                                 <ProgressiveText
@@ -115,7 +114,7 @@ export const ConnectedWallet = memo(function ConnectedWallet() {
             })}
             <Box className={classes.connect} onClick={() => modalNavigate(PopupModalRoutes.SelectProvider)}>
                 <Icons.Connect size={16} />
-                <Typography fontSize={12} fontWeight={700} lineHeight="16px">
+                <Typography sx={{ fontSize: 12, fontWeight: 700, lineHeight: '16px' }}>
                     <Trans>Connect</Trans>
                 </Typography>
             </Box>
diff --git a/packages/mask/popups/components/GasSettingMenu/index.tsx b/packages/mask/popups/components/GasSettingMenu/index.tsx
index 7bb3d348a25c..40929b6fd04c 100644
--- a/packages/mask/popups/components/GasSettingMenu/index.tsx
+++ b/packages/mask/popups/components/GasSettingMenu/index.tsx
@@ -112,8 +112,8 @@ export const GasSettingMenu = memo<GasSettingMenuProps>(function GasSettingMenu(
     }, [gasConfig, gasLimit])
 
     return (
-        <Box display="flex" alignItems="center">
-            <Typography fontWeight={700} fontSize={14} mr={0.5}>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography sx={{ fontWeight: 700, fontSize: 14, mr: 0.5 }}>
                 <FormattedBalance
                     value={totalGas}
                     decimals={token?.decimals}
@@ -147,9 +147,7 @@ export const GasSettingMenu = memo<GasSettingMenuProps>(function GasSettingMenu(
                         columnGap: 0.5,
                     }}
                     onClick={openMenu}>
-                    <Typography fontWeight={700} lineHeight="18px" fontSize={14}>
-                        {gasOptionName}
-                    </Typography>
+                    <Typography sx={{ fontWeight: 700, lineHeight: '18px', fontSize: 14 }}>{gasOptionName}</Typography>
                     <Icons.Candle size={12} />
                 </Button>
             )}
diff --git a/packages/mask/popups/components/PasswordField/index.tsx b/packages/mask/popups/components/PasswordField/index.tsx
index 81628219751b..43aa18d23d64 100644
--- a/packages/mask/popups/components/PasswordField/index.tsx
+++ b/packages/mask/popups/components/PasswordField/index.tsx
@@ -1,12 +1,12 @@
 import { memo, useState } from 'react'
-import { IconButton, InputAdornment, type TextFieldProps } from '@mui/material'
-import { StyledInput } from '../StyledInput/index.js'
+import { IconButton, InputAdornment } from '@mui/material'
+import { StyledInput, type StyledInputProps } from '../StyledInput/index.js'
 import { Icons } from '@masknet/icons'
 
 export const PasswordField = memo(function PasswordField({
     show = true,
     ...rest
-}: TextFieldProps & { show?: boolean }) {
+}: StyledInputProps & { show?: boolean }) {
     const [showPassword, setShowPassword] = useState(false)
     return (
         <StyledInput
diff --git a/packages/mask/popups/components/PrivateKeyDisplay/index.tsx b/packages/mask/popups/components/PrivateKeyDisplay/index.tsx
index afb544ea8792..d8026b4c7462 100644
--- a/packages/mask/popups/components/PrivateKeyDisplay/index.tsx
+++ b/packages/mask/popups/components/PrivateKeyDisplay/index.tsx
@@ -122,11 +122,11 @@ export const PrivateKeyDisplay = memo<PrimaryKeyDisplayProps>(function PrivateKe
         <Box>
             <Box className={classes.root}>
                 <Icons.MaskBlue size={24} />
-                <Box ml={1} flex={1}>
+                <Box sx={{ ml: 1, flex: 1 }}>
                     <Typography className={classes.name}>{wallet.name}</Typography>
                     <Typography className={classes.address}>{formatEthereumAddress(wallet.address, 4)}</Typography>
                 </Box>
-                <Box display="flex" height="32px" alignItems="flex-end">
+                <Box sx={{ display: 'flex', height: '32px', alignItems: 'flex-end' }}>
                     <WalletBalance className={classes.balance} skeletonWidth={60} account={wallet.address} />
                 </Box>
                 {hiddenArrow ? null : (
diff --git a/packages/mask/popups/components/SignRequestInfo/index.tsx b/packages/mask/popups/components/SignRequestInfo/index.tsx
index a8a0794dcfa9..f32ee9087ab4 100644
--- a/packages/mask/popups/components/SignRequestInfo/index.tsx
+++ b/packages/mask/popups/components/SignRequestInfo/index.tsx
@@ -90,7 +90,7 @@ export const SignRequestInfo = memo<SignRequestInfoProps>(({ message, rawMessage
             </Typography>
             {origin ?
                 <Box className={classes.source}>
-                    <Typography fontSize={16} fontWeight={700}>
+                    <Typography sx={{ fontSize: 16, fontWeight: 700 }}>
                         <Trans>Request Source</Trans>
                     </Typography>
                     <Typography
diff --git a/packages/mask/popups/components/SocialAccounts/index.tsx b/packages/mask/popups/components/SocialAccounts/index.tsx
index 2f37d51f5c89..33f1f5bb30e1 100644
--- a/packages/mask/popups/components/SocialAccounts/index.tsx
+++ b/packages/mask/popups/components/SocialAccounts/index.tsx
@@ -103,7 +103,7 @@ export const SocialAccounts = memo<SocialAccountsProps>(function SocialAccounts(
             ))}
             <Box className={classes.connect} onClick={() => modalNavigate(PopupModalRoutes.ConnectSocialAccount)}>
                 <Icons.Connect size={16} />
-                <Typography fontSize={12} fontWeight={700} lineHeight="18px">
+                <Typography sx={{ fontSize: 12, fontWeight: 700, lineHeight: '18px' }}>
                     <Trans>Connect</Trans>
                 </Typography>
             </Box>
diff --git a/packages/mask/popups/components/TokenPicker/TokenItem.tsx b/packages/mask/popups/components/TokenPicker/TokenItem.tsx
index ab255cf67cc9..7f947989f7b3 100644
--- a/packages/mask/popups/components/TokenPicker/TokenItem.tsx
+++ b/packages/mask/popups/components/TokenPicker/TokenItem.tsx
@@ -137,7 +137,7 @@ export const TokenItem = memo(function TokenItem({
             </ListItemIcon>
             <ListItemText
                 className={classes.listText}
-                secondaryTypographyProps={{ component: 'div' }}
+                slotProps={{ secondary: { component: 'div' } }}
                 secondary={
                     <>
                         <Typography className={classes.name}>
diff --git a/packages/mask/popups/components/TokenPicker/index.tsx b/packages/mask/popups/components/TokenPicker/index.tsx
index 5600a3c57be2..2522c84472e7 100644
--- a/packages/mask/popups/components/TokenPicker/index.tsx
+++ b/packages/mask/popups/components/TokenPicker/index.tsx
@@ -219,7 +219,7 @@ export const TokenPicker = memo(function TokenPicker({
                     autoFocus
                     fullWidth
                     wrapperProps={{
-                        padding: '2px',
+                        sx: { padding: '2px' },
                     }}
                     InputProps={{
                         style: { height: 40 },
@@ -232,7 +232,7 @@ export const TokenPicker = memo(function TokenPicker({
                     }}
                 />
                 {keyword && !filteredAssets.length ?
-                    <EmptyStatus flexGrow={1} alignItems="center">
+                    <EmptyStatus sx={{ flexGrow: 1, alignItems: 'center' }}>
                         <Trans>No matched tokens</Trans>
                     </EmptyStatus>
                 :   <FixedSizeList
diff --git a/packages/mask/popups/components/TransactionPreview/index.tsx b/packages/mask/popups/components/TransactionPreview/index.tsx
index 368265c589cb..ffd721da9658 100644
--- a/packages/mask/popups/components/TransactionPreview/index.tsx
+++ b/packages/mask/popups/components/TransactionPreview/index.tsx
@@ -169,25 +169,22 @@ export const TransactionPreview = memo<TransactionPreviewProps>(function Transac
     return (
         <Box>
             <Box className={classes.info}>
-                <Box display="flex" justifyContent="space-between">
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                     <Typography className={classes.title}>{title}</Typography>
                     {receiver ?
                         <Typography className={classes.title}>{receiver}</Typography>
                     :   null}
                 </Box>
                 {to ?
-                    <Box mt={2} display="flex" columnGap={0.5} alignItems="center">
+                    <Box sx={{ mt: 2, display: 'flex', columnGap: 0.5, alignItems: 'center' }}>
                         <Trans>
                             <Typography className={classes.addressTitle}>To</Typography>:{' '}
-                            <Typography fontSize={11} fontWeight={700} lineHeight="16px">
-                                {to}
-                            </Typography>
+                            <Typography sx={{ fontSize: 11, fontWeight: 700, lineHeight: '16px' }}>{to}</Typography>
                         </Trans>
                     </Box>
                 :   null}
             </Box>
-
-            <Box display="flex" justifyContent="space-between" alignItems="center" mt={3}>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 3 }}>
                 <Typography component="div" className={classes.amount}>
                     {tokenId ?
                         <Typography>Token #{tokenId}</Typography>
@@ -222,7 +219,7 @@ export const TransactionPreview = memo<TransactionPreviewProps>(function Transac
                     </Typography>
                 :   null}
             </Box>
-            <Box mt={3.75} display="flex" justifyContent="space-between" alignItems="center">
+            <Box sx={{ mt: 3.75, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                 <Typography className={classes.gasFeeTitle}>
                     <Trans>Gas Fee</Trans>
                 </Typography>
diff --git a/packages/mask/popups/components/UnlockERC20Token/index.tsx b/packages/mask/popups/components/UnlockERC20Token/index.tsx
index c071e51deeb1..c8834f987143 100644
--- a/packages/mask/popups/components/UnlockERC20Token/index.tsx
+++ b/packages/mask/popups/components/UnlockERC20Token/index.tsx
@@ -178,12 +178,12 @@ export const UnlockERC20Token = memo<UnlockERC20TokenProps>(function UnlockERC20
             </Typography>
             <Box className={classes.tokenInfo}>
                 <TokenIcon address={token?.address ?? ''} chainId={chainId} name={token?.name} size={24} disableBadge />
-                <Box width="262px" mr="18px" ml={1}>
+                <Box sx={{ width: '262px', mr: '18px', ml: 1 }}>
                     <Typography className={classes.name}>{token?.symbol}</Typography>
                     <Typography className={classes.address}>{token?.address}</Typography>
                 </Box>
                 {token?.address ?
-                    <Box display="flex" columnGap={1} alignItems="center">
+                    <Box sx={{ display: 'flex', columnGap: 1, alignItems: 'center' }}>
                         <CopyButton text={token.address} size={16} />
                         <Link
                             href={EVMExplorerResolver.addressLink(chainId, token.address)}
@@ -204,31 +204,35 @@ export const UnlockERC20Token = memo<UnlockERC20TokenProps>(function UnlockERC20
                         setValue(e.target.value)
                         handleChange(rightShift(e.target.value, token?.decimals).toString())
                     }}
-                    InputProps={{
-                        endAdornment: (
-                            <Button
-                                variant="text"
-                                className={classes.max}
-                                onClick={() => {
-                                    setValue(leftShift(balance, token?.decimals).toString())
-                                    handleChange(balance)
-                                }}>
-                                <Trans>Max</Trans>
-                            </Button>
-                        ),
-                        disableUnderline: true,
-                        className: classes.input,
-                        type: 'number',
-                        inputProps: {
-                            pattern: NUMERIC_INPUT_REGEXP_PATTERN,
-                            min: 0,
+                    slotProps={{
+                        input: {
+                            endAdornment: (
+                                <Button
+                                    variant="text"
+                                    className={classes.max}
+                                    onClick={() => {
+                                        setValue(leftShift(balance, token?.decimals).toString())
+                                        handleChange(balance)
+                                    }}>
+                                    <Trans>Max</Trans>
+                                </Button>
+                            ),
+                            disableUnderline: true,
+                            className: classes.input,
+                            type: 'number',
+                            inputProps: {
+                                pattern: NUMERIC_INPUT_REGEXP_PATTERN,
+                                min: 0,
+                            },
                         },
                     }}
                 />
                 {value ?
                     <Typography
-                        fontSize={12}
-                        fontWeight={700}
+                        sx={{
+                            fontSize: 12,
+                            fontWeight: 700,
+                        }}
                         color={
                             isGreaterThan(value, leftShift(balance, token?.decimals)) ?
                                 theme.palette.maskColor.danger
@@ -260,8 +264,7 @@ export const UnlockERC20Token = memo<UnlockERC20TokenProps>(function UnlockERC20
                     </Typography>
                 :   null}
             </Box>
-
-            <Box mt={3.75} display="flex" justifyContent="space-between" alignItems="center">
+            <Box sx={{ mt: 3.75, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                 <Typography className={classes.gasFeeTitle}>
                     <Trans>Gas Fee</Trans>
                 </Typography>
diff --git a/packages/mask/popups/components/WalletBalance/index.tsx b/packages/mask/popups/components/WalletBalance/index.tsx
index 486704bcee82..9cf545bd7be4 100644
--- a/packages/mask/popups/components/WalletBalance/index.tsx
+++ b/packages/mask/popups/components/WalletBalance/index.tsx
@@ -34,9 +34,9 @@ export const WalletBalance = memo(function WalletBalance({
     }
 
     return (
-        <Typography display="flex" {...props}>
+        <Typography {...props} sx={[{ display: 'flex' }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}>
             {formatBalance(balance, nativeToken.decimals, { significant: 0, isPrecise: false, isFixed: true })}
-            <Box component="span" ml={0.5}>
+            <Box component="span" sx={{ ml: 0.5 }}>
                 {nativeToken.symbol}
             </Box>
         </Typography>
diff --git a/packages/mask/popups/components/WalletItem/index.tsx b/packages/mask/popups/components/WalletItem/index.tsx
index cd904cae108f..2594d28f9ced 100644
--- a/packages/mask/popups/components/WalletItem/index.tsx
+++ b/packages/mask/popups/components/WalletItem/index.tsx
@@ -128,7 +128,7 @@ export const WalletItem = memo<WalletItemProps>(function WalletItem({
             {...rest}>
             <WalletAvatar address={wallet.address} size={24} />
             <Box className={classes.text}>
-                <Box width={180} overflow="auto">
+                <Box sx={{ width: 180, overflow: 'auto' }}>
                     <Typography className={classes.mainLine} component="div">
                         <Typography className={classes.name}>{walletName}</Typography>
                         {wallet.source === ImportSource.LocalGenerated || hiddenTag ? null : (
diff --git a/packages/mask/popups/components/WalletSettingList/index.tsx b/packages/mask/popups/components/WalletSettingList/index.tsx
index 74f84bf1e1c8..8ad8b4ad8f3b 100644
--- a/packages/mask/popups/components/WalletSettingList/index.tsx
+++ b/packages/mask/popups/components/WalletSettingList/index.tsx
@@ -10,9 +10,9 @@ import { Trans } from '@lingui/react/macro'
 export const WalletList = memo(function WalletList() {
     const theme = useTheme()
     return (
-        <Box flex={1} display="flex" justifyContent="center" alignItems="center" flexDirection="column">
+        <Box sx={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
             <Icons.EmptySimple size={36} />
-            <Typography fontSize={14} color={theme.palette.maskColor.second} mt={1.5} textAlign="center">
+            <Typography color={theme.palette.maskColor.second} sx={{ fontSize: 14, mt: 1.5, textAlign: 'center' }}>
                 <Trans>
                     No associated wallet.{' '}
                     <RouterLink
diff --git a/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx b/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx
index 27376b0e36f4..7f3323a19732 100644
--- a/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx
@@ -106,13 +106,15 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
             {...props}>
             <Box
                 component="form"
-                display="flex"
-                justifyContent="center"
-                flexDirection="column"
-                alignItems="center"
-                rowGap={2}
-                py={1}
-                px={0.25}>
+                sx={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    rowGap: 2,
+                    py: 1,
+                    px: 0.25,
+                }}>
                 <Controller
                     control={control}
                     render={({ field }) => {
@@ -182,7 +184,7 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
                         />
                     )}
                 />
-                <Typography fontSize={12} color={theme.palette.maskColor.second}>
+                <Typography sx={{ fontSize: 12 }} color={theme.palette.maskColor.second}>
                     <Trans>
                         Backup password must be 8-20 characters, including uppercase, lowercase, special characters and
                         numbers.
diff --git a/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx b/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
index 2aec279e84a2..92805e18c7c2 100644
--- a/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
@@ -78,13 +78,15 @@ function ChangePaymentPasswordDrawer({
     return (
         <BottomDrawer {...rest} classes={{ title: classes.title }}>
             <Typography
-                fontWeight={700}
-                textAlign="center"
                 color={theme.palette.maskColor.third}
-                sx={{ marginTop: '12px' }}>
+                sx={{
+                    fontWeight: 700,
+                    textAlign: 'center',
+                    marginTop: '12px',
+                }}>
                 <Trans>At least 6 characters</Trans>
             </Typography>
-            <Box display="flex" justifyContent="center" flexDirection="column">
+            <Box sx={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
                 <PasswordField
                     sx={{ mt: 2 }}
                     fullWidth
@@ -126,7 +128,7 @@ function ChangePaymentPasswordDrawer({
                     InputProps={inputProps}
                 />
             </Box>
-            <Typography fontSize={14} color={theme.palette.maskColor.danger} mt={1.5} height={32}>
+            <Typography color={theme.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1.5, height: 32 }}>
                 {passwordTooShort || passwordNotMatch || originalPasswordWrong}
             </Typography>
             <ActionButton loading={loading} disabled={loading} onClick={handleClick} sx={{ marginTop: '16px' }}>
diff --git a/packages/mask/popups/modals/ChooseToken/index.tsx b/packages/mask/popups/modals/ChooseToken/index.tsx
index 799d7018840b..14f0eda35355 100644
--- a/packages/mask/popups/modals/ChooseToken/index.tsx
+++ b/packages/mask/popups/modals/ChooseToken/index.tsx
@@ -15,8 +15,10 @@ const ChooseTokenDrawer = memo(function ChooseTokenDrawer({ title, open, onClose
                 key={`${others.chainId}.${others.address}`}
                 {...others}
                 defaultChainId={others.chainId}
-                mt={2}
-                height={455}
+                sx={{
+                    mt: 2,
+                    height: 455,
+                }}
             />
         </BottomDrawer>
     )
diff --git a/packages/mask/popups/modals/ConnectProvider/index.tsx b/packages/mask/popups/modals/ConnectProvider/index.tsx
index 5938c2f5506f..59c65fc126ac 100644
--- a/packages/mask/popups/modals/ConnectProvider/index.tsx
+++ b/packages/mask/popups/modals/ConnectProvider/index.tsx
@@ -148,7 +148,15 @@ export const ConnectProviderModal = memo<ActionModalBaseProps>(function ConnectP
                     <Trans>Connecting your {providerType} wallet</Trans>
                 :   <Trans>Not found your {providerType} wallet</Trans>}
             </Typography>
-            <Box mt={4} p={1.5} display="flex" justifyContent="center" flexDirection="column" alignItems="center">
+            <Box
+                sx={{
+                    mt: 4,
+                    p: 1.5,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                }}>
                 {provider?.icon ?
                     <Box className={classes.icon}>
                         <img src={provider.icon} style={{ width: 32, height: 32 }} />
@@ -161,7 +169,7 @@ export const ConnectProviderModal = memo<ActionModalBaseProps>(function ConnectP
                 :   null}
                 {providerExist ? null : (
                     <>
-                        <Typography fontSize={14} lineHeight="18px" my={1.25}>
+                        <Typography sx={{ fontSize: 14, lineHeight: '18px', my: 1.25 }}>
                             <Trans>Please install your metamask wallet and set up your first wallet.</Trans>
                         </Typography>
                         <Button variant="roundedContained" size="small" onClick={handleChooseAnotherWallet}>
diff --git a/packages/mask/popups/modals/GasSettingModal/GasSettingDialog.tsx b/packages/mask/popups/modals/GasSettingModal/GasSettingDialog.tsx
index 8fe06658fcf9..d4cee814eec8 100644
--- a/packages/mask/popups/modals/GasSettingModal/GasSettingDialog.tsx
+++ b/packages/mask/popups/modals/GasSettingModal/GasSettingDialog.tsx
@@ -246,8 +246,10 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
                     disabled
                     type="number"
                     fullWidth
-                    InputProps={{
-                        disableUnderline: true,
+                    slotProps={{
+                        input: {
+                            disableUnderline: true,
+                        },
                     }}
                 />
             </Box>
@@ -266,14 +268,22 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
                     }}
                     fullWidth
                     type="number"
-                    InputProps={{
-                        disableUnderline: true,
-                        inputProps: { min: minGas, max: maxGas },
+                    slotProps={{
+                        input: {
+                            disableUnderline: true,
+                            inputProps: { min: minGas, max: maxGas },
+                        },
                     }}
                 />
             </Box>
     return (
-        <Box display="flex" flexDirection="column" rowGap={1.5} mt={1.5}>
+        <Box
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                rowGap: 1.5,
+                mt: 1.5,
+            }}>
             <Typography className={classes.preview}>
                 {formatBalance(totalGas, token?.decimals, {
                     significant: 4,
@@ -322,7 +332,7 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
             {isSupport1559 ?
                 <>
                     {nonceOrGasLimitInput}
-                    <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" columnGap={2}>
+                    <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', columnGap: 2 }}>
                         <Box>
                             <Typography className={classes.title}>
                                 <Trans>Max Priority Fee</Trans>
@@ -356,14 +366,16 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
                                     )
                                 }}
                                 type="number"
-                                InputProps={{
-                                    endAdornment: (
-                                        <Typography className={classes.unit}>
-                                            <Trans>Gwei</Trans>
-                                        </Typography>
-                                    ),
-                                    disableUnderline: true,
-                                    inputProps: { min: 1 },
+                                slotProps={{
+                                    input: {
+                                        endAdornment: (
+                                            <Typography className={classes.unit}>
+                                                <Trans>Gwei</Trans>
+                                            </Typography>
+                                        ),
+                                        disableUnderline: true,
+                                        inputProps: { min: 1 },
+                                    },
                                 }}
                             />
                         </Box>
@@ -394,20 +406,22 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
                                 }}
                                 value={maxFeePerGas}
                                 type="number"
-                                InputProps={{
-                                    endAdornment: (
-                                        <Typography className={classes.unit}>
-                                            <Trans>Gwei</Trans>
-                                        </Typography>
-                                    ),
-                                    disableUnderline: true,
-                                    inputProps: { min: 0 },
+                                slotProps={{
+                                    input: {
+                                        endAdornment: (
+                                            <Typography className={classes.unit}>
+                                                <Trans>Gwei</Trans>
+                                            </Typography>
+                                        ),
+                                        disableUnderline: true,
+                                        inputProps: { min: 0 },
+                                    },
                                 }}
                             />
                         </Box>
                     </Box>
                 </>
-            :   <Box display="grid" gridTemplateColumns="repeat(2, 1fr)" columnGap={2}>
+            :   <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', columnGap: 2 }}>
                     <Box>
                         <Typography className={classes.title}>
                             <Trans>Gas Price</Trans>
@@ -433,14 +447,16 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
                                 setGasPrice(e.target.value || '1')
                             }}
                             type="number"
-                            InputProps={{
-                                endAdornment: (
-                                    <Typography className={classes.unit}>
-                                        <Trans>Gwei</Trans>
-                                    </Typography>
-                                ),
-                                disableUnderline: true,
-                                inputProps: { min: 0 },
+                            slotProps={{
+                                input: {
+                                    endAdornment: (
+                                        <Typography className={classes.unit}>
+                                            <Trans>Gwei</Trans>
+                                        </Typography>
+                                    ),
+                                    disableUnderline: true,
+                                    inputProps: { min: 0 },
+                                },
                             }}
                         />
                     </Box>
diff --git a/packages/mask/popups/modals/PersonaRenameModal/index.tsx b/packages/mask/popups/modals/PersonaRenameModal/index.tsx
index 73f6d223c0f0..91ee5129621d 100644
--- a/packages/mask/popups/modals/PersonaRenameModal/index.tsx
+++ b/packages/mask/popups/modals/PersonaRenameModal/index.tsx
@@ -42,10 +42,10 @@ export const PersonaRenameModal = memo<ActionModalBaseProps>(function PersonaRen
                     <Trans>Confirm</Trans>
                 </ActionButton>
             }>
-            <Typography fontWeight={700} textAlign="center" color={theme.palette.maskColor.third}>
+            <Typography sx={{ fontWeight: 700, textAlign: 'center' }} color={theme.palette.maskColor.third}>
                 <Trans>Persona name must between 1 to 24 characters.</Trans>
             </Typography>
-            <Box display="flex" justifyContent="center" mx={0.5} mb={0.5}>
+            <Box sx={{ display: 'flex', justifyContent: 'center', mx: 0.5, mb: 0.5 }}>
                 <TextField
                     sx={{ mt: 4 }}
                     fullWidth
@@ -59,19 +59,21 @@ export const PersonaRenameModal = memo<ActionModalBaseProps>(function PersonaRen
                         if (error) setError('')
                         setName(e.target.value)
                     }}
-                    InputProps={{
-                        endAdornment:
-                            name.length ?
-                                <Icons.PopupClose
-                                    onClick={() => {
-                                        setName('')
-                                        setError('')
-                                    }}
-                                    size={18}
-                                    color={error ? theme.palette.maskColor.danger : undefined}
-                                />
-                            :   null,
-                        disableUnderline: true,
+                    slotProps={{
+                        input: {
+                            endAdornment:
+                                name.length ?
+                                    <Icons.PopupClose
+                                        onClick={() => {
+                                            setName('')
+                                            setError('')
+                                        }}
+                                        size={18}
+                                        color={error ? theme.palette.maskColor.danger : undefined}
+                                    />
+                                :   null,
+                            disableUnderline: true,
+                        },
                     }}
                 />
             </Box>
diff --git a/packages/mask/popups/modals/SelectProviderModal/index.tsx b/packages/mask/popups/modals/SelectProviderModal/index.tsx
index 62efbf6fea61..46022692acff 100644
--- a/packages/mask/popups/modals/SelectProviderModal/index.tsx
+++ b/packages/mask/popups/modals/SelectProviderModal/index.tsx
@@ -16,16 +16,18 @@ export const SelectProviderModal = memo<ActionModalBaseProps>(function SelectPro
             keepMounted
             {...props}>
             <Typography
-                textAlign="center"
-                fontSize={14}
-                fontWeight={700}
-                lineHeight="18px"
+                sx={{
+                    textAlign: 'center',
+                    fontSize: 14,
+                    fontWeight: 700,
+                    lineHeight: '18px',
+                }}
                 color={theme.palette.maskColor.third}>
                 {onlyMask ?
                     <Trans>Select and Connect to your wallet</Trans>
                 :   <Trans>Connect Mask Network Account using your wallet.</Trans>}
             </Typography>
-            <Box mt={4}>
+            <Box sx={{ mt: 4 }}>
                 <SelectProvider />
             </Box>
         </ActionModal>
diff --git a/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx b/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx
index e30787a18744..f1b1d73e170a 100644
--- a/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx
@@ -75,7 +75,15 @@ export const SetBackupPasswordModal = memo<ActionModalBaseProps>(function SetBac
                     <Trans>Confirm</Trans>
                 </ActionButton>
             }>
-            <Box display="flex" justifyContent="center" flexDirection="column" alignItems="center" rowGap={2} m={0.5}>
+            <Box
+                sx={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    rowGap: 2,
+                    m: 0.5,
+                }}>
                 <PasswordField
                     placeholder={t`Password`}
                     onChange={(e) => setNewPassword(e.target.value)}
@@ -94,14 +102,14 @@ export const SetBackupPasswordModal = memo<ActionModalBaseProps>(function SetBac
                     helperText={passwordMatched ? '' : <Trans>Two entered passwords are not the same.</Trans>}
                 />
                 <Box>
-                    <Typography fontSize={12} color={theme.palette.maskColor.second}>
+                    <Typography sx={{ fontSize: 12 }} color={theme.palette.maskColor.second}>
                         <Trans>
                             Backup password must be 8-20 characters, including uppercase, lowercase, special characters
                             and numbers.
                         </Trans>
                     </Typography>
                     {to ?
-                        <Typography mt={2} fontSize={12} color={theme.palette.maskColor.second}>
+                        <Typography sx={{ mt: 2, fontSize: 12 }} color={theme.palette.maskColor.second}>
                             <Trans>Please set up backup password to export private key.</Trans>
                         </Typography>
                     :   null}
diff --git a/packages/mask/popups/modals/ShowPrivateKeyModal/index.tsx b/packages/mask/popups/modals/ShowPrivateKeyModal/index.tsx
index 7882faae7aa0..2eefe49acd33 100644
--- a/packages/mask/popups/modals/ShowPrivateKeyModal/index.tsx
+++ b/packages/mask/popups/modals/ShowPrivateKeyModal/index.tsx
@@ -46,7 +46,7 @@ function ShowPrivateKeyDrawer({ password, error, setPassword, setError, ...rest
 
     return (
         <BottomDrawer {...rest}>
-            <Box display="flex" justifyContent="center" mx={0.5}>
+            <Box sx={{ display: 'flex', justifyContent: 'center', mx: 0.5 }}>
                 <PasswordField
                     sx={{ mt: 2 }}
                     fullWidth
@@ -61,7 +61,7 @@ function ShowPrivateKeyDrawer({ password, error, setPassword, setError, ...rest
                 />
             </Box>
             {error ?
-                <Typography fontSize={14} color={theme.palette.maskColor.danger} mt={1}>
+                <Typography color={theme.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1 }}>
                     {error}
                 </Typography>
             :   null}
diff --git a/packages/mask/popups/modals/SwitchPersonaModal/PersonaItem.tsx b/packages/mask/popups/modals/SwitchPersonaModal/PersonaItem.tsx
index eab6b8163820..f1bfec6a87a6 100644
--- a/packages/mask/popups/modals/SwitchPersonaModal/PersonaItem.tsx
+++ b/packages/mask/popups/modals/SwitchPersonaModal/PersonaItem.tsx
@@ -57,7 +57,7 @@ export const PersonaItem = memo<PersonaItemProps>(function PersonaItem({ isSelec
                 classes={{ root: classes.avatar }}
                 size={36}
             />
-            <Box ml={1}>
+            <Box sx={{ ml: 1 }}>
                 <Typography className={classes.name}>{persona.nickname}</Typography>
                 <PersonaPublicKey
                     rawPublicKey={persona.identifier.rawPublicKey}
diff --git a/packages/mask/popups/modals/VerifyBackupPasswordModal/index.tsx b/packages/mask/popups/modals/VerifyBackupPasswordModal/index.tsx
index db5d6c7f88c7..94b63fe3963e 100644
--- a/packages/mask/popups/modals/VerifyBackupPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/VerifyBackupPasswordModal/index.tsx
@@ -33,7 +33,7 @@ export const VerifyBackupPasswordModal = memo<ActionModalBaseProps>(function Ver
                     <Trans>Export</Trans>
                 </ActionButton>
             }>
-            <Box display="flex" flexDirection="column" m={0.5}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', m: 0.5 }}>
                 <PasswordField
                     placeholder={t`Password`}
                     onFocus={() => setPasswordMatched(true)}
diff --git a/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx b/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx
index 362f97ac8c7c..319b487d569a 100644
--- a/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx
+++ b/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx
@@ -97,10 +97,12 @@ function WalletAutoLockSettingDrawer(props: BottomDrawerProps) {
     return (
         <BottomDrawer {...props}>
             <Typography
-                fontWeight={700}
-                textAlign="center"
                 color={theme.palette.maskColor.third}
-                sx={{ marginTop: '12px' }}>
+                sx={{
+                    fontWeight: 700,
+                    textAlign: 'center',
+                    marginTop: '12px',
+                }}>
                 <Trans>Please set up the amount of time before we automatically lock your wallet.</Trans>
             </Typography>
             <Box className={classes.list}>
diff --git a/packages/mask/popups/modals/WalletRemoveModal/index.tsx b/packages/mask/popups/modals/WalletRemoveModal/index.tsx
index 311d5b7c4fbf..f6b0ae52093d 100644
--- a/packages/mask/popups/modals/WalletRemoveModal/index.tsx
+++ b/packages/mask/popups/modals/WalletRemoveModal/index.tsx
@@ -61,20 +61,24 @@ function WalletRemoveDrawer({ wallet, error, password, setPassword, setError, ..
     return (
         <BottomDrawer {...rest}>
             <Typography
-                fontWeight={700}
-                textAlign="center"
                 color={theme.palette.maskColor.third}
-                sx={{ marginTop: '12px' }}>
+                sx={{
+                    fontWeight: 700,
+                    textAlign: 'center',
+                    marginTop: '12px',
+                }}>
                 <Trans>Are you sure to remove this wallet?</Trans>
             </Typography>
             <Typography
-                fontWeight={700}
-                textAlign="center"
                 color={theme.palette.maskColor.main}
-                sx={{ marginTop: '0px' }}>
+                sx={{
+                    fontWeight: 700,
+                    textAlign: 'center',
+                    marginTop: '0px',
+                }}>
                 {wallet?.address}
             </Typography>
-            <Box display="flex" justifyContent="center" mx={0.5}>
+            <Box sx={{ display: 'flex', justifyContent: 'center', mx: 0.5 }}>
                 <PasswordField
                     sx={{ mt: 2 }}
                     fullWidth
@@ -89,7 +93,7 @@ function WalletRemoveDrawer({ wallet, error, password, setPassword, setError, ..
                 />
             </Box>
             {error ?
-                <Typography fontSize={14} color={theme.palette.maskColor.danger} mt={1}>
+                <Typography color={theme.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1 }}>
                     {error}
                 </Typography>
             :   null}
diff --git a/packages/mask/popups/modals/WalletRenameModal/index.tsx b/packages/mask/popups/modals/WalletRenameModal/index.tsx
index 23f21390de43..ac29a8489a53 100644
--- a/packages/mask/popups/modals/WalletRenameModal/index.tsx
+++ b/packages/mask/popups/modals/WalletRenameModal/index.tsx
@@ -50,13 +50,15 @@ function WalletRenameDrawer({ wallet, walletName, ...rest }: WalletRenameDrawerP
     return (
         <BottomDrawer {...rest}>
             <Typography
-                fontWeight={700}
-                textAlign="center"
                 color={theme.palette.maskColor.third}
-                sx={{ marginTop: '12px' }}>
+                sx={{
+                    fontWeight: 700,
+                    textAlign: 'center',
+                    marginTop: '12px',
+                }}>
                 <Trans>Wallet name must between 3 to 18 characters.</Trans>
             </Typography>
-            <Box display="flex" justifyContent="center" mx={0.5}>
+            <Box sx={{ display: 'flex', justifyContent: 'center', mx: 0.5 }}>
                 <TextField
                     sx={{ mt: 2 }}
                     fullWidth
@@ -68,24 +70,26 @@ function WalletRenameDrawer({ wallet, walletName, ...rest }: WalletRenameDrawerP
                         setName(e.target.value)
                         setError('')
                     }}
-                    InputProps={{
-                        endAdornment:
-                            name.length ?
-                                <Icons.PopupClose
-                                    onClick={() => {
-                                        setName('')
-                                        setError('')
-                                    }}
-                                    size={18}
-                                    color={error ? theme.palette.maskColor.danger : undefined}
-                                />
-                            :   null,
-                        disableUnderline: true,
+                    slotProps={{
+                        input: {
+                            endAdornment:
+                                name.length ?
+                                    <Icons.PopupClose
+                                        onClick={() => {
+                                            setName('')
+                                            setError('')
+                                        }}
+                                        size={18}
+                                        color={error ? theme.palette.maskColor.danger : undefined}
+                                    />
+                                :   null,
+                            disableUnderline: true,
+                        },
                     }}
                 />
             </Box>
             {error ?
-                <Typography fontSize={14} color={theme.palette.maskColor.danger} mt={1}>
+                <Typography color={theme.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1 }}>
                     {error}
                 </Typography>
             :   null}
diff --git a/packages/mask/popups/pages/Friends/ContactCard/Account/index.tsx b/packages/mask/popups/pages/Friends/ContactCard/Account/index.tsx
index 3384f3587b66..f201ef276c32 100644
--- a/packages/mask/popups/pages/Friends/ContactCard/Account/index.tsx
+++ b/packages/mask/popups/pages/Friends/ContactCard/Account/index.tsx
@@ -46,7 +46,7 @@ export const Account = memo<AccountProps>(function Account({ userId, displayName
         : userId
 
     return (
-        <Box width="156px" padding="4px" display="flex" gap="10px" alignItems="center">
+        <Box sx={{ width: '156px', padding: '4px', display: 'flex', gap: '10px', alignItems: 'center' }}>
             <Icon size={30} />
             <Box className={classes.userId}>
                 <TextOverflowTooltip title={name}>
diff --git a/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx b/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx
index 8f5400f0784f..b455aa6f2dc3 100644
--- a/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx
+++ b/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx
@@ -54,7 +54,7 @@ export const SocialAccount = memo<SocialAccountProps>(function SocialAccount({ a
     const { classes } = useStyles()
     const name = `@${userId}`
     return (
-        <Box width="156px" padding="4px" display="flex" gap="10px" alignItems="center">
+        <Box sx={{ width: '156px', padding: '4px', display: 'flex', gap: '10px', alignItems: 'center' }}>
             <AccountAvatar
                 avatar={userAvatar}
                 network={site}
diff --git a/packages/mask/popups/pages/Friends/ContactCard/index.tsx b/packages/mask/popups/pages/Friends/ContactCard/index.tsx
index 16bce7716307..070f14cebe1a 100644
--- a/packages/mask/popups/pages/Friends/ContactCard/index.tsx
+++ b/packages/mask/popups/pages/Friends/ContactCard/index.tsx
@@ -110,7 +110,7 @@ export const ContactCard = memo<ContactCardProps>(function ContactCard({ friend,
                         <Avatar className={classes.avatar} src={avatar} />
                     :   <Icons.MaskBlue className={classes.avatar} />}
                     <Box>
-                        <Typography fontSize={14} fontWeight={700} lineHeight="18px">
+                        <Typography sx={{ fontSize: 14, fontWeight: 700, lineHeight: '18px' }}>
                             {publicKey ? formatPersonaFingerprint(publicKey) : null}
                         </Typography>
                     </Box>
diff --git a/packages/mask/popups/pages/Friends/Contacts/index.tsx b/packages/mask/popups/pages/Friends/Contacts/index.tsx
index f1634e5d18a9..6398917d6179 100644
--- a/packages/mask/popups/pages/Friends/Contacts/index.tsx
+++ b/packages/mask/popups/pages/Friends/Contacts/index.tsx
@@ -51,6 +51,6 @@ export const Contacts = memo<ContactsProps>(function Contacts({ friendsArray, fe
                         <ContactCard key={friend.persona.publicKeyAsHex} friend={friend} avatar={friend.avatar} />
                     ))
                 })}
-                <ElementAnchor callback={() => fetchNextPage()} height={10} />
+                <ElementAnchor callback={() => fetchNextPage()} sx={{ height: 10 }} />
             </Box>
 })
diff --git a/packages/mask/popups/pages/Friends/Detail/Account/index.tsx b/packages/mask/popups/pages/Friends/Detail/Account/index.tsx
index 3bfbf82e6141..e12f3ad75dbd 100644
--- a/packages/mask/popups/pages/Friends/Detail/Account/index.tsx
+++ b/packages/mask/popups/pages/Friends/Detail/Account/index.tsx
@@ -53,11 +53,13 @@ export const Account = memo<AccountProps>(function Account({ userId, displayName
         : formatPersonaName(userId)
     return (
         <Box
-            padding="12px"
-            display="flex"
-            flexDirection="column"
-            gap="10px"
-            alignItems="center"
+            sx={{
+                padding: '12px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '10px',
+                alignItems: 'center',
+            }}
             className={classes.container}>
             <Icon size={40} />
             <Box className={classes.userId}>
diff --git a/packages/mask/popups/pages/Friends/Detail/SocialAccount/index.tsx b/packages/mask/popups/pages/Friends/Detail/SocialAccount/index.tsx
index 553bf4802908..1caa1f77423a 100644
--- a/packages/mask/popups/pages/Friends/Detail/SocialAccount/index.tsx
+++ b/packages/mask/popups/pages/Friends/Detail/SocialAccount/index.tsx
@@ -56,11 +56,13 @@ export const SocialAccount = memo<SocialAccountProps>(function SocialAccount({ a
             href={twitterDomainMigrate(`https://${site}/${userId}`)}
             className={classes.iconBlack}>
             <Box
-                padding="12px"
-                display="flex"
-                flexDirection="column"
-                gap="10px"
-                alignItems="center"
+                sx={{
+                    padding: '12px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '10px',
+                    alignItems: 'center',
+                }}
                 className={classes.container}>
                 <AccountAvatar avatar={userAvatar} network={site} isValid />
                 <Box className={classes.userId}>{`@${userId}`}</Box>
diff --git a/packages/mask/popups/pages/Friends/Detail/UI.tsx b/packages/mask/popups/pages/Friends/Detail/UI.tsx
index a9d64337ef68..47fa093789ba 100644
--- a/packages/mask/popups/pages/Friends/Detail/UI.tsx
+++ b/packages/mask/popups/pages/Friends/Detail/UI.tsx
@@ -98,7 +98,9 @@ export const FriendsDetailUI = memo<FriendsDetailUIProps>(function FriendsDetail
     const handleBack = useCallback(() => navigate(-1), [])
     const theme = useTheme()
     return (
-        <Box display="flex" flexDirection="column" alignItems="center" width="100%" className={classes.container}>
+        <Box
+            sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}
+            className={classes.container}>
             <Box className={classes.profileInfo}>
                 <Box className={classes.header}>
                     <button onClick={handleBack} type="submit" className={classes.back}>
@@ -117,16 +119,18 @@ export const FriendsDetailUI = memo<FriendsDetailUIProps>(function FriendsDetail
                             <Avatar src={avatar} style={{ width: 60, height: 60 }} />
                         :   <Icons.MaskBlue size={60} style={{ borderRadius: 99 }} />}
                     </Box>
-                    <Typography fontSize={18} fontWeight="700" lineHeight="22px" marginTop="8px">
+                    <Typography sx={{ fontSize: 18, fontWeight: '700', lineHeight: '22px', marginTop: '8px' }}>
                         {publicKey ? formatPersonaFingerprint(publicKey) : null}
                     </Typography>
                     <Typography
-                        fontSize={12}
                         color={theme.palette.maskColor.second}
-                        lineHeight="16px"
-                        display="flex"
-                        alignItems="center"
-                        columnGap="2px">
+                        sx={{
+                            fontSize: 12,
+                            lineHeight: '16px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            columnGap: '2px',
+                        }}>
                         {formatPersonaFingerprint(nextId, 4)}
                         <CopyButton text={nextId} size={12} className={classes.icon} />
                     </Typography>
diff --git a/packages/mask/popups/pages/Friends/Home/UI.tsx b/packages/mask/popups/pages/Friends/Home/UI.tsx
index 7c0890f3e16d..b26ef4a510e4 100644
--- a/packages/mask/popups/pages/Friends/Home/UI.tsx
+++ b/packages/mask/popups/pages/Friends/Home/UI.tsx
@@ -57,7 +57,7 @@ export const FriendsHomeUI = memo<FriendsHomeUIProps>(function FriendsHomeUI({
     const { classes, cx } = useStyles()
     return (
         <div className={classes.container}>
-            <Box padding="16px">
+            <Box sx={{ padding: '16px' }}>
                 <Search setSearchValue={setSearchValue} />
             </Box>
             {loading ?
diff --git a/packages/mask/popups/pages/Friends/SearchList/index.tsx b/packages/mask/popups/pages/Friends/SearchList/index.tsx
index 79ad872769ba..f0114a24bc5d 100644
--- a/packages/mask/popups/pages/Friends/SearchList/index.tsx
+++ b/packages/mask/popups/pages/Friends/SearchList/index.tsx
@@ -57,7 +57,7 @@ export const SearchList = memo<SearchListProps>(function SearchList({ searchResu
                             />
                         )
                     })}
-                    <ElementAnchor callback={() => fetchNextPage()} height={10} />
+                    <ElementAnchor callback={() => fetchNextPage()} sx={{ height: 10 }} />
                 </Box>
             </RestorableScroll>
 })
diff --git a/packages/mask/popups/pages/Personas/AccountDetail/UI.tsx b/packages/mask/popups/pages/Personas/AccountDetail/UI.tsx
index 67a0f3cfd293..413bbf30ab08 100644
--- a/packages/mask/popups/pages/Personas/AccountDetail/UI.tsx
+++ b/packages/mask/popups/pages/Personas/AccountDetail/UI.tsx
@@ -41,8 +41,8 @@ export const AccountDetailUI = memo<AccountDetailUIProps>(function AccountDetail
     const handleBack = useCallback(() => navigate(-1), [])
 
     return (
-        <Box height="100%" pb={9}>
-            <Box pt={2} px={2} display="flex" flexDirection="column" height="100%">
+        <Box sx={{ height: '100%', pb: 9 }}>
+            <Box sx={{ pt: 2, px: 2, display: 'flex', flexDirection: 'column', height: '100%' }}>
                 <Box className={classes.account}>
                     <AccountAvatar
                         avatar={account.avatar}
diff --git a/packages/mask/popups/pages/Personas/ConnectWallet/index.tsx b/packages/mask/popups/pages/Personas/ConnectWallet/index.tsx
index 19690d2c48e3..79714715a0d6 100644
--- a/packages/mask/popups/pages/Personas/ConnectWallet/index.tsx
+++ b/packages/mask/popups/pages/Personas/ConnectWallet/index.tsx
@@ -112,12 +112,12 @@ export const Component = memo(function ConnectWalletPage() {
     useTitle(t`Connect Wallet`, handleBack)
 
     return (
-        <Box p={2}>
+        <Box sx={{ p: 2 }}>
             <Box className={classes.provider}>
                 <Box className={classes.accountInfo}>
                     <WalletAvatar address={account} size={30} />
                     <Box>
-                        <Typography fontSize={14} fontWeight={700} lineHeight="18px">
+                        <Typography sx={{ fontSize: 14, fontWeight: 700, lineHeight: '18px' }}>
                             {walletAlias}
                         </Typography>
                         <Typography className={classes.address}>
diff --git a/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx b/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx
index c246134aaad5..e625024ff872 100644
--- a/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx
+++ b/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx
@@ -38,13 +38,13 @@ export const Component = memo(function ExportPrivateKey() {
 
     return (
         <Box>
-            <Box p={2} display="flex" flexDirection="column" rowGap={2}>
-                <Typography fontWeight={700}>
+            <Box sx={{ p: 2, display: 'flex', flexDirection: 'column', rowGap: 2 }}>
+                <Typography sx={{ fontWeight: 700 }}>
                     <Trans>Private Key</Trans>
                 </Typography>
                 {value ?
                     <Typography
-                        p={1.5}
+                        sx={{ p: 1.5 }}
                         style={{ background: theme.palette.maskColor.input, wordWrap: 'break-word', borderRadius: 8 }}>
                         {value}
                     </Typography>
diff --git a/packages/mask/popups/pages/Personas/Home/UI.tsx b/packages/mask/popups/pages/Personas/Home/UI.tsx
index 50a2e4640941..54ec4bacfda7 100644
--- a/packages/mask/popups/pages/Personas/Home/UI.tsx
+++ b/packages/mask/popups/pages/Personas/Home/UI.tsx
@@ -259,7 +259,7 @@ export const PersonaHomeUI = memo<PersonaHomeUIProps>(
                                 />
                             </Box>
                             <Box className={classes.info}>
-                                <Box position="relative" height="60px">
+                                <Box sx={{ position: 'relative', height: '60px' }}>
                                     <PersonaAvatar size={60} avatar={avatar} pubkey={publicKey!} />
                                     <Box
                                         className={classes.edit}
@@ -267,7 +267,8 @@ export const PersonaHomeUI = memo<PersonaHomeUIProps>(
                                         <Icons.Edit size={12} />
                                     </Box>
                                 </Box>
-                                <Typography fontSize={18} fontWeight="700" lineHeight="22px" marginTop="8px">
+                                <Typography
+                                    sx={{ fontSize: 18, fontWeight: '700', lineHeight: '22px', marginTop: '8px' }}>
                                     {nickname}
                                 </Typography>
                                 {fingerprint && publicKey ?
diff --git a/packages/mask/popups/pages/Personas/Logout/index.tsx b/packages/mask/popups/pages/Personas/Logout/index.tsx
index 4aa115b58ed2..d062f68e0279 100644
--- a/packages/mask/popups/pages/Personas/Logout/index.tsx
+++ b/packages/mask/popups/pages/Personas/Logout/index.tsx
@@ -131,8 +131,8 @@ const LogoutUI = memo<LogoutUIProps>(function LogoutUI({
     }, [backupPassword, password, error, _])
 
     return (
-        <Box flex={1} maxHeight="544px" overflow="auto" data-hide-scrollbar>
-            <Box p={2} pb={11} display="flex" gap={1.5} flexDirection="column">
+        <Box sx={{ flex: 1, maxHeight: '544px', overflow: 'auto' }} data-hide-scrollbar>
+            <Box sx={{ p: 2, pb: 11, display: 'flex', gap: 1.5, flexDirection: 'column' }}>
                 <Box className={classes.infoBox}>
                     <PersonaAvatar
                         size={30}
@@ -140,8 +140,8 @@ const LogoutUI = memo<LogoutUIProps>(function LogoutUI({
                         pubkey={currentPersona?.identifier.publicKeyAsHex || ''}
                     />
                     <Box>
-                        <Typography fontWeight={700}>{currentPersona?.nickname}</Typography>
-                        <Typography fontSize={10} color={theme.palette.maskColor.third} lineHeight="10px">
+                        <Typography sx={{ fontWeight: 700 }}>{currentPersona?.nickname}</Typography>
+                        <Typography color={theme.palette.maskColor.third} sx={{ fontSize: 10, lineHeight: '10px' }}>
                             {currentPersona?.identifier.rawPublicKey}
                         </Typography>
                     </Box>
diff --git a/packages/mask/popups/pages/Personas/PersonaAvatarSetting/index.tsx b/packages/mask/popups/pages/Personas/PersonaAvatarSetting/index.tsx
index 8eced7e94a80..9649421ea31f 100644
--- a/packages/mask/popups/pages/Personas/PersonaAvatarSetting/index.tsx
+++ b/packages/mask/popups/pages/Personas/PersonaAvatarSetting/index.tsx
@@ -117,7 +117,7 @@ const PersonaAvatarSetting = memo(function PersonaAvatar() {
         return (
             <Box>
                 <NormalHeader />
-                <Box p={2}>
+                <Box sx={{ p: 2 }}>
                     <AvatarEditor
                         ref={editorRef}
                         image={file}
@@ -151,9 +151,9 @@ const PersonaAvatarSetting = memo(function PersonaAvatar() {
     }
 
     return (
-        <Box flex={1} display="flex" flexDirection="column" overflow="auto" data-hide-scrollbar>
+        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'auto' }} data-hide-scrollbar>
             <NormalHeader />
-            <Box p={2}>
+            <Box sx={{ p: 2 }}>
                 <Box className={classes.uploadBox} {...bound}>
                     <input
                         className={classes.file}
diff --git a/packages/mask/popups/pages/Personas/PersonaSignRequest/index.tsx b/packages/mask/popups/pages/Personas/PersonaSignRequest/index.tsx
index 683aa56db2a7..4d57b2c6071a 100644
--- a/packages/mask/popups/pages/Personas/PersonaSignRequest/index.tsx
+++ b/packages/mask/popups/pages/Personas/PersonaSignRequest/index.tsx
@@ -63,7 +63,7 @@ export const Component = memo(function PersonaSignRequest() {
     }, [requestID, params])
 
     return (
-        <Box p={2}>
+        <Box sx={{ p: 2 }}>
             <SignRequestInfo message={message} rawMessage={message} origin={source} />
             <BottomController>
                 <ActionButton loading={cancelLoading} onClick={handleCancel} fullWidth variant="outlined">
diff --git a/packages/mask/popups/pages/Wallet/ConnectedSites/index.tsx b/packages/mask/popups/pages/Wallet/ConnectedSites/index.tsx
index b940c8b7da19..bb900dd660ea 100644
--- a/packages/mask/popups/pages/Wallet/ConnectedSites/index.tsx
+++ b/packages/mask/popups/pages/Wallet/ConnectedSites/index.tsx
@@ -40,7 +40,7 @@ export const Component = memo(function ConnectedSites() {
 
     if (!origins?.length)
         return (
-            <Box className={classes.container} height="100%" justifyContent="center">
+            <Box className={classes.container} sx={{ height: '100%', justifyContent: 'center' }}>
                 <EmptyStatus>
                     <Trans>No websites connected to this wallet</Trans>
                 </EmptyStatus>
diff --git a/packages/mask/popups/pages/Wallet/CreateWallet/Derive.tsx b/packages/mask/popups/pages/Wallet/CreateWallet/Derive.tsx
index 6d4ef9269cf2..31a3e58d4e66 100644
--- a/packages/mask/popups/pages/Wallet/CreateWallet/Derive.tsx
+++ b/packages/mask/popups/pages/Wallet/CreateWallet/Derive.tsx
@@ -132,11 +132,13 @@ export const Component = memo(function DeriveWallet() {
                             <Icons.CheckCircle className={classes.indicator} size={20} />
                         :   null}
                         <Icons.MaskBlue size={24} />
-                        <Box flexGrow={1} ml={1}>
+                        <Box sx={{ flexGrow: 1, ml: 1 }}>
                             <Typography className={classes.walletName}>{wallet.name}</Typography>
-                            <Box display="flex" flexDirection="row">
+                            <Box sx={{ display: 'flex', flexDirection: 'row' }}>
                                 <Tooltip title={wallet.address} className={classes.walletAddress}>
-                                    <Typography mr="auto">{formatEthereumAddress(wallet.address, 4)}</Typography>
+                                    <Typography sx={{ mr: 'auto' }}>
+                                        {formatEthereumAddress(wallet.address, 4)}
+                                    </Typography>
                                 </Tooltip>
                                 <WalletBalance
                                     className={classes.balance}
diff --git a/packages/mask/popups/pages/Wallet/ExportPrivateKey/index.tsx b/packages/mask/popups/pages/Wallet/ExportPrivateKey/index.tsx
index 0e75d13825ba..d0f7ea01ba45 100644
--- a/packages/mask/popups/pages/Wallet/ExportPrivateKey/index.tsx
+++ b/packages/mask/popups/pages/Wallet/ExportPrivateKey/index.tsx
@@ -122,7 +122,7 @@ export const Component = memo(function ExportPrivateKey() {
                         </MaskTabList>
                 }
             />
-            <Box p={2} display="flex" flexDirection="column" rowGap={2} flex={1}>
+            <Box sx={{ p: 2, display: 'flex', flexDirection: 'column', rowGap: 2, flex: 1 }}>
                 {!getMnemonicLoading && mnemonic ?
                     <TabPanel className={classes.panel} value={TabType.Mnemonic}>
                         <Typography sx={{ fontSize: 14, lineHeight: '18px', fontWeight: 700 }}>
@@ -143,12 +143,14 @@ export const Component = memo(function ExportPrivateKey() {
                         <Trans>Click on the down-arrow to see the private key.</Trans>
                     </Typography>
                     <Box
-                        display="flex"
-                        flexDirection="column"
-                        mt={2}
-                        rowGap={2}
-                        maxHeight="450px"
-                        overflow="auto"
+                        sx={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            mt: 2,
+                            rowGap: 2,
+                            maxHeight: '450px',
+                            overflow: 'auto',
+                        }}
                         data-hide-scrollbar>
                         {(
                             wallet?.mnemonicId &&
diff --git a/packages/mask/popups/pages/Wallet/Interaction/PermissionRequest.tsx b/packages/mask/popups/pages/Wallet/Interaction/PermissionRequest.tsx
index fc89417199a4..5575273e6004 100644
--- a/packages/mask/popups/pages/Wallet/Interaction/PermissionRequest.tsx
+++ b/packages/mask/popups/pages/Wallet/Interaction/PermissionRequest.tsx
@@ -97,7 +97,9 @@ export function PermissionRequest(props: InteractionItemProps) {
                                     checked={selectedWallet.includes(wallet.address)}
                                     tabIndex={-1}
                                     disableRipple
-                                    inputProps={{ 'aria-labelledby': labelId }}
+                                    slotProps={{
+                                        input: { 'aria-labelledby': labelId },
+                                    }}
                                 />
                                 <WalletListItem address={wallet.address} id={labelId} className={classes.address} />
                             </ListItemButton>
@@ -112,7 +114,9 @@ function WalletListItem(props: { address: string; id: string; className: string
     const name = useWalletName(props.address)
     return (
         <ListItemText
-            secondaryTypographyProps={{ className: props.className }}
+            slotProps={{
+                secondary: { className: props.className },
+            }}
             id={props.id}
             primary={name}
             secondary={props.address}
diff --git a/packages/mask/popups/pages/Wallet/Interaction/TransactionRequest.tsx b/packages/mask/popups/pages/Wallet/Interaction/TransactionRequest.tsx
index e8c7e7cd31f2..9b8cb3b408ef 100644
--- a/packages/mask/popups/pages/Wallet/Interaction/TransactionRequest.tsx
+++ b/packages/mask/popups/pages/Wallet/Interaction/TransactionRequest.tsx
@@ -235,16 +235,16 @@ export function TransactionRequest(props: InteractionItemProps) {
     )
     const FullTransactionDetails =
         expand ?
-            <Box className={classes.transactionDetail} marginBottom={16}>
+            <Box className={classes.transactionDetail} sx={{ marginBottom: 16 }}>
                 {transaction.formattedTransaction?.popup?.spender && approvedAmount ?
                     <>
-                        <Box display="flex" alignItems="center" columnGap={1.25}>
+                        <Box sx={{ display: 'flex', alignItems: 'center', columnGap: 1.25 }}>
                             <Typography className={classes.itemTitle}>
                                 <Trans>Approve amount</Trans>
                             </Typography>
                             <Typography className={classes.itemValue}>{approvedAmount}</Typography>
                         </Box>
-                        <Box display="flex" alignItems="center" columnGap={1.25}>
+                        <Box sx={{ display: 'flex', alignItems: 'center', columnGap: 1.25 }}>
                             <Trans>
                                 <Typography className={classes.itemTitle}>Granted to </Typography>
                                 <Typography className={classes.itemValue}>
@@ -254,7 +254,7 @@ export function TransactionRequest(props: InteractionItemProps) {
                         </Box>
                     </>
                 :   null}
-                <Box display="flex" columnGap={0.5} alignItems="center">
+                <Box sx={{ display: 'flex', columnGap: 0.5, alignItems: 'center' }}>
                     <Icons.Documents className={classes.document} size={16} />
                     <Typography className={classes.text}>
                         <Trans>Data</Trans>
@@ -272,7 +272,7 @@ export function TransactionRequest(props: InteractionItemProps) {
         :   null
     const ViewFullTransactionDetailsButton =
         FullTransactionDetails ?
-            <Box display="flex" justifyContent="center" alignItems="center" mt={2}>
+            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', mt: 2 }}>
                 <Button variant="text" onClick={() => setExpand(!expand)}>
                     <Typography className={classes.text}>
                         <Trans>View full transaction details</Trans>
diff --git a/packages/mask/popups/pages/Wallet/Interaction/interaction.tsx b/packages/mask/popups/pages/Wallet/Interaction/interaction.tsx
index 2c7e1e1371b9..a98f6fc9c9c8 100644
--- a/packages/mask/popups/pages/Wallet/Interaction/interaction.tsx
+++ b/packages/mask/popups/pages/Wallet/Interaction/interaction.tsx
@@ -91,7 +91,7 @@ export const Interaction = memo(function Interaction(props: InteractionProps) {
             await onRequestCountMightChanged()
         } catch (error) {
             showSnackbar(
-                <Typography textAlign="center" width="275px">
+                <Typography sx={{ textAlign: 'center', width: '275px' }}>
                     <Trans>There was a network or RPC provider error, please try again later!</Trans>
                     <br />
                     {String((error as any).message)}
@@ -154,8 +154,16 @@ export const Interaction = memo(function Interaction(props: InteractionProps) {
     }
 
     return (
-        <Box flex={1} display="flex" flexDirection="column">
-            <Box p={2} display="flex" flexDirection="column" flex={1} maxHeight="calc(100vh - 142px)" overflow="auto">
+        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+            <Box
+                sx={{
+                    p: 2,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: 1,
+                    maxHeight: 'calc(100vh - 142px)',
+                    overflow: 'auto',
+                }}>
                 <InteractionComponent
                     setConfirmDisabled={setConfirmDisabled}
                     currentRequest={currentRequest}
@@ -198,8 +206,8 @@ const Pager = memo(function Pager(props: PagerProps) {
 
     if (totalMessages <= 1) return null
     return (
-        <Box display="flex" flexDirection="column" alignItems="center" marginTop="auto">
-            <Box display="flex" alignItems="center">
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 'auto' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <IconButton
                     disabled={currentMessageIndex === 0}
                     onClick={() => startTransition(() => setMessageIndex(currentMessageIndex - 1))}>
@@ -232,7 +240,7 @@ function DangerDialog({ cancel, confirm }: Record<'cancel' | 'confirm', React.Re
                 <DialogContentText variant="overline">
                     <Trans>Are you sure?</Trans>
                 </DialogContentText>
-                <DialogContentText color={(theme) => theme.palette.maskColor.danger}>
+                <DialogContentText sx={{ color: (theme) => theme.palette.maskColor.danger }}>
                     <Trans>This request may be a phishing attach. I understand this and want to continue.</Trans>
                 </DialogContentText>
             </DialogContent>
diff --git a/packages/mask/popups/pages/Wallet/SelectWallet/index.tsx b/packages/mask/popups/pages/Wallet/SelectWallet/index.tsx
index 39cf4aca4822..d5c055250fe6 100644
--- a/packages/mask/popups/pages/Wallet/SelectWallet/index.tsx
+++ b/packages/mask/popups/pages/Wallet/SelectWallet/index.tsx
@@ -124,8 +124,24 @@ export const Component = memo(function SelectWallet({ embed, ...props }: SelectW
         )
 
     return (
-        <Box overflow="auto" display="flex" flexGrow={1} flexDirection="column" data-hide-scrollbar {...props}>
-            <Box pt={1} pb={9} px={2} display="flex" flexGrow={1} minHeight={0} flexDirection="column" rowGap="6px">
+        <Box
+            data-hide-scrollbar
+            {...props}
+            sx={[
+                { overflow: 'auto', display: 'flex', flexGrow: 1, flexDirection: 'column' },
+                ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+            ]}>
+            <Box
+                sx={{
+                    pt: 1,
+                    pb: 9,
+                    px: 2,
+                    display: 'flex',
+                    flexGrow: 1,
+                    minHeight: 0,
+                    flexDirection: 'column',
+                    rowGap: '6px',
+                }}>
                 {wallets.map((item) => {
                     return (
                         <WalletItem
diff --git a/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx b/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx
index cba36b0a3ea5..f7321bf00031 100644
--- a/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx
+++ b/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx
@@ -151,13 +151,19 @@ const WalletItem = memo(function WalletItem({ wallet }: WalletItemProps) {
                         target="_blank"
                         rel="noopener noreferrer"
                         href={EVMExplorerResolver.addressLink(chainId, address)}
-                        marginLeft="4px"
-                        width={16}
-                        height={16}>
+                        sx={{
+                            marginLeft: '4px',
+                            width: 16,
+                            height: 16,
+                        }}>
                         <Icons.LinkOut size={16} color={theme.palette.maskColor.main} />
                     </Link>
                 </Typography>
-                <ProgressiveText loading={isPending} className={classes.description} fontSize={12} skeletonWidth={50}>
+                <ProgressiveText
+                    loading={isPending}
+                    className={classes.description}
+                    sx={{ fontSize: 12 }}
+                    skeletonWidth={50}>
                     <FormattedBalance value={balance} decimals={18} symbol={'ETH'} formatter={formatBalance} />
                 </ProgressiveText>
             </div>
@@ -232,7 +238,7 @@ export const Component = memo(function SetPaymentPassword() {
                         :   <Trans>Set Payment Password</Trans>}
                     </Typography>
                     {isCreating ?
-                        <Typography className={classes.description} fontSize={14} fontWeight={700}>
+                        <Typography className={classes.description} sx={{ fontSize: 14, fontWeight: 700 }}>
                             <Trans>At least 6 characters</Trans>
                         </Typography>
                     :   null}
@@ -272,7 +278,9 @@ export const Component = memo(function SetPaymentPassword() {
                                 />
                             </div>
                             {errorMsg && !isValid ?
-                                <Typography fontSize={14} color={theme.palette.maskColor.danger} marginTop="12px">
+                                <Typography
+                                    color={theme.palette.maskColor.danger}
+                                    sx={{ fontSize: 14, marginTop: '12px' }}>
                                     {errorMsg}
                                 </Typography>
                             :   null}
@@ -281,17 +289,21 @@ export const Component = memo(function SetPaymentPassword() {
                         </form>
                         <Typography
                             color={theme.palette.maskColor.third}
-                            fontSize={14}
-                            textAlign="center"
-                            fontWeight={700}>
+                            sx={{
+                                fontSize: 14,
+                                textAlign: 'center',
+                                fontWeight: 700,
+                            }}>
                             <Trans>By proceeding you agree to the</Trans>
                         </Typography>
 
                         <Typography
                             color={theme.palette.maskColor.third}
-                            fontSize={14}
-                            textAlign="center"
-                            fontWeight={700}>
+                            sx={{
+                                fontSize: 14,
+                                textAlign: 'center',
+                                fontWeight: 700,
+                            }}>
                             <Trans>
                                 <a
                                     className={classes.strong}
diff --git a/packages/mask/popups/pages/Wallet/SyncTwitterCookies/index.tsx b/packages/mask/popups/pages/Wallet/SyncTwitterCookies/index.tsx
index 7823cc5695f2..d5a8c7c783ec 100644
--- a/packages/mask/popups/pages/Wallet/SyncTwitterCookies/index.tsx
+++ b/packages/mask/popups/pages/Wallet/SyncTwitterCookies/index.tsx
@@ -418,7 +418,7 @@ export const Component = memo(function SyncTwitterCookies() {
                 <Box className={classes.page}>
                     <Box className={classes.header}>
                         <WalletAvatar address={address} size={48} badgeSize={16} />
-                        <Box display="flex" flexDirection="column">
+                        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                             <Typography className={classes.name}>{walletName}</Typography>
                             <Typography className={classes.address}>
                                 <FormattedAddress address={address} formatter={formatEthereumAddress} size={4} />
diff --git a/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx b/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx
index b8459f8da09a..946780ce4e0d 100644
--- a/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx
+++ b/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx
@@ -224,7 +224,7 @@ export const TokenDetailUI = memo(function TokenDetailUI(props: TokenDetailUIPro
 
     return (
         <>
-            <Box padding={2}>
+            <Box sx={{ padding: 2 }}>
                 <ProgressiveText className={classes.assetValue} loading={isLoadingPrice} skeletonWidth={80}>
                     {tokenPrice === undefined ? null : (
                         <FormattedCurrency value={tokenPrice} formatter={formatCurrency} />
@@ -233,16 +233,17 @@ export const TokenDetailUI = memo(function TokenDetailUI(props: TokenDetailUIPro
                 {hideChart ? null : (
                     <>
                         <PriceChange className={classes.priceChange} change={priceChange} loading={isLoadingTrending} />
-                        <PriceChartRange days={chartRange} onDaysChange={setChartRange} gap="10px" mt={2} />
+                        <PriceChartRange days={chartRange} onDaysChange={setChartRange} sx={{ gap: '10px', mt: 2 }} />
                         {!isLoadingStats && isError ?
                             <ReloadStatus
                                 onRetry={refetch}
                                 className={classes.trending}
-                                height={DIMENSION.height}
-                                width={DIMENSION.width}
+                                sx={{ height: DIMENSION.height, width: DIMENSION.width }}
                             />
                         : !isLoadingStats && !stats?.length ?
-                            <EmptyStatus className={classes.trending} height={DIMENSION.height} width={DIMENSION.width}>
+                            <EmptyStatus
+                                className={classes.trending}
+                                sx={{ height: DIMENSION.height, width: DIMENSION.width }}>
                                 <Trans>Not enough data to present.</Trans>
                             </EmptyStatus>
                         :   <TrendingChart
@@ -254,13 +255,13 @@ export const TokenDetailUI = memo(function TokenDetailUI(props: TokenDetailUIPro
                     </>
                 )}
 
-                <Box display="flex" flexDirection="row" justifyContent="space-between">
+                <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                     <Box>
                         <Typography className={classes.label}>
                             <Trans>Balance</Trans>
                         </Typography>
                         {asset ?
-                            <Typography component="div" className={classes.value} justifyContent="flex-start">
+                            <Typography component="div" className={classes.value} sx={{ justifyContent: 'flex-start' }}>
                                 <TokenIcon
                                     className={classes.tokenIcon}
                                     address={asset.address}
@@ -283,11 +284,11 @@ export const TokenDetailUI = memo(function TokenDetailUI(props: TokenDetailUIPro
                             </Typography>
                         }
                     </Box>
-                    <Box textAlign="right">
+                    <Box sx={{ textAlign: 'right' }}>
                         <Typography className={classes.label}>
                             <Trans>value</Trans>
                         </Typography>
-                        <Typography component="div" className={classes.value} justifyContent="flex-end">
+                        <Typography component="div" className={classes.value} sx={{ justifyContent: 'flex-end' }}>
                             <FormattedCurrency value={tokenValue} formatter={formatCurrency} />
                         </Typography>
                     </Box>
diff --git a/packages/mask/popups/pages/Wallet/TransactionDetail/index.tsx b/packages/mask/popups/pages/Wallet/TransactionDetail/index.tsx
index 394e098b0e34..924d8000709d 100644
--- a/packages/mask/popups/pages/Wallet/TransactionDetail/index.tsx
+++ b/packages/mask/popups/pages/Wallet/TransactionDetail/index.tsx
@@ -233,8 +233,8 @@ export const Component = memo(function TransactionDetail() {
         :   !transaction.to && loadingTx
     return (
         <>
-            <Box p={2} overflow="auto" data-hide-scrollbar>
-                <Box display="flex" alignItems="center">
+            <Box sx={{ p: 2, overflow: 'auto' }} data-hide-scrollbar>
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Typography variant="h2" className={classes.statusTitle}>
                         <Trans>status</Trans>
                     </Typography>
@@ -264,7 +264,7 @@ export const Component = memo(function TransactionDetail() {
                     </Typography>
                     <Typography className={classes.fieldValue}>
                         <Trans>View on Explorer</Trans>
-                        <Link href={link} target="_blank" ml={0.5} fontSize={0}>
+                        <Link href={link} target="_blank" sx={{ ml: 0.5, fontSize: 0 }}>
                             <Icons.LinkOut size={16} color={theme.palette.maskColor.second} />
                         </Link>
                     </Typography>
diff --git a/packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx b/packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx
index dc8a1a9c4ef9..41217054c021 100644
--- a/packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx
+++ b/packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx
@@ -212,7 +212,7 @@ export const FungibleTokenSection = memo(function FungibleTokenSection() {
                     if (picked) handleSelectAsset(picked as Web3Helper.FungibleAssetAll)
                 }}>
                 <TokenIcon size={36} chainId={chainId} address={address} logoURL={selectedAsset?.logoURL} />
-                <Box mr="auto" ml={2}>
+                <Box sx={{ mr: 'auto', ml: 2 }}>
                     <ProgressiveText loading={isPending} skeletonWidth={36}>
                         {token?.symbol}
                     </ProgressiveText>
@@ -224,7 +224,7 @@ export const FungibleTokenSection = memo(function FungibleTokenSection() {
                 </Box>
                 <Icons.ArrowDrop size={24} />
             </Box>
-            <Box mt={2} mx={2}>
+            <Box sx={{ mt: 2, mx: 2 }}>
                 <Input
                     fullWidth
                     disableUnderline
@@ -251,7 +251,7 @@ export const FungibleTokenSection = memo(function FungibleTokenSection() {
                     }}
                 />
             </Box>
-            <Box display="flex" justifyContent="space-between" alignItems="center" mt={2} mx={2}>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2, mx: 2 }}>
                 <Typography className={classes.label}>
                     <Trans>Gas Fee</Trans>
                 </Typography>
diff --git a/packages/mask/popups/pages/Wallet/Transfer/index.tsx b/packages/mask/popups/pages/Wallet/Transfer/index.tsx
index e0752e602892..d02cb02f0e5e 100644
--- a/packages/mask/popups/pages/Wallet/Transfer/index.tsx
+++ b/packages/mask/popups/pages/Wallet/Transfer/index.tsx
@@ -56,7 +56,7 @@ const Transfer = memo(function Transfer() {
         <Box className={classes.page}>
             <NormalHeader />
             <div className={classes.body}>
-                <AddContactInputPanel p={0} m="16px 16px 0" autoFocus />
+                <AddContactInputPanel sx={{ p: 0, m: '16px 16px 0' }} autoFocus />
                 <div className={classes.panel} data-hide-scrollbar>
                     <FungibleTokenSection />
                 </div>
diff --git a/packages/mask/popups/pages/Wallet/Unlock/index.tsx b/packages/mask/popups/pages/Wallet/Unlock/index.tsx
index 9fa7cffe4eef..885e3064267c 100644
--- a/packages/mask/popups/pages/Wallet/Unlock/index.tsx
+++ b/packages/mask/popups/pages/Wallet/Unlock/index.tsx
@@ -99,7 +99,7 @@ const Unlock = memo(function Unlock() {
                         onChange={(e) => setPassword(e.target.value)}
                     />
                     {verified === false ?
-                        <Typography fontSize={14} color={theme.palette.maskColor.danger} marginTop="12px">
+                        <Typography color={theme.palette.maskColor.danger} sx={{ fontSize: 14, marginTop: '12px' }}>
                             <Trans>Incorrect password</Trans>
                         </Typography>
                     :   null}
@@ -116,12 +116,14 @@ const Unlock = memo(function Unlock() {
 
                 <Typography
                     color={theme.palette.maskColor.main}
-                    marginTop="16px"
                     onClick={navigateToResetWallet}
                     className={classes.pointer}
-                    fontSize={14}
-                    textAlign="center"
-                    fontWeight={700}>
+                    sx={{
+                        marginTop: '16px',
+                        fontSize: 14,
+                        textAlign: 'center',
+                        fontWeight: 700,
+                    }}>
                     <Trans>Forgot payment password?</Trans>
                 </Typography>
             </Box>
diff --git a/packages/mask/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx b/packages/mask/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx
index 855af7abcfb9..1068fd31b397 100644
--- a/packages/mask/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx
+++ b/packages/mask/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx
@@ -245,7 +245,9 @@ export const ActivityItem = memo<ActivityItemProps>(function ActivityItem({ tran
                 <ImageIcon className={classes.badgeIcon} size={16} icon={networkDescriptor?.icon} />
             </Box>
             <ListItemText
-                secondaryTypographyProps={{ component: 'div' }}
+                slotProps={{
+                    secondary: { component: 'div' },
+                }}
                 style={{ marginLeft: 15 }}
                 secondary={
                     <ProgressiveText
@@ -291,7 +293,7 @@ export const ActivityItem = memo<ActivityItemProps>(function ActivityItem({ tran
                             <Trans>Infinite</Trans>
                         :   formatTokenBalance(approveAmount, approveToken.decimals)}
                     </strong>
-                    <TextOverflowTooltip title={approveToken.symbol} PopperProps={popperProps}>
+                    <TextOverflowTooltip title={approveToken.symbol} slotProps={{ popper: popperProps }}>
                         <span className={classes.symbol}>{approveToken.symbol}</span>
                     </TextOverflowTooltip>
                 </Typography>
@@ -303,7 +305,7 @@ export const ActivityItem = memo<ActivityItemProps>(function ActivityItem({ tran
                         return (
                             <Typography key={i} className={classes.asset} component="div">
                                 <strong className={classes.amount}>{`${isSend ? '-' : '+'} ${amount} `}</strong>
-                                <TextOverflowTooltip title={token.symbol} PopperProps={popperProps}>
+                                <TextOverflowTooltip title={token.symbol} slotProps={{ popper: popperProps }}>
                                     <span className={classes.symbol}>{token.symbol}</span>
                                 </TextOverflowTooltip>
                             </Typography>
@@ -359,7 +361,9 @@ export const RecentActivityItem = memo<RecentActivityItemProps>(function RecentA
                 />
             </Box>
             <ListItemText
-                secondaryTypographyProps={{ component: 'div' }}
+                slotProps={{
+                    secondary: { component: 'div' },
+                }}
                 style={{ marginLeft: 15 }}
                 secondary={
                     <Box>
@@ -400,7 +404,7 @@ export const RecentActivityItem = memo<RecentActivityItemProps>(function RecentA
                     <Trans>Send</Trans>
                 </Typography>
             </ListItemText>
-            <Box ml="auto">
+            <Box sx={{ ml: 'auto' }}>
                 {candidate.value && nativeToken ?
                     <Typography className={classes.asset}>
                         <strong className={classes.amount}>
@@ -424,12 +428,14 @@ export const ActivityItemSkeleton = memo<ListItemProps>(function ActivityItemSke
                 <Skeleton variant="circular" className={classes.badgeIcon} width={16} height={16} />
             </Box>
             <ListItemText
-                secondaryTypographyProps={{ component: 'div' }}
+                slotProps={{
+                    secondary: { component: 'div' },
+                }}
                 style={{ marginLeft: 15 }}
                 secondary={<Skeleton variant="text" width={100} />}>
                 <Skeleton variant="text" width={90} />
             </ListItemText>
-            <Box ml="auto">
+            <Box sx={{ ml: 'auto' }}>
                 <Skeleton variant="text" width={40} />
             </Box>
         </ListItem>
diff --git a/packages/mask/popups/pages/Wallet/components/ActivityList/index.tsx b/packages/mask/popups/pages/Wallet/components/ActivityList/index.tsx
index 47d77f3b1330..113eab5a391c 100644
--- a/packages/mask/popups/pages/Wallet/components/ActivityList/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/ActivityList/index.tsx
@@ -76,7 +76,7 @@ export const ActivityList = memo(function ActivityList() {
 
     if (!isPending && !localeTxes.length && !transactions?.length)
         return (
-            <EmptyStatus height="100%">
+            <EmptyStatus sx={{ height: '100%' }}>
                 <Trans>No Data</Trans>
             </EmptyStatus>
         )
@@ -112,7 +112,7 @@ export const ActivityList = memo(function ActivityList() {
                 })}
                 {isFetching ? range(4).map((i) => <ActivityItemSkeleton key={i} />) : null}
             </List>
-            <ElementAnchor callback={() => fetchNextPage()} key={transactions?.length} height={10} />
+            <ElementAnchor callback={() => fetchNextPage()} key={transactions?.length} sx={{ height: 10 }} />
         </div>
     )
 })
diff --git a/packages/mask/popups/pages/Wallet/components/AssetsList/index.tsx b/packages/mask/popups/pages/Wallet/components/AssetsList/index.tsx
index ec64879fae26..3c8adfdf54d9 100644
--- a/packages/mask/popups/pages/Wallet/components/AssetsList/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/AssetsList/index.tsx
@@ -135,7 +135,7 @@ const AssetItem = memo(function AssetItem({ asset, onItemClick, ...rest }: Asset
                     />
                 </Typography>
             }>
-            <Box position="relative">
+            <Box sx={{ position: 'relative' }}>
                 <TokenIcon
                     className={classes.tokenIcon}
                     chainId={asset.chainId}
@@ -155,7 +155,9 @@ const AssetItem = memo(function AssetItem({ asset, onItemClick, ...rest }: Asset
             </Box>
             <ListItemText
                 className={classes.text}
-                secondaryTypographyProps={{ component: 'div' }}
+                slotProps={{
+                    secondary: { component: 'div' },
+                }}
                 secondary={
                     <>
                         <TextOverflowTooltip title={`${balance.value} ${asset.symbol}`}>
@@ -228,7 +230,7 @@ const AssetsListSkeleton = memo(function AssetsListSkeleton() {
                             <Skeleton width={60} />
                         </Typography>
                     }>
-                    <Box position="relative">
+                    <Box sx={{ position: 'relative' }}>
                         <Skeleton variant="circular" className={classes.tokenIcon} />
                         <Skeleton variant="circular" width={16} height={16} className={classes.badgeIcon} />
                     </Box>
diff --git a/packages/mask/popups/pages/Wallet/components/DisconnectModal/index.tsx b/packages/mask/popups/pages/Wallet/components/DisconnectModal/index.tsx
index 7d4a7c2ae18e..58d0e5d0ff83 100644
--- a/packages/mask/popups/pages/Wallet/components/DisconnectModal/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/DisconnectModal/index.tsx
@@ -102,7 +102,7 @@ const DisconnectModal = memo(function DisconnectModal({ origin, onClose }: Disco
         onMutate: async () => {
             await queryClient.invalidateQueries({ queryKey: ['wallet-granted-origins', address] })
             showSnackbar(
-                <Box display="flex" alignItems="center">
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Icons.FillSuccess style={{ marginRight: 6 }} />
                     <Trans>Disconnected successfully.</Trans>
                 </Box>,
@@ -122,7 +122,7 @@ const DisconnectModal = memo(function DisconnectModal({ origin, onClose }: Disco
         onMutate: async () => {
             await queryClient.invalidateQueries({ queryKey: ['wallet-granted-origins', address!] })
             showSnackbar(
-                <Box display="flex" alignItems="center">
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Icons.FillSuccess style={{ marginRight: 6 }} />
                     <Trans>Disconnected successfully.</Trans>
                 </Box>,
diff --git a/packages/mask/popups/pages/Wallet/components/ImportCreateWallet/index.tsx b/packages/mask/popups/pages/Wallet/components/ImportCreateWallet/index.tsx
index da6007fe0194..27130814ebeb 100644
--- a/packages/mask/popups/pages/Wallet/components/ImportCreateWallet/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/ImportCreateWallet/index.tsx
@@ -139,7 +139,12 @@ export const ImportCreateWallet = memo<Props>(function ImportCreateWallet({ onCh
     const oauthTimeout = error?.message === timeoutMessage
 
     return (
-        <Box display="flex" flexDirection="column" gap={1.5} position="relative" {...props}>
+        <Box
+            {...props}
+            sx={[
+                { display: 'flex', flexDirection: 'column', gap: 1.5, position: 'relative' },
+                ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+            ]}>
             <Box
                 className={classes.addWalletWrapper}
                 onClick={async () => {
@@ -207,16 +212,16 @@ export const ImportCreateWallet = memo<Props>(function ImportCreateWallet({ onCh
             {creatingPrivy || oauthTimeout ?
                 <Box className={classes.mask}>
                     {oauthTimeout ?
-                        <Box display="flex" flexDirection="column" alignItems="center">
+                        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                             <Icons.Time size={32} color={theme.palette.maskColor.main} />
-                            <Typography color={theme.palette.maskColor.second} fontWeight={400} my={1.5}>
+                            <Typography color={theme.palette.maskColor.second} sx={{ fontWeight: 400, my: 1.5 }}>
                                 <Trans>Your X account authorization has timed out. Please try again.</Trans>
                             </Typography>
                             <ActionButton fullWidth onClick={createPrivyWallet}>
                                 <Trans>Try Again</Trans>
                             </ActionButton>
                         </Box>
-                    :   <LoadingStatus gap={3}>
+                    :   <LoadingStatus sx={{ gap: 3 }}>
                             <Trans>
                                 Creating or retrieving your wallet with Privy. Please confirm on the X authorization
                                 page.
diff --git a/packages/mask/popups/pages/Wallet/components/StartUp/index.tsx b/packages/mask/popups/pages/Wallet/components/StartUp/index.tsx
index 93bb1c9495fb..5717168214b6 100644
--- a/packages/mask/popups/pages/Wallet/components/StartUp/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/StartUp/index.tsx
@@ -66,14 +66,14 @@ export const WalletStartUp = memo(function WalletStartUp() {
                     </Typography>
                 </Box>
             </WalletSetupHeaderUI>
-            <Box className={classes.content} gap={1.5}>
+            <Box className={classes.content} sx={{ gap: 1.5 }}>
                 <Typography className={classes.placeholderDescription}>
                     <Trans>
                         Supports traditional wallet creation and import, creation of Firefly.social wallets via your X
                         account.
                     </Trans>
                 </Typography>
-                <ImportCreateWallet onChoose={onEnterCreateWallet} flex="column" gap={1.5} />
+                <ImportCreateWallet onChoose={onEnterCreateWallet} sx={{ flex: 'column', gap: 1.5 }} />
             </Box>
         </Box>
     )
diff --git a/packages/mask/popups/pages/Wallet/components/WalletAssets/index.tsx b/packages/mask/popups/pages/Wallet/components/WalletAssets/index.tsx
index 8d17defba763..8c2743dab654 100644
--- a/packages/mask/popups/pages/Wallet/components/WalletAssets/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/WalletAssets/index.tsx
@@ -104,8 +104,8 @@ export const Component = memo(function WalletAssets() {
 
     return wallet ?
             <WalletAssetsUI onAddToken={handleAdd} />
-        :   <Box pb="72px" display="flex" flexGrow={1} minHeight={0}>
-                <SelectWallet flexGrow={1} embed />
+        :   <Box sx={{ pb: '72px', display: 'flex', flexGrow: 1, minHeight: 0 }}>
+                <SelectWallet sx={{ flexGrow: 1 }} embed />
             </Box>
 })
 
diff --git a/packages/mask/popups/pages/Wallet/components/WalletHeader/UI.tsx b/packages/mask/popups/pages/Wallet/components/WalletHeader/UI.tsx
index 1610e685c1fb..2fa6fd39d038 100644
--- a/packages/mask/popups/pages/Wallet/components/WalletHeader/UI.tsx
+++ b/packages/mask/popups/pages/Wallet/components/WalletHeader/UI.tsx
@@ -176,8 +176,8 @@ export const WalletHeaderUI = memo<WalletHeaderUIProps>(function WalletHeaderUI(
                         <ImageIcon size={30} icon={currentNetwork.iconUrl} name={currentNetwork.name || '?'} />
                     :   <ChainIcon size={30} color={currentNetwork?.color} name={currentNetwork?.name} />}
 
-                    <Box ml={0.5} overflow="auto">
-                        <Box overflow="auto" display="flex">
+                    <Box sx={{ ml: 0.5, overflow: 'auto' }}>
+                        <Box sx={{ overflow: 'auto', display: 'flex' }}>
                             <TextOverflowTooltip title={networkName}>
                                 <Typography className={classes.chainName} component="div">
                                     {networkName}
@@ -215,7 +215,7 @@ export const WalletHeaderUI = memo<WalletHeaderUIProps>(function WalletHeaderUI(
                         onActionClick()
                     }}>
                     <WalletAvatar address={wallet.address} size={30} />
-                    <Box ml={0.5} overflow="hidden">
+                    <Box sx={{ ml: 0.5, overflow: 'hidden' }}>
                         <TextOverflowTooltip title={wallet.name}>
                             <Typography className={classes.nickname}>{walletName}</Typography>
                         </TextOverflowTooltip>
@@ -256,7 +256,7 @@ export const WalletHeaderUI = memo<WalletHeaderUIProps>(function WalletHeaderUI(
             {disabled ? null : (
                 <>
                     <WalletAssetsValue className={classes.balance} skeletonWidth={100} skeletonHeight="2em" />
-                    <ActionGroup chainId={chainId} mt={2} />
+                    <ActionGroup chainId={chainId} sx={{ mt: 2 }} />
                 </>
             )}
         </Box>
diff --git a/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx b/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx
index 41d73ecefcab..ea9d181907cf 100644
--- a/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx
+++ b/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx
@@ -5,7 +5,7 @@ import { useActivatedPluginsSiteAdaptor } from '@masknet/plugin-infra/content-sc
 
 export const Container = memo(function Container(props: PropsWithChildren) {
     return (
-        <Typography color="textPrimary" fontSize="inherit">
+        <Typography color="textPrimary" sx={{ fontSize: 'inherit' }}>
             {props.children}
         </Typography>
     )
@@ -14,7 +14,7 @@ export const Container = memo(function Container(props: PropsWithChildren) {
 export const Link = memo(function Anchor(props: RenderFragmentsContextType.LinkProps) {
     const text = props.children.startsWith('https://mask.io') ? 'Mask.io' : props.children
     return (
-        <MaterialLink href={props.href} fontSize="inherit">
+        <MaterialLink href={props.href} sx={{ fontSize: 'inherit' }}>
             {text}
             {props.suggestedPostImage}
         </MaterialLink>
diff --git a/packages/mask/shared-ui/hooks/useThemeLanguage.ts b/packages/mask/shared-ui/hooks/useThemeLanguage.ts
index 19816654e180..2d5b94e48dd6 100644
--- a/packages/mask/shared-ui/hooks/useThemeLanguage.ts
+++ b/packages/mask/shared-ui/hooks/useThemeLanguage.ts
@@ -1,5 +1,5 @@
 import { LanguageOptions, SupportedLanguages } from '@masknet/public-api'
-import { jaJP, koKR, zhTW, zhCN, enUS, type Localization } from '@mui/material/locale/index.js'
+import { jaJP, koKR, zhTW, zhCN, enUS, type Localization } from '@mui/material/locale'
 import { updateLanguage } from '@masknet/shared-base'
 import { startTransition, useEffect } from 'react'
 
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx
index b38afdec3b94..6d79990559b5 100644
--- a/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx
+++ b/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx
@@ -175,12 +175,12 @@ export function EventList({ date }: EventListProps) {
                     )
                 })}
                 {hasNextPage ?
-                    <ElementAnchor height={30} callback={() => fetchNextPage()}>
+                    <ElementAnchor sx={{ height: 30 }} callback={() => fetchNextPage()}>
                         {isFetching ?
                             <LoadingBase className={classes.loading} />
                         :   null}
                     </ElementAnchor>
-                :   <Typography color={(theme) => theme.palette.maskColor.second} textAlign="center" py={2}>
+                :   <Typography sx={{ color: (theme) => theme.palette.maskColor.second, textAlign: 'center', py: 2 }}>
                         <Trans>No more data available.</Trans>
                     </Typography>
                 }
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx
index 43d6604c4c3e..bd10678faffa 100644
--- a/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx
+++ b/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx
@@ -215,12 +215,12 @@ export function NewsList({ date }: NewsListProps) {
                     )
                 })}
                 {hasNextPage ?
-                    <ElementAnchor height={30} callback={() => fetchNextPage()}>
+                    <ElementAnchor sx={{ height: 30 }} callback={() => fetchNextPage()}>
                         {isFetching ?
                             <LoadingBase className={classes.loading} />
                         :   null}
                     </ElementAnchor>
-                :   <Typography color={(theme) => theme.palette.maskColor.second} textAlign="center" py={2}>
+                :   <Typography sx={{ color: (theme) => theme.palette.maskColor.second, textAlign: 'center', py: 2 }}>
                         <Trans>No more data available.</Trans>
                     </Typography>
                 }
diff --git a/packages/plugins/CrossChainBridge/src/SiteAdaptor/components/BridgeStack.tsx b/packages/plugins/CrossChainBridge/src/SiteAdaptor/components/BridgeStack.tsx
index 99e101d5fad6..52c2de68ab13 100644
--- a/packages/plugins/CrossChainBridge/src/SiteAdaptor/components/BridgeStack.tsx
+++ b/packages/plugins/CrossChainBridge/src/SiteAdaptor/components/BridgeStack.tsx
@@ -52,7 +52,7 @@ export function BridgeStack() {
     const { classes } = useStyles()
 
     return (
-        <Stack height="100%" spacing={2}>
+        <Stack sx={{ height: '100%' }} spacing={2}>
             {crossChainBridge.map((bridge) => (
                 <div className={classes.bridgeItem} key={bridge.ID} onClick={() => openWindow(bridge.link)}>
                     {bridge.icon}
diff --git a/packages/plugins/Debugger/src/SiteAdaptor/components/ConnectionContent.tsx b/packages/plugins/Debugger/src/SiteAdaptor/components/ConnectionContent.tsx
index 4d033037c721..62c3119dd42b 100644
--- a/packages/plugins/Debugger/src/SiteAdaptor/components/ConnectionContent.tsx
+++ b/packages/plugins/Debugger/src/SiteAdaptor/components/ConnectionContent.tsx
@@ -249,7 +249,7 @@ export function ConnectionContent() {
                 <TableBody>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Add Custom Network
                             </Typography>
                         </TableCell>
@@ -263,7 +263,7 @@ export function ConnectionContent() {
                         <>
                             <TableRow>
                                 <TableCell>
-                                    <Typography variant="body2" whiteSpace="nowrap">
+                                    <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                         Use Custom Network
                                     </Typography>
                                 </TableCell>
@@ -275,7 +275,7 @@ export function ConnectionContent() {
                             </TableRow>
                             <TableRow>
                                 <TableCell>
-                                    <Typography variant="body2" whiteSpace="nowrap">
+                                    <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                         Remove Custom Network
                                     </Typography>
                                 </TableCell>
@@ -287,7 +287,7 @@ export function ConnectionContent() {
                             </TableRow>
                             <TableRow>
                                 <TableCell>
-                                    <Typography variant="body2" whiteSpace="nowrap">
+                                    <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                         Rename Custom Network
                                     </Typography>
                                 </TableCell>
@@ -301,7 +301,7 @@ export function ConnectionContent() {
                     :   null}
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Capture Event
                             </Typography>
                         </TableCell>
@@ -313,7 +313,7 @@ export function ConnectionContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Capture Exception
                             </Typography>
                         </TableCell>
@@ -325,7 +325,7 @@ export function ConnectionContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Estimate
                             </Typography>
                         </TableCell>
@@ -337,7 +337,7 @@ export function ConnectionContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Transfer
                             </Typography>
                         </TableCell>
@@ -349,7 +349,7 @@ export function ConnectionContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Approve Fungible Token
                             </Typography>
                         </TableCell>
@@ -361,7 +361,7 @@ export function ConnectionContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Approve Non-Fungible Token
                             </Typography>
                         </TableCell>
@@ -373,7 +373,7 @@ export function ConnectionContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Sign Message
                             </Typography>
                         </TableCell>
@@ -395,7 +395,7 @@ export function ConnectionContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Sign Typed Data
                             </Typography>
                         </TableCell>
@@ -417,7 +417,7 @@ export function ConnectionContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Sign Transaction
                             </Typography>
                         </TableCell>
@@ -439,7 +439,7 @@ export function ConnectionContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Switch Chain
                             </Typography>
                         </TableCell>
@@ -463,7 +463,7 @@ export function ConnectionContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Connect Wallet
                             </Typography>
                         </TableCell>
@@ -485,7 +485,7 @@ export function ConnectionContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Disconnect Wallet
                             </Typography>
                         </TableCell>
diff --git a/packages/plugins/Debugger/src/SiteAdaptor/components/HubContent.tsx b/packages/plugins/Debugger/src/SiteAdaptor/components/HubContent.tsx
index 35f1199bb2e9..0fef2f577b2e 100644
--- a/packages/plugins/Debugger/src/SiteAdaptor/components/HubContent.tsx
+++ b/packages/plugins/Debugger/src/SiteAdaptor/components/HubContent.tsx
@@ -54,7 +54,7 @@ export function HubContent() {
                 <TableBody>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Keyword
                             </Typography>
                         </TableCell>
@@ -70,7 +70,7 @@ export function HubContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Contract Address
                             </Typography>
                         </TableCell>
@@ -86,7 +86,7 @@ export function HubContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Token ID
                             </Typography>
                         </TableCell>
@@ -103,7 +103,7 @@ export function HubContent() {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Source Type
                             </Typography>
                         </TableCell>
@@ -133,7 +133,7 @@ export function HubContent() {
                         return (
                             <TableRow key={key}>
                                 <TableCell>
-                                    <Typography variant="body2" whiteSpace="nowrap">
+                                    <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                         {key}
                                     </Typography>
                                 </TableCell>
@@ -163,7 +163,7 @@ export function HubContent() {
                     })}
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Open Select Token
                             </Typography>
                         </TableCell>
diff --git a/packages/plugins/Debugger/src/SiteAdaptor/components/TabContent.tsx b/packages/plugins/Debugger/src/SiteAdaptor/components/TabContent.tsx
index 663ae44b73ac..3f8c1eaaf5ea 100644
--- a/packages/plugins/Debugger/src/SiteAdaptor/components/TabContent.tsx
+++ b/packages/plugins/Debugger/src/SiteAdaptor/components/TabContent.tsx
@@ -104,7 +104,7 @@ export function TabContent({ identity, socialAccount }: TabContentProps) {
                 <TableBody>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Profile Data
                             </Typography>
                         </TableCell>
@@ -112,7 +112,7 @@ export function TabContent({ identity, socialAccount }: TabContentProps) {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 Address Name
                             </Typography>
                         </TableCell>
@@ -120,7 +120,7 @@ export function TabContent({ identity, socialAccount }: TabContentProps) {
                     </TableRow>
                     <TableRow>
                         <TableCell>
-                            <Typography variant="body2" whiteSpace="nowrap">
+                            <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}>
                                 All Address Names
                             </Typography>
                         </TableCell>
diff --git a/packages/plugins/FileService/src/SiteAdaptor/components/FileBrowser.tsx b/packages/plugins/FileService/src/SiteAdaptor/components/FileBrowser.tsx
index fc553c8e2b39..9d645edead9e 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/components/FileBrowser.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/components/FileBrowser.tsx
@@ -12,7 +12,7 @@ import { useFileManagement } from '../contexts/index.js'
 import { FileList, SelectableFileList } from './FileList.js'
 import { Trans } from '@lingui/react/macro'
 
-const Tabs: typeof MuiTabs = styled(MuiTabs)(({ theme }) => ({
+const Tabs = styled(MuiTabs)(({ theme }) => ({
     display: 'flex',
     gap: theme.spacing(0.5),
     [`& .${tabsClasses.indicator}`]: {
@@ -231,7 +231,7 @@ export function FileBrowser({ selectMode, selectedFileIds = EMPTY_LIST }: Props)
                                     aria-label={x.key}
                                     value={x.value}
                                     label={
-                                        <Typography variant="body2" fontWeight={700}>
+                                        <Typography variant="body2" sx={{ fontWeight: 700 }}>
                                             {x.value}
                                         </Typography>
                                     }
diff --git a/packages/plugins/FileService/src/SiteAdaptor/components/FileList.tsx b/packages/plugins/FileService/src/SiteAdaptor/components/FileList.tsx
index 4f4fbe89e4e8..1dbaff461441 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/components/FileList.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/components/FileList.tsx
@@ -88,7 +88,8 @@ export function FileList({ files, onLoadMore, className, onDownload, onSend, ...
                 message: (
                     <Trans>
                         Do you want to delete file{' '}
-                        <Typography color={(theme) => theme.palette.maskColor.main} fontSize={14} fontWeight={700}>
+                        <Typography
+                            sx={{ color: (theme) => theme.palette.maskColor.main, fontSize: 14, fontWeight: 700 }}>
                             {file.name}
                         </Typography>
                     </Trans>
diff --git a/packages/plugins/FileService/src/SiteAdaptor/components/Files/ManageableFile.tsx b/packages/plugins/FileService/src/SiteAdaptor/components/Files/ManageableFile.tsx
index 799b9a916f31..e1c7679a46f3 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/components/Files/ManageableFile.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/components/Files/ManageableFile.tsx
@@ -124,7 +124,9 @@ export const ManageableFile = memo(({ file, onDownload, onRename, onDelete, onSe
                                 onDelete?.(file)
                                 setMenuOpen(false)
                             }}>
-                            <Typography className={classes.menuLabel} color={(theme) => theme.palette.maskColor.danger}>
+                            <Typography
+                                className={classes.menuLabel}
+                                sx={{ color: (theme) => theme.palette.maskColor.danger }}>
                                 <Trans>Delete</Trans>
                             </Typography>
                         </MenuItem>
diff --git a/packages/plugins/Gitcoin/src/SiteAdaptor/PreviewCard.tsx b/packages/plugins/Gitcoin/src/SiteAdaptor/PreviewCard.tsx
index 41d40fbef61e..b0d1bf2b91ac 100644
--- a/packages/plugins/Gitcoin/src/SiteAdaptor/PreviewCard.tsx
+++ b/packages/plugins/Gitcoin/src/SiteAdaptor/PreviewCard.tsx
@@ -167,13 +167,13 @@ export function PreviewCard(props: PreviewCardProps) {
     if (loading)
         return (
             <article className={classes.card} data-hide-scrollbar>
-                <LoadingStatus height={148} p={1} />
+                <LoadingStatus sx={{ height: 148, p: 1 }} />
             </article>
         )
     if (error)
         return (
             <article className={classes.card} data-hide-scrollbar>
-                <ReloadStatus height={120} message={<Trans>Something went wrong.</Trans>} onRetry={refetch} />
+                <ReloadStatus sx={{ height: 120 }} message={<Trans>Something went wrong.</Trans>} onRetry={refetch} />
             </article>
         )
 
@@ -243,7 +243,7 @@ export function PreviewCard(props: PreviewCardProps) {
 
     return (
         <article className={classes.card} data-hide-scrollbar>
-            <Box display="flex" gap={1.5} justifyContent="space-between" alignItems="center">
+            <Box sx={{ display: 'flex', gap: 1.5, justifyContent: 'space-between', alignItems: 'center' }}>
                 <Typography component="h1" className={classes.title}>
                     {project.metadata.title}
                 </Typography>
@@ -354,7 +354,7 @@ function RoundItem({ round }: { round: Round }) {
         <Box className={classes.round}>
             <Typography className={classes.roundName}>{round.project.name}</Typography>
             <Typography className={classes.roundName}>{round.roundMetadata.name}</Typography>
-            <Box display="flex" justifyContent="space-between" alignItems="flex-end">
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                 <Typography className={classes.roundName}>
                     {roundType === 'Quadratic funding' ?
                         <span>
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/CheckSecurityDialog.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/CheckSecurityDialog.tsx
index 09631da56bee..3156138fc78a 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/CheckSecurityDialog.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/CheckSecurityDialog.tsx
@@ -84,15 +84,15 @@ export function CheckSecurityDialog({ open, onClose, searchHidden, chainId, toke
     return (
         <InjectedDialog title={<Trans>Check Security</Trans>} open={open} onClose={onClose}>
             <DialogContent className={classes.content}>
-                <Stack minHeight={0} flexGrow={1}>
+                <Stack sx={{ minHeight: 0, flexGrow: 1 }}>
                     {!searchHidden && (
-                        <Box m={2}>
+                        <Box sx={{ m: 2 }}>
                             <SearchBox onSearch={onSearch} />
                         </Box>
                     )}
-                    <Stack flex={1} overflow="auto" p={2}>
+                    <Stack sx={{ flex: 1, overflow: 'auto', p: 2 }}>
                         {searching || loadingToken ?
-                            <Stack height="100%" justifyContent="center" alignItems="center">
+                            <Stack sx={{ height: '100%', justifyContent: 'center', alignItems: 'center' }}>
                                 <LoadingBase size={36} />
                             </Stack>
                         : error ?
@@ -104,7 +104,7 @@ export function CheckSecurityDialog({ open, onClose, searchHidden, chainId, toke
                                 tokenPrice={tokenPrice}
                                 tokenMarketCap={tokenMarketCap ?? undefined}
                             />
-                        :   <Stack height="100%" justifyContent="center" alignItems="center">
+                        :   <Stack sx={{ height: '100%', justifyContent: 'center', alignItems: 'center' }}>
                                 <DefaultPlaceholder />
                             </Stack>
                         }
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/CheckSecurityConfirmDialog.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/CheckSecurityConfirmDialog.tsx
index e258aed5bc17..2475fbd84fc3 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/CheckSecurityConfirmDialog.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/CheckSecurityConfirmDialog.tsx
@@ -42,7 +42,7 @@ function CheckSecurityConfirmDialog({ open, onClose }: Props) {
             onClose={onClose}
             classes={{ paper: classes.paper, dialogContent: classes.content }}>
             <DialogContent className={classes.content}>
-                <Stack alignItems="center">
+                <Stack sx={{ alignItems: 'center' }}>
                     <Typography style={{ fontSize: '14px', fontWeight: 500 }}>
                         <Trans>Close [Check Security]?</Trans>
                     </Typography>
@@ -61,7 +61,7 @@ function CheckSecurityConfirmDialog({ open, onClose }: Props) {
                         <Trans>We recommend new Web3 users to keep [Check Security] open.</Trans>
                     </Typography>
                 </Stack>
-                <Stack marginTop="36px">
+                <Stack sx={{ marginTop: '36px' }}>
                     <Button
                         className={classes.confirmButton}
                         onClick={() => {
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/DefaultPlaceholder.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/DefaultPlaceholder.tsx
index f8c05b0236ba..31230b3b42b3 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/DefaultPlaceholder.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/DefaultPlaceholder.tsx
@@ -4,7 +4,7 @@ import { Trans } from '@lingui/react/macro'
 
 export function DefaultPlaceholder() {
     return (
-        <Stack alignItems="center" spacing={2.5}>
+        <Stack sx={{ alignItems: 'center' }} spacing={2.5}>
             <Box>
                 <Icons.SecurityChecker size={48} />
             </Box>
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/Footer.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/Footer.tsx
index e3b54a36ceca..f8b57dbb170f 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/Footer.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/Footer.tsx
@@ -5,23 +5,27 @@ import { GoPlusLabLogo } from '../icons/Logo.js'
 
 export function Footer() {
     return (
-        <Stack justifyContent="flex-end" direction="row">
-            <Box display="flex" justifyContent="center">
+        <Stack direction="row" sx={{ justifyContent: 'flex-end' }}>
+            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
                 <Link href={PLUGIN_OFFICIAL_WEBSITE} target="_blank" underline="none" rel="noopener noreferrer">
-                    <Stack direction="row" justifyContent="center">
+                    <Stack direction="row" sx={{ justifyContent: 'center' }}>
                         <Trans>
                             <Typography
-                                fontSize="14px"
-                                color={(theme) => theme.palette.maskColor.second}
-                                fontWeight="700"
-                                marginRight="4px">
+                                sx={{
+                                    fontSize: '14px',
+                                    color: (theme) => theme.palette.maskColor.second,
+                                    fontWeight: '700',
+                                    marginRight: '4px',
+                                }}>
                                 Powered by
                             </Typography>
                             <Typography
-                                fontSize="14px"
-                                color={(theme) => theme.palette.maskColor.main}
-                                fontWeight="700"
-                                marginRight="12px">
+                                sx={{
+                                    fontSize: '14px',
+                                    color: (theme) => theme.palette.maskColor.main,
+                                    fontWeight: '700',
+                                    marginRight: '12px',
+                                }}>
                                 Go+
                             </Typography>
                         </Trans>
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/NotFound.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/NotFound.tsx
index b221370f5a20..3ac5f4cee8c7 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/NotFound.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/NotFound.tsx
@@ -4,19 +4,19 @@ import { Trans } from '@lingui/react/macro'
 
 export function NotFound() {
     return (
-        <Stack justifyContent="flex-start" alignItems="flex-start">
+        <Stack sx={{ justifyContent: 'flex-start', alignItems: 'flex-start' }}>
             <Trans>
-                <Typography fontSize={12} color={MaskColorVar.orangeMain}>
+                <Typography color={MaskColorVar.orangeMain} sx={{ fontSize: 12 }}>
                     Results not found now. it might be chain network error, on-chain data abnormal or the token address
                     is not covered now. please check as followings:
                 </Typography>
-                <Typography fontSize={12} color={MaskColorVar.orangeMain}>
+                <Typography color={MaskColorVar.orangeMain} sx={{ fontSize: 12 }}>
                     1. Make sure network is working;
                 </Typography>
-                <Typography fontSize={12} color={MaskColorVar.orangeMain}>
+                <Typography color={MaskColorVar.orangeMain} sx={{ fontSize: 12 }}>
                     2. Make sure the chain network or token address is correct;
                 </Typography>
-                <Typography fontSize={12} color={MaskColorVar.orangeMain}>
+                <Typography color={MaskColorVar.orangeMain} sx={{ fontSize: 12 }}>
                     3. Token address is not covered now, it might take more than 60s to get contract information again.
                     Please try it later.
                 </Typography>
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskCard.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskCard.tsx
index 230ead353ef9..0d6ac63cb584 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskCard.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskCard.tsx
@@ -61,7 +61,7 @@ interface RiskCardUIProps {
 export const RiskCardUI = memo<RiskCardUIProps>(({ icon, title, titleColor, description }) => {
     const { classes } = useStyles()
     return (
-        <Stack spacing={1} key={title} p={1.5} direction="row" className={classes.detectionCard}>
+        <Stack spacing={1} key={title} sx={{ p: 1.5 }} direction="row" className={classes.detectionCard}>
             <Box className={classes.icon}>{icon}</Box>
             <Box>
                 <Typography className={classes.header} color={titleColor}>
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskWarningDialog.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskWarningDialog.tsx
index 0a3c08dcb32b..c71d652bbf3d 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskWarningDialog.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskWarningDialog.tsx
@@ -91,16 +91,16 @@ export function RiskWarningDialog({ open, token, onSetDialog }: Props) {
             fullWidth
             title={<Trans>Confirm swap risk</Trans>}>
             <DialogContent className={classes.content}>
-                <Stack alignItems="center">
+                <Stack sx={{ alignItems: 'center' }}>
                     <Icons.SecurityRisk size={68} />
                     <Typography className={classes.warningTitle}>
                         <Trans>Risk Warning</Trans>
                     </Typography>
                 </Stack>
-                <Stack marginTop="51px">
+                <Stack sx={{ marginTop: '51px' }}>
                     <Trans>
-                        <Typography color={(theme) => theme.palette.maskColor.danger}>Dear Users,</Typography>
-                        <Typography color={(theme) => theme.palette.maskColor.danger} marginTop="16px">
+                        <Typography sx={{ color: (theme) => theme.palette.maskColor.danger }}>Dear Users,</Typography>
+                        <Typography sx={{ color: (theme) => theme.palette.maskColor.danger, marginTop: '16px' }}>
                             Clicking the confirm button means that you agree to take the potential risks and proceed
                             with the transaction.
                         </Typography>
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SearchBox.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SearchBox.tsx
index b03a1c6669f1..72e612fdab99 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SearchBox.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SearchBox.tsx
@@ -73,12 +73,14 @@ export const SearchBox = memo<SearchBoxProps>(function SearchBox({ onSearch }) {
                             setSelectedChain(chain)
                         }}>
                         <Stack
-                            display="inline-flex"
                             direction="row"
-                            alignItems="center"
-                            justifyContent="flex-start"
-                            gap={1}
-                            width="100%">
+                            sx={{
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                justifyContent: 'flex-start',
+                                gap: 1,
+                                width: '100%',
+                            }}>
                             <WalletIcon mainIcon={chain.icon} size={18} />
                             <Typography>{getChainName(chain)}</Typography>
                         </Stack>
@@ -90,25 +92,29 @@ export const SearchBox = memo<SearchBoxProps>(function SearchBox({ onSearch }) {
 
     return (
         <Stack direction="row" spacing={1}>
-            <Box width={140} height={40}>
+            <Box sx={{ width: 140, height: 40 }}>
                 <Button onClick={openMenu} variant="outlined" className={classes.selectedButton}>
                     <Stack
                         className={classes.option}
-                        display="inline-flex"
                         direction="row"
-                        justifyContent="space-between"
-                        alignItems="center"
-                        width="100%">
-                        <Stack gap={0.5} display="inline-flex" direction="row" alignItems="center">
+                        sx={{
+                            display: 'inline-flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            width: '100%',
+                        }}>
+                        <Stack direction="row" sx={{ gap: 0.5, display: 'inline-flex', alignItems: 'center' }}>
                             <WalletIcon mainIcon={selectedChain?.icon ?? supportedChains[0]?.icon} size={18} />
-                            <Typography fontSize={14}>{getChainName(selectedChain ?? supportedChains[0])}</Typography>
+                            <Typography sx={{ fontSize: 14 }}>
+                                {getChainName(selectedChain ?? supportedChains[0])}
+                            </Typography>
                         </Stack>
                         <KeyboardArrowDownIcon />
                     </Stack>
                 </Button>
             </Box>
-            <Stack direction="row" flex={1} spacing={1}>
-                <Box flex={1}>
+            <Stack direction="row" spacing={1} sx={{ flex: 1 }}>
+                <Box sx={{ flex: 1 }}>
                     <MaskTextField
                         placeholder={t`Please enter token contract address.`}
                         autoFocus
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx
index 2f6cb81e4f5c..2345f04d7a36 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx
@@ -79,14 +79,15 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
             <Stack
                 spacing={1}
                 direction="row"
-                justifyContent="space-between"
-                boxShadow={(theme) =>
-                    theme.palette.mode === 'light' ?
-                        ' 0px 0px 20px rgba(0, 0, 0, 0.05)'
-                    :   '0px 0px 20px rgba(255, 255, 255, 0.12);'
-                }
-                padding="16px"
-                borderRadius="16px">
+                sx={{
+                    justifyContent: 'space-between',
+                    boxShadow: (theme) =>
+                        theme.palette.mode === 'light' ?
+                            ' 0px 0px 20px rgba(0, 0, 0, 0.05)'
+                        :   '0px 0px 20px rgba(255, 255, 255, 0.12);',
+                    padding: '16px',
+                    borderRadius: '16px',
+                }}>
                 <Stack direction="row" spacing={0.8}>
                     {tokenSecurity?.token_name ?
                         <TokenIcon
@@ -140,8 +141,8 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
                 :   null}
             </Stack>
             <Stack spacing={1}>
-                <Stack direction="row" justifyContent="space-between">
-                    <Stack display="inline-flex" direction="row" alignItems="center" spacing={0.6}>
+                <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
+                    <Stack direction="row" sx={{ display: 'inline-flex', alignItems: 'center' }} spacing={0.6}>
                         <Typography variant="h6" className={classes.header}>
                             <Trans>Token info</Trans>
                         </Typography>
@@ -150,12 +151,12 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
                             sx={{ fontSize: 15, cursor: 'pointer' }}
                         />
                     </Stack>
-                    <Stack direction="row" alignItems="center" spacing={1}>
-                        <Typography component="span" lineHeight="14px" fontSize={14} fontWeight={400}>
+                    <Stack direction="row" sx={{ alignItems: 'center' }} spacing={1}>
+                        <Typography component="span" sx={{ lineHeight: '14px', fontSize: 14, fontWeight: 400 }}>
                             <Trans>More Details</Trans>
                         </Typography>
                         <Link
-                            lineHeight="14px"
+                            sx={{ lineHeight: '14px' }}
                             href={resolveGoLabLink(tokenSecurity.chainId, tokenSecurity.contract)}
                             target="_blank"
                             rel="noopener noreferrer">
@@ -167,14 +168,14 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
                     <TokenPanel tokenSecurity={tokenSecurity} tokenMarketCap={tokenMarketCap} />
                 </Collapse>
             </Stack>
-            <Stack spacing={1.5} flex={1}>
-                <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={3.5}>
+            <Stack spacing={1.5} sx={{ flex: 1 }}>
+                <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }} spacing={3.5}>
                     <Typography variant="h6" className={classes.header}>
                         <Trans>Security Detection</Trans>
                     </Typography>
-                    <Stack direction="row" alignItems="center" spacing={1.5}>
+                    <Stack direction="row" sx={{ alignItems: 'center' }} spacing={1.5}>
                         {riskyFactors !== 0 && (
-                            <Stack direction="row" alignItems="center" spacing={0.5}>
+                            <Stack direction="row" sx={{ alignItems: 'center' }} spacing={0.5}>
                                 {DefineMapping[SecurityMessageLevel.High].icon(16)}
                                 <Typography component="span" className={classes.itemTitle}>
                                     {riskyFactors > 1 ?
@@ -184,7 +185,7 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
                             </Stack>
                         )}
                         {attentionFactors !== 0 && (
-                            <Stack direction="row" alignItems="center" spacing={0.5}>
+                            <Stack direction="row" sx={{ alignItems: 'center' }} spacing={0.5}>
                                 {DefineMapping[SecurityMessageLevel.Medium].icon(16)}
                                 <Typography component="span" className={classes.itemTitle}>
                                     {attentionFactors > 1 ?
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/TokenPanel.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/TokenPanel.tsx
index bce23300cb0b..e4acdb0f31cc 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/TokenPanel.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/TokenPanel.tsx
@@ -43,8 +43,8 @@ export function TokenPanel({ tokenSecurity, tokenMarketCap, ref }: TokenPanelPro
 
     return (
         <Stack ref={ref} className={classes.card} spacing={2}>
-            <Stack height={128} justifyContent="space-between" flex={1}>
-                <Stack direction="row" justifyContent="space-between">
+            <Stack sx={{ height: 128, justifyContent: 'space-between', flex: 1 }}>
+                <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
                     <Typography className={classes.subtitle}>
                         <Trans>Token Name</Trans>
                     </Typography>
@@ -53,18 +53,18 @@ export function TokenPanel({ tokenSecurity, tokenMarketCap, ref }: TokenPanelPro
                         {tokenSecurity.token_name ? `(${tokenSecurity.token_name})` : null}{' '}
                     </Typography>
                 </Stack>
-                <Stack direction="row" justifyContent="space-between">
+                <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
                     <Typography className={classes.subtitle}>
                         <Trans>Token Contract Address</Trans>
                     </Typography>
-                    <Stack display="inline-flex" direction="row" alignItems="center" spacing={0.625}>
+                    <Stack direction="row" spacing={0.625} sx={{ display: 'inline-flex', alignItems: 'center' }}>
                         <Typography className={classes.cardValue}>
                             {tokenSecurity.contract ?
                                 formatEthereumAddress(tokenSecurity.contract, 4)
                             :   DEFAULT_PLACEHOLDER}
                         </Typography>
                         <Link
-                            lineHeight="14px"
+                            sx={{ lineHeight: '14px' }}
                             href={EVMExplorerResolver.fungibleTokenLink(tokenSecurity.chainId, tokenSecurity.contract)}
                             target="_blank"
                             rel="noopener noreferrer">
@@ -74,11 +74,11 @@ export function TokenPanel({ tokenSecurity, tokenMarketCap, ref }: TokenPanelPro
                         </Link>
                     </Stack>
                 </Stack>
-                <Stack direction="row" justifyContent="space-between">
+                <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
                     <Typography className={classes.subtitle}>
                         <Trans>Contract Creator</Trans>
                     </Typography>
-                    <Stack display="inline-flex" direction="row" alignItems="center" spacing={0.625}>
+                    <Stack direction="row" spacing={0.625} sx={{ display: 'inline-flex', alignItems: 'center' }}>
                         <Typography className={classes.cardValue}>
                             {tokenSecurity.creator_address ?
                                 formatEthereumAddress(tokenSecurity.creator_address ?? '', 4)
@@ -86,7 +86,7 @@ export function TokenPanel({ tokenSecurity, tokenMarketCap, ref }: TokenPanelPro
                         </Typography>
                         {tokenSecurity.creator_address ?
                             <Link
-                                lineHeight="14px"
+                                sx={{ lineHeight: '14px' }}
                                 href={EVMExplorerResolver.addressLink(
                                     tokenSecurity.chainId,
                                     tokenSecurity.creator_address,
@@ -100,11 +100,11 @@ export function TokenPanel({ tokenSecurity, tokenMarketCap, ref }: TokenPanelPro
                         :   null}
                     </Stack>
                 </Stack>
-                <Stack direction="row" justifyContent="space-between">
+                <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
                     <Typography className={classes.subtitle}>
                         <Trans>Contract Owner</Trans>
                     </Typography>
-                    <Stack display="inline-flex" direction="row" alignItems="center" spacing={0.625}>
+                    <Stack direction="row" spacing={0.625} sx={{ display: 'inline-flex', alignItems: 'center' }}>
                         <Typography className={classes.cardValue}>
                             {tokenSecurity.owner_address ?
                                 formatEthereumAddress(tokenSecurity.owner_address ?? '', 4)
@@ -112,7 +112,7 @@ export function TokenPanel({ tokenSecurity, tokenMarketCap, ref }: TokenPanelPro
                         </Typography>
                         {tokenSecurity.owner_address ?
                             <Link
-                                lineHeight="14px"
+                                sx={{ lineHeight: '14px' }}
                                 href={EVMExplorerResolver.addressLink(
                                     tokenSecurity.chainId,
                                     tokenSecurity.owner_address,
@@ -124,7 +124,7 @@ export function TokenPanel({ tokenSecurity, tokenMarketCap, ref }: TokenPanelPro
                         :   null}
                     </Stack>
                 </Stack>
-                <Stack direction="row" justifyContent="space-between">
+                <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
                     <Typography className={classes.subtitle}>
                         <Trans>Total Supply</Trans>
                     </Typography>
@@ -132,7 +132,7 @@ export function TokenPanel({ tokenSecurity, tokenMarketCap, ref }: TokenPanelPro
                         {tokenSecurity.total_supply ? formatSupply(tokenSecurity.total_supply) : DEFAULT_PLACEHOLDER}
                     </Typography>
                 </Stack>
-                <Stack direction="row" justifyContent="space-between">
+                <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
                     <Typography className={classes.subtitle}>
                         <Trans>Market Cap</Trans>
                     </Typography>
diff --git a/packages/plugins/Handle/src/SiteAdaptor/PluginHeader.tsx b/packages/plugins/Handle/src/SiteAdaptor/PluginHeader.tsx
index 6363c3654b35..c2e30a2a2b50 100644
--- a/packages/plugins/Handle/src/SiteAdaptor/PluginHeader.tsx
+++ b/packages/plugins/Handle/src/SiteAdaptor/PluginHeader.tsx
@@ -40,23 +40,27 @@ export function PluginHeader() {
     const publisher = plugin?.publisher
 
     return (
-        <Stack flexDirection="row" justifyContent="space-between" alignItems="center" className={classes.wrapper}>
-            <Stack flexDirection="row" justifyContent="space-between" gap={0.5} alignItems="center">
+        <Stack
+            className={classes.wrapper}
+            sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', gap: 0.5, alignItems: 'center' }}>
                 <Icons.DecentralizedSearch size={24} />
-                <Typography color={theme.palette.maskColor.dark} fontWeight="bolder">
+                <Typography color={theme.palette.maskColor.dark} sx={{ fontWeight: 'bolder' }}>
                     <Trans>DSearch</Trans>
                 </Typography>
             </Stack>
             <Box className={classes.provider}>
                 {publisher ?
-                    <Typography variant="body1" fontSize={14} fontWeight="700" className={classes.providerBy}>
+                    <Typography variant="body1" sx={{ fontSize: 14, fontWeight: '700' }} className={classes.providerBy}>
                         <Trans>
                             Powered by{' '}
                             <Typography
                                 className={classes.publisher}
                                 variant="body1"
-                                fontSize={14}
-                                fontWeight="700"
+                                sx={{
+                                    fontSize: 14,
+                                    fontWeight: '700',
+                                }}
                                 component="span"
                                 color={MaskColorVar.textPluginColor}>
                                 Mask Network
@@ -64,7 +68,7 @@ export function PluginHeader() {
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     href="https://mask.io"
-                                    fontSize={0}
+                                    sx={{ fontSize: 0 }}
                                     color={MaskColorVar.textPluginColor}>
                                     <Icons.LinkOut size={20} />
                                 </Link>
diff --git a/packages/plugins/ProfileCard/src/SiteAdaptor/AvatarBadge/AvatarBadge.tsx b/packages/plugins/ProfileCard/src/SiteAdaptor/AvatarBadge/AvatarBadge.tsx
index b27aa734ec1e..4499698bbd88 100644
--- a/packages/plugins/ProfileCard/src/SiteAdaptor/AvatarBadge/AvatarBadge.tsx
+++ b/packages/plugins/ProfileCard/src/SiteAdaptor/AvatarBadge/AvatarBadge.tsx
@@ -9,7 +9,7 @@ interface Props extends IconButtonProps {
 }
 export function AvatarBadge({ userId, socialAccounts }: Props) {
     return socialAccounts?.filter((x) => x.pluginID === NetworkPluginID.PLUGIN_EVM).length ?
-            <Box display="flex" alignItems="top" justifyContent="center">
+            <Box sx={{ display: 'flex', alignItems: 'top', justifyContent: 'center' }}>
                 <div style={{ display: 'flex', alignItems: 'top', justifyContent: 'center' }}>
                     <ProfileAvatarBadge userId={userId} address={socialAccounts[0]?.address} />
                 </div>
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/FinanceFeed.tsx b/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/FinanceFeed.tsx
index 0d2744b7d965..60f449417008 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/FinanceFeed.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/FinanceFeed.tsx
@@ -63,7 +63,7 @@ export const FinanceFeed = memo<FinanceFeedProps>(function FinanceFeed({ transac
                     </ShadowRootTooltip>
                 :   null}
             </div>
-            <FeedSummary transaction={transaction} mt={0.5} />
+            <FeedSummary transaction={transaction} sx={{ mt: 0.5 }} />
         </article>
     )
 })
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/index.tsx b/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/index.tsx
index 5ab789f3e507..b097c25595b4 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/index.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/index.tsx
@@ -50,8 +50,8 @@ export const FinanceFeeds = memo<FinanceFeedsProps>(function FinanceFeeds({ addr
 
     if (error && !feeds.length)
         return (
-            <Box p={2} boxSizing="border-box">
-                <Box mt="100px" color={(theme) => theme.palette.maskColor.main}>
+            <Box sx={{ p: 2, boxSizing: 'border-box' }}>
+                <Box sx={{ mt: '100px', color: (theme) => theme.palette.maskColor.main }}>
                     <ReloadStatus onRetry={fetchNextPage} />
                 </Box>
             </Box>
@@ -59,9 +59,9 @@ export const FinanceFeeds = memo<FinanceFeedsProps>(function FinanceFeeds({ addr
 
     if (isInitialLoading || (loading && !feeds.length) || !feedOwner) {
         return (
-            <Box p={2} boxSizing="border-box">
+            <Box sx={{ p: 2, boxSizing: 'border-box' }}>
                 {range(3).map((i) => (
-                    <Box mb={1} key={i}>
+                    <Box key={i} sx={{ mb: 1 }}>
                         <Skeleton animation="wave" variant="rectangular" height={90} className={classes.skeleton} />
                     </Box>
                 ))}
@@ -70,7 +70,7 @@ export const FinanceFeeds = memo<FinanceFeedsProps>(function FinanceFeeds({ addr
     }
     if (!feeds?.length && !loading) {
         return (
-            <EmptyStatus height={260}>
+            <EmptyStatus sx={{ height: 260 }}>
                 <Trans>There's no feed associated with this address.</Trans>
             </EmptyStatus>
         )
@@ -83,12 +83,12 @@ export const FinanceFeeds = memo<FinanceFeedsProps>(function FinanceFeeds({ addr
                 ))}
 
                 {hasNextPage ?
-                    <ElementAnchor height={30} callback={() => fetchNextPage()}>
+                    <ElementAnchor sx={{ height: 30 }} callback={() => fetchNextPage()}>
                         {loading ?
                             <LoadingBase className={classes.loading} />
                         :   null}
                     </ElementAnchor>
-                :   <Typography color={(theme) => theme.palette.maskColor.second} textAlign="center" py={2}>
+                :   <Typography sx={{ color: (theme) => theme.palette.maskColor.second, textAlign: 'center', py: 2 }}>
                         <Trans>No more data available.</Trans>
                     </Typography>
                 }
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/SocialFeed.tsx b/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/SocialFeed.tsx
index 1bbbfe33c20c..45abbdb0adab 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/SocialFeed.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/SocialFeed.tsx
@@ -226,7 +226,7 @@ export const SocialFeed = memo<SocialFeedProps>(function SocialFeed({ post, verb
             </div>
             {target ?
                 <div className={classes.quoted}>
-                    <FeedSummary className={classes.summary} post={target} mt={0.5} />
+                    <FeedSummary className={classes.summary} post={target} sx={{ mt: 0.5 }} />
                     <div className={classes.quotedPost}>
                         <div className={classes.line} />
                         <article className={cx(classes.target, verbose ? classes.verbose : null)}>
@@ -256,7 +256,7 @@ export const SocialFeed = memo<SocialFeedProps>(function SocialFeed({ post, verb
                     </div>
                 </div>
             :   null}
-            <FeedSummary post={post} mt={0.5} />
+            <FeedSummary post={post} sx={{ mt: 0.5 }} />
             <div className={classes.body}>
                 {media?.type === 'Image' ?
                     <Image
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/index.tsx b/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/index.tsx
index 0273e655fb3f..0d01ee342883 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/index.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/index.tsx
@@ -26,8 +26,8 @@ export const SocialFeeds = memo<SocialFeedsProps>(function SocialFeeds({ userId,
 
     if (error && !feeds.length)
         return (
-            <Box p={2} boxSizing="border-box">
-                <Box mt="100px" color={(theme) => theme.palette.maskColor.main}>
+            <Box sx={{ p: 2, boxSizing: 'border-box' }}>
+                <Box sx={{ mt: '100px', color: (theme) => theme.palette.maskColor.main }}>
                     <ReloadStatus onRetry={fetchNextPage} />
                 </Box>
             </Box>
@@ -35,9 +35,9 @@ export const SocialFeeds = memo<SocialFeedsProps>(function SocialFeeds({ userId,
 
     if (isInitialLoading || (loading && !feeds.length)) {
         return (
-            <Box p={2} boxSizing="border-box">
+            <Box sx={{ p: 2, boxSizing: 'border-box' }}>
                 {range(3).map((i) => (
-                    <Box mb={1} key={i}>
+                    <Box key={i} sx={{ mb: 1 }}>
                         <Skeleton animation="wave" variant="rectangular" height={90} className={classes.skeleton} />
                     </Box>
                 ))}
@@ -46,7 +46,7 @@ export const SocialFeeds = memo<SocialFeedsProps>(function SocialFeeds({ userId,
     }
     if (!feeds?.length && !loading) {
         return (
-            <EmptyStatus height={260}>
+            <EmptyStatus sx={{ height: 260 }}>
                 <Trans>There's no feed associated with this address.</Trans>
             </EmptyStatus>
         )
@@ -58,12 +58,12 @@ export const SocialFeeds = memo<SocialFeedsProps>(function SocialFeeds({ userId,
             ))}
 
             {hasNextPage ?
-                <ElementAnchor height={30} callback={fetchNextPage}>
+                <ElementAnchor sx={{ height: 30 }} callback={fetchNextPage}>
                     {loading ?
                         <LoadingBase className={classes.loading} />
                     :   null}
                 </ElementAnchor>
-            :   <Typography color={(theme) => theme.palette.maskColor.second} textAlign="center" py={2}>
+            :   <Typography sx={{ color: (theme) => theme.palette.maskColor.second, textAlign: 'center', py: 2 }}>
                     <Trans>No more data available.</Trans>
                 </Typography>
             }
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileLinkAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileLinkAction.tsx
index fded351d0441..d0fbf974e2d6 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileLinkAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileLinkAction.tsx
@@ -61,14 +61,14 @@ export function ProfileLinkAction({ feed, ...rest }: ProfileLinkActionProps) {
         <div {...rest}>
             <Typography className={classes.summary} component="div">
                 <Trans>
-                    <Label title={user} fontSize={14}>
+                    <Label title={user} sx={{ fontSize: 14 }}>
                         {formattedUser}
                     </Label>{' '}
                     <Select _follow="followed" _unfollow="un-followed" value={feed.type} other="" />{' '}
-                    <Label title={formattedOtherUser} fontSize={14}>
+                    <Label title={formattedOtherUser} sx={{ fontSize: 14 }}>
                         {other}
                     </Label>{' '}
-                    on <Label fontSize={14}>{feed.platform}</Label>
+                    on <Label sx={{ fontSize: 14 }}>{feed.platform}</Label>
                 </Trans>
             </Typography>
         </div>
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/index.tsx b/packages/plugins/RSS3/src/SiteAdaptor/index.tsx
index 3df083023ec9..3a2ca9b51921 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/index.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/index.tsx
@@ -129,7 +129,7 @@ const SocialTabConfigInSearchResult: Plugin.SiteAdaptor.SearchResultTab = {
                 supportedAddressTypes: [SocialAddressType.ENS],
             }
             return (
-                <Box minHeight={300} sx={{ scrollbarWidth: 'none' }}>
+                <Box sx={{ minHeight: 300, scrollbarWidth: 'none' }}>
                     <EVMWeb3ContextProvider>
                         <SocialFeeds key={socialAccount.address} address={socialAccount.address} />
                     </EVMWeb3ContextProvider>
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/modals/DetailsModal/TxDetails.tsx b/packages/plugins/RSS3/src/SiteAdaptor/modals/DetailsModal/TxDetails.tsx
index 7f162ec3647f..a36cd94ba408 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/modals/DetailsModal/TxDetails.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/modals/DetailsModal/TxDetails.tsx
@@ -159,9 +159,9 @@ export function TxDetails({ feed }: TxDetailsProps) {
                     <Trans>From</Trans>
                 </Typography>
                 <Tooltip title={feed.from}>
-                    <Typography className={classes.value} gap={10} component="div">
+                    <Typography className={classes.value} sx={{ gap: 10 }} component="div">
                         <EthereumBlockie address={feed.from} classes={{ icon: classes.blockieIcon }} />
-                        <ReversedAddress address={feed.from} fontWeight={400} />
+                        <ReversedAddress address={feed.from} sx={{ fontWeight: 400 }} />
                         <CopyButton text={feed.from} size={20} />
                     </Typography>
                 </Tooltip>
@@ -171,9 +171,9 @@ export function TxDetails({ feed }: TxDetailsProps) {
                     <Trans>To</Trans>
                 </Typography>
                 <Tooltip title={feed.to}>
-                    <Typography className={classes.value} gap={10} component="div">
+                    <Typography className={classes.value} sx={{ gap: 10 }} component="div">
                         <EthereumBlockie address={feed.to} classes={{ icon: classes.blockieIcon }} />
-                        <ReversedAddress address={feed.to} fontWeight={400} />
+                        <ReversedAddress address={feed.to} sx={{ fontWeight: 400 }} />
                         <CopyButton text={feed.to} size={20} />
                     </Typography>
                 </Tooltip>
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/modals/FinanceFeedDetailsModal/TxDetails.tsx b/packages/plugins/RSS3/src/SiteAdaptor/modals/FinanceFeedDetailsModal/TxDetails.tsx
index e9327d2c7c7e..ab72b21a2d8b 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/modals/FinanceFeedDetailsModal/TxDetails.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/modals/FinanceFeedDetailsModal/TxDetails.tsx
@@ -134,7 +134,7 @@ export function TxDetails({ transaction: tx }: TxDetailsProps) {
                     <Trans>From</Trans>
                 </Typography>
                 <Tooltip title={tx.from}>
-                    <Typography className={classes.value} gap={10} component="div">
+                    <Typography className={classes.value} sx={{ gap: 10 }} component="div">
                         <AccountLabel address={tx.from} size={16} />
                         <CopyButton text={tx.from} size={20} />
                     </Typography>
@@ -145,7 +145,7 @@ export function TxDetails({ transaction: tx }: TxDetailsProps) {
                     <Trans>To</Trans>
                 </Typography>
                 <Tooltip title={tx.to}>
-                    <Typography className={classes.value} gap={10} component="div">
+                    <Typography className={classes.value} sx={{ gap: 10 }} component="div">
                         <AccountLabel address={tx.to} size={16} /> <CopyButton text={tx.to} size={20} />
                     </Typography>
                 </Tooltip>
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx
index e74e63d0e7f3..7607670dedf2 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx
@@ -210,7 +210,7 @@ export const RedPacket = memo(function RedPacket({ payload, currentPluginID }: R
     }
 
     // the red packet can fetch without account
-    if (!availability || !token || isLoadingCover) return <LoadingStatus minHeight={148} />
+    if (!availability || !token || isLoadingCover) return <LoadingStatus sx={{ minHeight: 148 }} />
     const unsatisfied = !!account && claimStrategyStatus?.canClaim === false && !isClaimed
 
     const card = (
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketCard.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketCard.tsx
index d1f258a96b4e..000f884b5b33 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketCard.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketCard.tsx
@@ -154,7 +154,7 @@ export const SolanaRedPacketCard = memo(function SolanaRedPacketCard({
     })
 
     // the red packet can fetch without account
-    if (!availability || !token) return <LoadingStatus minHeight={148} />
+    if (!availability || !token) return <LoadingStatus sx={{ minHeight: 148 }} />
 
     return (
         <>
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/CreateRedpacket.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/CreateRedpacket.tsx
index da437d17e570..a7694ce8ed88 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/CreateRedpacket.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/CreateRedpacket.tsx
@@ -316,8 +316,10 @@ export function CreateSolRedPacket() {
                         </div>
                         <Typography
                             color={isRandom ? theme.palette.maskColor.main : theme.palette.maskColor.second}
-                            fontSize={16}
-                            fontWeight={isRandom ? 700 : 400}>
+                            sx={{
+                                fontSize: 16,
+                                fontWeight: isRandom ? 700 : 400,
+                            }}>
                             <Trans>Random Amount</Trans>
                         </Typography>
                     </label>
@@ -327,8 +329,10 @@ export function CreateSolRedPacket() {
                         </div>
                         <Typography
                             color={isRandom ? theme.palette.maskColor.second : theme.palette.maskColor.main}
-                            fontSize={16}
-                            fontWeight={isRandom ? 400 : 700}>
+                            sx={{
+                                fontSize: 16,
+                                fontWeight: isRandom ? 400 : 700,
+                            }}>
                             <Trans>Equal Amount</Trans>
                         </Typography>
                     </label>
@@ -354,7 +358,7 @@ export function CreateSolRedPacket() {
                     }}
                 />
                 <div className={classes.field}>
-                    <Box width={180}>
+                    <Box sx={{ width: 180 }}>
                         <InputBase
                             className={cx(classes.input, classes.iconInput)}
                             fullWidth
@@ -417,7 +421,7 @@ export function CreateSolRedPacket() {
                     <Typography className={classes.label}>
                         <Trans>Choose a Cover</Trans>
                     </Typography>
-                    <Box display="flex" flexDirection="row" gap={1} ml="auto">
+                    <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1, ml: 'auto' }}>
                         {redpacketThemes.map((theme) => (
                             <div
                                 key={theme.tid}
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/RedpacketConfirm.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/RedpacketConfirm.tsx
index 83d33dd86ef7..1b389018039e 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/RedpacketConfirm.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/RedpacketConfirm.tsx
@@ -309,10 +309,12 @@ export function SolanaRedPacketConfirm() {
                     <Typography
                         variant="body1"
                         align="left"
-                        marginTop="1px"
-                        marginLeft="8.5px"
                         style={{ lineHeight: '18px' }}
-                        fontSize="14px">
+                        sx={{
+                            marginTop: '1px',
+                            marginLeft: '8.5px',
+                            fontSize: '14px',
+                        }}>
                         <Trans>You can withdraw the remaining balance 24 hours after sending the lucky drop.</Trans>
                     </Typography>
                 </Paper>
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/ClaimOnFirefly.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/ClaimOnFirefly.tsx
index 22269aa25d7d..51c4181e0a8c 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/components/ClaimOnFirefly.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/components/ClaimOnFirefly.tsx
@@ -36,7 +36,10 @@ export const ClaimOnFirefly = memo(function ClaimOnFirefly({ className, ...rest
     const postId = usePostInfoPostID()
 
     return (
-        <Box className={cx(classes.statusBox, className)} p={2} {...rest}>
+        <Box
+            className={cx(classes.statusBox, className)}
+            {...rest}
+            sx={[{ p: 2 }, ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx])]}>
             <Typography className={classes.text}>
                 <Trans>Discovered a LuckyDrop event on the FireFly website.</Trans>
             </Typography>
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/ThemePicker.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/ThemePicker.tsx
index 4cb310e4b7cc..cea70db68cf8 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/components/ThemePicker.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/components/ThemePicker.tsx
@@ -55,7 +55,12 @@ export const ThemePicker = memo<BoxProps>(function ThemePicker(props) {
     const { theme: selectedTheme, themes: redpacketThemes, customThemes, setCustomThemes, setTheme } = useRedPacket()
 
     return (
-        <Box display="flex" flexDirection="row" gap={1} ml="auto" {...props}>
+        <Box
+            {...props}
+            sx={[
+                { display: 'flex', flexDirection: 'row', gap: 1, ml: 'auto' },
+                ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+            ]}>
             {redpacketThemes.map((theme) => (
                 <div
                     key={theme.tid}
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/index.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/index.tsx
index 39c66ee4a30f..79f8f61a9e97 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/index.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/index.tsx
@@ -156,12 +156,14 @@ function RedpacketBadge(props: RedpacketBadgeProps) {
         <div style={containerStyle}>
             <Icons.RedPacket size={20} />
             <Typography
-                fontSize="12px"
-                lineHeight="16px"
-                marginLeft="8px"
-                maxWidth="450px"
-                overflow="hidden"
-                textOverflow="ellipsis">
+                sx={{
+                    fontSize: '12px',
+                    lineHeight: '16px',
+                    marginLeft: '8px',
+                    maxWidth: '450px',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                }}>
                 {message || fallback}
             </Typography>
         </div>
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateTokenRedPacket.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateTokenRedPacket.tsx
index 239209cf2a9a..6a4351c062da 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateTokenRedPacket.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateTokenRedPacket.tsx
@@ -279,8 +279,10 @@ export function CreateTokenRedPacket() {
                         </div>
                         <Typography
                             color={isRandom ? theme.palette.maskColor.main : theme.palette.maskColor.second}
-                            fontSize={16}
-                            fontWeight={isRandom ? 700 : 400}>
+                            sx={{
+                                fontSize: 16,
+                                fontWeight: isRandom ? 700 : 400,
+                            }}>
                             <Trans>Random Amount</Trans>
                         </Typography>
                     </label>
@@ -290,15 +292,17 @@ export function CreateTokenRedPacket() {
                         </div>
                         <Typography
                             color={isRandom ? theme.palette.maskColor.second : theme.palette.maskColor.main}
-                            fontSize={16}
-                            fontWeight={isRandom ? 400 : 700}>
+                            sx={{
+                                fontSize: 16,
+                                fontWeight: isRandom ? 400 : 700,
+                            }}>
                             <Trans>Equal Amount</Trans>
                         </Typography>
                     </label>
                 </div>
                 <MessageInput message={message} onChange={setMessage} />
                 <div className={classes.field}>
-                    <Box width={180}>
+                    <Box sx={{ width: 180 }}>
                         <InputBase
                             className={cx(classes.input, classes.iconInput)}
                             fullWidth
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/History.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/History.tsx
index 53acc5758a1b..9a408806a040 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/views/History.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/views/History.tsx
@@ -105,12 +105,12 @@ export function History() {
                     </ThemeProvider>
                 ))}
                 {hasNextPage ?
-                    <ElementAnchor height={30} callback={() => fetchNextPage()}>
+                    <ElementAnchor sx={{ height: 30 }} callback={() => fetchNextPage()}>
                         {isFetching ?
                             <LoadingBase />
                         :   null}
                     </ElementAnchor>
-                :   <Typography color={(theme) => theme.palette.maskColor.second} textAlign="center" py={2}>
+                :   <Typography sx={{ color: (theme) => theme.palette.maskColor.second, textAlign: 'center', py: 2 }}>
                         <Trans>No more data available.</Trans>
                     </Typography>
                 }
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/TokenRedPacketConfirm.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/TokenRedPacketConfirm.tsx
index 525b23193ba5..a63b267df992 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/views/TokenRedPacketConfirm.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/views/TokenRedPacketConfirm.tsx
@@ -318,10 +318,12 @@ export function TokenRedPacketConfirm() {
                     <Typography
                         variant="body1"
                         align="left"
-                        marginTop="1px"
-                        marginLeft="8.5px"
                         style={{ lineHeight: '18px' }}
-                        fontSize="14px">
+                        sx={{
+                            marginTop: '1px',
+                            marginLeft: '8.5px',
+                            fontSize: '14px',
+                        }}>
                         <Trans>You can withdraw the remaining balance 24 hours after sending the lucky drop.</Trans>
                     </Typography>
                 </Paper>
diff --git a/packages/plugins/Savings/src/SiteAdaptor/SavingsForm.tsx b/packages/plugins/Savings/src/SiteAdaptor/SavingsForm.tsx
index 92d0c3aef6fe..4ddb0fea45ae 100644
--- a/packages/plugins/Savings/src/SiteAdaptor/SavingsForm.tsx
+++ b/packages/plugins/Savings/src/SiteAdaptor/SavingsForm.tsx
@@ -279,10 +279,16 @@ export function SavingsFormDialog({ chainId, protocol, tab, onClose }: SavingsFo
                             </div>
 
                             {loading ?
-                                <Typography variant="body2" textAlign="right" className={classes.tokenValueUSD}>
+                                <Typography
+                                    variant="body2"
+                                    sx={{ textAlign: 'right' }}
+                                    className={classes.tokenValueUSD}>
                                     <LoadingBase width={16} height={16} />
                                 </Typography>
-                            :   <Typography variant="body2" textAlign="right" className={classes.tokenValueUSD}>
+                            :   <Typography
+                                    variant="body2"
+                                    sx={{ textAlign: 'right' }}
+                                    className={classes.tokenValueUSD}>
                                     &asymp; <FormattedCurrency value={tokenValueUSD} formatter={formatCurrency} />
                                     {isPositive(estimatedGas) ?
                                         <span className={classes.gasFee}>+ {formatBalance(estimatedGas, 18)} ETH</span>
diff --git a/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/SavingsRow.tsx b/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/SavingsRow.tsx
index a20c63345422..58416d1861b3 100644
--- a/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/SavingsRow.tsx
+++ b/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/SavingsRow.tsx
@@ -61,7 +61,7 @@ export const SavingsRow = memo(function SavingsRow({ protocol, isDeposit, onWith
 
     return (
         <Grid container spacing={0} className={classes.tableRow} ref={ref}>
-            <Grid item xs={4} className={classes.tableCell}>
+            <Grid size={4} className={classes.tableCell}>
                 <div className={classes.logoWrap}>
                     <TokenIcon
                         name={protocol.bareToken.name}
@@ -79,16 +79,16 @@ export const SavingsRow = memo(function SavingsRow({ protocol, isDeposit, onWith
                 </div>
             </Grid>
             {isDeposit ?
-                <Grid item xs={2} className={classes.tableCell}>
+                <Grid size={2} className={classes.tableCell}>
                     <Typography variant="body1">
                         {isFetchingApr && apr === '0.00' ? '--' : `${Number(apr).toFixed(2)}%`}
                     </Typography>
                 </Grid>
             :   null}
-            <Grid item xs={isDeposit ? 3 : 5} className={classes.tableCell}>
+            <Grid size={isDeposit ? 3 : 5} className={classes.tableCell}>
                 <FungibleTokenBalance isDeposit={isDeposit} protocol={protocol} protocolBalance={balance} />
             </Grid>
-            <Grid item xs={3} className={classes.tableCell}>
+            <Grid size={3} className={classes.tableCell}>
                 <Button
                     color="primary"
                     disabled={isDeposit ? false : isZero(balance)}
diff --git a/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/index.tsx b/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/index.tsx
index b64a8bf84451..5ff14be8320a 100644
--- a/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/index.tsx
+++ b/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/index.tsx
@@ -75,24 +75,24 @@ export function SavingsTable({ tab, protocols, loadingProtocols, onWithdraw, onD
     return (
         <Box className={classes.containerWrap}>
             <Grid container spacing={0} className={classes.tableHeader}>
-                <Grid item xs={4} className={classes.tableCell}>
+                <Grid size={4} className={classes.tableCell}>
                     <Typography variant="body1">
                         <Trans>Asset</Trans>
                     </Typography>
                 </Grid>
                 {isDeposit ?
-                    <Grid item xs={2} className={classes.tableCell}>
+                    <Grid size={2} className={classes.tableCell}>
                         <Typography variant="body1">
                             <Trans>APR</Trans>
                         </Typography>
                     </Grid>
                 :   null}
-                <Grid item xs={isDeposit ? 3 : 5} className={classes.tableCell}>
+                <Grid size={isDeposit ? 3 : 5} className={classes.tableCell}>
                     <Typography variant="body1">
                         <Trans>Wallet</Trans>
                     </Typography>
                 </Grid>
-                <Grid item xs={3} className={classes.tableCell}>
+                <Grid size={3} className={classes.tableCell}>
                     <Typography variant="body1">
                         <Trans>Operation</Trans>
                     </Typography>
@@ -120,7 +120,7 @@ export function SavingsTable({ tab, protocols, loadingProtocols, onWithdraw, onD
                 </div>
             :   <div className={classes.placeholder}>
                     <Icons.EmptySimple size={36} className={classes.empty} />
-                    <Typography fontSize="14px" mt={1.5} color={theme.palette.maskColor.second}>
+                    <Typography sx={{ fontSize: '14px', mt: 1.5 }} color={theme.palette.maskColor.second}>
                         <Trans>No deposit protocols found.</Trans>
                     </Typography>
                 </div>
diff --git a/packages/plugins/ScamWarning/src/SiteAdaptor/components/LinkModifier.tsx b/packages/plugins/ScamWarning/src/SiteAdaptor/components/LinkModifier.tsx
index 12e4a374c069..e3c771b90d9c 100644
--- a/packages/plugins/ScamWarning/src/SiteAdaptor/components/LinkModifier.tsx
+++ b/packages/plugins/ScamWarning/src/SiteAdaptor/components/LinkModifier.tsx
@@ -51,7 +51,7 @@ export const LinkModifier = memo<PropsOf<Plugin.SiteAdaptor.Definition['LinkModi
             return (
                 <span className={classes.link}>
                     <AddressTag className={classes.address} address={data!.address!} nested text="" />
-                    <Link href={props.href} target="_blank" rel="noopener noreferrer" fontSize="inherit">
+                    <Link href={props.href} target="_blank" rel="noopener noreferrer" sx={{ fontSize: 'inherit' }}>
                         {props.children}
                         {props.suggestedPostImage}
                     </Link>
@@ -79,7 +79,7 @@ export const LinkModifier = memo<PropsOf<Plugin.SiteAdaptor.Definition['LinkModi
                     onClick={(e) => e.stopPropagation()}
                 />
             </ShadowRootPopper>
-            <Link href={props.href} target="_blank" rel="noopener noreferrer" fontSize="inherit">
+            <Link href={props.href} target="_blank" rel="noopener noreferrer" sx={{ fontSize: 'inherit' }}>
                 {props.children}
                 {props.suggestedPostImage}
             </Link>
diff --git a/packages/plugins/ScamWarning/src/SiteAdaptor/components/PreviewCard.tsx b/packages/plugins/ScamWarning/src/SiteAdaptor/components/PreviewCard.tsx
index b993e5eda4f3..fed248ec059e 100644
--- a/packages/plugins/ScamWarning/src/SiteAdaptor/components/PreviewCard.tsx
+++ b/packages/plugins/ScamWarning/src/SiteAdaptor/components/PreviewCard.tsx
@@ -36,14 +36,14 @@ export function PreviewCard({ links }: PreviewCardProps) {
 
     return (
         <ThemeProvider theme={MaskDarkTheme}>
-            <Stack p={1.5} pt={0} className={classes.root}>
+            <Stack sx={{ p: 1.5, pt: 0 }} className={classes.root}>
                 <Stack className={classes.card}>
                     {value.map((x) => (
                         <Typography
                             key={x.url}
                             className={classes.title}
                             variant="h6"
-                            fontWeight={700}
+                            sx={{ fontWeight: 700 }}
                             color="textPrimary">
                             {x.url}
                         </Typography>
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/InformationCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/InformationCard.tsx
index 6257a642c3a5..1fec56134773 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/InformationCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/InformationCard.tsx
@@ -107,7 +107,7 @@ export function InformationCard() {
                                 <Avatar src={resolveIPFS_URL(proposal.authorAvatar)} className={classes.avatar} />
                             :   <EthereumBlockie address={proposal.address} />}
                         </div>
-                        <Typography fontSize={14}>
+                        <Typography sx={{ fontSize: 14 }}>
                             {proposal.space.id ? formatSpaceId(proposal.space.id) : formatLongHex(proposal.address)}
                         </Typography>
                     </Link>
@@ -119,24 +119,24 @@ export function InformationCard() {
                             target="_blank"
                             rel="noopener"
                             href={resolveResourceURL(urlcat(SNAPSHOT_IPFS, proposal.ipfs))}>
-                            <Typography fontSize={14}>#{identifier.id.slice(0, 7)}</Typography>
+                            <Typography sx={{ fontSize: 14 }}>#{identifier.id.slice(0, 7)}</Typography>
                             <Icons.LinkOut size={16} sx={{ paddingLeft: 1 }} />
                         </Link>
                     </InfoField>
                 :   null}
                 <InfoField title={<Trans>Start date</Trans>} classes={{ field: classes.infoColor }}>
-                    <Typography fontSize={14} fontWeight={400}>
+                    <Typography sx={{ fontSize: 14, fontWeight: 400 }}>
                         {formatDateTime(start * 1000, 'MMM dd, yyyy, hh:mm a')}
                     </Typography>
                 </InfoField>
                 <InfoField title={<Trans>End date</Trans>} classes={{ field: classes.infoColor }}>
-                    <Typography fontSize={14} fontWeight={400}>
+                    <Typography sx={{ fontSize: 14, fontWeight: 400 }}>
                         {formatDateTime(end * 1000, 'MMM dd, yyyy, hh:mm a')}
                     </Typography>
                 </InfoField>
                 <InfoField title={<Trans>Snapshot</Trans>} classes={{ field: classes.infoColor }}>
                     <Link className={classes.link} target="_blank" rel="noopener" href={link}>
-                        <Typography fontSize={14}>{formatWithCommas(snapshot)}</Typography>
+                        <Typography sx={{ fontSize: 14 }}>{formatWithCommas(snapshot)}</Typography>
                         <Icons.LinkOut size={16} sx={{ paddingLeft: 1 }} />
                     </Link>
                 </InfoField>
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/LoadingFailCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/LoadingFailCard.tsx
index 06d109740032..139d63cb2da2 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/LoadingFailCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/LoadingFailCard.tsx
@@ -40,7 +40,7 @@ export class LoadingFailCard extends Component<
 function Full(props: { onClick: () => void }) {
     return (
         <Box style={{ textAlign: 'center', padding: 16 }}>
-            <Typography textAlign="center" color="error">
+            <Typography sx={{ textAlign: 'center' }} color="error">
                 <Trans>Load failed</Trans>
             </Typography>
             <Button
@@ -68,7 +68,7 @@ function Full(props: { onClick: () => void }) {
 function NotFull(props: { onClick: () => void }) {
     return (
         <Box style={{ textAlign: 'center' }}>
-            <Typography color={(t) => t.palette.maskColor.publicMain}>
+            <Typography sx={{ color: (t) => t.palette.maskColor.publicMain }}>
                 <Trans>Loading failed due to Snapshot API service breakdown.</Trans>
             </Typography>
             <Button
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/PluginDescriptor.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/PluginDescriptor.tsx
index f14a8f03d3f6..749eaeeb43b4 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/PluginDescriptor.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/PluginDescriptor.tsx
@@ -24,14 +24,14 @@ export function PluginDescriptor() {
     const { classes } = useStyles()
 
     return (
-        <Stack flexDirection="row" justifyContent="space-between" alignItems="center" width="100%">
-            <Stack flexDirection="row" justifyContent="space-between" gap={1} alignItems="center">
+        <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
+            <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', gap: 1, alignItems: 'center' }}>
                 <Icons.Snapshot />
-                <Typography fontWeight="bolder" fontSize={16} color={(theme) => theme.palette.maskColor.dark}>
+                <Typography sx={{ fontWeight: 'bolder', fontSize: 16, color: (theme) => theme.palette.maskColor.dark }}>
                     <Trans>Snapshot</Trans>
                 </Typography>
             </Stack>
-            <Stack direction="row" gap={0.5}>
+            <Stack direction="row" sx={{ gap: 0.5 }}>
                 <Trans>
                     <Typography className={classes.item1}>Powered by</Typography>{' '}
                     <Typography className={classes.item2}>Mask Network</Typography>
@@ -42,9 +42,11 @@ export function PluginDescriptor() {
                     rel="noopener noreferrer"
                     color="textPrimary"
                     href={'https://mask.io/'}
-                    width="22px"
-                    height="22px"
-                    style={{ alignSelf: 'center', display: 'flex', alignItems: 'center', justifyItems: 'center' }}>
+                    style={{ alignSelf: 'center', display: 'flex', alignItems: 'center', justifyItems: 'center' }}
+                    sx={{
+                        width: '22px',
+                        height: '22px',
+                    }}>
                     <Icons.LinkOut size={16} className={classes.linkOutIcon} />
                 </Link>
             </Stack>
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/ProfileProposalList.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/ProfileProposalList.tsx
index 409f297bbbcd..96eff7ba3aa5 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/ProfileProposalList.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/ProfileProposalList.tsx
@@ -201,7 +201,7 @@ function ProfileProposalListItemHeader(props: ProfileProposalProps) {
                 <Typography className={classes.author}>{domain ?? Utils.formatAddress(proposal.author, 4)}</Typography>
             </div>
             <div>
-                <Typography fontWeight={700} fontSize={12} className={classes.state}>
+                <Typography sx={{ fontWeight: 700, fontSize: 12 }} className={classes.state}>
                     {startCase(proposal.state)}
                 </Typography>
             </div>
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/ProfileView.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/ProfileView.tsx
index 6b430e3e8c11..8aca7657611c 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/ProfileView.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/ProfileView.tsx
@@ -107,7 +107,7 @@ export function ProfileView(props: ProfileViewProps) {
                     />
                 </ThemeProvider>
                 <TabContext value={currentTab}>
-                    <Stack px={2}>
+                    <Stack sx={{ px: 2 }}>
                         <MaskTabList
                             variant="base"
                             classes={{ root: classes.tabListRoot }}
@@ -122,9 +122,9 @@ export function ProfileView(props: ProfileViewProps) {
             </Stack>
             {loadingProposalList || loadingSpaceMemberList || isPending ?
                 <CardContent className={classes.skeletonContent}>
-                    <Stack height="100%" alignItems="center" justifyContent="center">
+                    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>
                         <LoadingBase />
-                        <Typography fontSize="14px" mt={1.5}>
+                        <Typography sx={{ fontSize: '14px', mt: 1.5 }}>
                             <Trans>Loading</Trans>
                         </Typography>
                     </Stack>
@@ -132,9 +132,9 @@ export function ProfileView(props: ProfileViewProps) {
             : filteredProposalList.length > 0 ?
                 <ProfileProposalList proposalList={filteredProposalList} />
             :   <CardContent className={classes.skeletonContent}>
-                    <Stack height="100%" alignItems="center" justifyContent="center">
+                    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>
                         <Icons.EmptySimple size={36} />
-                        <Typography fontSize="14px" mt={1.5}>
+                        <Typography sx={{ fontSize: '14px', mt: 1.5 }}>
                             <Trans>Oops, we can't find any results.</Trans>
                         </Typography>
                     </Stack>
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/ResultCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/ResultCard.tsx
index 33069eea4227..90d08065641e 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/ResultCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/ResultCard.tsx
@@ -124,9 +124,7 @@ function Content() {
                             <Box className={classes.listItemHeader}>
                                 <TextOverflowTooltip
                                     as={ShadowRootTooltip}
-                                    PopperProps={{
-                                        disablePortal: true,
-                                    }}
+                                    slotProps={{ popper: { disablePortal: true } }}
                                     title={<Typography>{result.choice}</Typography>}
                                     placement="top"
                                     classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
@@ -136,9 +134,7 @@ function Content() {
                                     </Typography>
                                 </TextOverflowTooltip>
                                 <ShadowRootTooltip
-                                    PopperProps={{
-                                        disablePortal: true,
-                                    }}
+                                    slotProps={{ popper: { disablePortal: true } }}
                                     classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
                                     title={
                                         <Typography className={classes.ellipsisText}>
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx
index 5bb7fd3e4def..7362d7ac5658 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx
@@ -121,11 +121,9 @@ export function Snapshot() {
                             <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                                 <TextOverflowTooltip
                                     as={ShadowRootTooltip}
-                                    PopperProps={{
-                                        disablePortal: true,
-                                    }}
+                                    slotProps={{ popper: { disablePortal: true } }}
                                     title={
-                                        <Typography fontSize={18} fontWeight="bold">
+                                        <Typography sx={{ fontSize: 18, fontWeight: 'bold' }}>
                                             {proposal.space.name}
                                         </Typography>
                                     }
@@ -133,10 +131,10 @@ export function Snapshot() {
                                     classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
                                     arrow>
                                     <Typography
-                                        fontSize={18}
-                                        fontWeight="bold"
                                         color={theme.palette.maskColor.publicMain}
                                         sx={{
+                                            fontSize: 18,
+                                            fontWeight: 'bold',
                                             width: 150,
                                             whiteSpace: 'nowrap',
                                             textOverflow: 'ellipsis',
@@ -145,29 +143,25 @@ export function Snapshot() {
                                         {proposal.space.name}
                                     </Typography>
                                 </TextOverflowTooltip>
-                                <Box sx={{ display: 'flex' }} color={theme.palette.maskColor.publicSecond}>
-                                    <Typography fontSize={14} sx={{ paddingRight: 1 }}>
-                                        by
-                                    </Typography>
-                                    <Typography fontSize={14} fontWeight="700">
+                                <Box sx={{ color: theme.palette.maskColor.publicSecond, display: 'flex' }}>
+                                    <Typography sx={{ fontSize: 14, paddingRight: 1 }}>by</Typography>
+                                    <Typography sx={{ fontSize: 14, fontWeight: '700' }}>
                                         {formatSpaceId(proposal.space.id)}
                                     </Typography>
                                 </Box>
                             </Box>
 
                             <ShadowRootTooltip
-                                PopperProps={{
-                                    disablePortal: true,
-                                }}
+                                slotProps={{ popper: { disablePortal: true } }}
                                 title={<Typography className={classes.shadowRootTooltip}>{proposal.title}</Typography>}
                                 placement="top"
                                 classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
                                 arrow>
                                 <Typography
-                                    fontSize={14}
-                                    fontWeight="700"
                                     color={theme.palette.maskColor.publicSecond}
                                     sx={{
+                                        fontSize: 14,
+                                        fontWeight: '700',
                                         width: 300,
                                         whiteSpace: 'nowrap',
                                         textOverflow: 'ellipsis',
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/SpaceMenu.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/SpaceMenu.tsx
index 9d76400ecf41..644083355791 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/SpaceMenu.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/SpaceMenu.tsx
@@ -80,12 +80,7 @@ interface SpaceMenuProps extends Omit<MenuProps, 'onSelect'> {
 export function SpaceMenu({ options, currentOption, onSelect, containerRef, ...rest }: SpaceMenuProps) {
     const { classes } = useStyles()
     return (
-        <ShadowRootMenu
-            anchorEl={containerRef.current}
-            PaperProps={{
-                className: classes.menu,
-            }}
-            {...rest}>
+        <ShadowRootMenu anchorEl={containerRef.current} slotProps={{ paper: { className: classes.menu } }} {...rest}>
             <div key="rss3" className={classes.group}>
                 <Typography className={classes.groupName}>
                     <Trans>Space</Trans>
@@ -98,11 +93,13 @@ export function SpaceMenu({ options, currentOption, onSelect, containerRef, ...r
                             <Avatar className={classes.coinIcon} src={option.avatar} alt={option.spaceId} />
                             <Stack className={classes.itemText}>
                                 <Typography
-                                    fontSize={14}
-                                    fontWeight={700}
-                                    flexGrow={1}
-                                    overflow="hidden"
-                                    textOverflow="ellipsis">
+                                    sx={{
+                                        fontSize: 14,
+                                        fontWeight: 700,
+                                        flexGrow: 1,
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                    }}>
                                     <span className={classes.name}>{option.spaceName}</span>
                                 </Typography>
                                 <div className={classes.itemCheckout}>
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx
index 25f8bf73cb7b..7c5e0bf52ad1 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx
@@ -136,9 +136,7 @@ function Content() {
                                     <Typography className={classes.choice}>{v.choice}</Typography>
                                 : v.choices ?
                                     <ShadowRootTooltip
-                                        PopperProps={{
-                                            disablePortal: false,
-                                        }}
+                                        slotProps={{ popper: { disablePortal: false } }}
                                         title={
                                             <Typography className={classes.shadowRootTooltip}>
                                                 {fullChoiceText}
@@ -152,9 +150,7 @@ function Content() {
                                 :   null}
                                 <TextOverflowTooltip
                                     as={ShadowRootTooltip}
-                                    PopperProps={{
-                                        disablePortal: true,
-                                    }}
+                                    slotProps={{ popper: { disablePortal: true } }}
                                     classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
                                     title={
                                         <Typography className={classes.shadowRootTooltip}>
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/VotingDialog.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/VotingDialog.tsx
index 7011077cec79..db6fa7986e5a 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/VotingDialog.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/VotingDialog.tsx
@@ -83,12 +83,10 @@ const useStyles = makeStyles()((theme) => ({
 
 const messageText = (text: React.ReactNode) => (
     <Box>
-        <Typography fontSize={14} fontWeight={700}>
+        <Typography sx={{ fontSize: 14, fontWeight: 700 }}>
             <Trans>Vote</Trans>
         </Typography>
-        <Typography fontSize={14} fontWeight={400}>
-            {text}
-        </Typography>
+        <Typography sx={{ fontSize: 14, fontWeight: 400 }}>{text}</Typography>
     </Box>
 )
 
@@ -210,9 +208,13 @@ export function VotingDialog({ open, onClose }: VotingDialogProps) {
                                     selected.includes(option) ? classes.selectedOption : null,
                                 )}>
                                 <Typography
-                                    fontWeight={700}
-                                    fontSize={16}
-                                    sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                    sx={{
+                                        fontWeight: 700,
+                                        fontSize: 16,
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                    }}>
                                     {option}
                                 </Typography>
                             </Button>
diff --git a/packages/plugins/SwitchLogo/src/SiteAdaptor/SwitchLogoDialog.tsx b/packages/plugins/SwitchLogo/src/SiteAdaptor/SwitchLogoDialog.tsx
index bf76dab5223b..f4391aec26e8 100644
--- a/packages/plugins/SwitchLogo/src/SiteAdaptor/SwitchLogoDialog.tsx
+++ b/packages/plugins/SwitchLogo/src/SiteAdaptor/SwitchLogoDialog.tsx
@@ -116,7 +116,7 @@ export const SwitchLogoDialog = memo(() => {
                         )}
                         onClick={() => onChange(SwitchLogoType.Classics)}>
                         <Icons.TwitterColored />
-                        <Typography fontSize={14} fontWeight={700}>
+                        <Typography sx={{ fontSize: 14, fontWeight: 700 }}>
                             <Trans>Classics Logo</Trans>
                         </Typography>
                     </Stack>
@@ -127,7 +127,7 @@ export const SwitchLogoDialog = memo(() => {
                         )}
                         onClick={() => onChange(SwitchLogoType.New)}>
                         <Icons.TwitterX />
-                        <Typography fontSize={14} fontWeight={700}>
+                        <Typography sx={{ fontSize: 14, fontWeight: 700 }}>
                             <Trans>New Logo</Trans>
                         </Typography>
                     </Stack>
@@ -144,10 +144,12 @@ export const SwitchLogoDialog = memo(() => {
                             }
                             label={
                                 <Typography
-                                    fontSize={14}
-                                    fontWeight={400}
-                                    lineHeight="18px"
-                                    color={(theme) => theme.palette.maskColor.secondaryDark}>
+                                    sx={{
+                                        fontSize: 14,
+                                        fontWeight: 400,
+                                        lineHeight: '18px',
+                                        color: (theme) => theme.palette.maskColor.secondaryDark,
+                                    }}>
                                     <Trans>Share and recommend this feature after saving.</Trans>
                                 </Typography>
                             }
@@ -162,13 +164,15 @@ export const SwitchLogoDialog = memo(() => {
                 <Stack className={classes.powered_by}>
                     <Trans>
                         <Typography
-                            fontSize="14px"
-                            fontWeight={700}
-                            marginRight="5px"
-                            color={(theme) => theme.palette.maskColor.secondaryDark}>
+                            sx={{
+                                fontSize: '14px',
+                                fontWeight: 700,
+                                marginRight: '5px',
+                                color: (theme) => theme.palette.maskColor.secondaryDark,
+                            }}>
                             Powered by{' '}
                         </Typography>
-                        <Typography fontSize="14px" fontWeight={700} marginRight="4px">
+                        <Typography sx={{ fontSize: '14px', fontWeight: 700, marginRight: '4px' }}>
                             Mask Network
                         </Typography>
                     </Trans>
diff --git a/packages/plugins/Tips/src/SiteAdaptor/components/TipsRealmContent/index.tsx b/packages/plugins/Tips/src/SiteAdaptor/components/TipsRealmContent/index.tsx
index 25e98f9a3c5c..126cda33e0ee 100644
--- a/packages/plugins/Tips/src/SiteAdaptor/components/TipsRealmContent/index.tsx
+++ b/packages/plugins/Tips/src/SiteAdaptor/components/TipsRealmContent/index.tsx
@@ -105,13 +105,15 @@ export function TipsRealmContent({
                 title={<Trans>Send authors tips by using Mask Network's Tips function.</Trans>}
                 actionText={<Trans>Close</Trans>}>
                 <Stack
-                    display="flex"
-                    width="38px"
-                    height="38px"
-                    position="relative"
-                    top={0}
-                    alignItems="center"
-                    justifyContent="center">
+                    sx={{
+                        display: 'flex',
+                        width: '38px',
+                        height: '38px',
+                        position: 'relative',
+                        top: 0,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
                     {button}
                 </Stack>
             </PluginGuide>
diff --git a/packages/plugins/Tips/src/components/RecipientSection/RecipientSelect.tsx b/packages/plugins/Tips/src/components/RecipientSection/RecipientSelect.tsx
index b893a9ee815d..45a6e50eca25 100644
--- a/packages/plugins/Tips/src/components/RecipientSection/RecipientSelect.tsx
+++ b/packages/plugins/Tips/src/components/RecipientSection/RecipientSelect.tsx
@@ -176,8 +176,8 @@ export const RecipientSelect = memo(({ className }: Props) => {
                 disableScrollLock: true,
                 container: () => selectRef.current,
                 anchorEl: () => selectRef.current!,
-                BackdropProps: {
-                    invisible: true,
+                slotProps: {
+                    backdrop: { invisible: true },
                 },
             }}
             renderValue={(value) => {
diff --git a/packages/plugins/Trader/src/SiteAdaptor/components/TagModifier.tsx b/packages/plugins/Trader/src/SiteAdaptor/components/TagModifier.tsx
index bb652eed98f5..8e32fe9266a0 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/components/TagModifier.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/components/TagModifier.tsx
@@ -74,15 +74,14 @@ export const TagModifier = memo<PropsOf<Plugin.SiteAdaptor.Definition['TagModifi
                         setFailed(true)
                     }}
                 />
-
-                <Link fontSize="inherit" href={href}>
+                <Link sx={{ fontSize: 'inherit' }} href={href}>
                     {children}
                 </Link>
             </span>
         )
     }
     return (
-        <Link href={href} fontSize="inherit">
+        <Link href={href} sx={{ fontSize: 'inherit' }}>
             {children}
         </Link>
     )
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
index 5eb91980d69a..035018551aa3 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
@@ -516,7 +516,7 @@ than estimated, and any unused funds will remain in the original address.`
                         <Link
                             className={cx(classes.rowValue, classes.link)}
                             to={{ pathname: basePath + RoutePaths.NetworkFee, search: `?mode=${mode}` }}>
-                            <Box display="flex" flexDirection="column">
+                            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                                 <Typography className={classes.text}>
                                     {`${formatWeiToEther(gasFee).toFixed(4)} ${fromNetwork?.nativeCurrency.symbol ?? 'ETH'}${gasCost ? ` ≈ $${gasCost}` : ''}`}
                                 </Typography>
@@ -549,7 +549,7 @@ than estimated, and any unused funds will remain in the original address.`
                                 />
                             </ShadowRootTooltip>
                         </Typography>
-                        <Typography className={classes.rowValue} textAlign="right">
+                        <Typography className={classes.rowValue} sx={{ textAlign: 'right' }}>
                             {toChainNetworkFee ?
                                 <>
                                     {formatBalance(toChainNetworkFee, toNetwork?.nativeCurrency.decimals)}{' '}
@@ -575,7 +575,7 @@ than estimated, and any unused funds will remain in the original address.`
                                 />
                             </ShadowRootTooltip>
                         </Typography>
-                        <Typography className={classes.rowValue} textAlign="right">
+                        <Typography className={classes.rowValue} sx={{ textAlign: 'right' }}>
                             {router?.crossChainFee} {bridgeFeeToken?.symbol ?? '--'}
                             <br />
                             (${bridgeFeeValue})
@@ -586,10 +586,10 @@ than estimated, and any unused funds will remain in the original address.`
                             <Trans>Wallet</Trans>
                         </Typography>
                         <Typography className={classes.rowValue} component="div">
-                            <Box maxWidth="175px" sx={{ wordBreak: 'break-all', textAlign: 'right' }}>
+                            <Box sx={{ maxWidth: '175px', wordBreak: 'break-all', textAlign: 'right' }}>
                                 {reversedName || formatEthereumAddress(account, 4)}
                             </Box>
-                            <CopyButton text={account} size={16} display="flex" />
+                            <CopyButton text={account} size={16} sx={{ display: 'flex' }} />
                         </Typography>
                     </div>
                     <div className={classes.infoRow}>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeQuoteRoute.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeQuoteRoute.tsx
index a75c6cb727bc..96038de215c6 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeQuoteRoute.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeQuoteRoute.tsx
@@ -116,7 +116,7 @@ export const BridgeQuoteRoute = memo(function BridgeQuoteRoute() {
 
     if (!bridgeQuote?.routerList.length)
         return (
-            <Box className={classes.container} justifyContent="center">
+            <Box className={classes.container} sx={{ justifyContent: 'center' }}>
                 <EmptyStatus />
             </Box>
         )
@@ -160,7 +160,7 @@ export const BridgeQuoteRoute = memo(function BridgeQuoteRoute() {
                         </Typography>
 
                         <div className={classes.infoRow}>
-                            <Typography className={classes.rowName} fontWeight={700}>
+                            <Typography className={classes.rowName} sx={{ fontWeight: 700 }}>
                                 {formatAmount(router.toTokenAmount, -(toToken?.decimals || 0))}{' '}
                                 {toToken?.symbol || '--'}
                             </Typography>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
index b3681de2d372..ae7fbb2a8ee7 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
@@ -472,7 +472,7 @@ export const Confirm = memo(function Confirm() {
                         <Link
                             className={cx(classes.rowValue, classes.link)}
                             to={{ pathname: basePath + RoutePaths.NetworkFee, search: `?mode=${mode}` }}>
-                            <Box display="flex" flexDirection="column">
+                            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                                 <Typography className={classes.text}>
                                     {`${formatWeiToEther(gasFee).toFixed(4)} ${nativeToken?.symbol ?? 'ETH'}${gasCost ? ` ≈ $${gasCost}` : ''}`}
                                 </Typography>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/NetworkFee/index.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/NetworkFee/index.tsx
index 7c907a2e6b1f..68fad17ed553 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/NetworkFee/index.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/NetworkFee/index.tsx
@@ -369,7 +369,7 @@ export const NetworkFee = memo(function NetworkFee() {
                     <div className={classes.boxContent}>
                         {isSupport1559 ?
                             <>
-                                <Box display="flex" alignItems="center">
+                                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                                     <Typography className={classes.fieldName}>
                                         <Trans>Max base fee</Trans>
                                     </Typography>
@@ -447,7 +447,7 @@ export const NetworkFee = memo(function NetworkFee() {
                                 />
                             </>
                         :   <>
-                                <Box display="flex" alignItems="center">
+                                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                                     <Typography className={classes.fieldName}>
                                         <Trans>Gas Price</Trans>
                                     </Typography>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/QuoteRoute.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/QuoteRoute.tsx
index 413c74c099d7..f990917397c9 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/QuoteRoute.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/QuoteRoute.tsx
@@ -146,7 +146,7 @@ export const QuoteRoute = memo(function QuoteRoute() {
     const compareList = useCompareList(quote, chainId)
     if (!quote)
         return (
-            <Box className={classes.container} justifyContent="center">
+            <Box className={classes.container} sx={{ justifyContent: 'center' }}>
                 <EmptyStatus />
             </Box>
         )
@@ -163,7 +163,7 @@ export const QuoteRoute = memo(function QuoteRoute() {
     )
     return (
         <div className={classes.container}>
-            <Box className={classes.infoRow} py={0.5}>
+            <Box className={classes.infoRow} sx={{ py: 0.5 }}>
                 <Typography className={classes.rowName}>
                     <Trans>Dex/Est received ({quote?.toToken.tokenSymbol})</Trans>
                 </Typography>
@@ -210,7 +210,7 @@ export const QuoteRoute = memo(function QuoteRoute() {
                         </Typography>
 
                         <div className={classes.infoRow}>
-                            <Typography className={classes.rowName} fontWeight={700}>
+                            <Typography className={classes.rowName} sx={{ fontWeight: 700 }}>
                                 {new BigNumber(compare.amountOut).toFixed(4)}
                             </Typography>
                             {isBest ?
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/SelectLiquidity.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/SelectLiquidity.tsx
index d0f6c406fa4f..7eb48304b396 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/SelectLiquidity.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/SelectLiquidity.tsx
@@ -226,7 +226,7 @@ export const SelectLiquidity = memo(function SelectLiquidity() {
                     />
                     <Typography>Select all</Typography>
                 </label>
-                <Box flexGrow={1}>
+                <Box sx={{ flexGrow: 1 }}>
                     <Button
                         fullWidth
                         disabled={!remains.length}
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Slippage.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Slippage.tsx
index 5f7d1a4753ba..22ee6c39f3cc 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Slippage.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Slippage.tsx
@@ -136,7 +136,7 @@ export const Slippage = memo(function Slippage() {
                         </Typography>
                     </Typography>
                     <div className={classes.boxContent}>
-                        <Typography mb={0.5}>
+                        <Typography sx={{ mb: 0.5 }}>
                             The transaction will be executed according to the slippage you set
                         </Typography>
                         <MaskTextField
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/Quote.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/Quote.tsx
index a132df81a1db..9f0aba60dca2 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/Quote.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/Quote.tsx
@@ -166,10 +166,12 @@ export function Quote({ quote, ...props }: QuoteProps) {
                                 title={isAutoSlippage ? `${DEFAULT_SLIPPAGE}%` : `${slippage}%`}>
                                 <Box
                                     component="span"
-                                    maxWidth="200px"
-                                    textOverflow="ellipsis"
-                                    overflow="hidden"
-                                    whiteSpace="nowrap">
+                                    sx={{
+                                        maxWidth: '200px',
+                                        textOverflow: 'ellipsis',
+                                        overflow: 'hidden',
+                                        whiteSpace: 'nowrap',
+                                    }}>
                                     {isAutoSlippage ? `${DEFAULT_SLIPPAGE}%` : `${slippage}%`}
                                 </Box>
                             </TextOverflowTooltip>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx
index 3f5079bff8af..1efd3e9c19c8 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx
@@ -231,11 +231,11 @@ export function TradeView() {
         <div className={classes.view}>
             <Box className={classes.container}>
                 <Box className={classes.box}>
-                    <Box display="flex" flexDirection="column" gap={1}>
-                        <Typography lineHeight="18px" fontWeight="700" fontSize="14px">
+                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                        <Typography sx={{ lineHeight: '18px', fontWeight: '700', fontSize: '14px' }}>
                             <Trans>From</Trans>
                         </Typography>
-                        <Box display="flex" flexDirection="row">
+                        <Box sx={{ display: 'flex', flexDirection: 'row' }}>
                             <Box
                                 className={classes.token}
                                 onClick={async () => {
@@ -260,7 +260,7 @@ export function TradeView() {
                                         chainIconSize={12}
                                     />
                                 </Box>
-                                <Box display="flex" flexDirection="column">
+                                <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                                     <Typography component="strong" className={classes.symbol}>
                                         {fromToken?.symbol ?? '--'}
                                     </Typography>
@@ -274,8 +274,8 @@ export function TradeView() {
                             </Box>
                         </Box>
                     </Box>
-                    <Box flexGrow={1}>
-                        <Box height="100%" position="relative">
+                    <Box sx={{ flexGrow: 1 }}>
+                        <Box sx={{ height: '100%', position: 'relative' }}>
                             {isLoadingFromTokenBalance ?
                                 <Box className={classes.tokenStatus}>
                                     <Icons.Wallet size={16} />
@@ -332,11 +332,9 @@ export function TradeView() {
                         }}>
                         <Icons.BiArrow size={16} color={theme.palette.maskColor.main} />
                     </Box>
-                    <Box display="flex" flexDirection="column" gap={1}>
-                        <Typography lineHeight="18px" fontWeight="700" fontSize="14px">
-                            To
-                        </Typography>
-                        <Box display="flex" flexDirection="row">
+                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                        <Typography sx={{ lineHeight: '18px', fontWeight: '700', fontSize: '14px' }}>To</Typography>
+                        <Box sx={{ display: 'flex', flexDirection: 'row' }}>
                             <Box
                                 className={classes.token}
                                 onClick={async () => {
@@ -355,7 +353,7 @@ export function TradeView() {
                                         chainIconSize={12}
                                     />
                                 </Box>
-                                <Box display="flex" flexDirection="column">
+                                <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                                     <Typography component="strong" className={classes.symbol}>
                                         {toToken?.symbol ?? '--'}
                                     </Typography>
@@ -369,8 +367,8 @@ export function TradeView() {
                             </Box>
                         </Box>
                     </Box>
-                    <Box flexGrow={1}>
-                        <Box height="100%" position="relative">
+                    <Box sx={{ flexGrow: 1 }}>
+                        <Box sx={{ height: '100%', position: 'relative' }}>
                             {toTokenBalance ?
                                 <Box className={classes.tokenStatus}>
                                     <Icons.Wallet size={16} />
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx
index 0e1f6cb08dc8..ce326e5f9c00 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx
@@ -331,7 +331,7 @@ export const Transaction = memo(function Transaction() {
 
     if (!tx)
         return (
-            <Box className={classes.container} alignItems="center" justifyContent="center">
+            <Box className={classes.container} sx={{ alignItems: 'center', justifyContent: 'center' }}>
                 <EmptyStatus />
             </Box>
         )
@@ -476,7 +476,7 @@ export const Transaction = memo(function Transaction() {
                             </div>
                         :   null}
                         {tx.kind === 'bridge' && bridgeStatus?.status === 'PENDING' ?
-                            <Typography className={classes.tip} ml="38px">
+                            <Typography className={classes.tip} sx={{ ml: '38px' }}>
                                 <Trans>
                                     Transferring asset across to the {toNetwork?.fullName} network via the{' '}
                                     {tx.bridgeName}
@@ -522,7 +522,9 @@ export const Transaction = memo(function Transaction() {
                                 address={toToken?.contractAddress || ''}
                             />
                             <div className={classes.tokenValue}>
-                                <Typography className={cx(classes.toToken, classes.value)} alignItems="center">
+                                <Typography
+                                    className={cx(classes.toToken, classes.value)}
+                                    sx={{ alignItems: 'center' }}>
                                     {detailStatus === 'BRIDGE_PENDING' ?
                                         <LoadingBase size={16} />
                                     :   null}
@@ -623,7 +625,7 @@ export const Transaction = memo(function Transaction() {
                         </Typography>
                         <Typography className={classes.rowValue}>
                             {formatEthereumAddress(tx.dexContractAddress, 4)}
-                            <CopyButton text={tx.dexContractAddress} size={16} display="flex" />
+                            <CopyButton text={tx.dexContractAddress} size={16} sx={{ display: 'flex' }} />
                         </Typography>
                     </div>
                 </div>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/CoinMarketPanel.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/CoinMarketPanel.tsx
index 10789caa0e46..dc3ab3820059 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/CoinMarketPanel.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/CoinMarketPanel.tsx
@@ -13,7 +13,7 @@ export function CoinMarketPanel(props: CoinMarketPanelProps) {
     const { trending, result } = props
 
     return (
-        <Stack p={2} gap={1}>
+        <Stack sx={{ p: 2, gap: 1 }}>
             <CoinMarketTable trending={trending} result={result} />
             <CoinMetadataTable trending={trending} />
         </Stack>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/PluginDescriptor.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/PluginDescriptor.tsx
index 3f2efe49113d..da9203533a9d 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/PluginDescriptor.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/PluginDescriptor.tsx
@@ -21,17 +21,20 @@ export function PluginDescriptor({ children, isProfilePage, isTokenTagPopper }:
     const { classes } = useStyles()
 
     return (
-        <Stack flexDirection="row" justifyContent="space-between" alignItems="center" width="100%">
-            <Stack flexDirection="row" justifyContent="space-between" gap={0.5} alignItems="center">
+        <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
+            <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', gap: 0.5, alignItems: 'center' }}>
                 {isTokenTagPopper ?
                     <Icons.Web3ProfileCard className={classes.cardIcon} size={24} />
                 : isProfilePage ?
                     <Icons.Web3Profile className={classes.cardIcon} size={24} />
                 :   <Icons.DecentralizedSearch />}
                 <Typography
-                    fontWeight="bolder"
-                    fontSize={16}
-                    color={(theme) => (isTokenTagPopper ? theme.palette.maskColor.main : theme.palette.maskColor.dark)}>
+                    sx={{
+                        fontWeight: 'bolder',
+                        fontSize: 16,
+                        color: (theme) =>
+                            isTokenTagPopper ? theme.palette.maskColor.main : theme.palette.maskColor.dark,
+                    }}>
                     {isTokenTagPopper ?
                         <Trans>Web3 Profile Card</Trans>
                     : isProfilePage ?
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/PriceChart.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/PriceChart.tsx
index 1fc2229fe6ad..43ba308bb51c 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/PriceChart.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/PriceChart.tsx
@@ -73,8 +73,8 @@ export function PriceChart(props: PriceChartProps) {
             sx={{
                 cursor: stats.length && coin?.platform_url ? 'pointer' : 'default',
             }}>
-            <Stack gap={2}>
-                <Box className={classes.chart} height={DEFAULT_DIMENSION.height}>
+            <Stack sx={{ gap: 2 }}>
+                <Box className={classes.chart} sx={{ height: DEFAULT_DIMENSION.height }}>
                     {loading ?
                         <LoadingStatus iconSize={36} />
                     : stats.length ?
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/PriceChartDaysControl.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/PriceChartDaysControl.tsx
index c65c5e6a9635..4a62e9b5f6a1 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/PriceChartDaysControl.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/PriceChartDaysControl.tsx
@@ -40,7 +40,7 @@ export function PriceChartDaysControl({
 }: PriceChartDaysControlProps) {
     const { classes, cx } = useStyles()
     return (
-        <Stack className={classes.root} direction="row" gap={2}>
+        <Stack className={classes.root} direction="row" sx={{ gap: 2 }}>
             {rangeOptions.map((daysOption) => (
                 <Link
                     className={cx(classes.link, days === daysOption ? classes.active : '')}
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx
index 1b484745e7aa..c2d78ba93412 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx
@@ -92,7 +92,7 @@ export function TickersTable({ tickers }: TickersTableProps) {
         const price = ticker.price ?? ticker.floor_price
         const volume = ticker.volume
         const marketplaceOrExchange = (
-            <Stack direction="row" alignItems="center">
+            <Stack direction="row" sx={{ alignItems: 'center' }}>
                 {ticker.logo_url ?
                     <img className={classes.logo} src={ticker.logo_url} />
                 :   null}
@@ -114,15 +114,13 @@ export function TickersTable({ tickers }: TickersTableProps) {
                     <ShadowRootTooltip
                         placement="top-start"
                         disableInteractive
-                        PopperProps={{
-                            disablePortal: true,
-                        }}
+                        slotProps={{ popper: { disablePortal: true } }}
                         disableHoverListener={basename.length + targetName.length < 9}
                         title={`${formatted} / ${formatEthereumAddress(ticker.target_name, 2)}`}
                         arrow>
                         <Box className={classes.pair}>
                             <Link
-                                color={(theme) => theme.palette.maskColor?.primary}
+                                sx={{ color: (theme) => theme.palette.maskColor?.primary }}
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 href={ticker.trade_url}>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx
index 1b1a7d008107..faf69d4b1452 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx
@@ -252,7 +252,7 @@ export function TrendingView(props: TrendingViewProps) {
             trending={trending}
             TrendingCardProps={{ classes: { root: classes.root } }}>
             <TabContext value={currentTab}>
-                <Stack px={2}>
+                <Stack sx={{ px: 2 }}>
                     <MaskTabList
                         variant="base"
                         classes={{ root: classes.tabListRoot }}
@@ -303,7 +303,7 @@ export function TrendingView(props: TrendingViewProps) {
                     </Box>
                 :   null}
                 {currentTab === ContentTab.Exchange && trending.dataProvider ?
-                    <Box p={2}>
+                    <Box sx={{ p: 2 }}>
                         <TickersTable tickers={tickers} />
                     </Box>
                 :   null}
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx
index d04494159dcd..cb783d0e48e5 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx
@@ -258,9 +258,12 @@ export function TrendingViewDeck(props: TrendingViewDeckProps) {
                     <TrendingViewDescriptor result={result} resultList={resultList} setResult={setResult} />
                 )}
                 <Stack className={classes.headline}>
-                    <Stack gap={2} flexGrow={1}>
+                    <Stack sx={{ gap: 2, flexGrow: 1 }}>
                         <Stack>
-                            <Stack component="div" flexDirection="row" alignItems="center" gap={0.5} ref={titleRef}>
+                            <Stack
+                                component="div"
+                                ref={titleRef}
+                                sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}>
                                 <Linking LinkProps={{ className: classes.link }} href={first(coin.home_urls)}>
                                     <Avatar className={classes.avatar} src={coin.image_url} alt={coin.symbol}>
                                         <CoinIcon
@@ -343,17 +346,19 @@ export function TrendingViewDeck(props: TrendingViewDeckProps) {
                                     </ThemeProvider>
                                 </Box>
                             </Stack>
-                            <Stack direction="row" justifyContent="space-between" marginTop={2}>
-                                <Stack direction="row" gap={1} alignItems="center">
+                            <Stack direction="row" sx={{ justifyContent: 'space-between', marginTop: 2 }}>
+                                <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
                                     {market ?
                                         <Typography
-                                            fontSize={18}
-                                            fontWeight={500}
-                                            lineHeight="24px"
+                                            sx={{
+                                                fontSize: 18,
+                                                fontWeight: 500,
+                                                lineHeight: '24px',
+                                            }}
                                             color={theme.palette.maskColor.dark}>
                                             {floorPrice ? formatCurrency(floorPrice, 'USD') : '--'}
                                         </Typography>
-                                    :   <Typography fontSize={14} fontWeight={500} lineHeight="24px">
+                                    :   <Typography sx={{ fontSize: 14, fontWeight: 500, lineHeight: '24px' }}>
                                             <Trans>No Data</Trans>
                                         </Typography>
                                     }
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDescriptor.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDescriptor.tsx
index a74191994477..11b55611c345 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDescriptor.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDescriptor.tsx
@@ -58,10 +58,12 @@ export function TrendingViewDescriptor(props: TrendingViewDescriptorProps) {
             <Box className={classes.source}>
                 <Stack
                     className={classes.sourceMenu}
-                    display="inline-flex"
-                    flexDirection="row"
-                    alignItems="center"
-                    gap={0.5}>
+                    sx={{
+                        display: 'inline-flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 0.5,
+                    }}>
                     <Typography className={classes.sourceNote}>
                         <Trans>Powered by</Trans>
                     </Typography>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewSkeleton.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewSkeleton.tsx
index a27b4fb21963..9ebec488e442 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewSkeleton.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewSkeleton.tsx
@@ -37,9 +37,9 @@ export function TrendingViewSkeleton(props: TrendingViewSkeletonProps) {
                 )}
                 <CardContent className={classes.content}>
                     {children ?? (
-                        <Stack height="100%" alignItems="center" justifyContent="center">
+                        <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>
                             <LoadingBase />
-                            <Typography fontSize="14px" mt={1.5}>
+                            <Typography sx={{ fontSize: '14px', mt: 1.5 }}>
                                 <Trans>Loading</Trans>
                             </Typography>
                         </Stack>
diff --git a/packages/plugins/Transak/src/SiteAdaptor/BuyTokenDialog.tsx b/packages/plugins/Transak/src/SiteAdaptor/BuyTokenDialog.tsx
index b20df07ef3ed..b37da7800628 100644
--- a/packages/plugins/Transak/src/SiteAdaptor/BuyTokenDialog.tsx
+++ b/packages/plugins/Transak/src/SiteAdaptor/BuyTokenDialog.tsx
@@ -79,11 +79,11 @@ export function BuyTokenDialog(props: BuyTokenDialogProps) {
                         <CloseIcon />
                     </IconButton>
                     {loading ?
-                        <Stack className={classes.status} alignItems="center" justifyContent="center">
+                        <Stack className={classes.status} sx={{ alignItems: 'center', justifyContent: 'center' }}>
                             <LoadingBase size={36} />
                         </Stack>
                     : error || !widgetUrl ?
-                        <Stack className={classes.status} alignItems="center" justifyContent="center">
+                        <Stack className={classes.status} sx={{ alignItems: 'center', justifyContent: 'center' }}>
                             <Typography variant="body1">
                                 Transak is temporarily unavailable. Please try again later.
                             </Typography>
diff --git a/packages/plugins/VCent/src/SiteAdaptor/TweetDialog.tsx b/packages/plugins/VCent/src/SiteAdaptor/TweetDialog.tsx
index 75619fe5ad3d..be5c29253217 100644
--- a/packages/plugins/VCent/src/SiteAdaptor/TweetDialog.tsx
+++ b/packages/plugins/VCent/src/SiteAdaptor/TweetDialog.tsx
@@ -70,14 +70,19 @@ export const VCentDialog = memo(function VCentDialog({ tweetAddress }: { tweetAd
             <Box className={classes.content}>
                 <Box className={classes.title}>
                     <ImageIcon icon={networkDescriptor?.icon} size={20} />
-                    <Typography fontWeight="bold" fontSize={14} lineHeight="18px" sx={{ marginLeft: 0.5 }}>
+                    <Typography sx={{ fontWeight: 'bold', fontSize: 14, lineHeight: '18px', marginLeft: 0.5 }}>
                         {tweet.amount_eth.toFixed(4)}
                     </Typography>
                 </Box>
                 <Box className={classes.title}>
                     <Trans>
                         <Typography className={classes.fieldName}>Latest offer at </Typography>
-                        <Typography fontWeight="bold" fontSize={14} color={(t) => t.palette.maskColor.publicMain}>
+                        <Typography
+                            sx={{
+                                fontWeight: 'bold',
+                                fontSize: 14,
+                                color: (t) => t.palette.maskColor.publicMain,
+                            }}>
                             ${tweet.amount_usd}
                         </Typography>
                     </Trans>
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx
index 9f2d2552c726..6fbad03c19b6 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx
@@ -236,7 +236,7 @@ export function FollowLensDialog({ handle, onClose }: Props) {
             classes={{ dialogTitle: classes.dialogTitle, paper: classes.dialogContent }}>
             <DialogContent sx={{ padding: 3 }}>
                 {!lensAccount && isLoading ?
-                    <Box display="flex" justifyContent="center" alignItems="center" minHeight={342}>
+                    <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 342 }}>
                         <CircularProgress />
                     </Box>
                 :   <Box className={classes.container}>
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/HandlerDescription.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/HandlerDescription.tsx
index 8e1cb2e19938..7777ef909a59 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/HandlerDescription.tsx
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/HandlerDescription.tsx
@@ -111,7 +111,7 @@ export const HandlerDescription = memo<HandlerDescriptionProps>(function Handler
         <Box className={classes.container}>
             <Box className={classes.description}>
                 <WalletIcon classes={{ mainIcon: classes.avatar }} size={36} mainIcon={avatar} />
-                <Box minWidth={0}>
+                <Box sx={{ minWidth: 0 }}>
                     <TextOverflowTooltip as={ShadowRootTooltip} placement="top" title={displayName}>
                         <Typography className={classes.name}>{displayName}</Typography>
                     </TextOverflowTooltip>
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx
index 074a26f09bbd..ab083e172d47 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx
@@ -187,7 +187,9 @@ export const ProfilePopup = memo<ProfilePopupProps>(function ProfilePopup({
                             <ListItemText
                                 classes={{ primary: classes.primary, root: classes.listItemText }}
                                 primary={name}
-                                secondaryTypographyProps={{ component: 'div' }}
+                                slotProps={{
+                                    secondary: { component: 'div' },
+                                }}
                                 secondary={
                                     <div className={classes.second}>
                                         <Typography component="div" className={classes.address}>
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Web3ProfileDialog.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Web3ProfileDialog.tsx
index 384644a01e61..a926b4c4a961 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Web3ProfileDialog.tsx
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Web3ProfileDialog.tsx
@@ -76,11 +76,11 @@ export const Web3ProfileDialog = memo(function Web3ProfileDialog({ open, onClose
                         <div key={profile.identifier.toText()} className={classes.profileItem}>
                             <Avatar src={profile.avatar} />
                             <div>
-                                <Typography fontSize={14} fontWeight={700}>
+                                <Typography sx={{ fontSize: 14, fontWeight: 700 }}>
                                     @{profile.identifier.userId}
                                 </Typography>
                                 {profile.nickname ?
-                                    <Typography fontSize={12} color="text.secondary">
+                                    <Typography sx={{ fontSize: 12, color: 'text.secondary' }}>
                                         {profile.nickname}
                                     </Typography>
                                 :   null}
diff --git a/packages/shared/src/UI/components/AccountIcons/index.tsx b/packages/shared/src/UI/components/AccountIcons/index.tsx
index 1034e8f05d44..0a17f4988be7 100644
--- a/packages/shared/src/UI/components/AccountIcons/index.tsx
+++ b/packages/shared/src/UI/components/AccountIcons/index.tsx
@@ -67,7 +67,7 @@ function AccountTooltips({ platform, type, children }: AccountTooltipsProps) {
             classes={{ tooltip: classes.tooltip }}
             disableInteractive
             title={
-                <Typography fontSize={14} lineHeight="18px">
+                <Typography sx={{ fontSize: 14, lineHeight: '18px' }}>
                     {SocialAddressType.Address === type ?
                         <Trans>
                             Data source is retrieved from{' '}
@@ -228,7 +228,7 @@ export function AccountIcons({ socialAccount, classes: externalClasses }: Accoun
         <ShadowRootTooltip
             classes={{ tooltip: classes.tooltip }}
             title={
-                <Typography fontSize={14} lineHeight="18px" component="div">
+                <Typography sx={{ fontSize: 14, lineHeight: '18px' }} component="div">
                     <Trans>
                         Data source is retrieved from{' '}
                         <Select
diff --git a/packages/shared/src/UI/components/AddressItem/index.tsx b/packages/shared/src/UI/components/AddressItem/index.tsx
index 81efaf754916..47fb956fd55c 100644
--- a/packages/shared/src/UI/components/AddressItem/index.tsx
+++ b/packages/shared/src/UI/components/AddressItem/index.tsx
@@ -36,7 +36,7 @@ export interface AddressItemProps {
     isMenu?: boolean
 }
 
-const defaultTypography = { fontSize: '14px', fontWeight: 700 }
+const defaultTypography = { sx: { fontSize: '14px', fontWeight: 700 } }
 export function AddressItem({
     socialAccount,
     TypographyProps = defaultTypography,
@@ -68,7 +68,12 @@ export function AddressItem({
                         pluginID={socialAccount.pluginID}
                     />
                 :   <ShadowRootTooltip title={formattedDomain === socialAccount.label ? '' : socialAccount.label}>
-                        <Typography fontSize="14px" fontWeight={700} {...TypographyProps}>
+                        <Typography
+                            {...TypographyProps}
+                            sx={[
+                                { fontSize: '14px', fontWeight: 700 },
+                                ...(Array.isArray(TypographyProps.sx) ? TypographyProps.sx : [TypographyProps.sx]),
+                            ]}>
                             {formattedDomain}
                         </Typography>
                     </ShadowRootTooltip>
diff --git a/packages/shared/src/UI/components/Alert/index.tsx b/packages/shared/src/UI/components/Alert/index.tsx
index 3a3dcb948528..2ae49b6126e8 100644
--- a/packages/shared/src/UI/components/Alert/index.tsx
+++ b/packages/shared/src/UI/components/Alert/index.tsx
@@ -41,7 +41,7 @@ export const Alert = memo<Props>(function Alert({ className, children, open, onC
             {severity === 'warning' ?
                 <Icons.WarningTriangle size={20} />
             :   <Icons.Info size={20} />}
-            <Typography fontSize={14} component="div">
+            <Typography sx={{ fontSize: 14 }} component="div">
                 {children}
             </Typography>
             {onClose ?
diff --git a/packages/shared/src/UI/components/ApplicationEntry/index.tsx b/packages/shared/src/UI/components/ApplicationEntry/index.tsx
index cc206d677150..3e5312c7ea5f 100644
--- a/packages/shared/src/UI/components/ApplicationEntry/index.tsx
+++ b/packages/shared/src/UI/components/ApplicationEntry/index.tsx
@@ -153,7 +153,7 @@ export function ApplicationEntry(props: ApplicationEntryProps) {
                     as={ShadowRootTooltip}
                     arrow={false}
                     disableInteractive
-                    componentsProps={{
+                    slotProps={{
                         tooltip: {
                             style: {
                                 padding: 6,
@@ -173,10 +173,12 @@ export function ApplicationEntry(props: ApplicationEntryProps) {
             </Button>
     return tooltipHint && !disabled ?
             <ShadowRootTooltip
-                PopperProps={{
-                    ...popperProps,
-                    disablePortal: true,
-                    placement: recommendFeature ? 'bottom' : 'top',
+                slotProps={{
+                    popper: {
+                        ...popperProps,
+                        disablePortal: true,
+                        placement: recommendFeature ? 'bottom' : 'top',
+                    },
                 }}
                 classes={{
                     arrow: classes.arrow,
diff --git a/packages/shared/src/UI/components/ChainBoundary/index.tsx b/packages/shared/src/UI/components/ChainBoundary/index.tsx
index d7bd2a9bc966..4d7f915a481d 100644
--- a/packages/shared/src/UI/components/ChainBoundary/index.tsx
+++ b/packages/shared/src/UI/components/ChainBoundary/index.tsx
@@ -154,7 +154,7 @@ export function ChainBoundaryWithoutContext<T extends NetworkPluginID>(props: Ch
                 classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
                 arrow
                 placement="top">
-                <Box className={props.className} display="flex" flexDirection="column" width="100%">
+                <Box className={props.className} sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
                     {children}
                 </Box>
             </ShadowRootTooltip>
diff --git a/packages/shared/src/UI/components/CoinMetadataTable/ContractItem.tsx b/packages/shared/src/UI/components/CoinMetadataTable/ContractItem.tsx
index 58b3393cb904..3d73d6da291e 100644
--- a/packages/shared/src/UI/components/CoinMetadataTable/ContractItem.tsx
+++ b/packages/shared/src/UI/components/CoinMetadataTable/ContractItem.tsx
@@ -55,9 +55,9 @@ export function ContractItem({ pluginID, chainId, address, className, ...rest }:
 
     return (
         <MenuItem className={cx(classes.contractItem, className)} {...rest}>
-            <Stack direction="row" alignItems="center">
+            <Stack direction="row" sx={{ alignItems: 'center' }}>
                 <ImageIcon icon={networkDescriptor.icon} size={16} />
-                <Typography className={classes.address} ml={1}>
+                <Typography className={classes.address} sx={{ ml: 1 }}>
                     <FormattedAddress address={address} size={4} formatter={Utils.formatAddress} />
                 </Typography>
                 <CopyButton className={classes.icon} text={address} size={16} title="Copy address" scoped={false} />
diff --git a/packages/shared/src/UI/components/CoinMetadataTable/ContractSection.tsx b/packages/shared/src/UI/components/CoinMetadataTable/ContractSection.tsx
index b91177616d9f..b2593cf4ece6 100644
--- a/packages/shared/src/UI/components/CoinMetadataTable/ContractSection.tsx
+++ b/packages/shared/src/UI/components/CoinMetadataTable/ContractSection.tsx
@@ -29,20 +29,23 @@ export function ContractSection({
     const chain = useNetworkDescriptor(pluginID ?? NetworkPluginID.PLUGIN_EVM, chainId)
 
     return (
-        <Stack direction="row" gap={0.5} display="flex" alignItems="center" justifyContent={align}>
+        <Stack direction="row" sx={{ gap: 0.5, display: 'flex', alignItems: 'center', justifyContent: align }}>
             {chain ?
                 <WalletIcon mainIcon={chain.icon} size={14} />
             : iconURL ?
                 <TokenIcon logoURL={iconURL} address={address} name={name} symbol={symbol} size={16} disableBadge />
-            :   <Box width={16} />}
+            :   <Box sx={{ width: 16 }} />}
             <Typography
                 variant="body2"
                 component="a"
-                fontWeight={700}
-                fontSize={fullAddress ? 12 : 14}
                 href={chainId ? Utils.explorerResolver.addressLink(chainId, address) : undefined}
                 target="_blank"
-                sx={{ color: 'text.primary', textDecoration: 'none' }}>
+                sx={{
+                    fontWeight: 700,
+                    fontSize: fullAddress ? 12 : 14,
+                    color: 'text.primary',
+                    textDecoration: 'none',
+                }}>
                 <FormattedAddress
                     address={address}
                     size={fullAddress ? undefined : 4}
diff --git a/packages/shared/src/UI/components/CoinMetadataTable/index.tsx b/packages/shared/src/UI/components/CoinMetadataTable/index.tsx
index 0efcbe0c436f..70f3533bb98e 100644
--- a/packages/shared/src/UI/components/CoinMetadataTable/index.tsx
+++ b/packages/shared/src/UI/components/CoinMetadataTable/index.tsx
@@ -132,7 +132,7 @@ export const CoinMetadataTable = memo(function CoinMetadataTable({ trending }: C
                 horizontal: 'right',
             },
             classes: { paper: classes.menu, list: classes.list },
-            MenuListProps: { classes: { root: classes.item } },
+            slotProps: { list: { classes: { root: classes.item } } },
         },
     )
 
@@ -144,7 +144,7 @@ export const CoinMetadataTable = memo(function CoinMetadataTable({ trending }: C
     return (
         <Stack>
             <Stack>
-                <Typography fontSize={14} fontWeight={700}>
+                <Typography sx={{ fontSize: 14, fontWeight: 700 }}>
                     <Trans>Info</Trans>
                 </Typography>
             </Stack>
@@ -162,9 +162,12 @@ export const CoinMetadataTable = memo(function CoinMetadataTable({ trending }: C
                                     {contracts[0].address ?
                                         <Stack
                                             direction="row"
-                                            justifyContent="flex-end"
-                                            height={18}
-                                            style={{ position: 'relative', right: -5 }}>
+                                            sx={{
+                                                justifyContent: 'flex-end',
+                                                height: 18,
+                                                position: 'relative',
+                                                right: '-5px',
+                                            }}>
                                             <ContractSection
                                                 pluginID={contracts[0].pluginID}
                                                 chainId={contracts[0].chainId}
@@ -198,7 +201,7 @@ export const CoinMetadataTable = memo(function CoinMetadataTable({ trending }: C
                                                     key={i}
                                                     href={x}
                                                     LinkProps={{ className: classes.link }}
-                                                    TypographyProps={{ fontWeight: 700, fontSize: 14 }}
+                                                    TypographyProps={{ sx: { fontWeight: 700, fontSize: 14 } }}
                                                 />
                                             ))}
                                         </div>
@@ -215,13 +218,15 @@ export const CoinMetadataTable = memo(function CoinMetadataTable({ trending }: C
                                 </TableCell>
                                 <TableCell className={classes.cellValue} align="right">
                                     <Stack
-                                        height="100%"
-                                        display="flex"
                                         direction="row"
-                                        justifyContent="flex-end"
-                                        flexWrap="wrap"
-                                        alignItems="center"
-                                        gap={1}>
+                                        sx={{
+                                            height: '100%',
+                                            display: 'flex',
+                                            justifyContent: 'flex-end',
+                                            flexWrap: 'wrap',
+                                            alignItems: 'center',
+                                            gap: 1,
+                                        }}>
                                         {trending.coin.community_urls.map((x) =>
                                             brands[x.type] ?
                                                 <Linking
@@ -251,7 +256,7 @@ export const CoinMetadataTableSkeleton = memo(function CoinMetadataTableSkeleton
     return (
         <Stack>
             <Stack>
-                <Typography fontSize={14} fontWeight={700}>
+                <Typography sx={{ fontSize: 14, fontWeight: 700 }}>
                     <Trans>Info</Trans>
                 </Typography>
             </Stack>
diff --git a/packages/shared/src/UI/components/ConnectPersonaBoundary/index.tsx b/packages/shared/src/UI/components/ConnectPersonaBoundary/index.tsx
index 1f42fa9246fa..94bddca961c0 100644
--- a/packages/shared/src/UI/components/ConnectPersonaBoundary/index.tsx
+++ b/packages/shared/src/UI/components/ConnectPersonaBoundary/index.tsx
@@ -123,12 +123,12 @@ export const ConnectPersonaBoundary = memo<ConnectPersonaBoundaryProps>(
 
         if (statusLoading) return null
         return (
-            <Stack className={classes.root} display="inline-flex" onClick={handleClick}>
-                <Stack style={{ pointerEvents: status.action ? 'none' : 'auto' }} display="inline-flex">
+            <Stack className={classes.root} sx={{ display: 'inline-flex' }} onClick={handleClick}>
+                <Stack sx={{ pointerEvents: status.action ? 'none' : 'auto', display: 'inline-flex' }}>
                     {actionComponent}
                 </Stack>
                 {status.action || statusLoading ?
-                    <Stack className={classes.mask} display="inline-flex" />
+                    <Stack className={classes.mask} sx={{ display: 'inline-flex' }} />
                 :   null}
             </Stack>
         )
diff --git a/packages/shared/src/UI/components/CopyButton/index.tsx b/packages/shared/src/UI/components/CopyButton/index.tsx
index 166a57fcb2dd..27ee4f8d4250 100644
--- a/packages/shared/src/UI/components/CopyButton/index.tsx
+++ b/packages/shared/src/UI/components/CopyButton/index.tsx
@@ -90,8 +90,8 @@ export const CopyButton = memo(function CopyButton({
                 onClick={handleCopy}
                 color="inherit"
                 {...props}
-                fontSize={0}
-                className={cx(classes.root, className)}>
+                className={cx(classes.root, className)}
+                sx={[{ fontSize: 0 }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}>
                 {active ?
                     <Icons.Check {...iconProps} color={theme.palette.maskColor.success} />
                 :   <Icons.Copy {...iconProps} className={classes.copy} />}
diff --git a/packages/shared/src/UI/components/CountryCodePicker/index.tsx b/packages/shared/src/UI/components/CountryCodePicker/index.tsx
index 9669db07d278..83805c182fac 100644
--- a/packages/shared/src/UI/components/CountryCodePicker/index.tsx
+++ b/packages/shared/src/UI/components/CountryCodePicker/index.tsx
@@ -109,7 +109,9 @@ export const CountryCodePicker = memo<CountryCodePickerProps>(({ open, anchorEl,
                 autoFocus
                 onChange={(event) => setQuery(event.target.value)}
                 placeholder={t`Search Area`}
-                InputProps={{ disableUnderline: true, startAdornment: <Icons.Search size={16} />, size: 'small' }}
+                slotProps={{
+                    input: { disableUnderline: true, startAdornment: <Icons.Search size={16} />, size: 'small' },
+                }}
                 sx={{ marginBottom: 0.5 }}
             />
             {regions.length ?
diff --git a/packages/shared/src/UI/components/ElementAnchor/index.tsx b/packages/shared/src/UI/components/ElementAnchor/index.tsx
index 03fbacab6242..1398531f67f1 100644
--- a/packages/shared/src/UI/components/ElementAnchor/index.tsx
+++ b/packages/shared/src/UI/components/ElementAnchor/index.tsx
@@ -20,7 +20,14 @@ export const ElementAnchor = memo<ElementAnchorProps>(({ callback, children, ...
     }, [intersection])
 
     return (
-        <Stack pt={1} ref={elementRef} justifyContent="center" alignItems="center" direction="row" {...rest}>
+        <Stack
+            ref={elementRef}
+            direction="row"
+            {...rest}
+            sx={[
+                { pt: 1, justifyContent: 'center', alignItems: 'center' },
+                ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
+            ]}>
             {children}
         </Stack>
     )
diff --git a/packages/shared/src/UI/components/EmptyStatus/index.tsx b/packages/shared/src/UI/components/EmptyStatus/index.tsx
index 3e978d049b7d..298fb91be1f3 100644
--- a/packages/shared/src/UI/components/EmptyStatus/index.tsx
+++ b/packages/shared/src/UI/components/EmptyStatus/index.tsx
@@ -26,7 +26,10 @@ interface Props extends BoxProps {
 export const EmptyStatus = memo(function EmptyStatus({ className, children, iconSize = 32, ...rest }: Props) {
     const { classes, cx } = useStyles()
     return (
-        <Box className={cx(classes.statusBox, className)} p={2} {...rest}>
+        <Box
+            className={cx(classes.statusBox, className)}
+            {...rest}
+            sx={[{ p: 2 }, ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx])]}>
             <Icons.EmptySimple size={iconSize} />
             <Typography className={classes.text} component="div">
                 {children ?? <Trans>No Data</Trans>}
diff --git a/packages/shared/src/UI/components/FileFrame/index.tsx b/packages/shared/src/UI/components/FileFrame/index.tsx
index 9a2dafb17398..5251ded11354 100644
--- a/packages/shared/src/UI/components/FileFrame/index.tsx
+++ b/packages/shared/src/UI/components/FileFrame/index.tsx
@@ -76,7 +76,7 @@ export const FileFrame = memo(function FileFrame({
                     title={showTooltip ? fileName : undefined}
                     disableInteractive
                     arrow
-                    PopperProps={tooltipPopperProps}>
+                    slotProps={{ popper: tooltipPopperProps }}>
                     <Typography className={classes.name} ref={nameRef}>
                         {fileName}
                     </Typography>
diff --git a/packages/shared/src/UI/components/FootnoteMenu/index.tsx b/packages/shared/src/UI/components/FootnoteMenu/index.tsx
index f56c0392409b..2ff7ac7f91d1 100644
--- a/packages/shared/src/UI/components/FootnoteMenu/index.tsx
+++ b/packages/shared/src/UI/components/FootnoteMenu/index.tsx
@@ -47,10 +47,15 @@ export function FootnoteMenu(props: FootnoteMenuProps) {
     const [menu, openMenu] = useMenuConfig(
         options.map((x, i) => (
             <MenuItem disabled={x.disabled} key={x.value.id} onClick={() => onSelect(x)}>
-                <Stack direction="row" justifyContent="space-around" gap={1} alignItems="center" width="100%">
-                    <Stack flexGrow={1} color={theme.palette.maskColor.main}>
-                        {x.name}
-                    </Stack>
+                <Stack
+                    direction="row"
+                    sx={{
+                        justifyContent: 'space-around',
+                        gap: 1,
+                        alignItems: 'center',
+                        width: '100%',
+                    }}>
+                    <Stack sx={{ flexGrow: 1, color: theme.palette.maskColor.main }}>{x.name}</Stack>
                     {selectedIndex === i ?
                         <Icons.CheckCircle
                             size={20}
@@ -76,8 +81,8 @@ export function FootnoteMenu(props: FootnoteMenuProps) {
                 vertical: 'top',
                 horizontal: 'right',
             },
-            PaperProps: {
-                style: { background: theme.palette.maskColor.bottom },
+            slotProps: {
+                paper: { style: { background: theme.palette.maskColor.bottom } },
             },
         },
     )
diff --git a/packages/shared/src/UI/components/FungibleCoinMarketTable/index.tsx b/packages/shared/src/UI/components/FungibleCoinMarketTable/index.tsx
index 4e4a6ccf0649..df49b31165cd 100644
--- a/packages/shared/src/UI/components/FungibleCoinMarketTable/index.tsx
+++ b/packages/shared/src/UI/components/FungibleCoinMarketTable/index.tsx
@@ -57,7 +57,7 @@ export const FungibleCoinMarketTable = memo(function FungibleCoinMarketTable({ t
     return (
         <Stack>
             <Stack>
-                <Typography fontSize={14} fontWeight={700} component="h3">
+                <Typography sx={{ fontSize: 14, fontWeight: 700 }} component="h3">
                     <Trans>Price Statistic</Trans>
                 </Typography>
             </Stack>
@@ -133,7 +133,7 @@ export const FungibleCoinMarketTableSkeleton = memo(function FungibleCoinMarketT
     return (
         <Stack>
             <Stack>
-                <Typography fontSize={14} fontWeight={700} component="h3">
+                <Typography sx={{ fontSize: 14, fontWeight: 700 }} component="h3">
                     <Trans>Price Statistic</Trans>
                 </Typography>
             </Stack>
diff --git a/packages/shared/src/UI/components/FungibleTokenInput/UI.tsx b/packages/shared/src/UI/components/FungibleTokenInput/UI.tsx
index 2d9e53804479..e531e9088113 100644
--- a/packages/shared/src/UI/components/FungibleTokenInput/UI.tsx
+++ b/packages/shared/src/UI/components/FungibleTokenInput/UI.tsx
@@ -153,8 +153,11 @@ export const FungibleTokenInputUI = memo<FungibleTokenInputUIProps>(
                 fullWidth
                 startAdornment={<Typography className={cx(classes.label, classes.title)}>{label}</Typography>}
                 endAdornment={
-                    <Box className={classes.control} justifyContent={disableBalance ? 'flex-end' : undefined}>
-                        <Typography className={classes.label} display="flex" alignItems="center" component="div">
+                    <Box className={classes.control} sx={{ justifyContent: disableBalance ? 'flex-end' : undefined }}>
+                        <Typography
+                            className={classes.label}
+                            component="div"
+                            sx={{ display: 'flex', alignItems: 'center' }}>
                             {disableBalance ? null : (
                                 <>
                                     {isNative ?
@@ -178,7 +181,7 @@ export const FungibleTokenInputUI = memo<FungibleTokenInputUIProps>(
                             )}
                         </Typography>
                         {disableToken ? null : (
-                            <Box display="flex" alignItems="center" columnGap="12px">
+                            <Box sx={{ display: 'flex', alignItems: 'center', columnGap: '12px' }}>
                                 {token ?
                                     <Chip
                                         size="small"
diff --git a/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx b/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx
index af802374dbfc..05e5827a7374 100644
--- a/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx
+++ b/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx
@@ -5,7 +5,7 @@ import { ActionButton, CheckBoxIndicator, LoadingBase, makeStyles } from '@maskn
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { useFungibleTokenBalance, useNetworkContext, useWeb3Utils } from '@masknet/web3-hooks-base'
 import { formatBalance, type FungibleToken } from '@masknet/web3-shared-base'
-import { Box, Link, ListItem, ListItemIcon, ListItemText, Typography } from '@mui/material'
+import { Box, Link, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material'
 import { memo, useMemo } from 'react'
 import { useAsyncFn } from 'react-use'
 import { FormattedBalance } from '../../wallet/index.js'
@@ -220,9 +220,8 @@ export const getFungibleTokenItem = <T extends NetworkPluginID>({
 
         return (
             <div style={style}>
-                <ListItem
+                <ListItemButton
                     title={address}
-                    button
                     className={`${classes.list} dashboard token-list`}
                     onClick={() => {
                         if (mode === TokenListMode.List) {
@@ -233,7 +232,7 @@ export const getFungibleTokenItem = <T extends NetworkPluginID>({
                     }}
                     disabled={!!(selected && mode === TokenListMode.List)}>
                     <ListItemIcon>
-                        <Box position="relative">
+                        <Box sx={{ position: 'relative' }}>
                             <TokenIcon
                                 pluginID={pluginID}
                                 chainId={chainId}
@@ -289,7 +288,7 @@ export const getFungibleTokenItem = <T extends NetworkPluginID>({
                             {action}
                         </Typography>
                     </ListItemText>
-                </ListItem>
+                </ListItemButton>
             </div>
         )
     })
diff --git a/packages/shared/src/UI/components/Linking.tsx b/packages/shared/src/UI/components/Linking.tsx
index b4e3704cace7..b75d07afc1b4 100644
--- a/packages/shared/src/UI/components/Linking.tsx
+++ b/packages/shared/src/UI/components/Linking.tsx
@@ -13,7 +13,7 @@ export function Linking(props: LinkingProps) {
         const { hostname } = new URL(href)
         return (
             <Link
-                color={(theme) => theme.palette.maskColor.main}
+                sx={{ color: (theme) => theme.palette.maskColor.main }}
                 target="_blank"
                 rel="noopener noreferrer"
                 href={props.href}
diff --git a/packages/shared/src/UI/components/LoadingStatus/index.tsx b/packages/shared/src/UI/components/LoadingStatus/index.tsx
index 7091e1c3cab2..82a8e7fe69c2 100644
--- a/packages/shared/src/UI/components/LoadingStatus/index.tsx
+++ b/packages/shared/src/UI/components/LoadingStatus/index.tsx
@@ -35,7 +35,10 @@ export const LoadingStatus = memo(function LoadingStatus({
 }: Props) {
     const { classes, cx } = useStyles()
     return (
-        <Box className={cx(classes.statusBox, className)} p={2} {...rest}>
+        <Box
+            className={cx(classes.statusBox, className)}
+            {...rest}
+            sx={[{ p: 2 }, ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx])]}>
             <LoadingBase size={iconSize} className={classes.icon} />
             {omitText ? null : <Typography className={classes.text}>{children ?? <Trans>Loading</Trans>}</Typography>}
         </Box>
diff --git a/packages/shared/src/UI/components/MaskPluginWrapper/index.tsx b/packages/shared/src/UI/components/MaskPluginWrapper/index.tsx
index dca65115af8c..4bda23697fb8 100644
--- a/packages/shared/src/UI/components/MaskPluginWrapper/index.tsx
+++ b/packages/shared/src/UI/components/MaskPluginWrapper/index.tsx
@@ -93,8 +93,10 @@ export function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
         const publisherNode = (
             <Typography
                 variant="body1"
-                fontSize={14}
-                fontWeight="700"
+                sx={{
+                    fontSize: 14,
+                    fontWeight: '700',
+                }}
                 component="div"
                 color={MaskColorVar.textPluginColor}>
                 {publisher}
@@ -131,10 +133,12 @@ export function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
                     <Icons.MaskBlue size={24} style={{ filter: 'drop-shadow(0px 6px 12px rgba(28, 104, 243, 0.2))' }} />
                 )}
                 <Typography
-                    sx={{ marginLeft: 0.5 }}
                     variant="body1"
-                    fontSize={16}
-                    fontWeight={700}
+                    sx={{
+                        fontSize: 16,
+                        fontWeight: 700,
+                        marginLeft: 0.5,
+                    }}
                     component="div"
                     color={MaskColorVar.textPluginColor}>
                     {wrapperProps?.title ?? title ?? <Trans>Default</Trans>}
@@ -143,7 +147,10 @@ export function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
             </div>
             {action ?
                 <>
-                    <Typography component="div" variant="body1" color="#FF3545" sx={{ padding: 1 }} textAlign="center">
+                    <Typography
+                        component="div"
+                        variant="body1"
+                        sx={{ color: '#FF3545', padding: 1, textAlign: 'center' }}>
                         {content}
                     </Typography>
                     <div className={classes.action}>{action}</div>
diff --git a/packages/shared/src/UI/components/NetworkTab/index.tsx b/packages/shared/src/UI/components/NetworkTab/index.tsx
index 4e7b9ea14b82..e6124aba3c98 100644
--- a/packages/shared/src/UI/components/NetworkTab/index.tsx
+++ b/packages/shared/src/UI/components/NetworkTab/index.tsx
@@ -71,12 +71,20 @@ export const NetworkTab = memo(function NetworkTab({
                             key={x.chainId}
                             value={x.chainId.toString()}
                             label={
-                                <Stack display="inline-flex" flexDirection="row" alignItems="center" gap={0.5}>
+                                <Stack
+                                    sx={{
+                                        display: 'inline-flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        gap: 0.5,
+                                    }}>
                                     <WalletIcon mainIcon={x.icon} size={18} />
                                     <Typography
                                         variant="body2"
-                                        fontSize={14}
-                                        fontWeight={tab === x.chainId.toString() ? 700 : 400}>
+                                        sx={{
+                                            fontSize: 14,
+                                            fontWeight: tab === x.chainId.toString() ? 700 : 400,
+                                        }}>
                                         {x.shortName ?? x.name}
                                     </Typography>
                                 </Stack>
diff --git a/packages/shared/src/UI/components/PersonaAction/PersonaAction.tsx b/packages/shared/src/UI/components/PersonaAction/PersonaAction.tsx
index 758c1f890527..a4bdc9039e6c 100644
--- a/packages/shared/src/UI/components/PersonaAction/PersonaAction.tsx
+++ b/packages/shared/src/UI/components/PersonaAction/PersonaAction.tsx
@@ -43,7 +43,7 @@ export function PersonaAction(props: PersonaActionProps) {
 
     return (
         <div className={classes.bottomFixed}>
-            <Box display="flex">
+            <Box sx={{ display: 'flex' }}>
                 <PlatformAvatar networkIcon={avatar} size={36} />
                 <div style={{ marginLeft: '4px' }}>
                     <Typography style={{ fontSize: '14px', fontWeight: '700', display: 'flex' }}>
diff --git a/packages/shared/src/UI/components/PersonaSelectPanel/PersonaItemUI.tsx b/packages/shared/src/UI/components/PersonaSelectPanel/PersonaItemUI.tsx
index 8b1f492d2719..1c61105adfeb 100644
--- a/packages/shared/src/UI/components/PersonaSelectPanel/PersonaItemUI.tsx
+++ b/packages/shared/src/UI/components/PersonaSelectPanel/PersonaItemUI.tsx
@@ -58,8 +58,8 @@ export function PersonaItemUI(props: PersonaItemProps) {
     const { classes } = useStyles(undefined, { props })
 
     return (
-        <Stack direction="row" alignItems="center" gap={1} onClick={onClick}>
-            <Box flexGrow={0} position="relative">
+        <Stack direction="row" onClick={onClick} sx={{ alignItems: 'center', gap: 1 }}>
+            <Box sx={{ flexGrow: 0, position: 'relative' }}>
                 {data.avatar ?
                     <Avatar
                         src={data.avatar}
@@ -73,16 +73,19 @@ export function PersonaItemUI(props: PersonaItemProps) {
                 :   <EmojiAvatar value={data.persona.identifier.publicKeyAsHex} />}
                 {isSamePersona(currentPersonaIdentifier, data.persona) && <Box className={classes.indicator} />}
             </Box>
-            <Stack flexGrow={1}>
+            <Stack sx={{ flexGrow: 1 }}>
                 <Typography className={classes.nickname}>{data.persona.nickname}</Typography>
                 <Typography className={classes.fingerprint}>
-                    <Stack component="span" display="inline-flex" direction="row" alignItems="center" gap={0.25}>
+                    <Stack
+                        component="span"
+                        direction="row"
+                        sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.25 }}>
                         {formatPersonaFingerprint(data.persona.identifier.rawPublicKey, 4)}
                         <CopyButton size={14} text={data.persona.identifier.rawPublicKey} />
                     </Stack>
                 </Typography>
             </Stack>
-            <Stack flexGrow={0}>
+            <Stack sx={{ flexGrow: 0 }}>
                 {isSamePersona(currentPersona?.persona, data.persona) ?
                     <Icons.CheckCircle size={20} className={classes.checked} />
                 :   <Icons.RadioNo size={20} className={classes.unchecked} />}
diff --git a/packages/shared/src/UI/components/PersonaSelectPanel/index.tsx b/packages/shared/src/UI/components/PersonaSelectPanel/index.tsx
index 7b3e77ecc921..b3399b6fec56 100644
--- a/packages/shared/src/UI/components/PersonaSelectPanel/index.tsx
+++ b/packages/shared/src/UI/components/PersonaSelectPanel/index.tsx
@@ -169,23 +169,23 @@ export const PersonaSelectPanel = memo<PersonaSelectPanelProps>(function Persona
 
     if (isPending)
         return (
-            <Stack height="100%" justifyContent="center">
+            <Stack sx={{ height: '100%', justifyContent: 'center' }}>
                 <LoadingStatus iconSize={24} />
             </Stack>
         )
 
     if (error)
         return (
-            <Stack height="100%" justifyContent="center">
+            <Stack sx={{ height: '100%', justifyContent: 'center' }}>
                 <ReloadStatus className={classes.reloadStatus} onRetry={refetch} />
             </Stack>
         )
 
-    if (!personas.length) return <Stack height="100%" justifyContent="space-between" />
+    if (!personas.length) return <Stack sx={{ height: '100%', justifyContent: 'space-between' }} />
 
     return (
-        <Stack height="100%" justifyContent="space-between">
-            <Stack gap={1.5} className={classes.items}>
+        <Stack sx={{ height: '100%', justifyContent: 'space-between' }}>
+            <Stack className={classes.items} sx={{ gap: 1.5 }}>
                 {personas.map((x) => {
                     return (
                         <PersonaItemUI
@@ -215,13 +215,14 @@ function ActionContent(props: ActionContentProps) {
     const { classes } = useStyles(undefined, { props })
     if (!buttonText) return null
     return (
-        <Stack gap={1.5} mt={1.5}>
+        <Stack sx={{ gap: 1.5, mt: 1.5 }}>
             {hint ?
-                <Typography color={(t) => t.palette.maskColor.main} fontSize={14} lineHeight="18px" height={36}>
+                <Typography
+                    sx={{ color: (t) => t.palette.maskColor.main, fontSize: 14, lineHeight: '18px', height: 36 }}>
                     {hint}
                 </Typography>
             :   null}
-            <Stack direction="row" justifyContent="center">
+            <Stack direction="row" sx={{ justifyContent: 'center' }}>
                 <Button color="primary" className={classes.button} onClick={onClick}>
                     <Icons.Identity size={18} />
                     {buttonText}
diff --git a/packages/shared/src/UI/components/PersonaWallet/index.tsx b/packages/shared/src/UI/components/PersonaWallet/index.tsx
index e4d7fc986b47..ea202f4b951c 100644
--- a/packages/shared/src/UI/components/PersonaWallet/index.tsx
+++ b/packages/shared/src/UI/components/PersonaWallet/index.tsx
@@ -42,7 +42,7 @@ export function ManageWallet({ manageWallets, persona, name, address }: ManageWa
             <Box>
                 <Icons.Masks />
             </Box>
-            <Stack justifyContent="center">
+            <Stack sx={{ justifyContent: 'center' }}>
                 <Typography variant="body1" className={classes.nickname}>
                     {persona?.nickname || name}
                 </Typography>
diff --git a/packages/shared/src/UI/components/PhoneNumberField/index.tsx b/packages/shared/src/UI/components/PhoneNumberField/index.tsx
index e12d2b220483..fd39e453cd8e 100644
--- a/packages/shared/src/UI/components/PhoneNumberField/index.tsx
+++ b/packages/shared/src/UI/components/PhoneNumberField/index.tsx
@@ -2,12 +2,12 @@ import { useLingui } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { COUNTRIES } from '@masknet/shared-base-ui'
 import { makeStyles } from '@masknet/theme'
-import { Button, TextField, Typography, type FilledTextFieldProps } from '@mui/material'
+import { Button, TextField, Typography, type FilledTextFieldProps, type InputBaseProps } from '@mui/material'
 import { useMemo, useState } from 'react'
 import { getCountryFlag } from '../../../index.js'
 import { CountryCodePicker } from '../CountryCodePicker/index.js'
 
-const useStyles = makeStyles()((theme) => ({
+const useStyles = makeStyles()(() => ({
     button: {
         padding: 0,
     },
@@ -16,6 +16,7 @@ const useStyles = makeStyles()((theme) => ({
 export interface PhoneNumberFieldProps extends Omit<FilledTextFieldProps, 'variant'> {
     code: string
     onCodeChange: (code: string) => void
+    InputProps?: Partial<InputBaseProps>
 }
 
 export function PhoneNumberField({ code, onCodeChange, ...rest }: PhoneNumberFieldProps) {
@@ -36,21 +37,23 @@ export function PhoneNumberField({ code, onCodeChange, ...rest }: PhoneNumberFie
                 placeholder={t`Phone Number`}
                 type="tel"
                 {...rest}
-                InputProps={{
-                    ...rest.InputProps,
-                    disableUnderline: true,
-                    startAdornment: (
-                        <Button
-                            className={classes.button}
-                            variant="text"
-                            onClick={(event) => setAnchorEl(event.currentTarget)}>
-                            <img src={countryIcon} style={{ width: 16, height: 12 }} />
-                            <Typography component="span" sx={{ minWidth: 32, mx: 0.5, textAlign: 'right' }}>
-                                +{code}
-                            </Typography>
-                            <Icons.ArrowDrop size={16} />
-                        </Button>
-                    ),
+                slotProps={{
+                    input: {
+                        ...rest.InputProps,
+                        disableUnderline: true,
+                        startAdornment: (
+                            <Button
+                                className={classes.button}
+                                variant="text"
+                                onClick={(event) => setAnchorEl(event.currentTarget)}>
+                                <img src={countryIcon} style={{ width: 16, height: 12 }} />
+                                <Typography component="span" sx={{ minWidth: 32, mx: 0.5, textAlign: 'right' }}>
+                                    +{code}
+                                </Typography>
+                                <Icons.ArrowDrop size={16} />
+                            </Button>
+                        ),
+                    },
                 }}
             />
 
diff --git a/packages/shared/src/UI/components/PluginCardFrame/index.tsx b/packages/shared/src/UI/components/PluginCardFrame/index.tsx
index e90593288b36..0aef4df30bb5 100644
--- a/packages/shared/src/UI/components/PluginCardFrame/index.tsx
+++ b/packages/shared/src/UI/components/PluginCardFrame/index.tsx
@@ -52,7 +52,7 @@ export function PluginCardFrameMini({ icon, title, provider, providerLink, child
     const PluginName = (
         <Stack className={classes.title} direction="row">
             {icon ?? <Icons.Web3Profile className={classes.web3Icon} />}
-            <Typography fontSize={16} fontWeight={700} color={theme.palette.maskColor.main}>
+            <Typography sx={{ fontSize: 16, fontWeight: 700 }} color={theme.palette.maskColor.main}>
                 {title ?? <Trans>Web3 Profile</Trans>}
             </Typography>
         </Stack>
@@ -60,9 +60,9 @@ export function PluginCardFrameMini({ icon, title, provider, providerLink, child
 
     return (
         <Stack className={classes.container}>
-            <Stack direction="row" justifyContent="space-between" p={1.5}>
+            <Stack direction="row" sx={{ justifyContent: 'space-between', p: 1.5 }}>
                 {PluginName}
-                <Stack direction="row" gap={0.5}>
+                <Stack direction="row" sx={{ gap: 0.5 }}>
                     <Trans>
                         <Typography className={classes.item1}>Powered by </Typography>
                         <Typography className={classes.item2}>{provider ?? 'Mask Network'}</Typography>
@@ -73,14 +73,17 @@ export function PluginCardFrameMini({ icon, title, provider, providerLink, child
                         rel="noopener noreferrer"
                         color="textPrimary"
                         href={providerLink ?? 'https://mask.io/'}
-                        width="22px"
-                        height="22px"
-                        style={{ alignSelf: 'center', marginLeft: '4px' }}>
+                        sx={{
+                            width: '22px',
+                            height: '22px',
+                            alignSelf: 'center',
+                            marginLeft: '4px',
+                        }}>
                         <Icons.LinkOut size={16} className={classes.linkOutIcon} />
                     </Link>
                 </Stack>
             </Stack>
-            <Stack flex={1} justifyContent="center" alignItems="center" p={1.5}>
+            <Stack sx={{ flex: 1, justifyContent: 'center', alignItems: 'center', p: 1.5 }}>
                 {children ?? (
                     <LoadingStatus iconSize={24} color={theme.palette.maskColor.main}>
                         <Trans>Loading....</Trans>
diff --git a/packages/shared/src/UI/components/PluginEnableBoundary/index.tsx b/packages/shared/src/UI/components/PluginEnableBoundary/index.tsx
index 885b4b3c7fc6..426d4b529189 100644
--- a/packages/shared/src/UI/components/PluginEnableBoundary/index.tsx
+++ b/packages/shared/src/UI/components/PluginEnableBoundary/index.tsx
@@ -33,9 +33,9 @@ export const PluginEnableBoundary = memo<PluginEnableBoundaryProps>((props) => {
 
     if (disabled) {
         return (
-            <Stack alignItems="center">
-                <Stack justifyContent="center" alignItems="center" width="100%" boxSizing="border-box">
-                    <Typography fontWeight={400} fontSize={14}>
+            <Stack sx={{ alignItems: 'center' }}>
+                <Stack sx={{ justifyContent: 'center', alignItems: 'center', width: '100%', boxSizing: 'border-box' }}>
+                    <Typography sx={{ fontWeight: 400, fontSize: 14 }}>
                         <Trans>
                             This function has been turned off in the App settings. Enable plugins to fully access.
                         </Trans>
diff --git a/packages/shared/src/UI/components/PluginGuide/index.tsx b/packages/shared/src/UI/components/PluginGuide/index.tsx
index 5aec121bb73c..fb93e2defdd8 100644
--- a/packages/shared/src/UI/components/PluginGuide/index.tsx
+++ b/packages/shared/src/UI/components/PluginGuide/index.tsx
@@ -191,9 +191,7 @@ export function PluginGuide({
                                             </div>
                                         )}
                                         <div>
-                                            <Typography fontSize={14} fontWeight={600}>
-                                                {title}
-                                            </Typography>
+                                            <Typography sx={{ fontSize: 14, fontWeight: 600 }}>{title}</Typography>
                                         </div>
                                         <div className={classes.buttonContainer}>
                                             <Button color="primary" className={classes.button} onClick={onNext}>
diff --git a/packages/shared/src/UI/components/PriceChartRange/index.tsx b/packages/shared/src/UI/components/PriceChartRange/index.tsx
index 35e119f31700..659aaf091059 100644
--- a/packages/shared/src/UI/components/PriceChartRange/index.tsx
+++ b/packages/shared/src/UI/components/PriceChartRange/index.tsx
@@ -51,7 +51,11 @@ export function PriceChartRange({
 }: PriceChartDaysControlProps) {
     const { classes, cx } = useStyles({ columns: rangeOptions.length })
     return (
-        <Box className={cx(classes.container, rest.className)} direction="row" gap={2} {...rest}>
+        <Box
+            className={cx(classes.container, rest.className)}
+            direction="row"
+            {...rest}
+            sx={[{ gap: 2 }, ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx])]}>
             {rangeOptions.map((daysOption) => (
                 <Link
                     className={cx(classes.link, days === daysOption ? classes.active : '')}
diff --git a/packages/shared/src/UI/components/ProfileTabContent/WalletSettingsEntry.tsx b/packages/shared/src/UI/components/ProfileTabContent/WalletSettingsEntry.tsx
index ab1eb7e218a6..d87ccf5d2ceb 100644
--- a/packages/shared/src/UI/components/ProfileTabContent/WalletSettingsEntry.tsx
+++ b/packages/shared/src/UI/components/ProfileTabContent/WalletSettingsEntry.tsx
@@ -25,12 +25,12 @@ export const WalletSettingsEntry = memo(function WalletSettingsEntry() {
 
     return (
         <>
-            <Stack flex={1}>
-                <Typography fontWeight={400} fontSize={14} color={theme.palette.maskColor.second}>
+            <Stack sx={{ flex: 1 }}>
+                <Typography sx={{ fontWeight: 400, fontSize: 14 }} color={theme.palette.maskColor.second}>
                     <Trans>Please select the wallet to activate the function after saving the settings.</Trans>
                 </Typography>
             </Stack>
-            <Stack direction="row" justifyContent="center">
+            <Stack direction="row" sx={{ justifyContent: 'center' }}>
                 <Button className={classes.button} onClick={openWeb3ProfileSettingDialog}>
                     <Icons.Settings size={18} />
                     <Trans>Go to Settings</Trans>
diff --git a/packages/shared/src/UI/components/ProvidedBy/index.tsx b/packages/shared/src/UI/components/ProvidedBy/index.tsx
index fac8526e70a6..4ad00f9caee3 100644
--- a/packages/shared/src/UI/components/ProvidedBy/index.tsx
+++ b/packages/shared/src/UI/components/ProvidedBy/index.tsx
@@ -9,13 +9,13 @@ export interface ProvidedByProps {
 
 export const ProvidedBy = memo<ProvidedByProps>(({ providerLink, providerName }) => {
     return (
-        <Stack direction="row" display="inline-flex" gap={0.25} alignItems="center">
-            <Typography variant="h6" fontSize="14px" fontWeight="400" color={(t) => t.palette.text.secondary}>
+        <Stack direction="row" sx={{ display: 'inline-flex', gap: 0.25, alignItems: 'center' }}>
+            <Typography
+                variant="h6"
+                sx={{ fontSize: '14px', fontWeight: '400', color: (t) => t.palette.text.secondary }}>
                 Provided by
             </Typography>
-            <Typography fontSize={14} fontWeight={500}>
-                {providerName}
-            </Typography>
+            <Typography sx={{ fontSize: 14, fontWeight: 500 }}>{providerName}</Typography>
             {providerLink ?
                 <Link
                     href={providerLink}
diff --git a/packages/shared/src/UI/components/ReloadStatus/index.tsx b/packages/shared/src/UI/components/ReloadStatus/index.tsx
index 3717ddcb7782..362ece7d939e 100644
--- a/packages/shared/src/UI/components/ReloadStatus/index.tsx
+++ b/packages/shared/src/UI/components/ReloadStatus/index.tsx
@@ -44,7 +44,10 @@ export const ReloadStatus = memo(function ReloadStatus({
 }: Props) {
     const { classes, cx } = useStyles()
     return (
-        <Box className={cx(classes.statusBox, className)} p={2} {...rest}>
+        <Box
+            className={cx(classes.statusBox, className)}
+            {...rest}
+            sx={[{ p: 2 }, ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx])]}>
             {hideMessage ?
                 <Typography className={classes.text}>{message ?? <Trans>Load failed</Trans>}</Typography>
             :   null}
diff --git a/packages/shared/src/UI/components/ReversedAddress/index.tsx b/packages/shared/src/UI/components/ReversedAddress/index.tsx
index f025736ba5db..6a4136f00a61 100644
--- a/packages/shared/src/UI/components/ReversedAddress/index.tsx
+++ b/packages/shared/src/UI/components/ReversedAddress/index.tsx
@@ -22,7 +22,7 @@ export const ReversedAddress = memo<ReverseAddressProps>(({ address, pluginID, s
     const uiLabel = showDomain ? Utils.formatDomainName(domain) : (Utils.formatAddress(address, size) ?? address)
     const hasEllipsis = showDomain ? uiLabel !== domain : !isSameAddress(uiLabel, address)
     const node = (
-        <Typography fontWeight={700} {...rest}>
+        <Typography {...rest} sx={[{ fontWeight: 700 }, ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx])]}>
             {uiLabel}
         </Typography>
     )
@@ -36,7 +36,7 @@ export const ReversedAddress = memo<ReverseAddressProps>(({ address, pluginID, s
     return hasEllipsis ?
             <ShadowRootTooltip
                 title={showDomain ? domain : address}
-                PopperProps={{ ...popperProps, style: { whiteSpace: 'break-spaces' } }}>
+                slotProps={{ popper: { ...popperProps, style: { whiteSpace: 'break-spaces' } } }}>
                 {node}
             </ShadowRootTooltip>
         :   node
diff --git a/packages/shared/src/UI/components/SelectGasSettingsToolbar/index.tsx b/packages/shared/src/UI/components/SelectGasSettingsToolbar/index.tsx
index 43a849f330b0..dcaa5d05d75b 100644
--- a/packages/shared/src/UI/components/SelectGasSettingsToolbar/index.tsx
+++ b/packages/shared/src/UI/components/SelectGasSettingsToolbar/index.tsx
@@ -240,12 +240,19 @@ export function SelectGasSettingsToolbarUI({
                 horizontal: 'right',
                 ...MenuProps?.transformOrigin,
             },
-            PaperProps: {
-                ...MenuProps?.PaperProps,
-                style: {
-                    background: theme.palette.maskColor.bottom,
-                    transform: 'translateY(8px)',
-                    ...MenuProps?.PaperProps?.style,
+            slotProps: {
+                ...MenuProps?.slotProps,
+                paper: (ownerState) => {
+                    const paper = MenuProps?.slotProps?.paper
+                    const existing = typeof paper === 'function' ? paper(ownerState) : paper
+                    return {
+                        ...existing,
+                        style: {
+                            ...existing?.style,
+                            background: theme.palette.maskColor.bottom,
+                            transform: 'translateY(8px)',
+                        },
+                    }
                 },
             },
         },
diff --git a/packages/shared/src/UI/components/SettingsBoard/GasForm.tsx b/packages/shared/src/UI/components/SettingsBoard/GasForm.tsx
index d3803dbd0f44..35f2197ad1ff 100644
--- a/packages/shared/src/UI/components/SettingsBoard/GasForm.tsx
+++ b/packages/shared/src/UI/components/SettingsBoard/GasForm.tsx
@@ -170,7 +170,7 @@ export function GasForm(props: GasFormProps) {
                     classes={{
                         icon: classes.alertIcon,
                         message: classes.alertMessage,
-                        standardSuccess: classes.alertStandardSuccess,
+                        colorSuccess: classes.alertStandardSuccess,
                     }}
                     icon={<Icons.Info />}>
                     <Trans>Current base fee is {formatCurrency(formatWeiToGwei(baseFeePerGas), '')} Gwei</Trans>
@@ -178,7 +178,7 @@ export function GasForm(props: GasFormProps) {
             :   null}
             <Grid container direction="row" spacing={2}>
                 {isEIP1559 ? null : (
-                    <Grid item xs={6}>
+                    <Grid size={6}>
                         <Controller
                             render={({ field }) => (
                                 <MaskTextField
@@ -213,7 +213,7 @@ export function GasForm(props: GasFormProps) {
                         />
                     </Grid>
                 )}
-                <Grid item xs={isEIP1559 ? 12 : 6}>
+                <Grid size={isEIP1559 ? 12 : 6}>
                     <Controller
                         render={({ field }) => (
                             <MaskTextField
@@ -246,7 +246,7 @@ export function GasForm(props: GasFormProps) {
             </Grid>
             {isEIP1559 ?
                 <Grid container direction="row" spacing={2}>
-                    <Grid item xs={6}>
+                    <Grid size={6}>
                         <Controller
                             render={({ field }) => (
                                 <MaskTextField
@@ -284,7 +284,7 @@ export function GasForm(props: GasFormProps) {
                             name="maxPriorityFeePerGas"
                         />
                     </Grid>
-                    <Grid item xs={6}>
+                    <Grid size={6}>
                         <Controller
                             render={({ field }) => (
                                 <MaskTextField
diff --git a/packages/shared/src/UI/components/SettingsBoard/Section.tsx b/packages/shared/src/UI/components/SettingsBoard/Section.tsx
index a8a7bd7991a0..3b1d701998c7 100644
--- a/packages/shared/src/UI/components/SettingsBoard/Section.tsx
+++ b/packages/shared/src/UI/components/SettingsBoard/Section.tsx
@@ -23,7 +23,7 @@ export function Section(props: SectionProps) {
 
     return (
         <div className={classes.root}>
-            <Box display="flex" alignItems="center" justifyContent="space-between">
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                 <Typography className={classes.title}>{title}</Typography>
                 {additions ?? <div />}
             </Box>
diff --git a/packages/shared/src/UI/components/SocialAccountList/SocialTooltip.tsx b/packages/shared/src/UI/components/SocialAccountList/SocialTooltip.tsx
index c9e65f449731..9ad8c987f505 100644
--- a/packages/shared/src/UI/components/SocialAccountList/SocialTooltip.tsx
+++ b/packages/shared/src/UI/components/SocialAccountList/SocialTooltip.tsx
@@ -23,7 +23,7 @@ export function SocialTooltip<T extends object>({ children, platform }: SocialTo
     const ref = useRef<HTMLElement>(null)
     const title =
         platform ?
-            <Typography className={classes.title} fontSize={14}>
+            <Typography className={classes.title} sx={{ fontSize: 14 }}>
                 <Trans>Data source is retrieved from {resolveNextIDPlatformName(platform) || platform}.</Trans>
             </Typography>
         :   null
@@ -50,7 +50,7 @@ export function SocialTooltip<T extends object>({ children, platform }: SocialTo
 
     return (
         <ShadowRootTooltip
-            PopperProps={{ sx: { display: inView ? 'block' : 'none' } }}
+            slotProps={{ popper: { sx: { display: inView ? 'block' : 'none' } } }}
             disableInteractive
             arrow
             placement="top"
diff --git a/packages/shared/src/UI/components/SocialAccountList/index.tsx b/packages/shared/src/UI/components/SocialAccountList/index.tsx
index 5b6ad456e80a..2df478625957 100644
--- a/packages/shared/src/UI/components/SocialAccountList/index.tsx
+++ b/packages/shared/src/UI/components/SocialAccountList/index.tsx
@@ -137,15 +137,15 @@ export const SocialAccountList = memo(function SocialAccountList({
             },
             anchorPosition,
             anchorReference,
-            PaperProps: {
-                className: classes.menuPaper,
-            },
-            MenuListProps: {
-                className: classes.menuList,
-                // Remove space for scrollbar
-                style: {
-                    paddingRight: 0,
-                    width: '100%',
+            slotProps: {
+                paper: { className: classes.menuPaper },
+                list: {
+                    className: classes.menuList,
+                    // Remove space for scrollbar
+                    style: {
+                        paddingRight: 0,
+                        width: '100%',
+                    },
                 },
             },
         },
diff --git a/packages/shared/src/UI/components/SourceProviderSwitcher/index.tsx b/packages/shared/src/UI/components/SourceProviderSwitcher/index.tsx
index 471e763d29b4..4868765b0a74 100644
--- a/packages/shared/src/UI/components/SourceProviderSwitcher/index.tsx
+++ b/packages/shared/src/UI/components/SourceProviderSwitcher/index.tsx
@@ -32,15 +32,17 @@ export function SourceProviderSwitcher({ sources, onSelect, selected }: SourcePr
     }
 
     return (
-        <Stack justifyContent="flex-start" direction="row" gap={1}>
+        <Stack direction="row" sx={{ justifyContent: 'flex-start', gap: 1 }}>
             {_sources.map((x) => {
                 return (
                     <Stack
                         key={x}
-                        display="inline-stack"
-                        sx={{ cursor: 'pointer' }}
                         onClick={() => handleClick(x)}
-                        position="relative">
+                        sx={{
+                            display: 'inline-stack',
+                            position: 'relative',
+                            cursor: 'pointer',
+                        }}>
                         <SourceProviderIcon size={24} provider={x} />
                         {selected === x && (
                             <Stack className={classes.selected}>
diff --git a/packages/shared/src/UI/components/SourceSwitcher/index.tsx b/packages/shared/src/UI/components/SourceSwitcher/index.tsx
index 5867dd3eed0e..69bb85bcbb56 100644
--- a/packages/shared/src/UI/components/SourceSwitcher/index.tsx
+++ b/packages/shared/src/UI/components/SourceSwitcher/index.tsx
@@ -37,14 +37,17 @@ export function SourceSwitcher(props: SourceSwitcherProps) {
         <Box className={classes.source}>
             <Stack
                 className={classes.sourceMenu}
-                display="inline-flex"
-                flexDirection="row"
-                alignItems="center"
-                gap={0.5}>
+                sx={{
+                    display: 'inline-flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 0.5,
+                }}>
                 <FootnoteMenu
                     options={uniqBy(resultList, (x) => x.source).map((x) => ({
                         name: (
-                            <Stack display="inline-flex" flexDirection="row" alignItems="center" gap={0.5}>
+                            <Stack
+                                sx={{ display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: 0.5 }}>
                                 <Typography className={classes.sourceName}>
                                     {resolveSourceTypeName(x.source)}
                                 </Typography>
diff --git a/packages/shared/src/UI/components/TokenAmountPanel/index.tsx b/packages/shared/src/UI/components/TokenAmountPanel/index.tsx
index bf35d8550faa..a37f0b5deebe 100644
--- a/packages/shared/src/UI/components/TokenAmountPanel/index.tsx
+++ b/packages/shared/src/UI/components/TokenAmountPanel/index.tsx
@@ -206,10 +206,10 @@ export function TokenAmountPanel(props: TokenAmountPanelProps) {
                         </Box>,
                 ...props.InputProps,
             }}
-            InputLabelProps={{
-                shrink: true,
-                classes: {
-                    shrink: classes.inputShrinkLabel,
+            slotProps={{
+                inputLabel: {
+                    shrink: true,
+                    classes: { shrink: classes.inputShrinkLabel },
                 },
             }}
             {...props.TextFieldProps}
diff --git a/packages/shared/src/UI/components/TokenMenuList/index.tsx b/packages/shared/src/UI/components/TokenMenuList/index.tsx
index 7c3d8f2f6912..a24af0bd15d0 100644
--- a/packages/shared/src/UI/components/TokenMenuList/index.tsx
+++ b/packages/shared/src/UI/components/TokenMenuList/index.tsx
@@ -73,11 +73,13 @@ export function TokenMenuList({ options, currentOption, onSelect, fromSocialCard
 
                         <Stack className={classes.itemText}>
                             <Typography
-                                fontSize={14}
-                                fontWeight={700}
-                                flexGrow={1}
-                                overflow="hidden"
-                                textOverflow="ellipsis">
+                                sx={{
+                                    fontSize: 14,
+                                    fontWeight: 700,
+                                    flexGrow: 1,
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                }}>
                                 <span className={classes.name}>{x.name}</span>
                                 {x.symbol ?
                                     <span className={classes.symbol}>({x.symbol})</span>
@@ -86,12 +88,14 @@ export function TokenMenuList({ options, currentOption, onSelect, fromSocialCard
                             <div className={classes.itemCheckout}>
                                 {x.rank ?
                                     <Typography
-                                        fontSize={14}
-                                        fontWeight={700}
-                                        flexGrow={1}
-                                        overflow="hidden"
-                                        className={classes.rank}
-                                        textOverflow="ellipsis">
+                                        sx={{
+                                            fontSize: 14,
+                                            fontWeight: 700,
+                                            flexGrow: 1,
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                        }}
+                                        className={classes.rank}>
                                         #{x.rank}
                                     </Typography>
                                 :   null}
diff --git a/packages/shared/src/UI/components/TokenSecurity/index.tsx b/packages/shared/src/UI/components/TokenSecurity/index.tsx
index 5e7a808d4d92..3fca2aa01449 100644
--- a/packages/shared/src/UI/components/TokenSecurity/index.tsx
+++ b/packages/shared/src/UI/components/TokenSecurity/index.tsx
@@ -23,19 +23,23 @@ export const TokenSecurityBar = memo<TokenCardProps>(({ tokenSecurity }) => {
     }
 
     return (
-        <Stack direction="row" alignItems="center" spacing={1.5}>
+        <Stack direction="row" sx={{ alignItems: 'center' }} spacing={1.5}>
             {riskyFactors !== 0 && (
                 <Stack
                     direction="row"
-                    alignItems="center"
-                    borderRadius="4px"
-                    padding="4px 8px"
-                    bgcolor={DefineMapping[SecurityMessageLevel.High].bgColor}
-                    spacing={0.5}>
+                    spacing={0.5}
+                    sx={{
+                        alignItems: 'center',
+                        borderRadius: '4px',
+                        padding: '4px 8px',
+                        bgcolor: DefineMapping[SecurityMessageLevel.High].bgColor,
+                    }}>
                     {DefineMapping[SecurityMessageLevel.High].icon(14)}
                     <Typography
                         component="span"
-                        fontSize="12px"
+                        sx={{
+                            fontSize: '12px',
+                        }}
                         color={DefineMapping[SecurityMessageLevel.High].titleColor}>
                         <Plural one="# Risky item" other="# Risky items" value={riskyFactors} />
                     </Typography>
@@ -44,15 +48,19 @@ export const TokenSecurityBar = memo<TokenCardProps>(({ tokenSecurity }) => {
             {attentionFactors !== 0 && (
                 <Stack
                     direction="row"
-                    alignItems="center"
-                    borderRadius="4px"
-                    padding="4px 8px"
-                    bgcolor={DefineMapping[SecurityMessageLevel.Medium].bgColor}
+                    sx={{
+                        alignItems: 'center',
+                        borderRadius: '4px',
+                        padding: '4px 8px',
+                        bgcolor: DefineMapping[SecurityMessageLevel.Medium].bgColor,
+                    }}
                     spacing={0.5}>
                     {DefineMapping[SecurityMessageLevel.Medium].icon(14)}
                     <Typography
                         component="span"
-                        fontSize="12px"
+                        sx={{
+                            fontSize: '12px',
+                        }}
                         color={DefineMapping[SecurityMessageLevel.Medium].titleColor}>
                         <Plural one="# Attention item" other="# Attention items" value={attentionFactors} />
                     </Typography>
@@ -61,14 +69,16 @@ export const TokenSecurityBar = memo<TokenCardProps>(({ tokenSecurity }) => {
             {(attentionFactors !== 0 || riskyFactors !== 0) && (
                 <Stack
                     direction="row"
-                    alignItems="center"
-                    borderRadius="4px"
-                    padding="4px 8px"
-                    bgcolor="rgba(28, 104, 243, 0.1)"
-                    sx={{ cursor: 'pointer' }}
+                    sx={{
+                        alignItems: 'center',
+                        borderRadius: '4px',
+                        padding: '4px 8px',
+                        bgcolor: 'rgba(28, 104, 243, 0.1)',
+                        cursor: 'pointer',
+                    }}
                     onClick={handleOpenDialog}
                     spacing={0.5}>
-                    <Typography component="span" fontSize="12px" color="#1C68F3">
+                    <Typography component="span" sx={{ fontSize: '12px', color: '#1C68F3' }}>
                         <Trans>More</Trans>
                     </Typography>
                     <Icons.RightArrow size={14} color="#1C68F3" />
diff --git a/packages/shared/src/UI/components/TokenTransactionConfirmModal/index.tsx b/packages/shared/src/UI/components/TokenTransactionConfirmModal/index.tsx
index 83e1f5a313a8..7e0ed7cd1e86 100644
--- a/packages/shared/src/UI/components/TokenTransactionConfirmModal/index.tsx
+++ b/packages/shared/src/UI/components/TokenTransactionConfirmModal/index.tsx
@@ -77,9 +77,9 @@ export function TokenTransactionConfirmModal({
             classes={{
                 paper: classes.confirmDialog,
             }}
-            BackdropProps={{
-                style: {
-                    opacity: 0,
+            slotProps={{
+                backdrop: {
+                    style: { opacity: 0 },
                 },
             }}
             titleBarIconStyle="close"
@@ -99,10 +99,10 @@ export function TokenTransactionConfirmModal({
                             size={90}
                         />
                     :   <Icons.FillSuccess className={classes.icon} size={90} />}
-                    <Typography className={classes.congratulation} mt="19.5px">
+                    <Typography className={classes.congratulation} sx={{ mt: '19.5px' }}>
                         <Trans>Congratulations!</Trans>
                     </Typography>
-                    <Typography className={classes.messageText} mt="41px">
+                    <Typography className={classes.messageText} sx={{ mt: '41px' }}>
                         {messageTextForFT}
                     </Typography>
                 </Box>
diff --git a/packages/shared/src/UI/components/TokenValue/index.tsx b/packages/shared/src/UI/components/TokenValue/index.tsx
index 19f1df6efc01..5416d4ed4b32 100644
--- a/packages/shared/src/UI/components/TokenValue/index.tsx
+++ b/packages/shared/src/UI/components/TokenValue/index.tsx
@@ -55,7 +55,10 @@ export function TokenValue({ className, token, amount, ...rest }: Props) {
     return amount && token ?
             <div className={cx(classes.container, className)} {...rest}>
                 <div className={classes.token}>
-                    <Typography className={classes.amount} component="strong" fontWeight="700" fontSize="24px">
+                    <Typography
+                        className={classes.amount}
+                        component="strong"
+                        sx={{ fontWeight: '700', fontSize: '24px' }}>
                         {amount}
                     </Typography>
                     <TokenIcon
diff --git a/packages/shared/src/UI/components/TokenWithSocialGroupMenu/index.tsx b/packages/shared/src/UI/components/TokenWithSocialGroupMenu/index.tsx
index 31d9043459ee..cdaf41f0bf2a 100644
--- a/packages/shared/src/UI/components/TokenWithSocialGroupMenu/index.tsx
+++ b/packages/shared/src/UI/components/TokenWithSocialGroupMenu/index.tsx
@@ -131,14 +131,14 @@ export const TokenWithSocialGroupMenu = memo(function TokenWithSocialGroupMenu({
         <Menu
             disablePortal={disablePortal}
             disableScrollLock={disableScrollLock}
-            PaperProps={{
-                className: classes.menuPaper,
-            }}
-            MenuListProps={{
-                className: classes.addressMenu,
-            }}
             onClose={onClose}
-            {...rest}>
+            {...rest}
+            slotProps={{
+                paper: { className: classes.menuPaper },
+                list: {
+                    className: classes.addressMenu,
+                },
+            }}>
             {groups.map(([type, groupOptions]) => (
                 <div key={type} className={classes.group}>
                     <Typography className={classes.groupName}>{menuGroupNameMap[type]}</Typography>
diff --git a/packages/shared/src/UI/components/Video/index.tsx b/packages/shared/src/UI/components/Video/index.tsx
index bc68c3f47a4b..8164993fce52 100644
--- a/packages/shared/src/UI/components/Video/index.tsx
+++ b/packages/shared/src/UI/components/Video/index.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react'
 import { useAsync } from 'react-use'
-import { Skeleton, type SkeletonProps } from '@mui/lab'
+import { Skeleton, type SkeletonProps } from '@mui/material'
 import { fetchBlob } from '@masknet/web3-providers/helpers'
 
 export interface VideoRef {
diff --git a/packages/shared/src/UI/components/WalletStatusBar/Action.tsx b/packages/shared/src/UI/components/WalletStatusBar/Action.tsx
index f80cb4402074..f12efc8818e9 100644
--- a/packages/shared/src/UI/components/WalletStatusBar/Action.tsx
+++ b/packages/shared/src/UI/components/WalletStatusBar/Action.tsx
@@ -11,7 +11,7 @@ export const Action = memo<ActionProps>(function Action({ children, openSelectWa
     const ref = useRef<HTMLDivElement>(undefined)
 
     return (
-        <Box display="flex" columnGap={16} minWidth={Sniffings.is_popup_page ? 176 : 276} ref={ref}>
+        <Box sx={{ display: 'flex', columnGap: 16, minWidth: Sniffings.is_popup_page ? 176 : 276 }} ref={ref}>
             {children ?? (
                 <Button fullWidth onClick={openSelectWalletDialog}>
                     <Trans>Change</Trans>
diff --git a/packages/shared/src/UI/components/WalletStatusBox/TransactionList.tsx b/packages/shared/src/UI/components/WalletStatusBox/TransactionList.tsx
index 347bd36a54da..6695b82a76df 100644
--- a/packages/shared/src/UI/components/WalletStatusBox/TransactionList.tsx
+++ b/packages/shared/src/UI/components/WalletStatusBox/TransactionList.tsx
@@ -121,9 +121,13 @@ function Transaction({ chainId, transaction: tx, onClear = noop, ...rest }: Tran
 
     return (
         <Grid container {...rest}>
-            <Grid item className={classes.cell} textAlign="left" md={4}>
-                <Stack overflow="hidden">
-                    <Typography className={classes.methodName} title={formatted || ''} variant="body1" fontWeight={500}>
+            <Grid className={classes.cell} size={{ md: 4 }} sx={{ textAlign: 'left' }}>
+                <Stack sx={{ overflow: 'hidden' }}>
+                    <Typography
+                        className={classes.methodName}
+                        title={formatted || ''}
+                        variant="body1"
+                        sx={{ fontWeight: 500 }}>
                         {formatted}
                     </Typography>
                     <Typography className={classes.timestamp} variant="body1" color={theme.palette.text.secondary}>
@@ -131,7 +135,7 @@ function Transaction({ chainId, transaction: tx, onClear = noop, ...rest }: Tran
                     </Typography>
                 </Stack>
             </Grid>
-            <Grid item className={classes.cell} flexGrow={1} md={4} justifyContent="right">
+            <Grid className={classes.cell} size={{ md: 4 }} sx={{ flexGrow: 1, justifyContent: 'right' }}>
                 <Typography variant="body1" className={classes.linkText}>
                     {address && isSameAddress(domainOrAddress, address) ?
                         Utils.formatAddress(address, 4)
@@ -145,14 +149,16 @@ function Transaction({ chainId, transaction: tx, onClear = noop, ...rest }: Tran
                     <Icons.LinkOut className={classes.linkIcon} />
                 </Link>
             </Grid>
-            <Grid item className={classes.cell} md={2} justifyContent="center">
-                <Typography fontWeight={400} justifyContent="center" color={statusTextColorMap[txStatus]} fontSize={14}>
+            <Grid className={classes.cell} size={{ md: 2 }} sx={{ justifyContent: 'center' }}>
+                <Typography
+                    sx={{ fontWeight: 400, justifyContent: 'center', fontSize: 14 }}
+                    color={statusTextColorMap[txStatus]}>
                     {statusTextMap[txStatus]}
                 </Typography>
             </Grid>
-            <Grid item className={classes.cell} md={2} justifyContent="right">
+            <Grid className={classes.cell} size={{ md: 2 }} sx={{ justifyContent: 'right' }}>
                 {txStatus === TransactionStatusType.NOT_DEPEND ?
-                    <Typography fontWeight={300} className={classes.clear} onClick={handleClear}>
+                    <Typography sx={{ fontWeight: 300 }} className={classes.clear} onClick={handleClear}>
                         <Trans>Clear</Trans>
                     </Typography>
                 :   null}
diff --git a/packages/shared/src/UI/components/WalletStatusBox/usePendingTransactions.tsx b/packages/shared/src/UI/components/WalletStatusBox/usePendingTransactions.tsx
index 9baed5b5ccfd..430cd2f6015a 100644
--- a/packages/shared/src/UI/components/WalletStatusBox/usePendingTransactions.tsx
+++ b/packages/shared/src/UI/components/WalletStatusBox/usePendingTransactions.tsx
@@ -49,13 +49,13 @@ export function usePendingTransactions() {
             <section className={classes.summaryWrapper}>
                 <div className={cx(pendingTransactions.length ? '' : classes.hide)}>
                     {pendingTransactions.length ?
-                        <Typography className={classes.pendingSummary} variant="body2" mr={1} fontWeight={700}>
+                        <Typography className={classes.pendingSummary} variant="body2" sx={{ mr: 1, fontWeight: 700 }}>
                             <Trans>{pendingTransactions.length} Pending</Trans>
                         </Typography>
                     :   null}
                 </div>
                 {pendingTransactions.length ?
-                    <Typography className={classes.clearAll} onClick={clearRecentTxes} fontWeight={700}>
+                    <Typography className={classes.clearAll} onClick={clearRecentTxes} sx={{ fontWeight: 700 }}>
                         <Trans>Clear All</Trans>
                     </Typography>
                 :   null}
diff --git a/packages/shared/src/UI/contexts/PageUIProvider.tsx b/packages/shared/src/UI/contexts/PageUIProvider.tsx
index 82c543e8dc9a..5c4d634cc2a4 100644
--- a/packages/shared/src/UI/contexts/PageUIProvider.tsx
+++ b/packages/shared/src/UI/contexts/PageUIProvider.tsx
@@ -1,5 +1,6 @@
 import React, { cloneElement, Suspense } from 'react'
-import { StyledEngineProvider, type Theme } from '@mui/material'
+import type { Theme } from '@mui/material'
+import { StyledEngineProvider } from '@mui/material/styles'
 import { RootWeb3ContextProvider } from '@masknet/web3-hooks-base'
 import { CSSVariableInjector, CustomSnackbarProvider, DialogStackingProvider, MaskThemeProvider } from '@masknet/theme'
 import { LinguiProviderHMR, PrivySetup, SharedContextProvider } from '@masknet/shared'
diff --git a/packages/shared/src/UI/contexts/components/InjectedDialog.tsx b/packages/shared/src/UI/contexts/components/InjectedDialog.tsx
index 225ab145b6c2..221ca3c8c36d 100644
--- a/packages/shared/src/UI/contexts/components/InjectedDialog.tsx
+++ b/packages/shared/src/UI/contexts/components/InjectedDialog.tsx
@@ -253,7 +253,7 @@ export function InjectedDialog(props: InjectedDialogProps) {
                                     }
                                 />
                             </IconButton>
-                            <Typography className={dialogTitleTypography} display="inline" variant="inherit">
+                            <Typography className={dialogTitleTypography} sx={{ display: 'inline' }} variant="inherit">
                                 {title}
                             </Typography>
                             <Stack
diff --git a/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginList.tsx b/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginList.tsx
index 5074808fb970..09f47b45e5bd 100644
--- a/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginList.tsx
+++ b/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginList.tsx
@@ -167,7 +167,7 @@ const AppListItem = memo(function AppListItem({ pluginID, entry, isListing }: Ap
 
     return (
         <ShadowRootTooltip
-            PopperProps={popperProps}
+            slotProps={{ popper: popperProps }}
             disableInteractive
             title={
                 <Typography>
diff --git a/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginSwitch.tsx b/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginSwitch.tsx
index c790b7d56399..30266ac2bae5 100644
--- a/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginSwitch.tsx
+++ b/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginSwitch.tsx
@@ -125,13 +125,13 @@ export const ApplicationSettingPluginSwitch = memo(function ApplicationSettingPl
                         targetPluginRef.current = ele
                     }}
                     className={classes.listItem}>
-                    <Stack width="100%">
-                        <Stack direction="row" width="100%">
+                    <Stack sx={{ width: '100%' }}>
+                        <Stack direction="row" sx={{ width: '100%' }}>
                             <section className={classes.listContent}>
                                 <ListItemAvatar>
                                     <Avatar className={classes.avatar}>{x.entry.icon}</Avatar>
                                 </ListItemAvatar>
-                                <Stack className={classes.info} flex={1}>
+                                <Stack className={classes.info} sx={{ flex: 1 }}>
                                     <div className={classes.headerWrapper}>
                                         <Typography className={classes.name}>
                                             <PluginTransFieldRender field={x.entry.name} pluginID={x.pluginID} />
@@ -150,7 +150,7 @@ export const ApplicationSettingPluginSwitch = memo(function ApplicationSettingPl
                                     </Typography>
                                 </Stack>
                             </section>
-                            <Stack justifyContent="center">
+                            <Stack sx={{ justifyContent: 'center' }}>
                                 <Switch
                                     checked={!pluginsInMinimalMode.map((x) => x.ID).includes(x.pluginID)}
                                     onChange={(event) => onSwitch(x.pluginID, event.target.checked)}
@@ -158,12 +158,12 @@ export const ApplicationSettingPluginSwitch = memo(function ApplicationSettingPl
                             </Stack>
                         </Stack>
                         {x.entry.features?.length ?
-                            <Stack direction="row" mt={1.25}>
+                            <Stack direction="row" sx={{ mt: 1.25 }}>
                                 <Box className={classes.placeholder} />
                                 <Stack spacing={1.25}>
                                     {x.entry.features.map((f, i) => (
                                         <Stack key={i}>
-                                            <Typography className={classes.name} fontSize={14}>
+                                            <Typography className={classes.name} sx={{ fontSize: 14 }}>
                                                 <PluginTransFieldRender field={f.name} pluginID={x.pluginID} />
                                             </Typography>
                                             <Typography className={classes.desc}>
@@ -192,15 +192,15 @@ function DSearchSettings({ checked, onSwitch, setRef }: DSearchSettingsProps) {
 
     return (
         <ListItem key={DSearch_KEY} ref={(ele) => setRef(ele)} className={classes.listItem}>
-            <Stack width="100%">
-                <Stack direction="row" width="100%">
+            <Stack sx={{ width: '100%' }}>
+                <Stack direction="row" sx={{ width: '100%' }}>
                     <section className={classes.listContent}>
                         <ListItemAvatar>
                             <Avatar className={classes.avatar}>
                                 <Icons.DecentralizedSearch />
                             </Avatar>
                         </ListItemAvatar>
-                        <Stack className={classes.info} flex={1}>
+                        <Stack className={classes.info} sx={{ flex: 1 }}>
                             <div className={classes.headerWrapper}>
                                 <Typography className={classes.name}>
                                     <Trans>DSearch</Trans>
@@ -220,15 +220,15 @@ function DSearchSettings({ checked, onSwitch, setRef }: DSearchSettingsProps) {
                             </Typography>
                         </Stack>
                     </section>
-                    <Stack justifyContent="center">
+                    <Stack sx={{ justifyContent: 'center' }}>
                         <Switch checked={checked} onChange={onSwitch} />
                     </Stack>
                 </Stack>
-                <Stack direction="row" mt={1.25}>
+                <Stack direction="row" sx={{ mt: 1.25 }}>
                     <Box className={classes.placeholder} />
                     <Stack spacing={1.25}>
                         <Stack>
-                            <Typography className={classes.name} fontSize={14}>
+                            <Typography className={classes.name} sx={{ fontSize: 14 }}>
                                 <Trans>Token</Trans>
                             </Typography>
                             <Typography className={classes.desc}>
@@ -236,7 +236,7 @@ function DSearchSettings({ checked, onSwitch, setRef }: DSearchSettingsProps) {
                             </Typography>
                         </Stack>
                         <Stack>
-                            <Typography className={classes.name} fontSize={14}>
+                            <Typography className={classes.name} sx={{ fontSize: 14 }}>
                                 <Trans>ENS or Wallet Address</Trans>
                             </Typography>
                             <Typography className={classes.desc}>
diff --git a/packages/shared/src/UI/modals/ConnectWalletModal/index.tsx b/packages/shared/src/UI/modals/ConnectWalletModal/index.tsx
index 578ea89109dd..77747f7a14a4 100644
--- a/packages/shared/src/UI/modals/ConnectWalletModal/index.tsx
+++ b/packages/shared/src/UI/modals/ConnectWalletModal/index.tsx
@@ -148,7 +148,7 @@ export function ConnectWalletModal({
             maxWidth="sm"
             className={classes.dialog}>
             <DialogContent className={classes.dialogContent}>
-                <Box width={90} height={90} position="relative" mt={9}>
+                <Box sx={{ width: 90, height: 90, position: 'relative', mt: 9 }}>
                     <Spinner
                         className={classes.spinner}
                         variant={
@@ -169,13 +169,15 @@ export function ConnectWalletModal({
                     />
                 </Box>
                 <Typography
-                    fontWeight={700}
-                    fontSize={16}
-                    mt={1.5}
+                    sx={{
+                        fontWeight: 700,
+                        fontSize: 16,
+                        mt: 1.5,
+                    }}
                     color={error && !loading ? maskColor.danger : undefined}>
                     <Trans>Requesting Connection</Trans>
                 </Typography>
-                <Typography fontWeight={400} mt={1.5}>
+                <Typography sx={{ fontWeight: 400, mt: 1.5 }}>
                     {isCanceled && !loading ?
                         <Trans>You canceled the request.</Trans>
                     :   <Trans>Check {providerName} to confirm connect.</Trans>}
diff --git a/packages/shared/src/UI/modals/LeavePageConfirmModal/LeavePageConfirm.tsx b/packages/shared/src/UI/modals/LeavePageConfirmModal/LeavePageConfirm.tsx
index 043484e42b5b..62bb4d338b0c 100644
--- a/packages/shared/src/UI/modals/LeavePageConfirmModal/LeavePageConfirm.tsx
+++ b/packages/shared/src/UI/modals/LeavePageConfirmModal/LeavePageConfirm.tsx
@@ -99,7 +99,7 @@ export function LeavePageConfirm(props: LeavePageConfirmProps) {
                     </Stack>
                 </DialogContent>
                 <DialogActions classes={{ root: classes.actions }}>
-                    <Stack width="100%">
+                    <Stack sx={{ width: '100%' }}>
                         <Button color="primary" style={{ borderRadius: 20 }} onClick={onClick}>
                             {info?.actionHint}
                         </Button>
diff --git a/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx b/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx
index 835a20de63aa..b043f70ae678 100644
--- a/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx
+++ b/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx
@@ -13,7 +13,7 @@ import {
 } from '@masknet/web3-hooks-base'
 import type { FungibleToken } from '@masknet/web3-shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
-import { Button, DialogActions, DialogContent, inputClasses, useMediaQuery, type Theme } from '@mui/material'
+import { Button, DialogActions, DialogContent, inputClasses, useMediaQuery } from '@mui/material'
 import { useMemo, useState } from 'react'
 import { TokenListMode } from '../../components/FungibleTokenList/type.js'
 import { FungibleTokenList, SelectNetworkSidebar, type FungibleTokenListProps } from '../../components/index.js'
@@ -131,7 +131,7 @@ export function SelectFungibleTokenDialog({
     const compact = networkIdentifier === EnhanceableSite.Minds
     const { pluginID: currentPluginID } = useNetworkContext(pluginID)
     const { classes, cx } = useStyles({ compact })
-    const isMdScreen = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'))
+    const isMdScreen = useMediaQuery((theme) => theme.breakpoints.down('md'))
     const allNetworks = useNetworks(NetworkPluginID.PLUGIN_EVM, true)
     const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const isPrivyWallet = !!usePrivyWallet(account)
diff --git a/packages/shared/src/UI/modals/SelectProviderModal/GuideDialog.tsx b/packages/shared/src/UI/modals/SelectProviderModal/GuideDialog.tsx
index f0e2a70f75a7..dbf36a651e49 100644
--- a/packages/shared/src/UI/modals/SelectProviderModal/GuideDialog.tsx
+++ b/packages/shared/src/UI/modals/SelectProviderModal/GuideDialog.tsx
@@ -56,10 +56,10 @@ export const GuideDialog = memo(function GuideDialog({ provider, ...rest }: Prop
         <InjectedDialog {...rest} title={<Trans>How to use {provider.name} Wallet?</Trans>}>
             <DialogContent className={classes.content}>
                 <section className={classes.section}>
-                    <Typography fontSize={16} fontWeight={700}>
+                    <Typography sx={{ fontSize: 16, fontWeight: 700 }}>
                         <Trans>1. If you haven't installed the {name} Wallet</Trans>
                     </Typography>
-                    <Typography mt={3} fontSize={14}>
+                    <Typography sx={{ mt: 3, fontSize: 14 }}>
                         <Trans>Download the {name} Wallet here</Trans>
                     </Typography>
                     <Link
@@ -68,26 +68,24 @@ export const GuideDialog = memo(function GuideDialog({ provider, ...rest }: Prop
                         rel="noopener noreferrer"
                         className={cx(classes.card, classes.downloadButton)}>
                         <img width={30} height={30} src={provider.icon} />
-                        <Typography fontSize={16} fontWeight={700} ml={1.5}>
+                        <Typography sx={{ fontSize: 16, fontWeight: 700, ml: 1.5 }}>
                             <Trans>Check out the official website</Trans>
                         </Typography>
                     </Link>
                 </section>
                 <section className={classes.section}>
-                    <Typography fontSize={16} fontWeight={700}>
+                    <Typography sx={{ fontSize: 16, fontWeight: 700 }}>
                         <Trans>2. If you have installed the {name} Wallet</Trans>
                     </Typography>
-                    <Typography mt={1.5} fontSize={14}>
+                    <Typography sx={{ mt: 1.5, fontSize: 14 }}>
                         <Trans>Enable the {name} Wallet extension and disable other wallet extensions</Trans>
                     </Typography>
                     <Stack className={classes.card} style={{ cursor: 'default' }}>
-                        <Stack flexDirection="row" alignItems="center">
+                        <Stack sx={{ flexDirection: 'row', alignItems: 'center' }}>
                             <img width={30} height={30} src={provider.icon} />
-                            <Typography ml={1.5} fontSize={16}>
-                                {name}
-                            </Typography>
+                            <Typography sx={{ ml: 1.5, fontSize: 16 }}>{name}</Typography>
                         </Stack>
-                        <Stack flexDirection="row" mt={3}>
+                        <Stack sx={{ flexDirection: 'row', mt: 3 }}>
                             <div className={classes.button}>
                                 <Trans>Details</Trans>
                             </div>
diff --git a/packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx b/packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx
index 2773bf33474b..b6c0bcbef706 100644
--- a/packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx
+++ b/packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx
@@ -10,7 +10,7 @@ import {
     ProviderType as FlowProviderType,
 } from '@masknet/web3-shared-flow'
 import { NETWORK_DESCRIPTORS as SOL_NETWORK_DESCRIPTORS } from '@masknet/web3-shared-solana'
-import { Box, List, ListItem, Typography } from '@mui/material'
+import { Box, List, ListItemButton, Typography } from '@mui/material'
 import { memo, useCallback, useMemo } from 'react'
 import { useAsyncFn } from 'react-use'
 import { ProviderItem } from './ProviderItem.js'
@@ -175,7 +175,7 @@ export const PluginProviderRender = memo(function PluginProviderRender({
                             placement="top"
                             disableInteractive
                             key={provider.ID}>
-                            <ListItem
+                            <ListItemButton
                                 className={cx(
                                     classes.walletItem,
                                     getDisabled(provider) ? classes.disabledWalletItem : '',
@@ -194,14 +194,14 @@ export const PluginProviderRender = memo(function PluginProviderRender({
                                     name={provider.name}
                                     iconFilterColor={provider.iconFilterColor}
                                 />
-                            </ListItem>
+                            </ListItemButton>
                         </ShadowRootTooltip>
                     ))}
                 </List>
             </section>
             {unavailableProviders.length ?
                 <>
-                    <Typography mt={2} color={theme.palette.maskColor.second} fontSize={14}>
+                    <Typography sx={{ mt: 2, fontSize: 14 }} color={theme.palette.maskColor.second}>
                         <Trans>The following wallets are not installed or in conflict with others</Trans>
                     </Typography>
                     <section className={classes.section}>
@@ -213,7 +213,7 @@ export const PluginProviderRender = memo(function PluginProviderRender({
                                     placement="top"
                                     disableInteractive
                                     key={provider.ID}>
-                                    <ListItem
+                                    <ListItemButton
                                         className={cx(
                                             classes.walletItem,
                                             getDisabled(provider) ? classes.disabledWalletItem : '',
@@ -232,7 +232,7 @@ export const PluginProviderRender = memo(function PluginProviderRender({
                                             name={provider.name}
                                             iconFilterColor={provider.iconFilterColor}
                                         />
-                                    </ListItem>
+                                    </ListItemButton>
                                 </ShadowRootTooltip>
                             ))}
                         </List>
diff --git a/packages/shared/src/UI/wallet/DeriveWalletTable.tsx b/packages/shared/src/UI/wallet/DeriveWalletTable.tsx
index 7f98967513ac..09a514adf1e6 100644
--- a/packages/shared/src/UI/wallet/DeriveWalletTable.tsx
+++ b/packages/shared/src/UI/wallet/DeriveWalletTable.tsx
@@ -183,7 +183,7 @@ export const DeriveWalletTableRow = memo<DeriveWalletTableRowProps>(function Der
     return (
         <TableRow key={address} className={cx(classes.tableRow, classes.tableRowWithHoverEffect)}>
             <TableCell align="left" variant="body" className={classes.cell}>
-                <Typography className={classes.second} minWidth={20}>
+                <Typography className={classes.second} sx={{ minWidth: 20 }}>
                     {pathIndex + 1}
                 </Typography>
                 <Typography className={classes.title}>
diff --git a/packages/shared/src/UI/wallet/GasSettingBar.tsx b/packages/shared/src/UI/wallet/GasSettingBar.tsx
index 1610f857148d..59a1b748f3da 100644
--- a/packages/shared/src/UI/wallet/GasSettingBar.tsx
+++ b/packages/shared/src/UI/wallet/GasSettingBar.tsx
@@ -75,8 +75,8 @@ export function GasSettingBar(props: GasSettingBarProps) {
     }, [chainId, gasLimit, gasPrice, maxFee, gasPriceDefault])
 
     return (
-        <Box display="flex" flexDirection="row" alignItems="center">
-            <Typography fontSize="14px" sx={{ marginRight: 1 }}>
+        <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+            <Typography sx={{ fontSize: '14px', marginRight: 1 }}>
                 <span>
                     {formatWeiToEther(gasFee).toFixed(6)} {nativeTokenDetailed?.symbol ?? ''} &asymp;
                 </span>
diff --git a/packages/theme/package.json b/packages/theme/package.json
index a95879454799..1968c16ee998 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -17,11 +17,11 @@
     "@masknet/shared-base": "workspace:^",
     "@types/tinycolor2": "^1.4.6",
     "fuse.js": "^7.0.0",
-    "notistack": "2.0.8",
+    "notistack": "3.0.2",
     "react-use": "^17.5.0",
     "react-window": "^1.8.10",
     "tinycolor2": "^1.6.0",
-    "tss-react": "^4.9.10"
+    "tss-react": "^4.9.21"
   },
   "devDependencies": {
     "@types/react-window": "^1.8.8"
diff --git a/packages/theme/src/Components/ActionButton/index.tsx b/packages/theme/src/Components/ActionButton/index.tsx
index 6ebfce900988..458354996892 100644
--- a/packages/theme/src/Components/ActionButton/index.tsx
+++ b/packages/theme/src/Components/ActionButton/index.tsx
@@ -5,7 +5,7 @@ import { makeStyles } from '../../UIHelper/index.js'
 
 export interface ActionButtonProps extends ButtonProps {
     width?: number | string
-    loading?: boolean
+    loading?: boolean | null
 }
 
 const useStyles = makeStyles()({
@@ -30,13 +30,15 @@ export function ActionButton<T extends React.ComponentType<any> = React.Componen
             disabled={!!(rest.disabled || loading)}>
             {loading ?
                 <Box
-                    position="absolute"
-                    width="100%"
-                    height="100%"
-                    display="flex"
-                    justifyContent="center"
-                    alignItems="center"
-                    style={{ opacity: 1 }}>
+                    sx={{
+                        position: 'absolute',
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        opacity: 1,
+                    }}>
                     <LoadingBase />
                 </Box>
             :   null}
diff --git a/packages/theme/src/Components/Alert/index.tsx b/packages/theme/src/Components/Alert/index.tsx
index b185440449c2..6e6337ebf9c5 100644
--- a/packages/theme/src/Components/Alert/index.tsx
+++ b/packages/theme/src/Components/Alert/index.tsx
@@ -44,8 +44,8 @@ export function MaskAlert(props: AlertProps) {
                 message: classes.message,
                 icon: classes.icon,
                 action: classes.action,
-                standardWarning: classes.standardWarning,
-                standardError: classes.standardError,
+                colorWarning: classes.standardWarning,
+                colorError: classes.standardError,
                 ...rest.classes,
             }}>
             {children}
diff --git a/packages/theme/src/Components/SearchableList/EmptyResult.tsx b/packages/theme/src/Components/SearchableList/EmptyResult.tsx
index cb5b30bfc4bb..b9827133598c 100644
--- a/packages/theme/src/Components/SearchableList/EmptyResult.tsx
+++ b/packages/theme/src/Components/SearchableList/EmptyResult.tsx
@@ -3,7 +3,7 @@ import { Icons } from '@masknet/icons'
 
 export function EmptyResult() {
     return (
-        <Stack justifyContent="center" alignItems="center" gap={1.5}>
+        <Stack sx={{ justifyContent: 'center', alignItems: 'center', gap: 1.5 }}>
             <Icons.EmptySimple size={36} />
             <Typography>No results</Typography>
         </Stack>
diff --git a/packages/theme/src/Components/SearchableList/SearchableList.tsx b/packages/theme/src/Components/SearchableList/SearchableList.tsx
index 3246d570837e..a7facaab9f42 100644
--- a/packages/theme/src/Components/SearchableList/SearchableList.tsx
+++ b/packages/theme/src/Components/SearchableList/SearchableList.tsx
@@ -184,7 +184,7 @@ export function SearchableList<T extends object>({
                         {...textFieldPropsRest}
                     />
                     {textFieldPropsRest.error ?
-                        <Typography className={classes.error} mt={0.5}>
+                        <Typography className={classes.error} sx={{ mt: 0.5 }}>
                             {textFieldPropsRest.helperText}
                         </Typography>
                     :   null}
@@ -192,22 +192,26 @@ export function SearchableList<T extends object>({
             )}
             {loading ?
                 <Stack
-                    height={windowHeight}
-                    justifyContent="center"
-                    alignItems="center"
-                    width="100%"
-                    alignContent="center"
-                    marginTop="18px"
-                    marginBottom="48px">
+                    sx={{
+                        height: windowHeight,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        width: '100%',
+                        alignContent: 'center',
+                        marginTop: '18px',
+                        marginBottom: '48px',
+                    }}>
                     <LoadingBase />
                 </Stack>
             : readyToRenderData.length === 0 ?
                 <Stack
-                    height={windowHeight}
-                    justifyContent="center"
-                    alignContent="center"
-                    marginTop="18px"
-                    marginBottom="48px">
+                    sx={{
+                        height: windowHeight,
+                        justifyContent: 'center',
+                        alignContent: 'center',
+                        marginTop: '18px',
+                        marginBottom: '48px',
+                    }}>
                     <EmptyResult />
                 </Stack>
             :   <div className={classes.listBox}>
diff --git a/packages/theme/src/Components/Tabs/index.tsx b/packages/theme/src/Components/Tabs/index.tsx
index f735d6e1cf66..43c3f553475f 100644
--- a/packages/theme/src/Components/Tabs/index.tsx
+++ b/packages/theme/src/Components/Tabs/index.tsx
@@ -266,7 +266,7 @@ export function MaskTabList(props: MaskTabListProps) {
 
     if (variant === 'flexible') {
         return (
-            <Box position="relative">
+            <Box sx={{ position: 'relative' }}>
                 <ButtonGroupWrap
                     maskVariant={variant}
                     ref={anchorRef}
diff --git a/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx b/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx
index 563de81c303d..6d1c0aa139a6 100644
--- a/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx
+++ b/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx
@@ -47,8 +47,6 @@ function getShadowRootEmotionCache(shadow: ShadowRoot) {
 
     const muiEmotionCache = createEmotionCache({ key })
     const muiStyleSheet = new StyleSheet({ key, container: shadow })
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
     muiEmotionCache.sheet = muiStyleSheet
 
     styleSheetMap.set(shadow, [muiEmotionCache, muiStyleSheet])
diff --git a/packages/theme/src/Theme/component-changes.tsx b/packages/theme/src/Theme/component-changes.tsx
index 2f5be8ca3c55..8b06b8933114 100644
--- a/packages/theme/src/Theme/component-changes.tsx
+++ b/packages/theme/src/Theme/component-changes.tsx
@@ -917,8 +917,10 @@ export const TextField = (mode: PaletteMode, colors: MaskColor) => ({
         MuiTextField: {
             defaultProps: {
                 variant: 'filled',
-                InputProps: {
-                    disableUnderline: true,
+                slotProps: {
+                    input: {
+                        disableUnderline: true,
+                    },
                 },
             },
             styleOverrides: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cf34e44d5335..a000087bf21b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,10 +5,14 @@ settings:
   excludeLinksFromLockfile: false
 
 overrides:
-  '@emotion/styled': 11.11.5
-  '@emotion/react': 11.11.4
-  '@mui/icons-material': 5.15.21
-  '@mui/material': 5.15.20
+  '@emotion/styled': 11.14.1
+  '@emotion/react': 11.14.0
+  '@mui/icons-material': 9.2.0
+  '@mui/material': 9.2.0
+  '@mui/private-theming': 9.2.0
+  '@mui/styled-engine': 9.1.1
+  '@mui/system': 9.2.0
+  '@mui/utils': 9.2.0
   '@swc/core': 1.15.43
   '@splinetool/runtime': 0.9.342
   '@tanstack/react-query': ^5.49.2
@@ -19,6 +23,7 @@ overrides:
   glob-stream: 7.0.0
   react: 0.0.0-experimental-58af67a8f8-20240628
   react-dom: 0.0.0-experimental-58af67a8f8-20240628
+  tss-react: 4.9.21
   reflect-metadata: 0.1.13
   ts-jest: '-'
   ts-node: '-'
@@ -63,17 +68,17 @@ importers:
         specifier: 0.9.0-20240322092738-f9180f3
         version: 0.9.0-20240322092738-f9180f3(@types/webextension-polyfill@0.10.7)
       '@emotion/cache':
-        specifier: 11.11.0
-        version: 11.11.0
+        specifier: 11.14.0
+        version: 11.14.0
       '@emotion/react':
-        specifier: 11.11.4
-        version: 11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+        specifier: 11.14.0
+        version: 11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
       '@emotion/serialize':
-        specifier: 1.1.4
-        version: 1.1.4
+        specifier: 1.3.3
+        version: 1.3.3
       '@emotion/styled':
-        specifier: 11.11.5
-        version: 11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+        specifier: 11.14.1
+        version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
       '@lingui/core':
         specifier: ^6.5.0
         version: 6.5.0(babel-plugin-macros@3.1.0)
@@ -84,17 +89,26 @@ importers:
         specifier: 0.4.1
         version: 0.4.1
       '@mui/icons-material':
-        specifier: 5.15.21
-        version: 5.15.21(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+        specifier: 9.2.0
+        version: 9.2.0(@mui/material@9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
       '@mui/lab':
-        specifier: 5.0.0-alpha.170
-        version: 5.0.0-alpha.170(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
+        specifier: 9.0.0-beta.6
+        version: 9.0.0-beta.6(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@mui/material@9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
       '@mui/material':
-        specifier: 5.15.20
-        version: 5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
+        specifier: 9.2.0
+        version: 9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@mui/private-theming':
+        specifier: 9.2.0
+        version: 9.2.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@mui/styled-engine':
+        specifier: 9.1.1
+        version: 9.1.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
       '@mui/system':
-        specifier: 5.15.20
-        version: 5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+        specifier: 9.2.0
+        version: 9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@mui/utils':
+        specifier: 9.2.0
+        version: 9.2.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
       '@tanstack/react-query':
         specifier: ^5.49.2
         version: 5.49.2(react@0.0.0-experimental-58af67a8f8-20240628)
@@ -617,8 +631,8 @@ importers:
         specifier: ^2.8.3
         version: 2.8.3
       tss-react:
-        specifier: ^4.9.0
-        version: 4.9.13(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
+        specifier: 4.9.21
+        version: 4.9.21(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@mui/material@9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
       url:
         specifier: ^0.11.3
         version: 0.11.4
@@ -2048,8 +2062,8 @@ importers:
         specifier: ^7.0.0
         version: 7.0.0
       notistack:
-        specifier: 2.0.8
-        version: 2.0.8(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
+        specifier: 3.0.2
+        version: 3.0.2(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
       react-use:
         specifier: ^17.5.0
         version: 17.5.0(patch_hash=d4ab26e7e9bf01f9c4ca5da3caefb5b44dee64b0382328e5a08df838b8d8a4f7)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
@@ -2060,8 +2074,8 @@ importers:
         specifier: ^1.6.0
         version: 1.6.0
       tss-react:
-        specifier: ^4.9.10
-        version: 4.9.13(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
+        specifier: 4.9.21
+        version: 4.9.21(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@mui/material@9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
     devDependencies:
       '@types/react-window':
         specifier: ^1.8.8
@@ -3435,23 +3449,23 @@ packages:
   '@emnapi/wasi-threads@1.2.2':
     resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}
 
-  '@emotion/babel-plugin@11.11.0':
-    resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
+  '@emotion/babel-plugin@11.13.5':
+    resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
 
-  '@emotion/cache@11.11.0':
-    resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==}
+  '@emotion/cache@11.14.0':
+    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
 
-  '@emotion/hash@0.9.1':
-    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
+  '@emotion/hash@0.9.2':
+    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
 
-  '@emotion/is-prop-valid@1.2.2':
-    resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==}
+  '@emotion/is-prop-valid@1.4.0':
+    resolution: {integrity: sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==}
 
-  '@emotion/memoize@0.8.1':
-    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
+  '@emotion/memoize@0.9.0':
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
 
-  '@emotion/react@11.11.4':
-    resolution: {integrity: sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==}
+  '@emotion/react@11.14.0':
+    resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==}
     peerDependencies:
       '@types/react': '*'
       react: 0.0.0-experimental-58af67a8f8-20240628
@@ -3459,35 +3473,35 @@ packages:
       '@types/react':
         optional: true
 
-  '@emotion/serialize@1.1.4':
-    resolution: {integrity: sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==}
+  '@emotion/serialize@1.3.3':
+    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
 
-  '@emotion/sheet@1.2.2':
-    resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
+  '@emotion/sheet@1.4.0':
+    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
 
-  '@emotion/styled@11.11.5':
-    resolution: {integrity: sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==}
+  '@emotion/styled@11.14.1':
+    resolution: {integrity: sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==}
     peerDependencies:
-      '@emotion/react': 11.11.4
+      '@emotion/react': 11.14.0
       '@types/react': '*'
       react: 0.0.0-experimental-58af67a8f8-20240628
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@emotion/unitless@0.8.1':
-    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+  '@emotion/unitless@0.10.0':
+    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
 
-  '@emotion/use-insertion-effect-with-fallbacks@1.0.1':
-    resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0':
+    resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==}
     peerDependencies:
       react: 0.0.0-experimental-58af67a8f8-20240628
 
   '@emotion/utils@1.4.2':
     resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
 
-  '@emotion/weak-memoize@0.3.1':
-    resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
+  '@emotion/weak-memoize@0.4.0':
+    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
 
   '@endo/cache-map@1.1.0':
     resolution: {integrity: sha512-owFGshs/97PDw9oguZqU/px8Lv1d0KjAUtDUiPwKHNXRVUE/jyettEbRoTbNJR1OaI8biMn6bHr9kVJsOh6dXw==}
@@ -3837,24 +3851,6 @@ packages:
     resolution: {integrity: sha512-T9HUVEjEgM0MzVLY4gs52ffz5AlHeC3CSGFcEzL4ojKMVzMxa3na1GW/XCmunrhnWP2cDh4fE2MhqLxA0CHqTw==}
     engines: {node: '>=10'}
 
-  '@floating-ui/core@1.6.0':
-    resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
-
-  '@floating-ui/dom@1.6.3':
-    resolution: {integrity: sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==}
-
-  '@floating-ui/react-dom@2.0.8':
-    resolution: {integrity: sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==}
-    peerDependencies:
-      react: 0.0.0-experimental-58af67a8f8-20240628
-      react-dom: 0.0.0-experimental-58af67a8f8-20240628
-
-  '@floating-ui/utils@0.2.1':
-    resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
-
-  '@floating-ui/utils@0.2.10':
-    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
-
   '@gql.tada/cli-utils@1.6.3':
     resolution: {integrity: sha512-jFFSY8OxYeBxdKi58UzeMXG1tdm4FVjXa8WHIi66Gzu9JWtCE6mqom3a8xkmSw+mVaybFW5EN2WXf1WztJVNyQ==}
     peerDependencies:
@@ -4339,39 +4335,28 @@ packages:
     resolution: {integrity: sha512-3rDakgJZ77+RiQUuSK69t1F0m8BQKA8Vh5DCS5V0DWvNY67zob2JhhQrhCO0AKLGINTRSFd1tBaHcJTkhefoSw==}
     engines: {node: '>=18'}
 
-  '@mui/base@5.0.0-beta.40':
-    resolution: {integrity: sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==}
-    engines: {node: '>=12.0.0'}
-    deprecated: This package has been replaced by @base-ui-components/react
-    peerDependencies:
-      '@types/react': ^19.2.10
-      react: 0.0.0-experimental-58af67a8f8-20240628
-      react-dom: 0.0.0-experimental-58af67a8f8-20240628
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@mui/core-downloads-tracker@5.15.21':
-    resolution: {integrity: sha512-dp9lXBaJZzJYeJfQY3Ow4Rb49QaCEdkl2KKYscdQHQm6bMJ+l4XPY3Cd9PCeeJTsHPIDJ60lzXbeRgs6sx/rpw==}
+  '@mui/core-downloads-tracker@9.2.0':
+    resolution: {integrity: sha512-+XMav+ZaXkZKUFUgzjrfMEedfyJKxxviAske2q8N8CWDMeqZdDU2lWMkiUPiB388hGaDqhwvOAwkrsc/pUyp8g==}
 
-  '@mui/icons-material@5.15.21':
-    resolution: {integrity: sha512-yqkq1MbdkmX5ZHyvZTBuAaA6RkvoqkoAgwBSx9Oh0L0jAfj9T/Ih/NhMNjkl8PWVSonjfDUkKroBnjRyo/1M9Q==}
-    engines: {node: '>=12.0.0'}
+  '@mui/icons-material@9.2.0':
+    resolution: {integrity: sha512-VgBd3z7Qc3vd/thcNSMC03nHRh/U4DzMUd+1dRyJTbm/hGo7+N6N4GDuJZDNHa6LZhhwG6Cu1X3DNvrVv8sNag==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@mui/material': 5.15.20
+      '@mui/material': 9.2.0
       '@types/react': ^19.2.10
       react: 0.0.0-experimental-58af67a8f8-20240628
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@mui/lab@5.0.0-alpha.170':
-    resolution: {integrity: sha512-0bDVECGmrNjd3+bLdcLiwYZ0O4HP5j5WSQm5DV6iA/Z9kr8O6AnvZ1bv9ImQbbX7Gj3pX4o43EKwCutj3EQxQg==}
-    engines: {node: '>=12.0.0'}
+  '@mui/lab@9.0.0-beta.6':
+    resolution: {integrity: sha512-y92D7zcvX2OCzFFu4IbYKAVj3cayuFHX6OZm0LdsLDPlUi55zjUhjR9pjI23nCGAQXRPmWE/3BZjCyFiYYpNqQ==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@emotion/react': 11.11.4
-      '@emotion/styled': 11.11.5
-      '@mui/material': 5.15.20
+      '@emotion/react': 11.14.0
+      '@emotion/styled': 11.14.1
+      '@mui/material': 9.2.0
+      '@mui/material-pigment-css': ^9.2.0
       '@types/react': ^19.2.10
       react: 0.0.0-experimental-58af67a8f8-20240628
       react-dom: 0.0.0-experimental-58af67a8f8-20240628
@@ -4380,15 +4365,18 @@ packages:
         optional: true
       '@emotion/styled':
         optional: true
+      '@mui/material-pigment-css':
+        optional: true
       '@types/react':
         optional: true
 
-  '@mui/material@5.15.20':
-    resolution: {integrity: sha512-tVq3l4qoXx/NxUgIx/x3lZiPn/5xDbdTE8VrLczNpfblLYZzlrbxA7kb9mI8NoBF6+w9WE9IrxWnKK5KlPI2bg==}
-    engines: {node: '>=12.0.0'}
+  '@mui/material@9.2.0':
+    resolution: {integrity: sha512-+YTRSgGKGrrRo2XJZXs7JRA6qHoHWvNtxyqxnrRJTBmIuLOUpxxh7m4G9lF4tWberxGFY+EqkkRPgJCl+fSMJg==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@emotion/react': 11.11.4
-      '@emotion/styled': 11.11.5
+      '@emotion/react': 11.14.0
+      '@emotion/styled': 11.14.1
+      '@mui/material-pigment-css': ^9.2.0
       '@types/react': ^19.2.10
       react: 0.0.0-experimental-58af67a8f8-20240628
       react-dom: 0.0.0-experimental-58af67a8f8-20240628
@@ -4397,12 +4385,14 @@ packages:
         optional: true
       '@emotion/styled':
         optional: true
+      '@mui/material-pigment-css':
+        optional: true
       '@types/react':
         optional: true
 
-  '@mui/private-theming@5.15.20':
-    resolution: {integrity: sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==}
-    engines: {node: '>=12.0.0'}
+  '@mui/private-theming@9.2.0':
+    resolution: {integrity: sha512-w9wpyDxGPGnAACPB2hKhCDmILJIAvQxrfjUbIAEa0AznX1rOjaz5N+yB1uuw8ixnJcpEh/tPbD9oEe19wcWPHw==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
       '@types/react': ^19.2.10
       react: 0.0.0-experimental-58af67a8f8-20240628
@@ -4410,12 +4400,12 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/styled-engine@5.15.14':
-    resolution: {integrity: sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==}
-    engines: {node: '>=12.0.0'}
+  '@mui/styled-engine@9.1.1':
+    resolution: {integrity: sha512-neaYKdJfvEG54q8efHLJR7swpHG/gfSv9xGqW5iTSMsubD7yPCPFrhVBt284j1DOF3uZaaDJSHQL7gz6jGF21Q==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@emotion/react': 11.11.4
-      '@emotion/styled': 11.11.5
+      '@emotion/react': 11.14.0
+      '@emotion/styled': 11.14.1
       react: 0.0.0-experimental-58af67a8f8-20240628
     peerDependenciesMeta:
       '@emotion/react':
@@ -4423,12 +4413,12 @@ packages:
       '@emotion/styled':
         optional: true
 
-  '@mui/system@5.15.20':
-    resolution: {integrity: sha512-LoMq4IlAAhxzL2VNUDBTQxAb4chnBe8JvRINVNDiMtHE2PiPOoHlhOPutSxEbaL5mkECPVWSv6p8JEV+uykwIA==}
-    engines: {node: '>=12.0.0'}
+  '@mui/system@9.2.0':
+    resolution: {integrity: sha512-YvUJwKoGVtbnOm2PyPi5TvX2d1rOA6sqSpEWVs4WmXNIaFTuYmNUaVdU2o1NKUEe31URnD3E8ZVUMcsLQXwcYg==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@emotion/react': 11.11.4
-      '@emotion/styled': 11.11.5
+      '@emotion/react': 11.14.0
+      '@emotion/styled': 11.14.1
       '@types/react': ^19.2.10
       react: 0.0.0-experimental-58af67a8f8-20240628
     peerDependenciesMeta:
@@ -4439,17 +4429,17 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/types@7.2.14':
-    resolution: {integrity: sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==}
+  '@mui/types@9.1.1':
+    resolution: {integrity: sha512-Zjt7u8wNvDg40rPTGoL+TnfkpuSKjwubsNSFRH1KAVZLcaV4I3AFNHIFbvH7p4F3alEibSbdd90xAgn5Rnfndg==}
     peerDependencies:
       '@types/react': ^19.2.10
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@mui/utils@5.15.20':
-    resolution: {integrity: sha512-mAbYx0sovrnpAu1zHc3MDIhPqL8RPVC5W5xcO1b7PiSCJPtckIZmBkp8hefamAvUiAV8gpfMOM6Zb+eSisbI2A==}
-    engines: {node: '>=12.0.0'}
+  '@mui/utils@9.2.0':
+    resolution: {integrity: sha512-OsUH5zhlSOM4xmLl53+agug1M1UyWb4zxFxWQCqwKTKUeQPvTENtg3JhrroBD2qpCLKsX5W/DYGERJ4mBUbc8g==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
       '@types/react': ^19.2.10
       react: 0.0.0-experimental-58af67a8f8-20240628
@@ -6031,8 +6021,8 @@ packages:
   '@types/parse-json@4.0.0':
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
 
-  '@types/prop-types@15.7.11':
-    resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
+  '@types/prop-types@15.7.15':
+    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
 
   '@types/proper-lockfile@4.1.4':
     resolution: {integrity: sha512-uo2ABllncSqg9F1D4nugVl9v93RmjxF6LJzQLMLDdPaXCUIDPeOJ21Gbqi43xNKzBi/WQ0Q0dICqufzQbMjipQ==}
@@ -6063,8 +6053,10 @@ packages:
   '@types/react-reconciler@0.28.0':
     resolution: {integrity: sha512-5cjk9ottZAj7eaTsqzPUIlrVbh3hBAO2YaEL1rkjHKB3xNAId7oU8GhzvAX+gfmlfoxTwJnBjPxEHyxkEA1Ffg==}
 
-  '@types/react-transition-group@4.4.10':
-    resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==}
+  '@types/react-transition-group@4.4.12':
+    resolution: {integrity: sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==}
+    peerDependencies:
+      '@types/react': ^19.2.10
 
   '@types/react-window@1.8.8':
     resolution: {integrity: sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==}
@@ -6672,8 +6664,8 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  acorn@8.14.0:
-    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
@@ -7341,8 +7333,8 @@ packages:
     resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
     engines: {node: '>=6'}
 
-  clsx@2.1.0:
-    resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
   cluster-key-slot@1.1.2:
@@ -8857,6 +8849,11 @@ packages:
     resolution: {integrity: sha512-eWv1ds/zAlz+M1ioHsyKJomfY7jbDDPpwSkv14KQj89bycx1nvK5/2Cj/T9g7kzJcX5Bc7Yv22FjfBZS/jl94A==}
     engines: {node: '>= 10.13.0'}
 
+  goober@2.1.19:
+    resolution: {integrity: sha512-U7veizMqxyKlM58+Z5j2ngJBH/r9siDmxpvNxSw0PylF6WQvrASJEZrxh1hidRBJc2jqoBVSyOban5u8m+6Rxg==}
+    peerDependencies:
+      csstype: ^3.0.10
+
   gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
 
@@ -10404,19 +10401,12 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
-  notistack@2.0.8:
-    resolution: {integrity: sha512-/IY14wkFp5qjPgKNvAdfL5Jp6q90+MjgKTPh4c81r/lW70KeuX6b9pE/4f8L4FG31cNudbN9siiFS5ql1aSLRw==}
+  notistack@3.0.2:
+    resolution: {integrity: sha512-0R+/arLYbK5Hh7mEfR2adt0tyXJcCC9KkA2hc56FeWik2QN6Bm/S4uW+BjzDARsJth5u06nTjelSw/VSnB1YEA==}
+    engines: {node: '>=12.0.0', npm: '>=6.0.0'}
     peerDependencies:
-      '@emotion/react': 11.11.4
-      '@emotion/styled': 11.11.5
-      '@mui/material': 5.15.20
       react: 0.0.0-experimental-58af67a8f8-20240628
       react-dom: 0.0.0-experimental-58af67a8f8-20240628
-    peerDependenciesMeta:
-      '@emotion/react':
-        optional: true
-      '@emotion/styled':
-        optional: true
 
   now-and-later@3.0.0:
     resolution: {integrity: sha512-pGO4pzSdaxhWTGkfSfHx3hVzJVslFPwBp2Myq9MYN/ChfJZF87ochMAXnvz6/58RJSf5ik2q9tXprBBrk2cpcg==}
@@ -11080,6 +11070,9 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-is@19.2.7:
+    resolution: {integrity: sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==}
+
   react-markdown@9.0.1:
     resolution: {integrity: sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==}
     peerDependencies:
@@ -12107,12 +12100,13 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  tss-react@4.9.13:
-    resolution: {integrity: sha512-Gu19qqPH8/SAyKVIgDE5qHygirEDnNIQcXhiEc+l4Q9T7C1sfvUnbVWs+yBpmN26/wyk4FTOupjYS2wq4vH0yA==}
+  tss-react@4.9.21:
+    resolution: {integrity: sha512-3jAEzeU1i4ve3PiqEqjIgcHY2geIF8Cqo6w0SBqVPDwH2KeGGNVaWcKyFZjxL/xg2cIACg17PllggCU4AAHCdQ==}
     peerDependencies:
-      '@emotion/react': 11.11.4
+      '@emotion/react': 11.14.0
       '@emotion/server': ^11.4.0
-      '@mui/material': 5.15.20
+      '@mui/material': 9.2.0
+      '@types/react': ^19.2.10
       react: 0.0.0-experimental-58af67a8f8-20240628
     peerDependenciesMeta:
       '@emotion/server':
@@ -12900,8 +12894,8 @@ snapshots:
 
   '@ampproject/remapping@2.3.0':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
-      '@jridgewell/trace-mapping': 0.3.25
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@aws-crypto/crc32@5.2.0':
     dependencies:
@@ -13429,7 +13423,7 @@ snapshots:
 
   '@babel/code-frame@7.27.1':
     dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.29.7
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
@@ -13467,14 +13461,14 @@ snapshots:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.27.1
+      '@babel/generator': 7.29.7
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-module-transforms': 7.27.1(@babel/core@7.27.1)
       '@babel/helpers': 7.27.1
-      '@babel/parser': 7.27.2
+      '@babel/parser': 7.29.7
       '@babel/template': 7.27.2
       '@babel/traverse': 7.27.1
-      '@babel/types': 7.27.1
+      '@babel/types': 7.29.7
       convert-source-map: 2.0.0
       debug: 4.4.3
       gensync: 1.0.0-beta.2
@@ -13523,7 +13517,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.27.2
       '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.25.1
+      browserslist: 4.28.1
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -13571,7 +13565,7 @@ snapshots:
   '@babel/helper-module-imports@7.27.1':
     dependencies:
       '@babel/traverse': 7.27.1
-      '@babel/types': 7.27.1
+      '@babel/types': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
@@ -13588,7 +13582,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.27.1
       '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.29.7
       '@babel/traverse': 7.27.1
     transitivePeerDependencies:
       - supports-color
@@ -13639,7 +13633,7 @@ snapshots:
   '@babel/helpers@7.27.1':
     dependencies:
       '@babel/template': 7.27.2
-      '@babel/types': 7.27.1
+      '@babel/types': 7.29.7
 
   '@babel/parser@7.26.2':
     dependencies:
@@ -13706,8 +13700,8 @@ snapshots:
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.27.2
-      '@babel/types': 7.27.1
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
 
   '@babel/template@7.29.7':
     dependencies:
@@ -13742,10 +13736,10 @@ snapshots:
   '@babel/traverse@7.27.1':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.27.1
-      '@babel/parser': 7.27.2
+      '@babel/generator': 7.29.7
+      '@babel/parser': 7.29.7
       '@babel/template': 7.27.2
-      '@babel/types': 7.27.1
+      '@babel/types': 7.29.7
       debug: 4.4.3
       globals: 11.12.0
     transitivePeerDependencies:
@@ -14452,13 +14446,13 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emotion/babel-plugin@11.11.0':
+  '@emotion/babel-plugin@11.13.5':
     dependencies:
-      '@babel/helper-module-imports': 7.25.9
-      '@babel/runtime': 7.26.7
-      '@emotion/hash': 0.9.1
-      '@emotion/memoize': 0.8.1
-      '@emotion/serialize': 1.1.4
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/runtime': 7.29.7
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/serialize': 1.3.3
       babel-plugin-macros: 3.1.0
       convert-source-map: 1.9.0
       escape-string-regexp: 4.0.0
@@ -14468,31 +14462,31 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@emotion/cache@11.11.0':
+  '@emotion/cache@11.14.0':
     dependencies:
-      '@emotion/memoize': 0.8.1
-      '@emotion/sheet': 1.2.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/sheet': 1.4.0
       '@emotion/utils': 1.4.2
-      '@emotion/weak-memoize': 0.3.1
+      '@emotion/weak-memoize': 0.4.0
       stylis: 4.2.0
 
-  '@emotion/hash@0.9.1': {}
+  '@emotion/hash@0.9.2': {}
 
-  '@emotion/is-prop-valid@1.2.2':
+  '@emotion/is-prop-valid@1.4.0':
     dependencies:
-      '@emotion/memoize': 0.8.1
+      '@emotion/memoize': 0.9.0
 
-  '@emotion/memoize@0.8.1': {}
+  '@emotion/memoize@0.9.0': {}
 
-  '@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)':
+  '@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)':
     dependencies:
-      '@babel/runtime': 7.26.0
-      '@emotion/babel-plugin': 11.11.0
-      '@emotion/cache': 11.11.0
-      '@emotion/serialize': 1.1.4
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@babel/runtime': 7.29.7
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@0.0.0-experimental-58af67a8f8-20240628)
       '@emotion/utils': 1.4.2
-      '@emotion/weak-memoize': 0.3.1
+      '@emotion/weak-memoize': 0.4.0
       hoist-non-react-statics: 3.3.2
       react: 0.0.0-experimental-58af67a8f8-20240628
     optionalDependencies:
@@ -14500,24 +14494,24 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@emotion/serialize@1.1.4':
+  '@emotion/serialize@1.3.3':
     dependencies:
-      '@emotion/hash': 0.9.1
-      '@emotion/memoize': 0.8.1
-      '@emotion/unitless': 0.8.1
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/unitless': 0.10.0
       '@emotion/utils': 1.4.2
-      csstype: 3.1.3
+      csstype: 3.2.3
 
-  '@emotion/sheet@1.2.2': {}
+  '@emotion/sheet@1.4.0': {}
 
-  '@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)':
+  '@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)':
     dependencies:
-      '@babel/runtime': 7.26.0
-      '@emotion/babel-plugin': 11.11.0
-      '@emotion/is-prop-valid': 1.2.2
-      '@emotion/react': 11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@emotion/serialize': 1.1.4
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@babel/runtime': 7.29.7
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/is-prop-valid': 1.4.0
+      '@emotion/react': 11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@0.0.0-experimental-58af67a8f8-20240628)
       '@emotion/utils': 1.4.2
       react: 0.0.0-experimental-58af67a8f8-20240628
     optionalDependencies:
@@ -14525,15 +14519,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@emotion/unitless@0.8.1': {}
+  '@emotion/unitless@0.10.0': {}
 
-  '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@0.0.0-experimental-58af67a8f8-20240628)':
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@0.0.0-experimental-58af67a8f8-20240628)':
     dependencies:
       react: 0.0.0-experimental-58af67a8f8-20240628
 
   '@emotion/utils@1.4.2': {}
 
-  '@emotion/weak-memoize@0.3.1': {}
+  '@emotion/weak-memoize@0.4.0': {}
 
   '@endo/cache-map@1.1.0': {}
 
@@ -14898,25 +14892,6 @@ snapshots:
     dependencies:
       keccak: 3.0.3
 
-  '@floating-ui/core@1.6.0':
-    dependencies:
-      '@floating-ui/utils': 0.2.10
-
-  '@floating-ui/dom@1.6.3':
-    dependencies:
-      '@floating-ui/core': 1.6.0
-      '@floating-ui/utils': 0.2.1
-
-  '@floating-ui/react-dom@2.0.8(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)':
-    dependencies:
-      '@floating-ui/dom': 1.6.3
-      react: 0.0.0-experimental-58af67a8f8-20240628
-      react-dom: 0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628)
-
-  '@floating-ui/utils@0.2.1': {}
-
-  '@floating-ui/utils@0.2.10': {}
-
   '@gql.tada/cli-utils@1.6.3(@0no-co/graphqlsp@1.12.16(graphql@16.9.0)(typescript@5.9.2))(graphql@16.9.0)(typescript@5.9.2)':
     dependencies:
       '@0no-co/graphqlsp': 1.12.16(graphql@16.9.0)(typescript@5.9.2)
@@ -15026,7 +15001,7 @@ snapshots:
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.25
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/gen-mapping@0.3.8':
     dependencies:
@@ -15040,8 +15015,8 @@ snapshots:
 
   '@jridgewell/source-map@0.3.6':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
-      '@jridgewell/trace-mapping': 0.3.25
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
@@ -15576,115 +15551,106 @@ snapshots:
       outvariant: 1.4.2
       strict-event-emitter: 0.5.1
 
-  '@mui/base@5.0.0-beta.40(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)':
-    dependencies:
-      '@babel/runtime': 7.26.0
-      '@floating-ui/react-dom': 2.0.8(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@mui/types': 7.2.14(@types/react@19.2.10)
-      '@mui/utils': 5.15.20(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@popperjs/core': 2.11.8
-      clsx: 2.1.0
-      prop-types: 15.8.1
-      react: 0.0.0-experimental-58af67a8f8-20240628
-      react-dom: 0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628)
-    optionalDependencies:
-      '@types/react': 19.2.10
-
-  '@mui/core-downloads-tracker@5.15.21': {}
+  '@mui/core-downloads-tracker@9.2.0': {}
 
-  '@mui/icons-material@5.15.21(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)':
+  '@mui/icons-material@9.2.0(@mui/material@9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)':
     dependencies:
-      '@babel/runtime': 7.26.0
-      '@mui/material': 5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@babel/runtime': 7.29.7
+      '@mui/material': 9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
       react: 0.0.0-experimental-58af67a8f8-20240628
     optionalDependencies:
       '@types/react': 19.2.10
 
-  '@mui/lab@5.0.0-alpha.170(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)':
+  '@mui/lab@9.0.0-beta.6(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@mui/material@9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)':
     dependencies:
-      '@babel/runtime': 7.26.0
-      '@mui/base': 5.0.0-beta.40(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@mui/material': 5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@mui/system': 5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@mui/types': 7.2.14(@types/react@19.2.10)
-      '@mui/utils': 5.15.20(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      clsx: 2.1.0
+      '@babel/runtime': 7.29.7
+      '@mui/material': 9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@mui/system': 9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@mui/types': 9.1.1(@types/react@19.2.10)
+      '@mui/utils': 9.2.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      clsx: 2.1.1
       prop-types: 15.8.1
       react: 0.0.0-experimental-58af67a8f8-20240628
       react-dom: 0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628)
     optionalDependencies:
-      '@emotion/react': 11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@emotion/react': 11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
       '@types/react': 19.2.10
 
-  '@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)':
+  '@mui/material@9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)':
     dependencies:
-      '@babel/runtime': 7.26.0
-      '@mui/base': 5.0.0-beta.40(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@mui/core-downloads-tracker': 5.15.21
-      '@mui/system': 5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@mui/types': 7.2.14(@types/react@19.2.10)
-      '@mui/utils': 5.15.20(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@types/react-transition-group': 4.4.10
-      clsx: 2.1.0
-      csstype: 3.1.3
+      '@babel/runtime': 7.29.7
+      '@mui/core-downloads-tracker': 9.2.0
+      '@mui/system': 9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@mui/types': 9.1.1(@types/react@19.2.10)
+      '@mui/utils': 9.2.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@popperjs/core': 2.11.8
+      '@types/react-transition-group': 4.4.12(@types/react@19.2.10)
+      clsx: 2.1.1
+      csstype: 3.2.3
       prop-types: 15.8.1
       react: 0.0.0-experimental-58af67a8f8-20240628
       react-dom: 0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628)
-      react-is: 18.3.1
+      react-is: 19.2.7
       react-transition-group: 4.4.5(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
     optionalDependencies:
-      '@emotion/react': 11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@emotion/react': 11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
       '@types/react': 19.2.10
 
-  '@mui/private-theming@5.15.20(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)':
+  '@mui/private-theming@9.2.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)':
     dependencies:
-      '@babel/runtime': 7.26.7
-      '@mui/utils': 5.15.20(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@babel/runtime': 7.29.7
+      '@mui/utils': 9.2.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
       prop-types: 15.8.1
       react: 0.0.0-experimental-58af67a8f8-20240628
     optionalDependencies:
       '@types/react': 19.2.10
 
-  '@mui/styled-engine@5.15.14(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)':
+  '@mui/styled-engine@9.1.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)':
     dependencies:
-      '@babel/runtime': 7.26.7
-      '@emotion/cache': 11.11.0
-      csstype: 3.1.3
+      '@babel/runtime': 7.29.7
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/sheet': 1.4.0
+      csstype: 3.2.3
       prop-types: 15.8.1
       react: 0.0.0-experimental-58af67a8f8-20240628
     optionalDependencies:
-      '@emotion/react': 11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@emotion/react': 11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
 
-  '@mui/system@5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)':
+  '@mui/system@9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)':
     dependencies:
-      '@babel/runtime': 7.26.0
-      '@mui/private-theming': 5.15.20(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@mui/styled-engine': 5.15.14(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@mui/types': 7.2.14(@types/react@19.2.10)
-      '@mui/utils': 5.15.20(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      clsx: 2.1.0
-      csstype: 3.1.3
+      '@babel/runtime': 7.29.7
+      '@mui/private-theming': 9.2.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@mui/styled-engine': 9.1.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@mui/types': 9.1.1(@types/react@19.2.10)
+      '@mui/utils': 9.2.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      clsx: 2.1.1
+      csstype: 3.2.3
       prop-types: 15.8.1
       react: 0.0.0-experimental-58af67a8f8-20240628
     optionalDependencies:
-      '@emotion/react': 11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@emotion/react': 11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
       '@types/react': 19.2.10
 
-  '@mui/types@7.2.14(@types/react@19.2.10)':
+  '@mui/types@9.1.1(@types/react@19.2.10)':
+    dependencies:
+      '@babel/runtime': 7.29.7
     optionalDependencies:
       '@types/react': 19.2.10
 
-  '@mui/utils@5.15.20(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)':
+  '@mui/utils@9.2.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)':
     dependencies:
-      '@babel/runtime': 7.26.7
-      '@types/prop-types': 15.7.11
+      '@babel/runtime': 7.29.7
+      '@mui/types': 9.1.1(@types/react@19.2.10)
+      '@types/prop-types': 15.7.15
+      clsx: 2.1.1
       prop-types: 15.8.1
       react: 0.0.0-experimental-58af67a8f8-20240628
-      react-is: 18.3.1
+      react-is: 19.2.7
     optionalDependencies:
       '@types/react': 19.2.10
 
@@ -17472,7 +17438,7 @@ snapshots:
 
   '@types/parse-json@4.0.0': {}
 
-  '@types/prop-types@15.7.11': {}
+  '@types/prop-types@15.7.15': {}
 
   '@types/proper-lockfile@4.1.4':
     dependencies:
@@ -17507,7 +17473,7 @@ snapshots:
     dependencies:
       '@types/react': 19.2.10
 
-  '@types/react-transition-group@4.4.10':
+  '@types/react-transition-group@4.4.12(@types/react@19.2.10)':
     dependencies:
       '@types/react': 19.2.10
 
@@ -18612,7 +18578,7 @@ snapshots:
 
   acorn@7.4.1: {}
 
-  acorn@8.14.0: {}
+  acorn@8.15.0: {}
 
   acorn@8.17.0: {}
 
@@ -18820,7 +18786,7 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.29.7
       cosmiconfig: 7.1.0
-      resolve: 1.22.8
+      resolve: 1.22.10
 
   babel-plugin-polyfill-corejs2@0.3.3(@babel/core@7.27.1):
     dependencies:
@@ -19315,7 +19281,7 @@ snapshots:
 
   clsx@1.2.1: {}
 
-  clsx@2.1.0: {}
+  clsx@2.1.1: {}
 
   cluster-key-slot@1.1.2: {}
 
@@ -20036,7 +20002,7 @@ snapshots:
   dom-helpers@5.2.1:
     dependencies:
       '@babel/runtime': 7.29.7
-      csstype: 3.1.3
+      csstype: 3.2.3
 
   dom-serializer@1.4.1:
     dependencies:
@@ -21056,6 +21022,10 @@ snapshots:
     dependencies:
       sparkles: 2.1.0
 
+  goober@2.1.19(csstype@3.2.3):
+    dependencies:
+      csstype: 3.2.3
+
   gopd@1.0.1:
     dependencies:
       get-intrinsic: 1.2.4
@@ -21822,7 +21792,7 @@ snapshots:
   jsdom@20.0.0(bufferutil@4.0.8)(utf-8-validate@5.0.10):
     dependencies:
       abab: 2.0.6
-      acorn: 8.14.0
+      acorn: 8.17.0
       acorn-globals: 6.0.0
       cssom: 0.5.0
       cssstyle: 2.3.0
@@ -22865,16 +22835,13 @@ snapshots:
 
   normalize-path@3.0.0: {}
 
-  notistack@2.0.8(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628):
+  notistack@3.0.2(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628):
     dependencies:
-      '@mui/material': 5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
       clsx: 1.2.1
-      hoist-non-react-statics: 3.3.2
+      csstype: 3.2.3
+      goober: 2.1.19(csstype@3.2.3)
       react: 0.0.0-experimental-58af67a8f8-20240628
       react-dom: 0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628)
-    optionalDependencies:
-      '@emotion/react': 11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
 
   now-and-later@3.0.0:
     dependencies:
@@ -23636,6 +23603,8 @@ snapshots:
 
   react-is@18.3.1: {}
 
+  react-is@19.2.7: {}
+
   react-markdown@9.0.1(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628):
     dependencies:
       '@types/hast': 3.0.4
@@ -23678,7 +23647,7 @@ snapshots:
 
   react-transition-group@4.4.5(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628):
     dependencies:
-      '@babel/runtime': 7.26.7
+      '@babel/runtime': 7.29.7
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
@@ -24563,7 +24532,7 @@ snapshots:
   terser@5.36.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.14.0
+      acorn: 8.17.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
@@ -24702,15 +24671,16 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tss-react@4.9.13(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628):
+  tss-react@4.9.21(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@mui/material@9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628):
     dependencies:
-      '@emotion/cache': 11.11.0
-      '@emotion/react': 11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
-      '@emotion/serialize': 1.1.4
+      '@emotion/cache': 11.14.0
+      '@emotion/react': 11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@emotion/serialize': 1.3.3
       '@emotion/utils': 1.4.2
+      '@types/react': 19.2.10
       react: 0.0.0-experimental-58af67a8f8-20240628
     optionalDependencies:
-      '@mui/material': 5.15.20(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
+      '@mui/material': 9.2.0(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react@0.0.0-experimental-58af67a8f8-20240628))(@types/react@19.2.10)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
 
   tsyringe@4.10.0:
     dependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 0ab5af97f0e9..fbc2f3fcd228 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -26,6 +26,10 @@ overrides:
   '@emotion/react': $@emotion/react
   '@mui/icons-material': $@mui/icons-material
   '@mui/material': $@mui/material
+  '@mui/private-theming': $@mui/private-theming
+  '@mui/styled-engine': $@mui/styled-engine
+  '@mui/system': $@mui/system
+  '@mui/utils': $@mui/utils
   '@swc/core': $@swc/core
   '@splinetool/runtime': 0.9.342
   '@tanstack/react-query': ^5.49.2
@@ -36,6 +40,7 @@ overrides:
   glob-stream: 7.0.0
   react: $react
   react-dom: $react-dom
+  tss-react: 4.9.21
   reflect-metadata: 0.1.13
   # by @scamsniffer/detector
   ts-jest: '-'

From bdb230bd611160517134e5d3212fff8ef06b54d3 Mon Sep 17 00:00:00 2001
From: Jack Works <5390719+Jack-Works@users.noreply.github.com>
Date: Tue, 21 Jul 2026 00:00:00 +0000
Subject: [PATCH 02/15] chore: upgrade mui

---
 packages/icons/utils/index.js                 |  18 +-
 packages/icons/utils/internal.js              |   2 +-
 .../CompositionDialog/CompositionUI.tsx       |   5 +-
 .../components/PasswordField/index.tsx        |   8 +-
 .../Restore/RestoreFromPrivateKey.tsx         |   8 +-
 .../SetupPersona/Recovery/PrivateKey.tsx      |   8 +-
 .../components/AddContactInputPanel/index.tsx |  28 +--
 .../popups/components/PasswordField/index.tsx |  40 +++--
 .../popups/components/StyledInput/index.tsx   |  20 ++-
 .../popups/components/TokenPicker/index.tsx   |  16 +-
 .../popups/modals/AddContactModal/index.tsx   |  22 +--
 .../ChangePaymentPasswordModal/index.tsx      |   6 +-
 .../popups/modals/EditContactModal/index.tsx  |   2 +-
 .../Wallet/GasSetting/GasSetting1559.tsx      |  19 +-
 .../Wallet/GasSetting/Prior1559GasSetting.tsx |  15 +-
 .../popups/pages/Wallet/Receive/index.tsx     |   7 +-
 .../mask/popups/pages/Wallet/Unlock/index.tsx |   7 +-
 .../SiteAdaptor/components/FileBrowser.tsx    |  26 +--
 .../src/SiteAdaptor/components/SearchBox.tsx  |   6 +-
 .../trader/views/NetworkFee/index.tsx         |  30 ++--
 .../trader/views/SelectLiquidity.tsx          |  12 +-
 .../src/SiteAdaptor/trader/views/Slippage.tsx |   6 +-
 .../src/UI/components/ChainIcon/index.tsx     |   9 +-
 .../CompositionDialog/CompositionUI.tsx       |   7 +-
 .../UI/components/FungibleTokenList/index.tsx |  17 +-
 .../shared/src/UI/components/Icon/index.tsx   |  25 +--
 .../UI/components/SettingsBoard/GasForm.tsx   |  60 ++++---
 .../SettingsBoard/SlippageToleranceForm.tsx   |   6 +-
 .../UI/components/TokenAmountPanel/index.tsx  | 162 +++++++++---------
 .../UI/contexts/components/InjectedDialog.tsx |  10 +-
 .../SelectFungibleTokenDialog.tsx             |  13 +-
 .../theme/src/Components/Dialogs/Dialog.tsx   |   2 +-
 .../src/Components/Dialogs/DialogStack.tsx    |   3 +-
 .../SearchableList/SearchableList.tsx         |  34 ++--
 .../theme/src/Components/TextField/index.tsx  |  53 +++---
 .../WrappedComponents/ShadowRootPopper.ts     |   2 +-
 .../WrappedComponents/ShadowRootTooltip.ts    |   5 -
 .../WrappedComponents/ShadowRootTooltip.tsx   |  15 ++
 packages/theme/src/ShadowRoot/Portal.tsx      |  13 --
 packages/theme/src/ShadowRoot/index.ts        |   6 +-
 packages/theme/src/Theme/colors.ts            |  29 ++++
 .../theme/src/Theme/component-changes.tsx     |  17 ++
 packages/theme/src/extended.d.ts              |  34 +---
 43 files changed, 442 insertions(+), 391 deletions(-)
 delete mode 100644 packages/theme/src/Components/WrappedComponents/ShadowRootTooltip.ts
 create mode 100644 packages/theme/src/Components/WrappedComponents/ShadowRootTooltip.tsx

diff --git a/packages/icons/utils/index.js b/packages/icons/utils/index.js
index 1c60314f5fdb..c8764fe2a210 100644
--- a/packages/icons/utils/index.js
+++ b/packages/icons/utils/index.js
@@ -16,13 +16,23 @@ export function createIcon(name, svg, viewBox, defaultSize) {
     /** @type {import('react').ComponentType<import('@mui/material').SvgIconProps>} */ let Icon
     if (typeof svg === 'function') {
         Icon = ({ sx, ref, ...props }) => {
-            const style = defaultSize ? { width, height, ...sx } : sx
-            return React.createElement(SvgIcon, { viewBox, ...props, ref, sx: style }, svg(useTheme()))
+            const next_sx =
+                defaultSize ?
+                    Array.isArray(sx) ?
+                        [{ width, height }, ...sx]
+                    :   [{ width, height }, sx]
+                :   sx
+            return React.createElement(SvgIcon, { viewBox, ...props, ref, sx: next_sx }, svg(useTheme()))
         }
     } else {
         Icon = ({ sx, ref, ...props }) => {
-            const style = defaultSize ? { width, height, ...sx } : sx
-            return React.createElement(SvgIcon, { viewBox, ...props, ref, sx: style }, svg)
+            const next_sx =
+                defaultSize ?
+                    Array.isArray(sx) ?
+                        [{ width, height }, ...sx]
+                    :   [{ width, height }, sx]
+                :   sx
+            return React.createElement(SvgIcon, { viewBox, ...props, ref, sx: next_sx }, svg)
         }
     }
     Icon.displayName = `Icon (${name})`
diff --git a/packages/icons/utils/internal.js b/packages/icons/utils/internal.js
index f8c2dde5fca3..60f38c276f36 100644
--- a/packages/icons/utils/internal.js
+++ b/packages/icons/utils/internal.js
@@ -55,7 +55,7 @@ export function __createIcon(name, variants, intrinsicSize = [24, 24]) {
             ...rest,
             ref,
             'data-icon': name,
-            sx: { ...iconStyle, ...sx },
+            sx: Array.isArray(sx) ? [iconStyle, ...sx] : [iconStyle, sx],
             // To align icon center.
             fontSize: 0,
         }
diff --git a/packages/mask/content-script/components/CompositionDialog/CompositionUI.tsx b/packages/mask/content-script/components/CompositionDialog/CompositionUI.tsx
index a8e4ae5f0b9b..a86e7ad22097 100644
--- a/packages/mask/content-script/components/CompositionDialog/CompositionUI.tsx
+++ b/packages/mask/content-script/components/CompositionDialog/CompositionUI.tsx
@@ -8,7 +8,6 @@ import {
     useRef,
     useState,
 } from 'react'
-import { LoadingButton } from '@mui/lab'
 import { Button, DialogActions, Typography, alpha } from '@mui/material'
 import type { EncryptTargetPublic } from '@masknet/encryption'
 import { Icons } from '@masknet/icons'
@@ -297,7 +296,7 @@ export function CompositionDialogUI({ ref, ...props }: CompositionProps) {
                             <Trans>Enable auto paste</Trans>
                         </Button>
                     :   null}
-                    <LoadingButton
+                    <Button
                         style={{ opacity: 1 }}
                         disabled={!submitAvailable}
                         loading={sending}
@@ -306,7 +305,7 @@ export function CompositionDialogUI({ ref, ...props }: CompositionProps) {
                         onClick={onSubmit}
                         startIcon={<Icons.Send className={classes.icon} />}>
                         <Trans>Encrypt</Trans>
-                    </LoadingButton>
+                    </Button>
                 </div>
             </DialogActions>
         </CompositionContext>
diff --git a/packages/mask/dashboard/components/PasswordField/index.tsx b/packages/mask/dashboard/components/PasswordField/index.tsx
index 1f4c575acc7e..3e431a8d81b2 100644
--- a/packages/mask/dashboard/components/PasswordField/index.tsx
+++ b/packages/mask/dashboard/components/PasswordField/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import type { MaskTextFieldProps } from '@masknet/theme'
-import { IconButton, InputAdornment, TextField } from '@mui/material'
+import { IconButton, InputAdornment, mergeSlotProps, TextField } from '@mui/material'
 import { Icons } from '@masknet/icons'
 
 interface PasswordFieldProps extends Exclude<MaskTextFieldProps, 'type'> {
@@ -16,8 +16,8 @@ export default function PasswordField({ show = true, ...props }: PasswordFieldPr
             type={showPassword ? 'text' : 'password'}
             size="medium"
             slotProps={{
-                input: {
-                    ...props.InputProps,
+                ...props.slotProps,
+                input: mergeSlotProps(props.slotProps?.input, {
                     size: 'medium',
                     disableUnderline: true,
                     endAdornment:
@@ -35,7 +35,7 @@ export default function PasswordField({ show = true, ...props }: PasswordFieldPr
                                 </IconButton>
                             </InputAdornment>
                         :   null,
-                },
+                }),
             }}
         />
     )
diff --git a/packages/mask/dashboard/components/Restore/RestoreFromPrivateKey.tsx b/packages/mask/dashboard/components/Restore/RestoreFromPrivateKey.tsx
index b6b1a804958d..b2acbde192ac 100644
--- a/packages/mask/dashboard/components/Restore/RestoreFromPrivateKey.tsx
+++ b/packages/mask/dashboard/components/Restore/RestoreFromPrivateKey.tsx
@@ -77,9 +77,11 @@ export const RestoreFromPrivateKey = memo(function RestoreFromPrivateKey({
                     <PasswordField
                         {...field}
                         autoFocus
-                        InputProps={{
-                            className: classes.input,
-                            disableUnderline: true,
+                        slotProps={{
+                            input: {
+                                className: classes.input,
+                                disableUnderline: true,
+                            },
                         }}
                         autoComplete="off"
                         multiline={multiline}
diff --git a/packages/mask/dashboard/pages/SetupPersona/Recovery/PrivateKey.tsx b/packages/mask/dashboard/pages/SetupPersona/Recovery/PrivateKey.tsx
index 44ed8a1c5515..49c3c9d8f042 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Recovery/PrivateKey.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Recovery/PrivateKey.tsx
@@ -82,9 +82,11 @@ export const Component = memo(function RecoveryPrivateKey() {
                     <PasswordField
                         {...field}
                         autoFocus
-                        InputProps={{
-                            className: classes.input,
-                            disableUnderline: true,
+                        slotProps={{
+                            input: {
+                                className: classes.input,
+                                disableUnderline: true,
+                            },
                         }}
                         autoComplete="off"
                         sx={{ width: '100%' }}
diff --git a/packages/mask/popups/components/AddContactInputPanel/index.tsx b/packages/mask/popups/components/AddContactInputPanel/index.tsx
index 8f34007ecb71..972513539166 100644
--- a/packages/mask/popups/components/AddContactInputPanel/index.tsx
+++ b/packages/mask/popups/components/AddContactInputPanel/index.tsx
@@ -123,20 +123,22 @@ const AddContactInputPanel = memo(function AddContactInputPanel({ isManage, auto
                     placeholder={t`Ens or Address(0x)`}
                     value={userInput}
                     onChange={(ev) => setUserInput(ev.target.value)}
-                    wrapperProps={{ className: classes.input }}
+                    className={classes.input}
                     autoFocus={autoFocus}
-                    InputProps={{
-                        spellCheck: false,
-                        endAdornment:
-                            addable ?
-                                <div className={classes.endAdornment} onClick={openAddContactModal}>
-                                    <Typography className={classes.save}>
-                                        <Trans>Save</Trans>
-                                    </Typography>
-                                    <Icons.AddUser size={18} color={theme.palette.maskColor.main} />
-                                </div>
-                            :   undefined,
-                        classes: { input: classes.inputText },
+                    slotProps={{
+                        input: {
+                            spellCheck: false,
+                            endAdornment:
+                                addable ?
+                                    <div className={classes.endAdornment} onClick={openAddContactModal}>
+                                        <Typography className={classes.save}>
+                                            <Trans>Save</Trans>
+                                        </Typography>
+                                        <Icons.AddUser size={18} color={theme.palette.maskColor.main} />
+                                    </div>
+                                :   undefined,
+                            classes: { input: classes.inputText },
+                        },
                     }}
                 />
                 {inputWarningMessage && !addressValidationMessage ?
diff --git a/packages/mask/popups/components/PasswordField/index.tsx b/packages/mask/popups/components/PasswordField/index.tsx
index 43aa18d23d64..5f0405d5f8ad 100644
--- a/packages/mask/popups/components/PasswordField/index.tsx
+++ b/packages/mask/popups/components/PasswordField/index.tsx
@@ -1,5 +1,5 @@
 import { memo, useState } from 'react'
-import { IconButton, InputAdornment } from '@mui/material'
+import { IconButton, InputAdornment, mergeSlotProps } from '@mui/material'
 import { StyledInput, type StyledInputProps } from '../StyledInput/index.js'
 import { Icons } from '@masknet/icons'
 
@@ -13,24 +13,26 @@ export const PasswordField = memo(function PasswordField({
             {...rest}
             type={showPassword ? 'text' : 'password'}
             autoComplete="off"
-            InputProps={{
-                ...rest.InputProps,
-                endAdornment: (
-                    <InputAdornment position="end">
-                        {show ?
-                            <IconButton
-                                aria-label="toggle password visibility"
-                                onClick={() => setShowPassword(!showPassword)}
-                                onMouseDown={(event) => event.preventDefault()}
-                                edge="end"
-                                size="small">
-                                {showPassword ?
-                                    <Icons.EyeOff />
-                                :   <Icons.Eye />}
-                            </IconButton>
-                        :   undefined}
-                    </InputAdornment>
-                ),
+            slotProps={{
+                ...rest.slotProps,
+                input: mergeSlotProps(rest.slotProps?.input, {
+                    endAdornment: (
+                        <InputAdornment position="end">
+                            {show ?
+                                <IconButton
+                                    aria-label="toggle password visibility"
+                                    onClick={() => setShowPassword(!showPassword)}
+                                    onMouseDown={(event) => event.preventDefault()}
+                                    edge="end"
+                                    size="small">
+                                    {showPassword ?
+                                        <Icons.EyeOff />
+                                    :   <Icons.Eye />}
+                                </IconButton>
+                            :   undefined}
+                        </InputAdornment>
+                    ),
+                }),
             }}
         />
     )
diff --git a/packages/mask/popups/components/StyledInput/index.tsx b/packages/mask/popups/components/StyledInput/index.tsx
index f78ad4a4a752..bcee658d54fd 100644
--- a/packages/mask/popups/components/StyledInput/index.tsx
+++ b/packages/mask/popups/components/StyledInput/index.tsx
@@ -1,7 +1,13 @@
 import { memo, type RefAttributes } from 'react'
-import { TextField, type TextFieldProps } from '@mui/material'
+import { mergeSlotProps, TextField, type TextFieldProps } from '@mui/material'
 
-export const StyledInput = memo(function StyledInput({ ref, ...props }: TextFieldProps & RefAttributes<unknown>) {
+export type StyledInputProps = TextFieldProps
+
+export const StyledInput = memo(function StyledInput({
+    ref,
+    slotProps,
+    ...props
+}: TextFieldProps & RefAttributes<unknown>) {
     return (
         <TextField
             {...props}
@@ -9,12 +15,12 @@ export const StyledInput = memo(function StyledInput({ ref, ...props }: TextFiel
             inputRef={ref}
             variant="standard"
             autoComplete="off"
-            inputProps={{ 'aria-autocomplete': 'none', ...props.inputProps }}
-            InputProps={{
-                ...props.InputProps,
-                disableUnderline: true,
+            slotProps={{
+                ...slotProps,
+                htmlInput: mergeSlotProps(slotProps?.htmlInput, { 'aria-autocomplete': 'none' }),
+                input: mergeSlotProps(slotProps?.input, { disableUnderline: true }),
+                formHelperText: mergeSlotProps(slotProps?.formHelperText, { style: { marginTop: 12 } }),
             }}
-            FormHelperTextProps={{ ...props.FormHelperTextProps, style: { marginTop: 12 } }}
         />
     )
 })
diff --git a/packages/mask/popups/components/TokenPicker/index.tsx b/packages/mask/popups/components/TokenPicker/index.tsx
index 2522c84472e7..f884a344b6c7 100644
--- a/packages/mask/popups/components/TokenPicker/index.tsx
+++ b/packages/mask/popups/components/TokenPicker/index.tsx
@@ -218,14 +218,14 @@ export const TokenPicker = memo(function TokenPicker({
                     placeholder={t`Name or Contract address e.g. USDC or 0x234...`}
                     autoFocus
                     fullWidth
-                    wrapperProps={{
-                        sx: { padding: '2px' },
-                    }}
-                    InputProps={{
-                        style: { height: 40 },
-                        inputProps: { style: { paddingLeft: 4 } },
-                        startAdornment: <Icons.Search size={18} />,
-                        endAdornment: keyword ? <Icons.Close size={18} onClick={() => setKeyword('')} /> : null,
+                    sx={{ padding: '2px' }}
+                    slotProps={{
+                        input: {
+                            style: { height: 40 },
+                            startAdornment: <Icons.Search size={18} />,
+                            endAdornment: keyword ? <Icons.Close size={18} onClick={() => setKeyword('')} /> : null,
+                        },
+                        htmlInput: { style: { paddingLeft: 4 } },
                     }}
                     onChange={(e) => {
                         setKeyword(e.target.value)
diff --git a/packages/mask/popups/modals/AddContactModal/index.tsx b/packages/mask/popups/modals/AddContactModal/index.tsx
index 98cc3e22356b..65ed39986697 100644
--- a/packages/mask/popups/modals/AddContactModal/index.tsx
+++ b/packages/mask/popups/modals/AddContactModal/index.tsx
@@ -110,19 +110,21 @@ function AddContactDrawer({ onConfirm, address, name, setName, setAddress, ...re
             <MaskTextField
                 spellCheck={false}
                 placeholder={t`Address`}
-                wrapperProps={{ className: classes.input }}
+                className={classes.input}
                 value={address}
                 onChange={(ev) => setAddress(ev.target.value)}
                 error={addressError || addressExistError}
-                InputProps={{
-                    endAdornment:
-                        addressError || addressExistError ?
-                            <InputAdornment position="end">
-                                <IconButton onClick={() => setAddress('')} edge="end" size="small">
-                                    <Icons.Close size={18} color={theme.palette.maskColor.danger} />
-                                </IconButton>
-                            </InputAdornment>
-                        :   null,
+                slotProps={{
+                    input: {
+                        endAdornment:
+                            addressError || addressExistError ?
+                                <InputAdornment position="end">
+                                    <IconButton onClick={() => setAddress('')} edge="end" size="small">
+                                        <Icons.Close size={18} color={theme.palette.maskColor.danger} />
+                                    </IconButton>
+                                </InputAdornment>
+                            :   null,
+                    },
                 }}
             />
             {validationMessage ?
diff --git a/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx b/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
index 92805e18c7c2..03918f9b0069 100644
--- a/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
@@ -99,7 +99,7 @@ function ChangePaymentPasswordDrawer({
                         setOriginalPasswordWrong('')
                         setPasswordTooShort('')
                     }}
-                    InputProps={inputProps}
+                    slotProps={{ input: inputProps }}
                 />
                 <PasswordField
                     sx={{ mt: 2 }}
@@ -112,7 +112,7 @@ function ChangePaymentPasswordDrawer({
                         setPasswordNotMatch('')
                         setPasswordTooShort('')
                     }}
-                    InputProps={inputProps}
+                    slotProps={{ input: inputProps }}
                 />
                 <PasswordField
                     sx={{ mt: 2 }}
@@ -125,7 +125,7 @@ function ChangePaymentPasswordDrawer({
                         setPasswordNotMatch('')
                         setPasswordTooShort('')
                     }}
-                    InputProps={inputProps}
+                    slotProps={{ input: inputProps }}
                 />
             </Box>
             <Typography color={theme.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1.5, height: 32 }}>
diff --git a/packages/mask/popups/modals/EditContactModal/index.tsx b/packages/mask/popups/modals/EditContactModal/index.tsx
index 5efe803bfdb4..a7221063b9d7 100644
--- a/packages/mask/popups/modals/EditContactModal/index.tsx
+++ b/packages/mask/popups/modals/EditContactModal/index.tsx
@@ -131,7 +131,7 @@ function EditContactDrawer({ onConfirm, address, name, setName, type, ...rest }:
                 <MaskTextField
                     variant="standard"
                     autoFocus
-                    inputProps={{ style: { textAlign: 'center' } }}
+                    slotProps={{ htmlInput: { style: { textAlign: 'center' } } }}
                     classes={{ root: classes.inputRoot }}
                     spellCheck={false}
                     placeholder={t`Name`}
diff --git a/packages/mask/popups/pages/Wallet/GasSetting/GasSetting1559.tsx b/packages/mask/popups/pages/Wallet/GasSetting/GasSetting1559.tsx
index 90de15ca6ecc..f6fcca8b170b 100644
--- a/packages/mask/popups/pages/Wallet/GasSetting/GasSetting1559.tsx
+++ b/packages/mask/popups/pages/Wallet/GasSetting/GasSetting1559.tsx
@@ -8,8 +8,7 @@ import { BigNumber } from 'bignumber.js'
 import { makeStyles } from '@masknet/theme'
 import { formatGweiToEther, formatGweiToWei, formatWeiToEther, formatWeiToGwei } from '@masknet/web3-shared-evm'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Typography } from '@mui/material'
-import { LoadingButton } from '@mui/lab'
+import { Typography, Button } from '@mui/material'
 import { NetworkPluginID, PopupRoutes, NUMERIC_INPUT_REGEXP_PATTERN, toHex } from '@masknet/shared-base'
 import {
     formatCurrency,
@@ -385,8 +384,8 @@ export const GasSetting1559 = memo(() => {
                                 }}
                                 error={!!errors.gasLimit?.message}
                                 helperText={errors.gasLimit?.message}
-                                InputProps={{
-                                    inputProps: {
+                                slotProps={{
+                                    htmlInput: {
                                         pattern: NUMERIC_INPUT_REGEXP_PATTERN,
                                     },
                                 }}
@@ -421,8 +420,8 @@ export const GasSetting1559 = memo(() => {
                             }}
                             error={!!errors.maxPriorityFeePerGas?.message || !!maxPriorFeeHelperText}
                             helperText={errors.maxPriorityFeePerGas?.message || maxPriorFeeHelperText}
-                            InputProps={{
-                                inputProps: {
+                            slotProps={{
+                                htmlInput: {
                                     pattern: NUMERIC_INPUT_REGEXP_PATTERN,
                                 },
                             }}
@@ -454,8 +453,8 @@ export const GasSetting1559 = memo(() => {
                             }}
                             error={!!errors.maxFeePerGas?.message || !!maxFeeGasHelperText}
                             helperText={errors.maxFeePerGas?.message || maxFeeGasHelperText}
-                            InputProps={{
-                                inputProps: {
+                            slotProps={{
+                                htmlInput: {
                                     pattern: NUMERIC_INPUT_REGEXP_PATTERN,
                                 },
                             }}
@@ -464,7 +463,7 @@ export const GasSetting1559 = memo(() => {
                     name="maxFeePerGas"
                 />
             </form>
-            <LoadingButton
+            <Button
                 loading={loading}
                 variant="contained"
                 fullWidth
@@ -472,7 +471,7 @@ export const GasSetting1559 = memo(() => {
                 disabled={!isEmpty(errors)}
                 onClick={onSubmit}>
                 <Trans>Confirm</Trans>
-            </LoadingButton>
+            </Button>
         </>
     )
 })
diff --git a/packages/mask/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx b/packages/mask/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx
index e2452148d401..a060a6892fe7 100644
--- a/packages/mask/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx
+++ b/packages/mask/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx
@@ -7,8 +7,7 @@ import { isEmpty } from 'lodash-es'
 import { z as zod } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { NetworkPluginID, NUMERIC_INPUT_REGEXP_PATTERN, PopupRoutes, toHex } from '@masknet/shared-base'
-import { Typography } from '@mui/material'
-import { LoadingButton } from '@mui/lab'
+import { Typography, Button } from '@mui/material'
 import { useChainContext, useGasOptions, useNativeToken, useNativeTokenPrice } from '@masknet/web3-hooks-base'
 import {
     ChainId,
@@ -290,8 +289,8 @@ export const Prior1559GasSetting = memo(() => {
                                 }}
                                 error={!!errors.gasLimit?.message}
                                 helperText={errors.gasLimit?.message}
-                                InputProps={{
-                                    inputProps: {
+                                slotProps={{
+                                    htmlInput: {
                                         pattern: NUMERIC_INPUT_REGEXP_PATTERN,
                                     },
                                 }}
@@ -314,8 +313,8 @@ export const Prior1559GasSetting = memo(() => {
                             }}
                             error={!!errors.gasPrice?.message}
                             helperText={errors.gasPrice?.message}
-                            InputProps={{
-                                inputProps: {
+                            slotProps={{
+                                htmlInput: {
                                     pattern: NUMERIC_INPUT_REGEXP_PATTERN,
                                 },
                             }}
@@ -324,7 +323,7 @@ export const Prior1559GasSetting = memo(() => {
                     name="gasPrice"
                 />
             </form>
-            <LoadingButton
+            <Button
                 loading={loading}
                 variant="contained"
                 fullWidth
@@ -332,7 +331,7 @@ export const Prior1559GasSetting = memo(() => {
                 disabled={!isEmpty(errors)}
                 onClick={onSubmit}>
                 <Trans>Confirm</Trans>
-            </LoadingButton>
+            </Button>
         </>
     )
 })
diff --git a/packages/mask/popups/pages/Wallet/Receive/index.tsx b/packages/mask/popups/pages/Wallet/Receive/index.tsx
index 87f971f40aca..db7bc8b02adb 100644
--- a/packages/mask/popups/pages/Wallet/Receive/index.tsx
+++ b/packages/mask/popups/pages/Wallet/Receive/index.tsx
@@ -4,7 +4,7 @@ import { NetworkPluginID } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { useChainContext, useNetworks } from '@masknet/web3-hooks-base'
 import { formatEthereumAddress, type ChainId } from '@masknet/web3-shared-evm'
-import { Box, Skeleton, Typography, type AvatarProps } from '@mui/material'
+import { Box, Skeleton, Typography } from '@mui/material'
 import { memo } from 'react'
 import { QRCode } from 'react-qrcode-logo'
 import { useTitle, useTokenParams } from '../../../hooks/index.js'
@@ -109,9 +109,6 @@ const useStyles = makeStyles()((theme) => {
     }
 })
 
-const avatarProps: AvatarProps = {
-    sx: { fontSize: 26 },
-}
 export const Component = memo(function Receive() {
     const { t } = useLingui()
     const { classes } = useStyles()
@@ -131,7 +128,7 @@ export const Component = memo(function Receive() {
         isChain ?
             currentNetwork?.iconUrl ?
                 <ImageIcon size={60} icon={currentNetwork.iconUrl} name={currentNetwork.name} />
-            :   <Icon size={60} name={currentNetwork?.name} color={currentNetwork?.color} {...avatarProps} />
+            :   <Icon size={60} name={currentNetwork?.name} color={currentNetwork?.color} sx={{ fontSize: 26 }} />
         :   <TokenIcon
                 chainId={chainId as ChainId}
                 address={address}
diff --git a/packages/mask/popups/pages/Wallet/Unlock/index.tsx b/packages/mask/popups/pages/Wallet/Unlock/index.tsx
index 885e3064267c..3b055059dcdd 100644
--- a/packages/mask/popups/pages/Wallet/Unlock/index.tsx
+++ b/packages/mask/popups/pages/Wallet/Unlock/index.tsx
@@ -2,8 +2,7 @@ import urlcat from 'urlcat'
 import { memo, useCallback, useState } from 'react'
 import { useAsyncFn } from 'react-use'
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import { LoadingButton } from '@mui/lab'
-import { Box, Typography, useTheme } from '@mui/material'
+import { Box, Button, Typography, useTheme } from '@mui/material'
 import { PopupRoutes } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import Services from '#services'
@@ -105,14 +104,14 @@ const Unlock = memo(function Unlock() {
                     :   null}
                 </Box>
 
-                <LoadingButton
+                <Button
                     loading={loading}
                     fullWidth
                     variant="contained"
                     disabled={!password || loading}
                     onClick={handleUnlock}>
                     <Trans>Unlock</Trans>
-                </LoadingButton>
+                </Button>
 
                 <Typography
                     color={theme.palette.maskColor.main}
diff --git a/packages/plugins/FileService/src/SiteAdaptor/components/FileBrowser.tsx b/packages/plugins/FileService/src/SiteAdaptor/components/FileBrowser.tsx
index 9d645edead9e..b681fa806171 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/components/FileBrowser.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/components/FileBrowser.tsx
@@ -194,23 +194,25 @@ export function FileBrowser({ selectMode, selectedFileIds = EMPTY_LIST }: Props)
             {searching ?
                 <div className={classes.header}>
                     <MaskTextField
-                        wrapperProps={{ className: classes.searchInput }}
+                        className={classes.searchInput}
                         placeholder="Search my files"
                         value={input}
                         autoFocus
                         fullWidth
-                        InputProps={{
-                            style: { height: 40 },
-                            inputProps: { style: { paddingLeft: 4 } },
-                            startAdornment: <Icons.Search size={18} />,
-                            endAdornment: input ? <Icons.Close size={18} onClick={() => setInput('')} /> : null,
-                            onKeyDown: (event) => {
-                                if (event.code !== 'Enter') return
-                                setKeyword(event.currentTarget.value)
-                            },
-                            onBlur: (event) => {
-                                setKeyword(event.currentTarget.value)
+                        slotProps={{
+                            input: {
+                                style: { height: 40 },
+                                startAdornment: <Icons.Search size={18} />,
+                                endAdornment: input ? <Icons.Close size={18} onClick={() => setInput('')} /> : null,
+                                onKeyDown: (event) => {
+                                    if (event.code !== 'Enter') return
+                                    setKeyword(event.currentTarget.value)
+                                },
+                                onBlur: (event) => {
+                                    setKeyword(event.currentTarget.value)
+                                },
                             },
+                            htmlInput: { style: { paddingLeft: 4 } },
                         }}
                         onChange={(event) => {
                             setInput(event.currentTarget.value)
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SearchBox.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SearchBox.tsx
index 72e612fdab99..ba804f08b2d4 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SearchBox.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SearchBox.tsx
@@ -124,8 +124,10 @@ export const SearchBox = memo<SearchBoxProps>(function SearchBox({ onSearch }) {
                             onSearch(selectedChain?.chainId ?? DEFAULT_SEARCH_CHAIN, searchContent ?? '')
                         }}
                         onChange={(e) => setSearchSearchContent(e.target.value)}
-                        InputProps={{
-                            classes: { root: classes.search },
+                        slotProps={{
+                            input: {
+                                classes: { root: classes.search },
+                            },
                         }}
                     />
                 </Box>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/NetworkFee/index.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/NetworkFee/index.tsx
index 68fad17ed553..b22c0cfd83b7 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/NetworkFee/index.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/NetworkFee/index.tsx
@@ -394,10 +394,12 @@ export const NetworkFee = memo(function NetworkFee() {
                                                         setValue('baseFee', value)
                                                         field.onChange(e)
                                                     }}
-                                                    InputProps={{
-                                                        endAdornment: (
-                                                            <Typography className={classes.gwei}>Gwei</Typography>
-                                                        ),
+                                                    slotProps={{
+                                                        input: {
+                                                            endAdornment: (
+                                                                <Typography className={classes.gwei}>Gwei</Typography>
+                                                            ),
+                                                        },
                                                     }}
                                                 />
                                                 {fieldState.error ?
@@ -430,10 +432,12 @@ export const NetworkFee = memo(function NetworkFee() {
                                                         setValue('priorityFee', value)
                                                         field.onChange(e)
                                                     }}
-                                                    InputProps={{
-                                                        endAdornment: (
-                                                            <Typography className={classes.gwei}>Gwei</Typography>
-                                                        ),
+                                                    slotProps={{
+                                                        input: {
+                                                            endAdornment: (
+                                                                <Typography className={classes.gwei}>Gwei</Typography>
+                                                            ),
+                                                        },
                                                     }}
                                                 />
                                                 {fieldState.error ?
@@ -469,10 +473,12 @@ export const NetworkFee = memo(function NetworkFee() {
                                                         setValue('gasPrice', value)
                                                         field.onChange(e)
                                                     }}
-                                                    InputProps={{
-                                                        endAdornment: (
-                                                            <Typography className={classes.gwei}>Gwei</Typography>
-                                                        ),
+                                                    slotProps={{
+                                                        input: {
+                                                            endAdornment: (
+                                                                <Typography className={classes.gwei}>Gwei</Typography>
+                                                            ),
+                                                        },
                                                     }}
                                                 />
                                                 {fieldState.error ?
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/SelectLiquidity.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/SelectLiquidity.tsx
index 7eb48304b396..23749299fa0c 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/SelectLiquidity.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/SelectLiquidity.tsx
@@ -142,11 +142,13 @@ export const SelectLiquidity = memo(function SelectLiquidity() {
                     placeholder="Search"
                     autoFocus
                     fullWidth
-                    InputProps={{
-                        style: { height: 40 },
-                        inputProps: { style: { paddingLeft: 4 } },
-                        startAdornment: <Icons.Search size={18} />,
-                        endAdornment: keyword ? <Icons.Close size={18} onClick={handleClear} /> : null,
+                    slotProps={{
+                        input: {
+                            style: { height: 40 },
+                            startAdornment: <Icons.Search size={18} />,
+                            endAdornment: keyword ? <Icons.Close size={18} onClick={handleClear} /> : null,
+                        },
+                        htmlInput: { style: { paddingLeft: 4 } },
                     }}
                     onChange={(e) => {
                         setKeyword(e.currentTarget.value)
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Slippage.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Slippage.tsx
index 22ee6c39f3cc..dbda108c3e1f 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Slippage.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Slippage.tsx
@@ -143,12 +143,12 @@ export const Slippage = memo(function Slippage() {
                             placeholder="0.1-50"
                             type="number"
                             inputRef={inputRef}
-                            InputProps={{
-                                inputProps: {
+                            slotProps={{
+                                htmlInput: {
                                     min: 0.1,
                                     max: 50,
                                 },
-                                endAdornment: <Typography>%</Typography>,
+                                input: { endAdornment: <Typography>%</Typography> },
                             }}
                             value={pendingSlippage}
                             onChange={(e) => {
diff --git a/packages/shared/src/UI/components/ChainIcon/index.tsx b/packages/shared/src/UI/components/ChainIcon/index.tsx
index a2c907720546..13c32cc8eaa2 100644
--- a/packages/shared/src/UI/components/ChainIcon/index.tsx
+++ b/packages/shared/src/UI/components/ChainIcon/index.tsx
@@ -3,6 +3,11 @@ import { Icon, type IconProps } from '../Icon/index.js'
 
 export interface ChainIconProps extends IconProps {}
 export const ChainIcon = memo<ChainIconProps>(function ChainIcon({ ...rest }) {
-    // eslint-disable-next-line @typescript-eslint/no-misused-spread
-    return <Icon {...rest} sx={{ fontSize: 12, fontWeight: 'bold', ...rest.sx }} size={rest.size ?? 12.5} />
+    return (
+        <Icon
+            {...rest}
+            sx={[{ fontSize: 12, fontWeight: 'bold' }, ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx])]}
+            size={rest.size ?? 12.5}
+        />
+    )
 })
diff --git a/packages/shared/src/UI/components/CompositionDialog/CompositionUI.tsx b/packages/shared/src/UI/components/CompositionDialog/CompositionUI.tsx
index c52a17b2f62a..69353d14d9c6 100644
--- a/packages/shared/src/UI/components/CompositionDialog/CompositionUI.tsx
+++ b/packages/shared/src/UI/components/CompositionDialog/CompositionUI.tsx
@@ -3,8 +3,7 @@ import { Icons } from '@masknet/icons'
 import { CompositionContext } from '@masknet/plugin-infra/content-script'
 import { makeStyles } from '@masknet/theme'
 import type { SerializableTypedMessages, TypedMessage } from '@masknet/typed-message'
-import { LoadingButton } from '@mui/lab'
-import { DialogActions, Typography, alpha } from '@mui/material'
+import { Button, DialogActions, Typography, alpha } from '@mui/material'
 import { CharLimitIndicator } from './CharLimitIndicator.js'
 import { PluginEntryRender, type PluginEntryRenderRef } from './PluginEntryRender.js'
 import { TypedMessageEditor, type TypedMessageEditorRef } from './TypedMessageEditor.js'
@@ -152,7 +151,7 @@ export function CompositionDialogUI(props: CompositionProps) {
                     {props.maxLength ?
                         <CharLimitIndicator value={currentPostSize} max={props.maxLength} />
                     :   null}
-                    <LoadingButton
+                    <Button
                         style={{ opacity: 1 }}
                         disabled={!submitAvailable}
                         loading={sending}
@@ -161,7 +160,7 @@ export function CompositionDialogUI(props: CompositionProps) {
                         onClick={onSubmit}
                         startIcon={<Icons.Send className={classes.icon} />}>
                         <Trans>Encrypt</Trans>
-                    </LoadingButton>
+                    </Button>
                 </div>
             </DialogActions>
         </CompositionContext>
diff --git a/packages/shared/src/UI/components/FungibleTokenList/index.tsx b/packages/shared/src/UI/components/FungibleTokenList/index.tsx
index fc04e1b3f440..63223dcb8621 100644
--- a/packages/shared/src/UI/components/FungibleTokenList/index.tsx
+++ b/packages/shared/src/UI/components/FungibleTokenList/index.tsx
@@ -339,16 +339,6 @@ export function FungibleTokenList<T extends NetworkPluginID>(props: FungibleToke
         isHiddenChainIcon,
         enabled,
     ])
-    const SearchFieldProps = useMemo(
-        () => ({
-            placeholder: t`Name or Contract address e.g. USDC or 0x234...`,
-            helperText: searchError,
-            error: !!searchError,
-            ...props.SearchTextFieldProps,
-        }),
-        // eslint-disable-next-line react-compiler/react-compiler
-        [searchError, JSON.stringify(props.SearchTextFieldProps)],
-    )
 
     const [, startTransition] = useTransition()
 
@@ -393,7 +383,12 @@ export function FungibleTokenList<T extends NetworkPluginID>(props: FungibleToke
             itemKey="address"
             itemRender={itemRender}
             FixedSizeListProps={FixedSizeListProps}
-            SearchFieldProps={SearchFieldProps}
+            SearchFieldProps={{
+                placeholder: t`Name or Contract address e.g. USDC or 0x234...`,
+                helperText: searchError,
+                error: !!searchError,
+                ...props.SearchTextFieldProps,
+            }}
         />
     )
 }
diff --git a/packages/shared/src/UI/components/Icon/index.tsx b/packages/shared/src/UI/components/Icon/index.tsx
index 670c01920eca..e29a69e279a5 100644
--- a/packages/shared/src/UI/components/Icon/index.tsx
+++ b/packages/shared/src/UI/components/Icon/index.tsx
@@ -15,7 +15,7 @@ const useStyles = makeStyles<Pick<IconProps, 'size'>>()((theme, { size }) => ({
     },
 }))
 
-export interface IconProps extends AvatarProps {
+export interface IconProps extends Omit<AvatarProps, 'slotProps'> {
     color?: string
     size?: number | string
     name?: string
@@ -38,19 +38,20 @@ export const Icon = memo<IconProps>(function Icon(props) {
             className={cx(classes.icon, className)}
             src={logoURL}
             {...rest}
-            imgProps={{
-                onError: (event) => {
-                    setFailed(true)
-                    rest.imgProps?.onError?.(event)
+            slotProps={{
+                img: {
+                    onError: () => {
+                        setFailed(true)
+                    },
                 },
-                ...rest.imgProps,
             }}
-            sx={{
-                // eslint-disable-next-line @typescript-eslint/no-misused-spread
-                ...rest.sx,
-                backgroundImage: showImage ? undefined : `url("${defaultBackgroundImage}")`,
-                backgroundColor: showImage ? (color ?? theme.palette.common.white) : undefined,
-            }}>
+            sx={[
+                ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
+                {
+                    backgroundImage: showImage ? undefined : `url("${defaultBackgroundImage}")`,
+                    backgroundColor: showImage ? (color ?? theme.palette.common.white) : undefined,
+                },
+            ]}>
             {label ?? name?.slice(0, 1).toUpperCase() ?? '?'}
         </Avatar>
     )
diff --git a/packages/shared/src/UI/components/SettingsBoard/GasForm.tsx b/packages/shared/src/UI/components/SettingsBoard/GasForm.tsx
index 35f2197ad1ff..b5b66bb23c17 100644
--- a/packages/shared/src/UI/components/SettingsBoard/GasForm.tsx
+++ b/packages/shared/src/UI/components/SettingsBoard/GasForm.tsx
@@ -183,16 +183,18 @@ export function GasForm(props: GasFormProps) {
                             render={({ field }) => (
                                 <MaskTextField
                                     {...field}
-                                    InputProps={{
-                                        inputProps: {
+                                    slotProps={{
+                                        htmlInput: {
                                             pattern: NUMERIC_INPUT_REGEXP_PATTERN,
                                         },
-                                        type: 'number',
-                                        endAdornment: (
-                                            <Typography className={classes.unit}>
-                                                <Trans>Gwei</Trans>
-                                            </Typography>
-                                        ),
+                                        input: {
+                                            type: 'number',
+                                            endAdornment: (
+                                                <Typography className={classes.unit}>
+                                                    <Trans>Gwei</Trans>
+                                                </Typography>
+                                            ),
+                                        },
                                     }}
                                     value={isZero(gasPriceByUser ?? 0) ? gasPrice : gasPriceByUser}
                                     label={
@@ -218,11 +220,11 @@ export function GasForm(props: GasFormProps) {
                         render={({ field }) => (
                             <MaskTextField
                                 {...field}
-                                InputProps={{
-                                    inputProps: {
+                                slotProps={{
+                                    htmlInput: {
                                         pattern: NUMERIC_INPUT_REGEXP_PATTERN,
                                     },
-                                    type: 'number',
+                                    input: { type: 'number' },
                                 }}
                                 disabled={props.disableGasLimit}
                                 value={isZero(gasLimit) ? defaultGasLimit : new BigNumber(gasLimit).toString()}
@@ -251,16 +253,18 @@ export function GasForm(props: GasFormProps) {
                             render={({ field }) => (
                                 <MaskTextField
                                     {...field}
-                                    InputProps={{
-                                        inputProps: {
+                                    slotProps={{
+                                        htmlInput: {
                                             pattern: NUMERIC_INPUT_REGEXP_PATTERN,
                                         },
-                                        type: 'number',
-                                        endAdornment: (
-                                            <Typography className={classes.unit}>
-                                                <Trans>Gwei</Trans>
-                                            </Typography>
-                                        ),
+                                        input: {
+                                            type: 'number',
+                                            endAdornment: (
+                                                <Typography className={classes.unit}>
+                                                    <Trans>Gwei</Trans>
+                                                </Typography>
+                                            ),
+                                        },
                                     }}
                                     value={
                                         isZero(maxPriorityFeePerGasByUser ?? 0) ? maxPriorityFeePerGas : (
@@ -289,16 +293,18 @@ export function GasForm(props: GasFormProps) {
                             render={({ field }) => (
                                 <MaskTextField
                                     {...field}
-                                    InputProps={{
-                                        inputProps: {
+                                    slotProps={{
+                                        htmlInput: {
                                             pattern: NUMERIC_INPUT_REGEXP_PATTERN,
                                         },
-                                        type: 'number',
-                                        endAdornment: (
-                                            <Typography className={classes.unit}>
-                                                <Trans>Gwei</Trans>
-                                            </Typography>
-                                        ),
+                                        input: {
+                                            type: 'number',
+                                            endAdornment: (
+                                                <Typography className={classes.unit}>
+                                                    <Trans>Gwei</Trans>
+                                                </Typography>
+                                            ),
+                                        },
                                     }}
                                     value={isZero(maxFeePerGasByUser ?? 0) ? maxFeePerGas : maxFeePerGasByUser}
                                     label={
diff --git a/packages/shared/src/UI/components/SettingsBoard/SlippageToleranceForm.tsx b/packages/shared/src/UI/components/SettingsBoard/SlippageToleranceForm.tsx
index 454e00f4431d..c964063ab1d3 100644
--- a/packages/shared/src/UI/components/SettingsBoard/SlippageToleranceForm.tsx
+++ b/packages/shared/src/UI/components/SettingsBoard/SlippageToleranceForm.tsx
@@ -88,9 +88,9 @@ export function SlippageToleranceForm(props: SlippageToleranceFormProps) {
                             <MaskTextField
                                 {...field}
                                 placeholder={t`Custom`}
-                                InputProps={{
-                                    type: 'number',
-                                    inputProps: {
+                                slotProps={{
+                                    input: { type: 'number' },
+                                    htmlInput: {
                                         pattern: NUMERIC_INPUT_REGEXP_PATTERN,
                                     },
                                 }}
diff --git a/packages/shared/src/UI/components/TokenAmountPanel/index.tsx b/packages/shared/src/UI/components/TokenAmountPanel/index.tsx
index a37f0b5deebe..a2c75b46ca44 100644
--- a/packages/shared/src/UI/components/TokenAmountPanel/index.tsx
+++ b/packages/shared/src/UI/components/TokenAmountPanel/index.tsx
@@ -63,7 +63,7 @@ export interface TokenAmountPanelProps extends withClasses<'root'> {
     MaxChipProps?: Partial<ChipProps>
     MaxChipStyle?: ChipProps['classes']
     SelectTokenChip?: Partial<SelectTokenChipProps>
-    TextFieldProps?: Exclude<StandardTextFieldProps, 'variant'>
+    TextFieldProps?: Omit<StandardTextFieldProps, 'variant' | 'slotProps'>
 }
 
 // todo: merge into one with TokenAmountPanel
@@ -110,8 +110,8 @@ export function TokenAmountPanel(props: TokenAmountPanelProps) {
             value={amount}
             onChange={onChange}
             placeholder="0.0"
-            InputProps={{
-                inputProps: {
+            slotProps={{
+                htmlInput: {
                     autoComplete: 'off',
                     autoCorrect: 'off',
                     title: 'Token Amount',
@@ -123,90 +123,90 @@ export function TokenAmountPanel(props: TokenAmountPanelProps) {
                     spellCheck: false,
                     className: classes.input,
                 },
-                endAdornment:
-                    disableToken ? null
-                    : token ?
-                        <Box
-                            className={classes.token}
-                            sx={{
-                                display: 'flex',
-                                flexDirection: 'column',
-                                justifyContent: 'center',
-                                alignItems: 'flex-end',
-                            }}>
-                            {disableBalance ? null : (
-                                <Typography
-                                    className={classes.balance}
-                                    color="textSecondary"
-                                    variant="body2"
-                                    component="span">
-                                    <Trans>
-                                        Balance:{' '}
-                                        <FormattedBalance
-                                            value={balance}
-                                            decimals={token.decimals}
-                                            significant={6}
-                                            formatter={formatBalance}
-                                        />
-                                    </Trans>
-                                </Typography>
-                            )}
+                input: {
+                    endAdornment:
+                        disableToken ? null
+                        : token ?
                             <Box
+                                className={classes.token}
                                 sx={{
                                     display: 'flex',
-                                    alignItems: 'center',
+                                    flexDirection: 'column',
+                                    justifyContent: 'center',
+                                    alignItems: 'flex-end',
+                                }}>
+                                {disableBalance ? null : (
+                                    <Typography
+                                        className={classes.balance}
+                                        color="textSecondary"
+                                        variant="body2"
+                                        component="span">
+                                        <Trans>
+                                            Balance:{' '}
+                                            <FormattedBalance
+                                                value={balance}
+                                                decimals={token.decimals}
+                                                significant={6}
+                                                formatter={formatBalance}
+                                            />
+                                        </Trans>
+                                    </Typography>
+                                )}
+                                <Box
+                                    sx={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        marginTop: 2,
+                                    }}>
+                                    {balance !== '0' && !disableBalance ?
+                                        <Chip
+                                            classes={{
+                                                root: cx(classes.max, MaxChipProps?.classes?.root),
+                                                ...MaxChipProps?.classes,
+                                            }}
+                                            size="small"
+                                            label="MAX"
+                                            clickable
+                                            color="primary"
+                                            variant="outlined"
+                                            onClick={() => {
+                                                onAmountChange(
+                                                    formatBalance(
+                                                        new BigNumber(maxAmount ?? balance)
+                                                            .dividedBy(maxAmountShares)
+                                                            .decimalPlaces(0, 1),
+                                                        token.decimals,
+                                                    ),
+                                                )
+                                            }}
+                                            {...MaxChipProps}
+                                        />
+                                    :   null}
+                                    <SelectTokenChip token={token} {...props.SelectTokenChip} />
+                                </Box>
+                            </Box>
+                        :   <Box
+                                className={classes.token}
+                                sx={{
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    justifyContent: 'center',
+                                    alignItems: 'flex-end',
                                     marginTop: 2,
                                 }}>
-                                {balance !== '0' && !disableBalance ?
-                                    <Chip
-                                        classes={{
-                                            root: cx(classes.max, MaxChipProps?.classes?.root),
-                                            ...MaxChipProps?.classes,
-                                        }}
-                                        size="small"
-                                        label="MAX"
-                                        clickable
-                                        color="primary"
-                                        variant="outlined"
-                                        onClick={() => {
-                                            onAmountChange(
-                                                formatBalance(
-                                                    new BigNumber(maxAmount ?? balance)
-                                                        .dividedBy(maxAmountShares)
-                                                        .decimalPlaces(0, 1),
-                                                    token.decimals,
-                                                ),
-                                            )
-                                        }}
-                                        {...MaxChipProps}
-                                    />
-                                :   null}
+                                {disableBalance ? null : (
+                                    <Typography
+                                        className={classes.balance}
+                                        color="textSecondary"
+                                        variant="body2"
+                                        component="span">
+                                        -
+                                    </Typography>
+                                )}
                                 <SelectTokenChip token={token} {...props.SelectTokenChip} />
-                            </Box>
-                        </Box>
-                    :   <Box
-                            className={classes.token}
-                            sx={{
-                                display: 'flex',
-                                flexDirection: 'column',
-                                justifyContent: 'center',
-                                alignItems: 'flex-end',
-                                marginTop: 2,
-                            }}>
-                            {disableBalance ? null : (
-                                <Typography
-                                    className={classes.balance}
-                                    color="textSecondary"
-                                    variant="body2"
-                                    component="span">
-                                    -
-                                </Typography>
-                            )}
-                            <SelectTokenChip token={token} {...props.SelectTokenChip} />
-                        </Box>,
-                ...props.InputProps,
-            }}
-            slotProps={{
+                            </Box>,
+                    ...props.InputProps,
+                },
                 inputLabel: {
                     shrink: true,
                     classes: { shrink: classes.inputShrinkLabel },
diff --git a/packages/shared/src/UI/contexts/components/InjectedDialog.tsx b/packages/shared/src/UI/contexts/components/InjectedDialog.tsx
index 221ca3c8c36d..826e9e97f948 100644
--- a/packages/shared/src/UI/contexts/components/InjectedDialog.tsx
+++ b/packages/shared/src/UI/contexts/components/InjectedDialog.tsx
@@ -222,10 +222,12 @@ export function InjectedDialog(props: InjectedDialogProps) {
                     if (props.isOnBack) onClose?.()
                     else closeBothCompositionDialog()
                 }}
-                BackdropProps={{
-                    transitionDuration: 0,
-                    classes: {
-                        root: dialogBackdropRoot,
+                slotProps={{
+                    backdrop: {
+                        transitionDuration: 0,
+                        classes: {
+                            root: dialogBackdropRoot,
+                        },
                     },
                 }}
                 {...omit(rest, 'isOnBack')}
diff --git a/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx b/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx
index b043f70ae678..9a1f7a34ce3b 100644
--- a/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx
+++ b/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx
@@ -13,7 +13,7 @@ import {
 } from '@masknet/web3-hooks-base'
 import type { FungibleToken } from '@masknet/web3-shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
-import { Button, DialogActions, DialogContent, inputClasses, useMediaQuery } from '@mui/material'
+import { Button, DialogActions, DialogContent, inputClasses } from '@mui/material'
 import { useMemo, useState } from 'react'
 import { TokenListMode } from '../../components/FungibleTokenList/type.js'
 import { FungibleTokenList, SelectNetworkSidebar, type FungibleTokenListProps } from '../../components/index.js'
@@ -131,7 +131,6 @@ export function SelectFungibleTokenDialog({
     const compact = networkIdentifier === EnhanceableSite.Minds
     const { pluginID: currentPluginID } = useNetworkContext(pluginID)
     const { classes, cx } = useStyles({ compact })
-    const isMdScreen = useMediaQuery((theme) => theme.breakpoints.down('md'))
     const allNetworks = useNetworks(NetworkPluginID.PLUGIN_EVM, true)
     const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const isPrivyWallet = !!usePrivyWallet(account)
@@ -144,10 +143,6 @@ export function SelectFungibleTokenDialog({
 
     const nativeTokenAddress = useNativeTokenAddress(currentPluginID)
 
-    const FixedSizeListProps = useMemo(
-        () => ({ itemSize: rowSize + 18.5, height: 428, className: classes.wrapper }),
-        [rowSize, isMdScreen, classes.wrapper],
-    )
     const [pendingSelectedTokens, setPendingSelectedTokens] = useState(selectedTokens)
     const enabled = multiple && maxTokens ? pendingSelectedTokens.length < maxTokens : true
     const noChanges = useMemo(() => {
@@ -196,10 +191,8 @@ export function SelectFungibleTokenDialog({
                         selectedTokens={pendingSelectedTokens}
                         onSelectedChange={setPendingSelectedTokens}
                         onSelect={onClose}
-                        FixedSizeListProps={FixedSizeListProps}
-                        SearchTextFieldProps={{
-                            InputProps: { classes: { root: classes.search } },
-                        }}
+                        FixedSizeListProps={{ itemSize: rowSize + 18.5, height: 428, className: classes.wrapper }}
+                        SearchTextFieldProps={{ slotProps: { input: { classes: { root: classes.search } } } }}
                         isHiddenChainIcon={false}
                         enabled={enabled}
                     />
diff --git a/packages/theme/src/Components/Dialogs/Dialog.tsx b/packages/theme/src/Components/Dialogs/Dialog.tsx
index 43fac3350812..27a0c991b097 100644
--- a/packages/theme/src/Components/Dialogs/Dialog.tsx
+++ b/packages/theme/src/Components/Dialogs/Dialog.tsx
@@ -23,7 +23,7 @@ export interface MaskDialogProps
 export const MaskDialog = memo((props: MaskDialogProps) => {
     const { title, onBack, onClose, open, children, DialogProps, isOpenFromApplicationBoard, ...inferredDialogProps } =
         props
-    const dialogProps: DialogProps = { onBackdropClick: onClose, onClose, open, ...inferredDialogProps, ...DialogProps }
+    const dialogProps: DialogProps = { onClose, open, ...inferredDialogProps, ...DialogProps }
     const { extraProps, shouldReplaceExitWithBack, TrackDialogHierarchy } = useDialogStackActor(open)
     const closeBothCompositionDialog = useCallback(() => {
         if (isOpenFromApplicationBoard) {
diff --git a/packages/theme/src/Components/Dialogs/DialogStack.tsx b/packages/theme/src/Components/Dialogs/DialogStack.tsx
index a05cae3fc273..97178b6b941d 100644
--- a/packages/theme/src/Components/Dialogs/DialogStack.tsx
+++ b/packages/theme/src/Components/Dialogs/DialogStack.tsx
@@ -26,7 +26,6 @@ DialogHierarchyContext.displayName = 'DialogHierarchyContext'
  *
  * Your dialog component MUST support the following attributes with the same semantics with MUI Dialog component.
  *
- * - disableEscapeKeyDown
  * - disableScrollLock
  * - hideBackdrop
  * - style
@@ -81,7 +80,7 @@ export function useDialogStackActor(open: boolean): useDialogStackActorReturn {
     if (stack.at(-1) !== selfID) {
         returnVal.extraProps = {
             ...returnVal.extraProps,
-            disableEscapeKeyDown: true,
+            onClose: noop,
             disableScrollLock: true,
             hideBackdrop: true,
             hidden: true,
diff --git a/packages/theme/src/Components/SearchableList/SearchableList.tsx b/packages/theme/src/Components/SearchableList/SearchableList.tsx
index a7facaab9f42..4d377e62d6b2 100644
--- a/packages/theme/src/Components/SearchableList/SearchableList.tsx
+++ b/packages/theme/src/Components/SearchableList/SearchableList.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState, type HTMLProps } from 'react'
 import { FixedSizeList, type FixedSizeListProps, type ListChildComponentProps } from 'react-window'
 import Fuse from 'fuse.js'
 import { uniqBy } from 'lodash-es'
-import { Box, Stack, Typography, useTheme } from '@mui/material'
+import { Box, mergeSlotProps, Stack, Typography, useTheme } from '@mui/material'
 import { makeStyles } from '../../UIHelper/index.js'
 import { MaskTextField, type MaskTextFieldProps } from '../TextField/index.js'
 import { Icons } from '@masknet/icons'
@@ -109,7 +109,7 @@ export function SearchableList<T extends object>({
     const theme = useTheme()
     const { classes, cx } = useStyles(undefined, { props })
     const { height = 300, itemSize, ...rest } = FixedSizeListProps || {}
-    const { InputProps, ...textFieldPropsRest } = SearchFieldProps ?? {}
+    const { slotProps, ...textFieldPropsRest } = SearchFieldProps ?? {}
 
     const fuse = useMemo(() => {
         return new Fuse(data, {
@@ -166,19 +166,23 @@ export function SearchableList<T extends object>({
                         placeholder="Search"
                         autoFocus
                         fullWidth
-                        InputProps={{
-                            style: { height: 40 },
-                            inputProps: { style: { paddingLeft: 4 } },
-                            startAdornment: <Icons.Search size={18} />,
-                            endAdornment:
-                                keyword ?
-                                    <Icons.Close
-                                        size={18}
-                                        onClick={handleClear}
-                                        color={textFieldPropsRest.error ? theme.palette.maskColor.danger : undefined}
-                                    />
-                                :   null,
-                            ...InputProps,
+                        slotProps={{
+                            ...slotProps,
+                            input: mergeSlotProps(slotProps?.input, {
+                                style: { height: 40 },
+                                startAdornment: <Icons.Search size={18} />,
+                                endAdornment:
+                                    keyword ?
+                                        <Icons.Close
+                                            size={18}
+                                            onClick={handleClear}
+                                            color={
+                                                textFieldPropsRest.error ? theme.palette.maskColor.danger : undefined
+                                            }
+                                        />
+                                    :   null,
+                            }),
+                            htmlInput: mergeSlotProps(slotProps?.htmlInput, { style: { paddingLeft: 4 } }),
                         }}
                         onChange={handleChange}
                         {...textFieldPropsRest}
diff --git a/packages/theme/src/Components/TextField/index.tsx b/packages/theme/src/Components/TextField/index.tsx
index 1c2846a4241d..a2fe53b460ce 100644
--- a/packages/theme/src/Components/TextField/index.tsx
+++ b/packages/theme/src/Components/TextField/index.tsx
@@ -1,15 +1,15 @@
 import { omit } from 'lodash-es'
-import type { BoxProps } from '@mui/system'
 import {
     Box,
     formHelperTextClasses,
     TextField,
     type StandardTextFieldProps,
-    type InputProps,
     Typography,
     InputBase,
+    type InputBaseProps,
     inputBaseClasses,
     alpha,
+    mergeSlotProps,
 } from '@mui/material'
 import { Sniffings } from '@masknet/shared-base'
 import { makeStyles } from '../../UIHelper/makeStyles.js'
@@ -83,16 +83,20 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-export interface MaskTextFieldProps extends Exclude<StandardTextFieldProps, 'variant'> {
-    wrapperProps?: BoxProps
+type TextFieldHtmlInputSlotProps = NonNullable<NonNullable<StandardTextFieldProps['slotProps']>['htmlInput']>
+type InputBaseHtmlInputSlotProps = NonNullable<NonNullable<InputBaseProps['slotProps']>['input']>
+
+export interface MaskTextFieldProps extends StandardTextFieldProps {
+    slotProps?: Omit<NonNullable<StandardTextFieldProps['slotProps']>, 'htmlInput'> & {
+        htmlInput?: TextFieldHtmlInputSlotProps & InputBaseHtmlInputSlotProps
+    }
 }
 
 export function MaskTextField(props: MaskTextFieldProps) {
-    const { label, sx, required = false, className, wrapperProps, helperText, ...rest } = props
-    const InputProps = (props.InputProps as InputProps) ?? {}
-    const { classes, cx } = useStyles()
+    const { label, sx, required = false, className, helperText, slotProps, ...rest } = props
+    const { classes } = useStyles()
     return (
-        <Box sx={sx} {...wrapperProps}>
+        <Box sx={sx} className={className}>
             {label && typeof label === 'string' ?
                 <Typography sx={{ mb: 1 }} variant="body2" className={classes.label}>
                     {label}
@@ -111,30 +115,23 @@ export function MaskTextField(props: MaskTextFieldProps) {
                     variant="standard"
                     required={required}
                     helperText={helperText}
-                    InputProps={{
-                        disableUnderline: true,
-                        classes: {
-                            disabled: classes.inputDisabled,
-                            focused: classes.inputFocused,
-                            ...InputProps.classes,
-                        },
-                        ...InputProps,
-                        className: cx(classes.input, InputProps.className),
+                    slotProps={{
+                        ...slotProps,
+                        input: mergeSlotProps(slotProps?.input, {
+                            disableUnderline: true,
+                            classes: {
+                                disabled: classes.inputDisabled,
+                                focused: classes.inputFocused,
+                            },
+                            className: classes.input,
+                        }),
                     }}
                 />
             :   <InputBase
                     className={classes.field}
-                    {...omit(InputProps, 'disableUnderline')}
-                    {...omit(
-                        rest,
-                        'margin',
-                        'onKeyDown',
-                        'onKeyUp',
-                        'InputProps',
-                        'inputProps',
-                        'FormHelperTextProps',
-                        'onInvalid',
-                    )}
+                    {...omit(slotProps?.input, 'disableUnderline')}
+                    {...omit(rest, 'margin', 'onKeyDown', 'onKeyUp', 'onInvalid')}
+                    slotProps={{ input: slotProps?.htmlInput }}
                 />
             }
         </Box>
diff --git a/packages/theme/src/Components/WrappedComponents/ShadowRootPopper.ts b/packages/theme/src/Components/WrappedComponents/ShadowRootPopper.ts
index 3798d2ca115a..2c579e567a3d 100644
--- a/packages/theme/src/Components/WrappedComponents/ShadowRootPopper.ts
+++ b/packages/theme/src/Components/WrappedComponents/ShadowRootPopper.ts
@@ -1,5 +1,5 @@
 import { Popper } from '@mui/material'
 import { createShadowRootForwardedComponent } from '../../ShadowRoot/index.js'
 
-export const ShadowRootPopper: typeof Popper = createShadowRootForwardedComponent(Popper) as any
+export const ShadowRootPopper: typeof Popper = createShadowRootForwardedComponent(Popper) as typeof Popper
 ShadowRootPopper.displayName = 'ShadowRootTooltip'
diff --git a/packages/theme/src/Components/WrappedComponents/ShadowRootTooltip.ts b/packages/theme/src/Components/WrappedComponents/ShadowRootTooltip.ts
deleted file mode 100644
index 28d10001ba79..000000000000
--- a/packages/theme/src/Components/WrappedComponents/ShadowRootTooltip.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Tooltip } from '@mui/material'
-import { createShadowRootForwardedPopperComponent } from '../../ShadowRoot/index.js'
-
-export const ShadowRootTooltip = createShadowRootForwardedPopperComponent(Tooltip)
-ShadowRootTooltip.displayName = 'ShadowRootTooltip'
diff --git a/packages/theme/src/Components/WrappedComponents/ShadowRootTooltip.tsx b/packages/theme/src/Components/WrappedComponents/ShadowRootTooltip.tsx
new file mode 100644
index 000000000000..5a774b5f6cd8
--- /dev/null
+++ b/packages/theme/src/Components/WrappedComponents/ShadowRootTooltip.tsx
@@ -0,0 +1,15 @@
+import { mergeSlotProps, Tooltip, type TooltipProps } from '@mui/material'
+import { usePortalShadowRoot } from '../../ShadowRoot/index.js'
+
+export function ShadowRootTooltip(props: TooltipProps) {
+    return usePortalShadowRoot((container) => (
+        <Tooltip
+            {...props}
+            slotProps={{
+                ...props.slotProps,
+                popper: mergeSlotProps(props.slotProps?.popper, { container }),
+            }}
+        />
+    ))
+}
+ShadowRootTooltip.displayName = 'ShadowRootTooltip'
diff --git a/packages/theme/src/ShadowRoot/Portal.tsx b/packages/theme/src/ShadowRoot/Portal.tsx
index 214ce48702df..c7c1ad801bf1 100644
--- a/packages/theme/src/ShadowRoot/Portal.tsx
+++ b/packages/theme/src/ShadowRoot/Portal.tsx
@@ -2,7 +2,6 @@
 /* eslint-disable @eslint-react/rules-of-hooks */
 import { useRef, useContext } from 'react'
 import { Flags } from '@masknet/flags'
-import type { PopperProps } from '@mui/material'
 import {
     DisableShadowRootContext,
     PreventShadowRootEventPropagationListContext,
@@ -92,18 +91,6 @@ export function createShadowRootForwardedComponent<
     }) as typeof Component
 }
 
-export function createShadowRootForwardedPopperComponent<
-    T extends {
-        PopperProps?: Partial<PopperProps>
-    },
->(Component: React.ComponentType<T>) {
-    return ((props: T) => {
-        return usePortalShadowRoot((container) => {
-            return <Component {...props} PopperProps={{ container, ...props.PopperProps }} />
-        })
-    }) as typeof Component
-}
-
 function useRefInit<T>(f: () => T): T {
     const ref = useRef<T>(undefined!)
     if (!ref.current) ref.current = f()
diff --git a/packages/theme/src/ShadowRoot/index.ts b/packages/theme/src/ShadowRoot/index.ts
index c4f50efbdf1d..3b18ef9a3075 100644
--- a/packages/theme/src/ShadowRoot/index.ts
+++ b/packages/theme/src/ShadowRoot/index.ts
@@ -3,11 +3,7 @@ export {
     type AttachInShadowRootOptions,
     type ReactRootShadowed,
 } from './attachReactTreeToMountedRoot.js'
-export {
-    usePortalShadowRoot,
-    createShadowRootForwardedComponent,
-    createShadowRootForwardedPopperComponent,
-} from './Portal.js'
+export { usePortalShadowRoot, createShadowRootForwardedComponent } from './Portal.js'
 export { setupReactShadowRootEnvironment, type WrapJSX } from './ShadowRootSetup.js'
 export { ShadowRootIsolation } from './ShadowRootIsolation.js'
 export { DisableShadowRootContext } from './Contexts.js'
diff --git a/packages/theme/src/Theme/colors.ts b/packages/theme/src/Theme/colors.ts
index df8853e3ced8..4c82ea44de3a 100644
--- a/packages/theme/src/Theme/colors.ts
+++ b/packages/theme/src/Theme/colors.ts
@@ -1,4 +1,33 @@
 // TODO: Just only provide maskColor, others will be deprecate.
+declare module '@mui/material/styles' {
+    interface Palette {
+        maskColor: MaskColor['maskColor']
+        shadow: MaskColor['shadow']
+        secondaryDivider: string
+    }
+
+    interface PaletteOptions {
+        maskColor?: MaskColor['maskColor']
+        shadow?: MaskColor['shadow']
+        secondaryDivider?: string
+    }
+
+    interface TypeText {
+        third: string
+        strong: string
+        buttonText: string
+    }
+
+    interface TypeBackground {
+        input: string
+        tipMask: string
+    }
+
+    interface TypeAction {
+        mask: string
+    }
+}
+
 export const MaskColors = {
     light: {
         grey: {
diff --git a/packages/theme/src/Theme/component-changes.tsx b/packages/theme/src/Theme/component-changes.tsx
index 8b06b8933114..c301eff5e9b3 100644
--- a/packages/theme/src/Theme/component-changes.tsx
+++ b/packages/theme/src/Theme/component-changes.tsx
@@ -22,6 +22,23 @@ import {
 import type { MaskColor } from './colors.js'
 
 type ThemeOverride = (mode: PaletteMode, colors: MaskColor) => ThemeOptions
+
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        rounded: true
+        roundedContained: true
+        roundedOutlined: true
+        roundedText: true
+        roundedDark: true
+    }
+}
+
+declare module '@mui/material/InputBase' {
+    interface InputBasePropsSizeOverrides {
+        large: true
+    }
+}
+
 // this override extends the mui theme and cannot fit ThemeOptions
 export const Button = (mode: PaletteMode, colors: MaskColor) => ({
     components: {
diff --git a/packages/theme/src/extended.d.ts b/packages/theme/src/extended.d.ts
index abbcb9d2f3b6..b03d7917c496 100644
--- a/packages/theme/src/extended.d.ts
+++ b/packages/theme/src/extended.d.ts
@@ -1,27 +1,7 @@
-declare global {
-    module '@mui/material/Button' {
-        interface ButtonPropsVariantOverrides {
-            rounded: true
-            roundedContained: true
-            roundedOutlined: true
-            roundedText: true
-            roundedDark: true
-            containedDark: true
-        }
-        interface ButtonPropsColorOverrides {
-            warning: true
-            error: true
-        }
-    }
-    module '@mui/material/InputBase' {
-        interface InputBasePropsSizeOverrides {
-            large: true
-        }
-    }
-    module '@mui/material/Paper' {
-        interface PaperPropsVariantOverrides {
-            background: true
-            rounded: true
-        }
-    }
-}
+/// <reference path="./Theme/colors.ts" />
+/// <reference path="./Theme/component-changes.tsx" />
+/// <reference path="./Theme/theme.ts" />
+/// <reference path="./Components/Snackbar/index.tsx" />
+
+// The module augmentations live beside their implementations. This file ensures
+// they are loaded by every @masknet/theme entry point.

From b7dbe062552f876dd46f3b51ef4603f5fe9fdced Mon Sep 17 00:00:00 2001
From: Jack Works <5390719+Jack-Works@users.noreply.github.com>
Date: Tue, 21 Jul 2026 00:00:00 +0000
Subject: [PATCH 03/15] update theme api

---
 eslint.config.js                              |  19 ++
 .../CompositionDialog/Composition.tsx         |   6 +-
 .../CompositionDialog/CompositionUI.tsx       |  20 +--
 .../EncryptionMethodSelector.tsx              |   4 +-
 .../EncryptionTargetSelector.tsx              |   8 +-
 .../CompositionDialog/PopoverListTrigger.tsx  |  10 +-
 .../components/GuideStep/index.tsx            |   6 +-
 .../DecryptedPost/DecryptedPostSuccess.tsx    |   6 +-
 .../DecryptedPost/RecipientsToolTip.tsx       |   8 +-
 .../DisabledPluginSuggestion.tsx              |   4 +-
 .../InjectedComponents/PermissionBoundary.tsx |   2 +-
 .../ProfileCard/ProfileBar.tsx                |   8 +-
 .../ProfileCard/ProfileCardTitle.tsx          |   4 +-
 .../InjectedComponents/ProfileCard/index.tsx  |  16 +-
 .../InjectedComponents/ProfileTabContent.tsx  |  14 +-
 .../SearchResultInspector.tsx                 |   2 +-
 .../InjectedComponents/SelectPeopleDialog.tsx |  26 +--
 .../SetupGuide/PinExtension.tsx               |   8 +-
 .../SetupGuide/WizardDialog.tsx               |  12 +-
 .../InjectedComponents/ToolboxUnstyled.tsx    |   5 +-
 .../SelectProfileUI/SelectProfileUI.tsx       |   4 +-
 .../shared/SelectRecipients/ProfileInList.tsx |   2 +-
 .../SelectRecipientsDialog.tsx                |  37 ++--
 .../facebook.com/injection/ProfileContent.tsx |   4 +-
 .../site-adaptors/facebook.com/ui-provider.ts |  10 +-
 .../injection/ProfileTabContent.tsx           |   4 +-
 .../minds.com/injection/CommentBox.tsx        |  15 +-
 .../minds.com/injection/ToolboxHint_UI.tsx    |  18 +-
 .../site-adaptors/minds.com/ui-provider.ts    |   9 +-
 .../twitter.com/customization/custom.ts       |   4 +-
 .../twitter.com/injection/PostDialogHint.tsx  |   9 +-
 .../injection/ProfileTabContent.tsx           |   4 +-
 .../twitter.com/injection/ToolboxHint_UI.tsx  |   8 +-
 .../site-adaptors/twitter.com/ui-provider.ts  |   9 +-
 .../components/BackupPreview/index.tsx        |  22 +--
 .../components/GoogleDriveFileTable.tsx       |  18 +-
 .../Mnemonic/DesktopMnemonicConfirm.tsx       |   6 +-
 .../components/Mnemonic/MnemonicReveal.tsx    |   6 +-
 .../dashboard/components/MoreMenu/index.tsx   |  10 +-
 .../components/OnboardingWriter/index.tsx     |   2 +-
 .../components/PrimaryButton/index.tsx        |  10 +-
 .../components/Restore/AccountStatusBar.tsx   |   2 +-
 .../Restore/RestoreFromMnemonic.tsx           |   2 +-
 .../Restore/RestoreFromPrivateKey.tsx         |   4 +-
 .../Restore/RestoreWalletFromLocal.tsx        |   4 +-
 .../components/SecondaryButton/index.tsx      |  10 +-
 .../dashboard/components/SetupFrame/index.tsx |   6 +-
 .../BackupPreviewDialog.tsx                   |  10 +-
 .../dashboard/modals/ConfirmModal/index.tsx   |   4 +-
 .../RestoreBackupDialog.tsx                   |  10 +-
 .../AddDeriveWallet/index.tsx                 |   6 +-
 .../CreateMnemonic/ComponentToPrint.tsx       |  22 +--
 .../CreateMaskWallet/CreateMnemonic/index.tsx |  34 ++--
 .../CreateWalletForm/index.tsx                |   8 +-
 .../CreateMaskWallet/FireflyWallet/index.tsx  |  17 +-
 .../CreateMaskWallet/Onboarding/index.tsx     |   8 +-
 .../pages/CreateMaskWallet/Recovery/index.tsx |  10 +-
 .../SetupPersona/Backup/Cloud/GoogleDrive.tsx |   4 +-
 .../SetupPersona/Backup/Cloud/Preview.tsx     |  10 +-
 .../pages/SetupPersona/Backup/Cloud/index.tsx |   6 +-
 .../pages/SetupPersona/Backup/index.tsx       |  11 +-
 .../Mnemonic/ComponentToPrint.tsx             |  16 +-
 .../pages/SetupPersona/Mnemonic/Words.tsx     |   6 +-
 .../pages/SetupPersona/Mnemonic/index.tsx     |  20 +--
 .../pages/SetupPersona/Onboarding/index.tsx   |  10 +-
 .../PermissionOnboarding/index.tsx            |  12 +-
 .../pages/SetupPersona/Permissions/index.tsx  |  12 +-
 .../Recovery/Cloud/GoogleDrive.tsx            |   4 +-
 .../SetupPersona/Recovery/Cloud/index.tsx     |   6 +-
 .../pages/SetupPersona/Recovery/Local.tsx     |   4 +-
 .../pages/SetupPersona/Recovery/Phrase.tsx    |   2 +-
 .../SetupPersona/Recovery/PrivateKey.tsx      |   4 +-
 .../pages/SetupPersona/Recovery/index.tsx     |  13 +-
 .../pages/SetupPersona/SignUp/index.tsx       |   4 +-
 .../pages/SetupPersona/Welcome/Article.tsx    |   8 +-
 .../pages/SetupPersona/Welcome/index.tsx      |   6 +-
 .../pages/SignUp/steps/PersonaNameUI.tsx      |   2 +-
 .../components/ActionModal/ActionModal.tsx    |  11 +-
 .../components/AddContactInputPanel/index.tsx |  16 +-
 .../components/BottomController/index.tsx     |   4 +-
 .../popups/components/BottomDrawer/index.tsx  |   9 +-
 .../ConnectSocialAccounts/index.tsx           |   4 +-
 .../components/ConnectedWallet/index.tsx      |  10 +-
 .../components/GasSettingMenu/index.tsx       |   2 +-
 .../components/MnemonicDisplay/index.tsx      |  21 ++-
 .../popups/components/Navigator/index.tsx     |  11 +-
 .../popups/components/NormalHeader/index.tsx  |   6 +-
 .../components/PersonaPublicKey/index.tsx     |   4 +-
 .../popups/components/PopupLayout/index.tsx   |   2 +-
 .../components/PrivateKeyDisplay/index.tsx    |  19 +-
 .../components/SelectProvider/index.tsx       |   4 +-
 .../components/SignRequestInfo/index.tsx      |   6 +-
 .../components/SocialAccounts/index.tsx       |   8 +-
 .../components/TokenPicker/TokenItem.tsx      |  12 +-
 .../components/TransactionPreview/index.tsx   |   6 +-
 .../components/UnlockERC20Token/index.tsx     |  24 +--
 .../popups/components/WalletAvatar/index.tsx  |   2 +-
 .../popups/components/WalletItem/index.tsx    |  14 +-
 .../components/WalletSettingList/index.tsx    |   4 +-
 .../mask/popups/hooks/useGasOptionsMenu.tsx   |   6 +-
 .../popups/modals/AddContactModal/index.tsx   |  19 +-
 .../ChangeBackupPasswordModal/index.tsx       |   2 +-
 .../ChangePaymentPasswordModal/index.tsx      |   4 +-
 .../modals/ChooseCurrencyModal/index.tsx      |   6 +-
 .../modals/ChooseNetworkModal/index.tsx       |   8 +-
 .../mask/popups/modals/ConfirmModal/index.tsx |   2 +-
 .../popups/modals/ConnectProvider/index.tsx   |   8 +-
 .../modals/DeleteContactModal/index.tsx       |  19 +-
 .../popups/modals/EditContactModal/index.tsx  |  23 ++-
 .../GasSettingModal/GasSettingDialog.tsx      |  10 +-
 .../modals/PersonaRenameModal/index.tsx       |   4 +-
 .../modals/PersonaSettingModal/index.tsx      |   6 +-
 .../modals/SelectAppearanceModal/index.tsx    |   2 +-
 .../modals/SelectProviderModal/index.tsx      |   2 +-
 .../modals/SetBackupPasswordModal/index.tsx   |   4 +-
 .../modals/ShowPrivateKeyModal/index.tsx      |   2 +-
 .../modals/SupportedSitesModal/index.tsx      |   4 +-
 .../modals/SwitchPersonaModal/PersonaItem.tsx |   6 +-
 .../modals/SwitchPersonaModal/index.tsx       |   2 +-
 .../modals/UpdatePermissionModal/index.tsx    |   6 +-
 .../WalletAutoLockSettingModal/index.tsx      |   8 +-
 .../popups/modals/WalletRemoveModal/index.tsx |   6 +-
 .../popups/modals/WalletRenameModal/index.tsx |   6 +-
 .../Friends/ContactCard/Account/index.tsx     |   2 +-
 .../ContactCard/SocialAccount/index.tsx       |   2 +-
 .../pages/Friends/ContactCard/index.tsx       |   4 +-
 .../popups/pages/Friends/Contacts/index.tsx   |   2 +-
 .../pages/Friends/Detail/Account/index.tsx    |   2 +-
 .../Friends/Detail/SocialAccount/index.tsx    |   2 +-
 .../mask/popups/pages/Friends/Detail/UI.tsx   |  13 +-
 .../mask/popups/pages/Friends/Home/UI.tsx     |   9 +-
 .../popups/pages/Friends/Search/index.tsx     |   8 +-
 .../popups/pages/Friends/SearchList/index.tsx |   2 +-
 .../pages/Personas/ConnectWallet/index.tsx    |   8 +-
 .../pages/Personas/ExportPrivateKey/index.tsx |   6 +-
 .../mask/popups/pages/Personas/Home/UI.tsx    |  36 ++--
 .../popups/pages/Personas/Logout/index.tsx    |   8 +-
 .../Personas/PersonaAvatarSetting/index.tsx   |  15 +-
 .../pages/Personas/WalletConnect/index.tsx    |  25 +--
 .../components/AccountAvatar/index.tsx        |   4 +-
 .../Personas/components/PersonaHeader/UI.tsx  |  16 +-
 packages/mask/popups/pages/Settings/index.tsx |  22 +--
 .../pages/Trader/useImplementRuntime.tsx      |   4 +-
 .../popups/pages/Wallet/AddToken/index.tsx    |   2 +-
 .../pages/Wallet/ConnectedSites/index.tsx     |   2 +-
 .../popups/pages/Wallet/ContactList/index.tsx |  22 +--
 .../pages/Wallet/CreateWallet/Derive.tsx      |   4 +-
 .../pages/Wallet/CreateWallet/index.tsx       |  10 +-
 .../popups/pages/Wallet/EditNetwork/index.tsx |  14 +-
 .../pages/Wallet/ExportPrivateKey/index.tsx   |  18 +-
 .../Wallet/GasSetting/GasSetting1559.tsx      |   6 +-
 .../Wallet/GasSetting/Prior1559GasSetting.tsx |   6 +-
 .../Wallet/Interaction/TransactionRequest.tsx |   8 +-
 .../pages/Wallet/Interaction/interaction.tsx  |   4 +-
 .../pages/Wallet/NetworkManagement/index.tsx  |  14 +-
 .../popups/pages/Wallet/Receive/index.tsx     |  31 ++--
 .../popups/pages/Wallet/ResetWallet/index.tsx |  10 +-
 .../pages/Wallet/SelectWallet/index.tsx       |   6 +-
 .../pages/Wallet/SetPaymentPassword/index.tsx |  20 +--
 .../pages/Wallet/SwitchWallet/index.tsx       |  10 +-
 .../pages/Wallet/SyncTwitterCookies/index.tsx |  45 ++---
 .../popups/pages/Wallet/TokenDetail/index.tsx |  26 +--
 .../pages/Wallet/TransactionDetail/index.tsx  |  30 ++--
 .../Wallet/Transfer/FungibleTokenSection.tsx  |   8 +-
 .../mask/popups/pages/Wallet/Unlock/index.tsx |   8 +-
 .../pages/Wallet/WalletSettings/AutoLock.tsx  |   4 +-
 .../Wallet/WalletSettings/ChangeCurrency.tsx  |   4 +-
 .../Wallet/WalletSettings/ChangeNetwork.tsx   |   4 +-
 .../WalletSettings/ChangePaymentPassword.tsx  |   4 +-
 .../WalletSettings/ConnectedOrigins.tsx       |   4 +-
 .../pages/Wallet/WalletSettings/Contacts.tsx  |   4 +-
 .../Wallet/WalletSettings/DisablePermit.tsx   |   4 +-
 .../pages/Wallet/WalletSettings/Rename.tsx    |   4 +-
 .../Wallet/WalletSettings/ShowPrivateKey.tsx  |   4 +-
 .../pages/Wallet/WalletSettings/index.tsx     |   2 +-
 .../pages/Wallet/WalletSettings/useStyles.ts  |  21 ++-
 .../Wallet/components/ActionGroup/index.tsx   |  18 +-
 .../components/ActivityList/ActivityItem.tsx  |  48 +++---
 .../Wallet/components/ActivityList/index.tsx  |   4 +-
 .../Wallet/components/AssetsList/index.tsx    |  12 +-
 .../components/DisconnectModal/index.tsx      |  16 +-
 .../components/ImportCreateWallet/index.tsx   |  26 +--
 .../Wallet/components/OriginCard/index.tsx    |   8 +-
 .../pages/Wallet/components/StartUp/index.tsx |   6 +-
 .../Wallet/components/WalletAssets/index.tsx  |  15 +-
 .../Wallet/components/WalletHeader/UI.tsx     |  29 ++--
 .../WalletHeader/WalletSetupHeaderUI.tsx      |   7 +-
 .../src/SiteAdaptor/ApprovalDialog.tsx        |   4 +-
 .../src/SiteAdaptor/ApprovalTokenContent.tsx  |  26 +--
 .../src/SiteAdaptor/CalendarContent.tsx       |  10 +-
 .../src/SiteAdaptor/components/DatePicker.tsx |  20 ++-
 .../SiteAdaptor/components/DatePickerTab.tsx  |   8 +-
 .../src/SiteAdaptor/components/EventList.tsx  |  15 +-
 .../src/SiteAdaptor/components/Footer.tsx     |   4 +-
 .../SiteAdaptor/components/ImageLoader.tsx    |  13 +-
 .../src/SiteAdaptor/components/NewsList.tsx   |  21 +--
 .../SiteAdaptor/components/BridgeStack.tsx    |   4 +-
 .../EFP/src/SiteAdaptor/ProfileCard.tsx       |  16 +-
 .../SiteAdaptor/components/FileBrowser.tsx    |  18 +-
 .../src/SiteAdaptor/components/FileList.tsx   |   6 +-
 .../components/Files/DisplayingFile.tsx       |   8 +-
 .../components/Files/ManageableFile.tsx       |  18 +-
 .../components/Files/SelectableFile.tsx       |   8 +-
 .../components/Files/UploadingFile.tsx        |   6 +-
 .../src/SiteAdaptor/components/Terms.tsx      |  26 +--
 .../src/SiteAdaptor/components/UploadFile.tsx |   8 +-
 .../modals/ConfirmModal/ConfirmDialog.tsx     |   8 +-
 .../modals/RenameModal/RenameDialog.tsx       |   8 +-
 .../Gitcoin/src/SiteAdaptor/PreviewCard.tsx   |  30 ++--
 .../src/SiteAdaptor/CheckSecurityDialog.tsx   |   8 +-
 .../components/CheckSecurityConfirmDialog.tsx |   6 +-
 .../src/SiteAdaptor/components/Footer.tsx     |   4 +-
 .../src/SiteAdaptor/components/NotFound.tsx   |   9 +-
 .../src/SiteAdaptor/components/RiskCard.tsx   |  10 +-
 .../components/RiskWarningDialog.tsx          |  23 ++-
 .../src/SiteAdaptor/components/SearchBox.tsx  |  20 +--
 .../SiteAdaptor/components/SecurityPanel.tsx  |  23 ++-
 .../src/SiteAdaptor/components/TokenPanel.tsx |  26 +--
 .../Handle/src/SiteAdaptor/PluginHeader.tsx   |  13 +-
 .../src/SiteAdaptor/SearchResultInspector.tsx |  12 +-
 .../AvatarBadge/ProfileAvatarBadge.tsx        |   2 +-
 .../SiteAdaptor/FinanceFeeds/FinanceFeed.tsx  |   4 +-
 .../src/SiteAdaptor/FinanceFeeds/index.tsx    |   7 +-
 .../SiteAdaptor/SocialFeeds/SocialFeed.tsx    |  14 +-
 .../src/SiteAdaptor/SocialFeeds/index.tsx     |   6 +-
 .../components/FeedActions/CommentAction.tsx  |   2 +-
 .../components/FeedActions/DonationAction.tsx |   2 +-
 .../FeedActions/LiquidityAction.tsx           |   2 +-
 .../components/FeedActions/NoteAction.tsx     |   2 +-
 .../components/FeedActions/ProfileAction.tsx  |   2 +-
 .../FeedActions/ProfileLinkAction.tsx         |   2 +-
 .../components/FeedActions/ProfileProxy.tsx   |   2 +-
 .../components/FeedActions/ProposeAction.tsx  |   2 +-
 .../components/FeedActions/StakingAction.tsx  |   2 +-
 .../FeedActions/TokenApprovalAction.tsx       |   2 +-
 .../FeedActions/TokenBridgeAction.tsx         |   2 +-
 .../FeedActions/TokenOperationAction.tsx      |   2 +-
 .../FeedActions/TokenSwapAction.tsx           |   2 +-
 .../components/FeedActions/UnknownAction.tsx  |   2 +-
 .../components/FeedActions/VoteAction.tsx     |   2 +-
 .../components/FeedCard/CommentCard.tsx       |  10 +-
 .../components/FeedCard/DonationCard.tsx      |   8 +-
 .../components/FeedCard/NoteCard.tsx          |   8 +-
 .../components/FeedCard/ProfileCard.tsx       |   2 +-
 .../components/FeedCard/ProfileLinkCard.tsx   |   2 +-
 .../components/FeedCard/ProfileProxy.tsx      |   2 +-
 .../components/FeedCard/ProposeCard.tsx       |   4 +-
 .../components/FeedCard/VoteCard.tsx          |   4 +-
 .../src/SiteAdaptor/components/Slider.tsx     |   4 +-
 .../RSS3/src/SiteAdaptor/components/base.tsx  |   4 +-
 .../src/SiteAdaptor/components/common.tsx     |   4 +-
 .../SiteAdaptor/hooks/useMarkdownStyles.ts    |   4 +-
 .../modals/DetailsModal/TxDetails.tsx         |  14 +-
 .../FinanceFeedDetailsModal/TxDetails.tsx     |  14 +-
 .../src/SiteAdaptor/Conditions/index.tsx      |   6 +-
 .../SiteAdaptor/RedPacket/OperationFooter.tsx |   4 +-
 .../src/SiteAdaptor/RedPacket/index.tsx       |   4 +-
 .../SolanaRedPacket/OperationFooter.tsx       |   4 +-
 .../SolanaRedPacket/SolanaRedPacketCard.tsx   |   2 +-
 .../SolanaRedpacketDialog/CreateRedpacket.tsx |  22 +--
 .../RedpacketConfirm.tsx                      |   8 +-
 .../SiteAdaptor/components/ClaimOnFirefly.tsx |   2 +-
 .../SiteAdaptor/components/ClaimRecord.tsx    |   8 +-
 .../components/ConditionSettings.tsx          |  26 +--
 .../SiteAdaptor/components/MessageInput.tsx   |   2 +-
 .../components/RedPacketActionButton.tsx      |  12 +-
 .../components/RedPacketEnvelope.tsx          |   8 +-
 .../components/RedPacketRecord.tsx            |  24 +--
 .../SiteAdaptor/components/ThemePicker.tsx    |  12 +-
 .../views/CreateTokenRedPacket.tsx            |  10 +-
 .../src/SiteAdaptor/views/CustomCover.tsx     |   6 +-
 .../src/SiteAdaptor/views/History.tsx         |   3 +-
 .../views/TokenRedPacketConfirm.tsx           |  10 +-
 .../SiteAdaptor/SavingsTable/SavingsRow.tsx   |   2 +-
 .../src/SiteAdaptor/SavingsTable/index.tsx    |   8 +-
 .../Savings/src/SiteAdaptor/WithdrawForm.tsx  |   6 +-
 .../SiteAdaptor/components/LinkModifier.tsx   |   2 +-
 .../SiteAdaptor/components/PreviewCard.tsx    |   4 +-
 .../SiteAdaptor/components/TextModifier.tsx   |   2 +-
 .../SiteAdaptor/components/WarningCard.tsx    |  20 +--
 .../src/SiteAdaptor/InformationCard.tsx       |   6 +-
 .../Snapshot/src/SiteAdaptor/LoadingCard.tsx  |   8 +-
 .../src/SiteAdaptor/LoadingFailCard.tsx       |   6 +-
 .../src/SiteAdaptor/PluginDescriptor.tsx      |   9 +-
 .../src/SiteAdaptor/ProfileProposalList.tsx   |  28 +--
 .../src/SiteAdaptor/ProfileSpaceHeader.tsx    |   6 +-
 .../Snapshot/src/SiteAdaptor/ReadmeCard.tsx   |  10 +-
 .../Snapshot/src/SiteAdaptor/ResultCard.tsx   |  22 +--
 .../Snapshot/src/SiteAdaptor/Snapshot.tsx     |  32 ++--
 .../Snapshot/src/SiteAdaptor/SnapshotCard.tsx |   8 +-
 .../Snapshot/src/SiteAdaptor/SnapshotTab.tsx  |   2 +-
 .../Snapshot/src/SiteAdaptor/SpaceMenu.tsx    |  16 +-
 .../Snapshot/src/SiteAdaptor/VotesCard.tsx    |  14 +-
 .../Snapshot/src/SiteAdaptor/VotingDialog.tsx |  18 +-
 .../src/SiteAdaptor/SwitchLogoButton.tsx      |   4 +-
 .../src/SiteAdaptor/SwitchLogoDialog.tsx      |   8 +-
 .../components/TipsRealmContent/index.tsx     |   7 +-
 .../RecipientSection/RecipientSelect.tsx      |   4 +-
 .../src/components/RecipientSection/index.tsx |   2 +-
 .../src/SiteAdaptor/components/BridgeNode.tsx |  18 +-
 .../src/SiteAdaptor/components/Warning.tsx    |   2 +-
 .../trader/views/BridgeConfirm.tsx            |  28 ++-
 .../trader/views/BridgeQuoteRoute.tsx         |  22 +--
 .../src/SiteAdaptor/trader/views/Confirm.tsx  |  26 +--
 .../src/SiteAdaptor/trader/views/History.tsx  |  28 +--
 .../trader/views/NetworkFee/index.tsx         |  30 ++--
 .../SiteAdaptor/trader/views/QuoteRoute.tsx   |  20 +--
 .../trader/views/SelectLiquidity.tsx          |  30 ++--
 .../src/SiteAdaptor/trader/views/Slippage.tsx |  28 +--
 .../SiteAdaptor/trader/views/Trade/Quote.tsx  |  12 +-
 .../SiteAdaptor/trader/views/Trade/index.tsx  |  34 ++--
 .../SiteAdaptor/trader/views/TradingRoute.tsx |  10 +-
 .../SiteAdaptor/trader/views/Transaction.tsx  |  50 +++---
 .../SiteAdaptor/trending/PluginDescriptor.tsx |   2 +-
 .../trending/PriceChartDaysControl.tsx        |   6 +-
 .../src/SiteAdaptor/trending/TickersTable.tsx |   4 +-
 .../src/SiteAdaptor/trending/TrendingView.tsx |  15 +-
 .../SiteAdaptor/trending/TrendingViewDeck.tsx |  16 +-
 .../trending/TrendingViewDescriptor.tsx       |   6 +-
 .../src/SiteAdaptor/BuyTokenDialog.tsx        |   6 +-
 .../Transak/src/hooks/useTransakURL.ts        |  19 +-
 packages/plugins/Transak/src/index.ts         |   1 -
 .../VCent/src/SiteAdaptor/TweetDialog.tsx     |  18 +-
 .../components/Lens/FollowLensDialog.tsx      |  16 +-
 .../components/Lens/HandlerDescription.tsx    |   6 +-
 .../SiteAdaptor/components/ProfilePopup.tsx   |  30 ++--
 .../components/SocialBadges/FarcasterList.tsx |   8 +-
 .../components/SocialBadges/LensList.tsx      |  10 +-
 .../components/SocialBadges/SocialPopup.tsx   |  14 +-
 .../components/Web3ProfileDialog.tsx          |   2 +-
 .../src/UI/components/AccountIcons/index.tsx  |  42 +++--
 .../src/UI/components/AddressItem/index.tsx   |   2 +-
 .../shared/src/UI/components/Alert/index.tsx  |   4 +-
 .../UI/components/ApplicationEntry/index.tsx  |  21 ++-
 .../src/UI/components/BindingDialog/index.tsx |  10 +-
 .../src/UI/components/ChainBoundary/index.tsx |   6 +-
 .../src/UI/components/ClickableChip/index.tsx |  11 +-
 .../CoinMetadataTable/ContractItem.tsx        |   6 +-
 .../UI/components/CoinMetadataTable/index.tsx |   8 +-
 .../CompositionDialog/BadgeRenderer.tsx       |   7 +-
 .../CompositionDialog/CompositionUI.tsx       |  18 +-
 .../CompositionDialog/PluginEntryRender.tsx   |  10 +-
 .../CompositionDialog/TypedMessageEditor.tsx  |  10 +-
 .../ConnectPersonaBoundary/index.tsx          |   8 +-
 .../src/UI/components/CopyButton/index.tsx    |   4 +-
 .../UI/components/CountryCodePicker/index.tsx |  10 +-
 .../src/UI/components/DotLoading/index.tsx    |   2 +-
 .../src/UI/components/EmptyStatus/index.tsx   |   2 +-
 .../UI/components/EthereumBlockie/index.tsx   |   2 +-
 .../src/UI/components/FileFrame/index.tsx     |   7 +-
 .../src/UI/components/FootnoteMenu/index.tsx  |  10 +-
 .../UI/components/FungibleTokenInput/UI.tsx   |  23 ++-
 .../FungibleTokenList/FungibleTokenItem.tsx   |  12 +-
 .../UI/components/GrantPermission/index.tsx   |   2 +-
 .../shared/src/UI/components/Icon/index.tsx   |   4 +-
 .../shared/src/UI/components/Image/index.tsx  |  13 +-
 packages/shared/src/UI/components/Linking.tsx |   2 +-
 .../src/UI/components/LoadingStatus/index.tsx |   4 +-
 .../src/UI/components/Markdown/index.tsx      |   4 +-
 .../UI/components/MaskPluginWrapper/index.tsx |  17 +-
 .../PersonaAction/PersonaAction.tsx           |   6 +-
 .../PersonaSelectPanel/PersonaItemUI.tsx      |   6 +-
 .../src/UI/components/PersonaWallet/index.tsx |   8 +-
 .../UI/components/PluginCardFrame/index.tsx   |  14 +-
 .../src/UI/components/PluginGuide/index.tsx   |  14 +-
 .../src/UI/components/PriceChange/index.tsx   |   2 +-
 .../UI/components/PriceChartRange/index.tsx   |   6 +-
 .../ProfileTabContent/WalletSettingsEntry.tsx |   2 +-
 .../src/UI/components/ProviderIcon/index.tsx  |   4 +-
 .../shared/src/UI/components/QRCode/index.tsx |   3 +-
 .../src/UI/components/ReloadStatus/index.tsx  |   2 +-
 .../SelectGasSettingsToolbar/index.tsx        |  10 +-
 .../UI/components/SelectTokenChip/index.tsx   |   2 +-
 .../UI/components/SettingsBoard/GasForm.tsx   |  10 +-
 .../UI/components/SettingsBoard/GasOption.tsx |   8 +-
 .../SettingsBoard/GasOptionSelector.tsx       |   3 +-
 .../components/SettingsBoard/GasSection.tsx   |   8 +-
 .../SettingsBoard/SlippageToleranceForm.tsx   |   3 +-
 .../SocialAccountList/SocialListItem.tsx      |  10 +-
 .../UI/components/SocialAccountList/index.tsx |   2 +-
 .../UI/components/SourceSwitcher/index.tsx    |   3 +-
 .../src/UI/components/TokenIcon/index.tsx     |   2 +-
 .../src/UI/components/TokenMenuList/index.tsx |   7 +-
 .../TokenTransactionConfirmModal/index.tsx    |   8 +-
 .../src/UI/components/TokenValue/index.tsx    |   4 +-
 .../TokenWithSocialGroupMenu/index.tsx        |  16 +-
 .../UI/components/UploadDropArea/index.tsx    |  30 ++--
 .../src/UI/components/WalletIcon/index.tsx    |   2 +-
 .../WalletStatusBar/PluginWalletStatusBar.tsx |  14 +-
 .../WalletStatusBar/WalletDescription.tsx     |  16 +-
 .../WalletStatusBox/TransactionList.tsx       |  17 +-
 .../UI/components/WalletStatusBox/index.tsx   |  26 +--
 .../usePendingTransactions.tsx                |   7 +-
 .../UI/contexts/components/InjectedDialog.tsx |  10 +-
 .../ApplicationBoard.tsx                      |   8 +-
 .../ApplicationSettingPluginList.tsx          |  11 +-
 .../ApplicationSettingPluginSwitch.tsx        |  18 +-
 .../src/UI/modals/ConfirmDialog/index.tsx     |   6 +-
 .../UI/modals/ConnectWalletModal/index.tsx    |   8 +-
 .../modals/GasSettingModal/GasSetting1559.tsx |  13 +-
 .../GasSettingModal/GasSettingModal.tsx       |   2 +-
 .../GasSettingModal/Prior1559GasSetting.tsx   |  13 +-
 .../src/UI/modals/ImageEditor/ImageEditor.tsx |   8 +-
 .../LeavePageConfirm.tsx                      |   4 +-
 .../PersonaSelectPanelDialog.tsx              |   4 +-
 .../SelectFungibleTokenDialog.tsx             |   8 +-
 .../SelectProviderModal/GuideDialog.tsx       |   8 +-
 .../PluginProviderRender.tsx                  |   6 +-
 .../SelectProviderModal/ProviderItem.tsx      |  10 +-
 .../WalletConnectQRCodeModal/QRCodeDialog.tsx |   4 +-
 .../WalletRiskWarning.tsx                     |  11 +-
 .../src/UI/wallet/DeriveWalletTable.tsx       |  24 +--
 .../shared/src/hooks/useLineChart/index.ts    |  19 +-
 packages/shared/src/hooks/useMenu.tsx         |   6 +-
 .../shared/src/hooks/usePriceLineChart.ts     |   2 +-
 packages/theme/src/CSSVariables/index.ts      |   1 -
 packages/theme/src/CSSVariables/vars.ts       |  44 -----
 packages/theme/src/Components/Alert/index.tsx |  19 +-
 .../SearchableList/SearchableList.tsx         |  10 +-
 .../theme/src/Components/Tabs/BaseTab.tsx     |  19 +-
 .../theme/src/Components/Tabs/FlexibleTab.tsx |   8 +-
 .../theme/src/Components/Tabs/RoundTab.tsx    |   8 +-
 packages/theme/src/Components/Tabs/index.tsx  |  38 ++--
 .../theme/src/Components/TextField/index.tsx  |  27 +--
 packages/theme/src/Theme/colors.ts            |  47 +++++
 .../theme/src/Theme/component-changes.tsx     | 121 +++++++------
 packages/theme/src/Theme/index.ts             |   4 +-
 packages/theme/src/Theme/theme.ts             | 163 +++++++++---------
 packages/theme/src/index.ts                   |   1 -
 429 files changed, 2379 insertions(+), 2242 deletions(-)
 delete mode 100644 packages/theme/src/CSSVariables/vars.ts

diff --git a/eslint.config.js b/eslint.config.js
index 7f3c27094b15..d1e3eeec0bfc 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -219,6 +219,20 @@ const avoidMistakeRules = {
     'no-template-curly-in-string': 'error', // "${expr}" looks like a bug
     'no-unmodified-loop-condition': 'error', // loop bug
     'no-unreachable-loop': 'error', // loop bug
+    'no-restricted-syntax': [
+        'error',
+        {
+            selector:
+                "MemberExpression[object.type='MemberExpression'][object.object.type='Identifier'][object.object.name='theme'][object.property.type='Identifier'][object.property.name='palette']",
+            message:
+                'Use theme.vars.palette for color values and theme.applyStyles() for color-scheme-specific styles.',
+        },
+        {
+            selector: "JSXAttribute[name.name='style'] ObjectExpression > Property[key.value=/^--/]",
+            message:
+                'Use sx={(theme) => ({ ...theme.applyStyles(...) })} for CSS custom properties that vary by color scheme.',
+        },
+    ],
     // 'array-callback-return': 'error', // .map .some ... calls should have a return value
     eqeqeq: 'error', // ===
     'no-restricted-globals': [
@@ -350,6 +364,11 @@ const moduleSystemRules = {
                     message: 'Avoid using type unsafe methods.',
                     importNames: ['get'],
                 },
+                {
+                    name: '@mui/material',
+                    importNames: ['alpha'],
+                    message: 'Use theme.vars.palette and alpha from @masknet/theme instead.',
+                },
                 {
                     name: 'viem',
                     message:
diff --git a/packages/mask/content-script/components/CompositionDialog/Composition.tsx b/packages/mask/content-script/components/CompositionDialog/Composition.tsx
index 80280482b304..5e861915b90c 100644
--- a/packages/mask/content-script/components/CompositionDialog/Composition.tsx
+++ b/packages/mask/content-script/components/CompositionDialog/Composition.tsx
@@ -11,10 +11,10 @@ import {
     currentPersonaIdentifier,
 } from '@masknet/shared-base'
 import { useValueRef } from '@masknet/shared-base-ui'
-import { makeStyles } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventID, EventType } from '@masknet/web3-telemetry/types'
-import { DialogContent, alpha } from '@mui/material'
+import { DialogContent } from '@mui/material'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useAsync } from 'react-use'
 import { useCurrentPersona, usePersonasFromDB } from '../../../shared-ui/hooks/index.js'
@@ -42,7 +42,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     persona: {
         padding: 0,
-        background: alpha(theme.palette.maskColor.bottom, 0.8),
+        background: alpha(theme.vars.palette.maskColor.bottom, 0.8),
         width: 'auto',
         boxShadow: 'none',
     },
diff --git a/packages/mask/content-script/components/CompositionDialog/CompositionUI.tsx b/packages/mask/content-script/components/CompositionDialog/CompositionUI.tsx
index a86e7ad22097..980b8e643582 100644
--- a/packages/mask/content-script/components/CompositionDialog/CompositionUI.tsx
+++ b/packages/mask/content-script/components/CompositionDialog/CompositionUI.tsx
@@ -8,7 +8,7 @@ import {
     useRef,
     useState,
 } from 'react'
-import { Button, DialogActions, Typography, alpha } from '@mui/material'
+import { Button, DialogActions, Typography } from '@mui/material'
 import type { EncryptTargetPublic } from '@masknet/encryption'
 import { Icons } from '@masknet/icons'
 import {
@@ -25,7 +25,7 @@ import {
     type ProfileIdentifier,
     type ProfileInformation,
 } from '@masknet/shared-base'
-import { makeStyles } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import type { SerializableTypedMessages, TypedMessage } from '@masknet/typed-message'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventType, EventID } from '@masknet/web3-telemetry/types'
@@ -58,13 +58,13 @@ const useStyles = makeStyles()((theme) => ({
     optionTitle: {
         lineHeight: '18px',
         fontSize: 14,
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         marginRight: 12,
     },
     editorWrapper: {
         flex: 1,
         width: 568,
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         padding: 0,
         boxSizing: 'border-box',
         borderRadius: 8,
@@ -73,16 +73,16 @@ const useStyles = makeStyles()((theme) => ({
     icon: {
         width: 18,
         height: 18,
-        fill: theme.palette.text.buttonText,
+        fill: theme.vars.palette.text.buttonText,
     },
     action: {
         height: 68,
         padding: '0 16px',
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                ' 0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12);',
-        background: alpha(theme.palette.maskColor.bottom, 0.8),
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
+        background: alpha(theme.vars.palette.maskColor.bottom, 0.8),
         justifyContent: 'space-between',
         display: 'flex',
     },
diff --git a/packages/mask/content-script/components/CompositionDialog/EncryptionMethodSelector.tsx b/packages/mask/content-script/components/CompositionDialog/EncryptionMethodSelector.tsx
index a4cebf44378d..3f7b72c5eb3a 100644
--- a/packages/mask/content-script/components/CompositionDialog/EncryptionMethodSelector.tsx
+++ b/packages/mask/content-script/components/CompositionDialog/EncryptionMethodSelector.tsx
@@ -10,13 +10,13 @@ const useStyles = makeStyles()((theme) => ({
         fontFamily: 'sans-serif',
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         marginRight: 12,
     },
     divider: {
         width: '100%',
         height: 1,
-        background: theme.palette.divider,
+        background: theme.vars.palette.divider,
         margin: '8px 0',
     },
 }))
diff --git a/packages/mask/content-script/components/CompositionDialog/EncryptionTargetSelector.tsx b/packages/mask/content-script/components/CompositionDialog/EncryptionTargetSelector.tsx
index 0c034f70b4fd..a8f67cb6536a 100644
--- a/packages/mask/content-script/components/CompositionDialog/EncryptionTargetSelector.tsx
+++ b/packages/mask/content-script/components/CompositionDialog/EncryptionTargetSelector.tsx
@@ -18,17 +18,17 @@ const useStyles = makeStyles()((theme) => ({
     optionTitle: {
         lineHeight: '18px',
         fontSize: 14,
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         marginRight: 12,
     },
     divider: {
         width: '100%',
         height: 1,
-        background: theme.palette.divider,
+        background: theme.vars.palette.divider,
         margin: '8px 0',
     },
     mainTitle: {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         fontWeight: 700,
     },
     flex: {
@@ -42,7 +42,7 @@ const useStyles = makeStyles()((theme) => ({
     create: {
         cursor: 'pointer',
         fontWeight: 700,
-        color: theme.palette.maskColor.primary,
+        color: theme.vars.palette.maskColor.primary,
         textAlign: 'right',
     },
     rightIcon: {
diff --git a/packages/mask/content-script/components/CompositionDialog/PopoverListTrigger.tsx b/packages/mask/content-script/components/CompositionDialog/PopoverListTrigger.tsx
index 8de1499668b1..8e086bc06e70 100644
--- a/packages/mask/content-script/components/CompositionDialog/PopoverListTrigger.tsx
+++ b/packages/mask/content-script/components/CompositionDialog/PopoverListTrigger.tsx
@@ -10,11 +10,9 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 4,
     },
     paperRoot: {
-        background: theme.palette.maskColor.bottom,
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 4px 30px rgba(255, 255, 255, 0.15)'
-            :   '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        background: theme.vars.palette.maskColor.bottom,
+        boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        ...theme.applyStyles('dark', { boxShadow: '0px 4px 30px rgba(255, 255, 255, 0.15)' }),
     },
     popperText: {
         fontSize: 14,
@@ -39,7 +37,7 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '18px',
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 
diff --git a/packages/mask/content-script/components/GuideStep/index.tsx b/packages/mask/content-script/components/GuideStep/index.tsx
index 303e8c4d4efa..ac97617651c6 100644
--- a/packages/mask/content-script/components/GuideStep/index.tsx
+++ b/packages/mask/content-script/components/GuideStep/index.tsx
@@ -17,11 +17,13 @@ import { Trans } from '@lingui/react/macro'
 const useStyles = makeStyles()((theme) => ({
     container: {
         position: 'absolute',
-        boxShadow: `0 0 0 3000px ${theme.palette.mode === 'light' ? 'rgba(0,0,0,.3)' : 'rgba(110,118,125,.3)'}`,
+        boxShadow: '0 0 0 3000px rgba(0,0,0,.3)',
+        ...theme.applyStyles('dark', { boxShadow: '0 0 0 3000px rgba(110,118,125,.3)' }),
         borderRadius: 8,
     },
     noBoxShadowCover: {
-        boxShadow: `0 0 0 3000px ${theme.palette.mode === 'light' ? 'rgba(0,0,0,.2)' : 'rgba(110,118,125,.2)'}`,
+        boxShadow: '0 0 0 3000px rgba(0,0,0,.2)',
+        ...theme.applyStyles('dark', { boxShadow: '0 0 0 3000px rgba(110,118,125,.2)' }),
     },
     target: {
         background: 'transparent',
diff --git a/packages/mask/content-script/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx b/packages/mask/content-script/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx
index 291bc944f489..9e4950a8ea3f 100644
--- a/packages/mask/content-script/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx
@@ -79,7 +79,7 @@ const useStyles = makeStyles<{ canAppendShareTarget: boolean }>()((theme, { canA
             justifyContent: 'center',
             alignItems: 'center',
             padding: theme.spacing(0.5, 1),
-            background: theme.palette.maskColor.bg,
+            background: theme.vars.palette.maskColor.bg,
             borderRadius: '999px',
             cursor: canAppendShareTarget ? 'pointer' : 'default',
         },
@@ -88,7 +88,7 @@ const useStyles = makeStyles<{ canAppendShareTarget: boolean }>()((theme, { canA
             justifyContent: 'center',
             alignItems: 'center',
             marginLeft: 8,
-            background: theme.palette.maskColor.primary,
+            background: theme.vars.palette.maskColor.primary,
             borderRadius: '50%',
             height: 16,
             width: 16,
@@ -114,7 +114,7 @@ export const DecryptPostSuccess = memo(function DecryptPostSuccess(props: Decryp
                                 <Trans>Only visible to yourself</Trans>
                             </Typography>
                             <div className={classes.iconAdd}>
-                                <Icons.Plus size={12} color={theme.palette.maskColor.white} />
+                                <Icons.Plus size={12} color={theme.vars.palette.maskColor.white} />
                             </div>
                         </section>
                     }
diff --git a/packages/mask/content-script/components/InjectedComponents/DecryptedPost/RecipientsToolTip.tsx b/packages/mask/content-script/components/InjectedComponents/DecryptedPost/RecipientsToolTip.tsx
index d15fcfa046d8..62fb185cdcbe 100644
--- a/packages/mask/content-script/components/InjectedComponents/DecryptedPost/RecipientsToolTip.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/DecryptedPost/RecipientsToolTip.tsx
@@ -8,7 +8,7 @@ const useStyles = makeStyles<{ isMore: boolean }>()((theme, { isMore }) => {
     return {
         iconStack: {
             padding: theme.spacing(0.5),
-            background: theme.palette.maskColor.bg,
+            background: theme.vars.palette.maskColor.bg,
             borderRadius: '999px',
             cursor: 'pointer',
             display: 'inline-flex',
@@ -40,7 +40,7 @@ const useStyles = makeStyles<{ isMore: boolean }>()((theme, { isMore }) => {
             justifyContent: 'center',
             alignItems: 'center',
             marginLeft: isMore ? 4 : 10,
-            background: theme.palette.maskColor.primary,
+            background: theme.vars.palette.maskColor.primary,
             borderRadius: '50%',
             height: 16,
             width: 16,
@@ -64,10 +64,10 @@ export function RecipientsToolTip({ recipients, openDialog }: RecipientsToolTipP
                 <Avatar key={recipient.identifier.userId} classes={{ root: classes.icon }} person={recipient} />
             ))}
             {isMore ?
-                <Icons.More size={13} className={classes.iconMore} color={theme.palette.text.primary} />
+                <Icons.More size={13} className={classes.iconMore} color={theme.vars.palette.text.primary} />
             :   null}
             <div className={classes.iconAdd}>
-                <Icons.Plus size={12} color={theme.palette.maskColor.white} />
+                <Icons.Plus size={12} color={theme.vars.palette.maskColor.white} />
             </div>
         </div>
     )
diff --git a/packages/mask/content-script/components/InjectedComponents/DisabledPluginSuggestion.tsx b/packages/mask/content-script/components/InjectedComponents/DisabledPluginSuggestion.tsx
index 76d7a7a9ceee..bedc861b8935 100644
--- a/packages/mask/content-script/components/InjectedComponents/DisabledPluginSuggestion.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/DisabledPluginSuggestion.tsx
@@ -124,7 +124,7 @@ export function PossiblePluginSuggestionUISingle(props: {
                     variant="roundedDark"
                     onClick={onClick}
                     sx={{
-                        backgroundColor: theme.palette.maskColor.dark,
+                        backgroundColor: theme.vars.palette.maskColor.dark,
                         color: 'white',
                         width: '254px',
                         height: '36px',
@@ -132,7 +132,7 @@ export function PossiblePluginSuggestionUISingle(props: {
                         fontWeight: 700,
                         lineHeight: 1.5,
                         '&:hover': {
-                            backgroundColor: theme.palette.maskColor.dark,
+                            backgroundColor: theme.vars.palette.maskColor.dark,
                         },
                     }}>
                     {buttonLabel}
diff --git a/packages/mask/content-script/components/InjectedComponents/PermissionBoundary.tsx b/packages/mask/content-script/components/InjectedComponents/PermissionBoundary.tsx
index 56112d425335..2060169d7373 100644
--- a/packages/mask/content-script/components/InjectedComponents/PermissionBoundary.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/PermissionBoundary.tsx
@@ -61,7 +61,7 @@ export function MaskPostExtraPluginWrapperWithPermission({
                         wrapperProps={props.definition.wrapperProps}
                         content={
                             <Typography
-                                color={theme.palette.maskColor.publicMain}
+                                color={theme.vars.palette.maskColor.publicMain}
                                 component="div"
                                 sx={{
                                     fontSize: 14,
diff --git a/packages/mask/content-script/components/InjectedComponents/ProfileCard/ProfileBar.tsx b/packages/mask/content-script/components/InjectedComponents/ProfileCard/ProfileBar.tsx
index c7d410c1958b..5e7379b3088a 100644
--- a/packages/mask/content-script/components/InjectedComponents/ProfileCard/ProfileBar.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/ProfileCard/ProfileBar.tsx
@@ -55,7 +55,7 @@ const useStyles = makeStyles()((theme) => ({
         },
     },
     nickname: {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         fontWeight: 700,
         fontSize: 18,
         lineHeight: '22px',
@@ -70,7 +70,7 @@ const useStyles = makeStyles()((theme) => ({
         columnGap: 2,
     },
     address: {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         fontSize: 14,
         height: 18,
         fontWeight: 400,
@@ -83,7 +83,7 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '14px',
         height: 14,
         overflow: 'hidden',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         cursor: 'pointer',
         flexShrink: 0,
     },
@@ -169,7 +169,7 @@ export const ProfileBar = memo<ProfileBarProps>(function ProfileBar({
                         </Link>
                         <Icons.ArrowDrop
                             size={14}
-                            color={theme.palette.text.primary}
+                            color={theme.vars.palette.text.primary}
                             onClick={() => {
                                 setWalletMenuOpen((v) => !v)
                             }}
diff --git a/packages/mask/content-script/components/InjectedComponents/ProfileCard/ProfileCardTitle.tsx b/packages/mask/content-script/components/InjectedComponents/ProfileCard/ProfileCardTitle.tsx
index 47042fe5cf90..fc64f5272e3c 100644
--- a/packages/mask/content-script/components/InjectedComponents/ProfileCard/ProfileCardTitle.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/ProfileCard/ProfileCardTitle.tsx
@@ -35,7 +35,7 @@ const useStyles = makeStyles()((theme) => {
         },
         gearIcon: {
             marginLeft: theme.spacing(1),
-            color: theme.palette.text.primary,
+            color: theme.vars.palette.text.primary,
             cursor: 'pointer',
         },
         tipButton: {
@@ -43,7 +43,7 @@ const useStyles = makeStyles()((theme) => {
             width: 40,
             height: 40,
             borderRadius: 40,
-            border: `1px solid ${theme.palette.maskColor.line}`,
+            border: `1px solid ${theme.vars.palette.maskColor.line}`,
         },
     }
 })
diff --git a/packages/mask/content-script/components/InjectedComponents/ProfileCard/index.tsx b/packages/mask/content-script/components/InjectedComponents/ProfileCard/index.tsx
index eae43b7bfb89..15aed586c1b6 100644
--- a/packages/mask/content-script/components/InjectedComponents/ProfileCard/index.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/ProfileCard/index.tsx
@@ -44,11 +44,11 @@ const useStyles = makeStyles()((theme) => {
             height: '100%',
             overscrollBehavior: 'contain',
             borderRadius: theme.spacing(1.5),
-            boxShadow: theme.palette.shadow.popup,
-            backgroundColor: theme.palette.maskColor.bottom,
+            boxShadow: theme.vars.palette.shadow.popup,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
         },
         header: {
-            background: theme.palette.maskColor.modalTitleBg,
+            background: theme.vars.palette.maskColor.modalTitleBg,
             padding: theme.spacing(2, 2, 0, 2),
             boxSizing: 'border-box',
             flexShrink: 0,
@@ -56,7 +56,7 @@ const useStyles = makeStyles()((theme) => {
         content: {
             position: 'relative',
             flexGrow: 1,
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             overflow: 'auto',
             scrollbarWidth: 'none',
             '::-webkit-scrollbar': {
@@ -81,7 +81,7 @@ const useStyles = makeStyles()((theme) => {
             display: 'flex',
             justifyContent: 'flex-end',
             alignItems: 'center',
-            background: theme.palette.maskColor.bg,
+            background: theme.vars.palette.maskColor.bg,
             backdropFilter: 'blur(5px)',
             padding: theme.spacing(1.5),
             boxSizing: 'border-box',
@@ -93,13 +93,13 @@ const useStyles = makeStyles()((theme) => {
             marginLeft: theme.spacing(0.25),
         },
         cardName: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             fontWeight: 700,
             marginRight: 'auto',
             marginLeft: theme.spacing(0.5),
         },
         powered: {
-            color: theme.palette.text.secondary,
+            color: theme.vars.palette.text.secondary,
             fontWeight: 700,
         },
     }
@@ -239,7 +239,7 @@ export const ProfileCard = memo(({ identity, currentAddress, ...rest }: Props) =
                                     variant="body1"
                                     component="strong"
                                     sx={{
-                                        color: (theme) => theme.palette.text.primary,
+                                        color: (theme) => theme.vars.palette.text.primary,
                                         fontWeight: 700,
                                         fontSize: 'inherit',
                                     }}>
diff --git a/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx
index 06e019087cb5..b99d036f8b34 100644
--- a/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx
@@ -57,7 +57,7 @@ import { SearchResultInspector } from './SearchResultInspector.js'
 const useStyles = makeStyles()((theme) => ({
     root: {
         width: Sniffings.is_facebook_page ? 876 : 'auto',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     container: {
         background:
@@ -97,7 +97,7 @@ const useStyles = makeStyles()((theme) => ({
         position: 'relative',
     },
     gearIcon: {
-        color: theme.palette.maskColor.dark,
+        color: theme.vars.palette.maskColor.dark,
     },
     currentAddress: {
         fontSize: '18px',
@@ -106,11 +106,11 @@ const useStyles = makeStyles()((theme) => ({
         textOverflow: 'ellipsis',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
-        color: theme.palette.maskColor.dark,
+        color: theme.vars.palette.maskColor.dark,
     },
     mainLinkIcon: {
         margin: '0px 2px',
-        color: theme.palette.maskColor.secondaryDark,
+        color: theme.vars.palette.maskColor.secondaryDark,
     },
     reload: {
         borderRadius: 20,
@@ -326,7 +326,7 @@ function Content(props: ProfileTabContentProps) {
             <ThemeProvider theme={MaskLightTheme}>
                 <div className={classes.root}>
                     <PluginCardFrameMini>
-                        <LoadingStatus iconSize={24} color={theme.palette.maskColor.main}>
+                        <LoadingStatus iconSize={24} color={theme.vars.palette.maskColor.main}>
                             <Trans>Loading account information...</Trans>
                         </LoadingStatus>
                     </PluginCardFrameMini>
@@ -460,7 +460,7 @@ function Content(props: ProfileTabContentProps) {
                                     fontSize: '14px',
                                     fontWeight: 700,
                                     marginRight: '5px',
-                                    color: (theme) => theme.palette.maskColor.secondaryDark,
+                                    color: (theme) => theme.vars.palette.maskColor.secondaryDark,
                                 }}>
                                 Powered by
                             </Typography>
@@ -469,7 +469,7 @@ function Content(props: ProfileTabContentProps) {
                                     fontSize: '14px',
                                     fontWeight: 700,
                                     marginRight: '4px',
-                                    color: (theme) => theme.palette.maskColor.dark,
+                                    color: (theme) => theme.vars.palette.maskColor.dark,
                                 }}>
                                 Mask Network
                             </Typography>
diff --git a/packages/mask/content-script/components/InjectedComponents/SearchResultInspector.tsx b/packages/mask/content-script/components/InjectedComponents/SearchResultInspector.tsx
index dbc6a735a6af..0f18e3ed08cb 100644
--- a/packages/mask/content-script/components/InjectedComponents/SearchResultInspector.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/SearchResultInspector.tsx
@@ -33,7 +33,7 @@ const useStyles = makeStyles<{ isProfilePage?: boolean; searchType?: SearchResul
         tabContent: {
             position: 'relative',
             maxHeight: 478,
-            borderBottom: isProfilePage ? 'unset' : `1px solid ${theme.palette.divider}`,
+            borderBottom: isProfilePage ? 'unset' : `1px solid ${theme.vars.palette.divider}`,
             overflow: 'auto',
             '&::-webkit-scrollbar': {
                 display: 'none',
diff --git a/packages/mask/content-script/components/InjectedComponents/SelectPeopleDialog.tsx b/packages/mask/content-script/components/InjectedComponents/SelectPeopleDialog.tsx
index eda2a54e3052..233899387b15 100644
--- a/packages/mask/content-script/components/InjectedComponents/SelectPeopleDialog.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/SelectPeopleDialog.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { ActionButton, makeStyles } from '@masknet/theme'
-import { Button, DialogActions, DialogContent, alpha } from '@mui/material'
+import { alpha, ActionButton, makeStyles } from '@masknet/theme'
+import { Button, DialogActions, DialogContent } from '@mui/material'
 import { InjectedDialog } from '@masknet/shared'
 import { EMPTY_LIST, type ProfileInformation as Profile } from '@masknet/shared-base'
 import { uniqBy } from 'lodash-es'
@@ -33,31 +33,31 @@ const useStyles = makeStyles()((theme) => ({
         padding: 16,
         boxSizing: 'border-box',
         alignItems: 'center',
-        background: alpha(theme.palette.maskColor.bottom, 0.8),
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                ' 0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12);',
+        background: alpha(theme.vars.palette.maskColor.bottom, 0.8),
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
         borderRadius: '0px 0px 12px 12px',
         flex: 1,
         backdropFilter: 'blur(8px)',
     },
 
     cancel: {
-        color: theme.palette.maskColor.main,
-        background: theme.palette.maskColor.thirdMain,
+        color: theme.vars.palette.maskColor.main,
+        background: theme.vars.palette.maskColor.thirdMain,
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
         height: 40,
         '&:hover': {
-            color: theme.palette.maskColor.main,
-            background: theme.palette.maskColor.thirdMain,
+            color: theme.vars.palette.maskColor.main,
+            background: theme.vars.palette.maskColor.thirdMain,
         },
     },
     share: {
-        color: theme.palette.maskColor.bottom,
-        background: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.main,
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
diff --git a/packages/mask/content-script/components/InjectedComponents/SetupGuide/PinExtension.tsx b/packages/mask/content-script/components/InjectedComponents/SetupGuide/PinExtension.tsx
index 7a7ef46c77f5..7b987c29554a 100644
--- a/packages/mask/content-script/components/InjectedComponents/SetupGuide/PinExtension.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/SetupGuide/PinExtension.tsx
@@ -1,6 +1,6 @@
 import { Icons } from '@masknet/icons'
 import { SetupGuideStep } from '@masknet/shared-base'
-import { MaskColorVar, makeStyles } from '@masknet/theme'
+import { makeStyles } from '@masknet/theme'
 import { Extension as ExtensionIcon } from '@mui/icons-material'
 import { Box, Button, Typography } from '@mui/material'
 import { WizardDialog } from './WizardDialog.js'
@@ -24,8 +24,8 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         wordBreak: 'keep-all',
         '&,&:hover': {
-            color: `${MaskColorVar.twitterButtonText} !important`,
-            background: `${MaskColorVar.twitterButton} !important`,
+            color: `${theme.vars.palette.text.twitterButtonText} !important`,
+            background: `${theme.vars.palette.text.twitterButton} !important`,
         },
     },
     tip: {
@@ -50,7 +50,7 @@ const useStyles = makeStyles()((theme) => ({
     line: {
         width: 100,
         height: 1,
-        borderTop: `dashed 1px  ${MaskColorVar.borderSecondary}`,
+        borderTop: `dashed 1px ${theme.vars.palette.maskColor.setupGuideBorder}`,
     },
     name: {
         fontSize: 16,
diff --git a/packages/mask/content-script/components/InjectedComponents/SetupGuide/WizardDialog.tsx b/packages/mask/content-script/components/InjectedComponents/SetupGuide/WizardDialog.tsx
index 3047cd032f0a..67b70f8813cb 100644
--- a/packages/mask/content-script/components/InjectedComponents/SetupGuide/WizardDialog.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/SetupGuide/WizardDialog.tsx
@@ -51,8 +51,12 @@ const useWizardDialogStyles = makeStyles()((theme) => ({
     root: {
         padding: theme.spacing(3),
         position: 'relative',
-        boxShadow: theme.palette.mode === 'dark' ? 'none' : theme.shadows[4],
-        border: `${theme.palette.mode === 'dark' ? 'solid' : 'none'} 1px ${theme.palette.divider}`,
+        boxShadow: theme.shadows[4],
+        border: `none 1px ${theme.vars.palette.divider}`,
+        ...theme.applyStyles('dark', {
+            boxShadow: 'none',
+            border: `solid 1px ${theme.vars.palette.divider}`,
+        }),
         borderRadius: 20,
         [theme.breakpoints.down('sm')]: {
             position: 'fixed',
@@ -62,7 +66,7 @@ const useWizardDialogStyles = makeStyles()((theme) => ({
             alignSelf: 'center',
             borderRadius: 0,
             boxShadow: 'none',
-            border: `solid 1px ${theme.palette.divider}`,
+            border: `solid 1px ${theme.vars.palette.divider}`,
             width: '100%',
         },
         userSelect: 'none',
@@ -74,7 +78,7 @@ const useWizardDialogStyles = makeStyles()((theme) => ({
         overflow: 'hidden',
     },
     close: {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         position: 'absolute',
         right: 10,
         top: 10,
diff --git a/packages/mask/content-script/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/content-script/components/InjectedComponents/ToolboxUnstyled.tsx
index 75b59d1da6e6..a35c52ded0af 100644
--- a/packages/mask/content-script/components/InjectedComponents/ToolboxUnstyled.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/ToolboxUnstyled.tsx
@@ -11,6 +11,8 @@ import {
     ListItemText as MuiListItemText,
     Box,
     useTheme,
+    type SxProps,
+    type Theme,
 } from '@mui/material'
 import { FiberManualRecord as FiberManualRecordIcon } from '@mui/icons-material'
 import { ProviderType } from '@masknet/web3-shared-evm'
@@ -45,6 +47,7 @@ const useStyles = makeStyles()(() => ({
 }))
 
 interface ToolboxHintProps extends HTMLProps<HTMLDivElement> {
+    sx?: SxProps<Theme>
     Container?: React.ComponentType<React.PropsWithChildren>
     ListItemButton?: React.ComponentType<Pick<ListItemButtonProps, 'onClick' | 'children'>>
     ListItemText?: React.ComponentType<Pick<ListItemTextProps, 'primary'>>
@@ -131,7 +134,7 @@ function ToolboxHintForWallet(props: ToolboxHintProps) {
                                 size={iconSize}
                                 badgeSize={badgeSize}
                                 mainIcon={provider.icon}
-                                badgeIconBorderColor={theme.palette.background.paper}
+                                badgeIconBorderColor={theme.vars.palette.background.paper}
                             />
                         :   <Icons.Wallet size={iconSize} />}
                     </ListItemIcon>
diff --git a/packages/mask/content-script/components/shared/SelectProfileUI/SelectProfileUI.tsx b/packages/mask/content-script/components/shared/SelectProfileUI/SelectProfileUI.tsx
index 280e0ee836c7..585ac66ad77f 100644
--- a/packages/mask/content-script/components/shared/SelectProfileUI/SelectProfileUI.tsx
+++ b/packages/mask/content-script/components/shared/SelectProfileUI/SelectProfileUI.tsx
@@ -41,7 +41,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         flexDirection: 'column',
         gap: 12,
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         whiteSpace: 'nowrap',
     },
     listParent: {
@@ -64,7 +64,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'flex-start',
     },
     mainText: {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
     },
 }))
 
diff --git a/packages/mask/content-script/components/shared/SelectRecipients/ProfileInList.tsx b/packages/mask/content-script/components/shared/SelectRecipients/ProfileInList.tsx
index 19601219451a..89ade0a77659 100644
--- a/packages/mask/content-script/components/shared/SelectRecipients/ProfileInList.tsx
+++ b/packages/mask/content-script/components/shared/SelectRecipients/ProfileInList.tsx
@@ -31,7 +31,7 @@ const useStyles = makeStyles()((theme) => ({
         marginLeft: theme.spacing(0.5),
     },
     highLightBg: {
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
     },
     avatarBox: {
         padding: '6px 0px 6px 8px',
diff --git a/packages/mask/content-script/components/shared/SelectRecipients/SelectRecipientsDialog.tsx b/packages/mask/content-script/components/shared/SelectRecipients/SelectRecipientsDialog.tsx
index 22d8dcceb7b2..9578fc82e587 100644
--- a/packages/mask/content-script/components/shared/SelectRecipients/SelectRecipientsDialog.tsx
+++ b/packages/mask/content-script/components/shared/SelectRecipients/SelectRecipientsDialog.tsx
@@ -3,7 +3,7 @@ import { compact } from 'lodash-es'
 import { Icons } from '@masknet/icons'
 import { ActionButtonPromise, EmptyStatus, InjectedDialog } from '@masknet/shared'
 import type { ProfileInformation as Profile } from '@masknet/shared-base'
-import { Boundary, LoadingBase, makeStyles } from '@masknet/theme'
+import { alpha, Boundary, LoadingBase, makeStyles } from '@masknet/theme'
 import { useLookupAddress } from '@masknet/web3-hooks-base'
 import Fuse from 'fuse.js'
 import {
@@ -15,7 +15,6 @@ import {
     InputBase,
     Stack,
     Typography,
-    alpha,
 } from '@mui/material'
 import { ProfileInList } from './ProfileInList.js'
 import { Trans, useLingui } from '@lingui/react/macro'
@@ -30,13 +29,13 @@ const useStyles = makeStyles()((theme) => ({
         padding: '4px 10px',
         borderRadius: 8,
         width: '100%',
-        background: theme.palette.maskColor.input,
+        background: theme.vars.palette.maskColor.input,
         fontSize: 14,
         marginBottom: 16,
     },
     inputFocused: {
-        background: theme.palette.maskColor.bottom,
-        borderColor: theme.palette.text.third,
+        background: theme.vars.palette.maskColor.bottom,
+        borderColor: theme.vars.palette.text.third,
     },
     paper: {
         height: 450,
@@ -56,11 +55,11 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         flexDirection: 'column',
         gap: 12,
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         whiteSpace: 'nowrap',
     },
     mainText: {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
     },
     listParent: {
         height: 400,
@@ -74,7 +73,7 @@ const useStyles = makeStyles()((theme) => ({
         },
         overflowY: 'auto',
         flex: 1,
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
     },
     list: {
         gridGap: '12px',
@@ -88,32 +87,32 @@ const useStyles = makeStyles()((theme) => ({
         padding: 16,
         boxSizing: 'border-box',
         alignItems: 'center',
-        background: alpha(theme.palette.maskColor.bottom, 0.8),
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                ' 0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12);',
+        background: alpha(theme.vars.palette.maskColor.bottom, 0.8),
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
         borderRadius: '0px 0px 12px 12px',
         flex: 1,
         backdropFilter: 'blur(8px)',
     },
     back: {
-        color: theme.palette.maskColor.main,
-        background: theme.palette.maskColor.thirdMain,
+        color: theme.vars.palette.maskColor.main,
+        background: theme.vars.palette.maskColor.thirdMain,
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
         '&:hover': {
-            color: theme.palette.maskColor.main,
-            background: theme.palette.maskColor.thirdMain,
+            color: theme.vars.palette.maskColor.main,
+            background: theme.vars.palette.maskColor.thirdMain,
             fontSize: 14,
             fontWeight: 700,
             lineHeight: '18px',
         },
     },
     done: {
-        color: theme.palette.maskColor.bottom,
-        background: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.main,
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
diff --git a/packages/mask/content-script/site-adaptors/facebook.com/injection/ProfileContent.tsx b/packages/mask/content-script/site-adaptors/facebook.com/injection/ProfileContent.tsx
index a0f568a61d70..323ba90a0ac5 100644
--- a/packages/mask/content-script/site-adaptors/facebook.com/injection/ProfileContent.tsx
+++ b/packages/mask/content-script/site-adaptors/facebook.com/injection/ProfileContent.tsx
@@ -1,5 +1,5 @@
 import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
-import { getMaskColor, makeStyles } from '@masknet/theme'
+import { makeStyles } from '@masknet/theme'
 import { ProfileTabContent } from '../../../components/InjectedComponents/ProfileTabContent.js'
 import { startWatch } from '../../../utils/startWatch.js'
 import { attachReactTreeWithContainer } from '../../../utils/shadow-root/renderInShadowRoot.js'
@@ -46,7 +46,7 @@ const useStyles = makeStyles()((theme) => {
                 fontSize: 28,
                 fontFamily: props.fontFamily,
                 fontWeight: 700,
-                color: getMaskColor(theme).textPrimary,
+                color: theme.vars.palette.maskColor.textPrimary,
             },
         },
         button: {
diff --git a/packages/mask/content-script/site-adaptors/facebook.com/ui-provider.ts b/packages/mask/content-script/site-adaptors/facebook.com/ui-provider.ts
index 497c89f024b7..293722341e7b 100644
--- a/packages/mask/content-script/site-adaptors/facebook.com/ui-provider.ts
+++ b/packages/mask/content-script/site-adaptors/facebook.com/ui-provider.ts
@@ -61,7 +61,10 @@ const useInjectedDialogClassesOverwriteFacebook = makeStyles()((theme) => {
             display: 'flex',
             alignItems: 'center',
             padding: '3px 16px',
-            borderBottom: `1px solid ${theme.palette.mode === 'dark' ? '#2f3336' : '#eff3f4'}`,
+            borderBottom: '1px solid #eff3f4',
+            ...theme.applyStyles('dark', {
+                borderBottom: '1px solid #2f3336',
+            }),
             '& > h2': {
                 display: 'inline-block',
                 whiteSpace: 'nowrap',
@@ -98,7 +101,10 @@ const useInjectedDialogClassesOverwriteFacebook = makeStyles()((theme) => {
             },
         },
         dialogBackdropRoot: {
-            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(110, 118, 125, 0.4)' : 'rgba(0, 0, 0, 0.4)',
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            ...theme.applyStyles('dark', {
+                backgroundColor: 'rgba(110, 118, 125, 0.4)',
+            }),
         },
     }
 })
diff --git a/packages/mask/content-script/site-adaptors/instagram.com/injection/ProfileTabContent.tsx b/packages/mask/content-script/site-adaptors/instagram.com/injection/ProfileTabContent.tsx
index 32621f16d3f1..484551864115 100644
--- a/packages/mask/content-script/site-adaptors/instagram.com/injection/ProfileTabContent.tsx
+++ b/packages/mask/content-script/site-adaptors/instagram.com/injection/ProfileTabContent.tsx
@@ -1,5 +1,5 @@
 import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
-import { getMaskColor, makeStyles } from '@masknet/theme'
+import { makeStyles } from '@masknet/theme'
 import { ProfileTabContent } from '../../../components/InjectedComponents/ProfileTabContent.js'
 import { startWatch } from '../../../utils/startWatch.js'
 import { attachReactTreeWithContainer } from '../../../utils/shadow-root/renderInShadowRoot.js'
@@ -37,7 +37,7 @@ const useStyles = makeStyles()((theme) => {
                 fontSize: 28,
                 fontFamily: props.fontFamily,
                 fontWeight: 700,
-                color: getMaskColor(theme).textPrimary,
+                color: theme.vars.palette.maskColor.textPrimary,
             },
         },
         button: {
diff --git a/packages/mask/content-script/site-adaptors/minds.com/injection/CommentBox.tsx b/packages/mask/content-script/site-adaptors/minds.com/injection/CommentBox.tsx
index 69313cf008f6..883d471e3bba 100644
--- a/packages/mask/content-script/site-adaptors/minds.com/injection/CommentBox.tsx
+++ b/packages/mask/content-script/site-adaptors/minds.com/injection/CommentBox.tsx
@@ -21,14 +21,23 @@ export default function injectCommentBoxAtMinds(): (signal: AbortSignal, current
                 height: 44,
                 borderRadius: 2,
                 padding: '2px 1em',
-                border: `1px solid ${theme.palette.mode === 'dark' ? '#414c57' : '#d3dbe3'}`,
+                border: '1px solid #d3dbe3',
+                ...theme.applyStyles('dark', {
+                    border: '1px solid #414c57',
+                }),
                 margin: '0 10px 10px',
-                color: theme.palette.mode === 'dark' ? '#fff' : '#43434d',
+                color: '#43434d',
+                ...theme.applyStyles('dark', {
+                    color: '#fff',
+                }),
                 fontWeight: 400,
             },
             input: {
                 '&::placeholder': {
-                    color: theme.palette.mode === 'dark' ? '#b8c1c' : '#72727c',
+                    color: '#72727c',
+                    ...theme.applyStyles('dark', {
+                        color: '#b8c1c',
+                    }),
                     opacity: 1,
                     fontWeight: 400,
                 },
diff --git a/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx b/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx
index ccadea0a9a9f..81df5a826b16 100644
--- a/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx
+++ b/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx
@@ -1,10 +1,9 @@
-import type { CSSProperties } from 'react'
 import { ToolboxHintUnstyled } from '../../../components/InjectedComponents/ToolboxUnstyled.js'
-import { styled, ListItemButton, Typography, ListItemIcon, useMediaQuery, useTheme } from '@mui/material'
+import { Box, styled, ListItemButton, Typography, ListItemIcon, useMediaQuery } from '@mui/material'
 
 const mindsBreakPoint = 1221 /** px */
 
-const Container = styled('div')`
+const Container = styled(Box)`
     height: 45px;
     margin-bottom: 10px;
     padding-left: 10px;
@@ -52,15 +51,14 @@ const Icon = styled(ListItemIcon)`
 
 export function ToolboxHintAtMinds(props: { category: 'wallet' | 'application' }) {
     const mini = useMediaQuery(`(max-width: ${mindsBreakPoint}px)`)
-    const theme = useTheme()
-
     return (
         <ToolboxHintUnstyled
-            style={
-                {
-                    '--nav-text-color': theme.palette.mode === 'dark' ? '#fff' : '#43434d',
-                } as CSSProperties
-            }
+            sx={(theme) => ({
+                '--nav-text-color': '#43434d',
+                ...theme.applyStyles('dark', {
+                    '--nav-text-color': '#fff',
+                }),
+            })}
             mini={mini}
             Container={Container}
             ListItemButton={Item}
diff --git a/packages/mask/content-script/site-adaptors/minds.com/ui-provider.ts b/packages/mask/content-script/site-adaptors/minds.com/ui-provider.ts
index c8648b5fdf07..0894cc4df61c 100644
--- a/packages/mask/content-script/site-adaptors/minds.com/ui-provider.ts
+++ b/packages/mask/content-script/site-adaptors/minds.com/ui-provider.ts
@@ -71,7 +71,7 @@ const useInjectedDialogClassesOverwriteMinds = makeStyles()((theme) => {
             alignItems: 'center',
             padding: 16,
             position: 'relative',
-            background: theme.palette.maskColor.modalTitleBg,
+            background: theme.vars.palette.maskColor.modalTitleBg,
             borderBottom: 'none',
             '& > p': {
                 fontSize: 18,
@@ -90,7 +90,7 @@ const useInjectedDialogClassesOverwriteMinds = makeStyles()((theme) => {
             },
         },
         dialogContent: {
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             [smallQuery]: {
                 display: 'flex',
                 flexDirection: 'column',
@@ -100,7 +100,7 @@ const useInjectedDialogClassesOverwriteMinds = makeStyles()((theme) => {
             },
         },
         dialogActions: {
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             padding: '6px 16px',
             [smallQuery]: {
                 display: 'flex',
@@ -112,7 +112,8 @@ const useInjectedDialogClassesOverwriteMinds = makeStyles()((theme) => {
             },
         },
         dialogBackdropRoot: {
-            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(110, 118, 125, 0.4)' : 'rgba(0, 0, 0, 0.4)',
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            ...theme.applyStyles('dark', { backgroundColor: 'rgba(110, 118, 125, 0.4)' }),
         },
     }
 })
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/customization/custom.ts b/packages/mask/content-script/site-adaptors/twitter.com/customization/custom.ts
index e527ecb2a415..8543cd269bea 100644
--- a/packages/mask/content-script/site-adaptors/twitter.com/customization/custom.ts
+++ b/packages/mask/content-script/site-adaptors/twitter.com/customization/custom.ts
@@ -14,8 +14,8 @@ export function useThemeTwitterVariant(baseTheme: Theme) {
 
         const TwitterTheme = produce(baseTheme, (theme) => {
             if (themeSettings.isDim) {
-                theme.palette.maskColor.bottom = '#15202B'
-                theme.palette.maskColor.secondaryBottom = 'rgba(21, 32, 43, 0.8)'
+                theme.vars.palette.maskColor.bottom = '#15202B'
+                theme.vars.palette.maskColor.secondaryBottom = 'rgba(21, 32, 43, 0.8)'
             }
 
             theme.palette.primary = {
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/injection/PostDialogHint.tsx b/packages/mask/content-script/site-adaptors/twitter.com/injection/PostDialogHint.tsx
index 87b8d7a1570b..028ded9a858d 100644
--- a/packages/mask/content-script/site-adaptors/twitter.com/injection/PostDialogHint.tsx
+++ b/packages/mask/content-script/site-adaptors/twitter.com/injection/PostDialogHint.tsx
@@ -1,9 +1,8 @@
 import { MutationObserverWatcher, type LiveSelector } from '@dimensiondev/holoflows-kit'
 import { useLingui } from '@lingui/react/macro'
 import { CrossIsolationMessages, sayHelloShowed } from '@masknet/shared-base'
-import { makeStyles, MaskColorVar } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import { makeTypedMessageText } from '@masknet/typed-message'
-import { alpha } from '@mui/material'
 import { clamp } from 'lodash-es'
 import { useCallback } from 'react'
 import { PostDialogHint } from '../../../components/InjectedComponents/PostDialogHint.js'
@@ -16,15 +15,15 @@ import { isReplyPageSelector, postEditorInPopupSelector, searchReplyToolbarSelec
 const useStyles = makeStyles()((theme) => ({
     iconButton: {
         '&:hover': {
-            background: alpha(theme.palette.primary.main, 0.1),
+            background: alpha(theme.vars.palette.primary.main, 0.1),
         },
     },
     tooltip: {
         marginTop: '2px !important',
         borderRadius: 2,
         padding: 4,
-        background: MaskColorVar.twitterTooltipBg,
-        color: MaskColorVar.white,
+        background: theme.vars.palette.background.twitterTooltipBg,
+        color: theme.vars.palette.common.white,
     },
 }))
 
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/injection/ProfileTabContent.tsx b/packages/mask/content-script/site-adaptors/twitter.com/injection/ProfileTabContent.tsx
index d238534a019e..88bc089981fc 100644
--- a/packages/mask/content-script/site-adaptors/twitter.com/injection/ProfileTabContent.tsx
+++ b/packages/mask/content-script/site-adaptors/twitter.com/injection/ProfileTabContent.tsx
@@ -1,6 +1,6 @@
 import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
 import { MaskMessages } from '@masknet/shared-base'
-import { getMaskColor, makeStyles } from '@masknet/theme'
+import { makeStyles } from '@masknet/theme'
 import { memo } from 'react'
 import { ProfileTabContent } from '../../../components/InjectedComponents/ProfileTabContent.js'
 import { attachReactTreeWithContainer } from '../../../utils/shadow-root/renderInShadowRoot.js'
@@ -64,7 +64,7 @@ const useStyles = makeStyles()((theme) => {
                 fontSize: 28,
                 fontFamily: props.fontFamily,
                 fontWeight: 700,
-                color: getMaskColor(theme).textPrimary,
+                color: theme.vars.palette.maskColor.textPrimary,
             },
         },
         button: {
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/injection/ToolboxHint_UI.tsx b/packages/mask/content-script/site-adaptors/twitter.com/injection/ToolboxHint_UI.tsx
index 9794e6980540..1a7796c715e7 100644
--- a/packages/mask/content-script/site-adaptors/twitter.com/injection/ToolboxHint_UI.tsx
+++ b/packages/mask/content-script/site-adaptors/twitter.com/injection/ToolboxHint_UI.tsx
@@ -23,7 +23,7 @@ const ListItem = styled(ListItemButton)`
     display: inline-flex;
     &:hover {
         background: rgba(15, 20, 25, 0.1);
-        ${({ theme }) => (theme.palette.mode === 'dark' ? 'background: rgba(217, 217, 217, 0.1);' : '')}
+        ${({ theme }) => theme.applyStyles('dark', { background: 'rgba(217, 217, 217, 0.1)' })}
     }
     /* twitter break point */
     @media screen and (max-width: ${HORIZONTAL_BREAKPOINT}px) {
@@ -35,10 +35,12 @@ const Text = styled(Typography)`
     font-family: inherit;
     font-weight: 400;
     white-space: nowrap;
-    color: ${({ theme }) => (theme.palette.mode === 'light' ? 'rgb(15, 20, 25)' : 'rgb(216, 216, 216)')};
+    color: rgb(15, 20, 25);
+    ${({ theme }) => theme.applyStyles('dark', { color: 'rgb(216, 216, 216)' })}
 `
 const Icon = styled(ListItemIcon)`
-    color: ${({ theme }) => (theme.palette.mode === 'light' ? 'rgb(15, 20, 25)' : 'rgb(216, 216, 216)')};
+    color: rgb(15, 20, 25);
+    ${({ theme }) => theme.applyStyles('dark', { color: 'rgb(216, 216, 216)' })}
     min-width: 0;
 `
 
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/ui-provider.ts b/packages/mask/content-script/site-adaptors/twitter.com/ui-provider.ts
index ded2d4744451..f98cf8d2f874 100644
--- a/packages/mask/content-script/site-adaptors/twitter.com/ui-provider.ts
+++ b/packages/mask/content-script/site-adaptors/twitter.com/ui-provider.ts
@@ -74,7 +74,7 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => {
             alignItems: 'center',
             padding: 16,
             position: 'relative',
-            background: theme.palette.maskColor.modalTitleBg,
+            background: theme.vars.palette.maskColor.modalTitleBg,
             borderBottom: 'none',
             '& > p': {
                 fontSize: 18,
@@ -95,7 +95,7 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => {
             },
         },
         dialogContent: {
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             [smallQuery]: {
                 display: 'flex',
                 flexDirection: 'column',
@@ -106,7 +106,7 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => {
             },
         },
         dialogActions: {
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             padding: '6px 16px',
             [smallQuery]: {
                 display: 'flex',
@@ -118,7 +118,8 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => {
             },
         },
         dialogBackdropRoot: {
-            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(110, 118, 125, 0.4)' : 'rgba(0, 0, 0, 0.4)',
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            ...theme.applyStyles('dark', { backgroundColor: 'rgba(110, 118, 125, 0.4)' }),
         },
     }
 })
diff --git a/packages/mask/dashboard/components/BackupPreview/index.tsx b/packages/mask/dashboard/components/BackupPreview/index.tsx
index aa8ab4712a38..2664042e58ce 100644
--- a/packages/mask/dashboard/components/BackupPreview/index.tsx
+++ b/packages/mask/dashboard/components/BackupPreview/index.tsx
@@ -23,18 +23,18 @@ import { Plural, Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     card: {
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
         boxShadow: 'none',
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         borderRadius: 8,
         marginBottom: theme.spacing(2),
     },
     cardHeader: {
         padding: theme.spacing(2),
-        borderBottom: `1px solid ${theme.palette.maskColor.line}`,
+        borderBottom: `1px solid ${theme.vars.palette.maskColor.line}`,
     },
     title: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 14,
         fontWeight: 700,
     },
@@ -55,7 +55,7 @@ const useStyles = makeStyles()((theme) => ({
         height: theme.spacing(4.5),
         alignItems: 'center',
         justifyContent: 'center',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 14,
         fontWeight: 700,
         whiteSpace: 'nowrap',
@@ -76,7 +76,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     personaIcon: {
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         backgroundColor: '#FFB100',
         boxShadow: '0px 6px 12px rgba(255, 177, 0, 0.2)',
     },
@@ -106,19 +106,19 @@ const useStyles = makeStyles()((theme) => ({
     listItemIcon: {
         marginRight: theme.spacing(1),
         width: theme.spacing(4.5),
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         minWidth: 'unset',
     },
     walletIcon: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         minWidth: 'unset',
     },
     listText: {
         fontSize: 14,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     link: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'flex-start',
@@ -261,7 +261,7 @@ export const WalletsBackupPreview = memo<WalletsBackupPreviewProps>(function Wal
                                         address={wallet}
                                         sx={{ mr: '10px', fontWeight: 400 }}
                                     />
-                                    <Icons.LinkOut size={18} color={theme.palette.maskColor.second} />
+                                    <Icons.LinkOut size={18} color={theme.vars.palette.maskColor.second} />
                                 </Link>
                             </ListItemText>
                         </ListItem>
diff --git a/packages/mask/dashboard/components/GoogleDriveFileTable.tsx b/packages/mask/dashboard/components/GoogleDriveFileTable.tsx
index 0b510ac81999..a30afb08d2bf 100644
--- a/packages/mask/dashboard/components/GoogleDriveFileTable.tsx
+++ b/packages/mask/dashboard/components/GoogleDriveFileTable.tsx
@@ -23,10 +23,10 @@ import { MoreMenu } from './MoreMenu/index.js'
 
 const useStyles = makeStyles()((theme) => ({
     tableContainer: {
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         borderRadius: 8,
         overflow: 'hidden',
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
     },
     table: {
         borderRadius: 8,
@@ -34,7 +34,7 @@ const useStyles = makeStyles()((theme) => ({
         borderSpacing: 0,
     },
     tableHeadCell: {
-        borderBottom: `1px solid ${theme.palette.maskColor.line}`,
+        borderBottom: `1px solid ${theme.vars.palette.maskColor.line}`,
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
@@ -47,16 +47,16 @@ const useStyles = makeStyles()((theme) => ({
         height: 42,
         lineHeight: '18px',
         fontWeight: 400,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         verticalAlign: 'middle',
     },
     cellText: {
         fontSize: 14,
     },
     actionButton: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         '&:hover': {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
     },
     actions: {
@@ -73,14 +73,14 @@ const useStyles = makeStyles()((theme) => ({
         cursor: 'pointer',
         borderRadius: 8,
         '&:hover': {
-            backgroundColor: theme.palette.maskColor.bg,
+            backgroundColor: theme.vars.palette.maskColor.bg,
         },
     },
     actionLabel: {
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     fileName: {
         display: 'flex',
@@ -160,7 +160,7 @@ export const GoogleDriveFileTable = memo<GoogleDriveFileTableProps>(function Goo
                                                 size={20}
                                                 checked={selectedFileId === file.id}
                                                 onClick={() => onSelect?.(file)}
-                                                uncheckedColor={theme.palette.maskColor.secondaryLine}
+                                                uncheckedColor={theme.vars.palette.maskColor.secondaryLine}
                                             />
                                         :   null}
                                         {file.name}
diff --git a/packages/mask/dashboard/components/Mnemonic/DesktopMnemonicConfirm.tsx b/packages/mask/dashboard/components/Mnemonic/DesktopMnemonicConfirm.tsx
index e60be675bfec..d2d545d55b3f 100644
--- a/packages/mask/dashboard/components/Mnemonic/DesktopMnemonicConfirm.tsx
+++ b/packages/mask/dashboard/components/Mnemonic/DesktopMnemonicConfirm.tsx
@@ -5,15 +5,15 @@ import { Grid, TextField, Typography } from '@mui/material'
 
 const useStyles = makeStyles()((theme) => ({
     input: {
-        backgroundColor: theme.palette.maskColor.input,
+        backgroundColor: theme.vars.palette.maskColor.input,
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         textAlign: 'center',
         fontSize: 14,
     },
     end: {
         width: 22,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         fontSize: 14,
     },
 }))
diff --git a/packages/mask/dashboard/components/Mnemonic/MnemonicReveal.tsx b/packages/mask/dashboard/components/Mnemonic/MnemonicReveal.tsx
index 489f7edf2ae4..e95c511528fa 100644
--- a/packages/mask/dashboard/components/Mnemonic/MnemonicReveal.tsx
+++ b/packages/mask/dashboard/components/Mnemonic/MnemonicReveal.tsx
@@ -10,15 +10,15 @@ const useStyles = makeStyles()((theme) => ({
         margin: 0,
     },
     wordCard: {
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         padding: theme.spacing(1),
         borderRadius: 8,
         listStyleType: 'decimal',
         listStylePosition: 'inside',
         position: 'relative',
         '&::marker': {
-            backgroundColor: theme.palette.maskColor.bg,
-            color: theme.palette.maskColor.third,
+            backgroundColor: theme.vars.palette.maskColor.bg,
+            color: theme.vars.palette.maskColor.third,
             fontSize: 14,
         },
     },
diff --git a/packages/mask/dashboard/components/MoreMenu/index.tsx b/packages/mask/dashboard/components/MoreMenu/index.tsx
index 71692372e1cc..93a14f78a9f0 100644
--- a/packages/mask/dashboard/components/MoreMenu/index.tsx
+++ b/packages/mask/dashboard/components/MoreMenu/index.tsx
@@ -7,11 +7,11 @@ const useStyles = makeStyles()((theme) => ({
     paper: {
         padding: theme.spacing(2),
         borderRadius: 24,
-        background: theme.palette.maskColor.bottom,
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 4px 30px 0px rgba(255, 255, 255, 0.15)'
-            :   '0px 4px 30px 0px rgba(0, 0, 0, 0.10)',
+        background: theme.vars.palette.maskColor.bottom,
+        boxShadow: '0px 4px 30px 0px rgba(0, 0, 0, 0.10)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 4px 30px 0px rgba(255, 255, 255, 0.15)',
+        }),
     },
 }))
 
diff --git a/packages/mask/dashboard/components/OnboardingWriter/index.tsx b/packages/mask/dashboard/components/OnboardingWriter/index.tsx
index 7a5cc38ba589..8162e9fd71a1 100644
--- a/packages/mask/dashboard/components/OnboardingWriter/index.tsx
+++ b/packages/mask/dashboard/components/OnboardingWriter/index.tsx
@@ -8,7 +8,7 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: 1.2,
         fontWeight: 700,
         '& > strong': {
-            color: theme.palette.maskColor.highlight,
+            color: theme.vars.palette.maskColor.highlight,
         },
     },
     typing: {
diff --git a/packages/mask/dashboard/components/PrimaryButton/index.tsx b/packages/mask/dashboard/components/PrimaryButton/index.tsx
index 329c9d5e3872..11826c267ea7 100644
--- a/packages/mask/dashboard/components/PrimaryButton/index.tsx
+++ b/packages/mask/dashboard/components/PrimaryButton/index.tsx
@@ -10,19 +10,19 @@ interface ActionButtonProps extends ButtonProps {
 const useStyles = makeStyles()((theme) => ({
     // eslint-disable-next-line tss-unused-classes/unused-classes
     root: {
-        backgroundColor: theme.palette.maskColor.main,
-        color: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.bottom,
         fontWeight: 700,
         fontSize: 16,
         lineHeight: '20px',
         ['&:hover']: {
-            backgroundColor: theme.palette.maskColor.main,
+            backgroundColor: theme.vars.palette.maskColor.main,
             boxShadow: '0 8px 25px rgba(0, 0, 0, 0.2)',
         },
         [`&.${buttonClasses.disabled}`]: {
-            background: theme.palette.maskColor.primaryMain,
+            background: theme.vars.palette.maskColor.primaryMain,
             opacity: 0.6,
-            color: theme.palette.maskColor.bottom,
+            color: theme.vars.palette.maskColor.bottom,
         },
     },
 }))
diff --git a/packages/mask/dashboard/components/Restore/AccountStatusBar.tsx b/packages/mask/dashboard/components/Restore/AccountStatusBar.tsx
index 5a45867c00d9..741219e2efa2 100644
--- a/packages/mask/dashboard/components/Restore/AccountStatusBar.tsx
+++ b/packages/mask/dashboard/components/Restore/AccountStatusBar.tsx
@@ -10,7 +10,7 @@ const useStyles = makeStyles()((theme) => ({
     actionButton: {
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 interface Props extends BoxProps {
diff --git a/packages/mask/dashboard/components/Restore/RestoreFromMnemonic.tsx b/packages/mask/dashboard/components/Restore/RestoreFromMnemonic.tsx
index 04b6a11d5543..65d0950c535b 100644
--- a/packages/mask/dashboard/components/Restore/RestoreFromMnemonic.tsx
+++ b/packages/mask/dashboard/components/Restore/RestoreFromMnemonic.tsx
@@ -11,7 +11,7 @@ import { Trans } from '@lingui/react/macro'
 const useStyles = makeStyles()((theme) => ({
     error: {
         marginTop: theme.spacing(2),
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
     },
 }))
 
diff --git a/packages/mask/dashboard/components/Restore/RestoreFromPrivateKey.tsx b/packages/mask/dashboard/components/Restore/RestoreFromPrivateKey.tsx
index b2acbde192ac..98ebada631a5 100644
--- a/packages/mask/dashboard/components/Restore/RestoreFromPrivateKey.tsx
+++ b/packages/mask/dashboard/components/Restore/RestoreFromPrivateKey.tsx
@@ -13,8 +13,8 @@ import PasswordField from '../PasswordField/index.js'
 
 const useStyles = makeStyles()((theme) => ({
     input: {
-        backgroundColor: theme.palette.maskColor.input,
-        color: theme.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.input,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 
diff --git a/packages/mask/dashboard/components/Restore/RestoreWalletFromLocal.tsx b/packages/mask/dashboard/components/Restore/RestoreWalletFromLocal.tsx
index d74d0b216d34..e1f3cc155daf 100644
--- a/packages/mask/dashboard/components/Restore/RestoreWalletFromLocal.tsx
+++ b/packages/mask/dashboard/components/Restore/RestoreWalletFromLocal.tsx
@@ -14,7 +14,7 @@ const useStyles = makeStyles()((theme) => ({
         marginTop: theme.spacing(1.5),
     },
     desc: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontWeight: 700,
         fontSize: 12,
         marginTop: 7,
@@ -82,7 +82,7 @@ export const RestoreWalletFromLocal = memo(function RestoreWalletFromLocal({
                         fileName={file.name}
                         operations={
                             <Button variant="text" disableRipple sx={{ p: 1, minWidth: 'auto' }} onClick={reset}>
-                                <Icons.Clear size={24} color={theme.palette.maskColor.main} />
+                                <Icons.Clear size={24} color={theme.vars.palette.maskColor.main} />
                             </Button>
                         }>
                         <Typography className={classes.desc}>
diff --git a/packages/mask/dashboard/components/SecondaryButton/index.tsx b/packages/mask/dashboard/components/SecondaryButton/index.tsx
index c2ad2497ca96..15c8cae8ff37 100644
--- a/packages/mask/dashboard/components/SecondaryButton/index.tsx
+++ b/packages/mask/dashboard/components/SecondaryButton/index.tsx
@@ -9,18 +9,18 @@ interface ActionButtonProps extends ButtonProps {
 const useStyles = makeStyles()((theme) => ({
     // eslint-disable-next-line tss-unused-classes/unused-classes
     root: {
-        backgroundColor: theme.palette.maskColor.thirdMain,
-        color: theme.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.thirdMain,
+        color: theme.vars.palette.maskColor.main,
         border: 'none!important',
         fontWeight: 700,
         ['&:hover']: {
-            background: theme.palette.maskColor.bottom,
+            background: theme.vars.palette.maskColor.bottom,
             boxShadow: '0px 8px 25px rgba(0, 0, 0, 0.1)',
             border: 'none',
         },
         [`&.${buttonClasses.disabled}`]: {
-            color: theme.palette.maskColor.main,
-            background: theme.palette.maskColor.thirdMain,
+            color: theme.vars.palette.maskColor.main,
+            background: theme.vars.palette.maskColor.thirdMain,
             opacity: 0.4,
         },
     },
diff --git a/packages/mask/dashboard/components/SetupFrame/index.tsx b/packages/mask/dashboard/components/SetupFrame/index.tsx
index d78985572f9f..9a9bc4d81872 100644
--- a/packages/mask/dashboard/components/SetupFrame/index.tsx
+++ b/packages/mask/dashboard/components/SetupFrame/index.tsx
@@ -15,10 +15,10 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         overflow: 'auto',
         minHeight: '100vh',
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
     },
     content: {
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         minWidth: 720,
         width: 'clamp(720px, 66.6667%, 66.666%)',
         paddingTop: '12.5vh',
@@ -68,7 +68,7 @@ export const SetupFrame = memo<SetupFrameProps>(function SetupFrame({ hiddenSpli
                                 justifyContent: 'center',
                             }}>
                             <Typography
-                                color={theme.palette.maskColor.publicMain}
+                                color={theme.vars.palette.maskColor.publicMain}
                                 sx={{
                                     fontSize: 36,
                                     fontWeight: 700,
diff --git a/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx b/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
index cf677937a8ed..2c90bc2bbd58 100644
--- a/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
+++ b/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
@@ -49,8 +49,8 @@ const useStyles = makeStyles()((theme) => ({
             width: 68,
             height: 68,
             borderRadius: '50%',
-            border: `2px solid ${theme.palette.maskColor.main}`,
-            borderTopColor: theme.palette.maskColor.second,
+            border: `2px solid ${theme.vars.palette.maskColor.main}`,
+            borderTopColor: theme.vars.palette.maskColor.second,
             animation: 'spinner 2s linear infinite',
         },
     },
@@ -208,7 +208,9 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
                         />
                     :   null}
                     {isUpload ?
-                        <Typography color={theme.palette.maskColor.danger} sx={{ fontSize: 14, lineHeight: '18px' }}>
+                        <Typography
+                            color={theme.vars.palette.maskColor.danger}
+                            sx={{ fontSize: 14, lineHeight: '18px' }}>
                             <Trans>
                                 This will overwrite the existing cloud backup with the local data, this cannot be undo.
                             </Trans>
@@ -227,7 +229,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
         setBackupWallets,
         hasPassword,
         isUpload,
-        theme.palette.maskColor.danger,
+        theme.vars.palette.maskColor.danger,
         _,
         errors.backupPassword?.message,
         errors.paymentPassword?.message,
diff --git a/packages/mask/dashboard/modals/ConfirmModal/index.tsx b/packages/mask/dashboard/modals/ConfirmModal/index.tsx
index 4795b4301303..d2a8ccf3d229 100644
--- a/packages/mask/dashboard/modals/ConfirmModal/index.tsx
+++ b/packages/mask/dashboard/modals/ConfirmModal/index.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 16,
         lineHeight: '20px',
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         textAlign: 'center',
     },
     message: {
@@ -25,7 +25,7 @@ const useStyles = makeStyles()((theme) => ({
         padding: theme.spacing(0),
         lineHeight: '20px',
         fontSize: 14,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         textAlign: 'center',
     },
     buttonGroup: {
diff --git a/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx b/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx
index 883c2f650431..fc24d827081c 100644
--- a/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx
+++ b/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx
@@ -23,9 +23,9 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
     },
     box: {
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         borderRadius: 8,
-        boxShadow: theme.palette.maskColor.bottomBg,
+        boxShadow: theme.vars.palette.maskColor.bottomBg,
         backdropFilter: 'blur(8px)',
         padding: theme.spacing(1.5),
         display: 'flex',
@@ -176,7 +176,7 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
                         <Typography className={classes.fileName}>{fileName}</Typography>
                         <LinearProgress variant="determinate" value={progress} sx={{ my: 0.5 }} />
                         <Typography
-                            color={theme.palette.maskColor.third}
+                            color={theme.vars.palette.maskColor.third}
                             sx={{ display: 'flex', gap: 0.5, fontSize: 12, fontWeight: 700, lineHeight: '16px' }}>
                             {progress === 100 ?
                                 <>
@@ -187,7 +187,7 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
                                             fontWeight: 700,
                                             lineHeight: '16px',
                                         }}
-                                        color={theme.palette.maskColor.main}>
+                                        color={theme.vars.palette.maskColor.main}>
                                         {formatFileSize(Number(size))}
                                     </Typography>
                                     <Typography
@@ -196,7 +196,7 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
                                             fontSize: 12,
                                             lineHeight: '16px',
                                         }}
-                                        color={theme.palette.maskColor.third}>
+                                        color={theme.vars.palette.maskColor.third}>
                                         {formatDateTime(new Date(Number(uploadedAt)), 'yyyy-MM-dd HH:mm')}
                                     </Typography>
                                 </>
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/AddDeriveWallet/index.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/AddDeriveWallet/index.tsx
index 8cbaba969e32..70024f1b2d2a 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/AddDeriveWallet/index.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/AddDeriveWallet/index.tsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles()((theme) => ({
     second: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     title: {
         fontSize: 36,
@@ -59,7 +59,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     paginationButton: {
         borderRadius: 99,
-        background: theme.palette.maskColor.thirdMain,
+        background: theme.vars.palette.maskColor.thirdMain,
         width: '100%',
         fontWeight: 700,
     },
@@ -70,7 +70,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         cursor: 'pointer',
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/ComponentToPrint.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/ComponentToPrint.tsx
index 9f744731b1cc..d36ce1caefe6 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/ComponentToPrint.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/ComponentToPrint.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles()((theme) => ({
         justifyContent: 'center',
         flexDirection: 'column',
         padding: theme.spacing(6),
-        backgroundColor: theme.palette.maskColor.white,
+        backgroundColor: theme.vars.palette.maskColor.white,
         width: 630,
     },
     card: {
@@ -28,25 +28,25 @@ const useStyles = makeStyles()((theme) => ({
         background: `url(${PrintBackground}) no-repeat`,
         borderRadius: theme.spacing(1),
         padding: theme.spacing(2),
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         display: 'flex',
         alignItems: 'center',
         backgroundSize: 'cover',
     },
     publicKeyTitle: {
         fontSize: 14,
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         lineHeight: '18px',
         fontWeight: 700,
     },
     publicKey: {
         fontSize: 10,
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         lineHeight: '10px',
     },
     title: {
         fontSize: 16,
-        color: theme.palette.maskColor.publicMain,
+        color: theme.vars.palette.maskColor.publicMain,
         lineHeight: '20px',
         margin: theme.spacing(2.5, 0),
         fontWeight: 700,
@@ -56,21 +56,21 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         lineHeight: '18px',
         fontWeight: 400,
-        color: theme.palette.maskColor.publicMain,
+        color: theme.vars.palette.maskColor.publicMain,
         display: 'flex',
         alignItems: 'center',
         columnGap: 12,
     },
     wordCard: {
-        backgroundColor: theme.palette.maskColor.publicBg,
-        color: theme.palette.maskColor.publicThird,
+        backgroundColor: theme.vars.palette.maskColor.publicBg,
+        color: theme.vars.palette.maskColor.publicThird,
         '&::marker': {
-            backgroundColor: theme.palette.maskColor.publicBg,
-            color: theme.palette.maskColor.publicThird,
+            backgroundColor: theme.vars.palette.maskColor.publicBg,
+            color: theme.vars.palette.maskColor.publicThird,
         },
     },
     text: {
-        color: theme.palette.maskColor.publicMain,
+        color: theme.vars.palette.maskColor.publicMain,
     },
     qrWrapper: {
         display: 'flex',
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/index.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/index.tsx
index cb1d0ebe0266..a0392aad3154 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/index.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/CreateMnemonic/index.tsx
@@ -6,14 +6,14 @@ import { toBlob } from 'html-to-image'
 import { Icons } from '@masknet/icons'
 import { CopyButton } from '@masknet/shared'
 import { DashboardRoutes } from '@masknet/shared-base'
-import { makeStyles } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import { useWallets } from '@masknet/web3-hooks-base'
 import { EVMWeb3 } from '@masknet/web3-providers'
 import { generateNewWalletName } from '@masknet/web3-shared-base'
 import { ProviderType } from '@masknet/web3-shared-evm'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventID, EventType } from '@masknet/web3-telemetry/types'
-import { Alert, Box, Button, Stack, Typography, alpha, useTheme } from '@mui/material'
+import { Alert, Box, Button, Stack, Typography, useTheme } from '@mui/material'
 import Services from '#services'
 import { MnemonicReveal } from '../../../components/Mnemonic/index.js'
 import { PrimaryButton } from '../../../components/PrimaryButton/index.js'
@@ -29,12 +29,12 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 30,
         margin: '12px 0',
         lineHeight: '120%',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     tips: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     refresh: {
         display: 'flex',
@@ -44,7 +44,7 @@ const useStyles = makeStyles()((theme) => ({
         float: 'right',
         cursor: 'pointer',
         fontSize: 12,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         justifyContent: 'center',
         alignItems: 'center',
         gap: '4px',
@@ -60,12 +60,12 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         cursor: 'pointer',
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     second: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     bold: {
         fontWeight: 700,
@@ -73,8 +73,8 @@ const useStyles = makeStyles()((theme) => ({
     alert: {
         marginTop: 24,
         padding: 12,
-        color: theme.palette.maskColor.warn,
-        background: alpha(theme.palette.maskColor.warn, 0.1),
+        color: theme.vars.palette.maskColor.warn,
+        background: alpha(theme.vars.palette.maskColor.warn, 0.1),
         backdropFilter: 'blur(5px)',
     },
     storeWords: {
@@ -91,7 +91,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: '8px',
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
     },
     buttonGroup: {
         display: 'flex',
@@ -107,7 +107,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         gap: '12px',
         alignSelf: 'stretch',
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         borderRadius: '12px',
     },
     puzzleWordList: {
@@ -121,7 +121,7 @@ const useStyles = makeStyles()((theme) => ({
     puzzleWordIndex: {
         display: 'flex',
         fontSize: 14,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         justifyContent: 'center',
         alignItems: 'center',
         width: 36,
@@ -152,14 +152,14 @@ const useStyles = makeStyles()((theme) => ({
     checkIcon: {
         width: 20,
         height: 20,
-        color: theme.palette.maskColor.primary,
+        color: theme.vars.palette.maskColor.primary,
     },
     emptyCheckbox: {
-        border: `2px solid ${theme.palette.maskColor.secondaryLine}`,
+        border: `2px solid ${theme.vars.palette.maskColor.secondaryLine}`,
         background: 'transparent',
     },
     verificationFail: {
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
         fontSize: 14,
         fontWeight: 400,
     },
@@ -412,11 +412,11 @@ const CreateMnemonicUI = memo<CreateMnemonicUIProps>(function CreateMnemonicUI({
             </div>
             <div className={classes.storeWords}>
                 <div className={classes.iconBox} onClick={handleDownload}>
-                    <Icons.Download2 color={theme.palette.maskColor.main} size={18} />
+                    <Icons.Download2 color={theme.vars.palette.maskColor.main} size={18} />
                 </div>
                 <CopyButton
                     classes={{ root: classes.iconBox }}
-                    color={theme.palette.maskColor.main}
+                    color={theme.vars.palette.maskColor.main}
                     size={18}
                     text={words.join(' ')}
                     successText={<Trans>The mnemonic word has been copied, please keep it in a safe place.</Trans>}
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/CreateWalletForm/index.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/CreateWalletForm/index.tsx
index ec70153fd0ae..13991c3cca30 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/CreateWalletForm/index.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/CreateWalletForm/index.tsx
@@ -26,7 +26,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 30,
         margin: '12px 0',
         lineHeight: '120%',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     form: {
         marginTop: 24,
@@ -40,20 +40,20 @@ const useStyles = makeStyles()((theme) => ({
     tips: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     tipsBottom: {
         fontSize: 14,
         lineHeight: '18px',
         marginTop: 8,
         marginBottom: 24,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 
     second: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     bold: {
         fontWeight: 700,
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/FireflyWallet/index.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/FireflyWallet/index.tsx
index b016d815e389..fbf3851f84c2 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/FireflyWallet/index.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/FireflyWallet/index.tsx
@@ -22,12 +22,12 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 30,
         margin: '12px 0',
         lineHeight: '120%',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     tips: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     bold: {
         fontWeight: 700,
@@ -40,9 +40,10 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 12,
         marginTop: theme.spacing(3),
         background:
-            theme.palette.mode === 'dark' ?
-                'linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%)'
-            :   'linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.20) 0%, rgba(59, 153, 252, 0.20) 100%)',
+            'linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.20) 0%, rgba(59, 153, 252, 0.20) 100%)',
+        ...theme.applyStyles('dark', {
+            background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%)',
+        }),
     },
     fireflyLogo: {
         width: 120,
@@ -53,7 +54,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     list: {
         listStyle: 'none',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: '13px',
         lineHeight: '18px',
         fontWeight: 400,
@@ -74,7 +75,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: 24,
     },
     dialogTitle: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 18,
         fontWeight: 700,
         lineHeight: '22px',
@@ -87,7 +88,7 @@ const useStyles = makeStyles()((theme) => ({
         padding: 0,
     },
     permissions: {
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         padding: 12,
         borderRadius: 8,
         height: 212,
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/Onboarding/index.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/Onboarding/index.tsx
index 7fffabe3592c..9fa8252cac0b 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/Onboarding/index.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/Onboarding/index.tsx
@@ -17,14 +17,14 @@ const useStyles = makeStyles()((theme) => ({
         top: 24,
         right: 24,
         padding: theme.spacing(2),
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         borderRadius: 12,
         maxWidth: 360,
     },
     pin: {
         fontSize: 16,
         lineHeight: '20px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     skeleton: {
         background: 'linear-gradient(270deg, #F6F6F6 0%, rgba(217, 217, 217, 0) 94.74%)',
@@ -51,8 +51,8 @@ const useStyles = makeStyles()((theme) => ({
     pinCard: {
         marginTop: 18,
         borderRadius: 8,
-        border: `1px solid ${theme.palette.maskColor.line}`,
-        background: theme.palette.maskColor.bottom,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
+        background: theme.vars.palette.maskColor.bottom,
         padding: 16,
         display: 'flex',
         justifyContent: 'space-between',
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/Recovery/index.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/Recovery/index.tsx
index 49cef5fdf46b..142218927e93 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/Recovery/index.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/Recovery/index.tsx
@@ -33,7 +33,7 @@ const useStyles = makeStyles()((theme) => ({
     second: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     title: {
         fontSize: 36,
@@ -41,19 +41,19 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
     },
     tabContainer: {
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         marginTop: theme.spacing(3),
         borderRadius: theme.spacing(1),
         overflow: 'hidden',
     },
     tabList: {
-        background: theme.palette.maskColor.modalTitleBg,
+        background: theme.vars.palette.maskColor.modalTitleBg,
         padding: theme.spacing('14px', 2, 0),
     },
     tab: {
         fontSize: 16,
         fontWeight: 700,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     panels: {
         display: 'flex',
@@ -81,7 +81,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         cursor: 'pointer',
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 
diff --git a/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/GoogleDrive.tsx b/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/GoogleDrive.tsx
index a87e967af73b..a8f1034902c9 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/GoogleDrive.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/GoogleDrive.tsx
@@ -43,14 +43,14 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         lineHeight: '18px',
         height: 18,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     userAccount: {
         fontWeight: 700,
         fontSize: 14,
         lineHeight: '18px',
         height: 18,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     folder: {
         fontSize: 14,
diff --git a/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/Preview.tsx b/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/Preview.tsx
index 192557556c61..1924e945e657 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/Preview.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/Preview.tsx
@@ -28,14 +28,14 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         lineHeight: '18px',
         height: 18,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     userAccount: {
         fontWeight: 700,
         fontSize: 14,
         lineHeight: '18px',
         height: 18,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     text: {
         fontSize: 14,
@@ -44,7 +44,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     content: {
         borderRadius: 8,
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         padding: theme.spacing(2),
         marginTop: theme.spacing(3),
         display: 'flex',
@@ -54,7 +54,7 @@ const useStyles = makeStyles()((theme) => ({
     container: {
         padding: theme.spacing(2),
         borderRadius: 8,
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         marginTop: theme.spacing(3),
     },
     button: {
@@ -145,7 +145,7 @@ export const Component = memo(function CloudBackupPreview() {
                                             fontSize: 12,
                                             lineHeight: '16px',
                                         }}
-                                        color={theme.palette.maskColor.third}>
+                                        color={theme.vars.palette.maskColor.third}>
                                         {formatDateTime(
                                             fromUnixTime(Number(previewInfo.uploadedAt)),
                                             'yyyy-MM-dd HH:mm',
diff --git a/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/index.tsx
index 1e7a278a17e7..ce9bdfde269c 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/index.tsx
@@ -22,7 +22,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         lineHeight: '18px',
         height: 18,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     toggleButton: {
         cursor: 'pointer',
@@ -30,10 +30,10 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 18,
         height: 34,
         gap: theme.spacing(1),
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         display: 'inline-flex',
         padding: theme.spacing(1, 1.5),
-        backgroundColor: theme.palette.maskColor.input,
+        backgroundColor: theme.vars.palette.maskColor.input,
     },
 }))
 
diff --git a/packages/mask/dashboard/pages/SetupPersona/Backup/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Backup/index.tsx
index 518cde1cbdb7..474a2c43e2ff 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Backup/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Backup/index.tsx
@@ -15,21 +15,22 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
     },
     description: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 14,
         marginTop: theme.spacing(1.5),
     },
     tabContainer: {
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         marginTop: theme.spacing(3),
         borderRadius: theme.spacing(1, 1, 0, 0),
         overflow: 'hidden',
     },
     tabList: {
         background:
-            theme.palette.mode === 'light' ?
-                'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(90deg, rgba(98, 152, 234, 0.2) 1.03%, rgba(98, 152, 234, 0.2) 1.04%, rgba(98, 126, 234, 0.2) 100%)'
-            :   'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.06) 100%)',
+            'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(90deg, rgba(98, 152, 234, 0.2) 1.03%, rgba(98, 152, 234, 0.2) 1.04%, rgba(98, 126, 234, 0.2) 100%)',
+        ...theme.applyStyles('dark', {
+            background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.06) 100%)',
+        }),
         padding: theme.spacing('14px', 2, 0),
     },
     tab: {
diff --git a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/ComponentToPrint.tsx b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/ComponentToPrint.tsx
index 1344c03ac93f..d04f10fd4342 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/ComponentToPrint.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/ComponentToPrint.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles()((theme) => ({
         justifyContent: 'center',
         flexDirection: 'column',
         padding: theme.spacing(6),
-        backgroundColor: theme.palette.maskColor.white,
+        backgroundColor: theme.vars.palette.maskColor.white,
         width: 630,
     },
     card: {
@@ -28,7 +28,7 @@ const useStyles = makeStyles()((theme) => ({
         background: `url(${PrintBackground}) no-repeat`,
         borderRadius: theme.spacing(1),
         padding: theme.spacing(2),
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         display: 'flex',
         alignItems: 'center',
         backgroundSize: 'cover',
@@ -58,21 +58,21 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         lineHeight: '18px',
         fontWeight: 700,
-        color: theme.palette.maskColor.publicMain,
+        color: theme.vars.palette.maskColor.publicMain,
         display: 'flex',
         alignItems: 'center',
         columnGap: 12,
     },
     wordCard: {
-        backgroundColor: theme.palette.maskColor.publicBg,
-        color: theme.palette.maskColor.publicThird,
+        backgroundColor: theme.vars.palette.maskColor.publicBg,
+        color: theme.vars.palette.maskColor.publicThird,
         '&::marker': {
-            backgroundColor: theme.palette.maskColor.publicBg,
-            color: theme.palette.maskColor.publicThird,
+            backgroundColor: theme.vars.palette.maskColor.publicBg,
+            color: theme.vars.palette.maskColor.publicThird,
         },
     },
     text: {
-        color: theme.palette.maskColor.publicMain,
+        color: theme.vars.palette.maskColor.publicMain,
     },
 }))
 
diff --git a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/Words.tsx b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/Words.tsx
index c8be9d2f5622..aa2c47fe5c70 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/Words.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/Words.tsx
@@ -11,15 +11,15 @@ const useStyles = makeStyles()((theme) => ({
         margin: 0,
     },
     wordCard: {
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         padding: theme.spacing(1),
         borderRadius: 8,
         listStyleType: 'decimal',
         listStylePosition: 'inside',
         position: 'relative',
         '&::marker': {
-            backgroundColor: theme.palette.maskColor.bg,
-            color: theme.palette.maskColor.third,
+            backgroundColor: theme.vars.palette.maskColor.bg,
+            color: theme.vars.palette.maskColor.third,
             fontSize: 14,
         },
     },
diff --git a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx
index fe389643a404..d0fe2f0dabcf 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx
@@ -1,8 +1,8 @@
 import { Icons } from '@masknet/icons'
 import { CopyButton } from '@masknet/shared'
 import { DashboardRoutes } from '@masknet/shared-base'
-import { MaskColorVar, makeStyles, useCustomSnackbar } from '@masknet/theme'
-import { Box, Button, Checkbox, FormControlLabel, IconButton, Stack, Typography, alpha } from '@mui/material'
+import { alpha, makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { Box, Button, Checkbox, FormControlLabel, IconButton, Stack, Typography } from '@mui/material'
 import { toBlob } from 'html-to-image'
 import { memo, useCallback, useRef, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
@@ -25,12 +25,12 @@ const useStyles = makeStyles()((theme) => ({
     second: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     recovery: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
     },
     title: {
@@ -40,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({
     },
 
     refresh: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         columnGap: 4,
         fontWeight: 700,
         fontSize: 12,
@@ -51,14 +51,14 @@ const useStyles = makeStyles()((theme) => ({
         marginTop: 12,
     },
     iconButton: {
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         borderRadius: 8,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         height: 36,
         width: 36,
     },
     warning: {
-        background: alpha(theme.palette.maskColor.warn, 0.1),
+        background: alpha(theme.vars.palette.maskColor.warn, 0.1),
         borderRadius: 4,
         backdropFilter: 'blur(5px)',
         marginTop: theme.spacing(1.5),
@@ -70,7 +70,7 @@ const useStyles = makeStyles()((theme) => ({
     warningText: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.warn,
+        color: theme.vars.palette.maskColor.warn,
     },
     label: {
         fontSize: 14,
@@ -187,7 +187,7 @@ export const Component = memo(function SignUpMnemonic() {
                 classes={{ label: classes.label }}
                 control={<Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />}
                 label={<Trans>I wrote down those words in the correct order</Trans>}
-                sx={{ marginTop: '12px', color: MaskColorVar.textSecondary }}
+                sx={(theme) => ({ marginTop: '12px', color: theme.vars.palette.maskColor.textSecondary })}
             />
 
             <Box sx={{ position: 'absolute', top: -9999 }}>
diff --git a/packages/mask/dashboard/pages/SetupPersona/Onboarding/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Onboarding/index.tsx
index 1c8a85019b9a..8f1906a10953 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Onboarding/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Onboarding/index.tsx
@@ -24,14 +24,14 @@ const useStyles = makeStyles()((theme) => ({
         top: 24,
         right: 24,
         padding: theme.spacing(2),
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         borderRadius: 12,
         maxWidth: 360,
     },
     pin: {
         fontSize: 16,
         lineHeight: '20px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     skeleton: {
         background: 'linear-gradient(270deg, #F6F6F6 0%, rgba(217, 217, 217, 0) 94.74%)',
@@ -58,8 +58,8 @@ const useStyles = makeStyles()((theme) => ({
     pinCard: {
         marginTop: 18,
         borderRadius: 8,
-        border: `1px solid ${theme.palette.maskColor.line}`,
-        background: theme.palette.maskColor.bottom,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
+        background: theme.vars.palette.maskColor.bottom,
         padding: 16,
         display: 'flex',
         justifyContent: 'space-between',
@@ -71,7 +71,7 @@ const useStyles = makeStyles()((theme) => ({
         right: 408,
     },
     twitter: {
-        color: theme.palette.maskColor.bottom,
+        color: theme.vars.palette.maskColor.bottom,
     },
 }))
 
diff --git a/packages/mask/dashboard/pages/SetupPersona/PermissionOnboarding/index.tsx b/packages/mask/dashboard/pages/SetupPersona/PermissionOnboarding/index.tsx
index 07ba25c6557c..74d5e7f551ab 100644
--- a/packages/mask/dashboard/pages/SetupPersona/PermissionOnboarding/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/PermissionOnboarding/index.tsx
@@ -19,14 +19,14 @@ const useStyles = makeStyles()((theme) => ({
         top: 24,
         right: 24,
         padding: theme.spacing(2),
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         borderRadius: 12,
         maxWidth: 360,
     },
     pin: {
         fontSize: 16,
         lineHeight: '20px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     skeleton: {
         background: 'linear-gradient(270deg, #F6F6F6 0%, rgba(217, 217, 217, 0) 94.74%)',
@@ -53,8 +53,8 @@ const useStyles = makeStyles()((theme) => ({
     pinCard: {
         marginTop: 18,
         borderRadius: 8,
-        border: `1px solid ${theme.palette.maskColor.line}`,
-        background: theme.palette.maskColor.bottom,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
+        background: theme.vars.palette.maskColor.bottom,
         padding: 16,
         display: 'flex',
         justifyContent: 'space-between',
@@ -66,7 +66,7 @@ const useStyles = makeStyles()((theme) => ({
         right: 408,
     },
     twitter: {
-        color: theme.palette.maskColor.bottom,
+        color: theme.vars.palette.maskColor.bottom,
     },
 
     typed: {
@@ -74,7 +74,7 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: 1.2,
         fontWeight: 700,
         '& > strong': {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
     },
     endTyping: {
diff --git a/packages/mask/dashboard/pages/SetupPersona/Permissions/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Permissions/index.tsx
index 5bf1c19fac25..6cec8d48e867 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Permissions/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Permissions/index.tsx
@@ -25,7 +25,7 @@ const useStyles = makeStyles()((theme) => ({
     p: {
         fontSize: 14,
         lineHeight: '20px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginTop: 24,
     },
     h2: {
@@ -33,7 +33,7 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 400,
         fontSize: '14px',
         lineHeight: '20px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     list: {
         marginTop: theme.spacing(2),
@@ -48,7 +48,7 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 400,
         fontSize: '14px',
         lineHeight: '20px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         listStyleType: 'none',
         paddingLeft: 0,
         marginLeft: 0,
@@ -56,7 +56,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     siteName: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 14,
         lineHeight: '20px',
         marginLeft: theme.spacing(1),
@@ -66,13 +66,13 @@ const useStyles = makeStyles()((theme) => ({
         columnGap: 12,
     },
     link: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         textDecoration: 'underline',
     },
     policy: {
         fontSize: 14,
         lineHeight: '20px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginTop: 48,
     },
 }))
diff --git a/packages/mask/dashboard/pages/SetupPersona/Recovery/Cloud/GoogleDrive.tsx b/packages/mask/dashboard/pages/SetupPersona/Recovery/Cloud/GoogleDrive.tsx
index 005173b8b63d..2257b97e15bf 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Recovery/Cloud/GoogleDrive.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Recovery/Cloud/GoogleDrive.tsx
@@ -43,14 +43,14 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         lineHeight: '18px',
         height: 18,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     userAccount: {
         fontWeight: 700,
         fontSize: 14,
         lineHeight: '18px',
         height: 18,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     folder: {
         fontSize: 14,
diff --git a/packages/mask/dashboard/pages/SetupPersona/Recovery/Cloud/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Recovery/Cloud/index.tsx
index bbc2fa86b77d..1be3f650783d 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Recovery/Cloud/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Recovery/Cloud/index.tsx
@@ -22,7 +22,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         lineHeight: '18px',
         height: 18,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     toggleButton: {
         cursor: 'pointer',
@@ -30,10 +30,10 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 18,
         height: 34,
         gap: theme.spacing(1),
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         display: 'inline-flex',
         padding: theme.spacing(1, 1.5),
-        backgroundColor: theme.palette.maskColor.input,
+        backgroundColor: theme.vars.palette.maskColor.input,
     },
 }))
 
diff --git a/packages/mask/dashboard/pages/SetupPersona/Recovery/Local.tsx b/packages/mask/dashboard/pages/SetupPersona/Recovery/Local.tsx
index 37bd29822259..270f9e64e304 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Recovery/Local.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Recovery/Local.tsx
@@ -36,7 +36,7 @@ const useStyles = makeStyles()((theme) => ({
         marginTop: theme.spacing(1.5),
     },
     desc: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontWeight: 700,
         fontSize: 12,
         marginTop: 7,
@@ -167,7 +167,7 @@ export const Component = memo(function RecoveryLocalBackup() {
                     fileName={file.name}
                     operations={
                         <Button variant="text" disableRipple sx={{ p: 1, minWidth: 'auto' }} onClick={reset}>
-                            <Icons.Clear size={24} color={theme.palette.maskColor.main} />
+                            <Icons.Clear size={24} color={theme.vars.palette.maskColor.main} />
                         </Button>
                     }>
                     <Typography className={classes.desc}>
diff --git a/packages/mask/dashboard/pages/SetupPersona/Recovery/Phrase.tsx b/packages/mask/dashboard/pages/SetupPersona/Recovery/Phrase.tsx
index d146bdeb596c..ab22e7d31590 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Recovery/Phrase.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Recovery/Phrase.tsx
@@ -16,7 +16,7 @@ import { SignUpRoutePath } from '../../SignUp/routePath.js'
 const useStyles = makeStyles()((theme) => ({
     error: {
         marginTop: theme.spacing(2),
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
     },
 }))
 
diff --git a/packages/mask/dashboard/pages/SetupPersona/Recovery/PrivateKey.tsx b/packages/mask/dashboard/pages/SetupPersona/Recovery/PrivateKey.tsx
index 49c3c9d8f042..93d9a1dc7b64 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Recovery/PrivateKey.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Recovery/PrivateKey.tsx
@@ -18,8 +18,8 @@ import { SignUpRoutePath } from '../../SignUp/routePath.js'
 
 const useStyles = makeStyles()((theme) => ({
     input: {
-        backgroundColor: theme.palette.maskColor.input,
-        color: theme.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.input,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 const schema = z.object({
diff --git a/packages/mask/dashboard/pages/SetupPersona/Recovery/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Recovery/index.tsx
index 424684cf0d71..ae9f63a3cb84 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Recovery/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Recovery/index.tsx
@@ -27,7 +27,7 @@ const useStyles = makeStyles()((theme) => ({
     setup: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         textDecoration: 'none',
     },
@@ -37,20 +37,21 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
     },
     description: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 14,
     },
     tabContainer: {
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         marginTop: theme.spacing(3),
         borderRadius: theme.spacing(1, 1, 0, 0),
         overflow: 'hidden',
     },
     tabList: {
         background:
-            theme.palette.mode === 'light' ?
-                'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(90deg, rgba(98, 152, 234, 0.2) 1.03%, rgba(98, 152, 234, 0.2) 1.04%, rgba(98, 126, 234, 0.2) 100%)'
-            :   'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.06) 100%)',
+            'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(90deg, rgba(98, 152, 234, 0.2) 1.03%, rgba(98, 152, 234, 0.2) 1.04%, rgba(98, 126, 234, 0.2) 100%)',
+        ...theme.applyStyles('dark', {
+            background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.06) 100%)',
+        }),
         padding: theme.spacing('14px', 2, 0),
     },
     tab: {
diff --git a/packages/mask/dashboard/pages/SetupPersona/SignUp/index.tsx b/packages/mask/dashboard/pages/SetupPersona/SignUp/index.tsx
index 901babd01510..c78abed0a6a0 100644
--- a/packages/mask/dashboard/pages/SetupPersona/SignUp/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/SignUp/index.tsx
@@ -21,12 +21,12 @@ const useStyles = makeStyles()((theme) => ({
     second: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     recovery: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
     },
     title: {
diff --git a/packages/mask/dashboard/pages/SetupPersona/Welcome/Article.tsx b/packages/mask/dashboard/pages/SetupPersona/Welcome/Article.tsx
index c076ee40887a..fe334bee5b4e 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Welcome/Article.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Welcome/Article.tsx
@@ -14,12 +14,12 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 400,
         fontSize: '14px',
         lineHeight: '20px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     p: {
         fontSize: 14,
         lineHeight: '20px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginTop: 24,
     },
     list: {
@@ -35,7 +35,7 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 400,
         fontSize: '14px',
         lineHeight: '20px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         listStyleType: 'none',
         paddingLeft: 0,
         marginLeft: 0,
@@ -43,7 +43,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     siteName: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 14,
         lineHeight: '20px',
         marginLeft: theme.spacing(1),
diff --git a/packages/mask/dashboard/pages/SetupPersona/Welcome/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Welcome/index.tsx
index 81354a97cda4..6839d2d6b432 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Welcome/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Welcome/index.tsx
@@ -28,12 +28,12 @@ const useStyles = makeStyles()((theme) => ({
     },
     label: {
         fontSize: 14,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginRight: 0,
         marginLeft: 0,
     },
     link: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         textDecoration: 'underline',
     },
     checkbox: {
@@ -46,7 +46,7 @@ const useStyles = makeStyles()((theme) => ({
     policy: {
         fontSize: 14,
         lineHeight: '20px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginTop: 48,
     },
 }))
diff --git a/packages/mask/dashboard/pages/SignUp/steps/PersonaNameUI.tsx b/packages/mask/dashboard/pages/SignUp/steps/PersonaNameUI.tsx
index ec882af1f5e8..b5e18b3d5f33 100644
--- a/packages/mask/dashboard/pages/SignUp/steps/PersonaNameUI.tsx
+++ b/packages/mask/dashboard/pages/SignUp/steps/PersonaNameUI.tsx
@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme) => ({
     second: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     title: {
         fontSize: 36,
diff --git a/packages/mask/popups/components/ActionModal/ActionModal.tsx b/packages/mask/popups/components/ActionModal/ActionModal.tsx
index b442d475d62d..d504c7f7298d 100644
--- a/packages/mask/popups/components/ActionModal/ActionModal.tsx
+++ b/packages/mask/popups/components/ActionModal/ActionModal.tsx
@@ -12,13 +12,13 @@ const useStyles = makeStyles()((theme) => ({
         maxHeight: '80vh',
         padding: 18,
         borderRadius: theme.spacing(3, 3, 0, 0),
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
     },
     closeButton: {
         position: 'absolute',
         width: 24,
         height: 24,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         minWidth: 'auto',
         right: 18,
         top: 18,
@@ -45,9 +45,10 @@ const useStyles = makeStyles()((theme) => ({
     root: {
         [`& .${backdropClasses.root}`]: {
             background:
-                theme.palette.mode === 'dark' ?
-                    'rgba(255, 255, 255, 0.10)'
-                :   'linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), rgba(28, 104, 243, 0.20)',
+                'linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), rgba(28, 104, 243, 0.20)',
+            ...theme.applyStyles('dark', {
+                background: 'rgba(255, 255, 255, 0.10)',
+            }),
             backdropFilter: 'blur(5px)',
         },
     },
diff --git a/packages/mask/popups/components/AddContactInputPanel/index.tsx b/packages/mask/popups/components/AddContactInputPanel/index.tsx
index 972513539166..2d3eba8a4aa7 100644
--- a/packages/mask/popups/components/AddContactInputPanel/index.tsx
+++ b/packages/mask/popups/components/AddContactInputPanel/index.tsx
@@ -16,7 +16,7 @@ const useStyles = makeStyles()((theme) => ({
         flex: 1,
     },
     toText: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 14,
         fontWeight: 700,
         height: 40,
@@ -33,11 +33,11 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         paddingRight: '0px !important',
         '&&::placeholder': {
-            color: theme.palette.maskColor.third,
+            color: theme.vars.palette.maskColor.third,
         },
     },
     save: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         marginRight: 4,
     },
     endAdornment: {
@@ -49,22 +49,22 @@ const useStyles = makeStyles()((theme) => ({
     receiver: {
         display: 'flex',
         alignItems: 'flex-start',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 13,
     },
     validation: {
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
         fontSize: 14,
     },
     warning: {
-        color: theme.palette.maskColor.warn,
+        color: theme.vars.palette.maskColor.warn,
         fontSize: 14,
     },
     fieldWrapper: {
         flex: 1,
     },
     linkOut: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         marginLeft: 4,
         cursor: 'pointer',
     },
@@ -134,7 +134,7 @@ const AddContactInputPanel = memo(function AddContactInputPanel({ isManage, auto
                                         <Typography className={classes.save}>
                                             <Trans>Save</Trans>
                                         </Typography>
-                                        <Icons.AddUser size={18} color={theme.palette.maskColor.main} />
+                                        <Icons.AddUser size={18} color={theme.vars.palette.maskColor.main} />
                                     </div>
                                 :   undefined,
                             classes: { input: classes.inputText },
diff --git a/packages/mask/popups/components/BottomController/index.tsx b/packages/mask/popups/components/BottomController/index.tsx
index 7d48f339b131..c189ce748d8e 100644
--- a/packages/mask/popups/components/BottomController/index.tsx
+++ b/packages/mask/popups/components/BottomController/index.tsx
@@ -6,9 +6,9 @@ const useStyles = makeStyles()((theme) => ({
     container: {
         position: 'fixed',
         bottom: 0,
-        background: theme.palette.maskColor.secondaryBottom,
+        background: theme.vars.palette.maskColor.secondaryBottom,
         padding: theme.spacing(2),
-        boxShadow: theme.palette.maskColor.bottomBg,
+        boxShadow: theme.vars.palette.maskColor.bottomBg,
         backdropFilter: 'blur(8px)',
         left: 0,
         right: 0,
diff --git a/packages/mask/popups/components/BottomDrawer/index.tsx b/packages/mask/popups/components/BottomDrawer/index.tsx
index 71846725268a..5e32d8658abe 100644
--- a/packages/mask/popups/components/BottomDrawer/index.tsx
+++ b/packages/mask/popups/components/BottomDrawer/index.tsx
@@ -7,14 +7,15 @@ const useStyles = makeStyles()((theme) => ({
     paper: {
         padding: theme.spacing(2.25),
         borderRadius: '24px 24px 0 0',
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
     },
     root: {
         [`& .${backdropClasses.root}`]: {
             background:
-                theme.palette.mode === 'dark' ?
-                    'rgba(255, 255, 255, 0.10)'
-                :   'linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), rgba(28, 104, 243, 0.20)',
+                'linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), rgba(28, 104, 243, 0.20)',
+            ...theme.applyStyles('dark', {
+                background: 'rgba(255, 255, 255, 0.10)',
+            }),
             backdropFilter: 'blur(5px)',
         },
     },
diff --git a/packages/mask/popups/components/ConnectSocialAccounts/index.tsx b/packages/mask/popups/components/ConnectSocialAccounts/index.tsx
index e9b58035b91a..c89f50b382b9 100644
--- a/packages/mask/popups/components/ConnectSocialAccounts/index.tsx
+++ b/packages/mask/popups/components/ConnectSocialAccounts/index.tsx
@@ -12,7 +12,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(2),
     },
     item: {
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         padding: theme.spacing(1.5),
         borderRadius: 8,
         display: 'flex',
@@ -25,7 +25,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     network: {
         marginLeft: 8,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 12,
         lineHeight: '16px',
         fontWeight: 700,
diff --git a/packages/mask/popups/components/ConnectedWallet/index.tsx b/packages/mask/popups/components/ConnectedWallet/index.tsx
index 086ada8d5dfc..5f5f83e1e4d4 100644
--- a/packages/mask/popups/components/ConnectedWallet/index.tsx
+++ b/packages/mask/popups/components/ConnectedWallet/index.tsx
@@ -25,8 +25,8 @@ const useStyles = makeStyles()((theme) => ({
         cursor: 'pointer',
         borderRadius: 16,
         '&:hover': {
-            background: theme.palette.maskColor.bottom,
-            boxShadow: theme.palette.maskColor.bottomBg,
+            background: theme.vars.palette.maskColor.bottom,
+            boxShadow: theme.vars.palette.maskColor.bottomBg,
         },
     },
     walletInfo: {
@@ -52,7 +52,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 12,
         fontWeight: 400,
         lineHeight: '16px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         display: 'flex',
         alignItems: 'center',
     },
@@ -62,7 +62,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         columnGap: 4,
         padding: '21px 0',
     },
@@ -100,7 +100,7 @@ export const ConnectedWallet = memo(function ConnectedWallet() {
                                         formatter={formatEthereumAddress}
                                     />
                                     <Link
-                                        style={{ width: 14, height: 14, color: theme.palette.maskColor.main }}
+                                        style={{ width: 14, height: 14, color: theme.vars.palette.maskColor.main }}
                                         href={EVMExplorerResolver.addressLink(chainId, wallet.address ?? '')}
                                         target="_blank"
                                         rel="noopener noreferrer">
diff --git a/packages/mask/popups/components/GasSettingMenu/index.tsx b/packages/mask/popups/components/GasSettingMenu/index.tsx
index 40929b6fd04c..73a6bf955695 100644
--- a/packages/mask/popups/components/GasSettingMenu/index.tsx
+++ b/packages/mask/popups/components/GasSettingMenu/index.tsx
@@ -140,7 +140,7 @@ export const GasSettingMenu = memo<GasSettingMenuProps>(function GasSettingMenu(
                     sx={{
                         py: 0.5,
                         px: 1.5,
-                        border: `1px solid ${theme.palette.maskColor.line}`,
+                        border: `1px solid ${theme.vars.palette.maskColor.line}`,
                         borderRadius: 99,
                         display: 'inline-flex',
                         alignItems: 'center',
diff --git a/packages/mask/popups/components/MnemonicDisplay/index.tsx b/packages/mask/popups/components/MnemonicDisplay/index.tsx
index 9907c65567c5..a7b2ccb4a159 100644
--- a/packages/mask/popups/components/MnemonicDisplay/index.tsx
+++ b/packages/mask/popups/components/MnemonicDisplay/index.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react'
 import { Icons } from '@masknet/icons'
 import { EMPTY_LIST } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
-import { Box, Button, Typography, alpha } from '@mui/material'
+import { Box, Button, Typography } from '@mui/material'
 import { useToggle } from '@react-hookz/web'
 import { Trans } from '@lingui/react/macro'
 
@@ -10,7 +10,7 @@ const useStyles = makeStyles()((theme) => ({
     root: {
         padding: theme.spacing(1),
         borderRadius: 8,
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         position: 'relative',
     },
     words: {
@@ -21,7 +21,7 @@ const useStyles = makeStyles()((theme) => ({
         margin: 0,
     },
     word: {
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         padding: theme.spacing(1),
         borderRadius: 8,
         listStyleType: 'decimal',
@@ -30,14 +30,17 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
         fontSize: 14,
         '&::marker': {
-            backgroundColor: theme.palette.maskColor.bg,
-            color: theme.palette.maskColor.third,
+            backgroundColor: theme.vars.palette.maskColor.bg,
+            color: theme.vars.palette.maskColor.third,
             fontSize: 14,
             fontWeight: 400,
         },
     },
     mask: {
-        background: alpha(theme.palette.mode === 'dark' ? '#000000' : '#ffffff', 0.4),
+        background: 'rgba(255, 255, 255, 0.4)',
+        ...theme.applyStyles('dark', {
+            background: 'rgba(0, 0, 0, 0.4)',
+        }),
         backdropFilter: 'blur(5px)',
         position: 'absolute',
         zIndex: 1,
@@ -52,7 +55,7 @@ const useStyles = makeStyles()((theme) => ({
         cursor: 'pointer',
     },
     tips: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 14,
         lineHeight: '18px',
         textAlign: 'center',
@@ -60,7 +63,7 @@ const useStyles = makeStyles()((theme) => ({
     footer: {
         marginTop: theme.spacing(2),
         display: 'flex',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         justifyContent: 'center',
         gap: 8,
     },
@@ -68,7 +71,7 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 400,
     },
     icon: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         cursor: 'pointer',
     },
 }))
diff --git a/packages/mask/popups/components/Navigator/index.tsx b/packages/mask/popups/components/Navigator/index.tsx
index 132acbe2d899..063865b87808 100644
--- a/packages/mask/popups/components/Navigator/index.tsx
+++ b/packages/mask/popups/components/Navigator/index.tsx
@@ -9,14 +9,17 @@ import { useMessages } from '@masknet/web3-hooks-base'
 const useStyle = makeStyles()((theme) => ({
     container: {
         padding: theme.spacing(2, 1.5),
-        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(0, 0, 0,0.80)' : 'rgba(255, 255, 255, 0.80)',
+        backgroundColor: 'rgba(255, 255, 255, 0.80)',
+        ...theme.applyStyles('dark', {
+            backgroundColor: 'rgba(0, 0, 0,0.80)',
+        }),
         width: '100%',
         backdropFilter: 'blur(16px)',
-        boxShadow: theme.palette.maskColor.bottomBg,
+        boxShadow: theme.vars.palette.maskColor.bottomBg,
         borderRadius: '12px 12px 0 0',
     },
     action: {
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         height: '100%',
         minWidth: 94,
         padding: 6,
@@ -24,7 +27,7 @@ const useStyle = makeStyles()((theme) => ({
     },
     selected: {
         '& > button': {
-            color: theme.palette.maskColor.highlight,
+            color: theme.vars.palette.maskColor.highlight,
             filter: 'drop-shadow(0px 4px 10px rgba(0, 60, 216, 0.2))',
         },
     },
diff --git a/packages/mask/popups/components/NormalHeader/index.tsx b/packages/mask/popups/components/NormalHeader/index.tsx
index 0c3c16c54b8b..bc9cf92be9df 100644
--- a/packages/mask/popups/components/NormalHeader/index.tsx
+++ b/packages/mask/popups/components/NormalHeader/index.tsx
@@ -8,7 +8,7 @@ import { useHasNavigator } from '../../hooks/useHasNavigator.js'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
-        background: theme.palette.maskColor.modalTitleBg,
+        background: theme.vars.palette.maskColor.modalTitleBg,
     },
     header: {
         padding: theme.spacing(2),
@@ -21,12 +21,12 @@ const useStyles = makeStyles()((theme) => ({
     icon: {
         fontSize: 24,
         cursor: 'pointer',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     title: {
         fontSize: 18,
         lineHeight: '22px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         minHeight: 22,
         textAlign: 'center',
diff --git a/packages/mask/popups/components/PersonaPublicKey/index.tsx b/packages/mask/popups/components/PersonaPublicKey/index.tsx
index ffa6ebc89067..6020684f4394 100644
--- a/packages/mask/popups/components/PersonaPublicKey/index.tsx
+++ b/packages/mask/popups/components/PersonaPublicKey/index.tsx
@@ -9,7 +9,7 @@ const useStyles = makeStyles<{ iconSize: number }>()((theme, { iconSize }) => ({
         fontSize: 14,
         fontWeight: 400,
         lineHeight: '16px',
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         display: 'flex',
         columnGap: 2,
         alignItems: 'center',
@@ -19,7 +19,7 @@ const useStyles = makeStyles<{ iconSize: number }>()((theme, { iconSize }) => ({
         height: iconSize,
         fontSize: iconSize,
         lineHeight: `${iconSize}px`,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
     },
 }))
 
diff --git a/packages/mask/popups/components/PopupLayout/index.tsx b/packages/mask/popups/components/PopupLayout/index.tsx
index 42918c39940d..f86e838923f1 100644
--- a/packages/mask/popups/components/PopupLayout/index.tsx
+++ b/packages/mask/popups/components/PopupLayout/index.tsx
@@ -39,7 +39,7 @@ const useStyles = makeStyles()((theme) => ({
         overflow: 'auto',
         display: 'flex',
         flexDirection: 'column',
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         position: 'relative',
     },
     body: {
diff --git a/packages/mask/popups/components/PrivateKeyDisplay/index.tsx b/packages/mask/popups/components/PrivateKeyDisplay/index.tsx
index d8026b4c7462..d42f2d70f9ee 100644
--- a/packages/mask/popups/components/PrivateKeyDisplay/index.tsx
+++ b/packages/mask/popups/components/PrivateKeyDisplay/index.tsx
@@ -4,7 +4,7 @@ import { useAsync, useCopyToClipboard } from 'react-use'
 import { memo, useCallback, useState } from 'react'
 import Services from '#services'
 import { Icons } from '@masknet/icons'
-import { Box, Typography, alpha } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { WalletBalance } from '../index.js'
 import { useToggle } from '@react-hookz/web'
@@ -22,16 +22,16 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
     },
     address: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 12,
         lineHeight: '16px',
     },
     balance: {
         fontSize: 12,
         lineHeight: '16px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         '& > span': {
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             fontSize: 12,
             lineHeight: '16px',
         },
@@ -46,7 +46,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     privateKey: {
         padding: theme.spacing(1.5),
-        background: theme.palette.maskColor.input,
+        background: theme.vars.palette.maskColor.input,
         position: 'relative',
         borderRadius: 8,
     },
@@ -56,14 +56,17 @@ const useStyles = makeStyles()((theme) => ({
         wordWrap: 'break-word',
     },
     view: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         cursor: 'pointer',
         position: 'absolute',
         bottom: 6,
         right: 12,
     },
     mask: {
-        background: alpha(theme.palette.mode === 'dark' ? '#000000' : '#ffffff', 0.4),
+        background: 'rgba(255, 255, 255, 0.4)',
+        ...theme.applyStyles('dark', {
+            background: 'rgba(0, 0, 0, 0.4)',
+        }),
         backdropFilter: 'blur(5px)',
         position: 'absolute',
         zIndex: 1,
@@ -78,7 +81,7 @@ const useStyles = makeStyles()((theme) => ({
         columnGap: 12,
     },
     tips: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 14,
         lineHeight: '18px',
         textAlign: 'left',
diff --git a/packages/mask/popups/components/SelectProvider/index.tsx b/packages/mask/popups/components/SelectProvider/index.tsx
index af03eec4885a..3f959118504d 100644
--- a/packages/mask/popups/components/SelectProvider/index.tsx
+++ b/packages/mask/popups/components/SelectProvider/index.tsx
@@ -19,7 +19,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     providerItem: {
         cursor: 'pointer',
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         borderRadius: 8,
         display: 'flex',
         flexDirection: 'column',
@@ -34,7 +34,7 @@ const useStyles = makeStyles()((theme) => ({
     providerName: {
         fontSize: 12,
         fontWeight: 700,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
 }))
 
diff --git a/packages/mask/popups/components/SignRequestInfo/index.tsx b/packages/mask/popups/components/SignRequestInfo/index.tsx
index f32ee9087ab4..81e07c61252b 100644
--- a/packages/mask/popups/components/SignRequestInfo/index.tsx
+++ b/packages/mask/popups/components/SignRequestInfo/index.tsx
@@ -22,7 +22,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     source: {
         padding: theme.spacing(1.25),
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         marginTop: theme.spacing(4),
         display: 'flex',
         flexDirection: 'column',
@@ -32,7 +32,7 @@ const useStyles = makeStyles()((theme) => ({
     sourceText: {
         fontSize: 12,
         fontWeight: 700,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         wordBreak: 'break-word',
         whiteSpace: 'pre-wrap',
     },
@@ -42,7 +42,7 @@ const useStyles = makeStyles()((theme) => ({
         marginTop: theme.spacing(3),
     },
     dangerField: {
-        color: theme.palette.error.main,
+        color: theme.vars.palette.error.main,
     },
 }))
 
diff --git a/packages/mask/popups/components/SocialAccounts/index.tsx b/packages/mask/popups/components/SocialAccounts/index.tsx
index 33f1f5bb30e1..24c3a9e25467 100644
--- a/packages/mask/popups/components/SocialAccounts/index.tsx
+++ b/packages/mask/popups/components/SocialAccounts/index.tsx
@@ -14,7 +14,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         lineHeight: '18px',
         marginTop: theme.spacing(2),
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     accounts: {
         display: 'grid',
@@ -30,8 +30,8 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 16,
         cursor: 'pointer',
         '&:hover': {
-            background: theme.palette.maskColor.bottom,
-            boxShadow: theme.palette.maskColor.bottomBg,
+            background: theme.vars.palette.maskColor.bottom,
+            boxShadow: theme.vars.palette.maskColor.bottomBg,
             backdropFilter: 'blur(8px)',
         },
     },
@@ -47,7 +47,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     connect: {
         borderRadius: 16,
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         padding: theme.spacing(3.25, 0.5),
         display: 'flex',
         flexDirection: 'column',
diff --git a/packages/mask/popups/components/TokenPicker/TokenItem.tsx b/packages/mask/popups/components/TokenPicker/TokenItem.tsx
index 7f947989f7b3..81565d574243 100644
--- a/packages/mask/popups/components/TokenPicker/TokenItem.tsx
+++ b/packages/mask/popups/components/TokenPicker/TokenItem.tsx
@@ -19,11 +19,11 @@ const useStyles = makeStyles()((theme) => {
             padding: theme.spacing(1, 1.5),
             boxSizing: 'border-box',
             borderRadius: 8,
-            border: `1px solid ${theme.palette.maskColor.line}`,
+            border: `1px solid ${theme.vars.palette.maskColor.line}`,
             marginBottom: theme.spacing(1),
         },
         selected: {
-            borderColor: theme.palette.maskColor.highlight,
+            borderColor: theme.vars.palette.maskColor.highlight,
         },
         tokenIcon: {
             width: 36,
@@ -35,21 +35,21 @@ const useStyles = makeStyles()((theme) => {
         text: {
             fontSize: 16,
             fontWeight: 700,
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
         name: {
             fontSize: 14,
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             display: 'flex',
             alignItems: 'center',
         },
         balance: {
             fontSize: 16,
             fontWeight: 700,
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
         link: {
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
diff --git a/packages/mask/popups/components/TransactionPreview/index.tsx b/packages/mask/popups/components/TransactionPreview/index.tsx
index ffd721da9658..4b3400df3378 100644
--- a/packages/mask/popups/components/TransactionPreview/index.tsx
+++ b/packages/mask/popups/components/TransactionPreview/index.tsx
@@ -34,7 +34,7 @@ import type { ERC721Abi } from '@masknet/web3-contracts/types/ERC721.js'
 
 const useStyles = makeStyles()((theme) => ({
     info: {
-        background: theme.palette.maskColor.modalTitleBg,
+        background: theme.vars.palette.maskColor.modalTitleBg,
         borderRadius: 8,
         padding: theme.spacing(1.5),
     },
@@ -46,7 +46,7 @@ const useStyles = makeStyles()((theme) => ({
     addressTitle: {
         fontSize: 12,
         fontWeight: 700,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     amount: {
         display: 'flex',
@@ -62,7 +62,7 @@ const useStyles = makeStyles()((theme) => ({
     gasFeeTitle: {
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
 }))
 
diff --git a/packages/mask/popups/components/UnlockERC20Token/index.tsx b/packages/mask/popups/components/UnlockERC20Token/index.tsx
index c8834f987143..1e4ca3d8e95f 100644
--- a/packages/mask/popups/components/UnlockERC20Token/index.tsx
+++ b/packages/mask/popups/components/UnlockERC20Token/index.tsx
@@ -23,11 +23,11 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 12,
         fontWeight: 700,
         textAlign: 'center',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginTop: theme.spacing(1.25),
     },
     tokenInfo: {
-        background: theme.palette.maskColor.modalTitleBg,
+        background: theme.vars.palette.maskColor.modalTitleBg,
         padding: theme.spacing(1),
         marginTop: theme.spacing(1.25),
         display: 'flex',
@@ -42,34 +42,34 @@ const useStyles = makeStyles()((theme) => ({
     address: {
         fontSize: 12,
         transform: 'scale(0.8333)',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontWeight: 400,
         transformOrigin: 'left',
     },
     link: {
         width: 16,
         height: 16,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     amountInfo: {
         marginTop: theme.spacing(3.25),
         padding: theme.spacing(1.5),
         borderRadius: 8,
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         display: 'flex',
         flexDirection: 'column',
         rowGap: 10,
     },
     input: {
         paddingRight: '0px !important',
-        background: theme.palette.maskColor.input,
+        background: theme.vars.palette.maskColor.input,
     },
     max: {
         fontWeight: 400,
         textTransform: 'uppercase',
     },
     spender: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 12,
         fontWeight: 700,
         lineHeight: '16px',
@@ -78,7 +78,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     spenderAddress: {
         marginTop: 4,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 12,
         fontWeight: 700,
         lineHeight: '16px',
@@ -89,7 +89,7 @@ const useStyles = makeStyles()((theme) => ({
     gasFeeTitle: {
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
 }))
 
@@ -235,8 +235,8 @@ export const UnlockERC20Token = memo<UnlockERC20TokenProps>(function UnlockERC20
                         }}
                         color={
                             isGreaterThan(value, leftShift(balance, token?.decimals)) ?
-                                theme.palette.maskColor.danger
-                            :   theme.palette.maskColor.warn
+                                theme.vars.palette.maskColor.danger
+                            :   theme.vars.palette.maskColor.warn
                         }>
                         {tips}
                     </Typography>
@@ -257,7 +257,7 @@ export const UnlockERC20Token = memo<UnlockERC20TokenProps>(function UnlockERC20
                                     transaction.formattedTransaction.popup.spender,
                                 )}
                                 className={classes.link}
-                                style={{ color: theme.palette.maskColor.second }}>
+                                style={{ color: theme.vars.palette.maskColor.second }}>
                                 <Icons.LinkOut size={16} />
                             </Link>
                         </Typography>
diff --git a/packages/mask/popups/components/WalletAvatar/index.tsx b/packages/mask/popups/components/WalletAvatar/index.tsx
index 9f065b39e53f..8ac033b88fac 100644
--- a/packages/mask/popups/components/WalletAvatar/index.tsx
+++ b/packages/mask/popups/components/WalletAvatar/index.tsx
@@ -15,7 +15,7 @@ const useStyles = makeStyles()((theme) => ({
         position: 'absolute',
         right: -3,
         bottom: -1,
-        border: `1px solid ${theme.palette.common.white}`,
+        border: `1px solid ${theme.vars.palette.common.white}`,
         borderRadius: '50%',
     },
 }))
diff --git a/packages/mask/popups/components/WalletItem/index.tsx b/packages/mask/popups/components/WalletItem/index.tsx
index 2594d28f9ced..6430fce11dfb 100644
--- a/packages/mask/popups/components/WalletItem/index.tsx
+++ b/packages/mask/popups/components/WalletItem/index.tsx
@@ -27,10 +27,10 @@ const useStyles = makeStyles()((theme) => ({
         padding: theme.spacing(1),
         display: 'flex',
         cursor: 'pointer',
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
         borderRadius: 8,
         '&:hover': {
-            backgroundColor: theme.palette.maskColor.bg,
+            backgroundColor: theme.vars.palette.maskColor.bg,
         },
         [`& .${listItemSecondaryActionClasses.root}`]: {
             right: 0,
@@ -38,12 +38,12 @@ const useStyles = makeStyles()((theme) => ({
     },
     address: {
         fontSize: 12,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         display: 'flex',
         alignItems: 'center',
     },
     mainLine: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 500,
         display: 'flex',
         alignItems: 'center',
@@ -70,13 +70,13 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 4,
         lineHeight: '16px',
         height: 20,
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         marginLeft: theme.spacing(1),
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     balance: {
         textAlign: 'left',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'flex-end',
diff --git a/packages/mask/popups/components/WalletSettingList/index.tsx b/packages/mask/popups/components/WalletSettingList/index.tsx
index 8ad8b4ad8f3b..b64204a2662c 100644
--- a/packages/mask/popups/components/WalletSettingList/index.tsx
+++ b/packages/mask/popups/components/WalletSettingList/index.tsx
@@ -12,12 +12,12 @@ export const WalletList = memo(function WalletList() {
     return (
         <Box sx={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
             <Icons.EmptySimple size={36} />
-            <Typography color={theme.palette.maskColor.second} sx={{ fontSize: 14, mt: 1.5, textAlign: 'center' }}>
+            <Typography color={theme.vars.palette.maskColor.second} sx={{ fontSize: 14, mt: 1.5, textAlign: 'center' }}>
                 <Trans>
                     No associated wallet.{' '}
                     <RouterLink
                         to={urlcat(PopupRoutes.Personas, { tab: PopupHomeTabType.ConnectedWallets })}
-                        style={{ display: 'block', color: theme.palette.maskColor.main, cursor: 'pointer' }}>
+                        style={{ display: 'block', color: theme.vars.palette.maskColor.main, cursor: 'pointer' }}>
                         Add Wallet.
                     </RouterLink>
                 </Trans>
diff --git a/packages/mask/popups/hooks/useGasOptionsMenu.tsx b/packages/mask/popups/hooks/useGasOptionsMenu.tsx
index 452c4a715197..fcca5b80219b 100644
--- a/packages/mask/popups/hooks/useGasOptionsMenu.tsx
+++ b/packages/mask/popups/hooks/useGasOptionsMenu.tsx
@@ -12,7 +12,7 @@ import { Trans } from '@lingui/react/macro'
 const useStyles = makeStyles()((theme) => ({
     paper: {
         borderRadius: 16,
-        boxShadow: theme.palette.maskColor.bottomBg,
+        boxShadow: theme.vars.palette.maskColor.bottomBg,
     },
     list: {
         padding: theme.spacing(0.5, 0),
@@ -21,7 +21,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
-        borderBottom: `1px solid ${theme.palette.maskColor.line}`,
+        borderBottom: `1px solid ${theme.vars.palette.maskColor.line}`,
         minHeight: 38,
         '& > p:first-of-type': {
             marginRight: 12,
@@ -38,7 +38,7 @@ const useStyles = makeStyles()((theme) => ({
     optionValue: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
     },
 }))
 
diff --git a/packages/mask/popups/modals/AddContactModal/index.tsx b/packages/mask/popups/modals/AddContactModal/index.tsx
index 65ed39986697..2845c1f9a98c 100644
--- a/packages/mask/popups/modals/AddContactModal/index.tsx
+++ b/packages/mask/popups/modals/AddContactModal/index.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState } from 'react'
 import { useAsyncFn } from 'react-use'
-import { ActionButton, MaskTextField, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
-import { alpha } from '@mui/system'
+import { alpha, ActionButton, MaskTextField, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
 import { buttonClasses } from '@mui/material/Button'
 import type { SingletonModalProps } from '@masknet/shared-base'
 import { useSingletonModal } from '@masknet/shared-base-ui'
@@ -20,17 +19,17 @@ const useStyles = makeStyles()((theme) => ({
         flex: 1,
     },
     secondaryButton: {
-        backgroundColor: theme.palette.maskColor.thirdMain,
-        color: theme.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.thirdMain,
+        color: theme.vars.palette.maskColor.main,
         border: 'none!important',
         ['&:hover']: {
-            background: theme.palette.maskColor.thirdMain,
-            boxShadow: `0px 8px 25px ${alpha(theme.palette.maskColor.thirdMain, 0.1)}`,
+            background: theme.vars.palette.maskColor.thirdMain,
+            boxShadow: `0px 8px 25px ${alpha(theme.vars.palette.maskColor.thirdMain, 0.1)}`,
             border: 'none',
         },
         [`&.${buttonClasses.disabled}`]: {
-            color: theme.palette.maskColor.main,
-            background: theme.palette.maskColor.thirdMain,
+            color: theme.vars.palette.maskColor.main,
+            background: theme.vars.palette.maskColor.thirdMain,
             opacity: 0.4,
         },
     },
@@ -47,7 +46,7 @@ const useStyles = makeStyles()((theme) => ({
         marginTop: 12,
     },
     helperText: {
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
         marginTop: 12,
     },
 }))
@@ -120,7 +119,7 @@ function AddContactDrawer({ onConfirm, address, name, setName, setAddress, ...re
                             addressError || addressExistError ?
                                 <InputAdornment position="end">
                                     <IconButton onClick={() => setAddress('')} edge="end" size="small">
-                                        <Icons.Close size={18} color={theme.palette.maskColor.danger} />
+                                        <Icons.Close size={18} color={theme.vars.palette.maskColor.danger} />
                                     </IconButton>
                                 </InputAdornment>
                             :   null,
diff --git a/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx b/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx
index 7f3323a19732..750ecc913e3d 100644
--- a/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx
@@ -184,7 +184,7 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
                         />
                     )}
                 />
-                <Typography sx={{ fontSize: 12 }} color={theme.palette.maskColor.second}>
+                <Typography sx={{ fontSize: 12 }} color={theme.vars.palette.maskColor.second}>
                     <Trans>
                         Backup password must be 8-20 characters, including uppercase, lowercase, special characters and
                         numbers.
diff --git a/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx b/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
index 03918f9b0069..92adb633cc8f 100644
--- a/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
@@ -78,7 +78,7 @@ function ChangePaymentPasswordDrawer({
     return (
         <BottomDrawer {...rest} classes={{ title: classes.title }}>
             <Typography
-                color={theme.palette.maskColor.third}
+                color={theme.vars.palette.maskColor.third}
                 sx={{
                     fontWeight: 700,
                     textAlign: 'center',
@@ -128,7 +128,7 @@ function ChangePaymentPasswordDrawer({
                     slotProps={{ input: inputProps }}
                 />
             </Box>
-            <Typography color={theme.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1.5, height: 32 }}>
+            <Typography color={theme.vars.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1.5, height: 32 }}>
                 {passwordTooShort || passwordNotMatch || originalPasswordWrong}
             </Typography>
             <ActionButton loading={loading} disabled={loading} onClick={handleClick} sx={{ marginTop: '16px' }}>
diff --git a/packages/mask/popups/modals/ChooseCurrencyModal/index.tsx b/packages/mask/popups/modals/ChooseCurrencyModal/index.tsx
index 52ea3dda05e4..f2e563d0de5e 100644
--- a/packages/mask/popups/modals/ChooseCurrencyModal/index.tsx
+++ b/packages/mask/popups/modals/ChooseCurrencyModal/index.tsx
@@ -25,14 +25,14 @@ const useStyles = makeStyles()((theme) => ({
         cursor: 'pointer',
     },
     selectedItem: {
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
     },
     itemBox: {
         display: 'flex',
         alignItems: 'center',
     },
     text: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 12,
         fontWeight: 700,
         marginLeft: 8,
@@ -63,7 +63,7 @@ const CurrencyItem = memo(function CurrencyItem({ fiatCurrencyType }: CurrencyIt
                 <FiatCurrencyIcon type={fiatCurrencyType} size={24} />
                 <Typography className={classes.text}>{resolveCurrencyFullName(fiatCurrencyType)}</Typography>
             </Box>
-            <RadioIndicator size={20} checked={checked} uncheckedColor={theme.palette.maskColor.secondaryLine} />
+            <RadioIndicator size={20} checked={checked} uncheckedColor={theme.vars.palette.maskColor.secondaryLine} />
         </li>
     )
 })
diff --git a/packages/mask/popups/modals/ChooseNetworkModal/index.tsx b/packages/mask/popups/modals/ChooseNetworkModal/index.tsx
index b34b7d60e1e7..ced259d7892b 100644
--- a/packages/mask/popups/modals/ChooseNetworkModal/index.tsx
+++ b/packages/mask/popups/modals/ChooseNetworkModal/index.tsx
@@ -33,7 +33,7 @@ const useStyles = makeStyles()((theme) => ({
         listStyle: 'none',
         borderRadius: 8,
         padding: theme.spacing(1.5),
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         overflow: 'auto',
     },
     disabled: {
@@ -54,7 +54,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     name: {
         fontSize: 12,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         lineHeight: '16px',
         textOverflow: 'ellipsis',
@@ -63,7 +63,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     balance: {
         fontSize: 12,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontWeight: 700,
         lineHeight: '16px',
     },
@@ -137,7 +137,7 @@ const NetworkItem = memo(function NetworkItem({ network, currentNetworkId, disab
             </div>
             {selected ?
                 <Icons.RadioButtonChecked size={20} />
-            :   <Icons.RadioButtonUnChecked size={20} color={theme.palette.maskColor.line} />}
+            :   <Icons.RadioButtonUnChecked size={20} color={theme.vars.palette.maskColor.line} />}
         </li>
     )
 })
diff --git a/packages/mask/popups/modals/ConfirmModal/index.tsx b/packages/mask/popups/modals/ConfirmModal/index.tsx
index 227c399341db..8c26f6ba9805 100644
--- a/packages/mask/popups/modals/ConfirmModal/index.tsx
+++ b/packages/mask/popups/modals/ConfirmModal/index.tsx
@@ -9,7 +9,7 @@ import { BottomDrawer, type BottomDrawerProps } from '../../components/index.js'
 const useStyles = makeStyles()((theme) => ({
     message: {
         fontSize: 14,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         fontWeight: 700,
         lineHeight: '18px',
         padding: theme.spacing(1.5, 0, 2),
diff --git a/packages/mask/popups/modals/ConnectProvider/index.tsx b/packages/mask/popups/modals/ConnectProvider/index.tsx
index 59c65fc126ac..997151e27348 100644
--- a/packages/mask/popups/modals/ConnectProvider/index.tsx
+++ b/packages/mask/popups/modals/ConnectProvider/index.tsx
@@ -19,7 +19,7 @@ interface StyleProps {
 const useStyles = makeStyles<StyleProps>()((theme, { loading, timeout }) => ({
     tips: {
         fontSize: 14,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         fontWeight: 700,
         lineHeight: '18px',
         textAlign: 'center',
@@ -46,14 +46,14 @@ const useStyles = makeStyles<StyleProps>()((theme, { loading, timeout }) => ({
                 width: 56,
                 height: 56,
                 borderRadius: '50%',
-                border: `2px solid ${theme.palette.maskColor.main}`,
-                borderTopColor: theme.palette.maskColor.second,
+                border: `2px solid ${theme.vars.palette.maskColor.main}`,
+                borderTopColor: theme.vars.palette.maskColor.second,
                 animation: 'spinner 2s linear infinite',
             },
         }),
 
         ...(timeout && {
-            border: `2px solid ${theme.palette.maskColor.danger}`,
+            border: `2px solid ${theme.vars.palette.maskColor.danger}`,
             borderRadius: '50%',
             padding: 10,
         }),
diff --git a/packages/mask/popups/modals/DeleteContactModal/index.tsx b/packages/mask/popups/modals/DeleteContactModal/index.tsx
index 42b3a15fe5fd..9a116b3f791b 100644
--- a/packages/mask/popups/modals/DeleteContactModal/index.tsx
+++ b/packages/mask/popups/modals/DeleteContactModal/index.tsx
@@ -1,9 +1,8 @@
 import { useState } from 'react'
 import { useAsyncFn } from 'react-use'
-import { alpha } from '@mui/system'
 import { Typography } from '@mui/material'
 import { buttonClasses } from '@mui/material/Button'
-import { ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { alpha, ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
 import type { SingletonModalProps } from '@masknet/shared-base'
 import { useSingletonModal } from '@masknet/shared-base-ui'
 import { EmojiAvatar } from '@masknet/shared'
@@ -17,17 +16,17 @@ const useStyles = makeStyles()((theme) => ({
         flex: 1,
     },
     secondaryButton: {
-        backgroundColor: theme.palette.maskColor.thirdMain,
-        color: theme.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.thirdMain,
+        color: theme.vars.palette.maskColor.main,
         border: 'none!important',
         ['&:hover']: {
-            background: theme.palette.maskColor.thirdMain,
-            boxShadow: `0px 8px 25px ${alpha(theme.palette.maskColor.thirdMain, 0.1)}`,
+            background: theme.vars.palette.maskColor.thirdMain,
+            boxShadow: `0px 8px 25px ${alpha(theme.vars.palette.maskColor.thirdMain, 0.1)}`,
             border: 'none',
         },
         [`&.${buttonClasses.disabled}`]: {
-            color: theme.palette.maskColor.main,
-            background: theme.palette.maskColor.thirdMain,
+            color: theme.vars.palette.maskColor.main,
+            background: theme.vars.palette.maskColor.thirdMain,
             opacity: 0.4,
         },
     },
@@ -42,13 +41,13 @@ const useStyles = makeStyles()((theme) => ({
     },
     address: {
         textAlign: 'center',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginTop: 12,
         fontSize: 16,
     },
     name: {
         textAlign: 'center',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         marginTop: 12,
         fontSize: 18,
         fontWeight: 700,
diff --git a/packages/mask/popups/modals/EditContactModal/index.tsx b/packages/mask/popups/modals/EditContactModal/index.tsx
index a7221063b9d7..eb13e9f0b02c 100644
--- a/packages/mask/popups/modals/EditContactModal/index.tsx
+++ b/packages/mask/popups/modals/EditContactModal/index.tsx
@@ -1,8 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'
 import { useAsyncFn } from 'react-use'
-import { ActionButton, MaskTextField, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { alpha, ActionButton, MaskTextField, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
 import { buttonClasses } from '@mui/material/Button'
-import { alpha } from '@mui/system'
 import { Box, Typography } from '@mui/material'
 import type { SingletonModalProps } from '@masknet/shared-base'
 import { useSingletonModal } from '@masknet/shared-base-ui'
@@ -20,17 +19,17 @@ const useStyles = makeStyles()((theme) => ({
         flex: 1,
     },
     secondaryButton: {
-        backgroundColor: theme.palette.maskColor.thirdMain,
-        color: theme.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.thirdMain,
+        color: theme.vars.palette.maskColor.main,
         border: 'none!important',
         ['&:hover']: {
-            background: theme.palette.maskColor.thirdMain,
-            boxShadow: `0px 8px 25px ${alpha(theme.palette.maskColor.thirdMain, 0.1)}`,
+            background: theme.vars.palette.maskColor.thirdMain,
+            boxShadow: `0px 8px 25px ${alpha(theme.vars.palette.maskColor.thirdMain, 0.1)}`,
             border: 'none',
         },
         [`&.${buttonClasses.disabled}`]: {
-            color: theme.palette.maskColor.main,
-            background: theme.palette.maskColor.thirdMain,
+            color: theme.vars.palette.maskColor.main,
+            background: theme.vars.palette.maskColor.thirdMain,
             opacity: 0.4,
         },
     },
@@ -52,9 +51,9 @@ const useStyles = makeStyles()((theme) => ({
         textAlign: 'center',
         fontSize: 18,
         fontWeight: 700,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         height: 30,
-        caretColor: theme.palette.maskColor.primary,
+        caretColor: theme.vars.palette.maskColor.primary,
         border: 'none',
         outline: 'none',
         '&.Mui-focused': {
@@ -66,12 +65,12 @@ const useStyles = makeStyles()((theme) => ({
         },
     },
     helperText: {
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
         marginTop: 12,
     },
     address: {
         textAlign: 'center',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginTop: 12,
         fontSize: 16,
     },
diff --git a/packages/mask/popups/modals/GasSettingModal/GasSettingDialog.tsx b/packages/mask/popups/modals/GasSettingModal/GasSettingDialog.tsx
index d4cee814eec8..d3ef9e2c26ba 100644
--- a/packages/mask/popups/modals/GasSettingModal/GasSettingDialog.tsx
+++ b/packages/mask/popups/modals/GasSettingModal/GasSettingDialog.tsx
@@ -39,19 +39,19 @@ const useStyles = makeStyles()((theme) => ({
     title: {
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         lineHeight: '18px',
         marginBottom: theme.spacing(1.5),
     },
     unit: {
         fontSize: 14,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         lineHeight: '18px',
     },
     seconds: {
         textAlign: 'center',
         fontSize: 14,
-        color: theme.palette.maskColor.success,
+        color: theme.vars.palette.maskColor.success,
     },
     preview: {
         textAlign: 'center',
@@ -310,8 +310,8 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
                     sx={{
                         color:
                             replaceType === ReplaceType.CANCEL ?
-                                theme.palette.maskColor.danger
-                            :   theme.palette.maskColor.warn,
+                                theme.vars.palette.maskColor.danger
+                            :   theme.vars.palette.maskColor.warn,
                     }}>
                     {tips}
                 </Typography>
diff --git a/packages/mask/popups/modals/PersonaRenameModal/index.tsx b/packages/mask/popups/modals/PersonaRenameModal/index.tsx
index 91ee5129621d..701eb2c1d88e 100644
--- a/packages/mask/popups/modals/PersonaRenameModal/index.tsx
+++ b/packages/mask/popups/modals/PersonaRenameModal/index.tsx
@@ -42,7 +42,7 @@ export const PersonaRenameModal = memo<ActionModalBaseProps>(function PersonaRen
                     <Trans>Confirm</Trans>
                 </ActionButton>
             }>
-            <Typography sx={{ fontWeight: 700, textAlign: 'center' }} color={theme.palette.maskColor.third}>
+            <Typography sx={{ fontWeight: 700, textAlign: 'center' }} color={theme.vars.palette.maskColor.third}>
                 <Trans>Persona name must between 1 to 24 characters.</Trans>
             </Typography>
             <Box sx={{ display: 'flex', justifyContent: 'center', mx: 0.5, mb: 0.5 }}>
@@ -69,7 +69,7 @@ export const PersonaRenameModal = memo<ActionModalBaseProps>(function PersonaRen
                                             setError('')
                                         }}
                                         size={18}
-                                        color={error ? theme.palette.maskColor.danger : undefined}
+                                        color={error ? theme.vars.palette.maskColor.danger : undefined}
                                     />
                                 :   null,
                             disableUnderline: true,
diff --git a/packages/mask/popups/modals/PersonaSettingModal/index.tsx b/packages/mask/popups/modals/PersonaSettingModal/index.tsx
index aa4d2c87471f..4b8bf220eafe 100644
--- a/packages/mask/popups/modals/PersonaSettingModal/index.tsx
+++ b/packages/mask/popups/modals/PersonaSettingModal/index.tsx
@@ -32,14 +32,14 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     arrow: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         cursor: 'pointer',
     },
     icon: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     right: {
         display: 'flex',
diff --git a/packages/mask/popups/modals/SelectAppearanceModal/index.tsx b/packages/mask/popups/modals/SelectAppearanceModal/index.tsx
index a63ac2b3302e..a33bd8adc869 100644
--- a/packages/mask/popups/modals/SelectAppearanceModal/index.tsx
+++ b/packages/mask/popups/modals/SelectAppearanceModal/index.tsx
@@ -16,7 +16,7 @@ const useStyles = makeStyles()((theme) => ({
     icon: {
         minWidth: 24,
         height: 16,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         '& > *': {
             width: 16,
             height: 16,
diff --git a/packages/mask/popups/modals/SelectProviderModal/index.tsx b/packages/mask/popups/modals/SelectProviderModal/index.tsx
index 46022692acff..6c66387172a3 100644
--- a/packages/mask/popups/modals/SelectProviderModal/index.tsx
+++ b/packages/mask/popups/modals/SelectProviderModal/index.tsx
@@ -22,7 +22,7 @@ export const SelectProviderModal = memo<ActionModalBaseProps>(function SelectPro
                     fontWeight: 700,
                     lineHeight: '18px',
                 }}
-                color={theme.palette.maskColor.third}>
+                color={theme.vars.palette.maskColor.third}>
                 {onlyMask ?
                     <Trans>Select and Connect to your wallet</Trans>
                 :   <Trans>Connect Mask Network Account using your wallet.</Trans>}
diff --git a/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx b/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx
index f1b1d73e170a..9021fc2182f0 100644
--- a/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx
@@ -102,14 +102,14 @@ export const SetBackupPasswordModal = memo<ActionModalBaseProps>(function SetBac
                     helperText={passwordMatched ? '' : <Trans>Two entered passwords are not the same.</Trans>}
                 />
                 <Box>
-                    <Typography sx={{ fontSize: 12 }} color={theme.palette.maskColor.second}>
+                    <Typography sx={{ fontSize: 12 }} color={theme.vars.palette.maskColor.second}>
                         <Trans>
                             Backup password must be 8-20 characters, including uppercase, lowercase, special characters
                             and numbers.
                         </Trans>
                     </Typography>
                     {to ?
-                        <Typography sx={{ mt: 2, fontSize: 12 }} color={theme.palette.maskColor.second}>
+                        <Typography sx={{ mt: 2, fontSize: 12 }} color={theme.vars.palette.maskColor.second}>
                             <Trans>Please set up backup password to export private key.</Trans>
                         </Typography>
                     :   null}
diff --git a/packages/mask/popups/modals/ShowPrivateKeyModal/index.tsx b/packages/mask/popups/modals/ShowPrivateKeyModal/index.tsx
index 2eefe49acd33..bd2e52adc41f 100644
--- a/packages/mask/popups/modals/ShowPrivateKeyModal/index.tsx
+++ b/packages/mask/popups/modals/ShowPrivateKeyModal/index.tsx
@@ -61,7 +61,7 @@ function ShowPrivateKeyDrawer({ password, error, setPassword, setError, ...rest
                 />
             </Box>
             {error ?
-                <Typography color={theme.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1 }}>
+                <Typography color={theme.vars.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1 }}>
                     {error}
                 </Typography>
             :   null}
diff --git a/packages/mask/popups/modals/SupportedSitesModal/index.tsx b/packages/mask/popups/modals/SupportedSitesModal/index.tsx
index 34e8d50696b0..478e8dfb9d4d 100644
--- a/packages/mask/popups/modals/SupportedSitesModal/index.tsx
+++ b/packages/mask/popups/modals/SupportedSitesModal/index.tsx
@@ -15,7 +15,7 @@ const useStyles = makeStyles()((theme) => ({
     description: {
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         lineHeight: '18px',
     },
     list: {
@@ -30,7 +30,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     name: {
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 12,
         lineHeight: '16px',
     },
diff --git a/packages/mask/popups/modals/SwitchPersonaModal/PersonaItem.tsx b/packages/mask/popups/modals/SwitchPersonaModal/PersonaItem.tsx
index f1bfec6a87a6..102ed68f5818 100644
--- a/packages/mask/popups/modals/SwitchPersonaModal/PersonaItem.tsx
+++ b/packages/mask/popups/modals/SwitchPersonaModal/PersonaItem.tsx
@@ -10,10 +10,10 @@ const useStyles = makeStyles()((theme) => ({
         padding: theme.spacing(1),
         display: 'flex',
         cursor: 'pointer',
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
         borderRadius: 8,
         '&:hover': {
-            backgroundColor: theme.palette.maskColor.bg,
+            backgroundColor: theme.vars.palette.maskColor.bg,
         },
         [`& .${listItemSecondaryActionClasses.root}`]: {
             right: 0,
@@ -30,7 +30,7 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '18px',
     },
     icon: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
 }))
 
diff --git a/packages/mask/popups/modals/SwitchPersonaModal/index.tsx b/packages/mask/popups/modals/SwitchPersonaModal/index.tsx
index ddc341250a2a..dd981853129b 100644
--- a/packages/mask/popups/modals/SwitchPersonaModal/index.tsx
+++ b/packages/mask/popups/modals/SwitchPersonaModal/index.tsx
@@ -13,7 +13,7 @@ import { Trans } from '@lingui/react/macro'
 const useStyles = makeStyles()((theme) => ({
     content: {
         overflow: 'auto',
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
         display: 'flex',
         flexDirection: 'column',
     },
diff --git a/packages/mask/popups/modals/UpdatePermissionModal/index.tsx b/packages/mask/popups/modals/UpdatePermissionModal/index.tsx
index a1bd6a93478a..1f8727089213 100644
--- a/packages/mask/popups/modals/UpdatePermissionModal/index.tsx
+++ b/packages/mask/popups/modals/UpdatePermissionModal/index.tsx
@@ -9,14 +9,14 @@ import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     text: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 14,
         lineHeight: '18px',
     },
     permissions: {
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         padding: 6,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 14,
         lineHeight: '18px',
         margin: theme.spacing(2, 0),
diff --git a/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx b/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx
index 319b487d569a..49f6ef746ff7 100644
--- a/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx
+++ b/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx
@@ -27,15 +27,15 @@ const useStyles = makeStyles()((theme) => ({
         justifyContent: 'center',
         alignItems: 'center',
         height: 32,
-        background: theme.palette.maskColor.thirdMain,
+        background: theme.vars.palette.maskColor.thirdMain,
         flex: '1 0 0',
         fontSize: 12,
         fontWeight: 700,
         cursor: 'pointer',
     },
     selected: {
-        color: theme.palette.maskColor.bottom,
-        background: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.main,
     },
     listItemOneDay: {
         flex: 'auto',
@@ -97,7 +97,7 @@ function WalletAutoLockSettingDrawer(props: BottomDrawerProps) {
     return (
         <BottomDrawer {...props}>
             <Typography
-                color={theme.palette.maskColor.third}
+                color={theme.vars.palette.maskColor.third}
                 sx={{
                     fontWeight: 700,
                     textAlign: 'center',
diff --git a/packages/mask/popups/modals/WalletRemoveModal/index.tsx b/packages/mask/popups/modals/WalletRemoveModal/index.tsx
index f6b0ae52093d..2e3ace765bbb 100644
--- a/packages/mask/popups/modals/WalletRemoveModal/index.tsx
+++ b/packages/mask/popups/modals/WalletRemoveModal/index.tsx
@@ -61,7 +61,7 @@ function WalletRemoveDrawer({ wallet, error, password, setPassword, setError, ..
     return (
         <BottomDrawer {...rest}>
             <Typography
-                color={theme.palette.maskColor.third}
+                color={theme.vars.palette.maskColor.third}
                 sx={{
                     fontWeight: 700,
                     textAlign: 'center',
@@ -70,7 +70,7 @@ function WalletRemoveDrawer({ wallet, error, password, setPassword, setError, ..
                 <Trans>Are you sure to remove this wallet?</Trans>
             </Typography>
             <Typography
-                color={theme.palette.maskColor.main}
+                color={theme.vars.palette.maskColor.main}
                 sx={{
                     fontWeight: 700,
                     textAlign: 'center',
@@ -93,7 +93,7 @@ function WalletRemoveDrawer({ wallet, error, password, setPassword, setError, ..
                 />
             </Box>
             {error ?
-                <Typography color={theme.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1 }}>
+                <Typography color={theme.vars.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1 }}>
                     {error}
                 </Typography>
             :   null}
diff --git a/packages/mask/popups/modals/WalletRenameModal/index.tsx b/packages/mask/popups/modals/WalletRenameModal/index.tsx
index ac29a8489a53..dd4aa6c97533 100644
--- a/packages/mask/popups/modals/WalletRenameModal/index.tsx
+++ b/packages/mask/popups/modals/WalletRenameModal/index.tsx
@@ -50,7 +50,7 @@ function WalletRenameDrawer({ wallet, walletName, ...rest }: WalletRenameDrawerP
     return (
         <BottomDrawer {...rest}>
             <Typography
-                color={theme.palette.maskColor.third}
+                color={theme.vars.palette.maskColor.third}
                 sx={{
                     fontWeight: 700,
                     textAlign: 'center',
@@ -80,7 +80,7 @@ function WalletRenameDrawer({ wallet, walletName, ...rest }: WalletRenameDrawerP
                                             setError('')
                                         }}
                                         size={18}
-                                        color={error ? theme.palette.maskColor.danger : undefined}
+                                        color={error ? theme.vars.palette.maskColor.danger : undefined}
                                     />
                                 :   null,
                             disableUnderline: true,
@@ -89,7 +89,7 @@ function WalletRenameDrawer({ wallet, walletName, ...rest }: WalletRenameDrawerP
                 />
             </Box>
             {error ?
-                <Typography color={theme.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1 }}>
+                <Typography color={theme.vars.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1 }}>
                     {error}
                 </Typography>
             :   null}
diff --git a/packages/mask/popups/pages/Friends/ContactCard/Account/index.tsx b/packages/mask/popups/pages/Friends/ContactCard/Account/index.tsx
index f201ef276c32..91bbdcf936b7 100644
--- a/packages/mask/popups/pages/Friends/ContactCard/Account/index.tsx
+++ b/packages/mask/popups/pages/Friends/ContactCard/Account/index.tsx
@@ -14,7 +14,7 @@ interface AccountProps {
 
 const useStyles = makeStyles()((theme) => ({
     iconBlack: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
     },
diff --git a/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx b/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx
index b455aa6f2dc3..ba9702155a85 100644
--- a/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx
+++ b/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx
@@ -15,7 +15,7 @@ interface SocialAccountProps {
 
 const useStyles = makeStyles()((theme) => ({
     iconBlack: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
     },
diff --git a/packages/mask/popups/pages/Friends/ContactCard/index.tsx b/packages/mask/popups/pages/Friends/ContactCard/index.tsx
index 070f14cebe1a..c65f9af356c4 100644
--- a/packages/mask/popups/pages/Friends/ContactCard/index.tsx
+++ b/packages/mask/popups/pages/Friends/ContactCard/index.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles()((theme) => ({
         width: '100%',
         borderRadius: '8px',
         border: '1px solid',
-        borderColor: theme.palette.maskColor.line,
+        borderColor: theme.vars.palette.maskColor.line,
     },
     title: {
         display: 'flex',
@@ -33,7 +33,7 @@ const useStyles = makeStyles()((theme) => ({
         padding: '12px',
         borderTopLeftRadius: '6px',
         borderTopRightRadius: '6px',
-        background: theme.palette.maskColor.modalTitleBg,
+        background: theme.vars.palette.maskColor.modalTitleBg,
     },
     avatar: {
         width: 40,
diff --git a/packages/mask/popups/pages/Friends/Contacts/index.tsx b/packages/mask/popups/pages/Friends/Contacts/index.tsx
index 6398917d6179..2429776b9d2c 100644
--- a/packages/mask/popups/pages/Friends/Contacts/index.tsx
+++ b/packages/mask/popups/pages/Friends/Contacts/index.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         flexDirection: 'column',
         gap: 12,
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         whiteSpace: 'nowrap',
     },
     cardContainer: {
diff --git a/packages/mask/popups/pages/Friends/Detail/Account/index.tsx b/packages/mask/popups/pages/Friends/Detail/Account/index.tsx
index e12f3ad75dbd..2adb6e5cefc0 100644
--- a/packages/mask/popups/pages/Friends/Detail/Account/index.tsx
+++ b/packages/mask/popups/pages/Friends/Detail/Account/index.tsx
@@ -22,7 +22,7 @@ const useStyles = makeStyles()((theme) => ({
         },
     },
     iconBlack: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
     },
diff --git a/packages/mask/popups/pages/Friends/Detail/SocialAccount/index.tsx b/packages/mask/popups/pages/Friends/Detail/SocialAccount/index.tsx
index 1caa1f77423a..09ecbecf543f 100644
--- a/packages/mask/popups/pages/Friends/Detail/SocialAccount/index.tsx
+++ b/packages/mask/popups/pages/Friends/Detail/SocialAccount/index.tsx
@@ -22,7 +22,7 @@ const useStyles = makeStyles()((theme) => ({
         },
     },
     iconBlack: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
     },
diff --git a/packages/mask/popups/pages/Friends/Detail/UI.tsx b/packages/mask/popups/pages/Friends/Detail/UI.tsx
index 47fa093789ba..1539d9ce7671 100644
--- a/packages/mask/popups/pages/Friends/Detail/UI.tsx
+++ b/packages/mask/popups/pages/Friends/Detail/UI.tsx
@@ -1,10 +1,9 @@
 import { makeStyles } from '@masknet/theme'
 import { memo, useCallback } from 'react'
-import { Box, Avatar, Typography } from '@mui/material'
+import { Box, Avatar, Typography, useTheme } from '@mui/material'
 import { Icons } from '@masknet/icons'
 import { useNavigate } from 'react-router-dom'
 import { type ProfileIdentifier, formatPersonaFingerprint } from '@masknet/shared-base'
-import { useTheme } from '@mui/system'
 import { CopyButton, EmptyStatus } from '@masknet/shared'
 import { ConnectedAccounts } from './ConnectAccounts/index.js'
 import type { Profile } from '../common.js'
@@ -26,12 +25,12 @@ const useStyles = makeStyles()((theme) => ({
     },
     profileInfo: {
         width: '100%',
-        background: theme.palette.maskColor.modalTitleBg,
+        background: theme.vars.palette.maskColor.modalTitleBg,
     },
     back: {
         fontSize: 24,
         cursor: 'pointer',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         border: 'none',
         background: 'none',
         padding: 0,
@@ -49,7 +48,7 @@ const useStyles = makeStyles()((theme) => ({
         width: 12,
         height: 12,
         fontSize: 12,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     empty: {
         position: 'absolute',
@@ -60,7 +59,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         flexDirection: 'column',
         gap: 12,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         whiteSpace: 'nowrap',
     },
     emptyContainer: {
@@ -123,7 +122,7 @@ export const FriendsDetailUI = memo<FriendsDetailUIProps>(function FriendsDetail
                         {publicKey ? formatPersonaFingerprint(publicKey) : null}
                     </Typography>
                     <Typography
-                        color={theme.palette.maskColor.second}
+                        color={theme.vars.palette.maskColor.second}
                         sx={{
                             fontSize: 12,
                             lineHeight: '16px',
diff --git a/packages/mask/popups/pages/Friends/Home/UI.tsx b/packages/mask/popups/pages/Friends/Home/UI.tsx
index b26ef4a510e4..1d9f3c87a520 100644
--- a/packages/mask/popups/pages/Friends/Home/UI.tsx
+++ b/packages/mask/popups/pages/Friends/Home/UI.tsx
@@ -10,7 +10,10 @@ import { Trans } from '@lingui/react/macro'
 const useStyles = makeStyles()((theme) => ({
     container: {
         flex: 1,
-        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.maskColor.bottom : theme.palette.maskColor.white,
+        backgroundColor: theme.vars.palette.maskColor.white,
+        ...theme.applyStyles('dark', {
+            backgroundColor: theme.vars.palette.maskColor.bottom,
+        }),
         display: 'flex',
         flexDirection: 'column',
         maxHeight: '100vh',
@@ -25,11 +28,11 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         flexDirection: 'column',
         gap: 12,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         whiteSpace: 'nowrap',
     },
     mainText: {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
     },
 }))
 
diff --git a/packages/mask/popups/pages/Friends/Search/index.tsx b/packages/mask/popups/pages/Friends/Search/index.tsx
index 5c4a60841c8d..2fba87e71802 100644
--- a/packages/mask/popups/pages/Friends/Search/index.tsx
+++ b/packages/mask/popups/pages/Friends/Search/index.tsx
@@ -9,18 +9,18 @@ const useStyles = makeStyles()((theme) => ({
     inputRoot: {
         borderRadius: 8,
         width: '100%',
-        background: theme.palette.maskColor.input,
+        background: theme.vars.palette.maskColor.input,
         fontSize: 14,
     },
     input: {
         '&::placeholder': {
-            color: theme.palette.maskColor.third,
+            color: theme.vars.palette.maskColor.third,
         },
         padding: '11px 4px !important',
     },
     inputFocused: {
-        background: theme.palette.maskColor.bottom,
-        borderColor: theme.palette.text.third,
+        background: theme.vars.palette.maskColor.bottom,
+        borderColor: theme.vars.palette.text.third,
     },
     button: {
         background: 'transparent',
diff --git a/packages/mask/popups/pages/Friends/SearchList/index.tsx b/packages/mask/popups/pages/Friends/SearchList/index.tsx
index f0114a24bc5d..460097131713 100644
--- a/packages/mask/popups/pages/Friends/SearchList/index.tsx
+++ b/packages/mask/popups/pages/Friends/SearchList/index.tsx
@@ -16,7 +16,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         flexDirection: 'column',
         gap: 12,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         whiteSpace: 'nowrap',
     },
     cardContainer: {
diff --git a/packages/mask/popups/pages/Personas/ConnectWallet/index.tsx b/packages/mask/popups/pages/Personas/ConnectWallet/index.tsx
index 79714715a0d6..6852e4e7d2c2 100644
--- a/packages/mask/popups/pages/Personas/ConnectWallet/index.tsx
+++ b/packages/mask/popups/pages/Personas/ConnectWallet/index.tsx
@@ -20,7 +20,7 @@ import { WalletAvatar } from '../../../components/WalletAvatar/index.js'
 
 const useStyles = makeStyles()((theme) => ({
     provider: {
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         borderRadius: 8,
         padding: theme.spacing(1),
         display: 'flex',
@@ -33,21 +33,21 @@ const useStyles = makeStyles()((theme) => ({
         columnGap: 4,
     },
     address: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 10,
         lineHeight: '10px',
         display: 'flex',
         alignItems: 'center',
     },
     link: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         height: 10,
     },
     description: {
         marginTop: theme.spacing(1.5),
         fontSize: 12,
         lineHeight: '16px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
 }))
 
diff --git a/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx b/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx
index e625024ff872..428776152025 100644
--- a/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx
+++ b/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx
@@ -45,7 +45,11 @@ export const Component = memo(function ExportPrivateKey() {
                 {value ?
                     <Typography
                         sx={{ p: 1.5 }}
-                        style={{ background: theme.palette.maskColor.input, wordWrap: 'break-word', borderRadius: 8 }}>
+                        style={{
+                            background: theme.vars.palette.maskColor.input,
+                            wordWrap: 'break-word',
+                            borderRadius: 8,
+                        }}>
                         {value}
                     </Typography>
                 :   null}
diff --git a/packages/mask/popups/pages/Personas/Home/UI.tsx b/packages/mask/popups/pages/Personas/Home/UI.tsx
index 54ec4bacfda7..b1d895021f04 100644
--- a/packages/mask/popups/pages/Personas/Home/UI.tsx
+++ b/packages/mask/popups/pages/Personas/Home/UI.tsx
@@ -23,7 +23,7 @@ import { useModalNavigate } from '../../../components/index.js'
 const useStyles = makeStyles()((theme) => ({
     container: {
         flex: 1,
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         display: 'flex',
         flexDirection: 'column',
     },
@@ -61,17 +61,17 @@ const useStyles = makeStyles()((theme) => ({
         gap: 8,
         marginBottom: 12,
         boxShadow: '0px 0px 20px 0px rgba(0, 0, 0, 0.05)',
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         borderRadius: 8,
         cursor: 'pointer',
     },
     subTitle: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 12,
         fontWeight: 700,
     },
     description: {
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         fontSize: 12,
         fontWeight: 400,
     },
@@ -79,7 +79,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         lineHeight: '18px',
         fontWeight: 700,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         marginTop: theme.spacing(1.5),
         textAlign: 'center',
     },
@@ -87,7 +87,7 @@ const useStyles = makeStyles()((theme) => ({
         position: 'absolute',
         bottom: 0,
         right: 0,
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         borderRadius: 99,
         width: 18,
         height: 18,
@@ -98,10 +98,10 @@ const useStyles = makeStyles()((theme) => ({
     },
     publicKey: {
         fontSize: 12,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     icon: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     settings: {
         position: 'absolute',
@@ -114,14 +114,14 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        borderBottom: `1px solid ${theme.palette.maskColor.line}`,
+        borderBottom: `1px solid ${theme.vars.palette.maskColor.line}`,
     },
     logo: {
         width: 100,
         height: 28,
     },
     menu: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     tabs: {
         paddingLeft: 16,
@@ -130,21 +130,21 @@ const useStyles = makeStyles()((theme) => ({
     groupedButton: {
         // Increasing priority instead of using !important.
         '&&': {
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
         },
     },
     panel: {
         padding: theme.spacing(2),
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         flex: 1,
         maxHeight: 288,
         overflow: 'auto',
     },
     mnemonicIcon: {
-        background: theme.palette.maskColor.success,
+        background: theme.vars.palette.maskColor.success,
     },
     personaIcon: {
-        background: theme.palette.maskColor.primary,
+        background: theme.vars.palette.maskColor.primary,
     },
     iconWrapper: {
         display: 'flex',
@@ -160,7 +160,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        background: theme.palette.maskColor.whiteBlue,
+        background: theme.vars.palette.maskColor.whiteBlue,
     },
 }))
 
@@ -219,7 +219,7 @@ export const PersonaHomeUI = memo<PersonaHomeUIProps>(
                             </Box>
                             <Box className={classes.addPersonaWrapper} onClick={onCreatePersona}>
                                 <div className={cx(classes.iconWrapper, classes.personaIcon)}>
-                                    <Icons.AddUser size={20} color={theme.palette.maskColor.white} />
+                                    <Icons.AddUser size={20} color={theme.vars.palette.maskColor.white} />
                                 </div>
                                 <div>
                                     <Typography className={classes.subTitle}>
@@ -233,7 +233,7 @@ export const PersonaHomeUI = memo<PersonaHomeUIProps>(
 
                             <Box className={classes.addPersonaWrapper} onClick={onRestore}>
                                 <div className={cx(classes.iconWrapper, classes.mnemonicIcon)}>
-                                    <Icons.PopupRestore size={20} color={theme.palette.maskColor.white} />
+                                    <Icons.PopupRestore size={20} color={theme.vars.palette.maskColor.white} />
                                 </div>
                                 <div>
                                     <Typography className={classes.subTitle}>
@@ -250,7 +250,7 @@ export const PersonaHomeUI = memo<PersonaHomeUIProps>(
                         </Box>
                     </Box>
                 :   <TabContext value={currentTab}>
-                        <Box sx={{ background: theme.palette.maskColor.modalTitleBg }}>
+                        <Box sx={{ background: theme.vars.palette.maskColor.modalTitleBg }}>
                             <Box className={classes.header}>
                                 <Icons.MaskSquare className={classes.logo} />
                                 <Icons.HamburgerMenu
diff --git a/packages/mask/popups/pages/Personas/Logout/index.tsx b/packages/mask/popups/pages/Personas/Logout/index.tsx
index d062f68e0279..4b05bd03f6bf 100644
--- a/packages/mask/popups/pages/Personas/Logout/index.tsx
+++ b/packages/mask/popups/pages/Personas/Logout/index.tsx
@@ -19,7 +19,7 @@ import { useTitle } from '../../../hooks/index.js'
 
 const useStyles = makeStyles()((theme, _, refs) => ({
     infoBox: {
-        background: theme.palette.maskColor.modalTitleBg,
+        background: theme.vars.palette.maskColor.modalTitleBg,
         borderRadius: 8,
         padding: theme.spacing(1.5),
         display: 'flex',
@@ -29,7 +29,7 @@ const useStyles = makeStyles()((theme, _, refs) => ({
     tips: {
         fontSize: 14,
         lineHeight: '20px',
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
         margin: theme.spacing(0.5, 0),
         wordWrap: 'break-word',
     },
@@ -141,7 +141,9 @@ const LogoutUI = memo<LogoutUIProps>(function LogoutUI({
                     />
                     <Box>
                         <Typography sx={{ fontWeight: 700 }}>{currentPersona?.nickname}</Typography>
-                        <Typography color={theme.palette.maskColor.third} sx={{ fontSize: 10, lineHeight: '10px' }}>
+                        <Typography
+                            color={theme.vars.palette.maskColor.third}
+                            sx={{ fontSize: 10, lineHeight: '10px' }}>
                             {currentPersona?.identifier.rawPublicKey}
                         </Typography>
                     </Box>
diff --git a/packages/mask/popups/pages/Personas/PersonaAvatarSetting/index.tsx b/packages/mask/popups/pages/Personas/PersonaAvatarSetting/index.tsx
index 9649421ea31f..2795c352fa00 100644
--- a/packages/mask/popups/pages/Personas/PersonaAvatarSetting/index.tsx
+++ b/packages/mask/popups/pages/Personas/PersonaAvatarSetting/index.tsx
@@ -17,7 +17,7 @@ import { Trans, useLingui } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     uploadBox: {
-        background: theme.palette.maskColor.whiteBlue,
+        background: theme.vars.palette.maskColor.whiteBlue,
         padding: theme.spacing(3),
         borderRadius: 8,
         display: 'flex',
@@ -29,21 +29,22 @@ const useStyles = makeStyles()((theme) => ({
         width: 54,
         height: 54,
         borderRadius: '50%',
-        background: theme.palette.maskColor.secondaryBottom,
+        background: theme.vars.palette.maskColor.secondaryBottom,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        boxShadow: `0px 4px 6px 0px ${
-            theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.10)' : 'rgba(102, 108, 135, 0.10)'
-        }`,
+        boxShadow: '0px 4px 6px 0px rgba(102, 108, 135, 0.10)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 4px 6px 0px rgba(0, 0, 0, 0.10)',
+        }),
     },
     typo: {
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         textAlign: 'center',
         lineHeight: '18px',
     },
     strong: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         textAlign: 'center',
         lineHeight: '18px',
     },
diff --git a/packages/mask/popups/pages/Personas/WalletConnect/index.tsx b/packages/mask/popups/pages/Personas/WalletConnect/index.tsx
index 4a57d426deea..6e41a542f03b 100644
--- a/packages/mask/popups/pages/Personas/WalletConnect/index.tsx
+++ b/packages/mask/popups/pages/Personas/WalletConnect/index.tsx
@@ -8,10 +8,9 @@ import { CrossIsolationMessages, PopupRoutes } from '@masknet/shared-base'
 import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => {
-    const isDark = theme.palette.mode === 'dark'
     return {
         header: {
-            background: theme.palette.maskColor.modalTitleBg,
+            background: theme.vars.palette.maskColor.modalTitleBg,
             padding: theme.spacing(2),
         },
         icon: {
@@ -30,7 +29,7 @@ const useStyles = makeStyles()((theme) => {
         qrcode: {
             width: 250,
             height: 250,
-            boxShadow: theme.palette.maskColor.bottomBg,
+            boxShadow: theme.vars.palette.maskColor.bottomBg,
             borderRadius: theme.spacing(2),
             overflow: 'hidden',
         },
@@ -47,9 +46,11 @@ const useStyles = makeStyles()((theme) => {
                 height: 256,
                 width: 256,
                 backgroundImage:
-                    isDark ?
-                        'radial-gradient(50% 50.00% at 50% 50.00%, #443434 0%, rgba(68, 52, 52, 0.00) 100%)'
-                    :   'radial-gradient(50% 50.00% at 50% 50.00%, #FFE9E9 0%, rgba(255, 233, 233, 0.00) 100%)',
+                    'radial-gradient(50% 50.00% at 50% 50.00%, #FFE9E9 0%, rgba(255, 233, 233, 0.00) 100%)',
+                ...theme.applyStyles('dark', {
+                    backgroundImage:
+                        'radial-gradient(50% 50.00% at 50% 50.00%, #443434 0%, rgba(68, 52, 52, 0.00) 100%)',
+                }),
             },
             '&:after': {
                 position: 'absolute',
@@ -60,16 +61,18 @@ const useStyles = makeStyles()((theme) => {
                 height: 256,
                 width: 256,
                 backgroundImage:
-                    isDark ?
-                        'radial-gradient(50% 50.00% at 50% 50.00%, #605675 0%, rgba(56, 51, 67, 0.00) 100%)'
-                    :   'radial-gradient(50% 50.00% at 50% 50.00%, #F0E9FF 0%, rgba(240, 233, 255, 0.00) 100%)',
+                    'radial-gradient(50% 50.00% at 50% 50.00%, #F0E9FF 0%, rgba(240, 233, 255, 0.00) 100%)',
+                ...theme.applyStyles('dark', {
+                    backgroundImage:
+                        'radial-gradient(50% 50.00% at 50% 50.00%, #605675 0%, rgba(56, 51, 67, 0.00) 100%)',
+                }),
             },
         },
         qrcodeContainer: {
             width: 282,
             margin: theme.spacing(2, 'auto', 0),
             padding: theme.spacing(2),
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             position: 'relative',
             zIndex: 10,
         },
@@ -77,7 +80,7 @@ const useStyles = makeStyles()((theme) => {
             fontSize: 12,
             marginTop: 10,
             textAlign: 'center',
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
         },
     }
 })
diff --git a/packages/mask/popups/pages/Personas/components/AccountAvatar/index.tsx b/packages/mask/popups/pages/Personas/components/AccountAvatar/index.tsx
index 2f7c314496c7..5e77653f9b04 100644
--- a/packages/mask/popups/pages/Personas/components/AccountAvatar/index.tsx
+++ b/packages/mask/popups/pages/Personas/components/AccountAvatar/index.tsx
@@ -32,11 +32,11 @@ const useStyles = makeStyles()((theme) => ({
         width: 6,
         height: 6,
         borderRadius: 99,
-        border: `1px solid ${theme.palette.maskColor.bottom}`,
+        border: `1px solid ${theme.vars.palette.maskColor.bottom}`,
         position: 'absolute',
         top: 3,
         right: 2,
-        backgroundColor: theme.palette.maskColor.warn,
+        backgroundColor: theme.vars.palette.maskColor.warn,
     },
 }))
 
diff --git a/packages/mask/popups/pages/Personas/components/PersonaHeader/UI.tsx b/packages/mask/popups/pages/Personas/components/PersonaHeader/UI.tsx
index f7cb255489fc..e50751e3b93f 100644
--- a/packages/mask/popups/pages/Personas/components/PersonaHeader/UI.tsx
+++ b/packages/mask/popups/pages/Personas/components/PersonaHeader/UI.tsx
@@ -6,7 +6,7 @@ import { formatPersonaFingerprint, formatPersonaName } from '@masknet/shared-bas
 
 const useStyles = makeStyles()((theme) => ({
     container: {
-        background: theme.palette.maskColor.modalTitleBg,
+        background: theme.vars.palette.maskColor.modalTitleBg,
         padding: '11px 16px',
         lineHeight: 0,
         display: 'flex',
@@ -18,11 +18,11 @@ const useStyles = makeStyles()((theme) => ({
         height: 30,
     },
     action: {
-        background: theme.palette.maskColor.bottom,
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 4px 6px 0px rgba(0, 0, 0, 0.10)'
-            :   '0px 4px 6px 0px rgba(102, 108, 135, 0.10)',
+        background: theme.vars.palette.maskColor.bottom,
+        boxShadow: '0px 4px 6px 0px rgba(102, 108, 135, 0.10)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 4px 6px 0px rgba(0, 0, 0, 0.10)',
+        }),
         borderRadius: 99,
         padding: '5px 8px 5px 4px',
         display: 'flex',
@@ -35,13 +35,13 @@ const useStyles = makeStyles()((theme) => ({
         height: 30,
     },
     nickname: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         lineHeight: '18px',
         fontWeight: 700,
     },
     identifier: {
         fontSize: 10,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         lineHeight: 1,
         display: 'flex',
         alignItems: 'center',
diff --git a/packages/mask/popups/pages/Settings/index.tsx b/packages/mask/popups/pages/Settings/index.tsx
index b5d6d27cb433..d463d535e396 100644
--- a/packages/mask/popups/pages/Settings/index.tsx
+++ b/packages/mask/popups/pages/Settings/index.tsx
@@ -37,10 +37,10 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         padding: theme.spacing(1.25),
         borderRadius: 10,
-        background: theme.palette.maskColor.primary,
+        background: theme.vars.palette.maskColor.primary,
     },
     title: {
         fontSize: 14,
@@ -50,19 +50,19 @@ const useStyles = makeStyles()((theme) => ({
     titleDescription: {
         fontSize: 14,
         lineHeight: '20px',
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
     },
     list: {
         borderRadius: 16,
-        background: theme.palette.maskColor.bottom,
-        boxShadow: theme.palette.maskColor.bottomBg,
+        background: theme.vars.palette.maskColor.bottom,
+        boxShadow: theme.vars.palette.maskColor.bottomBg,
         backdropFilter: 'blur(8px)',
         padding: theme.spacing(2),
     },
     listItem: {
         cursor: 'pointer',
         padding: theme.spacing(1.5, 0),
-        borderBottom: `1px solid ${theme.palette.maskColor.line}`,
+        borderBottom: `1px solid ${theme.vars.palette.maskColor.line}`,
         '&:first-of-type': {
             paddingTop: 0,
         },
@@ -71,26 +71,26 @@ const useStyles = makeStyles()((theme) => ({
             borderBottom: 'none',
         },
         '&:hover > span': {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
     },
     listItemText: {
         margin: 0,
     },
     listItemPrimaryText: {
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         fontSize: 12,
         lineHeight: '16px',
         fontWeight: 700,
     },
     listItemSecondaryText: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 12,
         lineHeight: '16px',
         fontWeight: 700,
     },
     arrow: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
 }))
 
@@ -167,7 +167,7 @@ export const Component = memo(function SettingsPage() {
     useTitle(t`Settings`)
 
     const websiteCountNum = data?.filter((x) => x.allowInject && x.hasPermission).length
-    const websiteCount = <span style={{ color: theme.palette.maskColor.main }}>{websiteCountNum}</span>
+    const websiteCount = <span style={{ color: theme.vars.palette.maskColor.main }}>{websiteCountNum}</span>
     return (
         <>
             <NormalHeader />
diff --git a/packages/mask/popups/pages/Trader/useImplementRuntime.tsx b/packages/mask/popups/pages/Trader/useImplementRuntime.tsx
index 2b580ce24e96..e327650042de 100644
--- a/packages/mask/popups/pages/Trader/useImplementRuntime.tsx
+++ b/packages/mask/popups/pages/Trader/useImplementRuntime.tsx
@@ -59,13 +59,13 @@ export function useImplementRuntime() {
                         fontSize: '15px',
                         lineHeight: '20px',
                         fontWeight: 400,
-                        color: theme.palette.maskColor.main,
+                        color: theme.vars.palette.maskColor.main,
                         marginTop: 16,
                     },
                 },
             })
         },
-        [theme.palette.maskColor.main],
+        [theme.vars.palette.maskColor.main],
     )
 
     const { showSnackbar } = usePopupCustomSnackbar()
diff --git a/packages/mask/popups/pages/Wallet/AddToken/index.tsx b/packages/mask/popups/pages/Wallet/AddToken/index.tsx
index 2b1fbbdfec14..06aa3c8699f5 100644
--- a/packages/mask/popups/pages/Wallet/AddToken/index.tsx
+++ b/packages/mask/popups/pages/Wallet/AddToken/index.tsx
@@ -44,7 +44,7 @@ const useStyles = makeStyles<{ searchError: boolean }>()((theme, { searchError }
     },
     panel: {
         padding: 0,
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         flex: 1,
         overflow: 'auto',
     },
diff --git a/packages/mask/popups/pages/Wallet/ConnectedSites/index.tsx b/packages/mask/popups/pages/Wallet/ConnectedSites/index.tsx
index bb900dd660ea..2ad3ca011a97 100644
--- a/packages/mask/popups/pages/Wallet/ConnectedSites/index.tsx
+++ b/packages/mask/popups/pages/Wallet/ConnectedSites/index.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({
         padding: '16px',
     },
     desc: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 14,
         fontWeight: 400,
         lineHeight: '18px',
diff --git a/packages/mask/popups/pages/Wallet/ContactList/index.tsx b/packages/mask/popups/pages/Wallet/ContactList/index.tsx
index 410f54e93407..d3d4a12b6df6 100644
--- a/packages/mask/popups/pages/Wallet/ContactList/index.tsx
+++ b/packages/mask/popups/pages/Wallet/ContactList/index.tsx
@@ -42,7 +42,7 @@ const useStyles = makeStyles<{ showDivideLine?: boolean; isManage?: boolean; has
             padding: 0,
         },
         nickname: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             lineHeight: '18px',
             fontWeight: 700,
             maxWidth: 290,
@@ -52,7 +52,7 @@ const useStyles = makeStyles<{ showDivideLine?: boolean; isManage?: boolean; has
         },
         identifier: {
             fontSize: 14,
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             lineHeight: 1,
             display: 'flex',
             alignItems: 'center',
@@ -64,7 +64,7 @@ const useStyles = makeStyles<{ showDivideLine?: boolean; isManage?: boolean; has
             paddingRight: '16px !important',
             cursor: 'pointer',
             '&:hover': {
-                backgroundColor: theme.palette.background.default,
+                backgroundColor: theme.vars.palette.background.default,
             },
         },
         contactsListItemInfo: {
@@ -72,7 +72,7 @@ const useStyles = makeStyles<{ showDivideLine?: boolean; isManage?: boolean; has
             alignItems: 'center',
         },
         contactTitle: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             fontSize: 14,
             fontWeight: 700,
             paddingLeft: 16,
@@ -97,7 +97,7 @@ const useStyles = makeStyles<{ showDivideLine?: boolean; isManage?: boolean; has
                     {
                         '&:after': {
                             content: '""',
-                            background: theme.palette.divider,
+                            background: theme.vars.palette.divider,
                             bottom: 0,
                             position: 'absolute',
                             width: 120,
@@ -122,7 +122,7 @@ const useStyles = makeStyles<{ showDivideLine?: boolean; isManage?: boolean; has
             position: 'absolute',
             display: 'flex',
             justifyContent: 'center',
-            background: theme.palette.maskColor.secondaryBottom,
+            background: theme.vars.palette.maskColor.secondaryBottom,
             boxShadow: '0px 0px 20px 0px rgba(0, 0, 0, 0.05)',
             backdropFilter: 'blur(8px)',
             width: '100%',
@@ -161,7 +161,9 @@ const ContactListUI = memo(function ContactListUI() {
 
     useEffect(() => {
         if (!isManage) return
-        setExtension(<Icons.Add color={theme.palette.maskColor.main} sx={{ cursor: 'pointer' }} onClick={addContact} />)
+        setExtension(
+            <Icons.Add color={theme.vars.palette.maskColor.main} sx={{ cursor: 'pointer' }} onClick={addContact} />,
+        )
         return () => setExtension(undefined)
     }, [isManage])
 
@@ -282,12 +284,12 @@ function ContactListItem({ address, name, contactType, onSelectContact, ...rest
     const menuOptions = [
         {
             name: <Trans>Edit</Trans>,
-            icon: <Icons.Edit2 size={20} color={theme.palette.maskColor.second} />,
+            icon: <Icons.Edit2 size={20} color={theme.vars.palette.maskColor.second} />,
             handler: editContact,
         },
         {
             name: <Trans>Delete</Trans>,
-            icon: <Icons.Decrease size={20} color={theme.palette.maskColor.second} />,
+            icon: <Icons.Decrease size={20} color={theme.vars.palette.maskColor.second} />,
             handler: deleteContact,
         },
     ]
@@ -329,7 +331,7 @@ function ContactListItem({ address, name, contactType, onSelectContact, ...rest
                             href={EVMExplorerResolver.addressLink(chainId, address ?? '')}
                             target="_blank"
                             rel="noopener noreferrer">
-                            <Icons.PopupLink className={classes.icon} color={theme.palette.maskColor.second} />
+                            <Icons.PopupLink className={classes.icon} color={theme.vars.palette.maskColor.second} />
                         </Link>
                     </Typography>
                 </div>
diff --git a/packages/mask/popups/pages/Wallet/CreateWallet/Derive.tsx b/packages/mask/popups/pages/Wallet/CreateWallet/Derive.tsx
index 31a3e58d4e66..401e6ded8aea 100644
--- a/packages/mask/popups/pages/Wallet/CreateWallet/Derive.tsx
+++ b/packages/mask/popups/pages/Wallet/CreateWallet/Derive.tsx
@@ -35,7 +35,7 @@ const useStyles = makeStyles()((theme) => ({
         padding: theme.spacing(1),
         borderRadius: 8,
         '&:hover': {
-            backgroundColor: theme.palette.maskColor.bg,
+            backgroundColor: theme.vars.palette.maskColor.bg,
         },
         position: 'relative',
         paddingLeft: 44,
@@ -60,7 +60,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 12,
         fontWeight: 400,
         lineHeight: '16px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     editButton: {
         cursor: 'pointer',
diff --git a/packages/mask/popups/pages/Wallet/CreateWallet/index.tsx b/packages/mask/popups/pages/Wallet/CreateWallet/index.tsx
index a5b4a3b8105a..48f47f65941a 100644
--- a/packages/mask/popups/pages/Wallet/CreateWallet/index.tsx
+++ b/packages/mask/popups/pages/Wallet/CreateWallet/index.tsx
@@ -24,14 +24,14 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
         lineHeight: '18px',
         marginBottom: theme.spacing(2),
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     groups: {
         padding: 0,
         marginBottom: theme.spacing(2),
     },
     group: {
-        boxShadow: theme.palette.maskColor.bottomBg,
+        boxShadow: theme.vars.palette.maskColor.bottomBg,
         padding: theme.spacing(1.5),
         backdropFilter: 'blur(8px)',
         borderRadius: 8,
@@ -56,12 +56,12 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 12,
         fontWeight: 700,
         lineHeight: '16px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     walletCount: {
         marginRight: theme.spacing(1),
         fontSize: 12,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         lineHeight: '16px',
     },
@@ -100,7 +100,7 @@ export const Component = memo(function CreateWallet() {
                                         })
                                     }}>
                                     <ListItemIcon className={classes.groupIcon}>
-                                        <Icons.MaskBlue size={24} color={theme.palette.maskColor.white} />
+                                        <Icons.MaskBlue size={24} color={theme.vars.palette.maskColor.white} />
                                     </ListItemIcon>
                                     <ListItemText
                                         className={classes.groupText}
diff --git a/packages/mask/popups/pages/Wallet/EditNetwork/index.tsx b/packages/mask/popups/pages/Wallet/EditNetwork/index.tsx
index f2dee3ca8060..b514f59c677e 100644
--- a/packages/mask/popups/pages/Wallet/EditNetwork/index.tsx
+++ b/packages/mask/popups/pages/Wallet/EditNetwork/index.tsx
@@ -1,13 +1,13 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Icons } from '@masknet/icons'
 import { NetworkPluginID } from '@masknet/shared-base'
-import { ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { alpha, ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
 import { useChainContext, useNetworks, useWeb3State } from '@masknet/web3-hooks-base'
 import { EVMWeb3 } from '@masknet/web3-providers'
 import { fetchChains } from '@masknet/web3-providers/helpers'
 import { TokenType, type TransferableNetwork } from '@masknet/web3-shared-base'
 import { ChainId, NetworkType, ProviderType, SchemaType, ZERO_ADDRESS, getRPCConstant } from '@masknet/web3-shared-evm'
-import { Button, Input, Typography, alpha } from '@mui/material'
+import { Button, Input, Typography } from '@mui/material'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -40,24 +40,24 @@ const useStyles = makeStyles()((theme) => ({
     footer: {
         padding: theme.spacing(2),
         borderRadius: 12,
-        background: alpha(theme.palette.maskColor.bottom, 0.8),
-        boxShadow: theme.palette.maskColor.bottomBg,
+        background: alpha(theme.vars.palette.maskColor.bottom, 0.8),
+        boxShadow: theme.vars.palette.maskColor.bottomBg,
         backdropFilter: 'blur(8px)',
         display: 'flex',
         alignItems: 'center',
         gap: theme.spacing(2),
     },
     label: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginBottom: theme.spacing(0.5),
         marginTop: theme.spacing(2),
     },
     error: {
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
         marginTop: theme.spacing(0.5),
     },
     warn: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         marginTop: theme.spacing(0.5),
     },
 }))
diff --git a/packages/mask/popups/pages/Wallet/ExportPrivateKey/index.tsx b/packages/mask/popups/pages/Wallet/ExportPrivateKey/index.tsx
index d0f7ea01ba45..8ab8a97df865 100644
--- a/packages/mask/popups/pages/Wallet/ExportPrivateKey/index.tsx
+++ b/packages/mask/popups/pages/Wallet/ExportPrivateKey/index.tsx
@@ -37,16 +37,17 @@ const useStyles = makeStyles()((theme) => ({
     },
     panel: {
         padding: theme.spacing(0),
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         flex: 1,
         overflow: 'auto',
     },
     iconWrapper: {
         height: 120,
         background:
-            theme.palette.mode === 'light' ?
-                'linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.20) 0%, rgba(59, 153, 252, 0.20) 100%)'
-            :   'linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%)',
+            'linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.20) 0%, rgba(59, 153, 252, 0.20) 100%)',
+        ...theme.applyStyles('dark', {
+            background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%)',
+        }),
         borderRadius: 8,
         display: 'flex',
         justifyContent: 'center',
@@ -129,7 +130,12 @@ export const Component = memo(function ExportPrivateKey() {
                             <Trans>Write down mnemonic words</Trans>
                         </Typography>
                         <Typography
-                            sx={{ py: 2, color: theme.palette.maskColor.second, fontSize: 14, lineHeight: '18px' }}>
+                            sx={{
+                                py: 2,
+                                color: theme.vars.palette.maskColor.second,
+                                fontSize: 14,
+                                lineHeight: '18px',
+                            }}>
                             <Trans>
                                 Please write down the following words in correct order. Keep it safe and do not share
                                 with anyone!
@@ -169,7 +175,7 @@ export const Component = memo(function ExportPrivateKey() {
                     <Box className={classes.iconWrapper}>
                         <Icons.EncryptedFiles size={36} />
                     </Box>
-                    <Typography color={theme.palette.maskColor.danger}>
+                    <Typography color={theme.vars.palette.maskColor.danger}>
                         <Trans>
                             This JSON file is encrypted with your current payment password. The same password is
                             required for decryption when importing this wallet.
diff --git a/packages/mask/popups/pages/Wallet/GasSetting/GasSetting1559.tsx b/packages/mask/popups/pages/Wallet/GasSetting/GasSetting1559.tsx
index f6fcca8b170b..21a7985d4c31 100644
--- a/packages/mask/popups/pages/Wallet/GasSetting/GasSetting1559.tsx
+++ b/packages/mask/popups/pages/Wallet/GasSetting/GasSetting1559.tsx
@@ -63,7 +63,7 @@ const useStyles = makeStyles()((theme) => ({
         wordBreak: 'break-all',
     },
     label: {
-        color: theme.palette.primary.main,
+        color: theme.vars.palette.primary.main,
         fontSize: 12,
         lineHeight: '16px',
         margin: '10px 0',
@@ -72,9 +72,9 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     selected: {
-        backgroundColor: theme.palette.primary.main,
+        backgroundColor: theme.vars.palette.primary.main,
         '& > *': {
-            color: `${theme.palette.primary.contrastText}!important`,
+            color: `${theme.vars.palette.primary.contrastText}!important`,
         },
     },
     button: {
diff --git a/packages/mask/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx b/packages/mask/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx
index a060a6892fe7..e0ffa7863ba5 100644
--- a/packages/mask/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx
+++ b/packages/mask/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx
@@ -57,15 +57,15 @@ const useStyles = makeStyles()((theme) => ({
         wordBreak: 'break-all',
     },
     label: {
-        color: theme.palette.primary.main,
+        color: theme.vars.palette.primary.main,
         fontSize: 12,
         lineHeight: '16px',
         margin: '10px 0',
     },
     selected: {
-        backgroundColor: theme.palette.primary.main,
+        backgroundColor: theme.vars.palette.primary.main,
         '& > *': {
-            color: theme.palette.primary.contrastText,
+            color: theme.vars.palette.primary.contrastText,
         },
     },
     button: {
diff --git a/packages/mask/popups/pages/Wallet/Interaction/TransactionRequest.tsx b/packages/mask/popups/pages/Wallet/Interaction/TransactionRequest.tsx
index 9b8cb3b408ef..116b49e50232 100644
--- a/packages/mask/popups/pages/Wallet/Interaction/TransactionRequest.tsx
+++ b/packages/mask/popups/pages/Wallet/Interaction/TransactionRequest.tsx
@@ -41,25 +41,25 @@ const useStyles = makeStyles()((theme) => ({
     transactionDetail: {
         padding: theme.spacing(1.5),
         margin: theme.spacing(2, 0),
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         borderRadius: 8,
         display: 'flex',
         flexDirection: 'column',
         rowGap: 10,
     },
     document: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     data: {
         fontSize: 12,
         fontWeight: 700,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         wordBreak: 'break-all',
     },
     itemTitle: {
         fontSize: 12,
         fontWeight: 700,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     itemValue: {
         fontSize: 12,
diff --git a/packages/mask/popups/pages/Wallet/Interaction/interaction.tsx b/packages/mask/popups/pages/Wallet/Interaction/interaction.tsx
index a98f6fc9c9c8..de8a2b8669f6 100644
--- a/packages/mask/popups/pages/Wallet/Interaction/interaction.tsx
+++ b/packages/mask/popups/pages/Wallet/Interaction/interaction.tsx
@@ -119,7 +119,7 @@ export const Interaction = memo(function Interaction(props: InteractionProps) {
         <ActionButton
             loading={confirmLoading}
             disabled={actionRunning || confirmDisabled}
-            sx={isDangerRequest ? { background: (theme) => theme.palette.maskColor.danger } : undefined}
+            sx={isDangerRequest ? { background: (theme) => theme.vars.palette.maskColor.danger } : undefined}
             onClick={() => {
                 if (isDangerRequest && !dangerDialogOpen) return setDangerDialogOpen(true)
                 else onConfirm()
@@ -240,7 +240,7 @@ function DangerDialog({ cancel, confirm }: Record<'cancel' | 'confirm', React.Re
                 <DialogContentText variant="overline">
                     <Trans>Are you sure?</Trans>
                 </DialogContentText>
-                <DialogContentText sx={{ color: (theme) => theme.palette.maskColor.danger }}>
+                <DialogContentText sx={{ color: (theme) => theme.vars.palette.maskColor.danger }}>
                     <Trans>This request may be a phishing attach. I understand this and want to continue.</Trans>
                 </DialogContentText>
             </DialogContent>
diff --git a/packages/mask/popups/pages/Wallet/NetworkManagement/index.tsx b/packages/mask/popups/pages/Wallet/NetworkManagement/index.tsx
index da48113557ae..621e60093114 100644
--- a/packages/mask/popups/pages/Wallet/NetworkManagement/index.tsx
+++ b/packages/mask/popups/pages/Wallet/NetworkManagement/index.tsx
@@ -1,8 +1,8 @@
 import { Icons } from '@masknet/icons'
 import { Icon, WalletIcon } from '@masknet/shared'
 import { NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
-import { ActionButton, TextOverflowTooltip, makeStyles } from '@masknet/theme'
-import { Box, List, ListItem, Typography, alpha } from '@mui/material'
+import { alpha, ActionButton, TextOverflowTooltip, makeStyles } from '@masknet/theme'
+import { Box, List, ListItem, Typography } from '@mui/material'
 import { memo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTitle } from '../../../hooks/index.js'
@@ -26,7 +26,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     network: {
         borderRadius: 8,
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         height: theme.spacing(6),
         padding: theme.spacing(1.5),
         boxSizing: 'border-box',
@@ -44,7 +44,7 @@ const useStyles = makeStyles()((theme) => ({
         marginRight: theme.spacing(0.5),
         fontSize: 12,
         maxWidth: '50%',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         lineHeight: '16px',
         textOverflow: 'ellipsis',
@@ -54,8 +54,8 @@ const useStyles = makeStyles()((theme) => ({
     footer: {
         padding: theme.spacing(2),
         borderRadius: 12,
-        background: alpha(theme.palette.maskColor.bottom, 0.8),
-        boxShadow: theme.palette.maskColor.bottomBg,
+        background: alpha(theme.vars.palette.maskColor.bottom, 0.8),
+        boxShadow: theme.vars.palette.maskColor.bottomBg,
         backdropFilter: 'blur(8px)',
     },
 }))
@@ -89,7 +89,7 @@ export const Component = memo(function NetworkManagement() {
                                 </TextOverflowTooltip>
                                 {network.isCustomized ? null : <Icons.Lock size={16} />}
                             </Box>
-                            <Icons.RightArrow color={theme.palette.maskColor.second} size={20} />
+                            <Icons.RightArrow color={theme.vars.palette.maskColor.second} size={20} />
                         </ListItem>
                     )
                 })}
diff --git a/packages/mask/popups/pages/Wallet/Receive/index.tsx b/packages/mask/popups/pages/Wallet/Receive/index.tsx
index db7bc8b02adb..5787757b164f 100644
--- a/packages/mask/popups/pages/Wallet/Receive/index.tsx
+++ b/packages/mask/popups/pages/Wallet/Receive/index.tsx
@@ -11,7 +11,6 @@ import { useTitle, useTokenParams } from '../../../hooks/index.js'
 import { useAsset } from '../hooks/useAsset.js'
 
 const useStyles = makeStyles()((theme) => {
-    const isDark = theme.palette.mode === 'dark'
     return {
         header: {
             display: 'flex',
@@ -26,7 +25,7 @@ const useStyles = makeStyles()((theme) => {
         },
         badge: {
             position: 'absolute',
-            border: `1px solid ${theme.palette.maskColor.white}`,
+            border: `1px solid ${theme.vars.palette.maskColor.white}`,
             width: 17,
             height: 17,
             borderRadius: '50%',
@@ -37,13 +36,13 @@ const useStyles = makeStyles()((theme) => {
             justifyContent: 'center',
         },
         name: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             marginTop: theme.spacing(1),
             fontSize: 24,
             fontWeight: 700,
         },
         address: {
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             marginTop: theme.spacing(1),
             fontSize: 16,
             height: 30,
@@ -53,7 +52,7 @@ const useStyles = makeStyles()((theme) => {
         qrcode: {
             width: 250,
             height: 250,
-            boxShadow: theme.palette.maskColor.bottomBg,
+            boxShadow: theme.vars.palette.maskColor.bottomBg,
             borderRadius: theme.spacing(2),
             overflow: 'hidden',
         },
@@ -70,9 +69,11 @@ const useStyles = makeStyles()((theme) => {
                 height: 256,
                 width: 256,
                 backgroundImage:
-                    isDark ?
-                        'radial-gradient(50% 50.00% at 50% 50.00%, #443434 0%, rgba(68, 52, 52, 0.00) 100%)'
-                    :   'radial-gradient(50% 50.00% at 50% 50.00%, #FFE9E9 0%, rgba(255, 233, 233, 0.00) 100%)',
+                    'radial-gradient(50% 50.00% at 50% 50.00%, #FFE9E9 0%, rgba(255, 233, 233, 0.00) 100%)',
+                ...theme.applyStyles('dark', {
+                    backgroundImage:
+                        'radial-gradient(50% 50.00% at 50% 50.00%, #443434 0%, rgba(68, 52, 52, 0.00) 100%)',
+                }),
             },
             '&:after': {
                 position: 'absolute',
@@ -83,16 +84,18 @@ const useStyles = makeStyles()((theme) => {
                 height: 256,
                 width: 256,
                 backgroundImage:
-                    isDark ?
-                        'radial-gradient(50% 50.00% at 50% 50.00%, #605675 0%, rgba(56, 51, 67, 0.00) 100%)'
-                    :   'radial-gradient(50% 50.00% at 50% 50.00%, #F0E9FF 0%, rgba(240, 233, 255, 0.00) 100%)',
+                    'radial-gradient(50% 50.00% at 50% 50.00%, #F0E9FF 0%, rgba(240, 233, 255, 0.00) 100%)',
+                ...theme.applyStyles('dark', {
+                    backgroundImage:
+                        'radial-gradient(50% 50.00% at 50% 50.00%, #605675 0%, rgba(56, 51, 67, 0.00) 100%)',
+                }),
             },
         },
         qrcodeContainer: {
             width: 282,
             margin: theme.spacing(2, 'auto', 0),
             padding: theme.spacing(2),
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             position: 'relative',
             zIndex: 10,
         },
@@ -100,11 +103,11 @@ const useStyles = makeStyles()((theme) => {
             fontSize: 16,
             marginTop: 10,
             textAlign: 'center',
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
         },
         copyButton: {
             marginLeft: 8,
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
     }
 })
diff --git a/packages/mask/popups/pages/Wallet/ResetWallet/index.tsx b/packages/mask/popups/pages/Wallet/ResetWallet/index.tsx
index 36b0e6c06e14..12c90d95931f 100644
--- a/packages/mask/popups/pages/Wallet/ResetWallet/index.tsx
+++ b/packages/mask/popups/pages/Wallet/ResetWallet/index.tsx
@@ -11,7 +11,7 @@ const useStyles = makeStyles()((theme) => ({
     container: {
         display: 'flex',
         flexDirection: 'column',
-        background: theme.palette.maskColor.secondaryBottom,
+        background: theme.vars.palette.maskColor.secondaryBottom,
     },
     content: {
         flexGrow: 1,
@@ -41,16 +41,16 @@ const useStyles = makeStyles()((theme) => ({
         marginBottom: 16,
         textAlign: 'center',
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     strong: {
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
         fontWeight: 700,
     },
     bottomAction: {
         display: 'flex',
         justifyContent: 'center',
-        background: theme.palette.maskColor.secondaryBottom,
+        background: theme.vars.palette.maskColor.secondaryBottom,
         boxShadow: '0px 0px 20px 0px rgba(0, 0, 0, 0.05)',
         position: 'absolute',
         backdropFilter: 'blur(8px)',
@@ -66,7 +66,7 @@ const useStyles = makeStyles()((theme) => ({
     button: {
         flex: '1 0 0',
         '&:disabled': {
-            color: theme.palette.maskColor.white,
+            color: theme.vars.palette.maskColor.white,
         },
     },
 }))
diff --git a/packages/mask/popups/pages/Wallet/SelectWallet/index.tsx b/packages/mask/popups/pages/Wallet/SelectWallet/index.tsx
index d5c055250fe6..c609f26a35fa 100644
--- a/packages/mask/popups/pages/Wallet/SelectWallet/index.tsx
+++ b/packages/mask/popups/pages/Wallet/SelectWallet/index.tsx
@@ -17,7 +17,7 @@ import { useTitle } from '../../../hooks/index.js'
 
 const useStyles = makeStyles()((theme) => ({
     item: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     placeholder: {
         flex: 1,
@@ -26,9 +26,9 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     actions: {
-        background: theme.palette.maskColor.secondaryBottom,
+        background: theme.vars.palette.maskColor.secondaryBottom,
         padding: theme.spacing(2),
-        boxShadow: theme.palette.maskColor.bottomBg,
+        boxShadow: theme.vars.palette.maskColor.bottomBg,
         backdropFilter: 'blur(8px)',
         display: 'flex',
         columnGap: theme.spacing(2),
diff --git a/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx b/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx
index f7321bf00031..d0735c29ac50 100644
--- a/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx
+++ b/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx
@@ -30,7 +30,7 @@ const useStyles = makeStyles<{ hasNav?: boolean }>()((theme, { hasNav }) => ({
         display: 'flex',
         flexGrow: 1,
         flexDirection: 'column',
-        background: theme.palette.maskColor.secondaryBottom,
+        background: theme.vars.palette.maskColor.secondaryBottom,
         paddingBottom: hasNav ? 72 : undefined,
     },
     content: {
@@ -58,7 +58,7 @@ const useStyles = makeStyles<{ hasNav?: boolean }>()((theme, { hasNav }) => ({
         gap: 8,
         marginBottom: 12,
         boxShadow: '0px 0px 20px 0px rgba(0, 0, 0, 0.05)',
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         borderRadius: 8,
         '&:last-child': {
             marginBottom: '0 !important',
@@ -74,13 +74,13 @@ const useStyles = makeStyles<{ hasNav?: boolean }>()((theme, { hasNav }) => ({
     subTitle: {
         display: 'flex',
         alignItems: 'center',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 12,
         lineHeight: '16px',
         fontWeight: 700,
     },
     description: {
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         fontWeight: 400,
     },
     setPasswordButtonWrapper: {
@@ -92,7 +92,7 @@ const useStyles = makeStyles<{ hasNav?: boolean }>()((theme, { hasNav }) => ({
     bottomAction: {
         display: 'flex',
         justifyContent: 'center',
-        background: theme.palette.maskColor.secondaryBottom,
+        background: theme.vars.palette.maskColor.secondaryBottom,
         boxShadow: '0px 0px 20px 0px rgba(0, 0, 0, 0.05)',
         marginTop: 'auto',
         backdropFilter: 'blur(8px)',
@@ -113,7 +113,7 @@ const useStyles = makeStyles<{ hasNav?: boolean }>()((theme, { hasNav }) => ({
         width: '100%',
     },
     strong: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     walletItemList: {
         height: 240,
@@ -156,7 +156,7 @@ const WalletItem = memo(function WalletItem({ wallet }: WalletItemProps) {
                             width: 16,
                             height: 16,
                         }}>
-                        <Icons.LinkOut size={16} color={theme.palette.maskColor.main} />
+                        <Icons.LinkOut size={16} color={theme.vars.palette.maskColor.main} />
                     </Link>
                 </Typography>
                 <ProgressiveText
@@ -279,7 +279,7 @@ export const Component = memo(function SetPaymentPassword() {
                             </div>
                             {errorMsg && !isValid ?
                                 <Typography
-                                    color={theme.palette.maskColor.danger}
+                                    color={theme.vars.palette.maskColor.danger}
                                     sx={{ fontSize: 14, marginTop: '12px' }}>
                                     {errorMsg}
                                 </Typography>
@@ -288,7 +288,7 @@ export const Component = memo(function SetPaymentPassword() {
                             <button type="submit" hidden />
                         </form>
                         <Typography
-                            color={theme.palette.maskColor.third}
+                            color={theme.vars.palette.maskColor.third}
                             sx={{
                                 fontSize: 14,
                                 textAlign: 'center',
@@ -298,7 +298,7 @@ export const Component = memo(function SetPaymentPassword() {
                         </Typography>
 
                         <Typography
-                            color={theme.palette.maskColor.third}
+                            color={theme.vars.palette.maskColor.third}
                             sx={{
                                 fontSize: 14,
                                 textAlign: 'center',
diff --git a/packages/mask/popups/pages/Wallet/SwitchWallet/index.tsx b/packages/mask/popups/pages/Wallet/SwitchWallet/index.tsx
index a9a0b7f3db73..3db9b6d17d8e 100644
--- a/packages/mask/popups/pages/Wallet/SwitchWallet/index.tsx
+++ b/packages/mask/popups/pages/Wallet/SwitchWallet/index.tsx
@@ -22,7 +22,7 @@ import { WalletItem } from '../../../components/WalletItem/index.js'
 const useStyles = makeStyles()((theme) => ({
     content: {
         overflow: 'auto',
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
         display: 'flex',
         flexDirection: 'column',
     },
@@ -100,7 +100,7 @@ const SwitchWallet = memo(function SwitchWallet() {
                 onClick={() => {
                     navigate(PopupRoutes.CreateWallet)
                 }}>
-                <Icons.Wallet size={20} color={theme.palette.maskColor.second} />
+                <Icons.Wallet size={20} color={theme.vars.palette.maskColor.second} />
                 <Typography className={classes.actionLabel} component="span">
                     <Trans>Add Wallet</Trans>
                 </Typography>
@@ -111,7 +111,7 @@ const SwitchWallet = memo(function SwitchWallet() {
                 size="small"
                 variant="outlined"
                 onClick={handleImport}>
-                <Icons.Download2 size={20} color={theme.palette.maskColor.second} />
+                <Icons.Download2 size={20} color={theme.vars.palette.maskColor.second} />
                 <Typography className={classes.actionLabel} component="span">
                     <Trans>Import Wallet</Trans>
                 </Typography>
@@ -122,7 +122,7 @@ const SwitchWallet = memo(function SwitchWallet() {
                 size="small"
                 variant="outlined"
                 onClick={handleLock}>
-                <Icons.Lock size={20} color={theme.palette.maskColor.second} />
+                <Icons.Lock size={20} color={theme.vars.palette.maskColor.second} />
                 <Typography className={classes.actionLabel} component="span">
                     <Trans>Lock Wallet</Trans>
                 </Typography>
@@ -133,7 +133,7 @@ const SwitchWallet = memo(function SwitchWallet() {
                 size="small"
                 variant="outlined"
                 onClick={handleClickSettings}>
-                <Icons.WalletSetting size={20} color={theme.palette.maskColor.second} />
+                <Icons.WalletSetting size={20} color={theme.vars.palette.maskColor.second} />
                 <Typography className={classes.actionLabel} component="span">
                     <Trans>Wallet Settings</Trans>
                 </Typography>
diff --git a/packages/mask/popups/pages/Wallet/SyncTwitterCookies/index.tsx b/packages/mask/popups/pages/Wallet/SyncTwitterCookies/index.tsx
index d5a8c7c783ec..8c9914b7d298 100644
--- a/packages/mask/popups/pages/Wallet/SyncTwitterCookies/index.tsx
+++ b/packages/mask/popups/pages/Wallet/SyncTwitterCookies/index.tsx
@@ -70,7 +70,6 @@ enum DesktopSyncChannelStatus {
 const POLLING_INTERVAL = 2000 // 2 seconds
 
 const useStyles = makeStyles()((theme) => {
-    const isDark = theme.palette.mode === 'dark'
     return {
         header: {
             display: 'flex',
@@ -85,13 +84,13 @@ const useStyles = makeStyles()((theme) => {
             marginTop: '14px',
         },
         name: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             fontSize: 18,
             fontWeight: 700,
             lineHeight: '22px',
         },
         address: {
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             marginTop: theme.spacing(1),
             fontSize: 16,
             height: 30,
@@ -101,7 +100,7 @@ const useStyles = makeStyles()((theme) => {
         qrcode: {
             width: 220,
             height: 220,
-            boxShadow: theme.palette.maskColor.bottomBg,
+            boxShadow: theme.vars.palette.maskColor.bottomBg,
             borderRadius: theme.spacing(2),
             overflow: 'hidden',
         },
@@ -118,9 +117,11 @@ const useStyles = makeStyles()((theme) => {
                 height: 256,
                 width: 256,
                 backgroundImage:
-                    isDark ?
-                        'radial-gradient(50% 50.00% at 50% 50.00%, #443434 0%, rgba(68, 52, 52, 0.00) 100%)'
-                    :   'radial-gradient(50% 50.00% at 50% 50.00%, #FFE9E9 0%, rgba(255, 233, 233, 0.00) 100%)',
+                    'radial-gradient(50% 50.00% at 50% 50.00%, #FFE9E9 0%, rgba(255, 233, 233, 0.00) 100%)',
+                ...theme.applyStyles('dark', {
+                    backgroundImage:
+                        'radial-gradient(50% 50.00% at 50% 50.00%, #443434 0%, rgba(68, 52, 52, 0.00) 100%)',
+                }),
             },
             '&:after': {
                 position: 'absolute',
@@ -131,16 +132,18 @@ const useStyles = makeStyles()((theme) => {
                 height: 256,
                 width: 256,
                 backgroundImage:
-                    isDark ?
-                        'radial-gradient(50% 50.00% at 50% 50.00%, #605675 0%, rgba(56, 51, 67, 0.00) 100%)'
-                    :   'radial-gradient(50% 50.00% at 50% 50.00%, #F0E9FF 0%, rgba(240, 233, 255, 0.00) 100%)',
+                    'radial-gradient(50% 50.00% at 50% 50.00%, #F0E9FF 0%, rgba(240, 233, 255, 0.00) 100%)',
+                ...theme.applyStyles('dark', {
+                    backgroundImage:
+                        'radial-gradient(50% 50.00% at 50% 50.00%, #605675 0%, rgba(56, 51, 67, 0.00) 100%)',
+                }),
             },
         },
         qrcodeContainer: {
             width: 252,
             margin: theme.spacing(1, 'auto', 0),
             padding: theme.spacing(2),
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             position: 'relative',
             zIndex: 10,
             borderRadius: '32px',
@@ -149,20 +152,20 @@ const useStyles = makeStyles()((theme) => {
             fontSize: 16,
             marginTop: 8,
             textAlign: 'center',
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
         },
         copyButton: {
             marginLeft: 8,
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
         statusMessage: {
             fontSize: 13,
             marginTop: 8,
             fontWeight: 400,
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             padding: '6px',
-            border: `1px solid ${theme.palette.maskColor.line}`,
-            backgroundColor: theme.palette.maskColor.bottom,
+            border: `1px solid ${theme.vars.palette.maskColor.line}`,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             margin: '8px 10px 10px',
             '&:empty': {
                 display: 'none',
@@ -183,7 +186,7 @@ const useStyles = makeStyles()((theme) => {
             position: 'fixed',
             display: 'flex',
             justifyContent: 'center',
-            background: theme.palette.maskColor.secondaryBottom,
+            background: theme.vars.palette.maskColor.secondaryBottom,
             boxShadow: '0px 0px 20px 0px rgba(0, 0, 0, 0.05)',
             backdropFilter: 'blur(8px)',
             bottom: 0,
@@ -192,12 +195,12 @@ const useStyles = makeStyles()((theme) => {
             zIndex: 100,
         },
         button: {
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             flexGrow: 1,
             minWidth: 0,
             height: theme.spacing(5),
             boxSizing: 'border-box',
-            backgroundColor: theme.palette.maskColor.thirdMain,
+            backgroundColor: theme.vars.palette.maskColor.thirdMain,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -216,8 +219,8 @@ const useStyles = makeStyles()((theme) => {
             },
         },
         confirmButton: {
-            backgroundColor: theme.palette.maskColor.main,
-            color: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.bottom,
             '&:disabled': {
                 opacity: 0.5,
             },
diff --git a/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx b/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx
index 946780ce4e0d..1cde1b7a1db2 100644
--- a/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx
+++ b/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx
@@ -19,6 +19,7 @@ import { useAccount, useFungibleTokenBalance, useWeb3State } from '@masknet/web3
 import { TokenType, formatBalance, formatCurrency, leftShift } from '@masknet/web3-shared-base'
 import { type ChainId, SchemaType, isNativeTokenAddress } from '@masknet/web3-shared-evm'
 import { Box, Button, Skeleton, ThemeProvider, Typography } from '@mui/material'
+import { useColorScheme } from '@mui/material/styles'
 import React, { memo, useContext, useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { PageTitleContext, useTitle, useTokenParams } from '../../../hooks/index.js'
@@ -50,13 +51,13 @@ const useStyles = makeStyles<{ valueAlign: 'left' | 'center' }>()((theme, { valu
         label: {
             fontSize: 14,
             fontWeight: 700,
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             textTransform: 'capitalize',
         },
         value: {
             fontSize: 14,
             fontWeight: 700,
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             marginTop: 2,
             display: 'flex',
             alignItems: 'center',
@@ -67,16 +68,15 @@ const useStyles = makeStyles<{ valueAlign: 'left' | 'center' }>()((theme, { valu
             margin: theme.spacing(2, 'auto', 0),
         },
         info: {
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             borderRadius: '20px 20px 0 0',
             padding: theme.spacing(2),
-            boxShadow: theme.palette.maskColor.bottomBg,
+            boxShadow: theme.vars.palette.maskColor.bottomBg,
             backdropFilter: 'blur(8px)',
         },
     }
 })
 const usePageStyles = makeStyles()((theme) => {
-    const isDark = theme.palette.mode === 'dark'
     return {
         page: {
             position: 'relative',
@@ -114,9 +114,11 @@ const usePageStyles = makeStyles()((theme) => {
                 height: 256,
                 width: 256,
                 backgroundImage:
-                    isDark ?
-                        'radial-gradient(50% 50.00% at 50% 50.00%, #443434 0%, rgba(68, 52, 52, 0.00) 100%)'
-                    :   'radial-gradient(50% 50.00% at 50% 50.00%, #FFE9E9 0%, rgba(255, 233, 233, 0.00) 100%)',
+                    'radial-gradient(50% 50.00% at 50% 50.00%, #FFE9E9 0%, rgba(255, 233, 233, 0.00) 100%)',
+                ...theme.applyStyles('dark', {
+                    backgroundImage:
+                        'radial-gradient(50% 50.00% at 50% 50.00%, #443434 0%, rgba(68, 52, 52, 0.00) 100%)',
+                }),
             },
             '&:after': {
                 position: 'absolute',
@@ -127,9 +129,11 @@ const usePageStyles = makeStyles()((theme) => {
                 height: 256,
                 width: 256,
                 backgroundImage:
-                    isDark ?
-                        'radial-gradient(50% 50.00% at 50% 50.00%, #605675 0%, rgba(56, 51, 67, 0.00) 100%)'
-                    :   'radial-gradient(50% 50.00% at 50% 50.00%, #F0E9FF 0%, rgba(240, 233, 255, 0.00) 100%)',
+                    'radial-gradient(50% 50.00% at 50% 50.00%, #F0E9FF 0%, rgba(240, 233, 255, 0.00) 100%)',
+                ...theme.applyStyles('dark', {
+                    backgroundImage:
+                        'radial-gradient(50% 50.00% at 50% 50.00%, #605675 0%, rgba(56, 51, 67, 0.00) 100%)',
+                }),
             },
         },
     }
diff --git a/packages/mask/popups/pages/Wallet/TransactionDetail/index.tsx b/packages/mask/popups/pages/Wallet/TransactionDetail/index.tsx
index 924d8000709d..58957f39b097 100644
--- a/packages/mask/popups/pages/Wallet/TransactionDetail/index.tsx
+++ b/packages/mask/popups/pages/Wallet/TransactionDetail/index.tsx
@@ -1,7 +1,7 @@
 import { Icons } from '@masknet/icons'
 import { CopyButton, FormattedCurrency, ProgressiveText, ReversedAddress } from '@masknet/shared'
 import { NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
-import { ActionButton, MaskColors, makeStyles } from '@masknet/theme'
+import { alpha, ActionButton, MaskColors, makeStyles } from '@masknet/theme'
 import { useAccount, useNativeToken, useNativeTokenPrice } from '@masknet/web3-hooks-base'
 import { ChainbaseHistory, EVMExplorerResolver, EVMWeb3 } from '@masknet/web3-providers'
 import { chainbase } from '@masknet/web3-providers/helpers'
@@ -19,7 +19,7 @@ import {
     formatWeiToGwei,
     type Transaction as EvmTransaction,
 } from '@masknet/web3-shared-evm'
-import { Box, Link, Typography, alpha } from '@mui/material'
+import { Box, Link, Typography } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
 import { BigNumber } from 'bignumber.js'
 import { format } from 'date-fns'
@@ -51,29 +51,29 @@ const useStyles = makeStyles()((theme) => ({
         transition: 'all 0.3s ease-in-out',
     },
     statusFail: {
-        color: theme.palette.maskColor.danger,
-        backgroundColor: alpha(theme.palette.maskColor.danger, 0.1),
+        color: theme.vars.palette.maskColor.danger,
+        backgroundColor: alpha(theme.vars.palette.maskColor.danger, 0.1),
     },
     statusSuccess: {
-        color: theme.palette.maskColor.success,
-        backgroundColor: alpha(theme.palette.maskColor.success, 0.1),
+        color: theme.vars.palette.maskColor.success,
+        backgroundColor: alpha(theme.vars.palette.maskColor.success, 0.1),
     },
     statusPending: {
-        color: theme.palette.maskColor.warn,
-        backgroundColor: alpha(theme.palette.maskColor.warn, 0.1),
+        color: theme.vars.palette.maskColor.warn,
+        backgroundColor: alpha(theme.vars.palette.maskColor.warn, 0.1),
     },
     field: {
         display: 'flex',
         marginTop: theme.spacing(1.5),
     },
     fieldName: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 12,
         fontWeight: 700,
     },
     fieldValue: {
         minWidth: '5em',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         marginLeft: 'auto',
         display: 'flex',
         alignItems: 'center',
@@ -83,10 +83,10 @@ const useStyles = makeStyles()((theme) => ({
     },
     sectionName: {
         marginTop: theme.spacing(1.5),
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         padding: 10,
         fontSize: 14,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         borderRadius: 4,
     },
@@ -115,7 +115,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     logText: {
         lineHeight: '16px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         marginLeft: theme.spacing(1.5),
         fontWeight: 700,
         fontSize: 12,
@@ -123,7 +123,7 @@ const useStyles = makeStyles()((theme) => ({
     actionGroup: {
         display: 'flex',
         justifyContent: 'center',
-        background: theme.palette.maskColor.secondaryBottom,
+        background: theme.vars.palette.maskColor.secondaryBottom,
         boxShadow: '0px 0px 20px 0px rgba(0, 0, 0, 0.05)',
         backdropFilter: 'blur(8px)',
         gap: theme.spacing(2),
@@ -265,7 +265,7 @@ export const Component = memo(function TransactionDetail() {
                     <Typography className={classes.fieldValue}>
                         <Trans>View on Explorer</Trans>
                         <Link href={link} target="_blank" sx={{ ml: 0.5, fontSize: 0 }}>
-                            <Icons.LinkOut size={16} color={theme.palette.maskColor.second} />
+                            <Icons.LinkOut size={16} color={theme.vars.palette.maskColor.second} />
                         </Link>
                     </Typography>
                 </Box>
diff --git a/packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx b/packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx
index 41217054c021..c2d1cffc92d8 100644
--- a/packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx
+++ b/packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx
@@ -32,7 +32,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
         borderRadius: 8,
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         backgroundColor: MaskColors.light.maskColor.primary,
         cursor: 'pointer',
         margin: theme.spacing(0, 2),
@@ -45,17 +45,17 @@ const useStyles = makeStyles()((theme) => ({
     },
     label: {
         fontSize: 14,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontWeight: 700,
     },
     error: {
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
         margin: theme.spacing(2, 2, 0),
     },
     actionGroup: {
         display: 'flex',
         justifyContent: 'center',
-        background: theme.palette.maskColor.secondaryBottom,
+        background: theme.vars.palette.maskColor.secondaryBottom,
         boxShadow: '0px 0px 20px 0px rgba(0, 0, 0, 0.05)',
         backdropFilter: 'blur(8px)',
         gap: theme.spacing(2),
diff --git a/packages/mask/popups/pages/Wallet/Unlock/index.tsx b/packages/mask/popups/pages/Wallet/Unlock/index.tsx
index 3b055059dcdd..b7b307c6c800 100644
--- a/packages/mask/popups/pages/Wallet/Unlock/index.tsx
+++ b/packages/mask/popups/pages/Wallet/Unlock/index.tsx
@@ -14,7 +14,7 @@ const useStyles = makeStyles()((theme) => ({
     container: {
         display: 'flex',
         flexDirection: 'column',
-        background: theme.palette.maskColor.secondaryBottom,
+        background: theme.vars.palette.maskColor.secondaryBottom,
     },
     content: {
         padding: '0px 16px',
@@ -98,7 +98,9 @@ const Unlock = memo(function Unlock() {
                         onChange={(e) => setPassword(e.target.value)}
                     />
                     {verified === false ?
-                        <Typography color={theme.palette.maskColor.danger} sx={{ fontSize: 14, marginTop: '12px' }}>
+                        <Typography
+                            color={theme.vars.palette.maskColor.danger}
+                            sx={{ fontSize: 14, marginTop: '12px' }}>
                             <Trans>Incorrect password</Trans>
                         </Typography>
                     :   null}
@@ -114,7 +116,7 @@ const Unlock = memo(function Unlock() {
                 </Button>
 
                 <Typography
-                    color={theme.palette.maskColor.main}
+                    color={theme.vars.palette.maskColor.main}
                     onClick={navigateToResetWallet}
                     className={classes.pointer}
                     sx={{
diff --git a/packages/mask/popups/pages/Wallet/WalletSettings/AutoLock.tsx b/packages/mask/popups/pages/Wallet/WalletSettings/AutoLock.tsx
index 55e46285b4b6..1f8f857a6792 100644
--- a/packages/mask/popups/pages/Wallet/WalletSettings/AutoLock.tsx
+++ b/packages/mask/popups/pages/Wallet/WalletSettings/AutoLock.tsx
@@ -22,7 +22,7 @@ export function AutoLock() {
                 })
             }>
             <Box className={classes.itemBox}>
-                <Icons.Time size={20} color={theme.palette.maskColor.second} />
+                <Icons.Time size={20} color={theme.vars.palette.maskColor.second} />
                 <Typography className={classes.itemText}>
                     <Trans>Auto-lock Time</Trans>
                 </Typography>
@@ -35,7 +35,7 @@ export function AutoLock() {
                         :   <Trans>{millisecondsToMinutes(value)} Mins</Trans>}
                     </Typography>
                 :   null}
-                <Icons.ArrowRight color={theme.palette.maskColor.second} size={24} />
+                <Icons.ArrowRight color={theme.vars.palette.maskColor.second} size={24} />
             </Box>
         </ListItem>
     )
diff --git a/packages/mask/popups/pages/Wallet/WalletSettings/ChangeCurrency.tsx b/packages/mask/popups/pages/Wallet/WalletSettings/ChangeCurrency.tsx
index 692eaeb53da0..7566e4bd0c95 100644
--- a/packages/mask/popups/pages/Wallet/WalletSettings/ChangeCurrency.tsx
+++ b/packages/mask/popups/pages/Wallet/WalletSettings/ChangeCurrency.tsx
@@ -22,7 +22,7 @@ export function ChangeCurrency() {
     return (
         <ListItem className={classes.item} onClick={chooseCurrency}>
             <Box className={classes.itemBox}>
-                <Icons.Currency size={20} color={theme.palette.maskColor.second} />
+                <Icons.Currency size={20} color={theme.vars.palette.maskColor.second} />
                 <Typography className={classes.itemText}>
                     <Trans>Currency</Trans>
                 </Typography>
@@ -31,7 +31,7 @@ export function ChangeCurrency() {
                 {currencyType ?
                     <Typography className={classes.itemText}>{resolveCurrencyName(currencyType)}</Typography>
                 :   null}
-                <Icons.ArrowRight color={theme.palette.maskColor.second} size={24} />
+                <Icons.ArrowRight color={theme.vars.palette.maskColor.second} size={24} />
             </Box>
         </ListItem>
     )
diff --git a/packages/mask/popups/pages/Wallet/WalletSettings/ChangeNetwork.tsx b/packages/mask/popups/pages/Wallet/WalletSettings/ChangeNetwork.tsx
index d9a9848d6069..f70a4dbf44e6 100644
--- a/packages/mask/popups/pages/Wallet/WalletSettings/ChangeNetwork.tsx
+++ b/packages/mask/popups/pages/Wallet/WalletSettings/ChangeNetwork.tsx
@@ -17,13 +17,13 @@ export function ChangeNetwork() {
     return (
         <ListItem className={classes.item} onClick={chooseNetwork}>
             <Box className={classes.itemBox}>
-                <Icons.Globe size={20} color={theme.palette.maskColor.second} />
+                <Icons.Globe size={20} color={theme.vars.palette.maskColor.second} />
                 <Typography className={classes.itemText}>
                     <Trans>Change Network</Trans>
                 </Typography>
             </Box>
             <Box className={classes.itemBox}>
-                <Icons.ArrowRight color={theme.palette.maskColor.second} size={24} />
+                <Icons.ArrowRight color={theme.vars.palette.maskColor.second} size={24} />
             </Box>
         </ListItem>
     )
diff --git a/packages/mask/popups/pages/Wallet/WalletSettings/ChangePaymentPassword.tsx b/packages/mask/popups/pages/Wallet/WalletSettings/ChangePaymentPassword.tsx
index 43b6b30a360a..54075b4d7811 100644
--- a/packages/mask/popups/pages/Wallet/WalletSettings/ChangePaymentPassword.tsx
+++ b/packages/mask/popups/pages/Wallet/WalletSettings/ChangePaymentPassword.tsx
@@ -16,12 +16,12 @@ export function ChangePaymentPassword() {
                 })
             }>
             <Box className={classes.itemBox}>
-                <Icons.Lock size={20} color={theme.palette.maskColor.second} />
+                <Icons.Lock size={20} color={theme.vars.palette.maskColor.second} />
                 <Typography className={classes.itemText}>
                     <Trans>Change Payment Password</Trans>
                 </Typography>
             </Box>
-            <Icons.ArrowRight color={theme.palette.maskColor.second} size={24} />
+            <Icons.ArrowRight color={theme.vars.palette.maskColor.second} size={24} />
         </ListItem>
     )
 }
diff --git a/packages/mask/popups/pages/Wallet/WalletSettings/ConnectedOrigins.tsx b/packages/mask/popups/pages/Wallet/WalletSettings/ConnectedOrigins.tsx
index b6b443c2ee79..f0e2791ad1a3 100644
--- a/packages/mask/popups/pages/Wallet/WalletSettings/ConnectedOrigins.tsx
+++ b/packages/mask/popups/pages/Wallet/WalletSettings/ConnectedOrigins.tsx
@@ -15,14 +15,14 @@ export function ConnectedOrigins() {
     return (
         <ListItem className={classes.item} onClick={() => navigate(PopupRoutes.ConnectedSites)}>
             <Box className={classes.itemBox}>
-                <Icons.Appendices size={20} color={theme.palette.maskColor.second} />
+                <Icons.Appendices size={20} color={theme.vars.palette.maskColor.second} />
                 <Typography className={classes.itemText}>
                     <Trans>Connected sites</Trans>
                 </Typography>
             </Box>
             <Box className={classes.itemBox}>
                 <Typography className={classes.itemText}>{origins ? origins.length : 0}</Typography>
-                <Icons.ArrowRight color={theme.palette.maskColor.second} size={24} />
+                <Icons.ArrowRight color={theme.vars.palette.maskColor.second} size={24} />
             </Box>
         </ListItem>
     )
diff --git a/packages/mask/popups/pages/Wallet/WalletSettings/Contacts.tsx b/packages/mask/popups/pages/Wallet/WalletSettings/Contacts.tsx
index bd0804189ef3..d90063925d2a 100644
--- a/packages/mask/popups/pages/Wallet/WalletSettings/Contacts.tsx
+++ b/packages/mask/popups/pages/Wallet/WalletSettings/Contacts.tsx
@@ -19,14 +19,14 @@ export function Contacts() {
             className={classes.item}
             onClick={() => navigate(`${PopupRoutes.Contacts}/${wallet?.address}`, { state: { type: 'manage' } })}>
             <Box className={classes.itemBox}>
-                <Icons.BaseUser size={20} color={theme.palette.maskColor.second} />
+                <Icons.BaseUser size={20} color={theme.vars.palette.maskColor.second} />
                 <Typography className={classes.itemText}>
                     <Trans>Contacts</Trans>
                 </Typography>
             </Box>
             <Box className={classes.itemBox}>
                 <Typography className={classes.itemText}>{totalContacts}</Typography>
-                <Icons.ArrowRight color={theme.palette.maskColor.second} size={24} />
+                <Icons.ArrowRight color={theme.vars.palette.maskColor.second} size={24} />
             </Box>
         </ListItem>
     )
diff --git a/packages/mask/popups/pages/Wallet/WalletSettings/DisablePermit.tsx b/packages/mask/popups/pages/Wallet/WalletSettings/DisablePermit.tsx
index 2b0c51340ab1..49ccdd9f58bc 100644
--- a/packages/mask/popups/pages/Wallet/WalletSettings/DisablePermit.tsx
+++ b/packages/mask/popups/pages/Wallet/WalletSettings/DisablePermit.tsx
@@ -14,7 +14,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: 16,
     },
     text: {
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         lineHeight: '18px',
         fontSize: 14,
         fontWeight: 700,
@@ -34,7 +34,7 @@ export function DisablePermit() {
                     <Trans>Disable Permit</Trans>
                 </Typography>
                 <Icons.Questions
-                    color={theme.palette.maskColor.second}
+                    color={theme.vars.palette.maskColor.second}
                     size={20}
                     onClick={() => {
                         ConfirmModal.openAndWaitForClose({
diff --git a/packages/mask/popups/pages/Wallet/WalletSettings/Rename.tsx b/packages/mask/popups/pages/Wallet/WalletSettings/Rename.tsx
index 636550b5ed85..19945b0e137a 100644
--- a/packages/mask/popups/pages/Wallet/WalletSettings/Rename.tsx
+++ b/packages/mask/popups/pages/Wallet/WalletSettings/Rename.tsx
@@ -33,14 +33,14 @@ export const Rename = function Rename() {
                 })
             }>
             <Box className={classes.itemBox}>
-                <Icons.Edit2 size={20} color={theme.palette.maskColor.second} />
+                <Icons.Edit2 size={20} color={theme.vars.palette.maskColor.second} />
                 <Typography className={classes.itemText}>
                     <Trans>Rename</Trans>
                 </Typography>
             </Box>
             <Box className={classes.itemBox}>
                 <Typography className={classes.itemText}>{walletName}</Typography>
-                <Icons.ArrowRight color={theme.palette.maskColor.second} size={24} />
+                <Icons.ArrowRight color={theme.vars.palette.maskColor.second} size={24} />
             </Box>
         </ListItem>
     )
diff --git a/packages/mask/popups/pages/Wallet/WalletSettings/ShowPrivateKey.tsx b/packages/mask/popups/pages/Wallet/WalletSettings/ShowPrivateKey.tsx
index 22de8b6ea672..14986246c2d9 100644
--- a/packages/mask/popups/pages/Wallet/WalletSettings/ShowPrivateKey.tsx
+++ b/packages/mask/popups/pages/Wallet/WalletSettings/ShowPrivateKey.tsx
@@ -21,12 +21,12 @@ export const ShowPrivateKey = function ShowPrivateKey({ disabled }: Props) {
                 })
             }}>
             <Box className={classes.itemBox}>
-                <Icons.PublicKey2 size={20} color={theme.palette.maskColor.second} />
+                <Icons.PublicKey2 size={20} color={theme.vars.palette.maskColor.second} />
                 <Typography className={classes.itemText}>
                     <Trans>Backup Wallet</Trans>
                 </Typography>
             </Box>
-            <Icons.ArrowRight color={theme.palette.maskColor.second} size={24} />
+            <Icons.ArrowRight color={theme.vars.palette.maskColor.second} size={24} />
         </ListItem>
     )
 }
diff --git a/packages/mask/popups/pages/Wallet/WalletSettings/index.tsx b/packages/mask/popups/pages/Wallet/WalletSettings/index.tsx
index cb28e0060636..a2f7918a21e2 100644
--- a/packages/mask/popups/pages/Wallet/WalletSettings/index.tsx
+++ b/packages/mask/popups/pages/Wallet/WalletSettings/index.tsx
@@ -80,7 +80,7 @@ export const Component = memo(function WalletSettings() {
                         <Typography className={classes.primaryItemSecondText}>{wallet.address}</Typography>
                     </div>
                 </Box>
-                <Icons.ArrowDownRound color={theme.palette.maskColor.white} size={24} />
+                <Icons.ArrowDownRound color={theme.vars.palette.maskColor.white} size={24} />
             </Box>
             <List dense className={classes.list} data-hide-scrollbar>
                 <Rename />
diff --git a/packages/mask/popups/pages/Wallet/WalletSettings/useStyles.ts b/packages/mask/popups/pages/Wallet/WalletSettings/useStyles.ts
index d845ae837e7a..34b0535a4f96 100644
--- a/packages/mask/popups/pages/Wallet/WalletSettings/useStyles.ts
+++ b/packages/mask/popups/pages/Wallet/WalletSettings/useStyles.ts
@@ -1,6 +1,5 @@
 /* eslint-disable tss-unused-classes/unused-classes */
-import { makeStyles } from '@masknet/theme'
-import { alpha } from '@mui/material'
+import { alpha, makeStyles } from '@masknet/theme'
 
 export const useStyles = makeStyles()((theme) => ({
     content: {
@@ -16,17 +15,17 @@ export const useStyles = makeStyles()((theme) => ({
     },
     primaryItem: {
         margin: '16px 16px 12px 16px',
-        background: theme.palette.maskColor.primary,
+        background: theme.vars.palette.maskColor.primary,
     },
     primaryItemText: {
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
     },
     primaryItemSecondText: {
         fontSize: 10,
         fontWeight: 700,
-        color: alpha(theme.palette.maskColor.white, 0.8),
+        color: alpha(theme.vars.palette.maskColor.white, 0.8),
     },
     item: {
         display: 'flex',
@@ -35,21 +34,21 @@ export const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         cursor: 'pointer',
         justifyContent: 'space-between',
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         borderRadius: '8px',
-        boxShadow: `0px 0px 20px 0px ${alpha(theme.palette.maskColor.main, 0.05)}`,
+        boxShadow: `0px 0px 20px 0px ${alpha(theme.vars.palette.maskColor.main, 0.05)}`,
     },
     itemText: {
         marginLeft: 6,
         marginRight: 2,
         fontSize: 14,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     walletInfo: {
         marginLeft: 12,
     },
     maskBlue: {
-        border: `1px solid ${theme.palette.maskColor.white}`,
+        border: `1px solid ${theme.vars.palette.maskColor.white}`,
         borderRadius: 99,
     },
     primaryItemBox: {
@@ -66,7 +65,7 @@ export const useStyles = makeStyles()((theme) => ({
         paddingTop: 16,
         display: 'flex',
         justifyContent: 'center',
-        background: theme.palette.maskColor.secondaryBottom,
+        background: theme.vars.palette.maskColor.secondaryBottom,
         boxShadow: '0px 0px 20px 0px rgba(0, 0, 0, 0.05)',
         backdropFilter: 'blur(8px)',
     },
@@ -82,7 +81,7 @@ export const useStyles = makeStyles()((theme) => ({
     bold: {
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     confirmMessage: {
         fontSize: 14,
diff --git a/packages/mask/popups/pages/Wallet/components/ActionGroup/index.tsx b/packages/mask/popups/pages/Wallet/components/ActionGroup/index.tsx
index 973ff4aa40b3..bc59b16d6427 100644
--- a/packages/mask/popups/pages/Wallet/components/ActionGroup/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/ActionGroup/index.tsx
@@ -11,7 +11,6 @@ import { Trans } from '@lingui/react/macro'
 import { useSupportedChains } from '@masknet/plugin-trader'
 
 const useStyles = makeStyles()((theme) => {
-    const isDark = theme.palette.mode === 'dark'
     return {
         container: {
             display: 'flex',
@@ -21,18 +20,21 @@ const useStyles = makeStyles()((theme) => {
             padding: theme.spacing(2),
         },
         button: {
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             flexGrow: 1,
             minWidth: 0,
             height: theme.spacing(4.5),
             boxSizing: 'border-box',
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             borderRadius: 8,
             border: 'none',
-            boxShadow: `0px 4px 6px 0px ${isDark ? 'rgba(0, 0, 0, 0.10)' : 'rgba(102, 108, 135, 0.10)'}`,
+            boxShadow: '0px 4px 6px 0px rgba(102, 108, 135, 0.10)',
+            ...theme.applyStyles('dark', {
+                boxShadow: '0px 4px 6px 0px rgba(0, 0, 0, 0.10)',
+            }),
             backdropFilter: 'blur(5px)',
             cursor: 'pointer',
             transition: 'transform 0.1s ease',
@@ -44,7 +46,7 @@ const useStyles = makeStyles()((theme) => {
             },
         },
         label: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             marginLeft: theme.spacing(1),
             fontWeight: 700,
             fontSize: 14,
@@ -81,7 +83,7 @@ export const ActionGroup = memo(function ActionGroup({ className, chainId, addre
                         state: { asset },
                     })
                 }}>
-                <Icons.Send size={20} color={theme.palette.maskColor.main} />
+                <Icons.Send size={20} color={theme.vars.palette.maskColor.main} />
                 <Typography className={classes.label}>
                     <Trans>Send</Trans>
                 </Typography>
@@ -97,7 +99,7 @@ export const ActionGroup = memo(function ActionGroup({ className, chainId, addre
                         }),
                     )
                 }}>
-                <Icons.ArrowDownward size={20} color={theme.palette.maskColor.main} />
+                <Icons.ArrowDownward size={20} color={theme.vars.palette.maskColor.main} />
                 <Typography className={classes.label}>
                     <Trans>Receive</Trans>
                 </Typography>
@@ -114,7 +116,7 @@ export const ActionGroup = memo(function ActionGroup({ className, chainId, addre
                         })
                         navigate(url)
                     }}>
-                    <Icons.Cached size={20} color={theme.palette.maskColor.main} />
+                    <Icons.Cached size={20} color={theme.vars.palette.maskColor.main} />
                     <Typography className={classes.label}>
                         <Trans>Swap</Trans>
                     </Typography>
diff --git a/packages/mask/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx b/packages/mask/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx
index 1068fd31b397..6779f05a44b7 100644
--- a/packages/mask/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx
+++ b/packages/mask/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx
@@ -2,7 +2,7 @@ import { Icons } from '@masknet/icons'
 import { ImageIcon, NetworkIcon, ProgressiveText, ReversedAddress } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { useEverSeen } from '@masknet/shared-base-ui'
-import { TextOverflowTooltip, makeStyles, useBoundedPopperProps } from '@masknet/theme'
+import { alpha, TextOverflowTooltip, makeStyles, useBoundedPopperProps } from '@masknet/theme'
 import {
     useAccount,
     useFungibleToken,
@@ -30,7 +30,7 @@ import {
     type Transaction as EvmTransaction,
     type SchemaType,
 } from '@masknet/web3-shared-evm'
-import { Box, ListItem, ListItemText, Skeleton, Typography, alpha, type ListItemProps } from '@mui/material'
+import { Box, ListItem, ListItemText, Skeleton, Typography, type ListItemProps } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
 import { memo, useMemo, type JSX } from 'react'
 import { formatTokenBalance } from '../../../../../shared/index.js'
@@ -39,19 +39,19 @@ import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles<{ cateType?: string }>()((theme, { cateType = '' }, __) => {
     const colorMap: { [property: string]: string } = {
-        send: theme.palette.maskColor.warn,
-        receive: theme.palette.maskColor.success,
-        default: theme.palette.maskColor.primary,
+        send: theme.vars.palette.maskColor.warn,
+        receive: theme.vars.palette.maskColor.success,
+        default: theme.vars.palette.maskColor.primary,
     }
     const backgroundColorMap: { [property: string]: string } = {
-        send: alpha(theme.palette.maskColor.warn, 0.1),
-        receive: alpha(theme.palette.maskColor.success, 0.1),
-        default: alpha(theme.palette.maskColor.primary, 0.1),
+        send: alpha(theme.vars.palette.maskColor.warn, 0.1),
+        receive: alpha(theme.vars.palette.maskColor.success, 0.1),
+        default: alpha(theme.vars.palette.maskColor.primary, 0.1),
     }
     const boxShadowMap: { [property: string]: string } = {
-        send: alpha(theme.palette.maskColor.warn, 0.2),
-        receive: alpha(theme.palette.maskColor.success, 0.2),
-        default: alpha(theme.palette.maskColor.primary, 0.2),
+        send: alpha(theme.vars.palette.maskColor.warn, 0.2),
+        receive: alpha(theme.vars.palette.maskColor.success, 0.2),
+        default: alpha(theme.vars.palette.maskColor.primary, 0.2),
     }
     const iconColor = colorMap[cateType] || colorMap.default
     const iconBoxShadow = `0px 6px 12px 0px ${boxShadowMap[cateType] || boxShadowMap.default}`
@@ -89,7 +89,7 @@ const useStyles = makeStyles<{ cateType?: string }>()((theme, { cateType = '' },
             position: 'absolute',
             right: -4.5,
             bottom: -1,
-            border: `1px solid ${theme.palette.common.white}`,
+            border: `1px solid ${theme.vars.palette.common.white}`,
             borderRadius: '50%',
         },
         txName: {
@@ -100,8 +100,8 @@ const useStyles = makeStyles<{ cateType?: string }>()((theme, { cateType = '' },
         scamLabel: {
             display: 'inline-block',
             padding: '4px 6px',
-            backgroundColor: theme.palette.maskColor.third,
-            color: theme.palette.maskColor.white,
+            backgroundColor: theme.vars.palette.maskColor.third,
+            color: theme.vars.palette.maskColor.white,
             fontSize: 12,
             lineHeight: '16px',
             fontWeight: 700,
@@ -110,7 +110,7 @@ const useStyles = makeStyles<{ cateType?: string }>()((theme, { cateType = '' },
         },
         toAddress: {
             whiteSpace: 'nowrap',
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
         },
         operations: {
             display: 'flex',
@@ -126,16 +126,16 @@ const useStyles = makeStyles<{ cateType?: string }>()((theme, { cateType = '' },
             cursor: 'pointer',
         },
         speedupButton: {
-            backgroundColor: alpha(theme.palette.maskColor.primary, 0.1),
-            color: theme.palette.maskColor.primary,
+            backgroundColor: alpha(theme.vars.palette.maskColor.primary, 0.1),
+            color: theme.vars.palette.maskColor.primary,
         },
         cancelButton: {
-            backgroundColor: alpha(theme.palette.maskColor.danger, 0.1),
-            color: theme.palette.maskColor.danger,
+            backgroundColor: alpha(theme.vars.palette.maskColor.danger, 0.1),
+            color: theme.vars.palette.maskColor.danger,
         },
         failedLabel: {
             fontSize: 14,
-            color: theme.palette.maskColor.danger,
+            color: theme.vars.palette.maskColor.danger,
             fontWeight: 400,
             marginRight: 4,
         },
@@ -148,7 +148,7 @@ const useStyles = makeStyles<{ cateType?: string }>()((theme, { cateType = '' },
         asset: {
             fontSize: 14,
             fontWeight: 700,
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             textAlign: 'right',
             display: 'inline-flex',
             alignItems: 'center',
@@ -175,9 +175,9 @@ const TransactionIcon = memo(function TransactionIcon({ cateType }: TransactionI
     const { classes, theme } = useStyles({ cateType })
     const mapType = cateType || 'default'
     const IconMap: { [property: string]: JSX.Element } = {
-        send: <Icons.BaseUpload color={theme.palette.maskColor.warn} size={20} />,
-        receive: <Icons.Download color={theme.palette.maskColor.success} size={20} />,
-        default: <Icons.Cached color={theme.palette.maskColor.primary} size={20} />,
+        send: <Icons.BaseUpload color={theme.vars.palette.maskColor.warn} size={20} />,
+        receive: <Icons.Download color={theme.vars.palette.maskColor.success} size={20} />,
+        default: <Icons.Cached color={theme.vars.palette.maskColor.primary} size={20} />,
     }
 
     return <div className={classes.txIcon}>{IconMap[mapType] || IconMap.default}</div>
diff --git a/packages/mask/popups/pages/Wallet/components/ActivityList/index.tsx b/packages/mask/popups/pages/Wallet/components/ActivityList/index.tsx
index 113eab5a391c..31c204929163 100644
--- a/packages/mask/popups/pages/Wallet/components/ActivityList/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/ActivityList/index.tsx
@@ -24,14 +24,14 @@ const useStyles = makeStyles<{ hasNav?: boolean }>()((theme, { hasNav }) => ({
         overflow: 'auto',
     },
     list: {
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
         padding: theme.spacing(2),
         display: 'flex',
         flexDirection: 'column',
         gap: theme.spacing(1.5),
     },
     day: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 14,
         lineHeight: '18px',
     },
diff --git a/packages/mask/popups/pages/Wallet/components/AssetsList/index.tsx b/packages/mask/popups/pages/Wallet/components/AssetsList/index.tsx
index 3c8adfdf54d9..97cb4cb40ea2 100644
--- a/packages/mask/popups/pages/Wallet/components/AssetsList/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/AssetsList/index.tsx
@@ -26,7 +26,7 @@ const useStyles = makeStyles<{ hasNav?: boolean }>()((theme, { hasNav }) => ({
         overflow: 'auto',
     },
     list: {
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
         padding: theme.spacing(2),
     },
     item: {
@@ -34,7 +34,7 @@ const useStyles = makeStyles<{ hasNav?: boolean }>()((theme, { hasNav }) => ({
         cursor: 'pointer',
         borderRadius: 8,
         '&:hover': {
-            backgroundColor: theme.palette.maskColor.bg,
+            backgroundColor: theme.vars.palette.maskColor.bg,
         },
     },
     tokenIcon: {
@@ -45,7 +45,7 @@ const useStyles = makeStyles<{ hasNav?: boolean }>()((theme, { hasNav }) => ({
         position: 'absolute',
         right: -6,
         bottom: -4,
-        border: `1px solid ${theme.palette.common.white}`,
+        border: `1px solid ${theme.vars.palette.common.white}`,
         borderRadius: '50%',
     },
     text: {
@@ -56,21 +56,21 @@ const useStyles = makeStyles<{ hasNav?: boolean }>()((theme, { hasNav }) => ({
     name: {
         fontSize: 16,
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         textOverflow: 'ellipsis',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
     },
     balance: {
         fontSize: 14,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontWeight: 400,
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
         overflow: 'hidden',
     },
     customToken: {
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         fontSize: 13,
         fontWeight: 400,
         lineHeight: '18px',
diff --git a/packages/mask/popups/pages/Wallet/components/DisconnectModal/index.tsx b/packages/mask/popups/pages/Wallet/components/DisconnectModal/index.tsx
index 58d0e5d0ff83..dca83a87864c 100644
--- a/packages/mask/popups/pages/Wallet/components/DisconnectModal/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/DisconnectModal/index.tsx
@@ -21,7 +21,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         flexDirection: 'column',
         padding: '24px',
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         borderRadius: '14px',
         width: '320px',
         alignItems: 'center',
@@ -31,14 +31,14 @@ const useStyles = makeStyles()((theme) => ({
         transform: 'translate(-50%, -50%)',
     },
     title: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: '16px',
         fontWeight: 700,
         lineHeight: '20px',
         marginBottom: '24px',
     },
     desc: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: '14px',
         fontWeight: 400,
         lineHeight: '18px',
@@ -65,15 +65,15 @@ const useStyles = makeStyles()((theme) => ({
         flexGrow: 1,
     },
     confirmButton: {
-        background: theme.palette.maskColor.warn,
-        color: theme.palette.maskColor.white,
+        background: theme.vars.palette.maskColor.warn,
+        color: theme.vars.palette.maskColor.white,
     },
     cancelButton: {
-        background: theme.palette.maskColor.thirdMain,
-        color: theme.palette.maskColor.main,
+        background: theme.vars.palette.maskColor.thirdMain,
+        color: theme.vars.palette.maskColor.main,
     },
     disconnectAll: {
-        color: theme.palette.maskColor.highlight,
+        color: theme.vars.palette.maskColor.highlight,
         fontSize: '14px',
         fontWeight: 400,
         lineHeight: '18px',
diff --git a/packages/mask/popups/pages/Wallet/components/ImportCreateWallet/index.tsx b/packages/mask/popups/pages/Wallet/components/ImportCreateWallet/index.tsx
index 27130814ebeb..e9bf68fd7820 100644
--- a/packages/mask/popups/pages/Wallet/components/ImportCreateWallet/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/ImportCreateWallet/index.tsx
@@ -4,9 +4,9 @@ import { Icons } from '@masknet/icons'
 import { timeout } from '@masknet/kit'
 import { LoadingStatus } from '@masknet/shared'
 import { DashboardRoutes, type NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
-import { ActionButton, makeStyles } from '@masknet/theme'
+import { alpha, ActionButton, makeStyles } from '@masknet/theme'
 import { useQueryClient } from '@tanstack/react-query'
-import { alpha, Box, Typography, type BoxProps } from '@mui/material'
+import { Box, Typography, type BoxProps } from '@mui/material'
 import { memo, useCallback } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useAsync, useAsyncFn } from 'react-use'
@@ -25,7 +25,7 @@ const useStyles = makeStyles()((theme) => {
             position: 'absolute',
             inset: 0,
             margin: 'auto',
-            background: alpha(theme.palette.maskColor.bottom, 0.8),
+            background: alpha(theme.vars.palette.maskColor.bottom, 0.8),
             backdropFilter: 'blur(10px)',
             padding: theme.spacing(4),
         },
@@ -35,26 +35,26 @@ const useStyles = makeStyles()((theme) => {
             padding: 12,
             alignItems: 'center',
             gap: 8,
-            background: theme.palette.maskColor.bottom,
-            border: `1px solid ${theme.palette.maskColor.line}`,
+            background: theme.vars.palette.maskColor.bottom,
+            border: `1px solid ${theme.vars.palette.maskColor.line}`,
             borderRadius: 8,
             cursor: 'pointer',
         },
         subTitle: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             fontSize: 12,
             fontWeight: 700,
         },
         description: {
-            color: theme.palette.maskColor.third,
+            color: theme.vars.palette.maskColor.third,
             fontSize: 12,
             fontWeight: 400,
         },
         mnemonicIcon: {
-            background: theme.palette.maskColor.success,
+            background: theme.vars.palette.maskColor.success,
         },
         walletIcon: {
-            background: theme.palette.maskColor.primary,
+            background: theme.vars.palette.maskColor.primary,
         },
         iconWrapper: {
             display: 'flex',
@@ -179,7 +179,7 @@ export const ImportCreateWallet = memo<Props>(function ImportCreateWallet({ onCh
                         boxShadow: '0 6px 12px 0 rgba(28, 104, 243, 0.20)',
                         backdropFilter: 'blur(8px)',
                     }}>
-                    <Icons.Wallet size={20} color={theme.palette.maskColor.white} />
+                    <Icons.Wallet size={20} color={theme.vars.palette.maskColor.white} />
                 </div>
                 <div>
                     <Typography className={classes.subTitle}>
@@ -198,7 +198,7 @@ export const ImportCreateWallet = memo<Props>(function ImportCreateWallet({ onCh
                         boxShadow: '0 6px 12px 0 rgba(61, 194, 51, 0.20)',
                         backdropFilter: 'blur(8px)',
                     }}>
-                    <Icons.Mnemonic size={20} color={theme.palette.maskColor.white} />
+                    <Icons.Mnemonic size={20} color={theme.vars.palette.maskColor.white} />
                 </div>
                 <div>
                     <Typography className={classes.subTitle}>
@@ -213,8 +213,8 @@ export const ImportCreateWallet = memo<Props>(function ImportCreateWallet({ onCh
                 <Box className={classes.mask}>
                     {oauthTimeout ?
                         <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                            <Icons.Time size={32} color={theme.palette.maskColor.main} />
-                            <Typography color={theme.palette.maskColor.second} sx={{ fontWeight: 400, my: 1.5 }}>
+                            <Icons.Time size={32} color={theme.vars.palette.maskColor.main} />
+                            <Typography color={theme.vars.palette.maskColor.second} sx={{ fontWeight: 400, my: 1.5 }}>
                                 <Trans>Your X account authorization has timed out. Please try again.</Trans>
                             </Typography>
                             <ActionButton fullWidth onClick={createPrivyWallet}>
diff --git a/packages/mask/popups/pages/Wallet/components/OriginCard/index.tsx b/packages/mask/popups/pages/Wallet/components/OriginCard/index.tsx
index bf82d9917b83..5b90da049fd7 100644
--- a/packages/mask/popups/pages/Wallet/components/OriginCard/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/OriginCard/index.tsx
@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         gap: '6px',
         borderRadius: '8px',
-        border: '1px solid ' + theme.palette.maskColor.line,
+        border: '1px solid ' + theme.vars.palette.maskColor.line,
     },
     site: {
         display: 'flex',
@@ -21,13 +21,13 @@ const useStyles = makeStyles()((theme) => ({
         width: '296px',
     },
     siteName: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 12,
         fontWeight: 700,
         lineHeight: '16px',
     },
     siteUrl: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 12,
         fontWeight: 400,
         lineHeight: '16px',
@@ -37,7 +37,7 @@ const useStyles = makeStyles()((theme) => ({
         background: 'none',
         border: 'none',
         cursor: 'pointer',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 
diff --git a/packages/mask/popups/pages/Wallet/components/StartUp/index.tsx b/packages/mask/popups/pages/Wallet/components/StartUp/index.tsx
index 5717168214b6..bc0b7859080d 100644
--- a/packages/mask/popups/pages/Wallet/components/StartUp/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/StartUp/index.tsx
@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme) => ({
     container: {
         display: 'flex',
         flexDirection: 'column',
-        background: theme.palette.maskColor.secondaryBottom,
+        background: theme.vars.palette.maskColor.secondaryBottom,
     },
     content: {
         padding: 16,
@@ -36,9 +36,9 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         lineHeight: '18px',
         fontWeight: 400,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         margin: theme.spacing(1.5, 0),
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         borderRadius: 8,
         padding: theme.spacing(2),
     },
diff --git a/packages/mask/popups/pages/Wallet/components/WalletAssets/index.tsx b/packages/mask/popups/pages/Wallet/components/WalletAssets/index.tsx
index 8c2743dab654..f0cbecdd3d59 100644
--- a/packages/mask/popups/pages/Wallet/components/WalletAssets/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/WalletAssets/index.tsx
@@ -14,7 +14,6 @@ import { AssetsList } from '../AssetsList/index.js'
 import { Component as SelectWallet } from '../../SelectWallet/index.js'
 
 const useStyles = makeStyles()((theme) => {
-    const isDark = theme.palette.mode === 'dark'
     return {
         content: {
             flex: 1,
@@ -32,16 +31,17 @@ const useStyles = makeStyles()((theme) => {
             padding: '8px 12px',
             fontSize: 14,
             fontWeight: 700,
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             minHeight: 'unset',
             backgroundColor: 'transparent',
             borderRadius: '12px 12px 0 0',
             boxShadow: 'none',
             [`&.${tabClasses.selected}`]: {
-                backgroundColor: theme.palette.maskColor.bottom,
+                backgroundColor: theme.vars.palette.maskColor.bottom,
                 fontWeight: 700,
-                color: theme.palette.maskColor.main,
-                boxShadow: `0px 4px 6px 0px ${isDark ? 'rgba(0, 0, 0, 0.10)' : 'rgba(102, 108, 135, 0.10)'}`,
+                color: theme.vars.palette.maskColor.main,
+                boxShadow: '0px 4px 6px 0px rgba(102, 108, 135, 0.10)',
+                ...theme.applyStyles('dark', { boxShadow: '0px 4px 6px 0px rgba(0, 0, 0, 0.10)' }),
                 backdropFilter: 'blur(5px)',
             },
         },
@@ -73,8 +73,9 @@ const useStyles = makeStyles()((theme) => {
             justifyContent: 'center',
             boxSizing: 'border-box',
             padding: theme.spacing(0.5),
-            backgroundColor: theme.palette.maskColor.bottom,
-            boxShadow: `0px 4px 6px 0px ${isDark ? 'rgba(0, 0, 0, 0.10)' : 'rgba(102, 108, 135, 0.10)'}`,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
+            boxShadow: '0px 4px 6px 0px rgba(102, 108, 135, 0.10)',
+            ...theme.applyStyles('dark', { boxShadow: '0px 4px 6px 0px rgba(0, 0, 0, 0.10)' }),
             marginLeft: 'auto',
         },
     }
diff --git a/packages/mask/popups/pages/Wallet/components/WalletHeader/UI.tsx b/packages/mask/popups/pages/Wallet/components/WalletHeader/UI.tsx
index 2fa6fd39d038..2b350ca627e3 100644
--- a/packages/mask/popups/pages/Wallet/components/WalletHeader/UI.tsx
+++ b/packages/mask/popups/pages/Wallet/components/WalletHeader/UI.tsx
@@ -18,7 +18,6 @@ import { WalletAssetsValue } from './WalletAssetsValue.js'
 import urlcat from 'urlcat'
 
 const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => {
-    const isDark = theme.palette.mode === 'dark'
     return {
         container: {
             padding: '16px',
@@ -26,9 +25,8 @@ const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => {
             // padding bottom space for assets tabs
             paddingBottom: disabled ? 16 : 34,
             background:
-                isDark ?
-                    theme.palette.maskColor.modalTitleBg
-                :   'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.2) 0%, rgba(59, 153, 252, 0.2) 100%)',
+                'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.2) 0%, rgba(59, 153, 252, 0.2) 100%)',
+            ...theme.applyStyles('dark', { background: theme.vars.palette.maskColor.modalTitleBg }),
         },
         topBar: {
             display: 'flex',
@@ -38,18 +36,19 @@ const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => {
             gap: theme.spacing(1),
         },
         action: {
-            background: theme.palette.maskColor.bg,
+            background: theme.vars.palette.maskColor.bg,
             borderRadius: 99,
             padding: '5px 8px 5px 4px',
             display: 'flex',
             alignItems: 'center',
             cursor: 'pointer',
             maxWidth: '60%',
-            boxShadow: `0px 4px 6px 0px ${isDark ? 'rgba(0, 0, 0, 0.10)' : 'rgba(102, 108, 135, 0.10)'}`,
+            boxShadow: '0px 4px 6px 0px rgba(102, 108, 135, 0.10)',
+            ...theme.applyStyles('dark', { boxShadow: '0px 4px 6px 0px rgba(0, 0, 0, 0.10)' }),
             backdropFilter: 'blur(5px)',
         },
         nickname: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             lineHeight: '18px',
             fontWeight: 700,
             whiteSpace: 'nowrap',
@@ -58,7 +57,7 @@ const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => {
         },
         identifier: {
             fontSize: 10,
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             lineHeight: 1,
             display: 'flex',
             alignItems: 'center',
@@ -66,7 +65,7 @@ const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => {
         icon: {
             height: 12,
             width: 12,
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             cursor: 'pointer',
             marginLeft: 4,
         },
@@ -74,7 +73,7 @@ const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => {
             fontSize: 20,
             transition: 'all 300ms',
             flexShrink: 0,
-            color: theme.palette.maskColor.secondaryDark,
+            color: theme.vars.palette.maskColor.secondaryDark,
         },
         networkSelector: {
             display: 'flex',
@@ -86,7 +85,7 @@ const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => {
         chainName: {
             flexGrow: 1,
             lineHeight: '18px',
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             fontWeight: 700,
             textOverflow: 'ellipsis',
             overflow: 'hidden',
@@ -98,7 +97,7 @@ const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => {
             alignItems: 'center',
             lineHeight: '18px',
             fontSize: 12,
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             columnGap: 4,
         },
         dot: {
@@ -108,15 +107,15 @@ const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => {
             borderRadius: 99,
         },
         connectedDot: {
-            backgroundColor: theme.palette.maskColor.success,
+            backgroundColor: theme.vars.palette.maskColor.success,
         },
         unconnectedDot: {
-            backgroundColor: theme.palette.maskColor.third,
+            backgroundColor: theme.vars.palette.maskColor.third,
         },
         balance: {
             fontSize: 36,
             fontWeight: 700,
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             height: 54,
             paddingTop: theme.spacing(1.5),
             display: 'flex',
diff --git a/packages/mask/popups/pages/Wallet/components/WalletHeader/WalletSetupHeaderUI.tsx b/packages/mask/popups/pages/Wallet/components/WalletHeader/WalletSetupHeaderUI.tsx
index 290ed792b30d..de12d3234fb6 100644
--- a/packages/mask/popups/pages/Wallet/components/WalletHeader/WalletSetupHeaderUI.tsx
+++ b/packages/mask/popups/pages/Wallet/components/WalletHeader/WalletSetupHeaderUI.tsx
@@ -15,9 +15,8 @@ const useStyles = makeStyles()((theme) => ({
         flexShrink: 0,
         alignSelf: 'stretch',
         background:
-            theme.palette.mode === 'light' ?
-                'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.2) 0%, rgba(59, 153, 252, 0.2) 100%)'
-            :   theme.palette.maskColor.bottom,
+            'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.2) 0%, rgba(59, 153, 252, 0.2) 100%)',
+        ...theme.applyStyles('dark', { background: theme.vars.palette.maskColor.bottom }),
         lineHeight: 0,
     },
     backIcon: {
@@ -26,7 +25,7 @@ const useStyles = makeStyles()((theme) => ({
         left: 16,
         fontSize: 24,
         cursor: 'pointer',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 
diff --git a/packages/plugins/Approval/src/SiteAdaptor/ApprovalDialog.tsx b/packages/plugins/Approval/src/SiteAdaptor/ApprovalDialog.tsx
index 3e8034cce2e0..3e8cf1493ebb 100644
--- a/packages/plugins/Approval/src/SiteAdaptor/ApprovalDialog.tsx
+++ b/packages/plugins/Approval/src/SiteAdaptor/ApprovalDialog.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles()((theme, props) => ({
     },
     dialogContent: {
         width: 600,
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         padding: 0,
         margin: 'auto',
         overflowX: 'hidden',
@@ -38,7 +38,7 @@ const useStyles = makeStyles()((theme, props) => ({
             borderRadius: '20px',
             width: 5,
             border: '7px solid rgba(0, 0, 0, 0)',
-            backgroundColor: theme.palette.maskColor.secondaryLine,
+            backgroundColor: theme.vars.palette.maskColor.secondaryLine,
             backgroundClip: 'padding-box',
         },
     },
diff --git a/packages/plugins/Approval/src/SiteAdaptor/ApprovalTokenContent.tsx b/packages/plugins/Approval/src/SiteAdaptor/ApprovalTokenContent.tsx
index 6238e7c179c8..6f355036a6e5 100644
--- a/packages/plugins/Approval/src/SiteAdaptor/ApprovalTokenContent.tsx
+++ b/packages/plugins/Approval/src/SiteAdaptor/ApprovalTokenContent.tsx
@@ -1,6 +1,6 @@
 import { ListItem, List, Typography, Link } from '@mui/material'
 import { Icons } from '@masknet/icons'
-import { ActionButton, makeStyles, parseColor } from '@masknet/theme'
+import { alpha, ActionButton, makeStyles } from '@masknet/theme'
 import type { ChainId, NetworkType, SchemaType } from '@masknet/web3-shared-evm'
 import { useERC20TokenApproveCallback } from '@masknet/web3-hooks-evm'
 import {
@@ -39,7 +39,7 @@ const useStyles = makeStyles<void | { listItemBackground?: string; listItemBackg
             height: 90,
             padding: 0,
             marginTop: 4,
-            background: theme.palette.common.white,
+            background: theme.vars.palette.common.white,
             borderRadius: 8,
             marginBottom: theme.spacing(1),
         },
@@ -49,7 +49,7 @@ const useStyles = makeStyles<void | { listItemBackground?: string; listItemBackg
             padding: 12,
             borderRadius: 8,
             marginBottom: 0,
-            background: props?.listItemBackground ?? theme.palette.background.default,
+            background: props?.listItemBackground ?? theme.vars.palette.background.default,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
@@ -89,7 +89,7 @@ const useStyles = makeStyles<void | { listItemBackground?: string; listItemBackg
             height: 16,
         },
         linkOutIcon: {
-            color: theme.palette.maskColor.secondaryDark,
+            color: theme.vars.palette.maskColor.secondaryDark,
             marginLeft: 2,
         },
         spenderMaskLogoIcon: {
@@ -113,28 +113,28 @@ const useStyles = makeStyles<void | { listItemBackground?: string; listItemBackg
         primaryText: {
             fontSize: 14,
             fontWeight: 700,
-            color: theme.palette.maskColor.dark,
+            color: theme.vars.palette.maskColor.dark,
         },
         secondaryText: {
             fontSize: 14,
             fontWeight: 400,
-            color: theme.palette.maskColor.secondaryDark,
+            color: theme.vars.palette.maskColor.secondaryDark,
         },
         button: {
             minWidth: 80,
             height: 32,
             fontSize: 12,
-            color: theme.palette.common.white,
-            background: theme.palette.common.black,
+            color: theme.vars.palette.common.white,
+            background: theme.vars.palette.common.black,
             flex: 'initial !important',
             '&:disabled': {
-                color: theme.palette.common.white,
-                background: theme.palette.common.black,
+                color: theme.vars.palette.common.white,
+                background: theme.vars.palette.common.black,
             },
             '&:hover': {
-                color: theme.palette.common.white,
-                background: theme.palette.common.black,
-                boxShadow: `0 8px 25px ${parseColor(theme.palette.common.black).setAlpha(0.3).toRgbString()}`,
+                color: theme.vars.palette.common.white,
+                background: theme.vars.palette.common.black,
+                boxShadow: `0 8px 25px ${alpha(theme.vars.palette.common.black, 0.3)}`,
             },
         },
         chainBoundary: {
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/CalendarContent.tsx b/packages/plugins/Calendar/src/SiteAdaptor/CalendarContent.tsx
index 14e24a80857e..f222488a6584 100644
--- a/packages/plugins/Calendar/src/SiteAdaptor/CalendarContent.tsx
+++ b/packages/plugins/Calendar/src/SiteAdaptor/CalendarContent.tsx
@@ -12,13 +12,12 @@ import { Footer } from './components/Footer.js'
 import { NewsList } from './components/NewsList.js'
 
 const useStyles = makeStyles()((theme) => {
-    const isDark = theme.palette.mode === 'dark'
     return {
         calendar: {
             display: 'flex',
             flexDirection: 'column',
             borderRadius: '12px',
-            border: `1px solid ${theme.palette.maskColor.line}`,
+            border: `1px solid ${theme.vars.palette.maskColor.line}`,
             position: 'relative',
             marginBottom: '20px',
         },
@@ -28,9 +27,10 @@ const useStyles = makeStyles()((theme) => {
         },
         tabList: {
             background:
-                isDark ?
-                    'linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.06) 100%)'
-                :   'linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.80) 100%), linear-gradient(90deg, rgba(28, 104, 243, 0.20) 0%, rgba(69, 163, 251, 0.20) 100%), #FFF',
+                'linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.80) 100%), linear-gradient(90deg, rgba(28, 104, 243, 0.20) 0%, rgba(69, 163, 251, 0.20) 100%), #FFF',
+            ...theme.applyStyles('dark', {
+                background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.06) 100%)',
+            }),
             padding: '8px 16px 0 16px',
             borderRadius: '12px 12px 0 0',
         },
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/DatePicker.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/DatePicker.tsx
index 4f8a63957fca..24bb9fc02da6 100644
--- a/packages/plugins/Calendar/src/SiteAdaptor/components/DatePicker.tsx
+++ b/packages/plugins/Calendar/src/SiteAdaptor/components/DatePicker.tsx
@@ -7,11 +7,13 @@ import { range } from 'lodash-es'
 import { useState } from 'react'
 
 const useStyles = makeStyles()((theme) => {
-    const isDark = theme.palette.mode === 'dark'
     return {
         container: {
-            background: theme.palette.maskColor.bottom,
-            boxShadow: isDark ? '0px 4px 30px 0px rgba(255, 255, 255, 0.1)' : '0px 4px 30px 0px rgba(0, 0, 0, 0.1)',
+            background: theme.vars.palette.maskColor.bottom,
+            boxShadow: '0px 4px 30px 0px rgba(0, 0, 0, 0.1)',
+            ...theme.applyStyles('dark', {
+                boxShadow: '0px 4px 30px 0px rgba(255, 255, 255, 0.1)',
+            }),
             borderRadius: '16px',
             display: 'flex',
             flexDirection: 'column',
@@ -26,7 +28,7 @@ const useStyles = makeStyles()((theme) => {
         daysOfWeek: {
             fontSize: 12,
             fontWeight: 700,
-            color: theme.palette.maskColor.third,
+            color: theme.vars.palette.maskColor.third,
             marginBottom: '24px',
         },
         header: {
@@ -35,7 +37,7 @@ const useStyles = makeStyles()((theme) => {
             justifyContent: 'space-between',
         },
         headerText: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             fontSize: '24px',
             fontWeight: 700,
             lineHeight: '120%',
@@ -48,7 +50,7 @@ const useStyles = makeStyles()((theme) => {
             fontSize: '16px',
             fontWeight: 400,
             lineHeight: '20px',
-            color: theme.palette.maskColor.third,
+            color: theme.vars.palette.maskColor.third,
             width: '38px',
             height: '38px',
             display: 'flex',
@@ -60,12 +62,12 @@ const useStyles = makeStyles()((theme) => {
             marginBottom: '8px',
         },
         canClick: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             cursor: 'pointer',
         },
         active: {
-            color: theme.palette.maskColor.white,
-            background: theme.palette.maskColor.primary,
+            color: theme.vars.palette.maskColor.white,
+            background: theme.vars.palette.maskColor.primary,
         },
         button: {
             outline: 'none',
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/DatePickerTab.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/DatePickerTab.tsx
index a0c20d3c6c1d..774c717a2668 100644
--- a/packages/plugins/Calendar/src/SiteAdaptor/components/DatePickerTab.tsx
+++ b/packages/plugins/Calendar/src/SiteAdaptor/components/DatePickerTab.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 16,
         fontFamily: 'Helvetica',
         fontWeight: '400',
@@ -26,15 +26,15 @@ const useStyles = makeStyles()((theme) => ({
         textAlign: 'center',
         width: '28px !important',
         height: '28px !important',
-        border: `0.5px ${theme.palette.maskColor.line} solid`,
+        border: `0.5px ${theme.vars.palette.maskColor.line} solid`,
         cursor: 'pointer',
     },
     isActive: {
-        border: `0.5px ${theme.palette.maskColor.main} solid`,
+        border: `0.5px ${theme.vars.palette.maskColor.main} solid`,
         fontWeight: '700',
     },
     disabled: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         cursor: 'default',
     },
 }))
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx
index 6d79990559b5..1b1b51f3b84f 100644
--- a/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx
+++ b/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx
@@ -36,7 +36,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         flexDirection: 'column',
         gap: 12,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         whiteSpace: 'nowrap',
     },
     eventCard: {
@@ -58,10 +58,10 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         gap: 8,
         alignItems: 'center',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     projectName: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: '12px',
         fontWeight: 700,
         lineHeight: '16px',
@@ -74,19 +74,19 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: '14px',
         fontWeight: 400,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     info: {
         fontSize: '13px',
         fontWeight: 400,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         gap: theme.spacing(1.5),
         alignItems: 'center',
     },
     loading: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 
@@ -180,7 +180,8 @@ export function EventList({ date }: EventListProps) {
                             <LoadingBase className={classes.loading} />
                         :   null}
                     </ElementAnchor>
-                :   <Typography sx={{ color: (theme) => theme.palette.maskColor.second, textAlign: 'center', py: 2 }}>
+                :   <Typography
+                        sx={{ color: (theme) => theme.vars.palette.maskColor.second, textAlign: 'center', py: 2 }}>
                         <Trans>No more data available.</Trans>
                     </Typography>
                 }
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/Footer.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/Footer.tsx
index 988b424f2a62..c877f9c5d598 100644
--- a/packages/plugins/Calendar/src/SiteAdaptor/components/Footer.tsx
+++ b/packages/plugins/Calendar/src/SiteAdaptor/components/Footer.tsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     poweredBy: {
         display: 'flex',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: '14px',
         fontWeight: 700,
         gap: theme.spacing(0.5),
@@ -43,7 +43,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     calendarText: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: '16px',
         fontWeight: 700,
         lineHeight: '20px',
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/ImageLoader.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/ImageLoader.tsx
index 7da1cb561a14..573f1502f3e2 100644
--- a/packages/plugins/Calendar/src/SiteAdaptor/components/ImageLoader.tsx
+++ b/packages/plugins/Calendar/src/SiteAdaptor/components/ImageLoader.tsx
@@ -1,6 +1,7 @@
 import { LoadingBase, makeStyles } from '@masknet/theme'
 import { useState } from 'react'
-import { Box, useTheme } from '@mui/material'
+import { Box } from '@mui/material'
+import { useColorScheme } from '@mui/material/styles'
 
 const MASK_DARK_FALLBACK = new URL('../assets/mask.dark.svg', import.meta.url).href
 const MASK_LIGHT_FALLBACK = new URL('../assets/mask.light.svg', import.meta.url).href
@@ -13,7 +14,7 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: '8px',
         justifyContent: 'center',
         alignItems: 'center',
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         position: 'relative',
     },
     poster: {
@@ -39,16 +40,12 @@ export function ImageLoader({ src }: ImageLoaderProps) {
     const [loaded, setLoaded] = useState(false)
     const [failed, setFailed] = useState(false)
     const { classes } = useStyles()
-    const theme = useTheme()
+    const { mode } = useColorScheme()
 
     return (
         <div className={classes.container}>
             {failed ?
-                <img
-                    src={theme.palette.mode === 'light' ? MASK_LIGHT_FALLBACK : MASK_DARK_FALLBACK}
-                    width={60}
-                    height={60}
-                />
+                <img src={mode === 'dark' ? MASK_DARK_FALLBACK : MASK_LIGHT_FALLBACK} width={60} height={60} />
             :   <img
                     src={src}
                     className={classes.poster}
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx
index bd10678faffa..66c96be1c678 100644
--- a/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx
+++ b/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx
@@ -36,7 +36,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         flexDirection: 'column',
         gap: 12,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         whiteSpace: 'nowrap',
     },
     eventCard: {
@@ -44,7 +44,7 @@ const useStyles = makeStyles()((theme) => ({
         padding: '8px 0',
         flexDirection: 'column',
         gap: '8px',
-        borderBottom: `1px solid ${theme.palette.maskColor.line}`,
+        borderBottom: `1px solid ${theme.vars.palette.maskColor.line}`,
         fontWeight: 700,
         lineHeight: '16px',
         fontSize: '12px',
@@ -64,7 +64,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     projectName: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: '12px',
         fontWeight: 700,
         lineHeight: '16px',
@@ -77,20 +77,20 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: '14px',
         fontWeight: 400,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     eventContent: {
         fontSize: '13px',
         fontWeight: 400,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     eventType: {
         fontSize: '12px',
         fontWeight: 400,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         borderRadius: '4px',
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         padding: '2px 4px',
         textAlign: 'center',
         display: 'flex',
@@ -101,11 +101,11 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: '14px',
         fontWeight: 700,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         padding: '10px 0',
     },
     loading: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 
@@ -220,7 +220,8 @@ export function NewsList({ date }: NewsListProps) {
                             <LoadingBase className={classes.loading} />
                         :   null}
                     </ElementAnchor>
-                :   <Typography sx={{ color: (theme) => theme.palette.maskColor.second, textAlign: 'center', py: 2 }}>
+                :   <Typography
+                        sx={{ color: (theme) => theme.vars.palette.maskColor.second, textAlign: 'center', py: 2 }}>
                         <Trans>No more data available.</Trans>
                     </Typography>
                 }
diff --git a/packages/plugins/CrossChainBridge/src/SiteAdaptor/components/BridgeStack.tsx b/packages/plugins/CrossChainBridge/src/SiteAdaptor/components/BridgeStack.tsx
index 52c2de68ab13..92f554716cd6 100644
--- a/packages/plugins/CrossChainBridge/src/SiteAdaptor/components/BridgeStack.tsx
+++ b/packages/plugins/CrossChainBridge/src/SiteAdaptor/components/BridgeStack.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({
         padding: '12px',
         borderRadius: '8px',
         ':hover': {
-            backgroundColor: theme.palette.maskColor.bg,
+            backgroundColor: theme.vars.palette.maskColor.bg,
             cursor: 'pointer',
         },
     },
@@ -32,7 +32,7 @@ const useStyles = makeStyles()((theme) => ({
     bridgeIntro: {
         fontSize: '12px',
         fontWeight: 400,
-        color: theme.palette.grey[700],
+        color: theme.vars.palette.grey[700],
     },
     officialTag: {
         width: '39px',
diff --git a/packages/plugins/EFP/src/SiteAdaptor/ProfileCard.tsx b/packages/plugins/EFP/src/SiteAdaptor/ProfileCard.tsx
index b8cb9fd4078b..ecb3df72a80a 100644
--- a/packages/plugins/EFP/src/SiteAdaptor/ProfileCard.tsx
+++ b/packages/plugins/EFP/src/SiteAdaptor/ProfileCard.tsx
@@ -26,16 +26,16 @@ const useStyles = makeStyles()((theme) => ({
     card: {
         overflow: 'hidden',
         borderRadius: 8,
-        border: `1px solid ${theme.palette.maskColor.line}`,
-        color: theme.palette.maskColor.main,
-        background: theme.palette.maskColor.bottom,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
+        color: theme.vars.palette.maskColor.main,
+        background: theme.vars.palette.maskColor.bottom,
     },
     image: {
         display: 'block',
         width: '100%',
         aspectRatio: '1.91 / 1',
         objectFit: 'cover',
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
     },
     imageFallback: {
         display: 'flex',
@@ -51,7 +51,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(1),
     },
     eyebrow: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontWeight: 700,
         lineHeight: 1,
     },
@@ -61,7 +61,7 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: 1.25,
     },
     description: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         display: '-webkit-box',
         overflow: 'hidden',
         WebkitBoxOrient: 'vertical',
@@ -76,14 +76,14 @@ const useStyles = makeStyles()((theme) => ({
         minWidth: 86,
         borderRadius: 8,
         padding: theme.spacing(0.75, 1),
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
     },
     metricValue: {
         fontWeight: 700,
         lineHeight: 1.2,
     },
     metricLabel: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         lineHeight: 1.2,
     },
     footer: {
diff --git a/packages/plugins/FileService/src/SiteAdaptor/components/FileBrowser.tsx b/packages/plugins/FileService/src/SiteAdaptor/components/FileBrowser.tsx
index b681fa806171..4936ae35f09f 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/components/FileBrowser.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/components/FileBrowser.tsx
@@ -25,7 +25,7 @@ const Tab = styled(MuiTab)(({ theme }) => ({
     padding: theme.spacing(0, 2),
     minHeight: 'auto',
     boxSizing: 'border-box',
-    color: theme.palette.maskColor.second,
+    color: theme.vars.palette.maskColor.second,
     fontSize: 14,
     fontWeight: 700,
     backgroundColor: 'transparent',
@@ -33,11 +33,11 @@ const Tab = styled(MuiTab)(({ theme }) => ({
     cursor: 'pointer',
     borderRadius: 18,
     '&:hover': {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     [`&.${tabClasses.selected}`]: {
-        color: theme.palette.maskColor.main,
-        backgroundColor: theme.palette.maskColor.bg,
+        color: theme.vars.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.bg,
     },
 }))
 
@@ -94,7 +94,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     emptyMessage: {
         fontSize: 14,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginTop: theme.spacing(1.5),
     },
     fileList: {
@@ -110,10 +110,10 @@ const useStyles = makeStyles()((theme) => ({
         padding: theme.spacing(2, 2, 0),
         flexShrink: 0,
         boxSizing: 'border-box',
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                '0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
     },
 }))
 
diff --git a/packages/plugins/FileService/src/SiteAdaptor/components/FileList.tsx b/packages/plugins/FileService/src/SiteAdaptor/components/FileList.tsx
index 1dbaff461441..4a3f592f6018 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/components/FileList.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/components/FileList.tsx
@@ -89,7 +89,11 @@ export function FileList({ files, onLoadMore, className, onDownload, onSend, ...
                     <Trans>
                         Do you want to delete file{' '}
                         <Typography
-                            sx={{ color: (theme) => theme.palette.maskColor.main, fontSize: 14, fontWeight: 700 }}>
+                            sx={{
+                                color: (theme) => theme.vars.palette.maskColor.main,
+                                fontSize: 14,
+                                fontWeight: 700,
+                            }}>
                             {file.name}
                         </Typography>
                     </Trans>
diff --git a/packages/plugins/FileService/src/SiteAdaptor/components/Files/DisplayingFile.tsx b/packages/plugins/FileService/src/SiteAdaptor/components/Files/DisplayingFile.tsx
index ed2eb807c392..464b069b4dea 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/components/Files/DisplayingFile.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/components/Files/DisplayingFile.tsx
@@ -8,24 +8,24 @@ import type { FileBaseProps, FileInfo } from '../../../types.js'
 
 const useStyles = makeStyles()((theme) => ({
     desc: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontWeight: 700,
         fontSize: 12,
     },
     meta: {
         fontSize: 12,
         fontWeight: 700,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
     },
     metaValue: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     operations: {
         display: 'flex',
         alignItems: 'center',
     },
     operationButton: {
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         marginLeft: theme.spacing(1),
     },
 }))
diff --git a/packages/plugins/FileService/src/SiteAdaptor/components/Files/ManageableFile.tsx b/packages/plugins/FileService/src/SiteAdaptor/components/Files/ManageableFile.tsx
index e1c7679a46f3..8ce304e78424 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/components/Files/ManageableFile.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/components/Files/ManageableFile.tsx
@@ -10,11 +10,11 @@ const useStyles = makeStyles()((theme) => ({
     meta: {
         fontSize: 12,
         fontWeight: 700,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
     },
     metaValue: {
         fontSize: 12,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     operations: {
         display: 'flex',
@@ -22,10 +22,10 @@ const useStyles = makeStyles()((theme) => ({
     },
     operationButton: {
         marginLeft: theme.spacing(1),
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     menuButton: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     menuLabel: {
         fontSize: 14,
@@ -35,10 +35,10 @@ const useStyles = makeStyles()((theme) => ({
     },
     menu: {
         minWidth: 229,
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 4px 30px 0px rgba(255, 255, 255, 0.15)'
-            :   '0px 4px 30px 0px rgba(0, 0, 0, 0.10)',
+        boxShadow: '0px 4px 30px 0px rgba(0, 0, 0, 0.10)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 4px 30px 0px rgba(255, 255, 255, 0.15)',
+        }),
     },
     row: {
         display: 'flex',
@@ -126,7 +126,7 @@ export const ManageableFile = memo(({ file, onDownload, onRename, onDelete, onSe
                             }}>
                             <Typography
                                 className={classes.menuLabel}
-                                sx={{ color: (theme) => theme.palette.maskColor.danger }}>
+                                sx={{ color: (theme) => theme.vars.palette.maskColor.danger }}>
                                 <Trans>Delete</Trans>
                             </Typography>
                         </MenuItem>
diff --git a/packages/plugins/FileService/src/SiteAdaptor/components/Files/SelectableFile.tsx b/packages/plugins/FileService/src/SiteAdaptor/components/Files/SelectableFile.tsx
index 9a0820fc175f..d92c8f004860 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/components/Files/SelectableFile.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/components/Files/SelectableFile.tsx
@@ -8,17 +8,17 @@ import type { FileBaseProps, FileInfo } from '../../../types.js'
 
 const useStyles = makeStyles()((theme) => ({
     desc: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontWeight: 700,
         fontSize: 12,
     },
     meta: {
         fontSize: 12,
         fontWeight: 700,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
     },
     metaValue: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
 }))
 
@@ -41,7 +41,7 @@ export const SelectableFile = memo(({ file, selected, onChange, disabled, ...res
                     disabled={disabled}
                     checked={selected}
                     icon={<Icons.CheckboxBlank size={20} />}
-                    checkedIcon={<Icons.Checkbox size={20} color={theme.palette.maskColor.primary} />}
+                    checkedIcon={<Icons.Checkbox size={20} color={theme.vars.palette.maskColor.primary} />}
                     onChange={(event) => {
                         onChange?.(file.id, event.currentTarget.checked)
                     }}
diff --git a/packages/plugins/FileService/src/SiteAdaptor/components/Files/UploadingFile.tsx b/packages/plugins/FileService/src/SiteAdaptor/components/Files/UploadingFile.tsx
index 82e7bf61a5ee..f1fdd0aef322 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/components/Files/UploadingFile.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/components/Files/UploadingFile.tsx
@@ -6,7 +6,7 @@ import type { FileBaseProps, FileInfo } from '../../../types.js'
 
 const useStyles = makeStyles()((theme) => ({
     desc: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontWeight: 700,
         fontSize: 12,
         marginTop: 7,
@@ -16,11 +16,11 @@ const useStyles = makeStyles()((theme) => ({
         marginTop: 7,
         borderRadius: 2,
         [`&.${linearProgressClasses.colorPrimary}`]: {
-            backgroundColor: theme.palette.maskColor.thirdMain,
+            backgroundColor: theme.vars.palette.maskColor.thirdMain,
         },
         [`& .${linearProgressClasses.bar}`]: {
             borderRadius: 2,
-            backgroundColor: theme.palette.maskColor.success,
+            backgroundColor: theme.vars.palette.maskColor.success,
         },
     },
 }))
diff --git a/packages/plugins/FileService/src/SiteAdaptor/components/Terms.tsx b/packages/plugins/FileService/src/SiteAdaptor/components/Terms.tsx
index 291e140a4a7b..d7b9e271bc45 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/components/Terms.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/components/Terms.tsx
@@ -26,32 +26,32 @@ const useStyles = makeStyles()((theme) => ({
     },
     title: {
         fontSize: 16,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         lineHeight: '20px',
     },
     introduction: {
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginTop: theme.spacing(2),
         flexGrow: 1,
         marginBottom: 'auto',
     },
     footNote: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 16,
         marginTop: theme.spacing(2),
     },
     link: {
-        color: theme.palette.primary.main,
+        color: theme.vars.palette.primary.main,
     },
     actions: {
         padding: '16px',
         display: 'flex',
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                '0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
         justifyContent: 'space-between',
         gap: theme.spacing(2),
         '& > :not(:first-of-type)': {
@@ -59,15 +59,15 @@ const useStyles = makeStyles()((theme) => ({
         },
     },
     cancelButton: {
-        color: theme.palette.maskColor.main,
-        backgroundColor: theme.palette.maskColor.thirdMain,
+        color: theme.vars.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.thirdMain,
         '&:hover': {
-            backgroundColor: theme.palette.maskColor.thirdMain,
+            backgroundColor: theme.vars.palette.maskColor.thirdMain,
         },
     },
     confirmButton: {
-        color: theme.palette.maskColor.bottom,
-        backgroundColor: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.main,
     },
     button: {
         flexGrow: 1,
diff --git a/packages/plugins/FileService/src/SiteAdaptor/components/UploadFile.tsx b/packages/plugins/FileService/src/SiteAdaptor/components/UploadFile.tsx
index b556b3ae268f..d5fd82c0037e 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/components/UploadFile.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/components/UploadFile.tsx
@@ -43,7 +43,7 @@ const useStyles = makeStyles()((theme) => ({
         marginRight: theme.spacing(1),
     },
     checked: {
-        color: theme.palette.maskColor.primary,
+        color: theme.vars.palette.maskColor.primary,
         boxShadow: '0px 4px 10px rgba(28, 104, 243, 0.2)',
     },
     label: {
@@ -53,7 +53,7 @@ const useStyles = makeStyles()((theme) => ({
     heading: {
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         margin: theme.spacing(3, 2, 0.5),
     },
     fileList: {
@@ -70,7 +70,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     emptyMessage: {
         fontSize: 14,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginTop: theme.spacing(1.5),
     },
 }))
@@ -136,7 +136,7 @@ export function UploadFile() {
                             color="primary"
                             checked={encrypted}
                             icon={<Icons.CheckboxBlank size={18} />}
-                            checkedIcon={<Icons.Checkbox color={theme.palette.maskColor.primary} size={18} />}
+                            checkedIcon={<Icons.Checkbox color={theme.vars.palette.maskColor.primary} size={18} />}
                             onChange={(event) => setEncrypted(event.target.checked)}
                         />
                     }
diff --git a/packages/plugins/FileService/src/SiteAdaptor/modals/ConfirmModal/ConfirmDialog.tsx b/packages/plugins/FileService/src/SiteAdaptor/modals/ConfirmModal/ConfirmDialog.tsx
index 5f2124d1b5e7..bc37c97be644 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/modals/ConfirmModal/ConfirmDialog.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/modals/ConfirmModal/ConfirmDialog.tsx
@@ -15,7 +15,7 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '120%',
         fontWeight: 700,
         marginTop: theme.spacing(3),
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     content: {
         display: 'flex',
@@ -33,21 +33,21 @@ const useStyles = makeStyles()((theme) => ({
         margin: theme.spacing(1.5, 0),
         lineHeight: '20px',
         fontSize: 14,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         wordBreak: 'break-all',
     },
     desc: {
         flexGrow: 1,
         fontSize: 14,
         textAlign: 'center',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginBottom: theme.spacing(1),
     },
     closeButton: {
         position: 'absolute',
         top: theme.spacing(2),
         right: theme.spacing(2),
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 
diff --git a/packages/plugins/FileService/src/SiteAdaptor/modals/RenameModal/RenameDialog.tsx b/packages/plugins/FileService/src/SiteAdaptor/modals/RenameModal/RenameDialog.tsx
index 7a6a67cb15bf..759fd6e4f71d 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/modals/RenameModal/RenameDialog.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/modals/RenameModal/RenameDialog.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '120%',
         fontWeight: 700,
         marginTop: theme.spacing(3),
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     content: {
         display: 'flex',
@@ -35,7 +35,7 @@ const useStyles = makeStyles()((theme) => ({
     message: {
         marginTop: theme.spacing(1.5),
         lineHeight: '18px',
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         fontSize: 14,
         fontWeight: 400,
     },
@@ -43,7 +43,7 @@ const useStyles = makeStyles()((theme) => ({
         flexGrow: 1,
         textAlign: 'center',
         width: '100%',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginTop: theme.spacing(4),
         boxSizing: 'border-box',
     },
@@ -57,7 +57,7 @@ const useStyles = makeStyles()((theme) => ({
         position: 'absolute',
         top: theme.spacing(2),
         right: theme.spacing(2),
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 
diff --git a/packages/plugins/Gitcoin/src/SiteAdaptor/PreviewCard.tsx b/packages/plugins/Gitcoin/src/SiteAdaptor/PreviewCard.tsx
index b0d1bf2b91ac..df0655b7b75d 100644
--- a/packages/plugins/Gitcoin/src/SiteAdaptor/PreviewCard.tsx
+++ b/packages/plugins/Gitcoin/src/SiteAdaptor/PreviewCard.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles()((theme) => ({
         flexDirection: 'column',
     },
     title: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 24,
         fontWeight: 700,
         lineHeight: '120%',
@@ -40,17 +40,17 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
         gap: 8,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     link: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     stats: {
         margin: theme.spacing(1.5, 0),
         padding: theme.spacing(1.5),
         display: 'flex',
         gap: 12,
-        background: theme.palette.maskColor.white,
+        background: theme.vars.palette.maskColor.white,
         borderRadius: 8,
         justifyContent: 'space-between',
     },
@@ -64,10 +64,10 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 24,
         fontWeight: 700,
         lineHeight: '120%',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     statsTitle: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 14,
         lineHeight: '18px',
     },
@@ -75,7 +75,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 18,
         fontWeight: 700,
         lineHeight: '22px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     rounds: {
         display: 'flex',
@@ -84,7 +84,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     round: {
         borderRadius: 12,
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         padding: theme.spacing(1.5),
         display: 'flex',
         flexDirection: 'column',
@@ -93,12 +93,12 @@ const useStyles = makeStyles()((theme) => ({
     roundName: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     roundStatus: {
         padding: theme.spacing(0.75, 1.5),
         borderRadius: 8,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 14,
         lineHeight: '18px',
     },
@@ -109,7 +109,7 @@ const useStyles = makeStyles()((theme) => ({
         '& p, & li': {
             margin: 0,
             fontSize: 12,
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
         '& p + p': {
             marginTop: theme.spacing(0.5),
@@ -117,13 +117,13 @@ const useStyles = makeStyles()((theme) => ({
         '& h1, & h2, & h3, & h4, & h5, & h6': {
             fontSize: 14,
             fontWeight: 500,
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
         '& img': {
             maxWidth: '100%',
         },
         '& a': {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
     },
     placeholder: {
@@ -135,11 +135,11 @@ const useStyles = makeStyles()((theme) => ({
     },
     placeholderTitle: {
         textAlign: 'center',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     tabContent: {
         paddingTop: 16,
-        background: theme.palette.maskColor.white,
+        background: theme.vars.palette.maskColor.white,
         borderRadius: '0 0 12px 12px',
     },
     panel: {
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/CheckSecurityDialog.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/CheckSecurityDialog.tsx
index 3156138fc78a..b839eb554c5d 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/CheckSecurityDialog.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/CheckSecurityDialog.tsx
@@ -30,10 +30,10 @@ const useStyles = makeStyles()((theme) => ({
     footer: {
         height: 56,
         boxSizing: 'border-box',
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                '0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
         padding: '8px',
         justifyContent: 'flex-end',
     },
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/CheckSecurityConfirmDialog.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/CheckSecurityConfirmDialog.tsx
index 2475fbd84fc3..c9f2cedeff9e 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/CheckSecurityConfirmDialog.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/CheckSecurityConfirmDialog.tsx
@@ -17,11 +17,11 @@ const useStyles = makeStyles()((theme) => ({
     intro: {
         fontSize: '14px',
         marginTop: '24px',
-        color: theme.palette.grey[700],
+        color: theme.vars.palette.grey[700],
     },
     confirmButton: {
-        backgroundColor: `${theme.palette.maskColor.warn} !important`,
-        color: theme.palette.maskColor.white,
+        backgroundColor: `${theme.vars.palette.maskColor.warn} !important`,
+        color: theme.vars.palette.maskColor.white,
         borderRadius: '99px',
     },
 }))
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/Footer.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/Footer.tsx
index f8b57dbb170f..ab80c93e1b58 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/Footer.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/Footer.tsx
@@ -13,7 +13,7 @@ export function Footer() {
                             <Typography
                                 sx={{
                                     fontSize: '14px',
-                                    color: (theme) => theme.palette.maskColor.second,
+                                    color: (theme) => theme.vars.palette.maskColor.second,
                                     fontWeight: '700',
                                     marginRight: '4px',
                                 }}>
@@ -22,7 +22,7 @@ export function Footer() {
                             <Typography
                                 sx={{
                                     fontSize: '14px',
-                                    color: (theme) => theme.palette.maskColor.main,
+                                    color: (theme) => theme.vars.palette.maskColor.main,
                                     fontWeight: '700',
                                     marginRight: '12px',
                                 }}>
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/NotFound.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/NotFound.tsx
index 3ac5f4cee8c7..6e89133cf4fc 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/NotFound.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/NotFound.tsx
@@ -1,4 +1,3 @@
-import { MaskColorVar } from '@masknet/theme'
 import { Stack, Typography } from '@mui/material'
 import { Trans } from '@lingui/react/macro'
 
@@ -6,17 +5,17 @@ export function NotFound() {
     return (
         <Stack sx={{ justifyContent: 'flex-start', alignItems: 'flex-start' }}>
             <Trans>
-                <Typography color={MaskColorVar.orangeMain} sx={{ fontSize: 12 }}>
+                <Typography sx={(theme) => ({ fontSize: 12, color: theme.vars.palette.maskColor.orangeMain })}>
                     Results not found now. it might be chain network error, on-chain data abnormal or the token address
                     is not covered now. please check as followings:
                 </Typography>
-                <Typography color={MaskColorVar.orangeMain} sx={{ fontSize: 12 }}>
+                <Typography sx={(theme) => ({ fontSize: 12, color: theme.vars.palette.maskColor.orangeMain })}>
                     1. Make sure network is working;
                 </Typography>
-                <Typography color={MaskColorVar.orangeMain} sx={{ fontSize: 12 }}>
+                <Typography sx={(theme) => ({ fontSize: 12, color: theme.vars.palette.maskColor.orangeMain })}>
                     2. Make sure the chain network or token address is correct;
                 </Typography>
-                <Typography color={MaskColorVar.orangeMain} sx={{ fontSize: 12 }}>
+                <Typography sx={(theme) => ({ fontSize: 12, color: theme.vars.palette.maskColor.orangeMain })}>
                     3. Token address is not covered now, it might take more than 60s to get contract information again.
                     Please try it later.
                 </Typography>
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskCard.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskCard.tsx
index 0d6ac63cb584..841e84ebd60b 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskCard.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskCard.tsx
@@ -8,10 +8,10 @@ import { useLingui } from '@lingui/react'
 const useStyles = makeStyles()((theme) => ({
     detectionCard: {
         borderRadius: 8,
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                '0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
         marginTop: '8px',
     },
     icon: {
@@ -29,7 +29,7 @@ const useStyles = makeStyles()((theme) => ({
     description: {
         fontSize: 16,
         fontWeight: 400,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
 }))
 
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskWarningDialog.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskWarningDialog.tsx
index c71d652bbf3d..11eb6cb4acb1 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskWarningDialog.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskWarningDialog.tsx
@@ -25,18 +25,21 @@ const useStyles = makeStyles()((theme) => ({
     },
     warningTitle: {
         marginTop: '22px',
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
         fontSize: '24px',
         fontWeight: '600',
     },
     tokenInfo: {
         marginTop: '16px',
-        backgroundColor: theme.palette.mode === 'light' ? '#f9f9f9' : '#1c1c1c',
+        backgroundColor: '#f9f9f9',
+        ...theme.applyStyles('dark', {
+            backgroundColor: '#1c1c1c',
+        }),
         borderRadius: '8px',
         padding: '12px',
     },
     link: {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         fontSize: 14,
         display: 'flex',
         alignItems: 'center',
@@ -44,10 +47,10 @@ const useStyles = makeStyles()((theme) => ({
     },
     actions: {
         padding: '16px',
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                '0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
         justifyContent: 'space-between',
         flexGrow: 1,
     },
@@ -99,8 +102,10 @@ export function RiskWarningDialog({ open, token, onSetDialog }: Props) {
                 </Stack>
                 <Stack sx={{ marginTop: '51px' }}>
                     <Trans>
-                        <Typography sx={{ color: (theme) => theme.palette.maskColor.danger }}>Dear Users,</Typography>
-                        <Typography sx={{ color: (theme) => theme.palette.maskColor.danger, marginTop: '16px' }}>
+                        <Typography sx={{ color: (theme) => theme.vars.palette.maskColor.danger }}>
+                            Dear Users,
+                        </Typography>
+                        <Typography sx={{ color: (theme) => theme.vars.palette.maskColor.danger, marginTop: '16px' }}>
                             Clicking the confirm button means that you agree to take the potential risks and proceed
                             with the transaction.
                         </Typography>
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SearchBox.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SearchBox.tsx
index ba804f08b2d4..649d139a9ec2 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SearchBox.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SearchBox.tsx
@@ -17,28 +17,28 @@ const useStyles = makeStyles()((theme) => ({
         width: '100%',
         height: '100%',
         fontWeight: 400,
-        borderColor: theme.palette.divider,
-        color: theme.palette.text.primary,
-        background: theme.palette.maskColor.input,
+        borderColor: theme.vars.palette.divider,
+        color: theme.vars.palette.text.primary,
+        background: theme.vars.palette.maskColor.input,
 
         '&:hover': {
-            background: theme.palette.maskColor.input,
+            background: theme.vars.palette.maskColor.input,
         },
     },
     searchButton: {
         borderRadius: 8,
     },
     search: {
-        background: theme.palette.maskColor.input,
+        background: theme.vars.palette.maskColor.input,
         height: 40,
         borderRadius: 8,
     },
     menu: {
-        background: theme.palette.maskColor.bottom,
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 4px 30px rgba(255, 255, 255, 0.15)'
-            :   '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        background: theme.vars.palette.maskColor.bottom,
+        boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 4px 30px rgba(255, 255, 255, 0.15)',
+        }),
     },
 }))
 
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx
index 2345f04d7a36..01227fae5958 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx
@@ -1,8 +1,7 @@
 import { memo, useMemo, useState } from 'react'
-import { Collapse, Link, Stack, Typography } from '@mui/material'
+import { Collapse, Link, Stack, Typography, useTheme } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material'
-import { useTheme } from '@mui/system'
 import { TokenIcon } from '@masknet/shared'
 import type { SecurityAPI } from '@masknet/web3-providers/types'
 import { Icons } from '@masknet/icons'
@@ -36,15 +35,15 @@ const useStyles = makeStyles()((theme) => ({
     tokenName: {
         fontSize: '18px',
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     tokenPrice: {
         fontSize: '18px',
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     itemTitle: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: 14,
     },
 }))
@@ -79,15 +78,15 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
             <Stack
                 spacing={1}
                 direction="row"
-                sx={{
+                sx={(theme) => ({
                     justifyContent: 'space-between',
-                    boxShadow: (theme) =>
-                        theme.palette.mode === 'light' ?
-                            ' 0px 0px 20px rgba(0, 0, 0, 0.05)'
-                        :   '0px 0px 20px rgba(255, 255, 255, 0.12);',
+                    boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+                    ...theme.applyStyles('dark', {
+                        boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+                    }),
                     padding: '16px',
                     borderRadius: '16px',
-                }}>
+                })}>
                 <Stack direction="row" spacing={0.8}>
                     {tokenSecurity?.token_name ?
                         <TokenIcon
@@ -160,7 +159,7 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
                             href={resolveGoLabLink(tokenSecurity.chainId, tokenSecurity.contract)}
                             target="_blank"
                             rel="noopener noreferrer">
-                            <Icons.LinkOut size={18} style={{ color: theme.palette.text.strong, marginTop: 2 }} />
+                            <Icons.LinkOut size={18} style={{ color: theme.vars.palette.text.strong, marginTop: 2 }} />
                         </Link>
                     </Stack>
                 </Stack>
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/TokenPanel.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/TokenPanel.tsx
index e4acdb0f31cc..803d66ac8522 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/TokenPanel.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/TokenPanel.tsx
@@ -1,5 +1,4 @@
-import { Link, Stack, Typography } from '@mui/material'
-import { useTheme } from '@mui/system'
+import { Link, Stack, Typography, useTheme } from '@mui/material'
 import { Icons } from '@masknet/icons'
 import { makeStyles } from '@masknet/theme'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
@@ -13,18 +12,18 @@ const useStyles = makeStyles()((theme) => ({
     card: {
         padding: 16,
         borderRadius: 9,
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                '0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
     },
     subtitle: {
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         fontWeight: 400,
         fontSize: 16,
     },
     cardValue: {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         fontSize: 16,
         fontWeight: 700,
     },
@@ -69,7 +68,7 @@ export function TokenPanel({ tokenSecurity, tokenMarketCap, ref }: TokenPanelPro
                             target="_blank"
                             rel="noopener noreferrer">
                             <Icons.LinkOut
-                                style={{ color: theme.palette.text.strong, width: 18, height: 18, marginTop: 2 }}
+                                style={{ color: theme.vars.palette.text.strong, width: 18, height: 18, marginTop: 2 }}
                             />
                         </Link>
                     </Stack>
@@ -94,7 +93,12 @@ export function TokenPanel({ tokenSecurity, tokenMarketCap, ref }: TokenPanelPro
                                 target="_blank"
                                 rel="noopener noreferrer">
                                 <Icons.LinkOut
-                                    style={{ color: theme.palette.text.strong, width: 18, height: 18, marginTop: 2 }}
+                                    style={{
+                                        color: theme.vars.palette.text.strong,
+                                        width: 18,
+                                        height: 18,
+                                        marginTop: 2,
+                                    }}
                                 />
                             </Link>
                         :   null}
@@ -119,7 +123,7 @@ export function TokenPanel({ tokenSecurity, tokenMarketCap, ref }: TokenPanelPro
                                 )}
                                 target="_blank"
                                 rel="noopener noreferrer">
-                                <Icons.LinkOut size={14} color={theme.palette.text.strong} />
+                                <Icons.LinkOut size={14} color={theme.vars.palette.text.strong} />
                             </Link>
                         :   null}
                     </Stack>
diff --git a/packages/plugins/Handle/src/SiteAdaptor/PluginHeader.tsx b/packages/plugins/Handle/src/SiteAdaptor/PluginHeader.tsx
index c2e30a2a2b50..641baa0a06b9 100644
--- a/packages/plugins/Handle/src/SiteAdaptor/PluginHeader.tsx
+++ b/packages/plugins/Handle/src/SiteAdaptor/PluginHeader.tsx
@@ -1,6 +1,6 @@
 import { PluginID } from '@masknet/shared-base'
 import { Icons } from '@masknet/icons'
-import { makeStyles, MaskColorVar } from '@masknet/theme'
+import { makeStyles } from '@masknet/theme'
 import { Link, Stack, Typography, useTheme } from '@mui/material'
 import { Box } from '@mui/system'
 import { useActivatedPluginSiteAdaptor } from '@masknet/plugin-infra/content-script'
@@ -17,7 +17,10 @@ const useStyles = makeStyles()((theme) => ({
     },
 
     providerBy: {
-        color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
+        ...theme.applyStyles('dark', {
+            color: theme.vars.palette.grey[700],
+        }),
         display: 'flex',
         alignItems: 'center',
         gap: theme.spacing(0.5),
@@ -45,7 +48,7 @@ export function PluginHeader() {
             sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
             <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', gap: 0.5, alignItems: 'center' }}>
                 <Icons.DecentralizedSearch size={24} />
-                <Typography color={theme.palette.maskColor.dark} sx={{ fontWeight: 'bolder' }}>
+                <Typography color={theme.vars.palette.maskColor.dark} sx={{ fontWeight: 'bolder' }}>
                     <Trans>DSearch</Trans>
                 </Typography>
             </Stack>
@@ -62,14 +65,14 @@ export function PluginHeader() {
                                     fontWeight: '700',
                                 }}
                                 component="span"
-                                color={MaskColorVar.textPluginColor}>
+                                color={theme.vars.palette.maskColor.textPluginColor}>
                                 Mask Network
                                 <Link
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     href="https://mask.io"
                                     sx={{ fontSize: 0 }}
-                                    color={MaskColorVar.textPluginColor}>
+                                    color={theme.vars.palette.maskColor.textPluginColor}>
                                     <Icons.LinkOut size={20} />
                                 </Link>
                             </Typography>
diff --git a/packages/plugins/Handle/src/SiteAdaptor/SearchResultInspector.tsx b/packages/plugins/Handle/src/SiteAdaptor/SearchResultInspector.tsx
index d483988293ea..4619cdc6676c 100644
--- a/packages/plugins/Handle/src/SiteAdaptor/SearchResultInspector.tsx
+++ b/packages/plugins/Handle/src/SiteAdaptor/SearchResultInspector.tsx
@@ -6,7 +6,7 @@ import { MaskLightTheme, MaskThemeProvider, makeStyles } from '@masknet/theme'
 import { ScopedDomainsContainer } from '@masknet/web3-hooks-base'
 import { EVMUtils } from '@masknet/web3-providers'
 import { ChainId, formatEthereumAddress } from '@masknet/web3-shared-evm'
-import { Box, Link, Typography, type Theme } from '@mui/material'
+import { Box, Link, Typography } from '@mui/material'
 import { memo, useContext, useEffect } from 'react'
 import { SuffixToChainIconMap, SuffixToChainIdMap } from '../constants.js'
 import { ENSContext, ENSProvider, type SearchResultInspectorProps } from './context.js'
@@ -28,14 +28,14 @@ const useStyles = makeStyles()((theme) => {
         },
         domain: {
             fontWeight: 700,
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
             fontSize: 18,
             lineHeight: '18px',
         },
         reversedAddress: {
             display: 'flex',
             alignItems: 'center',
-            color: theme.palette.maskColor.secondaryDark,
+            color: theme.vars.palette.maskColor.secondaryDark,
             fontSize: 14,
             lineHeight: '18px',
         },
@@ -47,7 +47,7 @@ const useStyles = makeStyles()((theme) => {
         reversedAddressIcon: {
             marginRight: 2,
             cursor: 'pointer',
-            color: theme.palette.maskColor.secondaryDark,
+            color: theme.vars.palette.maskColor.secondaryDark,
             lineHeight: 0,
         },
         accounts: {
@@ -62,13 +62,13 @@ const useStyles = makeStyles()((theme) => {
             alignItems: 'flex-end',
         },
         label: {
-            color: theme.palette.maskColor.publicSecond,
+            color: theme.vars.palette.maskColor.publicSecond,
             fontSize: 14,
             fontWeight: 400,
             lineHeight: '18px',
         },
         value: {
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
             fontSize: 16,
             fontWeight: 700,
             lineHeight: '20px',
diff --git a/packages/plugins/ProfileCard/src/SiteAdaptor/AvatarBadge/ProfileAvatarBadge.tsx b/packages/plugins/ProfileCard/src/SiteAdaptor/AvatarBadge/ProfileAvatarBadge.tsx
index ca1370647280..36ee861e4147 100644
--- a/packages/plugins/ProfileCard/src/SiteAdaptor/AvatarBadge/ProfileAvatarBadge.tsx
+++ b/packages/plugins/ProfileCard/src/SiteAdaptor/AvatarBadge/ProfileAvatarBadge.tsx
@@ -7,7 +7,7 @@ import { useEffect, useRef } from 'react'
 const useStyles = makeStyles()((theme) => ({
     badge: {
         padding: 0,
-        boxShadow: `0 0 0 1px ${theme.palette.maskColor.bottom}`,
+        boxShadow: `0 0 0 1px ${theme.vars.palette.maskColor.bottom}`,
     },
 }))
 
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/FinanceFeed.tsx b/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/FinanceFeed.tsx
index 60f449417008..18b4dc47acbf 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/FinanceFeed.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/FinanceFeed.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles()((theme) => ({
         cursor: 'pointer',
         padding: theme.spacing(1.5),
         '&:hover': {
-            backgroundColor: theme.palette.maskColor.bg,
+            backgroundColor: theme.vars.palette.maskColor.bg,
         },
     },
     header: {
@@ -29,7 +29,7 @@ const useStyles = makeStyles()((theme) => ({
     timestamp: {
         fontSize: 14,
         fontWeight: 400,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
     },
 }))
 
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/index.tsx b/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/index.tsx
index b097c25595b4..8db583d080a2 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/index.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/index.tsx
@@ -12,7 +12,7 @@ import { useFinanceFeeds } from './useFinanceFeeds.js'
 
 const useStyles = makeStyles()((theme) => ({
     loading: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     skeleton: {
         borderRadius: theme.spacing(1),
@@ -51,7 +51,7 @@ export const FinanceFeeds = memo<FinanceFeedsProps>(function FinanceFeeds({ addr
     if (error && !feeds.length)
         return (
             <Box sx={{ p: 2, boxSizing: 'border-box' }}>
-                <Box sx={{ mt: '100px', color: (theme) => theme.palette.maskColor.main }}>
+                <Box sx={{ mt: '100px', color: (theme) => theme.vars.palette.maskColor.main }}>
                     <ReloadStatus onRetry={fetchNextPage} />
                 </Box>
             </Box>
@@ -88,7 +88,8 @@ export const FinanceFeeds = memo<FinanceFeedsProps>(function FinanceFeeds({ addr
                             <LoadingBase className={classes.loading} />
                         :   null}
                     </ElementAnchor>
-                :   <Typography sx={{ color: (theme) => theme.palette.maskColor.second, textAlign: 'center', py: 2 }}>
+                :   <Typography
+                        sx={{ color: (theme) => theme.vars.palette.maskColor.second, textAlign: 'center', py: 2 }}>
                         <Trans>No more data available.</Trans>
                     </Typography>
                 }
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/SocialFeed.tsx b/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/SocialFeed.tsx
index 45abbdb0adab..0530b953daf5 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/SocialFeed.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/SocialFeed.tsx
@@ -21,7 +21,7 @@ const useStyles = makeStyles<void, 'image' | 'markdown' | 'failedImage' | 'body'
             cursor: 'pointer',
             padding: theme.spacing(1.5),
             '&:hover': {
-                backgroundColor: theme.palette.maskColor.bg,
+                backgroundColor: theme.vars.palette.maskColor.bg,
             },
             [`.${refs.markdown}`]: {
                 display: '-webkit-box',
@@ -41,7 +41,7 @@ const useStyles = makeStyles<void, 'image' | 'markdown' | 'failedImage' | 'body'
         timestamp: {
             fontSize: 14,
             fontWeight: 400,
-            color: theme.palette.maskColor.third,
+            color: theme.vars.palette.maskColor.third,
         },
         body: {
             display: 'flex',
@@ -64,7 +64,7 @@ const useStyles = makeStyles<void, 'image' | 'markdown' | 'failedImage' | 'body'
             },
         },
         summary: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             display: 'flex',
             alignItems: 'center',
             whiteSpace: 'pre',
@@ -83,14 +83,14 @@ const useStyles = makeStyles<void, 'image' | 'markdown' | 'failedImage' | 'body'
             },
         },
         playButton: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             width: 64,
             height: 64,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             flexShrink: 0,
-            backgroundColor: theme.palette.maskColor.bg,
+            backgroundColor: theme.vars.palette.maskColor.bg,
             [`& + .${refs.markdown}`]: {
                 marginLeft: theme.spacing(1.5),
             },
@@ -133,14 +133,14 @@ const useStyles = makeStyles<void, 'image' | 'markdown' | 'failedImage' | 'body'
         },
         line: {
             width: 1,
-            borderLeft: `1px solid ${theme.palette.maskColor.line}`,
+            borderLeft: `1px solid ${theme.vars.palette.maskColor.line}`,
             marginLeft: 10,
         },
         target: {
             display: 'flex',
             alignItems: 'center',
             padding: theme.spacing(1, 0),
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             fontSize: 14,
             [`.${refs.image}`]: {
                 width: 120,
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/index.tsx b/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/index.tsx
index 0d01ee342883..f714bfebcf8d 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/index.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/SocialFeeds/index.tsx
@@ -9,7 +9,7 @@ import { SocialFeed } from './SocialFeed.js'
 
 const useStyles = makeStyles()((theme) => ({
     loading: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     skeleton: {
         borderRadius: theme.spacing(1),
@@ -27,7 +27,7 @@ export const SocialFeeds = memo<SocialFeedsProps>(function SocialFeeds({ userId,
     if (error && !feeds.length)
         return (
             <Box sx={{ p: 2, boxSizing: 'border-box' }}>
-                <Box sx={{ mt: '100px', color: (theme) => theme.palette.maskColor.main }}>
+                <Box sx={{ mt: '100px', color: (theme) => theme.vars.palette.maskColor.main }}>
                     <ReloadStatus onRetry={fetchNextPage} />
                 </Box>
             </Box>
@@ -63,7 +63,7 @@ export const SocialFeeds = memo<SocialFeedsProps>(function SocialFeeds({ userId,
                         <LoadingBase className={classes.loading} />
                     :   null}
                 </ElementAnchor>
-            :   <Typography sx={{ color: (theme) => theme.palette.maskColor.second, textAlign: 'center', py: 2 }}>
+            :   <Typography sx={{ color: (theme) => theme.vars.palette.maskColor.second, textAlign: 'center', py: 2 }}>
                     <Trans>No more data available.</Trans>
                 </Typography>
             }
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/CommentAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/CommentAction.tsx
index 6d3f737c9d46..438c15f82929 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/CommentAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/CommentAction.tsx
@@ -12,7 +12,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(1),
     },
     summary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
         whiteSpace: 'pre',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/DonationAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/DonationAction.tsx
index 8add621301c8..2204b07e8ed9 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/DonationAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/DonationAction.tsx
@@ -8,7 +8,7 @@ import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     summary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
         whiteSpace: 'pre',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/LiquidityAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/LiquidityAction.tsx
index 4c4c36c9eee4..54a63f9476d2 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/LiquidityAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/LiquidityAction.tsx
@@ -10,7 +10,7 @@ import { Select, Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     summary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
         whiteSpace: 'pre',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/NoteAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/NoteAction.tsx
index be4852d5d6e6..c9cf85e8afaa 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/NoteAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/NoteAction.tsx
@@ -9,7 +9,7 @@ import { Select, Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     summary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
         whiteSpace: 'pre',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileAction.tsx
index 72e0d2e79d07..1456a435531d 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileAction.tsx
@@ -8,7 +8,7 @@ import { Select, Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     summary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
         whiteSpace: 'pre',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileLinkAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileLinkAction.tsx
index d0fbf974e2d6..01f8c3c85618 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileLinkAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileLinkAction.tsx
@@ -9,7 +9,7 @@ import { Select, Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     summary: {
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         fontSize: 14,
         display: 'flex',
         alignItems: 'center',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileProxy.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileProxy.tsx
index dc9ef90c669e..7cf9d8791ebb 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileProxy.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProfileProxy.tsx
@@ -8,7 +8,7 @@ import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     summary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
         whiteSpace: 'pre',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProposeAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProposeAction.tsx
index 16c665b0ad1b..abd3f2af29ed 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProposeAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/ProposeAction.tsx
@@ -8,7 +8,7 @@ import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     summary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
     },
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/StakingAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/StakingAction.tsx
index 6a41ec706816..83043c88642f 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/StakingAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/StakingAction.tsx
@@ -9,7 +9,7 @@ import { Select, Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     summary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
         whiteSpace: 'pre',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenApprovalAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenApprovalAction.tsx
index 7edf9c807ee2..26c8bf1482eb 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenApprovalAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenApprovalAction.tsx
@@ -11,7 +11,7 @@ import { Select, Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     summary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
         whiteSpace: 'pre',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenBridgeAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenBridgeAction.tsx
index c7b4399ff053..8762573122f2 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenBridgeAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenBridgeAction.tsx
@@ -8,7 +8,7 @@ import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     summary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
         whiteSpace: 'pre',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenOperationAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenOperationAction.tsx
index e0e820dbbaa0..8b15dc03b69c 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenOperationAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenOperationAction.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(1),
     },
     action: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
         overflow: 'auto',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenSwapAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenSwapAction.tsx
index 0bb45280d7a5..b7552050c36f 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenSwapAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/TokenSwapAction.tsx
@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(1),
     },
     summary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
         overflow: 'auto',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/UnknownAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/UnknownAction.tsx
index a5b049194f00..bc17df5fe76d 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/UnknownAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/UnknownAction.tsx
@@ -8,7 +8,7 @@ import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     summary: {
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
     },
 }))
 
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/VoteAction.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/VoteAction.tsx
index a3008ed2cd94..97f32690fa8a 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/VoteAction.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedActions/VoteAction.tsx
@@ -10,7 +10,7 @@ import { Trans } from '@lingui/react/macro'
 const useStyles = makeStyles()((theme) => ({
     summary: {
         fontSize: 14,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         textOverflow: 'ellipsis',
         whiteSpace: 'pre',
         overflow: 'auto',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/CommentCard.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/CommentCard.tsx
index 86edcacdacbf..73c796eab2a1 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/CommentCard.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/CommentCard.tsx
@@ -12,7 +12,7 @@ import { CardType } from '../share.js'
 
 const useStyles = makeStyles<void, 'image' | 'verbose' | 'content' | 'failedImage'>()((theme, _, refs) => ({
     summary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
         alignItems: 'center',
         whiteSpace: 'pre',
@@ -23,7 +23,7 @@ const useStyles = makeStyles<void, 'image' | 'verbose' | 'content' | 'failedImag
         },
     },
     comment: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         marginTop: theme.spacing(1),
         fontSize: 14,
         wordBreak: 'break-word',
@@ -40,14 +40,14 @@ const useStyles = makeStyles<void, 'image' | 'verbose' | 'content' | 'failedImag
     },
     line: {
         width: 1,
-        borderLeft: `1px solid ${theme.palette.maskColor.line}`,
+        borderLeft: `1px solid ${theme.vars.palette.maskColor.line}`,
         marginLeft: 10,
     },
     target: {
         display: 'flex',
         alignItems: 'center',
         padding: theme.spacing(1, 0),
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 14,
         [`.${refs.image}`]: {
             width: 120,
@@ -86,7 +86,7 @@ const useStyles = makeStyles<void, 'image' | 'verbose' | 'content' | 'failedImag
         margin: theme.spacing(0.5, 0),
     },
     content: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         lineHeight: '18px',
         fontSize: 14,
         overflow: 'hidden',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/DonationCard.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/DonationCard.tsx
index b88c9551d761..014fb7a904eb 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/DonationCard.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/DonationCard.tsx
@@ -17,8 +17,8 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 4,
         marginLeft: theme.spacing(1.5),
         fontSize: 12,
-        backgroundColor: theme.palette.maskColor.main,
-        color: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.bottom,
         padding: '0 6px',
     },
     content: {
@@ -26,7 +26,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         fontWeight: 400,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         WebkitBoxOrient: 'vertical',
         WebkitLineClamp: 2,
         overflow: 'hidden',
@@ -43,7 +43,7 @@ const useStyles = makeStyles()((theme) => ({
         flexDirection: 'column',
         justifyContent: 'center',
         fontSize: 14,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         lineHeight: '18px',
         marginLeft: theme.spacing(1.5),
         height: 80,
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/NoteCard.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/NoteCard.tsx
index 04d8416c555d..1b2f2f8edc4c 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/NoteCard.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/NoteCard.tsx
@@ -19,7 +19,7 @@ const useStyles = makeStyles<
     title: {
         fontWeight: 700,
         marginTop: theme.spacing(1),
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     info: {},
     center: {
@@ -43,14 +43,14 @@ const useStyles = makeStyles<
         },
     },
     playButton: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         width: 64,
         height: 64,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         flexShrink: 0,
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         [`& + .${refs.info}`]: {
             marginLeft: theme.spacing(1.5),
         },
@@ -70,7 +70,7 @@ const useStyles = makeStyles<
     content: {
         marginTop: theme.spacing(1),
         fontSize: 14,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         lineHeight: '18px',
         maxHeight: 80,
         overflow: 'hidden',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProfileCard.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProfileCard.tsx
index f65a4429fdaf..b86179a236a4 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProfileCard.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProfileCard.tsx
@@ -43,7 +43,7 @@ const useStyles = makeStyles<void, 'image' | 'verbose' | 'info' | 'center'>()((t
         flexDirection: 'column',
         justifyContent: 'center',
         fontSize: 14,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         lineHeight: '18px',
         marginLeft: theme.spacing(1.5),
     },
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProfileLinkCard.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProfileLinkCard.tsx
index 30aeea718de2..3c8c7f3ac438 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProfileLinkCard.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProfileLinkCard.tsx
@@ -30,7 +30,7 @@ const useStyles = makeStyles<void, 'body'>()((theme, _, refs) => ({
         alignItems: 'center',
     },
     name: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         fontSize: 14,
         marginLeft: theme.spacing(1),
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProfileProxy.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProfileProxy.tsx
index 3f0f27c4eff5..3ef81f7c93b2 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProfileProxy.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProfileProxy.tsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles<void, 'body'>()((theme, _, refs) => ({
         alignItems: 'center',
     },
     name: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         marginLeft: theme.spacing(1),
     },
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProposeCard.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProposeCard.tsx
index ff9439339ec2..f471989234e8 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProposeCard.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/ProposeCard.tsx
@@ -8,12 +8,12 @@ import { ProposeAction } from '../FeedActions/ProposeAction.js'
 const useStyles = makeStyles()((theme) => ({
     title: {
         marginTop: theme.spacing(1),
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     content: {
         marginTop: theme.spacing(1),
         fontSize: 14,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         lineHeight: '18px',
         marginLeft: theme.spacing(1.5),
         maxHeight: 80,
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/VoteCard.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/VoteCard.tsx
index a0d2c38ee214..dcc99761555e 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/VoteCard.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/VoteCard.tsx
@@ -12,13 +12,13 @@ import { useMarkdownStyles } from '../../hooks/useMarkdownStyles.js'
 const useStyles = makeStyles()((theme) => ({
     title: {
         marginTop: theme.spacing(1.5),
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
     },
     content: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         whiteSpace: 'pre-wrap',
         maxHeight: '3em',
         display: '-webkit-box',
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/Slider.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/Slider.tsx
index c59a1db1a33c..ad76376bbe5a 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/Slider.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/Slider.tsx
@@ -23,7 +23,7 @@ const useStyles = makeStyles<void, 'active'>()((theme, _, refs) => ({
         gap: 1.5,
         margin: 'auto',
         [`.${refs.active}`]: {
-            backgroundColor: theme.palette.maskColor.second,
+            backgroundColor: theme.vars.palette.maskColor.second,
         },
     },
     indicator: {
@@ -31,7 +31,7 @@ const useStyles = makeStyles<void, 'active'>()((theme, _, refs) => ({
         height: 3,
         display: 'inline-block',
         borderRadius: '50%',
-        backgroundColor: theme.palette.maskColor.third,
+        backgroundColor: theme.vars.palette.maskColor.third,
     },
     active: {},
 }))
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/base.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/base.tsx
index 9ed869870543..18fbd54aae98 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/base.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/base.tsx
@@ -28,7 +28,7 @@ const useStyles = makeStyles()((theme) => ({
     clickable: {
         cursor: 'pointer',
         '&:hover': {
-            backgroundColor: theme.palette.maskColor.bg,
+            backgroundColor: theme.vars.palette.maskColor.bg,
         },
     },
     header: {
@@ -39,7 +39,7 @@ const useStyles = makeStyles()((theme) => ({
     timestamp: {
         fontSize: 14,
         fontWeight: 400,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
     },
     body: {
         marginTop: theme.spacing(1.5),
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/common.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/common.tsx
index 14972467d229..cd3ed24b9532 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/common.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/common.tsx
@@ -12,12 +12,12 @@ import { UserAvatar } from './UserAvatar/index.js'
 
 const useStyles = makeStyles()((theme) => ({
     label: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         whiteSpace: 'nowrap',
     },
     link: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
     },
 }))
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/hooks/useMarkdownStyles.ts b/packages/plugins/RSS3/src/SiteAdaptor/hooks/useMarkdownStyles.ts
index f8ac1b9d4141..cb4732172d08 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/hooks/useMarkdownStyles.ts
+++ b/packages/plugins/RSS3/src/SiteAdaptor/hooks/useMarkdownStyles.ts
@@ -12,13 +12,13 @@ export const useMarkdownStyles = makeStyles()((theme) => ({
             maxWidth: '100%',
         },
         a: {
-            color: theme.palette.maskColor.highlight,
+            color: theme.vars.palette.maskColor.highlight,
         },
         pre: {
             overflow: 'auto',
         },
         p: {
-            color: theme.palette.text.secondary,
+            color: theme.vars.palette.text.secondary,
         },
         '& p, & li': {
             fontSize: 14,
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/modals/DetailsModal/TxDetails.tsx b/packages/plugins/RSS3/src/SiteAdaptor/modals/DetailsModal/TxDetails.tsx
index a36cd94ba408..9f2b0ac944b4 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/modals/DetailsModal/TxDetails.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/modals/DetailsModal/TxDetails.tsx
@@ -23,7 +23,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(3),
     },
     key: {
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         fontSize: 14,
         width: 80,
     },
@@ -35,10 +35,10 @@ const useStyles = makeStyles()((theme) => ({
         wordBreak: 'break-all',
     },
     sep: {
-        borderTop: `1px dashed ${theme.palette.maskColor.secondaryLine}`,
+        borderTop: `1px dashed ${theme.vars.palette.maskColor.secondaryLine}`,
         marginTop: theme.spacing(3),
         marginBottom: theme.spacing(3),
-        backgroundColor: theme.palette.divider,
+        backgroundColor: theme.vars.palette.divider,
     },
     title: {
         display: 'flex',
@@ -46,7 +46,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(1),
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         margin: theme.spacing(3, 0),
     },
     tags: {
@@ -56,11 +56,11 @@ const useStyles = makeStyles()((theme) => ({
     tag: {
         padding: '4px 6px',
         borderRadius: 4,
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         fontSize: 13,
         lineHeight: '18px',
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         textTransform: 'capitalize',
     },
     blockieIcon: {
@@ -100,7 +100,7 @@ export function TxDetails({ feed }: TxDetailsProps) {
                     <Typography
                         className={classes.value}
                         component="div"
-                        style={{ display: 'block', color: theme.palette.maskColor.second, marginLeft: 4 }}>
+                        style={{ display: 'block', color: theme.vars.palette.maskColor.second, marginLeft: 4 }}>
                         {feed.id}
                         <CopyButton text={feed.id} size={20} />
                     </Typography>
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/modals/FinanceFeedDetailsModal/TxDetails.tsx b/packages/plugins/RSS3/src/SiteAdaptor/modals/FinanceFeedDetailsModal/TxDetails.tsx
index ab72b21a2d8b..1f68609f9a5c 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/modals/FinanceFeedDetailsModal/TxDetails.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/modals/FinanceFeedDetailsModal/TxDetails.tsx
@@ -25,7 +25,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(3),
     },
     key: {
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         fontSize: 14,
         width: 80,
     },
@@ -37,10 +37,10 @@ const useStyles = makeStyles()((theme) => ({
         wordBreak: 'break-all',
     },
     sep: {
-        borderTop: `1px dashed ${theme.palette.maskColor.secondaryLine}`,
+        borderTop: `1px dashed ${theme.vars.palette.maskColor.secondaryLine}`,
         marginTop: theme.spacing(3),
         marginBottom: theme.spacing(3),
-        backgroundColor: theme.palette.divider,
+        backgroundColor: theme.vars.palette.divider,
     },
     title: {
         display: 'flex',
@@ -48,17 +48,17 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(1),
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         margin: theme.spacing(3, 0),
     },
     tag: {
         padding: '4px 6px',
         borderRadius: 4,
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         fontSize: 13,
         lineHeight: '18px',
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         textTransform: 'capitalize',
     },
 }))
@@ -96,7 +96,7 @@ export function TxDetails({ transaction: tx }: TxDetailsProps) {
                     <Typography
                         className={classes.value}
                         component="div"
-                        style={{ display: 'block', color: theme.palette.maskColor.second, marginLeft: 4 }}>
+                        style={{ display: 'block', color: theme.vars.palette.maskColor.second, marginLeft: 4 }}>
                         {tx.hash}
                         <CopyButton text={tx.hash!} size={20} />
                     </Typography>
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/Conditions/index.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/Conditions/index.tsx
index 041e36a7fd4a..e4225320c157 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/Conditions/index.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/Conditions/index.tsx
@@ -36,7 +36,7 @@ const useStyles = makeStyles<void, 'assetName'>()((theme) => ({
     },
     closeButton: {
         position: 'absolute',
-        color: theme.palette.common.white,
+        color: theme.vars.palette.common.white,
         padding: 0,
         right: -15,
         top: -15,
@@ -75,7 +75,7 @@ const useStyles = makeStyles<void, 'assetName'>()((theme) => ({
         fontSize: 16,
         fontWeight: 400,
         lineHeight: '20px',
-        color: theme.palette.common.white,
+        color: theme.vars.palette.common.white,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         display: '-webkit-box',
@@ -100,7 +100,7 @@ const useStyles = makeStyles<void, 'assetName'>()((theme) => ({
         },
     },
     unsatisfied: {
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         fontSize: 12,
         fontWeight: 700,
         lineHeight: '16px',
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/OperationFooter.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/OperationFooter.tsx
index 3a29466fe188..42bd7d9076be 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/OperationFooter.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/OperationFooter.tsx
@@ -23,11 +23,11 @@ const useStyles = makeStyles()((theme) => {
             },
         },
         actionButton: {
-            backgroundColor: theme.palette.maskColor.dark,
+            backgroundColor: theme.vars.palette.maskColor.dark,
             width: '100%',
             color: 'white',
             '&:hover': {
-                backgroundColor: theme.palette.maskColor.dark,
+                backgroundColor: theme.vars.palette.maskColor.dark,
             },
         },
     }
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx
index 7607670dedf2..bd3c44b7c93b 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx
@@ -36,7 +36,7 @@ const useStyles = makeStyles()((theme) => {
             display: 'flex',
             backgroundColor: 'transparent',
             backgroundRepeat: 'no-repeat',
-            color: theme.palette.common.white,
+            color: theme.vars.palette.common.white,
             flexDirection: 'column',
             gap: theme.spacing(2),
             justifyContent: 'space-between',
@@ -60,7 +60,7 @@ const useStyles = makeStyles()((theme) => {
             borderRadius: 99,
             fontSize: 14,
             fontWeight: 700,
-            backgroundColor: theme.palette.maskColor.dark,
+            backgroundColor: theme.vars.palette.maskColor.dark,
             color: 'white',
             cursor: 'pointer',
             textDecoration: 'none !important',
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/OperationFooter.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/OperationFooter.tsx
index 58d1cd751a51..1eccf858afdc 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/OperationFooter.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/OperationFooter.tsx
@@ -82,11 +82,11 @@ export function OperationFooter({
         return (
             <ActionButton
                 sx={{
-                    backgroundColor: theme.palette.maskColor.dark,
+                    backgroundColor: theme.vars.palette.maskColor.dark,
                     width: '100%',
                     color: 'white',
                     '&:hover': {
-                        backgroundColor: theme.palette.maskColor.dark,
+                        backgroundColor: theme.vars.palette.maskColor.dark,
                     },
                 }}
                 variant="roundedDark"
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketCard.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketCard.tsx
index 000f884b5b33..3f7d5057e3f4 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketCard.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketCard.tsx
@@ -30,7 +30,7 @@ const useStyles = makeStyles()((theme) => {
             display: 'flex',
             backgroundColor: 'transparent',
             backgroundRepeat: 'no-repeat',
-            color: theme.palette.common.white,
+            color: theme.vars.palette.common.white,
             flexDirection: 'column',
             gap: theme.spacing(2),
             justifyContent: 'space-between',
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/CreateRedpacket.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/CreateRedpacket.tsx
index a7694ce8ed88..ca46a30342b2 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/CreateRedpacket.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/CreateRedpacket.tsx
@@ -12,7 +12,7 @@ import {
     WalletConnectedBoundary,
 } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
-import { ActionButton, makeStyles, RadioIndicator } from '@masknet/theme'
+import { alpha, ActionButton, makeStyles, RadioIndicator } from '@masknet/theme'
 import { useChainContext, useEnvironmentContext, useNativeTokenPrice } from '@masknet/web3-hooks-base'
 import { SolanaChainResolver } from '@masknet/web3-providers'
 import {
@@ -26,7 +26,7 @@ import {
     ZERO,
 } from '@masknet/web3-shared-base'
 import { type ChainId, isNativeTokenAddress, type SchemaType } from '@masknet/web3-shared-solana'
-import { alpha, Box, InputBase, inputBaseClasses, Typography, useTheme } from '@mui/material'
+import { Box, InputBase, inputBaseClasses, Typography, useTheme } from '@mui/material'
 import type { Cluster } from '@solana/web3.js'
 import { BigNumber } from 'bignumber.js'
 import { type ChangeEvent, useCallback, useMemo } from 'react'
@@ -80,7 +80,7 @@ const useStyles = makeStyles()((theme) => ({
         position: 'absolute',
         top: 10,
         left: 12,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     inputIcon: {
         position: 'absolute',
@@ -98,7 +98,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         width: '50%',
         alignItems: 'center',
-        color: theme.palette.maskColor.line,
+        color: theme.vars.palette.maskColor.line,
         cursor: 'pointer',
     },
     checkIconWrapper: {
@@ -117,7 +117,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     deleteButton: {
         cursor: 'pointer',
@@ -130,8 +130,8 @@ const useStyles = makeStyles()((theme) => ({
         display: 'inline-flex',
         alignItems: 'center',
         justifyContent: 'center',
-        color: theme.palette.maskColor.bottom,
-        backgroundColor: alpha(theme.palette.maskColor.main, 0.8),
+        color: theme.vars.palette.maskColor.bottom,
+        backgroundColor: alpha(theme.vars.palette.maskColor.main, 0.8),
         borderRadius: 4,
         padding: 0,
         border: 0,
@@ -154,10 +154,10 @@ const useStyles = makeStyles()((theme) => ({
         display: 'inline-flex',
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: theme.palette.maskColor.thirdMain,
+        backgroundColor: theme.vars.palette.maskColor.thirdMain,
     },
     selectedCover: {
-        boxShadow: `0 0 0 2px ${theme.palette.maskColor.main}`,
+        boxShadow: `0 0 0 2px ${theme.vars.palette.maskColor.main}`,
     },
     preview: {
         width: 484,
@@ -315,7 +315,7 @@ export function CreateSolRedPacket() {
                             <RadioIndicator checked={isRandom} size={20} />
                         </div>
                         <Typography
-                            color={isRandom ? theme.palette.maskColor.main : theme.palette.maskColor.second}
+                            color={isRandom ? theme.vars.palette.maskColor.main : theme.vars.palette.maskColor.second}
                             sx={{
                                 fontSize: 16,
                                 fontWeight: isRandom ? 700 : 400,
@@ -328,7 +328,7 @@ export function CreateSolRedPacket() {
                             <RadioIndicator checked={!isRandom} size={20} />
                         </div>
                         <Typography
-                            color={isRandom ? theme.palette.maskColor.second : theme.palette.maskColor.main}
+                            color={isRandom ? theme.vars.palette.maskColor.second : theme.vars.palette.maskColor.main}
                             sx={{
                                 fontSize: 16,
                                 fontWeight: isRandom ? 400 : 700,
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/RedpacketConfirm.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/RedpacketConfirm.tsx
index 1b389018039e..ff379370f4f9 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/RedpacketConfirm.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/RedpacketConfirm.tsx
@@ -53,7 +53,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     fieldValue: {
         marginLeft: 'auto',
@@ -63,7 +63,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     value: {
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     envelope: {
         width: 484,
@@ -77,8 +77,8 @@ const useStyles = makeStyles()((theme) => ({
         maxWidth: 568,
         fontWeight: 300,
         borderRadius: 8,
-        backgroundColor: theme.palette.maskColor.bg,
-        color: theme.palette.text.primary,
+        backgroundColor: theme.vars.palette.maskColor.bg,
+        color: theme.vars.palette.text.primary,
         padding: 12,
     },
     controller: {
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/ClaimOnFirefly.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/ClaimOnFirefly.tsx
index 51c4181e0a8c..82aed21c66a7 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/components/ClaimOnFirefly.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/components/ClaimOnFirefly.tsx
@@ -15,7 +15,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: 35,
     },
     text: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: '14px',
         fontWeight: 400,
         lineHeight: '18px',
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/ClaimRecord.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/ClaimRecord.tsx
index efa4b9110b1e..e338fcffa9d6 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/components/ClaimRecord.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/components/ClaimRecord.tsx
@@ -28,7 +28,7 @@ const useStyles = makeStyles()((theme) => ({
     handle: {
         fontWeight: 700,
         fontSize: 14,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'flex',
     },
     badge: {
@@ -47,13 +47,13 @@ const useStyles = makeStyles()((theme) => ({
         },
     },
     asset: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 14,
         fontWeight: 700,
         marginLeft: 'auto',
     },
     symbol: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontWeight: 700,
         marginLeft: theme.spacing(1),
     },
@@ -86,7 +86,7 @@ export const ClaimRecord = memo(function ClaimRecord({ className, record, chainI
                 <Typography className={classes.address}>
                     <Typography component="span">{Utils.formatAddress(record.creator, 4)}</Typography>
                     <a href={Utils.explorerResolver.addressLink(chainId, record.creator)} target="_blank">
-                        <Icons.LinkOut size={20} color={theme.palette.maskColor.second} />
+                        <Icons.LinkOut size={20} color={theme.vars.palette.maskColor.second} />
                     </a>
                 </Typography>
             </div>
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/ConditionSettings.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/ConditionSettings.tsx
index 10b251d9a829..e9bd8fec8905 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/components/ConditionSettings.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/components/ConditionSettings.tsx
@@ -19,7 +19,7 @@ const useStyles = makeStyles()((theme) => {
         button: {
             display: 'flex',
             alignItems: 'center',
-            border: `1px solid ${theme.palette.divider}`,
+            border: `1px solid ${theme.vars.palette.divider}`,
             borderRadius: 99,
             height: 26,
             cursor: 'pointer',
@@ -32,7 +32,7 @@ const useStyles = makeStyles()((theme) => {
             fontWeight: 700,
         },
         conditions: {
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             display: 'flex',
             flexDirection: 'column',
             gap: theme.spacing(1.5),
@@ -57,11 +57,11 @@ const useStyles = makeStyles()((theme) => {
             borderRadius: 16,
             padding: theme.spacing(1.5),
             width: 400,
-            backgroundColor: theme.palette.maskColor.bottom,
-            boxShadow:
-                theme.palette.mode === 'light' ?
-                    '0px 4px 30px rgba(0, 0, 0, 0.1)'
-                :   '0px 4px 30px rgba(255, 255, 255, 0.15)',
+            backgroundColor: theme.vars.palette.maskColor.bottom,
+            boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+            ...theme.applyStyles('dark', {
+                boxShadow: '0px 4px 30px rgba(255, 255, 255, 0.15)',
+            }),
         },
         section: {
             display: 'flex',
@@ -71,7 +71,7 @@ const useStyles = makeStyles()((theme) => {
         sectionTitle: {
             display: 'flex',
             alignItems: 'center',
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             fontSize: 14,
             fontWeight: 700,
             gap: theme.spacing(0.5),
@@ -79,8 +79,8 @@ const useStyles = makeStyles()((theme) => {
         selectButton: {
             display: 'inline-flex',
             gap: 4,
-            backgroundColor: theme.palette.maskColor.main,
-            color: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.bottom,
             padding: theme.spacing(0.5, 1),
             borderRadius: 99,
             cursor: 'pointer',
@@ -104,7 +104,7 @@ const useStyles = makeStyles()((theme) => {
             fontSize: 16,
             fontWeight: 400,
             lineHeight: '20px',
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             textOverflow: 'ellipsis',
             display: '-webkit-box',
             WebkitLineClamp: 2,
@@ -167,7 +167,7 @@ export function ConditionSettings(props: HTMLProps<HTMLDivElement>) {
                                 }}>
                                 <RadioIndicator
                                     checked={conditions.length === 0}
-                                    uncheckedColor={theme.palette.maskColor.secondaryLine}
+                                    uncheckedColor={theme.vars.palette.maskColor.secondaryLine}
                                 />
                                 <Typography className={classes.rowLabel}>
                                     <Trans>Everyone</Trans>
@@ -182,7 +182,7 @@ export function ConditionSettings(props: HTMLProps<HTMLDivElement>) {
                                 }}>
                                 <RadioIndicator
                                     checked={conditions.includes(ConditionType.Crypto)}
-                                    uncheckedColor={theme.palette.maskColor.secondaryLine}
+                                    uncheckedColor={theme.vars.palette.maskColor.secondaryLine}
                                 />
                                 <Typography className={classes.rowLabel}>
                                     <Trans>Crypto Holder</Trans>
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/MessageInput.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/MessageInput.tsx
index 8980345f02f8..8bf65053e1d3 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/components/MessageInput.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/components/MessageInput.tsx
@@ -26,7 +26,7 @@ const useStyles = makeStyles()((theme) => {
             position: 'absolute',
             top: 10,
             left: 12,
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
         },
     }
 })
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketActionButton.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketActionButton.tsx
index 1c4f76ebc9ac..c829b8bdbc7f 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketActionButton.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketActionButton.tsx
@@ -24,21 +24,21 @@ const useStyles = makeStyles()((theme) => {
             fontSize: 12,
             width: 88,
             height: 32,
-            background: `${theme.palette.maskColor.dark} !important`,
+            background: `${theme.vars.palette.maskColor.dark} !important`,
             opacity: '1 !important',
-            color: theme.palette.maskColor.white,
+            color: theme.vars.palette.maskColor.white,
             borderRadius: '999px',
             minHeight: 'auto',
             [smallQuery]: {
                 marginTop: theme.spacing(1),
             },
             '&:disabled': {
-                background: theme.palette.maskColor.primaryMain,
-                color: theme.palette.common.white,
+                background: theme.vars.palette.maskColor.primaryMain,
+                color: theme.vars.palette.common.white,
             },
             '&:hover': {
-                background: theme.palette.maskColor.dark,
-                color: theme.palette.maskColor.white,
+                background: theme.vars.palette.maskColor.dark,
+                color: theme.vars.palette.maskColor.white,
                 opacity: 0.8,
             },
         },
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketEnvelope.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketEnvelope.tsx
index 166617936a0d..65817c0856eb 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketEnvelope.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketEnvelope.tsx
@@ -44,7 +44,7 @@ const useStyles = makeStyles()((theme) => ({
         height: 72,
         borderRadius: theme.spacing(2, 2, 0, 0),
         padding: theme.spacing(1.5, 1.5, 1.5, 6),
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(102, 102, 102, 0.10) 100%)',
         backdropFilter: 'blur(5px)',
         display: 'flex',
@@ -70,7 +70,7 @@ const useStyles = makeStyles()((theme) => ({
         marginTop: 'auto',
     },
     amount: {
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         textAlign: 'center',
         fontFamily: 'Helvetica',
         fontSize: '24px',
@@ -85,7 +85,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         padding: theme.spacing('2px', 1),
         gap: theme.spacing(0.5),
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         fontWeight: 700,
         fontSize: 12,
         lineHeight: '16px',
@@ -125,7 +125,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     creator: {
         marginTop: theme.spacing(2),
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         textAlign: 'center',
         fontFamily: 'Helvetica',
         fontSize: '14px',
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketRecord.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketRecord.tsx
index 42e8e5fd9a0e..9d8cca5abc50 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketRecord.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/components/RedPacketRecord.tsx
@@ -82,18 +82,18 @@ const useStyles = makeStyles<{ background?: string; backgroundIcon?: string }>()
         },
         status: {},
         total: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             fontSize: 20,
             fontWeight: 700,
             lineHeight: '24px',
         },
         progress: {
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             display: 'flex',
             whiteSpace: 'nowrap',
             gap: theme.spacing(1),
             '&>b': {
-                color: theme.palette.maskColor.main,
+                color: theme.vars.palette.maskColor.main,
             },
         },
         symbol: {
@@ -103,7 +103,7 @@ const useStyles = makeStyles<{ background?: string; backgroundIcon?: string }>()
             textOverflow: 'ellipsis',
         },
         message: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             fontWeight: 700,
             lineHeight: '18px',
             whiteSpace: 'nowrap',
@@ -114,7 +114,7 @@ const useStyles = makeStyles<{ background?: string; backgroundIcon?: string }>()
             },
         },
         datetime: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             position: 'absolute',
             right: theme.spacing(1.5),
             top: theme.spacing(1.5),
@@ -123,7 +123,7 @@ const useStyles = makeStyles<{ background?: string; backgroundIcon?: string }>()
         },
         details: {
             fontWeight: 700,
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             cursor: 'pointer',
             whiteSpace: 'nowrap',
         },
@@ -134,21 +134,21 @@ const useStyles = makeStyles<{ background?: string; backgroundIcon?: string }>()
             fontSize: 12,
             width: 88,
             height: 32,
-            background: `${theme.palette.maskColor.dark} !important`,
+            background: `${theme.vars.palette.maskColor.dark} !important`,
             opacity: '1 !important',
-            color: theme.palette.maskColor.white,
+            color: theme.vars.palette.maskColor.white,
             borderRadius: '999px',
             minHeight: 'auto',
             [smallQuery]: {
                 marginTop: theme.spacing(1),
             },
             '&:disabled': {
-                background: theme.palette.maskColor.primaryMain,
-                color: theme.palette.common.white,
+                background: theme.vars.palette.maskColor.primaryMain,
+                color: theme.vars.palette.common.white,
             },
             '&:hover': {
-                background: theme.palette.maskColor.dark,
-                color: theme.palette.maskColor.white,
+                background: theme.vars.palette.maskColor.dark,
+                color: theme.vars.palette.maskColor.white,
                 opacity: 0.8,
             },
         },
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/ThemePicker.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/ThemePicker.tsx
index cea70db68cf8..bfff268a82d8 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/components/ThemePicker.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/components/ThemePicker.tsx
@@ -1,9 +1,9 @@
-import { alpha, Box, type BoxProps } from '@mui/material'
+import { Box, type BoxProps } from '@mui/material'
 import { memo } from 'react'
 import { useRedPacket } from '../contexts/RedPacketContext.js'
 import { Icons } from '@masknet/icons'
 import { MAX_CUSTOM_THEMES, RoutePaths } from '../../constants.js'
-import { makeStyles } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import { useNavigate } from 'react-router-dom'
 
 const useStyles = makeStyles()((theme) => ({
@@ -18,8 +18,8 @@ const useStyles = makeStyles()((theme) => ({
         display: 'inline-flex',
         alignItems: 'center',
         justifyContent: 'center',
-        color: theme.palette.maskColor.bottom,
-        backgroundColor: alpha(theme.palette.maskColor.main, 0.8),
+        color: theme.vars.palette.maskColor.bottom,
+        backgroundColor: alpha(theme.vars.palette.maskColor.main, 0.8),
         borderRadius: 4,
         padding: 0,
         border: 0,
@@ -42,10 +42,10 @@ const useStyles = makeStyles()((theme) => ({
         display: 'inline-flex',
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: theme.palette.maskColor.thirdMain,
+        backgroundColor: theme.vars.palette.maskColor.thirdMain,
     },
     selectedCover: {
-        boxShadow: `0 0 0 2px ${theme.palette.maskColor.main}`,
+        boxShadow: `0 0 0 2px ${theme.vars.palette.maskColor.main}`,
     },
 }))
 
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateTokenRedPacket.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateTokenRedPacket.tsx
index 6a4351c062da..d115cc45d7a0 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateTokenRedPacket.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateTokenRedPacket.tsx
@@ -77,7 +77,7 @@ const useStyles = makeStyles()((theme) => ({
         position: 'absolute',
         top: 10,
         left: 12,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     inputIcon: {
         position: 'absolute',
@@ -102,7 +102,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         width: '50%',
         alignItems: 'center',
-        color: theme.palette.maskColor.line,
+        color: theme.vars.palette.maskColor.line,
         cursor: 'pointer',
     },
     checkIconWrapper: {
@@ -121,7 +121,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     fieldValue: {
         marginLeft: 'auto',
@@ -278,7 +278,7 @@ export function CreateTokenRedPacket() {
                             <RadioIndicator checked={isRandom} size={20} />
                         </div>
                         <Typography
-                            color={isRandom ? theme.palette.maskColor.main : theme.palette.maskColor.second}
+                            color={isRandom ? theme.vars.palette.maskColor.main : theme.vars.palette.maskColor.second}
                             sx={{
                                 fontSize: 16,
                                 fontWeight: isRandom ? 700 : 400,
@@ -291,7 +291,7 @@ export function CreateTokenRedPacket() {
                             <RadioIndicator checked={!isRandom} size={20} />
                         </div>
                         <Typography
-                            color={isRandom ? theme.palette.maskColor.second : theme.palette.maskColor.main}
+                            color={isRandom ? theme.vars.palette.maskColor.second : theme.vars.palette.maskColor.main}
                             sx={{
                                 fontSize: 16,
                                 fontWeight: isRandom ? 400 : 700,
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/CustomCover.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/CustomCover.tsx
index f0621a924cb4..71dddd6a1828 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/views/CustomCover.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/views/CustomCover.tsx
@@ -34,7 +34,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         fontWeight: 400,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     actions: {
         display: 'flex',
@@ -42,7 +42,7 @@ const useStyles = makeStyles()((theme) => ({
         position: 'absolute',
         right: theme.spacing(1),
         top: theme.spacing(1),
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
     },
     dialogActions: {
         padding: 16,
@@ -55,7 +55,7 @@ const useStyles = makeStyles()((theme) => ({
     cancel: {
         '&:hover': {
             border: 'none',
-            background: theme.palette.maskColor.bottom,
+            background: theme.vars.palette.maskColor.bottom,
         },
     },
 }))
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/History.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/History.tsx
index 9a408806a040..98812b83bb4e 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/views/History.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/views/History.tsx
@@ -110,7 +110,8 @@ export function History() {
                             <LoadingBase />
                         :   null}
                     </ElementAnchor>
-                :   <Typography sx={{ color: (theme) => theme.palette.maskColor.second, textAlign: 'center', py: 2 }}>
+                :   <Typography
+                        sx={{ color: (theme) => theme.vars.palette.maskColor.second, textAlign: 'center', py: 2 }}>
                         <Trans>No more data available.</Trans>
                     </Typography>
                 }
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/TokenRedPacketConfirm.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/TokenRedPacketConfirm.tsx
index a63b267df992..4b7007873742 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/views/TokenRedPacketConfirm.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/views/TokenRedPacketConfirm.tsx
@@ -51,7 +51,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     fieldValue: {
         marginLeft: 'auto',
@@ -61,7 +61,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     value: {
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     conditions: {
         display: 'flex',
@@ -86,8 +86,8 @@ const useStyles = makeStyles()((theme) => ({
         maxWidth: 568,
         fontWeight: 300,
         borderRadius: 8,
-        backgroundColor: theme.palette.maskColor.bg,
-        color: theme.palette.text.primary,
+        backgroundColor: theme.vars.palette.maskColor.bg,
+        color: theme.vars.palette.text.primary,
         padding: 12,
     },
     controller: {
@@ -109,7 +109,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 16,
         fontWeight: 400,
         lineHeight: '20px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     tokenIcon: {
         width: 24,
diff --git a/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/SavingsRow.tsx b/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/SavingsRow.tsx
index 58416d1861b3..cffd00c1a75d 100644
--- a/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/SavingsRow.tsx
+++ b/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/SavingsRow.tsx
@@ -15,7 +15,7 @@ import { Trans } from '@lingui/react/macro'
 const useStyles = makeStyles()((theme) => ({
     tableRow: {
         display: 'flex',
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         borderRadius: theme.spacing(1),
         marginBottom: theme.spacing(1),
 
diff --git a/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/index.tsx b/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/index.tsx
index 5ff14be8320a..ec767627ad0e 100644
--- a/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/index.tsx
+++ b/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/index.tsx
@@ -14,7 +14,7 @@ const useStyles = makeStyles()((theme, props) => ({
     tableContainer: {},
     tableHeader: {
         display: 'flex',
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         borderRadius: theme.spacing(1),
         margin: '0 0 15px 0',
     },
@@ -33,7 +33,7 @@ const useStyles = makeStyles()((theme, props) => ({
         width: '100%',
     },
     loading: {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         lineHeight: '18px',
         marginTop: 12,
     },
@@ -49,7 +49,7 @@ const useStyles = makeStyles()((theme, props) => ({
         animation: 'loadingAnimation 1s linear infinite',
     },
     empty: {
-        color: theme.palette.secondaryDivider,
+        color: theme.vars.palette.secondaryDivider,
     },
 }))
 
@@ -120,7 +120,7 @@ export function SavingsTable({ tab, protocols, loadingProtocols, onWithdraw, onD
                 </div>
             :   <div className={classes.placeholder}>
                     <Icons.EmptySimple size={36} className={classes.empty} />
-                    <Typography sx={{ fontSize: '14px', mt: 1.5 }} color={theme.palette.maskColor.second}>
+                    <Typography sx={{ fontSize: '14px', mt: 1.5 }} color={theme.vars.palette.maskColor.second}>
                         <Trans>No deposit protocols found.</Trans>
                     </Typography>
                 </div>
diff --git a/packages/plugins/Savings/src/SiteAdaptor/WithdrawForm.tsx b/packages/plugins/Savings/src/SiteAdaptor/WithdrawForm.tsx
index 0d42dbd95226..d16980198cad 100644
--- a/packages/plugins/Savings/src/SiteAdaptor/WithdrawForm.tsx
+++ b/packages/plugins/Savings/src/SiteAdaptor/WithdrawForm.tsx
@@ -41,16 +41,16 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     title: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     tips: {
         fontSize: 14,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         lineHeight: '18px',
         marginTop: theme.spacing(2),
     },
     minimum: {
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
         margin: theme.spacing(1, 0),
     },
 }))
diff --git a/packages/plugins/ScamWarning/src/SiteAdaptor/components/LinkModifier.tsx b/packages/plugins/ScamWarning/src/SiteAdaptor/components/LinkModifier.tsx
index e3c771b90d9c..ec9075de05aa 100644
--- a/packages/plugins/ScamWarning/src/SiteAdaptor/components/LinkModifier.tsx
+++ b/packages/plugins/ScamWarning/src/SiteAdaptor/components/LinkModifier.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: 4,
         verticalAlign: 'bottom',
         '& > a': {
-            color: theme.palette.maskColor.danger,
+            color: theme.vars.palette.maskColor.danger,
         },
     },
     address: {
diff --git a/packages/plugins/ScamWarning/src/SiteAdaptor/components/PreviewCard.tsx b/packages/plugins/ScamWarning/src/SiteAdaptor/components/PreviewCard.tsx
index fed248ec059e..ac5f95a36892 100644
--- a/packages/plugins/ScamWarning/src/SiteAdaptor/components/PreviewCard.tsx
+++ b/packages/plugins/ScamWarning/src/SiteAdaptor/components/PreviewCard.tsx
@@ -14,8 +14,8 @@ const useStyles = makeStyles()((theme) => ({
     root: {},
     card: {
         padding: theme.spacing(1),
-        color: theme.palette.maskColor.bottom,
-        backgroundColor: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.danger,
         borderRadius: theme.spacing(1),
     },
     title: {
diff --git a/packages/plugins/ScamWarning/src/SiteAdaptor/components/TextModifier.tsx b/packages/plugins/ScamWarning/src/SiteAdaptor/components/TextModifier.tsx
index 493bff34a252..54f0052278be 100644
--- a/packages/plugins/ScamWarning/src/SiteAdaptor/components/TextModifier.tsx
+++ b/packages/plugins/ScamWarning/src/SiteAdaptor/components/TextModifier.tsx
@@ -15,7 +15,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         gap: 4,
         verticalAlign: 'bottom',
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
     },
     icon: {
         width: 18,
diff --git a/packages/plugins/ScamWarning/src/SiteAdaptor/components/WarningCard.tsx b/packages/plugins/ScamWarning/src/SiteAdaptor/components/WarningCard.tsx
index cc78123b851f..95323aca058e 100644
--- a/packages/plugins/ScamWarning/src/SiteAdaptor/components/WarningCard.tsx
+++ b/packages/plugins/ScamWarning/src/SiteAdaptor/components/WarningCard.tsx
@@ -15,11 +15,11 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         flexDirection: 'column',
         gap: theme.spacing(1.5),
-        backgroundColor: theme.palette.maskColor.bottom,
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                '0px 4px 30px 0px rgba(0, 0, 0, 0.1)'
-            :   '0px 4px 30px 0px rgba(255, 255, 255, 0.15)',
+        backgroundColor: theme.vars.palette.maskColor.bottom,
+        boxShadow: '0px 4px 30px 0px rgba(0, 0, 0, 0.1)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 4px 30px 0px rgba(255, 255, 255, 0.15)',
+        }),
     },
     header: {
         display: 'flex',
@@ -45,10 +45,10 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     providerName: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 14,
         fontWeight: 700,
     },
@@ -61,7 +61,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 16,
         fontWeight: 400,
         lineHeight: '18px',
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
         minWidth: 0,
         textOverflow: 'ellipsis',
         overflow: 'hidden',
@@ -77,8 +77,8 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 12,
         fontWeight: 700,
         lineHeight: '16px',
-        backgroundColor: theme.palette.maskColor.danger,
-        color: theme.palette.maskColor.white,
+        backgroundColor: theme.vars.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.white,
     },
 }))
 
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/InformationCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/InformationCard.tsx
index 1fec56134773..083b43843dbc 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/InformationCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/InformationCard.tsx
@@ -30,7 +30,7 @@ const useStyles = makeStyles()((theme) => {
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             width: '100%',
         },
         title: {
@@ -54,10 +54,10 @@ const useStyles = makeStyles()((theme) => {
         },
         info: {
             marginTop: 0,
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
         },
         infoColor: {
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
         },
     }
 })
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/LoadingCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/LoadingCard.tsx
index 84f43d9c5ae5..e49469ecb251 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/LoadingCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/LoadingCard.tsx
@@ -1,6 +1,6 @@
 import { Suspense, type ReactNode } from 'react'
-import { alpha, Skeleton } from '@mui/material'
-import { makeStyles } from '@masknet/theme'
+import { Skeleton } from '@mui/material'
+import { alpha, makeStyles  } from '@masknet/theme'
 import { SnapshotCard } from './SnapshotCard.js'
 import { range } from 'lodash-es'
 
@@ -29,7 +29,9 @@ export function LoadingCard(
                         <Skeleton
                             key={i}
                             className={classes.skeleton}
-                            sx={{ backgroundColor: alpha(theme.palette.maskColor.publicMain, 0.6) }}
+                            sx={{
+                                backgroundColor: alpha(theme.vars.palette.maskColor.publicMain, 0.6),
+                            }}
                             animation="wave"
                             variant="rectangular"
                             width={i === 0 ? '80%' : '60%'}
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/LoadingFailCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/LoadingFailCard.tsx
index 139d63cb2da2..c8eb12fc796f 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/LoadingFailCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/LoadingFailCard.tsx
@@ -76,14 +76,14 @@ function NotFull(props: { onClick: () => void }) {
                 sx={{
                     width: 254,
                     height: 40,
-                    backgroundColor: (theme) => theme.palette.maskColor.publicMain,
-                    color: (theme) => theme.palette.maskColor.white,
+                    backgroundColor: (theme) => theme.vars.palette.maskColor.publicMain,
+                    color: (theme) => theme.vars.palette.maskColor.white,
                     fontSize: 14,
                     fontWeight: 700,
                     marginBottom: 4,
                     marginTop: 2,
                     '&:hover': {
-                        backgroundColor: (theme) => theme.palette.maskColor.publicMain,
+                        backgroundColor: (theme) => theme.vars.palette.maskColor.publicMain,
                     },
                 }}
                 onClick={props.onClick}>
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/PluginDescriptor.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/PluginDescriptor.tsx
index 749eaeeb43b4..6199e1d920a3 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/PluginDescriptor.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/PluginDescriptor.tsx
@@ -5,18 +5,18 @@ import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     item1: {
-        color: theme.palette.maskColor.secondaryDark,
+        color: theme.vars.palette.maskColor.secondaryDark,
         fontSize: '14px',
         fontWeight: 700,
     },
     item2: {
-        color: theme.palette.maskColor.dark,
+        color: theme.vars.palette.maskColor.dark,
         fontSize: '14px',
         fontWeight: 700,
         marginLeft: '2px',
     },
     linkOutIcon: {
-        color: theme.palette.maskColor.dark,
+        color: theme.vars.palette.maskColor.dark,
     },
 }))
 
@@ -27,7 +27,8 @@ export function PluginDescriptor() {
         <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
             <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', gap: 1, alignItems: 'center' }}>
                 <Icons.Snapshot />
-                <Typography sx={{ fontWeight: 'bolder', fontSize: 16, color: (theme) => theme.palette.maskColor.dark }}>
+                <Typography
+                    sx={{ fontWeight: 'bolder', fontSize: 16, color: (theme) => theme.vars.palette.maskColor.dark }}>
                     <Trans>Snapshot</Trans>
                 </Typography>
             </Stack>
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/ProfileProposalList.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/ProfileProposalList.tsx
index 96eff7ba3aa5..8b4c77c19dc8 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/ProfileProposalList.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/ProfileProposalList.tsx
@@ -36,7 +36,7 @@ const useStyles = makeStyles<{ state?: string }>()((theme, { state }) => {
             paddingBottom: 0,
             cursor: 'pointer',
             '&:hover': {
-                background: theme.palette.maskColor.bg,
+                background: theme.vars.palette.maskColor.bg,
             },
         },
         authorInfo: { display: 'flex', alignItems: 'center' },
@@ -49,11 +49,13 @@ const useStyles = makeStyles<{ state?: string }>()((theme, { state }) => {
             width: 72,
             borderRadius: 99,
             color:
-                state === 'active' || state === 'pending' ? theme.palette.common.white : theme.palette.maskColor.bottom,
+                state === 'active' || state === 'pending' ?
+                    theme.vars.palette.common.white
+                :   theme.vars.palette.maskColor.bottom,
             backgroundColor:
-                state === 'active' ? theme.palette.maskColor.success
-                : state === 'pending' ? theme.palette.maskColor.warn
-                : theme.palette.maskColor.main,
+                state === 'active' ? theme.vars.palette.maskColor.success
+                : state === 'pending' ? theme.vars.palette.maskColor.warn
+                : theme.vars.palette.maskColor.main,
         },
         blockieIcon: {
             width: 20,
@@ -88,7 +90,7 @@ const useStyles = makeStyles<{ state?: string }>()((theme, { state }) => {
             width: '100%',
             paddingTop: 0,
             paddingBottom: 12,
-            borderBottom: `1px solid ${theme.palette.maskColor.line}`,
+            borderBottom: `1px solid ${theme.vars.palette.maskColor.line}`,
         },
         voteItem: {
             padding: '8px 6px',
@@ -98,7 +100,7 @@ const useStyles = makeStyles<{ state?: string }>()((theme, { state }) => {
             borderRadius: 4,
         },
         selectedVoteItem: {
-            background: theme.palette.maskColor.bg,
+            background: theme.vars.palette.maskColor.bg,
         },
         voteName: {
             fontWeight: 700,
@@ -114,7 +116,7 @@ const useStyles = makeStyles<{ state?: string }>()((theme, { state }) => {
         },
         strategyName: {
             fontSize: 14,
-            color: theme.palette.maskColor.secondaryDark,
+            color: theme.vars.palette.maskColor.secondaryDark,
         },
         percentage: {
             fontWeight: 700,
@@ -131,13 +133,13 @@ const useStyles = makeStyles<{ state?: string }>()((theme, { state }) => {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            background: theme.palette.maskColor.main,
+            background: theme.vars.palette.maskColor.main,
             marginLeft: 12,
         },
         myVoteText: {
             fontSize: 10,
             fontWeight: 700,
-            color: theme.palette.maskColor.bottom,
+            color: theme.vars.palette.maskColor.bottom,
         },
     }
 })
@@ -255,7 +257,11 @@ function ProfileProposalListItemVote(props: ProfileProposalProps) {
                     )}>
                     <div className={classes.voteInfo}>
                         {i === 0 && proposal.state !== 'pending' ?
-                            <Icons.Check color={theme.palette.maskColor.main} size={18} className={classes.voteIcon} />
+                            <Icons.Check
+                                color={theme.vars.palette.maskColor.main}
+                                size={18}
+                                className={classes.voteIcon}
+                            />
                         :   null}
                         <Typography className={classes.voteName}>{x}</Typography>
                         <Typography className={classes.strategyName}>
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/ProfileSpaceHeader.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/ProfileSpaceHeader.tsx
index 8fe29f6fa9b2..2c6a2bc63f54 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/ProfileSpaceHeader.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/ProfileSpaceHeader.tsx
@@ -37,14 +37,14 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
         fontSize: 20,
         lineHeight: 1.2,
-        color: theme.palette.maskColor.dark,
+        color: theme.vars.palette.maskColor.dark,
         display: 'flex',
         alignItems: 'center',
         marginRight: 5,
     },
     followersCount: {
         fontSize: 14,
-        color: theme.palette.maskColor.secondaryDark,
+        color: theme.vars.palette.maskColor.secondaryDark,
     },
     spaceInfo: {
         marginLeft: 4,
@@ -54,7 +54,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     arrowIcon: {
-        color: theme.palette.maskColor.dark,
+        color: theme.vars.palette.maskColor.dark,
     },
     joinButton: {
         marginLeft: 'auto',
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/ReadmeCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/ReadmeCard.tsx
index c45915c91911..260047993efa 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/ReadmeCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/ReadmeCard.tsx
@@ -9,25 +9,25 @@ const useStyles = makeStyles()((theme) => ({
         '& p, & li': {
             margin: 0,
             fontSize: 14,
-            color: `${theme.palette.maskColor.secondaryDark} !important`,
+            color: `${theme.vars.palette.maskColor.secondaryDark} !important`,
         },
         '& p + p': {
             marginTop: theme.spacing(0.5),
-            color: `${theme.palette.maskColor.secondaryDark} !important`,
+            color: `${theme.vars.palette.maskColor.secondaryDark} !important`,
         },
         '& h1, & h2, & h3, & h4, & h5, & h6': {
             fontSize: 14,
             fontWeight: 500,
-            color: `${theme.palette.maskColor.secondaryDark} !important`,
+            color: `${theme.vars.palette.maskColor.secondaryDark} !important`,
         },
         '& img': {
             maxWidth: '100%',
         },
         '& a': {
-            color: `${theme.palette.maskColor.secondaryDark} !important`,
+            color: `${theme.vars.palette.maskColor.secondaryDark} !important`,
         },
         '& td, & th': {
-            color: `${theme.palette.maskColor.secondaryDark} !important`,
+            color: `${theme.vars.palette.maskColor.secondaryDark} !important`,
         },
     },
 }))
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/ResultCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/ResultCard.tsx
index 90d08065641e..ef2ebe7f5681 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/ResultCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/ResultCard.tsx
@@ -46,15 +46,15 @@ const useStyles = makeStyles()((theme) => {
         },
         power: {
             marginLeft: theme.spacing(2),
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
         },
         ratio: {
             marginLeft: 'auto',
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
         },
         choice: {
             maxWidth: choiceMaxWidth,
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
         },
         linearProgressWrap: {
             width: '100%',
@@ -68,19 +68,19 @@ const useStyles = makeStyles()((theme) => {
         resultButton: {
             width: 200,
             margin: '0 auto',
-            backgroundColor: theme.palette.maskColor.publicMain,
-            color: theme.palette.maskColor.white,
+            backgroundColor: theme.vars.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.white,
             '&:hover': {
-                backgroundColor: theme.palette.maskColor.publicMain,
-                color: theme.palette.maskColor.white,
+                backgroundColor: theme.vars.palette.maskColor.publicMain,
+                color: theme.vars.palette.maskColor.white,
             },
         },
         tooltip: {
-            backgroundColor: theme.palette.maskColor.publicMain,
-            color: theme.palette.maskColor.white,
+            backgroundColor: theme.vars.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.white,
         },
         arrow: {
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
         },
     }
 })
@@ -89,7 +89,7 @@ const StyledLinearProgress = styled(LinearProgress)(({ theme }) => ({
     [`&.${linearProgressClasses.root}`]: {
         height: 8,
         borderRadius: 5,
-        backgroundColor: theme.palette.maskColor.publicBg,
+        backgroundColor: theme.vars.palette.maskColor.publicBg,
     },
     [`&.${linearProgressClasses.bar}`]: {
         borderRadius: 5,
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx
index 7362d7ac5658..02a9462cceae 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx
@@ -9,7 +9,7 @@ import {
     TextOverflowTooltip,
     makeStyles,
     useTabs,
-} from '@masknet/theme'
+ } from '@masknet/theme'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import { resolveIPFS_URL } from '@masknet/web3-shared-base'
 import { TabContext, TabPanel } from '@mui/lab'
@@ -42,16 +42,16 @@ const useStyles = makeStyles()((theme) => {
         tab: {
             whiteSpace: 'nowrap',
             background: 'transparent',
-            color: theme.palette.maskColor.secondaryDark,
+            color: theme.vars.palette.maskColor.secondaryDark,
             '&:hover': {
                 background: 'transparent',
             },
         },
         tabActive: {
-            background: theme.palette.maskColor.white,
-            color: `${theme.palette.maskColor.publicMain}!important`,
+            background: theme.vars.palette.maskColor.white,
+            color: `${theme.vars.palette.maskColor.publicMain}!important`,
             '&:hover': {
-                background: theme.palette.maskColor.white,
+                background: theme.vars.palette.maskColor.white,
             },
         },
         content: {
@@ -62,15 +62,15 @@ const useStyles = makeStyles()((theme) => {
             '&::-webkit-scrollbar': {
                 display: 'none',
             },
-            background: theme.palette.maskColor.white,
+            background: theme.vars.palette.maskColor.white,
         },
         active: {
-            color: theme.palette.maskColor.white,
-            backgroundColor: theme.palette.maskColor.success,
+            color: theme.vars.palette.maskColor.white,
+            backgroundColor: theme.vars.palette.maskColor.success,
         },
         default: {
-            color: theme.palette.maskColor.white,
-            backgroundColor: new Color(theme.palette.maskColor.primary).alpha(0.1).toString(),
+            color: theme.vars.palette.maskColor.white,
+            backgroundColor: new Color(theme.vars.palette.maskColor.primary).alpha(0.1).toString(),
         },
         avatar: {
             boxShadow: '0px 6px 12px rgba(81, 62, 255, 0.2)',
@@ -80,11 +80,11 @@ const useStyles = makeStyles()((theme) => {
         },
         shadowRootTooltip: {},
         tooltip: {
-            backgroundColor: theme.palette.maskColor.publicMain,
-            color: theme.palette.maskColor.white,
+            backgroundColor: theme.vars.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.white,
         },
         arrow: {
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
         },
     }
 })
@@ -131,7 +131,7 @@ export function Snapshot() {
                                     classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
                                     arrow>
                                     <Typography
-                                        color={theme.palette.maskColor.publicMain}
+                                        color={theme.vars.palette.maskColor.publicMain}
                                         sx={{
                                             fontSize: 18,
                                             fontWeight: 'bold',
@@ -143,7 +143,7 @@ export function Snapshot() {
                                         {proposal.space.name}
                                     </Typography>
                                 </TextOverflowTooltip>
-                                <Box sx={{ color: theme.palette.maskColor.publicSecond, display: 'flex' }}>
+                                <Box sx={{ color: theme.vars.palette.maskColor.publicSecond, display: 'flex' }}>
                                     <Typography sx={{ fontSize: 14, paddingRight: 1 }}>by</Typography>
                                     <Typography sx={{ fontSize: 14, fontWeight: '700' }}>
                                         {formatSpaceId(proposal.space.id)}
@@ -158,7 +158,7 @@ export function Snapshot() {
                                 classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
                                 arrow>
                                 <Typography
-                                    color={theme.palette.maskColor.publicSecond}
+                                    color={theme.vars.palette.maskColor.publicSecond}
                                     sx={{
                                         fontSize: 14,
                                         fontWeight: '700',
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/SnapshotCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/SnapshotCard.tsx
index 798044f3b26e..5bf9784ef373 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/SnapshotCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/SnapshotCard.tsx
@@ -9,7 +9,7 @@ const useStyles = makeStyles()((theme) => {
         root: {
             minHeight: 120,
             padding: 0,
-            border: `solid 1px ${theme.palette.maskColor.line}`,
+            border: `solid 1px ${theme.vars.palette.maskColor.line}`,
             margin: `${theme.spacing(2)} auto`,
             marginBottom: theme.spacing(2),
             '&:first-child': {
@@ -18,10 +18,10 @@ const useStyles = makeStyles()((theme) => {
             '&:last-child': {
                 marginBottom: 0,
             },
-            background: theme.palette.maskColor.bg,
+            background: theme.vars.palette.maskColor.bg,
         },
         header: {
-            borderBottom: `solid 1px ${theme.palette.maskColor.line}`,
+            borderBottom: `solid 1px ${theme.vars.palette.maskColor.line}`,
         },
         content: {
             width: '100%',
@@ -37,7 +37,7 @@ const useStyles = makeStyles()((theme) => {
         title: {
             display: 'flex',
             alignItems: 'center',
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             fontWeight: 'bold',
             fontSize: 18,
         },
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/SnapshotTab.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/SnapshotTab.tsx
index cbacac91b8c1..faf7e9aaadb5 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/SnapshotTab.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/SnapshotTab.tsx
@@ -6,7 +6,7 @@ const useStyles = makeStyles()((theme) => {
         root: {
             width: '100%',
             borderRadius: 0,
-            backgroundColor: theme.palette.maskColor.white,
+            backgroundColor: theme.vars.palette.maskColor.white,
             overflowY: 'auto',
             overflowX: 'hidden',
             height: 400,
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/SpaceMenu.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/SpaceMenu.tsx
index 644083355791..4772fb8dba53 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/SpaceMenu.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/SpaceMenu.tsx
@@ -9,11 +9,11 @@ import { Trans } from '@lingui/react/macro'
 const useStyles = makeStyles()((theme) => ({
     menu: {
         minWidth: 320,
-        backgroundColor: theme.palette.maskColor.bottom,
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 4px 30px rgba(255, 255, 255, 0.15)'
-            :   '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        backgroundColor: theme.vars.palette.maskColor.bottom,
+        boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 4px 30px rgba(255, 255, 255, 0.15)',
+        }),
         borderRadius: 16,
     },
     menuItem: {
@@ -46,7 +46,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     checkedIcon: {
         filter: 'drop-shadow(0px 4px 10px rgba(28, 104, 243, 0.2))',
-        color: theme.palette.maskColor.primary,
+        color: theme.vars.palette.maskColor.primary,
     },
     group: {
         display: 'flex',
@@ -63,8 +63,8 @@ const useStyles = makeStyles()((theme) => ({
     divider: {
         margin: theme.spacing(1, 0),
         width: 'calc(100% - 24px)',
-        color: theme.palette.maskColor.line,
-        borderColor: theme.palette.maskColor.line,
+        color: theme.vars.palette.maskColor.line,
+        borderColor: theme.vars.palette.maskColor.line,
         position: 'relative',
         left: 12,
     },
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx
index 7c5e0bf52ad1..42c575167885 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx
@@ -31,7 +31,7 @@ const useStyles = makeStyles()((theme) => {
         listItem: {
             display: 'flex',
             justifyContent: 'space-between',
-            borderBottom: `1px solid ${theme.palette.maskColor.publicLine}`,
+            borderBottom: `1px solid ${theme.vars.palette.maskColor.publicLine}`,
             paddingLeft: 0,
             paddingRight: 0,
             gap: 16,
@@ -48,7 +48,7 @@ const useStyles = makeStyles()((theme) => {
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
             maxWidth: 170,
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
         },
         ellipsisText: {
             textOverflow: 'ellipsis',
@@ -64,21 +64,21 @@ const useStyles = makeStyles()((theme) => {
         },
         power: {
             minWidth: 90,
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             maxWidth: 90,
         },
         shadowRootTooltip: {
-            color: theme.palette.maskColor.white,
+            color: theme.vars.palette.maskColor.white,
         },
         tooltip: {
-            backgroundColor: theme.palette.maskColor.publicMain,
+            backgroundColor: theme.vars.palette.maskColor.publicMain,
             color: 'white',
         },
         arrow: {
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
         },
     }
 })
@@ -126,7 +126,7 @@ function Content() {
                                     <Box className={classes.avatarWrapper}>
                                         <EthereumBlockie address={v.address} />
                                     </Box>
-                                    <Typography color={theme.palette.maskColor.dark}>
+                                    <Typography color={theme.vars.palette.maskColor.dark}>
                                         {isSameAddress(v.address, account) ?
                                             <Trans>You</Trans>
                                         :   formatLongHex(v.address)}
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/VotingDialog.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/VotingDialog.tsx
index db6fa7986e5a..11f164b69c98 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/VotingDialog.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/VotingDialog.tsx
@@ -32,12 +32,12 @@ const useStyles = makeStyles()((theme) => ({
         textDecoration: 'none !important',
     },
     field: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         margin: '0',
     },
     value: {
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     content: {
         padding: 16,
@@ -56,26 +56,26 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(2),
     },
     optionButton: {
-        backgroundColor: theme.palette.maskColor.thirdMain,
-        color: theme.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.thirdMain,
+        color: theme.vars.palette.maskColor.main,
         '&:hover': {
             backgroundColor: 'transparent',
         },
     },
     selectedOption: {
-        backgroundColor: `${theme.palette.maskColor.main} !important`,
-        color: `${theme.palette.maskColor.bottom} !important`,
+        backgroundColor: `${theme.vars.palette.maskColor.main} !important`,
+        color: `${theme.vars.palette.maskColor.bottom} !important`,
     },
     tip: {
         padding: theme.spacing(2),
         borderRadius: 16,
-        border: `1px solid ${theme.palette.maskColor.line}`,
-        color: theme.palette.maskColor.main,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         fontSize: 14,
         lineHeight: '18px',
         '& a': {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             textDecoration: 'underline',
         },
     },
diff --git a/packages/plugins/SwitchLogo/src/SiteAdaptor/SwitchLogoButton.tsx b/packages/plugins/SwitchLogo/src/SiteAdaptor/SwitchLogoButton.tsx
index 227f5cf6621d..6151886cbe87 100644
--- a/packages/plugins/SwitchLogo/src/SiteAdaptor/SwitchLogoButton.tsx
+++ b/packages/plugins/SwitchLogo/src/SiteAdaptor/SwitchLogoButton.tsx
@@ -58,7 +58,7 @@ const useStyles = makeStyles()(() => ({
 }))
 
 export function SwitchLogoButton() {
-    const { classes, cx, theme } = useStyles()
+    const { classes, cx } = useStyles()
     const current = useLastRecognizedIdentity()
     const logoType = useValueRef(switchLogoSettings[current?.identifier?.userId || ''])
     const isMinimalMode = useIsMinimalMode(PluginID.SwitchLogo)
@@ -74,7 +74,7 @@ export function SwitchLogoButton() {
         node.setHTMLUnsafe(
             logoType === SwitchLogoType.Classics && !isMinimalMode ? BlueBirdHTML : LetterHTML || defaultXIcon,
         )
-    }, [logoType, isMinimalMode, theme.palette.mode, theme.palette.primary.main])
+    }, [logoType, isMinimalMode])
 
     const onClick = useCallback(() => {
         if (isMinimalMode) return
diff --git a/packages/plugins/SwitchLogo/src/SiteAdaptor/SwitchLogoDialog.tsx b/packages/plugins/SwitchLogo/src/SiteAdaptor/SwitchLogoDialog.tsx
index f4391aec26e8..5b83ffe6b39b 100644
--- a/packages/plugins/SwitchLogo/src/SiteAdaptor/SwitchLogoDialog.tsx
+++ b/packages/plugins/SwitchLogo/src/SiteAdaptor/SwitchLogoDialog.tsx
@@ -23,7 +23,7 @@ const useStyles = makeStyles()((theme) => ({
         padding: 24,
     },
     iconButton: {
-        border: `1px solid ${theme.palette.maskColor.secondaryLine}`,
+        border: `1px solid ${theme.vars.palette.maskColor.secondaryLine}`,
         width: 170,
         height: 74,
         display: 'flex',
@@ -34,7 +34,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: 8,
     },
     selected: {
-        border: `1px solid ${theme.palette.maskColor.highlight}`,
+        border: `1px solid ${theme.vars.palette.maskColor.highlight}`,
     },
     icons: {
         display: 'flex',
@@ -148,7 +148,7 @@ export const SwitchLogoDialog = memo(() => {
                                         fontSize: 14,
                                         fontWeight: 400,
                                         lineHeight: '18px',
-                                        color: (theme) => theme.palette.maskColor.secondaryDark,
+                                        color: (theme) => theme.vars.palette.maskColor.secondaryDark,
                                     }}>
                                     <Trans>Share and recommend this feature after saving.</Trans>
                                 </Typography>
@@ -168,7 +168,7 @@ export const SwitchLogoDialog = memo(() => {
                                 fontSize: '14px',
                                 fontWeight: 700,
                                 marginRight: '5px',
-                                color: (theme) => theme.palette.maskColor.secondaryDark,
+                                color: (theme) => theme.vars.palette.maskColor.secondaryDark,
                             }}>
                             Powered by{' '}
                         </Typography>
diff --git a/packages/plugins/Tips/src/SiteAdaptor/components/TipsRealmContent/index.tsx b/packages/plugins/Tips/src/SiteAdaptor/components/TipsRealmContent/index.tsx
index 126cda33e0ee..33b7f9e26828 100644
--- a/packages/plugins/Tips/src/SiteAdaptor/components/TipsRealmContent/index.tsx
+++ b/packages/plugins/Tips/src/SiteAdaptor/components/TipsRealmContent/index.tsx
@@ -36,12 +36,13 @@ const useStyles = makeStyles<{ buttonSize: number }, 'postTipsButton'>()((theme,
         alignItems: 'center',
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: theme.palette.maskColor.borderSecondary,
+        borderColor: theme.vars.palette.maskColor.borderSecondary,
         boxSizing: 'border-box',
         verticalAlign: 'top',
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         '&:hover': {
-            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(239,243,244,0.1)' : 'rgba(15,20,25,0.1)',
+            backgroundColor: 'rgba(15,20,25,0.1)',
+            ...theme.applyStyles('dark', { backgroundColor: 'rgba(239,243,244,0.1)' }),
         },
     },
     followTipsButton: {
diff --git a/packages/plugins/Tips/src/components/RecipientSection/RecipientSelect.tsx b/packages/plugins/Tips/src/components/RecipientSection/RecipientSelect.tsx
index 45a6e50eca25..155d008685e8 100644
--- a/packages/plugins/Tips/src/components/RecipientSection/RecipientSelect.tsx
+++ b/packages/plugins/Tips/src/components/RecipientSection/RecipientSelect.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles<void, 'icon' | 'pluginIcon' | 'text'>()((theme, _,
         },
         menuItem: {
             minHeight: 32,
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             borderRadius: theme.spacing(1),
             padding: 6,
             gap: theme.spacing(1),
@@ -74,7 +74,7 @@ const useStyles = makeStyles<void, 'icon' | 'pluginIcon' | 'text'>()((theme, _,
         },
         actionIcon: {
             marginLeft: theme.spacing(0.5),
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
         checkIcon: {
             marginLeft: 'auto',
diff --git a/packages/plugins/Tips/src/components/RecipientSection/index.tsx b/packages/plugins/Tips/src/components/RecipientSection/index.tsx
index 2e199fc1e8d3..45ff4a4e74d2 100644
--- a/packages/plugins/Tips/src/components/RecipientSection/index.tsx
+++ b/packages/plugins/Tips/src/components/RecipientSection/index.tsx
@@ -26,7 +26,7 @@ const useStyles = makeStyles()((theme) => {
             fontSize: 14,
             fontWeight: 400,
             lineHeight: '18px',
-            color: theme.palette.maskColor.danger,
+            color: theme.vars.palette.maskColor.danger,
             marginTop: theme.spacing(1),
         },
     }
diff --git a/packages/plugins/Trader/src/SiteAdaptor/components/BridgeNode.tsx b/packages/plugins/Trader/src/SiteAdaptor/components/BridgeNode.tsx
index ec659dd90523..897922a4b15a 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/components/BridgeNode.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/components/BridgeNode.tsx
@@ -12,19 +12,19 @@ const useStyles = makeStyles<void, 'active'>()((theme, _, refs) => ({
         flexDirection: 'column',
         gap: 10,
         borderRadius: theme.spacing(1.5),
-        border: `1px solid ${theme.palette.maskColor.line}`,
-        backgroundColor: theme.palette.maskColor.bg,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         [`&.${refs.active}`]: {
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             '&::after': {
                 content: '""',
                 display: 'block',
                 borderRadius: 4,
                 border: '1px solid transparent',
-                borderRightColor: theme.palette.maskColor.line,
-                borderBottomColor: theme.palette.maskColor.line,
+                borderRightColor: theme.vars.palette.maskColor.line,
+                borderBottomColor: theme.vars.palette.maskColor.line,
                 transform: 'scaleX(.6) rotate(45deg) translate(-50%, 100%)',
-                backgroundColor: theme.palette.maskColor.bottom,
+                backgroundColor: theme.vars.palette.maskColor.bottom,
                 position: 'absolute',
                 width: 12,
                 height: 12,
@@ -42,13 +42,13 @@ const useStyles = makeStyles<void, 'active'>()((theme, _, refs) => ({
     chainName: {
         fontSize: 16,
         lineHeight: '20px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     symbol: {
         fontSize: 16,
         lineHeight: '20px',
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     step: {
         position: 'absolute',
@@ -61,7 +61,7 @@ const useStyles = makeStyles<void, 'active'>()((theme, _, refs) => ({
         fontSize: 64,
         fontWeight: 700,
         fontFamily: 'Helvetica',
-        color: theme.palette.maskColor.secondaryMain,
+        color: theme.vars.palette.maskColor.secondaryMain,
     },
 }))
 
diff --git a/packages/plugins/Trader/src/SiteAdaptor/components/Warning.tsx b/packages/plugins/Trader/src/SiteAdaptor/components/Warning.tsx
index 712b856bf13a..b757ad92ec55 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/components/Warning.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/components/Warning.tsx
@@ -10,7 +10,7 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 12,
         display: 'flex',
         gap: theme.spacing(1),
-        color: theme.palette.maskColor.warn,
+        color: theme.vars.palette.maskColor.warn,
         alignItems: 'center',
     },
     title: {
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
index 035018551aa3..a2e53f6aa7d4 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
@@ -74,7 +74,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(1.5),
     },
     pair: {
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         borderRadius: 12,
         padding: theme.spacing(1.5),
     },
@@ -112,14 +112,14 @@ const useStyles = makeStyles()((theme) => ({
     },
     network: {
         fontSize: 13,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         lineHeight: '18px',
     },
     toToken: {
         fontSize: 14,
         lineHeight: '18px',
         fontWeight: 400,
-        color: theme.palette.maskColor.success,
+        color: theme.vars.palette.maskColor.success,
     },
     infoList: {
         display: 'flex',
@@ -130,14 +130,14 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         width: '100%',
         alignItems: 'flex-start',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         justifyContent: 'space-between',
     },
     rowName: {
         fontSize: 14,
         display: 'flex',
         gap: theme.spacing(0.5),
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         alignItems: 'center',
         flexGrow: 1,
         marginRight: 'auto',
@@ -154,7 +154,7 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: '50%',
         marginLeft: -8,
         marginRight: theme.spacing(1),
-        boxShadow: `0 0 0 1px ${theme.palette.maskColor.bottom}`,
+        boxShadow: `0 0 0 1px ${theme.vars.palette.maskColor.bottom}`,
     },
     link: {
         cursor: 'pointer',
@@ -162,12 +162,12 @@ const useStyles = makeStyles()((theme) => ({
         textAlign: 'right',
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     text: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     rotate: {
         transform: 'rotate(180deg)',
@@ -177,16 +177,14 @@ const useStyles = makeStyles()((theme) => ({
         fontFamily: 'monospace',
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         overflow: 'auto',
         scrollbarWidth: 'none',
     },
     footer: {
         flexShrink: 0,
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                '0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', { boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)' }),
     },
 }))
 
@@ -254,7 +252,7 @@ export const BridgeConfirm = memo(function BridgeConfirm() {
                 {targetToken.tokenSymbol}
                 <Icons.Cached
                     size={16}
-                    color={theme.palette.maskColor.main}
+                    color={theme.vars.palette.maskColor.main}
                     onClick={() => setForwardCompare((v) => !v)}
                 />
             </>
@@ -343,7 +341,7 @@ export const BridgeConfirm = memo(function BridgeConfirm() {
                             tabIndex={-1}
                             target="_blank"
                             rel="noopener noreferrer">
-                            <Typography color={theme.palette.maskColor.success} component="span">
+                            <Typography color={theme.vars.palette.maskColor.success} component="span">
                                 <Trans>Transaction submitted.</Trans>
                             </Typography>
                             <Icons.LinkOut size={16} sx={{ ml: 0.5 }} />
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeQuoteRoute.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeQuoteRoute.tsx
index 96038de215c6..124dbf117a21 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeQuoteRoute.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeQuoteRoute.tsx
@@ -31,10 +31,10 @@ const useStyles = makeStyles<void, 'active' | 'label' | 'fastestTag' | 'maxTag'>
         gap: theme.spacing(0.5),
         padding: theme.spacing(1.5),
         borderRadius: theme.spacing(1.5),
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         cursor: 'pointer',
         [`&.${refs.active}`]: {
-            border: `1px solid ${theme.palette.maskColor.main}`,
+            border: `1px solid ${theme.vars.palette.maskColor.main}`,
         },
         position: 'relative',
     },
@@ -56,7 +56,7 @@ const useStyles = makeStyles<void, 'active' | 'label' | 'fastestTag' | 'maxTag'>
         display: 'flex',
         width: '100%',
         alignItems: 'center',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         justifyContent: 'space-between',
     },
     rowName: {
@@ -84,8 +84,8 @@ const useStyles = makeStyles<void, 'active' | 'label' | 'fastestTag' | 'maxTag'>
         gap: theme.spacing(0.5),
         padding: theme.spacing(0.5),
         borderRadius: theme.spacing(0.5),
-        backgroundColor: theme.palette.maskColor.bg,
-        color: theme.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.bg,
+        color: theme.vars.palette.maskColor.main,
         textDecoration: 'none',
         [`&.${refs.label}`]: {
             padding: theme.spacing(0.5, 1),
@@ -95,12 +95,12 @@ const useStyles = makeStyles<void, 'active' | 'label' | 'fastestTag' | 'maxTag'>
     maxTag: {},
     label: {
         [`&.${refs.fastestTag}`]: {
-            backgroundColor: theme.palette.maskColor.main,
-            color: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.bottom,
         },
         [`&.${refs.maxTag}`]: {
-            backgroundColor: theme.palette.maskColor.bg,
-            color: theme.palette.maskColor.main,
+            backgroundColor: theme.vars.palette.maskColor.bg,
+            color: theme.vars.palette.maskColor.main,
         },
     },
 }))
@@ -150,9 +150,9 @@ export const BridgeQuoteRoute = memo(function BridgeQuoteRoute() {
                                 checkedIcon={
                                     <Icons.RadioButtonChecked
                                         size={18}
-                                        color={theme.palette.maskColor.main}
+                                        color={theme.vars.palette.maskColor.main}
                                         sx={{
-                                            '--stroke-color': theme.palette.maskColor.bottom,
+                                            '--stroke-color': theme.vars.palette.maskColor.bottom,
                                         }}
                                     />
                                 }
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
index ae7fbb2a8ee7..fad4697f5ca8 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
@@ -53,7 +53,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(1.5),
     },
     pair: {
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         borderRadius: 12,
         padding: theme.spacing(1.5),
     },
@@ -87,14 +87,14 @@ const useStyles = makeStyles()((theme) => ({
     },
     network: {
         fontSize: 13,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         lineHeight: '18px',
     },
     toToken: {
         fontSize: 14,
         lineHeight: '18px',
         fontWeight: 400,
-        color: theme.palette.maskColor.success,
+        color: theme.vars.palette.maskColor.success,
     },
     infoList: {
         display: 'flex',
@@ -105,14 +105,14 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         width: '100%',
         alignItems: 'flex-start',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         justifyContent: 'space-between',
     },
     rowName: {
         fontSize: 14,
         display: 'flex',
         gap: theme.spacing(0.5),
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         alignItems: 'center',
         flexGrow: 1,
         marginRight: 'auto',
@@ -130,12 +130,12 @@ const useStyles = makeStyles()((theme) => ({
         textAlign: 'right',
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     text: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     rotate: {
         transform: 'rotate(180deg)',
@@ -145,16 +145,16 @@ const useStyles = makeStyles()((theme) => ({
         fontFamily: 'monospace',
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         overflow: 'auto',
         scrollbarWidth: 'none',
     },
     footer: {
         flexShrink: 0,
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                '0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
     },
     toastLink: {
         display: 'flex',
@@ -229,7 +229,7 @@ export const Confirm = memo(function Confirm() {
                 1 {baseToken.tokenSymbol} ≈ {formatCompact(rate.toNumber())} {targetToken.tokenSymbol}
                 <Icons.Cached
                     size={16}
-                    color={theme.palette.maskColor.main}
+                    color={theme.vars.palette.maskColor.main}
                     onClick={() => setForwardCompare((v) => !v)}
                 />
             </>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/History.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/History.tsx
index a881e3aa1e34..913dad31fdfc 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/History.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/History.tsx
@@ -30,23 +30,23 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         flexDirection: 'column',
         gap: theme.spacing(1.5),
-        borderBottom: `1px solid ${theme.palette.maskColor.line}`,
+        borderBottom: `1px solid ${theme.vars.palette.maskColor.line}`,
         paddingBottom: theme.spacing(1.5),
         contentVisibility: 'auto',
     },
     groupHeader: {
         display: 'flex',
         justifyContent: 'space-between',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     date: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 14,
         fontWeight: 400,
         lineHeight: '18px',
     },
     time: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 14,
         fontWeight: 400,
         lineHeight: '18px',
@@ -55,7 +55,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
     },
     symbol: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         fontSize: 14,
     },
@@ -73,7 +73,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 13,
         fontWeight: 400,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     result: {
         display: 'flex',
@@ -84,13 +84,13 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         lineHeight: '18px',
         fontWeight: 400,
-        color: theme.palette.maskColor.success,
+        color: theme.vars.palette.maskColor.success,
     },
     sent: {
         fontSize: 13,
         fontWeight: 400,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         textAlign: 'right',
     },
     records: {
@@ -114,16 +114,16 @@ const useStyles = makeStyles()((theme) => ({
         padding: theme.spacing(2, 4),
     },
     statusIcon: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     statusMessage: {
         fontSize: 18,
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     statusNote: {
         fontSize: 14,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
 }))
 
@@ -145,7 +145,7 @@ export function HistoryView() {
     if (!history.length) {
         return (
             <Box className={classes.statusBox}>
-                <Icons.EmptySimple className={classes.statusIcon} size={24} color={theme.palette.maskColor.main} />
+                <Icons.EmptySimple className={classes.statusIcon} size={24} color={theme.vars.palette.maskColor.main} />
                 <Typography className={classes.statusMessage}>{t`No recent transactions`}</Typography>
                 <Typography className={classes.statusNote}>
                     {t`Transaction history is only stored locally and will be deleted if you clear your browser data.`}
@@ -193,7 +193,7 @@ export function HistoryView() {
                                         <Icons.CallSend
                                             className={classes.directionIcon}
                                             size={16}
-                                            color={theme.palette.text.secondary}
+                                            color={theme.vars.palette.text.secondary}
                                         />
                                         <Typography className={classes.symbol}>{toToken.symbol}</Typography>
                                     </div>
@@ -216,7 +216,7 @@ export function HistoryView() {
                                         :   '--'}
                                     </Typography>
                                 </div>
-                                <Icons.ArrowRight size={16} color={theme.palette.maskColor.main} />
+                                <Icons.ArrowRight size={16} color={theme.vars.palette.maskColor.main} />
                             </Link>
                         </div>
                     </div>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/NetworkFee/index.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/NetworkFee/index.tsx
index b22c0cfd83b7..9a660d8b8458 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/NetworkFee/index.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/NetworkFee/index.tsx
@@ -37,10 +37,10 @@ const useStyles = makeStyles<void, 'active' | 'gasWarning' | 'gasOk'>()((theme,
     },
     box: {
         borderRadius: theme.spacing(1.5),
-        border: `1px solid ${theme.palette.maskColor.secondaryMain}`,
+        border: `1px solid ${theme.vars.palette.maskColor.secondaryMain}`,
         transition: 'border 0.2s ease',
         [`&.${refs.active}`]: {
-            border: `1px solid ${theme.palette.maskColor.main}`,
+            border: `1px solid ${theme.vars.palette.maskColor.main}`,
         },
     },
     option: {
@@ -68,7 +68,7 @@ const useStyles = makeStyles<void, 'active' | 'gasWarning' | 'gasOk'>()((theme,
         fontWeight: 700,
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     gasWarning: {},
     gasOk: {},
@@ -76,12 +76,12 @@ const useStyles = makeStyles<void, 'active' | 'gasWarning' | 'gasOk'>()((theme,
         fontWeight: 400,
         fontSize: 13,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         [`&.${refs.gasWarning}`]: {
-            color: theme.palette.maskColor.warn,
+            color: theme.vars.palette.maskColor.warn,
         },
         [`&.${refs.gasOk}`]: {
-            color: theme.palette.maskColor.success,
+            color: theme.vars.palette.maskColor.success,
         },
     },
     boxSubtitle: {
@@ -91,7 +91,7 @@ const useStyles = makeStyles<void, 'active' | 'gasWarning' | 'gasOk'>()((theme,
         fontSize: 14,
         lineHeight: '18px',
         fontWeight: 400,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     gwei: {
         lineHeight: '20px',
@@ -103,26 +103,26 @@ const useStyles = makeStyles<void, 'active' | 'gasWarning' | 'gasOk'>()((theme,
         fontSize: 13,
         fontWeight: 400,
         padding: theme.spacing(1.5),
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         display: 'flex',
         flexDirection: 'column',
         gap: theme.spacing(1.5),
         lineHeight: '18px',
-        borderTop: `1px solid ${theme.palette.maskColor.line}`,
+        borderTop: `1px solid ${theme.vars.palette.maskColor.line}`,
     },
     fieldName: {
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     fieldNote: {
         fontSize: 13,
         fontWeight: 400,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginLeft: theme.spacing(1.5),
     },
     error: {
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
         fontSize: 13,
         lineHeight: '18px',
     },
@@ -233,7 +233,7 @@ export const NetworkFee = memo(function NetworkFee() {
                     setPendingGasConfig(config)
                     navigate(-1)
                 }}>
-                <Icons.Bike size={30} color={theme.palette.maskColor.danger} />
+                <Icons.Bike size={30} color={theme.vars.palette.maskColor.danger} />
                 <div className={classes.boxMain}>
                     <Typography className={classes.boxTitle} variant="h2">
                         <Trans>Slow</Trans>
@@ -271,7 +271,7 @@ export const NetworkFee = memo(function NetworkFee() {
                     setPendingGasConfig(config)
                     navigate(-1)
                 }}>
-                <Icons.Car size={30} color={theme.palette.maskColor.main} />
+                <Icons.Car size={30} color={theme.vars.palette.maskColor.main} />
                 <div className={classes.boxMain}>
                     <Typography className={classes.boxTitle} variant="h2">
                         <Trans>Average</Trans>
@@ -305,7 +305,7 @@ export const NetworkFee = memo(function NetworkFee() {
                     setPendingGasConfig(config)
                     navigate(-1)
                 }}>
-                <Icons.Rocket size={30} color={theme.palette.maskColor.success} />
+                <Icons.Rocket size={30} color={theme.vars.palette.maskColor.success} />
                 <div className={classes.boxMain}>
                     <Typography className={classes.boxTitle} variant="h2">
                         <Trans>Fast</Trans>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/QuoteRoute.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/QuoteRoute.tsx
index f990917397c9..560112e2672b 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/QuoteRoute.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/QuoteRoute.tsx
@@ -32,7 +32,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(0.5),
         padding: theme.spacing(1.5),
         borderRadius: theme.spacing(1.5),
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
     },
     boxTitle: {
         display: 'flex',
@@ -46,7 +46,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         width: '100%',
         alignItems: 'center',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         justifyContent: 'space-between',
     },
     rowName: {
@@ -64,12 +64,12 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
     },
     highlight: {
-        backgroundColor: theme.palette.maskColor.success,
+        backgroundColor: theme.vars.palette.maskColor.success,
         lineHeight: '20px',
         fontSize: 16,
         fontWeight: 700,
         padding: theme.spacing(0.5, 1),
-        color: theme.palette.maskColor.white,
+        color: theme.vars.palette.maskColor.white,
         borderRadius: theme.spacing(0.5),
     },
     tooSmall: {
@@ -78,16 +78,16 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 16,
         fontWeight: 400,
         padding: theme.spacing(0.5, 1),
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
         borderRadius: theme.spacing(0.5),
     },
     normal: {
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         lineHeight: '20px',
         fontSize: 16,
         fontWeight: 400,
         padding: theme.spacing(0.5, 1),
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         borderRadius: theme.spacing(0.5),
     },
     tags: {
@@ -102,8 +102,8 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(0.5),
         padding: theme.spacing(0.5),
         borderRadius: theme.spacing(0.5),
-        backgroundColor: theme.palette.maskColor.bg,
-        color: theme.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.bg,
+        color: theme.vars.palette.maskColor.main,
         textDecoration: 'none',
     },
 }))
@@ -172,7 +172,7 @@ export const QuoteRoute = memo(function QuoteRoute() {
                     <ShadowRootTooltip title={rankTooltip}>
                         <Icons.Questions
                             size={16}
-                            color={theme.palette.maskColor.second}
+                            color={theme.vars.palette.maskColor.second}
                             onClick={() => {
                                 showToolTip({
                                     title: t`Rank`,
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/SelectLiquidity.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/SelectLiquidity.tsx
index 23749299fa0c..3c90cb1fb4c1 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/SelectLiquidity.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/SelectLiquidity.tsx
@@ -1,8 +1,8 @@
 import { Icons } from '@masknet/icons'
 import { EmptyStatus, LoadingStatus } from '@masknet/shared'
 import { EMPTY_LIST } from '@masknet/shared-base'
-import { makeStyles, MaskTextField } from '@masknet/theme'
-import { alpha, Avatar, Box, Button, Checkbox, Radio, Typography } from '@mui/material'
+import { alpha, makeStyles, MaskTextField } from '@masknet/theme'
+import { Avatar, Box, Button, Checkbox, Radio, Typography } from '@mui/material'
 import Fuse from 'fuse.js'
 import { groupBy, sortBy } from 'lodash-es'
 import { memo, useMemo, useState } from 'react'
@@ -43,7 +43,7 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 12,
     },
     groupName: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginBottom: theme.spacing(1),
         paddingLeft: theme.spacing(0.5),
         fontSize: 14,
@@ -61,7 +61,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     liquidityName: {
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         lineHeight: '18px',
         fontSize: 14,
     },
@@ -72,11 +72,11 @@ const useStyles = makeStyles()((theme) => ({
         boxSizing: 'content-box',
         display: 'flex',
         gap: theme.spacing(1.5),
-        backgroundColor: alpha(theme.palette.maskColor.bottom, 0.8),
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 0px 20px rgba(255, 255, 255, 0.12)'
-            :   '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        backgroundColor: alpha(theme.vars.palette.maskColor.bottom, 0.8),
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
         backdropFilter: 'blur(16px)',
         padding: theme.spacing(2),
         borderRadius: '0 0 12px 12px',
@@ -94,7 +94,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         flexShrink: 0,
         flexGrow: 1,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 
@@ -177,9 +177,9 @@ export const SelectLiquidity = memo(function SelectLiquidity() {
                                                 checkedIcon={
                                                     <Icons.Checkbox
                                                         sx={{
-                                                            '--stroke-color': theme.palette.maskColor.bottom,
+                                                            '--stroke-color': theme.vars.palette.maskColor.bottom,
                                                         }}
-                                                        color={theme.palette.maskColor.main}
+                                                        color={theme.vars.palette.maskColor.main}
                                                         size={20}
                                                     />
                                                 }
@@ -217,12 +217,12 @@ export const SelectLiquidity = memo(function SelectLiquidity() {
                             setPendingDisabledDexIds(isSelectedAll ? liquidityList.map((x) => x.id) : EMPTY_LIST)
                         }}
                         checked={isSelectedAll}
-                        icon={<Icons.RadioButtonUnChecked size={18} color={theme.palette.maskColor.main} />}
+                        icon={<Icons.RadioButtonUnChecked size={18} color={theme.vars.palette.maskColor.main} />}
                         checkedIcon={
                             <Icons.RadioButtonChecked
                                 size={18}
-                                color={theme.palette.maskColor.main}
-                                sx={{ '--stroke-color': theme.palette.maskColor.bottom }}
+                                color={theme.vars.palette.maskColor.main}
+                                sx={{ '--stroke-color': theme.vars.palette.maskColor.bottom }}
                             />
                         }
                     />
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Slippage.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Slippage.tsx
index dbda108c3e1f..4991fc78b17d 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Slippage.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Slippage.tsx
@@ -1,6 +1,6 @@
-import { makeStyles, MaskTextField } from '@masknet/theme'
+import { alpha, makeStyles, MaskTextField } from '@masknet/theme'
 import { leftShift } from '@masknet/web3-shared-base'
-import { alpha, Button, Typography } from '@mui/material'
+import { Button, Typography } from '@mui/material'
 import { isNumber } from 'lodash-es'
 import { memo, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -19,7 +19,7 @@ const useStyles = makeStyles<void, 'active'>()((theme, _, refs) => ({
         display: 'flex',
         flexDirection: 'column',
         gap: theme.spacing(2),
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         padding: theme.spacing(1.5),
         borderRadius: theme.spacing(1.5),
         marginBottom: 'auto',
@@ -30,10 +30,10 @@ const useStyles = makeStyles<void, 'active'>()((theme, _, refs) => ({
         gap: theme.spacing(0.5),
         padding: theme.spacing(1.5),
         borderRadius: theme.spacing(1.5),
-        border: `1px solid ${theme.palette.maskColor.secondaryMain}`,
+        border: `1px solid ${theme.vars.palette.maskColor.secondaryMain}`,
         cursor: 'pointer',
         [`&.${refs.active}`]: {
-            border: `1px solid ${theme.palette.maskColor.main}`,
+            border: `1px solid ${theme.vars.palette.maskColor.main}`,
         },
     },
     active: {},
@@ -50,25 +50,25 @@ const useStyles = makeStyles<void, 'active'>()((theme, _, refs) => ({
         lineHeight: '16px',
         padding: theme.spacing(0.5),
         borderRadius: theme.spacing(0.5),
-        backgroundColor: theme.palette.maskColor.bg,
-        color: theme.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.bg,
+        color: theme.vars.palette.maskColor.main,
     },
     boxContent: {
         fontSize: 13,
         fontWeight: 400,
         padding: theme.spacing(0.5),
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         lineHeight: '18px',
     },
     footer: {
         boxSizing: 'content-box',
         display: 'flex',
         gap: theme.spacing(1.5),
-        backgroundColor: alpha(theme.palette.maskColor.bottom, 0.8),
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 0px 20px rgba(255, 255, 255, 0.12)'
-            :   '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        backgroundColor: alpha(theme.vars.palette.maskColor.bottom, 0.8),
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
         backdropFilter: 'blur(16px)',
         padding: theme.spacing(2),
         borderRadius: '0 0 12px 12px',
@@ -81,7 +81,7 @@ const useStyles = makeStyles<void, 'active'>()((theme, _, refs) => ({
         display: 'flex',
         width: '100%',
         alignItems: 'center',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         justifyContent: 'space-between',
     },
     rowName: {
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/Quote.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/Quote.tsx
index 9f0aba60dca2..ab60f422eb64 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/Quote.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/Quote.tsx
@@ -22,7 +22,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         width: '100%',
         alignItems: 'center',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         justifyContent: 'space-between',
     },
     rowName: {
@@ -41,7 +41,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     link: {
         cursor: 'pointer',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         textDecoration: 'none',
     },
     rotate: {
@@ -56,7 +56,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
     },
     bestTag: {
-        backgroundColor: theme.palette.maskColor.success,
+        backgroundColor: theme.vars.palette.maskColor.success,
         borderRadius: 4,
         lineHeight: '18px',
         fontSize: 14,
@@ -94,7 +94,11 @@ export function Quote({ quote, ...props }: QuoteProps) {
         <>
             1 {baseToken.tokenSymbol} ≈ {rate ? formatCompact(rate.toNumber(), { maximumFractionDigits: 6 }) : '--'}{' '}
             {targetToken.tokenSymbol}
-            <Icons.Cached size={16} color={theme.palette.maskColor.main} onClick={() => setForwardCompare((v) => !v)} />
+            <Icons.Cached
+                size={16}
+                color={theme.vars.palette.maskColor.main}
+                onClick={() => setForwardCompare((v) => !v)}
+            />
         </>
     )
 
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx
index 1efd3e9c19c8..db218756b49c 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx
@@ -49,7 +49,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     box: {
         position: 'relative',
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         padding: theme.spacing(1.5),
         borderRadius: 12,
         display: 'flex',
@@ -65,10 +65,10 @@ const useStyles = makeStyles()((theme) => ({
         transform: 'translateX(-50%) rotate(90deg)',
         width: 32,
         height: 32,
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         borderRadius: '50%',
-        color: theme.palette.maskColor.main,
-        backgroundColor: theme.palette.maskColor.bottom,
+        color: theme.vars.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
         cursor: 'pointer',
     },
     token: {
@@ -90,11 +90,11 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         lineHeight: '18px',
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     chain: {
         fontSize: 13,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         lineHeight: '18px',
     },
     tokenStatus: {
@@ -109,7 +109,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     tokenInput: {
         height: '100%',
@@ -117,7 +117,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         fontWeight: 700,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         border: 'none',
         backgroundColor: 'transparent',
         outline: 'none',
@@ -127,7 +127,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: '13px',
         fontWeight: 400,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         position: 'absolute',
         right: 0,
         bottom: 0,
@@ -136,8 +136,8 @@ const useStyles = makeStyles()((theme) => ({
         padding: '0 6px',
         fontSize: 12,
         lineHeight: '16px',
-        color: theme.palette.maskColor.bottom,
-        backgroundColor: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.main,
         borderRadius: 4,
         minWidth: 0,
     },
@@ -146,10 +146,8 @@ const useStyles = makeStyles()((theme) => ({
     },
     footer: {
         flexShrink: 0,
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                '0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', { boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)' }),
     },
 }))
 
@@ -330,7 +328,7 @@ export function TradeView() {
                             setFromToken(toToken)
                             setToToken(fromToken)
                         }}>
-                        <Icons.BiArrow size={16} color={theme.palette.maskColor.main} />
+                        <Icons.BiArrow size={16} color={theme.vars.palette.maskColor.main} />
                     </Box>
                     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                         <Typography sx={{ lineHeight: '18px', fontWeight: '700', fontSize: '14px' }}>To</Typography>
@@ -391,8 +389,8 @@ export function TradeView() {
                                             className={classes.diff}
                                             color={
                                                 isGreaterThan(priceDiff, 0) ?
-                                                    theme.palette.maskColor.success
-                                                :   theme.palette.maskColor.danger
+                                                    theme.vars.palette.maskColor.success
+                                                :   theme.vars.palette.maskColor.danger
                                             }>
                                             ({isGreaterThan(priceDiff, 0) ? '+' : ''}
                                             {priceDiff.toFixed(2)}%)
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/TradingRoute.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/TradingRoute.tsx
index c0725f7d6b2c..c9f1a6c7a87c 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/TradingRoute.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/TradingRoute.tsx
@@ -35,10 +35,10 @@ const useStyles = makeStyles()((theme) => ({
     },
     arrow: {
         transform: 'rotate(-90deg)',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     token: {
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         display: 'flex',
         alignItems: 'center',
         padding: theme.spacing('8px', '6px'),
@@ -46,17 +46,17 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(0.5),
         fontSize: 14,
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     pool: {
         flexGrow: 1,
         flexBasis: 0,
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         padding: theme.spacing(1.5),
         borderRadius: theme.spacing(1.5),
         fontSize: 13,
         fontWeight: 400,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         textOverflow: 'ellipsis',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx
index ce326e5f9c00..6847bfc23be4 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx
@@ -2,12 +2,12 @@ import { Trans, useLingui } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { CopyButton, EmptyStatus, NetworkIcon, ProgressiveText, Spinner, useUnmountedRef } from '@masknet/shared'
 import { NetworkPluginID, Sniffings } from '@masknet/shared-base'
-import { LoadingBase, makeStyles } from '@masknet/theme'
+import { alpha, LoadingBase, makeStyles } from '@masknet/theme'
 import { useAccount, useNetwork, useWeb3Connection, useWeb3Utils } from '@masknet/web3-hooks-base'
 import { EVMExplorerResolver, OKX } from '@masknet/web3-providers'
 import { dividedBy, formatBalance, formatCompact, leftShift, TransactionStatusType } from '@masknet/web3-shared-base'
 import { type ChainId, formatEthereumAddress, isTransactionReceiptSuccess } from '@masknet/web3-shared-evm'
-import { alpha, Box, Button, Link as MuiLink, Typography } from '@mui/material'
+import { Box, Button, Link as MuiLink, Typography } from '@mui/material'
 import { skipToken, useQuery } from '@tanstack/react-query'
 import { format } from 'date-fns'
 import { memo, useCallback, useMemo, useState } from 'react'
@@ -64,14 +64,14 @@ const useStyles = makeStyles<void, 'leftSideToken' | 'rightSideToken'>()((theme,
     },
     countdown: {
         fontWeight: 700,
-        color: theme.palette.maskColor.success,
+        color: theme.vars.palette.maskColor.success,
     },
     note: {
         fontSize: 14,
         lineHeight: '18px',
     },
     box: {
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         borderRadius: 12,
         padding: theme.spacing(1.5),
     },
@@ -110,7 +110,7 @@ const useStyles = makeStyles<void, 'leftSideToken' | 'rightSideToken'>()((theme,
         '&::before': {
             content: '""',
             height: 40,
-            borderLeft: `1px solid ${theme.palette.maskColor.line}`,
+            borderLeft: `1px solid ${theme.vars.palette.maskColor.line}`,
             position: 'absolute',
             zIndex: 1,
         },
@@ -145,7 +145,7 @@ const useStyles = makeStyles<void, 'leftSideToken' | 'rightSideToken'>()((theme,
         lineHeight: '18px',
         padding: theme.spacing(0.5),
         borderRadius: theme.spacing(0.5),
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
     },
     value: {
         fontSize: 14,
@@ -158,14 +158,14 @@ const useStyles = makeStyles<void, 'leftSideToken' | 'rightSideToken'>()((theme,
     },
     network: {
         fontSize: 13,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         lineHeight: '18px',
     },
     toToken: {
         fontSize: 14,
         lineHeight: '18px',
         fontWeight: 400,
-        color: theme.palette.maskColor.success,
+        color: theme.vars.palette.maskColor.success,
         display: 'flex',
         alignItems: 'center',
     },
@@ -178,14 +178,14 @@ const useStyles = makeStyles<void, 'leftSideToken' | 'rightSideToken'>()((theme,
         display: 'flex',
         width: '100%',
         alignItems: 'flex-start',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         justifyContent: 'space-between',
     },
     rowName: {
         fontSize: 14,
         display: 'flex',
         gap: theme.spacing(0.5),
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         alignItems: 'center',
         flexGrow: 1,
         marginRight: 'auto',
@@ -199,13 +199,13 @@ const useStyles = makeStyles<void, 'leftSideToken' | 'rightSideToken'>()((theme,
     },
     footer: {
         flexShrink: 0,
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                '0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        }),
         boxSizing: 'content-box',
         display: 'flex',
-        backgroundColor: alpha(theme.palette.maskColor.bottom, 0.8),
+        backgroundColor: alpha(theme.vars.palette.maskColor.bottom, 0.8),
         backdropFilter: 'blur(16px)',
         padding: theme.spacing(2),
         borderRadius: '0 0 12px 12px',
@@ -213,7 +213,7 @@ const useStyles = makeStyles<void, 'leftSideToken' | 'rightSideToken'>()((theme,
         justifyContent: 'space-between',
         flex: 1,
         maxHeight: 40,
-        color: theme.palette.maskColor.bottom,
+        color: theme.vars.palette.maskColor.bottom,
     },
     button: {
         display: 'flex',
@@ -224,7 +224,7 @@ const useStyles = makeStyles<void, 'leftSideToken' | 'rightSideToken'>()((theme,
         borderRadius: '50%',
         marginLeft: -8,
         marginRight: theme.spacing(1),
-        boxShadow: `0 0 0 1px ${theme.palette.maskColor.bottom}`,
+        boxShadow: `0 0 0 1px ${theme.vars.palette.maskColor.bottom}`,
     },
     toastLink: {
         display: 'flex',
@@ -355,7 +355,7 @@ export const Transaction = memo(function Transaction() {
                 {targetToken.symbol}
                 <Icons.Cached
                     size={16}
-                    color={theme.palette.maskColor.main}
+                    color={theme.vars.palette.maskColor.main}
                     onClick={() => setForwardCompare((v) => !v)}
                 />
             </>
@@ -403,13 +403,13 @@ export const Transaction = memo(function Transaction() {
                 : txSucceed || bridgeStatus?.status === 'SUCCESS' ?
                     <div className={classes.header}>
                         <Icons.FillSuccess size={72} />
-                        <Typography className={classes.title} color={theme.palette.maskColor.success}>
+                        <Typography className={classes.title} color={theme.vars.palette.maskColor.success}>
                             <Trans>Complete</Trans>
                         </Typography>
                     </div>
                 :   <div className={classes.header}>
-                        <Icons.ColorfulClose color={theme.palette.maskColor.danger} size={72} />
-                        <Typography className={classes.title} color={theme.palette.maskColor.danger}>
+                        <Icons.ColorfulClose color={theme.vars.palette.maskColor.danger} size={72} />
+                        <Typography className={classes.title} color={theme.vars.palette.maskColor.danger}>
                             <Trans>Failed</Trans>
                         </Typography>
                     </div>
@@ -470,7 +470,7 @@ export const Transaction = memo(function Transaction() {
                                     <a
                                         href={EVMExplorerResolver.transactionLink(fromChainId, bridgeStatus.fromTxHash)}
                                         target="_blank">
-                                        <Icons.LinkOut color={theme.palette.maskColor.second} size={16} />
+                                        <Icons.LinkOut color={theme.vars.palette.maskColor.second} size={16} />
                                     </a>
                                 :   null}
                             </div>
@@ -538,11 +538,11 @@ export const Transaction = memo(function Transaction() {
                                 <a
                                     href={EVMExplorerResolver.transactionLink(toChainId, bridgeStatus.toTxHash)}
                                     target="_blank">
-                                    <Icons.LinkOut color={theme.palette.maskColor.second} size={16} />
+                                    <Icons.LinkOut color={theme.vars.palette.maskColor.second} size={16} />
                                 </a>
                             : tx.kind === 'swap' ?
                                 <a href={EVMExplorerResolver.transactionLink(tx.chainId, tx.hash)} target="_blank">
-                                    <Icons.LinkOut color={theme.palette.maskColor.second} size={16} />
+                                    <Icons.LinkOut color={theme.vars.palette.maskColor.second} size={16} />
                                 </a>
                             :   null}
                         </div>
@@ -653,7 +653,7 @@ export const Transaction = memo(function Transaction() {
                             setToToken(okxTokenToFungibleToken(tx.toToken))
                             navigate(urlcat(basePath, RoutePaths.Trade, { mode: tx.kind }))
                         }}>
-                        <Icons.Cached color={theme.palette.maskColor.bottom} />
+                        <Icons.Cached color={theme.vars.palette.maskColor.bottom} />
                         {txSucceed ?
                             isSwap ?
                                 <Trans>Make another Swap</Trans>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/PluginDescriptor.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/PluginDescriptor.tsx
index da9203533a9d..18a5b4c2be74 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/PluginDescriptor.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/PluginDescriptor.tsx
@@ -33,7 +33,7 @@ export function PluginDescriptor({ children, isProfilePage, isTokenTagPopper }:
                         fontWeight: 'bolder',
                         fontSize: 16,
                         color: (theme) =>
-                            isTokenTagPopper ? theme.palette.maskColor.main : theme.palette.maskColor.dark,
+                            isTokenTagPopper ? theme.vars.palette.maskColor.main : theme.vars.palette.maskColor.dark,
                     }}>
                     {isTokenTagPopper ?
                         <Trans>Web3 Profile Card</Trans>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/PriceChartDaysControl.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/PriceChartDaysControl.tsx
index 4a62e9b5f6a1..86663761ca21 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/PriceChartDaysControl.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/PriceChartDaysControl.tsx
@@ -5,13 +5,13 @@ import { resolveDaysName } from '../../helpers/index.js'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
-        background: theme.palette.maskColor.input,
+        background: theme.vars.palette.maskColor.input,
         borderRadius: 28,
         padding: theme.spacing(0.5),
     },
     active: {
         boxShadow: '0px 2px 5px 1px rgba(0, 0, 0, 0.05)',
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         fontWeight: 700,
     },
     link: {
@@ -20,7 +20,7 @@ const useStyles = makeStyles()((theme) => ({
         cursor: 'pointer',
         borderRadius: 18,
         textAlign: 'center',
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         textDecoration: 'none !important',
     },
 }))
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx
index c2d78ba93412..54e7e16711c2 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx
@@ -36,7 +36,7 @@ const useStyles = makeStyles<{ themeMode?: 'dim' | 'dark' | 'light'; isPopper?:
         cell: {
             paddingLeft: theme.spacing(0.5),
             paddingRight: theme.spacing(0.5),
-            background: themeMode === 'dim' && !isPopper ? '#15202b' : theme.palette.maskColor.bottom,
+            background: themeMode === 'dim' && !isPopper ? '#15202b' : theme.vars.palette.maskColor.bottom,
             fontSize: 12,
             fontWeight: 700,
             whiteSpace: 'nowrap',
@@ -120,7 +120,7 @@ export function TickersTable({ tickers }: TickersTableProps) {
                         arrow>
                         <Box className={classes.pair}>
                             <Link
-                                sx={{ color: (theme) => theme.palette.maskColor?.primary }}
+                                sx={{ color: (theme) => theme.vars.palette.maskColor?.primary }}
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 href={ticker.trade_url}>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx
index faf69d4b1452..e9125a9753ad 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx
@@ -10,8 +10,7 @@ import type { TrendingAPI } from '@masknet/web3-providers/types'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventID, EventType } from '@masknet/web3-telemetry/types'
 import { TabContext } from '@mui/lab'
-import { Stack, Tab, ThemeProvider } from '@mui/material'
-import { Box, useTheme } from '@mui/system'
+import { Box, Stack, Tab, ThemeProvider, useTheme } from '@mui/material'
 import { first } from 'lodash-es'
 import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { usePriceStats } from '../../trending/usePriceStats.js'
@@ -36,10 +35,10 @@ const useStyles = makeStyles<{
                 {
                     width: 598,
                     borderRadius: theme.spacing(2),
-                    boxShadow:
-                        theme.palette.mode === 'dark' ?
-                            'rgba(255, 255, 255, 0.2) 0 0 15px, rgba(255, 255, 255, 0.15) 0 0 3px 1px'
-                        :   'rgba(101, 119, 134, 0.2) 0 0 15px, rgba(101, 119, 134, 0.15) 0 0 3px 1px',
+                    boxShadow: 'rgba(101, 119, 134, 0.2) 0 0 15px, rgba(101, 119, 134, 0.15) 0 0 3px 1px',
+                    ...theme.applyStyles('dark', {
+                        boxShadow: 'rgba(255, 255, 255, 0.2) 0 0 15px, rgba(255, 255, 255, 0.15) 0 0 3px 1px',
+                    }),
                 }
             :   {
                     width: '100%',
@@ -60,7 +59,7 @@ const useStyles = makeStyles<{
             props.isTokenTagPopper ?
                 {}
             :   {
-                    borderBottom: `solid 1px ${theme.palette.divider}`,
+                    borderBottom: `solid 1px ${theme.vars.palette.divider}`,
                 },
         content:
             props.isTokenTagPopper ?
@@ -274,7 +273,7 @@ export function TrendingView(props: TrendingViewProps) {
             </TabContext>
             <Stack
                 sx={{
-                    backgroundColor: isTokenTagPopper ? theme.palette.maskColor.bottom : 'transparent',
+                    backgroundColor: isTokenTagPopper ? theme.vars.palette.maskColor.bottom : 'transparent',
                     flexGrow: 1,
                     overflow: 'auto',
                     scrollbarWidth: 'none',
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx
index cb783d0e48e5..28695e5998ae 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx
@@ -83,12 +83,12 @@ const useStyles = makeStyles<{
             overflow: 'hidden',
             fontSize: 18,
             fontWeight: 700,
-            color: theme.palette.maskColor.dark,
+            color: theme.vars.palette.maskColor.dark,
         },
         symbol: {
             fontWeight: 700,
             fontSize: 18,
-            color: theme.palette.maskColor.dark,
+            color: theme.vars.palette.maskColor.dark,
             marginLeft: theme.spacing(0.5),
             marginRight: theme.spacing(0.5),
             display: 'flex',
@@ -106,17 +106,17 @@ const useStyles = makeStyles<{
         rank: {
             display: 'inline-flex',
             padding: theme.spacing(0.25, 0.5),
-            color: theme.palette.maskColor.white,
+            color: theme.vars.palette.maskColor.white,
             fontWeight: 400,
             fontSize: 10,
-            background: theme.palette.maskColor.dark,
+            background: theme.vars.palette.maskColor.dark,
             borderRadius: theme.spacing(0.5),
         },
         avatar: {
             width: 24,
             height: 24,
             fontSize: 10,
-            backgroundColor: theme.palette.common.white,
+            backgroundColor: theme.vars.palette.common.white,
         },
         buttons: {
             marginLeft: 'auto',
@@ -136,7 +136,7 @@ const useStyles = makeStyles<{
             right: 0,
             display: 'flex',
             alignItems: 'center',
-            background: theme.palette.maskColor.bg,
+            background: theme.vars.palette.maskColor.bg,
             backdropFilter: 'blur(5px)',
             boxSizing: 'border-box',
             borderBottomRightRadius: '16px',
@@ -355,7 +355,7 @@ export function TrendingViewDeck(props: TrendingViewDeckProps) {
                                                 fontWeight: 500,
                                                 lineHeight: '24px',
                                             }}
-                                            color={theme.palette.maskColor.dark}>
+                                            color={theme.vars.palette.maskColor.dark}>
                                             {floorPrice ? formatCurrency(floorPrice, 'USD') : '--'}
                                         </Typography>
                                     :   <Typography sx={{ fontSize: 14, fontWeight: 500, lineHeight: '24px' }}>
@@ -384,7 +384,7 @@ export function TrendingViewDeck(props: TrendingViewDeckProps) {
                 <Paper className={classes.body} elevation={0}>
                     {children}
                     {isTokenTagPopper && currentTab === ContentTab.Market ?
-                        <Stack style={{ height: 48, width: '100%', background: theme.palette.maskColor.bottom }} />
+                        <Stack style={{ height: 48, width: '100%', background: theme.vars.palette.maskColor.bottom }} />
                     :   null}
                 </Paper>
                 {isTokenTagPopper ?
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDescriptor.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDescriptor.tsx
index 11b55611c345..a0319df850d8 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDescriptor.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDescriptor.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles<{
             justifyContent: 'space-between',
         },
         sourceNote: {
-            color: theme.palette.maskColor.secondaryDark,
+            color: theme.vars.palette.maskColor.secondaryDark,
             marginRight: 4,
             fontWeight: 700,
         },
@@ -28,10 +28,10 @@ const useStyles = makeStyles<{
         },
         selectedOption: {
             fontWeight: 700,
-            color: props.isTokenTagPopper ? theme.palette.maskColor.main : theme.palette.maskColor.dark,
+            color: props.isTokenTagPopper ? theme.vars.palette.maskColor.main : theme.vars.palette.maskColor.dark,
         },
         arrowDropIcon: {
-            color: props.isTokenTagPopper ? theme.palette.maskColor.main : theme.palette.maskColor.dark,
+            color: props.isTokenTagPopper ? theme.vars.palette.maskColor.main : theme.vars.palette.maskColor.dark,
         },
     }
 })
diff --git a/packages/plugins/Transak/src/SiteAdaptor/BuyTokenDialog.tsx b/packages/plugins/Transak/src/SiteAdaptor/BuyTokenDialog.tsx
index b37da7800628..9135a3c46595 100644
--- a/packages/plugins/Transak/src/SiteAdaptor/BuyTokenDialog.tsx
+++ b/packages/plugins/Transak/src/SiteAdaptor/BuyTokenDialog.tsx
@@ -13,8 +13,8 @@ const useStyles = makeStyles()((theme) => ({
         padding: '0 !important',
     },
     close: {
-        color: `${theme.palette.common.white} !important`,
-        backgroundColor: `${theme.palette.maskColor.dark} !important`,
+        color: `${theme.vars.palette.common.white} !important`,
+        backgroundColor: `${theme.vars.palette.maskColor.dark} !important`,
         top: theme.spacing(-2),
         right: theme.spacing(-2),
         position: 'absolute',
@@ -22,7 +22,7 @@ const useStyles = makeStyles()((theme) => ({
     content: {
         width: '100%',
         padding: 0,
-        backgroundColor: theme.palette.common.white,
+        backgroundColor: theme.vars.palette.common.white,
         position: 'relative',
         '::-webkit-scrollbar': {
             display: 'none',
diff --git a/packages/plugins/Transak/src/hooks/useTransakURL.ts b/packages/plugins/Transak/src/hooks/useTransakURL.ts
index 56cf5c226616..ca75c869b0d8 100644
--- a/packages/plugins/Transak/src/hooks/useTransakURL.ts
+++ b/packages/plugins/Transak/src/hooks/useTransakURL.ts
@@ -1,15 +1,8 @@
-import { useMemo } from 'react'
-import { rgbToHex, useTheme, type Theme } from '@mui/material'
+import { rgbToHex, type Theme } from '@mui/material'
 import { TRANSAK_API_KEY_PRODUCTION, TRANSAK_API_KEY_STAGING } from '../constants.js'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import type { TransakConfig } from '../types.js'
 
-const HOST_MAP = {
-    production: 'https://global.transak.com',
-    development: 'https://staging-global.transak.com',
-    test: 'https://development-global.transak.com',
-}
-
 const DEFAULT_PARAMETERS: TransakConfig = {
     apiKey: process.env.NODE_ENV === 'production' ? TRANSAK_API_KEY_PRODUCTION : TRANSAK_API_KEY_STAGING,
     environment: process.env.NODE_ENV === 'production' ? 'PRODUCTION' : 'STAGING',
@@ -40,13 +33,3 @@ export function buildTransakSearchParams(config?: Partial<TransakConfig>, theme?
     })
     return params
 }
-
-export function useTransakURL(config?: Partial<TransakConfig>) {
-    const theme = useTheme()
-    const search = useMemo(
-        () => buildTransakSearchParams(config, theme).toString(),
-        // eslint-disable-next-line react-compiler/react-compiler
-        [theme.palette.primary.main, JSON.stringify(config)],
-    )
-    return `${HOST_MAP[process.env.NODE_ENV]}?${search}`
-}
diff --git a/packages/plugins/Transak/src/index.ts b/packages/plugins/Transak/src/index.ts
index 20b28c4ef4d6..005d7d1cfb21 100644
--- a/packages/plugins/Transak/src/index.ts
+++ b/packages/plugins/Transak/src/index.ts
@@ -1,4 +1,3 @@
 export { PluginTransakMessages } from './messages.js'
 export { useTransakAllowanceCoin } from './hooks/useTransakAllowanceCoin.js'
-export { useTransakURL } from './hooks/useTransakURL.js'
 export { useTransakWidgetURL } from './hooks/useTransakWidgetURL.js'
diff --git a/packages/plugins/VCent/src/SiteAdaptor/TweetDialog.tsx b/packages/plugins/VCent/src/SiteAdaptor/TweetDialog.tsx
index be5c29253217..6f4e8cb6ae26 100644
--- a/packages/plugins/VCent/src/SiteAdaptor/TweetDialog.tsx
+++ b/packages/plugins/VCent/src/SiteAdaptor/TweetDialog.tsx
@@ -1,10 +1,10 @@
 import { Icons } from '@masknet/icons'
 import { usePluginWrapper } from '@masknet/plugin-infra/content-script'
 import { ImageIcon } from '@masknet/shared'
-import { makeStyles } from '@masknet/theme'
+import { alpha, makeStyles  } from '@masknet/theme'
 import { useNetworkDescriptor } from '@masknet/web3-hooks-base'
 import { ChainId } from '@masknet/web3-shared-evm'
-import { alpha, Box, Button, Typography } from '@mui/material'
+import { Box, Button, Typography } from '@mui/material'
 import { first } from 'lodash-es'
 import { memo } from 'react'
 import { useAsync } from 'react-use'
@@ -18,7 +18,7 @@ const useStyle = makeStyles()((theme) => ({
         margin: theme.spacing(1.5),
         display: 'flex',
         gap: theme.spacing(1),
-        backgroundColor: alpha(theme.palette.maskColor.white, 0.8),
+        backgroundColor: alpha(theme.vars.palette.maskColor.white, 0.8),
         padding: theme.spacing(1),
         alignItems: 'center',
         borderRadius: 8,
@@ -28,7 +28,7 @@ const useStyle = makeStyles()((theme) => ({
         height: 30,
         filter: 'drop-shadow(0px 6px 12px rgba(29, 155, 240, 0.2))',
         backdropFilter: 'blur(8px)',
-        fill: theme.palette.maskColor.publicTwitter,
+        fill: theme.vars.palette.maskColor.publicTwitter,
     },
     content: {
         flex: 1,
@@ -41,14 +41,14 @@ const useStyle = makeStyles()((theme) => ({
         marginRight: theme.spacing(0.5),
         fontWeight: 'bold',
         fontSize: 14,
-        color: theme.palette.maskColor.publicSecond,
+        color: theme.vars.palette.maskColor.publicSecond,
     },
     button: {
-        backgroundColor: theme.palette.maskColor.publicMain,
-        color: theme.palette.maskColor.white,
+        backgroundColor: theme.vars.palette.maskColor.publicMain,
+        color: theme.vars.palette.maskColor.white,
         '&:hover': {
-            backgroundColor: theme.palette.maskColor.publicMain,
-            color: theme.palette.maskColor.white,
+            backgroundColor: theme.vars.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.white,
         },
         height: 32,
         width: 60,
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx
index 6fbad03c19b6..f0b1f5fd5e7b 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx
@@ -36,14 +36,14 @@ const useStyles = makeStyles<{ account: boolean }>()((theme, { account }) => ({
         fontSize: 16,
         lineHeight: '20px',
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         marginTop: 24,
     },
     handle: {
         fontSize: 16,
         lineHeight: '20px',
         fontWeight: 400,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         margin: theme.spacing(0.5, 0),
     },
     followers: {
@@ -52,7 +52,7 @@ const useStyles = makeStyles<{ account: boolean }>()((theme, { account }) => ({
         columnGap: 8,
     },
     dialogTitle: {
-        background: `${theme.palette.maskColor.bottom}!important`,
+        background: `${theme.vars.palette.maskColor.bottom}!important`,
     },
     dialogContent: {
         maxWidth: 400,
@@ -67,15 +67,15 @@ const useStyles = makeStyles<{ account: boolean }>()((theme, { account }) => ({
     },
     followAction: {
         backgroundColor: '#A1FE27',
-        color: theme.palette.maskColor.publicMain,
+        color: theme.vars.palette.maskColor.publicMain,
         '&:hover': {
             backgroundColor: '#A1FE27',
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
         },
         [`&.${buttonClasses.disabled}`]: {
             background: '#A1FE27',
             opacity: 0.6,
-            color: theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
         },
     },
     profile: {
@@ -84,7 +84,7 @@ const useStyles = makeStyles<{ account: boolean }>()((theme, { account }) => ({
     },
     tips: {
         marginBottom: theme.spacing(3),
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 14,
     },
     canvas: {
@@ -98,7 +98,7 @@ const useStyles = makeStyles<{ account: boolean }>()((theme, { account }) => ({
     },
     linkButton: {
         '&:hover': {
-            backgroundColor: theme.palette.maskColor.thirdMain,
+            backgroundColor: theme.vars.palette.maskColor.thirdMain,
         },
     },
 }))
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/HandlerDescription.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/HandlerDescription.tsx
index 7777ef909a59..71d7f4c2e662 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/HandlerDescription.tsx
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/HandlerDescription.tsx
@@ -23,7 +23,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         borderRadius: 8,
         padding: theme.spacing(1.5),
     },
@@ -36,7 +36,7 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
@@ -45,7 +45,7 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     avatar: {
         objectFit: 'cover',
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx
index ab083e172d47..ba1a1d063e17 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx
@@ -23,24 +23,22 @@ import { memo } from 'react'
 
 const useStyles = makeStyles()((theme) => ({
     paper: {
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         width: 320,
         padding: theme.spacing(1.5),
-        filter:
-            theme.palette.mode === 'light' ?
-                'drop-shadow(0px 4px 30px rgba(0, 0, 0, 0.1))'
-            :   'drop-shadow(0px 4px 30px rgba(255, 255, 255, 0.15))',
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                '0px 4px 30px 0px rgba(0, 0, 0, 0.1)'
-            :   '0px 4px 30px 0px rgba(255, 255, 255, 0.15)',
+        filter: 'drop-shadow(0px 4px 30px rgba(0, 0, 0, 0.1))',
+        boxShadow: '0px 4px 30px 0px rgba(0, 0, 0, 0.1)',
+        ...theme.applyStyles('dark', {
+            filter: 'drop-shadow(0px 4px 30px rgba(255, 255, 255, 0.15))',
+            boxShadow: '0px 4px 30px 0px rgba(255, 255, 255, 0.15)',
+        }),
     },
     avatar: {
         borderRadius: 99,
         overflow: 'hidden',
     },
     primary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         lineHeight: '18px',
         overflow: 'hidden',
@@ -57,7 +55,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
-        background: theme.palette.maskColor.bg,
+        background: theme.vars.palette.maskColor.bg,
         borderRadius: 8,
         padding: theme.spacing(1.5),
     },
@@ -69,13 +67,13 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     address: {
         fontWeight: 700,
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     list: {
         maxHeight: 200,
@@ -90,13 +88,13 @@ const useStyles = makeStyles()((theme) => ({
             borderRadius: '20px',
             width: 5,
             border: '7px solid rgba(0, 0, 0, 0)',
-            backgroundColor: theme.palette.maskColor.secondaryLine,
+            backgroundColor: theme.vars.palette.maskColor.secondaryLine,
             backgroundClip: 'padding-box',
         },
     },
     managedTag: {
-        background: theme.palette.maskColor.third,
-        color: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.bottom,
         fontSize: 12,
         padding: theme.spacing(0.5),
         borderRadius: 4,
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/FarcasterList.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/FarcasterList.tsx
index af5bedddbc32..615c9ddd3ae6 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/FarcasterList.tsx
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/FarcasterList.tsx
@@ -16,7 +16,7 @@ const useStyles = makeStyles()((theme) => {
             marginBottom: 6,
             borderRadius: 4,
             '&:hover': {
-                backgroundColor: theme.palette.maskColor.bg,
+                backgroundColor: theme.vars.palette.maskColor.bg,
             },
             '&:last-of-type': {
                 marginBottom: 0,
@@ -32,14 +32,14 @@ const useStyles = makeStyles()((theme) => {
             borderRadius: '50%',
         },
         badge: {
-            border: `1px solid ${theme.palette.maskColor.bg}`,
+            border: `1px solid ${theme.vars.palette.maskColor.bg}`,
             borderRadius: '50%',
             position: 'absolute',
             right: -3,
             bottom: -3,
         },
         name: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             fontWeight: 400,
             marginLeft: theme.spacing(1),
             marginRight: theme.spacing(1),
@@ -50,7 +50,7 @@ const useStyles = makeStyles()((theme) => {
         link: {
             display: 'flex',
             alignItems: 'center',
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
     }
 })
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/LensList.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/LensList.tsx
index cda1977d6d41..4eaeb38a41a3 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/LensList.tsx
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/LensList.tsx
@@ -23,7 +23,7 @@ const useStyles = makeStyles()((theme) => {
             marginBottom: 6,
             borderRadius: 4,
             '&:hover': {
-                backgroundColor: theme.palette.maskColor.bg,
+                backgroundColor: theme.vars.palette.maskColor.bg,
             },
             '&:last-of-type': {
                 marginBottom: 0,
@@ -42,14 +42,14 @@ const useStyles = makeStyles()((theme) => {
             borderRadius: '50%',
         },
         badge: {
-            border: `1px solid ${theme.palette.maskColor.bg}`,
+            border: `1px solid ${theme.vars.palette.maskColor.bg}`,
             borderRadius: '50%',
             position: 'absolute',
             right: -3,
             bottom: -3,
         },
         name: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             fontWeight: 400,
             marginLeft: theme.spacing(1),
             marginRight: theme.spacing(1),
@@ -64,12 +64,12 @@ const useStyles = makeStyles()((theme) => {
             minWidth: 64,
             padding: theme.spacing(1, 1.5),
             backgroundColor: '#ABFE2C',
-            color: theme.palette.common.black,
+            color: theme.vars.palette.common.black,
             borderRadius: 99,
             fontSize: '12px',
             '&:hover': {
                 backgroundColor: '#ABFE2C',
-                color: theme.palette.common.black,
+                color: theme.vars.palette.common.black,
             },
         },
     }
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/SocialPopup.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/SocialPopup.tsx
index da849add0634..e8435ae39475 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/SocialPopup.tsx
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/components/SocialBadges/SocialPopup.tsx
@@ -11,19 +11,21 @@ import { Web3BioProfileToFireflyLens } from '../../../utils.js'
 import { useControlSocialPopup } from '../../hooks/useControlSocialPopup.js'
 
 const useStyles = makeStyles()((theme) => {
-    const isDark = theme.palette.mode === 'dark'
     return {
         popup: {
             position: 'absolute',
             zIndex: 99,
             borderRadius: 16,
-            boxShadow:
-                theme.palette.mode === 'light' ?
-                    '0px 4px 30px rgba(0, 0, 0, 0.1)'
-                :   '0px 4px 30px rgba(255, 255, 255, 0.15)',
+            boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+            ...theme.applyStyles('dark', {
+                boxShadow: '0px 4px 30px rgba(255, 255, 255, 0.15)',
+            }),
         },
         list: {
-            backgroundColor: isDark ? '#030303' : theme.palette.common.white,
+            backgroundColor: theme.vars.palette.common.white,
+            ...theme.applyStyles('dark', {
+                backgroundColor: '#030303',
+            }),
             maxWidth: 320,
             // Show up to 6 item
             maxHeight: 244,
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Web3ProfileDialog.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Web3ProfileDialog.tsx
index a926b4c4a961..1251bc289fda 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Web3ProfileDialog.tsx
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Web3ProfileDialog.tsx
@@ -28,7 +28,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     titleTailButton: {
         cursor: 'pointer',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     profileItem: {
         padding: theme.spacing(1.5),
diff --git a/packages/shared/src/UI/components/AccountIcons/index.tsx b/packages/shared/src/UI/components/AccountIcons/index.tsx
index 0a17f4988be7..bf60331af55e 100644
--- a/packages/shared/src/UI/components/AccountIcons/index.tsx
+++ b/packages/shared/src/UI/components/AccountIcons/index.tsx
@@ -4,7 +4,7 @@ import { SocialAddressType, type SocialAccount } from '@masknet/shared-base'
 import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { resolveSocialAddressLink } from '@masknet/web3-shared-base'
-import { Link, Typography, type TooltipProps } from '@mui/material'
+import { Link, Typography, type SxProps, type Theme, type TooltipProps } from '@mui/material'
 import { compact } from 'lodash-es'
 import { Linking } from '../../../index.js'
 
@@ -29,12 +29,12 @@ const useStyles = makeStyles()((theme) => {
             alignItems: 'center',
         },
         link: {
-            color: theme.palette.maskColor.primary,
+            color: theme.vars.palette.maskColor.primary,
             textDecoration: 'none',
         },
         actionIcon: {
             marginLeft: theme.spacing(0.5),
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
         roundedIcon: {
             borderRadius: '50%',
@@ -93,20 +93,18 @@ export interface AccountIconProps extends withClasses<'icon'> {
     socialAccount: SocialAccount<Web3Helper.ChainIdAll>
 }
 
+const iconSx: SxProps<Theme> = (theme) =>
+    theme.applyStyles('light', {
+        boxShadow: '0px 6px 12px rgba(28, 104, 243, 0.2)',
+        backdropFilter: 'blur(8px)',
+    })
+
 export function AccountIcons({ socialAccount, classes: externalClasses }: AccountIconProps) {
-    const { classes, cx, theme } = useStyles(undefined, { props: { classes: externalClasses } })
+    const { classes, cx } = useStyles(undefined, { props: { classes: externalClasses } })
 
     const { supportedAddressTypes } = socialAccount
     if (!supportedAddressTypes?.length) return null
 
-    const iconStyle =
-        theme.palette.mode === 'light' ?
-            {
-                boxShadow: '0px 6px 12px rgba(28, 104, 243, 0.2)',
-                backdropFilter: 'blur(8px)',
-            }
-        :   undefined
-
     const fromTwitter = [
         SocialAddressType.ENS,
         SocialAddressType.SPACE_ID,
@@ -124,14 +122,14 @@ export function AccountIcons({ socialAccount, classes: externalClasses }: Accoun
             {
                 platform: AddressPlatform.Twitter,
                 type: fromTwitter,
-                icon: <Icons.TwitterXRound className={roundedClasses} style={iconStyle} />,
+                icon: <Icons.TwitterXRound className={roundedClasses} sx={iconSx} />,
             }
         :   null,
         supportedAddressTypes.includes(SocialAddressType.CyberConnect) ?
             {
                 link: resolveSocialAddressLink(SocialAddressType.CyberConnect),
                 type: SocialAddressType.CyberConnect,
-                icon: <Icons.CyberConnect className={normalClasses} size={18} style={iconStyle} />,
+                icon: <Icons.CyberConnect className={normalClasses} size={18} sx={iconSx} />,
             }
         :   null,
 
@@ -139,50 +137,50 @@ export function AccountIcons({ socialAccount, classes: externalClasses }: Accoun
             {
                 link: resolveSocialAddressLink(SocialAddressType.Leaderboard),
                 type: SocialAddressType.Leaderboard,
-                icon: <Icons.Leaderboard className={normalClasses} size={18} style={iconStyle} />,
+                icon: <Icons.Leaderboard className={normalClasses} size={18} sx={iconSx} />,
             }
         :   null,
         supportedAddressTypes.includes(SocialAddressType.Sybil) ?
             {
                 link: resolveSocialAddressLink(SocialAddressType.Sybil),
                 type: SocialAddressType.Sybil,
-                icon: <Icons.Sybil className={roundedClasses} size={18} style={iconStyle} />,
+                icon: <Icons.Sybil className={roundedClasses} size={18} sx={iconSx} />,
             }
         :   null,
         supportedAddressTypes.includes(SocialAddressType.Mask) ?
             {
                 type: SocialAddressType.Mask,
-                icon: <Icons.MaskBlue className={roundedClasses} size={18} style={iconStyle} />,
+                icon: <Icons.MaskBlue className={roundedClasses} size={18} sx={iconSx} />,
             }
         :   null,
         supportedAddressTypes.includes(SocialAddressType.Firefly) ?
             {
                 type: SocialAddressType.Firefly,
-                icon: <Icons.Firefly className={normalClasses} size={18} style={iconStyle} />,
+                icon: <Icons.Firefly className={normalClasses} size={18} sx={iconSx} />,
             }
         :   null,
         supportedAddressTypes.includes(SocialAddressType.OpenSea) ?
             {
                 type: SocialAddressType.OpenSea,
-                icon: <Icons.OpenSea className={roundedClasses} size={18} style={iconStyle} />,
+                icon: <Icons.OpenSea className={roundedClasses} size={18} sx={iconSx} />,
             }
         :   null,
         supportedAddressTypes.includes(SocialAddressType.RSS3) ?
             {
                 type: SocialAddressType.RSS3,
-                icon: <Icons.RSS3 className={roundedClasses} size={18} style={iconStyle} />,
+                icon: <Icons.RSS3 className={roundedClasses} size={18} sx={iconSx} />,
             }
         :   null,
         supportedAddressTypes.includes(SocialAddressType.SPACE_ID) ?
             {
                 type: SocialAddressType.SPACE_ID,
-                icon: <Icons.SpaceId className={roundedClasses} size={18} style={iconStyle} />,
+                icon: <Icons.SpaceId className={roundedClasses} size={18} sx={iconSx} />,
             }
         :   null,
         supportedAddressTypes.includes(SocialAddressType.Lens) ?
             {
                 type: SocialAddressType.Lens,
-                icon: <Icons.DarkLens className={roundedClasses} size={18} style={iconStyle} />,
+                icon: <Icons.DarkLens className={roundedClasses} size={18} sx={iconSx} />,
             }
         :   null,
     ])
diff --git a/packages/shared/src/UI/components/AddressItem/index.tsx b/packages/shared/src/UI/components/AddressItem/index.tsx
index 47fb956fd55c..d140a493ebed 100644
--- a/packages/shared/src/UI/components/AddressItem/index.tsx
+++ b/packages/shared/src/UI/components/AddressItem/index.tsx
@@ -19,7 +19,7 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: 0,
     },
     arrowDropIcon: {
-        color: theme.palette.maskColor.dark,
+        color: theme.vars.palette.maskColor.dark,
     },
 }))
 
diff --git a/packages/shared/src/UI/components/Alert/index.tsx b/packages/shared/src/UI/components/Alert/index.tsx
index 2ae49b6126e8..ac51ef1195ec 100644
--- a/packages/shared/src/UI/components/Alert/index.tsx
+++ b/packages/shared/src/UI/components/Alert/index.tsx
@@ -10,10 +10,10 @@ const useStyles = makeStyles<void, 'warning'>()((theme, _, refs) => ({
         display: 'flex',
         borderRadius: 4,
         padding: 12,
-        backgroundColor: theme.palette.maskColor.bg,
+        backgroundColor: theme.vars.palette.maskColor.bg,
         fontSize: 14,
         alignItems: 'center',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         backdropFilter: 'blur(5px)',
         gap: 10,
         [`&.${refs.warning}`]: {
diff --git a/packages/shared/src/UI/components/ApplicationEntry/index.tsx b/packages/shared/src/UI/components/ApplicationEntry/index.tsx
index 3e5312c7ea5f..825bb653850c 100644
--- a/packages/shared/src/UI/components/ApplicationEntry/index.tsx
+++ b/packages/shared/src/UI/components/ApplicationEntry/index.tsx
@@ -9,7 +9,7 @@ const useStyles = makeStyles<{ disabled: boolean; iconFilterColor?: string }>()(
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: theme.palette.maskColor.bg,
+            backgroundColor: theme.vars.palette.maskColor.bg,
             borderRadius: '8px',
             height: 104,
             gap: theme.spacing(1),
@@ -20,11 +20,11 @@ const useStyles = makeStyles<{ disabled: boolean; iconFilterColor?: string }>()(
             cursor: 'pointer',
             '&:hover': {
                 transform: 'scale(1.02) translateY(-2px)',
-                background: theme.palette.maskColor.bottom,
-                boxShadow:
-                    theme.palette.mode === 'light' ?
-                        '0px 5px 8px rgba(0, 0, 0, 0.05)'
-                    :   '0px 0px 20px rgba(255, 255, 255, 0.12)',
+                background: theme.vars.palette.maskColor.bottom,
+                boxShadow: '0px 5px 8px rgba(0, 0, 0, 0.05)',
+                ...theme.applyStyles('dark', {
+                    boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+                }),
             },
         },
         title: {
@@ -50,7 +50,10 @@ const useStyles = makeStyles<{ disabled: boolean; iconFilterColor?: string }>()(
             ...(iconFilterColor && { filter: `drop-shadow(0px 6px 12px ${iconFilterColor})` }),
         },
         arrow: {
-            color: theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white,
+            color: theme.vars.palette.common.black,
+            ...theme.applyStyles('dark', {
+                color: theme.vars.palette.common.white,
+            }),
         },
         recommendFeatureApplicationBox: {
             width: 257,
@@ -78,14 +81,14 @@ const useStyles = makeStyles<{ disabled: boolean; iconFilterColor?: string }>()(
             fontSize: 18,
             fontWeight: 700,
             cursor: disabled ? 'default' : 'pointer',
-            color: theme.palette.common.white,
+            color: theme.vars.palette.common.white,
         },
         recommendFeatureAppListItemDescription: {
             textAlign: 'left',
             fontSize: 12,
             fontWeight: 500,
             cursor: disabled ? 'default' : 'pointer',
-            color: theme.palette.common.white,
+            color: theme.vars.palette.common.white,
         },
     }),
 )
diff --git a/packages/shared/src/UI/components/BindingDialog/index.tsx b/packages/shared/src/UI/components/BindingDialog/index.tsx
index 0c97217f6a40..83fa5b91cba5 100644
--- a/packages/shared/src/UI/components/BindingDialog/index.tsx
+++ b/packages/shared/src/UI/components/BindingDialog/index.tsx
@@ -14,9 +14,9 @@ const useStyles = makeStyles()((theme) => {
             top: 24,
             right: 24,
             borderRadius: 12,
-            backgroundColor: theme.palette.maskColor.bottom,
-            boxShadow: theme.palette.maskColor.bottomBg,
-            color: theme.palette.maskColor.main,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
+            boxShadow: theme.vars.palette.maskColor.bottomBg,
+            color: theme.vars.palette.maskColor.main,
             overflow: 'auto',
             overflowX: 'hidden',
             '&::-webkit-scrollbar': {
@@ -25,12 +25,12 @@ const useStyles = makeStyles()((theme) => {
         },
         title: {
             flexShrink: 0,
-            background: theme.palette.maskColor.modalTitleBg,
+            background: theme.vars.palette.maskColor.modalTitleBg,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
             padding: theme.spacing(2),
-            borderBottom: `1px solid ${theme.palette.maskColor.line}`,
+            borderBottom: `1px solid ${theme.vars.palette.maskColor.line}`,
         },
         closeButton: {
             padding: 0,
diff --git a/packages/shared/src/UI/components/ChainBoundary/index.tsx b/packages/shared/src/UI/components/ChainBoundary/index.tsx
index 4d7f915a481d..35555b770203 100644
--- a/packages/shared/src/UI/components/ChainBoundary/index.tsx
+++ b/packages/shared/src/UI/components/ChainBoundary/index.tsx
@@ -23,14 +23,14 @@ import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     tooltip: {
-        background: theme.palette.common.black,
-        color: theme.palette.common.white,
+        background: theme.vars.palette.common.black,
+        color: theme.vars.palette.common.white,
         borderRadius: 4,
         padding: 10,
         maxWidth: 260,
     },
     arrow: {
-        color: theme.palette.common.black,
+        color: theme.vars.palette.common.black,
     },
     connectWallet: {
         '& > .MuiButton-startIcon': {
diff --git a/packages/shared/src/UI/components/ClickableChip/index.tsx b/packages/shared/src/UI/components/ClickableChip/index.tsx
index 8c0e397dce28..8afd72b0dcbc 100644
--- a/packages/shared/src/UI/components/ClickableChip/index.tsx
+++ b/packages/shared/src/UI/components/ClickableChip/index.tsx
@@ -15,17 +15,20 @@ const useStyles = makeStyles<StyleProps>()((theme, { checked }) => ({
         marginRight: 6,
         marginBottom: 6,
         cursor: 'pointer',
-        ...(checked && { color: theme.palette.text.buttonText, backgroundColor: theme.palette.text.primary }),
+        ...(checked && {
+            color: theme.vars.palette.text.buttonText,
+            backgroundColor: theme.vars.palette.text.primary,
+        }),
         '&:hover': {
-            color: theme.palette.text.primary,
+            color: theme.vars.palette.text.primary,
             '& > svg': {
-                color: `${theme.palette.text.primary} !important`,
+                color: `${theme.vars.palette.text.primary} !important`,
             },
         },
     },
     icon: {
         backgroundColor: 'transparent !important',
-        ...(checked && { color: `${theme.palette.text.buttonText} !important` }),
+        ...(checked && { color: `${theme.vars.palette.text.buttonText} !important` }),
     },
     label: {
         display: 'flex',
diff --git a/packages/shared/src/UI/components/CoinMetadataTable/ContractItem.tsx b/packages/shared/src/UI/components/CoinMetadataTable/ContractItem.tsx
index 3d73d6da291e..7357d641c42f 100644
--- a/packages/shared/src/UI/components/CoinMetadataTable/ContractItem.tsx
+++ b/packages/shared/src/UI/components/CoinMetadataTable/ContractItem.tsx
@@ -15,15 +15,15 @@ const useStyles = makeStyles()((theme) => ({
         padding: theme.spacing(0.5, 0),
         boxSizing: 'border-box',
         ':not(:last-of-type)': {
-            borderBottom: `1px solid ${theme.palette.maskColor.line}`,
+            borderBottom: `1px solid ${theme.vars.palette.maskColor.line}`,
         },
     },
     icon: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     address: {
         cursor: 'pointer',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: 12,
         fontWeight: 700,
         minWidth: theme.spacing(11),
diff --git a/packages/shared/src/UI/components/CoinMetadataTable/index.tsx b/packages/shared/src/UI/components/CoinMetadataTable/index.tsx
index 70f3533bb98e..0385118c9d77 100644
--- a/packages/shared/src/UI/components/CoinMetadataTable/index.tsx
+++ b/packages/shared/src/UI/components/CoinMetadataTable/index.tsx
@@ -42,7 +42,7 @@ const useStyles = makeStyles()((theme) => ({
         border: 'none',
     },
     label: {
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         fontSize: 14,
         whiteSpace: 'nowrap',
         textAlign: 'left',
@@ -52,7 +52,7 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         gap: theme.spacing(0.25),
         whiteSpace: 'nowrap',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         '&:last-child': {
             paddingRight: 0,
@@ -66,8 +66,8 @@ const useStyles = makeStyles()((theme) => ({
         '&::-webkit-scrollbar': {
             display: 'none',
         },
-        background: theme.palette.maskColor.bottom,
-        boxShadow: theme.palette.maskColor.bottomBg,
+        background: theme.vars.palette.maskColor.bottom,
+        boxShadow: theme.vars.palette.maskColor.bottomBg,
         backdropFilter: 'blur(8px)',
     },
     item: {
diff --git a/packages/shared/src/UI/components/CompositionDialog/BadgeRenderer.tsx b/packages/shared/src/UI/components/CompositionDialog/BadgeRenderer.tsx
index a2e5bb8fb473..e2bd60e70c39 100644
--- a/packages/shared/src/UI/components/CompositionDialog/BadgeRenderer.tsx
+++ b/packages/shared/src/UI/components/CompositionDialog/BadgeRenderer.tsx
@@ -7,8 +7,11 @@ import { Trans } from '@lingui/react/macro'
 const useStyles = makeStyles()((theme) => ({
     chip: {
         maxWidth: 500,
-        background: theme.palette.background.paper,
-        boxShadow: `0px 0px 20px 0px ${theme.palette.mode === 'dark' ? '#FFFFFF1F' : '#0000000D'}`,
+        background: theme.vars.palette.background.paper,
+        boxShadow: '0px 0px 20px 0px #0000000D',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 0px 20px 0px #FFFFFF1F',
+        }),
     },
 }))
 
diff --git a/packages/shared/src/UI/components/CompositionDialog/CompositionUI.tsx b/packages/shared/src/UI/components/CompositionDialog/CompositionUI.tsx
index 69353d14d9c6..8e2919903fdf 100644
--- a/packages/shared/src/UI/components/CompositionDialog/CompositionUI.tsx
+++ b/packages/shared/src/UI/components/CompositionDialog/CompositionUI.tsx
@@ -1,9 +1,9 @@
 import { startTransition, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Icons } from '@masknet/icons'
 import { CompositionContext } from '@masknet/plugin-infra/content-script'
-import { makeStyles } from '@masknet/theme'
+import { alpha, makeStyles  } from '@masknet/theme'
 import type { SerializableTypedMessages, TypedMessage } from '@masknet/typed-message'
-import { Button, DialogActions, Typography, alpha } from '@mui/material'
+import { Button, DialogActions, Typography } from '@mui/material'
 import { CharLimitIndicator } from './CharLimitIndicator.js'
 import { PluginEntryRender, type PluginEntryRenderRef } from './PluginEntryRender.js'
 import { TypedMessageEditor, type TypedMessageEditorRef } from './TypedMessageEditor.js'
@@ -31,12 +31,12 @@ const useStyles = makeStyles()((theme) => ({
     optionTitle: {
         lineHeight: '18px',
         fontSize: 14,
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         marginRight: 12,
     },
     editorWrapper: {
         flex: 1,
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
         padding: 0,
         boxSizing: 'border-box',
         borderRadius: 8,
@@ -45,16 +45,14 @@ const useStyles = makeStyles()((theme) => ({
     icon: {
         width: 18,
         height: 18,
-        fill: theme.palette.text.buttonText,
+        fill: theme.vars.palette.text.buttonText,
     },
     action: {
         height: 68,
         padding: '0 16px',
-        boxShadow:
-            theme.palette.mode === 'light' ?
-                ' 0px 0px 20px rgba(0, 0, 0, 0.05)'
-            :   '0px 0px 20px rgba(255, 255, 255, 0.12);',
-        background: alpha(theme.palette.maskColor.bottom, 0.8),
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', { boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)' }),
+        background: alpha(theme.vars.palette.maskColor.bottom, 0.8),
         justifyContent: 'end',
         display: 'flex',
     },
diff --git a/packages/shared/src/UI/components/CompositionDialog/PluginEntryRender.tsx b/packages/shared/src/UI/components/CompositionDialog/PluginEntryRender.tsx
index 1d6a58273f2d..9ab5cf0303da 100644
--- a/packages/shared/src/UI/components/CompositionDialog/PluginEntryRender.tsx
+++ b/packages/shared/src/UI/components/CompositionDialog/PluginEntryRender.tsx
@@ -7,8 +7,8 @@ import {
     usePluginTransField,
     useCompositionContext,
 } from '@masknet/plugin-infra/content-script'
-import { DialogContent, alpha } from '@mui/material'
-import { makeStyles } from '@masknet/theme'
+import { DialogContent } from '@mui/material'
+import { alpha, makeStyles  } from '@masknet/theme'
 import { ClickableChip, GrantPermissions, InjectedDialog, usePluginHostPermissionCheck } from '@masknet/shared'
 import { EMPTY_LIST, PluginID } from '@masknet/shared-base'
 import { ErrorBoundary } from '@masknet/shared-base-ui'
@@ -20,8 +20,8 @@ const useStyles = makeStyles()((theme) => ({
         paddingLeft: 2,
     },
     clickRoot: {
-        background: theme.palette.maskColor.bottom,
-        boxShadow: `0px 0px 20px 0px ${alpha(theme.palette.maskColor.main, 0.05)}`,
+        background: theme.vars.palette.maskColor.bottom,
+        boxShadow: `0px 0px 20px 0px ${alpha(theme.vars.palette.maskColor.main, 0.05)}`,
         marginBottom: 0,
     },
 }))
@@ -86,7 +86,7 @@ const usePermissionDialogStyles = makeStyles()((theme) => ({
         padding: theme.spacing(1),
     },
     dialogTitle: {
-        background: theme.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.bottom,
     },
     action: {
         width: '80%',
diff --git a/packages/shared/src/UI/components/CompositionDialog/TypedMessageEditor.tsx b/packages/shared/src/UI/components/CompositionDialog/TypedMessageEditor.tsx
index d344a882e3d6..8c5f54c7bc5d 100644
--- a/packages/shared/src/UI/components/CompositionDialog/TypedMessageEditor.tsx
+++ b/packages/shared/src/UI/components/CompositionDialog/TypedMessageEditor.tsx
@@ -6,8 +6,8 @@ import {
     type SerializableTypedMessages,
 } from '@masknet/typed-message'
 import { editTypedMessageMeta } from '@masknet/typed-message-react'
-import { makeStyles } from '@masknet/theme'
-import { InputBase, Alert, Button, inputBaseClasses, alpha } from '@mui/material'
+import { alpha, makeStyles  } from '@masknet/theme'
+import { InputBase, Alert, Button, inputBaseClasses } from '@mui/material'
 import { useCallback, useImperativeHandle, useState, useRef, memo, useMemo, useEffect, type RefAttributes } from 'react'
 import { BadgeRenderer } from './BadgeRenderer.js'
 import { Trans, useLingui } from '@lingui/react/macro'
@@ -22,7 +22,7 @@ const useStyles = makeStyles()((theme) => ({
         position: 'relative',
         display: 'flex',
         height: '100%',
-        backgroundColor: theme.palette.maskColor.input,
+        backgroundColor: theme.vars.palette.maskColor.input,
         [`& > .${inputBaseClasses.input}`]: {
             height: 'calc(100% - 22px) !important',
             overflow: 'unset',
@@ -30,7 +30,7 @@ const useStyles = makeStyles()((theme) => ({
         [`&.${inputBaseClasses.focused}`]: {
             backgroundColor: 'transparent',
             border: 0,
-            outline: `2px solid ${alpha(theme.palette.maskColor.primary, 0.2)}`,
+            outline: `2px solid ${alpha(theme.vars.palette.maskColor.primary, 0.2)}`,
         },
     },
     badgeInput: {
@@ -46,7 +46,7 @@ const useStyles = makeStyles()((theme) => ({
             borderRadius: '20px',
             width: 5,
             border: '7px solid rgba(0, 0, 0, 0)',
-            backgroundColor: theme.palette.maskColor.secondaryLine,
+            backgroundColor: theme.vars.palette.maskColor.secondaryLine,
             backgroundClip: 'padding-box',
         },
     },
diff --git a/packages/shared/src/UI/components/ConnectPersonaBoundary/index.tsx b/packages/shared/src/UI/components/ConnectPersonaBoundary/index.tsx
index 94bddca961c0..2fea3f858583 100644
--- a/packages/shared/src/UI/components/ConnectPersonaBoundary/index.tsx
+++ b/packages/shared/src/UI/components/ConnectPersonaBoundary/index.tsx
@@ -22,12 +22,12 @@ const useStyles = makeStyles()((theme) => ({
     },
     button: {
         borderRadius: '99px',
-        backgroundColor: theme.palette.maskColor.dark,
-        color: theme.palette.maskColor.white,
+        backgroundColor: theme.vars.palette.maskColor.dark,
+        color: theme.vars.palette.maskColor.white,
         marginTop: 'auto',
         ':hover': {
-            color: theme.palette.maskColor.white,
-            backgroundColor: theme.palette.maskColor.dark,
+            color: theme.vars.palette.maskColor.white,
+            backgroundColor: theme.vars.palette.maskColor.dark,
         },
     },
 }))
diff --git a/packages/shared/src/UI/components/CopyButton/index.tsx b/packages/shared/src/UI/components/CopyButton/index.tsx
index 27ee4f8d4250..c18f157b2392 100644
--- a/packages/shared/src/UI/components/CopyButton/index.tsx
+++ b/packages/shared/src/UI/components/CopyButton/index.tsx
@@ -17,7 +17,7 @@ import { Trans } from '@lingui/react/macro'
 const useStyles = makeStyles()((theme) => ({
     copy: {
         '&:hover': {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
         },
     },
 }))
@@ -93,7 +93,7 @@ export const CopyButton = memo(function CopyButton({
                 className={cx(classes.root, className)}
                 sx={[{ fontSize: 0 }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}>
                 {active ?
-                    <Icons.Check {...iconProps} color={theme.palette.maskColor.success} />
+                    <Icons.Check {...iconProps} color={theme.vars.palette.maskColor.success} />
                 :   <Icons.Copy {...iconProps} className={classes.copy} />}
             </Link>
         </ShadowRootTooltip>
diff --git a/packages/shared/src/UI/components/CountryCodePicker/index.tsx b/packages/shared/src/UI/components/CountryCodePicker/index.tsx
index 83805c182fac..1fafc341a07f 100644
--- a/packages/shared/src/UI/components/CountryCodePicker/index.tsx
+++ b/packages/shared/src/UI/components/CountryCodePicker/index.tsx
@@ -15,11 +15,11 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 24,
         width: 320,
         height: 316,
-        background: theme.palette.maskColor.bottom,
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 4px 30px 0px rgba(255, 255, 255, 0.15)'
-            :   '0px 4px 30px 0px rgba(0, 0, 0, 0.10)',
+        background: theme.vars.palette.maskColor.bottom,
+        boxShadow: '0px 4px 30px 0px rgba(0, 0, 0, 0.10)',
+        ...theme.applyStyles('dark', {
+            boxShadow: '0px 4px 30px 0px rgba(255, 255, 255, 0.15)',
+        }),
     },
     list: {
         maxHeight: 240,
diff --git a/packages/shared/src/UI/components/DotLoading/index.tsx b/packages/shared/src/UI/components/DotLoading/index.tsx
index 0e1265209bea..1e4012b79cf2 100644
--- a/packages/shared/src/UI/components/DotLoading/index.tsx
+++ b/packages/shared/src/UI/components/DotLoading/index.tsx
@@ -22,7 +22,7 @@ const useStyles = makeStyles()((theme) => ({
     dot: {
         width: 3,
         height: 3,
-        backgroundColor: theme.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.main,
     },
 }))
 export function DotLoading() {
diff --git a/packages/shared/src/UI/components/EmptyStatus/index.tsx b/packages/shared/src/UI/components/EmptyStatus/index.tsx
index 298fb91be1f3..5d10cbf63017 100644
--- a/packages/shared/src/UI/components/EmptyStatus/index.tsx
+++ b/packages/shared/src/UI/components/EmptyStatus/index.tsx
@@ -12,7 +12,7 @@ const useStyles = makeStyles()((theme) => ({
         flexDirection: 'column',
     },
     text: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: '14px',
         fontWeight: 400,
         marginTop: theme.spacing(1.5),
diff --git a/packages/shared/src/UI/components/EthereumBlockie/index.tsx b/packages/shared/src/UI/components/EthereumBlockie/index.tsx
index 0aa2270302a1..5fb8719afab1 100644
--- a/packages/shared/src/UI/components/EthereumBlockie/index.tsx
+++ b/packages/shared/src/UI/components/EthereumBlockie/index.tsx
@@ -8,7 +8,7 @@ const useStyles = makeStyles()((theme) => ({
     icon: {
         width: 16,
         height: 16,
-        backgroundColor: theme.palette.common.white,
+        backgroundColor: theme.vars.palette.common.white,
         margin: 0,
     },
 }))
diff --git a/packages/shared/src/UI/components/FileFrame/index.tsx b/packages/shared/src/UI/components/FileFrame/index.tsx
index 5251ded11354..c3f367051f0c 100644
--- a/packages/shared/src/UI/components/FileFrame/index.tsx
+++ b/packages/shared/src/UI/components/FileFrame/index.tsx
@@ -5,14 +5,15 @@ import { makeStyles, ShadowRootTooltip, useBoundedPopperProps } from '@masknet/t
 
 const useStyles = makeStyles()((theme) => ({
     file: {
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
         borderRadius: 8,
         display: 'flex',
         alignItems: 'center',
         padding: theme.spacing(1.5),
         overflow: 'auto',
         ['&:hover']: {
-            background: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.08)' : theme.palette.maskColor.bg,
+            background: theme.vars.palette.maskColor.bg,
+            ...theme.applyStyles('dark', { background: 'rgba(255, 255, 255, 0.08)' }),
         },
     },
     content: {
@@ -22,7 +23,7 @@ const useStyles = makeStyles()((theme) => ({
         overflow: 'auto',
     },
     name: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         lineHeight: '18px',
         overflow: 'hidden',
diff --git a/packages/shared/src/UI/components/FootnoteMenu/index.tsx b/packages/shared/src/UI/components/FootnoteMenu/index.tsx
index 2ff7ac7f91d1..7fa0422b1371 100644
--- a/packages/shared/src/UI/components/FootnoteMenu/index.tsx
+++ b/packages/shared/src/UI/components/FootnoteMenu/index.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 10,
     },
     icon: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 
@@ -55,17 +55,17 @@ export function FootnoteMenu(props: FootnoteMenuProps) {
                         alignItems: 'center',
                         width: '100%',
                     }}>
-                    <Stack sx={{ flexGrow: 1, color: theme.palette.maskColor.main }}>{x.name}</Stack>
+                    <Stack sx={{ flexGrow: 1, color: theme.vars.palette.maskColor.main }}>{x.name}</Stack>
                     {selectedIndex === i ?
                         <Icons.CheckCircle
                             size={20}
                             style={{
-                                color: theme.palette.maskColor.primary,
+                                color: theme.vars.palette.maskColor.primary,
                                 boxShadow: '0px 4px 10px rgba(28, 104, 243, 0.2)',
                             }}
                         />
                     :   <RadioButtonUncheckedIcon
-                            style={{ fontSize: 20, color: theme.palette.maskColor.secondaryLine }}
+                            style={{ fontSize: 20, color: theme.vars.palette.maskColor.secondaryLine }}
                         />
                     }
                 </Stack>
@@ -82,7 +82,7 @@ export function FootnoteMenu(props: FootnoteMenuProps) {
                 horizontal: 'right',
             },
             slotProps: {
-                paper: { style: { background: theme.palette.maskColor.bottom } },
+                paper: { style: { background: theme.vars.palette.maskColor.bottom } },
             },
         },
     )
diff --git a/packages/shared/src/UI/components/FungibleTokenInput/UI.tsx b/packages/shared/src/UI/components/FungibleTokenInput/UI.tsx
index e531e9088113..c2d24b6b8341 100644
--- a/packages/shared/src/UI/components/FungibleTokenInput/UI.tsx
+++ b/packages/shared/src/UI/components/FungibleTokenInput/UI.tsx
@@ -1,11 +1,10 @@
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
-import { makeStyles } from '@masknet/theme'
+import { alpha, makeStyles  } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { useNetworkContext } from '@masknet/web3-hooks-base'
 import { formatBalance } from '@masknet/web3-shared-base'
 import {
-    alpha,
     Box,
     Chip,
     chipClasses,
@@ -41,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({
     label: {
         fontSize: 13,
         lineHeight: '18px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         whiteSpace: 'nowrap',
     },
     control: {
@@ -59,14 +58,14 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '18px',
         fontWeight: 700,
         paddingLeft: 4,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     tokenIcon: {
         margin: '0px !important',
     },
     selectToken: {
-        backgroundColor: theme.palette.maskColor.primary,
-        color: theme.palette.maskColor.white,
+        backgroundColor: theme.vars.palette.maskColor.primary,
+        color: theme.vars.palette.maskColor.white,
         fontSize: 12,
         lineHeight: '16px',
         fontWeight: 700,
@@ -77,7 +76,7 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 99,
         cursor: 'pointer',
         ['&:hover']: {
-            backgroundColor: lighten(theme.palette.maskColor.primary, 0.1),
+            backgroundColor: lighten(theme.vars.palette.maskColor.primary, 0.1),
         },
     },
     maxChip: {
@@ -93,10 +92,10 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '18px',
         cursor: 'pointer',
         boxSizing: 'border-box',
-        color: theme.palette.maskColor.bottom,
-        background: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.bottom,
+        background: theme.vars.palette.maskColor.main,
         '&:hover': {
-            background: alpha(theme.palette.maskColor.main, 0.8),
+            background: alpha(theme.vars.palette.maskColor.main, 0.8),
         },
         [`& > .${chipClasses.label}`]: {
             padding: 0,
@@ -106,13 +105,13 @@ const useStyles = makeStyles()((theme) => ({
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
         overflow: 'hidden',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         lineHeight: '18px',
         fontWeight: 700,
         marginLeft: 4,
     },
     arrowIcon: {
-        color: `${theme.palette.maskColor.second}!important`,
+        color: `${theme.vars.palette.maskColor.second}!important`,
     },
     chipLabel: {
         maxWidth: 150,
diff --git a/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx b/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx
index 05e5827a7374..d4fe487a96fe 100644
--- a/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx
+++ b/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx
@@ -23,7 +23,7 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: theme.spacing(1),
         backdropFilter: 'blur(16px)',
         '&:hover': {
-            background: theme.palette.maskColor.bg,
+            background: theme.vars.palette.maskColor.bg,
         },
     },
     text: {
@@ -43,7 +43,7 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(0.5),
         alignItems: 'center',
         lineHeight: '20px',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     nameText: {
         maxWidth: 400,
@@ -58,7 +58,7 @@ const useStyles = makeStyles()((theme) => ({
     balance: {
         fontSize: 16,
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     importButton: {
         borderRadius: 99,
@@ -73,7 +73,7 @@ const useStyles = makeStyles()((theme) => ({
         left: theme.spacing(1),
     },
     link: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     dotLoadingWrapper: {
         display: 'flex',
@@ -187,9 +187,9 @@ export const getFungibleTokenItem = <T extends NetworkPluginID>({
                 return (
                     <CheckBoxIndicator
                         className={enabled || selected ? undefined : classes.disabled}
-                        color={theme.palette.maskColor.primary}
+                        color={theme.vars.palette.maskColor.primary}
                         checked={selected}
-                        uncheckedColor={theme.palette.maskColor.secondaryLine}
+                        uncheckedColor={theme.vars.palette.maskColor.secondaryLine}
                     />
                 )
             }
diff --git a/packages/shared/src/UI/components/GrantPermission/index.tsx b/packages/shared/src/UI/components/GrantPermission/index.tsx
index ec8f4bc0c11c..1e5a4005b57c 100644
--- a/packages/shared/src/UI/components/GrantPermission/index.tsx
+++ b/packages/shared/src/UI/components/GrantPermission/index.tsx
@@ -8,7 +8,7 @@ const useStyles = makeStyles()((theme) => ({
     description: {
         fontSize: 14,
         lineHeight: '18px',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     action: {
         marginTop: theme.spacing(10),
diff --git a/packages/shared/src/UI/components/Icon/index.tsx b/packages/shared/src/UI/components/Icon/index.tsx
index e29a69e279a5..254950e33d80 100644
--- a/packages/shared/src/UI/components/Icon/index.tsx
+++ b/packages/shared/src/UI/components/Icon/index.tsx
@@ -7,7 +7,7 @@ const useStyles = makeStyles<Pick<IconProps, 'size'>>()((theme, { size }) => ({
     icon: {
         margin: 0,
         borderRadius: '50%',
-        color: `${theme.palette.maskColor.dark} !important`,
+        color: `${theme.vars.palette.maskColor.dark} !important`,
         backgroundSize: 'cover',
         height: size,
         width: size,
@@ -49,7 +49,7 @@ export const Icon = memo<IconProps>(function Icon(props) {
                 ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
                 {
                     backgroundImage: showImage ? undefined : `url("${defaultBackgroundImage}")`,
-                    backgroundColor: showImage ? (color ?? theme.palette.common.white) : undefined,
+                    backgroundColor: showImage ? (color ?? theme.vars.palette.common.white) : undefined,
                 },
             ]}>
             {label ?? name?.slice(0, 1).toUpperCase() ?? '?'}
diff --git a/packages/shared/src/UI/components/Image/index.tsx b/packages/shared/src/UI/components/Image/index.tsx
index 56499851023d..c68cad225541 100644
--- a/packages/shared/src/UI/components/Image/index.tsx
+++ b/packages/shared/src/UI/components/Image/index.tsx
@@ -1,6 +1,6 @@
 import { type HTMLProps, type ImgHTMLAttributes, type JSX, useState } from 'react'
 import { makeStyles } from '@masknet/theme'
-import { useTheme } from '@mui/material'
+import { useColorScheme } from '@mui/material/styles'
 
 const useStyles = makeStyles<Pick<ImageProps, 'size' | 'rounded'>, 'center'>()((theme, { size, rounded }, refs) => ({
     optimistic: {
@@ -31,9 +31,10 @@ const useStyles = makeStyles<Pick<ImageProps, 'size' | 'rounded'>, 'center'>()((
     failed: {
         [`&.${refs.center}`]: {
             background:
-                theme.palette.mode === 'light' ?
-                    'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(90deg, rgba(98, 152, 234, 0.2) 1.03%, rgba(98, 152, 234, 0.2) 1.04%, rgba(98, 126, 234, 0.2) 100%)'
-                :   'linear-gradient(180deg, #202020 0%, #181818 100%)',
+                'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(90deg, rgba(98, 152, 234, 0.2) 1.03%, rgba(98, 152, 234, 0.2) 1.04%, rgba(98, 126, 234, 0.2) 100%)',
+            ...theme.applyStyles('dark', {
+                background: 'linear-gradient(180deg, #202020 0%, #181818 100%)',
+            }),
         },
     },
 }))
@@ -62,7 +63,7 @@ export function Image({
     ...rest
 }: ImageProps) {
     const { classes, cx } = useStyles({ size, rounded }, { props: { classes: extraClasses } })
-    const theme = useTheme()
+    const { mode } = useColorScheme()
     const [failed, setFailed] = useState(false)
 
     if (rest.src && !failed) {
@@ -103,7 +104,7 @@ export function Image({
                 width={size}
                 height={size}
                 {...rest}
-                src={fallback?.toString() ?? (theme.palette.mode === 'dark' ? MASK_DARK_FALLBACK : MASK_LIGHT_FALLBACK)}
+                src={fallback?.toString() ?? (mode === 'dark' ? MASK_DARK_FALLBACK : MASK_LIGHT_FALLBACK)}
                 className={cx(classes.image, classes.failImage, classes.fallbackImage)}
             />
         </div>
diff --git a/packages/shared/src/UI/components/Linking.tsx b/packages/shared/src/UI/components/Linking.tsx
index b75d07afc1b4..ba572340b4fc 100644
--- a/packages/shared/src/UI/components/Linking.tsx
+++ b/packages/shared/src/UI/components/Linking.tsx
@@ -13,7 +13,7 @@ export function Linking(props: LinkingProps) {
         const { hostname } = new URL(href)
         return (
             <Link
-                sx={{ color: (theme) => theme.palette.maskColor.main }}
+                sx={{ color: (theme) => theme.vars.palette.maskColor.main }}
                 target="_blank"
                 rel="noopener noreferrer"
                 href={props.href}
diff --git a/packages/shared/src/UI/components/LoadingStatus/index.tsx b/packages/shared/src/UI/components/LoadingStatus/index.tsx
index 82a8e7fe69c2..b3202462672f 100644
--- a/packages/shared/src/UI/components/LoadingStatus/index.tsx
+++ b/packages/shared/src/UI/components/LoadingStatus/index.tsx
@@ -11,10 +11,10 @@ const useStyles = makeStyles()((theme) => ({
         flexDirection: 'column',
     },
     icon: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     text: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: '14px',
         fontWeight: 400,
         marginTop: theme.spacing(1.5),
diff --git a/packages/shared/src/UI/components/Markdown/index.tsx b/packages/shared/src/UI/components/Markdown/index.tsx
index a2a152913aa9..bbe669b07419 100644
--- a/packages/shared/src/UI/components/Markdown/index.tsx
+++ b/packages/shared/src/UI/components/Markdown/index.tsx
@@ -21,7 +21,7 @@ const useStyles = makeStyles()((theme) => ({
         '& p, & li': {
             margin: 0,
             fontSize: 12,
-            color: theme.palette.text.secondary,
+            color: theme.vars.palette.text.secondary,
         },
         '& p + p': {
             marginTop: theme.spacing(0.5),
@@ -34,7 +34,7 @@ const useStyles = makeStyles()((theme) => ({
             maxWidth: '100%',
         },
         '& a': {
-            color: theme.palette.text.primary,
+            color: theme.vars.palette.text.primary,
         },
     },
 }))
diff --git a/packages/shared/src/UI/components/MaskPluginWrapper/index.tsx b/packages/shared/src/UI/components/MaskPluginWrapper/index.tsx
index 4bda23697fb8..eb4dad535208 100644
--- a/packages/shared/src/UI/components/MaskPluginWrapper/index.tsx
+++ b/packages/shared/src/UI/components/MaskPluginWrapper/index.tsx
@@ -1,6 +1,6 @@
 import { Suspense, type ReactNode, useMemo, useImperativeHandle, useState, type JSX } from 'react'
-import { Typography, Link } from '@mui/material'
-import { makeStyles, MaskColorVar, MaskLightTheme } from '@masknet/theme'
+import { Typography, Link, useTheme } from '@mui/material'
+import { makeStyles } from '@masknet/theme'
 import { Box } from '@mui/system'
 import {
     usePluginTransField,
@@ -41,7 +41,7 @@ const useStyles = makeStyles<{
         },
         header: {
             backgroundColor: 'transparent',
-            color: theme.palette.text.primary,
+            color: theme.vars.palette.text.primary,
             display: 'flex',
             alignItems: 'center',
             padding: theme.spacing(1.5),
@@ -75,7 +75,7 @@ const useStyles = makeStyles<{
             marginRight: theme.spacing(0.5),
             fontSize: 14,
             fontWeight: 700,
-            color: MaskLightTheme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
         },
     }
 })
@@ -87,6 +87,7 @@ export function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
         borderRadius: wrapperProps?.borderRadius,
         margin: wrapperProps?.margin,
     })
+    const theme = useTheme()
 
     const publisherInfo = useMemo(() => {
         if (!publisher) return
@@ -98,7 +99,7 @@ export function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
                     fontWeight: '700',
                 }}
                 component="div"
-                color={MaskColorVar.textPluginColor}>
+                color={theme.vars.palette.maskColor.textPluginColor}>
                 {publisher}
             </Typography>
         )
@@ -115,13 +116,13 @@ export function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
                         <Icons.Provider
                             size={18}
                             style={{ marginLeft: 4 }}
-                            color={MaskLightTheme.palette.maskColor.main}
+                            color={theme.vars.palette.maskColor.textPluginColor}
                         />
                     </Link>
                 :   null}
             </Box>
         )
-    }, [publisher, publisherLink])
+    }, [publisher, publisherLink, theme.vars.palette.maskColor.textPluginColor])
 
     const inner = (
         <div
@@ -140,7 +141,7 @@ export function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
                         marginLeft: 0.5,
                     }}
                     component="div"
-                    color={MaskColorVar.textPluginColor}>
+                    color={theme.vars.palette.maskColor.main}>
                     {wrapperProps?.title ?? title ?? <Trans>Default</Trans>}
                 </Typography>
                 <div className={classes.publish}>{publisherInfo}</div>
diff --git a/packages/shared/src/UI/components/PersonaAction/PersonaAction.tsx b/packages/shared/src/UI/components/PersonaAction/PersonaAction.tsx
index a4bdc9039e6c..8fb4213a901f 100644
--- a/packages/shared/src/UI/components/PersonaAction/PersonaAction.tsx
+++ b/packages/shared/src/UI/components/PersonaAction/PersonaAction.tsx
@@ -14,17 +14,17 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         justifyContent: 'space-between',
         padding: 16,
-        boxShadow: theme.palette.shadow.popup,
+        boxShadow: theme.vars.palette.shadow.popup,
     },
     linkIcon: {
         marginRight: theme.spacing(1),
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         cursor: 'pointer',
     },
     personaKey: {
         fontSize: '12px',
         fontWeight: '400',
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
     },
 }))
 
diff --git a/packages/shared/src/UI/components/PersonaSelectPanel/PersonaItemUI.tsx b/packages/shared/src/UI/components/PersonaSelectPanel/PersonaItemUI.tsx
index 1c61105adfeb..5ef22282fc5b 100644
--- a/packages/shared/src/UI/components/PersonaSelectPanel/PersonaItemUI.tsx
+++ b/packages/shared/src/UI/components/PersonaSelectPanel/PersonaItemUI.tsx
@@ -27,7 +27,7 @@ const useStyles = makeStyles()((theme) => {
         nickname: {
             fontSize: 16,
             lineHeight: '20px',
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
@@ -35,7 +35,7 @@ const useStyles = makeStyles()((theme) => {
         fingerprint: {
             fontSize: 12,
             lineHeight: '16px',
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
         },
         indicator: {
             display: 'inline-block',
@@ -48,7 +48,7 @@ const useStyles = makeStyles()((theme) => {
             right: '5.84%',
             top: '5.84%',
             bottom: '77.62%',
-            border: `1px solid ${theme.palette.maskColor.bottom}`,
+            border: `1px solid ${theme.vars.palette.maskColor.bottom}`,
         },
     }
 })
diff --git a/packages/shared/src/UI/components/PersonaWallet/index.tsx b/packages/shared/src/UI/components/PersonaWallet/index.tsx
index ea202f4b951c..53e2bab32234 100644
--- a/packages/shared/src/UI/components/PersonaWallet/index.tsx
+++ b/packages/shared/src/UI/components/PersonaWallet/index.tsx
@@ -1,6 +1,6 @@
 import { Icons } from '@masknet/icons'
 import { type PersonaInformation, formatPersonaFingerprint, type Wallet } from '@masknet/shared-base'
-import { MaskColorVar, makeStyles } from '@masknet/theme'
+import { makeStyles } from '@masknet/theme'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { Box, Stack, Typography } from '@mui/material'
 import { FormattedAddress } from '../../../index.js'
@@ -10,20 +10,20 @@ const useWalletsStyles = makeStyles<{ length: number }>()((theme, props) => ({
         padding: '8px 16px',
         display: 'flex',
         gap: 20,
-        backgroundColor: MaskColorVar.primaryBackground2,
+        backgroundColor: theme.vars.palette.background.primaryBackground2,
         borderRadius: 8,
     },
     nickname: {
         lineHeight: '16px',
         fontWeight: 600,
         fontSize: 14,
-        color: theme.palette.maskColor.primary,
+        color: theme.vars.palette.maskColor.primary,
     },
     finger: {
         lineHeight: '16px',
         fontWeight: 400,
         fontSize: 12,
-        color: theme.palette.maskColor.primary,
+        color: theme.vars.palette.maskColor.primary,
     },
 }))
 
diff --git a/packages/shared/src/UI/components/PluginCardFrame/index.tsx b/packages/shared/src/UI/components/PluginCardFrame/index.tsx
index 0aef4df30bb5..7ea545568695 100644
--- a/packages/shared/src/UI/components/PluginCardFrame/index.tsx
+++ b/packages/shared/src/UI/components/PluginCardFrame/index.tsx
@@ -9,32 +9,32 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     container: {
         background:
             'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), linear-gradient(90deg, rgba(28, 104, 243, 0.2) 0%, rgba(45, 41, 253, 0.2) 100%), #FFFFFF;',
         minHeight: '196px',
         justifyContent: 'space-between',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     web3Icon: {
         marginRight: 6,
         marginTop: 2,
     },
     item1: {
-        color: theme.palette.maskColor.secondaryDark,
+        color: theme.vars.palette.maskColor.secondaryDark,
         fontSize: '14px',
         fontWeight: 400,
     },
     item2: {
-        color: theme.palette.maskColor.dark,
+        color: theme.vars.palette.maskColor.dark,
         fontSize: '14px',
         fontWeight: 500,
         marginLeft: '2px',
     },
     linkOutIcon: {
-        color: theme.palette.maskColor.secondaryDark,
+        color: theme.vars.palette.maskColor.secondaryDark,
     },
 }))
 
@@ -52,7 +52,7 @@ export function PluginCardFrameMini({ icon, title, provider, providerLink, child
     const PluginName = (
         <Stack className={classes.title} direction="row">
             {icon ?? <Icons.Web3Profile className={classes.web3Icon} />}
-            <Typography sx={{ fontSize: 16, fontWeight: 700 }} color={theme.palette.maskColor.main}>
+            <Typography sx={{ fontSize: 16, fontWeight: 700 }} color={theme.vars.palette.maskColor.main}>
                 {title ?? <Trans>Web3 Profile</Trans>}
             </Typography>
         </Stack>
@@ -85,7 +85,7 @@ export function PluginCardFrameMini({ icon, title, provider, providerLink, child
             </Stack>
             <Stack sx={{ flex: 1, justifyContent: 'center', alignItems: 'center', p: 1.5 }}>
                 {children ?? (
-                    <LoadingStatus iconSize={24} color={theme.palette.maskColor.main}>
+                    <LoadingStatus iconSize={24} color={theme.vars.palette.maskColor.main}>
                         <Trans>Loading....</Trans>
                     </LoadingStatus>
                 )}
diff --git a/packages/shared/src/UI/components/PluginGuide/index.tsx b/packages/shared/src/UI/components/PluginGuide/index.tsx
index fb93e2defdd8..08236da14a0c 100644
--- a/packages/shared/src/UI/components/PluginGuide/index.tsx
+++ b/packages/shared/src/UI/components/PluginGuide/index.tsx
@@ -32,17 +32,17 @@ const useStyles = makeStyles()((theme) => ({
         width: 256,
         padding: theme.spacing(2),
         borderRadius: theme.spacing(2),
-        background: theme.palette.maskColor.tips,
+        background: theme.vars.palette.maskColor.tips,
         boxShadow: '0 4px 8px rgba(0,0,0,.1)',
         boxSizing: 'border-box',
-        color: theme.palette.maskColor.bottom,
+        color: theme.vars.palette.maskColor.bottom,
         '&.arrow-top:after': {
             content: '""',
             display: 'inline-block',
             width: 0,
             height: 0,
             border: 'solid 8px transparent',
-            borderBottomColor: theme.palette.maskColor.tips,
+            borderBottomColor: theme.vars.palette.maskColor.tips,
             borderBottomWidth: '13px',
             borderTopWidth: 0,
             position: 'absolute',
@@ -55,7 +55,7 @@ const useStyles = makeStyles()((theme) => ({
             width: 0,
             height: 0,
             border: 'solid 8px transparent',
-            borderTopColor: theme.palette.maskColor.tips,
+            borderTopColor: theme.vars.palette.maskColor.tips,
             borderTopWidth: '13px',
             borderBottomWidth: 0,
             position: 'absolute',
@@ -71,10 +71,10 @@ const useStyles = makeStyles()((theme) => ({
     button: {
         width: '100%',
         borderRadius: '20px',
-        backgroundColor: theme.palette.maskColor.bottom,
-        color: theme.palette.maskColor.main,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
+        color: theme.vars.palette.maskColor.main,
         '&:hover': {
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
         },
     },
 }))
diff --git a/packages/shared/src/UI/components/PriceChange/index.tsx b/packages/shared/src/UI/components/PriceChange/index.tsx
index fd4b198374c4..5b00a50c02bd 100644
--- a/packages/shared/src/UI/components/PriceChange/index.tsx
+++ b/packages/shared/src/UI/components/PriceChange/index.tsx
@@ -31,7 +31,7 @@ export const PriceChange = memo(function PriceChange({ change, loading, ...rest
             </Box>
         )
 
-    const colors = theme.palette.maskColor
+    const colors = theme.vars.palette.maskColor
     const color = change > 0 ? colors.success : colors.danger
 
     return (
diff --git a/packages/shared/src/UI/components/PriceChartRange/index.tsx b/packages/shared/src/UI/components/PriceChartRange/index.tsx
index 659aaf091059..87a1fa4fd6df 100644
--- a/packages/shared/src/UI/components/PriceChartRange/index.tsx
+++ b/packages/shared/src/UI/components/PriceChartRange/index.tsx
@@ -4,7 +4,7 @@ import { Days } from '@masknet/shared-base'
 
 const useStyles = makeStyles<{ columns: number }>()((theme, { columns }) => ({
     container: {
-        background: theme.palette.maskColor.input,
+        background: theme.vars.palette.maskColor.input,
         borderRadius: 28,
         padding: theme.spacing(0.5),
         display: 'grid',
@@ -12,7 +12,7 @@ const useStyles = makeStyles<{ columns: number }>()((theme, { columns }) => ({
     },
     active: {
         boxShadow: '0px 2px 5px 1px rgba(0, 0, 0, 0.05)',
-        background: theme.palette.background.paper,
+        background: theme.vars.palette.background.paper,
         fontWeight: 700,
     },
     link: {
@@ -22,7 +22,7 @@ const useStyles = makeStyles<{ columns: number }>()((theme, { columns }) => ({
         flexShrink: 0,
         borderRadius: 18,
         textAlign: 'center',
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         textDecoration: 'none !important',
     },
 }))
diff --git a/packages/shared/src/UI/components/ProfileTabContent/WalletSettingsEntry.tsx b/packages/shared/src/UI/components/ProfileTabContent/WalletSettingsEntry.tsx
index d87ccf5d2ceb..f60dc4ebeabd 100644
--- a/packages/shared/src/UI/components/ProfileTabContent/WalletSettingsEntry.tsx
+++ b/packages/shared/src/UI/components/ProfileTabContent/WalletSettingsEntry.tsx
@@ -26,7 +26,7 @@ export const WalletSettingsEntry = memo(function WalletSettingsEntry() {
     return (
         <>
             <Stack sx={{ flex: 1 }}>
-                <Typography sx={{ fontWeight: 400, fontSize: 14 }} color={theme.palette.maskColor.second}>
+                <Typography sx={{ fontWeight: 400, fontSize: 14 }} color={theme.vars.palette.maskColor.second}>
                     <Trans>Please select the wallet to activate the function after saving the settings.</Trans>
                 </Typography>
             </Stack>
diff --git a/packages/shared/src/UI/components/ProviderIcon/index.tsx b/packages/shared/src/UI/components/ProviderIcon/index.tsx
index 095365a3bed4..482fcc4752a9 100644
--- a/packages/shared/src/UI/components/ProviderIcon/index.tsx
+++ b/packages/shared/src/UI/components/ProviderIcon/index.tsx
@@ -13,10 +13,10 @@ const useStyles = makeStyles()((theme) => ({
         justifyContent: 'center',
         padding: theme.spacing(1),
         '&:hover': {
-            background: theme.palette.maskColor.bg,
+            background: theme.vars.palette.maskColor.bg,
             '& p': {
                 fontWeight: 700,
-                color: theme.palette.text.primary,
+                color: theme.vars.palette.text.primary,
             },
         },
     },
diff --git a/packages/shared/src/UI/components/QRCode/index.tsx b/packages/shared/src/UI/components/QRCode/index.tsx
index 838787af3d89..a23cc02e8232 100644
--- a/packages/shared/src/UI/components/QRCode/index.tsx
+++ b/packages/shared/src/UI/components/QRCode/index.tsx
@@ -19,7 +19,8 @@ const useStyles = makeStyles()((theme) => ({
         paddingTop: 50,
     },
     info: {
-        color: theme.palette.mode === 'dark' ? blue[500] : blue[800],
+        color: blue[800],
+        ...theme.applyStyles('dark', { color: blue[500] }),
         extDecoration: 'underline',
         cursor: 'pointer',
     },
diff --git a/packages/shared/src/UI/components/ReloadStatus/index.tsx b/packages/shared/src/UI/components/ReloadStatus/index.tsx
index 362ece7d939e..eca71234bd63 100644
--- a/packages/shared/src/UI/components/ReloadStatus/index.tsx
+++ b/packages/shared/src/UI/components/ReloadStatus/index.tsx
@@ -12,7 +12,7 @@ const useStyles = makeStyles()((theme) => ({
         flexDirection: 'column',
     },
     text: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontSize: '14px',
         fontWeight: 700,
         lineHeight: '36px',
diff --git a/packages/shared/src/UI/components/SelectGasSettingsToolbar/index.tsx b/packages/shared/src/UI/components/SelectGasSettingsToolbar/index.tsx
index dcaa5d05d75b..5a224f83db78 100644
--- a/packages/shared/src/UI/components/SelectGasSettingsToolbar/index.tsx
+++ b/packages/shared/src/UI/components/SelectGasSettingsToolbar/index.tsx
@@ -45,7 +45,7 @@ const useStyles = makeStyles()((theme) => {
         button: {
             display: 'flex',
             alignItems: 'center',
-            border: `1px solid ${theme.palette.divider}`,
+            border: `1px solid ${theme.vars.palette.divider}`,
             borderRadius: 99,
             width: 93,
             height: 26,
@@ -93,10 +93,10 @@ const useStyles = makeStyles()((theme) => {
             fontWeight: 700,
         },
         estimateGas: {
-            color: theme.palette.text.third,
+            color: theme.vars.palette.text.third,
         },
         menuItemBorder: {
-            borderBottom: `1px solid ${theme.palette.divider}`,
+            borderBottom: `1px solid ${theme.vars.palette.divider}`,
         },
         gasUSDPrice: {
             fontWeight: 700,
@@ -104,7 +104,7 @@ const useStyles = makeStyles()((theme) => {
         },
         edit: {
             lineHeight: '18px',
-            color: theme.palette.maskColor.primary,
+            color: theme.vars.palette.maskColor.primary,
             marginRight: 4,
             fontWeight: 700,
             cursor: 'pointer',
@@ -249,7 +249,7 @@ export function SelectGasSettingsToolbarUI({
                         ...existing,
                         style: {
                             ...existing?.style,
-                            background: theme.palette.maskColor.bottom,
+                            background: theme.vars.palette.maskColor.bottom,
                             transform: 'translateY(8px)',
                         },
                     }
diff --git a/packages/shared/src/UI/components/SelectTokenChip/index.tsx b/packages/shared/src/UI/components/SelectTokenChip/index.tsx
index 981264fdb661..8519f29155e1 100644
--- a/packages/shared/src/UI/components/SelectTokenChip/index.tsx
+++ b/packages/shared/src/UI/components/SelectTokenChip/index.tsx
@@ -19,7 +19,7 @@ const useStyles = makeStyles()((theme) => {
             fontSize: 12,
         },
         icon: {
-            color: theme.palette.text.primary,
+            color: theme.vars.palette.text.primary,
             pointerEvents: 'none',
         },
         tokenIcon: {
diff --git a/packages/shared/src/UI/components/SettingsBoard/GasForm.tsx b/packages/shared/src/UI/components/SettingsBoard/GasForm.tsx
index b5b66bb23c17..1f33231fb143 100644
--- a/packages/shared/src/UI/components/SettingsBoard/GasForm.tsx
+++ b/packages/shared/src/UI/components/SettingsBoard/GasForm.tsx
@@ -34,27 +34,27 @@ function getDefaultValues(transaction: Transaction, gasOptions: Record<GasOption
 const useStyles = makeStyles()((theme) => {
     return {
         unit: {
-            color: theme.palette.maskColor.third,
+            color: theme.vars.palette.maskColor.third,
         },
         caption: {
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             fontWeight: 700,
             margin: theme.spacing(1, 0, 1.5),
         },
         alertIcon: {
-            color: `${theme.palette.maskColor.main} !important`,
+            color: `${theme.vars.palette.maskColor.main} !important`,
             width: 22,
             height: 22,
             padding: 0,
         },
         alertMessage: {
-            color: theme.palette.maskColor.main,
+            color: theme.vars.palette.maskColor.main,
             fontSize: 14,
             fontWeight: 400,
             padding: 0,
         },
         alertStandardSuccess: {
-            backgroundColor: theme.palette.maskColor.bg,
+            backgroundColor: theme.vars.palette.maskColor.bg,
         },
     }
 })
diff --git a/packages/shared/src/UI/components/SettingsBoard/GasOption.tsx b/packages/shared/src/UI/components/SettingsBoard/GasOption.tsx
index 475f313ef378..3852421e6898 100644
--- a/packages/shared/src/UI/components/SettingsBoard/GasOption.tsx
+++ b/packages/shared/src/UI/components/SettingsBoard/GasOption.tsx
@@ -22,19 +22,19 @@ const useStyles = makeStyles()((theme) => {
         },
         type: {
             fontWeight: 700,
-            color: theme.palette.text.primary,
+            color: theme.vars.palette.text.primary,
             margin: theme.spacing(0, 0.5, 0, 1),
             fontSize: 16,
         },
         estimate: {
             flex: 1,
-            color: theme.palette.text.secondary,
+            color: theme.vars.palette.text.secondary,
             fontWeight: 400,
             fontSize: 16,
         },
         amount: {
             fontWeight: 700,
-            color: theme.palette.text.primary,
+            color: theme.vars.palette.text.primary,
             fontSize: 16,
         },
     }
@@ -61,7 +61,7 @@ export function GasOption(props: GasOptionProps) {
     return (
         <div
             className={classes.root}
-            style={{ color: checked ? theme.palette.maskColor.primary : theme.palette.maskColor.line }}
+            style={{ color: checked ? theme.vars.palette.maskColor.primary : theme.vars.palette.maskColor.line }}
             onClick={onClick}>
             {checked ?
                 <CheckCircle color="inherit" />
diff --git a/packages/shared/src/UI/components/SettingsBoard/GasOptionSelector.tsx b/packages/shared/src/UI/components/SettingsBoard/GasOptionSelector.tsx
index b848f29a199c..5af685d53a1f 100644
--- a/packages/shared/src/UI/components/SettingsBoard/GasOptionSelector.tsx
+++ b/packages/shared/src/UI/components/SettingsBoard/GasOptionSelector.tsx
@@ -10,7 +10,8 @@ import { SettingsContext } from './Context.js'
 const useStyles = makeStyles()((theme) => {
     return {
         root: {
-            boxShadow: `0px 0px 20px 0px ${theme.palette.mode === 'dark' ? '#FFFFFF1F' : '#0000000D'}`,
+            boxShadow: '0px 0px 20px 0px #0000000D',
+            ...theme.applyStyles('dark', { boxShadow: '0px 0px 20px 0px #FFFFFF1F' }),
             backdropFilter: 'blur(16px)',
             borderRadius: 16,
             display: 'flex',
diff --git a/packages/shared/src/UI/components/SettingsBoard/GasSection.tsx b/packages/shared/src/UI/components/SettingsBoard/GasSection.tsx
index 524de4bd7f29..b6d091953dab 100644
--- a/packages/shared/src/UI/components/SettingsBoard/GasSection.tsx
+++ b/packages/shared/src/UI/components/SettingsBoard/GasSection.tsx
@@ -18,22 +18,22 @@ const useStyles = makeStyles()((theme) => {
         root: {},
         tabs: {
             overflow: 'visible',
-            backgroundColor: theme.palette.maskColor.input,
+            backgroundColor: theme.vars.palette.maskColor.input,
         },
         additions: {
             fontWeight: 700,
         },
         label: {
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             fontWeight: 700,
         },
         price: {
             fontWeight: 700,
         },
         tab: {
-            color: theme.palette.maskColor.second,
+            color: theme.vars.palette.maskColor.second,
             '&[aria-selected="true"]': {
-                color: theme.palette.maskColor.main,
+                color: theme.vars.palette.maskColor.main,
             },
         },
     }
diff --git a/packages/shared/src/UI/components/SettingsBoard/SlippageToleranceForm.tsx b/packages/shared/src/UI/components/SettingsBoard/SlippageToleranceForm.tsx
index c964063ab1d3..986b7bf57765 100644
--- a/packages/shared/src/UI/components/SettingsBoard/SlippageToleranceForm.tsx
+++ b/packages/shared/src/UI/components/SettingsBoard/SlippageToleranceForm.tsx
@@ -16,7 +16,8 @@ const useStyles = makeStyles()((theme) => {
         root: {
             display: 'flex',
             alignItems: 'center',
-            boxShadow: `0px 0px 20px 0px ${theme.palette.mode === 'dark' ? '#FFFFFF1F' : '#0000000D'}`,
+            boxShadow: '0px 0px 20px 0px #0000000D',
+            ...theme.applyStyles('dark', { boxShadow: '0px 0px 20px 0px #FFFFFF1F' }),
             backdropFilter: 'blur(16px)',
             marginTop: theme.spacing(1),
             padding: theme.spacing(2),
diff --git a/packages/shared/src/UI/components/SocialAccountList/SocialListItem.tsx b/packages/shared/src/UI/components/SocialAccountList/SocialListItem.tsx
index 247433f846d9..862254210f51 100644
--- a/packages/shared/src/UI/components/SocialAccountList/SocialListItem.tsx
+++ b/packages/shared/src/UI/components/SocialAccountList/SocialListItem.tsx
@@ -23,10 +23,10 @@ const useStyles = makeStyles()((theme) => ({
         boxSizing: 'border-box',
         padding: theme.spacing(0.5),
         borderRadius: 4,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         display: 'block',
         '&:hover': {
-            background: theme.palette.maskColor.bg,
+            background: theme.vars.palette.maskColor.bg,
         },
         marginBottom: 6,
         '&:last-of-type': {
@@ -43,13 +43,13 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: '50%',
     },
     socialName: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 400,
         marginLeft: 4,
         fontSize: 14,
     },
     accountName: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         textOverflow: 'ellipsis',
         overflow: 'hidden',
         paddingRight: theme.spacing(1),
@@ -114,7 +114,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'inline-block',
         textOverflow: 'ellipsis',
         overflow: 'hidden',
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
         borderRadius: 4,
     },
 }))
diff --git a/packages/shared/src/UI/components/SocialAccountList/index.tsx b/packages/shared/src/UI/components/SocialAccountList/index.tsx
index 2df478625957..045a6f4053a8 100644
--- a/packages/shared/src/UI/components/SocialAccountList/index.tsx
+++ b/packages/shared/src/UI/components/SocialAccountList/index.tsx
@@ -45,7 +45,7 @@ const useStyles = makeStyles()((theme) => {
             borderRadius: 16,
             padding: theme.spacing(2, 1.5),
             translate: theme.spacing(1.9, 1),
-            background: theme.palette.maskColor.bottom,
+            background: theme.vars.palette.maskColor.bottom,
         },
         menuList: {
             padding: 0,
diff --git a/packages/shared/src/UI/components/SourceSwitcher/index.tsx b/packages/shared/src/UI/components/SourceSwitcher/index.tsx
index 69bb85bcbb56..92b37a34b7ab 100644
--- a/packages/shared/src/UI/components/SourceSwitcher/index.tsx
+++ b/packages/shared/src/UI/components/SourceSwitcher/index.tsx
@@ -18,7 +18,8 @@ const useStyles = makeStyles()((theme) => {
         },
         sourceName: {
             fontWeight: 700,
-            color: theme.palette.mode === 'dark' ? '' : theme.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.publicMain,
+            ...theme.applyStyles('dark', { color: '' }),
         },
     }
 })
diff --git a/packages/shared/src/UI/components/TokenIcon/index.tsx b/packages/shared/src/UI/components/TokenIcon/index.tsx
index 270ee6c13f01..00f6bf0f49ed 100644
--- a/packages/shared/src/UI/components/TokenIcon/index.tsx
+++ b/packages/shared/src/UI/components/TokenIcon/index.tsx
@@ -24,7 +24,7 @@ const useStyles = makeStyles()((theme) => ({
         position: 'absolute',
         right: -3,
         bottom: -3,
-        border: `1px solid ${theme.palette.common.white}`,
+        border: `1px solid ${theme.vars.palette.common.white}`,
         borderRadius: '50%',
     },
 }))
diff --git a/packages/shared/src/UI/components/TokenMenuList/index.tsx b/packages/shared/src/UI/components/TokenMenuList/index.tsx
index a24af0bd15d0..a5fb89ab6607 100644
--- a/packages/shared/src/UI/components/TokenMenuList/index.tsx
+++ b/packages/shared/src/UI/components/TokenMenuList/index.tsx
@@ -4,8 +4,7 @@ import type { Web3Helper } from '@masknet/web3-helpers'
 import { TokenIcon } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
 import { RadioButtonUnchecked as RadioButtonUncheckedIcon } from '@mui/icons-material'
-import { MenuItem, Stack, Typography } from '@mui/material'
-import { useTheme } from '@mui/system'
+import { MenuItem, Stack, Typography, useTheme } from '@mui/material'
 
 const useStyles = makeStyles()((theme) => ({
     menuItem: {
@@ -42,7 +41,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     checkedIcon: {
         filter: 'drop-shadow(0px 4px 10px rgba(28, 104, 243, 0.2))',
-        color: theme.palette.maskColor.primary,
+        color: theme.vars.palette.maskColor.primary,
     },
 }))
 
@@ -106,7 +105,7 @@ export function TokenMenuList({ options, currentOption, onSelect, fromSocialCard
                                 :   <RadioButtonUncheckedIcon
                                         style={{
                                             fontSize: 20,
-                                            color: theme.palette.maskColor.secondaryLine,
+                                            color: theme.vars.palette.maskColor.secondaryLine,
                                             visibility: 'hidden',
                                         }}
                                     />
diff --git a/packages/shared/src/UI/components/TokenTransactionConfirmModal/index.tsx b/packages/shared/src/UI/components/TokenTransactionConfirmModal/index.tsx
index 7e0ed7cd1e86..832027e386fe 100644
--- a/packages/shared/src/UI/components/TokenTransactionConfirmModal/index.tsx
+++ b/packages/shared/src/UI/components/TokenTransactionConfirmModal/index.tsx
@@ -21,7 +21,7 @@ const useStyles = makeStyles()((theme) => ({
         justifyItems: 'center',
         padding: theme.spacing(3),
         boxSizing: 'border-box',
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         textAlign: 'center',
         fontSize: 18,
     },
@@ -30,20 +30,20 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
         fontSize: '20px',
         lineHeight: '24px',
-        color: theme.palette.maskColor.success,
+        color: theme.vars.palette.maskColor.success,
     },
     actions: {
         padding: theme.spacing(0, 3, 3),
     },
     messageText: {
         fontSize: 16,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         lineHeight: '20px',
     },
     tokenIcon: {
         margin: 'auto',
-        border: `1px ${theme.palette.maskColor.secondaryLine} solid`,
+        border: `1px ${theme.vars.palette.maskColor.secondaryLine} solid`,
         borderRadius: '50%',
     },
     icon: {
diff --git a/packages/shared/src/UI/components/TokenValue/index.tsx b/packages/shared/src/UI/components/TokenValue/index.tsx
index 5416d4ed4b32..32a522139af2 100644
--- a/packages/shared/src/UI/components/TokenValue/index.tsx
+++ b/packages/shared/src/UI/components/TokenValue/index.tsx
@@ -24,12 +24,12 @@ const useStyles = makeStyles<void, 'tokenIcon'>()((theme, _, ref) => ({
     },
     tokenIcon: {},
     amount: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontSize: '24px',
         fontWeight: 700,
     },
     price: {
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
         fontSize: '14px',
         fontWeight: 400,
         lineHeight: '18px',
diff --git a/packages/shared/src/UI/components/TokenWithSocialGroupMenu/index.tsx b/packages/shared/src/UI/components/TokenWithSocialGroupMenu/index.tsx
index cdaf41f0bf2a..b61f909844b1 100644
--- a/packages/shared/src/UI/components/TokenWithSocialGroupMenu/index.tsx
+++ b/packages/shared/src/UI/components/TokenWithSocialGroupMenu/index.tsx
@@ -29,16 +29,14 @@ const useStyles = makeStyles()((theme) => ({
     menuPaper: {
         padding: theme.spacing(2, 0),
         borderRadius: 16,
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 4px 30px rgba(255, 255, 255, 0.15)'
-            :   '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        ...theme.applyStyles('dark', { boxShadow: '0px 4px 30px rgba(255, 255, 255, 0.15)' }),
     },
     addressMenu: {
         maxHeight: MENU_ITEM_HEIGHT * 9,
         minWidth: 320,
         padding: 0,
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
         overflow: 'auto',
         scrollbarWidth: 'none',
         '::-webkit-scrollbar': {
@@ -49,8 +47,8 @@ const useStyles = makeStyles()((theme) => ({
     divider: {
         margin: theme.spacing(1, 0),
         width: 'calc(100% - 24px)',
-        color: theme.palette.maskColor.line,
-        borderColor: theme.palette.maskColor.line,
+        color: theme.vars.palette.maskColor.line,
+        borderColor: theme.vars.palette.maskColor.line,
         position: 'relative',
         left: 12,
     },
@@ -67,10 +65,10 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     secondLinkIcon: {
-        color: theme.palette.maskColor.secondaryDark,
+        color: theme.vars.palette.maskColor.secondaryDark,
     },
     selectedIcon: {
-        color: theme.palette.maskColor.primary,
+        color: theme.vars.palette.maskColor.primary,
         marginLeft: theme.spacing(2),
     },
 }))
diff --git a/packages/shared/src/UI/components/UploadDropArea/index.tsx b/packages/shared/src/UI/components/UploadDropArea/index.tsx
index d7135917ebb5..cdaca0de8aa0 100644
--- a/packages/shared/src/UI/components/UploadDropArea/index.tsx
+++ b/packages/shared/src/UI/components/UploadDropArea/index.tsx
@@ -2,8 +2,8 @@ import { t } from '@lingui/core/macro'
 import { Select, Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { formatFileSize } from '@masknet/shared'
-import { makeStyles, useCustomSnackbar } from '@masknet/theme'
-import { alpha, Button, Typography } from '@mui/material'
+import { alpha, makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { Button, Typography } from '@mui/material'
 import { type HTMLProps, memo, type ReactNode, useCallback, useRef } from 'react'
 import { useDropArea } from 'react-use'
 
@@ -21,10 +21,10 @@ const useStyles = makeStyles()((theme) => ({
         padding: theme.spacing(3),
         overflow: 'hidden',
         userSelect: 'none',
-        background: theme.palette.maskColor.whiteBlue,
+        background: theme.vars.palette.maskColor.whiteBlue,
     },
     dragOver: {
-        borderColor: theme.palette.maskColor.primary,
+        borderColor: theme.vars.palette.maskColor.primary,
     },
     uploadIcon: {
         height: 54,
@@ -33,32 +33,36 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: alpha(theme.palette.maskColor.bottom, 0.8),
+        backgroundColor: alpha(theme.vars.palette.maskColor.bottom, 0.8),
         borderRadius: '50%',
-        boxShadow:
-            theme.palette.mode === 'dark' ? '0px 4px 6px rgba(0, 0, 0, 0.1)' : '0px 4px 6px rgba(102, 108, 135, 0.1)',
+        boxShadow: '0px 4px 6px rgba(102, 108, 135, 0.1)',
+        ...theme.applyStyles('dark', { boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)' }),
     },
     tips: {
         lineHeight: '18px',
         fontSize: 14,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
     },
     limit: {
         lineHeight: '18px',
         fontSize: 14,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     or: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         fontWeight: 700,
     },
     button: {
         width: 164,
         marginBottom: 4,
-        boxShadow: theme.palette.mode === 'dark' ? 'none' : '0px 8px 25px rgba(0, 0, 0, 0.2)',
-        backgroundColor: theme.palette.maskColor.main,
-        color: theme.palette.mode === 'dark' ? theme.palette.maskColor.bottom : theme.palette.maskColor.white,
+        boxShadow: '0px 8px 25px rgba(0, 0, 0, 0.2)',
+        backgroundColor: theme.vars.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.white,
+        ...theme.applyStyles('dark', {
+            boxShadow: 'none',
+            color: theme.vars.palette.maskColor.bottom,
+        }),
     },
 }))
 
diff --git a/packages/shared/src/UI/components/WalletIcon/index.tsx b/packages/shared/src/UI/components/WalletIcon/index.tsx
index b61ed283192c..c50964e565a1 100644
--- a/packages/shared/src/UI/components/WalletIcon/index.tsx
+++ b/packages/shared/src/UI/components/WalletIcon/index.tsx
@@ -21,7 +21,7 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
         position: 'absolute',
         right: -6,
         bottom: -4,
-        border: `1px solid ${props.badgeIconBorderColor ?? theme.palette.common.white}`,
+        border: `1px solid ${props.badgeIconBorderColor ?? theme.vars.palette.common.white}`,
         borderRadius: '50%',
     },
 }))
diff --git a/packages/shared/src/UI/components/WalletStatusBar/PluginWalletStatusBar.tsx b/packages/shared/src/UI/components/WalletStatusBar/PluginWalletStatusBar.tsx
index 01302e750b58..c95dfb7c8ce3 100644
--- a/packages/shared/src/UI/components/WalletStatusBar/PluginWalletStatusBar.tsx
+++ b/packages/shared/src/UI/components/WalletStatusBar/PluginWalletStatusBar.tsx
@@ -1,7 +1,7 @@
 import { memo, type PropsWithChildren, useCallback, useMemo } from 'react'
-import { alpha, Box, Button } from '@mui/material'
+import { Box, Button } from '@mui/material'
 import { Icons } from '@masknet/icons'
-import { makeStyles, MaskColorVar } from '@masknet/theme'
+import { alpha, makeStyles  } from '@masknet/theme'
 import {
     useNetworkContext,
     useProviderDescriptor,
@@ -28,11 +28,11 @@ const useStyles = makeStyles()((theme) => ({
         boxSizing: 'content-box',
         display: 'flex',
         backgroundColor:
-            Sniffings.is_dashboard_page ? MaskColorVar.mainBackground : alpha(theme.palette.maskColor.bottom, 0.8),
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 0px 20px rgba(255, 255, 255, 0.12)'
-            :   '0px 0px 20px rgba(0, 0, 0, 0.05)',
+            Sniffings.is_dashboard_page ?
+                theme.vars.palette.background.mainBackground
+            :   alpha(theme.vars.palette.maskColor.bottom, 0.8),
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', { boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)' }),
         backdropFilter: 'blur(16px)',
         padding: theme.spacing(2),
         borderRadius: '0 0 12px 12px',
diff --git a/packages/shared/src/UI/components/WalletStatusBar/WalletDescription.tsx b/packages/shared/src/UI/components/WalletStatusBar/WalletDescription.tsx
index abd76204c64e..91c0059c391b 100644
--- a/packages/shared/src/UI/components/WalletStatusBar/WalletDescription.tsx
+++ b/packages/shared/src/UI/components/WalletStatusBar/WalletDescription.tsx
@@ -1,6 +1,6 @@
-import { makeStyles, LoadingBase } from '@masknet/theme'
+import { alpha, makeStyles, LoadingBase  } from '@masknet/theme'
 import { memo } from 'react'
-import { alpha, Box, Link, Typography } from '@mui/material'
+import { Box, Link, Typography } from '@mui/material'
 import { CopyButton, WalletIcon } from '@masknet/shared'
 import { Icons } from '@masknet/icons'
 import { Trans } from '@lingui/react/macro'
@@ -19,12 +19,12 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
         columnGap: 4,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         lineHeight: '18px',
     },
     address: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         lineHeight: '18px',
         display: 'flex',
         alignItems: 'center',
@@ -36,15 +36,15 @@ const useStyles = makeStyles()((theme) => ({
         gap: 2,
         borderRadius: 2,
         padding: '2px 4px',
-        backgroundColor: alpha(theme.palette.maskColor.warn, 0.1),
-        color: theme.palette.maskColor.warn,
+        backgroundColor: alpha(theme.vars.palette.maskColor.warn, 0.1),
+        color: theme.vars.palette.maskColor.warn,
         lineHeight: '18px',
     },
     progress: {
-        color: theme.palette.maskColor.warn,
+        color: theme.vars.palette.maskColor.warn,
     },
     linkIcon: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         cursor: 'pointer',
         height: 14,
     },
diff --git a/packages/shared/src/UI/components/WalletStatusBox/TransactionList.tsx b/packages/shared/src/UI/components/WalletStatusBox/TransactionList.tsx
index 6695b82a76df..1e40372c92b0 100644
--- a/packages/shared/src/UI/components/WalletStatusBox/TransactionList.tsx
+++ b/packages/shared/src/UI/components/WalletStatusBox/TransactionList.tsx
@@ -5,7 +5,7 @@ import { format } from 'date-fns'
 import { Icons } from '@masknet/icons'
 import { useChainContext, useWeb3Utils, useWeb3State } from '@masknet/web3-hooks-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
-import { makeStyles, MaskColorVar } from '@masknet/theme'
+import { makeStyles } from '@masknet/theme'
 import {
     isSameAddress,
     type RecentTransactionComputed,
@@ -21,15 +21,15 @@ const useStyles = makeStyles()((theme) => ({
     list: {
         borderRadius: 8,
         overflow: 'hidden',
-        backgroundColor: theme.palette.background.paper,
+        backgroundColor: theme.vars.palette.background.paper,
         padding: 0,
     },
     listItem: {
         height: 52,
-        backgroundColor: theme.palette.background.paper,
+        backgroundColor: theme.vars.palette.background.paper,
         padding: theme.spacing(1, 1),
         '&:nth-of-type(even)': {
-            backgroundColor: theme.palette.background.default,
+            backgroundColor: theme.vars.palette.background.default,
         },
     },
     transaction: {
@@ -49,7 +49,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 14,
         display: 'flex',
         alignItems: 'center',
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         boxSizing: 'border-box',
     },
     linkText: {
@@ -60,13 +60,14 @@ const useStyles = makeStyles()((theme) => ({
     },
     linkIcon: {
         // TODO: replace with theme color
-        color: theme.palette.mode === 'dark' ? '#F5F5F5' : '#07101B',
+        color: '#07101B',
+        ...theme.applyStyles('dark', { color: '#F5F5F5' }),
         width: 17.5,
         height: 17.5,
         marginLeft: theme.spacing(0.5),
     },
     clear: {
-        color: MaskColorVar.blue,
+        color: theme.vars.palette.maskColor.primary,
         cursor: 'pointer',
     },
 }))
@@ -130,7 +131,7 @@ function Transaction({ chainId, transaction: tx, onClear = noop, ...rest }: Tran
                         sx={{ fontWeight: 500 }}>
                         {formatted}
                     </Typography>
-                    <Typography className={classes.timestamp} variant="body1" color={theme.palette.text.secondary}>
+                    <Typography className={classes.timestamp} variant="body1" color={theme.vars.palette.text.secondary}>
                         {format(tx.createdAt, 'yyyy.MM.dd HH:mm')}
                     </Typography>
                 </Stack>
diff --git a/packages/shared/src/UI/components/WalletStatusBox/index.tsx b/packages/shared/src/UI/components/WalletStatusBox/index.tsx
index dc34019cf88e..a17f2e90eba1 100644
--- a/packages/shared/src/UI/components/WalletStatusBox/index.tsx
+++ b/packages/shared/src/UI/components/WalletStatusBox/index.tsx
@@ -1,5 +1,5 @@
 import { Button, Link, Typography, useTheme, ThemeProvider } from '@mui/material'
-import { MaskColors, MaskLightTheme, getMaskColor, makeStyles } from '@masknet/theme'
+import { MaskColors, MaskLightTheme, makeStyles } from '@masknet/theme'
 import { Sniffings } from '@masknet/shared-base'
 import {
     useChainContext,
@@ -33,13 +33,15 @@ const useStyles = makeStyles<{
         display: 'flex',
         background:
             contentBackground ??
-            (Sniffings.is_dashboard_page ? getMaskColor(theme).primaryBackground2 : theme.palette.background.default),
+            (Sniffings.is_dashboard_page ?
+                theme.vars.palette.background.primaryBackground2
+            :   theme.vars.palette.background.default),
         borderRadius: 8,
         alignItems: 'center',
         height: disableChange ? 60 : 82,
     },
     dashboardBackground: {
-        background: theme.palette.background.default,
+        background: theme.vars.palette.background.default,
     },
     accountInfo: {
         fontSize: 16,
@@ -47,13 +49,13 @@ const useStyles = makeStyles<{
         marginLeft: theme.spacing(1.5),
     },
     accountName: {
-        color: Sniffings.is_dashboard_page ? textColor : theme.palette.maskColor.dark,
+        color: Sniffings.is_dashboard_page ? textColor : theme.vars.palette.maskColor.dark,
         fontWeight: 700,
         marginRight: 5,
         lineHeight: '18px',
     },
     balance: {
-        color: Sniffings.is_dashboard_page ? textColor : theme.palette.maskColor.dark,
+        color: Sniffings.is_dashboard_page ? textColor : theme.vars.palette.maskColor.dark,
         paddingTop: 2,
         lineHeight: '18px',
     },
@@ -64,11 +66,11 @@ const useStyles = makeStyles<{
     actionButton: {
         fontSize: 12,
         color: 'white',
-        backgroundColor: theme.palette.maskColor.dark,
+        backgroundColor: theme.vars.palette.maskColor.dark,
         marginLeft: theme.spacing(1),
         padding: theme.spacing(1, 2),
         '&:hover': {
-            backgroundColor: theme.palette.maskColor.dark,
+            backgroundColor: theme.vars.palette.maskColor.dark,
         },
     },
     link: {
@@ -88,10 +90,10 @@ const useStyles = makeStyles<{
         marginRight: theme.spacing(0.5),
     },
     copyIcon: {
-        color: Sniffings.is_dashboard_page ? textColor : theme.palette.maskColor.dark,
+        color: Sniffings.is_dashboard_page ? textColor : theme.vars.palette.maskColor.dark,
     },
     linkIcon: {
-        color: Sniffings.is_dashboard_page ? textColor : theme.palette.maskColor?.dark,
+        color: Sniffings.is_dashboard_page ? textColor : theme.vars.palette.maskColor?.dark,
     },
     statusBox: {
         position: 'relative',
@@ -110,13 +112,13 @@ export function WalletStatusBox(props: WalletStatusBox) {
     const providerDescriptor = useProviderDescriptor<'all'>()
     const theme = useTheme()
     const { classes, cx } = useStyles({
-        contentBackground: providerDescriptor?.backgroundGradient ?? theme.palette.maskColor.publicBg,
+        contentBackground: providerDescriptor?.backgroundGradient ?? theme.vars.palette.maskColor.publicBg,
         disableChange: props.disableChange,
         withinRiskWarningDialog: props.withinRiskWarningDialog,
         textColor:
             providerDescriptor?.type === ProviderType.MaskWallet ?
-                theme.palette.maskColor.dark
-            :   theme.palette.text.primary,
+                theme.vars.palette.maskColor.dark
+            :   theme.vars.palette.text.primary,
     })
 
     const Web3 = useWeb3Connection()
diff --git a/packages/shared/src/UI/components/WalletStatusBox/usePendingTransactions.tsx b/packages/shared/src/UI/components/WalletStatusBox/usePendingTransactions.tsx
index 430cd2f6015a..22b52f6c62a2 100644
--- a/packages/shared/src/UI/components/WalletStatusBox/usePendingTransactions.tsx
+++ b/packages/shared/src/UI/components/WalletStatusBox/usePendingTransactions.tsx
@@ -3,7 +3,7 @@ import {
     useRemoveTransactionCallback,
     useRecentTransactions,
 } from '@masknet/web3-hooks-base'
-import { makeStyles, MaskColorVar } from '@masknet/theme'
+import { makeStyles } from '@masknet/theme'
 import { TransactionStatusType } from '@masknet/web3-shared-base'
 import { Typography } from '@mui/material'
 import { useState } from 'react'
@@ -18,11 +18,12 @@ const useStyles = makeStyles()((theme) => ({
     },
     pendingSummary: {
         cursor: 'default',
-        color: theme.palette.maskColor.warn,
+        color: theme.vars.palette.maskColor.warn,
     },
     clearAll: {
         cursor: 'pointer',
-        color: theme.palette.mode === 'light' ? MaskColorVar.blue : theme.palette.common.white,
+        color: theme.vars.palette.maskColor.primary,
+        ...theme.applyStyles('dark', { color: theme.vars.palette.common.white }),
     },
     hide: {
         display: 'none',
diff --git a/packages/shared/src/UI/contexts/components/InjectedDialog.tsx b/packages/shared/src/UI/contexts/components/InjectedDialog.tsx
index 826e9e97f948..70d46d472761 100644
--- a/packages/shared/src/UI/contexts/components/InjectedDialog.tsx
+++ b/packages/shared/src/UI/contexts/components/InjectedDialog.tsx
@@ -33,7 +33,7 @@ const useStyles = makeStyles<StyleProps>()((theme, { clean }) => ({
         whiteSpace: 'nowrap',
         display: 'flex',
         gridTemplateColumns: '50px auto 50px',
-        background: Sniffings.is_dashboard_page ? theme.palette.maskColor.modalTitleBg : undefined,
+        background: Sniffings.is_dashboard_page ? theme.vars.palette.maskColor.modalTitleBg : undefined,
     },
 
     dialogTitleEndingContent: {
@@ -55,12 +55,12 @@ const useStyles = makeStyles<StyleProps>()((theme, { clean }) => ({
         `,
     },
     dialogContent: {
-        background: Sniffings.is_dashboard_page ? theme.palette.maskColor.bottom : undefined,
+        background: Sniffings.is_dashboard_page ? theme.vars.palette.maskColor.bottom : undefined,
         overscrollBehavior: 'contain',
     },
     dialogActions: {
-        background: Sniffings.is_dashboard_page ? theme.palette.maskColor.secondaryBottom : undefined,
-        boxShadow: Sniffings.is_dashboard_page ? theme.palette.maskColor.bottomBg : undefined,
+        background: Sniffings.is_dashboard_page ? theme.vars.palette.maskColor.secondaryBottom : undefined,
+        boxShadow: Sniffings.is_dashboard_page ? theme.vars.palette.maskColor.bottomBg : undefined,
         backdropFilter: Sniffings.is_dashboard_page ? 'blur(8px)' : undefined,
     },
     dialogGap: {
@@ -83,7 +83,7 @@ const useStyles = makeStyles<StyleProps>()((theme, { clean }) => ({
         fontWeight: 700,
     },
     dialogCloseButton: {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
         padding: 0,
         width: 24,
         height: 24,
diff --git a/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationBoard.tsx b/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationBoard.tsx
index 9f88a65b6e6a..ed38683fbc95 100644
--- a/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationBoard.tsx
+++ b/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationBoard.tsx
@@ -15,7 +15,7 @@ import {
     type PersonaInformation,
 } from '@masknet/shared-base'
 import { useValueRef } from '@masknet/shared-base-ui'
-import { Boundary, getMaskColor, makeStyles } from '@masknet/theme'
+import { Boundary, makeStyles } from '@masknet/theme'
 import { useChainContext, useNetworkContext } from '@masknet/web3-hooks-base'
 import { Typography } from '@mui/material'
 import { createContext, useMemo, useState, type PropsWithChildren } from 'react'
@@ -38,7 +38,7 @@ const useStyles = makeStyles()((theme) => {
             justifyContent: 'space-between',
             minHeight: 0,
             boxSizing: 'border-box',
-            scrollbarColor: `${theme.palette.maskColor.secondaryLine} ${theme.palette.maskColor.secondaryLine}`,
+            scrollbarColor: `${theme.vars.palette.maskColor.secondaryLine} ${theme.vars.palette.maskColor.secondaryLine}`,
             scrollbarWidth: 'thin',
             '::-webkit-scrollbar': {
                 backgroundColor: 'transparent',
@@ -48,7 +48,7 @@ const useStyles = makeStyles()((theme) => {
                 borderRadius: '20px',
                 width: 5,
                 border: '7px solid rgba(0, 0, 0, 0)',
-                backgroundColor: theme.palette.maskColor.secondaryLine,
+                backgroundColor: theme.vars.palette.maskColor.secondaryLine,
                 backgroundClip: 'padding-box',
             },
             [smallQuery]: {
@@ -71,7 +71,7 @@ const useStyles = makeStyles()((theme) => {
             height: 324,
         },
         placeholder: {
-            color: getMaskColor(theme).textLight,
+            color: theme.vars.palette.maskColor.textLight,
         },
     }
 })
diff --git a/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginList.tsx b/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginList.tsx
index 09f47b45e5bd..ee1267bfff41 100644
--- a/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginList.tsx
+++ b/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginList.tsx
@@ -6,7 +6,7 @@ import {
     type Plugin,
 } from '@masknet/plugin-infra/content-script'
 import { PersistentStorages, type PluginID } from '@masknet/shared-base'
-import { Boundary, ShadowRootTooltip, getMaskColor, makeStyles, useBoundedPopperProps } from '@masknet/theme'
+import { Boundary, ShadowRootTooltip, makeStyles, useBoundedPopperProps } from '@masknet/theme'
 import { List, ListItemButton, Typography } from '@mui/material'
 import { Trans } from '@lingui/react/macro'
 
@@ -52,10 +52,9 @@ const useStyles = makeStyles<{
         width: 84,
         height: 56,
         padding: 0,
-        background: theme.palette.maskColor.bottom,
-        boxShadow: `0px 0px 20px ${
-            theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.05)'
-        }`,
+        background: theme.vars.palette.maskColor.bottom,
+        boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        ...theme.applyStyles('dark', { boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)' }),
         justifyContent: 'center',
         alignItems: 'center',
         borderRadius: 8,
@@ -82,7 +81,7 @@ const useStyles = makeStyles<{
         height: 238,
     },
     placeholder: {
-        color: getMaskColor(theme).textLight,
+        color: theme.vars.palette.maskColor.textLight,
     },
 }))
 
diff --git a/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginSwitch.tsx b/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginSwitch.tsx
index 30266ac2bae5..b12e948d679e 100644
--- a/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginSwitch.tsx
+++ b/packages/shared/src/UI/modals/ApplicationBoardModal/ApplicationSettingPluginSwitch.tsx
@@ -3,7 +3,7 @@ import { Icons } from '@masknet/icons'
 import { PluginTransFieldRender, useActivatedPluginsSiteAdaptor } from '@masknet/plugin-infra/content-script'
 import { CrossIsolationMessages, PluginID } from '@masknet/shared-base'
 import { openWindow } from '@masknet/shared-base-ui'
-import { makeStyles, MaskColorVar } from '@masknet/theme'
+import { makeStyles } from '@masknet/theme'
 import { Avatar, Box, List, ListItem, ListItemAvatar, Stack, Switch, Typography } from '@mui/material'
 import { Trans } from '@lingui/react/macro'
 
@@ -11,12 +11,12 @@ const useStyles = makeStyles()((theme) => ({
     listItem: {
         padding: theme.spacing(1.5),
         borderRadius: 12,
-        border: `1px solid ${theme.palette.maskColor.line}`,
+        border: `1px solid ${theme.vars.palette.maskColor.line}`,
         '&:hover': {
-            background: theme.palette.maskColor.bg,
+            background: theme.vars.palette.maskColor.bg,
         },
         '&:hover .MuiAvatar-root': {
-            background: theme.palette.background.paper,
+            background: theme.vars.palette.background.paper,
         },
         '&:not(:last-child)': {
             marginBottom: theme.spacing(1.5),
@@ -38,11 +38,12 @@ const useStyles = makeStyles()((theme) => ({
         paddingTop: theme.spacing(0.5),
         marginLeft: theme.spacing(0.5),
         cursor: 'pointer',
-        color: MaskColorVar.textSecondary,
-        opacity: theme.palette.mode === 'dark' ? 0.5 : 1,
+        color: theme.vars.palette.maskColor.textSecondary,
+        opacity: 1,
+        ...theme.applyStyles('dark', { opacity: 0.5 }),
     },
     avatar: {
-        background: theme.palette.background.default,
+        background: theme.vars.palette.background.default,
         width: '44px',
         height: '44px',
         '> *': {
@@ -63,7 +64,8 @@ const useStyles = makeStyles()((theme) => ({
     desc: {
         fontSize: 12,
         fontWeight: 400,
-        color: theme.palette.mode === 'dark' ? theme.palette.text.secondary : theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
+        ...theme.applyStyles('dark', { color: theme.vars.palette.text.secondary }),
     },
 }))
 
diff --git a/packages/shared/src/UI/modals/ConfirmDialog/index.tsx b/packages/shared/src/UI/modals/ConfirmDialog/index.tsx
index 879673ac0dd3..f7707543d741 100644
--- a/packages/shared/src/UI/modals/ConfirmDialog/index.tsx
+++ b/packages/shared/src/UI/modals/ConfirmDialog/index.tsx
@@ -15,7 +15,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 16,
         lineHeight: '20px',
         fontWeight: 700,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     content: {
         display: 'flex',
@@ -34,14 +34,14 @@ const useStyles = makeStyles()((theme) => ({
         padding: theme.spacing(0, 2),
         lineHeight: '20px',
         fontSize: 14,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         hyphens: 'auto',
     },
     desc: {
         flexGrow: 1,
         fontSize: 14,
         textAlign: 'center',
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginBottom: theme.spacing(1),
     },
     buttonGroup: {
diff --git a/packages/shared/src/UI/modals/ConnectWalletModal/index.tsx b/packages/shared/src/UI/modals/ConnectWalletModal/index.tsx
index 77747f7a14a4..8899c1d7b826 100644
--- a/packages/shared/src/UI/modals/ConnectWalletModal/index.tsx
+++ b/packages/shared/src/UI/modals/ConnectWalletModal/index.tsx
@@ -44,12 +44,12 @@ const useStyles = makeStyles()((theme) => ({
     },
     retryButton: {
         fontSize: 12,
-        backgroundColor: theme.palette.maskColor.publicMain,
-        color: theme.palette.maskColor.white,
+        backgroundColor: theme.vars.palette.maskColor.publicMain,
+        color: theme.vars.palette.maskColor.white,
         marginTop: theme.spacing(1.5),
         '&:hover': {
-            backgroundColor: theme.palette.maskColor.publicMain,
-            color: theme.palette.maskColor.white,
+            backgroundColor: theme.vars.palette.maskColor.publicMain,
+            color: theme.vars.palette.maskColor.white,
         },
     },
 }))
diff --git a/packages/shared/src/UI/modals/GasSettingModal/GasSetting1559.tsx b/packages/shared/src/UI/modals/GasSettingModal/GasSetting1559.tsx
index 10910b27bf5c..f893860577b4 100644
--- a/packages/shared/src/UI/modals/GasSettingModal/GasSetting1559.tsx
+++ b/packages/shared/src/UI/modals/GasSettingModal/GasSetting1559.tsx
@@ -5,7 +5,7 @@ import { BigNumber } from 'bignumber.js'
 import { isEmpty, noop } from 'lodash-es'
 import { Controller, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { ActionButton, makeStyles, MaskColorVar } from '@masknet/theme'
+import { ActionButton, makeStyles } from '@masknet/theme'
 import { formatGweiToWei, formatWeiToEther, formatWeiToGwei, useTokenConstants } from '@masknet/web3-shared-evm'
 import { Typography } from '@mui/material'
 import { NetworkPluginID } from '@masknet/shared-base'
@@ -29,7 +29,8 @@ const useStyles = makeStyles()((theme) => ({
         width: '100%',
         overflowX: 'scroll',
         '& > *': {
-            backgroundColor: theme.palette.mode === 'dark' ? '#212442' : '#f7f9fa',
+            backgroundColor: '#f7f9fa',
+            ...theme.applyStyles('dark', { backgroundColor: '#212442' }),
             borderRadius: 8,
             padding: 10,
             display: 'flex',
@@ -49,7 +50,7 @@ const useStyles = makeStyles()((theme) => ({
         wordBreak: 'break-all',
     },
     label: {
-        color: theme.palette.primary.main,
+        color: theme.vars.palette.primary.main,
         fontSize: 12,
         lineHeight: '16px',
         margin: '10px 0',
@@ -58,9 +59,9 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     selected: {
-        backgroundColor: theme.palette.primary.main,
+        backgroundColor: theme.vars.palette.primary.main,
         '& > *': {
-            color: theme.palette.primary.contrastText,
+            color: theme.vars.palette.primary.contrastText,
         },
     },
     button: {
@@ -78,7 +79,7 @@ const useStyles = makeStyles()((theme) => ({
     price: {
         fontSize: 12,
         lineHeight: '16px',
-        color: MaskColorVar.normalText,
+        color: theme.vars.palette.maskColor.normalText,
     },
 }))
 
diff --git a/packages/shared/src/UI/modals/GasSettingModal/GasSettingModal.tsx b/packages/shared/src/UI/modals/GasSettingModal/GasSettingModal.tsx
index 6bf8de58ab34..acb05c49565e 100644
--- a/packages/shared/src/UI/modals/GasSettingModal/GasSettingModal.tsx
+++ b/packages/shared/src/UI/modals/GasSettingModal/GasSettingModal.tsx
@@ -8,7 +8,7 @@ import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
     },
 }))
 
diff --git a/packages/shared/src/UI/modals/GasSettingModal/Prior1559GasSetting.tsx b/packages/shared/src/UI/modals/GasSettingModal/Prior1559GasSetting.tsx
index 68aec8000c05..3ce54bc7b3c0 100644
--- a/packages/shared/src/UI/modals/GasSettingModal/Prior1559GasSetting.tsx
+++ b/packages/shared/src/UI/modals/GasSettingModal/Prior1559GasSetting.tsx
@@ -15,7 +15,7 @@ import {
 import { GasOptionType, pow10 } from '@masknet/web3-shared-base'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { useChainContext, useGasOptions, useNativeTokenPrice } from '@masknet/web3-hooks-base'
-import { ActionButton, makeStyles, MaskColorVar } from '@masknet/theme'
+import { ActionButton, makeStyles } from '@masknet/theme'
 import { Typography } from '@mui/material'
 import type { GasSettingProps } from './types.js'
 import { Trans, useLingui } from '@lingui/react/macro'
@@ -37,7 +37,8 @@ const useStyles = makeStyles()((theme) => ({
         width: '100%',
         overflowX: 'scroll',
         '& > *': {
-            backgroundColor: theme.palette.mode === 'dark' ? '#212442' : '#f7f9fa',
+            backgroundColor: '#f7f9fa',
+            ...theme.applyStyles('dark', { backgroundColor: '#212442' }),
             borderRadius: 8,
             padding: 10,
             display: 'flex',
@@ -57,7 +58,7 @@ const useStyles = makeStyles()((theme) => ({
         wordBreak: 'break-all',
     },
     label: {
-        color: theme.palette.primary.main,
+        color: theme.vars.palette.primary.main,
         fontSize: 12,
         lineHeight: '16px',
         margin: '10px 0',
@@ -66,9 +67,9 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     selected: {
-        backgroundColor: theme.palette.primary.main,
+        backgroundColor: theme.vars.palette.primary.main,
         '& > *': {
-            color: theme.palette.primary.contrastText,
+            color: theme.vars.palette.primary.contrastText,
         },
     },
     button: {
@@ -79,7 +80,7 @@ const useStyles = makeStyles()((theme) => ({
     price: {
         fontSize: 12,
         lineHeight: '16px',
-        color: MaskColorVar.normalText,
+        color: theme.vars.palette.maskColor.normalText,
     },
 }))
 
diff --git a/packages/shared/src/UI/modals/ImageEditor/ImageEditor.tsx b/packages/shared/src/UI/modals/ImageEditor/ImageEditor.tsx
index 0046a21f3877..97f68b6dc66c 100644
--- a/packages/shared/src/UI/modals/ImageEditor/ImageEditor.tsx
+++ b/packages/shared/src/UI/modals/ImageEditor/ImageEditor.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles()((theme) => ({
     cancel: {
         '&:hover': {
             border: 'none',
-            background: theme.palette.maskColor.bottom,
+            background: theme.vars.palette.maskColor.bottom,
         },
     },
     content: {
@@ -73,15 +73,15 @@ export function ImageEditor({ title, image, onSave, AvatarEditorProps = EMPTY_OB
                     onChange={(_, value) => setScale(value as number)}
                     aria-label="Scale"
                     sx={{
-                        color: (theme) => theme.palette.maskColor.primary,
+                        color: (theme) => theme.vars.palette.maskColor.primary,
                         '& .MuiSlider-thumb': {
                             width: 12,
                             height: 12,
-                            backgroundColor: (theme) => theme.palette.maskColor.primary,
+                            backgroundColor: (theme) => theme.vars.palette.maskColor.primary,
                         },
                         '& .MuiSlider-rail': {
                             opacity: 0.5,
-                            backgroundColor: (theme) => theme.palette.maskColor.thirdMain,
+                            backgroundColor: (theme) => theme.vars.palette.maskColor.thirdMain,
                         },
                     }}
                 />
diff --git a/packages/shared/src/UI/modals/LeavePageConfirmModal/LeavePageConfirm.tsx b/packages/shared/src/UI/modals/LeavePageConfirmModal/LeavePageConfirm.tsx
index 62bb4d338b0c..b369d7db0f64 100644
--- a/packages/shared/src/UI/modals/LeavePageConfirmModal/LeavePageConfirm.tsx
+++ b/packages/shared/src/UI/modals/LeavePageConfirmModal/LeavePageConfirm.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles<{
     return {
         root: {
             width: 384,
-            background: theme.palette.maskColor.bottom,
+            background: theme.vars.palette.maskColor.bottom,
             position: props.positionStyle.position,
             top: props.positionStyle.top,
             right: props.positionStyle.right,
@@ -31,7 +31,7 @@ const useStyles = makeStyles<{
             },
         },
         header: {
-            background: theme.palette.maskColor.bottom,
+            background: theme.vars.palette.maskColor.bottom,
         },
         actions: {
             padding: theme.spacing(1, 2, 2, 2),
diff --git a/packages/shared/src/UI/modals/PersonaSelectPanelModal/PersonaSelectPanelDialog.tsx b/packages/shared/src/UI/modals/PersonaSelectPanelModal/PersonaSelectPanelDialog.tsx
index bf191cf875af..3b044b503818 100644
--- a/packages/shared/src/UI/modals/PersonaSelectPanelModal/PersonaSelectPanelDialog.tsx
+++ b/packages/shared/src/UI/modals/PersonaSelectPanelModal/PersonaSelectPanelDialog.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles<{
             width: 384,
             height: 386,
             padding: theme.spacing(1),
-            background: theme.palette.maskColor.bottom,
+            background: theme.vars.palette.maskColor.bottom,
             position: props.positionStyle.position,
             top: props.positionStyle.top,
             right: props.positionStyle.right,
@@ -31,7 +31,7 @@ const useStyles = makeStyles<{
             },
         },
         header: {
-            background: `${theme.palette.maskColor.bottom} !important`,
+            background: `${theme.vars.palette.maskColor.bottom} !important`,
         },
     }
 })
diff --git a/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx b/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx
index 9a1f7a34ce3b..14e869a7f247 100644
--- a/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx
+++ b/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx
@@ -2,7 +2,7 @@ import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { EMPTY_LIST, EnhanceableSite, NetworkPluginID, Sniffings } from '@masknet/shared-base'
 import { useRowSize } from '@masknet/shared-base-ui'
-import { makeStyles, MaskColorVar } from '@masknet/theme'
+import { makeStyles } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import {
     useAccount,
@@ -64,10 +64,10 @@ const useStyles = makeStyles<StyleProps, 'container' | 'sidebar' | 'tokenList'>(
         },
     },
     search: {
-        backgroundColor: Sniffings.is_dashboard_page ? 'transparent !important' : theme.palette.maskColor.input,
-        border: `solid 1px ${MaskColorVar.twitterBorderLine}`,
+        backgroundColor: Sniffings.is_dashboard_page ? 'transparent !important' : theme.vars.palette.maskColor.input,
+        border: `solid 1px ${theme.vars.palette.maskColor.twitterBorderLine}`,
         [`&.${inputClasses.focused}`]: {
-            background: theme.palette.maskColor.bottom,
+            background: theme.vars.palette.maskColor.bottom,
         },
     },
     wrapper: {
diff --git a/packages/shared/src/UI/modals/SelectProviderModal/GuideDialog.tsx b/packages/shared/src/UI/modals/SelectProviderModal/GuideDialog.tsx
index dbf36a651e49..35ee23ee355e 100644
--- a/packages/shared/src/UI/modals/SelectProviderModal/GuideDialog.tsx
+++ b/packages/shared/src/UI/modals/SelectProviderModal/GuideDialog.tsx
@@ -14,13 +14,13 @@ const useStyles = makeStyles()((theme) => ({
         },
     },
     section: {
-        border: `solid 1px ${theme.palette.maskColor.line}`,
+        border: `solid 1px ${theme.vars.palette.maskColor.line}`,
         borderRadius: 8,
         padding: theme.spacing(3),
         marginBottom: theme.spacing(2),
     },
     card: {
-        border: `solid 1px ${theme.palette.maskColor.line}`,
+        border: `solid 1px ${theme.vars.palette.maskColor.line}`,
         borderRadius: 8,
         marginTop: theme.spacing(3),
         display: 'inline-block',
@@ -31,7 +31,7 @@ const useStyles = makeStyles()((theme) => ({
         display: 'inline-flex',
         flexDirection: 'row',
         alignItems: 'center',
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         '&:hover': {
             textDecoration: 'none',
         },
@@ -39,7 +39,7 @@ const useStyles = makeStyles()((theme) => ({
     button: {
         padding: theme.spacing(1.5),
         display: 'inline-block',
-        border: `solid 1px ${theme.palette.maskColor.line}`,
+        border: `solid 1px ${theme.vars.palette.maskColor.line}`,
         marginRight: theme.spacing(3),
     },
 }))
diff --git a/packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx b/packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx
index b6c0bcbef706..2487655bf045 100644
--- a/packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx
+++ b/packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx
@@ -68,9 +68,9 @@ const useStyles = makeStyles()((theme) => {
             height: '100%',
             fontSize: 36,
             display: 'flex',
-            backgroundColor: theme.palette.maskColor.bottom,
+            backgroundColor: theme.vars.palette.maskColor.bottom,
             '&:hover': {
-                background: theme.palette.maskColor.bg,
+                background: theme.vars.palette.maskColor.bg,
             },
         },
     }
@@ -201,7 +201,7 @@ export const PluginProviderRender = memo(function PluginProviderRender({
             </section>
             {unavailableProviders.length ?
                 <>
-                    <Typography sx={{ mt: 2, fontSize: 14 }} color={theme.palette.maskColor.second}>
+                    <Typography sx={{ mt: 2, fontSize: 14 }} color={theme.vars.palette.maskColor.second}>
                         <Trans>The following wallets are not installed or in conflict with others</Trans>
                     </Typography>
                     <section className={classes.section}>
diff --git a/packages/shared/src/UI/modals/SelectProviderModal/ProviderItem.tsx b/packages/shared/src/UI/modals/SelectProviderModal/ProviderItem.tsx
index ef0c86597368..92e45dce1a93 100644
--- a/packages/shared/src/UI/modals/SelectProviderModal/ProviderItem.tsx
+++ b/packages/shared/src/UI/modals/SelectProviderModal/ProviderItem.tsx
@@ -5,19 +5,19 @@ import { Typography, Card, ButtonBase, type ButtonBaseProps, type CardProps } fr
 const useStyles = makeStyles()((theme) => ({
     card: {
         textAlign: 'center',
-        border: `solid 1px ${theme.palette.maskColor.line}`,
+        border: `solid 1px ${theme.vars.palette.maskColor.line}`,
         borderRadius: 8,
     },
     button: {
         width: '100%',
         display: 'flex',
         alignItems: 'center',
-        color: theme.palette.text.secondary,
+        color: theme.vars.palette.text.secondary,
         padding: theme.spacing(1.5),
         transition: 'all ease 0.3s',
         '&:hover': {
-            background: theme.palette.maskColor.bg,
-            color: theme.palette.text.primary,
+            background: theme.vars.palette.maskColor.bg,
+            color: theme.vars.palette.text.primary,
         },
     },
     icon: {
@@ -50,7 +50,7 @@ export function ProviderItem({ icon, name, iconFilterColor, className, ButtonBas
             <ButtonBase className={`${classes.button} dashboard-style`} {...ButtonBaseProps}>
                 <img src={icon} className={classes.icon} style={style} />
                 <Typography className={classes.name}>{name}</Typography>
-                <Icons.RightArrow size={20} color={theme.palette.maskColor.second} />
+                <Icons.RightArrow size={20} color={theme.vars.palette.maskColor.second} />
             </ButtonBase>
         </Card>
     )
diff --git a/packages/shared/src/UI/modals/WalletConnectQRCodeModal/QRCodeDialog.tsx b/packages/shared/src/UI/modals/WalletConnectQRCodeModal/QRCodeDialog.tsx
index d56abfa33f98..83501686645b 100644
--- a/packages/shared/src/UI/modals/WalletConnectQRCodeModal/QRCodeDialog.tsx
+++ b/packages/shared/src/UI/modals/WalletConnectQRCodeModal/QRCodeDialog.tsx
@@ -48,14 +48,14 @@ const useStyles = makeStyles()((theme) => ({
         margin: theme.spacing(0, 'auto'),
         padding: theme.spacing(2),
         boxSizing: 'border-box',
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
         position: 'relative',
         zIndex: 10,
     },
     qrcode: {
         width: 361,
         height: 361,
-        boxShadow: theme.palette.maskColor.bottomBg,
+        boxShadow: theme.vars.palette.maskColor.bottomBg,
         borderRadius: theme.spacing(2),
         overflow: 'hidden',
     },
diff --git a/packages/shared/src/UI/modals/WalletRiskWarningModal/WalletRiskWarning.tsx b/packages/shared/src/UI/modals/WalletRiskWarningModal/WalletRiskWarning.tsx
index 14627d9d9797..e3c826b7d874 100644
--- a/packages/shared/src/UI/modals/WalletRiskWarningModal/WalletRiskWarning.tsx
+++ b/packages/shared/src/UI/modals/WalletRiskWarningModal/WalletRiskWarning.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { Icons } from '@masknet/icons'
 import { DialogActions, DialogContent, Typography } from '@mui/material'
-import { getMaskColor, makeStyles, useCustomSnackbar, ActionButton } from '@masknet/theme'
+import { makeStyles, useCustomSnackbar, ActionButton } from '@masknet/theme'
 import { InjectedDialog, ActionButtonPromise, WalletStatusBox } from '@masknet/shared'
 import { Sniffings } from '@masknet/shared-base'
 import { useMatchXS } from '@masknet/shared-base-ui'
@@ -9,7 +9,7 @@ import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     paper: {
-        color: getMaskColor(theme).redMain,
+        color: theme.vars.palette.maskColor.redMain,
         paddingBottom: 0,
         paddingLeft: 16,
         paddingRight: 16,
@@ -22,7 +22,8 @@ const useStyles = makeStyles()((theme) => ({
             borderRadius: '20px',
             width: 5,
             border: '7px solid rgba(0, 0, 0, 0)',
-            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(250, 250, 250, 0.2)' : 'rgba(0, 0, 0, 0.2)',
+            backgroundColor: 'rgba(0, 0, 0, 0.2)',
+            ...theme.applyStyles('dark', { backgroundColor: 'rgba(250, 250, 250, 0.2)' }),
             backgroundClip: 'padding-box',
         },
     },
@@ -42,7 +43,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 24,
         fontWeight: 700,
         lineHeight: '28.8px',
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
     },
     icon: {
         display: 'flex',
@@ -53,7 +54,7 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '18px',
         fontWeight: 400,
         marginBottom: theme.spacing(2),
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
     },
 }))
 
diff --git a/packages/shared/src/UI/wallet/DeriveWalletTable.tsx b/packages/shared/src/UI/wallet/DeriveWalletTable.tsx
index 09a514adf1e6..68c3fcb62ad6 100644
--- a/packages/shared/src/UI/wallet/DeriveWalletTable.tsx
+++ b/packages/shared/src/UI/wallet/DeriveWalletTable.tsx
@@ -26,7 +26,7 @@ import { Trans } from '@lingui/react/macro'
 
 const useStyles = makeStyles()((theme) => ({
     header: {
-        backgroundColor: theme.palette.maskColor.publicBg,
+        backgroundColor: theme.vars.palette.maskColor.publicBg,
         padding: '14px 0',
         borderBottom: 'none',
     },
@@ -36,15 +36,15 @@ const useStyles = makeStyles()((theme) => ({
         fontWeight: 700,
         marginLeft: 6,
         marginRight: 8,
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     second: {
         fontSize: 12,
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
     },
     third: {
         fontSize: 12,
-        color: theme.palette.maskColor.third,
+        color: theme.vars.palette.maskColor.third,
     },
     symbol: {
         marginLeft: 8,
@@ -55,11 +55,11 @@ const useStyles = makeStyles()((theme) => ({
         transform: 'translateY(-2px)',
     },
     icon: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         cursor: 'pointer',
     },
     link: {
-        color: theme.palette.maskColor.second,
+        color: theme.vars.palette.maskColor.second,
         marginLeft: 8,
         cursor: 'pointer',
     },
@@ -85,11 +85,11 @@ const useStyles = makeStyles()((theme) => ({
     tableRowWithHoverEffect: {
         '&:hover': {
             borderRadius: 8,
-            background: theme.palette.maskColor.bg,
+            background: theme.vars.palette.maskColor.bg,
         },
     },
     colorPrimary: {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
 }))
 
@@ -217,19 +217,19 @@ export const DeriveWalletTableRow = memo<DeriveWalletTableRowProps>(function Der
                 <Checkbox
                     disabled={added}
                     checked={selected || added}
-                    icon={<Icons.CheckboxNo size={16} color={theme.palette.maskColor.secondaryLine} />}
+                    icon={<Icons.CheckboxNo size={16} color={theme.vars.palette.maskColor.secondaryLine} />}
                     checkedIcon={<Icons.Checkbox size={16} />}
                     sx={{
-                        color: theme.palette.maskColor.primary,
+                        color: theme.vars.palette.maskColor.primary,
                         padding: 0,
                         width: 16,
                         height: 16,
                         borderRadius: 1,
                         [`&.${checkboxClasses.checked}`]: {
-                            color: theme.palette.maskColor.primary,
+                            color: theme.vars.palette.maskColor.primary,
                         },
                         [`&.${checkboxClasses.disabled}`]: {
-                            color: `${theme.palette.maskColor.secondaryMain}!important`,
+                            color: `${theme.vars.palette.maskColor.secondaryMain}!important`,
                         },
                     }}
                     onChange={(e) => onCheck(e.target.checked)}
diff --git a/packages/shared/src/hooks/useLineChart/index.ts b/packages/shared/src/hooks/useLineChart/index.ts
index ca679446e176..1dfd6a9b4f32 100644
--- a/packages/shared/src/hooks/useLineChart/index.ts
+++ b/packages/shared/src/hooks/useLineChart/index.ts
@@ -1,4 +1,5 @@
-import { alpha, useTheme } from '@mui/material'
+import { useTheme } from '@mui/material'
+import { alpha } from '@masknet/theme'
 import * as d3 from 'd3'
 import { format } from 'date-fns'
 import { useEffect, type RefObject } from 'react'
@@ -73,7 +74,7 @@ export function useLineChart(
             .append('text')
             .style('font-size', 14)
             .style('font-weight', 700)
-            .attr('fill', theme.palette.text.secondary)
+            .attr('fill', theme.vars.palette.text.secondary)
             .text(formatTooltip(min))
         const minTextNode = minTextSelection.node()
         const minTextRect = minTextNode?.getBoundingClientRect()
@@ -91,7 +92,7 @@ export function useLineChart(
             .append('text')
             .style('font-size', 14)
             .style('font-weight', 700)
-            .attr('fill', theme.palette.text.secondary)
+            .attr('fill', theme.vars.palette.text.secondary)
             .text(formatTooltip(max))
         const maxTextNode = maxTextSelection.node()
         const maxTextRect = maxTextNode?.getBoundingClientRect()
@@ -167,7 +168,11 @@ export function useLineChart(
 
             g.style('display', null).style('pointer-events', 'none').style('font', '12px sans-serif')
 
-            const path = g.selectAll('path').data([null]).join('path').attr('fill', theme.palette.background.tipMask)
+            const path = g
+                .selectAll('path')
+                .data([null])
+                .join('path')
+                .attr('fill', theme.vars.palette.background.tipMask)
 
             const text = g
                 .selectAll('text')
@@ -181,7 +186,7 @@ export function useLineChart(
                         .attr('x', 0)
                         .attr('y', (d, i) => `${i * 1.2}em`)
                         .style('font-weight', (_, i) => (i ? null : 'bold'))
-                        .attr('fill', theme.palette.maskColor.bottom)
+                        .attr('fill', theme.vars.palette.maskColor.bottom)
                         .text((d) => d),
                 )
 
@@ -204,7 +209,7 @@ export function useLineChart(
                         `M-${boxArrowX} -54h105s4 0 4 4v38s0 4 -4 4h-120s-4 0 -4 -4v-38s0 -4 4 -4 ${
                             isFirstIndex ? 'M -35 0 L -42 -10 L 11 -10 L -28 -10 Z' : 'M0 0L-7 -10L12 -10L7 -10Z'
                         }`,
-                    ).attr('fill', alpha(theme.palette.background.tipMask, 0.9))
+                    ).attr('fill', alpha(theme.vars.palette.background.tipMask, 0.9))
                 } else {
                     text.attr('transform', `translate(${-boxHalfWidth + offset},${18 - yValue})`)
 
@@ -213,7 +218,7 @@ export function useLineChart(
                         `M-${boxArrowX} 10h105s4 0 4 4v38s0 4 -4 4h-120s-4 0 -4 -4v-38s0 -4 4 -4 ${
                             isFirstIndex ? 'M -35 2 L -41 10 L 12 10 L -23 16 Z' : 'M0 2L-7 10L12 10L7 10Z'
                         } `,
-                    ).attr('fill', alpha(theme.palette.background.tipMask, 0.9))
+                    ).attr('fill', alpha(theme.vars.palette.background.tipMask, 0.9))
                 }
             }
         }
diff --git a/packages/shared/src/hooks/useMenu.tsx b/packages/shared/src/hooks/useMenu.tsx
index 1764582a0772..a7c86b3c08de 100644
--- a/packages/shared/src/hooks/useMenu.tsx
+++ b/packages/shared/src/hooks/useMenu.tsx
@@ -21,10 +21,8 @@ export interface MenuConfigOptions extends Partial<MenuProps> {
 const useStyles = makeStyles()((theme) => ({
     menu: {
         // TODO: replace hard code to theme
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 0px 20px rgba(255, 255, 255, 0.12)'
-            :   '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        ...theme.applyStyles('dark', { boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.12)' }),
     },
 }))
 
diff --git a/packages/shared/src/hooks/usePriceLineChart.ts b/packages/shared/src/hooks/usePriceLineChart.ts
index f1aa5bb25397..0144d2cdf116 100644
--- a/packages/shared/src/hooks/usePriceLineChart.ts
+++ b/packages/shared/src/hooks/usePriceLineChart.ts
@@ -19,7 +19,7 @@ export function usePriceLineChart(
     },
 ) {
     const theme = useTheme()
-    const colors = theme.palette.maskColor
+    const colors = theme.vars.palette.maskColor
     const startValue = first(data)?.value ?? 0
     const endValue = last(data)?.value ?? 0
     const defaultColor = endValue < startValue ? colors.danger : colors.success
diff --git a/packages/theme/src/CSSVariables/index.ts b/packages/theme/src/CSSVariables/index.ts
index 3afff77b4e9a..2915f2b16671 100644
--- a/packages/theme/src/CSSVariables/index.ts
+++ b/packages/theme/src/CSSVariables/index.ts
@@ -1,4 +1,3 @@
 export * from './applyToDOM.js'
 export * from './Injector.js'
 export * from './constants.js'
-export * from './vars.js'
diff --git a/packages/theme/src/CSSVariables/vars.ts b/packages/theme/src/CSSVariables/vars.ts
deleted file mode 100644
index d4856483394d..000000000000
--- a/packages/theme/src/CSSVariables/vars.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { Theme } from '@mui/material'
-import { kebabCase } from 'lodash-es'
-import { LightColor, DarkColor } from './constants.js'
-
-export function getMaskColor(theme: Theme) {
-    if (theme.palette.mode === 'dark') return DarkColor
-    return LightColor
-}
-export type MaskCSSVariableColor = string & {
-    /** Append alpha channel to the original color */
-    alpha(alpha: number): string
-} & ((defaultValue?: string) => string)
-
-function set(key: string | symbol) {
-    if (typeof key === 'symbol') return
-    const cssVar = kebabCase(key)
-    function value(defaultValue?: string) {
-        // it might be an object when used in styled components.
-        if (typeof defaultValue !== 'string') defaultValue = undefined
-        const x = `var(--mask-${cssVar}${defaultValue ? ', ' + defaultValue : ''})`
-        return x
-    }
-    Object.assign(value, {
-        [Symbol.toPrimitive]: () => `var(--mask-${cssVar})`,
-        alpha: (alpha: number) => `rgba(var(--mask-${cssVar}-fragment), ${alpha})`,
-    })
-    Object.defineProperty(MaskColorVar, key, { configurable: true, enumerable: true, value })
-    return value
-}
-/**
- * @deprecated Use theme.palette.maskColor
- */
-export const MaskColorVar: Record<keyof typeof LightColor, MaskCSSVariableColor> = {
-    __proto__: new Proxy(
-        {},
-        {
-            get: (_, p) => set(p),
-            getOwnPropertyDescriptor: (_, p) => {
-                set(p)
-                return Object.getOwnPropertyDescriptor(MaskColorVar, p)
-            },
-        },
-    ),
-} as any
diff --git a/packages/theme/src/Components/Alert/index.tsx b/packages/theme/src/Components/Alert/index.tsx
index 6e6337ebf9c5..a6fb5a1d2022 100644
--- a/packages/theme/src/Components/Alert/index.tsx
+++ b/packages/theme/src/Components/Alert/index.tsx
@@ -1,4 +1,5 @@
-import { Alert, type AlertProps, alpha } from '@mui/material'
+import { Alert, type AlertProps } from '@mui/material'
+import { alpha } from '../../Theme/colors.js'
 import { makeStyles } from '../../UIHelper/makeStyles.js'
 
 const useStyles = makeStyles()((theme) => ({
@@ -22,13 +23,13 @@ const useStyles = makeStyles()((theme) => ({
     action: {
         padding: 0,
     },
-    standardWarning: {
-        color: theme.palette.maskColor.warn,
-        background: alpha(theme.palette.maskColor.warn, 0.1),
+    warning: {
+        color: theme.vars.palette.maskColor.warn,
+        background: alpha(theme.vars.palette.maskColor.warn, 0.1),
     },
-    standardError: {
-        color: theme.palette.maskColor.danger,
-        background: alpha(theme.palette.maskColor.danger, 0.1),
+    error: {
+        color: theme.vars.palette.maskColor.danger,
+        background: alpha(theme.vars.palette.maskColor.danger, 0.1),
     },
 }))
 
@@ -44,8 +45,8 @@ export function MaskAlert(props: AlertProps) {
                 message: classes.message,
                 icon: classes.icon,
                 action: classes.action,
-                colorWarning: classes.standardWarning,
-                colorError: classes.standardError,
+                colorWarning: classes.warning,
+                colorError: classes.error,
                 ...rest.classes,
             }}>
             {children}
diff --git a/packages/theme/src/Components/SearchableList/SearchableList.tsx b/packages/theme/src/Components/SearchableList/SearchableList.tsx
index 4d377e62d6b2..dcd52938fb46 100644
--- a/packages/theme/src/Components/SearchableList/SearchableList.tsx
+++ b/packages/theme/src/Components/SearchableList/SearchableList.tsx
@@ -31,7 +31,7 @@ const useStyles = makeStyles()((theme) => ({
             borderRadius: '20px',
             width: 5,
             border: '7px solid rgba(0, 0, 0, 0)',
-            backgroundColor: theme.palette.maskColor.secondaryLine,
+            backgroundColor: theme.vars.palette.maskColor.secondaryLine,
             backgroundClip: 'padding-box',
         },
         '& > div > div': {
@@ -43,9 +43,9 @@ const useStyles = makeStyles()((theme) => ({
         scrollbarWidth: 'none',
     },
     error: {
-        backgroundColor: theme.palette.maskColor.bottom,
+        backgroundColor: theme.vars.palette.maskColor.bottom,
         fontSize: 14,
-        color: theme.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.danger,
     },
 }))
 
@@ -177,7 +177,9 @@ export function SearchableList<T extends object>({
                                             size={18}
                                             onClick={handleClear}
                                             color={
-                                                textFieldPropsRest.error ? theme.palette.maskColor.danger : undefined
+                                                textFieldPropsRest.error ?
+                                                    theme.vars.palette.maskColor.danger
+                                                :   undefined
                                             }
                                         />
                                     :   null,
diff --git a/packages/theme/src/Components/Tabs/BaseTab.tsx b/packages/theme/src/Components/Tabs/BaseTab.tsx
index d853370f6d0f..d768c4110d95 100644
--- a/packages/theme/src/Components/Tabs/BaseTab.tsx
+++ b/packages/theme/src/Components/Tabs/BaseTab.tsx
@@ -1,27 +1,24 @@
-import { Button, type ButtonProps, styled, type Theme } from '@mui/material'
-import type { ComponentType } from 'react'
+import { Button, type ButtonProps, styled } from '@mui/material'
 
-const BaseTabWrap: ComponentType<ButtonProps & { activated: boolean }> = styled(Button, {
+const BaseTabWrap = styled(Button, {
     shouldForwardProp: (prop) => prop !== 'activated',
-})(({ theme, activated }: { theme: Theme; activated?: boolean }) => ({
+})<{ activated?: boolean }>(({ theme, activated }) => ({
     flex: 1,
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
     height: 36,
     lineHeight: '18px',
-    boxShadow:
-        activated ?
-            `0px 0px 20px ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.05)'}`
-        :   'none',
-    background: activated ? theme.palette.maskColor.bottom : 'transparent',
+    boxShadow: activated ? '0px 0px 20px rgba(0, 0, 0, 0.05)' : 'none',
+    ...theme.applyStyles('dark', { boxShadow: activated ? '0px 0px 20px rgba(255, 255, 255, 0.12)' : 'none' }),
+    background: activated ? theme.vars.palette.maskColor.bottom : 'transparent',
     borderRadius: `${theme.spacing(1.5)} ${theme.spacing(1.5)} 0px 0px !important`,
-    color: activated ? theme.palette.maskColor.main + ' !important' : theme.palette.maskColor.secondaryDark,
+    color: activated ? theme.vars.palette.maskColor.main + ' !important' : theme.vars.palette.maskColor.secondaryDark,
     fontSize: 16,
     fontWeight: 'bold',
 
     '&:hover': {
         boxShadow: activated ? '0 0 20px rgba(0, 0, 0, 0.05)' : 'none',
-        background: activated ? theme.palette.maskColor.bottom : 'transparent',
+        background: activated ? theme.vars.palette.maskColor.bottom : 'transparent',
     },
     // If there is only single one tab.
     '&:first-of-type:last-of-type': {
diff --git a/packages/theme/src/Components/Tabs/FlexibleTab.tsx b/packages/theme/src/Components/Tabs/FlexibleTab.tsx
index b10796b52569..9f6b05486c4d 100644
--- a/packages/theme/src/Components/Tabs/FlexibleTab.tsx
+++ b/packages/theme/src/Components/Tabs/FlexibleTab.tsx
@@ -10,15 +10,15 @@ const FlexibleTabTabWrap = styled(Button, {
     height: 38,
     lineHeight: '16px',
     minWidth: theme.spacing(3),
-    background: activated ? theme.palette.maskColor.input : 'transparent',
+    background: activated ? theme.vars.palette.maskColor.input : 'transparent',
     borderRadius: `${theme.spacing(1)} !important`,
-    color: activated ? (theme.palette.maskColor.highlight ?? '#1C68F3') : theme.palette.text.secondary,
+    color: activated ? (theme.vars.palette.maskColor.highlight ?? '#1C68F3') : theme.vars.palette.text.secondary,
     fontSize: 14,
     fontWeight: 'bold !important',
 
     '&:hover': {
-        background: activated ? theme.palette.maskColor.input : 'transparent',
-        color: activated ? (theme.palette.maskColor.highlight ?? '#1C68F3') : theme.palette.text.primary,
+        background: activated ? theme.vars.palette.maskColor.input : 'transparent',
+        color: activated ? (theme.vars.palette.maskColor.highlight ?? '#1C68F3') : theme.vars.palette.text.primary,
         boxShadow: 'none',
     },
 }))
diff --git a/packages/theme/src/Components/Tabs/RoundTab.tsx b/packages/theme/src/Components/Tabs/RoundTab.tsx
index e6b01d90456b..f99297a6f798 100644
--- a/packages/theme/src/Components/Tabs/RoundTab.tsx
+++ b/packages/theme/src/Components/Tabs/RoundTab.tsx
@@ -8,17 +8,17 @@ const RoundTabWrap = styled(Button, {
     paddingRight: theme.spacing(2),
     height: 34,
     lineHeight: '16px',
-    background: activated ? theme.palette.maskColor.bottom : 'transparent',
+    background: activated ? theme.vars.palette.maskColor.bottom : 'transparent',
     borderRadius: `${theme.spacing(2)} !important`,
-    color: activated ? theme.palette.text.primary : theme.palette.text.secondary,
+    color: activated ? theme.vars.palette.text.primary : theme.vars.palette.text.secondary,
     fontSize: 14,
     fontWeight: 'bold',
     boxShadow: activated ? ' 0px 2px 5px 1px rgba(0, 0, 0, 0.05);' : 'none',
 
     '&:hover': {
         boxShadow: activated ? ' 0px 2px 5px 1px rgba(0, 0, 0, 0.05);' : 'none',
-        color: theme.palette.text.primary,
-        background: activated ? theme.palette.maskColor.bottom : 'transparent',
+        color: theme.vars.palette.text.primary,
+        background: activated ? theme.vars.palette.maskColor.bottom : 'transparent',
     },
 }))
 
diff --git a/packages/theme/src/Components/Tabs/index.tsx b/packages/theme/src/Components/Tabs/index.tsx
index 43c3f553475f..3dcffd4db054 100644
--- a/packages/theme/src/Components/Tabs/index.tsx
+++ b/packages/theme/src/Components/Tabs/index.tsx
@@ -1,14 +1,6 @@
-import {
-    Box,
-    Button,
-    ButtonGroup,
-    type ButtonGroupProps,
-    styled,
-    Tab,
-    alpha,
-    type ButtonGroupClasses,
-} from '@mui/material'
+import { Box, Button, ButtonGroup, type ButtonGroupProps, styled, Tab, type ButtonGroupClasses } from '@mui/material'
 import { useTabContext, getPanelId, getTabId } from '@mui/lab'
+import { alpha } from '../../Theme/colors.js'
 import {
     Children,
     isValidElement,
@@ -47,14 +39,14 @@ const ArrowButtonWrap = styled(Button)(({ theme }) => ({
     height: defaultTabSize,
     width: defaultTabSize,
     minWidth: `${defaultTabSize}px !important`,
-    background: theme.palette.background.input,
+    background: theme.vars.palette.background.input,
     '&:hover': {
-        background: theme.palette.background.input,
+        background: theme.vars.palette.background.input,
     },
 }))
 
 const ArrowBackIosNewIconWrap = styled(ArrowBackIosNewIcon)(({ theme }) => ({
-    color: theme.palette.text.primary,
+    color: theme.vars.palette.text.primary,
     width: 16,
     borderRadius: '0 8px 8px 0',
 }))
@@ -71,12 +63,10 @@ const FlexibleButtonGroupPanel = styled(Box, {
     padding: theme.spacing(1.5),
     maxWidth: 'calc(100% - 24px)',
     width: 'calc(100% - 24px)',
-    boxShadow:
-        isOpen ?
-            `0px 0px 20px ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.05)'}`
-        :   'none',
+    boxShadow: isOpen ? '0px 0px 20px rgba(0, 0, 0, 0.05)' : 'none',
+    ...theme.applyStyles('dark', { boxShadow: isOpen ? '0px 0px 20px rgba(255, 255, 255, 0.12)' : 'none' }),
     backdropFilter: 'blur(20px)',
-    background: alpha(theme.palette.maskColor.bottom, 0.8),
+    background: alpha(theme.vars.palette.maskColor.bottom, 0.8),
     boxSizing: 'content-box',
 }))
 
@@ -95,7 +85,7 @@ const ButtonGroupWrap = styled(ButtonGroup, {
     ...(maskVariant === 'round' ?
         {
             padding: theme.spacing(0.5),
-            background: theme.palette.maskColor.input,
+            background: theme.vars.palette.maskColor.input,
             borderRadius: 18,
         }
     : maskVariant === 'flexible' ?
@@ -130,10 +120,14 @@ const FlexButtonGroupWrap = styled(ButtonGroup, {
     borderRadius: 0,
     background:
         !isOpen && isOverflow ?
-            theme.palette.mode === 'light' ?
-                `linear-gradient(270deg, rgba(255,255,255,1) ${defaultTabSize}px, rgba(223, 229, 244, 0.8) ${defaultTabSize}px, rgba(244, 247, 254, 0) 72px)`
-            :   `linear-gradient(270deg, transparent ${defaultTabSize}px, rgba(49, 49, 49, 0.8) ${defaultTabSize}px, rgba(23, 23, 23, 0) 72px)`
+            `linear-gradient(270deg, rgba(255,255,255,1) ${defaultTabSize}px, rgba(223, 229, 244, 0.8) ${defaultTabSize}px, rgba(244, 247, 254, 0) 72px)`
         :   'transparent',
+    ...theme.applyStyles('dark', {
+        background:
+            !isOpen && isOverflow ?
+                `linear-gradient(270deg, transparent ${defaultTabSize}px, rgba(49, 49, 49, 0.8) ${defaultTabSize}px, rgba(23, 23, 23, 0) 72px)`
+            :   'transparent',
+    }),
 }))
 
 const tabMapping: {
diff --git a/packages/theme/src/Components/TextField/index.tsx b/packages/theme/src/Components/TextField/index.tsx
index a2fe53b460ce..b42e72b6d574 100644
--- a/packages/theme/src/Components/TextField/index.tsx
+++ b/packages/theme/src/Components/TextField/index.tsx
@@ -8,12 +8,11 @@ import {
     InputBase,
     type InputBaseProps,
     inputBaseClasses,
-    alpha,
     mergeSlotProps,
 } from '@mui/material'
 import { Sniffings } from '@masknet/shared-base'
+import { alpha } from '../../Theme/colors.js'
 import { makeStyles } from '../../UIHelper/makeStyles.js'
-import { MaskColorVar, getMaskColor } from '../../CSSVariables/vars.js'
 
 const useStyles = makeStyles()((theme) => ({
     label: {
@@ -25,7 +24,7 @@ const useStyles = makeStyles()((theme) => ({
         fontSize: 12,
         lineHeight: '16px',
         fontWeight: 'bolder',
-        color: getMaskColor(theme).redMain,
+        color: theme.vars.palette.maskColor.redMain,
         paddingLeft: theme.spacing(0.5),
     },
     field: {
@@ -47,7 +46,7 @@ const useStyles = makeStyles()((theme) => ({
             WebkitAppearance: 'none',
         },
         '& input::-webkit-input-placeholder': {
-            color: theme.palette.maskColor.third,
+            color: theme.vars.palette.maskColor.third,
         },
         [`&.${inputBaseClasses.focused}`]: {
             background: 'transparent',
@@ -55,17 +54,20 @@ const useStyles = makeStyles()((theme) => ({
     },
     input: {
         padding: theme.spacing(1),
-        background: theme.palette.maskColor.input,
+        background: theme.vars.palette.maskColor.input,
         fontSize: 13,
         lineHeight: '16px',
         borderRadius: 6,
         border: '1px solid transparent',
         [`&.${formHelperTextClasses.error}`]: {
-            boxShadow: `0 0 0 ${theme.spacing(0.5)} ${MaskColorVar.redMain.alpha(0.2)}`,
-            borderColor: MaskColorVar.redMain.alpha(0.8),
+            boxShadow: `0 0 0 ${theme.spacing(0.5)} ${alpha(theme.vars.palette.maskColor.redMain, 0.2)}`,
+            borderColor: alpha(theme.vars.palette.maskColor.redMain, 0.8),
         },
         [`&.${formHelperTextClasses.focused}`]: {
-            borderColor: Sniffings.is_dashboard_page ? alpha(theme.palette.maskColor.primary, 0.5) : 'transparent',
+            borderColor:
+                Sniffings.is_dashboard_page ?
+                    alpha(theme.vars.palette.maskColor.primary, 0.5)
+                :   'transparent',
         },
     },
     inputDisabled: {
@@ -76,10 +78,13 @@ const useStyles = makeStyles()((theme) => ({
         background: 'transparent',
         ...(Sniffings.is_dashboard_page ?
             {
-                outline: `2px solid ${alpha(theme.palette.maskColor.primary, 0.2)}`,
-                borderColor: alpha(theme.palette.maskColor.primary, 0.5),
+                outline: `2px solid ${alpha(theme.vars.palette.maskColor.primary, 0.2)}`,
+                borderColor: alpha(theme.vars.palette.maskColor.primary, 0.5),
             }
-        :   { boxShadow: `0 0 0 2px ${theme.palette.mode === 'dark' ? '#4F5378' : 'rgba(28, 104, 243, 0.2)'}` }),
+        :   {
+                boxShadow: '0 0 0 2px rgba(28, 104, 243, 0.2)',
+                ...theme.applyStyles('dark', { boxShadow: '0 0 0 2px #4F5378' }),
+            }),
     },
 }))
 
diff --git a/packages/theme/src/Theme/colors.ts b/packages/theme/src/Theme/colors.ts
index 4c82ea44de3a..e3d34122e8a1 100644
--- a/packages/theme/src/Theme/colors.ts
+++ b/packages/theme/src/Theme/colors.ts
@@ -1,5 +1,9 @@
 // TODO: Just only provide maskColor, others will be deprecate.
 declare module '@mui/material/styles' {
+    interface CssThemeVariables {
+        enabled: true
+    }
+
     interface Palette {
         maskColor: MaskColor['maskColor']
         shadow: MaskColor['shadow']
@@ -16,11 +20,16 @@ declare module '@mui/material/styles' {
         third: string
         strong: string
         buttonText: string
+        twitterButton: string
+        twitterButtonText: string
     }
 
     interface TypeBackground {
         input: string
         tipMask: string
+        twitterTooltipBg: string
+        primaryBackground2: string
+        mainBackground: string
     }
 
     interface TypeAction {
@@ -28,8 +37,12 @@ declare module '@mui/material/styles' {
     }
 }
 
+export const alpha = (color: string, opacity: number) =>
+    `color-mix(in srgb, ${color}, transparent ${(1 - opacity) * 100}%)`
+
 export const MaskColors = {
     light: {
+        primary: { main: '#1c68f3' },
         grey: {
             '700': '#536471',
             '300': '#b9cad3',
@@ -42,9 +55,16 @@ export const MaskColors = {
             third: '#ACB4C1',
             strong: '#111418',
             buttonText: '#FFFFFF',
+            twitterButton: '#111418',
+            twitterButtonText: '#FFFFFF',
         },
         maskColor: {
             main: '#07101B',
+            textPrimary: '#111432',
+            textPluginColor: '#07101B',
+            textSecondary: '#7B8192',
+            normalText: '#7B8192',
+            textLight: '#A6A9B6',
             second: '#767F8D',
             third: '#ACB4C1',
             primaryMain: '#B5B7BB',
@@ -67,6 +87,10 @@ export const MaskColors = {
             primary: '#1C68F3',
             success: '#3DC233',
             warn: '#FFB100',
+            orangeMain: '#FFB915',
+            redMain: '#FF5F5F',
+            twitterBorderLine: '#EDF1F2',
+            setupGuideBorder: '#536471',
             danger: '#FF3545',
             white: '#ffffff',
             secondaryDark: '#767F8D',
@@ -84,11 +108,16 @@ export const MaskColors = {
         },
         shadow: {
             popup: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+            selectMenu: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+            tooltip: '0px 0px 20px rgba(0, 0, 0, 0.05)',
         },
         background: {
             default: '#F9F9F9',
             input: '#F2F6FA',
             tipMask: 'rgba(0, 0, 0, 0.85)',
+            twitterTooltipBg: 'rgba(0, 0, 0, 0.6)',
+            primaryBackground2: '#FBFBFC',
+            mainBackground: '#FFFFFF',
             messageShadow: 'rgba(101, 119, 134, 0.2)',
             paper: '#ffffff',
         },
@@ -104,6 +133,7 @@ export const MaskColors = {
         },
     },
     dark: {
+        primary: { main: '#1c68f3' },
         grey: {
             '700': '#8899a6',
             '300': '#6b7d8c',
@@ -112,6 +142,11 @@ export const MaskColors = {
         },
         maskColor: {
             main: '#F5F5F5',
+            textPrimary: '#FFFFFF',
+            textPluginColor: '#07101B',
+            textSecondary: 'ghostwhite',
+            normalText: 'rgba(255, 255, 255, 0.8)',
+            textLight: '#A6A9B6',
             second: 'rgba(255, 255, 255, 0.78)',
             third: 'rgba(255, 255, 255, 0.44)',
             primaryMain: 'rgba(255, 255, 255, 0.28)',
@@ -132,6 +167,10 @@ export const MaskColors = {
             primary: '#1C68F3',
             success: '#3DC233',
             warn: '#FFB100',
+            orangeMain: '#FFB915',
+            redMain: '#FF5F5F',
+            twitterBorderLine: '#2F3336',
+            setupGuideBorder: '#6E767D',
             danger: '#FF3545',
             white: '#ffffff',
             secondaryDark: '#767F8D',
@@ -144,10 +183,13 @@ export const MaskColors = {
             publicTwitter: '#1D9BF0',
             publicThirdMain: '#F3F3F4',
             publicBg: '#F9F9F9',
+            publicInput: '#F2F6FA',
             borderSecondary: '#536471',
         },
         shadow: {
             popup: '0px 4px 30px rgba(255, 255, 255, 0.15)',
+            selectMenu: '0px 4px 30px rgba(255, 255, 255, 0.15)',
+            tooltip: '0px 0px 20px rgba(255, 255, 255, 0.12)',
         },
         text: {
             primary: '#F5F5F5',
@@ -155,11 +197,16 @@ export const MaskColors = {
             third: '#666C75',
             strong: '#FFFFFF',
             buttonText: '#0F1419',
+            twitterButton: '#EFF3F4',
+            twitterButtonText: '#0F1419',
         },
         background: {
             default: '#1C1C1C',
             input: '#26292C',
             tipMask: 'rgba(255, 255, 255, 0.85)',
+            twitterTooltipBg: 'rgba(91, 112, 131, 0.6)',
+            primaryBackground2: '#212442',
+            mainBackground: '#111432',
             messageShadow: 'rgba(136, 153, 166, 0.2)',
             paper: '#101010',
         },
diff --git a/packages/theme/src/Theme/component-changes.tsx b/packages/theme/src/Theme/component-changes.tsx
index c301eff5e9b3..d8503173fac5 100644
--- a/packages/theme/src/Theme/component-changes.tsx
+++ b/packages/theme/src/Theme/component-changes.tsx
@@ -1,6 +1,5 @@
 import { Icons } from '@masknet/icons'
 import {
-    alpha,
     buttonClasses,
     radioClasses,
     checkboxClasses,
@@ -8,7 +7,6 @@ import {
     menuItemClasses,
     popoverClasses,
     menuClasses,
-    type PaletteMode,
     type ThemeOptions,
     InputBase as MuiInputBase,
     switchClasses,
@@ -19,9 +17,7 @@ import {
     formHelperTextClasses,
     inputAdornmentClasses,
 } from '@mui/material'
-import type { MaskColor } from './colors.js'
-
-type ThemeOverride = (mode: PaletteMode, colors: MaskColor) => ThemeOptions
+import { alpha, MaskColors } from './colors.js'
 
 declare module '@mui/material/Button' {
     interface ButtonPropsVariantOverrides {
@@ -39,8 +35,17 @@ declare module '@mui/material/InputBase' {
     }
 }
 
-// this override extends the mui theme and cannot fit ThemeOptions
-export const Button = (mode: PaletteMode, colors: MaskColor) => ({
+function toCssVariableColors<T>(value: T, path: string[] = []): T {
+    if (typeof value === 'string') return `var(--mui-palette-${path.join('-')})` as T
+    if (value === null || typeof value !== 'object') return value
+
+    return Object.fromEntries(
+        Object.entries(value).map(([key, child]) => [key, toCssVariableColors(child, [...path, key])]),
+    ) as T
+}
+const colors = toCssVariableColors(MaskColors.light)
+
+export const Button = {
     components: {
         MuiButton: {
             defaultProps: {
@@ -675,9 +680,9 @@ export const Button = (mode: PaletteMode, colors: MaskColor) => ({
             },
         },
     },
-})
+} satisfies ThemeOptions
 
-export const Radio: ThemeOverride = (mode, colors) => ({
+export const Radio = {
     components: {
         MuiRadio: {
             defaultProps: {
@@ -705,9 +710,9 @@ export const Radio: ThemeOverride = (mode, colors) => ({
             },
         },
     },
-})
+} satisfies ThemeOptions
 
-export const Checkbox: ThemeOverride = (mode, colors) => ({
+export const Checkbox = {
     components: {
         MuiCheckbox: {
             defaultProps: {
@@ -735,9 +740,9 @@ export const Checkbox: ThemeOverride = (mode, colors) => ({
             },
         },
     },
-})
+} satisfies ThemeOptions
 
-export const InputBase = (mode: PaletteMode, colors: MaskColor) => ({
+export const InputBase = {
     components: {
         MuiInputBase: {
             defaultProps: {
@@ -893,10 +898,7 @@ export const InputBase = (mode: PaletteMode, colors: MaskColor) => ({
                     // For Select Menu
                     [`& .${popoverClasses.paper}`]: {
                         borderRadius: 16,
-                        boxShadow:
-                            mode === 'dark' ?
-                                '0px 4px 30px rgba(255, 255, 255, 0.15)'
-                            :   '0px 4px 30px rgba(0, 0, 0, 0.1)',
+                        boxShadow: colors.shadow.selectMenu,
                         backgroundColor: colors.maskColor.bottom,
                         backgroundImage: 'unset',
                         [`& .${menuClasses.list}`]: {
@@ -927,9 +929,9 @@ export const InputBase = (mode: PaletteMode, colors: MaskColor) => ({
             },
         },
     },
-})
+} satisfies ThemeOptions
 
-export const TextField = (mode: PaletteMode, colors: MaskColor) => ({
+export const TextField = {
     components: {
         MuiTextField: {
             defaultProps: {
@@ -964,9 +966,9 @@ export const TextField = (mode: PaletteMode, colors: MaskColor) => ({
             },
         },
     },
-})
+} satisfies ThemeOptions
 
-export const Select: ThemeOverride = (mode, colors) => ({
+export const Select = {
     components: {
         MuiSelect: {
             defaultProps: {
@@ -983,9 +985,9 @@ export const Select: ThemeOverride = (mode, colors) => ({
             },
         },
     },
-})
+} satisfies ThemeOptions
 
-export const Slider: ThemeOverride = (mode, colors) => ({
+export const Slider = {
     components: {
         MuiSlider: {
             styleOverrides: {
@@ -999,9 +1001,9 @@ export const Slider: ThemeOverride = (mode, colors) => ({
             },
         },
     },
-})
+} satisfies ThemeOptions
 
-export const Switch: ThemeOverride = (mode, colors) => ({
+export const Switch = {
     components: {
         MuiSwitch: {
             defaultProps: {
@@ -1056,9 +1058,9 @@ export const Switch: ThemeOverride = (mode, colors) => ({
             },
         },
     },
-})
+} satisfies ThemeOptions
 
-export const Tooltip: ThemeOverride = (mode, colors) => ({
+export const Tooltip = {
     components: {
         MuiTooltip: {
             defaultProps: {
@@ -1073,8 +1075,7 @@ export const Tooltip: ThemeOverride = (mode, colors) => ({
                     lineHeight: '18px',
                     backgroundColor: colors.maskColor.tips,
                     color: colors.maskColor.bottom,
-                    boxShadow:
-                        mode === 'dark' ? '0px 0px 20px rgba(255, 255, 255, 0.12)' : '0px 0px 20px rgba(0, 0, 0, 0.05)',
+                    boxShadow: colors.shadow.tooltip,
                     '& > *': {
                         fontSize: 14,
                         lineHeight: '18px',
@@ -1086,9 +1087,9 @@ export const Tooltip: ThemeOverride = (mode, colors) => ({
             },
         },
     },
-})
+} satisfies ThemeOptions
 
-export const Alert: ThemeOverride = (mode, colors) => ({
+export const Alert = {
     components: {
         MuiAlert: {
             defaultProps: {
@@ -1104,25 +1105,39 @@ export const Alert: ThemeOverride = (mode, colors) => ({
                 root: {
                     padding: '4px 12px',
                     backdropFilter: 'blur(10px)',
-                },
-                standardInfo: {
-                    backgroundColor: colors.maskColor.bg,
-                    color: colors.maskColor.main,
-                    [`& .${alertClasses.icon}`]: {
-                        color: colors.maskColor.main,
-                    },
-                },
-                standardWarning: {
-                    backgroundColor: alpha(colors.maskColor.warn, 0.1),
-                    color: colors.maskColor.warn,
-                },
-                standardError: {
-                    backgroundColor: alpha(colors.maskColor.danger, 0.1),
-                    color: colors.maskColor.danger,
-                },
-                standardSuccess: {
-                    backgroundColor: alpha(colors.maskColor.success, 0.1),
-                    color: colors.maskColor.success,
+                    variants: [
+                        {
+                            props: { variant: 'standard', color: 'info' },
+                            style: {
+                                backgroundColor: colors.maskColor.bg,
+                                color: colors.maskColor.main,
+                                [`& .${alertClasses.icon}`]: {
+                                    color: colors.maskColor.main,
+                                },
+                            },
+                        },
+                        {
+                            props: { variant: 'standard', color: 'warning' },
+                            style: {
+                                backgroundColor: alpha(colors.maskColor.warn, 0.1),
+                                color: colors.maskColor.warn,
+                            },
+                        },
+                        {
+                            props: { variant: 'standard', color: 'error' },
+                            style: {
+                                backgroundColor: alpha(colors.maskColor.danger, 0.1),
+                                color: colors.maskColor.danger,
+                            },
+                        },
+                        {
+                            props: { variant: 'standard', color: 'success' },
+                            style: {
+                                backgroundColor: alpha(colors.maskColor.success, 0.1),
+                                color: colors.maskColor.success,
+                            },
+                        },
+                    ],
                 },
                 icon: {
                     padding: '8px 0',
@@ -1133,9 +1148,9 @@ export const Alert: ThemeOverride = (mode, colors) => ({
             },
         },
     },
-})
+} satisfies ThemeOptions
 
-export const LinearProgress: ThemeOverride = (mode, colors) => ({
+export const LinearProgress = {
     components: {
         MuiLinearProgress: {
             styleOverrides: {
@@ -1150,4 +1165,4 @@ export const LinearProgress: ThemeOverride = (mode, colors) => ({
             },
         },
     },
-})
+} satisfies ThemeOptions
diff --git a/packages/theme/src/Theme/index.ts b/packages/theme/src/Theme/index.ts
index 3a0ae33aa273..3f999022c629 100644
--- a/packages/theme/src/Theme/index.ts
+++ b/packages/theme/src/Theme/index.ts
@@ -1,3 +1,3 @@
-export { MaskColors } from './colors.js'
+export { MaskColors, alpha } from './colors.js'
 export { MaskThemeProvider } from './Provider.js'
-export { MaskDarkTheme, MaskLightTheme } from './theme.js'
+export { MaskDarkTheme, MaskLightTheme, MaskTheme } from './theme.js'
diff --git a/packages/theme/src/Theme/theme.ts b/packages/theme/src/Theme/theme.ts
index 6920d166e363..fe58233a6022 100644
--- a/packages/theme/src/Theme/theme.ts
+++ b/packages/theme/src/Theme/theme.ts
@@ -1,89 +1,94 @@
+// eslint-disable-next-line import/no-empty-named-blocks, unicorn/require-module-specifiers
+import type {} from '@mui/material/themeCssVarsAugmentation'
 import { MaskColors } from './colors.js'
-import type { PaletteMode, ThemeOptions } from '@mui/material'
-import { createTheme } from '@mui/material'
-import { merge } from 'lodash-es'
-import * as Components from './component-changes.js'
-import { grey } from '@mui/material/colors'
+import { unstable_createMuiStrictModeTheme } from '@mui/material'
+import {
+    Alert,
+    Button,
+    Checkbox,
+    InputBase,
+    LinearProgress,
+    Radio,
+    Select,
+    Slider,
+    Switch,
+    TextField,
+    Tooltip,
+} from './component-changes.js'
 
-function MaskTheme(mode: PaletteMode) {
-    const maskColors = MaskColors[mode]
-    const theme = merge(
-        {
-            palette: {
-                ...maskColors,
-                primary: { main: '#1c68f3' },
-                text: {
-                    ...maskColors.text,
-                    hint: 'rgba(0, 0, 0, 0.38)',
+export const MaskTheme = unstable_createMuiStrictModeTheme({
+    typography: {
+        fontFamily: 'Helvetica',
+    },
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 600,
+            md: 1112,
+            lg: 1280,
+            xl: 1920,
+        },
+    },
+    components: {
+        ...Alert.components,
+        ...Button.components,
+        ...Checkbox.components,
+        ...InputBase.components,
+        ...LinearProgress.components,
+        ...Radio.components,
+        ...Select.components,
+        ...Slider.components,
+        ...Switch.components,
+        ...TextField.components,
+        ...Tooltip.components,
+        MuiLink: { defaultProps: { underline: 'hover' } },
+        MuiTab: {
+            styleOverrides: {
+                root: {
+                    textTransform: 'unset',
+                    padding: '0',
+                    // up-sm
+                    '@media screen and (min-width: 600px)': {
+                        minWidth: 160,
+                    },
                 },
             },
-            typography: {
-                fontFamily: 'Helvetica',
-            },
-            breakpoints: {
-                values: {
-                    xs: 0,
-                    sm: 600,
-                    md: 1112,
-                    lg: 1280,
-                    xl: 1920,
+        },
+        MuiDialog: {
+            styleOverrides: {
+                paper: {
+                    borderRadius: '12px',
                 },
             },
-            components: {
-                MuiLink: { defaultProps: { underline: 'hover' } },
-                MuiTab: {
-                    styleOverrides: {
-                        root: {
-                            textTransform: 'unset',
-                            padding: '0',
-                            // up-sm
-                            '@media screen and (min-width: 600px)': {
-                                minWidth: 160,
-                            },
-                        },
-                    },
-                },
-                MuiDialog: {
-                    styleOverrides: {
-                        paper: {
-                            borderRadius: '12px',
-                        },
-                    },
-                },
-                MuiTypography: {
-                    styleOverrides: {
-                        root: {
-                            fontSize: 14,
-                        },
-                    },
+        },
+        MuiTypography: {
+            styleOverrides: {
+                root: {
+                    fontSize: 14,
                 },
             },
         },
-        mode === 'dark' ?
-            {
-                palette: {
-                    mode: 'dark',
-                    background: {
-                        paper: grey[900],
-                    },
-                },
-                components: {
-                    MuiPaper: {
-                        // https://github.com/mui-org/material-ui/pull/25522
-                        styleOverrides: { root: { backgroundImage: 'unset' } },
-                    },
-                },
-            }
-        :   {},
-        ...Object.values(Components).map(applyColors),
-    ) as ThemeOptions
-
-    return createTheme(theme)
-    function applyColors(x: any) {
-        if (typeof x === 'function') return x(mode, maskColors)
-        return x
-    }
-}
+        MuiPaper: {
+            // https://github.com/mui-org/material-ui/pull/25522
+            styleOverrides: { root: { backgroundImage: 'unset' } },
+        },
+    },
+    modularCssLayers: 'mui',
+    cssVariables: {
+        colorSchemeSelector: 'media',
+        rootSelector: ':host',
+    },
+    colorSchemes: {
+        light: {
+            palette: MaskColors.light,
+        },
+        dark: {
+            palette: MaskColors.dark,
+        },
+    },
+})
 
-export const MaskLightTheme = MaskTheme('light')
-export const MaskDarkTheme = MaskTheme('dark')
+/** @deprecated */
+export const MaskLightTheme = MaskTheme
+/** @deprecated */
+export const MaskDarkTheme = MaskTheme
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
index e12e065aebf8..00985ffb76fa 100644
--- a/packages/theme/src/index.ts
+++ b/packages/theme/src/index.ts
@@ -10,6 +10,5 @@ export * from './CSSVariables/index.js'
 export * from './Theme/index.js'
 export * from './ShadowRoot/index.js'
 
-export { default as parseColor } from 'tinycolor2'
 export * from './Components/index.js'
 export * from './hooks/index.js'

From 44e0f9183ec47a7f1917b585a3a9a198b55cf387 Mon Sep 17 00:00:00 2001
From: Jack Works <5390719+Jack-Works@users.noreply.github.com>
Date: Wed, 22 Jul 2026 00:00:00 +0000
Subject: [PATCH 04/15] update theme api

---
 .../DisabledPluginSuggestion.tsx              |   6 +-
 .../InjectedComponents/ProfileTabContent.tsx  |  24 +-
 .../useMaskSiteAdaptorMixedTheme.ts           |  30 +-
 .../facebook.com/customization/custom.ts      |  89 ++--
 .../site-adaptors/facebook.com/ui-provider.ts |   4 +-
 .../instagram.com/customization/custom.ts     |  35 +-
 .../instagram.com/ui-provider.ts              |   4 +-
 .../minds.com/collecting/theme.ts             |   5 +-
 .../minds.com/customization/custom.ts         |  87 ++--
 .../site-adaptors/minds.com/ui-provider.ts    |   4 +-
 .../twitter.com/customization/custom.ts       | 122 ++---
 .../site-adaptors/twitter.com/ui-provider.ts  |   4 +-
 .../ContentScriptGlobalProvider.tsx           |   9 +-
 .../shadow-root/ShadowRootAttachPointRoot.tsx |  10 +-
 .../utils/shadow-root/renderInShadowRoot.tsx  |   9 +-
 packages/mask/dashboard/Dashboard.tsx         |  32 +-
 packages/mask/popups/Popup.tsx                |  60 ++-
 packages/mask/popups/hooks/usePopupTheme.ts   |  17 -
 .../pages/Trader/useImplementRuntime.tsx      |   4 +-
 .../popups/pages/Wallet/TokenDetail/index.tsx |  13 +-
 packages/mask/shared-ui/hooks/index.ts        |   1 +
 .../shared-ui/hooks/usePageThemePalette.ts    |  10 +
 .../mask/shared-ui/hooks/useThemeLanguage.ts  |   6 +-
 .../plugin-infra/src/entry-content-script.ts  |   3 -
 .../plugin-infra/src/site-adaptor/index.ts    |   1 -
 .../src/site-adaptor/useThemeSettings.ts      |  15 -
 .../FileService/src/SiteAdaptor/index.tsx     |   7 +-
 .../plugins/Gitcoin/src/SiteAdaptor/index.tsx |   7 +-
 .../src/SiteAdaptor/SearchResultInspector.tsx |  10 +-
 .../src/SiteAdaptor/RedPacketInPost.tsx       |   7 +-
 .../SolanaRedPacket/SolanaRedPacketFrame.tsx  |   7 +-
 .../src/SiteAdaptor/views/History.tsx         |  13 +-
 .../src/SiteAdaptor/views/HistoryDetail.tsx   |   7 +-
 .../SiteAdaptor/components/PreviewCard.tsx    |   8 +-
 .../src/SiteAdaptor/ProfileSpaceHeader.tsx    |  12 +-
 .../Snapshot/src/SiteAdaptor/ProfileView.tsx  |  16 +-
 .../Snapshot/src/SiteAdaptor/ProgressTab.tsx  |   7 +-
 .../Snapshot/src/SiteAdaptor/ResultCard.tsx   |  18 +-
 .../Snapshot/src/SiteAdaptor/Snapshot.tsx     |  10 +-
 .../trending/FailedTrendingView.tsx           |   7 +-
 .../src/SiteAdaptor/trending/TickersTable.tsx |   7 +-
 .../src/SiteAdaptor/trending/TrendingView.tsx |  12 +-
 .../SiteAdaptor/trending/TrendingViewDeck.tsx |  19 +-
 .../Transak/src/hooks/useTransakURL.ts        |   5 +-
 .../Transak/src/hooks/useTransakWidgetURL.ts  |  10 +-
 packages/polyfills/types/__all.d.ts           |   1 -
 packages/polyfills/types/package.json         |   1 -
 packages/polyfills/types/theme-global.d.cts   |  63 ---
 .../src/UI/components/EmojiAvatar/index.tsx   |  13 +-
 .../UI/components/WalletStatusBox/index.tsx   |   8 +-
 .../shared/src/UI/contexts/PageUIProvider.tsx |  43 --
 packages/shared/src/UI/contexts/index.ts      |   1 -
 packages/theme/src/CSSVariables/Injector.tsx  |  15 -
 packages/theme/src/CSSVariables/applyToDOM.ts |  57 ---
 packages/theme/src/CSSVariables/constants.ts  | 160 -------
 packages/theme/src/CSSVariables/index.ts      |   3 -
 .../src/Components/Snackbar/PopupSnackbar.tsx |  73 +--
 .../theme/src/Components/Snackbar/index.tsx   | 214 ++++-----
 packages/theme/src/Theme/Provider.tsx         |  63 ++-
 .../theme => theme/src/Theme}/color-tools.ts  |   4 -
 packages/theme/src/Theme/colors.ts            | 433 ++++++++++--------
 packages/theme/src/Theme/index.ts             |   7 +-
 packages/theme/src/Theme/theme.ts             |   5 -
 packages/theme/src/entry-base.ts              |   1 -
 packages/theme/src/env.d.ts                   |   1 -
 packages/theme/src/extended.d.ts              |   7 +
 packages/theme/src/index.ts                   |   1 -
 packages/types/src/SiteAdaptorUI.ts           |   9 +-
 68 files changed, 839 insertions(+), 1137 deletions(-)
 delete mode 100644 packages/mask/popups/hooks/usePopupTheme.ts
 create mode 100644 packages/mask/shared-ui/hooks/usePageThemePalette.ts
 delete mode 100644 packages/plugin-infra/src/site-adaptor/useThemeSettings.ts
 delete mode 100644 packages/polyfills/types/theme-global.d.cts
 delete mode 100644 packages/shared/src/UI/contexts/PageUIProvider.tsx
 delete mode 100644 packages/theme/src/CSSVariables/Injector.tsx
 delete mode 100644 packages/theme/src/CSSVariables/applyToDOM.ts
 delete mode 100644 packages/theme/src/CSSVariables/constants.ts
 delete mode 100644 packages/theme/src/CSSVariables/index.ts
 rename packages/{plugin-infra/src/utils/theme => theme/src/Theme}/color-tools.ts (95%)

diff --git a/packages/mask/content-script/components/InjectedComponents/DisabledPluginSuggestion.tsx b/packages/mask/content-script/components/InjectedComponents/DisabledPluginSuggestion.tsx
index bedc861b8935..e0943daa6f7a 100644
--- a/packages/mask/content-script/components/InjectedComponents/DisabledPluginSuggestion.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/DisabledPluginSuggestion.tsx
@@ -11,7 +11,7 @@ import {
 } from '@masknet/plugin-infra/content-script'
 import { MaskPostExtraInfoWrapper } from '@masknet/shared'
 import { BooleanPreference, EMPTY_LIST } from '@masknet/shared-base'
-import { makeStyles, MaskLightTheme } from '@masknet/theme'
+import { makeStyles } from '@masknet/theme'
 import { extractTextFromTypedMessage } from '@masknet/typed-message'
 import { Box, type BoxProps, Button, Skeleton, Typography, useTheme } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
@@ -143,14 +143,14 @@ export function PossiblePluginSuggestionUISingle(props: {
     )
 }
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()((theme) => ({
     content: {
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
     },
     text: {
-        color: MaskLightTheme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
     },
     rectangle: {
         backgroundColor: 'rgba(255,255,255,0.5)',
diff --git a/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx
index b99d036f8b34..c023b7d616dd 100644
--- a/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx
@@ -32,14 +32,14 @@ import {
     Sniffings,
 } from '@masknet/shared-base'
 import { useLocationChange, useValueRef } from '@masknet/shared-base-ui'
-import { makeStyles, MaskLightTheme, MaskTabList, useTabs } from '@masknet/theme'
+import { makeStyles, MaskTabList, MaskThemeProvider, useTabs } from '@masknet/theme'
 import { ScopedDomainsContainer, useSnapshotSpacesByTwitterHandle } from '@masknet/web3-hooks-base'
 import { Web3Bio } from '@masknet/web3-providers'
 import { isSameAddress } from '@masknet/web3-shared-base'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventID, EventType } from '@masknet/web3-telemetry/types'
 import { TabContext } from '@mui/lab'
-import { Button, Stack, Tab, ThemeProvider, Typography } from '@mui/material'
+import { Button, Stack, Tab, Typography } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
 import { first } from 'lodash-es'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -308,7 +308,7 @@ function Content(props: ProfileTabContentProps) {
 
     if (lackHostPermission?.size) {
         return (
-            <ThemeProvider theme={MaskLightTheme}>
+            <MaskThemeProvider palette="light">
                 <div className={classes.root}>
                     <PluginCardFrameMini>
                         <GrantPermissions
@@ -317,13 +317,13 @@ function Content(props: ProfileTabContentProps) {
                         />
                     </PluginCardFrameMini>
                 </div>
-            </ThemeProvider>
+            </MaskThemeProvider>
         )
     }
 
     if (!currentVisitingUserId || (loadingSocialAccounts && !socialAccounts.length) || loadingPersonaStatus)
         return (
-            <ThemeProvider theme={MaskLightTheme}>
+            <MaskThemeProvider palette="light">
                 <div className={classes.root}>
                     <PluginCardFrameMini>
                         <LoadingStatus iconSize={24} color={theme.vars.palette.maskColor.main}>
@@ -331,7 +331,7 @@ function Content(props: ProfileTabContentProps) {
                         </LoadingStatus>
                     </PluginCardFrameMini>
                 </div>
-            </ThemeProvider>
+            </MaskThemeProvider>
         )
 
     if (((isOwnerIdentity && loadPersonaStatusError) || loadSocialAccounts) && socialAccounts.length === 0) {
@@ -340,7 +340,7 @@ function Content(props: ProfileTabContentProps) {
             if (loadSocialAccounts) retrySocialAccounts()
         }
         return (
-            <ThemeProvider theme={MaskLightTheme}>
+            <MaskThemeProvider palette="light">
                 <div className={classes.root}>
                     <PluginCardFrameMini>
                         <Stack sx={{ display: 'inline-flex', gap: 3, justifyContent: 'center', alignItems: 'center' }}>
@@ -359,7 +359,7 @@ function Content(props: ProfileTabContentProps) {
                         </Stack>
                     </PluginCardFrameMini>
                 </div>
-            </ThemeProvider>
+            </MaskThemeProvider>
         )
     }
 
@@ -367,7 +367,7 @@ function Content(props: ProfileTabContentProps) {
     if (socialAccounts.length === 0 && !isOnTwitter) {
         if (Sniffings.is_facebook_page) return null
         return (
-            <ThemeProvider theme={MaskLightTheme}>
+            <MaskThemeProvider palette="light">
                 <div className={classes.root}>
                     <PluginCardFrameMini>
                         <Stack
@@ -389,13 +389,13 @@ function Content(props: ProfileTabContentProps) {
                         </Stack>
                     </PluginCardFrameMini>
                 </div>
-            </ThemeProvider>
+            </MaskThemeProvider>
         )
     }
 
     if (!socialAccounts.length) {
         return (
-            <ThemeProvider theme={MaskLightTheme}>
+            <MaskThemeProvider palette="light">
                 <div className={classes.root}>
                     <PluginCardFrameMini>
                         <Stack
@@ -409,7 +409,7 @@ function Content(props: ProfileTabContentProps) {
                         </Stack>
                     </PluginCardFrameMini>
                 </div>
-            </ThemeProvider>
+            </MaskThemeProvider>
         )
     }
 
diff --git a/packages/mask/content-script/components/useMaskSiteAdaptorMixedTheme.ts b/packages/mask/content-script/components/useMaskSiteAdaptorMixedTheme.ts
index 1b793f09ff93..a8d23f3251a0 100644
--- a/packages/mask/content-script/components/useMaskSiteAdaptorMixedTheme.ts
+++ b/packages/mask/content-script/components/useMaskSiteAdaptorMixedTheme.ts
@@ -1,26 +1,14 @@
-import { useRef } from 'react'
-import { type Theme, unstable_createMuiStrictModeTheme } from '@mui/material'
-import { MaskDarkTheme, MaskLightTheme } from '@masknet/theme'
-import { languageSettings } from '@masknet/shared-base'
-import { useValueRef } from '@masknet/shared-base-ui'
-import { ThemeMode } from '@masknet/web3-shared-base'
-import { useThemeLanguage } from '../../shared-ui/hooks/useThemeLanguage.js'
+import { useMemo } from 'react'
+import { unstable_createMuiStrictModeTheme } from '@mui/material'
 import { activatedSiteAdaptorUI } from '../site-adaptor-infra/index.js'
 import { useThemeSettings } from './DataSource/useActivatedUI.js'
 
-const defaultUseTheme = (t: Theme) => t
-
 export function useMaskSiteAdaptorMixedTheme() {
-    const { mode } = useThemeSettings()
-    // false positive
-    // eslint-disable-next-line react-compiler/react-compiler
-    const useMixedTheme = useRef(activatedSiteAdaptorUI!.customization.useTheme || defaultUseTheme).current
-
-    const [localization] = useThemeLanguage(useValueRef(languageSettings))
-    const theme = unstable_createMuiStrictModeTheme(
-        mode === ThemeMode.Dark ? MaskDarkTheme : MaskLightTheme,
-        localization,
-    )
-    // eslint-disable-next-line react-compiler/react-compiler
-    return useMixedTheme(theme)
+    const { mode, color, isDim, size } = useThemeSettings()
+    const { getTheme } = activatedSiteAdaptorUI!.customization
+    const siteAdaptorMixedTheme = useMemo(() => {
+        if (!getTheme) return
+        return unstable_createMuiStrictModeTheme(getTheme({ mode, color, isDim, size }))
+    }, [getTheme, mode, color, isDim, size])
+    return siteAdaptorMixedTheme
 }
diff --git a/packages/mask/content-script/site-adaptors/facebook.com/customization/custom.ts b/packages/mask/content-script/site-adaptors/facebook.com/customization/custom.ts
index 079b906ef4be..c7b3abcab9d9 100644
--- a/packages/mask/content-script/site-adaptors/facebook.com/customization/custom.ts
+++ b/packages/mask/content-script/site-adaptors/facebook.com/customization/custom.ts
@@ -1,49 +1,54 @@
-import { useMemo } from 'react'
 import { produce, setAutoFreeze } from 'immer'
-import { type Theme, unstable_createMuiStrictModeTheme } from '@mui/material'
-import { fromRGB, shade, toRGB } from '@masknet/plugin-infra/content-script'
-import { useThemeSettings } from '../../../components/DataSource/useActivatedUI.js'
+import { colorChannel } from '@mui/system'
+import { fromRGB, MaskTheme, shade, toRGB } from '@masknet/theme'
+import type { ThemeSettings } from '@masknet/web3-shared-base'
 
-export function useThemeFacebookVariant(baseTheme: Theme) {
-    const themeSettings = useThemeSettings()
+export function getThemeFacebookVariant(themeSettings: ThemeSettings) {
+    const primaryColorRGB = fromRGB(themeSettings.color)!
+    const primaryContrastColorRGB = fromRGB('rgb(255, 255, 255)')
+    setAutoFreeze(false)
 
-    return useMemo(() => {
-        const primaryColorRGB = fromRGB(themeSettings.color)!
-        const primaryContrastColorRGB = fromRGB('rgb(255, 255, 255)')
-        setAutoFreeze(false)
-
-        const FacebookTheme = produce(baseTheme, (theme) => {
-            theme.palette.primary = {
-                light: toRGB(shade(primaryColorRGB, 10)),
-                main: toRGB(primaryColorRGB),
-                dark: toRGB(shade(primaryColorRGB, -10)),
-                contrastText: toRGB(primaryContrastColorRGB),
+    const FacebookTheme = produce(MaskTheme, (theme) => {
+        const primary = {
+            light: toRGB(shade(primaryColorRGB, 10)),
+            main: toRGB(primaryColorRGB),
+            dark: toRGB(shade(primaryColorRGB, -10)),
+            contrastText: toRGB(primaryContrastColorRGB),
+        }
+        for (const colorScheme of Object.values(theme.colorSchemes)) {
+            if (!colorScheme) continue
+            colorScheme.palette.primary = {
+                ...primary,
+                mainChannel: colorChannel(primary.main),
+                lightChannel: colorChannel(primary.light),
+                darkChannel: colorChannel(primary.dark),
+                contrastTextChannel: colorChannel(primary.contrastText),
             }
-            theme.shape.borderRadius = 15
-            theme.breakpoints.values = { xs: 0, sm: 687, md: 1024, lg: 1280, xl: 1920 }
-            theme.components ||= {}
-            theme.components.MuiTypography = {
-                styleOverrides: {
-                    root: {
-                        // cspell:disable-next-line
-                        fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif",
-                    },
+        }
+        theme.shape.borderRadius = 15
+        theme.breakpoints.values = { xs: 0, sm: 687, md: 1024, lg: 1280, xl: 1920 }
+        theme.components ||= {}
+        theme.components.MuiTypography = {
+            styleOverrides: {
+                root: {
+                    // cspell:disable-next-line
+                    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif",
                 },
-            }
-            theme.components.MuiPaper = {
-                defaultProps: {
-                    elevation: 0,
+            },
+        }
+        theme.components.MuiPaper = {
+            defaultProps: {
+                elevation: 0,
+            },
+        }
+        theme.components.MuiTab = {
+            styleOverrides: {
+                root: {
+                    textTransform: 'none',
                 },
-            }
-            theme.components.MuiTab = {
-                styleOverrides: {
-                    root: {
-                        textTransform: 'none',
-                    },
-                },
-            }
-        })
-        setAutoFreeze(true)
-        return unstable_createMuiStrictModeTheme(FacebookTheme)
-    }, [baseTheme, themeSettings])
+            },
+        }
+    })
+    setAutoFreeze(true)
+    return FacebookTheme
 }
diff --git a/packages/mask/content-script/site-adaptors/facebook.com/ui-provider.ts b/packages/mask/content-script/site-adaptors/facebook.com/ui-provider.ts
index 293722341e7b..0a767687b6cb 100644
--- a/packages/mask/content-script/site-adaptors/facebook.com/ui-provider.ts
+++ b/packages/mask/content-script/site-adaptors/facebook.com/ui-provider.ts
@@ -22,7 +22,7 @@ import { ThemeSettingsProviderFacebook } from './collecting/theme.js'
 import { pasteImageToCompositionDefault } from '../../site-adaptor-infra/defaults/automation/AttachImageToComposition.js'
 import { injectPageInspectorDefault } from '../../site-adaptor-infra/defaults/inject/PageInspector.js'
 import { createTaskStartSetupGuideDefault } from '../../site-adaptor-infra/defaults/inject/StartSetupGuide.js'
-import { useThemeFacebookVariant } from './customization/custom.js'
+import { getThemeFacebookVariant } from './customization/custom.js'
 import { activatedSiteAdaptor_state } from '../../site-adaptor-infra/index.js'
 import { injectToolboxHintAtFacebook as injectToolboxAtFacebook } from './injection/Toolbar.js'
 import { injectPostReplacerAtFacebook } from './injection/PostReplacer.js'
@@ -139,7 +139,7 @@ const facebookUI: SiteAdaptorUI.Definition = {
         componentOverwrite: {
             RenderFragments: FacebookRenderFragments,
         },
-        useTheme: useThemeFacebookVariant,
+        getTheme: getThemeFacebookVariant,
     },
     init(signal) {
         const profiles = stateCreator.profiles()
diff --git a/packages/mask/content-script/site-adaptors/instagram.com/customization/custom.ts b/packages/mask/content-script/site-adaptors/instagram.com/customization/custom.ts
index e99f57617ad5..a8a1a1e9c617 100644
--- a/packages/mask/content-script/site-adaptors/instagram.com/customization/custom.ts
+++ b/packages/mask/content-script/site-adaptors/instagram.com/customization/custom.ts
@@ -1,26 +1,19 @@
-import { useMemo } from 'react'
 import { produce, setAutoFreeze } from 'immer'
-import { type Theme, unstable_createMuiStrictModeTheme } from '@mui/material'
-import { useThemeSettings } from '../../../components/DataSource/useActivatedUI.js'
+import { MaskTheme } from '@masknet/theme'
 
-export function useThemeInstagramVariant(baseTheme: Theme) {
-    const themeSettings = useThemeSettings()
+export function getThemeInstagramVariant() {
+    setAutoFreeze(false)
 
-    return useMemo(() => {
-        setAutoFreeze(false)
-
-        const InstagramTheme = produce(baseTheme, (theme) => {
-            theme.components ||= {}
-            theme.components.MuiTypography = {
-                styleOverrides: {
-                    root: {
-                        fontFamily:
-                            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-                    },
+    const InstagramTheme = produce(MaskTheme, (theme) => {
+        theme.components ||= {}
+        theme.components.MuiTypography = {
+            styleOverrides: {
+                root: {
+                    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
                 },
-            }
-        })
-        setAutoFreeze(true)
-        return unstable_createMuiStrictModeTheme(InstagramTheme)
-    }, [baseTheme, themeSettings])
+            },
+        }
+    })
+    setAutoFreeze(true)
+    return InstagramTheme
 }
diff --git a/packages/mask/content-script/site-adaptors/instagram.com/ui-provider.ts b/packages/mask/content-script/site-adaptors/instagram.com/ui-provider.ts
index 29f7a110c8c2..744eeb6958cc 100644
--- a/packages/mask/content-script/site-adaptors/instagram.com/ui-provider.ts
+++ b/packages/mask/content-script/site-adaptors/instagram.com/ui-provider.ts
@@ -16,7 +16,7 @@ import { CurrentVisitingIdentityProviderInstagram } from './collecting/identity.
 import { injectProfileTabAtInstagram } from './injection/ProfileTab.js'
 import { injectProfileTabContentAtInstagram } from './injection/ProfileTabContent.js'
 import { injectAvatar } from './injection/Avatar/index.js'
-import { useThemeInstagramVariant } from './customization/custom.js'
+import { getThemeInstagramVariant } from './customization/custom.js'
 
 const define: SiteAdaptorUI.Definition = {
     ...instagramShared,
@@ -36,7 +36,7 @@ const define: SiteAdaptorUI.Definition = {
     },
     configuration: {},
     customization: {
-        useTheme: useThemeInstagramVariant,
+        getTheme: getThemeInstagramVariant,
     },
     init(signal) {
         const profiles = stateCreator.profiles()
diff --git a/packages/mask/content-script/site-adaptors/minds.com/collecting/theme.ts b/packages/mask/content-script/site-adaptors/minds.com/collecting/theme.ts
index 058038333d50..e6864998ea86 100644
--- a/packages/mask/content-script/site-adaptors/minds.com/collecting/theme.ts
+++ b/packages/mask/content-script/site-adaptors/minds.com/collecting/theme.ts
@@ -1,8 +1,11 @@
 import type { SiteAdaptorUI } from '@masknet/types'
-import { fromRGB, getBackgroundColor, isDark } from '@masknet/plugin-infra/content-script'
+import { fromRGB, getBackgroundColor } from '@masknet/theme'
 import { ThemeMode } from '@masknet/web3-shared-base'
 import { creator } from '../../../site-adaptor-infra/utils.js'
 
+function isDark([r, g, b]: [number, number, number]) {
+    return r < 68 && g < 68 && b < 68
+}
 function resolveThemeSettingsInner(
     ref: SiteAdaptorUI.CollectingCapabilities.ThemeSettingsProvider['recognized'],
     cancel: AbortSignal,
diff --git a/packages/mask/content-script/site-adaptors/minds.com/customization/custom.ts b/packages/mask/content-script/site-adaptors/minds.com/customization/custom.ts
index c581cfa778b8..42f5242f7047 100644
--- a/packages/mask/content-script/site-adaptors/minds.com/customization/custom.ts
+++ b/packages/mask/content-script/site-adaptors/minds.com/customization/custom.ts
@@ -1,48 +1,53 @@
-import { useMemo } from 'react'
 import { produce, setAutoFreeze } from 'immer'
-import { type Theme, unstable_createMuiStrictModeTheme } from '@mui/material'
-import { fromRGB, shade, toRGB } from '@masknet/plugin-infra/content-script'
-import { useThemeSettings } from '../../../components/DataSource/useActivatedUI.js'
+import { colorChannel } from '@mui/system'
+import { fromRGB, MaskTheme, shade, toRGB } from '@masknet/theme'
+import type { ThemeSettings } from '@masknet/web3-shared-base'
 
-export function useThemeMindsVariant(baseTheme: Theme) {
-    const themeSettings = useThemeSettings()
+export function getThemeMindsVariant(themeSettings: ThemeSettings) {
+    const primaryColorRGB = fromRGB(themeSettings.color)!
+    const primaryContrastColorRGB = fromRGB('rgb(255, 255, 255)')
+    setAutoFreeze(false)
 
-    return useMemo(() => {
-        const primaryColorRGB = fromRGB(themeSettings.color)!
-        const primaryContrastColorRGB = fromRGB('rgb(255, 255, 255)')
-        setAutoFreeze(false)
-
-        const MindsTheme = produce(baseTheme, (theme) => {
-            theme.palette.primary = {
-                light: toRGB(shade(primaryColorRGB, 10)),
-                main: toRGB(primaryColorRGB),
-                dark: toRGB(shade(primaryColorRGB, -10)),
-                contrastText: toRGB(primaryContrastColorRGB),
+    const MindsTheme = produce(MaskTheme, (theme) => {
+        const primary = {
+            light: toRGB(shade(primaryColorRGB, 10)),
+            main: toRGB(primaryColorRGB),
+            dark: toRGB(shade(primaryColorRGB, -10)),
+            contrastText: toRGB(primaryContrastColorRGB),
+        }
+        for (const colorScheme of Object.values(theme.colorSchemes)) {
+            if (!colorScheme) continue
+            colorScheme.palette.primary = {
+                ...primary,
+                mainChannel: colorChannel(primary.main),
+                lightChannel: colorChannel(primary.light),
+                darkChannel: colorChannel(primary.dark),
+                contrastTextChannel: colorChannel(primary.contrastText),
             }
-            theme.shape.borderRadius = 15
-            theme.breakpoints.values = { xs: 0, sm: 687, md: 1024, lg: 1220, xl: 1920 }
-            theme.components ||= {}
-            theme.components.MuiTypography = {
-                styleOverrides: {
-                    root: {
-                        fontFamily: 'Roboto,Helvetica,sans-serif',
-                    },
+        }
+        theme.shape.borderRadius = 15
+        theme.breakpoints.values = { xs: 0, sm: 687, md: 1024, lg: 1220, xl: 1920 }
+        theme.components ||= {}
+        theme.components.MuiTypography = {
+            styleOverrides: {
+                root: {
+                    fontFamily: 'Roboto,Helvetica,sans-serif',
                 },
-            }
-            theme.components.MuiPaper = {
-                defaultProps: {
-                    elevation: 0,
+            },
+        }
+        theme.components.MuiPaper = {
+            defaultProps: {
+                elevation: 0,
+            },
+        }
+        theme.components.MuiTab = {
+            styleOverrides: {
+                root: {
+                    textTransform: 'none',
                 },
-            }
-            theme.components.MuiTab = {
-                styleOverrides: {
-                    root: {
-                        textTransform: 'none',
-                    },
-                },
-            }
-        })
-        setAutoFreeze(true)
-        return unstable_createMuiStrictModeTheme(MindsTheme)
-    }, [baseTheme, themeSettings])
+            },
+        }
+    })
+    setAutoFreeze(true)
+    return MindsTheme
 }
diff --git a/packages/mask/content-script/site-adaptors/minds.com/ui-provider.ts b/packages/mask/content-script/site-adaptors/minds.com/ui-provider.ts
index 0894cc4df61c..958174402905 100644
--- a/packages/mask/content-script/site-adaptors/minds.com/ui-provider.ts
+++ b/packages/mask/content-script/site-adaptors/minds.com/ui-provider.ts
@@ -15,7 +15,7 @@ import getSearchedKeywordAtMinds from './collecting/getSearchedKeyword.js'
 import { IdentityProviderMinds } from './collecting/identity.js'
 import { ThemeSettingsProviderMinds } from './collecting/theme.js'
 import { PostProviderMinds } from './collecting/post.js'
-import { useThemeMindsVariant } from './customization/custom.js'
+import { getThemeMindsVariant } from './customization/custom.js'
 import injectCommentBoxAtMinds from './injection/CommentBox.js'
 import { injectPostBoxComposed } from './injection/inject.js'
 import { injectPostInspectorAtMinds } from './injection/PostInspector.js'
@@ -148,7 +148,7 @@ const mindsUI: SiteAdaptorUI.Definition = {
         componentOverwrite: {
             RenderFragments: MindsRenderFragments,
         },
-        useTheme: useThemeMindsVariant,
+        getTheme: getThemeMindsVariant,
     },
     init(signal) {
         const profiles = stateCreator.profiles()
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/customization/custom.ts b/packages/mask/content-script/site-adaptors/twitter.com/customization/custom.ts
index 8543cd269bea..c49c0d79c569 100644
--- a/packages/mask/content-script/site-adaptors/twitter.com/customization/custom.ts
+++ b/packages/mask/content-script/site-adaptors/twitter.com/customization/custom.ts
@@ -1,70 +1,76 @@
-import { useMemo } from 'react'
 import { produce, setAutoFreeze } from 'immer'
-import { type Theme, unstable_createMuiStrictModeTheme } from '@mui/material'
-import { fromRGB, shade, toRGB } from '@masknet/plugin-infra/content-script'
-import { useThemeSettings } from '../../../components/DataSource/useActivatedUI.js'
+import { unstable_createMuiStrictModeTheme } from '@mui/material'
+import { colorChannel } from '@mui/system'
+import { fromRGB, MaskTheme, shade, toRGB } from '@masknet/theme'
+import type { ThemeSettings } from '@masknet/web3-shared-base'
 
-export function useThemeTwitterVariant(baseTheme: Theme) {
-    const themeSettings = useThemeSettings()
+export function getThemeTwitterVariant(themeSettings: ThemeSettings) {
+    const primaryColorRGB = fromRGB(themeSettings.color)!
+    const primaryContrastColorRGB = fromRGB('rgb(255, 255, 255)')
+    setAutoFreeze(false)
 
-    return useMemo(() => {
-        const primaryColorRGB = fromRGB(themeSettings.color)!
-        const primaryContrastColorRGB = fromRGB('rgb(255, 255, 255)')
-        setAutoFreeze(false)
+    const TwitterTheme = produce(MaskTheme, (theme) => {
+        if (themeSettings.isDim) {
+            theme.vars.palette.maskColor.bottom = '#15202B'
+            theme.vars.palette.maskColor.secondaryBottom = 'rgba(21, 32, 43, 0.8)'
+        }
 
-        const TwitterTheme = produce(baseTheme, (theme) => {
-            if (themeSettings.isDim) {
-                theme.vars.palette.maskColor.bottom = '#15202B'
-                theme.vars.palette.maskColor.secondaryBottom = 'rgba(21, 32, 43, 0.8)'
+        const primary = {
+            light: toRGB(shade(primaryColorRGB, 10)),
+            main: toRGB(primaryColorRGB),
+            dark: toRGB(shade(primaryColorRGB, -10)),
+            contrastText: toRGB(primaryContrastColorRGB),
+        }
+        for (const colorScheme of Object.values(theme.colorSchemes)) {
+            if (!colorScheme) continue
+            colorScheme.palette.primary = {
+                ...primary,
+                mainChannel: colorChannel(primary.main),
+                lightChannel: colorChannel(primary.light),
+                darkChannel: colorChannel(primary.dark),
+                contrastTextChannel: colorChannel(primary.contrastText),
             }
+        }
+        theme.shape.borderRadius = 15
+        theme.breakpoints.values = { xs: 0, sm: 687, md: 1024, lg: 1280, xl: 1920 }
+        theme.components ||= {}
 
-            theme.palette.primary = {
-                light: toRGB(shade(primaryColorRGB, 10)),
-                main: toRGB(primaryColorRGB),
-                dark: toRGB(shade(primaryColorRGB, -10)),
-                contrastText: toRGB(primaryContrastColorRGB),
-            }
-            theme.shape.borderRadius = 15
-            theme.breakpoints.values = { xs: 0, sm: 687, md: 1024, lg: 1280, xl: 1920 }
-            theme.components ||= {}
-
-            theme.components.MuiTypography = {
-                styleOverrides: {
-                    root: {
-                        fontFamily:
-                            'TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
-                    },
+        theme.components.MuiTypography = {
+            styleOverrides: {
+                root: {
+                    fontFamily:
+                        'TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
                 },
-            }
-            theme.components.MuiPaper = {
-                defaultProps: {
-                    elevation: 0,
+            },
+        }
+        theme.components.MuiPaper = {
+            defaultProps: {
+                elevation: 0,
+            },
+            styleOverrides: {
+                root: {
+                    background: theme.vars.palette.maskColor.bottom,
                 },
-                styleOverrides: {
-                    root: {
-                        background: theme.palette.maskColor.bottom,
-                    },
+            },
+        }
+        theme.components.MuiTab = {
+            styleOverrides: {
+                root: {
+                    textTransform: 'none',
                 },
-            }
-            theme.components.MuiTab = {
-                styleOverrides: {
-                    root: {
-                        textTransform: 'none',
-                    },
+            },
+        }
+        theme.components.MuiBackdrop = {
+            styleOverrides: {
+                root: {
+                    backgroundColor: theme.vars.palette.action.mask,
                 },
-            }
-            theme.components.MuiBackdrop = {
-                styleOverrides: {
-                    root: {
-                        backgroundColor: theme.palette.action.mask,
-                    },
-                    invisible: {
-                        opacity: '0 !important',
-                    },
+                invisible: {
+                    opacity: '0 !important',
                 },
-            }
-        })
-        setAutoFreeze(true)
-        return unstable_createMuiStrictModeTheme(TwitterTheme)
-    }, [baseTheme, themeSettings])
+            },
+        }
+    })
+    setAutoFreeze(true)
+    return unstable_createMuiStrictModeTheme(TwitterTheme)
 }
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/ui-provider.ts b/packages/mask/content-script/site-adaptors/twitter.com/ui-provider.ts
index f98cf8d2f874..a10350955c87 100644
--- a/packages/mask/content-script/site-adaptors/twitter.com/ui-provider.ts
+++ b/packages/mask/content-script/site-adaptors/twitter.com/ui-provider.ts
@@ -15,7 +15,7 @@ import { publishPostTwitter } from './automation/publishPost.js'
 import { IdentityProviderTwitter, CurrentVisitingIdentityProviderTwitter } from './collecting/identity.js'
 import { ThemeSettingsProviderTwitter } from './collecting/theme.js'
 import { PostProviderTwitter, getPostIdFromNewPostToast } from './collecting/post.js'
-import { useThemeTwitterVariant } from './customization/custom.js'
+import { getThemeTwitterVariant } from './customization/custom.js'
 import { injectToolboxHintAtTwitter } from './injection/ToolboxHint.js'
 import { i18NOverwriteTwitter } from './customization/i18n.js'
 import { injectSearchResultInspectorAtTwitter } from './injection/SearchResultInspector.js'
@@ -158,7 +158,7 @@ const twitterUI: SiteAdaptorUI.Definition = {
         componentOverwrite: {
             RenderFragments: TwitterRenderFragments,
         },
-        useTheme: useThemeTwitterVariant,
+        getTheme: getThemeTwitterVariant,
         i18nOverwrite: i18NOverwriteTwitter,
     },
     init(signal) {
diff --git a/packages/mask/content-script/utils/shadow-root/ContentScriptGlobalProvider.tsx b/packages/mask/content-script/utils/shadow-root/ContentScriptGlobalProvider.tsx
index 38de0f8d435d..d6a84994ee1e 100644
--- a/packages/mask/content-script/utils/shadow-root/ContentScriptGlobalProvider.tsx
+++ b/packages/mask/content-script/utils/shadow-root/ContentScriptGlobalProvider.tsx
@@ -1,5 +1,4 @@
 import { i18n } from '@lingui/core'
-import { getSiteThemeMode } from '@masknet/plugin-infra/content-script'
 import { LinguiProviderHMR, SharedContextProvider } from '@masknet/shared'
 import { jsxCompose } from '@masknet/shared-base'
 import { queryClient } from '@masknet/shared-base-ui'
@@ -12,8 +11,13 @@ import { cloneElement, Suspense } from 'react'
 import { createPortal } from 'react-dom'
 import { queryPersistOptions } from '../../../shared-ui/utils/persistOptions.js'
 import { useMaskSiteAdaptorMixedTheme } from '../../components/useMaskSiteAdaptorMixedTheme.js'
+import { useThemeLanguage } from '../../../shared-ui/hooks/index.js'
+import { useThemeSettings } from '../../components/DataSource/useActivatedUI.js'
 
 export function ContentScriptGlobalProvider(children: React.ReactNode) {
+    const theme = useMaskSiteAdaptorMixedTheme()
+    const [localization] = useThemeLanguage()
+    const { mode } = useThemeSettings()
     return jsxCompose(
         <Suspense />,
         <DialogStackingProvider hasGlobalBackdrop={false} />,
@@ -22,8 +26,7 @@ export function ContentScriptGlobalProvider(children: React.ReactNode) {
         <RootWeb3ContextProvider />,
         <SharedContextProvider />,
         <LinguiProviderHMR i18n={i18n} />,
-        // eslint-disable-next-line react-compiler/react-compiler
-        <MaskThemeProvider useMaskIconPalette={getSiteThemeMode} useTheme={useMaskSiteAdaptorMixedTheme} />,
+        <MaskThemeProvider supportsDimPalette theme={theme} localization={localization} palette={mode} />,
     )(
         cloneElement,
         process.env.NODE_ENV === 'development' ?
diff --git a/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx b/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx
index 647c1357d086..43ffc57deb15 100644
--- a/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx
+++ b/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx
@@ -1,5 +1,5 @@
 import { cloneElement, Suspense } from 'react'
-import { CSSVariableInjector, CustomSnackbarProvider } from '@masknet/theme'
+import { CustomSnackbarProvider } from '@masknet/theme'
 import { ErrorBoundary } from '@masknet/shared-base-ui'
 import { Sniffings, jsxCompose } from '@masknet/shared-base'
 
@@ -14,11 +14,5 @@ export function ShadowRootAttachPointRoot(children: React.ReactNode) {
             offsetY={Sniffings.is_facebook_page ? 80 : undefined}>
             {' '}
         </CustomSnackbarProvider>,
-    )(
-        cloneElement,
-        <>
-            <CSSVariableInjector />
-            {children}
-        </>,
-    )
+    )(cloneElement, children)
 }
diff --git a/packages/mask/content-script/utils/shadow-root/renderInShadowRoot.tsx b/packages/mask/content-script/utils/shadow-root/renderInShadowRoot.tsx
index ce0bfcd76d82..1f18b7ecfb3b 100644
--- a/packages/mask/content-script/utils/shadow-root/renderInShadowRoot.tsx
+++ b/packages/mask/content-script/utils/shadow-root/renderInShadowRoot.tsx
@@ -2,7 +2,6 @@ import { createPortal } from 'react-dom'
 import {
     attachReactTreeToMountedRoot_noHost,
     setupReactShadowRootEnvironment as setupReactShadowRootEnvironmentUpper,
-    CSSVariableInjector,
     usePortalShadowRoot,
 } from '@masknet/theme'
 import { Flags } from '@masknet/flags'
@@ -23,13 +22,7 @@ const captureEvents: Array<keyof HTMLElementEventMap> = [
     'change',
 ]
 export function setupReactShadowRootEnvironment() {
-    const shadow = setupReactShadowRootEnvironmentUpper(
-        Flags.shadowRootInit,
-        captureEvents,
-        ContentScriptGlobalProvider,
-    )
-    // Inject variable for Portals
-    attachReactTreeWithContainer(shadow, { key: 'css-vars' }).render(<CSSVariableInjector />)
+    setupReactShadowRootEnvironmentUpper(Flags.shadowRootInit, captureEvents, ContentScriptGlobalProvider)
 }
 
 export const attachReactTreeWithContainer = attachReactTreeToMountedRoot_noHost(ShadowRootAttachPointRoot)
diff --git a/packages/mask/dashboard/Dashboard.tsx b/packages/mask/dashboard/Dashboard.tsx
index 879a0eb61586..559bbdf16353 100644
--- a/packages/mask/dashboard/Dashboard.tsx
+++ b/packages/mask/dashboard/Dashboard.tsx
@@ -1,22 +1,15 @@
-import { cloneElement, useEffect } from 'react'
-import { CssBaseline, ThemeProvider, GlobalStyles } from '@mui/material'
+import { cloneElement } from 'react'
+import { CssBaseline, GlobalStyles } from '@mui/material'
 import { StyledEngineProvider } from '@mui/material/styles'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import {
-    CustomSnackbarProvider,
-    applyMaskColorVars,
-    MaskLightTheme,
-    MaskDarkTheme,
-    useSystemPreferencePalette,
-    DialogStackingProvider,
-} from '@masknet/theme'
+import { CustomSnackbarProvider, DialogStackingProvider, MaskThemeProvider } from '@masknet/theme'
 import { LinguiProviderHMR, PersonaContext, SharedContextProvider, Modals } from '@masknet/shared'
 import { ErrorBoundary } from '@masknet/shared-base-ui'
 import { RootWeb3ContextProvider } from '@masknet/web3-hooks-base'
 import { DashboardRoutes, jsxCompose } from '@masknet/shared-base'
 
 import { Pages } from './pages/routes.js'
-import { UserContext, useAppearance } from '../shared-ui/index.js'
+import { UserContext, usePageThemePalette, useThemeLanguage } from '../shared-ui/index.js'
 import Services from '#services'
 import { i18n } from '@lingui/core'
 
@@ -39,25 +32,14 @@ const PersonaContextIO = {
     queryPersonaAvatar: Services.Identity.getPersonaAvatar,
 }
 export default function Dashboard() {
-    // #region theme
-    const appearance = useAppearance()
-    const mode = useSystemPreferencePalette()
-    const theme = {
-        dark: MaskDarkTheme,
-        light: MaskLightTheme,
-        default: mode === 'dark' ? MaskDarkTheme : MaskLightTheme,
-    }[appearance]
-
-    useEffect(() => {
-        applyMaskColorVars(document.body, appearance === 'default' ? mode : appearance)
-    }, [appearance])
-    // #endregion
+    const mode = usePageThemePalette()
+    const [localization] = useThemeLanguage()
 
     return jsxCompose(
         <RootWeb3ContextProvider enforceEVM />,
         <LinguiProviderHMR i18n={i18n} />,
         <StyledEngineProvider injectFirst />,
-        <ThemeProvider theme={theme} />,
+        <MaskThemeProvider palette={mode} localization={localization} />,
         <DialogStackingProvider />,
         <UserContext.Provider />,
         <PersonaContext.Provider initialState={PersonaContextIO} />,
diff --git a/packages/mask/popups/Popup.tsx b/packages/mask/popups/Popup.tsx
index 3f392be33004..35deef7f35ce 100644
--- a/packages/mask/popups/Popup.tsx
+++ b/packages/mask/popups/Popup.tsx
@@ -1,7 +1,12 @@
-import { PageUIProvider, PersonaContext, PrivySetup } from '@masknet/shared'
+import { PersonaContext, LinguiProviderHMR, PrivySetup, SharedContextProvider } from '@masknet/shared'
 import { jsxCompose, MaskMessages, PopupRoutes } from '@masknet/shared-base'
-import { PopupSnackbarProvider } from '@masknet/theme'
-import { EVMWeb3ContextProvider } from '@masknet/web3-hooks-base'
+import {
+    PopupSnackbarProvider,
+    CustomSnackbarProvider,
+    DialogStackingProvider,
+    MaskThemeProvider,
+} from '@masknet/theme'
+import { EVMWeb3ContextProvider, RootWeb3ContextProvider } from '@masknet/web3-hooks-base'
 import { ProviderType } from '@masknet/web3-shared-evm'
 import { Box } from '@mui/material'
 import { Suspense, cloneElement, lazy, memo, useEffect, useMemo, useState, type ReactNode } from 'react'
@@ -15,21 +20,23 @@ import {
     useSearchParams,
     useRouteError,
 } from 'react-router-dom'
-import { usePopupTheme } from './hooks/usePopupTheme.js'
 import Services from '#services'
 import { LoadingPlaceholder } from './components/LoadingPlaceholder/index.js'
 import { PopupLayout } from './components/PopupLayout/index.js'
 import { PopupContext, PageTitleContext } from './hooks/index.js'
 import { Modals } from './modals/index.js'
-import { UserContext, queryPersistOptions } from '../shared-ui/index.js'
+import { UserContext, queryPersistOptions, usePageThemePalette, useThemeLanguage } from '../shared-ui/index.js'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
-import { queryClient } from '@masknet/shared-base-ui'
+import { queryClient, ErrorBoundary } from '@masknet/shared-base-ui'
 import { PersonaFrame, personaRoute } from './pages/Personas/index.js'
 import { WalletFrame, walletRoutes } from './pages/Wallet/index.js'
 import { ContactsFrame, contactsRoutes } from './pages/Friends/index.js'
 import { ErrorBoundaryUIOfError } from '../../shared-base-ui/src/components/ErrorBoundary/ErrorBoundary.js'
 import { TraderFrame, traderRoutes } from './pages/Trader/index.js'
+import { StyledEngineProvider, type PaletteMode } from '@mui/material/styles'
+import { i18n } from '@lingui/core'
+import type { Localization } from '@mui/material/locale'
 
 const personaInitialState = {
     queryOwnedPersonaInformation: Services.Identity.queryOwnedPersonaInformation,
@@ -110,10 +117,12 @@ export default function Popups() {
         throttle: 10_000,
     })
 
+    const mode = usePageThemePalette()
+    const [localization] = useThemeLanguage()
+
     return jsxCompose(
         <PersistQueryClientProvider client={queryClient} persistOptions={queryPersistOptions} />,
-        // eslint-disable-next-line react-compiler/react-compiler
-        <PageUIProvider useTheme={usePopupTheme} />,
+        <PageUIProvider palette={mode} localization={localization} />,
         <PopupSnackbarProvider> </PopupSnackbarProvider>,
         <EVMWeb3ContextProvider providerType={ProviderType.MaskWallet} />,
         <PopupContext />,
@@ -125,7 +134,6 @@ export default function Popups() {
             {process.env.NODE_ENV === 'development' ?
                 <ReactQueryDevtools buttonPosition="bottom-right" />
             :   null}
-            <PrivySetup />
             <RouterProvider router={router} />
         </>,
     )
@@ -135,3 +143,37 @@ function ErrorPageBoundary() {
     const error = useRouteError()
     return <ErrorBoundaryUIOfError error={error} hasError />
 }
+
+interface PageUIProviderProps {
+    palette: PaletteMode
+    localization?: Localization
+    children?: React.ReactNode
+    fallback?: React.ReactNode
+}
+function PageUIProvider({ children, fallback, palette, localization }: PageUIProviderProps) {
+    return jsxCompose(
+        // Avoid the crash due to unhandled suspense
+        <Suspense />,
+        // Provide the minimal environment (i18n context) for CrashUI in page mode
+        <LinguiProviderHMR i18n={i18n} />,
+        <StyledEngineProvider injectFirst />,
+        <ErrorBoundary />,
+
+        <Suspense fallback={fallback} />,
+        <DialogStackingProvider hasGlobalBackdrop={false} />,
+        <MaskThemeProvider palette={palette} localization={localization} />,
+        <RootWeb3ContextProvider />,
+    )(
+        cloneElement,
+        <>
+            <PrivySetup />
+            <SharedContextProvider>
+                <CustomSnackbarProvider
+                    disableWindowBlurListener={false}
+                    anchorOrigin={{ vertical: 'top', horizontal: 'right' }}>
+                    {children}
+                </CustomSnackbarProvider>
+            </SharedContextProvider>
+        </>,
+    )
+}
diff --git a/packages/mask/popups/hooks/usePopupTheme.ts b/packages/mask/popups/hooks/usePopupTheme.ts
deleted file mode 100644
index 4cb54b6b603f..000000000000
--- a/packages/mask/popups/hooks/usePopupTheme.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { unstable_createMuiStrictModeTheme } from '@mui/material'
-import { MaskDarkTheme, MaskLightTheme, useSystemPreferencePalette } from '@masknet/theme'
-import { languageSettings } from '@masknet/shared-base'
-import { useValueRef } from '@masknet/shared-base-ui'
-import { ThemeMode } from '@masknet/web3-shared-base'
-import { useAppearance, useThemeLanguage } from '../../shared-ui/index.js'
-
-export function usePopupTheme() {
-    const appearance = useAppearance()
-    const mode = useSystemPreferencePalette()
-    const [localization] = useThemeLanguage(useValueRef(languageSettings))
-
-    return unstable_createMuiStrictModeTheme(
-        (appearance === 'default' ? mode : appearance) === ThemeMode.Dark ? MaskDarkTheme : MaskLightTheme,
-        localization,
-    )
-}
diff --git a/packages/mask/popups/pages/Trader/useImplementRuntime.tsx b/packages/mask/popups/pages/Trader/useImplementRuntime.tsx
index e327650042de..c4875d427dd2 100644
--- a/packages/mask/popups/pages/Trader/useImplementRuntime.tsx
+++ b/packages/mask/popups/pages/Trader/useImplementRuntime.tsx
@@ -6,15 +6,15 @@ import { TokenType } from '@masknet/web3-shared-base'
 import { isNativeTokenAddress, SchemaType, type ChainId } from '@masknet/web3-shared-evm'
 import { useCallback, useMemo } from 'react'
 import { AssetSource } from '../../components/index.js'
-import { usePopupTheme } from '../../hooks/usePopupTheme.js'
 import { ChooseTokenModal, ConfirmModal } from '../../modals/modal-controls.js'
+import { useTheme } from '@mui/material'
 
 export function useImplementRuntime() {
     const chainQuery = useSupportedChains()
     const { mode, chainId, fromToken } = useTrade()
     const isSwap = mode === 'swap'
     const fromChainId = fromToken?.chainId as ChainId
-    const theme = usePopupTheme()
+    const theme = useTheme()
     const pickToken = useCallback(
         async (
             currentToken: Web3Helper.FungibleTokenAll | null | undefined,
diff --git a/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx b/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx
index 1cde1b7a1db2..97caf1fb4039 100644
--- a/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx
+++ b/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx
@@ -14,12 +14,11 @@ import {
     TokenIcon,
 } from '@masknet/shared'
 import { Days, EMPTY_LIST, NetworkPluginID } from '@masknet/shared-base'
-import { MaskDarkTheme, MaskLightTheme, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { MaskThemeProvider, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
 import { useAccount, useFungibleTokenBalance, useWeb3State } from '@masknet/web3-hooks-base'
 import { TokenType, formatBalance, formatCurrency, leftShift } from '@masknet/web3-shared-base'
 import { type ChainId, SchemaType, isNativeTokenAddress } from '@masknet/web3-shared-evm'
-import { Box, Button, Skeleton, ThemeProvider, Typography } from '@mui/material'
-import { useColorScheme } from '@mui/material/styles'
+import { Box, Button, Skeleton, Typography } from '@mui/material'
 import React, { memo, useContext, useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { PageTitleContext, useTitle, useTokenParams } from '../../../hooks/index.js'
@@ -31,6 +30,7 @@ import { useCoinTrendingStats } from './useCoinTrendingStats.js'
 import { useTokenPrice } from './useTokenPrice.js'
 import { useTrending } from './useTrending.js'
 import { Trans } from '@lingui/react/macro'
+import { usePageThemePalette } from '../../../../shared-ui/index.js'
 
 const useStyles = makeStyles<{ valueAlign: 'left' | 'center' }>()((theme, { valueAlign }) => {
     return {
@@ -140,7 +140,8 @@ const usePageStyles = makeStyles()((theme) => {
 })
 
 export const Component = memo(function TokenDetailPage() {
-    const { classes, theme } = usePageStyles()
+    const { classes } = usePageStyles()
+    const mode = usePageThemePalette()
     const { chainId, address } = useTokenParams()
     const navigate = useNavigate()
     const account = useAccount(NetworkPluginID.PLUGIN_EVM)
@@ -190,9 +191,9 @@ export const Component = memo(function TokenDetailPage() {
         <div className={classes.halo}>
             <Box className={classes.page}>
                 <TokenDetailUI address={address} chainId={chainId}>
-                    <ThemeProvider theme={theme.palette.mode === 'light' ? MaskDarkTheme : MaskLightTheme}>
+                    <MaskThemeProvider palette={mode}>
                         <ActionGroup className={classes.actions} chainId={chainId} address={address} asset={asset} />
-                    </ThemeProvider>
+                    </MaskThemeProvider>
                 </TokenDetailUI>
             </Box>
         </div>
diff --git a/packages/mask/shared-ui/hooks/index.ts b/packages/mask/shared-ui/hooks/index.ts
index 9ab37333c7f3..fa1f9e03879f 100644
--- a/packages/mask/shared-ui/hooks/index.ts
+++ b/packages/mask/shared-ui/hooks/index.ts
@@ -2,5 +2,6 @@ export * from './useUserContext.js'
 export * from './useAppearance.js'
 export * from './useLanguage.js'
 export * from './usePersonasFromDB.js'
+export * from './usePageThemePalette.js'
 export * from './useThemeLanguage.js'
 export * from './useCurrentPersona.js'
diff --git a/packages/mask/shared-ui/hooks/usePageThemePalette.ts b/packages/mask/shared-ui/hooks/usePageThemePalette.ts
new file mode 100644
index 000000000000..45369bce58a9
--- /dev/null
+++ b/packages/mask/shared-ui/hooks/usePageThemePalette.ts
@@ -0,0 +1,10 @@
+import { useSystemPreferencePalette } from '@masknet/theme'
+import { useAppearance } from './useAppearance.ts'
+import { Appearance } from '@masknet/public-api'
+import type { PaletteMode } from '@mui/material'
+
+export function usePageThemePalette(): PaletteMode {
+    const appearance = useAppearance()
+    const mode = useSystemPreferencePalette()
+    return appearance === Appearance.default ? mode : appearance
+}
diff --git a/packages/mask/shared-ui/hooks/useThemeLanguage.ts b/packages/mask/shared-ui/hooks/useThemeLanguage.ts
index 2d5b94e48dd6..6298cf82322a 100644
--- a/packages/mask/shared-ui/hooks/useThemeLanguage.ts
+++ b/packages/mask/shared-ui/hooks/useThemeLanguage.ts
@@ -1,7 +1,8 @@
 import { LanguageOptions, SupportedLanguages } from '@masknet/public-api'
 import { jaJP, koKR, zhTW, zhCN, enUS, type Localization } from '@mui/material/locale'
-import { updateLanguage } from '@masknet/shared-base'
+import { languageSettings, updateLanguage } from '@masknet/shared-base'
 import { startTransition, useEffect } from 'react'
+import { useValueRef } from '@masknet/shared-base-ui'
 
 const langs: Record<SupportedLanguages, Localization> = {
     [SupportedLanguages.enUS]: enUS,
@@ -10,7 +11,8 @@ const langs: Record<SupportedLanguages, Localization> = {
     [SupportedLanguages.zhTW]: zhTW,
     [SupportedLanguages.zhCN]: zhCN,
 }
-export function useThemeLanguage(_language: LanguageOptions): [loc: Localization, RTL: boolean] {
+export function useThemeLanguage(): [loc: Localization, RTL: boolean] {
+    const _language = useValueRef(languageSettings)
     let language = _language
     useEffect(() => {
         if (language !== LanguageOptions.__auto__) return
diff --git a/packages/plugin-infra/src/entry-content-script.ts b/packages/plugin-infra/src/entry-content-script.ts
index 31b11f66963a..397f8ee3dc51 100644
--- a/packages/plugin-infra/src/entry-content-script.ts
+++ b/packages/plugin-infra/src/entry-content-script.ts
@@ -60,10 +60,7 @@ export {
     useLastRecognizedSocialIdentity,
     usePostLink,
     useSocialIdentity,
-    getSiteThemeMode,
     useSocialIdentityByUserId,
     type __SiteAdaptorContext__,
     __setSiteAdaptorContext__,
 } from './site-adaptor/index.js'
-
-export { getBackgroundColor, isDark, toRGB, fromRGB, shade } from './utils/theme/color-tools.js'
diff --git a/packages/plugin-infra/src/site-adaptor/index.ts b/packages/plugin-infra/src/site-adaptor/index.ts
index 3c6e4c11c9a2..09aac6686204 100644
--- a/packages/plugin-infra/src/site-adaptor/index.ts
+++ b/packages/plugin-infra/src/site-adaptor/index.ts
@@ -10,7 +10,6 @@ export * from './useLastRecognizedIdentity.js'
 export * from './useLastRecognizedSocialIdentity.js'
 export * from './usePostInfo.js'
 export * from './useSocialIdentity.js'
-export * from './useThemeSettings.js'
 export * from './Widget.js'
 export * from './useSocialIdentityByUserId.js'
 export { __setSiteAdaptorContext__, type __SiteAdaptorContext__ } from './context.js'
diff --git a/packages/plugin-infra/src/site-adaptor/useThemeSettings.ts b/packages/plugin-infra/src/site-adaptor/useThemeSettings.ts
deleted file mode 100644
index aef259c00bbe..000000000000
--- a/packages/plugin-infra/src/site-adaptor/useThemeSettings.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Theme } from '@mui/material'
-import { getBackgroundColor } from '../utils/theme/color-tools.js'
-
-export function getSiteThemeMode(theme: Theme) {
-    const backgroundColor = getBackgroundColor(document.body)
-    const isDark = theme.palette.mode === 'dark'
-    const isDarker = backgroundColor === 'rgb(0,0,0)'
-
-    return (
-        isDark ?
-            isDarker ? 'dark'
-            :   'dim'
-        :   'light'
-    )
-}
diff --git a/packages/plugins/FileService/src/SiteAdaptor/index.tsx b/packages/plugins/FileService/src/SiteAdaptor/index.tsx
index c4000b2d7dd9..f9b1dbbf78f8 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/index.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/index.tsx
@@ -4,10 +4,9 @@ import type { Plugin } from '@masknet/plugin-infra'
 import { PluginTransFieldRender } from '@masknet/plugin-infra/content-script'
 import { ApplicationEntry, formatFileSize } from '@masknet/shared'
 import { EMPTY_LIST } from '@masknet/shared-base'
-import { MaskLightTheme } from '@masknet/theme'
+import { MaskThemeProvider } from '@masknet/theme'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventID, EventType } from '@masknet/web3-telemetry/types'
-import { ThemeProvider } from '@mui/material'
 import { truncate } from 'lodash-es'
 import { base } from '../base.js'
 import { META_KEY_1, META_KEY_2, META_KEY_3 } from '../constants.js'
@@ -35,9 +34,9 @@ const definition: Plugin.SiteAdaptor.Definition = {
 
         if (!metadata.isOk()) return null
         return (
-            <ThemeProvider theme={MaskLightTheme}>
+            <MaskThemeProvider palette="light">
                 <FileViewer files={metadata.value} />
-            </ThemeProvider>
+            </MaskThemeProvider>
         )
     },
     CompositionDialogMetadataBadgeRender: new Map<string, BadgeRenderer<FileInfo> | BadgeRenderer<FileInfo[]>>([
diff --git a/packages/plugins/Gitcoin/src/SiteAdaptor/index.tsx b/packages/plugins/Gitcoin/src/SiteAdaptor/index.tsx
index 3cca586643fb..2d2e7ca2ece2 100644
--- a/packages/plugins/Gitcoin/src/SiteAdaptor/index.tsx
+++ b/packages/plugins/Gitcoin/src/SiteAdaptor/index.tsx
@@ -1,8 +1,7 @@
 import { Icons } from '@masknet/icons'
 import { type Plugin, usePluginWrapper, usePostInfoMentionedLinks } from '@masknet/plugin-infra/content-script'
 import { parseURLs } from '@masknet/shared-base'
-import { MaskLightTheme } from '@masknet/theme'
-import { ThemeProvider } from '@mui/material'
+import { MaskThemeProvider } from '@masknet/theme'
 import { base } from '../base.js'
 import { PLUGIN_META_KEY, PLUGIN_NAME } from '../constants.js'
 import { PreviewCard } from './PreviewCard.js'
@@ -18,9 +17,9 @@ function Renderer(props: { id: string; link: string }) {
     usePluginWrapper(true)
 
     return (
-        <ThemeProvider theme={MaskLightTheme}>
+        <MaskThemeProvider palette="light">
             <PreviewCard grantId={props.id} link={props.link} />
-        </ThemeProvider>
+        </MaskThemeProvider>
     )
 }
 
diff --git a/packages/plugins/Handle/src/SiteAdaptor/SearchResultInspector.tsx b/packages/plugins/Handle/src/SiteAdaptor/SearchResultInspector.tsx
index 4619cdc6676c..8b60c48c4572 100644
--- a/packages/plugins/Handle/src/SiteAdaptor/SearchResultInspector.tsx
+++ b/packages/plugins/Handle/src/SiteAdaptor/SearchResultInspector.tsx
@@ -1,8 +1,7 @@
-/* eslint-disable react-compiler/react-compiler */
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { CopyButton, SocialAccountList, useUserTotalBalance } from '@masknet/shared'
-import { MaskLightTheme, MaskThemeProvider, makeStyles } from '@masknet/theme'
+import { MaskThemeProvider, makeStyles } from '@masknet/theme'
 import { ScopedDomainsContainer } from '@masknet/web3-hooks-base'
 import { EVMUtils } from '@masknet/web3-providers'
 import { ChainId, formatEthereumAddress } from '@masknet/web3-shared-evm'
@@ -146,15 +145,10 @@ export const SearchResultInspectorContent = memo(function SearchResultInspectorC
     )
 })
 
-// eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix
-const useTheme = () => MaskLightTheme
-// eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix
-const useMaskIconPalette = (theme: Theme) => theme.palette.mode
-
 export const SearchResultInspector = memo(function SearchResultInspector(props: SearchResultInspectorProps) {
     return (
         <ENSProvider {...props}>
-            <MaskThemeProvider useTheme={useTheme} useMaskIconPalette={useMaskIconPalette}>
+            <MaskThemeProvider palette="light">
                 <SearchResultInspectorContent />
             </MaskThemeProvider>
         </ENSProvider>
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketInPost.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketInPost.tsx
index 3137951a9ad5..9db6c374f084 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketInPost.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketInPost.tsx
@@ -1,9 +1,8 @@
 import { usePostLink } from '@masknet/plugin-infra/content-script'
 import type { NetworkPluginID } from '@masknet/shared-base'
-import { MaskLightTheme } from '@masknet/theme'
+import { MaskThemeProvider } from '@masknet/theme'
 import { EVMWeb3ContextProvider, useChainContext, useNetworkContext } from '@masknet/web3-hooks-base'
 import type { RedPacketRecord } from '@masknet/web3-providers/types'
-import { ThemeProvider } from '@mui/material'
 import { useEffect } from 'react'
 import { RedPacketRPC } from '../messages.js'
 import { RedPacket, type RedPacketProps } from './RedPacket/index.js'
@@ -30,10 +29,10 @@ export function RedPacketInPost({ payload }: Omit<RedPacketProps, 'currentPlugin
     // #endregion
 
     return (
-        <ThemeProvider theme={MaskLightTheme}>
+        <MaskThemeProvider palette="light">
             <EVMWeb3ContextProvider>
                 <RedPacket payload={payload} currentPluginID={pluginID} />
             </EVMWeb3ContextProvider>
-        </ThemeProvider>
+        </MaskThemeProvider>
     )
 }
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketFrame.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketFrame.tsx
index f201ec17b13e..0ea52666dcac 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketFrame.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketFrame.tsx
@@ -1,6 +1,5 @@
 import { NetworkPluginID } from '@masknet/shared-base'
-import { MaskLightTheme } from '@masknet/theme'
-import { ThemeProvider } from '@mui/material'
+import { MaskThemeProvider } from '@masknet/theme'
 import { produce } from 'immer'
 import { useMemo } from 'react'
 import { SolanaRedPacketCard, type SolanaRedPacketCardProps } from './SolanaRedPacketCard.js'
@@ -26,10 +25,10 @@ export function SolanaRedPacketFrame({ payload }: Omit<SolanaRedPacketCardProps,
     const payloadChainId =
         payload.token?.chainId ?? SolanaChainResolver.chainId(payload.network ?? '') ?? ChainId.Mainnet
     return (
-        <ThemeProvider theme={MaskLightTheme}>
+        <MaskThemeProvider palette="light">
             <SOLWeb3ContextProvider chainId={payloadChainId}>
                 <SolanaRedPacketCard payload={patchedPayload} currentPluginID={pluginID} />
             </SOLWeb3ContextProvider>
-        </ThemeProvider>
+        </MaskThemeProvider>
     )
 }
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/History.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/History.tsx
index 98812b83bb4e..0ef1da924880 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/views/History.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/views/History.tsx
@@ -2,10 +2,10 @@ import { Trans } from '@lingui/react/macro'
 import { RoutePaths } from '@masknet/plugin-redpacket'
 import { ElementAnchor, EmptyStatus, LoadingStatus, RestorableScroll, useParamTab } from '@masknet/shared'
 import { EMPTY_LIST, NetworkPluginID } from '@masknet/shared-base'
-import { LoadingBase, makeStyles, MaskLightTheme } from '@masknet/theme'
+import { LoadingBase, makeStyles, MaskThemeProvider } from '@masknet/theme'
 import { useChainContext, useEnvironmentContext } from '@masknet/web3-hooks-base'
 import { FireflyRedPacketAPI } from '@masknet/web3-providers/types'
-import { ThemeProvider, Typography } from '@mui/material'
+import { Typography } from '@mui/material'
 import { useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { HistoryTabs } from '../../types.js'
@@ -93,17 +93,18 @@ export function History() {
     return (
         <RestorableScroll key={currentHistoryTab} scrollKey={`redpacket-history-${currentHistoryTab}`}>
             <div className={classes.container}>
-                {histories.map((history) => (
-                    <ThemeProvider key={history.redpacket_id} theme={MaskLightTheme}>
+                <MaskThemeProvider palette="light">
+                    {histories.map((history) => (
                         <RedPacketRecord
+                            key={history.redpacket_id}
                             history={history as FireflyRedPacketAPI.RedPacketSentInfo}
                             onlyView={currentHistoryTab === HistoryTabs.Claimed}
                             onSelect={
                                 pluginID === NetworkPluginID.PLUGIN_SOLANA ? solanaSelectRedpacket : selectRedPacket
                             }
                         />
-                    </ThemeProvider>
-                ))}
+                    ))}
+                </MaskThemeProvider>
                 {hasNextPage ?
                     <ElementAnchor sx={{ height: 30 }} callback={() => fetchNextPage()}>
                         {isFetching ?
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/HistoryDetail.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/HistoryDetail.tsx
index dc6cc00b9982..32edced8eb0e 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/views/HistoryDetail.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/views/HistoryDetail.tsx
@@ -1,5 +1,5 @@
 import { createIndicator, EMPTY_LIST, NetworkPluginID } from '@masknet/shared-base'
-import { makeStyles, MaskLightTheme } from '@masknet/theme'
+import { makeStyles, MaskThemeProvider } from '@masknet/theme'
 import { FireflyRedPacket } from '@masknet/web3-providers'
 import type { FireflyRedPacketAPI } from '@masknet/web3-providers/types'
 import { skipToken, useInfiniteQuery } from '@tanstack/react-query'
@@ -11,7 +11,6 @@ import { RedPacketRecord } from '../components/RedPacketRecord.js'
 import { EmptyStatus, LoadingStatus } from '@masknet/shared'
 import { Trans } from '@lingui/react/macro'
 import { useEnvironmentContext } from '@masknet/web3-hooks-base'
-import { ThemeProvider } from '@mui/material'
 import { DURATION } from '../../constants.js'
 
 const useStyles = makeStyles()((theme) => ({
@@ -81,9 +80,9 @@ export function HistoryDetail() {
     return (
         <div className={classes.container}>
             {patchedHistory ?
-                <ThemeProvider theme={MaskLightTheme}>
+                <MaskThemeProvider palette="light">
                     <RedPacketRecord onlyView={!!isClaimed} history={patchedHistory} showDetailLink={false} />
-                </ThemeProvider>
+                </MaskThemeProvider>
             :   null}
             {isLoading ?
                 <div className={cx(classes.interactions, classes.status)}>
diff --git a/packages/plugins/ScamWarning/src/SiteAdaptor/components/PreviewCard.tsx b/packages/plugins/ScamWarning/src/SiteAdaptor/components/PreviewCard.tsx
index ac5f95a36892..1b0b71bd2cad 100644
--- a/packages/plugins/ScamWarning/src/SiteAdaptor/components/PreviewCard.tsx
+++ b/packages/plugins/ScamWarning/src/SiteAdaptor/components/PreviewCard.tsx
@@ -1,8 +1,8 @@
 import { Plural } from '@lingui/react/macro'
 import { usePluginWrapper } from '@masknet/plugin-infra/content-script'
-import { makeStyles, MaskDarkTheme } from '@masknet/theme'
+import { makeStyles, MaskThemeProvider } from '@masknet/theme'
 import { CryptoScamDB } from '@masknet/web3-providers'
-import { Stack, ThemeProvider, Typography } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
 import { uniq } from 'lodash-es'
 import { useAsync } from 'react-use'
 
@@ -35,7 +35,7 @@ export function PreviewCard({ links }: PreviewCardProps) {
     if (!value?.length || loading) return null
 
     return (
-        <ThemeProvider theme={MaskDarkTheme}>
+        <MaskThemeProvider palette="dark">
             <Stack sx={{ p: 1.5, pt: 0 }} className={classes.root}>
                 <Stack className={classes.card}>
                     {value.map((x) => (
@@ -59,6 +59,6 @@ export function PreviewCard({ links }: PreviewCardProps) {
                     </Typography>
                 </Stack>
             </Stack>
-        </ThemeProvider>
+        </MaskThemeProvider>
     )
 }
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/ProfileSpaceHeader.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/ProfileSpaceHeader.tsx
index 2c6a2bc63f54..9418ccc03afa 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/ProfileSpaceHeader.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/ProfileSpaceHeader.tsx
@@ -1,10 +1,10 @@
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
-import { makeStyles } from '@masknet/theme'
+import { makeStyles, MaskThemeProvider, usePalette } from '@masknet/theme'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import { formatCount, type DAOResult } from '@masknet/web3-shared-base'
 import type { ChainId } from '@masknet/web3-shared-evm'
-import { Avatar, Box, Button, IconButton, ThemeProvider, Typography, type Theme } from '@mui/material'
+import { Avatar, Box, Button, IconButton, Typography } from '@mui/material'
 import { useRef, useState } from 'react'
 import { SpaceMenu } from './SpaceMenu.js'
 import { resolveSnapshotSpacePageUrl } from './helpers.js'
@@ -14,7 +14,6 @@ interface ProfileSpaceHeaderProps {
     spaceList: Array<DAOResult<ChainId.Mainnet>>
     currentSpace: DAOResult<ChainId.Mainnet>
     setSpaceId(id: string): void
-    theme: Theme
 }
 
 const useStyles = makeStyles()((theme) => ({
@@ -63,12 +62,13 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-export function ProfileSpaceHeader({ spaceList, currentSpace, setSpaceId, theme }: ProfileSpaceHeaderProps) {
+export function ProfileSpaceHeader({ spaceList, currentSpace, setSpaceId }: ProfileSpaceHeaderProps) {
     const { classes } = useStyles()
     const [spaceMenuOpen, setSpaceMenuOpen] = useState(false)
     const spaceRef = useRef<HTMLDivElement>(null)
     const { account } = useChainContext()
     const { data: followedSpaceList } = useCurrentAccountFollowSpaceList()
+    const mode = usePalette()
 
     return (
         <Box className={classes.root}>
@@ -90,7 +90,7 @@ export function ProfileSpaceHeader({ spaceList, currentSpace, setSpaceId, theme
                                     onClick={() => setSpaceMenuOpen((v) => !v)}>
                                     <Icons.ArrowDrop size={24} className={classes.arrowIcon} />
                                 </IconButton>
-                                <ThemeProvider theme={theme}>
+                                <MaskThemeProvider palette={mode}>
                                     <SpaceMenu
                                         options={spaceList}
                                         currentOption={currentSpace}
@@ -102,7 +102,7 @@ export function ProfileSpaceHeader({ spaceList, currentSpace, setSpaceId, theme
                                         open={spaceMenuOpen}
                                         onClose={() => setSpaceMenuOpen(false)}
                                     />
-                                </ThemeProvider>
+                                </MaskThemeProvider>
                             </>
                         )}
                     </div>
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/ProfileView.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/ProfileView.tsx
index 8aca7657611c..005566be978b 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/ProfileView.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/ProfileView.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState, useTransition } from 'react'
-import { LoadingBase, MaskDarkTheme, MaskLightTheme, MaskTabList, makeStyles, useTabs } from '@masknet/theme'
-import { CardContent, Stack, Tab, ThemeProvider, Typography, useTheme } from '@mui/material'
+import { LoadingBase, MaskTabList, MaskThemeProvider, makeStyles, useTabs } from '@masknet/theme'
+import { CardContent, Stack, Tab, Typography } from '@mui/material'
 import { PluginCardFrameMini, PluginEnableBoundary } from '@masknet/shared'
 import type { DAOResult } from '@masknet/web3-shared-base'
 import type { ChainId } from '@masknet/web3-shared-evm'
@@ -28,7 +28,7 @@ const useStyles = makeStyles()((theme) => ({
         height: 300,
         paddingTop: 0,
         paddingBottom: 0,
-        borderBottom: `1px solid ${theme.palette.maskColor.line}`,
+        borderBottom: `1px solid ${theme.vars.palette.maskColor.line}`,
     },
     tabListRoot: {
         marginTop: '10px !important',
@@ -48,7 +48,6 @@ interface ProfileViewProps extends withClasses<'content' | 'footer'> {
 export function ProfileView(props: ProfileViewProps) {
     const { ProfileCardProps, spaceList } = props
     const { classes } = useStyles()
-    const theme = useTheme()
     const [currentTab, _a, _b, setTab] = useTabs<ContentTabs>(
         ContentTabs.All,
         ContentTabs.Active,
@@ -82,11 +81,11 @@ export function ProfileView(props: ProfileViewProps) {
             <PluginCardFrameMini
                 title={<Trans>Snapshot</Trans>}
                 icon={<Icons.Snapshot className={classes.iconSnapshot} />}>
-                <ThemeProvider theme={MaskLightTheme}>
+                <MaskThemeProvider palette="light">
                     <PluginEnableBoundary pluginID={PluginID.Snapshot}>
                         <PluginDescriptor />
                     </PluginEnableBoundary>
-                </ThemeProvider>
+                </MaskThemeProvider>
             </PluginCardFrameMini>
         )
     }
@@ -94,10 +93,9 @@ export function ProfileView(props: ProfileViewProps) {
     return (
         <ProfileCard {...ProfileCardProps}>
             <Stack className={classes.root}>
-                <ThemeProvider theme={MaskLightTheme}>
+                <MaskThemeProvider palette="light">
                     <PluginDescriptor />
                     <ProfileSpaceHeader
-                        theme={theme.palette.mode === 'light' ? MaskLightTheme : MaskDarkTheme}
                         spaceList={spaceList}
                         currentSpace={{
                             ...currentSpace,
@@ -105,7 +103,7 @@ export function ProfileView(props: ProfileViewProps) {
                         }}
                         setSpaceId={setSpaceId}
                     />
-                </ThemeProvider>
+                </MaskThemeProvider>
                 <TabContext value={currentTab}>
                     <Stack sx={{ px: 2 }}>
                         <MaskTabList
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/ProgressTab.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/ProgressTab.tsx
index 53ddd11324aa..af27290eb038 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/ProgressTab.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/ProgressTab.tsx
@@ -1,5 +1,4 @@
-import { MaskLightTheme } from '@masknet/theme'
-import { ThemeProvider } from '@mui/material'
+import { MaskThemeProvider } from '@masknet/theme'
 import { InformationCard } from './InformationCard.js'
 import { ResultCard } from './ResultCard.js'
 import { SnapshotTab } from './SnapshotTab.js'
@@ -8,11 +7,11 @@ import { VotesCard } from './VotesCard.js'
 export function ProgressTab() {
     return (
         <SnapshotTab>
-            <ThemeProvider theme={MaskLightTheme}>
+            <MaskThemeProvider palette="light">
                 <InformationCard />
                 <ResultCard />
                 <VotesCard />
-            </ThemeProvider>
+            </MaskThemeProvider>
         </SnapshotTab>
     )
 }
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/ResultCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/ResultCard.tsx
index ef2ebe7f5681..635923d9d319 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/ResultCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/ResultCard.tsx
@@ -1,16 +1,6 @@
 import { useContext, useMemo, unstable_useCacheRefresh } from 'react'
-import {
-    Box,
-    List,
-    ListItem,
-    Typography,
-    LinearProgress,
-    styled,
-    Button,
-    linearProgressClasses,
-    ThemeProvider,
-} from '@mui/material'
-import { makeStyles, MaskLightTheme, ShadowRootTooltip, TextOverflowTooltip } from '@masknet/theme'
+import { Box, List, ListItem, Typography, LinearProgress, styled, Button, linearProgressClasses } from '@mui/material'
+import { makeStyles, MaskThemeProvider, ShadowRootTooltip, TextOverflowTooltip } from '@masknet/theme'
 
 import { SnapshotContext } from '../context.js'
 import { useProposal } from './hooks/useProposal.js'
@@ -116,7 +106,7 @@ function Content() {
     }, [votes])
 
     return (
-        <ThemeProvider theme={MaskLightTheme}>
+        <MaskThemeProvider palette="light">
             <SnapshotCard title={proposal.isEnd ? <Trans>Results</Trans> : <Trans>Current results</Trans>}>
                 <List className={classes.list}>
                     {results.map((result, i) => (
@@ -181,7 +171,7 @@ function Content() {
                     </Button>
                 :   null}
             </SnapshotCard>
-        </ThemeProvider>
+        </MaskThemeProvider>
     )
 }
 
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx
index 02a9462cceae..771964869df4 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx
@@ -3,17 +3,17 @@ import { ChainBoundary } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
 import {
     ActionButton,
-    MaskLightTheme,
     MaskTabList,
+    MaskThemeProvider,
     ShadowRootTooltip,
     TextOverflowTooltip,
     makeStyles,
     useTabs,
- } from '@masknet/theme'
+} from '@masknet/theme'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import { resolveIPFS_URL } from '@masknet/web3-shared-base'
 import { TabContext, TabPanel } from '@mui/lab'
-import { Avatar, Box, Chip, Tab, ThemeProvider, Typography } from '@mui/material'
+import { Avatar, Box, Chip, Tab, Typography } from '@mui/material'
 import Color from 'color'
 import { useContext, useState } from 'react'
 import { SnapshotContext } from '../context.js'
@@ -116,7 +116,7 @@ export function Snapshot() {
             <TabContext value={currentTab}>
                 <Box className={classes.header}>
                     <Avatar src={resolveIPFS_URL(proposal.space.avatar)} className={classes.avatar} />
-                    <ThemeProvider theme={MaskLightTheme}>
+                    <MaskThemeProvider palette="light">
                         <Box className={classes.title}>
                             <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                                 <TextOverflowTooltip
@@ -171,7 +171,7 @@ export function Snapshot() {
                                 </Typography>
                             </ShadowRootTooltip>
                         </Box>
-                    </ThemeProvider>
+                    </MaskThemeProvider>
                     <Box>
                         <Chip
                             className={proposal.status === 'Active' ? classes.active : classes.default}
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/FailedTrendingView.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/FailedTrendingView.tsx
index 8fb3b864e0cf..8bec21242e39 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/FailedTrendingView.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/FailedTrendingView.tsx
@@ -1,5 +1,4 @@
-import { MaskLightTheme, makeStyles } from '@masknet/theme'
-import { ThemeProvider } from '@mui/material'
+import { MaskThemeProvider, makeStyles } from '@masknet/theme'
 import { TrendingCard, type TrendingCardProps } from './TrendingCard.js'
 import { EmptyStatus } from '@masknet/shared'
 import { TrendingViewDescriptor, type TrendingViewDescriptorProps } from './TrendingViewDescriptor.js'
@@ -22,7 +21,7 @@ interface Props extends TrendingCardProps, TrendingViewDescriptorProps {}
 export function FailedTrendingView({ result, resultList, setResult, ...rest }: Props) {
     const { classes } = useStyles()
     return (
-        <ThemeProvider theme={MaskLightTheme}>
+        <MaskThemeProvider palette="light">
             <TrendingCard {...rest}>
                 <div className={classes.content}>
                     <EmptyStatus style={{ height: 'auto', flexGrow: 1 }}>
@@ -31,6 +30,6 @@ export function FailedTrendingView({ result, resultList, setResult, ...rest }: P
                     <TrendingViewDescriptor result={result} resultList={resultList} setResult={setResult} />
                 </div>
             </TrendingCard>
-        </ThemeProvider>
+        </MaskThemeProvider>
     )
 }
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx
index 54e7e16711c2..1d9b84049fb7 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx
@@ -11,10 +11,8 @@ import {
     TableHead,
     TableRow,
     Typography,
-    useTheme,
 } from '@mui/material'
-import { getSiteThemeMode } from '@masknet/plugin-infra/content-script'
-import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
+import { makeStyles, ShadowRootTooltip, useMaskIconPalette } from '@masknet/theme'
 import { FormattedCurrency } from '@masknet/shared'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { CurrencyType, formatCurrency } from '@masknet/web3-shared-base'
@@ -73,8 +71,7 @@ interface TickersTableProps {
 type Cells = 'exchange' | 'pair' | 'price' | 'volume' | 'updated'
 
 export function TickersTable({ tickers }: TickersTableProps) {
-    const theme = useTheme()
-    const themeMode = getSiteThemeMode(theme)
+    const themeMode = useMaskIconPalette()
     const { isTokenTagPopper } = useContext(TrendingViewContext)
     const { classes } = useStyles({ themeMode, isPopper: isTokenTagPopper })
 
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx
index e9125a9753ad..abfe4a775c9e 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx
@@ -3,14 +3,14 @@ import { useIsMinimalMode } from '@masknet/plugin-infra/content-script'
 import { PluginCardFrameMini, PluginEnableBoundary } from '@masknet/shared'
 import { Days, EMPTY_LIST, NetworkPluginID, PluginID, type SocialIdentity } from '@masknet/shared-base'
 import { useRenderPhraseCallbackOnDepsChange } from '@masknet/shared-base-ui'
-import { makeStyles, MaskLightTheme, MaskTabList, useTabs } from '@masknet/theme'
+import { makeStyles, MaskTabList, MaskThemeProvider, useTabs } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import type { TrendingAPI } from '@masknet/web3-providers/types'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventID, EventType } from '@masknet/web3-telemetry/types'
 import { TabContext } from '@mui/lab'
-import { Box, Stack, Tab, ThemeProvider, useTheme } from '@mui/material'
+import { Box, Stack, Tab, useTheme } from '@mui/material'
 import { first } from 'lodash-es'
 import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { usePriceStats } from '../../trending/usePriceStats.js'
@@ -222,12 +222,12 @@ export function TrendingView(props: TrendingViewProps) {
     // #region display loading skeleton
     if (!trending?.currency || loadingTrending)
         return (
-            <ThemeProvider theme={MaskLightTheme}>
+            <MaskThemeProvider palette="light">
                 <TrendingViewSkeleton
                     classes={{ footer: classes.footerSkeleton }}
                     TrendingCardProps={{ classes: { root: classes.root } }}
                 />
-            </ThemeProvider>
+            </MaskThemeProvider>
         )
     // #endregion
 
@@ -313,9 +313,9 @@ export function TrendingView(props: TrendingViewProps) {
     if (isProfilePage && isWeb3ProfileMinimalMode) {
         return (
             <PluginCardFrameMini>
-                <ThemeProvider theme={MaskLightTheme}>
+                <MaskThemeProvider palette="light">
                     <PluginEnableBoundary pluginID={PluginID.Web3Profile}>{Component}</PluginEnableBoundary>
-                </ThemeProvider>
+                </MaskThemeProvider>
             </PluginCardFrameMini>
         )
     }
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx
index 28695e5998ae..4770e43eb8e9 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx
@@ -17,25 +17,14 @@ import {
     type SocialIdentity,
 } from '@masknet/shared-base'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { MaskColors, MaskLightTheme, makeStyles } from '@masknet/theme'
+import { MaskColors, MaskThemeProvider, makeStyles } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import type { TrendingAPI } from '@masknet/web3-providers/types'
 import { formatCurrency } from '@masknet/web3-shared-base'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventID, EventType } from '@masknet/web3-telemetry/types'
-import {
-    Avatar,
-    Box,
-    Button,
-    CardContent,
-    IconButton,
-    Paper,
-    Stack,
-    ThemeProvider,
-    Typography,
-    useTheme,
-} from '@mui/material'
+import { Avatar, Box, Button, CardContent, IconButton, Paper, Stack, Typography, useTheme } from '@mui/material'
 import { first } from 'lodash-es'
 import { useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { ContentTab, type Currency } from '../../types/index.js'
@@ -322,7 +311,7 @@ export function TrendingViewDeck(props: TrendingViewDeckProps) {
                                     </>
                                 :   null}
                                 <Box className={classes.buttons}>
-                                    <ThemeProvider theme={MaskLightTheme}>
+                                    <MaskThemeProvider palette="light">
                                         {isSwappable ?
                                             <Button
                                                 color="primary"
@@ -343,7 +332,7 @@ export function TrendingViewDeck(props: TrendingViewDeckProps) {
                                                 <Trans>Buy Now</Trans>
                                             </Button>
                                         :   null}
-                                    </ThemeProvider>
+                                    </MaskThemeProvider>
                                 </Box>
                             </Stack>
                             <Stack direction="row" sx={{ justifyContent: 'space-between', marginTop: 2 }}>
diff --git a/packages/plugins/Transak/src/hooks/useTransakURL.ts b/packages/plugins/Transak/src/hooks/useTransakURL.ts
index ca75c869b0d8..dfdde955e67a 100644
--- a/packages/plugins/Transak/src/hooks/useTransakURL.ts
+++ b/packages/plugins/Transak/src/hooks/useTransakURL.ts
@@ -1,4 +1,3 @@
-import { rgbToHex, type Theme } from '@mui/material'
 import { TRANSAK_API_KEY_PRODUCTION, TRANSAK_API_KEY_STAGING } from '../constants.js'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import type { TransakConfig } from '../types.js'
@@ -17,11 +16,11 @@ const DEFAULT_PARAMETERS: TransakConfig = {
 }
 
 // Query params shared by the legacy direct URL and the session proxy.
-export function buildTransakSearchParams(config?: Partial<TransakConfig>, theme?: Theme): URLSearchParams {
+export function buildTransakSearchParams(config?: Partial<TransakConfig>, themeColor?: string): URLSearchParams {
     const config_: TransakConfig = {
         ...DEFAULT_PARAMETERS,
         referrerDomain: location.origin,
-        themeColor: theme ? rgbToHex(theme.palette.maskColor.dark).slice(1) : undefined,
+        themeColor,
         exchangeScreenTitle:
             config?.walletAddress ? `Buy Crypto to ${formatEthereumAddress(config.walletAddress, 4)}` : undefined,
         ...config,
diff --git a/packages/plugins/Transak/src/hooks/useTransakWidgetURL.ts b/packages/plugins/Transak/src/hooks/useTransakWidgetURL.ts
index d4986b3e47a1..2b9b2a0d7f6c 100644
--- a/packages/plugins/Transak/src/hooks/useTransakWidgetURL.ts
+++ b/packages/plugins/Transak/src/hooks/useTransakWidgetURL.ts
@@ -1,17 +1,19 @@
 import { useMemo } from 'react'
-import { useTheme } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
+import { DarkMaskColors, LightMaskColors, usePalette } from '@masknet/theme'
 import { TRANSAK_PROXY_HOST } from '../constants.js'
 import type { TransakConfig } from '../types.js'
 import { buildTransakSearchParams } from './useTransakURL.js'
+import { rgbToHex } from '@mui/material'
 
 // Fetches a single-use, iframe-safe widgetUrl from the session proxy.
 export function useTransakWidgetURL(config?: Partial<TransakConfig>) {
-    const theme = useTheme()
+    const palette = usePalette()
+    const themeColor = rgbToHex((palette === 'dark' ? DarkMaskColors : LightMaskColors).maskColor.dark).slice(1)
     const url = useMemo(
-        () => `${TRANSAK_PROXY_HOST}?${buildTransakSearchParams(config, theme).toString()}`,
+        () => `${TRANSAK_PROXY_HOST}?${buildTransakSearchParams(config, themeColor).toString()}`,
         // eslint-disable-next-line react-compiler/react-compiler
-        [theme.palette.primary.main, JSON.stringify(config)],
+        [JSON.stringify(config), themeColor],
     )
     return useQuery({
         queryKey: ['transak', 'widget-url', url],
diff --git a/packages/polyfills/types/__all.d.ts b/packages/polyfills/types/__all.d.ts
index f38dcebd2302..c68699e786fe 100644
--- a/packages/polyfills/types/__all.d.ts
+++ b/packages/polyfills/types/__all.d.ts
@@ -1,4 +1,3 @@
 /// <reference path="./env.d.ts" />
 /// <reference path="./global.d.ts" />
-/// <reference path="./theme-global.d.cts" />
 /// <reference path="./webpack-hmr.d.ts" />
diff --git a/packages/polyfills/types/package.json b/packages/polyfills/types/package.json
index c7748f7145aa..4cdab609776f 100644
--- a/packages/polyfills/types/package.json
+++ b/packages/polyfills/types/package.json
@@ -9,7 +9,6 @@
     "./env": { "types": "./env.d.ts" },
     "./firefox": { "types": "./firefox.d.ts" },
     "./global": { "types": "./global.d.ts" },
-    "./theme-global": { "types": "./theme-global.d.cts" },
     "./webpack": { "types": "./webpack.d.ts" },
     "./webpack-hmr": { "types": "./webpack-hmr.d.ts" },
     "./web-extension": { "types": "./web-extension.d.ts" },
diff --git a/packages/polyfills/types/theme-global.d.cts b/packages/polyfills/types/theme-global.d.cts
deleted file mode 100644
index ae3854c93d29..000000000000
--- a/packages/polyfills/types/theme-global.d.cts
+++ /dev/null
@@ -1,63 +0,0 @@
-// TODO Generate from color scheme, and add real colors in JSdoc comment
-declare module '@mui/material/styles/createPalette.d' {
-    export interface Palette {
-        secondaryDivider: string
-        maskColor: {
-            main: string
-            second: string
-            third: string
-            primaryMain: string
-            secondaryMain: string
-            thirdMain: string
-            bg: string
-            bottom: string
-            bottomBg: string
-            secondaryBottom: string
-            shadowBottom: string
-            input: string
-            modalTitleBg: string
-            highlight: string
-            line: string
-            secondaryLine: string
-            tips: string
-            whiteBlue: string
-            primary: string
-            success: string
-            warn: string
-            danger: string
-            white: string
-            dark: string
-            secondaryDark: string
-            secondaryMainDark: string
-            publicMain: string
-            publicSecond: string
-            publicThird: string
-            publicLine: string
-            publicTwitter: string
-            publicThirdMain: string
-            publicBg: string
-            borderSecondary: string
-        }
-        shadow: {
-            popup: string
-        }
-    }
-    export interface TypeText {
-        third: string
-        hint: string
-        strong: string
-        buttonText: string
-    }
-    export interface TypeAction {
-        buttonHover: string
-        bgHover: string
-        mask: string
-    }
-    export interface TypeBackground {
-        input: string
-        tipMask: string
-        messageShadow: string
-        modalTitle: string
-    }
-}
-export {}
diff --git a/packages/shared/src/UI/components/EmojiAvatar/index.tsx b/packages/shared/src/UI/components/EmojiAvatar/index.tsx
index 3e16414b4001..ac04d9ffed5a 100644
--- a/packages/shared/src/UI/components/EmojiAvatar/index.tsx
+++ b/packages/shared/src/UI/components/EmojiAvatar/index.tsx
@@ -1,8 +1,9 @@
 import { generateContactAvatarColor, calculateHash } from '@masknet/shared-base'
 import { isZeroAddress } from '@masknet/web3-shared-evm'
-import { Avatar as MuiAvatar, alpha, useTheme, type AvatarProps } from '@mui/material'
+import { Avatar as MuiAvatar, type AvatarProps } from '@mui/material'
 import { useMemo } from 'react'
 import { EMOJI_LIST } from './constants.js'
+import { usePalette } from '@masknet/theme'
 
 interface Props extends AvatarProps {
     value: string
@@ -10,22 +11,22 @@ interface Props extends AvatarProps {
 }
 
 export function EmojiAvatar({ value, size, ...props }: Props) {
-    const theme = useTheme()
+    const palette = usePalette()
 
     const { emoji, backgroundColor } = useMemo(() => {
         if (isZeroAddress(value) || !value) {
-            return { emoji: '🐼', backgroundColor: alpha('#627EEA', 0.2) }
+            return { emoji: '🐼', backgroundColor: 'rgba(98, 126, 234, 0.2)' }
         }
         const hash = calculateHash(value)
         return {
             emoji: EMOJI_LIST[hash % EMOJI_LIST.length],
-            backgroundColor: generateContactAvatarColor(value, theme.palette.mode),
+            backgroundColor: generateContactAvatarColor(value, palette),
         }
-    }, [value, theme.palette.mode])
+    }, [value, palette])
 
     return (
         <MuiAvatar
-            style={{
+            sx={{
                 backgroundColor,
                 height: size,
                 width: size,
diff --git a/packages/shared/src/UI/components/WalletStatusBox/index.tsx b/packages/shared/src/UI/components/WalletStatusBox/index.tsx
index a17f2e90eba1..ed4606d6f0d6 100644
--- a/packages/shared/src/UI/components/WalletStatusBox/index.tsx
+++ b/packages/shared/src/UI/components/WalletStatusBox/index.tsx
@@ -1,5 +1,5 @@
-import { Button, Link, Typography, useTheme, ThemeProvider } from '@mui/material'
-import { MaskColors, MaskLightTheme, makeStyles } from '@masknet/theme'
+import { Button, Link, Typography, useTheme } from '@mui/material'
+import { MaskColors, MaskThemeProvider, makeStyles } from '@masknet/theme'
 import { Sniffings } from '@masknet/shared-base'
 import {
     useChainContext,
@@ -172,14 +172,14 @@ export function WalletStatusBox(props: WalletStatusBox) {
                                 Utils.formatDomainName(domain)
                             :   <FormattedAddress address={account} size={4} formatter={Utils.formatAddress} />}
                         </Typography>
-                        <ThemeProvider theme={MaskLightTheme}>
+                        <MaskThemeProvider palette="light">
                             <CopyButton
                                 className={cx(classes.icon, classes.copyIcon)}
                                 color={MaskColors.light.maskColor.dark}
                                 size={17.5}
                                 text={account}
                             />
-                        </ThemeProvider>
+                        </MaskThemeProvider>
                         {chainIdValid ?
                             <Link
                                 className={classes.link}
diff --git a/packages/shared/src/UI/contexts/PageUIProvider.tsx b/packages/shared/src/UI/contexts/PageUIProvider.tsx
deleted file mode 100644
index 5c4d634cc2a4..000000000000
--- a/packages/shared/src/UI/contexts/PageUIProvider.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { cloneElement, Suspense } from 'react'
-import type { Theme } from '@mui/material'
-import { StyledEngineProvider } from '@mui/material/styles'
-import { RootWeb3ContextProvider } from '@masknet/web3-hooks-base'
-import { CSSVariableInjector, CustomSnackbarProvider, DialogStackingProvider, MaskThemeProvider } from '@masknet/theme'
-import { LinguiProviderHMR, PrivySetup, SharedContextProvider } from '@masknet/shared'
-import { jsxCompose } from '@masknet/shared-base'
-import { ErrorBoundary } from '@masknet/shared-base-ui'
-import { i18n } from '@lingui/core'
-
-export interface PageUIProviderProps {
-    useTheme: () => Theme
-    children?: React.ReactNode
-    fallback?: React.ReactNode
-}
-export function PageUIProvider({ children, useTheme, fallback }: PageUIProviderProps) {
-    return jsxCompose(
-        // Avoid the crash due to unhandled suspense
-        <Suspense />,
-        // Provide the minimal environment (i18n context) for CrashUI in page mode
-        <LinguiProviderHMR i18n={i18n} />,
-        <StyledEngineProvider injectFirst />,
-        <ErrorBoundary />,
-
-        <Suspense fallback={fallback} />,
-        <DialogStackingProvider hasGlobalBackdrop={false} />,
-        <MaskThemeProvider useMaskIconPalette={(theme) => theme.palette.mode} useTheme={useTheme} />,
-        <RootWeb3ContextProvider />,
-    )(
-        cloneElement,
-        <>
-            <PrivySetup />
-            <SharedContextProvider>
-                <CustomSnackbarProvider
-                    disableWindowBlurListener={false}
-                    anchorOrigin={{ vertical: 'top', horizontal: 'right' }}>
-                    <CSSVariableInjector />
-                    {children}
-                </CustomSnackbarProvider>
-            </SharedContextProvider>
-        </>,
-    )
-}
diff --git a/packages/shared/src/UI/contexts/index.ts b/packages/shared/src/UI/contexts/index.ts
index c76d25503ca1..8f407f00e5b0 100644
--- a/packages/shared/src/UI/contexts/index.ts
+++ b/packages/shared/src/UI/contexts/index.ts
@@ -1,4 +1,3 @@
 export * from './base/index.js'
 export * from './components/index.js'
 export * from './SharedContextProvider.js'
-export * from './PageUIProvider.js'
diff --git a/packages/theme/src/CSSVariables/Injector.tsx b/packages/theme/src/CSSVariables/Injector.tsx
deleted file mode 100644
index 48a961fbdbdc..000000000000
--- a/packages/theme/src/CSSVariables/Injector.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { GlobalStyles, type Theme, useTheme } from '@mui/material'
-import { useRef } from 'react'
-import { CSSVariableInjectorCSS } from './applyToDOM.js'
-
-export interface CSSVariableInjectorProps extends React.PropsWithChildren {
-    useTheme?: () => Theme
-}
-export function CSSVariableInjector(props: CSSVariableInjectorProps) {
-    // eslint-disable-next-line react-compiler/react-compiler
-    const useConsistentTheme = useRef(props.useTheme || useTheme).current
-    // eslint-disable-next-line react-compiler/react-compiler
-    const colorScheme = useConsistentTheme().palette.mode
-
-    return <GlobalStyles styles={CSSVariableInjectorCSS(colorScheme)} />
-}
diff --git a/packages/theme/src/CSSVariables/applyToDOM.ts b/packages/theme/src/CSSVariables/applyToDOM.ts
deleted file mode 100644
index 26e441a7d453..000000000000
--- a/packages/theme/src/CSSVariables/applyToDOM.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { PaletteMode } from '@mui/material'
-import { kebabCase } from 'lodash-es'
-import { LightColor, DarkColor } from './constants.js'
-import tinyColor from 'tinycolor2'
-
-// Fragment are in the form of "1, 2, 3"
-// which is used for rgba(var(--x), alpha)
-function getRGBFragment(x: { [property: string]: string }, key: string) {
-    const { r, g, b } = tinyColor(x[key]).toRgb()
-    return [r, g, b].join(', ')
-}
-export function CSSVariableInjectorCSS(scheme: PaletteMode) {
-    const ns: { [property: string]: string } = scheme === 'light' ? LightColor : DarkColor
-    const result: { [property: string]: string } = {}
-    for (const [key, value] of Object.entries(ns)) {
-        // --mask-name: val;
-        result[`--mask-${kebabCase(key)}`] = value
-        result[`--mask-${kebabCase(key)}-fragment`] = getRGBFragment(ns, key)
-    }
-    return {
-        ':root, :host': result,
-        // TODO doesn't work on components that mounted in portal
-        '[data-hide-scrollbar]': {
-            scrollbarWidth: 'none',
-            '&::-webkit-scrollbar': {
-                display: 'none',
-            },
-        },
-    } as const
-}
-
-export function applyMaskColorVars(node: HTMLElement, scheme: PaletteMode) {
-    const ns: { [property: string]: string } = scheme === 'light' ? LightColor : DarkColor
-    if (node === document.body) {
-        const id = '#mask-style-var'
-        if (!document.querySelector(id)) {
-            const style = document.createElement('style')
-            style.id = id
-            document.head.append(style)
-        }
-        applyMaskColorVars(document.querySelector(id)!, scheme)
-        return
-    } else if (node instanceof HTMLStyleElement) {
-        let rule = ':root, :host {\n'
-        for (const [key, value] of Object.entries(ns)) {
-            // --mask-name: val;
-            rule += `    --mask-${kebabCase(key)}: ${value};\n`
-            rule += `    --mask-${kebabCase(key)}-fragment: ${getRGBFragment(ns, key)};\n`
-        }
-        node.textContent = rule + '}'
-    } else {
-        for (const [key, value] of Object.entries(ns)) {
-            node.style.setProperty('--mask-' + kebabCase(key), value)
-            node.style.setProperty('--mask-' + kebabCase(key) + '-fragment', getRGBFragment(ns, key))
-        }
-    }
-}
diff --git a/packages/theme/src/CSSVariables/constants.ts b/packages/theme/src/CSSVariables/constants.ts
deleted file mode 100644
index 0ad0508ff14b..000000000000
--- a/packages/theme/src/CSSVariables/constants.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-export const LightColor = {
-    bg: '##F9F9F9',
-    primary: '#1c68f3',
-    primaryContrastText: '#ffffff',
-    background: '#FFFFFF',
-    secondary: '#e8f0fe',
-    secondaryContrastText: '#1c68f3',
-    input: '#F6F6F8',
-    primaryBackground: '#ffffff',
-    primaryBackground2: '#FBFBFC',
-    secondaryBackground: '#f9fafa',
-    lightBackground: '#F9FAFA',
-    mainBackground: '#ffffff',
-    suspensionBackground: 'rgba(249, 250, 250, 0.8)',
-    normalBackground: '#F3F3F4',
-    twitterBackground: '#F7F9FA',
-    twitterBackgroundHover: '#EFF1F2',
-    twitterInputBackground: '#F6F8F8',
-    twitterButton: '#111418',
-    twitterButtonText: '#ffffff',
-    twitterBlue: '#1C68F3',
-    twitterBorderLine: '#EDF1F2',
-    twitterSecond: '#7B8192',
-    twitterMain: '#0F1419',
-    twitterBottom: '#ffffff',
-    twitterInfoBackground: '#AFC3E1',
-    twitterInfo: '#8CA3C7',
-    twitterBg: '#F6F8F8',
-    twitterTooltipBg: 'rgba(0,0,0,.6)',
-    twitterInput: '#EDF1F2',
-    twitterLine: '#EBEEF0',
-    redMain: '#ff5f5f',
-    redLight: '#ffafaf',
-    redContrastText: '#ffffff',
-
-    greenMain: '#3DC233',
-    greenLight: '#e6f6f0',
-
-    orangeMain: '#ffb915',
-    orangeLight: '#faf0d8',
-
-    iconLight: '#a6a9b6',
-
-    divider: '#eff3f4',
-
-    border: '#F3F3F4',
-    borderSecondary: '#536471',
-
-    textPrimary: '#111432',
-    textSecondary: '#7b8192',
-
-    secondaryInfoText: '#AFC3E1',
-    normalText: '#7B8192',
-    normalTextLight: 'rgba(255, 255, 255, 0.8)',
-    infoBackground: 'rgba(175, 195, 225, 0.15)',
-    success: '#60DFAB',
-    warning: '#FFB915',
-    blue: '#1C68F3',
-    textLink: '#1C68F3',
-    lineLight: '#E4E8F1',
-    lineLighter: '#E9E9EA',
-    textLight: '#A6A9B6',
-    lightestBackground: '#FFFFFF',
-    linkText: '#1C68F3',
-    twitter: '#2CA4EF',
-    facebook: '#4267B2',
-    white: '#ffffff',
-    bottom: '#F9FAFA',
-    main: '#1C68F3',
-    errorBackground: 'rgba(255, 95, 95, 0.15)',
-    tooltipBackground: '#ffffff',
-    warningBackground: 'rgba(255, 185, 21, 0.1)',
-    cyberconnectPrimary: '#000000',
-    errorPlugin: '#FF3545',
-    buttonPluginBackground: '#07101B',
-    textPluginColor: '#07101B',
-    buttonPluginColor: '#FFFFFF',
-}
-export const DarkColor: typeof LightColor = {
-    bg: '#1C1C1C',
-    primary: '#1c68f3',
-    primaryContrastText: '#ffffff',
-    background: '#15171A',
-    secondary: '#242e57',
-    secondaryContrastText: '#ffffff',
-    input: '#282B49',
-    primaryBackground: '#212442',
-    primaryBackground2: '#212442',
-    secondaryBackground: '#252846',
-    lightBackground: '#2E314F',
-    mainBackground: '#111432',
-    suspensionBackground: 'rgba(27, 30, 60, 0.8)',
-    normalBackground: '#262947',
-    twitterInputBackground: '#17191D',
-    twitterBackground: '#17191D',
-    twitterBackgroundHover: '#17191D',
-    twitterButton: '#EFF3F4',
-    twitterButtonText: '#0F1419',
-    twitterBlue: '#4989FF',
-    twitterBorderLine: '#2F3336',
-    twitterInput: '#1D2023',
-    twitterSecond: '#636B72',
-    twitterMain: '#D9D9D9',
-    twitterBottom: '#000000',
-    twitterInfoBackground: '#AFC3E1',
-    twitterInfo: '#8CA3C7',
-    twitterLine: '#2F3336',
-    twitterBg: '#15171A',
-    twitterTooltipBg: 'rgba(91,112,131,.6)',
-    redMain: '#ff5f5f',
-    redLight: '#46304a',
-    redContrastText: '#ffffff',
-
-    greenMain: '#3DC233',
-    greenLight: '#314457',
-
-    orangeMain: '#ffb915',
-    orangeLight: '#463e3f',
-
-    iconLight: '#a6a9b6',
-
-    divider: '#3e455e',
-
-    border: '#3E455E',
-    borderSecondary: '#6e767d',
-
-    // TODO: ?
-    textPrimary: '#ffffff',
-    // TODO: ?
-    textSecondary: 'ghostwhite',
-
-    secondaryInfoText: '#AFC3E1',
-    normalText: 'rgba(255, 255, 255, 0.8)',
-    normalTextLight: 'rgba(255, 255, 255, 0.8)',
-
-    infoBackground: 'rgba(175, 195, 225, 0.15)',
-    success: '#60DFAB',
-    warning: '#FFB915',
-    blue: '#1C68F3',
-    textLink: '#ffffff',
-    lineLight: '#32365B',
-    lineLighter: '#32365B',
-    textLight: '#A6A9B6',
-    lightestBackground: '#212422',
-    linkText: '#ffffff',
-    twitter: '#2CA4EF',
-    facebook: '#4267B2',
-    white: '#ffffff',
-    bottom: '#000000',
-    main: '#D4D4D4',
-    errorBackground: 'rgba(255, 95, 95, 0.1)',
-    tooltipBackground: '#1A1D20',
-    warningBackground: 'rgba(255, 185, 21, 0.1)',
-    cyberconnectPrimary: '#ffffff',
-    errorPlugin: '#FF3545',
-    buttonPluginBackground: '#07101B',
-    textPluginColor: '#07101B',
-    buttonPluginColor: '#FFFFFF',
-}
-export type Color = typeof LightColor
diff --git a/packages/theme/src/CSSVariables/index.ts b/packages/theme/src/CSSVariables/index.ts
deleted file mode 100644
index 2915f2b16671..000000000000
--- a/packages/theme/src/CSSVariables/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './applyToDOM.js'
-export * from './Injector.js'
-export * from './constants.js'
diff --git a/packages/theme/src/Components/Snackbar/PopupSnackbar.tsx b/packages/theme/src/Components/Snackbar/PopupSnackbar.tsx
index 0cd59681eb49..2f6f08d699cf 100644
--- a/packages/theme/src/Components/Snackbar/PopupSnackbar.tsx
+++ b/packages/theme/src/Components/Snackbar/PopupSnackbar.tsx
@@ -1,13 +1,14 @@
-import { memo, useRef, useCallback, type RefAttributes } from 'react'
-import { Typography, alpha, collapseClasses } from '@mui/material'
+import { memo, useRef, useCallback, forwardRef, type RefAttributes } from 'react'
+import { Typography, collapseClasses } from '@mui/material'
+import { alpha } from '../../Theme/colors.js'
 import {
     SnackbarProvider,
     type SnackbarProviderProps,
     type SnackbarMessage,
     SnackbarContent,
     type VariantType,
-    type SnackbarKey,
     useSnackbar,
+    type CustomContentProps,
 } from 'notistack'
 import { makeStyles } from '../../UIHelper/index.js'
 import type { ShowSnackbarOptions } from './index.js'
@@ -40,18 +41,17 @@ const useStyles = makeStyles()((theme) => ({
         overflow: 'hidden',
     },
     success: {
-        background: alpha(theme.palette.maskColor.success, 0.5),
-        color: theme.palette.maskColor.white,
+        background: alpha(theme.vars.palette.maskColor.success, 0.5),
+        color: theme.vars.palette.maskColor.white,
     },
     error: {
-        background: alpha(theme.palette.maskColor.danger, 0.5),
-        color: theme.palette.maskColor.white,
+        background: alpha(theme.vars.palette.maskColor.danger, 0.5),
+        color: theme.vars.palette.maskColor.white,
     },
     warning: {
-        background: alpha(theme.palette.maskColor.warn, 0.5),
-        color: theme.palette.maskColor.white,
+        background: alpha(theme.vars.palette.maskColor.warn, 0.5),
+        color: theme.vars.palette.maskColor.white,
     },
-    // eslint-disable-next-line tss-unused-classes/unused-classes
     default: {},
 
     info: {},
@@ -68,53 +68,58 @@ export const PopupSnackbarProvider = memo<SnackbarProviderProps>(function PopupS
             disableWindowBlurListener
             autoHideDuration={2000}
             anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+            Components={{
+                default: PopupSnackbarContent,
+                success: PopupSnackbarContent,
+                error: PopupSnackbarContent,
+                warning: PopupSnackbarContent,
+                info: PopupSnackbarContent,
+            }}
             classes={{
                 containerRoot: classes.container,
-                variantSuccess: classes.success,
-                variantError: classes.error,
-                variantInfo: classes.info,
-                variantWarning: classes.warning,
             }}
             {...props}
         />
     )
 })
 
-interface PopupSnackbarContentProps extends RefAttributes<HTMLDivElement> {
-    id: SnackbarKey
-    title: SnackbarMessage
-    message?: string | React.ReactNode
-    variant?: VariantType
+interface PopupSnackbarContentProps extends CustomContentProps, RefAttributes<HTMLDivElement> {
+    detail?: React.ReactNode
 }
 
-function PopupSnackbarContent({ id, title, message, variant, ref }: PopupSnackbarContentProps) {
+const PopupSnackbarContent = forwardRef<HTMLDivElement, PopupSnackbarContentProps>(function PopupSnackbarContent(
+    { id, message, detail, variant },
+    ref,
+) {
     const { classes, cx } = useStyles()
+    const variantClass = {
+        default: classes.default,
+        success: classes.success,
+        error: classes.error,
+        warning: classes.warning,
+        info: classes.info,
+    }[variant]
 
     return (
-        <SnackbarContent ref={ref} key={id} className={cx(classes.content, classes[variant!])}>
+        <SnackbarContent ref={ref} key={id} className={cx(classes.content, variantClass)}>
             <Typography className={classes.title} component="div">
-                {title}
+                {message}
             </Typography>
-            {typeof message === 'string' ?
-                <Typography className={classes.message}>{message}</Typography>
-            :   message}
+            {typeof detail === 'string' ?
+                <Typography className={classes.message}>{detail}</Typography>
+            :   detail}
         </SnackbarContent>
     )
-}
+})
 
 export function usePopupCustomSnackbar() {
     const { enqueueSnackbar, closeSnackbar } = useSnackbar()
     const showSnackbar = useCallback(
         (text: SnackbarMessage, options?: ShowSnackbarOptions) => {
-            const { processing, message, variant, ...rest } = options || {
-                variant: 'success',
-                autoHideDuration: 2000,
-            }
-            return enqueueSnackbar(text, {
+            const { message: detail, variant = 'success', ...rest } = options ?? {}
+            return enqueueSnackbar<VariantType>(text, {
                 variant,
-                content: (key, title) => {
-                    return <PopupSnackbarContent id={key} title={title} message={message} variant={variant} />
-                },
+                detail,
                 autoHideDuration: 2000,
                 ...rest,
             })
diff --git a/packages/theme/src/Components/Snackbar/index.tsx b/packages/theme/src/Components/Snackbar/index.tsx
index c3762db5a651..31916b30529b 100644
--- a/packages/theme/src/Components/Snackbar/index.tsx
+++ b/packages/theme/src/Components/Snackbar/index.tsx
@@ -1,21 +1,20 @@
-import { useRef, memo, useCallback, type RefAttributes } from 'react'
+import { useRef, memo, useCallback, forwardRef, type RefAttributes } from 'react'
 import { keyframes } from 'tss-react'
 import {
     SnackbarProvider,
     type SnackbarProviderProps,
-    type SnackbarKey,
     useSnackbar,
     type VariantType,
     type SnackbarMessage,
     SnackbarContent,
-    type SnackbarAction,
     type OptionsObject,
+    type CustomContentProps,
 } from 'notistack'
-import { Typography, IconButton, alpha } from '@mui/material'
+import { Typography, IconButton } from '@mui/material'
 import { Close as CloseIcon, Warning as WarningIcon, Info as InfoIcon } from '@mui/icons-material'
 import { Icons } from '@masknet/icons'
+import { alpha } from '../../Theme/colors.js'
 import { makeStyles } from '../../UIHelper/index.js'
-import { MaskColorVar } from '../../CSSVariables/index.js'
 import { usePortalShadowRoot } from '../../ShadowRoot/index.js'
 
 export { PopupSnackbarProvider, usePopupCustomSnackbar } from './PopupSnackbar.js'
@@ -33,13 +32,13 @@ const useStyles = makeStyles<StyleProps, 'title' | 'message'>()((theme, { offset
         }
     `
     const title = {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 700,
         fontSize: 14,
         lineHeight: '18px',
     } as const
     const message = {
-        color: theme.palette.maskColor.main,
+        color: theme.vars.palette.maskColor.main,
         fontWeight: 400,
         display: 'flex',
         alignItems: 'center',
@@ -55,12 +54,10 @@ const useStyles = makeStyles<StyleProps, 'title' | 'message'>()((theme, { offset
         },
     } as const
     const defaultVariant = {
-        background: theme.palette.maskColor.bottom,
-        color: theme.palette.maskColor.main,
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 4px 30px rgba(255, 255, 255, 0.15)'
-            :   '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        background: theme.vars.palette.maskColor.bottom,
+        color: theme.vars.palette.maskColor.main,
+        boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        ...theme.applyStyles('dark', { boxShadow: '0px 4px 30px rgba(255, 255, 255, 0.15)' }),
         [`& .${classNames.title}`]: {
             color: 'inherit',
         },
@@ -70,67 +67,65 @@ const useStyles = makeStyles<StyleProps, 'title' | 'message'>()((theme, { offset
         },
     }
     const success = {
-        backgroundColor: theme.palette.maskColor.success,
-        color: theme.palette.maskColor.white,
-        boxShadow: `0px 6px 20px ${alpha(theme.palette.maskColor.success, 0.15)}`,
+        backgroundColor: theme.vars.palette.maskColor.success,
+        color: theme.vars.palette.maskColor.white,
+        boxShadow: `0px 6px 20px ${alpha(theme.vars.palette.maskColor.success, 0.15)}`,
         backdropFilter: 'blur(16px)',
         [`& .${classNames.title}`]: {
             color: 'inherit',
         },
         [`& .${classNames.message}`]: {
-            color: alpha(theme.palette.maskColor.white, 0.8),
+            color: alpha(theme.vars.palette.maskColor.white, 0.8),
             '& svg': {
-                color: theme.palette.maskColor.white,
+                color: theme.vars.palette.maskColor.white,
             },
         },
     } as const
 
     const error = {
-        background: theme.palette.maskColor.danger,
-        color: theme.palette.maskColor.white,
-        boxShadow: `0px 6px 20px ${alpha(theme.palette.maskColor.danger, 0.15)}`,
+        background: theme.vars.palette.maskColor.danger,
+        color: theme.vars.palette.maskColor.white,
+        boxShadow: `0px 6px 20px ${alpha(theme.vars.palette.maskColor.danger, 0.15)}`,
         backdropFilter: 'blur(16px)',
         [`& .${classNames.title}`]: {
             color: 'inherit',
         },
         [`& .${classNames.message}`]: {
-            color: alpha(theme.palette.maskColor.white, 0.8),
+            color: alpha(theme.vars.palette.maskColor.white, 0.8),
             '& svg': {
-                color: theme.palette.maskColor.white,
+                color: theme.vars.palette.maskColor.white,
             },
         },
     } as const
 
     const info = {
-        background: theme.palette.maskColor.primary,
-        color: theme.palette.maskColor.white,
-        boxShadow:
-            theme.palette.mode === 'dark' ?
-                '0px 4px 30px rgba(255, 255, 255, 0.15)'
-            :   '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        background: theme.vars.palette.maskColor.primary,
+        color: theme.vars.palette.maskColor.white,
+        boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        ...theme.applyStyles('dark', { boxShadow: '0px 4px 30px rgba(255, 255, 255, 0.15)' }),
         [`& .${classNames.title}`]: {
             color: 'inherit',
         },
         [`& .${classNames.message}`]: {
-            color: alpha(theme.palette.maskColor.white, 0.8),
+            color: alpha(theme.vars.palette.maskColor.white, 0.8),
             '& svg': {
-                color: theme.palette.maskColor.white,
+                color: theme.vars.palette.maskColor.white,
             },
         },
     }
 
     const warning = {
-        backgroundColor: theme.palette.maskColor.warn,
-        color: theme.palette.maskColor.white,
-        boxShadow: `0px 6px 20px ${alpha(theme.palette.maskColor.warn, 0.15)}`,
+        backgroundColor: theme.vars.palette.maskColor.warn,
+        color: theme.vars.palette.maskColor.white,
+        boxShadow: `0px 6px 20px ${alpha(theme.vars.palette.maskColor.warn, 0.15)}`,
         backdropFilter: 'blur(16px)',
         [`& .${classNames.title}`]: {
             color: 'inherit',
         },
         [`& .${classNames.message}`]: {
-            color: alpha(theme.palette.maskColor.white, 0.8),
+            color: alpha(theme.vars.palette.maskColor.white, 0.8),
             '& svg': {
-                color: theme.palette.maskColor.white,
+                color: theme.vars.palette.maskColor.white,
             },
         },
     } as const
@@ -139,7 +134,7 @@ const useStyles = makeStyles<StyleProps, 'title' | 'message'>()((theme, { offset
         root: {
             zIndex: 9999,
             transform: offsetY === undefined ? 'none' : `translateY(${offsetY}px)`,
-            color: MaskColorVar.textLight,
+            color: theme.vars.palette.maskColor.textLight,
             pointerEvents: 'inherit',
         },
         content: {
@@ -149,7 +144,7 @@ const useStyles = makeStyles<StyleProps, 'title' | 'message'>()((theme, { offset
             width: 380,
             flexWrap: 'nowrap !important' as 'nowrap',
         },
-        // eslint-disable-next-line tss-unused-classes/unused-classes
+
         default: defaultVariant,
         success,
         error,
@@ -186,16 +181,27 @@ const useStyles = makeStyles<StyleProps, 'title' | 'message'>()((theme, { offset
     }
 })
 
-interface CustomSnackbarContentProps extends RefAttributes<HTMLDivElement> {
-    id: SnackbarKey
-    title: SnackbarMessage
-    message?: string | React.ReactNode
+export interface CustomSnackbarOptions {
+    detail?: React.ReactNode
     icon?: React.ReactNode
     processing?: boolean
-    variant?: VariantType
-    action?: SnackbarAction
+    classes?: Partial<Record<'content' | 'title' | 'message', string>>
+}
+
+type NotistackVariantOptions = CustomSnackbarOptions & Record<string, unknown>
+
+declare module 'notistack' {
+    interface VariantOverrides {
+        default: NotistackVariantOptions
+        success: NotistackVariantOptions
+        error: NotistackVariantOptions
+        warning: NotistackVariantOptions
+        info: NotistackVariantOptions
+    }
+}
+
+interface CustomSnackbarContentProps extends CustomContentProps, CustomSnackbarOptions, RefAttributes<HTMLDivElement> {
     offsetY?: number
-    classes?: Partial<ReturnType<typeof useStyles>['classes']>
 }
 const IconMap: Record<VariantType, React.ReactNode> = {
     default: <InfoIcon color="inherit" />,
@@ -205,41 +211,50 @@ const IconMap: Record<VariantType, React.ReactNode> = {
     info: <InfoIcon color="inherit" />,
 }
 
-function CustomSnackbarContent(props: CustomSnackbarContentProps) {
-    const { classes, cx } = useStyles({ offsetY: props.offsetY }, { props })
-    const snackbar = useSnackbar()
-    const loadingIcon = <Icons.CircleLoading className={classes.spinning} />
-    const variantIcon =
-        props.processing ? loadingIcon
-        : props.variant ? IconMap[props.variant]
-        : null
-    let renderedAction: React.ReactNode = (
-        <IconButton className={classes.closeButton} onClick={() => snackbar.closeSnackbar(props.id)}>
-            <CloseIcon />
-        </IconButton>
-    )
-    if (props.action) {
-        renderedAction = typeof props.action === 'function' ? props.action(props.id) : props.action
-    }
-    return (
-        <SnackbarContent ref={props.ref} className={cx(classes.content, classes[props.variant!])}>
-            {variantIcon ?
-                <div className={classes.icon}>{variantIcon}</div>
-            :   null}
-            <div className={classes.texts}>
-                <Typography className={classes.title} variant="h2">
-                    {props.title}
-                </Typography>
-                {props.message ?
-                    <Typography className={classes.message} variant="body1">
+const CustomSnackbarContent = forwardRef<HTMLDivElement, CustomSnackbarContentProps>(
+    function CustomSnackbarContent(props, ref) {
+        const { classes, cx } = useStyles({ offsetY: props.offsetY }, { props })
+        const variantClass = {
+            default: classes.default,
+            success: classes.success,
+            error: classes.error,
+            warning: classes.warning,
+            info: classes.info,
+        }[props.variant]
+        const snackbar = useSnackbar()
+        const loadingIcon = <Icons.CircleLoading className={classes.spinning} />
+        const variantIcon =
+            props.processing ? loadingIcon
+            : props.variant ? IconMap[props.variant]
+            : null
+        let renderedAction: React.ReactNode = (
+            <IconButton className={classes.closeButton} onClick={() => snackbar.closeSnackbar(props.id)}>
+                <CloseIcon />
+            </IconButton>
+        )
+        if (props.action) {
+            renderedAction = typeof props.action === 'function' ? props.action(props.id) : props.action
+        }
+        return (
+            <SnackbarContent ref={ref} className={cx(classes.content, variantClass, props.classes?.content)}>
+                {variantIcon ?
+                    <div className={classes.icon}>{variantIcon}</div>
+                :   null}
+                <div className={classes.texts}>
+                    <Typography className={cx(classes.title, props.classes?.title)} variant="h2">
                         {props.message}
                     </Typography>
-                :   null}
-            </div>
-            <div className={classes.action}>{renderedAction}</div>
-        </SnackbarContent>
-    )
-}
+                    {props.detail ?
+                        <Typography className={cx(classes.message, props.classes?.message)} variant="body1">
+                            {props.detail}
+                        </Typography>
+                    :   null}
+                </div>
+                <div className={classes.action}>{renderedAction}</div>
+            </SnackbarContent>
+        )
+    },
+)
 
 export const CustomSnackbarProvider = memo<
     SnackbarProviderProps & {
@@ -259,9 +274,13 @@ export const CustomSnackbarProvider = memo<
             disableWindowBlurListener
             anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
             hideIconVariant
-            content={(key, title) => (
-                <CustomSnackbarContent id={key} variant={rest.variant ?? 'default'} title={title} offsetY={offsetY} />
-            )}
+            Components={{
+                default: CustomSnackbarContent,
+                success: CustomSnackbarContent,
+                error: CustomSnackbarContent,
+                warning: CustomSnackbarContent,
+                info: CustomSnackbarContent,
+            }}
             action={(key) => (
                 <IconButton size="large" onClick={onDismiss(key)} sx={{ color: 'inherit' }}>
                     <CloseIcon color="inherit" />
@@ -269,10 +288,6 @@ export const CustomSnackbarProvider = memo<
             )}
             classes={{
                 containerRoot: classes.root,
-                variantSuccess: classes.success,
-                variantError: classes.error,
-                variantInfo: classes.info,
-                variantWarning: classes.warning,
             }}
             domRoot={container}
             {...rest}
@@ -280,32 +295,21 @@ export const CustomSnackbarProvider = memo<
     ))
 })
 
-export interface ShowSnackbarOptions
-    extends OptionsObject,
-        Pick<CustomSnackbarContentProps, 'message' | 'processing' | 'icon' | 'classes'> {}
+export interface ShowSnackbarOptions extends OptionsObject, Omit<CustomSnackbarOptions, 'detail'> {
+    message?: React.ReactNode
+}
 
 export function useCustomSnackbar() {
     const { enqueueSnackbar, closeSnackbar } = useSnackbar()
     const showSnackbar = useCallback(
         (text: SnackbarMessage, options?: ShowSnackbarOptions) => {
-            const { processing, message, variant, ...rest } = options || {
-                variant: 'default',
-            }
-            return enqueueSnackbar(text, {
+            const { processing, message: detail, icon, classes, variant = 'default', ...rest } = options ?? {}
+            return enqueueSnackbar<VariantType>(text, {
                 variant,
-                content: (key, title) => {
-                    return (
-                        <CustomSnackbarContent
-                            variant={variant ?? 'default'}
-                            id={key}
-                            title={title}
-                            message={message}
-                            processing={processing}
-                            action={rest.action}
-                            classes={rest.classes}
-                        />
-                    )
-                },
+                detail,
+                icon,
+                processing,
+                classes,
                 ...rest,
             })
         },
diff --git a/packages/theme/src/Theme/Provider.tsx b/packages/theme/src/Theme/Provider.tsx
index 0d1dcde7f565..b8655bb90669 100644
--- a/packages/theme/src/Theme/Provider.tsx
+++ b/packages/theme/src/Theme/Provider.tsx
@@ -1,23 +1,60 @@
-import { CssBaseline, type Theme, ThemeProvider } from '@mui/material'
+import {
+    CssBaseline,
+    type Theme,
+    ThemeProvider,
+    type PaletteMode,
+    unstable_createMuiStrictModeTheme,
+    useColorScheme,
+} from '@mui/material'
 import { type MaskIconPalette, MaskIconPaletteContext } from '@masknet/icons'
-import { useRef } from 'react'
+import { getBackgroundColor } from './color-tools.ts'
+import { MaskTheme } from './theme.js'
+import type { Localization } from '@mui/material/locale'
+import { useMemo } from 'react'
 
-export interface MaskThemeProvider extends React.PropsWithChildren {
-    useTheme(): Theme
-    useMaskIconPalette(theme: Theme): MaskIconPalette
+export interface MaskThemeProviderProps extends React.PropsWithChildren {
+    theme?: Theme
+    localization?: Localization
+    palette: PaletteMode
+    supportsDimPalette?: boolean
 }
 
-export function MaskThemeProvider(props: MaskThemeProvider) {
-    const { children, useTheme, useMaskIconPalette } = props
-    const theme = useRef(useTheme).current()
-    const MaskIconPalette = useRef(useMaskIconPalette).current(theme)
+export function MaskThemeProvider(props: MaskThemeProviderProps) {
+    const { children, theme = MaskTheme, localization, supportsDimPalette } = props
+    // TODO: palette
+    let maskIconPalette = useMaskIconPalette()
+    maskIconPalette =
+        supportsDimPalette ? maskIconPalette
+        : maskIconPalette === 'dim' ? 'dark'
+        : maskIconPalette
+    const themeWithLocalization = useMemo(() => {
+        if (!localization) return theme
+        return unstable_createMuiStrictModeTheme(theme, localization)
+    }, [theme, localization])
 
     return (
-        <MaskIconPaletteContext value={MaskIconPalette}>
-            <ThemeProvider theme={theme}>
+        <ThemeProvider theme={themeWithLocalization}>
+            <MaskIconPaletteContext value={maskIconPalette}>
                 <CssBaseline />
                 {children}
-            </ThemeProvider>
-        </MaskIconPaletteContext>
+            </MaskIconPaletteContext>
+        </ThemeProvider>
     )
 }
+
+/**
+ * In content script, if background color is pure black, it returns 'dim' rather than 'dark'.
+ */
+export function useMaskIconPalette(): MaskIconPalette {
+    const palette = usePalette()
+    if (palette === 'dark') {
+        const backgroundColor = getBackgroundColor(document.body)
+        return backgroundColor === 'rgb(0,0,0)' ? 'dim' : 'dark'
+    }
+    return 'light'
+}
+
+export function usePalette(): PaletteMode {
+    const { mode, systemMode } = useColorScheme()
+    return (mode === 'system' ? systemMode : mode) || 'light'
+}
diff --git a/packages/plugin-infra/src/utils/theme/color-tools.ts b/packages/theme/src/Theme/color-tools.ts
similarity index 95%
rename from packages/plugin-infra/src/utils/theme/color-tools.ts
rename to packages/theme/src/Theme/color-tools.ts
index f9054c861549..89b88a5f5c71 100644
--- a/packages/plugin-infra/src/utils/theme/color-tools.ts
+++ b/packages/theme/src/Theme/color-tools.ts
@@ -3,10 +3,6 @@ import { clamp } from 'lodash-es'
 type RGB = [number, number, number]
 type RGBA = [number, number, number, number]
 
-export function isDark([r, g, b]: RGB) {
-    return r < 68 && g < 68 && b < 68
-}
-
 export function toRGB(channels: RGB | undefined) {
     if (!channels) return ''
     return `rgb(${channels.join(',')})`
diff --git a/packages/theme/src/Theme/colors.ts b/packages/theme/src/Theme/colors.ts
index e3d34122e8a1..05d93d84191c 100644
--- a/packages/theme/src/Theme/colors.ts
+++ b/packages/theme/src/Theme/colors.ts
@@ -1,21 +1,77 @@
-// TODO: Just only provide maskColor, others will be deprecate.
-declare module '@mui/material/styles' {
-    interface CssThemeVariables {
-        enabled: true
-    }
+import type { PaletteOptions } from '@mui/material'
+
+interface MaskColor {
+    main: string
+    textPrimary: string
+    textPluginColor: string
+    textSecondary: string
+    normalText: string
+    textLight: string
+    second: string
+    third: string
+    primaryMain: string
+    secondaryMain: string
+    thirdMain: string
+    bg: string
+    bottom: string
+    bottomBg: string
+    shadowBottom: string
+    secondaryBottom: string
+    input: string
+    modalTitleBg: string
+    highlight: string
+    line: string
+    secondaryLine: string
+    tips: string
+    whiteBlue: string
+    primary: string
+    success: string
+    warn: string
+    orangeMain: string
+    redMain: string
+    twitterBorderLine: string
+    setupGuideBorder: string
+    danger: string
+    white: string
+    secondaryDark: string
+    secondaryMainDark: string
+    dark: string
+    publicMain: string
+    publicSecond: string
+    publicThird: string
+    publicLine: string
+    publicTwitter: string
+    publicThirdMain: string
+    publicBg: string
+    publicInput: string
+    borderSecondary: string
+}
 
+interface MaskColorShadow {
+    popup: string
+    selectMenu: string
+    tooltip: string
+}
+
+declare module '@mui/material/styles' {
     interface Palette {
-        maskColor: MaskColor['maskColor']
-        shadow: MaskColor['shadow']
+        maskColor: MaskColor
+        shadow: MaskColorShadow
         secondaryDivider: string
     }
 
     interface PaletteOptions {
-        maskColor?: MaskColor['maskColor']
-        shadow?: MaskColor['shadow']
+        maskColor?: MaskColor
+        shadow?: MaskColorShadow
         secondaryDivider?: string
     }
 
+    interface CssVarsPalette {
+        maskColor: MaskColor
+        shadow: MaskColorShadow
+        secondaryDivider: string
+    }
+
     interface TypeText {
         third: string
         strong: string
@@ -40,187 +96,184 @@ declare module '@mui/material/styles' {
 export const alpha = (color: string, opacity: number) =>
     `color-mix(in srgb, ${color}, transparent ${(1 - opacity) * 100}%)`
 
-export const MaskColors = {
-    light: {
-        primary: { main: '#1c68f3' },
-        grey: {
-            '700': '#536471',
-            '300': '#b9cad3',
-            '200': '#cfd9de',
-            '50': '#eff3f4',
-        },
-        text: {
-            primary: '#07101B',
-            secondary: '#767F8D',
-            third: '#ACB4C1',
-            strong: '#111418',
-            buttonText: '#FFFFFF',
-            twitterButton: '#111418',
-            twitterButtonText: '#FFFFFF',
-        },
-        maskColor: {
-            main: '#07101B',
-            textPrimary: '#111432',
-            textPluginColor: '#07101B',
-            textSecondary: '#7B8192',
-            normalText: '#7B8192',
-            textLight: '#A6A9B6',
-            second: '#767F8D',
-            third: '#ACB4C1',
-            primaryMain: '#B5B7BB',
-            secondaryMain: '#CDCFD1',
-            thirdMain: '#F3F3F4',
-            bg: '#F9F9F9',
-            bottom: '#FFFFFF',
-            bottomBg: '0px 0px 20px rgba(0, 0, 0, 0.05)',
-            shadowBottom: '#000000',
-            secondaryBottom: 'rgba(255, 255, 255, 0.8)',
-            input: '#F2F6FA',
-            modalTitleBg:
-                'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(90deg, rgba(98, 152, 234, 0.2) 1.03%, rgba(98, 152, 234, 0.2) 1.04%, rgba(98, 126, 234, 0.2) 100%)',
-            highlight: '#1C68F3',
-            line: '#F2F5F6',
-            secondaryLine: '#E6E7E8',
-            tips: 'rgba(0, 0, 0, 0.9)',
-            whiteBlue:
-                'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.2) 0%, rgba(59, 153, 252, 0.2) 100%)',
-            primary: '#1C68F3',
-            success: '#3DC233',
-            warn: '#FFB100',
-            orangeMain: '#FFB915',
-            redMain: '#FF5F5F',
-            twitterBorderLine: '#EDF1F2',
-            setupGuideBorder: '#536471',
-            danger: '#FF3545',
-            white: '#ffffff',
-            secondaryDark: '#767F8D',
-            secondaryMainDark: '#181818',
-            dark: '#07101B',
-            publicMain: '#07101B',
-            publicSecond: '#767F8D',
-            publicThird: '#ACB4C1',
-            publicLine: '#F2F5F6',
-            publicTwitter: '#1D9BF0',
-            publicThirdMain: '#F3F3F4',
-            publicBg: '#F9F9F9',
-            publicInput: '#F2F6FA',
-            borderSecondary: '#d2dbe0',
-        },
-        shadow: {
-            popup: '0px 4px 30px rgba(0, 0, 0, 0.1)',
-            selectMenu: '0px 4px 30px rgba(0, 0, 0, 0.1)',
-            tooltip: '0px 0px 20px rgba(0, 0, 0, 0.05)',
-        },
-        background: {
-            default: '#F9F9F9',
-            input: '#F2F6FA',
-            tipMask: 'rgba(0, 0, 0, 0.85)',
-            twitterTooltipBg: 'rgba(0, 0, 0, 0.6)',
-            primaryBackground2: '#FBFBFC',
-            mainBackground: '#FFFFFF',
-            messageShadow: 'rgba(101, 119, 134, 0.2)',
-            paper: '#ffffff',
-        },
-        error: {
-            main: '#F4212E',
-        },
-        divider: '#EFF3F4',
-        secondaryDivider: '#CFD9DE',
-        action: {
-            buttonHover: '#272C30',
-            bgHover: '#EDEFEF',
-            mask: 'rgba(0, 0, 0, 0.4)',
-        },
+export const LightMaskColors = {
+    mode: 'light',
+    primary: { main: '#1c68f3' },
+    grey: {
+        '700': '#536471',
+        '300': '#b9cad3',
+        '200': '#cfd9de',
+        '50': '#eff3f4',
     },
-    dark: {
-        primary: { main: '#1c68f3' },
-        grey: {
-            '700': '#8899a6',
-            '300': '#6b7d8c',
-            '200': '#3d5466',
-            '50': '#253341',
-        },
-        maskColor: {
-            main: '#F5F5F5',
-            textPrimary: '#FFFFFF',
-            textPluginColor: '#07101B',
-            textSecondary: 'ghostwhite',
-            normalText: 'rgba(255, 255, 255, 0.8)',
-            textLight: '#A6A9B6',
-            second: 'rgba(255, 255, 255, 0.78)',
-            third: 'rgba(255, 255, 255, 0.44)',
-            primaryMain: 'rgba(255, 255, 255, 0.28)',
-            secondaryMain: 'rgba(255, 255, 255, 0.13)',
-            thirdMain: 'rgba(255, 255, 255, 0.11)',
-            bg: 'rgba(255, 255, 255, 0.08)',
-            bottom: '#030303',
-            bottomBg: '0px 0px 20px rgba(255, 255, 255, 0.12)',
-            secondaryBottom: 'rgba(0, 0, 0, 0.8)',
-            input: 'rgba(255, 255, 255, 0.15)',
-            shadowBottom: '#ffffff',
-            modalTitleBg: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.06) 100%)',
-            highlight: '#FFFFFF',
-            line: 'rgba(255, 255, 255, 0.18)',
-            secondaryLine: 'rgba(255, 255, 255, 0.43)',
-            tips: 'rgba(255, 255, 255, 0.9)',
-            whiteBlue: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%)',
-            primary: '#1C68F3',
-            success: '#3DC233',
-            warn: '#FFB100',
-            orangeMain: '#FFB915',
-            redMain: '#FF5F5F',
-            twitterBorderLine: '#2F3336',
-            setupGuideBorder: '#6E767D',
-            danger: '#FF3545',
-            white: '#ffffff',
-            secondaryDark: '#767F8D',
-            secondaryMainDark: '#181818',
-            dark: '#07101B',
-            publicMain: '#07101B',
-            publicSecond: '#767F8D',
-            publicThird: '#ACB4C1',
-            publicLine: '#F2F5F6',
-            publicTwitter: '#1D9BF0',
-            publicThirdMain: '#F3F3F4',
-            publicBg: '#F9F9F9',
-            publicInput: '#F2F6FA',
-            borderSecondary: '#536471',
-        },
-        shadow: {
-            popup: '0px 4px 30px rgba(255, 255, 255, 0.15)',
-            selectMenu: '0px 4px 30px rgba(255, 255, 255, 0.15)',
-            tooltip: '0px 0px 20px rgba(255, 255, 255, 0.12)',
-        },
-        text: {
-            primary: '#F5F5F5',
-            secondary: '#C4C7CD',
-            third: '#666C75',
-            strong: '#FFFFFF',
-            buttonText: '#0F1419',
-            twitterButton: '#EFF3F4',
-            twitterButtonText: '#0F1419',
-        },
-        background: {
-            default: '#1C1C1C',
-            input: '#26292C',
-            tipMask: 'rgba(255, 255, 255, 0.85)',
-            twitterTooltipBg: 'rgba(91, 112, 131, 0.6)',
-            primaryBackground2: '#212442',
-            mainBackground: '#111432',
-            messageShadow: 'rgba(136, 153, 166, 0.2)',
-            paper: '#101010',
-        },
-        error: {
-            main: '#FF5555',
-        },
-        divider: '#38444D',
-        secondaryDivider: '#38444D',
-        action: {
-            buttonHover: '#D7DBDC',
-            bgHover: '#1D2933',
-            mask: 'rgba(91, 112, 131, 0.4)',
-        },
+    text: {
+        primary: '#07101B',
+        secondary: '#767F8D',
+        third: '#ACB4C1',
+        strong: '#111418',
+        buttonText: '#FFFFFF',
+        twitterButton: '#111418',
+        twitterButtonText: '#FFFFFF',
     },
-}
+    maskColor: {
+        main: '#07101B',
+        textPrimary: '#111432',
+        textPluginColor: '#07101B',
+        textSecondary: '#7B8192',
+        normalText: '#7B8192',
+        textLight: '#A6A9B6',
+        second: '#767F8D',
+        third: '#ACB4C1',
+        primaryMain: '#B5B7BB',
+        secondaryMain: '#CDCFD1',
+        thirdMain: '#F3F3F4',
+        bg: '#F9F9F9',
+        bottom: '#FFFFFF',
+        bottomBg: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+        shadowBottom: '#000000',
+        secondaryBottom: 'rgba(255, 255, 255, 0.8)',
+        input: '#F2F6FA',
+        modalTitleBg:
+            'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(90deg, rgba(98, 152, 234, 0.2) 1.03%, rgba(98, 152, 234, 0.2) 1.04%, rgba(98, 126, 234, 0.2) 100%)',
+        highlight: '#1C68F3',
+        line: '#F2F5F6',
+        secondaryLine: '#E6E7E8',
+        tips: 'rgba(0, 0, 0, 0.9)',
+        whiteBlue:
+            'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.2) 0%, rgba(59, 153, 252, 0.2) 100%)',
+        primary: '#1C68F3',
+        success: '#3DC233',
+        warn: '#FFB100',
+        orangeMain: '#FFB915',
+        redMain: '#FF5F5F',
+        twitterBorderLine: '#EDF1F2',
+        setupGuideBorder: '#536471',
+        danger: '#FF3545',
+        white: '#ffffff',
+        secondaryDark: '#767F8D',
+        secondaryMainDark: '#181818',
+        dark: '#07101B',
+        publicMain: '#07101B',
+        publicSecond: '#767F8D',
+        publicThird: '#ACB4C1',
+        publicLine: '#F2F5F6',
+        publicTwitter: '#1D9BF0',
+        publicThirdMain: '#F3F3F4',
+        publicBg: '#F9F9F9',
+        publicInput: '#F2F6FA',
+        borderSecondary: '#d2dbe0',
+    },
+    shadow: {
+        popup: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        selectMenu: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+        tooltip: '0px 0px 20px rgba(0, 0, 0, 0.05)',
+    },
+    background: {
+        default: '#F9F9F9',
+        input: '#F2F6FA',
+        tipMask: 'rgba(0, 0, 0, 0.85)',
+        twitterTooltipBg: 'rgba(0, 0, 0, 0.6)',
+        primaryBackground2: '#FBFBFC',
+        mainBackground: '#FFFFFF',
+        paper: '#ffffff',
+    },
+    error: {
+        main: '#F4212E',
+    },
+    divider: '#EFF3F4',
+    secondaryDivider: '#CFD9DE',
+    action: {
+        mask: 'rgba(0, 0, 0, 0.4)',
+    },
+} as const satisfies PaletteOptions
 
-export type MaskColor = typeof MaskColors.light
+export const DarkMaskColors = {
+    primary: { main: '#1c68f3' },
+    grey: {
+        '700': '#8899a6',
+        '300': '#6b7d8c',
+        '200': '#3d5466',
+        '50': '#253341',
+    },
+    maskColor: {
+        main: '#F5F5F5',
+        textPrimary: '#FFFFFF',
+        textPluginColor: '#07101B',
+        textSecondary: 'ghostwhite',
+        normalText: 'rgba(255, 255, 255, 0.8)',
+        textLight: '#A6A9B6',
+        second: 'rgba(255, 255, 255, 0.78)',
+        third: 'rgba(255, 255, 255, 0.44)',
+        primaryMain: 'rgba(255, 255, 255, 0.28)',
+        secondaryMain: 'rgba(255, 255, 255, 0.13)',
+        thirdMain: 'rgba(255, 255, 255, 0.11)',
+        bg: 'rgba(255, 255, 255, 0.08)',
+        bottom: '#030303',
+        bottomBg: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+        secondaryBottom: 'rgba(0, 0, 0, 0.8)',
+        input: 'rgba(255, 255, 255, 0.15)',
+        shadowBottom: '#ffffff',
+        modalTitleBg: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.06) 100%)',
+        highlight: '#FFFFFF',
+        line: 'rgba(255, 255, 255, 0.18)',
+        secondaryLine: 'rgba(255, 255, 255, 0.43)',
+        tips: 'rgba(255, 255, 255, 0.9)',
+        whiteBlue: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%)',
+        primary: '#1C68F3',
+        success: '#3DC233',
+        warn: '#FFB100',
+        orangeMain: '#FFB915',
+        redMain: '#FF5F5F',
+        twitterBorderLine: '#2F3336',
+        setupGuideBorder: '#6E767D',
+        danger: '#FF3545',
+        white: '#ffffff',
+        secondaryDark: '#767F8D',
+        secondaryMainDark: '#181818',
+        dark: '#07101B',
+        publicMain: '#07101B',
+        publicSecond: '#767F8D',
+        publicThird: '#ACB4C1',
+        publicLine: '#F2F5F6',
+        publicTwitter: '#1D9BF0',
+        publicThirdMain: '#F3F3F4',
+        publicBg: '#F9F9F9',
+        publicInput: '#F2F6FA',
+        borderSecondary: '#536471',
+    },
+    shadow: {
+        popup: '0px 4px 30px rgba(255, 255, 255, 0.15)',
+        selectMenu: '0px 4px 30px rgba(255, 255, 255, 0.15)',
+        tooltip: '0px 0px 20px rgba(255, 255, 255, 0.12)',
+    },
+    text: {
+        primary: '#F5F5F5',
+        secondary: '#C4C7CD',
+        third: '#666C75',
+        strong: '#FFFFFF',
+        buttonText: '#0F1419',
+        twitterButton: '#EFF3F4',
+        twitterButtonText: '#0F1419',
+    },
+    background: {
+        default: '#1C1C1C',
+        input: '#26292C',
+        tipMask: 'rgba(255, 255, 255, 0.85)',
+        twitterTooltipBg: 'rgba(91, 112, 131, 0.6)',
+        primaryBackground2: '#212442',
+        mainBackground: '#111432',
+        paper: '#101010',
+    },
+    error: {
+        main: '#FF5555',
+    },
+    divider: '#38444D',
+    secondaryDivider: '#38444D',
+    action: {
+        mask: 'rgba(91, 112, 131, 0.4)',
+    },
+} as const satisfies PaletteOptions
+
+export const MaskColors = {
+    light: LightMaskColors,
+    dark: DarkMaskColors,
+} as const
diff --git a/packages/theme/src/Theme/index.ts b/packages/theme/src/Theme/index.ts
index 3f999022c629..cd1b4fbbafcf 100644
--- a/packages/theme/src/Theme/index.ts
+++ b/packages/theme/src/Theme/index.ts
@@ -1,3 +1,4 @@
-export { MaskColors, alpha } from './colors.js'
-export { MaskThemeProvider } from './Provider.js'
-export { MaskDarkTheme, MaskLightTheme, MaskTheme } from './theme.js'
+export { MaskColors, alpha, DarkMaskColors, LightMaskColors } from './colors.js'
+export { MaskThemeProvider, useMaskIconPalette, type MaskThemeProviderProps, usePalette } from './Provider.js'
+export { MaskTheme } from './theme.js'
+export { fromRGB, getBackgroundColor, shade, toRGB } from './color-tools.js'
diff --git a/packages/theme/src/Theme/theme.ts b/packages/theme/src/Theme/theme.ts
index fe58233a6022..6d0ff63a371d 100644
--- a/packages/theme/src/Theme/theme.ts
+++ b/packages/theme/src/Theme/theme.ts
@@ -87,8 +87,3 @@ export const MaskTheme = unstable_createMuiStrictModeTheme({
         },
     },
 })
-
-/** @deprecated */
-export const MaskLightTheme = MaskTheme
-/** @deprecated */
-export const MaskDarkTheme = MaskTheme
diff --git a/packages/theme/src/entry-base.ts b/packages/theme/src/entry-base.ts
index 7c8c2d65304f..c6b76b790a4e 100644
--- a/packages/theme/src/entry-base.ts
+++ b/packages/theme/src/entry-base.ts
@@ -1,6 +1,5 @@
 /// <reference path="./extended.d.ts" preserve="true" />
 
 export * from './UIHelper/index.js'
-export * from './CSSVariables/index.js'
 export * from './Theme/index.js'
 export * from './ShadowRoot/index.js'
diff --git a/packages/theme/src/env.d.ts b/packages/theme/src/env.d.ts
index b22b5e2a42f4..71e44a8178cf 100644
--- a/packages/theme/src/env.d.ts
+++ b/packages/theme/src/env.d.ts
@@ -1,3 +1,2 @@
 /// <reference types="@masknet/global-types/webpack" />
 /// <reference types="@masknet/global-types/dom" />
-/// <reference types="@masknet/global-types/theme-global" />
diff --git a/packages/theme/src/extended.d.ts b/packages/theme/src/extended.d.ts
index b03d7917c496..99715b722e8c 100644
--- a/packages/theme/src/extended.d.ts
+++ b/packages/theme/src/extended.d.ts
@@ -3,5 +3,12 @@
 /// <reference path="./Theme/theme.ts" />
 /// <reference path="./Components/Snackbar/index.tsx" />
 
+export {}
+
+declare module '@mui/material/styles' {
+    interface CssThemeVariables {
+        enabled: true
+    }
+}
 // The module augmentations live beside their implementations. This file ensures
 // they are loaded by every @masknet/theme entry point.
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
index 00985ffb76fa..27fff834c57f 100644
--- a/packages/theme/src/index.ts
+++ b/packages/theme/src/index.ts
@@ -6,7 +6,6 @@ export { keyframes, type Css, type Cx, TssCacheProvider } from 'tss-react'
 
 //
 export * from './UIHelper/index.js'
-export * from './CSSVariables/index.js'
 export * from './Theme/index.js'
 export * from './ShadowRoot/index.js'
 
diff --git a/packages/types/src/SiteAdaptorUI.ts b/packages/types/src/SiteAdaptorUI.ts
index 9707edd2af38..7684d4f926d0 100644
--- a/packages/types/src/SiteAdaptorUI.ts
+++ b/packages/types/src/SiteAdaptorUI.ts
@@ -6,7 +6,7 @@ import type {
     PersonaIdentifier,
     ProfileInformation,
 } from '@masknet/shared-base'
-import type { PaletteMode, Theme } from '@mui/material'
+import type { PaletteMode, ThemeOptions } from '@mui/material'
 import type { GrayscaleAlgorithm } from '@masknet/encryption'
 import type { IdentityResolved, PostInfo } from '@masknet/plugin-infra/content-script'
 import type { SerializableTypedMessages } from '@masknet/typed-message'
@@ -211,12 +211,7 @@ export namespace SiteAdaptorUI {
     }
     export namespace Customization {
         export interface Define {
-            /**
-             * This is a React hook.
-             *
-             * Should follow the color scheme of the website.
-             */
-            useTheme?(baseTheme: Theme): Theme
+            getTheme?(themeSettings: ThemeSettings): ThemeOptions
             i18nOverwrite?: I18NOverwrite
             sharedComponentOverwrite?: SharedComponentOverwrite
             componentOverwrite?: ComponentOverwrite

From def52ed25ed742672cdefbe5d649ec75d4b8d1b1 Mon Sep 17 00:00:00 2001
From: Jack Works <5390719+Jack-Works@users.noreply.github.com>
Date: Wed, 22 Jul 2026 00:00:00 +0000
Subject: [PATCH 05/15] remove dim

---
 .../icons/utils/MaskIconPaletteContext.d.ts   |  2 +-
 packages/icons/utils/internal.js              | 10 +--
 packages/mask/.webpack/config.ts              | 11 +--
 .../useMaskSiteAdaptorMixedTheme.ts           |  6 +-
 .../site-adaptor-infra/utils.ts               |  1 -
 .../twitter.com/collecting/theme.ts           |  2 -
 .../twitter.com/customization/custom.ts       | 13 +--
 .../site-adaptors/twitter.com/ui-provider.ts  |  1 -
 packages/mask/popups/Popup.tsx                | 17 ++--
 .../RSS3/src/SiteAdaptor/components/share.ts  |  1 -
 .../src/SiteAdaptor/trending/TickersTable.tsx | 85 +++++++++----------
 packages/theme/package.json                   |  3 +-
 .../ShadowRoot/ShadowRootStyleProvider.tsx    |  1 +
 packages/theme/src/Theme/Provider.tsx         | 60 +++++++------
 packages/theme/src/Theme/theme.ts             |  5 +-
 .../src/Twitter/apis/getUserSettings.ts       |  2 -
 packages/web3-providers/src/types/Twitter.ts  |  1 -
 packages/web3-shared/base/src/specs/index.ts  |  1 -
 pnpm-lock.yaml                                | 28 +-----
 19 files changed, 102 insertions(+), 148 deletions(-)

diff --git a/packages/icons/utils/MaskIconPaletteContext.d.ts b/packages/icons/utils/MaskIconPaletteContext.d.ts
index 7c8104063f43..0af6250e4e5d 100644
--- a/packages/icons/utils/MaskIconPaletteContext.d.ts
+++ b/packages/icons/utils/MaskIconPaletteContext.d.ts
@@ -1,4 +1,4 @@
 import { Context } from 'react'
 
-export type MaskIconPalette = 'light' | 'dark' | 'dim'
+export type MaskIconPalette = 'light' | 'dark'
 export const MaskIconPaletteContext: Context<MaskIconPalette>
diff --git a/packages/icons/utils/internal.js b/packages/icons/utils/internal.js
index 60f38c276f36..ea45efa1b139 100644
--- a/packages/icons/utils/internal.js
+++ b/packages/icons/utils/internal.js
@@ -84,11 +84,7 @@ export function __createIcon(name, variants, intrinsicSize = [24, 24]) {
 }
 
 function useDefaultPalette() {
-    const palette = React.useContext(MaskIconPaletteContext)
-
     const theme = useTheme()
-    const isDarkMode = theme.palette.mode === 'dark'
-    if (isDarkMode && palette === 'dim') return 'dim'
     return theme.palette.mode
 }
 
@@ -102,11 +98,9 @@ function selectVariant(variants, palette) {
     const light = variants.find((x) => !x.c || x.c.includes('light'))
     // !x.c means light
     const dark = variants.find((x) => x.c?.includes('dark'))
-    const dim = variants.find((x) => x.c?.includes('dim'))
 
-    if (palette === 'light') return light || dark || dim || variants[0]
-    if (palette === 'dark') return dark || dim || light || variants[0]
-    if (palette === 'dim') return dim || dark || light || variants[0]
+    if (palette === 'light') return light || dark || variants[0]
+    if (palette === 'dark') return dark || light || variants[0]
     return variants[0]
 }
 
diff --git a/packages/mask/.webpack/config.ts b/packages/mask/.webpack/config.ts
index e9e2ae1a5424..08909fa7a24e 100644
--- a/packages/mask/.webpack/config.ts
+++ b/packages/mask/.webpack/config.ts
@@ -264,11 +264,12 @@ export async function createConfiguration(
                 'process.stderr': '/* stdin */ null',
             }),
             flags.reactRefresh &&
-                new (
-                    await (rspack ?
-                        import('@rspack/plugin-react-refresh')
-                    :   import('@pmmmwh/react-refresh-webpack-plugin'))
-                ).default({ overlay: false, esModule: true }),
+                new (rspack ?
+                    (await import('@rspack/plugin-react-refresh')).ReactRefreshRspackPlugin
+                :   (await import('@pmmmwh/react-refresh-webpack-plugin')).default)({
+                    overlay: false,
+                    esModule: true,
+                }),
             flags.profiling && new ProfilingPlugin(),
             // TODO: crashes rspack
             !rspack && new TrustedTypesPlugin(),
diff --git a/packages/mask/content-script/components/useMaskSiteAdaptorMixedTheme.ts b/packages/mask/content-script/components/useMaskSiteAdaptorMixedTheme.ts
index a8d23f3251a0..fac19c5d1844 100644
--- a/packages/mask/content-script/components/useMaskSiteAdaptorMixedTheme.ts
+++ b/packages/mask/content-script/components/useMaskSiteAdaptorMixedTheme.ts
@@ -4,11 +4,11 @@ import { activatedSiteAdaptorUI } from '../site-adaptor-infra/index.js'
 import { useThemeSettings } from './DataSource/useActivatedUI.js'
 
 export function useMaskSiteAdaptorMixedTheme() {
-    const { mode, color, isDim, size } = useThemeSettings()
+    const { mode, color, size } = useThemeSettings()
     const { getTheme } = activatedSiteAdaptorUI!.customization
     const siteAdaptorMixedTheme = useMemo(() => {
         if (!getTheme) return
-        return unstable_createMuiStrictModeTheme(getTheme({ mode, color, isDim, size }))
-    }, [getTheme, mode, color, isDim, size])
+        return unstable_createMuiStrictModeTheme(getTheme({ mode, color, size }))
+    }, [getTheme, mode, color, size])
     return siteAdaptorMixedTheme
 }
diff --git a/packages/mask/content-script/site-adaptor-infra/utils.ts b/packages/mask/content-script/site-adaptor-infra/utils.ts
index df8f827afaa8..da1e8a7ecbcc 100644
--- a/packages/mask/content-script/site-adaptor-infra/utils.ts
+++ b/packages/mask/content-script/site-adaptor-infra/utils.ts
@@ -18,7 +18,6 @@ export const creator = {
                 size: FontSize.Normal,
                 mode: ThemeMode.Light,
                 color: ThemeColor.Blue,
-                isDim: false,
             },
             isEqual,
         ),
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/collecting/theme.ts b/packages/mask/content-script/site-adaptors/twitter.com/collecting/theme.ts
index 9ce836bc28a9..aaca80456cd4 100644
--- a/packages/mask/content-script/site-adaptors/twitter.com/collecting/theme.ts
+++ b/packages/mask/content-script/site-adaptors/twitter.com/collecting/theme.ts
@@ -23,7 +23,6 @@ const resolveThemeColor = createLookupTableResolver<TwitterBaseAPI.ThemeColor, s
 const resolveThemeMode = createLookupTableResolver<TwitterBaseAPI.ThemeMode, ThemeMode>(
     {
         [TwitterBaseAPI.ThemeMode.Dark]: ThemeMode.Dark,
-        [TwitterBaseAPI.ThemeMode.Dim]: ThemeMode.Dark,
         [TwitterBaseAPI.ThemeMode.Light]: ThemeMode.Light,
     },
     ThemeMode.Light,
@@ -54,7 +53,6 @@ async function resolveThemeSettingsInner(
             color: userSettings.themeColor ? resolveThemeColor(userSettings.themeColor) : ref.value.color,
             size: userSettings.scale ? resolveFontSize(userSettings.scale) : ref.value.size,
             mode: userSettings.themeBackground ? resolveThemeMode(userSettings.themeBackground) : ref.value.mode,
-            isDim: userSettings.themeBackground === TwitterBaseAPI.ThemeMode.Dim,
         }
     }
 
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/customization/custom.ts b/packages/mask/content-script/site-adaptors/twitter.com/customization/custom.ts
index c49c0d79c569..31b1ed13a638 100644
--- a/packages/mask/content-script/site-adaptors/twitter.com/customization/custom.ts
+++ b/packages/mask/content-script/site-adaptors/twitter.com/customization/custom.ts
@@ -1,5 +1,4 @@
-import { produce, setAutoFreeze } from 'immer'
-import { unstable_createMuiStrictModeTheme } from '@mui/material'
+import { produce } from 'immer'
 import { colorChannel } from '@mui/system'
 import { fromRGB, MaskTheme, shade, toRGB } from '@masknet/theme'
 import type { ThemeSettings } from '@masknet/web3-shared-base'
@@ -7,14 +6,7 @@ import type { ThemeSettings } from '@masknet/web3-shared-base'
 export function getThemeTwitterVariant(themeSettings: ThemeSettings) {
     const primaryColorRGB = fromRGB(themeSettings.color)!
     const primaryContrastColorRGB = fromRGB('rgb(255, 255, 255)')
-    setAutoFreeze(false)
-
     const TwitterTheme = produce(MaskTheme, (theme) => {
-        if (themeSettings.isDim) {
-            theme.vars.palette.maskColor.bottom = '#15202B'
-            theme.vars.palette.maskColor.secondaryBottom = 'rgba(21, 32, 43, 0.8)'
-        }
-
         const primary = {
             light: toRGB(shade(primaryColorRGB, 10)),
             main: toRGB(primaryColorRGB),
@@ -71,6 +63,5 @@ export function getThemeTwitterVariant(themeSettings: ThemeSettings) {
             },
         }
     })
-    setAutoFreeze(true)
-    return unstable_createMuiStrictModeTheme(TwitterTheme)
+    return TwitterTheme
 }
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/ui-provider.ts b/packages/mask/content-script/site-adaptors/twitter.com/ui-provider.ts
index a10350955c87..c2dedcf04456 100644
--- a/packages/mask/content-script/site-adaptors/twitter.com/ui-provider.ts
+++ b/packages/mask/content-script/site-adaptors/twitter.com/ui-provider.ts
@@ -205,7 +205,6 @@ const twitterUI: SiteAdaptorUI.Definition = {
             color: ThemeColor.Blue,
             size: FontSize.Normal,
             mode: ThemeMode.Light,
-            isDim: false,
         },
         steganography: {
             // ! Change this is a breaking change !
diff --git a/packages/mask/popups/Popup.tsx b/packages/mask/popups/Popup.tsx
index 35deef7f35ce..0ba49e27d38d 100644
--- a/packages/mask/popups/Popup.tsx
+++ b/packages/mask/popups/Popup.tsx
@@ -34,9 +34,8 @@ import { WalletFrame, walletRoutes } from './pages/Wallet/index.js'
 import { ContactsFrame, contactsRoutes } from './pages/Friends/index.js'
 import { ErrorBoundaryUIOfError } from '../../shared-base-ui/src/components/ErrorBoundary/ErrorBoundary.js'
 import { TraderFrame, traderRoutes } from './pages/Trader/index.js'
-import { StyledEngineProvider, type PaletteMode } from '@mui/material/styles'
+import { StyledEngineProvider } from '@mui/material/styles'
 import { i18n } from '@lingui/core'
-import type { Localization } from '@mui/material/locale'
 
 const personaInitialState = {
     queryOwnedPersonaInformation: Services.Identity.queryOwnedPersonaInformation,
@@ -117,12 +116,9 @@ export default function Popups() {
         throttle: 10_000,
     })
 
-    const mode = usePageThemePalette()
-    const [localization] = useThemeLanguage()
-
     return jsxCompose(
         <PersistQueryClientProvider client={queryClient} persistOptions={queryPersistOptions} />,
-        <PageUIProvider palette={mode} localization={localization} />,
+        <PageUIProvider />,
         <PopupSnackbarProvider> </PopupSnackbarProvider>,
         <EVMWeb3ContextProvider providerType={ProviderType.MaskWallet} />,
         <PopupContext />,
@@ -145,12 +141,11 @@ function ErrorPageBoundary() {
 }
 
 interface PageUIProviderProps {
-    palette: PaletteMode
-    localization?: Localization
     children?: React.ReactNode
-    fallback?: React.ReactNode
 }
-function PageUIProvider({ children, fallback, palette, localization }: PageUIProviderProps) {
+function PageUIProvider({ children }: PageUIProviderProps) {
+    const palette = usePageThemePalette()
+    const [localization] = useThemeLanguage()
     return jsxCompose(
         // Avoid the crash due to unhandled suspense
         <Suspense />,
@@ -159,7 +154,7 @@ function PageUIProvider({ children, fallback, palette, localization }: PageUIPro
         <StyledEngineProvider injectFirst />,
         <ErrorBoundary />,
 
-        <Suspense fallback={fallback} />,
+        <Suspense />,
         <DialogStackingProvider hasGlobalBackdrop={false} />,
         <MaskThemeProvider palette={palette} localization={localization} />,
         <RootWeb3ContextProvider />,
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/share.ts b/packages/plugins/RSS3/src/SiteAdaptor/components/share.ts
index f1eb0319e7e2..faf12fb8c968 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/share.ts
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/share.ts
@@ -9,7 +9,6 @@ type IconComponent =
     | ComponentType<GeneratedIconNonSquareProps>
     | ComponentType<GeneratedIconNonSquareProps<'light'>>
     | ComponentType<GeneratedIconNonSquareProps<'dark'>>
-    | ComponentType<GeneratedIconNonSquareProps<'dim'>>
     | ComponentType<GeneratedIconNonSquareProps<'light' | 'dark'>>
 
 export enum CardType {
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx
index 1d9b84049fb7..8fc60ef6b302 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TickersTable.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, useContext } from 'react'
+import type { ReactNode } from 'react'
 import { pick } from 'lodash-es'
 import {
     Box,
@@ -12,57 +12,54 @@ import {
     TableRow,
     Typography,
 } from '@mui/material'
-import { makeStyles, ShadowRootTooltip, useMaskIconPalette } from '@masknet/theme'
+import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
 import { FormattedCurrency } from '@masknet/shared'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { CurrencyType, formatCurrency } from '@masknet/web3-shared-base'
 import type { Ticker } from '../../types/index.js'
-import { TrendingViewContext } from './context.js'
 import { Trans } from '@lingui/react/macro'
 import { intlFormatDistance } from 'date-fns'
 import { useLingui } from '@lingui/react'
 
-const useStyles = makeStyles<{ themeMode?: 'dim' | 'dark' | 'light'; isPopper?: boolean }>()(
-    (theme, { themeMode, isPopper }) => ({
-        container: {
-            maxHeight: 266,
-            scrollbarWidth: 'none',
-            '&::-webkit-scrollbar': {
-                display: 'none',
-            },
+const useStyles = makeStyles()((theme) => ({
+    container: {
+        maxHeight: 266,
+        scrollbarWidth: 'none',
+        '&::-webkit-scrollbar': {
+            display: 'none',
         },
-        cell: {
-            paddingLeft: theme.spacing(0.5),
-            paddingRight: theme.spacing(0.5),
-            background: themeMode === 'dim' && !isPopper ? '#15202b' : theme.vars.palette.maskColor.bottom,
-            fontSize: 12,
-            fontWeight: 700,
-            whiteSpace: 'nowrap',
-            border: 'none',
-            '&:not(:first-child)': {
-                textAlign: 'center',
-            },
+    },
+    cell: {
+        paddingLeft: theme.spacing(0.5),
+        paddingRight: theme.spacing(0.5),
+        background: theme.vars.palette.maskColor.bottom,
+        fontSize: 12,
+        fontWeight: 700,
+        whiteSpace: 'nowrap',
+        border: 'none',
+        '&:not(:first-child)': {
+            textAlign: 'center',
         },
-        logo: {
-            width: 18,
-            height: 18,
-            verticalAlign: 'bottom',
-            marginRight: theme.spacing(0.5),
-        },
-        placeholder: {
-            paddingTop: theme.spacing(10),
-            paddingBottom: theme.spacing(10),
-            borderStyle: 'none',
-        },
-        pair: {
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            maxWidth: 100,
-            width: 100,
-        },
-    }),
-)
+    },
+    logo: {
+        width: 18,
+        height: 18,
+        verticalAlign: 'bottom',
+        marginRight: theme.spacing(0.5),
+    },
+    placeholder: {
+        paddingTop: theme.spacing(10),
+        paddingBottom: theme.spacing(10),
+        borderStyle: 'none',
+    },
+    pair: {
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        maxWidth: 100,
+        width: 100,
+    },
+}))
 
 interface TickersTableProps {
     tickers: Ticker[]
@@ -71,9 +68,7 @@ interface TickersTableProps {
 type Cells = 'exchange' | 'pair' | 'price' | 'volume' | 'updated'
 
 export function TickersTable({ tickers }: TickersTableProps) {
-    const themeMode = useMaskIconPalette()
-    const { isTokenTagPopper } = useContext(TrendingViewContext)
-    const { classes } = useStyles({ themeMode, isPopper: isTokenTagPopper })
+    const { classes } = useStyles()
 
     const headCellMap: Record<Cells, ReactNode> = {
         volume: <Trans>Volume (24h)</Trans>,
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 1968c16ee998..16f09fad7964 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -16,6 +16,7 @@
     "@masknet/icons": "workspace:^",
     "@masknet/shared-base": "workspace:^",
     "@types/tinycolor2": "^1.4.6",
+    "foxact": "^0.3.8",
     "fuse.js": "^7.0.0",
     "notistack": "3.0.2",
     "react-use": "^17.5.0",
@@ -26,4 +27,4 @@
   "devDependencies": {
     "@types/react-window": "^1.8.8"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx b/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx
index 6d1c0aa139a6..096e271bd66a 100644
--- a/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx
+++ b/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx
@@ -47,6 +47,7 @@ function getShadowRootEmotionCache(shadow: ShadowRoot) {
 
     const muiEmotionCache = createEmotionCache({ key })
     const muiStyleSheet = new StyleSheet({ key, container: shadow })
+    // @ts-expect-error internal api?
     muiEmotionCache.sheet = muiStyleSheet
 
     styleSheetMap.set(shadow, [muiEmotionCache, muiStyleSheet])
diff --git a/packages/theme/src/Theme/Provider.tsx b/packages/theme/src/Theme/Provider.tsx
index b8655bb90669..8e9fbd057721 100644
--- a/packages/theme/src/Theme/Provider.tsx
+++ b/packages/theme/src/Theme/Provider.tsx
@@ -3,14 +3,14 @@ import {
     type Theme,
     ThemeProvider,
     type PaletteMode,
-    unstable_createMuiStrictModeTheme,
     useColorScheme,
+    type StorageManager,
+    unstable_createMuiStrictModeTheme,
 } from '@mui/material'
-import { type MaskIconPalette, MaskIconPaletteContext } from '@masknet/icons'
-import { getBackgroundColor } from './color-tools.ts'
+import { MaskIconPaletteContext } from '@masknet/icons'
 import { MaskTheme } from './theme.js'
 import type { Localization } from '@mui/material/locale'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 
 export interface MaskThemeProviderProps extends React.PropsWithChildren {
     theme?: Theme
@@ -19,41 +19,49 @@ export interface MaskThemeProviderProps extends React.PropsWithChildren {
     supportsDimPalette?: boolean
 }
 
+function useStorageManager(palette: PaletteMode): StorageManager {
+    const storageManagerRef = useRef<StorageManager>(null)
+    const storageManagerCallbackRef = useRef<Set<(value: PaletteMode) => void>>(new Set())
+    useEffect(() => {
+        for (const callback of storageManagerCallbackRef.current) {
+            callback(palette)
+        }
+    }, [palette])
+    if (!storageManagerRef.current) {
+        storageManagerRef.current = () => ({
+            get: () => palette,
+            set: () => {
+                // ignore, we managed it by ourselves
+            },
+            subscribe: (callback) => {
+                storageManagerCallbackRef.current.add(callback)
+                return () => {
+                    storageManagerCallbackRef.current.delete(callback)
+                }
+            },
+        })
+    }
+    return storageManagerRef.current
+}
+
 export function MaskThemeProvider(props: MaskThemeProviderProps) {
-    const { children, theme = MaskTheme, localization, supportsDimPalette } = props
-    // TODO: palette
-    let maskIconPalette = useMaskIconPalette()
-    maskIconPalette =
-        supportsDimPalette ? maskIconPalette
-        : maskIconPalette === 'dim' ? 'dark'
-        : maskIconPalette
+    const { children, theme = MaskTheme, palette, localization, supportsDimPalette } = props
+    const storageManager = useStorageManager(palette)
+
     const themeWithLocalization = useMemo(() => {
         if (!localization) return theme
         return unstable_createMuiStrictModeTheme(theme, localization)
     }, [theme, localization])
 
     return (
-        <ThemeProvider theme={themeWithLocalization}>
-            <MaskIconPaletteContext value={maskIconPalette}>
+        <ThemeProvider theme={themeWithLocalization} storageManager={storageManager}>
+            <MaskIconPaletteContext value={palette}>
                 <CssBaseline />
                 {children}
             </MaskIconPaletteContext>
         </ThemeProvider>
     )
 }
-
-/**
- * In content script, if background color is pure black, it returns 'dim' rather than 'dark'.
- */
-export function useMaskIconPalette(): MaskIconPalette {
-    const palette = usePalette()
-    if (palette === 'dark') {
-        const backgroundColor = getBackgroundColor(document.body)
-        return backgroundColor === 'rgb(0,0,0)' ? 'dim' : 'dark'
-    }
-    return 'light'
-}
-
 export function usePalette(): PaletteMode {
     const { mode, systemMode } = useColorScheme()
     return (mode === 'system' ? systemMode : mode) || 'light'
diff --git a/packages/theme/src/Theme/theme.ts b/packages/theme/src/Theme/theme.ts
index 6d0ff63a371d..b2e3238099a7 100644
--- a/packages/theme/src/Theme/theme.ts
+++ b/packages/theme/src/Theme/theme.ts
@@ -73,10 +73,9 @@ export const MaskTheme = unstable_createMuiStrictModeTheme({
             styleOverrides: { root: { backgroundImage: 'unset' } },
         },
     },
-    modularCssLayers: 'mui',
+    // modularCssLayers: 'mui',
     cssVariables: {
-        colorSchemeSelector: 'media',
-        rootSelector: ':host',
+        colorSchemeSelector: 'data',
     },
     colorSchemes: {
         light: {
diff --git a/packages/web3-providers/src/Twitter/apis/getUserSettings.ts b/packages/web3-providers/src/Twitter/apis/getUserSettings.ts
index 216ac52dda0a..0e738fd27b5a 100644
--- a/packages/web3-providers/src/Twitter/apis/getUserSettings.ts
+++ b/packages/web3-providers/src/Twitter/apis/getUserSettings.ts
@@ -46,8 +46,6 @@ export function getComputedUserSettings(): TwitterBaseAPI.UserSettings {
         switch (rgb.toLowerCase()) {
             case 'rgb(255, 255, 255)':
                 return TwitterBaseAPI.ThemeMode.Light
-            case 'rgb(21, 32, 43)':
-                return TwitterBaseAPI.ThemeMode.Dim
             case 'rgb(0, 0, 0)':
                 return TwitterBaseAPI.ThemeMode.Dark
             default:
diff --git a/packages/web3-providers/src/types/Twitter.ts b/packages/web3-providers/src/types/Twitter.ts
index 377d12fdc877..5e93baf37a09 100644
--- a/packages/web3-providers/src/types/Twitter.ts
+++ b/packages/web3-providers/src/types/Twitter.ts
@@ -145,7 +145,6 @@ export namespace TwitterBaseAPI {
 
     export enum ThemeMode {
         Dark = 'darker',
-        Dim = 'dark',
         Light = 'light',
     }
 
diff --git a/packages/web3-shared/base/src/specs/index.ts b/packages/web3-shared/base/src/specs/index.ts
index a42dd1c3e098..5d98b303123f 100644
--- a/packages/web3-shared/base/src/specs/index.ts
+++ b/packages/web3-shared/base/src/specs/index.ts
@@ -219,7 +219,6 @@ export interface ThemeSettings {
     size: FontSize
     color: string
     mode: ThemeMode
-    isDim: boolean
 }
 
 export interface Identity {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a000087bf21b..ca075a4e0f33 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2058,6 +2058,9 @@ importers:
       '@types/tinycolor2':
         specifier: ^1.4.6
         version: 1.4.6
+      foxact:
+        specifier: ^0.3.8
+        version: 0.3.8(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
       fuse.js:
         specifier: ^7.0.0
         version: 7.0.0
@@ -6664,11 +6667,6 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  acorn@8.15.0:
-    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
   acorn@8.17.0:
     resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==}
     engines: {node: '>=0.4.0'}
@@ -7073,11 +7071,6 @@ packages:
   browserify-sign@4.2.1:
     resolution: {integrity: sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==}
 
-  browserslist@4.25.1:
-    resolution: {integrity: sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
   browserslist@4.28.1:
     resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -18578,8 +18571,6 @@ snapshots:
 
   acorn@7.4.1: {}
 
-  acorn@8.15.0: {}
-
   acorn@8.17.0: {}
 
   addressparser@0.3.2:
@@ -19017,13 +19008,6 @@ snapshots:
       readable-stream: 3.6.2
       safe-buffer: 5.2.1
 
-  browserslist@4.25.1:
-    dependencies:
-      caniuse-lite: 1.0.30001761
-      electron-to-chromium: 1.5.267
-      node-releases: 2.0.27
-      update-browserslist-db: 1.2.3(browserslist@4.25.1)
-
   browserslist@4.28.1:
     dependencies:
       baseline-browser-mapping: 2.9.11
@@ -24889,12 +24873,6 @@ snapshots:
       consola: 3.2.3
       pathe: 1.1.2
 
-  update-browserslist-db@1.2.3(browserslist@4.25.1):
-    dependencies:
-      browserslist: 4.25.1
-      escalade: 3.2.0
-      picocolors: 1.1.1
-
   update-browserslist-db@1.2.3(browserslist@4.28.1):
     dependencies:
       browserslist: 4.28.1

From c7a81ae63912baffe8e4c13fd0fa47f33f66edd7 Mon Sep 17 00:00:00 2001
From: Jack Works <5390719+Jack-Works@users.noreply.github.com>
Date: Wed, 22 Jul 2026 00:00:00 +0000
Subject: [PATCH 06/15] fix typography

---
 packages/icons/utils/internal.js               |  6 +++---
 .../InjectedComponents/PermissionBoundary.tsx  |  2 +-
 .../dashboard/components/SetupFrame/index.tsx  |  2 +-
 .../BackupPreviewModal/BackupPreviewDialog.tsx |  3 +--
 .../RestoreBackupModal/RestoreBackupDialog.tsx | 18 ++++++++++++------
 .../SetupPersona/Backup/Cloud/Preview.tsx      |  4 ++--
 .../components/UnlockERC20Token/index.tsx      | 11 +++++------
 .../components/WalletSettingList/index.tsx     |  2 +-
 .../modals/ChangeBackupPasswordModal/index.tsx |  2 +-
 .../ChangePaymentPasswordModal/index.tsx       |  4 ++--
 .../popups/modals/PersonaRenameModal/index.tsx |  2 +-
 .../modals/SelectProviderModal/index.tsx       |  4 ++--
 .../modals/SetBackupPasswordModal/index.tsx    |  4 ++--
 .../modals/ShowPrivateKeyModal/index.tsx       |  2 +-
 .../WalletAutoLockSettingModal/index.tsx       |  2 +-
 .../popups/modals/WalletRemoveModal/index.tsx  |  6 +++---
 .../popups/modals/WalletRenameModal/index.tsx  |  4 ++--
 .../mask/popups/pages/Friends/Detail/UI.tsx    |  2 +-
 .../popups/pages/Personas/Logout/index.tsx     |  3 +--
 .../pages/Wallet/ExportPrivateKey/index.tsx    |  2 +-
 .../pages/Wallet/SetPaymentPassword/index.tsx  | 11 +++++++----
 .../mask/popups/pages/Wallet/Unlock/index.tsx  |  5 ++---
 .../components/ImportCreateWallet/index.tsx    |  2 +-
 .../src/SiteAdaptor/components/RiskCard.tsx    |  2 +-
 .../SiteAdaptor/components/SecurityPanel.tsx   | 12 +++++++-----
 .../Handle/src/SiteAdaptor/PluginHeader.tsx    |  6 +++---
 .../components/FeedCard/UnknownCard.tsx        |  2 +-
 .../SolanaRedpacketDialog/CreateRedpacket.tsx  |  6 ++++--
 .../SiteAdaptor/views/CreateTokenRedPacket.tsx |  6 ++++--
 .../src/SiteAdaptor/SavingsTable/index.tsx     |  2 +-
 .../Snapshot/src/SiteAdaptor/LoadingCard.tsx   |  2 +-
 .../Snapshot/src/SiteAdaptor/Snapshot.tsx      |  4 ++--
 .../Snapshot/src/SiteAdaptor/VotesCard.tsx     |  2 +-
 .../SiteAdaptor/trader/views/BridgeConfirm.tsx |  2 +-
 .../SiteAdaptor/trader/views/Trade/index.tsx   | 11 ++++++-----
 .../SiteAdaptor/trader/views/Transaction.tsx   |  4 ++--
 .../SiteAdaptor/trending/TrendingViewDeck.tsx  |  4 ++--
 .../VCent/src/SiteAdaptor/TweetDialog.tsx      |  2 +-
 .../CompositionDialog/CompositionUI.tsx        |  2 +-
 .../CompositionDialog/PluginEntryRender.tsx    |  2 +-
 .../CompositionDialog/TypedMessageEditor.tsx   |  2 +-
 .../UI/components/FungibleTokenInput/UI.tsx    |  2 +-
 .../UI/components/MaskPluginWrapper/index.tsx  | 17 ++++-------------
 .../UI/components/PluginCardFrame/index.tsx    |  2 +-
 .../src/UI/components/PriceChange/index.tsx    |  2 +-
 .../ProfileTabContent/WalletSettingsEntry.tsx  |  2 +-
 .../src/UI/components/TokenSecurity/index.tsx  | 10 ++--------
 .../WalletStatusBar/PluginWalletStatusBar.tsx  |  2 +-
 .../WalletStatusBar/WalletDescription.tsx      |  2 +-
 .../WalletStatusBox/TransactionList.tsx        | 13 ++++++++++---
 .../src/UI/modals/ConnectWalletModal/index.tsx |  4 ++--
 .../PluginProviderRender.tsx                   |  2 +-
 .../theme/src/Components/TextField/index.tsx   |  5 +----
 packages/theme/src/Theme/index.ts              |  2 +-
 54 files changed, 121 insertions(+), 120 deletions(-)

diff --git a/packages/icons/utils/internal.js b/packages/icons/utils/internal.js
index ea45efa1b139..9cfb2cf87868 100644
--- a/packages/icons/utils/internal.js
+++ b/packages/icons/utils/internal.js
@@ -1,4 +1,4 @@
-import { useTheme, Box } from '@mui/material'
+import { Box } from '@mui/material'
 import * as React from 'react'
 import { MaskIconPaletteContext } from './MaskIconPaletteContext.js'
 
@@ -84,8 +84,8 @@ export function __createIcon(name, variants, intrinsicSize = [24, 24]) {
 }
 
 function useDefaultPalette() {
-    const theme = useTheme()
-    return theme.palette.mode
+    const palette = React.useContext(MaskIconPaletteContext)
+    return palette
 }
 
 /**
diff --git a/packages/mask/content-script/components/InjectedComponents/PermissionBoundary.tsx b/packages/mask/content-script/components/InjectedComponents/PermissionBoundary.tsx
index 2060169d7373..7f1324bde84e 100644
--- a/packages/mask/content-script/components/InjectedComponents/PermissionBoundary.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/PermissionBoundary.tsx
@@ -61,9 +61,9 @@ export function MaskPostExtraPluginWrapperWithPermission({
                         wrapperProps={props.definition.wrapperProps}
                         content={
                             <Typography
-                                color={theme.vars.palette.maskColor.publicMain}
                                 component="div"
                                 sx={{
+                                    color: theme.vars.palette.maskColor.publicMain,
                                     fontSize: 14,
                                     marginBottom: 3.25,
                                     textAlign: 'left',
diff --git a/packages/mask/dashboard/components/SetupFrame/index.tsx b/packages/mask/dashboard/components/SetupFrame/index.tsx
index 9a9bc4d81872..19b3388aea97 100644
--- a/packages/mask/dashboard/components/SetupFrame/index.tsx
+++ b/packages/mask/dashboard/components/SetupFrame/index.tsx
@@ -68,8 +68,8 @@ export const SetupFrame = memo<SetupFrameProps>(function SetupFrame({ hiddenSpli
                                 justifyContent: 'center',
                             }}>
                             <Typography
-                                color={theme.vars.palette.maskColor.publicMain}
                                 sx={{
+                                    color: theme.vars.palette.maskColor.publicMain,
                                     fontSize: 36,
                                     fontWeight: 700,
                                     lineHeight: 1.2,
diff --git a/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx b/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
index 2c90bc2bbd58..707118e74537 100644
--- a/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
+++ b/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
@@ -209,8 +209,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
                     :   null}
                     {isUpload ?
                         <Typography
-                            color={theme.vars.palette.maskColor.danger}
-                            sx={{ fontSize: 14, lineHeight: '18px' }}>
+                            sx={{ color: theme.vars.palette.maskColor.danger, fontSize: 14, lineHeight: '18px' }}>
                             <Trans>
                                 This will overwrite the existing cloud backup with the local data, this cannot be undo.
                             </Trans>
diff --git a/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx b/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx
index fc24d827081c..47ee659602d4 100644
--- a/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx
+++ b/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx
@@ -176,27 +176,33 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
                         <Typography className={classes.fileName}>{fileName}</Typography>
                         <LinearProgress variant="determinate" value={progress} sx={{ my: 0.5 }} />
                         <Typography
-                            color={theme.vars.palette.maskColor.third}
-                            sx={{ display: 'flex', gap: 0.5, fontSize: 12, fontWeight: 700, lineHeight: '16px' }}>
+                            sx={{
+                                color: theme.vars.palette.maskColor.third,
+                                display: 'flex',
+                                gap: 0.5,
+                                fontSize: 12,
+                                fontWeight: 700,
+                                lineHeight: '16px',
+                            }}>
                             {progress === 100 ?
                                 <>
                                     <Typography
                                         component="span"
                                         sx={{
+                                            color: theme.vars.palette.maskColor.main,
                                             fontSize: 12,
                                             fontWeight: 700,
                                             lineHeight: '16px',
-                                        }}
-                                        color={theme.vars.palette.maskColor.main}>
+                                        }}>
                                         {formatFileSize(Number(size))}
                                     </Typography>
                                     <Typography
                                         component="span"
                                         sx={{
+                                            color: theme.vars.palette.maskColor.third,
                                             fontSize: 12,
                                             lineHeight: '16px',
-                                        }}
-                                        color={theme.vars.palette.maskColor.third}>
+                                        }}>
                                         {formatDateTime(new Date(Number(uploadedAt)), 'yyyy-MM-dd HH:mm')}
                                     </Typography>
                                 </>
diff --git a/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/Preview.tsx b/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/Preview.tsx
index 1924e945e657..145fe3055bf2 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/Preview.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Backup/Cloud/Preview.tsx
@@ -142,10 +142,10 @@ export const Component = memo(function CloudBackupPreview() {
                                     <Typography
                                         component="span"
                                         sx={{
+                                            color: theme.vars.palette.maskColor.third,
                                             fontSize: 12,
                                             lineHeight: '16px',
-                                        }}
-                                        color={theme.vars.palette.maskColor.third}>
+                                        }}>
                                         {formatDateTime(
                                             fromUnixTime(Number(previewInfo.uploadedAt)),
                                             'yyyy-MM-dd HH:mm',
diff --git a/packages/mask/popups/components/UnlockERC20Token/index.tsx b/packages/mask/popups/components/UnlockERC20Token/index.tsx
index 1e4ca3d8e95f..291286c769ee 100644
--- a/packages/mask/popups/components/UnlockERC20Token/index.tsx
+++ b/packages/mask/popups/components/UnlockERC20Token/index.tsx
@@ -232,12 +232,11 @@ export const UnlockERC20Token = memo<UnlockERC20TokenProps>(function UnlockERC20
                         sx={{
                             fontSize: 12,
                             fontWeight: 700,
-                        }}
-                        color={
-                            isGreaterThan(value, leftShift(balance, token?.decimals)) ?
-                                theme.vars.palette.maskColor.danger
-                            :   theme.vars.palette.maskColor.warn
-                        }>
+                            color:
+                                isGreaterThan(value, leftShift(balance, token?.decimals)) ?
+                                    theme.vars.palette.maskColor.danger
+                                :   theme.vars.palette.maskColor.warn,
+                        }}>
                         {tips}
                     </Typography>
                 :   null}
diff --git a/packages/mask/popups/components/WalletSettingList/index.tsx b/packages/mask/popups/components/WalletSettingList/index.tsx
index b64204a2662c..bfceb372cd34 100644
--- a/packages/mask/popups/components/WalletSettingList/index.tsx
+++ b/packages/mask/popups/components/WalletSettingList/index.tsx
@@ -12,7 +12,7 @@ export const WalletList = memo(function WalletList() {
     return (
         <Box sx={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
             <Icons.EmptySimple size={36} />
-            <Typography color={theme.vars.palette.maskColor.second} sx={{ fontSize: 14, mt: 1.5, textAlign: 'center' }}>
+            <Typography sx={{ color: theme.vars.palette.maskColor.second, fontSize: 14, mt: 1.5, textAlign: 'center' }}>
                 <Trans>
                     No associated wallet.{' '}
                     <RouterLink
diff --git a/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx b/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx
index 750ecc913e3d..497c10368387 100644
--- a/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx
@@ -184,7 +184,7 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
                         />
                     )}
                 />
-                <Typography sx={{ fontSize: 12 }} color={theme.vars.palette.maskColor.second}>
+                <Typography sx={{ color: theme.vars.palette.maskColor.second, fontSize: 12 }}>
                     <Trans>
                         Backup password must be 8-20 characters, including uppercase, lowercase, special characters and
                         numbers.
diff --git a/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx b/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
index 92adb633cc8f..4a0922e58400 100644
--- a/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
@@ -78,8 +78,8 @@ function ChangePaymentPasswordDrawer({
     return (
         <BottomDrawer {...rest} classes={{ title: classes.title }}>
             <Typography
-                color={theme.vars.palette.maskColor.third}
                 sx={{
+                    color: theme.vars.palette.maskColor.third,
                     fontWeight: 700,
                     textAlign: 'center',
                     marginTop: '12px',
@@ -128,7 +128,7 @@ function ChangePaymentPasswordDrawer({
                     slotProps={{ input: inputProps }}
                 />
             </Box>
-            <Typography color={theme.vars.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1.5, height: 32 }}>
+            <Typography sx={{ color: theme.vars.palette.maskColor.danger, fontSize: 14, mt: 1.5, height: 32 }}>
                 {passwordTooShort || passwordNotMatch || originalPasswordWrong}
             </Typography>
             <ActionButton loading={loading} disabled={loading} onClick={handleClick} sx={{ marginTop: '16px' }}>
diff --git a/packages/mask/popups/modals/PersonaRenameModal/index.tsx b/packages/mask/popups/modals/PersonaRenameModal/index.tsx
index 701eb2c1d88e..3ab6fd7cfc1e 100644
--- a/packages/mask/popups/modals/PersonaRenameModal/index.tsx
+++ b/packages/mask/popups/modals/PersonaRenameModal/index.tsx
@@ -42,7 +42,7 @@ export const PersonaRenameModal = memo<ActionModalBaseProps>(function PersonaRen
                     <Trans>Confirm</Trans>
                 </ActionButton>
             }>
-            <Typography sx={{ fontWeight: 700, textAlign: 'center' }} color={theme.vars.palette.maskColor.third}>
+            <Typography sx={{ color: theme.vars.palette.maskColor.third, fontWeight: 700, textAlign: 'center' }}>
                 <Trans>Persona name must between 1 to 24 characters.</Trans>
             </Typography>
             <Box sx={{ display: 'flex', justifyContent: 'center', mx: 0.5, mb: 0.5 }}>
diff --git a/packages/mask/popups/modals/SelectProviderModal/index.tsx b/packages/mask/popups/modals/SelectProviderModal/index.tsx
index 6c66387172a3..ae16bc4bd651 100644
--- a/packages/mask/popups/modals/SelectProviderModal/index.tsx
+++ b/packages/mask/popups/modals/SelectProviderModal/index.tsx
@@ -17,12 +17,12 @@ export const SelectProviderModal = memo<ActionModalBaseProps>(function SelectPro
             {...props}>
             <Typography
                 sx={{
+                    color: theme.vars.palette.maskColor.third,
                     textAlign: 'center',
                     fontSize: 14,
                     fontWeight: 700,
                     lineHeight: '18px',
-                }}
-                color={theme.vars.palette.maskColor.third}>
+                }}>
                 {onlyMask ?
                     <Trans>Select and Connect to your wallet</Trans>
                 :   <Trans>Connect Mask Network Account using your wallet.</Trans>}
diff --git a/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx b/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx
index 9021fc2182f0..445c36ba23e5 100644
--- a/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx
@@ -102,14 +102,14 @@ export const SetBackupPasswordModal = memo<ActionModalBaseProps>(function SetBac
                     helperText={passwordMatched ? '' : <Trans>Two entered passwords are not the same.</Trans>}
                 />
                 <Box>
-                    <Typography sx={{ fontSize: 12 }} color={theme.vars.palette.maskColor.second}>
+                    <Typography sx={{ color: theme.vars.palette.maskColor.second, fontSize: 12 }}>
                         <Trans>
                             Backup password must be 8-20 characters, including uppercase, lowercase, special characters
                             and numbers.
                         </Trans>
                     </Typography>
                     {to ?
-                        <Typography sx={{ mt: 2, fontSize: 12 }} color={theme.vars.palette.maskColor.second}>
+                        <Typography sx={{ color: theme.vars.palette.maskColor.second, mt: 2, fontSize: 12 }}>
                             <Trans>Please set up backup password to export private key.</Trans>
                         </Typography>
                     :   null}
diff --git a/packages/mask/popups/modals/ShowPrivateKeyModal/index.tsx b/packages/mask/popups/modals/ShowPrivateKeyModal/index.tsx
index bd2e52adc41f..f7d92e463815 100644
--- a/packages/mask/popups/modals/ShowPrivateKeyModal/index.tsx
+++ b/packages/mask/popups/modals/ShowPrivateKeyModal/index.tsx
@@ -61,7 +61,7 @@ function ShowPrivateKeyDrawer({ password, error, setPassword, setError, ...rest
                 />
             </Box>
             {error ?
-                <Typography color={theme.vars.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1 }}>
+                <Typography sx={{ color: theme.vars.palette.maskColor.danger, fontSize: 14, mt: 1 }}>
                     {error}
                 </Typography>
             :   null}
diff --git a/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx b/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx
index 49f6ef746ff7..ec091dacf1c6 100644
--- a/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx
+++ b/packages/mask/popups/modals/WalletAutoLockSettingModal/index.tsx
@@ -97,8 +97,8 @@ function WalletAutoLockSettingDrawer(props: BottomDrawerProps) {
     return (
         <BottomDrawer {...props}>
             <Typography
-                color={theme.vars.palette.maskColor.third}
                 sx={{
+                    color: theme.vars.palette.maskColor.third,
                     fontWeight: 700,
                     textAlign: 'center',
                     marginTop: '12px',
diff --git a/packages/mask/popups/modals/WalletRemoveModal/index.tsx b/packages/mask/popups/modals/WalletRemoveModal/index.tsx
index 2e3ace765bbb..5a294ae662be 100644
--- a/packages/mask/popups/modals/WalletRemoveModal/index.tsx
+++ b/packages/mask/popups/modals/WalletRemoveModal/index.tsx
@@ -61,8 +61,8 @@ function WalletRemoveDrawer({ wallet, error, password, setPassword, setError, ..
     return (
         <BottomDrawer {...rest}>
             <Typography
-                color={theme.vars.palette.maskColor.third}
                 sx={{
+                    color: theme.vars.palette.maskColor.third,
                     fontWeight: 700,
                     textAlign: 'center',
                     marginTop: '12px',
@@ -70,8 +70,8 @@ function WalletRemoveDrawer({ wallet, error, password, setPassword, setError, ..
                 <Trans>Are you sure to remove this wallet?</Trans>
             </Typography>
             <Typography
-                color={theme.vars.palette.maskColor.main}
                 sx={{
+                    color: theme.vars.palette.maskColor.main,
                     fontWeight: 700,
                     textAlign: 'center',
                     marginTop: '0px',
@@ -93,7 +93,7 @@ function WalletRemoveDrawer({ wallet, error, password, setPassword, setError, ..
                 />
             </Box>
             {error ?
-                <Typography color={theme.vars.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1 }}>
+                <Typography sx={{ color: theme.vars.palette.maskColor.danger, fontSize: 14, mt: 1 }}>
                     {error}
                 </Typography>
             :   null}
diff --git a/packages/mask/popups/modals/WalletRenameModal/index.tsx b/packages/mask/popups/modals/WalletRenameModal/index.tsx
index dd4aa6c97533..baa35699cf47 100644
--- a/packages/mask/popups/modals/WalletRenameModal/index.tsx
+++ b/packages/mask/popups/modals/WalletRenameModal/index.tsx
@@ -50,8 +50,8 @@ function WalletRenameDrawer({ wallet, walletName, ...rest }: WalletRenameDrawerP
     return (
         <BottomDrawer {...rest}>
             <Typography
-                color={theme.vars.palette.maskColor.third}
                 sx={{
+                    color: theme.vars.palette.maskColor.third,
                     fontWeight: 700,
                     textAlign: 'center',
                     marginTop: '12px',
@@ -89,7 +89,7 @@ function WalletRenameDrawer({ wallet, walletName, ...rest }: WalletRenameDrawerP
                 />
             </Box>
             {error ?
-                <Typography color={theme.vars.palette.maskColor.danger} sx={{ fontSize: 14, mt: 1 }}>
+                <Typography sx={{ color: theme.vars.palette.maskColor.danger, fontSize: 14, mt: 1 }}>
                     {error}
                 </Typography>
             :   null}
diff --git a/packages/mask/popups/pages/Friends/Detail/UI.tsx b/packages/mask/popups/pages/Friends/Detail/UI.tsx
index 1539d9ce7671..0e03998d3fdd 100644
--- a/packages/mask/popups/pages/Friends/Detail/UI.tsx
+++ b/packages/mask/popups/pages/Friends/Detail/UI.tsx
@@ -122,8 +122,8 @@ export const FriendsDetailUI = memo<FriendsDetailUIProps>(function FriendsDetail
                         {publicKey ? formatPersonaFingerprint(publicKey) : null}
                     </Typography>
                     <Typography
-                        color={theme.vars.palette.maskColor.second}
                         sx={{
+                            color: theme.vars.palette.maskColor.second,
                             fontSize: 12,
                             lineHeight: '16px',
                             display: 'flex',
diff --git a/packages/mask/popups/pages/Personas/Logout/index.tsx b/packages/mask/popups/pages/Personas/Logout/index.tsx
index 4b05bd03f6bf..7a3d74594471 100644
--- a/packages/mask/popups/pages/Personas/Logout/index.tsx
+++ b/packages/mask/popups/pages/Personas/Logout/index.tsx
@@ -142,8 +142,7 @@ const LogoutUI = memo<LogoutUIProps>(function LogoutUI({
                     <Box>
                         <Typography sx={{ fontWeight: 700 }}>{currentPersona?.nickname}</Typography>
                         <Typography
-                            color={theme.vars.palette.maskColor.third}
-                            sx={{ fontSize: 10, lineHeight: '10px' }}>
+                            sx={{ color: theme.vars.palette.maskColor.third, fontSize: 10, lineHeight: '10px' }}>
                             {currentPersona?.identifier.rawPublicKey}
                         </Typography>
                     </Box>
diff --git a/packages/mask/popups/pages/Wallet/ExportPrivateKey/index.tsx b/packages/mask/popups/pages/Wallet/ExportPrivateKey/index.tsx
index 8ab8a97df865..1cd533b29712 100644
--- a/packages/mask/popups/pages/Wallet/ExportPrivateKey/index.tsx
+++ b/packages/mask/popups/pages/Wallet/ExportPrivateKey/index.tsx
@@ -175,7 +175,7 @@ export const Component = memo(function ExportPrivateKey() {
                     <Box className={classes.iconWrapper}>
                         <Icons.EncryptedFiles size={36} />
                     </Box>
-                    <Typography color={theme.vars.palette.maskColor.danger}>
+                    <Typography sx={{ color: theme.vars.palette.maskColor.danger }}>
                         <Trans>
                             This JSON file is encrypted with your current payment password. The same password is
                             required for decryption when importing this wallet.
diff --git a/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx b/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx
index d0735c29ac50..f890cdf6146f 100644
--- a/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx
+++ b/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx
@@ -279,8 +279,11 @@ export const Component = memo(function SetPaymentPassword() {
                             </div>
                             {errorMsg && !isValid ?
                                 <Typography
-                                    color={theme.vars.palette.maskColor.danger}
-                                    sx={{ fontSize: 14, marginTop: '12px' }}>
+                                    sx={{
+                                        color: theme.vars.palette.maskColor.danger,
+                                        fontSize: 14,
+                                        marginTop: '12px',
+                                    }}>
                                     {errorMsg}
                                 </Typography>
                             :   null}
@@ -288,8 +291,8 @@ export const Component = memo(function SetPaymentPassword() {
                             <button type="submit" hidden />
                         </form>
                         <Typography
-                            color={theme.vars.palette.maskColor.third}
                             sx={{
+                                color: theme.vars.palette.maskColor.third,
                                 fontSize: 14,
                                 textAlign: 'center',
                                 fontWeight: 700,
@@ -298,8 +301,8 @@ export const Component = memo(function SetPaymentPassword() {
                         </Typography>
 
                         <Typography
-                            color={theme.vars.palette.maskColor.third}
                             sx={{
+                                color: theme.vars.palette.maskColor.third,
                                 fontSize: 14,
                                 textAlign: 'center',
                                 fontWeight: 700,
diff --git a/packages/mask/popups/pages/Wallet/Unlock/index.tsx b/packages/mask/popups/pages/Wallet/Unlock/index.tsx
index b7b307c6c800..32ddb8e71db1 100644
--- a/packages/mask/popups/pages/Wallet/Unlock/index.tsx
+++ b/packages/mask/popups/pages/Wallet/Unlock/index.tsx
@@ -99,8 +99,7 @@ const Unlock = memo(function Unlock() {
                     />
                     {verified === false ?
                         <Typography
-                            color={theme.vars.palette.maskColor.danger}
-                            sx={{ fontSize: 14, marginTop: '12px' }}>
+                            sx={{ color: theme.vars.palette.maskColor.danger, fontSize: 14, marginTop: '12px' }}>
                             <Trans>Incorrect password</Trans>
                         </Typography>
                     :   null}
@@ -116,10 +115,10 @@ const Unlock = memo(function Unlock() {
                 </Button>
 
                 <Typography
-                    color={theme.vars.palette.maskColor.main}
                     onClick={navigateToResetWallet}
                     className={classes.pointer}
                     sx={{
+                        color: theme.vars.palette.maskColor.main,
                         marginTop: '16px',
                         fontSize: 14,
                         textAlign: 'center',
diff --git a/packages/mask/popups/pages/Wallet/components/ImportCreateWallet/index.tsx b/packages/mask/popups/pages/Wallet/components/ImportCreateWallet/index.tsx
index e9bf68fd7820..b3326c19452b 100644
--- a/packages/mask/popups/pages/Wallet/components/ImportCreateWallet/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/ImportCreateWallet/index.tsx
@@ -214,7 +214,7 @@ export const ImportCreateWallet = memo<Props>(function ImportCreateWallet({ onCh
                     {oauthTimeout ?
                         <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                             <Icons.Time size={32} color={theme.vars.palette.maskColor.main} />
-                            <Typography color={theme.vars.palette.maskColor.second} sx={{ fontWeight: 400, my: 1.5 }}>
+                            <Typography sx={{ color: theme.vars.palette.maskColor.second, fontWeight: 400, my: 1.5 }}>
                                 <Trans>Your X account authorization has timed out. Please try again.</Trans>
                             </Typography>
                             <ActionButton fullWidth onClick={createPrivyWallet}>
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskCard.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskCard.tsx
index 841e84ebd60b..51bb6074d267 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskCard.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/RiskCard.tsx
@@ -64,7 +64,7 @@ export const RiskCardUI = memo<RiskCardUIProps>(({ icon, title, titleColor, desc
         <Stack spacing={1} key={title} sx={{ p: 1.5 }} direction="row" className={classes.detectionCard}>
             <Box className={classes.icon}>{icon}</Box>
             <Box>
-                <Typography className={classes.header} color={titleColor}>
+                <Typography className={classes.header} sx={{ color: titleColor }}>
                     {title}
                 </Typography>
                 {description ?
diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx
index 01227fae5958..f8721b12f2c5 100644
--- a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx
@@ -124,12 +124,14 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
                                 riskyFactors === 0 ? SecurityMessageLevel.Medium : SecurityMessageLevel.High
                             ].icon(24)}
                             <Typography
-                                sx={{ fontSize: '16px', fontWeight: 500, marginLeft: '8px' }}
-                                color={
-                                    DefineMapping[
+                                sx={{
+                                    color: DefineMapping[
                                         riskyFactors === 0 ? SecurityMessageLevel.Medium : SecurityMessageLevel.High
-                                    ].titleColor
-                                }>
+                                    ].titleColor,
+                                    fontSize: '16px',
+                                    fontWeight: 500,
+                                    marginLeft: '8px',
+                                }}>
                                 {' '}
                                 {riskyFactors === 0 ?
                                     <Trans>Medium Risk</Trans>
diff --git a/packages/plugins/Handle/src/SiteAdaptor/PluginHeader.tsx b/packages/plugins/Handle/src/SiteAdaptor/PluginHeader.tsx
index 641baa0a06b9..184afe0e440e 100644
--- a/packages/plugins/Handle/src/SiteAdaptor/PluginHeader.tsx
+++ b/packages/plugins/Handle/src/SiteAdaptor/PluginHeader.tsx
@@ -48,7 +48,7 @@ export function PluginHeader() {
             sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
             <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', gap: 0.5, alignItems: 'center' }}>
                 <Icons.DecentralizedSearch size={24} />
-                <Typography color={theme.vars.palette.maskColor.dark} sx={{ fontWeight: 'bolder' }}>
+                <Typography sx={{ color: theme.vars.palette.maskColor.dark, fontWeight: 'bolder' }}>
                     <Trans>DSearch</Trans>
                 </Typography>
             </Stack>
@@ -61,11 +61,11 @@ export function PluginHeader() {
                                 className={classes.publisher}
                                 variant="body1"
                                 sx={{
+                                    color: theme.vars.palette.maskColor.textPluginColor,
                                     fontSize: 14,
                                     fontWeight: '700',
                                 }}
-                                component="span"
-                                color={theme.vars.palette.maskColor.textPluginColor}>
+                                component="span">
                                 Mask Network
                                 <Link
                                     target="_blank"
diff --git a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/UnknownCard.tsx b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/UnknownCard.tsx
index 87d45e59d055..9c3dcf06c30a 100644
--- a/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/UnknownCard.tsx
+++ b/packages/plugins/RSS3/src/SiteAdaptor/components/FeedCard/UnknownCard.tsx
@@ -22,7 +22,7 @@ export function UnknownCard({ feed, ...rest }: TokenFeedCardProps) {
         <CardFrame type={cardType} feed={feed} {...rest}>
             <UnknownAction feed={feed} />
             {process.env.NODE_ENV === 'development' ?
-                <Typography color="red">
+                <Typography sx={{ color: 'red' }}>
                     Unknown feed. Tag: {feed.tag}, Type: {feed.type}, {feed.actions.length} actions
                 </Typography>
             :   null}
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/CreateRedpacket.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/CreateRedpacket.tsx
index ca46a30342b2..0f1e84330ec6 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/CreateRedpacket.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedpacketDialog/CreateRedpacket.tsx
@@ -315,8 +315,9 @@ export function CreateSolRedPacket() {
                             <RadioIndicator checked={isRandom} size={20} />
                         </div>
                         <Typography
-                            color={isRandom ? theme.vars.palette.maskColor.main : theme.vars.palette.maskColor.second}
                             sx={{
+                                color:
+                                    isRandom ? theme.vars.palette.maskColor.main : theme.vars.palette.maskColor.second,
                                 fontSize: 16,
                                 fontWeight: isRandom ? 700 : 400,
                             }}>
@@ -328,8 +329,9 @@ export function CreateSolRedPacket() {
                             <RadioIndicator checked={!isRandom} size={20} />
                         </div>
                         <Typography
-                            color={isRandom ? theme.vars.palette.maskColor.second : theme.vars.palette.maskColor.main}
                             sx={{
+                                color:
+                                    isRandom ? theme.vars.palette.maskColor.second : theme.vars.palette.maskColor.main,
                                 fontSize: 16,
                                 fontWeight: isRandom ? 400 : 700,
                             }}>
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateTokenRedPacket.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateTokenRedPacket.tsx
index d115cc45d7a0..c8a97284e0c1 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateTokenRedPacket.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateTokenRedPacket.tsx
@@ -278,8 +278,9 @@ export function CreateTokenRedPacket() {
                             <RadioIndicator checked={isRandom} size={20} />
                         </div>
                         <Typography
-                            color={isRandom ? theme.vars.palette.maskColor.main : theme.vars.palette.maskColor.second}
                             sx={{
+                                color:
+                                    isRandom ? theme.vars.palette.maskColor.main : theme.vars.palette.maskColor.second,
                                 fontSize: 16,
                                 fontWeight: isRandom ? 700 : 400,
                             }}>
@@ -291,8 +292,9 @@ export function CreateTokenRedPacket() {
                             <RadioIndicator checked={!isRandom} size={20} />
                         </div>
                         <Typography
-                            color={isRandom ? theme.vars.palette.maskColor.second : theme.vars.palette.maskColor.main}
                             sx={{
+                                color:
+                                    isRandom ? theme.vars.palette.maskColor.second : theme.vars.palette.maskColor.main,
                                 fontSize: 16,
                                 fontWeight: isRandom ? 400 : 700,
                             }}>
diff --git a/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/index.tsx b/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/index.tsx
index ec767627ad0e..a35eedc9e79e 100644
--- a/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/index.tsx
+++ b/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/index.tsx
@@ -120,7 +120,7 @@ export function SavingsTable({ tab, protocols, loadingProtocols, onWithdraw, onD
                 </div>
             :   <div className={classes.placeholder}>
                     <Icons.EmptySimple size={36} className={classes.empty} />
-                    <Typography sx={{ fontSize: '14px', mt: 1.5 }} color={theme.vars.palette.maskColor.second}>
+                    <Typography sx={{ color: theme.vars.palette.maskColor.second, fontSize: '14px', mt: 1.5 }}>
                         <Trans>No deposit protocols found.</Trans>
                     </Typography>
                 </div>
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/LoadingCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/LoadingCard.tsx
index e49469ecb251..ff9441c11655 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/LoadingCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/LoadingCard.tsx
@@ -1,6 +1,6 @@
 import { Suspense, type ReactNode } from 'react'
 import { Skeleton } from '@mui/material'
-import { alpha, makeStyles  } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import { SnapshotCard } from './SnapshotCard.js'
 import { range } from 'lodash-es'
 
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx
index 771964869df4..db761520a13c 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/Snapshot.tsx
@@ -131,8 +131,8 @@ export function Snapshot() {
                                     classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
                                     arrow>
                                     <Typography
-                                        color={theme.vars.palette.maskColor.publicMain}
                                         sx={{
+                                            color: theme.vars.palette.maskColor.publicMain,
                                             fontSize: 18,
                                             fontWeight: 'bold',
                                             width: 150,
@@ -158,8 +158,8 @@ export function Snapshot() {
                                 classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
                                 arrow>
                                 <Typography
-                                    color={theme.vars.palette.maskColor.publicSecond}
                                     sx={{
+                                        color: theme.vars.palette.maskColor.publicSecond,
                                         fontSize: 14,
                                         fontWeight: '700',
                                         width: 300,
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx
index 42c575167885..a409aacfce06 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/VotesCard.tsx
@@ -126,7 +126,7 @@ function Content() {
                                     <Box className={classes.avatarWrapper}>
                                         <EthereumBlockie address={v.address} />
                                     </Box>
-                                    <Typography color={theme.vars.palette.maskColor.dark}>
+                                    <Typography sx={{ color: theme.vars.palette.maskColor.dark }}>
                                         {isSameAddress(v.address, account) ?
                                             <Trans>You</Trans>
                                         :   formatLongHex(v.address)}
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
index a2e53f6aa7d4..a3360f5b9fff 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
@@ -341,7 +341,7 @@ export const BridgeConfirm = memo(function BridgeConfirm() {
                             tabIndex={-1}
                             target="_blank"
                             rel="noopener noreferrer">
-                            <Typography color={theme.vars.palette.maskColor.success} component="span">
+                            <Typography sx={{ color: theme.vars.palette.maskColor.success }} component="span">
                                 <Trans>Transaction submitted.</Trans>
                             </Typography>
                             <Icons.LinkOut size={16} sx={{ ml: 0.5 }} />
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx
index db218756b49c..d8463d0f2b2b 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Trade/index.tsx
@@ -387,11 +387,12 @@ export function TradeView() {
                                         <Typography
                                             component="span"
                                             className={classes.diff}
-                                            color={
-                                                isGreaterThan(priceDiff, 0) ?
-                                                    theme.vars.palette.maskColor.success
-                                                :   theme.vars.palette.maskColor.danger
-                                            }>
+                                            sx={{
+                                                color:
+                                                    isGreaterThan(priceDiff, 0) ?
+                                                        theme.vars.palette.maskColor.success
+                                                    :   theme.vars.palette.maskColor.danger,
+                                            }}>
                                             ({isGreaterThan(priceDiff, 0) ? '+' : ''}
                                             {priceDiff.toFixed(2)}%)
                                         </Typography>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx
index 6847bfc23be4..3c2ab069c9ab 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx
@@ -403,13 +403,13 @@ export const Transaction = memo(function Transaction() {
                 : txSucceed || bridgeStatus?.status === 'SUCCESS' ?
                     <div className={classes.header}>
                         <Icons.FillSuccess size={72} />
-                        <Typography className={classes.title} color={theme.vars.palette.maskColor.success}>
+                        <Typography className={classes.title} sx={{ color: theme.vars.palette.maskColor.success }}>
                             <Trans>Complete</Trans>
                         </Typography>
                     </div>
                 :   <div className={classes.header}>
                         <Icons.ColorfulClose color={theme.vars.palette.maskColor.danger} size={72} />
-                        <Typography className={classes.title} color={theme.vars.palette.maskColor.danger}>
+                        <Typography className={classes.title} sx={{ color: theme.vars.palette.maskColor.danger }}>
                             <Trans>Failed</Trans>
                         </Typography>
                     </div>
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx
index 4770e43eb8e9..2e3a4283661d 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingViewDeck.tsx
@@ -340,11 +340,11 @@ export function TrendingViewDeck(props: TrendingViewDeckProps) {
                                     {market ?
                                         <Typography
                                             sx={{
+                                                color: theme.vars.palette.maskColor.dark,
                                                 fontSize: 18,
                                                 fontWeight: 500,
                                                 lineHeight: '24px',
-                                            }}
-                                            color={theme.vars.palette.maskColor.dark}>
+                                            }}>
                                             {floorPrice ? formatCurrency(floorPrice, 'USD') : '--'}
                                         </Typography>
                                     :   <Typography sx={{ fontSize: 14, fontWeight: 500, lineHeight: '24px' }}>
diff --git a/packages/plugins/VCent/src/SiteAdaptor/TweetDialog.tsx b/packages/plugins/VCent/src/SiteAdaptor/TweetDialog.tsx
index 6f4e8cb6ae26..205a507e6dd2 100644
--- a/packages/plugins/VCent/src/SiteAdaptor/TweetDialog.tsx
+++ b/packages/plugins/VCent/src/SiteAdaptor/TweetDialog.tsx
@@ -1,7 +1,7 @@
 import { Icons } from '@masknet/icons'
 import { usePluginWrapper } from '@masknet/plugin-infra/content-script'
 import { ImageIcon } from '@masknet/shared'
-import { alpha, makeStyles  } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import { useNetworkDescriptor } from '@masknet/web3-hooks-base'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { Box, Button, Typography } from '@mui/material'
diff --git a/packages/shared/src/UI/components/CompositionDialog/CompositionUI.tsx b/packages/shared/src/UI/components/CompositionDialog/CompositionUI.tsx
index 8e2919903fdf..4c4992212581 100644
--- a/packages/shared/src/UI/components/CompositionDialog/CompositionUI.tsx
+++ b/packages/shared/src/UI/components/CompositionDialog/CompositionUI.tsx
@@ -1,7 +1,7 @@
 import { startTransition, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Icons } from '@masknet/icons'
 import { CompositionContext } from '@masknet/plugin-infra/content-script'
-import { alpha, makeStyles  } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import type { SerializableTypedMessages, TypedMessage } from '@masknet/typed-message'
 import { Button, DialogActions, Typography } from '@mui/material'
 import { CharLimitIndicator } from './CharLimitIndicator.js'
diff --git a/packages/shared/src/UI/components/CompositionDialog/PluginEntryRender.tsx b/packages/shared/src/UI/components/CompositionDialog/PluginEntryRender.tsx
index 9ab5cf0303da..9fffcd42dc71 100644
--- a/packages/shared/src/UI/components/CompositionDialog/PluginEntryRender.tsx
+++ b/packages/shared/src/UI/components/CompositionDialog/PluginEntryRender.tsx
@@ -8,7 +8,7 @@ import {
     useCompositionContext,
 } from '@masknet/plugin-infra/content-script'
 import { DialogContent } from '@mui/material'
-import { alpha, makeStyles  } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import { ClickableChip, GrantPermissions, InjectedDialog, usePluginHostPermissionCheck } from '@masknet/shared'
 import { EMPTY_LIST, PluginID } from '@masknet/shared-base'
 import { ErrorBoundary } from '@masknet/shared-base-ui'
diff --git a/packages/shared/src/UI/components/CompositionDialog/TypedMessageEditor.tsx b/packages/shared/src/UI/components/CompositionDialog/TypedMessageEditor.tsx
index 8c5f54c7bc5d..d7a9f0737643 100644
--- a/packages/shared/src/UI/components/CompositionDialog/TypedMessageEditor.tsx
+++ b/packages/shared/src/UI/components/CompositionDialog/TypedMessageEditor.tsx
@@ -6,7 +6,7 @@ import {
     type SerializableTypedMessages,
 } from '@masknet/typed-message'
 import { editTypedMessageMeta } from '@masknet/typed-message-react'
-import { alpha, makeStyles  } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import { InputBase, Alert, Button, inputBaseClasses } from '@mui/material'
 import { useCallback, useImperativeHandle, useState, useRef, memo, useMemo, useEffect, type RefAttributes } from 'react'
 import { BadgeRenderer } from './BadgeRenderer.js'
diff --git a/packages/shared/src/UI/components/FungibleTokenInput/UI.tsx b/packages/shared/src/UI/components/FungibleTokenInput/UI.tsx
index c2d24b6b8341..a36d6345b9c8 100644
--- a/packages/shared/src/UI/components/FungibleTokenInput/UI.tsx
+++ b/packages/shared/src/UI/components/FungibleTokenInput/UI.tsx
@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
-import { alpha, makeStyles  } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { useNetworkContext } from '@masknet/web3-hooks-base'
 import { formatBalance } from '@masknet/web3-shared-base'
diff --git a/packages/shared/src/UI/components/MaskPluginWrapper/index.tsx b/packages/shared/src/UI/components/MaskPluginWrapper/index.tsx
index eb4dad535208..2ce24cde28e3 100644
--- a/packages/shared/src/UI/components/MaskPluginWrapper/index.tsx
+++ b/packages/shared/src/UI/components/MaskPluginWrapper/index.tsx
@@ -94,12 +94,8 @@ export function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
         const publisherNode = (
             <Typography
                 variant="body1"
-                sx={{
-                    fontSize: 14,
-                    fontWeight: '700',
-                }}
-                component="div"
-                color={theme.vars.palette.maskColor.textPluginColor}>
+                sx={{ color: theme.vars.palette.maskColor.textPluginColor, fontSize: 14, fontWeight: '700' }}
+                component="div">
                 {publisher}
             </Typography>
         )
@@ -135,13 +131,8 @@ export function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
                 )}
                 <Typography
                     variant="body1"
-                    sx={{
-                        fontSize: 16,
-                        fontWeight: 700,
-                        marginLeft: 0.5,
-                    }}
-                    component="div"
-                    color={theme.vars.palette.maskColor.main}>
+                    sx={{ color: theme.vars.palette.maskColor.main, fontSize: 16, fontWeight: 700, marginLeft: 0.5 }}
+                    component="div">
                     {wrapperProps?.title ?? title ?? <Trans>Default</Trans>}
                 </Typography>
                 <div className={classes.publish}>{publisherInfo}</div>
diff --git a/packages/shared/src/UI/components/PluginCardFrame/index.tsx b/packages/shared/src/UI/components/PluginCardFrame/index.tsx
index 7ea545568695..5a2f8d61de40 100644
--- a/packages/shared/src/UI/components/PluginCardFrame/index.tsx
+++ b/packages/shared/src/UI/components/PluginCardFrame/index.tsx
@@ -52,7 +52,7 @@ export function PluginCardFrameMini({ icon, title, provider, providerLink, child
     const PluginName = (
         <Stack className={classes.title} direction="row">
             {icon ?? <Icons.Web3Profile className={classes.web3Icon} />}
-            <Typography sx={{ fontSize: 16, fontWeight: 700 }} color={theme.vars.palette.maskColor.main}>
+            <Typography sx={{ color: theme.vars.palette.maskColor.main, fontSize: 16, fontWeight: 700 }}>
                 {title ?? <Trans>Web3 Profile</Trans>}
             </Typography>
         </Stack>
diff --git a/packages/shared/src/UI/components/PriceChange/index.tsx b/packages/shared/src/UI/components/PriceChange/index.tsx
index 5b00a50c02bd..3921c3cd3b6c 100644
--- a/packages/shared/src/UI/components/PriceChange/index.tsx
+++ b/packages/shared/src/UI/components/PriceChange/index.tsx
@@ -39,7 +39,7 @@ export const PriceChange = memo(function PriceChange({ change, loading, ...rest
             {change ?
                 <Icons.ArrowDrop size={16} style={{ color, transform: change > 0 ? 'rotate(180deg)' : '' }} />
             :   null}
-            <Typography className={classes.value} color={color}>
+            <Typography className={classes.value} sx={{ color: color }}>
                 {change ? `${change.toFixed(2)}%` : '--'}
             </Typography>
         </Box>
diff --git a/packages/shared/src/UI/components/ProfileTabContent/WalletSettingsEntry.tsx b/packages/shared/src/UI/components/ProfileTabContent/WalletSettingsEntry.tsx
index f60dc4ebeabd..8bffcdf93eb8 100644
--- a/packages/shared/src/UI/components/ProfileTabContent/WalletSettingsEntry.tsx
+++ b/packages/shared/src/UI/components/ProfileTabContent/WalletSettingsEntry.tsx
@@ -26,7 +26,7 @@ export const WalletSettingsEntry = memo(function WalletSettingsEntry() {
     return (
         <>
             <Stack sx={{ flex: 1 }}>
-                <Typography sx={{ fontWeight: 400, fontSize: 14 }} color={theme.vars.palette.maskColor.second}>
+                <Typography sx={{ color: theme.vars.palette.maskColor.second, fontWeight: 400, fontSize: 14 }}>
                     <Trans>Please select the wallet to activate the function after saving the settings.</Trans>
                 </Typography>
             </Stack>
diff --git a/packages/shared/src/UI/components/TokenSecurity/index.tsx b/packages/shared/src/UI/components/TokenSecurity/index.tsx
index 3fca2aa01449..e4360c6c6e49 100644
--- a/packages/shared/src/UI/components/TokenSecurity/index.tsx
+++ b/packages/shared/src/UI/components/TokenSecurity/index.tsx
@@ -37,10 +37,7 @@ export const TokenSecurityBar = memo<TokenCardProps>(({ tokenSecurity }) => {
                     {DefineMapping[SecurityMessageLevel.High].icon(14)}
                     <Typography
                         component="span"
-                        sx={{
-                            fontSize: '12px',
-                        }}
-                        color={DefineMapping[SecurityMessageLevel.High].titleColor}>
+                        sx={{ color: DefineMapping[SecurityMessageLevel.High].titleColor, fontSize: '12px' }}>
                         <Plural one="# Risky item" other="# Risky items" value={riskyFactors} />
                     </Typography>
                 </Stack>
@@ -58,10 +55,7 @@ export const TokenSecurityBar = memo<TokenCardProps>(({ tokenSecurity }) => {
                     {DefineMapping[SecurityMessageLevel.Medium].icon(14)}
                     <Typography
                         component="span"
-                        sx={{
-                            fontSize: '12px',
-                        }}
-                        color={DefineMapping[SecurityMessageLevel.Medium].titleColor}>
+                        sx={{ color: DefineMapping[SecurityMessageLevel.Medium].titleColor, fontSize: '12px' }}>
                         <Plural one="# Attention item" other="# Attention items" value={attentionFactors} />
                     </Typography>
                 </Stack>
diff --git a/packages/shared/src/UI/components/WalletStatusBar/PluginWalletStatusBar.tsx b/packages/shared/src/UI/components/WalletStatusBar/PluginWalletStatusBar.tsx
index c95dfb7c8ce3..e660ef0b5743 100644
--- a/packages/shared/src/UI/components/WalletStatusBar/PluginWalletStatusBar.tsx
+++ b/packages/shared/src/UI/components/WalletStatusBar/PluginWalletStatusBar.tsx
@@ -1,7 +1,7 @@
 import { memo, type PropsWithChildren, useCallback, useMemo } from 'react'
 import { Box, Button } from '@mui/material'
 import { Icons } from '@masknet/icons'
-import { alpha, makeStyles  } from '@masknet/theme'
+import { alpha, makeStyles } from '@masknet/theme'
 import {
     useNetworkContext,
     useProviderDescriptor,
diff --git a/packages/shared/src/UI/components/WalletStatusBar/WalletDescription.tsx b/packages/shared/src/UI/components/WalletStatusBar/WalletDescription.tsx
index 91c0059c391b..079628333c0a 100644
--- a/packages/shared/src/UI/components/WalletStatusBar/WalletDescription.tsx
+++ b/packages/shared/src/UI/components/WalletStatusBar/WalletDescription.tsx
@@ -1,4 +1,4 @@
-import { alpha, makeStyles, LoadingBase  } from '@masknet/theme'
+import { alpha, makeStyles, LoadingBase } from '@masknet/theme'
 import { memo } from 'react'
 import { Box, Link, Typography } from '@mui/material'
 import { CopyButton, WalletIcon } from '@masknet/shared'
diff --git a/packages/shared/src/UI/components/WalletStatusBox/TransactionList.tsx b/packages/shared/src/UI/components/WalletStatusBox/TransactionList.tsx
index 1e40372c92b0..b684a187d0df 100644
--- a/packages/shared/src/UI/components/WalletStatusBox/TransactionList.tsx
+++ b/packages/shared/src/UI/components/WalletStatusBox/TransactionList.tsx
@@ -131,7 +131,10 @@ function Transaction({ chainId, transaction: tx, onClear = noop, ...rest }: Tran
                         sx={{ fontWeight: 500 }}>
                         {formatted}
                     </Typography>
-                    <Typography className={classes.timestamp} variant="body1" color={theme.vars.palette.text.secondary}>
+                    <Typography
+                        className={classes.timestamp}
+                        variant="body1"
+                        sx={{ color: theme.vars.palette.text.secondary }}>
                         {format(tx.createdAt, 'yyyy.MM.dd HH:mm')}
                     </Typography>
                 </Stack>
@@ -152,8 +155,12 @@ function Transaction({ chainId, transaction: tx, onClear = noop, ...rest }: Tran
             </Grid>
             <Grid className={classes.cell} size={{ md: 2 }} sx={{ justifyContent: 'center' }}>
                 <Typography
-                    sx={{ fontWeight: 400, justifyContent: 'center', fontSize: 14 }}
-                    color={statusTextColorMap[txStatus]}>
+                    sx={{
+                        color: statusTextColorMap[txStatus],
+                        fontWeight: 400,
+                        justifyContent: 'center',
+                        fontSize: 14,
+                    }}>
                     {statusTextMap[txStatus]}
                 </Typography>
             </Grid>
diff --git a/packages/shared/src/UI/modals/ConnectWalletModal/index.tsx b/packages/shared/src/UI/modals/ConnectWalletModal/index.tsx
index 8899c1d7b826..a5d9de219bfc 100644
--- a/packages/shared/src/UI/modals/ConnectWalletModal/index.tsx
+++ b/packages/shared/src/UI/modals/ConnectWalletModal/index.tsx
@@ -170,11 +170,11 @@ export function ConnectWalletModal({
                 </Box>
                 <Typography
                     sx={{
+                        color: error && !loading ? maskColor.danger : undefined,
                         fontWeight: 700,
                         fontSize: 16,
                         mt: 1.5,
-                    }}
-                    color={error && !loading ? maskColor.danger : undefined}>
+                    }}>
                     <Trans>Requesting Connection</Trans>
                 </Typography>
                 <Typography sx={{ fontWeight: 400, mt: 1.5 }}>
diff --git a/packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx b/packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx
index 2487655bf045..cb47c71f2f3d 100644
--- a/packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx
+++ b/packages/shared/src/UI/modals/SelectProviderModal/PluginProviderRender.tsx
@@ -201,7 +201,7 @@ export const PluginProviderRender = memo(function PluginProviderRender({
             </section>
             {unavailableProviders.length ?
                 <>
-                    <Typography sx={{ mt: 2, fontSize: 14 }} color={theme.vars.palette.maskColor.second}>
+                    <Typography sx={{ color: theme.vars.palette.maskColor.second, mt: 2, fontSize: 14 }}>
                         <Trans>The following wallets are not installed or in conflict with others</Trans>
                     </Typography>
                     <section className={classes.section}>
diff --git a/packages/theme/src/Components/TextField/index.tsx b/packages/theme/src/Components/TextField/index.tsx
index b42e72b6d574..072f5d3cbd05 100644
--- a/packages/theme/src/Components/TextField/index.tsx
+++ b/packages/theme/src/Components/TextField/index.tsx
@@ -64,10 +64,7 @@ const useStyles = makeStyles()((theme) => ({
             borderColor: alpha(theme.vars.palette.maskColor.redMain, 0.8),
         },
         [`&.${formHelperTextClasses.focused}`]: {
-            borderColor:
-                Sniffings.is_dashboard_page ?
-                    alpha(theme.vars.palette.maskColor.primary, 0.5)
-                :   'transparent',
+            borderColor: Sniffings.is_dashboard_page ? alpha(theme.vars.palette.maskColor.primary, 0.5) : 'transparent',
         },
     },
     inputDisabled: {
diff --git a/packages/theme/src/Theme/index.ts b/packages/theme/src/Theme/index.ts
index cd1b4fbbafcf..75f12eaed795 100644
--- a/packages/theme/src/Theme/index.ts
+++ b/packages/theme/src/Theme/index.ts
@@ -1,4 +1,4 @@
 export { MaskColors, alpha, DarkMaskColors, LightMaskColors } from './colors.js'
-export { MaskThemeProvider, useMaskIconPalette, type MaskThemeProviderProps, usePalette } from './Provider.js'
+export { MaskThemeProvider, type MaskThemeProviderProps, usePalette } from './Provider.js'
 export { MaskTheme } from './theme.js'
 export { fromRGB, getBackgroundColor, shade, toRGB } from './color-tools.js'

From 9653e7a51ac614289744ed17f35279886e5bb65a Mon Sep 17 00:00:00 2001
From: Jack Works <5390719+Jack-Works@users.noreply.github.com>
Date: Wed, 22 Jul 2026 00:00:00 +0000
Subject: [PATCH 07/15] fix: shadow root

---
 .../components/useMaskSiteAdaptorMixedTheme.ts        | 11 +++++++++--
 .../dashboard/pages/SetupPersona/Mnemonic/index.tsx   |  2 +-
 packages/theme/src/ShadowRoot/ShadowRootSetup.tsx     |  5 ++++-
 .../theme/src/ShadowRoot/ShadowRootStyleProvider.tsx  |  7 ++++---
 packages/theme/src/ShadowRoot/ShadowRootStyleSheet.ts |  5 ++++-
 5 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/mask/content-script/components/useMaskSiteAdaptorMixedTheme.ts b/packages/mask/content-script/components/useMaskSiteAdaptorMixedTheme.ts
index fac19c5d1844..037a51ce3d19 100644
--- a/packages/mask/content-script/components/useMaskSiteAdaptorMixedTheme.ts
+++ b/packages/mask/content-script/components/useMaskSiteAdaptorMixedTheme.ts
@@ -2,13 +2,20 @@ import { useMemo } from 'react'
 import { unstable_createMuiStrictModeTheme } from '@mui/material'
 import { activatedSiteAdaptorUI } from '../site-adaptor-infra/index.js'
 import { useThemeSettings } from './DataSource/useActivatedUI.js'
+import { MaskTheme } from '@masknet/theme'
 
 export function useMaskSiteAdaptorMixedTheme() {
     const { mode, color, size } = useThemeSettings()
     const { getTheme } = activatedSiteAdaptorUI!.customization
     const siteAdaptorMixedTheme = useMemo(() => {
-        if (!getTheme) return
-        return unstable_createMuiStrictModeTheme(getTheme({ mode, color, size }))
+        const theme = getTheme ? getTheme({ mode, color, size }) : MaskTheme
+        return unstable_createMuiStrictModeTheme({
+            ...theme,
+            cssVariables: {
+                rootSelector: ':host',
+                colorSchemeSelector: ':host-context([data-%s])',
+            },
+        })
     }, [getTheme, mode, color, size])
     return siteAdaptorMixedTheme
 }
diff --git a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx
index d0fe2f0dabcf..1428ca0cc50a 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx
@@ -164,7 +164,7 @@ export const Component = memo(function SignUpMnemonic() {
             </Stack>
             <Words words={words} />
             <Box className={classes.buttonGroup}>
-                <IconButton className={classes.iconButton} onClick={handleDownload}>
+                <IconButton size="small" className={classes.iconButton} onClick={handleDownload}>
                     <Icons.Download2 size={18} />
                 </IconButton>
                 <IconButton className={classes.iconButton}>
diff --git a/packages/theme/src/ShadowRoot/ShadowRootSetup.tsx b/packages/theme/src/ShadowRoot/ShadowRootSetup.tsx
index ea64fc39504d..ba3144f6ac1a 100644
--- a/packages/theme/src/ShadowRoot/ShadowRootSetup.tsx
+++ b/packages/theme/src/ShadowRoot/ShadowRootSetup.tsx
@@ -2,6 +2,7 @@ import { ObservableMap } from '@masknet/shared-base'
 import { StrictMode, useSyncExternalStore, type JSX } from 'react'
 import { createRoot } from 'react-dom/client'
 import { PreventShadowRootEventPropagationListContext } from './Contexts.js'
+import { ShadowRootStyleProvider } from './ShadowRootStyleProvider.js'
 
 /**
  * This container is used to attach the single React root.
@@ -31,7 +32,9 @@ export function setupReactShadowRootEnvironment(
     // Note: This React Root does not expect to have any direct DOM children.
     createRoot(globalContainer).render(
         <StrictMode>
-            <MountingPoint wrapJSX={wrapJSX} preventPropagationList={preventEventPropagationList} />
+            <ShadowRootStyleProvider preventPropagation={false} shadow={portalContainer}>
+                <MountingPoint wrapJSX={wrapJSX} preventPropagationList={preventEventPropagationList} />
+            </ShadowRootStyleProvider>
         </StrictMode>,
     )
     return portalContainer
diff --git a/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx b/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx
index 096e271bd66a..55f33e33cce6 100644
--- a/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx
+++ b/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx
@@ -18,7 +18,8 @@ interface ShadowRootStyleProviderProps extends React.PropsWithChildren {
  */
 export function ShadowRootStyleProvider(props: ShadowRootStyleProviderProps) {
     const { shadow, children } = props
-    const [cache, sheets] = getShadowRootEmotionCache(shadow)
+    const parentSheets = useContext(StyleSheetsContext)
+    const [cache, sheets] = getShadowRootEmotionCache(shadow, parentSheets)
 
     const preventEventPropagationList = useContext(PreventShadowRootEventPropagationListContext)
     useEffect(() => {
@@ -38,7 +39,7 @@ export function ShadowRootStyleProvider(props: ShadowRootStyleProviderProps) {
 
 const styleSheetMap = new WeakMap<ShadowRoot, [EmotionCache, StyleSheet]>()
 
-function getShadowRootEmotionCache(shadow: ShadowRoot) {
+function getShadowRootEmotionCache(shadow: ShadowRoot, parentSheets: StyleSheet | null) {
     if (styleSheetMap.has(shadow)) return styleSheetMap.get(shadow)!
 
     // emotion doesn't allow numbers appears in the key
@@ -46,7 +47,7 @@ function getShadowRootEmotionCache(shadow: ShadowRoot) {
     const key = 'css-' + instanceID
 
     const muiEmotionCache = createEmotionCache({ key })
-    const muiStyleSheet = new StyleSheet({ key, container: shadow })
+    const muiStyleSheet = new StyleSheet({ key, container: shadow, parent: parentSheets })
     // @ts-expect-error internal api?
     muiEmotionCache.sheet = muiStyleSheet
 
diff --git a/packages/theme/src/ShadowRoot/ShadowRootStyleSheet.ts b/packages/theme/src/ShadowRoot/ShadowRootStyleSheet.ts
index 06096174b8ee..a586d57c7d8e 100644
--- a/packages/theme/src/ShadowRoot/ShadowRootStyleSheet.ts
+++ b/packages/theme/src/ShadowRoot/ShadowRootStyleSheet.ts
@@ -17,9 +17,10 @@ export class StyleSheet {
     readonly container = document.createElement('div')
     readonly isSpeedy = false
     readonly key: string
-    constructor(options: { key: string; container: HTMLElement | ShadowRoot }) {
+    constructor(options: { key: string; container: HTMLElement | ShadowRoot; parent?: StyleSheet | null }) {
         this.key = options.key
         if (options.container instanceof ShadowRoot) {
+            this.parent = options.parent
             this.implementation =
                 'adoptedStyleSheets' in Document.prototype ? new ConstructableStyleSheet() : new SynchronizeStyleSheet()
             this.addContainer(options.container)
@@ -41,6 +42,7 @@ export class StyleSheet {
         }
     }
     addContainer(container: ShadowRoot) {
+        this.parent?.addContainer(container)
         this.implementation.addContainer(container, this.key)
     }
     hydrate() {
@@ -69,6 +71,7 @@ export class StyleSheet {
         this._alreadyInsertedOrderInsensitiveRule = false
     }
     private implementation!: ConstructableStyleSheet | SynchronizeStyleSheet
+    private parent?: StyleSheet | null
     private _alreadyInsertedOrderInsensitiveRule = false
 }
 

From bc2839b908130f3db68b1f1c3749e21f3d4189b5 Mon Sep 17 00:00:00 2001
From: Jack Works <5390719+Jack-Works@users.noreply.github.com>
Date: Wed, 22 Jul 2026 00:00:00 +0000
Subject: [PATCH 08/15] enable css layers

---
 .../facebook.com/injection/ToolbarUI.tsx      | 47 +++++-----
 .../minds.com/injection/ToolboxHint_UI.tsx    | 88 +++++++++----------
 .../twitter.com/injection/ToolboxHint_UI.tsx  | 64 +++++++-------
 packages/mask/dashboard/Dashboard.tsx         |  2 +-
 packages/mask/popups/Popup.tsx                |  2 +-
 .../Wallet/components/WalletAssets/index.tsx  | 22 ++---
 .../src/components/ErrorBoundary/CrashUI.tsx  | 58 ++++++------
 .../ShadowRoot/ShadowRootStyleProvider.tsx    | 10 +++
 packages/theme/src/Theme/theme.ts             |  2 +-
 9 files changed, 149 insertions(+), 146 deletions(-)

diff --git a/packages/mask/content-script/site-adaptors/facebook.com/injection/ToolbarUI.tsx b/packages/mask/content-script/site-adaptors/facebook.com/injection/ToolbarUI.tsx
index cda9856fac50..48226a3dff8d 100644
--- a/packages/mask/content-script/site-adaptors/facebook.com/injection/ToolbarUI.tsx
+++ b/packages/mask/content-script/site-adaptors/facebook.com/injection/ToolbarUI.tsx
@@ -2,24 +2,20 @@ import { styled, ListItemButton, Typography, ListItemIcon } from '@mui/material'
 import { ToolboxHintUnstyled } from '../../../components/InjectedComponents/ToolboxUnstyled.js'
 import { useMemo } from 'react'
 
-const Container = styled('div')`
-    padding: 0 4px;
-`
-const ContainerHasNavBar = styled('div')`
-    padding: 0 8px;
-`
+const Container = styled('div')({ padding: '0 4px' })
+const ContainerHasNavBar = styled('div')({ padding: '0 8px' })
 
-const Item = styled(ListItemButton)`
-    border-radius: 8px;
-    padding-left: 10px;
-`
-const Text = styled(Typography)`
-    font-size: 0.9375rem;
-    /* This CSS variable is inherit from Facebook. */
-    color: var(--primary-text);
-    font-weight: 500;
-    padding-left: 0.1rem;
-`
+const Item = styled(ListItemButton)({
+    borderRadius: 8,
+    paddingLeft: 10,
+})
+const Text = styled(Typography)({
+    fontSize: '0.9375rem',
+    // This CSS variable is inherited from Facebook.
+    color: 'var(--primary-text)',
+    fontWeight: 500,
+    paddingLeft: '0.1rem',
+})
 const Icon = styled(ListItemIcon, {
     shouldForwardProp(name) {
         return name !== 'hasTopNavBar' && name !== 'hasSpecificLeftRailStartBar'
@@ -27,16 +23,15 @@ const Icon = styled(ListItemIcon, {
 })<{
     hasTopNavBar: boolean
     hasSpecificLeftRailStartBar: boolean
-}>`
-    min-width: ${(props) =>
-        props.hasSpecificLeftRailStartBar ?
-            props.hasTopNavBar ?
-                '46px'
+}>(({ hasSpecificLeftRailStartBar, hasTopNavBar }) => ({
+    minWidth:
+        hasSpecificLeftRailStartBar ?
+            hasTopNavBar ? 46
             :   'auto'
-        :   '24px'};
-    margin-right: ${(props) => (props.hasTopNavBar && props.hasSpecificLeftRailStartBar ? '0px' : '12px')};
-    padding-left: 4px;
-`
+        :   24,
+    marginRight: hasTopNavBar && hasSpecificLeftRailStartBar ? 0 : 12,
+    paddingLeft: 4,
+}))
 
 export function ToolboxAtFacebook(props: {
     category: 'wallet' | 'application'
diff --git a/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx b/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx
index 81df5a826b16..726b40945aaf 100644
--- a/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx
+++ b/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx
@@ -3,51 +3,49 @@ import { Box, styled, ListItemButton, Typography, ListItemIcon, useMediaQuery }
 
 const mindsBreakPoint = 1221 /** px */
 
-const Container = styled(Box)`
-    height: 45px;
-    margin-bottom: 10px;
-    padding-left: 10px;
-`
-const Item = styled(ListItemButton)`
-    border-radius: 8px;
-    height: 45px;
-    padding: 4px 12px 4px 0;
-    color: var(--nav-text-color, #43434d) !important;
-    &:hover {
-        background: unset;
-        color: var(--nav-text-color, #43434d);
-    }
-    [data-icon] {
-        color: #43434d;
-        --icon-color: #43434d;
-    }
-    [data-icon='Wallet'] {
-        color: var(--nav-text-color, #43434d);
-        --icon-color: var(--nav-text-color, #43434d);
-    }
-    @media screen and (max-width: ${mindsBreakPoint}px) {
-        padding: 12px 0;
-        justify-content: center;
-    }
-`
-const Text = styled(Typography)`
-    font-size: 0.9375rem;
-    font-weight: 500;
-    color: inherit !important;
-    /* Minds font */
-    font-family: Roboto, Helvetica, sans-serif;
-    font-weight: 700;
-    font-size: 19px;
-    line-height: 44px;
-`
-const Icon = styled(ListItemIcon)`
-    color: inherit;
-    min-width: 45px;
-    margin-left: 6px;
-    @media screen and (max-width: ${mindsBreakPoint}px) {
-        min-width: 0;
-    }
-`
+const Container = styled(Box)({
+    height: 45,
+    marginBottom: 10,
+    paddingLeft: 10,
+})
+const Item = styled(ListItemButton)({
+    borderRadius: 8,
+    height: 45,
+    padding: '4px 12px 4px 0',
+    color: 'var(--nav-text-color, #43434d) !important',
+    '&:hover': {
+        background: 'unset',
+        color: 'var(--nav-text-color, #43434d)',
+    },
+    '[data-icon]': {
+        color: '#43434d',
+        '--icon-color': '#43434d',
+    },
+    "[data-icon='Wallet']": {
+        color: 'var(--nav-text-color, #43434d)',
+        '--icon-color': 'var(--nav-text-color, #43434d)',
+    },
+    [`@media screen and (max-width: ${mindsBreakPoint}px)`]: {
+        padding: '12px 0',
+        justifyContent: 'center',
+    },
+})
+const Text = styled(Typography)({
+    color: 'inherit !important',
+    // Minds font
+    fontFamily: 'Roboto, Helvetica, sans-serif',
+    fontWeight: 700,
+    fontSize: 19,
+    lineHeight: '44px',
+})
+const Icon = styled(ListItemIcon)({
+    color: 'inherit',
+    minWidth: 45,
+    marginLeft: 6,
+    [`@media screen and (max-width: ${mindsBreakPoint}px)`]: {
+        minWidth: 0,
+    },
+})
 
 export function ToolboxHintAtMinds(props: { category: 'wallet' | 'application' }) {
     const mini = useMediaQuery(`(max-width: ${mindsBreakPoint}px)`)
diff --git a/packages/mask/content-script/site-adaptors/twitter.com/injection/ToolboxHint_UI.tsx b/packages/mask/content-script/site-adaptors/twitter.com/injection/ToolboxHint_UI.tsx
index 1a7796c715e7..1ac3b88faf54 100644
--- a/packages/mask/content-script/site-adaptors/twitter.com/injection/ToolboxHint_UI.tsx
+++ b/packages/mask/content-script/site-adaptors/twitter.com/injection/ToolboxHint_UI.tsx
@@ -11,38 +11,38 @@ import { Trans } from '@lingui/react/macro'
 const HORIZONTAL_BREAKPOINT = 1265
 const VERTICAL_BREAKPOINT = 855
 
-const Container = styled('div')`
-    cursor: pointer;
-    padding: 4px 0;
-    @media screen and (max-height: ${VERTICAL_BREAKPOINT}px) {
-        padding: 0;
-    }
-`
-const ListItem = styled(ListItemButton)`
-    border-radius: 9999px;
-    display: inline-flex;
-    &:hover {
-        background: rgba(15, 20, 25, 0.1);
-        ${({ theme }) => theme.applyStyles('dark', { background: 'rgba(217, 217, 217, 0.1)' })}
-    }
-    /* twitter break point */
-    @media screen and (max-width: ${HORIZONTAL_BREAKPOINT}px) {
-        height: 50px;
-    }
-`
-const Text = styled(Typography)`
-    margin-right: 16px;
-    font-family: inherit;
-    font-weight: 400;
-    white-space: nowrap;
-    color: rgb(15, 20, 25);
-    ${({ theme }) => theme.applyStyles('dark', { color: 'rgb(216, 216, 216)' })}
-`
-const Icon = styled(ListItemIcon)`
-    color: rgb(15, 20, 25);
-    ${({ theme }) => theme.applyStyles('dark', { color: 'rgb(216, 216, 216)' })}
-    min-width: 0;
-`
+const Container = styled('div')({
+    cursor: 'pointer',
+    padding: '4px 0',
+    [`@media screen and (max-height: ${VERTICAL_BREAKPOINT}px)`]: {
+        padding: 0,
+    },
+})
+const ListItem = styled(ListItemButton)(({ theme }) => ({
+    borderRadius: 9999,
+    display: 'inline-flex',
+    '&:hover': {
+        background: 'rgba(15, 20, 25, 0.1)',
+        ...theme.applyStyles('dark', { background: 'rgba(217, 217, 217, 0.1)' }),
+    },
+    // Twitter breakpoint
+    [`@media screen and (max-width: ${HORIZONTAL_BREAKPOINT}px)`]: {
+        height: 50,
+    },
+}))
+const Text = styled(Typography)(({ theme }) => ({
+    marginRight: 16,
+    fontFamily: 'inherit',
+    fontWeight: 400,
+    whiteSpace: 'nowrap',
+    color: 'rgb(15, 20, 25)',
+    ...theme.applyStyles('dark', { color: 'rgb(216, 216, 216)' }),
+}))
+const Icon = styled(ListItemIcon)(({ theme }) => ({
+    color: 'rgb(15, 20, 25)',
+    ...theme.applyStyles('dark', { color: 'rgb(216, 216, 216)' }),
+    minWidth: 0,
+}))
 
 export function ToolboxHintAtTwitter(props: { category: 'wallet' | 'application' }) {
     const { textMarginLeft, itemPadding, iconSize } = useSideBarNativeItemStyleVariants()
diff --git a/packages/mask/dashboard/Dashboard.tsx b/packages/mask/dashboard/Dashboard.tsx
index 559bbdf16353..b8dd30960e5a 100644
--- a/packages/mask/dashboard/Dashboard.tsx
+++ b/packages/mask/dashboard/Dashboard.tsx
@@ -38,7 +38,7 @@ export default function Dashboard() {
     return jsxCompose(
         <RootWeb3ContextProvider enforceEVM />,
         <LinguiProviderHMR i18n={i18n} />,
-        <StyledEngineProvider injectFirst />,
+        <StyledEngineProvider injectFirst enableCssLayer />,
         <MaskThemeProvider palette={mode} localization={localization} />,
         <DialogStackingProvider />,
         <UserContext.Provider />,
diff --git a/packages/mask/popups/Popup.tsx b/packages/mask/popups/Popup.tsx
index 0ba49e27d38d..fa4b5ae34205 100644
--- a/packages/mask/popups/Popup.tsx
+++ b/packages/mask/popups/Popup.tsx
@@ -151,7 +151,7 @@ function PageUIProvider({ children }: PageUIProviderProps) {
         <Suspense />,
         // Provide the minimal environment (i18n context) for CrashUI in page mode
         <LinguiProviderHMR i18n={i18n} />,
-        <StyledEngineProvider injectFirst />,
+        <StyledEngineProvider injectFirst enableCssLayer />,
         <ErrorBoundary />,
 
         <Suspense />,
diff --git a/packages/mask/popups/pages/Wallet/components/WalletAssets/index.tsx b/packages/mask/popups/pages/Wallet/components/WalletAssets/index.tsx
index f0cbecdd3d59..62cc07de2ee5 100644
--- a/packages/mask/popups/pages/Wallet/components/WalletAssets/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/WalletAssets/index.tsx
@@ -81,17 +81,17 @@ const useStyles = makeStyles()((theme) => {
     }
 })
 
-const StyledTabList = styled(TabList)`
-    &.${tabsClasses.root} {
-        min-height: unset;
-        background-color: transparent;
-        padding: 0 16px;
-        flex-shrink: 0;
-    }
-    & .${tabsClasses.indicator} {
-        display: none;
-    }
-`
+const StyledTabList = styled(TabList)({
+    [`&.${tabsClasses.root}`]: {
+        minHeight: 'unset',
+        backgroundColor: 'transparent',
+        padding: '0 16px',
+        flexShrink: 0,
+    },
+    [`& .${tabsClasses.indicator}`]: {
+        display: 'none',
+    },
+})
 
 export const Component = memo(function WalletAssets() {
     const navigate = useNavigate()
diff --git a/packages/shared-base-ui/src/components/ErrorBoundary/CrashUI.tsx b/packages/shared-base-ui/src/components/ErrorBoundary/CrashUI.tsx
index 8066d6b6035f..a2a2922bf6c0 100644
--- a/packages/shared-base-ui/src/components/ErrorBoundary/CrashUI.tsx
+++ b/packages/shared-base-ui/src/components/ErrorBoundary/CrashUI.tsx
@@ -89,36 +89,36 @@ Error stack:
         </Root>
     )
 }
-const Root = styled('div')`
-    overflow-x: auto;
-    flex: 1;
-    width: 100%;
-    contain: paint;
-    padding: 8px;
-`
+const Root = styled('div')({
+    overflowX: 'auto',
+    flex: 1,
+    width: '100%',
+    contain: 'paint',
+    padding: 8,
+})
 
-const ErrorTitle = styled('div')`
-    user-select: text;
-    margin-bottom: 8px;
-`
+const ErrorTitle = styled('div')({
+    userSelect: 'text',
+    marginBottom: 8,
+})
 
-const ErrorStack = styled('div')`
-    user-select: text;
-    overflow-x: auto;
-    margin-top: 16px;
-`
+const ErrorStack = styled('div')({
+    userSelect: 'text',
+    overflowX: 'auto',
+    marginTop: 16,
+})
 
-const ActionArea = styled('div')`
-    display: flex;
-    gap: 8px;
-    @media screen and (max-width: 500px) {
-        flex-direction: column;
-        gap: 8px;
-    }
-`
+const ActionArea = styled('div')({
+    display: 'flex',
+    gap: 8,
+    '@media screen and (max-width: 500px)': {
+        flexDirection: 'column',
+        gap: 8,
+    },
+})
 
-const IconButtonContainer = styled('div')`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-`
+const IconButtonContainer = styled('div')({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+})
diff --git a/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx b/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx
index 55f33e33cce6..3a0116c8b749 100644
--- a/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx
+++ b/packages/theme/src/ShadowRoot/ShadowRootStyleProvider.tsx
@@ -47,6 +47,16 @@ function getShadowRootEmotionCache(shadow: ShadowRoot, parentSheets: StyleSheet
     const key = 'css-' + instanceID
 
     const muiEmotionCache = createEmotionCache({ key })
+    // hack to enable CSS @layer
+    // see https://github.com/emotion-js/emotion/issues/3134
+    // impl: https://github.com/mui/material-ui/pull/45428/changes#diff-b0c45a41eb00f494af85ef7b71794928afbab0332ebbb410f3a91e0e9bebc797R84
+    const insert = muiEmotionCache.insert
+    muiEmotionCache.insert = (...args) => {
+        if (!/^@layer\s+[^{]*$/u.test(args[1].styles)) {
+            args[1].styles = `@layer mui {${args[1].styles}}`
+        }
+        return insert(...args)
+    }
     const muiStyleSheet = new StyleSheet({ key, container: shadow, parent: parentSheets })
     // @ts-expect-error internal api?
     muiEmotionCache.sheet = muiStyleSheet
diff --git a/packages/theme/src/Theme/theme.ts b/packages/theme/src/Theme/theme.ts
index b2e3238099a7..7731c50c8afe 100644
--- a/packages/theme/src/Theme/theme.ts
+++ b/packages/theme/src/Theme/theme.ts
@@ -73,7 +73,7 @@ export const MaskTheme = unstable_createMuiStrictModeTheme({
             styleOverrides: { root: { backgroundImage: 'unset' } },
         },
     },
-    // modularCssLayers: 'mui',
+    modularCssLayers: true,
     cssVariables: {
         colorSchemeSelector: 'data',
     },

From 290d03c5caab391c127d77a26836bf4a75dd33cf Mon Sep 17 00:00:00 2001
From: Jack-Works <Jack-Works@users.noreply.github.com>
Date: Thu, 23 Jul 2026 03:55:23 +0000
Subject: [PATCH 09/15] fix: eslint

---
 packages/shared/src/UI/components/PriceChange/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/UI/components/PriceChange/index.tsx b/packages/shared/src/UI/components/PriceChange/index.tsx
index 3921c3cd3b6c..c02cb56d9498 100644
--- a/packages/shared/src/UI/components/PriceChange/index.tsx
+++ b/packages/shared/src/UI/components/PriceChange/index.tsx
@@ -39,7 +39,7 @@ export const PriceChange = memo(function PriceChange({ change, loading, ...rest
             {change ?
                 <Icons.ArrowDrop size={16} style={{ color, transform: change > 0 ? 'rotate(180deg)' : '' }} />
             :   null}
-            <Typography className={classes.value} sx={{ color: color }}>
+            <Typography className={classes.value} sx={{ color }}>
                 {change ? `${change.toFixed(2)}%` : '--'}
             </Typography>
         </Box>

From a0ece5656205922a2ff9d386bb8e35e1509a0cc4 Mon Sep 17 00:00:00 2001
From: Jack Works <5390719+Jack-Works@users.noreply.github.com>
Date: Thu, 23 Jul 2026 00:00:00 +0000
Subject: [PATCH 10/15] snackbar

---
 .vscode/settings.json                         |   3 -
 .../AutoPasteFailedDialog.tsx                 |   8 +-
 .../InjectedComponents/PageInspector.tsx      |   6 +-
 .../shadow-root/ShadowRootAttachPointRoot.tsx |   6 +-
 packages/mask/dashboard/Dashboard.tsx         |   4 +-
 .../dashboard/components/GoogleDriveLogin.tsx |  10 +-
 .../Restore/RestoreWalletFromLocal.tsx        |   6 +-
 .../BackupPreviewDialog.tsx                   |  12 +-
 .../RestoreBackupDialog.tsx                   |  20 +-
 .../CreateMaskWallet/FireflyWallet/index.tsx  |   6 +-
 .../pages/SetupPersona/Mnemonic/index.tsx     |   6 +-
 .../pages/SetupPersona/Onboarding/index.tsx   |  12 +-
 .../pages/SetupPersona/Recovery/Local.tsx     |  10 +-
 .../pages/SetupPersona/Welcome/index.tsx      |   6 +-
 .../pages/SignUp/steps/PersonaRecovery.tsx    |   6 +-
 packages/mask/package.json                    |   1 +
 packages/mask/popups/Popup.tsx                |  61 ++-
 .../PopupSnackbarProvider/index.tsx}          |  53 +--
 .../components/PrivateKeyDisplay/index.tsx    |   6 +-
 .../popups/modals/AddContactModal/index.tsx   |   6 +-
 .../ChangeBackupPasswordModal/index.tsx       |   8 +-
 .../ChangePaymentPasswordModal/index.tsx      |   6 +-
 .../popups/modals/ConnectProvider/index.tsx   |   6 +-
 .../modals/DeleteContactModal/index.tsx       |   6 +-
 .../popups/modals/EditContactModal/index.tsx  |   6 +-
 .../modals/SetBackupPasswordModal/index.tsx   |   6 +-
 .../pages/Friends/ContactCard/index.tsx       |  11 +-
 .../popups/pages/Friends/Detail/index.tsx     |   6 +-
 .../pages/Personas/AccountDetail/index.tsx    |   8 +-
 .../pages/Personas/ExportPrivateKey/index.tsx |   6 +-
 .../popups/pages/Personas/Logout/index.tsx    |   8 +-
 .../Personas/PersonaAvatarSetting/index.tsx   |  10 +-
 .../pages/Trader/useImplementRuntime.tsx      |   9 +-
 .../popups/pages/Wallet/EditNetwork/index.tsx |  14 +-
 .../pages/Wallet/Interaction/interaction.tsx  |   8 +-
 .../pages/Wallet/SetPaymentPassword/index.tsx |   6 +-
 .../popups/pages/Wallet/TokenDetail/index.tsx |   8 +-
 .../Wallet/Transfer/FungibleTokenSection.tsx  |   6 +-
 .../components/DisconnectModal/index.tsx      |   8 +-
 .../src/SiteAdaptor/FileViewer.tsx            |  14 +-
 .../src/SiteAdaptor/components/FileList.tsx   |  12 +-
 .../SiteAdaptor/hooks/useRefundCallback.tsx   |   8 +-
 .../src/SiteAdaptor/views/CustomCover.tsx     |   8 +-
 .../Snapshot/src/SiteAdaptor/VotingDialog.tsx |  50 ++-
 .../trader/contexts/RuntimeProvider.tsx       |   2 -
 .../SiteAdaptor/trader/useImplementRuntime.ts |   6 +-
 .../trader/views/BridgeConfirm.tsx            |  23 +-
 .../src/SiteAdaptor/trader/views/Confirm.tsx  |  22 +-
 .../SiteAdaptor/trader/views/Transaction.tsx  |  14 +-
 .../components/Lens/FollowLensDialog.tsx      |  10 +-
 .../src/SiteAdaptor/hooks/Lens/useFollow.tsx  |  14 +-
 .../src/SiteAdaptor/hooks/Lens/useUnfollow.ts |  12 +-
 .../src/UI/components/ChainBoundary/index.tsx |  12 +-
 .../UI/components/UploadDropArea/index.tsx    |  12 +-
 .../TransactionSnackbar.tsx                   |  36 +-
 .../WalletRiskWarning.tsx                     |   8 +-
 packages/shared/src/hooks/index.ts            |   1 -
 .../shared/src/hooks/useSnackbarCallback.tsx  | 120 ------
 .../theme/src/Components/Snackbar/index.tsx   | 399 ++++++++----------
 pnpm-lock.yaml                                |   3 +
 60 files changed, 483 insertions(+), 697 deletions(-)
 rename packages/{theme/src/Components/Snackbar/PopupSnackbar.tsx => mask/popups/components/PopupSnackbarProvider/index.tsx} (62%)
 delete mode 100644 packages/shared/src/hooks/useSnackbarCallback.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a1ce6d4fdee8..a3242877ffad 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,9 +10,6 @@
         "README.md": ".commitlintrc*, .ecrc, .node-version, .npm*, .prettier*, .unlock*, .ignore, CNAME, gulp*, LICENSE, lint-staged*, cspell*, svgo*, *.ts, crowdin*",
         "package.json": "pnpm-*.yaml, .pnpmfile.cjs"
     },
-    "editor.codeActionsOnSave": {
-        "source.fixAll": "explicit"
-    },
     "editor.tabSize": 4,
     "json.schemas": [
         {
diff --git a/packages/mask/content-script/components/InjectedComponents/AutoPasteFailedDialog.tsx b/packages/mask/content-script/components/InjectedComponents/AutoPasteFailedDialog.tsx
index 31810fceefaa..57a78672b7e1 100644
--- a/packages/mask/content-script/components/InjectedComponents/AutoPasteFailedDialog.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/AutoPasteFailedDialog.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { useCopyToClipboard } from 'react-use'
 import { format as formatDateTime } from 'date-fns'
-import { makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { makeStyles, useSnackbar } from '@masknet/theme'
 import {
     DialogActions,
     DialogContent,
@@ -38,7 +38,7 @@ function AutoPasteFailedDialog(props: AutoPasteFailedDialogProps) {
     const { classes } = useStyles()
     // eslint-disable-next-line @eslint-react/purity
     const url = data.image ? URL.createObjectURL(data.image) : undefined
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const [, copy] = useCopyToClipboard()
     const isMobile = useMatchXS()
     // eslint-disable-next-line @eslint-react/purity
@@ -81,7 +81,7 @@ function AutoPasteFailedDialog(props: AutoPasteFailedDialogProps) {
                                 variant="contained"
                                 onClick={() => {
                                     copy(data.text)
-                                    showSnackbar(<Trans>Text copied!</Trans>, {
+                                    enqueueSnackbar(<Trans>Text copied!</Trans>, {
                                         variant: 'success',
                                         preventDuplicate: true,
                                         anchorOrigin: {
@@ -109,7 +109,7 @@ function AutoPasteFailedDialog(props: AutoPasteFailedDialogProps) {
                             onClick={async () => {
                                 if (!data.image) return
                                 await navigator.clipboard.write([new ClipboardItem({ [data.image.type]: data.image })])
-                                showSnackbar(<Trans>Image copied!</Trans>, {
+                                enqueueSnackbar(<Trans>Image copied!</Trans>, {
                                     variant: 'success',
                                     preventDuplicate: true,
                                     anchorOrigin: {
diff --git a/packages/mask/content-script/components/InjectedComponents/PageInspector.tsx b/packages/mask/content-script/components/InjectedComponents/PageInspector.tsx
index ad281218a4fe..af31354f13bb 100644
--- a/packages/mask/content-script/components/InjectedComponents/PageInspector.tsx
+++ b/packages/mask/content-script/components/InjectedComponents/PageInspector.tsx
@@ -2,7 +2,7 @@ import { Trans } from '@lingui/react/macro'
 import { createInjectHooksRenderer, useActivatedPluginsSiteAdaptor } from '@masknet/plugin-infra/content-script'
 import { MaskMessages } from '@masknet/shared-base'
 import { useMatchXS } from '@masknet/shared-base-ui'
-import { useCustomSnackbar } from '@masknet/theme'
+import { useSnackbar } from '@masknet/theme'
 import { Box, Button, Typography } from '@mui/material'
 import { useEffect } from 'react'
 import { useAutoPasteFailedDialog } from './AutoPasteFailedDialog.js'
@@ -13,7 +13,7 @@ const GlobalInjection = createInjectHooksRenderer(
 )
 
 export function PageInspector() {
-    const { showSnackbar, closeSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar, closeSnackbar } = useSnackbar()
     const [autoPasteFailed, JSX] = useAutoPasteFailedDialog()
     const xsMatched = useMatchXS()
 
@@ -25,7 +25,7 @@ export function PageInspector() {
                     closeSnackbar(key)
                 }
                 const timeout = setTimeout(close, 15 * 1000 /** 15 seconds */)
-                showSnackbar(
+                enqueueSnackbar(
                     <>
                         <Typography color="textPrimary">
                             <Trans>Do you need to paste encrypted content manually?</Trans>
diff --git a/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx b/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx
index 43ffc57deb15..31501bd3c1aa 100644
--- a/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx
+++ b/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx
@@ -1,5 +1,5 @@
 import { cloneElement, Suspense } from 'react'
-import { CustomSnackbarProvider } from '@masknet/theme'
+import { MaskSnackbarProvider } from '@masknet/theme'
 import { ErrorBoundary } from '@masknet/shared-base-ui'
 import { Sniffings, jsxCompose } from '@masknet/shared-base'
 
@@ -8,11 +8,11 @@ export function ShadowRootAttachPointRoot(children: React.ReactNode) {
     return jsxCompose(
         <Suspense />,
         <ErrorBoundary />,
-        <CustomSnackbarProvider
+        <MaskSnackbarProvider
             disableWindowBlurListener={false}
             anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
             offsetY={Sniffings.is_facebook_page ? 80 : undefined}>
             {' '}
-        </CustomSnackbarProvider>,
+        </MaskSnackbarProvider>,
     )(cloneElement, children)
 }
diff --git a/packages/mask/dashboard/Dashboard.tsx b/packages/mask/dashboard/Dashboard.tsx
index b8dd30960e5a..73cda629c8c1 100644
--- a/packages/mask/dashboard/Dashboard.tsx
+++ b/packages/mask/dashboard/Dashboard.tsx
@@ -2,7 +2,7 @@ import { cloneElement } from 'react'
 import { CssBaseline, GlobalStyles } from '@mui/material'
 import { StyledEngineProvider } from '@mui/material/styles'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { CustomSnackbarProvider, DialogStackingProvider, MaskThemeProvider } from '@masknet/theme'
+import { MaskSnackbarProvider, DialogStackingProvider, MaskThemeProvider } from '@masknet/theme'
 import { LinguiProviderHMR, PersonaContext, SharedContextProvider, Modals } from '@masknet/shared'
 import { ErrorBoundary } from '@masknet/shared-base-ui'
 import { RootWeb3ContextProvider } from '@masknet/web3-hooks-base'
@@ -44,7 +44,7 @@ export default function Dashboard() {
         <UserContext.Provider />,
         <PersonaContext.Provider initialState={PersonaContextIO} />,
         <ErrorBoundary />,
-        <CustomSnackbarProvider> </CustomSnackbarProvider>,
+        <MaskSnackbarProvider> </MaskSnackbarProvider>,
         <SharedContextProvider />,
     )(
         cloneElement,
diff --git a/packages/mask/dashboard/components/GoogleDriveLogin.tsx b/packages/mask/dashboard/components/GoogleDriveLogin.tsx
index ee26b515f748..86be63da5c7f 100644
--- a/packages/mask/dashboard/components/GoogleDriveLogin.tsx
+++ b/packages/mask/dashboard/components/GoogleDriveLogin.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
-import { ActionButton, makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { ActionButton, makeStyles, useSnackbar } from '@masknet/theme'
 import { GoogleDriveClient } from '@masknet/web3-providers'
 import { Box, Typography } from '@mui/material'
 import { memo, useMemo } from 'react'
@@ -35,7 +35,7 @@ export const GoogleDriveLogin = memo(function GoogleDriveLogin() {
         [],
     )
     const { updateUser } = UserContext.useContainer()
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const [{ loading }, login] = useAsyncFn(async () => {
         try {
@@ -48,12 +48,12 @@ export const GoogleDriveLogin = memo(function GoogleDriveLogin() {
                 googleAccount: userInfo.email || '',
             })
         } catch {
-            showSnackbar(t`Authorization Failed`, {
+            enqueueSnackbar(t`Authorization Failed`, {
                 variant: 'warning',
-                message: t`Failed to authorize Google Drive. Please try again.`,
+                detail: t`Failed to authorize Google Drive. Please try again.`,
             })
         }
-    }, [googleDriveClient, updateUser, showSnackbar])
+    }, [googleDriveClient, updateUser, enqueueSnackbar])
     return (
         <Box className={classes.container}>
             <Typography className={classes.title}>
diff --git a/packages/mask/dashboard/components/Restore/RestoreWalletFromLocal.tsx b/packages/mask/dashboard/components/Restore/RestoreWalletFromLocal.tsx
index e1f3cc155daf..11a0618d8349 100644
--- a/packages/mask/dashboard/components/Restore/RestoreWalletFromLocal.tsx
+++ b/packages/mask/dashboard/components/Restore/RestoreWalletFromLocal.tsx
@@ -2,7 +2,7 @@ import { Trans, useLingui } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { delay } from '@masknet/kit'
 import { FileFrame, UploadDropArea } from '@masknet/shared'
-import { makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { makeStyles, useSnackbar } from '@masknet/theme'
 import { Box, Button, Typography } from '@mui/material'
 import { memo, useCallback, useLayoutEffect, useState, type ReactNode } from 'react'
 import { usePersonaRecovery } from '../../contexts/RecoveryContext.js'
@@ -40,7 +40,7 @@ export const RestoreWalletFromLocal = memo(function RestoreWalletFromLocal({
 
     const [file, setFile] = useState<File | null>(null)
 
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const [readingFile, setReadingFile] = useState(false)
 
     const handleSetFile = useCallback(async (file: File) => {
@@ -51,7 +51,7 @@ export const RestoreWalletFromLocal = memo(function RestoreWalletFromLocal({
             setKeyStoreContent(value)
             setReadingFile(false)
         } else {
-            showSnackbar(<Trans>Unsupported key store data</Trans>, { variant: 'error' })
+            enqueueSnackbar(<Trans>Unsupported key store data</Trans>, { variant: 'error' })
         }
     }, [])
     const reset = useCallback(() => {
diff --git a/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx b/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
index 707118e74537..14ad15d8593e 100644
--- a/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
+++ b/packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
@@ -6,7 +6,7 @@ import { encryptBackup } from '@masknet/backup-format'
 import { Icons } from '@masknet/icons'
 import { InjectedDialog, LoadingStatus } from '@masknet/shared'
 import { DashboardRoutes } from '@masknet/shared-base'
-import { ActionButton, makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { ActionButton, makeStyles, useSnackbar } from '@masknet/theme'
 import { encode } from '@msgpack/msgpack'
 import { Box, DialogActions, DialogContent, Typography } from '@mui/material'
 import { format } from 'date-fns'
@@ -92,7 +92,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
     } = useBackupFormState()
     const { errors, isDirty, isValid } = formState
     const { data: previewInfo, isLoading: loading } = useBackupPreviewInfo()
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const { updateUser } = UserContext.useContainer()
     const [{ loading: uploadLoading, value }, handleUploadBackup] = useAsyncFn(
@@ -120,13 +120,13 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
                 controllerRef.current = controller
                 await onUpload?.(encrypted, controller.signal)
                 updateUser({ cloudBackupAt: format(new Date(), 'yyyy-MM-dd HH:mm:ss') })
-                showSnackbar(<Trans>Backup Successful</Trans>, {
+                enqueueSnackbar(<Trans>Backup Successful</Trans>, {
                     variant: 'success',
-                    message: <Trans>Data backed up successfully!</Trans>,
+                    detail: <Trans>Data backed up successfully!</Trans>,
                 })
                 onClose()
             } catch (error) {
-                showSnackbar(<Trans>Backup Failed</Trans>, { variant: 'error' })
+                enqueueSnackbar(<Trans>Backup Failed</Trans>, { variant: 'error' })
                 onClose()
                 if ((error as any).status === 400) navigate(DashboardRoutes.BackupCloud, { replace: true })
             }
@@ -137,7 +137,7 @@ export const BackupPreviewDialog = memo<BackupPreviewDialogProps>(function Backu
             encryptWithAccount,
             account,
             onUpload,
-            showSnackbar,
+            enqueueSnackbar,
             onClose,
             setError,
             _,
diff --git a/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx b/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx
index 47ee659602d4..4deff90896a7 100644
--- a/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx
+++ b/packages/mask/dashboard/modals/RestoreBackupModal/RestoreBackupDialog.tsx
@@ -3,7 +3,7 @@ import { Trans, useLingui } from '@lingui/react/macro'
 import { decryptBackup, type BackupSummary } from '@masknet/backup-format'
 import { Icons } from '@masknet/icons'
 import { formatFileSize, InjectedDialog } from '@masknet/shared'
-import { ActionButton, makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { ActionButton, makeStyles, useSnackbar } from '@masknet/theme'
 import { decode, encode } from '@msgpack/msgpack'
 import { Box, DialogActions, DialogContent, LinearProgress, Typography } from '@mui/material'
 import { format as formatDateTime } from 'date-fns'
@@ -80,7 +80,7 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
     const [progress, setProgress] = useState(0)
     const [backupPassword, setBackupPassword] = useState('')
     const [backupPasswordError, setBackupPasswordError] = useState<ReactNode>()
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const handleClose = useCallback(() => {
         setBackupPassword('')
@@ -98,11 +98,11 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
             }
             return step.value
         } catch (err) {
-            showSnackbar((err as Error).message, { variant: 'error' })
+            enqueueSnackbar((err as Error).message, { variant: 'error' })
             handleClose()
             throw err
         }
-    }, [open, download, showSnackbar, handleClose])
+    }, [open, download, enqueueSnackbar, handleClose])
 
     const isImport = strategy === 'import'
     const [{ loading }, handleRestore] = useAsyncFn(async () => {
@@ -123,9 +123,9 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
                 if (!hasPassword) await Services.Wallet.setDefaultPassword()
             }
             await Services.Backup.restoreBackup(backupJson)
-            showSnackbar(isImport ? <Trans>Restore Completed</Trans> : <Trans>Merge Completed</Trans>, {
+            enqueueSnackbar(isImport ? <Trans>Restore Completed</Trans> : <Trans>Merge Completed</Trans>, {
                 variant: 'success',
-                message:
+                detail:
                     restoreSuccessMessage ||
                     (isImport ?
                         <Trans>Your file has been successfully restore into the browser data.</Trans>
@@ -134,14 +134,14 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
             onClose(backupSummary)
         } catch (err) {
             if (isImport) {
-                showSnackbar(<Trans>Restore Failed</Trans>, {
+                enqueueSnackbar(<Trans>Restore Failed</Trans>, {
                     variant: 'error',
-                    message: restoreErrorMessage || (
+                    detail: restoreErrorMessage || (
                         <Trans>Failed to restore the backup: {(err as Error).message}</Trans>
                     ),
                 })
             } else {
-                showSnackbar(<Trans>Failed to download and merge the backup: {(err as Error).message}</Trans>, {
+                enqueueSnackbar(<Trans>Failed to download and merge the backup: {(err as Error).message}</Trans>, {
                     variant: 'error',
                 })
             }
@@ -151,7 +151,7 @@ export const RestoreBackupDialog = memo<RestoreBackupDialogProps>(function Resto
         decryptWithAccount,
         account,
         backupPassword,
-        showSnackbar,
+        enqueueSnackbar,
         isImport,
         restoreSuccessMessage,
         onClose,
diff --git a/packages/mask/dashboard/pages/CreateMaskWallet/FireflyWallet/index.tsx b/packages/mask/dashboard/pages/CreateMaskWallet/FireflyWallet/index.tsx
index fbf3851f84c2..ae5e70de14a2 100644
--- a/packages/mask/dashboard/pages/CreateMaskWallet/FireflyWallet/index.tsx
+++ b/packages/mask/dashboard/pages/CreateMaskWallet/FireflyWallet/index.tsx
@@ -2,7 +2,7 @@ import Services from '#services'
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { PopupRoutes } from '@masknet/shared-base'
-import { makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { makeStyles, useSnackbar } from '@masknet/theme'
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material'
 import { memo, useState } from 'react'
 import { useAsyncFn, useAsyncRetry } from 'react-use'
@@ -114,7 +114,7 @@ const useStyles = makeStyles()((theme) => ({
 export const Component = memo(function CreateWalletForm() {
     const { classes, cx } = useStyles()
     const [open, setOpen] = useState(false)
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const {
         retry,
@@ -140,7 +140,7 @@ export const Component = memo(function CreateWalletForm() {
                 const result = await Services.Helper.requestXOAuthToken()
                 if (result) await Services.Helper.loginFireflyViaTwitter()
             } else {
-                showSnackbar(<Trans>Failed to login firefly</Trans>, {
+                enqueueSnackbar(<Trans>Failed to login firefly</Trans>, {
                     variant: 'error',
                     content: (err as Error).message,
                 })
diff --git a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx
index 1428ca0cc50a..928012511909 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Mnemonic/index.tsx
@@ -1,7 +1,7 @@
 import { Icons } from '@masknet/icons'
 import { CopyButton } from '@masknet/shared'
 import { DashboardRoutes } from '@masknet/shared-base'
-import { alpha, makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { alpha, makeStyles, useSnackbar } from '@masknet/theme'
 import { Box, Button, Checkbox, FormControlLabel, IconButton, Stack, Typography } from '@mui/material'
 import { toBlob } from 'html-to-image'
 import { memo, useCallback, useRef, useState } from 'react'
@@ -100,7 +100,7 @@ export const Component = memo(function SignUpMnemonic() {
 
     const [checked, setChecked] = useState(true)
 
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const { words, refreshCallback } = useMnemonicWordsPuzzle()
 
@@ -121,7 +121,7 @@ export const Component = memo(function SignUpMnemonic() {
             await Services.Settings.setCurrentPersonaIdentifier(identifier)
             navigate(urlcat(DashboardRoutes.SignUpPersonaOnboarding, { isCreate: true }))
         } catch (error) {
-            showSnackbar((error as Error).message, { variant: 'error' })
+            enqueueSnackbar((error as Error).message, { variant: 'error' })
         }
     }, [words])
 
diff --git a/packages/mask/dashboard/pages/SetupPersona/Onboarding/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Onboarding/index.tsx
index 8f1906a10953..3b74ad6171f5 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Onboarding/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Onboarding/index.tsx
@@ -1,6 +1,6 @@
 import { Icons } from '@masknet/icons'
 import { CrossIsolationMessages, EnhanceableSite, PopupRoutes, userGuideStatus } from '@masknet/shared-base'
-import { makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { makeStyles, useSnackbar } from '@masknet/theme'
 import { Box, Typography } from '@mui/material'
 import { memo, useCallback, useEffect, useMemo } from 'react'
 import { Trend } from '../../../assets/index.js'
@@ -80,7 +80,7 @@ export const Component = memo(function Onboarding() {
     const { classes } = useStyles()
 
     const [params] = useSearchParams()
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const isCreate = params.get('isCreate')
     const count = params.get('count')
     const { value: hasPaymentPassword, loading, retry } = useAsyncRetry(Services.Wallet.hasPassword, [])
@@ -107,9 +107,9 @@ export const Component = memo(function Onboarding() {
         return CrossIsolationMessages.events.passwordStatusUpdated.on((hasPassword) => {
             if (!hasPassword) return
             retry()
-            showSnackbar(<Trans>Set Payment Password</Trans>, {
+            enqueueSnackbar(<Trans>Set Payment Password</Trans>, {
                 variant: 'success',
-                message: <Trans>Payment password set.</Trans>,
+                detail: <Trans>Payment password set.</Trans>,
             })
         })
     }, [retry])
@@ -157,9 +157,9 @@ export const Component = memo(function Onboarding() {
                 <OnboardingWriter
                     sentence={sentence}
                     onFinish={() => {
-                        showSnackbar(<Trans>Creation Completed</Trans>, {
+                        enqueueSnackbar(<Trans>Creation Completed</Trans>, {
                             variant: 'success',
-                            message: t`Your Persona has been successfully created.`,
+                            detail: t`Your Persona has been successfully created.`,
                         })
                     }}
                 />
diff --git a/packages/mask/dashboard/pages/SetupPersona/Recovery/Local.tsx b/packages/mask/dashboard/pages/SetupPersona/Recovery/Local.tsx
index 270f9e64e304..716327a150d5 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Recovery/Local.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Recovery/Local.tsx
@@ -5,7 +5,7 @@ import { Icons } from '@masknet/icons'
 import { delay } from '@masknet/kit'
 import { FileFrame, PersonaContext, UploadDropArea } from '@masknet/shared'
 import { DashboardRoutes } from '@masknet/shared-base'
-import { makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { makeStyles, useSnackbar } from '@masknet/theme'
 import { decode, encode } from '@msgpack/msgpack'
 import { Box, Button, Typography } from '@mui/material'
 import { memo, useCallback, useMemo, useState, type ReactNode } from 'react'
@@ -46,7 +46,7 @@ const useStyles = makeStyles()((theme) => ({
 export const Component = memo(function RecoveryLocalBackup() {
     const { t } = useLingui()
     const { classes, theme } = useStyles()
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const navigate = useNavigate()
 
     const [file, setFile] = useState<File | null>(null)
@@ -77,7 +77,7 @@ export const Component = memo(function RecoveryLocalBackup() {
             setRestoreStatus(RestoreStatus.Decrypting)
         } else {
             reset()
-            showSnackbar(<Trans>Unsupported data backup</Trans>, { variant: 'error' })
+            enqueueSnackbar(<Trans>Unsupported data backup</Trans>, { variant: 'error' })
         }
     }, [])
 
@@ -89,7 +89,7 @@ export const Component = memo(function RecoveryLocalBackup() {
             setSummary(summary.value)
             setRestoreStatus(RestoreStatus.Verified)
         } else {
-            showSnackbar(<Trans>Unsupported data backup</Trans>, { variant: 'error' })
+            enqueueSnackbar(<Trans>Unsupported data backup</Trans>, { variant: 'error' })
             setRestoreStatus(RestoreStatus.WaitingInput)
             setBackupValue('')
         }
@@ -142,7 +142,7 @@ export const Component = memo(function RecoveryLocalBackup() {
 
             await onRestore(summary?.countOfWallets)
         } catch {
-            showSnackbar(<Trans>Restore backup failed.</Trans>, { variant: 'error' })
+            enqueueSnackbar(<Trans>Restore backup failed.</Trans>, { variant: 'error' })
         } finally {
             setProcessing(false)
         }
diff --git a/packages/mask/dashboard/pages/SetupPersona/Welcome/index.tsx b/packages/mask/dashboard/pages/SetupPersona/Welcome/index.tsx
index 6839d2d6b432..098f9ccfbcf4 100644
--- a/packages/mask/dashboard/pages/SetupPersona/Welcome/index.tsx
+++ b/packages/mask/dashboard/pages/SetupPersona/Welcome/index.tsx
@@ -2,7 +2,7 @@ import Services from '#services'
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
 import { DashboardRoutes, EnhanceableSite, userGuideStatus } from '@masknet/shared-base'
-import { makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { makeStyles, useSnackbar } from '@masknet/theme'
 import { Checkbox, FormControlLabel, Typography } from '@mui/material'
 import { memo, useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
@@ -58,7 +58,7 @@ export const Component = memo(function Welcome() {
     const [params] = useSearchParams()
     const navigate = useNavigate()
 
-    const snackbar = useCustomSnackbar()
+    const snackbar = useSnackbar()
     const [{ loading }, handleAgree] = useAsyncFn(async () => {
         if (allowedToCollect) {
             Services.Settings.setTelemetryEnabled(true)
@@ -71,7 +71,7 @@ export const Component = memo(function Welcome() {
             if (!granted) return
             if (!userGuideStatus[EnhanceableSite.Twitter].value) userGuideStatus[EnhanceableSite.Twitter].value = '1'
         } catch (err) {
-            snackbar.showSnackbar(t`Failed to get permissions`, { variant: 'error' })
+            snackbar.enqueueSnackbar(t`Failed to get permissions`, { variant: 'error' })
             throw err
         }
         const from = params.get('from')
diff --git a/packages/mask/dashboard/pages/SignUp/steps/PersonaRecovery.tsx b/packages/mask/dashboard/pages/SignUp/steps/PersonaRecovery.tsx
index 4b370f1661e5..f6cf008fa33c 100644
--- a/packages/mask/dashboard/pages/SignUp/steps/PersonaRecovery.tsx
+++ b/packages/mask/dashboard/pages/SignUp/steps/PersonaRecovery.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { useCustomSnackbar } from '@masknet/theme'
+import { useSnackbar } from '@masknet/theme'
 import { DashboardRoutes, type ECKeyIdentifier, type EC_Public_JsonWebKey } from '@masknet/shared-base'
 import Services from '#services'
 import { PersonaNameUI } from './PersonaNameUI.js'
@@ -14,7 +14,7 @@ export function Component() {
     const navigate = useNavigate()
 
     const createPersona = createPersonaV2
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const state = useLocation().state as {
         mnemonic?: string[]
@@ -62,7 +62,7 @@ export function Component() {
                 }
 
                 await Services.Settings.setCurrentPersonaIdentifier(identifier)
-                showSnackbar(<Trans>Persona created.</Trans>, { variant: 'success' })
+                enqueueSnackbar(<Trans>Persona created.</Trans>, { variant: 'success' })
 
                 await delay(300)
                 navigate(
diff --git a/packages/mask/package.json b/packages/mask/package.json
index e412fc91bd7a..46ca1ca4b7b9 100644
--- a/packages/mask/package.json
+++ b/packages/mask/package.json
@@ -111,6 +111,7 @@
     "idb": "^8.0.0",
     "immer": "^10.1.1",
     "json-stable-stringify": "^1.1.1",
+    "notistack": "^3.0.2",
     "react-avatar-editor": "^13.0.2",
     "react-draggable": "^4.4.6",
     "react-highlight-words": "^0.20.0",
diff --git a/packages/mask/popups/Popup.tsx b/packages/mask/popups/Popup.tsx
index fa4b5ae34205..19272216adc9 100644
--- a/packages/mask/popups/Popup.tsx
+++ b/packages/mask/popups/Popup.tsx
@@ -1,15 +1,10 @@
 import { PersonaContext, LinguiProviderHMR, PrivySetup, SharedContextProvider } from '@masknet/shared'
 import { jsxCompose, MaskMessages, PopupRoutes } from '@masknet/shared-base'
-import {
-    PopupSnackbarProvider,
-    CustomSnackbarProvider,
-    DialogStackingProvider,
-    MaskThemeProvider,
-} from '@masknet/theme'
+import { DialogStackingProvider, MaskThemeProvider } from '@masknet/theme'
 import { EVMWeb3ContextProvider, RootWeb3ContextProvider } from '@masknet/web3-hooks-base'
 import { ProviderType } from '@masknet/web3-shared-evm'
 import { Box } from '@mui/material'
-import { Suspense, cloneElement, lazy, memo, useEffect, useMemo, useState, type ReactNode } from 'react'
+import React, { Suspense, cloneElement, lazy, memo, useEffect, useMemo, useState, type ReactNode } from 'react'
 import { useIdleTimer } from 'react-idle-timer'
 import {
     createHashRouter,
@@ -36,6 +31,7 @@ import { ErrorBoundaryUIOfError } from '../../shared-base-ui/src/components/Erro
 import { TraderFrame, traderRoutes } from './pages/Trader/index.js'
 import { StyledEngineProvider } from '@mui/material/styles'
 import { i18n } from '@lingui/core'
+import { PopupSnackbarProvider } from './components/PopupSnackbarProvider/index.js'
 
 const personaInitialState = {
     queryOwnedPersonaInformation: Services.Identity.queryOwnedPersonaInformation,
@@ -117,15 +113,28 @@ export default function Popups() {
     })
 
     return jsxCompose(
+        <Suspense />,
+
+        // Provide the minimal environment (i18n, material theme) for CrashUI in page mode
+        <LinguiProviderHMR i18n={i18n} />,
+        <MaskPopupThemeProvider />,
+        <StyledEngineProvider injectFirst enableCssLayer />,
+
+        <ErrorBoundary />,
+        <Suspense />,
+
         <PersistQueryClientProvider client={queryClient} persistOptions={queryPersistOptions} />,
-        <PageUIProvider />,
-        <PopupSnackbarProvider> </PopupSnackbarProvider>,
+        <DialogStackingProvider hasGlobalBackdrop={false} />,
+        <RootWeb3ContextProvider />,
+        <SharedContextProvider />,
+        <PopupSnackbarProvider />,
         <EVMWeb3ContextProvider providerType={ProviderType.MaskWallet} />,
         <PopupContext />,
         <PageTitleContext value={titleContext} />,
     )(
         cloneElement,
         <>
+            <PrivySetup />
             {/* https://github.com/TanStack/query/issues/5417 */}
             {process.env.NODE_ENV === 'development' ?
                 <ReactQueryDevtools buttonPosition="bottom-right" />
@@ -140,35 +149,13 @@ function ErrorPageBoundary() {
     return <ErrorBoundaryUIOfError error={error} hasError />
 }
 
-interface PageUIProviderProps {
-    children?: React.ReactNode
-}
-function PageUIProvider({ children }: PageUIProviderProps) {
+function MaskPopupThemeProvider({ children }: React.PropsWithChildren) {
+    // those two hooks depends on tanstack's provider
     const palette = usePageThemePalette()
     const [localization] = useThemeLanguage()
-    return jsxCompose(
-        // Avoid the crash due to unhandled suspense
-        <Suspense />,
-        // Provide the minimal environment (i18n context) for CrashUI in page mode
-        <LinguiProviderHMR i18n={i18n} />,
-        <StyledEngineProvider injectFirst enableCssLayer />,
-        <ErrorBoundary />,
-
-        <Suspense />,
-        <DialogStackingProvider hasGlobalBackdrop={false} />,
-        <MaskThemeProvider palette={palette} localization={localization} />,
-        <RootWeb3ContextProvider />,
-    )(
-        cloneElement,
-        <>
-            <PrivySetup />
-            <SharedContextProvider>
-                <CustomSnackbarProvider
-                    disableWindowBlurListener={false}
-                    anchorOrigin={{ vertical: 'top', horizontal: 'right' }}>
-                    {children}
-                </CustomSnackbarProvider>
-            </SharedContextProvider>
-        </>,
+    return (
+        <MaskThemeProvider palette={palette} localization={localization}>
+            {children}
+        </MaskThemeProvider>
     )
 }
diff --git a/packages/theme/src/Components/Snackbar/PopupSnackbar.tsx b/packages/mask/popups/components/PopupSnackbarProvider/index.tsx
similarity index 62%
rename from packages/theme/src/Components/Snackbar/PopupSnackbar.tsx
rename to packages/mask/popups/components/PopupSnackbarProvider/index.tsx
index 2f6f08d699cf..43fb32871498 100644
--- a/packages/theme/src/Components/Snackbar/PopupSnackbar.tsx
+++ b/packages/mask/popups/components/PopupSnackbarProvider/index.tsx
@@ -1,17 +1,7 @@
-import { memo, useRef, useCallback, forwardRef, type RefAttributes } from 'react'
+import type { RefAttributes } from 'react'
 import { Typography, collapseClasses } from '@mui/material'
-import { alpha } from '../../Theme/colors.js'
-import {
-    SnackbarProvider,
-    type SnackbarProviderProps,
-    type SnackbarMessage,
-    SnackbarContent,
-    type VariantType,
-    useSnackbar,
-    type CustomContentProps,
-} from 'notistack'
-import { makeStyles } from '../../UIHelper/index.js'
-import type { ShowSnackbarOptions } from './index.js'
+import { SnackbarProvider, SnackbarContent, type CustomContentProps } from 'notistack'
+import { alpha, makeStyles } from '@masknet/theme'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -53,17 +43,14 @@ const useStyles = makeStyles()((theme) => ({
         color: theme.vars.palette.maskColor.white,
     },
     default: {},
-
     info: {},
 }))
 
-export const PopupSnackbarProvider = memo<SnackbarProviderProps>(function PopupSnackbarProvider(props) {
-    const ref = useRef<SnackbarProvider>(null)
+export function PopupSnackbarProvider() {
     const { classes } = useStyles()
 
     return (
         <SnackbarProvider
-            ref={ref}
             maxSnack={1}
             disableWindowBlurListener
             autoHideDuration={2000}
@@ -78,19 +65,17 @@ export const PopupSnackbarProvider = memo<SnackbarProviderProps>(function PopupS
             classes={{
                 containerRoot: classes.container,
             }}
-            {...props}
         />
     )
-})
-
-interface PopupSnackbarContentProps extends CustomContentProps, RefAttributes<HTMLDivElement> {
-    detail?: React.ReactNode
 }
 
-const PopupSnackbarContent = forwardRef<HTMLDivElement, PopupSnackbarContentProps>(function PopupSnackbarContent(
-    { id, message, detail, variant },
+function PopupSnackbarContent({
+    id,
+    message,
+    detail,
+    variant,
     ref,
-) {
+}: CustomContentProps & RefAttributes<HTMLDivElement>) {
     const { classes, cx } = useStyles()
     const variantClass = {
         default: classes.default,
@@ -110,22 +95,4 @@ const PopupSnackbarContent = forwardRef<HTMLDivElement, PopupSnackbarContentProp
             :   detail}
         </SnackbarContent>
     )
-})
-
-export function usePopupCustomSnackbar() {
-    const { enqueueSnackbar, closeSnackbar } = useSnackbar()
-    const showSnackbar = useCallback(
-        (text: SnackbarMessage, options?: ShowSnackbarOptions) => {
-            const { message: detail, variant = 'success', ...rest } = options ?? {}
-            return enqueueSnackbar<VariantType>(text, {
-                variant,
-                detail,
-                autoHideDuration: 2000,
-                ...rest,
-            })
-        },
-        [enqueueSnackbar],
-    )
-
-    return { showSnackbar, closeSnackbar }
 }
diff --git a/packages/mask/popups/components/PrivateKeyDisplay/index.tsx b/packages/mask/popups/components/PrivateKeyDisplay/index.tsx
index d42f2d70f9ee..98566017da7a 100644
--- a/packages/mask/popups/components/PrivateKeyDisplay/index.tsx
+++ b/packages/mask/popups/components/PrivateKeyDisplay/index.tsx
@@ -1,5 +1,5 @@
 import type { Wallet } from '@masknet/shared-base'
-import { makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { makeStyles, useSnackbar } from '@masknet/theme'
 import { useAsync, useCopyToClipboard } from 'react-use'
 import { memo, useCallback, useState } from 'react'
 import Services from '#services'
@@ -107,7 +107,7 @@ export const PrivateKeyDisplay = memo<PrimaryKeyDisplayProps>(function PrivateKe
     const [display, toggle] = useToggle(false)
     const [expand, setExpand] = useState(!!hiddenArrow)
     const { classes, cx } = useStyles()
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const [, copyToClipboard] = useCopyToClipboard()
 
     const { value: privateKey } = useAsync(async () => {
@@ -118,7 +118,7 @@ export const PrivateKeyDisplay = memo<PrimaryKeyDisplayProps>(function PrivateKe
     const handleCopy = useCallback(() => {
         if (!privateKey) return
         copyToClipboard(privateKey)
-        showSnackbar(<Trans>Copied</Trans>)
+        enqueueSnackbar(<Trans>Copied</Trans>, { variant: 'success' })
     }, [privateKey])
 
     return (
diff --git a/packages/mask/popups/modals/AddContactModal/index.tsx b/packages/mask/popups/modals/AddContactModal/index.tsx
index 2845c1f9a98c..2d03bfaa4b73 100644
--- a/packages/mask/popups/modals/AddContactModal/index.tsx
+++ b/packages/mask/popups/modals/AddContactModal/index.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react'
 import { useAsyncFn } from 'react-use'
-import { alpha, ActionButton, MaskTextField, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { alpha, ActionButton, MaskTextField, makeStyles, useSnackbar } from '@masknet/theme'
 import { buttonClasses } from '@mui/material/Button'
 import type { SingletonModalProps } from '@masknet/shared-base'
 import { useSingletonModal } from '@masknet/shared-base-ui'
@@ -67,7 +67,7 @@ function AddContactDrawer({ onConfirm, address, name, setName, setAddress, ...re
     const contacts = useContacts()
     const wallets = useWallets()
 
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const addressError = Boolean(address) && !isValidAddress(address)
     const nameExistError = Boolean(
@@ -80,7 +80,7 @@ function AddContactDrawer({ onConfirm, address, name, setName, setAddress, ...re
 
     const [{ loading }, addContact] = useAsyncFn(async () => {
         await evm.state!.AddressBook?.addContact({ name, address })
-        showSnackbar(<Trans>Contact added.</Trans>)
+        enqueueSnackbar(<Trans>Contact added.</Trans>, { variant: 'success' })
         onConfirm?.()
     }, [name, address, onConfirm])
 
diff --git a/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx b/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx
index 497c10368387..e933a7c6c748 100644
--- a/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/ChangeBackupPasswordModal/index.tsx
@@ -7,7 +7,7 @@ import { Controller, useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { MATCH_PASSWORD_RE } from '../../constants.js'
-import { ActionButton, usePopupCustomSnackbar } from '@masknet/theme'
+import { ActionButton, useSnackbar } from '@masknet/theme'
 import { useNavigate } from 'react-router-dom'
 import { Trans, useLingui } from '@lingui/react/macro'
 interface FormInputs {
@@ -23,7 +23,7 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
 
     const { user, updateUser } = UserContext.useContainer()
 
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const {
         control,
@@ -85,11 +85,11 @@ export const ChangeBackupPasswordModal = memo<ActionModalBaseProps>(function Cha
                 backupPassword: data.newPassword,
             })
 
-            showSnackbar(<Trans>Backup password set successfully</Trans>)
+            enqueueSnackbar(<Trans>Backup password set successfully</Trans>, { variant: 'success' })
 
             navigate(-1)
         },
-        [handleSubmit, updateUser, showSnackbar],
+        [handleSubmit, updateUser, enqueueSnackbar],
     )
 
     return (
diff --git a/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx b/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
index 4a0922e58400..5f280e05dc82 100644
--- a/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/ChangePaymentPasswordModal/index.tsx
@@ -1,6 +1,6 @@
 import type { SingletonModalProps } from '@masknet/shared-base'
 import { useSingletonModal } from '@masknet/shared-base-ui'
-import { ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { ActionButton, makeStyles, useSnackbar } from '@masknet/theme'
 import { Box, Typography, useTheme, type InputProps } from '@mui/material'
 import { useState, type ReactNode } from 'react'
 import { useAsyncFn } from 'react-use'
@@ -48,7 +48,7 @@ function ChangePaymentPasswordDrawer({
     const theme = useTheme()
     const { classes } = useStyles()
 
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const [{ loading }, handleClick] = useAsyncFn(async () => {
         if (newPassword !== confirmNewPassword) {
@@ -61,7 +61,7 @@ function ChangePaymentPasswordDrawer({
         }
         try {
             await Services.Wallet.changePassword(oldPassword, newPassword)
-            showSnackbar(<Trans>Payment password changed.</Trans>)
+            enqueueSnackbar(<Trans>Payment password changed.</Trans>, { variant: 'success' })
             rest.onClose?.()
         } catch (error) {
             setOriginalPasswordWrong((error as Error).message)
diff --git a/packages/mask/popups/modals/ConnectProvider/index.tsx b/packages/mask/popups/modals/ConnectProvider/index.tsx
index 997151e27348..891f2bbac37f 100644
--- a/packages/mask/popups/modals/ConnectProvider/index.tsx
+++ b/packages/mask/popups/modals/ConnectProvider/index.tsx
@@ -3,7 +3,7 @@ import { useAsyncFn, useMount } from 'react-use'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import { Box, Button, Typography } from '@mui/material'
 import { delay, timeout } from '@masknet/kit'
-import { makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { makeStyles, useSnackbar } from '@masknet/theme'
 import { useNetworkContext, useProviderDescriptor, useWeb3State } from '@masknet/web3-hooks-base'
 import { PopupModalRoutes, type NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
 import { EVMWeb3 } from '@masknet/web3-providers'
@@ -66,7 +66,7 @@ export const ConnectProviderModal = memo<ActionModalBaseProps>(function ConnectP
     const location = useLocation()
     const { pluginID } = useNetworkContext<NetworkPluginID.PLUGIN_EVM>()
 
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const { Provider } = useWeb3State<void, NetworkPluginID.PLUGIN_EVM>(pluginID)
 
@@ -116,7 +116,7 @@ export const ConnectProviderModal = memo<ActionModalBaseProps>(function ConnectP
             if (Error.isError(error)) {
                 if (error.message === 'timeout') throw error
                 if (error.message.includes('reject') || error.message.includes('cancel')) {
-                    showSnackbar(<Trans>Connecting operation cancelled in third-party wallet.</Trans>, {
+                    enqueueSnackbar(<Trans>Connecting operation cancelled in third-party wallet.</Trans>, {
                         variant: 'warning',
                     })
                     handleClose()
diff --git a/packages/mask/popups/modals/DeleteContactModal/index.tsx b/packages/mask/popups/modals/DeleteContactModal/index.tsx
index 9a116b3f791b..4c7fce0f1bc6 100644
--- a/packages/mask/popups/modals/DeleteContactModal/index.tsx
+++ b/packages/mask/popups/modals/DeleteContactModal/index.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { useAsyncFn } from 'react-use'
 import { Typography } from '@mui/material'
 import { buttonClasses } from '@mui/material/Button'
-import { alpha, ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { alpha, ActionButton, makeStyles, useSnackbar } from '@masknet/theme'
 import type { SingletonModalProps } from '@masknet/shared-base'
 import { useSingletonModal } from '@masknet/shared-base-ui'
 import { EmojiAvatar } from '@masknet/shared'
@@ -68,11 +68,11 @@ interface DeleteContactModalProps extends BottomDrawerProps {
 function DeleteContactDrawer({ onConfirm, address, name, ...rest }: DeleteContactModalProps) {
     const { classes, cx } = useStyles()
 
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const [{ loading }, deleteContact] = useAsyncFn(async () => {
         await evm.state!.AddressBook?.removeContact(address)
-        showSnackbar(<Trans>Contact deleted.</Trans>)
+        enqueueSnackbar(<Trans>Contact deleted.</Trans>, { variant: 'success' })
         onConfirm?.()
     }, [address, onConfirm])
 
diff --git a/packages/mask/popups/modals/EditContactModal/index.tsx b/packages/mask/popups/modals/EditContactModal/index.tsx
index eb13e9f0b02c..07a3004b2444 100644
--- a/packages/mask/popups/modals/EditContactModal/index.tsx
+++ b/packages/mask/popups/modals/EditContactModal/index.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react'
 import { useAsyncFn } from 'react-use'
-import { alpha, ActionButton, MaskTextField, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { alpha, ActionButton, MaskTextField, makeStyles, useSnackbar } from '@masknet/theme'
 import { buttonClasses } from '@mui/material/Button'
 import { Box, Typography } from '@mui/material'
 import type { SingletonModalProps } from '@masknet/shared-base'
@@ -98,7 +98,7 @@ function EditContactDrawer({ onConfirm, address, name, setName, type, ...rest }:
     const contacts = useContacts()
     const wallets = useWallets()
 
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const nameAlreadyExist = Boolean(
         contacts?.find((contact) => contact.name === name && !isSameAddress(contact.address, address)) ||
@@ -118,7 +118,7 @@ function EditContactDrawer({ onConfirm, address, name, setName, type, ...rest }:
             await EVMWeb3.renameWallet?.(address, _name, { providerType: ProviderType.MaskWallet })
         }
 
-        showSnackbar(<Trans>Contact edited.</Trans>)
+        enqueueSnackbar(<Trans>Contact edited.</Trans>, { variant: 'success' })
 
         onConfirm?.()
     }, [name, address, type, onConfirm])
diff --git a/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx b/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx
index 445c36ba23e5..fc0b04c30be2 100644
--- a/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx
+++ b/packages/mask/popups/modals/SetBackupPasswordModal/index.tsx
@@ -2,7 +2,7 @@ import { memo, useCallback, useMemo, useState, type ReactNode } from 'react'
 import { useAsyncFn } from 'react-use'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { Box, Typography, useTheme } from '@mui/material'
-import { ActionButton, usePopupCustomSnackbar } from '@masknet/theme'
+import { ActionButton, useSnackbar } from '@masknet/theme'
 import { ActionModal, type ActionModalBaseProps } from '../../components/index.js'
 import { UserContext } from '../../../shared-ui/index.js'
 import { PasswordField } from '../../components/PasswordField/index.js'
@@ -24,7 +24,7 @@ export const SetBackupPasswordModal = memo<ActionModalBaseProps>(function SetBac
 
     const navigate = useNavigate()
 
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const validPassword = useCallback(() => {
         if (newPassword.length < 8 || newPassword.length > 20) {
@@ -47,7 +47,7 @@ export const SetBackupPasswordModal = memo<ActionModalBaseProps>(function SetBac
             backupPassword: newPassword,
         })
 
-        showSnackbar(<Trans>Backup password set successfully</Trans>)
+        enqueueSnackbar(<Trans>Backup password set successfully</Trans>, { variant: 'success' })
 
         if (to) {
             navigate(to, { replace: true })
diff --git a/packages/mask/popups/pages/Friends/ContactCard/index.tsx b/packages/mask/popups/pages/Friends/ContactCard/index.tsx
index c65f9af356c4..558009f5ecc2 100644
--- a/packages/mask/popups/pages/Friends/ContactCard/index.tsx
+++ b/packages/mask/popups/pages/Friends/ContactCard/index.tsx
@@ -3,8 +3,8 @@ import { useNavigate } from 'react-router-dom'
 import { useEverSeen } from '@masknet/shared-base-ui'
 import { useMutation, useQueryClient, type InfiniteData } from '@tanstack/react-query'
 import { Icons } from '@masknet/icons'
-import { ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
-import { Box, Typography, Avatar, useTheme, ButtonBase as Button } from '@mui/material'
+import { ActionButton, makeStyles, useSnackbar } from '@masknet/theme'
+import { Box, Typography, Avatar, ButtonBase as Button } from '@mui/material'
 import { formatPersonaFingerprint, PopupRoutes } from '@masknet/shared-base'
 import { PersonaContext } from '@masknet/shared'
 import Services from '#services'
@@ -48,12 +48,11 @@ interface ContactCardProps {
 }
 
 export const ContactCard = memo<ContactCardProps>(function ContactCard({ friend, avatar, refetch }) {
-    const theme = useTheme()
     const { classes } = useStyles()
     const navigate = useNavigate()
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const [local, setLocal] = useState(false)
-    const [seen, ref] = useEverSeen<HTMLLIElement>()
+    const [, ref] = useEverSeen<HTMLLIElement>()
     const { currentPersona } = PersonaContext.useContainer()
     const publicKey = friend.persona.publicKeyAsHex
     const rawPublicKey = currentPersona?.identifier.rawPublicKey
@@ -92,7 +91,7 @@ export const ContactCard = memo<ContactCardProps>(function ContactCard({ friend,
                     }
                 },
             )
-            showSnackbar(<Trans>Added successfully</Trans>, { variant: 'success' })
+            enqueueSnackbar(<Trans>Added successfully</Trans>, { variant: 'success' })
             setLocal(true)
         },
         onSettled: async () => {
diff --git a/packages/mask/popups/pages/Friends/Detail/index.tsx b/packages/mask/popups/pages/Friends/Detail/index.tsx
index e336d1b665f9..7607e8e91520 100644
--- a/packages/mask/popups/pages/Friends/Detail/index.tsx
+++ b/packages/mask/popups/pages/Friends/Detail/index.tsx
@@ -5,13 +5,13 @@ import { useCurrentPersona } from '../../../../shared-ui/index.js'
 import Services from '#services'
 import { FriendsDetailUI } from './UI.js'
 import { useQueryClient, useMutation, type InfiniteData } from '@tanstack/react-query'
-import { usePopupCustomSnackbar } from '@masknet/theme'
+import { useSnackbar } from '@masknet/theme'
 import type { Friend } from '../../../hooks/index.js'
 import { Trans } from '@lingui/react/macro'
 
 export const Component = memo(function FriendsDetail() {
     const location = useLocation()
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const { avatar, profiles, nextId, publicKey, isLocal, localProfile } = location.state
     const navigate = useNavigate()
     const [deleted, setDeleted] = useState(false)
@@ -55,7 +55,7 @@ export const Component = memo(function FriendsDetail() {
                     }
                 },
             )
-            showSnackbar(<Trans>Deleted successfully</Trans>, { variant: 'success' })
+            enqueueSnackbar(<Trans>Deleted successfully</Trans>, { variant: 'success' })
             setDeleted(true)
             navigate('/friends')
         },
diff --git a/packages/mask/popups/pages/Personas/AccountDetail/index.tsx b/packages/mask/popups/pages/Personas/AccountDetail/index.tsx
index 944aa3e301d9..ac1aba387b09 100644
--- a/packages/mask/popups/pages/Personas/AccountDetail/index.tsx
+++ b/packages/mask/popups/pages/Personas/AccountDetail/index.tsx
@@ -4,7 +4,7 @@ import { Icons } from '@masknet/icons'
 import { delay } from '@masknet/kit'
 import { PersonaContext } from '@masknet/shared'
 import { MaskMessages, PopupRoutes, currentSetupGuideStatus } from '@masknet/shared-base'
-import { usePopupCustomSnackbar } from '@masknet/theme'
+import { useSnackbar } from '@masknet/theme'
 import { Telemetry } from '@masknet/web3-telemetry'
 import { EventType } from '@masknet/web3-telemetry/types'
 import { useQueryClient } from '@tanstack/react-query'
@@ -20,7 +20,7 @@ export const Component = memo(() => {
     const { selectedAccount, currentPersona } = PersonaContext.useContainer()
     const { setExtension } = useContext(PageTitleContext)
 
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const queryClient = useQueryClient()
     const handleDetachProfile = useCallback(async () => {
@@ -32,14 +32,14 @@ export const Component = memo(() => {
             await Service.Identity.detachProfile(selectedAccount.identifier)
             MaskMessages.events.ownPersonaChanged.sendToAll()
             queryClient.removeQueries({ queryKey: ['@@my-own-persona-info'] })
-            showSnackbar(<Trans>Disconnected.</Trans>, {
+            enqueueSnackbar(<Trans>Disconnected.</Trans>, {
                 variant: 'success',
             })
             Telemetry.captureEvent(EventType.Access, DisconnectEventMap[selectedAccount.identifier.network])
             await delay(300)
             navigate(-1)
         } catch {
-            showSnackbar(<Trans>Disconnect failed.</Trans>, {
+            enqueueSnackbar(<Trans>Disconnect failed.</Trans>, {
                 variant: 'error',
             })
         }
diff --git a/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx b/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx
index 428776152025..6e43d4e530cf 100644
--- a/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx
+++ b/packages/mask/popups/pages/Personas/ExportPrivateKey/index.tsx
@@ -8,7 +8,7 @@ import { useAsync, useCopyToClipboard } from 'react-use'
 import { BottomController } from '../../../components/BottomController/index.js'
 import { useNavigate, Link as RouterLink } from 'react-router-dom'
 import { PopupRoutes } from '@masknet/shared-base'
-import { ActionButton, usePopupCustomSnackbar } from '@masknet/theme'
+import { ActionButton, useSnackbar } from '@masknet/theme'
 import { Trans } from '@lingui/react/macro'
 
 export const Component = memo(function ExportPrivateKey() {
@@ -16,7 +16,7 @@ export const Component = memo(function ExportPrivateKey() {
     const navigate = useNavigate()
     const { currentPersona } = PersonaContext.useContainer()
 
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const [, copyToClipboard] = useCopyToClipboard()
     const { value } = useAsync(async () => {
         if (!currentPersona) return
@@ -31,7 +31,7 @@ export const Component = memo(function ExportPrivateKey() {
         if (!value) return
         copyToClipboard(value)
 
-        showSnackbar(<Trans>Copied</Trans>)
+        enqueueSnackbar(<Trans>Copied</Trans>, { variant: 'success' })
     }, [value])
 
     useTitle(currentPersona?.nickname ?? '')
diff --git a/packages/mask/popups/pages/Personas/Logout/index.tsx b/packages/mask/popups/pages/Personas/Logout/index.tsx
index 7a3d74594471..ccee1fd8b0c9 100644
--- a/packages/mask/popups/pages/Personas/Logout/index.tsx
+++ b/packages/mask/popups/pages/Personas/Logout/index.tsx
@@ -5,7 +5,7 @@ import { Trans } from '@lingui/react/macro'
 import { PersonaContext } from '@masknet/shared'
 import { PopupRoutes, type PersonaInformation } from '@masknet/shared-base'
 import { useContainer } from '@masknet/shared-base-ui'
-import { ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { ActionButton, makeStyles, useSnackbar } from '@masknet/theme'
 import { useWeb3State } from '@masknet/web3-hooks-base'
 import { Box, Button, Typography, useTheme } from '@mui/material'
 import { memo, useCallback, useMemo, useState } from 'react'
@@ -42,7 +42,7 @@ export const Component = memo(function Logout() {
     const { Provider } = useWeb3State()
 
     const { user } = useContainer(UserContext)
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const [{ loading }, onLogout] = useAsyncFn(async () => {
         try {
@@ -54,10 +54,10 @@ export const Component = memo(function Logout() {
                 await Services.Settings.setCurrentPersonaIdentifier(lastCreatedPersona)
             }
 
-            showSnackbar(<Trans>Logout successfully</Trans>)
+            enqueueSnackbar(<Trans>Logout successfully</Trans>, { variant: 'success' })
             navigate(PopupRoutes.Personas, { replace: true })
         } catch {
-            showSnackbar(<Trans>Logout failed</Trans>, { variant: 'error' })
+            enqueueSnackbar(<Trans>Logout failed</Trans>, { variant: 'error' })
         }
     }, [currentPersona, Provider])
 
diff --git a/packages/mask/popups/pages/Personas/PersonaAvatarSetting/index.tsx b/packages/mask/popups/pages/Personas/PersonaAvatarSetting/index.tsx
index 2795c352fa00..a3638931bae1 100644
--- a/packages/mask/popups/pages/Personas/PersonaAvatarSetting/index.tsx
+++ b/packages/mask/popups/pages/Personas/PersonaAvatarSetting/index.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom'
 import AvatarEditor from 'react-avatar-editor'
 import { Box, Button, Slider, Typography } from '@mui/material'
 import { Icons } from '@masknet/icons'
-import { ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { ActionButton, makeStyles, useSnackbar } from '@masknet/theme'
 import { PersonaContext } from '@masknet/shared'
 import { BottomController } from '../../../components/BottomController/index.js'
 import { NormalHeader } from '../../../components/index.js'
@@ -61,7 +61,7 @@ const PersonaAvatarSetting = memo(function PersonaAvatar() {
     const queryClient = useQueryClient()
     const [avatarLoaded, setAvatarLoaded] = useState(false)
 
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const { currentPersona, refreshAvatar } = PersonaContext.useContainer()
 
@@ -72,7 +72,7 @@ const PersonaAvatarSetting = memo(function PersonaAvatar() {
 
     const handleSetFile = useCallback((file: File) => {
         if (file.size > MAX_FILE_SIZE) {
-            showSnackbar(<Trans>Failed to set Avatar.</Trans>, { variant: 'error' })
+            enqueueSnackbar(<Trans>Failed to set Avatar.</Trans>, { variant: 'error' })
             return
         }
         setAvatarLoaded(false)
@@ -105,10 +105,10 @@ const PersonaAvatarSetting = memo(function PersonaAvatar() {
             })
             refreshAvatar()
 
-            showSnackbar(<Trans>Avatar set successfully</Trans>)
+            enqueueSnackbar(<Trans>Avatar set successfully</Trans>, { variant: 'success' })
             navigate(PopupRoutes.Personas, { replace: true })
         } catch {
-            showSnackbar(<Trans>Failed to set Avatar.</Trans>, { variant: 'error' })
+            enqueueSnackbar(<Trans>Failed to set Avatar.</Trans>, { variant: 'error' })
         }
     }, [file, currentPersona, refreshAvatar, queryClient])
 
diff --git a/packages/mask/popups/pages/Trader/useImplementRuntime.tsx b/packages/mask/popups/pages/Trader/useImplementRuntime.tsx
index c4875d427dd2..b14941028603 100644
--- a/packages/mask/popups/pages/Trader/useImplementRuntime.tsx
+++ b/packages/mask/popups/pages/Trader/useImplementRuntime.tsx
@@ -1,6 +1,5 @@
 import { Trans } from '@lingui/react/macro'
 import { useSupportedChains, useTrade, type ShowTooltipOptions } from '@masknet/plugin-trader'
-import { usePopupCustomSnackbar } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { TokenType } from '@masknet/web3-shared-base'
 import { isNativeTokenAddress, SchemaType, type ChainId } from '@masknet/web3-shared-evm'
@@ -19,7 +18,6 @@ export function useImplementRuntime() {
         async (
             currentToken: Web3Helper.FungibleTokenAll | null | undefined,
             side: 'from' | 'to',
-            excludes: Web3Helper.FungibleTokenAll[],
         ): Promise<Web3Helper.FungibleTokenAll | null> => {
             const supportedChains = chainQuery.data ?? (await chainQuery.refetch()).data
 
@@ -68,10 +66,5 @@ export function useImplementRuntime() {
         [theme.vars.palette.maskColor.main],
     )
 
-    const { showSnackbar } = usePopupCustomSnackbar()
-
-    return useMemo(
-        () => ({ pickToken, basePath: '/trader', showToolTip, showSnackbar }),
-        [pickToken, showToolTip, showSnackbar],
-    )
+    return useMemo(() => ({ pickToken, basePath: '/trader', showToolTip }), [pickToken, showToolTip])
 }
diff --git a/packages/mask/popups/pages/Wallet/EditNetwork/index.tsx b/packages/mask/popups/pages/Wallet/EditNetwork/index.tsx
index b514f59c677e..4e7d205ea78e 100644
--- a/packages/mask/popups/pages/Wallet/EditNetwork/index.tsx
+++ b/packages/mask/popups/pages/Wallet/EditNetwork/index.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Icons } from '@masknet/icons'
 import { NetworkPluginID } from '@masknet/shared-base'
-import { alpha, ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { alpha, ActionButton, makeStyles, useSnackbar } from '@masknet/theme'
 import { useChainContext, useNetworks, useWeb3State } from '@masknet/web3-hooks-base'
 import { EVMWeb3 } from '@masknet/web3-providers'
 import { fetchChains } from '@masknet/web3-providers/helpers'
@@ -89,7 +89,7 @@ export const Component = memo(function EditNetwork() {
     }, [chainId, networks])
     // #endregion
 
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     useTitle(network ? network.name : _(msg`Add Network`))
     const { setExtension } = useContext(PageTitleContext)
 
@@ -109,7 +109,7 @@ export const Component = memo(function EditNetwork() {
                         setChainId(ChainId.Mainnet)
                     }
                     await Network.removeNetwork(id)
-                    showSnackbar(<Trans>Network removed.</Trans>)
+                    enqueueSnackbar(<Trans>Network removed.</Trans>, { variant: 'success' })
                     // Trigger UI update.
                     queryClient.invalidateQueries({ queryKey: QUERY_KEY })
                     navigate(-1)
@@ -118,7 +118,7 @@ export const Component = memo(function EditNetwork() {
             </Button>,
         )
         return () => setExtension(undefined)
-    }, [isBuiltIn, id, classes.iconButton, showSnackbar, Network, currentChainId, queryClient])
+    }, [isBuiltIn, id, classes.iconButton, enqueueSnackbar, Network, currentChainId, queryClient])
 
     const schema = useMemo(() => {
         return createSchema(
@@ -206,16 +206,16 @@ export const Component = memo(function EditNetwork() {
                 }
                 if (isEditing) {
                     await Network.updateNetwork(id, network)
-                    showSnackbar(<Trans>Network saved</Trans>)
+                    enqueueSnackbar(<Trans>Network saved</Trans>, { variant: 'success' })
                 } else {
                     await Network.addNetwork(network)
-                    showSnackbar(<Trans>Network added</Trans>)
+                    enqueueSnackbar(<Trans>Network added</Trans>, { variant: 'success' })
                 }
                 navigate(-1)
                 queryClient.invalidateQueries({ queryKey: QUERY_KEY })
             } catch (err) {
                 checkZodError((err as Error).message)
-                showSnackbar(<Trans>Failed to save network</Trans>)
+                enqueueSnackbar(<Trans>Failed to save network</Trans>, { variant: 'error' })
             }
             setIsSubmitting(false)
         },
diff --git a/packages/mask/popups/pages/Wallet/Interaction/interaction.tsx b/packages/mask/popups/pages/Wallet/Interaction/interaction.tsx
index de8a2b8669f6..50c4935e72f7 100644
--- a/packages/mask/popups/pages/Wallet/Interaction/interaction.tsx
+++ b/packages/mask/popups/pages/Wallet/Interaction/interaction.tsx
@@ -3,7 +3,7 @@ import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { delay } from '@masknet/kit'
 import { NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
-import { ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { ActionButton, makeStyles, useSnackbar } from '@masknet/theme'
 import { useWeb3State } from '@masknet/web3-hooks-base'
 import type { ReasonableMessage, JsonRpcResponse } from '@masknet/web3-shared-base'
 import { EthereumMethodType, type MessageRequest } from '@masknet/web3-shared-evm'
@@ -48,7 +48,7 @@ export const Interaction = memo(function Interaction(props: InteractionProps) {
     const { currentRequest } = props
     const navigate = useNavigate()
     const { Message } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const [isDangerRequest, setIsDanger] = useState(false)
     const [confirmDisabled, setConfirmDisabled] = useState(false)
@@ -90,7 +90,7 @@ export const Interaction = memo(function Interaction(props: InteractionProps) {
             await confirmActionRef.current(isLastRequest)
             await onRequestCountMightChanged()
         } catch (error) {
-            showSnackbar(
+            enqueueSnackbar(
                 <Typography sx={{ textAlign: 'center', width: '275px' }}>
                     <Trans>There was a network or RPC provider error, please try again later!</Trans>
                     <br />
@@ -99,7 +99,7 @@ export const Interaction = memo(function Interaction(props: InteractionProps) {
                 { variant: 'error', autoHideDuration: 5000 },
             )
         }
-    }, [isLastRequest, onRequestCountMightChanged, showSnackbar])
+    }, [isLastRequest, onRequestCountMightChanged, enqueueSnackbar])
 
     const actionRunning = confirmLoading || cancelLoading
     const CancelButton = (
diff --git a/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx b/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx
index f890cdf6146f..88addfb766e0 100644
--- a/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx
+++ b/packages/mask/popups/pages/Wallet/SetPaymentPassword/index.tsx
@@ -7,7 +7,7 @@ import {
     getDefaultWalletPassword,
     type Wallet,
 } from '@masknet/shared-base'
-import { ActionButton, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { ActionButton, makeStyles, useSnackbar } from '@masknet/theme'
 import { useBalance, useReverseAddress, useWallets } from '@masknet/web3-hooks-base'
 import { EVMExplorerResolver } from '@masknet/web3-providers'
 import { formatBalance } from '@masknet/web3-shared-base'
@@ -179,7 +179,7 @@ export const Component = memo(function SetPaymentPassword() {
     const wallets = useWallets()
     const [params] = useSearchParams()
     const [isCreating, setIsCreating] = useState(!!params.get('isCreating'))
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const theme = useTheme()
 
     const {
@@ -210,7 +210,7 @@ export const Component = memo(function SetPaymentPassword() {
 
                 if (hasPassword) {
                     const from = params.get('from')
-                    showSnackbar(<Trans>Set payment password successfully.</Trans>, { variant: 'success' })
+                    enqueueSnackbar(<Trans>Set payment password successfully.</Trans>, { variant: 'success' })
                     CrossIsolationMessages.events.passwordStatusUpdated.sendToAll(true)
                     params.delete('from')
                     navigate({ pathname: from || PopupRoutes.Wallet, search: params.toString() }, { replace: true })
diff --git a/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx b/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx
index 97caf1fb4039..620990d1c830 100644
--- a/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx
+++ b/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx
@@ -14,7 +14,7 @@ import {
     TokenIcon,
 } from '@masknet/shared'
 import { Days, EMPTY_LIST, NetworkPluginID } from '@masknet/shared-base'
-import { MaskThemeProvider, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { MaskThemeProvider, makeStyles, useSnackbar } from '@masknet/theme'
 import { useAccount, useFungibleTokenBalance, useWeb3State } from '@masknet/web3-hooks-base'
 import { TokenType, formatBalance, formatCurrency, leftShift } from '@masknet/web3-shared-base'
 import { type ChainId, SchemaType, isNativeTokenAddress } from '@masknet/web3-shared-evm'
@@ -149,7 +149,7 @@ export const Component = memo(function TokenDetailPage() {
     const asset = useAsset(chainId, address, account)
 
     useTitle(asset ? `${asset.symbol}(${asset.name})` : 'Loading Asset...')
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const { setExtension } = useContext(PageTitleContext)
     const { Token } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
 
@@ -178,14 +178,14 @@ export const Component = memo(function TokenDetailPage() {
                         schema: SchemaType.ERC20,
                         address: asset.address,
                     })
-                    showSnackbar(<Trans>Asset is hidden.</Trans>)
+                    enqueueSnackbar(<Trans>Asset is hidden.</Trans>, { variant: 'success' })
                     navigate(-1)
                 }}>
                 <Icons.EyeOff size={24} />
             </Button>,
         )
         return () => setExtension(undefined)
-    }, [chainId, asset, isNativeToken, classes.deleteButton, showSnackbar, account])
+    }, [chainId, asset, isNativeToken, classes.deleteButton, enqueueSnackbar, account])
 
     return (
         <div className={classes.halo}>
diff --git a/packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx b/packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx
index c2d1cffc92d8..23fb40aaa9e8 100644
--- a/packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx
+++ b/packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx
@@ -1,7 +1,7 @@
 import { Icons } from '@masknet/icons'
 import { ProgressiveText, TokenIcon, useAvailableBalance } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
-import { ActionButton, MaskColors, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { ActionButton, MaskColors, makeStyles, useSnackbar } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import {
     ChainContextProvider,
@@ -154,7 +154,7 @@ export const FungibleTokenSection = memo(function FungibleTokenSection() {
         account,
         chainId,
     })
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const [state, transfer] = useAsyncFn(async () => {
         if (!recipient || isZero(totalAmount) || !token?.decimals) return
@@ -169,7 +169,7 @@ export const FungibleTokenSection = memo(function FungibleTokenSection() {
         } catch (err) {
             let message = (err as Error).message
             message = message.includes('"blockNumber":') ? '' : message
-            showSnackbar(<Trans>Failed to transfer token: {message}</Trans>, { variant: 'error' })
+            enqueueSnackbar(<Trans>Failed to transfer token: {message}</Trans>, { variant: 'error' })
         }
     }, [address, chainId, recipient, totalAmount, token?.decimals, gasConfig, network?.rpcUrl])
 
diff --git a/packages/mask/popups/pages/Wallet/components/DisconnectModal/index.tsx b/packages/mask/popups/pages/Wallet/components/DisconnectModal/index.tsx
index dca83a87864c..189f482c7171 100644
--- a/packages/mask/popups/pages/Wallet/components/DisconnectModal/index.tsx
+++ b/packages/mask/popups/pages/Wallet/components/DisconnectModal/index.tsx
@@ -1,7 +1,7 @@
 import Services from '#services'
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
-import { makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
+import { makeStyles, useSnackbar } from '@masknet/theme'
 import { useWallet } from '@masknet/web3-hooks-base'
 import { Box, Typography } from '@mui/material'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
@@ -92,7 +92,7 @@ interface DisconnectModalProps {
 const DisconnectModal = memo(function DisconnectModal({ origin, onClose }: DisconnectModalProps) {
     const queryClient = useQueryClient()
     const { classes, cx } = useStyles()
-    const { showSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const address = useWallet()?.address
     const { mutate: onDisconnect } = useMutation({
         mutationFn: async (): Promise<void> => {
@@ -101,7 +101,7 @@ const DisconnectModal = memo(function DisconnectModal({ origin, onClose }: Disco
         },
         onMutate: async () => {
             await queryClient.invalidateQueries({ queryKey: ['wallet-granted-origins', address] })
-            showSnackbar(
+            enqueueSnackbar(
                 <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Icons.FillSuccess style={{ marginRight: 6 }} />
                     <Trans>Disconnected successfully.</Trans>
@@ -121,7 +121,7 @@ const DisconnectModal = memo(function DisconnectModal({ origin, onClose }: Disco
         },
         onMutate: async () => {
             await queryClient.invalidateQueries({ queryKey: ['wallet-granted-origins', address!] })
-            showSnackbar(
+            enqueueSnackbar(
                 <Box sx={{ display: 'flex', alignItems: 'center' }}>
                     <Icons.FillSuccess style={{ marginRight: 6 }} />
                     <Trans>Disconnected successfully.</Trans>
diff --git a/packages/plugins/FileService/src/SiteAdaptor/FileViewer.tsx b/packages/plugins/FileService/src/SiteAdaptor/FileViewer.tsx
index a505ff1dba84..b207c954fb94 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/FileViewer.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/FileViewer.tsx
@@ -1,5 +1,5 @@
 import { Paper } from '@mui/material'
-import { makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { makeStyles, useSnackbar } from '@masknet/theme'
 import type { FileInfo } from '../types.js'
 import { usePluginWrapper } from '@masknet/plugin-infra/content-script'
 import { DisplayingFileList } from './components/FileList.js'
@@ -26,23 +26,23 @@ export function FileViewer({ files }: { files: FileInfo[] }) {
     usePluginWrapper(true)
     const { classes } = useStyles()
 
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const handleSave = useCallback(
         async (file: FileInfo) => {
             try {
                 await PluginFileServiceRPC.setFileInfo(file)
-                showSnackbar(<Trans>File saved</Trans>, {
+                enqueueSnackbar(<Trans>File saved</Trans>, {
                     variant: 'success',
-                    message: <Trans>You've saved {file.name} to Web3 file service.</Trans>,
+                    detail: <Trans>You've saved {file.name} to Web3 file service.</Trans>,
                 })
             } catch {
-                showSnackbar(<Trans>Failed to save file</Trans>, {
+                enqueueSnackbar(<Trans>Failed to save file</Trans>, {
                     variant: 'error',
-                    message: <Trans>Failed to save the file. Please try again.</Trans>,
+                    detail: <Trans>Failed to save the file. Please try again.</Trans>,
                 })
             }
         },
-        [showSnackbar, showSnackbar],
+        [enqueueSnackbar],
     )
 
     return (
diff --git a/packages/plugins/FileService/src/SiteAdaptor/components/FileList.tsx b/packages/plugins/FileService/src/SiteAdaptor/components/FileList.tsx
index 4a3f592f6018..1f21e3df93bf 100644
--- a/packages/plugins/FileService/src/SiteAdaptor/components/FileList.tsx
+++ b/packages/plugins/FileService/src/SiteAdaptor/components/FileList.tsx
@@ -2,7 +2,7 @@ import { type HTMLProps, useCallback } from 'react'
 import { List, ListItem, Typography } from '@mui/material'
 import { EMPTY_LIST } from '@masknet/shared-base'
 
-import { makeStyles, Boundary, useCustomSnackbar } from '@masknet/theme'
+import { makeStyles, Boundary, useSnackbar } from '@masknet/theme'
 import type { FileInfo } from '../../types.js'
 import {
     DisplayingFile,
@@ -60,21 +60,21 @@ export function FileList({ files, onLoadMore, className, onDownload, onSend, ...
     const { classes, cx } = useStyles()
     const { uploadStateMap, refetchFiles } = useFileManagement()
 
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
     const deleteFile = useCallback(
         async (file: FileInfo) => {
             try {
                 await PluginFileServiceRPC.deleteFile(file.id)
                 refetchFiles()
-                showSnackbar(<Trans>File delete</Trans>, {
+                enqueueSnackbar(<Trans>File delete</Trans>, {
                     variant: 'success',
-                    message: <Trans>File {file.name} deleted.</Trans>,
+                    detail: <Trans>File {file.name} deleted.</Trans>,
                 })
             } catch {
-                showSnackbar(<Trans>File delete failed</Trans>, {
+                enqueueSnackbar(<Trans>File delete failed</Trans>, {
                     variant: 'error',
-                    message: <Trans>Failed to delete, please try again.</Trans>,
+                    detail: <Trans>Failed to delete, please try again.</Trans>,
                 })
             }
         },
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useRefundCallback.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useRefundCallback.tsx
index 32a222c9025a..6a2e6cbd4a14 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useRefundCallback.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useRefundCallback.tsx
@@ -2,7 +2,7 @@ import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { queryClient } from '@masknet/shared-base-ui'
-import { makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { makeStyles, useSnackbar } from '@masknet/theme'
 import { useChainContext, useWeb3Utils } from '@masknet/web3-hooks-base'
 import { EVMContract, EVMWeb3, SolanaChainResolver } from '@masknet/web3-providers'
 import { FireflyRedPacketAPI } from '@masknet/web3-providers/types'
@@ -68,7 +68,7 @@ interface SolanaRefundOptions {
 }
 export function useSolanaRefundCallback({ rpid, chainId, tokenSymbol, tokenDecimals }: SolanaRefundOptions) {
     const { classes } = useStyles()
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const Utils = useWeb3Utils(NetworkPluginID.PLUGIN_SOLANA)
     const [isRefunded, setIsRefunded] = useState(false)
     const { account } = useChainContext()
@@ -115,7 +115,7 @@ export function useSolanaRefundCallback({ rpid, chainId, tokenSymbol, tokenDecim
 
             const remain = redpacket.totalAmount.sub(redpacket.claimedAmount)
             setIsRefunded(true)
-            showSnackbar(
+            enqueueSnackbar(
                 <span className={classes.message}>
                     <Trans>
                         Refund {formatBalance(remain.toString(), tokenDecimals, { significant: 2, isPrecise: true })}{' '}
@@ -136,7 +136,7 @@ export function useSolanaRefundCallback({ rpid, chainId, tokenSymbol, tokenDecim
             )
         } catch (error) {
             if (Error.isError(error)) {
-                showSnackbar(error.message, { variant: 'error' })
+                enqueueSnackbar(error.message, { variant: 'error' })
             }
             throw error
         }
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/CustomCover.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/CustomCover.tsx
index 71dddd6a1828..21350fa7ca03 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/views/CustomCover.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/views/CustomCover.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { formatFileSize, ImageEditorModal, UploadDropArea, useUnmountedRef } from '@masknet/shared'
-import { makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { makeStyles, useSnackbar } from '@masknet/theme'
 import { FireflyConfig, FireflyRedPacket } from '@masknet/web3-providers'
 import { Box, Button, DialogActions, Typography } from '@mui/material'
 import { useEffect, useMemo, useState } from 'react'
@@ -81,7 +81,7 @@ export function CustomCover() {
         }
     }, [url])
 
-    const snackbar = useCustomSnackbar()
+    const snackbar = useSnackbar()
     const unmountedRef = useUnmountedRef()
     const [{ loading: saving }, save] = useAsyncFn(async () => {
         if (!blob) return
@@ -102,9 +102,9 @@ export function CustomCover() {
                 throw new Error('No theme created')
             }
         } catch (err) {
-            snackbar.showSnackbar(t`Failed to create theme.`, {
+            snackbar.enqueueSnackbar(t`Failed to create theme.`, {
                 variant: 'error',
-                message: (err as Error).message,
+                detail: (err as Error).message,
             })
         }
     }, [blob])
diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/VotingDialog.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/VotingDialog.tsx
index 11f164b69c98..21da70c555a8 100644
--- a/packages/plugins/Snapshot/src/SiteAdaptor/VotingDialog.tsx
+++ b/packages/plugins/Snapshot/src/SiteAdaptor/VotingDialog.tsx
@@ -1,16 +1,16 @@
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
-import { InjectedDialog, PluginWalletStatusBar, useSnackbarCallback, WalletConnectedBoundary } from '@masknet/shared'
+import { InjectedDialog, PluginWalletStatusBar, WalletConnectedBoundary } from '@masknet/shared'
 import { EMPTY_LIST, formatWithCommas, type NetworkPluginID } from '@masknet/shared-base'
-import { ActionButton, makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { ActionButton, makeStyles, useSnackbar } from '@masknet/theme'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import { EVMWeb3 } from '@masknet/web3-providers'
 import { formatCount } from '@masknet/web3-shared-base'
 import { checksumAddress } from '@masknet/web3-shared-evm'
 import { Box, Button, DialogActions, DialogContent, Link, Typography } from '@mui/material'
 import { useQueryClient } from '@tanstack/react-query'
-import { unstable_useCacheRefresh, useContext, useMemo, useState } from 'react'
+import { unstable_useCacheRefresh, useContext, useMemo, useState, useCallback } from 'react'
 import { SNAPSHOT_VOTE_DOMAIN } from '../constants.js'
 import { SnapshotContext } from '../context.js'
 import { PluginSnapshotRPC } from '../messages.js'
@@ -121,10 +121,10 @@ export function VotingDialog({ open, onClose }: VotingDialogProps) {
 
     const [loading, setLoading] = useState(false)
     const retry = unstable_useCacheRefresh()
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const queryClient = useQueryClient()
-    const onVoteConfirm = useSnackbarCallback(
-        async () => {
+    const onVoteConfirm = useCallback(() => {
+        const act = async () => {
             setLoading(true)
             const isType2 = identifier.id.startsWith('0x')
             const types = {
@@ -147,8 +147,8 @@ export function VotingDialog({ open, onClose }: VotingDialogProps) {
                 app: isType2 ? 'snapshot-v2' : 'snapshot',
             }
             const domain = SNAPSHOT_VOTE_DOMAIN
-            showSnackbar(<Trans>Vote</Trans>, {
-                message: <Trans>Confirm this Signature in your wallet.</Trans>,
+            enqueueSnackbar(<Trans>Vote</Trans>, {
+                detail: <Trans>Confirm this Signature in your wallet.</Trans>,
                 autoHideDuration: 3000,
             })
             const sig = await EVMWeb3.signMessage(
@@ -177,18 +177,28 @@ export function VotingDialog({ open, onClose }: VotingDialogProps) {
             setSelected(EMPTY_LIST)
             queryClient.invalidateQueries({ queryKey: ['snapshot', 'proposal', identifier.id] })
             return result
-        },
-        [selectedIndexes, identifier, account, proposal],
-        () => {
-            setLoading(false)
-            onClose()
-            retry()
-        },
-        (_err: Error) => setLoading(false),
-        void 0,
-        messageText(<Trans>Your vote has been successful.</Trans>),
-        messageText(<Trans>Please try again if you failed to vote.</Trans>),
-    )
+        }
+        act().then(
+            (res) => {
+                enqueueSnackbar(messageText(<Trans>Your vote has been successful.</Trans>), {
+                    variant: 'success',
+                    preventDuplicate: true,
+                })
+                setLoading(false)
+                onClose()
+                retry()
+                return res
+            },
+            (error: unknown) => {
+                enqueueSnackbar(messageText(<Trans>Please try again if you failed to vote.</Trans>), {
+                    preventDuplicate: true,
+                    variant: 'error',
+                })
+                setLoading(false)
+                throw error
+            },
+        )
+    }, [selectedIndexes, identifier, account, proposal])
     const link = `https://snapshot.box/#/${identifier.space}/proposal/${identifier.id}`
 
     return (
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/contexts/RuntimeProvider.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/contexts/RuntimeProvider.tsx
index 790e3e59a0fb..e1f2462d1888 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/contexts/RuntimeProvider.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/contexts/RuntimeProvider.tsx
@@ -1,4 +1,3 @@
-import type { ShowSnackbarOptions, SnackbarKey, SnackbarMessage } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { createContext, useContext, type PropsWithChildren } from 'react'
 
@@ -15,7 +14,6 @@ export interface RuntimeOptions {
         excludes: Web3Helper.FungibleTokenAll[],
     ): Promise<Web3Helper.FungibleTokenAll | null>
     showToolTip(options: ShowTooltipOptions): void
-    showSnackbar(text: SnackbarMessage, options?: ShowSnackbarOptions): SnackbarKey
 }
 
 const RuntimeContext = createContext<RuntimeOptions>(null!)
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/useImplementRuntime.ts b/packages/plugins/Trader/src/SiteAdaptor/trader/useImplementRuntime.ts
index a99bbc63386b..00294cebc69f 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/useImplementRuntime.ts
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/useImplementRuntime.ts
@@ -7,7 +7,7 @@ import { useCallback, useMemo } from 'react'
 import type { RuntimeOptions } from './contexts/RuntimeProvider.js'
 import { useTrade } from './contexts/TradeProvider.js'
 import { useSupportedChains } from './hooks/useSupportedChains.js'
-import { useCustomSnackbar } from '@masknet/theme'
+import { useSnackbar } from '@masknet/theme'
 
 export function useImplementRuntime(): RuntimeOptions {
     const chainQuery = useSupportedChains()
@@ -37,7 +37,7 @@ export function useImplementRuntime(): RuntimeOptions {
         [isSwap, chainQuery.data, fromChainId],
     )
 
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
 
-    return useMemo(() => ({ pickToken, basePath: '', showToolTip: noop, showSnackbar }), [pickToken, showSnackbar])
+    return useMemo(() => ({ pickToken, basePath: '', showToolTip: noop, enqueueSnackbar }), [pickToken, enqueueSnackbar])
 }
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
index a3360f5b9fff..062f1f4c284f 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
@@ -53,6 +53,7 @@ import { useBridgable } from '../hooks/useBridgable.js'
 import { useBridgeData } from '../hooks/useBridgeData.js'
 import { useToken } from '../hooks/useToken.js'
 import { useTokenPrice } from '../hooks/useTokenPrice.js'
+import { useSnackbar } from '@masknet/theme'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -191,7 +192,8 @@ const useStyles = makeStyles()((theme) => ({
 export const BridgeConfirm = memo(function BridgeConfirm() {
     const { t } = useLingui()
     const { classes, cx, theme } = useStyles()
-    const { basePath, showToolTip, showSnackbar } = useRuntime()
+    const { enqueueSnackbar } = useSnackbar()
+    const { basePath, showToolTip } = useRuntime()
     const navigate = useNavigate()
     const {
         mode,
@@ -322,8 +324,8 @@ export const BridgeConfirm = memo(function BridgeConfirm() {
             })
 
             if (!hash) {
-                showSnackbar(t`Bridge`, {
-                    message: <Trans>Transaction rejected</Trans>,
+                enqueueSnackbar(t`Bridge`, {
+                    detail: <Trans>Transaction rejected</Trans>,
                     variant: 'error',
                 })
                 return
@@ -331,8 +333,8 @@ export const BridgeConfirm = memo(function BridgeConfirm() {
             queryClient.invalidateQueries({ queryKey: ['fungible-token', 'balance'] })
             const receipt = await Web3.getTransactionReceipt(hash)
             if (isTransactionReceiptSuccess(receipt)) {
-                showSnackbar(t`Bridge`, {
-                    message: (
+                enqueueSnackbar(t`Bridge`, {
+                    detail: (
                         <MuiLink
                             sx={{ wordBreak: 'break-word' }}
                             className={classes.link}
@@ -351,8 +353,9 @@ export const BridgeConfirm = memo(function BridgeConfirm() {
                     processing: true,
                 })
             } else {
-                showSnackbar(t`Bridge`, {
-                    message: <Trans>Failed to bridge</Trans>,
+                enqueueSnackbar(t`Bridge`, {
+                    detail: <Trans>Failed to bridge</Trans>,
+                    variant: 'error',
                 })
             }
             await addTransaction(account, {
@@ -397,8 +400,8 @@ export const BridgeConfirm = memo(function BridgeConfirm() {
             })
             navigate(url, { replace: true })
         } catch (err) {
-            showSnackbar(t`Bridge`, {
-                message: (err as Error).message,
+            enqueueSnackbar(t`Bridge`, {
+                detail: (err as Error).message,
                 variant: 'error',
             })
         }
@@ -412,7 +415,7 @@ export const BridgeConfirm = memo(function BridgeConfirm() {
         spender,
         bridge,
         sendBridge,
-        showSnackbar,
+        enqueueSnackbar,
         fromChainId,
         toChainId,
         gasFee,
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
index fad4697f5ca8..fe0078aa86b5 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
@@ -32,6 +32,7 @@ import { useLiquidityResources } from '../hooks/useLiquidityResources.js'
 import { useSwapData } from '../hooks/useSwapData.js'
 import { useSwappable } from '../hooks/useSwappable.js'
 import { useWaitForTransaction } from '../hooks/useWaitForTransaction.js'
+import { useSnackbar } from '@masknet/theme'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -167,7 +168,8 @@ export const Confirm = memo(function Confirm() {
     const { t } = useLingui()
     const { classes, cx, theme } = useStyles()
     const navigate = useNavigate()
-    const { basePath, showToolTip, showSnackbar } = useRuntime()
+    const { enqueueSnackbar } = useSnackbar()
+    const { basePath, showToolTip } = useRuntime()
     const {
         mode,
         inputAmount,
@@ -283,8 +285,8 @@ export const Confirm = memo(function Confirm() {
             })
 
             if (!hash) {
-                showSnackbar(t`Swap`, {
-                    message: <Trans>Transaction rejected</Trans>,
+                enqueueSnackbar(t`Swap`, {
+                    detail: <Trans>Transaction rejected</Trans>,
                     variant: 'error',
                 })
                 return
@@ -294,8 +296,8 @@ export const Confirm = memo(function Confirm() {
                 await waitForTransaction({ chainId, hash })
                 const received = await getReceived({ hash, account, chainId })
                 if (received && !unmountedRef.current) {
-                    showSnackbar(t`Swap`, {
-                        message: (
+                    enqueueSnackbar(t`Swap`, {
+                        detail: (
                             <MuiLink
                                 className={classes.toastLink}
                                 color="inherit"
@@ -314,8 +316,8 @@ export const Confirm = memo(function Confirm() {
                     })
                 }
             } catch {
-                showSnackbar(t`Swap`, {
-                    message: <Trans>Wait too long for the confirmation.</Trans>,
+                enqueueSnackbar(t`Swap`, {
+                    detail: <Trans>Wait too long for the confirmation.</Trans>,
                     variant: 'error',
                 })
             }
@@ -356,8 +358,8 @@ export const Confirm = memo(function Confirm() {
             const url = urlcat(basePath, RoutePaths.Transaction, { hash, chainId, mode })
             navigate(url, { replace: true })
         } catch (err) {
-            showSnackbar(t`Swap`, {
-                message: (err as Error).message,
+            enqueueSnackbar(t`Swap`, {
+                detail: (err as Error).message,
                 variant: 'error',
             })
         }
@@ -368,7 +370,7 @@ export const Confirm = memo(function Confirm() {
         transaction,
         spender,
         sendSwap,
-        showSnackbar,
+        enqueueSnackbar,
         getReceived,
         account,
         gasConfig,
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx
index 3c2ab069c9ab..824a70d4e8ab 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Transaction.tsx
@@ -2,7 +2,7 @@ import { Trans, useLingui } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { CopyButton, EmptyStatus, NetworkIcon, ProgressiveText, Spinner, useUnmountedRef } from '@masknet/shared'
 import { NetworkPluginID, Sniffings } from '@masknet/shared-base'
-import { alpha, LoadingBase, makeStyles } from '@masknet/theme'
+import { alpha, LoadingBase, makeStyles, useSnackbar } from '@masknet/theme'
 import { useAccount, useNetwork, useWeb3Connection, useWeb3Utils } from '@masknet/web3-hooks-base'
 import { EVMExplorerResolver, OKX } from '@masknet/web3-providers'
 import { dividedBy, formatBalance, formatCompact, leftShift, TransactionStatusType } from '@masknet/web3-shared-base'
@@ -237,7 +237,8 @@ export const Transaction = memo(function Transaction() {
     const { t } = useLingui()
     const { reset, setFromToken, mode, setToToken } = useTrade()
     const { classes, cx, theme } = useStyles()
-    const { basePath, showSnackbar } = useRuntime()
+    const { enqueueSnackbar } = useSnackbar()
+    const { basePath } = useRuntime()
     const navigate = useNavigate()
     const [params, setParams] = useSearchParams()
     const hash = params.get('hash')
@@ -301,8 +302,8 @@ export const Transaction = memo(function Transaction() {
             const received = await getReceived({ hash: toTxHash, account, chainId: toChainId })
 
             if (received && !unmountedRef.current) {
-                showSnackbar(t`Bridge`, {
-                    message: (
+                enqueueSnackbar(t`Bridge`, {
+                    detail: (
                         <MuiLink
                             className={classes.toastLink}
                             color="inherit"
@@ -321,8 +322,9 @@ export const Transaction = memo(function Transaction() {
                 })
             }
         } else {
-            showSnackbar(t`Bridge`, {
-                message: <Trans>Failed to bridge</Trans>,
+            enqueueSnackbar(t`Bridge`, {
+                detail: <Trans>Failed to bridge</Trans>,
+                variant: 'error',
             })
         }
 
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx
index f0b1f5fd5e7b..a4d16f04ada0 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/components/Lens/FollowLensDialog.tsx
@@ -11,7 +11,7 @@ import {
     WalletConnectedBoundary,
 } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
-import { ActionButton, makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { ActionButton, makeStyles, useSnackbar } from '@masknet/theme'
 import { useChainContext, useNetworkContext, useWallet } from '@masknet/web3-hooks-base'
 import { isSameAddress } from '@masknet/web3-shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
@@ -117,7 +117,7 @@ export function FollowLensDialog({ handle, onClose }: Props) {
     const { account: walletAccount } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
     const { pluginID } = useNetworkContext()
 
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const lensClient = useLensClient()
     const myLensAccount = useMyLensAccount()
     const myLensAddress = myLensAccount?.account.address
@@ -171,9 +171,9 @@ export function FollowLensDialog({ handle, onClose }: Props) {
     const handleClick = useCallback(
         (event: React.MouseEvent<HTMLButtonElement>) => {
             if (task) {
-                showSnackbar(isFollowing ? <Trans>Lens Unfollow</Trans> : <Trans>Lens Follow</Trans>, {
+                enqueueSnackbar(isFollowing ? <Trans>Lens Unfollow</Trans> : <Trans>Lens Follow</Trans>, {
                     processing: true,
-                    message:
+                    detail:
                         isFollowing ?
                             <Trans>Previous unfollow transaction is in processing, please wait and try again.</Trans>
                         :   <Trans>Previous follow transaction is in processing, please wait and try again.</Trans>,
@@ -183,7 +183,7 @@ export function FollowLensDialog({ handle, onClose }: Props) {
             }
             task = (isFollowing ? handleUnfollow() : handleFollow(event)).finally(() => (task = undefined))
         },
-        [handleFollow, handleUnfollow, isFollowing, showSnackbar],
+        [handleFollow, handleUnfollow, isFollowing, enqueueSnackbar],
     )
 
     const accountConditions = !walletAccount || !currentAccount || pluginID !== NetworkPluginID.PLUGIN_EVM
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/hooks/Lens/useFollow.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/hooks/Lens/useFollow.tsx
index a2e8cdc8c183..81d7fc303724 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/hooks/Lens/useFollow.tsx
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/hooks/Lens/useFollow.tsx
@@ -2,7 +2,7 @@ import type { EvmAddress } from '@lens-protocol/client'
 import { Trans, useLingui } from '@lingui/react/macro'
 import { useLensClient, useMyLensAccount } from '@masknet/shared'
 import type { NetworkPluginID } from '@masknet/shared-base'
-import { useCustomSnackbar, type ShowSnackbarOptions, type SnackbarKey, type SnackbarMessage } from '@masknet/theme'
+import { useSnackbar, type ShowMaskSnackbarOptions, type SnackbarKey, type SnackbarMessage } from '@masknet/theme'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { useCallback, useRef, useState } from 'react'
@@ -19,17 +19,17 @@ export function useFollow({ accountAddress, onSuccess, onFailed }: FollowOptions
     const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
 
     const snackbarKeyRef = useRef<SnackbarKey>(undefined)
-    const { showSnackbar, closeSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar, closeSnackbar } = useSnackbar()
 
     const showSingletonSnackbar = useCallback(
-        (title: SnackbarMessage, options: ShowSnackbarOptions) => {
+        (title: SnackbarMessage, options: ShowMaskSnackbarOptions) => {
             if (snackbarKeyRef.current !== undefined) closeSnackbar(snackbarKeyRef.current)
-            snackbarKeyRef.current = showSnackbar(title, options)
+            snackbarKeyRef.current = enqueueSnackbar(title, options)
             return () => {
                 closeSnackbar(snackbarKeyRef.current)
             }
         },
-        [showSnackbar, closeSnackbar],
+        [enqueueSnackbar, closeSnackbar],
     )
 
     const myLensAccount = useMyLensAccount()
@@ -57,7 +57,7 @@ export function useFollow({ accountAddress, onSuccess, onFailed }: FollowOptions
                     showSingletonSnackbar(t`Follow Lens handle`, {
                         processing: false,
                         variant: 'warning',
-                        message: <Trans>Already following</Trans>,
+                        detail: <Trans>Already following</Trans>,
                     })
                 } else if (
                     !message.includes('Transaction was rejected') &&
@@ -70,7 +70,7 @@ export function useFollow({ accountAddress, onSuccess, onFailed }: FollowOptions
                     showSingletonSnackbar(t`Follow Lens handle`, {
                         processing: false,
                         variant: 'error',
-                        message: <Trans>Network error, try again: {error.message}</Trans>,
+                        detail: <Trans>Network error, try again: {error.message}</Trans>,
                     })
                 }
             } finally {
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/hooks/Lens/useUnfollow.ts b/packages/plugins/Web3Profile/src/SiteAdaptor/hooks/Lens/useUnfollow.ts
index 2528a4c16d8f..095ab9c39311 100644
--- a/packages/plugins/Web3Profile/src/SiteAdaptor/hooks/Lens/useUnfollow.ts
+++ b/packages/plugins/Web3Profile/src/SiteAdaptor/hooks/Lens/useUnfollow.ts
@@ -1,7 +1,7 @@
 import { useLingui } from '@lingui/react/macro'
 import { useLensClient, useMyLensAccount } from '@masknet/shared'
 import type { NetworkPluginID } from '@masknet/shared-base'
-import { useCustomSnackbar, type ShowSnackbarOptions, type SnackbarKey, type SnackbarMessage } from '@masknet/theme'
+import { useSnackbar, type ShowMaskSnackbarOptions, type SnackbarKey, type SnackbarMessage } from '@masknet/theme'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { useCallback, useRef, useState } from 'react'
@@ -18,17 +18,17 @@ export function useUnfollow({ accountAddress, onSuccess, onFailed }: UnfollowOpt
     const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
 
     const snackbarKeyRef = useRef<SnackbarKey>(undefined)
-    const { showSnackbar, closeSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar, closeSnackbar } = useSnackbar()
 
     const showSingletonSnackbar = useCallback(
-        (title: SnackbarMessage, options: ShowSnackbarOptions) => {
+        (title: SnackbarMessage, options: ShowMaskSnackbarOptions) => {
             if (snackbarKeyRef.current !== undefined) closeSnackbar(snackbarKeyRef.current)
-            snackbarKeyRef.current = showSnackbar(title, options)
+            snackbarKeyRef.current = enqueueSnackbar(title, options)
             return () => {
                 closeSnackbar(snackbarKeyRef.current)
             }
         },
-        [showSnackbar, closeSnackbar],
+        [enqueueSnackbar, closeSnackbar],
     )
 
     const myLensAccount = useMyLensAccount()
@@ -58,7 +58,7 @@ export function useUnfollow({ accountAddress, onSuccess, onFailed }: UnfollowOpt
                 showSingletonSnackbar(t`Unfollow lens handle`, {
                     processing: false,
                     variant: 'error',
-                    message: t`Network error, try again`,
+                    detail: t`Network error, try again`,
                 })
             }
         } finally {
diff --git a/packages/shared/src/UI/components/ChainBoundary/index.tsx b/packages/shared/src/UI/components/ChainBoundary/index.tsx
index 35555b770203..8a21502a3822 100644
--- a/packages/shared/src/UI/components/ChainBoundary/index.tsx
+++ b/packages/shared/src/UI/components/ChainBoundary/index.tsx
@@ -3,7 +3,7 @@ import { useAsyncFn } from 'react-use'
 import { delay } from '@masknet/kit'
 import { Box } from '@mui/material'
 import { Icons } from '@masknet/icons'
-import { makeStyles, ShadowRootTooltip, ActionButton, useCustomSnackbar } from '@masknet/theme'
+import { makeStyles, ShadowRootTooltip, ActionButton, useSnackbar } from '@masknet/theme'
 import {
     useNetworkContext,
     useChainContext,
@@ -86,7 +86,7 @@ export function ChainBoundaryWithoutContext<T extends NetworkPluginID>(props: Ch
 
     const Web3 = useWeb3Connection(actualPluginID)
 
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const {
         account,
         chainId: actualChainId,
@@ -123,10 +123,10 @@ export function ChainBoundaryWithoutContext<T extends NetworkPluginID>(props: Ch
         } catch (error) {
             if (Error.isError(error)) {
                 if (error.message === 'Chain currently not supported' || error.message === 'Invalid Request') {
-                    showSnackbar(<Trans>Switch Network</Trans>, {
+                    enqueueSnackbar(<Trans>Switch Network</Trans>, {
                         processing: false,
                         variant: 'error',
-                        message: (
+                        detail: (
                             <Trans>
                                 {expectedChainName ?? ''} network is not added to the wallet. Please add it and try
                                 again.
@@ -135,10 +135,10 @@ export function ChainBoundaryWithoutContext<T extends NetworkPluginID>(props: Ch
                         autoHideDuration: 5000,
                     })
                 } else {
-                    showSnackbar(<Trans>Switch Network</Trans>, {
+                    enqueueSnackbar(<Trans>Switch Network</Trans>, {
                         processing: false,
                         variant: 'error',
-                        message: <Trans>Network error or user cancels the process.</Trans>,
+                        detail: <Trans>Network error or user cancels the process.</Trans>,
                         autoHideDuration: 5000,
                     })
                 }
diff --git a/packages/shared/src/UI/components/UploadDropArea/index.tsx b/packages/shared/src/UI/components/UploadDropArea/index.tsx
index cdaca0de8aa0..525479e2ab8e 100644
--- a/packages/shared/src/UI/components/UploadDropArea/index.tsx
+++ b/packages/shared/src/UI/components/UploadDropArea/index.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/core/macro'
 import { Select, Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { formatFileSize } from '@masknet/shared'
-import { alpha, makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { alpha, makeStyles, useSnackbar } from '@masknet/theme'
 import { Button, Typography } from '@mui/material'
 import { type HTMLProps, memo, type ReactNode, useCallback, useRef } from 'react'
 import { useDropArea } from 'react-use'
@@ -77,7 +77,7 @@ interface Props extends HTMLProps<HTMLDivElement>, withClasses<'button'> {
 export const UploadDropArea = memo(function UploadDropArea(props: Props) {
     const { maxFileSize = Infinity, omitSizeLimit, className, accept, subtitle, onSelectFile, ...rest } = props
     const { classes, cx } = useStyles(undefined, { props })
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const handleFiles = (files: File[] | FileList | null) => {
         if (files?.length !== 1) {
             showMessage(101)
@@ -112,16 +112,16 @@ export const UploadDropArea = memo(function UploadDropArea(props: Props) {
     const showMessage = (code: 101 | 102 | 103) => {
         switch (code) {
             case 101:
-                showSnackbar(<Trans>The input is not a single file.</Trans>, { variant: 'error' })
+                enqueueSnackbar(<Trans>The input is not a single file.</Trans>, { variant: 'error' })
                 break
             case 102:
-                showSnackbar(<Trans>Failed to upload file</Trans>, {
+                enqueueSnackbar(<Trans>Failed to upload file</Trans>, {
                     variant: 'error',
-                    message: <Trans>Exceeded the maximum file size of {fileSize}.</Trans>,
+                    detail: <Trans>Exceeded the maximum file size of {fileSize}.</Trans>,
                 })
                 break
             case 103:
-                showSnackbar(<Trans>Invalid file type</Trans>, {
+                enqueueSnackbar(<Trans>Invalid file type</Trans>, {
                     variant: 'error',
                 })
                 break
diff --git a/packages/shared/src/UI/modals/TransactionSnackbar/TransactionSnackbar.tsx b/packages/shared/src/UI/modals/TransactionSnackbar/TransactionSnackbar.tsx
index 0fecc2c9cdd5..e5e32bbda2f1 100644
--- a/packages/shared/src/UI/modals/TransactionSnackbar/TransactionSnackbar.tsx
+++ b/packages/shared/src/UI/modals/TransactionSnackbar/TransactionSnackbar.tsx
@@ -5,13 +5,12 @@ import { Link } from '@mui/material'
 import { Icons } from '@masknet/icons'
 import {
     makeStyles,
-    type ShowSnackbarOptions,
+    type ShowMaskSnackbarOptions,
     type SnackbarKey,
     type SnackbarMessage,
-    useCustomSnackbar,
-    usePopupCustomSnackbar,
+    useSnackbar,
 } from '@masknet/theme'
-import { type NetworkPluginID, createLookupTableResolver, Sniffings } from '@masknet/shared-base'
+import { type NetworkPluginID, createLookupTableResolver } from '@masknet/shared-base'
 import { useWeb3State, useChainContext, useWeb3Utils } from '@masknet/web3-hooks-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { useRenderPhraseCallbackOnDepsChange } from '@masknet/shared-base-ui'
@@ -28,8 +27,7 @@ const useStyles = makeStyles()({
 
 export function useTransactionSnackbar(pluginID: NetworkPluginID) {
     const { classes } = useStyles()
-    const { showSnackbar, closeSnackbar } = useCustomSnackbar()
-    const { showSnackbar: showPopupSnackbar, closeSnackbar: closePopupSnackbar } = usePopupCustomSnackbar()
+    const { enqueueSnackbar, closeSnackbar } = useSnackbar()
     const snackbarKeyRef = useRef<SnackbarKey>(undefined)
 
     const { chainId } = useChainContext()
@@ -81,41 +79,37 @@ export function useTransactionSnackbar(pluginID: NetworkPluginID) {
 
     const resolveSnackbarConfig = createLookupTableResolver<
         TransactionStatusType,
-        Pick<ShowSnackbarOptions, 'message' | 'processing' | 'variant'>
+        Pick<ShowMaskSnackbarOptions, 'detail' | 'processing' | 'variant'>
     >(
         {
             [TransactionStatusType.NOT_DEPEND]: {
                 processing: true,
                 variant: 'default',
-                message: <Trans>Confirm this transaction in your wallet</Trans>,
+                detail: <Trans>Confirm this transaction in your wallet</Trans>,
             },
             [TransactionStatusType.SUCCEED]: {
                 processing: false,
                 variant: 'success',
-                message: <Trans>Transaction Confirmed</Trans>,
+                detail: <Trans>Transaction Confirmed</Trans>,
             },
             [TransactionStatusType.FAILED]: {
                 processing: false,
                 variant: 'error',
-                message: <Trans>Transaction Failed</Trans>,
+                detail: <Trans>Transaction Failed</Trans>,
             },
         },
         {},
     )
 
     const showSingletonSnackbar = useCallback(
-        (title: SnackbarMessage, options: ShowSnackbarOptions) => {
-            if (snackbarKeyRef.current !== undefined)
-                if (Sniffings.is_popup_page) closePopupSnackbar(snackbarKeyRef.current)
-                else closeSnackbar(snackbarKeyRef.current)
-            snackbarKeyRef.current =
-                Sniffings.is_popup_page ? showPopupSnackbar(title, options) : showSnackbar(title, options)
+        (title: SnackbarMessage, options: ShowMaskSnackbarOptions) => {
+            if (snackbarKeyRef.current !== undefined) closeSnackbar(snackbarKeyRef.current)
+            snackbarKeyRef.current = enqueueSnackbar(title, options)
             return () => {
-                if (Sniffings.is_popup_page) closePopupSnackbar(snackbarKeyRef.current)
-                else closeSnackbar(snackbarKeyRef.current)
+                closeSnackbar(snackbarKeyRef.current)
             }
         },
-        [showSnackbar, closeSnackbar, showPopupSnackbar, closePopupSnackbar],
+        [enqueueSnackbar, closeSnackbar],
     )
 
     const format = useFormatMessage()
@@ -140,7 +134,7 @@ export function useTransactionSnackbar(pluginID: NetworkPluginID) {
         showSingletonSnackbar(title, {
             ...resolveSnackbarConfig(progress.status),
 
-            message: (
+            detail: (
                 <Link
                     sx={{ wordBreak: 'break-word' }}
                     className={classes.link}
@@ -188,7 +182,7 @@ export function useTransactionSnackbar(pluginID: NetworkPluginID) {
 
         showSingletonSnackbar(title, {
             ...snackbarConfig,
-            message: message ?? snackbarConfig.message,
+            detail: message ?? snackbarConfig.detail,
         })
         setErrorInfo(undefined)
     }, [JSON.stringify(errorInfo), chainId, format])
diff --git a/packages/shared/src/UI/modals/WalletRiskWarningModal/WalletRiskWarning.tsx b/packages/shared/src/UI/modals/WalletRiskWarningModal/WalletRiskWarning.tsx
index e3c826b7d874..61abc65592c7 100644
--- a/packages/shared/src/UI/modals/WalletRiskWarningModal/WalletRiskWarning.tsx
+++ b/packages/shared/src/UI/modals/WalletRiskWarningModal/WalletRiskWarning.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { Icons } from '@masknet/icons'
 import { DialogActions, DialogContent, Typography } from '@mui/material'
-import { makeStyles, useCustomSnackbar, ActionButton } from '@masknet/theme'
+import { makeStyles, useSnackbar, ActionButton } from '@masknet/theme'
 import { InjectedDialog, ActionButtonPromise, WalletStatusBox } from '@masknet/shared'
 import { Sniffings } from '@masknet/shared-base'
 import { useMatchXS } from '@masknet/shared-base-ui'
@@ -66,13 +66,13 @@ interface WalletRiskWarningProps {
 
 export function WalletRiskWarning({ account, open, onClose }: WalletRiskWarningProps) {
     const { classes, cx } = useStyles()
-    const { showSnackbar } = useCustomSnackbar()
+    const { enqueueSnackbar } = useSnackbar()
     const isMobile = useMatchXS()
 
     const onConfirm = useCallback(async () => {
         try {
             if (!account) {
-                showSnackbar(<Trans>No wallet selected.</Trans>, {
+                enqueueSnackbar(<Trans>No wallet selected.</Trans>, {
                     variant: 'error',
                     preventDuplicate: true,
                 })
@@ -82,7 +82,7 @@ export function WalletRiskWarning({ account, open, onClose }: WalletRiskWarningP
         } catch {
             // do nothing
         }
-    }, [showSnackbar, account, onClose])
+    }, [enqueueSnackbar, account, onClose])
 
     return (
         <InjectedDialog title={isMobile ? undefined : <Trans>Risk Warning</Trans>} open={open} onClose={onClose}>
diff --git a/packages/shared/src/hooks/index.ts b/packages/shared/src/hooks/index.ts
index bdba2c1cb71d..8111f2537d23 100644
--- a/packages/shared/src/hooks/index.ts
+++ b/packages/shared/src/hooks/index.ts
@@ -16,7 +16,6 @@ export * from './usePathTab.js'
 export * from './usePersonaContext.js'
 export * from './usePluginHostPermission.js'
 export * from './usePriceLineChart.js'
-export * from './useSnackbarCallback.js'
 export * from './useSocialAccountsBySettings.js'
 export * from './useTokenMenuCollectionList.js'
 export * from './useTokenSecurity.js'
diff --git a/packages/shared/src/hooks/useSnackbarCallback.tsx b/packages/shared/src/hooks/useSnackbarCallback.tsx
deleted file mode 100644
index 832a91b25ec7..000000000000
--- a/packages/shared/src/hooks/useSnackbarCallback.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useCallback } from 'react'
-import { useCustomSnackbar, usePopupCustomSnackbar } from '@masknet/theme'
-import { Trans } from '@lingui/react/macro'
-
-export function useSnackbarCallback<P extends (...args: any[]) => Promise<T>, T>(options: SnackbarCallback<P, T>): P
-/** Prefer the first overload. */
-export function useSnackbarCallback<P extends (...args: any[]) => Promise<T>, T>(
-    executor: P,
-    deps: React.DependencyList,
-    onSuccess?: (ret: T) => void,
-    onError?: (err: Error) => void,
-    key?: string,
-    successText?: string | React.ReactNode,
-    errorText?: string | React.ReactNode,
-): P
-export function useSnackbarCallback<P extends (...args: any[]) => Promise<T>, T>(
-    opts: SnackbarCallback<P, T> | P,
-    deps?: React.DependencyList,
-    onSuccess?: (ret: T) => void,
-    onError?: (err: Error) => void,
-    key?: string,
-    successText?: string | React.ReactNode,
-    errorText?: string | React.ReactNode,
-) {
-    const { showSnackbar } = useCustomSnackbar()
-    const executor = typeof opts === 'function' ? opts : opts.executor
-    if (typeof opts === 'object') {
-        ;[deps, onSuccess, onError, key, successText] = [
-            opts.deps,
-            opts.onSuccess,
-            opts.onError,
-            opts.key,
-            opts.successText,
-        ]
-    }
-    return useCallback(
-        (...args: any[]) =>
-            executor(...args).then(
-                (res) => {
-                    showSnackbar(successText ?? <Trans>Done</Trans>, {
-                        key,
-                        variant: 'success',
-                        preventDuplicate: true,
-                    })
-                    onSuccess?.(res)
-                    return res
-                },
-                (error: unknown) => {
-                    showSnackbar(errorText ?? `Error: ${(error as Error).message || error}`, {
-                        key,
-                        preventDuplicate: true,
-                        variant: 'error',
-                    })
-                    onError?.(error as Error)
-                    throw error
-                },
-            ),
-        // eslint-disable-next-line react-compiler/react-compiler
-        [...deps!, showSnackbar, executor, onError, onSuccess, key, successText, errorText],
-    )
-}
-
-export function usePopupSnackbarCallback<P extends (...args: any[]) => Promise<T>, T>(
-    options: Omit<SnackbarCallback<P, T>, 'type'>,
-): P
-
-export function usePopupSnackbarCallback<P extends (...args: any[]) => Promise<T>, T>(
-    opts: SnackbarCallback<P, T> | P,
-    deps?: React.DependencyList,
-    onSuccess?: (ret: T) => void,
-    onError?: (err: Error) => void,
-    key?: string,
-    successText?: string,
-) {
-    const { showSnackbar } = usePopupCustomSnackbar()
-    const executor = typeof opts === 'function' ? opts : opts.executor
-    if (typeof opts === 'object') {
-        ;[deps, onSuccess, onError, key, successText] = [
-            opts.deps,
-            opts.onSuccess,
-            opts.onError,
-            opts.key,
-            opts.successText,
-        ]
-    }
-    return useCallback(
-        (...args: any[]) =>
-            executor(...args).then(
-                (res) => {
-                    showSnackbar(successText ?? <Trans>Done</Trans>, {
-                        key,
-                        variant: 'success',
-                        preventDuplicate: true,
-                    })
-                    onSuccess?.(res)
-                    return res
-                },
-                (error: unknown) => {
-                    showSnackbar((error as Error).message, {
-                        key,
-                        preventDuplicate: true,
-                        variant: 'error',
-                    })
-                    onError?.(error as Error)
-                    throw error
-                },
-            ),
-        // eslint-disable-next-line react-compiler/react-compiler
-        [...deps!, showSnackbar, executor, onError, onSuccess, key, successText],
-    )
-}
-
-export interface SnackbarCallback<P extends (...args: any[]) => Promise<T>, T> {
-    executor: P
-    deps: React.DependencyList
-    onSuccess?: (ret: T) => void
-    onError?: (err: Error) => void
-    key?: string
-    successText?: string
-}
diff --git a/packages/theme/src/Components/Snackbar/index.tsx b/packages/theme/src/Components/Snackbar/index.tsx
index 31916b30529b..961bf17b7348 100644
--- a/packages/theme/src/Components/Snackbar/index.tsx
+++ b/packages/theme/src/Components/Snackbar/index.tsx
@@ -1,13 +1,12 @@
-import { useRef, memo, useCallback, forwardRef, type RefAttributes } from 'react'
+import type { RefAttributes } from 'react'
 import { keyframes } from 'tss-react'
 import {
     SnackbarProvider,
     type SnackbarProviderProps,
-    useSnackbar,
     type VariantType,
-    type SnackbarMessage,
     SnackbarContent,
     type OptionsObject,
+    useSnackbar,
     type CustomContentProps,
 } from 'notistack'
 import { Typography, IconButton } from '@mui/material'
@@ -17,139 +16,106 @@ import { alpha } from '../../Theme/colors.js'
 import { makeStyles } from '../../UIHelper/index.js'
 import { usePortalShadowRoot } from '../../ShadowRoot/index.js'
 
-export { PopupSnackbarProvider, usePopupCustomSnackbar } from './PopupSnackbar.js'
-export { SnackbarProvider, useSnackbar } from 'notistack'
-export type { VariantType, OptionsObject, SnackbarKey, SnackbarMessage } from 'notistack'
+export { useSnackbar } from 'notistack'
+export type { SnackbarKey, SnackbarMessage } from 'notistack'
 
-export interface StyleProps {
-    offsetY?: number
+declare module 'notistack' {
+    interface OptionsObject<V extends VariantType = VariantType> extends SharedProps<V> {
+        detail?: React.ReactNode
+        processing?: boolean
+        classes?: Partial<Record<'content' | 'title' | 'message', string>>
+    }
 }
 
-const useStyles = makeStyles<StyleProps, 'title' | 'message'>()((theme, { offsetY }, classNames) => {
+// #region SnackbarContent
+const useStyles = makeStyles<void, 'title' | 'message'>()((theme, _, classNames) => {
     const spinningAnimationKeyFrames = keyframes`
         to {
           transform: rotate(360deg)
         }
     `
-    const title = {
-        color: theme.vars.palette.maskColor.main,
-        fontWeight: 700,
-        fontSize: 14,
-        lineHeight: '18px',
-    } as const
-    const message = {
-        color: theme.vars.palette.maskColor.main,
-        fontWeight: 400,
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: 14,
-        lineHeight: '18px',
-        wordBreak: 'break-word',
-        '& > a': {
-            display: 'flex',
-            alignItems: 'center',
-        },
-        '& :focus:not(:focus-visible)': {
-            outline: 0,
-        },
-    } as const
-    const defaultVariant = {
-        background: theme.vars.palette.maskColor.bottom,
-        color: theme.vars.palette.maskColor.main,
-        boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
-        ...theme.applyStyles('dark', { boxShadow: '0px 4px 30px rgba(255, 255, 255, 0.15)' }),
-        [`& .${classNames.title}`]: {
-            color: 'inherit',
-        },
 
-        [`& .${classNames.message}`]: {
-            color: 'inherit',
-        },
-    }
-    const success = {
-        backgroundColor: theme.vars.palette.maskColor.success,
-        color: theme.vars.palette.maskColor.white,
-        boxShadow: `0px 6px 20px ${alpha(theme.vars.palette.maskColor.success, 0.15)}`,
-        backdropFilter: 'blur(16px)',
-        [`& .${classNames.title}`]: {
-            color: 'inherit',
+    return {
+        content: {
+            alignItems: 'center',
+            padding: theme.spacing(2),
+            borderRadius: 12,
+            width: 380,
+            flexWrap: 'nowrap !important' as 'nowrap',
         },
-        [`& .${classNames.message}`]: {
-            color: alpha(theme.vars.palette.maskColor.white, 0.8),
-            '& svg': {
-                color: theme.vars.palette.maskColor.white,
+        default: {
+            background: theme.vars.palette.maskColor.bottom,
+            color: theme.vars.palette.maskColor.main,
+            boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+            ...theme.applyStyles('dark', { boxShadow: '0px 4px 30px rgba(255, 255, 255, 0.15)' }),
+            [`& .${classNames.title}`]: {
+                color: 'inherit',
             },
-        },
-    } as const
 
-    const error = {
-        background: theme.vars.palette.maskColor.danger,
-        color: theme.vars.palette.maskColor.white,
-        boxShadow: `0px 6px 20px ${alpha(theme.vars.palette.maskColor.danger, 0.15)}`,
-        backdropFilter: 'blur(16px)',
-        [`& .${classNames.title}`]: {
-            color: 'inherit',
-        },
-        [`& .${classNames.message}`]: {
-            color: alpha(theme.vars.palette.maskColor.white, 0.8),
-            '& svg': {
-                color: theme.vars.palette.maskColor.white,
+            [`& .${classNames.message}`]: {
+                color: 'inherit',
             },
         },
-    } as const
-
-    const info = {
-        background: theme.vars.palette.maskColor.primary,
-        color: theme.vars.palette.maskColor.white,
-        boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
-        ...theme.applyStyles('dark', { boxShadow: '0px 4px 30px rgba(255, 255, 255, 0.15)' }),
-        [`& .${classNames.title}`]: {
-            color: 'inherit',
-        },
-        [`& .${classNames.message}`]: {
-            color: alpha(theme.vars.palette.maskColor.white, 0.8),
-            '& svg': {
-                color: theme.vars.palette.maskColor.white,
+        success: {
+            backgroundColor: theme.vars.palette.maskColor.success,
+            color: theme.vars.palette.maskColor.white,
+            boxShadow: `0px 6px 20px ${alpha(theme.vars.palette.maskColor.success, 0.15)}`,
+            backdropFilter: 'blur(16px)',
+            [`& .${classNames.title}`]: {
+                color: 'inherit',
+            },
+            [`& .${classNames.message}`]: {
+                color: alpha(theme.vars.palette.maskColor.white, 0.8),
+                '& svg': {
+                    color: theme.vars.palette.maskColor.white,
+                },
             },
         },
-    }
-
-    const warning = {
-        backgroundColor: theme.vars.palette.maskColor.warn,
-        color: theme.vars.palette.maskColor.white,
-        boxShadow: `0px 6px 20px ${alpha(theme.vars.palette.maskColor.warn, 0.15)}`,
-        backdropFilter: 'blur(16px)',
-        [`& .${classNames.title}`]: {
-            color: 'inherit',
-        },
-        [`& .${classNames.message}`]: {
-            color: alpha(theme.vars.palette.maskColor.white, 0.8),
-            '& svg': {
-                color: theme.vars.palette.maskColor.white,
+        error: {
+            background: theme.vars.palette.maskColor.danger,
+            color: theme.vars.palette.maskColor.white,
+            boxShadow: `0px 6px 20px ${alpha(theme.vars.palette.maskColor.danger, 0.15)}`,
+            backdropFilter: 'blur(16px)',
+            [`& .${classNames.title}`]: {
+                color: 'inherit',
+            },
+            [`& .${classNames.message}`]: {
+                color: alpha(theme.vars.palette.maskColor.white, 0.8),
+                '& svg': {
+                    color: theme.vars.palette.maskColor.white,
+                },
             },
         },
-    } as const
-
-    return {
-        root: {
-            zIndex: 9999,
-            transform: offsetY === undefined ? 'none' : `translateY(${offsetY}px)`,
-            color: theme.vars.palette.maskColor.textLight,
-            pointerEvents: 'inherit',
+        info: {
+            background: theme.vars.palette.maskColor.primary,
+            color: theme.vars.palette.maskColor.white,
+            boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.1)',
+            ...theme.applyStyles('dark', { boxShadow: '0px 4px 30px rgba(255, 255, 255, 0.15)' }),
+            [`& .${classNames.title}`]: {
+                color: 'inherit',
+            },
+            [`& .${classNames.message}`]: {
+                color: alpha(theme.vars.palette.maskColor.white, 0.8),
+                '& svg': {
+                    color: theme.vars.palette.maskColor.white,
+                },
+            },
         },
-        content: {
-            alignItems: 'center',
-            padding: theme.spacing(2),
-            borderRadius: 12,
-            width: 380,
-            flexWrap: 'nowrap !important' as 'nowrap',
+        warning: {
+            backgroundColor: theme.vars.palette.maskColor.warn,
+            color: theme.vars.palette.maskColor.white,
+            boxShadow: `0px 6px 20px ${alpha(theme.vars.palette.maskColor.warn, 0.15)}`,
+            backdropFilter: 'blur(16px)',
+            [`& .${classNames.title}`]: {
+                color: 'inherit',
+            },
+            [`& .${classNames.message}`]: {
+                color: alpha(theme.vars.palette.maskColor.white, 0.8),
+                '& svg': {
+                    color: theme.vars.palette.maskColor.white,
+                },
+            },
         },
-
-        default: defaultVariant,
-        success,
-        error,
-        info,
-        warning,
         icon: {
             display: 'flex',
             alignItems: 'center',
@@ -176,33 +142,31 @@ const useStyles = makeStyles<StyleProps, 'title' | 'message'>()((theme, { offset
                 outline: 0,
             },
         },
-        title,
-        message,
+        title: {
+            color: theme.vars.palette.maskColor.main,
+            fontWeight: 700,
+            fontSize: 14,
+            lineHeight: '18px',
+        },
+        message: {
+            color: theme.vars.palette.maskColor.main,
+            fontWeight: 400,
+            display: 'flex',
+            alignItems: 'center',
+            fontSize: 14,
+            lineHeight: '18px',
+            wordBreak: 'break-word',
+            '& > a': {
+                display: 'flex',
+                alignItems: 'center',
+            },
+            '& :focus:not(:focus-visible)': {
+                outline: 0,
+            },
+        },
     }
 })
 
-export interface CustomSnackbarOptions {
-    detail?: React.ReactNode
-    icon?: React.ReactNode
-    processing?: boolean
-    classes?: Partial<Record<'content' | 'title' | 'message', string>>
-}
-
-type NotistackVariantOptions = CustomSnackbarOptions & Record<string, unknown>
-
-declare module 'notistack' {
-    interface VariantOverrides {
-        default: NotistackVariantOptions
-        success: NotistackVariantOptions
-        error: NotistackVariantOptions
-        warning: NotistackVariantOptions
-        info: NotistackVariantOptions
-    }
-}
-
-interface CustomSnackbarContentProps extends CustomContentProps, CustomSnackbarOptions, RefAttributes<HTMLDivElement> {
-    offsetY?: number
-}
 const IconMap: Record<VariantType, React.ReactNode> = {
     default: <InfoIcon color="inherit" />,
     success: <Icons.SuccessForSnackBar />,
@@ -211,81 +175,80 @@ const IconMap: Record<VariantType, React.ReactNode> = {
     info: <InfoIcon color="inherit" />,
 }
 
-const CustomSnackbarContent = forwardRef<HTMLDivElement, CustomSnackbarContentProps>(
-    function CustomSnackbarContent(props, ref) {
-        const { classes, cx } = useStyles({ offsetY: props.offsetY }, { props })
-        const variantClass = {
-            default: classes.default,
-            success: classes.success,
-            error: classes.error,
-            warning: classes.warning,
-            info: classes.info,
-        }[props.variant]
-        const snackbar = useSnackbar()
-        const loadingIcon = <Icons.CircleLoading className={classes.spinning} />
-        const variantIcon =
-            props.processing ? loadingIcon
-            : props.variant ? IconMap[props.variant]
-            : null
-        let renderedAction: React.ReactNode = (
-            <IconButton className={classes.closeButton} onClick={() => snackbar.closeSnackbar(props.id)}>
-                <CloseIcon />
-            </IconButton>
-        )
-        if (props.action) {
-            renderedAction = typeof props.action === 'function' ? props.action(props.id) : props.action
-        }
-        return (
-            <SnackbarContent ref={ref} className={cx(classes.content, variantClass, props.classes?.content)}>
-                {variantIcon ?
-                    <div className={classes.icon}>{variantIcon}</div>
-                :   null}
-                <div className={classes.texts}>
-                    <Typography className={cx(classes.title, props.classes?.title)} variant="h2">
-                        {props.message}
+function MaskSnackbarContent(props: CustomContentProps & RefAttributes<HTMLDivElement>) {
+    const { classes, cx } = useStyles()
+    const variantClass = {
+        default: classes.default,
+        success: classes.success,
+        error: classes.error,
+        warning: classes.warning,
+        info: classes.info,
+    }[props.variant!]
+    const snackbar = useSnackbar()
+    const loadingIcon = <Icons.CircleLoading className={classes.spinning} />
+    const variantIcon =
+        props.processing ? loadingIcon
+        : props.variant ? IconMap[props.variant]
+        : null
+    let renderedAction: React.ReactNode = (
+        <IconButton className={classes.closeButton} onClick={() => snackbar.closeSnackbar(props.id)}>
+            <CloseIcon />
+        </IconButton>
+    )
+    if (props.action) {
+        renderedAction = typeof props.action === 'function' ? props.action(props.id) : props.action
+    }
+    return (
+        <SnackbarContent ref={props.ref} className={cx(classes.content, variantClass, props.classes?.content)}>
+            {variantIcon ?
+                <div className={classes.icon}>{variantIcon}</div>
+            :   null}
+            <div className={classes.texts}>
+                <Typography className={cx(classes.title, props.classes?.title)} variant="h2">
+                    {props.message}
+                </Typography>
+                {props.detail ?
+                    <Typography className={cx(classes.message, props.classes?.message)} variant="body1">
+                        {props.detail}
                     </Typography>
-                    {props.detail ?
-                        <Typography className={cx(classes.message, props.classes?.message)} variant="body1">
-                            {props.detail}
-                        </Typography>
-                    :   null}
-                </div>
-                <div className={classes.action}>{renderedAction}</div>
-            </SnackbarContent>
-        )
+                :   null}
+            </div>
+            <div className={classes.action}>{renderedAction}</div>
+        </SnackbarContent>
+    )
+}
+// #endregion
+
+// #region Provider
+const useProviderStyles = makeStyles<{ offsetY?: number }>()((theme, { offsetY }) => ({
+    root: {
+        zIndex: 9999,
+        transform: offsetY === undefined ? 'none' : `translateY(${offsetY}px)`,
+        color: theme.vars.palette.maskColor.textLight,
+        pointerEvents: 'inherit',
     },
-)
+}))
 
-export const CustomSnackbarProvider = memo<
-    SnackbarProviderProps & {
-        offsetY?: number
-    }
->(function CustomSnackbarProvider({ offsetY, ...rest }) {
-    const ref = useRef<SnackbarProvider>(null)
-    const { classes } = useStyles({ offsetY })
-    const onDismiss = (key: string | number) => () => {
-        ref.current?.closeSnackbar(key)
-    }
+export interface MaskSnackbarProviderProps extends SnackbarProviderProps {
+    offsetY?: number
+}
 
+export function MaskSnackbarProvider({ offsetY, ...rest }: MaskSnackbarProviderProps) {
+    const { classes } = useProviderStyles({ offsetY })
     return usePortalShadowRoot((container) => (
         <SnackbarProvider
-            ref={ref}
             maxSnack={30}
             disableWindowBlurListener
             anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
             hideIconVariant
             Components={{
-                default: CustomSnackbarContent,
-                success: CustomSnackbarContent,
-                error: CustomSnackbarContent,
-                warning: CustomSnackbarContent,
-                info: CustomSnackbarContent,
+                default: MaskSnackbarContent,
+                success: MaskSnackbarContent,
+                error: MaskSnackbarContent,
+                warning: MaskSnackbarContent,
+                info: MaskSnackbarContent,
             }}
-            action={(key) => (
-                <IconButton size="large" onClick={onDismiss(key)} sx={{ color: 'inherit' }}>
-                    <CloseIcon color="inherit" />
-                </IconButton>
-            )}
+            action={(id) => <SnackbarAction id={id} />}
             classes={{
                 containerRoot: classes.root,
             }}
@@ -293,28 +256,16 @@ export const CustomSnackbarProvider = memo<
             {...rest}
         />
     ))
-})
-
-export interface ShowSnackbarOptions extends OptionsObject, Omit<CustomSnackbarOptions, 'detail'> {
-    message?: React.ReactNode
 }
+// #endregion
 
-export function useCustomSnackbar() {
-    const { enqueueSnackbar, closeSnackbar } = useSnackbar()
-    const showSnackbar = useCallback(
-        (text: SnackbarMessage, options?: ShowSnackbarOptions) => {
-            const { processing, message: detail, icon, classes, variant = 'default', ...rest } = options ?? {}
-            return enqueueSnackbar<VariantType>(text, {
-                variant,
-                detail,
-                icon,
-                processing,
-                classes,
-                ...rest,
-            })
-        },
-        [enqueueSnackbar],
+function SnackbarAction({ id }: { id: string | number }) {
+    const snackbar = useSnackbar()
+    return (
+        <IconButton size="large" onClick={() => snackbar.closeSnackbar(id)} sx={{ color: 'inherit' }}>
+            <CloseIcon color="inherit" />
+        </IconButton>
     )
-
-    return { showSnackbar, closeSnackbar }
 }
+
+export type ShowMaskSnackbarOptions = OptionsObject
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b85558b7912c..4e48f78f9d36 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -594,6 +594,9 @@ importers:
       json-stable-stringify:
         specifier: ^1.1.1
         version: 1.1.1
+      notistack:
+        specifier: ^3.0.2
+        version: 3.0.2(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
       react-avatar-editor:
         specifier: ^13.0.2
         version: 13.0.2(@babel/core@7.27.1)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)

From 56dada115b17c0c86f49de751403d2a1c8f554de Mon Sep 17 00:00:00 2001
From: Jack-Works <Jack-Works@users.noreply.github.com>
Date: Fri, 24 Jul 2026 00:10:09 +0000
Subject: [PATCH 11/15] fix: linter

---
 .../Trader/src/SiteAdaptor/trader/useImplementRuntime.ts     | 5 ++++-
 packages/shared-base-ui/src/locale/en-US.po                  | 1 -
 packages/shared-base-ui/src/locale/ja-JP.po                  | 1 -
 packages/shared-base-ui/src/locale/ko-KR.po                  | 1 -
 packages/shared-base-ui/src/locale/zh-CN.po                  | 1 -
 packages/shared-base-ui/src/locale/zh-TW.po                  | 1 -
 6 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/useImplementRuntime.ts b/packages/plugins/Trader/src/SiteAdaptor/trader/useImplementRuntime.ts
index 00294cebc69f..b1e2f4597d0d 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/useImplementRuntime.ts
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/useImplementRuntime.ts
@@ -39,5 +39,8 @@ export function useImplementRuntime(): RuntimeOptions {
 
     const { enqueueSnackbar } = useSnackbar()
 
-    return useMemo(() => ({ pickToken, basePath: '', showToolTip: noop, enqueueSnackbar }), [pickToken, enqueueSnackbar])
+    return useMemo(
+        () => ({ pickToken, basePath: '', showToolTip: noop, enqueueSnackbar }),
+        [pickToken, enqueueSnackbar],
+    )
 }
diff --git a/packages/shared-base-ui/src/locale/en-US.po b/packages/shared-base-ui/src/locale/en-US.po
index 04675e7b8a3a..939722d5bcfe 100644
--- a/packages/shared-base-ui/src/locale/en-US.po
+++ b/packages/shared-base-ui/src/locale/en-US.po
@@ -2306,7 +2306,6 @@ msgstr ""
 #: packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
 #: packages/mask/popups/pages/Personas/ConnectWallet/index.tsx
 #: packages/plugins/Savings/src/SiteAdaptor/SavingsForm.tsx
-#: packages/shared/src/hooks/useSnackbarCallback.tsx
 #: packages/shared/src/UI/modals/WalletRiskWarningModal/WalletRiskWarning.tsx
 msgid "Done"
 msgstr ""
diff --git a/packages/shared-base-ui/src/locale/ja-JP.po b/packages/shared-base-ui/src/locale/ja-JP.po
index fa0c927fb878..7ab45d213e8e 100644
--- a/packages/shared-base-ui/src/locale/ja-JP.po
+++ b/packages/shared-base-ui/src/locale/ja-JP.po
@@ -2311,7 +2311,6 @@ msgstr ""
 #: packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
 #: packages/mask/popups/pages/Personas/ConnectWallet/index.tsx
 #: packages/plugins/Savings/src/SiteAdaptor/SavingsForm.tsx
-#: packages/shared/src/hooks/useSnackbarCallback.tsx
 #: packages/shared/src/UI/modals/WalletRiskWarningModal/WalletRiskWarning.tsx
 msgid "Done"
 msgstr "完了!"
diff --git a/packages/shared-base-ui/src/locale/ko-KR.po b/packages/shared-base-ui/src/locale/ko-KR.po
index 747052c57c48..9f6ce3fa8246 100644
--- a/packages/shared-base-ui/src/locale/ko-KR.po
+++ b/packages/shared-base-ui/src/locale/ko-KR.po
@@ -2311,7 +2311,6 @@ msgstr ""
 #: packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
 #: packages/mask/popups/pages/Personas/ConnectWallet/index.tsx
 #: packages/plugins/Savings/src/SiteAdaptor/SavingsForm.tsx
-#: packages/shared/src/hooks/useSnackbarCallback.tsx
 #: packages/shared/src/UI/modals/WalletRiskWarningModal/WalletRiskWarning.tsx
 msgid "Done"
 msgstr "완료"
diff --git a/packages/shared-base-ui/src/locale/zh-CN.po b/packages/shared-base-ui/src/locale/zh-CN.po
index 1db2ebe47e71..199d9794c7eb 100644
--- a/packages/shared-base-ui/src/locale/zh-CN.po
+++ b/packages/shared-base-ui/src/locale/zh-CN.po
@@ -2311,7 +2311,6 @@ msgstr ""
 #: packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
 #: packages/mask/popups/pages/Personas/ConnectWallet/index.tsx
 #: packages/plugins/Savings/src/SiteAdaptor/SavingsForm.tsx
-#: packages/shared/src/hooks/useSnackbarCallback.tsx
 #: packages/shared/src/UI/modals/WalletRiskWarningModal/WalletRiskWarning.tsx
 msgid "Done"
 msgstr "完成"
diff --git a/packages/shared-base-ui/src/locale/zh-TW.po b/packages/shared-base-ui/src/locale/zh-TW.po
index 49351116c094..4166644d71ef 100644
--- a/packages/shared-base-ui/src/locale/zh-TW.po
+++ b/packages/shared-base-ui/src/locale/zh-TW.po
@@ -2311,7 +2311,6 @@ msgstr ""
 #: packages/mask/dashboard/modals/BackupPreviewModal/BackupPreviewDialog.tsx
 #: packages/mask/popups/pages/Personas/ConnectWallet/index.tsx
 #: packages/plugins/Savings/src/SiteAdaptor/SavingsForm.tsx
-#: packages/shared/src/hooks/useSnackbarCallback.tsx
 #: packages/shared/src/UI/modals/WalletRiskWarningModal/WalletRiskWarning.tsx
 msgid "Done"
 msgstr "完成！"

From 8e85373394ee7b511994507abe49cd38c1da0433 Mon Sep 17 00:00:00 2001
From: Jack-Works <Jack-Works@users.noreply.github.com>
Date: Fri, 24 Jul 2026 00:15:48 +0000
Subject: [PATCH 12/15] fix: eslint

---
 .../Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx      | 3 +--
 .../plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx    | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
index 062f1f4c284f..5b0dbe84e472 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
@@ -9,7 +9,7 @@ import {
     useUnmountedRef,
 } from '@masknet/shared'
 import { NetworkPluginID, Sniffings } from '@masknet/shared-base'
-import { ActionButton, LoadingBase, makeStyles, ShadowRootTooltip } from '@masknet/theme'
+import { ActionButton, LoadingBase, makeStyles, ShadowRootTooltip, useSnackbar  } from '@masknet/theme'
 import {
     useAccount,
     useNativeTokenPrice,
@@ -53,7 +53,6 @@ import { useBridgable } from '../hooks/useBridgable.js'
 import { useBridgeData } from '../hooks/useBridgeData.js'
 import { useToken } from '../hooks/useToken.js'
 import { useTokenPrice } from '../hooks/useTokenPrice.js'
-import { useSnackbar } from '@masknet/theme'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
index fe0078aa86b5..4223bf890037 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
@@ -3,7 +3,7 @@ import { Select, Trans, useLingui } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { LoadingStatus, PluginWalletStatusBar, ProgressiveText, TokenIcon, useUnmountedRef } from '@masknet/shared'
 import { EMPTY_LIST, NetworkPluginID, Sniffings } from '@masknet/shared-base'
-import { ActionButton, LoadingBase, makeStyles, ShadowRootTooltip } from '@masknet/theme'
+import { ActionButton, LoadingBase, makeStyles, ShadowRootTooltip, useSnackbar  } from '@masknet/theme'
 import { useAccount, useNetwork, useNetworkDescriptor, useWeb3Connection, useWeb3Utils } from '@masknet/web3-hooks-base'
 import {
     dividedBy,
@@ -32,7 +32,6 @@ import { useLiquidityResources } from '../hooks/useLiquidityResources.js'
 import { useSwapData } from '../hooks/useSwapData.js'
 import { useSwappable } from '../hooks/useSwappable.js'
 import { useWaitForTransaction } from '../hooks/useWaitForTransaction.js'
-import { useSnackbar } from '@masknet/theme'
 
 const useStyles = makeStyles()((theme) => ({
     container: {

From 028605bbd24d1843eac9d2d834618e8f684ee2cb Mon Sep 17 00:00:00 2001
From: Jack-Works <Jack-Works@users.noreply.github.com>
Date: Fri, 24 Jul 2026 00:17:13 +0000
Subject: [PATCH 13/15] fix: linter

---
 .../Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx       | 2 +-
 .../plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
index 5b0dbe84e472..23d8ef6df8d7 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/BridgeConfirm.tsx
@@ -9,7 +9,7 @@ import {
     useUnmountedRef,
 } from '@masknet/shared'
 import { NetworkPluginID, Sniffings } from '@masknet/shared-base'
-import { ActionButton, LoadingBase, makeStyles, ShadowRootTooltip, useSnackbar  } from '@masknet/theme'
+import { ActionButton, LoadingBase, makeStyles, ShadowRootTooltip, useSnackbar } from '@masknet/theme'
 import {
     useAccount,
     useNativeTokenPrice,
diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
index 4223bf890037..ba0d2be342df 100644
--- a/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
+++ b/packages/plugins/Trader/src/SiteAdaptor/trader/views/Confirm.tsx
@@ -3,7 +3,7 @@ import { Select, Trans, useLingui } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { LoadingStatus, PluginWalletStatusBar, ProgressiveText, TokenIcon, useUnmountedRef } from '@masknet/shared'
 import { EMPTY_LIST, NetworkPluginID, Sniffings } from '@masknet/shared-base'
-import { ActionButton, LoadingBase, makeStyles, ShadowRootTooltip, useSnackbar  } from '@masknet/theme'
+import { ActionButton, LoadingBase, makeStyles, ShadowRootTooltip, useSnackbar } from '@masknet/theme'
 import { useAccount, useNetwork, useNetworkDescriptor, useWeb3Connection, useWeb3Utils } from '@masknet/web3-hooks-base'
 import {
     dividedBy,

From 825bcb7f298a5c35e57f33bb36bc7b45dfaac631 Mon Sep 17 00:00:00 2001
From: Jack Works <5390719+Jack-Works@users.noreply.github.com>
Date: Thu, 23 Jul 2026 00:00:00 +0000
Subject: [PATCH 14/15] fix snackbar

---
 .../utils/shadow-root/ShadowRootAttachPointRoot.tsx      | 5 ++---
 packages/mask/dashboard/Dashboard.tsx                    | 2 +-
 packages/mask/popups/Popup.tsx                           | 5 ++---
 .../popups/components/PopupSnackbarProvider/index.tsx    | 9 +++++----
 packages/mask/popups/pages/Personas/Home/UI.tsx          | 2 +-
 .../pages/Personas/components/PersonaHeader/UI.tsx       | 3 +--
 .../pages/Personas/components/PersonaHeader/index.tsx    | 1 -
 7 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx b/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx
index 31501bd3c1aa..ecd4764b5b01 100644
--- a/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx
+++ b/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx
@@ -11,8 +11,7 @@ export function ShadowRootAttachPointRoot(children: React.ReactNode) {
         <MaskSnackbarProvider
             disableWindowBlurListener={false}
             anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-            offsetY={Sniffings.is_facebook_page ? 80 : undefined}>
-            {' '}
-        </MaskSnackbarProvider>,
+            offsetY={Sniffings.is_facebook_page ? 80 : undefined}
+        />,
     )(cloneElement, children)
 }
diff --git a/packages/mask/dashboard/Dashboard.tsx b/packages/mask/dashboard/Dashboard.tsx
index 73cda629c8c1..8b0c949a83e5 100644
--- a/packages/mask/dashboard/Dashboard.tsx
+++ b/packages/mask/dashboard/Dashboard.tsx
@@ -44,7 +44,7 @@ export default function Dashboard() {
         <UserContext.Provider />,
         <PersonaContext.Provider initialState={PersonaContextIO} />,
         <ErrorBoundary />,
-        <MaskSnackbarProvider> </MaskSnackbarProvider>,
+        <MaskSnackbarProvider />,
         <SharedContextProvider />,
     )(
         cloneElement,
diff --git a/packages/mask/popups/Popup.tsx b/packages/mask/popups/Popup.tsx
index 19272216adc9..e6d25e9979a6 100644
--- a/packages/mask/popups/Popup.tsx
+++ b/packages/mask/popups/Popup.tsx
@@ -117,13 +117,12 @@ export default function Popups() {
 
         // Provide the minimal environment (i18n, material theme) for CrashUI in page mode
         <LinguiProviderHMR i18n={i18n} />,
+        <PersistQueryClientProvider client={queryClient} persistOptions={queryPersistOptions} />,
         <MaskPopupThemeProvider />,
         <StyledEngineProvider injectFirst enableCssLayer />,
-
         <ErrorBoundary />,
-        <Suspense />,
 
-        <PersistQueryClientProvider client={queryClient} persistOptions={queryPersistOptions} />,
+        <Suspense />,
         <DialogStackingProvider hasGlobalBackdrop={false} />,
         <RootWeb3ContextProvider />,
         <SharedContextProvider />,
diff --git a/packages/mask/popups/components/PopupSnackbarProvider/index.tsx b/packages/mask/popups/components/PopupSnackbarProvider/index.tsx
index 43fb32871498..37898c42ca3c 100644
--- a/packages/mask/popups/components/PopupSnackbarProvider/index.tsx
+++ b/packages/mask/popups/components/PopupSnackbarProvider/index.tsx
@@ -1,4 +1,4 @@
-import type { RefAttributes } from 'react'
+import type { PropsWithChildren, RefAttributes } from 'react'
 import { Typography, collapseClasses } from '@mui/material'
 import { SnackbarProvider, SnackbarContent, type CustomContentProps } from 'notistack'
 import { alpha, makeStyles } from '@masknet/theme'
@@ -46,7 +46,7 @@ const useStyles = makeStyles()((theme) => ({
     info: {},
 }))
 
-export function PopupSnackbarProvider() {
+export function PopupSnackbarProvider(props: PropsWithChildren) {
     const { classes } = useStyles()
 
     return (
@@ -64,8 +64,9 @@ export function PopupSnackbarProvider() {
             }}
             classes={{
                 containerRoot: classes.container,
-            }}
-        />
+            }}>
+            {props.children}
+        </SnackbarProvider>
     )
 }
 
diff --git a/packages/mask/popups/pages/Personas/Home/UI.tsx b/packages/mask/popups/pages/Personas/Home/UI.tsx
index b1d895021f04..7679e6dabca7 100644
--- a/packages/mask/popups/pages/Personas/Home/UI.tsx
+++ b/packages/mask/popups/pages/Personas/Home/UI.tsx
@@ -2,10 +2,10 @@ import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { PopupHomeTabType, useParamTab } from '@masknet/shared'
 import {
+    type EnhanceableSite,
     PopupModalRoutes,
     PopupRoutes,
     type BindingProof,
-    type EnhanceableSite,
     type ProfileAccount,
 } from '@masknet/shared-base'
 import { MaskTabList, makeStyles } from '@masknet/theme'
diff --git a/packages/mask/popups/pages/Personas/components/PersonaHeader/UI.tsx b/packages/mask/popups/pages/Personas/components/PersonaHeader/UI.tsx
index e50751e3b93f..9ff5fa121047 100644
--- a/packages/mask/popups/pages/Personas/components/PersonaHeader/UI.tsx
+++ b/packages/mask/popups/pages/Personas/components/PersonaHeader/UI.tsx
@@ -52,10 +52,9 @@ interface PersonaHeaderUIProps {
     avatar?: string | null
     fingerprint: string
     nickname?: string
-    publicHexString: string
 }
 
-export const PersonaHeaderUI = memo<PersonaHeaderUIProps>(({ avatar, fingerprint, nickname, publicHexString }) => {
+export const PersonaHeaderUI = memo<PersonaHeaderUIProps>(({ avatar, fingerprint, nickname }) => {
     const { classes } = useStyles()
     return (
         <Box className={classes.container}>
diff --git a/packages/mask/popups/pages/Personas/components/PersonaHeader/index.tsx b/packages/mask/popups/pages/Personas/components/PersonaHeader/index.tsx
index cc1d7841fc31..3d89d4358c60 100644
--- a/packages/mask/popups/pages/Personas/components/PersonaHeader/index.tsx
+++ b/packages/mask/popups/pages/Personas/components/PersonaHeader/index.tsx
@@ -26,7 +26,6 @@ export const PersonaHeader = memo(function PersonaHeader() {
                 avatar={avatar}
                 fingerprint={currentPersona.identifier.rawPublicKey}
                 nickname={currentPersona.nickname}
-                publicHexString={currentPersona.identifier.publicKeyAsHex}
             />
         )
     if (matchHome || matchWalletConnect || matchProfilePhoto) return null

From 2740ed30e2a54b28b86382e275d85639e31603b4 Mon Sep 17 00:00:00 2001
From: Jack Works <5390719+Jack-Works@users.noreply.github.com>
Date: Thu, 23 Jul 2026 00:00:00 +0000
Subject: [PATCH 15/15] fix snackbar

---
 cspell.json                                   |   1 +
 .../ContentScriptGlobalProvider.tsx           |   9 +-
 .../shadow-root/ShadowRootAttachPointRoot.tsx |  15 +-
 .../theme/src/Components/Snackbar/index.tsx   |  61 ++-
 patches/README.md                             |   1 +
 patches/notistack@3.0.2.patch                 | 426 ++++++++++++++++++
 pnpm-lock.yaml                                |   7 +-
 pnpm-workspace.yaml                           |   1 +
 8 files changed, 480 insertions(+), 41 deletions(-)
 create mode 100644 patches/notistack@3.0.2.patch

diff --git a/cspell.json b/cspell.json
index 86ff077b59c0..3f36db44c5ea 100644
--- a/cspell.json
+++ b/cspell.json
@@ -82,6 +82,7 @@
         "favourites",
         "filelist",
         "fileservice",
+        "foxact",
         "funder",
         "fusd",
         "gopluslabs",
diff --git a/packages/mask/content-script/utils/shadow-root/ContentScriptGlobalProvider.tsx b/packages/mask/content-script/utils/shadow-root/ContentScriptGlobalProvider.tsx
index d6a84994ee1e..29398a54a10a 100644
--- a/packages/mask/content-script/utils/shadow-root/ContentScriptGlobalProvider.tsx
+++ b/packages/mask/content-script/utils/shadow-root/ContentScriptGlobalProvider.tsx
@@ -1,8 +1,8 @@
 import { i18n } from '@lingui/core'
 import { LinguiProviderHMR, SharedContextProvider } from '@masknet/shared'
-import { jsxCompose } from '@masknet/shared-base'
+import { jsxCompose, Sniffings } from '@masknet/shared-base'
 import { queryClient } from '@masknet/shared-base-ui'
-import { DialogStackingProvider, MaskThemeProvider } from '@masknet/theme'
+import { DialogStackingProvider, MaskThemeProvider, MaskSnackbarProvider } from '@masknet/theme'
 import { RootWeb3ContextProvider } from '@masknet/web3-hooks-base'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
@@ -27,6 +27,11 @@ export function ContentScriptGlobalProvider(children: React.ReactNode) {
         <SharedContextProvider />,
         <LinguiProviderHMR i18n={i18n} />,
         <MaskThemeProvider supportsDimPalette theme={theme} localization={localization} palette={mode} />,
+        <MaskSnackbarProvider
+            disableWindowBlurListener={false}
+            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+            offsetY={Sniffings.is_facebook_page ? 80 : undefined}
+        />,
     )(
         cloneElement,
         process.env.NODE_ENV === 'development' ?
diff --git a/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx b/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx
index ecd4764b5b01..15fba8e1ae63 100644
--- a/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx
+++ b/packages/mask/content-script/utils/shadow-root/ShadowRootAttachPointRoot.tsx
@@ -1,17 +1,8 @@
 import { cloneElement, Suspense } from 'react'
-import { MaskSnackbarProvider } from '@masknet/theme'
 import { ErrorBoundary } from '@masknet/shared-base-ui'
-import { Sniffings, jsxCompose } from '@masknet/shared-base'
+import { jsxCompose } from '@masknet/shared-base'
 
-// Providers added here will be added to ALL ShadowRoots, if you're mean to add a global one, add it in ./SiteUIProvider.tsx
+// Providers added here will be added to EACH ShadowRoots, if you're mean to add a global one, add it in ./ContentScriptGlobalProvider.tsx
 export function ShadowRootAttachPointRoot(children: React.ReactNode) {
-    return jsxCompose(
-        <Suspense />,
-        <ErrorBoundary />,
-        <MaskSnackbarProvider
-            disableWindowBlurListener={false}
-            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-            offsetY={Sniffings.is_facebook_page ? 80 : undefined}
-        />,
-    )(cloneElement, children)
+    return jsxCompose(<Suspense />, <ErrorBoundary />)(cloneElement, children)
 }
diff --git a/packages/theme/src/Components/Snackbar/index.tsx b/packages/theme/src/Components/Snackbar/index.tsx
index 961bf17b7348..d571e10f9f61 100644
--- a/packages/theme/src/Components/Snackbar/index.tsx
+++ b/packages/theme/src/Components/Snackbar/index.tsx
@@ -1,8 +1,9 @@
-import type { RefAttributes } from 'react'
-import { keyframes } from 'tss-react'
+import { useMemo, type RefAttributes } from 'react'
+import { keyframes, type Css } from 'tss-react'
 import {
     SnackbarProvider,
     type SnackbarProviderProps,
+    type MakeStyles,
     type VariantType,
     SnackbarContent,
     type OptionsObject,
@@ -233,29 +234,41 @@ export interface MaskSnackbarProviderProps extends SnackbarProviderProps {
     offsetY?: number
 }
 
+function createEmotionMakeStyles(css: Css): MakeStyles {
+    return (styles) =>
+        Object.fromEntries(Object.entries(styles).map(([name, style]) => [name, css(style)])) as {
+            [name in keyof typeof styles]: string
+        }
+}
+
 export function MaskSnackbarProvider({ offsetY, ...rest }: MaskSnackbarProviderProps) {
-    const { classes } = useProviderStyles({ offsetY })
-    return usePortalShadowRoot((container) => (
-        <SnackbarProvider
-            maxSnack={30}
-            disableWindowBlurListener
-            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-            hideIconVariant
-            Components={{
-                default: MaskSnackbarContent,
-                success: MaskSnackbarContent,
-                error: MaskSnackbarContent,
-                warning: MaskSnackbarContent,
-                info: MaskSnackbarContent,
-            }}
-            action={(id) => <SnackbarAction id={id} />}
-            classes={{
-                containerRoot: classes.root,
-            }}
-            domRoot={container}
-            {...rest}
-        />
-    ))
+    const { classes, css } = useProviderStyles({ offsetY })
+    const makeSnackbarStyles = useMemo(() => createEmotionMakeStyles(css), [css])
+    return usePortalShadowRoot(
+        (container) => (
+            <SnackbarProvider
+                maxSnack={30}
+                disableWindowBlurListener
+                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+                hideIconVariant
+                Components={{
+                    default: MaskSnackbarContent,
+                    success: MaskSnackbarContent,
+                    error: MaskSnackbarContent,
+                    warning: MaskSnackbarContent,
+                    info: MaskSnackbarContent,
+                }}
+                action={(id) => <SnackbarAction id={id} />}
+                classes={{
+                    containerRoot: classes.root,
+                }}
+                domRoot={container}
+                makeStyles={makeSnackbarStyles}
+                {...rest}
+            />
+        ),
+        'Snackbar Portal',
+    )
 }
 // #endregion
 
diff --git a/patches/README.md b/patches/README.md
index c3413abcdcb3..c3e2057ef373 100644
--- a/patches/README.md
+++ b/patches/README.md
@@ -23,3 +23,4 @@
 - typeson-registry: <https://github.com/dfahlander/typeson-registry/issues/37>
 - @scamsniffer/detector: <https://github.com/scamsniffer/scamsniffer/pull/3>
 - @lingui/cli: <https://github.com/lingui/js-lingui/issues/2308> and <https://github.com/lingui/js-lingui/pull/2309>
+- [notistack](https://github.com/iamhosseindhv/notistack/pull/628) not compatible with ShadowRoot
diff --git a/patches/notistack@3.0.2.patch b/patches/notistack@3.0.2.patch
new file mode 100644
index 000000000000..be5bf8777013
--- /dev/null
+++ b/patches/notistack@3.0.2.patch
@@ -0,0 +1,426 @@
+diff --git a/index.d.ts b/index.d.ts
+index 54dbe7d82288deb508ffb16b4dd5d45b75a1a7a5..aeb5f17386838b8ad7a0d4b1e0e94275d0444a91 100644
+--- a/index.d.ts
++++ b/index.d.ts
+@@ -1,4 +1,9 @@
+ import * as React from 'react';
++import type { CSSAttribute } from 'goober';
++
++export type MakeStyles = <S extends { [key: string]: CSSAttribute }>(
++    styles: S
++) => { [key in keyof S]: string };
+ 
+ export type RequiredBy<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
+ 
+@@ -373,6 +378,11 @@ export interface SnackbarProviderProps extends SharedProps {
+      * using this prop, most likely you also want to apply `position: absolute` to SnackbarContainer.
+      */
+     domRoot?: HTMLElement;
++    /**
++     * Function used to generate class names from the styles used by notistack.
++     * @default Uses goober's `css` function.
++     */
++    makeStyles?: MakeStyles;
+     /**
+      * Override or extend the styles applied to the container component or Snackbars.
+      */
+diff --git a/notistack.cjs.development.js b/notistack.cjs.development.js
+index 5118d33db5ea28fd9331cf034ffad4e0eb58bca7..36e475a6f1c566944f3548b512c8b1c2f2035e33 100644
+--- a/notistack.cjs.development.js
++++ b/notistack.cjs.development.js
+@@ -843,7 +843,7 @@ var merge = function merge(options, props) {
+   };
+ };
+ 
+-function makeStyles(styles) {
++function defaultMakeStyles(styles) {
+   return Object.entries(styles).reduce(function (acc, _ref) {
+     var _extends2;
+ 
+@@ -852,6 +852,13 @@ function makeStyles(styles) {
+     return _extends({}, acc, (_extends2 = {}, _extends2[key] = goober.css(value), _extends2));
+   }, {});
+ }
++var MakeStylesContext = /*#__PURE__*/React__default.createContext(defaultMakeStyles);
++function useStyles(styles) {
++  var makeStyles = React__default.useContext(MakeStylesContext);
++  return React__default.useMemo(function () {
++    return makeStyles(styles);
++  }, [makeStyles, styles]);
++}
+ var ComponentClasses = {
+   SnackbarContainer: 'notistack-SnackbarContainer',
+   Snackbar: 'notistack-Snackbar',
+@@ -862,17 +869,18 @@ var ComponentClasses = {
+   }
+ };
+ 
+-var classes = /*#__PURE__*/makeStyles({
++var styles = {
+   root: {
+     height: 0
+   },
+   entered: {
+     height: 'auto'
+   }
+-});
++};
+ var collapsedSize = '0px';
+ var timeout = 175;
+ var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
++  var classes = useStyles(styles);
+   var children = props.children,
+       inProp = props["in"],
+       onExited = props.onExited;
+@@ -1168,7 +1176,7 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
+ Snackbar.displayName = 'Snackbar';
+ 
+ var _root;
+-var classes$1 = /*#__PURE__*/makeStyles({
++var styles$1 = {
+   root: (_root = {
+     display: 'flex',
+     flexWrap: 'wrap',
+@@ -1177,19 +1185,20 @@ var classes$1 = /*#__PURE__*/makeStyles({
+     flexGrow: 'initial',
+     minWidth: '288px'
+   }, _root)
+-});
++};
+ var SnackbarContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+   var className = _ref.className,
+       props = _objectWithoutPropertiesLoose(_ref, ["className"]);
+ 
++  var classes = useStyles(styles$1);
+   return React__default.createElement("div", Object.assign({
+     ref: ref,
+-    className: clsx(classes$1.root, className)
++    className: clsx(classes.root, className)
+   }, props));
+ });
+ SnackbarContent.displayName = 'SnackbarContent';
+ 
+-var classes$2 = /*#__PURE__*/makeStyles({
++var styles$2 = {
+   root: {
+     backgroundColor: '#313131',
+     fontSize: '0.875rem',
+@@ -1231,9 +1240,10 @@ var classes$2 = /*#__PURE__*/makeStyles({
+     paddingLeft: '16px',
+     marginRight: '-8px'
+   }
+-});
++};
+ var ariaDescribedby = 'notistack-snackbar';
+ var MaterialDesignContent = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
++  var classes = useStyles(styles$2);
+   var id = props.id,
+       message = props.message,
+       componentOrFunctionAction = props.action,
+@@ -1254,18 +1264,18 @@ var MaterialDesignContent = /*#__PURE__*/React.forwardRef(function (props, forwa
+     role: "alert",
+     "aria-describedby": ariaDescribedby,
+     style: style,
+-    className: clsx(ComponentClasses.MuiContent, ComponentClasses.MuiContentVariant(variant), classes$2.root, classes$2[variant], className, !hideIconVariant && icon && classes$2.lessPadding)
++    className: clsx(ComponentClasses.MuiContent, ComponentClasses.MuiContentVariant(variant), classes.root, classes[variant], className, !hideIconVariant && icon && classes.lessPadding)
+   }, React__default.createElement("div", {
+     id: ariaDescribedby,
+-    className: classes$2.message
++    className: classes.message
+   }, !hideIconVariant ? icon : null, message), action && React__default.createElement("div", {
+-    className: classes$2.action
++    className: classes.action
+   }, action));
+ });
+ MaterialDesignContent.displayName = 'MaterialDesignContent';
+ var MaterialDesignContent$1 = /*#__PURE__*/React.memo(MaterialDesignContent);
+ 
+-var styles = /*#__PURE__*/makeStyles({
++var styleRules = {
+   wrappedRoot: {
+     width: '100%',
+     position: 'relative',
+@@ -1276,9 +1286,10 @@ var styles = /*#__PURE__*/makeStyles({
+     left: 0,
+     minWidth: '288px'
+   }
+-});
++};
+ 
+ var SnackbarItem = function SnackbarItem(props) {
++  var styles = useStyles(styleRules);
+   var timeout = React.useRef();
+ 
+   var _useState = React.useState(true),
+@@ -1376,7 +1387,7 @@ var indents = {
+ };
+ var collapseWrapper = "." + ComponentClasses.CollapseWrapper;
+ var xsWidthMargin = 16;
+-var styles$1 = /*#__PURE__*/makeStyles({
++var styleRules$1 = {
+   root: (_root$1 = {
+     boxSizing: 'border-box',
+     display: 'flex',
+@@ -1430,16 +1441,17 @@ var styles$1 = /*#__PURE__*/makeStyles({
+   }, _center[breakpoints.upSm] = {
+     alignItems: 'center'
+   }, _center)
+-});
++};
+ 
+ var SnackbarContainer = function SnackbarContainer(props) {
++  var styles = useStyles(styleRules$1);
+   var _props$classes = props.classes,
+       classes = _props$classes === void 0 ? {} : _props$classes,
+       anchorOrigin = props.anchorOrigin,
+       dense = props.dense,
+       children = props.children;
+-  var combinedClassname = clsx(ComponentClasses.SnackbarContainer, styles$1[anchorOrigin.vertical], styles$1[anchorOrigin.horizontal], styles$1.root, // root should come after others to override maxWidth
+-  classes.containerRoot, classes["containerAnchorOrigin" + originKeyExtractor(anchorOrigin)], dense && styles$1.rootDense);
++  var combinedClassname = clsx(ComponentClasses.SnackbarContainer, styles[anchorOrigin.vertical], styles[anchorOrigin.horizontal], styles.root, // root should come after others to override maxWidth
++  classes.containerRoot, classes["containerAnchorOrigin" + originKeyExtractor(anchorOrigin)], dense && styles.rootDense);
+   return React__default.createElement("div", {
+     className: combinedClassname
+   }, children);
+@@ -1768,7 +1780,9 @@ var SnackbarProvider = /*#__PURE__*/function (_Component) {
+         dense = _this$props$dense === void 0 ? false : _this$props$dense,
+         _this$props$Component = _this$props.Components,
+         Components = _this$props$Component === void 0 ? {} : _this$props$Component,
+-        classes = _this$props.classes;
++        classes = _this$props.classes,
++        _this$props$makeStyle = _this$props.makeStyles,
++        makeStyles = _this$props$makeStyle === void 0 ? defaultMakeStyles : _this$props$makeStyle;
+     var categ = this.state.snacks.reduce(function (acc, current) {
+       var _extends2;
+ 
+@@ -1798,9 +1812,11 @@ var SnackbarProvider = /*#__PURE__*/function (_Component) {
+         });
+       }));
+     });
+-    return React__default.createElement(SnackbarContext.Provider, {
++    return React__default.createElement(MakeStylesContext.Provider, {
++      value: makeStyles
++    }, React__default.createElement(SnackbarContext.Provider, {
+       value: contextValue
+-    }, children, domRoot ? reactDom.createPortal(snackbars, domRoot) : snackbars);
++    }, children, domRoot ? reactDom.createPortal(snackbars, domRoot) : snackbars));
+   };
+ 
+   _createClass(SnackbarProvider, [{
+diff --git a/notistack.cjs.development.js.map b/notistack.cjs.development.js.map
+index f1e76ba2dca2114315146f0f3d87420a59bd3717..d632dfb2878eb8ade26457dcdcbc707f39df17a7 100644
+--- a/notistack.cjs.development.js.map
++++ b/notistack.cjs.development.js.map
+@@ -1 +1 @@
+-{"version":3,"file":"notistack.cjs.development.js","sources":["../src/SnackbarContext.ts","../src/utils/index.ts","../src/transitions/Transition/Transition.tsx","../src/transitions/useForkRef.ts","../src/transitions/getTransitionProps.ts","../src/transitions/utils.ts","../src/transitions/createTransition.ts","../src/transitions/Slide/Slide.tsx","../src/utils/defaultIconVariants.tsx","../src/SnackbarProvider/merger.ts","../src/utils/styles.ts","../src/transitions/Collapse/Collapse.tsx","../src/SnackbarItem/utils.ts","../src/utils/createChainedFunction.ts","../src/utils/useEventCallback.ts","../src/SnackbarItem/Snackbar.tsx","../src/SnackbarContent/SnackbarContent.tsx","../src/ui/MaterialDesignContent/MaterialDesignContent.tsx","../src/SnackbarItem/SnackbarItem.tsx","../src/SnackbarContainer/SnackbarContainer.tsx","../src/utils/warning.ts","../src/SnackbarProvider/SnackbarProvider.tsx","../src/useSnackbar.ts"],"sourcesContent":["import React from 'react';\nimport { ProviderContext } from './types';\n\nconst noOp = () => {\n    return '';\n};\n\nexport default React.createContext<ProviderContext>({\n    enqueueSnackbar: noOp,\n    closeSnackbar: noOp,\n});\n","import { InternalSnack } from '../types';\n\nexport const breakpoints = {\n    downXs: '@media (max-width:599.95px)',\n    upSm: '@media (min-width:600px)',\n};\n\nconst capitalise = (text: string): string => text.charAt(0).toUpperCase() + text.slice(1);\n\nexport const originKeyExtractor = (anchor: InternalSnack['anchorOrigin']): string =>\n    `${capitalise(anchor.vertical)}${capitalise(anchor.horizontal)}`;\n\nexport const isDefined = (value: string | null | undefined | number): boolean => !!value || value === 0;\n","/**\n * BSD 3-Clause License\n *\n * Copyright (c) 2018, React Community\n * Forked from React (https://github.com/facebook/react) Copyright 2013-present, Facebook, Inc.\n * All rights reserved.\n *\n * Redistribution and use in source and binary forms, with or without\n * modification, are permitted provided that the following conditions are met:\n *\n * * Redistributions of source code must retain the above copyright notice, this\n * list of conditions and the following disclaimer.\n *\n * * Redistributions in binary form must reproduce the above copyright notice,\n * this list of conditions and the following disclaimer in the documentation\n * and/or other materials provided with the distribution.\n *\n * * Neither the name of the copyright holder nor the names of its\n * contributors may be used to endorse or promote products derived from\n * this software without specific prior written permission.\n *\n * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\n * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\n * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\n * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE\n * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL\n * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR\n * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER\n * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,\n * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\n * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n */\nimport React from 'react';\nimport { TransitionComponentProps, TransitionStatus } from '../../types';\n\nconst UNMOUNTED = 'unmounted';\nconst EXITED = 'exited';\nconst ENTERING = 'entering';\nconst ENTERED = 'entered';\nconst EXITING = 'exiting';\n\ninterface State {\n    status: TransitionStatus;\n}\n\ninterface NextCallback {\n    (): void;\n    cancel?: () => void;\n}\n\nclass Transition extends React.Component<TransitionComponentProps, State> {\n    appearStatus: TransitionStatus | null;\n\n    nextCallback: NextCallback | null;\n\n    constructor(props: TransitionComponentProps) {\n        super(props);\n\n        const { appear } = props;\n\n        let initialStatus: TransitionStatus;\n\n        this.appearStatus = null;\n\n        if (props.in) {\n            if (appear) {\n                initialStatus = EXITED;\n                this.appearStatus = ENTERING;\n            } else {\n                initialStatus = ENTERED;\n            }\n        } else if (props.unmountOnExit || props.mountOnEnter) {\n            initialStatus = UNMOUNTED;\n        } else {\n            initialStatus = EXITED;\n        }\n\n        this.state = { status: initialStatus };\n\n        this.nextCallback = null;\n    }\n\n    static getDerivedStateFromProps({ in: nextIn }: TransitionComponentProps, prevState: State) {\n        if (nextIn && prevState.status === UNMOUNTED) {\n            return { status: EXITED };\n        }\n        return null;\n    }\n\n    componentDidMount() {\n        this.updateStatus(true, this.appearStatus);\n    }\n\n    componentDidUpdate(prevProps: TransitionComponentProps) {\n        let nextStatus: TransitionStatus | null = null;\n        if (prevProps !== this.props) {\n            const { status } = this.state;\n\n            if (this.props.in) {\n                if (status !== ENTERING && status !== ENTERED) {\n                    nextStatus = ENTERING;\n                }\n            } else if (status === ENTERING || status === ENTERED) {\n                nextStatus = EXITING;\n            }\n        }\n        this.updateStatus(false, nextStatus);\n    }\n\n    componentWillUnmount() {\n        this.cancelNextCallback();\n    }\n\n    getTimeouts(): { exit: number; enter: number } {\n        const { timeout } = this.props;\n        let enter = timeout;\n        let exit = timeout;\n\n        if (timeout != null && typeof timeout !== 'number' && typeof timeout !== 'string') {\n            exit = timeout.exit;\n            enter = timeout.enter;\n        }\n        return {\n            exit: exit as number,\n            enter: enter as number,\n        };\n    }\n\n    updateStatus(mounting = false, nextStatus: TransitionStatus | null) {\n        if (nextStatus !== null) {\n            this.cancelNextCallback();\n\n            if (nextStatus === ENTERING) {\n                this.performEnter(mounting);\n            } else {\n                this.performExit();\n            }\n        } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n            this.setState({ status: UNMOUNTED });\n        }\n    }\n\n    get node() {\n        const node = this.props.nodeRef?.current;\n        if (!node) {\n            throw new Error('notistack - Custom snackbar is not refForwarding');\n        }\n        return node;\n    }\n\n    performEnter(mounting: boolean) {\n        const { enter } = this.props;\n        const isAppearing = mounting;\n\n        const timeouts = this.getTimeouts();\n\n        if (!mounting && !enter) {\n            this.safeSetState({ status: ENTERED }, () => {\n                if (this.props.onEntered) {\n                    this.props.onEntered(this.node, isAppearing);\n                }\n            });\n            return;\n        }\n\n        if (this.props.onEnter) {\n            this.props.onEnter(this.node, isAppearing);\n        }\n\n        this.safeSetState({ status: ENTERING }, () => {\n            if (this.props.onEntering) {\n                this.props.onEntering(this.node, isAppearing);\n            }\n\n            this.onTransitionEnd(timeouts.enter, () => {\n                this.safeSetState({ status: ENTERED }, () => {\n                    if (this.props.onEntered) {\n                        this.props.onEntered(this.node, isAppearing);\n                    }\n                });\n            });\n        });\n    }\n\n    performExit() {\n        const { exit } = this.props;\n        const timeouts = this.getTimeouts();\n\n        // no exit animation skip right to EXITED\n        if (!exit) {\n            this.safeSetState({ status: EXITED }, () => {\n                if (this.props.onExited) {\n                    this.props.onExited(this.node);\n                }\n            });\n            return;\n        }\n\n        if (this.props.onExit) {\n            this.props.onExit(this.node);\n        }\n\n        this.safeSetState({ status: EXITING }, () => {\n            if (this.props.onExiting) {\n                this.props.onExiting(this.node);\n            }\n\n            this.onTransitionEnd(timeouts.exit, () => {\n                this.safeSetState({ status: EXITED }, () => {\n                    if (this.props.onExited) {\n                        this.props.onExited(this.node);\n                    }\n                });\n            });\n        });\n    }\n\n    cancelNextCallback() {\n        if (this.nextCallback !== null && this.nextCallback.cancel) {\n            this.nextCallback.cancel();\n            this.nextCallback = null;\n        }\n    }\n\n    safeSetState(nextState: State, callback: () => void) {\n        callback = this.setNextCallback(callback);\n        this.setState(nextState, callback);\n    }\n\n    setNextCallback(callback: () => void) {\n        let active = true;\n\n        this.nextCallback = () => {\n            if (active) {\n                active = false;\n                this.nextCallback = null;\n\n                callback();\n            }\n        };\n\n        (this.nextCallback as NextCallback).cancel = () => {\n            active = false;\n        };\n\n        return this.nextCallback;\n    }\n\n    onTransitionEnd(timeout: number, handler: () => void) {\n        this.setNextCallback(handler);\n        const doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n        if (!this.node || doesNotHaveTimeoutOrListener) {\n            setTimeout(this.nextCallback as NextCallback, 0);\n            return;\n        }\n\n        if (this.props.addEndListener) {\n            this.props.addEndListener(this.node, this.nextCallback as NextCallback);\n        }\n\n        if (timeout != null) {\n            setTimeout(this.nextCallback as NextCallback, timeout);\n        }\n    }\n\n    render() {\n        const { status } = this.state;\n\n        if (status === UNMOUNTED) {\n            return null;\n        }\n\n        const {\n            children,\n            // filter props for `Transition`\n            in: _in,\n            mountOnEnter: _mountOnEnter,\n            unmountOnExit: _unmountOnExit,\n            appear: _appear,\n            enter: _enter,\n            exit: _exit,\n            timeout: _timeout,\n            addEndListener: _addEndListener,\n            onEnter: _onEnter,\n            onEntering: _onEntering,\n            onEntered: _onEntered,\n            onExit: _onExit,\n            onExiting: _onExiting,\n            onExited: _onExited,\n            nodeRef: _nodeRef,\n            ...childProps\n        } = this.props;\n\n        return children(status, childProps);\n    }\n}\n\nfunction noop() {\n    //\n}\n\n(Transition as any).defaultProps = {\n    in: false,\n    mountOnEnter: false,\n    unmountOnExit: false,\n    appear: false,\n    enter: true,\n    exit: true,\n\n    onEnter: noop,\n    onEntering: noop,\n    onEntered: noop,\n\n    onExit: noop,\n    onExiting: noop,\n    onExited: noop,\n};\n\nexport default Transition;\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\n\n/**\n * passes {value} to {ref}\n *\n * Useful if you want to expose the ref of an inner component to the public API\n * while still using it inside the component.\n * @param ref A ref callback or ref object. If anything falsy, this is a no-op.\n */\nfunction setRef<T>(\n    ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,\n    value: T | null\n): void {\n    if (typeof ref === 'function') {\n        ref(value);\n    } else if (ref) {\n        ref.current = value;\n    }\n}\n\nexport default function useForkRef<Instance>(\n    refA: React.Ref<Instance> | null | undefined,\n    refB: React.Ref<Instance> | null | undefined\n): React.Ref<Instance> | null {\n    /**\n     * This will create a new function if the ref props change and are defined.\n     * This means react will call the old forkRef with `null` and the new forkRef\n     * with the ref. Cleanup naturally emerges from this behavior.\n     */\n    return React.useMemo(() => {\n        if (refA == null && refB == null) {\n            return null;\n        }\n        return (refValue) => {\n            setRef(refA, refValue);\n            setRef(refB, refValue);\n        };\n    }, [refA, refB]);\n}\n","import { TransitionDuration } from '../types';\n\ninterface ComponentProps {\n    style?: React.CSSProperties | undefined;\n    /**\n     * number: 400\n     * TransitionDuration: { enter: 200, exit: 400 }\n     */\n    timeout: number | TransitionDuration;\n    mode: 'enter' | 'exit';\n}\n\ninterface TransitionPropsReturnType {\n    duration: number;\n    easing: string | undefined;\n    delay: string | undefined;\n}\n\nexport default function getTransitionProps(props: ComponentProps): TransitionPropsReturnType {\n    const { timeout, style = {}, mode } = props;\n    return {\n        duration: typeof timeout === 'object' ? timeout[mode] || 0 : timeout,\n        easing: style.transitionTimingFunction,\n        delay: style.transitionDelay,\n    };\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nexport const defaultEasing = {\n    // This is the most common easing curve.\n    easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    // Objects enter the screen at full velocity from off-screen and\n    // slowly decelerate to a resting point.\n    easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',\n    // Objects leave the screen at full velocity. They do not decelerate when off-screen.\n    easeIn: 'cubic-bezier(0.4, 0, 1, 1)',\n    // The sharp curve is used by objects that may return to the screen at any time.\n    sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',\n};\n\n/**\n * CSS hack to force a repaint\n */\nexport const reflow = (node: Element): void => {\n    // We have to do something with node.scrollTop.\n    // Otherwise it's removed from the compiled code by optimisers\n    // eslint-disable-next-line no-self-assign\n    node.scrollTop = node.scrollTop;\n};\n","import { defaultEasing } from './utils';\n\ninterface CreateTransitionOptions {\n    duration: string | number;\n    easing?: string;\n    delay?: string | number;\n}\n\nconst formatMs = (milliseconds: number) => `${Math.round(milliseconds)}ms`;\n\nexport default function createTransition(\n    props: string | string[] = ['all'],\n    options?: CreateTransitionOptions\n): string {\n    const { duration = 300, easing = defaultEasing.easeInOut, delay = 0 } = options || {};\n\n    const properties = Array.isArray(props) ? props : [props];\n\n    return properties\n        .map((animatedProp) => {\n            const formattedDuration = typeof duration === 'string' ? duration : formatMs(duration);\n            const formattedDelay = typeof delay === 'string' ? delay : formatMs(delay);\n            return `${animatedProp} ${formattedDuration} ${easing} ${formattedDelay}`;\n        })\n        .join(',');\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport TransitionComponent from '../Transition';\nimport useForkRef from '../useForkRef';\nimport getTransitionProps from '../getTransitionProps';\nimport createTransition from '../createTransition';\nimport { defaultEasing, reflow } from '../utils';\nimport { SlideTransitionDirection, TransitionProps } from '../../types';\n\nfunction ownerDocument(node: Node | null | undefined): Document {\n    return (node && node.ownerDocument) || document;\n}\n\nfunction ownerWindow(node: Node | null): Window {\n    const doc = ownerDocument(node);\n    return doc.defaultView || window;\n}\n\n/**\n * Corresponds to 10 frames at 60 Hz.\n * A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.\n */\nfunction debounce(func: () => void, wait = 166) {\n    let timeout: ReturnType<typeof setTimeout>;\n    function debounced(...args: any[]) {\n        const later = () => {\n            // @ts-ignore\n            func.apply(this, args);\n        };\n        clearTimeout(timeout);\n        timeout = setTimeout(later, wait);\n    }\n\n    debounced.clear = () => {\n        clearTimeout(timeout);\n    };\n\n    return debounced;\n}\n\n/**\n * Translate the node so it can't be seen on the screen.\n * Later, we're going to translate the node back to its original location with `none`.\n */\nfunction getTranslateValue(\n    direction: SlideTransitionDirection,\n    node: HTMLElement & { fakeTransform?: string }\n): string {\n    const rect = node.getBoundingClientRect();\n    const containerWindow = ownerWindow(node);\n    let transform;\n\n    if (node.fakeTransform) {\n        transform = node.fakeTransform;\n    } else {\n        const computedStyle = containerWindow.getComputedStyle(node);\n        transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');\n    }\n\n    let offsetX = 0;\n    let offsetY = 0;\n\n    if (transform && transform !== 'none' && typeof transform === 'string') {\n        const transformValues = transform.split('(')[1].split(')')[0].split(',');\n        offsetX = parseInt(transformValues[4], 10);\n        offsetY = parseInt(transformValues[5], 10);\n    }\n\n    switch (direction) {\n        case 'left':\n            return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;\n        case 'right':\n            return `translateX(-${rect.left + rect.width - offsetX}px)`;\n        case 'up':\n            return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;\n        default:\n            // down\n            return `translateY(-${rect.top + rect.height - offsetY}px)`;\n    }\n}\n\nfunction setTranslateValue(direction: SlideTransitionDirection, node: HTMLElement | null): void {\n    if (!node) return;\n    const transform = getTranslateValue(direction, node);\n    if (transform) {\n        node.style.webkitTransform = transform;\n        node.style.transform = transform;\n    }\n}\n\nconst Slide = React.forwardRef<unknown, TransitionProps>((props, ref) => {\n    const {\n        children,\n        direction = 'down',\n        in: inProp,\n        style,\n        timeout = 0,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        ...other\n    } = props;\n\n    const nodeRef = React.useRef(null);\n    const handleRefIntermediary = useForkRef((children as any).ref, nodeRef);\n    const handleRef = useForkRef(handleRefIntermediary, ref);\n\n    const handleEnter: TransitionProps['onEnter'] = (node, isAppearing) => {\n        setTranslateValue(direction, node);\n        reflow(node);\n\n        if (onEnter) {\n            onEnter(node, isAppearing);\n        }\n    };\n\n    const handleEntering = (node: HTMLElement) => {\n        const easing = style?.transitionTimingFunction || defaultEasing.easeOut;\n        const transitionProps = getTransitionProps({\n            timeout,\n            mode: 'enter',\n            style: { ...style, transitionTimingFunction: easing },\n        });\n\n        node.style.webkitTransition = createTransition('-webkit-transform', transitionProps);\n        node.style.transition = createTransition('transform', transitionProps);\n\n        node.style.webkitTransform = 'none';\n        node.style.transform = 'none';\n    };\n\n    const handleExit: TransitionProps['onExit'] = (node) => {\n        const easing = style?.transitionTimingFunction || defaultEasing.sharp;\n        const transitionProps = getTransitionProps({\n            timeout,\n            mode: 'exit',\n            style: { ...style, transitionTimingFunction: easing },\n        });\n\n        node.style.webkitTransition = createTransition('-webkit-transform', transitionProps);\n        node.style.transition = createTransition('transform', transitionProps);\n\n        setTranslateValue(direction, node);\n\n        if (onExit) {\n            onExit(node);\n        }\n    };\n\n    const handleExited: TransitionProps['onExited'] = (node) => {\n        // No need for transitions when the component is hidden\n        node.style.webkitTransition = '';\n        node.style.transition = '';\n\n        if (onExited) {\n            onExited(node);\n        }\n    };\n\n    const updatePosition = React.useCallback(() => {\n        if (nodeRef.current) {\n            setTranslateValue(direction, nodeRef.current);\n        }\n    }, [direction]);\n\n    React.useEffect(() => {\n        // Skip configuration where the position is screen size invariant.\n        if (inProp || direction === 'down' || direction === 'right') {\n            return undefined;\n        }\n\n        const handleResize = debounce(() => {\n            if (nodeRef.current) {\n                setTranslateValue(direction, nodeRef.current);\n            }\n        });\n\n        const containerWindow = ownerWindow(nodeRef.current);\n        containerWindow.addEventListener('resize', handleResize);\n        return () => {\n            handleResize.clear();\n            containerWindow.removeEventListener('resize', handleResize);\n        };\n    }, [direction, inProp]);\n\n    React.useEffect(() => {\n        if (!inProp) {\n            // We need to update the position of the drawer when the direction change and\n            // when it's hidden.\n            updatePosition();\n        }\n    }, [inProp, updatePosition]);\n\n    return (\n        <TransitionComponent\n            appear\n            nodeRef={nodeRef}\n            onEnter={handleEnter}\n            onEntered={onEntered}\n            onEntering={handleEntering}\n            onExit={handleExit}\n            onExited={handleExited}\n            in={inProp}\n            timeout={timeout}\n            {...other}\n        >\n            {(state, childProps) =>\n                React.cloneElement(children as any, {\n                    ref: handleRef,\n                    style: {\n                        visibility: state === 'exited' && !inProp ? 'hidden' : undefined,\n                        ...style,\n                        ...(children as any).props.style,\n                    },\n                    ...childProps,\n                })\n            }\n        </TransitionComponent>\n    );\n});\n\nSlide.displayName = 'Slide';\n\nexport default Slide;\n","import React from 'react';\n\nconst SvgIcon = (props: { children: JSX.Element }) => (\n    <svg\n        viewBox=\"0 0 24 24\"\n        focusable=\"false\"\n        style={{\n            fontSize: 20,\n            marginInlineEnd: 8,\n            userSelect: 'none',\n            width: '1em',\n            height: '1em',\n            display: 'inline-block',\n            fill: 'currentColor',\n            flexShrink: 0,\n        }}\n        {...props}\n    />\n);\n\nconst CheckIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z\"\n        />\n    </SvgIcon>\n);\n\nconst WarningIcon: React.FC = () => (\n    <SvgIcon>\n        <path d=\"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z\" />\n    </SvgIcon>\n);\n\nconst ErrorIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z\"\n        />\n    </SvgIcon>\n);\n\nconst InfoIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z\"\n        />\n    </SvgIcon>\n);\n\nconst defaultIconVariants: Record<string, React.ReactNode> = {\n    default: undefined,\n    success: <CheckIcon />,\n    warning: <WarningIcon />,\n    error: <ErrorIcon />,\n    info: <InfoIcon />,\n};\n\nexport default defaultIconVariants;\n","import Slide from '../transitions/Slide';\nimport defaultIconVariants from '../utils/defaultIconVariants';\nimport { InternalSnack } from '../types';\n\nexport const defaults = {\n    maxSnack: 3,\n    persist: false,\n    hideIconVariant: false,\n    disableWindowBlurListener: false,\n    variant: 'default',\n    autoHideDuration: 5000,\n    iconVariant: defaultIconVariants,\n    anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n    TransitionComponent: Slide,\n    transitionDuration: {\n        enter: 225,\n        exit: 195,\n    },\n};\n\n/**\n * Derives the right autoHideDuration taking into account the following\n * prority order: 1: Options, 2: Props, 3: default fallback\n */\nconst getAutoHideDuration = (optionsDuration: any, propsDuration: any) => {\n    const isNumberOrNull = (numberish: number | null) => typeof numberish === 'number' || numberish === null;\n\n    if (isNumberOrNull(optionsDuration)) return optionsDuration;\n    if (isNumberOrNull(propsDuration)) return propsDuration;\n    return defaults.autoHideDuration;\n};\n\n/**\n * Derives the right transitionDuration taking into account the following\n * prority order: 1: Options, 2: Props, 3: default fallback\n */\nconst getTransitionDuration = (optionsDuration: any, propsDuration: any) => {\n    const is = (item: any, types: string[]) => types.some((t) => typeof item === t);\n\n    if (is(optionsDuration, ['string', 'number'])) {\n        return optionsDuration;\n    }\n\n    if (is(optionsDuration, ['object'])) {\n        return {\n            ...defaults.transitionDuration,\n            ...(is(propsDuration, ['object']) && propsDuration),\n            ...optionsDuration,\n        };\n    }\n\n    if (is(propsDuration, ['string', 'number'])) {\n        return propsDuration;\n    }\n\n    if (is(propsDuration, ['object'])) {\n        return {\n            ...defaults.transitionDuration,\n            ...propsDuration,\n        };\n    }\n\n    return defaults.transitionDuration;\n};\n\nexport const merge =\n    (options: any, props: any) =>\n    (name: keyof InternalSnack, shouldObjectMerge = false): any => {\n        if (shouldObjectMerge) {\n            return {\n                ...(defaults as any)[name],\n                ...props[name],\n                ...options[name],\n            };\n        }\n\n        if (name === 'autoHideDuration') {\n            return getAutoHideDuration(options.autoHideDuration, props.autoHideDuration);\n        }\n\n        if (name === 'transitionDuration') {\n            return getTransitionDuration(options.transitionDuration, props.transitionDuration);\n        }\n\n        return options[name] || props[name] || (defaults as any)[name];\n    };\n","import { css, CSSAttribute } from 'goober';\n\nexport function makeStyles<S extends { [key: string]: CSSAttribute }, K extends keyof S>(\n    styles: S\n): { [key in K]: string } {\n    return Object.entries(styles).reduce(\n        (acc, [key, value]) => ({\n            ...acc,\n            [key]: css(value),\n        }),\n        {} as { [key in K]: string }\n    );\n}\n\nexport const ComponentClasses = {\n    SnackbarContainer: 'notistack-SnackbarContainer',\n    Snackbar: 'notistack-Snackbar',\n    CollapseWrapper: 'notistack-CollapseWrapper',\n    MuiContent: 'notistack-MuiContent',\n    MuiContentVariant: (variant: string) => `notistack-MuiContent-${variant}`,\n};\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport { reflow } from '../utils';\nimport TransitionComponent from '../Transition';\nimport useForkRef from '../useForkRef';\nimport { TransitionProps } from '../../types';\nimport getTransitionProps from '../getTransitionProps';\nimport createTransition from '../createTransition';\nimport { ComponentClasses, makeStyles } from '../../utils/styles';\n\nconst classes = makeStyles({\n    root: {\n        height: 0,\n    },\n    entered: {\n        height: 'auto',\n    },\n});\n\nconst collapsedSize = '0px';\nconst timeout = 175;\n\ninterface CollapseProps {\n    children: JSX.Element;\n    in: boolean;\n    onExited: TransitionProps['onExited'];\n}\n\nconst Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {\n    const { children, in: inProp, onExited } = props;\n\n    const wrapperRef = React.useRef<HTMLDivElement>(null);\n\n    const nodeRef = React.useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, nodeRef);\n\n    const getWrapperSize = () => (wrapperRef.current ? wrapperRef.current.clientHeight : 0);\n\n    const handleEnter: TransitionProps['onEnter'] = (node) => {\n        node.style.height = collapsedSize;\n    };\n\n    const handleEntering = (node: HTMLElement) => {\n        const wrapperSize = getWrapperSize();\n\n        const { duration: transitionDuration, easing } = getTransitionProps({\n            timeout,\n            mode: 'enter',\n        });\n\n        node.style.transitionDuration =\n            typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n\n        node.style.height = `${wrapperSize}px`;\n        node.style.transitionTimingFunction = easing || '';\n    };\n\n    const handleEntered: TransitionProps['onEntered'] = (node) => {\n        node.style.height = 'auto';\n    };\n\n    const handleExit: TransitionProps['onExit'] = (node) => {\n        node.style.height = `${getWrapperSize()}px`;\n    };\n\n    const handleExiting = (node: HTMLElement) => {\n        reflow(node);\n\n        const { duration: transitionDuration, easing } = getTransitionProps({\n            timeout,\n            mode: 'exit',\n        });\n\n        node.style.transitionDuration =\n            typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n        node.style.height = collapsedSize;\n        node.style.transitionTimingFunction = easing || '';\n    };\n\n    return (\n        <TransitionComponent\n            in={inProp}\n            unmountOnExit\n            onEnter={handleEnter}\n            onEntered={handleEntered}\n            onEntering={handleEntering}\n            onExit={handleExit}\n            onExited={onExited}\n            onExiting={handleExiting}\n            nodeRef={nodeRef}\n            timeout={timeout}\n        >\n            {(state, childProps) => (\n                <div\n                    ref={handleRef}\n                    className={clsx(classes.root, { [classes.entered]: state === 'entered' })}\n                    style={{\n                        pointerEvents: 'all',\n                        overflow: 'hidden',\n                        minHeight: collapsedSize,\n                        transition: createTransition('height'),\n                        ...(state === 'entered' && {\n                            overflow: 'visible',\n                        }),\n                        ...(state === 'exited' &&\n                            !inProp && {\n                                visibility: 'hidden',\n                            }),\n                    }}\n                    {...childProps}\n                >\n                    <div\n                        ref={wrapperRef}\n                        className={ComponentClasses.CollapseWrapper}\n                        // Hack to get children with a negative margin to not falsify the height computation.\n                        style={{ display: 'flex', width: '100%' }}\n                    >\n                        {children}\n                    </div>\n                </div>\n            )}\n        </TransitionComponent>\n    );\n});\n\nCollapse.displayName = 'Collapse';\n\nexport default Collapse;\n","import {\n    InternalSnack,\n    SlideTransitionDirection,\n    SnackbarOrigin,\n    SnackbarClassKey,\n    SnackbarProviderProps,\n    ClassNameMap,\n    ContainerClassKey,\n} from '../types';\nimport { originKeyExtractor } from '../utils';\n\nconst direction: Record<string, SlideTransitionDirection> = {\n    right: 'left',\n    left: 'right',\n    bottom: 'up',\n    top: 'down',\n};\n\nexport const getSlideDirection = (anchorOrigin: InternalSnack['anchorOrigin']): SlideTransitionDirection => {\n    if (anchorOrigin.horizontal !== 'center') {\n        return direction[anchorOrigin.horizontal];\n    }\n    return direction[anchorOrigin.vertical];\n};\n\n/** Tranforms classes name */\nexport const toSnackbarAnchorOrigin = (anchorOrigin: SnackbarOrigin): SnackbarClassKey =>\n    `anchorOrigin${originKeyExtractor(anchorOrigin)}` as SnackbarClassKey;\n\n/**\n * Omit SnackbarContainer class keys that are not needed for SnackbarItem\n */\nexport const keepSnackbarClassKeys = (\n    classes: SnackbarProviderProps['classes'] = {}\n): Partial<ClassNameMap<SnackbarClassKey>> => {\n    const containerClasses: Record<ContainerClassKey, true> = {\n        containerRoot: true,\n        containerAnchorOriginTopCenter: true,\n        containerAnchorOriginBottomCenter: true,\n        containerAnchorOriginTopRight: true,\n        containerAnchorOriginBottomRight: true,\n        containerAnchorOriginTopLeft: true,\n        containerAnchorOriginBottomLeft: true,\n    };\n    return (Object.keys(classes) as ContainerClassKey[])\n        .filter((key) => !containerClasses[key])\n        .reduce((obj, key) => ({ ...obj, [key]: classes[key] }), {});\n};\n","import { SnackbarKey } from 'src/types';\n\nconst noOp = () => {\n    /* */\n};\n\n/**\n * Credit to MUI team @ https://mui.com\n * Safe chained function.\n *\n * Will only create a new function if needed,\n * otherwise will pass back existing functions or null.\n */\nexport default function createChainedFunction<Args extends any[], This>(\n    funcs: Array<((this: This, ...args: Args) => any) | undefined>,\n    snackbarId?: SnackbarKey\n): (this: This, ...args: Args) => void {\n    // @ts-ignore\n    return funcs.reduce((acc, func) => {\n        if (func === null || func === undefined) {\n            return acc;\n        }\n\n        return function chainedFunction(...args) {\n            const argums = [...args] as any;\n            if (snackbarId && argums.indexOf(snackbarId) === -1) {\n                argums.push(snackbarId);\n            }\n            // @ts-ignore\n            acc.apply(this, argums);\n            func.apply(this, argums);\n        };\n    }, noOp);\n}\n","/**\n * Credit to MUI team @ https://mui.com\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nimport * as React from 'react';\n\nconst useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\nexport default function useEventCallback<Args extends unknown[], Return>(\n    fn: (...args: Args) => Return\n): (...args: Args) => Return {\n    const ref = React.useRef(fn);\n    useEnhancedEffect(() => {\n        ref.current = fn;\n    });\n    return React.useCallback(\n        (...args: Args) =>\n            // @ts-expect-error hide `this`\n            (0, ref.current)(...args),\n        []\n    );\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport useEventCallback from '../utils/useEventCallback';\nimport { CloseReason, SharedProps, SnackbarKey } from '../types';\nimport { ComponentClasses } from '../utils/styles';\n\ninterface SnackbarProps extends Required<Pick<SharedProps, 'disableWindowBlurListener' | 'onClose'>> {\n    open: boolean;\n    id: SnackbarKey;\n    className: string;\n    children: JSX.Element;\n    autoHideDuration: number | null | undefined;\n    SnackbarProps: SharedProps['SnackbarProps'];\n}\n\nconst Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>((props, ref) => {\n    const {\n        children,\n        className,\n        autoHideDuration,\n        disableWindowBlurListener = false,\n        onClose,\n        id,\n        open,\n        SnackbarProps = {},\n    } = props;\n\n    const timerAutoHide = React.useRef<ReturnType<typeof setTimeout>>();\n\n    const handleClose = useEventCallback((...args: [null, CloseReason, SnackbarKey]) => {\n        if (onClose) {\n            onClose(...args);\n        }\n    });\n\n    const setAutoHideTimer = useEventCallback((autoHideDurationParam?: number | null) => {\n        if (!onClose || autoHideDurationParam == null) {\n            return;\n        }\n\n        if (timerAutoHide.current) {\n            clearTimeout(timerAutoHide.current);\n        }\n        timerAutoHide.current = setTimeout(() => {\n            handleClose(null, 'timeout', id);\n        }, autoHideDurationParam);\n    });\n\n    React.useEffect(() => {\n        if (open) {\n            setAutoHideTimer(autoHideDuration);\n        }\n\n        return () => {\n            if (timerAutoHide.current) {\n                clearTimeout(timerAutoHide.current);\n            }\n        };\n    }, [open, autoHideDuration, setAutoHideTimer]);\n\n    /**\n     * Pause the timer when the user is interacting with the Snackbar\n     * or when the user hide the window.\n     */\n    const handlePause = () => {\n        if (timerAutoHide.current) {\n            clearTimeout(timerAutoHide.current);\n        }\n    };\n\n    /**\n     * Restart the timer when the user is no longer interacting with the Snackbar\n     * or when the window is shown back.\n     */\n    const handleResume = React.useCallback(() => {\n        if (autoHideDuration != null) {\n            setAutoHideTimer(autoHideDuration * 0.5);\n        }\n    }, [autoHideDuration, setAutoHideTimer]);\n\n    const handleMouseEnter: React.MouseEventHandler<HTMLDivElement> = (event) => {\n        if (SnackbarProps.onMouseEnter) {\n            SnackbarProps.onMouseEnter(event);\n        }\n        handlePause();\n    };\n\n    const handleMouseLeave: React.MouseEventHandler<HTMLDivElement> = (event) => {\n        if (SnackbarProps.onMouseLeave) {\n            SnackbarProps.onMouseLeave(event);\n        }\n        handleResume();\n    };\n\n    React.useEffect(() => {\n        if (!disableWindowBlurListener && open) {\n            window.addEventListener('focus', handleResume);\n            window.addEventListener('blur', handlePause);\n\n            return () => {\n                window.removeEventListener('focus', handleResume);\n                window.removeEventListener('blur', handlePause);\n            };\n        }\n\n        return undefined;\n    }, [disableWindowBlurListener, handleResume, open]);\n\n    return (\n        <div\n            ref={ref}\n            {...SnackbarProps}\n            className={clsx(ComponentClasses.Snackbar, className)}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n        >\n            {children}\n        </div>\n    );\n});\n\nSnackbar.displayName = 'Snackbar';\n\nexport default Snackbar;\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SnackbarContentProps } from '../types';\nimport { breakpoints } from '../utils';\nimport { makeStyles } from '../utils/styles';\n\nconst classes = makeStyles({\n    root: {\n        display: 'flex',\n        flexWrap: 'wrap',\n        flexGrow: 1,\n        [breakpoints.upSm]: {\n            flexGrow: 'initial',\n            minWidth: '288px',\n        },\n    },\n});\n\nconst SnackbarContent = forwardRef<HTMLDivElement, SnackbarContentProps>(({ className, ...props }, ref) => (\n    <div ref={ref} className={clsx(classes.root, className)} {...props} />\n));\n\nSnackbarContent.displayName = 'SnackbarContent';\n\nexport default SnackbarContent;\n","import React, { memo, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport SnackbarContent from '../../SnackbarContent';\nimport { CustomContentProps } from '../../types';\nimport { ComponentClasses, makeStyles } from '../../utils/styles';\n\nconst classes = makeStyles({\n    root: {\n        backgroundColor: '#313131', // dark grey\n        fontSize: '0.875rem',\n        lineHeight: 1.43,\n        letterSpacing: '0.01071em',\n        color: '#fff',\n        alignItems: 'center',\n        padding: '6px 16px',\n        borderRadius: '4px',\n        boxShadow:\n            '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',\n    },\n    lessPadding: {\n        paddingLeft: `${8 * 2.5}px`,\n    },\n    default: {\n        backgroundColor: '#313131', // dark grey\n    },\n    success: {\n        backgroundColor: '#43a047', // green\n    },\n    error: {\n        backgroundColor: '#d32f2f', // dark red\n    },\n    warning: {\n        backgroundColor: '#ff9800', // amber\n    },\n    info: {\n        backgroundColor: '#2196f3', // nice blue\n    },\n    message: {\n        display: 'flex',\n        alignItems: 'center',\n        padding: '8px 0',\n    },\n    action: {\n        display: 'flex',\n        alignItems: 'center',\n        marginLeft: 'auto',\n        paddingLeft: '16px',\n        marginRight: '-8px',\n    },\n});\n\nconst ariaDescribedby = 'notistack-snackbar';\n\nconst MaterialDesignContent = forwardRef<HTMLDivElement, CustomContentProps>((props, forwardedRef) => {\n    const {\n        id,\n        message,\n        action: componentOrFunctionAction,\n        iconVariant,\n        variant,\n        hideIconVariant,\n        style,\n        className,\n    } = props;\n\n    const icon = iconVariant[variant];\n\n    let action = componentOrFunctionAction;\n    if (typeof action === 'function') {\n        action = action(id);\n    }\n\n    return (\n        <SnackbarContent\n            ref={forwardedRef}\n            role=\"alert\"\n            aria-describedby={ariaDescribedby}\n            style={style}\n            className={clsx(\n                ComponentClasses.MuiContent,\n                ComponentClasses.MuiContentVariant(variant),\n                classes.root,\n                { [classes.lessPadding]: !hideIconVariant && icon },\n                classes[variant],\n                className\n            )}\n        >\n            <div id={ariaDescribedby} className={classes.message}>\n                {!hideIconVariant ? icon : null}\n                {message}\n            </div>\n            {action && <div className={classes.action}>{action}</div>}\n        </SnackbarContent>\n    );\n});\n\nMaterialDesignContent.displayName = 'MaterialDesignContent';\n\nexport default memo(MaterialDesignContent);\n","import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';\nimport clsx from 'clsx';\nimport Collapse from '../transitions/Collapse';\nimport { getSlideDirection, toSnackbarAnchorOrigin, keepSnackbarClassKeys } from './utils';\nimport {\n    TransitionHandlerProps,\n    SnackbarProviderProps,\n    CustomContentProps,\n    InternalSnack,\n    SharedProps,\n} from '../types';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport Snackbar from './Snackbar';\nimport { makeStyles } from '../utils/styles';\nimport MaterialDesignContent from '../ui/MaterialDesignContent';\n\nconst styles = makeStyles({\n    wrappedRoot: {\n        width: '100%',\n        position: 'relative',\n        transform: 'translateX(0)',\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n        minWidth: '288px',\n    },\n});\n\ninterface SnackbarItemProps extends Required<Pick<SnackbarProviderProps, 'onEntered' | 'onExited' | 'onClose'>> {\n    snack: InternalSnack;\n    classes: SnackbarProviderProps['classes'];\n    onEnter: SnackbarProviderProps['onEnter'];\n    onExit: SnackbarProviderProps['onExit'];\n    Component?: React.ComponentType<CustomContentProps>;\n}\n\nconst SnackbarItem: React.FC<SnackbarItemProps> = (props) => {\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n    const [collapsed, setCollapsed] = useState(true);\n\n    const handleClose: NonNullable<SharedProps['onClose']> = createChainedFunction([\n        props.snack.onClose,\n        props.onClose,\n    ]);\n\n    const handleEntered: TransitionHandlerProps['onEntered'] = () => {\n        if (props.snack.requestClose) {\n            handleClose(null, 'instructed', props.snack.id);\n        }\n    };\n\n    const handleExitedScreen = useCallback((): void => {\n        timeout.current = setTimeout(() => {\n            setCollapsed((col) => !col);\n        }, 125);\n    }, []);\n\n    useEffect(\n        () => (): void => {\n            if (timeout.current) {\n                clearTimeout(timeout.current);\n            }\n        },\n        []\n    );\n\n    const { snack, classes: allClasses, Component = MaterialDesignContent } = props;\n\n    const classes = useMemo(() => keepSnackbarClassKeys(allClasses), [allClasses]);\n\n    const {\n        open,\n        SnackbarProps,\n        TransitionComponent,\n        TransitionProps,\n        transitionDuration,\n        disableWindowBlurListener,\n        content: componentOrFunctionContent,\n        entered: ignoredEntered,\n        requestClose: ignoredRequestClose,\n        onEnter: ignoreOnEnter,\n        onEntered: ignoreOnEntered,\n        onExit: ignoreOnExit,\n        onExited: ignoreOnExited,\n        ...otherSnack\n    } = snack;\n\n    const transitionProps = {\n        direction: getSlideDirection(otherSnack.anchorOrigin),\n        timeout: transitionDuration,\n        ...TransitionProps,\n    };\n\n    let content = componentOrFunctionContent;\n    if (typeof content === 'function') {\n        content = content(otherSnack.id, otherSnack.message);\n    }\n\n    const callbacks: { [key in keyof TransitionHandlerProps]?: any } = (\n        ['onEnter', 'onEntered', 'onExit', 'onExited'] as (keyof TransitionHandlerProps)[]\n    ).reduce(\n        (acc, cbName) => ({\n            ...acc,\n            [cbName]: createChainedFunction([props.snack[cbName] as any, props[cbName] as any], otherSnack.id),\n        }),\n        {}\n    );\n\n    return (\n        <Collapse in={collapsed} onExited={callbacks.onExited}>\n            <Snackbar\n                open={open}\n                id={otherSnack.id}\n                disableWindowBlurListener={disableWindowBlurListener}\n                autoHideDuration={otherSnack.autoHideDuration}\n                className={clsx(\n                    styles.wrappedRoot,\n                    classes.root,\n                    classes[toSnackbarAnchorOrigin(otherSnack.anchorOrigin)]\n                )}\n                SnackbarProps={SnackbarProps}\n                onClose={handleClose}\n            >\n                <TransitionComponent\n                    {...transitionProps}\n                    appear\n                    in={open}\n                    onExit={callbacks.onExit}\n                    onExited={handleExitedScreen}\n                    onEnter={callbacks.onEnter}\n                    // order matters. first callbacks.onEntered to set entered: true,\n                    // then handleEntered to check if there's a request for closing\n                    onEntered={createChainedFunction([callbacks.onEntered, handleEntered], otherSnack.id)}\n                >\n                    {(content as React.ReactElement) || <Component {...otherSnack} />}\n                </TransitionComponent>\n            </Snackbar>\n        </Collapse>\n    );\n};\n\nexport default SnackbarItem;\n","import React, { memo } from 'react';\nimport clsx from 'clsx';\nimport createTransition from '../transitions/createTransition';\nimport { makeStyles, ComponentClasses } from '../utils/styles';\nimport { breakpoints, originKeyExtractor } from '../utils';\nimport { ContainerClassKey, SnackbarProviderProps } from '../types';\n\nconst indents = {\n    view: { default: 20, dense: 4 },\n    snackbar: { default: 6, dense: 2 },\n};\n\nconst collapseWrapper = `.${ComponentClasses.CollapseWrapper}`;\n\nconst xsWidthMargin = 16;\n\nconst styles = makeStyles({\n    root: {\n        boxSizing: 'border-box',\n        display: 'flex',\n        maxHeight: '100%',\n        position: 'fixed',\n        zIndex: 1400,\n        height: 'auto',\n        width: 'auto',\n        transition: createTransition(['top', 'right', 'bottom', 'left', 'max-width'], {\n            duration: 300,\n            easing: 'ease',\n        }),\n        // container itself is invisible and should not block clicks, clicks should be passed to its children\n        // a pointerEvents: all is applied in the collapse component\n        pointerEvents: 'none',\n        [collapseWrapper]: {\n            padding: `${indents.snackbar.default}px 0px`,\n            transition: 'padding 300ms ease 0ms',\n        },\n        maxWidth: `calc(100% - ${indents.view.default * 2}px)`,\n        [breakpoints.downXs]: {\n            width: '100%',\n            maxWidth: `calc(100% - ${xsWidthMargin * 2}px)`,\n        },\n    },\n    rootDense: {\n        [collapseWrapper]: {\n            padding: `${indents.snackbar.dense}px 0px`,\n        },\n    },\n    top: {\n        top: `${indents.view.default - indents.snackbar.default}px`,\n        flexDirection: 'column',\n    },\n    bottom: {\n        bottom: `${indents.view.default - indents.snackbar.default}px`,\n        flexDirection: 'column-reverse',\n    },\n    left: {\n        left: `${indents.view.default}px`,\n        [breakpoints.upSm]: {\n            alignItems: 'flex-start',\n        },\n        [breakpoints.downXs]: {\n            left: `${xsWidthMargin}px`,\n        },\n    },\n    right: {\n        right: `${indents.view.default}px`,\n        [breakpoints.upSm]: {\n            alignItems: 'flex-end',\n        },\n        [breakpoints.downXs]: {\n            right: `${xsWidthMargin}px`,\n        },\n    },\n    center: {\n        left: '50%',\n        transform: 'translateX(-50%)',\n        [breakpoints.upSm]: {\n            alignItems: 'center',\n        },\n    },\n});\n\ninterface SnackbarContainerProps {\n    children: React.ReactNode;\n    dense: SnackbarProviderProps['dense'];\n    anchorOrigin: NonNullable<SnackbarProviderProps['anchorOrigin']>;\n    classes: SnackbarProviderProps['classes'];\n}\n\nconst SnackbarContainer: React.FC<SnackbarContainerProps> = (props) => {\n    const { classes = {}, anchorOrigin, dense, children } = props;\n\n    const combinedClassname = clsx(\n        ComponentClasses.SnackbarContainer,\n        styles[anchorOrigin.vertical],\n        styles[anchorOrigin.horizontal],\n        { [styles.rootDense]: dense },\n        styles.root, // root should come after others to override maxWidth\n        classes.containerRoot,\n        classes[`containerAnchorOrigin${originKeyExtractor(anchorOrigin)}` as ContainerClassKey]\n    );\n\n    return <div className={combinedClassname}>{children}</div>;\n};\n\nexport default memo(SnackbarContainer);\n","/* eslint-disable */\nconst __DEV__ = process.env.NODE_ENV !== 'production';\n\nconst messages = {\n    NO_PERSIST_ALL:\n        \"Reached maxSnack while all enqueued snackbars have 'persist' flag. Notistack will dismiss the oldest snackbar anyway to allow other ones in the queue to be presented.\",\n};\n\nexport default (messageKey: keyof typeof messages): void => {\n    if (!__DEV__) return;\n\n    const message = messages[messageKey];\n    if (typeof console !== 'undefined') {\n        console.error(`WARNING - notistack: ${message}`);\n    }\n    try {\n        throw new Error(message);\n    } catch (x) {}\n};\n","import React, { Component, isValidElement } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport SnackbarContext from '../SnackbarContext';\nimport { originKeyExtractor, isDefined } from '../utils';\nimport { defaults, merge } from './merger';\nimport SnackbarItem from '../SnackbarItem';\nimport SnackbarContainer from '../SnackbarContainer';\nimport warning from '../utils/warning';\nimport {\n    SnackbarProviderProps,\n    SnackbarKey,\n    ProviderContext,\n    TransitionHandlerProps,\n    InternalSnack,\n    OptionsObject,\n    SharedProps,\n    SnackbarMessage,\n} from '../types';\nimport createChainedFunction from '../utils/createChainedFunction';\n\nconst isOptions = (\n    messageOrOptions: SnackbarMessage | (OptionsObject & { message?: SnackbarMessage })\n): messageOrOptions is OptionsObject & { message?: SnackbarMessage } => {\n    const isMessage = typeof messageOrOptions === 'string' || isValidElement(messageOrOptions);\n    return !isMessage;\n};\n\ntype Reducer = (state: State) => State;\ntype SnacksByPosition = { [key: string]: InternalSnack[] };\n\ninterface State {\n    snacks: InternalSnack[];\n    queue: InternalSnack[];\n    contextValue: ProviderContext;\n}\n\nexport let enqueueSnackbar: ProviderContext['enqueueSnackbar'];\nexport let closeSnackbar: ProviderContext['closeSnackbar'];\n\nclass SnackbarProvider extends Component<SnackbarProviderProps, State> {\n    constructor(props: SnackbarProviderProps) {\n        super(props);\n        enqueueSnackbar = this.enqueueSnackbar;\n        closeSnackbar = this.closeSnackbar;\n\n        this.state = {\n            snacks: [],\n            queue: [],\n            contextValue: {\n                enqueueSnackbar: this.enqueueSnackbar.bind(this),\n                closeSnackbar: this.closeSnackbar.bind(this),\n            },\n        };\n    }\n\n    get maxSnack(): number {\n        return this.props.maxSnack || defaults.maxSnack;\n    }\n\n    /**\n     * Adds a new snackbar to the queue to be presented.\n     * Returns generated or user defined key referencing the new snackbar or null\n     */\n    enqueueSnackbar = (\n        messageOrOptions: SnackbarMessage | (OptionsObject & { message?: SnackbarMessage }),\n        optsOrUndefined: OptionsObject = {}\n    ): SnackbarKey => {\n        if (messageOrOptions === undefined || messageOrOptions === null) {\n            throw new Error('enqueueSnackbar called with invalid argument');\n        }\n\n        const opts = isOptions(messageOrOptions) ? messageOrOptions : optsOrUndefined;\n\n        const message: SnackbarMessage | undefined = isOptions(messageOrOptions)\n            ? messageOrOptions.message\n            : messageOrOptions;\n\n        const { key, preventDuplicate, ...options } = opts;\n\n        const hasSpecifiedKey = isDefined(key);\n        const id = hasSpecifiedKey ? (key as SnackbarKey) : new Date().getTime() + Math.random();\n\n        const merger = merge(options, this.props);\n        const snack: InternalSnack = {\n            id,\n            ...options,\n            message,\n            open: true,\n            entered: false,\n            requestClose: false,\n            persist: merger('persist'),\n            action: merger('action'),\n            content: merger('content'),\n            variant: merger('variant'),\n            anchorOrigin: merger('anchorOrigin'),\n            disableWindowBlurListener: merger('disableWindowBlurListener'),\n            autoHideDuration: merger('autoHideDuration'),\n            hideIconVariant: merger('hideIconVariant'),\n            TransitionComponent: merger('TransitionComponent'),\n            transitionDuration: merger('transitionDuration'),\n            TransitionProps: merger('TransitionProps', true),\n            iconVariant: merger('iconVariant', true),\n            style: merger('style', true),\n            SnackbarProps: merger('SnackbarProps', true),\n            className: clsx(this.props.className, options.className),\n        };\n\n        if (snack.persist) {\n            snack.autoHideDuration = undefined;\n        }\n\n        this.setState((state) => {\n            if ((preventDuplicate === undefined && this.props.preventDuplicate) || preventDuplicate) {\n                const compareFunction = (item: InternalSnack): boolean =>\n                    hasSpecifiedKey ? item.id === id : item.message === message;\n\n                const inQueue = state.queue.findIndex(compareFunction) > -1;\n                const inView = state.snacks.findIndex(compareFunction) > -1;\n                if (inQueue || inView) {\n                    return state;\n                }\n            }\n\n            return this.handleDisplaySnack({\n                ...state,\n                queue: [...state.queue, snack],\n            });\n        });\n\n        return id;\n    };\n\n    /**\n     * Reducer: Display snack if there's space for it. Otherwise, immediately\n     * begin dismissing the oldest message to start showing the new one.\n     */\n    handleDisplaySnack: Reducer = (state) => {\n        const { snacks } = state;\n        if (snacks.length >= this.maxSnack) {\n            return this.handleDismissOldest(state);\n        }\n        return this.processQueue(state);\n    };\n\n    /**\n     * Reducer: Display items (notifications) in the queue if there's space for them.\n     */\n    processQueue: Reducer = (state) => {\n        const { queue, snacks } = state;\n        if (queue.length > 0) {\n            return {\n                ...state,\n                snacks: [...snacks, queue[0]],\n                queue: queue.slice(1, queue.length),\n            };\n        }\n        return state;\n    };\n\n    /**\n     * Reducer: Hide oldest snackbar on the screen because there exists a new one which we have to display.\n     * (ignoring the one with 'persist' flag. i.e. explicitly told by user not to get dismissed).\n     *\n     * Note 1: If there is already a message leaving the screen, no new messages are dismissed.\n     * Note 2: If the oldest message has not yet entered the screen, only a request to close the\n     *         snackbar is made. Once it entered the screen, it will be immediately dismissed.\n     */\n    handleDismissOldest: Reducer = (state) => {\n        if (state.snacks.some((item) => !item.open || item.requestClose)) {\n            return state;\n        }\n\n        let popped = false;\n        let ignore = false;\n\n        const persistentCount = state.snacks.reduce(\n            (acc, current) => acc + (current.open && current.persist ? 1 : 0),\n            0\n        );\n\n        if (persistentCount === this.maxSnack) {\n            warning('NO_PERSIST_ALL');\n            ignore = true;\n        }\n\n        const snacks = state.snacks.map((item) => {\n            if (!popped && (!item.persist || ignore)) {\n                popped = true;\n\n                if (!item.entered) {\n                    return {\n                        ...item,\n                        requestClose: true,\n                    };\n                }\n\n                if (item.onClose) {\n                    item.onClose(null, 'maxsnack', item.id);\n                }\n\n                if (this.props.onClose) {\n                    this.props.onClose(null, 'maxsnack', item.id);\n                }\n\n                return {\n                    ...item,\n                    open: false,\n                };\n            }\n\n            return { ...item };\n        });\n\n        return { ...state, snacks };\n    };\n\n    /**\n     * Set the entered state of the snackbar with the given key.\n     */\n    handleEnteredSnack: TransitionHandlerProps['onEntered'] = (node, isAppearing, key) => {\n        if (!isDefined(key)) {\n            throw new Error('handleEnteredSnack Cannot be called with undefined key');\n        }\n\n        this.setState(({ snacks }) => ({\n            snacks: snacks.map((item) => (item.id === key ? { ...item, entered: true } : { ...item })),\n        }));\n    };\n\n    /**\n     * Hide a snackbar after its timeout.\n     */\n    handleCloseSnack: NonNullable<SharedProps['onClose']> = (event, reason, key) => {\n        // should not use createChainedFunction for onClose.\n        // because this.closeSnackbar called this function\n        if (this.props.onClose) {\n            this.props.onClose(event, reason, key);\n        }\n\n        const shouldCloseAll = key === undefined;\n\n        this.setState(({ snacks, queue }) => ({\n            snacks: snacks.map((item) => {\n                if (!shouldCloseAll && item.id !== key) {\n                    return { ...item };\n                }\n\n                return item.entered ? { ...item, open: false } : { ...item, requestClose: true };\n            }),\n            queue: queue.filter((item) => item.id !== key),\n        }));\n    };\n\n    /**\n     * Close snackbar with the given key\n     */\n    closeSnackbar: ProviderContext['closeSnackbar'] = (key) => {\n        // call individual snackbar onClose callback passed through options parameter\n        const toBeClosed = this.state.snacks.find((item) => item.id === key);\n        if (isDefined(key) && toBeClosed && toBeClosed.onClose) {\n            toBeClosed.onClose(null, 'instructed', key);\n        }\n\n        this.handleCloseSnack(null, 'instructed', key);\n    };\n\n    /**\n     * When we set open attribute of a snackbar to false (i.e. after we hide a snackbar),\n     * it leaves the screen and immediately after leaving animation is done, this method\n     * gets called. We remove the hidden snackbar from state and then display notifications\n     * waiting in the queue (if any). If after this process the queue is not empty, the\n     * oldest message is dismissed.\n     */\n    handleExitedSnack: TransitionHandlerProps['onExited'] = (node, key) => {\n        if (!isDefined(key)) {\n            throw new Error('handleExitedSnack Cannot be called with undefined key');\n        }\n\n        this.setState((state) => {\n            const newState = this.processQueue({\n                ...state,\n                snacks: state.snacks.filter((item) => item.id !== key),\n            });\n\n            if (newState.queue.length === 0) {\n                return newState;\n            }\n\n            return this.handleDismissOldest(newState);\n        });\n    };\n\n    render(): JSX.Element {\n        const { contextValue } = this.state;\n        const { domRoot, children, dense = false, Components = {}, classes } = this.props;\n\n        const categ = this.state.snacks.reduce<SnacksByPosition>((acc, current) => {\n            const category = originKeyExtractor(current.anchorOrigin);\n            const existingOfCategory = acc[category] || [];\n            return {\n                ...acc,\n                [category]: [...existingOfCategory, current],\n            };\n        }, {});\n\n        const snackbars = Object.keys(categ).map((origin) => {\n            const snacks = categ[origin];\n            const [nomineeSnack] = snacks;\n            return (\n                <SnackbarContainer\n                    key={origin}\n                    dense={dense}\n                    anchorOrigin={nomineeSnack.anchorOrigin}\n                    classes={classes}\n                >\n                    {snacks.map((snack) => (\n                        <SnackbarItem\n                            key={snack.id}\n                            snack={snack}\n                            classes={classes}\n                            Component={Components[snack.variant]}\n                            onClose={this.handleCloseSnack}\n                            onEnter={this.props.onEnter}\n                            onExit={this.props.onExit}\n                            onExited={createChainedFunction([this.handleExitedSnack, this.props.onExited], snack.id)}\n                            onEntered={createChainedFunction([this.handleEnteredSnack, this.props.onEntered], snack.id)}\n                        />\n                    ))}\n                </SnackbarContainer>\n            );\n        });\n\n        return (\n            <SnackbarContext.Provider value={contextValue}>\n                {children}\n                {domRoot ? createPortal(snackbars, domRoot) : snackbars}\n            </SnackbarContext.Provider>\n        );\n    }\n}\n\nexport default SnackbarProvider;\n","import { useContext } from 'react';\nimport SnackbarContext from './SnackbarContext';\nimport { ProviderContext } from './types';\n\nexport default (): ProviderContext => useContext(SnackbarContext);\n"],"names":["noOp","React","createContext","enqueueSnackbar","closeSnackbar","breakpoints","downXs","upSm","capitalise","text","charAt","toUpperCase","slice","originKeyExtractor","anchor","vertical","horizontal","isDefined","value","UNMOUNTED","EXITED","ENTERING","ENTERED","EXITING","Transition","props","appear","initialStatus","appearStatus","unmountOnExit","mountOnEnter","state","status","nextCallback","getDerivedStateFromProps","prevState","nextIn","componentDidMount","updateStatus","componentDidUpdate","prevProps","nextStatus","componentWillUnmount","cancelNextCallback","getTimeouts","timeout","enter","exit","mounting","performEnter","performExit","setState","isAppearing","timeouts","safeSetState","onEntered","node","onEnter","onEntering","onTransitionEnd","onExited","onExit","onExiting","cancel","nextState","callback","setNextCallback","active","handler","doesNotHaveTimeoutOrListener","addEndListener","setTimeout","render","children","_in","childProps","nodeRef","current","Error","Component","noop","defaultProps","setRef","ref","useForkRef","refA","refB","refValue","getTransitionProps","style","mode","duration","easing","transitionTimingFunction","delay","transitionDelay","defaultEasing","easeInOut","easeOut","easeIn","sharp","reflow","scrollTop","formatMs","milliseconds","Math","round","createTransition","options","properties","Array","isArray","map","animatedProp","formattedDuration","formattedDelay","join","ownerDocument","document","ownerWindow","doc","defaultView","window","debounce","func","wait","debounced","args","later","apply","clearTimeout","clear","getTranslateValue","direction","rect","getBoundingClientRect","containerWindow","transform","fakeTransform","computedStyle","getComputedStyle","getPropertyValue","offsetX","offsetY","transformValues","split","parseInt","innerWidth","left","width","innerHeight","top","height","setTranslateValue","webkitTransform","Slide","inProp","other","handleRefIntermediary","handleRef","handleEnter","handleEntering","transitionProps","webkitTransition","transition","handleExit","handleExited","updatePosition","undefined","handleResize","addEventListener","removeEventListener","TransitionComponent","visibility","displayName","SvgIcon","viewBox","focusable","fontSize","marginInlineEnd","userSelect","display","fill","flexShrink","CheckIcon","d","WarningIcon","ErrorIcon","InfoIcon","defaultIconVariants","success","warning","error","info","defaults","maxSnack","persist","hideIconVariant","disableWindowBlurListener","variant","autoHideDuration","iconVariant","anchorOrigin","transitionDuration","getAutoHideDuration","optionsDuration","propsDuration","isNumberOrNull","numberish","getTransitionDuration","is","item","types","some","t","merge","name","shouldObjectMerge","makeStyles","styles","Object","entries","reduce","acc","key","css","ComponentClasses","SnackbarContainer","Snackbar","CollapseWrapper","MuiContent","MuiContentVariant","classes","root","entered","collapsedSize","Collapse","wrapperRef","getWrapperSize","clientHeight","wrapperSize","handleEntered","handleExiting","className","clsx","pointerEvents","overflow","minHeight","right","bottom","getSlideDirection","toSnackbarAnchorOrigin","keepSnackbarClassKeys","containerClasses","containerRoot","containerAnchorOriginTopCenter","containerAnchorOriginBottomCenter","containerAnchorOriginTopRight","containerAnchorOriginBottomRight","containerAnchorOriginTopLeft","containerAnchorOriginBottomLeft","keys","filter","obj","createChainedFunction","funcs","snackbarId","chainedFunction","argums","indexOf","push","useEnhancedEffect","useEventCallback","fn","onClose","id","open","SnackbarProps","timerAutoHide","handleClose","setAutoHideTimer","autoHideDurationParam","handlePause","handleResume","handleMouseEnter","event","onMouseEnter","handleMouseLeave","onMouseLeave","flexWrap","flexGrow","minWidth","SnackbarContent","forwardRef","backgroundColor","lineHeight","letterSpacing","color","alignItems","padding","borderRadius","boxShadow","lessPadding","paddingLeft","message","action","marginLeft","marginRight","ariaDescribedby","MaterialDesignContent","forwardedRef","componentOrFunctionAction","icon","role","memo","wrappedRoot","position","SnackbarItem","useRef","useState","collapsed","setCollapsed","snack","requestClose","handleExitedScreen","useCallback","col","useEffect","allClasses","useMemo","TransitionProps","componentOrFunctionContent","content","ignoredEntered","otherSnack","callbacks","cbName","indents","view","dense","snackbar","collapseWrapper","xsWidthMargin","boxSizing","maxHeight","zIndex","maxWidth","rootDense","flexDirection","center","combinedClassname","messages","NO_PERSIST_ALL","messageKey","console","x","isOptions","messageOrOptions","isMessage","isValidElement","SnackbarProvider","optsOrUndefined","opts","preventDuplicate","hasSpecifiedKey","Date","getTime","random","merger","compareFunction","inQueue","queue","findIndex","inView","snacks","handleDisplaySnack","length","handleDismissOldest","processQueue","popped","ignore","persistentCount","reason","shouldCloseAll","toBeClosed","find","handleCloseSnack","newState","contextValue","bind","domRoot","Components","categ","category","existingOfCategory","snackbars","origin","nomineeSnack","handleExitedSnack","handleEnteredSnack","SnackbarContext","Provider","createPortal","useContext"],"mappings":"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"}
+\ No newline at end of file
++{"version":3,"file":"notistack.cjs.development.js","sources":["../src/SnackbarContext.ts","../src/utils/index.ts","../src/transitions/Transition/Transition.tsx","../src/transitions/useForkRef.ts","../src/transitions/getTransitionProps.ts","../src/transitions/utils.ts","../src/transitions/createTransition.ts","../src/transitions/Slide/Slide.tsx","../src/utils/defaultIconVariants.tsx","../src/SnackbarProvider/merger.ts","../src/utils/styles.ts","../src/transitions/Collapse/Collapse.tsx","../src/SnackbarItem/utils.ts","../src/utils/createChainedFunction.ts","../src/utils/useEventCallback.ts","../src/SnackbarItem/Snackbar.tsx","../src/SnackbarContent/SnackbarContent.tsx","../src/ui/MaterialDesignContent/MaterialDesignContent.tsx","../src/SnackbarItem/SnackbarItem.tsx","../src/SnackbarContainer/SnackbarContainer.tsx","../src/utils/warning.ts","../src/SnackbarProvider/SnackbarProvider.tsx","../src/useSnackbar.ts"],"sourcesContent":["import React from 'react';\nimport { ProviderContext } from './types';\n\nconst noOp = () => {\n    return '';\n};\n\nexport default React.createContext<ProviderContext>({\n    enqueueSnackbar: noOp,\n    closeSnackbar: noOp,\n});\n","import { InternalSnack } from '../types';\n\nexport const breakpoints = {\n    downXs: '@media (max-width:599.95px)',\n    upSm: '@media (min-width:600px)',\n};\n\nconst capitalise = (text: string): string => text.charAt(0).toUpperCase() + text.slice(1);\n\nexport const originKeyExtractor = (anchor: InternalSnack['anchorOrigin']): string =>\n    `${capitalise(anchor.vertical)}${capitalise(anchor.horizontal)}`;\n\nexport const isDefined = (value: string | null | undefined | number): boolean => !!value || value === 0;\n","/**\n * BSD 3-Clause License\n *\n * Copyright (c) 2018, React Community\n * Forked from React (https://github.com/facebook/react) Copyright 2013-present, Facebook, Inc.\n * All rights reserved.\n *\n * Redistribution and use in source and binary forms, with or without\n * modification, are permitted provided that the following conditions are met:\n *\n * * Redistributions of source code must retain the above copyright notice, this\n * list of conditions and the following disclaimer.\n *\n * * Redistributions in binary form must reproduce the above copyright notice,\n * this list of conditions and the following disclaimer in the documentation\n * and/or other materials provided with the distribution.\n *\n * * Neither the name of the copyright holder nor the names of its\n * contributors may be used to endorse or promote products derived from\n * this software without specific prior written permission.\n *\n * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\n * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\n * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\n * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE\n * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL\n * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR\n * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER\n * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,\n * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\n * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n */\nimport React from 'react';\nimport { TransitionComponentProps, TransitionStatus } from '../../types';\n\nconst UNMOUNTED = 'unmounted';\nconst EXITED = 'exited';\nconst ENTERING = 'entering';\nconst ENTERED = 'entered';\nconst EXITING = 'exiting';\n\ninterface State {\n    status: TransitionStatus;\n}\n\ninterface NextCallback {\n    (): void;\n    cancel?: () => void;\n}\n\nclass Transition extends React.Component<TransitionComponentProps, State> {\n    appearStatus: TransitionStatus | null;\n\n    nextCallback: NextCallback | null;\n\n    constructor(props: TransitionComponentProps) {\n        super(props);\n\n        const { appear } = props;\n\n        let initialStatus: TransitionStatus;\n\n        this.appearStatus = null;\n\n        if (props.in) {\n            if (appear) {\n                initialStatus = EXITED;\n                this.appearStatus = ENTERING;\n            } else {\n                initialStatus = ENTERED;\n            }\n        } else if (props.unmountOnExit || props.mountOnEnter) {\n            initialStatus = UNMOUNTED;\n        } else {\n            initialStatus = EXITED;\n        }\n\n        this.state = { status: initialStatus };\n\n        this.nextCallback = null;\n    }\n\n    static getDerivedStateFromProps({ in: nextIn }: TransitionComponentProps, prevState: State) {\n        if (nextIn && prevState.status === UNMOUNTED) {\n            return { status: EXITED };\n        }\n        return null;\n    }\n\n    componentDidMount() {\n        this.updateStatus(true, this.appearStatus);\n    }\n\n    componentDidUpdate(prevProps: TransitionComponentProps) {\n        let nextStatus: TransitionStatus | null = null;\n        if (prevProps !== this.props) {\n            const { status } = this.state;\n\n            if (this.props.in) {\n                if (status !== ENTERING && status !== ENTERED) {\n                    nextStatus = ENTERING;\n                }\n            } else if (status === ENTERING || status === ENTERED) {\n                nextStatus = EXITING;\n            }\n        }\n        this.updateStatus(false, nextStatus);\n    }\n\n    componentWillUnmount() {\n        this.cancelNextCallback();\n    }\n\n    getTimeouts(): { exit: number; enter: number } {\n        const { timeout } = this.props;\n        let enter = timeout;\n        let exit = timeout;\n\n        if (timeout != null && typeof timeout !== 'number' && typeof timeout !== 'string') {\n            exit = timeout.exit;\n            enter = timeout.enter;\n        }\n        return {\n            exit: exit as number,\n            enter: enter as number,\n        };\n    }\n\n    updateStatus(mounting = false, nextStatus: TransitionStatus | null) {\n        if (nextStatus !== null) {\n            this.cancelNextCallback();\n\n            if (nextStatus === ENTERING) {\n                this.performEnter(mounting);\n            } else {\n                this.performExit();\n            }\n        } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n            this.setState({ status: UNMOUNTED });\n        }\n    }\n\n    get node() {\n        const node = this.props.nodeRef?.current;\n        if (!node) {\n            throw new Error('notistack - Custom snackbar is not refForwarding');\n        }\n        return node;\n    }\n\n    performEnter(mounting: boolean) {\n        const { enter } = this.props;\n        const isAppearing = mounting;\n\n        const timeouts = this.getTimeouts();\n\n        if (!mounting && !enter) {\n            this.safeSetState({ status: ENTERED }, () => {\n                if (this.props.onEntered) {\n                    this.props.onEntered(this.node, isAppearing);\n                }\n            });\n            return;\n        }\n\n        if (this.props.onEnter) {\n            this.props.onEnter(this.node, isAppearing);\n        }\n\n        this.safeSetState({ status: ENTERING }, () => {\n            if (this.props.onEntering) {\n                this.props.onEntering(this.node, isAppearing);\n            }\n\n            this.onTransitionEnd(timeouts.enter, () => {\n                this.safeSetState({ status: ENTERED }, () => {\n                    if (this.props.onEntered) {\n                        this.props.onEntered(this.node, isAppearing);\n                    }\n                });\n            });\n        });\n    }\n\n    performExit() {\n        const { exit } = this.props;\n        const timeouts = this.getTimeouts();\n\n        // no exit animation skip right to EXITED\n        if (!exit) {\n            this.safeSetState({ status: EXITED }, () => {\n                if (this.props.onExited) {\n                    this.props.onExited(this.node);\n                }\n            });\n            return;\n        }\n\n        if (this.props.onExit) {\n            this.props.onExit(this.node);\n        }\n\n        this.safeSetState({ status: EXITING }, () => {\n            if (this.props.onExiting) {\n                this.props.onExiting(this.node);\n            }\n\n            this.onTransitionEnd(timeouts.exit, () => {\n                this.safeSetState({ status: EXITED }, () => {\n                    if (this.props.onExited) {\n                        this.props.onExited(this.node);\n                    }\n                });\n            });\n        });\n    }\n\n    cancelNextCallback() {\n        if (this.nextCallback !== null && this.nextCallback.cancel) {\n            this.nextCallback.cancel();\n            this.nextCallback = null;\n        }\n    }\n\n    safeSetState(nextState: State, callback: () => void) {\n        callback = this.setNextCallback(callback);\n        this.setState(nextState, callback);\n    }\n\n    setNextCallback(callback: () => void) {\n        let active = true;\n\n        this.nextCallback = () => {\n            if (active) {\n                active = false;\n                this.nextCallback = null;\n\n                callback();\n            }\n        };\n\n        (this.nextCallback as NextCallback).cancel = () => {\n            active = false;\n        };\n\n        return this.nextCallback;\n    }\n\n    onTransitionEnd(timeout: number, handler: () => void) {\n        this.setNextCallback(handler);\n        const doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n        if (!this.node || doesNotHaveTimeoutOrListener) {\n            setTimeout(this.nextCallback as NextCallback, 0);\n            return;\n        }\n\n        if (this.props.addEndListener) {\n            this.props.addEndListener(this.node, this.nextCallback as NextCallback);\n        }\n\n        if (timeout != null) {\n            setTimeout(this.nextCallback as NextCallback, timeout);\n        }\n    }\n\n    render() {\n        const { status } = this.state;\n\n        if (status === UNMOUNTED) {\n            return null;\n        }\n\n        const {\n            children,\n            // filter props for `Transition`\n            in: _in,\n            mountOnEnter: _mountOnEnter,\n            unmountOnExit: _unmountOnExit,\n            appear: _appear,\n            enter: _enter,\n            exit: _exit,\n            timeout: _timeout,\n            addEndListener: _addEndListener,\n            onEnter: _onEnter,\n            onEntering: _onEntering,\n            onEntered: _onEntered,\n            onExit: _onExit,\n            onExiting: _onExiting,\n            onExited: _onExited,\n            nodeRef: _nodeRef,\n            ...childProps\n        } = this.props;\n\n        return children(status, childProps);\n    }\n}\n\nfunction noop() {\n    //\n}\n\n(Transition as any).defaultProps = {\n    in: false,\n    mountOnEnter: false,\n    unmountOnExit: false,\n    appear: false,\n    enter: true,\n    exit: true,\n\n    onEnter: noop,\n    onEntering: noop,\n    onEntered: noop,\n\n    onExit: noop,\n    onExiting: noop,\n    onExited: noop,\n};\n\nexport default Transition;\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\n\n/**\n * passes {value} to {ref}\n *\n * Useful if you want to expose the ref of an inner component to the public API\n * while still using it inside the component.\n * @param ref A ref callback or ref object. If anything falsy, this is a no-op.\n */\nfunction setRef<T>(\n    ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,\n    value: T | null\n): void {\n    if (typeof ref === 'function') {\n        ref(value);\n    } else if (ref) {\n        ref.current = value;\n    }\n}\n\nexport default function useForkRef<Instance>(\n    refA: React.Ref<Instance> | null | undefined,\n    refB: React.Ref<Instance> | null | undefined\n): React.Ref<Instance> | null {\n    /**\n     * This will create a new function if the ref props change and are defined.\n     * This means react will call the old forkRef with `null` and the new forkRef\n     * with the ref. Cleanup naturally emerges from this behavior.\n     */\n    return React.useMemo(() => {\n        if (refA == null && refB == null) {\n            return null;\n        }\n        return (refValue) => {\n            setRef(refA, refValue);\n            setRef(refB, refValue);\n        };\n    }, [refA, refB]);\n}\n","import { TransitionDuration } from '../types';\n\ninterface ComponentProps {\n    style?: React.CSSProperties | undefined;\n    /**\n     * number: 400\n     * TransitionDuration: { enter: 200, exit: 400 }\n     */\n    timeout: number | TransitionDuration;\n    mode: 'enter' | 'exit';\n}\n\ninterface TransitionPropsReturnType {\n    duration: number;\n    easing: string | undefined;\n    delay: string | undefined;\n}\n\nexport default function getTransitionProps(props: ComponentProps): TransitionPropsReturnType {\n    const { timeout, style = {}, mode } = props;\n    return {\n        duration: typeof timeout === 'object' ? timeout[mode] || 0 : timeout,\n        easing: style.transitionTimingFunction,\n        delay: style.transitionDelay,\n    };\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nexport const defaultEasing = {\n    // This is the most common easing curve.\n    easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    // Objects enter the screen at full velocity from off-screen and\n    // slowly decelerate to a resting point.\n    easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',\n    // Objects leave the screen at full velocity. They do not decelerate when off-screen.\n    easeIn: 'cubic-bezier(0.4, 0, 1, 1)',\n    // The sharp curve is used by objects that may return to the screen at any time.\n    sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',\n};\n\n/**\n * CSS hack to force a repaint\n */\nexport const reflow = (node: Element): void => {\n    // We have to do something with node.scrollTop.\n    // Otherwise it's removed from the compiled code by optimisers\n    // eslint-disable-next-line no-self-assign\n    node.scrollTop = node.scrollTop;\n};\n","import { defaultEasing } from './utils';\n\ninterface CreateTransitionOptions {\n    duration: string | number;\n    easing?: string;\n    delay?: string | number;\n}\n\nconst formatMs = (milliseconds: number) => `${Math.round(milliseconds)}ms`;\n\nexport default function createTransition(\n    props: string | string[] = ['all'],\n    options?: CreateTransitionOptions\n): string {\n    const { duration = 300, easing = defaultEasing.easeInOut, delay = 0 } = options || {};\n\n    const properties = Array.isArray(props) ? props : [props];\n\n    return properties\n        .map((animatedProp) => {\n            const formattedDuration = typeof duration === 'string' ? duration : formatMs(duration);\n            const formattedDelay = typeof delay === 'string' ? delay : formatMs(delay);\n            return `${animatedProp} ${formattedDuration} ${easing} ${formattedDelay}`;\n        })\n        .join(',');\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport TransitionComponent from '../Transition';\nimport useForkRef from '../useForkRef';\nimport getTransitionProps from '../getTransitionProps';\nimport createTransition from '../createTransition';\nimport { defaultEasing, reflow } from '../utils';\nimport { SlideTransitionDirection, TransitionProps } from '../../types';\n\nfunction ownerDocument(node: Node | null | undefined): Document {\n    return (node && node.ownerDocument) || document;\n}\n\nfunction ownerWindow(node: Node | null): Window {\n    const doc = ownerDocument(node);\n    return doc.defaultView || window;\n}\n\n/**\n * Corresponds to 10 frames at 60 Hz.\n * A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.\n */\nfunction debounce(func: () => void, wait = 166) {\n    let timeout: ReturnType<typeof setTimeout>;\n    function debounced(...args: any[]) {\n        const later = () => {\n            // @ts-ignore\n            func.apply(this, args);\n        };\n        clearTimeout(timeout);\n        timeout = setTimeout(later, wait);\n    }\n\n    debounced.clear = () => {\n        clearTimeout(timeout);\n    };\n\n    return debounced;\n}\n\n/**\n * Translate the node so it can't be seen on the screen.\n * Later, we're going to translate the node back to its original location with `none`.\n */\nfunction getTranslateValue(\n    direction: SlideTransitionDirection,\n    node: HTMLElement & { fakeTransform?: string }\n): string {\n    const rect = node.getBoundingClientRect();\n    const containerWindow = ownerWindow(node);\n    let transform;\n\n    if (node.fakeTransform) {\n        transform = node.fakeTransform;\n    } else {\n        const computedStyle = containerWindow.getComputedStyle(node);\n        transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');\n    }\n\n    let offsetX = 0;\n    let offsetY = 0;\n\n    if (transform && transform !== 'none' && typeof transform === 'string') {\n        const transformValues = transform.split('(')[1].split(')')[0].split(',');\n        offsetX = parseInt(transformValues[4], 10);\n        offsetY = parseInt(transformValues[5], 10);\n    }\n\n    switch (direction) {\n        case 'left':\n            return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;\n        case 'right':\n            return `translateX(-${rect.left + rect.width - offsetX}px)`;\n        case 'up':\n            return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;\n        default:\n            // down\n            return `translateY(-${rect.top + rect.height - offsetY}px)`;\n    }\n}\n\nfunction setTranslateValue(direction: SlideTransitionDirection, node: HTMLElement | null): void {\n    if (!node) return;\n    const transform = getTranslateValue(direction, node);\n    if (transform) {\n        node.style.webkitTransform = transform;\n        node.style.transform = transform;\n    }\n}\n\nconst Slide = React.forwardRef<unknown, TransitionProps>((props, ref) => {\n    const {\n        children,\n        direction = 'down',\n        in: inProp,\n        style,\n        timeout = 0,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        ...other\n    } = props;\n\n    const nodeRef = React.useRef(null);\n    const handleRefIntermediary = useForkRef((children as any).ref, nodeRef);\n    const handleRef = useForkRef(handleRefIntermediary, ref);\n\n    const handleEnter: TransitionProps['onEnter'] = (node, isAppearing) => {\n        setTranslateValue(direction, node);\n        reflow(node);\n\n        if (onEnter) {\n            onEnter(node, isAppearing);\n        }\n    };\n\n    const handleEntering = (node: HTMLElement) => {\n        const easing = style?.transitionTimingFunction || defaultEasing.easeOut;\n        const transitionProps = getTransitionProps({\n            timeout,\n            mode: 'enter',\n            style: { ...style, transitionTimingFunction: easing },\n        });\n\n        node.style.webkitTransition = createTransition('-webkit-transform', transitionProps);\n        node.style.transition = createTransition('transform', transitionProps);\n\n        node.style.webkitTransform = 'none';\n        node.style.transform = 'none';\n    };\n\n    const handleExit: TransitionProps['onExit'] = (node) => {\n        const easing = style?.transitionTimingFunction || defaultEasing.sharp;\n        const transitionProps = getTransitionProps({\n            timeout,\n            mode: 'exit',\n            style: { ...style, transitionTimingFunction: easing },\n        });\n\n        node.style.webkitTransition = createTransition('-webkit-transform', transitionProps);\n        node.style.transition = createTransition('transform', transitionProps);\n\n        setTranslateValue(direction, node);\n\n        if (onExit) {\n            onExit(node);\n        }\n    };\n\n    const handleExited: TransitionProps['onExited'] = (node) => {\n        // No need for transitions when the component is hidden\n        node.style.webkitTransition = '';\n        node.style.transition = '';\n\n        if (onExited) {\n            onExited(node);\n        }\n    };\n\n    const updatePosition = React.useCallback(() => {\n        if (nodeRef.current) {\n            setTranslateValue(direction, nodeRef.current);\n        }\n    }, [direction]);\n\n    React.useEffect(() => {\n        // Skip configuration where the position is screen size invariant.\n        if (inProp || direction === 'down' || direction === 'right') {\n            return undefined;\n        }\n\n        const handleResize = debounce(() => {\n            if (nodeRef.current) {\n                setTranslateValue(direction, nodeRef.current);\n            }\n        });\n\n        const containerWindow = ownerWindow(nodeRef.current);\n        containerWindow.addEventListener('resize', handleResize);\n        return () => {\n            handleResize.clear();\n            containerWindow.removeEventListener('resize', handleResize);\n        };\n    }, [direction, inProp]);\n\n    React.useEffect(() => {\n        if (!inProp) {\n            // We need to update the position of the drawer when the direction change and\n            // when it's hidden.\n            updatePosition();\n        }\n    }, [inProp, updatePosition]);\n\n    return (\n        <TransitionComponent\n            appear\n            nodeRef={nodeRef}\n            onEnter={handleEnter}\n            onEntered={onEntered}\n            onEntering={handleEntering}\n            onExit={handleExit}\n            onExited={handleExited}\n            in={inProp}\n            timeout={timeout}\n            {...other}\n        >\n            {(state, childProps) =>\n                React.cloneElement(children as any, {\n                    ref: handleRef,\n                    style: {\n                        visibility: state === 'exited' && !inProp ? 'hidden' : undefined,\n                        ...style,\n                        ...(children as any).props.style,\n                    },\n                    ...childProps,\n                })\n            }\n        </TransitionComponent>\n    );\n});\n\nSlide.displayName = 'Slide';\n\nexport default Slide;\n","import React from 'react';\n\nconst SvgIcon = (props: { children: JSX.Element }) => (\n    <svg\n        viewBox=\"0 0 24 24\"\n        focusable=\"false\"\n        style={{\n            fontSize: 20,\n            marginInlineEnd: 8,\n            userSelect: 'none',\n            width: '1em',\n            height: '1em',\n            display: 'inline-block',\n            fill: 'currentColor',\n            flexShrink: 0,\n        }}\n        {...props}\n    />\n);\n\nconst CheckIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z\"\n        />\n    </SvgIcon>\n);\n\nconst WarningIcon: React.FC = () => (\n    <SvgIcon>\n        <path d=\"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z\" />\n    </SvgIcon>\n);\n\nconst ErrorIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z\"\n        />\n    </SvgIcon>\n);\n\nconst InfoIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z\"\n        />\n    </SvgIcon>\n);\n\nconst defaultIconVariants: Record<string, React.ReactNode> = {\n    default: undefined,\n    success: <CheckIcon />,\n    warning: <WarningIcon />,\n    error: <ErrorIcon />,\n    info: <InfoIcon />,\n};\n\nexport default defaultIconVariants;\n","import Slide from '../transitions/Slide';\nimport defaultIconVariants from '../utils/defaultIconVariants';\nimport { InternalSnack } from '../types';\n\nexport const defaults = {\n    maxSnack: 3,\n    persist: false,\n    hideIconVariant: false,\n    disableWindowBlurListener: false,\n    variant: 'default',\n    autoHideDuration: 5000,\n    iconVariant: defaultIconVariants,\n    anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n    TransitionComponent: Slide,\n    transitionDuration: {\n        enter: 225,\n        exit: 195,\n    },\n};\n\n/**\n * Derives the right autoHideDuration taking into account the following\n * prority order: 1: Options, 2: Props, 3: default fallback\n */\nconst getAutoHideDuration = (optionsDuration: any, propsDuration: any) => {\n    const isNumberOrNull = (numberish: number | null) => typeof numberish === 'number' || numberish === null;\n\n    if (isNumberOrNull(optionsDuration)) return optionsDuration;\n    if (isNumberOrNull(propsDuration)) return propsDuration;\n    return defaults.autoHideDuration;\n};\n\n/**\n * Derives the right transitionDuration taking into account the following\n * prority order: 1: Options, 2: Props, 3: default fallback\n */\nconst getTransitionDuration = (optionsDuration: any, propsDuration: any) => {\n    const is = (item: any, types: string[]) => types.some((t) => typeof item === t);\n\n    if (is(optionsDuration, ['string', 'number'])) {\n        return optionsDuration;\n    }\n\n    if (is(optionsDuration, ['object'])) {\n        return {\n            ...defaults.transitionDuration,\n            ...(is(propsDuration, ['object']) && propsDuration),\n            ...optionsDuration,\n        };\n    }\n\n    if (is(propsDuration, ['string', 'number'])) {\n        return propsDuration;\n    }\n\n    if (is(propsDuration, ['object'])) {\n        return {\n            ...defaults.transitionDuration,\n            ...propsDuration,\n        };\n    }\n\n    return defaults.transitionDuration;\n};\n\nexport const merge =\n    (options: any, props: any) =>\n    (name: keyof InternalSnack, shouldObjectMerge = false): any => {\n        if (shouldObjectMerge) {\n            return {\n                ...(defaults as any)[name],\n                ...props[name],\n                ...options[name],\n            };\n        }\n\n        if (name === 'autoHideDuration') {\n            return getAutoHideDuration(options.autoHideDuration, props.autoHideDuration);\n        }\n\n        if (name === 'transitionDuration') {\n            return getTransitionDuration(options.transitionDuration, props.transitionDuration);\n        }\n\n        return options[name] || props[name] || (defaults as any)[name];\n    };\n","import React from 'react';\nimport { css, CSSAttribute } from 'goober';\nimport type { MakeStyles } from '../types';\n\nexport function defaultMakeStyles<S extends { [key: string]: CSSAttribute }>(\n    styles: S\n): { [key in keyof S]: string } {\n    return Object.entries(styles).reduce(\n        (acc, [key, value]) => ({\n            ...acc,\n            [key]: css(value),\n        }),\n        {} as { [key in keyof S]: string }\n    );\n}\n\nexport const MakeStylesContext = React.createContext<MakeStyles>(defaultMakeStyles);\n\nexport function useStyles<S extends { [key: string]: CSSAttribute }>(styles: S): { [key in keyof S]: string } {\n    const makeStyles = React.useContext(MakeStylesContext);\n    return React.useMemo(() => makeStyles(styles), [makeStyles, styles]);\n}\n\nexport const ComponentClasses = {\n    SnackbarContainer: 'notistack-SnackbarContainer',\n    Snackbar: 'notistack-Snackbar',\n    CollapseWrapper: 'notistack-CollapseWrapper',\n    MuiContent: 'notistack-MuiContent',\n    MuiContentVariant: (variant: string) => `notistack-MuiContent-${variant}`,\n};\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport { reflow } from '../utils';\nimport TransitionComponent from '../Transition';\nimport useForkRef from '../useForkRef';\nimport { TransitionProps } from '../../types';\nimport getTransitionProps from '../getTransitionProps';\nimport createTransition from '../createTransition';\nimport { ComponentClasses, useStyles } from '../../utils/styles';\n\nconst styles = {\n    root: {\n        height: 0,\n    },\n    entered: {\n        height: 'auto',\n    },\n};\n\nconst collapsedSize = '0px';\nconst timeout = 175;\n\ninterface CollapseProps {\n    children: JSX.Element;\n    in: boolean;\n    onExited: TransitionProps['onExited'];\n}\n\nconst Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {\n    const classes = useStyles(styles);\n    const { children, in: inProp, onExited } = props;\n\n    const wrapperRef = React.useRef<HTMLDivElement>(null);\n\n    const nodeRef = React.useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, nodeRef);\n\n    const getWrapperSize = () => (wrapperRef.current ? wrapperRef.current.clientHeight : 0);\n\n    const handleEnter: TransitionProps['onEnter'] = (node) => {\n        node.style.height = collapsedSize;\n    };\n\n    const handleEntering = (node: HTMLElement) => {\n        const wrapperSize = getWrapperSize();\n\n        const { duration: transitionDuration, easing } = getTransitionProps({\n            timeout,\n            mode: 'enter',\n        });\n\n        node.style.transitionDuration =\n            typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n\n        node.style.height = `${wrapperSize}px`;\n        node.style.transitionTimingFunction = easing || '';\n    };\n\n    const handleEntered: TransitionProps['onEntered'] = (node) => {\n        node.style.height = 'auto';\n    };\n\n    const handleExit: TransitionProps['onExit'] = (node) => {\n        node.style.height = `${getWrapperSize()}px`;\n    };\n\n    const handleExiting = (node: HTMLElement) => {\n        reflow(node);\n\n        const { duration: transitionDuration, easing } = getTransitionProps({\n            timeout,\n            mode: 'exit',\n        });\n\n        node.style.transitionDuration =\n            typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n        node.style.height = collapsedSize;\n        node.style.transitionTimingFunction = easing || '';\n    };\n\n    return (\n        <TransitionComponent\n            in={inProp}\n            unmountOnExit\n            onEnter={handleEnter}\n            onEntered={handleEntered}\n            onEntering={handleEntering}\n            onExit={handleExit}\n            onExited={onExited}\n            onExiting={handleExiting}\n            nodeRef={nodeRef}\n            timeout={timeout}\n        >\n            {(state, childProps) => (\n                <div\n                    ref={handleRef}\n                    className={clsx(classes.root, { [classes.entered]: state === 'entered' })}\n                    style={{\n                        pointerEvents: 'all',\n                        overflow: 'hidden',\n                        minHeight: collapsedSize,\n                        transition: createTransition('height'),\n                        ...(state === 'entered' && {\n                            overflow: 'visible',\n                        }),\n                        ...(state === 'exited' &&\n                            !inProp && {\n                                visibility: 'hidden',\n                            }),\n                    }}\n                    {...childProps}\n                >\n                    <div\n                        ref={wrapperRef}\n                        className={ComponentClasses.CollapseWrapper}\n                        // Hack to get children with a negative margin to not falsify the height computation.\n                        style={{ display: 'flex', width: '100%' }}\n                    >\n                        {children}\n                    </div>\n                </div>\n            )}\n        </TransitionComponent>\n    );\n});\n\nCollapse.displayName = 'Collapse';\n\nexport default Collapse;\n","import {\n    InternalSnack,\n    SlideTransitionDirection,\n    SnackbarOrigin,\n    SnackbarClassKey,\n    SnackbarProviderProps,\n    ClassNameMap,\n    ContainerClassKey,\n} from '../types';\nimport { originKeyExtractor } from '../utils';\n\nconst direction: Record<string, SlideTransitionDirection> = {\n    right: 'left',\n    left: 'right',\n    bottom: 'up',\n    top: 'down',\n};\n\nexport const getSlideDirection = (anchorOrigin: InternalSnack['anchorOrigin']): SlideTransitionDirection => {\n    if (anchorOrigin.horizontal !== 'center') {\n        return direction[anchorOrigin.horizontal];\n    }\n    return direction[anchorOrigin.vertical];\n};\n\n/** Tranforms classes name */\nexport const toSnackbarAnchorOrigin = (anchorOrigin: SnackbarOrigin): SnackbarClassKey =>\n    `anchorOrigin${originKeyExtractor(anchorOrigin)}` as SnackbarClassKey;\n\n/**\n * Omit SnackbarContainer class keys that are not needed for SnackbarItem\n */\nexport const keepSnackbarClassKeys = (\n    classes: SnackbarProviderProps['classes'] = {}\n): Partial<ClassNameMap<SnackbarClassKey>> => {\n    const containerClasses: Record<ContainerClassKey, true> = {\n        containerRoot: true,\n        containerAnchorOriginTopCenter: true,\n        containerAnchorOriginBottomCenter: true,\n        containerAnchorOriginTopRight: true,\n        containerAnchorOriginBottomRight: true,\n        containerAnchorOriginTopLeft: true,\n        containerAnchorOriginBottomLeft: true,\n    };\n    return (Object.keys(classes) as ContainerClassKey[])\n        .filter((key) => !containerClasses[key])\n        .reduce((obj, key) => ({ ...obj, [key]: classes[key] }), {});\n};\n","import { SnackbarKey } from 'src/types';\n\nconst noOp = () => {\n    /* */\n};\n\n/**\n * Credit to MUI team @ https://mui.com\n * Safe chained function.\n *\n * Will only create a new function if needed,\n * otherwise will pass back existing functions or null.\n */\nexport default function createChainedFunction<Args extends any[], This>(\n    funcs: Array<((this: This, ...args: Args) => any) | undefined>,\n    snackbarId?: SnackbarKey\n): (this: This, ...args: Args) => void {\n    // @ts-ignore\n    return funcs.reduce((acc, func) => {\n        if (func === null || func === undefined) {\n            return acc;\n        }\n\n        return function chainedFunction(...args) {\n            const argums = [...args] as any;\n            if (snackbarId && argums.indexOf(snackbarId) === -1) {\n                argums.push(snackbarId);\n            }\n            // @ts-ignore\n            acc.apply(this, argums);\n            func.apply(this, argums);\n        };\n    }, noOp);\n}\n","/**\n * Credit to MUI team @ https://mui.com\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nimport * as React from 'react';\n\nconst useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\nexport default function useEventCallback<Args extends unknown[], Return>(\n    fn: (...args: Args) => Return\n): (...args: Args) => Return {\n    const ref = React.useRef(fn);\n    useEnhancedEffect(() => {\n        ref.current = fn;\n    });\n    return React.useCallback(\n        (...args: Args) =>\n            // @ts-expect-error hide `this`\n            (0, ref.current)(...args),\n        []\n    );\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport useEventCallback from '../utils/useEventCallback';\nimport { CloseReason, SharedProps, SnackbarKey } from '../types';\nimport { ComponentClasses } from '../utils/styles';\n\ninterface SnackbarProps extends Required<Pick<SharedProps, 'disableWindowBlurListener' | 'onClose'>> {\n    open: boolean;\n    id: SnackbarKey;\n    className: string;\n    children: JSX.Element;\n    autoHideDuration: number | null | undefined;\n    SnackbarProps: SharedProps['SnackbarProps'];\n}\n\nconst Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>((props, ref) => {\n    const {\n        children,\n        className,\n        autoHideDuration,\n        disableWindowBlurListener = false,\n        onClose,\n        id,\n        open,\n        SnackbarProps = {},\n    } = props;\n\n    const timerAutoHide = React.useRef<ReturnType<typeof setTimeout>>();\n\n    const handleClose = useEventCallback((...args: [null, CloseReason, SnackbarKey]) => {\n        if (onClose) {\n            onClose(...args);\n        }\n    });\n\n    const setAutoHideTimer = useEventCallback((autoHideDurationParam?: number | null) => {\n        if (!onClose || autoHideDurationParam == null) {\n            return;\n        }\n\n        if (timerAutoHide.current) {\n            clearTimeout(timerAutoHide.current);\n        }\n        timerAutoHide.current = setTimeout(() => {\n            handleClose(null, 'timeout', id);\n        }, autoHideDurationParam);\n    });\n\n    React.useEffect(() => {\n        if (open) {\n            setAutoHideTimer(autoHideDuration);\n        }\n\n        return () => {\n            if (timerAutoHide.current) {\n                clearTimeout(timerAutoHide.current);\n            }\n        };\n    }, [open, autoHideDuration, setAutoHideTimer]);\n\n    /**\n     * Pause the timer when the user is interacting with the Snackbar\n     * or when the user hide the window.\n     */\n    const handlePause = () => {\n        if (timerAutoHide.current) {\n            clearTimeout(timerAutoHide.current);\n        }\n    };\n\n    /**\n     * Restart the timer when the user is no longer interacting with the Snackbar\n     * or when the window is shown back.\n     */\n    const handleResume = React.useCallback(() => {\n        if (autoHideDuration != null) {\n            setAutoHideTimer(autoHideDuration * 0.5);\n        }\n    }, [autoHideDuration, setAutoHideTimer]);\n\n    const handleMouseEnter: React.MouseEventHandler<HTMLDivElement> = (event) => {\n        if (SnackbarProps.onMouseEnter) {\n            SnackbarProps.onMouseEnter(event);\n        }\n        handlePause();\n    };\n\n    const handleMouseLeave: React.MouseEventHandler<HTMLDivElement> = (event) => {\n        if (SnackbarProps.onMouseLeave) {\n            SnackbarProps.onMouseLeave(event);\n        }\n        handleResume();\n    };\n\n    React.useEffect(() => {\n        if (!disableWindowBlurListener && open) {\n            window.addEventListener('focus', handleResume);\n            window.addEventListener('blur', handlePause);\n\n            return () => {\n                window.removeEventListener('focus', handleResume);\n                window.removeEventListener('blur', handlePause);\n            };\n        }\n\n        return undefined;\n    }, [disableWindowBlurListener, handleResume, open]);\n\n    return (\n        <div\n            ref={ref}\n            {...SnackbarProps}\n            className={clsx(ComponentClasses.Snackbar, className)}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n        >\n            {children}\n        </div>\n    );\n});\n\nSnackbar.displayName = 'Snackbar';\n\nexport default Snackbar;\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SnackbarContentProps } from '../types';\nimport { breakpoints } from '../utils';\nimport { useStyles } from '../utils/styles';\n\nconst styles = {\n    root: {\n        display: 'flex',\n        flexWrap: 'wrap',\n        flexGrow: 1,\n        [breakpoints.upSm]: {\n            flexGrow: 'initial',\n            minWidth: '288px',\n        },\n    },\n};\n\nconst SnackbarContent = forwardRef<HTMLDivElement, SnackbarContentProps>(({ className, ...props }, ref) => {\n    const classes = useStyles(styles);\n    return <div ref={ref} className={clsx(classes.root, className)} {...props} />;\n});\n\nSnackbarContent.displayName = 'SnackbarContent';\n\nexport default SnackbarContent;\n","import React, { memo, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport SnackbarContent from '../../SnackbarContent';\nimport { CustomContentProps } from '../../types';\nimport { ComponentClasses, useStyles } from '../../utils/styles';\n\nconst styles = {\n    root: {\n        backgroundColor: '#313131', // dark grey\n        fontSize: '0.875rem',\n        lineHeight: 1.43,\n        letterSpacing: '0.01071em',\n        color: '#fff',\n        alignItems: 'center',\n        padding: '6px 16px',\n        borderRadius: '4px',\n        boxShadow:\n            '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',\n    },\n    lessPadding: {\n        paddingLeft: `${8 * 2.5}px`,\n    },\n    default: {\n        backgroundColor: '#313131', // dark grey\n    },\n    success: {\n        backgroundColor: '#43a047', // green\n    },\n    error: {\n        backgroundColor: '#d32f2f', // dark red\n    },\n    warning: {\n        backgroundColor: '#ff9800', // amber\n    },\n    info: {\n        backgroundColor: '#2196f3', // nice blue\n    },\n    message: {\n        display: 'flex',\n        alignItems: 'center',\n        padding: '8px 0',\n    },\n    action: {\n        display: 'flex',\n        alignItems: 'center',\n        marginLeft: 'auto',\n        paddingLeft: '16px',\n        marginRight: '-8px',\n    },\n};\n\nconst ariaDescribedby = 'notistack-snackbar';\n\nconst MaterialDesignContent = forwardRef<HTMLDivElement, CustomContentProps>((props, forwardedRef) => {\n    const classes = useStyles(styles);\n    const {\n        id,\n        message,\n        action: componentOrFunctionAction,\n        iconVariant,\n        variant,\n        hideIconVariant,\n        style,\n        className,\n    } = props;\n\n    const icon = iconVariant[variant];\n\n    let action = componentOrFunctionAction;\n    if (typeof action === 'function') {\n        action = action(id);\n    }\n\n    return (\n        <SnackbarContent\n            ref={forwardedRef}\n            role=\"alert\"\n            aria-describedby={ariaDescribedby}\n            style={style}\n            className={clsx(\n                ComponentClasses.MuiContent,\n                ComponentClasses.MuiContentVariant(variant),\n                classes.root,\n                { [classes.lessPadding]: !hideIconVariant && icon },\n                classes[variant],\n                className\n            )}\n        >\n            <div id={ariaDescribedby} className={classes.message}>\n                {!hideIconVariant ? icon : null}\n                {message}\n            </div>\n            {action && <div className={classes.action}>{action}</div>}\n        </SnackbarContent>\n    );\n});\n\nMaterialDesignContent.displayName = 'MaterialDesignContent';\n\nexport default memo(MaterialDesignContent);\n","import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';\nimport clsx from 'clsx';\nimport Collapse from '../transitions/Collapse';\nimport { getSlideDirection, toSnackbarAnchorOrigin, keepSnackbarClassKeys } from './utils';\nimport {\n    TransitionHandlerProps,\n    SnackbarProviderProps,\n    CustomContentProps,\n    InternalSnack,\n    SharedProps,\n} from '../types';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport Snackbar from './Snackbar';\nimport { useStyles } from '../utils/styles';\nimport MaterialDesignContent from '../ui/MaterialDesignContent';\n\nconst styleRules = {\n    wrappedRoot: {\n        width: '100%',\n        position: 'relative',\n        transform: 'translateX(0)',\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n        minWidth: '288px',\n    },\n};\n\ninterface SnackbarItemProps extends Required<Pick<SnackbarProviderProps, 'onEntered' | 'onExited' | 'onClose'>> {\n    snack: InternalSnack;\n    classes: SnackbarProviderProps['classes'];\n    onEnter: SnackbarProviderProps['onEnter'];\n    onExit: SnackbarProviderProps['onExit'];\n    Component?: React.ComponentType<CustomContentProps>;\n}\n\nconst SnackbarItem: React.FC<SnackbarItemProps> = (props) => {\n    const styles = useStyles(styleRules);\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n    const [collapsed, setCollapsed] = useState(true);\n\n    const handleClose: NonNullable<SharedProps['onClose']> = createChainedFunction([\n        props.snack.onClose,\n        props.onClose,\n    ]);\n\n    const handleEntered: TransitionHandlerProps['onEntered'] = () => {\n        if (props.snack.requestClose) {\n            handleClose(null, 'instructed', props.snack.id);\n        }\n    };\n\n    const handleExitedScreen = useCallback((): void => {\n        timeout.current = setTimeout(() => {\n            setCollapsed((col) => !col);\n        }, 125);\n    }, []);\n\n    useEffect(\n        () => (): void => {\n            if (timeout.current) {\n                clearTimeout(timeout.current);\n            }\n        },\n        []\n    );\n\n    const { snack, classes: allClasses, Component = MaterialDesignContent } = props;\n\n    const classes = useMemo(() => keepSnackbarClassKeys(allClasses), [allClasses]);\n\n    const {\n        open,\n        SnackbarProps,\n        TransitionComponent,\n        TransitionProps,\n        transitionDuration,\n        disableWindowBlurListener,\n        content: componentOrFunctionContent,\n        entered: ignoredEntered,\n        requestClose: ignoredRequestClose,\n        onEnter: ignoreOnEnter,\n        onEntered: ignoreOnEntered,\n        onExit: ignoreOnExit,\n        onExited: ignoreOnExited,\n        ...otherSnack\n    } = snack;\n\n    const transitionProps = {\n        direction: getSlideDirection(otherSnack.anchorOrigin),\n        timeout: transitionDuration,\n        ...TransitionProps,\n    };\n\n    let content = componentOrFunctionContent;\n    if (typeof content === 'function') {\n        content = content(otherSnack.id, otherSnack.message);\n    }\n\n    const callbacks: { [key in keyof TransitionHandlerProps]?: any } = (\n        ['onEnter', 'onEntered', 'onExit', 'onExited'] as (keyof TransitionHandlerProps)[]\n    ).reduce(\n        (acc, cbName) => ({\n            ...acc,\n            [cbName]: createChainedFunction([props.snack[cbName] as any, props[cbName] as any], otherSnack.id),\n        }),\n        {}\n    );\n\n    return (\n        <Collapse in={collapsed} onExited={callbacks.onExited}>\n            <Snackbar\n                open={open}\n                id={otherSnack.id}\n                disableWindowBlurListener={disableWindowBlurListener}\n                autoHideDuration={otherSnack.autoHideDuration}\n                className={clsx(\n                    styles.wrappedRoot,\n                    classes.root,\n                    classes[toSnackbarAnchorOrigin(otherSnack.anchorOrigin)]\n                )}\n                SnackbarProps={SnackbarProps}\n                onClose={handleClose}\n            >\n                <TransitionComponent\n                    {...transitionProps}\n                    appear\n                    in={open}\n                    onExit={callbacks.onExit}\n                    onExited={handleExitedScreen}\n                    onEnter={callbacks.onEnter}\n                    // order matters. first callbacks.onEntered to set entered: true,\n                    // then handleEntered to check if there's a request for closing\n                    onEntered={createChainedFunction([callbacks.onEntered, handleEntered], otherSnack.id)}\n                >\n                    {(content as React.ReactElement) || <Component {...otherSnack} />}\n                </TransitionComponent>\n            </Snackbar>\n        </Collapse>\n    );\n};\n\nexport default SnackbarItem;\n","import React, { memo } from 'react';\nimport clsx from 'clsx';\nimport createTransition from '../transitions/createTransition';\nimport { useStyles, ComponentClasses } from '../utils/styles';\nimport { breakpoints, originKeyExtractor } from '../utils';\nimport { ContainerClassKey, SnackbarProviderProps } from '../types';\n\nconst indents = {\n    view: { default: 20, dense: 4 },\n    snackbar: { default: 6, dense: 2 },\n};\n\nconst collapseWrapper = `.${ComponentClasses.CollapseWrapper}`;\n\nconst xsWidthMargin = 16;\n\nconst styleRules = {\n    root: {\n        boxSizing: 'border-box',\n        display: 'flex',\n        maxHeight: '100%',\n        position: 'fixed',\n        zIndex: 1400,\n        height: 'auto',\n        width: 'auto',\n        transition: createTransition(['top', 'right', 'bottom', 'left', 'max-width'], {\n            duration: 300,\n            easing: 'ease',\n        }),\n        // container itself is invisible and should not block clicks, clicks should be passed to its children\n        // a pointerEvents: all is applied in the collapse component\n        pointerEvents: 'none',\n        [collapseWrapper]: {\n            padding: `${indents.snackbar.default}px 0px`,\n            transition: 'padding 300ms ease 0ms',\n        },\n        maxWidth: `calc(100% - ${indents.view.default * 2}px)`,\n        [breakpoints.downXs]: {\n            width: '100%',\n            maxWidth: `calc(100% - ${xsWidthMargin * 2}px)`,\n        },\n    },\n    rootDense: {\n        [collapseWrapper]: {\n            padding: `${indents.snackbar.dense}px 0px`,\n        },\n    },\n    top: {\n        top: `${indents.view.default - indents.snackbar.default}px`,\n        flexDirection: 'column',\n    },\n    bottom: {\n        bottom: `${indents.view.default - indents.snackbar.default}px`,\n        flexDirection: 'column-reverse',\n    },\n    left: {\n        left: `${indents.view.default}px`,\n        [breakpoints.upSm]: {\n            alignItems: 'flex-start',\n        },\n        [breakpoints.downXs]: {\n            left: `${xsWidthMargin}px`,\n        },\n    },\n    right: {\n        right: `${indents.view.default}px`,\n        [breakpoints.upSm]: {\n            alignItems: 'flex-end',\n        },\n        [breakpoints.downXs]: {\n            right: `${xsWidthMargin}px`,\n        },\n    },\n    center: {\n        left: '50%',\n        transform: 'translateX(-50%)',\n        [breakpoints.upSm]: {\n            alignItems: 'center',\n        },\n    },\n};\n\ninterface SnackbarContainerProps {\n    children: React.ReactNode;\n    dense: SnackbarProviderProps['dense'];\n    anchorOrigin: NonNullable<SnackbarProviderProps['anchorOrigin']>;\n    classes: SnackbarProviderProps['classes'];\n}\n\nconst SnackbarContainer: React.FC<SnackbarContainerProps> = (props) => {\n    const styles = useStyles(styleRules);\n    const { classes = {}, anchorOrigin, dense, children } = props;\n\n    const combinedClassname = clsx(\n        ComponentClasses.SnackbarContainer,\n        styles[anchorOrigin.vertical],\n        styles[anchorOrigin.horizontal],\n        { [styles.rootDense]: dense },\n        styles.root, // root should come after others to override maxWidth\n        classes.containerRoot,\n        classes[`containerAnchorOrigin${originKeyExtractor(anchorOrigin)}` as ContainerClassKey]\n    );\n\n    return <div className={combinedClassname}>{children}</div>;\n};\n\nexport default memo(SnackbarContainer);\n","/* eslint-disable */\nconst __DEV__ = process.env.NODE_ENV !== 'production';\n\nconst messages = {\n    NO_PERSIST_ALL:\n        \"Reached maxSnack while all enqueued snackbars have 'persist' flag. Notistack will dismiss the oldest snackbar anyway to allow other ones in the queue to be presented.\",\n};\n\nexport default (messageKey: keyof typeof messages): void => {\n    if (!__DEV__) return;\n\n    const message = messages[messageKey];\n    if (typeof console !== 'undefined') {\n        console.error(`WARNING - notistack: ${message}`);\n    }\n    try {\n        throw new Error(message);\n    } catch (x) {}\n};\n","import React, { Component, isValidElement } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport SnackbarContext from '../SnackbarContext';\nimport { originKeyExtractor, isDefined } from '../utils';\nimport { defaults, merge } from './merger';\nimport SnackbarItem from '../SnackbarItem';\nimport SnackbarContainer from '../SnackbarContainer';\nimport warning from '../utils/warning';\nimport {\n    SnackbarProviderProps,\n    SnackbarKey,\n    ProviderContext,\n    TransitionHandlerProps,\n    InternalSnack,\n    OptionsObject,\n    SharedProps,\n    SnackbarMessage,\n} from '../types';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport { MakeStylesContext, defaultMakeStyles } from '../utils/styles';\n\nconst isOptions = (\n    messageOrOptions: SnackbarMessage | (OptionsObject & { message?: SnackbarMessage })\n): messageOrOptions is OptionsObject & { message?: SnackbarMessage } => {\n    const isMessage = typeof messageOrOptions === 'string' || isValidElement(messageOrOptions);\n    return !isMessage;\n};\n\ntype Reducer = (state: State) => State;\ntype SnacksByPosition = { [key: string]: InternalSnack[] };\n\ninterface State {\n    snacks: InternalSnack[];\n    queue: InternalSnack[];\n    contextValue: ProviderContext;\n}\n\nexport let enqueueSnackbar: ProviderContext['enqueueSnackbar'];\nexport let closeSnackbar: ProviderContext['closeSnackbar'];\n\nclass SnackbarProvider extends Component<SnackbarProviderProps, State> {\n    constructor(props: SnackbarProviderProps) {\n        super(props);\n        enqueueSnackbar = this.enqueueSnackbar;\n        closeSnackbar = this.closeSnackbar;\n\n        this.state = {\n            snacks: [],\n            queue: [],\n            contextValue: {\n                enqueueSnackbar: this.enqueueSnackbar.bind(this),\n                closeSnackbar: this.closeSnackbar.bind(this),\n            },\n        };\n    }\n\n    get maxSnack(): number {\n        return this.props.maxSnack || defaults.maxSnack;\n    }\n\n    /**\n     * Adds a new snackbar to the queue to be presented.\n     * Returns generated or user defined key referencing the new snackbar or null\n     */\n    enqueueSnackbar = (\n        messageOrOptions: SnackbarMessage | (OptionsObject & { message?: SnackbarMessage }),\n        optsOrUndefined: OptionsObject = {}\n    ): SnackbarKey => {\n        if (messageOrOptions === undefined || messageOrOptions === null) {\n            throw new Error('enqueueSnackbar called with invalid argument');\n        }\n\n        const opts = isOptions(messageOrOptions) ? messageOrOptions : optsOrUndefined;\n\n        const message: SnackbarMessage | undefined = isOptions(messageOrOptions)\n            ? messageOrOptions.message\n            : messageOrOptions;\n\n        const { key, preventDuplicate, ...options } = opts;\n\n        const hasSpecifiedKey = isDefined(key);\n        const id = hasSpecifiedKey ? (key as SnackbarKey) : new Date().getTime() + Math.random();\n\n        const merger = merge(options, this.props);\n        const snack: InternalSnack = {\n            id,\n            ...options,\n            message,\n            open: true,\n            entered: false,\n            requestClose: false,\n            persist: merger('persist'),\n            action: merger('action'),\n            content: merger('content'),\n            variant: merger('variant'),\n            anchorOrigin: merger('anchorOrigin'),\n            disableWindowBlurListener: merger('disableWindowBlurListener'),\n            autoHideDuration: merger('autoHideDuration'),\n            hideIconVariant: merger('hideIconVariant'),\n            TransitionComponent: merger('TransitionComponent'),\n            transitionDuration: merger('transitionDuration'),\n            TransitionProps: merger('TransitionProps', true),\n            iconVariant: merger('iconVariant', true),\n            style: merger('style', true),\n            SnackbarProps: merger('SnackbarProps', true),\n            className: clsx(this.props.className, options.className),\n        };\n\n        if (snack.persist) {\n            snack.autoHideDuration = undefined;\n        }\n\n        this.setState((state) => {\n            if ((preventDuplicate === undefined && this.props.preventDuplicate) || preventDuplicate) {\n                const compareFunction = (item: InternalSnack): boolean =>\n                    hasSpecifiedKey ? item.id === id : item.message === message;\n\n                const inQueue = state.queue.findIndex(compareFunction) > -1;\n                const inView = state.snacks.findIndex(compareFunction) > -1;\n                if (inQueue || inView) {\n                    return state;\n                }\n            }\n\n            return this.handleDisplaySnack({\n                ...state,\n                queue: [...state.queue, snack],\n            });\n        });\n\n        return id;\n    };\n\n    /**\n     * Reducer: Display snack if there's space for it. Otherwise, immediately\n     * begin dismissing the oldest message to start showing the new one.\n     */\n    handleDisplaySnack: Reducer = (state) => {\n        const { snacks } = state;\n        if (snacks.length >= this.maxSnack) {\n            return this.handleDismissOldest(state);\n        }\n        return this.processQueue(state);\n    };\n\n    /**\n     * Reducer: Display items (notifications) in the queue if there's space for them.\n     */\n    processQueue: Reducer = (state) => {\n        const { queue, snacks } = state;\n        if (queue.length > 0) {\n            return {\n                ...state,\n                snacks: [...snacks, queue[0]],\n                queue: queue.slice(1, queue.length),\n            };\n        }\n        return state;\n    };\n\n    /**\n     * Reducer: Hide oldest snackbar on the screen because there exists a new one which we have to display.\n     * (ignoring the one with 'persist' flag. i.e. explicitly told by user not to get dismissed).\n     *\n     * Note 1: If there is already a message leaving the screen, no new messages are dismissed.\n     * Note 2: If the oldest message has not yet entered the screen, only a request to close the\n     *         snackbar is made. Once it entered the screen, it will be immediately dismissed.\n     */\n    handleDismissOldest: Reducer = (state) => {\n        if (state.snacks.some((item) => !item.open || item.requestClose)) {\n            return state;\n        }\n\n        let popped = false;\n        let ignore = false;\n\n        const persistentCount = state.snacks.reduce(\n            (acc, current) => acc + (current.open && current.persist ? 1 : 0),\n            0\n        );\n\n        if (persistentCount === this.maxSnack) {\n            warning('NO_PERSIST_ALL');\n            ignore = true;\n        }\n\n        const snacks = state.snacks.map((item) => {\n            if (!popped && (!item.persist || ignore)) {\n                popped = true;\n\n                if (!item.entered) {\n                    return {\n                        ...item,\n                        requestClose: true,\n                    };\n                }\n\n                if (item.onClose) {\n                    item.onClose(null, 'maxsnack', item.id);\n                }\n\n                if (this.props.onClose) {\n                    this.props.onClose(null, 'maxsnack', item.id);\n                }\n\n                return {\n                    ...item,\n                    open: false,\n                };\n            }\n\n            return { ...item };\n        });\n\n        return { ...state, snacks };\n    };\n\n    /**\n     * Set the entered state of the snackbar with the given key.\n     */\n    handleEnteredSnack: TransitionHandlerProps['onEntered'] = (node, isAppearing, key) => {\n        if (!isDefined(key)) {\n            throw new Error('handleEnteredSnack Cannot be called with undefined key');\n        }\n\n        this.setState(({ snacks }) => ({\n            snacks: snacks.map((item) => (item.id === key ? { ...item, entered: true } : { ...item })),\n        }));\n    };\n\n    /**\n     * Hide a snackbar after its timeout.\n     */\n    handleCloseSnack: NonNullable<SharedProps['onClose']> = (event, reason, key) => {\n        // should not use createChainedFunction for onClose.\n        // because this.closeSnackbar called this function\n        if (this.props.onClose) {\n            this.props.onClose(event, reason, key);\n        }\n\n        const shouldCloseAll = key === undefined;\n\n        this.setState(({ snacks, queue }) => ({\n            snacks: snacks.map((item) => {\n                if (!shouldCloseAll && item.id !== key) {\n                    return { ...item };\n                }\n\n                return item.entered ? { ...item, open: false } : { ...item, requestClose: true };\n            }),\n            queue: queue.filter((item) => item.id !== key),\n        }));\n    };\n\n    /**\n     * Close snackbar with the given key\n     */\n    closeSnackbar: ProviderContext['closeSnackbar'] = (key) => {\n        // call individual snackbar onClose callback passed through options parameter\n        const toBeClosed = this.state.snacks.find((item) => item.id === key);\n        if (isDefined(key) && toBeClosed && toBeClosed.onClose) {\n            toBeClosed.onClose(null, 'instructed', key);\n        }\n\n        this.handleCloseSnack(null, 'instructed', key);\n    };\n\n    /**\n     * When we set open attribute of a snackbar to false (i.e. after we hide a snackbar),\n     * it leaves the screen and immediately after leaving animation is done, this method\n     * gets called. We remove the hidden snackbar from state and then display notifications\n     * waiting in the queue (if any). If after this process the queue is not empty, the\n     * oldest message is dismissed.\n     */\n    handleExitedSnack: TransitionHandlerProps['onExited'] = (node, key) => {\n        if (!isDefined(key)) {\n            throw new Error('handleExitedSnack Cannot be called with undefined key');\n        }\n\n        this.setState((state) => {\n            const newState = this.processQueue({\n                ...state,\n                snacks: state.snacks.filter((item) => item.id !== key),\n            });\n\n            if (newState.queue.length === 0) {\n                return newState;\n            }\n\n            return this.handleDismissOldest(newState);\n        });\n    };\n\n    render(): JSX.Element {\n        const { contextValue } = this.state;\n        const { domRoot, children, dense = false, Components = {}, classes, makeStyles = defaultMakeStyles } = this.props;\n\n        const categ = this.state.snacks.reduce<SnacksByPosition>((acc, current) => {\n            const category = originKeyExtractor(current.anchorOrigin);\n            const existingOfCategory = acc[category] || [];\n            return {\n                ...acc,\n                [category]: [...existingOfCategory, current],\n            };\n        }, {});\n\n        const snackbars = Object.keys(categ).map((origin) => {\n            const snacks = categ[origin];\n            const [nomineeSnack] = snacks;\n            return (\n                <SnackbarContainer\n                    key={origin}\n                    dense={dense}\n                    anchorOrigin={nomineeSnack.anchorOrigin}\n                    classes={classes}\n                >\n                    {snacks.map((snack) => (\n                        <SnackbarItem\n                            key={snack.id}\n                            snack={snack}\n                            classes={classes}\n                            Component={Components[snack.variant]}\n                            onClose={this.handleCloseSnack}\n                            onEnter={this.props.onEnter}\n                            onExit={this.props.onExit}\n                            onExited={createChainedFunction([this.handleExitedSnack, this.props.onExited], snack.id)}\n                            onEntered={createChainedFunction([this.handleEnteredSnack, this.props.onEntered], snack.id)}\n                        />\n                    ))}\n                </SnackbarContainer>\n            );\n        });\n\n        return (\n            <MakeStylesContext.Provider value={makeStyles}>\n                <SnackbarContext.Provider value={contextValue}>\n                    {children}\n                    {domRoot ? createPortal(snackbars, domRoot) : snackbars}\n                </SnackbarContext.Provider>\n            </MakeStylesContext.Provider>\n        );\n    }\n}\n\nexport default SnackbarProvider;\n","import { useContext } from 'react';\nimport SnackbarContext from './SnackbarContext';\nimport { ProviderContext } from './types';\n\nexport default (): ProviderContext => useContext(SnackbarContext);\n"],"names":["noOp","React","createContext","enqueueSnackbar","closeSnackbar","breakpoints","downXs","upSm","capitalise","text","charAt","toUpperCase","slice","originKeyExtractor","anchor","vertical","horizontal","isDefined","value","UNMOUNTED","EXITED","ENTERING","ENTERED","EXITING","Transition","props","appear","initialStatus","appearStatus","unmountOnExit","mountOnEnter","state","status","nextCallback","getDerivedStateFromProps","prevState","nextIn","componentDidMount","updateStatus","componentDidUpdate","prevProps","nextStatus","componentWillUnmount","cancelNextCallback","getTimeouts","timeout","enter","exit","mounting","performEnter","performExit","setState","isAppearing","timeouts","safeSetState","onEntered","node","onEnter","onEntering","onTransitionEnd","onExited","onExit","onExiting","cancel","nextState","callback","setNextCallback","active","handler","doesNotHaveTimeoutOrListener","addEndListener","setTimeout","render","children","_in","childProps","nodeRef","current","Error","Component","noop","defaultProps","setRef","ref","useForkRef","refA","refB","refValue","getTransitionProps","style","mode","duration","easing","transitionTimingFunction","delay","transitionDelay","defaultEasing","easeInOut","easeOut","easeIn","sharp","reflow","scrollTop","formatMs","milliseconds","Math","round","createTransition","options","properties","Array","isArray","map","animatedProp","formattedDuration","formattedDelay","join","ownerDocument","document","ownerWindow","doc","defaultView","window","debounce","func","wait","debounced","args","later","apply","clearTimeout","clear","getTranslateValue","direction","rect","getBoundingClientRect","containerWindow","transform","fakeTransform","computedStyle","getComputedStyle","getPropertyValue","offsetX","offsetY","transformValues","split","parseInt","innerWidth","left","width","innerHeight","top","height","setTranslateValue","webkitTransform","Slide","inProp","other","handleRefIntermediary","handleRef","handleEnter","handleEntering","transitionProps","webkitTransition","transition","handleExit","handleExited","updatePosition","undefined","handleResize","addEventListener","removeEventListener","TransitionComponent","visibility","displayName","SvgIcon","viewBox","focusable","fontSize","marginInlineEnd","userSelect","display","fill","flexShrink","CheckIcon","d","WarningIcon","ErrorIcon","InfoIcon","defaultIconVariants","success","warning","error","info","defaults","maxSnack","persist","hideIconVariant","disableWindowBlurListener","variant","autoHideDuration","iconVariant","anchorOrigin","transitionDuration","getAutoHideDuration","optionsDuration","propsDuration","isNumberOrNull","numberish","getTransitionDuration","is","item","types","some","t","merge","name","shouldObjectMerge","defaultMakeStyles","styles","Object","entries","reduce","acc","key","css","MakeStylesContext","useStyles","makeStyles","useContext","useMemo","ComponentClasses","SnackbarContainer","Snackbar","CollapseWrapper","MuiContent","MuiContentVariant","root","entered","collapsedSize","Collapse","classes","wrapperRef","getWrapperSize","clientHeight","wrapperSize","handleEntered","handleExiting","className","clsx","pointerEvents","overflow","minHeight","right","bottom","getSlideDirection","toSnackbarAnchorOrigin","keepSnackbarClassKeys","containerClasses","containerRoot","containerAnchorOriginTopCenter","containerAnchorOriginBottomCenter","containerAnchorOriginTopRight","containerAnchorOriginBottomRight","containerAnchorOriginTopLeft","containerAnchorOriginBottomLeft","keys","filter","obj","createChainedFunction","funcs","snackbarId","chainedFunction","argums","indexOf","push","useEnhancedEffect","useEventCallback","fn","onClose","id","open","SnackbarProps","timerAutoHide","handleClose","setAutoHideTimer","autoHideDurationParam","handlePause","handleResume","handleMouseEnter","event","onMouseEnter","handleMouseLeave","onMouseLeave","flexWrap","flexGrow","minWidth","SnackbarContent","forwardRef","backgroundColor","lineHeight","letterSpacing","color","alignItems","padding","borderRadius","boxShadow","lessPadding","paddingLeft","message","action","marginLeft","marginRight","ariaDescribedby","MaterialDesignContent","forwardedRef","componentOrFunctionAction","icon","role","memo","styleRules","wrappedRoot","position","SnackbarItem","useRef","useState","collapsed","setCollapsed","snack","requestClose","handleExitedScreen","useCallback","col","useEffect","allClasses","TransitionProps","componentOrFunctionContent","content","ignoredEntered","otherSnack","callbacks","cbName","indents","view","dense","snackbar","collapseWrapper","xsWidthMargin","boxSizing","maxHeight","zIndex","maxWidth","rootDense","flexDirection","center","combinedClassname","messages","NO_PERSIST_ALL","messageKey","console","x","isOptions","messageOrOptions","isMessage","isValidElement","SnackbarProvider","optsOrUndefined","opts","preventDuplicate","hasSpecifiedKey","Date","getTime","random","merger","compareFunction","inQueue","queue","findIndex","inView","snacks","handleDisplaySnack","length","handleDismissOldest","processQueue","popped","ignore","persistentCount","reason","shouldCloseAll","toBeClosed","find","handleCloseSnack","newState","contextValue","bind","domRoot","Components","categ","category","existingOfCategory","snackbars","origin","nomineeSnack","handleExitedSnack","handleEnteredSnack","Provider","SnackbarContext","createPortal"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAMA,IAAI,GAAG,SAAPA,IAAO;AACT,SAAO,EAAP;AACH,CAFD;;AAIA,mCAAeC,cAAK,CAACC,aAAN,CAAqC;AAChDC,EAAAA,eAAe,EAAEH,IAD+B;AAEhDI,EAAAA,aAAa,EAAEJ;AAFiC,CAArC,CAAf;;ACLO,IAAMK,WAAW,GAAG;AACvBC,EAAAA,MAAM,EAAE,6BADe;AAEvBC,EAAAA,IAAI,EAAE;AAFiB,CAApB;;AAKP,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,IAAD;AAAA,SAA0BA,IAAI,CAACC,MAAL,CAAY,CAAZ,EAAeC,WAAf,KAA+BF,IAAI,CAACG,KAAL,CAAW,CAAX,CAAzD;AAAA,CAAnB;;AAEA,AAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,MAAD;AAAA,cAC3BN,UAAU,CAACM,MAAM,CAACC,QAAR,CADiB,GACGP,UAAU,CAACM,MAAM,CAACE,UAAR,CADb;AAAA,CAA3B;AAGP,AAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD;AAAA,SAAwD,CAAC,CAACA,KAAF,IAAWA,KAAK,KAAK,CAA7E;AAAA,CAAlB;;ACuBP,IAAMC,SAAS,GAAG,WAAlB;AACA,IAAMC,MAAM,GAAG,QAAf;AACA,IAAMC,QAAQ,GAAG,UAAjB;AACA,IAAMC,OAAO,GAAG,SAAhB;AACA,IAAMC,OAAO,GAAG,SAAhB;;IAWMC;;;AAKF,sBAAYC,KAAZ;;;AACI,wCAAMA,KAAN;QAEQC,SAAWD,MAAXC;AAER,QAAIC,aAAJ;AAEA,UAAKC,YAAL,GAAoB,IAApB;;AAEA,QAAIH,KAAK,MAAT,EAAc;AACV,UAAIC,MAAJ,EAAY;AACRC,QAAAA,aAAa,GAAGP,MAAhB;AACA,cAAKQ,YAAL,GAAoBP,QAApB;AACH,OAHD,MAGO;AACHM,QAAAA,aAAa,GAAGL,OAAhB;AACH;AACJ,KAPD,MAOO,IAAIG,KAAK,CAACI,aAAN,IAAuBJ,KAAK,CAACK,YAAjC,EAA+C;AAClDH,MAAAA,aAAa,GAAGR,SAAhB;AACH,KAFM,MAEA;AACHQ,MAAAA,aAAa,GAAGP,MAAhB;AACH;;AAED,UAAKW,KAAL,GAAa;AAAEC,MAAAA,MAAM,EAAEL;AAAV,KAAb;AAEA,UAAKM,YAAL,GAAoB,IAApB;;AACH;;aAEMC,2BAAP,wCAA0EC,SAA1E;QAAsCC;;AAClC,QAAIA,MAAM,IAAID,SAAS,CAACH,MAAV,KAAqBb,SAAnC,EAA8C;AAC1C,aAAO;AAAEa,QAAAA,MAAM,EAAEZ;AAAV,OAAP;AACH;;AACD,WAAO,IAAP;AACH;;;;SAEDiB,oBAAA;AACI,SAAKC,YAAL,CAAkB,IAAlB,EAAwB,KAAKV,YAA7B;AACH;;SAEDW,qBAAA,4BAAmBC,SAAnB;AACI,QAAIC,UAAU,GAA4B,IAA1C;;AACA,QAAID,SAAS,KAAK,KAAKf,KAAvB,EAA8B;AAAA,UAClBO,MADkB,GACP,KAAKD,KADE,CAClBC,MADkB;;AAG1B,UAAI,KAAKP,KAAL,MAAJ,EAAmB;AACf,YAAIO,MAAM,KAAKX,QAAX,IAAuBW,MAAM,KAAKV,OAAtC,EAA+C;AAC3CmB,UAAAA,UAAU,GAAGpB,QAAb;AACH;AACJ,OAJD,MAIO,IAAIW,MAAM,KAAKX,QAAX,IAAuBW,MAAM,KAAKV,OAAtC,EAA+C;AAClDmB,QAAAA,UAAU,GAAGlB,OAAb;AACH;AACJ;;AACD,SAAKe,YAAL,CAAkB,KAAlB,EAAyBG,UAAzB;AACH;;SAEDC,uBAAA;AACI,SAAKC,kBAAL;AACH;;SAEDC,cAAA;QACYC,UAAY,KAAKpB,MAAjBoB;AACR,QAAIC,KAAK,GAAGD,OAAZ;AACA,QAAIE,IAAI,GAAGF,OAAX;;AAEA,QAAIA,OAAO,IAAI,IAAX,IAAmB,OAAOA,OAAP,KAAmB,QAAtC,IAAkD,OAAOA,OAAP,KAAmB,QAAzE,EAAmF;AAC/EE,MAAAA,IAAI,GAAGF,OAAO,CAACE,IAAf;AACAD,MAAAA,KAAK,GAAGD,OAAO,CAACC,KAAhB;AACH;;AACD,WAAO;AACHC,MAAAA,IAAI,EAAEA,IADH;AAEHD,MAAAA,KAAK,EAAEA;AAFJ,KAAP;AAIH;;SAEDR,eAAA,sBAAaU,QAAb,EAA+BP,UAA/B;QAAaO;AAAAA,MAAAA,WAAW;;;AACpB,QAAIP,UAAU,KAAK,IAAnB,EAAyB;AACrB,WAAKE,kBAAL;;AAEA,UAAIF,UAAU,KAAKpB,QAAnB,EAA6B;AACzB,aAAK4B,YAAL,CAAkBD,QAAlB;AACH,OAFD,MAEO;AACH,aAAKE,WAAL;AACH;AACJ,KARD,MAQO,IAAI,KAAKzB,KAAL,CAAWI,aAAX,IAA4B,KAAKE,KAAL,CAAWC,MAAX,KAAsBZ,MAAtD,EAA8D;AACjE,WAAK+B,QAAL,CAAc;AAAEnB,QAAAA,MAAM,EAAEb;AAAV,OAAd;AACH;AACJ;;SAUD8B,eAAA,sBAAaD,QAAb;;;QACYF,QAAU,KAAKrB,MAAfqB;AACR,QAAMM,WAAW,GAAGJ,QAApB;AAEA,QAAMK,QAAQ,GAAG,KAAKT,WAAL,EAAjB;;AAEA,QAAI,CAACI,QAAD,IAAa,CAACF,KAAlB,EAAyB;AACrB,WAAKQ,YAAL,CAAkB;AAAEtB,QAAAA,MAAM,EAAEV;AAAV,OAAlB,EAAuC;AACnC,YAAI,MAAI,CAACG,KAAL,CAAW8B,SAAf,EAA0B;AACtB,UAAA,MAAI,CAAC9B,KAAL,CAAW8B,SAAX,CAAqB,MAAI,CAACC,IAA1B,EAAgCJ,WAAhC;AACH;AACJ,OAJD;AAKA;AACH;;AAED,QAAI,KAAK3B,KAAL,CAAWgC,OAAf,EAAwB;AACpB,WAAKhC,KAAL,CAAWgC,OAAX,CAAmB,KAAKD,IAAxB,EAA8BJ,WAA9B;AACH;;AAED,SAAKE,YAAL,CAAkB;AAAEtB,MAAAA,MAAM,EAAEX;AAAV,KAAlB,EAAwC;AACpC,UAAI,MAAI,CAACI,KAAL,CAAWiC,UAAf,EAA2B;AACvB,QAAA,MAAI,CAACjC,KAAL,CAAWiC,UAAX,CAAsB,MAAI,CAACF,IAA3B,EAAiCJ,WAAjC;AACH;;AAED,MAAA,MAAI,CAACO,eAAL,CAAqBN,QAAQ,CAACP,KAA9B,EAAqC;AACjC,QAAA,MAAI,CAACQ,YAAL,CAAkB;AAAEtB,UAAAA,MAAM,EAAEV;AAAV,SAAlB,EAAuC;AACnC,cAAI,MAAI,CAACG,KAAL,CAAW8B,SAAf,EAA0B;AACtB,YAAA,MAAI,CAAC9B,KAAL,CAAW8B,SAAX,CAAqB,MAAI,CAACC,IAA1B,EAAgCJ,WAAhC;AACH;AACJ,SAJD;AAKH,OAND;AAOH,KAZD;AAaH;;SAEDF,cAAA;;;QACYH,OAAS,KAAKtB,MAAdsB;AACR,QAAMM,QAAQ,GAAG,KAAKT,WAAL,EAAjB;;AAGA,QAAI,CAACG,IAAL,EAAW;AACP,WAAKO,YAAL,CAAkB;AAAEtB,QAAAA,MAAM,EAAEZ;AAAV,OAAlB,EAAsC;AAClC,YAAI,MAAI,CAACK,KAAL,CAAWmC,QAAf,EAAyB;AACrB,UAAA,MAAI,CAACnC,KAAL,CAAWmC,QAAX,CAAoB,MAAI,CAACJ,IAAzB;AACH;AACJ,OAJD;AAKA;AACH;;AAED,QAAI,KAAK/B,KAAL,CAAWoC,MAAf,EAAuB;AACnB,WAAKpC,KAAL,CAAWoC,MAAX,CAAkB,KAAKL,IAAvB;AACH;;AAED,SAAKF,YAAL,CAAkB;AAAEtB,MAAAA,MAAM,EAAET;AAAV,KAAlB,EAAuC;AACnC,UAAI,MAAI,CAACE,KAAL,CAAWqC,SAAf,EAA0B;AACtB,QAAA,MAAI,CAACrC,KAAL,CAAWqC,SAAX,CAAqB,MAAI,CAACN,IAA1B;AACH;;AAED,MAAA,MAAI,CAACG,eAAL,CAAqBN,QAAQ,CAACN,IAA9B,EAAoC;AAChC,QAAA,MAAI,CAACO,YAAL,CAAkB;AAAEtB,UAAAA,MAAM,EAAEZ;AAAV,SAAlB,EAAsC;AAClC,cAAI,MAAI,CAACK,KAAL,CAAWmC,QAAf,EAAyB;AACrB,YAAA,MAAI,CAACnC,KAAL,CAAWmC,QAAX,CAAoB,MAAI,CAACJ,IAAzB;AACH;AACJ,SAJD;AAKH,OAND;AAOH,KAZD;AAaH;;SAEDb,qBAAA;AACI,QAAI,KAAKV,YAAL,KAAsB,IAAtB,IAA8B,KAAKA,YAAL,CAAkB8B,MAApD,EAA4D;AACxD,WAAK9B,YAAL,CAAkB8B,MAAlB;AACA,WAAK9B,YAAL,GAAoB,IAApB;AACH;AACJ;;SAEDqB,eAAA,sBAAaU,SAAb,EAA+BC,QAA/B;AACIA,IAAAA,QAAQ,GAAG,KAAKC,eAAL,CAAqBD,QAArB,CAAX;AACA,SAAKd,QAAL,CAAca,SAAd,EAAyBC,QAAzB;AACH;;SAEDC,kBAAA,yBAAgBD,QAAhB;;;AACI,QAAIE,MAAM,GAAG,IAAb;;AAEA,SAAKlC,YAAL,GAAoB;AAChB,UAAIkC,MAAJ,EAAY;AACRA,QAAAA,MAAM,GAAG,KAAT;AACA,QAAA,MAAI,CAAClC,YAAL,GAAoB,IAApB;AAEAgC,QAAAA,QAAQ;AACX;AACJ,KAPD;;AASC,SAAKhC,YAAL,CAAmC8B,MAAnC,GAA4C;AACzCI,MAAAA,MAAM,GAAG,KAAT;AACH,KAFA;;AAID,WAAO,KAAKlC,YAAZ;AACH;;SAED0B,kBAAA,yBAAgBd,OAAhB,EAAiCuB,OAAjC;AACI,SAAKF,eAAL,CAAqBE,OAArB;AACA,QAAMC,4BAA4B,GAAGxB,OAAO,IAAI,IAAX,IAAmB,CAAC,KAAKpB,KAAL,CAAW6C,cAApE;;AACA,QAAI,CAAC,KAAKd,IAAN,IAAca,4BAAlB,EAAgD;AAC5CE,MAAAA,UAAU,CAAC,KAAKtC,YAAN,EAAoC,CAApC,CAAV;AACA;AACH;;AAED,QAAI,KAAKR,KAAL,CAAW6C,cAAf,EAA+B;AAC3B,WAAK7C,KAAL,CAAW6C,cAAX,CAA0B,KAAKd,IAA/B,EAAqC,KAAKvB,YAA1C;AACH;;AAED,QAAIY,OAAO,IAAI,IAAf,EAAqB;AACjB0B,MAAAA,UAAU,CAAC,KAAKtC,YAAN,EAAoCY,OAApC,CAAV;AACH;AACJ;;SAED2B,SAAA;QACYxC,SAAW,KAAKD,MAAhBC;;AAER,QAAIA,MAAM,KAAKb,SAAf,EAA0B;AACtB,aAAO,IAAP;AACH;;sBAqBG,KAAKM;QAlBLgD,uBAAAA;QAEIC,AAeDC;;AAGP,WAAOF,QAAQ,CAACzC,MAAD,EAAS2C,UAAT,CAAf;AACH;;;;;;;AAvJG,UAAMnB,IAAI,0BAAG,KAAK/B,KAAL,CAAWmD,OAAd,wDAAG,oBAAoBC,OAAjC;;AACA,UAAI,CAACrB,IAAL,EAAW;AACP,cAAM,IAAIsB,KAAJ,CAAU,kDAAV,CAAN;AACH;;AACD,aAAOtB,IAAP;AACH;;;;EAlGoBvD,cAAK,CAAC8E;;AAuP/B,SAASC,IAAT;AAEC;;AAEAxD,UAAkB,CAACyD,YAAnB,GAAkC;AAC/B,QAAI,KAD2B;AAE/BnD,EAAAA,YAAY,EAAE,KAFiB;AAG/BD,EAAAA,aAAa,EAAE,KAHgB;AAI/BH,EAAAA,MAAM,EAAE,KAJuB;AAK/BoB,EAAAA,KAAK,EAAE,IALwB;AAM/BC,EAAAA,IAAI,EAAE,IANyB;AAQ/BU,EAAAA,OAAO,EAAEuB,IARsB;AAS/BtB,EAAAA,UAAU,EAAEsB,IATmB;AAU/BzB,EAAAA,SAAS,EAAEyB,IAVoB;AAY/BnB,EAAAA,MAAM,EAAEmB,IAZuB;AAa/BlB,EAAAA,SAAS,EAAEkB,IAboB;AAc/BpB,EAAAA,QAAQ,EAAEoB;AAdqB,CAAlC;;AC7SD;;;AAGA,AAEA;;;;;;;;AAOA,SAASE,MAAT,CACIC,GADJ,EAEIjE,KAFJ;AAII,MAAI,OAAOiE,GAAP,KAAe,UAAnB,EAA+B;AAC3BA,IAAAA,GAAG,CAACjE,KAAD,CAAH;AACH,GAFD,MAEO,IAAIiE,GAAJ,EAAS;AACZA,IAAAA,GAAG,CAACN,OAAJ,GAAc3D,KAAd;AACH;AACJ;;AAED,SAAwBkE,WACpBC,MACAC;AAEA;;;;;AAKA,SAAOrF,aAAA,CAAc;AACjB,QAAIoF,IAAI,IAAI,IAAR,IAAgBC,IAAI,IAAI,IAA5B,EAAkC;AAC9B,aAAO,IAAP;AACH;;AACD,WAAO,UAACC,QAAD;AACHL,MAAAA,MAAM,CAACG,IAAD,EAAOE,QAAP,CAAN;AACAL,MAAAA,MAAM,CAACI,IAAD,EAAOC,QAAP,CAAN;AACH,KAHD;AAIH,GARM,EAQJ,CAACF,IAAD,EAAOC,IAAP,CARI,CAAP;AASH;;SCvBuBE,mBAAmB/D;MAC/BoB,UAA8BpB,MAA9BoB;qBAA8BpB,MAArBgE;MAAAA,kCAAQ;MAAIC,OAASjE,MAATiE;AAC7B,SAAO;AACHC,IAAAA,QAAQ,EAAE,OAAO9C,OAAP,KAAmB,QAAnB,GAA8BA,OAAO,CAAC6C,IAAD,CAAP,IAAiB,CAA/C,GAAmD7C,OAD1D;AAEH+C,IAAAA,MAAM,EAAEH,KAAK,CAACI,wBAFX;AAGHC,IAAAA,KAAK,EAAEL,KAAK,CAACM;AAHV,GAAP;AAKH;;ACzBD;;;AAGA,AAAO,IAAMC,aAAa,GAAG;AACzB;AACAC,EAAAA,SAAS,EAAE,8BAFc;AAGzB;AACA;AACAC,EAAAA,OAAO,EAAE,8BALgB;AAMzB;AACAC,EAAAA,MAAM,EAAE,4BAPiB;AAQzB;AACAC,EAAAA,KAAK,EAAE;AATkB,CAAtB;AAYP;;;;AAGA,AAAO,IAAMC,MAAM,GAAG,SAATA,MAAS,CAAC7C,IAAD;AAClB;AACA;AACA;AACAA,EAAAA,IAAI,CAAC8C,SAAL,GAAiB9C,IAAI,CAAC8C,SAAtB;AACH,CALM;;ACVP,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,YAAD;AAAA,SAA6BC,IAAI,CAACC,KAAL,CAAWF,YAAX,CAA7B;AAAA,CAAjB;;AAEA,SAAwBG,iBACpBlF,OACAmF;MADAnF;AAAAA,IAAAA,QAA2B,CAAC,KAAD;;;aAG6CmF,OAAO,IAAI;2BAA3EjB;MAAAA,sCAAW;yBAAKC;MAAAA,kCAASI,aAAa,CAACC;wBAAWH;MAAAA,gCAAQ;;AAElE,MAAMe,UAAU,GAAGC,KAAK,CAACC,OAAN,CAActF,KAAd,IAAuBA,KAAvB,GAA+B,CAACA,KAAD,CAAlD;AAEA,SAAOoF,UAAU,CACZG,GADE,CACE,UAACC,YAAD;AACD,QAAMC,iBAAiB,GAAG,OAAOvB,QAAP,KAAoB,QAApB,GAA+BA,QAA/B,GAA0CY,QAAQ,CAACZ,QAAD,CAA5E;AACA,QAAMwB,cAAc,GAAG,OAAOrB,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCS,QAAQ,CAACT,KAAD,CAAnE;AACA,WAAUmB,YAAV,SAA0BC,iBAA1B,SAA+CtB,MAA/C,SAAyDuB,cAAzD;AACH,GALE,EAMFC,IANE,CAMG,GANH,CAAP;AAOH;;ACdD,SAASC,aAAT,CAAuB7D,IAAvB;AACI,SAAQA,IAAI,IAAIA,IAAI,CAAC6D,aAAd,IAAgCC,QAAvC;AACH;;AAED,SAASC,WAAT,CAAqB/D,IAArB;AACI,MAAMgE,GAAG,GAAGH,aAAa,CAAC7D,IAAD,CAAzB;AACA,SAAOgE,GAAG,CAACC,WAAJ,IAAmBC,MAA1B;AACH;AAED;;;;;;AAIA,SAASC,QAAT,CAAkBC,IAAlB,EAAoCC,IAApC;MAAoCA;AAAAA,IAAAA,OAAO;;;AACvC,MAAIhF,OAAJ;;AACA,WAASiF,SAAT;;;sCAAsBC;AAAAA,MAAAA;;;AAClB,QAAMC,KAAK,GAAG,SAARA,KAAQ;AACV;AACAJ,MAAAA,IAAI,CAACK,KAAL,CAAW,KAAX,EAAiBF,IAAjB;AACH,KAHD;;AAIAG,IAAAA,YAAY,CAACrF,OAAD,CAAZ;AACAA,IAAAA,OAAO,GAAG0B,UAAU,CAACyD,KAAD,EAAQH,IAAR,CAApB;AACH;;AAEDC,EAAAA,SAAS,CAACK,KAAV,GAAkB;AACdD,IAAAA,YAAY,CAACrF,OAAD,CAAZ;AACH,GAFD;;AAIA,SAAOiF,SAAP;AACH;AAED;;;;;;AAIA,SAASM,iBAAT,CACIC,SADJ,EAEI7E,IAFJ;AAII,MAAM8E,IAAI,GAAG9E,IAAI,CAAC+E,qBAAL,EAAb;AACA,MAAMC,eAAe,GAAGjB,WAAW,CAAC/D,IAAD,CAAnC;AACA,MAAIiF,SAAJ;;AAEA,MAAIjF,IAAI,CAACkF,aAAT,EAAwB;AACpBD,IAAAA,SAAS,GAAGjF,IAAI,CAACkF,aAAjB;AACH,GAFD,MAEO;AACH,QAAMC,aAAa,GAAGH,eAAe,CAACI,gBAAhB,CAAiCpF,IAAjC,CAAtB;AACAiF,IAAAA,SAAS,GAAGE,aAAa,CAACE,gBAAd,CAA+B,mBAA/B,KAAuDF,aAAa,CAACE,gBAAd,CAA+B,WAA/B,CAAnE;AACH;;AAED,MAAIC,OAAO,GAAG,CAAd;AACA,MAAIC,OAAO,GAAG,CAAd;;AAEA,MAAIN,SAAS,IAAIA,SAAS,KAAK,MAA3B,IAAqC,OAAOA,SAAP,KAAqB,QAA9D,EAAwE;AACpE,QAAMO,eAAe,GAAGP,SAAS,CAACQ,KAAV,CAAgB,GAAhB,EAAqB,CAArB,EAAwBA,KAAxB,CAA8B,GAA9B,EAAmC,CAAnC,EAAsCA,KAAtC,CAA4C,GAA5C,CAAxB;AACAH,IAAAA,OAAO,GAAGI,QAAQ,CAACF,eAAe,CAAC,CAAD,CAAhB,EAAqB,EAArB,CAAlB;AACAD,IAAAA,OAAO,GAAGG,QAAQ,CAACF,eAAe,CAAC,CAAD,CAAhB,EAAqB,EAArB,CAAlB;AACH;;AAED,UAAQX,SAAR;AACI,SAAK,MAAL;AACI,8BAAqBG,eAAe,CAACW,UAAhB,GAA6BL,OAA7B,GAAuCR,IAAI,CAACc,IAAjE;;AACJ,SAAK,OAAL;AACI,+BAAsBd,IAAI,CAACc,IAAL,GAAYd,IAAI,CAACe,KAAjB,GAAyBP,OAA/C;;AACJ,SAAK,IAAL;AACI,8BAAqBN,eAAe,CAACc,WAAhB,GAA8BP,OAA9B,GAAwCT,IAAI,CAACiB,GAAlE;;AACJ;AACI;AACA,+BAAsBjB,IAAI,CAACiB,GAAL,GAAWjB,IAAI,CAACkB,MAAhB,GAAyBT,OAA/C;AATR;AAWH;;AAED,SAASU,iBAAT,CAA2BpB,SAA3B,EAAgE7E,IAAhE;AACI,MAAI,CAACA,IAAL,EAAW;AACX,MAAMiF,SAAS,GAAGL,iBAAiB,CAACC,SAAD,EAAY7E,IAAZ,CAAnC;;AACA,MAAIiF,SAAJ,EAAe;AACXjF,IAAAA,IAAI,CAACiC,KAAL,CAAWiE,eAAX,GAA6BjB,SAA7B;AACAjF,IAAAA,IAAI,CAACiC,KAAL,CAAWgD,SAAX,GAAuBA,SAAvB;AACH;AACJ;;AAED,IAAMkB,KAAK,gBAAG1J,gBAAA,CAA2C,UAACwB,KAAD,EAAQ0D,GAAR;MAEjDV,WAUAhD,MAVAgD;yBAUAhD,MATA4G;MAAAA,0CAAY;MACRuB,SAQJnI;MAPAgE,QAOAhE,MAPAgE;uBAOAhE,MANAoB;MAAAA,sCAAU;MACVY,UAKAhC,MALAgC;MACAF,YAIA9B,MAJA8B;MACAM,SAGApC,MAHAoC;MACAD,WAEAnC,MAFAmC;MACGiG,sCACHpI;;AAEJ,MAAMmD,OAAO,GAAG3E,YAAA,CAAa,IAAb,CAAhB;AACA,MAAM6J,qBAAqB,GAAG1E,UAAU,CAAEX,QAAgB,CAACU,GAAnB,EAAwBP,OAAxB,CAAxC;AACA,MAAMmF,SAAS,GAAG3E,UAAU,CAAC0E,qBAAD,EAAwB3E,GAAxB,CAA5B;;AAEA,MAAM6E,WAAW,GAA+B,SAA1CA,WAA0C,CAACxG,IAAD,EAAOJ,WAAP;AAC5CqG,IAAAA,iBAAiB,CAACpB,SAAD,EAAY7E,IAAZ,CAAjB;AACA6C,IAAAA,MAAM,CAAC7C,IAAD,CAAN;;AAEA,QAAIC,OAAJ,EAAa;AACTA,MAAAA,OAAO,CAACD,IAAD,EAAOJ,WAAP,CAAP;AACH;AACJ,GAPD;;AASA,MAAM6G,cAAc,GAAG,SAAjBA,cAAiB,CAACzG,IAAD;AACnB,QAAMoC,MAAM,GAAG,CAAAH,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,wBAAP,KAAmCG,aAAa,CAACE,OAAhE;AACA,QAAMgE,eAAe,GAAG1E,kBAAkB,CAAC;AACvC3C,MAAAA,OAAO,EAAPA,OADuC;AAEvC6C,MAAAA,IAAI,EAAE,OAFiC;AAGvCD,MAAAA,KAAK,eAAOA,KAAP;AAAcI,QAAAA,wBAAwB,EAAED;AAAxC;AAHkC,KAAD,CAA1C;AAMApC,IAAAA,IAAI,CAACiC,KAAL,CAAW0E,gBAAX,GAA8BxD,gBAAgB,CAAC,mBAAD,EAAsBuD,eAAtB,CAA9C;AACA1G,IAAAA,IAAI,CAACiC,KAAL,CAAW2E,UAAX,GAAwBzD,gBAAgB,CAAC,WAAD,EAAcuD,eAAd,CAAxC;AAEA1G,IAAAA,IAAI,CAACiC,KAAL,CAAWiE,eAAX,GAA6B,MAA7B;AACAlG,IAAAA,IAAI,CAACiC,KAAL,CAAWgD,SAAX,GAAuB,MAAvB;AACH,GAbD;;AAeA,MAAM4B,UAAU,GAA8B,SAAxCA,UAAwC,CAAC7G,IAAD;AAC1C,QAAMoC,MAAM,GAAG,CAAAH,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,wBAAP,KAAmCG,aAAa,CAACI,KAAhE;AACA,QAAM8D,eAAe,GAAG1E,kBAAkB,CAAC;AACvC3C,MAAAA,OAAO,EAAPA,OADuC;AAEvC6C,MAAAA,IAAI,EAAE,MAFiC;AAGvCD,MAAAA,KAAK,eAAOA,KAAP;AAAcI,QAAAA,wBAAwB,EAAED;AAAxC;AAHkC,KAAD,CAA1C;AAMApC,IAAAA,IAAI,CAACiC,KAAL,CAAW0E,gBAAX,GAA8BxD,gBAAgB,CAAC,mBAAD,EAAsBuD,eAAtB,CAA9C;AACA1G,IAAAA,IAAI,CAACiC,KAAL,CAAW2E,UAAX,GAAwBzD,gBAAgB,CAAC,WAAD,EAAcuD,eAAd,CAAxC;AAEAT,IAAAA,iBAAiB,CAACpB,SAAD,EAAY7E,IAAZ,CAAjB;;AAEA,QAAIK,MAAJ,EAAY;AACRA,MAAAA,MAAM,CAACL,IAAD,CAAN;AACH;AACJ,GAhBD;;AAkBA,MAAM8G,YAAY,GAAgC,SAA5CA,YAA4C,CAAC9G,IAAD;AAC9C;AACAA,IAAAA,IAAI,CAACiC,KAAL,CAAW0E,gBAAX,GAA8B,EAA9B;AACA3G,IAAAA,IAAI,CAACiC,KAAL,CAAW2E,UAAX,GAAwB,EAAxB;;AAEA,QAAIxG,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACJ,IAAD,CAAR;AACH;AACJ,GARD;;AAUA,MAAM+G,cAAc,GAAGtK,iBAAA,CAAkB;AACrC,QAAI2E,OAAO,CAACC,OAAZ,EAAqB;AACjB4E,MAAAA,iBAAiB,CAACpB,SAAD,EAAYzD,OAAO,CAACC,OAApB,CAAjB;AACH;AACJ,GAJsB,EAIpB,CAACwD,SAAD,CAJoB,CAAvB;AAMApI,EAAAA,eAAA,CAAgB;AACZ;AACA,QAAI2J,MAAM,IAAIvB,SAAS,KAAK,MAAxB,IAAkCA,SAAS,KAAK,OAApD,EAA6D;AACzD,aAAOmC,SAAP;AACH;;AAED,QAAMC,YAAY,GAAG9C,QAAQ,CAAC;AAC1B,UAAI/C,OAAO,CAACC,OAAZ,EAAqB;AACjB4E,QAAAA,iBAAiB,CAACpB,SAAD,EAAYzD,OAAO,CAACC,OAApB,CAAjB;AACH;AACJ,KAJ4B,CAA7B;AAMA,QAAM2D,eAAe,GAAGjB,WAAW,CAAC3C,OAAO,CAACC,OAAT,CAAnC;AACA2D,IAAAA,eAAe,CAACkC,gBAAhB,CAAiC,QAAjC,EAA2CD,YAA3C;AACA,WAAO;AACHA,MAAAA,YAAY,CAACtC,KAAb;AACAK,MAAAA,eAAe,CAACmC,mBAAhB,CAAoC,QAApC,EAA8CF,YAA9C;AACH,KAHD;AAIH,GAlBD,EAkBG,CAACpC,SAAD,EAAYuB,MAAZ,CAlBH;AAoBA3J,EAAAA,eAAA,CAAgB;AACZ,QAAI,CAAC2J,MAAL,EAAa;AACT;AACA;AACAW,MAAAA,cAAc;AACjB;AACJ,GAND,EAMG,CAACX,MAAD,EAASW,cAAT,CANH;AAQA,SACItK,mBAAA,CAAC2K,UAAD;AACIlJ,IAAAA,MAAM;AACNkD,IAAAA,OAAO,EAAEA;AACTnB,IAAAA,OAAO,EAAEuG;AACTzG,IAAAA,SAAS,EAAEA;AACXG,IAAAA,UAAU,EAAEuG;AACZpG,IAAAA,MAAM,EAAEwG;AACRzG,IAAAA,QAAQ,EAAE0G;AACV,UAAIV;AACJ/G,IAAAA,OAAO,EAAEA;KACLgH,MAVR,EAYK,UAAC9H,KAAD,EAAQ4C,UAAR;AAAA,WACG1E,kBAAA,CAAmBwE,QAAnB;AACIU,MAAAA,GAAG,EAAE4E,SADT;AAEItE,MAAAA,KAAK;AACDoF,QAAAA,UAAU,EAAE9I,KAAK,KAAK,QAAV,IAAsB,CAAC6H,MAAvB,GAAgC,QAAhC,GAA2CY;AADtD,SAEE/E,KAFF,MAGGhB,QAAgB,CAAChD,KAAjB,CAAuBgE,KAH1B;AAFT,OAOOd,UAPP,EADH;AAAA,GAZL,CADJ;AA0BH,CAlIa,CAAd;AAoIAgF,KAAK,CAACmB,WAAN,GAAoB,OAApB;;AC9NA,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAACtJ,KAAD;AAAA,SACZxB,4BAAA,MAAA;AACI+K,IAAAA,OAAO,EAAC;AACRC,IAAAA,SAAS,EAAC;AACVxF,IAAAA,KAAK,EAAE;AACHyF,MAAAA,QAAQ,EAAE,EADP;AAEHC,MAAAA,eAAe,EAAE,CAFd;AAGHC,MAAAA,UAAU,EAAE,MAHT;AAIH/B,MAAAA,KAAK,EAAE,KAJJ;AAKHG,MAAAA,MAAM,EAAE,KALL;AAMH6B,MAAAA,OAAO,EAAE,cANN;AAOHC,MAAAA,IAAI,EAAE,cAPH;AAQHC,MAAAA,UAAU,EAAE;AART;KAUH9J,MAbR,CADY;AAAA,CAAhB;;AAkBA,IAAM+J,SAAS,GAAa,SAAtBA,SAAsB;AAAA,SACxBvL,4BAAA,CAAC8K,OAAD,MAAA,EACI9K,4BAAA,OAAA;AACIwL,IAAAA,CAAC,EAAC;GADN,CADJ,CADwB;AAAA,CAA5B;;AASA,IAAMC,WAAW,GAAa,SAAxBA,WAAwB;AAAA,SAC1BzL,4BAAA,CAAC8K,OAAD,MAAA,EACI9K,4BAAA,OAAA;AAAMwL,IAAAA,CAAC,EAAC;GAAR,CADJ,CAD0B;AAAA,CAA9B;;AAMA,IAAME,SAAS,GAAa,SAAtBA,SAAsB;AAAA,SACxB1L,4BAAA,CAAC8K,OAAD,MAAA,EACI9K,4BAAA,OAAA;AACIwL,IAAAA,CAAC,EAAC;GADN,CADJ,CADwB;AAAA,CAA5B;;AAUA,IAAMG,QAAQ,GAAa,SAArBA,QAAqB;AAAA,SACvB3L,4BAAA,CAAC8K,OAAD,MAAA,EACI9K,4BAAA,OAAA;AACIwL,IAAAA,CAAC,EAAC;GADN,CADJ,CADuB;AAAA,CAA3B;;AASA,IAAMI,mBAAmB,GAAoC;AACzD,aAASrB,SADgD;AAEzDsB,EAAAA,OAAO,eAAE7L,4BAAA,CAACuL,SAAD,MAAA,CAFgD;AAGzDO,EAAAA,OAAO,eAAE9L,4BAAA,CAACyL,WAAD,MAAA,CAHgD;AAIzDM,EAAAA,KAAK,eAAE/L,4BAAA,CAAC0L,SAAD,MAAA,CAJkD;AAKzDM,EAAAA,IAAI,eAAEhM,4BAAA,CAAC2L,QAAD,MAAA;AALmD,CAA7D;;AClDO,IAAMM,QAAQ,GAAG;AACpBC,EAAAA,QAAQ,EAAE,CADU;AAEpBC,EAAAA,OAAO,EAAE,KAFW;AAGpBC,EAAAA,eAAe,EAAE,KAHG;AAIpBC,EAAAA,yBAAyB,EAAE,KAJP;AAKpBC,EAAAA,OAAO,EAAE,SALW;AAMpBC,EAAAA,gBAAgB,EAAE,IANE;AAOpBC,EAAAA,WAAW,EAAEZ,mBAPO;AAQpBa,EAAAA,YAAY,EAAE;AAAE3L,IAAAA,QAAQ,EAAE,QAAZ;AAAsBC,IAAAA,UAAU,EAAE;AAAlC,GARM;AASpB4J,EAAAA,mBAAmB,EAAEjB,KATD;AAUpBgD,EAAAA,kBAAkB,EAAE;AAChB7J,IAAAA,KAAK,EAAE,GADS;AAEhBC,IAAAA,IAAI,EAAE;AAFU;AAVA,CAAjB;AAgBP;;;;;AAIA,IAAM6J,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,eAAD,EAAuBC,aAAvB;AACxB,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,SAAD;AAAA,WAA8B,OAAOA,SAAP,KAAqB,QAArB,IAAiCA,SAAS,KAAK,IAA7E;AAAA,GAAvB;;AAEA,MAAID,cAAc,CAACF,eAAD,CAAlB,EAAqC,OAAOA,eAAP;AACrC,MAAIE,cAAc,CAACD,aAAD,CAAlB,EAAmC,OAAOA,aAAP;AACnC,SAAOZ,QAAQ,CAACM,gBAAhB;AACH,CAND;AAQA;;;;;;AAIA,IAAMS,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACJ,eAAD,EAAuBC,aAAvB;AAC1B,MAAMI,EAAE,GAAG,SAALA,EAAK,CAACC,IAAD,EAAYC,KAAZ;AAAA,WAAgCA,KAAK,CAACC,IAAN,CAAW,UAACC,CAAD;AAAA,aAAO,OAAOH,IAAP,KAAgBG,CAAvB;AAAA,KAAX,CAAhC;AAAA,GAAX;;AAEA,MAAIJ,EAAE,CAACL,eAAD,EAAkB,CAAC,QAAD,EAAW,QAAX,CAAlB,CAAN,EAA+C;AAC3C,WAAOA,eAAP;AACH;;AAED,MAAIK,EAAE,CAACL,eAAD,EAAkB,CAAC,QAAD,CAAlB,CAAN,EAAqC;AACjC,wBACOX,QAAQ,CAACS,kBADhB,MAEQO,EAAE,CAACJ,aAAD,EAAgB,CAAC,QAAD,CAAhB,CAAF,IAAiCA,aAFzC,MAGOD,eAHP;AAKH;;AAED,MAAIK,EAAE,CAACJ,aAAD,EAAgB,CAAC,QAAD,EAAW,QAAX,CAAhB,CAAN,EAA6C;AACzC,WAAOA,aAAP;AACH;;AAED,MAAII,EAAE,CAACJ,aAAD,EAAgB,CAAC,QAAD,CAAhB,CAAN,EAAmC;AAC/B,wBACOZ,QAAQ,CAACS,kBADhB,MAEOG,aAFP;AAIH;;AAED,SAAOZ,QAAQ,CAACS,kBAAhB;AACH,CA3BD;;AA6BA,AAAO,IAAMY,KAAK,GACd,SADSA,KACT,CAAC3G,OAAD,EAAenF,KAAf;AAAA,SACA,UAAC+L,IAAD,EAA4BC,iBAA5B;QAA4BA;AAAAA,MAAAA,oBAAoB;;;AAC5C,QAAIA,iBAAJ,EAAuB;AACnB,0BACQvB,QAAgB,CAACsB,IAAD,CADxB,MAEO/L,KAAK,CAAC+L,IAAD,CAFZ,MAGO5G,OAAO,CAAC4G,IAAD,CAHd;AAKH;;AAED,QAAIA,IAAI,KAAK,kBAAb,EAAiC;AAC7B,aAAOZ,mBAAmB,CAAChG,OAAO,CAAC4F,gBAAT,EAA2B/K,KAAK,CAAC+K,gBAAjC,CAA1B;AACH;;AAED,QAAIgB,IAAI,KAAK,oBAAb,EAAmC;AAC/B,aAAOP,qBAAqB,CAACrG,OAAO,CAAC+F,kBAAT,EAA6BlL,KAAK,CAACkL,kBAAnC,CAA5B;AACH;;AAED,WAAO/F,OAAO,CAAC4G,IAAD,CAAP,IAAiB/L,KAAK,CAAC+L,IAAD,CAAtB,IAAiCtB,QAAgB,CAACsB,IAAD,CAAxD;AACH,GAnBD;AAAA,CADG;;SC7DSE,kBACZC;AAEA,SAAOC,MAAM,CAACC,OAAP,CAAeF,MAAf,EAAuBG,MAAvB,CACH,UAACC,GAAD;AAAA;;AAAA,QAAOC,GAAP;AAAA,QAAY9M,KAAZ;AAAA,wBACO6M,GADP,6BAEKC,GAFL,IAEWC,UAAG,CAAC/M,KAAD,CAFd;AAAA,GADG,EAKH,EALG,CAAP;AAOH;AAED,AAAO,IAAMgN,iBAAiB,gBAAGjO,cAAK,CAACC,aAAN,CAAgCwN,iBAAhC,CAA1B;AAEP,SAAgBS,UAAqDR;AACjE,MAAMS,UAAU,GAAGnO,cAAK,CAACoO,UAAN,CAAiBH,iBAAjB,CAAnB;AACA,SAAOjO,cAAK,CAACqO,OAAN,CAAc;AAAA,WAAMF,UAAU,CAACT,MAAD,CAAhB;AAAA,GAAd,EAAwC,CAACS,UAAD,EAAaT,MAAb,CAAxC,CAAP;AACH;AAED,AAAO,IAAMY,gBAAgB,GAAG;AAC5BC,EAAAA,iBAAiB,EAAE,6BADS;AAE5BC,EAAAA,QAAQ,EAAE,oBAFkB;AAG5BC,EAAAA,eAAe,EAAE,2BAHW;AAI5BC,EAAAA,UAAU,EAAE,sBAJgB;AAK5BC,EAAAA,iBAAiB,EAAE,2BAACrC,OAAD;AAAA,qCAA6CA,OAA7C;AAAA;AALS,CAAzB;;ACVP,IAAMoB,MAAM,GAAG;AACXkB,EAAAA,IAAI,EAAE;AACFrF,IAAAA,MAAM,EAAE;AADN,GADK;AAIXsF,EAAAA,OAAO,EAAE;AACLtF,IAAAA,MAAM,EAAE;AADH;AAJE,CAAf;AASA,IAAMuF,aAAa,GAAG,KAAtB;AACA,IAAMlM,OAAO,GAAG,GAAhB;AAQA,IAAMmM,QAAQ,gBAAG/O,gBAAA,CAAgD,UAACwB,KAAD,EAAQ0D,GAAR;AAC7D,MAAM8J,OAAO,GAAGd,SAAS,CAACR,MAAD,CAAzB;MACQlJ,WAAmChD,MAAnCgD;MAAcmF,SAAqBnI;MAAbmC,WAAanC,MAAbmC;AAE9B,MAAMsL,UAAU,GAAGjP,YAAA,CAA6B,IAA7B,CAAnB;AAEA,MAAM2E,OAAO,GAAG3E,YAAA,CAA6B,IAA7B,CAAhB;AACA,MAAM8J,SAAS,GAAG3E,UAAU,CAACD,GAAD,EAAMP,OAAN,CAA5B;;AAEA,MAAMuK,cAAc,GAAG,SAAjBA,cAAiB;AAAA,WAAOD,UAAU,CAACrK,OAAX,GAAqBqK,UAAU,CAACrK,OAAX,CAAmBuK,YAAxC,GAAuD,CAA9D;AAAA,GAAvB;;AAEA,MAAMpF,WAAW,GAA+B,SAA1CA,WAA0C,CAACxG,IAAD;AAC5CA,IAAAA,IAAI,CAACiC,KAAL,CAAW+D,MAAX,GAAoBuF,aAApB;AACH,GAFD;;AAIA,MAAM9E,cAAc,GAAG,SAAjBA,cAAiB,CAACzG,IAAD;AACnB,QAAM6L,WAAW,GAAGF,cAAc,EAAlC;;8BAEiD3J,kBAAkB,CAAC;AAChE3C,MAAAA,OAAO,EAAPA,OADgE;AAEhE6C,MAAAA,IAAI,EAAE;AAF0D,KAAD;QAAjDiH,yCAAVhH;QAA8BC,6BAAAA;;AAKtCpC,IAAAA,IAAI,CAACiC,KAAL,CAAWkH,kBAAX,GACI,OAAOA,kBAAP,KAA8B,QAA9B,GAAyCA,kBAAzC,GAAiEA,kBAAjE,OADJ;AAGAnJ,IAAAA,IAAI,CAACiC,KAAL,CAAW+D,MAAX,GAAuB6F,WAAvB;AACA7L,IAAAA,IAAI,CAACiC,KAAL,CAAWI,wBAAX,GAAsCD,MAAM,IAAI,EAAhD;AACH,GAbD;;AAeA,MAAM0J,aAAa,GAAiC,SAA9CA,aAA8C,CAAC9L,IAAD;AAChDA,IAAAA,IAAI,CAACiC,KAAL,CAAW+D,MAAX,GAAoB,MAApB;AACH,GAFD;;AAIA,MAAMa,UAAU,GAA8B,SAAxCA,UAAwC,CAAC7G,IAAD;AAC1CA,IAAAA,IAAI,CAACiC,KAAL,CAAW+D,MAAX,GAAuB2F,cAAc,EAArC;AACH,GAFD;;AAIA,MAAMI,aAAa,GAAG,SAAhBA,aAAgB,CAAC/L,IAAD;AAClB6C,IAAAA,MAAM,CAAC7C,IAAD,CAAN;;+BAEiDgC,kBAAkB,CAAC;AAChE3C,MAAAA,OAAO,EAAPA,OADgE;AAEhE6C,MAAAA,IAAI,EAAE;AAF0D,KAAD;QAAjDiH,0CAAVhH;QAA8BC,8BAAAA;;AAKtCpC,IAAAA,IAAI,CAACiC,KAAL,CAAWkH,kBAAX,GACI,OAAOA,kBAAP,KAA8B,QAA9B,GAAyCA,kBAAzC,GAAiEA,kBAAjE,OADJ;AAEAnJ,IAAAA,IAAI,CAACiC,KAAL,CAAW+D,MAAX,GAAoBuF,aAApB;AACAvL,IAAAA,IAAI,CAACiC,KAAL,CAAWI,wBAAX,GAAsCD,MAAM,IAAI,EAAhD;AACH,GAZD;;AAcA,SACI3F,mBAAA,CAAC2K,UAAD;AACI,UAAIhB;AACJ/H,IAAAA,aAAa;AACb4B,IAAAA,OAAO,EAAEuG;AACTzG,IAAAA,SAAS,EAAE+L;AACX5L,IAAAA,UAAU,EAAEuG;AACZpG,IAAAA,MAAM,EAAEwG;AACRzG,IAAAA,QAAQ,EAAEA;AACVE,IAAAA,SAAS,EAAEyL;AACX3K,IAAAA,OAAO,EAAEA;AACT/B,IAAAA,OAAO,EAAEA;GAVb,EAYK,UAACd,KAAD,EAAQ4C,UAAR;AAAA,WACG1E,mBAAA,MAAA;AACIkF,MAAAA,GAAG,EAAE4E;AACLyF,MAAAA,SAAS,EAAEC,IAAI,CAACR,OAAO,CAACJ,IAAT,EAAoC9M,KAAK,KAAK,SAA9C,IAAkBkN,OAAO,CAACH,OAA1B;AACfrJ,MAAAA,KAAK;AACDiK,QAAAA,aAAa,EAAE,KADd;AAEDC,QAAAA,QAAQ,EAAE,QAFT;AAGDC,QAAAA,SAAS,EAAEb,aAHV;AAID3E,QAAAA,UAAU,EAAEzD,gBAAgB,CAAC,QAAD;AAJ3B,SAKG5E,KAAK,KAAK,SAAV,IAAuB;AACvB4N,QAAAA,QAAQ,EAAE;AADa,OAL1B,MAQG5N,KAAK,KAAK,QAAV,IACA,CAAC6H,MADD,IACW;AACPiB,QAAAA,UAAU,EAAE;AADL,OATd;OAaDlG,WAhBR,EAkBI1E,mBAAA,MAAA;AACIkF,MAAAA,GAAG,EAAE+J;AACLM,MAAAA,SAAS,EAAEjB,gBAAgB,CAACG;AAC5B;AACAjJ,MAAAA,KAAK,EAAE;AAAE4F,QAAAA,OAAO,EAAE,MAAX;AAAmBhC,QAAAA,KAAK,EAAE;AAA1B;KAJX,EAMK5E,QANL,CAlBJ,CADH;AAAA,GAZL,CADJ;AA4CH,CAhGgB,CAAjB;AAkGAuK,QAAQ,CAAClE,WAAT,GAAuB,UAAvB;;ACtHA,IAAMzC,SAAS,GAA6C;AACxDwH,EAAAA,KAAK,EAAE,MADiD;AAExDzG,EAAAA,IAAI,EAAE,OAFkD;AAGxD0G,EAAAA,MAAM,EAAE,IAHgD;AAIxDvG,EAAAA,GAAG,EAAE;AAJmD,CAA5D;AAOA,AAAO,IAAMwG,iBAAiB,GAAG,SAApBA,iBAAoB,CAACrD,YAAD;AAC7B,MAAIA,YAAY,CAAC1L,UAAb,KAA4B,QAAhC,EAA0C;AACtC,WAAOqH,SAAS,CAACqE,YAAY,CAAC1L,UAAd,CAAhB;AACH;;AACD,SAAOqH,SAAS,CAACqE,YAAY,CAAC3L,QAAd,CAAhB;AACH,CALM;AAOP;;AACA,AAAO,IAAMiP,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACtD,YAAD;AAAA,0BACnB7L,kBAAkB,CAAC6L,YAAD,CADC;AAAA,CAA/B;AAGP;;;;AAGA,AAAO,IAAMuD,qBAAqB,GAAG,SAAxBA,qBAAwB,CACjChB,OADiC;MACjCA;AAAAA,IAAAA,UAA4C;;;AAE5C,MAAMiB,gBAAgB,GAAoC;AACtDC,IAAAA,aAAa,EAAE,IADuC;AAEtDC,IAAAA,8BAA8B,EAAE,IAFsB;AAGtDC,IAAAA,iCAAiC,EAAE,IAHmB;AAItDC,IAAAA,6BAA6B,EAAE,IAJuB;AAKtDC,IAAAA,gCAAgC,EAAE,IALoB;AAMtDC,IAAAA,4BAA4B,EAAE,IANwB;AAOtDC,IAAAA,+BAA+B,EAAE;AAPqB,GAA1D;AASA,SAAQ7C,MAAM,CAAC8C,IAAP,CAAYzB,OAAZ,EACH0B,MADG,CACI,UAAC3C,GAAD;AAAA,WAAS,CAACkC,gBAAgB,CAAClC,GAAD,CAA1B;AAAA,GADJ,EAEHF,MAFG,CAEI,UAAC8C,GAAD,EAAM5C,GAAN;AAAA;;AAAA,wBAAoB4C,GAApB,6BAA0B5C,GAA1B,IAAgCiB,OAAO,CAACjB,GAAD,CAAvC;AAAA,GAFJ,EAEqD,EAFrD,CAAR;AAGH,CAfM;;AC9BP,IAAMhO,MAAI,GAAG,SAAPA,IAAO;AACT;AACH,CAFD;AAIA;;;;;;;;;AAOA,SAAwB6Q,sBACpBC,OACAC;AAEA;AACA,SAAOD,KAAK,CAAChD,MAAN,CAAa,UAACC,GAAD,EAAMnG,IAAN;AAChB,QAAIA,IAAI,KAAK,IAAT,IAAiBA,IAAI,KAAK4C,SAA9B,EAAyC;AACrC,aAAOuD,GAAP;AACH;;AAED,WAAO,SAASiD,eAAT;wCAA4BjJ;AAAAA,QAAAA;;;AAC/B,UAAMkJ,MAAM,aAAOlJ,IAAP,CAAZ;;AACA,UAAIgJ,UAAU,IAAIE,MAAM,CAACC,OAAP,CAAeH,UAAf,MAA+B,CAAC,CAAlD,EAAqD;AACjDE,QAAAA,MAAM,CAACE,IAAP,CAAYJ,UAAZ;AACH;;;AAEDhD,MAAAA,GAAG,CAAC9F,KAAJ,CAAU,IAAV,EAAgBgJ,MAAhB;AACArJ,MAAAA,IAAI,CAACK,KAAL,CAAW,IAAX,EAAiBgJ,MAAjB;AACH,KARD;AASH,GAdM,EAcJjR,MAdI,CAAP;AAeH;;ACjCD;;;;AAIA,AAEA,IAAMoR,iBAAiB,GAAG,OAAO1J,MAAP,KAAkB,WAAlB,GAAgCzH,qBAAhC,GAAwDA,eAAlF;AAEA,SAAwBoR,iBACpBC;AAEA,MAAMnM,GAAG,GAAGlF,YAAA,CAAaqR,EAAb,CAAZ;AACAF,EAAAA,iBAAiB,CAAC;AACdjM,IAAAA,GAAG,CAACN,OAAJ,GAAcyM,EAAd;AACH,GAFgB,CAAjB;AAGA,SAAOrR,iBAAA,CACH;AAAA;AAEI,OAAC,AAAGkF,GAAG,CAACN,OAAR;AAFJ;AAAA,GADG,EAIH,EAJG,CAAP;AAMH;;ACrBD;;;AAGA,AAeA,IAAM4J,QAAQ,gBAAGxO,gBAAA,CAAgD,UAACwB,KAAD,EAAQ0D,GAAR;MAEzDV,WAQAhD,MARAgD;MACA+K,YAOA/N,MAPA+N;MACAhD,mBAMA/K,MANA+K;8BAMA/K,MALA6K;MAAAA,+DAA4B;MAC5BiF,UAIA9P,MAJA8P;MACAC,KAGA/P,MAHA+P;MACAC,OAEAhQ,MAFAgQ;6BAEAhQ,MADAiQ;MAAAA,kDAAgB;AAGpB,MAAMC,aAAa,GAAG1R,YAAA,EAAtB;AAEA,MAAM2R,WAAW,GAAGP,gBAAgB,CAAC;AACjC,QAAIE,OAAJ,EAAa;AACTA,MAAAA,OAAO,MAAP;AACH;AACJ,GAJmC,CAApC;AAMA,MAAMM,gBAAgB,GAAGR,gBAAgB,CAAC,UAACS,qBAAD;AACtC,QAAI,CAACP,OAAD,IAAYO,qBAAqB,IAAI,IAAzC,EAA+C;AAC3C;AACH;;AAED,QAAIH,aAAa,CAAC9M,OAAlB,EAA2B;AACvBqD,MAAAA,YAAY,CAACyJ,aAAa,CAAC9M,OAAf,CAAZ;AACH;;AACD8M,IAAAA,aAAa,CAAC9M,OAAd,GAAwBN,UAAU,CAAC;AAC/BqN,MAAAA,WAAW,CAAC,IAAD,EAAO,SAAP,EAAkBJ,EAAlB,CAAX;AACH,KAFiC,EAE/BM,qBAF+B,CAAlC;AAGH,GAXwC,CAAzC;AAaA7R,EAAAA,eAAA,CAAgB;AACZ,QAAIwR,IAAJ,EAAU;AACNI,MAAAA,gBAAgB,CAACrF,gBAAD,CAAhB;AACH;;AAED,WAAO;AACH,UAAImF,aAAa,CAAC9M,OAAlB,EAA2B;AACvBqD,QAAAA,YAAY,CAACyJ,aAAa,CAAC9M,OAAf,CAAZ;AACH;AACJ,KAJD;AAKH,GAVD,EAUG,CAAC4M,IAAD,EAAOjF,gBAAP,EAAyBqF,gBAAzB,CAVH;AAYA;;;;;AAIA,MAAME,WAAW,GAAG,SAAdA,WAAc;AAChB,QAAIJ,aAAa,CAAC9M,OAAlB,EAA2B;AACvBqD,MAAAA,YAAY,CAACyJ,aAAa,CAAC9M,OAAf,CAAZ;AACH;AACJ,GAJD;AAMA;;;;;;AAIA,MAAMmN,YAAY,GAAG/R,iBAAA,CAAkB;AACnC,QAAIuM,gBAAgB,IAAI,IAAxB,EAA8B;AAC1BqF,MAAAA,gBAAgB,CAACrF,gBAAgB,GAAG,GAApB,CAAhB;AACH;AACJ,GAJoB,EAIlB,CAACA,gBAAD,EAAmBqF,gBAAnB,CAJkB,CAArB;;AAMA,MAAMI,gBAAgB,GAA4C,SAA5DA,gBAA4D,CAACC,KAAD;AAC9D,QAAIR,aAAa,CAACS,YAAlB,EAAgC;AAC5BT,MAAAA,aAAa,CAACS,YAAd,CAA2BD,KAA3B;AACH;;AACDH,IAAAA,WAAW;AACd,GALD;;AAOA,MAAMK,gBAAgB,GAA4C,SAA5DA,gBAA4D,CAACF,KAAD;AAC9D,QAAIR,aAAa,CAACW,YAAlB,EAAgC;AAC5BX,MAAAA,aAAa,CAACW,YAAd,CAA2BH,KAA3B;AACH;;AACDF,IAAAA,YAAY;AACf,GALD;;AAOA/R,EAAAA,eAAA,CAAgB;AACZ,QAAI,CAACqM,yBAAD,IAA8BmF,IAAlC,EAAwC;AACpC/J,MAAAA,MAAM,CAACgD,gBAAP,CAAwB,OAAxB,EAAiCsH,YAAjC;AACAtK,MAAAA,MAAM,CAACgD,gBAAP,CAAwB,MAAxB,EAAgCqH,WAAhC;AAEA,aAAO;AACHrK,QAAAA,MAAM,CAACiD,mBAAP,CAA2B,OAA3B,EAAoCqH,YAApC;AACAtK,QAAAA,MAAM,CAACiD,mBAAP,CAA2B,MAA3B,EAAmCoH,WAAnC;AACH,OAHD;AAIH;;AAED,WAAOvH,SAAP;AACH,GAZD,EAYG,CAAC8B,yBAAD,EAA4B0F,YAA5B,EAA0CP,IAA1C,CAZH;AAcA,SACIxR,mBAAA,MAAA;AACIkF,IAAAA,GAAG,EAAEA;KACDuM;AACJlC,IAAAA,SAAS,EAAEC,IAAI,CAAClB,gBAAgB,CAACE,QAAlB,EAA4Be,SAA5B;AACf2C,IAAAA,YAAY,EAAEF;AACdI,IAAAA,YAAY,EAAED;IALlB,EAOK3N,QAPL,CADJ;AAWH,CAxGgB,CAAjB;AA0GAgK,QAAQ,CAAC3D,WAAT,GAAuB,UAAvB;;;ACtHA,IAAM6C,QAAM,GAAG;AACXkB,EAAAA,IAAI;AACAxD,IAAAA,OAAO,EAAE,MADT;AAEAiH,IAAAA,QAAQ,EAAE,MAFV;AAGAC,IAAAA,QAAQ,EAAE;AAHV,WAIClS,WAAW,CAACE,IAJb,IAIoB;AAChBgS,IAAAA,QAAQ,EAAE,SADM;AAEhBC,IAAAA,QAAQ,EAAE;AAFM,GAJpB;AADO,CAAf;AAYA,IAAMC,eAAe,gBAAGC,gBAAU,CAAuC,gBAA0BvN,GAA1B;MAAGqK,iBAAAA;MAAc/N;;AACtF,MAAMwN,OAAO,GAAGd,SAAS,CAACR,QAAD,CAAzB;AACA,SAAO1N,4BAAA,MAAA;AAAKkF,IAAAA,GAAG,EAAEA;AAAKqK,IAAAA,SAAS,EAAEC,IAAI,CAACR,OAAO,CAACJ,IAAT,EAAeW,SAAf;KAA+B/N,MAA7D,CAAP;AACH,CAHiC,CAAlC;AAKAgR,eAAe,CAAC3H,WAAhB,GAA8B,iBAA9B;;ACjBA,IAAM6C,QAAM,GAAG;AACXkB,EAAAA,IAAI,EAAE;AACF8D,IAAAA,eAAe,EAAE,SADf;AAEFzH,IAAAA,QAAQ,EAAE,UAFR;AAGF0H,IAAAA,UAAU,EAAE,IAHV;AAIFC,IAAAA,aAAa,EAAE,WAJb;AAKFC,IAAAA,KAAK,EAAE,MALL;AAMFC,IAAAA,UAAU,EAAE,QANV;AAOFC,IAAAA,OAAO,EAAE,UAPP;AAQFC,IAAAA,YAAY,EAAE,KARZ;AASFC,IAAAA,SAAS,EACL;AAVF,GADK;AAaXC,EAAAA,WAAW,EAAE;AACTC,IAAAA,WAAW,EAAK,IAAI,GAAT;AADF,GAbF;AAgBX,aAAS;AACLT,IAAAA,eAAe,EAAE;AADZ,GAhBE;AAmBX7G,EAAAA,OAAO,EAAE;AACL6G,IAAAA,eAAe,EAAE;AADZ,GAnBE;AAsBX3G,EAAAA,KAAK,EAAE;AACH2G,IAAAA,eAAe,EAAE;AADd,GAtBI;AAyBX5G,EAAAA,OAAO,EAAE;AACL4G,IAAAA,eAAe,EAAE;AADZ,GAzBE;AA4BX1G,EAAAA,IAAI,EAAE;AACF0G,IAAAA,eAAe,EAAE;AADf,GA5BK;AA+BXU,EAAAA,OAAO,EAAE;AACLhI,IAAAA,OAAO,EAAE,MADJ;AAEL0H,IAAAA,UAAU,EAAE,QAFP;AAGLC,IAAAA,OAAO,EAAE;AAHJ,GA/BE;AAoCXM,EAAAA,MAAM,EAAE;AACJjI,IAAAA,OAAO,EAAE,MADL;AAEJ0H,IAAAA,UAAU,EAAE,QAFR;AAGJQ,IAAAA,UAAU,EAAE,MAHR;AAIJH,IAAAA,WAAW,EAAE,MAJT;AAKJI,IAAAA,WAAW,EAAE;AALT;AApCG,CAAf;AA6CA,IAAMC,eAAe,GAAG,oBAAxB;AAEA,IAAMC,qBAAqB,gBAAGhB,gBAAU,CAAqC,UAACjR,KAAD,EAAQkS,YAAR;AACzE,MAAM1E,OAAO,GAAGd,SAAS,CAACR,QAAD,CAAzB;MAEI6D,KAQA/P,MARA+P;MACA6B,UAOA5R,MAPA4R;MACQO,4BAMRnS,MANA6R;MACA7G,cAKAhL,MALAgL;MACAF,UAIA9K,MAJA8K;MACAF,kBAGA5K,MAHA4K;MACA5G,QAEAhE,MAFAgE;MACA+J,YACA/N,MADA+N;AAGJ,MAAMqE,IAAI,GAAGpH,WAAW,CAACF,OAAD,CAAxB;AAEA,MAAI+G,MAAM,GAAGM,yBAAb;;AACA,MAAI,OAAON,MAAP,KAAkB,UAAtB,EAAkC;AAC9BA,IAAAA,MAAM,GAAGA,MAAM,CAAC9B,EAAD,CAAf;AACH;;AAED,SACIvR,4BAAA,CAACwS,eAAD;AACItN,IAAAA,GAAG,EAAEwO;AACLG,IAAAA,IAAI,EAAC;wBACaL;AAClBhO,IAAAA,KAAK,EAAEA;AACP+J,IAAAA,SAAS,EAAEC,IAAI,CACXlB,gBAAgB,CAACI,UADN,EAEXJ,gBAAgB,CAACK,iBAAjB,CAAmCrC,OAAnC,CAFW,EAGX0C,OAAO,CAACJ,IAHG,EAKXI,OAAO,CAAC1C,OAAD,CALI,EAMXiD,SANW,EAIc,CAACnD,eAJf,IAIkCwH,IAJlC,IAIR5E,OAAO,CAACkE,WAJA;GALnB,EAcIlT,4BAAA,MAAA;AAAKuR,IAAAA,EAAE,EAAEiC;AAAiBjE,IAAAA,SAAS,EAAEP,OAAO,CAACoE;GAA7C,EACK,CAAChH,eAAD,GAAmBwH,IAAnB,GAA0B,IAD/B,EAEKR,OAFL,CAdJ,EAkBKC,MAAM,IAAIrT,4BAAA,MAAA;AAAKuP,IAAAA,SAAS,EAAEP,OAAO,CAACqE;GAAxB,EAAiCA,MAAjC,CAlBf,CADJ;AAsBH,CA1CuC,CAAxC;AA4CAI,qBAAqB,CAAC5I,WAAtB,GAAoC,uBAApC;AAEA,2CAAeiJ,UAAI,CAACL,qBAAD,CAAnB;;ACnFA,IAAMM,UAAU,GAAG;AACfC,EAAAA,WAAW,EAAE;AACT5K,IAAAA,KAAK,EAAE,MADE;AAET6K,IAAAA,QAAQ,EAAE,UAFD;AAGTzL,IAAAA,SAAS,EAAE,eAHF;AAITc,IAAAA,GAAG,EAAE,CAJI;AAKTsG,IAAAA,KAAK,EAAE,CALE;AAMTC,IAAAA,MAAM,EAAE,CANC;AAOT1G,IAAAA,IAAI,EAAE,CAPG;AAQToJ,IAAAA,QAAQ,EAAE;AARD;AADE,CAAnB;;AAqBA,IAAM2B,YAAY,GAAgC,SAA5CA,YAA4C,CAAC1S,KAAD;AAC9C,MAAMkM,MAAM,GAAGQ,SAAS,CAAC6F,UAAD,CAAxB;AACA,MAAMnR,OAAO,GAAGuR,YAAM,EAAtB;;kBACkCC,cAAQ,CAAC,IAAD;MAAnCC;MAAWC;;AAElB,MAAM3C,WAAW,GAAwCf,qBAAqB,CAAC,CAC3EpP,KAAK,CAAC+S,KAAN,CAAYjD,OAD+D,EAE3E9P,KAAK,CAAC8P,OAFqE,CAAD,CAA9E;;AAKA,MAAMjC,aAAa,GAAwC,SAArDA,aAAqD;AACvD,QAAI7N,KAAK,CAAC+S,KAAN,CAAYC,YAAhB,EAA8B;AAC1B7C,MAAAA,WAAW,CAAC,IAAD,EAAO,YAAP,EAAqBnQ,KAAK,CAAC+S,KAAN,CAAYhD,EAAjC,CAAX;AACH;AACJ,GAJD;;AAMA,MAAMkD,kBAAkB,GAAGC,iBAAW,CAAC;AACnC9R,IAAAA,OAAO,CAACgC,OAAR,GAAkBN,UAAU,CAAC;AACzBgQ,MAAAA,YAAY,CAAC,UAACK,GAAD;AAAA,eAAS,CAACA,GAAV;AAAA,OAAD,CAAZ;AACH,KAF2B,EAEzB,GAFyB,CAA5B;AAGH,GAJqC,EAInC,EAJmC,CAAtC;AAMAC,EAAAA,eAAS,CACL;AAAA,WAAM;AACF,UAAIhS,OAAO,CAACgC,OAAZ,EAAqB;AACjBqD,QAAAA,YAAY,CAACrF,OAAO,CAACgC,OAAT,CAAZ;AACH;AACJ,KAJD;AAAA,GADK,EAML,EANK,CAAT;MASQ2P,QAAkE/S,MAAlE+S;MAAgBM,aAAkDrT,MAA3DwN;yBAA2DxN,MAAtCsD;MAAAA,0CAAY2O;AAEhD,MAAMzE,OAAO,GAAGX,aAAO,CAAC;AAAA,WAAM2B,qBAAqB,CAAC6E,UAAD,CAA3B;AAAA,GAAD,EAA0C,CAACA,UAAD,CAA1C,CAAvB;;MAGIrD,OAcA+C,MAdA/C;MACAC,gBAaA8C,MAbA9C;MACA9G,sBAYA4J,MAZA5J;MACAmK,kBAWAP,MAXAO;MACApI,qBAUA6H,MAVA7H;MACAL,4BASAkI,MATAlI;MACS0I,6BAQTR,MARAS;MACSC,AAMNC,2CACHX;;AAEJ,MAAMtK,eAAe;AACjB7B,IAAAA,SAAS,EAAE0H,iBAAiB,CAACoF,UAAU,CAACzI,YAAZ,CADX;AAEjB7J,IAAAA,OAAO,EAAE8J;AAFQ,KAGdoI,eAHc,CAArB;;AAMA,MAAIE,OAAO,GAAGD,0BAAd;;AACA,MAAI,OAAOC,OAAP,KAAmB,UAAvB,EAAmC;AAC/BA,IAAAA,OAAO,GAAGA,OAAO,CAACE,UAAU,CAAC3D,EAAZ,EAAgB2D,UAAU,CAAC9B,OAA3B,CAAjB;AACH;;AAED,MAAM+B,SAAS,GACX,CAAC,SAAD,EAAY,WAAZ,EAAyB,QAAzB,EAAmC,UAAnC,EACFtH,MADE,CAEA,UAACC,GAAD,EAAMsH,MAAN;AAAA;;AAAA,wBACOtH,GADP,6BAEKsH,MAFL,IAEcxE,qBAAqB,CAAC,CAACpP,KAAK,CAAC+S,KAAN,CAAYa,MAAZ,CAAD,EAA6B5T,KAAK,CAAC4T,MAAD,CAAlC,CAAD,EAAqDF,UAAU,CAAC3D,EAAhE,CAFnC;AAAA,GAFA,EAMA,EANA,CADJ;AAUA,SACIvR,4BAAA,CAAC+O,QAAD;AAAU,UAAIsF;AAAW1Q,IAAAA,QAAQ,EAAEwR,SAAS,CAACxR;GAA7C,EACI3D,4BAAA,CAACwO,QAAD;AACIgD,IAAAA,IAAI,EAAEA;AACND,IAAAA,EAAE,EAAE2D,UAAU,CAAC3D;AACflF,IAAAA,yBAAyB,EAAEA;AAC3BE,IAAAA,gBAAgB,EAAE2I,UAAU,CAAC3I;AAC7BgD,IAAAA,SAAS,EAAEC,IAAI,CACX9B,MAAM,CAACsG,WADI,EAEXhF,OAAO,CAACJ,IAFG,EAGXI,OAAO,CAACe,sBAAsB,CAACmF,UAAU,CAACzI,YAAZ,CAAvB,CAHI;AAKfgF,IAAAA,aAAa,EAAEA;AACfH,IAAAA,OAAO,EAAEK;GAXb,EAaI3R,4BAAA,CAAC2K,mBAAD,oBACQV;AACJxI,IAAAA,MAAM;AACN,UAAI+P;AACJ5N,IAAAA,MAAM,EAAEuR,SAAS,CAACvR;AAClBD,IAAAA,QAAQ,EAAE8Q;AACVjR,IAAAA,OAAO,EAAE2R,SAAS,CAAC3R;AACnB;AACA;AACAF,IAAAA,SAAS,EAAEsN,qBAAqB,CAAC,CAACuE,SAAS,CAAC7R,SAAX,EAAsB+L,aAAtB,CAAD,EAAuC6F,UAAU,CAAC3D,EAAlD;IATpC,EAWMyD,OAA8B,IAAIhV,4BAAA,CAAC8E,SAAD,oBAAeoQ,WAAf,CAXxC,CAbJ,CADJ,CADJ;AA+BH,CAxGD;;;AC9BA,IAAMG,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE;AAAE,eAAS,EAAX;AAAeC,IAAAA,KAAK,EAAE;AAAtB,GADM;AAEZC,EAAAA,QAAQ,EAAE;AAAE,eAAS,CAAX;AAAcD,IAAAA,KAAK,EAAE;AAArB;AAFE,CAAhB;AAKA,IAAME,eAAe,SAAOnH,gBAAgB,CAACG,eAA7C;AAEA,IAAMiH,aAAa,GAAG,EAAtB;AAEA,IAAM3B,YAAU,GAAG;AACfnF,EAAAA,IAAI;AACA+G,IAAAA,SAAS,EAAE,YADX;AAEAvK,IAAAA,OAAO,EAAE,MAFT;AAGAwK,IAAAA,SAAS,EAAE,MAHX;AAIA3B,IAAAA,QAAQ,EAAE,OAJV;AAKA4B,IAAAA,MAAM,EAAE,IALR;AAMAtM,IAAAA,MAAM,EAAE,MANR;AAOAH,IAAAA,KAAK,EAAE,MAPP;AAQAe,IAAAA,UAAU,eAAEzD,gBAAgB,CAAC,CAAC,KAAD,EAAQ,OAAR,EAAiB,QAAjB,EAA2B,MAA3B,EAAmC,WAAnC,CAAD,EAAkD;AAC1EhB,MAAAA,QAAQ,EAAE,GADgE;AAE1EC,MAAAA,MAAM,EAAE;AAFkE,KAAlD,CAR5B;AAYA;AACA;AACA8J,IAAAA,aAAa,EAAE;AAdf,aAeCgG,eAfD,IAemB;AACf1C,IAAAA,OAAO,EAAKsC,OAAO,CAACG,QAAR,WAAL,WADQ;AAEfrL,IAAAA,UAAU,EAAE;AAFG,GAfnB,UAmBA2L,QAnBA,oBAmByBT,OAAO,CAACC,IAAR,cAAuB,CAnBhD,kBAoBClV,WAAW,CAACC,MApBb,IAoBsB;AAClB+I,IAAAA,KAAK,EAAE,MADW;AAElB0M,IAAAA,QAAQ,mBAAiBJ,aAAa,GAAG,CAAjC;AAFU,GApBtB,UADW;AA0BfK,EAAAA,SAAS,+BACJN,eADI,IACc;AACf1C,IAAAA,OAAO,EAAKsC,OAAO,CAACG,QAAR,CAAiBD,KAAtB;AADQ,GADd,aA1BM;AA+BfjM,EAAAA,GAAG,EAAE;AACDA,IAAAA,GAAG,EAAK+L,OAAO,CAACC,IAAR,cAAuBD,OAAO,CAACG,QAAR,WAA5B,OADF;AAEDQ,IAAAA,aAAa,EAAE;AAFd,GA/BU;AAmCfnG,EAAAA,MAAM,EAAE;AACJA,IAAAA,MAAM,EAAKwF,OAAO,CAACC,IAAR,cAAuBD,OAAO,CAACG,QAAR,WAA5B,OADF;AAEJQ,IAAAA,aAAa,EAAE;AAFX,GAnCO;AAuCf7M,EAAAA,IAAI;AACAA,IAAAA,IAAI,EAAKkM,OAAO,CAACC,IAAR,WAAL;AADJ,WAEClV,WAAW,CAACE,IAFb,IAEoB;AAChBwS,IAAAA,UAAU,EAAE;AADI,GAFpB,QAKC1S,WAAW,CAACC,MALb,IAKsB;AAClB8I,IAAAA,IAAI,EAAKuM,aAAL;AADc,GALtB,QAvCW;AAgDf9F,EAAAA,KAAK;AACDA,IAAAA,KAAK,EAAKyF,OAAO,CAACC,IAAR,WAAL;AADJ,YAEAlV,WAAW,CAACE,IAFZ,IAEmB;AAChBwS,IAAAA,UAAU,EAAE;AADI,GAFnB,SAKA1S,WAAW,CAACC,MALZ,IAKqB;AAClBuP,IAAAA,KAAK,EAAK8F,aAAL;AADa,GALrB,SAhDU;AAyDfO,EAAAA,MAAM;AACF9M,IAAAA,IAAI,EAAE,KADJ;AAEFX,IAAAA,SAAS,EAAE;AAFT,aAGDpI,WAAW,CAACE,IAHX,IAGkB;AAChBwS,IAAAA,UAAU,EAAE;AADI,GAHlB;AAzDS,CAAnB;;AAyEA,IAAMvE,iBAAiB,GAAqC,SAAtDA,iBAAsD,CAAC/M,KAAD;AACxD,MAAMkM,MAAM,GAAGQ,SAAS,CAAC6F,YAAD,CAAxB;uBACwDvS,MAAhDwN;MAAAA,sCAAU;MAAIvC,eAAkCjL,MAAlCiL;MAAc8I,QAAoB/T,MAApB+T;MAAO/Q,WAAahD,MAAbgD;AAE3C,MAAM0R,iBAAiB,GAAG1G,IAAI,CAC1BlB,gBAAgB,CAACC,iBADS,EAE1Bb,MAAM,CAACjB,YAAY,CAAC3L,QAAd,CAFoB,EAG1B4M,MAAM,CAACjB,YAAY,CAAC1L,UAAd,CAHoB,EAK1B2M,MAAM,CAACkB,IALmB;AAM1BI,EAAAA,OAAO,CAACkB,aANkB,EAO1BlB,OAAO,2BAAyBpO,kBAAkB,CAAC6L,YAAD,CAA3C,CAPmB,EAIJ8I,KAJI,IAIvB7H,MAAM,CAACqI,SAJgB,CAA9B;AAUA,SAAO/V,4BAAA,MAAA;AAAKuP,IAAAA,SAAS,EAAE2G;GAAhB,EAAoC1R,QAApC,CAAP;AACH,CAfD;;AAiBA,uCAAesP,UAAI,CAACvF,iBAAD,CAAnB;;AC1GA;AACA;AAEA,IAAM4H,QAAQ,GAAG;AACbC,EAAAA,cAAc,EACV;AAFS,CAAjB;AAKA,eAAe,UAACC,UAAD;AACX,AAEA,MAAMjD,OAAO,GAAG+C,QAAQ,CAACE,UAAD,CAAxB;;AACA,MAAI,OAAOC,OAAP,KAAmB,WAAvB,EAAoC;AAChCA,IAAAA,OAAO,CAACvK,KAAR,2BAAsCqH,OAAtC;AACH;;AACD,MAAI;AACA,UAAM,IAAIvO,KAAJ,CAAUuO,OAAV,CAAN;AACH,GAFD,CAEE,OAAOmD,CAAP,EAAU;AACf,CAVD;;ACcA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CACdC,gBADc;AAGd,MAAMC,SAAS,GAAG,OAAOD,gBAAP,KAA4B,QAA5B,IAAwCE,oBAAc,CAACF,gBAAD,CAAxE;AACA,SAAO,CAACC,SAAR;AACH,CALD;;IAmBME;;;AACF,4BAAYpV,KAAZ;;;AACI,kCAAMA,KAAN;AAkBJ;;;;;AAIA,yBAAA,GAAkB,UACdiV,gBADc,EAEdI,eAFc;UAEdA;AAAAA,QAAAA,kBAAiC;;;AAEjC,UAAIJ,gBAAgB,KAAKlM,SAArB,IAAkCkM,gBAAgB,KAAK,IAA3D,EAAiE;AAC7D,cAAM,IAAI5R,KAAJ,CAAU,8CAAV,CAAN;AACH;;AAED,UAAMiS,IAAI,GAAGN,SAAS,CAACC,gBAAD,CAAT,GAA8BA,gBAA9B,GAAiDI,eAA9D;AAEA,UAAMzD,OAAO,GAAgCoD,SAAS,CAACC,gBAAD,CAAT,GACvCA,gBAAgB,CAACrD,OADsB,GAEvCqD,gBAFN;;UAIQ1I,MAAsC+I,KAAtC/I;UAAKgJ,mBAAiCD,KAAjCC;UAAqBpQ,wCAAYmQ;;AAE9C,UAAME,eAAe,GAAGhW,SAAS,CAAC+M,GAAD,CAAjC;AACA,UAAMwD,EAAE,GAAGyF,eAAe,GAAIjJ,GAAJ,GAA0B,IAAIkJ,IAAJ,GAAWC,OAAX,KAAuB1Q,IAAI,CAAC2Q,MAAL,EAA3E;AAEA,UAAMC,MAAM,GAAG9J,KAAK,CAAC3G,OAAD,EAAU,MAAKnF,KAAf,CAApB;;AACA,UAAM+S,KAAK;AACPhD,QAAAA,EAAE,EAAFA;AADO,SAEJ5K,OAFI;AAGPyM,QAAAA,OAAO,EAAPA,OAHO;AAIP5B,QAAAA,IAAI,EAAE,IAJC;AAKP3C,QAAAA,OAAO,EAAE,KALF;AAMP2F,QAAAA,YAAY,EAAE,KANP;AAOPrI,QAAAA,OAAO,EAAEiL,MAAM,CAAC,SAAD,CAPR;AAQP/D,QAAAA,MAAM,EAAE+D,MAAM,CAAC,QAAD,CARP;AASPpC,QAAAA,OAAO,EAAEoC,MAAM,CAAC,SAAD,CATR;AAUP9K,QAAAA,OAAO,EAAE8K,MAAM,CAAC,SAAD,CAVR;AAWP3K,QAAAA,YAAY,EAAE2K,MAAM,CAAC,cAAD,CAXb;AAYP/K,QAAAA,yBAAyB,EAAE+K,MAAM,CAAC,2BAAD,CAZ1B;AAaP7K,QAAAA,gBAAgB,EAAE6K,MAAM,CAAC,kBAAD,CAbjB;AAcPhL,QAAAA,eAAe,EAAEgL,MAAM,CAAC,iBAAD,CAdhB;AAePzM,QAAAA,mBAAmB,EAAEyM,MAAM,CAAC,qBAAD,CAfpB;AAgBP1K,QAAAA,kBAAkB,EAAE0K,MAAM,CAAC,oBAAD,CAhBnB;AAiBPtC,QAAAA,eAAe,EAAEsC,MAAM,CAAC,iBAAD,EAAoB,IAApB,CAjBhB;AAkBP5K,QAAAA,WAAW,EAAE4K,MAAM,CAAC,aAAD,EAAgB,IAAhB,CAlBZ;AAmBP5R,QAAAA,KAAK,EAAE4R,MAAM,CAAC,OAAD,EAAU,IAAV,CAnBN;AAoBP3F,QAAAA,aAAa,EAAE2F,MAAM,CAAC,eAAD,EAAkB,IAAlB,CApBd;AAqBP7H,QAAAA,SAAS,EAAEC,IAAI,CAAC,MAAKhO,KAAL,CAAW+N,SAAZ,EAAuB5I,OAAO,CAAC4I,SAA/B;AArBR,QAAX;;AAwBA,UAAIgF,KAAK,CAACpI,OAAV,EAAmB;AACfoI,QAAAA,KAAK,CAAChI,gBAAN,GAAyBhC,SAAzB;AACH;;AAED,YAAKrH,QAAL,CAAc,UAACpB,KAAD;AACV,YAAKiV,gBAAgB,KAAKxM,SAArB,IAAkC,MAAK/I,KAAL,CAAWuV,gBAA9C,IAAmEA,gBAAvE,EAAyF;AACrF,cAAMM,eAAe,GAAG,SAAlBA,eAAkB,CAACnK,IAAD;AAAA,mBACpB8J,eAAe,GAAG9J,IAAI,CAACqE,EAAL,KAAYA,EAAf,GAAoBrE,IAAI,CAACkG,OAAL,KAAiBA,OADhC;AAAA,WAAxB;;AAGA,cAAMkE,OAAO,GAAGxV,KAAK,CAACyV,KAAN,CAAYC,SAAZ,CAAsBH,eAAtB,IAAyC,CAAC,CAA1D;AACA,cAAMI,MAAM,GAAG3V,KAAK,CAAC4V,MAAN,CAAaF,SAAb,CAAuBH,eAAvB,IAA0C,CAAC,CAA1D;;AACA,cAAIC,OAAO,IAAIG,MAAf,EAAuB;AACnB,mBAAO3V,KAAP;AACH;AACJ;;AAED,eAAO,MAAK6V,kBAAL,cACA7V,KADA;AAEHyV,UAAAA,KAAK,YAAMzV,KAAK,CAACyV,KAAZ,GAAmBhD,KAAnB;AAFF,WAAP;AAIH,OAhBD;;AAkBA,aAAOhD,EAAP;AACH,KAnED;AAqEA;;;;;;AAIA,4BAAA,GAA8B,UAACzP,KAAD;UAClB4V,SAAW5V,MAAX4V;;AACR,UAAIA,MAAM,CAACE,MAAP,IAAiB,MAAK1L,QAA1B,EAAoC;AAChC,eAAO,MAAK2L,mBAAL,CAAyB/V,KAAzB,CAAP;AACH;;AACD,aAAO,MAAKgW,YAAL,CAAkBhW,KAAlB,CAAP;AACH,KAND;AAQA;;;;;AAGA,sBAAA,GAAwB,UAACA,KAAD;UACZyV,QAAkBzV,MAAlByV;UAAOG,SAAW5V,MAAX4V;;AACf,UAAIH,KAAK,CAACK,MAAN,GAAe,CAAnB,EAAsB;AAClB,4BACO9V,KADP;AAEI4V,UAAAA,MAAM,YAAMA,MAAN,GAAcH,KAAK,CAAC,CAAD,CAAnB,EAFV;AAGIA,UAAAA,KAAK,EAAEA,KAAK,CAAC5W,KAAN,CAAY,CAAZ,EAAe4W,KAAK,CAACK,MAArB;AAHX;AAKH;;AACD,aAAO9V,KAAP;AACH,KAVD;AAYA;;;;;;;;;;AAQA,6BAAA,GAA+B,UAACA,KAAD;AAC3B,UAAIA,KAAK,CAAC4V,MAAN,CAAatK,IAAb,CAAkB,UAACF,IAAD;AAAA,eAAU,CAACA,IAAI,CAACsE,IAAN,IAActE,IAAI,CAACsH,YAA7B;AAAA,OAAlB,CAAJ,EAAkE;AAC9D,eAAO1S,KAAP;AACH;;AAED,UAAIiW,MAAM,GAAG,KAAb;AACA,UAAIC,MAAM,GAAG,KAAb;AAEA,UAAMC,eAAe,GAAGnW,KAAK,CAAC4V,MAAN,CAAa7J,MAAb,CACpB,UAACC,GAAD,EAAMlJ,OAAN;AAAA,eAAkBkJ,GAAG,IAAIlJ,OAAO,CAAC4M,IAAR,IAAgB5M,OAAO,CAACuH,OAAxB,GAAkC,CAAlC,GAAsC,CAA1C,CAArB;AAAA,OADoB,EAEpB,CAFoB,CAAxB;;AAKA,UAAI8L,eAAe,KAAK,MAAK/L,QAA7B,EAAuC;AACnC,SAAAJ,OAAO,CAAC,gBAAD,CAAP;AACAkM,QAAAA,MAAM,GAAG,IAAT;AACH;;AAED,UAAMN,MAAM,GAAG5V,KAAK,CAAC4V,MAAN,CAAa3Q,GAAb,CAAiB,UAACmG,IAAD;AAC5B,YAAI,CAAC6K,MAAD,KAAY,CAAC7K,IAAI,CAACf,OAAN,IAAiB6L,MAA7B,CAAJ,EAA0C;AACtCD,UAAAA,MAAM,GAAG,IAAT;;AAEA,cAAI,CAAC7K,IAAI,CAAC2B,OAAV,EAAmB;AACf,gCACO3B,IADP;AAEIsH,cAAAA,YAAY,EAAE;AAFlB;AAIH;;AAED,cAAItH,IAAI,CAACoE,OAAT,EAAkB;AACdpE,YAAAA,IAAI,CAACoE,OAAL,CAAa,IAAb,EAAmB,UAAnB,EAA+BpE,IAAI,CAACqE,EAApC;AACH;;AAED,cAAI,MAAK/P,KAAL,CAAW8P,OAAf,EAAwB;AACpB,kBAAK9P,KAAL,CAAW8P,OAAX,CAAmB,IAAnB,EAAyB,UAAzB,EAAqCpE,IAAI,CAACqE,EAA1C;AACH;;AAED,8BACOrE,IADP;AAEIsE,YAAAA,IAAI,EAAE;AAFV;AAIH;;AAED,4BAAYtE,IAAZ;AACH,OA1Bc,CAAf;AA4BA,0BAAYpL,KAAZ;AAAmB4V,QAAAA,MAAM,EAANA;AAAnB;AACH,KA/CD;AAiDA;;;;;AAGA,4BAAA,GAA0D,UAACnU,IAAD,EAAOJ,WAAP,EAAoB4K,GAApB;AACtD,UAAI,CAAC/M,SAAS,CAAC+M,GAAD,CAAd,EAAqB;AACjB,cAAM,IAAIlJ,KAAJ,CAAU,wDAAV,CAAN;AACH;;AAED,YAAK3B,QAAL,CAAc;AAAA,YAAGwU,MAAH,QAAGA,MAAH;AAAA,eAAiB;AAC3BA,UAAAA,MAAM,EAAEA,MAAM,CAAC3Q,GAAP,CAAW,UAACmG,IAAD;AAAA,mBAAWA,IAAI,CAACqE,EAAL,KAAYxD,GAAZ,gBAAuBb,IAAvB;AAA6B2B,cAAAA,OAAO,EAAE;AAAtC,8BAAoD3B,IAApD,CAAX;AAAA,WAAX;AADmB,SAAjB;AAAA,OAAd;AAGH,KARD;AAUA;;;;;AAGA,0BAAA,GAAwD,UAAC+E,KAAD,EAAQiG,MAAR,EAAgBnK,GAAhB;AACpD;AACA;AACA,UAAI,MAAKvM,KAAL,CAAW8P,OAAf,EAAwB;AACpB,cAAK9P,KAAL,CAAW8P,OAAX,CAAmBW,KAAnB,EAA0BiG,MAA1B,EAAkCnK,GAAlC;AACH;;AAED,UAAMoK,cAAc,GAAGpK,GAAG,KAAKxD,SAA/B;;AAEA,YAAKrH,QAAL,CAAc;AAAA,YAAGwU,MAAH,SAAGA,MAAH;AAAA,YAAWH,KAAX,SAAWA,KAAX;AAAA,eAAwB;AAClCG,UAAAA,MAAM,EAAEA,MAAM,CAAC3Q,GAAP,CAAW,UAACmG,IAAD;AACf,gBAAI,CAACiL,cAAD,IAAmBjL,IAAI,CAACqE,EAAL,KAAYxD,GAAnC,EAAwC;AACpC,kCAAYb,IAAZ;AACH;;AAED,mBAAOA,IAAI,CAAC2B,OAAL,gBAAoB3B,IAApB;AAA0BsE,cAAAA,IAAI,EAAE;AAAhC,8BAA+CtE,IAA/C;AAAqDsH,cAAAA,YAAY,EAAE;AAAnE,cAAP;AACH,WANO,CAD0B;AAQlC+C,UAAAA,KAAK,EAAEA,KAAK,CAAC7G,MAAN,CAAa,UAACxD,IAAD;AAAA,mBAAUA,IAAI,CAACqE,EAAL,KAAYxD,GAAtB;AAAA,WAAb;AAR2B,SAAxB;AAAA,OAAd;AAUH,KAnBD;AAqBA;;;;;AAGA,uBAAA,GAAkD,UAACA,GAAD;AAC9C;AACA,UAAMqK,UAAU,GAAG,MAAKtW,KAAL,CAAW4V,MAAX,CAAkBW,IAAlB,CAAuB,UAACnL,IAAD;AAAA,eAAUA,IAAI,CAACqE,EAAL,KAAYxD,GAAtB;AAAA,OAAvB,CAAnB;;AACA,UAAI/M,SAAS,CAAC+M,GAAD,CAAT,IAAkBqK,UAAlB,IAAgCA,UAAU,CAAC9G,OAA/C,EAAwD;AACpD8G,QAAAA,UAAU,CAAC9G,OAAX,CAAmB,IAAnB,EAAyB,YAAzB,EAAuCvD,GAAvC;AACH;;AAED,YAAKuK,gBAAL,CAAsB,IAAtB,EAA4B,YAA5B,EAA0CvK,GAA1C;AACH,KARD;AAUA;;;;;;;;;AAOA,2BAAA,GAAwD,UAACxK,IAAD,EAAOwK,GAAP;AACpD,UAAI,CAAC/M,SAAS,CAAC+M,GAAD,CAAd,EAAqB;AACjB,cAAM,IAAIlJ,KAAJ,CAAU,uDAAV,CAAN;AACH;;AAED,YAAK3B,QAAL,CAAc,UAACpB,KAAD;AACV,YAAMyW,QAAQ,GAAG,MAAKT,YAAL,cACVhW,KADU;AAEb4V,UAAAA,MAAM,EAAE5V,KAAK,CAAC4V,MAAN,CAAahH,MAAb,CAAoB,UAACxD,IAAD;AAAA,mBAAUA,IAAI,CAACqE,EAAL,KAAYxD,GAAtB;AAAA,WAApB;AAFK,WAAjB;;AAKA,YAAIwK,QAAQ,CAAChB,KAAT,CAAeK,MAAf,KAA0B,CAA9B,EAAiC;AAC7B,iBAAOW,QAAP;AACH;;AAED,eAAO,MAAKV,mBAAL,CAAyBU,QAAzB,CAAP;AACH,OAXD;AAYH,KAjBD;;AAvOIrY,IAAAA,uBAAe,GAAG,MAAKA,eAAvB;AACAC,IAAAA,qBAAa,GAAG,MAAKA,aAArB;AAEA,UAAK2B,KAAL,GAAa;AACT4V,MAAAA,MAAM,EAAE,EADC;AAETH,MAAAA,KAAK,EAAE,EAFE;AAGTiB,MAAAA,YAAY,EAAE;AACVtY,QAAAA,eAAe,EAAE,MAAKA,eAAL,CAAqBuY,IAArB,+BADP;AAEVtY,QAAAA,aAAa,EAAE,MAAKA,aAAL,CAAmBsY,IAAnB;AAFL;AAHL,KAAb;;AAQH;;;;SA+ODlU,SAAA;;;QACYiU,eAAiB,KAAK1W,MAAtB0W;sBAC+F,KAAKhX;QAApGkX,sBAAAA;QAASlU,uBAAAA;wCAAU+Q;QAAAA,uCAAQ;4CAAOoD;QAAAA,gDAAa;QAAI3J,sBAAAA;4CAASb;QAAAA,gDAAaV;AAEjF,QAAMmL,KAAK,GAAG,KAAK9W,KAAL,CAAW4V,MAAX,CAAkB7J,MAAlB,CAA2C,UAACC,GAAD,EAAMlJ,OAAN;;;AACrD,UAAMiU,QAAQ,GAAGjY,kBAAkB,CAACgE,OAAO,CAAC6H,YAAT,CAAnC;AACA,UAAMqM,kBAAkB,GAAGhL,GAAG,CAAC+K,QAAD,CAAH,IAAiB,EAA5C;AACA,0BACO/K,GADP,6BAEK+K,QAFL,cAEoBC,kBAFpB,GAEwClU,OAFxC;AAIH,KAPa,EAOX,EAPW,CAAd;AASA,QAAMmU,SAAS,GAAGpL,MAAM,CAAC8C,IAAP,CAAYmI,KAAZ,EAAmB7R,GAAnB,CAAuB,UAACiS,MAAD;AACrC,UAAMtB,MAAM,GAAGkB,KAAK,CAACI,MAAD,CAApB;UACOC,eAAgBvB;AACvB,aACI1X,4BAAA,CAACuO,mBAAD;AACIR,QAAAA,GAAG,EAAEiL;AACLzD,QAAAA,KAAK,EAAEA;AACP9I,QAAAA,YAAY,EAAEwM,YAAY,CAACxM;AAC3BuC,QAAAA,OAAO,EAAEA;OAJb,EAMK0I,MAAM,CAAC3Q,GAAP,CAAW,UAACwN,KAAD;AAAA,eACRvU,4BAAA,CAACkU,YAAD;AACInG,UAAAA,GAAG,EAAEwG,KAAK,CAAChD;AACXgD,UAAAA,KAAK,EAAEA;AACPvF,UAAAA,OAAO,EAAEA;AACTlK,UAAAA,SAAS,EAAE6T,UAAU,CAACpE,KAAK,CAACjI,OAAP;AACrBgF,UAAAA,OAAO,EAAE,MAAI,CAACgH;AACd9U,UAAAA,OAAO,EAAE,MAAI,CAAChC,KAAL,CAAWgC;AACpBI,UAAAA,MAAM,EAAE,MAAI,CAACpC,KAAL,CAAWoC;AACnBD,UAAAA,QAAQ,EAAEiN,qBAAqB,CAAC,CAAC,MAAI,CAACsI,iBAAN,EAAyB,MAAI,CAAC1X,KAAL,CAAWmC,QAApC,CAAD,EAAgD4Q,KAAK,CAAChD,EAAtD;AAC/BjO,UAAAA,SAAS,EAAEsN,qBAAqB,CAAC,CAAC,MAAI,CAACuI,kBAAN,EAA0B,MAAI,CAAC3X,KAAL,CAAW8B,SAArC,CAAD,EAAkDiR,KAAK,CAAChD,EAAxD;SATpC,CADQ;AAAA,OAAX,CANL,CADJ;AAsBH,KAzBiB,CAAlB;AA2BA,WACIvR,4BAAA,CAACiO,iBAAiB,CAACmL,QAAnB;AAA4BnY,MAAAA,KAAK,EAAEkN;KAAnC,EACInO,4BAAA,CAACqZ,eAAe,CAACD,QAAjB;AAA0BnY,MAAAA,KAAK,EAAEuX;KAAjC,EACKhU,QADL,EAEKkU,OAAO,GAAGY,qBAAY,CAACP,SAAD,EAAYL,OAAZ,CAAf,GAAsCK,SAFlD,CADJ,CADJ;AAQH;;;;;AA5RG,aAAO,KAAKvX,KAAL,CAAW0K,QAAX,IAAuBD,QAAQ,CAACC,QAAvC;AACH;;;;EAlB0BpH;;ACrC/B,mBAAe;AAAA,SAAuBsJ,gBAAU,CAACiL,eAAD,CAAjC;AAAA,CAAf;;;;;;;;"}
+\ No newline at end of file
+diff --git a/notistack.cjs.production.min.js b/notistack.cjs.production.min.js
+index bd122fa6a125e094ded563b9bdf9647bcc1e0f1b..4a349717bae15e9619cbe7c48d6e3cd8a4d5a426 100644
+--- a/notistack.cjs.production.min.js
++++ b/notistack.cjs.production.min.js
+@@ -1,2 +1,2 @@
+-"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=n(e),r=require("react-dom"),i=n(require("clsx")),o=require("goober");function a(n,e){for(var t=0;t<e.length;t++){var r=e[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(n,r.key,r)}}function s(n,e,t){return e&&a(n.prototype,e),t&&a(n,t),n}function u(){return(u=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n}).apply(this,arguments)}function c(n,e){n.prototype=Object.create(e.prototype),n.prototype.constructor=n,n.__proto__=e}function l(n,e){if(null==n)return{};var t,r,i={},o=Object.keys(n);for(r=0;r<o.length;r++)e.indexOf(t=o[r])>=0||(i[t]=n[t]);return i}function d(n){if(void 0===n)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return n}var f=function(){return""},p=t.createContext({enqueueSnackbar:f,closeSnackbar:f}),m=function(n){return n.charAt(0).toUpperCase()+n.slice(1)},h=function(n){return""+m(n.vertical)+m(n.horizontal)},x=function(n){return!!n||0===n},g=function(n){function e(e){var t;t=n.call(this,e)||this;var r,i=e.appear;return t.appearStatus=null,e.in?i?(r="exited",t.appearStatus="entering"):r="entered":r=e.unmountOnExit||e.mountOnEnter?"unmounted":"exited",t.state={status:r},t.nextCallback=null,t}c(e,n),e.getDerivedStateFromProps=function(n,e){return n.in&&"unmounted"===e.status?{status:"exited"}:null};var t=e.prototype;return t.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},t.componentDidUpdate=function(n){var e=null;if(n!==this.props){var t=this.state.status;this.props.in?"entering"!==t&&"entered"!==t&&(e="entering"):"entering"!==t&&"entered"!==t||(e="exiting")}this.updateStatus(!1,e)},t.componentWillUnmount=function(){this.cancelNextCallback()},t.getTimeouts=function(){var n=this.props.timeout,e=n,t=n;return null!=n&&"number"!=typeof n&&"string"!=typeof n&&(t=n.exit,e=n.enter),{exit:t,enter:e}},t.updateStatus=function(n,e){void 0===n&&(n=!1),null!==e?(this.cancelNextCallback(),"entering"===e?this.performEnter(n):this.performExit()):this.props.unmountOnExit&&"exited"===this.state.status&&this.setState({status:"unmounted"})},t.performEnter=function(n){var e=this,t=this.props.enter,r=n,i=this.getTimeouts();n||t?(this.props.onEnter&&this.props.onEnter(this.node,r),this.safeSetState({status:"entering"},(function(){e.props.onEntering&&e.props.onEntering(e.node,r),e.onTransitionEnd(i.enter,(function(){e.safeSetState({status:"entered"},(function(){e.props.onEntered&&e.props.onEntered(e.node,r)}))}))}))):this.safeSetState({status:"entered"},(function(){e.props.onEntered&&e.props.onEntered(e.node,r)}))},t.performExit=function(){var n=this,e=this.props.exit,t=this.getTimeouts();e?(this.props.onExit&&this.props.onExit(this.node),this.safeSetState({status:"exiting"},(function(){n.props.onExiting&&n.props.onExiting(n.node),n.onTransitionEnd(t.exit,(function(){n.safeSetState({status:"exited"},(function(){n.props.onExited&&n.props.onExited(n.node)}))}))}))):this.safeSetState({status:"exited"},(function(){n.props.onExited&&n.props.onExited(n.node)}))},t.cancelNextCallback=function(){null!==this.nextCallback&&this.nextCallback.cancel&&(this.nextCallback.cancel(),this.nextCallback=null)},t.safeSetState=function(n,e){e=this.setNextCallback(e),this.setState(n,e)},t.setNextCallback=function(n){var e=this,t=!0;return this.nextCallback=function(){t&&(t=!1,e.nextCallback=null,n())},this.nextCallback.cancel=function(){t=!1},this.nextCallback},t.onTransitionEnd=function(n,e){this.setNextCallback(e),!this.node||null==n&&!this.props.addEndListener?setTimeout(this.nextCallback,0):(this.props.addEndListener&&this.props.addEndListener(this.node,this.nextCallback),null!=n&&setTimeout(this.nextCallback,n))},t.render=function(){var n=this.state.status;if("unmounted"===n)return null;var e=this.props;return(0,e.children)(n,l(e,["children","in","mountOnEnter","unmountOnExit","appear","enter","exit","timeout","addEndListener","onEnter","onEntering","onEntered","onExit","onExiting","onExited","nodeRef"]))},s(e,[{key:"node",get:function(){var n,e=null===(n=this.props.nodeRef)||void 0===n?void 0:n.current;if(!e)throw new Error("notistack - Custom snackbar is not refForwarding");return e}}]),e}(t.Component);function v(){}function E(n,e){"function"==typeof n?n(e):n&&(n.current=e)}function b(n,t){return e.useMemo((function(){return null==n&&null==t?null:function(e){E(n,e),E(t,e)}}),[n,t])}function k(n){var e=n.timeout,t=n.style,r=void 0===t?{}:t;return{duration:"object"==typeof e?e[n.mode]||0:e,easing:r.transitionTimingFunction,delay:r.transitionDelay}}g.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:v,onEntering:v,onEntered:v,onExit:v,onExiting:v,onExited:v};var y=function(n){n.scrollTop=n.scrollTop},C=function(n){return Math.round(n)+"ms"};function w(n,e){void 0===n&&(n=["all"]);var t=e||{},r=t.duration,i=void 0===r?300:r,o=t.easing,a=void 0===o?"cubic-bezier(0.4, 0, 0.2, 1)":o,s=t.delay,u=void 0===s?0:s;return(Array.isArray(n)?n:[n]).map((function(n){var e="string"==typeof i?i:C(i),t="string"==typeof u?u:C(u);return n+" "+e+" "+a+" "+t})).join(",")}function S(n){return function(n){return n&&n.ownerDocument||document}(n).defaultView||window}function O(n,e){if(e){var t=function(n,e){var t,r=e.getBoundingClientRect(),i=S(e);if(e.fakeTransform)t=e.fakeTransform;else{var o=i.getComputedStyle(e);t=o.getPropertyValue("-webkit-transform")||o.getPropertyValue("transform")}var a=0,s=0;if(t&&"none"!==t&&"string"==typeof t){var u=t.split("(")[1].split(")")[0].split(",");a=parseInt(u[4],10),s=parseInt(u[5],10)}switch(n){case"left":return"translateX("+(i.innerWidth+a-r.left)+"px)";case"right":return"translateX(-"+(r.left+r.width-a)+"px)";case"up":return"translateY("+(i.innerHeight+s-r.top)+"px)";default:return"translateY(-"+(r.top+r.height-s)+"px)"}}(n,e);t&&(e.style.webkitTransform=t,e.style.transform=t)}}var T=e.forwardRef((function(n,t){var r=n.children,i=n.direction,o=void 0===i?"down":i,a=n.in,s=n.style,c=n.timeout,d=void 0===c?0:c,f=n.onEnter,p=n.onEntered,m=n.onExit,h=n.onExited,x=l(n,["children","direction","in","style","timeout","onEnter","onEntered","onExit","onExited"]),v=e.useRef(null),E=b(r.ref,v),C=b(E,t),T=e.useCallback((function(){v.current&&O(o,v.current)}),[o]);return e.useEffect((function(){if(!a&&"down"!==o&&"right"!==o){var n=function(n,e){var t;function r(){for(var r=this,i=arguments.length,o=new Array(i),a=0;a<i;a++)o[a]=arguments[a];var s=function(){n.apply(r,o)};clearTimeout(t),t=setTimeout(s,e)}return void 0===e&&(e=166),r.clear=function(){clearTimeout(t)},r}((function(){v.current&&O(o,v.current)})),e=S(v.current);return e.addEventListener("resize",n),function(){n.clear(),e.removeEventListener("resize",n)}}}),[o,a]),e.useEffect((function(){a||T()}),[a,T]),e.createElement(g,Object.assign({appear:!0,nodeRef:v,onEnter:function(n,e){O(o,n),y(n),f&&f(n,e)},onEntered:p,onEntering:function(n){var e=k({timeout:d,mode:"enter",style:u({},s,{transitionTimingFunction:(null==s?void 0:s.transitionTimingFunction)||"cubic-bezier(0.0, 0, 0.2, 1)"})});n.style.webkitTransition=w("-webkit-transform",e),n.style.transition=w("transform",e),n.style.webkitTransform="none",n.style.transform="none"},onExit:function(n){var e=k({timeout:d,mode:"exit",style:u({},s,{transitionTimingFunction:(null==s?void 0:s.transitionTimingFunction)||"cubic-bezier(0.4, 0, 0.6, 1)"})});n.style.webkitTransition=w("-webkit-transform",e),n.style.transition=w("transform",e),O(o,n),m&&m(n)},onExited:function(n){n.style.webkitTransition="",n.style.transition="",h&&h(n)},in:a,timeout:d},x),(function(n,t){return e.cloneElement(r,u({ref:C,style:u({visibility:"exited"!==n||a?void 0:"hidden"},s,{},r.props.style)},t))}))}));T.displayName="Slide";var L=function(n){return t.createElement("svg",Object.assign({viewBox:"0 0 24 24",focusable:"false",style:{fontSize:20,marginInlineEnd:8,userSelect:"none",width:"1em",height:"1em",display:"inline-block",fill:"currentColor",flexShrink:0}},n))},D=function(){return t.createElement(L,null,t.createElement("path",{d:"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z"}))},N=function(){return t.createElement(L,null,t.createElement("path",{d:"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"}))},q=function(){return t.createElement(L,null,t.createElement("path",{d:"M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"}))},M=function(){return t.createElement(L,null,t.createElement("path",{d:"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z"}))},R={maxSnack:3,persist:!1,hideIconVariant:!1,disableWindowBlurListener:!1,variant:"default",autoHideDuration:5e3,iconVariant:{default:void 0,success:t.createElement(D,null),warning:t.createElement(N,null),error:t.createElement(q,null),info:t.createElement(M,null)},anchorOrigin:{vertical:"bottom",horizontal:"left"},TransitionComponent:T,transitionDuration:{enter:225,exit:195}};function H(n){return Object.entries(n).reduce((function(n,e){var t;return u({},n,((t={})[e[0]]=o.css(e[1]),t))}),{})}var j=function(n){return"notistack-MuiContent-"+n},P=H({root:{height:0},entered:{height:"auto"}}),V=e.forwardRef((function(n,t){var r=n.children,o=n.in,a=n.onExited,s=e.useRef(null),c=e.useRef(null),l=b(t,c),d=function(){return s.current?s.current.clientHeight:0};return e.createElement(g,{in:o,unmountOnExit:!0,onEnter:function(n){n.style.height="0px"},onEntered:function(n){n.style.height="auto"},onEntering:function(n){var e=d(),t=k({timeout:175,mode:"enter"}),r=t.duration,i=t.easing;n.style.transitionDuration="string"==typeof r?r:r+"ms",n.style.height=e+"px",n.style.transitionTimingFunction=i||""},onExit:function(n){n.style.height=d()+"px"},onExited:a,onExiting:function(n){y(n);var e=k({timeout:175,mode:"exit"}),t=e.duration,r=e.easing;n.style.transitionDuration="string"==typeof t?t:t+"ms",n.style.height="0px",n.style.transitionTimingFunction=r||""},nodeRef:c,timeout:175},(function(n,t){return e.createElement("div",Object.assign({ref:l,className:i(P.root,"entered"===n&&P.entered),style:u({pointerEvents:"all",overflow:"hidden",minHeight:"0px",transition:w("height")},"entered"===n&&{overflow:"visible"},{},"exited"===n&&!o&&{visibility:"hidden"})},t),e.createElement("div",{ref:s,className:"notistack-CollapseWrapper",style:{display:"flex",width:"100%"}},r))}))}));V.displayName="Collapse";var W={right:"left",left:"right",bottom:"up",top:"down"},A=function(n){return"anchorOrigin"+h(n)},I=function(){};function z(n,e){return n.reduce((function(n,t){return null==t?n:function(){for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];var a=[].concat(i);e&&-1===a.indexOf(e)&&a.push(e),n.apply(this,a),t.apply(this,a)}}),I)}var B="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;function F(n){var t=e.useRef(n);return B((function(){t.current=n})),e.useCallback((function(){return t.current.apply(void 0,arguments)}),[])}var _,X=e.forwardRef((function(n,t){var r=n.children,o=n.className,a=n.autoHideDuration,s=n.disableWindowBlurListener,u=void 0!==s&&s,c=n.onClose,l=n.id,d=n.open,f=n.SnackbarProps,p=void 0===f?{}:f,m=e.useRef(),h=F((function(){c&&c.apply(void 0,arguments)})),x=F((function(n){c&&null!=n&&(m.current&&clearTimeout(m.current),m.current=setTimeout((function(){h(null,"timeout",l)}),n))}));e.useEffect((function(){return d&&x(a),function(){m.current&&clearTimeout(m.current)}}),[d,a,x]);var g=function(){m.current&&clearTimeout(m.current)},v=e.useCallback((function(){null!=a&&x(.5*a)}),[a,x]);return e.useEffect((function(){if(!u&&d)return window.addEventListener("focus",v),window.addEventListener("blur",g),function(){window.removeEventListener("focus",v),window.removeEventListener("blur",g)}}),[u,v,d]),e.createElement("div",Object.assign({ref:t},p,{className:i("notistack-Snackbar",o),onMouseEnter:function(n){p.onMouseEnter&&p.onMouseEnter(n),g()},onMouseLeave:function(n){p.onMouseLeave&&p.onMouseLeave(n),v()}}),r)}));X.displayName="Snackbar";var Z=H({root:(_={display:"flex",flexWrap:"wrap",flexGrow:1},_["@media (min-width:600px)"]={flexGrow:"initial",minWidth:"288px"},_)}),Q=e.forwardRef((function(n,e){var r=n.className,o=l(n,["className"]);return t.createElement("div",Object.assign({ref:e,className:i(Z.root,r)},o))}));Q.displayName="SnackbarContent";var U=H({root:{backgroundColor:"#313131",fontSize:"0.875rem",lineHeight:1.43,letterSpacing:"0.01071em",color:"#fff",alignItems:"center",padding:"6px 16px",borderRadius:"4px",boxShadow:"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"},lessPadding:{paddingLeft:"20px"},default:{backgroundColor:"#313131"},success:{backgroundColor:"#43a047"},error:{backgroundColor:"#d32f2f"},warning:{backgroundColor:"#ff9800"},info:{backgroundColor:"#2196f3"},message:{display:"flex",alignItems:"center",padding:"8px 0"},action:{display:"flex",alignItems:"center",marginLeft:"auto",paddingLeft:"16px",marginRight:"-8px"}}),G=e.forwardRef((function(n,e){var r=n.message,o=n.variant,a=n.hideIconVariant,s=n.style,u=n.className,c=n.iconVariant[o],l=n.action;return"function"==typeof l&&(l=l(n.id)),t.createElement(Q,{ref:e,role:"alert","aria-describedby":"notistack-snackbar",style:s,className:i("notistack-MuiContent",j(o),U.root,U[o],u,!a&&c&&U.lessPadding)},t.createElement("div",{id:"notistack-snackbar",className:U.message},a?null:c,r),l&&t.createElement("div",{className:U.action},l))}));G.displayName="MaterialDesignContent";var Y,J,K,$,nn,en=e.memo(G),tn=H({wrappedRoot:{width:"100%",position:"relative",transform:"translateX(0)",top:0,right:0,bottom:0,left:0,minWidth:"288px"}}),rn=function(n){var r=e.useRef(),o=e.useState(!0),a=o[0],s=o[1],c=z([n.snack.onClose,n.onClose]),d=e.useCallback((function(){r.current=setTimeout((function(){s((function(n){return!n}))}),125)}),[]);e.useEffect((function(){return function(){r.current&&clearTimeout(r.current)}}),[]);var f,p=n.snack,m=n.classes,h=n.Component,x=void 0===h?en:h,g=e.useMemo((function(){return function(n){void 0===n&&(n={});var e={containerRoot:!0,containerAnchorOriginTopCenter:!0,containerAnchorOriginBottomCenter:!0,containerAnchorOriginTopRight:!0,containerAnchorOriginBottomRight:!0,containerAnchorOriginTopLeft:!0,containerAnchorOriginBottomLeft:!0};return Object.keys(n).filter((function(n){return!e[n]})).reduce((function(e,t){var r;return u({},e,((r={})[t]=n[t],r))}),{})}(m)}),[m]),v=p.open,E=p.SnackbarProps,b=p.TransitionComponent,k=p.TransitionProps,y=p.transitionDuration,C=p.disableWindowBlurListener,w=p.content,S=l(p,["open","SnackbarProps","TransitionComponent","TransitionProps","transitionDuration","disableWindowBlurListener","content","entered","requestClose","onEnter","onEntered","onExit","onExited"]),O=u({direction:(f=S.anchorOrigin,"center"!==f.horizontal?W[f.horizontal]:W[f.vertical]),timeout:y},k),T=w;"function"==typeof T&&(T=T(S.id,S.message));var L=["onEnter","onEntered","onExit","onExited"].reduce((function(e,t){var r;return u({},e,((r={})[t]=z([n.snack[t],n[t]],S.id),r))}),{});return t.createElement(V,{in:a,onExited:L.onExited},t.createElement(X,{open:v,id:S.id,disableWindowBlurListener:C,autoHideDuration:S.autoHideDuration,className:i(tn.wrappedRoot,g.root,g[A(S.anchorOrigin)]),SnackbarProps:E,onClose:c},t.createElement(b,Object.assign({},O,{appear:!0,in:v,onExit:L.onExit,onExited:d,onEnter:L.onEnter,onEntered:z([L.onEntered,function(){n.snack.requestClose&&c(null,"instructed",n.snack.id)}],S.id)}),T||t.createElement(x,Object.assign({},S)))))},on=H({root:(Y={boxSizing:"border-box",display:"flex",maxHeight:"100%",position:"fixed",zIndex:1400,height:"auto",width:"auto",transition:w(["top","right","bottom","left","max-width"],{duration:300,easing:"ease"}),pointerEvents:"none"},Y[".notistack-CollapseWrapper"]={padding:"6px 0px",transition:"padding 300ms ease 0ms"},Y.maxWidth="calc(100% - 40px)",Y["@media (max-width:599.95px)"]={width:"100%",maxWidth:"calc(100% - 32px)"},Y),rootDense:(J={},J[".notistack-CollapseWrapper"]={padding:"2px 0px"},J),top:{top:"14px",flexDirection:"column"},bottom:{bottom:"14px",flexDirection:"column-reverse"},left:(K={left:"20px"},K["@media (min-width:600px)"]={alignItems:"flex-start"},K["@media (max-width:599.95px)"]={left:"16px"},K),right:($={right:"20px"},$["@media (min-width:600px)"]={alignItems:"flex-end"},$["@media (max-width:599.95px)"]={right:"16px"},$),center:(nn={left:"50%",transform:"translateX(-50%)"},nn["@media (min-width:600px)"]={alignItems:"center"},nn)}),an=e.memo((function(n){var e=n.classes,r=void 0===e?{}:e,o=n.anchorOrigin,a=n.dense,s=n.children,u=i("notistack-SnackbarContainer",on[o.vertical],on[o.horizontal],on.root,r.containerRoot,r["containerAnchorOrigin"+h(o)],a&&on.rootDense);return t.createElement("div",{className:u},s)})),sn=function(n){return!("string"==typeof n||e.isValidElement(n))},un=function(n){function e(e){var t;return(t=n.call(this,e)||this).enqueueSnackbar=function(n,e){if(void 0===e&&(e={}),null==n)throw new Error("enqueueSnackbar called with invalid argument");var r=sn(n)?n:e,o=sn(n)?n.message:n,a=r.key,s=r.preventDuplicate,c=l(r,["key","preventDuplicate"]),d=x(a),f=d?a:(new Date).getTime()+Math.random(),p=function(n,e){return function(t,r){return void 0===r&&(r=!1),r?u({},R[t],{},e[t],{},n[t]):"autoHideDuration"===t?(o=e.autoHideDuration,(a=function(n){return"number"==typeof n||null===n})(i=n.autoHideDuration)?i:a(o)?o:R.autoHideDuration):"transitionDuration"===t?function(n,e){var t=function(n,e){return e.some((function(e){return typeof n===e}))};return t(n,["string","number"])?n:t(n,["object"])?u({},R.transitionDuration,{},t(e,["object"])&&e,{},n):t(e,["string","number"])?e:t(e,["object"])?u({},R.transitionDuration,{},e):R.transitionDuration}(n.transitionDuration,e.transitionDuration):n[t]||e[t]||R[t];var i,o,a}}(c,t.props),m=u({id:f},c,{message:o,open:!0,entered:!1,requestClose:!1,persist:p("persist"),action:p("action"),content:p("content"),variant:p("variant"),anchorOrigin:p("anchorOrigin"),disableWindowBlurListener:p("disableWindowBlurListener"),autoHideDuration:p("autoHideDuration"),hideIconVariant:p("hideIconVariant"),TransitionComponent:p("TransitionComponent"),transitionDuration:p("transitionDuration"),TransitionProps:p("TransitionProps",!0),iconVariant:p("iconVariant",!0),style:p("style",!0),SnackbarProps:p("SnackbarProps",!0),className:i(t.props.className,c.className)});return m.persist&&(m.autoHideDuration=void 0),t.setState((function(n){if(void 0===s&&t.props.preventDuplicate||s){var e=function(n){return d?n.id===f:n.message===o},r=n.queue.findIndex(e)>-1,i=n.snacks.findIndex(e)>-1;if(r||i)return n}return t.handleDisplaySnack(u({},n,{queue:[].concat(n.queue,[m])}))})),f},t.handleDisplaySnack=function(n){return n.snacks.length>=t.maxSnack?t.handleDismissOldest(n):t.processQueue(n)},t.processQueue=function(n){var e=n.queue;return e.length>0?u({},n,{snacks:[].concat(n.snacks,[e[0]]),queue:e.slice(1,e.length)}):n},t.handleDismissOldest=function(n){if(n.snacks.some((function(n){return!n.open||n.requestClose})))return n;var e=!1,r=!1;n.snacks.reduce((function(n,e){return n+(e.open&&e.persist?1:0)}),0)===t.maxSnack&&(r=!0);var i=n.snacks.map((function(n){return e||n.persist&&!r?u({},n):(e=!0,n.entered?(n.onClose&&n.onClose(null,"maxsnack",n.id),t.props.onClose&&t.props.onClose(null,"maxsnack",n.id),u({},n,{open:!1})):u({},n,{requestClose:!0}))}));return u({},n,{snacks:i})},t.handleEnteredSnack=function(n,e,r){if(!x(r))throw new Error("handleEnteredSnack Cannot be called with undefined key");t.setState((function(n){return{snacks:n.snacks.map((function(n){return n.id===r?u({},n,{entered:!0}):u({},n)}))}}))},t.handleCloseSnack=function(n,e,r){t.props.onClose&&t.props.onClose(n,e,r);var i=void 0===r;t.setState((function(n){var e=n.queue;return{snacks:n.snacks.map((function(n){return i||n.id===r?u({},n,n.entered?{open:!1}:{requestClose:!0}):u({},n)})),queue:e.filter((function(n){return n.id!==r}))}}))},t.closeSnackbar=function(n){var e=t.state.snacks.find((function(e){return e.id===n}));x(n)&&e&&e.onClose&&e.onClose(null,"instructed",n),t.handleCloseSnack(null,"instructed",n)},t.handleExitedSnack=function(n,e){if(!x(e))throw new Error("handleExitedSnack Cannot be called with undefined key");t.setState((function(n){var r=t.processQueue(u({},n,{snacks:n.snacks.filter((function(n){return n.id!==e}))}));return 0===r.queue.length?r:t.handleDismissOldest(r)}))},exports.enqueueSnackbar=t.enqueueSnackbar,exports.closeSnackbar=t.closeSnackbar,t.state={snacks:[],queue:[],contextValue:{enqueueSnackbar:t.enqueueSnackbar.bind(d(t)),closeSnackbar:t.closeSnackbar.bind(d(t))}},t}return c(e,n),e.prototype.render=function(){var n=this,e=this.state.contextValue,i=this.props,o=i.domRoot,a=i.children,s=i.dense,c=void 0!==s&&s,l=i.Components,d=void 0===l?{}:l,f=i.classes,m=this.state.snacks.reduce((function(n,e){var t,r=h(e.anchorOrigin);return u({},n,((t={})[r]=[].concat(n[r]||[],[e]),t))}),{}),x=Object.keys(m).map((function(e){var r=m[e];return t.createElement(an,{key:e,dense:c,anchorOrigin:r[0].anchorOrigin,classes:f},r.map((function(e){return t.createElement(rn,{key:e.id,snack:e,classes:f,Component:d[e.variant],onClose:n.handleCloseSnack,onEnter:n.props.onEnter,onExit:n.props.onExit,onExited:z([n.handleExitedSnack,n.props.onExited],e.id),onEntered:z([n.handleEnteredSnack,n.props.onEntered],e.id)})})))}));return t.createElement(p.Provider,{value:e},a,o?r.createPortal(x,o):x)},s(e,[{key:"maxSnack",get:function(){return this.props.maxSnack||R.maxSnack}}]),e}(e.Component);exports.MaterialDesignContent=en,exports.SnackbarContent=Q,exports.SnackbarProvider=un,exports.Transition=g,exports.useSnackbar=function(){return e.useContext(p)};
++"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=n(e),r=require("react-dom"),i=n(require("clsx")),o=require("goober");function a(n,e){for(var t=0;t<e.length;t++){var r=e[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(n,r.key,r)}}function s(n,e,t){return e&&a(n.prototype,e),t&&a(n,t),n}function u(){return(u=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n}).apply(this,arguments)}function c(n,e){n.prototype=Object.create(e.prototype),n.prototype.constructor=n,n.__proto__=e}function l(n,e){if(null==n)return{};var t,r,i={},o=Object.keys(n);for(r=0;r<o.length;r++)e.indexOf(t=o[r])>=0||(i[t]=n[t]);return i}function d(n){if(void 0===n)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return n}var f=function(){return""},p=t.createContext({enqueueSnackbar:f,closeSnackbar:f}),m=function(n){return n.charAt(0).toUpperCase()+n.slice(1)},h=function(n){return""+m(n.vertical)+m(n.horizontal)},x=function(n){return!!n||0===n},v=function(n){function e(e){var t;t=n.call(this,e)||this;var r,i=e.appear;return t.appearStatus=null,e.in?i?(r="exited",t.appearStatus="entering"):r="entered":r=e.unmountOnExit||e.mountOnEnter?"unmounted":"exited",t.state={status:r},t.nextCallback=null,t}c(e,n),e.getDerivedStateFromProps=function(n,e){return n.in&&"unmounted"===e.status?{status:"exited"}:null};var t=e.prototype;return t.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},t.componentDidUpdate=function(n){var e=null;if(n!==this.props){var t=this.state.status;this.props.in?"entering"!==t&&"entered"!==t&&(e="entering"):"entering"!==t&&"entered"!==t||(e="exiting")}this.updateStatus(!1,e)},t.componentWillUnmount=function(){this.cancelNextCallback()},t.getTimeouts=function(){var n=this.props.timeout,e=n,t=n;return null!=n&&"number"!=typeof n&&"string"!=typeof n&&(t=n.exit,e=n.enter),{exit:t,enter:e}},t.updateStatus=function(n,e){void 0===n&&(n=!1),null!==e?(this.cancelNextCallback(),"entering"===e?this.performEnter(n):this.performExit()):this.props.unmountOnExit&&"exited"===this.state.status&&this.setState({status:"unmounted"})},t.performEnter=function(n){var e=this,t=this.props.enter,r=n,i=this.getTimeouts();n||t?(this.props.onEnter&&this.props.onEnter(this.node,r),this.safeSetState({status:"entering"},(function(){e.props.onEntering&&e.props.onEntering(e.node,r),e.onTransitionEnd(i.enter,(function(){e.safeSetState({status:"entered"},(function(){e.props.onEntered&&e.props.onEntered(e.node,r)}))}))}))):this.safeSetState({status:"entered"},(function(){e.props.onEntered&&e.props.onEntered(e.node,r)}))},t.performExit=function(){var n=this,e=this.props.exit,t=this.getTimeouts();e?(this.props.onExit&&this.props.onExit(this.node),this.safeSetState({status:"exiting"},(function(){n.props.onExiting&&n.props.onExiting(n.node),n.onTransitionEnd(t.exit,(function(){n.safeSetState({status:"exited"},(function(){n.props.onExited&&n.props.onExited(n.node)}))}))}))):this.safeSetState({status:"exited"},(function(){n.props.onExited&&n.props.onExited(n.node)}))},t.cancelNextCallback=function(){null!==this.nextCallback&&this.nextCallback.cancel&&(this.nextCallback.cancel(),this.nextCallback=null)},t.safeSetState=function(n,e){e=this.setNextCallback(e),this.setState(n,e)},t.setNextCallback=function(n){var e=this,t=!0;return this.nextCallback=function(){t&&(t=!1,e.nextCallback=null,n())},this.nextCallback.cancel=function(){t=!1},this.nextCallback},t.onTransitionEnd=function(n,e){this.setNextCallback(e),!this.node||null==n&&!this.props.addEndListener?setTimeout(this.nextCallback,0):(this.props.addEndListener&&this.props.addEndListener(this.node,this.nextCallback),null!=n&&setTimeout(this.nextCallback,n))},t.render=function(){var n=this.state.status;if("unmounted"===n)return null;var e=this.props;return(0,e.children)(n,l(e,["children","in","mountOnEnter","unmountOnExit","appear","enter","exit","timeout","addEndListener","onEnter","onEntering","onEntered","onExit","onExiting","onExited","nodeRef"]))},s(e,[{key:"node",get:function(){var n,e=null===(n=this.props.nodeRef)||void 0===n?void 0:n.current;if(!e)throw new Error("notistack - Custom snackbar is not refForwarding");return e}}]),e}(t.Component);function g(){}function E(n,e){"function"==typeof n?n(e):n&&(n.current=e)}function b(n,t){return e.useMemo((function(){return null==n&&null==t?null:function(e){E(n,e),E(t,e)}}),[n,t])}function k(n){var e=n.timeout,t=n.style,r=void 0===t?{}:t;return{duration:"object"==typeof e?e[n.mode]||0:e,easing:r.transitionTimingFunction,delay:r.transitionDelay}}v.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:g,onEntering:g,onEntered:g,onExit:g,onExiting:g,onExited:g};var y=function(n){n.scrollTop=n.scrollTop},C=function(n){return Math.round(n)+"ms"};function w(n,e){void 0===n&&(n=["all"]);var t=e||{},r=t.duration,i=void 0===r?300:r,o=t.easing,a=void 0===o?"cubic-bezier(0.4, 0, 0.2, 1)":o,s=t.delay,u=void 0===s?0:s;return(Array.isArray(n)?n:[n]).map((function(n){var e="string"==typeof i?i:C(i),t="string"==typeof u?u:C(u);return n+" "+e+" "+a+" "+t})).join(",")}function S(n){return function(n){return n&&n.ownerDocument||document}(n).defaultView||window}function O(n,e){if(e){var t=function(n,e){var t,r=e.getBoundingClientRect(),i=S(e);if(e.fakeTransform)t=e.fakeTransform;else{var o=i.getComputedStyle(e);t=o.getPropertyValue("-webkit-transform")||o.getPropertyValue("transform")}var a=0,s=0;if(t&&"none"!==t&&"string"==typeof t){var u=t.split("(")[1].split(")")[0].split(",");a=parseInt(u[4],10),s=parseInt(u[5],10)}switch(n){case"left":return"translateX("+(i.innerWidth+a-r.left)+"px)";case"right":return"translateX(-"+(r.left+r.width-a)+"px)";case"up":return"translateY("+(i.innerHeight+s-r.top)+"px)";default:return"translateY(-"+(r.top+r.height-s)+"px)"}}(n,e);t&&(e.style.webkitTransform=t,e.style.transform=t)}}var T=e.forwardRef((function(n,t){var r=n.children,i=n.direction,o=void 0===i?"down":i,a=n.in,s=n.style,c=n.timeout,d=void 0===c?0:c,f=n.onEnter,p=n.onEntered,m=n.onExit,h=n.onExited,x=l(n,["children","direction","in","style","timeout","onEnter","onEntered","onExit","onExited"]),g=e.useRef(null),E=b(r.ref,g),C=b(E,t),T=e.useCallback((function(){g.current&&O(o,g.current)}),[o]);return e.useEffect((function(){if(!a&&"down"!==o&&"right"!==o){var n=function(n,e){var t;function r(){for(var r=this,i=arguments.length,o=new Array(i),a=0;a<i;a++)o[a]=arguments[a];var s=function(){n.apply(r,o)};clearTimeout(t),t=setTimeout(s,e)}return void 0===e&&(e=166),r.clear=function(){clearTimeout(t)},r}((function(){g.current&&O(o,g.current)})),e=S(g.current);return e.addEventListener("resize",n),function(){n.clear(),e.removeEventListener("resize",n)}}}),[o,a]),e.useEffect((function(){a||T()}),[a,T]),e.createElement(v,Object.assign({appear:!0,nodeRef:g,onEnter:function(n,e){O(o,n),y(n),f&&f(n,e)},onEntered:p,onEntering:function(n){var e=k({timeout:d,mode:"enter",style:u({},s,{transitionTimingFunction:(null==s?void 0:s.transitionTimingFunction)||"cubic-bezier(0.0, 0, 0.2, 1)"})});n.style.webkitTransition=w("-webkit-transform",e),n.style.transition=w("transform",e),n.style.webkitTransform="none",n.style.transform="none"},onExit:function(n){var e=k({timeout:d,mode:"exit",style:u({},s,{transitionTimingFunction:(null==s?void 0:s.transitionTimingFunction)||"cubic-bezier(0.4, 0, 0.6, 1)"})});n.style.webkitTransition=w("-webkit-transform",e),n.style.transition=w("transform",e),O(o,n),m&&m(n)},onExited:function(n){n.style.webkitTransition="",n.style.transition="",h&&h(n)},in:a,timeout:d},x),(function(n,t){return e.cloneElement(r,u({ref:C,style:u({visibility:"exited"!==n||a?void 0:"hidden"},s,{},r.props.style)},t))}))}));T.displayName="Slide";var L=function(n){return t.createElement("svg",Object.assign({viewBox:"0 0 24 24",focusable:"false",style:{fontSize:20,marginInlineEnd:8,userSelect:"none",width:"1em",height:"1em",display:"inline-block",fill:"currentColor",flexShrink:0}},n))},D=function(){return t.createElement(L,null,t.createElement("path",{d:"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z"}))},M=function(){return t.createElement(L,null,t.createElement("path",{d:"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"}))},N=function(){return t.createElement(L,null,t.createElement("path",{d:"M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"}))},q=function(){return t.createElement(L,null,t.createElement("path",{d:"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z"}))},R={maxSnack:3,persist:!1,hideIconVariant:!1,disableWindowBlurListener:!1,variant:"default",autoHideDuration:5e3,iconVariant:{default:void 0,success:t.createElement(D,null),warning:t.createElement(M,null),error:t.createElement(N,null),info:t.createElement(q,null)},anchorOrigin:{vertical:"bottom",horizontal:"left"},TransitionComponent:T,transitionDuration:{enter:225,exit:195}};function H(n){return Object.entries(n).reduce((function(n,e){var t;return u({},n,((t={})[e[0]]=o.css(e[1]),t))}),{})}var P=t.createContext(H);function j(n){var e=t.useContext(P);return t.useMemo((function(){return e(n)}),[e,n])}var V=function(n){return"notistack-MuiContent-"+n},W={root:{height:0},entered:{height:"auto"}},A=e.forwardRef((function(n,t){var r=j(W),o=n.children,a=n.in,s=n.onExited,c=e.useRef(null),l=e.useRef(null),d=b(t,l),f=function(){return c.current?c.current.clientHeight:0};return e.createElement(v,{in:a,unmountOnExit:!0,onEnter:function(n){n.style.height="0px"},onEntered:function(n){n.style.height="auto"},onEntering:function(n){var e=f(),t=k({timeout:175,mode:"enter"}),r=t.duration,i=t.easing;n.style.transitionDuration="string"==typeof r?r:r+"ms",n.style.height=e+"px",n.style.transitionTimingFunction=i||""},onExit:function(n){n.style.height=f()+"px"},onExited:s,onExiting:function(n){y(n);var e=k({timeout:175,mode:"exit"}),t=e.duration,r=e.easing;n.style.transitionDuration="string"==typeof t?t:t+"ms",n.style.height="0px",n.style.transitionTimingFunction=r||""},nodeRef:l,timeout:175},(function(n,t){return e.createElement("div",Object.assign({ref:d,className:i(r.root,"entered"===n&&r.entered),style:u({pointerEvents:"all",overflow:"hidden",minHeight:"0px",transition:w("height")},"entered"===n&&{overflow:"visible"},{},"exited"===n&&!a&&{visibility:"hidden"})},t),e.createElement("div",{ref:c,className:"notistack-CollapseWrapper",style:{display:"flex",width:"100%"}},o))}))}));A.displayName="Collapse";var I={right:"left",left:"right",bottom:"up",top:"down"},z=function(n){return"anchorOrigin"+h(n)},B=function(){};function F(n,e){return n.reduce((function(n,t){return null==t?n:function(){for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];var a=[].concat(i);e&&-1===a.indexOf(e)&&a.push(e),n.apply(this,a),t.apply(this,a)}}),B)}var _="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;function X(n){var t=e.useRef(n);return _((function(){t.current=n})),e.useCallback((function(){return t.current.apply(void 0,arguments)}),[])}var Z,Q=e.forwardRef((function(n,t){var r=n.children,o=n.className,a=n.autoHideDuration,s=n.disableWindowBlurListener,u=void 0!==s&&s,c=n.onClose,l=n.id,d=n.open,f=n.SnackbarProps,p=void 0===f?{}:f,m=e.useRef(),h=X((function(){c&&c.apply(void 0,arguments)})),x=X((function(n){c&&null!=n&&(m.current&&clearTimeout(m.current),m.current=setTimeout((function(){h(null,"timeout",l)}),n))}));e.useEffect((function(){return d&&x(a),function(){m.current&&clearTimeout(m.current)}}),[d,a,x]);var v=function(){m.current&&clearTimeout(m.current)},g=e.useCallback((function(){null!=a&&x(.5*a)}),[a,x]);return e.useEffect((function(){if(!u&&d)return window.addEventListener("focus",g),window.addEventListener("blur",v),function(){window.removeEventListener("focus",g),window.removeEventListener("blur",v)}}),[u,g,d]),e.createElement("div",Object.assign({ref:t},p,{className:i("notistack-Snackbar",o),onMouseEnter:function(n){p.onMouseEnter&&p.onMouseEnter(n),v()},onMouseLeave:function(n){p.onMouseLeave&&p.onMouseLeave(n),g()}}),r)}));Q.displayName="Snackbar";var U={root:(Z={display:"flex",flexWrap:"wrap",flexGrow:1},Z["@media (min-width:600px)"]={flexGrow:"initial",minWidth:"288px"},Z)},G=e.forwardRef((function(n,e){var r=n.className,o=l(n,["className"]),a=j(U);return t.createElement("div",Object.assign({ref:e,className:i(a.root,r)},o))}));G.displayName="SnackbarContent";var Y={root:{backgroundColor:"#313131",fontSize:"0.875rem",lineHeight:1.43,letterSpacing:"0.01071em",color:"#fff",alignItems:"center",padding:"6px 16px",borderRadius:"4px",boxShadow:"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"},lessPadding:{paddingLeft:"20px"},default:{backgroundColor:"#313131"},success:{backgroundColor:"#43a047"},error:{backgroundColor:"#d32f2f"},warning:{backgroundColor:"#ff9800"},info:{backgroundColor:"#2196f3"},message:{display:"flex",alignItems:"center",padding:"8px 0"},action:{display:"flex",alignItems:"center",marginLeft:"auto",paddingLeft:"16px",marginRight:"-8px"}},J=e.forwardRef((function(n,e){var r=j(Y),o=n.message,a=n.variant,s=n.hideIconVariant,u=n.style,c=n.className,l=n.iconVariant[a],d=n.action;return"function"==typeof d&&(d=d(n.id)),t.createElement(G,{ref:e,role:"alert","aria-describedby":"notistack-snackbar",style:u,className:i("notistack-MuiContent",V(a),r.root,r[a],c,!s&&l&&r.lessPadding)},t.createElement("div",{id:"notistack-snackbar",className:r.message},s?null:l,o),d&&t.createElement("div",{className:r.action},d))}));J.displayName="MaterialDesignContent";var K,$,nn,en,tn,rn=e.memo(J),on={wrappedRoot:{width:"100%",position:"relative",transform:"translateX(0)",top:0,right:0,bottom:0,left:0,minWidth:"288px"}},an=function(n){var r=j(on),o=e.useRef(),a=e.useState(!0),s=a[0],c=a[1],d=F([n.snack.onClose,n.onClose]),f=e.useCallback((function(){o.current=setTimeout((function(){c((function(n){return!n}))}),125)}),[]);e.useEffect((function(){return function(){o.current&&clearTimeout(o.current)}}),[]);var p,m=n.snack,h=n.classes,x=n.Component,v=void 0===x?rn:x,g=e.useMemo((function(){return function(n){void 0===n&&(n={});var e={containerRoot:!0,containerAnchorOriginTopCenter:!0,containerAnchorOriginBottomCenter:!0,containerAnchorOriginTopRight:!0,containerAnchorOriginBottomRight:!0,containerAnchorOriginTopLeft:!0,containerAnchorOriginBottomLeft:!0};return Object.keys(n).filter((function(n){return!e[n]})).reduce((function(e,t){var r;return u({},e,((r={})[t]=n[t],r))}),{})}(h)}),[h]),E=m.open,b=m.SnackbarProps,k=m.TransitionComponent,y=m.TransitionProps,C=m.transitionDuration,w=m.disableWindowBlurListener,S=m.content,O=l(m,["open","SnackbarProps","TransitionComponent","TransitionProps","transitionDuration","disableWindowBlurListener","content","entered","requestClose","onEnter","onEntered","onExit","onExited"]),T=u({direction:(p=O.anchorOrigin,"center"!==p.horizontal?I[p.horizontal]:I[p.vertical]),timeout:C},y),L=S;"function"==typeof L&&(L=L(O.id,O.message));var D=["onEnter","onEntered","onExit","onExited"].reduce((function(e,t){var r;return u({},e,((r={})[t]=F([n.snack[t],n[t]],O.id),r))}),{});return t.createElement(A,{in:s,onExited:D.onExited},t.createElement(Q,{open:E,id:O.id,disableWindowBlurListener:w,autoHideDuration:O.autoHideDuration,className:i(r.wrappedRoot,g.root,g[z(O.anchorOrigin)]),SnackbarProps:b,onClose:d},t.createElement(k,Object.assign({},T,{appear:!0,in:E,onExit:D.onExit,onExited:f,onEnter:D.onEnter,onEntered:F([D.onEntered,function(){n.snack.requestClose&&d(null,"instructed",n.snack.id)}],O.id)}),L||t.createElement(v,Object.assign({},O)))))},sn={root:(K={boxSizing:"border-box",display:"flex",maxHeight:"100%",position:"fixed",zIndex:1400,height:"auto",width:"auto",transition:w(["top","right","bottom","left","max-width"],{duration:300,easing:"ease"}),pointerEvents:"none"},K[".notistack-CollapseWrapper"]={padding:"6px 0px",transition:"padding 300ms ease 0ms"},K.maxWidth="calc(100% - 40px)",K["@media (max-width:599.95px)"]={width:"100%",maxWidth:"calc(100% - 32px)"},K),rootDense:($={},$[".notistack-CollapseWrapper"]={padding:"2px 0px"},$),top:{top:"14px",flexDirection:"column"},bottom:{bottom:"14px",flexDirection:"column-reverse"},left:(nn={left:"20px"},nn["@media (min-width:600px)"]={alignItems:"flex-start"},nn["@media (max-width:599.95px)"]={left:"16px"},nn),right:(en={right:"20px"},en["@media (min-width:600px)"]={alignItems:"flex-end"},en["@media (max-width:599.95px)"]={right:"16px"},en),center:(tn={left:"50%",transform:"translateX(-50%)"},tn["@media (min-width:600px)"]={alignItems:"center"},tn)},un=e.memo((function(n){var e=j(sn),r=n.classes,o=void 0===r?{}:r,a=n.anchorOrigin,s=n.dense,u=n.children,c=i("notistack-SnackbarContainer",e[a.vertical],e[a.horizontal],e.root,o.containerRoot,o["containerAnchorOrigin"+h(a)],s&&e.rootDense);return t.createElement("div",{className:c},u)})),cn=function(n){return!("string"==typeof n||e.isValidElement(n))},ln=function(n){function e(e){var t;return(t=n.call(this,e)||this).enqueueSnackbar=function(n,e){if(void 0===e&&(e={}),null==n)throw new Error("enqueueSnackbar called with invalid argument");var r=cn(n)?n:e,o=cn(n)?n.message:n,a=r.key,s=r.preventDuplicate,c=l(r,["key","preventDuplicate"]),d=x(a),f=d?a:(new Date).getTime()+Math.random(),p=function(n,e){return function(t,r){return void 0===r&&(r=!1),r?u({},R[t],{},e[t],{},n[t]):"autoHideDuration"===t?(o=e.autoHideDuration,(a=function(n){return"number"==typeof n||null===n})(i=n.autoHideDuration)?i:a(o)?o:R.autoHideDuration):"transitionDuration"===t?function(n,e){var t=function(n,e){return e.some((function(e){return typeof n===e}))};return t(n,["string","number"])?n:t(n,["object"])?u({},R.transitionDuration,{},t(e,["object"])&&e,{},n):t(e,["string","number"])?e:t(e,["object"])?u({},R.transitionDuration,{},e):R.transitionDuration}(n.transitionDuration,e.transitionDuration):n[t]||e[t]||R[t];var i,o,a}}(c,t.props),m=u({id:f},c,{message:o,open:!0,entered:!1,requestClose:!1,persist:p("persist"),action:p("action"),content:p("content"),variant:p("variant"),anchorOrigin:p("anchorOrigin"),disableWindowBlurListener:p("disableWindowBlurListener"),autoHideDuration:p("autoHideDuration"),hideIconVariant:p("hideIconVariant"),TransitionComponent:p("TransitionComponent"),transitionDuration:p("transitionDuration"),TransitionProps:p("TransitionProps",!0),iconVariant:p("iconVariant",!0),style:p("style",!0),SnackbarProps:p("SnackbarProps",!0),className:i(t.props.className,c.className)});return m.persist&&(m.autoHideDuration=void 0),t.setState((function(n){if(void 0===s&&t.props.preventDuplicate||s){var e=function(n){return d?n.id===f:n.message===o},r=n.queue.findIndex(e)>-1,i=n.snacks.findIndex(e)>-1;if(r||i)return n}return t.handleDisplaySnack(u({},n,{queue:[].concat(n.queue,[m])}))})),f},t.handleDisplaySnack=function(n){return n.snacks.length>=t.maxSnack?t.handleDismissOldest(n):t.processQueue(n)},t.processQueue=function(n){var e=n.queue;return e.length>0?u({},n,{snacks:[].concat(n.snacks,[e[0]]),queue:e.slice(1,e.length)}):n},t.handleDismissOldest=function(n){if(n.snacks.some((function(n){return!n.open||n.requestClose})))return n;var e=!1,r=!1;n.snacks.reduce((function(n,e){return n+(e.open&&e.persist?1:0)}),0)===t.maxSnack&&(r=!0);var i=n.snacks.map((function(n){return e||n.persist&&!r?u({},n):(e=!0,n.entered?(n.onClose&&n.onClose(null,"maxsnack",n.id),t.props.onClose&&t.props.onClose(null,"maxsnack",n.id),u({},n,{open:!1})):u({},n,{requestClose:!0}))}));return u({},n,{snacks:i})},t.handleEnteredSnack=function(n,e,r){if(!x(r))throw new Error("handleEnteredSnack Cannot be called with undefined key");t.setState((function(n){return{snacks:n.snacks.map((function(n){return n.id===r?u({},n,{entered:!0}):u({},n)}))}}))},t.handleCloseSnack=function(n,e,r){t.props.onClose&&t.props.onClose(n,e,r);var i=void 0===r;t.setState((function(n){var e=n.queue;return{snacks:n.snacks.map((function(n){return i||n.id===r?u({},n,n.entered?{open:!1}:{requestClose:!0}):u({},n)})),queue:e.filter((function(n){return n.id!==r}))}}))},t.closeSnackbar=function(n){var e=t.state.snacks.find((function(e){return e.id===n}));x(n)&&e&&e.onClose&&e.onClose(null,"instructed",n),t.handleCloseSnack(null,"instructed",n)},t.handleExitedSnack=function(n,e){if(!x(e))throw new Error("handleExitedSnack Cannot be called with undefined key");t.setState((function(n){var r=t.processQueue(u({},n,{snacks:n.snacks.filter((function(n){return n.id!==e}))}));return 0===r.queue.length?r:t.handleDismissOldest(r)}))},exports.enqueueSnackbar=t.enqueueSnackbar,exports.closeSnackbar=t.closeSnackbar,t.state={snacks:[],queue:[],contextValue:{enqueueSnackbar:t.enqueueSnackbar.bind(d(t)),closeSnackbar:t.closeSnackbar.bind(d(t))}},t}return c(e,n),e.prototype.render=function(){var n=this,e=this.state.contextValue,i=this.props,o=i.domRoot,a=i.children,s=i.dense,c=void 0!==s&&s,l=i.Components,d=void 0===l?{}:l,f=i.classes,m=i.makeStyles,x=void 0===m?H:m,v=this.state.snacks.reduce((function(n,e){var t,r=h(e.anchorOrigin);return u({},n,((t={})[r]=[].concat(n[r]||[],[e]),t))}),{}),g=Object.keys(v).map((function(e){var r=v[e];return t.createElement(un,{key:e,dense:c,anchorOrigin:r[0].anchorOrigin,classes:f},r.map((function(e){return t.createElement(an,{key:e.id,snack:e,classes:f,Component:d[e.variant],onClose:n.handleCloseSnack,onEnter:n.props.onEnter,onExit:n.props.onExit,onExited:F([n.handleExitedSnack,n.props.onExited],e.id),onEntered:F([n.handleEnteredSnack,n.props.onEntered],e.id)})})))}));return t.createElement(P.Provider,{value:x},t.createElement(p.Provider,{value:e},a,o?r.createPortal(g,o):g))},s(e,[{key:"maxSnack",get:function(){return this.props.maxSnack||R.maxSnack}}]),e}(e.Component);exports.MaterialDesignContent=rn,exports.SnackbarContent=G,exports.SnackbarProvider=ln,exports.Transition=v,exports.useSnackbar=function(){return e.useContext(p)};
+ //# sourceMappingURL=notistack.cjs.production.min.js.map
+diff --git a/notistack.cjs.production.min.js.map b/notistack.cjs.production.min.js.map
+index f324d3827ce87bc37c229aa28f6489bddfc99917..5f3bb0644a4b44817081e00ea33f15f920982659 100644
+--- a/notistack.cjs.production.min.js.map
++++ b/notistack.cjs.production.min.js.map
+@@ -1 +1 @@
+-{"version":3,"file":"notistack.cjs.production.min.js","sources":["../src/SnackbarContext.ts","../src/utils/index.ts","../src/transitions/Transition/Transition.tsx","../src/transitions/useForkRef.ts","../src/transitions/getTransitionProps.ts","../src/transitions/utils.ts","../src/transitions/createTransition.ts","../src/transitions/Slide/Slide.tsx","../src/utils/defaultIconVariants.tsx","../src/SnackbarProvider/merger.ts","../src/utils/styles.ts","../src/transitions/Collapse/Collapse.tsx","../src/SnackbarItem/utils.ts","../src/utils/createChainedFunction.ts","../src/utils/useEventCallback.ts","../src/SnackbarItem/Snackbar.tsx","../src/SnackbarContent/SnackbarContent.tsx","../src/ui/MaterialDesignContent/MaterialDesignContent.tsx","../src/SnackbarItem/SnackbarItem.tsx","../src/SnackbarContainer/SnackbarContainer.tsx","../src/SnackbarProvider/SnackbarProvider.tsx","../src/useSnackbar.ts"],"sourcesContent":["import React from 'react';\nimport { ProviderContext } from './types';\n\nconst noOp = () => {\n    return '';\n};\n\nexport default React.createContext<ProviderContext>({\n    enqueueSnackbar: noOp,\n    closeSnackbar: noOp,\n});\n","import { InternalSnack } from '../types';\n\nexport const breakpoints = {\n    downXs: '@media (max-width:599.95px)',\n    upSm: '@media (min-width:600px)',\n};\n\nconst capitalise = (text: string): string => text.charAt(0).toUpperCase() + text.slice(1);\n\nexport const originKeyExtractor = (anchor: InternalSnack['anchorOrigin']): string =>\n    `${capitalise(anchor.vertical)}${capitalise(anchor.horizontal)}`;\n\nexport const isDefined = (value: string | null | undefined | number): boolean => !!value || value === 0;\n","/**\n * BSD 3-Clause License\n *\n * Copyright (c) 2018, React Community\n * Forked from React (https://github.com/facebook/react) Copyright 2013-present, Facebook, Inc.\n * All rights reserved.\n *\n * Redistribution and use in source and binary forms, with or without\n * modification, are permitted provided that the following conditions are met:\n *\n * * Redistributions of source code must retain the above copyright notice, this\n * list of conditions and the following disclaimer.\n *\n * * Redistributions in binary form must reproduce the above copyright notice,\n * this list of conditions and the following disclaimer in the documentation\n * and/or other materials provided with the distribution.\n *\n * * Neither the name of the copyright holder nor the names of its\n * contributors may be used to endorse or promote products derived from\n * this software without specific prior written permission.\n *\n * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\n * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\n * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\n * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE\n * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL\n * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR\n * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER\n * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,\n * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\n * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n */\nimport React from 'react';\nimport { TransitionComponentProps, TransitionStatus } from '../../types';\n\nconst UNMOUNTED = 'unmounted';\nconst EXITED = 'exited';\nconst ENTERING = 'entering';\nconst ENTERED = 'entered';\nconst EXITING = 'exiting';\n\ninterface State {\n    status: TransitionStatus;\n}\n\ninterface NextCallback {\n    (): void;\n    cancel?: () => void;\n}\n\nclass Transition extends React.Component<TransitionComponentProps, State> {\n    appearStatus: TransitionStatus | null;\n\n    nextCallback: NextCallback | null;\n\n    constructor(props: TransitionComponentProps) {\n        super(props);\n\n        const { appear } = props;\n\n        let initialStatus: TransitionStatus;\n\n        this.appearStatus = null;\n\n        if (props.in) {\n            if (appear) {\n                initialStatus = EXITED;\n                this.appearStatus = ENTERING;\n            } else {\n                initialStatus = ENTERED;\n            }\n        } else if (props.unmountOnExit || props.mountOnEnter) {\n            initialStatus = UNMOUNTED;\n        } else {\n            initialStatus = EXITED;\n        }\n\n        this.state = { status: initialStatus };\n\n        this.nextCallback = null;\n    }\n\n    static getDerivedStateFromProps({ in: nextIn }: TransitionComponentProps, prevState: State) {\n        if (nextIn && prevState.status === UNMOUNTED) {\n            return { status: EXITED };\n        }\n        return null;\n    }\n\n    componentDidMount() {\n        this.updateStatus(true, this.appearStatus);\n    }\n\n    componentDidUpdate(prevProps: TransitionComponentProps) {\n        let nextStatus: TransitionStatus | null = null;\n        if (prevProps !== this.props) {\n            const { status } = this.state;\n\n            if (this.props.in) {\n                if (status !== ENTERING && status !== ENTERED) {\n                    nextStatus = ENTERING;\n                }\n            } else if (status === ENTERING || status === ENTERED) {\n                nextStatus = EXITING;\n            }\n        }\n        this.updateStatus(false, nextStatus);\n    }\n\n    componentWillUnmount() {\n        this.cancelNextCallback();\n    }\n\n    getTimeouts(): { exit: number; enter: number } {\n        const { timeout } = this.props;\n        let enter = timeout;\n        let exit = timeout;\n\n        if (timeout != null && typeof timeout !== 'number' && typeof timeout !== 'string') {\n            exit = timeout.exit;\n            enter = timeout.enter;\n        }\n        return {\n            exit: exit as number,\n            enter: enter as number,\n        };\n    }\n\n    updateStatus(mounting = false, nextStatus: TransitionStatus | null) {\n        if (nextStatus !== null) {\n            this.cancelNextCallback();\n\n            if (nextStatus === ENTERING) {\n                this.performEnter(mounting);\n            } else {\n                this.performExit();\n            }\n        } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n            this.setState({ status: UNMOUNTED });\n        }\n    }\n\n    get node() {\n        const node = this.props.nodeRef?.current;\n        if (!node) {\n            throw new Error('notistack - Custom snackbar is not refForwarding');\n        }\n        return node;\n    }\n\n    performEnter(mounting: boolean) {\n        const { enter } = this.props;\n        const isAppearing = mounting;\n\n        const timeouts = this.getTimeouts();\n\n        if (!mounting && !enter) {\n            this.safeSetState({ status: ENTERED }, () => {\n                if (this.props.onEntered) {\n                    this.props.onEntered(this.node, isAppearing);\n                }\n            });\n            return;\n        }\n\n        if (this.props.onEnter) {\n            this.props.onEnter(this.node, isAppearing);\n        }\n\n        this.safeSetState({ status: ENTERING }, () => {\n            if (this.props.onEntering) {\n                this.props.onEntering(this.node, isAppearing);\n            }\n\n            this.onTransitionEnd(timeouts.enter, () => {\n                this.safeSetState({ status: ENTERED }, () => {\n                    if (this.props.onEntered) {\n                        this.props.onEntered(this.node, isAppearing);\n                    }\n                });\n            });\n        });\n    }\n\n    performExit() {\n        const { exit } = this.props;\n        const timeouts = this.getTimeouts();\n\n        // no exit animation skip right to EXITED\n        if (!exit) {\n            this.safeSetState({ status: EXITED }, () => {\n                if (this.props.onExited) {\n                    this.props.onExited(this.node);\n                }\n            });\n            return;\n        }\n\n        if (this.props.onExit) {\n            this.props.onExit(this.node);\n        }\n\n        this.safeSetState({ status: EXITING }, () => {\n            if (this.props.onExiting) {\n                this.props.onExiting(this.node);\n            }\n\n            this.onTransitionEnd(timeouts.exit, () => {\n                this.safeSetState({ status: EXITED }, () => {\n                    if (this.props.onExited) {\n                        this.props.onExited(this.node);\n                    }\n                });\n            });\n        });\n    }\n\n    cancelNextCallback() {\n        if (this.nextCallback !== null && this.nextCallback.cancel) {\n            this.nextCallback.cancel();\n            this.nextCallback = null;\n        }\n    }\n\n    safeSetState(nextState: State, callback: () => void) {\n        callback = this.setNextCallback(callback);\n        this.setState(nextState, callback);\n    }\n\n    setNextCallback(callback: () => void) {\n        let active = true;\n\n        this.nextCallback = () => {\n            if (active) {\n                active = false;\n                this.nextCallback = null;\n\n                callback();\n            }\n        };\n\n        (this.nextCallback as NextCallback).cancel = () => {\n            active = false;\n        };\n\n        return this.nextCallback;\n    }\n\n    onTransitionEnd(timeout: number, handler: () => void) {\n        this.setNextCallback(handler);\n        const doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n        if (!this.node || doesNotHaveTimeoutOrListener) {\n            setTimeout(this.nextCallback as NextCallback, 0);\n            return;\n        }\n\n        if (this.props.addEndListener) {\n            this.props.addEndListener(this.node, this.nextCallback as NextCallback);\n        }\n\n        if (timeout != null) {\n            setTimeout(this.nextCallback as NextCallback, timeout);\n        }\n    }\n\n    render() {\n        const { status } = this.state;\n\n        if (status === UNMOUNTED) {\n            return null;\n        }\n\n        const {\n            children,\n            // filter props for `Transition`\n            in: _in,\n            mountOnEnter: _mountOnEnter,\n            unmountOnExit: _unmountOnExit,\n            appear: _appear,\n            enter: _enter,\n            exit: _exit,\n            timeout: _timeout,\n            addEndListener: _addEndListener,\n            onEnter: _onEnter,\n            onEntering: _onEntering,\n            onEntered: _onEntered,\n            onExit: _onExit,\n            onExiting: _onExiting,\n            onExited: _onExited,\n            nodeRef: _nodeRef,\n            ...childProps\n        } = this.props;\n\n        return children(status, childProps);\n    }\n}\n\nfunction noop() {\n    //\n}\n\n(Transition as any).defaultProps = {\n    in: false,\n    mountOnEnter: false,\n    unmountOnExit: false,\n    appear: false,\n    enter: true,\n    exit: true,\n\n    onEnter: noop,\n    onEntering: noop,\n    onEntered: noop,\n\n    onExit: noop,\n    onExiting: noop,\n    onExited: noop,\n};\n\nexport default Transition;\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\n\n/**\n * passes {value} to {ref}\n *\n * Useful if you want to expose the ref of an inner component to the public API\n * while still using it inside the component.\n * @param ref A ref callback or ref object. If anything falsy, this is a no-op.\n */\nfunction setRef<T>(\n    ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,\n    value: T | null\n): void {\n    if (typeof ref === 'function') {\n        ref(value);\n    } else if (ref) {\n        ref.current = value;\n    }\n}\n\nexport default function useForkRef<Instance>(\n    refA: React.Ref<Instance> | null | undefined,\n    refB: React.Ref<Instance> | null | undefined\n): React.Ref<Instance> | null {\n    /**\n     * This will create a new function if the ref props change and are defined.\n     * This means react will call the old forkRef with `null` and the new forkRef\n     * with the ref. Cleanup naturally emerges from this behavior.\n     */\n    return React.useMemo(() => {\n        if (refA == null && refB == null) {\n            return null;\n        }\n        return (refValue) => {\n            setRef(refA, refValue);\n            setRef(refB, refValue);\n        };\n    }, [refA, refB]);\n}\n","import { TransitionDuration } from '../types';\n\ninterface ComponentProps {\n    style?: React.CSSProperties | undefined;\n    /**\n     * number: 400\n     * TransitionDuration: { enter: 200, exit: 400 }\n     */\n    timeout: number | TransitionDuration;\n    mode: 'enter' | 'exit';\n}\n\ninterface TransitionPropsReturnType {\n    duration: number;\n    easing: string | undefined;\n    delay: string | undefined;\n}\n\nexport default function getTransitionProps(props: ComponentProps): TransitionPropsReturnType {\n    const { timeout, style = {}, mode } = props;\n    return {\n        duration: typeof timeout === 'object' ? timeout[mode] || 0 : timeout,\n        easing: style.transitionTimingFunction,\n        delay: style.transitionDelay,\n    };\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nexport const defaultEasing = {\n    // This is the most common easing curve.\n    easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    // Objects enter the screen at full velocity from off-screen and\n    // slowly decelerate to a resting point.\n    easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',\n    // Objects leave the screen at full velocity. They do not decelerate when off-screen.\n    easeIn: 'cubic-bezier(0.4, 0, 1, 1)',\n    // The sharp curve is used by objects that may return to the screen at any time.\n    sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',\n};\n\n/**\n * CSS hack to force a repaint\n */\nexport const reflow = (node: Element): void => {\n    // We have to do something with node.scrollTop.\n    // Otherwise it's removed from the compiled code by optimisers\n    // eslint-disable-next-line no-self-assign\n    node.scrollTop = node.scrollTop;\n};\n","import { defaultEasing } from './utils';\n\ninterface CreateTransitionOptions {\n    duration: string | number;\n    easing?: string;\n    delay?: string | number;\n}\n\nconst formatMs = (milliseconds: number) => `${Math.round(milliseconds)}ms`;\n\nexport default function createTransition(\n    props: string | string[] = ['all'],\n    options?: CreateTransitionOptions\n): string {\n    const { duration = 300, easing = defaultEasing.easeInOut, delay = 0 } = options || {};\n\n    const properties = Array.isArray(props) ? props : [props];\n\n    return properties\n        .map((animatedProp) => {\n            const formattedDuration = typeof duration === 'string' ? duration : formatMs(duration);\n            const formattedDelay = typeof delay === 'string' ? delay : formatMs(delay);\n            return `${animatedProp} ${formattedDuration} ${easing} ${formattedDelay}`;\n        })\n        .join(',');\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport TransitionComponent from '../Transition';\nimport useForkRef from '../useForkRef';\nimport getTransitionProps from '../getTransitionProps';\nimport createTransition from '../createTransition';\nimport { defaultEasing, reflow } from '../utils';\nimport { SlideTransitionDirection, TransitionProps } from '../../types';\n\nfunction ownerDocument(node: Node | null | undefined): Document {\n    return (node && node.ownerDocument) || document;\n}\n\nfunction ownerWindow(node: Node | null): Window {\n    const doc = ownerDocument(node);\n    return doc.defaultView || window;\n}\n\n/**\n * Corresponds to 10 frames at 60 Hz.\n * A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.\n */\nfunction debounce(func: () => void, wait = 166) {\n    let timeout: ReturnType<typeof setTimeout>;\n    function debounced(...args: any[]) {\n        const later = () => {\n            // @ts-ignore\n            func.apply(this, args);\n        };\n        clearTimeout(timeout);\n        timeout = setTimeout(later, wait);\n    }\n\n    debounced.clear = () => {\n        clearTimeout(timeout);\n    };\n\n    return debounced;\n}\n\n/**\n * Translate the node so it can't be seen on the screen.\n * Later, we're going to translate the node back to its original location with `none`.\n */\nfunction getTranslateValue(\n    direction: SlideTransitionDirection,\n    node: HTMLElement & { fakeTransform?: string }\n): string {\n    const rect = node.getBoundingClientRect();\n    const containerWindow = ownerWindow(node);\n    let transform;\n\n    if (node.fakeTransform) {\n        transform = node.fakeTransform;\n    } else {\n        const computedStyle = containerWindow.getComputedStyle(node);\n        transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');\n    }\n\n    let offsetX = 0;\n    let offsetY = 0;\n\n    if (transform && transform !== 'none' && typeof transform === 'string') {\n        const transformValues = transform.split('(')[1].split(')')[0].split(',');\n        offsetX = parseInt(transformValues[4], 10);\n        offsetY = parseInt(transformValues[5], 10);\n    }\n\n    switch (direction) {\n        case 'left':\n            return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;\n        case 'right':\n            return `translateX(-${rect.left + rect.width - offsetX}px)`;\n        case 'up':\n            return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;\n        default:\n            // down\n            return `translateY(-${rect.top + rect.height - offsetY}px)`;\n    }\n}\n\nfunction setTranslateValue(direction: SlideTransitionDirection, node: HTMLElement | null): void {\n    if (!node) return;\n    const transform = getTranslateValue(direction, node);\n    if (transform) {\n        node.style.webkitTransform = transform;\n        node.style.transform = transform;\n    }\n}\n\nconst Slide = React.forwardRef<unknown, TransitionProps>((props, ref) => {\n    const {\n        children,\n        direction = 'down',\n        in: inProp,\n        style,\n        timeout = 0,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        ...other\n    } = props;\n\n    const nodeRef = React.useRef(null);\n    const handleRefIntermediary = useForkRef((children as any).ref, nodeRef);\n    const handleRef = useForkRef(handleRefIntermediary, ref);\n\n    const handleEnter: TransitionProps['onEnter'] = (node, isAppearing) => {\n        setTranslateValue(direction, node);\n        reflow(node);\n\n        if (onEnter) {\n            onEnter(node, isAppearing);\n        }\n    };\n\n    const handleEntering = (node: HTMLElement) => {\n        const easing = style?.transitionTimingFunction || defaultEasing.easeOut;\n        const transitionProps = getTransitionProps({\n            timeout,\n            mode: 'enter',\n            style: { ...style, transitionTimingFunction: easing },\n        });\n\n        node.style.webkitTransition = createTransition('-webkit-transform', transitionProps);\n        node.style.transition = createTransition('transform', transitionProps);\n\n        node.style.webkitTransform = 'none';\n        node.style.transform = 'none';\n    };\n\n    const handleExit: TransitionProps['onExit'] = (node) => {\n        const easing = style?.transitionTimingFunction || defaultEasing.sharp;\n        const transitionProps = getTransitionProps({\n            timeout,\n            mode: 'exit',\n            style: { ...style, transitionTimingFunction: easing },\n        });\n\n        node.style.webkitTransition = createTransition('-webkit-transform', transitionProps);\n        node.style.transition = createTransition('transform', transitionProps);\n\n        setTranslateValue(direction, node);\n\n        if (onExit) {\n            onExit(node);\n        }\n    };\n\n    const handleExited: TransitionProps['onExited'] = (node) => {\n        // No need for transitions when the component is hidden\n        node.style.webkitTransition = '';\n        node.style.transition = '';\n\n        if (onExited) {\n            onExited(node);\n        }\n    };\n\n    const updatePosition = React.useCallback(() => {\n        if (nodeRef.current) {\n            setTranslateValue(direction, nodeRef.current);\n        }\n    }, [direction]);\n\n    React.useEffect(() => {\n        // Skip configuration where the position is screen size invariant.\n        if (inProp || direction === 'down' || direction === 'right') {\n            return undefined;\n        }\n\n        const handleResize = debounce(() => {\n            if (nodeRef.current) {\n                setTranslateValue(direction, nodeRef.current);\n            }\n        });\n\n        const containerWindow = ownerWindow(nodeRef.current);\n        containerWindow.addEventListener('resize', handleResize);\n        return () => {\n            handleResize.clear();\n            containerWindow.removeEventListener('resize', handleResize);\n        };\n    }, [direction, inProp]);\n\n    React.useEffect(() => {\n        if (!inProp) {\n            // We need to update the position of the drawer when the direction change and\n            // when it's hidden.\n            updatePosition();\n        }\n    }, [inProp, updatePosition]);\n\n    return (\n        <TransitionComponent\n            appear\n            nodeRef={nodeRef}\n            onEnter={handleEnter}\n            onEntered={onEntered}\n            onEntering={handleEntering}\n            onExit={handleExit}\n            onExited={handleExited}\n            in={inProp}\n            timeout={timeout}\n            {...other}\n        >\n            {(state, childProps) =>\n                React.cloneElement(children as any, {\n                    ref: handleRef,\n                    style: {\n                        visibility: state === 'exited' && !inProp ? 'hidden' : undefined,\n                        ...style,\n                        ...(children as any).props.style,\n                    },\n                    ...childProps,\n                })\n            }\n        </TransitionComponent>\n    );\n});\n\nSlide.displayName = 'Slide';\n\nexport default Slide;\n","import React from 'react';\n\nconst SvgIcon = (props: { children: JSX.Element }) => (\n    <svg\n        viewBox=\"0 0 24 24\"\n        focusable=\"false\"\n        style={{\n            fontSize: 20,\n            marginInlineEnd: 8,\n            userSelect: 'none',\n            width: '1em',\n            height: '1em',\n            display: 'inline-block',\n            fill: 'currentColor',\n            flexShrink: 0,\n        }}\n        {...props}\n    />\n);\n\nconst CheckIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z\"\n        />\n    </SvgIcon>\n);\n\nconst WarningIcon: React.FC = () => (\n    <SvgIcon>\n        <path d=\"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z\" />\n    </SvgIcon>\n);\n\nconst ErrorIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z\"\n        />\n    </SvgIcon>\n);\n\nconst InfoIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z\"\n        />\n    </SvgIcon>\n);\n\nconst defaultIconVariants: Record<string, React.ReactNode> = {\n    default: undefined,\n    success: <CheckIcon />,\n    warning: <WarningIcon />,\n    error: <ErrorIcon />,\n    info: <InfoIcon />,\n};\n\nexport default defaultIconVariants;\n","import Slide from '../transitions/Slide';\nimport defaultIconVariants from '../utils/defaultIconVariants';\nimport { InternalSnack } from '../types';\n\nexport const defaults = {\n    maxSnack: 3,\n    persist: false,\n    hideIconVariant: false,\n    disableWindowBlurListener: false,\n    variant: 'default',\n    autoHideDuration: 5000,\n    iconVariant: defaultIconVariants,\n    anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n    TransitionComponent: Slide,\n    transitionDuration: {\n        enter: 225,\n        exit: 195,\n    },\n};\n\n/**\n * Derives the right autoHideDuration taking into account the following\n * prority order: 1: Options, 2: Props, 3: default fallback\n */\nconst getAutoHideDuration = (optionsDuration: any, propsDuration: any) => {\n    const isNumberOrNull = (numberish: number | null) => typeof numberish === 'number' || numberish === null;\n\n    if (isNumberOrNull(optionsDuration)) return optionsDuration;\n    if (isNumberOrNull(propsDuration)) return propsDuration;\n    return defaults.autoHideDuration;\n};\n\n/**\n * Derives the right transitionDuration taking into account the following\n * prority order: 1: Options, 2: Props, 3: default fallback\n */\nconst getTransitionDuration = (optionsDuration: any, propsDuration: any) => {\n    const is = (item: any, types: string[]) => types.some((t) => typeof item === t);\n\n    if (is(optionsDuration, ['string', 'number'])) {\n        return optionsDuration;\n    }\n\n    if (is(optionsDuration, ['object'])) {\n        return {\n            ...defaults.transitionDuration,\n            ...(is(propsDuration, ['object']) && propsDuration),\n            ...optionsDuration,\n        };\n    }\n\n    if (is(propsDuration, ['string', 'number'])) {\n        return propsDuration;\n    }\n\n    if (is(propsDuration, ['object'])) {\n        return {\n            ...defaults.transitionDuration,\n            ...propsDuration,\n        };\n    }\n\n    return defaults.transitionDuration;\n};\n\nexport const merge =\n    (options: any, props: any) =>\n    (name: keyof InternalSnack, shouldObjectMerge = false): any => {\n        if (shouldObjectMerge) {\n            return {\n                ...(defaults as any)[name],\n                ...props[name],\n                ...options[name],\n            };\n        }\n\n        if (name === 'autoHideDuration') {\n            return getAutoHideDuration(options.autoHideDuration, props.autoHideDuration);\n        }\n\n        if (name === 'transitionDuration') {\n            return getTransitionDuration(options.transitionDuration, props.transitionDuration);\n        }\n\n        return options[name] || props[name] || (defaults as any)[name];\n    };\n","import { css, CSSAttribute } from 'goober';\n\nexport function makeStyles<S extends { [key: string]: CSSAttribute }, K extends keyof S>(\n    styles: S\n): { [key in K]: string } {\n    return Object.entries(styles).reduce(\n        (acc, [key, value]) => ({\n            ...acc,\n            [key]: css(value),\n        }),\n        {} as { [key in K]: string }\n    );\n}\n\nexport const ComponentClasses = {\n    SnackbarContainer: 'notistack-SnackbarContainer',\n    Snackbar: 'notistack-Snackbar',\n    CollapseWrapper: 'notistack-CollapseWrapper',\n    MuiContent: 'notistack-MuiContent',\n    MuiContentVariant: (variant: string) => `notistack-MuiContent-${variant}`,\n};\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport { reflow } from '../utils';\nimport TransitionComponent from '../Transition';\nimport useForkRef from '../useForkRef';\nimport { TransitionProps } from '../../types';\nimport getTransitionProps from '../getTransitionProps';\nimport createTransition from '../createTransition';\nimport { ComponentClasses, makeStyles } from '../../utils/styles';\n\nconst classes = makeStyles({\n    root: {\n        height: 0,\n    },\n    entered: {\n        height: 'auto',\n    },\n});\n\nconst collapsedSize = '0px';\nconst timeout = 175;\n\ninterface CollapseProps {\n    children: JSX.Element;\n    in: boolean;\n    onExited: TransitionProps['onExited'];\n}\n\nconst Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {\n    const { children, in: inProp, onExited } = props;\n\n    const wrapperRef = React.useRef<HTMLDivElement>(null);\n\n    const nodeRef = React.useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, nodeRef);\n\n    const getWrapperSize = () => (wrapperRef.current ? wrapperRef.current.clientHeight : 0);\n\n    const handleEnter: TransitionProps['onEnter'] = (node) => {\n        node.style.height = collapsedSize;\n    };\n\n    const handleEntering = (node: HTMLElement) => {\n        const wrapperSize = getWrapperSize();\n\n        const { duration: transitionDuration, easing } = getTransitionProps({\n            timeout,\n            mode: 'enter',\n        });\n\n        node.style.transitionDuration =\n            typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n\n        node.style.height = `${wrapperSize}px`;\n        node.style.transitionTimingFunction = easing || '';\n    };\n\n    const handleEntered: TransitionProps['onEntered'] = (node) => {\n        node.style.height = 'auto';\n    };\n\n    const handleExit: TransitionProps['onExit'] = (node) => {\n        node.style.height = `${getWrapperSize()}px`;\n    };\n\n    const handleExiting = (node: HTMLElement) => {\n        reflow(node);\n\n        const { duration: transitionDuration, easing } = getTransitionProps({\n            timeout,\n            mode: 'exit',\n        });\n\n        node.style.transitionDuration =\n            typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n        node.style.height = collapsedSize;\n        node.style.transitionTimingFunction = easing || '';\n    };\n\n    return (\n        <TransitionComponent\n            in={inProp}\n            unmountOnExit\n            onEnter={handleEnter}\n            onEntered={handleEntered}\n            onEntering={handleEntering}\n            onExit={handleExit}\n            onExited={onExited}\n            onExiting={handleExiting}\n            nodeRef={nodeRef}\n            timeout={timeout}\n        >\n            {(state, childProps) => (\n                <div\n                    ref={handleRef}\n                    className={clsx(classes.root, { [classes.entered]: state === 'entered' })}\n                    style={{\n                        pointerEvents: 'all',\n                        overflow: 'hidden',\n                        minHeight: collapsedSize,\n                        transition: createTransition('height'),\n                        ...(state === 'entered' && {\n                            overflow: 'visible',\n                        }),\n                        ...(state === 'exited' &&\n                            !inProp && {\n                                visibility: 'hidden',\n                            }),\n                    }}\n                    {...childProps}\n                >\n                    <div\n                        ref={wrapperRef}\n                        className={ComponentClasses.CollapseWrapper}\n                        // Hack to get children with a negative margin to not falsify the height computation.\n                        style={{ display: 'flex', width: '100%' }}\n                    >\n                        {children}\n                    </div>\n                </div>\n            )}\n        </TransitionComponent>\n    );\n});\n\nCollapse.displayName = 'Collapse';\n\nexport default Collapse;\n","import {\n    InternalSnack,\n    SlideTransitionDirection,\n    SnackbarOrigin,\n    SnackbarClassKey,\n    SnackbarProviderProps,\n    ClassNameMap,\n    ContainerClassKey,\n} from '../types';\nimport { originKeyExtractor } from '../utils';\n\nconst direction: Record<string, SlideTransitionDirection> = {\n    right: 'left',\n    left: 'right',\n    bottom: 'up',\n    top: 'down',\n};\n\nexport const getSlideDirection = (anchorOrigin: InternalSnack['anchorOrigin']): SlideTransitionDirection => {\n    if (anchorOrigin.horizontal !== 'center') {\n        return direction[anchorOrigin.horizontal];\n    }\n    return direction[anchorOrigin.vertical];\n};\n\n/** Tranforms classes name */\nexport const toSnackbarAnchorOrigin = (anchorOrigin: SnackbarOrigin): SnackbarClassKey =>\n    `anchorOrigin${originKeyExtractor(anchorOrigin)}` as SnackbarClassKey;\n\n/**\n * Omit SnackbarContainer class keys that are not needed for SnackbarItem\n */\nexport const keepSnackbarClassKeys = (\n    classes: SnackbarProviderProps['classes'] = {}\n): Partial<ClassNameMap<SnackbarClassKey>> => {\n    const containerClasses: Record<ContainerClassKey, true> = {\n        containerRoot: true,\n        containerAnchorOriginTopCenter: true,\n        containerAnchorOriginBottomCenter: true,\n        containerAnchorOriginTopRight: true,\n        containerAnchorOriginBottomRight: true,\n        containerAnchorOriginTopLeft: true,\n        containerAnchorOriginBottomLeft: true,\n    };\n    return (Object.keys(classes) as ContainerClassKey[])\n        .filter((key) => !containerClasses[key])\n        .reduce((obj, key) => ({ ...obj, [key]: classes[key] }), {});\n};\n","import { SnackbarKey } from 'src/types';\n\nconst noOp = () => {\n    /* */\n};\n\n/**\n * Credit to MUI team @ https://mui.com\n * Safe chained function.\n *\n * Will only create a new function if needed,\n * otherwise will pass back existing functions or null.\n */\nexport default function createChainedFunction<Args extends any[], This>(\n    funcs: Array<((this: This, ...args: Args) => any) | undefined>,\n    snackbarId?: SnackbarKey\n): (this: This, ...args: Args) => void {\n    // @ts-ignore\n    return funcs.reduce((acc, func) => {\n        if (func === null || func === undefined) {\n            return acc;\n        }\n\n        return function chainedFunction(...args) {\n            const argums = [...args] as any;\n            if (snackbarId && argums.indexOf(snackbarId) === -1) {\n                argums.push(snackbarId);\n            }\n            // @ts-ignore\n            acc.apply(this, argums);\n            func.apply(this, argums);\n        };\n    }, noOp);\n}\n","/**\n * Credit to MUI team @ https://mui.com\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nimport * as React from 'react';\n\nconst useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\nexport default function useEventCallback<Args extends unknown[], Return>(\n    fn: (...args: Args) => Return\n): (...args: Args) => Return {\n    const ref = React.useRef(fn);\n    useEnhancedEffect(() => {\n        ref.current = fn;\n    });\n    return React.useCallback(\n        (...args: Args) =>\n            // @ts-expect-error hide `this`\n            (0, ref.current)(...args),\n        []\n    );\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport useEventCallback from '../utils/useEventCallback';\nimport { CloseReason, SharedProps, SnackbarKey } from '../types';\nimport { ComponentClasses } from '../utils/styles';\n\ninterface SnackbarProps extends Required<Pick<SharedProps, 'disableWindowBlurListener' | 'onClose'>> {\n    open: boolean;\n    id: SnackbarKey;\n    className: string;\n    children: JSX.Element;\n    autoHideDuration: number | null | undefined;\n    SnackbarProps: SharedProps['SnackbarProps'];\n}\n\nconst Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>((props, ref) => {\n    const {\n        children,\n        className,\n        autoHideDuration,\n        disableWindowBlurListener = false,\n        onClose,\n        id,\n        open,\n        SnackbarProps = {},\n    } = props;\n\n    const timerAutoHide = React.useRef<ReturnType<typeof setTimeout>>();\n\n    const handleClose = useEventCallback((...args: [null, CloseReason, SnackbarKey]) => {\n        if (onClose) {\n            onClose(...args);\n        }\n    });\n\n    const setAutoHideTimer = useEventCallback((autoHideDurationParam?: number | null) => {\n        if (!onClose || autoHideDurationParam == null) {\n            return;\n        }\n\n        if (timerAutoHide.current) {\n            clearTimeout(timerAutoHide.current);\n        }\n        timerAutoHide.current = setTimeout(() => {\n            handleClose(null, 'timeout', id);\n        }, autoHideDurationParam);\n    });\n\n    React.useEffect(() => {\n        if (open) {\n            setAutoHideTimer(autoHideDuration);\n        }\n\n        return () => {\n            if (timerAutoHide.current) {\n                clearTimeout(timerAutoHide.current);\n            }\n        };\n    }, [open, autoHideDuration, setAutoHideTimer]);\n\n    /**\n     * Pause the timer when the user is interacting with the Snackbar\n     * or when the user hide the window.\n     */\n    const handlePause = () => {\n        if (timerAutoHide.current) {\n            clearTimeout(timerAutoHide.current);\n        }\n    };\n\n    /**\n     * Restart the timer when the user is no longer interacting with the Snackbar\n     * or when the window is shown back.\n     */\n    const handleResume = React.useCallback(() => {\n        if (autoHideDuration != null) {\n            setAutoHideTimer(autoHideDuration * 0.5);\n        }\n    }, [autoHideDuration, setAutoHideTimer]);\n\n    const handleMouseEnter: React.MouseEventHandler<HTMLDivElement> = (event) => {\n        if (SnackbarProps.onMouseEnter) {\n            SnackbarProps.onMouseEnter(event);\n        }\n        handlePause();\n    };\n\n    const handleMouseLeave: React.MouseEventHandler<HTMLDivElement> = (event) => {\n        if (SnackbarProps.onMouseLeave) {\n            SnackbarProps.onMouseLeave(event);\n        }\n        handleResume();\n    };\n\n    React.useEffect(() => {\n        if (!disableWindowBlurListener && open) {\n            window.addEventListener('focus', handleResume);\n            window.addEventListener('blur', handlePause);\n\n            return () => {\n                window.removeEventListener('focus', handleResume);\n                window.removeEventListener('blur', handlePause);\n            };\n        }\n\n        return undefined;\n    }, [disableWindowBlurListener, handleResume, open]);\n\n    return (\n        <div\n            ref={ref}\n            {...SnackbarProps}\n            className={clsx(ComponentClasses.Snackbar, className)}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n        >\n            {children}\n        </div>\n    );\n});\n\nSnackbar.displayName = 'Snackbar';\n\nexport default Snackbar;\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SnackbarContentProps } from '../types';\nimport { breakpoints } from '../utils';\nimport { makeStyles } from '../utils/styles';\n\nconst classes = makeStyles({\n    root: {\n        display: 'flex',\n        flexWrap: 'wrap',\n        flexGrow: 1,\n        [breakpoints.upSm]: {\n            flexGrow: 'initial',\n            minWidth: '288px',\n        },\n    },\n});\n\nconst SnackbarContent = forwardRef<HTMLDivElement, SnackbarContentProps>(({ className, ...props }, ref) => (\n    <div ref={ref} className={clsx(classes.root, className)} {...props} />\n));\n\nSnackbarContent.displayName = 'SnackbarContent';\n\nexport default SnackbarContent;\n","import React, { memo, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport SnackbarContent from '../../SnackbarContent';\nimport { CustomContentProps } from '../../types';\nimport { ComponentClasses, makeStyles } from '../../utils/styles';\n\nconst classes = makeStyles({\n    root: {\n        backgroundColor: '#313131', // dark grey\n        fontSize: '0.875rem',\n        lineHeight: 1.43,\n        letterSpacing: '0.01071em',\n        color: '#fff',\n        alignItems: 'center',\n        padding: '6px 16px',\n        borderRadius: '4px',\n        boxShadow:\n            '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',\n    },\n    lessPadding: {\n        paddingLeft: `${8 * 2.5}px`,\n    },\n    default: {\n        backgroundColor: '#313131', // dark grey\n    },\n    success: {\n        backgroundColor: '#43a047', // green\n    },\n    error: {\n        backgroundColor: '#d32f2f', // dark red\n    },\n    warning: {\n        backgroundColor: '#ff9800', // amber\n    },\n    info: {\n        backgroundColor: '#2196f3', // nice blue\n    },\n    message: {\n        display: 'flex',\n        alignItems: 'center',\n        padding: '8px 0',\n    },\n    action: {\n        display: 'flex',\n        alignItems: 'center',\n        marginLeft: 'auto',\n        paddingLeft: '16px',\n        marginRight: '-8px',\n    },\n});\n\nconst ariaDescribedby = 'notistack-snackbar';\n\nconst MaterialDesignContent = forwardRef<HTMLDivElement, CustomContentProps>((props, forwardedRef) => {\n    const {\n        id,\n        message,\n        action: componentOrFunctionAction,\n        iconVariant,\n        variant,\n        hideIconVariant,\n        style,\n        className,\n    } = props;\n\n    const icon = iconVariant[variant];\n\n    let action = componentOrFunctionAction;\n    if (typeof action === 'function') {\n        action = action(id);\n    }\n\n    return (\n        <SnackbarContent\n            ref={forwardedRef}\n            role=\"alert\"\n            aria-describedby={ariaDescribedby}\n            style={style}\n            className={clsx(\n                ComponentClasses.MuiContent,\n                ComponentClasses.MuiContentVariant(variant),\n                classes.root,\n                { [classes.lessPadding]: !hideIconVariant && icon },\n                classes[variant],\n                className\n            )}\n        >\n            <div id={ariaDescribedby} className={classes.message}>\n                {!hideIconVariant ? icon : null}\n                {message}\n            </div>\n            {action && <div className={classes.action}>{action}</div>}\n        </SnackbarContent>\n    );\n});\n\nMaterialDesignContent.displayName = 'MaterialDesignContent';\n\nexport default memo(MaterialDesignContent);\n","import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';\nimport clsx from 'clsx';\nimport Collapse from '../transitions/Collapse';\nimport { getSlideDirection, toSnackbarAnchorOrigin, keepSnackbarClassKeys } from './utils';\nimport {\n    TransitionHandlerProps,\n    SnackbarProviderProps,\n    CustomContentProps,\n    InternalSnack,\n    SharedProps,\n} from '../types';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport Snackbar from './Snackbar';\nimport { makeStyles } from '../utils/styles';\nimport MaterialDesignContent from '../ui/MaterialDesignContent';\n\nconst styles = makeStyles({\n    wrappedRoot: {\n        width: '100%',\n        position: 'relative',\n        transform: 'translateX(0)',\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n        minWidth: '288px',\n    },\n});\n\ninterface SnackbarItemProps extends Required<Pick<SnackbarProviderProps, 'onEntered' | 'onExited' | 'onClose'>> {\n    snack: InternalSnack;\n    classes: SnackbarProviderProps['classes'];\n    onEnter: SnackbarProviderProps['onEnter'];\n    onExit: SnackbarProviderProps['onExit'];\n    Component?: React.ComponentType<CustomContentProps>;\n}\n\nconst SnackbarItem: React.FC<SnackbarItemProps> = (props) => {\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n    const [collapsed, setCollapsed] = useState(true);\n\n    const handleClose: NonNullable<SharedProps['onClose']> = createChainedFunction([\n        props.snack.onClose,\n        props.onClose,\n    ]);\n\n    const handleEntered: TransitionHandlerProps['onEntered'] = () => {\n        if (props.snack.requestClose) {\n            handleClose(null, 'instructed', props.snack.id);\n        }\n    };\n\n    const handleExitedScreen = useCallback((): void => {\n        timeout.current = setTimeout(() => {\n            setCollapsed((col) => !col);\n        }, 125);\n    }, []);\n\n    useEffect(\n        () => (): void => {\n            if (timeout.current) {\n                clearTimeout(timeout.current);\n            }\n        },\n        []\n    );\n\n    const { snack, classes: allClasses, Component = MaterialDesignContent } = props;\n\n    const classes = useMemo(() => keepSnackbarClassKeys(allClasses), [allClasses]);\n\n    const {\n        open,\n        SnackbarProps,\n        TransitionComponent,\n        TransitionProps,\n        transitionDuration,\n        disableWindowBlurListener,\n        content: componentOrFunctionContent,\n        entered: ignoredEntered,\n        requestClose: ignoredRequestClose,\n        onEnter: ignoreOnEnter,\n        onEntered: ignoreOnEntered,\n        onExit: ignoreOnExit,\n        onExited: ignoreOnExited,\n        ...otherSnack\n    } = snack;\n\n    const transitionProps = {\n        direction: getSlideDirection(otherSnack.anchorOrigin),\n        timeout: transitionDuration,\n        ...TransitionProps,\n    };\n\n    let content = componentOrFunctionContent;\n    if (typeof content === 'function') {\n        content = content(otherSnack.id, otherSnack.message);\n    }\n\n    const callbacks: { [key in keyof TransitionHandlerProps]?: any } = (\n        ['onEnter', 'onEntered', 'onExit', 'onExited'] as (keyof TransitionHandlerProps)[]\n    ).reduce(\n        (acc, cbName) => ({\n            ...acc,\n            [cbName]: createChainedFunction([props.snack[cbName] as any, props[cbName] as any], otherSnack.id),\n        }),\n        {}\n    );\n\n    return (\n        <Collapse in={collapsed} onExited={callbacks.onExited}>\n            <Snackbar\n                open={open}\n                id={otherSnack.id}\n                disableWindowBlurListener={disableWindowBlurListener}\n                autoHideDuration={otherSnack.autoHideDuration}\n                className={clsx(\n                    styles.wrappedRoot,\n                    classes.root,\n                    classes[toSnackbarAnchorOrigin(otherSnack.anchorOrigin)]\n                )}\n                SnackbarProps={SnackbarProps}\n                onClose={handleClose}\n            >\n                <TransitionComponent\n                    {...transitionProps}\n                    appear\n                    in={open}\n                    onExit={callbacks.onExit}\n                    onExited={handleExitedScreen}\n                    onEnter={callbacks.onEnter}\n                    // order matters. first callbacks.onEntered to set entered: true,\n                    // then handleEntered to check if there's a request for closing\n                    onEntered={createChainedFunction([callbacks.onEntered, handleEntered], otherSnack.id)}\n                >\n                    {(content as React.ReactElement) || <Component {...otherSnack} />}\n                </TransitionComponent>\n            </Snackbar>\n        </Collapse>\n    );\n};\n\nexport default SnackbarItem;\n","import React, { memo } from 'react';\nimport clsx from 'clsx';\nimport createTransition from '../transitions/createTransition';\nimport { makeStyles, ComponentClasses } from '../utils/styles';\nimport { breakpoints, originKeyExtractor } from '../utils';\nimport { ContainerClassKey, SnackbarProviderProps } from '../types';\n\nconst indents = {\n    view: { default: 20, dense: 4 },\n    snackbar: { default: 6, dense: 2 },\n};\n\nconst collapseWrapper = `.${ComponentClasses.CollapseWrapper}`;\n\nconst xsWidthMargin = 16;\n\nconst styles = makeStyles({\n    root: {\n        boxSizing: 'border-box',\n        display: 'flex',\n        maxHeight: '100%',\n        position: 'fixed',\n        zIndex: 1400,\n        height: 'auto',\n        width: 'auto',\n        transition: createTransition(['top', 'right', 'bottom', 'left', 'max-width'], {\n            duration: 300,\n            easing: 'ease',\n        }),\n        // container itself is invisible and should not block clicks, clicks should be passed to its children\n        // a pointerEvents: all is applied in the collapse component\n        pointerEvents: 'none',\n        [collapseWrapper]: {\n            padding: `${indents.snackbar.default}px 0px`,\n            transition: 'padding 300ms ease 0ms',\n        },\n        maxWidth: `calc(100% - ${indents.view.default * 2}px)`,\n        [breakpoints.downXs]: {\n            width: '100%',\n            maxWidth: `calc(100% - ${xsWidthMargin * 2}px)`,\n        },\n    },\n    rootDense: {\n        [collapseWrapper]: {\n            padding: `${indents.snackbar.dense}px 0px`,\n        },\n    },\n    top: {\n        top: `${indents.view.default - indents.snackbar.default}px`,\n        flexDirection: 'column',\n    },\n    bottom: {\n        bottom: `${indents.view.default - indents.snackbar.default}px`,\n        flexDirection: 'column-reverse',\n    },\n    left: {\n        left: `${indents.view.default}px`,\n        [breakpoints.upSm]: {\n            alignItems: 'flex-start',\n        },\n        [breakpoints.downXs]: {\n            left: `${xsWidthMargin}px`,\n        },\n    },\n    right: {\n        right: `${indents.view.default}px`,\n        [breakpoints.upSm]: {\n            alignItems: 'flex-end',\n        },\n        [breakpoints.downXs]: {\n            right: `${xsWidthMargin}px`,\n        },\n    },\n    center: {\n        left: '50%',\n        transform: 'translateX(-50%)',\n        [breakpoints.upSm]: {\n            alignItems: 'center',\n        },\n    },\n});\n\ninterface SnackbarContainerProps {\n    children: React.ReactNode;\n    dense: SnackbarProviderProps['dense'];\n    anchorOrigin: NonNullable<SnackbarProviderProps['anchorOrigin']>;\n    classes: SnackbarProviderProps['classes'];\n}\n\nconst SnackbarContainer: React.FC<SnackbarContainerProps> = (props) => {\n    const { classes = {}, anchorOrigin, dense, children } = props;\n\n    const combinedClassname = clsx(\n        ComponentClasses.SnackbarContainer,\n        styles[anchorOrigin.vertical],\n        styles[anchorOrigin.horizontal],\n        { [styles.rootDense]: dense },\n        styles.root, // root should come after others to override maxWidth\n        classes.containerRoot,\n        classes[`containerAnchorOrigin${originKeyExtractor(anchorOrigin)}` as ContainerClassKey]\n    );\n\n    return <div className={combinedClassname}>{children}</div>;\n};\n\nexport default memo(SnackbarContainer);\n","import React, { Component, isValidElement } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport SnackbarContext from '../SnackbarContext';\nimport { originKeyExtractor, isDefined } from '../utils';\nimport { defaults, merge } from './merger';\nimport SnackbarItem from '../SnackbarItem';\nimport SnackbarContainer from '../SnackbarContainer';\nimport warning from '../utils/warning';\nimport {\n    SnackbarProviderProps,\n    SnackbarKey,\n    ProviderContext,\n    TransitionHandlerProps,\n    InternalSnack,\n    OptionsObject,\n    SharedProps,\n    SnackbarMessage,\n} from '../types';\nimport createChainedFunction from '../utils/createChainedFunction';\n\nconst isOptions = (\n    messageOrOptions: SnackbarMessage | (OptionsObject & { message?: SnackbarMessage })\n): messageOrOptions is OptionsObject & { message?: SnackbarMessage } => {\n    const isMessage = typeof messageOrOptions === 'string' || isValidElement(messageOrOptions);\n    return !isMessage;\n};\n\ntype Reducer = (state: State) => State;\ntype SnacksByPosition = { [key: string]: InternalSnack[] };\n\ninterface State {\n    snacks: InternalSnack[];\n    queue: InternalSnack[];\n    contextValue: ProviderContext;\n}\n\nexport let enqueueSnackbar: ProviderContext['enqueueSnackbar'];\nexport let closeSnackbar: ProviderContext['closeSnackbar'];\n\nclass SnackbarProvider extends Component<SnackbarProviderProps, State> {\n    constructor(props: SnackbarProviderProps) {\n        super(props);\n        enqueueSnackbar = this.enqueueSnackbar;\n        closeSnackbar = this.closeSnackbar;\n\n        this.state = {\n            snacks: [],\n            queue: [],\n            contextValue: {\n                enqueueSnackbar: this.enqueueSnackbar.bind(this),\n                closeSnackbar: this.closeSnackbar.bind(this),\n            },\n        };\n    }\n\n    get maxSnack(): number {\n        return this.props.maxSnack || defaults.maxSnack;\n    }\n\n    /**\n     * Adds a new snackbar to the queue to be presented.\n     * Returns generated or user defined key referencing the new snackbar or null\n     */\n    enqueueSnackbar = (\n        messageOrOptions: SnackbarMessage | (OptionsObject & { message?: SnackbarMessage }),\n        optsOrUndefined: OptionsObject = {}\n    ): SnackbarKey => {\n        if (messageOrOptions === undefined || messageOrOptions === null) {\n            throw new Error('enqueueSnackbar called with invalid argument');\n        }\n\n        const opts = isOptions(messageOrOptions) ? messageOrOptions : optsOrUndefined;\n\n        const message: SnackbarMessage | undefined = isOptions(messageOrOptions)\n            ? messageOrOptions.message\n            : messageOrOptions;\n\n        const { key, preventDuplicate, ...options } = opts;\n\n        const hasSpecifiedKey = isDefined(key);\n        const id = hasSpecifiedKey ? (key as SnackbarKey) : new Date().getTime() + Math.random();\n\n        const merger = merge(options, this.props);\n        const snack: InternalSnack = {\n            id,\n            ...options,\n            message,\n            open: true,\n            entered: false,\n            requestClose: false,\n            persist: merger('persist'),\n            action: merger('action'),\n            content: merger('content'),\n            variant: merger('variant'),\n            anchorOrigin: merger('anchorOrigin'),\n            disableWindowBlurListener: merger('disableWindowBlurListener'),\n            autoHideDuration: merger('autoHideDuration'),\n            hideIconVariant: merger('hideIconVariant'),\n            TransitionComponent: merger('TransitionComponent'),\n            transitionDuration: merger('transitionDuration'),\n            TransitionProps: merger('TransitionProps', true),\n            iconVariant: merger('iconVariant', true),\n            style: merger('style', true),\n            SnackbarProps: merger('SnackbarProps', true),\n            className: clsx(this.props.className, options.className),\n        };\n\n        if (snack.persist) {\n            snack.autoHideDuration = undefined;\n        }\n\n        this.setState((state) => {\n            if ((preventDuplicate === undefined && this.props.preventDuplicate) || preventDuplicate) {\n                const compareFunction = (item: InternalSnack): boolean =>\n                    hasSpecifiedKey ? item.id === id : item.message === message;\n\n                const inQueue = state.queue.findIndex(compareFunction) > -1;\n                const inView = state.snacks.findIndex(compareFunction) > -1;\n                if (inQueue || inView) {\n                    return state;\n                }\n            }\n\n            return this.handleDisplaySnack({\n                ...state,\n                queue: [...state.queue, snack],\n            });\n        });\n\n        return id;\n    };\n\n    /**\n     * Reducer: Display snack if there's space for it. Otherwise, immediately\n     * begin dismissing the oldest message to start showing the new one.\n     */\n    handleDisplaySnack: Reducer = (state) => {\n        const { snacks } = state;\n        if (snacks.length >= this.maxSnack) {\n            return this.handleDismissOldest(state);\n        }\n        return this.processQueue(state);\n    };\n\n    /**\n     * Reducer: Display items (notifications) in the queue if there's space for them.\n     */\n    processQueue: Reducer = (state) => {\n        const { queue, snacks } = state;\n        if (queue.length > 0) {\n            return {\n                ...state,\n                snacks: [...snacks, queue[0]],\n                queue: queue.slice(1, queue.length),\n            };\n        }\n        return state;\n    };\n\n    /**\n     * Reducer: Hide oldest snackbar on the screen because there exists a new one which we have to display.\n     * (ignoring the one with 'persist' flag. i.e. explicitly told by user not to get dismissed).\n     *\n     * Note 1: If there is already a message leaving the screen, no new messages are dismissed.\n     * Note 2: If the oldest message has not yet entered the screen, only a request to close the\n     *         snackbar is made. Once it entered the screen, it will be immediately dismissed.\n     */\n    handleDismissOldest: Reducer = (state) => {\n        if (state.snacks.some((item) => !item.open || item.requestClose)) {\n            return state;\n        }\n\n        let popped = false;\n        let ignore = false;\n\n        const persistentCount = state.snacks.reduce(\n            (acc, current) => acc + (current.open && current.persist ? 1 : 0),\n            0\n        );\n\n        if (persistentCount === this.maxSnack) {\n            warning('NO_PERSIST_ALL');\n            ignore = true;\n        }\n\n        const snacks = state.snacks.map((item) => {\n            if (!popped && (!item.persist || ignore)) {\n                popped = true;\n\n                if (!item.entered) {\n                    return {\n                        ...item,\n                        requestClose: true,\n                    };\n                }\n\n                if (item.onClose) {\n                    item.onClose(null, 'maxsnack', item.id);\n                }\n\n                if (this.props.onClose) {\n                    this.props.onClose(null, 'maxsnack', item.id);\n                }\n\n                return {\n                    ...item,\n                    open: false,\n                };\n            }\n\n            return { ...item };\n        });\n\n        return { ...state, snacks };\n    };\n\n    /**\n     * Set the entered state of the snackbar with the given key.\n     */\n    handleEnteredSnack: TransitionHandlerProps['onEntered'] = (node, isAppearing, key) => {\n        if (!isDefined(key)) {\n            throw new Error('handleEnteredSnack Cannot be called with undefined key');\n        }\n\n        this.setState(({ snacks }) => ({\n            snacks: snacks.map((item) => (item.id === key ? { ...item, entered: true } : { ...item })),\n        }));\n    };\n\n    /**\n     * Hide a snackbar after its timeout.\n     */\n    handleCloseSnack: NonNullable<SharedProps['onClose']> = (event, reason, key) => {\n        // should not use createChainedFunction for onClose.\n        // because this.closeSnackbar called this function\n        if (this.props.onClose) {\n            this.props.onClose(event, reason, key);\n        }\n\n        const shouldCloseAll = key === undefined;\n\n        this.setState(({ snacks, queue }) => ({\n            snacks: snacks.map((item) => {\n                if (!shouldCloseAll && item.id !== key) {\n                    return { ...item };\n                }\n\n                return item.entered ? { ...item, open: false } : { ...item, requestClose: true };\n            }),\n            queue: queue.filter((item) => item.id !== key),\n        }));\n    };\n\n    /**\n     * Close snackbar with the given key\n     */\n    closeSnackbar: ProviderContext['closeSnackbar'] = (key) => {\n        // call individual snackbar onClose callback passed through options parameter\n        const toBeClosed = this.state.snacks.find((item) => item.id === key);\n        if (isDefined(key) && toBeClosed && toBeClosed.onClose) {\n            toBeClosed.onClose(null, 'instructed', key);\n        }\n\n        this.handleCloseSnack(null, 'instructed', key);\n    };\n\n    /**\n     * When we set open attribute of a snackbar to false (i.e. after we hide a snackbar),\n     * it leaves the screen and immediately after leaving animation is done, this method\n     * gets called. We remove the hidden snackbar from state and then display notifications\n     * waiting in the queue (if any). If after this process the queue is not empty, the\n     * oldest message is dismissed.\n     */\n    handleExitedSnack: TransitionHandlerProps['onExited'] = (node, key) => {\n        if (!isDefined(key)) {\n            throw new Error('handleExitedSnack Cannot be called with undefined key');\n        }\n\n        this.setState((state) => {\n            const newState = this.processQueue({\n                ...state,\n                snacks: state.snacks.filter((item) => item.id !== key),\n            });\n\n            if (newState.queue.length === 0) {\n                return newState;\n            }\n\n            return this.handleDismissOldest(newState);\n        });\n    };\n\n    render(): JSX.Element {\n        const { contextValue } = this.state;\n        const { domRoot, children, dense = false, Components = {}, classes } = this.props;\n\n        const categ = this.state.snacks.reduce<SnacksByPosition>((acc, current) => {\n            const category = originKeyExtractor(current.anchorOrigin);\n            const existingOfCategory = acc[category] || [];\n            return {\n                ...acc,\n                [category]: [...existingOfCategory, current],\n            };\n        }, {});\n\n        const snackbars = Object.keys(categ).map((origin) => {\n            const snacks = categ[origin];\n            const [nomineeSnack] = snacks;\n            return (\n                <SnackbarContainer\n                    key={origin}\n                    dense={dense}\n                    anchorOrigin={nomineeSnack.anchorOrigin}\n                    classes={classes}\n                >\n                    {snacks.map((snack) => (\n                        <SnackbarItem\n                            key={snack.id}\n                            snack={snack}\n                            classes={classes}\n                            Component={Components[snack.variant]}\n                            onClose={this.handleCloseSnack}\n                            onEnter={this.props.onEnter}\n                            onExit={this.props.onExit}\n                            onExited={createChainedFunction([this.handleExitedSnack, this.props.onExited], snack.id)}\n                            onEntered={createChainedFunction([this.handleEnteredSnack, this.props.onEntered], snack.id)}\n                        />\n                    ))}\n                </SnackbarContainer>\n            );\n        });\n\n        return (\n            <SnackbarContext.Provider value={contextValue}>\n                {children}\n                {domRoot ? createPortal(snackbars, domRoot) : snackbars}\n            </SnackbarContext.Provider>\n        );\n    }\n}\n\nexport default SnackbarProvider;\n","import { useContext } from 'react';\nimport SnackbarContext from './SnackbarContext';\nimport { ProviderContext } from './types';\n\nexport default (): ProviderContext => useContext(SnackbarContext);\n"],"names":["noOp","React","createContext","enqueueSnackbar","closeSnackbar","capitalise","text","charAt","toUpperCase","slice","originKeyExtractor","anchor","vertical","horizontal","isDefined","value","Transition","props","initialStatus","appear","appearStatus","unmountOnExit","mountOnEnter","state","status","nextCallback","getDerivedStateFromProps","prevState","componentDidMount","updateStatus","this","componentDidUpdate","prevProps","nextStatus","componentWillUnmount","cancelNextCallback","getTimeouts","timeout","enter","exit","mounting","performEnter","performExit","setState","isAppearing","timeouts","onEnter","node","safeSetState","_this2","onEntering","onTransitionEnd","onEntered","onExit","_this3","onExiting","onExited","cancel","nextState","callback","setNextCallback","active","_this4","handler","addEndListener","setTimeout","render","children","nodeRef","_this$props$nodeRef","current","Error","Component","noop","setRef","ref","useForkRef","refA","refB","refValue","getTransitionProps","style","duration","mode","easing","transitionTimingFunction","delay","transitionDelay","defaultProps","reflow","scrollTop","formatMs","milliseconds","Math","round","createTransition","options","Array","isArray","map","animatedProp","formattedDuration","formattedDelay","join","ownerWindow","ownerDocument","document","defaultView","window","setTranslateValue","direction","transform","rect","getBoundingClientRect","containerWindow","fakeTransform","computedStyle","getComputedStyle","getPropertyValue","offsetX","offsetY","transformValues","split","parseInt","innerWidth","left","width","innerHeight","top","height","getTranslateValue","webkitTransform","Slide","inProp","other","handleRefIntermediary","handleRef","updatePosition","handleResize","func","wait","debounced","args","later","apply","_this","clearTimeout","clear","debounce","addEventListener","removeEventListener","TransitionComponent","transitionProps","webkitTransition","transition","childProps","visibility","undefined","displayName","SvgIcon","viewBox","focusable","fontSize","marginInlineEnd","userSelect","display","fill","flexShrink","CheckIcon","d","WarningIcon","ErrorIcon","InfoIcon","defaults","maxSnack","persist","hideIconVariant","disableWindowBlurListener","variant","autoHideDuration","iconVariant","success","warning","error","info","anchorOrigin","transitionDuration","makeStyles","styles","Object","entries","reduce","acc","css","ComponentClasses","classes","root","entered","Collapse","wrapperRef","getWrapperSize","clientHeight","wrapperSize","className","clsx","pointerEvents","overflow","minHeight","right","bottom","toSnackbarAnchorOrigin","createChainedFunction","funcs","snackbarId","argums","indexOf","push","useEnhancedEffect","useEventCallback","fn","Snackbar","onClose","id","open","SnackbarProps","timerAutoHide","handleClose","setAutoHideTimer","autoHideDurationParam","handlePause","handleResume","onMouseEnter","event","onMouseLeave","flexWrap","flexGrow","minWidth","SnackbarContent","forwardRef","backgroundColor","lineHeight","letterSpacing","color","alignItems","padding","borderRadius","boxShadow","lessPadding","paddingLeft","message","action","marginLeft","marginRight","MaterialDesignContent","forwardedRef","icon","role","memo","wrappedRoot","position","SnackbarItem","useRef","useState","collapsed","setCollapsed","snack","handleExitedScreen","useCallback","col","useEffect","allClasses","useMemo","containerClasses","containerRoot","containerAnchorOriginTopCenter","containerAnchorOriginBottomCenter","containerAnchorOriginTopRight","containerAnchorOriginBottomRight","containerAnchorOriginTopLeft","containerAnchorOriginBottomLeft","keys","filter","key","obj","keepSnackbarClassKeys","TransitionProps","componentOrFunctionContent","content","ignoredEntered","otherSnack","callbacks","cbName","requestClose","boxSizing","maxHeight","zIndex","indents","maxWidth","rootDense","flexDirection","xsWidthMargin","center","dense","combinedClassname","isOptions","messageOrOptions","isValidElement","SnackbarProvider","optsOrUndefined","opts","preventDuplicate","hasSpecifiedKey","Date","getTime","random","merger","name","shouldObjectMerge","propsDuration","isNumberOrNull","numberish","optionsDuration","is","item","types","some","t","getTransitionDuration","merge","compareFunction","inQueue","queue","findIndex","inView","snacks","handleDisplaySnack","length","handleDismissOldest","processQueue","popped","ignore","reason","shouldCloseAll","toBeClosed","find","handleCloseSnack","newState","contextValue","bind","domRoot","Components","categ","category","snackbars","origin","SnackbarContainer","handleExitedSnack","handleEnteredSnack","SnackbarContext","Provider","createPortal","useContext"],"mappings":"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"}
+\ No newline at end of file
++{"version":3,"file":"notistack.cjs.production.min.js","sources":["../src/SnackbarContext.ts","../src/utils/index.ts","../src/transitions/Transition/Transition.tsx","../src/transitions/useForkRef.ts","../src/transitions/getTransitionProps.ts","../src/transitions/utils.ts","../src/transitions/createTransition.ts","../src/transitions/Slide/Slide.tsx","../src/utils/defaultIconVariants.tsx","../src/SnackbarProvider/merger.ts","../src/utils/styles.ts","../src/transitions/Collapse/Collapse.tsx","../src/SnackbarItem/utils.ts","../src/utils/createChainedFunction.ts","../src/utils/useEventCallback.ts","../src/SnackbarItem/Snackbar.tsx","../src/SnackbarContent/SnackbarContent.tsx","../src/ui/MaterialDesignContent/MaterialDesignContent.tsx","../src/SnackbarItem/SnackbarItem.tsx","../src/SnackbarContainer/SnackbarContainer.tsx","../src/SnackbarProvider/SnackbarProvider.tsx","../src/useSnackbar.ts"],"sourcesContent":["import React from 'react';\nimport { ProviderContext } from './types';\n\nconst noOp = () => {\n    return '';\n};\n\nexport default React.createContext<ProviderContext>({\n    enqueueSnackbar: noOp,\n    closeSnackbar: noOp,\n});\n","import { InternalSnack } from '../types';\n\nexport const breakpoints = {\n    downXs: '@media (max-width:599.95px)',\n    upSm: '@media (min-width:600px)',\n};\n\nconst capitalise = (text: string): string => text.charAt(0).toUpperCase() + text.slice(1);\n\nexport const originKeyExtractor = (anchor: InternalSnack['anchorOrigin']): string =>\n    `${capitalise(anchor.vertical)}${capitalise(anchor.horizontal)}`;\n\nexport const isDefined = (value: string | null | undefined | number): boolean => !!value || value === 0;\n","/**\n * BSD 3-Clause License\n *\n * Copyright (c) 2018, React Community\n * Forked from React (https://github.com/facebook/react) Copyright 2013-present, Facebook, Inc.\n * All rights reserved.\n *\n * Redistribution and use in source and binary forms, with or without\n * modification, are permitted provided that the following conditions are met:\n *\n * * Redistributions of source code must retain the above copyright notice, this\n * list of conditions and the following disclaimer.\n *\n * * Redistributions in binary form must reproduce the above copyright notice,\n * this list of conditions and the following disclaimer in the documentation\n * and/or other materials provided with the distribution.\n *\n * * Neither the name of the copyright holder nor the names of its\n * contributors may be used to endorse or promote products derived from\n * this software without specific prior written permission.\n *\n * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\n * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\n * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\n * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE\n * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL\n * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR\n * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER\n * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,\n * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\n * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n */\nimport React from 'react';\nimport { TransitionComponentProps, TransitionStatus } from '../../types';\n\nconst UNMOUNTED = 'unmounted';\nconst EXITED = 'exited';\nconst ENTERING = 'entering';\nconst ENTERED = 'entered';\nconst EXITING = 'exiting';\n\ninterface State {\n    status: TransitionStatus;\n}\n\ninterface NextCallback {\n    (): void;\n    cancel?: () => void;\n}\n\nclass Transition extends React.Component<TransitionComponentProps, State> {\n    appearStatus: TransitionStatus | null;\n\n    nextCallback: NextCallback | null;\n\n    constructor(props: TransitionComponentProps) {\n        super(props);\n\n        const { appear } = props;\n\n        let initialStatus: TransitionStatus;\n\n        this.appearStatus = null;\n\n        if (props.in) {\n            if (appear) {\n                initialStatus = EXITED;\n                this.appearStatus = ENTERING;\n            } else {\n                initialStatus = ENTERED;\n            }\n        } else if (props.unmountOnExit || props.mountOnEnter) {\n            initialStatus = UNMOUNTED;\n        } else {\n            initialStatus = EXITED;\n        }\n\n        this.state = { status: initialStatus };\n\n        this.nextCallback = null;\n    }\n\n    static getDerivedStateFromProps({ in: nextIn }: TransitionComponentProps, prevState: State) {\n        if (nextIn && prevState.status === UNMOUNTED) {\n            return { status: EXITED };\n        }\n        return null;\n    }\n\n    componentDidMount() {\n        this.updateStatus(true, this.appearStatus);\n    }\n\n    componentDidUpdate(prevProps: TransitionComponentProps) {\n        let nextStatus: TransitionStatus | null = null;\n        if (prevProps !== this.props) {\n            const { status } = this.state;\n\n            if (this.props.in) {\n                if (status !== ENTERING && status !== ENTERED) {\n                    nextStatus = ENTERING;\n                }\n            } else if (status === ENTERING || status === ENTERED) {\n                nextStatus = EXITING;\n            }\n        }\n        this.updateStatus(false, nextStatus);\n    }\n\n    componentWillUnmount() {\n        this.cancelNextCallback();\n    }\n\n    getTimeouts(): { exit: number; enter: number } {\n        const { timeout } = this.props;\n        let enter = timeout;\n        let exit = timeout;\n\n        if (timeout != null && typeof timeout !== 'number' && typeof timeout !== 'string') {\n            exit = timeout.exit;\n            enter = timeout.enter;\n        }\n        return {\n            exit: exit as number,\n            enter: enter as number,\n        };\n    }\n\n    updateStatus(mounting = false, nextStatus: TransitionStatus | null) {\n        if (nextStatus !== null) {\n            this.cancelNextCallback();\n\n            if (nextStatus === ENTERING) {\n                this.performEnter(mounting);\n            } else {\n                this.performExit();\n            }\n        } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n            this.setState({ status: UNMOUNTED });\n        }\n    }\n\n    get node() {\n        const node = this.props.nodeRef?.current;\n        if (!node) {\n            throw new Error('notistack - Custom snackbar is not refForwarding');\n        }\n        return node;\n    }\n\n    performEnter(mounting: boolean) {\n        const { enter } = this.props;\n        const isAppearing = mounting;\n\n        const timeouts = this.getTimeouts();\n\n        if (!mounting && !enter) {\n            this.safeSetState({ status: ENTERED }, () => {\n                if (this.props.onEntered) {\n                    this.props.onEntered(this.node, isAppearing);\n                }\n            });\n            return;\n        }\n\n        if (this.props.onEnter) {\n            this.props.onEnter(this.node, isAppearing);\n        }\n\n        this.safeSetState({ status: ENTERING }, () => {\n            if (this.props.onEntering) {\n                this.props.onEntering(this.node, isAppearing);\n            }\n\n            this.onTransitionEnd(timeouts.enter, () => {\n                this.safeSetState({ status: ENTERED }, () => {\n                    if (this.props.onEntered) {\n                        this.props.onEntered(this.node, isAppearing);\n                    }\n                });\n            });\n        });\n    }\n\n    performExit() {\n        const { exit } = this.props;\n        const timeouts = this.getTimeouts();\n\n        // no exit animation skip right to EXITED\n        if (!exit) {\n            this.safeSetState({ status: EXITED }, () => {\n                if (this.props.onExited) {\n                    this.props.onExited(this.node);\n                }\n            });\n            return;\n        }\n\n        if (this.props.onExit) {\n            this.props.onExit(this.node);\n        }\n\n        this.safeSetState({ status: EXITING }, () => {\n            if (this.props.onExiting) {\n                this.props.onExiting(this.node);\n            }\n\n            this.onTransitionEnd(timeouts.exit, () => {\n                this.safeSetState({ status: EXITED }, () => {\n                    if (this.props.onExited) {\n                        this.props.onExited(this.node);\n                    }\n                });\n            });\n        });\n    }\n\n    cancelNextCallback() {\n        if (this.nextCallback !== null && this.nextCallback.cancel) {\n            this.nextCallback.cancel();\n            this.nextCallback = null;\n        }\n    }\n\n    safeSetState(nextState: State, callback: () => void) {\n        callback = this.setNextCallback(callback);\n        this.setState(nextState, callback);\n    }\n\n    setNextCallback(callback: () => void) {\n        let active = true;\n\n        this.nextCallback = () => {\n            if (active) {\n                active = false;\n                this.nextCallback = null;\n\n                callback();\n            }\n        };\n\n        (this.nextCallback as NextCallback).cancel = () => {\n            active = false;\n        };\n\n        return this.nextCallback;\n    }\n\n    onTransitionEnd(timeout: number, handler: () => void) {\n        this.setNextCallback(handler);\n        const doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n        if (!this.node || doesNotHaveTimeoutOrListener) {\n            setTimeout(this.nextCallback as NextCallback, 0);\n            return;\n        }\n\n        if (this.props.addEndListener) {\n            this.props.addEndListener(this.node, this.nextCallback as NextCallback);\n        }\n\n        if (timeout != null) {\n            setTimeout(this.nextCallback as NextCallback, timeout);\n        }\n    }\n\n    render() {\n        const { status } = this.state;\n\n        if (status === UNMOUNTED) {\n            return null;\n        }\n\n        const {\n            children,\n            // filter props for `Transition`\n            in: _in,\n            mountOnEnter: _mountOnEnter,\n            unmountOnExit: _unmountOnExit,\n            appear: _appear,\n            enter: _enter,\n            exit: _exit,\n            timeout: _timeout,\n            addEndListener: _addEndListener,\n            onEnter: _onEnter,\n            onEntering: _onEntering,\n            onEntered: _onEntered,\n            onExit: _onExit,\n            onExiting: _onExiting,\n            onExited: _onExited,\n            nodeRef: _nodeRef,\n            ...childProps\n        } = this.props;\n\n        return children(status, childProps);\n    }\n}\n\nfunction noop() {\n    //\n}\n\n(Transition as any).defaultProps = {\n    in: false,\n    mountOnEnter: false,\n    unmountOnExit: false,\n    appear: false,\n    enter: true,\n    exit: true,\n\n    onEnter: noop,\n    onEntering: noop,\n    onEntered: noop,\n\n    onExit: noop,\n    onExiting: noop,\n    onExited: noop,\n};\n\nexport default Transition;\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\n\n/**\n * passes {value} to {ref}\n *\n * Useful if you want to expose the ref of an inner component to the public API\n * while still using it inside the component.\n * @param ref A ref callback or ref object. If anything falsy, this is a no-op.\n */\nfunction setRef<T>(\n    ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,\n    value: T | null\n): void {\n    if (typeof ref === 'function') {\n        ref(value);\n    } else if (ref) {\n        ref.current = value;\n    }\n}\n\nexport default function useForkRef<Instance>(\n    refA: React.Ref<Instance> | null | undefined,\n    refB: React.Ref<Instance> | null | undefined\n): React.Ref<Instance> | null {\n    /**\n     * This will create a new function if the ref props change and are defined.\n     * This means react will call the old forkRef with `null` and the new forkRef\n     * with the ref. Cleanup naturally emerges from this behavior.\n     */\n    return React.useMemo(() => {\n        if (refA == null && refB == null) {\n            return null;\n        }\n        return (refValue) => {\n            setRef(refA, refValue);\n            setRef(refB, refValue);\n        };\n    }, [refA, refB]);\n}\n","import { TransitionDuration } from '../types';\n\ninterface ComponentProps {\n    style?: React.CSSProperties | undefined;\n    /**\n     * number: 400\n     * TransitionDuration: { enter: 200, exit: 400 }\n     */\n    timeout: number | TransitionDuration;\n    mode: 'enter' | 'exit';\n}\n\ninterface TransitionPropsReturnType {\n    duration: number;\n    easing: string | undefined;\n    delay: string | undefined;\n}\n\nexport default function getTransitionProps(props: ComponentProps): TransitionPropsReturnType {\n    const { timeout, style = {}, mode } = props;\n    return {\n        duration: typeof timeout === 'object' ? timeout[mode] || 0 : timeout,\n        easing: style.transitionTimingFunction,\n        delay: style.transitionDelay,\n    };\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nexport const defaultEasing = {\n    // This is the most common easing curve.\n    easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    // Objects enter the screen at full velocity from off-screen and\n    // slowly decelerate to a resting point.\n    easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',\n    // Objects leave the screen at full velocity. They do not decelerate when off-screen.\n    easeIn: 'cubic-bezier(0.4, 0, 1, 1)',\n    // The sharp curve is used by objects that may return to the screen at any time.\n    sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',\n};\n\n/**\n * CSS hack to force a repaint\n */\nexport const reflow = (node: Element): void => {\n    // We have to do something with node.scrollTop.\n    // Otherwise it's removed from the compiled code by optimisers\n    // eslint-disable-next-line no-self-assign\n    node.scrollTop = node.scrollTop;\n};\n","import { defaultEasing } from './utils';\n\ninterface CreateTransitionOptions {\n    duration: string | number;\n    easing?: string;\n    delay?: string | number;\n}\n\nconst formatMs = (milliseconds: number) => `${Math.round(milliseconds)}ms`;\n\nexport default function createTransition(\n    props: string | string[] = ['all'],\n    options?: CreateTransitionOptions\n): string {\n    const { duration = 300, easing = defaultEasing.easeInOut, delay = 0 } = options || {};\n\n    const properties = Array.isArray(props) ? props : [props];\n\n    return properties\n        .map((animatedProp) => {\n            const formattedDuration = typeof duration === 'string' ? duration : formatMs(duration);\n            const formattedDelay = typeof delay === 'string' ? delay : formatMs(delay);\n            return `${animatedProp} ${formattedDuration} ${easing} ${formattedDelay}`;\n        })\n        .join(',');\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport TransitionComponent from '../Transition';\nimport useForkRef from '../useForkRef';\nimport getTransitionProps from '../getTransitionProps';\nimport createTransition from '../createTransition';\nimport { defaultEasing, reflow } from '../utils';\nimport { SlideTransitionDirection, TransitionProps } from '../../types';\n\nfunction ownerDocument(node: Node | null | undefined): Document {\n    return (node && node.ownerDocument) || document;\n}\n\nfunction ownerWindow(node: Node | null): Window {\n    const doc = ownerDocument(node);\n    return doc.defaultView || window;\n}\n\n/**\n * Corresponds to 10 frames at 60 Hz.\n * A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.\n */\nfunction debounce(func: () => void, wait = 166) {\n    let timeout: ReturnType<typeof setTimeout>;\n    function debounced(...args: any[]) {\n        const later = () => {\n            // @ts-ignore\n            func.apply(this, args);\n        };\n        clearTimeout(timeout);\n        timeout = setTimeout(later, wait);\n    }\n\n    debounced.clear = () => {\n        clearTimeout(timeout);\n    };\n\n    return debounced;\n}\n\n/**\n * Translate the node so it can't be seen on the screen.\n * Later, we're going to translate the node back to its original location with `none`.\n */\nfunction getTranslateValue(\n    direction: SlideTransitionDirection,\n    node: HTMLElement & { fakeTransform?: string }\n): string {\n    const rect = node.getBoundingClientRect();\n    const containerWindow = ownerWindow(node);\n    let transform;\n\n    if (node.fakeTransform) {\n        transform = node.fakeTransform;\n    } else {\n        const computedStyle = containerWindow.getComputedStyle(node);\n        transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');\n    }\n\n    let offsetX = 0;\n    let offsetY = 0;\n\n    if (transform && transform !== 'none' && typeof transform === 'string') {\n        const transformValues = transform.split('(')[1].split(')')[0].split(',');\n        offsetX = parseInt(transformValues[4], 10);\n        offsetY = parseInt(transformValues[5], 10);\n    }\n\n    switch (direction) {\n        case 'left':\n            return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;\n        case 'right':\n            return `translateX(-${rect.left + rect.width - offsetX}px)`;\n        case 'up':\n            return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;\n        default:\n            // down\n            return `translateY(-${rect.top + rect.height - offsetY}px)`;\n    }\n}\n\nfunction setTranslateValue(direction: SlideTransitionDirection, node: HTMLElement | null): void {\n    if (!node) return;\n    const transform = getTranslateValue(direction, node);\n    if (transform) {\n        node.style.webkitTransform = transform;\n        node.style.transform = transform;\n    }\n}\n\nconst Slide = React.forwardRef<unknown, TransitionProps>((props, ref) => {\n    const {\n        children,\n        direction = 'down',\n        in: inProp,\n        style,\n        timeout = 0,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        ...other\n    } = props;\n\n    const nodeRef = React.useRef(null);\n    const handleRefIntermediary = useForkRef((children as any).ref, nodeRef);\n    const handleRef = useForkRef(handleRefIntermediary, ref);\n\n    const handleEnter: TransitionProps['onEnter'] = (node, isAppearing) => {\n        setTranslateValue(direction, node);\n        reflow(node);\n\n        if (onEnter) {\n            onEnter(node, isAppearing);\n        }\n    };\n\n    const handleEntering = (node: HTMLElement) => {\n        const easing = style?.transitionTimingFunction || defaultEasing.easeOut;\n        const transitionProps = getTransitionProps({\n            timeout,\n            mode: 'enter',\n            style: { ...style, transitionTimingFunction: easing },\n        });\n\n        node.style.webkitTransition = createTransition('-webkit-transform', transitionProps);\n        node.style.transition = createTransition('transform', transitionProps);\n\n        node.style.webkitTransform = 'none';\n        node.style.transform = 'none';\n    };\n\n    const handleExit: TransitionProps['onExit'] = (node) => {\n        const easing = style?.transitionTimingFunction || defaultEasing.sharp;\n        const transitionProps = getTransitionProps({\n            timeout,\n            mode: 'exit',\n            style: { ...style, transitionTimingFunction: easing },\n        });\n\n        node.style.webkitTransition = createTransition('-webkit-transform', transitionProps);\n        node.style.transition = createTransition('transform', transitionProps);\n\n        setTranslateValue(direction, node);\n\n        if (onExit) {\n            onExit(node);\n        }\n    };\n\n    const handleExited: TransitionProps['onExited'] = (node) => {\n        // No need for transitions when the component is hidden\n        node.style.webkitTransition = '';\n        node.style.transition = '';\n\n        if (onExited) {\n            onExited(node);\n        }\n    };\n\n    const updatePosition = React.useCallback(() => {\n        if (nodeRef.current) {\n            setTranslateValue(direction, nodeRef.current);\n        }\n    }, [direction]);\n\n    React.useEffect(() => {\n        // Skip configuration where the position is screen size invariant.\n        if (inProp || direction === 'down' || direction === 'right') {\n            return undefined;\n        }\n\n        const handleResize = debounce(() => {\n            if (nodeRef.current) {\n                setTranslateValue(direction, nodeRef.current);\n            }\n        });\n\n        const containerWindow = ownerWindow(nodeRef.current);\n        containerWindow.addEventListener('resize', handleResize);\n        return () => {\n            handleResize.clear();\n            containerWindow.removeEventListener('resize', handleResize);\n        };\n    }, [direction, inProp]);\n\n    React.useEffect(() => {\n        if (!inProp) {\n            // We need to update the position of the drawer when the direction change and\n            // when it's hidden.\n            updatePosition();\n        }\n    }, [inProp, updatePosition]);\n\n    return (\n        <TransitionComponent\n            appear\n            nodeRef={nodeRef}\n            onEnter={handleEnter}\n            onEntered={onEntered}\n            onEntering={handleEntering}\n            onExit={handleExit}\n            onExited={handleExited}\n            in={inProp}\n            timeout={timeout}\n            {...other}\n        >\n            {(state, childProps) =>\n                React.cloneElement(children as any, {\n                    ref: handleRef,\n                    style: {\n                        visibility: state === 'exited' && !inProp ? 'hidden' : undefined,\n                        ...style,\n                        ...(children as any).props.style,\n                    },\n                    ...childProps,\n                })\n            }\n        </TransitionComponent>\n    );\n});\n\nSlide.displayName = 'Slide';\n\nexport default Slide;\n","import React from 'react';\n\nconst SvgIcon = (props: { children: JSX.Element }) => (\n    <svg\n        viewBox=\"0 0 24 24\"\n        focusable=\"false\"\n        style={{\n            fontSize: 20,\n            marginInlineEnd: 8,\n            userSelect: 'none',\n            width: '1em',\n            height: '1em',\n            display: 'inline-block',\n            fill: 'currentColor',\n            flexShrink: 0,\n        }}\n        {...props}\n    />\n);\n\nconst CheckIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z\"\n        />\n    </SvgIcon>\n);\n\nconst WarningIcon: React.FC = () => (\n    <SvgIcon>\n        <path d=\"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z\" />\n    </SvgIcon>\n);\n\nconst ErrorIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z\"\n        />\n    </SvgIcon>\n);\n\nconst InfoIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z\"\n        />\n    </SvgIcon>\n);\n\nconst defaultIconVariants: Record<string, React.ReactNode> = {\n    default: undefined,\n    success: <CheckIcon />,\n    warning: <WarningIcon />,\n    error: <ErrorIcon />,\n    info: <InfoIcon />,\n};\n\nexport default defaultIconVariants;\n","import Slide from '../transitions/Slide';\nimport defaultIconVariants from '../utils/defaultIconVariants';\nimport { InternalSnack } from '../types';\n\nexport const defaults = {\n    maxSnack: 3,\n    persist: false,\n    hideIconVariant: false,\n    disableWindowBlurListener: false,\n    variant: 'default',\n    autoHideDuration: 5000,\n    iconVariant: defaultIconVariants,\n    anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n    TransitionComponent: Slide,\n    transitionDuration: {\n        enter: 225,\n        exit: 195,\n    },\n};\n\n/**\n * Derives the right autoHideDuration taking into account the following\n * prority order: 1: Options, 2: Props, 3: default fallback\n */\nconst getAutoHideDuration = (optionsDuration: any, propsDuration: any) => {\n    const isNumberOrNull = (numberish: number | null) => typeof numberish === 'number' || numberish === null;\n\n    if (isNumberOrNull(optionsDuration)) return optionsDuration;\n    if (isNumberOrNull(propsDuration)) return propsDuration;\n    return defaults.autoHideDuration;\n};\n\n/**\n * Derives the right transitionDuration taking into account the following\n * prority order: 1: Options, 2: Props, 3: default fallback\n */\nconst getTransitionDuration = (optionsDuration: any, propsDuration: any) => {\n    const is = (item: any, types: string[]) => types.some((t) => typeof item === t);\n\n    if (is(optionsDuration, ['string', 'number'])) {\n        return optionsDuration;\n    }\n\n    if (is(optionsDuration, ['object'])) {\n        return {\n            ...defaults.transitionDuration,\n            ...(is(propsDuration, ['object']) && propsDuration),\n            ...optionsDuration,\n        };\n    }\n\n    if (is(propsDuration, ['string', 'number'])) {\n        return propsDuration;\n    }\n\n    if (is(propsDuration, ['object'])) {\n        return {\n            ...defaults.transitionDuration,\n            ...propsDuration,\n        };\n    }\n\n    return defaults.transitionDuration;\n};\n\nexport const merge =\n    (options: any, props: any) =>\n    (name: keyof InternalSnack, shouldObjectMerge = false): any => {\n        if (shouldObjectMerge) {\n            return {\n                ...(defaults as any)[name],\n                ...props[name],\n                ...options[name],\n            };\n        }\n\n        if (name === 'autoHideDuration') {\n            return getAutoHideDuration(options.autoHideDuration, props.autoHideDuration);\n        }\n\n        if (name === 'transitionDuration') {\n            return getTransitionDuration(options.transitionDuration, props.transitionDuration);\n        }\n\n        return options[name] || props[name] || (defaults as any)[name];\n    };\n","import React from 'react';\nimport { css, CSSAttribute } from 'goober';\nimport type { MakeStyles } from '../types';\n\nexport function defaultMakeStyles<S extends { [key: string]: CSSAttribute }>(\n    styles: S\n): { [key in keyof S]: string } {\n    return Object.entries(styles).reduce(\n        (acc, [key, value]) => ({\n            ...acc,\n            [key]: css(value),\n        }),\n        {} as { [key in keyof S]: string }\n    );\n}\n\nexport const MakeStylesContext = React.createContext<MakeStyles>(defaultMakeStyles);\n\nexport function useStyles<S extends { [key: string]: CSSAttribute }>(styles: S): { [key in keyof S]: string } {\n    const makeStyles = React.useContext(MakeStylesContext);\n    return React.useMemo(() => makeStyles(styles), [makeStyles, styles]);\n}\n\nexport const ComponentClasses = {\n    SnackbarContainer: 'notistack-SnackbarContainer',\n    Snackbar: 'notistack-Snackbar',\n    CollapseWrapper: 'notistack-CollapseWrapper',\n    MuiContent: 'notistack-MuiContent',\n    MuiContentVariant: (variant: string) => `notistack-MuiContent-${variant}`,\n};\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport { reflow } from '../utils';\nimport TransitionComponent from '../Transition';\nimport useForkRef from '../useForkRef';\nimport { TransitionProps } from '../../types';\nimport getTransitionProps from '../getTransitionProps';\nimport createTransition from '../createTransition';\nimport { ComponentClasses, useStyles } from '../../utils/styles';\n\nconst styles = {\n    root: {\n        height: 0,\n    },\n    entered: {\n        height: 'auto',\n    },\n};\n\nconst collapsedSize = '0px';\nconst timeout = 175;\n\ninterface CollapseProps {\n    children: JSX.Element;\n    in: boolean;\n    onExited: TransitionProps['onExited'];\n}\n\nconst Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {\n    const classes = useStyles(styles);\n    const { children, in: inProp, onExited } = props;\n\n    const wrapperRef = React.useRef<HTMLDivElement>(null);\n\n    const nodeRef = React.useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, nodeRef);\n\n    const getWrapperSize = () => (wrapperRef.current ? wrapperRef.current.clientHeight : 0);\n\n    const handleEnter: TransitionProps['onEnter'] = (node) => {\n        node.style.height = collapsedSize;\n    };\n\n    const handleEntering = (node: HTMLElement) => {\n        const wrapperSize = getWrapperSize();\n\n        const { duration: transitionDuration, easing } = getTransitionProps({\n            timeout,\n            mode: 'enter',\n        });\n\n        node.style.transitionDuration =\n            typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n\n        node.style.height = `${wrapperSize}px`;\n        node.style.transitionTimingFunction = easing || '';\n    };\n\n    const handleEntered: TransitionProps['onEntered'] = (node) => {\n        node.style.height = 'auto';\n    };\n\n    const handleExit: TransitionProps['onExit'] = (node) => {\n        node.style.height = `${getWrapperSize()}px`;\n    };\n\n    const handleExiting = (node: HTMLElement) => {\n        reflow(node);\n\n        const { duration: transitionDuration, easing } = getTransitionProps({\n            timeout,\n            mode: 'exit',\n        });\n\n        node.style.transitionDuration =\n            typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n        node.style.height = collapsedSize;\n        node.style.transitionTimingFunction = easing || '';\n    };\n\n    return (\n        <TransitionComponent\n            in={inProp}\n            unmountOnExit\n            onEnter={handleEnter}\n            onEntered={handleEntered}\n            onEntering={handleEntering}\n            onExit={handleExit}\n            onExited={onExited}\n            onExiting={handleExiting}\n            nodeRef={nodeRef}\n            timeout={timeout}\n        >\n            {(state, childProps) => (\n                <div\n                    ref={handleRef}\n                    className={clsx(classes.root, { [classes.entered]: state === 'entered' })}\n                    style={{\n                        pointerEvents: 'all',\n                        overflow: 'hidden',\n                        minHeight: collapsedSize,\n                        transition: createTransition('height'),\n                        ...(state === 'entered' && {\n                            overflow: 'visible',\n                        }),\n                        ...(state === 'exited' &&\n                            !inProp && {\n                                visibility: 'hidden',\n                            }),\n                    }}\n                    {...childProps}\n                >\n                    <div\n                        ref={wrapperRef}\n                        className={ComponentClasses.CollapseWrapper}\n                        // Hack to get children with a negative margin to not falsify the height computation.\n                        style={{ display: 'flex', width: '100%' }}\n                    >\n                        {children}\n                    </div>\n                </div>\n            )}\n        </TransitionComponent>\n    );\n});\n\nCollapse.displayName = 'Collapse';\n\nexport default Collapse;\n","import {\n    InternalSnack,\n    SlideTransitionDirection,\n    SnackbarOrigin,\n    SnackbarClassKey,\n    SnackbarProviderProps,\n    ClassNameMap,\n    ContainerClassKey,\n} from '../types';\nimport { originKeyExtractor } from '../utils';\n\nconst direction: Record<string, SlideTransitionDirection> = {\n    right: 'left',\n    left: 'right',\n    bottom: 'up',\n    top: 'down',\n};\n\nexport const getSlideDirection = (anchorOrigin: InternalSnack['anchorOrigin']): SlideTransitionDirection => {\n    if (anchorOrigin.horizontal !== 'center') {\n        return direction[anchorOrigin.horizontal];\n    }\n    return direction[anchorOrigin.vertical];\n};\n\n/** Tranforms classes name */\nexport const toSnackbarAnchorOrigin = (anchorOrigin: SnackbarOrigin): SnackbarClassKey =>\n    `anchorOrigin${originKeyExtractor(anchorOrigin)}` as SnackbarClassKey;\n\n/**\n * Omit SnackbarContainer class keys that are not needed for SnackbarItem\n */\nexport const keepSnackbarClassKeys = (\n    classes: SnackbarProviderProps['classes'] = {}\n): Partial<ClassNameMap<SnackbarClassKey>> => {\n    const containerClasses: Record<ContainerClassKey, true> = {\n        containerRoot: true,\n        containerAnchorOriginTopCenter: true,\n        containerAnchorOriginBottomCenter: true,\n        containerAnchorOriginTopRight: true,\n        containerAnchorOriginBottomRight: true,\n        containerAnchorOriginTopLeft: true,\n        containerAnchorOriginBottomLeft: true,\n    };\n    return (Object.keys(classes) as ContainerClassKey[])\n        .filter((key) => !containerClasses[key])\n        .reduce((obj, key) => ({ ...obj, [key]: classes[key] }), {});\n};\n","import { SnackbarKey } from 'src/types';\n\nconst noOp = () => {\n    /* */\n};\n\n/**\n * Credit to MUI team @ https://mui.com\n * Safe chained function.\n *\n * Will only create a new function if needed,\n * otherwise will pass back existing functions or null.\n */\nexport default function createChainedFunction<Args extends any[], This>(\n    funcs: Array<((this: This, ...args: Args) => any) | undefined>,\n    snackbarId?: SnackbarKey\n): (this: This, ...args: Args) => void {\n    // @ts-ignore\n    return funcs.reduce((acc, func) => {\n        if (func === null || func === undefined) {\n            return acc;\n        }\n\n        return function chainedFunction(...args) {\n            const argums = [...args] as any;\n            if (snackbarId && argums.indexOf(snackbarId) === -1) {\n                argums.push(snackbarId);\n            }\n            // @ts-ignore\n            acc.apply(this, argums);\n            func.apply(this, argums);\n        };\n    }, noOp);\n}\n","/**\n * Credit to MUI team @ https://mui.com\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nimport * as React from 'react';\n\nconst useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\nexport default function useEventCallback<Args extends unknown[], Return>(\n    fn: (...args: Args) => Return\n): (...args: Args) => Return {\n    const ref = React.useRef(fn);\n    useEnhancedEffect(() => {\n        ref.current = fn;\n    });\n    return React.useCallback(\n        (...args: Args) =>\n            // @ts-expect-error hide `this`\n            (0, ref.current)(...args),\n        []\n    );\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport useEventCallback from '../utils/useEventCallback';\nimport { CloseReason, SharedProps, SnackbarKey } from '../types';\nimport { ComponentClasses } from '../utils/styles';\n\ninterface SnackbarProps extends Required<Pick<SharedProps, 'disableWindowBlurListener' | 'onClose'>> {\n    open: boolean;\n    id: SnackbarKey;\n    className: string;\n    children: JSX.Element;\n    autoHideDuration: number | null | undefined;\n    SnackbarProps: SharedProps['SnackbarProps'];\n}\n\nconst Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>((props, ref) => {\n    const {\n        children,\n        className,\n        autoHideDuration,\n        disableWindowBlurListener = false,\n        onClose,\n        id,\n        open,\n        SnackbarProps = {},\n    } = props;\n\n    const timerAutoHide = React.useRef<ReturnType<typeof setTimeout>>();\n\n    const handleClose = useEventCallback((...args: [null, CloseReason, SnackbarKey]) => {\n        if (onClose) {\n            onClose(...args);\n        }\n    });\n\n    const setAutoHideTimer = useEventCallback((autoHideDurationParam?: number | null) => {\n        if (!onClose || autoHideDurationParam == null) {\n            return;\n        }\n\n        if (timerAutoHide.current) {\n            clearTimeout(timerAutoHide.current);\n        }\n        timerAutoHide.current = setTimeout(() => {\n            handleClose(null, 'timeout', id);\n        }, autoHideDurationParam);\n    });\n\n    React.useEffect(() => {\n        if (open) {\n            setAutoHideTimer(autoHideDuration);\n        }\n\n        return () => {\n            if (timerAutoHide.current) {\n                clearTimeout(timerAutoHide.current);\n            }\n        };\n    }, [open, autoHideDuration, setAutoHideTimer]);\n\n    /**\n     * Pause the timer when the user is interacting with the Snackbar\n     * or when the user hide the window.\n     */\n    const handlePause = () => {\n        if (timerAutoHide.current) {\n            clearTimeout(timerAutoHide.current);\n        }\n    };\n\n    /**\n     * Restart the timer when the user is no longer interacting with the Snackbar\n     * or when the window is shown back.\n     */\n    const handleResume = React.useCallback(() => {\n        if (autoHideDuration != null) {\n            setAutoHideTimer(autoHideDuration * 0.5);\n        }\n    }, [autoHideDuration, setAutoHideTimer]);\n\n    const handleMouseEnter: React.MouseEventHandler<HTMLDivElement> = (event) => {\n        if (SnackbarProps.onMouseEnter) {\n            SnackbarProps.onMouseEnter(event);\n        }\n        handlePause();\n    };\n\n    const handleMouseLeave: React.MouseEventHandler<HTMLDivElement> = (event) => {\n        if (SnackbarProps.onMouseLeave) {\n            SnackbarProps.onMouseLeave(event);\n        }\n        handleResume();\n    };\n\n    React.useEffect(() => {\n        if (!disableWindowBlurListener && open) {\n            window.addEventListener('focus', handleResume);\n            window.addEventListener('blur', handlePause);\n\n            return () => {\n                window.removeEventListener('focus', handleResume);\n                window.removeEventListener('blur', handlePause);\n            };\n        }\n\n        return undefined;\n    }, [disableWindowBlurListener, handleResume, open]);\n\n    return (\n        <div\n            ref={ref}\n            {...SnackbarProps}\n            className={clsx(ComponentClasses.Snackbar, className)}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n        >\n            {children}\n        </div>\n    );\n});\n\nSnackbar.displayName = 'Snackbar';\n\nexport default Snackbar;\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SnackbarContentProps } from '../types';\nimport { breakpoints } from '../utils';\nimport { useStyles } from '../utils/styles';\n\nconst styles = {\n    root: {\n        display: 'flex',\n        flexWrap: 'wrap',\n        flexGrow: 1,\n        [breakpoints.upSm]: {\n            flexGrow: 'initial',\n            minWidth: '288px',\n        },\n    },\n};\n\nconst SnackbarContent = forwardRef<HTMLDivElement, SnackbarContentProps>(({ className, ...props }, ref) => {\n    const classes = useStyles(styles);\n    return <div ref={ref} className={clsx(classes.root, className)} {...props} />;\n});\n\nSnackbarContent.displayName = 'SnackbarContent';\n\nexport default SnackbarContent;\n","import React, { memo, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport SnackbarContent from '../../SnackbarContent';\nimport { CustomContentProps } from '../../types';\nimport { ComponentClasses, useStyles } from '../../utils/styles';\n\nconst styles = {\n    root: {\n        backgroundColor: '#313131', // dark grey\n        fontSize: '0.875rem',\n        lineHeight: 1.43,\n        letterSpacing: '0.01071em',\n        color: '#fff',\n        alignItems: 'center',\n        padding: '6px 16px',\n        borderRadius: '4px',\n        boxShadow:\n            '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',\n    },\n    lessPadding: {\n        paddingLeft: `${8 * 2.5}px`,\n    },\n    default: {\n        backgroundColor: '#313131', // dark grey\n    },\n    success: {\n        backgroundColor: '#43a047', // green\n    },\n    error: {\n        backgroundColor: '#d32f2f', // dark red\n    },\n    warning: {\n        backgroundColor: '#ff9800', // amber\n    },\n    info: {\n        backgroundColor: '#2196f3', // nice blue\n    },\n    message: {\n        display: 'flex',\n        alignItems: 'center',\n        padding: '8px 0',\n    },\n    action: {\n        display: 'flex',\n        alignItems: 'center',\n        marginLeft: 'auto',\n        paddingLeft: '16px',\n        marginRight: '-8px',\n    },\n};\n\nconst ariaDescribedby = 'notistack-snackbar';\n\nconst MaterialDesignContent = forwardRef<HTMLDivElement, CustomContentProps>((props, forwardedRef) => {\n    const classes = useStyles(styles);\n    const {\n        id,\n        message,\n        action: componentOrFunctionAction,\n        iconVariant,\n        variant,\n        hideIconVariant,\n        style,\n        className,\n    } = props;\n\n    const icon = iconVariant[variant];\n\n    let action = componentOrFunctionAction;\n    if (typeof action === 'function') {\n        action = action(id);\n    }\n\n    return (\n        <SnackbarContent\n            ref={forwardedRef}\n            role=\"alert\"\n            aria-describedby={ariaDescribedby}\n            style={style}\n            className={clsx(\n                ComponentClasses.MuiContent,\n                ComponentClasses.MuiContentVariant(variant),\n                classes.root,\n                { [classes.lessPadding]: !hideIconVariant && icon },\n                classes[variant],\n                className\n            )}\n        >\n            <div id={ariaDescribedby} className={classes.message}>\n                {!hideIconVariant ? icon : null}\n                {message}\n            </div>\n            {action && <div className={classes.action}>{action}</div>}\n        </SnackbarContent>\n    );\n});\n\nMaterialDesignContent.displayName = 'MaterialDesignContent';\n\nexport default memo(MaterialDesignContent);\n","import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';\nimport clsx from 'clsx';\nimport Collapse from '../transitions/Collapse';\nimport { getSlideDirection, toSnackbarAnchorOrigin, keepSnackbarClassKeys } from './utils';\nimport {\n    TransitionHandlerProps,\n    SnackbarProviderProps,\n    CustomContentProps,\n    InternalSnack,\n    SharedProps,\n} from '../types';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport Snackbar from './Snackbar';\nimport { useStyles } from '../utils/styles';\nimport MaterialDesignContent from '../ui/MaterialDesignContent';\n\nconst styleRules = {\n    wrappedRoot: {\n        width: '100%',\n        position: 'relative',\n        transform: 'translateX(0)',\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n        minWidth: '288px',\n    },\n};\n\ninterface SnackbarItemProps extends Required<Pick<SnackbarProviderProps, 'onEntered' | 'onExited' | 'onClose'>> {\n    snack: InternalSnack;\n    classes: SnackbarProviderProps['classes'];\n    onEnter: SnackbarProviderProps['onEnter'];\n    onExit: SnackbarProviderProps['onExit'];\n    Component?: React.ComponentType<CustomContentProps>;\n}\n\nconst SnackbarItem: React.FC<SnackbarItemProps> = (props) => {\n    const styles = useStyles(styleRules);\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n    const [collapsed, setCollapsed] = useState(true);\n\n    const handleClose: NonNullable<SharedProps['onClose']> = createChainedFunction([\n        props.snack.onClose,\n        props.onClose,\n    ]);\n\n    const handleEntered: TransitionHandlerProps['onEntered'] = () => {\n        if (props.snack.requestClose) {\n            handleClose(null, 'instructed', props.snack.id);\n        }\n    };\n\n    const handleExitedScreen = useCallback((): void => {\n        timeout.current = setTimeout(() => {\n            setCollapsed((col) => !col);\n        }, 125);\n    }, []);\n\n    useEffect(\n        () => (): void => {\n            if (timeout.current) {\n                clearTimeout(timeout.current);\n            }\n        },\n        []\n    );\n\n    const { snack, classes: allClasses, Component = MaterialDesignContent } = props;\n\n    const classes = useMemo(() => keepSnackbarClassKeys(allClasses), [allClasses]);\n\n    const {\n        open,\n        SnackbarProps,\n        TransitionComponent,\n        TransitionProps,\n        transitionDuration,\n        disableWindowBlurListener,\n        content: componentOrFunctionContent,\n        entered: ignoredEntered,\n        requestClose: ignoredRequestClose,\n        onEnter: ignoreOnEnter,\n        onEntered: ignoreOnEntered,\n        onExit: ignoreOnExit,\n        onExited: ignoreOnExited,\n        ...otherSnack\n    } = snack;\n\n    const transitionProps = {\n        direction: getSlideDirection(otherSnack.anchorOrigin),\n        timeout: transitionDuration,\n        ...TransitionProps,\n    };\n\n    let content = componentOrFunctionContent;\n    if (typeof content === 'function') {\n        content = content(otherSnack.id, otherSnack.message);\n    }\n\n    const callbacks: { [key in keyof TransitionHandlerProps]?: any } = (\n        ['onEnter', 'onEntered', 'onExit', 'onExited'] as (keyof TransitionHandlerProps)[]\n    ).reduce(\n        (acc, cbName) => ({\n            ...acc,\n            [cbName]: createChainedFunction([props.snack[cbName] as any, props[cbName] as any], otherSnack.id),\n        }),\n        {}\n    );\n\n    return (\n        <Collapse in={collapsed} onExited={callbacks.onExited}>\n            <Snackbar\n                open={open}\n                id={otherSnack.id}\n                disableWindowBlurListener={disableWindowBlurListener}\n                autoHideDuration={otherSnack.autoHideDuration}\n                className={clsx(\n                    styles.wrappedRoot,\n                    classes.root,\n                    classes[toSnackbarAnchorOrigin(otherSnack.anchorOrigin)]\n                )}\n                SnackbarProps={SnackbarProps}\n                onClose={handleClose}\n            >\n                <TransitionComponent\n                    {...transitionProps}\n                    appear\n                    in={open}\n                    onExit={callbacks.onExit}\n                    onExited={handleExitedScreen}\n                    onEnter={callbacks.onEnter}\n                    // order matters. first callbacks.onEntered to set entered: true,\n                    // then handleEntered to check if there's a request for closing\n                    onEntered={createChainedFunction([callbacks.onEntered, handleEntered], otherSnack.id)}\n                >\n                    {(content as React.ReactElement) || <Component {...otherSnack} />}\n                </TransitionComponent>\n            </Snackbar>\n        </Collapse>\n    );\n};\n\nexport default SnackbarItem;\n","import React, { memo } from 'react';\nimport clsx from 'clsx';\nimport createTransition from '../transitions/createTransition';\nimport { useStyles, ComponentClasses } from '../utils/styles';\nimport { breakpoints, originKeyExtractor } from '../utils';\nimport { ContainerClassKey, SnackbarProviderProps } from '../types';\n\nconst indents = {\n    view: { default: 20, dense: 4 },\n    snackbar: { default: 6, dense: 2 },\n};\n\nconst collapseWrapper = `.${ComponentClasses.CollapseWrapper}`;\n\nconst xsWidthMargin = 16;\n\nconst styleRules = {\n    root: {\n        boxSizing: 'border-box',\n        display: 'flex',\n        maxHeight: '100%',\n        position: 'fixed',\n        zIndex: 1400,\n        height: 'auto',\n        width: 'auto',\n        transition: createTransition(['top', 'right', 'bottom', 'left', 'max-width'], {\n            duration: 300,\n            easing: 'ease',\n        }),\n        // container itself is invisible and should not block clicks, clicks should be passed to its children\n        // a pointerEvents: all is applied in the collapse component\n        pointerEvents: 'none',\n        [collapseWrapper]: {\n            padding: `${indents.snackbar.default}px 0px`,\n            transition: 'padding 300ms ease 0ms',\n        },\n        maxWidth: `calc(100% - ${indents.view.default * 2}px)`,\n        [breakpoints.downXs]: {\n            width: '100%',\n            maxWidth: `calc(100% - ${xsWidthMargin * 2}px)`,\n        },\n    },\n    rootDense: {\n        [collapseWrapper]: {\n            padding: `${indents.snackbar.dense}px 0px`,\n        },\n    },\n    top: {\n        top: `${indents.view.default - indents.snackbar.default}px`,\n        flexDirection: 'column',\n    },\n    bottom: {\n        bottom: `${indents.view.default - indents.snackbar.default}px`,\n        flexDirection: 'column-reverse',\n    },\n    left: {\n        left: `${indents.view.default}px`,\n        [breakpoints.upSm]: {\n            alignItems: 'flex-start',\n        },\n        [breakpoints.downXs]: {\n            left: `${xsWidthMargin}px`,\n        },\n    },\n    right: {\n        right: `${indents.view.default}px`,\n        [breakpoints.upSm]: {\n            alignItems: 'flex-end',\n        },\n        [breakpoints.downXs]: {\n            right: `${xsWidthMargin}px`,\n        },\n    },\n    center: {\n        left: '50%',\n        transform: 'translateX(-50%)',\n        [breakpoints.upSm]: {\n            alignItems: 'center',\n        },\n    },\n};\n\ninterface SnackbarContainerProps {\n    children: React.ReactNode;\n    dense: SnackbarProviderProps['dense'];\n    anchorOrigin: NonNullable<SnackbarProviderProps['anchorOrigin']>;\n    classes: SnackbarProviderProps['classes'];\n}\n\nconst SnackbarContainer: React.FC<SnackbarContainerProps> = (props) => {\n    const styles = useStyles(styleRules);\n    const { classes = {}, anchorOrigin, dense, children } = props;\n\n    const combinedClassname = clsx(\n        ComponentClasses.SnackbarContainer,\n        styles[anchorOrigin.vertical],\n        styles[anchorOrigin.horizontal],\n        { [styles.rootDense]: dense },\n        styles.root, // root should come after others to override maxWidth\n        classes.containerRoot,\n        classes[`containerAnchorOrigin${originKeyExtractor(anchorOrigin)}` as ContainerClassKey]\n    );\n\n    return <div className={combinedClassname}>{children}</div>;\n};\n\nexport default memo(SnackbarContainer);\n","import React, { Component, isValidElement } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport SnackbarContext from '../SnackbarContext';\nimport { originKeyExtractor, isDefined } from '../utils';\nimport { defaults, merge } from './merger';\nimport SnackbarItem from '../SnackbarItem';\nimport SnackbarContainer from '../SnackbarContainer';\nimport warning from '../utils/warning';\nimport {\n    SnackbarProviderProps,\n    SnackbarKey,\n    ProviderContext,\n    TransitionHandlerProps,\n    InternalSnack,\n    OptionsObject,\n    SharedProps,\n    SnackbarMessage,\n} from '../types';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport { MakeStylesContext, defaultMakeStyles } from '../utils/styles';\n\nconst isOptions = (\n    messageOrOptions: SnackbarMessage | (OptionsObject & { message?: SnackbarMessage })\n): messageOrOptions is OptionsObject & { message?: SnackbarMessage } => {\n    const isMessage = typeof messageOrOptions === 'string' || isValidElement(messageOrOptions);\n    return !isMessage;\n};\n\ntype Reducer = (state: State) => State;\ntype SnacksByPosition = { [key: string]: InternalSnack[] };\n\ninterface State {\n    snacks: InternalSnack[];\n    queue: InternalSnack[];\n    contextValue: ProviderContext;\n}\n\nexport let enqueueSnackbar: ProviderContext['enqueueSnackbar'];\nexport let closeSnackbar: ProviderContext['closeSnackbar'];\n\nclass SnackbarProvider extends Component<SnackbarProviderProps, State> {\n    constructor(props: SnackbarProviderProps) {\n        super(props);\n        enqueueSnackbar = this.enqueueSnackbar;\n        closeSnackbar = this.closeSnackbar;\n\n        this.state = {\n            snacks: [],\n            queue: [],\n            contextValue: {\n                enqueueSnackbar: this.enqueueSnackbar.bind(this),\n                closeSnackbar: this.closeSnackbar.bind(this),\n            },\n        };\n    }\n\n    get maxSnack(): number {\n        return this.props.maxSnack || defaults.maxSnack;\n    }\n\n    /**\n     * Adds a new snackbar to the queue to be presented.\n     * Returns generated or user defined key referencing the new snackbar or null\n     */\n    enqueueSnackbar = (\n        messageOrOptions: SnackbarMessage | (OptionsObject & { message?: SnackbarMessage }),\n        optsOrUndefined: OptionsObject = {}\n    ): SnackbarKey => {\n        if (messageOrOptions === undefined || messageOrOptions === null) {\n            throw new Error('enqueueSnackbar called with invalid argument');\n        }\n\n        const opts = isOptions(messageOrOptions) ? messageOrOptions : optsOrUndefined;\n\n        const message: SnackbarMessage | undefined = isOptions(messageOrOptions)\n            ? messageOrOptions.message\n            : messageOrOptions;\n\n        const { key, preventDuplicate, ...options } = opts;\n\n        const hasSpecifiedKey = isDefined(key);\n        const id = hasSpecifiedKey ? (key as SnackbarKey) : new Date().getTime() + Math.random();\n\n        const merger = merge(options, this.props);\n        const snack: InternalSnack = {\n            id,\n            ...options,\n            message,\n            open: true,\n            entered: false,\n            requestClose: false,\n            persist: merger('persist'),\n            action: merger('action'),\n            content: merger('content'),\n            variant: merger('variant'),\n            anchorOrigin: merger('anchorOrigin'),\n            disableWindowBlurListener: merger('disableWindowBlurListener'),\n            autoHideDuration: merger('autoHideDuration'),\n            hideIconVariant: merger('hideIconVariant'),\n            TransitionComponent: merger('TransitionComponent'),\n            transitionDuration: merger('transitionDuration'),\n            TransitionProps: merger('TransitionProps', true),\n            iconVariant: merger('iconVariant', true),\n            style: merger('style', true),\n            SnackbarProps: merger('SnackbarProps', true),\n            className: clsx(this.props.className, options.className),\n        };\n\n        if (snack.persist) {\n            snack.autoHideDuration = undefined;\n        }\n\n        this.setState((state) => {\n            if ((preventDuplicate === undefined && this.props.preventDuplicate) || preventDuplicate) {\n                const compareFunction = (item: InternalSnack): boolean =>\n                    hasSpecifiedKey ? item.id === id : item.message === message;\n\n                const inQueue = state.queue.findIndex(compareFunction) > -1;\n                const inView = state.snacks.findIndex(compareFunction) > -1;\n                if (inQueue || inView) {\n                    return state;\n                }\n            }\n\n            return this.handleDisplaySnack({\n                ...state,\n                queue: [...state.queue, snack],\n            });\n        });\n\n        return id;\n    };\n\n    /**\n     * Reducer: Display snack if there's space for it. Otherwise, immediately\n     * begin dismissing the oldest message to start showing the new one.\n     */\n    handleDisplaySnack: Reducer = (state) => {\n        const { snacks } = state;\n        if (snacks.length >= this.maxSnack) {\n            return this.handleDismissOldest(state);\n        }\n        return this.processQueue(state);\n    };\n\n    /**\n     * Reducer: Display items (notifications) in the queue if there's space for them.\n     */\n    processQueue: Reducer = (state) => {\n        const { queue, snacks } = state;\n        if (queue.length > 0) {\n            return {\n                ...state,\n                snacks: [...snacks, queue[0]],\n                queue: queue.slice(1, queue.length),\n            };\n        }\n        return state;\n    };\n\n    /**\n     * Reducer: Hide oldest snackbar on the screen because there exists a new one which we have to display.\n     * (ignoring the one with 'persist' flag. i.e. explicitly told by user not to get dismissed).\n     *\n     * Note 1: If there is already a message leaving the screen, no new messages are dismissed.\n     * Note 2: If the oldest message has not yet entered the screen, only a request to close the\n     *         snackbar is made. Once it entered the screen, it will be immediately dismissed.\n     */\n    handleDismissOldest: Reducer = (state) => {\n        if (state.snacks.some((item) => !item.open || item.requestClose)) {\n            return state;\n        }\n\n        let popped = false;\n        let ignore = false;\n\n        const persistentCount = state.snacks.reduce(\n            (acc, current) => acc + (current.open && current.persist ? 1 : 0),\n            0\n        );\n\n        if (persistentCount === this.maxSnack) {\n            warning('NO_PERSIST_ALL');\n            ignore = true;\n        }\n\n        const snacks = state.snacks.map((item) => {\n            if (!popped && (!item.persist || ignore)) {\n                popped = true;\n\n                if (!item.entered) {\n                    return {\n                        ...item,\n                        requestClose: true,\n                    };\n                }\n\n                if (item.onClose) {\n                    item.onClose(null, 'maxsnack', item.id);\n                }\n\n                if (this.props.onClose) {\n                    this.props.onClose(null, 'maxsnack', item.id);\n                }\n\n                return {\n                    ...item,\n                    open: false,\n                };\n            }\n\n            return { ...item };\n        });\n\n        return { ...state, snacks };\n    };\n\n    /**\n     * Set the entered state of the snackbar with the given key.\n     */\n    handleEnteredSnack: TransitionHandlerProps['onEntered'] = (node, isAppearing, key) => {\n        if (!isDefined(key)) {\n            throw new Error('handleEnteredSnack Cannot be called with undefined key');\n        }\n\n        this.setState(({ snacks }) => ({\n            snacks: snacks.map((item) => (item.id === key ? { ...item, entered: true } : { ...item })),\n        }));\n    };\n\n    /**\n     * Hide a snackbar after its timeout.\n     */\n    handleCloseSnack: NonNullable<SharedProps['onClose']> = (event, reason, key) => {\n        // should not use createChainedFunction for onClose.\n        // because this.closeSnackbar called this function\n        if (this.props.onClose) {\n            this.props.onClose(event, reason, key);\n        }\n\n        const shouldCloseAll = key === undefined;\n\n        this.setState(({ snacks, queue }) => ({\n            snacks: snacks.map((item) => {\n                if (!shouldCloseAll && item.id !== key) {\n                    return { ...item };\n                }\n\n                return item.entered ? { ...item, open: false } : { ...item, requestClose: true };\n            }),\n            queue: queue.filter((item) => item.id !== key),\n        }));\n    };\n\n    /**\n     * Close snackbar with the given key\n     */\n    closeSnackbar: ProviderContext['closeSnackbar'] = (key) => {\n        // call individual snackbar onClose callback passed through options parameter\n        const toBeClosed = this.state.snacks.find((item) => item.id === key);\n        if (isDefined(key) && toBeClosed && toBeClosed.onClose) {\n            toBeClosed.onClose(null, 'instructed', key);\n        }\n\n        this.handleCloseSnack(null, 'instructed', key);\n    };\n\n    /**\n     * When we set open attribute of a snackbar to false (i.e. after we hide a snackbar),\n     * it leaves the screen and immediately after leaving animation is done, this method\n     * gets called. We remove the hidden snackbar from state and then display notifications\n     * waiting in the queue (if any). If after this process the queue is not empty, the\n     * oldest message is dismissed.\n     */\n    handleExitedSnack: TransitionHandlerProps['onExited'] = (node, key) => {\n        if (!isDefined(key)) {\n            throw new Error('handleExitedSnack Cannot be called with undefined key');\n        }\n\n        this.setState((state) => {\n            const newState = this.processQueue({\n                ...state,\n                snacks: state.snacks.filter((item) => item.id !== key),\n            });\n\n            if (newState.queue.length === 0) {\n                return newState;\n            }\n\n            return this.handleDismissOldest(newState);\n        });\n    };\n\n    render(): JSX.Element {\n        const { contextValue } = this.state;\n        const { domRoot, children, dense = false, Components = {}, classes, makeStyles = defaultMakeStyles } = this.props;\n\n        const categ = this.state.snacks.reduce<SnacksByPosition>((acc, current) => {\n            const category = originKeyExtractor(current.anchorOrigin);\n            const existingOfCategory = acc[category] || [];\n            return {\n                ...acc,\n                [category]: [...existingOfCategory, current],\n            };\n        }, {});\n\n        const snackbars = Object.keys(categ).map((origin) => {\n            const snacks = categ[origin];\n            const [nomineeSnack] = snacks;\n            return (\n                <SnackbarContainer\n                    key={origin}\n                    dense={dense}\n                    anchorOrigin={nomineeSnack.anchorOrigin}\n                    classes={classes}\n                >\n                    {snacks.map((snack) => (\n                        <SnackbarItem\n                            key={snack.id}\n                            snack={snack}\n                            classes={classes}\n                            Component={Components[snack.variant]}\n                            onClose={this.handleCloseSnack}\n                            onEnter={this.props.onEnter}\n                            onExit={this.props.onExit}\n                            onExited={createChainedFunction([this.handleExitedSnack, this.props.onExited], snack.id)}\n                            onEntered={createChainedFunction([this.handleEnteredSnack, this.props.onEntered], snack.id)}\n                        />\n                    ))}\n                </SnackbarContainer>\n            );\n        });\n\n        return (\n            <MakeStylesContext.Provider value={makeStyles}>\n                <SnackbarContext.Provider value={contextValue}>\n                    {children}\n                    {domRoot ? createPortal(snackbars, domRoot) : snackbars}\n                </SnackbarContext.Provider>\n            </MakeStylesContext.Provider>\n        );\n    }\n}\n\nexport default SnackbarProvider;\n","import { useContext } from 'react';\nimport SnackbarContext from './SnackbarContext';\nimport { ProviderContext } from './types';\n\nexport default (): ProviderContext => useContext(SnackbarContext);\n"],"names":["noOp","React","createContext","enqueueSnackbar","closeSnackbar","capitalise","text","charAt","toUpperCase","slice","originKeyExtractor","anchor","vertical","horizontal","isDefined","value","Transition","props","initialStatus","appear","appearStatus","unmountOnExit","mountOnEnter","state","status","nextCallback","getDerivedStateFromProps","prevState","componentDidMount","updateStatus","this","componentDidUpdate","prevProps","nextStatus","componentWillUnmount","cancelNextCallback","getTimeouts","timeout","enter","exit","mounting","performEnter","performExit","setState","isAppearing","timeouts","onEnter","node","safeSetState","_this2","onEntering","onTransitionEnd","onEntered","onExit","_this3","onExiting","onExited","cancel","nextState","callback","setNextCallback","active","_this4","handler","addEndListener","setTimeout","render","children","nodeRef","_this$props$nodeRef","current","Error","Component","noop","setRef","ref","useForkRef","refA","refB","refValue","getTransitionProps","style","duration","mode","easing","transitionTimingFunction","delay","transitionDelay","defaultProps","reflow","scrollTop","formatMs","milliseconds","Math","round","createTransition","options","Array","isArray","map","animatedProp","formattedDuration","formattedDelay","join","ownerWindow","ownerDocument","document","defaultView","window","setTranslateValue","direction","transform","rect","getBoundingClientRect","containerWindow","fakeTransform","computedStyle","getComputedStyle","getPropertyValue","offsetX","offsetY","transformValues","split","parseInt","innerWidth","left","width","innerHeight","top","height","getTranslateValue","webkitTransform","Slide","inProp","other","handleRefIntermediary","handleRef","updatePosition","handleResize","func","wait","debounced","args","later","apply","_this","clearTimeout","clear","debounce","addEventListener","removeEventListener","TransitionComponent","transitionProps","webkitTransition","transition","childProps","visibility","undefined","displayName","SvgIcon","viewBox","focusable","fontSize","marginInlineEnd","userSelect","display","fill","flexShrink","CheckIcon","d","WarningIcon","ErrorIcon","InfoIcon","defaults","maxSnack","persist","hideIconVariant","disableWindowBlurListener","variant","autoHideDuration","iconVariant","success","warning","error","info","anchorOrigin","transitionDuration","defaultMakeStyles","styles","Object","entries","reduce","acc","css","MakeStylesContext","useStyles","makeStyles","useContext","useMemo","ComponentClasses","root","entered","Collapse","classes","wrapperRef","getWrapperSize","clientHeight","wrapperSize","className","clsx","pointerEvents","overflow","minHeight","right","bottom","toSnackbarAnchorOrigin","createChainedFunction","funcs","snackbarId","argums","indexOf","push","useEnhancedEffect","useEventCallback","fn","Snackbar","onClose","id","open","SnackbarProps","timerAutoHide","handleClose","setAutoHideTimer","autoHideDurationParam","handlePause","handleResume","onMouseEnter","event","onMouseLeave","flexWrap","flexGrow","minWidth","SnackbarContent","forwardRef","backgroundColor","lineHeight","letterSpacing","color","alignItems","padding","borderRadius","boxShadow","lessPadding","paddingLeft","message","action","marginLeft","marginRight","MaterialDesignContent","forwardedRef","icon","role","memo","styleRules","wrappedRoot","position","SnackbarItem","useRef","useState","collapsed","setCollapsed","snack","handleExitedScreen","useCallback","col","useEffect","allClasses","containerClasses","containerRoot","containerAnchorOriginTopCenter","containerAnchorOriginBottomCenter","containerAnchorOriginTopRight","containerAnchorOriginBottomRight","containerAnchorOriginTopLeft","containerAnchorOriginBottomLeft","keys","filter","key","obj","keepSnackbarClassKeys","TransitionProps","componentOrFunctionContent","content","ignoredEntered","otherSnack","callbacks","cbName","requestClose","boxSizing","maxHeight","zIndex","indents","maxWidth","rootDense","flexDirection","xsWidthMargin","center","dense","combinedClassname","isOptions","messageOrOptions","isValidElement","SnackbarProvider","optsOrUndefined","opts","preventDuplicate","hasSpecifiedKey","Date","getTime","random","merger","name","shouldObjectMerge","propsDuration","isNumberOrNull","numberish","optionsDuration","is","item","types","some","t","getTransitionDuration","merge","compareFunction","inQueue","queue","findIndex","inView","snacks","handleDisplaySnack","length","handleDismissOldest","processQueue","popped","ignore","reason","shouldCloseAll","toBeClosed","find","handleCloseSnack","newState","contextValue","bind","domRoot","Components","categ","category","snackbars","origin","SnackbarContainer","handleExitedSnack","handleEnteredSnack","Provider","SnackbarContext","createPortal"],"mappings":"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"}
+\ No newline at end of file
+diff --git a/notistack.esm.js b/notistack.esm.js
+index f0dfd216cd19557b5f3a8419d972ba8189bc5f01..3698e9f7a7a2dc7debd6964d9de97fb8a4e5e1cd 100644
+--- a/notistack.esm.js
++++ b/notistack.esm.js
+@@ -836,7 +836,7 @@ var merge = function merge(options, props) {
+   };
+ };
+ 
+-function makeStyles(styles) {
++function defaultMakeStyles(styles) {
+   return Object.entries(styles).reduce(function (acc, _ref) {
+     var _extends2;
+ 
+@@ -845,6 +845,13 @@ function makeStyles(styles) {
+     return _extends({}, acc, (_extends2 = {}, _extends2[key] = css(value), _extends2));
+   }, {});
+ }
++var MakeStylesContext = /*#__PURE__*/React__default.createContext(defaultMakeStyles);
++function useStyles(styles) {
++  var makeStyles = React__default.useContext(MakeStylesContext);
++  return React__default.useMemo(function () {
++    return makeStyles(styles);
++  }, [makeStyles, styles]);
++}
+ var ComponentClasses = {
+   SnackbarContainer: 'notistack-SnackbarContainer',
+   Snackbar: 'notistack-Snackbar',
+@@ -855,17 +862,18 @@ var ComponentClasses = {
+   }
+ };
+ 
+-var classes = /*#__PURE__*/makeStyles({
++var styles = {
+   root: {
+     height: 0
+   },
+   entered: {
+     height: 'auto'
+   }
+-});
++};
+ var collapsedSize = '0px';
+ var timeout = 175;
+ var Collapse = /*#__PURE__*/forwardRef(function (props, ref) {
++  var classes = useStyles(styles);
+   var children = props.children,
+       inProp = props["in"],
+       onExited = props.onExited;
+@@ -1161,7 +1169,7 @@ var Snackbar = /*#__PURE__*/forwardRef(function (props, ref) {
+ Snackbar.displayName = 'Snackbar';
+ 
+ var _root;
+-var classes$1 = /*#__PURE__*/makeStyles({
++var styles$1 = {
+   root: (_root = {
+     display: 'flex',
+     flexWrap: 'wrap',
+@@ -1170,19 +1178,20 @@ var classes$1 = /*#__PURE__*/makeStyles({
+     flexGrow: 'initial',
+     minWidth: '288px'
+   }, _root)
+-});
++};
+ var SnackbarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
+   var className = _ref.className,
+       props = _objectWithoutPropertiesLoose(_ref, ["className"]);
+ 
++  var classes = useStyles(styles$1);
+   return React__default.createElement("div", Object.assign({
+     ref: ref,
+-    className: clsx(classes$1.root, className)
++    className: clsx(classes.root, className)
+   }, props));
+ });
+ SnackbarContent.displayName = 'SnackbarContent';
+ 
+-var classes$2 = /*#__PURE__*/makeStyles({
++var styles$2 = {
+   root: {
+     backgroundColor: '#313131',
+     fontSize: '0.875rem',
+@@ -1224,9 +1233,10 @@ var classes$2 = /*#__PURE__*/makeStyles({
+     paddingLeft: '16px',
+     marginRight: '-8px'
+   }
+-});
++};
+ var ariaDescribedby = 'notistack-snackbar';
+ var MaterialDesignContent = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
++  var classes = useStyles(styles$2);
+   var id = props.id,
+       message = props.message,
+       componentOrFunctionAction = props.action,
+@@ -1247,18 +1257,18 @@ var MaterialDesignContent = /*#__PURE__*/forwardRef(function (props, forwardedRe
+     role: "alert",
+     "aria-describedby": ariaDescribedby,
+     style: style,
+-    className: clsx(ComponentClasses.MuiContent, ComponentClasses.MuiContentVariant(variant), classes$2.root, classes$2[variant], className, !hideIconVariant && icon && classes$2.lessPadding)
++    className: clsx(ComponentClasses.MuiContent, ComponentClasses.MuiContentVariant(variant), classes.root, classes[variant], className, !hideIconVariant && icon && classes.lessPadding)
+   }, React__default.createElement("div", {
+     id: ariaDescribedby,
+-    className: classes$2.message
++    className: classes.message
+   }, !hideIconVariant ? icon : null, message), action && React__default.createElement("div", {
+-    className: classes$2.action
++    className: classes.action
+   }, action));
+ });
+ MaterialDesignContent.displayName = 'MaterialDesignContent';
+ var MaterialDesignContent$1 = /*#__PURE__*/memo(MaterialDesignContent);
+ 
+-var styles = /*#__PURE__*/makeStyles({
++var styleRules = {
+   wrappedRoot: {
+     width: '100%',
+     position: 'relative',
+@@ -1269,9 +1279,10 @@ var styles = /*#__PURE__*/makeStyles({
+     left: 0,
+     minWidth: '288px'
+   }
+-});
++};
+ 
+ var SnackbarItem = function SnackbarItem(props) {
++  var styles = useStyles(styleRules);
+   var timeout = useRef();
+ 
+   var _useState = useState(true),
+@@ -1369,7 +1380,7 @@ var indents = {
+ };
+ var collapseWrapper = "." + ComponentClasses.CollapseWrapper;
+ var xsWidthMargin = 16;
+-var styles$1 = /*#__PURE__*/makeStyles({
++var styleRules$1 = {
+   root: (_root$1 = {
+     boxSizing: 'border-box',
+     display: 'flex',
+@@ -1423,16 +1434,17 @@ var styles$1 = /*#__PURE__*/makeStyles({
+   }, _center[breakpoints.upSm] = {
+     alignItems: 'center'
+   }, _center)
+-});
++};
+ 
+ var SnackbarContainer = function SnackbarContainer(props) {
++  var styles = useStyles(styleRules$1);
+   var _props$classes = props.classes,
+       classes = _props$classes === void 0 ? {} : _props$classes,
+       anchorOrigin = props.anchorOrigin,
+       dense = props.dense,
+       children = props.children;
+-  var combinedClassname = clsx(ComponentClasses.SnackbarContainer, styles$1[anchorOrigin.vertical], styles$1[anchorOrigin.horizontal], styles$1.root, // root should come after others to override maxWidth
+-  classes.containerRoot, classes["containerAnchorOrigin" + originKeyExtractor(anchorOrigin)], dense && styles$1.rootDense);
++  var combinedClassname = clsx(ComponentClasses.SnackbarContainer, styles[anchorOrigin.vertical], styles[anchorOrigin.horizontal], styles.root, // root should come after others to override maxWidth
++  classes.containerRoot, classes["containerAnchorOrigin" + originKeyExtractor(anchorOrigin)], dense && styles.rootDense);
+   return React__default.createElement("div", {
+     className: combinedClassname
+   }, children);
+@@ -1766,7 +1778,9 @@ var SnackbarProvider = /*#__PURE__*/function (_Component) {
+         dense = _this$props$dense === void 0 ? false : _this$props$dense,
+         _this$props$Component = _this$props.Components,
+         Components = _this$props$Component === void 0 ? {} : _this$props$Component,
+-        classes = _this$props.classes;
++        classes = _this$props.classes,
++        _this$props$makeStyle = _this$props.makeStyles,
++        makeStyles = _this$props$makeStyle === void 0 ? defaultMakeStyles : _this$props$makeStyle;
+     var categ = this.state.snacks.reduce(function (acc, current) {
+       var _extends2;
+ 
+@@ -1796,9 +1810,11 @@ var SnackbarProvider = /*#__PURE__*/function (_Component) {
+         });
+       }));
+     });
+-    return React__default.createElement(SnackbarContext.Provider, {
++    return React__default.createElement(MakeStylesContext.Provider, {
++      value: makeStyles
++    }, React__default.createElement(SnackbarContext.Provider, {
+       value: contextValue
+-    }, children, domRoot ? createPortal(snackbars, domRoot) : snackbars);
++    }, children, domRoot ? createPortal(snackbars, domRoot) : snackbars));
+   };
+ 
+   _createClass(SnackbarProvider, [{
+diff --git a/notistack.esm.js.map b/notistack.esm.js.map
+index af408a195ae7bdacc79169780a4ce7ec6fc0ff97..589b0504cdffa99ce2cc247907322f006ec1affb 100644
+--- a/notistack.esm.js.map
++++ b/notistack.esm.js.map
+@@ -1 +1 @@
+-{"version":3,"file":"notistack.esm.js","sources":["../src/SnackbarContext.ts","../src/utils/index.ts","../src/transitions/Transition/Transition.tsx","../src/transitions/useForkRef.ts","../src/transitions/getTransitionProps.ts","../src/transitions/utils.ts","../src/transitions/createTransition.ts","../src/transitions/Slide/Slide.tsx","../src/utils/defaultIconVariants.tsx","../src/SnackbarProvider/merger.ts","../src/utils/styles.ts","../src/transitions/Collapse/Collapse.tsx","../src/SnackbarItem/utils.ts","../src/utils/createChainedFunction.ts","../src/utils/useEventCallback.ts","../src/SnackbarItem/Snackbar.tsx","../src/SnackbarContent/SnackbarContent.tsx","../src/ui/MaterialDesignContent/MaterialDesignContent.tsx","../src/SnackbarItem/SnackbarItem.tsx","../src/SnackbarContainer/SnackbarContainer.tsx","../src/utils/warning.ts","../src/SnackbarProvider/SnackbarProvider.tsx","../src/useSnackbar.ts"],"sourcesContent":["import React from 'react';\nimport { ProviderContext } from './types';\n\nconst noOp = () => {\n    return '';\n};\n\nexport default React.createContext<ProviderContext>({\n    enqueueSnackbar: noOp,\n    closeSnackbar: noOp,\n});\n","import { InternalSnack } from '../types';\n\nexport const breakpoints = {\n    downXs: '@media (max-width:599.95px)',\n    upSm: '@media (min-width:600px)',\n};\n\nconst capitalise = (text: string): string => text.charAt(0).toUpperCase() + text.slice(1);\n\nexport const originKeyExtractor = (anchor: InternalSnack['anchorOrigin']): string =>\n    `${capitalise(anchor.vertical)}${capitalise(anchor.horizontal)}`;\n\nexport const isDefined = (value: string | null | undefined | number): boolean => !!value || value === 0;\n","/**\n * BSD 3-Clause License\n *\n * Copyright (c) 2018, React Community\n * Forked from React (https://github.com/facebook/react) Copyright 2013-present, Facebook, Inc.\n * All rights reserved.\n *\n * Redistribution and use in source and binary forms, with or without\n * modification, are permitted provided that the following conditions are met:\n *\n * * Redistributions of source code must retain the above copyright notice, this\n * list of conditions and the following disclaimer.\n *\n * * Redistributions in binary form must reproduce the above copyright notice,\n * this list of conditions and the following disclaimer in the documentation\n * and/or other materials provided with the distribution.\n *\n * * Neither the name of the copyright holder nor the names of its\n * contributors may be used to endorse or promote products derived from\n * this software without specific prior written permission.\n *\n * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\n * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\n * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\n * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE\n * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL\n * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR\n * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER\n * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,\n * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\n * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n */\nimport React from 'react';\nimport { TransitionComponentProps, TransitionStatus } from '../../types';\n\nconst UNMOUNTED = 'unmounted';\nconst EXITED = 'exited';\nconst ENTERING = 'entering';\nconst ENTERED = 'entered';\nconst EXITING = 'exiting';\n\ninterface State {\n    status: TransitionStatus;\n}\n\ninterface NextCallback {\n    (): void;\n    cancel?: () => void;\n}\n\nclass Transition extends React.Component<TransitionComponentProps, State> {\n    appearStatus: TransitionStatus | null;\n\n    nextCallback: NextCallback | null;\n\n    constructor(props: TransitionComponentProps) {\n        super(props);\n\n        const { appear } = props;\n\n        let initialStatus: TransitionStatus;\n\n        this.appearStatus = null;\n\n        if (props.in) {\n            if (appear) {\n                initialStatus = EXITED;\n                this.appearStatus = ENTERING;\n            } else {\n                initialStatus = ENTERED;\n            }\n        } else if (props.unmountOnExit || props.mountOnEnter) {\n            initialStatus = UNMOUNTED;\n        } else {\n            initialStatus = EXITED;\n        }\n\n        this.state = { status: initialStatus };\n\n        this.nextCallback = null;\n    }\n\n    static getDerivedStateFromProps({ in: nextIn }: TransitionComponentProps, prevState: State) {\n        if (nextIn && prevState.status === UNMOUNTED) {\n            return { status: EXITED };\n        }\n        return null;\n    }\n\n    componentDidMount() {\n        this.updateStatus(true, this.appearStatus);\n    }\n\n    componentDidUpdate(prevProps: TransitionComponentProps) {\n        let nextStatus: TransitionStatus | null = null;\n        if (prevProps !== this.props) {\n            const { status } = this.state;\n\n            if (this.props.in) {\n                if (status !== ENTERING && status !== ENTERED) {\n                    nextStatus = ENTERING;\n                }\n            } else if (status === ENTERING || status === ENTERED) {\n                nextStatus = EXITING;\n            }\n        }\n        this.updateStatus(false, nextStatus);\n    }\n\n    componentWillUnmount() {\n        this.cancelNextCallback();\n    }\n\n    getTimeouts(): { exit: number; enter: number } {\n        const { timeout } = this.props;\n        let enter = timeout;\n        let exit = timeout;\n\n        if (timeout != null && typeof timeout !== 'number' && typeof timeout !== 'string') {\n            exit = timeout.exit;\n            enter = timeout.enter;\n        }\n        return {\n            exit: exit as number,\n            enter: enter as number,\n        };\n    }\n\n    updateStatus(mounting = false, nextStatus: TransitionStatus | null) {\n        if (nextStatus !== null) {\n            this.cancelNextCallback();\n\n            if (nextStatus === ENTERING) {\n                this.performEnter(mounting);\n            } else {\n                this.performExit();\n            }\n        } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n            this.setState({ status: UNMOUNTED });\n        }\n    }\n\n    get node() {\n        const node = this.props.nodeRef?.current;\n        if (!node) {\n            throw new Error('notistack - Custom snackbar is not refForwarding');\n        }\n        return node;\n    }\n\n    performEnter(mounting: boolean) {\n        const { enter } = this.props;\n        const isAppearing = mounting;\n\n        const timeouts = this.getTimeouts();\n\n        if (!mounting && !enter) {\n            this.safeSetState({ status: ENTERED }, () => {\n                if (this.props.onEntered) {\n                    this.props.onEntered(this.node, isAppearing);\n                }\n            });\n            return;\n        }\n\n        if (this.props.onEnter) {\n            this.props.onEnter(this.node, isAppearing);\n        }\n\n        this.safeSetState({ status: ENTERING }, () => {\n            if (this.props.onEntering) {\n                this.props.onEntering(this.node, isAppearing);\n            }\n\n            this.onTransitionEnd(timeouts.enter, () => {\n                this.safeSetState({ status: ENTERED }, () => {\n                    if (this.props.onEntered) {\n                        this.props.onEntered(this.node, isAppearing);\n                    }\n                });\n            });\n        });\n    }\n\n    performExit() {\n        const { exit } = this.props;\n        const timeouts = this.getTimeouts();\n\n        // no exit animation skip right to EXITED\n        if (!exit) {\n            this.safeSetState({ status: EXITED }, () => {\n                if (this.props.onExited) {\n                    this.props.onExited(this.node);\n                }\n            });\n            return;\n        }\n\n        if (this.props.onExit) {\n            this.props.onExit(this.node);\n        }\n\n        this.safeSetState({ status: EXITING }, () => {\n            if (this.props.onExiting) {\n                this.props.onExiting(this.node);\n            }\n\n            this.onTransitionEnd(timeouts.exit, () => {\n                this.safeSetState({ status: EXITED }, () => {\n                    if (this.props.onExited) {\n                        this.props.onExited(this.node);\n                    }\n                });\n            });\n        });\n    }\n\n    cancelNextCallback() {\n        if (this.nextCallback !== null && this.nextCallback.cancel) {\n            this.nextCallback.cancel();\n            this.nextCallback = null;\n        }\n    }\n\n    safeSetState(nextState: State, callback: () => void) {\n        callback = this.setNextCallback(callback);\n        this.setState(nextState, callback);\n    }\n\n    setNextCallback(callback: () => void) {\n        let active = true;\n\n        this.nextCallback = () => {\n            if (active) {\n                active = false;\n                this.nextCallback = null;\n\n                callback();\n            }\n        };\n\n        (this.nextCallback as NextCallback).cancel = () => {\n            active = false;\n        };\n\n        return this.nextCallback;\n    }\n\n    onTransitionEnd(timeout: number, handler: () => void) {\n        this.setNextCallback(handler);\n        const doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n        if (!this.node || doesNotHaveTimeoutOrListener) {\n            setTimeout(this.nextCallback as NextCallback, 0);\n            return;\n        }\n\n        if (this.props.addEndListener) {\n            this.props.addEndListener(this.node, this.nextCallback as NextCallback);\n        }\n\n        if (timeout != null) {\n            setTimeout(this.nextCallback as NextCallback, timeout);\n        }\n    }\n\n    render() {\n        const { status } = this.state;\n\n        if (status === UNMOUNTED) {\n            return null;\n        }\n\n        const {\n            children,\n            // filter props for `Transition`\n            in: _in,\n            mountOnEnter: _mountOnEnter,\n            unmountOnExit: _unmountOnExit,\n            appear: _appear,\n            enter: _enter,\n            exit: _exit,\n            timeout: _timeout,\n            addEndListener: _addEndListener,\n            onEnter: _onEnter,\n            onEntering: _onEntering,\n            onEntered: _onEntered,\n            onExit: _onExit,\n            onExiting: _onExiting,\n            onExited: _onExited,\n            nodeRef: _nodeRef,\n            ...childProps\n        } = this.props;\n\n        return children(status, childProps);\n    }\n}\n\nfunction noop() {\n    //\n}\n\n(Transition as any).defaultProps = {\n    in: false,\n    mountOnEnter: false,\n    unmountOnExit: false,\n    appear: false,\n    enter: true,\n    exit: true,\n\n    onEnter: noop,\n    onEntering: noop,\n    onEntered: noop,\n\n    onExit: noop,\n    onExiting: noop,\n    onExited: noop,\n};\n\nexport default Transition;\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\n\n/**\n * passes {value} to {ref}\n *\n * Useful if you want to expose the ref of an inner component to the public API\n * while still using it inside the component.\n * @param ref A ref callback or ref object. If anything falsy, this is a no-op.\n */\nfunction setRef<T>(\n    ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,\n    value: T | null\n): void {\n    if (typeof ref === 'function') {\n        ref(value);\n    } else if (ref) {\n        ref.current = value;\n    }\n}\n\nexport default function useForkRef<Instance>(\n    refA: React.Ref<Instance> | null | undefined,\n    refB: React.Ref<Instance> | null | undefined\n): React.Ref<Instance> | null {\n    /**\n     * This will create a new function if the ref props change and are defined.\n     * This means react will call the old forkRef with `null` and the new forkRef\n     * with the ref. Cleanup naturally emerges from this behavior.\n     */\n    return React.useMemo(() => {\n        if (refA == null && refB == null) {\n            return null;\n        }\n        return (refValue) => {\n            setRef(refA, refValue);\n            setRef(refB, refValue);\n        };\n    }, [refA, refB]);\n}\n","import { TransitionDuration } from '../types';\n\ninterface ComponentProps {\n    style?: React.CSSProperties | undefined;\n    /**\n     * number: 400\n     * TransitionDuration: { enter: 200, exit: 400 }\n     */\n    timeout: number | TransitionDuration;\n    mode: 'enter' | 'exit';\n}\n\ninterface TransitionPropsReturnType {\n    duration: number;\n    easing: string | undefined;\n    delay: string | undefined;\n}\n\nexport default function getTransitionProps(props: ComponentProps): TransitionPropsReturnType {\n    const { timeout, style = {}, mode } = props;\n    return {\n        duration: typeof timeout === 'object' ? timeout[mode] || 0 : timeout,\n        easing: style.transitionTimingFunction,\n        delay: style.transitionDelay,\n    };\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nexport const defaultEasing = {\n    // This is the most common easing curve.\n    easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    // Objects enter the screen at full velocity from off-screen and\n    // slowly decelerate to a resting point.\n    easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',\n    // Objects leave the screen at full velocity. They do not decelerate when off-screen.\n    easeIn: 'cubic-bezier(0.4, 0, 1, 1)',\n    // The sharp curve is used by objects that may return to the screen at any time.\n    sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',\n};\n\n/**\n * CSS hack to force a repaint\n */\nexport const reflow = (node: Element): void => {\n    // We have to do something with node.scrollTop.\n    // Otherwise it's removed from the compiled code by optimisers\n    // eslint-disable-next-line no-self-assign\n    node.scrollTop = node.scrollTop;\n};\n","import { defaultEasing } from './utils';\n\ninterface CreateTransitionOptions {\n    duration: string | number;\n    easing?: string;\n    delay?: string | number;\n}\n\nconst formatMs = (milliseconds: number) => `${Math.round(milliseconds)}ms`;\n\nexport default function createTransition(\n    props: string | string[] = ['all'],\n    options?: CreateTransitionOptions\n): string {\n    const { duration = 300, easing = defaultEasing.easeInOut, delay = 0 } = options || {};\n\n    const properties = Array.isArray(props) ? props : [props];\n\n    return properties\n        .map((animatedProp) => {\n            const formattedDuration = typeof duration === 'string' ? duration : formatMs(duration);\n            const formattedDelay = typeof delay === 'string' ? delay : formatMs(delay);\n            return `${animatedProp} ${formattedDuration} ${easing} ${formattedDelay}`;\n        })\n        .join(',');\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport TransitionComponent from '../Transition';\nimport useForkRef from '../useForkRef';\nimport getTransitionProps from '../getTransitionProps';\nimport createTransition from '../createTransition';\nimport { defaultEasing, reflow } from '../utils';\nimport { SlideTransitionDirection, TransitionProps } from '../../types';\n\nfunction ownerDocument(node: Node | null | undefined): Document {\n    return (node && node.ownerDocument) || document;\n}\n\nfunction ownerWindow(node: Node | null): Window {\n    const doc = ownerDocument(node);\n    return doc.defaultView || window;\n}\n\n/**\n * Corresponds to 10 frames at 60 Hz.\n * A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.\n */\nfunction debounce(func: () => void, wait = 166) {\n    let timeout: ReturnType<typeof setTimeout>;\n    function debounced(...args: any[]) {\n        const later = () => {\n            // @ts-ignore\n            func.apply(this, args);\n        };\n        clearTimeout(timeout);\n        timeout = setTimeout(later, wait);\n    }\n\n    debounced.clear = () => {\n        clearTimeout(timeout);\n    };\n\n    return debounced;\n}\n\n/**\n * Translate the node so it can't be seen on the screen.\n * Later, we're going to translate the node back to its original location with `none`.\n */\nfunction getTranslateValue(\n    direction: SlideTransitionDirection,\n    node: HTMLElement & { fakeTransform?: string }\n): string {\n    const rect = node.getBoundingClientRect();\n    const containerWindow = ownerWindow(node);\n    let transform;\n\n    if (node.fakeTransform) {\n        transform = node.fakeTransform;\n    } else {\n        const computedStyle = containerWindow.getComputedStyle(node);\n        transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');\n    }\n\n    let offsetX = 0;\n    let offsetY = 0;\n\n    if (transform && transform !== 'none' && typeof transform === 'string') {\n        const transformValues = transform.split('(')[1].split(')')[0].split(',');\n        offsetX = parseInt(transformValues[4], 10);\n        offsetY = parseInt(transformValues[5], 10);\n    }\n\n    switch (direction) {\n        case 'left':\n            return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;\n        case 'right':\n            return `translateX(-${rect.left + rect.width - offsetX}px)`;\n        case 'up':\n            return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;\n        default:\n            // down\n            return `translateY(-${rect.top + rect.height - offsetY}px)`;\n    }\n}\n\nfunction setTranslateValue(direction: SlideTransitionDirection, node: HTMLElement | null): void {\n    if (!node) return;\n    const transform = getTranslateValue(direction, node);\n    if (transform) {\n        node.style.webkitTransform = transform;\n        node.style.transform = transform;\n    }\n}\n\nconst Slide = React.forwardRef<unknown, TransitionProps>((props, ref) => {\n    const {\n        children,\n        direction = 'down',\n        in: inProp,\n        style,\n        timeout = 0,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        ...other\n    } = props;\n\n    const nodeRef = React.useRef(null);\n    const handleRefIntermediary = useForkRef((children as any).ref, nodeRef);\n    const handleRef = useForkRef(handleRefIntermediary, ref);\n\n    const handleEnter: TransitionProps['onEnter'] = (node, isAppearing) => {\n        setTranslateValue(direction, node);\n        reflow(node);\n\n        if (onEnter) {\n            onEnter(node, isAppearing);\n        }\n    };\n\n    const handleEntering = (node: HTMLElement) => {\n        const easing = style?.transitionTimingFunction || defaultEasing.easeOut;\n        const transitionProps = getTransitionProps({\n            timeout,\n            mode: 'enter',\n            style: { ...style, transitionTimingFunction: easing },\n        });\n\n        node.style.webkitTransition = createTransition('-webkit-transform', transitionProps);\n        node.style.transition = createTransition('transform', transitionProps);\n\n        node.style.webkitTransform = 'none';\n        node.style.transform = 'none';\n    };\n\n    const handleExit: TransitionProps['onExit'] = (node) => {\n        const easing = style?.transitionTimingFunction || defaultEasing.sharp;\n        const transitionProps = getTransitionProps({\n            timeout,\n            mode: 'exit',\n            style: { ...style, transitionTimingFunction: easing },\n        });\n\n        node.style.webkitTransition = createTransition('-webkit-transform', transitionProps);\n        node.style.transition = createTransition('transform', transitionProps);\n\n        setTranslateValue(direction, node);\n\n        if (onExit) {\n            onExit(node);\n        }\n    };\n\n    const handleExited: TransitionProps['onExited'] = (node) => {\n        // No need for transitions when the component is hidden\n        node.style.webkitTransition = '';\n        node.style.transition = '';\n\n        if (onExited) {\n            onExited(node);\n        }\n    };\n\n    const updatePosition = React.useCallback(() => {\n        if (nodeRef.current) {\n            setTranslateValue(direction, nodeRef.current);\n        }\n    }, [direction]);\n\n    React.useEffect(() => {\n        // Skip configuration where the position is screen size invariant.\n        if (inProp || direction === 'down' || direction === 'right') {\n            return undefined;\n        }\n\n        const handleResize = debounce(() => {\n            if (nodeRef.current) {\n                setTranslateValue(direction, nodeRef.current);\n            }\n        });\n\n        const containerWindow = ownerWindow(nodeRef.current);\n        containerWindow.addEventListener('resize', handleResize);\n        return () => {\n            handleResize.clear();\n            containerWindow.removeEventListener('resize', handleResize);\n        };\n    }, [direction, inProp]);\n\n    React.useEffect(() => {\n        if (!inProp) {\n            // We need to update the position of the drawer when the direction change and\n            // when it's hidden.\n            updatePosition();\n        }\n    }, [inProp, updatePosition]);\n\n    return (\n        <TransitionComponent\n            appear\n            nodeRef={nodeRef}\n            onEnter={handleEnter}\n            onEntered={onEntered}\n            onEntering={handleEntering}\n            onExit={handleExit}\n            onExited={handleExited}\n            in={inProp}\n            timeout={timeout}\n            {...other}\n        >\n            {(state, childProps) =>\n                React.cloneElement(children as any, {\n                    ref: handleRef,\n                    style: {\n                        visibility: state === 'exited' && !inProp ? 'hidden' : undefined,\n                        ...style,\n                        ...(children as any).props.style,\n                    },\n                    ...childProps,\n                })\n            }\n        </TransitionComponent>\n    );\n});\n\nSlide.displayName = 'Slide';\n\nexport default Slide;\n","import React from 'react';\n\nconst SvgIcon = (props: { children: JSX.Element }) => (\n    <svg\n        viewBox=\"0 0 24 24\"\n        focusable=\"false\"\n        style={{\n            fontSize: 20,\n            marginInlineEnd: 8,\n            userSelect: 'none',\n            width: '1em',\n            height: '1em',\n            display: 'inline-block',\n            fill: 'currentColor',\n            flexShrink: 0,\n        }}\n        {...props}\n    />\n);\n\nconst CheckIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z\"\n        />\n    </SvgIcon>\n);\n\nconst WarningIcon: React.FC = () => (\n    <SvgIcon>\n        <path d=\"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z\" />\n    </SvgIcon>\n);\n\nconst ErrorIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z\"\n        />\n    </SvgIcon>\n);\n\nconst InfoIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z\"\n        />\n    </SvgIcon>\n);\n\nconst defaultIconVariants: Record<string, React.ReactNode> = {\n    default: undefined,\n    success: <CheckIcon />,\n    warning: <WarningIcon />,\n    error: <ErrorIcon />,\n    info: <InfoIcon />,\n};\n\nexport default defaultIconVariants;\n","import Slide from '../transitions/Slide';\nimport defaultIconVariants from '../utils/defaultIconVariants';\nimport { InternalSnack } from '../types';\n\nexport const defaults = {\n    maxSnack: 3,\n    persist: false,\n    hideIconVariant: false,\n    disableWindowBlurListener: false,\n    variant: 'default',\n    autoHideDuration: 5000,\n    iconVariant: defaultIconVariants,\n    anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n    TransitionComponent: Slide,\n    transitionDuration: {\n        enter: 225,\n        exit: 195,\n    },\n};\n\n/**\n * Derives the right autoHideDuration taking into account the following\n * prority order: 1: Options, 2: Props, 3: default fallback\n */\nconst getAutoHideDuration = (optionsDuration: any, propsDuration: any) => {\n    const isNumberOrNull = (numberish: number | null) => typeof numberish === 'number' || numberish === null;\n\n    if (isNumberOrNull(optionsDuration)) return optionsDuration;\n    if (isNumberOrNull(propsDuration)) return propsDuration;\n    return defaults.autoHideDuration;\n};\n\n/**\n * Derives the right transitionDuration taking into account the following\n * prority order: 1: Options, 2: Props, 3: default fallback\n */\nconst getTransitionDuration = (optionsDuration: any, propsDuration: any) => {\n    const is = (item: any, types: string[]) => types.some((t) => typeof item === t);\n\n    if (is(optionsDuration, ['string', 'number'])) {\n        return optionsDuration;\n    }\n\n    if (is(optionsDuration, ['object'])) {\n        return {\n            ...defaults.transitionDuration,\n            ...(is(propsDuration, ['object']) && propsDuration),\n            ...optionsDuration,\n        };\n    }\n\n    if (is(propsDuration, ['string', 'number'])) {\n        return propsDuration;\n    }\n\n    if (is(propsDuration, ['object'])) {\n        return {\n            ...defaults.transitionDuration,\n            ...propsDuration,\n        };\n    }\n\n    return defaults.transitionDuration;\n};\n\nexport const merge =\n    (options: any, props: any) =>\n    (name: keyof InternalSnack, shouldObjectMerge = false): any => {\n        if (shouldObjectMerge) {\n            return {\n                ...(defaults as any)[name],\n                ...props[name],\n                ...options[name],\n            };\n        }\n\n        if (name === 'autoHideDuration') {\n            return getAutoHideDuration(options.autoHideDuration, props.autoHideDuration);\n        }\n\n        if (name === 'transitionDuration') {\n            return getTransitionDuration(options.transitionDuration, props.transitionDuration);\n        }\n\n        return options[name] || props[name] || (defaults as any)[name];\n    };\n","import { css, CSSAttribute } from 'goober';\n\nexport function makeStyles<S extends { [key: string]: CSSAttribute }, K extends keyof S>(\n    styles: S\n): { [key in K]: string } {\n    return Object.entries(styles).reduce(\n        (acc, [key, value]) => ({\n            ...acc,\n            [key]: css(value),\n        }),\n        {} as { [key in K]: string }\n    );\n}\n\nexport const ComponentClasses = {\n    SnackbarContainer: 'notistack-SnackbarContainer',\n    Snackbar: 'notistack-Snackbar',\n    CollapseWrapper: 'notistack-CollapseWrapper',\n    MuiContent: 'notistack-MuiContent',\n    MuiContentVariant: (variant: string) => `notistack-MuiContent-${variant}`,\n};\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport { reflow } from '../utils';\nimport TransitionComponent from '../Transition';\nimport useForkRef from '../useForkRef';\nimport { TransitionProps } from '../../types';\nimport getTransitionProps from '../getTransitionProps';\nimport createTransition from '../createTransition';\nimport { ComponentClasses, makeStyles } from '../../utils/styles';\n\nconst classes = makeStyles({\n    root: {\n        height: 0,\n    },\n    entered: {\n        height: 'auto',\n    },\n});\n\nconst collapsedSize = '0px';\nconst timeout = 175;\n\ninterface CollapseProps {\n    children: JSX.Element;\n    in: boolean;\n    onExited: TransitionProps['onExited'];\n}\n\nconst Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {\n    const { children, in: inProp, onExited } = props;\n\n    const wrapperRef = React.useRef<HTMLDivElement>(null);\n\n    const nodeRef = React.useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, nodeRef);\n\n    const getWrapperSize = () => (wrapperRef.current ? wrapperRef.current.clientHeight : 0);\n\n    const handleEnter: TransitionProps['onEnter'] = (node) => {\n        node.style.height = collapsedSize;\n    };\n\n    const handleEntering = (node: HTMLElement) => {\n        const wrapperSize = getWrapperSize();\n\n        const { duration: transitionDuration, easing } = getTransitionProps({\n            timeout,\n            mode: 'enter',\n        });\n\n        node.style.transitionDuration =\n            typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n\n        node.style.height = `${wrapperSize}px`;\n        node.style.transitionTimingFunction = easing || '';\n    };\n\n    const handleEntered: TransitionProps['onEntered'] = (node) => {\n        node.style.height = 'auto';\n    };\n\n    const handleExit: TransitionProps['onExit'] = (node) => {\n        node.style.height = `${getWrapperSize()}px`;\n    };\n\n    const handleExiting = (node: HTMLElement) => {\n        reflow(node);\n\n        const { duration: transitionDuration, easing } = getTransitionProps({\n            timeout,\n            mode: 'exit',\n        });\n\n        node.style.transitionDuration =\n            typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n        node.style.height = collapsedSize;\n        node.style.transitionTimingFunction = easing || '';\n    };\n\n    return (\n        <TransitionComponent\n            in={inProp}\n            unmountOnExit\n            onEnter={handleEnter}\n            onEntered={handleEntered}\n            onEntering={handleEntering}\n            onExit={handleExit}\n            onExited={onExited}\n            onExiting={handleExiting}\n            nodeRef={nodeRef}\n            timeout={timeout}\n        >\n            {(state, childProps) => (\n                <div\n                    ref={handleRef}\n                    className={clsx(classes.root, { [classes.entered]: state === 'entered' })}\n                    style={{\n                        pointerEvents: 'all',\n                        overflow: 'hidden',\n                        minHeight: collapsedSize,\n                        transition: createTransition('height'),\n                        ...(state === 'entered' && {\n                            overflow: 'visible',\n                        }),\n                        ...(state === 'exited' &&\n                            !inProp && {\n                                visibility: 'hidden',\n                            }),\n                    }}\n                    {...childProps}\n                >\n                    <div\n                        ref={wrapperRef}\n                        className={ComponentClasses.CollapseWrapper}\n                        // Hack to get children with a negative margin to not falsify the height computation.\n                        style={{ display: 'flex', width: '100%' }}\n                    >\n                        {children}\n                    </div>\n                </div>\n            )}\n        </TransitionComponent>\n    );\n});\n\nCollapse.displayName = 'Collapse';\n\nexport default Collapse;\n","import {\n    InternalSnack,\n    SlideTransitionDirection,\n    SnackbarOrigin,\n    SnackbarClassKey,\n    SnackbarProviderProps,\n    ClassNameMap,\n    ContainerClassKey,\n} from '../types';\nimport { originKeyExtractor } from '../utils';\n\nconst direction: Record<string, SlideTransitionDirection> = {\n    right: 'left',\n    left: 'right',\n    bottom: 'up',\n    top: 'down',\n};\n\nexport const getSlideDirection = (anchorOrigin: InternalSnack['anchorOrigin']): SlideTransitionDirection => {\n    if (anchorOrigin.horizontal !== 'center') {\n        return direction[anchorOrigin.horizontal];\n    }\n    return direction[anchorOrigin.vertical];\n};\n\n/** Tranforms classes name */\nexport const toSnackbarAnchorOrigin = (anchorOrigin: SnackbarOrigin): SnackbarClassKey =>\n    `anchorOrigin${originKeyExtractor(anchorOrigin)}` as SnackbarClassKey;\n\n/**\n * Omit SnackbarContainer class keys that are not needed for SnackbarItem\n */\nexport const keepSnackbarClassKeys = (\n    classes: SnackbarProviderProps['classes'] = {}\n): Partial<ClassNameMap<SnackbarClassKey>> => {\n    const containerClasses: Record<ContainerClassKey, true> = {\n        containerRoot: true,\n        containerAnchorOriginTopCenter: true,\n        containerAnchorOriginBottomCenter: true,\n        containerAnchorOriginTopRight: true,\n        containerAnchorOriginBottomRight: true,\n        containerAnchorOriginTopLeft: true,\n        containerAnchorOriginBottomLeft: true,\n    };\n    return (Object.keys(classes) as ContainerClassKey[])\n        .filter((key) => !containerClasses[key])\n        .reduce((obj, key) => ({ ...obj, [key]: classes[key] }), {});\n};\n","import { SnackbarKey } from 'src/types';\n\nconst noOp = () => {\n    /* */\n};\n\n/**\n * Credit to MUI team @ https://mui.com\n * Safe chained function.\n *\n * Will only create a new function if needed,\n * otherwise will pass back existing functions or null.\n */\nexport default function createChainedFunction<Args extends any[], This>(\n    funcs: Array<((this: This, ...args: Args) => any) | undefined>,\n    snackbarId?: SnackbarKey\n): (this: This, ...args: Args) => void {\n    // @ts-ignore\n    return funcs.reduce((acc, func) => {\n        if (func === null || func === undefined) {\n            return acc;\n        }\n\n        return function chainedFunction(...args) {\n            const argums = [...args] as any;\n            if (snackbarId && argums.indexOf(snackbarId) === -1) {\n                argums.push(snackbarId);\n            }\n            // @ts-ignore\n            acc.apply(this, argums);\n            func.apply(this, argums);\n        };\n    }, noOp);\n}\n","/**\n * Credit to MUI team @ https://mui.com\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nimport * as React from 'react';\n\nconst useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\nexport default function useEventCallback<Args extends unknown[], Return>(\n    fn: (...args: Args) => Return\n): (...args: Args) => Return {\n    const ref = React.useRef(fn);\n    useEnhancedEffect(() => {\n        ref.current = fn;\n    });\n    return React.useCallback(\n        (...args: Args) =>\n            // @ts-expect-error hide `this`\n            (0, ref.current)(...args),\n        []\n    );\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport useEventCallback from '../utils/useEventCallback';\nimport { CloseReason, SharedProps, SnackbarKey } from '../types';\nimport { ComponentClasses } from '../utils/styles';\n\ninterface SnackbarProps extends Required<Pick<SharedProps, 'disableWindowBlurListener' | 'onClose'>> {\n    open: boolean;\n    id: SnackbarKey;\n    className: string;\n    children: JSX.Element;\n    autoHideDuration: number | null | undefined;\n    SnackbarProps: SharedProps['SnackbarProps'];\n}\n\nconst Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>((props, ref) => {\n    const {\n        children,\n        className,\n        autoHideDuration,\n        disableWindowBlurListener = false,\n        onClose,\n        id,\n        open,\n        SnackbarProps = {},\n    } = props;\n\n    const timerAutoHide = React.useRef<ReturnType<typeof setTimeout>>();\n\n    const handleClose = useEventCallback((...args: [null, CloseReason, SnackbarKey]) => {\n        if (onClose) {\n            onClose(...args);\n        }\n    });\n\n    const setAutoHideTimer = useEventCallback((autoHideDurationParam?: number | null) => {\n        if (!onClose || autoHideDurationParam == null) {\n            return;\n        }\n\n        if (timerAutoHide.current) {\n            clearTimeout(timerAutoHide.current);\n        }\n        timerAutoHide.current = setTimeout(() => {\n            handleClose(null, 'timeout', id);\n        }, autoHideDurationParam);\n    });\n\n    React.useEffect(() => {\n        if (open) {\n            setAutoHideTimer(autoHideDuration);\n        }\n\n        return () => {\n            if (timerAutoHide.current) {\n                clearTimeout(timerAutoHide.current);\n            }\n        };\n    }, [open, autoHideDuration, setAutoHideTimer]);\n\n    /**\n     * Pause the timer when the user is interacting with the Snackbar\n     * or when the user hide the window.\n     */\n    const handlePause = () => {\n        if (timerAutoHide.current) {\n            clearTimeout(timerAutoHide.current);\n        }\n    };\n\n    /**\n     * Restart the timer when the user is no longer interacting with the Snackbar\n     * or when the window is shown back.\n     */\n    const handleResume = React.useCallback(() => {\n        if (autoHideDuration != null) {\n            setAutoHideTimer(autoHideDuration * 0.5);\n        }\n    }, [autoHideDuration, setAutoHideTimer]);\n\n    const handleMouseEnter: React.MouseEventHandler<HTMLDivElement> = (event) => {\n        if (SnackbarProps.onMouseEnter) {\n            SnackbarProps.onMouseEnter(event);\n        }\n        handlePause();\n    };\n\n    const handleMouseLeave: React.MouseEventHandler<HTMLDivElement> = (event) => {\n        if (SnackbarProps.onMouseLeave) {\n            SnackbarProps.onMouseLeave(event);\n        }\n        handleResume();\n    };\n\n    React.useEffect(() => {\n        if (!disableWindowBlurListener && open) {\n            window.addEventListener('focus', handleResume);\n            window.addEventListener('blur', handlePause);\n\n            return () => {\n                window.removeEventListener('focus', handleResume);\n                window.removeEventListener('blur', handlePause);\n            };\n        }\n\n        return undefined;\n    }, [disableWindowBlurListener, handleResume, open]);\n\n    return (\n        <div\n            ref={ref}\n            {...SnackbarProps}\n            className={clsx(ComponentClasses.Snackbar, className)}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n        >\n            {children}\n        </div>\n    );\n});\n\nSnackbar.displayName = 'Snackbar';\n\nexport default Snackbar;\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SnackbarContentProps } from '../types';\nimport { breakpoints } from '../utils';\nimport { makeStyles } from '../utils/styles';\n\nconst classes = makeStyles({\n    root: {\n        display: 'flex',\n        flexWrap: 'wrap',\n        flexGrow: 1,\n        [breakpoints.upSm]: {\n            flexGrow: 'initial',\n            minWidth: '288px',\n        },\n    },\n});\n\nconst SnackbarContent = forwardRef<HTMLDivElement, SnackbarContentProps>(({ className, ...props }, ref) => (\n    <div ref={ref} className={clsx(classes.root, className)} {...props} />\n));\n\nSnackbarContent.displayName = 'SnackbarContent';\n\nexport default SnackbarContent;\n","import React, { memo, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport SnackbarContent from '../../SnackbarContent';\nimport { CustomContentProps } from '../../types';\nimport { ComponentClasses, makeStyles } from '../../utils/styles';\n\nconst classes = makeStyles({\n    root: {\n        backgroundColor: '#313131', // dark grey\n        fontSize: '0.875rem',\n        lineHeight: 1.43,\n        letterSpacing: '0.01071em',\n        color: '#fff',\n        alignItems: 'center',\n        padding: '6px 16px',\n        borderRadius: '4px',\n        boxShadow:\n            '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',\n    },\n    lessPadding: {\n        paddingLeft: `${8 * 2.5}px`,\n    },\n    default: {\n        backgroundColor: '#313131', // dark grey\n    },\n    success: {\n        backgroundColor: '#43a047', // green\n    },\n    error: {\n        backgroundColor: '#d32f2f', // dark red\n    },\n    warning: {\n        backgroundColor: '#ff9800', // amber\n    },\n    info: {\n        backgroundColor: '#2196f3', // nice blue\n    },\n    message: {\n        display: 'flex',\n        alignItems: 'center',\n        padding: '8px 0',\n    },\n    action: {\n        display: 'flex',\n        alignItems: 'center',\n        marginLeft: 'auto',\n        paddingLeft: '16px',\n        marginRight: '-8px',\n    },\n});\n\nconst ariaDescribedby = 'notistack-snackbar';\n\nconst MaterialDesignContent = forwardRef<HTMLDivElement, CustomContentProps>((props, forwardedRef) => {\n    const {\n        id,\n        message,\n        action: componentOrFunctionAction,\n        iconVariant,\n        variant,\n        hideIconVariant,\n        style,\n        className,\n    } = props;\n\n    const icon = iconVariant[variant];\n\n    let action = componentOrFunctionAction;\n    if (typeof action === 'function') {\n        action = action(id);\n    }\n\n    return (\n        <SnackbarContent\n            ref={forwardedRef}\n            role=\"alert\"\n            aria-describedby={ariaDescribedby}\n            style={style}\n            className={clsx(\n                ComponentClasses.MuiContent,\n                ComponentClasses.MuiContentVariant(variant),\n                classes.root,\n                { [classes.lessPadding]: !hideIconVariant && icon },\n                classes[variant],\n                className\n            )}\n        >\n            <div id={ariaDescribedby} className={classes.message}>\n                {!hideIconVariant ? icon : null}\n                {message}\n            </div>\n            {action && <div className={classes.action}>{action}</div>}\n        </SnackbarContent>\n    );\n});\n\nMaterialDesignContent.displayName = 'MaterialDesignContent';\n\nexport default memo(MaterialDesignContent);\n","import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';\nimport clsx from 'clsx';\nimport Collapse from '../transitions/Collapse';\nimport { getSlideDirection, toSnackbarAnchorOrigin, keepSnackbarClassKeys } from './utils';\nimport {\n    TransitionHandlerProps,\n    SnackbarProviderProps,\n    CustomContentProps,\n    InternalSnack,\n    SharedProps,\n} from '../types';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport Snackbar from './Snackbar';\nimport { makeStyles } from '../utils/styles';\nimport MaterialDesignContent from '../ui/MaterialDesignContent';\n\nconst styles = makeStyles({\n    wrappedRoot: {\n        width: '100%',\n        position: 'relative',\n        transform: 'translateX(0)',\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n        minWidth: '288px',\n    },\n});\n\ninterface SnackbarItemProps extends Required<Pick<SnackbarProviderProps, 'onEntered' | 'onExited' | 'onClose'>> {\n    snack: InternalSnack;\n    classes: SnackbarProviderProps['classes'];\n    onEnter: SnackbarProviderProps['onEnter'];\n    onExit: SnackbarProviderProps['onExit'];\n    Component?: React.ComponentType<CustomContentProps>;\n}\n\nconst SnackbarItem: React.FC<SnackbarItemProps> = (props) => {\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n    const [collapsed, setCollapsed] = useState(true);\n\n    const handleClose: NonNullable<SharedProps['onClose']> = createChainedFunction([\n        props.snack.onClose,\n        props.onClose,\n    ]);\n\n    const handleEntered: TransitionHandlerProps['onEntered'] = () => {\n        if (props.snack.requestClose) {\n            handleClose(null, 'instructed', props.snack.id);\n        }\n    };\n\n    const handleExitedScreen = useCallback((): void => {\n        timeout.current = setTimeout(() => {\n            setCollapsed((col) => !col);\n        }, 125);\n    }, []);\n\n    useEffect(\n        () => (): void => {\n            if (timeout.current) {\n                clearTimeout(timeout.current);\n            }\n        },\n        []\n    );\n\n    const { snack, classes: allClasses, Component = MaterialDesignContent } = props;\n\n    const classes = useMemo(() => keepSnackbarClassKeys(allClasses), [allClasses]);\n\n    const {\n        open,\n        SnackbarProps,\n        TransitionComponent,\n        TransitionProps,\n        transitionDuration,\n        disableWindowBlurListener,\n        content: componentOrFunctionContent,\n        entered: ignoredEntered,\n        requestClose: ignoredRequestClose,\n        onEnter: ignoreOnEnter,\n        onEntered: ignoreOnEntered,\n        onExit: ignoreOnExit,\n        onExited: ignoreOnExited,\n        ...otherSnack\n    } = snack;\n\n    const transitionProps = {\n        direction: getSlideDirection(otherSnack.anchorOrigin),\n        timeout: transitionDuration,\n        ...TransitionProps,\n    };\n\n    let content = componentOrFunctionContent;\n    if (typeof content === 'function') {\n        content = content(otherSnack.id, otherSnack.message);\n    }\n\n    const callbacks: { [key in keyof TransitionHandlerProps]?: any } = (\n        ['onEnter', 'onEntered', 'onExit', 'onExited'] as (keyof TransitionHandlerProps)[]\n    ).reduce(\n        (acc, cbName) => ({\n            ...acc,\n            [cbName]: createChainedFunction([props.snack[cbName] as any, props[cbName] as any], otherSnack.id),\n        }),\n        {}\n    );\n\n    return (\n        <Collapse in={collapsed} onExited={callbacks.onExited}>\n            <Snackbar\n                open={open}\n                id={otherSnack.id}\n                disableWindowBlurListener={disableWindowBlurListener}\n                autoHideDuration={otherSnack.autoHideDuration}\n                className={clsx(\n                    styles.wrappedRoot,\n                    classes.root,\n                    classes[toSnackbarAnchorOrigin(otherSnack.anchorOrigin)]\n                )}\n                SnackbarProps={SnackbarProps}\n                onClose={handleClose}\n            >\n                <TransitionComponent\n                    {...transitionProps}\n                    appear\n                    in={open}\n                    onExit={callbacks.onExit}\n                    onExited={handleExitedScreen}\n                    onEnter={callbacks.onEnter}\n                    // order matters. first callbacks.onEntered to set entered: true,\n                    // then handleEntered to check if there's a request for closing\n                    onEntered={createChainedFunction([callbacks.onEntered, handleEntered], otherSnack.id)}\n                >\n                    {(content as React.ReactElement) || <Component {...otherSnack} />}\n                </TransitionComponent>\n            </Snackbar>\n        </Collapse>\n    );\n};\n\nexport default SnackbarItem;\n","import React, { memo } from 'react';\nimport clsx from 'clsx';\nimport createTransition from '../transitions/createTransition';\nimport { makeStyles, ComponentClasses } from '../utils/styles';\nimport { breakpoints, originKeyExtractor } from '../utils';\nimport { ContainerClassKey, SnackbarProviderProps } from '../types';\n\nconst indents = {\n    view: { default: 20, dense: 4 },\n    snackbar: { default: 6, dense: 2 },\n};\n\nconst collapseWrapper = `.${ComponentClasses.CollapseWrapper}`;\n\nconst xsWidthMargin = 16;\n\nconst styles = makeStyles({\n    root: {\n        boxSizing: 'border-box',\n        display: 'flex',\n        maxHeight: '100%',\n        position: 'fixed',\n        zIndex: 1400,\n        height: 'auto',\n        width: 'auto',\n        transition: createTransition(['top', 'right', 'bottom', 'left', 'max-width'], {\n            duration: 300,\n            easing: 'ease',\n        }),\n        // container itself is invisible and should not block clicks, clicks should be passed to its children\n        // a pointerEvents: all is applied in the collapse component\n        pointerEvents: 'none',\n        [collapseWrapper]: {\n            padding: `${indents.snackbar.default}px 0px`,\n            transition: 'padding 300ms ease 0ms',\n        },\n        maxWidth: `calc(100% - ${indents.view.default * 2}px)`,\n        [breakpoints.downXs]: {\n            width: '100%',\n            maxWidth: `calc(100% - ${xsWidthMargin * 2}px)`,\n        },\n    },\n    rootDense: {\n        [collapseWrapper]: {\n            padding: `${indents.snackbar.dense}px 0px`,\n        },\n    },\n    top: {\n        top: `${indents.view.default - indents.snackbar.default}px`,\n        flexDirection: 'column',\n    },\n    bottom: {\n        bottom: `${indents.view.default - indents.snackbar.default}px`,\n        flexDirection: 'column-reverse',\n    },\n    left: {\n        left: `${indents.view.default}px`,\n        [breakpoints.upSm]: {\n            alignItems: 'flex-start',\n        },\n        [breakpoints.downXs]: {\n            left: `${xsWidthMargin}px`,\n        },\n    },\n    right: {\n        right: `${indents.view.default}px`,\n        [breakpoints.upSm]: {\n            alignItems: 'flex-end',\n        },\n        [breakpoints.downXs]: {\n            right: `${xsWidthMargin}px`,\n        },\n    },\n    center: {\n        left: '50%',\n        transform: 'translateX(-50%)',\n        [breakpoints.upSm]: {\n            alignItems: 'center',\n        },\n    },\n});\n\ninterface SnackbarContainerProps {\n    children: React.ReactNode;\n    dense: SnackbarProviderProps['dense'];\n    anchorOrigin: NonNullable<SnackbarProviderProps['anchorOrigin']>;\n    classes: SnackbarProviderProps['classes'];\n}\n\nconst SnackbarContainer: React.FC<SnackbarContainerProps> = (props) => {\n    const { classes = {}, anchorOrigin, dense, children } = props;\n\n    const combinedClassname = clsx(\n        ComponentClasses.SnackbarContainer,\n        styles[anchorOrigin.vertical],\n        styles[anchorOrigin.horizontal],\n        { [styles.rootDense]: dense },\n        styles.root, // root should come after others to override maxWidth\n        classes.containerRoot,\n        classes[`containerAnchorOrigin${originKeyExtractor(anchorOrigin)}` as ContainerClassKey]\n    );\n\n    return <div className={combinedClassname}>{children}</div>;\n};\n\nexport default memo(SnackbarContainer);\n","/* eslint-disable */\nconst __DEV__ = process.env.NODE_ENV !== 'production';\n\nconst messages = {\n    NO_PERSIST_ALL:\n        \"Reached maxSnack while all enqueued snackbars have 'persist' flag. Notistack will dismiss the oldest snackbar anyway to allow other ones in the queue to be presented.\",\n};\n\nexport default (messageKey: keyof typeof messages): void => {\n    if (!__DEV__) return;\n\n    const message = messages[messageKey];\n    if (typeof console !== 'undefined') {\n        console.error(`WARNING - notistack: ${message}`);\n    }\n    try {\n        throw new Error(message);\n    } catch (x) {}\n};\n","import React, { Component, isValidElement } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport SnackbarContext from '../SnackbarContext';\nimport { originKeyExtractor, isDefined } from '../utils';\nimport { defaults, merge } from './merger';\nimport SnackbarItem from '../SnackbarItem';\nimport SnackbarContainer from '../SnackbarContainer';\nimport warning from '../utils/warning';\nimport {\n    SnackbarProviderProps,\n    SnackbarKey,\n    ProviderContext,\n    TransitionHandlerProps,\n    InternalSnack,\n    OptionsObject,\n    SharedProps,\n    SnackbarMessage,\n} from '../types';\nimport createChainedFunction from '../utils/createChainedFunction';\n\nconst isOptions = (\n    messageOrOptions: SnackbarMessage | (OptionsObject & { message?: SnackbarMessage })\n): messageOrOptions is OptionsObject & { message?: SnackbarMessage } => {\n    const isMessage = typeof messageOrOptions === 'string' || isValidElement(messageOrOptions);\n    return !isMessage;\n};\n\ntype Reducer = (state: State) => State;\ntype SnacksByPosition = { [key: string]: InternalSnack[] };\n\ninterface State {\n    snacks: InternalSnack[];\n    queue: InternalSnack[];\n    contextValue: ProviderContext;\n}\n\nexport let enqueueSnackbar: ProviderContext['enqueueSnackbar'];\nexport let closeSnackbar: ProviderContext['closeSnackbar'];\n\nclass SnackbarProvider extends Component<SnackbarProviderProps, State> {\n    constructor(props: SnackbarProviderProps) {\n        super(props);\n        enqueueSnackbar = this.enqueueSnackbar;\n        closeSnackbar = this.closeSnackbar;\n\n        this.state = {\n            snacks: [],\n            queue: [],\n            contextValue: {\n                enqueueSnackbar: this.enqueueSnackbar.bind(this),\n                closeSnackbar: this.closeSnackbar.bind(this),\n            },\n        };\n    }\n\n    get maxSnack(): number {\n        return this.props.maxSnack || defaults.maxSnack;\n    }\n\n    /**\n     * Adds a new snackbar to the queue to be presented.\n     * Returns generated or user defined key referencing the new snackbar or null\n     */\n    enqueueSnackbar = (\n        messageOrOptions: SnackbarMessage | (OptionsObject & { message?: SnackbarMessage }),\n        optsOrUndefined: OptionsObject = {}\n    ): SnackbarKey => {\n        if (messageOrOptions === undefined || messageOrOptions === null) {\n            throw new Error('enqueueSnackbar called with invalid argument');\n        }\n\n        const opts = isOptions(messageOrOptions) ? messageOrOptions : optsOrUndefined;\n\n        const message: SnackbarMessage | undefined = isOptions(messageOrOptions)\n            ? messageOrOptions.message\n            : messageOrOptions;\n\n        const { key, preventDuplicate, ...options } = opts;\n\n        const hasSpecifiedKey = isDefined(key);\n        const id = hasSpecifiedKey ? (key as SnackbarKey) : new Date().getTime() + Math.random();\n\n        const merger = merge(options, this.props);\n        const snack: InternalSnack = {\n            id,\n            ...options,\n            message,\n            open: true,\n            entered: false,\n            requestClose: false,\n            persist: merger('persist'),\n            action: merger('action'),\n            content: merger('content'),\n            variant: merger('variant'),\n            anchorOrigin: merger('anchorOrigin'),\n            disableWindowBlurListener: merger('disableWindowBlurListener'),\n            autoHideDuration: merger('autoHideDuration'),\n            hideIconVariant: merger('hideIconVariant'),\n            TransitionComponent: merger('TransitionComponent'),\n            transitionDuration: merger('transitionDuration'),\n            TransitionProps: merger('TransitionProps', true),\n            iconVariant: merger('iconVariant', true),\n            style: merger('style', true),\n            SnackbarProps: merger('SnackbarProps', true),\n            className: clsx(this.props.className, options.className),\n        };\n\n        if (snack.persist) {\n            snack.autoHideDuration = undefined;\n        }\n\n        this.setState((state) => {\n            if ((preventDuplicate === undefined && this.props.preventDuplicate) || preventDuplicate) {\n                const compareFunction = (item: InternalSnack): boolean =>\n                    hasSpecifiedKey ? item.id === id : item.message === message;\n\n                const inQueue = state.queue.findIndex(compareFunction) > -1;\n                const inView = state.snacks.findIndex(compareFunction) > -1;\n                if (inQueue || inView) {\n                    return state;\n                }\n            }\n\n            return this.handleDisplaySnack({\n                ...state,\n                queue: [...state.queue, snack],\n            });\n        });\n\n        return id;\n    };\n\n    /**\n     * Reducer: Display snack if there's space for it. Otherwise, immediately\n     * begin dismissing the oldest message to start showing the new one.\n     */\n    handleDisplaySnack: Reducer = (state) => {\n        const { snacks } = state;\n        if (snacks.length >= this.maxSnack) {\n            return this.handleDismissOldest(state);\n        }\n        return this.processQueue(state);\n    };\n\n    /**\n     * Reducer: Display items (notifications) in the queue if there's space for them.\n     */\n    processQueue: Reducer = (state) => {\n        const { queue, snacks } = state;\n        if (queue.length > 0) {\n            return {\n                ...state,\n                snacks: [...snacks, queue[0]],\n                queue: queue.slice(1, queue.length),\n            };\n        }\n        return state;\n    };\n\n    /**\n     * Reducer: Hide oldest snackbar on the screen because there exists a new one which we have to display.\n     * (ignoring the one with 'persist' flag. i.e. explicitly told by user not to get dismissed).\n     *\n     * Note 1: If there is already a message leaving the screen, no new messages are dismissed.\n     * Note 2: If the oldest message has not yet entered the screen, only a request to close the\n     *         snackbar is made. Once it entered the screen, it will be immediately dismissed.\n     */\n    handleDismissOldest: Reducer = (state) => {\n        if (state.snacks.some((item) => !item.open || item.requestClose)) {\n            return state;\n        }\n\n        let popped = false;\n        let ignore = false;\n\n        const persistentCount = state.snacks.reduce(\n            (acc, current) => acc + (current.open && current.persist ? 1 : 0),\n            0\n        );\n\n        if (persistentCount === this.maxSnack) {\n            warning('NO_PERSIST_ALL');\n            ignore = true;\n        }\n\n        const snacks = state.snacks.map((item) => {\n            if (!popped && (!item.persist || ignore)) {\n                popped = true;\n\n                if (!item.entered) {\n                    return {\n                        ...item,\n                        requestClose: true,\n                    };\n                }\n\n                if (item.onClose) {\n                    item.onClose(null, 'maxsnack', item.id);\n                }\n\n                if (this.props.onClose) {\n                    this.props.onClose(null, 'maxsnack', item.id);\n                }\n\n                return {\n                    ...item,\n                    open: false,\n                };\n            }\n\n            return { ...item };\n        });\n\n        return { ...state, snacks };\n    };\n\n    /**\n     * Set the entered state of the snackbar with the given key.\n     */\n    handleEnteredSnack: TransitionHandlerProps['onEntered'] = (node, isAppearing, key) => {\n        if (!isDefined(key)) {\n            throw new Error('handleEnteredSnack Cannot be called with undefined key');\n        }\n\n        this.setState(({ snacks }) => ({\n            snacks: snacks.map((item) => (item.id === key ? { ...item, entered: true } : { ...item })),\n        }));\n    };\n\n    /**\n     * Hide a snackbar after its timeout.\n     */\n    handleCloseSnack: NonNullable<SharedProps['onClose']> = (event, reason, key) => {\n        // should not use createChainedFunction for onClose.\n        // because this.closeSnackbar called this function\n        if (this.props.onClose) {\n            this.props.onClose(event, reason, key);\n        }\n\n        const shouldCloseAll = key === undefined;\n\n        this.setState(({ snacks, queue }) => ({\n            snacks: snacks.map((item) => {\n                if (!shouldCloseAll && item.id !== key) {\n                    return { ...item };\n                }\n\n                return item.entered ? { ...item, open: false } : { ...item, requestClose: true };\n            }),\n            queue: queue.filter((item) => item.id !== key),\n        }));\n    };\n\n    /**\n     * Close snackbar with the given key\n     */\n    closeSnackbar: ProviderContext['closeSnackbar'] = (key) => {\n        // call individual snackbar onClose callback passed through options parameter\n        const toBeClosed = this.state.snacks.find((item) => item.id === key);\n        if (isDefined(key) && toBeClosed && toBeClosed.onClose) {\n            toBeClosed.onClose(null, 'instructed', key);\n        }\n\n        this.handleCloseSnack(null, 'instructed', key);\n    };\n\n    /**\n     * When we set open attribute of a snackbar to false (i.e. after we hide a snackbar),\n     * it leaves the screen and immediately after leaving animation is done, this method\n     * gets called. We remove the hidden snackbar from state and then display notifications\n     * waiting in the queue (if any). If after this process the queue is not empty, the\n     * oldest message is dismissed.\n     */\n    handleExitedSnack: TransitionHandlerProps['onExited'] = (node, key) => {\n        if (!isDefined(key)) {\n            throw new Error('handleExitedSnack Cannot be called with undefined key');\n        }\n\n        this.setState((state) => {\n            const newState = this.processQueue({\n                ...state,\n                snacks: state.snacks.filter((item) => item.id !== key),\n            });\n\n            if (newState.queue.length === 0) {\n                return newState;\n            }\n\n            return this.handleDismissOldest(newState);\n        });\n    };\n\n    render(): JSX.Element {\n        const { contextValue } = this.state;\n        const { domRoot, children, dense = false, Components = {}, classes } = this.props;\n\n        const categ = this.state.snacks.reduce<SnacksByPosition>((acc, current) => {\n            const category = originKeyExtractor(current.anchorOrigin);\n            const existingOfCategory = acc[category] || [];\n            return {\n                ...acc,\n                [category]: [...existingOfCategory, current],\n            };\n        }, {});\n\n        const snackbars = Object.keys(categ).map((origin) => {\n            const snacks = categ[origin];\n            const [nomineeSnack] = snacks;\n            return (\n                <SnackbarContainer\n                    key={origin}\n                    dense={dense}\n                    anchorOrigin={nomineeSnack.anchorOrigin}\n                    classes={classes}\n                >\n                    {snacks.map((snack) => (\n                        <SnackbarItem\n                            key={snack.id}\n                            snack={snack}\n                            classes={classes}\n                            Component={Components[snack.variant]}\n                            onClose={this.handleCloseSnack}\n                            onEnter={this.props.onEnter}\n                            onExit={this.props.onExit}\n                            onExited={createChainedFunction([this.handleExitedSnack, this.props.onExited], snack.id)}\n                            onEntered={createChainedFunction([this.handleEnteredSnack, this.props.onEntered], snack.id)}\n                        />\n                    ))}\n                </SnackbarContainer>\n            );\n        });\n\n        return (\n            <SnackbarContext.Provider value={contextValue}>\n                {children}\n                {domRoot ? createPortal(snackbars, domRoot) : snackbars}\n            </SnackbarContext.Provider>\n        );\n    }\n}\n\nexport default SnackbarProvider;\n","import { useContext } from 'react';\nimport SnackbarContext from './SnackbarContext';\nimport { ProviderContext } from './types';\n\nexport default (): ProviderContext => useContext(SnackbarContext);\n"],"names":["noOp","React","createContext","enqueueSnackbar","closeSnackbar","breakpoints","downXs","upSm","capitalise","text","charAt","toUpperCase","slice","originKeyExtractor","anchor","vertical","horizontal","isDefined","value","UNMOUNTED","EXITED","ENTERING","ENTERED","EXITING","Transition","props","appear","initialStatus","appearStatus","unmountOnExit","mountOnEnter","state","status","nextCallback","getDerivedStateFromProps","prevState","nextIn","componentDidMount","updateStatus","componentDidUpdate","prevProps","nextStatus","componentWillUnmount","cancelNextCallback","getTimeouts","timeout","enter","exit","mounting","performEnter","performExit","setState","isAppearing","timeouts","safeSetState","onEntered","node","onEnter","onEntering","onTransitionEnd","onExited","onExit","onExiting","cancel","nextState","callback","setNextCallback","active","handler","doesNotHaveTimeoutOrListener","addEndListener","setTimeout","render","children","_in","childProps","nodeRef","current","Error","Component","noop","defaultProps","setRef","ref","useForkRef","refA","refB","refValue","getTransitionProps","style","mode","duration","easing","transitionTimingFunction","delay","transitionDelay","defaultEasing","easeInOut","easeOut","easeIn","sharp","reflow","scrollTop","formatMs","milliseconds","Math","round","createTransition","options","properties","Array","isArray","map","animatedProp","formattedDuration","formattedDelay","join","ownerDocument","document","ownerWindow","doc","defaultView","window","debounce","func","wait","debounced","args","later","apply","clearTimeout","clear","getTranslateValue","direction","rect","getBoundingClientRect","containerWindow","transform","fakeTransform","computedStyle","getComputedStyle","getPropertyValue","offsetX","offsetY","transformValues","split","parseInt","innerWidth","left","width","innerHeight","top","height","setTranslateValue","webkitTransform","Slide","inProp","other","handleRefIntermediary","handleRef","handleEnter","handleEntering","transitionProps","webkitTransition","transition","handleExit","handleExited","updatePosition","undefined","handleResize","addEventListener","removeEventListener","TransitionComponent","visibility","displayName","SvgIcon","viewBox","focusable","fontSize","marginInlineEnd","userSelect","display","fill","flexShrink","CheckIcon","d","WarningIcon","ErrorIcon","InfoIcon","defaultIconVariants","success","warning","error","info","defaults","maxSnack","persist","hideIconVariant","disableWindowBlurListener","variant","autoHideDuration","iconVariant","anchorOrigin","transitionDuration","getAutoHideDuration","optionsDuration","propsDuration","isNumberOrNull","numberish","getTransitionDuration","is","item","types","some","t","merge","name","shouldObjectMerge","makeStyles","styles","Object","entries","reduce","acc","key","css","ComponentClasses","SnackbarContainer","Snackbar","CollapseWrapper","MuiContent","MuiContentVariant","classes","root","entered","collapsedSize","Collapse","wrapperRef","getWrapperSize","clientHeight","wrapperSize","handleEntered","handleExiting","className","clsx","pointerEvents","overflow","minHeight","right","bottom","getSlideDirection","toSnackbarAnchorOrigin","keepSnackbarClassKeys","containerClasses","containerRoot","containerAnchorOriginTopCenter","containerAnchorOriginBottomCenter","containerAnchorOriginTopRight","containerAnchorOriginBottomRight","containerAnchorOriginTopLeft","containerAnchorOriginBottomLeft","keys","filter","obj","createChainedFunction","funcs","snackbarId","chainedFunction","argums","indexOf","push","useEnhancedEffect","useEventCallback","fn","onClose","id","open","SnackbarProps","timerAutoHide","handleClose","setAutoHideTimer","autoHideDurationParam","handlePause","handleResume","handleMouseEnter","event","onMouseEnter","handleMouseLeave","onMouseLeave","flexWrap","flexGrow","minWidth","SnackbarContent","forwardRef","backgroundColor","lineHeight","letterSpacing","color","alignItems","padding","borderRadius","boxShadow","lessPadding","paddingLeft","message","action","marginLeft","marginRight","ariaDescribedby","MaterialDesignContent","forwardedRef","componentOrFunctionAction","icon","role","memo","wrappedRoot","position","SnackbarItem","useRef","useState","collapsed","setCollapsed","snack","requestClose","handleExitedScreen","useCallback","col","useEffect","allClasses","useMemo","TransitionProps","componentOrFunctionContent","content","ignoredEntered","otherSnack","callbacks","cbName","indents","view","dense","snackbar","collapseWrapper","xsWidthMargin","boxSizing","maxHeight","zIndex","maxWidth","rootDense","flexDirection","center","combinedClassname","__DEV__","process","env","NODE_ENV","messages","NO_PERSIST_ALL","messageKey","console","x","isOptions","messageOrOptions","isMessage","isValidElement","SnackbarProvider","optsOrUndefined","opts","preventDuplicate","hasSpecifiedKey","Date","getTime","random","merger","compareFunction","inQueue","queue","findIndex","inView","snacks","handleDisplaySnack","length","handleDismissOldest","processQueue","popped","ignore","persistentCount","reason","shouldCloseAll","toBeClosed","find","handleCloseSnack","newState","contextValue","bind","domRoot","Components","categ","category","existingOfCategory","snackbars","origin","nomineeSnack","handleExitedSnack","handleEnteredSnack","SnackbarContext","Provider","createPortal","useContext"],"mappings":"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"}
+\ No newline at end of file
++{"version":3,"file":"notistack.esm.js","sources":["../src/SnackbarContext.ts","../src/utils/index.ts","../src/transitions/Transition/Transition.tsx","../src/transitions/useForkRef.ts","../src/transitions/getTransitionProps.ts","../src/transitions/utils.ts","../src/transitions/createTransition.ts","../src/transitions/Slide/Slide.tsx","../src/utils/defaultIconVariants.tsx","../src/SnackbarProvider/merger.ts","../src/utils/styles.ts","../src/transitions/Collapse/Collapse.tsx","../src/SnackbarItem/utils.ts","../src/utils/createChainedFunction.ts","../src/utils/useEventCallback.ts","../src/SnackbarItem/Snackbar.tsx","../src/SnackbarContent/SnackbarContent.tsx","../src/ui/MaterialDesignContent/MaterialDesignContent.tsx","../src/SnackbarItem/SnackbarItem.tsx","../src/SnackbarContainer/SnackbarContainer.tsx","../src/utils/warning.ts","../src/SnackbarProvider/SnackbarProvider.tsx","../src/useSnackbar.ts"],"sourcesContent":["import React from 'react';\nimport { ProviderContext } from './types';\n\nconst noOp = () => {\n    return '';\n};\n\nexport default React.createContext<ProviderContext>({\n    enqueueSnackbar: noOp,\n    closeSnackbar: noOp,\n});\n","import { InternalSnack } from '../types';\n\nexport const breakpoints = {\n    downXs: '@media (max-width:599.95px)',\n    upSm: '@media (min-width:600px)',\n};\n\nconst capitalise = (text: string): string => text.charAt(0).toUpperCase() + text.slice(1);\n\nexport const originKeyExtractor = (anchor: InternalSnack['anchorOrigin']): string =>\n    `${capitalise(anchor.vertical)}${capitalise(anchor.horizontal)}`;\n\nexport const isDefined = (value: string | null | undefined | number): boolean => !!value || value === 0;\n","/**\n * BSD 3-Clause License\n *\n * Copyright (c) 2018, React Community\n * Forked from React (https://github.com/facebook/react) Copyright 2013-present, Facebook, Inc.\n * All rights reserved.\n *\n * Redistribution and use in source and binary forms, with or without\n * modification, are permitted provided that the following conditions are met:\n *\n * * Redistributions of source code must retain the above copyright notice, this\n * list of conditions and the following disclaimer.\n *\n * * Redistributions in binary form must reproduce the above copyright notice,\n * this list of conditions and the following disclaimer in the documentation\n * and/or other materials provided with the distribution.\n *\n * * Neither the name of the copyright holder nor the names of its\n * contributors may be used to endorse or promote products derived from\n * this software without specific prior written permission.\n *\n * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\n * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\n * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\n * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE\n * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL\n * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR\n * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER\n * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,\n * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\n * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n */\nimport React from 'react';\nimport { TransitionComponentProps, TransitionStatus } from '../../types';\n\nconst UNMOUNTED = 'unmounted';\nconst EXITED = 'exited';\nconst ENTERING = 'entering';\nconst ENTERED = 'entered';\nconst EXITING = 'exiting';\n\ninterface State {\n    status: TransitionStatus;\n}\n\ninterface NextCallback {\n    (): void;\n    cancel?: () => void;\n}\n\nclass Transition extends React.Component<TransitionComponentProps, State> {\n    appearStatus: TransitionStatus | null;\n\n    nextCallback: NextCallback | null;\n\n    constructor(props: TransitionComponentProps) {\n        super(props);\n\n        const { appear } = props;\n\n        let initialStatus: TransitionStatus;\n\n        this.appearStatus = null;\n\n        if (props.in) {\n            if (appear) {\n                initialStatus = EXITED;\n                this.appearStatus = ENTERING;\n            } else {\n                initialStatus = ENTERED;\n            }\n        } else if (props.unmountOnExit || props.mountOnEnter) {\n            initialStatus = UNMOUNTED;\n        } else {\n            initialStatus = EXITED;\n        }\n\n        this.state = { status: initialStatus };\n\n        this.nextCallback = null;\n    }\n\n    static getDerivedStateFromProps({ in: nextIn }: TransitionComponentProps, prevState: State) {\n        if (nextIn && prevState.status === UNMOUNTED) {\n            return { status: EXITED };\n        }\n        return null;\n    }\n\n    componentDidMount() {\n        this.updateStatus(true, this.appearStatus);\n    }\n\n    componentDidUpdate(prevProps: TransitionComponentProps) {\n        let nextStatus: TransitionStatus | null = null;\n        if (prevProps !== this.props) {\n            const { status } = this.state;\n\n            if (this.props.in) {\n                if (status !== ENTERING && status !== ENTERED) {\n                    nextStatus = ENTERING;\n                }\n            } else if (status === ENTERING || status === ENTERED) {\n                nextStatus = EXITING;\n            }\n        }\n        this.updateStatus(false, nextStatus);\n    }\n\n    componentWillUnmount() {\n        this.cancelNextCallback();\n    }\n\n    getTimeouts(): { exit: number; enter: number } {\n        const { timeout } = this.props;\n        let enter = timeout;\n        let exit = timeout;\n\n        if (timeout != null && typeof timeout !== 'number' && typeof timeout !== 'string') {\n            exit = timeout.exit;\n            enter = timeout.enter;\n        }\n        return {\n            exit: exit as number,\n            enter: enter as number,\n        };\n    }\n\n    updateStatus(mounting = false, nextStatus: TransitionStatus | null) {\n        if (nextStatus !== null) {\n            this.cancelNextCallback();\n\n            if (nextStatus === ENTERING) {\n                this.performEnter(mounting);\n            } else {\n                this.performExit();\n            }\n        } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n            this.setState({ status: UNMOUNTED });\n        }\n    }\n\n    get node() {\n        const node = this.props.nodeRef?.current;\n        if (!node) {\n            throw new Error('notistack - Custom snackbar is not refForwarding');\n        }\n        return node;\n    }\n\n    performEnter(mounting: boolean) {\n        const { enter } = this.props;\n        const isAppearing = mounting;\n\n        const timeouts = this.getTimeouts();\n\n        if (!mounting && !enter) {\n            this.safeSetState({ status: ENTERED }, () => {\n                if (this.props.onEntered) {\n                    this.props.onEntered(this.node, isAppearing);\n                }\n            });\n            return;\n        }\n\n        if (this.props.onEnter) {\n            this.props.onEnter(this.node, isAppearing);\n        }\n\n        this.safeSetState({ status: ENTERING }, () => {\n            if (this.props.onEntering) {\n                this.props.onEntering(this.node, isAppearing);\n            }\n\n            this.onTransitionEnd(timeouts.enter, () => {\n                this.safeSetState({ status: ENTERED }, () => {\n                    if (this.props.onEntered) {\n                        this.props.onEntered(this.node, isAppearing);\n                    }\n                });\n            });\n        });\n    }\n\n    performExit() {\n        const { exit } = this.props;\n        const timeouts = this.getTimeouts();\n\n        // no exit animation skip right to EXITED\n        if (!exit) {\n            this.safeSetState({ status: EXITED }, () => {\n                if (this.props.onExited) {\n                    this.props.onExited(this.node);\n                }\n            });\n            return;\n        }\n\n        if (this.props.onExit) {\n            this.props.onExit(this.node);\n        }\n\n        this.safeSetState({ status: EXITING }, () => {\n            if (this.props.onExiting) {\n                this.props.onExiting(this.node);\n            }\n\n            this.onTransitionEnd(timeouts.exit, () => {\n                this.safeSetState({ status: EXITED }, () => {\n                    if (this.props.onExited) {\n                        this.props.onExited(this.node);\n                    }\n                });\n            });\n        });\n    }\n\n    cancelNextCallback() {\n        if (this.nextCallback !== null && this.nextCallback.cancel) {\n            this.nextCallback.cancel();\n            this.nextCallback = null;\n        }\n    }\n\n    safeSetState(nextState: State, callback: () => void) {\n        callback = this.setNextCallback(callback);\n        this.setState(nextState, callback);\n    }\n\n    setNextCallback(callback: () => void) {\n        let active = true;\n\n        this.nextCallback = () => {\n            if (active) {\n                active = false;\n                this.nextCallback = null;\n\n                callback();\n            }\n        };\n\n        (this.nextCallback as NextCallback).cancel = () => {\n            active = false;\n        };\n\n        return this.nextCallback;\n    }\n\n    onTransitionEnd(timeout: number, handler: () => void) {\n        this.setNextCallback(handler);\n        const doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n        if (!this.node || doesNotHaveTimeoutOrListener) {\n            setTimeout(this.nextCallback as NextCallback, 0);\n            return;\n        }\n\n        if (this.props.addEndListener) {\n            this.props.addEndListener(this.node, this.nextCallback as NextCallback);\n        }\n\n        if (timeout != null) {\n            setTimeout(this.nextCallback as NextCallback, timeout);\n        }\n    }\n\n    render() {\n        const { status } = this.state;\n\n        if (status === UNMOUNTED) {\n            return null;\n        }\n\n        const {\n            children,\n            // filter props for `Transition`\n            in: _in,\n            mountOnEnter: _mountOnEnter,\n            unmountOnExit: _unmountOnExit,\n            appear: _appear,\n            enter: _enter,\n            exit: _exit,\n            timeout: _timeout,\n            addEndListener: _addEndListener,\n            onEnter: _onEnter,\n            onEntering: _onEntering,\n            onEntered: _onEntered,\n            onExit: _onExit,\n            onExiting: _onExiting,\n            onExited: _onExited,\n            nodeRef: _nodeRef,\n            ...childProps\n        } = this.props;\n\n        return children(status, childProps);\n    }\n}\n\nfunction noop() {\n    //\n}\n\n(Transition as any).defaultProps = {\n    in: false,\n    mountOnEnter: false,\n    unmountOnExit: false,\n    appear: false,\n    enter: true,\n    exit: true,\n\n    onEnter: noop,\n    onEntering: noop,\n    onEntered: noop,\n\n    onExit: noop,\n    onExiting: noop,\n    onExited: noop,\n};\n\nexport default Transition;\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\n\n/**\n * passes {value} to {ref}\n *\n * Useful if you want to expose the ref of an inner component to the public API\n * while still using it inside the component.\n * @param ref A ref callback or ref object. If anything falsy, this is a no-op.\n */\nfunction setRef<T>(\n    ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,\n    value: T | null\n): void {\n    if (typeof ref === 'function') {\n        ref(value);\n    } else if (ref) {\n        ref.current = value;\n    }\n}\n\nexport default function useForkRef<Instance>(\n    refA: React.Ref<Instance> | null | undefined,\n    refB: React.Ref<Instance> | null | undefined\n): React.Ref<Instance> | null {\n    /**\n     * This will create a new function if the ref props change and are defined.\n     * This means react will call the old forkRef with `null` and the new forkRef\n     * with the ref. Cleanup naturally emerges from this behavior.\n     */\n    return React.useMemo(() => {\n        if (refA == null && refB == null) {\n            return null;\n        }\n        return (refValue) => {\n            setRef(refA, refValue);\n            setRef(refB, refValue);\n        };\n    }, [refA, refB]);\n}\n","import { TransitionDuration } from '../types';\n\ninterface ComponentProps {\n    style?: React.CSSProperties | undefined;\n    /**\n     * number: 400\n     * TransitionDuration: { enter: 200, exit: 400 }\n     */\n    timeout: number | TransitionDuration;\n    mode: 'enter' | 'exit';\n}\n\ninterface TransitionPropsReturnType {\n    duration: number;\n    easing: string | undefined;\n    delay: string | undefined;\n}\n\nexport default function getTransitionProps(props: ComponentProps): TransitionPropsReturnType {\n    const { timeout, style = {}, mode } = props;\n    return {\n        duration: typeof timeout === 'object' ? timeout[mode] || 0 : timeout,\n        easing: style.transitionTimingFunction,\n        delay: style.transitionDelay,\n    };\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nexport const defaultEasing = {\n    // This is the most common easing curve.\n    easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    // Objects enter the screen at full velocity from off-screen and\n    // slowly decelerate to a resting point.\n    easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',\n    // Objects leave the screen at full velocity. They do not decelerate when off-screen.\n    easeIn: 'cubic-bezier(0.4, 0, 1, 1)',\n    // The sharp curve is used by objects that may return to the screen at any time.\n    sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',\n};\n\n/**\n * CSS hack to force a repaint\n */\nexport const reflow = (node: Element): void => {\n    // We have to do something with node.scrollTop.\n    // Otherwise it's removed from the compiled code by optimisers\n    // eslint-disable-next-line no-self-assign\n    node.scrollTop = node.scrollTop;\n};\n","import { defaultEasing } from './utils';\n\ninterface CreateTransitionOptions {\n    duration: string | number;\n    easing?: string;\n    delay?: string | number;\n}\n\nconst formatMs = (milliseconds: number) => `${Math.round(milliseconds)}ms`;\n\nexport default function createTransition(\n    props: string | string[] = ['all'],\n    options?: CreateTransitionOptions\n): string {\n    const { duration = 300, easing = defaultEasing.easeInOut, delay = 0 } = options || {};\n\n    const properties = Array.isArray(props) ? props : [props];\n\n    return properties\n        .map((animatedProp) => {\n            const formattedDuration = typeof duration === 'string' ? duration : formatMs(duration);\n            const formattedDelay = typeof delay === 'string' ? delay : formatMs(delay);\n            return `${animatedProp} ${formattedDuration} ${easing} ${formattedDelay}`;\n        })\n        .join(',');\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport TransitionComponent from '../Transition';\nimport useForkRef from '../useForkRef';\nimport getTransitionProps from '../getTransitionProps';\nimport createTransition from '../createTransition';\nimport { defaultEasing, reflow } from '../utils';\nimport { SlideTransitionDirection, TransitionProps } from '../../types';\n\nfunction ownerDocument(node: Node | null | undefined): Document {\n    return (node && node.ownerDocument) || document;\n}\n\nfunction ownerWindow(node: Node | null): Window {\n    const doc = ownerDocument(node);\n    return doc.defaultView || window;\n}\n\n/**\n * Corresponds to 10 frames at 60 Hz.\n * A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.\n */\nfunction debounce(func: () => void, wait = 166) {\n    let timeout: ReturnType<typeof setTimeout>;\n    function debounced(...args: any[]) {\n        const later = () => {\n            // @ts-ignore\n            func.apply(this, args);\n        };\n        clearTimeout(timeout);\n        timeout = setTimeout(later, wait);\n    }\n\n    debounced.clear = () => {\n        clearTimeout(timeout);\n    };\n\n    return debounced;\n}\n\n/**\n * Translate the node so it can't be seen on the screen.\n * Later, we're going to translate the node back to its original location with `none`.\n */\nfunction getTranslateValue(\n    direction: SlideTransitionDirection,\n    node: HTMLElement & { fakeTransform?: string }\n): string {\n    const rect = node.getBoundingClientRect();\n    const containerWindow = ownerWindow(node);\n    let transform;\n\n    if (node.fakeTransform) {\n        transform = node.fakeTransform;\n    } else {\n        const computedStyle = containerWindow.getComputedStyle(node);\n        transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');\n    }\n\n    let offsetX = 0;\n    let offsetY = 0;\n\n    if (transform && transform !== 'none' && typeof transform === 'string') {\n        const transformValues = transform.split('(')[1].split(')')[0].split(',');\n        offsetX = parseInt(transformValues[4], 10);\n        offsetY = parseInt(transformValues[5], 10);\n    }\n\n    switch (direction) {\n        case 'left':\n            return `translateX(${containerWindow.innerWidth + offsetX - rect.left}px)`;\n        case 'right':\n            return `translateX(-${rect.left + rect.width - offsetX}px)`;\n        case 'up':\n            return `translateY(${containerWindow.innerHeight + offsetY - rect.top}px)`;\n        default:\n            // down\n            return `translateY(-${rect.top + rect.height - offsetY}px)`;\n    }\n}\n\nfunction setTranslateValue(direction: SlideTransitionDirection, node: HTMLElement | null): void {\n    if (!node) return;\n    const transform = getTranslateValue(direction, node);\n    if (transform) {\n        node.style.webkitTransform = transform;\n        node.style.transform = transform;\n    }\n}\n\nconst Slide = React.forwardRef<unknown, TransitionProps>((props, ref) => {\n    const {\n        children,\n        direction = 'down',\n        in: inProp,\n        style,\n        timeout = 0,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        ...other\n    } = props;\n\n    const nodeRef = React.useRef(null);\n    const handleRefIntermediary = useForkRef((children as any).ref, nodeRef);\n    const handleRef = useForkRef(handleRefIntermediary, ref);\n\n    const handleEnter: TransitionProps['onEnter'] = (node, isAppearing) => {\n        setTranslateValue(direction, node);\n        reflow(node);\n\n        if (onEnter) {\n            onEnter(node, isAppearing);\n        }\n    };\n\n    const handleEntering = (node: HTMLElement) => {\n        const easing = style?.transitionTimingFunction || defaultEasing.easeOut;\n        const transitionProps = getTransitionProps({\n            timeout,\n            mode: 'enter',\n            style: { ...style, transitionTimingFunction: easing },\n        });\n\n        node.style.webkitTransition = createTransition('-webkit-transform', transitionProps);\n        node.style.transition = createTransition('transform', transitionProps);\n\n        node.style.webkitTransform = 'none';\n        node.style.transform = 'none';\n    };\n\n    const handleExit: TransitionProps['onExit'] = (node) => {\n        const easing = style?.transitionTimingFunction || defaultEasing.sharp;\n        const transitionProps = getTransitionProps({\n            timeout,\n            mode: 'exit',\n            style: { ...style, transitionTimingFunction: easing },\n        });\n\n        node.style.webkitTransition = createTransition('-webkit-transform', transitionProps);\n        node.style.transition = createTransition('transform', transitionProps);\n\n        setTranslateValue(direction, node);\n\n        if (onExit) {\n            onExit(node);\n        }\n    };\n\n    const handleExited: TransitionProps['onExited'] = (node) => {\n        // No need for transitions when the component is hidden\n        node.style.webkitTransition = '';\n        node.style.transition = '';\n\n        if (onExited) {\n            onExited(node);\n        }\n    };\n\n    const updatePosition = React.useCallback(() => {\n        if (nodeRef.current) {\n            setTranslateValue(direction, nodeRef.current);\n        }\n    }, [direction]);\n\n    React.useEffect(() => {\n        // Skip configuration where the position is screen size invariant.\n        if (inProp || direction === 'down' || direction === 'right') {\n            return undefined;\n        }\n\n        const handleResize = debounce(() => {\n            if (nodeRef.current) {\n                setTranslateValue(direction, nodeRef.current);\n            }\n        });\n\n        const containerWindow = ownerWindow(nodeRef.current);\n        containerWindow.addEventListener('resize', handleResize);\n        return () => {\n            handleResize.clear();\n            containerWindow.removeEventListener('resize', handleResize);\n        };\n    }, [direction, inProp]);\n\n    React.useEffect(() => {\n        if (!inProp) {\n            // We need to update the position of the drawer when the direction change and\n            // when it's hidden.\n            updatePosition();\n        }\n    }, [inProp, updatePosition]);\n\n    return (\n        <TransitionComponent\n            appear\n            nodeRef={nodeRef}\n            onEnter={handleEnter}\n            onEntered={onEntered}\n            onEntering={handleEntering}\n            onExit={handleExit}\n            onExited={handleExited}\n            in={inProp}\n            timeout={timeout}\n            {...other}\n        >\n            {(state, childProps) =>\n                React.cloneElement(children as any, {\n                    ref: handleRef,\n                    style: {\n                        visibility: state === 'exited' && !inProp ? 'hidden' : undefined,\n                        ...style,\n                        ...(children as any).props.style,\n                    },\n                    ...childProps,\n                })\n            }\n        </TransitionComponent>\n    );\n});\n\nSlide.displayName = 'Slide';\n\nexport default Slide;\n","import React from 'react';\n\nconst SvgIcon = (props: { children: JSX.Element }) => (\n    <svg\n        viewBox=\"0 0 24 24\"\n        focusable=\"false\"\n        style={{\n            fontSize: 20,\n            marginInlineEnd: 8,\n            userSelect: 'none',\n            width: '1em',\n            height: '1em',\n            display: 'inline-block',\n            fill: 'currentColor',\n            flexShrink: 0,\n        }}\n        {...props}\n    />\n);\n\nconst CheckIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z\"\n        />\n    </SvgIcon>\n);\n\nconst WarningIcon: React.FC = () => (\n    <SvgIcon>\n        <path d=\"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z\" />\n    </SvgIcon>\n);\n\nconst ErrorIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z\"\n        />\n    </SvgIcon>\n);\n\nconst InfoIcon: React.FC = () => (\n    <SvgIcon>\n        <path\n            d=\"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z\"\n        />\n    </SvgIcon>\n);\n\nconst defaultIconVariants: Record<string, React.ReactNode> = {\n    default: undefined,\n    success: <CheckIcon />,\n    warning: <WarningIcon />,\n    error: <ErrorIcon />,\n    info: <InfoIcon />,\n};\n\nexport default defaultIconVariants;\n","import Slide from '../transitions/Slide';\nimport defaultIconVariants from '../utils/defaultIconVariants';\nimport { InternalSnack } from '../types';\n\nexport const defaults = {\n    maxSnack: 3,\n    persist: false,\n    hideIconVariant: false,\n    disableWindowBlurListener: false,\n    variant: 'default',\n    autoHideDuration: 5000,\n    iconVariant: defaultIconVariants,\n    anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n    TransitionComponent: Slide,\n    transitionDuration: {\n        enter: 225,\n        exit: 195,\n    },\n};\n\n/**\n * Derives the right autoHideDuration taking into account the following\n * prority order: 1: Options, 2: Props, 3: default fallback\n */\nconst getAutoHideDuration = (optionsDuration: any, propsDuration: any) => {\n    const isNumberOrNull = (numberish: number | null) => typeof numberish === 'number' || numberish === null;\n\n    if (isNumberOrNull(optionsDuration)) return optionsDuration;\n    if (isNumberOrNull(propsDuration)) return propsDuration;\n    return defaults.autoHideDuration;\n};\n\n/**\n * Derives the right transitionDuration taking into account the following\n * prority order: 1: Options, 2: Props, 3: default fallback\n */\nconst getTransitionDuration = (optionsDuration: any, propsDuration: any) => {\n    const is = (item: any, types: string[]) => types.some((t) => typeof item === t);\n\n    if (is(optionsDuration, ['string', 'number'])) {\n        return optionsDuration;\n    }\n\n    if (is(optionsDuration, ['object'])) {\n        return {\n            ...defaults.transitionDuration,\n            ...(is(propsDuration, ['object']) && propsDuration),\n            ...optionsDuration,\n        };\n    }\n\n    if (is(propsDuration, ['string', 'number'])) {\n        return propsDuration;\n    }\n\n    if (is(propsDuration, ['object'])) {\n        return {\n            ...defaults.transitionDuration,\n            ...propsDuration,\n        };\n    }\n\n    return defaults.transitionDuration;\n};\n\nexport const merge =\n    (options: any, props: any) =>\n    (name: keyof InternalSnack, shouldObjectMerge = false): any => {\n        if (shouldObjectMerge) {\n            return {\n                ...(defaults as any)[name],\n                ...props[name],\n                ...options[name],\n            };\n        }\n\n        if (name === 'autoHideDuration') {\n            return getAutoHideDuration(options.autoHideDuration, props.autoHideDuration);\n        }\n\n        if (name === 'transitionDuration') {\n            return getTransitionDuration(options.transitionDuration, props.transitionDuration);\n        }\n\n        return options[name] || props[name] || (defaults as any)[name];\n    };\n","import React from 'react';\nimport { css, CSSAttribute } from 'goober';\nimport type { MakeStyles } from '../types';\n\nexport function defaultMakeStyles<S extends { [key: string]: CSSAttribute }>(\n    styles: S\n): { [key in keyof S]: string } {\n    return Object.entries(styles).reduce(\n        (acc, [key, value]) => ({\n            ...acc,\n            [key]: css(value),\n        }),\n        {} as { [key in keyof S]: string }\n    );\n}\n\nexport const MakeStylesContext = React.createContext<MakeStyles>(defaultMakeStyles);\n\nexport function useStyles<S extends { [key: string]: CSSAttribute }>(styles: S): { [key in keyof S]: string } {\n    const makeStyles = React.useContext(MakeStylesContext);\n    return React.useMemo(() => makeStyles(styles), [makeStyles, styles]);\n}\n\nexport const ComponentClasses = {\n    SnackbarContainer: 'notistack-SnackbarContainer',\n    Snackbar: 'notistack-Snackbar',\n    CollapseWrapper: 'notistack-CollapseWrapper',\n    MuiContent: 'notistack-MuiContent',\n    MuiContentVariant: (variant: string) => `notistack-MuiContent-${variant}`,\n};\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport { reflow } from '../utils';\nimport TransitionComponent from '../Transition';\nimport useForkRef from '../useForkRef';\nimport { TransitionProps } from '../../types';\nimport getTransitionProps from '../getTransitionProps';\nimport createTransition from '../createTransition';\nimport { ComponentClasses, useStyles } from '../../utils/styles';\n\nconst styles = {\n    root: {\n        height: 0,\n    },\n    entered: {\n        height: 'auto',\n    },\n};\n\nconst collapsedSize = '0px';\nconst timeout = 175;\n\ninterface CollapseProps {\n    children: JSX.Element;\n    in: boolean;\n    onExited: TransitionProps['onExited'];\n}\n\nconst Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {\n    const classes = useStyles(styles);\n    const { children, in: inProp, onExited } = props;\n\n    const wrapperRef = React.useRef<HTMLDivElement>(null);\n\n    const nodeRef = React.useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, nodeRef);\n\n    const getWrapperSize = () => (wrapperRef.current ? wrapperRef.current.clientHeight : 0);\n\n    const handleEnter: TransitionProps['onEnter'] = (node) => {\n        node.style.height = collapsedSize;\n    };\n\n    const handleEntering = (node: HTMLElement) => {\n        const wrapperSize = getWrapperSize();\n\n        const { duration: transitionDuration, easing } = getTransitionProps({\n            timeout,\n            mode: 'enter',\n        });\n\n        node.style.transitionDuration =\n            typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n\n        node.style.height = `${wrapperSize}px`;\n        node.style.transitionTimingFunction = easing || '';\n    };\n\n    const handleEntered: TransitionProps['onEntered'] = (node) => {\n        node.style.height = 'auto';\n    };\n\n    const handleExit: TransitionProps['onExit'] = (node) => {\n        node.style.height = `${getWrapperSize()}px`;\n    };\n\n    const handleExiting = (node: HTMLElement) => {\n        reflow(node);\n\n        const { duration: transitionDuration, easing } = getTransitionProps({\n            timeout,\n            mode: 'exit',\n        });\n\n        node.style.transitionDuration =\n            typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n        node.style.height = collapsedSize;\n        node.style.transitionTimingFunction = easing || '';\n    };\n\n    return (\n        <TransitionComponent\n            in={inProp}\n            unmountOnExit\n            onEnter={handleEnter}\n            onEntered={handleEntered}\n            onEntering={handleEntering}\n            onExit={handleExit}\n            onExited={onExited}\n            onExiting={handleExiting}\n            nodeRef={nodeRef}\n            timeout={timeout}\n        >\n            {(state, childProps) => (\n                <div\n                    ref={handleRef}\n                    className={clsx(classes.root, { [classes.entered]: state === 'entered' })}\n                    style={{\n                        pointerEvents: 'all',\n                        overflow: 'hidden',\n                        minHeight: collapsedSize,\n                        transition: createTransition('height'),\n                        ...(state === 'entered' && {\n                            overflow: 'visible',\n                        }),\n                        ...(state === 'exited' &&\n                            !inProp && {\n                                visibility: 'hidden',\n                            }),\n                    }}\n                    {...childProps}\n                >\n                    <div\n                        ref={wrapperRef}\n                        className={ComponentClasses.CollapseWrapper}\n                        // Hack to get children with a negative margin to not falsify the height computation.\n                        style={{ display: 'flex', width: '100%' }}\n                    >\n                        {children}\n                    </div>\n                </div>\n            )}\n        </TransitionComponent>\n    );\n});\n\nCollapse.displayName = 'Collapse';\n\nexport default Collapse;\n","import {\n    InternalSnack,\n    SlideTransitionDirection,\n    SnackbarOrigin,\n    SnackbarClassKey,\n    SnackbarProviderProps,\n    ClassNameMap,\n    ContainerClassKey,\n} from '../types';\nimport { originKeyExtractor } from '../utils';\n\nconst direction: Record<string, SlideTransitionDirection> = {\n    right: 'left',\n    left: 'right',\n    bottom: 'up',\n    top: 'down',\n};\n\nexport const getSlideDirection = (anchorOrigin: InternalSnack['anchorOrigin']): SlideTransitionDirection => {\n    if (anchorOrigin.horizontal !== 'center') {\n        return direction[anchorOrigin.horizontal];\n    }\n    return direction[anchorOrigin.vertical];\n};\n\n/** Tranforms classes name */\nexport const toSnackbarAnchorOrigin = (anchorOrigin: SnackbarOrigin): SnackbarClassKey =>\n    `anchorOrigin${originKeyExtractor(anchorOrigin)}` as SnackbarClassKey;\n\n/**\n * Omit SnackbarContainer class keys that are not needed for SnackbarItem\n */\nexport const keepSnackbarClassKeys = (\n    classes: SnackbarProviderProps['classes'] = {}\n): Partial<ClassNameMap<SnackbarClassKey>> => {\n    const containerClasses: Record<ContainerClassKey, true> = {\n        containerRoot: true,\n        containerAnchorOriginTopCenter: true,\n        containerAnchorOriginBottomCenter: true,\n        containerAnchorOriginTopRight: true,\n        containerAnchorOriginBottomRight: true,\n        containerAnchorOriginTopLeft: true,\n        containerAnchorOriginBottomLeft: true,\n    };\n    return (Object.keys(classes) as ContainerClassKey[])\n        .filter((key) => !containerClasses[key])\n        .reduce((obj, key) => ({ ...obj, [key]: classes[key] }), {});\n};\n","import { SnackbarKey } from 'src/types';\n\nconst noOp = () => {\n    /* */\n};\n\n/**\n * Credit to MUI team @ https://mui.com\n * Safe chained function.\n *\n * Will only create a new function if needed,\n * otherwise will pass back existing functions or null.\n */\nexport default function createChainedFunction<Args extends any[], This>(\n    funcs: Array<((this: This, ...args: Args) => any) | undefined>,\n    snackbarId?: SnackbarKey\n): (this: This, ...args: Args) => void {\n    // @ts-ignore\n    return funcs.reduce((acc, func) => {\n        if (func === null || func === undefined) {\n            return acc;\n        }\n\n        return function chainedFunction(...args) {\n            const argums = [...args] as any;\n            if (snackbarId && argums.indexOf(snackbarId) === -1) {\n                argums.push(snackbarId);\n            }\n            // @ts-ignore\n            acc.apply(this, argums);\n            func.apply(this, argums);\n        };\n    }, noOp);\n}\n","/**\n * Credit to MUI team @ https://mui.com\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nimport * as React from 'react';\n\nconst useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n\nexport default function useEventCallback<Args extends unknown[], Return>(\n    fn: (...args: Args) => Return\n): (...args: Args) => Return {\n    const ref = React.useRef(fn);\n    useEnhancedEffect(() => {\n        ref.current = fn;\n    });\n    return React.useCallback(\n        (...args: Args) =>\n            // @ts-expect-error hide `this`\n            (0, ref.current)(...args),\n        []\n    );\n}\n","/**\n * Credit to MUI team @ https://mui.com\n */\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport useEventCallback from '../utils/useEventCallback';\nimport { CloseReason, SharedProps, SnackbarKey } from '../types';\nimport { ComponentClasses } from '../utils/styles';\n\ninterface SnackbarProps extends Required<Pick<SharedProps, 'disableWindowBlurListener' | 'onClose'>> {\n    open: boolean;\n    id: SnackbarKey;\n    className: string;\n    children: JSX.Element;\n    autoHideDuration: number | null | undefined;\n    SnackbarProps: SharedProps['SnackbarProps'];\n}\n\nconst Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>((props, ref) => {\n    const {\n        children,\n        className,\n        autoHideDuration,\n        disableWindowBlurListener = false,\n        onClose,\n        id,\n        open,\n        SnackbarProps = {},\n    } = props;\n\n    const timerAutoHide = React.useRef<ReturnType<typeof setTimeout>>();\n\n    const handleClose = useEventCallback((...args: [null, CloseReason, SnackbarKey]) => {\n        if (onClose) {\n            onClose(...args);\n        }\n    });\n\n    const setAutoHideTimer = useEventCallback((autoHideDurationParam?: number | null) => {\n        if (!onClose || autoHideDurationParam == null) {\n            return;\n        }\n\n        if (timerAutoHide.current) {\n            clearTimeout(timerAutoHide.current);\n        }\n        timerAutoHide.current = setTimeout(() => {\n            handleClose(null, 'timeout', id);\n        }, autoHideDurationParam);\n    });\n\n    React.useEffect(() => {\n        if (open) {\n            setAutoHideTimer(autoHideDuration);\n        }\n\n        return () => {\n            if (timerAutoHide.current) {\n                clearTimeout(timerAutoHide.current);\n            }\n        };\n    }, [open, autoHideDuration, setAutoHideTimer]);\n\n    /**\n     * Pause the timer when the user is interacting with the Snackbar\n     * or when the user hide the window.\n     */\n    const handlePause = () => {\n        if (timerAutoHide.current) {\n            clearTimeout(timerAutoHide.current);\n        }\n    };\n\n    /**\n     * Restart the timer when the user is no longer interacting with the Snackbar\n     * or when the window is shown back.\n     */\n    const handleResume = React.useCallback(() => {\n        if (autoHideDuration != null) {\n            setAutoHideTimer(autoHideDuration * 0.5);\n        }\n    }, [autoHideDuration, setAutoHideTimer]);\n\n    const handleMouseEnter: React.MouseEventHandler<HTMLDivElement> = (event) => {\n        if (SnackbarProps.onMouseEnter) {\n            SnackbarProps.onMouseEnter(event);\n        }\n        handlePause();\n    };\n\n    const handleMouseLeave: React.MouseEventHandler<HTMLDivElement> = (event) => {\n        if (SnackbarProps.onMouseLeave) {\n            SnackbarProps.onMouseLeave(event);\n        }\n        handleResume();\n    };\n\n    React.useEffect(() => {\n        if (!disableWindowBlurListener && open) {\n            window.addEventListener('focus', handleResume);\n            window.addEventListener('blur', handlePause);\n\n            return () => {\n                window.removeEventListener('focus', handleResume);\n                window.removeEventListener('blur', handlePause);\n            };\n        }\n\n        return undefined;\n    }, [disableWindowBlurListener, handleResume, open]);\n\n    return (\n        <div\n            ref={ref}\n            {...SnackbarProps}\n            className={clsx(ComponentClasses.Snackbar, className)}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n        >\n            {children}\n        </div>\n    );\n});\n\nSnackbar.displayName = 'Snackbar';\n\nexport default Snackbar;\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SnackbarContentProps } from '../types';\nimport { breakpoints } from '../utils';\nimport { useStyles } from '../utils/styles';\n\nconst styles = {\n    root: {\n        display: 'flex',\n        flexWrap: 'wrap',\n        flexGrow: 1,\n        [breakpoints.upSm]: {\n            flexGrow: 'initial',\n            minWidth: '288px',\n        },\n    },\n};\n\nconst SnackbarContent = forwardRef<HTMLDivElement, SnackbarContentProps>(({ className, ...props }, ref) => {\n    const classes = useStyles(styles);\n    return <div ref={ref} className={clsx(classes.root, className)} {...props} />;\n});\n\nSnackbarContent.displayName = 'SnackbarContent';\n\nexport default SnackbarContent;\n","import React, { memo, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport SnackbarContent from '../../SnackbarContent';\nimport { CustomContentProps } from '../../types';\nimport { ComponentClasses, useStyles } from '../../utils/styles';\n\nconst styles = {\n    root: {\n        backgroundColor: '#313131', // dark grey\n        fontSize: '0.875rem',\n        lineHeight: 1.43,\n        letterSpacing: '0.01071em',\n        color: '#fff',\n        alignItems: 'center',\n        padding: '6px 16px',\n        borderRadius: '4px',\n        boxShadow:\n            '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',\n    },\n    lessPadding: {\n        paddingLeft: `${8 * 2.5}px`,\n    },\n    default: {\n        backgroundColor: '#313131', // dark grey\n    },\n    success: {\n        backgroundColor: '#43a047', // green\n    },\n    error: {\n        backgroundColor: '#d32f2f', // dark red\n    },\n    warning: {\n        backgroundColor: '#ff9800', // amber\n    },\n    info: {\n        backgroundColor: '#2196f3', // nice blue\n    },\n    message: {\n        display: 'flex',\n        alignItems: 'center',\n        padding: '8px 0',\n    },\n    action: {\n        display: 'flex',\n        alignItems: 'center',\n        marginLeft: 'auto',\n        paddingLeft: '16px',\n        marginRight: '-8px',\n    },\n};\n\nconst ariaDescribedby = 'notistack-snackbar';\n\nconst MaterialDesignContent = forwardRef<HTMLDivElement, CustomContentProps>((props, forwardedRef) => {\n    const classes = useStyles(styles);\n    const {\n        id,\n        message,\n        action: componentOrFunctionAction,\n        iconVariant,\n        variant,\n        hideIconVariant,\n        style,\n        className,\n    } = props;\n\n    const icon = iconVariant[variant];\n\n    let action = componentOrFunctionAction;\n    if (typeof action === 'function') {\n        action = action(id);\n    }\n\n    return (\n        <SnackbarContent\n            ref={forwardedRef}\n            role=\"alert\"\n            aria-describedby={ariaDescribedby}\n            style={style}\n            className={clsx(\n                ComponentClasses.MuiContent,\n                ComponentClasses.MuiContentVariant(variant),\n                classes.root,\n                { [classes.lessPadding]: !hideIconVariant && icon },\n                classes[variant],\n                className\n            )}\n        >\n            <div id={ariaDescribedby} className={classes.message}>\n                {!hideIconVariant ? icon : null}\n                {message}\n            </div>\n            {action && <div className={classes.action}>{action}</div>}\n        </SnackbarContent>\n    );\n});\n\nMaterialDesignContent.displayName = 'MaterialDesignContent';\n\nexport default memo(MaterialDesignContent);\n","import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';\nimport clsx from 'clsx';\nimport Collapse from '../transitions/Collapse';\nimport { getSlideDirection, toSnackbarAnchorOrigin, keepSnackbarClassKeys } from './utils';\nimport {\n    TransitionHandlerProps,\n    SnackbarProviderProps,\n    CustomContentProps,\n    InternalSnack,\n    SharedProps,\n} from '../types';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport Snackbar from './Snackbar';\nimport { useStyles } from '../utils/styles';\nimport MaterialDesignContent from '../ui/MaterialDesignContent';\n\nconst styleRules = {\n    wrappedRoot: {\n        width: '100%',\n        position: 'relative',\n        transform: 'translateX(0)',\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n        minWidth: '288px',\n    },\n};\n\ninterface SnackbarItemProps extends Required<Pick<SnackbarProviderProps, 'onEntered' | 'onExited' | 'onClose'>> {\n    snack: InternalSnack;\n    classes: SnackbarProviderProps['classes'];\n    onEnter: SnackbarProviderProps['onEnter'];\n    onExit: SnackbarProviderProps['onExit'];\n    Component?: React.ComponentType<CustomContentProps>;\n}\n\nconst SnackbarItem: React.FC<SnackbarItemProps> = (props) => {\n    const styles = useStyles(styleRules);\n    const timeout = useRef<ReturnType<typeof setTimeout>>();\n    const [collapsed, setCollapsed] = useState(true);\n\n    const handleClose: NonNullable<SharedProps['onClose']> = createChainedFunction([\n        props.snack.onClose,\n        props.onClose,\n    ]);\n\n    const handleEntered: TransitionHandlerProps['onEntered'] = () => {\n        if (props.snack.requestClose) {\n            handleClose(null, 'instructed', props.snack.id);\n        }\n    };\n\n    const handleExitedScreen = useCallback((): void => {\n        timeout.current = setTimeout(() => {\n            setCollapsed((col) => !col);\n        }, 125);\n    }, []);\n\n    useEffect(\n        () => (): void => {\n            if (timeout.current) {\n                clearTimeout(timeout.current);\n            }\n        },\n        []\n    );\n\n    const { snack, classes: allClasses, Component = MaterialDesignContent } = props;\n\n    const classes = useMemo(() => keepSnackbarClassKeys(allClasses), [allClasses]);\n\n    const {\n        open,\n        SnackbarProps,\n        TransitionComponent,\n        TransitionProps,\n        transitionDuration,\n        disableWindowBlurListener,\n        content: componentOrFunctionContent,\n        entered: ignoredEntered,\n        requestClose: ignoredRequestClose,\n        onEnter: ignoreOnEnter,\n        onEntered: ignoreOnEntered,\n        onExit: ignoreOnExit,\n        onExited: ignoreOnExited,\n        ...otherSnack\n    } = snack;\n\n    const transitionProps = {\n        direction: getSlideDirection(otherSnack.anchorOrigin),\n        timeout: transitionDuration,\n        ...TransitionProps,\n    };\n\n    let content = componentOrFunctionContent;\n    if (typeof content === 'function') {\n        content = content(otherSnack.id, otherSnack.message);\n    }\n\n    const callbacks: { [key in keyof TransitionHandlerProps]?: any } = (\n        ['onEnter', 'onEntered', 'onExit', 'onExited'] as (keyof TransitionHandlerProps)[]\n    ).reduce(\n        (acc, cbName) => ({\n            ...acc,\n            [cbName]: createChainedFunction([props.snack[cbName] as any, props[cbName] as any], otherSnack.id),\n        }),\n        {}\n    );\n\n    return (\n        <Collapse in={collapsed} onExited={callbacks.onExited}>\n            <Snackbar\n                open={open}\n                id={otherSnack.id}\n                disableWindowBlurListener={disableWindowBlurListener}\n                autoHideDuration={otherSnack.autoHideDuration}\n                className={clsx(\n                    styles.wrappedRoot,\n                    classes.root,\n                    classes[toSnackbarAnchorOrigin(otherSnack.anchorOrigin)]\n                )}\n                SnackbarProps={SnackbarProps}\n                onClose={handleClose}\n            >\n                <TransitionComponent\n                    {...transitionProps}\n                    appear\n                    in={open}\n                    onExit={callbacks.onExit}\n                    onExited={handleExitedScreen}\n                    onEnter={callbacks.onEnter}\n                    // order matters. first callbacks.onEntered to set entered: true,\n                    // then handleEntered to check if there's a request for closing\n                    onEntered={createChainedFunction([callbacks.onEntered, handleEntered], otherSnack.id)}\n                >\n                    {(content as React.ReactElement) || <Component {...otherSnack} />}\n                </TransitionComponent>\n            </Snackbar>\n        </Collapse>\n    );\n};\n\nexport default SnackbarItem;\n","import React, { memo } from 'react';\nimport clsx from 'clsx';\nimport createTransition from '../transitions/createTransition';\nimport { useStyles, ComponentClasses } from '../utils/styles';\nimport { breakpoints, originKeyExtractor } from '../utils';\nimport { ContainerClassKey, SnackbarProviderProps } from '../types';\n\nconst indents = {\n    view: { default: 20, dense: 4 },\n    snackbar: { default: 6, dense: 2 },\n};\n\nconst collapseWrapper = `.${ComponentClasses.CollapseWrapper}`;\n\nconst xsWidthMargin = 16;\n\nconst styleRules = {\n    root: {\n        boxSizing: 'border-box',\n        display: 'flex',\n        maxHeight: '100%',\n        position: 'fixed',\n        zIndex: 1400,\n        height: 'auto',\n        width: 'auto',\n        transition: createTransition(['top', 'right', 'bottom', 'left', 'max-width'], {\n            duration: 300,\n            easing: 'ease',\n        }),\n        // container itself is invisible and should not block clicks, clicks should be passed to its children\n        // a pointerEvents: all is applied in the collapse component\n        pointerEvents: 'none',\n        [collapseWrapper]: {\n            padding: `${indents.snackbar.default}px 0px`,\n            transition: 'padding 300ms ease 0ms',\n        },\n        maxWidth: `calc(100% - ${indents.view.default * 2}px)`,\n        [breakpoints.downXs]: {\n            width: '100%',\n            maxWidth: `calc(100% - ${xsWidthMargin * 2}px)`,\n        },\n    },\n    rootDense: {\n        [collapseWrapper]: {\n            padding: `${indents.snackbar.dense}px 0px`,\n        },\n    },\n    top: {\n        top: `${indents.view.default - indents.snackbar.default}px`,\n        flexDirection: 'column',\n    },\n    bottom: {\n        bottom: `${indents.view.default - indents.snackbar.default}px`,\n        flexDirection: 'column-reverse',\n    },\n    left: {\n        left: `${indents.view.default}px`,\n        [breakpoints.upSm]: {\n            alignItems: 'flex-start',\n        },\n        [breakpoints.downXs]: {\n            left: `${xsWidthMargin}px`,\n        },\n    },\n    right: {\n        right: `${indents.view.default}px`,\n        [breakpoints.upSm]: {\n            alignItems: 'flex-end',\n        },\n        [breakpoints.downXs]: {\n            right: `${xsWidthMargin}px`,\n        },\n    },\n    center: {\n        left: '50%',\n        transform: 'translateX(-50%)',\n        [breakpoints.upSm]: {\n            alignItems: 'center',\n        },\n    },\n};\n\ninterface SnackbarContainerProps {\n    children: React.ReactNode;\n    dense: SnackbarProviderProps['dense'];\n    anchorOrigin: NonNullable<SnackbarProviderProps['anchorOrigin']>;\n    classes: SnackbarProviderProps['classes'];\n}\n\nconst SnackbarContainer: React.FC<SnackbarContainerProps> = (props) => {\n    const styles = useStyles(styleRules);\n    const { classes = {}, anchorOrigin, dense, children } = props;\n\n    const combinedClassname = clsx(\n        ComponentClasses.SnackbarContainer,\n        styles[anchorOrigin.vertical],\n        styles[anchorOrigin.horizontal],\n        { [styles.rootDense]: dense },\n        styles.root, // root should come after others to override maxWidth\n        classes.containerRoot,\n        classes[`containerAnchorOrigin${originKeyExtractor(anchorOrigin)}` as ContainerClassKey]\n    );\n\n    return <div className={combinedClassname}>{children}</div>;\n};\n\nexport default memo(SnackbarContainer);\n","/* eslint-disable */\nconst __DEV__ = process.env.NODE_ENV !== 'production';\n\nconst messages = {\n    NO_PERSIST_ALL:\n        \"Reached maxSnack while all enqueued snackbars have 'persist' flag. Notistack will dismiss the oldest snackbar anyway to allow other ones in the queue to be presented.\",\n};\n\nexport default (messageKey: keyof typeof messages): void => {\n    if (!__DEV__) return;\n\n    const message = messages[messageKey];\n    if (typeof console !== 'undefined') {\n        console.error(`WARNING - notistack: ${message}`);\n    }\n    try {\n        throw new Error(message);\n    } catch (x) {}\n};\n","import React, { Component, isValidElement } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport SnackbarContext from '../SnackbarContext';\nimport { originKeyExtractor, isDefined } from '../utils';\nimport { defaults, merge } from './merger';\nimport SnackbarItem from '../SnackbarItem';\nimport SnackbarContainer from '../SnackbarContainer';\nimport warning from '../utils/warning';\nimport {\n    SnackbarProviderProps,\n    SnackbarKey,\n    ProviderContext,\n    TransitionHandlerProps,\n    InternalSnack,\n    OptionsObject,\n    SharedProps,\n    SnackbarMessage,\n} from '../types';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport { MakeStylesContext, defaultMakeStyles } from '../utils/styles';\n\nconst isOptions = (\n    messageOrOptions: SnackbarMessage | (OptionsObject & { message?: SnackbarMessage })\n): messageOrOptions is OptionsObject & { message?: SnackbarMessage } => {\n    const isMessage = typeof messageOrOptions === 'string' || isValidElement(messageOrOptions);\n    return !isMessage;\n};\n\ntype Reducer = (state: State) => State;\ntype SnacksByPosition = { [key: string]: InternalSnack[] };\n\ninterface State {\n    snacks: InternalSnack[];\n    queue: InternalSnack[];\n    contextValue: ProviderContext;\n}\n\nexport let enqueueSnackbar: ProviderContext['enqueueSnackbar'];\nexport let closeSnackbar: ProviderContext['closeSnackbar'];\n\nclass SnackbarProvider extends Component<SnackbarProviderProps, State> {\n    constructor(props: SnackbarProviderProps) {\n        super(props);\n        enqueueSnackbar = this.enqueueSnackbar;\n        closeSnackbar = this.closeSnackbar;\n\n        this.state = {\n            snacks: [],\n            queue: [],\n            contextValue: {\n                enqueueSnackbar: this.enqueueSnackbar.bind(this),\n                closeSnackbar: this.closeSnackbar.bind(this),\n            },\n        };\n    }\n\n    get maxSnack(): number {\n        return this.props.maxSnack || defaults.maxSnack;\n    }\n\n    /**\n     * Adds a new snackbar to the queue to be presented.\n     * Returns generated or user defined key referencing the new snackbar or null\n     */\n    enqueueSnackbar = (\n        messageOrOptions: SnackbarMessage | (OptionsObject & { message?: SnackbarMessage }),\n        optsOrUndefined: OptionsObject = {}\n    ): SnackbarKey => {\n        if (messageOrOptions === undefined || messageOrOptions === null) {\n            throw new Error('enqueueSnackbar called with invalid argument');\n        }\n\n        const opts = isOptions(messageOrOptions) ? messageOrOptions : optsOrUndefined;\n\n        const message: SnackbarMessage | undefined = isOptions(messageOrOptions)\n            ? messageOrOptions.message\n            : messageOrOptions;\n\n        const { key, preventDuplicate, ...options } = opts;\n\n        const hasSpecifiedKey = isDefined(key);\n        const id = hasSpecifiedKey ? (key as SnackbarKey) : new Date().getTime() + Math.random();\n\n        const merger = merge(options, this.props);\n        const snack: InternalSnack = {\n            id,\n            ...options,\n            message,\n            open: true,\n            entered: false,\n            requestClose: false,\n            persist: merger('persist'),\n            action: merger('action'),\n            content: merger('content'),\n            variant: merger('variant'),\n            anchorOrigin: merger('anchorOrigin'),\n            disableWindowBlurListener: merger('disableWindowBlurListener'),\n            autoHideDuration: merger('autoHideDuration'),\n            hideIconVariant: merger('hideIconVariant'),\n            TransitionComponent: merger('TransitionComponent'),\n            transitionDuration: merger('transitionDuration'),\n            TransitionProps: merger('TransitionProps', true),\n            iconVariant: merger('iconVariant', true),\n            style: merger('style', true),\n            SnackbarProps: merger('SnackbarProps', true),\n            className: clsx(this.props.className, options.className),\n        };\n\n        if (snack.persist) {\n            snack.autoHideDuration = undefined;\n        }\n\n        this.setState((state) => {\n            if ((preventDuplicate === undefined && this.props.preventDuplicate) || preventDuplicate) {\n                const compareFunction = (item: InternalSnack): boolean =>\n                    hasSpecifiedKey ? item.id === id : item.message === message;\n\n                const inQueue = state.queue.findIndex(compareFunction) > -1;\n                const inView = state.snacks.findIndex(compareFunction) > -1;\n                if (inQueue || inView) {\n                    return state;\n                }\n            }\n\n            return this.handleDisplaySnack({\n                ...state,\n                queue: [...state.queue, snack],\n            });\n        });\n\n        return id;\n    };\n\n    /**\n     * Reducer: Display snack if there's space for it. Otherwise, immediately\n     * begin dismissing the oldest message to start showing the new one.\n     */\n    handleDisplaySnack: Reducer = (state) => {\n        const { snacks } = state;\n        if (snacks.length >= this.maxSnack) {\n            return this.handleDismissOldest(state);\n        }\n        return this.processQueue(state);\n    };\n\n    /**\n     * Reducer: Display items (notifications) in the queue if there's space for them.\n     */\n    processQueue: Reducer = (state) => {\n        const { queue, snacks } = state;\n        if (queue.length > 0) {\n            return {\n                ...state,\n                snacks: [...snacks, queue[0]],\n                queue: queue.slice(1, queue.length),\n            };\n        }\n        return state;\n    };\n\n    /**\n     * Reducer: Hide oldest snackbar on the screen because there exists a new one which we have to display.\n     * (ignoring the one with 'persist' flag. i.e. explicitly told by user not to get dismissed).\n     *\n     * Note 1: If there is already a message leaving the screen, no new messages are dismissed.\n     * Note 2: If the oldest message has not yet entered the screen, only a request to close the\n     *         snackbar is made. Once it entered the screen, it will be immediately dismissed.\n     */\n    handleDismissOldest: Reducer = (state) => {\n        if (state.snacks.some((item) => !item.open || item.requestClose)) {\n            return state;\n        }\n\n        let popped = false;\n        let ignore = false;\n\n        const persistentCount = state.snacks.reduce(\n            (acc, current) => acc + (current.open && current.persist ? 1 : 0),\n            0\n        );\n\n        if (persistentCount === this.maxSnack) {\n            warning('NO_PERSIST_ALL');\n            ignore = true;\n        }\n\n        const snacks = state.snacks.map((item) => {\n            if (!popped && (!item.persist || ignore)) {\n                popped = true;\n\n                if (!item.entered) {\n                    return {\n                        ...item,\n                        requestClose: true,\n                    };\n                }\n\n                if (item.onClose) {\n                    item.onClose(null, 'maxsnack', item.id);\n                }\n\n                if (this.props.onClose) {\n                    this.props.onClose(null, 'maxsnack', item.id);\n                }\n\n                return {\n                    ...item,\n                    open: false,\n                };\n            }\n\n            return { ...item };\n        });\n\n        return { ...state, snacks };\n    };\n\n    /**\n     * Set the entered state of the snackbar with the given key.\n     */\n    handleEnteredSnack: TransitionHandlerProps['onEntered'] = (node, isAppearing, key) => {\n        if (!isDefined(key)) {\n            throw new Error('handleEnteredSnack Cannot be called with undefined key');\n        }\n\n        this.setState(({ snacks }) => ({\n            snacks: snacks.map((item) => (item.id === key ? { ...item, entered: true } : { ...item })),\n        }));\n    };\n\n    /**\n     * Hide a snackbar after its timeout.\n     */\n    handleCloseSnack: NonNullable<SharedProps['onClose']> = (event, reason, key) => {\n        // should not use createChainedFunction for onClose.\n        // because this.closeSnackbar called this function\n        if (this.props.onClose) {\n            this.props.onClose(event, reason, key);\n        }\n\n        const shouldCloseAll = key === undefined;\n\n        this.setState(({ snacks, queue }) => ({\n            snacks: snacks.map((item) => {\n                if (!shouldCloseAll && item.id !== key) {\n                    return { ...item };\n                }\n\n                return item.entered ? { ...item, open: false } : { ...item, requestClose: true };\n            }),\n            queue: queue.filter((item) => item.id !== key),\n        }));\n    };\n\n    /**\n     * Close snackbar with the given key\n     */\n    closeSnackbar: ProviderContext['closeSnackbar'] = (key) => {\n        // call individual snackbar onClose callback passed through options parameter\n        const toBeClosed = this.state.snacks.find((item) => item.id === key);\n        if (isDefined(key) && toBeClosed && toBeClosed.onClose) {\n            toBeClosed.onClose(null, 'instructed', key);\n        }\n\n        this.handleCloseSnack(null, 'instructed', key);\n    };\n\n    /**\n     * When we set open attribute of a snackbar to false (i.e. after we hide a snackbar),\n     * it leaves the screen and immediately after leaving animation is done, this method\n     * gets called. We remove the hidden snackbar from state and then display notifications\n     * waiting in the queue (if any). If after this process the queue is not empty, the\n     * oldest message is dismissed.\n     */\n    handleExitedSnack: TransitionHandlerProps['onExited'] = (node, key) => {\n        if (!isDefined(key)) {\n            throw new Error('handleExitedSnack Cannot be called with undefined key');\n        }\n\n        this.setState((state) => {\n            const newState = this.processQueue({\n                ...state,\n                snacks: state.snacks.filter((item) => item.id !== key),\n            });\n\n            if (newState.queue.length === 0) {\n                return newState;\n            }\n\n            return this.handleDismissOldest(newState);\n        });\n    };\n\n    render(): JSX.Element {\n        const { contextValue } = this.state;\n        const { domRoot, children, dense = false, Components = {}, classes, makeStyles = defaultMakeStyles } = this.props;\n\n        const categ = this.state.snacks.reduce<SnacksByPosition>((acc, current) => {\n            const category = originKeyExtractor(current.anchorOrigin);\n            const existingOfCategory = acc[category] || [];\n            return {\n                ...acc,\n                [category]: [...existingOfCategory, current],\n            };\n        }, {});\n\n        const snackbars = Object.keys(categ).map((origin) => {\n            const snacks = categ[origin];\n            const [nomineeSnack] = snacks;\n            return (\n                <SnackbarContainer\n                    key={origin}\n                    dense={dense}\n                    anchorOrigin={nomineeSnack.anchorOrigin}\n                    classes={classes}\n                >\n                    {snacks.map((snack) => (\n                        <SnackbarItem\n                            key={snack.id}\n                            snack={snack}\n                            classes={classes}\n                            Component={Components[snack.variant]}\n                            onClose={this.handleCloseSnack}\n                            onEnter={this.props.onEnter}\n                            onExit={this.props.onExit}\n                            onExited={createChainedFunction([this.handleExitedSnack, this.props.onExited], snack.id)}\n                            onEntered={createChainedFunction([this.handleEnteredSnack, this.props.onEntered], snack.id)}\n                        />\n                    ))}\n                </SnackbarContainer>\n            );\n        });\n\n        return (\n            <MakeStylesContext.Provider value={makeStyles}>\n                <SnackbarContext.Provider value={contextValue}>\n                    {children}\n                    {domRoot ? createPortal(snackbars, domRoot) : snackbars}\n                </SnackbarContext.Provider>\n            </MakeStylesContext.Provider>\n        );\n    }\n}\n\nexport default SnackbarProvider;\n","import { useContext } from 'react';\nimport SnackbarContext from './SnackbarContext';\nimport { ProviderContext } from './types';\n\nexport default (): ProviderContext => useContext(SnackbarContext);\n"],"names":["noOp","React","createContext","enqueueSnackbar","closeSnackbar","breakpoints","downXs","upSm","capitalise","text","charAt","toUpperCase","slice","originKeyExtractor","anchor","vertical","horizontal","isDefined","value","UNMOUNTED","EXITED","ENTERING","ENTERED","EXITING","Transition","props","appear","initialStatus","appearStatus","unmountOnExit","mountOnEnter","state","status","nextCallback","getDerivedStateFromProps","prevState","nextIn","componentDidMount","updateStatus","componentDidUpdate","prevProps","nextStatus","componentWillUnmount","cancelNextCallback","getTimeouts","timeout","enter","exit","mounting","performEnter","performExit","setState","isAppearing","timeouts","safeSetState","onEntered","node","onEnter","onEntering","onTransitionEnd","onExited","onExit","onExiting","cancel","nextState","callback","setNextCallback","active","handler","doesNotHaveTimeoutOrListener","addEndListener","setTimeout","render","children","_in","childProps","nodeRef","current","Error","Component","noop","defaultProps","setRef","ref","useForkRef","refA","refB","refValue","getTransitionProps","style","mode","duration","easing","transitionTimingFunction","delay","transitionDelay","defaultEasing","easeInOut","easeOut","easeIn","sharp","reflow","scrollTop","formatMs","milliseconds","Math","round","createTransition","options","properties","Array","isArray","map","animatedProp","formattedDuration","formattedDelay","join","ownerDocument","document","ownerWindow","doc","defaultView","window","debounce","func","wait","debounced","args","later","apply","clearTimeout","clear","getTranslateValue","direction","rect","getBoundingClientRect","containerWindow","transform","fakeTransform","computedStyle","getComputedStyle","getPropertyValue","offsetX","offsetY","transformValues","split","parseInt","innerWidth","left","width","innerHeight","top","height","setTranslateValue","webkitTransform","Slide","inProp","other","handleRefIntermediary","handleRef","handleEnter","handleEntering","transitionProps","webkitTransition","transition","handleExit","handleExited","updatePosition","undefined","handleResize","addEventListener","removeEventListener","TransitionComponent","visibility","displayName","SvgIcon","viewBox","focusable","fontSize","marginInlineEnd","userSelect","display","fill","flexShrink","CheckIcon","d","WarningIcon","ErrorIcon","InfoIcon","defaultIconVariants","success","warning","error","info","defaults","maxSnack","persist","hideIconVariant","disableWindowBlurListener","variant","autoHideDuration","iconVariant","anchorOrigin","transitionDuration","getAutoHideDuration","optionsDuration","propsDuration","isNumberOrNull","numberish","getTransitionDuration","is","item","types","some","t","merge","name","shouldObjectMerge","defaultMakeStyles","styles","Object","entries","reduce","acc","key","css","MakeStylesContext","useStyles","makeStyles","useContext","useMemo","ComponentClasses","SnackbarContainer","Snackbar","CollapseWrapper","MuiContent","MuiContentVariant","root","entered","collapsedSize","Collapse","classes","wrapperRef","getWrapperSize","clientHeight","wrapperSize","handleEntered","handleExiting","className","clsx","pointerEvents","overflow","minHeight","right","bottom","getSlideDirection","toSnackbarAnchorOrigin","keepSnackbarClassKeys","containerClasses","containerRoot","containerAnchorOriginTopCenter","containerAnchorOriginBottomCenter","containerAnchorOriginTopRight","containerAnchorOriginBottomRight","containerAnchorOriginTopLeft","containerAnchorOriginBottomLeft","keys","filter","obj","createChainedFunction","funcs","snackbarId","chainedFunction","argums","indexOf","push","useEnhancedEffect","useEventCallback","fn","onClose","id","open","SnackbarProps","timerAutoHide","handleClose","setAutoHideTimer","autoHideDurationParam","handlePause","handleResume","handleMouseEnter","event","onMouseEnter","handleMouseLeave","onMouseLeave","flexWrap","flexGrow","minWidth","SnackbarContent","forwardRef","backgroundColor","lineHeight","letterSpacing","color","alignItems","padding","borderRadius","boxShadow","lessPadding","paddingLeft","message","action","marginLeft","marginRight","ariaDescribedby","MaterialDesignContent","forwardedRef","componentOrFunctionAction","icon","role","memo","styleRules","wrappedRoot","position","SnackbarItem","useRef","useState","collapsed","setCollapsed","snack","requestClose","handleExitedScreen","useCallback","col","useEffect","allClasses","TransitionProps","componentOrFunctionContent","content","ignoredEntered","otherSnack","callbacks","cbName","indents","view","dense","snackbar","collapseWrapper","xsWidthMargin","boxSizing","maxHeight","zIndex","maxWidth","rootDense","flexDirection","center","combinedClassname","__DEV__","process","env","NODE_ENV","messages","NO_PERSIST_ALL","messageKey","console","x","isOptions","messageOrOptions","isMessage","isValidElement","SnackbarProvider","optsOrUndefined","opts","preventDuplicate","hasSpecifiedKey","Date","getTime","random","merger","compareFunction","inQueue","queue","findIndex","inView","snacks","handleDisplaySnack","length","handleDismissOldest","processQueue","popped","ignore","persistentCount","reason","shouldCloseAll","toBeClosed","find","handleCloseSnack","newState","contextValue","bind","domRoot","Components","categ","category","existingOfCategory","snackbars","origin","nomineeSnack","handleExitedSnack","handleEnteredSnack","Provider","SnackbarContext","createPortal"],"mappings":"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"}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4e48f78f9d36..381d83d05216 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,6 +51,7 @@ patchedDependencies:
   '@types/react-highlight-words@0.20.0': f29881aac139c1fe526819717a60157afd2b12358d3d9c87c18f464666954689
   bloom-filters@3.0.0: a5e85bac08776b8696d4e85af25d3143c9b9a9895a2cc4b531d85639fe0eb30f
   gulp: f4316218fc0ee2671324cec1242936e896fb44878d3f60021eaca6bd669f43cb
+  notistack@3.0.2: 94efdc8000831bca496b1a3702560d127b8b4ba024a4a26d2a4fe325f2baedae
   react-devtools-inline@5.3.0: 51dda06a782a674a7cc25a64cf1787137ec9dc1079c38586eb3c017a3b961342
   react-use@17.5.0: d4ab26e7e9bf01f9c4ca5da3caefb5b44dee64b0382328e5a08df838b8d8a4f7
   reflect-metadata@0.1.13: 3c19db0a577da75ff3c875a0fa4ef586a0ca002a6f7935687a9cd524fea56f79
@@ -596,7 +597,7 @@ importers:
         version: 1.1.1
       notistack:
         specifier: ^3.0.2
-        version: 3.0.2(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
+        version: 3.0.2(patch_hash=94efdc8000831bca496b1a3702560d127b8b4ba024a4a26d2a4fe325f2baedae)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
       react-avatar-editor:
         specifier: ^13.0.2
         version: 13.0.2(@babel/core@7.27.1)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
@@ -2066,7 +2067,7 @@ importers:
         version: 7.0.0
       notistack:
         specifier: 3.0.2
-        version: 3.0.2(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
+        version: 3.0.2(patch_hash=94efdc8000831bca496b1a3702560d127b8b4ba024a4a26d2a4fe325f2baedae)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
       react-use:
         specifier: ^17.5.0
         version: 17.5.0(patch_hash=d4ab26e7e9bf01f9c4ca5da3caefb5b44dee64b0382328e5a08df838b8d8a4f7)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628)
@@ -21578,7 +21579,7 @@ snapshots:
 
   normalize-path@3.0.0: {}
 
-  notistack@3.0.2(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628):
+  notistack@3.0.2(patch_hash=94efdc8000831bca496b1a3702560d127b8b4ba024a4a26d2a4fe325f2baedae)(react-dom@0.0.0-experimental-58af67a8f8-20240628(react@0.0.0-experimental-58af67a8f8-20240628))(react@0.0.0-experimental-58af67a8f8-20240628):
     dependencies:
       clsx: 1.2.1
       csstype: 3.2.3
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 7252ce652443..b93cab289109 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -74,6 +74,7 @@ patchedDependencies:
   gulp: patches/gulp.patch
   ts-results-es: patches/ts-results-es.patch
   '@lingui/cli': patches/@lingui__cli.patch
+  notistack@3.0.2: patches/notistack@3.0.2.patch
 peerDependencyRules:
   ignoreMissing: []
   allowAny: