@ludo.ninja/components 1.7.5 → 1.7.6

package/dist/components/profile/wallets/index.js

@@ -0,0 +1,73 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileWallets = void 0;
+var react_1 = __importDefault(require("react"));
+var image_1 = __importDefault(require("next/image"));
+var process_1 = __importDefault(require("process"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var core_1 = require("@ludo.ninja/core");
+var colors_1 = require("@ludo.ninja/ui/build/styles/colors");
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var utils_1 = require("@ludo.ninja/utils");
+var store_1 = require("@/modules/user/store");
+var ui_1 = require("@/store/ui");
+var useFetchUserWallets_1 = __importDefault(require("@/api/server-identities/queries/useFetchUserWallets"));
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var myWallets_1 = __importDefault(require("@/components/myWallets"));
+var Palete_1 = __importDefault(require("@/system/Palete"));
+var _system_1 = require("@system");
+var _system_2 = require("@system");
+var scale_1 = require("@/utils/adaptive/scale");
+var env_1 = require("@/utils/env");
+var screen_1 = require("@/utils/screen");
+var vars_1 = require("@/fonts/vars");
+var plus_svg_1 = __importDefault(require("@/public/wallets/plus.svg"));
+// Styles
+var StyledProfileWallets = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .manageBtn {\n    cursor: pointer;\n  }\n\n  .wallets {\n    margin-top: 12px;\n\n    .wallet_item {\n      font-family: ", ";\n      margin-bottom: 12px;\n      font-size: 13px;\n      color: ", ";\n\n      .icon {\n        margin-right: 8px;\n        border-radius: 50%;\n      }\n    }\n  }\n\n  .add_wallets {\n    display: flex;\n    cursor: pointer;\n\n    .icon {\n      margin-right: 8px;\n    }\n  }\n\n  ", " {\n    .wallets {\n      margin-top: ", ";\n\n      .wallet_item {\n        margin-bottom: ", ";\n        font-size: ", ";\n\n        .icon {\n          margin-right: ", ";\n          width: ", ";\n          height: ", ";\n        }\n      }\n    }\n\n    .add_wallets {\n      .icon {\n        margin-right: ", ";\n        width: ", ";\n        height: ", ";\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n"], ["\n  .manageBtn {\n    cursor: pointer;\n  }\n\n  .wallets {\n    margin-top: 12px;\n\n    .wallet_item {\n      font-family: ", ";\n      margin-bottom: 12px;\n      font-size: 13px;\n      color: ", ";\n\n      .icon {\n        margin-right: 8px;\n        border-radius: 50%;\n      }\n    }\n  }\n\n  .add_wallets {\n    display: flex;\n    cursor: pointer;\n\n    .icon {\n      margin-right: 8px;\n    }\n  }\n\n  ", " {\n    .wallets {\n      margin-top: ", ";\n\n      .wallet_item {\n        margin-bottom: ", ";\n        font-size: ", ";\n\n        .icon {\n          margin-right: ", ";\n          width: ", ";\n          height: ", ";\n        }\n      }\n    }\n\n    .add_wallets {\n      .icon {\n        margin-right: ", ";\n        width: ", ";\n        height: ", ";\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n"])), vars_1.dmsansFontVarCss.css, colors_1.BlackColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16));
+// Component
+var ProfileWallets = function () {
+    var isSignedIn = (0, store_1.useUserStore)(function (state) { return state.isSignedIn; });
+    var getUser = (0, store_1.useUserStore)(function (state) { return state.user; });
+    var openModalSidebarPortal = (0, ui_1.useUiStore)(function (state) { return state.openModalSidebarPortal; });
+    var userWallets = (0, useFetchUserWallets_1.default)({
+        userId: getUser === null || getUser === void 0 ? void 0 : getUser.userId,
+    }).userWallets;
+    var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
+    var renderUserWallets = function () {
+        return userWallets === null || userWallets === void 0 ? void 0 : userWallets.map(function (userWallet) {
+            var blockChain = new core_1.BlockChainEntity(userWallet.blockchain);
+            return (react_1.default.createElement("div", { key: userWallet.address, className: "wallet_item" },
+                react_1.default.createElement(image_1.default, { src: blockChain.getBlockChainIconRegular({
+                        domain: (0, env_1.getStaticENVDomain)(),
+                    }), className: 'icon', width: 16, height: 16, alt: blockChain.getBlockChainIconRegular({
+                        domain: (0, env_1.getStaticENVDomain)(),
+                    }) }),
+                (0, utils_1.shortenedText)(userWallet === null || userWallet === void 0 ? void 0 : userWallet.address)));
+        });
+    };
+    if (!isSignedIn)
+        return null;
+    var user = new URLSearchParams(getUser).toString();
+    return (react_1.default.createElement(StyledProfileWallets, null,
+        react_1.default.createElement(Palete_1.default, null,
+            react_1.default.createElement(_system_1.Flex, { justifyContent: "space-between", alignItems: "center" },
+                react_1.default.createElement(_system_1.H5, { color: colors_1.BlackColor }, "Wallets"),
+                react_1.default.createElement("div", { className: 'manageBtn', onClick: function () { return openModalSidebarPortal(react_1.default.createElement(myWallets_1.default, null)); } },
+                    react_1.default.createElement(_system_2.SmallText, { color: colors_1.AccentColor }, "Manage"))),
+            react_1.default.createElement("div", { className: 'wallets' }, renderUserWallets()),
+            react_1.default.createElement("div", { className: 'add_wallets', onClick: function () {
+                    window.open("".concat(process_1.default.env.NEXT_PUBLIC_AUTH_HOST, "/add_wallets/?").concat(user, "&fallback_url=").concat(window.location.href.replace(/\s/g, '')), '_self');
+                } },
+                react_1.default.createElement("div", { className: 'icon' },
+                    react_1.default.createElement(plus_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 }) })),
+                react_1.default.createElement(_system_2.SmallText, { color: colors_1.AccentColor }, "Add new")))));
+};
+exports.ProfileWallets = ProfileWallets;
+var templateObject_1;

package/dist/components/profile/wrapper/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileWrapper = void 0;
+var react_1 = __importDefault(require("react"));
+var profile_1 = require("@/components/profile");
+// Components
+var ProfileWrapper = function (_a) {
+    var profile = _a.profile, url = _a.url, children = _a.children;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(profile_1.ProfilePageHead, { userUrl: url, profile: profile }),
+        react_1.default.createElement(profile_1.ProfileInfo, { profile: profile }),
+        children));
+};
+exports.ProfileWrapper = ProfileWrapper;

package/dist/components/registrationPage/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RegistrationSelectBox = exports.RegistrationSelection = void 0;
+var registrationSelectBox_1 = __importDefault(require("@/components/registrationPage/registrationSelectBox"));
+exports.RegistrationSelectBox = registrationSelectBox_1.default;
+var registrationSelection_1 = __importDefault(require("@/components/registrationPage/registrationSelection"));
+exports.RegistrationSelection = registrationSelection_1.default;

package/dist/components/registrationPage/registrationSelectBox/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@/styles/colors");
+var StyledRegistrationSelectBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 100px;\n  border-radius: 6px;\n  position: relative;\n  padding: 22px 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-size: cover;\n  cursor: pointer;\n  backdrop-filter: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background: url(", "), lightgray 50%;\n    background-repeat: no-repeat;\n    background-size: cover;\n    backdrop-filter: blur(2px);\n    box-shadow: 0 13px 16px -10px rgba(33, 21, 95, 0.5);\n\n    &:before {\n      background: ", ";\n      opacity: ", ";\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    background: ", ";\n    opacity: ", ";\n  }\n\n  .text {\n    position: absolute;\n    user-select: none;\n    text-shadow: 1px 1px 1px ", ";\n    color: ", ";\n    text-align: center;\n  }\n\n  .text2 {\n    position: absolute;\n    user-select: none;\n    color: ", ";\n    text-align: center;\n  }\n"], ["\n  min-height: 100px;\n  border-radius: 6px;\n  position: relative;\n  padding: 22px 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-size: cover;\n  cursor: pointer;\n  backdrop-filter: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background: url(", "), lightgray 50%;\n    background-repeat: no-repeat;\n    background-size: cover;\n    backdrop-filter: blur(2px);\n    box-shadow: 0 13px 16px -10px rgba(33, 21, 95, 0.5);\n\n    &:before {\n      background: ", ";\n      opacity: ", ";\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    background: ", ";\n    opacity: ", ";\n  }\n\n  .text {\n    position: absolute;\n    user-select: none;\n    text-shadow: 1px 1px 1px ", ";\n    color: ", ";\n    text-align: center;\n  }\n\n  .text2 {\n    position: absolute;\n    user-select: none;\n    color: ", ";\n    text-align: center;\n  }\n"])), function (props) { return props.image; }, function (props) { return (props.isSelected ? 'blur(2px)' : ''); }, function (props) {
+    return props.isSelected ? '0 13px 16px -10px rgba(33, 21, 95, 0.5)' : '';
+}, function (props) { return (props.isSelected ? 'lightgray 50%' : ''); }, function (props) { return props.image; }, function (props) { return (props.isSelected ? '' : '#6048ff'); }, function (props) { return (props.isSelected ? '' : 0.4); }, function (props) {
+    return props.isSelected ? '#6048ff' : 'rgba(18, 24, 58, 0.4)';
+}, function (props) { return (props.isSelected ? 0.8 : 0.5); }, colors_1.BlackColor, colors_1.WhiteColor, colors_1.WhiteColor);
+var RegistrationSelectBox = function (_a) {
+    var name = _a.name, image = _a.image, selected = _a.selected, onClick = _a.onClick;
+    return (react_1.default.createElement(StyledRegistrationSelectBox, { isSelected: selected, image: image, onClick: function () { return onClick(name); } },
+        react_1.default.createElement("h2", { className: 'text' }, name)));
+};
+exports.default = RegistrationSelectBox;
+var templateObject_1;

package/dist/components/registrationPage/registrationSelection/index.js

@@ -0,0 +1,43 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var ui_1 = require("@ludo.ninja/ui");
+var colors_1 = require("@ludo.ninja/ui/build/styles/colors");
+var MainButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/MainButton"));
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_2 = require("@/styles/colors");
+var registrationPage_1 = require("@/components/registrationPage");
+var _system_1 = require("@system");
+// Styles
+var StyledCaption = (0, styled_components_1.default)(_system_1.H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 24px;\n"], ["\n  font-size: 24px;\n"])));
+var StyledRegistrationSelection = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-items: center;\n  align-items: center;\n\n  .info {\n    max-width: 520px;\n    margin: 0 auto;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-items: center;\n    user-select: none;\n  }\n\n  .content {\n    width: 100%;\n    margin-top: 24px;\n\n    &-values {\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr 1fr;\n      grid-gap: 24px;\n      margin-bottom: 56px;\n\n      ", " {\n        grid-gap: 16px;\n        grid-template-columns: 1fr 1fr;\n      }\n    }\n\n    &-next {\n      max-width: 82px;\n      margin: 0 auto;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-items: center;\n  align-items: center;\n\n  .info {\n    max-width: 520px;\n    margin: 0 auto;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-items: center;\n    user-select: none;\n  }\n\n  .content {\n    width: 100%;\n    margin-top: 24px;\n\n    &-values {\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr 1fr;\n      grid-gap: 24px;\n      margin-bottom: 56px;\n\n      ", " {\n        grid-gap: 16px;\n        grid-template-columns: 1fr 1fr;\n      }\n    }\n\n    &-next {\n      max-width: 82px;\n      margin: 0 auto;\n    }\n  }\n"])), ScreenWidth_1.mediaQuery.tablet);
+// Components
+var RegistrationSelection = function (_a) {
+    var step = _a.step, title = _a.title, subtitle = _a.subtitle, maxSteps = _a.maxSteps, values = _a.values, selectedNames = _a.selectedNames, saveValue = _a.saveValue, onClick = _a.onClick, onSaveClick = _a.onSaveClick, text = _a.text;
+    return (react_1.default.createElement(StyledRegistrationSelection, null,
+        react_1.default.createElement("div", { className: "info" },
+            react_1.default.createElement(_system_1.Box, null,
+                react_1.default.createElement(_system_1.Flex, { justifyContent: 'center' },
+                    react_1.default.createElement(StyledCaption, { color: colors_1.AccentColor, mr: 10 }, "Step ".concat(step, "/").concat(maxSteps, " - ")),
+                    react_1.default.createElement(StyledCaption, { color: colors_2.BlackColor }, title)),
+                react_1.default.createElement(_system_1.H3, { color: colors_2.TextGrayColor, mt: 16, mb: 4, fontSize: 18, textAlign: 'center' }, subtitle),
+                react_1.default.createElement(ui_1.MainText, { fontSize: 13, textAlign: 'center', color: colors_2.TextGrayColor }, text))),
+        react_1.default.createElement("div", { className: "content" },
+            react_1.default.createElement("div", { className: "content-values" }, values === null || values === void 0 ? void 0 : values.map(function (_a) {
+                var name = _a.name, imageUrl = _a.imageUrl;
+                return (react_1.default.createElement(registrationPage_1.RegistrationSelectBox, { key: name, name: name, image: imageUrl, selected: selectedNames.includes(name), onClick: onClick }));
+            })),
+            react_1.default.createElement("div", { className: "content-next" },
+                react_1.default.createElement(MainButton_1.default, { onClick: onSaveClick, variant: "primaryM", text: saveValue })))));
+};
+// Export
+exports.default = RegistrationSelection;
+var templateObject_1, templateObject_2;

package/dist/components/rewards/FAQ/index.js

@@ -0,0 +1,132 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var _system_1 = require("@system");
+var scale_1 = require("@/utils/adaptive/scale");
+var screen_1 = require("@/utils/screen");
+var vars_1 = require("@/fonts/vars");
+var arrow_up_light_svg_1 = __importDefault(require("@/public/rewardsPage/arrow_up_light.svg"));
+// Styles
+var StyledFAQRewards = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 24px;\n\n  min-height: max-content;\n  width: 100%;\n  max-width: 720px;\n  background: ", ";\n  margin-bottom: 80px;\n\n  ", " {\n    max-width: 588px;\n    gap: 4px;\n  }\n\n  .faq_desc {\n    font-family: ", ";\n    font-weight: 400;\n    font-size: 1.5em;\n    line-height: 1.46;\n    color: ", ";\n    max-height: 0;\n    padding-bottom: 0;\n    opacity: 0;\n    transition: opacity 0.3s ease, max-height 0.12s ease,\n      padding-bottom 0.12s ease;\n\n    ", " {\n      max-width: 575px;\n    }\n  }\n\n  .faq_desc.open {\n    max-height: 100%;\n    opacity: 1;\n    padding-bottom: 24px;\n\n    ", " {\n      padding-bottom: 16px;\n    }\n  }\n\n  ", " {\n    gap: ", ";\n    max-width: ", ";\n    margin-bottom: ", ";\n\n    .faq_desc {\n      font-size: ", ";\n    }\n\n    .faq_desc.open {\n      padding-bottom: ", ";\n    }\n  }\n"], ["\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 24px;\n\n  min-height: max-content;\n  width: 100%;\n  max-width: 720px;\n  background: ", ";\n  margin-bottom: 80px;\n\n  ", " {\n    max-width: 588px;\n    gap: 4px;\n  }\n\n  .faq_desc {\n    font-family: ", ";\n    font-weight: 400;\n    font-size: 1.5em;\n    line-height: 1.46;\n    color: ", ";\n    max-height: 0;\n    padding-bottom: 0;\n    opacity: 0;\n    transition: opacity 0.3s ease, max-height 0.12s ease,\n      padding-bottom 0.12s ease;\n\n    ", " {\n      max-width: 575px;\n    }\n  }\n\n  .faq_desc.open {\n    max-height: 100%;\n    opacity: 1;\n    padding-bottom: 24px;\n\n    ", " {\n      padding-bottom: 16px;\n    }\n  }\n\n  ", " {\n    gap: ", ";\n    max-width: ", ";\n    margin-bottom: ", ";\n\n    .faq_desc {\n      font-size: ", ";\n    }\n\n    .faq_desc.open {\n      padding-bottom: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.bg;
+}, ScreenWidth_1.mediaQuery.maxWidthTablet, vars_1.dmsansFontVarCss.css, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.grayText;
+}, ScreenWidth_1.mediaQuery.maxWidthTablet, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(720), (0, _4k_1.adaptiveValueCalc)(80), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(24));
+var StyledArrowIcon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  transform: ", ";\n  transition: all 0.3s ease-out;\n  width: 38px;\n  height: 38px;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  transform: ", ";\n  transition: all 0.3s ease-out;\n  width: 38px;\n  height: 38px;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) { return (props.isShow ? 'rotate(0)' : 'rotate(180deg)'); }, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(38), (0, _4k_1.adaptiveValueCalc)(38));
+var StyledTitleWrapper = (0, styled_components_1.default)(_system_1.Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: space-between;\n\n  width: 100%;\n  min-height: 70px;\n\n  ", " {\n    min-height: 50px;\n    margin: 8px 0;\n  }\n\n  ", " {\n    min-height: ", ";\n  }\n"], ["\n  align-items: center;\n  justify-content: space-between;\n\n  width: 100%;\n  min-height: 70px;\n\n  ", " {\n    min-height: 50px;\n    margin: 8px 0;\n  }\n\n  ", " {\n    min-height: ", ";\n  }\n"])), ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(70));
+var StyledFlexDivider = (0, styled_components_1.default)(_system_1.Flex)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  flex-direction: column;\n\n  width: 100%;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n\n    ", " {\n      border-bottom: ", " solid\n        ", ";\n    }\n  }\n"], ["\n  align-items: center;\n  flex-direction: column;\n\n  width: 100%;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n\n    ", " {\n      border-bottom: ", " solid\n        ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.blankProgressBar;
+}, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(1), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.blankProgressBar;
+});
+var TitleFAQ = (0, styled_components_1.default)(_system_1.H3)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-family: ", ";\n\n  font-weight: 600;\n  font-size: 2.4em;\n  line-height: 1.5;\n  text-align: center;\n  color: ", ";\n\n  ", " {\n    font-size: 2.2em;\n    line-height: 1.27;\n  }\n\n  ", " {\n    font-size: ", ";\n  }\n"], ["\n  font-family: ", ";\n\n  font-weight: 600;\n  font-size: 2.4em;\n  line-height: 1.5;\n  text-align: center;\n  color: ", ";\n\n  ", " {\n    font-size: 2.2em;\n    line-height: 1.27;\n  }\n\n  ", " {\n    font-size: ", ";\n  }\n"])), vars_1.poppinsFontVarCss.css, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.naturalWhite;
+}, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(15));
+var AccordionTitle = (0, styled_components_1.default)(_system_1.H5)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n\n  font-family: ", ";\n  font-weight: 500;\n  font-size: 1.5em;\n  line-height: 1.46;\n  text-align: left;\n\n  ", " {\n    font-size: ", ";\n  }\n"], ["\n  color: ", ";\n\n  font-family: ", ";\n  font-weight: 500;\n  font-size: 1.5em;\n  line-height: 1.46;\n  text-align: left;\n\n  ", " {\n    font-size: ", ";\n  }\n"])), colors_1.WhiteColor, vars_1.poppinsFontVarCss.css, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(15));
+var FAQ_ITEMS = [
+    {
+        id: 1,
+        title: "What's Ludo XP?",
+        description: "Think of Ludo XP as a fun rewards system. It's all about giving back to users like you for engaging with different opportunities on the platform. The more you dive in, the more rewards you can earn!",
+    },
+    {
+        id: 2,
+        title: 'What Counts as a Ludo opportunity?',
+        description: "Opportunities are special perks from projects aiming to deepen their connection with you. These can range from exclusive features, to rewards, or even insights into the project's journey. They're crafted to enrich your experience and draw you closer to the essence of the project.",
+    },
+    {
+        id: 3,
+        title: 'How Do XP Points Work?',
+        description: "Unlike Ludo Rank, which grows through your interactions on the blockchain with high-reputation entities, XP points are earned through off-chain activities recommended by Ludo. Engage in these activities, and you'll rack up XP points.",
+    },
+    {
+        id: 4,
+        title: "What's the Deal with XP Levels?",
+        description: "Your XP Level acts as a meter of your engagement within Ludo's ecosystem. It showcases how active you've been with the platform's offerings, with higher levels reflecting greater activity.",
+    },
+    {
+        id: 5,
+        title: 'Why Bother Increasing My XP?',
+        description: "Elevating your XP level not only brings direct rewards but also indirectly boosts your Ludo Rank by increasing your chances of receiving on-chain rewards. Web3 projects are always on the lookout for engaged users, and a higher XP level signals your commitment and engagement. This, in turn, opens the door to more significant opportunities within the Web3 space, including exclusive on-chain rewards. It's about proving your engagement and dedication, not just investing money.",
+    },
+];
+// Component
+var ArrowIconResize = function () {
+    var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
+    return (react_1.default.createElement(arrow_up_light_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({
+            windowDimensions: windowDimensions,
+            currentSize: 1,
+        }) }));
+};
+var FAQRewards = function () {
+    var _a = (0, react_1.useState)(Array(3).fill(false)), openTopics = _a[0], setOpenTopics = _a[1];
+    var toggleDescription = function (index) {
+        setOpenTopics(function (prevOpenTopics) {
+            var newOpenTopics = __spreadArray([], prevOpenTopics, true);
+            newOpenTopics[index] = !newOpenTopics[index];
+            return newOpenTopics;
+        });
+    };
+    return (react_1.default.createElement(StyledFAQRewards, null,
+        react_1.default.createElement(TitleFAQ, null, "Frequently Asked Questions"),
+        react_1.default.createElement(_system_1.Flex, { flexDirection: "column", width: "100%" }, FAQ_ITEMS.map(function (_a) {
+            var id = _a.id, title = _a.title, description = _a.description;
+            return (react_1.default.createElement(StyledFlexDivider, { key: id },
+                react_1.default.createElement(StyledTitleWrapper, null,
+                    react_1.default.createElement(AccordionTitle, null, title),
+                    react_1.default.createElement(StyledArrowIcon, { isShow: openTopics[id], onClick: function () { return toggleDescription(id); } },
+                        react_1.default.createElement(ArrowIconResize, null))),
+                react_1.default.createElement("p", { className: "faq_desc ".concat(openTopics[id] ? 'open' : '') }, description)));
+        }))));
+};
+// Export
+exports.default = FAQRewards;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/rewards/clarifications/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = __importDefault(require("styled-components"));
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var _system_1 = require("@system");
+var vars_1 = require("@/fonts/vars");
+// Styles
+var StyledClarifications = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 24px;\n\n  min-width: 720px;\n  min-height: 260px;\n  max-width: max-content;\n  margin-bottom: 80px;\n  background: ", ";\n\n  ", " {\n    min-width: 588px;\n  }\n\n  ", " {\n    min-width: 100%;\n    margin-bottom: 56px;\n  }\n\n  .clar_desc {\n    font-family: ", ";\n    font-weight: 400;\n    font-size: 1.5em;\n    line-height: 1.46;\n\n    color: ", ";\n    margin: 0 auto;\n    text-align: center;\n\n    ", " {\n      max-width: 473px;\n    }\n\n    ", " {\n      font-size: 1.4em;\n      line-height: 1.28;\n    }\n  }\n\n  .goal_desc,\n  .goal_exp {\n    font-family: ", ";\n\n    font-weight: 500;\n    font-size: 1.5em;\n    line-height: 1.46;\n    color: ", ";\n\n    ", " {\n      font-size: 1.4em;\n      line-height: 1.42;\n    }\n  }\n\n  .goal_desc {\n    ", " {\n      max-width: 170px;\n    }\n  }\n"], ["\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 24px;\n\n  min-width: 720px;\n  min-height: 260px;\n  max-width: max-content;\n  margin-bottom: 80px;\n  background: ", ";\n\n  ", " {\n    min-width: 588px;\n  }\n\n  ", " {\n    min-width: 100%;\n    margin-bottom: 56px;\n  }\n\n  .clar_desc {\n    font-family: ", ";\n    font-weight: 400;\n    font-size: 1.5em;\n    line-height: 1.46;\n\n    color: ", ";\n    margin: 0 auto;\n    text-align: center;\n\n    ", " {\n      max-width: 473px;\n    }\n\n    ", " {\n      font-size: 1.4em;\n      line-height: 1.28;\n    }\n  }\n\n  .goal_desc,\n  .goal_exp {\n    font-family: ", ";\n\n    font-weight: 500;\n    font-size: 1.5em;\n    line-height: 1.46;\n    color: ", ";\n\n    ", " {\n      font-size: 1.4em;\n      line-height: 1.42;\n    }\n  }\n\n  .goal_desc {\n    ", " {\n      max-width: 170px;\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.bg;
+}, ScreenWidth_1.mediaQuery.maxWidthTablet, ScreenWidth_1.mediaQuery.mobile, vars_1.dmsansFontVarCss.css, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.grayText;
+}, ScreenWidth_1.mediaQuery.maxWidthTablet, ScreenWidth_1.mediaQuery.mobile, vars_1.poppinsFontVarCss.css, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.naturalWhite;
+}, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.mobile);
+var StyledFlex = (0, styled_components_1.default)(_system_1.Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  justify-content: space-between;\n  padding: 16px 0;\n  align-items: center;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  width: 100%;\n  justify-content: space-between;\n  padding: 16px 0;\n  align-items: center;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.blankProgressBar;
+});
+// Component
+var Clarifications = function (_a) {
+    var goalsArr = _a.goalsArr;
+    return (React.createElement(StyledClarifications, null,
+        React.createElement(_system_1.Flex, { flexDirection: "column", width: "100%", style: { gap: '16px' } },
+            React.createElement(_system_1.H3, { style: {
+                    lineHeight: '1.5',
+                    fontWeight: 600,
+                    fontSize: '2.4em',
+                    textAlign: 'center',
+                    fontFamily: vars_1.poppinsFontVarCss.css,
+                }, color: colors_1.WhiteColor }, "How does it work?"),
+            React.createElement("p", { className: "clar_desc" }, "Further developing and growing NFT Trader for our team has been an exciting journey so far.")),
+        React.createElement(_system_1.Flex, { flexDirection: "column", width: "100%" }, goalsArr && goalsArr.length > 0
+            ? goalsArr.map(function (_a) {
+                var desc = _a.desc, expPerTime = _a.expPerTime;
+                return (React.createElement(StyledFlex, { key: desc + expPerTime },
+                    React.createElement("p", { className: "goal_desc" }, desc),
+                    React.createElement("p", { className: "goal_exp" }, expPerTime)));
+            })
+            : null)));
+};
+//Export
+exports.default = Clarifications;
+var templateObject_1, templateObject_2;

package/dist/components/rewards/logoBottom/index.js

@@ -0,0 +1,29 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = __importDefault(require("styled-components"));
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var _system_1 = require("@system");
+var scale_1 = require("@/utils/adaptive/scale");
+var screen_1 = require("@/utils/screen");
+var main_logo_dark_svg_1 = __importDefault(require("@/public/logo/main_logo_dark.svg"));
+// Styles
+var StyledBottomLogo = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n\n  width: 100%;\n\n  ", " {\n    margin-bottom: 28px;\n  }\n\n  ", " {\n    margin-bottom: 0;\n  }\n\n  .bottom_logo {\n    transform: scale(0.8);\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n\n  width: 100%;\n\n  ", " {\n    margin-bottom: 28px;\n  }\n\n  ", " {\n    margin-bottom: 0;\n  }\n\n  .bottom_logo {\n    transform: scale(0.8);\n  }\n"])), ScreenWidth_1.mediaQuery.maxWidthTablet, ScreenWidth_1.mediaQuery.mobile);
+// Component
+var BottomLogo = function () {
+    var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
+    return (React.createElement(StyledBottomLogo, null,
+        React.createElement(main_logo_dark_svg_1.default, { className: 'bottom_logo', style: (0, scale_1.getAdaptiveScale)({
+                windowDimensions: windowDimensions,
+                currentSize: 0.8,
+            }) })));
+};
+// Export
+exports.default = BottomLogo;
+var templateObject_1;

package/dist/components/rewards/prograssBar/index.js

@@ -0,0 +1,32 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+// Styles
+var StyledProgress = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: 100px;\n\n  .progress_fill {\n    width: ", ";\n    //width: 50%;\n    height: 100%;\n    background-color: ", ";\n    border-radius: 100px;\n    transition: all 1500ms;\n  }\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n\n    .progress_fill {\n      border-radius: ", ";\n    }\n  }\n"], ["\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: 100px;\n\n  .progress_fill {\n    width: ", ";\n    //width: 50%;\n    height: 100%;\n    background-color: ", ";\n    border-radius: 100px;\n    transition: all 1500ms;\n  }\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n\n    .progress_fill {\n      border-radius: ", ";\n    }\n  }\n"])), function (props) { return (props.height ? "".concat(props.height, "px") : '12px'); }, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.blankProgressBar;
+}, function (props) { return (props.percent ? "".concat(props.percent, "%") : '0%'); }, function (props) {
+    return props.isForUser ? colors_1.ExpUserProgressFill : colors_1.ExpTaskProgressFill;
+}, ScreenWidth_1.mediaQuery.minWidthFourK, function (props) {
+    return props.height ? (0, _4k_1.adaptiveValueCalc)(props.height) : (0, _4k_1.adaptiveValueCalc)(12);
+}, (0, _4k_1.adaptiveValueCalc)(100), (0, _4k_1.adaptiveValueCalc)(100));
+//   Component
+var ProgressBar = function (_a) {
+    var height = _a.height, percent = _a.percent, isUserTab = _a.isUserTab;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledProgress, { percent: percent, height: height, isForUser: isUserTab },
+            React.createElement("div", { className: "progress_fill" }))));
+};
+// Export
+exports.default = ProgressBar;
+var templateObject_1;

package/dist/components/rewards/rewardsButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = __importDefault(require("styled-components"));
+var vars_1 = require("@ludo.ninja/ui/build/fonts/vars");
+var colors_1 = require("@ludo.ninja/ui/build/styles/colors");
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var RewardsButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  padding: 9px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n\n  border-radius: 30px;\n  border: 1px solid ", ";\n\n  color: ", ";\n  text-align: center;\n\n  font-family: ", ";\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 22px;\n\n  white-space: nowrap;\n  background: transparent;\n  transition: 0.2s all ease-in;\n  user-select: none;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover {\n      background: #1b1c27;\n      box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.1);\n      transition: 0.2s all ease-in-out;\n    }\n  }\n\n  &:disabled {\n    border: 1px solid #00622d;\n    color: ", ";\n    transition: 0.2s all ease-in-out;\n\n    &:hover {\n      background: transparent;\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    gap: ", ";\n\n    border-radius: ", ";\n    border: ", " solid ", ";\n\n    font-size: ", ";\n    line-height: ", ";\n\n    @media (hover: hover) {\n      &:hover {\n        box-shadow: 0 ", " ", " 0\n          rgba(0, 0, 0, 0.1);\n      }\n    }\n\n    &:disabled {\n      border: ", " solid #00622d;\n    }\n  }\n"], ["\n  display: flex;\n  padding: 9px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n\n  border-radius: 30px;\n  border: 1px solid ", ";\n\n  color: ", ";\n  text-align: center;\n\n  font-family: ", ";\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 22px;\n\n  white-space: nowrap;\n  background: transparent;\n  transition: 0.2s all ease-in;\n  user-select: none;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover {\n      background: #1b1c27;\n      box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.1);\n      transition: 0.2s all ease-in-out;\n    }\n  }\n\n  &:disabled {\n    border: 1px solid #00622d;\n    color: ", ";\n    transition: 0.2s all ease-in-out;\n\n    &:hover {\n      background: transparent;\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    gap: ", ";\n\n    border-radius: ", ";\n    border: ", " solid ", ";\n\n    font-size: ", ";\n    line-height: ", ";\n\n    @media (hover: hover) {\n      &:hover {\n        box-shadow: 0 ", " ", " 0\n          rgba(0, 0, 0, 0.1);\n      }\n    }\n\n    &:disabled {\n      border: ", " solid #00622d;\n    }\n  }\n"])), colors_1.ExpTaskProgressFill, colors_1.WhiteColor, vars_1.poppinsFontVarCss.css, colors_1.TextGray2Color, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(9), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(30), (0, _4k_1.adaptiveValueCalc)(1), colors_1.ExpTaskProgressFill, (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(22), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(1));
+exports.default = RewardsButton;
+var templateObject_1;

package/dist/components/rewards/seasonBanner/index.js

@@ -0,0 +1,29 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var _system_1 = require("@system");
+var vars_1 = require("@/fonts/vars");
+// Styles
+var StyledSeasons = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  min-width: 896px;\n  min-height: 215px;\n  max-width: max-content;\n  margin-bottom: 80px;\n  border-radius: 16px;\n  background: url('/rewardsPage/banner_seasons.svg') no-repeat;\n  background-size: cover;\n  background-position: center;\n  box-shadow: 0px 1px 0px 0px #ffffff1a inset;\n\n  ", " {\n    min-width: 628px;\n    min-height: 178px;\n    background-size: 147%;\n    margin-bottom: 91px;\n  }\n\n  ", " {\n    min-width: 320px;\n    min-height: 124px;\n    background-size: 147%;\n    margin-bottom: 56px;\n  }\n\n  ", " {\n    min-width: ", ";\n    min-height: ", ";\n    margin-bottom: ", ";\n    border-radius: ", ";\n    box-shadow: 0px ", " 0px 0px #ffffff1a inset;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  min-width: 896px;\n  min-height: 215px;\n  max-width: max-content;\n  margin-bottom: 80px;\n  border-radius: 16px;\n  background: url('/rewardsPage/banner_seasons.svg') no-repeat;\n  background-size: cover;\n  background-position: center;\n  box-shadow: 0px 1px 0px 0px #ffffff1a inset;\n\n  ", " {\n    min-width: 628px;\n    min-height: 178px;\n    background-size: 147%;\n    margin-bottom: 91px;\n  }\n\n  ", " {\n    min-width: 320px;\n    min-height: 124px;\n    background-size: 147%;\n    margin-bottom: 56px;\n  }\n\n  ", " {\n    min-width: ", ";\n    min-height: ", ";\n    margin-bottom: ", ";\n    border-radius: ", ";\n    box-shadow: 0px ", " 0px 0px #ffffff1a inset;\n  }\n"])), ScreenWidth_1.mediaQuery.maxWidthTablet, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(896), (0, _4k_1.adaptiveValueCalc)(215), (0, _4k_1.adaptiveValueCalc)(80), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(1));
+var SeasonTitle = (0, styled_components_1.default)(_system_1.H2)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: 700;\n  font-size: 3.6em;\n  line-height: 1.44;\n  text-align: center;\n  color: ", ";\n\n  ", " {\n    font-weight: 600;\n    font-size: 1.8em;\n    line-height: 1.33;\n  }\n\n  ", " {\n    font-size: ", ";\n  }\n"], ["\n  font-family: ", ";\n  font-weight: 700;\n  font-size: 3.6em;\n  line-height: 1.44;\n  text-align: center;\n  color: ", ";\n\n  ", " {\n    font-weight: 600;\n    font-size: 1.8em;\n    line-height: 1.33;\n  }\n\n  ", " {\n    font-size: ", ";\n  }\n"])), vars_1.poppinsFontVarCss.css, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.naturalWhite;
+}, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(36));
+// Component
+var SeasonsTab = function (_a) {
+    var title = _a.title;
+    return (React.createElement(StyledSeasons, null,
+        React.createElement(SeasonTitle, null, title !== null && title !== void 0 ? title : 'Seasons coming soon...')));
+};
+//Export
+exports.default = SeasonsTab;
+var templateObject_1, templateObject_2;

package/dist/components/rewards/taskExpTab/index.js

@@ -0,0 +1,64 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
+var rewardsButton_1 = __importDefault(require("@/components/rewards/rewardsButton"));
+var _system_1 = require("@system");
+var vars_1 = require("@/fonts/vars");
+var prograssBar_1 = __importDefault(require("../prograssBar"));
+// Styles
+var StyledTaskExpTab = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n\n  min-width: 528px;\n  min-height: 214px;\n  max-width: max-content;\n  padding: 24px 32px;\n  border-radius: 8px;\n  background: ", ";\n\n  ", " {\n    min-width: 100%;\n    min-height: 206px;\n  }\n\n  ", " {\n    min-width: 320px;\n    min-height: 182px;\n    padding: 20px 24px;\n  }\n\n  .erned_exp {\n    font-family: ", ";\n    font-weight: 600;\n    font-size: 1.8em;\n    line-height: 1.44;\n    color: ", ";\n\n    ", " {\n      font-size: 1.6em;\n      line-height: 1.37;\n    }\n  }\n\n  .exp_logo {\n    width: 24px;\n    height: 24px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  .task_content {\n    width: 100%;\n    flex-grow: 1;\n    flex-direction: column;\n    gap: 24px;\n  }\n\n  .task_desc {\n    font-family: ", ";\n    width: 100%;\n    text-align: left;\n\n    font-weight: 400;\n    font-size: 1.5em;\n    line-height: 1.46;\n    color: ", ";\n\n    ", " {\n      font-size: 1.4em;\n      line-height: 1.28;\n    }\n  }\n\n  .task_progress {\n    display: flex;\n    gap: 8px;\n    width: 100%;\n  }\n\n  .task_part_complete,\n  .task_part_requried {\n    font-family: ", ";\n    font-weight: 500;\n    font-size: 1.5em;\n    line-height: 1.46;\n    color: ", ";\n\n    ", " {\n      font-size: 1.4em;\n      line-height: 1.42;\n    }\n  }\n\n  .task_part_requried {\n    color: ", ";\n  }\n\n  .gap_8 {\n    gap: 8px;\n  }\n\n  ", " {\n    .gap_8 {\n      gap: ", ";\n    }\n\n    gap: ", ";\n\n    min-width: ", ";\n    min-height: ", ";\n    padding: ", " ", ";\n    border-radius: ", ";\n\n    .erned_exp {\n      font-size: ", ";\n    }\n\n    .exp_logo {\n      width: ", ";\n      height: ", ";\n    }\n\n    .task_content {\n      gap: ", ";\n    }\n\n    .task_desc {\n      font-size: ", ";\n    }\n\n    .task_progress {\n      gap: ", ";\n    }\n\n    .task_part_complete,\n    .task_part_requried {\n      font-size: ", ";\n    }\n  }\n"], ["\n  ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n\n  min-width: 528px;\n  min-height: 214px;\n  max-width: max-content;\n  padding: 24px 32px;\n  border-radius: 8px;\n  background: ", ";\n\n  ", " {\n    min-width: 100%;\n    min-height: 206px;\n  }\n\n  ", " {\n    min-width: 320px;\n    min-height: 182px;\n    padding: 20px 24px;\n  }\n\n  .erned_exp {\n    font-family: ", ";\n    font-weight: 600;\n    font-size: 1.8em;\n    line-height: 1.44;\n    color: ", ";\n\n    ", " {\n      font-size: 1.6em;\n      line-height: 1.37;\n    }\n  }\n\n  .exp_logo {\n    width: 24px;\n    height: 24px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  .task_content {\n    width: 100%;\n    flex-grow: 1;\n    flex-direction: column;\n    gap: 24px;\n  }\n\n  .task_desc {\n    font-family: ", ";\n    width: 100%;\n    text-align: left;\n\n    font-weight: 400;\n    font-size: 1.5em;\n    line-height: 1.46;\n    color: ", ";\n\n    ", " {\n      font-size: 1.4em;\n      line-height: 1.28;\n    }\n  }\n\n  .task_progress {\n    display: flex;\n    gap: 8px;\n    width: 100%;\n  }\n\n  .task_part_complete,\n  .task_part_requried {\n    font-family: ", ";\n    font-weight: 500;\n    font-size: 1.5em;\n    line-height: 1.46;\n    color: ", ";\n\n    ", " {\n      font-size: 1.4em;\n      line-height: 1.42;\n    }\n  }\n\n  .task_part_requried {\n    color: ", ";\n  }\n\n  .gap_8 {\n    gap: 8px;\n  }\n\n  ", " {\n    .gap_8 {\n      gap: ", ";\n    }\n\n    gap: ", ";\n\n    min-width: ", ";\n    min-height: ", ";\n    padding: ", " ", ";\n    border-radius: ", ";\n\n    .erned_exp {\n      font-size: ", ";\n    }\n\n    .exp_logo {\n      width: ", ";\n      height: ", ";\n    }\n\n    .task_content {\n      gap: ", ";\n    }\n\n    .task_desc {\n      font-size: ", ";\n    }\n\n    .task_progress {\n      gap: ", ";\n    }\n\n    .task_part_complete,\n    .task_part_requried {\n      font-size: ", ";\n    }\n  }\n"])), boxTransform_1.default, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.secondaryBg;
+}, ScreenWidth_1.mediaQuery.maxWidthTablet, ScreenWidth_1.mediaQuery.mobile, vars_1.poppinsFontVarCss.css, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.successTaskProgressBar;
+}, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.mobile, vars_1.dmsansFontVarCss.css, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.grayText;
+}, ScreenWidth_1.mediaQuery.mobile, vars_1.poppinsFontVarCss.css, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.naturalWhite;
+}, ScreenWidth_1.mediaQuery.mobile, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.grayText;
+}, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(528), (0, _4k_1.adaptiveValueCalc)(214), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(15));
+var TaskTitle = (0, styled_components_1.default)(_system_1.H5)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: ", ";\n\n  font-weight: 600;\n  font-size: 1.8em;\n  line-height: 1.44;\n  text-align: left;\n  color: ", ";\n\n  ", " {\n    font-size: 1.6em;\n    line-height: 1.37;\n  }\n\n  ", " {\n    font-size: ", ";\n  }\n"], ["\n  font-family: ", ";\n\n  font-weight: 600;\n  font-size: 1.8em;\n  line-height: 1.44;\n  text-align: left;\n  color: ", ";\n\n  ", " {\n    font-size: 1.6em;\n    line-height: 1.37;\n  }\n\n  ", " {\n    font-size: ", ";\n  }\n"])), vars_1.poppinsFontVarCss.css, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.naturalWhite;
+}, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(18));
+// Component
+var TaskExpTab = function (_a) {
+    var taskTitle = _a.taskTitle, taskDesc = _a.taskDesc, ernExp = _a.ernExp, segmentsNumber = _a.segmentsNumber, partDone = _a.partDone, partReq = _a.partReq, action = _a.action;
+    return (React.createElement(StyledTaskExpTab, null,
+        React.createElement(_system_1.Flex, { justifyContent: "space-between", width: "100%" },
+            React.createElement(TaskTitle, null, taskTitle !== null && taskTitle !== void 0 ? taskTitle : 'Another task'),
+            React.createElement(_system_1.Flex, { className: 'gap_8' },
+                React.createElement("p", { className: "erned_exp" },
+                    segmentsNumber !== 1 ? "from ".concat(ernExp) : ernExp,
+                    " XP"),
+                React.createElement("img", { src: '/rewardsPage/XP_logo.svg', alt: "Experience logo", className: "exp_logo" }))),
+        React.createElement(_system_1.Flex, { justifyContent: segmentsNumber ? 'space-between' : 'center', className: "task_content" },
+            React.createElement("p", { className: "task_desc" }, taskDesc !== null && taskDesc !== void 0 ? taskDesc : 'Another task text goes here.'),
+            segmentsNumber ? (React.createElement(_system_1.Flex, { className: 'gap_8', flexDirection: 'column' },
+                React.createElement(_system_1.Flex, { className: 'gap_8', width: "100%" }, Array.from(Array(segmentsNumber)).map(function (_, index) {
+                    return (React.createElement(prograssBar_1.default, { key: index, height: 12, percent: partDone > index ? 100 : 0 }));
+                })),
+                React.createElement(_system_1.Flex, { justifyContent: "space-between", width: "100%" },
+                    React.createElement("p", { className: "task_part_complete" }, "0"),
+                    React.createElement("p", { className: "task_part_requried" }, partReq)))) : null),
+        action && (React.createElement(_system_1.Flex, { justifyContent: 'center' },
+            React.createElement(rewardsButton_1.default, { onClick: action.onClick }, action.text)))));
+};
+// Export
+exports.default = TaskExpTab;
+var templateObject_1, templateObject_2;