@ludo.ninja/components 1.1.6 → 1.1.8

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

@@ -1,74 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import Image from 'next/image';
-import process from 'process';
-import styled from 'styled-components';
-import { BlockChainEntity } from '@ludo.ninja/core';
-import { AccentColor, BlackColor } from '@ludo.ninja/ui/build/styles/colors';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { shortenedText } from '@ludo.ninja/utils';
-import { useUserStore } from '@/modules/user/store';
-import { useUiStore } from '@/store/ui';
-import useFetchUserWallets from '@/api/server-identities/queries/useFetchUserWallets';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import MyWallets from '@/components/myWallets';
-import Palete from '@/system/Palete';
-import { Flex, H5 } from '@system';
-import { SmallText } from '@system';
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { getStaticENVDomain } from '@/utils/env';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import { dmsansFontVarCss } from '@/fonts/vars';
-import PlusIcon from '@/public/wallets/plus.svg';
-// Styles
-var StyledProfileWallets = styled.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"])), dmsansFontVarCss.css, BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(12), adaptiveValueCalc(12), adaptiveValueCalc(13), adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(16), adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(16));
-// Component
-export var ProfileWallets = function () {
-    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
-    var getUser = useUserStore(function (state) { return state.user; });
-    var openModalSidebarPortal = useUiStore(function (state) { return state.openModalSidebarPortal; });
-    var userWallets = useFetchUserWallets({
-        userId: getUser === null || getUser === void 0 ? void 0 : getUser.userId,
-    }).userWallets;
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    var renderUserWallets = function () {
-        return userWallets === null || userWallets === void 0 ? void 0 : userWallets.map(function (userWallet) {
-            var blockChain = new BlockChainEntity(userWallet.blockchain);
-            return (<div key={userWallet.address} className={"wallet_item"}>
-          <Image src={blockChain.getBlockChainIconRegular({
-                    domain: getStaticENVDomain(),
-                })} className={'icon'} width={16} height={16} alt={blockChain.getBlockChainIconRegular({
-                    domain: getStaticENVDomain(),
-                })}/>
-          {shortenedText(userWallet === null || userWallet === void 0 ? void 0 : userWallet.address)}
-        </div>);
-        });
-    };
-    if (!isSignedIn)
-        return null;
-    var user = new URLSearchParams(getUser).toString();
-    return (<StyledProfileWallets>
-      <Palete>
-        <Flex justifyContent="space-between" alignItems="center">
-          <H5 color={BlackColor}>Wallets</H5>
-          <div className={'manageBtn'} onClick={function () { return openModalSidebarPortal(<MyWallets />); }}>
-            <SmallText color={AccentColor}>Manage</SmallText>
-          </div>
-        </Flex>
-        <div className={'wallets'}>{renderUserWallets()}</div>
-        <div className={'add_wallets'} onClick={function () {
-            window.open("".concat(process.env.NEXT_PUBLIC_AUTH_HOST, "/add_wallets/?").concat(user, "&fallback_url=").concat(window.location.href.replace(/\s/g, '')), '_self');
-        }}>
-          <div className={'icon'}>
-            <PlusIcon style={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}/>
-          </div>
-
-          <SmallText color={AccentColor}>Add new</SmallText>
-        </div>
-      </Palete>
-    </StyledProfileWallets>);
-};
-var templateObject_1;

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

@@ -1,9 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { 
-// profileJSONLD,
-ProfileInfo, ProfilePageHead, } from '@/components/profile';
-// Components
-export var ProfileWrapper = function (_a) {
-    var profile = _a.profile, url = _a.url, children = _a.children;
-    return (_jsxs(_Fragment, { children: [_jsx(ProfilePageHead, { userUrl: url, profile: profile }), _jsx(ProfileInfo, { profile: profile }), children] }));
-};

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import { 
-// profileJSONLD,
-ProfileInfo, ProfilePageHead, } from '@/components/profile';
-// Components
-export var ProfileWrapper = function (_a) {
-    var profile = _a.profile, url = _a.url, children = _a.children;
-    return (<>
-      <ProfilePageHead userUrl={url} profile={profile}/>
-
-      <ProfileInfo profile={profile}/>
-
-      {children}
-
-      {/*<script*/}
-      {/*  type="application/ld+json"*/}
-      {/*  dangerouslySetInnerHTML={profileJSONLD(profile as schema.IProfile, '')}*/}
-      {/*/>*/}
-    </>);
-};

package/dist/components/registrationPage/index.js

@@ -1,3 +0,0 @@
-import RegistrationSelectBox from '@/components/registrationPage/registrationSelectBox';
-import RegistrationSelection from '@/components/registrationPage/registrationSelection';
-export { RegistrationSelection, RegistrationSelectBox };

package/dist/components/registrationPage/index.jsx

@@ -1,3 +0,0 @@
-import RegistrationSelectBox from '@/components/registrationPage/registrationSelectBox';
-import RegistrationSelection from '@/components/registrationPage/registrationSelection';
-export { RegistrationSelection, RegistrationSelectBox };

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

@@ -1,18 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { BlackColor, WhiteColor } from '@/styles/colors';
-var StyledRegistrationSelectBox = styled.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); }, BlackColor, WhiteColor, WhiteColor);
-var RegistrationSelectBox = function (_a) {
-    var name = _a.name, image = _a.image, selected = _a.selected, onClick = _a.onClick;
-    return (_jsx(StyledRegistrationSelectBox, { isSelected: selected, image: image, onClick: function () { return onClick(name); }, children: _jsx("h2", { className: 'text', children: name }) }));
-};
-export default RegistrationSelectBox;
-var templateObject_1;

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

@@ -1,20 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { BlackColor, WhiteColor } from '@/styles/colors';
-var StyledRegistrationSelectBox = styled.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); }, BlackColor, WhiteColor, WhiteColor);
-var RegistrationSelectBox = function (_a) {
-    var name = _a.name, image = _a.image, selected = _a.selected, onClick = _a.onClick;
-    return (<StyledRegistrationSelectBox isSelected={selected} image={image} onClick={function () { return onClick(name); }}>
-      <h2 className={'text'}>{name}</h2>
-    </StyledRegistrationSelectBox>);
-};
-export default RegistrationSelectBox;
-var templateObject_1;

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

@@ -1,27 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { MainText } from '@ludo.ninja/ui';
-import { AccentColor } from '@ludo.ninja/ui/build/styles/colors';
-import MainButton from '@ludo.ninja/ui/build/system/Buttons/MainButton';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, TextGrayColor } from '@/styles/colors';
-import { RegistrationSelectBox } from '@/components/registrationPage';
-import { Box, Flex, H1, H3 } from '@system';
-// Styles
-var StyledCaption = styled(H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 24px;\n"], ["\n  font-size: 24px;\n"])));
-var StyledRegistrationSelection = styled.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"])), 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 (_jsxs(StyledRegistrationSelection, { children: [_jsx("div", { className: "info", children: _jsxs(Box, { children: [_jsxs(Flex, { justifyContent: 'center', children: [_jsx(StyledCaption, { color: AccentColor, mr: 10, children: "Step ".concat(step, "/").concat(maxSteps, " - ") }), _jsx(StyledCaption, { color: BlackColor, children: title })] }), _jsx(H3, { color: TextGrayColor, mt: 16, mb: 4, fontSize: 18, textAlign: 'center', children: subtitle }), _jsx(MainText, { fontSize: 13, textAlign: 'center', color: TextGrayColor, children: text })] }) }), _jsxs("div", { className: "content", children: [_jsx("div", { className: "content-values", children: values === null || values === void 0 ? void 0 : values.map(function (_a) {
-                            var name = _a.name, imageUrl = _a.imageUrl;
-                            return (_jsx(RegistrationSelectBox, { name: name, image: imageUrl, selected: selectedNames.includes(name), onClick: onClick }, name));
-                        }) }), _jsx("div", { className: "content-next", children: _jsx(MainButton, { onClick: onSaveClick, variant: "primaryM", text: saveValue }) })] })] }));
-};
-// Export
-export default RegistrationSelection;
-var templateObject_1, templateObject_2;

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

@@ -1,52 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { MainText } from '@ludo.ninja/ui';
-import { AccentColor } from '@ludo.ninja/ui/build/styles/colors';
-import MainButton from '@ludo.ninja/ui/build/system/Buttons/MainButton';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, TextGrayColor } from '@/styles/colors';
-import { RegistrationSelectBox } from '@/components/registrationPage';
-import { Box, Flex, H1, H3 } from '@system';
-// Styles
-var StyledCaption = styled(H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 24px;\n"], ["\n  font-size: 24px;\n"])));
-var StyledRegistrationSelection = styled.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"])), 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 (<StyledRegistrationSelection>
-    <div className="info">
-      <Box>
-        <Flex justifyContent={'center'}>
-          <StyledCaption color={AccentColor} mr={10}>{"Step ".concat(step, "/").concat(maxSteps, " - ")}</StyledCaption>
-          <StyledCaption color={BlackColor}>{title}</StyledCaption>
-        </Flex>
-        <H3 color={TextGrayColor} mt={16} mb={4} fontSize={18} textAlign={'center'}>
-          {subtitle}
-        </H3>
-        <MainText fontSize={13} textAlign={'center'} color={TextGrayColor}>
-          {text}
-        </MainText>
-      </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 (<RegistrationSelectBox key={name} name={name} image={imageUrl} selected={selectedNames.includes(name)} onClick={onClick}/>);
-        })}
-      </div>
-
-      <div className="content-next">
-        <MainButton onClick={onSaveClick} variant="primaryM" text={saveValue}/>
-      </div>
-    </div>
-  </StyledRegistrationSelection>);
-};
-// Export
-export default RegistrationSelection;
-var templateObject_1, templateObject_2;

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

@@ -1,98 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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));
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { WhiteColor } from '@/styles/colors';
-import { Flex, H3, H5 } from '@system';
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import { dmsansFontVarCss, poppinsFontVarCss } from '@/fonts/vars';
-import ArrowIcon from '@/public/rewardsPage/arrow_up_light.svg';
-// Styles
-var StyledFAQRewards = styled(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;
-}, mediaQuery.maxWidthTablet, dmsansFontVarCss.css, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.grayText;
-}, mediaQuery.maxWidthTablet, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(720), adaptiveValueCalc(80), adaptiveValueCalc(15), adaptiveValueCalc(24));
-var StyledArrowIcon = styled.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)'); }, mediaQuery.minWidthFourK, adaptiveValueCalc(38), adaptiveValueCalc(38));
-var StyledTitleWrapper = styled(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"])), mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(70));
-var StyledFlexDivider = styled(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;
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(1), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.blankProgressBar;
-});
-var TitleFAQ = styled(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"])), poppinsFontVarCss.css, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.naturalWhite;
-}, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(15));
-var AccordionTitle = styled(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"])), WhiteColor, poppinsFontVarCss.css, mediaQuery.minWidthFourK, 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 = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (_jsx(ArrowIcon, { style: getAdaptiveScale({
-            windowDimensions: windowDimensions,
-            currentSize: 1,
-        }) }));
-};
-var FAQRewards = function () {
-    var _a = 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 (_jsxs(StyledFAQRewards, { children: [_jsx(TitleFAQ, { children: "Frequently Asked Questions" }), _jsx(Flex, { flexDirection: "column", width: "100%", children: FAQ_ITEMS.map(function (_a) {
-                    var id = _a.id, title = _a.title, description = _a.description;
-                    return (_jsxs(StyledFlexDivider, { children: [_jsxs(StyledTitleWrapper, { children: [_jsx(AccordionTitle, { children: title }), _jsx(StyledArrowIcon, { isShow: openTopics[id], onClick: function () { return toggleDescription(id); }, children: _jsx(ArrowIconResize, {}) })] }), _jsx("p", { className: "faq_desc ".concat(openTopics[id] ? 'open' : ''), children: description })] }, id));
-                }) })] }));
-};
-// Export
-export default FAQRewards;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -1,112 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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));
-};
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { WhiteColor } from '@/styles/colors';
-import { Flex, H3, H5 } from '@system';
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import { dmsansFontVarCss, poppinsFontVarCss } from '@/fonts/vars';
-import ArrowIcon from '@/public/rewardsPage/arrow_up_light.svg';
-// Styles
-var StyledFAQRewards = styled(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;
-}, mediaQuery.maxWidthTablet, dmsansFontVarCss.css, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.grayText;
-}, mediaQuery.maxWidthTablet, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(720), adaptiveValueCalc(80), adaptiveValueCalc(15), adaptiveValueCalc(24));
-var StyledArrowIcon = styled.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)'); }, mediaQuery.minWidthFourK, adaptiveValueCalc(38), adaptiveValueCalc(38));
-var StyledTitleWrapper = styled(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"])), mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(70));
-var StyledFlexDivider = styled(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;
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(1), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.blankProgressBar;
-});
-var TitleFAQ = styled(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"])), poppinsFontVarCss.css, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.naturalWhite;
-}, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(15));
-var AccordionTitle = styled(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"])), WhiteColor, poppinsFontVarCss.css, mediaQuery.minWidthFourK, 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 = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (<ArrowIcon style={getAdaptiveScale({
-            windowDimensions: windowDimensions,
-            currentSize: 1,
-        })}/>);
-};
-var FAQRewards = function () {
-    var _a = 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 (<StyledFAQRewards>
-      <TitleFAQ>Frequently Asked Questions</TitleFAQ>
-      <Flex flexDirection="column" width="100%">
-        {FAQ_ITEMS.map(function (_a) {
-            var id = _a.id, title = _a.title, description = _a.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>);
-        })}
-      </Flex>
-    </StyledFAQRewards>);
-};
-// Export
-export default FAQRewards;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -1,44 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { WhiteColor } from '@/styles/colors';
-import { Flex, H3 } from '@system';
-import { dmsansFontVarCss, poppinsFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledClarifications = styled(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;
-}, mediaQuery.maxWidthTablet, mediaQuery.mobile, dmsansFontVarCss.css, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.grayText;
-}, mediaQuery.maxWidthTablet, mediaQuery.mobile, poppinsFontVarCss.css, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.naturalWhite;
-}, mediaQuery.mobile, mediaQuery.mobile);
-var StyledFlex = styled(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 (_jsxs(StyledClarifications, { children: [_jsxs(Flex, { flexDirection: "column", width: "100%", style: { gap: '16px' }, children: [_jsx(H3, { style: {
-                            lineHeight: '1.5',
-                            fontWeight: 600,
-                            fontSize: '2.4em',
-                            textAlign: 'center',
-                            fontFamily: poppinsFontVarCss.css,
-                        }, color: WhiteColor, children: "How does it work?" }), _jsx("p", { className: "clar_desc", children: "Further developing and growing NFT Trader for our team has been an exciting journey so far." })] }), _jsx(Flex, { flexDirection: "column", width: "100%", children: goalsArr && goalsArr.length > 0
-                    ? goalsArr.map(function (_a) {
-                        var desc = _a.desc, expPerTime = _a.expPerTime;
-                        return (_jsxs(StyledFlex, { children: [_jsx("p", { className: "goal_desc", children: desc }), _jsx("p", { className: "goal_exp", children: expPerTime })] }, desc + expPerTime));
-                    })
-                    : null })] }));
-};
-//Export
-export default Clarifications;
-var templateObject_1, templateObject_2;

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

@@ -1,59 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from 'styled-components';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { WhiteColor } from '@/styles/colors';
-import { Flex, H3 } from '@system';
-import { dmsansFontVarCss, poppinsFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledClarifications = styled(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;
-}, mediaQuery.maxWidthTablet, mediaQuery.mobile, dmsansFontVarCss.css, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.grayText;
-}, mediaQuery.maxWidthTablet, mediaQuery.mobile, poppinsFontVarCss.css, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.naturalWhite;
-}, mediaQuery.mobile, mediaQuery.mobile);
-var StyledFlex = styled(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 (<StyledClarifications>
-      <Flex flexDirection="column" width="100%" style={{ gap: '16px' }}>
-        <H3 style={{
-            lineHeight: '1.5',
-            fontWeight: 600,
-            fontSize: '2.4em',
-            textAlign: 'center',
-            fontFamily: poppinsFontVarCss.css,
-        }} color={WhiteColor}>
-          How does it work?
-        </H3>
-        <p className={"clar_desc"}>
-          Further developing and growing NFT Trader for our team has been an
-          exciting journey so far.
-        </p>
-      </Flex>
-      <Flex flexDirection="column" width="100%">
-        {goalsArr && goalsArr.length > 0
-            ? goalsArr.map(function (_a) {
-                var desc = _a.desc, expPerTime = _a.expPerTime;
-                return (<StyledFlex key={desc + expPerTime}>
-                <p className={"goal_desc"}>{desc}</p>
-                <p className={"goal_exp"}>{expPerTime}</p>
-              </StyledFlex>);
-            })
-            : null}
-      </Flex>
-    </StyledClarifications>);
-};
-//Export
-export default Clarifications;
-var templateObject_1, templateObject_2;

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

@@ -1,24 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { Flex } from '@system';
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import Logo from '@/public/logo/main_logo_dark.svg';
-// Styles
-var StyledBottomLogo = styled(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"])), mediaQuery.maxWidthTablet, mediaQuery.mobile);
-// Component
-var BottomLogo = function () {
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (_jsx(StyledBottomLogo, { children: _jsx(Logo, { className: 'bottom_logo', style: getAdaptiveScale({
-                windowDimensions: windowDimensions,
-                currentSize: 0.8,
-            }) }) }));
-};
-// Export
-export default BottomLogo;
-var templateObject_1;