@ludo.ninja/components 1.7.5 → 1.7.7

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

@@ -0,0 +1,28 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileFollowersSocial = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var followers_1 = require("@/components/profile/followersSocial/followers");
+var social_1 = require("@/components/profile/followersSocial/social");
+// Styles
+var StyledProfileFollowersSocial = styled_components_1.default.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
+var ProfileFollowersSocial = function (_a) {
+    var followers = _a.followers, followings = _a.followings, social = _a.social;
+    return (react_1.default.createElement(StyledProfileFollowersSocial, null,
+        (followers && (react_1.default.createElement(followers_1.ProfileFollowers, { text: 'FOLLOWERS', counter: followers }))) ||
+            null,
+        (followings && (react_1.default.createElement(followers_1.ProfileFollowers, { text: 'FOLLOWING', counter: followings }))) ||
+            null,
+        react_1.default.createElement(social_1.ProfileSocial, { social: social })));
+};
+exports.ProfileFollowersSocial = ProfileFollowersSocial;
+var templateObject_1;

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

@@ -0,0 +1,40 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileSocial = void 0;
+var react_1 = __importDefault(require("react"));
+var image_1 = __importDefault(require("next/image"));
+var styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+var StyledProfileSocialItem = styled_components_1.default.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
+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 (react_1.default.createElement(StyledProfileSocialItem, { className: 'profileStatsSocialItem', target: '_blank', rel: "noreferrer", href: websiteLink },
+                react_1.default.createElement(image_1.default, { src: "/socials/".concat([type], ".svg"), width: 20, title: type, height: 20, alt: icon })));
+        }
+    };
+    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 (react_1.default.createElement(react_1.default.Fragment, null,
+        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')));
+};
+exports.ProfileSocial = ProfileSocial;
+var templateObject_1;

package/dist/components/profile/index.d.ts

@@ -1,11 +1 @@
-export { ProfileAboutText } from '@/components/profile/aboutText';
-export { ProfileStats } from '@/components/profile/stats';
-export { ProfilePageHead } from '@/components/profile/pageHead';
-export { profileJSONLD } from '@/components/profile/jsonLd';
-export { ProfileWallets } from '@/components//profile/wallets';
-export { ProfileInfo } from '@/components/profile/info';
-export { ProfileWrapper } from '@/components/profile/wrapper';
-export { ProfileInterests } from '@/components/profile/interests';
-export { ProfileUserCards } from '@/components/profile/profileUserCards';
-export { ProfileUserCard } from '@/components/profile/profileUserCards/profileUserCard';
-export { ProfileSkeletonWrapper } from '@/components/profile/profileSkeleton';
+export { ProfileSkeleton } from '@ludo.ninja/components/src/components/profile/profileSkeleton';

package/dist/components/profile/index.js

@@ -1,11 +1,5 @@
-export { ProfileAboutText } from '@/components/profile/aboutText';
-export { ProfileStats } from '@/components/profile/stats';
-export { ProfilePageHead } from '@/components/profile/pageHead';
-export { profileJSONLD } from '@/components/profile/jsonLd';
-export { ProfileWallets } from '@/components//profile/wallets';
-export { ProfileInfo } from '@/components/profile/info';
-export { ProfileWrapper } from '@/components/profile/wrapper';
-export { ProfileInterests } from '@/components/profile/interests';
-export { ProfileUserCards } from '@/components/profile/profileUserCards';
-export { ProfileUserCard } from '@/components/profile/profileUserCards/profileUserCard';
-export { ProfileSkeletonWrapper } from '@/components/profile/profileSkeleton';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileSkeleton = void 0;
+var profileSkeleton_1 = require("@ludo.ninja/components/src/components/profile/profileSkeleton");
+Object.defineProperty(exports, "ProfileSkeleton", { enumerable: true, get: function () { return profileSkeleton_1.ProfileSkeleton; } });

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

@@ -0,0 +1,43 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileInfo = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var profile_1 = require("@/components/profile");
+var _system_1 = require("@system");
+var env_1 = require("@/utils/env");
+var screen_1 = require("@/utils/screen");
+// Styles
+var StyledProfileInfo = styled_components_1.default.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"])), ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(29), ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(44), (0, _4k_1.adaptiveValueCalc)(120), (0, _4k_1.adaptiveValueCalc)(120));
+// Components
+var ProfileInfo = function (_a) {
+    var profile = _a.profile;
+    var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
+    var getProfileImgSize = function () {
+        if (!windowDimensions)
+            return 120;
+        if (windowDimensions.windowWidth <= ScreenWidth_1.ScreenWidth.MOBILE)
+            return 64;
+        return 120;
+    };
+    var size = getProfileImgSize();
+    return (react_1.default.createElement(StyledProfileInfo, null,
+        react_1.default.createElement("div", { className: 'profileImgWithDescription' },
+            react_1.default.createElement("div", { className: 'profileImage' },
+                react_1.default.createElement(_system_1.ProfilePic, { userPicSrc: profile.getUserPic({
+                        mediaDomain: (0, env_1.getMediaENVDomain)(),
+                    }), size: size })),
+            react_1.default.createElement(profile_1.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: [] })),
+        react_1.default.createElement(profile_1.ProfileStats, { rank: profile.getUserRank() })));
+};
+exports.ProfileInfo = ProfileInfo;
+var templateObject_1;

package/dist/components/profile/interests/data.js

@@ -1,8 +1,10 @@
-import { AccentColor } from '@/styles/colors';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var colors_1 = require("@/styles/colors");
 var colors = [
     {
         id: Math.random(),
-        colorLabel: AccentColor,
+        colorLabel: colors_1.AccentColor,
     },
     {
         id: Math.random(),
@@ -17,4 +19,4 @@ var colors = [
         colorLabel: '#9CE8A8',
     },
 ];
-export default colors;
+exports.default = colors;

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

@@ -0,0 +1,56 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileInterests = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var useFetchUserInterests_1 = __importDefault(require("@/api/server-preferences/queries/useFetchUserInterests"));
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+var data_1 = __importDefault(require("@/components/profile/interests/data"));
+var Palete_1 = __importDefault(require("@/system/Palete"));
+var vars_1 = require("@/fonts/vars");
+// Styles
+var StyledProfileInterests = styled_components_1.default.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"])), typography_1.FH5, colors_1.BlackColor, colors_1.InactiveButtonColor, vars_1.dmsansFontVarCss.css, typography_1.TextSmall, colors_1.BlackColor, colors_1.TextGrayColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(8));
+// Component
+var ProfileInterests = function () {
+    var _a = (0, useFetchUserInterests_1.default)(), 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 (react_1.default.createElement("span", { key: interest.imageUrl, className: 'diagrammaProgressItem', style: {
+                    backgroundColor: data_1.default[iter].colorLabel,
+                    width: "".concat(interest.percents, "%"),
+                } }));
+        });
+    };
+    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 (react_1.default.createElement("span", { key: interest.imageUrl, className: "diagrammaTableItem" },
+                react_1.default.createElement("p", { className: 'diagrammaTableItemStartValue' },
+                    react_1.default.createElement("strong", { style: { backgroundColor: data_1.default[iter].colorLabel } }),
+                    shouldTruncate
+                        ? interest.name.substring(0, 11) + '...'
+                        : interest.name),
+                react_1.default.createElement("p", { className: 'diagrammaTableItemEndValue' }, "".concat(interest.percents, "%"))));
+        });
+    };
+    if (loading || error || !(userInterests === null || userInterests === void 0 ? void 0 : userInterests.length))
+        return null;
+    return (react_1.default.createElement(StyledProfileInterests, null,
+        react_1.default.createElement(Palete_1.default, null,
+            react_1.default.createElement("span", { className: "caption" }, "Interests"),
+            react_1.default.createElement("div", { className: 'diagrammaProgress' }, renderDiagrammaProgressItem()),
+            react_1.default.createElement("div", { className: "diagrammaTable" }, renderDiagrammaTableItem()))));
+};
+exports.ProfileInterests = ProfileInterests;
+var templateObject_1;

package/dist/components/profile/interests/type.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,5 +1,9 @@
-export var profileJSONLD = function (profile, userpic) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.profileJSONLD = void 0;
+var profileJSONLD = function (profile, userpic) {
     return {
         __html: "{\n      \"@context\": \"http://schema.org\",\n      \"@type\": \"Article\",\n      \"mainEntityOfPage\": {\n        \"@type\": \"WebPage\",\n        \"@id\": \"".concat(profile.userId, "\"\n      },\n      \"headline\": \"").concat(profile.username, "\",\n      \"image\": [\n        \"").concat(userpic, "\"\n      ],\n      \"datePublished\": \"").concat(Date.now().toString(), "\",\n      \"dateModified\": \"").concat(Date.now().toString(), "\",\n      \"author\": {\n        \"@type\": \"Person\",\n        \"name\": \"").concat(profile.username, "\"\n      },\n      \"description\": \"").concat(profile.about, "\"\n    }"),
     };
 };
+exports.profileJSONLD = profileJSONLD;

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

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfilePageHead = void 0;
+var react_1 = __importDefault(require("react"));
+var head_1 = __importDefault(require("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
+var ProfilePageHead = function (_a) {
+    var userUrl = _a.userUrl, profile = _a.profile;
+    var seoValues = seo(profile.getName() || '', profile.getAbout(), userUrl, ''
+    // profilePic
+    );
+    return (react_1.default.createElement(head_1.default, null,
+        seoValues.title && react_1.default.createElement("title", { key: "title" }, seoValues.title),
+        seoValues.about && (react_1.default.createElement("meta", { key: "description", name: "description", content: seoValues.about })),
+        seoValues.twitter.cardType && (react_1.default.createElement("meta", { key: "twitter:card", name: "twitter:card", content: seoValues.twitter.cardType })),
+        seoValues.twitter.handle && (react_1.default.createElement("meta", { key: "twitter:site", name: "twitter:site", content: seoValues.twitter.handle })),
+        seoValues.openGraph.url && (react_1.default.createElement("meta", { key: "og:url", property: "og:url", content: seoValues.openGraph.url })),
+        seoValues.openGraph.type && (react_1.default.createElement("meta", { key: "og:type", property: "og:type", content: seoValues.openGraph.type })),
+        seoValues.openGraph.title && (react_1.default.createElement("meta", { key: "og:title", property: "og:title", content: seoValues.openGraph.title })),
+        seoValues.openGraph.about && (react_1.default.createElement("meta", { key: "og:description", property: "og:description", content: seoValues.openGraph.about })),
+        seoValues.openGraph.image && (react_1.default.createElement("meta", { key: "og:image", property: "og:image", content: seoValues.openGraph.image })),
+        seoValues.openGraph.imageWidth && (react_1.default.createElement("meta", { key: "og:image:width", property: "og:image:width", content: seoValues.openGraph.imageWidth })),
+        seoValues.openGraph.imageHeight && (react_1.default.createElement("meta", { key: "og:image:height", property: "og:image:height", content: seoValues.openGraph.imageHeight })),
+        seoValues.openGraph.locale && (react_1.default.createElement("meta", { key: "og:locale", property: "og:locale", content: seoValues.openGraph.locale }))));
+};
+exports.ProfilePageHead = ProfilePageHead;

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

@@ -0,0 +1,35 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileSkeleton = exports.ProfileSkeletonWrapper = void 0;
+var react_1 = __importDefault(require("react"));
+var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var styles_1 = require("@ludo.ninja/components/dist/styles");
+// Styles
+var StyledProfileSkeleton = styled_components_1.default.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"])), styles_1.WhiteColor);
+var ProfileSkeletonWrapper = function (_a) {
+    var profilesCount = _a.profilesCount;
+    var arr = Array.from(Array(profilesCount).keys());
+    return (react_1.default.createElement(react_1.default.Fragment, null, arr.map(function () { return (react_1.default.createElement(exports.ProfileSkeleton, { key: Math.random() })); })));
+};
+exports.ProfileSkeletonWrapper = ProfileSkeletonWrapper;
+// Component
+var ProfileSkeleton = function () {
+    return (react_1.default.createElement(StyledProfileSkeleton, null,
+        react_1.default.createElement("div", { className: "cardLink" },
+            react_1.default.createElement(react_loading_skeleton_1.default, { className: 'cardLinkIcon' }),
+            react_1.default.createElement("div", { className: 'cardLinkContent' },
+                react_1.default.createElement("div", { className: 'content' },
+                    react_1.default.createElement(react_loading_skeleton_1.default, { className: 'caption', width: '100%', height: '18px' }),
+                    react_1.default.createElement(react_loading_skeleton_1.default, { className: 'text', width: '80px', height: '16px' })),
+                react_1.default.createElement(react_loading_skeleton_1.default, { className: 'text', width: '60px', height: '25px', style: { borderRadius: '25px', marginTop: '7px' } })))));
+};
+exports.ProfileSkeleton = ProfileSkeleton;
+var templateObject_1;

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

@@ -0,0 +1,19 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileUserCards = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var StyledProfileUserCards = styled_components_1.default.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"])));
+var ProfileUserCards = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement(StyledProfileUserCards, null, children);
+};
+exports.ProfileUserCards = ProfileUserCards;
+var templateObject_1;

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

@@ -0,0 +1,157 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __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 };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileUserCard = void 0;
+var react_1 = __importStar(require("react"));
+var image_1 = __importDefault(require("next/image"));
+var link_1 = __importDefault(require("next/link"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var store_1 = require("@/modules/user/store");
+var useFollowProfile_1 = __importDefault(require("@/api/server-identities/mutations/useFollowProfile"));
+var useUnfollowProfile_1 = __importDefault(require("@/api/server-identities/mutations/useUnfollowProfile"));
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
+var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
+var typography_1 = require("@/styles/typography");
+var SecondaryButton_1 = __importDefault(require("@/system/Buttons/SecondaryButton"));
+var ImageInterceptor_1 = require("@/system/Img/ImageInterceptor");
+var check4k_1 = require("@/utils/adaptive/check4k");
+var vars_1 = require("@/fonts/vars");
+// Styles
+var StyledProfileUserCard = styled_components_1.default.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_1.default, boxTransform_1.default, colors_1.WhiteColor, vars_1.dmsansFontVarCss.css, colors_1.BlackColor, colors_1.TextGrayColor, typography_1.FH6, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)((24 * 3) / 4), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(14), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(14), (0, _4k_1.adaptiveValueCalc)(82));
+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 = (0, store_1.useUserStore)(function (state) { return state.isSignedIn; });
+    var getUser = (0, store_1.useUserStore)(function (state) { return state.user; });
+    var _b = (0, useFollowProfile_1.default)(userId), followProfile = _b.followProfile, isFollowedProfile = _b.isFollowedProfile;
+    var _c = (0, useUnfollowProfile_1.default)(userId), unfollowProfile = _c.unfollowProfile, isUnFollowedProfile = _c.isUnFollowedProfile;
+    var _d = (0, react_1.useState)(isFollowing), isFollowed = _d[0], setFollow = _d[1];
+    var _e = (0, react_1.useState)((getUser === null || getUser === void 0 ? void 0 : getUser.userId) !== userId), isNeedRenderBtn = _e[0], setNeedRenderBtn = _e[1];
+    (0, react_1.useEffect)(function () {
+        if (isSignedIn) {
+            setNeedRenderBtn((getUser === null || getUser === void 0 ? void 0 : getUser.userId) !== userId);
+        }
+    }, [isSignedIn]);
+    (0, react_1.useEffect)(function () {
+        setFollow(isFollowedProfile);
+    }, [isFollowedProfile]);
+    (0, react_1.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 (react_1.default.createElement(StyledProfileUserCard, null,
+        react_1.default.createElement(link_1.default, { href: "/profile/".concat(userId, "/nfts"), className: "cardLink" },
+            react_1.default.createElement(ImageInterceptor_1.ImageInterceptor, { borderRadiusSkeleton: '50%' },
+                react_1.default.createElement(image_1.default, { src: userPic, className: 'cardLinkIcon', width: windowDimensions && windowDimensions.windowWidth < 1200
+                        ? 42
+                        : (0, check4k_1.getAdaptiveValueWithCheck4k)({
+                            windowDimensions: windowDimensions,
+                            currentSize: 72,
+                        }), height: windowDimensions && windowDimensions.windowWidth < 1200
+                        ? 42
+                        : (0, check4k_1.getAdaptiveValueWithCheck4k)({
+                            windowDimensions: windowDimensions,
+                            currentSize: 72,
+                        }), alt: 'avatar' })),
+            react_1.default.createElement("div", { className: 'cardLinkContent' },
+                react_1.default.createElement("div", { className: 'content' },
+                    react_1.default.createElement("h4", { className: 'caption' }, userName),
+                    Boolean(followings) && (react_1.default.createElement("p", { className: 'text' },
+                        followings,
+                        " Followers"))),
+                isNeedRenderBtn && (react_1.default.createElement("div", { className: 'button' }, isFollowed ? (react_1.default.createElement(SecondaryButton_1.default, { variant: 'disabled', text: 'Unfollow', onClick: handleUnFollow })) : (react_1.default.createElement(SecondaryButton_1.default, { variant: 'regular', text: '+ Follow', onClick: handleFollow }))))))));
+};
+exports.ProfileUserCard = ProfileUserCard;
+var templateObject_1;

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

@@ -0,0 +1,33 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileRank = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var utils_1 = require("@ludo.ninja/utils");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var _system_1 = require("@system");
+// Styles
+var RangeContainer = styled_components_1.default.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"])), colors_1.InactiveButtonColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(4));
+var RangeValue = styled_components_1.default.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 && (0, utils_1.getRankColor)(props.rankValue); }, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(2), (0, _4k_1.adaptiveValueCalc)(2));
+// Components
+var ProfileRank = function (_a) {
+    var rank = _a.rank;
+    return (react_1.default.createElement(_system_1.Box, null,
+        react_1.default.createElement(_system_1.H6, { color: colors_1.TextGrayColor, mb: 4 }, "LUDO RANK"),
+        react_1.default.createElement(_system_1.Flex, null,
+            react_1.default.createElement(_system_1.Flex, { alignItems: "center", borderRadius: 6, width: '100%' },
+                react_1.default.createElement(_system_1.H2, { mr: 16, color: colors_1.BlackColor }, rank ? rank : 'unknown'),
+                react_1.default.createElement(RangeContainer, null,
+                    react_1.default.createElement(RangeValue, { rankValue: rank, style: { width: "".concat(rank, "%") } }))))));
+};
+exports.ProfileRank = ProfileRank;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,28 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileStats = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var rank_1 = require("@/components/profile/rank");
+var Palete_1 = __importDefault(require("@/system/Palete"));
+// Styles
+var StyledProfileStats = styled_components_1.default.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"])), ScreenWidth_1.mediaQuery.minWidthTablet, ScreenWidth_1.mediaQuery.minWidthDesktop, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(244));
+// Components
+var ProfileStats = function (_a) {
+    var rank = _a.rank;
+    return (react_1.default.createElement(StyledProfileStats, null,
+        react_1.default.createElement(Palete_1.default, null,
+            react_1.default.createElement("div", { className: "profileStatsBlock" },
+                react_1.default.createElement(rank_1.ProfileRank, { rank: rank })))));
+};
+exports.ProfileStats = ProfileStats;
+var templateObject_1;