@hhgtech/hhg-components 1.29.433 → 1.29.434-beta-2

package/build/esm/{index-89696954.js → index-17ad2190.js}

@@ -1,35 +1,35 @@
 import * as React from 'react';
-import React__default, { useMemo, useState, useEffect, useRef } from 'react';
-import { u as useTranslations } from './index-5c23fe7c.js';
+import React__default, { useMemo, useState, useEffect, useRef, createContext, useContext } from 'react';
+import { u as useTranslations } from './index-36d282ab.js';
 import { getCookie } from './miscCookieHelper.js';
-import { C as CommonGAssets } from './index-b478f836.js';
-import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-eedca105.js';
+import { C as CommonGAssets } from './index-43415278.js';
+import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-c13f3187.js';
 import { theme } from './miscTheme.js';
-import { A as Avatar, I as IconWrapper, D as DistanceTag, S as ShapedArrowDown } from './index-db240e2e.js';
-import { b as getTogetherUserPostsApiPath } from './index-86c240e8.js';
-import { B as Button } from './index-218ecaf5.js';
-import { w as workingDays } from './types-32ac95be.js';
+import { A as Avatar, I as IconWrapper, D as DistanceTag, S as ShapedArrowDown } from './index-e3748cc0.js';
+import { b as getTogetherUserPostsApiPath } from './index-cf7a2dbe.js';
+import { B as Button } from './index-742fa807.js';
+import { w as workingDays } from './types-c8c64a4c.js';
 import styled from '@emotion/styled';
 import { LoadScript, GoogleMap, Marker } from '@react-google-maps/api';
 import cn from 'classnames';
-import { b as basePath, Z as ZINDEX_SSO } from './index-f134d024.js';
-import { L as LOCALISED_SLUGS } from './constants-9269d800.js';
-import { T as Text } from './index-89362365.js';
-import { f as formatPhoneNumber } from './localizeNumberFormat-82fb9f9b.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-cef845e5.js';
+import { b as basePath, Z as ZINDEX_SSO } from './index-f748978d.js';
+import { L as LOCALISED_SLUGS } from './constants-72403ae4.js';
+import { T as Text } from './index-d1892b36.js';
+import { f as formatPhoneNumber } from './localizeNumberFormat-d33a8b09.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-65d85c84.js';
 import { useDisclosure } from '@mantine/hooks';
 import { clsx, Modal, Flex, Box } from '@mantine/core';
-import { D as DrawerComponent, u as useDrawerDrag } from './index-5cd17731.js';
+import { D as DrawerComponent, u as useDrawerDrag } from './index-c091deec.js';
 import { Drawer } from 'vaul';
-import { u as useTextStyles, T as TextField, E as ErrorIcon } from './index-eedbd807.js';
+import { u as useTextStyles, T as TextField, E as ErrorIcon } from './index-47327c7e.js';
 import { parsePhoneNumber } from 'react-phone-number-input';
-import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './text-7f10cf5a.js';
-import { P as Phone, I as Input } from './index-3bbc49c3.js';
-import { B as Button$1 } from './index-55612503.js';
-import { M as MAPPED_LOCALE } from './index-43387a48.js';
-import { T as Text$1 } from './index-4288764b.js';
-import { I as ImageWrap } from './index-f9c0b188.js';
-import { I as InsuranceList, P as PaymentList } from './index-a7d84413.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './text-a32c4810.js';
+import { P as Phone, I as Input } from './index-f8edffe6.js';
+import { B as Button$1 } from './index-d08cba80.js';
+import { M as MAPPED_LOCALE } from './index-6dbe6ca9.js';
+import { T as Text$1 } from './index-f65c7844.js';
+import { I as ImageWrap } from './index-878e373b.js';
+import { I as InsuranceList, P as PaymentList, A as ArrowRightBlue, a as DoctorInfoExpertise, D as DoctorExpertiseItem, C as Clinic } from './index-c1bac064.js';
 
 /* eslint-disable prettier/prettier */
 const Check = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 81 80", fill: "none" }, props),
@@ -587,7 +587,7 @@ const StyledOMap = styled.div `
     color: ${theme.colors.primaryBase};
   }
 `;
-const StyledCard = styled.div `
+const StyledCard$1 = styled.div `
     padding: 16px;
     border: 1px solid ${theme.colors.neutral200} 
     background: ${theme.colors.white}
@@ -650,9 +650,10 @@ const Map = (props) => {
     const mapCard = useRef(null);
     const { t } = useTranslations();
     const onLoad = React__default.useCallback(function callback(map) {
-        const bounds = new window.google.maps.LatLngBounds();
-        map.fitBounds(bounds);
-        setTimeout(() => map.setCenter(center), 100);
+        setTimeout(() => {
+            map.setZoom(14);
+            map.setCenter(center);
+        }, 100);
     }, []);
     const mapOptions = {
         mapTypeControl: false,
@@ -670,10 +671,10 @@ const Map = (props) => {
         React__default.createElement("div", { className: "map" },
             isUsingEmbedMap ? (React__default.createElement("iframe", { width: width, height: height, style: {
                     border: 0,
-                }, className: "aspect-ratio-map", loading: "lazy", allowFullScreen: true, src: `https://www.google.com/maps/embed/v1/place?key=${googleMapKey}&q=${hospital.latitude},${hospital.longitude}` })) : (React__default.createElement(LoadScript, { googleMapsApiKey: googleMapKey || '' },
-                React__default.createElement(GoogleMap, { mapContainerClassName: 'map', center: center, zoom: 15, onLoad: onLoad, options: mapOptions },
+                }, className: "aspect-ratio-map", loading: "lazy", allowFullScreen: true, src: `https://www.google.com/maps/embed/v1/place?key=${googleMapKey}&q=${hospital.latitude},${hospital.longitude}&zoom=14` })) : (React__default.createElement(LoadScript, { googleMapsApiKey: googleMapKey || '' },
+                React__default.createElement(GoogleMap, { mapContainerClassName: 'map', center: center, zoom: 14, onLoad: onLoad, options: mapOptions },
                     React__default.createElement(Marker, { position: center })))),
-            !hasNoCard ? (React__default.createElement(StyledCard, { className: cn('map-card'), "data-is-full-width": isFullWidth || undefined, ref: mapCard },
+            !hasNoCard ? (React__default.createElement(StyledCard$1, { className: cn('map-card'), "data-is-full-width": isFullWidth || undefined, ref: mapCard },
                 React__default.createElement(StyledHospitalTitle, { href: `${basePath}${getHospitalUrl(locale, hospital)}` },
                     React__default.createElement(Text, { size: "s2", type: "semiBold" }, hospitalName)),
                 React__default.createElement(StyledHospitalMoreInfo, null,
@@ -693,6 +694,11 @@ const Map = (props) => {
                     : t('doctorInfoComponent.loginToCall'))))) : null)));
 };
 
+/* eslint-disable prettier/prettier */
+const Email = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none" }, props),
+    React.createElement("path", { d: "M2 4.66668C2 4.31305 2.14048 3.97392 2.39052 3.72387C2.64057 3.47382 2.97971 3.33334 3.33333 3.33334H12.6667C13.0203 3.33334 13.3594 3.47382 13.6095 3.72387C13.8595 3.97392 14 4.31305 14 4.66668V11.3333C14 11.687 13.8595 12.0261 13.6095 12.2762C13.3594 12.5262 13.0203 12.6667 12.6667 12.6667H3.33333C2.97971 12.6667 2.64057 12.5262 2.39052 12.2762C2.14048 12.0261 2 11.687 2 11.3333V4.66668Z", stroke: "#111111", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M2 4.66666L8 8.66666L14 4.66666", stroke: "#111111", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" })));
+
 // import { ThemeProps } from '@hhgtech/hhg-components'
 const StyledClinicInfo = styled.div `
   color: #111111;
@@ -711,7 +717,7 @@ const StyledClinicInfo = styled.div `
     line-height: 1.25rem;
     font-weight: 400;
   }
-  .telephone {
+  .contact-item {
     display: inline-flex;
     align-items: center;
     padding: 8px 12px;
@@ -743,6 +749,10 @@ const StyledMobileIcon = styled(Mobile) `
   width: 1rem;
   height: 1rem;
 `;
+const StyledEmailIcon = styled(Email) `
+  width: 1rem;
+  height: 1rem;
+`;
 const StyledContainer = styled.div `
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -761,6 +771,10 @@ const StyledFlexBox = styled.div `
 `;
 const StyledDistanceTag$1 = styled(DistanceTag) `
   border-radius: 0.75rem !important;
+`;
+const StyledContact = styled.div `
+  display: flex;
+  gap: 4px;
 `;
 
 function ClinicInfo(props) {
@@ -771,6 +785,7 @@ function ClinicInfo(props) {
         address: hospitalInfo.address || '',
         name: hospitalInfo.name || '',
         phone: hospitalInfo.phone || '',
+        email: hospitalInfo.email || '',
     };
     return (React__default.createElement(StyledClinicInfo, null,
         React__default.createElement(StyledMap, { dataEventAction: dataEventAction, dataEventCategory: dataEventCategory, dataEventLabel: dataEventLabel, googleMapKey: googleMapKey, hasNoCard: true, hospital: hospital, locale: locale, isLoggedIn: isLoggedIn, isFullWidth: true, height: 220, className: "panel-map", onPhoneHospital: onPhoneHospital }),
@@ -782,10 +797,14 @@ function ClinicInfo(props) {
                         flexShrink: 0,
                     } },
                     React__default.createElement(StyledDistanceTag$1, { value: `${distance} km` })))),
-            hospitalInfo.phone && (React__default.createElement("div", { className: "telephone" },
-                React__default.createElement(StyledMobileIcon, null),
-                React__default.createElement("a", { href: `tel:${hospitalInfo.phone}` }, formatPhoneNumber(hospitalInfo.phone))))),
-        hospitalInfo.working_times && (React__default.createElement(OpeningHours, { workingTimes: hospitalInfo.working_times }))));
+            React__default.createElement(StyledContact, null,
+                hospitalInfo.phone && (React__default.createElement("div", { className: "contact-item" },
+                    React__default.createElement(StyledMobileIcon, null),
+                    React__default.createElement("a", { href: `tel:${hospitalInfo.phone}` }, formatPhoneNumber(hospitalInfo.phone)))),
+                hospitalInfo.email && (React__default.createElement("div", { className: "contact-item" },
+                    React__default.createElement(StyledEmailIcon, null),
+                    React__default.createElement("a", { href: `mailto:${hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.email}` }, hospitalInfo.email))))),
+        React__default.createElement(OpeningHours, { workingTimes: hospitalInfo.working_times })));
 }
 
 styled(DrawerComponent) `
@@ -1130,10 +1149,8 @@ function PopupCollectPhone({ children, isMobile, onSubmit, isOpen: isOpenProp, o
 const StyledHospitalInfo = styled.div `
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 12px;
-  padding: 12px 16px;
-  border: 1px solid ${theme.colors.neutral100};
-  border-radius: 12px;
 
   .hospitalName {
     color: #111111;
@@ -1145,18 +1162,14 @@ const StyledHospitalInfo = styled.div `
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    padding: 4px 8px;
-    color: ${theme.colors.red700};
-    background-color: ${theme.colors.red50};
     border-radius: 8px;
 
     font-size: 0.6875rem;
     line-height: 1rem;
-    margin-right: 2px;
+    color: ${theme.colors.red600};
 
     &[data-is-opened='true'] {
       color: ${theme.colors.primaryBase};
-      background-color: ${theme.colors.blue50};
     }
   }
 
@@ -1175,6 +1188,7 @@ const StyledImageWrap = styled(ImageWrap) `
   border-radius: 8px;
   flex-shrink: 0;
   aspect-ratio: 1;
+  align-self: baseline;
 `;
 const StyledClockIcon = styled(Clock) `
   width: 12px;
@@ -1186,21 +1200,26 @@ const StyledArrowRightIcon = styled(ShapedArrowDown) `
   width: 12px;
   height: 12px;
   transform: rotate(90deg);
+
+  & > path {
+    stroke-width: 1.5;
+  }
 `;
 const StyledDistanceTag = styled(DistanceTag) `
   & > span {
     color: ${theme.colors.gray800};
   }
+
+  & {
+    border: none;
+  }
 `;
 
 const checkHospitalStatus = (times) => {
-    if (!times) {
-        return false;
-    }
     const currentDate = new Date();
     const currentShortDay = workingDays[currentDate.getDay()];
     const openTime = times[currentShortDay];
-    return openTime === null || openTime === void 0 ? void 0 : openTime.some((item) => {
+    return openTime.some((item) => {
         const [startHour, startMinute] = item.start_at.split(':').map(parseInt);
         const [endHour, endMinute] = item.end_at.split(':').map(parseInt);
         const currentHour = currentDate.getHours();
@@ -1218,9 +1237,9 @@ function HospitalInfo({ hospitalInfo, distance, className, }) {
         React__default.createElement(StyledImageWrap, { src: hospitalInfo.logo, backupSrc: CommonGAssets.getAssetPath('avatar.jpg'), alt: "hospital" }),
         React__default.createElement("div", { className: "flex-1" },
             React__default.createElement("div", { className: "hospitalName" }, hospitalInfo.name),
-            hospitalInfo.working_times && (React__default.createElement("div", { className: "hospitalStatus", "data-is-opened": isOpened },
+            React__default.createElement("div", { className: "hospitalStatus", "data-is-opened": isOpened },
                 React__default.createElement(StyledClockIcon, null),
-                React__default.createElement("span", null, t(isOpened ? 'hospital.status.opening' : 'hospital.status.closed')))),
+                React__default.createElement("span", null, t(isOpened ? 'hospital.status.opening' : 'hospital.status.closed'))),
             distance && React__default.createElement(StyledDistanceTag, { value: `${distance} km` })),
         React__default.createElement(StyledArrowRightIcon, null)));
 }
@@ -1241,7 +1260,7 @@ const StyledInsuranceContainer = styled.div `
     font-size: 0.9375rem;
     line-height: 1.5rem;
     color: ${theme.colors.gray800};
-    font-weight: 500;
+    font-weight: 600;
   }
   .txt-caption-1 {
     font-size: 0.6875rem;
@@ -1280,4 +1299,113 @@ function ProductInsuranceInfo({ hospitalInfo, }) {
             React__default.createElement(PaymentList, { payments: hospitalInfo.accepted_payments })))));
 }
 
-export { ClinicInfo as C, EPopupCollectPhoneStep as E, HospitalInfo as H, Mobile as M, NavHeader as N, PopupCollectPhone as P, UserProfileNavigation as U, UserStats as a, CollectPhoneForm as b, ProductInsuranceInfo as c, Check as d, Clock as e, formPhoneType as f, HelloZalo as g, Ellipse as h, PhoneInactive as i };
+/* eslint-disable prettier/prettier */
+const Credential = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
+    React.createElement("path", { d: "M10.7146 13.4812L11.5779 12.7568C11.7779 12.589 12.0312 12.4968 12.2923 12.4968H13.419C13.9579 12.4968 14.4201 12.1101 14.5135 11.579L14.709 10.469C14.7546 10.2112 14.889 9.97901 15.089 9.81124L15.9523 9.08679C16.3657 8.74012 16.4701 8.14679 16.2001 7.68012L15.6368 6.70346C15.5057 6.47679 15.459 6.21235 15.5046 5.95457L15.7001 4.84457C15.7935 4.31346 15.4923 3.79235 14.9857 3.6079L13.9268 3.22235C13.6812 3.13346 13.4757 2.96012 13.3446 2.73346L12.7812 1.75679C12.5112 1.29012 11.9457 1.08346 11.439 1.2679L10.3801 1.65346C10.1346 1.74235 9.86568 1.74235 9.62012 1.65346L8.56123 1.2679C8.05457 1.08346 7.48901 1.28901 7.21901 1.75679L6.65568 2.73346C6.52457 2.96012 6.31901 3.13235 6.07346 3.22235L5.01457 3.6079C4.5079 3.79235 4.20679 4.31346 4.30012 4.84457L4.49568 5.95457C4.54123 6.21235 4.49457 6.47679 4.36346 6.70346L3.80012 7.68012C3.53012 8.14679 3.63457 8.74012 4.0479 9.08679L4.91123 9.81124C5.11123 9.97901 5.24568 10.2123 5.29123 10.469L5.48679 11.579C5.58012 12.1101 6.04234 12.4968 6.58123 12.4968H7.7079C7.96901 12.4968 8.22234 12.589 8.42234 12.7568L9.28568 13.4812C9.69901 13.8279 10.3012 13.8279 10.7146 13.4812Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M13.6114 15.2778V19.1667L10.0003 16.3889L6.38916 19.1667V15.2778", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M10.0001 9.69347C11.2274 9.69347 12.2223 8.69855 12.2223 7.47125C12.2223 6.24395 11.2274 5.24902 10.0001 5.24902C8.77275 5.24902 7.77783 6.24395 7.77783 7.47125C7.77783 8.69855 8.77275 9.69347 10.0001 9.69347Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" })));
+
+/* eslint-disable prettier/prettier */
+const Education = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
+    React.createElement("g", { clipPath: "url(#clip0_2422_9990)" },
+        React.createElement("path", { d: "M15.5 15.5003C14.678 15.5003 13.956 15.0983 13.5 14.4863V18.5003C13.5 18.7023 13.622 18.8853 13.809 18.9623C13.996 19.0413 14.21 18.9973 14.354 18.8543L15.5 17.7083L16.646 18.8543C16.742 18.9503 16.87 19.0003 17 19.0003C17.064 19.0003 17.13 18.9883 17.191 18.9623C17.378 18.8853 17.5 18.7023 17.5 18.5003V14.4863C17.044 15.0983 16.322 15.5003 15.5 15.5003Z", fill: "currentColor" }),
+        React.createElement("path", { d: "M11.75 17.25H5.25C4.145 17.25 3.25 16.355 3.25 15.25V4.75C3.25 3.645 4.145 2.75 5.25 2.75H13.75C14.855 2.75 15.75 3.645 15.75 4.75V8", stroke: "currentColor", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { d: "M6.25 6.75H12.75", stroke: "currentColor", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { d: "M6.25 10H9.25", stroke: "currentColor", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { d: "M6.25 13.2505H9.25", stroke: "currentColor", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { d: "M15.5 15.5C16.8807 15.5 18 14.3807 18 13C18 11.6193 16.8807 10.5 15.5 10.5C14.1193 10.5 13 11.6193 13 13C13 14.3807 14.1193 15.5 15.5 15.5Z", stroke: "currentColor", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" })),
+    React.createElement("defs", null,
+        React.createElement("clipPath", { id: "clip0_2422_9990" },
+            React.createElement("rect", { width: 18, height: 18, fill: "white", transform: "translate(1 1)" })))));
+
+/* eslint-disable prettier/prettier */
+const Highlight = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
+    React.createElement("path", { d: "M7.76093 1.94434L11.8267 4.92811L16.5893 3.27134L15.0077 8.05978L18.0553 12.0772L13.0127 12.0526L10.1339 16.1928L8.59882 11.3896L3.77148 9.93078L7.86504 6.98645L7.76093 1.94434Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M2.22217 17.7777L5.5555 14.4443", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M1.94434 13.6112L2.49989 13.0557", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M6.38867 18.0556L6.94423 17.5", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" })));
+
+const defaultValue = {
+    name: '',
+    specialty: '',
+    experience: '',
+    profileImage: '',
+    clinics: '',
+    educations: [],
+    expertise: '',
+    otherHighlights: [],
+};
+const DoctorExpertiseContext = createContext(defaultValue);
+const DoctorExpertiseProvider = ({ children, value }) => {
+    return (React__default.createElement(DoctorExpertiseContext.Provider, { value: value }, children));
+};
+
+const StyledCard = styled.div `
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: ${theme.colors.blue50};
+  border-radius: 12px;
+  padding: 0px 4px 4px;
+`;
+const StyledBodySection = styled.div `
+  width: 100%;
+  background-color: #ffffffcc;
+  border-radius: 8px;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+const StyledReadMore = styled.div `
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+`;
+const StyledPositionOfButton = styled.div `
+  display: flex;
+  justify-content: flex-end;
+`;
+const StyledTextButton = styled.span `
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: ${theme.colors.primaryBase};
+`;
+const StyledArrowRightBlue = styled(ArrowRightBlue) `
+  width: 0.65rem;
+  height: 0.65rem;
+  & > path {
+    stroke-width: 1.25;
+  }
+`;
+
+const DoctorExpertise = (props) => {
+    const { className, doctorInformation, onClickReadMore, children } = props;
+    const { t } = useTranslations();
+    const isShowReadMoreButton = useMemo(() => !doctorInformation.expertise && !doctorInformation.otherHighlights, [doctorInformation.expertise, doctorInformation.otherHighlights]);
+    return (React__default.createElement(DoctorExpertiseProvider, { value: doctorInformation },
+        React__default.createElement(StyledCard, { className: className },
+            React__default.createElement(DoctorInfoExpertise, { name: doctorInformation.name, specialty: doctorInformation.specialty, experience: doctorInformation.experience, profileImage: doctorInformation.profileImage }),
+            React__default.createElement(StyledBodySection, null,
+                React__default.createElement(DoctorExpertiseItem, { doctorInfo: doctorInformation.clinics, Icon: Clinic, title: t('common.clinicHospital') }),
+                React__default.createElement(DoctorExpertiseItem, { doctorInfo: doctorInformation.educations, Icon: Education, title: t('common.education') }),
+                children,
+                isShowReadMoreButton && (React__default.createElement(StyledPositionOfButton, null,
+                    React__default.createElement(StyledReadMore, { onClick: onClickReadMore },
+                        React__default.createElement(StyledTextButton, null, t('common.readMore')),
+                        React__default.createElement(StyledArrowRightBlue, null))))))));
+};
+DoctorExpertise.Expertise = () => {
+    const { expertise } = useContext(DoctorExpertiseContext);
+    const { t } = useTranslations();
+    return (React__default.createElement(DoctorExpertiseItem, { doctorInfo: expertise, Icon: Credential, title: t('common.expertiseCredentials') }));
+};
+DoctorExpertise.OtherHighlights = () => {
+    const { otherHighlights } = useContext(DoctorExpertiseContext);
+    const { t } = useTranslations();
+    return (React__default.createElement(DoctorExpertiseItem, { doctorInfo: otherHighlights, Icon: Highlight, title: t('common.otherHighlights') }));
+};
+
+export { ClinicInfo as C, DoctorExpertise as D, EPopupCollectPhoneStep as E, HospitalInfo as H, Mobile as M, NavHeader as N, PopupCollectPhone as P, UserProfileNavigation as U, UserStats as a, CollectPhoneForm as b, ProductInsuranceInfo as c, Check as d, Clock as e, formPhoneType as f, HelloZalo as g, Ellipse as h, PhoneInactive as i };

package/build/esm/{index-56932245.js → index-1ae4568a.js}

@@ -1,27 +1,27 @@
 import React__default from 'react';
-import { C as Container } from './index-bd0535d0.js';
+import { C as Container } from './index-381d23c2.js';
 import dayjs from 'dayjs';
-import './index-f134d024.js';
-import './index-3bbc49c3.js';
+import './index-f748978d.js';
+import './index-f8edffe6.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-f0c6581c.js';
-import './index-b478f836.js';
-import './index-43387a48.js';
-import { T as Text } from './index-4288764b.js';
-import './index-55612503.js';
-import './index.styles-145c199f.js';
-import './translationsContext-299726a8.js';
+import './index-7c9ba229.js';
+import './index-43415278.js';
+import './index-6dbe6ca9.js';
+import { T as Text } from './index-f65c7844.js';
+import './index-d08cba80.js';
+import './index.styles-b5076e77.js';
+import './translationsContext-556588ce.js';
 import '@mantine/hooks';
-import './text-7f10cf5a.js';
-import { M as MediaQueries } from './utils-94f3e27e.js';
-import './index-710bdbb8.js';
-import { u as useScreenSize } from './index-f9c0b188.js';
+import './text-a32c4810.js';
+import { M as MediaQueries } from './utils-4eaa39a7.js';
+import './index-634afcf6.js';
+import { u as useScreenSize } from './index-878e373b.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { domainLocales } from './constantsDomainLocales.js';
-import { L as Logo } from './index-64114837.js';
-import { M as MarryBabyText } from './index-496fa91d.js';
+import { L as Logo } from './index-112446ca.js';
+import { M as MarryBabyText } from './index-93d224c5.js';
 
 const StyledFooter$1 = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-c81d2519.js → index-22daa572.js}

@@ -1,34 +1,34 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-cef845e5.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-65d85c84.js';
 import React__default, { useContext, useState, useEffect, useMemo } from 'react';
-import { B as Button } from './index-218ecaf5.js';
-import { H as Heading } from './index-3ac056d4.js';
-import { u as useTranslations } from './index-5c23fe7c.js';
+import { B as Button } from './index-742fa807.js';
+import { H as Heading } from './index-ef671917.js';
+import { u as useTranslations } from './index-36d282ab.js';
 import innertext from 'innertext';
-import { S as SharePopup, P as PopupDanger, h as deletePost, i as IconAlertCircle, b as SubmitReportForm, j as deleteComment, k as decodeCommentBody, l as likeUnlikeComment, I as InputCommentBar, m as likeUnlikePost, g as getDefaultFailNoti } from './index-86b55b3c.js';
-import { C as CommonGAssets } from './index-b478f836.js';
-import { R as REPORT_REASON_MAP, D as DEFAULT_IMG } from './constants-9269d800.js';
+import { S as SharePopup, P as PopupDanger, h as deletePost, i as IconAlertCircle, b as SubmitReportForm, j as deleteComment, k as decodeCommentBody, l as likeUnlikeComment, I as InputCommentBar, m as likeUnlikePost, g as getDefaultFailNoti } from './index-d0b2630c.js';
+import { C as CommonGAssets } from './index-43415278.js';
+import { R as REPORT_REASON_MAP, D as DEFAULT_IMG } from './constants-72403ae4.js';
 import { useTogetherAuthRequiredAction, TogetherAuthConfigContextProvider } from './useTogetherAuthRequiredAction.js';
-import { T as TogetherComponentGlobalContext, c as callApi, s as getMarryBabyApiPath, o as getDiscoverApiPath, g as getCarePath, k as getCurrentBaseUrl$1, b as callApiWithAuth, d as getApiPath, t as callApiWithOptionalAuth, l as domainLocales$1 } from './utils-1dfd2134.js';
-import { b as TreePopoverMenu, C as CardReactions, c as CardReactionType, a as LabelPin, T as TagTopic } from './treePopoverMenu-0551c67f.js';
+import { T as TogetherComponentGlobalContext, c as callApi, s as getMarryBabyApiPath, o as getDiscoverApiPath, g as getCarePath, k as getCurrentBaseUrl$1, b as callApiWithAuth, d as getApiPath, t as callApiWithOptionalAuth, l as domainLocales$1 } from './utils-46309e29.js';
+import { b as TreePopoverMenu, C as CardReactions, c as CardReactionType, a as LabelPin, T as TagTopic } from './treePopoverMenu-e9c0eb09.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-94f3e27e.js';
+import { M as MediaQueries } from './utils-4eaa39a7.js';
 import { theme } from './miscTheme.js';
-import { g as formatArticle, h as formatCategory, e as formatComment } from './dataTransform-88be7705.js';
+import { g as formatArticle, h as formatCategory, e as formatComment } from './dataTransform-7bead3a3.js';
 import { DISCOVER_PATHS, CARE_PATHS, PATHS } from './togetherApiPaths.js';
-import { C as CardLink } from './index-dd895697.js';
-import { C as CardAuthor, c as ProfileDetailModal } from './index-c43e0d82.js';
-import { a as ProfileDetail, P as PostContent } from './index-70b9dc20.js';
-import { a as PostImagePreview } from './index-19a1c55d.js';
-import { S as SocialLinkPreview } from './index-e3b7033c.js';
-import { D as Divider } from './index-ad8340d9.js';
-import './index-f134d024.js';
+import { C as CardLink } from './index-6c1c9cb2.js';
+import { C as CardAuthor, c as ProfileDetailModal } from './index-9e216d9e.js';
+import { a as ProfileDetail, P as PostContent } from './index-b53640e2.js';
+import { a as PostImagePreview } from './index-d1b260df.js';
+import { S as SocialLinkPreview } from './index-b6ff30c0.js';
+import { D as Divider } from './index-ef508c9b.js';
+import './index-f748978d.js';
 import { Plus } from '@hhgtech/icons/core';
 import { ArrowRight, ArrowDown, Trash, Endorse } from '@hhgtech/icons/other';
 import { Accordion } from '@mantine/core';
-import { I as Input } from './index-c5d04de2.js';
-import { T as Text } from './index-4288764b.js';
-import { L as Loading } from './index-1d773df0.js';
-import { g as getCurrentBaseUrl } from './normalizeLink-eedca105.js';
+import { I as Input } from './index-04333161.js';
+import { T as Text } from './index-f65c7844.js';
+import { L as Loading } from './index-cbd96386.js';
+import { g as getCurrentBaseUrl } from './normalizeLink-c13f3187.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 var img$7 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath fill='%233E3F58' d='M5 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2M19 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2'/%3e%3c/svg%3e";

package/build/esm/{index-ae1ff5ed.js → index-27751cd7.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-cef845e5.js';
+import { _ as __rest } from './tslib.es6-65d85c84.js';
 import React__default, { createContext, useContext } from 'react';
 import { useMantineTheme, Box, Flex, rem, createStyles } from '@mantine/core';
 import { RedCross } from '@hhgtech/icons/other';
-import './index-3bbc49c3.js';
+import './index-f8edffe6.js';
 import '@mantine/dates';
-import './index-f134d024.js';
-import './index-f0c6581c.js';
-import './index-b478f836.js';
-import { t as themeColors } from './index-43387a48.js';
-import { T as Text } from './index-4288764b.js';
-import './index-55612503.js';
-import './index.styles-145c199f.js';
-import { u as useTranslations } from './index-5c23fe7c.js';
+import './index-f748978d.js';
+import './index-7c9ba229.js';
+import './index-43415278.js';
+import { t as themeColors } from './index-6dbe6ca9.js';
+import { T as Text } from './index-f65c7844.js';
+import './index-d08cba80.js';
+import './index.styles-b5076e77.js';
+import { u as useTranslations } from './index-36d282ab.js';
 import '@mantine/hooks';
-import './text-7f10cf5a.js';
-import { M as MediaQueries } from './utils-94f3e27e.js';
-import './index-710bdbb8.js';
+import './text-a32c4810.js';
+import { M as MediaQueries } from './utils-4eaa39a7.js';
+import './index-634afcf6.js';
 import styled from '@emotion/styled';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 
@@ -111,7 +111,7 @@ const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
         } },
         medicalReview.avatar && (React__default.createElement("div", { className: "embedded-review__avatar" },
             React__default.createElement(Box, { pos: "relative" },
-                React__default.createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer }),
+                React__default.createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer, loading: "lazy" }),
                 React__default.createElement(RedCross, { size: 14 })))),
         React__default.createElement("div", { dangerouslySetInnerHTML: {
                 __html: t('toolPage.toolReviewer', {

package/build/esm/{index-8d10ece5.js → index-2f19848f.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { L as Label } from './index-c5d04de2.js';
+import { L as Label } from './index-04333161.js';
 import { theme } from './miscTheme.js';
 
 const StyledTextArea = styled.div `

package/build/esm/index-2f3113f4.js

@@ -0,0 +1,15 @@
+import { _ as __rest } from './tslib.es6-65d85c84.js';
+import React__default from 'react';
+import { MantineProvider as MantineProvider$1 } from '@mantine/core';
+import { u as useMantineLocale, g as getMantineThemeOverride, N as NotificationsHandler } from './index-6dbe6ca9.js';
+import { C as CustomStylesType } from './text-a32c4810.js';
+
+const MantineProvider = (_a) => {
+    var { children, locale, template = 'hb', isNotifications = true, customStyleType = CustomStylesType.NONE } = _a, props = __rest(_a, ["children", "locale", "template", "isNotifications", "customStyleType"]);
+    useMantineLocale(locale);
+    return (React__default.createElement(MantineProvider$1, Object.assign({ theme: getMantineThemeOverride(locale, template, customStyleType) }, props),
+        children,
+        isNotifications && React__default.createElement(NotificationsHandler, null)));
+};
+
+export { MantineProvider as M };

package/build/esm/{index-f45d88b7.js → index-305eca69.js}

@@ -1,5 +1,5 @@
 import React__default, { useState, useEffect } from 'react';
-import { B as Button } from './index-55612503.js';
+import { B as Button } from './index-d08cba80.js';
 import styled from '@emotion/styled';
 
 const StyledContainer = styled.div `

package/build/esm/{index-5c23fe7c.js → index-36d282ab.js}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
-import { T as TranslationsContext } from './translationsContext-299726a8.js';
+import { T as TranslationsContext } from './translationsContext-556588ce.js';
 
 // SRC: https://github.com/berezh/react-string-format
 function format(text, params) {

package/build/esm/{index-66565d57.js → index-37439923.js}

@@ -1,12 +1,12 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-cef845e5.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-65d85c84.js';
 import React__default, { useState, useMemo, useCallback } from 'react';
-import { u as useTranslations } from './index-5c23fe7c.js';
+import { u as useTranslations } from './index-36d282ab.js';
 import { createStyles } from '@mantine/core';
-import { P as PATHS } from './paths-433175b0.js';
-import { L as LOCALIZED_SLUGS } from './constants-b86d63d0.js';
-import { B as Button } from './index-55612503.js';
-import './index-f134d024.js';
-import { c as callApi, g as getCarePath } from './utils-1dfd2134.js';
+import { P as PATHS } from './paths-1e24cbf5.js';
+import { L as LOCALIZED_SLUGS } from './constants-d0421596.js';
+import { B as Button } from './index-d08cba80.js';
+import './index-f748978d.js';
+import { c as callApi, g as getCarePath } from './utils-46309e29.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
 

package/build/esm/{index-094dd2cf.js → index-375d868f.js}

@@ -1,13 +1,13 @@
-import { _ as __rest } from './tslib.es6-cef845e5.js';
+import { _ as __rest } from './tslib.es6-65d85c84.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import './index-f0c6581c.js';
+import './index-7c9ba229.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-b478f836.js';
+import { C as CommonGAssets } from './index-43415278.js';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-f9c0b188.js';
-import { T as Text } from './index-89362365.js';
-import { L as LOCALE } from './Locale-aaa3e640.js';
-import { c as CentralCarousel } from './index-3bbc49c3.js';
+import { I as ImageWrap } from './index-878e373b.js';
+import { T as Text } from './index-d1892b36.js';
+import { L as LOCALE } from './Locale-6fb06008.js';
+import { c as CentralCarousel } from './index-f8edffe6.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;

package/build/esm/{index-8cff2a0e.js → index-3f0da1c6.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useRef, useEffect } from 'react';
-import { u as useScrollbarSize } from './useScrollbarSize-dbe6723b.js';
+import { u as useScrollbarSize } from './useScrollbarSize-3d74e491.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-94f3e27e.js';
+import { M as MediaQueries } from './utils-4eaa39a7.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import { theme } from './miscTheme.js';