tek-wallet 0.0.120 → 0.0.121

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

@@ -11,14 +11,11 @@ var __assign = (this && this.__assign) || function () {
     };
     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 theme_1 = __importDefault(require("../../../theme/mui/theme"));
 var material_1 = require("@mui/material");
 var DefaultPageLayout = function (props) {
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign({ padding: theme_1.default.palette.padding.pageX, paddingTop: theme_1.default.palette.padding.pageTop, paddingBottom: theme_1.default.palette.padding.pageBottom, minHeight: "100%", width: "100%" }, props.sx), children: props.children }));
+    var theme = (0, material_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: __assign(__assign(__assign({}, theme.mixins.pagePadding), { minHeight: "100%", width: "100%" }), props.sx), children: props.children }));
 };
 exports.default = DefaultPageLayout;

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

@@ -21,13 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BUTTON_STATUS = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var cn_1 = __importDefault(require("../../../utils/cn"));
+/* eslint-disable react-hooks/rules-of-hooks */
 var material_1 = require("@mui/material");
 var BUTTON_STATUS;
 (function (BUTTON_STATUS) {
@@ -36,18 +33,20 @@ var BUTTON_STATUS;
     BUTTON_STATUS["ENABLED"] = "enabled";
 })(BUTTON_STATUS || (exports.BUTTON_STATUS = BUTTON_STATUS = {}));
 var Button = function (props) {
-    var _a = props.status, status = _a === void 0 ? BUTTON_STATUS.ENABLED : _a, className = props.className, rest = __rest(props, ["status", "className"]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Button, __assign({ className: (0, cn_1.default)("", className), disabled: status !== BUTTON_STATUS.ENABLED }, rest, { children: props.children })));
+    var _a = props.status, status = _a === void 0 ? BUTTON_STATUS.ENABLED : _a, rest = __rest(props, ["status"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Button, __assign({ disabled: status !== BUTTON_STATUS.ENABLED }, rest, { children: props.children })));
 };
 Button.displayName = "Button";
 Button.Primary = function (props) {
     var sx = props.sx, rest = __rest(props, ["sx"]);
-    return ((0, jsx_runtime_1.jsx)(Button, __assign({}, rest, { variant: "contained", color: "primary", sx: __assign({ borderRadius: "999px", color: "#000000" }, sx) })));
+    var theme = (0, material_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(Button, __assign({}, rest, { variant: "contained", color: "primary", sx: __assign({ borderRadius: theme.mixins.theBorderRadius.full }, sx) })));
 };
 Button.Primary.displayName = "Button.Primary";
 Button.Secondary = function (props) {
-    var className = props.className, sx = props.sx, rest = __rest(props, ["className", "sx"]);
-    return ((0, jsx_runtime_1.jsx)(Button, __assign({}, rest, { variant: "contained", color: "secondary", className: (0, cn_1.default)("text-16 leading-120 !capitalize font-500 px-4 py-2.5", className), sx: __assign({ borderRadius: "999px" }, sx) })));
+    var sx = props.sx, rest = __rest(props, ["sx"]);
+    var theme = (0, material_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(Button, __assign({}, rest, { variant: "contained", color: "secondary", sx: __assign({ borderRadius: theme.mixins.theBorderRadius.full }, sx) })));
 };
 Button.Secondary.displayName = "Button.Secondary";
 exports.default = Button;

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

@@ -16,11 +16,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var styles_1 = require("../../../theme/mui/styles");
-var theme_1 = __importDefault(require("../../../theme/mui/theme"));
+var material_1 = require("@mui/material");
 var BackHeader_1 = __importDefault(require("../BackHeader"));
 var Text_1 = __importDefault(require("../Text"));
 var PageHeader = function (props) {
-    return ((0, jsx_runtime_1.jsx)(BackHeader_1.default, { overrideBack: props.overrideBack, sx: __assign({ display: "flex", alignItems: "center", height: "100%", position: "relative", paddingLeft: theme_1.default.palette.padding.pageX, paddingRight: theme_1.default.palette.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 }) }));
+    var theme = (0, material_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(BackHeader_1.default, { overrideBack: props.overrideBack, sx: __assign({ display: "flex", alignItems: "center", height: "100%", position: "relative", paddingLeft: theme.mixins.pagePadding.paddingLeft, paddingRight: theme.mixins.pagePadding.paddingRight }, props.sx), children: (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign(__assign({}, theme.mixins.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,8 +61,8 @@ 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 theme = (0, material_1.useTheme)();
     var createWalletDrawerRef = (0, react_1.useRef)(null);
     var importWalletDrawerRef = (0, react_1.useRef)(null);
     var onBackCreateWallet = function () {
@@ -87,6 +87,6 @@ var AuthView = function (props) {
                         marginTop: "auto",
                     }, children: [(0, jsx_runtime_1.jsx)(DrawerComponent_1.default, { sx: {
                                 width: "100%",
-                            }, 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?" })] })] }) }));
+                            }, 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({}, theme.mixins.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,7 +60,6 @@ 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";
@@ -68,6 +67,7 @@ var CreateWalletViewStep;
 })(CreateWalletViewStep || (exports.CreateWalletViewStep = CreateWalletViewStep = {}));
 var passcodeLength = 6;
 var CreateWalletView = function (props) {
+    var theme = (0, material_1.useTheme)();
     var _a = (0, react_2.useState)(""), otp = _a[0], setOtp = _a[1];
     var _b = (0, react_2.useState)(""), confirmOtp = _b[0], setConfirmOtp = _b[1];
     var swiperControlledRef = (0, react_2.useRef)(null);
@@ -143,13 +143,13 @@ var CreateWalletView = function (props) {
                                 alignItems: "center",
                                 height: "100%",
                                 gap: "1rem",
-                            }, 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: {
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.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({}, theme.mixins.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: __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" })] }) })] }) }) }));
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.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({}, theme.mixins.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,8 +63,6 @@ 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 theme_1 = __importDefault(require("../../../theme/mui/theme"));
 var GetSeedPhraseWalletViewStep;
 (function (GetSeedPhraseWalletViewStep) {
     GetSeedPhraseWalletViewStep[GetSeedPhraseWalletViewStep["ENTER_PASSCODE"] = 0] = "ENTER_PASSCODE";
@@ -72,6 +70,7 @@ var GetSeedPhraseWalletViewStep;
 })(GetSeedPhraseWalletViewStep || (exports.GetSeedPhraseWalletViewStep = GetSeedPhraseWalletViewStep = {}));
 var passcodeLength = 6;
 var GetSeedPhraseWalletView = function (props) {
+    var theme = (0, material_1.useTheme)();
     var _a = (0, react_2.useState)(""), otp = _a[0], setOtp = _a[1];
     var _b = (0, react_2.useState)(false), isShowSeedPhrase = _b[0], setIsShowSeedPhrase = _b[1];
     var _c = (0, react_2.useState)(undefined), seedPhrase = _c[0], setSeedPhrase = _c[1];
@@ -152,7 +151,7 @@ var GetSeedPhraseWalletView = function (props) {
                                 alignItems: "center",
                                 gap: "1rem",
                                 height: "100%",
-                            }, 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: {
+                            }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.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({}, theme.mixins.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",
@@ -163,22 +162,22 @@ 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: theme_1.default.palette.whiteText.main,
+                                            color: theme.palette.text.white,
                                             padding: "0.5rem 0.75rem",
-                                            backgroundColor: theme_1.default.palette.blackBackground._16,
-                                            borderRadius: "0.5rem",
-                                            fontSize: theme_1.default.palette.fontSize._14,
-                                            fontWeight: theme_1.default.palette.fontWeight._400,
+                                            backgroundColor: theme.palette.background.black16,
+                                            borderRadius: "0.75rem",
+                                            fontSize: theme.typography.fontSize14,
+                                            fontWeight: theme.typography.fontWeight400,
                                             textAlign: "center",
                                             width: "100%",
-                                            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: {
+                                            border: "1px solid ".concat(theme.palette.background.white24),
+                                        }, children: [index + 1, ". ", isShowSeedPhrase ? word : "********"] }, index)); }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({ marginTop: "auto" }, theme.mixins.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: "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, sx: {
+                                    }, children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { src: (0, getIcon_1.default)(isShowSeedPhrase ? "show_seed_phrase" : "hide_seed_phrase"), onClick: toggleShowSeedPhrase, sx: {
                                                 aspectRatio: 1,
                                             } }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { onClick: handleDone, sx: {
                                                 flex: 1,

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

@@ -69,6 +69,7 @@ var ImportWalletViewStep;
     ImportWalletViewStep[ImportWalletViewStep["CONFIRM_PASSCODE"] = 1] = "CONFIRM_PASSCODE";
 })(ImportWalletViewStep || (exports.ImportWalletViewStep = ImportWalletViewStep = {}));
 var ImportWalletView = function (props) {
+    var theme = (0, material_1.useTheme)();
     var _a = (0, react_2.useState)(""), seedPhrase = _a[0], setSeedPhrase = _a[1];
     var swiperControlledRef = (0, react_2.useRef)(null);
     var childPageLayoutRef = (0, react_2.useRef)(null);
@@ -112,19 +113,18 @@ var ImportWalletView = function (props) {
                             alignItems: "center",
                             height: "100%",
                             gap: "1rem",
-                        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: {
-                                    color: "text.white",
-                                    fontWeight: "500",
-                                    fontSize: "16px",
-                                }, children: "Your seed phrase" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        }, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionTitle), children: "Your seed phrase" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                     width: "100%",
                                     height: "fit-content",
                                 }, children: (0, jsx_runtime_1.jsx)(material_1.TextareaAutosize, { value: seedPhrase, onChange: handleChangeSeedPhrase, minRows: 8, maxRows: 8, placeholder: "Enter your seed phrase", style: {
                                         width: "100%",
-                                        backgroundColor: "ui.background.primary",
-                                        borderRadius: "lg",
+                                        backgroundColor: theme.palette.background.black16,
+                                        borderRadius: "0.75rem",
                                         padding: "1rem",
-                                        color: "text.white",
-                                    } }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { className: "text-ui-text-white font-400 text-13 text-center", children: "Your seed phrase is a list of words that are used to create your wallet. It is important to keep it safe and private." }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100% !important", marginTop: "auto" }, onClick: handleImportWallet, children: "Import" })] }) }) }) }) }));
+                                        color: theme.palette.text.white,
+                                        fontSize: theme.typography.fontSize16,
+                                        fontWeight: theme.typography.fontWeight400,
+                                        border: "1px solid ".concat(theme.palette.background.white24),
+                                    } }) }), (0, jsx_runtime_1.jsx)(Text_1.default, { sx: __assign({}, theme.mixins.sessionDescription), children: "Your seed phrase is a list of words that are used to create your wallet. It is important to keep it safe and private." }), (0, jsx_runtime_1.jsx)(Button_1.default.Primary, { sx: { width: "100% !important", marginTop: "auto" }, onClick: handleImportWallet, children: "Import" })] }) }) }) }) }));
 };
 exports.default = ImportWalletView;

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

@@ -1,2 +1,3 @@
-declare const theme: import("@mui/material/styles").Theme;
+import { ThemeOptions } from "@mui/material/styles";
+declare const theme: ThemeOptions;
 export default theme;

package/dist/theme/mui/theme.js

@@ -5,74 +5,86 @@ var theme = (0, styles_1.createTheme)({
     palette: {
         primary: {
             main: "#ffffff",
+            light: "rgba(255, 255, 255, 0.64)",
+            dark: "rgba(255, 255, 255, 0.24)",
+            contrastText: "#ff0000",
         },
         secondary: {
             main: "#01FF00",
+            contrastText: "#0000ff",
         },
-        whiteBackground: {
-            main: "#ffffff",
-            _16: "rgba(255, 255, 255, 0.16)",
-            _24: "rgba(255, 255, 255, 0.24)",
+        background: {
+            white: "#ffffff",
+            white64: "rgba(255, 255, 255, 0.64)",
+            white24: "rgba(255, 255, 255, 0.24)",
+            white16: "rgba(255, 255, 255, 0.16)",
+            black: "#000000",
+            black64: "rgba(0, 0, 0, 0.64)",
+            black24: "rgba(0, 0, 0, 0.24)",
+            black16: "rgba(0, 0, 0, 0.16)",
         },
-        whiteText: {
-            main: "#ffffff",
-            _16: "rgba(255, 255, 255, 0.16)",
-            _24: "rgba(255, 255, 255, 0.24)",
-            _80: "rgba(255, 255, 255, 0.8)",
+        text: {
+            white: "#ffffff",
+            white64: "rgba(255, 255, 255, 0.64)",
+            white24: "rgba(255, 255, 255, 0.24)",
         },
-        whiteBorder: {
-            main: "#ffffff",
-            _16: "rgba(255, 255, 255, 0.16)",
-            _24: "rgba(255, 255, 255, 0.24)",
+        divider: "rgba(255, 255, 255, 0.16)",
+    },
+    typography: {
+        fontSize10: "0.625rem",
+        fontSize11: "0.6875rem",
+        fontSize12: "0.75rem",
+        fontSize13: "0.8125rem",
+        fontSize14: "0.875rem",
+        fontSize15: "0.9375rem",
+        fontSize16: "1rem",
+        fontSize17: "1.0625rem",
+        fontSize18: "1.125rem",
+        fontSize19: "1.1875rem",
+        fontSize20: "1.25rem",
+        fontSize21: "1.3125rem",
+        fontSize22: "1.375rem",
+        fontSize24: "1.5rem",
+        fontWeight300: 300,
+        fontWeight400: 400,
+        fontWeight500: 500,
+        fontWeight600: 600,
+        fontWeight700: 700,
+    },
+    spacing: 8,
+    mixins: {
+        pagePadding: {
+            paddingLeft: "1rem",
+            paddingRight: "1rem",
+            paddingTop: "1rem",
+            paddingBottom: "2rem",
         },
-        blackBackground: {
-            main: "#000000",
-            _16: "rgba(0, 0, 0, 0.16)",
-            _24: "rgba(0, 0, 0, 0.24)",
+        sessionTitle: {
+            color: "#ffffff",
+            fontWeight: 600,
+            fontSize: "1.125rem",
+            textAlign: "center",
         },
-        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",
+        sessionDescription: {
+            color: "text.white64",
+            fontWeight: 400,
+            fontSize: "0.875rem",
+            textAlign: "center",
         },
-        fontWeight: {
-            _400: "400",
-            _500: "500",
-            _600: "600",
-            _700: "700",
-            _800: "800",
+        headerTitle: {
+            color: "text.white",
+            fontWeight: 600,
+            fontSize: "1rem",
+            textAlign: "center",
         },
-        lineHeight: {
-            _100: "100%",
-            _120: "120%",
-            _140: "140%",
-            _160: "160%",
-            _180: "180%",
+        noteContent: {
+            color: "text.white64",
+            fontWeight: 400,
+            fontSize: "0.75rem",
         },
-        padding: {
-            pageX: "1rem",
-            pageTop: "1rem",
-            pageBottom: "2rem",
+        theBorderRadius: {
+            full: "100%",
         },
     },
-    spacing: function (factor) { return "".concat(factor * 1, "rem"); },
 });
 exports.default = theme;

package/package.json

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

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

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

package/dist/theme/mui/styles.js

@@ -1,28 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.noteContent = exports.headerTitle = exports.sessionDescription = exports.sessionTitle = void 0;
-var theme_1 = __importDefault(require("./theme"));
-exports.sessionTitle = {
-    color: "whiteText.main",
-    fontWeight: theme_1.default.palette.fontWeight._600,
-    fontSize: theme_1.default.palette.fontSize._16,
-};
-exports.sessionDescription = {
-    color: "whiteText._80",
-    fontWeight: theme_1.default.palette.fontWeight._400,
-    fontSize: theme_1.default.palette.fontSize._14,
-    textAlign: "center",
-};
-exports.headerTitle = {
-    color: "whiteText.main",
-    fontWeight: theme_1.default.palette.fontWeight._600,
-    fontSize: theme_1.default.palette.fontSize._16,
-};
-exports.noteContent = {
-    color: "whiteText._80",
-    fontWeight: theme_1.default.palette.fontWeight._400,
-    fontSize: theme_1.default.palette.fontSize._12,
-};