@ludo.ninja/components 1.1.1 → 1.1.3

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

@@ -1,183 +1,81 @@
+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';
-
-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 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)
-);
+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'
-        }
-      >
+    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();
+      </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('.'))
-              );
+            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 />));
-      }
+            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;
     };
-    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>
+    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()}
-        >
+        <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} />
+            <CardCategory label={gallery.getLabel()}/>
+            <CardLikes isLiked={false} likes={0}/>
           </Flex>
         </CardContent>
       </Link>
-    </StyledMultiCard>
-  );
+    </StyledMultiCard>);
 };
 // Export
 export default MultiMediaCard;

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

@@ -1,160 +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 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';
-
-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 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' : '';
-  }
-);
+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)
-          );
-        }}
-      >
+    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()}
-          />
+          <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()}
-        >
+        <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()} />
+            <CardCategory label={creation.getLabel()}/>
             {/* // Todo cardLikes */}
-            {!isProd() && (
-              <CardLikes isLiked={likes.isLiked} likes={likes.likesCount} />
-            )}
+            {!isProd() && (<CardLikes isLiked={likes.isLiked} likes={likes.likesCount}/>)}
           </Flex>
         </CardContent>
       </HideLink>
-    </StyledRegularCard>
-  );
+    </StyledRegularCard>);
 };
 // Export
 export default RegularCard;

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

@@ -1,42 +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 __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-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
-);
+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/Likes.js

@@ -1,64 +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';
-
-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 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)
-);
+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;