@hhgtech/hhg-components 1.29.88 → 1.29.89

package/build/index-becfec7a.js

@@ -0,0 +1,1307 @@
+'use strict';
+
+var React = require('react');
+var index$3 = require('./index-aad249ab.js');
+var index$1 = require('./index-9151d357.js');
+var index$2 = require('./index-6b95442c.js');
+var utils = require('./utils-ae9740c0.js');
+var ReactDOM = require('react-dom');
+var togetherComponentGlobalContext = require('./utils-251b2841.js');
+var styled = require('@emotion/styled');
+var miscTheme = require('./miscTheme.js');
+var tslib_es6 = require('./tslib.es6-f3c387c0.js');
+var index$5 = require('./index-0afde39e.js');
+var useTranslations = require('./useTranslations-8a9fa84d.js');
+var dataTransform = require('./dataTransform-9ec385e3.js');
+var constants = require('./constants-81b95117.js');
+var togetherApiPaths = require('./togetherApiPaths.js');
+var post = require('./post-0fec66f4.js');
+var index$6 = require('./index-1b06e81f.js');
+var togetherMoleculesCardAuthor = require('./index-922020ed.js');
+var index$4 = require('./index-be262a50.js');
+var togetherRichTextEditor = require('./editor-40386fe7.js');
+var core = require('@mantine/core');
+var other = require('@hhgtech/icons/other');
+var index = require('./index-a8705384.js');
+var togetherMoleculesPostImagePreview = require('./index-27e50de1.js');
+var togetherShareBox = require('./togetherShareBox.js');
+var index$7 = require('./index-e8dc7fdb.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const getDefaultFailNoti = (t) => ({
+    message: t('notification.failure'),
+    type: 'danger',
+});
+
+const likeUnlikePost = ({ id, locale, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    if (!id)
+        return;
+    const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.POST.LIKE, {
+        id,
+        _locale: locale,
+    }), 'GET');
+    return res;
+});
+const deletePost = ({ id, locale, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    if (!id)
+        return;
+    const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.POST.DELETE, {
+        id,
+        _locale: locale,
+    }), 'DELETE');
+    return res;
+});
+const getPostFormData = ({ title, description, communityId, imageFiles, previewUrl, topicIds, locale, sanitizeFunction, categoryCommunityId, categoryTopicIds, 
+// admin only
+introUrl, bannerUrl, scheduleTime, isAnonymous, isAskDoctor, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const bodyFormData = new FormData();
+    const submitDescription = post.removeBannedWordWrapper(description);
+    const submitTitle = post.removeBannedWordWrapper(title);
+    const mentionIds = post.getMentionIdsFromString(submitDescription);
+    bodyFormData.append('title', submitTitle);
+    bodyFormData.append('description', post.encodePostContent(submitDescription, sanitizeFunction));
+    if (categoryCommunityId) {
+        bodyFormData.append('category_community', String(categoryCommunityId));
+    }
+    else if (communityId) {
+        bodyFormData.append('community_id', String(communityId));
+    }
+    bodyFormData.append('is_anonymous', isAnonymous ? '1' : '0');
+    bodyFormData.append('is_question', isAskDoctor ? '1' : '0');
+    (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.title) && bodyFormData.append('preview_title', previewUrl.title);
+    (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.description) &&
+        bodyFormData.append('preview_description', previewUrl.description);
+    (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url) &&
+        bodyFormData.append('preview_link', utils.safeEncodeURI(previewUrl.url));
+    (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.image) &&
+        bodyFormData.append('preview_image', utils.safeEncodeURI(previewUrl.image));
+    topicIds === null || topicIds === void 0 ? void 0 : topicIds.forEach((topicId) => {
+        bodyFormData.append('topics[]', String(topicId || ''));
+    });
+    categoryTopicIds === null || categoryTopicIds === void 0 ? void 0 : categoryTopicIds.forEach((topicId) => {
+        bodyFormData.append('category_topics[]', String(topicId || ''));
+    });
+    if (!!(imageFiles === null || imageFiles === void 0 ? void 0 : imageFiles.length)) {
+        const imageSrcs = yield Promise.all(imageFiles.map((file, index) => new Promise((resolve) => {
+            setTimeout(() => {
+                resolve(post.uploadAndGetSrc(file, locale));
+            }, index * 2000);
+        })));
+        imageSrcs === null || imageSrcs === void 0 ? void 0 : imageSrcs.filter(Boolean).slice(0, constants.MAX_IMAGE_UPLOADS).forEach((imageFile, index) => {
+            bodyFormData.append(`images[${index}]`, imageFile);
+        });
+    }
+    else {
+        bodyFormData.append(`images`, '');
+    }
+    mentionIds === null || mentionIds === void 0 ? void 0 : mentionIds.forEach((mentionId) => {
+        bodyFormData.append(`mention_ids[]`, mentionId);
+    });
+    // Admin only
+    bodyFormData.append('intro_url', introUrl || '');
+    bodyFormData.append('banner', bannerUrl || '');
+    if (scheduleTime) {
+        bodyFormData.append('post_type', 'scheduled');
+        bodyFormData.append('schedule_datetime', scheduleTime);
+    }
+    return bodyFormData;
+});
+const createPost = ({ locale, formData, isArticleComment, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(isArticleComment ? togetherApiPaths.PATHS.POST.CREATE_ARTICLE_COMMENT : togetherApiPaths.PATHS.POST.CREATE, {
+        _locale: locale,
+    }), 'POST', {
+        data: formData,
+    });
+    return res;
+});
+const editPost = ({ id, locale, formData, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.POST.UPDATE, {
+        id,
+        _locale: locale,
+    }), 'POST', {
+        data: formData,
+    });
+    return res;
+});
+const reportPost = ({ id, reason, locale, }) => {
+    const formData = new FormData();
+    formData.append('reason', reason);
+    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.POST.REPORT, {
+        _locale: locale,
+        id,
+    }), 'POST', {
+        data: formData,
+    });
+};
+
+const useImagePicker = (imageFilesProp, onImageFilesChange) => {
+    const [imageFiles, setImageFiles] = React.useState(imageFilesProp || []);
+    const imageSrcs = React.useMemo(() => (imageFilesProp || imageFiles).map((file) => typeof file === 'string' ? file : URL.createObjectURL(file)), [imageFilesProp, imageFiles]);
+    const onSelectImages = (e) => {
+        const files = e.target.files;
+        if (files) {
+            if (onImageFilesChange && imageFilesProp) {
+                const _files = imageFilesProp || imageFiles;
+                onImageFilesChange(_files.concat(Array.from(files)));
+            }
+            else
+                setImageFiles((imgs) => {
+                    const _imgs = imageFilesProp || imgs;
+                    onImageFilesChange &&
+                        onImageFilesChange(_imgs.concat(Array.from(files)));
+                    return _imgs.concat(Array.from(files));
+                });
+        }
+    };
+    const onRemoveImage = (index) => {
+        if (onImageFilesChange && imageFilesProp) {
+            const _files = imageFilesProp;
+            _files.splice(index, 1);
+            onImageFilesChange(_files.slice());
+        }
+        else {
+            setImageFiles((imgs) => {
+                const _imgs = imageFilesProp || imgs;
+                _imgs.splice(index, 1);
+                onImageFilesChange && onImageFilesChange(_imgs.slice());
+                return _imgs.slice();
+            });
+        }
+    };
+    const onRemoveAllImages = () => {
+        onImageFilesChange ? onImageFilesChange([]) : setImageFiles([]);
+    };
+    return {
+        onSelectImages,
+        onRemoveImage,
+        onRemoveAllImages,
+        imageSrcs,
+        imageFiles: imageFilesProp || imageFiles,
+    };
+};
+
+var img$4 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' fill='none'%3e%3cpath fill='%23262626' d='M12 22.984c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.478-10 10 4.477 10 10 10'/%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.828 10.156-5.657 5.657M9.172 10.156l5.657 5.657'/%3e%3c/svg%3e";
+var IconCloseCircle = img$4;
+
+const StyledPopupDanger = styled__default["default"].div `
+  [data-type='confirm'] {
+    width: min(360px, 100%);
+    height: auto;
+    &[data-open='false'] {
+      top: calc(-100% - 500px);
+    }
+  }
+  z-index: 600;
+
+  .header {
+    display: none !important;
+  }
+
+  .confirm-dialog {
+    position: relative;
+    overflow: auto;
+    width: 100%;
+    padding-top: 44px;
+    background: #fff;
+    border-radius: ${miscTheme.theme.borderRadius};
+
+    .confirm-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 0 16px 16px;
+      text-align: center;
+
+      .title {
+        margin-bottom: 8px;
+        font-size: 24px;
+        line-height: 32px;
+        word-break: break-word;
+        overflow-wrap: break-word;
+      }
+
+      .desc {
+        margin-bottom: 24px;
+        color: ${miscTheme.theme.colors.gray500};
+        font-size: 18px;
+        line-height: 24px;
+        text-align: center;
+        word-break: break-word;
+        overflow-wrap: break-word;
+      }
+
+      .btn-group {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+
+        button {
+          margin: 0 4px 0.5rem;
+        }
+      }
+    }
+  }
+  .thumbnail-container {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 32px;
+    .thumbnail {
+      width: 100%;
+      height: 100%;
+    }
+    &.is-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #e0e9fc;
+      border-radius: 1rem;
+      .thumbnail {
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
+  &[data-is-marrybaby='true'] {
+    .popup-frame {
+      > div:first-child {
+        overflow: hidden;
+        border-radius: 1rem;
+        &[data-open='true'] {
+          ${utils.MediaQueries.mbDown} {
+            top: 100%;
+            transform: translate(-50%, -100%);
+            max-width: unset;
+            width: 100%;
+            background: unset;
+            overflow: unset;
+          }
+        }
+      }
+      .popup-content {
+        .close-button {
+          ${utils.MediaQueries.mbDown} {
+            display: none;
+          }
+        }
+        .confirm-dialog {
+          ${utils.MediaQueries.mbDown} {
+            background: unset;
+            position: relative;
+            overflow-x: hidden;
+            &::before {
+              content: '';
+              width: 200%;
+              background: #fff;
+              position: absolute;
+              left: 50%;
+              top: 0;
+              transform: translateX(-50%);
+              z-index: -1;
+              height: 100%;
+              border-top-left-radius: 100%;
+              border-top-right-radius: 100%;
+            }
+          }
+          .confirm-content {
+            padding: 0 40px 40px;
+            ${utils.MediaQueries.mbDown} {
+              padding-left: 1.5rem;
+              padding-right: 1.5rem;
+            }
+            .btn-group {
+              width: 100%;
+              justify-content: space-between;
+              button {
+                flex: 1;
+                margin: 0;
+                &:first-child {
+                  margin-right: 0.5rem;
+                }
+              }
+            }
+          }
+        }
+      }
+      .thumbnail-container {
+        ${utils.MediaQueries.mbDown} {
+          display: none;
+        }
+        &.is-icon {
+          background: #ffeaf1;
+          border-radius: 24px;
+        }
+        &.is-mobile {
+          position: absolute;
+          top: 0;
+          left: 50%;
+          display: none;
+          width: 48px;
+          height: 48px;
+          transform: translate(-50%, -50%);
+          &.is-icon {
+            border-radius: 1rem;
+            .thumbnail {
+              width: 24px;
+              height: 24px;
+            }
+          }
+          ${utils.MediaQueries.mbDown} {
+            display: flex;
+          }
+        }
+      }
+    }
+  }
+`;
+
+const StyledPopupFrame = styled__default["default"].div `
+  [data-type='confirm'] {
+    max-width: 468px;
+    /* height: 486px; */
+    padding: 0;
+
+    .popup-content {
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+
+      .close-button {
+        top: 16px;
+        right: 16px;
+        width: 24px;
+        height: 24px;
+        z-index: 5;
+      }
+
+      .header {
+        display: flex;
+        height: 56px;
+        align-items: center;
+        padding: 16px 56px 16px 32px;
+        border-bottom: 1px solid ${miscTheme.theme.colors.neutral100};
+        font-weight: 900;
+        width: 100%;
+        justify-content: space-between;
+      }
+
+      .content {
+        overflow: auto;
+        flex: 1;
+        .topic-list-wrapper {
+          padding: 1rem;
+        }
+      }
+    }
+  }
+
+  > div&[data-open='true'] {
+    z-index: 250;
+    &:last-child {
+      z-index: 200;
+    }
+  }
+
+  ${(props) => props.isExpand &&
+    `
+      & > div[data-open] {
+        width: 100%;
+        height: 100%;
+        max-width: none;
+        max-height: none;
+      }
+    `}
+
+  ${(props) => props.hasFullscreen &&
+    `
+      & > div[data-open] {
+        transition: all 0.5s ease-in-out, width 0s, height 0s;
+      }
+    `}
+`;
+const StyledFSBtn = styled__default["default"].div `
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+`;
+
+const PopupFrame = ({ className, style, closeIcon, heading = '', children, isOpen = false, hasFullscreen = false, onClose = () => null, }) => {
+    const [expand, setExpand] = React.useState(false);
+    return (React__default["default"].createElement(StyledPopupFrame, { className: className, style: style, isExpand: expand, hasFullscreen: hasFullscreen },
+        React__default["default"].createElement(index.Popup, { type: "confirm", onClose: onClose, isOpen: isOpen, closeIcon: closeIcon || React__default["default"].createElement("img", { src: togetherMoleculesPostImagePreview.CloseIcon, loading: "lazy" }), enableAnimation: !hasFullscreen },
+            React__default["default"].createElement("div", { className: "header" },
+                React__default["default"].createElement(index$1.Heading, { tag: "h5" }, heading),
+                hasFullscreen && (React__default["default"].createElement(StyledFSBtn, { onClick: () => setExpand(!expand) },
+                    React__default["default"].createElement(other.FullScreen, { size: 14, isExpand: expand })))),
+            React__default["default"].createElement("div", { className: "content" }, typeof children === 'function' ? children(expand) : children))));
+};
+
+const PopupDanger = ({ className, isMarryBaby: isMarryBabyProp, style, title, description, acceptText, cancelText, onAccept, onCancel, thumbnail, isThumbnailIcon, onClose, acceptBtnTracking, acceptBtnProps, cancelBtnProps, }) => {
+    const { data: { env: { isMarryBaby: isMarryBabyContext }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
+    const [isOpen, setIsOpen] = React.useState(false);
+    React.useEffect(() => {
+        utils.toggleNoScroll(true);
+        setTimeout(() => setIsOpen(true), 0);
+        return () => utils.toggleNoScroll(false);
+    }, []);
+    if (typeof window === 'undefined')
+        return null;
+    return ReactDOM__namespace.createPortal(React__default["default"].createElement(StyledPopupDanger, { "data-is-marrybaby": isMarryBaby, className: className, style: style, "data-open": isOpen },
+        React__default["default"].createElement(PopupFrame, { className: "popup-frame", isOpen: isOpen, onClose: onClose },
+            React__default["default"].createElement("div", { className: "confirm-dialog", onClick: (e) => e.stopPropagation() },
+                React__default["default"].createElement("div", { className: "confirm-content" },
+                    thumbnail && (React__default["default"].createElement("div", { className: `thumbnail-container ${isThumbnailIcon ? 'is-icon' : ''}` },
+                        React__default["default"].createElement("img", { className: "thumbnail", src: thumbnail, loading: "lazy" }))),
+                    React__default["default"].createElement(index$1.Heading, { className: "title", tag: "h2" }, title),
+                    React__default["default"].createElement(index$2.Text, { className: "desc", size: "lg" }, description),
+                    React__default["default"].createElement("div", { className: "btn-group" },
+                        React__default["default"].createElement(index$3.Button, Object.assign({ theme: isMarryBaby ? 'marryBaby' : 'helloSites', size: "md", color: "tertiary", onClick: () => {
+                                onAccept === null || onAccept === void 0 ? void 0 : onAccept();
+                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                            } }, acceptBtnProps, acceptBtnTracking), acceptText),
+                        React__default["default"].createElement(index$3.Button, Object.assign({ theme: isMarryBaby ? 'marryBaby' : 'helloSites', size: "md", onClick: () => {
+                                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                            } }, cancelBtnProps), cancelText)))),
+            isMarryBaby && thumbnail && (React__default["default"].createElement("div", { className: `thumbnail-container is-mobile ${isThumbnailIcon ? 'is-icon' : ''}` },
+                React__default["default"].createElement("img", { className: "thumbnail", src: thumbnail, loading: "lazy" }))))), utils.getPopupWrapperDom());
+};
+
+const StyledInputCommentBar = styled__default["default"].div `
+  padding: 1rem;
+  border-top: 1px solid #f2f2f2;
+  &[data-is-reply='true'] {
+    padding-right: 0;
+    padding-left: 0;
+    border-top: 1px solid #e4e8ec;
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+  .error-text {
+    padding: 1rem;
+    color: ${miscTheme.theme.colors.red700};
+  }
+  .reply-to-container {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 0.75rem;
+    margin-top: -0.25rem;
+    .icon-close-comment {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+    a {
+      text-decoration: none;
+    }
+  }
+  .input-container {
+    display: flex;
+    align-items: center;
+    .avatar-wrapper {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      margin-right: 0.5rem;
+      &.avatar-wrapper-reply {
+        width: 32px;
+        height: 32px;
+        .avatar {
+          width: 32px;
+          height: 32px;
+        }
+      }
+    }
+    .input-wrapper {
+      margin-right: 0.5rem;
+      &[data-has-error] {
+        .as-input {
+          border-color: ${miscTheme.theme.colors.red700};
+        }
+      }
+
+      .as-input {
+        .textarea {
+          width: 100%;
+          max-height: 225px;
+          min-height: 75px;
+          .ql-toolbar {
+            padding: 0;
+          }
+          .ql-editor {
+            padding-left: 0;
+            padding-right: 0;
+          }
+          .quill {
+            height: 0;
+          }
+        }
+        width: 100%;
+        padding: 12px 16px;
+        border: solid 1px ${miscTheme.theme.colors.gray200};
+        border-radius: ${miscTheme.theme.borderRadius};
+
+        &:active,
+        &:focus {
+          border-color: ${miscTheme.theme.colors.primaryBase};
+          box-shadow: 0px 0px 2px 2px ${miscTheme.theme.colors.primary200};
+        }
+
+        &:disabled {
+          background-color: ${miscTheme.theme.colors.gray100};
+          cursor: not-allowed;
+        }
+
+        span {
+          &[data-error='true'] {
+            color: red;
+            text-decoration: underline;
+          }
+        }
+      }
+
+      &[data-has-action-icon] {
+        .as-input {
+          padding: 12px 48px 12px 16px;
+        }
+      }
+      &[data-has-display-icon] {
+        .as-input {
+          padding: 12px 16px 12px 48px;
+        }
+      }
+
+      &[data-has-action-icon][data-has-display-icon] {
+        .as-input {
+          padding: 12px 48px;
+        }
+      }
+
+      &[data-size='lg'] {
+        .as-input {
+          font-size: 16px;
+          font-weight: ${miscTheme.theme.sizes.fwRegular};
+          ${utils.MediaQueries.mbDown} {
+            font-size: 22px;
+            line-height: 1.2;
+          }
+
+          ${utils.MediaQueries.mbUp} {
+            font-size: 26px;
+            line-height: 1.2;
+          }
+        }
+      }
+      &[data-size='md'] {
+        .as-input {
+          font-weight: ${miscTheme.theme.sizes.fwRegular};
+          line-height: 22px;
+          ${utils.MediaQueries.mbDown} {
+            font-size: 14px;
+            line-height: 1.2;
+          }
+
+          ${utils.MediaQueries.mbUp} {
+            font-size: 16px;
+            line-height: 1.2;
+          }
+        }
+      }
+      &[data-size='sm'] {
+        .as-input {
+          font-weight: ${miscTheme.theme.sizes.fwRegular};
+          line-height: 20px;
+          ${utils.MediaQueries.mbDown} {
+            font-size: 13px;
+            line-height: 1.5;
+          }
+
+          ${utils.MediaQueries.mbUp} {
+            font-size: 13px;
+            line-height: 1.5;
+          }
+        }
+      }
+    }
+    .images-input-label {
+      height: 100%;
+      cursor: pointer;
+      .icon-images-input {
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+      }
+    }
+    .send-button {
+      display: flex;
+      width: 40px;
+      height: 40px;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      border: none;
+      &.send-button-post {
+        background: ${miscTheme.theme.colors.neutral100};
+        border-radius: 50%;
+      }
+      .icon-enter {
+        width: 20px;
+        height: 20px;
+        vertical-align: middle;
+      }
+      &[data-is-loading='true'] {
+        > div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  .preview-images-container {
+    margin-top: 1rem;
+    .image-src-wrapper {
+      position: relative;
+      width: 100%;
+      padding-top: 66.67%;
+      &:not(:last-child) {
+        margin-bottom: 1rem;
+      }
+      .preview-image {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .icon-close-circle {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+      }
+    }
+  }
+`;
+
+const MainInputTriggerContext = React.createContext({});
+
+var img$3 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3e%3ccircle cx='8' cy='8.5' r='6.667' fill='white' stroke='%23404040'/%3e%3cpath stroke='%23404040' stroke-linecap='round' stroke-linejoin='round' d='m10 6.5-4 4M6 6.5l4 4'/%3e%3c/svg%3e";
+var IconCloseCircleLine = img$3;
+
+var img$2 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' fill='none'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m7.5 9.734-3.75 3.75 3.75 3.75'/%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16.25 4.734v5.569c0 .843-.33 1.653-.915 2.25a3.1 3.1 0 0 1-2.21.931H3.75'/%3e%3c/svg%3e";
+var IconEnter = img$2;
+
+var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath stroke='%232D87F3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M10.754 4.854H4.492a1.79 1.79 0 0 0-1.789 1.789v12.524a1.79 1.79 0 0 0 1.79 1.789h12.523a1.79 1.79 0 0 0 1.79-1.79v-6.261'/%3e%3cpath stroke='%232D87F3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M17.463 3.512a1.898 1.898 0 0 1 2.684 2.684l-8.498 8.498-3.579.895.895-3.579z'/%3e%3c/svg%3e";
+var IconTabEditPrimary = img$1;
+
+const getCommentFormBody = ({ postId, message, photos, link, locale, sanitizeFunction, replyingUserId, replyingUserName, replyingId, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    let submitText = post.encodePostContent(message.replace(/(\ )+/g, ' '), sanitizeFunction);
+    const mentionIds = post.getMentionIdsFromString(submitText);
+    if (photos && photos.length > 0) {
+        const imageSrcs = yield Promise.all(photos === null || photos === void 0 ? void 0 : photos.map((file) => post.uploadAndGetSrc(file, locale)));
+        imageSrcs
+            .filter(Boolean)
+            .slice(0, constants.MAX_IMAGE_UPLOADS)
+            .forEach((photo) => {
+            formData.append('images[]', photo);
+        });
+    }
+    if (link)
+        formData.append('link', link);
+    mentionIds === null || mentionIds === void 0 ? void 0 : mentionIds.forEach((mentionId) => {
+        formData.append(`mention_ids[]`, mentionId);
+    });
+    formData.append('post_id', postId);
+    replyingId && formData.append('parent_id', replyingId);
+    if (replyingUserId) {
+        mentionIds.unshift(replyingUserId);
+        submitText = `[mention+id="${replyingUserId}"+name="${(replyingUserName || '').replace('"', "'")}"]${submitText}`;
+        formData.append('parent_user_id', String(replyingUserId));
+    }
+    formData.append('content', submitText);
+    formData.append('content', submitText);
+    return formData;
+});
+const submitComment = (formData, locale) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.COMMENT.CREATE, {
+        _locale: locale,
+    }), 'POST', {
+        data: formData,
+    });
+});
+const decodeCommentBody = (s) => {
+    try {
+        const authorRegex = s.match(/\[@([^\]]+)\]/);
+        const replyingTo = authorRegex
+            ? authorRegex[0].replace('[@', '').replace(']', '')
+            : '';
+        const text = s.replace(/\[@([^\]]+)\]/, '');
+        return {
+            text: text.trim(),
+            replyingTo,
+        };
+    }
+    catch (e) { }
+    return {
+        text: '',
+    };
+};
+const submitReply = (formData, locale) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.COMMENT.REPLY, {
+        _locale: locale,
+    }), 'POST', {
+        data: formData,
+    });
+});
+const likeUnlikeComment = ({ commentId, setLike = false, locale, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(setLike ? togetherApiPaths.PATHS.COMMENT.LIKE : togetherApiPaths.PATHS.COMMENT.UNLIKE, {
+        _locale: locale,
+        id: commentId,
+    }), 'GET');
+});
+const deleteComment = ({ id, locale, }) => {
+    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.COMMENT.DELETE, {
+        _locale: locale,
+        id: id,
+    }), 'DELETE');
+};
+
+const InputCommentBar = ({ isReply, className, onClose, replyToName, style, replyingId, replyingUser, onPostSuccess, post, isMarryBaby: isMarryBabyProp, }) => {
+    const { action: { pushNotifications, sanitizeFunction }, data: { userInfo, locale, env: { isMarryBaby: isMarryBabyContext }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
+    const { t } = useTranslations.useTranslations();
+    const { onSelectImages, onRemoveImage, imageSrcs, onRemoveAllImages, imageFiles, } = useImagePicker();
+    const [text, setText] = React.useState('');
+    const { trigger } = React.useContext(MainInputTriggerContext);
+    const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
+    const imagePicker = React.useRef(null);
+    const contentEditable = React.useRef(null);
+    const mainInput = React.useRef(null);
+    const [invalidUrls, setInvalidUrls] = React.useState([]);
+    const [bannedWords, setBannedWords] = React.useState([]);
+    const [previewUrl, setPreviewUrl] = React.useState(null);
+    const onSubmitComment = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (!(post === null || post === void 0 ? void 0 : post.id) || isSubmitLoading)
+            return;
+        setIsSubmitLoading(true);
+        try {
+            const handleSuccess = (res) => {
+                setText('');
+                onRemoveAllImages();
+                onClose && onClose();
+                const newComment = dataTransform.formatComment(res.data);
+                if (typeof newComment.images === 'string') {
+                    newComment.images = JSON.parse(newComment.images);
+                }
+                onPostSuccess && onPostSuccess(newComment);
+            };
+            const formBody = yield getCommentFormBody(Object.assign({ message: text, photos: imageFiles, postId: String(post.id), link: previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url, sanitizeFunction,
+                locale }, (isReply && replyingId
+                ? {
+                    replyingUserId: String((replyingUser === null || replyingUser === void 0 ? void 0 : replyingUser.id) || ((_a = post === null || post === void 0 ? void 0 : post.author) === null || _a === void 0 ? void 0 : _a.id) || ''),
+                    replyingId,
+                    replyingUserName: (replyingUser === null || replyingUser === void 0 ? void 0 : replyingUser.name) || (replyingUser === null || replyingUser === void 0 ? void 0 : replyingUser.username) || '',
+                }
+                : {})));
+            const res = yield (isReply && replyingId
+                ? submitReply(formBody, locale)
+                : submitComment(formBody, locale));
+            const resData = res === null || res === void 0 ? void 0 : res.data;
+            if ((resData === null || resData === void 0 ? void 0 : resData.id) && !((_c = (_b = res === null || res === void 0 ? void 0 : res.messages) === null || _b === void 0 ? void 0 : _b.moderation) === null || _c === void 0 ? void 0 : _c.type)) {
+                handleSuccess(res);
+            }
+            else {
+                if (((_e = (_d = res === null || res === void 0 ? void 0 : res.messages) === null || _d === void 0 ? void 0 : _d.moderation) === null || _e === void 0 ? void 0 : _e.type) === 'banned') {
+                    pushNotifications({
+                        title: t('notification.comment.blocked.title'),
+                        message: t('notification.comment.blocked.message'),
+                        type: 'danger',
+                    });
+                    if (res.messages.moderation.words) {
+                        setBannedWords(res.messages.moderation.words);
+                    }
+                }
+                else if (((_g = (_f = res === null || res === void 0 ? void 0 : res.messages) === null || _f === void 0 ? void 0 : _f.moderation) === null || _g === void 0 ? void 0 : _g.type) === 'suspect') {
+                    pushNotifications({
+                        title: t('notification.comment.suspect.title'),
+                        message: t('notification.comment.suspect.message'),
+                        type: 'warning',
+                    });
+                    setText('');
+                    onRemoveAllImages();
+                    onClose && onClose();
+                }
+                else if ((_h = res === null || res === void 0 ? void 0 : res.messages) === null || _h === void 0 ? void 0 : _h.find((m) => { var _a; return !!((_a = m === null || m === void 0 ? void 0 : m.includes) === null || _a === void 0 ? void 0 : _a.call(m, 'suspend')); })) {
+                    pushNotifications({
+                        message: t('notification.suspend.message'),
+                        type: 'warning',
+                    });
+                    setText('');
+                    onRemoveAllImages();
+                    onClose && onClose();
+                }
+                else {
+                    pushNotifications({
+                        title: '',
+                        message: ((_j = res === null || res === void 0 ? void 0 : res.messages) === null || _j === void 0 ? void 0 : _j[0]) || t('notification.comment.somethingWrong'),
+                        type: 'danger',
+                    });
+                }
+            }
+        }
+        catch (e) {
+            pushNotifications({
+                title: '',
+                message: t('notification.comment.somethingWrong'),
+                type: 'danger',
+            });
+        }
+        setIsSubmitLoading(false);
+    });
+    React.useEffect(() => {
+        var _a;
+        (_a = mainInput.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+        });
+        setTimeout(() => {
+            var _a;
+            (_a = contentEditable.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 400);
+    }, [trigger]);
+    return (React__default["default"].createElement(StyledInputCommentBar, { "data-is-reply": isReply, className: className, style: style },
+        isReply && (React__default["default"].createElement("div", { className: "reply-to-container" },
+            React__default["default"].createElement(index$2.Text, { size: "p4" },
+                React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
+                        __html: t('inputComment.replyTo', {
+                            name: `<span style="color: #2D87F3; cursor: pointer">@${replyToName || ''}</span>`,
+                        }),
+                    } })),
+            React__default["default"].createElement("img", { src: IconCloseCircleLine, className: "icon-close-comment", onClick: () => onClose && onClose(), loading: "lazy" }))),
+        React__default["default"].createElement("div", { className: "input-container", ref: mainInput },
+            React__default["default"].createElement(index$4.UserAvatar, { className: `avatar-wrapper ${isReply ? 'avatar-wrapper-reply' : ''}`, avatar: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? userInfo.avatar : constants.DEFAULT_AVATAR_IMG, username: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username) }),
+            React__default["default"].createElement("input", { ref: imagePicker, onChange: onSelectImages, type: "file", multiple: true, accept: "image/png,image/jpeg", name: "images", style: { display: 'none' } }),
+            React__default["default"].createElement(index$5.Input
+            // actionIcon={
+            //   !isPost ? (
+            //     <label className="images-input-label">
+            //       <img
+            //         className="icon-images-input"
+            //         src="./svg/icon-image-input.svg"
+            //       />
+            //       <input
+            //         onChange={onSelectImages}
+            //         type="file"
+            //         multiple
+            //         accept="image/png,image/jpeg"
+            //         name="images"
+            //         style={{ display: 'none' }}
+            //       />
+            //     </label>
+            //   ) : undefined
+            // }
+            , { 
+                // actionIcon={
+                //   !isPost ? (
+                //     <label className="images-input-label">
+                //       <img
+                //         className="icon-images-input"
+                //         src="./svg/icon-image-input.svg"
+                //       />
+                //       <input
+                //         onChange={onSelectImages}
+                //         type="file"
+                //         multiple
+                //         accept="image/png,image/jpeg"
+                //         name="images"
+                //         style={{ display: 'none' }}
+                //       />
+                //     </label>
+                //   ) : undefined
+                // }
+                value: text, name: "input", size: "md", className: "input-wrapper", displayIcon: React__default["default"].createElement("img", { src: IconTabEditPrimary, loading: "lazy" }), CustomInput: React__default["default"].createElement("div", { className: "as-input" },
+                    React__default["default"].createElement(togetherRichTextEditor.RichTextEditor, { className: "textarea", html: text, onChange: setText, onImagePickerClick: () => { var _a; return (_a = imagePicker.current) === null || _a === void 0 ? void 0 : _a.click(); }, bannedWords: bannedWords, onPreviewUrlChange: setPreviewUrl, onInvalidUrlsChange: setInvalidUrls, setEditorRef: (div) => (contentEditable.current = div), isReplying: isReply })) }),
+            React__default["default"].createElement(index$3.Button, { theme: isMarryBaby ? 'marryBaby' : 'helloSites', className: "send-button", size: "sm", onClick: onSubmitComment, isLoading: isSubmitLoading, isDisabled: !!(invalidUrls === null || invalidUrls === void 0 ? void 0 : invalidUrls.length) ||
+                    isSubmitLoading ||
+                    !text ||
+                    (text === null || text === void 0 ? void 0 : text.length) < 2 ||
+                    !text.trim() },
+                React__default["default"].createElement("img", { src: IconEnter, className: "icon-enter", loading: "lazy" }))),
+        !!(invalidUrls === null || invalidUrls === void 0 ? void 0 : invalidUrls.length) ? (React__default["default"].createElement("div", { className: "error-text" }, t('notification.limitUrlDomain'))) : null,
+        (!imageSrcs || imageSrcs.length === 0) && previewUrl && (React__default["default"].createElement("div", { className: "link-preview-wrapper" }, previewUrl.isFetching ? (React__default["default"].createElement(togetherMoleculesCardAuthor.Loading, null)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(index$6.CardLink, { title: previewUrl.title, url: previewUrl.url || '#', image: previewUrl.image, noRefetch: true }),
+            React__default["default"].createElement("img", { src: IconCloseCircle, className: "icon-close", onClick: () => setPreviewUrl(null), loading: "lazy" }))))),
+        imageSrcs && imageSrcs.length > 0 && (React__default["default"].createElement("div", { className: "preview-images-container" }, imageSrcs.map((src, index) => (React__default["default"].createElement("div", { key: index, className: "image-src-wrapper" },
+            React__default["default"].createElement("img", { className: "preview-image", src: src, loading: "lazy" }),
+            React__default["default"].createElement("img", { src: IconCloseCircle, className: "icon-close-circle", onClick: () => onRemoveImage(index), loading: "lazy" }))))))));
+};
+
+const SharePopup = ({ trackingCategory, className, style, url, avatar, text, onClose, }) => {
+    const { data: { env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { t } = useTranslations.useTranslations();
+    const [isOpen, setIsOpen] = React.useState(false);
+    React.useEffect(() => {
+        utils.toggleNoScroll(true);
+        setTimeout(() => setIsOpen(true), 0);
+        return () => utils.toggleNoScroll(false);
+    }, []);
+    return (React__default["default"].createElement(core.Portal, null,
+        React__default["default"].createElement(StyledSharePopup, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
+            React__default["default"].createElement(PopupFrame, { className: "share-popup", isOpen: isOpen, onClose: onClose, heading: t('bottomBar.share') },
+                isMarryBaby ? (React__default["default"].createElement(index$2.Text, { className: "share-mb-text", size: "sm" }, t('article.shareOn'))) : (React__default["default"].createElement("div", { className: "custom-share__header" },
+                    avatar && (React__default["default"].createElement("div", { className: "custom-share__header-image" },
+                        React__default["default"].createElement("img", { src: avatar, loading: "lazy" }))),
+                    React__default["default"].createElement("div", { className: "custom-share__header-info" },
+                        React__default["default"].createElement(index$1.Heading, { tag: "h4" }, text),
+                        React__default["default"].createElement(index$2.Text, { className: "desc", size: "md" }, url)))),
+                isOpen && (React__default["default"].createElement(togetherShareBox.ShareBox, { trackingCategory: trackingCategory, shareUrl: url ||
+                        (typeof window !== 'undefined' ? window.location.href : ''), title: text }))))));
+};
+const StyledSharePopup = styled__default["default"].div `
+  .share-popup {
+    > div:first-child {
+      height: unset;
+    }
+    .close-button {
+      display: none;
+    }
+    .popup-content .header {
+      display: none;
+    }
+  }
+  .custom-share__header {
+    display: flex;
+    flex-wrap: no-wrap;
+    align-items: center;
+    padding: 1rem;
+    border-bottom: 1px solid ${miscTheme.theme.colors.neutral100};
+    margin-bottom: 16px;
+
+    .custom-share__header-image {
+      width: 38px;
+      height: 38px;
+      flex-shrink: 0;
+      & > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+      }
+    }
+
+    .custom-share__header-info {
+      flex: 1;
+      padding: 0 8px;
+      word-break: break-word;
+
+      [data-tag='h4'] {
+        margin-bottom: 8px;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 14px;
+      }
+
+      [data-size='md'] {
+        color: #a5a5a5;
+        font-size: 14px;
+        line-height: 14px;
+      }
+    }
+  }
+
+  &[data-is-marrybaby='true'] {
+    .share-popup {
+      > div:first-child {
+        overflow: hidden;
+        border-radius: 1rem;
+        &[data-open='true'] {
+          ${utils.MediaQueries.mbDown} {
+            max-width: unset;
+            width: 100%;
+            top: 100%;
+            transform: translate(-50%, -100%);
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        }
+      }
+      .close-button {
+        display: block;
+      }
+      .popup-content {
+        .header {
+          display: block;
+          padding: 1rem;
+          background-color: rgb(243, 243, 243);
+        }
+        .content {
+          padding-bottom: 1rem;
+        }
+      }
+      .share-mb-text {
+        margin: 1rem 1rem 0.5rem;
+      }
+    }
+  }
+`;
+
+const StyledSubmitReportForm = styled__default["default"].div `
+  padding: 0 8px;
+  margin-top: 18px;
+
+  .report-list {
+    margin-bottom: 18px;
+
+    .report-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      font-weight: 600;
+
+      & > img {
+        width: 12px;
+        height: 12px;
+        margin-right: 8px;
+      }
+
+      .__label {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .report-submit {
+    width: 100%;
+  }
+  &[data-is-marrybaby='true'] {
+    padding: 0 1rem 1rem;
+  }
+`;
+
+var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12M8 5v3M8 11h.007'/%3e%3c/svg%3e";
+var IconAlertCircle = img;
+
+const SubmitReportForm = ({ className, style, reason, reasonText, onClose, postId, }) => {
+    const { data: { locale, env: { isMarryBaby }, }, action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { t } = useTranslations.useTranslations();
+    const [loading, setLoading] = React.useState(false);
+    return (React__default["default"].createElement(StyledSubmitReportForm, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
+        React__default["default"].createElement("ul", { className: "report-list" },
+            React__default["default"].createElement("li", { className: "report-item" },
+                React__default["default"].createElement("img", { src: IconAlertCircle, loading: "lazy" }),
+                React__default["default"].createElement(index$2.Text, { className: "__label", color: miscTheme.theme.colors.gray800, size: "p4" }, reasonText))),
+        React__default["default"].createElement(index$3.Button, { theme: isMarryBaby ? 'marryBaby' : 'helloSites', className: "report-submit", size: "lg", color: "primary", isLoading: loading, onClick: () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+                if (!postId || loading)
+                    return;
+                setLoading(true);
+                try {
+                    const res = yield reportPost({
+                        id: postId,
+                        reason,
+                        locale,
+                    });
+                    if ((res === null || res === void 0 ? void 0 : res.status) === 1) {
+                        pushNotifications({
+                            message: 'Post reported',
+                            type: 'success',
+                        });
+                        onClose && onClose();
+                    }
+                }
+                catch (_a) { }
+                setLoading(false);
+            }) }, t('submit'))));
+};
+
+const StyledSocialLinkPreview = styled__default["default"].div `
+  .link-info-container {
+    padding: 0.5rem 1rem;
+    background: ${(props) => props.color || '#f4faff'};
+  }
+  .link-image-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 56.25%;
+    &.fetching {
+      background: lightgray;
+    }
+    .loading-spinner {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .link-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+  a {
+    text-decoration: none;
+  }
+  &[data-is-marrybaby='true'] {
+    overflow: hidden;
+    border-radius: 1rem;
+  }
+`;
+
+const SocialLinkPreview = ({ url, image, className, style, baseUrl = '', autoPlay = true, }) => {
+    const { data: { locale }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [previewData, setPreviewData] = React.useState(null);
+    React.useEffect(() => {
+        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            if (image)
+                return;
+            if (!url)
+                return setPreviewData(null);
+            setPreviewData((_data) => (Object.assign(Object.assign({}, _data), { isFetching: true })));
+            // fetch('./api/fetch-meta?url=' + encodeURIComponent(url))
+            //   .then((res) => res.json())
+            //   .then((res) =>
+            //     setPreviewData({
+            //       url,
+            //       image: res?.image || res?.logo,
+            //     }),
+            //   )
+            togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.FETCH_PREVIEW, {
+                _locale: locale,
+            }, undefined, baseUrl), 'POST', {
+                data: {
+                    link: url,
+                },
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }, !!baseUrl)
+                .then((res) => {
+                var _a, _b;
+                setPreviewData({
+                    url,
+                    image: ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.image) || ((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.logo),
+                });
+            })
+                .catch(() => {
+                setPreviewData(null);
+            });
+        }))();
+    }, [url, image]);
+    const displayImage = image || (previewData === null || previewData === void 0 ? void 0 : previewData.image);
+    const displayUrl = (previewData === null || previewData === void 0 ? void 0 : previewData.url) || url;
+    const youtubeVidId = React.useMemo(() => {
+        return post.youtubeVidIdGetter(displayUrl);
+    }, [displayUrl]);
+    const facebookVidId = React.useMemo(() => {
+        return (displayUrl.includes('facebook.com') || displayUrl.includes('fb.watch'));
+    }, [displayUrl]);
+    const responsiveWidth = React.useRef(0);
+    const responsiveHeight = React.useRef(0);
+    const [forceRerenderFB, setForceRerenderFB] = React.useState(false);
+    // FACEBOOK Video is not responsive for desktop browser
+    // => hack: set size to same as container, if size change too large, re-render facebook iframe with new config
+    React.useEffect(() => {
+        const handleResize = () => {
+            var _a;
+            const containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            let toChangeSize = false;
+            if (containerRect &&
+                (!responsiveWidth.current ||
+                    Math.abs((responsiveWidth.current - containerRect.width) /
+                        (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width)) > 0.2)) {
+                responsiveWidth.current = Math.floor(containerRect.width);
+                toChangeSize = true;
+            }
+            if (containerRect &&
+                (!responsiveHeight.current ||
+                    Math.abs((responsiveHeight.current - containerRect.height) /
+                        (containerRect === null || containerRect === void 0 ? void 0 : containerRect.height)) > 0.2)) {
+                responsiveHeight.current = Math.floor(containerRect.height);
+                toChangeSize = true;
+            }
+            if (toChangeSize) {
+                setForceRerenderFB((v) => !v);
+            }
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize, {
+            passive: true,
+        });
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    const containerRef = React.useRef(null);
+    const _theme = core.useMantineTheme();
+    return (React__default["default"].createElement(StyledSocialLinkPreview, { className: `${className} no-replace-click`, style: style, ref: containerRef, color: _theme.colors[_theme.primaryColor][0] }, !image && (youtubeVidId || facebookVidId) ? (React__default["default"].createElement("div", { className: "link-image-wrapper" }, youtubeVidId ? (React__default["default"].createElement("iframe", { width: "100%", height: "100%", src: `https://www.youtube.com/embed/${youtubeVidId}?&autoplay=${autoPlay ? 1 : 0}&mute=1&enablejsapi=1`, frameBorder: "0", allowFullScreen: true, style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            border: 'none',
+            overflow: 'hidden',
+        }, loading: "lazy" })) : facebookVidId ? (React__default["default"].createElement("iframe", { key: String(forceRerenderFB), src: `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(displayUrl)}&autoplay=${autoPlay ? 1 : 0}&show_text=false&t=0&width=${responsiveWidth.current}&height=${responsiveHeight.current}`, style: {
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            border: 'none',
+            overflow: 'hidden',
+            height: responsiveHeight.current,
+            width: responsiveWidth.current,
+            transform: 'translate(-50%, -50%)',
+        }, scrolling: "no", frameBorder: "0", allowFullScreen: true, allow: "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share", loading: "lazy" })) : null)) : (React__default["default"].createElement("a", { href: displayUrl, target: "_blank", rel: "noreferrer" },
+        React__default["default"].createElement("div", { className: `link-image-wrapper ${(previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? 'fetching' : ''}` }, (previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? (React__default["default"].createElement(togetherMoleculesCardAuthor.Loading, { className: "loading-spinner" })) : (React__default["default"].createElement(index$7.ImageWrap, { className: "link-image", src: displayImage || constants.DEFAULT_IMG, backupSrc: constants.DEFAULT_IMG, alt: displayUrl })))))));
+};
+
+exports.IconAlertCircle = IconAlertCircle;
+exports.IconCloseCircle = IconCloseCircle;
+exports.InputCommentBar = InputCommentBar;
+exports.PopupDanger = PopupDanger;
+exports.PopupFrame = PopupFrame;
+exports.SharePopup = SharePopup;
+exports.SocialLinkPreview = SocialLinkPreview;
+exports.SubmitReportForm = SubmitReportForm;
+exports.createPost = createPost;
+exports.decodeCommentBody = decodeCommentBody;
+exports.deleteComment = deleteComment;
+exports.deletePost = deletePost;
+exports.editPost = editPost;
+exports.getDefaultFailNoti = getDefaultFailNoti;
+exports.getPostFormData = getPostFormData;
+exports.likeUnlikeComment = likeUnlikeComment;
+exports.likeUnlikePost = likeUnlikePost;
+exports.useImagePicker = useImagePicker;