@hhgtech/hhg-components 1.29.76 → 1.29.78

package/build/{types-8103df55.js → types-bc9b7ff5.js}

@@ -1,51 +1,51 @@
 'use strict';
 
 var React = require('react');
-var index$1 = require('./index-813921ef.js');
-require('./translationsContext-d76a8c6d.js');
+var index$1 = require('./index-657d308e.js');
+require('./translationsContext-bece07e0.js');
 require('string-format');
-var utils = require('./utils-83337870.js');
-var tslib_es6 = require('./tslib.es6-6abfcd13.js');
+var defaultClassWrapper = require('./defaultClassWrapper-8ac3b7f0.js');
+var tslib_es6 = require('./tslib.es6-a8c3b1ed.js');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index$d = require('./index-80b5097a.js');
-var useTranslations = require('./useTranslations-3da8d23e.js');
+var index$d = require('./index-a74e681a.js');
+var useTranslations = require('./useTranslations-ddee03e3.js');
 var innertext = require('innertext');
-var theme = require('./theme-4d2a1014.js');
-var index$9 = require('./index-48aca6d7.js');
+var theme = require('./theme-040e6fd9.js');
+var index$9 = require('./index-bd99a93f.js');
 require('@mantine/dates');
-var index$4 = require('./index-07db6c89.js');
-var index$5 = require('./index-b8cc819b.js');
-var index$a = require('./index-55261180.js');
-require('./useMantineLocale-38ffd9ae.js');
+var index$4 = require('./index-fd9e9e31.js');
+var index$5 = require('./index-d38624f2.js');
+var index$a = require('./index-8bbc5f6c.js');
+require('./useMantineLocale-67d093f5.js');
 require('@mantine/hooks');
-var utils$1 = require('./utils-526a845c.js');
-var index$8 = require('./index-83e3c045.js');
-var index$7 = require('./index-a6ab742a.js');
-var index$c = require('./index-b1720522.js');
+var utils = require('./utils-a2ad9aa3.js');
+var index$8 = require('./index-c6d8ee38.js');
+var index$7 = require('./index-de879d05.js');
+var index$c = require('./index-e1d386b9.js');
 var debounce = require('lodash/debounce');
 var ContentEditable = require('react-contenteditable');
 var core$1 = require('@hhgtech/icons/core');
-var index$6 = require('./index-159e2660.js');
-var index$2 = require('./index-8c0adaed.js');
-var cookieHelper = require('./cookieHelper-f1270aa8.js');
+var index$6 = require('./index-266faebd.js');
+var index$2 = require('./index-888fe1c7.js');
+var cookieHelper = require('./cookieHelper-6fa2ed3a.js');
 var ReactDOM = require('react-dom');
 var styled = require('@emotion/styled');
-var index$3 = require('./index-b71ec348.js');
-var number = require('./number-eb5a9b12.js');
+var index$3 = require('./index-e76edc59.js');
+var number = require('./number-3c00e9ff.js');
 var dateFns = require('date-fns');
 var dayjs = require('dayjs');
 var relativeTime = require('dayjs/plugin/relativeTime');
 var react = require('@emotion/react');
-var index$b = require('./index-1f765864.js');
-var useUniqueId = require('./useUniqueId-889c3946.js');
-var routing = require('./routing-19724fda.js');
-require('./index.styles-77df1c2b.js');
-require('./constants-6781c0a5.js');
-require('./utils-9a87f8d9.js');
-require('./WhatsApp-6b693d67.js');
-require('./index.styled-50af6497.js');
-require('./index-5e9fdc69.js');
+var index$b = require('./index-f5c1576f.js');
+var useUniqueId = require('./useUniqueId-a3ed3f40.js');
+var routing = require('./routing-101c464a.js');
+require('./index.styles-15b57fec.js');
+require('./index-714baad1.js');
+require('./utils-bc89f5c8.js');
+require('./index-fbc4ad0a.js');
+require('./index.styled-cd56f718.js');
+require('./index-c4b66929.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -83,7 +83,7 @@ const TogetherAuthConfigContextProvider = ({ children, defaultParams, }) => {
         } }, children));
 };
 const useTogetherAuthRequiredAction = (propsParams) => {
-    const { data: { userInfo, env: { togetherBasePath }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { userInfo, env: { togetherBasePath }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { defaultParams } = React.useContext(TogetherAuthConfigContext) || {};
     const isLoggedIn = userInfo === null || userInfo === void 0 ? void 0 : userInfo.id;
     const isFirstInteract = userInfo &&
@@ -93,7 +93,7 @@ const useTogetherAuthRequiredAction = (propsParams) => {
         const params = Object.assign(Object.assign(Object.assign({}, defaultParams), propsParams), extraParams);
         if (!isLoggedIn || isFirstInteract) {
             if (!isLoggedIn) {
-                cookieHelper.deleteCookie(utils.BEARER_TOKEN_COOKIE);
+                cookieHelper.deleteCookie(defaultClassWrapper.BEARER_TOKEN_COOKIE);
             }
             if (params === null || params === void 0 ? void 0 : params._joinCommunityIds) {
                 localStorage.setItem('to_join_community_ids', JSON.stringify(Array.from(new Set((JSON.parse(localStorage.getItem('to_join_community_ids') || '[]') || [])
@@ -109,7 +109,7 @@ const useTogetherAuthRequiredAction = (propsParams) => {
             }
             const currentLocation = (params === null || params === void 0 ? void 0 : params._location) || window.location.href;
             params === null || params === void 0 ? true : delete params._location;
-            window.location.href = utils.getUrlToSignUp(currentLocation, params, togetherBasePath);
+            window.location.href = defaultClassWrapper.getUrlToSignUp(currentLocation, params, togetherBasePath);
             return null;
         }
         else {
@@ -185,7 +185,7 @@ const StyledCardLink = styled__default["default"].div `
 `;
 
 const CardLink = ({ title, url, image, logo, className, style, noRefetch, }) => {
-    const { data: { locale, env: { isMarryBaby }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale, env: { isMarryBaby }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const [hideLogo, setHideLogo] = React.useState(false);
     const _theme = core.useMantineTheme();
     const noRefetchRef = React.useRef(noRefetch);
@@ -198,7 +198,7 @@ const CardLink = ({ title, url, image, logo, className, style, noRefetch, }) =>
             if (!url)
                 return setPreviewData(null);
             setPreviewData((_data) => (Object.assign(Object.assign({}, _data), { isFetching: true })));
-            utils.callApi(utils.getApiPath(utils.PATHS.FETCH_PREVIEW, {
+            defaultClassWrapper.callApi(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.FETCH_PREVIEW, {
                 _locale: locale,
             }), 'POST', {
                 data: {
@@ -239,13 +239,13 @@ const CardLink = ({ title, url, image, logo, className, style, noRefetch, }) =>
                 !isMarryBaby && (React__default["default"].createElement("img", { className: "link-image-blur", src: displayImage, onError: (e) => {
                         if (!showDefaultRef.current) {
                             showDefaultRef.current = true;
-                            e.currentTarget.src = utils.DEFAULT_IMG;
+                            e.currentTarget.src = defaultClassWrapper.DEFAULT_IMG;
                         }
                     }, loading: "lazy" })),
                 React__default["default"].createElement("img", { className: "link-image", src: displayImage, onError: (e) => {
                         if (!showDefaultRef.current) {
                             showDefaultRef.current = true;
-                            e.currentTarget.src = utils.DEFAULT_IMG;
+                            e.currentTarget.src = defaultClassWrapper.DEFAULT_IMG;
                         }
                     }, loading: "lazy" }))),
             React__default["default"].createElement("div", { className: "link-info-container" },
@@ -292,7 +292,7 @@ var CardReactionType;
 })(CardReactionType || (CardReactionType = {}));
 const CardReactions = (_a) => {
     var { type, viewCount, loveCount = 0, replyCount = 0, replyPadding, liked, isReplied, onCommentClick, onLikeClick, onShareClick, className, style, hideCommentIcon, showingMostEngaging, isMarryBaby: isMarryBabyInit, hasShare = true, hasCountLike = true, trackingCategory = 'Together', trackingLabel = '', children } = _a, rest = tslib_es6.__rest(_a, ["type", "viewCount", "loveCount", "replyCount", "replyPadding", "liked", "isReplied", "onCommentClick", "onLikeClick", "onShareClick", "className", "style", "hideCommentIcon", "showingMostEngaging", "isMarryBaby", "hasShare", "hasCountLike", "trackingCategory", "trackingLabel", "children"]);
-    const { data: { env: { isMarryBaby: isMarryBabyEnv }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { env: { isMarryBaby: isMarryBabyEnv }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const isMarryBaby = Boolean(isMarryBabyInit)
         ? isMarryBabyInit
         : isMarryBabyEnv;
@@ -372,7 +372,7 @@ const TagTopic = (_a) => {
         styles,
         unstyled,
     });
-    const { data: { env: { togetherBasePath }, }, action: { sanitizeFunction }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { env: { togetherBasePath }, }, action: { sanitizeFunction }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const [showAll, setShowAll] = React.useState(!shortenedStyle);
     return (React__default["default"].createElement("div", Object.assign({ onClick: onClick, className: `${classes.wrapper} ${className}`, style: style }, rest),
         (showAll ? topics : topics.slice(0, shortenedNumber)).map((topic, index) => {
@@ -380,7 +380,7 @@ const TagTopic = (_a) => {
                 (topic === null || topic === void 0 ? void 0 : topic.dueDateMonth) !== 0 &&
                 (topic === null || topic === void 0 ? void 0 : topic.dueDateYear) &&
                 (topic === null || topic === void 0 ? void 0 : topic.dueDateYear) !== 0;
-            return (React__default["default"].createElement("a", { className: classes.item, key: index, "data-event-category": trackingCategory, "data-event-action": "Topic in Post Click", "data-event-label": `${utils.getCurrentBaseUrl(locale)}${togetherBasePath}${topic.url}`, href: topic.isActive && !topic.isHidden
+            return (React__default["default"].createElement("a", { className: classes.item, key: index, "data-event-category": trackingCategory, "data-event-action": "Topic in Post Click", "data-event-label": `${defaultClassWrapper.getCurrentBaseUrl(locale)}${togetherBasePath}${topic.url}`, href: topic.isActive && !topic.isHidden
                     ? `${togetherBasePath}${topic.url}/`
                     : undefined },
                 React__default["default"].createElement(index$1.Text, { size: "p4" },
@@ -472,7 +472,7 @@ const StyledLabelSortPin = styled__default["default"].div `
       }
     }
     &.label-sorting {
-      ${utils$1.MediaQueries.tdUp} {
+      ${utils.MediaQueries.tdUp} {
         padding-bottom: 1.5rem;
         margin-bottom: -0.75rem;
       }
@@ -481,7 +481,7 @@ const StyledLabelSortPin = styled__default["default"].div `
 `;
 
 const LabelSortPin = ({ label, rightLabel, onClick, color, className, style, }) => {
-    const { data: { env: { isMarryBaby }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { env: { isMarryBaby }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     return (React__default["default"].createElement(StyledLabelSortPin, { "data-is-marrybaby": isMarryBaby, "data-color": color, onClick: onClick, className: className, style: style },
         React__default["default"].createElement(index$1.Text, { className: "label-sort-pin-heading", size: isMarryBaby ? 'p4' : 'p3', weight: "bold" }, label),
         rightLabel));
@@ -494,7 +494,7 @@ var img$G = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width=
 var IconPinYellow = img$G;
 
 const LabelPin = ({ onClick, color, className, style }) => {
-    const { data: { env: { isMarryBaby }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { env: { isMarryBaby }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { t } = useTranslations.useTranslations();
     return (React__default["default"].createElement(LabelSortPin, { label: React__default["default"].createElement(React__default["default"].Fragment, null,
             isMarryBaby && (React__default["default"].createElement("img", { className: "label-sort-pin-icon", src: MBPinOrange, loading: "lazy" })),
@@ -818,7 +818,7 @@ const StyledTree = styled__default["default"].div `
 `;
 
 const PopoverMenu = ({ className, style, toggleButtonContent, position = 'bottom', align = 'end', children, buttonProps, }) => {
-    const { data: { env: { isMarryBaby }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { env: { isMarryBaby }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const [isShow, setIsShow] = React.useState(false);
     const popoverContent = React.useRef(null);
     const isShowRef = React.useRef(isShow);
@@ -919,7 +919,7 @@ var LabelSortingValue;
     LabelSortingValue["popular"] = "popular";
 })(LabelSortingValue || (LabelSortingValue = {}));
 const LabelSorting = ({ onChange, className, style, leftLabel, rightLabel, color, value, choices, }) => {
-    const { data: { env: { isMarryBaby }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { env: { isMarryBaby }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     return (React__default["default"].createElement(LabelSortPin, { label: leftLabel, rightLabel: React__default["default"].createElement(TreePopoverMenu, { position: "bottom", align: "end", data: {
                 isShowheader: false,
                 type: 'list',
@@ -1030,7 +1030,7 @@ const StyledPopup$2 = styled__default["default"].div `
   transform: translate(-50%, -50%);
   transition: all 0.5s ease-in-out;
 
-  ${utils$1.MediaQueries.tdUp} {
+  ${utils.MediaQueries.tdUp} {
     width: 750px;
   }
 
@@ -1050,7 +1050,7 @@ const StyledPopup$2 = styled__default["default"].div `
   }
 
   .popup-content {
-    ${utils$1.MediaQueries.mbDown} {
+    ${utils.MediaQueries.mbDown} {
       display: block;
     }
     display: flex;
@@ -1235,9 +1235,9 @@ const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId,
             setIsLoading(true);
             try {
                 setDoctorInfo(null);
-                utils.callApi(utils.getCarePath(utils.CARE_PATHS.GET_DOCTOR_INFO, {
+                defaultClassWrapper.callApi(defaultClassWrapper.getCarePath(defaultClassWrapper.CARE_PATHS.GET_DOCTOR_INFO, {
                     doctorId: doctorId,
-                    website_url: utils.domainLocales[locale],
+                    website_url: defaultClassWrapper.domainLocales[locale],
                 }), 'get').then((res) => {
                     setDoctorInfo(Object.assign(Object.assign({}, res === null || res === void 0 ? void 0 : res._data.doctor), overwriteProfileProps));
                 });
@@ -1291,7 +1291,7 @@ const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId,
                                 React__default["default"].createElement(index$1.Text, { size: "p4", color: theme.theme.colors.gray800 },
                                     specialtiesList,
                                     ' • '))),
-                            React__default["default"].createElement("a", { href: utils.getCareHospitalUrl({
+                            React__default["default"].createElement("a", { href: defaultClassWrapper.getCareHospitalUrl({
                                     id: (_a = doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.organization) === null || _a === void 0 ? void 0 : _a.id,
                                     name: (_b = doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.organization) === null || _b === void 0 ? void 0 : _b.name,
                                     slug: (_c = doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.organization) === null || _c === void 0 ? void 0 : _c.slug,
@@ -1299,7 +1299,7 @@ const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId,
                                 }), className: "organisation", target: "_blank", rel: "noreferrer" },
                                 React__default["default"].createElement(index$1.Text, { size: "p4", className: "organisation", color: theme.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: utils.getCareDoctorUrl({
+                    React__default["default"].createElement("a", { href: defaultClassWrapper.getCareDoctorUrl({
                             name: doctorInfo.name,
                             id: doctorInfo.id,
                             locale: locale,
@@ -1311,18 +1311,18 @@ const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId,
                     React__default["default"].createElement(StyledExperienceList, null, formattedExperiences.map((experience, i) => (React__default["default"].createElement("li", { key: i },
                         React__default["default"].createElement(index$1.Text, { size: "p2" }, renderExperienceText(experience)))))),
                     isMobile ? (React__default["default"].createElement("div", { className: "btn-wrapper" },
-                        React__default["default"].createElement("a", { href: utils.getCareDoctorUrl({
+                        React__default["default"].createElement("a", { href: defaultClassWrapper.getCareDoctorUrl({
                                 name: doctorInfo.name,
                                 id: doctorInfo.id,
                                 locale: locale,
                             }) },
-                            React__default["default"].createElement(index$6.Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment'))))) : (React__default["default"].createElement("a", { href: utils.getCareDoctorUrl({
+                            React__default["default"].createElement(index$6.Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment'))))) : (React__default["default"].createElement("a", { href: defaultClassWrapper.getCareDoctorUrl({
                             name: doctorInfo.name,
                             id: doctorInfo.id,
                             locale: locale,
                         }) },
-                        React__default["default"].createElement(index$1.Text, { size: "s4", color: "#2D87F3", style: { paddingTop: 24 }, "data-event-category": trackingCategory, "data-event-action": "See Full Doctor Profile", "data-event-label": utils.getCurrentBaseUrl(locale) +
-                                utils.getCareDoctorUrl({
+                        React__default["default"].createElement(index$1.Text, { size: "s4", color: "#2D87F3", style: { paddingTop: 24 }, "data-event-category": trackingCategory, "data-event-action": "See Full Doctor Profile", "data-event-label": defaultClassWrapper.getCurrentBaseUrl(locale) +
+                                defaultClassWrapper.getCareDoctorUrl({
                                     name: doctorInfo.name,
                                     id: doctorInfo.id,
                                     locale: locale,
@@ -1343,7 +1343,7 @@ const StyledPopup$1 = styled__default["default"].div `
   transform: translate(-50%, -50%);
   transition: all 0.5s ease-in-out;
 
-  ${utils$1.MediaQueries.tdUp} {
+  ${utils.MediaQueries.tdUp} {
     width: 750px;
   }
 
@@ -1363,7 +1363,7 @@ const StyledPopup$1 = styled__default["default"].div `
   }
 
   .popup-content {
-    ${utils$1.MediaQueries.mbDown} {
+    ${utils.MediaQueries.mbDown} {
       display: block;
     }
     display: flex;
@@ -1516,7 +1516,7 @@ const PopupExpert = ({ trackingCategory = 'Together', locale, isOpen = true, onC
             setIsLoading(true);
             try {
                 setExpertInfo(null);
-                utils.callApi(utils.getDiscoverApiPath(utils.DISCOVER_PATHS.GET_EXPERT_BY_ID, {
+                defaultClassWrapper.callApi(defaultClassWrapper.getDiscoverApiPath(defaultClassWrapper.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));
@@ -1562,7 +1562,7 @@ const PopupExpert = ({ trackingCategory = 'Together', locale, isOpen = true, onC
                                 React__default["default"].createElement(index$1.Text, { size: "p2", color: theme.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$1.Text, { as: "span", size: "s4", color: "#2D87F3", "data-event-category": trackingCategory, "data-event-action": "See Full Doctor Profile", "data-event-label": utils.getCurrentBaseUrl(locale) + (expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.profile_url) }, t('home.seeExpert')))))))),
+                        React__default["default"].createElement(index$1.Text, { as: "span", size: "s4", color: "#2D87F3", "data-event-category": trackingCategory, "data-event-action": "See Full Doctor Profile", "data-event-label": defaultClassWrapper.getCurrentBaseUrl(locale) + (expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.profile_url) }, t('home.seeExpert')))))))),
         React__default["default"].createElement(StyledPopupWrapper$1, { "data-open": isOpen, onClick: (e) => {
                 e.stopPropagation();
                 onClose();
@@ -1579,7 +1579,7 @@ const StyledPopup = styled__default["default"].div `
   transform: translate(-50%, -50%);
   transition: all 0.5s ease-in-out;
 
-  ${utils$1.MediaQueries.tdUp} {
+  ${utils.MediaQueries.tdUp} {
     width: 750px;
   }
 
@@ -1599,7 +1599,7 @@ const StyledPopup = styled__default["default"].div `
   }
 
   .popup-content {
-    ${utils$1.MediaQueries.mbDown} {
+    ${utils.MediaQueries.mbDown} {
       display: block;
     }
     display: flex;
@@ -1722,9 +1722,9 @@ const PopupHospital = ({ isOpen = true, onClose, enableAnimation = true, hospita
             setIsLoading(true);
             try {
                 setHospitalInfo(null);
-                utils.callApi(utils.getCarePath(utils.CARE_PATHS.GET_HOSPITAL_INFO, {
+                defaultClassWrapper.callApi(defaultClassWrapper.getCarePath(defaultClassWrapper.CARE_PATHS.GET_HOSPITAL_INFO, {
                     hospital_branch_id: hospitalId,
-                    website_url: utils.domainLocales[locale],
+                    website_url: defaultClassWrapper.domainLocales[locale],
                 }), 'get').then((res) => {
                     setHospitalInfo(Object.assign(Object.assign({}, res === null || res === void 0 ? void 0 : res._data.branch), overwriteProfileProps));
                 });
@@ -1755,14 +1755,14 @@ const PopupHospital = ({ isOpen = true, onClose, enableAnimation = true, hospita
                             specialties && (React__default["default"].createElement(index$1.Text, { size: "p4", color: theme.theme.colors.gray800 },
                                 formatSpecialties.join(' • '),
                                 '•')),
-                            React__default["default"].createElement("a", { href: utils.getCareHospitalUrl({
+                            React__default["default"].createElement("a", { href: defaultClassWrapper.getCareHospitalUrl({
                                     id: hospitalInfo.id,
                                     name: hospitalInfo.name,
                                     slug: hospitalInfo.slug,
                                     locale,
                                 }), className: "organisation", target: "_blank", rel: "noreferrer" },
                                 React__default["default"].createElement(index$1.Text, { size: "p4", className: "organisation", color: theme.theme.colors.gray800, style: { textDecoration: 'underline' } }, hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.name))))),
-                !isMobile && (React__default["default"].createElement("a", { href: utils.getCareHospitalUrl({
+                !isMobile && (React__default["default"].createElement("a", { href: defaultClassWrapper.getCareHospitalUrl({
                         id: hospitalInfo.id,
                         name: hospitalInfo.name,
                         slug: hospitalInfo.slug,
@@ -1774,21 +1774,21 @@ const PopupHospital = ({ isOpen = true, onClose, enableAnimation = true, hospita
                 React__default["default"].createElement("div", { className: "experience" },
                     React__default["default"].createElement(index$1.Text, { weight: "bold", size: "s3", color: theme.theme.colors.gray800, style: { paddingBottom: 16 } }, t('hospital.content.description').toUpperCase()),
                     React__default["default"].createElement(index$1.Text, { size: "p2", color: theme.theme.colors.gray500 }, hospitalInfo.about),
-                    isMobile ? (React__default["default"].createElement("a", { href: utils.getCareHospitalUrl({
+                    isMobile ? (React__default["default"].createElement("a", { href: defaultClassWrapper.getCareHospitalUrl({
                             id: hospitalInfo.id,
                             name: hospitalInfo.name,
                             slug: hospitalInfo.slug,
                             locale,
                         }) },
                         React__default["default"].createElement("div", { className: "btn-wrapper" },
-                            React__default["default"].createElement(index$6.Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment'))))) : (React__default["default"].createElement("a", { href: utils.getCareHospitalUrl({
+                            React__default["default"].createElement(index$6.Button, { color: "primary", size: "md", className: "btn-booking" }, t('careBooking.bookAnAppointment'))))) : (React__default["default"].createElement("a", { href: defaultClassWrapper.getCareHospitalUrl({
                             id: hospitalInfo.id,
                             name: hospitalInfo.name,
                             slug: hospitalInfo.slug,
                             locale,
                         }) },
-                        React__default["default"].createElement(index$1.Text, { size: "s4", color: "#2D87F3", as: "span", "data-event-category": trackingCategory, "data-event-action": "See Full Hospital Profile", "data-event-label": utils.getCurrentBaseUrl(locale) +
-                                utils.getCareHospitalUrl({
+                        React__default["default"].createElement(index$1.Text, { size: "s4", color: "#2D87F3", as: "span", "data-event-category": trackingCategory, "data-event-action": "See Full Hospital Profile", "data-event-label": defaultClassWrapper.getCurrentBaseUrl(locale) +
+                                defaultClassWrapper.getCareHospitalUrl({
                                     id: hospitalInfo.id,
                                     name: hospitalInfo.name,
                                     slug: hospitalInfo.slug,
@@ -1832,7 +1832,7 @@ const ProfileDetailModal = ({ open, onClose, children, profileModalProps, }) =>
 dayjs__default["default"].extend(relativeTime__default["default"]);
 const _CardAuthor = (props) => {
     const { className = '', community, name, username, url, avatar: avatarProp, role: roleProp, title, userType = 'user', expertId, specialty, organisation, isMarryBaby: isMarryBabyProp, doctorId, hospitalId, hasQuickBooking, handleMakeAppointment, communityTrackingAttr, isAnonymous, showDetailPopup, subLine, authActionWrapper, profileProps, profileModalProps, extendEle, avatarProps, hideInfo, timeText, onCloseFromPost, avatarIcon, badgeIconSize, hideBackground, children, styles, dataEventCategory, dataEventAction, dataEventLabel, } = props;
-    const { data: { locale, router, env: { isMarryBaby: isMarryBabyContext, togetherBasePath }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale, router, env: { isMarryBaby: isMarryBabyContext, togetherBasePath }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { isMobile } = index$9.useScreenSize();
     const { t } = useTranslations.useTranslations();
     const { classes } = useStyles$1(undefined, 
@@ -1862,7 +1862,7 @@ const _CardAuthor = (props) => {
         }
     };
     React.useEffect(() => {
-        utils$1.toggleNoScroll(openPopupExpert);
+        utils.toggleNoScroll(openPopupExpert);
     }, [openPopupExpert]);
     const [open, setOpen] = React.useState(false);
     const isExpert = (props === null || props === void 0 ? void 0 : props.role) === 'expert';
@@ -2349,10 +2349,10 @@ const uploadAndGetSrc = (file, locale, isAdmin) => typeof file === 'string'
             });
             imageFormData.append('image', compressed);
         }
-        const callApiFunction = isAdmin ? utils.callApiWithAdminAuth : utils.callApiWithAuth;
-        const imageRes = yield callApiFunction(utils.getApiPath(isAdmin
-            ? utils.ADMIN_PATHS.COMMENT.IMAGE_UPLOAD
-            : utils.PATHS.COMMENT.IMAGE_UPLOAD, {
+        const callApiFunction = isAdmin ? defaultClassWrapper.callApiWithAdminAuth : defaultClassWrapper.callApiWithAuth;
+        const imageRes = yield callApiFunction(defaultClassWrapper.getApiPath(isAdmin
+            ? defaultClassWrapper.ADMIN_PATHS.COMMENT.IMAGE_UPLOAD
+            : defaultClassWrapper.PATHS.COMMENT.IMAGE_UPLOAD, {
             _locale: locale,
         }), 'POST', {
             data: imageFormData,
@@ -2363,7 +2363,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 utils.callApiWithAuth(utils.getApiPath(utils.PATHS.POST.LIKE, {
+    const res = yield defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.POST.LIKE, {
         id,
         _locale: locale,
     }), 'GET');
@@ -2372,7 +2372,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 utils.callApiWithAuth(utils.getApiPath(utils.PATHS.POST.DELETE, {
+    const res = yield defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.POST.DELETE, {
         id,
         _locale: locale,
     }), 'DELETE');
@@ -2399,9 +2399,9 @@ introUrl, bannerUrl, scheduleTime, isAnonymous, isAskDoctor, }) => tslib_es6.__a
     (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.description) &&
         bodyFormData.append('preview_description', previewUrl.description);
     (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url) &&
-        bodyFormData.append('preview_link', utils$1.safeEncodeURI(previewUrl.url));
+        bodyFormData.append('preview_link', utils.safeEncodeURI(previewUrl.url));
     (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.image) &&
-        bodyFormData.append('preview_image', utils$1.safeEncodeURI(previewUrl.image));
+        bodyFormData.append('preview_image', utils.safeEncodeURI(previewUrl.image));
     topicIds === null || topicIds === void 0 ? void 0 : topicIds.forEach((topicId) => {
         bodyFormData.append('topics[]', String(topicId || ''));
     });
@@ -2414,7 +2414,7 @@ introUrl, bannerUrl, scheduleTime, isAnonymous, isAskDoctor, }) => tslib_es6.__a
                 resolve(uploadAndGetSrc(file, locale));
             }, index * 2000);
         })));
-        imageSrcs === null || imageSrcs === void 0 ? void 0 : imageSrcs.filter(Boolean).slice(0, utils.MAX_IMAGE_UPLOADS).forEach((imageFile, index) => {
+        imageSrcs === null || imageSrcs === void 0 ? void 0 : imageSrcs.filter(Boolean).slice(0, defaultClassWrapper.MAX_IMAGE_UPLOADS).forEach((imageFile, index) => {
             bodyFormData.append(`images[${index}]`, imageFile);
         });
     }
@@ -2434,7 +2434,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 utils.callApiWithAuth(utils.getApiPath(isArticleComment ? utils.PATHS.POST.CREATE_ARTICLE_COMMENT : utils.PATHS.POST.CREATE, {
+    const res = yield defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(isArticleComment ? defaultClassWrapper.PATHS.POST.CREATE_ARTICLE_COMMENT : defaultClassWrapper.PATHS.POST.CREATE, {
         _locale: locale,
     }), 'POST', {
         data: formData,
@@ -2442,7 +2442,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 utils.callApiWithAuth(utils.getApiPath(utils.PATHS.POST.UPDATE, {
+    const res = yield defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.POST.UPDATE, {
         id,
         _locale: locale,
     }), 'POST', {
@@ -2453,7 +2453,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 utils.callApiWithAuth(utils.getApiPath(utils.PATHS.POST.REPORT, {
+    return defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.POST.REPORT, {
         _locale: locale,
         id,
     }), 'POST', {
@@ -3079,7 +3079,7 @@ const RichTextEditor = ({ html, onChange, className, style, onImagePickerClick,
     bannedWordsRef.current = bannedWords;
     const [invalidUrls, setInvalidUrls] = React.useState([]);
     const [previewUrl, setPreviewUrl] = React.useState(null);
-    const { data: { locale }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const bannedString = (bannedWords === null || bannedWords === void 0 ? void 0 : bannedWords.join(',')) || '';
     React.useEffect(() => {
         var _a, _b;
@@ -3092,7 +3092,7 @@ const RichTextEditor = ({ html, onChange, className, style, onImagePickerClick,
                 url,
                 isFetching: true,
             });
-            utils.callApi(utils.getApiPath(utils.PATHS.FETCH_PREVIEW, {
+            defaultClassWrapper.callApi(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.FETCH_PREVIEW, {
                 _locale: locale,
             }), 'POST', {
                 data: {
@@ -3222,12 +3222,12 @@ const RichTextEditor = ({ html, onChange, className, style, onImagePickerClick,
         if (!name || !DOMRect) {
             return setFoundUsers([]);
         }
-        const res = yield ((((_e = cookieHelper.getCookie(utils.BEARER_TOKEN_COOKIE)) === null || _e === void 0 ? void 0 : _e.length) || 0) > 0
-            ? utils.callApiWithAuth(utils.getApiPath(utils.PATHS.SEARCH_USER, {
+        const res = yield ((((_e = cookieHelper.getCookie(defaultClassWrapper.BEARER_TOKEN_COOKIE)) === null || _e === void 0 ? void 0 : _e.length) || 0) > 0
+            ? defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.SEARCH_USER, {
                 _locale: locale,
                 name: name,
             }), 'get')
-            : utils.callApiWithAdminAuth(utils.getApiPath(utils.ADMIN_PATHS.SEARCH_USER, {
+            : defaultClassWrapper.callApiWithAdminAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.ADMIN_PATHS.SEARCH_USER, {
                 _locale: locale,
                 name: name,
             }), 'get'));
@@ -3405,7 +3405,7 @@ const URL_WARN_MAP = [
     'notification.urlWrongFormat',
 ];
 const LinkToolInputPopover = ({ onAddUrl, setShow }) => {
-    const { data: { env: { isMarryBaby }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { env: { isMarryBaby }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { t } = useTranslations.useTranslations();
     const [urlValue, setUrlValue] = React.useState('');
     const [textValue, setTextValue] = React.useState('');
@@ -3483,7 +3483,7 @@ const CreatePostDescription = ({ className, style, bannedWords = [], value, onCh
             React__default["default"].createElement(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" }))))),
         React__default["default"].createElement("input", { ref: imagePicker, type: "file", accept: "image/png, image/gif, image/jpeg", multiple: true, style: { display: 'none' }, onChange: onSelectImages }),
-        imageSrcs.length > utils.MAX_IMAGE_UPLOADS ? (React__default["default"].createElement("div", { className: "input-notification" },
+        imageSrcs.length > defaultClassWrapper.MAX_IMAGE_UPLOADS ? (React__default["default"].createElement("div", { className: "input-notification" },
             React__default["default"].createElement("img", { src: IconAlertCircleWarning, loading: "lazy" }),
             React__default["default"].createElement(index$1.Text, { size: "p4", color: theme.theme.colors.alertWarning }, t(`createPost.popup.warningImage`)))) : null,
         imageSrcs.length > 0 && (React__default["default"].createElement("div", { className: "image-gallery" }, imageSrcs.map((src, i) => (React__default["default"].createElement("div", { key: i, className: "image-item" },
@@ -3679,7 +3679,7 @@ const StyledTopicSelectList = styled__default["default"].div `
 `;
 
 const TopicSelectList = ({ className, style, topics: topicsProp, communityId, onChange, isLoading, disabled, forceTopics, selectedTopics: selectedTopicsProp, noFetch, dataEventCategory, dataEventAction, dataEventLabel, }) => {
-    const { data: { locale, env: { isMarryBaby }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale, env: { isMarryBaby }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const [topics, setTopics] = React.useState(topicsProp ? [...topicsProp] : []);
     const [selectedTopics, setSelectedTopics] = React.useState(selectedTopicsProp ? [...selectedTopicsProp] : []);
     const [isLoadingTopics, setIsLoadingTopics] = React.useState(false);
@@ -3693,7 +3693,7 @@ const TopicSelectList = ({ className, style, topics: topicsProp, communityId, on
             (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
                 var _b;
                 try {
-                    const res = yield utils.callApi(utils.getApiPath(utils.PATHS.TOPIC.LIST, {
+                    const res = yield defaultClassWrapper.callApi(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.TOPIC.LIST, {
                         communityId: communityId,
                         _locale: locale,
                     }), 'GET');
@@ -3755,7 +3755,7 @@ const TopicItem = (_a) => {
 
 const CreateNewPostContent = ({ className, style, onPostCreatedEdited, onClose, communities = [], forceSelectCommunity, forceSelectTopics, articleId, optionalTopic, editPostData, defaultCommunity, defaultTopics, noFetchTopic, hideTopicList, selectAskDoctor, showAskDoctorOptions, currentPageUrl, }) => {
     const isInEditMode = !!(editPostData === null || editPostData === void 0 ? void 0 : editPostData.id);
-    const { data: { locale, env: { isMarryBaby }, }, action: { pushNotifications, sanitizeFunction }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale, env: { isMarryBaby }, }, action: { pushNotifications, sanitizeFunction }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { t } = useTranslations.useTranslations();
     const [isAnonymous, setIsAnonymous] = React.useState(false);
     const [isAskDoctor, setIsAskDoctor] = React.useState(selectAskDoctor);
@@ -3796,7 +3796,7 @@ const CreateNewPostContent = ({ className, style, onPostCreatedEdited, onClose,
         innertext__default["default"](descriptionValue) &&
         (optionalTopic || (!optionalTopic && selectedTopics.length > 0)) &&
         currentCommunity &&
-        (!imageFiles || imageFiles.length <= utils.MAX_IMAGE_UPLOADS) &&
+        (!imageFiles || imageFiles.length <= defaultClassWrapper.MAX_IMAGE_UPLOADS) &&
         !(invalidUrls === null || invalidUrls === void 0 ? void 0 : invalidUrls.length) &&
         !isSubmitting;
     // HANDLE etra action when OPEN AND CLOSE
@@ -4095,7 +4095,7 @@ const StyledPopupDanger = styled__default["default"].div `
         overflow: hidden;
         border-radius: 1rem;
         &[data-open='true'] {
-          ${utils$1.MediaQueries.mbDown} {
+          ${utils.MediaQueries.mbDown} {
             top: 100%;
             transform: translate(-50%, -100%);
             max-width: unset;
@@ -4107,12 +4107,12 @@ const StyledPopupDanger = styled__default["default"].div `
       }
       .popup-content {
         .close-button {
-          ${utils$1.MediaQueries.mbDown} {
+          ${utils.MediaQueries.mbDown} {
             display: none;
           }
         }
         .confirm-dialog {
-          ${utils$1.MediaQueries.mbDown} {
+          ${utils.MediaQueries.mbDown} {
             background: unset;
             position: relative;
             overflow-x: hidden;
@@ -4132,7 +4132,7 @@ const StyledPopupDanger = styled__default["default"].div `
           }
           .confirm-content {
             padding: 0 40px 40px;
-            ${utils$1.MediaQueries.mbDown} {
+            ${utils.MediaQueries.mbDown} {
               padding-left: 1.5rem;
               padding-right: 1.5rem;
             }
@@ -4151,7 +4151,7 @@ const StyledPopupDanger = styled__default["default"].div `
         }
       }
       .thumbnail-container {
-        ${utils$1.MediaQueries.mbDown} {
+        ${utils.MediaQueries.mbDown} {
           display: none;
         }
         &.is-icon {
@@ -4173,7 +4173,7 @@ const StyledPopupDanger = styled__default["default"].div `
               height: 24px;
             }
           }
-          ${utils$1.MediaQueries.mbDown} {
+          ${utils.MediaQueries.mbDown} {
             display: flex;
           }
         }
@@ -4267,13 +4267,13 @@ const PopupFrame = ({ className, style, closeIcon, heading = '', children, isOpe
 };
 
 const PopupDanger = ({ className, isMarryBaby: isMarryBabyProp, style, title, description, acceptText, cancelText, onAccept, onCancel, thumbnail, isThumbnailIcon, onClose, acceptBtnTracking, acceptBtnProps, cancelBtnProps, }) => {
-    const { data: { env: { isMarryBaby: isMarryBabyContext }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { env: { isMarryBaby: isMarryBabyContext }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
     const [isOpen, setIsOpen] = React.useState(false);
     React.useEffect(() => {
-        utils$1.toggleNoScroll(true);
+        utils.toggleNoScroll(true);
         setTimeout(() => setIsOpen(true), 0);
-        return () => utils$1.toggleNoScroll(false);
+        return () => utils.toggleNoScroll(false);
     }, []);
     if (typeof window === 'undefined')
         return null;
@@ -4295,7 +4295,7 @@ const PopupDanger = ({ className, isMarryBaby: isMarryBabyProp, style, title, de
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
                             } }, cancelBtnProps), cancelText)))),
             isMarryBaby && thumbnail && (React__default["default"].createElement("div", { className: `thumbnail-container is-mobile ${isThumbnailIcon ? 'is-icon' : ''}` },
-                React__default["default"].createElement("img", { className: "thumbnail", src: thumbnail, loading: "lazy" }))))), utils$1.getPopupWrapperDom());
+                React__default["default"].createElement("img", { className: "thumbnail", src: thumbnail, loading: "lazy" }))))), utils.getPopupWrapperDom());
 };
 
 const StyledInputCommentBar = styled__default["default"].div `
@@ -4412,12 +4412,12 @@ const StyledInputCommentBar = styled__default["default"].div `
         .as-input {
           font-size: 16px;
           font-weight: ${theme.theme.sizes.fwRegular};
-          ${utils$1.MediaQueries.mbDown} {
+          ${utils.MediaQueries.mbDown} {
             font-size: 22px;
             line-height: 1.2;
           }
 
-          ${utils$1.MediaQueries.mbUp} {
+          ${utils.MediaQueries.mbUp} {
             font-size: 26px;
             line-height: 1.2;
           }
@@ -4427,12 +4427,12 @@ const StyledInputCommentBar = styled__default["default"].div `
         .as-input {
           font-weight: ${theme.theme.sizes.fwRegular};
           line-height: 22px;
-          ${utils$1.MediaQueries.mbDown} {
+          ${utils.MediaQueries.mbDown} {
             font-size: 14px;
             line-height: 1.2;
           }
 
-          ${utils$1.MediaQueries.mbUp} {
+          ${utils.MediaQueries.mbUp} {
             font-size: 16px;
             line-height: 1.2;
           }
@@ -4442,12 +4442,12 @@ const StyledInputCommentBar = styled__default["default"].div `
         .as-input {
           font-weight: ${theme.theme.sizes.fwRegular};
           line-height: 20px;
-          ${utils$1.MediaQueries.mbDown} {
+          ${utils.MediaQueries.mbDown} {
             font-size: 13px;
             line-height: 1.5;
           }
 
-          ${utils$1.MediaQueries.mbUp} {
+          ${utils.MediaQueries.mbUp} {
             font-size: 13px;
             line-height: 1.5;
           }
@@ -4538,7 +4538,7 @@ const getCommentFormBody = ({ postId, message, photos, link, locale, sanitizeFun
         const imageSrcs = yield Promise.all(photos === null || photos === void 0 ? void 0 : photos.map((file) => uploadAndGetSrc(file, locale)));
         imageSrcs
             .filter(Boolean)
-            .slice(0, utils.MAX_IMAGE_UPLOADS)
+            .slice(0, defaultClassWrapper.MAX_IMAGE_UPLOADS)
             .forEach((photo) => {
             formData.append('images[]', photo);
         });
@@ -4560,7 +4560,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 utils.callApiWithAuth(utils.getApiPath(utils.PATHS.COMMENT.CREATE, {
+    return defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.COMMENT.CREATE, {
         _locale: locale,
     }), 'POST', {
         data: formData,
@@ -4584,27 +4584,27 @@ const decodeCommentBody = (s) => {
     };
 };
 const submitReply = (formData, locale) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-    return utils.callApiWithAuth(utils.getApiPath(utils.PATHS.COMMENT.REPLY, {
+    return defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.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 utils.callApiWithAuth(utils.getApiPath(setLike ? utils.PATHS.COMMENT.LIKE : utils.PATHS.COMMENT.UNLIKE, {
+    return defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(setLike ? defaultClassWrapper.PATHS.COMMENT.LIKE : defaultClassWrapper.PATHS.COMMENT.UNLIKE, {
         _locale: locale,
         id: commentId,
     }), 'GET');
 });
 const deleteComment = ({ id, locale, }) => {
-    return utils.callApiWithAuth(utils.getApiPath(utils.PATHS.COMMENT.DELETE, {
+    return defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.COMMENT.DELETE, {
         _locale: locale,
         id: id,
     }), 'DELETE');
 };
 
 const InputCommentBar = ({ isReply, className, onClose, replyToName, style, replyingId, replyingUser, onPostSuccess, post, isMarryBaby: isMarryBabyProp, }) => {
-    const { action: { pushNotifications, sanitizeFunction }, data: { userInfo, locale, env: { isMarryBaby: isMarryBabyContext }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { action: { pushNotifications, sanitizeFunction }, data: { userInfo, locale, env: { isMarryBaby: isMarryBabyContext }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
     const { t } = useTranslations.useTranslations();
     const { onSelectImages, onRemoveImage, imageSrcs, onRemoveAllImages, imageFiles, } = useImagePicker();
@@ -4717,7 +4717,7 @@ const InputCommentBar = ({ isReply, className, onClose, replyToName, style, repl
                     } })),
             React__default["default"].createElement("img", { src: IconCloseCircleLine, className: "icon-close-comment", onClick: () => onClose && onClose(), loading: "lazy" }))),
         React__default["default"].createElement("div", { className: "input-container", ref: mainInput },
-            React__default["default"].createElement(index$7.UserAvatar, { className: `avatar-wrapper ${isReply ? 'avatar-wrapper-reply' : ''}`, avatar: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? userInfo.avatar : utils.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(index$7.UserAvatar, { className: `avatar-wrapper ${isReply ? 'avatar-wrapper-reply' : ''}`, avatar: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? userInfo.avatar : defaultClassWrapper.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$c.Input
             // actionIcon={
@@ -4774,7 +4774,7 @@ const InputCommentBar = ({ isReply, className, onClose, replyToName, style, repl
             React__default["default"].createElement("img", { src: IconCloseCircle, className: "icon-close-circle", onClick: () => onRemoveImage(index), loading: "lazy" }))))))));
 };
 
-const StyledItemWrapper = utils.setDefaultClass(styled__default["default"].a `
+const StyledItemWrapper = defaultClassWrapper.setDefaultClass(styled__default["default"].a `
     * {
       pointer-events: none;
     }
@@ -4866,7 +4866,7 @@ const StyledShare = styled__default["default"].div `
   }
 
   &[data-is-marrybaby='true'] {
-    ${utils$1.MediaQueries.mbDown} {
+    ${utils.MediaQueries.mbDown} {
       padding: 0.5rem;
     }
     .share__social {
@@ -4877,7 +4877,7 @@ const StyledShare = styled__default["default"].div `
         align-items: center;
         justify-content: center;
         text-align: center;
-        ${utils$1.MediaQueries.mbDown} {
+        ${utils.MediaQueries.mbDown} {
           margin: 0;
         }
         & > img {
@@ -5005,7 +5005,7 @@ const getSocialList = (shareUrl, isMarryBaby) => isMarryBaby
         },
     ];
 const ShareBox = ({ className, trackingCategory = 'Together', style, shareUrl, title, }) => {
-    const { action: { pushNotifications }, data: { env: { isMarryBaby }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { action: { pushNotifications }, data: { env: { isMarryBaby }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { t } = useTranslations.useTranslations();
     const input = React.useRef(null);
     const [copied, setCopied] = React.useState(false);
@@ -5058,13 +5058,13 @@ const ShareBox = ({ className, trackingCategory = 'Together', style, shareUrl, t
 };
 
 const SharePopup = ({ trackingCategory, className, style, url, avatar, text, onClose, }) => {
-    const { data: { env: { isMarryBaby }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { env: { isMarryBaby }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { t } = useTranslations.useTranslations();
     const [isOpen, setIsOpen] = React.useState(false);
     React.useEffect(() => {
-        utils$1.toggleNoScroll(true);
+        utils.toggleNoScroll(true);
         setTimeout(() => setIsOpen(true), 0);
-        return () => utils$1.toggleNoScroll(false);
+        return () => utils.toggleNoScroll(false);
     }, []);
     return (React__default["default"].createElement(core.Portal, null,
         React__default["default"].createElement(StyledSharePopup, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
@@ -5136,7 +5136,7 @@ const StyledSharePopup = styled__default["default"].div `
         overflow: hidden;
         border-radius: 1rem;
         &[data-open='true'] {
-          ${utils$1.MediaQueries.mbDown} {
+          ${utils.MediaQueries.mbDown} {
             max-width: unset;
             width: 100%;
             top: 100%;
@@ -5203,7 +5203,7 @@ var img$b = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width=
 var IconAlertCircle = img$b;
 
 const SubmitReportForm = ({ className, style, reason, reasonText, onClose, postId, }) => {
-    const { data: { locale, env: { isMarryBaby }, }, action: { pushNotifications }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale, env: { isMarryBaby }, }, action: { pushNotifications }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { t } = useTranslations.useTranslations();
     const [loading, setLoading] = React.useState(false);
     return (React__default["default"].createElement(StyledSubmitReportForm, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
@@ -5323,7 +5323,7 @@ const PostContent = (_a) => {
     const { authActionWrapper } = useTogetherAuthRequiredAction();
     const [openPopupExpert, setOpenPopupExpert] = React.useState(false);
     const description = decodeMention(decodePostUrl(rawDescription || '', 'display'), mentions);
-    const { action: { sanitizeFunction }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { action: { sanitizeFunction }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const shortenSanitizedContentData = React.useMemo(() => {
         const sanitizedContent = sanitizeFunction(description || '');
         if (disableShortenContent || showAll)
@@ -5396,7 +5396,7 @@ const StyledWrapper$1 = styled__default["default"].div `
   background: ${(props) => props.bgColor};
   border-left: 3px solid ${(props) => props.highlight};
 
-  ${utils$1.MediaQueries.mbUp} {
+  ${utils.MediaQueries.mbUp} {
     padding: 12px 12px 12px 17px;
   }
 `;
@@ -5682,7 +5682,7 @@ const StyledCircleArrow = styled__default["default"].div `
       opacity: 0.5;
     }
   }
-  ${utils$1.MediaQueries.tdUp} {
+  ${utils.MediaQueries.tdUp} {
     padding: 8px;
     > img {
       width: 30px;
@@ -5722,7 +5722,7 @@ const PostSingleImageViewPopup = ({ initialViewIndex, images, onClose, alt, }) =
                             React__default["default"].createElement("img", { src: ChevronRightIcon, alt: "right arrow", "data-disabled": rightDisabled, loading: "lazy" })))))))));
 };
 
-const StyledInner = utils.setDefaultClass(styled__default["default"].div `
+const StyledInner = defaultClassWrapper.setDefaultClass(styled__default["default"].div `
     position: absolute;
     top: 0;
     right: 0;
@@ -5795,7 +5795,7 @@ const SensitiveMask = ({ image, showIcon = true }) => {
 };
 
 const PostImagePreview = ({ className, images = [], style, authorName, isSensitive = false, alt, }) => {
-    const { data: { env: { isMarryBaby }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { env: { isMarryBaby }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { t } = useTranslations.useTranslations();
     const moreImageCount = `+ ${(images.length || 0) - 4}`;
     const [isOpenImagePreview, setIsOpenImagePreview] = React.useState(false);
@@ -5806,17 +5806,17 @@ const PostImagePreview = ({ className, images = [], style, authorName, isSensiti
     React.useEffect(() => {
         return () => {
             if (hasSetNoScroll.current) {
-                utils$1.toggleNoScroll(false);
+                utils.toggleNoScroll(false);
             }
         };
     }, []);
     React.useEffect(() => {
         if (isOpenImagePreview || singleImageViewIndex >= 0) {
-            utils$1.toggleNoScroll(true);
+            utils.toggleNoScroll(true);
             hasSetNoScroll.current = true;
         }
         else {
-            utils$1.toggleNoScroll(false);
+            utils.toggleNoScroll(false);
             hasSetNoScroll.current = false;
         }
     }, [isOpenImagePreview, singleImageViewIndex]);
@@ -5882,7 +5882,7 @@ const StyledSocialLinkPreview = styled__default["default"].div `
 `;
 
 const SocialLinkPreview = ({ url, image, className, style, baseUrl = '', autoPlay = true, }) => {
-    const { data: { locale }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const [previewData, setPreviewData] = React.useState(null);
     React.useEffect(() => {
         (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
@@ -5899,7 +5899,7 @@ const SocialLinkPreview = ({ url, image, className, style, baseUrl = '', autoPla
             //       image: res?.image || res?.logo,
             //     }),
             //   )
-            utils.callApi(utils.getApiPath(utils.PATHS.FETCH_PREVIEW, {
+            defaultClassWrapper.callApi(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.FETCH_PREVIEW, {
                 _locale: locale,
             }, undefined, baseUrl), 'POST', {
                 data: {
@@ -5983,7 +5983,7 @@ const SocialLinkPreview = ({ url, image, className, style, baseUrl = '', autoPla
             width: responsiveWidth.current,
             transform: 'translate(-50%, -50%)',
         }, scrolling: "no", frameBorder: "0", allowFullScreen: true, allow: "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share", loading: "lazy" })) : null)) : (React__default["default"].createElement("a", { href: displayUrl, target: "_blank", rel: "noreferrer" },
-        React__default["default"].createElement("div", { className: `link-image-wrapper ${(previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? 'fetching' : ''}` }, (previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? (React__default["default"].createElement(Loading$1, { className: "loading-spinner" })) : (React__default["default"].createElement(index$9.ImageWrap, { className: "link-image", src: displayImage || utils.DEFAULT_IMG, backupSrc: utils.DEFAULT_IMG, alt: displayUrl })))))));
+        React__default["default"].createElement("div", { className: `link-image-wrapper ${(previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? 'fetching' : ''}` }, (previewData === null || previewData === void 0 ? void 0 : previewData.isFetching) ? (React__default["default"].createElement(Loading$1, { className: "loading-spinner" })) : (React__default["default"].createElement(index$9.ImageWrap, { className: "link-image", src: displayImage || defaultClassWrapper.DEFAULT_IMG, backupSrc: defaultClassWrapper.DEFAULT_IMG, alt: displayUrl })))))));
 };
 
 var styles$f = {"loading":"PD6nRZX"};
@@ -6192,7 +6192,7 @@ var styles$a = {"container":"GYUElSy","question":"_3C6QpT1","questionTitle":"_9M
 const PostCard$1 = ({ post, className = '' }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { t } = useTranslations.useTranslations();
-    const { data: { userInfo, env: { togetherBasePath }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { userInfo, env: { togetherBasePath }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { authActionWrapper, authorProps, currentPageUrl } = React.useContext(ProfileDetailContext);
     const postHref = `${window.location.origin}${togetherBasePath}/${(_a = post === null || post === void 0 ? void 0 : post.community) === null || _a === void 0 ? void 0 : _a.slug}/${post === null || post === void 0 ? void 0 : post.slug}/`;
     return (React__default["default"].createElement("div", { className: `${styles$a.container} ${className}` },
@@ -6243,7 +6243,7 @@ const EmptyMessage = ({ message, buttonTxt, imgSrc, onBtnClick }) => {
 
 const Answering = ({ id }) => {
     const { t } = useTranslations.useTranslations();
-    const { data: { locale }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { authorProps } = React.useContext(ProfileDetailContext);
     const [posts, setPosts] = React.useState(null);
     const [loading, setLoading] = React.useState(false);
@@ -6252,7 +6252,7 @@ const Answering = ({ id }) => {
             (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
                 var _a;
                 setLoading(true);
-                const res = yield utils.callApi(utils.getApiPath(utils.PATHS.USER.LIST_ANSWERS, {
+                const res = yield defaultClassWrapper.callApi(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.USER.LIST_ANSWERS, {
                     _locale: locale,
                     id,
                 }), 'GET');
@@ -6272,7 +6272,7 @@ var styles$7 = {"container":"toEutn7","title":"drdisHs","actions":"scNwTvv","ski
 const QuestionCard = (_a) => {
     var _b, _c, _d, _e;
     var { post } = _a, rest = tslib_es6.__rest(_a, ["post"]);
-    const { data: { env: { togetherBasePath }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { env: { togetherBasePath }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     // const { showSkipQuestionTag } = useContext(ProfileDetailContext)
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", Object.assign({}, rest, { className: `${styles$7.container} ${(rest === null || rest === void 0 ? void 0 : rest.className) || ''}` }),
@@ -6286,7 +6286,7 @@ var styles$6 = {"accordion":"I-uIJ6E","header":"_41WRsj2","heading":"AcOGL93","h
 const Care = () => {
     var _a, _b;
     const { t } = useTranslations.useTranslations();
-    const { data: { locale, userInfo }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale, userInfo }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { onSkipQuestion, countValues, setCountValues } = React.useContext(ProfileDetailContext);
     const [questions, setQuestions] = React.useState();
     const [communities, setCommunities] = React.useState([]);
@@ -6297,7 +6297,7 @@ const Care = () => {
             (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
                 var _a;
                 setFetchLoading(true);
-                const res = yield utils.callApiWithAuth(utils.getApiPath(utils.PATHS.USER.LIST_QUESTION_NEED_REPLY, {
+                const res = yield defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.USER.LIST_QUESTION_NEED_REPLY, {
                     _locale: locale,
                 }), 'GET');
                 const tmpCom = [];
@@ -6370,7 +6370,7 @@ var styles$5 = {"container":"GA-zc-O","mainTxt":"A18McWD","question":"yzr0H0N","
 
 const PostCard = ({ post, className = '' }) => {
     var _a;
-    const { data: { userInfo, env: { togetherBasePath }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { userInfo, env: { togetherBasePath }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { t } = useTranslations.useTranslations();
     const theme = core.useMantineTheme();
     const { authActionWrapper, authorProps } = React.useContext(ProfileDetailContext);
@@ -6398,7 +6398,7 @@ var styles$4 = {"container":"TSMHoEM"};
 
 const Posts = () => {
     const { t } = useTranslations.useTranslations();
-    const { data: { locale }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { authorId: id, authorProps, isAuthorLogin, onCloseFromPost, } = React.useContext(ProfileDetailContext);
     const [posts, setPosts] = React.useState(null);
     const [loading, setLoading] = React.useState(false);
@@ -6407,7 +6407,7 @@ const Posts = () => {
             (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
                 var _a;
                 setLoading(true);
-                const res = yield utils.callApi(utils.getApiPath(utils.PATHS.USER.LIST_POST, {
+                const res = yield defaultClassWrapper.callApi(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.USER.LIST_POST, {
                     _locale: locale,
                     id,
                     isAnonymous: 0,
@@ -6469,7 +6469,7 @@ const TabDataInit = {
 const ProfileDetail = (_a) => {
     var _b;
     var { authorProps, selectedTab, authActionWrapper, onSkipQuestion, onCloseFromPost, hideQuestionTab, hideAnswerTab, showSkipQuestionTag, rolesToShowQuestionsTab = ['expert'], currentPageUrl } = _a, rest = tslib_es6.__rest(_a, ["authorProps", "selectedTab", "authActionWrapper", "onSkipQuestion", "onCloseFromPost", "hideQuestionTab", "hideAnswerTab", "showSkipQuestionTag", "rolesToShowQuestionsTab", "currentPageUrl"]);
-    const { data: { locale, userInfo, env: { isMarryBaby }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale, userInfo, env: { isMarryBaby }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { t } = useTranslations.useTranslations();
     const role = authorProps === null || authorProps === void 0 ? void 0 : authorProps.role;
     const loginRole = userInfo === null || userInfo === void 0 ? void 0 : userInfo.role;
@@ -6545,12 +6545,12 @@ const ProfileDetail = (_a) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             setLoading(true);
             const res = yield Promise.all([
-                utils.callApi(utils.getApiPath(utils.PATHS.USER.DETAIL, {
+                defaultClassWrapper.callApi(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.USER.DETAIL, {
                     _locale: locale,
                     id,
                 }), 'GET'),
                 ...listTabsHasCount.map((i) => {
-                    return utils.callApi(utils.getApiPath(utils.PATHS.USER.COUNT_TABS, {
+                    return defaultClassWrapper.callApi(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.USER.COUNT_TABS, {
                         _locale: locale,
                         id,
                         [i.keyOfCountApi]: 1,
@@ -6669,14 +6669,14 @@ var styles$2 = {"skipBtn":"KsWg8i6","alertHeading":"_9tS0EUN","alertDesc":"kyyRK
 const SkipQuestionOfExpertBtn = (_a) => {
     var { post, onSkip, btnText, currentPageUrl } = _a, rest = tslib_es6.__rest(_a, ["post", "onSkip", "btnText", "currentPageUrl"]);
     const { t } = useTranslations.useTranslations();
-    const { data: { locale }, action: { pushNotifications }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale }, action: { pushNotifications }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const [showAlert, setShowAlert] = React.useState(false);
     const [loading, setLoading] = React.useState(false);
     const _theme = core.useMantineTheme();
     const handleSkip = React.useCallback(() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _b;
         setLoading(true);
-        const res = yield utils.callApiWithAuth(utils.getApiPath(utils.PATHS.USER.SKIP_QUESTION, {
+        const res = yield defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.USER.SKIP_QUESTION, {
             _locale: locale,
             id: post === null || post === void 0 ? void 0 : post.id,
         }), 'PUT');
@@ -6742,7 +6742,7 @@ var IconTrashBin = img$2;
 // import IconBellOff from '../../../assets/svg/icon-bell-off.svg'
 // import IconBellOn from '../../../assets/svg/icon-bell-on.svg'
 const CardPostPopoverMore = ({ authorEmail, onDeletePost, shareUrl, post, className = '', popoverClassName = '', onBookmark, onRemoveBookmark, onEditPost, }) => {
-    const { data: { locale, userInfo, togetherUserId, env: { isMarryBaby }, }, action: { pushNotifications }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale, userInfo, togetherUserId, env: { isMarryBaby }, }, action: { pushNotifications }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { t } = useTranslations.useTranslations();
     // const [localHasNoti, setLocalHasNoti] = useState(false)
     const [loading, setLoading] = React.useState(false);
@@ -6815,7 +6815,7 @@ const CardPostPopoverMore = ({ authorEmail, onDeletePost, shareUrl, post, classN
                                     if (!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) || !(post === null || post === void 0 ? void 0 : post.id))
                                         return;
                                     if (post === null || post === void 0 ? void 0 : post.bookmarked) {
-                                        const res = yield utils.callApiWithAuth(utils.getApiPath(utils.PATHS.BOOKMARK.DELETE, {
+                                        const res = yield defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.BOOKMARK.DELETE, {
                                             _locale: locale,
                                         }), 'DELETE', {
                                             data: {
@@ -6841,7 +6841,7 @@ const CardPostPopoverMore = ({ authorEmail, onDeletePost, shareUrl, post, classN
                                         }
                                     }
                                     else {
-                                        const res = yield utils.callApiWithAuth(utils.getApiPath(utils.PATHS.BOOKMARK.CREATE, {
+                                        const res = yield defaultClassWrapper.callApiWithAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.BOOKMARK.CREATE, {
                                             _locale: locale,
                                         }), 'POST', {
                                             data: {
@@ -6907,10 +6907,10 @@ const CardPostPopoverMore = ({ authorEmail, onDeletePost, shareUrl, post, classN
                                 description: t('morePopover.report.description'),
                                 isShowheader: true,
                                 type: 'list',
-                                list: Object.keys(utils.REPORT_REASON_MAP)
+                                list: Object.keys(defaultClassWrapper.REPORT_REASON_MAP)
                                     .map((k) => ({
-                                    label: utils.REPORT_REASON_MAP[k].label,
-                                    reason: utils.REPORT_REASON_MAP[k].reportReasonText,
+                                    label: defaultClassWrapper.REPORT_REASON_MAP[k].label,
+                                    reason: defaultClassWrapper.REPORT_REASON_MAP[k].reportReasonText,
                                     reasonValue: k,
                                 }))
                                     .map((item) => ({
@@ -6939,7 +6939,7 @@ const StyledCardPost$1 = styled__default["default"].div `
     text-decoration: none;
   }
 
-  ${utils$1.MediaQueries.mbDown} {
+  ${utils.MediaQueries.mbDown} {
     margin-bottom: 8px;
   }
   &.flat-top {
@@ -6962,7 +6962,7 @@ const StyledCardPost$1 = styled__default["default"].div `
       width: 40px;
       height: 40px;
       font-size: 20px;
-      ${utils$1.MediaQueries.mbDown} {
+      ${utils.MediaQueries.mbDown} {
         width: 32px;
         height: 32px;
         font-size: 16px;
@@ -7018,7 +7018,7 @@ const StyledCardPost$1 = styled__default["default"].div `
   }
   &[data-most-engaging='true'] {
     border: none;
-    ${utils$1.MediaQueries.mbDown} {
+    ${utils.MediaQueries.mbDown} {
       margin: 1rem;
       border: 1px solid #e4e8ec;
     }
@@ -7066,7 +7066,7 @@ const StyledCardPost$1 = styled__default["default"].div `
       .popover-menu__btn {
         width: 24px;
         height: 24px;
-        ${utils$1.MediaQueries.mbDown} {
+        ${utils.MediaQueries.mbDown} {
           width: 18px;
           height: 18px;
         }
@@ -7078,7 +7078,7 @@ const StyledCardPost$1 = styled__default["default"].div `
               right: 1rem;
             }
             width: 350px;
-            ${utils$1.MediaQueries.mbDown} {
+            ${utils.MediaQueries.mbDown} {
               max-width: calc(320px - 2rem);
             }
           }
@@ -7100,7 +7100,7 @@ const StyledCardPost$1 = styled__default["default"].div `
         transform: translateX(-50%);
       }
     }
-    ${utils$1.MediaQueries.mbDown} {
+    ${utils.MediaQueries.mbDown} {
       margin-bottom: 12px;
     }
   }
@@ -7110,7 +7110,7 @@ var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width=
 var IconDelete = img$1;
 
 const CardReplyPopover = ({ onDeleteComment, commentId, className = '', popoverClassName = '', }) => {
-    const { data: { env: { isMarryBaby }, locale, }, action: { pushNotifications }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { env: { isMarryBaby }, locale, }, action: { pushNotifications }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { t } = useTranslations.useTranslations();
     const [isOpenLeavePopup, setIsOpenLeavePopup] = React.useState(false);
     const { authActionWrapper } = useTogetherAuthRequiredAction();
@@ -7215,7 +7215,7 @@ const StyledListItems = styled__default["default"].div `
   display: flex;
   flex-wrap: wrap;
   row-gap: 16px;
-  ${utils$1.MediaQueries.tdUp} {
+  ${utils.MediaQueries.tdUp} {
     align-items: center;
     column-gap: 24px;
   }
@@ -7224,7 +7224,7 @@ const StyledItem$1 = styled__default["default"].a `
   display: flex;
   align-items: center;
   gap: 16px;
-  ${utils$1.MediaQueries.mbDown} {
+  ${utils.MediaQueries.mbDown} {
     width: 100%;
     justify-content: space-between;
   }
@@ -7248,7 +7248,7 @@ const StyledThumb = styled__default["default"].div `
 
 const RecommentCategories = ({ categories }) => {
     const { t } = useTranslations.useTranslations();
-    const { data: { locale, env: { isMarryBaby }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale, env: { isMarryBaby }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const url = routing.getCurrentBaseUrl(locale, isMarryBaby);
     return (React__default["default"].createElement(StyledContainer, null,
         React__default["default"].createElement(StyledHeader, null,
@@ -7349,11 +7349,11 @@ const SourceList = (_a) => {
                     };
                 });
                 const listApi = [
-                    ...listPaths.map((i) => utils.callApi(i.isMarrySite
-                        ? utils.getMarryBabyApiPath(utils.DISCOVER_PATHS.GET_PREVIEW_ARTICLE, {
+                    ...listPaths.map((i) => defaultClassWrapper.callApi(i.isMarrySite
+                        ? defaultClassWrapper.getMarryBabyApiPath(defaultClassWrapper.DISCOVER_PATHS.GET_PREVIEW_ARTICLE, {
                             fullSlug: i.path,
                         }, true)
-                        : utils.getDiscoverApiPath(utils.DISCOVER_PATHS.GET_PREVIEW_ARTICLE, {
+                        : defaultClassWrapper.getDiscoverApiPath(defaultClassWrapper.DISCOVER_PATHS.GET_PREVIEW_ARTICLE, {
                             fullSlug: i.path,
                         }, true), 'GET')),
                 ];
@@ -7373,11 +7373,11 @@ const SourceList = (_a) => {
             categorySlug &&
             (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
                 var _a;
-                const res = yield utils.callApi(isMarryBaby
-                    ? utils.getMarryBabyApiPath(utils.DISCOVER_PATHS.GET_CATEGORY_OR_ARTICLE_DETAIL, {
+                const res = yield defaultClassWrapper.callApi(isMarryBaby
+                    ? defaultClassWrapper.getMarryBabyApiPath(defaultClassWrapper.DISCOVER_PATHS.GET_CATEGORY_OR_ARTICLE_DETAIL, {
                         fullSlug: categorySlug,
                     }, true)
-                    : utils.getDiscoverApiPath(utils.DISCOVER_PATHS.GET_CATEGORY_OR_ARTICLE_DETAIL, {
+                    : defaultClassWrapper.getDiscoverApiPath(defaultClassWrapper.DISCOVER_PATHS.GET_CATEGORY_OR_ARTICLE_DETAIL, {
                         fullSlug: categorySlug,
                     }, true), 'GET');
                 (res === null || res === void 0 ? void 0 : res.data) && setCategories([index$7.formatCategory((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.category)]);
@@ -7480,7 +7480,7 @@ const StyledCardPost = styled__default["default"].div `
       width: 40px;
       height: 40px;
       font-size: 20px;
-      ${utils$1.MediaQueries.mbDown} {
+      ${utils.MediaQueries.mbDown} {
         width: 32px;
         height: 32px;
         font-size: 16px;
@@ -7585,12 +7585,12 @@ const StyledCardPost = styled__default["default"].div `
     }
 
     margin-left: 56px;
-    ${utils$1.MediaQueries.mbDown} {
+    ${utils.MediaQueries.mbDown} {
       margin-left: 40px;
     }
     > .post-author {
       margin-left: -56px;
-      ${utils$1.MediaQueries.mbDown} {
+      ${utils.MediaQueries.mbDown} {
         margin-left: -40px;
       }
       .author-info {
@@ -7608,7 +7608,7 @@ const StyledCardPost = styled__default["default"].div `
         width: 40px;
         height: 40px;
         font-size: 20px;
-        ${utils$1.MediaQueries.mbDown} {
+        ${utils.MediaQueries.mbDown} {
           width: 24px;
           height: 24px;
           font-size: 12px;
@@ -7621,7 +7621,7 @@ const StyledCardPost = styled__default["default"].div `
           width: 40px;
           height: 40px;
           font-size: 20px;
-          ${utils$1.MediaQueries.mbDown} {
+          ${utils.MediaQueries.mbDown} {
             width: 24px;
             height: 24px;
             font-size: 12px;
@@ -7649,12 +7649,12 @@ const StyledCardPost = styled__default["default"].div `
     .post-content-wrapper {
       padding-top: 0;
       padding-bottom: 0;
-      ${utils$1.MediaQueries.mbDown} {
+      ${utils.MediaQueries.mbDown} {
         padding-left: 0.5rem;
       }
     }
 
-    ${utils$1.MediaQueries.mbDown} {
+    ${utils.MediaQueries.mbDown} {
       margin-bottom: 12px;
     }
   }
@@ -7696,7 +7696,7 @@ var ChevronRightActive = img;
 const COMMENT_LIMIT = 4;
 const CardReply = ({ className, style, comment: CommentProps, type = 'comment', level = 0, replyingId, onPostCommentSuccess, post, onDeleteComment, refetchComment, hasQuickBookingEnable, handleMakeAppointment, cardAuthorProps, maxChars = 600, disableShortenContent, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    const { data: { locale, userInfo, env: { isMarryBaby }, }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale, userInfo, env: { isMarryBaby }, }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { t } = useTranslations.useTranslations();
     const [comment, setComment] = React.useState(CommentProps || null);
     const { id, countLikes, content, replies = [], images = [], author, liked, link, mentionedUser, mentions, } = comment;
@@ -7770,7 +7770,7 @@ const CardReply = ({ className, style, comment: CommentProps, type = 'comment',
         if (author === null || author === void 0 ? void 0 : author.hospitalId) {
             const fetchHospitalDetail = (hospitalId) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
                 var _a;
-                const response = yield utils.callApi(utils.getCarePath(utils.CARE_PATHS.GET_HOSPITAL_INFO, {
+                const response = yield defaultClassWrapper.callApi(defaultClassWrapper.getCarePath(defaultClassWrapper.CARE_PATHS.GET_HOSPITAL_INFO, {
                     hospital_branch_id: hospitalId,
                     website_url: index$4.domainLocales[locale],
                 }), 'get');
@@ -7783,7 +7783,7 @@ const CardReply = ({ className, style, comment: CommentProps, type = 'comment',
         if (author === null || author === void 0 ? void 0 : author.doctorId) {
             const fetchDoctorDetail = (doctorId) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
                 var _b;
-                const response = yield utils.callApi(utils.getCarePath(utils.CARE_PATHS.GET_DOCTOR_INFO, {
+                const response = yield defaultClassWrapper.callApi(defaultClassWrapper.getCarePath(defaultClassWrapper.CARE_PATHS.GET_DOCTOR_INFO, {
                     doctorId: doctorId,
                     website_url: index$4.domainLocales[locale],
                 }), 'get');
@@ -7864,7 +7864,7 @@ const CardReply = ({ className, style, comment: CommentProps, type = 'comment',
 
 const getMostEngagingComment = (postId, locale) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
     var _a, _b, _c;
-    const commentsRes = yield utils.callApiWithOptionalAuth(utils.getApiPath(utils.PATHS.COMMENT.LIST, {
+    const commentsRes = yield defaultClassWrapper.callApiWithOptionalAuth(defaultClassWrapper.getApiPath(defaultClassWrapper.PATHS.COMMENT.LIST, {
         postId: postId,
         _locale: locale,
         sort: 'popularity',
@@ -7878,11 +7878,11 @@ const CardPost = ({ className, style, hideViewMoreComment, showMostEngaging, onC
     const [isOpenSharePopup, setIsOpenSharePopup] = React.useState(false);
     const [mostEngagingComment, setMostEngagingComment] = React.useState(mostEngagingCommentProp);
     const { community, topics, author, slug, isPin, liked, photos, mentions, title, description, previewUrl, likesCount, commentsCount, id, commented, } = post;
-    const { data: { locale, env: { isMarryBaby, togetherBasePath }, }, action: { pushNotifications }, } = React.useContext(utils.TogetherComponentGlobalContext);
+    const { data: { locale, env: { isMarryBaby, togetherBasePath }, }, action: { pushNotifications }, } = React.useContext(defaultClassWrapper.TogetherComponentGlobalContext);
     const { t } = useTranslations.useTranslations();
     const [showInputComment, setShowInputComment] = React.useState(propsShowInputComment);
     const postRelativeHref = `${togetherBasePath}/${(community === null || community === void 0 ? void 0 : community.slug) || '_'}/${slug || ''}`;
-    const postHref = `${utils.getCurrentBaseUrl(locale)}${postRelativeHref}`;
+    const postHref = `${defaultClassWrapper.getCurrentBaseUrl(locale)}${postRelativeHref}`;
     const { authActionWrapper } = useTogetherAuthRequiredAction((community === null || community === void 0 ? void 0 : community.slug)
         ? {
             _joinCommunityIds: [community.id],
@@ -7904,9 +7904,9 @@ const CardPost = ({ className, style, hideViewMoreComment, showMostEngaging, onC
         if (author === null || author === void 0 ? void 0 : author.hospitalId) {
             const fetchHospitalDetail = (hospitalId) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
                 var _a;
-                const response = yield utils.callApi(utils.getCarePath(utils.CARE_PATHS.GET_HOSPITAL_INFO, {
+                const response = yield defaultClassWrapper.callApi(defaultClassWrapper.getCarePath(defaultClassWrapper.CARE_PATHS.GET_HOSPITAL_INFO, {
                     hospital_branch_id: hospitalId,
-                    website_url: utils.domainLocales[locale],
+                    website_url: defaultClassWrapper.domainLocales[locale],
                 }), 'get');
                 if ((_a = response === null || response === void 0 ? void 0 : response._data) === null || _a === void 0 ? void 0 : _a.branch) {
                     setHospitalInfo(response === null || response === void 0 ? void 0 : response._data.branch);
@@ -7917,9 +7917,9 @@ const CardPost = ({ className, style, hideViewMoreComment, showMostEngaging, onC
         if (author === null || author === void 0 ? void 0 : author.doctorId) {
             const fetchDoctorDetail = (doctorId) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
                 var _b;
-                const response = yield utils.callApi(utils.getCarePath(utils.CARE_PATHS.GET_DOCTOR_INFO, {
+                const response = yield defaultClassWrapper.callApi(defaultClassWrapper.getCarePath(defaultClassWrapper.CARE_PATHS.GET_DOCTOR_INFO, {
                     doctorId: doctorId,
-                    website_url: utils.domainLocales[locale],
+                    website_url: defaultClassWrapper.domainLocales[locale],
                 }), 'get');
                 if ((_b = response === null || response === void 0 ? void 0 : response._data) === null || _b === void 0 ? void 0 : _b.doctor) {
                     setDoctorInfo(response === null || response === void 0 ? void 0 : response._data.doctor);
@@ -7970,7 +7970,7 @@ const CardPost = ({ className, style, hideViewMoreComment, showMostEngaging, onC
                 // _location: postHref,
             }
             : undefined },
-        isOpenSharePopup && (React__default["default"].createElement(SharePopup, { url: postHref, avatar: utils.DEFAULT_IMG, text: title, onClose: () => setIsOpenSharePopup(false) })),
+        isOpenSharePopup && (React__default["default"].createElement(SharePopup, { url: postHref, avatar: defaultClassWrapper.DEFAULT_IMG, text: title, onClose: () => setIsOpenSharePopup(false) })),
         React__default["default"].createElement(StyledCardPost$1, { className: className, style: style, "data-is-marrybaby": isMarryBaby },
             isPin ? React__default["default"].createElement(LabelPin, { className: "post-pin" }) : null,
             React__default["default"].createElement("div", { style: { position: 'relative', padding: '1rem 1rem 0' } },