@ludo.ninja/components 1.7.5 → 1.7.7

package/dist/system/Img/ImageInterceptor/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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageInterceptor = void 0;
+var react_1 = __importStar(require("react"));
+var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var SImage = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  & *:not(img) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 10;\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  position: relative;\n\n  & *:not(img) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 10;\n    width: 100%;\n    height: 100%;\n  }\n"])));
+var ImageInterceptor = function (_a) {
+    var children = _a.children, _b = _a.fallback, fallback = _b === void 0 ? '/noContent/noContent.svg' : _b, _c = _a.isShowSkeleton, isShowSkeleton = _c === void 0 ? true : _c, borderRadiusSkeleton = _a.borderRadiusSkeleton, className = _a.className;
+    var _d = (0, react_1.useState)(children.props.src !== fallback), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = (0, react_1.useState)(false), isError = _e[0], setIsError = _e[1];
+    return (react_1.default.createElement(SImage, { className: className },
+        react_1.default.cloneElement(children, {
+            src: isError ? fallback : children.props.src,
+            onLoad: function () {
+                setIsLoading(false);
+            },
+            onError: function () {
+                setIsError(true);
+                setIsLoading(false);
+            },
+        }),
+        isShowSkeleton && isLoading && (react_1.default.createElement(react_loading_skeleton_1.default, { className: 'skeleton', width: children.props.width || '100%', height: children.props.height || '100%', borderRadius: borderRadiusSkeleton || children.props.borderRadius || 2 }))));
+};
+exports.ImageInterceptor = ImageInterceptor;
+var templateObject_1;

package/dist/system/Img/Profilepic/index.js

@@ -0,0 +1,39 @@
+"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.ProfilePic = void 0;
+var react_1 = __importDefault(require("react"));
+var image_1 = __importDefault(require("next/image"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var ImageInterceptor_1 = require("@/system/Img/ImageInterceptor");
+var check4k_1 = require("@/utils/adaptive/check4k");
+var screen_1 = require("@/utils/screen");
+var StyledProfilePic = (0, styled_components_1.default)(image_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n"], ["\n  border-radius: 50%;\n"])));
+var getProfilePicProps = function (size) {
+    return {
+        width: size,
+        height: size,
+    };
+};
+var ProfilePic = function (_a) {
+    var userPicSrc = _a.userPicSrc, _b = _a.size, size = _b === void 0 ? 40 : _b;
+    var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
+    var _c = getProfilePicProps(size), width = _c.width, height = _c.height;
+    return (react_1.default.createElement(ImageInterceptor_1.ImageInterceptor, { borderRadiusSkeleton: '50%' },
+        react_1.default.createElement(StyledProfilePic, { src: userPicSrc, width: (0, check4k_1.getAdaptiveValueWithCheck4k)({
+                windowDimensions: windowDimensions,
+                currentSize: width,
+            }), height: (0, check4k_1.getAdaptiveValueWithCheck4k)({
+                windowDimensions: windowDimensions,
+                currentSize: height,
+            }), priority: true, alt: 'ProfilePic' })));
+};
+exports.ProfilePic = ProfilePic;
+exports.ProfilePic.displayName = 'ProfilePic';
+var templateObject_1;

package/dist/system/Img/Userpic/{UserPic.test.jsx → UserPic.test.js}

@@ -1,10 +1,15 @@
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { render, screen } from '@testing-library/react';
-import 'jest-styled-components';
-import { useUserStore } from '@/modules/user/store';
-import useFetchUserpic from '@/api/server-medias/queries/useFetchUserPic';
-import UserPic from '@/system/Img/Userpic';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+require("@testing-library/jest-dom/extend-expect");
+var react_2 = require("@testing-library/react");
+require("jest-styled-components");
+var store_1 = require("@/modules/user/store");
+var useFetchUserPic_1 = __importDefault(require("@/api/server-medias/queries/useFetchUserPic"));
+var Userpic_1 = __importDefault(require("@/system/Img/Userpic"));
 jest.mock('@/modules/user/store');
 jest.mock('@/api/server-medias/queries/useFetchUserPic');
 jest.mock('@/utils/env', function () { return ({
@@ -13,12 +18,12 @@ jest.mock('@/utils/env', function () { return ({
 jest.mock('@/public/defaultUserpics/defaultUserpic.svg', function () { return 'div'; });
 describe('UserPic Component', function () {
     beforeEach(function () {
-        useUserStore.mockReturnValue({
+        store_1.useUserStore.mockReturnValue({
             isSignedIn: true,
             isLoadingProfileData: false,
             profileData: null,
         });
-        useFetchUserpic.mockReturnValue({
+        useFetchUserPic_1.default.mockReturnValue({
             load: jest.fn(),
             userPic: 'fetched-user-pic.svg',
             loading: false,
@@ -28,7 +33,7 @@ describe('UserPic Component', function () {
         });
     });
     test('renders default user picture when no user picture is available', function () {
-        useFetchUserpic.mockReturnValue({
+        useFetchUserPic_1.default.mockReturnValue({
             load: jest.fn(),
             userPic: null,
             loading: false,
@@ -36,17 +41,16 @@ describe('UserPic Component', function () {
             refetch: jest.fn(),
             error: undefined,
         });
-        render(<div>
-        test
-        <UserPic userId="123" width={100} height={100} isNeedBoxTransform={false}/>
-      </div>);
-        var defaultUserPic = screen
+        (0, react_2.render)(react_1.default.createElement("div", null,
+            "test",
+            react_1.default.createElement(Userpic_1.default, { userId: "123", width: 100, height: 100, isNeedBoxTransform: false })));
+        var defaultUserPic = react_2.screen
             .getByText('test')
             .querySelector('.userPicImage');
         expect(defaultUserPic).toBeInTheDocument();
     });
     test('renders loading skeleton when loading', function () {
-        useFetchUserpic.mockReturnValueOnce({
+        useFetchUserPic_1.default.mockReturnValueOnce({
             load: jest.fn(),
             userPic: null,
             loading: true,
@@ -54,11 +58,10 @@ describe('UserPic Component', function () {
             refetch: jest.fn(),
             error: undefined,
         });
-        render(<div>
-        test
-        <UserPic userId="123" width={100} height={100} isNeedBoxTransform={false}/>
-      </div>);
-        var skeleton = screen
+        (0, react_2.render)(react_1.default.createElement("div", null,
+            "test",
+            react_1.default.createElement(Userpic_1.default, { userId: "123", width: 100, height: 100, isNeedBoxTransform: false })));
+        var skeleton = react_2.screen
             .getByText('test')
             .querySelector('.react-loading-skeleton');
         expect(skeleton).toBeInTheDocument();

package/dist/system/Img/Userpic/index.js

@@ -0,0 +1,99 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var image_1 = __importDefault(require("next/image"));
+var link_1 = __importDefault(require("next/link"));
+var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+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 useFetchUserPic_1 = __importDefault(require("@/api/server-medias/queries/useFetchUserPic"));
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
+var ImageInterceptor_1 = require("@/system/Img/ImageInterceptor");
+var env_1 = require("@/utils/env");
+var defaultUserpic_svg_1 = __importDefault(require("@/public/defaultUserpics/defaultUserpic.svg"));
+// Styles
+var StyledHeaderUserPic = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  .userPicBlock {\n    display: flex;\n  }\n\n  .userPicImage {\n    border-radius: 50%;\n    width: ", ";\n    height: ", ";\n\n    ", " {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  ", "\n  .userPicBlock {\n    display: flex;\n  }\n\n  .userPicImage {\n    border-radius: 50%;\n    width: ", ";\n    height: ", ";\n\n    ", " {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), function (props) { return (props.isNeedBoxTransform ? boxTransform_1.default : null); }, function (props) { return props.imageWidth; }, function (props) { return props.imageHeight; }, ScreenWidth_1.mediaQuery.minWidthFourK, function (props) {
+    return (0, _4k_1.adaptiveValueCalc)(Number(props.imageWidth.replace('px', '')));
+}, function (props) {
+    return (0, _4k_1.adaptiveValueCalc)(Number(props.imageHeight.replace('px', '')));
+});
+// Component
+var UserPic = function (_a) {
+    var userId = _a.userId, width = _a.width, height = _a.height, isNeedBoxTransform = _a.isNeedBoxTransform, children = _a.children;
+    var _b = (0, store_1.useUserStore)(function (state) { return ({
+        isSignedIn: state.isSignedIn,
+        isLoadingProfileData: state.isLoadingProfileData,
+        profileData: state.profileData,
+    }); }), isSignedIn = _b.isSignedIn, isLoadingProfileData = _b.isLoadingProfileData, profileData = _b.profileData;
+    var _c = (0, useFetchUserPic_1.default)(), load = _c.load, userPic = _c.userPic, loading = _c.loading;
+    var profileUserPic = (profileData === null || profileData === void 0 ? void 0 : profileData.getUserPic({
+        mediaDomain: (0, env_1.getMediaENVDomain)(),
+    }).includes('1.svg'))
+        ? null
+        : profileData === null || profileData === void 0 ? void 0 : profileData.getUserPic({
+            mediaDomain: (0, env_1.getMediaENVDomain)(),
+        });
+    (0, react_1.useEffect)(function () {
+        if (isSignedIn &&
+            !isLoadingProfileData &&
+            (profileData === null || profileData === void 0 ? void 0 : profileData.getUserPic({
+                mediaDomain: (0, env_1.getMediaENVDomain)(),
+            }).includes('1.svg'))) {
+            load(userId);
+        }
+    }, [userId, isSignedIn, isLoadingProfileData, profileData]);
+    var renderDefaultUserPic = function () {
+        return react_1.default.createElement(defaultUserpic_svg_1.default, { className: 'userPicImage' });
+    };
+    var renderImage = function () {
+        return (react_1.default.createElement(ImageInterceptor_1.ImageInterceptor, { borderRadiusSkeleton: '50%' },
+            react_1.default.createElement(image_1.default, { src: (profileUserPic || userPic), className: 'userPicImage', width: width, height: height, priority: true, alt: 'ludo ninja userPick' })));
+    };
+    var renderImageOrDefaultUserPic = function () {
+        return profileUserPic || userPic ? renderImage() : renderDefaultUserPic();
+    };
+    var renderSkeleton = function () {
+        return react_1.default.createElement(react_loading_skeleton_1.default, { className: 'userPicImage' });
+    };
+    return (react_1.default.createElement(StyledHeaderUserPic, { isNeedBoxTransform: isNeedBoxTransform, imageWidth: "".concat(width, "px"), imageHeight: "".concat(height, "px") },
+        react_1.default.createElement(link_1.default, { href: "/profile/".concat(userId, "/nfts"), className: 'userPicBlock' },
+            loading || isLoadingProfileData
+                ? renderSkeleton()
+                : renderImageOrDefaultUserPic(),
+            children)));
+};
+// Export
+exports.default = UserPic;
+var templateObject_1;

package/dist/system/Img/index.js

@@ -1,4 +1,20 @@
-export * from './ExternalImage';
-export * from './Userpic';
-export * from './Profilepic';
-export * from './ImageInterceptor';
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ExternalImage"), exports);
+__exportStar(require("./Userpic"), exports);
+__exportStar(require("./Profilepic"), exports);
+__exportStar(require("./ImageInterceptor"), exports);

package/dist/system/Labels/ExperienceLabel/ExperienceLabel.test.js

@@ -0,0 +1,64 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+var ExperienceLabel_1 = __importDefault(require("../ExperienceLabel"));
+// Mock the Next.js Image component
+jest.mock('next/image', function () {
+    return function Image() {
+        return react_1.default.createElement("img", { alt: "Experience logo", width: 20, height: 20 });
+    };
+});
+describe('ExperienceLabel Component', function () {
+    test('renders with value and link', function () {
+        var props = {
+            value: 100,
+            link: '/profile/123',
+            loading: false,
+        };
+        (0, react_2.render)(react_1.default.createElement(ExperienceLabel_1.default, __assign({}, props)));
+        var xpText = react_2.screen.getByText('100 XP');
+        expect(xpText).toBeInTheDocument();
+        var imageAltText = react_2.screen.getByAltText('Experience logo');
+        expect(imageAltText).toBeInTheDocument();
+        var linkElement = react_2.screen.getByRole('link', { name: /100 XP/i });
+        expect(linkElement).toHaveAttribute('href', '/profile/123');
+    });
+    test('renders loading skeleton', function () {
+        var props = {
+            value: 0,
+            link: '/profile/123',
+            loading: true,
+        };
+        (0, react_2.render)(react_1.default.createElement("div", { "data-testid": 'test_container' },
+            react_1.default.createElement(ExperienceLabel_1.default, __assign({}, props))));
+        var skeletonElement = react_2.screen
+            .getByTestId('test_container')
+            .querySelector('.react-loading-skeleton');
+        expect(skeletonElement).toBeInTheDocument();
+    });
+    test('does not render when value is falsy', function () {
+        var props = {
+            value: 0,
+            link: '/profile/123',
+            loading: false,
+        };
+        (0, react_2.render)(react_1.default.createElement(ExperienceLabel_1.default, __assign({}, props)));
+        var xpText = react_2.screen.queryByText('0 XP');
+        expect(xpText).not.toBeInTheDocument();
+    });
+});

package/dist/system/Labels/ExperienceLabel/index.js

@@ -0,0 +1,44 @@
+"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 });
+var react_1 = __importDefault(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 ScreenWidth_1 = require("@/styles/ScreenWidth");
+var boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
+var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
+var SkeletonLabel_1 = __importDefault(require("@/system/Labels/SkeletonLabel"));
+var vars_1 = require("@/fonts/vars");
+// Styles
+var StyledExpTab = (0, styled_components_1.default)(link_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  display: flex;\n  gap: 8px;\n  user-select: none;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 5px 8px 5px 6px;\n  max-width: max-content;\n  min-width: 116px;\n  min-height: 32px;\n  border-radius: 24px;\n  background: ", ";\n\n  .value {\n    font-family: ", ";\n    font-size: 1.6em;\n    font-weight: 600;\n    line-height: 1.3;\n    color: ", ";\n  }\n  ", " {\n    gap: ", ";\n    padding: ", " ", "\n      ", " ", ";\n    min-width: ", ";\n    min-height: ", ";\n    border-radius: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n\n    .value {\n      font-size: ", ";\n    }\n  }\n"], ["\n  ", ";\n  ", ";\n  display: flex;\n  gap: 8px;\n  user-select: none;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 5px 8px 5px 6px;\n  max-width: max-content;\n  min-width: 116px;\n  min-height: 32px;\n  border-radius: 24px;\n  background: ", ";\n\n  .value {\n    font-family: ", ";\n    font-size: 1.6em;\n    font-weight: 600;\n    line-height: 1.3;\n    color: ", ";\n  }\n  ", " {\n    gap: ", ";\n    padding: ", " ", "\n      ", " ", ";\n    min-width: ", ";\n    min-height: ", ";\n    border-radius: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n\n    .value {\n      font-size: ", ";\n    }\n  }\n"])), boxShadow_1.default, boxTransform_1.default, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.experienceGradientLabel) === null || _c === void 0 ? void 0 : _c.gradient;
+}, vars_1.poppinsFontVarCss.css, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.experienceGradientLabel) === null || _c === void 0 ? void 0 : _c.color;
+}, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(5), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(5), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(116), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(16));
+//Component
+var ExperienceLabel = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? 0 : _b, link = _a.link, loading = _a.loading;
+    if (loading)
+        return react_1.default.createElement(SkeletonLabel_1.default, null);
+    if (!value)
+        return null;
+    return (react_1.default.createElement(StyledExpTab, { href: link },
+        react_1.default.createElement(image_1.default, { src: '/rewardsPage/XP_logo.svg', alt: "Experience logo", width: 20, height: 20 }),
+        react_1.default.createElement("p", { className: "value" },
+            value,
+            " XP")));
+};
+exports.default = ExperienceLabel;
+var templateObject_1;

package/dist/system/Labels/InviteLabel/InviteLabel.test.js

@@ -0,0 +1,56 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+var InviteLabel_1 = __importDefault(require("../InviteLabel"));
+describe('InviteLabel Component', function () {
+    test('renders with value and link', function () {
+        var props = {
+            value: 50,
+            link: '/invite/123',
+            loading: false,
+        };
+        (0, react_2.render)(react_1.default.createElement(InviteLabel_1.default, __assign({}, props)));
+        var inviteText = react_2.screen.getByText('50 invites');
+        expect(inviteText).toBeInTheDocument();
+        var linkElement = react_2.screen.getByRole('link', { name: /50 invites/i });
+        expect(linkElement).toHaveAttribute('href', '/invite/123');
+    });
+    test('renders loading skeleton', function () {
+        var props = {
+            value: 0,
+            link: '/invite/123',
+            loading: true,
+        };
+        (0, react_2.render)(react_1.default.createElement("div", { "data-testid": 'test_container' },
+            react_1.default.createElement(InviteLabel_1.default, __assign({}, props))));
+        var skeletonElement = react_2.screen
+            .getByTestId('test_container')
+            .querySelector('.react-loading-skeleton');
+        expect(skeletonElement).toBeInTheDocument();
+    });
+    test('does not render when value is falsy', function () {
+        var props = {
+            value: 0,
+            link: '/invite/123',
+            loading: false,
+        };
+        (0, react_2.render)(react_1.default.createElement(InviteLabel_1.default, __assign({}, props)));
+        var inviteText = react_2.screen.queryByText('0 invites');
+        expect(inviteText).not.toBeInTheDocument();
+    });
+});

package/dist/system/Labels/InviteLabel/index.js

@@ -0,0 +1,38 @@
+"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 });
+var react_1 = __importDefault(require("react"));
+var link_1 = __importDefault(require("next/link"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
+var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
+var SkeletonLabel_1 = __importDefault(require("@/system/Labels/SkeletonLabel"));
+var vars_1 = require("@/fonts/vars");
+// Styles
+var StyledExpTab = (0, styled_components_1.default)(link_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  display: flex;\n  user-select: none;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 5px 16px;\n  max-width: max-content;\n  min-width: 99px;\n  min-height: 32px;\n  border-radius: 24px;\n  background: ", ";\n\n  .value {\n    font-family: ", ";\n    font-size: 1.6em;\n    font-weight: 600;\n    line-height: 1.3;\n    color: ", ";\n  }\n"], ["\n  ", ";\n  ", ";\n  display: flex;\n  user-select: none;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 5px 16px;\n  max-width: max-content;\n  min-width: 99px;\n  min-height: 32px;\n  border-radius: 24px;\n  background: ", ";\n\n  .value {\n    font-family: ", ";\n    font-size: 1.6em;\n    font-weight: 600;\n    line-height: 1.3;\n    color: ", ";\n  }\n"])), boxShadow_1.default, boxTransform_1.default, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.inviteCodesGradientLabel) === null || _c === void 0 ? void 0 : _c.gradient;
+}, vars_1.poppinsFontVarCss.css, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.inviteCodesGradientLabel) === null || _c === void 0 ? void 0 : _c.color;
+});
+//Component
+var InviteLabel = function (_a) {
+    var value = _a.value, link = _a.link, loading = _a.loading;
+    if (loading)
+        return react_1.default.createElement(SkeletonLabel_1.default, null);
+    if (!value)
+        return null;
+    return (react_1.default.createElement(StyledExpTab, { href: link },
+        react_1.default.createElement("p", { className: "value " }, "".concat(value, " invites"))));
+};
+exports.default = InviteLabel;
+var templateObject_1;

package/dist/system/Labels/SkeletonLabel/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var SkeletonLabel_1 = __importDefault(require("@ludo.ninja/ui/build/system/Labels/SkeletonLabel"));
+exports.default = SkeletonLabel_1.default;

package/dist/system/Modals/Modal/Modal.test.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+require("@testing-library/jest-dom");
+var react_2 = require("@testing-library/react");
+var ui_1 = require("@/store/ui");
+var index_1 = __importDefault(require("@/system/Modals/Modal/index"));
+jest.mock('@/store/ui');
+describe('Modal Component', function () {
+    afterEach(react_2.cleanup);
+    test('open modal', function () {
+        var closeModalMock = jest.fn();
+        // Mock the useUiStore hook
+        ui_1.useUiStore.mockReturnValue({
+            contentModals: react_1.default.createElement("div", null, "test open"),
+            stylesModals: {},
+            isModalOpen: true,
+            closeModal: closeModalMock,
+        });
+        // Render the Modal component
+        (0, react_2.render)(react_1.default.createElement(index_1.default, null));
+        // Check if the modal content is in the document
+        var labelElement = react_2.screen.getByText('test open');
+        expect(labelElement).toBeInTheDocument();
+        // Check if the close icon is in the document
+        var closeIcon = react_2.screen.getByAltText('close');
+        expect(closeIcon).toBeInTheDocument();
+        // Simulate click on the close icon
+        closeIcon.click();
+        // Verify that the closeModal function was called
+        expect(closeModalMock).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/system/Modals/Modal/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 });
+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 ui_1 = require("@/store/ui");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var z_indexes_1 = require("@/styles/mixins/z-indexes");
+// import ModalCloseIcon from '@/public/modal/close.svg';
+var StyledModal = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 250px;\n  min-width: 300px;\n  width: auto;\n  z-index: ", ";\n  padding: 16px;\n  background-color: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: 8px;\n\n  @media (max-width: 767px) {\n    //top: 20%;\n    //left: 0;\n    //right: 0;\n    //transform: none;\n    //margin: auto;\n    max-width: 320px;\n    max-height: calc(var(--app-height) - 20px);\n    overflow: hidden;\n    .modalContent {\n      max-height: calc(var(--app-height) - 20px - 16px - 16px - 24px);\n      overflow-y: auto;\n    }\n  }\n\n  .modalCloseIcon {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    cursor: pointer;\n  }\n\n  .modalContent {\n    margin-top: 24px;\n  }\n\n  ", " {\n    min-height: ", ";\n    min-width: ", ";\n    padding: ", ";\n    border-radius: ", ";\n\n    .modalCloseIcon {\n      width: ", ";\n      height: ", ";\n      top: ", ";\n      right: ", ";\n    }\n\n    .modalContent {\n      margin-top: ", ";\n    }\n  }\n"], ["\n  min-height: 250px;\n  min-width: 300px;\n  width: auto;\n  z-index: ", ";\n  padding: 16px;\n  background-color: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: 8px;\n\n  @media (max-width: 767px) {\n    //top: 20%;\n    //left: 0;\n    //right: 0;\n    //transform: none;\n    //margin: auto;\n    max-width: 320px;\n    max-height: calc(var(--app-height) - 20px);\n    overflow: hidden;\n    .modalContent {\n      max-height: calc(var(--app-height) - 20px - 16px - 16px - 24px);\n      overflow-y: auto;\n    }\n  }\n\n  .modalCloseIcon {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    cursor: pointer;\n  }\n\n  .modalContent {\n    margin-top: 24px;\n  }\n\n  ", " {\n    min-height: ", ";\n    min-width: ", ";\n    padding: ", ";\n    border-radius: ", ";\n\n    .modalCloseIcon {\n      width: ", ";\n      height: ", ";\n      top: ", ";\n      right: ", ";\n    }\n\n    .modalContent {\n      margin-top: ", ";\n    }\n  }\n"])), z_indexes_1.zIndexModal.toString(), colors_1.WhiteColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(250), (0, _4k_1.adaptiveValueCalc)(300), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(24));
+var Modal = function () {
+    var _a = (0, ui_1.useUiStore)(function (state) { return ({
+        contentModals: state.contentModals,
+        stylesModals: state.stylesModals,
+        isModalOpen: state.isModalOpen,
+        closeModal: state.closeModal,
+    }); }), contentModals = _a.contentModals, isModalOpen = _a.isModalOpen, closeModal = _a.closeModal, stylesModals = _a.stylesModals;
+    if (!isModalOpen)
+        return null;
+    return (react_1.default.createElement(StyledModal, { style: stylesModals ? stylesModals : undefined },
+        react_1.default.createElement("img", { src: "/modal/close.svg", alt: "close", width: 24, height: 24, className: 'modalCloseIcon', onClick: closeModal }),
+        react_1.default.createElement("div", { className: "modalContent" }, contentModals)));
+};
+exports.default = Modal;
+var templateObject_1;