tek-wallet 0.0.116 → 0.0.118

package/dist/components/layouts/ChildPageLayout/index.js

@@ -18,7 +18,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var StatusDisplay_1 = require("../../../components/ui/StatusDisplay");
 var StatusDisplay_2 = __importDefault(require("../../../components/ui/StatusDisplay"));
-var theme_1 = __importDefault(require("../../../theme/mui/theme"));
 var material_1 = require("@mui/material");
 var getImage_1 = __importDefault(require("../../../utils/getImage"));
 var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
@@ -69,7 +68,8 @@ var ChildPageLayout = (0, react_1.forwardRef)(function (props, ref) {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    backgroundColor: "".concat(theme_1.default.palette.backgroundBlack24.main),
+                    backgroundColor: "blackBackground.24",
+                    backdropFilter: "blur(10px)",
                     zIndex: 50,
                 }, children: (0, jsx_runtime_1.jsx)(StatusDisplay_2.default, { status: status }) }))] }));
 });

package/dist/components/layouts/DefaultPageLayout/index.js

@@ -1,14 +1,20 @@
 "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++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var system_1 = require("@mui/system");
-var StyledDefaultPageLayout = (0, system_1.styled)("div")(function () { return ({
-    padding: "1rem",
-    minHeight: "100%",
-    width: "100%",
-}); });
+var material_1 = require("@mui/material");
 var DefaultPageLayout = function (props) {
-    return ((0, jsx_runtime_1.jsx)(StyledDefaultPageLayout, { sx: props.sx, children: props.children }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ padding: "padding.pageX", paddingTop: "padding.pageTop", paddingBottom: "padding.pageBottom", minHeight: "100%", width: "100%" }, props.sx), children: props.children }));
 };
 exports.default = DefaultPageLayout;

package/dist/components/layouts/PageLayout/index.js

@@ -19,7 +19,6 @@ var react_1 = require("react");
 var StatusDisplay_1 = require("../../../components/ui/StatusDisplay");
 var StatusDisplay_2 = __importDefault(require("../../../components/ui/StatusDisplay"));
 var system_1 = require("@mui/system");
-var theme_1 = __importDefault(require("../../../theme/mui/theme"));
 var StyledPageLayout = (0, system_1.styled)("div")(function () { return ({
     height: "100%",
     width: "100%",
@@ -54,7 +53,7 @@ var StyledStatusOverlay = (0, system_1.styled)("div")(function () { return ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "".concat(theme_1.default.palette.textWhite.main),
+    backgroundColor: "whiteText.main",
     zIndex: 50,
 }); });
 var PageLayout = (0, react_1.forwardRef)(function (props, ref) {

package/dist/components/ui/BackArrow/index.js

@@ -26,11 +26,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var cn_1 = __importDefault(require("../../../utils/cn"));
 var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
 var Icon_1 = __importDefault(require("../Icon"));
 var BackArrow = function (props) {
-    var className = props.className, rest = __rest(props, ["className"]);
-    return ((0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ src: (0, getIcon_1.default)("arrow_back"), className: (0, cn_1.default)("size-6", className) }, rest)));
+    var rest = __rest(props, []);
+    return ((0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ src: (0, getIcon_1.default)("arrow_back"), sx: __assign({ width: "1.5rem", height: "1.5rem" }, props.sx) }, rest)));
 };
 exports.default = BackArrow;

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

@@ -1,17 +1,28 @@
 "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++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var cn_1 = __importDefault(require("../../../utils/cn"));
 var BackArrow_1 = __importDefault(require("../BackArrow"));
 var useCustomRouter_1 = __importDefault(require("../../../hooks/useCustomRouter"));
 var Text_1 = __importDefault(require("../Text"));
+var material_1 = require("@mui/material");
 var BackHeader = function (props) {
     var router = (0, useCustomRouter_1.default)();
-    var center = props.center, children = props.children, className = props.className, hideBack = props.hideBack;
+    var center = props.center, children = props.children, hideBack = props.hideBack;
     var back = function (e) {
         if (props.overrideBack) {
             props.overrideBack(e);
@@ -19,6 +30,16 @@ var BackHeader = function (props) {
         }
         router.back();
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.default)("flex items-center gap-3 px-ui-horizontal-3 h-full bg-ui-bg-white relative", className), children: [!hideBack && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", onClick: back, children: [(0, jsx_runtime_1.jsx)(BackArrow_1.default, {}), " ", (0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-12 text-ui-text-white", children: "Back" })] })), !!center && ((0, jsx_runtime_1.jsx)("div", { className: "absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2", children: center })), children] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: __assign({ display: "flex", alignItems: "center", gap: "1rem", height: "100%" }, props.sx), children: [!hideBack && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                    cursor: "pointer",
+                }, onClick: back, children: [(0, jsx_runtime_1.jsx)(BackArrow_1.default, {}), " ", (0, jsx_runtime_1.jsx)(Text_1.default, { sx: { color: "whiteText.main" }, children: "Back" })] })), !!center && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    position: "absolute",
+                    left: "50%",
+                    top: "50%",
+                    transform: "translate(-50%, -50%)",
+                }, children: center })), children] }));
 };
 exports.default = BackHeader;

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

@@ -38,14 +38,14 @@ var CustomOtpInput = function (props) {
     switch (otpInputType) {
         case OtpInputType.PASSWORD:
             return ((0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { inputType: "password", inputStyle: {
-                    border: "1px solid #ffffff58",
+                    border: "1px solid whiteBorder.24",
                     borderRadius: "0.75rem",
                     width: "2.8rem",
                     aspectRatio: "1/1.1",
                     margin: "0 0.25rem",
                     outline: "none",
-                    color: "#ffffff",
-                    backgroundColor: "#ffffff29",
+                    color: "whiteText.main",
+                    backgroundColor: "blackBackground.24",
                 }, renderInput: function (props) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "decimal" })), (0, jsx_runtime_1.jsx)("style", { children: "input::selection {\n            background-color: transparent; \n            color: white; \n          }" })] })); } })));
         default:
             return ((0, jsx_runtime_1.jsx)(react_otp_input_1.default, __assign({}, rest, { renderInput: function (props) { return (0, jsx_runtime_1.jsx)("input", __assign({}, props, { inputMode: "text" })); } })));

package/dist/components/ui/PageHeader/index.js

@@ -1,14 +1,25 @@
 "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++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var cn_1 = __importDefault(require("../../../utils/cn"));
+var styles_1 = require("../../../theme/mui/styles");
 var BackHeader_1 = __importDefault(require("../BackHeader"));
 var Text_1 = __importDefault(require("../Text"));
 var PageHeader = function (props) {
-    return ((0, jsx_runtime_1.jsxs)(BackHeader_1.default, { overrideBack: props.overrideBack, className: (0, cn_1.default)("flex items-center h-full bg-ui-bg-white relative px-4", props.className), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-white absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 text-base font-500", children: props.title }), props.children] }));
+    return ((0, jsx_runtime_1.jsx)(BackHeader_1.default, { overrideBack: props.overrideBack, sx: __assign({ display: "flex", alignItems: "center", height: "100%", position: "relative", paddingLeft: "padding.pageX", paddingRight: "padding.pageX" }, props.sx), children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, styles_1.headerTitle), { position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)" }), children: props.title }) }));
 };
 exports.default = PageHeader;

package/dist/components/views/AuthView/index.js

@@ -61,6 +61,7 @@ var ImportWalletView_1 = __importDefault(require("../ImportWalletView"));
 var ChildPageLayout_1 = __importDefault(require("../../layouts/ChildPageLayout"));
 var material_1 = require("@mui/material");
 var PageHeader_1 = __importDefault(require("../../ui/PageHeader"));
+var styles_1 = require("../../../theme/mui/styles");
 var AuthView = function (props) {
     var createWalletDrawerRef = (0, react_1.useRef)(null);
     var importWalletDrawerRef = (0, react_1.useRef)(null);
@@ -72,7 +73,7 @@ var AuthView = function (props) {
         var _a;
         (_a = importWalletDrawerRef.current) === null || _a === void 0 ? void 0 : _a.close();
     };
-    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Connect Wallet", overrideBack: props.onBack }), children: (0, jsx_runtime_1.jsxs)(DefaultPageLayout_1.default, { sx: __assign({ display: "flex", flexDirection: "column", gap: "1rem", paddingBottom: "2.25rem" }, props.sx), children: [(0, jsx_runtime_1.jsx)(Image_1.default, { src: (0, getIcon_1.default)("eth"), sx: {
+    return ((0, jsx_runtime_1.jsx)(ChildPageLayout_1.default, { header: (0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: "Connect Wallet", overrideBack: props.onBack }), children: (0, jsx_runtime_1.jsxs)(DefaultPageLayout_1.default, { sx: __assign({ display: "flex", flexDirection: "column", gap: "1rem" }, props.sx), children: [(0, jsx_runtime_1.jsx)(Image_1.default, { src: (0, getIcon_1.default)("eth"), sx: {
                         width: "80%",
                         aspectRatio: "1",
                         position: "fixed",
@@ -83,15 +84,9 @@ var AuthView = function (props) {
                         display: "flex",
                         flexDirection: "column",
                         gap: "1rem",
-                        border: "2px blue solid",
                         marginTop: "auto",
                     }, children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { sx: {
                                 width: "100%",
-                                border: "2px red solid",
-                            }, ref: createWalletDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100%" }, children: "Create a new wallet" }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(CreateWalletView_1.default, { onBack: onBackCreateWallet }) }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: importWalletDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { sx: { width: "100%" }, children: "I have a wallet" }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(ImportWalletView_1.default, { onBack: onBackImportWallet }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                textAlign: "center",
-                                fontSize: "0.75rem",
-                                color: "text.white",
-                            }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, eos odio. Accusamus ea praesentium unde deserunt delectus, nihil corporis, mollitia ipsum impedit cupiditate eveniet vero esse facilis, incidunt in sequi?" })] })] }) }));
+                            }, ref: createWalletDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100%" }, children: "Create a new wallet" }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(CreateWalletView_1.default, { onBack: onBackCreateWallet }) }), (0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { ref: importWalletDrawerRef, trigger: (0, jsx_runtime_1.jsx)(Button_1.default.Secondary, { sx: { width: "100%" }, children: "I have a wallet" }), direction: DrawerComponent_1.DRAWER_DIRECTION.RIGHT, children: (0, jsx_runtime_1.jsx)(ImportWalletView_1.default, { onBack: onBackImportWallet }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, styles_1.sessionDescription), children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, eos odio. Accusamus ea praesentium unde deserunt delectus, nihil corporis, mollitia ipsum impedit cupiditate eveniet vero esse facilis, incidunt in sequi?" })] })] }) }));
 };
 exports.default = AuthView;

package/dist/components/views/CreateWalletView/index.js

@@ -60,6 +60,7 @@ var react_2 = require("react");
 var Text_1 = __importDefault(require("../../../components/ui/Text"));
 var useWalletData_1 = __importDefault(require("../../../hooks/useWalletData"));
 var material_1 = require("@mui/material");
+var styles_1 = require("../../../theme/mui/styles");
 var CreateWalletViewStep;
 (function (CreateWalletViewStep) {
     CreateWalletViewStep[CreateWalletViewStep["CREATE_PASSCODE"] = 0] = "CREATE_PASSCODE";
@@ -142,31 +143,13 @@ var CreateWalletView = function (props) {
                                 alignItems: "center",
                                 height: "100%",
                                 gap: "1rem",
-                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                        color: "text.white",
-                                        fontWeight: "600",
-                                        fontSize: "16px",
-                                    }, children: "Create Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: otp, onChange: handleOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                        color: "text.white",
-                                        fontWeight: "400",
-                                        fontSize: "14px",
-                                        textAlign: "center",
-                                    }, children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, styles_1.sessionTitle), children: "Create Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: otp, onChange: handleOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, styles_1.sessionDescription), children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                 display: "flex",
                                 flexDirection: "column",
                                 alignItems: "center",
                                 justifyContent: "center",
                                 height: "100%",
                                 gap: "1rem",
-                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                        color: "text.white",
-                                        fontWeight: "600",
-                                        fontSize: "16px",
-                                    }, children: "Confirm Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: confirmOtp, onChange: handleConfirmOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                        color: "text.white",
-                                        fontWeight: "400",
-                                        fontSize: "14px",
-                                        textAlign: "center",
-                                    }, children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) })] }) }) }));
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, styles_1.sessionTitle), children: "Confirm Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: confirmOtp, onChange: handleConfirmOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, styles_1.sessionDescription), children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus, eos! Dolore quae vero in ducimus doloribus" })] }) })] }) }) }));
 };
 exports.default = CreateWalletView;

package/dist/components/views/GetSeedPhraseWalletView/index.js

@@ -63,6 +63,7 @@ var material_1 = require("@mui/material");
 var Button_1 = __importDefault(require("../../ui/Button"));
 var Icon_1 = __importDefault(require("../../ui/Icon"));
 var getIcon_1 = __importDefault(require("../../../utils/getIcon"));
+var styles_1 = require("../../../theme/mui/styles");
 var GetSeedPhraseWalletViewStep;
 (function (GetSeedPhraseWalletViewStep) {
     GetSeedPhraseWalletViewStep[GetSeedPhraseWalletViewStep["ENTER_PASSCODE"] = 0] = "ENTER_PASSCODE";
@@ -150,16 +151,7 @@ var GetSeedPhraseWalletView = function (props) {
                                 alignItems: "center",
                                 gap: "1rem",
                                 height: "100%",
-                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                        color: "text.white",
-                                        fontWeight: "600",
-                                        fontSize: "16px",
-                                    }, children: "Enter Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: otp, onChange: handleOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                        color: "text.white",
-                                        fontWeight: "400",
-                                        fontSize: "14px",
-                                        textAlign: "center",
-                                    }, children: "Enter your passcode to get your wallet seed phrase" })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, styles_1.sessionTitle), children: "Enter Passcode" }), (0, jsx_runtime_1.jsx)(OTP_1.default, { value: otp, onChange: handleOtpChange, numInputs: passcodeLength, otpInputType: OTP_1.OtpInputType.PASSWORD }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, styles_1.sessionDescription), children: "Enter your passcode to get your wallet seed phrase" })] }) }), (0, jsx_runtime_1.jsx)(react_1.SwiperSlide, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                 minHeight: "100%",
                                 display: "flex",
                                 flexDirection: "column",
@@ -170,22 +162,24 @@ var GetSeedPhraseWalletView = function (props) {
                                         gap: "1rem",
                                         height: "fit-content",
                                     }, children: seedPhrase === null || seedPhrase === void 0 ? void 0 : seedPhrase.split(" ").map(function (word, index) { return ((0, jsx_runtime_1.jsxs)(Text_1.default, { sx: {
-                                            color: "text.white",
+                                            color: "whiteText.main",
                                             padding: "0.5rem 0.75rem",
-                                            backgroundColor: "rgba(255, 255, 255, 0.1)",
+                                            backgroundColor: "blackBackground.16",
                                             borderRadius: "0.5rem",
-                                            fontSize: "14px",
-                                            fontWeight: "400",
+                                            fontSize: "fontSize.14",
+                                            fontWeight: "fontWeight.400",
                                             textAlign: "center",
                                             width: "100%",
-                                            border: "1px solid rgba(255, 255, 255, 0.2)",
-                                        }, children: [index + 1, ". ", isShowSeedPhrase ? word : "********"] }, index)); }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { marginTop: "auto" }, children: "Please do not store your seed phrase digitally (e.g., text files on your computer, email...). Write it down and keep it in a secure, confidential location that is resistant to adverse conditions like moisture, fire, or other hazards for safe storage." }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                            border: "1px solid blackBackground.24",
+                                        }, children: [index + 1, ". ", isShowSeedPhrase ? word : "********"] }, index)); }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({ marginTop: "auto" }, styles_1.noteContent), children: "Please do not store your seed phrase digitally (e.g., text files on your computer, email...). Write it down and keep it in a secure, confidential location that is resistant to adverse conditions like moisture, fire, or other hazards for safe storage." }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                         display: "flex",
-                                        alignItems: "center",
+                                        alignItems: "stretch",
                                         gap: "1rem",
                                         height: "fit-content",
                                         width: "100%",
-                                    }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)(isShowSeedPhrase ? "show_seed_phrase" : "hide_seed_phrase", "svg"), onClick: toggleShowSeedPhrase }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: handleDone, sx: {
+                                    }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)(isShowSeedPhrase ? "show_seed_phrase" : "hide_seed_phrase", "svg"), onClick: toggleShowSeedPhrase, sx: {
+                                                aspectRatio: 1,
+                                            } }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: handleDone, sx: {
                                                 flex: 1,
                                             }, children: "Done" })] })] }) })] }) }) }));
 };

package/dist/theme/mui/styles.d.ts

@@ -0,0 +1,21 @@
+export declare const sessionTitle: {
+    color: string;
+    fontWeight: string;
+    fontSize: string;
+};
+export declare const sessionDescription: {
+    color: string;
+    fontWeight: string;
+    fontSize: string;
+    textAlign: string;
+};
+export declare const headerTitle: {
+    color: string;
+    fontWeight: string;
+    fontSize: string;
+};
+export declare const noteContent: {
+    color: string;
+    fontWeight: string;
+    fontSize: string;
+};

package/dist/theme/mui/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noteContent = exports.headerTitle = exports.sessionDescription = exports.sessionTitle = void 0;
+exports.sessionTitle = {
+    color: "whiteText.main",
+    fontWeight: "fontWeight.600",
+    fontSize: "fontSize.16",
+};
+exports.sessionDescription = {
+    color: "whiteText.80",
+    fontWeight: "fontWeight.400",
+    fontSize: "fontSize.14",
+    textAlign: "center",
+};
+exports.headerTitle = {
+    color: "whiteText.main",
+    fontWeight: "fontWeight.600",
+    fontSize: "fontSize.16",
+};
+exports.noteContent = {
+    color: "whiteText.80",
+    fontWeight: "fontWeight.400",
+    fontSize: "fontSize.12",
+};

package/dist/theme/mui/theme.js

@@ -9,11 +9,68 @@ var theme = (0, styles_1.createTheme)({
         secondary: {
             main: "#01FF00",
         },
-        textWhite: {
+        whiteBackground: {
             main: "#ffffff",
+            16: "rgba(255, 255, 255, 0.16)",
+            24: "rgba(255, 255, 255, 0.24)",
         },
-        backgroundBlack24: {
-            main: "rgba(0, 0, 0, 0.24)",
+        whiteText: {
+            main: "#ffffff",
+            16: "rgba(255, 255, 255, 0.16)",
+            24: "rgba(255, 255, 255, 0.24)",
+            80: "rgba(255, 255, 255, 0.8)",
+        },
+        whiteBorder: {
+            main: "#ffffff",
+            16: "rgba(255, 255, 255, 0.16)",
+            24: "rgba(255, 255, 255, 0.24)",
+        },
+        blackBackground: {
+            main: "#000000",
+            16: "rgba(0, 0, 0, 0.16)",
+            24: "rgba(0, 0, 0, 0.24)",
+        },
+        fontSize: {
+            10: "0.625rem",
+            11: "0.6875rem",
+            12: "0.75rem",
+            13: "0.8125rem",
+            14: "0.875rem",
+            15: "0.9375rem",
+            16: "1rem",
+            17: "1.0625rem",
+            18: "1.125rem",
+            19: "1.1875rem",
+            20: "1.25rem",
+            21: "1.3125rem",
+            22: "1.375rem",
+            23: "1.4375rem",
+            24: "1.5rem",
+            25: "1.5625rem",
+            26: "1.625rem",
+            27: "1.6875rem",
+            28: "1.75rem",
+            29: "1.8125rem",
+            30: "1.875rem",
+        },
+        fontWeight: {
+            400: "400",
+            500: "500",
+            600: "600",
+            700: "700",
+            800: "800",
+        },
+        lineHeight: {
+            100: "100%",
+            120: "120%",
+            140: "140%",
+            160: "160%",
+            180: "180%",
+        },
+        padding: {
+            pageX: "1rem",
+            pageTop: "1rem",
+            pageBottom: "2rem",
         },
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tek-wallet",
-  "version": "0.0.116",
+  "version": "0.0.118",
   "description": "A custom React provider with TypeScript support",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",