tek-wallet 0.0.806 → 0.0.807

package/dist/components/TekWallet/components/ui/AssetViewHeader/index.js

@@ -50,7 +50,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Text_1 = __importDefault(require("../Text"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var DrawerComponent_1 = __importStar(require("../DrawerComponent"));
 var useWallet_1 = __importDefault(require("../../../hooks/useWallet"));
 var compactWalletAddress_1 = __importDefault(require("../../../utils/compactWalletAddress"));
@@ -65,22 +65,23 @@ var Icon_1 = __importDefault(require("../Icon"));
 var AssetViewHeader = function () {
     var _a = (0, useWallet_1.default)(), masterWallet = _a.masterWallet, blockchainWallets = _a.blockchainWallets;
     var options = (0, TekWalletProvider_1.useWalletSetup)().options;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var modalRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "start", position: "relative", boxShadow: "0 0 1px 2px rgba(0, 0, 0, 0.03)", px: theme.mixins.customPadding.p16 }), children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: modalRef, trigger: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.row), { alignItems: "center", justifyContent: "start", textAlign: "center", gap: theme.mixins.gaps.g4, py: theme.mixins.customPadding.p8 }), theme.mixins.value), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1.25rem", height: "1.25rem" }, children: SvgPath_1.WALLET }), (0, compactWalletAddress_1.default)(masterWallet), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "0.625rem", height: "0.625rem" }, children: SvgPath_1.ARROW_DROP_DOWN })] }), direction: DrawerComponent_1.DRAWER_DIRECTION.TOP, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "start", position: "relative", boxShadow: "0 0 1px 2px rgba(0, 0, 0, 0.03)", px: theme.styleMixins.customPadding.p16 }), children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: modalRef, trigger: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.styleMixins.row), { alignItems: "center", justifyContent: "start", textAlign: "center", gap: theme.styleMixins.gaps.g4, py: theme.styleMixins.customPadding.p8 }), theme.styleMixins.value), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1.25rem", height: "1.25rem" }, children: SvgPath_1.WALLET }), (0, compactWalletAddress_1.default)(masterWallet), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "0.625rem", height: "0.625rem" }, children: SvgPath_1.ARROW_DROP_DOWN })] }), direction: DrawerComponent_1.DRAWER_DIRECTION.TOP, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                         width: "100%",
                         height: "fit-content",
-                        backgroundColor: "white",
-                        padding: theme.mixins.customPadding.p16,
-                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.mixins.headerTitle), { py: theme.mixins.customPadding.p8, textAlign: "left" }), children: "Wallet address" }), (0, jsx_runtime_1.jsx)(CloseModal_1.default, { onClick: function () { var _a; return (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.close(); } })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), children: [!!masterWallet && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: masterWallet !== null && masterWallet !== void 0 ? masterWallet : "", messageSuccess: "Copied Internal address", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ py: theme.mixins.customPadding.p8 }, theme.mixins.row), { justifyContent: "space-between", alignItems: "center", gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1.75rem", height: "1.75rem", opacity: 0.7 }, children: SvgPath_1.WALLET }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.mixins.listTitle), children: "Internal wallet" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.mixins.listDescription), children: (0, compactWalletAddress_1.default)(masterWallet) })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1rem", height: "1rem" }, children: SvgPath_1.IC_COPY })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                                                my: theme.mixins.customPadding.p8,
-                                            } })] })), blockchainWallets === null || blockchainWallets === void 0 ? void 0 : blockchainWallets.map(function (wallet, index) { return ((0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: wallet.blockchainAddress, messageSuccess: "Copied ".concat(wallet.networkName, " address"), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ py: theme.mixins.customPadding.p8 }, theme.mixins.row), { gap: theme.mixins.gaps.g8, justifyContent: "space-between", alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: wallet.networkIcon, width: 28, sx: { borderRadius: theme.mixins.customRadius.full } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.mixins.listTitle), children: wallet.networkName }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.mixins.listDescription), children: (0, compactWalletAddress_1.default)(wallet.blockchainAddress) })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1rem", height: "1rem" }, children: SvgPath_1.IC_COPY })] }) }, wallet.blockchainAddress + index)); })] })] }) }), (0, jsx_runtime_1.jsx)(link_1.default, { href: "".concat((options === null || options === void 0 ? void 0 : options.basePath) || "", "/tek-wallet/").concat(TekWalletView_1.TekWalletViewRoutes.SETTING), children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
+                        backgroundColor: "background.default",
+                        padding: theme.styleMixins.customPadding.p16,
+                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "div", sx: __assign(__assign({}, theme.styleMixins.headerTitle), { py: theme.styleMixins.customPadding.p8, textAlign: "left" }), children: "Wallet address" }), (0, jsx_runtime_1.jsx)(CloseModal_1.default, { onClick: function () { var _a; return (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.close(); } })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.column), children: [!!masterWallet && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: masterWallet !== null && masterWallet !== void 0 ? masterWallet : "", messageSuccess: "Copied Internal address", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ py: theme.styleMixins.customPadding.p8 }, theme.styleMixins.row), { justifyContent: "space-between", alignItems: "center", gap: theme.styleMixins.gaps.g8, color: "text.primary" }), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1.75rem", height: "1.75rem", opacity: 0.7 }, children: SvgPath_1.WALLET }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.column), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.listTitle), { color: "inherit" }), children: "Internal wallet" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.styleMixins.listDescription), children: (0, compactWalletAddress_1.default)(masterWallet) })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1rem", height: "1rem" }, children: SvgPath_1.IC_COPY })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                                my: theme.styleMixins.customPadding.p8,
+                                            } })] })), blockchainWallets === null || blockchainWallets === void 0 ? void 0 : blockchainWallets.map(function (wallet, index) { return ((0, jsx_runtime_1.jsx)(CopyTextComponent_1.default, { value: wallet.blockchainAddress, messageSuccess: "Copied ".concat(wallet.networkName, " address"), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ py: theme.styleMixins.customPadding.p8 }, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, justifyContent: "space-between", alignItems: "center" }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: wallet.networkIcon, width: 28, sx: { borderRadius: theme.styleMixins.customRadius.full } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.column), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.styleMixins.listTitle), children: wallet.networkName }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.styleMixins.listDescription), children: (0, compactWalletAddress_1.default)(wallet.blockchainAddress) })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1rem", height: "1rem" }, children: SvgPath_1.IC_COPY })] }) }, wallet.blockchainAddress + index)); })] })] }) }), (0, jsx_runtime_1.jsx)(link_1.default, { href: "".concat((options === null || options === void 0 ? void 0 : options.basePath) || "", "/tek-wallet/").concat(TekWalletView_1.TekWalletViewRoutes.SETTING), children: (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
                         width: "1.5rem",
                         height: "1.5rem",
                         position: "absolute",
                         right: "16px",
                         top: "50%",
                         transform: "translateY(-50%)",
+                        color: "text.secondary",
                     }, children: SvgPath_1.IC_SETTING }) })] }));
 };
 exports.default = AssetViewHeader;

package/dist/components/TekWallet/components/ui/BackHeader/index.js

@@ -19,11 +19,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var BackArrow_1 = __importDefault(require("../BackArrow"));
 var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 var BackHeader = function (props) {
     var router = (0, useCustomRouter_1.default)();
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var center = props.center, children = props.children, hideBack = props.hideBack, right = props.right, _a = props.renderBack, renderBack = _a === void 0 ? function (Back) { return Back; } : _a;
     var back = function (e) {
         if (props.overrideBack) {
@@ -32,19 +32,19 @@ var BackHeader = function (props) {
         }
         router.back();
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g16, position: "relative", height: "100%", minHeight: "2rem" }), props.sx), children: [!hideBack &&
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g16, position: "relative", height: "100%", minHeight: "2rem" }), props.sx), children: [!hideBack &&
                 renderBack((0, jsx_runtime_1.jsxs)(material_1.Box, { component: "button", sx: {
                         display: "flex",
                         alignItems: "center",
-                        gap: theme.mixins.gaps.g4,
+                        gap: theme.styleMixins.gaps.g4,
                         cursor: "pointer",
                         "&:active": {
                             transform: "translateX(-0.25rem)",
                             transition: "transform 0.2s ease-in-out",
                         },
+                        color: "text.primary",
                     }, onClick: back, children: [(0, jsx_runtime_1.jsx)(BackArrow_1.default, {}), " ", (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                color: theme.palette.text.black,
                                 fontSize: theme.typography.fontSize12,
-                            }, children: "Back" })] })), !!center && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), theme.mixins.headerTitle), children: center })), children, right && (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { marginLeft: "auto" }, children: right })] }));
+                            }, children: "Back" })] })), !!center && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.center), theme.styleMixins.headerTitle), children: center })), children, right && (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { marginLeft: "auto" }, children: right })] }));
 };
 exports.default = BackHeader;

package/dist/components/TekWallet/components/ui/BottomActionLayout/index.js

@@ -24,10 +24,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 function BottomActionLayout(_a) {
     var children = _a.children, sx = _a.sx, rest = __rest(_a, ["children", "sx"]);
-    var theme = (0, providers_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ sx: __assign({ width: "100%", paddingLeft: theme.mixins.pagePadding, paddingRight: theme.mixins.pagePadding, paddingBottom: theme.mixins.customPadding.p24 }, sx) }, rest, { children: children })));
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ sx: __assign({ width: "100%", paddingLeft: theme.styleMixins.pagePadding, paddingRight: theme.styleMixins.pagePadding, paddingBottom: theme.styleMixins.customPadding.p24 }, sx) }, rest, { children: children })));
 }
 exports.default = BottomActionLayout;

package/dist/components/TekWallet/components/ui/Button/index.js

@@ -29,7 +29,7 @@ exports.BUTTON_STATUS = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react-hooks/rules-of-hooks */
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var ClickEffect_1 = __importDefault(require("../ClickEffect"));
 var BUTTON_STATUS;
 (function (BUTTON_STATUS) {
@@ -66,7 +66,7 @@ Button.Secondary = function (props) {
     // const theme = useTheme();
     return ((0, jsx_runtime_1.jsx)(Button, __assign({}, rest, { variant: "outlined", sx: __assign({ 
             // color: theme.palette.text.primary,
-            // borderRadius: theme.mixins.customRadius.r12,
+            // borderRadius: theme.styleMixins.customRadius.r12,
             // borderColor: "currentcolor",
             // textTransform: "capitalize",
             position: "relative" }, sx), disabled: status !== BUTTON_STATUS.ENABLED })));
@@ -74,8 +74,8 @@ Button.Secondary = function (props) {
 Button.Secondary.displayName = "Button.Secondary";
 Button.Text = function (props) {
     var sx = props.sx, _a = props.status, status = _a === void 0 ? BUTTON_STATUS.ENABLED : _a, rest = __rest(props, ["sx", "status"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(Button, __assign({}, rest, { variant: "text", color: "secondary", sx: __assign({ width: "fit-content", height: "fit-content", px: theme.mixins.customPadding.p16, py: theme.mixins.customPadding.p8, textTransform: "capitalize", color: theme.palette.text.primary }, sx), disabled: status !== BUTTON_STATUS.ENABLED })));
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(Button, __assign({}, rest, { variant: "text", color: "secondary", sx: __assign({ width: "fit-content", height: "fit-content", px: theme.styleMixins.customPadding.p16, py: theme.styleMixins.customPadding.p8, textTransform: "capitalize", color: theme.palette.text.primary }, sx), disabled: status !== BUTTON_STATUS.ENABLED })));
 };
 Button.Text.displayName = "Button.Text";
 exports.default = Button;

package/dist/components/TekWallet/components/ui/CardToken/index.js

@@ -7,29 +7,29 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var Icon_1 = __importDefault(require("../Icon"));
 var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 var CardToken = function (_a) {
     var icon = _a.icon, symbol = _a.symbol, balance = _a.balance, price = _a.price, rate = _a.rate, _b = _a.isActive, isActive = _b === void 0 ? false : _b;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
             border: "1px solid",
-            borderColor: "".concat(isActive ? theme.palette.primary.main : theme.palette.border.accent3),
-            backgroundColor: "".concat(isActive ? theme.palette.background.tertiary : theme.palette.background.white),
+            borderColor: "".concat(isActive ? theme.palette.primary.main : theme.palette.divider),
+            backgroundColor: "".concat(isActive ? theme.palette.background.tertiary : theme.palette.background.default),
         }, className: "p-4 rounded-16", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: icon || (0, getIcon_1.default)("".concat(icon)), width: 20, height: 20 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex flex-col justify-start", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", sx: {
-                                        color: theme.palette.text.blackContrast,
+                                        color: theme.palette.text.primary,
                                         fontWeight: theme.typography.fontWeight400,
                                         fontSize: theme.typography.fontSize14,
                                     }, children: symbol }), (0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", sx: {
-                                        color: theme.palette.text.accent,
+                                        color: theme.palette.text.secondary,
                                         fontWeight: theme.typography.fontWeight400,
                                         fontSize: theme.typography.fontSize12,
                                     }, children: balance })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex flex-col justify-end items-end", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { component: "p", sx: {
-                                color: theme.palette.text.blackContrast,
+                                color: theme.palette.text.primary,
                                 fontWeight: theme.typography.fontWeight500,
                                 fontSize: theme.typography.fontSize14,
                             }, children: price }), (0, jsx_runtime_1.jsxs)(Text_1.default, { component: "p", sx: {
-                                color: theme.palette.text.accent,
+                                color: theme.palette.text.secondary,
                                 fontWeight: theme.typography.fontWeight400,
                                 fontSize: theme.typography.fontSize12,
                             }, children: ["~$", rate] })] })] }) }));

package/dist/components/TekWallet/components/ui/Column/index.js

@@ -25,9 +25,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Column;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 function Column(props) {
     var children = props.children, onClick = props.onClick, sx = props.sx, rest = __rest(props, ["children", "onClick", "sx"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ sx: __assign(__assign({}, theme.mixins.column), sx), onClick: onClick }, rest, { children: children })));
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ sx: __assign(__assign({}, theme.styleMixins.column), sx), onClick: onClick }, rest, { children: children })));
 }

package/dist/components/TekWallet/components/ui/ConfirmByPasscode/index.js

@@ -89,17 +89,18 @@ var OTP_1 = __importStar(require("../OTP"));
 var react_1 = require("react");
 var ModalLayout_1 = __importDefault(require("../ModalLayout"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var LoadingLayout_1 = __importDefault(require("../LoadingLayout"));
 var DrawerComponent_1 = __importDefault(require("../DrawerComponent"));
 var xhub_keyboard_1 = require("xhub-keyboard");
 var useUniqueId_1 = require("../../../hooks/useUniqueId");
 var xhub_keyboard_2 = require("xhub-keyboard");
 var useWarningWrongPasscode_1 = require("../../../hooks/useWarningWrongPasscode");
+var TekWalletProvider_1 = require("../../../providers/TekWalletProvider");
 var passcodeLength = 6;
 var ConfirmByPasscode = (0, react_1.forwardRef)(function (props, ref) {
     var onConfirmSuccess = props.onConfirmSuccess, sx = props.sx;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _a = (0, react_1.useState)(""), passcode = _a[0], setPasscode = _a[1];
     var loadingRef = (0, react_1.useRef)(null);
     var _b = (0, useWarningWrongPasscode_1.useValidatePasscode)(), handleVerifyPasscode = _b.handleVerifyPasscode, warningContent = _b.warningContent, isLocked = _b.isLocked, handleClearUnknownError = _b.handleClearUnknownError, unknownError = _b.unknownError;
@@ -187,9 +188,10 @@ var ConfirmByPasscode = (0, react_1.forwardRef)(function (props, ref) {
             }
         });
     }); }, [handleClose, handleVerifyPasscode, onConfirmSuccess, passcode]);
+    var keyboardThemeMode = (0, TekWalletProvider_1.useKeyboardThemeMode)();
     return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: drawerRef, trigger: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { style: {
                 width: "100%",
-            }, useBrowserInput: false, htmlFor: keyboardId, children: props.children }), onOpen: handleOnOpen, onDone: handleOnClose, triggerStatus: props.triggerStatus, sx: __assign({ width: "100%", maxWidth: "calc(100dvw - 2rem)", display: "flex" }, sx), children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { ref: keyboardRef, id: keyboardId, value: passcode, onChange: handlePasscodeChange, keyboardType: xhub_keyboard_1.KeyboardType.Text, layoutType: xhub_keyboard_1.LayoutType.Integer, styles: {
+            }, useBrowserInput: false, htmlFor: keyboardId, children: props.children }), onOpen: handleOnOpen, onDone: handleOnClose, triggerStatus: props.triggerStatus, sx: __assign({ width: "100%", maxWidth: "calc(100dvw - 2rem)", display: "flex" }, sx), children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { theme: keyboardThemeMode, ref: keyboardRef, id: keyboardId, value: passcode, onChange: handlePasscodeChange, keyboardType: xhub_keyboard_1.KeyboardType.Text, layoutType: xhub_keyboard_1.LayoutType.Integer, styles: {
                 keyboardContainer: {
                     display: isLocked ? "none" : "block",
                 },
@@ -201,7 +203,7 @@ var ConfirmByPasscode = (0, react_1.forwardRef)(function (props, ref) {
                     borderRadius: "1.5rem 1.5rem 0 0",
                 }, children: (0, jsx_runtime_1.jsx)(ModalLayout_1.default, { title: "Enter Passcode", onClose: handleClose, sx: {
                         backgroundColor: theme.palette.background.tertiary,
-                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { justifyContent: "center", alignItems: "center", gap: "0.75rem", width: "100%" }), children: [(0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { style: {
+                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { justifyContent: "center", alignItems: "center", gap: "0.75rem", width: "100%" }), children: [(0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { style: {
                                     width: "100%",
                                 }, useBrowserInput: false, htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(OTP_1.default, { disabled: isLocked, value: passcode, onChange: handlePasscodeChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.CONFIRM_BY_PASSCODE }) }), !isLocked && warningContent, unknownError] }) }) }) }) }));
 });

package/dist/components/TekWallet/components/ui/ConfirmLayout/index.js

@@ -61,7 +61,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var DrawerComponent_1 = __importStar(require("../DrawerComponent"));
 var react_1 = require("react");
 var ChildPageLayout_1 = __importDefault(require("../../../layouts/ChildPageLayout"));
@@ -69,7 +69,7 @@ var PageHeader_1 = __importDefault(require("../PageHeader"));
 var ConfirmLayout = (0, react_1.forwardRef)(function (props, ref) {
     var _a;
     var children = props.children, action = props.action, header = props.header, confirmAction = props.confirmAction, rest = __rest(props, ["children", "action", "header", "confirmAction"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var confirmByPasscodeDrawerRef = (0, react_1.useRef)(null);
     var handleOnClose = function () {
         var _a;
@@ -93,7 +93,7 @@ var ConfirmLayout = (0, react_1.forwardRef)(function (props, ref) {
             (_a = confirmByPasscodeDrawerRef.current) === null || _a === void 0 ? void 0 : _a.unlockStatus();
         },
     }); });
-    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, __assign({ direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, ref: confirmByPasscodeDrawerRef }, rest, { children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: (_a = header === null || header === void 0 ? void 0 : header.title) !== null && _a !== void 0 ? _a : action, overrideBack: handleOnClose }), footer: confirmAction, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { alignItems: "center", gap: theme.mixins.gaps.g16, padding: theme.mixins.customPadding.p16 }), children: children }) }) })));
+    return ((0, jsx_runtime_1.jsx)(DrawerComponent_1.default, __assign({ direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, ref: confirmByPasscodeDrawerRef }, rest, { children: (0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: (_a = header === null || header === void 0 ? void 0 : header.title) !== null && _a !== void 0 ? _a : action, overrideBack: handleOnClose }), footer: confirmAction, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { alignItems: "center", gap: theme.styleMixins.gaps.g16, padding: theme.styleMixins.customPadding.p16 }), children: children }) }) })));
 });
 ConfirmLayout.displayName = "ConfirmLayout";
 exports.default = ConfirmLayout;

package/dist/components/TekWallet/components/ui/ConfirmSwapToken/Result.js

@@ -20,7 +20,7 @@ var material_1 = require("@mui/material");
 var Text_1 = __importDefault(require("../Text"));
 var react_1 = require("react");
 var Button_1 = __importDefault(require("../Button"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var Formatter_1 = __importDefault(require("../Formatter"));
 var Icon_1 = __importDefault(require("../Icon"));
 var useFormatter_1 = __importDefault(require("../../../hooks/useFormatter"));
@@ -29,7 +29,7 @@ var InlineTitleValue_1 = __importDefault(require("../InlineTitleValue"));
 var convertTokensRate_1 = __importDefault(require("../../views/SwapView/functions/convertTokensRate"));
 function Result(props) {
     var _a;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var formatDate = (0, useFormatter_1.default)().formatDate;
     var transaction = props.transaction, onDone = props.onDone;
     var status = (0, react_1.useMemo)(function () { return (transaction === null || transaction === void 0 ? void 0 : transaction.transaction_status) || "failed"; }, [transaction === null || transaction === void 0 ? void 0 : transaction.transaction_status]);
@@ -51,11 +51,11 @@ function Result(props) {
                         display: "flex",
                         flexDirection: "column",
                         alignItems: "center",
-                        gap: theme.mixins.gaps.g16,
+                        gap: theme.styleMixins.gaps.g16,
                         my: "auto",
                         backgroundColor: theme.palette.background.tertiary,
-                        borderRadius: theme.mixins.customRadius.r16,
-                        padding: theme.mixins.customPadding.p16,
+                        borderRadius: theme.styleMixins.customRadius.r16,
+                        padding: theme.styleMixins.customPadding.p16,
                         paddingTop: "0px",
                     }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: status === "success" ? "IC_CHECK_CIRCLE" : "IC_ERROR_CIRCLE", width: 100, sx: {
                                 transform: "translateY(-50%)",
@@ -65,28 +65,28 @@ function Result(props) {
                                 alignItems: "center",
                             }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                         fontSize: theme.typography.fontSize13,
-                                        color: theme.palette.text.accent2,
+                                        color: theme.palette.text.secondary,
                                     }, children: "Swap" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                         color: status === type_1.TransactionStatus.Success
-                                            ? theme.palette.text.successStatus
-                                            : theme.palette.text.errorStatus,
+                                            ? theme.palette.success.main
+                                            : theme.palette.error.main,
                                         textTransform: "capitalize",
                                         fontWeight: 600,
                                         fontSize: theme.typography.fontSize24,
-                                    }, children: status })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", borderTop: "1px ".concat(theme.palette.border.accent3, " solid") } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                    }, children: status })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", borderTop: "1px ".concat(theme.palette.divider, " solid") } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                 width: "100%",
                                 position: "relative",
                             }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                     display: "flex",
                                     alignItems: "center",
-                                    gap: theme.mixins.gaps.g4,
+                                    gap: theme.styleMixins.gaps.g4,
                                     position: "relative",
                                     zIndex: 1,
                                 }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: fromToken === null || fromToken === void 0 ? void 0 : fromToken.link, sx: {
                                             width: 20,
                                             height: 20,
                                             borderRadius: "999px",
-                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "inherit" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mx: "auto" } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_SWAP", sx: {
+                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { color: "inherit" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: amount }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mx: "auto" } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: "IC_SWAP", sx: {
                                             width: 16,
                                             height: 16,
                                             position: "absolute",
@@ -97,19 +97,19 @@ function Result(props) {
                                             width: 20,
                                             height: 20,
                                             borderRadius: "999px",
-                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "inherit" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: toAmount }) })] }) }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Price", titleStyle: {
+                                        } }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { color: "inherit" }), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: toAmount }) })] }) }), (0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Price", titleStyle: {
                                 fontSize: "0.875rem",
                                 fontWeight: 500,
-                                color: "gray.700",
-                            }, value: !!toTokenRate && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: ["1 ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.name, " ~ ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: toTokenRate, unit: toToken === null || toToken === void 0 ? void 0 : toToken.name })] })), isAligned: true }), !!(transaction === null || transaction === void 0 ? void 0 : transaction.date_created) && ((0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Date", titleStyle: {
+                                color: "text.secondary",
+                            }, value: !!toTokenRate && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: ["1 ", fromToken === null || fromToken === void 0 ? void 0 : fromToken.name, " ~ ", (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: toTokenRate, unit: toToken === null || toToken === void 0 ? void 0 : toToken.name })] })), isAligned: true }), !!(transaction === null || transaction === void 0 ? void 0 : transaction.date_created) && ((0, jsx_runtime_1.jsx)(InlineTitleValue_1.default, { title: "Date", titleStyle: {
                                 fontSize: "0.875rem",
                                 fontWeight: 500,
-                                color: "gray.700",
-                            }, value: !!toTokenRate && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: formatDate(transaction === null || transaction === void 0 ? void 0 : transaction.date_created, true) })), isAligned: true }))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                color: "text.secondary",
+                            }, value: !!toTokenRate && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: formatDate(transaction === null || transaction === void 0 ? void 0 : transaction.date_created, true) })), isAligned: true }))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                         marginTop: "auto",
                         width: "100%",
                         display: "grid",
                         gridTemplateColumns: "1fr",
-                        gap: theme.mixins.gaps.g8,
+                        gap: theme.styleMixins.gaps.g8,
                     }, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100%" }, onClick: onDone, children: "Done" }) })] }) }));
 }

package/dist/components/TekWallet/components/ui/ConfirmTransfer/index.js

@@ -99,7 +99,7 @@ var validate_wallet_address_service_1 = __importDefault(require("../../../servic
 var type_2 = require("../../../services/axios/validate-wallet-address-service/type");
 var ConfirmByPasscode_1 = __importDefault(require("../ConfirmByPasscode"));
 var instructions_service_1 = __importDefault(require("../../../services/axios/instructions-service"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var useWallet_1 = __importDefault(require("../../../hooks/useWallet"));
 var TransferConfirmationError;
 (function (TransferConfirmationError) {
@@ -111,7 +111,7 @@ var TransferConfirmationError;
 })(TransferConfirmationError || (exports.TransferConfirmationError = TransferConfirmationError = {}));
 exports.TransferConfirmation = (0, react_1.forwardRef)(function (props, ref) {
     var _a, _b;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var transferData = props.transferData, transferContent = props.transferContent;
     var _c = (0, useWallet_1.default)(), isInitPasscode = _c.isInitPasscode, sendInternalTokens = _c.sendInternalTokens, updateSendInternalToken = _c.updateSendInternalToken;
     var confirmLayoutDrawerRef = (0, react_1.useRef)(null);
@@ -247,7 +247,7 @@ exports.TransferConfirmation = (0, react_1.forwardRef)(function (props, ref) {
                     ? DrawerComponent_1.DRAWER_TRIGGER_STATUS.DISABLED
                     : DrawerComponent_1.DRAWER_TRIGGER_STATUS.ENABLED, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { status: !!error || isValidatingAddress || errorAddress || !isEnoughBalance
                         ? Button_1.BUTTON_STATUS.DISABLED
-                        : buttonStatus, sx: { width: "100%" }, children: "Confirm" }) }), children: [transferContent, !!error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { mt: (_a = theme.mixins.gaps) === null || _a === void 0 ? void 0 : _a.g6 }), children: [error, " ", !!errorAmount && (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: errorAmount, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) })] })), !!errorAddress && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { mt: (_b = theme.mixins.gaps) === null || _b === void 0 ? void 0 : _b.g6 }), children: errorAddress }))] }) }));
+                        : buttonStatus, sx: { width: "100%" }, children: "Confirm" }) }), children: [transferContent, !!error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.validationError), { mt: (_a = theme.styleMixins.gaps) === null || _a === void 0 ? void 0 : _a.g6 }), children: [error, " ", !!errorAmount && (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: errorAmount, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) })] })), !!errorAddress && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.validationError), { mt: (_b = theme.styleMixins.gaps) === null || _b === void 0 ? void 0 : _b.g6 }), children: errorAddress }))] }) }));
 });
 exports.TransferConfirmation.displayName = "TransferConfirmation";
 exports.default = exports.TransferConfirmation;

package/dist/components/TekWallet/components/ui/CopyTextComponent/index.js

@@ -53,12 +53,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 var SvgPath_1 = require("../SvgPath");
 var CopyTextComponent = function (_a) {
     var value = _a.value, iconSuccess = _a.iconSuccess, children = _a.children, hideTextMessage = _a.hideTextMessage, sx = _a.sx, messageSuccess = _a.messageSuccess;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _b = (0, react_1.useState)(false), showSuccess = _b[0], setShowSuccess = _b[1];
     var copyText = function (e) { return __awaiter(void 0, void 0, void 0, function () {
         var err_1;
@@ -89,22 +89,22 @@ var CopyTextComponent = function (_a) {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    gap: theme.mixins.gaps.g4,
+                    gap: theme.styleMixins.gaps.g4,
                     opacity: showSuccess ? 1 : 0,
                     position: "absolute",
                     top: 0,
                     left: "50%",
                     transform: "translate(-50%, -80%) scale(".concat(showSuccess ? 1 : 0, ")"),
                     transformOrigin: "center bottom",
-                    backgroundColor: theme.palette.background.black,
+                    backgroundColor: "background.popover",
                     backdropFilter: "blur(12px)",
                     borderRadius: 9999,
-                    padding: "".concat(theme.mixins.customPadding.p8, " ").concat(theme.mixins.customPadding.p12),
+                    padding: "".concat(theme.styleMixins.customPadding.p8, " ").concat(theme.styleMixins.customPadding.p12),
                     transition: showSuccess
                         ? "opacity 0.5s linear, transform 0.17s linear"
                         : "opacity 0.15s linear, transform 0.1s linear",
                 }, children: [iconSuccess || (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "1rem", height: "1rem" }, children: SvgPath_1.IC_SUCCESS }), !hideTextMessage && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                            color: theme.palette.text.successStatus,
+                            color: theme.palette.success.main,
                             fontSize: theme.typography.fontSize14,
                             lineHeight: theme.typography.leading100,
                             whiteSpace: "nowrap",

package/dist/components/TekWallet/components/ui/CustomTooltip/index.js

@@ -62,6 +62,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
 var Popover_1 = __importDefault(require("@mui/material/Popover"));
 var material_1 = require("@mui/material");
+var Text_1 = __importDefault(require("../Text"));
 var CustomTooltip = React.forwardRef(function (_a, ref) {
     var trigger = _a.trigger, children = _a.children, disabled = _a.disabled, _b = _a.anchorOrigin, anchorOrigin = _b === void 0 ? {
         vertical: "bottom",
@@ -85,12 +86,13 @@ var CustomTooltip = React.forwardRef(function (_a, ref) {
     };
     var open = Boolean(anchorEl);
     var id = open ? "simple-popover" : undefined;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: cancelPropagation, sx: { display: "inline-block" }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "div", "aria-describedby": id, onClick: handleOpen, sx: { textAlign: "left" }, children: trigger }), (0, jsx_runtime_1.jsx)(Popover_1.default, __assign({ id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: anchorOrigin, anchorPosition: anchorPosition, transformOrigin: transformOrigin, sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: cancelPropagation, sx: { display: "inline-block" }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "div", "aria-describedby": id, onClick: handleOpen, sx: { textAlign: "left", display: "inline-block" }, children: trigger }), (0, jsx_runtime_1.jsx)(Popover_1.default, __assign({ id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: anchorOrigin, anchorPosition: anchorPosition, transformOrigin: transformOrigin, sx: {
+                    display: "inline-block",
                     "& .MuiPopover-paper": {
                         backgroundColor: "transparent",
                         borderRadius: "0.75rem",
                     },
-                } }, rest, { children: children }))] }));
+                } }, rest, { children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: { color: "text.reverse", display: "inline-block" }, children: children }) }))] }));
 });
 CustomTooltip.displayName = "CustomTooltip";
 exports.default = CustomTooltip;

package/dist/components/TekWallet/components/ui/DetailSwap/index.js

@@ -16,32 +16,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var LineValue_1 = __importDefault(require("../LineValue"));
 var Text_1 = __importDefault(require("../Text"));
 var DetailSwap = function (props) {
     var _a, _b;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var getOutputID = props.selectOutputToken &&
         ((_a = props.selectedToken) === null || _a === void 0 ? void 0 : _a.outputs.find(function (output) { var _a; return output.id === Number((_a = props.selectOutputToken) === null || _a === void 0 ? void 0 : _a.id); }));
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), className: "gap-3 mt-2", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Text_1.default, { className: "capitalize opacity-90", sx: {
-                        color: theme.palette.text.accent2,
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.column), className: "gap-3 mt-2", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Text_1.default, { className: "capitalize opacity-90", sx: {
+                        color: theme.palette.text.secondary,
                         fontSize: theme.typography.fontSize13,
                         fontWeight: theme.typography.fontWeight400,
                     }, children: "Transaction summary" }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                        color: theme.palette.text.accent,
+                        color: theme.palette.text.secondary,
                         fontSize: theme.typography.fontSize12,
                         fontWeight: theme.typography.fontWeight400,
-                    }, children: "Best Price" }), value: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4 }), children: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
-                            color: theme.palette.text.blackContrast,
+                    }, children: "Best Price" }), value: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4 }), children: (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
+                            color: theme.palette.text.primary,
                             fontSize: theme.typography.fontSize12,
                             fontWeight: theme.typography.fontWeight500,
                         }, children: ["1 ", (_b = props.selectedToken) === null || _b === void 0 ? void 0 : _b.full_name, " ~ ", getOutputID === null || getOutputID === void 0 ? void 0 : getOutputID.swap_amount, " ", getOutputID && getOutputID.full_name] }) }) }), (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                        color: theme.palette.text.accent,
+                        color: theme.palette.text.secondary,
                         fontSize: theme.typography.fontSize12,
                         fontWeight: theme.typography.fontWeight400,
                     }, className: "capitalize", children: "Powered by" }), value: (0, jsx_runtime_1.jsx)(Text_1.default, { className: "truncate", sx: {
-                        color: theme.palette.text.blackContrast,
+                        color: theme.palette.text.primary,
                         fontSize: theme.typography.fontSize12,
                         fontWeight: theme.typography.fontWeight500,
                     }, children: "Liquidity Protocol" }) })] }));

package/dist/components/TekWallet/components/ui/DialogContentLayout/index.js

@@ -27,15 +27,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 function DialogContentLayout(props) {
     var content = props.content, actions = props.actions, sx = props.sx, rest = __rest(props, ["content", "actions", "sx"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: __assign(__assign(__assign(__assign({}, theme.mixins.column), { borderRadius: theme.mixins.customRadius.r12, backgroundColor: theme.palette.background.black, boxShadow: theme.shadows[1], minWidth: "12rem" }), theme.mixins.dialogContent), sx) }, rest, { children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                    padding: theme.mixins.customPadding.p12,
-                }, children: content }), !!actions && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", height: "1px", backgroundColor: theme.palette.border.white16 } })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                    px: theme.mixins.customPadding.p12,
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: __assign(__assign(__assign(__assign({}, theme.styleMixins.column), { borderRadius: theme.styleMixins.customRadius.r12, backgroundColor: "background.popover", boxShadow: theme.shadows[1], minWidth: "12rem" }), theme.styleMixins.dialogContent), sx) }, rest, { children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                    padding: theme.styleMixins.customPadding.p12,
+                }, children: content }), !!actions && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", height: "1px", backgroundColor: theme.palette.divider } })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    px: theme.styleMixins.customPadding.p12,
                     width: "100%",
                     height: "fit-content",
                 }, children: actions })] })));

package/dist/components/TekWallet/components/ui/DrawerDrag/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DRAWER_DIRECTION = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var DRAWER_DIRECTION;
 (function (DRAWER_DIRECTION) {
     DRAWER_DIRECTION["TOP"] = "top";
@@ -13,13 +13,13 @@ var DRAWER_DIRECTION;
 })(DRAWER_DIRECTION || (exports.DRAWER_DIRECTION = DRAWER_DIRECTION = {}));
 var DrawerDrag = function (_a) {
     var anchor = _a.anchor, open = _a.open, onClose = _a.onClose, onOpen = _a.onOpen, content = _a.content, title = _a.title, footer = _a.footer, sx = _a.sx;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     return ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, { anchor: anchor || DRAWER_DIRECTION.BOTTOM, open: open, onClose: onClose || (function () { }), onOpen: onOpen, sx: sx
             ? sx
             : {
                 "& .MuiDrawer-paper": {
                     backgroundColor: "transparent",
                 },
-            }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "\n          \"w-full border-t border-".concat(theme.palette.border.accent3, " bg-").concat(theme.palette.background.tertiary, " blur-[50px]\",\n          className,\n          ").concat(anchor === DRAWER_DIRECTION.BOTTOM && "min-h-[33dvh]", "\n        "), children: [title, content, footer] }) }));
+            }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "\n          \"w-full border-t border-".concat(theme.palette.divider, " bg-").concat(theme.palette.background.tertiary, " blur-[50px]\",\n          className,\n          ").concat(anchor === DRAWER_DIRECTION.BOTTOM && "min-h-[33dvh]", "\n        "), children: [title, content, footer] }) }));
 };
 exports.default = DrawerDrag;

package/dist/components/TekWallet/components/ui/EmptyData/index.js

@@ -16,11 +16,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 var Button_1 = __importDefault(require("../Button"));
 function EmptyData(props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g16, alignItems: "center", justifyContent: "center" }), props.sx), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 62, height: 62 }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "63", height: "62", viewBox: "0 0 63 62", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M46.0312 23.25H21.7544C21.4638 23.25 21.1925 23.1241 21.0084 22.9012L17.3272 18.4837C16.775 17.8153 15.9612 17.4375 15.0991 17.4375H5.34375C3.74531 17.4375 2.4375 18.7453 2.4375 20.3438V59.0938C2.4375 59.4231 2.61188 59.7331 2.89281 59.9172C3.04781 60.0141 3.23188 60.0625 3.40625 60.0625C3.55156 60.0625 3.68719 60.0334 3.82281 59.9656L48.3853 38.6531C48.7244 38.4884 48.9375 38.1494 48.9375 37.7812V26.1562C48.9375 24.5578 47.6297 23.25 46.0312 23.25Z", fill: "#A3A3A3" }), (0, jsx_runtime_1.jsx)("path", { d: "M60.2912 37.7522C59.9425 37.1613 59.3225 36.8125 58.6347 36.8125H15.535C14.8278 36.8125 14.1787 37.2 13.8397 37.8297L2.55373 58.6287C2.38904 58.9291 2.39873 59.2972 2.5731 59.5878C2.74748 59.8784 3.06717 60.0625 3.40623 60.0625H46.9709C48.3853 60.0625 49.6834 59.2875 50.3615 58.0378L60.3203 39.6703C60.6497 39.06 60.64 38.3431 60.2815 37.7522H60.2912Z", fill: "#044C2F" }), (0, jsx_runtime_1.jsx)("path", { d: "M27.625 50.375H16.9688C16.4359 50.375 16 49.9391 16 49.4062C16 48.8734 16.4359 48.4375 16.9688 48.4375H27.625C28.1578 48.4375 28.5938 48.8734 28.5938 49.4062C28.5938 49.9391 28.1578 50.375 27.625 50.375Z", fill: "#ECF4E9" }), (0, jsx_runtime_1.jsx)("path", { d: "M31.5 55.2188H14.0625C13.5297 55.2188 13.0938 54.7828 13.0938 54.25C13.0938 53.7172 13.5297 53.2812 14.0625 53.2812H31.5C32.0328 53.2812 32.4688 53.7172 32.4688 54.25C32.4688 54.7828 32.0328 55.2188 31.5 55.2188Z", fill: "#ECF4E9" }), (0, jsx_runtime_1.jsx)("path", { d: "M39.25 1.9375C31.7713 1.9375 25.6875 8.02125 25.6875 15.5C25.6875 21.7969 30.0663 27.2897 36.1597 28.7041L38.4169 32.4628C38.5912 32.7534 38.9109 32.9375 39.25 32.9375C39.5891 32.9375 39.9088 32.7631 40.0831 32.4628L42.3403 28.7041C48.4337 27.2897 52.8125 21.7969 52.8125 15.5C52.8125 8.02125 46.7288 1.9375 39.25 1.9375Z", fill: "#E5E6E6" }), (0, jsx_runtime_1.jsx)("path", { d: "M44.7817 9.96891C44.4039 9.59109 43.7936 9.59109 43.4158 9.96891L39.2598 14.1248L35.1039 9.96891C34.7261 9.59109 34.1158 9.59109 33.7379 9.96891C33.3601 10.3467 33.3601 10.957 33.7379 11.3348L37.8939 15.4908L33.7379 19.6467C33.3601 20.0245 33.3601 20.6348 33.7379 21.0127C33.9317 21.2064 34.1739 21.2936 34.4258 21.2936C34.6776 21.2936 34.9198 21.1967 35.1136 21.0127L39.2695 16.8567L43.4254 21.0127C43.6192 21.2064 43.8614 21.2936 44.1133 21.2936C44.3651 21.2936 44.6073 21.1967 44.8011 21.0127C45.1789 20.6348 45.1789 20.0245 44.8011 19.6467L40.6451 15.4908L44.8011 11.3348C45.1789 10.957 45.1789 10.3467 44.8011 9.96891H44.7817Z", fill: "#044C2F" })] }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionTitle), children: props.title }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionDescription), children: props.description })] }), props.action && (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: props.action, children: props.actionText })] }));
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g16, alignItems: "center", justifyContent: "center", color: theme.palette.primary.main }), props.sx), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 62, height: 62 }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "63", height: "62", viewBox: "0 0 63 62", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M46.0312 23.25H21.7544C21.4638 23.25 21.1925 23.1241 21.0084 22.9012L17.3272 18.4837C16.775 17.8153 15.9612 17.4375 15.0991 17.4375H5.34375C3.74531 17.4375 2.4375 18.7453 2.4375 20.3438V59.0938C2.4375 59.4231 2.61188 59.7331 2.89281 59.9172C3.04781 60.0141 3.23188 60.0625 3.40625 60.0625C3.55156 60.0625 3.68719 60.0334 3.82281 59.9656L48.3853 38.6531C48.7244 38.4884 48.9375 38.1494 48.9375 37.7812V26.1562C48.9375 24.5578 47.6297 23.25 46.0312 23.25Z", fill: "#A3A3A3" }), (0, jsx_runtime_1.jsx)("path", { d: "M60.2912 37.7522C59.9425 37.1613 59.3225 36.8125 58.6347 36.8125H15.535C14.8278 36.8125 14.1787 37.2 13.8397 37.8297L2.55373 58.6287C2.38904 58.9291 2.39873 59.2972 2.5731 59.5878C2.74748 59.8784 3.06717 60.0625 3.40623 60.0625H46.9709C48.3853 60.0625 49.6834 59.2875 50.3615 58.0378L60.3203 39.6703C60.6497 39.06 60.64 38.3431 60.2815 37.7522H60.2912Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M27.625 50.375H16.9688C16.4359 50.375 16 49.9391 16 49.4062C16 48.8734 16.4359 48.4375 16.9688 48.4375H27.625C28.1578 48.4375 28.5938 48.8734 28.5938 49.4062C28.5938 49.9391 28.1578 50.375 27.625 50.375Z", fill: "#ECF4E9" }), (0, jsx_runtime_1.jsx)("path", { d: "M31.5 55.2188H14.0625C13.5297 55.2188 13.0938 54.7828 13.0938 54.25C13.0938 53.7172 13.5297 53.2812 14.0625 53.2812H31.5C32.0328 53.2812 32.4688 53.7172 32.4688 54.25C32.4688 54.7828 32.0328 55.2188 31.5 55.2188Z", fill: "#ECF4E9" }), (0, jsx_runtime_1.jsx)("path", { d: "M39.25 1.9375C31.7713 1.9375 25.6875 8.02125 25.6875 15.5C25.6875 21.7969 30.0663 27.2897 36.1597 28.7041L38.4169 32.4628C38.5912 32.7534 38.9109 32.9375 39.25 32.9375C39.5891 32.9375 39.9088 32.7631 40.0831 32.4628L42.3403 28.7041C48.4337 27.2897 52.8125 21.7969 52.8125 15.5C52.8125 8.02125 46.7288 1.9375 39.25 1.9375Z", fill: "#E5E6E6" }), (0, jsx_runtime_1.jsx)("path", { d: "M44.7817 9.96891C44.4039 9.59109 43.7936 9.59109 43.4158 9.96891L39.2598 14.1248L35.1039 9.96891C34.7261 9.59109 34.1158 9.59109 33.7379 9.96891C33.3601 10.3467 33.3601 10.957 33.7379 11.3348L37.8939 15.4908L33.7379 19.6467C33.3601 20.0245 33.3601 20.6348 33.7379 21.0127C33.9317 21.2064 34.1739 21.2936 34.4258 21.2936C34.6776 21.2936 34.9198 21.1967 35.1136 21.0127L39.2695 16.8567L43.4254 21.0127C43.6192 21.2064 43.8614 21.2936 44.1133 21.2936C44.3651 21.2936 44.6073 21.1967 44.8011 21.0127C45.1789 20.6348 45.1789 20.0245 44.8011 19.6467L40.6451 15.4908L44.8011 11.3348C45.1789 10.957 45.1789 10.3467 44.8011 9.96891H44.7817Z", fill: "currentColor" })] }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionTitle), children: props.title }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.sessionDescription), children: props.description })] }), props.action && (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: props.action, children: props.actionText })] }));
 }
 exports.default = EmptyData;