@ludo.ninja/components 1.0.7 → 1.0.8

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

@@ -1,107 +1,362 @@
-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);
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
     }
-    return (<Flex alignItems="center">
+    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));
+  };
+
+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')}/>);
-        })}
+        {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
+          {accumulatedResult &&
+            (accumulatedResult === null || accumulatedResult === void 0
+              ? void 0
+              : accumulatedResult.length)}{' '}
+          Creators
         </SMultipleCreatorsH6>
       </SMultipleCreators>
-    </Flex>);
+    </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 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}>
+  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")}>
+      </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'}/>)}
+      </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)}
+        {ludoUserMurkUp(
+          (props === null || props === void 0 ? void 0 : props.profile) &&
+            props.profile.username
+        )}
       </SSingleUserFlex>
-    </SSingleUser>);
+    </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 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 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 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">
+  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 />{' '}
@@ -115,23 +370,81 @@ var MultipleOwners = function (_a) {
         {/*  <H6>14/100 Copies owned</H6>*/}
         {/*</Flex>*/}
       </Flex>
-    </MultiFlexRight>);
+    </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>)}
-    </>);
+  // 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;
+var templateObject_1,
+  templateObject_2,
+  templateObject_3,
+  templateObject_4,
+  templateObject_5,
+  templateObject_6,
+  templateObject_7,
+  templateObject_8,
+  templateObject_9;