@ludo.ninja/components 1.1.1 → 1.1.3

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

@@ -1,276 +1,89 @@
+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 __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 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,140 +1,42 @@
+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;

package/dist/components/profile/followersSocial/followers/index.jsx

@@ -1,82 +1,22 @@
+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 { BlackColor, TextGrayColor } from '@/styles/colors';
-
 import { H5 } from '@system';
-
 import { dmsansFontVarCss } from '@/fonts/vars';
-
-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 StyledProfileFollowers = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        "\n  display: flex;\n  align-items: center;\n\n  &:after {\n    content: '\u2022';\n    color: ",
-        ';\n    font-size: 12px;\n    font-weight: 500;\n    margin: 0 8px;\n    line-height: 16px;\n  }\n',
-      ],
-      [
-        "\n  display: flex;\n  align-items: center;\n\n  &:after {\n    content: '\u2022';\n    color: ",
-        ';\n    font-size: 12px;\n    font-weight: 500;\n    margin: 0 8px;\n    line-height: 16px;\n  }\n',
-      ]
-    )),
-  TextGrayColor
-);
-var StyledProfileFollowersCounter = styled(H5)(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      [
-        '\n  font-family: ',
-        ';\n  color: ',
-        ';\n  text-transform: uppercase;\n  font-weight: 700;\n',
-      ],
-      [
-        '\n  font-family: ',
-        ';\n  color: ',
-        ';\n  text-transform: uppercase;\n  font-weight: 700;\n',
-      ]
-    )),
-  dmsansFontVarCss.css,
-  BlackColor
-);
-var StyledProfileFollowersCaption = styled(H5)(
-  templateObject_3 ||
-    (templateObject_3 = __makeTemplateObject(
-      [
-        '\n  font-family: ',
-        ';\n  color: ',
-        ';\n  margin-left: 8px;\n  text-transform: uppercase;\n',
-      ],
-      [
-        '\n  font-family: ',
-        ';\n  color: ',
-        ';\n  margin-left: 8px;\n  text-transform: uppercase;\n',
-      ]
-    )),
-  dmsansFontVarCss.css,
-  TextGrayColor
-);
+var StyledProfileFollowers = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  &:after {\n    content: '\u2022';\n    color: ", ";\n    font-size: 12px;\n    font-weight: 500;\n    margin: 0 8px;\n    line-height: 16px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  &:after {\n    content: '\u2022';\n    color: ", ";\n    font-size: 12px;\n    font-weight: 500;\n    margin: 0 8px;\n    line-height: 16px;\n  }\n"])), TextGrayColor);
+var StyledProfileFollowersCounter = styled(H5)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  font-weight: 700;\n"], ["\n  font-family: ", ";\n  color: ", ";\n  text-transform: uppercase;\n  font-weight: 700;\n"])), dmsansFontVarCss.css, BlackColor);
+var StyledProfileFollowersCaption = styled(H5)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-family: ", ";\n  color: ", ";\n  margin-left: 8px;\n  text-transform: uppercase;\n"], ["\n  font-family: ", ";\n  color: ", ";\n  margin-left: 8px;\n  text-transform: uppercase;\n"])), dmsansFontVarCss.css, TextGrayColor);
 // Components
 export var ProfileFollowers = function (_a) {
-  var counter = _a.counter,
-    text = _a.text;
-  return (
-    <StyledProfileFollowers>
+    var counter = _a.counter, text = _a.text;
+    return (<StyledProfileFollowers>
       <StyledProfileFollowersCounter>{counter}</StyledProfileFollowersCounter>
       <StyledProfileFollowersCaption>{text}</StyledProfileFollowersCaption>
-    </StyledProfileFollowers>
-  );
+    </StyledProfileFollowers>);
 };
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,46 +1,22 @@
+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 { ProfileFollowers } from '@/components/profile/followersSocial/followers';
 import { ProfileSocial } from '@/components/profile/followersSocial/social';
-
-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 StyledProfileFollowersSocial = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      ['\n  display: flex;\n  align-items: center;\n  margin: 6px 0 16px 0;\n'],
-      ['\n  display: flex;\n  align-items: center;\n  margin: 6px 0 16px 0;\n']
-    ))
-);
+var StyledProfileFollowersSocial = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin: 6px 0 16px 0;\n"], ["\n  display: flex;\n  align-items: center;\n  margin: 6px 0 16px 0;\n"])));
 // Components
 export var ProfileFollowersSocial = function (_a) {
-  var followers = _a.followers,
-    followings = _a.followings,
-    social = _a.social;
-  return (
-    <StyledProfileFollowersSocial>
-      {(followers && (
-        <ProfileFollowers text={'FOLLOWERS'} counter={followers} />
-      )) ||
-        null}
-      {(followings && (
-        <ProfileFollowers text={'FOLLOWING'} counter={followings} />
-      )) ||
-        null}
-      <ProfileSocial social={social} />
-    </StyledProfileFollowersSocial>
-  );
+    var followers = _a.followers, followings = _a.followings, social = _a.social;
+    return (<StyledProfileFollowersSocial>
+      {(followers && (<ProfileFollowers text={'FOLLOWERS'} counter={followers}/>)) ||
+            null}
+      {(followings && (<ProfileFollowers text={'FOLLOWING'} counter={followings}/>)) ||
+            null}
+      <ProfileSocial social={social}/>
+    </StyledProfileFollowersSocial>);
 };
 var templateObject_1;