@ludo.ninja/components 1.9.2 → 1.9.4

package/dist/components/profile/wallets/{index.js → index.jsx}

@@ -17,9 +17,9 @@ 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("@ludo.ninja/components/src/store/ui");
+var ui_1 = require("@ludo.ninja/components/dist/store/ui");
 var useFetchUserWallets_1 = __importDefault(require("@/api/server-identities/queries/useFetchUserWallets"));
-var styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var myWallets_1 = __importDefault(require("@/components/myWallets"));
 var Palete_1 = __importDefault(require("@/system/Palete"));
 var _system_1 = require("@system");
@@ -43,31 +43,39 @@ var ProfileWallets = function () {
     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)));
+            return (<div key={userWallet.address} className={"wallet_item"}>
+          <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)}
+        </div>);
         });
     };
     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")))));
+    return (<StyledProfileWallets>
+      <Palete_1.default>
+        <_system_1.Flex justifyContent="space-between" alignItems="center">
+          <_system_1.H5 color={colors_1.BlackColor}>Wallets</_system_1.H5>
+          <div className={'manageBtn'} onClick={function () { return openModalSidebarPortal(<myWallets_1.default />); }}>
+            <_system_2.SmallText color={colors_1.AccentColor}>Manage</_system_2.SmallText>
+          </div>
+        </_system_1.Flex>
+        <div className={'wallets'}>{renderUserWallets()}</div>
+        <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');
+        }}>
+          <div className={'icon'}>
+            <plus_svg_1.default style={(0, scale_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 })}/>
+          </div>
+
+          <_system_2.SmallText color={colors_1.AccentColor}>Add new</_system_2.SmallText>
+        </div>
+      </Palete_1.default>
+    </StyledProfileWallets>);
 };
 exports.ProfileWallets = ProfileWallets;
 var templateObject_1;

package/dist/components/profile/wrapper/{index.js → index.jsx}

@@ -9,9 +9,17 @@ 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));
+    return (<>
+      <profile_1.ProfilePageHead userUrl={url} profile={profile}/>
+
+      <profile_1.ProfileInfo profile={profile}/>
+
+      {children}
+
+      {/*<script*/}
+      {/*  type="application/ld+json"*/}
+      {/*  dangerouslySetInnerHTML={profileJSONLD(profile as schema.IProfile, '')}*/}
+      {/*/>*/}
+    </>);
 };
 exports.ProfileWrapper = ProfileWrapper;

package/dist/components/registrationPage/registrationSelectBox/{index.js → index.jsx}

@@ -17,8 +17,9 @@ var StyledRegistrationSelectBox = styled_components_1.default.div(templateObject
 }, 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)));
+    return (<StyledRegistrationSelectBox isSelected={selected} image={image} onClick={function () { return onClick(name); }}>
+      <h2 className={'text'}>{name}</h2>
+    </StyledRegistrationSelectBox>);
 };
 exports.default = RegistrationSelectBox;
 var templateObject_1;

package/dist/components/registrationPage/registrationSelection/{index.js → index.jsx}

@@ -12,7 +12,7 @@ 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 styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var colors_2 = require("@/styles/colors");
 var registrationPage_1 = require("@/components/registrationPage");
 var _system_1 = require("@system");
@@ -22,21 +22,35 @@ var StyledRegistrationSelection = styled_components_1.default.div(templateObject
 // 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 })))));
+    return (<StyledRegistrationSelection>
+    <div className="info">
+      <_system_1.Box>
+        <_system_1.Flex justifyContent={'center'}>
+          <StyledCaption color={colors_1.AccentColor} mr={10}>{"Step ".concat(step, "/").concat(maxSteps, " - ")}</StyledCaption>
+          <StyledCaption color={colors_2.BlackColor}>{title}</StyledCaption>
+        </_system_1.Flex>
+        <_system_1.H3 color={colors_2.TextGrayColor} mt={16} mb={4} fontSize={18} textAlign={'center'}>
+          {subtitle}
+        </_system_1.H3>
+        <ui_1.MainText fontSize={13} textAlign={'center'} color={colors_2.TextGrayColor}>
+          {text}
+        </ui_1.MainText>
+      </_system_1.Box>
+    </div>
+
+    <div className="content">
+      <div className="content-values">
+        {values === null || values === void 0 ? void 0 : values.map(function (_a) {
+            var name = _a.name, imageUrl = _a.imageUrl;
+            return (<registrationPage_1.RegistrationSelectBox key={name} name={name} image={imageUrl} selected={selectedNames.includes(name)} onClick={onClick}/>);
+        })}
+      </div>
+
+      <div className="content-next">
+        <MainButton_1.default onClick={onSaveClick} variant="primaryM" text={saveValue}/>
+      </div>
+    </div>
+  </StyledRegistrationSelection>);
 };
 // Export
 exports.default = RegistrationSelection;

package/dist/components/rewards/FAQ/{index.js → index.jsx}

@@ -42,7 +42,7 @@ 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 styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var colors_1 = require("@/styles/colors");
 var _system_1 = require("@system");
 var scale_1 = require("@/utils/adaptive/scale");
@@ -101,10 +101,10 @@ var FAQ_ITEMS = [
 // 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)({
+    return (<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];
@@ -115,17 +115,25 @@ var FAQRewards = function () {
             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) {
+    return (<StyledFAQRewards>
+      <TitleFAQ>Frequently Asked Questions</TitleFAQ>
+      <_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)));
-        }))));
+            return (<StyledFlexDivider key={id}>
+            <StyledTitleWrapper>
+              <AccordionTitle>{title}</AccordionTitle>
+              <StyledArrowIcon isShow={openTopics[id]} onClick={function () { return toggleDescription(id); }}>
+                <ArrowIconResize />
+              </StyledArrowIcon>
+            </StyledTitleWrapper>
+            <p className={"faq_desc ".concat(openTopics[id] ? 'open' : '')}>
+              {description}
+            </p>
+          </StyledFlexDivider>);
+        })}
+      </_system_1.Flex>
+    </StyledFAQRewards>);
 };
 // Export
 exports.default = FAQRewards;

package/dist/components/rewards/clarifications/{index.js → index.jsx}

@@ -8,7 +8,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = __importDefault(require("styled-components"));
-var styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var colors_1 = require("@/styles/colors");
 var _system_1 = require("@system");
 var vars_1 = require("@/fonts/vars");
@@ -30,24 +30,34 @@ var StyledFlex = (0, styled_components_1.default)(_system_1.Flex)(templateObject
 // 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
+    return (<StyledClarifications>
+      <_system_1.Flex flexDirection="column" width="100%" style={{ gap: '16px' }}>
+        <_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?
+        </_system_1.H3>
+        <p className={"clar_desc"}>
+          Further developing and growing NFT Trader for our team has been an
+          exciting journey so far.
+        </p>
+      </_system_1.Flex>
+      <_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)));
+                return (<StyledFlex key={desc + expPerTime}>
+                <p className={"goal_desc"}>{desc}</p>
+                <p className={"goal_exp"}>{expPerTime}</p>
+              </StyledFlex>);
             })
-            : null)));
+            : null}
+      </_system_1.Flex>
+    </StyledClarifications>);
 };
 //Export
 exports.default = Clarifications;

package/dist/components/rewards/logoBottom/{index.js → index.jsx}

@@ -8,7 +8,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = __importDefault(require("styled-components"));
-var styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var _system_1 = require("@system");
 var scale_1 = require("@/utils/adaptive/scale");
 var screen_1 = require("@/utils/screen");
@@ -18,11 +18,12 @@ var StyledBottomLogo = (0, styled_components_1.default)(_system_1.Flex)(template
 // 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,
-            }) })));
+    return (<StyledBottomLogo>
+      <main_logo_dark_svg_1.default className={'bottom_logo'} style={(0, scale_1.getAdaptiveScale)({
+            windowDimensions: windowDimensions,
+            currentSize: 0.8,
+        })}/>
+    </StyledBottomLogo>);
 };
 // Export
 exports.default = BottomLogo;

package/dist/components/rewards/prograssBar/{index.js → index.jsx}

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (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 styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 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) {
@@ -23,9 +23,11 @@ var StyledProgress = styled_components_1.default.div(templateObject_1 || (templa
 //   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" }))));
+    return (<>
+      <StyledProgress percent={percent} height={height} isForUser={isUserTab}>
+        <div className="progress_fill"></div>
+      </StyledProgress>
+    </>);
 };
 // Export
 exports.default = ProgressBar;

package/dist/components/rewards/rewardsButton/{index.js → index.jsx}

@@ -11,7 +11,7 @@ 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 styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 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, styles_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 → index.jsx}

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (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 styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var _system_1 = require("@system");
 var vars_1 = require("@/fonts/vars");
 // Styles
@@ -21,8 +21,9 @@ var SeasonTitle = (0, styled_components_1.default)(_system_1.H2)(templateObject_
 // 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...')));
+    return (<StyledSeasons>
+      <SeasonTitle>{title !== null && title !== void 0 ? title : 'Seasons coming soon...'}</SeasonTitle>
+    </StyledSeasons>);
 };
 //Export
 exports.default = SeasonsTab;

package/dist/components/rewards/taskExpTab/{index.js → index.jsx}

@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (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 styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
 var rewardsButton_1 = __importDefault(require("@/components/rewards/rewardsButton"));
 var _system_1 = require("@system");
@@ -39,25 +39,37 @@ var TaskTitle = (0, styled_components_1.default)(_system_1.H5)(templateObject_2
 // 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)))));
+    return (<StyledTaskExpTab>
+      <_system_1.Flex justifyContent="space-between" width="100%">
+        <TaskTitle>{taskTitle !== null && taskTitle !== void 0 ? taskTitle : 'Another task'}</TaskTitle>
+        <_system_1.Flex className={'gap_8'}>
+          <p className={"erned_exp"}>
+            {segmentsNumber !== 1 ? "from ".concat(ernExp) : ernExp} XP
+          </p>
+          <img src={'/rewardsPage/XP_logo.svg'} alt="Experience logo" className="exp_logo"/>
+        </_system_1.Flex>
+      </_system_1.Flex>
+      <_system_1.Flex justifyContent={segmentsNumber ? 'space-between' : 'center'} className={"task_content"}>
+        <p className={"task_desc"}>
+          {taskDesc !== null && taskDesc !== void 0 ? taskDesc : 'Another task text goes here.'}
+        </p>
+        {segmentsNumber ? (<_system_1.Flex className={'gap_8'} flexDirection={'column'}>
+            <_system_1.Flex className={'gap_8'} width="100%">
+              {Array.from(Array(segmentsNumber)).map(function (_, index) {
+                return (<prograssBar_1.default key={index} height={12} percent={partDone > index ? 100 : 0}/>);
+            })}
+            </_system_1.Flex>
+
+            <_system_1.Flex justifyContent="space-between" width="100%">
+              <p className={"task_part_complete"}>0</p>
+              <p className={"task_part_requried"}>{partReq}</p>
+            </_system_1.Flex>
+          </_system_1.Flex>) : null}
+      </_system_1.Flex>
+      {action && (<_system_1.Flex justifyContent={'center'}>
+          <rewardsButton_1.default onClick={action.onClick}>{action.text}</rewardsButton_1.default>
+        </_system_1.Flex>)}
+    </StyledTaskExpTab>);
 };
 // Export
 exports.default = TaskExpTab;

package/dist/components/rewards/tasksGrid/{index.js → index.jsx}

@@ -50,7 +50,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 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 styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var colors_1 = require("@/styles/colors");
 var _system_1 = require("@system");
 var vars_1 = require("@/fonts/vars");
@@ -133,9 +133,12 @@ var Tasks = function (_a) {
     }, []);
     if (!(tasks === null || tasks === void 0 ? void 0 : tasks.length))
         return null;
-    return (React.createElement(StyledTasks, null,
-        React.createElement(SH3, null, "Tasks"),
-        React.createElement(StyledGrid, null, tasks === null || tasks === void 0 ? void 0 : tasks.map(function (task) { return (React.createElement(taskExpTab_1.default, { key: Number(task.taskId), taskTitle: task.name || 'No name', taskDesc: task.description || 'No description', ernExp: (task === null || task === void 0 ? void 0 : task.minPointsAward) || 0, segmentsNumber: (task === null || task === void 0 ? void 0 : task.maxRepeats) || 0, partDone: (task === null || task === void 0 ? void 0 : task.repeatsCompleted) || 0, partReq: (task === null || task === void 0 ? void 0 : task.maxRepeats) || 0, action: task.taskType ? BUTTONS_BY_TASK_TYPE[task.taskType] : undefined })); }))));
+    return (<StyledTasks>
+      <SH3>Tasks</SH3>
+      <StyledGrid>
+        {tasks === null || tasks === void 0 ? void 0 : tasks.map(function (task) { return (<taskExpTab_1.default key={Number(task.taskId)} taskTitle={task.name || 'No name'} taskDesc={task.description || 'No description'} ernExp={(task === null || task === void 0 ? void 0 : task.minPointsAward) || 0} segmentsNumber={(task === null || task === void 0 ? void 0 : task.maxRepeats) || 0} partDone={(task === null || task === void 0 ? void 0 : task.repeatsCompleted) || 0} partReq={(task === null || task === void 0 ? void 0 : task.maxRepeats) || 0} action={task.taskType ? BUTTONS_BY_TASK_TYPE[task.taskType] : undefined}/>); })}
+      </StyledGrid>
+    </StyledTasks>);
 };
 // Export
 exports.default = Tasks;

package/dist/components/rewards/userExp/{index.js → index.jsx}

@@ -11,7 +11,7 @@ var react_1 = __importDefault(require("react"));
 var image_1 = __importDefault(require("next/image"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-var styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
 var _system_1 = require("@system");
 var vars_1 = require("@/fonts/vars");
@@ -43,29 +43,35 @@ var StyledUserInfoExpTab = styled_components_1.default.div(templateObject_1 || (
 var UserInfoExpTab = function (_a) {
     var _b, _c;
     var userPic = _a.userPic, userName = _a.userName, userWallet = _a.userWallet, userExpPercent = _a.userExpPercent, userExp = _a.userExp, userLevel = _a.userLevel, totalExpInLevel = _a.totalExpInLevel;
-    var expContent = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(image_1.default, { src: '/rewardsPage/XP_logo.svg', alt: "Experience logo", width: 28, height: 28, className: "exp_logo" }),
-        react_1.default.createElement("p", { className: "exp_value" },
-            userExp,
-            " XP")));
-    return (react_1.default.createElement(StyledUserInfoExpTab, null,
-        react_1.default.createElement(_system_1.Flex, { className: "info_wrapper" },
-            react_1.default.createElement(image_1.default, { src: "".concat(userPic !== null && userPic !== void 0 ? userPic : '/rewardsPage/defaultUserPic.svg'), width: 96, height: 96, alt: "User profile picture", className: "user_pic" }),
-            react_1.default.createElement(_system_1.Flex, { flexDirection: "column", className: 'user_credential_wrapper' },
-                react_1.default.createElement("p", { className: "user_name" }, userName !== null && userName !== void 0 ? userName : 'User Name'),
-                react_1.default.createElement("span", { className: "user_wallet" }, userWallet !== null && userWallet !== void 0 ? userWallet : '0xcd292...3268'),
-                react_1.default.createElement(_system_1.Flex, { className: 'user_exp mobile' }, expContent))),
-        react_1.default.createElement(_system_1.Flex, { flexDirection: "column", className: 'exp_wrapper', justifyContent: 'center' },
-            react_1.default.createElement(_system_1.Flex, { className: 'user_exp desktop' }, expContent),
-            react_1.default.createElement(prograssBar_1.default, { percent: userExpPercent, height: 16, isUserTab: true }),
-            react_1.default.createElement(_system_1.Flex, { justifyContent: "space-between", className: 'user_lvl_block', alignItems: "center" },
-                react_1.default.createElement("p", { className: "exp_current_lvl" },
-                    "Level ", userLevel !== null && userLevel !== void 0 ? userLevel : '4'),
-                react_1.default.createElement("p", { className: "exp_left_untill" }, (_b = (totalExpInLevel && totalExpInLevel)) !== null && _b !== void 0 ? _b : '4,067',
-                    " XP to",
-                    ' ',
-                    react_1.default.createElement("span", { className: "exp_next_lvl" },
-                        "Level ", (_c = Number(userLevel) + 1) !== null && _c !== void 0 ? _c : '5'))))));
+    var expContent = (<>
+      <image_1.default src={'/rewardsPage/XP_logo.svg'} alt="Experience logo" width={28} height={28} className="exp_logo"/>
+      <p className={"exp_value"}>{userExp} XP</p>
+    </>);
+    return (<StyledUserInfoExpTab>
+      <_system_1.Flex className="info_wrapper">
+        <image_1.default src={"".concat(userPic !== null && userPic !== void 0 ? userPic : '/rewardsPage/defaultUserPic.svg')} width={96} height={96} alt="User profile picture" className="user_pic"/>
+        <_system_1.Flex flexDirection="column" className={'user_credential_wrapper'}>
+          <p className={"user_name"}>{userName !== null && userName !== void 0 ? userName : 'User Name'}</p>
+          <span className={"user_wallet"}>
+            {userWallet !== null && userWallet !== void 0 ? userWallet : '0xcd292...3268'}
+          </span>
+          <_system_1.Flex className={'user_exp mobile'}>{expContent}</_system_1.Flex>
+        </_system_1.Flex>
+      </_system_1.Flex>
+      <_system_1.Flex flexDirection="column" className={'exp_wrapper'} justifyContent={'center'}>
+        <_system_1.Flex className={'user_exp desktop'}>{expContent}</_system_1.Flex>
+        <prograssBar_1.default percent={userExpPercent} height={16} isUserTab={true}/>
+        <_system_1.Flex justifyContent="space-between" className={'user_lvl_block'} alignItems="center">
+          <p className={"exp_current_lvl"}>Level {userLevel !== null && userLevel !== void 0 ? userLevel : '4'}</p>
+          <p className={"exp_left_untill"}>
+            {(_b = (totalExpInLevel && totalExpInLevel)) !== null && _b !== void 0 ? _b : '4,067'} XP to{' '}
+            <span className={"exp_next_lvl"}>
+              Level {(_c = Number(userLevel) + 1) !== null && _c !== void 0 ? _c : '5'}
+            </span>
+          </p>
+        </_system_1.Flex>
+      </_system_1.Flex>
+    </StyledUserInfoExpTab>);
 };
 // Export
 exports.default = UserInfoExpTab;