tek-wallet 0.0.805 → 0.0.807

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

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeesStyle = 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 Icon_1 = __importDefault(require("../Icon"));
 var Text_1 = __importDefault(require("../Text"));
 var Formatter_1 = __importDefault(require("../Formatter"));
@@ -44,7 +44,7 @@ var FeesStyle;
 })(FeesStyle || (exports.FeesStyle = FeesStyle = {}));
 function Fees(props) {
     var sx = props.sx, amount = props.amount, feesData = props.feesData, isFeePaidByAmount = props.isFeePaidByAmount, tokenSlug = props.tokenSlug, setIsEnoughBalanceToPayFee = props.setIsEnoughBalanceToPayFee, feesStyle = props.feesStyle, estimateReceive = props.estimateReceive, rest = __rest(props, ["sx", "amount", "feesData", "isFeePaidByAmount", "tokenSlug", "setIsEnoughBalanceToPayFee", "feesStyle", "estimateReceive"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     // const feesData = parsePropsData<FeesDataType>(feesDataString);
     var tokens = (0, useWalletData_1.default)().tokens;
     var getBalanceUseToPaidFee = (0, react_1.useCallback)(function (tokenSlugMustBePaidFee) {
@@ -94,63 +94,63 @@ function Fees(props) {
     var totalFeeInCurrency = (0, react_1.useMemo)(function () {
         return feesData === null || feesData === void 0 ? void 0 : feesData.fee_in_currency;
     }, [feesData]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !!isChargeFee && ((0, jsx_runtime_1.jsxs)(material_1.Accordion, __assign({ defaultExpanded: true }, rest, { disableGutters: true, sx: __assign(__assign({}, getStyled(feesStyle !== null && feesStyle !== void 0 ? feesStyle : FeesStyle.DEFAULT, theme)), sx), children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, { expandIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_down"), width: 8, height: 8 }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { width: "100%" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !!isChargeFee && ((0, jsx_runtime_1.jsxs)(material_1.Accordion, __assign({ defaultExpanded: true }, rest, { disableGutters: true, sx: __assign(__assign({}, getStyled(feesStyle !== null && feesStyle !== void 0 ? feesStyle : FeesStyle.DEFAULT, theme)), sx), children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, { expandIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_down"), width: 8, height: 8 }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { width: "100%" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontSize: theme.typography.fontSize11,
                                     fontWeight: theme.typography.fontWeight500,
-                                    color: theme.palette.text.black,
+                                    color: theme.palette.text.primary,
                                 }, children: "Total fees" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                     borderTop: "1px dashed",
-                                    borderColor: theme.palette.border.accent,
+                                    borderColor: theme.palette.divider,
                                     flex: 1,
                                     height: "1px",
                                     width: "100%",
-                                    ml: theme.mixins.gaps.g8,
-                                    mr: theme.mixins.gaps.g8,
+                                    ml: theme.styleMixins.gaps.g8,
+                                    mr: theme.styleMixins.gaps.g8,
                                 } }), (0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: {
                                     fontSize: theme.typography.fontSize13,
                                     fontWeight: theme.typography.fontWeight500,
-                                    color: theme.palette.text.black,
-                                }, value: totalFeeInCurrency, unit: " ".concat(tokenSlug.toUpperCase()), disableTooltip: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { width: "0.5rem" }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8, pt: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { alignItems: "stretch" }), children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { flex: 1, gap: theme.mixins.gaps.g8 }), children: feeCheckedBalance === null || feeCheckedBalance === void 0 ? void 0 : feeCheckedBalance.map(function (item, index) {
+                                    color: theme.palette.text.primary,
+                                }, value: totalFeeInCurrency, unit: " ".concat(tokenSlug.toUpperCase()), disableTooltip: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { width: "0.5rem" }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8, pt: theme.styleMixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { alignItems: "stretch" }), children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { flex: 1, gap: theme.styleMixins.gaps.g8 }), children: feeCheckedBalance === null || feeCheckedBalance === void 0 ? void 0 : feeCheckedBalance.map(function (item, index) {
                                         var _a, _b, _c, _d;
                                         return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                                                        borderRight: "1px dashed ".concat(theme.palette.border.accent),
+                                                        borderRight: "1px dashed ".concat(theme.palette.divider),
                                                         width: "1px",
                                                         height: "1rem",
-                                                        pr: theme.mixins.gaps.g6,
+                                                        pr: theme.styleMixins.gaps.g6,
                                                     } })), (0, jsx_runtime_1.jsx)(FeeDetails, { feeName: (_a = item.fee_type) === null || _a === void 0 ? void 0 : _a.name, fee_in_currency: item.fee_in_currency, fee_in_usd: item.fee_in_usd, currencyName: (_b = item.currency) === null || _b === void 0 ? void 0 : _b.name }, (_c = item.fee_type) === null || _c === void 0 ? void 0 : _c.name)] }, (_d = item.fee_type) === null || _d === void 0 ? void 0 : _d.name));
-                                    }) }) }), isNotEnoughBalanceToPayFee && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: "ⓘ Insufficient transaction fee!" })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                                    borderColor: theme.palette.border.black16,
-                                    my: theme.mixins.gaps.g4,
-                                } }), estimateReceive !== undefined && ((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, { sx: {
+                                    }) }) }), isNotEnoughBalanceToPayFee && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationError), children: "ⓘ Insufficient transaction fee!" })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                    borderColor: theme.palette.divider,
+                                    my: theme.styleMixins.gaps.g4,
+                                } }), estimateReceive !== undefined && ((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, { sx: {
                                             fontSize: theme.typography.fontSize11,
                                             fontWeight: theme.typography.fontWeight500,
                                             lineHeight: theme.typography.leading160,
                                         }, children: "Receive amount estimated" }), (0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: {
                                             fontSize: theme.typography.fontSize16,
                                             fontWeight: theme.typography.fontWeight700,
-                                            color: theme.palette.text.black,
+                                            color: theme.palette.text.primary,
                                         }, unit: " ".concat(tokenSlug.toUpperCase()), value: estimateReceive })] }))] }) })] }))) }));
 }
 exports.default = Fees;
 var FeeDetails = function (_a) {
     var feeName = _a.feeName, fee_in_currency = _a.fee_in_currency, fee_in_usd = _a.fee_in_usd, currencyName = _a.currencyName;
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4, alignItems: "center", justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 14, height: 14 }, children: SvgPath_1.IC_TIMELINE_DOT }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4, alignItems: "center", justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 14, height: 14 }, children: SvgPath_1.IC_TIMELINE_DOT }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                     fontSize: theme.typography.fontSize11,
                     fontWeight: theme.typography.fontWeight500,
                     lineHeight: theme.typography.leading160,
-                    color: theme.palette.text.accent,
-                    pl: theme.mixins.gaps.g12,
+                    color: theme.palette.text.secondary,
+                    pl: theme.styleMixins.gaps.g12,
                     whiteSpace: "nowrap",
                     flex: 1,
-                }, children: feeName }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { width: "fit-content", alignItems: "flex-end" }), children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: {
+                }, children: feeName }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { width: "fit-content", alignItems: "flex-end" }), children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: {
                             fontSize: theme.typography.fontSize13,
                             fontWeight: theme.typography.fontWeight500,
-                            color: theme.palette.text.black,
+                            color: theme.palette.text.primary,
                         }, value: fee_in_currency, unit: " ".concat(currencyName), disableTooltip: true }), (0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: {
                             fontSize: theme.typography.fontSize11,
                             fontWeight: theme.typography.fontWeight500,
-                            color: theme.palette.text.black,
+                            color: theme.palette.text.primary,
                         }, value: fee_in_usd, unit: " $" })] })] }));
 };
 var getStyled = function (style, theme) {
@@ -192,8 +192,8 @@ var getStyled = function (style, theme) {
                 "&.MuiAccordion-root": {
                     backgroundColor: theme.palette.background.tertiary,
                     margin: 0,
-                    padding: theme.mixins.customPadding.p16,
-                    borderRadius: theme.mixins.customRadius.r16,
+                    padding: theme.styleMixins.customPadding.p16,
+                    borderRadius: theme.styleMixins.customRadius.r16,
                     border: "none",
                     boxShadow: "none",
                 },

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

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeesStyle = 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 Icon_1 = __importDefault(require("../Icon"));
 var Text_1 = __importDefault(require("../Text"));
 var Formatter_1 = __importDefault(require("../Formatter"));
@@ -44,7 +44,7 @@ var FeesStyle;
 })(FeesStyle || (exports.FeesStyle = FeesStyle = {}));
 function Fees(props) {
     var sx = props.sx, amount = props.amount, feesData = props.feesData, isFeePaidByAmount = props.isFeePaidByAmount, tokenSlug = props.tokenSlug, setIsEnoughBalanceToPayFee = props.setIsEnoughBalanceToPayFee, feesStyle = props.feesStyle, estimateReceive = props.estimateReceive, rest = __rest(props, ["sx", "amount", "feesData", "isFeePaidByAmount", "tokenSlug", "setIsEnoughBalanceToPayFee", "feesStyle", "estimateReceive"]);
-    var theme = (0, ThemeProvider_1.useTheme)();
+    var theme = (0, mui_1.useTheme)();
     // const feesData = parsePropsData<FeesDataType>(feesDataString);
     var tokens = (0, useWalletData_1.default)().tokens;
     var getBalanceUseToPaidFee = (0, react_1.useCallback)(function (tokenSlugMustBePaidFee) {
@@ -94,63 +94,62 @@ function Fees(props) {
     var totalFeeInCurrency = (0, react_1.useMemo)(function () {
         return feesData === null || feesData === void 0 ? void 0 : feesData.fee_in_currency;
     }, [feesData]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !!isChargeFee && ((0, jsx_runtime_1.jsxs)(material_1.Accordion, __assign({ defaultExpanded: true }, rest, { disableGutters: true, sx: __assign(__assign({}, getStyled(feesStyle !== null && feesStyle !== void 0 ? feesStyle : FeesStyle.DEFAULT, theme)), sx), children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, { expandIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_down"), width: 8, height: 8 }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { width: "100%" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !!isChargeFee && ((0, jsx_runtime_1.jsxs)(material_1.Accordion, __assign({ defaultExpanded: true }, rest, { disableGutters: true, sx: __assign(__assign({}, getStyled(feesStyle !== null && feesStyle !== void 0 ? feesStyle : FeesStyle.DEFAULT, theme)), sx), children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, { expandIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)("arrow_down"), width: 8, height: 8 }), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { width: "100%" }), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                     fontSize: theme.typography.fontSize11,
                                     fontWeight: theme.typography.fontWeight500,
-                                    color: theme.palette.text.black,
+                                    color: theme.palette.text.primary,
                                 }, children: "Total fees" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                     borderTop: "1px dashed",
-                                    borderColor: theme.palette.border.accent,
+                                    borderColor: theme.palette.divider,
                                     flex: 1,
                                     height: "1px",
                                     width: "100%",
-                                    ml: theme.mixins.gaps.g8,
-                                    mr: theme.mixins.gaps.g8,
+                                    ml: theme.styleMixins.gaps.g8,
+                                    mr: theme.styleMixins.gaps.g8,
                                 } }), (0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: {
                                     fontSize: theme.typography.fontSize13,
                                     fontWeight: theme.typography.fontWeight500,
-                                    color: theme.palette.text.black,
-                                }, value: totalFeeInCurrency, unit: " ".concat(tokenSlug.toUpperCase()), disableTooltip: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { width: "0.5rem" }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { gap: theme.mixins.gaps.g8, pt: theme.mixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { alignItems: "stretch" }), children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { flex: 1, gap: theme.mixins.gaps.g8 }), children: feeCheckedBalance === null || feeCheckedBalance === void 0 ? void 0 : feeCheckedBalance.map(function (item, index) {
+                                    color: theme.palette.text.primary,
+                                }, value: totalFeeInCurrency, unit: " ".concat(tokenSlug.toUpperCase()), disableTooltip: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { width: "0.5rem" }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { gap: theme.styleMixins.gaps.g8, pt: theme.styleMixins.gaps.g12 }), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { alignItems: "stretch" }), children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { flex: 1, gap: theme.styleMixins.gaps.g8 }), children: feeCheckedBalance === null || feeCheckedBalance === void 0 ? void 0 : feeCheckedBalance.map(function (item, index) {
                                         var _a, _b, _c, _d;
                                         return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                                                        borderRight: "1px dashed ".concat(theme.palette.border.accent),
+                                                        borderRight: "1px dashed ".concat(theme.palette.divider),
                                                         width: "1px",
                                                         height: "1rem",
-                                                        pr: theme.mixins.gaps.g6,
+                                                        pr: theme.styleMixins.gaps.g6,
                                                     } })), (0, jsx_runtime_1.jsx)(FeeDetails, { feeName: (_a = item.fee_type) === null || _a === void 0 ? void 0 : _a.name, fee_in_currency: item.fee_in_currency, fee_in_usd: item.fee_in_usd, currencyName: (_b = item.currency) === null || _b === void 0 ? void 0 : _b.name }, (_c = item.fee_type) === null || _c === void 0 ? void 0 : _c.name)] }, (_d = item.fee_type) === null || _d === void 0 ? void 0 : _d.name));
-                                    }) }) }), isNotEnoughBalanceToPayFee && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.validationError), children: "ⓘ Insufficient transaction fee!" })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
-                                    borderColor: theme.palette.border.black16,
-                                    my: theme.mixins.gaps.g4,
-                                } }), estimateReceive !== undefined && ((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, { sx: {
+                                    }) }) }), isNotEnoughBalanceToPayFee && ((0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.styleMixins.validationError), children: "ⓘ Insufficient transaction fee!" })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                    my: theme.styleMixins.gaps.g4,
+                                } }), estimateReceive !== undefined && ((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, { sx: {
                                             fontSize: theme.typography.fontSize11,
                                             fontWeight: theme.typography.fontWeight500,
                                             lineHeight: theme.typography.leading160,
                                         }, children: "Receive amount estimated" }), (0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: {
                                             fontSize: theme.typography.fontSize16,
                                             fontWeight: theme.typography.fontWeight700,
-                                            color: theme.palette.text.black,
+                                            color: theme.palette.text.primary,
                                         }, unit: " ".concat(tokenSlug.toUpperCase()), value: estimateReceive })] }))] }) })] }))) }));
 }
 exports.default = Fees;
 var FeeDetails = function (_a) {
     var feeName = _a.feeName, fee_in_currency = _a.fee_in_currency, fee_in_usd = _a.fee_in_usd, currencyName = _a.currencyName;
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g4, alignItems: "center", justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 14, height: 14 }, children: SvgPath_1.IC_TIMELINE_DOT }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g4, alignItems: "center", justifyContent: "space-between" }), children: [(0, jsx_runtime_1.jsx)(material_1.SvgIcon, { sx: { width: 14, height: 14 }, children: SvgPath_1.IC_TIMELINE_DOT }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                     fontSize: theme.typography.fontSize11,
                     fontWeight: theme.typography.fontWeight500,
                     lineHeight: theme.typography.leading160,
-                    color: theme.palette.text.accent,
-                    pl: theme.mixins.gaps.g12,
+                    color: theme.palette.text.secondary,
+                    pl: theme.styleMixins.gaps.g12,
                     whiteSpace: "nowrap",
                     flex: 1,
-                }, children: feeName }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.column), { width: "fit-content", alignItems: "flex-end" }), children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: {
+                }, children: feeName }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.column), { width: "fit-content", alignItems: "flex-end" }), children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: {
                             fontSize: theme.typography.fontSize13,
                             fontWeight: theme.typography.fontWeight500,
-                            color: theme.palette.text.black,
+                            color: theme.palette.text.primary,
                         }, value: fee_in_currency, unit: " ".concat(currencyName), disableTooltip: true }), (0, jsx_runtime_1.jsx)(Formatter_1.default, { sx: {
                             fontSize: theme.typography.fontSize11,
                             fontWeight: theme.typography.fontWeight500,
-                            color: theme.palette.text.black,
+                            color: theme.palette.text.primary,
                         }, value: fee_in_usd, unit: " $" })] })] }));
 };
 var getStyled = function (style, theme) {
@@ -192,8 +191,8 @@ var getStyled = function (style, theme) {
                 "&.MuiAccordion-root": {
                     backgroundColor: theme.palette.background.tertiary,
                     margin: 0,
-                    padding: theme.mixins.customPadding.p16,
-                    borderRadius: theme.mixins.customRadius.r16,
+                    padding: theme.styleMixins.customPadding.p16,
+                    borderRadius: theme.styleMixins.customRadius.r16,
                     border: "none",
                     boxShadow: "none",
                 },

package/dist/components/TekWallet/components/ui/FiatDeposit/components/shareAction.js

@@ -58,15 +58,13 @@ var react_1 = require("react");
 var html_to_image_1 = require("html-to-image");
 var Text_1 = __importDefault(require("../../Text"));
 var style_1 = require("../style");
-var palette_1 = require("../../../../theme/mui/deposit-fiat-theme/palette");
 var SuccessAnimation = function () { return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M4.5 12.75L10.5 18.75L19.5 5.25", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })); };
 exports.SuccessAnimation = SuccessAnimation;
 exports.default = (0, react_1.memo)(function ShareAction(_a) {
     var _this = this;
-    var _b, _c;
     var data = _a.data, shareRef = _a.shareRef;
-    var _d = (0, react_1.useState)(false), isDownloading = _d[0], setIsDownloading = _d[1];
-    var _e = (0, react_1.useState)(false), copySuccess = _e[0], setCopySuccess = _e[1];
+    var _b = (0, react_1.useState)(false), isDownloading = _b[0], setIsDownloading = _b[1];
+    var _c = (0, react_1.useState)(false), copySuccess = _c[0], setCopySuccess = _c[1];
     var convertHtml2Img = function () { return __awaiter(_this, void 0, void 0, function () {
         var _a, _b;
         var _c;
@@ -157,7 +155,7 @@ exports.default = (0, react_1.memo)(function ShareAction(_a) {
                             color: "#fff",
                             aspectRatio: "1 / 1",
                             background: "#044C2F",
-                        }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "21", height: "20", viewBox: "0 0 21 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.375 13.75V15.625C3.375 16.1223 3.57254 16.5992 3.92417 16.9508C4.27581 17.3025 4.75272 17.5 5.25 17.5H16.5C16.9973 17.5 17.4742 17.3025 17.8258 16.9508C18.1775 16.5992 18.375 16.1223 18.375 15.625V13.75M14.625 10L10.875 13.75M10.875 13.75L7.125 10M10.875 13.75V2.5", stroke: "white", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.content02), color: (_b = palette_1.palette.positive) === null || _b === void 0 ? void 0 : _b.main, children: "Save photo" })] }), (0, jsx_runtime_1.jsxs)(material_1.Grid2, { display: "flex", flexDirection: "column", gap: "0.375rem", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "primary", onClick: handleCopyLink, sx: {
+                        }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "21", height: "20", viewBox: "0 0 21 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.375 13.75V15.625C3.375 16.1223 3.57254 16.5992 3.92417 16.9508C4.27581 17.3025 4.75272 17.5 5.25 17.5H16.5C16.9973 17.5 17.4742 17.3025 17.8258 16.9508C18.1775 16.5992 18.375 16.1223 18.375 15.625V13.75M14.625 10L10.875 13.75M10.875 13.75L7.125 10M10.875 13.75V2.5", stroke: "white", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.content02), color: "text.primary", children: "Save photo" })] }), (0, jsx_runtime_1.jsxs)(material_1.Grid2, { display: "flex", flexDirection: "column", gap: "0.375rem", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "primary", onClick: handleCopyLink, sx: {
                             borderRadius: "0.75rem",
                             justifyContent: "center",
                             alignItems: "center",
@@ -167,5 +165,5 @@ exports.default = (0, react_1.memo)(function ShareAction(_a) {
                             color: "#fff",
                             aspectRatio: "1 / 1",
                             background: "#044C2F",
-                        }, children: copySuccess ? ((0, jsx_runtime_1.jsx)(exports.SuccessAnimation, {})) : ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "21", height: "20", viewBox: "0 0 21 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M11.6167 7.24002C12.1582 7.49857 12.6298 7.8833 12.9918 8.36189C13.3538 8.84048 13.5956 9.39895 13.697 9.9904C13.7985 10.5818 13.7564 11.189 13.5745 11.7608C13.3926 12.3327 13.0762 12.8525 12.6517 13.2767L8.90169 17.0267C8.19842 17.73 7.24459 18.125 6.25002 18.125C5.25546 18.125 4.30162 17.73 3.59836 17.0267C2.89509 16.3234 2.5 15.3696 2.5 14.375C2.5 13.3805 2.89509 12.4266 3.59836 11.7234L5.06252 10.2592M16.1875 9.74086L17.6517 8.27669C18.355 7.57342 18.75 6.61959 18.75 5.62502C18.75 4.63046 18.355 3.67662 17.6517 2.97336C16.9484 2.27009 15.9946 1.875 15 1.875C14.0055 1.875 13.0516 2.27009 12.3484 2.97336L8.59836 6.72336C8.17389 7.14752 7.85741 7.66736 7.67551 8.23921C7.49361 8.81105 7.45159 9.4182 7.553 10.0096C7.6544 10.6011 7.89626 11.1596 8.25827 11.6382C8.62027 12.1167 9.09183 12.5015 9.63336 12.76", stroke: "white", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.content02), color: (_c = palette_1.palette.positive) === null || _c === void 0 ? void 0 : _c.main, children: copySuccess ? "Copied!" : "Copy link" })] })] }));
+                        }, children: copySuccess ? ((0, jsx_runtime_1.jsx)(exports.SuccessAnimation, {})) : ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "21", height: "20", viewBox: "0 0 21 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M11.6167 7.24002C12.1582 7.49857 12.6298 7.8833 12.9918 8.36189C13.3538 8.84048 13.5956 9.39895 13.697 9.9904C13.7985 10.5818 13.7564 11.189 13.5745 11.7608C13.3926 12.3327 13.0762 12.8525 12.6517 13.2767L8.90169 17.0267C8.19842 17.73 7.24459 18.125 6.25002 18.125C5.25546 18.125 4.30162 17.73 3.59836 17.0267C2.89509 16.3234 2.5 15.3696 2.5 14.375C2.5 13.3805 2.89509 12.4266 3.59836 11.7234L5.06252 10.2592M16.1875 9.74086L17.6517 8.27669C18.355 7.57342 18.75 6.61959 18.75 5.62502C18.75 4.63046 18.355 3.67662 17.6517 2.97336C16.9484 2.27009 15.9946 1.875 15 1.875C14.0055 1.875 13.0516 2.27009 12.3484 2.97336L8.59836 6.72336C8.17389 7.14752 7.85741 7.66736 7.67551 8.23921C7.49361 8.81105 7.45159 9.4182 7.553 10.0096C7.6544 10.6011 7.89626 11.1596 8.25827 11.6382C8.62027 12.1167 9.09183 12.5015 9.63336 12.76", stroke: "white", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.content02), color: "text.primary", children: copySuccess ? "Copied!" : "Copy link" })] })] }));
 });

package/dist/components/TekWallet/components/ui/FiatDeposit/components/shareDrawer.js

@@ -19,18 +19,15 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var shareImage_1 = __importDefault(require("./shareImage"));
 var shareAction_1 = __importDefault(require("./shareAction"));
-var theme_1 = __importDefault(require("../../../../theme/mui/deposit-fiat-theme/theme"));
 var react_1 = require("react");
 var Text_1 = __importDefault(require("../../Text"));
 var style_1 = require("../style");
-var palette_1 = require("../../../../theme/mui/deposit-fiat-theme/palette");
 function ShareDrawer(_a) {
-    var _b, _c;
     var depositData = _a.depositData, count = _a.count, handleRefresh = _a.handleRefresh, onClose = _a.onClose;
     var shareRef = (0, react_1.useRef)(null);
     return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { p: "1rem", sx: {
-            background: theme_1.default.palette.tertiary.main,
+            background: "background.tertiary",
             maxHeight: "70%",
             overflowY: "auto",
-        }, pb: "2.5rem", gap: "0.75rem", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { width: "100%", flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title01), color: (_b = palette_1.palette.positive) === null || _b === void 0 ? void 0 : _b.main, children: "Share" }), (0, jsx_runtime_1.jsx)("svg", { onClick: onClose, xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M1 13L13 1M1 1L13 13", stroke: "#121212", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { flexItem: true }), (0, jsx_runtime_1.jsx)(shareImage_1.default, { ref: shareRef, data: depositData, count: count, handleRefresh: handleRefresh }), (0, jsx_runtime_1.jsx)(material_1.Divider, { flexItem: true }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "0.75rem", width: "100%", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title01), color: (_c = palette_1.palette.positive) === null || _c === void 0 ? void 0 : _c.main, children: "Share To" }), (0, jsx_runtime_1.jsx)(shareAction_1.default, { data: depositData, shareRef: shareRef })] })] }));
+        }, pb: "2.5rem", gap: "0.75rem", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { width: "100%", flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title01), color: "text.primary", children: "Share" }), (0, jsx_runtime_1.jsx)("svg", { onClick: onClose, xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M1 13L13 1M1 1L13 13", stroke: "#121212", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { flexItem: true }), (0, jsx_runtime_1.jsx)(shareImage_1.default, { ref: shareRef, data: depositData, count: count, handleRefresh: handleRefresh }), (0, jsx_runtime_1.jsx)(material_1.Divider, { flexItem: true }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "0.75rem", width: "100%", children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title01), color: "text.primary", children: "Share To" }), (0, jsx_runtime_1.jsx)(shareAction_1.default, { data: depositData, shareRef: shareRef })] })] }));
 }

package/dist/components/TekWallet/components/ui/FiatDeposit/components/shareImage.js

@@ -7,14 +7,13 @@ exports.default = ShareImage;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var formatter_1 = __importDefault(require("../../Formatter/functions/formatter"));
-var theme_1 = __importDefault(require("../../../../theme/mui/deposit-fiat-theme/theme"));
 var Icon_1 = __importDefault(require("../../Icon"));
 var Text_1 = __importDefault(require("../../Text"));
 function ShareImage(_a) {
     var _b, _c;
     var data = _a.data, count = _a.count, handleRefresh = _a.handleRefresh, ref = _a.ref;
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { width: "55%", p: "0.75rem", ref: ref, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { position: "relative", py: "1.5rem", sx: {
-                background: theme_1.default.palette.negative.main,
+                background: "background.default",
                 borderRadius: "0.563rem",
                 gap: "2rem",
                 alignItems: "center",

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

@@ -64,16 +64,16 @@ var formatter_1 = __importDefault(require("../Formatter/functions/formatter"));
 var shareDrawer_1 = __importDefault(require("./components/shareDrawer"));
 var link_1 = __importDefault(require("next/link"));
 var DrawerComponent_1 = __importStar(require("../DrawerComponent"));
-var theme_1 = __importDefault(require("../../../theme/mui/deposit-fiat-theme/theme"));
 var Icon_1 = __importDefault(require("../Icon"));
 var Button_1 = __importStar(require("../Button"));
 var Text_1 = __importDefault(require("../Text"));
 var style_1 = require("./style");
-var palette_1 = require("../../../theme/mui/deposit-fiat-theme/palette");
 var type_1 = require("../../../services/axios/get-activities-service/type");
 var CopyTextComponent_1 = __importDefault(require("../CopyTextComponent"));
 var Formatter_1 = __importDefault(require("../Formatter"));
 var PageHeader_1 = __importDefault(require("../PageHeader"));
+var providers_1 = require("../../../providers");
+var mui_1 = require("../../../theme/mui");
 // Because PageHeader component don't work
 var BackArrow = function (props) {
     return ((0, jsx_runtime_1.jsxs)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, props, { children: [(0, jsx_runtime_1.jsx)("mask", { id: "mask0_6061_2295", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "24", height: "24", children: (0, jsx_runtime_1.jsx)("rect", { width: "24", height: "24", fill: "#D9D9D9" }) }), (0, jsx_runtime_1.jsx)("g", { mask: "url(#mask0_6061_2295)", children: (0, jsx_runtime_1.jsx)("path", { d: "M14 17.6538L8.34619 12L14 6.34619L15.0538 7.40002L10.4538 12L15.0538 16.6L14 17.6538Z", fill: "#121212" }) })] })));
@@ -92,22 +92,22 @@ var CopyIcon = function () {
 };
 exports.CopyIcon = CopyIcon;
 function FiatDeposit(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var _b, _c, _d, _e;
     var children = _a.children;
     var amountInputRef = (0, react_1.useRef)(null);
-    var _k = (0, useWallet_1.default)(), masterWallet = _k.masterWallet, transaction = _k.transaction, receiveExternalTokens = _k.receiveExternalTokens, tokens = _k.tokens;
-    var _l = (0, react_1.useState)(false), open = _l[0], setOpen = _l[1];
-    var _m = (0, react_1.useState)(false), openQR = _m[0], setOpenQR = _m[1];
-    var _o = (0, react_1.useState)(false), openShare = _o[0], setOpenShare = _o[1];
+    var _f = (0, useWallet_1.default)(), masterWallet = _f.masterWallet, transaction = _f.transaction, receiveExternalTokens = _f.receiveExternalTokens, tokens = _f.tokens;
+    var _g = (0, react_1.useState)(false), open = _g[0], setOpen = _g[1];
+    var _h = (0, react_1.useState)(false), openQR = _h[0], setOpenQR = _h[1];
+    var _j = (0, react_1.useState)(false), openShare = _j[0], setOpenShare = _j[1];
     var keyboardId = (0, useUniqueId_1.useUniqueId)("receive-function-keyboard");
-    var _p = (0, react_1.useState)(""), inputAmount = _p[0], setInputAmount = _p[1];
-    var _q = (0, react_1.useState)(null), depositData = _q[0], setDepositData = _q[1];
-    var _r = (0, react_1.useState)(false), loading = _r[0], setLoading = _r[1];
-    var _s = (0, react_1.useState)(null), error = _s[0], setError = _s[1];
-    var _t = (0, react_1.useState)(false), copySuccess = _t[0], setCopySuccess = _t[1];
-    var _u = (0, usehooks_ts_1.useCountdown)({
+    var _k = (0, react_1.useState)(""), inputAmount = _k[0], setInputAmount = _k[1];
+    var _l = (0, react_1.useState)(null), depositData = _l[0], setDepositData = _l[1];
+    var _m = (0, react_1.useState)(false), loading = _m[0], setLoading = _m[1];
+    var _o = (0, react_1.useState)(null), error = _o[0], setError = _o[1];
+    var _p = (0, react_1.useState)(false), copySuccess = _p[0], setCopySuccess = _p[1];
+    var _q = (0, usehooks_ts_1.useCountdown)({
         countStart: 600,
-    }), count = _u[0], _v = _u[1], startCountdown = _v.startCountdown, resetCountdown = _v.resetCountdown;
+    }), count = _q[0], _r = _q[1], startCountdown = _r.startCountdown, resetCountdown = _r.resetCountdown;
     var handleChangeAmount = function (value) {
         var amountNumber = Number(value);
         if (isNaN(amountNumber)) {
@@ -185,6 +185,8 @@ function FiatDeposit(_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputAmount]);
+    var keyboardThemeMode = (0, providers_1.useKeyboardThemeMode)();
+    var theme = (0, mui_1.useTheme)();
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { onClick: function (e) {
                     e.stopPropagation();
                     setOpen(true);
@@ -196,27 +198,27 @@ function FiatDeposit(_a) {
                         }, title: "Top up", overrideBack: function () {
                             setOpen(false);
                             setInputAmount("");
-                        } }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { id: keyboardId, onChange: handleChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), keyboardId: "amount-keyboard-id", classNames: {
+                        } }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Keyboard, { theme: keyboardThemeMode, id: keyboardId, onChange: handleChangeAmount, keyboardType: xhub_keyboard_1.KeyboardType.Double, value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), keyboardId: "amount-keyboard-id", classNames: {
                             children: "fc",
                         }, styles: {
                             container: {
                                 height: "100%",
                             },
                         }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { height: "100%", flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { height: 0, flex: 1, p: "1rem", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { flexDirection: "column", p: "1rem", sx: {
-                                            backgroundColor: theme_1.default.palette.tertiary.main,
+                                            backgroundColor: "background.tertiary",
                                             border: "1px solid",
-                                            borderColor: theme_1.default.palette.accent3.main,
+                                            borderColor: "palette.divider",
                                             borderRadius: "1rem",
                                             gap: "0.5rem",
                                             opacity: loading ? 0.5 : 1,
                                             pointerEvents: loading ? "none" : "auto",
-                                        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title02), color: (_b = palette_1.palette.positive) === null || _b === void 0 ? void 0 : _b.main, children: "You Pay" }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { autoFocus: true, alwaysFocus: true, ref: amountInputRef, elementsAcceptIds: ["amount-keyboard-id"], value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, styles: {
+                                        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title02), color: "text.primary", children: "You Pay" }), (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Label, { htmlFor: keyboardId, children: (0, jsx_runtime_1.jsx)(xhub_keyboard_1.Input, { autoFocus: true, alwaysFocus: true, ref: amountInputRef, elementsAcceptIds: ["amount-keyboard-id"], value: inputAmount === null || inputAmount === void 0 ? void 0 : inputAmount.toString(), displayType: xhub_keyboard_1.DisplayType.Double, styles: {
                                                         container: {
-                                                            border: "1px solid ".concat(error ? theme_1.default.palette.error.main : theme_1.default.palette.primary.main),
+                                                            border: "1px solid ".concat(error ? theme.palette.error.main : theme.palette.primary.main),
                                                         },
                                                     }, rightElement: (0, jsx_runtime_1.jsxs)(material_1.Stack, { flexDirection: "row", alignItems: "center", gap: "4px", flexShrink: 0, pl: "1rem", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { alt: "", width: 16, height: 16, sx: {
                                                                     borderRadius: "999px",
-                                                                }, src: (_d = (_c = tokens === null || tokens === void 0 ? void 0 : tokens.find(function (item) { return item.currency_slug.toLocaleLowerCase() === "vnd"; })) === null || _c === void 0 ? void 0 : _c.currency.link) !== null && _d !== void 0 ? _d : "/" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title03), color: (_e = palette_1.palette.accent2) === null || _e === void 0 ? void 0 : _e.main, children: "VND" })] }) }) }), error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, style_1.content02), display: "flex", alignItems: "center", gap: "4px", className: "text-error", children: [(0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 5.25V7.4375M12.25 7C12.25 7.68944 12.1142 8.37213 11.8504 9.00909C11.5865 9.64605 11.1998 10.2248 10.7123 10.7123C10.2248 11.1998 9.64605 11.5865 9.00909 11.8504C8.37213 12.1142 7.68944 12.25 7 12.25C6.31056 12.25 5.62787 12.1142 4.99091 11.8504C4.35395 11.5865 3.7752 11.1998 3.28769 10.7123C2.80018 10.2248 2.41347 9.64605 2.14963 9.00909C1.8858 8.37213 1.75 7.68944 1.75 7C1.75 5.60761 2.30312 4.27226 3.28769 3.28769C4.27226 2.30312 5.60761 1.75 7 1.75C8.39239 1.75 9.72774 2.30312 10.7123 3.28769C11.6969 4.27226 12.25 5.60761 12.25 7ZM7 9.1875H7.00467V9.19217H7V9.1875Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }), error] }))] }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { pt: "12px", id: "input-amount-action", children: (0, jsx_runtime_1.jsx)(material_1.Box, { px: "1rem", pb: "1.5rem", children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { status: !!error || !inputAmount
+                                                                }, src: (_c = (_b = tokens === null || tokens === void 0 ? void 0 : tokens.find(function (item) { return item.currency_slug.toLocaleLowerCase() === "vnd"; })) === null || _b === void 0 ? void 0 : _b.currency.link) !== null && _c !== void 0 ? _c : "/" }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title03), color: "text.primary", children: "VND" })] }) }) }), error && ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: __assign({}, style_1.content02), display: "flex", alignItems: "center", gap: "4px", className: "text-error", children: [(0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 5.25V7.4375M12.25 7C12.25 7.68944 12.1142 8.37213 11.8504 9.00909C11.5865 9.64605 11.1998 10.2248 10.7123 10.7123C10.2248 11.1998 9.64605 11.5865 9.00909 11.8504C8.37213 12.1142 7.68944 12.25 7 12.25C6.31056 12.25 5.62787 12.1142 4.99091 11.8504C4.35395 11.5865 3.7752 11.1998 3.28769 10.7123C2.80018 10.2248 2.41347 9.64605 2.14963 9.00909C1.8858 8.37213 1.75 7.68944 1.75 7C1.75 5.60761 2.30312 4.27226 3.28769 3.28769C4.27226 2.30312 5.60761 1.75 7 1.75C8.39239 1.75 9.72774 2.30312 10.7123 3.28769C11.6969 4.27226 12.25 5.60761 12.25 7ZM7 9.1875H7.00467V9.19217H7V9.1875Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }), error] }))] }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { pt: "12px", id: "input-amount-action", children: (0, jsx_runtime_1.jsx)(material_1.Box, { px: "1rem", pb: "1.5rem", children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { status: !!error || !inputAmount
                                                 ? Button_1.BUTTON_STATUS.DISABLED
                                                 : loading
                                                     ? Button_1.BUTTON_STATUS.LOADING
@@ -225,12 +227,12 @@ function FiatDeposit(_a) {
                             setOpenQR(false);
                             setInputAmount("");
                         } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { height: "100%", p: "1rem", pt: "26%", children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { height: 0, flex: 1, width: "100%", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", p: "1rem", sx: {
-                                        backgroundColor: theme_1.default.palette.tertiary.main,
+                                        backgroundColor: "background.tertiary",
                                         border: "1px solid",
-                                        borderColor: theme_1.default.palette.accent3.main,
+                                        borderColor: "palette.divider",
                                         borderRadius: "1rem",
                                         gap: "0.75rem",
-                                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", width: "45%", mt: "-25%", sx: { aspectRatio: "1 / 1" }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (_f = depositData === null || depositData === void 0 ? void 0 : depositData.qr_code) !== null && _f !== void 0 ? _f : "/", sx: {
+                                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", width: "45%", mt: "-25%", sx: { aspectRatio: "1 / 1" }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (_d = depositData === null || depositData === void 0 ? void 0 : depositData.qr_code) !== null && _d !== void 0 ? _d : "/", sx: {
                                                         position: "absolute",
                                                         inset: 0,
                                                     }, style: { filter: count === 0 ? "blur(6px)" : "none" } }), count === 0 && ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", position: "absolute", alignItems: "center", justifyContent: "center", sx: {
@@ -243,16 +245,16 @@ function FiatDeposit(_a) {
                                                 display: "flex",
                                                 alignItems: "center",
                                                 flexDirection: "column",
-                                                color: theme_1.default.palette.primary.main,
+                                                color: "text.primary",
                                             }, children: [(0, jsx_runtime_1.jsx)(Formatter_1.default, { value: depositData === null || depositData === void 0 ? void 0 : depositData.amount, unit: "VND", hideUnitOutSide: true }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
                                                         fontSize: "0.938rem",
                                                         fontWeight: 500,
                                                         lineHeight: "140%",
-                                                    }, children: "VND" })] }), (0, jsx_runtime_1.jsxs)(Text_1.default, { display: "flex", alignItems: "center", gap: "0.375rem", sx: __assign({}, style_1.title03), color: (_g = palette_1.palette.accent2) === null || _g === void 0 ? void 0 : _g.main, children: ["Top up time left", (0, jsx_runtime_1.jsx)(TimeText_1.default, { seconds: count }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 5V7.5M13 7C13 7.78793 12.8448 8.56815 12.5433 9.2961C12.2417 10.0241 11.7998 10.6855 11.2426 11.2426C10.6855 11.7998 10.0241 12.2417 9.2961 12.5433C8.56815 12.8448 7.78793 13 7 13C6.21207 13 5.43185 12.8448 4.7039 12.5433C3.97595 12.2417 3.31451 11.7998 2.75736 11.2426C2.20021 10.6855 1.75825 10.0241 1.45672 9.2961C1.15519 8.56815 1 7.78793 1 7C1 5.4087 1.63214 3.88258 2.75736 2.75736C3.88258 1.63214 5.4087 1 7 1C8.5913 1 10.1174 1.63214 11.2426 2.75736C12.3679 3.88258 13 5.4087 13 7ZM7 9.5H7.00533V9.50533H7V9.5Z", stroke: "#044C2F", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { flexItem: true }), (0, jsx_runtime_1.jsxs)(Text_1.default, { display: "flex", flexDirection: "column", alignItems: "center", gap: "0.375rem", sx: __assign({}, style_1.title01), children: [depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_name, (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.content02), color: (_h = palette_1.palette.accent2) === null || _h === void 0 ? void 0 : _h.main, children: depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.bank_name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title02), display: "flex", alignItems: "center", gap: "0.25rem", children: (0, jsx_runtime_1.jsxs)(CopyTextComponent_1.default, { sx: {
+                                                    }, children: "VND" })] }), (0, jsx_runtime_1.jsxs)(Text_1.default, { display: "flex", alignItems: "center", gap: "0.375rem", sx: __assign({}, style_1.title03), color: "text.primary", children: ["Top up time left", (0, jsx_runtime_1.jsx)(TimeText_1.default, { seconds: count }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 5V7.5M13 7C13 7.78793 12.8448 8.56815 12.5433 9.2961C12.2417 10.0241 11.7998 10.6855 11.2426 11.2426C10.6855 11.7998 10.0241 12.2417 9.2961 12.5433C8.56815 12.8448 7.78793 13 7 13C6.21207 13 5.43185 12.8448 4.7039 12.5433C3.97595 12.2417 3.31451 11.7998 2.75736 11.2426C2.20021 10.6855 1.75825 10.0241 1.45672 9.2961C1.15519 8.56815 1 7.78793 1 7C1 5.4087 1.63214 3.88258 2.75736 2.75736C3.88258 1.63214 5.4087 1 7 1C8.5913 1 10.1174 1.63214 11.2426 2.75736C12.3679 3.88258 13 5.4087 13 7ZM7 9.5H7.00533V9.50533H7V9.5Z", stroke: "#044C2F", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { flexItem: true }), (0, jsx_runtime_1.jsxs)(Text_1.default, { display: "flex", flexDirection: "column", alignItems: "center", gap: "0.375rem", sx: __assign({}, style_1.title01), children: [depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_name, (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.content02), color: "text.primary", children: depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.bank_name }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, style_1.title02), display: "flex", alignItems: "center", gap: "0.25rem", children: (0, jsx_runtime_1.jsxs)(CopyTextComponent_1.default, { sx: {
                                                             display: "flex",
                                                             alignItems: "center",
                                                             gap: 1,
-                                                        }, value: (depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_number) || "", children: [depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_number, " ", (0, jsx_runtime_1.jsx)(exports.CopyIcon, {})] }) }), (0, jsx_runtime_1.jsx)(link_1.default, { href: (_j = depositData === null || depositData === void 0 ? void 0 : depositData._link.payment_link.href) !== null && _j !== void 0 ? _j : "#", target: "_blank", rel: "noopener noreferrer", style: {
+                                                        }, value: (depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_number) || "", children: [depositData === null || depositData === void 0 ? void 0 : depositData.metadata.bank_account.account_number, " ", (0, jsx_runtime_1.jsx)(exports.CopyIcon, {})] }) }), (0, jsx_runtime_1.jsx)(link_1.default, { href: (_e = depositData === null || depositData === void 0 ? void 0 : depositData._link.payment_link.href) !== null && _e !== void 0 ? _e : "#", target: "_blank", rel: "noopener noreferrer", style: {
                                                         marginTop: "-0.5rem",
                                                     }, children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, style_1.content02), { textDecoration: "underline", fontStyle: "italic" }), children: "Transfer" }) })] })] }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { pt: "0.75rem", pb: "1rem", width: "100%", children: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { disabled: loading, loading: loading, onClick: function () {
                                         if (count === 0) {

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

@@ -68,6 +68,7 @@ var Formatter = function (_a) {
     ]);
     var trigger = valueDisplay();
     return ((0, jsx_runtime_1.jsx)(CustomTooltip_1.default, { disabled: disableTooltip, trigger: value ? addUnit(trigger) : trigger, sx: {
+            display: "inline-block",
             "& .MuiPaper-root": {
                 whiteSpace: "nowrap",
                 backdropFilter: "blur(10px)",
@@ -76,6 +77,8 @@ var Formatter = function (_a) {
                 fontSize: "1.05em",
                 fontWeight: 500,
                 lineHeight: "100%",
+                backgroundColor: "background.popover",
+                display: "inline-block",
             },
         }, children: (0, jsx_runtime_1.jsx)(exports.Formatter, { disableTooltip: true, start: start, value: value, lengthValueAllowed: 12, useCompact: false, unit: unit, allowShowZero: true, isNotCurrency: isNotCurrency }) }));
 };

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

@@ -16,15 +16,14 @@ 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 Icon_1 = __importDefault(require("../Icon"));
 var Text_1 = __importDefault(require("../Text"));
 var FunctionItem = function (props) {
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.column), { alignItems: "center", gap: theme.mixins.gaps.g4 }), props.sx), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: props.icon, alt: "", sx: {
-                    borderRadius: theme.mixins.customRadius.full,
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.styleMixins.column), { alignItems: "center", gap: theme.styleMixins.gaps.g4, color: theme.palette.primary.main }), props.sx), children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { iconKey: props.icon, alt: "", sx: {
+                    borderRadius: theme.styleMixins.customRadius.full,
                 }, width: 24 }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                    color: theme.palette.text.primary,
                     fontSize: theme.typography.fontSize11,
                     lineHeight: theme.typography.leading140,
                     fontWeight: theme.typography.fontWeight600,

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

@@ -68,6 +68,6 @@ var Icon = function (props) {
     if (src) {
         return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ component: "img", src: src, alt: alt, onClick: onClick }, rest, { sx: __assign({ display: "block", width: ((_a = width !== null && width !== void 0 ? width : height) !== null && _a !== void 0 ? _a : false) ? "".concat((width || height || 0) / 16, "rem") : "auto", height: ((_b = height !== null && height !== void 0 ? height : width) !== null && _b !== void 0 ? _b : false) ? "".concat((height || width || 0) / 16, "rem") : "auto" }, sx) })));
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.SvgIcon, __assign({}, rest, { sx: __assign({ width: ((_c = width !== null && width !== void 0 ? width : height) !== null && _c !== void 0 ? _c : false) ? "".concat((width || height || 0) / 16, "rem") : "auto", height: ((_d = height !== null && height !== void 0 ? height : width) !== null && _d !== void 0 ? _d : false) ? "".concat((height || width || 0) / 16, "rem") : "auto" }, sx), children: icon })));
+    return ((0, jsx_runtime_1.jsx)(material_1.SvgIcon, __assign({}, rest, { onClick: onClick, sx: __assign({ width: ((_c = width !== null && width !== void 0 ? width : height) !== null && _c !== void 0 ? _c : false) ? "".concat((width || height || 0) / 16, "rem") : "auto", height: ((_d = height !== null && height !== void 0 ? height : width) !== null && _d !== void 0 ? _d : false) ? "".concat((height || width || 0) / 16, "rem") : "auto", display: "block" }, sx), children: icon })));
 };
 exports.default = Icon;

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

@@ -18,9 +18,9 @@ exports.default = IconText;
 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");
 function IconText(props) {
     var title = props.title, beforeIcon = props.beforeIcon, afterIcon = props.afterIcon, sx = props.sx;
-    var theme = (0, ThemeProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.mixins.row), { gap: theme.mixins.gaps.g8 }), children: [beforeIcon && beforeIcon, (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, sx), children: title }), afterIcon && afterIcon] }));
+    var theme = (0, mui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign(__assign({}, theme.styleMixins.row), { gap: theme.styleMixins.gaps.g8 }), children: [beforeIcon && beforeIcon, (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, sx), children: title }), afterIcon && afterIcon] }));
 }