@ludo.ninja/components 1.5.8 → 1.6.0

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

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

package/dist/system/Cards/CardMedia/CardVideo/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const CardVideo: ({ videoSrc, errorImg, alt, }: {
+    videoSrc: string;
+    errorImg: string;
+    alt: string;
+}) => React.JSX.Element;
+export default CardVideo;

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

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

package/dist/system/Cards/CardMedia/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CardAudio } from './CardAudio';
+export { default as CardVideo } from './CardVideo';
+export { default as CardImage } from './CardImage';

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

@@ -0,0 +1,3 @@
+export { default as CardAudio } from './CardAudio';
+export { default as CardVideo } from './CardVideo';
+export { default as CardImage } from './CardImage';

package/dist/system/Cards/CardRank/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const CardRank: ({ rank }: {
+    rank: number;
+}) => React.JSX.Element;
+export default CardRank;

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

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

package/dist/system/Cards/CardsGrid/index.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import CreationEntity from '@/dto/CreationEntity';
+declare const CardsGrid: ({ children, isTwoColumnLayout, addMethod, creations, isEmptyGallery, isForVirtualize, tabsSlot, isProdENV, }: {
+    children: React.ReactNode;
+    isTwoColumnLayout?: boolean;
+    isNeedShowNetWorth?: boolean;
+    addMethod?: () => void;
+    creations?: CreationEntity[];
+    isEmptyGallery?: boolean;
+    isForVirtualize?: boolean;
+    tabsSlot?: ReactNode;
+    isProdENV: string;
+}) => React.JSX.Element;
+export default CardsGrid;

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

@@ -0,0 +1,59 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { 
+// ProfileNetWorth,
+ProfileInterests, ProfileWallets, } from '@/components/profile';
+import MainButton from '@/system/Buttons/MainButton';
+import { isProd } from '@/utils/env';
+// Styles
+var StyledCardsGrid = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 24px 0;\n  display: flex;\n  justify-content: space-between;\n\n  .content {\n    display: grid;\n    grid-template-columns: ", ";\n    gap: 24px;\n    width: ", ";\n  }\n\n  .sidebar {\n    width: 100%;\n    margin-left: 32px;\n\n    ", " {\n      width: 156px;\n      margin-left: 24px;\n    }\n\n    ", " {\n      width: 244px;\n      margin-left: 0;\n    }\n\n    &OrganizeBtn {\n      margin-top: 16px;\n      display: block;\n      @media (min-width: 1200px) {\n        display: none;\n      }\n    }\n  }\n\n  @media (max-width: 1200px) {\n    .content {\n      gap: 16px;\n    }\n  }\n\n  @media (max-width: 767px) {\n    flex-direction: column-reverse;\n    .content {\n      gap: 12px;\n      grid-template-columns: ", ";\n      width: 100%;\n      margin-top: 16px;\n    }\n\n    .sidebar {\n      width: 100%;\n      margin-left: 0;\n\n      &OrganizeBtn {\n        display: none;\n      }\n    }\n  }\n"], ["\n  margin: 24px 0;\n  display: flex;\n  justify-content: space-between;\n\n  .content {\n    display: grid;\n    grid-template-columns: ", ";\n    gap: 24px;\n    width: ", ";\n  }\n\n  .sidebar {\n    width: 100%;\n    margin-left: 32px;\n\n    ", " {\n      width: 156px;\n      margin-left: 24px;\n    }\n\n    ", " {\n      width: 244px;\n      margin-left: 0;\n    }\n\n    &OrganizeBtn {\n      margin-top: 16px;\n      display: block;\n      @media (min-width: 1200px) {\n        display: none;\n      }\n    }\n  }\n\n  @media (max-width: 1200px) {\n    .content {\n      gap: 16px;\n    }\n  }\n\n  @media (max-width: 767px) {\n    flex-direction: column-reverse;\n    .content {\n      gap: 12px;\n      grid-template-columns: ", ";\n      width: 100%;\n      margin-top: 16px;\n    }\n\n    .sidebar {\n      width: 100%;\n      margin-left: 0;\n\n      &OrganizeBtn {\n        display: none;\n      }\n    }\n  }\n"])), function (props) {
+    if (props.isEmptyGallery) {
+        return '1fr';
+    }
+    else if (props.isTwoColumnLayout && !props.isForVirtualize) {
+        return '1fr 1fr 1fr';
+    }
+    else if (props.isForVirtualize) {
+        return '1fr';
+    }
+    else {
+        return '1fr 1fr 1fr 1fr';
+    }
+}, function (props) { return (props.isTwoColumnLayout ? '74.5%' : '100%'); }, mediaQuery.minWidthTablet, mediaQuery.minWidthDesktop, function (props) {
+    if (props.isEmptyGallery || props.isForVirtualize) {
+        return '1fr';
+    }
+    return '1fr 1fr';
+});
+// Component
+var CardsGrid = function (_a) {
+    var children = _a.children, isTwoColumnLayout = _a.isTwoColumnLayout, 
+    // isNeedShowNetWorth = true,
+    addMethod = _a.addMethod, creations = _a.creations, isEmptyGallery = _a.isEmptyGallery, isForVirtualize = _a.isForVirtualize, tabsSlot = _a.tabsSlot, isProdENV = _a.isProdENV;
+    var _b = useState(Boolean(creations === null || creations === void 0 ? void 0 : creations.length)), isNeedShowOrganizeBtn = _b[0], setShowOrganizeBtn = _b[1];
+    var handleClick = function () {
+        setShowOrganizeBtn(false);
+        addMethod && addMethod();
+    };
+    return (<StyledCardsGrid isTwoColumnLayout={isTwoColumnLayout} isEmptyGallery={isEmptyGallery} isForVirtualize={isForVirtualize}>
+      <div className="content">{children}</div>
+      {tabsSlot}
+      {isTwoColumnLayout && (<div className="sidebar">
+          {/*{isNeedShowNetWorth && <ProfileNetWorth />}*/}
+          {/* // Todo ProfileInterests */}
+          {!isProd({ ENV: isProdENV }) && <ProfileInterests />}
+          <ProfileWallets />
+          {isNeedShowOrganizeBtn && (<div className="sidebarOrganizeBtn">
+              <MainButton onClick={handleClick} variant="float" text={'Organize'}/>
+            </div>)}
+        </div>)}
+    </StyledCardsGrid>);
+};
+// Export
+export default CardsGrid;
+var templateObject_1;

package/dist/system/Cards/HideLink/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface HideLinkProps {
+    children: React.ReactNode;
+    className: string;
+    href: string;
+    isProdENV: string;
+    onClick?: () => void;
+}
+declare const HideLink: React.FC<HideLinkProps>;
+export default HideLink;

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

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

package/dist/system/Cards/MultiMediaCard/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
+import CreationEntity from '@/dto/CreationEntity';
+import GalleryEntityV2 from '@/dto/GalleryEntityV2';
+declare const MultiMediaCard: ({ gallery, assets, collections, }: {
+    gallery: GalleryEntityV2;
+    assets: CreationEntity[] | null;
+    collections: CollectionCreationEntity[] | null;
+}) => React.JSX.Element;
+export default MultiMediaCard;

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

@@ -0,0 +1,82 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import Link from 'next/link';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { WhiteColor } from '@/styles/colors';
+import BoxShadow from '@/styles/mixins/boxShadow';
+import BoxTransform from '@/styles/mixins/boxTransform';
+import CardContent from '@/system/Cards/CardContent';
+import CardLikes from '@/system/Cards/CardContent/CardLikes';
+import StyledMultiHead from '@/system/Cards/Styles/MultiHead';
+import { Flex } from '@system';
+import DefaultGalleryIcon from '@/public/gallery/defaultImage.svg';
+import CardCategory from '../CardContent/CardCategory';
+import CardImage from '../CardMedia/CardImage';
+// Styles
+var StyledMultiCard = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  @media (max-width: 1200px) {\n    height: max-content;\n  }\n\n  .media {\n    width: 100%;\n    height: 100%;\n    aspect-ratio: 1 / 1;\n\n    & svg {\n      width: 100%;\n      height: 100%;\n    }\n\n    & img {\n      border-radius: 3px;\n    }\n\n    & span {\n      display: none;\n    }\n\n    & video {\n      border-radius: 3px;\n    }\n  }\n\n  .media.digital {\n    position: relative;\n\n    & svg {\n      position: absolute;\n      width: 20px;\n      height: 20px;\n      bottom: 0;\n      right: 0;\n\n      & circle,\n      & path {\n        transform: scale(0.5);\n      }\n    }\n  }\n\n  ", " {\n    border-radius: ", ";\n    .media {\n      & img {\n        border-radius: ", ";\n      }\n      & video {\n        border-radius: ", ";\n      }\n    }\n\n    .media.digital {\n      & svg {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"], ["\n  position: relative;\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  @media (max-width: 1200px) {\n    height: max-content;\n  }\n\n  .media {\n    width: 100%;\n    height: 100%;\n    aspect-ratio: 1 / 1;\n\n    & svg {\n      width: 100%;\n      height: 100%;\n    }\n\n    & img {\n      border-radius: 3px;\n    }\n\n    & span {\n      display: none;\n    }\n\n    & video {\n      border-radius: 3px;\n    }\n  }\n\n  .media.digital {\n    position: relative;\n\n    & svg {\n      position: absolute;\n      width: 20px;\n      height: 20px;\n      bottom: 0;\n      right: 0;\n\n      & circle,\n      & path {\n        transform: scale(0.5);\n      }\n    }\n  }\n\n  ", " {\n    border-radius: ", ";\n    .media {\n      & img {\n        border-radius: ", ";\n      }\n      & video {\n        border-radius: ", ";\n      }\n    }\n\n    .media.digital {\n      & svg {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"])), WhiteColor, BoxShadow, BoxTransform, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(3), adaptiveValueCalc(3), adaptiveValueCalc(20), adaptiveValueCalc(20));
+// Component
+var MultiMediaCard = function (_a) {
+    var gallery = _a.gallery, assets = _a.assets, collections = _a.collections;
+    var mediaTemplate = function (mediaKey, media) {
+        var _a, _b;
+        return (<div key={mediaKey} className={((_a = media.type) === null || _a === void 0 ? void 0 : _a.name) === 'CardVideo' || ((_b = media.type) === null || _b === void 0 ? void 0 : _b.name) === 'CardAudio'
+                ? 'media digital'
+                : 'media'}>
+        {media}
+      </div>);
+    };
+    var renderMedia = function () {
+        var _a, _b;
+        // if (
+        //   (!assets || assets.length === 0) &&
+        //   (!collections || collections.length === 0)
+        // )
+        //   return null;
+        var galleryCreationIds = gallery.getGalleryCreationIds();
+        var cardsMedia = [];
+        var _loop_1 = function (i) {
+            var creationId = galleryCreationIds[i];
+            var asset = assets === null || assets === void 0 ? void 0 : assets.find(function (asset) {
+                return creationId === asset.getCreationId();
+            });
+            var collection = collections === null || collections === void 0 ? void 0 : collections.find(function (collection) {
+                return collection.getCreationId() ===
+                    (creationId === null || creationId === void 0 ? void 0 : creationId.split('.').splice(1).join('.'));
+            });
+            if (asset) {
+                cardsMedia.push(mediaTemplate(i, asset.detectMediaType().displaySingleMedia()));
+            }
+            else if (collection) {
+                cardsMedia.push(mediaTemplate(i, <CardImage alt={"".concat(collection.getName(), " ").concat(collection.getAddress() || '')} imgSrc={(_b = (_a = collection.getOriginalUrls()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : ''} errorImg={'/noContent/noContent.svg'}/>));
+            }
+            else {
+                cardsMedia.push(mediaTemplate(i, <DefaultGalleryIcon />));
+            }
+        };
+        for (var i = 0; i < 4; i++) {
+            _loop_1(i);
+        }
+        return cardsMedia;
+    };
+    var secondName = gallery.getGalleryUsername() !== '' ? gallery.getGalleryUsername() : '';
+    // const userCreationAddresses = gallery?.getGalleryCreations()[0]?.getOwnersAddresses();
+    return (<StyledMultiCard>
+      <Link href={gallery.getCreationLink()}>
+        <StyledMultiHead>{renderMedia()}</StyledMultiHead>
+        <CardContent firstName={gallery.getGalleryName()} secondName={secondName} wallets={gallery.getGalleryUserWallets()} isNeedShowMoreButton={false} itemId={gallery.getGalleryId()}>
+          <Flex alignItems="flex-end" justifyContent={'space-between'}>
+            <CardCategory label={gallery.getLabel()}/>
+            <CardLikes isLiked={false} likes={0}/>
+          </Flex>
+        </CardContent>
+      </Link>
+    </StyledMultiCard>);
+};
+// Export
+export default MultiMediaCard;
+var templateObject_1;

package/dist/system/Cards/RegularCard/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { searchSchema } from '@ludo.ninja/api';
+import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
+import CreationEntity from '@/dto/CreationEntity';
+import GalleryEntityV2 from '@/dto/GalleryEntityV2';
+export type RemoveToolsType = {
+    gallery: GalleryEntityV2;
+    removeFn: () => void;
+};
+declare const RegularCard: ({ creationName, creation, cardsCount, scrollKeys, isNeedHeight, likesDynamicInfo, toolsForRemove, isProdENV, }: {
+    creationName?: string;
+    creation: CreationEntity | CollectionCreationEntity;
+    cardsCount: number;
+    scrollKeys: {
+        pageOffsetKey: string;
+        itemsCountKey: string;
+    };
+    isNeedHeight: boolean;
+    likesDynamicInfo?: searchSchema.IDynamicAssetData | searchSchema.IDynamicCollectionData;
+    toolsForRemove?: RemoveToolsType;
+    isProdENV: string;
+}) => React.JSX.Element;
+export default RegularCard;

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

@@ -0,0 +1,57 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { handleSetScrollPosition } from '@ludo.ninja/utils';
+import HideLink from '@/system/Cards/HideLink';
+import useLikes from '@/hooks/likes';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { WhiteColor } from '@/styles/colors';
+import BoxShadow from '@/styles/mixins/boxShadow';
+import BoxTransform from '@/styles/mixins/boxTransform';
+import CardContent from '@/system/Cards/CardContent';
+import CardCategory from '@/system/Cards/CardContent/CardCategory';
+import CardLikes from '@/system/Cards/CardContent/CardLikes';
+import CardHeadIcons from '@/system/Cards/CardHeadIcons';
+import StyledCardHead from '@/system/Cards/Styles/Head';
+import StyledHeadIcons from '@/system/Cards/Styles/Headicons';
+import { Flex } from '@system';
+import { isProd } from '@/utils/env';
+import { getWindowDimensions } from '@/utils/screen';
+// Styles
+var StyledRegularCard = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  min-height: ", ";\n\n  &:hover ", " {\n    transition: 0.2s opacity ease-in;\n    opacity: 1 !important;\n  }\n\n  .linkRegularCard {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  ", " {\n    width: 164px;\n    min-height: ", ";\n  }\n\n  ", " {\n    width: 154px;\n    min-height: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  min-height: ", ";\n\n  &:hover ", " {\n    transition: 0.2s opacity ease-in;\n    opacity: 1 !important;\n  }\n\n  .linkRegularCard {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  ", " {\n    width: 164px;\n    min-height: ", ";\n  }\n\n  ", " {\n    width: 154px;\n    min-height: ", ";\n  }\n"])), WhiteColor, BoxShadow, BoxTransform, function (props) { return (props.isNeedHeight ? '346px' : ''); }, StyledHeadIcons, mediaQuery.maxWidthTablet, function (props) { return (props.isNeedHeight ? '258px' : ''); }, mediaQuery.mobile, function (props) { return (props.isNeedHeight ? '244px' : ''); });
+// Component
+var RegularCard = function (_a) {
+    var creationName = _a.creationName, creation = _a.creation, cardsCount = _a.cardsCount, scrollKeys = _a.scrollKeys, isNeedHeight = _a.isNeedHeight, likesDynamicInfo = _a.likesDynamicInfo, toolsForRemove = _a.toolsForRemove, isProdENV = _a.isProdENV;
+    var windowWidth = getWindowDimensions().windowWidth;
+    var isMobile = windowWidth <= 1200;
+    var _b = useLikes({
+        defaultLikesCount: (likesDynamicInfo === null || likesDynamicInfo === void 0 ? void 0 : likesDynamicInfo.likesNum) || creation.getLikes(),
+        defaultIsLiked: (likesDynamicInfo === null || likesDynamicInfo === void 0 ? void 0 : likesDynamicInfo.isLikedByUser) || creation.getIsLiked(),
+        itemType: creation.getItemType(),
+        removeOnDislike: toolsForRemove,
+    }), likes = _b.likes, addLike = _b.addLike, deleteLike = _b.deleteLike;
+    //show asset page
+    return (<StyledRegularCard isNeedHeight={isNeedHeight}>
+      <HideLink className="linkRegularCard" isProdENV={isProdENV} href={creation.getCreationLink()} onClick={function () {
+            return handleSetScrollPosition(scrollKeys.pageOffsetKey, scrollKeys.itemsCountKey, String(cardsCount));
+        }}>
+        <StyledCardHead>
+          {creation.detectMediaType().displaySingleMedia()}
+          <CardHeadIcons isRegularCard={true} isIconLiked={likes.isLiked} creation={creation} addLikeToCard={addLike} deleteLikeFromCard={deleteLike} isUserProfile={false} itemId={creation.getItemId()} isProdENV={isProdENV}/>
+        </StyledCardHead>
+        <CardContent creationName={creationName} firstName={creation.getCreatorAddress()} secondName={creation.getName()} cuttedSecondName={creation.getCuttedSecondName(!isMobile)} isNeedShowMoreButton={false} itemId={creation.getItemId()}>
+          <Flex alignItems="end" justifyContent={'space-between'}>
+            <CardCategory label={creation.getLabel()}/>
+            {/* // Todo cardLikes */}
+            {!isProd({ ENV: isProdENV }) && (<CardLikes isLiked={likes.isLiked} likes={likes.likesCount}/>)}
+          </Flex>
+        </CardContent>
+      </HideLink>
+    </StyledRegularCard>);
+};
+// Export
+export default RegularCard;
+var templateObject_1;

package/dist/system/Cards/Styles/Content.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const StyledContentCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export default StyledContentCard;

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

@@ -0,0 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+// Styles
+import styled from 'styled-components';
+import { BlackColor, TextGrayColor } from '@/styles/colors';
+import { MainText, TextSmall } from '@/styles/typography';
+var StyledContentCard = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  height: auto;\n\n  &Header {\n    display: flex;\n    justify-content: space-between;\n\n    &Artist {\n      .artist_name {\n        ", ";\n        color: ", ";\n        line-height: 1.39em;\n      }\n      .art_name {\n        ", ";\n        color: ", ";\n        line-height: 1.47em;\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  @media (max-width: 1040px) {\n    height: auto;\n    padding: 12px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  height: auto;\n\n  &Header {\n    display: flex;\n    justify-content: space-between;\n\n    &Artist {\n      .artist_name {\n        ", ";\n        color: ", ";\n        line-height: 1.39em;\n      }\n      .art_name {\n        ", ";\n        color: ", ";\n        line-height: 1.47em;\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  @media (max-width: 1040px) {\n    height: auto;\n    padding: 12px;\n  }\n"])), TextSmall, TextGrayColor, MainText, BlackColor);
+export default StyledContentCard;
+var templateObject_1;

package/dist/system/Cards/Styles/Head.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const StyledCardHead: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export default StyledCardHead;

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

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

package/dist/system/Cards/Styles/Headicons.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const StyledHeadIcons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isMobile: boolean;
+}>> & string;
+export default StyledHeadIcons;

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

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

package/dist/system/Cards/Styles/Image.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const StyledImg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
+    isLoading: boolean;
+}>> & string;
+export default StyledImg;

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

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

package/dist/system/Cards/Styles/Likes.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const StyledLikes: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isLiked: boolean;
+}>> & string;
+export default StyledLikes;

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

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { TextGrayColor } from '@/styles/colors';
+import { MainText } from '@/styles/typography';
+// Styles
+var StyledLikes = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: end;\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    margin-right: 5px;\n\n    path {\n      fill: ", ";\n      transition: fill 0.2s;\n    }\n\n    :hover path {\n      fill: ", ";\n    }\n  }\n\n  .counter {\n    ", ";\n    font-size: 15px;\n    color: ", ";\n    line-height: 1;\n  }\n\n  ", " {\n    .icon {\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n    }\n\n    .counter {\n      font-size: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  align-items: end;\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    margin-right: 5px;\n\n    path {\n      fill: ", ";\n      transition: fill 0.2s;\n    }\n\n    :hover path {\n      fill: ", ";\n    }\n  }\n\n  .counter {\n    ", ";\n    font-size: 15px;\n    color: ", ";\n    line-height: 1;\n  }\n\n  ", " {\n    .icon {\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n    }\n\n    .counter {\n      font-size: ", ";\n    }\n  }\n"])), function (props) { return (props.isLiked ? '#F94C66' : '#cfd5ea'); }, function (props) { return (props.isLiked ? '' : '#696F90'); }, MainText, TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(18), adaptiveValueCalc(18), adaptiveValueCalc(5), adaptiveValueCalc(15));
+export default StyledLikes;
+var templateObject_1;

package/dist/system/Cards/Styles/MultiHead.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const StyledMultiHead: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export default StyledMultiHead;

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

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

package/dist/system/Cards/Styles/Video.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const StyledVideo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, never>> & string;
+export default StyledVideo;

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

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

package/dist/system/Cards/Styles/index.d.ts

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

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

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

package/dist/system/Cards/index.d.ts

@@ -0,0 +1,14 @@
+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';