@hhgtech/hhg-components 1.29.435 → 1.29.437

package/build/{index-db135d8b.js → index-b85f4b1f.js}

@@ -1,20 +1,20 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-e9f494fb.js');
+var index$2 = require('./index-fd36a696.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index = require('./index-c96f8955.js');
-var index$1 = require('./index-92e5bd77.js');
-var tslib_es6 = require('./tslib.es6-b33ba902.js');
-var index$7 = require('./index-aa0a87d2.js');
-var index$5 = require('./index-c7705a55.js');
+var index = require('./index-520222d5.js');
+var index$1 = require('./index-01d8e748.js');
+var tslib_es6 = require('./tslib.es6-5348b8bf.js');
+var index$7 = require('./index-ad157406.js');
+var index$5 = require('./index-4df0e54d.js');
 var core = require('@mantine/core');
-var number = require('./number-a1c91819.js');
-var index$3 = require('./index-c7d4bc04.js');
+var number = require('./number-d6fcda7d.js');
+var index$3 = require('./index-0b903e12.js');
 var hooks = require('@mantine/hooks');
-var index$4 = require('./index-9fe4bf6b.js');
-var index$6 = require('./index-54374f05.js');
+var index$4 = require('./index-2e13b3fb.js');
+var index$6 = require('./index-84a30ea1.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-d8b7dd5c.js → index-b97a7202.js}

@@ -1,36 +1,34 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-c7d4bc04.js');
+var index = require('./index-0b903e12.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$2 = require('./index-92e5bd77.js');
-var normalizeLink = require('./normalizeLink-c0393bc6.js');
+var index$2 = require('./index-01d8e748.js');
+var normalizeLink = require('./normalizeLink-bd1b5e86.js');
 var miscTheme = require('./miscTheme.js');
-var index$1 = require('./index-4771346b.js');
-var index$3 = require('./index-2e102279.js');
-var index$4 = require('./index-7d502705.js');
-var types = require('./types-d90d353b.js');
+var index$1 = require('./index-b4fd1ed7.js');
+var index$3 = require('./index-d2e44876.js');
+var index$4 = require('./index-8c0664a2.js');
+var types = require('./types-a312d6ee.js');
 var styled = require('@emotion/styled');
 var api = require('@react-google-maps/api');
 var cn = require('classnames');
-var index$5 = require('./index-aa0a87d2.js');
-var constants = require('./constants-2cd1cd00.js');
-var index$6 = require('./index-8b8d97cf.js');
-var localizeNumberFormat = require('./localizeNumberFormat-42e93bfc.js');
-var tslib_es6 = require('./tslib.es6-b33ba902.js');
+var index$5 = require('./index-ad157406.js');
+var constants = require('./constants-1cb01fbe.js');
+var index$6 = require('./index-07a27a1c.js');
+var localizeNumberFormat = require('./localizeNumberFormat-0c2bf5df.js');
+var tslib_es6 = require('./tslib.es6-5348b8bf.js');
 var hooks = require('@mantine/hooks');
 var core = require('@mantine/core');
-var index$7 = require('./index-322f18d9.js');
-var vaul = require('vaul');
-var index$a = require('./index-a71d1ad5.js');
+var index$9 = require('./index-802246a7.js');
 var PhoneInputBase = require('react-phone-number-input');
-var text = require('./text-e045e4ff.js');
-var index$9 = require('./index-e9f494fb.js');
-var index$8 = require('./index-ecb51cb3.js');
-var index$c = require('./index-6da02f6c.js');
-var index$b = require('./index-c96f8955.js');
-var index$d = require('./index-db78eb88.js');
-var index$e = require('./index-b4701138.js');
+var index$8 = require('./index-fd36a696.js');
+var text = require('./text-48fdfd68.js');
+var index$7 = require('./index-f65a5e45.js');
+var index$b = require('./index-f3314e92.js');
+var index$a = require('./index-520222d5.js');
+var index$c = require('./index-8bf51bd3.js');
+var index$d = require('./index-58d2452f.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -612,7 +610,7 @@ const StyledOMap = styled__default["default"].div `
     color: ${miscTheme.theme.colors.primaryBase};
   }
 `;
-const StyledCard = styled__default["default"].div `
+const StyledCard$1 = styled__default["default"].div `
     padding: 16px;
     border: 1px solid ${miscTheme.theme.colors.neutral200} 
     background: ${miscTheme.theme.colors.white}
@@ -675,9 +673,10 @@ const Map = (props) => {
     const mapCard = React.useRef(null);
     const { t } = index.useTranslations();
     const onLoad = React__namespace["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,
@@ -695,10 +694,10 @@ const Map = (props) => {
         React__namespace["default"].createElement("div", { className: "map" },
             isUsingEmbedMap ? (React__namespace["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__namespace["default"].createElement(api.LoadScript, { googleMapsApiKey: googleMapKey || '' },
-                React__namespace["default"].createElement(api.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__namespace["default"].createElement(api.LoadScript, { googleMapsApiKey: googleMapKey || '' },
+                React__namespace["default"].createElement(api.GoogleMap, { mapContainerClassName: 'map', center: center, zoom: 14, onLoad: onLoad, options: mapOptions },
                     React__namespace["default"].createElement(api.Marker, { position: center })))),
-            !hasNoCard ? (React__namespace["default"].createElement(StyledCard, { className: cn__default["default"]('map-card'), "data-is-full-width": isFullWidth || undefined, ref: mapCard },
+            !hasNoCard ? (React__namespace["default"].createElement(StyledCard$1, { className: cn__default["default"]('map-card'), "data-is-full-width": isFullWidth || undefined, ref: mapCard },
                 React__namespace["default"].createElement(StyledHospitalTitle, { href: `${index$5.basePath}${getHospitalUrl(locale, hospital)}` },
                     React__namespace["default"].createElement(index$6.Text, { size: "s2", type: "semiBold" }, hospitalName)),
                 React__namespace["default"].createElement(StyledHospitalMoreInfo, null,
@@ -718,6 +717,11 @@ const Map = (props) => {
                     : t('doctorInfoComponent.loginToCall'))))) : null)));
 };
 
+/* eslint-disable prettier/prettier */
+const Email = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none" }, props),
+    React__namespace.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__namespace.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__default["default"].div `
   color: #111111;
@@ -736,7 +740,7 @@ const StyledClinicInfo = styled__default["default"].div `
     line-height: 1.25rem;
     font-weight: 400;
   }
-  .telephone {
+  .contact-item {
     display: inline-flex;
     align-items: center;
     padding: 8px 12px;
@@ -768,6 +772,10 @@ const StyledMobileIcon = styled__default["default"](Mobile) `
   width: 1rem;
   height: 1rem;
 `;
+const StyledEmailIcon = styled__default["default"](Email) `
+  width: 1rem;
+  height: 1rem;
+`;
 const StyledContainer = styled__default["default"].div `
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -786,6 +794,10 @@ const StyledFlexBox = styled__default["default"].div `
 `;
 const StyledDistanceTag$1 = styled__default["default"](index$1.DistanceTag) `
   border-radius: 0.75rem !important;
+`;
+const StyledContact = styled__default["default"].div `
+  display: flex;
+  gap: 4px;
 `;
 
 function ClinicInfo(props) {
@@ -796,6 +808,7 @@ function ClinicInfo(props) {
         address: hospitalInfo.address || '',
         name: hospitalInfo.name || '',
         phone: hospitalInfo.phone || '',
+        email: hospitalInfo.email || '',
     };
     return (React__namespace["default"].createElement(StyledClinicInfo, null,
         React__namespace["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 }),
@@ -807,110 +820,16 @@ function ClinicInfo(props) {
                         flexShrink: 0,
                     } },
                     React__namespace["default"].createElement(StyledDistanceTag$1, { value: `${distance} km` })))),
-            hospitalInfo.phone && (React__namespace["default"].createElement("div", { className: "telephone" },
-                React__namespace["default"].createElement(StyledMobileIcon, null),
-                React__namespace["default"].createElement("a", { href: `tel:${hospitalInfo.phone}` }, localizeNumberFormat.formatPhoneNumber(hospitalInfo.phone))))),
+            React__namespace["default"].createElement(StyledContact, null,
+                hospitalInfo.phone && (React__namespace["default"].createElement("div", { className: "contact-item" },
+                    React__namespace["default"].createElement(StyledMobileIcon, null),
+                    React__namespace["default"].createElement("a", { href: `tel:${hospitalInfo.phone}` }, localizeNumberFormat.formatPhoneNumber(hospitalInfo.phone)))),
+                hospitalInfo.email && (React__namespace["default"].createElement("div", { className: "contact-item" },
+                    React__namespace["default"].createElement(StyledEmailIcon, null),
+                    React__namespace["default"].createElement("a", { href: `mailto:${hospitalInfo === null || hospitalInfo === void 0 ? void 0 : hospitalInfo.email}` }, hospitalInfo.email))))),
         hospitalInfo.working_times && (React__namespace["default"].createElement(OpeningHours, { workingTimes: hospitalInfo.working_times }))));
 }
 
-styled__default["default"](index$7.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: ${miscTheme.theme.colors.neutral500};
-    margin: 16px auto;
-    flex-shrink: 0;
-  }
-`;
-const StyledDrawerBottomContent = styled__default["default"](vaul.Drawer.Content) `
-  position: fixed;
-  z-index: ${index$5.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__default["default"](vaul.Drawer.Overlay) `
-  position: fixed;
-  inset: 0;
-  z-index: ${index$5.ZINDEX_SSO - 9e6};
-  width: 100%;
-  max-height: 100%;
-  background-color: rgb(0, 0, 0, 0.4);
-`;
-const StyledDrawerBottomHandler = styled__default["default"](vaul.Drawer.Handle) `
-  &[data-vaul-handle] {
-    width: 44px;
-    height: 3px;
-    background-color: ${miscTheme.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 = tslib_es6.__rest(_a, ["children", "onClose", "isOpen", "onOpenChange", "isMobile", "classNames", "isLinear", "overlayClassName", "contentClassName", "handlerClassName"]);
-    const { isDragging, handleDragStart, handleDragEnd } = index$7.useDrawerDrag();
-    if (isMobile) {
-        return (React__namespace["default"].createElement(vaul.Drawer.Root, Object.assign({ onDrag: handleDragStart, onRelease: handleDragEnd, open: isOpen, onOpenChange: onOpenChange }, restProps),
-            React__namespace["default"].createElement(vaul.Drawer.Portal, null,
-                React__namespace["default"].createElement(StyledDrawerBottomOverlay, { className: core.clsx(overlayClassName, 'drawer__overlay') }),
-                React__namespace["default"].createElement(StyledDrawerBottomContent, { isDragging: isDragging, className: core.clsx(contentClassName, 'drawer__content'), "data-is-linear": isLinear },
-                    React__namespace["default"].createElement(vaul.Drawer.Title, { style: { display: 'none' } }),
-                    React__namespace["default"].createElement(StyledDrawerBottomHandler, { className: core.clsx(handlerClassName, 'drawer__handle') }),
-                    children))));
-    }
-    return (React__namespace["default"].createElement(core.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__default["default"].div `
   .mantine-Input-input.custom_input {
     /* font-size: 16px; */
@@ -960,7 +879,7 @@ const StyledCollectPhoneForm = styled__default["default"].div `
     }
   }
 `;
-const StyledButton = styled__default["default"](index$8.Button) `
+const StyledButton = styled__default["default"](index$7.Button) `
   &.mantine-Button-root {
     border-radius: 12px;
     border: 1px solid;
@@ -978,8 +897,8 @@ const StyledButton = styled__default["default"](index$8.Button) `
     gap: 8px;
   }
 `;
-styled__default["default"](DrawerBottom) ``;
-const StyledPhone = styled__default["default"](index$9.Phone) `
+styled__default["default"](index$1.DrawerBottom) ``;
+const StyledPhone = styled__default["default"](index$8.Phone) `
   --custom-primary-text: #111111;
   .PhoneInputCountry {
     pointer-events: none;
@@ -1002,7 +921,7 @@ const StyledPhone = styled__default["default"](index$9.Phone) `
     }
   }
 `;
-const StyledInputWrapper = styled__default["default"](index$9.Input.Wrapper) `
+const StyledInputWrapper = styled__default["default"](index$8.Input.Wrapper) `
   --phone-input-space-x: -8px;
   .mantine-Text-root[data-size='c1'] {
     font-size: 0.75rem;
@@ -1029,7 +948,7 @@ function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLo
     const [phone, setPhone] = React.useState('');
     const [errorMessage, setErrorMessage] = React.useState('');
     const [isSubmitted, setIsSubmitted] = React.useState(false);
-    const { classes } = index$a.useTextStyles();
+    const { classes } = index$9.useTextStyles();
     const validatePhone = (value) => {
         try {
             if (!value) {
@@ -1073,17 +992,17 @@ function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLo
                 t('collectPhoneNumber.title', {
                     name: formType,
                 })),
-            React__namespace["default"].createElement(index$a.TextField, { shrink: !!phone, className: core.clsx('leadgen-form_input w-full', {
+            React__namespace["default"].createElement(index$9.TextField, { shrink: !!phone, className: core.clsx('leadgen-form_input w-full', {
                     'leadgen-form_field_error': !!(isSubmitted && errorMessage),
                 }) },
-                React__namespace["default"].createElement(index$a.TextField.Control, { htmlFor: "collection_phone_input" }, ({ shrink }) => (React__namespace["default"].createElement(StyledInputWrapper, { "data-invalid": !!(isSubmitted && errorMessage), labelElement: "div", label: React__namespace["default"].createElement(index$b.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('collectPhoneNumber.inputLabel')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
+                React__namespace["default"].createElement(index$9.TextField.Control, { htmlFor: "collection_phone_input" }, ({ shrink }) => (React__namespace["default"].createElement(StyledInputWrapper, { "data-invalid": !!(isSubmitted && errorMessage), labelElement: "div", label: React__namespace["default"].createElement(index$a.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('collectPhoneNumber.inputLabel')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
                         errorMessage && (React__namespace["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                        React__namespace["default"].createElement(index$a.ErrorIcon, { size: 12 }),
-                        React__namespace["default"].createElement(index$b.Text, { size: "c1", variant: "error" }, errorMessage))) },
+                        React__namespace["default"].createElement(index$8.ErrorIcon, { size: 12 }),
+                        React__namespace["default"].createElement(index$a.Text, { size: "c1", variant: "error" }, errorMessage))) },
                     React__namespace["default"].createElement(core.Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
                             '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2), { fontWeight: text.FontWeight.halfBold }),
                         }) },
-                        React__namespace["default"].createElement(StyledPhone, { inputId: "collection_phone_input", onChange: handleChange, className: `mantine-Input-input ${classes.p2}`, name: "phoneNumber", spellCheck: false, placeholder: " ", defaultCountry: (locale ? index$c.MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", value: phone, "data-control": "tel", countries: [DEFAULT_COUNTRY_CODE], arrowComponent: () => React__namespace["default"].createElement(React__namespace["default"].Fragment, null) }))))))),
+                        React__namespace["default"].createElement(StyledPhone, { inputId: "collection_phone_input", onChange: handleChange, className: `mantine-Input-input ${classes.p2}`, name: "phoneNumber", spellCheck: false, placeholder: " ", defaultCountry: (locale ? index$b.MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", value: phone, "data-control": "tel", countries: [DEFAULT_COUNTRY_CODE], arrowComponent: () => React__namespace["default"].createElement(React__namespace["default"].Fragment, null) }))))))),
         React__namespace["default"].createElement("div", { className: "action actionBox" },
             React__namespace["default"].createElement(StyledButton, { variant: "primary", onClick: handleSubmit, fullWidth: true, size: "lg", loading: isLoading },
                 React__namespace["default"].createElement("div", null, t('collectPhoneNumber.action')),
@@ -1147,7 +1066,7 @@ function PopupCollectPhone({ children, isMobile, onSubmit, isOpen: isOpenProp, o
     }, [isOpenProp]);
     return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
         typeof children === 'function' ? (children(modalState)) : (React__namespace["default"].createElement("div", { onClick: toggle }, children)),
-        React__namespace["default"].createElement(DrawerBottom, Object.assign({ isOpen: isOpen, onClose: handleClose, onOpenChange: handleOpenChange, isMobile: isMobile, fadeFromIndex: index$5.ZINDEX_SSO - 9e6, zIndex: index$5.ZINDEX_SSO, repositionInputs: false, isLinear: currentStep === exports.EPopupCollectPhoneStep.SUCCESS }, drawerProps),
+        React__namespace["default"].createElement(index$1.DrawerBottom, Object.assign({ isOpen: isOpen, onClose: handleClose, onOpenChange: handleOpenChange, isMobile: isMobile, fadeFromIndex: index$5.ZINDEX_SSO - 9e6, zIndex: index$5.ZINDEX_SSO, repositionInputs: false, isLinear: currentStep === exports.EPopupCollectPhoneStep.SUCCESS }, drawerProps),
             currentStep === exports.EPopupCollectPhoneStep.FORM && (React__namespace["default"].createElement(CollectPhoneForm, { onSubmit: handleSubmit, isLoading: isLoading })),
             currentStep === exports.EPopupCollectPhoneStep.SUCCESS && (React__namespace["default"].createElement(CollectPhoneSuccess, { onClose: handleClose })))));
 }
@@ -1155,10 +1074,8 @@ function PopupCollectPhone({ children, isMobile, onSubmit, isOpen: isOpenProp, o
 const StyledHospitalInfo = styled__default["default"].div `
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 12px;
-  padding: 12px 16px;
-  border: 1px solid ${miscTheme.theme.colors.neutral100};
-  border-radius: 12px;
 
   .hospitalName {
     color: #111111;
@@ -1170,18 +1087,14 @@ const StyledHospitalInfo = styled__default["default"].div `
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    padding: 4px 8px;
-    color: ${miscTheme.theme.colors.red700};
-    background-color: ${miscTheme.theme.colors.red50};
     border-radius: 8px;
 
     font-size: 0.6875rem;
     line-height: 1rem;
-    margin-right: 2px;
+    color: ${miscTheme.theme.colors.red600};
 
     &[data-is-opened='true'] {
       color: ${miscTheme.theme.colors.primaryBase};
-      background-color: ${miscTheme.theme.colors.blue50};
     }
   }
 
@@ -1189,7 +1102,7 @@ const StyledHospitalInfo = styled__default["default"].div `
     flex: 1 1 0%;
   }
 `;
-const StyledImageWrap = styled__default["default"](index$d.ImageWrap) `
+const StyledImageWrap = styled__default["default"](index$c.ImageWrap) `
   /* object-contain object-center aspect-square  */
   width: 44px;
   height: 44px;
@@ -1200,6 +1113,7 @@ const StyledImageWrap = styled__default["default"](index$d.ImageWrap) `
   border-radius: 8px;
   flex-shrink: 0;
   aspect-ratio: 1;
+  align-self: baseline;
 `;
 const StyledClockIcon = styled__default["default"](Clock) `
   width: 12px;
@@ -1211,11 +1125,19 @@ const StyledArrowRightIcon = styled__default["default"](index$1.ShapedArrowDown)
   width: 12px;
   height: 12px;
   transform: rotate(90deg);
+
+  & > path {
+    stroke-width: 1.5;
+  }
 `;
 const StyledDistanceTag = styled__default["default"](index$1.DistanceTag) `
   & > span {
     color: ${miscTheme.theme.colors.gray800};
   }
+
+  & {
+    border: none;
+  }
 `;
 
 const checkHospitalStatus = (times) => {
@@ -1243,7 +1165,7 @@ function HospitalInfo({ hospitalInfo, distance, className, }) {
         React__namespace["default"].createElement(StyledImageWrap, { src: hospitalInfo.logo, backupSrc: index$2.CommonGAssets.getAssetPath('avatar.jpg'), alt: "hospital" }),
         React__namespace["default"].createElement("div", { className: "flex-1" },
             React__namespace["default"].createElement("div", { className: "hospitalName" }, hospitalInfo.name),
-            hospitalInfo.working_times && (React__namespace["default"].createElement("div", { className: "hospitalStatus", "data-is-opened": isOpened },
+            hospitalInfo.working_times && (React__namespace["default"].createElement("div", { key: isOpened ? 'open' : 'closed', className: "hospitalStatus", "data-is-opened": isOpened },
                 React__namespace["default"].createElement(StyledClockIcon, null),
                 React__namespace["default"].createElement("span", null, t(isOpened ? 'hospital.status.opening' : 'hospital.status.closed')))),
             distance && React__namespace["default"].createElement(StyledDistanceTag, { value: `${distance} km` })),
@@ -1266,7 +1188,7 @@ const StyledInsuranceContainer = styled__default["default"].div `
     font-size: 0.9375rem;
     line-height: 1.5rem;
     color: ${miscTheme.theme.colors.gray800};
-    font-weight: 500;
+    font-weight: 600;
   }
   .txt-caption-1 {
     font-size: 0.6875rem;
@@ -1278,7 +1200,7 @@ const StyledInsuranceContainer = styled__default["default"].div `
     padding: 1rem 0;
   }
 `;
-const StyledInsuranceList = styled__default["default"](index$e.InsuranceList) `
+const StyledInsuranceList = styled__default["default"](index$d.InsuranceList) `
   gap: 8px;
   margin-top: 1rem;
   & .insuranceItem > .insuranceLogo {
@@ -1302,13 +1224,139 @@ function ProductInsuranceInfo({ hospitalInfo, }) {
             React__namespace["default"].createElement(StyledInsuranceList, { insurances: hospitalInfo.insurances, isName: false })),
         isSupportPayment && (React__namespace["default"].createElement("div", null,
             React__namespace["default"].createElement("h3", { className: "txt-body-2" }, t('common.paymentMethods')),
-            React__namespace["default"].createElement(index$e.PaymentList, { payments: hospitalInfo.accepted_payments })))));
+            React__namespace["default"].createElement(index$d.PaymentList, { payments: hospitalInfo.accepted_payments })))));
 }
 
+/* eslint-disable prettier/prettier */
+const Credential = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__namespace.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__namespace.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__namespace.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__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__namespace.createElement("g", { clipPath: "url(#clip0_2422_9990)" },
+        React__namespace.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__namespace.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__namespace.createElement("path", { d: "M6.25 6.75H12.75", stroke: "currentColor", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M6.25 10H9.25", stroke: "currentColor", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.createElement("path", { d: "M6.25 13.2505H9.25", stroke: "currentColor", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__namespace.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__namespace.createElement("defs", null,
+        React__namespace.createElement("clipPath", { id: "clip0_2422_9990" },
+            React__namespace.createElement("rect", { width: 18, height: 18, fill: "white", transform: "translate(1 1)" })))));
+
+/* eslint-disable prettier/prettier */
+const Highlight = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none" }, props),
+    React__namespace.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__namespace.createElement("path", { d: "M2.22217 17.7777L5.5555 14.4443", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
+    React__namespace.createElement("path", { d: "M1.94434 13.6112L2.49989 13.0557", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
+    React__namespace.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 = React.createContext(defaultValue);
+const DoctorExpertiseProvider = ({ children, value }) => {
+    return (React__namespace["default"].createElement(DoctorExpertiseContext.Provider, { value: value }, children));
+};
+
+const StyledCard = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: ${miscTheme.theme.colors.blue50};
+  border-radius: 12px;
+  padding: 0px 4px 4px;
+
+  .body-section {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const StyledBodySection = styled__default["default"].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__default["default"].div `
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 8px;
+`;
+const StyledPositionOfButton = styled__default["default"].div `
+  display: flex;
+  justify-content: flex-end;
+`;
+const StyledArrowRightBlue = styled__default["default"](index$d.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 } = index.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__namespace["default"].createElement(DoctorExpertiseProvider, { value: doctorInformation },
+        React__namespace["default"].createElement(StyledCard, { className: className, style: style },
+            React__namespace["default"].createElement(index$d.DoctorInfoExpertise, { name: doctorInformation.name, specialty: doctorInformation.specialty, experience: doctorInformation.experience, profileImage: doctorInformation.profileImage || defaultProfileImage }),
+            isShowBodySection && (React__namespace["default"].createElement(StyledBodySection, { className: "body-section" },
+                React__namespace["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__namespace["default"].createElement(index$d.DoctorExpertiseItem, { doctorInfo: doctorInformation.clinics, Icon: index$d.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__namespace["default"].createElement(index$d.DoctorExpertiseItem, { doctorInfo: doctorInformation.educations, Icon: Education, title: t('common.education') })),
+                    children),
+                isShowReadMoreButton && (React__namespace["default"].createElement(StyledPositionOfButton, null,
+                    React__namespace["default"].createElement(StyledReadMore, { onClick: onClickReadMore },
+                        React__namespace["default"].createElement(index$a.Text, { size: "p2", weight: "halfBold", color: miscTheme.theme.colors.primaryBase }, t('common.readMore')),
+                        React__namespace["default"].createElement(StyledArrowRightBlue, null)))))))));
+};
+DoctorExpertise.Expertise = () => {
+    const { expertise } = React.useContext(DoctorExpertiseContext);
+    const { t } = index.useTranslations();
+    if (!expertise)
+        return null;
+    return (React__namespace["default"].createElement(index$d.DoctorExpertiseItem, { doctorInfo: expertise, Icon: Credential, title: t('common.expertiseCredentials') }));
+};
+DoctorExpertise.OtherHighlights = () => {
+    const { otherHighlights } = React.useContext(DoctorExpertiseContext);
+    const { t } = index.useTranslations();
+    if (!otherHighlights)
+        return null;
+    return (React__namespace["default"].createElement(index$d.DoctorExpertiseItem, { doctorInfo: otherHighlights, Icon: Highlight, title: t('common.otherHighlights') }));
+};
+
 exports.Check = Check;
 exports.ClinicInfo = ClinicInfo;
 exports.Clock = Clock;
 exports.CollectPhoneForm = CollectPhoneForm;
+exports.DoctorExpertise = DoctorExpertise;
 exports.Ellipse = Ellipse;
 exports.HelloZalo = HelloZalo;
 exports.HospitalInfo = HospitalInfo;

package/build/{index-6455223c.js → index-c1700332.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-7d502705.js');
-var togetherComponentGlobalContext = require('./utils-6e08da38.js');
+var index = require('./index-8c0664a2.js');
+var togetherComponentGlobalContext = require('./utils-758da7f9.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
 

package/build/{index-43c3255f.js → index-ccf55c3e.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-ecb51cb3.js');
+var index = require('./index-f65a5e45.js');
 var styled = require('@emotion/styled');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-3ffee0ec.js → index-d2363e3b.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-b33ba902.js');
+var tslib_es6 = require('./tslib.es6-5348b8bf.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$1 = require('./index-feb676d3.js');
-var index = require('./index-c96f8955.js');
-var togetherComponentGlobalContext = require('./utils-6e08da38.js');
+var index$1 = require('./index-87712b71.js');
+var index = require('./index-520222d5.js');
+var togetherComponentGlobalContext = require('./utils-758da7f9.js');
 var styled = require('@emotion/styled');
 var togetherApiPaths = require('./togetherApiPaths.js');
-var constants = require('./constants-2cd1cd00.js');
+var constants = require('./constants-1cb01fbe.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }