@hhgtech/hhg-components 1.29.434 → 1.29.436

package/build/esm/{index-b1308672.js → index-00deb2dd.js}

@@ -1,35 +1,33 @@
 import * as React from 'react';
-import React__default, { useMemo, useState, useEffect, useRef } from 'react';
-import { u as useTranslations } from './index-54314f3d.js';
+import React__default, { useMemo, useState, useEffect, useRef, createContext, useContext } from 'react';
+import { u as useTranslations } from './index-ea8c2de9.js';
 import { getCookie } from './miscCookieHelper.js';
-import { C as CommonGAssets } from './index-d1226c6f.js';
-import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-eb98e478.js';
+import { C as CommonGAssets } from './index-82b4f2b6.js';
+import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-8d0ad45e.js';
 import { theme } from './miscTheme.js';
-import { A as Avatar, I as IconWrapper, D as DistanceTag, S as ShapedArrowDown } from './index-bc4aeb66.js';
-import { b as getTogetherUserPostsApiPath } from './index-81d8fb69.js';
-import { B as Button } from './index-f18a1cc6.js';
-import { w as workingDays } from './types-ecbfb095.js';
+import { A as Avatar, I as IconWrapper, D as DistanceTag, a as DrawerBottom, S as ShapedArrowDown } from './index-098cbd8c.js';
+import { b as getTogetherUserPostsApiPath } from './index-2b41fa9e.js';
+import { B as Button } from './index-89239154.js';
+import { w as workingDays } from './types-49696c34.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-a0b9981f.js';
-import { L as LOCALISED_SLUGS } from './constants-035b6e6c.js';
-import { T as Text } from './index-8830255b.js';
-import { f as formatPhoneNumber } from './localizeNumberFormat-074cfbc0.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-c1b028b7.js';
+import { b as basePath, Z as ZINDEX_SSO } from './index-d02e9c01.js';
+import { L as LOCALISED_SLUGS } from './constants-dc6e8945.js';
+import { T as Text } from './index-2191c5e9.js';
+import { f as formatPhoneNumber } from './localizeNumberFormat-0decfdf4.js';
+import { a as __awaiter } from './tslib.es6-ebff6537.js';
 import { useDisclosure } from '@mantine/hooks';
-import { clsx, Modal, Flex, Box } from '@mantine/core';
-import { D as DrawerComponent, u as useDrawerDrag } from './index-3859ea85.js';
-import { Drawer } from 'vaul';
-import { u as useTextStyles, T as TextField, E as ErrorIcon } from './index-b776637e.js';
+import { clsx, Flex, Box } from '@mantine/core';
+import { u as useTextStyles, T as TextField } from './index-9836cc2b.js';
 import { parsePhoneNumber } from 'react-phone-number-input';
-import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './text-213211e3.js';
-import { P as Phone, I as Input } from './index-f9b8c1af.js';
-import { B as Button$1 } from './index-e189796d.js';
-import { M as MAPPED_LOCALE } from './index-a89da347.js';
-import { T as Text$1 } from './index-a49ea8de.js';
-import { I as ImageWrap } from './index-f85a7ce6.js';
-import { I as InsuranceList, P as PaymentList } from './index-a6290b4d.js';
+import { P as Phone, I as Input, E as ErrorIcon } from './index-21c766d8.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './text-7bd13052.js';
+import { B as Button$1 } from './index-4ff18fd8.js';
+import { M as MAPPED_LOCALE } from './index-0f3f5dab.js';
+import { T as Text$1 } from './index-e59166dc.js';
+import { I as ImageWrap } from './index-6e4aa339.js';
+import { I as InsuranceList, P as PaymentList, A as ArrowRightBlue, a as DoctorInfoExpertise, D as DoctorExpertiseItem, C as Clinic } from './index-67281f83.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 +585,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 +648,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 +669,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 +692,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 +715,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 +747,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 +769,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 +783,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,110 +795,16 @@ 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))))),
+            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))))),
         hospitalInfo.working_times && (React__default.createElement(OpeningHours, { workingTimes: hospitalInfo.working_times }))));
 }
 
-styled(DrawerComponent) `
-  /* max-height: 100vh;
-  max-height: 100dvh; */
-  background-color: white;
-
-  &[data-vaul-drawer-direction='bottom'] {
-    top: initial !important;
-    border-top-left-radius: 16px !important;
-    border-top-right-radius: 16px !important;
-    padding-bottom: 32px;
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-
-  .drawer__handle {
-    width: 44px;
-    height: 3px;
-    background-color: ${theme.colors.neutral500};
-    margin: 16px auto;
-    flex-shrink: 0;
-  }
-`;
-const StyledDrawerBottomContent = styled(Drawer.Content) `
-  position: fixed;
-  z-index: ${ZINDEX_SSO - 9e6 + 1};
-  inset: 0;
-  background-color: #fff;
-  outline: none !important;
-
-  &[data-is-linear='true'] {
-    background: linear-gradient(180deg, #c3e3ff 1.86%, #fff 20%) !important;
-  }
-
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.4);
-    border-radius: 6px;
-  }
-
-  &[data-vaul-drawer-direction='bottom'] {
-    top: initial;
-    border-top-left-radius: 16px;
-    border-top-right-radius: 16px;
-    /* padding-bottom: 16px; */
-  }
-
-  ${(props) => props.isDragging &&
-    `
-      input {
-        caret-color: transparent;
-      }
-    `}
-`;
-const StyledDrawerBottomOverlay = styled(Drawer.Overlay) `
-  position: fixed;
-  inset: 0;
-  z-index: ${ZINDEX_SSO - 9e6};
-  width: 100%;
-  max-height: 100%;
-  background-color: rgb(0, 0, 0, 0.4);
-`;
-const StyledDrawerBottomHandler = styled(Drawer.Handle) `
-  &[data-vaul-handle] {
-    width: 44px;
-    height: 3px;
-    background-color: ${theme.colors.neutral500};
-    margin: 16px auto;
-    flex-shrink: 0;
-  }
-`;
-
-function DrawerBottom(_a) {
-    var { children, onClose, isOpen, onOpenChange, isMobile, classNames, isLinear, overlayClassName, contentClassName, handlerClassName } = _a, restProps = __rest(_a, ["children", "onClose", "isOpen", "onOpenChange", "isMobile", "classNames", "isLinear", "overlayClassName", "contentClassName", "handlerClassName"]);
-    const { isDragging, handleDragStart, handleDragEnd } = useDrawerDrag();
-    if (isMobile) {
-        return (React__default.createElement(Drawer.Root, Object.assign({ onDrag: handleDragStart, onRelease: handleDragEnd, open: isOpen, onOpenChange: onOpenChange }, restProps),
-            React__default.createElement(Drawer.Portal, null,
-                React__default.createElement(StyledDrawerBottomOverlay, { className: clsx(overlayClassName, 'drawer__overlay') }),
-                React__default.createElement(StyledDrawerBottomContent, { isDragging: isDragging, className: clsx(contentClassName, 'drawer__content'), "data-is-linear": isLinear },
-                    React__default.createElement(Drawer.Title, { style: { display: 'none' } }),
-                    React__default.createElement(StyledDrawerBottomHandler, { className: clsx(handlerClassName, 'drawer__handle') }),
-                    children))));
-    }
-    return (React__default.createElement(Modal, Object.assign({ withCloseButton: true, centered: true, zIndex: 500, size: "auto", classNames: classNames, radius: "lg" }, restProps, { onClose: onClose, opened: isOpen, styles: {
-            root: {
-                maxHeight: '400px',
-            },
-        } }), children));
-}
-
 const StyledCollectPhoneForm = styled.div `
   .mantine-Input-input.custom_input {
     /* font-size: 16px; */
@@ -1130,10 +1049,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 +1062,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 +1088,7 @@ const StyledImageWrap = styled(ImageWrap) `
   border-radius: 8px;
   flex-shrink: 0;
   aspect-ratio: 1;
+  align-self: baseline;
 `;
 const StyledClockIcon = styled(Clock) `
   width: 12px;
@@ -1186,11 +1100,19 @@ 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) => {
@@ -1218,7 +1140,7 @@ 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 },
+            hospitalInfo.working_times && (React__default.createElement("div", { key: isOpened ? 'open' : 'closed', className: "hospitalStatus", "data-is-opened": isOpened },
                 React__default.createElement(StyledClockIcon, null),
                 React__default.createElement("span", null, t(isOpened ? 'hospital.status.opening' : 'hospital.status.closed')))),
             distance && React__default.createElement(StyledDistanceTag, { value: `${distance} km` })),
@@ -1241,7 +1163,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 +1202,129 @@ 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 = {
+    id: '',
+    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;
+
+  .body-section {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const StyledBodySection = styled.div `
+  background-color: #ffffffcc;
+  border-radius: 8px;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .flex-item-doctor-info {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+`;
+const StyledReadMore = styled.div `
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 8px;
+`;
+const StyledPositionOfButton = styled.div `
+  display: flex;
+  justify-content: flex-end;
+`;
+const StyledArrowRightBlue = styled(ArrowRightBlue) `
+  width: 0.65rem;
+  height: 0.65rem;
+  & > path {
+    stroke-width: 1.25;
+  }
+`;
+
+const DoctorExpertise = (props) => {
+    var _a, _b, _c, _d;
+    const { className, doctorInformation, onClickReadMore, children, isShowReadMoreButton, style, defaultProfileImage, } = props;
+    const { t } = useTranslations();
+    const isShowBodySection = ((_a = doctorInformation === null || doctorInformation === void 0 ? void 0 : doctorInformation.clinics) === null || _a === void 0 ? void 0 : _a.length) > 0 ||
+        ((_b = doctorInformation === null || doctorInformation === void 0 ? void 0 : doctorInformation.educations) === null || _b === void 0 ? void 0 : _b.length) > 0 ||
+        children ||
+        isShowReadMoreButton;
+    return (React__default.createElement(DoctorExpertiseProvider, { value: doctorInformation },
+        React__default.createElement(StyledCard, { className: className, style: style },
+            React__default.createElement(DoctorInfoExpertise, { name: doctorInformation.name, specialty: doctorInformation.specialty, experience: doctorInformation.experience, profileImage: doctorInformation.profileImage || defaultProfileImage }),
+            isShowBodySection && (React__default.createElement(StyledBodySection, { className: "body-section" },
+                React__default.createElement("div", { className: "flex-item-doctor-info" },
+                    ((_c = doctorInformation === null || doctorInformation === void 0 ? void 0 : doctorInformation.clinics) === null || _c === void 0 ? void 0 : _c.length) > 0 && (React__default.createElement(DoctorExpertiseItem, { doctorInfo: doctorInformation.clinics, Icon: Clinic, title: t('common.clinicHospital') })),
+                    ((_d = doctorInformation === null || doctorInformation === void 0 ? void 0 : doctorInformation.educations) === null || _d === void 0 ? void 0 : _d.length) > 0 && (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(Text$1, { size: "p2", weight: "halfBold", color: theme.colors.primaryBase }, t('common.readMore')),
+                        React__default.createElement(StyledArrowRightBlue, null)))))))));
+};
+DoctorExpertise.Expertise = () => {
+    const { expertise } = useContext(DoctorExpertiseContext);
+    const { t } = useTranslations();
+    if (!expertise)
+        return null;
+    return (React__default.createElement(DoctorExpertiseItem, { doctorInfo: expertise, Icon: Credential, title: t('common.expertiseCredentials') }));
+};
+DoctorExpertise.OtherHighlights = () => {
+    const { otherHighlights } = useContext(DoctorExpertiseContext);
+    const { t } = useTranslations();
+    if (!otherHighlights)
+        return null;
+    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-d8c8df3a.js → index-027e189f.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-c1b028b7.js';
+import { _ as __rest } from './tslib.es6-ebff6537.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-f9b8c1af.js';
+import './index-21c766d8.js';
 import '@mantine/dates';
-import './index-a0b9981f.js';
-import './index-c6a033a5.js';
-import './index-d1226c6f.js';
-import { t as themeColors } from './index-a89da347.js';
-import { T as Text } from './index-a49ea8de.js';
-import './index-e189796d.js';
-import './index.styles-d093bee1.js';
-import { u as useTranslations } from './index-54314f3d.js';
+import './index-d02e9c01.js';
+import './index-af40ae57.js';
+import './index-82b4f2b6.js';
+import { t as themeColors } from './index-0f3f5dab.js';
+import { T as Text } from './index-e59166dc.js';
+import './index-4ff18fd8.js';
+import './index.styles-43d79a33.js';
+import { u as useTranslations } from './index-ea8c2de9.js';
 import '@mantine/hooks';
-import './text-213211e3.js';
-import { M as MediaQueries } from './utils-eabe74c5.js';
-import './index-6506ceb9.js';
+import './text-7bd13052.js';
+import { M as MediaQueries } from './utils-d47134bf.js';
+import './index-f1fa7f42.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-3e3a60a1.js → index-09798eca.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-c1b028b7.js';
+import { _ as __rest } from './tslib.es6-ebff6537.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, Box, Input, Chip, useMantineTheme, Flex, Switch } from '@mantine/core';
-import { T as Text } from './index-a49ea8de.js';
-import { B as Button } from './index-e189796d.js';
-import { u as useTranslations } from './index-54314f3d.js';
+import { T as Text } from './index-e59166dc.js';
+import { B as Button } from './index-4ff18fd8.js';
+import { u as useTranslations } from './index-ea8c2de9.js';
 import flattenChildren from 'react-keyed-flatten-children';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-bc4aeb66.js → index-098cbd8c.js}

@@ -2,7 +2,12 @@ import * as React from 'react';
 import React__default, { useState, useEffect } from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-f85a7ce6.js';
+import { I as ImageWrap } from './index-6e4aa339.js';
+import { _ as __rest } from './tslib.es6-ebff6537.js';
+import { clsx, Modal } from '@mantine/core';
+import { D as DrawerComponent, u as useDrawerDrag } from './index-26c25e9f.js';
+import { Drawer } from 'vaul';
+import { Z as ZINDEX_SSO } from './index-d02e9c01.js';
 
 /* eslint-disable prettier/prettier */
 const Pin2 = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 12 12", fill: "none" }, props),
@@ -169,4 +174,102 @@ const IconWrapper = ({ children, className, onClick, wrapperSize, iconSize = 24,
     })));
 };
 
-export { Avatar as A, DistanceTag as D, IconWrapper as I, Pin2 as P, ShapedArrowDown as S };
+styled(DrawerComponent) `
+  /* max-height: 100vh;
+  max-height: 100dvh; */
+  background-color: white;
+
+  &[data-vaul-drawer-direction='bottom'] {
+    top: initial !important;
+    border-top-left-radius: 16px !important;
+    border-top-right-radius: 16px !important;
+    padding-bottom: 32px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .drawer__handle {
+    width: 44px;
+    height: 3px;
+    background-color: ${theme.colors.neutral500};
+    margin: 16px auto;
+    flex-shrink: 0;
+  }
+`;
+const StyledDrawerBottomContent = styled(Drawer.Content) `
+  position: fixed;
+  z-index: ${ZINDEX_SSO - 9e6 + 1};
+  inset: 0;
+  background-color: #fff;
+  outline: none !important;
+
+  &[data-is-linear='true'] {
+    background: linear-gradient(180deg, #c3e3ff 1.86%, #fff 20%) !important;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+
+  &[data-vaul-drawer-direction='bottom'] {
+    top: initial;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    /* padding-bottom: 16px; */
+  }
+
+  ${(props) => props.isDragging &&
+    `
+      input {
+        caret-color: transparent;
+      }
+    `}
+`;
+const StyledDrawerBottomOverlay = styled(Drawer.Overlay) `
+  position: fixed;
+  inset: 0;
+  z-index: ${ZINDEX_SSO - 9e6};
+  width: 100%;
+  max-height: 100%;
+  background-color: rgb(0, 0, 0, 0.4);
+`;
+const StyledDrawerBottomHandler = styled(Drawer.Handle) `
+  &[data-vaul-handle] {
+    width: 44px;
+    height: 3px;
+    background-color: ${theme.colors.neutral500};
+    margin: 16px auto;
+    flex-shrink: 0;
+  }
+`;
+
+function DrawerBottom(_a) {
+    var { children, onClose, isOpen, onOpenChange, isMobile, classNames, isLinear, overlayClassName, contentClassName, handlerClassName } = _a, restProps = __rest(_a, ["children", "onClose", "isOpen", "onOpenChange", "isMobile", "classNames", "isLinear", "overlayClassName", "contentClassName", "handlerClassName"]);
+    const { isDragging, handleDragStart, handleDragEnd } = useDrawerDrag();
+    if (isMobile) {
+        return (React__default.createElement(Drawer.Root, Object.assign({ onDrag: handleDragStart, onRelease: handleDragEnd, open: isOpen, onOpenChange: onOpenChange, onClose: onClose }, restProps),
+            React__default.createElement(Drawer.Portal, null,
+                React__default.createElement(StyledDrawerBottomOverlay, { className: clsx(overlayClassName, 'drawer__overlay') }),
+                React__default.createElement(StyledDrawerBottomContent, { isDragging: isDragging, className: clsx(contentClassName, 'drawer__content'), "data-is-linear": isLinear },
+                    React__default.createElement(Drawer.Title, { style: { display: 'none' } }),
+                    React__default.createElement(StyledDrawerBottomHandler, { className: clsx(handlerClassName, 'drawer__handle') }),
+                    children))));
+    }
+    return (React__default.createElement(Modal, Object.assign({ withCloseButton: true, centered: true, zIndex: 500, size: "auto", classNames: classNames, radius: "lg" }, restProps, { onClose: onClose, opened: isOpen, styles: {
+            root: {
+                maxHeight: '400px',
+            },
+        } }), children));
+}
+
+export { Avatar as A, DistanceTag as D, IconWrapper as I, Pin2 as P, ShapedArrowDown as S, DrawerBottom as a };

package/build/esm/{index-9625320e.js → index-0cffe926.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-c1b028b7.js';
+import { _ as __rest } from './tslib.es6-ebff6537.js';
 import React__default from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';