@hhgtech/hhg-components 1.29.434-beta-20 → 1.29.435

package/build/esm/{index-5f712379.js → index-5d42aec2.js}

@@ -1,33 +1,35 @@
 import * as React from 'react';
-import React__default, { useMemo, useState, useEffect, useRef, createContext, useContext } from 'react';
-import { u as useTranslations } from './index-c8f9fe6a.js';
+import React__default, { useMemo, useState, useEffect, useRef } from 'react';
+import { u as useTranslations } from './index-c118b3d8.js';
 import { getCookie } from './miscCookieHelper.js';
-import { C as CommonGAssets } from './index-442abeeb.js';
-import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-e31ab4f2.js';
+import { C as CommonGAssets } from './index-7e11e0d5.js';
+import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-7d484272.js';
 import { theme } from './miscTheme.js';
-import { A as Avatar, I as IconWrapper, D as DistanceTag, a as DrawerBottom, S as ShapedArrowDown } from './index-fe2f834a.js';
-import { b as getTogetherUserPostsApiPath } from './index-4524d021.js';
-import { B as Button } from './index-5a57746b.js';
-import { w as workingDays } from './types-fe71f80f.js';
+import { A as Avatar, I as IconWrapper, D as DistanceTag, S as ShapedArrowDown } from './index-092b1699.js';
+import { b as getTogetherUserPostsApiPath } from './index-80dca832.js';
+import { B as Button } from './index-9316837d.js';
+import { w as workingDays } from './types-c7d99179.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-229d6eda.js';
-import { L as LOCALISED_SLUGS } from './constants-0866d60c.js';
-import { T as Text } from './index-8971c619.js';
-import { f as formatPhoneNumber } from './localizeNumberFormat-fec57533.js';
-import { a as __awaiter } from './tslib.es6-79dc13ec.js';
+import { b as basePath, Z as ZINDEX_SSO } from './index-5c71ffdd.js';
+import { L as LOCALISED_SLUGS } from './constants-a40532fa.js';
+import { T as Text } from './index-522fa528.js';
+import { f as formatPhoneNumber } from './localizeNumberFormat-80b3381d.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-cad4c87b.js';
 import { useDisclosure } from '@mantine/hooks';
-import { clsx, Flex, Box } from '@mantine/core';
-import { u as useTextStyles, T as TextField } from './index-325e97c3.js';
+import { clsx, Modal, Flex, Box } from '@mantine/core';
+import { D as DrawerComponent, u as useDrawerDrag } from './index-66867721.js';
+import { Drawer } from 'vaul';
+import { u as useTextStyles, T as TextField, E as ErrorIcon } from './index-05f7c12d.js';
 import { parsePhoneNumber } from 'react-phone-number-input';
-import { P as Phone, I as Input, E as ErrorIcon } from './index-8ea739b8.js';
-import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './text-98d87494.js';
-import { B as Button$1 } from './index-42ad6c92.js';
-import { M as MAPPED_LOCALE } from './index-e70dbbdc.js';
-import { T as Text$1 } from './index-fdb22d49.js';
-import { I as ImageWrap } from './index-be57c8cf.js';
-import { I as InsuranceList, P as PaymentList, A as ArrowRightBlue, a as DoctorInfoExpertise, D as DoctorExpertiseItem, C as Clinic } from './index-f33cdb57.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './text-a80dbecb.js';
+import { P as Phone, I as Input } from './index-eb59ab36.js';
+import { B as Button$1 } from './index-c50bc401.js';
+import { M as MAPPED_LOCALE } from './index-c9d25309.js';
+import { T as Text$1 } from './index-9e8c02dd.js';
+import { I as ImageWrap } from './index-7f77a9f8.js';
+import { I as InsuranceList, P as PaymentList } from './index-b6260c00.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),
@@ -585,7 +587,7 @@ const StyledOMap = styled.div `
     color: ${theme.colors.primaryBase};
   }
 `;
-const StyledCard$1 = styled.div `
+const StyledCard = styled.div `
     padding: 16px;
     border: 1px solid ${theme.colors.neutral200} 
     background: ${theme.colors.white}
@@ -648,10 +650,9 @@ const Map = (props) => {
     const mapCard = useRef(null);
     const { t } = useTranslations();
     const onLoad = React__default.useCallback(function callback(map) {
-        setTimeout(() => {
-            map.setZoom(14);
-            map.setCenter(center);
-        }, 100);
+        const bounds = new window.google.maps.LatLngBounds();
+        map.fitBounds(bounds);
+        setTimeout(() => map.setCenter(center), 100);
     }, []);
     const mapOptions = {
         mapTypeControl: false,
@@ -669,10 +670,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}&zoom=14` })) : (React__default.createElement(LoadScript, { googleMapsApiKey: googleMapKey || '' },
-                React__default.createElement(GoogleMap, { mapContainerClassName: 'map', center: center, zoom: 14, 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}` })) : (React__default.createElement(LoadScript, { googleMapsApiKey: googleMapKey || '' },
+                React__default.createElement(GoogleMap, { mapContainerClassName: 'map', center: center, zoom: 15, onLoad: onLoad, options: mapOptions },
                     React__default.createElement(Marker, { position: center })))),
-            !hasNoCard ? (React__default.createElement(StyledCard$1, { className: cn('map-card'), "data-is-full-width": isFullWidth || undefined, ref: mapCard },
+            !hasNoCard ? (React__default.createElement(StyledCard, { 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,
@@ -692,11 +693,6 @@ 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;
@@ -715,7 +711,7 @@ const StyledClinicInfo = styled.div `
     line-height: 1.25rem;
     font-weight: 400;
   }
-  .contact-item {
+  .telephone {
     display: inline-flex;
     align-items: center;
     padding: 8px 12px;
@@ -747,10 +743,6 @@ 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;
@@ -769,10 +761,6 @@ 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) {
@@ -783,7 +771,6 @@ 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 }),
@@ -795,14 +782,108 @@ function ClinicInfo(props) {
                         flexShrink: 0,
                     } },
                     React__default.createElement(StyledDistanceTag$1, { value: `${distance} km` })))),
-            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 })));
+            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 }))));
+}
+
+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 `
@@ -1049,8 +1130,10 @@ 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;
@@ -1062,14 +1145,18 @@ 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;
-    color: ${theme.colors.red600};
+    margin-right: 2px;
 
     &[data-is-opened='true'] {
       color: ${theme.colors.primaryBase};
+      background-color: ${theme.colors.blue50};
     }
   }
 
@@ -1088,7 +1175,6 @@ const StyledImageWrap = styled(ImageWrap) `
   border-radius: 8px;
   flex-shrink: 0;
   aspect-ratio: 1;
-  align-self: baseline;
 `;
 const StyledClockIcon = styled(Clock) `
   width: 12px;
@@ -1100,26 +1186,21 @@ 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.some((item) => {
+    return openTime === null || openTime === void 0 ? void 0 : 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();
@@ -1137,7 +1218,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", { key: isOpened ? 'open' : 'closed', className: "hospitalStatus", "data-is-opened": isOpened },
+            hospitalInfo.working_times && (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')))),
             distance && React__default.createElement(StyledDistanceTag, { value: `${distance} km` })),
@@ -1160,7 +1241,7 @@ const StyledInsuranceContainer = styled.div `
     font-size: 0.9375rem;
     line-height: 1.5rem;
     color: ${theme.colors.gray800};
-    font-weight: 600;
+    font-weight: 500;
   }
   .txt-caption-1 {
     font-size: 0.6875rem;
@@ -1199,129 +1280,4 @@ function ProductInsuranceInfo({ hospitalInfo, }) {
             React__default.createElement(PaymentList, { payments: hospitalInfo.accepted_payments })))));
 }
 
-/* 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 };
+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 };

package/build/esm/{index-696abbc2.js → index-64a23bd8.js}

@@ -1,11 +1,11 @@
 import React__default, { useRef, useEffect } from 'react';
 import { Portal } from '@mantine/core';
-import { t as toggleNoScroll } from './utils-05b20dd8.js';
+import { t as toggleNoScroll } from './utils-ef5b252f.js';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-391308cc.js';
-import { T as Text } from './index-fdb22d49.js';
+import { s as slideInUp, e as slideOutDown, b as slideInLeft, f as slideOutLeft, c as slideInRight, g as slideOutRight, a as slideInDown, d as slideOutUp } from './animation-7de6ad2a.js';
+import { T as Text } from './index-9e8c02dd.js';
 
 const DURATION = '600ms';
 const generateStyleBasedOnPlacement = (placement, open) => {

package/build/esm/{index-969c9eaf.js → index-660c931a.js}

@@ -1,12 +1,12 @@
-import { a as __awaiter } from './tslib.es6-79dc13ec.js';
+import { a as __awaiter } from './tslib.es6-cad4c87b.js';
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { H as Heading } from './index-6ff203e4.js';
-import { T as Text } from './index-fdb22d49.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-3c7c3d9f.js';
+import { H as Heading } from './index-971eb8ab.js';
+import { T as Text } from './index-9e8c02dd.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-282597b9.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-0866d60c.js';
+import { D as DEFAULT_IMG } from './constants-a40532fa.js';
 
 const StyledCardLink = styled.div `
   .link-info-container {

package/build/esm/{index-af9b5991.js → index-66867721.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-79dc13ec.js';
+import { _ as __rest } from './tslib.es6-cad4c87b.js';
 import React__default, { useState, useCallback, useMemo, useEffect } from 'react';
 import { clsx } from '@mantine/core';
 import { Drawer } from 'vaul';
 import styled from '@emotion/styled';
-import { Z as ZINDEX_SSO } from './index-229d6eda.js';
+import { Z as ZINDEX_SSO } from './index-5c71ffdd.js';
 
 const TIME_FOR_MOTION = 300;
 const useDrawerDrag = (motionDelay = TIME_FOR_MOTION) => {
@@ -84,7 +84,7 @@ const StyledDrawerComponentOverlay = styled(Drawer.Overlay) `
 `;
 
 const DrawerComponent = (props) => {
-    const { open: openProps, onOpenChange: onOpenChangeProps, snapPoints, activeSnapPoint, setActiveSnapPoint, children, overlayClassName, className, fadeFromIndex = ZINDEX_SSO - 9e6, onClose } = props, restProps = __rest(props, ["open", "onOpenChange", "snapPoints", "activeSnapPoint", "setActiveSnapPoint", "children", "overlayClassName", "className", "fadeFromIndex", "onClose"]);
+    const { open: openProps, onOpenChange: onOpenChangeProps, snapPoints, activeSnapPoint, setActiveSnapPoint, children, overlayClassName, className, fadeFromIndex = ZINDEX_SSO - 9e6 } = props, restProps = __rest(props, ["open", "onOpenChange", "snapPoints", "activeSnapPoint", "setActiveSnapPoint", "children", "overlayClassName", "className", "fadeFromIndex"]);
     const [open, setOpen] = useState(openProps);
     const [snap, setSnap] = useState(snapPoints ? snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[0] : null);
     const { isDragging, handleDragStart, handleDragEnd } = useDrawerDrag();
@@ -128,7 +128,7 @@ const DrawerComponent = (props) => {
     useEffect(() => {
         setSnap(activeSnapPoint);
     }, [activeSnapPoint]);
-    return (React__default.createElement(Drawer.Root, Object.assign({ onDrag: handleDragStart, onRelease: handleDragEnd, onClose: onClose }, restProps, mergedProps),
+    return (React__default.createElement(Drawer.Root, Object.assign({ onDrag: handleDragStart, onRelease: handleDragEnd }, restProps, mergedProps),
         React__default.createElement(Drawer.Portal, null,
             React__default.createElement(StyledDrawerComponentOverlay, { className: clsx(overlayClassName, 'drawer__overlay', {
                     drawer__overlay_full: isFullSnapPoint,

package/build/esm/{index-93bbd845.js → index-670b805c.js}

@@ -1,34 +1,34 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-79dc13ec.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-cad4c87b.js';
 import React__default, { useContext, useState, useEffect, useMemo } from 'react';
-import { B as Button } from './index-5a57746b.js';
-import { H as Heading } from './index-6ff203e4.js';
-import { u as useTranslations } from './index-c8f9fe6a.js';
+import { B as Button } from './index-9316837d.js';
+import { H as Heading } from './index-971eb8ab.js';
+import { u as useTranslations } from './index-c118b3d8.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-10d92143.js';
-import { C as CommonGAssets } from './index-442abeeb.js';
-import { R as REPORT_REASON_MAP, D as DEFAULT_IMG } from './constants-0866d60c.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-78637af8.js';
+import { C as CommonGAssets } from './index-7e11e0d5.js';
+import { R as REPORT_REASON_MAP, D as DEFAULT_IMG } from './constants-a40532fa.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-3c7c3d9f.js';
-import { b as TreePopoverMenu, C as CardReactions, c as CardReactionType, a as LabelPin, T as TagTopic } from './treePopoverMenu-6fa7212f.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-282597b9.js';
+import { b as TreePopoverMenu, C as CardReactions, c as CardReactionType, a as LabelPin, T as TagTopic } from './treePopoverMenu-4381980e.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-05b20dd8.js';
+import { M as MediaQueries } from './utils-ef5b252f.js';
 import { theme } from './miscTheme.js';
-import { g as formatArticle, h as formatCategory, e as formatComment } from './dataTransform-89204d02.js';
+import { g as formatArticle, h as formatCategory, e as formatComment } from './dataTransform-b34a4eb5.js';
 import { DISCOVER_PATHS, CARE_PATHS, PATHS } from './togetherApiPaths.js';
-import { C as CardLink } from './index-969c9eaf.js';
-import { C as CardAuthor, c as ProfileDetailModal } from './index-de76bf16.js';
-import { a as ProfileDetail, P as PostContent } from './index-8efc7ffa.js';
-import { a as PostImagePreview } from './index-262056c9.js';
-import { S as SocialLinkPreview } from './index-767246b9.js';
-import { D as Divider } from './index-1ac9a27a.js';
-import './index-229d6eda.js';
+import { C as CardLink } from './index-660c931a.js';
+import { C as CardAuthor, c as ProfileDetailModal } from './index-e91f34af.js';
+import { a as ProfileDetail, P as PostContent } from './index-feea2aba.js';
+import { a as PostImagePreview } from './index-d4d1258a.js';
+import { S as SocialLinkPreview } from './index-0291c973.js';
+import { D as Divider } from './index-82b9d674.js';
+import './index-5c71ffdd.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-f92c4583.js';
-import { T as Text } from './index-fdb22d49.js';
-import { L as Loading } from './index-019a730d.js';
-import { g as getCurrentBaseUrl } from './normalizeLink-e31ab4f2.js';
+import { I as Input } from './index-5ccb32d4.js';
+import { T as Text } from './index-9e8c02dd.js';
+import { L as Loading } from './index-fe927d80.js';
+import { g as getCurrentBaseUrl } from './normalizeLink-7d484272.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-df2eb750.js → index-6c2f46d4.js}

@@ -1,4 +1,4 @@
-import { L as LOCALE } from './Locale-d554bd2b.js';
+import { L as LOCALE } from './Locale-04ca1b16.js';
 
 var Gender;
 (function (Gender) {

package/build/esm/{index-cab4e133.js → index-6f0cf5fe.js}

@@ -1,12 +1,12 @@
-import { _ as __rest } from './tslib.es6-79dc13ec.js';
+import { _ as __rest } from './tslib.es6-cad4c87b.js';
 import React__default from 'react';
 import { useMantineTheme, Image } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
-import { I as ISO_FORMAT } from './index-229d6eda.js';
-import './index-df2eb750.js';
-import { C as CommonGAssets } from './index-442abeeb.js';
-import { M as MAPPED_LOCALE } from './index-e70dbbdc.js';
-import { L as LOCALE } from './Locale-d554bd2b.js';
+import { I as ISO_FORMAT } from './index-5c71ffdd.js';
+import './index-6c2f46d4.js';
+import { C as CommonGAssets } from './index-7e11e0d5.js';
+import { M as MAPPED_LOCALE } from './index-c9d25309.js';
+import { L as LOCALE } from './Locale-04ca1b16.js';
 
 // Omit<MantineDatePickerInputProps, 'value'>
 const DatePicker = (_a) => {