@ludo.ninja/components 1.7.5 → 1.7.7

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

@@ -0,0 +1,33 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var utils_1 = require("@ludo.ninja/utils");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var _system_1 = require("@system");
+// Styles
+var StyledCardRank = styled_components_1.default.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"])), colors_1.WhiteColor, colors_1.BlackColor, ScreenWidth_1.mediaQuery.phone, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(64), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(5), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(-0.5));
+var SBox = (0, styled_components_1.default)(_system_1.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"])), colors_1.InactiveButtonColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(32));
+var RangeValue = styled_components_1.default.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 && (0, utils_1.getRankColor)(props.rankValue); }, function (props) { return "".concat(props.rankValue, "%"); }, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(2), (0, _4k_1.adaptiveValueCalc)(2));
+// Component
+var CardRank = function (_a) {
+    var rank = _a.rank;
+    return (react_1.default.createElement(StyledCardRank, null,
+        react_1.default.createElement(_system_1.Flex, { alignItems: 'center', height: '100%' },
+            react_1.default.createElement(_system_1.Box, null,
+                react_1.default.createElement("p", { className: "rankText ".concat(!rank && 'smallText') }, rank ? rank : 'unknown')),
+            Boolean(rank) && (react_1.default.createElement(SBox, null,
+                react_1.default.createElement(RangeValue, { rankValue: rank }))))));
+};
+// Export
+exports.default = CardRank;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,80 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var profile_1 = require("@/components/profile");
+var MainButton_1 = __importDefault(require("@/system/Buttons/MainButton"));
+var env_1 = require("@/utils/env");
+// Styles
+var StyledCardsGrid = styled_components_1.default.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%'); }, ScreenWidth_1.mediaQuery.minWidthTablet, ScreenWidth_1.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 = (0, react_1.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 (react_1.default.createElement(StyledCardsGrid, { isTwoColumnLayout: isTwoColumnLayout, isEmptyGallery: isEmptyGallery, isForVirtualize: isForVirtualize },
+        react_1.default.createElement("div", { className: "content" }, children),
+        tabsSlot,
+        isTwoColumnLayout && (react_1.default.createElement("div", { className: "sidebar" },
+            !(0, env_1.isProd)({ ENV: isProdENV }) && react_1.default.createElement(profile_1.ProfileInterests, null),
+            react_1.default.createElement(profile_1.ProfileWallets, null),
+            isNeedShowOrganizeBtn && (react_1.default.createElement("div", { className: "sidebarOrganizeBtn" },
+                react_1.default.createElement(MainButton_1.default, { onClick: handleClick, variant: "float", text: 'Organize' })))))));
+};
+// Export
+exports.default = CardsGrid;
+var templateObject_1;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var link_1 = __importDefault(require("next/link"));
+var env_1 = require("@/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 = (0, env_1.isProd)({ ENV: isProdENV });
+    var Component = isHide ? react_1.default.Fragment : link_1.default;
+    return (react_1.default.createElement(Component, __assign({}, (!isHide && { href: href }), (isHide && { className: className })), isHide ? (react_1.default.createElement("span", { className: className, onClick: onClick }, children)) : (react_1.default.createElement("a", { className: className, onClick: onClick }, children))));
+};
+exports.default = HideLink;

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

@@ -0,0 +1,81 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var link_1 = __importDefault(require("next/link"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
+var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
+var CardContent_1 = __importDefault(require("@/system/Cards/CardContent"));
+var CardLikes_1 = __importDefault(require("@/system/Cards/CardContent/CardLikes"));
+var MultiHead_1 = __importDefault(require("@/system/Cards/Styles/MultiHead"));
+var _system_1 = require("@system");
+var defaultImage_svg_1 = __importDefault(require("@/public/gallery/defaultImage.svg"));
+var CardCategory_1 = __importDefault(require("../CardContent/CardCategory"));
+var CardImage_1 = __importDefault(require("../CardMedia/CardImage"));
+// Styles
+var StyledMultiCard = styled_components_1.default.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"])), colors_1.WhiteColor, boxShadow_1.default, boxTransform_1.default, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(3), (0, _4k_1.adaptiveValueCalc)(3), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.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 (react_1.default.createElement("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));
+    };
+    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, react_1.default.createElement(CardImage_1.default, { 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, react_1.default.createElement(defaultImage_svg_1.default, null)));
+            }
+        };
+        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 (react_1.default.createElement(StyledMultiCard, null,
+        react_1.default.createElement(link_1.default, { href: gallery.getCreationLink() },
+            react_1.default.createElement(MultiHead_1.default, null, renderMedia()),
+            react_1.default.createElement(CardContent_1.default, { firstName: gallery.getGalleryName(), secondName: secondName, wallets: gallery.getGalleryUserWallets(), isNeedShowMoreButton: false, itemId: gallery.getGalleryId() },
+                react_1.default.createElement(_system_1.Flex, { alignItems: "flex-end", justifyContent: 'space-between' },
+                    react_1.default.createElement(CardCategory_1.default, { label: gallery.getLabel() }),
+                    react_1.default.createElement(CardLikes_1.default, { isLiked: false, likes: 0 }))))));
+};
+// Export
+exports.default = MultiMediaCard;
+var templateObject_1;

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

@@ -0,0 +1,56 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var utils_1 = require("@ludo.ninja/utils");
+var HideLink_1 = __importDefault(require("@/system/Cards/HideLink"));
+var likes_1 = __importDefault(require("@/hooks/likes"));
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
+var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
+var CardContent_1 = __importDefault(require("@/system/Cards/CardContent"));
+var CardCategory_1 = __importDefault(require("@/system/Cards/CardContent/CardCategory"));
+var CardLikes_1 = __importDefault(require("@/system/Cards/CardContent/CardLikes"));
+var CardHeadIcons_1 = __importDefault(require("@/system/Cards/CardHeadIcons"));
+var Head_1 = __importDefault(require("@/system/Cards/Styles/Head"));
+var Headicons_1 = __importDefault(require("@/system/Cards/Styles/Headicons"));
+var _system_1 = require("@system");
+var env_1 = require("@/utils/env");
+var screen_1 = require("@/utils/screen");
+// Styles
+var StyledRegularCard = styled_components_1.default.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"])), colors_1.WhiteColor, boxShadow_1.default, boxTransform_1.default, function (props) { return (props.isNeedHeight ? '346px' : ''); }, Headicons_1.default, ScreenWidth_1.mediaQuery.maxWidthTablet, function (props) { return (props.isNeedHeight ? '258px' : ''); }, ScreenWidth_1.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 = (0, screen_1.getWindowDimensions)().windowWidth;
+    var isMobile = windowWidth <= 1200;
+    var _b = (0, likes_1.default)({
+        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 (react_1.default.createElement(StyledRegularCard, { isNeedHeight: isNeedHeight },
+        react_1.default.createElement(HideLink_1.default, { className: "linkRegularCard", isProdENV: isProdENV, href: creation.getCreationLink(), onClick: function () {
+                return (0, utils_1.handleSetScrollPosition)(scrollKeys.pageOffsetKey, scrollKeys.itemsCountKey, String(cardsCount));
+            } },
+            react_1.default.createElement(Head_1.default, null,
+                creation.detectMediaType().displaySingleMedia(),
+                react_1.default.createElement(CardHeadIcons_1.default, { isRegularCard: true, isIconLiked: likes.isLiked, creation: creation, addLikeToCard: addLike, deleteLikeFromCard: deleteLike, isUserProfile: false, itemId: creation.getItemId(), isProdENV: isProdENV })),
+            react_1.default.createElement(CardContent_1.default, { creationName: creationName, firstName: creation.getCreatorAddress(), secondName: creation.getName(), cuttedSecondName: creation.getCuttedSecondName(!isMobile), isNeedShowMoreButton: false, itemId: creation.getItemId() },
+                react_1.default.createElement(_system_1.Flex, { alignItems: "end", justifyContent: 'space-between' },
+                    react_1.default.createElement(CardCategory_1.default, { label: creation.getLabel() }),
+                    !(0, env_1.isProd)({ ENV: isProdENV }) && (react_1.default.createElement(CardLikes_1.default, { isLiked: likes.isLiked, likes: likes.likesCount })))))));
+};
+// Export
+exports.default = RegularCard;
+var templateObject_1;

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

@@ -1,11 +1,16 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
 // 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 styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+var StyledContentCard = styled_components_1.default.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"])), typography_1.TextSmall, colors_1.TextGrayColor, typography_1.MainText, colors_1.BlackColor);
+exports.default = StyledContentCard;
 var templateObject_1;

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

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

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

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

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

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

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

@@ -1,13 +1,18 @@
+"use strict";
 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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/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 StyledLikes = styled_components_1.default.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'); }, typography_1.MainText, colors_1.TextGrayColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(5), (0, _4k_1.adaptiveValueCalc)(15));
+exports.default = StyledLikes;
 var templateObject_1;

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

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

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

@@ -1,8 +1,13 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from 'styled-components';
-var StyledVideo = styled.video(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n"], ["\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n"])));
-export default StyledVideo;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = __importDefault(require("styled-components"));
+var StyledVideo = styled_components_1.default.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"])));
+exports.default = StyledVideo;
 var templateObject_1;

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

@@ -1,7 +1,20 @@
-export { default as StyledContentCard } from './Content';
-export { default as StyledCardHead } from './Head';
-export { default as StyledHeadIcons } from './Headicons';
-export { default as StyledImg } from './Image';
-export { default as StyledLikes } from './Likes';
-export { default as StyledMultiHead } from './MultiHead';
-export { default as StyledVideo } from './Video';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledVideo = exports.StyledMultiHead = exports.StyledLikes = exports.StyledImg = exports.StyledHeadIcons = exports.StyledCardHead = exports.StyledContentCard = void 0;
+var Content_1 = require("./Content");
+Object.defineProperty(exports, "StyledContentCard", { enumerable: true, get: function () { return __importDefault(Content_1).default; } });
+var Head_1 = require("./Head");
+Object.defineProperty(exports, "StyledCardHead", { enumerable: true, get: function () { return __importDefault(Head_1).default; } });
+var Headicons_1 = require("./Headicons");
+Object.defineProperty(exports, "StyledHeadIcons", { enumerable: true, get: function () { return __importDefault(Headicons_1).default; } });
+var Image_1 = require("./Image");
+Object.defineProperty(exports, "StyledImg", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
+var Likes_1 = require("./Likes");
+Object.defineProperty(exports, "StyledLikes", { enumerable: true, get: function () { return __importDefault(Likes_1).default; } });
+var MultiHead_1 = require("./MultiHead");
+Object.defineProperty(exports, "StyledMultiHead", { enumerable: true, get: function () { return __importDefault(MultiHead_1).default; } });
+var Video_1 = require("./Video");
+Object.defineProperty(exports, "StyledVideo", { enumerable: true, get: function () { return __importDefault(Video_1).default; } });

package/dist/system/Cards/index.js

@@ -1,14 +1,46 @@
-export { default as CardCheckBox } from './CardCheckbox';
-export { default as CardContent } from './CardContent';
-export { default as CardCategory } from './CardContent/CardCategory';
-export { default as CardLikes } from './CardContent/CardLikes';
-export { default as CardShowMore } from './CardContent/CardShowMore';
-export { default as HideLink } from './HideLink';
-export { StyledCardShowMore } from './CardContent/CardShowMore';
-export { default as CardHeadIcons } from './CardHeadIcons';
-export { default as CardRank } from './CardRank';
-export { default as CardsGrid } from './CardsGrid';
-export { default as MultiMediaCard } from './MultiMediaCard';
-export { default as RegularCard } from './RegularCard';
-export * from './CardMedia';
-export * from './Styles';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RegularCard = exports.MultiMediaCard = exports.CardsGrid = exports.CardRank = exports.CardHeadIcons = exports.StyledCardShowMore = exports.HideLink = exports.CardShowMore = exports.CardLikes = exports.CardCategory = exports.CardContent = exports.CardCheckBox = void 0;
+var CardCheckbox_1 = require("./CardCheckbox");
+Object.defineProperty(exports, "CardCheckBox", { enumerable: true, get: function () { return __importDefault(CardCheckbox_1).default; } });
+var CardContent_1 = require("./CardContent");
+Object.defineProperty(exports, "CardContent", { enumerable: true, get: function () { return __importDefault(CardContent_1).default; } });
+var CardCategory_1 = require("./CardContent/CardCategory");
+Object.defineProperty(exports, "CardCategory", { enumerable: true, get: function () { return __importDefault(CardCategory_1).default; } });
+var CardLikes_1 = require("./CardContent/CardLikes");
+Object.defineProperty(exports, "CardLikes", { enumerable: true, get: function () { return __importDefault(CardLikes_1).default; } });
+var CardShowMore_1 = require("./CardContent/CardShowMore");
+Object.defineProperty(exports, "CardShowMore", { enumerable: true, get: function () { return __importDefault(CardShowMore_1).default; } });
+var HideLink_1 = require("./HideLink");
+Object.defineProperty(exports, "HideLink", { enumerable: true, get: function () { return __importDefault(HideLink_1).default; } });
+var CardShowMore_2 = require("./CardContent/CardShowMore");
+Object.defineProperty(exports, "StyledCardShowMore", { enumerable: true, get: function () { return CardShowMore_2.StyledCardShowMore; } });
+var CardHeadIcons_1 = require("./CardHeadIcons");
+Object.defineProperty(exports, "CardHeadIcons", { enumerable: true, get: function () { return __importDefault(CardHeadIcons_1).default; } });
+var CardRank_1 = require("./CardRank");
+Object.defineProperty(exports, "CardRank", { enumerable: true, get: function () { return __importDefault(CardRank_1).default; } });
+var CardsGrid_1 = require("./CardsGrid");
+Object.defineProperty(exports, "CardsGrid", { enumerable: true, get: function () { return __importDefault(CardsGrid_1).default; } });
+var MultiMediaCard_1 = require("./MultiMediaCard");
+Object.defineProperty(exports, "MultiMediaCard", { enumerable: true, get: function () { return __importDefault(MultiMediaCard_1).default; } });
+var RegularCard_1 = require("./RegularCard");
+Object.defineProperty(exports, "RegularCard", { enumerable: true, get: function () { return __importDefault(RegularCard_1).default; } });
+__exportStar(require("./CardMedia"), exports);
+__exportStar(require("./Styles"), exports);