@hhgtech/hhg-components 1.29.254 → 1.29.255-beta-2

package/build/esm/index-de60e48f.js

@@ -0,0 +1,1588 @@
+import { a as __awaiter, _ as __rest } from './tslib.es6-ab8a2400.js';
+import React__default, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react';
+import { Info } from '@hhgtech/icons/other';
+import { D as Dropdown } from './index-a49af701.js';
+import { u as useTranslations } from './index-eea25cf6.js';
+import innertext from 'innertext';
+import { theme } from './miscTheme.js';
+import { I as Input$1 } from './index-ae1334ac.js';
+import { useMantineTheme, Popover } from '@mantine/core';
+import '@mantine/dates';
+import './index-048e9fc6.js';
+import './index-97675e2b.js';
+import './index-b6d97b04.js';
+import './useMantineLocale-0dbd92de.js';
+import { T as Text } from './index-0e42e7f3.js';
+import { B as Button } from './index-b3c1a701.js';
+import './index.styles-6c2014f4.js';
+import '@mantine/hooks';
+import { M as MediaQueries } from './utils-8fca923c.js';
+import './other-aa9e63cc.js';
+import './index-84f3fd36.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-a8aec5b0.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath, p as getCurrentHref, b as callApiWithAuth } from './utils-5f56b50b.js';
+import styled from '@emotion/styled';
+import { b as formatPost, c as formatTopic } from './dataTransform-c59d342b.js';
+import { M as MAX_IMAGE_UPLOADS } from './constants-58ee65bd.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-4ffa6d7b.js';
+import { C as CardAuthor, L as Loading$1 } from './index-94e45ed1.js';
+import { S as StyledCreatePostDescription, R as RichTextEditor } from './editor-673f6dc2.js';
+import { I as Input } from './index-954ba898.js';
+import debounce from 'lodash/debounce';
+import ContentEditable from 'react-contenteditable';
+import { PATHS } from './togetherApiPaths.js';
+import { L as Loading } from './index-538a8bbc.js';
+import { C as CardLink } from './index-7cec1d5a.js';
+import { B as BtnChoice } from './index-b663100e.js';
+import { L as LOCALE } from './Locale-b39bbdfa.js';
+import { Close, Check } from '@hhgtech/icons/core';
+
+const Ask = ({ size }) => {
+    return (React__default.createElement("svg", { width: size, height: size, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React__default.createElement("g", { filter: "url(#filter0_i_4664_166540)" },
+            React__default.createElement("circle", { cx: "11.9967", cy: "11.9999", r: "10.2857", fill: "#2D87F3" }),
+            React__default.createElement("circle", { cx: "11.9967", cy: "11.9999", r: "10.2857", fill: "url(#paint0_radial_4664_166540)" }),
+            React__default.createElement("circle", { cx: "11.9967", cy: "11.9999", r: "10.2857", fill: "url(#paint1_radial_4664_166540)" }),
+            React__default.createElement("circle", { cx: "11.9967", cy: "11.9999", r: "10.2857", fill: "url(#paint2_radial_4664_166540)" }),
+            React__default.createElement("circle", { cx: "11.9967", cy: "11.9999", r: "10.2857", fill: "url(#paint3_radial_4664_166540)" })),
+        React__default.createElement("mask", { id: "path-2-inside-1_4664_166540", fill: "white" },
+            React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.7157 18.4674C12.7317 18.7466 13.0316 18.914 13.2709 18.7693C14.5525 17.9944 15.6319 16.9936 16.509 15.767C17.503 14.378 18 12.8301 18 11.1232C18 10.2884 17.8438 9.50974 17.5313 8.78711C17.2188 8.06448 16.7908 7.43231 16.2473 6.89059C15.7033 6.34837 15.0688 5.92152 14.3438 5.61004C13.6188 5.29856 12.8375 5.14282 12 5.14282C10.325 5.14282 8.90625 5.72217 7.74375 6.88087C6.58125 8.03956 6 9.45367 6 11.1232C6 12.7927 6.58125 14.2068 7.74375 15.3655C8.90625 16.5242 10.325 17.1036 12 17.1036H12.2761C12.4789 17.1036 12.6466 17.2619 12.6582 17.4644L12.7157 18.4674ZM11.7825 13.2206C11.9205 13.5131 12.3366 13.5131 12.4747 13.2206L12.9337 12.2483C12.9718 12.1678 13.0367 12.103 13.1173 12.0652L14.0898 11.6091C14.3834 11.4714 14.3834 11.0538 14.0898 10.916L13.1173 10.4599C13.0367 10.4221 12.9718 10.3573 12.9337 10.2768L12.4747 9.30447C12.3366 9.01202 11.9205 9.01202 11.7825 9.30447L11.3234 10.2768C11.2854 10.3573 11.2204 10.4221 11.1398 10.4599L10.1673 10.916C9.87373 11.0538 9.87373 11.4714 10.1673 11.6091L11.1398 12.0652C11.2204 12.103 11.2854 12.1678 11.3234 12.2483L11.7825 13.2206Z" })),
+        React__default.createElement("g", { filter: "url(#filter1_i_4664_166540)" },
+            React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.7157 18.4674C12.7317 18.7466 13.0316 18.914 13.2709 18.7693C14.5525 17.9944 15.6319 16.9936 16.509 15.767C17.503 14.378 18 12.8301 18 11.1232C18 10.2884 17.8438 9.50974 17.5313 8.78711C17.2188 8.06448 16.7908 7.43231 16.2473 6.89059C15.7033 6.34837 15.0688 5.92152 14.3438 5.61004C13.6188 5.29856 12.8375 5.14282 12 5.14282C10.325 5.14282 8.90625 5.72217 7.74375 6.88087C6.58125 8.03956 6 9.45367 6 11.1232C6 12.7927 6.58125 14.2068 7.74375 15.3655C8.90625 16.5242 10.325 17.1036 12 17.1036H12.2761C12.4789 17.1036 12.6466 17.2619 12.6582 17.4644L12.7157 18.4674ZM11.7825 13.2206C11.9205 13.5131 12.3366 13.5131 12.4747 13.2206L12.9337 12.2483C12.9718 12.1678 13.0367 12.103 13.1173 12.0652L14.0898 11.6091C14.3834 11.4714 14.3834 11.0538 14.0898 10.916L13.1173 10.4599C13.0367 10.4221 12.9718 10.3573 12.9337 10.2768L12.4747 9.30447C12.3366 9.01202 11.9205 9.01202 11.7825 9.30447L11.3234 10.2768C11.2854 10.3573 11.2204 10.4221 11.1398 10.4599L10.1673 10.916C9.87373 11.0538 9.87373 11.4714 10.1673 11.6091L11.1398 12.0652C11.2204 12.103 11.2854 12.1678 11.3234 12.2483L11.7825 13.2206Z", fill: "white" })),
+        React__default.createElement("path", { d: "M13.2709 18.7693L13.2214 18.6874L13.2709 18.7693ZM12.7157 18.4674L12.6202 18.4729L12.7157 18.4674ZM16.509 15.767L16.4312 15.7113L16.4312 15.7113L16.509 15.767ZM17.5313 8.78711L17.4434 8.82509L17.5313 8.78711ZM16.2473 6.89059L16.1797 6.95836L16.2473 6.89059ZM14.3438 5.61004L14.306 5.69795H14.306L14.3438 5.61004ZM7.74375 6.88087L7.6762 6.8131L7.74375 6.88087ZM7.74375 15.3655L7.8113 15.2977L7.74375 15.3655ZM12.6582 17.4644L12.7537 17.4589L12.6582 17.4644ZM12.4747 13.2206L12.5612 13.2615L12.4747 13.2206ZM11.7825 13.2206L11.869 13.1798L11.7825 13.2206ZM12.9337 12.2483L13.0203 12.2892L12.9337 12.2483ZM13.1173 12.0652L13.1579 12.1518L13.1173 12.0652ZM14.0898 11.6091L14.0491 11.5224L14.0898 11.6091ZM14.0898 10.916L14.1304 10.8294H14.1304L14.0898 10.916ZM13.1173 10.4599L13.1579 10.3733H13.1579L13.1173 10.4599ZM12.9337 10.2768L12.8472 10.3176L12.9337 10.2768ZM12.4747 9.30447L12.5612 9.26361L12.4747 9.30447ZM11.7825 9.30447L11.6959 9.26361V9.26361L11.7825 9.30447ZM11.3234 10.2768L11.4099 10.3176L11.3234 10.2768ZM11.1398 10.4599L11.0992 10.3733L11.1398 10.4599ZM10.1673 10.916L10.1267 10.8294L10.1673 10.916ZM10.1673 11.6091L10.208 11.5224L10.1673 11.6091ZM11.1398 12.0652L11.0992 12.1518L11.1398 12.0652ZM11.3234 12.2483L11.4099 12.2075L11.3234 12.2483ZM13.2214 18.6874C13.0474 18.7926 12.8233 18.6734 12.8112 18.4619L12.6202 18.4729C12.64 18.8198 13.0159 19.0353 13.3204 18.8512L13.2214 18.6874ZM16.4312 15.7113C15.5616 16.9274 14.4918 17.9193 13.2214 18.6874L13.3204 18.8512C14.6133 18.0695 15.7022 17.0598 16.5868 15.8226L16.4312 15.7113ZM17.9043 11.1232C17.9043 12.8101 17.4136 14.3386 16.4312 15.7113L16.5868 15.8226C17.5924 14.4175 18.0957 12.8501 18.0957 11.1232H17.9043ZM17.4434 8.82509C17.7504 9.53501 17.9043 10.3007 17.9043 11.1232H18.0957C18.0957 10.2762 17.9371 9.48446 17.6191 8.74913L17.4434 8.82509ZM16.1797 6.95836C16.7144 7.4913 17.1356 8.11329 17.4434 8.82509L17.6191 8.74913C17.3019 8.01567 16.8671 7.37332 16.3148 6.82281L16.1797 6.95836ZM14.306 5.69795C15.0202 6.00479 15.6445 6.42491 16.1797 6.95836L16.3148 6.82281C15.762 6.27182 15.1173 5.83824 14.3815 5.52212L14.306 5.69795ZM12 5.23851C12.8253 5.23851 13.5936 5.39191 14.306 5.69795L14.3815 5.52212C13.6439 5.20521 12.8497 5.04714 12 5.04714V5.23851ZM7.8113 6.94864C8.95546 5.80823 10.3497 5.23851 12 5.23851V5.04714C10.3003 5.04714 8.85704 5.63612 7.6762 6.8131L7.8113 6.94864ZM6.09569 11.1232C6.09569 9.47861 6.66716 8.08904 7.8113 6.94864L7.6762 6.8131C6.49534 7.99009 5.90431 9.42873 5.90431 11.1232H6.09569ZM7.8113 15.2977C6.66716 14.1573 6.09569 12.7678 6.09569 11.1232H5.90431C5.90431 12.8177 6.49534 14.2563 7.6762 15.4333L7.8113 15.2977ZM12 17.0079C10.3497 17.0079 8.95546 16.4382 7.8113 15.2977L7.6762 15.4333C8.85704 16.6103 10.3003 17.1993 12 17.1993V17.0079ZM12.2761 17.0079H12V17.1993H12.2761V17.0079ZM12.7537 17.4589C12.7392 17.2057 12.5297 17.0079 12.2761 17.0079V17.1993C12.4282 17.1993 12.5539 17.318 12.5627 17.4699L12.7537 17.4589ZM12.8112 18.4619L12.7537 17.4589L12.5627 17.4699L12.6202 18.4729L12.8112 18.4619ZM12.3881 13.1798C12.2846 13.3991 11.9725 13.3991 11.869 13.1798L11.6959 13.2615C11.8685 13.627 12.3886 13.627 12.5612 13.2615L12.3881 13.1798ZM12.8472 12.2075L12.3881 13.1798L12.5612 13.2615L13.0203 12.2892L12.8472 12.2075ZM13.0767 11.9786C12.9759 12.0259 12.8947 12.1068 12.8472 12.2075L13.0203 12.2892C13.0488 12.2288 13.0975 12.1802 13.1579 12.1518L13.0767 11.9786ZM14.0491 11.5224L13.0767 11.9786L13.1579 12.1518L14.1304 11.6957L14.0491 11.5224ZM14.0491 11.0027C14.2694 11.106 14.2694 11.4192 14.0491 11.5224L14.1304 11.6957C14.4974 11.5236 14.4974 11.0016 14.1304 10.8294L14.0491 11.0027ZM13.0767 10.5465L14.0491 11.0027L14.1304 10.8294L13.1579 10.3733L13.0767 10.5465ZM12.8472 10.3176C12.8947 10.4183 12.9759 10.4992 13.0767 10.5465L13.1579 10.3733C13.0975 10.3449 13.0488 10.2963 13.0203 10.2359L12.8472 10.3176ZM12.3881 9.34532L12.8472 10.3176L13.0203 10.2359L12.5612 9.26361L12.3881 9.34532ZM11.869 9.34532C11.9725 9.12598 12.2846 9.12598 12.3881 9.34532L12.5612 9.26361C12.3886 8.89806 11.8685 8.89806 11.6959 9.26361L11.869 9.34532ZM11.4099 10.3176L11.869 9.34532L11.6959 9.26361L11.2369 10.2359L11.4099 10.3176ZM11.1805 10.5465C11.2812 10.4992 11.3624 10.4183 11.4099 10.3176L11.2369 10.2359C11.2083 10.2963 11.1597 10.3449 11.0992 10.3733L11.1805 10.5465ZM10.208 11.0027L11.1805 10.5465L11.0992 10.3733L10.1267 10.8294L10.208 11.0027ZM10.208 11.5224C9.98777 11.4192 9.98776 11.106 10.208 11.0027L10.1267 10.8294C9.75969 11.0016 9.75969 11.5236 10.1267 11.6957L10.208 11.5224ZM11.1805 11.9786L10.208 11.5224L10.1267 11.6957L11.0992 12.1518L11.1805 11.9786ZM11.4099 12.2075C11.3624 12.1068 11.2812 12.0259 11.1805 11.9786L11.0992 12.1518C11.1597 12.1802 11.2083 12.2288 11.2369 12.2892L11.4099 12.2075ZM11.869 13.1798L11.4099 12.2075L11.2369 12.2892L11.6959 13.2615L11.869 13.1798Z", fill: "url(#paint4_linear_4664_166540)", mask: "url(#path-2-inside-1_4664_166540)" }),
+        React__default.createElement("g", { filter: "url(#filter2_i_4664_166540)" },
+            React__default.createElement("path", { d: "M22.0963 4.65404L22.3807 5.27459C22.5111 5.55904 22.9153 5.55904 23.0456 5.27459L23.33 4.65404C23.3666 4.57438 23.4305 4.51048 23.5101 4.47396L24.1307 4.18955C24.4151 4.05918 24.4151 3.65501 24.1307 3.52463L23.5101 3.24022C23.4305 3.20371 23.3666 3.1398 23.33 3.06014L23.0456 2.43959C22.9153 2.15514 22.5111 2.15514 22.3807 2.43959L22.0963 3.06014C22.0598 3.1398 21.9959 3.20371 21.9162 3.24022L21.2957 3.52463C21.0112 3.65501 21.0112 4.05917 21.2957 4.18955L21.9162 4.47396C21.9959 4.51048 22.0598 4.57438 22.0963 4.65404Z", fill: "#2D87F3" })),
+        React__default.createElement("defs", null,
+            React__default.createElement("filter", { id: "filter0_i_4664_166540", x: "1.71094", y: "1.71423", width: "22.5703", height: "24.5714", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+                React__default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+                React__default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+                React__default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                React__default.createElement("feOffset", { dx: "2", dy: "4" }),
+                React__default.createElement("feGaussianBlur", { stdDeviation: "8" }),
+                React__default.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
+                React__default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" }),
+                React__default.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4664_166540" })),
+            React__default.createElement("filter", { id: "filter1_i_4664_166540", x: "6", y: "5.14282", width: "12.7655", height: "14.4451", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+                React__default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+                React__default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+                React__default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                React__default.createElement("feOffset", { dx: "0.765488", dy: "0.765488" }),
+                React__default.createElement("feGaussianBlur", { stdDeviation: "0.765488" }),
+                React__default.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
+                React__default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" }),
+                React__default.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4664_166540" })),
+            React__default.createElement("filter", { id: "filter2_i_4664_166540", x: "21.0859", y: "2.2262", width: "3.98924", height: "3.99315", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+                React__default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+                React__default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+                React__default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+                React__default.createElement("feOffset", { dx: "0.731427", dy: "0.731427" }),
+                React__default.createElement("feGaussianBlur", { stdDeviation: "0.731427" }),
+                React__default.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
+                React__default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" }),
+                React__default.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect1_innerShadow_4664_166540" })),
+            React__default.createElement("radialGradient", { id: "paint0_radial_4664_166540", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(24.0421 -0.4454) rotate(130.991) scale(30.1148 29.3127)" },
+                React__default.createElement("stop", { stopColor: "#3D6CFD" }),
+                React__default.createElement("stop", { offset: "1", stopColor: "#3C6BFD", stopOpacity: "0" })),
+            React__default.createElement("radialGradient", { id: "paint1_radial_4664_166540", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(0.893037 -8.6813) rotate(65.1606) scale(37.2296 21.2343)" },
+                React__default.createElement("stop", { stopColor: "#A3F1FF" }),
+                React__default.createElement("stop", { offset: "1", stopColor: "#AEF3FF", stopOpacity: "0" })),
+            React__default.createElement("radialGradient", { id: "paint2_radial_4664_166540", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(3.31808 22.2857) rotate(-45) scale(8.6368 7.70429)" },
+                React__default.createElement("stop", { stopColor: "#9EFF3F" }),
+                React__default.createElement("stop", { offset: "0.963398", stopColor: "#93FF3E", stopOpacity: "0" })),
+            React__default.createElement("radialGradient", { id: "paint3_radial_4664_166540", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(24.4386 32.3518) rotate(-119.24) scale(35.1115 12.2522)" },
+                React__default.createElement("stop", { stopColor: "#02FAF8" }),
+                React__default.createElement("stop", { offset: "1", stopColor: "#01FCFC", stopOpacity: "0" })),
+            React__default.createElement("linearGradient", { id: "paint4_linear_4664_166540", x1: "12", y1: "4.93885", x2: "12", y2: "19.0338", gradientUnits: "userSpaceOnUse" },
+                React__default.createElement("stop", { stopColor: "white" }),
+                React__default.createElement("stop", { offset: "0.0965062", stopColor: "white", stopOpacity: "0" }),
+                React__default.createElement("stop", { offset: "0.706019", stopColor: "white", stopOpacity: "0.53" }),
+                React__default.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })))));
+};
+
+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: 4px;
+      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: ${theme.colors.primaryBase};
+      box-shadow: 0px 0px 2px 2px ${theme.colors.primary200};
+    }
+    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 { 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 },
+        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;
+  }
+`;
+
+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;
+      }
+    }
+  }
+`;
+
+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;
+    }
+  }
+  .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, }) => {
+    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,
+        });
+        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: 24 }),
+                                    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 };