@ludo.ninja/components 2.0.9 → 2.0.11

package/build/system/Cards/CreationCard/CardHead.js

@@ -1,36 +1,30 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardHead = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const router_1 = require("next/router");
-const addCreationToFavoriteList_1 = __importDefault(require("../../../components/favoriteList/add/addCreationToFavoriteList"));
-const CollectionCreationEntity_1 = __importDefault(require("../../../dto/Collection/CollectionCreationEntity"));
-const ItemType_1 = require("../../../dto/common/ItemType");
-const store_1 = require("../../../modules/user/store");
-const env_1 = require("../../../store/env");
-const ui_1 = require("../../../store/ui");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const CardRank_1 = __importDefault(require("../CardRank"));
-const Headicons_1 = __importDefault(require("../Styles/Headicons"));
-const auth_1 = require("../../../utils/auth");
-const screen_1 = require("../../../utils/screen");
-const addToFavListIcon_svg_1 = __importDefault(require("../../../public/cards/addToFavListIcon"));
-const addToGalleryIcon_svg_1 = __importDefault(require("../../../public/cards/addToGalleryIcon"));
-const heart_svg_1 = __importDefault(require("../../../public/cards/heart"));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter } from 'next/router';
+import AddCreationToFavoriteList from "../../../components/favoriteList/add/addCreationToFavoriteList";
+import CollectionCreationEntity from "../../../dto/Collection/CollectionCreationEntity";
+import { LabelKeys } from "../../../dto/common/ItemType";
+import { useUserStore } from "../../../modules/user/store";
+import { useEnvStore } from "../../../store/env";
+import { useUiStore } from "../../../store/ui";
+import { ScreenWidth } from "../../../styles/ScreenWidth";
+import CardRank from "../CardRank";
+import StyledHeadIcons from "../Styles/Headicons";
+import { useRedirectToLoginWindow } from "../../../utils/auth";
+import { useWindowDimensionsWithServerInitial } from "../../../utils/screen";
+import AddToFavListIcon from "../../../public/cards/addToFavListIcon";
+import AddToGalleryIcon from "../../../public/cards/addToGalleryIcon";
+import AddToLikesIcon from "../../../public/cards/heart";
 // Component
-const CardHead = ({ creation, isRegularCard, isIconLiked, addLikeToCard, deleteLikeFromCard, isUserProfile, isDisabled, isShowCheckbox, currentMyGalleryId, }) => {
-    const redirectToLoginWindow = (0, auth_1.useRedirectToLoginWindow)();
-    const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
-    const openModalSidebarPortal = (0, ui_1.useUiStore)((state) => state.openModalSidebarPortal);
-    const isSignedIn = (0, store_1.useUserStore)((state) => state.isSignedIn);
+export const CardHead = ({ creation, isRegularCard, isIconLiked, addLikeToCard, deleteLikeFromCard, isUserProfile, isDisabled, isShowCheckbox, currentMyGalleryId, }) => {
+    const redirectToLoginWindow = useRedirectToLoginWindow();
+    const isProd = useEnvStore((state) => state.isProd);
+    const openModalSidebarPortal = useUiStore((state) => state.openModalSidebarPortal);
+    const isSignedIn = useUserStore((state) => state.isSignedIn);
     const isLicked = isIconLiked && isSignedIn;
-    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    const { windowDimensions } = useWindowDimensionsWithServerInitial();
     const isMobile = !!(windowDimensions?.windowWidth &&
-        windowDimensions.windowWidth <= ScreenWidth_1.ScreenWidth.DESKTOP);
-    const router = (0, router_1.useRouter)();
+        windowDimensions.windowWidth <= ScreenWidth.DESKTOP);
+    const router = useRouter();
     const isGallery = router.pathname.includes('gallery');
     const handleClick = async (e, type) => {
         e.preventDefault();
@@ -39,38 +33,37 @@ const CardHead = ({ creation, isRegularCard, isIconLiked, addLikeToCard, deleteL
             redirectToLoginWindow();
         }
         else if (type === 'fav-list') {
-            openModalSidebarPortal((0, jsx_runtime_1.jsx)(addCreationToFavoriteList_1.default, { ids: [
-                    creation instanceof CollectionCreationEntity_1.default
+            openModalSidebarPortal(_jsx(AddCreationToFavoriteList, { ids: [
+                    creation instanceof CollectionCreationEntity
                         ? `${creation.getItemType() + '.' + creation.getCreationId()}`
                         : creation.getCreationId(),
                 ], currentMyGalleryId: currentMyGalleryId }));
         }
         else if (type === 'likes') {
             if (!isLicked) {
-                await addLikeToCard(creation instanceof CollectionCreationEntity_1.default &&
-                    creation.getItemType() !== ItemType_1.LabelKeys.collection
+                await addLikeToCard(creation instanceof CollectionCreationEntity &&
+                    creation.getItemType() !== LabelKeys.collection
                     ? creation.getCollectionCreationId()
                     : creation.getItemId());
             }
             else {
-                await deleteLikeFromCard(creation instanceof CollectionCreationEntity_1.default &&
-                    creation.getItemType() !== ItemType_1.LabelKeys.collection
+                await deleteLikeFromCard(creation instanceof CollectionCreationEntity &&
+                    creation.getItemType() !== LabelKeys.collection
                     ? creation.getCollectionCreationId()
                     : creation.getItemId());
             }
         }
     };
     const renderLikeButton = () => {
-        if ([ItemType_1.LabelKeys.asset, ItemType_1.LabelKeys.collection].includes(creation.getItemType())) {
-            return ((0, jsx_runtime_1.jsx)("div", { className: `icon like ${isLicked ? 'liked' : ''}`, onClick: (e) => handleClick(e, 'likes'), children: (0, jsx_runtime_1.jsx)(heart_svg_1.default, {}) }));
+        if ([LabelKeys.asset, LabelKeys.collection].includes(creation.getItemType())) {
+            return (_jsx("div", { className: `icon like ${isLicked ? 'liked' : ''}`, onClick: (e) => handleClick(e, 'likes'), children: _jsx(AddToLikesIcon, {}) }));
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Headicons_1.default, { isMobile: isMobile, style: isDisabled
+    return (_jsxs(StyledHeadIcons, { isMobile: isMobile, style: isDisabled
             ? {
                 pointerEvents: 'none',
             }
-            : {}, children: [(0, jsx_runtime_1.jsx)("div", { className: 'rank', children: (0, jsx_runtime_1.jsx)(CardRank_1.default, { rank: creation.getRank() }) }), !isProd() && !isShowCheckbox && ((0, jsx_runtime_1.jsxs)("div", { className: "icons", children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", onClick: (e) => handleClick(e, isRegularCard || !isUserProfile || isGallery
+            : {}, children: [_jsx("div", { className: 'rank', children: _jsx(CardRank, { rank: creation.getRank() }) }), !isProd() && !isShowCheckbox && (_jsxs("div", { className: "icons", children: [_jsx("div", { className: "icon", onClick: (e) => handleClick(e, isRegularCard || !isUserProfile || isGallery
                             ? 'fav-list'
-                            : 'gallery'), children: isRegularCard || !isUserProfile || isGallery ? ((0, jsx_runtime_1.jsx)(addToFavListIcon_svg_1.default, {})) : ((0, jsx_runtime_1.jsx)(addToGalleryIcon_svg_1.default, {})) }), renderLikeButton()] }))] }));
+                            : 'gallery'), children: isRegularCard || !isUserProfile || isGallery ? (_jsx(AddToFavListIcon, {})) : (_jsx(AddToGalleryIcon, {})) }), renderLikeButton()] }))] }));
 };
-exports.CardHead = CardHead;

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

@@ -1,73 +1,44 @@
-"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 __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.CreationCard = exports.CreationCardWithCheckboxState = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const link_1 = __importDefault(require("next/link"));
-const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
-const styled_components_1 = __importStar(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-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"));
-const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
-const index_1 = require("../../index");
-const CardCheckbox_1 = __importDefault(require("../CardCheckbox"));
-const CardContent_1 = __importDefault(require("../CardContent"));
-const CardCategory_1 = __importDefault(require("../CardContent/CardCategory"));
-const CardLikes_1 = __importDefault(require("../CardContent/CardLikes"));
-const CardHead_1 = require("./CardHead");
-const Head_1 = __importDefault(require("../Styles/Head"));
-const Headicons_1 = __importDefault(require("../Styles/Headicons"));
-const likes_1 = __importDefault(require("../../../hooks/likes"));
-const useToGalleryAsset_1 = require("../../../modules/gallery/useToGalleryAsset");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Link from 'next/link';
+import Skeleton from 'react-loading-skeleton';
+import styled, { css } from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { useEnvStore } from "../../../store/env";
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { WhiteColor } from "../../../styles/colors";
+import BoxShadow from "../../../styles/mixins/boxShadow";
+import BoxTransform from "../../../styles/mixins/boxTransform";
+import { Flex } from "../../index";
+import CardCheckBox from "../CardCheckbox";
+import CardContent from "../CardContent";
+import CardCategory from "../CardContent/CardCategory";
+import CardLikes from "../CardContent/CardLikes";
+import { CardHead } from "./CardHead";
+import StyledCardHead from "../Styles/Head";
+import StyledHeadIcons from "../Styles/Headicons";
+import useLikes from "../../../hooks/likes";
+import { getIsActiveCreation, useToGalleryStore, } from "../../../modules/gallery/useToGalleryAsset";
 // Styles
-const StyledRegularCard = styled_components_1.default.div `
+const StyledRegularCard = styled.div `
   position: relative;
-  background-color: ${colors_1.WhiteColor};
+  background-color: ${WhiteColor};
   border-radius: 6px;
-  ${boxShadow_1.default};
-  ${boxTransform_1.default};
-  // ${(props) => (props.isNeedTransform ? null : boxTransform_1.default)}
+  ${BoxShadow};
+  ${BoxTransform};
+  // ${(props) => (props.isNeedTransform ? null : BoxTransform)}
 
   min-height: ${(props) => (props.isNeedHeight ? '346px' : '')};
 
   ${(props) => props.isShowCheckbox
-    ? (0, styled_components_1.css) `
-          ${Headicons_1.default} {
+    ? css `
+          ${StyledHeadIcons} {
             transition: 0.2s opacity ease-in;
             opacity: 1 !important;
           }
         `
-    : (0, styled_components_1.css) `
-          &:hover ${Headicons_1.default} {
+    : css `
+          &:hover ${StyledHeadIcons} {
             transition: 0.2s opacity ease-in;
             opacity: 1 !important;
           }
@@ -78,35 +49,34 @@ const StyledRegularCard = styled_components_1.default.div `
     flex-direction: column;
   }
 
-  ${ScreenWidth_1.mediaQuery.maxWidthTablet} {
+  ${mediaQuery.maxWidthTablet} {
     width: 164px;
     min-height: ${(props) => (props.isNeedHeight ? '258px' : '')};
   }
 
-  ${ScreenWidth_1.mediaQuery.mobile} {
+  ${mediaQuery.mobile} {
     width: 154px;
     min-height: ${(props) => (props.isNeedHeight ? '244px' : '')};
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+  ${mediaQuery.minWidthFourK} {
+    border-radius: ${adaptiveValueCalc(6)};
 
-    min-height: ${(props) => props.isNeedHeight ? (0, _4k_1.adaptiveValueCalc)(346) : ''};
+    min-height: ${(props) => props.isNeedHeight ? adaptiveValueCalc(346) : ''};
   }
 `;
 // Component
-const CreationCardWithCheckboxState = (props) => {
-    const { toggleCreationToGallery, isActiveGalleryMode, creationsToGallery } = (0, useToGalleryAsset_1.useToGalleryStore)((state) => ({
+export const CreationCardWithCheckboxState = (props) => {
+    const { toggleCreationToGallery, isActiveGalleryMode, creationsToGallery } = useToGalleryStore((state) => ({
         toggleCreationToGallery: state.toggleCreationToGallery,
         isActiveGalleryMode: state.isActiveGalleryMode,
         creationsToGallery: state.creationsToGallery,
     }));
-    return ((0, jsx_runtime_1.jsx)(exports.CreationCard, { ...props, isShowCheckbox: isActiveGalleryMode, isActiveCheckbox: (0, useToGalleryAsset_1.getIsActiveCreation)(creationsToGallery, props.creation), toggleCreationToGallery: toggleCreationToGallery }));
+    return (_jsx(CreationCard, { ...props, isShowCheckbox: isActiveGalleryMode, isActiveCheckbox: getIsActiveCreation(creationsToGallery, props.creation), toggleCreationToGallery: toggleCreationToGallery }));
 };
-exports.CreationCardWithCheckboxState = CreationCardWithCheckboxState;
-const CreationCard = ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard = true, isShowCheckbox, isActiveCheckbox, toggleCreationToGallery, currentMyGalleryId, }) => {
-    const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
-    const { likes, addLike, deleteLike } = (0, likes_1.default)({
+export const CreationCard = ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard = true, isShowCheckbox, isActiveCheckbox, toggleCreationToGallery, currentMyGalleryId, }) => {
+    const isProd = useEnvStore((state) => state.isProd);
+    const { likes, addLike, deleteLike } = useLikes({
         defaultLikesCount: likesDynamicInfo?.likesNum || creation.getLikes(),
         defaultIsLiked: likesDynamicInfo?.isLikedByUser || creation.getIsLiked(),
         itemType: creation.getItemType(),
@@ -115,10 +85,9 @@ const CreationCard = ({ creationName, creation, isNeedHeight, likesDynamicInfo,
     });
     // Todo cardLink
     const isHide = isProd();
-    const HideLink = isHide ? react_1.default.Fragment : link_1.default;
-    return ((0, jsx_runtime_1.jsxs)(StyledRegularCard, { isNeedHeight: isNeedHeight, isNeedTransform: isNeedShowMoreButton, isShowCheckbox: isShowCheckbox, children: [isShowCheckbox && ((0, jsx_runtime_1.jsx)(CardCheckbox_1.default, { isActiveCheckbox: !!isActiveCheckbox, onChange: () => {
+    const HideLink = isHide ? React.Fragment : Link;
+    return (_jsxs(StyledRegularCard, { isNeedHeight: isNeedHeight, isNeedTransform: isNeedShowMoreButton, isShowCheckbox: isShowCheckbox, children: [isShowCheckbox && (_jsx(CardCheckBox, { isActiveCheckbox: !!isActiveCheckbox, onChange: () => {
                     toggleCreationToGallery?.(creation);
-                } })), (0, jsx_runtime_1.jsxs)(HideLink, { className: "linkRegularCard", href: creation.getCreationLink(), children: [(0, jsx_runtime_1.jsxs)(Head_1.default, { children: [creation.detectMediaType().displaySingleMedia(), (0, jsx_runtime_1.jsx)(CardHead_1.CardHead, { isRegularCard: !!isRegularCard, isIconLiked: likes.isLiked, creation: creation, addLikeToCard: addLike, deleteLikeFromCard: deleteLike, isUserProfile: isUserProfile || false, isDisabled: !!isLoadingLikes, isShowCheckbox: isShowCheckbox, currentMyGalleryId: currentMyGalleryId })] }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { creationName: creationName, firstName: creation.getCreatorAddress(), secondName: creation.getName(), cuttedSecondName: creation.getCuttedSecondName(!isMobile), itemId: creation.getItemId(), isNeedShowMoreButton: isNeedShowMoreButton || false, href: creation.getCreationLink(), children: (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: "end", justifyContent: 'space-between', children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: creation.getLabel() }), !isProd() &&
-                                    (isLoadingLikes ? ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { style: { borderRadius: '3px' }, height: "100%", width: "30px" })) : ((0, jsx_runtime_1.jsx)(CardLikes_1.default, { isLiked: likes.isLiked, likes: likes.likesCount })))] }) })] })] }));
+                } })), _jsxs(HideLink, { className: "linkRegularCard", href: creation.getCreationLink(), children: [_jsxs(StyledCardHead, { children: [creation.detectMediaType().displaySingleMedia(), _jsx(CardHead, { isRegularCard: !!isRegularCard, isIconLiked: likes.isLiked, creation: creation, addLikeToCard: addLike, deleteLikeFromCard: deleteLike, isUserProfile: isUserProfile || false, isDisabled: !!isLoadingLikes, isShowCheckbox: isShowCheckbox, currentMyGalleryId: currentMyGalleryId })] }), _jsx(CardContent, { creationName: creationName, firstName: creation.getCreatorAddress(), secondName: creation.getName(), cuttedSecondName: creation.getCuttedSecondName(!isMobile), itemId: creation.getItemId(), isNeedShowMoreButton: isNeedShowMoreButton || false, href: creation.getCreationLink(), children: _jsxs(Flex, { alignItems: "end", justifyContent: 'space-between', children: [_jsx(CardCategory, { label: creation.getLabel() }), !isProd() &&
+                                    (isLoadingLikes ? (_jsx(Skeleton, { style: { borderRadius: '3px' }, height: "100%", width: "30px" })) : (_jsx(CardLikes, { isLiked: likes.isLiked, likes: likes.likesCount })))] }) })] })] }));
 };
-exports.CreationCard = CreationCard;

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

@@ -1,30 +1,25 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": 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 ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_1 = require("../../../styles/colors");
-const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
-const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
-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"));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { WhiteColor } from "../../../styles/colors";
+import BoxShadow from "../../../styles/mixins/boxShadow";
+import BoxTransform from "../../../styles/mixins/boxTransform";
+import CardContent from "../CardContent";
+import CardLikes from "../CardContent/CardLikes";
+import StyledMultiHead from "../Styles/MultiHead";
+import { Flex } from "../../index";
+import DefaultGalleryIcon from "../../../public/gallery/defaultImage";
+import CardCategory from '../CardContent/CardCategory';
+import CardImage from '../CardMedia/CardImage';
 // Styles
-const StyledMultiCard = styled_components_1.default.div `
+const StyledMultiCard = styled.div `
   position: relative;
-  background-color: ${colors_1.WhiteColor};
+  background-color: ${WhiteColor};
   border-radius: 6px;
-  ${boxShadow_1.default};
-  ${boxTransform_1.default};
+  ${BoxShadow};
+  ${BoxTransform};
   @media (max-width: 1200px) {
     height: max-content;
   }
@@ -69,21 +64,21 @@ const StyledMultiCard = styled_components_1.default.div `
     }
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+  ${mediaQuery.minWidthFourK} {
+    border-radius: ${adaptiveValueCalc(6)};
     .media {
       & img {
-        border-radius: ${(0, _4k_1.adaptiveValueCalc)(3)};
+        border-radius: ${adaptiveValueCalc(3)};
       }
       & video {
-        border-radius: ${(0, _4k_1.adaptiveValueCalc)(3)};
+        border-radius: ${adaptiveValueCalc(3)};
       }
     }
 
     .media.digital {
       & svg {
-        width: ${(0, _4k_1.adaptiveValueCalc)(20)};
-        height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+        width: ${adaptiveValueCalc(20)};
+        height: ${adaptiveValueCalc(20)};
       }
     }
   }
@@ -91,7 +86,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'
+        return (_jsx("div", { className: media.type?.name === 'CardVideo' || media.type?.name === 'CardAudio'
                 ? 'media digital'
                 : 'media', children: media }, mediaKey));
     };
@@ -114,17 +109,17 @@ const MultiMediaCard = ({ gallery, assets, collections, }) => {
                 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, _jsx(CardImage, { alt: `${collection.getName()} ${collection.getAddress() || ''}`, imgSrc: collection.getOriginalUrls()?.[0] ?? '', errorImg: '/noContent/noContent.svg' })));
             }
             else {
-                cardsMedia.push(mediaTemplate(i, (0, jsx_runtime_1.jsx)(defaultImage_svg_1.default, {})));
+                cardsMedia.push(mediaTemplate(i, _jsx(DefaultGalleryIcon, {})));
             }
         }
         return cardsMedia;
     };
     const secondName = gallery.getGalleryUsername() !== '' ? gallery.getGalleryUsername() : '';
     // const userCreationAddresses = gallery?.getGalleryCreations()[0]?.getOwnersAddresses();
-    return ((0, jsx_runtime_1.jsx)(StyledMultiCard, { children: (0, jsx_runtime_1.jsxs)(link_1.default, { href: 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 (_jsx(StyledMultiCard, { children: _jsxs(Link, { href: gallery.getCreationLink(), children: [_jsx(StyledMultiHead, { children: renderMedia() }), _jsx(CardContent, { firstName: gallery.getGalleryName(), secondName: secondName, wallets: gallery.getGalleryUserWallets(), isNeedShowMoreButton: false, itemId: gallery.getGalleryId(), children: _jsxs(Flex, { alignItems: "flex-end", justifyContent: 'space-between', children: [_jsx(CardCategory, { label: gallery.getLabel() }), _jsx(CardLikes, { isLiked: false, likes: 0 })] }) })] }) }));
 };
 // Export
-exports.default = MultiMediaCard;
+export default MultiMediaCard;

package/build/system/Cards/Styles/Content.js

@@ -1,13 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
 // Styles
-const styled_components_1 = __importDefault(require("styled-components"));
-const colors_1 = require("../../../styles/colors");
-const typography_1 = require("../../../styles/typography");
-const StyledContentCard = styled_components_1.default.div `
+import styled from 'styled-components';
+import { BlackColor, TextGrayColor } from "../../../styles/colors";
+import { MainText, TextSmall } from "../../../styles/typography";
+const StyledContentCard = styled.div `
   display: flex;
   flex-direction: column;
   padding: 12px 16px;
@@ -19,13 +14,13 @@ const StyledContentCard = styled_components_1.default.div `
 
     &Artist {
       .artist_name {
-        ${typography_1.TextSmall};
-        color: ${colors_1.TextGrayColor};
+        ${TextSmall};
+        color: ${TextGrayColor};
         line-height: 1.39em;
       }
       .art_name {
-        ${typography_1.MainText};
-        color: ${colors_1.BlackColor};
+        ${MainText};
+        color: ${BlackColor};
         line-height: 1.47em;
         margin-bottom: 0;
       }
@@ -37,4 +32,4 @@ const StyledContentCard = styled_components_1.default.div `
     padding: 12px;
   }
 `;
-exports.default = StyledContentCard;
+export default StyledContentCard;

package/build/system/Cards/Styles/Head.js

@@ -1,13 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from "../../../styles/ScreenWidth";
 // Styles
-const StyledCardHead = styled_components_1.default.div `
+const StyledCardHead = styled.div `
   position: relative;
   height: 252px;
   width: 252px;
@@ -37,9 +32,9 @@ const StyledCardHead = styled_components_1.default.div `
     width: 154px;
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    height: ${(0, _4k_1.adaptiveValueCalc)(252)};
-    width: ${(0, _4k_1.adaptiveValueCalc)(252)};
+  ${mediaQuery.minWidthFourK} {
+    height: ${adaptiveValueCalc(252)};
+    width: ${adaptiveValueCalc(252)};
   }
 `;
-exports.default = StyledCardHead;
+export default StyledCardHead;

package/build/system/Cards/Styles/Headicons.js

@@ -1,14 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
 // Styles
-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 StyledHeadIcons = styled_components_1.default.div `
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { BlackColor, TextDarkGrayColor, WhiteColor } from "../../../styles/colors";
+const StyledHeadIcons = styled.div `
   transition: 0.2s opacity ease-out;
   opacity: 0;
 
@@ -42,7 +37,7 @@ const StyledHeadIcons = styled_components_1.default.div `
     display: flex;
     align-items: center;
     justify-content: center;
-    background: ${colors_1.WhiteColor};
+    background: ${WhiteColor};
     border-radius: 6px;
     width: ${(props) => (props.isMobile ? '24px' : '36px')};
     height: ${(props) => (props.isMobile ? '24px' : '36px')};
@@ -56,7 +51,7 @@ const StyledHeadIcons = styled_components_1.default.div `
       height: ${(props) => (props.isMobile ? '12px' : '18px')};
 
       path {
-        fill: ${colors_1.TextDarkGrayColor};
+        fill: ${TextDarkGrayColor};
         transition: fill 0.2s;
       }
     }
@@ -66,7 +61,7 @@ const StyledHeadIcons = styled_components_1.default.div `
       transition: transform 0.2s;
 
       path {
-        fill: ${colors_1.BlackColor};
+        fill: ${BlackColor};
         transition: fill 0.2s;
       }
     }
@@ -82,40 +77,40 @@ const StyledHeadIcons = styled_components_1.default.div `
     }
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+  ${mediaQuery.minWidthFourK} {
     &:before {
-      height: ${(0, _4k_1.adaptiveValueCalc)(100)};
-      border-top-left-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-      border-top-right-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+      height: ${adaptiveValueCalc(100)};
+      border-top-left-radius: ${adaptiveValueCalc(6)};
+      border-top-right-radius: ${adaptiveValueCalc(6)};
     }
 
     .rank {
-      top: ${(0, _4k_1.adaptiveValueCalc)(16)};
-      left: ${(0, _4k_1.adaptiveValueCalc)(16)};
+      top: ${adaptiveValueCalc(16)};
+      left: ${adaptiveValueCalc(16)};
     }
 
     .icons {
-      top: ${(0, _4k_1.adaptiveValueCalc)(16)};
-      right: ${(0, _4k_1.adaptiveValueCalc)(7)};
+      top: ${adaptiveValueCalc(16)};
+      right: ${adaptiveValueCalc(7)};
     }
 
     .icon {
-      border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-      width: ${(props) => (props.isMobile ? '24px' : (0, _4k_1.adaptiveValueCalc)(36))};
-      height: ${(props) => (props.isMobile ? '24px' : (0, _4k_1.adaptiveValueCalc)(36))};
+      border-radius: ${adaptiveValueCalc(6)};
+      width: ${(props) => (props.isMobile ? '24px' : adaptiveValueCalc(36))};
+      height: ${(props) => (props.isMobile ? '24px' : adaptiveValueCalc(36))};
 
       svg {
-        width: ${(props) => (props.isMobile ? '13px' : (0, _4k_1.adaptiveValueCalc)(20))};
-        height: ${(props) => (props.isMobile ? '12px' : (0, _4k_1.adaptiveValueCalc)(18))};
+        width: ${(props) => (props.isMobile ? '13px' : adaptiveValueCalc(20))};
+        height: ${(props) => (props.isMobile ? '12px' : adaptiveValueCalc(18))};
       }
     }
 
     .icon.like {
-      margin-left: ${(0, _4k_1.adaptiveValueCalc)(12)};
+      margin-left: ${adaptiveValueCalc(12)};
     }
   }
 `;
 StyledHeadIcons.defaultProps = {
     isMobile: false,
 };
-exports.default = StyledHeadIcons;
+export default StyledHeadIcons;

package/build/system/Cards/Styles/Image.js

@@ -1,12 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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 StyledImg = styled_components_1.default.img `
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from "../../../styles/ScreenWidth";
+const StyledImg = styled.img `
   display: block;
   width: 100%;
   height: 100%;
@@ -16,9 +11,9 @@ const StyledImg = styled_components_1.default.img `
   opacity: ${(props) => (props.isLoading ? '0' : '1')};
   transition: opacity ease-in 0.3s;
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    border-top-left-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-    border-top-right-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+  ${mediaQuery.minWidthFourK} {
+    border-top-left-radius: ${adaptiveValueCalc(6)};
+    border-top-right-radius: ${adaptiveValueCalc(6)};
   }
 `;
-exports.default = StyledImg;
+export default StyledImg;