tek-wallet 0.0.806 → 0.0.808

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

@@ -27,21 +27,23 @@ 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 SvgPath_1 = require("../SvgPath");
 function ListItemCustom(_a) {
     var title = _a.title, description = _a.description, icon = _a.icon, rightIcon = _a.rightIcon, hideDefaultRightIcon = _a.hideDefaultRightIcon, sx = _a.sx, recommended = _a.recommended, hideTag = _a.hideTag, rest = __rest(_a, ["title", "description", "icon", "rightIcon", "hideDefaultRightIcon", "sx", "recommended", "hideTag"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, __assign({}, rest, { sx: __assign(__assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g12, padding: "calc(".concat(theme.mixins.customPadding.p16, " + 6px) ").concat(theme.mixins.customPadding.p16), border: "1px solid ".concat(theme.palette.border.accent3), borderRadius: theme.mixins.customRadius.r16, backgroundColor: theme.palette.background.white, backdropFilter: "blur(12px)", position: "relative", overflow: "hidden" }), sx), children: [!hideTag && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, __assign({}, rest, { sx: __assign(__assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g12, padding: "calc(".concat(theme.styleMixins.customPadding.p16, " + 6px) ").concat(theme.styleMixins.customPadding.p16), border: "1px solid ".concat(theme.palette.divider), borderRadius: theme.styleMixins.customRadius.r16, backgroundColor: theme.palette.background.default, backdropFilter: "blur(12px)", position: "relative", overflow: "hidden" }), sx), children: [!hideTag && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     position: "absolute",
-                    top: "-9px",
+                    top: "-10px",
                     left: "-1px",
                 }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
                             width: "6.6rem",
                             height: "auto",
-                        }, children: recommended ? SvgPath_1.IC_RECEIVE_TAG_RECOMMENDED : SvgPath_1.IC_RECEIVE_TAG }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.center), { whiteSpace: "nowrap", color: recommended ? theme.palette.text.blackContrast : theme.palette.text.white, fontSize: theme.typography.fontSize10, fontWeight: theme.typography.fontWeight600, lineHeight: "120%" }), children: recommended ? "Recommended" : "Fee upto 8%" })] })), icon, (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g4, alignItems: "start", flex: 1 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.listTitle), children: title }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.listDescription), children: description })] }), rightIcon !== null && rightIcon !== void 0 ? rightIcon : (!hideDefaultRightIcon && (
+                            display: "block",
+                            color: recommended ? theme.palette.success.main : theme.palette.error.main,
+                        }, children: recommended ? SvgPath_1.IC_RECEIVE_TAG_RECOMMENDED : SvgPath_1.IC_RECEIVE_TAG }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.center), { whiteSpace: "nowrap", color: theme.palette.text.reverse, fontSize: theme.typography.fontSize10, fontWeight: theme.typography.fontWeight600, lineHeight: "120%" }), children: recommended ? "Recommended" : "Fee upto 8%" })] })), icon, (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g6, alignItems: "start", flex: 1 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.listTitle), children: title }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.listDescription), children: description })] }), rightIcon !== null && rightIcon !== void 0 ? rightIcon : (!hideDefaultRightIcon && (
             // <Icon width={10} src={getIcon("right_arrow")} sx={{ ml: "auto" }} />
-            (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "12px", height: "12px" }, children: SvgPath_1.IC_CHEVRON_RIGHT })))] })));
+            (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: "0.75rem", height: "0.75rem", color: "text.secondary" }, children: SvgPath_1.IC_CHEVRON_RIGHT })))] })));
 }
 exports.default = ListItemCustom;

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

@@ -16,13 +16,13 @@ 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 react_1 = require("react");
 var LoadingLayout = (0, react_1.forwardRef)(function (props, ref) {
     var _a = (0, react_1.useState)(props.initLoading), loading = _a[0], setLoading = _a[1];
     var _b = props.loadingMessage, loadingMessage = _b === void 0 ? "Processing" : _b, children = props.children, sx = props.sx, overlaySx = props.overlaySx;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         startLoading: function () {
             setLoading(true);
@@ -31,7 +31,7 @@ var LoadingLayout = (0, react_1.forwardRef)(function (props, ref) {
             setLoading(false);
         },
     }); });
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ position: "relative", width: "fit-content", height: "fit-content" }, sx), children: [children, loading && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign(__assign({}, theme.mixins.whiteLoadingOverlay), theme.mixins.row), { gap: theme.mixins.gaps.g8, justifyContent: "center" }), overlaySx), children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { sx: { color: "black" }, size: 20 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ position: "relative", width: "fit-content", height: "fit-content" }, sx), children: [children, loading && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8, justifyContent: "center" }), overlaySx), children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { sx: { color: "black" }, size: 20 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                             fontSize: theme.typography.fontSize12,
                             color: "black",
                         }, children: loadingMessage })] }))] }));

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

@@ -87,7 +87,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LockToken = exports.LockTokenError = void 0;
 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 Button_1 = __importStar(require("../Button"));
 var ConfirmLayout_1 = __importDefault(require("../ConfirmLayout"));
 var LineValue_1 = __importDefault(require("../LineValue"));
@@ -110,7 +110,7 @@ var LockTokenError;
 })(LockTokenError || (exports.LockTokenError = LockTokenError = {}));
 exports.LockToken = (0, react_1.forwardRef)(function (props, ref) {
     var _a, _b;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var lockTokens = (0, useLockTokenData_1.default)().lockTokens;
     var isInitPasscode = (0, useWalletData_1.default)().isInitPasscode;
     var confirmLayoutDrawerRef = (0, react_1.useRef)(null);
@@ -192,10 +192,10 @@ exports.LockToken = (0, react_1.forwardRef)(function (props, ref) {
     (0, react_1.useEffect)(function () {
         validateAmount(props.lockData);
     }, [validateAmount]);
-    return ((0, jsx_runtime_1.jsx)(RequireConnect_1.default, { children: (0, jsx_runtime_1.jsx)(ConfirmLayout_1.default, { ref: confirmLayoutDrawerRef, action: type_1.TransactionSlug.LOCKED_BALANCE, trigger: props.children, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.mixins.paper), children: (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: "Amount", value: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: props.lockData.amount, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) }) }) }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: ["Your balance is", " ", (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    return ((0, jsx_runtime_1.jsx)(RequireConnect_1.default, { children: (0, jsx_runtime_1.jsx)(ConfirmLayout_1.default, { ref: confirmLayoutDrawerRef, action: type_1.TransactionSlug.LOCKED_BALANCE, trigger: props.children, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({}, theme.styleMixins.paper), children: (0, jsx_runtime_1.jsx)(LineValue_1.default, { field: "Amount", value: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: props.lockData.amount, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) }) }) }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: ["Your balance is", " ", (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontWeight: theme.typography.fontWeight600,
                                     color: theme.palette.text.secondary,
-                                }, children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: token === null || token === void 0 ? void 0 : token.balance, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) }) })] }), !!error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.validationError), { mt: theme.mixins.gaps.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) })] })), (0, jsx_runtime_1.jsx)(ConfirmByPasscode_1.default, { action: type_1.TransactionSlug.LOCKED_BALANCE, onConfirmSuccess: handleLockToken, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { status: !!error ? Button_1.BUTTON_STATUS.DISABLED : buttonStatus, sx: { width: "100%" }, children: "Confirm" }) })] }) }) }));
+                                }, children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: token === null || token === void 0 ? void 0 : token.balance, unit: " ".concat(token === null || token === void 0 ? void 0 : token.name) }) })] }), !!error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.validationError), { mt: theme.styleMixins.gaps.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) })] })), (0, jsx_runtime_1.jsx)(ConfirmByPasscode_1.default, { action: type_1.TransactionSlug.LOCKED_BALANCE, onConfirmSuccess: handleLockToken, children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { status: !!error ? Button_1.BUTTON_STATUS.DISABLED : buttonStatus, sx: { width: "100%" }, children: "Confirm" }) })] }) }) }));
 });
 exports.LockToken.displayName = "LockToken";
 exports.default = exports.LockToken;

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

@@ -17,65 +17,65 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var Text_1 = __importDefault(require("../Text"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var Icon_1 = __importDefault(require("../Icon"));
 var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
 var CheckBoxComponent_1 = __importDefault(require("../CheckBoxComponent"));
 var Button_1 = __importDefault(require("../Button"));
 var ModalCheckboxToken = function (_a) {
     var tokenLists = _a.tokenLists, handleTokenSelect = _a.handleTokenSelect, _b = _a.selectedTokens, selectedTokens = _b === void 0 ? [] : _b, onApply = _a.onApply, onReset = _a.onReset;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                    backgroundColor: theme.palette.border.accent3,
+                    backgroundColor: theme.palette.divider,
                     width: "100%",
-                    mt: theme.mixins.customMargin.m12,
-                    mb: theme.mixins.customMargin.m12,
+                    mt: theme.styleMixins.customMargin.m12,
+                    mb: theme.styleMixins.customMargin.m12,
                 } }), (0, jsx_runtime_1.jsx)(material_1.InputBase, { startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { className: "size-5 text-black", position: "start", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "size-5", src: (0, getIcon_1.default)("search") }) }), placeholder: "Search", sx: {
                     "input::placeholder": {
                         fontSize: theme.typography.fontSize12,
-                        color: theme.palette.text.black,
+                        color: theme.palette.text.primary,
                         fontWeight: theme.typography.fontWeight500,
-                        pl: theme.mixins.customPadding.p4,
+                        pl: theme.styleMixins.customPadding.p4,
                     },
-                }, className: "w-full flex items-center py-1 px-2 rounded-12 border border-".concat(theme.palette.border.accent3, " bg-white text-black") }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                    backgroundColor: theme.palette.border.accent3,
+                }, className: "w-full flex items-center py-1 px-2 rounded-12 border border-".concat(theme.palette.divider, " bg-white text-black") }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                    backgroundColor: theme.palette.divider,
                     width: "100%",
-                    mt: theme.mixins.customMargin.m12,
-                    mb: theme.mixins.customMargin.m12,
-                } }), tokenLists === null || tokenLists === void 0 ? void 0 : tokenLists.map(function (token) { return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: function () { return handleTokenSelect(token === null || token === void 0 ? void 0 : token.name); }, sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between", alignItems: "center", px: theme.mixins.customPadding.p8, py: theme.mixins.customPadding.p4, borderRadius: theme.mixins.customRadius.r12, cursor: "pointer", border: "1px solid", borderColor: selectedTokens.includes(token === null || token === void 0 ? void 0 : token.name)
+                    mt: theme.styleMixins.customMargin.m12,
+                    mb: theme.styleMixins.customMargin.m12,
+                } }), tokenLists === null || tokenLists === void 0 ? void 0 : tokenLists.map(function (token) { return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: function () { return handleTokenSelect(token === null || token === void 0 ? void 0 : token.name); }, sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between", alignItems: "center", px: theme.styleMixins.customPadding.p8, py: theme.styleMixins.customPadding.p4, borderRadius: theme.styleMixins.customRadius.r12, cursor: "pointer", border: "1px solid", borderColor: selectedTokens.includes(token === null || token === void 0 ? void 0 : token.name)
                         ? theme.palette.primary.main
-                        : "transparent", backgroundColor: theme.palette.background.white, mt: theme.mixins.customMargin.m12 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(token === null || token === void 0 ? void 0 : token.name) !== "All Token" && ((0, jsx_runtime_1.jsx)(Icon_1.default, { src: token === null || token === void 0 ? void 0 : token.link, width: 16, height: 16, alt: "token", className: "rounded-full" })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { mt: theme.mixins.customMargin.m4, mb: theme.mixins.customMargin.m4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                        : "transparent", backgroundColor: theme.palette.background.default, mt: theme.styleMixins.customMargin.m12 }), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: [(token === null || token === void 0 ? void 0 : token.name) !== "All Token" && ((0, jsx_runtime_1.jsx)(Icon_1.default, { src: token === null || token === void 0 ? void 0 : token.link, width: 16, height: 16, alt: "token", className: "rounded-full" })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { mt: theme.styleMixins.customMargin.m4, mb: theme.styleMixins.customMargin.m4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                             fontSize: theme.typography.fontSize14,
                                             fontWeight: theme.typography.fontWeight500,
-                                            color: theme.palette.text.blackContrast,
+                                            color: theme.palette.text.primary,
                                         }, children: token === null || token === void 0 ? void 0 : token.name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                             fontSize: theme.typography.fontSize13,
                                             fontWeight: theme.typography.fontWeight400,
-                                            color: theme.palette.text.accent,
+                                            color: theme.palette.text.secondary,
                                         }, children: token === null || token === void 0 ? void 0 : token.full_name })] })] }), (0, jsx_runtime_1.jsx)(CheckBoxComponent_1.default, { checked: selectedTokens.includes(token === null || token === void 0 ? void 0 : token.name), sx: {
                             "& .MuiSvgIcon-root": {
                                 color: selectedTokens.includes(token === null || token === void 0 ? void 0 : token.name)
                                     ? theme.palette.primary.main
-                                    : theme.palette.text.accent,
+                                    : theme.palette.text.secondary,
                             },
-                        } })] }, token === null || token === void 0 ? void 0 : token.id)); }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g10, justifyContent: "center", mt: theme.mixins.customMargin.m16, width: "100%" }), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onReset, sx: {
-                            backgroundColor: theme.palette.background.white,
+                        } })] }, token === null || token === void 0 ? void 0 : token.id)); }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g10, justifyContent: "center", mt: theme.styleMixins.customMargin.m16, width: "100%" }), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onReset, sx: {
+                            backgroundColor: theme.palette.background.default,
                             borderColor: theme.palette.primary.main,
-                            borderRadius: theme.mixins.customRadius.r12,
+                            borderRadius: theme.styleMixins.customRadius.r12,
                             color: theme.palette.primary.main,
                             fontSize: theme.typography.fontSize12,
                             fontWeight: theme.typography.fontWeight600,
                             textTransform: "none",
-                            padding: theme.mixins.customPadding.p12,
+                            padding: theme.styleMixins.customPadding.p12,
                         }, fullWidth: true, children: "Reset" }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onApply, sx: {
                             backgroundColor: theme.palette.primary.main,
                             borderColor: theme.palette.secondary.main,
-                            borderRadius: theme.mixins.customRadius.r12,
+                            borderRadius: theme.styleMixins.customRadius.r12,
                             color: theme.palette.secondary.main,
                             fontSize: theme.typography.fontSize12,
                             fontWeight: theme.typography.fontWeight600,
                             textTransform: "none",
-                            padding: theme.mixins.customPadding.p12,
+                            padding: theme.styleMixins.customPadding.p12,
                         }, fullWidth: true, children: "Apply" })] })] }));
 };
 exports.default = ModalCheckboxToken;

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

@@ -39,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var react_1 = require("react");
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 var DatePicker_1 = __importDefault(require("../DatePicker"));
 var Row_1 = __importDefault(require("../Row"));
@@ -51,13 +51,13 @@ var ModalDateFilter = function (props) {
     var drawerRefs = props.drawerRefs, handleConfirm = props.handleConfirm;
     var _a = (0, react_1.useState)(null), valueStartDate = _a[0], setValueStartDate = _a[1];
     var _b = (0, react_1.useState)(null), valueEndDate = _b[0], setValueEndDate = _b[1];
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var _c = (0, react_1.useState)(null), errorEndDate = _c[0], setErrorEndDate = _c[1];
     return ((0, jsx_runtime_1.jsxs)(Column_1.default, { sx: {
-            paddingTop: theme.mixins.customPadding.p2,
-            paddingBottom: theme.mixins.customPadding.p2,
+            paddingTop: theme.styleMixins.customPadding.p2,
+            paddingBottom: theme.styleMixins.customPadding.p2,
         }, children: [(0, jsx_runtime_1.jsxs)(Row_1.default, { sx: {
-                    gap: theme.mixins.gaps.g8,
+                    gap: theme.styleMixins.gaps.g8,
                 }, children: [(0, jsx_runtime_1.jsx)(DatePicker_1.default, { onSelect: function (date) {
                             setValueStartDate((0, dayjs_1.default)(date).startOf("day"));
                         }, value: valueStartDate, disableFuture: true }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
@@ -69,17 +69,17 @@ var ModalDateFilter = function (props) {
                         }, value: valueEndDate, disablePastFrom: valueStartDate, onError: function (error) {
                             setErrorEndDate(error);
                         }, disableFuture: true })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                    backgroundColor: theme.palette.border.accent3,
+                    backgroundColor: theme.palette.divider,
                     width: "100%",
-                    mt: theme.mixins.customMargin.m12,
-                    mb: theme.mixins.customMargin.m6,
+                    mt: theme.styleMixins.customMargin.m12,
+                    mb: theme.styleMixins.customMargin.m6,
                 } }), (0, jsx_runtime_1.jsxs)(Row_1.default, { sx: {
-                    gap: theme.mixins.gaps.g8,
+                    gap: theme.styleMixins.gaps.g8,
                 }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                             cursor: "pointer",
                             border: "1px solid ".concat(theme.palette.primary.main),
-                            borderRadius: theme.mixins.customRadius.r10,
-                            padding: theme.mixins.customPadding.p1,
+                            borderRadius: theme.styleMixins.customRadius.r10,
+                            padding: theme.styleMixins.customPadding.p1,
                             minWidth: "32px",
                             minHeight: "32px",
                             display: "flex",

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

@@ -18,10 +18,10 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var ModalTitle_1 = __importDefault(require("../ModalTitle"));
 var CloseModal_1 = __importDefault(require("../CloseModal"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var ModalLayout = function (props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ borderRadius: props.fullScreen ? "0" : "1.5rem 1.5rem 0 0", maxHeight: "100dvh", backgroundColor: props.backgroundColor || theme.palette.background.tertiary, display: "flex", flexDirection: "column", height: props.fullScreen ? "100dvh" : "fit-content" }, theme.mixins.pagePadding), props.sx), children: [!props.hideHeader && !props.overrideHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({ borderRadius: props.fullScreen ? "0" : "1.5rem 1.5rem 0 0", maxHeight: "100dvh", backgroundColor: props.backgroundColor || "background.default", display: "flex", flexDirection: "column", height: props.fullScreen ? "100dvh" : "fit-content" }, theme.styleMixins.pagePadding), props.sx), children: [!props.hideHeader && !props.overrideHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                             width: "100%",
                             position: "relative",
                         }, children: [(0, jsx_runtime_1.jsx)(ModalTitle_1.default, { children: props.title }), (0, jsx_runtime_1.jsx)(CloseModal_1.default, { sx: {

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

@@ -59,7 +59,7 @@ var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
 var DrawerDrag_1 = __importStar(require("../DrawerDrag"));
 var Icon_1 = __importDefault(require("../Icon"));
 var Text_1 = __importDefault(require("../Text"));
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var ModalSelectToken = function (props) {
     var setSwapToken = props.setSwapToken;
     var selectTokenForm = (0, useBoolean_1.useBoolean)("selectTokenForm");
@@ -68,7 +68,7 @@ var ModalSelectToken = function (props) {
     var onOpen = selectTokenForm.value ? selectTokenForm.setTrue : selectTokenTo.setTrue;
     var onClose = selectTokenForm.value ? selectTokenForm.setFalse : selectTokenTo.setFalse;
     var _a = (0, useWallet_1.default)(), fromTokens = _a.fromTokens, updateSwapTokens = _a.updateSwapTokens;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var router = (0, useCustomRouter_1.default)();
     (0, react_1.useEffect)(function () {
         if (fromTokens && fromTokens.length > 0 && !props.token && setSwapToken) {
@@ -94,22 +94,22 @@ var ModalSelectToken = function (props) {
         }, className: "!bg-white !rounded-none !size-full", anchor: DrawerDrag_1.DRAWER_DIRECTION.RIGHT, open: open, onClose: onClose, onOpen: onOpen, title: (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { overrideBack: onClose, onClick: onClose, title: selectTokenForm.value === true ? "Select from token" : "Select to token", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex gap-1 items-center ml-auto", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { onClick: function () { return router.push("/help"); }, src: (0, getIcon_1.default)("help") }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", sx: {
                                 height: "15px",
                                 width: "1px",
-                                backgroundColor: theme.palette.border.accent3,
-                                marginLeft: theme.mixins.customMargin.m4,
-                                marginRight: theme.mixins.customMargin.m4,
-                            } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { onClick: function () { return router.push("/history"); }, src: (0, getIcon_1.default)("history") })] }) }) }), content: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.pagePadding), children: [(0, jsx_runtime_1.jsx)(material_1.InputBase, { startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { className: "size-5 text-black", position: "start", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "size-5", src: (0, getIcon_1.default)("search") }) }), placeholder: "Search", sx: {
+                                backgroundColor: theme.palette.divider,
+                                marginLeft: theme.styleMixins.customMargin.m4,
+                                marginRight: theme.styleMixins.customMargin.m4,
+                            } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { onClick: function () { return router.push("/history"); }, src: (0, getIcon_1.default)("history") })] }) }) }), content: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.pagePadding), children: [(0, jsx_runtime_1.jsx)(material_1.InputBase, { startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { className: "size-5 text-black", position: "start", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "size-5", src: (0, getIcon_1.default)("search") }) }), placeholder: "Search", sx: {
                         "input::placeholder": {
                             fontSize: theme.typography.fontSize12,
-                            color: theme.palette.text.black,
+                            color: theme.palette.text.primary,
                             fontWeight: theme.typography.fontWeight500,
-                            pl: theme.mixins.customPadding.p4,
+                            pl: theme.styleMixins.customPadding.p4,
                         },
-                    }, className: "w-full flex items-center py-1 px-2 rounded-12 border border-".concat(theme.palette.border.accent3, " bg-white text-black") }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "py-4 mt-3 h-[50dvh] space-y-3", 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-1", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                                color: theme.palette.text.accent,
+                    }, className: "w-full flex items-center py-1 px-2 rounded-12 border border-".concat(theme.palette.divider, " bg-white text-black") }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "py-4 mt-3 h-[50dvh] space-y-3", 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-1", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                                color: theme.palette.text.secondary,
                                                 fontSize: theme.typography.fontSize12,
                                                 fontWeight: theme.typography.fontWeight600,
-                                            }, children: "Token" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.mixins.column), className: "items-center gap-0.5", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_up") }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_down") })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                                color: theme.palette.text.accent,
+                                            }, children: "Token" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({}, theme.styleMixins.column), className: "items-center gap-0.5", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_up") }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_down") })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                                                color: theme.palette.text.secondary,
                                                 fontSize: theme.typography.fontSize12,
                                                 fontWeight: theme.typography.fontWeight600,
                                             }, children: "Balance" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "flex items-center gap-0.5 flex-col", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_up") }), (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_drop_down") })] })] })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: "space-y-3", children: selectTokenForm.value

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

@@ -16,48 +16,48 @@ 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 Text_1 = __importDefault(require("../Text"));
 var CheckBoxComponent_1 = __importDefault(require("../CheckBoxComponent"));
 var Button_1 = __importDefault(require("../Button"));
 var ModalStatusFilter = function (_a) {
     var statusList = _a.statusList, handleStatusSelect = _a.handleStatusSelect, _b = _a.selectedStatuses, selectedStatuses = _b === void 0 ? [] : _b, onApply = _a.onApply, onReset = _a.onReset;
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                    backgroundColor: theme.palette.border.accent3,
+                    backgroundColor: theme.palette.divider,
                     width: "100%",
-                    mt: theme.mixins.customMargin.m12,
-                    mb: theme.mixins.customMargin.m12,
-                } }), statusList === null || statusList === void 0 ? void 0 : statusList.map(function (item) { return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: function () { return handleStatusSelect(item.name); }, sx: __assign(__assign({}, theme.mixins.row), { justifyContent: "space-between", alignItems: "center", px: theme.mixins.customPadding.p8, py: theme.mixins.customPadding.p4, borderRadius: theme.mixins.customRadius.r16, padding: theme.mixins.customPadding.p12, color: theme.palette.text.blackContrast, border: "1px solid", borderColor: selectedStatuses.includes(item.name)
+                    mt: theme.styleMixins.customMargin.m12,
+                    mb: theme.styleMixins.customMargin.m12,
+                } }), statusList === null || statusList === void 0 ? void 0 : statusList.map(function (item) { return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: function () { return handleStatusSelect(item.name); }, sx: __assign(__assign({}, theme.styleMixins.row), { justifyContent: "space-between", alignItems: "center", px: theme.styleMixins.customPadding.p8, py: theme.styleMixins.customPadding.p4, borderRadius: theme.styleMixins.customRadius.r16, padding: theme.styleMixins.customPadding.p12, color: theme.palette.text.primary, border: "1px solid", borderColor: selectedStatuses.includes(item.name)
                         ? theme.palette.primary.main
-                        : theme.palette.border.accent3, backgroundColor: selectedStatuses.includes(item.name)
-                        ? theme.palette.background.white
-                        : "transparent", mt: theme.mixins.customMargin.m12, cursor: "pointer" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+                        : theme.palette.divider, backgroundColor: selectedStatuses.includes(item.name)
+                        ? theme.palette.background.default
+                        : "transparent", mt: theme.styleMixins.customMargin.m12, cursor: "pointer" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                             fontSize: theme.typography.fontSize12,
                             fontWeight: theme.typography.fontWeight500,
                         }, children: item === null || item === void 0 ? void 0 : item.title }), (0, jsx_runtime_1.jsx)(CheckBoxComponent_1.default, { checked: selectedStatuses.includes(item === null || item === void 0 ? void 0 : item.name), sx: {
                             "& .MuiSvgIcon-root": {
                                 color: selectedStatuses.includes(item === null || item === void 0 ? void 0 : item.name)
                                     ? theme.palette.primary.main
-                                    : theme.palette.text.accent,
+                                    : theme.palette.text.secondary,
                             },
-                        } })] }, item.name)); }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g10, justifyContent: "center", mt: theme.mixins.customMargin.m16, width: "100%" }), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onReset, sx: {
-                            backgroundColor: theme.palette.background.white,
+                        } })] }, item.name)); }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g10, justifyContent: "center", mt: theme.styleMixins.customMargin.m16, width: "100%" }), children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onReset, sx: {
+                            backgroundColor: theme.palette.background.default,
                             borderColor: theme.palette.primary.main,
-                            borderRadius: theme.mixins.customRadius.r12,
+                            borderRadius: theme.styleMixins.customRadius.r12,
                             color: theme.palette.primary.main,
                             fontSize: theme.typography.fontSize12,
                             fontWeight: theme.typography.fontWeight600,
-                            padding: theme.mixins.customPadding.p12,
+                            padding: theme.styleMixins.customPadding.p12,
                             textTransform: "none",
                         }, fullWidth: true, children: "Reset" }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onApply, sx: {
                             backgroundColor: theme.palette.primary.main,
                             borderColor: theme.palette.secondary.main,
-                            borderRadius: theme.mixins.customRadius.r12,
+                            borderRadius: theme.styleMixins.customRadius.r12,
                             color: theme.palette.secondary.main,
                             fontSize: theme.typography.fontSize12,
                             fontWeight: theme.typography.fontWeight600,
-                            padding: theme.mixins.customPadding.p12,
+                            padding: theme.styleMixins.customPadding.p12,
                             textTransform: "none",
                         }, fullWidth: true, children: "Apply" })] })] }));
 };

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

@@ -26,11 +26,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var Text_1 = __importDefault(require("../Text"));
 var ModalTitle = function (props) {
     var children = props.children, sx = props.sx, rest = __rest(props, ["children", "sx"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, rest, { sx: __assign(__assign({}, theme.mixins.sessionTitle), sx), children: children })));
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, rest, { sx: __assign(__assign({}, theme.styleMixins.sessionTitle), sx), children: children })));
 };
 exports.default = ModalTitle;

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

@@ -23,14 +23,14 @@ var Text_1 = __importDefault(require("../Text"));
 var framer_motion_1 = require("framer-motion");
 var useFormatter_1 = __importDefault(require("../../../hooks/useFormatter"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var formatDate_1 = __importDefault(require("../../../utils/formatDate"));
 function NeonLineChart(_a) {
     var _b, _c, _d;
     var series = _a.series, categories = _a.categories, _e = _a.showMinMaxValues, showMinMaxValues = _e === void 0 ? false : _e, children = _a.children, sx = _a.sx;
     var chartComponentRef = (0, react_1.useRef)(null);
     var formatValue = (0, useFormatter_1.default)().formatValue;
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var options = {
         title: {
             text: "",
@@ -159,7 +159,7 @@ function NeonLineChart(_a) {
                             duration: 0.4,
                             ease: "easeInOut",
                             delay: 0.4,
-                        }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: maxValue }) }) }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "absolute bottom-0 w-fit z-[9999]", style: {
+                        }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: maxValue }) }) }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "absolute bottom-0 w-fit z-[9999]", style: {
                             left: "".concat(Math.min((minIndex / chartLength) * 100, 90), "%"),
                         }, initial: {
                             scale: 0,
@@ -175,6 +175,6 @@ function NeonLineChart(_a) {
                             duration: 0.4,
                             ease: "easeInOut",
                             delay: 0.4,
-                        }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.value), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: minValue }) }) })] })), (0, jsx_runtime_1.jsx)(highcharts_react_official_1.default, { highcharts: highcharts_1.default, options: options, ref: chartComponentRef }), children] }));
+                        }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.value), children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: minValue }) }) })] })), (0, jsx_runtime_1.jsx)(highcharts_react_official_1.default, { highcharts: highcharts_1.default, options: options, ref: chartComponentRef }), children] }));
 }
 exports.default = (0, react_1.memo)(NeonLineChart);

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

@@ -31,17 +31,17 @@ var Icon_1 = __importDefault(require("../Icon"));
 var Text_1 = __importDefault(require("../Text"));
 var parsePropsData_1 = __importDefault(require("../../../utils/parsePropsData"));
 var material_1 = require("@mui/material");
-var ThemeProvider_1 = require("../../../providers/ThemeProvider");
+var mui_1 = require("../../../theme/mui");
 var SvgPath_1 = require("../SvgPath");
 var Formatter_1 = __importDefault(require("../Formatter"));
 var NetworkSelection = function (props) {
     var networkDataString = props.networkData, onClick = props.onClick, active = props.active, token = props.token, rest = __rest(props, ["networkData", "onClick", "active", "token"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var networkData = (0, react_1.useMemo)(function () { return (0, parsePropsData_1.default)(networkDataString); }, [networkDataString]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({}, rest, { sx: __assign(__assign({}, theme.mixins.row), { backgroundColor: active
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({}, rest, { sx: __assign(__assign({}, theme.styleMixins.row), { backgroundColor: active
                 ? "".concat(theme.palette.background.tertiary)
-                : "".concat(theme.palette.background.white), backdropFilter: "blur(12px)", padding: theme.mixins.customPadding.p16, borderRadius: theme.mixins.customRadius.r16, border: "1px solid", borderColor: active ? "".concat(theme.palette.primary.main) : "".concat(theme.palette.border.accent3), gap: theme.mixins.gaps.g8, justifyContent: "space-between" }), onClick: function () {
+                : "".concat(theme.palette.background.default), backdropFilter: "blur(12px)", padding: theme.styleMixins.customPadding.p16, borderRadius: theme.styleMixins.customRadius.r16, border: "1px solid", borderColor: active ? "".concat(theme.palette.primary.main) : "".concat(theme.palette.divider), gap: theme.styleMixins.gaps.g8, justifyContent: "space-between" }), onClick: function () {
             onClick === null || onClick === void 0 ? void 0 : onClick(networkData);
-        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: networkData === null || networkData === void 0 ? void 0 : networkData.link, sx: { borderRadius: theme.mixins.customRadius.full }, width: 24 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g2 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.value), { color: "text.white", whiteSpace: "nowrap", textTransform: "capitalize" }), children: networkData === null || networkData === void 0 ? void 0 : networkData.name }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.activityDescription), { color: theme.palette.text.accent, fontSize: theme.typography.fontSize13, fontWeight: theme.typography.fontWeight400 }), children: ["Minimum transaction amount:", " ", (0, jsx_runtime_1.jsx)("strong", { children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: networkData === null || networkData === void 0 ? void 0 : networkData.min_value, unit: token === null || token === void 0 ? void 0 : token.name }) })] })] })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: active ? SvgPath_1.IC_CHECK : SvgPath_1.IC_UNCHECK })] })));
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: networkData === null || networkData === void 0 ? void 0 : networkData.link, sx: { borderRadius: theme.styleMixins.customRadius.full }, width: 24 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g4 }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.value), { color: "text.white", whiteSpace: "nowrap", textTransform: "capitalize" }), children: networkData === null || networkData === void 0 ? void 0 : networkData.name }), (0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign(__assign({}, theme.styleMixins.activityDescription), { color: theme.palette.text.secondary, fontSize: theme.typography.fontSize13, fontWeight: theme.typography.fontWeight400 }), children: ["Minimum transaction amount:", " ", (0, jsx_runtime_1.jsx)("strong", { children: (0, jsx_runtime_1.jsx)(Formatter_1.default, { value: networkData === null || networkData === void 0 ? void 0 : networkData.min_value, unit: token === null || token === void 0 ? void 0 : token.name }) })] })] })] }), (0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20, color: theme.palette.text.primary }, children: active ? SvgPath_1.IC_CHECK : SvgPath_1.IC_UNCHECK })] })));
 };
 exports.default = NetworkSelection;

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

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -41,7 +42,7 @@ var react_otp_input_1 = __importDefault(require("react-otp-input"));
 var SvgPath_1 = require("../SvgPath");
 var xhub_keyboard_1 = require("xhub-keyboard");
 var react_1 = require("react");
-var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 var OtpInputType;
 (function (OtpInputType) {
     OtpInputType["TEXT"] = "text";
@@ -51,7 +52,7 @@ var OtpInputType;
 })(OtpInputType || (exports.OtpInputType = OtpInputType = {}));
 var CustomOtpInput = function (props) {
     var otpInputType = props.otpInputType, numInputs = props.numInputs, _a = props.onChange, onChange = _a === void 0 ? function () { } : _a, _b = props.readOnly, readOnly = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, rest = __rest(props, ["otpInputType", "numInputs", "onChange", "readOnly", "disabled"]);
-    var theme = (0, providers_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     var InputElement = (0, react_1.useMemo)(function () {
         var _a, _b, _c;
         switch (otpInputType) {
@@ -61,37 +62,38 @@ var CustomOtpInput = function (props) {
                         alignItems: "center",
                         justifyContent: "center",
                     }, children: (0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { onChange: onChange, numInputs: numInputs, inputType: "password", inputStyle: {
-                            border: "1px solid #00000058",
-                            borderRadius: "0.75rem",
+                            border: "1px solid ".concat(theme.palette.text.secondary),
+                            borderRadius: theme.styleMixins.customRadius.r12,
                             width: "2.8rem",
                             aspectRatio: "1/1.1",
                             margin: "0 0.25rem",
                             outline: "none",
-                            color: "#000",
-                            backgroundColor: "white",
-                        }, renderInput: function (props) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "decimal", readOnly: readOnly })), (0, jsx_runtime_1.jsx)("style", { children: "input::selection {\n            background-color: white; \n            color: #000; \n          }" })] })); } })) }));
+                            color: theme.palette.text.primary,
+                            backgroundColor: theme.palette.background.default,
+                        }, renderInput: function (props) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "decimal", readOnly: readOnly })), (0, jsx_runtime_1.jsx)("style", { children: "input::selection {\n            background-color: ".concat(theme.palette.background.default, "; \n            color: ").concat(theme.palette.text.primary, "; \n          }") })] })); } })) }));
             case OtpInputType.OTP:
                 return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                         display: "flex",
                         alignItems: "center",
-                        border: "1px solid #00000058",
-                        borderRadius: "0.5rem",
-                        padding: "0.75rem 1rem",
+                        border: "1px solid",
+                        borderColor: theme.palette.divider,
+                        borderRadius: theme.styleMixins.customRadius.r12,
+                        padding: "".concat(theme.styleMixins.customPadding.p16, " ").concat(theme.styleMixins.customPadding.p24),
                         width: "100%",
-                        backgroundColor: "#ffffff",
+                        backgroundColor: theme.palette.background.default,
                     }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: {
                                 width: 20,
                                 height: 20,
                             }, children: SvgPath_1.IC_PASSCODE }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "fullWidth", flexItem: true, sx: {
                                 margin: "0 0.75rem",
                             } }), (0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { onChange: onChange, numInputs: numInputs, inputType: "password", inputStyle: {
-                                borderBottom: "1px solid #000000",
+                                borderBottom: "1px solid ${theme.palette.text.secondary}",
                                 width: "0.625rem",
                                 margin: "0 0.25rem",
                                 outline: "none",
-                                color: "#000",
-                                backgroundColor: "#00000000",
-                            }, renderInput: function (props) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "decimal", readOnly: readOnly })), (0, jsx_runtime_1.jsx)("style", { children: "input::selection {\n          background-color: transparent;\n          color: #000;\n        }" })] })); } }))] }));
+                                color: theme.palette.text.primary,
+                                backgroundColor: "currentColor",
+                            }, renderInput: function (props) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "decimal", readOnly: readOnly })), (0, jsx_runtime_1.jsx)("style", { children: "input::selection {\n          background-color: transparent;\n          color: ".concat(theme.palette.text.primary, ";\n        }") })] })); } }))] }));
             case OtpInputType.CONFIRM_BY_PASSCODE:
                 var length_1 = numInputs || 6;
                 var value = ((_a = rest.value) === null || _a === void 0 ? void 0 : _a.split("")) || [];
@@ -107,16 +109,20 @@ var CustomOtpInput = function (props) {
                     }, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { styles: {
                             container: {
                                 width: "100%",
-                                borderColor: theme.palette.border.accent3,
+                                borderColor: theme.palette.divider,
                             },
                             input: {
                                 width: "100%",
                             },
-                        }, leftElement: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center" }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_PASSCODE }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "fullWidth", flexItem: true, sx: { margin: "0 0.75rem" } })] }), displayType: xhub_keyboard_1.DisplayType.Text, isUseFormatNumber: false, value: valueRendered, renderValue: function (value, index) { return ((0, jsx_runtime_1.jsx)("span", { style: { margin: "0.1rem", display: "inline-block" }, children: value != "_" ? "●" : "_" }, index)); } }) }));
+                        }, leftElement: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center" }, children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 20, height: 20 }, children: SvgPath_1.IC_PASSCODE }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", variant: "fullWidth", flexItem: true, sx: { margin: "0 0.75rem" } })] }), displayType: xhub_keyboard_1.DisplayType.Text, isUseFormatNumber: false, value: valueRendered, renderValue: function (value, index) { return ((0, jsx_runtime_1.jsx)("span", { style: {
+                                margin: "0.1rem",
+                                display: "inline-block",
+                                color: theme.palette.text.primary,
+                            }, children: value != "_" ? "●" : "_" }, index)); } }) }));
             default:
                 return ((0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { onChange: onChange, numInputs: numInputs, renderInput: function (props) { return ((0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "text", type: "text", readOnly: readOnly }))); } })));
         }
-    }, [otpInputType, rest, onChange, numInputs, theme.palette.border.accent3, readOnly]);
+    }, [otpInputType, rest, onChange, numInputs, theme.palette.divider, readOnly]);
     return InputElement;
 };
 exports.default = CustomOtpInput;