@ludo.ninja/components 1.1.5 → 1.1.7

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,60 +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 { 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

@@ -1,11 +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;
-};
-// 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

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

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

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

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

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

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

@@ -1,13 +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 { 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

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

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

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

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

@@ -1,75 +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;
-};
-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

@@ -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;
-    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;