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

package/build/{index-93e13cbe.js → index-a14c3067.js}

@@ -1,12 +1,12 @@
 'use strict';
 
 var locale = require('date-fns/locale');
-require('./index-6bb0ed88.js');
+require('./index-55eb8874.js');
 var constantsSite = require('./constantsSite.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var constantsRiskScreener = require('./constantsRiskScreener.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
-var Locale = require('./Locale-3d43dc61.js');
+var Locale = require('./Locale-db2e77cb.js');
 
 const basePath = process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'tl-PH' ? '/fil' : '';
 const SSO_URL = process.env.NEXT_PUBLIC_SSO;

package/build/{index-89f851dd.js → index-a507c427.js}

@@ -1,22 +1,22 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8af68a32.js');
+var tslib_es6 = require('./tslib.es6-ba74242f.js');
 var React = require('react');
-require('./index-031820fd.js');
+require('./index-f54b7c33.js');
 require('@mantine/core');
 require('@mantine/dates');
-require('./index-93e13cbe.js');
-require('./index-6bb0ed88.js');
-require('./index-b27dea68.js');
-require('./useMantineLocale-64c96485.js');
-var index = require('./index-6351607e.js');
-require('./index-c4db2775.js');
-require('./index.styles-0fca29e2.js');
-require('./translationsContext-3a4a1574.js');
+require('./index-a14c3067.js');
+require('./index-55eb8874.js');
+require('./index-b4639f39.js');
+require('./useMantineLocale-995feb60.js');
+var index = require('./index-79fba52e.js');
+require('./index-cab63cde.js');
+require('./index.styles-acab6f44.js');
+require('./translationsContext-0b6151a9.js');
 require('@mantine/hooks');
-require('./utils-88ba9396.js');
-require('./other-1f83bfda.js');
-require('./index-91b42e47.js');
+require('./utils-79522a9e.js');
+require('./other-3aca54dd.js');
+require('./index-2ed5e004.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-828dfa8b.js → index-a82be18e.js}

@@ -1,51 +1,51 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8af68a32.js');
+var tslib_es6 = require('./tslib.es6-ba74242f.js');
 var React = require('react');
-var index$7 = require('./index-f5297fa9.js');
-var index$2 = require('./index-93e13cbe.js');
-var normalizeLink = require('./normalizeLink-81ac71ed.js');
-var dataTransform = require('./dataTransform-6ed700b2.js');
+var index$7 = require('./index-ad52ddd5.js');
+var index$2 = require('./index-a14c3067.js');
+var normalizeLink = require('./normalizeLink-584effeb.js');
+var dataTransform = require('./dataTransform-73e5b86d.js');
 var core$1 = require('@hhgtech/icons/core');
 var core = require('@mantine/core');
-var index$c = require('./index-0b84cca2.js');
-var index$4 = require('./index-acff76f5.js');
+var index$c = require('./index-ea197777.js');
+var index$4 = require('./index-5ca7e3cf.js');
 var throttle = require('lodash/throttle');
-var index$b = require('./index-031820fd.js');
+var index$b = require('./index-f54b7c33.js');
 require('@mantine/dates');
-require('./index-6bb0ed88.js');
-var index$3 = require('./index-b27dea68.js');
-require('./useMantineLocale-64c96485.js');
-var index = require('./index-6351607e.js');
-var index$a = require('./index-c4db2775.js');
-require('./index.styles-0fca29e2.js');
-require('./translationsContext-3a4a1574.js');
+require('./index-55eb8874.js');
+var index$3 = require('./index-b4639f39.js');
+require('./useMantineLocale-995feb60.js');
+var index = require('./index-79fba52e.js');
+var index$a = require('./index-cab63cde.js');
+require('./index.styles-acab6f44.js');
+require('./translationsContext-0b6151a9.js');
 require('@mantine/hooks');
-var utils = require('./utils-88ba9396.js');
-require('./other-1f83bfda.js');
-require('./index-91b42e47.js');
-var constants = require('./constants-e6c18dfc.js');
+var utils = require('./utils-79522a9e.js');
+require('./other-3aca54dd.js');
+require('./index-2ed5e004.js');
+var constants = require('./constants-d95e8ef0.js');
 var styled = require('@emotion/styled');
-var navigationProfileButton = require('./index-be646d43.js');
-var store = require('./store-4c81a015.js');
-var index$1 = require('./index-59ad8a4c.js');
-var togetherComponentGlobalContext = require('./utils-f446154c.js');
+var navigationProfileButton = require('./index-bdacdac1.js');
+var store = require('./store-4227a68d.js');
+var index$1 = require('./index-c83c67dc.js');
+var togetherComponentGlobalContext = require('./utils-ff0f9884.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
-var constants$1 = require('./constants-40ee2675.js');
+var constants$1 = require('./constants-a60aa81b.js');
 var miscTheme = require('./miscTheme.js');
-var index$6 = require('./index-9e0dc55b.js');
-var index$5 = require('./index-7da55532.js');
-var useIsInit = require('./useIsInit-d283ec70.js');
+var index$6 = require('./index-ff6f20f3.js');
+var index$5 = require('./index-932a1f22.js');
+var useIsInit = require('./useIsInit-b63be920.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
 var dayjs = require('dayjs');
 var relativeTime = require('dayjs/plugin/relativeTime');
-var index$8 = require('./index-d540c73e.js');
+var index$8 = require('./index-7ec0f4cb.js');
 var other = require('@hhgtech/icons/other');
 var formatString = require('string-format');
-var index$9 = require('./index-d044f3dd.js');
-var Locale = require('./Locale-3d43dc61.js');
+var index$9 = require('./index-47aef47f.js');
+var Locale = require('./Locale-db2e77cb.js');
 var debounce = require('lodash/debounce');
-var core$2 = require('./core-7a0772ec.js');
+var core$2 = require('./core-85345255.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -105,14 +105,6 @@ const CartBadge = (_a) => {
 };
 
 const StyledDisplayWrapper = styled__default["default"].div `
-  ${(props) => `
-    ${props.lowerBound !== 0
-    ? `@media (max-width: ${props.lowerBound - 1}px) { display: none; }`
-    : ''}
-    ${props.upperBound !== 0
-    ? `@media (min-width: ${props.upperBound}px) { display: none; }`
-    : ''}
-  `}
   &.block-show {
     display: block;
   }
@@ -1707,9 +1699,9 @@ const StyledRightGroup = styled__default["default"].div `
   align-items: center;
   height: 100%;
   flex-shrink: 0;
-  /* gap: 16px; */
   ${utils.MediaQueries.tdDown} {
     flex-shrink: 0.6;
+    gap: 10px;
   }
   .hhgcomp-navigation-itemnav-headeritem {
     gap: 2px;
@@ -2091,7 +2083,7 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
                 });
             }
             if (item.id === 'care') {
-                Promise.resolve().then(function () { return require('./doctor-9395b328.js'); }).then((data) => {
+                Promise.resolve().then(function () { return require('./doctor-77e27a85.js'); }).then((data) => {
                     if (data === null || data === void 0 ? void 0 : data.default)
                         setIconJson(() => data.default);
                 });
@@ -2159,6 +2151,17 @@ const StyleInput = styled__default["default"](index$b.Input) `
     }
   }
 
+  .close-icon-wrapper {
+    display: flex;
+    background-color: ${miscTheme.theme.colors.gray400};
+    border-radius: 100%;
+    cursor: pointer;
+
+    svg {
+      pointer-events: none;
+    }
+  }
+
   .search-icon-btn {
     display: flex;
     justify-content: center;
@@ -2189,7 +2192,7 @@ const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, })
         React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: {
                 verticalAlign: 'bottom',
             } },
-            React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" })))) : (React__default["default"].createElement(StyleInput, { className: "fake-search-input", name: 'search-input-menu-service' + id, size: "md", placeholder: siteType === 'marryBaby'
+            React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.3097 9.06111C3.3097 5.88483 5.88458 3.30994 9.06087 3.30994C12.2372 3.30994 14.812 5.88483 14.812 9.06111C14.812 12.2374 12.2372 14.8123 9.06087 14.8123C5.88458 14.8123 3.3097 12.2374 3.3097 9.06111ZM9.06087 1.66675C4.97707 1.66675 1.6665 4.97732 1.6665 9.06111C1.6665 13.1449 4.97707 16.4555 9.06087 16.4555C10.8067 16.4555 12.4112 15.8505 13.6761 14.8387L16.9305 18.0931C17.2514 18.4139 17.7716 18.4139 18.0924 18.0931C18.4133 17.7722 18.4133 17.252 18.0924 16.9312L14.8381 13.6768C15.8501 12.4118 16.4552 10.8071 16.4552 9.06111C16.4552 4.97732 13.1447 1.66675 9.06087 1.66675Z", fill: "#8C8C8C" })))) : (React__default["default"].createElement(StyleInput, { className: "fake-search-input", name: 'search-input-menu-service' + id, size: "md", "data-event-category": "Search Page", "data-event-action": "Search", "data-event-label": keyword, placeholder: siteType === 'marryBaby'
             ? t('navigation.search.input.placeholder')
             : t('home.search', {
                 site: index$2.LOCALE_SPECS[locale || 'en-PH']
@@ -2201,7 +2204,8 @@ const SearchInput = ({ id, isMobile = false, isHomepage = false, projectType, })
             if (isMobile && isHomepage) {
                 goToSearchPage('');
             }
-        }, icon: React__default["default"].createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
+        }, rightSection: keyword ? (React__default["default"].createElement("div", { className: "close-icon-wrapper", onClick: () => setKeyword(''), "data-event-category": "Search Page", "data-event-action": "Delete Search" },
+            React__default["default"].createElement(core$1.Close, { size: 17, color: miscTheme.theme.colors.white }))) : (''), icon: React__default["default"].createElement("a", { "data-event-category": "Search Button", "data-event-action": "Click", className: "search-icon-btn", onClick: () => {
                 if (isMobile && isHomepage) {
                     goToSearchPage('');
                 }
@@ -2299,7 +2303,9 @@ const NavigationBar = ({ onTopBarAppears, languageMenu, menuItems, logoComponent
                 !isMobile && (React__default["default"].createElement(React__default["default"].Fragment, null, siteType === 'marryBaby' ? (React__default["default"].createElement(NavigationMenu, { menuItems: menuItems })) : (enableSearchBar && (React__default["default"].createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })))))),
             React__default["default"].createElement(StyledRightGroup, { "data-site-type": siteType },
                 !isMobile && siteType !== 'marryBaby' && (React__default["default"].createElement(NavigationMenu, { menuItems: menuItems.filter((m) => m.id !== 'ecom' && m.id !== 'care') })),
-                (isMobile || siteType === 'marryBaby') && enableSearchBar && (React__default["default"].createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })),
+                (isMobile || siteType === 'marryBaby') &&
+                    enableSearchBar &&
+                    !isHomepage && (React__default["default"].createElement(NavigtionSearch, { siteType: siteType, projectType: projectType, isMobile: isMobile })),
                 React__default["default"].createElement(StyledProfileNavGroup, null,
                     !isMobile && (React__default["default"].createElement(React__default["default"].Fragment, null,
                         ecomNavItem ? (React__default["default"].createElement(ItemNavButton, { item: ecomNavItem, color: 'transparent' })) : null,

package/build/{index-684fe065.js → index-a91d646d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8af68a32.js');
+var tslib_es6 = require('./tslib.es6-ba74242f.js');
 var React = require('react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');

package/build/{index-f5297fa9.js → index-ad52ddd5.js}

@@ -1,11 +1,11 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-031820fd.js');
+var index$2 = require('./index-f54b7c33.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index = require('./index-6351607e.js');
-var index$1 = require('./index-b27dea68.js');
+var index = require('./index-79fba52e.js');
+var index$1 = require('./index-b4639f39.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-549a9d0a.js → index-b18202e6.js}

@@ -1,23 +1,23 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8af68a32.js');
+var tslib_es6 = require('./tslib.es6-ba74242f.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index$2 = require('./index-031820fd.js');
+var index$2 = require('./index-f54b7c33.js');
 require('@mantine/dates');
-require('./index-93e13cbe.js');
-require('./index-6bb0ed88.js');
-var index$1 = require('./index-b27dea68.js');
-require('./useMantineLocale-64c96485.js');
-var index$3 = require('./index-6351607e.js');
-require('./index-c4db2775.js');
-require('./index.styles-0fca29e2.js');
-var index = require('./index-acff76f5.js');
+require('./index-a14c3067.js');
+require('./index-55eb8874.js');
+var index$1 = require('./index-b4639f39.js');
+require('./useMantineLocale-995feb60.js');
+var index$3 = require('./index-79fba52e.js');
+require('./index-cab63cde.js');
+require('./index.styles-acab6f44.js');
+var index = require('./index-5ca7e3cf.js');
 require('@mantine/hooks');
-require('./utils-88ba9396.js');
-require('./other-1f83bfda.js');
-require('./index-91b42e47.js');
+require('./utils-79522a9e.js');
+require('./other-3aca54dd.js');
+require('./index-2ed5e004.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-e3d90690.js → index-b7cb4d31.js}

@@ -5,25 +5,24 @@ var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
 var dayjs = require('dayjs');
 var relativeTime = require('dayjs/plugin/relativeTime');
-var index$2 = require('./index-acff76f5.js');
-var utils = require('./utils-88ba9396.js');
-var index$1 = require('./index-8960a4d9.js');
-var index$9 = require('./index-70a3252f.js');
-var tslib_es6 = require('./tslib.es6-8af68a32.js');
-var index = require('./index-d540c73e.js');
-var index_styles = require('./index.styles-0fca29e2.js');
-require('./index-93e13cbe.js');
-var index$6 = require('./index-b27dea68.js');
-var togetherComponentGlobalContext = require('./utils-f446154c.js');
-var index$3 = require('./index-59ad8a4c.js');
-var index$5 = require('./index-6351607e.js');
+var index$2 = require('./index-5ca7e3cf.js');
+var utils = require('./utils-79522a9e.js');
+var index$1 = require('./index-92081bdb.js');
+var index$8 = require('./index-6605b019.js');
+var tslib_es6 = require('./tslib.es6-ba74242f.js');
+var index = require('./index-7ec0f4cb.js');
+var useScreenSize = require('./useScreenSize-46168818.js');
+require('./index-a14c3067.js');
+var index$5 = require('./index-b4639f39.js');
+var togetherComponentGlobalContext = require('./utils-ff0f9884.js');
+var index$3 = require('./index-c83c67dc.js');
+var index$4 = require('./index-79fba52e.js');
 var miscTheme = require('./miscTheme.js');
-var index$4 = require('./index-6d9e7124.js');
 var styled = require('@emotion/styled');
 var togetherApiPaths = require('./togetherApiPaths.js');
 var react = require('@emotion/react');
-var index$7 = require('./index-9e0dc55b.js');
-var index$8 = require('./index-e30c7e6c.js');
+var index$6 = require('./index-ff6f20f3.js');
+var index$7 = require('./index-9a4053a2.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -313,7 +312,7 @@ const Loading = ({ className, size = 'md' }) => {
         React__default["default"].createElement(index$3.Button, { size: size, color: "transparent", isLoading: true }, t('loading'))));
 };
 
-const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId, locale, isMobile, overwriteProfileProps, avatarFallback = index$6.CommonGAssets.getAssetPath('avatar.jpg'), trackingCategory = 'Together', }) => {
+const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId, locale, isMobile, overwriteProfileProps, avatarFallback = index$5.CommonGAssets.getAssetPath('avatar.jpg'), trackingCategory = 'Together', }) => {
     var _a, _b, _c;
     const { t } = index$2.useTranslations();
     const [doctorInfo, setDoctorInfo] = React.useState(null);
@@ -370,13 +369,13 @@ const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId,
                     React__default["default"].createElement(StyledProfileImage$2, null,
                         React__default["default"].createElement("div", { className: "image-container" },
                             React__default["default"].createElement("div", { style: { position: 'relative' } },
-                                React__default["default"].createElement(index$4.ImageWrap, { src: doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.avatar, backupSrc: avatarFallback, className: "profile-image", alt: "avatar" }),
+                                React__default["default"].createElement(useScreenSize.ImageWrap, { src: doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.avatar, backupSrc: avatarFallback, className: "profile-image", alt: "avatar" }),
                                 React__default["default"].createElement("img", { className: "badge-avatar", src: ReviewerMedical, alt: "badge", loading: "lazy" })))),
                     React__default["default"].createElement(StyledTitleContainer$2, null,
-                        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(index$4.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: miscTheme.theme.colors.gray800 },
+                                React__default["default"].createElement(index$4.Text, { size: "p4", color: miscTheme.theme.colors.gray800 },
                                     specialtiesList,
                                     ' • '))),
                             React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareHospitalUrl({
@@ -385,7 +384,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: miscTheme.theme.colors.gray800, style: { textDecoration: 'underline' } }, doctorInfo === null || doctorInfo === void 0 ? void 0 : doctorInfo.organization.name))))),
+                                React__default["default"].createElement(index$4.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,
@@ -395,9 +394,9 @@ 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: miscTheme.theme.colors.gray800, style: { paddingBottom: 16 } }, t('expert.content.description').toUpperCase()),
+                    React__default["default"].createElement(index$4.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)))))),
+                        React__default["default"].createElement(index$4.Text, { size: "p2" }, renderExperienceText(experience)))))),
                     isMobile ? (React__default["default"].createElement("div", { className: "btn-wrapper" },
                         React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareDoctorUrl({
                                 name: doctorInfo.name,
@@ -409,7 +408,7 @@ const PopupDoctor = ({ isOpen = true, onClose, enableAnimation = true, doctorId,
                             id: doctorInfo.id,
                             locale: locale,
                         }) },
-                        React__default["default"].createElement(index$5.Text, { size: "s4", color: "#2D87F3", style: { paddingTop: 24 }, "data-event-category": trackingCategory, "data-event-action": "See Full Doctor Profile", "data-event-label": togetherComponentGlobalContext.getCurrentBaseUrl(locale) +
+                        React__default["default"].createElement(index$4.Text, { size: "s4", color: "#2D87F3", style: { paddingTop: 24 }, "data-event-category": trackingCategory, "data-event-action": "See Full Doctor Profile", "data-event-label": togetherComponentGlobalContext.getCurrentBaseUrl(locale) +
                                 togetherComponentGlobalContext.getCareDoctorUrl({
                                     name: doctorInfo.name,
                                     id: doctorInfo.id,
@@ -593,7 +592,7 @@ const ReviewerIconMap = {
     'fact-check': ReviewerFactCheck,
     medical: ReviewerMedical,
 };
-const PopupExpert = ({ trackingCategory = 'Together', locale, isOpen = true, onClose, enableAnimation = true, expertId, overwriteProfileProps, avatarFallback = index$6.CommonGAssets.getAssetPath('avatar.jpg'), }) => {
+const PopupExpert = ({ trackingCategory = 'Together', locale, isOpen = true, onClose, enableAnimation = true, expertId, overwriteProfileProps, avatarFallback = index$5.CommonGAssets.getAssetPath('avatar.jpg'), }) => {
     const { t } = index$2.useTranslations();
     const [expertInfo, setExpertInfo] = React.useState(null);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -626,19 +625,19 @@ const PopupExpert = ({ trackingCategory = 'Together', locale, isOpen = true, onC
                     React__default["default"].createElement(StyledProfileImage$1, null,
                         React__default["default"].createElement("div", { className: "image-container" },
                             React__default["default"].createElement("div", { style: { position: 'relative' } },
-                                React__default["default"].createElement(index$4.ImageWrap, { src: expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.avatar, className: "profile-image", alt: "avatar", backupSrc: avatarFallback }),
+                                React__default["default"].createElement(useScreenSize.ImageWrap, { src: expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.avatar, className: "profile-image", alt: "avatar", backupSrc: avatarFallback }),
                                 React__default["default"].createElement("img", { className: "badge-avatar", src: ReviewerIconMap[expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.role], alt: "badge", loading: "lazy" })))),
                     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(index$4.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: miscTheme.theme.colors.gray800 }, expertInfo === null || expertInfo === void 0 ? void 0 :
+                            React__default["default"].createElement(index$4.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: miscTheme.theme.colors.gray800, style: { textDecoration: 'underline' } }, expertInfo === null || expertInfo === void 0 ? void 0 : expertInfo.organisation)))))),
+                                React__default["default"].createElement(index$4.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: miscTheme.theme.colors.gray800, style: { paddingBottom: 16 } }, t('expert.content.description').toUpperCase()),
+                    React__default["default"].createElement(index$4.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)))
@@ -646,11 +645,11 @@ 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: 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)))))
+                                React__default["default"].createElement(index$6.Heading, { tag: "h6", color: miscTheme.theme.colors.gray800 }, experience === null || experience === void 0 ? void 0 : experience.title),
+                                React__default["default"].createElement(index$4.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')))))))),
+                        React__default["default"].createElement(index$4.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')))))))),
         React__default["default"].createElement(StyledPopupWrapper$1, { "data-open": isOpen, onClick: (e) => {
                 e.stopPropagation();
                 onClose();
@@ -799,7 +798,7 @@ const StyledTitleContainer = styled__default["default"].div `
   }
 `;
 
-const PopupHospital = ({ isOpen = true, onClose, enableAnimation = true, hospitalId, locale, isMobile, overwriteProfileProps, avatarFallback = index$6.CommonGAssets.getAssetPath('avatar.jpg'), trackingCategory = 'Together', }) => {
+const PopupHospital = ({ isOpen = true, onClose, enableAnimation = true, hospitalId, locale, isMobile, overwriteProfileProps, avatarFallback = index$5.CommonGAssets.getAssetPath('avatar.jpg'), trackingCategory = 'Together', }) => {
     const { t } = index$2.useTranslations();
     const [hospitalInfo, setHospitalInfo] = React.useState(null);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -835,12 +834,12 @@ const PopupHospital = ({ isOpen = true, onClose, enableAnimation = true, hospita
                     React__default["default"].createElement(StyledProfileImage, null,
                         React__default["default"].createElement("div", { className: "image-container" },
                             React__default["default"].createElement("div", { style: { position: 'relative' } },
-                                React__default["default"].createElement(index$4.ImageWrap, { src: hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.logo, className: "profile-image", alt: "avatar", backupSrc: avatarFallback }),
+                                React__default["default"].createElement(useScreenSize.ImageWrap, { src: hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.logo, className: "profile-image", alt: "avatar", backupSrc: avatarFallback }),
                                 React__default["default"].createElement("img", { className: "badge-avatar", src: ReviewerMedical, alt: "badge", loading: "lazy" })))),
                     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(index$4.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: miscTheme.theme.colors.gray800 },
+                            specialties && (React__default["default"].createElement(index$4.Text, { size: "p4", color: miscTheme.theme.colors.gray800 },
                                 formatSpecialties.join(' • '),
                                 '•')),
                             React__default["default"].createElement("a", { href: togetherComponentGlobalContext.getCareHospitalUrl({
@@ -849,7 +848,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: miscTheme.theme.colors.gray800, style: { textDecoration: 'underline' } }, hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.name))))),
+                                React__default["default"].createElement(index$4.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,
@@ -860,8 +859,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: 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),
+                    React__default["default"].createElement(index$4.Text, { weight: "bold", size: "s3", color: miscTheme.theme.colors.gray800, style: { paddingBottom: 16 } }, t('hospital.content.description').toUpperCase()),
+                    React__default["default"].createElement(index$4.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,
@@ -875,7 +874,7 @@ const PopupHospital = ({ isOpen = true, onClose, enableAnimation = true, hospita
                             slug: hospitalInfo.slug,
                             locale,
                         }) },
-                        React__default["default"].createElement(index$5.Text, { size: "s4", color: "#2D87F3", as: "span", "data-event-category": trackingCategory, "data-event-action": "See Full Hospital Profile", "data-event-label": togetherComponentGlobalContext.getCurrentBaseUrl(locale) +
+                        React__default["default"].createElement(index$4.Text, { size: "s4", color: "#2D87F3", as: "span", "data-event-category": trackingCategory, "data-event-action": "See Full Hospital Profile", "data-event-label": togetherComponentGlobalContext.getCurrentBaseUrl(locale) +
                                 togetherComponentGlobalContext.getCareHospitalUrl({
                                     id: hospitalInfo.id,
                                     name: hospitalInfo.name,
@@ -892,7 +891,7 @@ var styles = {"modal":"_2UKyiK1","header":"E5ga-tI","heading":"_8Y2nWXX","close"
 
 const ProfileDetailModal = ({ open, onClose, children, profileModalProps, }) => {
     const { t } = index$2.useTranslations();
-    return (React__default["default"].createElement(index$8.Modal, Object.assign({ title: t('profilePanel.modal.heading'), titleProps: true, className: styles.modal, opened: open, onClose: onClose, overlayOpacity: 0.2, overflow: "inside", transitionProps: {
+    return (React__default["default"].createElement(index$7.Modal, Object.assign({ title: t('profilePanel.modal.heading'), titleProps: true, className: styles.modal, opened: open, onClose: onClose, overlayOpacity: 0.2, overflow: "inside", transitionProps: {
             transition: 'slide-left',
         }, styles: {
             header: {
@@ -921,7 +920,7 @@ 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, showChatbotButton = false, subLine, authActionWrapper, profileProps, profileModalProps, extendEle, avatarProps, hideInfo, timeText, onCloseFromPost, onChatWithBot, avatarIcon, badgeIconSize, hideBackground, children, styles, dataEventCategory, dataEventAction, dataEventLabel, } = props;
     const { data: { locale, router, env: { isMarryBaby: isMarryBabyContext, togetherBasePath }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
-    const { isMobile } = index_styles.useScreenSize();
+    const { isMobile } = useScreenSize.useScreenSize();
     const { t } = index$2.useTranslations();
     const { classes } = useStyles(undefined, 
     // Second argument is responsible for styles api integration
@@ -932,7 +931,7 @@ const _CardAuthor = (props) => {
         ? t('cardPost.anonymous')
         : name || username || '';
     const avatar = isAnonymous
-        ? index$6.CommonGAssets.getAssetPath('avatar.jpg')
+        ? index$5.CommonGAssets.getAssetPath('avatar.jpg')
         : avatarProp;
     const role = isAnonymous ? undefined : roleProp;
     const [openPopupExpert, setOpenPopupExpert] = React.useState(false);
@@ -967,7 +966,7 @@ const _CardAuthor = (props) => {
     React.useEffect(() => {
         if (open && !ProfileDetail) {
             if (userType === 'chatbot') {
-                Promise.resolve().then(function () { return require('./index-201427b8.js'); }).then((module) => {
+                Promise.resolve().then(function () { return require('./index-3bdc4a3a.js'); }).then((module) => {
                     setProfileDetail(() => module.ProfileChatbot);
                 });
             }
@@ -999,7 +998,7 @@ const _CardAuthor = (props) => {
         role === 'expert' && hospitalId ? (React__default["default"].createElement(PopupHospital, { isOpen: openPopupExpert, onClose: () => setOpenPopupExpert(false), hospitalId: hospitalId, locale: locale })) : null,
         React__default["default"].createElement("div", { className: `hhg-card-author ${classes.root} ${className} ${isExpert ? 'expert-author' : ''}`, "data-background": !hideBackground && isExpert, "data-is-marrybaby": isMarryBaby },
             React__default["default"].createElement(CardAuthor$1, { dataEventCategory: dataEventCategory, dataEventAction: dataEventAction, dataEventLabel: dataEventLabel, onAvatarClick: onAuthorClick, avatarProps: Object.assign(Object.assign({ avatar: isAnonymous
-                        ? index$6.CommonGAssets.getAssetPath(isMarryBaby ? 'anomyous-avatar-1.svg' : 'anomyous-avatar.svg')
+                        ? index$5.CommonGAssets.getAssetPath(isMarryBaby ? 'anomyous-avatar-1.svg' : 'anomyous-avatar.svg')
                         : avatar, username: displayName }, avatarProps), { style: {
                         cursor: !isAnonymous && (url || showDetailPopup)
                             ? 'pointer'
@@ -1016,7 +1015,7 @@ const _CardAuthor = (props) => {
                                         transform: 'translate(0, 2px)',
                                     } }),
                                 showChatbotButton && (React__default["default"].createElement("div", { style: { marginTop: '8px' } },
-                                    React__default["default"].createElement(core.Button, { color: "primary", size: "xs", variant: "filled", type: "button", leftIcon: React__default["default"].createElement(index$9.Icon.App, { size: 16 }), onClick: () => {
+                                    React__default["default"].createElement(core.Button, { color: "primary", size: "xs", variant: "filled", type: "button", leftIcon: React__default["default"].createElement(index$8.Icon.App, { size: 16 }), onClick: () => {
                                             onChatWithBot === null || onChatWithBot === void 0 ? void 0 : onChatWithBot();
                                         } }, t('chatbot.with.me')))))) : (React__default["default"].createElement(AuthorBadgeItem, null)))),
                     subLine || (React__default["default"].createElement(CardAuthor$1.SubTextRow, { style: hasQuickBooking

package/build/{index-be646d43.js → index-bdacdac1.js}

@@ -1,22 +1,22 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8af68a32.js');
+var tslib_es6 = require('./tslib.es6-ba74242f.js');
 var React = require('react');
 var core = require('@hhgtech/icons/core');
-var Spinner = require('./Spinner-9dfb3f6b.js');
-var index$2 = require('./index-031820fd.js');
-var index$1 = require('./index-c4db2775.js');
-var index$4 = require('./index-6351607e.js');
-var index = require('./index-acff76f5.js');
-require('./index-6bb0ed88.js');
-var index$3 = require('./index-b27dea68.js');
+var Spinner = require('./Spinner-c67245b9.js');
+var index$2 = require('./index-f54b7c33.js');
+var index$1 = require('./index-cab63cde.js');
+var index$4 = require('./index-79fba52e.js');
+var index = require('./index-5ca7e3cf.js');
+require('./index-55eb8874.js');
+var index$3 = require('./index-b4639f39.js');
 var miscTheme = require('./miscTheme.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-88ba9396.js');
+var utils = require('./utils-79522a9e.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
 var profileNavigation = require('./profileNavigation.js');
 var navigationLogoutPopup = require('./navigationLogoutPopup.js');
-var Locale = require('./Locale-3d43dc61.js');
+var Locale = require('./Locale-db2e77cb.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -237,7 +237,7 @@ const NavigationProfileButton = ({ userInfo, siteType, onLoginClick, currentUrl,
         React__default["default"].createElement(StyledImageWrapper, { ref: containerRef, style: style, tabIndex: 0, onBlur: onContainerBlur, onFocus: () => {
                 var _a;
                 onContainerFocus();
-                const popup = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('#desktop-sticky-header .hhgcomp-navprofilebutton-popup');
+                const popup = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('#navigation-v2 .hhgcomp-navprofilebutton-popup');
                 if (popup) {
                     const bound = popup.getBoundingClientRect();
                     const top = bound.top;

package/build/{index-59ad8a4c.js → index-c83c67dc.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8af68a32.js');
+var tslib_es6 = require('./tslib.es6-ba74242f.js');
 var React = require('react');
-var index = require('./index-c4db2775.js');
+var index = require('./index-cab63cde.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }