@ludo.ninja/components 1.1.6 → 1.1.8

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

@@ -1,136 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React from 'react';
-import { useRouter } from 'next/router';
-import { useUserStore } from '@/modules/user/store';
-import { useUiStore } from '@/store/ui';
-import { ScreenWidth } from '@/styles/ScreenWidth';
-import AddCreationToFavoriteList from '@/components/favoriteList/add/addCreationToFavoriteList';
-import CardRank from '@/system/Cards/CardRank';
-import StyledHeadIcons from '@/system/Cards/Styles/Headicons';
-import { redirectToLoginWindow } from '@/utils/auth';
-import { isProd } from '@/utils/env';
-import { getWindowDimensions } from '@/utils/screen';
-import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
-import { LabelKeys } from '@/dto/common/ItemType';
-import AddToFavListIcon from '@/public/cards/addToFavListIcon.svg';
-import AddToGalleryIcon from '@/public/cards/addToGalleryIcon.svg';
-import AddToLikesIcon from '@/public/cards/heart.svg';
-// Component
-var CardHeadIcons = function (_a) {
-    var creation = _a.creation, isRegularCard = _a.isRegularCard, isIconLiked = _a.isIconLiked, addLikeToCard = _a.addLikeToCard, deleteLikeFromCard = _a.deleteLikeFromCard, actionIsNeedRenderCheckbox = _a.actionIsNeedRenderCheckbox, itemId = _a.itemId, isUserProfile = _a.isUserProfile, isDisabled = _a.isDisabled;
-    var openModalSidebarPortal = useUiStore(function (state) { return state.openModalSidebarPortal; });
-    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
-    var isLicked = isIconLiked && isSignedIn;
-    var windowWidth = getWindowDimensions().windowWidth;
-    var isMobile = windowWidth <= ScreenWidth.TABLET || windowWidth <= ScreenWidth.DESKTOP;
-    var router = useRouter();
-    var isGallery = router.pathname.includes('gallery');
-    var handleClick = function (e, type) { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    e.preventDefault();
-                    e.stopPropagation();
-                    if (!!isSignedIn) return [3 /*break*/, 1];
-                    redirectToLoginWindow();
-                    return [3 /*break*/, 8];
-                case 1:
-                    if (!(type === 'fav-list')) return [3 /*break*/, 2];
-                    openModalSidebarPortal(<AddCreationToFavoriteList ids={[
-                            creation instanceof CollectionCreationEntity
-                                ? "".concat(creation.getItemType() + '.' + creation.getCreationId())
-                                : creation.getCreationId(),
-                        ]}/>);
-                    return [3 /*break*/, 8];
-                case 2:
-                    if (!(type === 'likes')) return [3 /*break*/, 7];
-                    if (!!isLicked) return [3 /*break*/, 4];
-                    return [4 /*yield*/, addLikeToCard(creation instanceof CollectionCreationEntity &&
-                            creation.getItemType() !== LabelKeys.collection
-                            ? creation.getCollectionCreationId()
-                            : creation.getItemId())];
-                case 3:
-                    _a.sent();
-                    return [3 /*break*/, 6];
-                case 4: return [4 /*yield*/, deleteLikeFromCard(creation instanceof CollectionCreationEntity &&
-                        creation.getItemType() !== LabelKeys.collection
-                        ? creation.getCollectionCreationId()
-                        : creation.getItemId())];
-                case 5:
-                    _a.sent();
-                    _a.label = 6;
-                case 6: return [3 /*break*/, 8];
-                case 7:
-                    if (type === 'gallery') {
-                        actionIsNeedRenderCheckbox && actionIsNeedRenderCheckbox(true, itemId);
-                    }
-                    _a.label = 8;
-                case 8: return [2 /*return*/];
-            }
-        });
-    }); };
-    var renderLikeButton = function () {
-        if (creation.getItemType() === LabelKeys.asset || LabelKeys.collection) {
-            return (<div className={"icon like ".concat(isLicked ? 'liked' : '')} onClick={function (e) { return handleClick(e, 'likes'); }}>
-          <AddToLikesIcon />
-        </div>);
-        }
-    };
-    return (<StyledHeadIcons isMobile={isMobile} style={isDisabled
-            ? {
-                pointerEvents: 'none',
-            }
-            : {}}>
-      <div className={'rank'}>
-        <CardRank rank={creation.getRank()}/>
-      </div>
-      {/* // Todo cardHeadIcons */}
-      {!isProd() && (<div className="icons">
-          <div className="icon" onClick={function (e) {
-                return handleClick(e, isRegularCard || !isUserProfile || isGallery
-                    ? 'fav-list'
-                    : 'gallery');
-            }}>
-            {isRegularCard || !isUserProfile || isGallery ? (<AddToFavListIcon />) : (<AddToGalleryIcon />)}
-          </div>
-          {renderLikeButton()}
-        </div>)}
-    </StyledHeadIcons>);
-};
-// Export
-export default CardHeadIcons;

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

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

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

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

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

@@ -1,15 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { 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 (_jsxs(_Fragment, { children: [loading && (_jsx(Skeleton, { height: '100%', width: '100%', style: {
-                    lineHeight: 'normal',
-                    visibility: "".concat(loading ? 'hidden' : 'visible'),
-                } })), _jsx(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/CardImage/index.jsx

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

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

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { 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 (_jsx(StyledImg, { isLoading: false, src: errorImg, alt: alt })); };
-    if (!videoSrc)
-        return renderImage();
-    return lVideoSrc ? (_jsxs(_Fragment, { children: [_jsxs(StyledVideo, { ref: video, muted: true, loop: true, playsInline: true, preload: 'false', children: [_jsx("source", { type: "video/mp4", src: lVideoSrc }), _jsx("p", { children: alt })] }), lVideoSrc.length &&
-                (isPlayIcon ? (_jsx(PlayIcon, { className: 'playIcon', onClick: function (e) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        playVideo();
-                    } })) : (_jsx(PauseIcon, { className: 'pauseIcon', onClick: function (e) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        pauseVideo();
-                    } })))] })) : (_jsx(Skeleton, { height: '100%', width: '100%', style: { lineHeight: 'normal' } }));
-};
-// Export
-export default CardVideo;

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

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

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

@@ -1,23 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 (_jsx(StyledCardRank, { children: _jsxs(Flex, { alignItems: 'center', height: '100%', children: [_jsx(Box, { children: _jsx("p", { className: "rankText ".concat(!rank && 'smallText'), children: rank ? rank : 'unknown' }) }), Boolean(rank) && (_jsx(SBox, { children: _jsx(RangeValue, { rankValue: rank }) }))] }) }));
-};
-// Export
-export default CardRank;
-var templateObject_1, templateObject_2, templateObject_3;

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

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

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

@@ -1,48 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { 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;
-    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 (_jsxs(StyledCardsGrid, { isTwoColumnLayout: isTwoColumnLayout, isEmptyGallery: isEmptyGallery, isForVirtualize: isForVirtualize, children: [_jsx("div", { className: "content", children: children }), tabsSlot, isTwoColumnLayout && (_jsxs("div", { className: "sidebar", children: [!isProd() && _jsx(ProfileInterests, {}), _jsx(ProfileWallets, {}), isNeedShowOrganizeBtn && (_jsx("div", { className: "sidebarOrganizeBtn", children: _jsx(MainButton, { onClick: handleClick, variant: "float", text: 'Organize' }) }))] }))] }));
-};
-// Export
-export default CardsGrid;
-var templateObject_1;

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

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