@ludo.ninja/components 1.0.7 → 1.0.8

package/dist/components/profile/ProfileTabs.jsx

@@ -1,41 +1,68 @@
-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 { useRouter } from 'next/router';
+
 import LinkTabs from '@/components/linkTabs';
 import LinkTab from '@/components/linkTabs/linkTab';
+
 import { isProd } from '@/utils/env';
+
+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));
+  };
+
 export var ProfileTabs = function (_a) {
-    var _b = _a.totalResults, totalResults = _b === void 0 ? null : _b, profileId = _a.profileId, style = _a.style, isMobile = _a.isMobile;
-    var router = useRouter();
-    return (<LinkTabs isUnderlined style={style}>
-      {__spreadArray([
-            {
-                link: "/profile/".concat(profileId, "/nfts"),
-                text: 'NFTs',
-            }
-        ], (isProd()
-            ? []
-            : [
-                {
-                    link: "/profile/".concat(profileId, "/galleries"),
-                    text: 'Galleries',
-                },
-                {
-                    link: "/profile/".concat(profileId, "/favorite-lists"),
-                    text: isMobile ? 'Fav.Lists' : 'Favorite Lists',
-                },
-            ]), true).map(function (_a) {
-            var link = _a.link, text = _a.text;
-            var isActive = router.asPath.includes(link);
-            return (<LinkTab key={link} link={link} isActive={isActive} countItems={isActive ? totalResults : null} text={text}/>);
-        })}
-    </LinkTabs>);
+  var _b = _a.totalResults,
+    totalResults = _b === void 0 ? null : _b,
+    profileId = _a.profileId,
+    style = _a.style,
+    isMobile = _a.isMobile;
+  var router = useRouter();
+  return (
+    <LinkTabs isUnderlined style={style}>
+      {__spreadArray(
+        [
+          {
+            link: '/profile/'.concat(profileId, '/nfts'),
+            text: 'NFTs',
+          },
+        ],
+        isProd()
+          ? []
+          : [
+              {
+                link: '/profile/'.concat(profileId, '/galleries'),
+                text: 'Galleries',
+              },
+              {
+                link: '/profile/'.concat(profileId, '/favorite-lists'),
+                text: isMobile ? 'Fav.Lists' : 'Favorite Lists',
+              },
+            ],
+        true
+      ).map(function (_a) {
+        var link = _a.link,
+          text = _a.text;
+        var isActive = router.asPath.includes(link);
+        return (
+          <LinkTab
+            key={link}
+            link={link}
+            isActive={isActive}
+            countItems={isActive ? totalResults : null}
+            text={text}
+          />
+        );
+      })}
+    </LinkTabs>
+  );
 };

package/dist/components/profile/aboutText/index.jsx

@@ -1,89 +1,276 @@
-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, { useCallback, useEffect, useState } from 'react';
+
 import { useRouter } from 'next/router';
+
 import Hyphenated from 'react-hyphen';
 import styled from 'styled-components';
+
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
 import { shortenedText } from '@ludo.ninja/utils';
+
 import { useUserStore } from '@/modules/user/store';
+
 import { useUiStore } from '@/store/ui';
+
 import useFollowProfile from '@/api/server-identities/mutations/useFollowProfile';
 import useUnfollowProfile from '@/api/server-identities/mutations/useUnfollowProfile';
+
 import { mediaQuery } from '@/styles/ScreenWidth';
 import { AccentColor, BlackColor, TextGrayColor } from '@/styles/colors';
 import { FH1, FH3, FH5, FH6, MainText } from '@/styles/typography';
+
 import { ProfileFollowersSocial } from '@/components/profile/followersSocial';
 import ShareDialog from '@/components/shareDialog';
+
 import IconButton from '@/system/Buttons/IconButton';
 import MainButton from '@/system/Buttons/MainButton';
+
 import { getAdaptiveScale } from '@/utils/adaptive/scale';
 import { CopyButton } from '@/utils/copyBtn';
 import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+
 import { dmsansFontVarCss } from '@/fonts/vars';
+
 import ShareIcon from '@/public/iconButton/share.svg';
-var StyledProfileAboutText = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 640px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  word-wrap: break-word;\n  margin-left: 32px;\n\n  .name {\n    ", ";\n    color: ", ";\n    margin-bottom: 0;\n    line-height: 1.75em;\n  }\n\n  .descr {\n    font-family: ", ";\n    ", ";\n    color: ", ";\n    word-wrap: break-word;\n  }\n\n  .wallet {\n    ", ";\n    color: ", ";\n  }\n\n  .isActive {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    overflow: hidden;\n    max-height: 3em;\n    white-space: normal;\n  }\n\n  .readMore {\n    ", ";\n    color: ", ";\n    margin-top: 4px;\n    display: block;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .shareEdit {\n    margin-top: 20px;\n    display: flex;\n    align-items: center;\n\n    .editBtnOrShare {\n      margin-right: 24px;\n    }\n  }\n\n  ", " {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n    max-width: 516px;\n\n    .name {\n      ", ";\n      line-height: 1.335em;\n      margin-bottom: 8px;\n    }\n\n    .descr {\n      font-size: 1.4em;\n      margin-top: 4px;\n    }\n\n    .shareEdit {\n      margin-top: 24px;\n    }\n  }\n\n  @media (min-width: 600px) and (max-width: 767px) {\n    max-width: 368px;\n  }\n\n  ", " {\n    max-width: ", ";\n    margin-left: ", ";\n\n    .name {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    .descr {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    .wallet {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    .isActive {\n      max-height: ", ";\n    }\n\n    .readMore {\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    }\n\n    .shareEdit {\n      margin-top: ", ";\n\n      .editBtnOrShare {\n        margin-right: ", ";\n      }\n    }\n  }\n"], ["\n  max-width: 640px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  word-wrap: break-word;\n  margin-left: 32px;\n\n  .name {\n    ", ";\n    color: ", ";\n    margin-bottom: 0;\n    line-height: 1.75em;\n  }\n\n  .descr {\n    font-family: ", ";\n    ", ";\n    color: ", ";\n    word-wrap: break-word;\n  }\n\n  .wallet {\n    ", ";\n    color: ", ";\n  }\n\n  .isActive {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    overflow: hidden;\n    max-height: 3em;\n    white-space: normal;\n  }\n\n  .readMore {\n    ", ";\n    color: ", ";\n    margin-top: 4px;\n    display: block;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .shareEdit {\n    margin-top: 20px;\n    display: flex;\n    align-items: center;\n\n    .editBtnOrShare {\n      margin-right: 24px;\n    }\n  }\n\n  ", " {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n    max-width: 516px;\n\n    .name {\n      ", ";\n      line-height: 1.335em;\n      margin-bottom: 8px;\n    }\n\n    .descr {\n      font-size: 1.4em;\n      margin-top: 4px;\n    }\n\n    .shareEdit {\n      margin-top: 24px;\n    }\n  }\n\n  @media (min-width: 600px) and (max-width: 767px) {\n    max-width: 368px;\n  }\n\n  ", " {\n    max-width: ", ";\n    margin-left: ", ";\n\n    .name {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    .descr {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    .wallet {\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    .isActive {\n      max-height: ", ";\n    }\n\n    .readMore {\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    }\n\n    .shareEdit {\n      margin-top: ", ";\n\n      .editBtnOrShare {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), FH1, BlackColor, dmsansFontVarCss.css, MainText, TextGrayColor, FH5, AccentColor, FH6, AccentColor, mediaQuery.mobile, FH3, mediaQuery.minWidthFourK, adaptiveValueCalc(640), adaptiveValueCalc(32), adaptiveValueCalc(24), adaptiveValueCalc(36), adaptiveValueCalc(15), adaptiveValueCalc(22), adaptiveValueCalc(15), adaptiveValueCalc(22), adaptiveValueCalc(44), adaptiveValueCalc(12), adaptiveValueCalc(16), adaptiveValueCalc(4), adaptiveValueCalc(20), adaptiveValueCalc(24));
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
+var StyledProfileAboutText = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  max-width: 640px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  word-wrap: break-word;\n  margin-left: 32px;\n\n  .name {\n    ',
+        ';\n    color: ',
+        ';\n    margin-bottom: 0;\n    line-height: 1.75em;\n  }\n\n  .descr {\n    font-family: ',
+        ';\n    ',
+        ';\n    color: ',
+        ';\n    word-wrap: break-word;\n  }\n\n  .wallet {\n    ',
+        ';\n    color: ',
+        ';\n  }\n\n  .isActive {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    overflow: hidden;\n    max-height: 3em;\n    white-space: normal;\n  }\n\n  .readMore {\n    ',
+        ';\n    color: ',
+        ';\n    margin-top: 4px;\n    display: block;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .shareEdit {\n    margin-top: 20px;\n    display: flex;\n    align-items: center;\n\n    .editBtnOrShare {\n      margin-right: 24px;\n    }\n  }\n\n  ',
+        ' {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n    max-width: 516px;\n\n    .name {\n      ',
+        ';\n      line-height: 1.335em;\n      margin-bottom: 8px;\n    }\n\n    .descr {\n      font-size: 1.4em;\n      margin-top: 4px;\n    }\n\n    .shareEdit {\n      margin-top: 24px;\n    }\n  }\n\n  @media (min-width: 600px) and (max-width: 767px) {\n    max-width: 368px;\n  }\n\n  ',
+        ' {\n    max-width: ',
+        ';\n    margin-left: ',
+        ';\n\n    .name {\n      font-size: ',
+        ';\n      line-height: ',
+        ';\n    }\n\n    .descr {\n      font-size: ',
+        ';\n      line-height: ',
+        ';\n    }\n\n    .wallet {\n      font-size: ',
+        ';\n      line-height: ',
+        ';\n    }\n\n    .isActive {\n      max-height: ',
+        ';\n    }\n\n    .readMore {\n      font-size: ',
+        ';\n      line-height: ',
+        ';\n      margin-top: ',
+        ';\n    }\n\n    .shareEdit {\n      margin-top: ',
+        ';\n\n      .editBtnOrShare {\n        margin-right: ',
+        ';\n      }\n    }\n  }\n',
+      ],
+      [
+        '\n  max-width: 640px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  word-wrap: break-word;\n  margin-left: 32px;\n\n  .name {\n    ',
+        ';\n    color: ',
+        ';\n    margin-bottom: 0;\n    line-height: 1.75em;\n  }\n\n  .descr {\n    font-family: ',
+        ';\n    ',
+        ';\n    color: ',
+        ';\n    word-wrap: break-word;\n  }\n\n  .wallet {\n    ',
+        ';\n    color: ',
+        ';\n  }\n\n  .isActive {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    overflow: hidden;\n    max-height: 3em;\n    white-space: normal;\n  }\n\n  .readMore {\n    ',
+        ';\n    color: ',
+        ';\n    margin-top: 4px;\n    display: block;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .shareEdit {\n    margin-top: 20px;\n    display: flex;\n    align-items: center;\n\n    .editBtnOrShare {\n      margin-right: 24px;\n    }\n  }\n\n  ',
+        ' {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n    max-width: 516px;\n\n    .name {\n      ',
+        ';\n      line-height: 1.335em;\n      margin-bottom: 8px;\n    }\n\n    .descr {\n      font-size: 1.4em;\n      margin-top: 4px;\n    }\n\n    .shareEdit {\n      margin-top: 24px;\n    }\n  }\n\n  @media (min-width: 600px) and (max-width: 767px) {\n    max-width: 368px;\n  }\n\n  ',
+        ' {\n    max-width: ',
+        ';\n    margin-left: ',
+        ';\n\n    .name {\n      font-size: ',
+        ';\n      line-height: ',
+        ';\n    }\n\n    .descr {\n      font-size: ',
+        ';\n      line-height: ',
+        ';\n    }\n\n    .wallet {\n      font-size: ',
+        ';\n      line-height: ',
+        ';\n    }\n\n    .isActive {\n      max-height: ',
+        ';\n    }\n\n    .readMore {\n      font-size: ',
+        ';\n      line-height: ',
+        ';\n      margin-top: ',
+        ';\n    }\n\n    .shareEdit {\n      margin-top: ',
+        ';\n\n      .editBtnOrShare {\n        margin-right: ',
+        ';\n      }\n    }\n  }\n',
+      ]
+    )),
+  FH1,
+  BlackColor,
+  dmsansFontVarCss.css,
+  MainText,
+  TextGrayColor,
+  FH5,
+  AccentColor,
+  FH6,
+  AccentColor,
+  mediaQuery.mobile,
+  FH3,
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(640),
+  adaptiveValueCalc(32),
+  adaptiveValueCalc(24),
+  adaptiveValueCalc(36),
+  adaptiveValueCalc(15),
+  adaptiveValueCalc(22),
+  adaptiveValueCalc(15),
+  adaptiveValueCalc(22),
+  adaptiveValueCalc(44),
+  adaptiveValueCalc(12),
+  adaptiveValueCalc(16),
+  adaptiveValueCalc(4),
+  adaptiveValueCalc(20),
+  adaptiveValueCalc(24)
+);
 var maxStringLenght = 177;
 export var ProfileAboutText = function (_a) {
-    var _b;
-    var username = _a.username, about = _a.about, following = _a.following, wallets = _a.wallets, followers = _a.followers, followings = _a.followings, social = _a.social;
-    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
-    var getUser = useUserStore(function (state) { return state.user; });
-    var _c = useUiStore(function (state) { return ({
+  var _b;
+  var username = _a.username,
+    about = _a.about,
+    following = _a.following,
+    wallets = _a.wallets,
+    followers = _a.followers,
+    followings = _a.followings,
+    social = _a.social;
+  var isSignedIn = useUserStore(function (state) {
+    return state.isSignedIn;
+  });
+  var getUser = useUserStore(function (state) {
+    return state.user;
+  });
+  var _c = useUiStore(function (state) {
+      return {
         openModal: state.openModal,
         closeModal: state.closeModal,
-    }); }), openModal = _c.openModal, closeModal = _c.closeModal;
-    var _d = useState(false), isNeedReadMore = _d[0], setNeedReadMore = _d[1];
-    var _e = useState(following), isFollowing = _e[0], setIsFollowing = _e[1];
-    var url = typeof window !== 'undefined' ? window.location.href : null;
-    var router = useRouter();
-    var profileId = router.query.profileId;
-    var userWallet = profileId === (getUser === null || getUser === void 0 ? void 0 : getUser.userId)
-        ? getUser === null || getUser === void 0 ? void 0 : getUser.wallets[0]
-        : wallets && ((_b = wallets[0]) === null || _b === void 0 ? void 0 : _b.address);
-    var isUserNameShouldShow = username && username.length >= 1 && username.length <= 30;
-    var followProfile = useFollowProfile(profileId).followProfile;
-    var unfollowProfile = useUnfollowProfile(profileId).unfollowProfile;
-    var onContentChanged = useCallback(function () {
-        isFollowing ? unfollowProfile() : followProfile();
-        setIsFollowing(!isFollowing);
-    }, [isFollowing]);
-    var handleReadMore = function () { return setNeedReadMore(function (p) { return !p; }); };
-    useEffect(function () {
-        if (about && about.length > maxStringLenght) {
-            setNeedReadMore(true);
-        }
-    }, [about]);
-    var handleRedirectToProfileSettings = function () {
-        router.push("/account/profile/settings/".concat(profileId));
-    };
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (<StyledProfileAboutText>
+      };
+    }),
+    openModal = _c.openModal,
+    closeModal = _c.closeModal;
+  var _d = useState(false),
+    isNeedReadMore = _d[0],
+    setNeedReadMore = _d[1];
+  var _e = useState(following),
+    isFollowing = _e[0],
+    setIsFollowing = _e[1];
+  var url = typeof window !== 'undefined' ? window.location.href : null;
+  var router = useRouter();
+  var profileId = router.query.profileId;
+  var userWallet =
+    profileId ===
+    (getUser === null || getUser === void 0 ? void 0 : getUser.userId)
+      ? getUser === null || getUser === void 0
+        ? void 0
+        : getUser.wallets[0]
+      : wallets &&
+        ((_b = wallets[0]) === null || _b === void 0 ? void 0 : _b.address);
+  var isUserNameShouldShow =
+    username && username.length >= 1 && username.length <= 30;
+  var followProfile = useFollowProfile(profileId).followProfile;
+  var unfollowProfile = useUnfollowProfile(profileId).unfollowProfile;
+  var onContentChanged = useCallback(
+    function () {
+      isFollowing ? unfollowProfile() : followProfile();
+      setIsFollowing(!isFollowing);
+    },
+    [isFollowing]
+  );
+  var handleReadMore = function () {
+    return setNeedReadMore(function (p) {
+      return !p;
+    });
+  };
+  useEffect(
+    function () {
+      if (about && about.length > maxStringLenght) {
+        setNeedReadMore(true);
+      }
+    },
+    [about]
+  );
+  var handleRedirectToProfileSettings = function () {
+    router.push('/account/profile/settings/'.concat(profileId));
+  };
+  var windowDimensions =
+    useWindowDimensionsWithServerInitial().windowDimensions;
+  return (
+    <StyledProfileAboutText>
       {isUserNameShouldShow && <h3 className={'name'}>{username}</h3>}
-      {userWallet && (<CopyButton value={userWallet}>
+      {userWallet && (
+        <CopyButton value={userWallet}>
           <p className="wallet">{shortenedText(userWallet)}</p>
-        </CopyButton>)}
-      <ProfileFollowersSocial followings={followings} followers={followers} social={social}/>
+        </CopyButton>
+      )}
+      <ProfileFollowersSocial
+        followings={followings}
+        followers={followers}
+        social={social}
+      />
 
-      {about && (<Hyphenated>
-          <p className={"descr ".concat(isNeedReadMore && 'isActive')}>{about}</p>
-        </Hyphenated>)}
-      {isNeedReadMore && (<span className={'readMore'} onClick={handleReadMore}>
+      {about && (
+        <Hyphenated>
+          <p className={'descr '.concat(isNeedReadMore && 'isActive')}>
+            {about}
+          </p>
+        </Hyphenated>
+      )}
+      {isNeedReadMore && (
+        <span className={'readMore'} onClick={handleReadMore}>
           Read more
-        </span>)}
+        </span>
+      )}
       <div className="shareEdit">
-        {isSignedIn && (<div className="editBtnOrShare">
-            {profileId !== (getUser === null || getUser === void 0 ? void 0 : getUser.userId) && (<MainButton text={isFollowing ? 'Unfollow' : 'FOLLOW'} variant={isFollowing ? 'secondary' : 'primaryM'} onClick={onContentChanged}/>)}
-            {profileId === (getUser === null || getUser === void 0 ? void 0 : getUser.userId) && (<MainButton text={'Edit profile'} variant="outline" onClick={handleRedirectToProfileSettings}/>)}
-          </div>)}
+        {isSignedIn && (
+          <div className="editBtnOrShare">
+            {profileId !==
+              (getUser === null || getUser === void 0
+                ? void 0
+                : getUser.userId) && (
+              <MainButton
+                text={isFollowing ? 'Unfollow' : 'FOLLOW'}
+                variant={isFollowing ? 'secondary' : 'primaryM'}
+                onClick={onContentChanged}
+              />
+            )}
+            {profileId ===
+              (getUser === null || getUser === void 0
+                ? void 0
+                : getUser.userId) && (
+              <MainButton
+                text={'Edit profile'}
+                variant="outline"
+                onClick={handleRedirectToProfileSettings}
+              />
+            )}
+          </div>
+        )}
         <div className="shareBtn">
-          <IconButton onClick={function () {
-            return openModal(<ShareDialog link={url} onHide={closeModal}/>);
-        }} icon={<ShareIcon style={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}/>}/>
+          <IconButton
+            onClick={function () {
+              return openModal(<ShareDialog link={url} onHide={closeModal} />);
+            }}
+            icon={
+              <ShareIcon
+                style={getAdaptiveScale({
+                  windowDimensions: windowDimensions,
+                  currentSize: 1,
+                })}
+              />
+            }
+          />
         </div>
       </div>
-    </StyledProfileAboutText>);
+    </StyledProfileAboutText>
+  );
 };
 var templateObject_1;

package/dist/components/profile/addToGalleryBtns/index.jsx

@@ -1,42 +1,140 @@
-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 { useToGalleryStore } from '@/hooks/useToGalleryAsset';
+
 import { mediaQuery } from '@/styles/ScreenWidth';
 import { WhiteColor } from '@/styles/colors';
+
 import IconWithButton from '@/system/Buttons/IconWithButton';
 import MainButton from '@/system/Buttons/MainButton';
+
 import { getAdaptiveScale } from '@/utils/adaptive/scale';
 import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+
 import PlusIcon from '@/public/wallets/plus.svg';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
 // Styles
-var StyledProfileAddToGalleryBtns = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 100;\n  bottom: 32px;\n  background: ", ";\n  width: 300px;\n  height: 55px;\n  box-shadow: 0 4px 20px rgba(33, 21, 95, 0.1);\n  border-radius: 30px;\n  padding: 8px;\n\n  .addToGalleryBtns {\n    display: flex;\n    height: 100%;\n    width: 100%;\n\n    button:first-child {\n      margin-right: 12px;\n      width: 160px;\n      height: 40px;\n      padding: 0;\n    }\n\n    button:last-child {\n      width: 112px;\n      height: 40px;\n    }\n  }\n\n  .organizeBtn {\n    display: flex;\n    height: 100%;\n    width: 100%;\n\n    button {\n      width: 100%;\n    }\n  }\n\n  .icon {\n    path {\n      stroke: ", ";\n    }\n\n    margin-right: 5px;\n  }\n\n  ", " {\n    bottom: ", ";\n    width: ", ";\n    height: ", ";\n    box-shadow: 0 ", " ", "\n      rgba(33, 21, 95, 0.1);\n    border-radius: ", ";\n    padding: ", ";\n\n    .addToGalleryBtns {\n      button:first-child {\n        margin-right: ", ";\n        width: ", ";\n        height: ", ";\n      }\n\n      button:last-child {\n        width: ", ";\n        height: ", ";\n      }\n    }\n\n    .icon {\n      margin-right: ", ";\n    }\n  }\n"], ["\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 100;\n  bottom: 32px;\n  background: ", ";\n  width: 300px;\n  height: 55px;\n  box-shadow: 0 4px 20px rgba(33, 21, 95, 0.1);\n  border-radius: 30px;\n  padding: 8px;\n\n  .addToGalleryBtns {\n    display: flex;\n    height: 100%;\n    width: 100%;\n\n    button:first-child {\n      margin-right: 12px;\n      width: 160px;\n      height: 40px;\n      padding: 0;\n    }\n\n    button:last-child {\n      width: 112px;\n      height: 40px;\n    }\n  }\n\n  .organizeBtn {\n    display: flex;\n    height: 100%;\n    width: 100%;\n\n    button {\n      width: 100%;\n    }\n  }\n\n  .icon {\n    path {\n      stroke: ", ";\n    }\n\n    margin-right: 5px;\n  }\n\n  ", " {\n    bottom: ", ";\n    width: ", ";\n    height: ", ";\n    box-shadow: 0 ", " ", "\n      rgba(33, 21, 95, 0.1);\n    border-radius: ", ";\n    padding: ", ";\n\n    .addToGalleryBtns {\n      button:first-child {\n        margin-right: ", ";\n        width: ", ";\n        height: ", ";\n      }\n\n      button:last-child {\n        width: ", ";\n        height: ", ";\n      }\n    }\n\n    .icon {\n      margin-right: ", ";\n    }\n  }\n"])), WhiteColor, WhiteColor, mediaQuery.minWidthFourK, adaptiveValueCalc(32), adaptiveValueCalc(300), adaptiveValueCalc(55), adaptiveValueCalc(4), adaptiveValueCalc(20), adaptiveValueCalc(30), adaptiveValueCalc(8), adaptiveValueCalc(12), adaptiveValueCalc(160), adaptiveValueCalc(40), adaptiveValueCalc(112), adaptiveValueCalc(40), adaptiveValueCalc(5));
+var StyledProfileAddToGalleryBtns = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 100;\n  bottom: 32px;\n  background: ',
+        ';\n  width: 300px;\n  height: 55px;\n  box-shadow: 0 4px 20px rgba(33, 21, 95, 0.1);\n  border-radius: 30px;\n  padding: 8px;\n\n  .addToGalleryBtns {\n    display: flex;\n    height: 100%;\n    width: 100%;\n\n    button:first-child {\n      margin-right: 12px;\n      width: 160px;\n      height: 40px;\n      padding: 0;\n    }\n\n    button:last-child {\n      width: 112px;\n      height: 40px;\n    }\n  }\n\n  .organizeBtn {\n    display: flex;\n    height: 100%;\n    width: 100%;\n\n    button {\n      width: 100%;\n    }\n  }\n\n  .icon {\n    path {\n      stroke: ',
+        ';\n    }\n\n    margin-right: 5px;\n  }\n\n  ',
+        ' {\n    bottom: ',
+        ';\n    width: ',
+        ';\n    height: ',
+        ';\n    box-shadow: 0 ',
+        ' ',
+        '\n      rgba(33, 21, 95, 0.1);\n    border-radius: ',
+        ';\n    padding: ',
+        ';\n\n    .addToGalleryBtns {\n      button:first-child {\n        margin-right: ',
+        ';\n        width: ',
+        ';\n        height: ',
+        ';\n      }\n\n      button:last-child {\n        width: ',
+        ';\n        height: ',
+        ';\n      }\n    }\n\n    .icon {\n      margin-right: ',
+        ';\n    }\n  }\n',
+      ],
+      [
+        '\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 100;\n  bottom: 32px;\n  background: ',
+        ';\n  width: 300px;\n  height: 55px;\n  box-shadow: 0 4px 20px rgba(33, 21, 95, 0.1);\n  border-radius: 30px;\n  padding: 8px;\n\n  .addToGalleryBtns {\n    display: flex;\n    height: 100%;\n    width: 100%;\n\n    button:first-child {\n      margin-right: 12px;\n      width: 160px;\n      height: 40px;\n      padding: 0;\n    }\n\n    button:last-child {\n      width: 112px;\n      height: 40px;\n    }\n  }\n\n  .organizeBtn {\n    display: flex;\n    height: 100%;\n    width: 100%;\n\n    button {\n      width: 100%;\n    }\n  }\n\n  .icon {\n    path {\n      stroke: ',
+        ';\n    }\n\n    margin-right: 5px;\n  }\n\n  ',
+        ' {\n    bottom: ',
+        ';\n    width: ',
+        ';\n    height: ',
+        ';\n    box-shadow: 0 ',
+        ' ',
+        '\n      rgba(33, 21, 95, 0.1);\n    border-radius: ',
+        ';\n    padding: ',
+        ';\n\n    .addToGalleryBtns {\n      button:first-child {\n        margin-right: ',
+        ';\n        width: ',
+        ';\n        height: ',
+        ';\n      }\n\n      button:last-child {\n        width: ',
+        ';\n        height: ',
+        ';\n      }\n    }\n\n    .icon {\n      margin-right: ',
+        ';\n    }\n  }\n',
+      ]
+    )),
+  WhiteColor,
+  WhiteColor,
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(32),
+  adaptiveValueCalc(300),
+  adaptiveValueCalc(55),
+  adaptiveValueCalc(4),
+  adaptiveValueCalc(20),
+  adaptiveValueCalc(30),
+  adaptiveValueCalc(8),
+  adaptiveValueCalc(12),
+  adaptiveValueCalc(160),
+  adaptiveValueCalc(40),
+  adaptiveValueCalc(112),
+  adaptiveValueCalc(40),
+  adaptiveValueCalc(5)
+);
 // Component
 var PlusIconResize = function () {
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (<PlusIcon className={'icon'} style={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}/>);
+  var windowDimensions =
+    useWindowDimensionsWithServerInitial().windowDimensions;
+  return (
+    <PlusIcon
+      className={'icon'}
+      style={getAdaptiveScale({
+        windowDimensions: windowDimensions,
+        currentSize: 1,
+      })}
+    />
+  );
 };
 var ProfileAddToGalleryBtns = function (_a) {
-    var addMethod = _a.addMethod;
-    var _b = useToGalleryStore(function (state) { return ({
+  var addMethod = _a.addMethod;
+  var _b = useToGalleryStore(function (state) {
+      return {
         resetCreationsInGallery: state.resetCreationsInGallery,
         creationsToGallery: state.creationsToGallery,
         isActiveGalleryMode: state.isActiveGalleryMode,
-    }); }), resetCreationsInGallery = _b.resetCreationsInGallery, creationsToGallery = _b.creationsToGallery, isActiveGalleryMode = _b.isActiveGalleryMode;
-    if (!isActiveGalleryMode)
-        return null;
-    return (<StyledProfileAddToGalleryBtns>
+      };
+    }),
+    resetCreationsInGallery = _b.resetCreationsInGallery,
+    creationsToGallery = _b.creationsToGallery,
+    isActiveGalleryMode = _b.isActiveGalleryMode;
+  if (!isActiveGalleryMode) return null;
+  return (
+    <StyledProfileAddToGalleryBtns>
       <div className="addToGalleryBtns">
-        <IconWithButton variant={'regular'} text={'Add to Gallery'} onClick={addMethod} disabled={!creationsToGallery.length} isDisableSkeleton={true}>
+        <IconWithButton
+          variant={'regular'}
+          text={'Add to Gallery'}
+          onClick={addMethod}
+          disabled={!creationsToGallery.length}
+          isDisableSkeleton={true}
+        >
           <PlusIconResize />
         </IconWithButton>
-        <MainButton onClick={resetCreationsInGallery} variant="float" text={'Cancel'}/>
+        <MainButton
+          onClick={resetCreationsInGallery}
+          variant="float"
+          text={'Cancel'}
+        />
       </div>
-    </StyledProfileAddToGalleryBtns>);
+    </StyledProfileAddToGalleryBtns>
+  );
 };
 // Export
 export default ProfileAddToGalleryBtns;