@ludo.ninja/components 1.7.4 → 1.7.6

package/dist/system/Cards/CardContent/CardShowMore/index.jsx

@@ -1,39 +0,0 @@
-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 { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { copyToClipboard } from '@ludo.ninja/utils';
-import { useUiStore } from '@/store/ui';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BackgroundColorLight, BlackColor } from '@/styles/colors';
-import { TextSmall } from '@/styles/typography';
-import { dmsansFontVarCss } from '@/fonts/vars';
-import MoreButtonIcon from '@/public/creation/card/moreBtnVertical.svg';
-// Styles
-export var StyledCardShowMore = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .cardShowMore {\n    position: relative;\n    cursor: pointer;\n    z-index: 100;\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 40px;\n      z-index: -1;\n    }\n\n    @media (max-width: 1200px) {\n      display: none;\n    }\n\n    &DropDown {\n      font-family: ", ";\n      display: none;\n      position: absolute;\n      background-color: white;\n      top: 20px;\n      left: -170px;\n      width: 184px;\n      box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);\n      border-radius: 6px;\n      padding: 8px;;\n\n      &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: -15px;\n        height: 15px;\n        width: 100%;\n      }\n\n      &Item {\n        ", ";\n        display: block;\n        padding: 6px 0 6px 8px;\n        color: #696f91;\n\n        &:hover {\n          border-radius: 4px;\n          color: ", ";\n          background-color: ", ";\n        }\n      }\n    }\n\n    &:hover > div {\n      display: block;\n      z-index: 100000;\n    }\n    ", " {\n      &:before {\n        width: ", ";\n        height:  ", ";\n      }\n      &DropDown {\n        top: ", ";\n        left:", ";\n        width: ", ";\n        box-shadow: 0px 0px ", " ", " rgba(33, 21, 95, 0.1);\n        border-radius: ", ";\n        padding: ", ";\n\n        &:before {\n          top: ", ";\n          height: ", ";\n        }\n\n        &Item {\n          padding: ", " 0 ", " ", ";\n          &:hover {\n            border-radius: ", ";\n          }\n        }\n      }\n    }\n  }\n}\n"], ["\n  .cardShowMore {\n    position: relative;\n    cursor: pointer;\n    z-index: 100;\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 40px;\n      z-index: -1;\n    }\n\n    @media (max-width: 1200px) {\n      display: none;\n    }\n\n    &DropDown {\n      font-family: ", ";\n      display: none;\n      position: absolute;\n      background-color: white;\n      top: 20px;\n      left: -170px;\n      width: 184px;\n      box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);\n      border-radius: 6px;\n      padding: 8px;;\n\n      &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: -15px;\n        height: 15px;\n        width: 100%;\n      }\n\n      &Item {\n        ", ";\n        display: block;\n        padding: 6px 0 6px 8px;\n        color: #696f91;\n\n        &:hover {\n          border-radius: 4px;\n          color: ", ";\n          background-color: ", ";\n        }\n      }\n    }\n\n    &:hover > div {\n      display: block;\n      z-index: 100000;\n    }\n    ", " {\n      &:before {\n        width: ", ";\n        height:  ", ";\n      }\n      &DropDown {\n        top: ", ";\n        left:", ";\n        width: ", ";\n        box-shadow: 0px 0px ", " ", " rgba(33, 21, 95, 0.1);\n        border-radius: ", ";\n        padding: ", ";\n\n        &:before {\n          top: ", ";\n          height: ", ";\n        }\n\n        &Item {\n          padding: ", " 0 ", " ", ";\n          &:hover {\n            border-radius: ", ";\n          }\n        }\n      }\n    }\n  }\n}\n"])), dmsansFontVarCss.css, TextSmall, BlackColor, BackgroundColorLight, mediaQuery.minWidthFourK, adaptiveValueCalc(40), adaptiveValueCalc(40), adaptiveValueCalc(20), adaptiveValueCalc(-170), adaptiveValueCalc(184), adaptiveValueCalc(10), adaptiveValueCalc(5), adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(-15), adaptiveValueCalc(15), adaptiveValueCalc(6), adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(4));
-// Component
-var CardShowMore = function (_a) {
-    var itemId = _a.itemId, href = _a.href;
-    var openAlert = useUiStore(function (state) { return state.openAlert; });
-    var copyAssetLinkToClipboard = function (e) {
-        e.preventDefault();
-        copyToClipboard("".concat(window.location.origin).concat(href));
-        openAlert({
-            type: alertVariants.copied,
-        });
-    };
-    return (<StyledCardShowMore>
-      <div className="cardShowMore">
-        <MoreButtonIcon />
-        <div className={"cardShowMoreDropDown"} id={itemId} onClick={copyAssetLinkToClipboard}>
-          <span className={'cardShowMoreDropDownItem'}>Copy link</span>
-        </div>
-      </div>
-    </StyledCardShowMore>);
-};
-// Export
-export default CardShowMore;
-var templateObject_1;

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

@@ -1,61 +0,0 @@
-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 { useRouter } from 'next/router';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { isContainChinese, shortenedText } from '@ludo.ninja/utils';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, TextGrayColor } from '@/styles/colors';
-import { FH5, TextSmall } from '@/styles/typography';
-import CardShowMore from '@/system/Cards/CardContent/CardShowMore';
-import { dmsansFontVarCss, poppinsFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledCardContent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  min-height: 94px;\n  flex-grow: 1;\n  justify-content: end;\n\n  .cardContent {\n    display: flex;\n    justify-content: space-between;\n\n    .cardContentWrapper {\n      .mainName {\n        font-family: ", ";\n        ", ";\n        color: ", ";\n        font-size: 13px;\n        margin-bottom: 0;\n      }\n\n      .secondName {\n        font-family: ", ";\n        ", ";\n        color: ", ";\n        font-size: 15px;\n      }\n    }\n  }\n\n  .creatorName {\n    ", ";\n    color: ", ";\n    line-height: 1.39em;\n  }\n\n  @media (max-width: 1040px) {\n    height: auto;\n    padding: 12px;\n  }\n  @media (max-width: 767px) {\n    min-height: 84px;\n  }\n\n  ", " {\n    padding: ", " ", ";\n    min-height: ", ";\n\n    .cardContent {\n      .cardContentWrapper {\n        .mainName {\n          font-size: ", ";\n        }\n\n        .secondName {\n          font-size: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  min-height: 94px;\n  flex-grow: 1;\n  justify-content: end;\n\n  .cardContent {\n    display: flex;\n    justify-content: space-between;\n\n    .cardContentWrapper {\n      .mainName {\n        font-family: ", ";\n        ", ";\n        color: ", ";\n        font-size: 13px;\n        margin-bottom: 0;\n      }\n\n      .secondName {\n        font-family: ", ";\n        ", ";\n        color: ", ";\n        font-size: 15px;\n      }\n    }\n  }\n\n  .creatorName {\n    ", ";\n    color: ", ";\n    line-height: 1.39em;\n  }\n\n  @media (max-width: 1040px) {\n    height: auto;\n    padding: 12px;\n  }\n  @media (max-width: 767px) {\n    min-height: 84px;\n  }\n\n  ", " {\n    padding: ", " ", ";\n    min-height: ", ";\n\n    .cardContent {\n      .cardContentWrapper {\n        .mainName {\n          font-size: ", ";\n        }\n\n        .secondName {\n          font-size: ", ";\n        }\n      }\n    }\n  }\n"])), dmsansFontVarCss.css, TextSmall, TextGrayColor, poppinsFontVarCss.css, FH5, BlackColor, TextSmall, TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(12), adaptiveValueCalc(16), adaptiveValueCalc(94), adaptiveValueCalc(13), adaptiveValueCalc(15));
-// Component
-var CardContent = function (_a) {
-    var _b;
-    var firstName = _a.firstName, creationName = _a.creationName, cuttedShowcaseName = _a.cuttedSecondName, children = _a.children, isNeedShowMoreButton = _a.isNeedShowMoreButton, itemId = _a.itemId, wallets = _a.wallets, creatorName = _a.creatorName, href = _a.href;
-    var router = useRouter();
-    var isGalleryAndFavPage = router.pathname.includes('galleries') ||
-        router.pathname.includes('favorite-lists');
-    var wallet = wallets && ((_b = wallets[0]) === null || _b === void 0 ? void 0 : _b.address);
-    return (<StyledCardContent>
-      <div className="cardContent">
-        <div className="cardContentWrapper">
-          {isGalleryAndFavPage ? (<>
-              {firstName && (<p className={"secondName"}>
-                  {firstName.length > 20 ? shortenedText(firstName) : firstName}
-                </p>)}
-              <h3 className={"mainName"}>
-                {cuttedShowcaseName
-                ? cuttedShowcaseName.length > 20
-                    ? shortenedText(cuttedShowcaseName)
-                    : cuttedShowcaseName
-                : shortenedText(wallet)}
-              </h3>
-            </>) : (<>
-              {creatorName ? (<p className="creatorName">{creatorName}</p>) : (firstName && (<p className={"mainName"}>
-                    {creationName
-                    ? creationName
-                    : firstName.length > 20
-                        ? shortenedText(firstName)
-                        : firstName}
-                  </p>))}
-              <h3 className={"secondName"}>
-                {cuttedShowcaseName && isContainChinese(cuttedShowcaseName)
-                ? cuttedShowcaseName.substring(0, 9)
-                : cuttedShowcaseName}
-              </h3>
-            </>)}
-        </div>
-        {isNeedShowMoreButton && (<CardShowMore href={href} itemId={itemId}/>)}
-      </div>
-      {children}
-    </StyledCardContent>);
-};
-// Export
-export default CardContent;
-var templateObject_1;

package/dist/system/Cards/CardMedia/CardAudio/index.jsx

@@ -1,66 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import Skeleton from 'react-loading-skeleton';
-import { useMediaStore } from '@ludo.ninja/components/src/store';
-import StyledImg from '@/system/Cards/Styles/Image';
-import { getWindowDimensions } from '@/utils/screen';
-import PauseIcon from '@/public/video/pause.svg';
-import PlayIcon from '@/public/video/play.svg';
-// Component
-var CardAudio = function (_a) {
-    var audioSrc = _a.audioSrc, imgSrc = _a.imgSrc, errorImg = _a.errorImg, alt = _a.alt;
-    var _b = useState(''), lImgSrc = _b[0], setLImgSrc = _b[1];
-    var windowWidth = getWindowDimensions().windowWidth;
-    var isMobile = windowWidth <= 768;
-    var imageDimensions = isMobile ? '?d=164x164' : '?d=252x252';
-    var _c = useState(false), isPauseIcon = _c[0], setPauseIcon = _c[1];
-    var _d = useState(null), lAudioSrc = _d[0], setLAudioSrc = _d[1];
-    var _e = useMediaStore(function (state) { return ({
-        playAudioTrack: state.playAudioTrack,
-        pauseAudioTrack: state.pauseAudioTrack,
-        tracks: state.audioTracks,
-    }); }), playAudioTrack = _e.playAudioTrack, pauseAudioTrack = _e.pauseAudioTrack, tracks = _e.tracks;
-    useEffect(function () {
-        var audioElement = new Audio(audioSrc);
-        audioElement.addEventListener('canplay', function () {
-            setLAudioSrc(audioSrc);
-        });
-        var image = new Image();
-        image.src = imgSrc;
-        image.onload = function () { return setLImgSrc("".concat(image.src).concat(imageDimensions)); };
-        image.onerror = function () { return setLImgSrc("".concat(errorImg).concat(imageDimensions)); };
-        return function () {
-            return audioElement.removeEventListener('canplay', function () {
-                setLAudioSrc(null);
-            });
-        };
-    }, []);
-    useEffect(function () {
-        var isNeedSetPlayBtn = tracks.some(function (track) {
-            return track.audioSrc === lAudioSrc && !track.playing;
-        });
-        if (isNeedSetPlayBtn) {
-            setPauseIcon(false);
-        }
-    }, [tracks]);
-    var handlePause = function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        setPauseIcon(false);
-        pauseAudioTrack(lAudioSrc);
-    };
-    var handlePlay = function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        setPauseIcon(true);
-        playAudioTrack(lAudioSrc);
-    };
-    var renderPlayPauseIcon = function () {
-        return isPauseIcon ? (<PauseIcon className={'pauseIcon'} onClick={function (e) { return handlePause(e); }}/>) : (<PlayIcon className={'playIcon'} onClick={function (e) { return handlePlay(e); }}/>);
-    };
-    return lImgSrc.length ? (<>
-      <StyledImg src={imgSrc} alt={alt} isLoading={lAudioSrc}/>
-      {(lAudioSrc === null || lAudioSrc === void 0 ? void 0 : lAudioSrc.length) && renderPlayPauseIcon()}
-    </>) : (<Skeleton height={'100%'} width={'100%'} style={{ lineHeight: 'normal' }}/>);
-};
-// Export
-export default CardAudio;

package/dist/system/Cards/CardMedia/CardImage/index.jsx

@@ -1,17 +0,0 @@
-import React, { useState } from 'react';
-import Skeleton from 'react-loading-skeleton';
-import StyledImg from '@/system/Cards/Styles/Image';
-// Component
-var CardImage = function (_a) {
-    var imgSrc = _a.imgSrc, errorImg = _a.errorImg, alt = _a.alt;
-    var _b = useState(true), loading = _b[0], setLoading = _b[1];
-    return (<>
-      {loading && (<Skeleton height={'100%'} width={'100%'} style={{
-                lineHeight: 'normal',
-                visibility: "".concat(loading ? 'hidden' : 'visible'),
-            }}/>)}
-      <StyledImg isLoading={loading} src={imgSrc} alt={alt} onError={function (e) { return (e.target.src = errorImg); }} onLoad={function () { return setLoading(false); }}/>
-    </>);
-};
-// Export
-export default CardImage;

package/dist/system/Cards/CardMedia/CardVideo/index.jsx

@@ -1,57 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import Skeleton from 'react-loading-skeleton';
-import StyledImg from '@/system/Cards/Styles/Image';
-import StyledVideo from '@/system/Cards/Styles/Video';
-import PauseIcon from '@/public/video/pause.svg';
-import PlayIcon from '@/public/video/play.svg';
-// Component
-var CardVideo = function (_a) {
-    var videoSrc = _a.videoSrc, errorImg = _a.errorImg, alt = _a.alt;
-    var _b = useState(null), lVideoSrc = _b[0], setLVideoSrc = _b[1];
-    var _c = useState(false), isPlayIcon = _c[0], setPlayIcon = _c[1];
-    var video = useRef();
-    useEffect(function () {
-        var video = document.createElement('video');
-        video.setAttribute('src', "".concat(videoSrc));
-        video.addEventListener('canplay', function () {
-            setLVideoSrc(videoSrc);
-            setPlayIcon(true);
-        }, false);
-        video.addEventListener('error', function () {
-            setLVideoSrc(null);
-            setPlayIcon(false);
-        }, false);
-        return function () { return video.removeEventListener('canplay', function () { return setLVideoSrc(null); }); };
-    }, []);
-    var playVideo = function () {
-        var _a;
-        video.current && ((_a = video.current) === null || _a === void 0 ? void 0 : _a.play());
-        setPlayIcon(false);
-    };
-    var pauseVideo = function () {
-        var _a;
-        video.current && ((_a = video.current) === null || _a === void 0 ? void 0 : _a.pause());
-        setPlayIcon(true);
-    };
-    var renderImage = function () { return (<StyledImg isLoading={false} src={errorImg} alt={alt}/>); };
-    if (!videoSrc)
-        return renderImage();
-    return lVideoSrc ? (<>
-      <StyledVideo ref={video} muted loop playsInline preload={'false'}>
-        <source type="video/mp4" src={lVideoSrc}/>
-        <p>{alt}</p>
-      </StyledVideo>
-      {lVideoSrc.length &&
-            (isPlayIcon ? (<PlayIcon className={'playIcon'} onClick={function (e) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    playVideo();
-                }}/>) : (<PauseIcon className={'pauseIcon'} onClick={function (e) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    pauseVideo();
-                }}/>))}
-    </>) : (<Skeleton height={'100%'} width={'100%'} style={{ lineHeight: 'normal' }}/>);
-};
-// Export
-export default CardVideo;

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

@@ -1,34 +0,0 @@
-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 { getRankColor } from '@ludo.ninja/utils';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, InactiveButtonColor, WhiteColor } from '@/styles/colors';
-import { Box, Flex } from '@system';
-// Styles
-var StyledCardRank = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 64px;\n  height: 24px;\n  background-color: ", ";\n  border-radius: 4px;\n  padding: 5px;\n\n  .rankText {\n    color: ", ";\n    margin-right: 4px;\n    font-size: 1.3em;\n    font-weight: 600;\n  }\n\n  .smallText {\n    font-size: 1.2em;\n    letter-spacing: -0.5px;\n  }\n\n  ", " {\n    width: 43px;\n    height: 18px;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    padding: ", ";\n\n    .rankText {\n      font-size: ", ";\n      margin-right: ", ";\n    }\n\n    .smallText {\n      font-size: ", ";\n      letter-spacing: ", ";\n    }\n  }\n"], ["\n  width: 64px;\n  height: 24px;\n  background-color: ", ";\n  border-radius: 4px;\n  padding: 5px;\n\n  .rankText {\n    color: ", ";\n    margin-right: 4px;\n    font-size: 1.3em;\n    font-weight: 600;\n  }\n\n  .smallText {\n    font-size: 1.2em;\n    letter-spacing: -0.5px;\n  }\n\n  ", " {\n    width: 43px;\n    height: 18px;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    padding: ", ";\n\n    .rankText {\n      font-size: ", ";\n      margin-right: ", ";\n    }\n\n    .smallText {\n      font-size: ", ";\n      letter-spacing: ", ";\n    }\n  }\n"])), WhiteColor, BlackColor, mediaQuery.phone, mediaQuery.minWidthFourK, adaptiveValueCalc(64), adaptiveValueCalc(24), adaptiveValueCalc(4), adaptiveValueCalc(5), adaptiveValueCalc(13), adaptiveValueCalc(4), adaptiveValueCalc(12), adaptiveValueCalc(-0.5));
-var SBox = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 10px;\n  width: 32px;\n  background: ", ";\n\n  ", " {\n    height: ", ";\n    width: ", ";\n  }\n"], ["\n  height: 10px;\n  width: 32px;\n  background: ", ";\n\n  ", " {\n    height: ", ";\n    width: ", ";\n  }\n"])), InactiveButtonColor, mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(32));
-var RangeValue = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  background: ", ";\n  height: 10px;\n  width: ", ";\n  border-radius: 2px 0 0 2px;\n\n  ", " {\n    height: ", ";\n    border-radius: ", " 0 0 ", ";\n  }\n"], ["\n  display: block;\n  background: ", ";\n  height: 10px;\n  width: ", ";\n  border-radius: 2px 0 0 2px;\n\n  ", " {\n    height: ", ";\n    border-radius: ", " 0 0 ", ";\n  }\n"])), function (props) { return props.rankValue && getRankColor(props.rankValue); }, function (props) { return "".concat(props.rankValue, "%"); }, mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(2), adaptiveValueCalc(2));
-// Component
-var CardRank = function (_a) {
-    var rank = _a.rank;
-    return (<StyledCardRank>
-      <Flex alignItems={'center'} height={'100%'}>
-        <Box>
-          <p className={"rankText ".concat(!rank && 'smallText')}>
-            {rank ? rank : 'unknown'}
-          </p>
-        </Box>
-        {Boolean(rank) && (<SBox>
-            <RangeValue rankValue={rank}/>
-          </SBox>)}
-      </Flex>
-    </StyledCardRank>);
-};
-// Export
-export default CardRank;
-var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,59 +0,0 @@
-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, isProdENV = _a.isProdENV;
-    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({ ENV: isProdENV }) && <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/HideLink/index.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import { isProd } from '@/utils/env';
-var HideLink = function (_a) {
-    var children = _a.children, className = _a.className, href = _a.href, isProdENV = _a.isProdENV, onClick = _a.onClick;
-    // Todo cardLink
-    var isHide = isProd({ ENV: isProdENV });
-    var Component = isHide ? React.Fragment : Link;
-    return (<Component {...(!isHide && { href: href })} {...(isHide && { className: className })}>
-      {isHide ? (<span className={className} onClick={onClick}>
-          {children}
-        </span>) : (<a className={className} onClick={onClick}>
-          {children}
-        </a>)}
-    </Component>);
-};
-export default HideLink;

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

@@ -1,82 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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 { handleSetScrollPosition } from '@ludo.ninja/utils';
-import HideLink from '@/system/Cards/HideLink';
-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, isProdENV = _a.isProdENV;
-    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
-    return (<StyledRegularCard isNeedHeight={isNeedHeight}>
-      <HideLink className="linkRegularCard" isProdENV={isProdENV} 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()} isProdENV={isProdENV}/>
-        </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({ ENV: isProdENV }) && (<CardLikes isLiked={likes.isLiked} likes={likes.likesCount}/>)}
-          </Flex>
-        </CardContent>
-      </HideLink>
-    </StyledRegularCard>);
-};
-// Export
-export default RegularCard;
-var templateObject_1;

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

@@ -1,22 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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, isProdENV = _a.isProdENV;
-    var renderCardsWithGrid = function (component, isEmptyGallery, forVirtualize) {
-        return (<CardsGrid isTwoColumnLayout={isTwoColumnLayout} isNeedShowNetWorth={isNeedShowNetWorth} isEmptyGallery={isEmptyGallery} isForVirtualize={forVirtualize} tabsSlot={tabsSlot} isProdENV={isProdENV}>
-        {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;