@ludo.ninja/components 0.5.0 → 1.0.0

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

@@ -0,0 +1,59 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React, { 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 (<StyledCardsGrid isTwoColumnLayout={isTwoColumnLayout} isEmptyGallery={isEmptyGallery} isForVirtualize={isForVirtualize}>
+      <div className="content">{children}</div>
+      {tabsSlot}
+      {isTwoColumnLayout && (<div className="sidebar">
+          {/*{isNeedShowNetWorth && <ProfileNetWorth />}*/}
+          {/* // Todo ProfileInterests */}
+          {!isProd() && <ProfileInterests />}
+          <ProfileWallets />
+          {isNeedShowOrganizeBtn && (<div className="sidebarOrganizeBtn">
+              <MainButton onClick={handleClick} variant="float" text={'Organize'}/>
+            </div>)}
+        </div>)}
+    </StyledCardsGrid>);
+};
+// Export
+export default CardsGrid;
+var templateObject_1;

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

@@ -0,0 +1,82 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+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 (<div key={mediaKey} 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'}>
+        {media}
+      </div>);
+    };
+    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, <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, <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 (<StyledMultiCard>
+      <Link href={gallery.getCreationLink()}>
+        <StyledMultiHead>{renderMedia()}</StyledMultiHead>
+        <CardContent firstName={gallery.getGalleryName()} secondName={secondName} wallets={gallery.getGalleryUserWallets()} isNeedShowMoreButton={false} itemId={gallery.getGalleryId()}>
+          <Flex alignItems="flex-end" justifyContent={'space-between'}>
+            <CardCategory label={gallery.getLabel()}/>
+            <CardLikes isLiked={false} likes={0}/>
+          </Flex>
+        </CardContent>
+      </Link>
+    </StyledMultiCard>);
+};
+// Export
+export default MultiMediaCard;
+var templateObject_1;

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

@@ -0,0 +1,60 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 (<StyledRegularCard isNeedHeight={isNeedHeight}>
+      <HideLink className="linkRegularCard" href={creation.getCreationLink()} onClick={function () {
+            return handleSetScrollPosition(scrollKeys.pageOffsetKey, scrollKeys.itemsCountKey, String(cardsCount));
+        }}>
+        <StyledCardHead>
+          {creation.detectMediaType().displaySingleMedia()}
+          <CardHeadIcons isRegularCard={true} isIconLiked={likes.isLiked} creation={creation} addLikeToCard={addLike} deleteLikeFromCard={deleteLike} isUserProfile={false} itemId={creation.getItemId()}/>
+        </StyledCardHead>
+        <CardContent creationName={creationName} firstName={creation.getCreatorAddress()} secondName={creation.getName()} cuttedSecondName={creation.getCuttedSecondName(!isMobile)} isNeedShowMoreButton={false} itemId={creation.getItemId()}>
+          <Flex alignItems="end" justifyContent={'space-between'}>
+            <CardCategory label={creation.getLabel()}/>
+            {/* // Todo cardLikes */}
+            {!isProd() && (<CardLikes isLiked={likes.isLiked} likes={likes.likesCount}/>)}
+          </Flex>
+        </CardContent>
+      </HideLink>
+    </StyledRegularCard>);
+};
+// Export
+export default RegularCard;
+var templateObject_1;

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

@@ -0,0 +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;
+};
+// Styles
+import styled from 'styled-components';
+import { BlackColor, TextGrayColor } from '@/styles/colors';
+import { MainText, TextSmall } from '@/styles/typography';
+var StyledContentCard = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  height: auto;\n\n  &Header {\n    display: flex;\n    justify-content: space-between;\n\n    &Artist {\n      .artist_name {\n        ", ";\n        color: ", ";\n        line-height: 1.39em;\n      }\n      .art_name {\n        ", ";\n        color: ", ";\n        line-height: 1.47em;\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  @media (max-width: 1040px) {\n    height: auto;\n    padding: 12px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  height: auto;\n\n  &Header {\n    display: flex;\n    justify-content: space-between;\n\n    &Artist {\n      .artist_name {\n        ", ";\n        color: ", ";\n        line-height: 1.39em;\n      }\n      .art_name {\n        ", ";\n        color: ", ";\n        line-height: 1.47em;\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  @media (max-width: 1040px) {\n    height: auto;\n    padding: 12px;\n  }\n"])), TextSmall, TextGrayColor, MainText, BlackColor);
+export default StyledContentCard;
+var templateObject_1;

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

@@ -0,0 +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';
+// 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));
+export default StyledCardHead;
+var templateObject_1;

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

@@ -0,0 +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 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,
+};
+export default StyledHeadIcons;
+var templateObject_1;

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

@@ -0,0 +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 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/Likes.js

@@ -0,0 +1,13 @@
+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';
+import { TextGrayColor } from '@/styles/colors';
+import { MainText } from '@/styles/typography';
+// Styles
+var StyledLikes = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: end;\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    margin-right: 5px;\n\n    path {\n      fill: ", ";\n      transition: fill 0.2s;\n    }\n\n    :hover path {\n      fill: ", ";\n    }\n  }\n\n  .counter {\n    ", ";\n    font-size: 15px;\n    color: ", ";\n    line-height: 1;\n  }\n\n  ", " {\n    .icon {\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n    }\n\n    .counter {\n      font-size: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  align-items: end;\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    margin-right: 5px;\n\n    path {\n      fill: ", ";\n      transition: fill 0.2s;\n    }\n\n    :hover path {\n      fill: ", ";\n    }\n  }\n\n  .counter {\n    ", ";\n    font-size: 15px;\n    color: ", ";\n    line-height: 1;\n  }\n\n  ", " {\n    .icon {\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n    }\n\n    .counter {\n      font-size: ", ";\n    }\n  }\n"])), function (props) { return (props.isLiked ? '#F94C66' : '#cfd5ea'); }, function (props) { return (props.isLiked ? '' : '#696F90'); }, MainText, TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(18), adaptiveValueCalc(18), adaptiveValueCalc(5), adaptiveValueCalc(15));
+export default StyledLikes;
+var templateObject_1;

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

@@ -0,0 +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';
+// 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));
+export default StyledMultiHead;
+var templateObject_1;

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

@@ -0,0 +1,8 @@
+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';
+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.jsx

@@ -0,0 +1,75 @@
+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 React, { 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 (<StyledCardsError>
+      <CardRefreshIcon className={'icon'} onClick={handleAnimation}/>
+      {!isAnimated && (<h2 className={'text'}>
+          Whoops! Something went wrong. Let&apos;s try to refresh it!
+        </h2>)}
+    </StyledCardsError>);
+};
+// Export
+export default CardsError;
+var templateObject_1;

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

@@ -0,0 +1,22 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+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 (<StyledNoResults>
+      <NoFoundIcon className={'icon'}/>
+      <p className={'text'}>{noFoundText}</p>
+    </StyledNoResults>);
+};
+// Export
+export default CardsNoResults;
+var templateObject_1;

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

@@ -0,0 +1,37 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+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 (<>
+      {arr.map(function () { return (<CardSkeleton key={Math.random()}/>); })}
+    </>);
+};
+// Component
+export var CardSkeleton = function () {
+    return (<StyledCardSkeleton>
+      <StyledCardHead>
+        <Skeleton height={'100%'} width={'100%'}/>
+      </StyledCardHead>
+      <div className={'content'}>
+        <Skeleton height={'18px'} width={'70%'}/>
+        <div className={'footer'}>
+          <Skeleton height={'18px'} width={'120px'}/>
+          <Skeleton height={'18px'} width={'30px'}/>
+        </div>
+      </div>
+    </StyledCardSkeleton>);
+};
+// Export
+export default CardsSkeleton;
+var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/index.jsx

@@ -0,0 +1,37 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import CardsGrid from '@/system/Cards/CardsGrid';
+import CardsError from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsError';
+import CardsNoResults from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsNoResults';
+// Styles
+var StyledCardsHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: ", ";\n  gap: 24px;\n  overflow: hidden;\n\n  ", " {\n    gap: 16px;\n  }\n\n  ", " {\n    gap: 12px;\n    grid-template-columns: ", ";\n  }\n"], ["\n  display: grid;\n  grid-template-columns: ", ";\n  gap: 24px;\n  overflow: hidden;\n\n  ", " {\n    gap: 16px;\n  }\n\n  ", " {\n    gap: 12px;\n    grid-template-columns: ", ";\n  }\n"])), function (props) {
+    return props.isOneColumn || props.isForVirtualize ? '1fr' : 'repeat( 4, 1fr)';
+}, mediaQuery.desktop, mediaQuery.tablet, function (props) {
+    return props.isOneColumn || props.isForVirtualize ? '1fr' : 'repeat( 2, 1fr)';
+});
+// Component
+var CardsHolder = function (_a) {
+    var loading = _a.loading, error = _a.error, items = _a.items, refetchQuery = _a.refetchQuery, children = _a.children, notFoundText = _a.notFoundText, isOneColumn = _a.isOneColumn, isTwoColumnLayout = _a.isTwoColumnLayout, isNeedShowNetWorth = _a.isNeedShowNetWorth, isForVirtualize = _a.isForVirtualize, likesArray = _a.likesArray, tabsSlot = _a.tabsSlot;
+    var renderCardsWithGrid = function (component, isEmptyGallery, forVirtualize) {
+        return (<CardsGrid isTwoColumnLayout={isTwoColumnLayout} isNeedShowNetWorth={isNeedShowNetWorth} isEmptyGallery={isEmptyGallery} isForVirtualize={forVirtualize} tabsSlot={tabsSlot}>
+        {component}
+      </CardsGrid>);
+    };
+    if (loading && (!likesArray || (likesArray === null || likesArray === void 0 ? void 0 : likesArray.length) === 0))
+        return null;
+    if (error)
+        return renderCardsWithGrid(<CardsError refetch={refetchQuery}/>, true);
+    if (!items.length)
+        return renderCardsWithGrid(<CardsNoResults noFoundText={notFoundText}/>, true, isForVirtualize);
+    return (<StyledCardsHolder isOneColumn={isOneColumn} isForVirtualize={isForVirtualize}>
+      {renderCardsWithGrid(children, false, isForVirtualize)}
+    </StyledCardsHolder>);
+};
+// Export
+export default CardsHolder;
+var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/CardsHolderLoader/index.jsx

@@ -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 React from 'react';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { rotate } from '@/styles/animations';
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+import LoaderIcon from '@/public/cardsHolderLoader/loader.svg';
+// Styles
+var StyledCardsHolderLoader = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 24px;\n\n  .loader {\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  ", " {\n    padding-top: ", ";\n  }\n\n  /* &.virtual {\n  position: fixed;\n    bottom: 90px;\n    right: 30px;\n } */\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 24px;\n\n  .loader {\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  ", " {\n    padding-top: ", ";\n  }\n\n  /* &.virtual {\n  position: fixed;\n    bottom: 90px;\n    right: 30px;\n } */\n"])), rotate, mediaQuery.minWidthFourK, adaptiveValueCalc(24));
+// Component
+var CardsHolderLoader = function () {
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (<StyledCardsHolderLoader style={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}>
+      <LoaderIcon className={'loader'}/>
+    </StyledCardsHolderLoader>);
+};
+// Export
+export default CardsHolderLoader;
+var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import CardsGrid from '@/system/Cards/CardsGrid';
+import CardsHolder from '@/system/CardsHolderWithSkeleton/CardsHolder';
+import CardSkeletonWrapper from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton';
+// Component
+var CardsHolderWithSkeleton = function (_a) {
+    var loading = _a.loading, error = _a.error, items = _a.items, refetchQuery = _a.refetchQuery, children = _a.children, notFoundText = _a.notFoundText, isOneColumn = _a.isOneColumn, isTwoColumnLayout = _a.isTwoColumnLayout, isNeedShowNetWorth = _a.isNeedShowNetWorth, isForVirtualize = _a.isForVirtualize, likesArray = _a.likesArray, tabsSlot = _a.tabsSlot;
+    if (loading && (!likesArray || (likesArray === null || likesArray === void 0 ? void 0 : likesArray.length) === 0))
+        return (<CardsGrid isTwoColumnLayout={isTwoColumnLayout} isNeedShowNetWorth={isNeedShowNetWorth} isEmptyGallery={false} tabsSlot={tabsSlot}>
+        <CardSkeletonWrapper cardCount={40}/>
+      </CardsGrid>);
+    return (<CardsHolder items={items} refetchQuery={refetchQuery} error={error} loading={loading} notFoundText={notFoundText} isOneColumn={isOneColumn} isTwoColumnLayout={isTwoColumnLayout} isNeedShowNetWorth={isNeedShowNetWorth} isForVirtualize={isForVirtualize} likesArray={likesArray} tabsSlot={tabsSlot}>
+      {children}
+    </CardsHolder>);
+};
+// Export
+export default CardsHolderWithSkeleton;

package/dist/system/DropDown/DropDown.test.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import DropDown from '../DropDown';
+jest.mock('@/public/dropDown/arrow_down.svg', function () { return 'div'; });
+describe('DropDown Component', function () {
+    test('renders with caption and closed by default', function () {
+        var _a;
+        var mockFallback = jest.fn();
+        render(<div data-testid={'test_container'}>
+        <DropDown caption="Test Dropdown" fallBackOnClose={mockFallback}>
+          <div>Dropdown Content</div>
+        </DropDown>
+      </div>);
+        var captionElement = screen.getByText('Test Dropdown');
+        expect(captionElement).toBeInTheDocument();
+        var contentElement = (_a = screen
+            .queryByTestId('test_container')) === null || _a === void 0 ? void 0 : _a.querySelector('.dropDownContent');
+        expect(contentElement).toHaveStyle('grid-template-rows:0fr');
+        fireEvent.click(captionElement);
+        expect(contentElement).toHaveStyle('grid-template-rows:1fr');
+    });
+    test('calls fallback function when closed', function () {
+        var mockFallback = jest.fn();
+        render(<DropDown caption="Test Dropdown" fallBackOnClose={mockFallback}>
+        <div>Dropdown Content</div>
+      </DropDown>);
+        var captionElement = screen.getByText('Test Dropdown');
+        fireEvent.click(captionElement);
+        fireEvent.click(captionElement);
+        expect(mockFallback).toHaveBeenCalledWith(null);
+    });
+    test('renders with active prop', function () {
+        var mockFallback = jest.fn();
+        render(<DropDown caption="Test Dropdown" fallBackOnClose={mockFallback} active>
+        <div>Dropdown Content</div>
+      </DropDown>);
+        var openedContentElement = screen.getByText('Dropdown Content');
+        expect(openedContentElement).toBeInTheDocument();
+    });
+});