@ludo.ninja/components 1.7.5 → 1.7.6

package/dist/components/forms/form/index.jsx

@@ -1,118 +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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useEffect } from 'react';
-import { Spinner } from 'react-bootstrap';
-import { Controller, useForm } from 'react-hook-form';
-import styled from 'styled-components';
-import { TextGrayColor } from '@ludo.ninja/ui/build/styles/colors';
-import { MainText } from '@ludo.ninja/ui/build/system/Text';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import MainButton from '@/system/Buttons/MainButton';
-import { BasicTextArea, CheckboxInput, Input } from '@/system/Forms';
-import DatePicker from '@/system/Forms/DatePicker';
-import BasicRadioInput from '@/system/Forms/RadioInput';
-import { Flex, H1, H5 } from '@system';
-var Title = styled(H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  text-align: center;\n"], ["\n  margin-bottom: 24px;\n  text-align: center;\n"])));
-var Description = styled(MainText)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  text-align: justify;\n"], ["\n  color: ", ";\n  text-align: justify;\n"])), TextGrayColor);
-var Wrapper = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"], ["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"])), mediaQuery.tablet);
-var FormWrapper = styled.form(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"], ["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"])), mediaQuery.desktop, mediaQuery.tablet);
-var InputTitle = styled(H5)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-var RadioInput = styled(BasicRadioInput)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), TextGrayColor);
-var StyledInputGroup = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n"], ["\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n"])));
-var Form = function (_a) {
-    var props = __rest(_a, []);
-    var inputs = props.inputs, onSubmit = props.onSubmit, submitLoading = props.submitLoading, formDescription = props.formDescription, formTitle = props.formTitle, initialValues = props.initialValues;
-    var _b = useForm({
-        mode: 'all',
-        defaultValues: initialValues,
-    }), register = _b.register, _c = _b.formState, errors = _c.errors, isDirty = _c.isDirty, isValid = _c.isValid, handleSubmit = _b.handleSubmit, reset = _b.reset, control = _b.control, setFocus = _b.setFocus, formState = _b.formState;
-    useEffect(function () {
-        reset();
-    }, [inputs, reset]);
-    useEffect(function () {
-        if (formState.isSubmitSuccessful) {
-            reset();
-        }
-    }, [formState, reset]);
-    var getInput = function (inputProps) {
-        var _a, _b;
-        var dataProp = {
-            labelText: inputProps.label || '',
-            name: inputProps.name,
-            placeHolder: inputProps.placeholder || '',
-        };
-        var inputErrors = errors === null || errors === void 0 ? void 0 : errors[inputProps.name];
-        var errorProp = {
-            isNeedShowError: Boolean(inputErrors),
-            message: inputErrors ? inputErrors.message : '',
-        };
-        var registerProp = register(inputProps.name, inputProps.validations);
-        switch (inputProps.type) {
-            case 'textArea':
-                return (<BasicTextArea register={registerProp} error={errorProp} data={dataProp} isNeedBiggerArea={false}/>);
-            case 'checkbox':
-                return (<>
-            {(_a = inputProps.options) === null || _a === void 0 ? void 0 : _a.map(function (option) {
-                        var isCheckboxWithInput = option.value === 'other';
-                        var registerTextInput = isCheckboxWithInput
-                            ? register("".concat(inputProps.name, "-other-checkbox"))
-                            : undefined;
-                        return (<CheckboxInput key={option.value} register={registerProp} error={errorProp} data={dataProp} label={option.desc} value={option.value} withInput={isCheckboxWithInput} innerTextInputRef={registerTextInput}/>);
-                    })}
-          </>);
-            case 'radio':
-                return (<>
-            {(_b = inputProps.options) === null || _b === void 0 ? void 0 : _b.map(function (option) {
-                        var isRadioWithInput = option.value === 'other';
-                        var registerTextInput = isRadioWithInput
-                            ? register("".concat(inputProps.name, "-other-radio"))
-                            : undefined;
-                        return (<Controller key={option.desc} name={inputProps.name} control={control} render={function (_a) {
-                                var field = _a.field;
-                                return (<RadioInput key={option.value} radioLabel={option.desc} radioValue={option.value} handleChange={field.onChange} radioChecked={field.value === option.value} withInput={isRadioWithInput} innerTextInputRef={registerTextInput} setFocus={setFocus}/>);
-                            }}/>);
-                    })}
-          </>);
-            case 'date':
-                return (<DatePicker register={registerProp} error={errorProp} control={control} name={inputProps.name}/>);
-            default:
-                return (<Input register={registerProp} error={errorProp} data={dataProp}/>);
-        }
-    };
-    return (<Wrapper>
-      <FormWrapper onSubmit={handleSubmit(onSubmit)}>
-        <Title>{formTitle}</Title>
-        <Description>{formDescription}</Description>
-        {inputs.map(function (input) {
-            var _a;
-            return (<StyledInputGroup key={input.name}>
-            <InputTitle>
-              {((_a = input.validations) === null || _a === void 0 ? void 0 : _a.required) ? '*' : ''}
-              {input.label}
-            </InputTitle>
-            {getInput(input)}
-          </StyledInputGroup>);
-        })}
-
-        <Flex justifyContent="space-between" style={{ marginTop: 44 }}>
-          <MainButton onClick={function (e) { var _a; return (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.blur(); }} disabled={!isDirty || !isValid} variant="primaryM" text={submitLoading ? <Spinner variant="light"/> : 'Submit'} type={'submit'}/>
-          <MainButton onClick={function (e) { var _a; return (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.blur(); }} disabled={!isDirty} variant="secondary" text={submitLoading ? <Spinner variant="light"/> : 'Clear Form'} type={'reset'}/>
-        </Flex>
-      </FormWrapper>
-    </Wrapper>);
-};
-export default Form;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/forms/formsNavigation/index.jsx

@@ -1,54 +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, { useState } from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import styled from 'styled-components';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BackgroundColorLight, BlackColor, InactiveButtonColor, TextGrayColor, } from '@/styles/colors';
-import { FormsNavigationTabs } from '@/components/forms/types';
-import { Flex } from '@system';
-import BackIcon from '@/public/settings_page/back.svg';
-import MenuIcon from '@/public/settings_page/burger_menu.svg';
-var NAVIGATION_TABS = [
-    { slug: FormsNavigationTabs.opportunity, label: 'opportunity Submission' },
-    { slug: FormsNavigationTabs.contactSupport, label: 'Contact Ludo Support' },
-    {
-        slug: FormsNavigationTabs.registrationRequest,
-        label: 'Registration Invite Request',
-    },
-    { slug: FormsNavigationTabs.report, label: 'Content Report Form' },
-    { slug: FormsNavigationTabs.feedback, label: 'User Feedback' },
-    { slug: FormsNavigationTabs.partnership, label: 'Partnership Inquiry Form' },
-    {
-        slug: FormsNavigationTabs.investor,
-        label: 'Investor Relations Inquiry Form',
-    },
-];
-var StyledFlex = styled(Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"], ["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"])), mediaQuery.tablet);
-var Wrapper = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"], ["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"])), mediaQuery.tablet, BackgroundColorLight);
-var List = styled.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"], ["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"])), mediaQuery.tablet, TextGrayColor, InactiveButtonColor, mediaQuery.tablet, InactiveButtonColor, BlackColor, mediaQuery.tablet);
-var FormsNavigation = function () {
-    var _a;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var router = useRouter();
-    var activeTab = (_a = router === null || router === void 0 ? void 0 : router.query) === null || _a === void 0 ? void 0 : _a.formId;
-    return (<>
-      <StyledFlex isOpen={isOpen}>
-        {isOpen ? (<BackIcon onClick={function () { return setIsOpen(false); }}/>) : (<MenuIcon onClick={function () { return setIsOpen(true); }}/>)}
-      </StyledFlex>
-      <Wrapper className={"mobile_menu ".concat(isOpen ? 'show' : 'hide')}>
-        <List>
-          {NAVIGATION_TABS.map(function (tab) { return (<li onClick={function () { return setIsOpen(false); }} key={tab.slug} className={"".concat(activeTab === tab.slug ? 'activeTab' : '', " ")}>
-              <Link href={"/forms/".concat(tab.slug)} className={'link'}>
-                <span>{tab.label}</span>
-              </Link>
-            </li>); })}
-        </List>
-      </Wrapper>
-    </>);
-};
-export default FormsNavigation;
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/gradientLabel/index.jsx

@@ -1,19 +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 BoxShadow from '@/styles/mixins/boxShadow';
-import BoxTransform from '@/styles/mixins/boxTransform';
-import { H3 } from '@system';
-import { poppinsFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledGradientLabel = styled(H3)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  user-select: none;\n  border-radius: 24px;\n  ", ";\n  ", ";\n  display: inline-block;\n  padding: 5px 16px;\n  background: linear-gradient(\n    89deg,\n    rgba(190, 249, 209, 0.6) 6.88%,\n    rgba(98, 218, 255, 0.6) 53.34%,\n    rgba(171, 228, 251, 0.6) 93.43%\n  );\n  color: #5748bc;\n"], ["\n  font-family: ", ";\n  user-select: none;\n  border-radius: 24px;\n  ", ";\n  ", ";\n  display: inline-block;\n  padding: 5px 16px;\n  background: linear-gradient(\n    89deg,\n    rgba(190, 249, 209, 0.6) 6.88%,\n    rgba(98, 218, 255, 0.6) 53.34%,\n    rgba(171, 228, 251, 0.6) 93.43%\n  );\n  color: #5748bc;\n"])), poppinsFontVarCss.css, BoxShadow, BoxTransform);
-// Component
-var GradientLabel = function () {
-    return <StyledGradientLabel>5 invites</StyledGradientLabel>;
-};
-// Export
-export default GradientLabel;
-var templateObject_1;

package/dist/components/headers/components/headerExperienceLabel/index.jsx

@@ -1,28 +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 { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { useUserStore } from '@/modules/user/store';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import ExperienceLabel from '@/system/Labels/ExperienceLabel';
-// Styles
-var StyledHeaderExperienceLabel = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 20px;\n  ", " {\n    margin-right: ", ";\n  }\n"], ["\n  margin-right: 20px;\n  ", " {\n    margin-right: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(20));
-// Component
-var HeaderExperienceLabel = function (_a) {
-    var userId = _a.userId;
-    var _b = useUserStore(function (state) { return ({
-        userExp: state.userExp,
-        isLoadingExp: state.isLoadingExp,
-        errorExp: state.errorExp,
-    }); }), userExp = _b.userExp, isLoadingExp = _b.isLoadingExp, errorExp = _b.errorExp;
-    if (!userId)
-        return null;
-    return (<StyledHeaderExperienceLabel>
-      <ExperienceLabel value={userExp.xps} link={"/rewards/".concat(userId)} loading={isLoadingExp || !!errorExp}/>
-    </StyledHeaderExperienceLabel>);
-};
-// Export
-export default HeaderExperienceLabel;
-var templateObject_1;

package/dist/components/headers/components/headerUserPic/index.jsx

@@ -1,23 +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 { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import UserPic from '@/system/Img/Userpic';
-// Styles
-var StyledHeaderUserPick = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 24px;\n\n  ", " {\n    margin-right: 8px;\n  }\n  ", " {\n    margin-right: ", ";\n  }\n"], ["\n  margin-right: 24px;\n\n  ", " {\n    margin-right: 8px;\n  }\n  ", " {\n    margin-right: ", ";\n  }\n"])), mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(24));
-// Component
-var HeaderUserPick = function (_a) {
-    var userId = _a.userId;
-    if (!userId)
-        return null;
-    return (<StyledHeaderUserPick>
-      <UserPic width={32} height={32} userId={userId} isNeedBoxTransform={true}/>
-    </StyledHeaderUserPick>);
-};
-// Export
-export default HeaderUserPick;
-var templateObject_1;

package/dist/components/headers/header/index.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import { Header as HeaderUi } from '@ludo.ninja/ui/build/components/header';
-import { useUserStore } from '@/modules/user/store';
-import { useUiStore } from '@/store/ui';
-import HeaderExperienceLabel from '@/components/headers/components/headerExperienceLabel';
-import HeaderUserPick from '@/components/headers/components/headerUserPic';
-import { redirectToLoginWindow } from '@/utils/auth';
-// Component
-var Header = function () {
-    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
-    var getUser = useUserStore(function (state) { return state.user; });
-    var openSidebar = useUiStore(function (state) { return state.openSidebar; });
-    return (<HeaderUi isAuthorized={isSignedIn} handle={{
-            login: redirectToLoginWindow,
-            openSidebar: openSidebar,
-        }} slots={{
-            headerExpLabel: (<HeaderExperienceLabel userId={(getUser === null || getUser === void 0 ? void 0 : getUser.userId) || ''}/>),
-            headerUserPick: <HeaderUserPick userId={(getUser === null || getUser === void 0 ? void 0 : getUser.userId) || ''}/>,
-            logoLinkComponent: function (_a) {
-                var children = _a.children;
-                return <Link href={'/'}>{children}</Link>;
-            },
-        }}/>);
-};
-// Export
-export default Header;

package/dist/components/headers/headerSearch/index.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import { Header as HeaderUi } from '@ludo.ninja/ui/build/components/header';
-import { useUserStore } from '@/modules/user/store';
-import { useUiStore } from '@/store/ui';
-import HeaderExperienceLabel from '@/components/headers/components/headerExperienceLabel';
-import HeaderUserPick from '@/components/headers/components/headerUserPic';
-import SearchSimpleInput from '@/components/search/searchSimpleInput';
-import { redirectToLoginWindow } from '@/utils/auth';
-import { isProd } from '@/utils/env';
-// Component
-var HeaderSearch = function (_a) {
-    var isProdENV = _a.isProdENV;
-    var openSidebar = useUiStore(function (state) { return state.openSidebar; });
-    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
-    var getUser = useUserStore(function (state) { return state.user; });
-    return (<HeaderUi isAuthorized={isSignedIn} handle={{
-            login: redirectToLoginWindow,
-            openSidebar: openSidebar,
-        }} slots={{
-            headerExpLabel: (<HeaderExperienceLabel userId={(getUser === null || getUser === void 0 ? void 0 : getUser.userId) || ''}/>),
-            headerUserPick: <HeaderUserPick userId={(getUser === null || getUser === void 0 ? void 0 : getUser.userId) || ''}/>,
-            logoLinkComponent: function (_a) {
-                var children = _a.children;
-                return <Link href={'/'}>{children}</Link>;
-            },
-            searchInput: function (_a) {
-                var setInputFocused = _a.setInputFocused;
-                // Todo seacrh pages, hide search input from header
-                return isProd({ ENV: isProdENV }) ? undefined : (<SearchSimpleInput onFocusHandler={setInputFocused}/>);
-            },
-        }} isSearchStyles isActivatedTheme/>);
-};
-// Export
-export default HeaderSearch;

package/dist/components/headers/headerSimple/index.jsx

@@ -1,30 +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 Link from 'next/link';
-import styled from 'styled-components';
-import { useScrollDirection } from '@ludo.ninja/utils';
-import { BackgroundColorLight } from '@/styles/colors';
-import { getWindowDimensions } from '@/utils/screen';
-// Styles
-var StyledHeaderSimple = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  z-index: 2;\n  padding: 38px 14px 14px 14px;\n  background: ", ";\n  transition: transform 0.5s ease, top 0.5s ease;\n  width: 92.67%;\n  margin: 0 auto;\n  top: 24px;\n  left: 42px;\n  right: 42px;\n  position: fixed;\n\n  &.up {\n    top: 0;\n    transition: top 0.4s ease-out;\n\n    @media (max-width: 767px) {\n      top: 0;\n    }\n  }\n\n  &.down {\n    top: -92px;\n    transition: top 0.4s ease-out;\n  }\n\n  .logo {\n    width: 116px;\n    height: 28px;\n    a {\n      height: 100%;\n      display: block;\n    }\n  }\n\n  @media (max-width: 767px) {\n    padding: 20px;\n    margin: 0;\n    width: 100%;\n    left: 0;\n    right: 0;\n\n    .logo {\n      width: 32px;\n      height: 32px;\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  z-index: 2;\n  padding: 38px 14px 14px 14px;\n  background: ", ";\n  transition: transform 0.5s ease, top 0.5s ease;\n  width: 92.67%;\n  margin: 0 auto;\n  top: 24px;\n  left: 42px;\n  right: 42px;\n  position: fixed;\n\n  &.up {\n    top: 0;\n    transition: top 0.4s ease-out;\n\n    @media (max-width: 767px) {\n      top: 0;\n    }\n  }\n\n  &.down {\n    top: -92px;\n    transition: top 0.4s ease-out;\n  }\n\n  .logo {\n    width: 116px;\n    height: 28px;\n    a {\n      height: 100%;\n      display: block;\n    }\n  }\n\n  @media (max-width: 767px) {\n    padding: 20px;\n    margin: 0;\n    width: 100%;\n    left: 0;\n    right: 0;\n\n    .logo {\n      width: 32px;\n      height: 32px;\n    }\n  }\n"])), BackgroundColorLight);
-// Component
-var HeaderSimple = function () {
-    var windowWidth = getWindowDimensions().windowWidth;
-    var renderDesktopLogoOrMobile = function () {
-        var isMobile = windowWidth <= 768;
-        return (<Image width={isMobile ? 31 : 116} height={isMobile ? 32 : 28} priority={true} src={isMobile ? '/logo/mobile_logo.svg' : '/logo/main_logo.svg'} alt="Ludo - a right place for NFT art"/>);
-    };
-    var scrollDirection = useScrollDirection();
-    return (<StyledHeaderSimple className={scrollDirection}>
-      <div className={'logo'}>
-        <Link href={'/'}>{renderDesktopLogoOrMobile()}</Link>
-      </div>
-    </StyledHeaderSimple>);
-};
-// Export
-export default HeaderSimple;
-var templateObject_1;

package/dist/components/inviteCodesPage/components/index.jsx

@@ -1,5 +0,0 @@
-import InviteCodes from '@/components/inviteCodesPage/components/inviteCodes';
-import InviteCodeCaption from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption';
-import InviteCodeCopy from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeCopy';
-import InviteCodeDate from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeDate';
-export { InviteCodes, InviteCodeCaption, InviteCodeCopy, InviteCodeDate };

package/dist/components/inviteCodesPage/components/inviteCodes/index.jsx

@@ -1,19 +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 InviteCodeLoader from '@/components/inviteCodesPage/components/inviteCodes/inviteCode/loader';
-// Styles
-var StyledInviteCodes = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow-x: auto;\n  padding: 5px 10px 0 0;\n"], ["\n  overflow-x: auto;\n  padding: 5px 10px 0 0;\n"])));
-// Component
-var InviteCodes = function (_a) {
-    var isLoading = _a.isLoading, children = _a.children;
-    if (isLoading)
-        return <InviteCodeLoader />;
-    return <StyledInviteCodes>{children}</StyledInviteCodes>;
-};
-// Export
-export default InviteCodes;
-var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCode/index.jsx

@@ -1,26 +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, TextDarkGrayColor, WhiteColor } from '@/styles/colors';
-import BoxShadow from '@/styles/mixins/boxShadow';
-import BoxTransform from '@/styles/mixins/boxTransform';
-import { H5 } from '@system';
-import { dmsansFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledInviteCode = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ", ";\n  border-radius: 22px;\n  padding: 12px 18px;\n  min-height: 22px;\n  margin-bottom: 8px;\n\n  .code {\n    color: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ", ";\n  border-radius: 22px;\n  padding: 12px 18px;\n  min-height: 22px;\n  margin-bottom: 8px;\n\n  .code {\n    color: ", ";\n  }\n"])), dmsansFontVarCss.css, function (props) { return (props.isCodeDisabled ? null : [BoxShadow, BoxTransform]); }, WhiteColor, function (props) {
-    return props.isCodeDisabled ? TextDarkGrayColor : BlackColor;
-});
-// Component
-var InviteCode = function (_a) {
-    var inviteCode = _a.inviteCode, children = _a.children;
-    return (<StyledInviteCode isCodeDisabled={inviteCode.isUsed}>
-      <H5 className={'code'}>{inviteCode.inviteCode}</H5>
-      {children}
-    </StyledInviteCode>);
-};
-// Export
-export default InviteCode;
-var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCode/loader/index.jsx

@@ -1,22 +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 Skeleton from 'react-loading-skeleton';
-import styled from 'styled-components';
-//Styles
-var StyledSkeleton = styled(Skeleton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 22px;\n  height: 44px;\n"], ["\n  border-radius: 22px;\n  height: 44px;\n"])));
-// Component
-var InviteCodeLoader = function () {
-    return (<>
-      <StyledSkeleton />
-      <StyledSkeleton style={{ marginTop: '8px' }}/>
-      <StyledSkeleton style={{ marginTop: '8px' }}/>
-      <StyledSkeleton style={{ marginTop: '8px' }}/>
-      <StyledSkeleton style={{ marginTop: '8px' }}/>
-    </>);
-};
-// Export
-export default InviteCodeLoader;
-var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/index.jsx

@@ -1,23 +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 } from '@/styles/colors';
-import InviteCodeCaptionLoader from '@/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/loader';
-import { H3 } from '@system';
-// Styles
-var StyledIInviteCodeCaption = styled(H3)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  user-select: none;\n"], ["\n  color: ", ";\n  user-select: none;\n"])), BlackColor);
-// Component
-var InviteCodeCaption = function (_a) {
-    var isLoading = _a.isLoading, text = _a.text, isNeedRender = _a.isNeedRender;
-    if (!isNeedRender)
-        return null;
-    if (isLoading)
-        return <InviteCodeCaptionLoader />;
-    return <StyledIInviteCodeCaption>{text}</StyledIInviteCodeCaption>;
-};
-// Export
-export default InviteCodeCaption;
-var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCaption/loader/index.jsx

@@ -1,16 +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 Skeleton from 'react-loading-skeleton';
-import styled from 'styled-components';
-//Styles
-var StyledSkeleton = styled(Skeleton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 22px;\n"], ["\n  height: 22px;\n"])));
-// Component
-var InviteCodeCaptionLoader = function () {
-    return <StyledSkeleton style={{ marginBottom: '16px' }}/>;
-};
-// Export
-export default InviteCodeCaptionLoader;
-var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeCopy/index.jsx

@@ -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 React from 'react';
-import styled from 'styled-components';
-import { AccentColor } from '@/styles/colors';
-import { H5 } from '@system';
-import { CopyButton } from '@/utils/copyBtn';
-// Styles
-var StyledInviteCodeCopy = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .copyBtn {\n    display: flex;\n    user-select: none;\n  }\n"], ["\n  .copyBtn {\n    display: flex;\n    user-select: none;\n  }\n"])));
-// Component
-var InviteCodeCopy = function (_a) {
-    var inviteCode = _a.inviteCode;
-    return (<StyledInviteCodeCopy>
-      <div className={'copyBtn'}>
-        <CopyButton value={inviteCode.inviteCode}>
-          <H5 style={{ marginLeft: '4px', cursor: 'pointer' }} color={AccentColor}>
-            Copy
-          </H5>
-        </CopyButton>
-      </div>
-    </StyledInviteCodeCopy>);
-};
-// Export
-export default InviteCodeCopy;
-var templateObject_1;

package/dist/components/inviteCodesPage/components/inviteCodes/inviteCodeDate/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 { ProgressColor } from '@/styles/colors';
-import { H5 } from '@system';
-// Styles
-var StyledInviteCodeActivatedDate = styled(H5)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 15px;\n  font-weight: 400;\n"], ["\n  color: ", ";\n  font-size: 15px;\n  font-weight: 400;\n"])), ProgressColor);
-// Component
-var InviteCodeActivatedDate = function (_a) {
-    var value = _a.value;
-    return (<StyledInviteCodeActivatedDate>
-      {"Activated on ".concat(value.toLocaleDateString('en-GB'))}
-    </StyledInviteCodeActivatedDate>);
-};
-// Export
-export default InviteCodeActivatedDate;
-var templateObject_1;

package/dist/components/inviteCodesPage/wrappers/index.jsx

@@ -1,4 +0,0 @@
-import ResumeCodes from '@/components/inviteCodesPage/wrappers/resumeCodes';
-import UnusedCodes from '@/components/inviteCodesPage/wrappers/unusedCodes';
-import UsedCodes from '@/components/inviteCodesPage/wrappers/usedCodes';
-export { ResumeCodes, UnusedCodes, UsedCodes };

package/dist/components/inviteCodesPage/wrappers/resumeCodes/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 React from 'react';
-import styled from 'styled-components';
-import { TextGray2Color } from '@ludo.ninja/ui/build/styles/colors';
-import { ASK_MORE_INVITES_GOOGLE_FORM } from '@ludo.ninja/utils';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { AccentColor, BlackColor, TextGrayColor, WhiteColor, } from '@/styles/colors';
-import BoxShadow from '@/styles/mixins/boxShadow';
-import BoxTransform from '@/styles/mixins/boxTransform';
-import { FH5 } from '@/styles/typography';
-import ResumeCodesLoader from '@/components/inviteCodesPage/wrappers/resumeCodes/loader';
-import MainButton from '@/system/Buttons/MainButton';
-import { H1, H3, MainText } from '@system';
-import { dmsansFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledResumeCodes = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  background-color: ", ";\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ", " {\n    padding: 20px;\n  }\n"], ["\n  ", ";\n  ", ";\n  background-color: ", ";\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ", " {\n    padding: 20px;\n  }\n"])), BoxShadow, BoxTransform, WhiteColor, mediaQuery.mobile);
-var StyledResumeCodesCaption = styled(H1)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"])), BlackColor, AccentColor);
-var StyledResumeCodesSubCaption = styled(H3)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 12px;\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"], ["\n  margin-top: 12px;\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"])), TextGrayColor, BlackColor);
-var StyledResumeCodesText = styled(MainText)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  margin-top: 24px;\n  color: ", ";\n"], ["\n  font-family: ", ";\n  margin-top: 24px;\n  color: ", ";\n"])), dmsansFontVarCss.css, TextGrayColor);
-var StyledAddCodesText = styled(MainText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  font-family: ", ";\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ", ";\n"], ["\n  ", ";\n  font-family: ", ";\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ", ";\n"])), FH5, dmsansFontVarCss.css, TextGray2Color);
-// Component
-var ResumeCodes = function (_a) {
-    var invites = _a.invites, activeInvites = _a.activeInvites, isLoading = _a.isLoading, userId = _a.userId;
-    if (isLoading)
-        return <ResumeCodesLoader />;
-    var isPlural = function (nmb) { return (nmb <= 1 ? 'invite' : 'invites'); };
-    return (<div>
-      <StyledResumeCodes>
-        <StyledResumeCodesCaption>
-          You have <strong>{"".concat(invites, " active ").concat(isPlural(invites))}</strong>
-        </StyledResumeCodesCaption>
-        <StyledResumeCodesSubCaption>
-          Your friends activated{' '}
-          <strong>{"".concat(activeInvites, " ").concat(isPlural(activeInvites))}</strong>{' '}
-          already
-        </StyledResumeCodesSubCaption>
-      </StyledResumeCodes>
-      <StyledResumeCodesText>
-        Invite your friends to be among the first who will collect Ludo XP,
-        which is the key to unlock a variety of benefits. From benefiting from
-        selected partner projects, such as airdrops or whitelisting spots, to
-        increased XP for your engagement and activities, such as referrals, to
-        an increased Ludo Rank. The more Ludo XP you gather, the richer your
-        experience.
-      </StyledResumeCodesText>
-      <StyledAddCodesText>
-        Do you have more friends to invite?
-      </StyledAddCodesText>
-      <MainButton onClick={function () {
-            return window.open("".concat(ASK_MORE_INVITES_GOOGLE_FORM).concat(userId), '_blank');
-        }} variant="primaryM" text={'Ask for more invites'}/>
-    </div>);
-};
-// Export
-export default ResumeCodes;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/inviteCodesPage/wrappers/resumeCodes/loader/index.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import Skeleton from 'react-loading-skeleton';
-// Component
-var ResumeCodesLoader = function () {
-    return (<>
-      <Skeleton style={{ borderRadius: '8px', padding: '24px 32px' }} height="100px"/>
-      <Skeleton style={{ borderRadius: '8px', marginTop: '24px' }} height="30px"/>
-      <Skeleton style={{ borderRadius: '8px', marginTop: '12px' }} height="20px"/>
-      <Skeleton style={{ borderRadius: '8px', marginTop: '12px' }} height="20px"/>
-    </>);
-};
-// Export
-export default ResumeCodesLoader;