@ludo.ninja/components 1.1.4 → 1.1.6

package/dist/system/Cards/CardsGrid/index.js

@@ -0,0 +1,48 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from 'styled-components';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { 
+// ProfileNetWorth,
+ProfileInterests, ProfileWallets, } from '@/components/profile';
+import MainButton from '@/system/Buttons/MainButton';
+import { isProd } from '@/utils/env';
+// Styles
+var StyledCardsGrid = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 24px 0;\n  display: flex;\n  justify-content: space-between;\n\n  .content {\n    display: grid;\n    grid-template-columns: ", ";\n    gap: 24px;\n    width: ", ";\n  }\n\n  .sidebar {\n    width: 100%;\n    margin-left: 32px;\n\n    ", " {\n      width: 156px;\n      margin-left: 24px;\n    }\n\n    ", " {\n      width: 244px;\n      margin-left: 0;\n    }\n\n    &OrganizeBtn {\n      margin-top: 16px;\n      display: block;\n      @media (min-width: 1200px) {\n        display: none;\n      }\n    }\n  }\n\n  @media (max-width: 1200px) {\n    .content {\n      gap: 16px;\n    }\n  }\n\n  @media (max-width: 767px) {\n    flex-direction: column-reverse;\n    .content {\n      gap: 12px;\n      grid-template-columns: ", ";\n      width: 100%;\n      margin-top: 16px;\n    }\n\n    .sidebar {\n      width: 100%;\n      margin-left: 0;\n\n      &OrganizeBtn {\n        display: none;\n      }\n    }\n  }\n"], ["\n  margin: 24px 0;\n  display: flex;\n  justify-content: space-between;\n\n  .content {\n    display: grid;\n    grid-template-columns: ", ";\n    gap: 24px;\n    width: ", ";\n  }\n\n  .sidebar {\n    width: 100%;\n    margin-left: 32px;\n\n    ", " {\n      width: 156px;\n      margin-left: 24px;\n    }\n\n    ", " {\n      width: 244px;\n      margin-left: 0;\n    }\n\n    &OrganizeBtn {\n      margin-top: 16px;\n      display: block;\n      @media (min-width: 1200px) {\n        display: none;\n      }\n    }\n  }\n\n  @media (max-width: 1200px) {\n    .content {\n      gap: 16px;\n    }\n  }\n\n  @media (max-width: 767px) {\n    flex-direction: column-reverse;\n    .content {\n      gap: 12px;\n      grid-template-columns: ", ";\n      width: 100%;\n      margin-top: 16px;\n    }\n\n    .sidebar {\n      width: 100%;\n      margin-left: 0;\n\n      &OrganizeBtn {\n        display: none;\n      }\n    }\n  }\n"])), function (props) {
+    if (props.isEmptyGallery) {
+        return '1fr';
+    }
+    else if (props.isTwoColumnLayout && !props.isForVirtualize) {
+        return '1fr 1fr 1fr';
+    }
+    else if (props.isForVirtualize) {
+        return '1fr';
+    }
+    else {
+        return '1fr 1fr 1fr 1fr';
+    }
+}, function (props) { return (props.isTwoColumnLayout ? '74.5%' : '100%'); }, mediaQuery.minWidthTablet, mediaQuery.minWidthDesktop, function (props) {
+    if (props.isEmptyGallery || props.isForVirtualize) {
+        return '1fr';
+    }
+    return '1fr 1fr';
+});
+// Component
+var CardsGrid = function (_a) {
+    var children = _a.children, isTwoColumnLayout = _a.isTwoColumnLayout, 
+    // isNeedShowNetWorth = true,
+    addMethod = _a.addMethod, creations = _a.creations, isEmptyGallery = _a.isEmptyGallery, isForVirtualize = _a.isForVirtualize, tabsSlot = _a.tabsSlot;
+    var _b = useState(Boolean(creations === null || creations === void 0 ? void 0 : creations.length)), isNeedShowOrganizeBtn = _b[0], setShowOrganizeBtn = _b[1];
+    var handleClick = function () {
+        setShowOrganizeBtn(false);
+        addMethod && addMethod();
+    };
+    return (_jsxs(StyledCardsGrid, { isTwoColumnLayout: isTwoColumnLayout, isEmptyGallery: isEmptyGallery, isForVirtualize: isForVirtualize, children: [_jsx("div", { className: "content", children: children }), tabsSlot, isTwoColumnLayout && (_jsxs("div", { className: "sidebar", children: [!isProd() && _jsx(ProfileInterests, {}), _jsx(ProfileWallets, {}), isNeedShowOrganizeBtn && (_jsx("div", { className: "sidebarOrganizeBtn", children: _jsx(MainButton, { onClick: handleClick, variant: "float", text: 'Organize' }) }))] }))] }));
+};
+// Export
+export default CardsGrid;
+var templateObject_1;

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

@@ -0,0 +1,70 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 '@/system/Cards/CardContent';
+import CardLikes from '@/system/Cards/CardContent/CardLikes';
+import StyledMultiHead from '@/system/Cards/Styles/MultiHead';
+import { Flex } from '@system';
+import DefaultGalleryIcon from '@/public/gallery/defaultImage.svg';
+import CardCategory from '../CardContent/CardCategory';
+import CardImage from '../CardMedia/CardImage';
+// Styles
+var StyledMultiCard = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  @media (max-width: 1200px) {\n    height: max-content;\n  }\n\n  .media {\n    width: 100%;\n    height: 100%;\n    aspect-ratio: 1 / 1;\n\n    & svg {\n      width: 100%;\n      height: 100%;\n    }\n\n    & img {\n      border-radius: 3px;\n    }\n\n    & span {\n      display: none;\n    }\n\n    & video {\n      border-radius: 3px;\n    }\n  }\n\n  .media.digital {\n    position: relative;\n\n    & svg {\n      position: absolute;\n      width: 20px;\n      height: 20px;\n      bottom: 0;\n      right: 0;\n\n      & circle,\n      & path {\n        transform: scale(0.5);\n      }\n    }\n  }\n\n  ", " {\n    border-radius: ", ";\n    .media {\n      & img {\n        border-radius: ", ";\n      }\n      & video {\n        border-radius: ", ";\n      }\n    }\n\n    .media.digital {\n      & svg {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"], ["\n  position: relative;\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  @media (max-width: 1200px) {\n    height: max-content;\n  }\n\n  .media {\n    width: 100%;\n    height: 100%;\n    aspect-ratio: 1 / 1;\n\n    & svg {\n      width: 100%;\n      height: 100%;\n    }\n\n    & img {\n      border-radius: 3px;\n    }\n\n    & span {\n      display: none;\n    }\n\n    & video {\n      border-radius: 3px;\n    }\n  }\n\n  .media.digital {\n    position: relative;\n\n    & svg {\n      position: absolute;\n      width: 20px;\n      height: 20px;\n      bottom: 0;\n      right: 0;\n\n      & circle,\n      & path {\n        transform: scale(0.5);\n      }\n    }\n  }\n\n  ", " {\n    border-radius: ", ";\n    .media {\n      & img {\n        border-radius: ", ";\n      }\n      & video {\n        border-radius: ", ";\n      }\n    }\n\n    .media.digital {\n      & svg {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"])), WhiteColor, BoxShadow, BoxTransform, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(3), adaptiveValueCalc(3), adaptiveValueCalc(20), adaptiveValueCalc(20));
+// Component
+var MultiMediaCard = function (_a) {
+    var gallery = _a.gallery, assets = _a.assets, collections = _a.collections;
+    var mediaTemplate = function (mediaKey, media) {
+        var _a, _b;
+        return (_jsx("div", { className: ((_a = media.type) === null || _a === void 0 ? void 0 : _a.name) === 'CardVideo' || ((_b = media.type) === null || _b === void 0 ? void 0 : _b.name) === 'CardAudio'
+                ? 'media digital'
+                : 'media', children: media }, mediaKey));
+    };
+    var renderMedia = function () {
+        var _a, _b;
+        // if (
+        //   (!assets || assets.length === 0) &&
+        //   (!collections || collections.length === 0)
+        // )
+        //   return null;
+        var galleryCreationIds = gallery.getGalleryCreationIds();
+        var cardsMedia = [];
+        var _loop_1 = function (i) {
+            var creationId = galleryCreationIds[i];
+            var asset = assets === null || assets === void 0 ? void 0 : assets.find(function (asset) {
+                return creationId === asset.getCreationId();
+            });
+            var collection = collections === null || collections === void 0 ? void 0 : collections.find(function (collection) {
+                return collection.getCreationId() ===
+                    (creationId === null || creationId === void 0 ? void 0 : creationId.split('.').splice(1).join('.'));
+            });
+            if (asset) {
+                cardsMedia.push(mediaTemplate(i, asset.detectMediaType().displaySingleMedia()));
+            }
+            else if (collection) {
+                cardsMedia.push(mediaTemplate(i, _jsx(CardImage, { alt: "".concat(collection.getName(), " ").concat(collection.getAddress() || ''), imgSrc: (_b = (_a = collection.getOriginalUrls()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '', errorImg: '/noContent/noContent.svg' })));
+            }
+            else {
+                cardsMedia.push(mediaTemplate(i, _jsx(DefaultGalleryIcon, {})));
+            }
+        };
+        for (var i = 0; i < 4; i++) {
+            _loop_1(i);
+        }
+        return cardsMedia;
+    };
+    var secondName = gallery.getGalleryUsername() !== '' ? gallery.getGalleryUsername() : '';
+    // const userCreationAddresses = gallery?.getGalleryCreations()[0]?.getOwnersAddresses();
+    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
+export default MultiMediaCard;
+var templateObject_1;

package/dist/system/Cards/RegularCard/index.js

@@ -0,0 +1,47 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Link from 'next/link';
+import styled from 'styled-components';
+import { handleSetScrollPosition } from '@ludo.ninja/utils';
+import useLikes from '@/hooks/likes';
+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 '@/system/Cards/CardContent';
+import CardCategory from '@/system/Cards/CardContent/CardCategory';
+import CardLikes from '@/system/Cards/CardContent/CardLikes';
+import CardHeadIcons from '@/system/Cards/CardHeadIcons';
+import StyledCardHead from '@/system/Cards/Styles/Head';
+import StyledHeadIcons from '@/system/Cards/Styles/Headicons';
+import { Flex } from '@system';
+import { isProd } from '@/utils/env';
+import { getWindowDimensions } from '@/utils/screen';
+// Styles
+var StyledRegularCard = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  min-height: ", ";\n\n  &:hover ", " {\n    transition: 0.2s opacity ease-in;\n    opacity: 1 !important;\n  }\n\n  .linkRegularCard {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  ", " {\n    width: 164px;\n    min-height: ", ";\n  }\n\n  ", " {\n    width: 154px;\n    min-height: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  min-height: ", ";\n\n  &:hover ", " {\n    transition: 0.2s opacity ease-in;\n    opacity: 1 !important;\n  }\n\n  .linkRegularCard {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  ", " {\n    width: 164px;\n    min-height: ", ";\n  }\n\n  ", " {\n    width: 154px;\n    min-height: ", ";\n  }\n"])), WhiteColor, BoxShadow, BoxTransform, function (props) { return (props.isNeedHeight ? '346px' : ''); }, StyledHeadIcons, mediaQuery.maxWidthTablet, function (props) { return (props.isNeedHeight ? '258px' : ''); }, mediaQuery.mobile, function (props) { return (props.isNeedHeight ? '244px' : ''); });
+// Component
+var RegularCard = function (_a) {
+    var creationName = _a.creationName, creation = _a.creation, cardsCount = _a.cardsCount, scrollKeys = _a.scrollKeys, isNeedHeight = _a.isNeedHeight, likesDynamicInfo = _a.likesDynamicInfo, toolsForRemove = _a.toolsForRemove;
+    var windowWidth = getWindowDimensions().windowWidth;
+    var isMobile = windowWidth <= 1200;
+    var _b = useLikes({
+        defaultLikesCount: (likesDynamicInfo === null || likesDynamicInfo === void 0 ? void 0 : likesDynamicInfo.likesNum) || creation.getLikes(),
+        defaultIsLiked: (likesDynamicInfo === null || likesDynamicInfo === void 0 ? void 0 : likesDynamicInfo.isLikedByUser) || creation.getIsLiked(),
+        itemType: creation.getItemType(),
+        removeOnDislike: toolsForRemove,
+    }), likes = _b.likes, addLike = _b.addLike, deleteLike = _b.deleteLike;
+    //show asset page
+    // Todo cardLink
+    var isHide = isProd();
+    var HideLink = isHide ? React.Fragment : Link;
+    return (_jsx(StyledRegularCard, { isNeedHeight: isNeedHeight, children: _jsxs(HideLink, { className: "linkRegularCard", href: creation.getCreationLink(), onClick: function () {
+                return handleSetScrollPosition(scrollKeys.pageOffsetKey, scrollKeys.itemsCountKey, String(cardsCount));
+            }, children: [_jsxs(StyledCardHead, { children: [creation.detectMediaType().displaySingleMedia(), _jsx(CardHeadIcons, { isRegularCard: true, isIconLiked: likes.isLiked, creation: creation, addLikeToCard: addLike, deleteLikeFromCard: deleteLike, isUserProfile: false, itemId: creation.getItemId() })] }), _jsx(CardContent, { creationName: creationName, firstName: creation.getCreatorAddress(), secondName: creation.getName(), cuttedSecondName: creation.getCuttedSecondName(!isMobile), isNeedShowMoreButton: false, itemId: creation.getItemId(), children: _jsxs(Flex, { alignItems: "end", justifyContent: 'space-between', children: [_jsx(CardCategory, { label: creation.getLabel() }), !isProd() && (_jsx(CardLikes, { isLiked: likes.isLiked, likes: likes.likesCount }))] }) })] }) }));
+};
+// Export
+export default RegularCard;
+var templateObject_1;

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

@@ -1,40 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledCardHead = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  position: relative;\n  height: 252px;\n  width: 252px;\n  margin: 0 auto;\n\n  .playIcon,\n  .pauseIcon {\n    position: absolute;\n    right: 6%;\n    bottom: 6%;\n\n    :hover {\n      circle {\n        opacity: 0.6;\n        fill: #12183a;\n      }\n    }\n  }\n\n  @media (max-width: 1200px) {\n    height: 164px;\n    width: 164px;\n  }\n\n  @media (max-width: 767px) {\n    height: 154px;\n    width: 154px;\n  }\n\n  ',
-        ' {\n    height: ',
-        ';\n    width: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  position: relative;\n  height: 252px;\n  width: 252px;\n  margin: 0 auto;\n\n  .playIcon,\n  .pauseIcon {\n    position: absolute;\n    right: 6%;\n    bottom: 6%;\n\n    :hover {\n      circle {\n        opacity: 0.6;\n        fill: #12183a;\n      }\n    }\n  }\n\n  @media (max-width: 1200px) {\n    height: 164px;\n    width: 164px;\n  }\n\n  @media (max-width: 767px) {\n    height: 154px;\n    width: 154px;\n  }\n\n  ',
-        ' {\n    height: ',
-        ';\n    width: ',
-        ';\n  }\n',
-      ]
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(252),
-  adaptiveValueCalc(252)
-);
+var StyledCardHead = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: 252px;\n  width: 252px;\n  margin: 0 auto;\n\n  .playIcon,\n  .pauseIcon {\n    position: absolute;\n    right: 6%;\n    bottom: 6%;\n\n    :hover {\n      circle {\n        opacity: 0.6;\n        fill: #12183a;\n      }\n    }\n  }\n\n  @media (max-width: 1200px) {\n    height: 164px;\n    width: 164px;\n  }\n\n  @media (max-width: 767px) {\n    height: 154px;\n    width: 154px;\n  }\n\n  ", " {\n    height: ", ";\n    width: ", ";\n  }\n"], ["\n  position: relative;\n  height: 252px;\n  width: 252px;\n  margin: 0 auto;\n\n  .playIcon,\n  .pauseIcon {\n    position: absolute;\n    right: 6%;\n    bottom: 6%;\n\n    :hover {\n      circle {\n        opacity: 0.6;\n        fill: #12183a;\n      }\n    }\n  }\n\n  @media (max-width: 1200px) {\n    height: 164px;\n    width: 164px;\n  }\n\n  @media (max-width: 767px) {\n    height: 154px;\n    width: 154px;\n  }\n\n  ", " {\n    height: ", ";\n    width: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(252), adaptiveValueCalc(252));
 export default StyledCardHead;
 var templateObject_1;

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

@@ -1,114 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 // Styles
 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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var StyledHeadIcons = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        "\n  transition: 0.2s opacity ease-out;\n  opacity: 0;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100px;\n    border-top-left-radius: 6px;\n    border-top-right-radius: 6px;\n    background: linear-gradient(180deg, #12183a 0%, rgba(18, 24, 58, 0) 100%);\n    opacity: 0.3;\n  }\n\n  .rank {\n    position: absolute;\n    top: 16px;\n    left: 16px;\n  }\n\n  .icons {\n    position: absolute;\n    top: 16px;\n    right: 7px;\n    display: flex;\n  }\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: ",
-        ';\n    border-radius: 6px;\n    width: ',
-        ';\n    height: ',
-        ';\n\n    svg {\n      overflow: visible;\n      will-change: transform;\n      transition: transform 0.2s;\n      transform: scale(1);\n      width: ',
-        ';\n      height: ',
-        ';\n\n      path {\n        fill: ',
-        ';\n        transition: fill 0.2s;\n      }\n    }\n\n    :hover svg {\n      transform: scale(1.1);\n      transition: transform 0.2s;\n\n      path {\n        fill: ',
-        ';\n        transition: fill 0.2s;\n      }\n    }\n  }\n\n  .icon.like {\n    margin-left: 12px;\n  }\n\n  .icon.like.liked {\n    svg path {\n      fill: #f94c66;\n    }\n  }\n\n  ',
-        ' {\n    &:before {\n      height: ',
-        ';\n      border-top-left-radius: ',
-        ';\n      border-top-right-radius: ',
-        ';\n    }\n\n    .rank {\n      top: ',
-        ';\n      left: ',
-        ';\n    }\n\n    .icons {\n      top: ',
-        ';\n      right: ',
-        ';\n    }\n\n    .icon {\n      border-radius: ',
-        ';\n      width: ',
-        ';\n      height: ',
-        ';\n\n      svg {\n        width: ',
-        ';\n        height: ',
-        ';\n      }\n    }\n\n    .icon.like {\n      margin-left: ',
-        ';\n    }\n  }\n',
-      ],
-      [
-        "\n  transition: 0.2s opacity ease-out;\n  opacity: 0;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100px;\n    border-top-left-radius: 6px;\n    border-top-right-radius: 6px;\n    background: linear-gradient(180deg, #12183a 0%, rgba(18, 24, 58, 0) 100%);\n    opacity: 0.3;\n  }\n\n  .rank {\n    position: absolute;\n    top: 16px;\n    left: 16px;\n  }\n\n  .icons {\n    position: absolute;\n    top: 16px;\n    right: 7px;\n    display: flex;\n  }\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: ",
-        ';\n    border-radius: 6px;\n    width: ',
-        ';\n    height: ',
-        ';\n\n    svg {\n      overflow: visible;\n      will-change: transform;\n      transition: transform 0.2s;\n      transform: scale(1);\n      width: ',
-        ';\n      height: ',
-        ';\n\n      path {\n        fill: ',
-        ';\n        transition: fill 0.2s;\n      }\n    }\n\n    :hover svg {\n      transform: scale(1.1);\n      transition: transform 0.2s;\n\n      path {\n        fill: ',
-        ';\n        transition: fill 0.2s;\n      }\n    }\n  }\n\n  .icon.like {\n    margin-left: 12px;\n  }\n\n  .icon.like.liked {\n    svg path {\n      fill: #f94c66;\n    }\n  }\n\n  ',
-        ' {\n    &:before {\n      height: ',
-        ';\n      border-top-left-radius: ',
-        ';\n      border-top-right-radius: ',
-        ';\n    }\n\n    .rank {\n      top: ',
-        ';\n      left: ',
-        ';\n    }\n\n    .icons {\n      top: ',
-        ';\n      right: ',
-        ';\n    }\n\n    .icon {\n      border-radius: ',
-        ';\n      width: ',
-        ';\n      height: ',
-        ';\n\n      svg {\n        width: ',
-        ';\n        height: ',
-        ';\n      }\n    }\n\n    .icon.like {\n      margin-left: ',
-        ';\n    }\n  }\n',
-      ]
-    )),
-  WhiteColor,
-  function (props) {
-    return props.isMobile ? '24px' : '36px';
-  },
-  function (props) {
-    return props.isMobile ? '24px' : '36px';
-  },
-  function (props) {
-    return props.isMobile ? '13px' : '20px';
-  },
-  function (props) {
-    return props.isMobile ? '12px' : '18px';
-  },
-  TextDarkGrayColor,
-  BlackColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(100),
-  adaptiveValueCalc(6),
-  adaptiveValueCalc(6),
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(7),
-  adaptiveValueCalc(6),
-  function (props) {
-    return props.isMobile ? '24px' : adaptiveValueCalc(36);
-  },
-  function (props) {
-    return props.isMobile ? '24px' : adaptiveValueCalc(36);
-  },
-  function (props) {
-    return props.isMobile ? '13px' : adaptiveValueCalc(20);
-  },
-  function (props) {
-    return props.isMobile ? '12px' : adaptiveValueCalc(18);
-  },
-  adaptiveValueCalc(12)
-);
+var StyledHeadIcons = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transition: 0.2s opacity ease-out;\n  opacity: 0;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100px;\n    border-top-left-radius: 6px;\n    border-top-right-radius: 6px;\n    background: linear-gradient(180deg, #12183a 0%, rgba(18, 24, 58, 0) 100%);\n    opacity: 0.3;\n  }\n\n  .rank {\n    position: absolute;\n    top: 16px;\n    left: 16px;\n  }\n\n  .icons {\n    position: absolute;\n    top: 16px;\n    right: 7px;\n    display: flex;\n  }\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: ", ";\n    border-radius: 6px;\n    width: ", ";\n    height: ", ";\n\n    svg {\n      overflow: visible;\n      will-change: transform;\n      transition: transform 0.2s;\n      transform: scale(1);\n      width: ", ";\n      height: ", ";\n\n      path {\n        fill: ", ";\n        transition: fill 0.2s;\n      }\n    }\n\n    :hover svg {\n      transform: scale(1.1);\n      transition: transform 0.2s;\n\n      path {\n        fill: ", ";\n        transition: fill 0.2s;\n      }\n    }\n  }\n\n  .icon.like {\n    margin-left: 12px;\n  }\n\n  .icon.like.liked {\n    svg path {\n      fill: #f94c66;\n    }\n  }\n\n  ", " {\n    &:before {\n      height: ", ";\n      border-top-left-radius: ", ";\n      border-top-right-radius: ", ";\n    }\n\n    .rank {\n      top: ", ";\n      left: ", ";\n    }\n\n    .icons {\n      top: ", ";\n      right: ", ";\n    }\n\n    .icon {\n      border-radius: ", ";\n      width: ", ";\n      height: ", ";\n\n      svg {\n        width: ", ";\n        height: ", ";\n      }\n    }\n\n    .icon.like {\n      margin-left: ", ";\n    }\n  }\n"], ["\n  transition: 0.2s opacity ease-out;\n  opacity: 0;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100px;\n    border-top-left-radius: 6px;\n    border-top-right-radius: 6px;\n    background: linear-gradient(180deg, #12183a 0%, rgba(18, 24, 58, 0) 100%);\n    opacity: 0.3;\n  }\n\n  .rank {\n    position: absolute;\n    top: 16px;\n    left: 16px;\n  }\n\n  .icons {\n    position: absolute;\n    top: 16px;\n    right: 7px;\n    display: flex;\n  }\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: ", ";\n    border-radius: 6px;\n    width: ", ";\n    height: ", ";\n\n    svg {\n      overflow: visible;\n      will-change: transform;\n      transition: transform 0.2s;\n      transform: scale(1);\n      width: ", ";\n      height: ", ";\n\n      path {\n        fill: ", ";\n        transition: fill 0.2s;\n      }\n    }\n\n    :hover svg {\n      transform: scale(1.1);\n      transition: transform 0.2s;\n\n      path {\n        fill: ", ";\n        transition: fill 0.2s;\n      }\n    }\n  }\n\n  .icon.like {\n    margin-left: 12px;\n  }\n\n  .icon.like.liked {\n    svg path {\n      fill: #f94c66;\n    }\n  }\n\n  ", " {\n    &:before {\n      height: ", ";\n      border-top-left-radius: ", ";\n      border-top-right-radius: ", ";\n    }\n\n    .rank {\n      top: ", ";\n      left: ", ";\n    }\n\n    .icons {\n      top: ", ";\n      right: ", ";\n    }\n\n    .icon {\n      border-radius: ", ";\n      width: ", ";\n      height: ", ";\n\n      svg {\n        width: ", ";\n        height: ", ";\n      }\n    }\n\n    .icon.like {\n      margin-left: ", ";\n    }\n  }\n"])), WhiteColor, function (props) { return (props.isMobile ? '24px' : '36px'); }, function (props) { return (props.isMobile ? '24px' : '36px'); }, function (props) { return (props.isMobile ? '13px' : '20px'); }, function (props) { return (props.isMobile ? '12px' : '18px'); }, TextDarkGrayColor, BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(100), adaptiveValueCalc(6), adaptiveValueCalc(6), adaptiveValueCalc(16), adaptiveValueCalc(16), adaptiveValueCalc(16), adaptiveValueCalc(7), adaptiveValueCalc(6), function (props) { return (props.isMobile ? '24px' : adaptiveValueCalc(36)); }, function (props) { return (props.isMobile ? '24px' : adaptiveValueCalc(36)); }, function (props) { return (props.isMobile ? '13px' : adaptiveValueCalc(20)); }, function (props) { return (props.isMobile ? '12px' : adaptiveValueCalc(18)); }, adaptiveValueCalc(12));
 StyledHeadIcons.defaultProps = {
-  isMobile: false,
+    isMobile: false,
 };
 export default StyledHeadIcons;
 var templateObject_1;

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

@@ -1,44 +1,10 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var StyledImg = styled.img(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n  opacity: ',
-        ';\n  transition: opacity ease-in 0.3s;\n\n  ',
-        ' {\n    border-top-left-radius: ',
-        ';\n    border-top-right-radius: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n  opacity: ',
-        ';\n  transition: opacity ease-in 0.3s;\n\n  ',
-        ' {\n    border-top-left-radius: ',
-        ';\n    border-top-right-radius: ',
-        ';\n  }\n',
-      ]
-    )),
-  function (props) {
-    return props.isLoading ? '0' : '1';
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(6),
-  adaptiveValueCalc(6)
-);
+var StyledImg = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n  opacity: ", ";\n  transition: opacity ease-in 0.3s;\n\n  ", " {\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"], ["\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n  opacity: ", ";\n  transition: opacity ease-in 0.3s;\n\n  ", " {\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"])), function (props) { return (props.isLoading ? '0' : '1'); }, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(6));
 export default StyledImg;
 var templateObject_1;

package/dist/system/Cards/Styles/MultiHead.js

@@ -1,49 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledMultiHead = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-auto-rows: 114px;\n  gap: 8px;\n  position: relative;\n  height: 252px;\n  width: 252px;\n  cursor: pointer;\n  padding: 8px;\n\n  @media (max-width: 1200px) {\n    height: 75%;\n    width: 100%;\n    grid-auto-rows: auto;\n    gap: 5.21px;\n    padding: 5.21px;\n  }\n\n  @media (max-width: 767px) {\n    height: 75%;\n    width: 100%;\n    gap: 4px;\n    padding: 4px;\n  }\n\n  ',
-        ' {\n    grid-auto-rows: ',
-        ';\n    gap: ',
-        ';\n    padding: ',
-        ';\n    height: ',
-        ';\n    width: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-auto-rows: 114px;\n  gap: 8px;\n  position: relative;\n  height: 252px;\n  width: 252px;\n  cursor: pointer;\n  padding: 8px;\n\n  @media (max-width: 1200px) {\n    height: 75%;\n    width: 100%;\n    grid-auto-rows: auto;\n    gap: 5.21px;\n    padding: 5.21px;\n  }\n\n  @media (max-width: 767px) {\n    height: 75%;\n    width: 100%;\n    gap: 4px;\n    padding: 4px;\n  }\n\n  ',
-        ' {\n    grid-auto-rows: ',
-        ';\n    gap: ',
-        ';\n    padding: ',
-        ';\n    height: ',
-        ';\n    width: ',
-        ';\n  }\n',
-      ]
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(114),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(252),
-  adaptiveValueCalc(252)
-);
+var StyledMultiHead = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-auto-rows: 114px;\n  gap: 8px;\n  position: relative;\n  height: 252px;\n  width: 252px;\n  cursor: pointer;\n  padding: 8px;\n\n  @media (max-width: 1200px) {\n    height: 75%;\n    width: 100%;\n    grid-auto-rows: auto;\n    gap: 5.21px;\n    padding: 5.21px;\n  }\n\n  @media (max-width: 767px) {\n    height: 75%;\n    width: 100%;\n    gap: 4px;\n    padding: 4px;\n  }\n\n  ", " {\n    grid-auto-rows: ", ";\n    gap: ", ";\n    padding: ", ";\n    height: ", ";\n    width: ", ";\n  }\n"], ["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-auto-rows: 114px;\n  gap: 8px;\n  position: relative;\n  height: 252px;\n  width: 252px;\n  cursor: pointer;\n  padding: 8px;\n\n  @media (max-width: 1200px) {\n    height: 75%;\n    width: 100%;\n    grid-auto-rows: auto;\n    gap: 5.21px;\n    padding: 5.21px;\n  }\n\n  @media (max-width: 767px) {\n    height: 75%;\n    width: 100%;\n    gap: 4px;\n    padding: 4px;\n  }\n\n  ", " {\n    grid-auto-rows: ", ";\n    gap: ", ";\n    padding: ", ";\n    height: ", ";\n    width: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(114), adaptiveValueCalc(8), adaptiveValueCalc(8), adaptiveValueCalc(252), adaptiveValueCalc(252));
 export default StyledMultiHead;
 var templateObject_1;

package/dist/system/Cards/Styles/Video.js

@@ -1,26 +1,8 @@
-import styled from 'styled-components';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
-  };
-
-var StyledVideo = styled.video(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n',
-      ],
-      [
-        '\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n',
-      ]
-    ))
-);
+};
+import styled from 'styled-components';
+var StyledVideo = styled.video(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n"], ["\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n"])));
 export default StyledVideo;
 var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsError/index.js

@@ -0,0 +1,71 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from 'styled-components';
+import { rotateReverse } from '@/styles/animations';
+import { TextGrayColor } from '@/styles/colors';
+import { poppinsFontVarCss } from '@/fonts/vars';
+import CardRefreshIcon from '@/public/error/refresh.svg';
+// Styles
+var StyledCardsError = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  .icon {\n    margin-bottom: 24px;\n    cursor: pointer;\n    animation: ", " 2s infinite linear;\n  }\n  .text {\n    max-width: 308px;\n    text-align: center;\n    color: ", ";\n    user-select: none;\n    font-family: ", ";\n    font-size: 18px;\n    font-weight: 600;\n    line-height: 26px;\n  }\n"], ["\n  padding-top: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  .icon {\n    margin-bottom: 24px;\n    cursor: pointer;\n    animation: ", " 2s infinite linear;\n  }\n  .text {\n    max-width: 308px;\n    text-align: center;\n    color: ", ";\n    user-select: none;\n    font-family: ", ";\n    font-size: 18px;\n    font-weight: 600;\n    line-height: 26px;\n  }\n"])), rotateReverse, TextGrayColor, poppinsFontVarCss.css);
+// Component
+var CardsError = function (_a) {
+    var refetch = _a.refetch;
+    var _b = useState(false), isAnimated = _b[0], setIsAnimated = _b[1];
+    var handleAnimation = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsAnimated(true);
+                    return [4 /*yield*/, refetch()];
+                case 1:
+                    _a.sent();
+                    setIsAnimated(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsxs(StyledCardsError, { children: [_jsx(CardRefreshIcon, { className: 'icon', onClick: handleAnimation }), !isAnimated && (_jsx("h2", { className: 'text', children: "Whoops! Something went wrong. Let's try to refresh it!" }))] }));
+};
+// Export
+export default CardsError;
+var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsNoResults/index.js

@@ -0,0 +1,19 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { TextGrayColor } from '@/styles/colors';
+import { FH3 } from '@/styles/typography';
+import NoFoundIcon from '@/public/search/no_found.svg';
+// Styles
+var StyledNoResults = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  user-select: none;\n  padding-top: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  .icon {\n    margin-bottom: 38px;\n  }\n\n  .text {\n    ", ";\n    color: ", ";\n  }\n"], ["\n  user-select: none;\n  padding-top: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  .icon {\n    margin-bottom: 38px;\n  }\n\n  .text {\n    ", ";\n    color: ", ";\n  }\n"])), FH3, TextGrayColor);
+// Component
+var CardsNoResults = function (_a) {
+    var noFoundText = _a.noFoundText;
+    return (_jsxs(StyledNoResults, { children: [_jsx(NoFoundIcon, { className: 'icon' }), _jsx("p", { className: 'text', children: noFoundText })] }));
+};
+// Export
+export default CardsNoResults;
+var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton/index.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Skeleton from 'react-loading-skeleton';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import StyledCardHead from '@/system/Cards/Styles/Head';
+// Styles
+var StyledCardSkeleton = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .content {\n    display: flex;\n    flex-direction: column;\n    padding: 12px 0 0 0;\n  }\n\n  .footer {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  ", " {\n    .content {\n      padding: ", " 0 0 0;\n      gap: ", ";\n\n      .react-loading-skeleton {\n        height: ", " !important;\n      }\n\n      .footer {\n        & > *:first-child .react-loading-skeleton {\n          width: ", " !important;\n        }\n\n        & > *:last-child .react-loading-skeleton {\n          width: ", " !important;\n        }\n      }\n    }\n  }\n"], ["\n  .content {\n    display: flex;\n    flex-direction: column;\n    padding: 12px 0 0 0;\n  }\n\n  .footer {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  ", " {\n    .content {\n      padding: ", " 0 0 0;\n      gap: ", ";\n\n      .react-loading-skeleton {\n        height: ", " !important;\n      }\n\n      .footer {\n        & > *:first-child .react-loading-skeleton {\n          width: ", " !important;\n        }\n\n        & > *:last-child .react-loading-skeleton {\n          width: ", " !important;\n        }\n      }\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(12), adaptiveValueCalc(4), adaptiveValueCalc(18), adaptiveValueCalc(120), adaptiveValueCalc(30));
+var CardsSkeleton = function (_a) {
+    var cardCount = _a.cardCount;
+    var arr = Array.from(Array(cardCount).keys());
+    return (_jsx(_Fragment, { children: arr.map(function () { return (_jsx(CardSkeleton, {}, Math.random())); }) }));
+};
+// Component
+export var CardSkeleton = function () {
+    return (_jsxs(StyledCardSkeleton, { children: [_jsx(StyledCardHead, { children: _jsx(Skeleton, { height: '100%', width: '100%' }) }), _jsxs("div", { className: 'content', children: [_jsx(Skeleton, { height: '18px', width: '70%' }), _jsxs("div", { className: 'footer', children: [_jsx(Skeleton, { height: '18px', width: '120px' }), _jsx(Skeleton, { height: '18px', width: '30px' })] })] })] }));
+};
+// Export
+export default CardsSkeleton;
+var templateObject_1;