@ludo.ninja/components 1.1.6 → 1.1.7

package/dist/components/assetPage/media/AssetImage/index.js

@@ -1,67 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __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);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useLayoutEffect, useRef, useState } from 'react';
-import Link from 'next/link';
-import Skeleton from 'react-loading-skeleton';
-import styled, { css } from 'styled-components';
-import { AccentColor, InactiveButtonColor, WhiteColor, } from '@ludo.ninja/ui/build/styles/colors';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { defineImgProportion } from '@/utils/imageProportionsSize';
-import { poppinsFontVarCss } from '@/fonts/vars';
-var SScreenshotContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ", ";\n  transition: background-color 150ms;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  .link {\n    display: flex;\n    align-items: center;\n    padding: 10px;\n    width: 100%;\n    height: 48px;\n\n    ", " {\n      height: 42px;\n    }\n\n    span {\n      text-align: center;\n      color: ", ";\n      font-family: ", ";\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 22px;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    .link {\n      padding: ", ";\n      height: ", ";\n\n      span {\n        font-size: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"], ["\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ", ";\n  transition: background-color 150ms;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  .link {\n    display: flex;\n    align-items: center;\n    padding: 10px;\n    width: 100%;\n    height: 48px;\n\n    ", " {\n      height: 42px;\n    }\n\n    span {\n      text-align: center;\n      color: ", ";\n      font-family: ", ";\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 22px;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    .link {\n      padding: ", ";\n      height: ", ";\n\n      span {\n        font-size: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"])), WhiteColor, InactiveButtonColor, mediaQuery.desktop, AccentColor, poppinsFontVarCss.css, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(10), adaptiveValueCalc(48), adaptiveValueCalc(15), adaptiveValueCalc(22));
-var ImageContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n\n  & img {\n    object-fit: contain;\n    aspect-ratio: auto;\n    width: 100%;\n    border-radius: 16px;\n    max-height: 510px;\n    max-width: 510px;\n  }\n\n  ", "\n  ", " {\n    & img {\n      border-radius: ", ";\n      max-height: ", ";\n      max-width: ", ";\n    }\n\n    ", "\n  }\n"], ["\n  display: flex;\n  position: relative;\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n\n  & img {\n    object-fit: contain;\n    aspect-ratio: auto;\n    width: 100%;\n    border-radius: 16px;\n    max-height: 510px;\n    max-width: 510px;\n  }\n\n  ", "\n  ", " {\n    & img {\n      border-radius: ", ";\n      max-height: ", ";\n      max-width: ", ";\n    }\n\n    ", "\n  }\n"])), function (props) {
-    return props.isScreenshot
-        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          width: 508px;\n          height: 244px;\n\n          ", " {\n            width: 336px;\n            height: 164px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 154px;\n          }\n        "], ["\n          width: 508px;\n          height: 244px;\n\n          ", " {\n            width: 336px;\n            height: 164px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 154px;\n          }\n        "])), mediaQuery.desktop, mediaQuery.mobile) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          border-radius: 16px;\n          width: 510px;\n          height: 510px;\n\n          ", " {\n            width: 335px;\n            height: 335px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 320px;\n          }\n        "], ["\n          border-radius: 16px;\n          width: 510px;\n          height: 510px;\n\n          ", " {\n            width: 335px;\n            height: 335px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 320px;\n          }\n        "])), mediaQuery.desktop, mediaQuery.mobile);
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(510), adaptiveValueCalc(510), function (props) {
-    return props.isScreenshot
-        ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            width: ", ";\n            height: ", ";\n          "], ["\n            width: ", ";\n            height: ", ";\n          "])), adaptiveValueCalc(508), adaptiveValueCalc(244)) : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            border-radius: ", ";\n            width: ", ";\n            height: ", ";\n          "], ["\n            border-radius: ", ";\n            width: ", ";\n            height: ", ";\n          "])), adaptiveValueCalc(16), adaptiveValueCalc(510), adaptiveValueCalc(510));
-});
-var AssetImage = function (_a) {
-    var imageUrl = _a.imageUrl, errorImg = _a.errorImg, originalUrl = _a.originalUrl, alt = _a.alt, isScreenshot = _a.isScreenshot;
-    var _b = useState({}), size = _b[0], setSize = _b[1];
-    var _c = useState(true), loading = _c[0], setLoading = _c[1];
-    var ref = useRef(null);
-    useLayoutEffect(function () {
-        var _a = defineImgProportion(ref, 80), width = _a.width, height = _a.height;
-        if (imageUrl && parseFloat(height) && parseFloat(width)) {
-            defineImgProportion(ref, 80);
-            setSize({ width: width, height: height });
-        }
-    }, [imageUrl]);
-    var LinkComponent = originalUrl ? Link : React.Fragment;
-    var ScreenShotContainer = isScreenshot
-        ? SScreenshotContainer
-        : React.Fragment;
-    return (_jsx(LinkComponent, { href: "".concat(originalUrl), target: "_blank", children: _jsxs(ScreenShotContainer, { children: [_jsxs(ImageContainer, { isScreenshot: isScreenshot, children: [loading && (_jsx(Skeleton, { height: '100%', width: '100%', style: {
-                                lineHeight: 'normal',
-                                position: 'absolute',
-                                top: 0,
-                                left: 0,
-                                visibility: "".concat(loading ? 'hidden' : 'visible'),
-                            } })), _jsx("img", { alt: alt, ref: ref, src: imageUrl, onError: function (e) {
-                                e.target.src = errorImg;
-                                setSize({ width: '100%', height: '100%' });
-                            }, onLoad: function () { return setLoading(false); }, style: __assign({ opacity: loading ? '0' : '1' }, (isScreenshot
-                                ? {
-                                    maxHeight: '100%',
-                                    maxWidth: '100%',
-                                }
-                                : size)) })] }), isScreenshot && originalUrl && (_jsx("div", { className: "link", title: originalUrl, children: _jsx("span", { children: originalUrl }) }))] }) }));
-};
-export default AssetImage;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/assetPage/media/AssetImage/index.jsx

@@ -1,76 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __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);
-};
-import React, { useLayoutEffect, useRef, useState } from 'react';
-import Link from 'next/link';
-import Skeleton from 'react-loading-skeleton';
-import styled, { css } from 'styled-components';
-import { AccentColor, InactiveButtonColor, WhiteColor, } from '@ludo.ninja/ui/build/styles/colors';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { defineImgProportion } from '@/utils/imageProportionsSize';
-import { poppinsFontVarCss } from '@/fonts/vars';
-var SScreenshotContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ", ";\n  transition: background-color 150ms;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  .link {\n    display: flex;\n    align-items: center;\n    padding: 10px;\n    width: 100%;\n    height: 48px;\n\n    ", " {\n      height: 42px;\n    }\n\n    span {\n      text-align: center;\n      color: ", ";\n      font-family: ", ";\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 22px;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    .link {\n      padding: ", ";\n      height: ", ";\n\n      span {\n        font-size: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"], ["\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ", ";\n  transition: background-color 150ms;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  .link {\n    display: flex;\n    align-items: center;\n    padding: 10px;\n    width: 100%;\n    height: 48px;\n\n    ", " {\n      height: 42px;\n    }\n\n    span {\n      text-align: center;\n      color: ", ";\n      font-family: ", ";\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 22px;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    .link {\n      padding: ", ";\n      height: ", ";\n\n      span {\n        font-size: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"])), WhiteColor, InactiveButtonColor, mediaQuery.desktop, AccentColor, poppinsFontVarCss.css, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(10), adaptiveValueCalc(48), adaptiveValueCalc(15), adaptiveValueCalc(22));
-var ImageContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n\n  & img {\n    object-fit: contain;\n    aspect-ratio: auto;\n    width: 100%;\n    border-radius: 16px;\n    max-height: 510px;\n    max-width: 510px;\n  }\n\n  ", "\n  ", " {\n    & img {\n      border-radius: ", ";\n      max-height: ", ";\n      max-width: ", ";\n    }\n\n    ", "\n  }\n"], ["\n  display: flex;\n  position: relative;\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n\n  & img {\n    object-fit: contain;\n    aspect-ratio: auto;\n    width: 100%;\n    border-radius: 16px;\n    max-height: 510px;\n    max-width: 510px;\n  }\n\n  ", "\n  ", " {\n    & img {\n      border-radius: ", ";\n      max-height: ", ";\n      max-width: ", ";\n    }\n\n    ", "\n  }\n"])), function (props) {
-    return props.isScreenshot
-        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          width: 508px;\n          height: 244px;\n\n          ", " {\n            width: 336px;\n            height: 164px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 154px;\n          }\n        "], ["\n          width: 508px;\n          height: 244px;\n\n          ", " {\n            width: 336px;\n            height: 164px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 154px;\n          }\n        "])), mediaQuery.desktop, mediaQuery.mobile) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          border-radius: 16px;\n          width: 510px;\n          height: 510px;\n\n          ", " {\n            width: 335px;\n            height: 335px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 320px;\n          }\n        "], ["\n          border-radius: 16px;\n          width: 510px;\n          height: 510px;\n\n          ", " {\n            width: 335px;\n            height: 335px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 320px;\n          }\n        "])), mediaQuery.desktop, mediaQuery.mobile);
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(510), adaptiveValueCalc(510), function (props) {
-    return props.isScreenshot
-        ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            width: ", ";\n            height: ", ";\n          "], ["\n            width: ", ";\n            height: ", ";\n          "])), adaptiveValueCalc(508), adaptiveValueCalc(244)) : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            border-radius: ", ";\n            width: ", ";\n            height: ", ";\n          "], ["\n            border-radius: ", ";\n            width: ", ";\n            height: ", ";\n          "])), adaptiveValueCalc(16), adaptiveValueCalc(510), adaptiveValueCalc(510));
-});
-var AssetImage = function (_a) {
-    var imageUrl = _a.imageUrl, errorImg = _a.errorImg, originalUrl = _a.originalUrl, alt = _a.alt, isScreenshot = _a.isScreenshot;
-    var _b = useState({}), size = _b[0], setSize = _b[1];
-    var _c = useState(true), loading = _c[0], setLoading = _c[1];
-    var ref = useRef(null);
-    useLayoutEffect(function () {
-        var _a = defineImgProportion(ref, 80), width = _a.width, height = _a.height;
-        if (imageUrl && parseFloat(height) && parseFloat(width)) {
-            defineImgProportion(ref, 80);
-            setSize({ width: width, height: height });
-        }
-    }, [imageUrl]);
-    var LinkComponent = originalUrl ? Link : React.Fragment;
-    var ScreenShotContainer = isScreenshot
-        ? SScreenshotContainer
-        : React.Fragment;
-    return (<LinkComponent href={"".concat(originalUrl)} target="_blank">
-      <ScreenShotContainer>
-        <ImageContainer isScreenshot={isScreenshot}>
-          {loading && (<Skeleton height={'100%'} width={'100%'} style={{
-                lineHeight: 'normal',
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                visibility: "".concat(loading ? 'hidden' : 'visible'),
-            }}/>)}
-          <img alt={alt} ref={ref} src={imageUrl} onError={function (e) {
-            e.target.src = errorImg;
-            setSize({ width: '100%', height: '100%' });
-        }} onLoad={function () { return setLoading(false); }} style={__assign({ opacity: loading ? '0' : '1' }, (isScreenshot
-            ? {
-                maxHeight: '100%',
-                maxWidth: '100%',
-            }
-            : size))}/>
-        </ImageContainer>
-        {isScreenshot && originalUrl && (<div className="link" title={originalUrl}>
-            <span>{originalUrl}</span>
-          </div>)}
-      </ScreenShotContainer>
-    </LinkComponent>);
-};
-export default AssetImage;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/assetPage/moreDropDown/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, { css } from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { ClickAwayListener } from '@ludo.ninja/utils';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BackgroundColorLight, BlackColor, TextGrayColor, WhiteColor, } from '@/styles/colors';
-import IconWithButton from '@/system/Buttons/IconWithButton';
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import { dmsansFontVarCss } from '@/fonts/vars';
-import MoreIcon from '@/public/creation/card/moreBtn.svg';
-var SContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  & > *:first-child {\n    width: 24px;\n    height: 24px;\n\n    ", " {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  position: relative;\n\n  & > *:first-child {\n    width: 24px;\n    height: 24px;\n\n    ", " {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(24));
-var SContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  padding: 8px;\n  top: calc(100% + 8px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  transition: opacity 200ms;\n\n  pointer-events: ", ";\n  opacity: ", ";\n\n  border-radius: 6px;\n  background: ", ";\n  box-shadow: 0px 8px 16px -16px rgba(33, 21, 95, 0.1);\n  width: 184px;\n\n  ", " {\n    padding: ", ";\n    top: calc(100% + ", ");\n    border-radius: ", ";\n    box-shadow: 0 ", " ", "\n      ", " rgba(33, 21, 95, 0.1);\n    width: ", ";\n  }\n"], ["\n  position: absolute;\n  padding: 8px;\n  top: calc(100% + 8px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  transition: opacity 200ms;\n\n  pointer-events: ", ";\n  opacity: ", ";\n\n  border-radius: 6px;\n  background: ", ";\n  box-shadow: 0px 8px 16px -16px rgba(33, 21, 95, 0.1);\n  width: 184px;\n\n  ", " {\n    padding: ", ";\n    top: calc(100% + ", ");\n    border-radius: ", ";\n    box-shadow: 0 ", " ", "\n      ", " rgba(33, 21, 95, 0.1);\n    width: ", ";\n  }\n"])), function (props) { return (props.isOpen ? 'unset' : 'none'); }, function (props) { return (props.isOpen ? '1' : '0'); }, WhiteColor, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(8), adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(-16), adaptiveValueCalc(184));
-var hover = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  border-radius: 4px;\n  background: ", ";\n\n  ", " {\n    border-radius: ", ";\n  }\n"], ["\n  color: ", ";\n  border-radius: 4px;\n  background: ", ";\n\n  ", " {\n    border-radius: ", ";\n  }\n"])), BlackColor, BackgroundColorLight, mediaQuery.minWidthFourK, adaptiveValueCalc(4));
-var SButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  padding: 6px 8px;\n  color: ", ";\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 18px;\n  outline: none;\n  border: none;\n  background: inherit;\n  transition: background-color 200ms;\n  text-align: left;\n\n  &:active {\n    ", "\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    font-size: ", ";\n    line-height: ", ";\n  }\n"], ["\n  font-family: ", ";\n  padding: 6px 8px;\n  color: ", ";\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 18px;\n  outline: none;\n  border: none;\n  background: inherit;\n  transition: background-color 200ms;\n  text-align: left;\n\n  &:active {\n    ", "\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    font-size: ", ";\n    line-height: ", ";\n  }\n"])), dmsansFontVarCss.css, TextGrayColor, hover, hover, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(13), adaptiveValueCalc(18));
-var SIcon = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(17), adaptiveValueCalc(4));
-var IconResize = function () {
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (_jsx(SIcon, { children: _jsx(MoreIcon, { style: getAdaptiveScale({
-                windowDimensions: windowDimensions,
-                currentSize: 1,
-            }) }) }));
-};
-export var MoreDropDown = function (_a) {
-    var items = _a.items;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var handle = {
-        close: function () {
-            setIsOpen(false);
-        },
-        toggle: function () {
-            setIsOpen(function (prev) { return !prev; });
-        },
-    };
-    return (_jsx(ClickAwayListener, { onClickAway: handle.close, children: _jsxs(SContainer, { children: [_jsx(IconWithButton, { variant: 'dots', onClick: handle.toggle, children: _jsx(IconResize, {}) }), _jsx(SContent, { isOpen: isOpen, children: items.map(function (_a) {
-                        var title = _a.title, onClick = _a.onClick, id = _a.id;
-                        return (_jsx(SButton, { onClick: function () {
-                                onClick === null || onClick === void 0 ? void 0 : onClick();
-                                handle.close();
-                            }, children: _jsx("span", { children: title }) }, id));
-                    }) })] }) }));
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/assetPage/moreDropDown/index.jsx

@@ -1,60 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React, { useState } from 'react';
-import styled, { css } from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { ClickAwayListener } from '@ludo.ninja/utils';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BackgroundColorLight, BlackColor, TextGrayColor, WhiteColor, } from '@/styles/colors';
-import IconWithButton from '@/system/Buttons/IconWithButton';
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import { dmsansFontVarCss } from '@/fonts/vars';
-import MoreIcon from '@/public/creation/card/moreBtn.svg';
-var SContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  & > *:first-child {\n    width: 24px;\n    height: 24px;\n\n    ", " {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  position: relative;\n\n  & > *:first-child {\n    width: 24px;\n    height: 24px;\n\n    ", " {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(24));
-var SContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  padding: 8px;\n  top: calc(100% + 8px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  transition: opacity 200ms;\n\n  pointer-events: ", ";\n  opacity: ", ";\n\n  border-radius: 6px;\n  background: ", ";\n  box-shadow: 0px 8px 16px -16px rgba(33, 21, 95, 0.1);\n  width: 184px;\n\n  ", " {\n    padding: ", ";\n    top: calc(100% + ", ");\n    border-radius: ", ";\n    box-shadow: 0 ", " ", "\n      ", " rgba(33, 21, 95, 0.1);\n    width: ", ";\n  }\n"], ["\n  position: absolute;\n  padding: 8px;\n  top: calc(100% + 8px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  transition: opacity 200ms;\n\n  pointer-events: ", ";\n  opacity: ", ";\n\n  border-radius: 6px;\n  background: ", ";\n  box-shadow: 0px 8px 16px -16px rgba(33, 21, 95, 0.1);\n  width: 184px;\n\n  ", " {\n    padding: ", ";\n    top: calc(100% + ", ");\n    border-radius: ", ";\n    box-shadow: 0 ", " ", "\n      ", " rgba(33, 21, 95, 0.1);\n    width: ", ";\n  }\n"])), function (props) { return (props.isOpen ? 'unset' : 'none'); }, function (props) { return (props.isOpen ? '1' : '0'); }, WhiteColor, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(8), adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(-16), adaptiveValueCalc(184));
-var hover = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  border-radius: 4px;\n  background: ", ";\n\n  ", " {\n    border-radius: ", ";\n  }\n"], ["\n  color: ", ";\n  border-radius: 4px;\n  background: ", ";\n\n  ", " {\n    border-radius: ", ";\n  }\n"])), BlackColor, BackgroundColorLight, mediaQuery.minWidthFourK, adaptiveValueCalc(4));
-var SButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  padding: 6px 8px;\n  color: ", ";\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 18px;\n  outline: none;\n  border: none;\n  background: inherit;\n  transition: background-color 200ms;\n  text-align: left;\n\n  &:active {\n    ", "\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    font-size: ", ";\n    line-height: ", ";\n  }\n"], ["\n  font-family: ", ";\n  padding: 6px 8px;\n  color: ", ";\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 18px;\n  outline: none;\n  border: none;\n  background: inherit;\n  transition: background-color 200ms;\n  text-align: left;\n\n  &:active {\n    ", "\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    font-size: ", ";\n    line-height: ", ";\n  }\n"])), dmsansFontVarCss.css, TextGrayColor, hover, hover, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(13), adaptiveValueCalc(18));
-var SIcon = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(17), adaptiveValueCalc(4));
-var IconResize = function () {
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (<SIcon>
-      <MoreIcon style={getAdaptiveScale({
-            windowDimensions: windowDimensions,
-            currentSize: 1,
-        })}/>
-    </SIcon>);
-};
-export var MoreDropDown = function (_a) {
-    var items = _a.items;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var handle = {
-        close: function () {
-            setIsOpen(false);
-        },
-        toggle: function () {
-            setIsOpen(function (prev) { return !prev; });
-        },
-    };
-    return (<ClickAwayListener onClickAway={handle.close}>
-      <SContainer>
-        <IconWithButton variant={'dots'} onClick={handle.toggle}>
-          <IconResize />
-        </IconWithButton>
-        <SContent isOpen={isOpen}>
-          {items.map(function (_a) {
-            var title = _a.title, onClick = _a.onClick, id = _a.id;
-            return (<SButton key={id} onClick={function () {
-                    onClick === null || onClick === void 0 ? void 0 : onClick();
-                    handle.close();
-                }}>
-              <span>{title}</span>
-            </SButton>);
-        })}
-        </SContent>
-      </SContainer>
-    </ClickAwayListener>);
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/assetPage/participants/index.js

@@ -1,94 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Link from 'next/link';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { shortenedText } from '@ludo.ninja/utils';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, TextGrayColor } from '@/styles/colors';
-import { Flex, H5, H6, ProfilePic } from '@system';
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { CopyButton } from '@/utils/copyBtn';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import { getUserPicImage } from '@/dto/common/Media/Urls';
-import DetailsIcon from '@/public/assetPage/details.svg';
-var MultiFlexRight = styled(Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: 100px;\n  align-items: center;\n\n  ", " {\n    margin: 20px 0 0 0;\n  }\n\n  ", " {\n    margin-left: ", ";\n  }\n"], ["\n  margin-left: 100px;\n  align-items: center;\n\n  ", " {\n    margin: 20px 0 0 0;\n  }\n\n  ", " {\n    margin-left: ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.minWidthFourK, adaptiveValueCalc(100));
-var MultiFlex = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 20px 0 10px;\n\n  ", " {\n    flex-direction: column;\n  }\n\n  ", " {\n    margin: ", " 0 ", ";\n  }\n"], ["\n  margin: 20px 0 10px;\n\n  ", " {\n    flex-direction: column;\n  }\n\n  ", " {\n    margin: ", " 0 ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(10));
-var SMultipleCreators = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: 20px;\n\n  img {\n    width: 40px;\n    height: 40px;\n  }\n\n  ", " {\n    margin-left: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  margin-left: 20px;\n\n  img {\n    width: 40px;\n    height: 40px;\n  }\n\n  ", " {\n    margin-left: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(40), adaptiveValueCalc(40));
-var SMultipleCreatorsH6 = styled(H6)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 15px;\n  color: ", ";\n\n  ", " {\n    margin-left: ", ";\n  }\n"], ["\n  margin-left: 15px;\n  color: ", ";\n\n  ", " {\n    margin-left: ", ";\n  }\n"])), TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(15));
-var MultipleCreators = function (_a) {
-    var creatorsProfiles = _a.creatorsProfiles, creatorsAddresses = _a.creatorsAddresses;
-    if (!creatorsProfiles && !creatorsAddresses)
-        return null;
-    var accumulatedResult;
-    if (creatorsProfiles) {
-        accumulatedResult = __spreadArray([], creatorsProfiles, true);
-    }
-    if (creatorsAddresses) {
-        creatorsAddresses.map(function (item) {
-            return { userId: item, userpic: '/defaultUserpics/defaultUserpic.svg' };
-        });
-        accumulatedResult = __spreadArray(__spreadArray([], accumulatedResult, true), [
-            creatorsAddresses,
-        ], false);
-    }
-    return (_jsx(Flex, { alignItems: "center", children: _jsxs(SMultipleCreators, { flexDirection: "row", alignItems: "center", children: [creatorsProfiles === null || creatorsProfiles === void 0 ? void 0 : creatorsProfiles.slice(0, 3).map(function (creator) {
-                    return (_jsx(ProfilePic, { size: 40, userPicSrc: getUserPicImage(creator === null || creator === void 0 ? void 0 : creator.userpic, '/defaultUserpics/defaultUserpic.svg') }, creator === null || creator === void 0 ? void 0 : creator.userId));
-                }), _jsxs(SMultipleCreatorsH6, { children: [accumulatedResult && (accumulatedResult === null || accumulatedResult === void 0 ? void 0 : accumulatedResult.length), " Creators"] })] }) }));
-};
-var SSingleUserLink = styled(Link)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 14px;\n\n  ", " {\n    font-size: ", ";\n  }\n"], ["\n  font-size: 14px;\n\n  ", " {\n    font-size: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(14));
-var SSingleUser = styled(Flex)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: 10px;\n\n  img {\n    width: 40px;\n    height: 40px;\n  }\n\n  ", " {\n    margin-bottom: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  margin-bottom: 10px;\n\n  img {\n    width: 40px;\n    height: 40px;\n  }\n\n  ", " {\n    margin-bottom: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(40), adaptiveValueCalc(40));
-var SSingleUserFlex = styled(Flex)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-left: 16px;\n\n  ", " {\n    margin-left: ", ";\n  }\n"], ["\n  margin-left: 16px;\n\n  ", " {\n    margin-left: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(16));
-var SingleUser = function (props) {
-    var _a, _b, _c;
-    if (!props.profile && !props.address)
-        return null;
-    var isLudoWallet = function (userName) {
-        return userName ? (_jsx(H5, { color: BlackColor, children: userName })) : (_jsx(CopyButton, { value: props.address, children: _jsx(H5, { color: BlackColor, children: shortenedText(props.address) }) }));
-    };
-    var ludoUserMurkUp = function (name) {
-        var _a, _b;
-        return name ? (_jsx(SSingleUserLink, { href: "/profile/".concat((_a = props.profile) === null || _a === void 0 ? void 0 : _a.userId, "/nfts"), children: name })) : (isLudoWallet((_b = props.profile) === null || _b === void 0 ? void 0 : _b.username));
-    };
-    return (_jsxs(SSingleUser, { width: '50%', alignItems: "center", children: [Boolean((props === null || props === void 0 ? void 0 : props.profile) && ((_a = props === null || props === void 0 ? void 0 : props.profile) === null || _a === void 0 ? void 0 : _a.userpic)) && (_jsx(ProfilePic, { size: 40, userPicSrc: getUserPicImage((_b = props === null || props === void 0 ? void 0 : props.profile) === null || _b === void 0 ? void 0 : _b.userpic, '/defaultUserpics/defaultUserpic.svg') })), Boolean((props === null || props === void 0 ? void 0 : props.profile) && ((_c = props === null || props === void 0 ? void 0 : props.profile) === null || _c === void 0 ? void 0 : _c.userpic)) || (_jsx(ProfilePic, { size: 40, userPicSrc: '/defaultUserpics/defaultUserpic.svg' })), _jsxs(SSingleUserFlex, { flexDirection: "column", children: [_jsx(H6, { color: TextGrayColor, children: props.title }), ludoUserMurkUp((props === null || props === void 0 ? void 0 : props.profile) && props.profile.username)] })] }));
-};
-var SIconWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  margin-right: 10px;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  margin-right: 10px;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(12), adaptiveValueCalc(12), adaptiveValueCalc(10));
-var DetailsIconResize = function () {
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (_jsx(SIconWrapper, { children: _jsx(DetailsIcon, { style: getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 }) }) }));
-};
-var SMultipleOwnersFlex = styled(Flex)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  margin-bottom: 7px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n"], ["\n  margin-bottom: 7px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(7));
-var MultipleOwners = function (_a) {
-    var ownersProfiles = _a.ownersProfiles, ownersAddresses = _a.ownersAddresses;
-    if (!ownersAddresses && !ownersProfiles)
-        return null;
-    var accumulatedResult = __spreadArray([], ownersProfiles, true);
-    if (ownersAddresses) {
-        accumulatedResult = __spreadArray(__spreadArray([], accumulatedResult, true), [
-            ownersAddresses,
-        ], false);
-    }
-    return (_jsx(MultiFlexRight, { alignItems: "center", children: _jsx(Flex, { flexDirection: "column", children: _jsxs(SMultipleOwnersFlex, { alignItems: "center", children: [_jsx(DetailsIconResize, {}), ' ', _jsxs(H6, { children: [accumulatedResult.length, ' ', accumulatedResult.length > 1 ? 'Owners' : 'Owner'] })] }) }) }));
-};
-export var Participants = function (_a) {
-    // console.clear();
-    // console.log(creatorsProfiles, 'creatorsProfiles');
-    // console.log(creatorsAddresses, 'creatorsAddresses');
-    // console.log(ownersProfiles, 'ownersProfiles');
-    var creatorsProfiles = _a.creatorsProfiles, ownersProfiles = _a.ownersProfiles, creatorsAddresses = _a.creatorsAddresses, ownersAddresses = _a.ownersAddresses;
-    return (_jsx(_Fragment, { children: ((creatorsProfiles === null || creatorsProfiles === void 0 ? void 0 : creatorsProfiles.length) && (creatorsProfiles === null || creatorsProfiles === void 0 ? void 0 : creatorsProfiles.length) > 1) ||
-            ((ownersProfiles === null || ownersProfiles === void 0 ? void 0 : ownersProfiles.length) && (ownersProfiles === null || ownersProfiles === void 0 ? void 0 : ownersProfiles.length) > 1) ? (_jsxs(MultiFlex, { children: [_jsx(MultipleCreators, { creatorsAddresses: creatorsAddresses, creatorsProfiles: creatorsProfiles }), _jsx(MultipleOwners, { ownersProfiles: ownersProfiles, ownersAddresses: ownersAddresses })] })) : (_jsxs(MultiFlex, { children: [_jsx(SingleUser, { title: "Creator", address: creatorsAddresses === null || creatorsAddresses === void 0 ? void 0 : creatorsAddresses[0], profile: creatorsProfiles === null || creatorsProfiles === void 0 ? void 0 : creatorsProfiles[0] }), _jsx(SingleUser, { title: "Owner", address: ownersAddresses === null || ownersAddresses === void 0 ? void 0 : ownersAddresses[0], profile: ownersProfiles === null || ownersProfiles === void 0 ? void 0 : ownersProfiles[0] })] })) }));
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/components/assetPage/participants/index.jsx

@@ -1,137 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import React from 'react';
-import Link from 'next/link';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { shortenedText } from '@ludo.ninja/utils';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, TextGrayColor } from '@/styles/colors';
-import { Flex, H5, H6, ProfilePic } from '@system';
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { CopyButton } from '@/utils/copyBtn';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import { getUserPicImage } from '@/dto/common/Media/Urls';
-import DetailsIcon from '@/public/assetPage/details.svg';
-var MultiFlexRight = styled(Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: 100px;\n  align-items: center;\n\n  ", " {\n    margin: 20px 0 0 0;\n  }\n\n  ", " {\n    margin-left: ", ";\n  }\n"], ["\n  margin-left: 100px;\n  align-items: center;\n\n  ", " {\n    margin: 20px 0 0 0;\n  }\n\n  ", " {\n    margin-left: ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.minWidthFourK, adaptiveValueCalc(100));
-var MultiFlex = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 20px 0 10px;\n\n  ", " {\n    flex-direction: column;\n  }\n\n  ", " {\n    margin: ", " 0 ", ";\n  }\n"], ["\n  margin: 20px 0 10px;\n\n  ", " {\n    flex-direction: column;\n  }\n\n  ", " {\n    margin: ", " 0 ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(10));
-var SMultipleCreators = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: 20px;\n\n  img {\n    width: 40px;\n    height: 40px;\n  }\n\n  ", " {\n    margin-left: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  margin-left: 20px;\n\n  img {\n    width: 40px;\n    height: 40px;\n  }\n\n  ", " {\n    margin-left: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(40), adaptiveValueCalc(40));
-var SMultipleCreatorsH6 = styled(H6)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 15px;\n  color: ", ";\n\n  ", " {\n    margin-left: ", ";\n  }\n"], ["\n  margin-left: 15px;\n  color: ", ";\n\n  ", " {\n    margin-left: ", ";\n  }\n"])), TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(15));
-var MultipleCreators = function (_a) {
-    var creatorsProfiles = _a.creatorsProfiles, creatorsAddresses = _a.creatorsAddresses;
-    if (!creatorsProfiles && !creatorsAddresses)
-        return null;
-    var accumulatedResult;
-    if (creatorsProfiles) {
-        accumulatedResult = __spreadArray([], creatorsProfiles, true);
-    }
-    if (creatorsAddresses) {
-        creatorsAddresses.map(function (item) {
-            return { userId: item, userpic: '/defaultUserpics/defaultUserpic.svg' };
-        });
-        accumulatedResult = __spreadArray(__spreadArray([], accumulatedResult, true), [
-            creatorsAddresses,
-        ], false);
-    }
-    return (<Flex alignItems="center">
-      <SMultipleCreators flexDirection="row" alignItems="center">
-        {creatorsProfiles === null || creatorsProfiles === void 0 ? void 0 : creatorsProfiles.slice(0, 3).map(function (creator) {
-            return (<ProfilePic size={40} key={creator === null || creator === void 0 ? void 0 : creator.userId} userPicSrc={getUserPicImage(creator === null || creator === void 0 ? void 0 : creator.userpic, '/defaultUserpics/defaultUserpic.svg')}/>);
-        })}
-        <SMultipleCreatorsH6>
-          {accumulatedResult && (accumulatedResult === null || accumulatedResult === void 0 ? void 0 : accumulatedResult.length)} Creators
-        </SMultipleCreatorsH6>
-      </SMultipleCreators>
-    </Flex>);
-};
-var SSingleUserLink = styled(Link)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 14px;\n\n  ", " {\n    font-size: ", ";\n  }\n"], ["\n  font-size: 14px;\n\n  ", " {\n    font-size: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(14));
-var SSingleUser = styled(Flex)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: 10px;\n\n  img {\n    width: 40px;\n    height: 40px;\n  }\n\n  ", " {\n    margin-bottom: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  margin-bottom: 10px;\n\n  img {\n    width: 40px;\n    height: 40px;\n  }\n\n  ", " {\n    margin-bottom: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(40), adaptiveValueCalc(40));
-var SSingleUserFlex = styled(Flex)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-left: 16px;\n\n  ", " {\n    margin-left: ", ";\n  }\n"], ["\n  margin-left: 16px;\n\n  ", " {\n    margin-left: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(16));
-var SingleUser = function (props) {
-    var _a, _b, _c;
-    if (!props.profile && !props.address)
-        return null;
-    var isLudoWallet = function (userName) {
-        return userName ? (<H5 color={BlackColor}>{userName}</H5>) : (<CopyButton value={props.address}>
-        <H5 color={BlackColor}>{shortenedText(props.address)}</H5>
-      </CopyButton>);
-    };
-    var ludoUserMurkUp = function (name) {
-        var _a, _b;
-        return name ? (<SSingleUserLink href={"/profile/".concat((_a = props.profile) === null || _a === void 0 ? void 0 : _a.userId, "/nfts")}>
-        {name}
-      </SSingleUserLink>) : (isLudoWallet((_b = props.profile) === null || _b === void 0 ? void 0 : _b.username));
-    };
-    return (<SSingleUser width={'50%'} alignItems="center">
-      {Boolean((props === null || props === void 0 ? void 0 : props.profile) && ((_a = props === null || props === void 0 ? void 0 : props.profile) === null || _a === void 0 ? void 0 : _a.userpic)) && (<ProfilePic size={40} userPicSrc={getUserPicImage((_b = props === null || props === void 0 ? void 0 : props.profile) === null || _b === void 0 ? void 0 : _b.userpic, '/defaultUserpics/defaultUserpic.svg')}/>)}
-      {Boolean((props === null || props === void 0 ? void 0 : props.profile) && ((_c = props === null || props === void 0 ? void 0 : props.profile) === null || _c === void 0 ? void 0 : _c.userpic)) || (<ProfilePic size={40} userPicSrc={'/defaultUserpics/defaultUserpic.svg'}/>)}
-
-      <SSingleUserFlex flexDirection="column">
-        <H6 color={TextGrayColor}>{props.title}</H6>
-        {ludoUserMurkUp((props === null || props === void 0 ? void 0 : props.profile) && props.profile.username)}
-      </SSingleUserFlex>
-    </SSingleUser>);
-};
-var SIconWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  margin-right: 10px;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  margin-right: 10px;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(12), adaptiveValueCalc(12), adaptiveValueCalc(10));
-var DetailsIconResize = function () {
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (<SIconWrapper>
-      <DetailsIcon style={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}/>
-    </SIconWrapper>);
-};
-var SMultipleOwnersFlex = styled(Flex)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  margin-bottom: 7px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n"], ["\n  margin-bottom: 7px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(7));
-var MultipleOwners = function (_a) {
-    var ownersProfiles = _a.ownersProfiles, ownersAddresses = _a.ownersAddresses;
-    if (!ownersAddresses && !ownersProfiles)
-        return null;
-    var accumulatedResult = __spreadArray([], ownersProfiles, true);
-    if (ownersAddresses) {
-        accumulatedResult = __spreadArray(__spreadArray([], accumulatedResult, true), [
-            ownersAddresses,
-        ], false);
-    }
-    return (<MultiFlexRight alignItems="center">
-      <Flex flexDirection="column">
-        <SMultipleOwnersFlex alignItems="center">
-          <DetailsIconResize />{' '}
-          <H6>
-            {accumulatedResult.length}{' '}
-            {accumulatedResult.length > 1 ? 'Owners' : 'Owner'}
-          </H6>
-        </SMultipleOwnersFlex>
-        {/*<Flex alignItems="center">*/}
-        {/*  <OwnersIcon style={{ margin: '0 8.5px 0px -1.5px' }} />{' '}*/}
-        {/*  <H6>14/100 Copies owned</H6>*/}
-        {/*</Flex>*/}
-      </Flex>
-    </MultiFlexRight>);
-};
-export var Participants = function (_a) {
-    // console.clear();
-    // console.log(creatorsProfiles, 'creatorsProfiles');
-    // console.log(creatorsAddresses, 'creatorsAddresses');
-    // console.log(ownersProfiles, 'ownersProfiles');
-    var creatorsProfiles = _a.creatorsProfiles, ownersProfiles = _a.ownersProfiles, creatorsAddresses = _a.creatorsAddresses, ownersAddresses = _a.ownersAddresses;
-    return (<>
-      {((creatorsProfiles === null || creatorsProfiles === void 0 ? void 0 : creatorsProfiles.length) && (creatorsProfiles === null || creatorsProfiles === void 0 ? void 0 : creatorsProfiles.length) > 1) ||
-            ((ownersProfiles === null || ownersProfiles === void 0 ? void 0 : ownersProfiles.length) && (ownersProfiles === null || ownersProfiles === void 0 ? void 0 : ownersProfiles.length) > 1) ? (<MultiFlex>
-          <MultipleCreators creatorsAddresses={creatorsAddresses} creatorsProfiles={creatorsProfiles}/>
-          <MultipleOwners ownersProfiles={ownersProfiles} ownersAddresses={ownersAddresses}/>
-        </MultiFlex>) : (<MultiFlex>
-          <SingleUser title="Creator" address={creatorsAddresses === null || creatorsAddresses === void 0 ? void 0 : creatorsAddresses[0]} profile={creatorsProfiles === null || creatorsProfiles === void 0 ? void 0 : creatorsProfiles[0]}/>
-          <SingleUser title="Owner" address={ownersAddresses === null || ownersAddresses === void 0 ? void 0 : ownersAddresses[0]} profile={ownersProfiles === null || ownersProfiles === void 0 ? void 0 : ownersProfiles[0]}/>
-        </MultiFlex>)}
-    </>);
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/components/assetPage/priceRank/index.js

@@ -1,25 +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, Fragment as _Fragment } 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, TextGrayColor, WhiteColor, } from '@/styles/colors';
-import { Box, Flex, H2, H3, H6 } from '@system';
-var RangeContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  width: 100px;\n  background: ", ";\n  height: 9px;\n  border-radius: 2px;\n\n  ", " {\n    width: 40px;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: block;\n  width: 100px;\n  background: ", ";\n  height: 9px;\n  border-radius: 2px;\n\n  ", " {\n    width: 40px;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n  }\n"])), InactiveButtonColor, mediaQuery.desktop, mediaQuery.minWidthFourK, adaptiveValueCalc(100), adaptiveValueCalc(9), adaptiveValueCalc(2));
-var RangeValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  background: ", ";\n  height: 100%;\n  border-radius: 2px 0 0 2px;\n\n  ", " {\n    border-radius: ", " 0 0 ", ";\n  }\n"], ["\n  display: block;\n  background: ", ";\n  height: 100%;\n  border-radius: 2px 0 0 2px;\n\n  ", " {\n    border-radius: ", " 0 0 ", ";\n  }\n"])), function (props) { return props.rankValue && getRankColor(props.rankValue); }, mediaQuery.minWidthFourK, adaptiveValueCalc(2), adaptiveValueCalc(2));
-var SPrice = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 65%;\n  border-radius: 6px;\n  margin-right: 15px;\n  padding: 15px;\n  background-color: ", ";\n\n  .title-price {\n    margin-bottom: 6px;\n  }\n\n  .price-latest {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n\n  ", " {\n    border-radius: ", ";\n    margin-right: ", ";\n    padding: ", ";\n\n    .title-price {\n      margin-bottom: ", ";\n    }\n\n    .price-latest {\n      margin-left: ", ";\n      margin-right: ", ";\n    }\n  }\n"], ["\n  width: 65%;\n  border-radius: 6px;\n  margin-right: 15px;\n  padding: 15px;\n  background-color: ", ";\n\n  .title-price {\n    margin-bottom: 6px;\n  }\n\n  .price-latest {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n\n  ", " {\n    border-radius: ", ";\n    margin-right: ", ";\n    padding: ", ";\n\n    .title-price {\n      margin-bottom: ", ";\n    }\n\n    .price-latest {\n      margin-left: ", ";\n      margin-right: ", ";\n    }\n  }\n"])), WhiteColor, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(15), adaptiveValueCalc(15), adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(8));
-var SPriceFlex = styled(Flex)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 6px;\n\n  ", " {\n    border-radius: ", ";\n  }\n"], ["\n  border-radius: 6px;\n\n  ", " {\n    border-radius: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(6));
-var SRank = styled(Box)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 35%;\n  border-radius: 6px;\n  padding: 15px;\n\n  .rank-title {\n    margin-bottom: 6px;\n  }\n\n  .rank-text {\n    margin-right: 8px;\n  }\n\n  ", " {\n    border-radius: ", ";\n    padding: ", ";\n\n    .rank-title {\n      margin-bottom: ", ";\n    }\n\n    .rank-text {\n      margin-right: ", ";\n    }\n  }\n"], ["\n  width: 35%;\n  border-radius: 6px;\n  padding: 15px;\n\n  .rank-title {\n    margin-bottom: 6px;\n  }\n\n  .rank-text {\n    margin-right: 8px;\n  }\n\n  ", " {\n    border-radius: ", ";\n    padding: ", ";\n\n    .rank-title {\n      margin-bottom: ", ";\n    }\n\n    .rank-text {\n      margin-right: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(15), adaptiveValueCalc(6), adaptiveValueCalc(8));
-export var PriceRank = function (_a) {
-    // const { isLoading, converterAmount } = useConvertedValue({
-    //   latestPriceCurrency,
-    //   latestPriceAmount,
-    // });
-    var rank = _a.rank, latestPriceAmount = _a.latestPriceAmount, latestPriceCurrency = _a.latestPriceCurrency;
-    return (_jsxs(Flex, { children: [latestPriceAmount && latestPriceAmount !== 0 && latestPriceCurrency && (_jsxs(SPrice, { children: [_jsx(H6, { color: TextGrayColor, className: "title-price", children: "Price" }), _jsx(Flex, { children: _jsx(SPriceFlex, { alignItems: "center", children: _jsx(H2, { color: BlackColor, className: "price-latest", children: latestPriceAmount }) }) })] })), _jsxs(SRank, { backgroundColor: WhiteColor, children: [_jsx(H6, { color: TextGrayColor, className: "rank-title", children: "Ludo Rank" }), _jsx(Flex, { children: _jsx(SPriceFlex, { alignItems: "center", children: rank ? (_jsxs(_Fragment, { children: [_jsx(H2, { color: BlackColor, className: "rank-text", children: rank }), _jsx(RangeContainer, { children: _jsx(RangeValue, { rankValue: rank, style: { width: "".concat(rank, "%") } }) })] })) : (_jsx(H3, { color: BlackColor, className: "rank-text", children: "unknown" })) }) })] })] }));
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;