@ludo.ninja/components 1.7.4 → 1.7.6

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

@@ -1,43 +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 { useToGalleryStore } from '@/hooks/useToGalleryAsset';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { WhiteColor } from '@/styles/colors';
-import IconWithButton from '@/system/Buttons/IconWithButton';
-import MainButton from '@/system/Buttons/MainButton';
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import PlusIcon from '@/public/wallets/plus.svg';
-// Styles
-var StyledProfileAddToGalleryBtns = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 100;\n  bottom: 32px;\n  background: ", ";\n  width: 300px;\n  height: 55px;\n  box-shadow: 0 4px 20px rgba(33, 21, 95, 0.1);\n  border-radius: 30px;\n  padding: 8px;\n\n  .addToGalleryBtns {\n    display: flex;\n    height: 100%;\n    width: 100%;\n\n    button:first-child {\n      margin-right: 12px;\n      width: 160px;\n      height: 40px;\n      padding: 0;\n    }\n\n    button:last-child {\n      width: 112px;\n      height: 40px;\n    }\n  }\n\n  .organizeBtn {\n    display: flex;\n    height: 100%;\n    width: 100%;\n\n    button {\n      width: 100%;\n    }\n  }\n\n  .icon {\n    path {\n      stroke: ", ";\n    }\n\n    margin-right: 5px;\n  }\n\n  ", " {\n    bottom: ", ";\n    width: ", ";\n    height: ", ";\n    box-shadow: 0 ", " ", "\n      rgba(33, 21, 95, 0.1);\n    border-radius: ", ";\n    padding: ", ";\n\n    .addToGalleryBtns {\n      button:first-child {\n        margin-right: ", ";\n        width: ", ";\n        height: ", ";\n      }\n\n      button:last-child {\n        width: ", ";\n        height: ", ";\n      }\n    }\n\n    .icon {\n      margin-right: ", ";\n    }\n  }\n"], ["\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 100;\n  bottom: 32px;\n  background: ", ";\n  width: 300px;\n  height: 55px;\n  box-shadow: 0 4px 20px rgba(33, 21, 95, 0.1);\n  border-radius: 30px;\n  padding: 8px;\n\n  .addToGalleryBtns {\n    display: flex;\n    height: 100%;\n    width: 100%;\n\n    button:first-child {\n      margin-right: 12px;\n      width: 160px;\n      height: 40px;\n      padding: 0;\n    }\n\n    button:last-child {\n      width: 112px;\n      height: 40px;\n    }\n  }\n\n  .organizeBtn {\n    display: flex;\n    height: 100%;\n    width: 100%;\n\n    button {\n      width: 100%;\n    }\n  }\n\n  .icon {\n    path {\n      stroke: ", ";\n    }\n\n    margin-right: 5px;\n  }\n\n  ", " {\n    bottom: ", ";\n    width: ", ";\n    height: ", ";\n    box-shadow: 0 ", " ", "\n      rgba(33, 21, 95, 0.1);\n    border-radius: ", ";\n    padding: ", ";\n\n    .addToGalleryBtns {\n      button:first-child {\n        margin-right: ", ";\n        width: ", ";\n        height: ", ";\n      }\n\n      button:last-child {\n        width: ", ";\n        height: ", ";\n      }\n    }\n\n    .icon {\n      margin-right: ", ";\n    }\n  }\n"])), WhiteColor, WhiteColor, mediaQuery.minWidthFourK, adaptiveValueCalc(32), adaptiveValueCalc(300), adaptiveValueCalc(55), adaptiveValueCalc(4), adaptiveValueCalc(20), adaptiveValueCalc(30), adaptiveValueCalc(8), adaptiveValueCalc(12), adaptiveValueCalc(160), adaptiveValueCalc(40), adaptiveValueCalc(112), adaptiveValueCalc(40), adaptiveValueCalc(5));
-// Component
-var PlusIconResize = function () {
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (<PlusIcon className={'icon'} style={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}/>);
-};
-var ProfileAddToGalleryBtns = function (_a) {
-    var addMethod = _a.addMethod;
-    var _b = useToGalleryStore(function (state) { return ({
-        resetCreationsInGallery: state.resetCreationsInGallery,
-        creationsToGallery: state.creationsToGallery,
-        isActiveGalleryMode: state.isActiveGalleryMode,
-    }); }), resetCreationsInGallery = _b.resetCreationsInGallery, creationsToGallery = _b.creationsToGallery, isActiveGalleryMode = _b.isActiveGalleryMode;
-    if (!isActiveGalleryMode)
-        return null;
-    return (<StyledProfileAddToGalleryBtns>
-      <div className="addToGalleryBtns">
-        <IconWithButton variant={'regular'} text={'Add to Gallery'} onClick={addMethod} disabled={!creationsToGallery.length} isDisableSkeleton={true}>
-          <PlusIconResize />
-        </IconWithButton>
-        <MainButton onClick={resetCreationsInGallery} variant="float" text={'Cancel'}/>
-      </div>
-    </StyledProfileAddToGalleryBtns>);
-};
-// Export
-export default ProfileAddToGalleryBtns;
-var templateObject_1;

package/dist/components/profile/followersSocial/followers/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 styled from 'styled-components';
-import { BlackColor, TextGrayColor } from '@/styles/colors';
-import { H5 } from '@system';
-import { dmsansFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledProfileFollowers = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  &:after {\n    content: '\u2022';\n    color: ", ";\n    font-size: 12px;\n    font-weight: 500;\n    margin: 0 8px;\n    line-height: 16px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  &:after {\n    content: '\u2022';\n    color: ", ";\n    font-size: 12px;\n    font-weight: 500;\n    margin: 0 8px;\n    line-height: 16px;\n  }\n"])), TextGrayColor);
-var StyledProfileFollowersCounter = styled(H5)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  font-weight: 700;\n"], ["\n  font-family: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  font-weight: 700;\n"])), dmsansFontVarCss.css, BlackColor);
-var StyledProfileFollowersCaption = styled(H5)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-family: ", ";\n  color: ", ";\n  margin-left: 8px;\n  text-transform: uppercase;\n"], ["\n  font-family: ", ";\n  color: ", ";\n  margin-left: 8px;\n  text-transform: uppercase;\n"])), dmsansFontVarCss.css, TextGrayColor);
-// Components
-export var ProfileFollowers = function (_a) {
-    var counter = _a.counter, text = _a.text;
-    return (<StyledProfileFollowers>
-      <StyledProfileFollowersCounter>{counter}</StyledProfileFollowersCounter>
-      <StyledProfileFollowersCaption>{text}</StyledProfileFollowersCaption>
-    </StyledProfileFollowers>);
-};
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/profile/followersSocial/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 styled from 'styled-components';
-import { ProfileFollowers } from '@/components/profile/followersSocial/followers';
-import { ProfileSocial } from '@/components/profile/followersSocial/social';
-// Styles
-var StyledProfileFollowersSocial = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin: 6px 0 16px 0;\n"], ["\n  display: flex;\n  align-items: center;\n  margin: 6px 0 16px 0;\n"])));
-// Components
-export var ProfileFollowersSocial = function (_a) {
-    var followers = _a.followers, followings = _a.followings, social = _a.social;
-    return (<StyledProfileFollowersSocial>
-      {(followers && (<ProfileFollowers text={'FOLLOWERS'} counter={followers}/>)) ||
-            null}
-      {(followings && (<ProfileFollowers text={'FOLLOWING'} counter={followings}/>)) ||
-            null}
-      <ProfileSocial social={social}/>
-    </StyledProfileFollowersSocial>);
-};
-var templateObject_1;

package/dist/components/profile/followersSocial/social/index.jsx

@@ -1,35 +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 styled from 'styled-components';
-// Styles
-var StyledProfileSocialItem = styled.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  width: 20px;\n  height: 20px;\n  margin-right: 7px;\n  transition: all 0.2s;\n  transform: scale(1);\n  will-change: transform;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  :hover img {\n    transform: scale(1.3);\n    transition: all 0.2s;\n  }\n"], ["\n  display: block;\n  width: 20px;\n  height: 20px;\n  margin-right: 7px;\n  transition: all 0.2s;\n  transform: scale(1);\n  will-change: transform;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  :hover img {\n    transform: scale(1.3);\n    transition: all 0.2s;\n  }\n"])));
-// Components
-export var ProfileSocial = function (_a) {
-    var social = _a.social;
-    var socialIcon = function (icon, type) {
-        var websiteLink = type === 'website'
-            ? (icon === null || icon === void 0 ? void 0 : icon.includes('http'))
-                ? icon
-                : "https://".concat(icon)
-            : icon;
-        if (icon) {
-            return (<StyledProfileSocialItem className={'profileStatsSocialItem'} target={'_blank'} rel="noreferrer" href={websiteLink}>
-          <Image src={"/socials/".concat([type], ".svg")} width={20} title={type} height={20} alt={icon}/>
-        </StyledProfileSocialItem>);
-        }
-    };
-    var isSocialNullish = Object.values(social).every(function (value) { return value === null; });
-    if (!isSocialNullish && !(social === null || social === void 0 ? void 0 : social.website))
-        return null;
-    return (<>
-      {socialIcon(social === null || social === void 0 ? void 0 : social.facebook, 'facebook')}
-      {socialIcon(social === null || social === void 0 ? void 0 : social.instagram, 'instagram')}
-      {socialIcon(social === null || social === void 0 ? void 0 : social.website, 'website')}
-      {socialIcon(social === null || social === void 0 ? void 0 : social.twitter, 'twitter')}
-    </>);
-};
-var templateObject_1;

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

@@ -1,39 +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 { ScreenWidth, mediaQuery } from '@/styles/ScreenWidth';
-import { ProfileAboutText, ProfileStats } from '@/components/profile';
-import { ProfilePic } from '@system';
-import { getMediaENVDomain } from '@/utils/env';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-// Styles
-var StyledProfileInfo = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 29px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n\n  ", " {\n    flex-direction: column;\n    margin-bottom: 0;\n  }\n\n  .profileImgWithDescription {\n    display: flex;\n    width: 69.67%;\n    margin-right: 44px;\n\n    .profileImage {\n      a {\n        pointer-events: none;\n      }\n    }\n\n    ", " {\n      flex-direction: column;\n      width: 100%;\n      margin-right: 0;\n\n      .profileImage img {\n        width: 64px;\n        height: 64px;\n        margin-right: 0;\n        margin-bottom: 12px;\n      }\n    }\n\n    ", " {\n      margin-right: ", ";\n\n      .profileImage img {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 29px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n\n  ", " {\n    flex-direction: column;\n    margin-bottom: 0;\n  }\n\n  .profileImgWithDescription {\n    display: flex;\n    width: 69.67%;\n    margin-right: 44px;\n\n    .profileImage {\n      a {\n        pointer-events: none;\n      }\n    }\n\n    ", " {\n      flex-direction: column;\n      width: 100%;\n      margin-right: 0;\n\n      .profileImage img {\n        width: 64px;\n        height: 64px;\n        margin-right: 0;\n        margin-bottom: 12px;\n      }\n    }\n\n    ", " {\n      margin-right: ", ";\n\n      .profileImage img {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(29), mediaQuery.mobile, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(44), adaptiveValueCalc(120), adaptiveValueCalc(120));
-// Components
-export var ProfileInfo = function (_a) {
-    var profile = _a.profile;
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    var getProfileImgSize = function () {
-        if (!windowDimensions)
-            return 120;
-        if (windowDimensions.windowWidth <= ScreenWidth.MOBILE)
-            return 64;
-        return 120;
-    };
-    var size = getProfileImgSize();
-    return (<StyledProfileInfo>
-      <div className={'profileImgWithDescription'}>
-        <div className={'profileImage'}>
-          <ProfilePic userPicSrc={profile.getUserPic({
-            mediaDomain: getMediaENVDomain(),
-        })} size={size}/>
-        </div>
-        <ProfileAboutText username={profile.getName()} about={profile.getAbout()} following={profile === null || profile === void 0 ? void 0 : profile.getIsFollowing()} followings={profile.getFollowings()} followers={profile.getFollowers()} wallets={profile.getWallets()} social={[]}/>
-      </div>
-      <ProfileStats rank={profile.getUserRank()}/>
-    </StyledProfileInfo>);
-};
-var templateObject_1;

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

@@ -1,64 +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 useFetchUserInterests from '@/api/server-preferences/queries/useFetchUserInterests';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, InactiveButtonColor, TextGrayColor, } from '@/styles/colors';
-import { FH5, TextSmall } from '@/styles/typography';
-import colors from '@/components/profile/interests/data';
-import Palete from '@/system/Palete';
-import { dmsansFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledProfileInterests = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 16px;\n\n  .caption {\n    ", ";\n    color: ", ";\n  }\n\n  .diagrammaProgress {\n    display: flex;\n    justify-content: flex-start;\n    margin-top: 8px;\n    border-radius: 4px;\n    height: 32px;\n    background-color: ", ";\n\n    &Item {\n      display: block;\n      height: 100%;\n\n      :first-child {\n        border-top-left-radius: 4px;\n        border-bottom-left-radius: 4px;\n      }\n    }\n  }\n\n  .diagrammaTable {\n    font-family: ", ";\n\n    margin-top: 8px;\n\n    &Item {\n      ", ";\n      display: flex;\n      justify-content: space-between;\n      margin-top: 8px;\n      user-select: none;\n\n      &StartValue {\n        display: flex;\n        align-items: center;\n        color: ", ";\n\n        strong {\n          display: inline-block;\n          width: 10px;\n          height: 10px;\n          border-radius: 50%;\n          margin-right: 8px;\n        }\n      }\n\n      &EndValue {\n        color: ", ";\n      }\n    }\n  }\n\n  ", " {\n    margin-bottom: ", ";\n\n    .diagrammaProgress {\n      margin-top: ", ";\n      border-radius: ", ";\n      height: ", ";\n\n      &Item {\n        :first-child {\n          border-top-left-radius: ", ";\n          border-bottom-left-radius: ", ";\n        }\n      }\n    }\n    .diagrammaTable {\n      margin-top: ", ";\n      &Item {\n        margin-top: ", ";\n        &StartValue {\n          strong {\n            width: ", ";\n            height: ", ";\n            margin-right: ", ";\n          }\n        }\n      }\n    }\n  }\n"], ["\n  margin-bottom: 16px;\n\n  .caption {\n    ", ";\n    color: ", ";\n  }\n\n  .diagrammaProgress {\n    display: flex;\n    justify-content: flex-start;\n    margin-top: 8px;\n    border-radius: 4px;\n    height: 32px;\n    background-color: ", ";\n\n    &Item {\n      display: block;\n      height: 100%;\n\n      :first-child {\n        border-top-left-radius: 4px;\n        border-bottom-left-radius: 4px;\n      }\n    }\n  }\n\n  .diagrammaTable {\n    font-family: ", ";\n\n    margin-top: 8px;\n\n    &Item {\n      ", ";\n      display: flex;\n      justify-content: space-between;\n      margin-top: 8px;\n      user-select: none;\n\n      &StartValue {\n        display: flex;\n        align-items: center;\n        color: ", ";\n\n        strong {\n          display: inline-block;\n          width: 10px;\n          height: 10px;\n          border-radius: 50%;\n          margin-right: 8px;\n        }\n      }\n\n      &EndValue {\n        color: ", ";\n      }\n    }\n  }\n\n  ", " {\n    margin-bottom: ", ";\n\n    .diagrammaProgress {\n      margin-top: ", ";\n      border-radius: ", ";\n      height: ", ";\n\n      &Item {\n        :first-child {\n          border-top-left-radius: ", ";\n          border-bottom-left-radius: ", ";\n        }\n      }\n    }\n    .diagrammaTable {\n      margin-top: ", ";\n      &Item {\n        margin-top: ", ";\n        &StartValue {\n          strong {\n            width: ", ";\n            height: ", ";\n            margin-right: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), FH5, BlackColor, InactiveButtonColor, dmsansFontVarCss.css, TextSmall, BlackColor, TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(8), adaptiveValueCalc(4), adaptiveValueCalc(32), adaptiveValueCalc(4), adaptiveValueCalc(4), adaptiveValueCalc(8), adaptiveValueCalc(8), adaptiveValueCalc(10), adaptiveValueCalc(10), adaptiveValueCalc(8));
-// Component
-export var ProfileInterests = function () {
-    var _a = useFetchUserInterests(), userInterests = _a.userInterests, loading = _a.loading, error = _a.error;
-    var renderDiagrammaProgressItem = function () {
-        return userInterests === null || userInterests === void 0 ? void 0 : userInterests.map(function (interest, iter) {
-            return (<span key={interest.imageUrl} className={'diagrammaProgressItem'} style={{
-                    backgroundColor: colors[iter].colorLabel,
-                    width: "".concat(interest.percents, "%"),
-                }}></span>);
-        });
-    };
-    var renderDiagrammaTableItem = function () {
-        return userInterests === null || userInterests === void 0 ? void 0 : userInterests.map(function (interest, iter) {
-            var mediaQuery = window.matchMedia('(min-width: 768px) and (max-width: 1199px)');
-            var shouldTruncate = mediaQuery.matches && interest.name && interest.name.length > 11;
-            return (<span key={interest.imageUrl} className="diagrammaTableItem">
-          <p className={'diagrammaTableItemStartValue'}>
-            <strong style={{ backgroundColor: colors[iter].colorLabel }}></strong>
-            {shouldTruncate
-                    ? interest.name.substring(0, 11) + '...'
-                    : interest.name}
-          </p>
-          <p className={'diagrammaTableItemEndValue'}>{"".concat(interest.percents, "%")}</p>
-        </span>);
-        });
-    };
-    if (loading || error || !(userInterests === null || userInterests === void 0 ? void 0 : userInterests.length))
-        return null;
-    return (<StyledProfileInterests>
-      <Palete>
-        <span className="caption">Interests</span>
-        <div className={'diagrammaProgress'}>
-          {renderDiagrammaProgressItem()}
-        </div>
-        <div className={"diagrammaTable"}>
-          {renderDiagrammaTableItem()}
-          {/*<span className="diagrammaTableItem">*/}
-          {/*  <p className={'diagrammaTableItemStartValue'}>*/}
-          {/*    <strong style={{ backgroundColor: InactiveButtonColor }}></strong>*/}
-          {/*    CreationOther*/}
-          {/*  </p>*/}
-          {/*  <p className={'diagrammaTableItemEndValue'}>9%</p>*/}
-          {/*</span>*/}
-        </div>
-      </Palete>
-    </StyledProfileInterests>);
-};
-var templateObject_1;

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import Head from 'next/head';
-// Private
-var seo = function (title, about, url, image) {
-    return {
-        title: title,
-        about: about,
-        openGraph: {
-            type: 'website',
-            locale: 'en_US',
-            url: url,
-            title: title,
-            about: about,
-            image: image,
-            site_name: process.env.NEXT_PUBLIC_ENV_DOMAIN,
-            imageWidth: '512',
-            imageHeight: '512',
-        },
-        twitter: {
-            handle: '@ludo',
-            cardType: 'summary_large_image',
-        },
-    };
-};
-// Components
-export var ProfilePageHead = function (_a) {
-    var userUrl = _a.userUrl, profile = _a.profile;
-    var seoValues = seo(profile.getName() || '', profile.getAbout(), userUrl, ''
-    // profilePic
-    );
-    return (<Head>
-      {seoValues.title && <title key="title">{seoValues.title}</title>}
-      {seoValues.about && (<meta key="description" name="description" content={seoValues.about}/>)}
-      {seoValues.twitter.cardType && (<meta key="twitter:card" name="twitter:card" content={seoValues.twitter.cardType}/>)}
-      {seoValues.twitter.handle && (<meta key="twitter:site" name="twitter:site" content={seoValues.twitter.handle}/>)}
-      {seoValues.openGraph.url && (<meta key="og:url" property="og:url" content={seoValues.openGraph.url}/>)}
-      {seoValues.openGraph.type && (<meta key="og:type" property="og:type" content={seoValues.openGraph.type}/>)}
-      {seoValues.openGraph.title && (<meta key="og:title" property="og:title" content={seoValues.openGraph.title}/>)}
-      {seoValues.openGraph.about && (<meta key="og:description" property="og:description" content={seoValues.openGraph.about}/>)}
-      {seoValues.openGraph.image && (<meta key="og:image" property="og:image" content={seoValues.openGraph.image}/>)}
-      {seoValues.openGraph.imageWidth && (<meta key="og:image:width" property="og:image:width" content={seoValues.openGraph.imageWidth}/>)}
-      {seoValues.openGraph.imageHeight && (<meta key="og:image:height" property="og:image:height" content={seoValues.openGraph.imageHeight}/>)}
-      {seoValues.openGraph.locale && (<meta key="og:locale" property="og:locale" content={seoValues.openGraph.locale}/>)}
-    </Head>);
-};

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

@@ -1,33 +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';
-import { WhiteColor } from '@/styles/colors';
-// Styles
-var StyledProfileSkeleton = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 6px;\n\n  .cardLink {\n    padding: 16px;\n    display: flex;\n    height: 100%;\n\n    @media (max-width: 1199px) {\n      padding: 12px;\n      align-items: center;\n    }\n\n    .cardLinkIcon {\n      margin-right: 12px;\n      border-radius: 50%;\n      width: 72px;\n      height: 72px;\n\n      @media (max-width: 1199px) {\n        width: 42px;\n        height: 42px;\n      }\n    }\n    .cardLinkContent {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      width: 100%;\n\n      .content {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n\n        .caption {\n          margin: 0;\n        }\n        .text {\n          margin-top: 7px;\n        }\n      }\n\n      @media (max-width: 1199px) {\n        flex-direction: row;\n        align-items: center;\n        .content {\n          justify-content: center;\n        }\n      }\n    }\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 6px;\n\n  .cardLink {\n    padding: 16px;\n    display: flex;\n    height: 100%;\n\n    @media (max-width: 1199px) {\n      padding: 12px;\n      align-items: center;\n    }\n\n    .cardLinkIcon {\n      margin-right: 12px;\n      border-radius: 50%;\n      width: 72px;\n      height: 72px;\n\n      @media (max-width: 1199px) {\n        width: 42px;\n        height: 42px;\n      }\n    }\n    .cardLinkContent {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      width: 100%;\n\n      .content {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n\n        .caption {\n          margin: 0;\n        }\n        .text {\n          margin-top: 7px;\n        }\n      }\n\n      @media (max-width: 1199px) {\n        flex-direction: row;\n        align-items: center;\n        .content {\n          justify-content: center;\n        }\n      }\n    }\n  }\n"])), WhiteColor);
-export var ProfileSkeletonWrapper = function (_a) {
-    var profilesCount = _a.profilesCount;
-    var arr = Array.from(Array(profilesCount).keys());
-    return (<>
-      {arr.map(function () { return (<ProfileSkeleton key={Math.random()}/>); })}
-    </>);
-};
-// Component
-export var ProfileSkeleton = function () {
-    return (<StyledProfileSkeleton>
-      <div className={"cardLink"}>
-        <Skeleton className={'cardLinkIcon'}/>
-        <div className={'cardLinkContent'}>
-          <div className={'content'}>
-            <Skeleton className={'caption'} width={'100%'} height={'18px'}/>
-            <Skeleton className={'text'} width={'80px'} height={'16px'}/>
-          </div>
-          <Skeleton className={'text'} width={'60px'} height={'25px'} style={{ borderRadius: '25px', marginTop: '7px' }}/>
-        </div>
-      </div>
-    </StyledProfileSkeleton>);
-};
-var templateObject_1;

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

@@ -1,12 +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';
-var StyledProfileUserCards = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 24px 0;\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr 1fr;\n  gap: 24px;\n\n  @media (max-width: 1199px) {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media (max-width: 600px) {\n    gap: 12px;\n    grid-template-columns: 1fr;\n  }\n"], ["\n  margin: 24px 0;\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr 1fr;\n  gap: 24px;\n\n  @media (max-width: 1199px) {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media (max-width: 600px) {\n    gap: 12px;\n    grid-template-columns: 1fr;\n  }\n"])));
-export var ProfileUserCards = function (_a) {
-    var children = _a.children;
-    return <StyledProfileUserCards>{children}</StyledProfileUserCards>;
-};
-var templateObject_1;

package/dist/components/profile/profileUserCards/profileUserCard/index.jsx

@@ -1,132 +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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useEffect, useState } from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { useUserStore } from '@/modules/user/store';
-import useFollowProfile from '@/api/server-identities/mutations/useFollowProfile';
-import useUnfollowProfile from '@/api/server-identities/mutations/useUnfollowProfile';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, TextGrayColor, WhiteColor } from '@/styles/colors';
-import BoxShadow from '@/styles/mixins/boxShadow';
-import BoxTransform from '@/styles/mixins/boxTransform';
-import { FH6 } from '@/styles/typography';
-import SecondaryButton from '@/system/Buttons/SecondaryButton';
-import { ImageInterceptor } from '@/system/Img/ImageInterceptor';
-import { getAdaptiveValueWithCheck4k } from '@/utils/adaptive/check4k';
-import { dmsansFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledProfileUserCard = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  user-select: none;\n  width: calc(25% - 24px * 3 / 4);\n  background-color: ", ";\n  border-radius: 6px;\n  @media (max-width: 1199px) {\n    width: calc(50% - 16px / 2);\n  }\n  @media (max-width: 767px) {\n    width: 100%;\n  }\n\n  .cardLink {\n    font-family: ", ";\n    padding: 16px;\n    display: flex;\n    height: 100%;\n\n    @media (max-width: 1199px) {\n      padding: 12px;\n      align-items: center;\n    }\n\n    .cardLinkIcon {\n      margin-right: 12px;\n      border-radius: 50%;\n    }\n\n    .cardLinkContent {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      width: 100%;\n\n      .content {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n\n        .caption {\n          line-height: 1.385em;\n          color: ", ";\n          font-size: 1.3em;\n          font-weight: 700;\n          margin: 0;\n        }\n\n        .text {\n          line-height: 1.2em;\n          color: ", ";\n          font-size: 1.34em;\n          font-weight: 400;\n        }\n      }\n\n      .button {\n        width: 82px;\n      }\n\n      @media (max-width: 1199px) {\n        flex-direction: row;\n        align-items: center;\n        .content {\n          justify-content: center;\n\n          .caption {\n            ", ";\n          }\n\n          .text {\n            line-height: 1.1em;\n            margin-top: 4px;\n          }\n        }\n      }\n    }\n  }\n\n  ", " {\n    width: calc(25% - ", ");\n    border-radius: ", ";\n\n    .cardLink {\n      padding: ", ";\n\n      .cardLinkIcon {\n        margin-right: ", ";\n      }\n\n      .cardLinkContent {\n        .content {\n          .caption {\n            line-height: ", ";\n            font-size: ", ";\n          }\n\n          .text {\n            line-height: ", ";\n            font-size: ", ";\n          }\n        }\n\n        .button {\n          width: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  ", ";\n  ", ";\n  user-select: none;\n  width: calc(25% - 24px * 3 / 4);\n  background-color: ", ";\n  border-radius: 6px;\n  @media (max-width: 1199px) {\n    width: calc(50% - 16px / 2);\n  }\n  @media (max-width: 767px) {\n    width: 100%;\n  }\n\n  .cardLink {\n    font-family: ", ";\n    padding: 16px;\n    display: flex;\n    height: 100%;\n\n    @media (max-width: 1199px) {\n      padding: 12px;\n      align-items: center;\n    }\n\n    .cardLinkIcon {\n      margin-right: 12px;\n      border-radius: 50%;\n    }\n\n    .cardLinkContent {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      width: 100%;\n\n      .content {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n\n        .caption {\n          line-height: 1.385em;\n          color: ", ";\n          font-size: 1.3em;\n          font-weight: 700;\n          margin: 0;\n        }\n\n        .text {\n          line-height: 1.2em;\n          color: ", ";\n          font-size: 1.34em;\n          font-weight: 400;\n        }\n      }\n\n      .button {\n        width: 82px;\n      }\n\n      @media (max-width: 1199px) {\n        flex-direction: row;\n        align-items: center;\n        .content {\n          justify-content: center;\n\n          .caption {\n            ", ";\n          }\n\n          .text {\n            line-height: 1.1em;\n            margin-top: 4px;\n          }\n        }\n      }\n    }\n  }\n\n  ", " {\n    width: calc(25% - ", ");\n    border-radius: ", ";\n\n    .cardLink {\n      padding: ", ";\n\n      .cardLinkIcon {\n        margin-right: ", ";\n      }\n\n      .cardLinkContent {\n        .content {\n          .caption {\n            line-height: ", ";\n            font-size: ", ";\n          }\n\n          .text {\n            line-height: ", ";\n            font-size: ", ";\n          }\n        }\n\n        .button {\n          width: ", ";\n        }\n      }\n    }\n  }\n"])), BoxShadow, BoxTransform, WhiteColor, dmsansFontVarCss.css, BlackColor, TextGrayColor, FH6, mediaQuery.minWidthFourK, adaptiveValueCalc((24 * 3) / 4), adaptiveValueCalc(6), adaptiveValueCalc(16), adaptiveValueCalc(12), adaptiveValueCalc(14), adaptiveValueCalc(13), adaptiveValueCalc(13), adaptiveValueCalc(14), adaptiveValueCalc(82));
-export var ProfileUserCard = function (_a) {
-    var userId = _a.userId, userPic = _a.userPic, userName = _a.userName, followings = _a.followings, isFollowing = _a.isFollowing, windowDimensions = _a.windowDimensions;
-    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
-    var getUser = useUserStore(function (state) { return state.user; });
-    var _b = useFollowProfile(userId), followProfile = _b.followProfile, isFollowedProfile = _b.isFollowedProfile;
-    var _c = useUnfollowProfile(userId), unfollowProfile = _c.unfollowProfile, isUnFollowedProfile = _c.isUnFollowedProfile;
-    var _d = useState(isFollowing), isFollowed = _d[0], setFollow = _d[1];
-    var _e = useState((getUser === null || getUser === void 0 ? void 0 : getUser.userId) !== userId), isNeedRenderBtn = _e[0], setNeedRenderBtn = _e[1];
-    useEffect(function () {
-        if (isSignedIn) {
-            setNeedRenderBtn((getUser === null || getUser === void 0 ? void 0 : getUser.userId) !== userId);
-        }
-    }, [isSignedIn]);
-    useEffect(function () {
-        setFollow(isFollowedProfile);
-    }, [isFollowedProfile]);
-    useEffect(function () {
-        setFollow(isUnFollowedProfile);
-    }, [isUnFollowedProfile]);
-    var handleFollow = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    e.stopPropagation();
-                    e.preventDefault();
-                    return [4 /*yield*/, followProfile()];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleUnFollow = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    e.stopPropagation();
-                    e.preventDefault();
-                    return [4 /*yield*/, unfollowProfile()];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    return (<StyledProfileUserCard>
-      <Link href={"/profile/".concat(userId, "/nfts")} className={"cardLink"}>
-        <ImageInterceptor borderRadiusSkeleton={'50%'}>
-          <Image src={userPic} className={'cardLinkIcon'} width={windowDimensions && windowDimensions.windowWidth < 1200
-            ? 42
-            : getAdaptiveValueWithCheck4k({
-                windowDimensions: windowDimensions,
-                currentSize: 72,
-            })} height={windowDimensions && windowDimensions.windowWidth < 1200
-            ? 42
-            : getAdaptiveValueWithCheck4k({
-                windowDimensions: windowDimensions,
-                currentSize: 72,
-            })} alt={'avatar'}/>
-        </ImageInterceptor>
-        <div className={'cardLinkContent'}>
-          <div className={'content'}>
-            <h4 className={'caption'}>{userName}</h4>
-            {Boolean(followings) && (<p className={'text'}>{followings} Followers</p>)}
-          </div>
-          {isNeedRenderBtn && (<div className={'button'}>
-              {isFollowed ? (<SecondaryButton variant={'disabled'} text={'Unfollow'} onClick={handleUnFollow}/>) : (<SecondaryButton variant={'regular'} text={'+ Follow'} onClick={handleFollow}/>)}
-            </div>)}
-        </div>
-      </Link>
-    </StyledProfileUserCard>);
-};
-var templateObject_1;

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

@@ -1,34 +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 { getRankColor } from '@ludo.ninja/utils';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, InactiveButtonColor, TextGrayColor, } from '@/styles/colors';
-import { Box, Flex, H2, H6 } from '@system';
-// Styles
-var RangeContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  background: ", ";\n  height: 20px;\n  border-radius: 4px;\n\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: block;\n  width: 100%;\n  background: ", ";\n  height: 20px;\n  border-radius: 4px;\n\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n  }\n"])), InactiveButtonColor, mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(4));
-var RangeValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  background: ", ";\n  height: 100%;\n  border-radius: 2px 0 0 2px;\n  ", " {\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n"], ["\n  display: block;\n  background: ", ";\n  height: 100%;\n  border-radius: 2px 0 0 2px;\n  ", " {\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n"])), function (props) { return props.rankValue && getRankColor(props.rankValue); }, mediaQuery.minWidthFourK, adaptiveValueCalc(2), adaptiveValueCalc(2));
-// Components
-export var ProfileRank = function (_a) {
-    var rank = _a.rank;
-    return (<Box>
-      <H6 color={TextGrayColor} mb={4}>
-        LUDO RANK
-      </H6>
-      <Flex>
-        <Flex alignItems="center" borderRadius={6} width={'100%'}>
-          <H2 mr={16} color={BlackColor}>
-            {rank ? rank : 'unknown'}
-          </H2>
-          <RangeContainer>
-            <RangeValue rankValue={rank} style={{ width: "".concat(rank, "%") }}/>
-          </RangeContainer>
-        </Flex>
-      </Flex>
-    </Box>);
-};
-var templateObject_1, templateObject_2;

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

@@ -1,29 +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 { ProfileRank } from '@/components/profile/rank';
-import Palete from '@/system/Palete';
-// Styles
-var StyledProfileStats = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: 12px;\n\n  ", " {\n    width: 156px;\n    margin-top: 0;\n  }\n\n  ", " {\n    width: 244px;\n    margin-top: 0;\n  }\n\n  ", " {\n    width: ", ";\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: 12px;\n\n  ", " {\n    width: 156px;\n    margin-top: 0;\n  }\n\n  ", " {\n    width: 244px;\n    margin-top: 0;\n  }\n\n  ", " {\n    width: ", ";\n  }\n"])), mediaQuery.minWidthTablet, mediaQuery.minWidthDesktop, mediaQuery.minWidthFourK, adaptiveValueCalc(244));
-// Components
-export var ProfileStats = function (_a) {
-    var rank = _a.rank;
-    return (<StyledProfileStats>
-      <Palete>
-        <div className="profileStatsBlock">
-          <ProfileRank rank={rank}/>
-        </div>
-      </Palete>
-      {/*{isSignedIn() && profileId !== getUser()?.userId && (*/}
-      {/*  <div className={'profileStatsWorth'}>*/}
-      {/*    <ProfileNetWorth />*/}
-      {/*  </div>*/}
-      {/*)}*/}
-    </StyledProfileStats>);
-};
-var templateObject_1;