@hhgtech/hhg-components 1.29.333 → 1.29.334-beta-1

package/build/esm/index-100c4958.js

@@ -1,1533 +0,0 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-def230bb.js';
-import React__default, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react';
-import { Info, Ask } from '@hhgtech/icons/other';
-import { D as Dropdown } from './index-5ba7486e.js';
-import { u as useTranslations } from './index-6bc456cf.js';
-import innertext from 'innertext';
-import { theme } from './miscTheme.js';
-import { I as Input$1 } from './index-2c159ce6.js';
-import { useMantineTheme, Popover } from '@mantine/core';
-import '@mantine/dates';
-import './index-a8fdbadd.js';
-import './index-473c065f.js';
-import './index-1cbb3836.js';
-import './useMantineLocale-48a69368.js';
-import { T as Text } from './index-62b03b97.js';
-import { B as Button } from './index-21c2869e.js';
-import './index.styles-5544d7fb.js';
-import '@mantine/hooks';
-import { M as MediaQueries } from './utils-0b42a109.js';
-import './other-89315ca8.js';
-import './index-032bb6df.js';
-import { u as useImagePicker, a as PopupFrame, d as IconCloseCircle, g as getDefaultFailNoti, e as getPostFormData, f as editPost, h as createPost } from './index-05521115.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath, p as getCurrentHref, b as callApiWithAuth } from './utils-827b08e1.js';
-import styled from '@emotion/styled';
-import { b as formatPost, c as formatTopic } from './dataTransform-218076f9.js';
-import { M as MAX_IMAGE_UPLOADS } from './constants-bda7ecff.js';
-import { h as highlightBadWords, f as fixMalformedMention, r as removeFontFormat, a as removeEdittedBannedWord, w as wrapAnchorAroundUrls, g as getUrlsFromEditorString, A as ALLOW_DOMAIN_URL, e as escapeRegExp, d as decodeMention, b as decodePostUrl } from './post-88860f5c.js';
-import { C as CardAuthor, L as Loading$1 } from './index-dcc72453.js';
-import { S as StyledCreatePostDescription, R as RichTextEditor } from './editor-9e02f4c0.js';
-import { I as Input } from './index-666bc3cf.js';
-import debounce from 'lodash/debounce';
-import ContentEditable from 'react-contenteditable';
-import { PATHS } from './togetherApiPaths.js';
-import { L as Loading } from './index-253d88a3.js';
-import { C as CardLink } from './index-8706be0b.js';
-import { B as BtnChoice } from './index-bc16a3c1.js';
-import { L as LOCALE } from './Locale-b3720cb4.js';
-import { Close, Check } from '@hhgtech/icons/core';
-
-const StyledCreateNewPost = styled.div `
-  position: relative;
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  padding: 16px 24px;
-
-  ${MediaQueries.mbDown} {
-    padding: 16px 16px;
-  }
-
-  .input-group-container {
-    flex: 1;
-    padding-right: 2px;
-    padding-left: 2px;
-    margin-bottom: 24px;
-    -ms-overflow-style: none; /* IE and Edge */
-    overflow-y: auto;
-    scrollbar-width: none; /* Firefox */
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .input-group {
-    :not(:last-child) {
-      margin-bottom: 0.6rem;
-    }
-
-    input:focus,
-    textarea:focus,
-    [contenteditable='true'] {
-      outline: none;
-    }
-
-    label {
-      margin-bottom: 5px;
-      color: ${theme.colors.gray600};
-      /* font-family: 'Open Sans', sans-serif; */
-      font-size: 13px;
-      font-weight: bold;
-    }
-
-    .input-group-label {
-      margin-bottom: 5px;
-      color: ${theme.colors.gray600};
-      /* font-family: 'Open Sans', sans-serif; */
-      font-size: 13px;
-      font-weight: bold;
-    }
-
-    .input-notification {
-      display: flex;
-
-      & > img {
-        width: 16px;
-        height: 16px;
-        margin-top: 1.5px;
-        margin-right: 8px;
-      }
-    }
-
-    .tag-list {
-    }
-  }
-
-  .warning {
-    margin-top: 16px;
-  }
-
-  .submit-btn {
-    width: 100%;
-  }
-
-  .switch-label {
-    display: flex;
-    align-items: center;
-  }
-
-  .swich-input-group {
-    padding: 12px 16px;
-    border-radius: 8px;
-    background: ${theme.colors.neutral50};
-
-    &.askdoctor-switch {
-      background: ${theme.colors.primary50};
-      &.mb-color {
-        background: ${theme.mbColors.tonePink};
-      }
-    }
-
-    .mantine-Switch-labelWrapper {
-      flex-grow: 1;
-    }
-    .mantine-Checkbox-body {
-      display: flex;
-      width: 100%;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .mantine-Switch-track {
-      margin-bottom: 0;
-    }
-    .label-txt {
-      font-weight: normal;
-      font-size: 14px;
-      color: ${theme.colors.gray800};
-      margin-left: 10px;
-    }
-  }
-`;
-const StyledIsQuestion = styled.div `
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border-radius: 0 0 8px 8px;
-  background: ${theme.colors.neutral50};
-  border: 1px solid ${theme.colors.gray200};
-  gap: 12px;
-
-  &.has-error {
-    border: 1px solid ${theme.colors.red600};
-  }
-  &.error-description {
-    border: 1px solid ${theme.colors.red600};
-    border-top: none;
-  }
-
-  &[data-is-marry-baby='true'] {
-    background: ${theme.mbColors.tonePink};
-  }
-
-  .switch-label {
-    display: flex;
-    gap: 4px;
-    align-items: flex-start;
-
-    svg {
-      margin-top: 2px;
-    }
-
-    .wrapper-text {
-      .label-txt {
-        color: ${theme.colors.gray800};
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 22px;
-      }
-      .description-txt {
-        color: ${theme.colors.gray700};
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 18px;
-      }
-    }
-  }
-
-  button {
-    height: 40px;
-    &:hover,
-    &.primary {
-      border-radius: 16px;
-      border: 1px solid ${theme.colors.blue100};
-      background: ${theme.colors.blue50};
-      color: ${theme.colors.primaryBase};
-    }
-  }
-`;
-const StyledError = styled.div `
-  margin-bottom: 12px;
-  color: ${theme.colors.red700};
-  svg {
-    margin-right: 5px;
-  }
-  svg,
-  span {
-    vertical-align: middle;
-  }
-`;
-const StyledFormGroupInner = styled.div `
-  .swich-input-group {
-    padding: 12px 16px;
-    border-radius: 8px;
-    background: ${theme.colors.neutral50};
-
-    &.askdoctor-switch {
-      background: ${theme.colors.blue50};
-    }
-
-    .switch-label {
-      display: flex;
-      align-items: center;
-    }
-    .mantine-Switch-labelWrapper {
-      flex-grow: 1;
-    }
-    .mantine-Checkbox-body {
-      display: flex;
-      width: 100%;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .mantine-Switch-track {
-      margin-bottom: 0;
-    }
-    .label-txt {
-      font-weight: normal;
-      font-size: 14px;
-      color: ${theme.colors.gray800};
-      margin-left: 14px;
-    }
-  }
-`;
-const StylePostAction = styled.div `
-  display: flex;
-  gap: 12px;
-  .avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 100%;
-
-    img {
-      border-radius: 100%;
-    }
-
-    .author-avatar {
-      .col-left {
-        display: none;
-      }
-    }
-  }
-
-  .post-action-form {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .post-action-by {
-    color: ${theme.colors.gray800};
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 24px;
-  }
-
-  .post-action-result {
-    display: flex;
-    position: relative;
-    &:after {
-      content: '';
-      display: inline-block;
-      width: 5px;
-      height: 5px;
-      background-color: ${theme.colors.error};
-      border-radius: 100%;
-      position: absolute;
-      right: 7px;
-    }
-  }
-
-  .dropdown-post-action {
-    background: ${theme.colors.white} !important;
-    border-radius: 2px;
-    border: 1px solid ${theme.colors.neutral200} !important;
-
-    > div {
-      padding: 3px 8px;
-    }
-
-    span {
-      flex: 1;
-      color: ${theme.colors.gray600};
-      font-size: 12px;
-      font-weight: 600;
-      line-height: 18px;
-    }
-
-    ul {
-      width: 130px;
-      li {
-        img {
-          flex: 0 0 16px;
-          width: 16px;
-        }
-      }
-    }
-  }
-`;
-const StyleSessionRow = styled.div `
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  cursor: pointer;
-
-  .session-title {
-    color: ${theme.colors.gray700};
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    flex: 1;
-  }
-`;
-
-var img$5 = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.61638 3.56867C4.84773 2.87459 5.49727 2.40642 6.2289 2.40642C6.67971 2.40642 7.11204 2.58549 7.43084 2.90429L8.0013 3.47475L8.57177 2.90429C8.89056 2.58549 9.32289 2.40642 9.7737 2.40642C10.5053 2.40642 11.1549 2.8746 11.3862 3.56868L12.3331 6.40934H3.66948L4.61638 3.56867ZM15.3346 6.40934H13.4644L12.4043 3.22931C12.0269 2.09701 10.9673 1.33325 9.7737 1.33325C9.12365 1.33325 8.49715 1.56149 8.0013 1.97363C7.50546 1.56149 6.87895 1.33325 6.2289 1.33325C5.03534 1.33325 3.9757 2.09702 3.59828 3.22931L2.53825 6.40934H0.667969V6.94592C0.667969 8.17681 1.6658 9.17465 2.89669 9.17465H13.1059C14.3368 9.17465 15.3346 8.17681 15.3346 6.94592V6.40934ZM2.89669 8.10148C2.45219 8.10148 2.0663 7.85049 1.87301 7.48251H14.1296C13.9363 7.85049 13.5504 8.10148 13.1059 8.10148H2.89669ZM5.0398 13.178C4.17021 13.178 3.46467 12.4742 3.46252 11.6046L3.46239 11.5528C4.48802 11.2233 5.59156 11.2232 6.61724 11.5526L6.61704 11.6065C6.61386 12.4753 5.90864 13.178 5.0398 13.178ZM7.25616 10.6398C5.82875 10.0967 4.25135 10.0966 2.82397 10.6398L1.6558 10.6397L1.65577 11.7129L2.39168 11.7129C2.45056 13.1251 3.61394 14.2511 5.0398 14.2511C6.46547 14.2511 7.62898 13.1253 7.68788 11.7129H8.31416C8.37305 13.1251 9.53643 14.2511 10.9623 14.2511C12.388 14.2511 13.5515 13.1253 13.6104 11.7129L14.3468 11.7129L14.3468 10.6397L13.1786 10.6398C11.7512 10.0966 10.1738 10.0966 8.74644 10.6398H7.25616ZM10.9623 13.178C10.0927 13.178 9.38716 12.4742 9.385 11.6046L9.38487 11.5528C10.4105 11.2233 11.514 11.2232 12.5397 11.5526L12.5395 11.6065C12.5363 12.4753 11.8311 13.178 10.9623 13.178Z' fill='%23404040'/%3e%3c/svg%3e";
-var IconAnonymous = img$5;
-
-var img$4 = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.67419 2.06156C4.13645 2.62563 2.1956 4.77487 1.94427 7.41667H4.77719C4.91981 5.4892 5.5776 3.64052 6.67419 2.06156ZM9.32581 2.06156C10.4224 3.64052 11.0802 5.4892 11.2228 7.41667H14.0557C13.8044 4.77487 11.8636 2.62563 9.32581 2.06156ZM10.0526 7.41667C9.89538 5.52352 9.18073 3.71931 8 2.23244C6.81927 3.71931 6.10463 5.52352 5.94744 7.41667H10.0526ZM10.0526 8.58333C9.89547 10.4766 9.18081 12.281 8 13.7679C6.81919 12.281 6.10453 10.4766 5.94741 8.58333H10.0526ZM4.77717 8.58333H1.94427C2.19559 11.225 4.13629 13.3742 6.6739 13.9384C5.57741 12.3594 4.91971 10.5108 4.77717 8.58333ZM9.32611 13.9384C10.4226 12.3594 11.0803 10.5108 11.2228 8.58333H14.0557C13.8044 11.225 11.8637 13.3742 9.32611 13.9384ZM8 15.25C12.0041 15.25 15.25 12.0041 15.25 8C15.25 3.99594 12.0041 0.75 8 0.75C3.99594 0.75 0.75 3.99594 0.75 8C0.75 12.0041 3.99594 15.25 8 15.25Z' fill='%23404040'/%3e%3c/svg%3e";
-var IconPublic = img$4;
-
-styled.div `
-  background-color: white;
-  z-index: 1000;
-  top: 0;
-  left: 0;
-  height: 100%;
-  position: absolute;
-  width: 100%;
-
-  .drawer-header {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    padding: 12px 16px;
-    border-bottom: 1px solid ${theme.colors.gray200};
-
-    .input-group-label {
-      flex: 1;
-    }
-
-    img {
-      cursor: pointer;
-    }
-
-    p {
-      flex: 1;
-    }
-  }
-
-  .drawer-content {
-    padding: 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    overflow-y: auto;
-    height: calc(100% - 49px);
-
-    .input-field-label {
-      margin-bottom: 8px;
-    }
-
-    &.drawer-content-full-screen {
-      max-width: 680px;
-      margin: 0 auto;
-      padding: 16px 24px;
-    }
-  }
-`;
-const StyleCommunityReivew = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 8px;
-
-  .topic-review {
-    display: flex;
-    gap: 4px;
-    flex-wrap: wrap;
-  }
-
-  .community-review {
-    .tag-item {
-      background-color: ${theme.colors.neutral50};
-
-      img {
-        border-radius: 50%;
-        margin-right: 8px;
-      }
-    }
-  }
-`;
-
-var img$3 = "data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.86019 13.3957C4.98735 13.5229 5.14492 13.5865 5.33291 13.5865H13.3233L15.9771 16.2403V5.91343C15.9771 5.72546 15.9135 5.56789 15.7864 5.44072C15.6592 5.31356 15.5016 5.24998 15.3136 5.24998H14.1887V12.036L13.9507 11.798H4.66944V12.923C4.66944 13.111 4.73302 13.2686 4.86019 13.3957ZM2.01562 3.28847V12.9519L4.66944 10.298H12.0252C12.2132 10.298 12.3708 10.2345 12.4979 10.1073C12.6251 9.98014 12.6887 9.82257 12.6887 9.63459V3.28847C12.6887 3.10048 12.6251 2.94291 12.4979 2.81574C12.3708 2.68858 12.2132 2.625 12.0252 2.625H2.67909C2.49111 2.625 2.33353 2.68858 2.20637 2.81574C2.07921 2.94291 2.01562 3.10048 2.01562 3.28847Z' fill='%232D87F3'/%3e%3c/svg%3e";
-var IconCommunity = img$3;
-
-const PostCommunityReview = ({ selectedTopics, currentCommunity }) => {
-    return (React__default.createElement(StyleCommunityReivew, null,
-        React__default.createElement("div", { className: "community-review" },
-            React__default.createElement(Button, { skipHover: true, size: "md", radius: "xl", className: "tag-item", variant: "tertiary" },
-                React__default.createElement(Text, { size: "p4", as: "span", color: "inherit" }, currentCommunity.name))),
-        React__default.createElement("div", { className: "topic-review", style: { display: 'none' } }, selectedTopics.map((topic) => {
-            return (React__default.createElement(Button, { skipHover: true, size: "sm", radius: "xl", className: "tag-item", key: topic.id, variant: "tertiary" },
-                React__default.createElement(Text, { size: "p4", as: "span", color: "inherit" }, topic.name)));
-        }))));
-};
-const CreatePostCommunity = ({ communitiesList, currentCommunity, selectedTopics, forceTopics, communityValue, 
-// error,
-isFullscreen, isInEditMode, setSelectedTopics, setCommunityValue, removeKeyError, }) => {
-    const { t } = useTranslations();
-    const props = {
-        communitiesList,
-        currentCommunity,
-        selectedTopics,
-        communityValue,
-        isFullscreen,
-        isInEditMode,
-        forceTopics,
-        setSelectedTopics,
-        setCommunityValue,
-        removeKeyError,
-    };
-    console.log(props);
-    return (React__default.createElement("div", { className: "input-group" },
-        React__default.createElement(StyleSessionRow, null,
-            React__default.createElement("img", { alt: "anonymous-icon", src: IconCommunity, style: {
-                    width: '18px',
-                    height: '18px',
-                    objectFit: 'contain',
-                    marginLeft: 'auto',
-                } }),
-            React__default.createElement("div", { className: "session-title" }, t('createPost.communityAndTopic'))),
-        React__default.createElement(PostCommunityReview, { selectedTopics: selectedTopics, currentCommunity: currentCommunity })));
-};
-
-const CreatePostDescription = ({ className, style, bannedWords = [], value, onChange, onPreviewUrlChange, onInvalidUrlsChange, 
-// onImageFilesChange,
-// imageFiles: imageFilesProp,
-isReplying, footerEditor, }) => {
-    const { t } = useTranslations();
-    const [previewUrl, setPreviewUrl] = useState(null);
-    const imagePicker = useRef(null);
-    // const {
-    //   onSelectImages,
-    //   onRemoveImage,
-    //   imageSrcs,
-    //   // imageFiles,
-    // } = useImagePicker(imageFilesProp, onImageFilesChange)
-    useEffect(() => {
-        if (onPreviewUrlChange) {
-            if (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url)
-                onPreviewUrlChange({
-                    title: previewUrl.title || '',
-                    url: previewUrl.url || '',
-                    image: previewUrl.image || '',
-                    description: previewUrl.description || '',
-                });
-            else
-                onPreviewUrlChange(null);
-        }
-    }, [previewUrl]);
-    return (React__default.createElement(StyledCreatePostDescription, { className: className, style: style },
-        React__default.createElement(Text, { size: "p4", className: "description-label" }, t('createPost.popup.description')),
-        React__default.createElement("div", { className: `textarea-control` },
-            React__default.createElement("div", { className: "textarea-wrapper" },
-                React__default.createElement(RichTextEditor, { html: value || '', onChange: onChange, bannedWords: bannedWords, onImagePickerClick: () => { var _a; return (_a = imagePicker.current) === null || _a === void 0 ? void 0 : _a.click(); }, onPreviewUrlChange: setPreviewUrl, onInvalidUrlsChange: onInvalidUrlsChange, isReplying: isReplying }))),
-        footerEditor,
-        React__default.createElement(Text, { size: "p4", className: "count-string" },
-            t('character'),
-            ": ",
-            innertext(value || '').length)));
-};
-
-var img$2 = "data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.01875 14.9812C3.28125 15.2437 3.60193 15.375 3.98078 15.375H14.0192C14.398 15.375 14.7187 15.2437 14.9812 14.9812C15.2437 14.7187 15.375 14.398 15.375 14.0192V3.98078C15.375 3.60193 15.2437 3.28125 14.9812 3.01875C14.7187 2.75625 14.398 2.625 14.0192 2.625H3.98078C3.60193 2.625 3.28125 2.75625 3.01875 3.01875C2.75625 3.28125 2.625 3.60193 2.625 3.98078V14.0192C2.625 14.398 2.75625 14.7187 3.01875 14.9812ZM12.3173 12.5625H5.74041C5.60483 12.5625 5.50435 12.5009 5.43896 12.3779C5.37358 12.2548 5.38608 12.1355 5.47646 12.0202L6.65914 10.4466C6.72933 10.3563 6.81851 10.3111 6.92668 10.3111C7.03486 10.3111 7.12404 10.3538 7.19423 10.4394L8.42306 12.0144L10.2577 9.62453C10.3279 9.53414 10.4182 9.48894 10.5288 9.48894C10.6394 9.48894 10.7298 9.53414 10.8 9.62453L12.5884 12.0202C12.674 12.1355 12.6841 12.2548 12.6187 12.3779C12.5533 12.5009 12.4528 12.5625 12.3173 12.5625Z' fill='%2300B16A'/%3e%3c/svg%3e";
-var IconPhone = img$2;
-
-const CreatePostPhotos = ({ imageFiles: imageFilesInit, setImageFiles, }) => {
-    const imageRef = useRef(null);
-    const { t } = useTranslations();
-    const { onSelectImages } = useImagePicker(imageFilesInit, setImageFiles);
-    const handleClick = () => {
-        var _a;
-        (_a = imageRef === null || imageRef === void 0 ? void 0 : imageRef.current) === null || _a === void 0 ? void 0 : _a.click();
-    };
-    return (React__default.createElement("div", { className: "input-group" },
-        React__default.createElement(StyleSessionRow, { onClick: handleClick },
-            React__default.createElement("img", { alt: "anonymous-icon", src: IconPhone, style: {
-                    width: '18px',
-                    height: '18px',
-                    objectFit: 'contain',
-                    marginLeft: 'auto',
-                } }),
-            React__default.createElement("div", { className: "session-title" }, t('createPost.photos'))),
-        React__default.createElement("input", { ref: imageRef, type: "file", accept: "image/png, image/gif, image/jpeg", multiple: true, style: { display: 'none' }, onChange: (e) => onSelectImages(e) })));
-};
-
-const StyledCreatePostTitle = styled.div `
-  input:focus,
-  textarea:focus,
-  [contenteditable='true'] {
-    outline: none;
-  }
-
-  .title-input {
-    overflow: hidden;
-    width: 100%;
-    padding: 12px 16px;
-    border: solid 1px #d9d9d9;
-    border-radius: ${theme.borderRadius};
-    font-size: 16px;
-    line-height: 1.2;
-    white-space: nowrap;
-    :focus {
-      border-color: ${(props) => props.color};
-      box-shadow: 0px 0px 2px 2px ${(props) => props.colorShadow};
-    }
-    br {
-      display: none;
-    }
-    * {
-      display: inline;
-      white-space: nowrap;
-    }
-    mocka {
-      padding: 2px 6px;
-      border-radius: 1rem;
-      &[data-error='true'] {
-        background-color: #ffeeee;
-        color: red;
-        text-decoration: underline;
-        font-style: bold;
-      }
-    }
-    ol,
-    ul {
-      padding-left: 1rem;
-    }
-  }
-
-  label {
-    display: block;
-    margin-bottom: 5px;
-    color: ${theme.colors.gray600};
-    font-size: 13px;
-    font-weight: bold;
-  }
-
-  .count-string {
-    margin-top: 5px;
-    color: ${theme.colors.gray500};
-    font-size: 11px;
-    text-align: right;
-  }
-`;
-
-const TITLE_LIMIT = 120;
-const inputModify$1 = (value, opts) => {
-    if (!opts)
-        return value;
-    const { limit, bannedWords = [] } = opts;
-    const shorten = typeof limit === 'number' && limit >= 0 ? value.substring(0, limit) : value;
-    const processedValue = highlightBadWords(shorten, bannedWords);
-    return processedValue;
-};
-const CreatePostTitle = ({ className, style, bannedWords = [], value, onChange, }) => {
-    var _a;
-    const _theme = useMantineTheme();
-    const { t } = useTranslations();
-    const [titleValue, setTitleValue] = useState('');
-    const titleRef = useRef(null);
-    useEffect(() => {
-        if (titleRef.current) {
-            const pasteHandler = (e) => {
-                var _a;
-                e.preventDefault();
-                const text = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
-                document.execCommand('insertHTML', false, text);
-            };
-            const contentDiv = titleRef.current;
-            contentDiv.addEventListener('paste', pasteHandler, {
-                passive: true,
-            });
-            return () => contentDiv.removeEventListener('paste', pasteHandler);
-        }
-    }, [titleRef]);
-    const bannedString = (bannedWords === null || bannedWords === void 0 ? void 0 : bannedWords.join(',')) || '';
-    useEffect(() => {
-        var _a;
-        if (bannedString) {
-            const titleText = (_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.innerText;
-            if (titleText) {
-                const titleValueWithBanned = highlightBadWords(titleText, bannedWords);
-                if (titleValueWithBanned !== titleText) {
-                    onChange && onChange(titleValueWithBanned);
-                    setTitleValue(titleValueWithBanned);
-                }
-            }
-        }
-    }, [bannedString]);
-    const debounceInputModify = useCallback(debounce(() => {
-        if (titleRef.current) {
-            const shortenString = inputModify$1(titleRef.current.innerText, {
-                limit: TITLE_LIMIT,
-                bannedWords,
-            });
-            onChange && onChange(shortenString);
-            setTitleValue(shortenString);
-        }
-    }, 300), []);
-    useEffect(() => {
-        setTimeout(() => {
-            var _a;
-            (_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }, 500);
-    }, []);
-    return (React__default.createElement(StyledCreatePostTitle, { className: className, style: style, color: _theme.colors[_theme.primaryColor][0], colorShadow: _theme.colors[_theme.primaryColor][2] },
-        React__default.createElement(Input, { name: "title", value: value || titleValue, size: "md", label: t('createPost.title'), CustomInput: React__default.createElement(ContentEditable, { innerRef: titleRef, html: value || titleValue, onChange: () => {
-                    if (titleRef.current &&
-                        titleRef.current.innerText !== (value || titleValue)) {
-                        const initialValue = inputModify$1(titleRef.current.innerText, {
-                            bannedWords,
-                        });
-                        onChange && onChange(initialValue);
-                        setTitleValue(initialValue);
-                        debounceInputModify();
-                    }
-                }, className: "title-input" }) }),
-        React__default.createElement(Text, { size: "p4", className: "count-string" }, t('createPost.popup.wordCount', {
-            count: ((_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.innerText.length) || 0,
-            max: TITLE_LIMIT,
-        }))));
-};
-
-const StyledPopupFrame = styled(PopupFrame) `
-  & > div[data-open]:first-child {
-    z-index: 1000;
-    height: auto;
-    max-width: 448px;
-  }
-  .custom-media-dialog {
-    padding: 1rem;
-    .image-gallery {
-      display: none;
-      .image-item {
-        &.no-image {
-          cursor: pointer;
-        }
-        .camera-btn {
-          position: absolute;
-          top: calc(100% - 32px);
-          right: 8px;
-          left: unset;
-          width: 24px;
-          height: 24px;
-        }
-      }
-    }
-    .custom-media-add-btn {
-      margin-left: auto;
-      display: block;
-    }
-  }
-`;
-const StyledInput = styled(Input$1) `
-  margin-bottom: 10px;
-`;
-const StyleWrapperInfo = styled.div `
-  display: flex;
-  gap: 4px;
-  align-items: flex-start;
-  margin-bottom: 14px;
-
-  img {
-    margin-top: 2px;
-    max-width: 16px;
-  }
-`;
-
-var img$1 = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.0026 1.33334C4.3206 1.33334 1.33594 4.31801 1.33594 8.00001C1.33594 11.682 4.3206 14.6667 8.0026 14.6667C11.6846 14.6667 14.6693 11.682 14.6693 8.00001C14.6693 4.31801 11.6846 1.33334 8.0026 1.33334ZM8.0026 11.3333C7.6346 11.3333 7.33594 11.0347 7.33594 10.6667V8.00001C7.33594 7.63201 7.6346 7.33334 8.0026 7.33334C8.3706 7.33334 8.66927 7.63201 8.66927 8.00001V10.6667C8.66927 11.0347 8.3706 11.3333 8.0026 11.3333ZM8.33594 6.00001H7.66927C7.48527 6.00001 7.33594 5.85068 7.33594 5.66668V5.00001C7.33594 4.81601 7.48527 4.66668 7.66927 4.66668H8.33594C8.51994 4.66668 8.66927 4.81601 8.66927 5.00001V5.66668C8.66927 5.85068 8.51994 6.00001 8.33594 6.00001Z' fill='%232D87F3'/%3e%3c/svg%3e";
-var IconInfo = img$1;
-
-const SocialLinkPopup = ({ isOpen, onClose, onSocialLinkChanged, socialLinkData, }) => {
-    const { t } = useTranslations();
-    const imagePickerRef = useRef(null);
-    const [socialLink, setSocialLinkUrl] = useState('');
-    const { onSelectImages, onRemoveImage, imageSrcs, imageFiles } = useImagePicker();
-    useEffect(() => {
-        if (isOpen) {
-            setSocialLinkUrl((socialLinkData === null || socialLinkData === void 0 ? void 0 : socialLinkData.url) || '');
-        }
-    }, [isOpen]);
-    const isAcceptedLink = socialLink.includes('youtu.be') ||
-        socialLink.includes('youtube.com') ||
-        socialLink.includes('facebook.com') ||
-        socialLink.includes('fb.watch') ||
-        socialLink.includes('tiktok.com');
-    const isValid = !!socialLink && isAcceptedLink;
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("input", { ref: imagePickerRef, type: "file", accept: "image/png, image/gif, image/jpeg", style: { display: 'none' }, onChange: onSelectImages }),
-        React__default.createElement(StyledPopupFrame, { isOpen: isOpen, onClose: onClose, heading: "Insert", style: {
-                zIndex: 3,
-            } },
-            React__default.createElement("div", { className: "custom-media-dialog", onClick: (e) => e.stopPropagation() },
-                React__default.createElement(StyledInput, { size: "md", name: "custom-media-url", placeholder: "URL", value: socialLink, onChange: (v) => setSocialLinkUrl(v), label: "" }),
-                React__default.createElement(StyleWrapperInfo, null,
-                    React__default.createElement("img", { src: IconInfo, alt: "" }),
-                    React__default.createElement(Text, { size: "c2", color: "#737373" }, t('editor.addSocialLink.warningDomain'))),
-                !imageSrcs[0] ? (React__default.createElement("div", { className: "image-gallery" },
-                    React__default.createElement("div", { className: "image-item no-image", onClick: () => { var _a; return (_a = imagePickerRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }))) : (React__default.createElement("div", { className: "image-gallery" },
-                    React__default.createElement("div", { className: "image-item" },
-                        React__default.createElement("img", { src: imageSrcs[0], alt: "" }),
-                        React__default.createElement("img", { className: "close-btn", alt: "", onClick: () => onRemoveImage(0) })))),
-                React__default.createElement(Button, { color: "primary", size: "md", variant: "primary", type: "button", className: "custom-media-add-btn", onClick: (e) => {
-                        e === null || e === void 0 ? void 0 : e.preventDefault();
-                        e === null || e === void 0 ? void 0 : e.stopPropagation();
-                        if (isValid) {
-                            onSocialLinkChanged === null || onSocialLinkChanged === void 0 ? void 0 : onSocialLinkChanged({
-                                url: !socialLink.includes('http')
-                                    ? 'https://' + socialLink
-                                    : socialLink,
-                                banner: imageFiles[0],
-                            });
-                            onClose === null || onClose === void 0 ? void 0 : onClose();
-                        }
-                    }, disabled: !isValid }, t('editor.addSocialLink.addLink'))))));
-};
-
-var img = "data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.23078 14.625C2.85193 14.625 2.53125 14.4937 2.26875 14.2312C2.00625 13.9687 1.875 13.648 1.875 13.2692V4.73078C1.875 4.35193 2.00625 4.03125 2.26875 3.76875C2.53125 3.50625 2.85193 3.375 3.23078 3.375H14.7692C15.148 3.375 15.4687 3.50625 15.7312 3.76875C15.9937 4.03125 16.125 4.35193 16.125 4.73078V10.315C15.8029 10.1922 15.4534 10.125 15.0882 10.125H11.9117C10.3036 10.125 8.99998 11.4286 8.99998 13.0368C8.99998 13.6227 9.17304 14.1682 9.47085 14.625H3.23078ZM7.83606 11.6899L11.5846 9.28988C11.6875 9.21969 11.7389 9.12306 11.7389 8.99998C11.7389 8.87691 11.6875 8.78028 11.5846 8.71009L7.83606 6.31011C7.72067 6.23222 7.60456 6.22597 7.48774 6.29136C7.37091 6.35673 7.3125 6.45721 7.3125 6.59278V11.4072C7.3125 11.5428 7.37091 11.6432 7.48774 11.7086C7.60456 11.774 7.72067 11.7677 7.83606 11.6899ZM10.7181 14.6953C11.1136 15.0907 11.5889 15.2884 12.1442 15.2884H12.8099C12.9325 15.2884 13.0352 15.247 13.1182 15.1642C13.2011 15.0813 13.2426 14.9786 13.2426 14.856C13.2426 14.7333 13.2011 14.6305 13.1182 14.5475C13.0352 14.4646 12.9325 14.4231 12.8099 14.4231H12.1442C11.8269 14.4231 11.5553 14.3101 11.3293 14.0841C11.1033 13.8582 10.9903 13.5865 10.9903 13.2692C10.9903 12.9519 11.1033 12.6803 11.3293 12.4543C11.5553 12.2284 11.8269 12.1154 12.1442 12.1154H12.8099C12.9325 12.1154 13.0352 12.074 13.1182 11.9911C13.2011 11.9083 13.2426 11.8055 13.2426 11.6829C13.2426 11.5602 13.2011 11.4574 13.1182 11.3745C13.0352 11.2915 12.9325 11.25 12.8099 11.25H12.1442C11.5889 11.25 11.1136 11.4477 10.7181 11.8432C10.3227 12.2386 10.125 12.7139 10.125 13.2692C10.125 13.8245 10.3227 14.2999 10.7181 14.6953ZM12.2686 13.5775C12.3515 13.6604 12.4543 13.7019 12.5769 13.7019H15.1731C15.2957 13.7019 15.3984 13.6605 15.4814 13.5776C15.5643 13.4948 15.6058 13.3921 15.6058 13.2694C15.6058 13.1468 15.5643 13.044 15.4814 12.961C15.3984 12.878 15.2957 12.8365 15.1731 12.8365H12.5769C12.4543 12.8365 12.3515 12.878 12.2686 12.9608C12.1857 13.0436 12.1442 13.1464 12.1442 13.269C12.1442 13.3917 12.1857 13.4945 12.2686 13.5775ZM14.9401 15.2884H15.6058C16.161 15.2884 16.6364 15.0911 17.0318 14.6966C17.4273 14.3019 17.625 13.8268 17.625 13.271C17.625 12.7068 17.4273 12.2289 17.0318 11.8374C16.6364 11.4458 16.161 11.25 15.6058 11.25H14.9401C14.8175 11.25 14.7147 11.2914 14.6318 11.3743C14.5488 11.4571 14.5074 11.5598 14.5074 11.6825C14.5074 11.8051 14.5488 11.908 14.6318 11.9909C14.7147 12.0739 14.8175 12.1154 14.9401 12.1154H15.6058C15.9231 12.1154 16.1947 12.2284 16.4207 12.4543C16.6466 12.6803 16.7596 12.9519 16.7596 13.2692C16.7596 13.5865 16.6466 13.8582 16.4207 14.0841C16.1947 14.3101 15.9231 14.4231 15.6058 14.4231H14.9401C14.8175 14.4231 14.7147 14.4645 14.6318 14.5473C14.5488 14.6302 14.5074 14.7329 14.5074 14.8556C14.5074 14.9782 14.5488 15.081 14.6318 15.164C14.7147 15.247 14.8175 15.2884 14.9401 15.2884Z' fill='%23F44D2C'/%3e%3c/svg%3e";
-var IconVideo = img;
-
-const CreatePostVideo = ({ socialLinkData, setSocialLinkData, }) => {
-    const { t } = useTranslations();
-    const [activeModal, setActiveModal] = useState(false);
-    const handleClick = () => {
-        setActiveModal(true);
-    };
-    return (React__default.createElement("div", { className: "input-group" },
-        React__default.createElement(StyleSessionRow, { onClick: handleClick },
-            React__default.createElement("img", { alt: "anonymous-icon", src: IconVideo, style: {
-                    width: '18px',
-                    height: '18px',
-                    objectFit: 'contain',
-                    marginLeft: 'auto',
-                } }),
-            React__default.createElement("div", { className: "session-title" }, t('createPost.videoOrLink'))),
-        React__default.createElement(SocialLinkPopup, { isOpen: activeModal, onClose: () => setActiveModal(false), onSocialLinkChanged: setSocialLinkData, socialLinkData: socialLinkData })));
-};
-
-const StyleReviewPhoto = styled.div `
-  .mantine-Text-root {
-    margin-bottom: 4px;
-  }
-  .preview-images-container {
-    display: flex;
-    gap: 8px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    .image-src-wrapper {
-      flex: 0 0 140px;
-      width: 140px;
-      height: 96px;
-      border-radius: 4px;
-      position: relative;
-      img {
-        border-radius: 4px;
-      }
-      .icon-close {
-        position: absolute;
-        top: 6px;
-        right: 6px;
-        cursor: pointer;
-        z-index: 10;
-        max-height: 24px;
-        max-width: 24px;
-      }
-    }
-  }
-`;
-
-const PostPhotosReview = ({ error, imageFiles: imageFilesInit, setImageFiles, removeKeyError, }) => {
-    const { t } = useTranslations();
-    const { imageSrcs, onRemoveImage } = useImagePicker(imageFilesInit, setImageFiles);
-    return (React__default.createElement(StyleReviewPhoto, { className: "input-group" },
-        React__default.createElement(Text, { size: "p5", weight: "semiBold" }, t('createPost.photos')),
-        React__default.createElement("div", { className: "preview-images-container" }, imageSrcs === null || imageSrcs === void 0 ? void 0 : imageSrcs.map((src, index) => {
-            return (React__default.createElement("div", { className: "image-src-wrapper", key: index },
-                React__default.createElement("img", { src: src, className: "preview-image", alt: "", style: {
-                        width: '100%',
-                        height: '100%',
-                        objectFit: 'cover',
-                    } }),
-                React__default.createElement("img", { alt: "", className: "icon-close", src: IconCloseCircle, onClick: () => {
-                        removeKeyError && removeKeyError('photos');
-                        onRemoveImage(index);
-                    } })));
-        })),
-        error && (error === null || error === void 0 ? void 0 : error.photos) && (React__default.createElement(StyledError, null,
-            React__default.createElement(Text, { size: "p5", color: theme.colors.red600 }, error.photos)))));
-};
-
-const inputModify = (value, opts) => {
-    var _a;
-    const { formatUrl, bannedWords = [] } = opts || {};
-    const removedFormat = fixMalformedMention(removeFontFormat(value));
-    if (!formatUrl)
-        return {
-            value: highlightBadWords(removedFormat, bannedWords),
-        };
-    let descriptionWithWrappedAnchor = removeEdittedBannedWord(wrapAnchorAroundUrls(removedFormat));
-    const urls = getUrlsFromEditorString(removedFormat);
-    if (urls) {
-        const invalidUrls = [];
-        let previewUrl = '';
-        urls.forEach((url) => {
-            if (!url)
-                return;
-            try {
-                const jsUrl = new URL(url);
-                // Check url has must into domain hellohealthgroup
-                if (!ALLOW_DOMAIN_URL.some((o) => jsUrl.origin.endsWith(o))) {
-                    invalidUrls.push('notification.limitUrlDomain');
-                    return;
-                }
-                // Check url have special character
-                if (url.endsWith('&')) {
-                    invalidUrls.push('notification.urlWrongFormat');
-                    return;
-                }
-            }
-            catch (_a) {
-                invalidUrls.push(url);
-            }
-        });
-        if (invalidUrls.length > 0) {
-            descriptionWithWrappedAnchor = descriptionWithWrappedAnchor
-                .replace(new RegExp(`data-url="true">(${invalidUrls.map(escapeRegExp).join('|')})<`, 'gi'), 'data-error="true" data-url="true">$1<')
-                .replace(new RegExp(`data-href="(${invalidUrls
-                .map(escapeRegExp)
-                .join('|')})" data-url="true">`, 'gi'), 'data-href="$1" data-error="true" data-url="true">');
-        }
-        previewUrl = (_a = urls.filter((u) => invalidUrls.indexOf(u) === -1)) === null || _a === void 0 ? void 0 : _a[0];
-        return {
-            invalidUrls,
-            previewUrl,
-            value: highlightBadWords(descriptionWithWrappedAnchor, bannedWords),
-        };
-    }
-    return {
-        value: highlightBadWords(descriptionWithWrappedAnchor, bannedWords),
-    };
-};
-const usePreviewUrl = (bannedWords, onChange) => {
-    const { data: { locale }, } = useContext(TogetherComponentGlobalContext);
-    const [previewUrl, setPreviewUrl] = useState(null);
-    const bannedWordsRef = useRef([]);
-    bannedWordsRef.current = bannedWords;
-    const fetchPreviewData = (url) => {
-        if (!previewUrl || previewUrl.url !== url) {
-            setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl({
-                url,
-                isFetching: true,
-            });
-            callApi(getApiPath(PATHS.FETCH_PREVIEW, {
-                _locale: locale,
-            }), 'POST', {
-                data: {
-                    link: url,
-                },
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            })
-                .then((res) => {
-                var _a, _b, _c, _d;
-                setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl({
-                    title: (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.title,
-                    description: (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.description,
-                    image: ((_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.image) || ((_d = res === null || res === void 0 ? void 0 : res.data) === null || _d === void 0 ? void 0 : _d.logo),
-                    url,
-                });
-            })
-                .catch(() => {
-                setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl(null);
-            });
-        }
-    };
-    const fetchPreviewDataRef = useRef(fetchPreviewData);
-    fetchPreviewDataRef.current = fetchPreviewData;
-    const [invalidUrls, setInvalidUrls] = useState([]);
-    const debounceInputModify = useCallback(debounce((v) => {
-        if (v) {
-            const processedInput = inputModify(v, {
-                bannedWords: bannedWordsRef.current,
-                formatUrl: true,
-            });
-            const { invalidUrls: _invalidUrls, previewUrl: _previewUrl, value, } = processedInput;
-            if (_invalidUrls && (_invalidUrls === null || _invalidUrls === void 0 ? void 0 : _invalidUrls.length)) {
-                setInvalidUrls(_invalidUrls);
-                setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl(null);
-            }
-            else {
-                setInvalidUrls([]);
-                if (_previewUrl) {
-                    fetchPreviewDataRef.current(_previewUrl);
-                }
-                else
-                    setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl(null);
-                if (value !== v) {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
-                }
-            }
-        }
-    }, 500), []);
-    return {
-        previewUrl,
-        setPreviewUrl,
-        invalidUrls,
-        debounceInputModify,
-        fetchPreviewData,
-    };
-};
-
-const StyleReviewVideo = styled.div `
-  .link-preview-wrapper {
-    position: relative;
-    .icon-close {
-      position: absolute;
-      top: 6px;
-      right: 6px;
-      cursor: pointer;
-      z-index: 10;
-      max-width: 24px;
-      max-height: 24px;
-    }
-  }
-  .mantine-Text-root {
-    margin-bottom: 4px;
-  }
-`;
-
-const PostVideoReview = ({ socialLinkData, bannedWords, onChange, onInvalidUrlsChange, onSocialLinkChanged, }) => {
-    const { t } = useTranslations();
-    const { invalidUrls, previewUrl, fetchPreviewData, setPreviewUrl } = usePreviewUrl(bannedWords || [], onChange);
-    useEffect(() => {
-        if (socialLinkData && socialLinkData.url) {
-            fetchPreviewData(socialLinkData.url);
-        }
-    }, [socialLinkData, fetchPreviewData]);
-    useEffect(() => {
-        if (invalidUrls) {
-            onInvalidUrlsChange === null || onInvalidUrlsChange === void 0 ? void 0 : onInvalidUrlsChange(invalidUrls);
-        }
-    }, [invalidUrls]);
-    return (React__default.createElement(StyleReviewVideo, { className: "input-group" },
-        React__default.createElement(Text, { size: "p5", weight: "semiBold" }, t('createPost.video')),
-        React__default.createElement("div", { className: "link-preview-wrapper" }, (socialLinkData === null || socialLinkData === void 0 ? void 0 : socialLinkData.url) && previewUrl && (React__default.createElement("div", { className: "link-preview-wrapper" }, previewUrl.isFetching ? (React__default.createElement(Loading, null)) : (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(CardLink, { title: previewUrl.title, url: previewUrl.url || '#', image: previewUrl.image, noRefetch: true }),
-            React__default.createElement("img", { alt: "", src: IconCloseCircle, className: "icon-close", onClick: () => {
-                    setPreviewUrl(null);
-                    onSocialLinkChanged && onSocialLinkChanged(null);
-                } }))))))));
-};
-
-const MAX_SIZE_FILE_UPLOAD = 10 * 1024 * 1024;
-const applySpecialCharSite = [
-    LOCALE.PhilippinesEnglish,
-    LOCALE.PhilippinesTagalog,
-    LOCALE.Indonesia,
-    LOCALE.Malaysia,
-    LOCALE.Vietnam,
-];
-const CreateNewPostContent = ({ className, style, onPostCreatedEdited, onClose, communities = [], forceSelectCommunity, forceSelectTopics, articleId, optionalTopic, editPostData, defaultCommunity, defaultTopics, selectAskDoctor, showAskDoctorOptions, userInfo, isMarryBaby = false, }) => {
-    const isInEditMode = !!(editPostData === null || editPostData === void 0 ? void 0 : editPostData.id);
-    const { data: { locale, router, env: { togetherBasePath }, }, action: { pushNotifications, sanitizeFunction }, } = useContext(TogetherComponentGlobalContext);
-    const { asPath } = router || {};
-    const { t } = useTranslations();
-    // const [isAnonymous, setIsAnonymous] = useState<boolean>(false)
-    const [isAskDoctor, setIsAskDoctor] = useState(selectAskDoctor);
-    const [specialCharErr, setspecialCharErr] = useState(false);
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [titleValue, setTitleValue] = useState('');
-    const [descriptionValue, setDescriptionValue] = useState('');
-    const [communityValue, setCommunityValue] = useState(forceSelectCommunity
-        ? {
-            label: forceSelectCommunity.name,
-            value: `${forceSelectCommunity.id || ''}-${forceSelectCommunity.mappedCategoryId || ''}`,
-        }
-        : {
-            label: t('community.choose'),
-            value: '',
-        });
-    const [selectedTopics, setSelectedTopics] = useState([...forceSelectTopics] || []);
-    const [socialLinkData, setSocialLinkData] = useState();
-    const [error, setError] = useState({});
-    const [imageFiles, setImageFiles] = useState([]);
-    const [bannedWords, setBannedWords] = useState([]);
-    const [postActionValue, setPostActionValue] = useState({
-        label: t('cardPost.public'),
-        value: 'public',
-    });
-    const { imageSrcs = [] } = useImagePicker(imageFiles);
-    const currentCommunity = forceSelectCommunity ||
-        communities.find((c) => `${c.id || ''}-${c.mappedCategoryId || ''}` === communityValue.value);
-    const communitiesList = forceSelectCommunity
-        ? [forceSelectCommunity]
-        : communities
-            .filter((c) => c.isActive)
-            .sort((a, b) => {
-            if (a.name > b.name)
-                return 1;
-            if (a.name < b.name)
-                return -1;
-            return 0;
-        });
-    const [previewUrl, setPreviewUrl] = useState(null);
-    const [invalidUrls, setInvalidUrls] = useState([]);
-    const isReadyToSubmit = titleValue &&
-        !specialCharErr &&
-        innertext(descriptionValue) &&
-        (optionalTopic || (!optionalTopic && selectedTopics.length > 0)) &&
-        currentCommunity &&
-        (!imageFiles || imageFiles.length <= MAX_IMAGE_UPLOADS) &&
-        !(invalidUrls === null || invalidUrls === void 0 ? void 0 : invalidUrls.length) &&
-        !isSubmitting;
-    const postActionType = [
-        {
-            label: t('cardPost.public'),
-            value: 'public',
-            icon: (React__default.createElement("img", { alt: "anonymous-icon", src: IconPublic, style: {
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'contain',
-                    marginLeft: 'auto',
-                } })),
-        },
-        {
-            label: t('cardPost.anonymous'),
-            value: 'anonymous',
-            icon: (React__default.createElement("img", { alt: "anonymous-icon", src: IconAnonymous, style: {
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'contain',
-                    marginLeft: 'auto',
-                } })),
-        },
-    ];
-    // HANDLE etra action when OPEN AND CLOSE
-    useEffect(() => {
-        if (editPostData) {
-            const post = editPostData;
-            setTitleValue(post.title || '');
-            setDescriptionValue(decodeMention(decodePostUrl(post.description || '', 'edit'), post.mentions));
-            setCommunityValue({
-                label: post.community.name,
-                value: `${post.community.id || ''}-${post.community.mappedCategoryId || ''}`,
-            });
-            setSelectedTopics(post.topics || []);
-            setImageFiles(post.photos || []);
-            // setIsAnonymous(!!post.isAnonymous || false)
-            setIsAskDoctor(!!post.isAskDoctor || false);
-        }
-        else {
-            if (defaultCommunity) {
-                setCommunityValue({
-                    label: defaultCommunity.name,
-                    value: `${defaultCommunity.id || ''}-${defaultCommunity.mappedCategoryId || ''}`,
-                });
-            }
-            if (defaultTopics) {
-                setSelectedTopics(defaultTopics);
-            }
-        }
-    }, []);
-    useEffect(() => {
-        setspecialCharErr(applySpecialCharSite.includes(locale) &&
-            titleValue !== '' &&
-            !/[a-zA-Z]/.test(titleValue));
-        setError({});
-    }, [titleValue]);
-    const onCreateEditSuccess = (res) => {
-        if (onPostCreatedEdited) {
-            onPostCreatedEdited(formatPost(res), isInEditMode);
-        }
-        onClose && onClose();
-    };
-    const validationUploadPhoto = (files) => {
-        const errorMessage = Object.assign({}, error);
-        if (files && files.length > 10) {
-            errorMessage.photos = t('createPost.message.photoMaxium');
-        }
-        if (files && files.length) {
-            const inValidSizeFile = files.some((file) => (file === null || file === void 0 ? void 0 : file.size) > MAX_SIZE_FILE_UPLOAD);
-            if (inValidSizeFile) {
-                errorMessage.photos = t('createPost.message.photoSize');
-            }
-        }
-        setError(errorMessage);
-    };
-    const validationPost = () => {
-        let hasError = false;
-        const errorMessage = {};
-        const description = innertext(descriptionValue);
-        if (!description) {
-            errorMessage.description = t('createPost.message.requiredDescription');
-            hasError = true;
-        }
-        if (isInEditMode && !titleValue) {
-            errorMessage.title = t('createPost.message.requiredTitle');
-            hasError = true;
-        }
-        if (description && description.split(' ').length < 10) {
-            errorMessage.description = t('createPost.message.lengthDescription');
-            hasError = true;
-        }
-        if (showAskDoctorOptions &&
-            !(errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.description) &&
-            typeof isAskDoctor === 'undefined') {
-            errorMessage.askDoctor = t('createPost.message.askDoctorRequireMess');
-            hasError = true;
-        }
-        if (imageFiles && imageFiles.length > 10) {
-            errorMessage.photos = t('createPost.message.photoMaxium');
-            hasError = true;
-        }
-        if (imageFiles && imageFiles.length) {
-            const inValidSizeFile = imageFiles.some((file) => (file === null || file === void 0 ? void 0 : file.size) > MAX_SIZE_FILE_UPLOAD);
-            if (inValidSizeFile) {
-                errorMessage.photos = t('createPost.message.photoSize');
-                hasError = true;
-            }
-        }
-        if (invalidUrls && invalidUrls.length) {
-            errorMessage.video = 'Invalid video url';
-            hasError = true;
-        }
-        setError(errorMessage);
-        return hasError;
-    };
-    const removeKeyError = (deleteKey) => {
-        if (error[deleteKey]) {
-            const _a = Object.assign({}, error), _b = `${deleteKey}`, value = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
-            setError(rest);
-            console.log(value);
-        }
-    };
-    const submitPost = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const isError = validationPost();
-        if (isError)
-            return;
-        const bodyFormData = yield getPostFormData({
-            title: titleValue,
-            description: descriptionValue,
-            communityId: String((currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.id) || ''),
-            imageFiles,
-            previewUrl,
-            topicIds: selectedTopics === null || selectedTopics === void 0 ? void 0 : selectedTopics.map((topic) => String(topic.id || '')).filter(Boolean),
-            locale,
-            sanitizeFunction,
-            categoryCommunityId: String((currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.mappedCategoryId) || ''),
-            categoryTopicIds: selectedTopics === null || selectedTopics === void 0 ? void 0 : selectedTopics.map((topic) => String((topic === null || topic === void 0 ? void 0 : topic.mappedCategoryId) || '')).filter(Boolean),
-            isAnonymous: (postActionValue === null || postActionValue === void 0 ? void 0 : postActionValue.value) === 'anonymous' ? 1 : 0,
-            isAskDoctor: isAskDoctor ? 1 : 0,
-            introUrl: (socialLinkData === null || socialLinkData === void 0 ? void 0 : socialLinkData.url) || '',
-        });
-        if (articleId) {
-            bodyFormData.append('article_id', articleId);
-        }
-        let res;
-        if (isInEditMode) {
-            if (editPostData === null || editPostData === void 0 ? void 0 : editPostData.id) {
-                res = yield editPost({
-                    id: editPostData.id,
-                    formData: bodyFormData,
-                    locale,
-                });
-            }
-        }
-        else {
-            res = yield createPost({
-                formData: bodyFormData,
-                locale,
-                isArticleComment: !(currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.id) && !!(currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.mappedCategoryId),
-            });
-        }
-        const resData = res === null || res === void 0 ? void 0 : res.data;
-        if ((resData === null || resData === void 0 ? void 0 : resData.id) && !((_b = (_a = res === null || res === void 0 ? void 0 : res.messages) === null || _a === void 0 ? void 0 : _a.moderation) === null || _b === void 0 ? void 0 : _b.type)) {
-            pushNotifications({
-                message: t('createPost.popup.success'),
-                type: 'success',
-            });
-            onCreateEditSuccess(resData);
-        }
-        else {
-            if (((_d = (_c = res === null || res === void 0 ? void 0 : res.messages) === null || _c === void 0 ? void 0 : _c.moderation) === null || _d === void 0 ? void 0 : _d.type) === 'banned') {
-                pushNotifications({
-                    title: t('notification.post.blocked.title'),
-                    message: t('notification.post.blocked.message'),
-                    type: 'danger',
-                });
-                if (res.messages.moderation.words) {
-                    setBannedWords(res.messages.moderation.words);
-                }
-            }
-            else if (((_f = (_e = res === null || res === void 0 ? void 0 : res.messages) === null || _e === void 0 ? void 0 : _e.moderation) === null || _f === void 0 ? void 0 : _f.type) === 'suspect') {
-                pushNotifications({
-                    title: t('notification.post.suspect.title'),
-                    message: t('notification.post.suspect.message'),
-                    type: 'warning',
-                });
-                onClose && onClose();
-            }
-            else if ((_h = (_g = res === null || res === void 0 ? void 0 : res.messages) === null || _g === void 0 ? void 0 : _g.find) === null || _h === void 0 ? void 0 : _h.call(_g, (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: 'danger',
-                });
-                onClose && onClose();
-            }
-            else {
-                pushNotifications({
-                    message: ((_j = res === null || res === void 0 ? void 0 : res.messages) === null || _j === void 0 ? void 0 : _j[0]) || t('notification.failure'),
-                    type: 'danger',
-                });
-            }
-        }
-    });
-    return (React__default.createElement(StyledCreateNewPost, { className: `${className} create-post-popup-frame`, style: style },
-        React__default.createElement("div", { className: "input-group-container" },
-            React__default.createElement(StyledFormGroupInner, null,
-                React__default.createElement("div", { className: "input-group" },
-                    React__default.createElement(StylePostAction, null,
-                        React__default.createElement("div", { className: "avatar" }, (userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) ? (React__default.createElement("img", { alt: "avatar-icon", src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, style: {
-                                width: '100%',
-                                height: '100%',
-                                objectFit: 'contain',
-                                marginLeft: 'auto',
-                            } })) : (React__default.createElement(CardAuthor, { showDetailPopup: false, avatar: "", avatarProps: { size: 40 }, name: userInfo === null || userInfo === void 0 ? void 0 : userInfo.name, userId: userInfo === null || userInfo === void 0 ? void 0 : userInfo.userId, className: "author-avatar" }))),
-                        React__default.createElement("div", { className: "post-action-form" },
-                            React__default.createElement("div", { className: "post-action-by" }, (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || ''),
-                            React__default.createElement(Dropdown, { disabled: isInEditMode, options: postActionType, id: "post-action-type", size: "sm", className: "dropdown-post-action", placeholder: t('community.choose'), value: postActionValue, onChange: (option) => {
-                                    setPostActionValue({
-                                        label: option.label,
-                                        value: String(option.value),
-                                    });
-                                }, placeholderIcon: React__default.createElement("div", { className: "post-action-result" }, postActionValue.value === 'public' ? (React__default.createElement("img", { alt: "public-icon", src: IconPublic, style: {
-                                        width: '100%',
-                                        height: '100%',
-                                        objectFit: 'contain',
-                                        marginLeft: 'auto',
-                                    } })) : (React__default.createElement("img", { alt: "anonymous-icon", src: IconAnonymous, style: {
-                                        width: '100%',
-                                        height: '100%',
-                                        objectFit: 'contain',
-                                        marginLeft: 'auto',
-                                    } }))), style: {
-                                    zIndex: 10,
-                                    width: 'calc(100% + 20px)',
-                                } })))),
-                React__default.createElement(CreatePostTitle, { className: "input-group", bannedWords: bannedWords, value: titleValue, onChange: setTitleValue }),
-                specialCharErr && (React__default.createElement(StyledError, null,
-                    React__default.createElement(Info, { isSolid: true, color: theme.colors.red700, size: 14 }),
-                    React__default.createElement(Text, { size: "p3", as: "span", color: theme.colors.red700 }, t('createPost.popup.specialCharErr')))),
-                React__default.createElement("div", { className: "input-group" },
-                    React__default.createElement(CreatePostDescription, { bannedWords: bannedWords, value: descriptionValue, onChange: (v) => {
-                            setDescriptionValue(v);
-                            removeKeyError('description');
-                        }, onPreviewUrlChange: setPreviewUrl, onInvalidUrlsChange: setInvalidUrls, onImageFilesChange: setImageFiles, imageFiles: imageFiles, className: `${error && (error === null || error === void 0 ? void 0 : error.description) ? 'error-description' : ''} ${showAskDoctorOptions ? 'has-ask-doctor-option' : ''}`, footerEditor: React__default.createElement(React__default.Fragment, null,
-                            showAskDoctorOptions && (React__default.createElement(StyledIsQuestion, { color: "", className: `${error && (error === null || error === void 0 ? void 0 : error.askDoctor) ? 'has-error' : ''} ${error && (error === null || error === void 0 ? void 0 : error.description) ? 'error-description' : ''}` },
-                                React__default.createElement("div", { className: "switch-label" },
-                                    React__default.createElement(Ask, { size: isMarryBaby ? 32 : 24, isMarryBaby: isMarryBaby }),
-                                    React__default.createElement("div", { className: "wrapper-text" },
-                                        React__default.createElement("div", { className: "label-txt" }, t('createPost.askDoctor')),
-                                        React__default.createElement("div", { className: "description-txt" }, t('createPost.askDoctor.description')))),
-                                React__default.createElement(BtnChoice, { value: isAskDoctor, choices: [
-                                        {
-                                            label: t('createPost.askDoctorChoice.yes'),
-                                            value: true,
-                                            dataEventCategory: 'Together',
-                                            dataEventAction: 'Write Post Click - Ask Doctor',
-                                            dataEventLabel: getCurrentHref(locale, togetherBasePath, asPath),
-                                        },
-                                        {
-                                            label: t('createPost.askDoctorChoice.no'),
-                                            value: false,
-                                        },
-                                    ], onChange: (v) => {
-                                        if (typeof v === 'boolean') {
-                                            setIsAskDoctor(v);
-                                            removeKeyError('askDoctor');
-                                        }
-                                    } }))),
-                            error && (error === null || error === void 0 ? void 0 : error.askDoctor) && (React__default.createElement(StyledError, { style: { margin: '4px 0 0' } },
-                                React__default.createElement(Text, { size: "p5", as: "span", color: theme.colors.red600 }, error.askDoctor))),
-                            error && (error === null || error === void 0 ? void 0 : error.description) && (React__default.createElement(StyledError, { style: { margin: '4px 0 0' } },
-                                React__default.createElement(Text, { size: "p5", as: "span", color: theme.colors.red600 }, error.description)))) })),
-                imageSrcs.length > 0 && (React__default.createElement(PostPhotosReview, { imageFiles: imageFiles, error: error, setImageFiles: setImageFiles, removeKeyError: removeKeyError })),
-                socialLinkData && (React__default.createElement(PostVideoReview, { bannedWords: bannedWords, socialLinkData: socialLinkData, onSocialLinkChanged: setSocialLinkData, onInvalidUrlsChange: setInvalidUrls, onChange: (v) => {
-                        setDescriptionValue(v);
-                    } })),
-                React__default.createElement(CreatePostCommunity, { communitiesList: communitiesList, currentCommunity: currentCommunity, selectedTopics: selectedTopics, forceTopics: forceSelectTopics, communityValue: communityValue, error: error, isFullscreen: false, isInEditMode: isInEditMode, setSelectedTopics: setSelectedTopics, setCommunityValue: setCommunityValue }),
-                React__default.createElement(CreatePostPhotos, { imageFiles: imageFiles, setImageFiles: (data) => {
-                        setImageFiles(data);
-                        validationUploadPhoto(data);
-                    } }),
-                React__default.createElement(CreatePostVideo, { socialLinkData: socialLinkData, setSocialLinkData: setSocialLinkData }))),
-        React__default.createElement("div", { className: "form-action" },
-            React__default.createElement("div", { className: "input-group" },
-                React__default.createElement(Button, { className: "submit-btn pointer-event-child-none", size: "lg", "data-event-category": "Ask Doctor", "data-event-action": "Submit Question", "data-event-label": window.location.href, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
-                        if (isReadyToSubmit && !isSubmitting) {
-                            setIsSubmitting(true);
-                            try {
-                                yield submitPost();
-                            }
-                            catch (e) {
-                                console.error(e);
-                                pushNotifications(getDefaultFailNoti(t));
-                            }
-                            setIsSubmitting(false);
-                        }
-                    }), disabled: !isReadyToSubmit, loading: isSubmitting }, t('createPost.popup.submit'))))));
-};
-
-const StyledTopicSelectList = styled.div `
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-  margin-top: 1rem;
-
-  .tag-item {
-    min-height: 32px;
-    padding: 5px 12px;
-    border: 1px solid ${theme.colors.neutral100};
-    margin-right: 1rem;
-    margin-bottom: 8px;
-    border-radius: 1rem;
-    color: ${theme.colors.gray800};
-    cursor: pointer;
-    font-size: 13px;
-    line-height: 22px;
-    transition: all 0.2s;
-
-    &.--active {
-      border-color: ${theme.colors.primary50};
-      background: ${theme.colors.primary50};
-      color: ${theme.colors.primaryBase};
-    }
-    &[data-disabled='true'] {
-      background: ${theme.colors.gray100};
-      color: ${theme.colors.gray800};
-    }
-  }
-  .topic-spinner {
-    margin-right: auto;
-    margin-left: auto;
-    & > button {
-      width: 24px;
-      height: 24px;
-    }
-  }
-  &[data-is-marrybaby='true'] {
-    .tag-item {
-      border-color: transparent;
-      background: #f3f3f3;
-      color: #3e3f58;
-      &.--active {
-        border-color: #b6cdff;
-        background: #e0e9fb;
-        color: #3e3f58;
-      }
-    }
-  }
-`;
-
-const TopicSelectList = ({ className, style, topics: topicsProp, communityId, onChange, isLoading, disabled, forceTopics, selectedTopics: selectedTopicsProp, noFetch, dataEventCategory, dataEventAction, dataEventLabel, }) => {
-    const { data: { locale, env: { isMarryBaby }, }, } = useContext(TogetherComponentGlobalContext);
-    const [topics, setTopics] = useState(topicsProp ? [...topicsProp] : []);
-    const [selectedTopics, setSelectedTopics] = useState(selectedTopicsProp ? [...selectedTopicsProp] : []);
-    const [isLoadingTopics, setIsLoadingTopics] = useState(false);
-    const topicsPropRef = useRef(topicsProp);
-    topicsPropRef.current = topicsProp;
-    useEffect(() => {
-        var _a;
-        if (communityId && !noFetch && !((_a = topicsPropRef.current) === null || _a === void 0 ? void 0 : _a.length)) {
-            setTopics([]);
-            setIsLoadingTopics(true);
-            (() => __awaiter(void 0, void 0, void 0, function* () {
-                var _b;
-                try {
-                    const res = yield callApi(getApiPath(PATHS.TOPIC.LIST, {
-                        communityId: communityId,
-                        _locale: locale,
-                    }), 'GET');
-                    const topicRes = (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.topics;
-                    if (Array.isArray(topicRes)) {
-                        setTopics(() => (topicRes === null || topicRes === void 0 ? void 0 : topicRes.map(formatTopic).sort((t1, t2) => (t1.order || 0) - (t2.order || 0))) || []);
-                    }
-                }
-                catch (e) {
-                    console.log(e);
-                    setIsLoadingTopics(false);
-                }
-                setIsLoadingTopics(false);
-            }))();
-        }
-    }, [communityId, noFetch]);
-    const topicsPropString = topicsProp === null || topicsProp === void 0 ? void 0 : topicsProp.map((t) => t.id).join('-');
-    const topicsStateString = topics === null || topics === void 0 ? void 0 : topics.map((t) => t.id).join('-');
-    const forceTopicsPropString = forceTopics === null || forceTopics === void 0 ? void 0 : forceTopics.map((t) => t.id).join('-');
-    useEffect(() => {
-        if (topicsProp &&
-            typeof topicsPropString !== 'undefined' &&
-            topicsPropString !== topicsStateString) {
-            setTopics(topicsProp);
-        }
-    }, [topicsProp, topicsPropString, topicsStateString]);
-    const topicsWithoutForced = useMemo(() => topics.filter((t) => !(forceTopics === null || forceTopics === void 0 ? void 0 : forceTopics.some((ft) => (ft.id && ft.id === t.id) ||
-        (ft.mappedCategoryId &&
-            ft.mappedCategoryId === t.mappedCategoryId)))), [topicsStateString, forceTopicsPropString]);
-    return (React__default.createElement(StyledTopicSelectList, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
-        forceTopics.map((topic) => (React__default.createElement(TopicItem, { key: `${topic.id}-${topic.mappedCategoryId}`, topic: topic, disabled: true, selected: true, dataEventAction: dataEventAction, dataEventCategory: dataEventCategory, dataEventLabel: dataEventLabel }))),
-        topicsWithoutForced.map((topic) => (React__default.createElement(TopicItem, { key: `${topic.id}-${topic.mappedCategoryId}`, topic: topic, disabled: disabled, selected: (selectedTopicsProp || selectedTopics).some((t) => (t.id && t.id === topic.id) ||
-                (t.mappedCategoryId &&
-                    t.mappedCategoryId === topic.mappedCategoryId)), onClick: () => {
-                const _selected = selectedTopicsProp || selectedTopics;
-                const foundIndex = _selected.findIndex((_selected) => (_selected.id && _selected.id === topic.id) ||
-                    (_selected.mappedCategoryId &&
-                        _selected.mappedCategoryId === topic.mappedCategoryId));
-                if (foundIndex !== -1) {
-                    _selected.splice(foundIndex, 1);
-                }
-                else {
-                    _selected.push(topic);
-                }
-                if (onChange && selectedTopicsProp) {
-                    onChange(_selected.slice());
-                }
-                else {
-                    onChange && onChange(_selected.slice());
-                    setSelectedTopics(_selected.slice());
-                }
-            }, dataEventAction: dataEventAction, dataEventCategory: dataEventCategory, dataEventLabel: dataEventLabel }))),
-        (isLoading || isLoadingTopics) && React__default.createElement(Loading$1, { className: "topic-spinner" })));
-};
-const TopicItem = (_a) => {
-    var { topic, disabled, selected, onClick } = _a, rest = __rest(_a, ["topic", "disabled", "selected", "onClick"]);
-    return (React__default.createElement("div", Object.assign({ className: 'tag-item' + (selected ? ' --active' : ''), "data-disabled": disabled, onClick: !disabled ? onClick : undefined }, rest), topic.name));
-};
-
-var styles = {"skipBtn":"KsWg8i6","alertHeading":"_9tS0EUN","alertDesc":"kyyRKlb","alertAction":"-Uqqka-"};
-
-const SkipQuestionOfExpertBtn = (_a) => {
-    var { post, onSkip, btnText, currentPageUrl } = _a, rest = __rest(_a, ["post", "onSkip", "btnText", "currentPageUrl"]);
-    const { t } = useTranslations();
-    const { data: { locale }, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
-    const [showAlert, setShowAlert] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const _theme = useMantineTheme();
-    const handleSkip = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
-        setLoading(true);
-        const res = yield callApiWithAuth(getApiPath(PATHS.USER.SKIP_QUESTION, {
-            _locale: locale,
-            id: post === null || post === void 0 ? void 0 : post.id,
-        }), 'PUT');
-        if ((res === null || res === void 0 ? void 0 : res.status) === 1) {
-            onSkip === null || onSkip === void 0 ? void 0 : onSkip({ id: (post === null || post === void 0 ? void 0 : post.id) || '', communityId: ((_b = post === null || post === void 0 ? void 0 : post.community) === null || _b === void 0 ? void 0 : _b.id) || '' });
-            setShowAlert(false);
-            pushNotifications({
-                title: '',
-                message: 'Skip success',
-                type: 'success',
-            });
-        }
-        else {
-            pushNotifications({
-                title: '',
-                message: res === null || res === void 0 ? void 0 : res.messages,
-                type: 'danger',
-            });
-        }
-        setLoading(false);
-    }), []);
-    return (React__default.createElement(Popover, { width: 327, withArrow: true, shadow: "md", opened: showAlert },
-        React__default.createElement(Popover.Target, null,
-            React__default.createElement("div", Object.assign({ className: `${styles.skipBtn} ${(rest === null || rest === void 0 ? void 0 : rest.className) || ''}`, onClick: () => setShowAlert(true) }, rest), btnText || t('profilePanel.questionNotClear'))),
-        React__default.createElement(Popover.Dropdown, null,
-            React__default.createElement("div", null,
-                React__default.createElement("div", { className: styles.alertHeading }, t('profilePanel.skipQuestion.heading')),
-                React__default.createElement("div", { className: styles.alertDesc }, t('profilePanel.skipQuestion.content')),
-                React__default.createElement("div", { className: styles.alertAction },
-                    React__default.createElement(Button, { size: "md", variant: "secondary", leftIcon: React__default.createElement(Close, { color: _theme.fn.primaryColor(), size: 24 }), onClick: () => setShowAlert(false), styles: () => ({
-                            leftIcon: {
-                                marginRight: 0,
-                            },
-                        }) }),
-                    React__default.createElement(Button, { variant: "primary", size: "md", leftIcon: React__default.createElement(Check, { color: 'white', size: 24 }), onClick: handleSkip, loading: loading, "data-event-category": "Together", "data-event-action": "Unclear Question Click", "data-event-label": currentPageUrl, styles: () => ({
-                            leftIcon: {
-                                marginRight: 0,
-                            },
-                        }) }))))));
-};
-
-export { CreateNewPostContent as C, SkipQuestionOfExpertBtn as S, TopicSelectList as T, CreatePostDescription as a, CreatePostTitle as b };