@hhgtech/hhg-components 1.29.82 → 1.29.84

package/build/{index-2afbeb3d.js → index-f0cd2973.js}

@@ -1,43 +1,47 @@
 'use strict';
 
 var React = require('react');
-var index$3 = require('./index-f222ee45.js');
-var index$7 = require('./index-54aeefca.js');
-var index$5 = require('./index-1fdf2f01.js');
-var utils = require('./utils-15a9772e.js');
+var index$3 = require('./index-83259c86.js');
+var index$7 = require('./index-7efe7581.js');
+var index$5 = require('./index-4184d8d6.js');
+var utils = require('./utils-7effa670.js');
 var ReactDOM = require('react-dom');
-var togetherComponentGlobalContext = require('./utils-169c6a7d.js');
+var togetherComponentGlobalContext = require('./utils-62afd8c7.js');
 var styled = require('@emotion/styled');
-var theme = require('./theme-be20929b.js');
-var tslib_es6 = require('./tslib.es6-bd3f8718.js');
-var index$b = require('./index-7953fb8e.js');
-var useTranslations = require('./useTranslations-685f989b.js');
-var dataTransform = require('./dataTransform-e39297c1.js');
-var constants = require('./constants-a78fa8b3.js');
-var index$a = require('./index-4cdcdbbe.js');
-var index$1 = require('./index-71843eb4.js');
+var miscTheme = require('./miscTheme.js');
+var tslib_es6 = require('./tslib.es6-a7663f7d.js');
+var index$a = require('./index-672f0358.js');
+var useTranslations = require('./useTranslations-ec613f5a.js');
+var dataTransform = require('./dataTransform-9de4c42b.js');
+var constants = require('./constants-bea20f60.js');
+var togetherApiPaths = require('./togetherApiPaths.js');
+var index$9 = require('./index-71618efb.js');
+var index$1 = require('./index-6c5d8ad9.js');
 var debounce = require('lodash/debounce');
-var cookieHelper = require('./cookieHelper-86ae022e.js');
-var useUniqueId = require('./useUniqueId-1af8848e.js');
+var miscCookieHelper = require('./miscCookieHelper.js');
+var useUniqueId = require('./useUniqueId-b5967fd3.js');
 var core = require('@mantine/core');
 var other = require('@hhgtech/icons/other');
-var index$4 = require('./index-dff7ee1b.js');
-var defaultClassWrapper = require('./defaultClassWrapper-b7719693.js');
+var index$b = require('./index-6c91ec06.js');
+var index$4 = require('./index-848c257f.js');
+var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
 var dayjs = require('dayjs');
 var core$1 = require('@hhgtech/icons/core');
-var index$6 = require('./index-64d8db08.js');
-var index$c = require('./index-1f3fc2e3.js');
+var index$6 = require('./index-e0d59d3e.js');
+var index$c = require('./index-3ae93a30.js');
 require('@mantine/dates');
-var index$9 = require('./index-e3bbd009.js');
-require('./useMantineLocale-0d63dfea.js');
-var index$d = require('./index-3eb666e6.js');
+require('./index-1f94d57c.js');
+require('./useMantineLocale-30235874.js');
+var index$d = require('./index-353ce6f8.js');
 require('@mantine/hooks');
+require('./other-b4596d33.js');
 var relativeTime = require('dayjs/plugin/relativeTime');
-var index$2 = require('./index-16ed0d98.js');
+var index$2 = require('./index-567f7d66.js');
 var react = require('@emotion/react');
-var index$8 = require('./index-405faafa.js');
+var index$8 = require('./index-a3320ed8.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
 var useTogetherAuthRequiredAction = require('./useTogetherAuthRequiredAction.js');
-require('./translationsContext-00fdb62e.js');
+require('./translationsContext-22b4034f.js');
 require('string-format');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -146,9 +150,9 @@ const StyledPopup$2 = styled__default["default"].div `
   position: fixed;
   left: 50%;
   width: 343px;
-  background-color: ${theme.theme.colors.white};
-  border-radius: ${theme.theme.borderRadius};
-  box-shadow: 0px 0px 4px ${theme.theme.colors.gray200};
+  background-color: ${miscTheme.theme.colors.white};
+  border-radius: ${miscTheme.theme.borderRadius};
+  box-shadow: 0px 0px 4px ${miscTheme.theme.colors.gray200};
   transform: translate(-50%, -50%);
   transition: all 0.5s ease-in-out;
 
@@ -204,8 +208,8 @@ const StyledPopup$2 = styled__default["default"].div `
 
   .main-info {
     padding-bottom: 32px;
-    background-color: ${theme.theme.colors.primary50};
-    border-radius: ${theme.theme.borderRadius};
+    background-color: ${miscTheme.theme.colors.primary50};
+    border-radius: ${miscTheme.theme.borderRadius};
     .btn-booking {
       display: flex;
       margin: 12px auto;
@@ -327,7 +331,7 @@ styled__default["default"].div `
   justify-content: center;
   padding: 1rem 2rem;
   background: white;
-  border-radius: ${theme.theme.borderRadius};
+  border-radius: ${miscTheme.theme.borderRadius};
   box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
     -2px 2px 5px rgba(67, 86, 100, 0.123689);
   .loading-spinner {
@@ -357,7 +361,7 @@ const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId,
             setIsLoading(true);
             try {
                 setDoctorInfo(null);
-                togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getCarePath(togetherComponentGlobalContext.CARE_PATHS.GET_DOCTOR_INFO, {
+                togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getCarePath(togetherApiPaths.CARE_PATHS.GET_DOCTOR_INFO, {
                     doctorId: doctorId,
                     website_url: togetherComponentGlobalContext.domainLocales[locale],
                 }), 'get').then((res) => {
@@ -410,7 +414,7 @@ const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId,
                         React__default["default"].createElement(index$5.Text, { size: "s3", weight: "semiBold", className: "full-name" }, doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.name),
                         React__default["default"].createElement("div", { className: "specialty" },
                             specialtiesList && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                                React__default["default"].createElement(index$5.Text, { size: "p4", color: theme.theme.colors.gray800 },
+                                React__default["default"].createElement(index$5.Text, { size: "p4", color: miscTheme.theme.colors.gray800 },
                                     specialtiesList,
                                     ' • '))),
                             React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareHospitalUrl({
@@ -419,7 +423,7 @@ const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId,
                                     slug: (_c = doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.organization) === null || _c === void 0 ? void 0 : _c.slug,
                                     locale,
                                 }), className: "organisation", target: "_blank", rel: "noreferrer" },
-                                React__default["default"].createElement(index$5.Text, { size: "p4", className: "organisation", color: theme.theme.colors.gray800, style: { textDecoration: 'underline' } }, doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.organization.name))))),
+                                React__default["default"].createElement(index$5.Text, { size: "p4", className: "organisation", color: miscTheme.theme.colors.gray800, style: { textDecoration: 'underline' } }, doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.organization.name))))),
                 !isMobile && (React__default["default"].createElement("div", { className: "btn-wrapper" },
                     React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareDoctorUrl({
                             name: doctorInfo.name,
@@ -429,7 +433,7 @@ const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId,
                         React__default["default"].createElement(index$3.Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment')))))),
             formattedExperiences && (React__default["default"].createElement(StyledTitleContainer$2, null,
                 React__default["default"].createElement("div", { className: "experience" },
-                    React__default["default"].createElement(index$5.Text, { weight: "bold", size: "s3", color: theme.theme.colors.gray800, style: { paddingBottom: 16 } }, t('expert.content.description').toUpperCase()),
+                    React__default["default"].createElement(index$5.Text, { weight: "bold", size: "s3", color: miscTheme.theme.colors.gray800, style: { paddingBottom: 16 } }, t('expert.content.description').toUpperCase()),
                     React__default["default"].createElement(StyledExperienceList, null, formattedExperiences.map((experience, i) => (React__default["default"].createElement("li", { key: i },
                         React__default["default"].createElement(index$5.Text, { size: "p2" }, renderExperienceText(experience)))))),
                     isMobile ? (React__default["default"].createElement("div", { className: "btn-wrapper" },
@@ -459,9 +463,9 @@ const StyledPopup$1 = styled__default["default"].div `
   position: fixed;
   left: 50%;
   width: 343px;
-  background-color: ${theme.theme.colors.white};
-  border-radius: ${theme.theme.borderRadius};
-  box-shadow: 0px 0px 4px ${theme.theme.colors.gray200};
+  background-color: ${miscTheme.theme.colors.white};
+  border-radius: ${miscTheme.theme.borderRadius};
+  box-shadow: 0px 0px 4px ${miscTheme.theme.colors.gray200};
   transform: translate(-50%, -50%);
   transition: all 0.5s ease-in-out;
 
@@ -517,8 +521,8 @@ const StyledPopup$1 = styled__default["default"].div `
 
   .main-info {
     padding-bottom: 32px;
-    background-color: ${theme.theme.colors.primary50};
-    border-radius: ${theme.theme.borderRadius};
+    background-color: ${miscTheme.theme.colors.primary50};
+    border-radius: ${miscTheme.theme.borderRadius};
 
     .avatar-title {
       position: relative;
@@ -638,7 +642,7 @@ const PopupExpert = ({ trackingCategory = 'Together', locale, isOpen = true, onC
             setIsLoading(true);
             try {
                 setExpertInfo(null);
-                togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getDiscoverApiPath(togetherComponentGlobalContext.DISCOVER_PATHS.GET_EXPERT_BY_ID, {
+                togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getDiscoverApiPath(togetherApiPaths.DISCOVER_PATHS.GET_EXPERT_BY_ID, {
                     id: expertId,
                 }), 'get').then((res) => {
                     setExpertInfo(Object.assign(Object.assign({}, res === null || res === void 0 ? void 0 : res.data), overwriteProfileProps));
@@ -665,14 +669,14 @@ const PopupExpert = ({ trackingCategory = 'Together', locale, isOpen = true, onC
                     React__default["default"].createElement(StyledTitleContainer$1, null,
                         React__default["default"].createElement(index$5.Text, { size: "s3", className: "full-name", weight: "semiBold" }, expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.display_name),
                         React__default["default"].createElement("div", null,
-                            React__default["default"].createElement(index$5.Text, { size: "p4", color: theme.theme.colors.gray800 }, expertInfo === null || expertInfo === void 0 ? void 0 :
+                            React__default["default"].createElement(index$5.Text, { size: "p4", color: miscTheme.theme.colors.gray800 }, expertInfo === null || expertInfo === void 0 ? void 0 :
                                 expertInfo.specialty,
                                 ' • '),
                             React__default["default"].createElement("a", { href: expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.organisation_url, className: "organisation", target: "_blank", rel: "noreferrer" },
-                                React__default["default"].createElement(index$5.Text, { size: "p4", className: "organisation", color: theme.theme.colors.gray800, style: { textDecoration: 'underline' } }, expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.organisation)))))),
+                                React__default["default"].createElement(index$5.Text, { size: "p4", className: "organisation", color: miscTheme.theme.colors.gray800, style: { textDecoration: 'underline' } }, expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.organisation)))))),
             React__default["default"].createElement(StyledTitleContainer$1, null,
                 React__default["default"].createElement("div", { className: "experience" },
-                    React__default["default"].createElement(index$5.Text, { weight: "bold", size: "p4", color: theme.theme.colors.gray800, style: { paddingBottom: 16 } }, t('expert.content.description').toUpperCase()),
+                    React__default["default"].createElement(index$5.Text, { weight: "bold", size: "p4", color: miscTheme.theme.colors.gray800, style: { paddingBottom: 16 } }, t('expert.content.description').toUpperCase()),
                     React__default["default"].createElement("div", { className: "list-items" }, (expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.experiences)
                         ? expertInfo.experiences
                             .filter((e) => !!(e && (e.title || e.organization)))
@@ -680,8 +684,8 @@ const PopupExpert = ({ trackingCategory = 'Together', locale, isOpen = true, onC
                             .map((experience, index) => (React__default["default"].createElement(StyledItem, { key: index },
                             React__default["default"].createElement("img", { className: "bullet-point", src: BulletPoint, alt: "point", loading: "lazy" }),
                             React__default["default"].createElement("div", { className: "text-contain" },
-                                React__default["default"].createElement(index$7.Heading, { tag: "h6", color: theme.theme.colors.gray800 }, experience === null || experience === void 0 ? void 0 : experience.title),
-                                React__default["default"].createElement(index$5.Text, { size: "p2", color: theme.theme.colors.gray500 }, experience === null || experience === void 0 ? void 0 : experience.organization)))))
+                                React__default["default"].createElement(index$7.Heading, { tag: "h6", color: miscTheme.theme.colors.gray800 }, experience === null || experience === void 0 ? void 0 : experience.title),
+                                React__default["default"].createElement(index$5.Text, { size: "p2", color: miscTheme.theme.colors.gray500 }, experience === null || experience === void 0 ? void 0 : experience.organization)))))
                         : false),
                     React__default["default"].createElement("a", { href: expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.profile_url, style: { display: 'inline-block', paddingTop: 24 } },
                         React__default["default"].createElement(index$5.Text, { as: "span", size: "s4", color: "#2D87F3", "data-event-category": trackingCategory, "data-event-action": "See Full Doctor Profile", "data-event-label": togetherComponentGlobalContext.getCurrentBaseUrl(locale) + (expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.profile_url) }, t('home.seeExpert')))))))),
@@ -695,9 +699,9 @@ const StyledPopup = styled__default["default"].div `
   position: fixed;
   left: 50%;
   width: 343px;
-  background-color: ${theme.theme.colors.white};
-  border-radius: ${theme.theme.borderRadius};
-  box-shadow: 0px 0px 4px ${theme.theme.colors.gray200};
+  background-color: ${miscTheme.theme.colors.white};
+  border-radius: ${miscTheme.theme.borderRadius};
+  box-shadow: 0px 0px 4px ${miscTheme.theme.colors.gray200};
   transform: translate(-50%, -50%);
   transition: all 0.5s ease-in-out;
 
@@ -753,8 +757,8 @@ const StyledPopup = styled__default["default"].div `
 
   .main-info {
     padding-bottom: 32px;
-    background-color: ${theme.theme.colors.primary50};
-    border-radius: ${theme.theme.borderRadius};
+    background-color: ${miscTheme.theme.colors.primary50};
+    border-radius: ${miscTheme.theme.borderRadius};
     .btn-booking {
       display: flex;
       margin: 12px auto;
@@ -844,7 +848,7 @@ const PopupHospital = ({ isOpen = true, onClose, enableAnimation = true, hospita
             setIsLoading(true);
             try {
                 setHospitalInfo(null);
-                togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getCarePath(togetherComponentGlobalContext.CARE_PATHS.GET_HOSPITAL_INFO, {
+                togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getCarePath(togetherApiPaths.CARE_PATHS.GET_HOSPITAL_INFO, {
                     hospital_branch_id: hospitalId,
                     website_url: togetherComponentGlobalContext.domainLocales[locale],
                 }), 'get').then((res) => {
@@ -874,7 +878,7 @@ const PopupHospital = ({ isOpen = true, onClose, enableAnimation = true, hospita
                     React__default["default"].createElement(StyledTitleContainer, null,
                         React__default["default"].createElement(index$5.Text, { size: "s3", weight: "semiBold", className: "full-name" }, hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.name),
                         React__default["default"].createElement("div", { className: "specialty" },
-                            specialties && (React__default["default"].createElement(index$5.Text, { size: "p4", color: theme.theme.colors.gray800 },
+                            specialties && (React__default["default"].createElement(index$5.Text, { size: "p4", color: miscTheme.theme.colors.gray800 },
                                 formatSpecialties.join(' • '),
                                 '•')),
                             React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareHospitalUrl({
@@ -883,7 +887,7 @@ const PopupHospital = ({ isOpen = true, onClose, enableAnimation = true, hospita
                                     slug: hospitalInfo.slug,
                                     locale,
                                 }), className: "organisation", target: "_blank", rel: "noreferrer" },
-                                React__default["default"].createElement(index$5.Text, { size: "p4", className: "organisation", color: theme.theme.colors.gray800, style: { textDecoration: 'underline' } }, hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.name))))),
+                                React__default["default"].createElement(index$5.Text, { size: "p4", className: "organisation", color: miscTheme.theme.colors.gray800, style: { textDecoration: 'underline' } }, hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.name))))),
                 !isMobile && (React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareHospitalUrl({
                         id: hospitalInfo.id,
                         name: hospitalInfo.name,
@@ -894,8 +898,8 @@ const PopupHospital = ({ isOpen = true, onClose, enableAnimation = true, hospita
                         React__default["default"].createElement(index$3.Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment')))))),
             React__default["default"].createElement(StyledTitleContainer, null,
                 React__default["default"].createElement("div", { className: "experience" },
-                    React__default["default"].createElement(index$5.Text, { weight: "bold", size: "s3", color: theme.theme.colors.gray800, style: { paddingBottom: 16 } }, t('hospital.content.description').toUpperCase()),
-                    React__default["default"].createElement(index$5.Text, { size: "p2", color: theme.theme.colors.gray500 }, hospitalInfo.about),
+                    React__default["default"].createElement(index$5.Text, { weight: "bold", size: "s3", color: miscTheme.theme.colors.gray800, style: { paddingBottom: 16 } }, t('hospital.content.description').toUpperCase()),
+                    React__default["default"].createElement(index$5.Text, { size: "p2", color: miscTheme.theme.colors.gray500 }, hospitalInfo.about),
                     isMobile ? (React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareHospitalUrl({
                             id: hospitalInfo.id,
                             name: hospitalInfo.name,
@@ -971,7 +975,7 @@ const _CardAuthor = (props) => {
     const role = isAnonymous ? undefined : roleProp;
     const [openPopupExpert, setOpenPopupExpert] = React.useState(false);
     const { asPath } = router || {};
-    const currentUrl = `https://${index$9.domainLocales[locale]}${asPath}`;
+    const currentUrl = `https://${constantsDomainLocales.domainLocales[locale]}${asPath}`;
     const onAuthorClick = () => {
         if (isAnonymous || userType === 'chatbot') {
             return false;
@@ -1038,7 +1042,7 @@ const _CardAuthor = (props) => {
                             displayName,
                             userType === 'chatbot' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
                                 ' ',
-                                React__default["default"].createElement(other.ShieldCheck, { color: theme.theme.colors.primaryBase, size: 16, style: {
+                                React__default["default"].createElement(other.ShieldCheck, { color: miscTheme.theme.colors.primaryBase, size: 16, style: {
                                         display: 'inline-block',
                                         transform: 'translate(0, 2px)',
                                     } }))) : (React__default["default"].createElement(AuthorBadgeItem, null)))),
@@ -1329,8 +1333,8 @@ const uploadAndGetSrc = (file, locale, isAdmin) => typeof file === 'string'
         }
         const callApiFunction = isAdmin ? togetherComponentGlobalContext.callApiWithAdminAuth : togetherComponentGlobalContext.callApiWithAuth;
         const imageRes = yield callApiFunction(togetherComponentGlobalContext.getApiPath(isAdmin
-            ? togetherComponentGlobalContext.ADMIN_PATHS.COMMENT.IMAGE_UPLOAD
-            : togetherComponentGlobalContext.PATHS.COMMENT.IMAGE_UPLOAD, {
+            ? togetherApiPaths.ADMIN_PATHS.COMMENT.IMAGE_UPLOAD
+            : togetherApiPaths.PATHS.COMMENT.IMAGE_UPLOAD, {
             _locale: locale,
         }), 'POST', {
             data: imageFormData,
@@ -1341,7 +1345,7 @@ const uploadAndGetSrc = (file, locale, isAdmin) => typeof file === 'string'
 const likeUnlikePost = ({ id, locale, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
     if (!id)
         return;
-    const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.POST.LIKE, {
+    const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.POST.LIKE, {
         id,
         _locale: locale,
     }), 'GET');
@@ -1350,7 +1354,7 @@ const likeUnlikePost = ({ id, locale, }) => tslib_es6.__awaiter(void 0, void 0,
 const deletePost = ({ id, locale, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
     if (!id)
         return;
-    const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.POST.DELETE, {
+    const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.POST.DELETE, {
         id,
         _locale: locale,
     }), 'DELETE');
@@ -1412,7 +1416,7 @@ introUrl, bannerUrl, scheduleTime, isAnonymous, isAskDoctor, }) => tslib_es6.__a
     return bodyFormData;
 });
 const createPost = ({ locale, formData, isArticleComment, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-    const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(isArticleComment ? togetherComponentGlobalContext.PATHS.POST.CREATE_ARTICLE_COMMENT : togetherComponentGlobalContext.PATHS.POST.CREATE, {
+    const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(isArticleComment ? togetherApiPaths.PATHS.POST.CREATE_ARTICLE_COMMENT : togetherApiPaths.PATHS.POST.CREATE, {
         _locale: locale,
     }), 'POST', {
         data: formData,
@@ -1420,7 +1424,7 @@ const createPost = ({ locale, formData, isArticleComment, }) => tslib_es6.__awai
     return res;
 });
 const editPost = ({ id, locale, formData, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-    const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.POST.UPDATE, {
+    const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.POST.UPDATE, {
         id,
         _locale: locale,
     }), 'POST', {
@@ -1431,7 +1435,7 @@ const editPost = ({ id, locale, formData, }) => tslib_es6.__awaiter(void 0, void
 const reportPost = ({ id, reason, locale, }) => {
     const formData = new FormData();
     formData.append('reason', reason);
-    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.POST.REPORT, {
+    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.POST.REPORT, {
         _locale: locale,
         id,
     }), 'POST', {
@@ -1494,11 +1498,11 @@ const StyledCreatePostDescription = styled__default["default"].div `
 
   .textarea-control {
     position: relative;
-    border: 1px solid ${theme.theme.colors.gray200};
-    border-radius: ${theme.theme.borderRadius};
+    border: 1px solid ${miscTheme.theme.colors.gray200};
+    border-radius: ${miscTheme.theme.borderRadius};
     &.--focus {
-      border-color: ${theme.theme.colors.primaryBase};
-      box-shadow: 0px 0px 2px 2px ${theme.theme.colors.primary200};
+      border-color: ${miscTheme.theme.colors.primaryBase};
+      box-shadow: 0px 0px 2px 2px ${miscTheme.theme.colors.primary200};
     }
 
     .textarea-wrapper {
@@ -1515,7 +1519,7 @@ const StyledCreatePostDescription = styled__default["default"].div `
       height: 40px;
       align-items: center;
       justify-content: flex-end;
-      border-top: 1px solid ${theme.theme.colors.gray200};
+      border-top: 1px solid ${miscTheme.theme.colors.gray200};
       margin: 0 1rem;
 
       .tool-button {
@@ -1555,7 +1559,7 @@ const StyledCreatePostDescription = styled__default["default"].div `
       height: 0;
       padding-top: 67%;
       margin-top: 1rem;
-      border-radius: ${theme.theme.borderRadius};
+      border-radius: ${miscTheme.theme.borderRadius};
 
       & > img {
         position: absolute;
@@ -1580,7 +1584,7 @@ const StyledCreatePostDescription = styled__default["default"].div `
 
   .description-label {
     margin-bottom: 5px;
-    color: ${theme.theme.colors.gray600};
+    color: ${miscTheme.theme.colors.gray600};
     /* font-family: 'Open Sans', sans-serif; */
     font-size: 13px;
     font-weight: bold;
@@ -1588,7 +1592,7 @@ const StyledCreatePostDescription = styled__default["default"].div `
 
   .count-string {
     margin-top: 5px;
-    color: ${theme.theme.colors.gray500};
+    color: ${miscTheme.theme.colors.gray500};
     font-size: 11px;
     text-align: right;
   }
@@ -1647,12 +1651,12 @@ const StyledEditorContainer = styled__default["default"].div `
             .link-input-button-wrapper {
               &[data-is-marrybaby='true'] {
                 .link-input-button {
-                  border: solid 2px ${theme.theme.mbColors.pink};
-                  background-color: ${theme.theme.mbColors.pink};
+                  border: solid 2px ${miscTheme.theme.mbColors.pink};
+                  background-color: ${miscTheme.theme.mbColors.pink};
                   &:hover:not(:disabled) {
-                    border: solid 2px ${theme.theme.mbColors.pink};
-                    background-color: ${theme.theme.colors.white};
-                    color: ${theme.theme.mbColors.pink};
+                    border: solid 2px ${miscTheme.theme.mbColors.pink};
+                    background-color: ${miscTheme.theme.colors.white};
+                    color: ${miscTheme.theme.mbColors.pink};
                   }
                 }
               }
@@ -1661,7 +1665,7 @@ const StyledEditorContainer = styled__default["default"].div `
               width: auto;
               height: auto;
               padding: 0.4rem 1rem;
-              background-color: ${theme.theme.colors.primaryBase};
+              background-color: ${miscTheme.theme.colors.primaryBase};
 
               &:disabled {
                 border-color: #bfbfbf;
@@ -1670,14 +1674,14 @@ const StyledEditorContainer = styled__default["default"].div `
                 cursor: not-allowed;
               }
               &:hover:not(:disabled) {
-                background-color: ${theme.theme.colors.primaryHover};
+                background-color: ${miscTheme.theme.colors.primaryHover};
               }
             }
             .error-text {
               padding: 0;
               margin-bottom: 0.5rem;
               font-weight: 600;
-              color: ${theme.theme.colors.red700};
+              color: ${miscTheme.theme.colors.red700};
             }
           }
         }
@@ -1706,8 +1710,8 @@ const StyledEditorContainer = styled__default["default"].div `
       min-height: 100%;
       /* padding: 14px 16px; */
       border: none;
-      border-radius: ${theme.theme.borderRadius};
-      color: ${theme.theme.colors.gray800};
+      border-radius: ${miscTheme.theme.borderRadius};
+      color: ${miscTheme.theme.colors.gray800};
       font-size: 1rem;
       line-height: 1.5;
       resize: none;
@@ -1757,7 +1761,7 @@ const StyledEditorContainer = styled__default["default"].div `
   .mention-search-container {
     position: absolute;
     background: white;
-    border-radius: ${theme.theme.borderRadius};
+    border-radius: ${miscTheme.theme.borderRadius};
     filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))
       drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))
       drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
@@ -1770,7 +1774,7 @@ const StyledEditorContainer = styled__default["default"].div `
       width: 14px;
     }
     ::-webkit-scrollbar-thumb {
-      border-radius: ${theme.theme.borderRadius};
+      border-radius: ${miscTheme.theme.borderRadius};
       background-color: #d9d9d9;
       @supports (background-clip: padding-box) {
         border: 3px solid rgba(0, 0, 0, 0);
@@ -1791,7 +1795,7 @@ const StyledEditorContainer = styled__default["default"].div `
       display: flex;
       align-items: center;
       &.item-selected {
-        background-color: ${theme.theme.colors.gray100};
+        background-color: ${miscTheme.theme.colors.gray100};
       }
       .search-avatar {
         width: 40px;
@@ -2070,7 +2074,7 @@ const RichTextEditor = ({ html, onChange, className, style, onImagePickerClick,
                 url,
                 isFetching: true,
             });
-            togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.FETCH_PREVIEW, {
+            togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.FETCH_PREVIEW, {
                 _locale: locale,
             }), 'POST', {
                 data: {
@@ -2200,12 +2204,12 @@ const RichTextEditor = ({ html, onChange, className, style, onImagePickerClick,
         if (!name || !DOMRect) {
             return setFoundUsers([]);
         }
-        const res = yield ((((_e = cookieHelper.getCookie(constants.BEARER_TOKEN_COOKIE)) === null || _e === void 0 ? void 0 : _e.length) || 0) > 0
-            ? togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.SEARCH_USER, {
+        const res = yield ((((_e = miscCookieHelper.getCookie(constants.BEARER_TOKEN_COOKIE)) === null || _e === void 0 ? void 0 : _e.length) || 0) > 0
+            ? togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.SEARCH_USER, {
                 _locale: locale,
                 name: name,
             }), 'get')
-            : togetherComponentGlobalContext.callApiWithAdminAuth(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.ADMIN_PATHS.SEARCH_USER, {
+            : togetherComponentGlobalContext.callApiWithAdminAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.ADMIN_PATHS.SEARCH_USER, {
                 _locale: locale,
                 name: name,
             }), 'get'));
@@ -2373,7 +2377,7 @@ const CustomToolbar = ({ onAddLink, id, }) => {
             React__default["default"].createElement("button", { className: "ql-list", value: "bullet", type: "button" })),
         React__default["default"].createElement("span", { className: "ql-formats" },
             React__default["default"].createElement("button", { className: "ql-image", type: "button" }),
-            onAddLink && (React__default["default"].createElement(index$a.PopoverMenu, { className: "link-tool-wrapper", toggleButtonContent: React__default["default"].createElement("img", { className: "link-icon", src: IconLink, loading: "lazy" }), buttonProps: {
+            onAddLink && (React__default["default"].createElement(index$9.PopoverMenu, { className: "link-tool-wrapper", toggleButtonContent: React__default["default"].createElement("img", { className: "link-icon", src: IconLink, loading: "lazy" }), buttonProps: {
                     size: 'md',
                     color: 'transparent',
                 }, align: "end" }, ({ setShow }) => (React__default["default"].createElement(LinkToolInputPopover, { onAddUrl: onAddLink, setShow: setShow })))))));
@@ -2410,12 +2414,12 @@ const LinkToolInputPopover = ({ onAddUrl, setShow }) => {
     };
     const isValid = urlValue.trim() && textValue.trim() && urlWarnType < 0;
     return (React__default["default"].createElement("div", { className: "link-tool-popover" },
-        React__default["default"].createElement(index$b.Input, { name: "url", value: urlValue, size: "md", label: "URL", placeholder: t('placeholder.enterUrlHere'), type: "text", className: "link-input-url", onChange: (v) => {
+        React__default["default"].createElement(index$a.Input, { name: "url", value: urlValue, size: "md", label: "URL", placeholder: t('placeholder.enterUrlHere'), type: "text", className: "link-input-url", onChange: (v) => {
                 setUrlValue(v);
                 checkUrlValid(v);
             } }),
         urlWarnType >= 0 && (React__default["default"].createElement(index$5.Text, { size: "c2", className: "error-text" }, t(URL_WARN_MAP[urlWarnType]))),
-        React__default["default"].createElement(index$b.Input, { name: "text", value: textValue, size: "md", label: t('createPost.urlText'), placeholder: t('placeholder.enterUrlTextHere'), type: "text", className: "link-input-text", onChange: (v) => setTextValue(v) }),
+        React__default["default"].createElement(index$a.Input, { name: "text", value: textValue, size: "md", label: t('createPost.urlText'), placeholder: t('placeholder.enterUrlTextHere'), type: "text", className: "link-input-text", onChange: (v) => setTextValue(v) }),
         React__default["default"].createElement("div", { "data-is-marrybaby": isMarryBaby, className: "link-input-button-wrapper" },
             React__default["default"].createElement(index$3.Button, { theme: isMarryBaby ? 'marryBaby' : 'helloSites', size: "sm", color: "primary", className: "link-input-button", onClick: () => {
                     if (!isValid)
@@ -2448,7 +2452,7 @@ const StyledPopupDanger = styled__default["default"].div `
     width: 100%;
     padding-top: 44px;
     background: #fff;
-    border-radius: ${theme.theme.borderRadius};
+    border-radius: ${miscTheme.theme.borderRadius};
 
     .confirm-content {
       display: flex;
@@ -2467,7 +2471,7 @@ const StyledPopupDanger = styled__default["default"].div `
 
       .desc {
         margin-bottom: 24px;
-        color: ${theme.theme.colors.gray500};
+        color: ${miscTheme.theme.colors.gray500};
         font-size: 18px;
         line-height: 24px;
         text-align: center;
@@ -2624,7 +2628,7 @@ const StyledPopupFrame = styled__default["default"].div `
         height: 56px;
         align-items: center;
         padding: 16px 56px 16px 32px;
-        border-bottom: 1px solid ${theme.theme.colors.neutral100};
+        border-bottom: 1px solid ${miscTheme.theme.colors.neutral100};
         font-weight: 900;
         width: 100%;
         justify-content: space-between;
@@ -2676,7 +2680,7 @@ var CloseIcon = img$h;
 const PopupFrame = ({ className, style, closeIcon, heading = '', children, isOpen = false, hasFullscreen = false, onClose = () => null, }) => {
     const [expand, setExpand] = React.useState(false);
     return (React__default["default"].createElement(StyledPopupFrame, { className: className, style: style, isExpand: expand, hasFullscreen: hasFullscreen },
-        React__default["default"].createElement(dataTransform.Popup, { type: "confirm", onClose: onClose, isOpen: isOpen, closeIcon: closeIcon || React__default["default"].createElement("img", { src: CloseIcon, loading: "lazy" }), enableAnimation: !hasFullscreen },
+        React__default["default"].createElement(index$b.Popup, { type: "confirm", onClose: onClose, isOpen: isOpen, closeIcon: closeIcon || React__default["default"].createElement("img", { src: CloseIcon, loading: "lazy" }), enableAnimation: !hasFullscreen },
             React__default["default"].createElement("div", { className: "header" },
                 React__default["default"].createElement(index$7.Heading, { tag: "h5" }, heading),
                 hasFullscreen && (React__default["default"].createElement(StyledFSBtn, { onClick: () => setExpand(!expand) },
@@ -2728,7 +2732,7 @@ const StyledInputCommentBar = styled__default["default"].div `
   }
   .error-text {
     padding: 1rem;
-    color: ${theme.theme.colors.red700};
+    color: ${miscTheme.theme.colors.red700};
   }
   .reply-to-container {
     display: flex;
@@ -2765,7 +2769,7 @@ const StyledInputCommentBar = styled__default["default"].div `
       margin-right: 0.5rem;
       &[data-has-error] {
         .as-input {
-          border-color: ${theme.theme.colors.red700};
+          border-color: ${miscTheme.theme.colors.red700};
         }
       }
 
@@ -2787,17 +2791,17 @@ const StyledInputCommentBar = styled__default["default"].div `
         }
         width: 100%;
         padding: 12px 16px;
-        border: solid 1px ${theme.theme.colors.gray200};
-        border-radius: ${theme.theme.borderRadius};
+        border: solid 1px ${miscTheme.theme.colors.gray200};
+        border-radius: ${miscTheme.theme.borderRadius};
 
         &:active,
         &:focus {
-          border-color: ${theme.theme.colors.primaryBase};
-          box-shadow: 0px 0px 2px 2px ${theme.theme.colors.primary200};
+          border-color: ${miscTheme.theme.colors.primaryBase};
+          box-shadow: 0px 0px 2px 2px ${miscTheme.theme.colors.primary200};
         }
 
         &:disabled {
-          background-color: ${theme.theme.colors.gray100};
+          background-color: ${miscTheme.theme.colors.gray100};
           cursor: not-allowed;
         }
 
@@ -2829,7 +2833,7 @@ const StyledInputCommentBar = styled__default["default"].div `
       &[data-size='lg'] {
         .as-input {
           font-size: 16px;
-          font-weight: ${theme.theme.sizes.fwRegular};
+          font-weight: ${miscTheme.theme.sizes.fwRegular};
           ${utils.MediaQueries.mbDown} {
             font-size: 22px;
             line-height: 1.2;
@@ -2843,7 +2847,7 @@ const StyledInputCommentBar = styled__default["default"].div `
       }
       &[data-size='md'] {
         .as-input {
-          font-weight: ${theme.theme.sizes.fwRegular};
+          font-weight: ${miscTheme.theme.sizes.fwRegular};
           line-height: 22px;
           ${utils.MediaQueries.mbDown} {
             font-size: 14px;
@@ -2858,7 +2862,7 @@ const StyledInputCommentBar = styled__default["default"].div `
       }
       &[data-size='sm'] {
         .as-input {
-          font-weight: ${theme.theme.sizes.fwRegular};
+          font-weight: ${miscTheme.theme.sizes.fwRegular};
           line-height: 20px;
           ${utils.MediaQueries.mbDown} {
             font-size: 13px;
@@ -2891,7 +2895,7 @@ const StyledInputCommentBar = styled__default["default"].div `
       padding: 0;
       border: none;
       &.send-button-post {
-        background: ${theme.theme.colors.neutral100};
+        background: ${miscTheme.theme.colors.neutral100};
         border-radius: 50%;
       }
       .icon-enter {
@@ -2978,7 +2982,7 @@ const getCommentFormBody = ({ postId, message, photos, link, locale, sanitizeFun
     return formData;
 });
 const submitComment = (formData, locale) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.COMMENT.CREATE, {
+    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.COMMENT.CREATE, {
         _locale: locale,
     }), 'POST', {
         data: formData,
@@ -3002,20 +3006,20 @@ const decodeCommentBody = (s) => {
     };
 };
 const submitReply = (formData, locale) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.COMMENT.REPLY, {
+    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.COMMENT.REPLY, {
         _locale: locale,
     }), 'POST', {
         data: formData,
     });
 });
 const likeUnlikeComment = ({ commentId, setLike = false, locale, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(setLike ? togetherComponentGlobalContext.PATHS.COMMENT.LIKE : togetherComponentGlobalContext.PATHS.COMMENT.UNLIKE, {
+    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(setLike ? togetherApiPaths.PATHS.COMMENT.LIKE : togetherApiPaths.PATHS.COMMENT.UNLIKE, {
         _locale: locale,
         id: commentId,
     }), 'GET');
 });
 const deleteComment = ({ id, locale, }) => {
-    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.COMMENT.DELETE, {
+    return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.COMMENT.DELETE, {
         _locale: locale,
         id: id,
     }), 'DELETE');
@@ -3137,7 +3141,7 @@ const InputCommentBar = ({ isReply, className, onClose, replyToName, style, repl
         React__default["default"].createElement("div", { className: "input-container", ref: mainInput },
             React__default["default"].createElement(index$1.UserAvatar, { className: `avatar-wrapper ${isReply ? 'avatar-wrapper-reply' : ''}`, avatar: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? userInfo.avatar : constants.DEFAULT_AVATAR_IMG, username: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username) }),
             React__default["default"].createElement("input", { ref: imagePicker, onChange: onSelectImages, type: "file", multiple: true, accept: "image/png,image/jpeg", name: "images", style: { display: 'none' } }),
-            React__default["default"].createElement(index$b.Input
+            React__default["default"].createElement(index$a.Input
             // actionIcon={
             //   !isPost ? (
             //     <label className="images-input-label">
@@ -3185,14 +3189,14 @@ const InputCommentBar = ({ isReply, className, onClose, replyToName, style, repl
                 React__default["default"].createElement("img", { src: IconEnter, className: "icon-enter", loading: "lazy" }))),
         !!(invalidUrls === null || invalidUrls === void 0 ? void 0 : invalidUrls.length) ? (React__default["default"].createElement("div", { className: "error-text" }, t('notification.limitUrlDomain'))) : null,
         (!imageSrcs || imageSrcs.length === 0) && previewUrl && (React__default["default"].createElement("div", { className: "link-preview-wrapper" }, previewUrl.isFetching ? (React__default["default"].createElement(Loading$1, null)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(index$a.CardLink, { title: previewUrl.title, url: previewUrl.url || '#', image: previewUrl.image, noRefetch: true }),
+            React__default["default"].createElement(index$9.CardLink, { title: previewUrl.title, url: previewUrl.url || '#', image: previewUrl.image, noRefetch: true }),
             React__default["default"].createElement("img", { src: IconCloseCircle, className: "icon-close", onClick: () => setPreviewUrl(null), loading: "lazy" }))))),
         imageSrcs && imageSrcs.length > 0 && (React__default["default"].createElement("div", { className: "preview-images-container" }, imageSrcs.map((src, index) => (React__default["default"].createElement("div", { key: index, className: "image-src-wrapper" },
             React__default["default"].createElement("img", { className: "preview-image", src: src, loading: "lazy" }),
             React__default["default"].createElement("img", { src: IconCloseCircle, className: "icon-close-circle", onClick: () => onRemoveImage(index), loading: "lazy" }))))))));
 };
 
-const StyledItemWrapper = defaultClassWrapper.setDefaultClass(styled__default["default"].a `
+const StyledItemWrapper = miscDefaultClassWrapper.setDefaultClass(styled__default["default"].a `
     * {
       pointer-events: none;
     }
@@ -3228,7 +3232,7 @@ const StyledShare = styled__default["default"].div `
       top: 0;
       left: 0;
       width: calc(100% + 2rem);
-      border-top: 1px solid ${theme.theme.colors.neutral100};
+      border-top: 1px solid ${miscTheme.theme.colors.neutral100};
       margin-left: -1rem;
       content: '';
     }
@@ -3245,9 +3249,9 @@ const StyledShare = styled__default["default"].div `
       overflow: hidden;
       width: 100%;
       height: 40px;
-      border: 1px solid ${theme.theme.colors.gray200};
+      border: 1px solid ${miscTheme.theme.colors.gray200};
       background: #fff;
-      border-radius: ${theme.theme.borderRadius};
+      border-radius: ${miscTheme.theme.borderRadius};
 
       & > input {
         width: 100%;
@@ -3255,7 +3259,7 @@ const StyledShare = styled__default["default"].div `
         padding: 0 16px;
         border: none;
         background: transparent;
-        color: ${theme.theme.colors.gray800};
+        color: ${miscTheme.theme.colors.gray800};
 
         &:focus {
           outline: none;
@@ -3275,7 +3279,7 @@ const StyledShare = styled__default["default"].div `
           #fff 17%,
           #fff 100%
         );
-        color: ${theme.theme.colors.primaryBase};
+        color: ${miscTheme.theme.colors.primaryBase};
         cursor: pointer;
         font-size: 14px;
         font-weight: 400;
@@ -3469,7 +3473,7 @@ const ShareBox = ({ className, trackingCategory = 'Together', style, shareUrl, t
             React__default["default"].createElement(index$4.ImageWrap, { alt: `share to ${social}`, src: social.icon }),
             React__default["default"].createElement(index$5.Text, { className: "__label", size: "label2", weight: "regular" }, social.name))))),
         React__default["default"].createElement("div", { className: "share__copy-link" },
-            React__default["default"].createElement(index$5.Text, { className: "__label", color: theme.theme.colors.gray500, size: "p4", weight: "regular" }, t('orCopyLink')),
+            React__default["default"].createElement(index$5.Text, { className: "__label", color: miscTheme.theme.colors.gray500, size: "p4", weight: "regular" }, t('orCopyLink')),
             React__default["default"].createElement("div", { className: "__input-group" },
                 React__default["default"].createElement("input", { ref: input, type: "text", value: shareUrl, readOnly: true, onFocus: (e) => e.target.select() }),
                 React__default["default"].createElement("button", { className: "__copy", onClick: () => copyToClipboard() }, isMarryBaby ? (React__default["default"].createElement(index$4.ImageWrap, { alt: "copy share link", src: MBIconCopy })) : (t(copied ? 'copied' : 'copy')))))));
@@ -3513,7 +3517,7 @@ const StyledSharePopup = styled__default["default"].div `
     flex-wrap: no-wrap;
     align-items: center;
     padding: 1rem;
-    border-bottom: 1px solid ${theme.theme.colors.neutral100};
+    border-bottom: 1px solid ${miscTheme.theme.colors.neutral100};
     margin-bottom: 16px;
 
     .custom-share__header-image {
@@ -3628,7 +3632,7 @@ const SubmitReportForm = ({ className, style, reason, reasonText, onClose, postI
         React__default["default"].createElement("ul", { className: "report-list" },
             React__default["default"].createElement("li", { className: "report-item" },
                 React__default["default"].createElement("img", { src: IconAlertCircle, loading: "lazy" }),
-                React__default["default"].createElement(index$5.Text, { className: "__label", color: theme.theme.colors.gray800, size: "p4" }, reasonText))),
+                React__default["default"].createElement(index$5.Text, { className: "__label", color: miscTheme.theme.colors.gray800, size: "p4" }, reasonText))),
         React__default["default"].createElement(index$3.Button, { theme: isMarryBaby ? 'marryBaby' : 'helloSites', className: "report-submit", size: "lg", color: "primary", isLoading: loading, onClick: () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
                 if (!postId || loading)
                     return;
@@ -3834,7 +3838,7 @@ const StyledIcon$1 = styled__default["default"].div `
 `;
 
 const NotificationBar = (_a) => {
-    var { icon, bgColor = theme.theme.colors.yellow50, highlightColor = theme.theme.colors.yellow800, message } = _a, rest = tslib_es6.__rest(_a, ["icon", "bgColor", "highlightColor", "message"]);
+    var { icon, bgColor = miscTheme.theme.colors.yellow50, highlightColor = miscTheme.theme.colors.yellow800, message } = _a, rest = tslib_es6.__rest(_a, ["icon", "bgColor", "highlightColor", "message"]);
     return (React__default["default"].createElement(StyledWrapper$1, Object.assign({ bgColor: bgColor, highlight: highlightColor }, rest),
         React__default["default"].createElement(StyledInner$1, null,
             icon && React__default["default"].createElement(StyledIcon$1, null, icon),
@@ -4140,7 +4144,7 @@ const PostSingleImageViewPopup = ({ initialViewIndex, images, onClose, alt, }) =
                             React__default["default"].createElement("img", { src: ChevronRightIcon, alt: "right arrow", "data-disabled": rightDisabled, loading: "lazy" })))))))));
 };
 
-const StyledInner = defaultClassWrapper.setDefaultClass(styled__default["default"].div `
+const StyledInner = miscDefaultClassWrapper.setDefaultClass(styled__default["default"].div `
     position: absolute;
     top: 0;
     right: 0;
@@ -4317,7 +4321,7 @@ const SocialLinkPreview = ({ url, image, className, style, baseUrl = '', autoPla
             //       image: res?.image || res?.logo,
             //     }),
             //   )
-            togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.FETCH_PREVIEW, {
+            togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.FETCH_PREVIEW, {
                 _locale: locale,
             }, undefined, baseUrl), 'POST', {
                 data: {
@@ -4548,7 +4552,7 @@ const About = ({ className = '' }) => {
     const socialList = social.filter((i) => i.url);
     return (React__default["default"].createElement("div", { className: `${styles$8.container} ${className}`, "data-is-marrybaby": isMarryBaby },
         accProps.length > 0 && (React__default["default"].createElement(core.Accordion, { defaultValue: accProps[0].key, chevron: isMarryBaby ? (React__default["default"].createElement("div", { className: styles$8.mbChevronWrapper },
-                React__default["default"].createElement(core$1.Plus, { size: 12, color: theme.theme.mbColors.midGray }))) : (React__default["default"].createElement(core$1.Plus, { color: theme.theme.colors.gray400 })), styles: {
+                React__default["default"].createElement(core$1.Plus, { size: 12, color: miscTheme.theme.mbColors.midGray }))) : (React__default["default"].createElement(core$1.Plus, { color: miscTheme.theme.colors.gray400 })), styles: {
                 chevron: {
                     '&[data-rotate]': {
                         '.minus-path': {
@@ -4670,7 +4674,7 @@ const Answering = ({ id }) => {
             (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
                 var _a;
                 setLoading(true);
-                const res = yield togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.USER.LIST_ANSWERS, {
+                const res = yield togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.USER.LIST_ANSWERS, {
                     _locale: locale,
                     id,
                 }), 'GET');
@@ -4715,7 +4719,7 @@ const Care = () => {
             (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
                 var _a;
                 setFetchLoading(true);
-                const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.USER.LIST_QUESTION_NEED_REPLY, {
+                const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.USER.LIST_QUESTION_NEED_REPLY, {
                     _locale: locale,
                 }), 'GET');
                 const tmpCom = [];
@@ -4771,7 +4775,7 @@ const Care = () => {
                 marginBottom: '16px',
             },
         }), chevron: React__default["default"].createElement("div", { className: styles$3.chevron },
-            React__default["default"].createElement(other.ArrowDown, { color: theme.theme.colors.gray600, size: 20 })) }, communities.map((i) => {
+            React__default["default"].createElement(other.ArrowDown, { color: miscTheme.theme.colors.gray600, size: 20 })) }, communities.map((i) => {
         const listing = (questions && (questions === null || questions === void 0 ? void 0 : questions[i.id])) || [];
         return (listing.length > 0 && (React__default["default"].createElement(core.Accordion.Item, { key: i.id, value: String(i.id) },
             React__default["default"].createElement(core.Accordion.Control, null,
@@ -4825,7 +4829,7 @@ const Posts = () => {
             (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
                 var _a;
                 setLoading(true);
-                const res = yield togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.USER.LIST_POST, {
+                const res = yield togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.USER.LIST_POST, {
                     _locale: locale,
                     id,
                     isAnonymous: 0,
@@ -4963,12 +4967,12 @@ const ProfileDetail = (_a) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             setLoading(true);
             const res = yield Promise.all([
-                togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.USER.DETAIL, {
+                togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.USER.DETAIL, {
                     _locale: locale,
                     id,
                 }), 'GET'),
                 ...listTabsHasCount.map((i) => {
-                    return togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.USER.COUNT_TABS, {
+                    return togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.USER.COUNT_TABS, {
                         _locale: locale,
                         id,
                         [i.keyOfCountApi]: 1,