@ludo.ninja/components 2.2.12 → 2.2.14

package/build/system/Cards/CardCheckbox/index.js

@@ -4,10 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
 const ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const colors_1 = require("../../../styles/colors");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const styled_components_1 = __importDefault(require("styled-components"));
 // Styles
 const StyledCardCheckBox = styled_components_1.default.button `
   display: flex;
@@ -34,9 +35,9 @@ const StyledCardCheckBox = styled_components_1.default.button `
     }
 
     &::after {
-      content: '';
+      content: "";
       display: block;
-      background-image: url('/forms/checkbox/checked.svg');
+      background-image: url("${constants_1.staticLink}/forms/checkbox/checked.svg");
       background-size: cover;
       background-repeat: no-repeat;
       width: 32px;
@@ -76,13 +77,13 @@ const StyledCardCheckBox = styled_components_1.default.button `
   }
 `;
 // Component
-const CardCheckBox = ({ isActiveCheckbox, onChange, }) => {
+const CardCheckBox = ({ isActiveCheckbox, onChange }) => {
     return ((0, jsx_runtime_1.jsx)(StyledCardCheckBox, { onClick: (e) => {
-            console.log('StyledCardCheckBox click');
+            console.log("StyledCardCheckBox click");
             e.preventDefault();
             e.stopPropagation();
             onChange();
-        }, children: (0, jsx_runtime_1.jsx)("span", { className: `cardCustomCheckbox ${isActiveCheckbox ? 'active' : ''}` }) }));
+        }, children: (0, jsx_runtime_1.jsx)("span", { className: `cardCustomCheckbox ${isActiveCheckbox ? "active" : ""}` }) }));
 };
 // Export
 exports.default = CardCheckBox;

package/build/system/Cards/MultiMediaCard/index.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const link_1 = __importDefault(require("next/link"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const CardCategory_1 = __importDefault(require("../CardContent/CardCategory"));
+const CardImage_1 = __importDefault(require("../CardMedia/CardImage"));
+const env_1 = require("../../../store/env");
 const ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const colors_1 = require("../../../styles/colors");
 const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
@@ -15,11 +15,11 @@ const CardContent_1 = __importDefault(require("../CardContent"));
 const CardLikes_1 = __importDefault(require("../CardContent/CardLikes"));
 const MultiHead_1 = __importDefault(require("../Styles/MultiHead"));
 const index_1 = require("../../index");
-const defaultImage_svg_1 = __importDefault(require("../../../public/gallery/defaultImage"));
-const CardCategory_1 = __importDefault(require("../CardContent/CardCategory"));
-const CardImage_1 = __importDefault(require("../CardMedia/CardImage"));
+const constants_1 = require("@ludo.ninja/core/build/constants");
 const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
-const env_1 = require("../../../store/env");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const link_1 = __importDefault(require("next/link"));
+const styled_components_1 = __importDefault(require("styled-components"));
 // Styles
 const StyledMultiCard = styled_components_1.default.div `
   position: relative;
@@ -36,7 +36,7 @@ const StyledMultiCard = styled_components_1.default.div `
     height: 100%;
     aspect-ratio: 1 / 1;
 
-    & svg {
+    & .svg {
       width: 100%;
       height: 100%;
     }
@@ -57,17 +57,12 @@ const StyledMultiCard = styled_components_1.default.div `
   .media.digital {
     position: relative;
 
-    & svg {
+    & .svg {
       position: absolute;
       width: 20px;
       height: 20px;
       bottom: 0;
       right: 0;
-
-      & circle,
-      & path {
-        transform: scale(0.5);
-      }
     }
   }
 
@@ -83,7 +78,7 @@ const StyledMultiCard = styled_components_1.default.div `
     }
 
     .media.digital {
-      & svg {
+      & .svg {
         width: ${(0, _4k_1.adaptiveValueCalc)(20)};
         height: ${(0, _4k_1.adaptiveValueCalc)(20)};
       }
@@ -93,9 +88,7 @@ const StyledMultiCard = styled_components_1.default.div `
 // Component
 const MultiMediaCard = ({ gallery, assets, collections, }) => {
     const mediaTemplate = (mediaKey, media) => {
-        return ((0, jsx_runtime_1.jsx)("div", { className: media.type?.name === 'CardVideo' || media.type?.name === 'CardAudio'
-                ? 'media digital'
-                : 'media', children: media }, mediaKey));
+        return ((0, jsx_runtime_1.jsx)("div", { className: media.type?.name === "CardVideo" || media.type?.name === "CardAudio" ? "media digital" : "media", children: media }, mediaKey));
     };
     const renderMedia = () => {
         // if (
@@ -110,24 +103,23 @@ const MultiMediaCard = ({ gallery, assets, collections, }) => {
             const asset = assets?.find((asset) => {
                 return creationId === asset.getCreationId();
             });
-            const collection = collections?.find((collection) => collection.getCreationId() ===
-                creationId?.split('.').splice(1).join('.'));
+            const collection = collections?.find((collection) => collection.getCreationId() === creationId?.split(".").splice(1).join("."));
             if (asset) {
                 cardsMedia.push(mediaTemplate(i, asset.detectMediaType().displaySingleMedia()));
             }
             else if (collection) {
-                cardsMedia.push(mediaTemplate(i, (0, jsx_runtime_1.jsx)(CardImage_1.default, { alt: `${collection.getName()} ${collection.getAddress() || ''}`, imgSrc: collection.getOriginalUrls()?.[0] ?? '', errorImg: '/noContent/noContent.svg' })));
+                cardsMedia.push(mediaTemplate(i, (0, jsx_runtime_1.jsx)(CardImage_1.default, { alt: `${collection.getName()} ${collection.getAddress() || ""}`, imgSrc: collection.getOriginalUrls()?.[0] ?? "", errorImg: `${constants_1.staticLink}/public/noContent/noContent.svg` })));
             }
             else {
-                cardsMedia.push(mediaTemplate(i, (0, jsx_runtime_1.jsx)(defaultImage_svg_1.default, {})));
+                cardsMedia.push(mediaTemplate(i, (0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/gallery/defaultImage.svg`, alt: "gallery_default", className: "svg" })));
             }
         }
         return cardsMedia;
     };
-    const secondName = gallery.getGalleryUsername() !== '' ? gallery.getGalleryUsername() : '';
+    const secondName = gallery.getGalleryUsername() !== "" ? gallery.getGalleryUsername() : "";
     // const userCreationAddresses = gallery?.getGalleryCreations()[0]?.getOwnersAddresses();
     const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
-    return ((0, jsx_runtime_1.jsx)(StyledMultiCard, { children: (0, jsx_runtime_1.jsxs)(link_1.default, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}${gallery.getCreationLink()}`, children: [(0, jsx_runtime_1.jsx)(MultiHead_1.default, { children: renderMedia() }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { firstName: gallery.getGalleryName(), secondName: secondName, wallets: gallery.getGalleryUserWallets(), isNeedShowMoreButton: false, itemId: gallery.getGalleryId(), children: (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: "flex-end", justifyContent: 'space-between', children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: gallery.getLabel() }), (0, jsx_runtime_1.jsx)(CardLikes_1.default, { isLiked: false, likes: 0 })] }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(StyledMultiCard, { children: (0, jsx_runtime_1.jsxs)(link_1.default, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}${gallery.getCreationLink()}`, children: [(0, jsx_runtime_1.jsx)(MultiHead_1.default, { children: renderMedia() }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { firstName: gallery.getGalleryName(), secondName: secondName, wallets: gallery.getGalleryUserWallets(), isNeedShowMoreButton: false, itemId: gallery.getGalleryId(), children: (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: "flex-end", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: gallery.getLabel() }), (0, jsx_runtime_1.jsx)(CardLikes_1.default, { isLiked: false, likes: 0 })] }) })] }) }));
 };
 // Export
 exports.default = MultiMediaCard;

package/build/system/Forms/Selects/DesktopSelect/index.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { ICollectionFilterInput, ICreationFilterInput } from '@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema';
 import { ISelectInput } from '../MobileSelect';
+import { ICollectionFilterInput, ICreationFilterInput } from "@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema";
+import React from "react";
 interface Props {
     options: ISelectInput[];
     defaultOptionValue: string;

package/build/system/Forms/Selects/DesktopSelect/index.js

@@ -27,18 +27,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const vars_1 = require("../../../../fonts/vars");
 const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
 const colors_1 = require("../../../../styles/colors");
 const typography_1 = require("../../../../styles/typography");
 const scale_1 = require("../../../../utils/adaptive/scale");
 const screen_1 = require("../../../../utils/screen");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const react_1 = require("react");
 const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
 const react_select_1 = __importStar(require("react-select"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const vars_1 = require("../../../../fonts/vars");
-const arrow_down_svg_1 = __importDefault(require("../../../../public/selects/arrow_down"));
 const SelectElement = (0, styled_components_1.default)(react_select_1.default) `
   font-family: ${vars_1.dmsansFontVarCss.css};
 
@@ -120,7 +119,7 @@ const SelectElement = (0, styled_components_1.default)(react_select_1.default) `
     }
 
     .react-select__indicator {
-      transform: ${(props) => 'transform' in props.scale && props.scale.transform};
+      transform: ${(props) => "transform" in props.scale && props.scale.transform};
     }
 
     .react-select__indicators {
@@ -129,8 +128,7 @@ const SelectElement = (0, styled_components_1.default)(react_select_1.default) `
 
     .react-select__menu {
       margin: ${(0, _4k_1.adaptiveValueCalc)(4)} 0;
-      box-shadow: 0 ${(0, _4k_1.adaptiveValueCalc)(8)} ${(0, _4k_1.adaptiveValueCalc)(16)}
-        ${(0, _4k_1.adaptiveValueCalc)(-16)} rgba(33, 21, 95, 0.1);
+      box-shadow: 0 ${(0, _4k_1.adaptiveValueCalc)(8)} ${(0, _4k_1.adaptiveValueCalc)(16)} ${(0, _4k_1.adaptiveValueCalc)(-16)} rgba(33, 21, 95, 0.1);
       border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
     }
 
@@ -146,12 +144,10 @@ const SelectElement = (0, styled_components_1.default)(react_select_1.default) `
 `;
 const minHeight = 40;
 const DropdownIndicator = (props) => {
-    return ((0, jsx_runtime_1.jsx)(react_select_1.components.DropdownIndicator, { ...props, children: (0, jsx_runtime_1.jsx)(arrow_down_svg_1.default, { style: {
-                transition: 'transform 200ms',
-                transform: props.selectProps.menuIsOpen
-                    ? 'rotate(180deg)'
-                    : 'rotate(0)',
-            } }) }));
+    return ((0, jsx_runtime_1.jsx)(react_select_1.components.DropdownIndicator, { ...props, children: (0, jsx_runtime_1.jsx)("svg", { style: {
+                transition: "transform 200ms",
+                transform: props.selectProps.menuIsOpen ? "rotate(180deg)" : "rotate(0)",
+            }, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M16 11L12 15L8 11", stroke: "#696F91", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
 const DesktopSelect = ({ options, isLoading, onChangeHandler, defaultOptionValue, name, ...props }) => {
     const [selectedOption, setSelectedOption] = (0, react_1.useState)(options.find((option) => {

package/build/system/Img/ImageInterceptor/ImageInterceptor.test.js

@@ -4,10 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const index_1 = require("./index");
+const constants_1 = require("@ludo.ninja/core/build/constants");
 const react_1 = require("@testing-library/react");
 const styled_components_1 = __importDefault(require("styled-components"));
-const index_1 = require("./index");
-jest.mock('react-loading-skeleton', () => function TestSkeleton(props) {
+jest.mock("react-loading-skeleton", () => function TestSkeleton(props) {
     return ((0, jsx_runtime_1.jsx)("div", { "data-testid": "skeleton", style: {
             borderRadius: props.borderRadius,
         } }));
@@ -16,30 +17,30 @@ const TestImage = styled_components_1.default.img `
   width: 100px;
   height: 100px;
 `;
-const validSrc = '/tests/test_1.svg';
-describe('ImageInterceptor Component', () => {
-    test('renders the skeleton while the image is loading', () => {
+const validSrc = "/tests/test_1.svg";
+describe("ImageInterceptor Component", () => {
+    test("renders the skeleton while the image is loading", () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.ImageInterceptor, { children: (0, jsx_runtime_1.jsx)(TestImage, { src: validSrc }) }));
-        expect(react_1.screen.getByTestId('skeleton')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId("skeleton")).toBeInTheDocument();
     });
-    test('renders the image after it has loaded', () => {
+    test("renders the image after it has loaded", () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.ImageInterceptor, { children: (0, jsx_runtime_1.jsx)(TestImage, { src: validSrc }) }));
-        const image = react_1.screen.getByRole('img');
+        const image = react_1.screen.getByRole("img");
         react_1.fireEvent.load(image);
-        expect(react_1.screen.queryByTestId('skeleton')).not.toBeInTheDocument();
-        expect(image).toHaveAttribute('src', validSrc);
+        expect(react_1.screen.queryByTestId("skeleton")).not.toBeInTheDocument();
+        expect(image).toHaveAttribute("src", validSrc);
     });
-    test('renders the fallback image if an error occurs', () => {
+    test("renders the fallback image if an error occurs", () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.ImageInterceptor, { children: (0, jsx_runtime_1.jsx)(TestImage, { src: "invalid-image.jpg" }) }));
-        const image = react_1.screen.getByRole('img');
+        const image = react_1.screen.getByRole("img");
         react_1.fireEvent.error(image);
-        expect(react_1.screen.queryByTestId('skeleton')).not.toBeInTheDocument();
-        expect(image).toHaveAttribute('src', '/noContent/noContent.svg');
+        expect(react_1.screen.queryByTestId("skeleton")).not.toBeInTheDocument();
+        expect(image).toHaveAttribute("src", `${constants_1.staticLink}/public/noContent/noContent.svg`);
     });
-    test('applies the correct styles to the skeleton', () => {
+    test("applies the correct styles to the skeleton", () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.ImageInterceptor, { borderRadiusSkeleton: 10, children: (0, jsx_runtime_1.jsx)(TestImage, { src: validSrc }) }));
-        expect(react_1.screen.getByTestId('skeleton')).toHaveStyle({
-            borderRadius: '10px',
+        expect(react_1.screen.getByTestId("skeleton")).toHaveStyle({
+            borderRadius: "10px",
         });
     });
 });

package/build/system/Img/ImageInterceptor/index.d.ts

@@ -1,4 +1,4 @@
-import { DetailedReactHTMLElement, ReactElement } from 'react';
+import { DetailedReactHTMLElement, ReactElement } from "react";
 interface IImageInterceptor {
     fallback?: string;
     isShowSkeleton?: boolean;

package/build/system/Img/ImageInterceptor/index.js

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageInterceptor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("@ludo.ninja/core/build/constants");
 const react_1 = __importStar(require("react"));
 const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -43,7 +44,7 @@ const SImage = styled_components_1.default.div `
     height: 100%;
   }
 `;
-const ImageInterceptor = ({ children, fallback = '/noContent/noContent.svg', isShowSkeleton = true, borderRadiusSkeleton, className, }) => {
+const ImageInterceptor = ({ children, fallback = `${constants_1.staticLink}/public/noContent/noContent.svg`, isShowSkeleton = true, borderRadiusSkeleton, className, }) => {
     const [isLoading, setIsLoading] = (0, react_1.useState)(children.props.src !== fallback);
     const [isError, setIsError] = (0, react_1.useState)(false);
     return ((0, jsx_runtime_1.jsxs)(SImage, { className: className, children: [react_1.default.cloneElement(children, {
@@ -55,6 +56,6 @@ const ImageInterceptor = ({ children, fallback = '/noContent/noContent.svg', isS
                     setIsError(true);
                     setIsLoading(false);
                 },
-            }), isShowSkeleton && isLoading && ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: 'skeleton', width: children.props.width || '100%', height: children.props.height || '100%', borderRadius: borderRadiusSkeleton || children.props.borderRadius || 2 }))] }));
+            }), isShowSkeleton && isLoading && ((0, jsx_runtime_1.jsx)(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;

package/build/system/Img/Userpic/UserPicSpa.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-declare const UserPicSpa: ({ userId, width, height, isNeedBoxTransform, children, Image, Link }: {
+import React from "react";
+declare const UserPicSpa: ({ userId, width, height, isNeedBoxTransform, children, Image, Link, }: {
     userId: string;
     width: number;
     height: number;

package/build/system/Img/Userpic/UserPicSpa.js

@@ -4,18 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const useFetchUserPic_1 = __importDefault(require("../../../api/server-medias/queries/useFetchUserPic"));
 const store_1 = require("../../../modules/user/store");
 const env_1 = require("../../../store/env");
 const ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
 const ImageInterceptor_1 = require("../ImageInterceptor");
-const useFetchUserPic_1 = __importDefault(require("../../../api/server-medias/queries/useFetchUserPic"));
-const defaultUserpic_svg_1 = __importDefault(require("../../../public/defaultUserpics/defaultUserpic"));
+const constants_1 = require("@ludo.ninja/core/build/constants");
 const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const react_1 = require("react");
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const styled_components_1 = __importDefault(require("styled-components"));
 // Styles
 const StyledHeaderUserPic = styled_components_1.default.div `
   ${(props) => (props.isNeedBoxTransform ? boxTransform_1.default : null)}
@@ -29,13 +29,13 @@ const StyledHeaderUserPic = styled_components_1.default.div `
     height: ${(props) => props.imageHeight};
 
     ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-      width: ${(props) => (0, _4k_1.adaptiveValueCalc)(Number(props.imageWidth.replace('px', '')))};
-      height: ${(props) => (0, _4k_1.adaptiveValueCalc)(Number(props.imageHeight.replace('px', '')))};
+      width: ${(props) => (0, _4k_1.adaptiveValueCalc)(Number(props.imageWidth.replace("px", "")))};
+      height: ${(props) => (0, _4k_1.adaptiveValueCalc)(Number(props.imageHeight.replace("px", "")))};
     }
   }
 `;
 // Component
-const UserPicSpa = ({ userId, width, height, isNeedBoxTransform, children, Image, Link }) => {
+const UserPicSpa = ({ userId, width, height, isNeedBoxTransform, children, Image, Link, }) => {
     const getMediaENVDomain = (0, env_1.useEnvStore)((state) => state.getMediaDomain);
     const { isSignedIn, isLoadingProfileData, profileData } = (0, store_1.useUserStore)((state) => ({
         isSignedIn: state.isSignedIn,
@@ -47,7 +47,7 @@ const UserPicSpa = ({ userId, width, height, isNeedBoxTransform, children, Image
         ?.getUserPic({
         mediaDomain: getMediaENVDomain(),
     })
-        .includes('1.svg')
+        .includes("1.svg")
         ? null
         : profileData?.getUserPic({
             mediaDomain: getMediaENVDomain(),
@@ -59,25 +59,23 @@ const UserPicSpa = ({ userId, width, height, isNeedBoxTransform, children, Image
                 ?.getUserPic({
                 mediaDomain: getMediaENVDomain(),
             })
-                .includes('1.svg')) {
+                .includes("1.svg")) {
             load(userId);
         }
     }, [userId, isSignedIn, isLoadingProfileData, profileData]);
     const renderDefaultUserPic = () => {
-        return (0, jsx_runtime_1.jsx)(defaultUserpic_svg_1.default, { className: 'userPicImage' });
+        return ((0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/defaultUserpics/defaultUserpic.svg`, alt: "user_logo", className: "userPicImage" }));
     };
     const renderImage = () => {
-        return ((0, jsx_runtime_1.jsx)(ImageInterceptor_1.ImageInterceptor, { borderRadiusSkeleton: '50%', children: (0, jsx_runtime_1.jsx)(Image, { src: (profileUserPic || userPic), className: 'userPicImage', width: width, height: height, priority: true, alt: 'ludo ninja userPick' }) }));
+        return ((0, jsx_runtime_1.jsx)(ImageInterceptor_1.ImageInterceptor, { borderRadiusSkeleton: "50%", children: (0, jsx_runtime_1.jsx)(Image, { src: (profileUserPic || userPic), className: "userPicImage", width: width, height: height, priority: true, alt: "ludo ninja userPick" }) }));
     };
     const renderImageOrDefaultUserPic = () => {
         return profileUserPic || userPic ? renderImage() : renderDefaultUserPic();
     };
     const renderSkeleton = () => {
-        return (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: 'userPicImage' });
+        return (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: "userPicImage" });
     };
     const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
-    return ((0, jsx_runtime_1.jsx)(StyledHeaderUserPic, { isNeedBoxTransform: isNeedBoxTransform, imageWidth: `${width}px`, imageHeight: `${height}px`, children: (0, jsx_runtime_1.jsxs)(Link, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["profile"]}/${userId}/nfts`, className: 'userPicBlock', children: [loading || isLoadingProfileData
-                    ? renderSkeleton()
-                    : renderImageOrDefaultUserPic(), children] }) }));
+    return ((0, jsx_runtime_1.jsx)(StyledHeaderUserPic, { isNeedBoxTransform: isNeedBoxTransform, imageWidth: `${width}px`, imageHeight: `${height}px`, children: (0, jsx_runtime_1.jsxs)(Link, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["profile"]}/${userId}/nfts`, className: "userPicBlock", children: [loading || isLoadingProfileData ? renderSkeleton() : renderImageOrDefaultUserPic(), children] }) }));
 };
 exports.default = UserPicSpa;

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

@@ -4,20 +4,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const image_1 = __importDefault(require("next/image"));
-const link_1 = __importDefault(require("next/link"));
-const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const useFetchUserPic_1 = __importDefault(require("../../../api/server-medias/queries/useFetchUserPic"));
 const store_1 = require("../../../modules/user/store");
 const env_1 = require("../../../store/env");
 const ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
 const ImageInterceptor_1 = require("../ImageInterceptor");
-const useFetchUserPic_1 = __importDefault(require("../../../api/server-medias/queries/useFetchUserPic"));
-// import DefaultUserPicIcon from "@/public/defaultUserpics/defaultUserpic.svg";
 const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const image_1 = __importDefault(require("next/image"));
+const link_1 = __importDefault(require("next/link"));
+const react_1 = require("react");
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const styled_components_1 = __importDefault(require("styled-components"));
 // Styles
 const StyledHeaderUserPic = styled_components_1.default.div `
   ${(props) => (props.isNeedBoxTransform ? boxTransform_1.default : null)}
@@ -67,7 +66,7 @@ const UserPic = ({ userId, width, height, isNeedBoxTransform, children, }) => {
     }, [userId, isSignedIn, isLoadingProfileData, profileData]);
     const renderDefaultUserPic = () => {
         // return <DefaultUserPicIcon className={"userPicImage"} />;
-        return (0, jsx_runtime_1.jsxs)("svg", { className: "userPicImage", viewBox: "0 0 120 120", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#clip0_1631_36821)", children: [(0, jsx_runtime_1.jsx)("mask", { id: "mask0_1631_36821", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "120", height: "120", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 57.5C0 18.5 18.5 0 57.5 0H62.5C101.5 0 120 18.5 120 57.5V62.5C120 101.5 101.5 120 62.5 120H57.5C18.5 120 0 101.5 0 62.5V57.5Z", fill: "#C4C4C4" }) }), (0, jsx_runtime_1.jsxs)("g", { mask: "url(#mask0_1631_36821)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 60C0 10.59 10.59 0 60 0C109.41 0 120 10.59 120 60C120 109.41 109.41 120 60 120C10.59 120 0 109.41 0 60Z", fill: "#6048FF" }), (0, jsx_runtime_1.jsx)("g", { filter: "url(#filter0_f_1631_36821)", children: (0, jsx_runtime_1.jsx)("path", { d: "M122.923 22.164L117.289 24.1018C117.289 24.1018 70.1542 14.04 40.7826 25.6887C11.411 37.3374 -13.0768 73.5812 -13.0768 73.5812L-18.7103 75.519L-19.1418 61.7571L-3.51315 25.4694L19.3845 -0.953981L59.6143 -19.4288L101.911 -12.3395L122.923 22.164Z", fill: "#BB6BD9" }) }), (0, jsx_runtime_1.jsx)("g", { filter: "url(#filter1_f_1631_36821)", children: (0, jsx_runtime_1.jsx)("path", { d: "M-24.8609 52.797L-18.6129 53.7922C-18.6129 53.7922 -0.143277 -5.59894 21.8596 38.1435C43.8624 81.8859 103.432 73.9375 103.432 73.9375L133.707 73.2504L129.729 87.0304L102.492 114.722L71.155 128.949L25.0516 126.409L-14.9265 97.6202L-24.8609 52.797Z", fill: "#4FD4F8", fillOpacity: "0.7" }) })] })] }), (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("filter", { id: "filter0_f_1631_36821", x: "-29.1416", y: "-29.4287", width: "162.064", height: "114.948", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [(0, jsx_runtime_1.jsx)("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), (0, jsx_runtime_1.jsx)("feGaussianBlur", { stdDeviation: "5", result: "effect1_foregroundBlur_1631_36821" })] }), (0, jsx_runtime_1.jsxs)("filter", { id: "filter1_f_1631_36821", x: "-34.8613", y: "12.0684", width: "178.568", height: "126.88", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [(0, jsx_runtime_1.jsx)("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), (0, jsx_runtime_1.jsx)("feGaussianBlur", { stdDeviation: "5", result: "effect1_foregroundBlur_1631_36821" })] }), (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_1631_36821", children: (0, jsx_runtime_1.jsx)("rect", { width: "120", height: "120", rx: "60", fill: "white" }) })] })] });
+        return ((0, jsx_runtime_1.jsxs)("svg", { className: "userPicImage", viewBox: "0 0 120 120", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#clip0_1631_36821)", children: [(0, jsx_runtime_1.jsx)("mask", { id: "mask0_1631_36821", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "120", height: "120", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 57.5C0 18.5 18.5 0 57.5 0H62.5C101.5 0 120 18.5 120 57.5V62.5C120 101.5 101.5 120 62.5 120H57.5C18.5 120 0 101.5 0 62.5V57.5Z", fill: "#C4C4C4" }) }), (0, jsx_runtime_1.jsxs)("g", { mask: "url(#mask0_1631_36821)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 60C0 10.59 10.59 0 60 0C109.41 0 120 10.59 120 60C120 109.41 109.41 120 60 120C10.59 120 0 109.41 0 60Z", fill: "#6048FF" }), (0, jsx_runtime_1.jsx)("g", { filter: "url(#filter0_f_1631_36821)", children: (0, jsx_runtime_1.jsx)("path", { d: "M122.923 22.164L117.289 24.1018C117.289 24.1018 70.1542 14.04 40.7826 25.6887C11.411 37.3374 -13.0768 73.5812 -13.0768 73.5812L-18.7103 75.519L-19.1418 61.7571L-3.51315 25.4694L19.3845 -0.953981L59.6143 -19.4288L101.911 -12.3395L122.923 22.164Z", fill: "#BB6BD9" }) }), (0, jsx_runtime_1.jsx)("g", { filter: "url(#filter1_f_1631_36821)", children: (0, jsx_runtime_1.jsx)("path", { d: "M-24.8609 52.797L-18.6129 53.7922C-18.6129 53.7922 -0.143277 -5.59894 21.8596 38.1435C43.8624 81.8859 103.432 73.9375 103.432 73.9375L133.707 73.2504L129.729 87.0304L102.492 114.722L71.155 128.949L25.0516 126.409L-14.9265 97.6202L-24.8609 52.797Z", fill: "#4FD4F8", fillOpacity: "0.7" }) })] })] }), (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("filter", { id: "filter0_f_1631_36821", x: "-29.1416", y: "-29.4287", width: "162.064", height: "114.948", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [(0, jsx_runtime_1.jsx)("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), (0, jsx_runtime_1.jsx)("feGaussianBlur", { stdDeviation: "5", result: "effect1_foregroundBlur_1631_36821" })] }), (0, jsx_runtime_1.jsxs)("filter", { id: "filter1_f_1631_36821", x: "-34.8613", y: "12.0684", width: "178.568", height: "126.88", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [(0, jsx_runtime_1.jsx)("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), (0, jsx_runtime_1.jsx)("feGaussianBlur", { stdDeviation: "5", result: "effect1_foregroundBlur_1631_36821" })] }), (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_1631_36821", children: (0, jsx_runtime_1.jsx)("rect", { width: "120", height: "120", rx: "60", fill: "white" }) })] })] }));
     };
     const renderImage = () => {
         return ((0, jsx_runtime_1.jsx)(ImageInterceptor_1.ImageInterceptor, { borderRadiusSkeleton: "50%", children: (0, jsx_runtime_1.jsx)(image_1.default, { src: (profileUserPic || userPic), className: "userPicImage", width: width, height: height, 
@@ -81,9 +80,7 @@ const UserPic = ({ userId, width, height, isNeedBoxTransform, children, }) => {
         return (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: "userPicImage" });
     };
     const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
-    return ((0, jsx_runtime_1.jsx)(StyledHeaderUserPic, { isNeedBoxTransform: isNeedBoxTransform, imageWidth: `${width}px`, imageHeight: `${height}px`, children: (0, jsx_runtime_1.jsxs)(link_1.default, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["profile"]}/${userId}/nfts`, className: "userPicBlock", children: [loading || isLoadingProfileData
-                    ? renderSkeleton()
-                    : renderImageOrDefaultUserPic(), children] }) }));
+    return ((0, jsx_runtime_1.jsx)(StyledHeaderUserPic, { isNeedBoxTransform: isNeedBoxTransform, imageWidth: `${width}px`, imageHeight: `${height}px`, children: (0, jsx_runtime_1.jsxs)(link_1.default, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["profile"]}/${userId}/nfts`, className: "userPicBlock", children: [loading || isLoadingProfileData ? renderSkeleton() : renderImageOrDefaultUserPic(), children] }) }));
 };
 // Export
 exports.default = UserPic;

package/build/system/Labels/ExperienceLabel/index.d.ts

@@ -1,4 +1,4 @@
-declare const ExperienceLabel: ({ value, link, loading, }: {
+declare const ExperienceLabel: ({ value, link, loading }: {
     value: number;
     link: string;
     loading: boolean;

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

@@ -4,15 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const image_1 = __importDefault(require("next/image"));
-const link_1 = __importDefault(require("next/link"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const vars_1 = require("../../../fonts/vars");
 const ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
 const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
 const SkeletonLabel_1 = __importDefault(require("../SkeletonLabel"));
-const vars_1 = require("../../../fonts/vars");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const image_1 = __importDefault(require("next/image"));
+const link_1 = __importDefault(require("next/link"));
+const styled_components_1 = __importDefault(require("styled-components"));
 // Styles
 const StyledExpTab = (0, styled_components_1.default)(link_1.default) `
   ${boxShadow_1.default};
@@ -38,8 +39,7 @@ const StyledExpTab = (0, styled_components_1.default)(link_1.default) `
   }
   ${ScreenWidth_1.mediaQuery.minWidthFourK} {
     gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
-    padding: ${(0, _4k_1.adaptiveValueCalc)(5)} ${(0, _4k_1.adaptiveValueCalc)(8)}
-      ${(0, _4k_1.adaptiveValueCalc)(5)} ${(0, _4k_1.adaptiveValueCalc)(6)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(5)} ${(0, _4k_1.adaptiveValueCalc)(8)} ${(0, _4k_1.adaptiveValueCalc)(5)} ${(0, _4k_1.adaptiveValueCalc)(6)};
     min-width: ${(0, _4k_1.adaptiveValueCalc)(116)};
     min-height: ${(0, _4k_1.adaptiveValueCalc)(32)};
     border-radius: ${(0, _4k_1.adaptiveValueCalc)(24)};
@@ -55,11 +55,11 @@ const StyledExpTab = (0, styled_components_1.default)(link_1.default) `
   }
 `;
 //Component
-const ExperienceLabel = ({ value = 0, link, loading, }) => {
+const ExperienceLabel = ({ value = 0, link, loading }) => {
     if (loading)
         return (0, jsx_runtime_1.jsx)(SkeletonLabel_1.default, {});
     if (!value)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(StyledExpTab, { href: link, children: [(0, jsx_runtime_1.jsx)(image_1.default, { src: '/rewardsPage/XP_logo.svg', alt: "Experience logo", width: 20, height: 20 }), (0, jsx_runtime_1.jsxs)("p", { className: `value`, children: [value, " XP"] })] }));
+    return ((0, jsx_runtime_1.jsxs)(StyledExpTab, { href: link, children: [(0, jsx_runtime_1.jsx)(image_1.default, { src: `${constants_1.staticLink}/public/rewardsPage/XP_logo.svg`, alt: "Experience logo", width: 20, height: 20 }), (0, jsx_runtime_1.jsxs)("p", { className: `value`, children: [value, " XP"] })] }));
 };
 exports.default = ExperienceLabel;

package/build/system/Modals/Modal/index.js

@@ -4,13 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
 const ui_1 = require("../../../store/ui");
 const ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const colors_1 = require("../../../styles/colors");
 const z_indexes_1 = require("../../../styles/mixins/z-indexes");
-// import ModalCloseIcon from '@/public/modal/close.svg';
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const styled_components_1 = __importDefault(require("styled-components"));
 const StyledModal = styled_components_1.default.div `
   min-height: 250px;
   min-width: 300px;
@@ -77,6 +77,6 @@ const Modal = () => {
     }));
     if (!isModalOpen)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(StyledModal, { style: stylesModals ? stylesModals : undefined, children: [(0, jsx_runtime_1.jsx)("img", { src: "/modal/close.svg", alt: "close", width: 24, height: 24, className: 'modalCloseIcon', onClick: closeModal }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: contentModals })] }));
+    return ((0, jsx_runtime_1.jsxs)(StyledModal, { style: stylesModals ? stylesModals : undefined, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/modal/close.svg`, alt: "close", width: 24, height: 24, className: "modalCloseIcon", onClick: closeModal }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: contentModals })] }));
 };
 exports.default = Modal;

package/build/system/Modals/ModalSidebar/ModalSidebarPortal.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-export declare const ModalSidebarPortal: ({ component, closeModal, }: {
+import { ReactNode } from "react";
+export declare const ModalSidebarPortal: ({ component, closeModal }: {
     component: ReactNode;
     closeModal: () => void;
 }) => import("react/jsx-runtime").JSX.Element;

package/build/system/Modals/ModalSidebar/ModalSidebarPortal.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalSidebarPortal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("@ludo.ninja/utils");
 const index_1 = require("./index");
-// import ModalCloseIcon from '@/public/modal/close.svg';
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const utils_1 = require("@ludo.ninja/utils");
 // minimize dom tree for optimize virtualization
-const ModalSidebarPortal = ({ component, closeModal, }) => ((0, jsx_runtime_1.jsx)(utils_1.PortalCreator, { children: (0, jsx_runtime_1.jsxs)(index_1.StyledModalSidebar, { children: [(0, jsx_runtime_1.jsx)("img", { src: "/modal/close.svg", alt: "close", width: 24, height: 24, className: 'modalCloseIcon', onClick: closeModal }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: component })] }) }));
+const ModalSidebarPortal = ({ component, closeModal }) => ((0, jsx_runtime_1.jsx)(utils_1.PortalCreator, { children: (0, jsx_runtime_1.jsxs)(index_1.StyledModalSidebar, { children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/modal/close.svg`, alt: "close", width: 24, height: 24, className: "modalCloseIcon", onClick: closeModal }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: component })] }) }));
 exports.ModalSidebarPortal = ModalSidebarPortal;

package/build/system/Modals/ModalSidebar/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledModalSidebar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
 const ui_1 = require("../../../store/ui");
 const ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const colors_1 = require("../../../styles/colors");
 const z_indexes_1 = require("../../../styles/mixins/z-indexes");
-// import ModalCloseIcon from '@/public/modal/close.svg';
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const styled_components_1 = __importDefault(require("styled-components"));
 exports.StyledModalSidebar = styled_components_1.default.div `
   min-height: 300px;
   //max-width: 536px;
@@ -73,6 +73,6 @@ const ModalSidebar = () => {
     }));
     if (!isModalSidebarOpen)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(exports.StyledModalSidebar, { children: [(0, jsx_runtime_1.jsx)("img", { src: "/modal/close.svg", alt: "close", width: 24, height: 24, className: 'modalCloseIcon', onClick: closeModalSidebar }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: contentModals })] }));
+    return ((0, jsx_runtime_1.jsxs)(exports.StyledModalSidebar, { children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/modal/close.svg`, alt: "close", width: 24, height: 24, className: "modalCloseIcon", onClick: closeModalSidebar }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: contentModals })] }));
 };
 exports.default = ModalSidebar;