@hhgtech/hhg-components 1.29.429 → 1.29.431-beta-1

package/build/esm/i18n-values/th-TH.js

@@ -90,7 +90,7 @@ var thTranslations = {
 	"babyVaccine.immunization.warning": "ค่าสถิติการสร้างภูมิคุ้มกันนั้นอ่านง่ายและเป็นมิตรกับผู้ปกครอง เนื่องจากมีความคล้ายคลึงกับไทม์ไลน์การฉีดวัคซีนของทารก",
 	"babyVaccine.popup.button": "Create a new profile",
 	"babyVaccine.popup.button.submit": "บันทึก",
-	"babyVaccine.popup.checkbox.suggestedDate": "Pick a injected date or keep the suggested below.",
+	"babyVaccine.popup.checkbox.suggestedDate": "เลือกวันที่ฉีดวัคซีน หรือใช้วันที่แนะนำด้านล่าง",
 	"babyVaccine.popup.confirm.close": "Change Date",
 	"babyVaccine.popup.confirm.description": "Your baby has injected this vaccine on {date}",
 	"babyVaccine.popup.confirm.ok": "Confirm",
@@ -100,11 +100,11 @@ var thTranslations = {
 	"babyVaccine.popup.tab.benefits": "ประโยชน์",
 	"babyVaccine.popup.tab.contraindication": "ข้อห้าม",
 	"babyVaccine.popup.tab.detail": "รายละเอยีด",
-	"babyVaccine.popup.tab.schedule": "Tracking",
+	"babyVaccine.popup.tab.schedule": "ติดตามผลการฉีดวัคซีน",
 	"babyVaccine.popup.title": "ข้อมูลวัคซีน",
-	"babyVaccine.status.all": "All",
+	"babyVaccine.status.all": "ทั้งหมด",
 	"babyVaccine.status.missed": "ผิดพลาด",
-	"babyVaccine.status.next": "Next",
+	"babyVaccine.status.next": "ถัดไป",
 	"babyVaccine.status.upcoming": "กำลังจะมาถึง",
 	"babyVaccine.status.vaccinated": "รับวัคซีนเรียบร้อยแล้ว",
 	"babyVaccine.timeline.antigen": "Antigen:",
@@ -300,7 +300,11 @@ var thTranslations = {
 	"createPost.urlText": "ข้อความ",
 	"createPost.video": "วิดีโอ",
 	"createPost.videoOrLink": "วิดีโอหรือลิงก์",
+	"detail.hpvScreenerButton": "Get My Results",
+	"detail.hpvScreenerSubtitle": "Take a quick check to see if you need the vaccine.",
+	"detail.hpvScreenerTitle": "Are you at risk for HPV?",
 	"detail.openHours": "Opening Hours",
+	"detail.screened": "Screened",
 	"doctorInfoComponent.loginToCall": "Log In To Call",
 	"dueDatePage.IUI": "การผสมเทียม (IUI)",
 	"dueDatePage.calculationMethod": "วิธีการคำนวณ",

package/build/esm/i18n-values/tl-PH.js

@@ -249,11 +249,6 @@ var tlTranslations = {
 	"common.paymentMethods": "Payment Methods",
 	"common.playing": "Playing ...",
 	"common.profileNavigator.newsletterSubscription": "Newsletter Subscription",
-	"common.rating.bad": "Bad!",
-	"common.rating.excellent": "Excellent!",
-	"common.rating.good": "Good!",
-	"common.rating.meh": "Meh!",
-	"common.rating.worse": "Worse!",
 	"common.sponsoredBy": "Ini-sponsor ng",
 	"common.totalView": "{number} na pagtingin",
 	"community.choose": "Choose a community",
@@ -399,9 +394,6 @@ var tlTranslations = {
 	"hospital.content.description": "Hospital Details",
 	"hospital.status.closed": "Closed",
 	"hospital.status.opening": "Opening",
-	"inlineFreebie.freeSample.title": "Free Sample",
-	"inlineFreebie.luckyDrawGift.title": "Lucky-draw Gift",
-	"inlineFreebie.value": "Value",
 	"inputComment.replyTo": "Reply to {name}",
 	insert: insert,
 	"label.latestPost": "Latest Post",

package/build/esm/i18n-values/vi-VN.js

@@ -300,7 +300,11 @@ var viTranslations = {
 	"createPost.urlText": "Nội dung",
 	"createPost.video": "Video",
 	"createPost.videoOrLink": "Video hoặc liên kết",
+	"detail.hpvScreenerButton": "Xem kết quả của tôi",
+	"detail.hpvScreenerSubtitle": "Hãy thực hiện bài kiểm tra nhanh để biết bạn có cần tiêm vắc-xin hay không.",
+	"detail.hpvScreenerTitle": "Bạn có đang nằm trong nhóm nguy cơ nhiễm HPV?",
 	"detail.openHours": "Giờ Làm Việc",
+	"detail.screened": "Đã được sàng lọc",
 	"doctorInfoComponent.loginToCall": "Đăng nhập để gọi",
 	"dueDatePage.IUI": "Thụ tinh nhân tạo (IUI)",
 	"dueDatePage.calculationMethod": "Phương pháp tính toán",

package/build/esm/i18n-values/vi-VN_MB.js

@@ -300,7 +300,11 @@ var mbTranslations = {
 	"createPost.urlText": "Nội dung",
 	"createPost.video": "Video",
 	"createPost.videoOrLink": "Video hoặc liên kết",
+	"detail.hpvScreenerButton": "Xem kết quả của tôi",
+	"detail.hpvScreenerSubtitle": "Hãy thực hiện bài kiểm tra nhanh để biết bạn có cần tiêm vắc-xin hay không.",
+	"detail.hpvScreenerTitle": "Bạn có đang nằm trong nhóm nguy cơ nhiễm HPV?",
 	"detail.openHours": "Giờ Làm Việc",
+	"detail.screened": "Đã được sàng lọc",
 	"doctorInfoComponent.loginToCall": "Đăng nhập để gọi",
 	"dueDatePage.IUI": "Thụ tinh nhân tạo (IUI)",
 	"dueDatePage.calculationMethod": "Phương pháp tính toán",

package/build/esm/i18n-values/zh-SG.js

@@ -300,7 +300,11 @@ var zhSGTranslations = {
 	"createPost.urlText": "语言内容",
 	"createPost.video": "影片",
 	"createPost.videoOrLink": "影片或链接",
+	"detail.hpvScreenerButton": "Get My Results",
+	"detail.hpvScreenerSubtitle": "Take a quick check to see if you need the vaccine.",
+	"detail.hpvScreenerTitle": "Are you at risk for HPV?",
 	"detail.openHours": "Opening Hours",
+	"detail.screened": "Screened",
 	"doctorInfoComponent.loginToCall": "Log In To Call",
 	"dueDatePage.IUI": "人工授精（IUI）",
 	"dueDatePage.calculationMethod": "计算方式",

package/build/esm/i18n-values/zh-TW.js

@@ -300,7 +300,11 @@ var zhTranslations = {
 	"createPost.urlText": "Text",
 	"createPost.video": "社群與主題",
 	"createPost.videoOrLink": "向我們的專家諮詢",
+	"detail.hpvScreenerButton": "Get My Results",
+	"detail.hpvScreenerSubtitle": "Take a quick check to see if you need the vaccine.",
+	"detail.hpvScreenerTitle": "Are you at risk for HPV?",
 	"detail.openHours": "Opening Hours",
+	"detail.screened": "Screened",
 	"doctorInfoComponent.loginToCall": "Log In To Call",
 	"dueDatePage.IUI": "人工授精（IUI）",
 	"dueDatePage.calculationMethod": "計算方法",

package/build/esm/i18n.js

@@ -1,5 +1,5 @@
-export { T as TranslationsContext } from './translationsContext-9a23580d.js';
-export { T as TranslationsProvider, t as translationsMap } from './translationsProvider-349d8427.js';
+export { T as TranslationsContext } from './translationsContext-32518edc.js';
+export { T as TranslationsProvider, t as translationsMap } from './translationsProvider-e4abf8b5.js';
 import 'react';
 import './i18n-values/en-PH.js';
 import './i18n-values/hi-IN.js';

package/build/esm/i18nV2.js

@@ -1,5 +1,5 @@
-import { T as TranslationsContext } from './translationsContext-9a23580d.js';
-export { T as TranslationsContext } from './translationsContext-9a23580d.js';
+import { T as TranslationsContext } from './translationsContext-32518edc.js';
+export { T as TranslationsContext } from './translationsContext-32518edc.js';
 import React__default, { useMemo } from 'react';
 
 const TranslationsProvider = ({ locale = 'en-PH', values, children, }) => {

package/build/esm/icons/ArrowRightBlue.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+declare const ArrowRightBlue: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default ArrowRightBlue;

package/build/esm/icons/Email.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+declare const Email: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default Email;

package/build/esm/icons/HPV.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+declare const HPV: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default HPV;

package/build/esm/icons/StarUpgrade.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+declare const StarUpgrade: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default StarUpgrade;

package/build/esm/icons/index.d.ts

@@ -6,25 +6,23 @@ import ChevronDown from "./ChevronDown";
 import ChevronLeft from "./ChevronLeft";
 import ChevronRight from "./ChevronRight";
 import ChevronUp from "./ChevronUp";
-import Circle from "./Circle";
 import Clock from "./Clock";
 import Close from "./Close";
 import CurrentLocation from "./CurrentLocation";
-import Ellipse from "./Ellipse";
 import EmailCheck from "./EmailCheck";
 import EmailFail from "./EmailFail";
 import Facebook from "./Facebook";
 import Google from "./Google";
 import HelloZalo from "./HelloZalo";
 import InVisible from "./InVisible";
+import Search from "./Search";
+import Search2 from "./Search2";
+import Visible from "./Visible";
+import Circle from "./Circle";
+import Ellipse from "./Ellipse";
 import Mobile from "./Mobile";
 import PhoneInactive from "./PhoneInactive";
 import Pin2 from "./Pin2";
-import Search from "./Search";
-import Search2 from "./Search2";
 import ShapedArrowDown from "./ShapedArrowDown";
 import Spinning from "./Spinning";
-import StarFull from "./StarFull";
-import StarHalf from "./StarHalf";
-import Visible from "./Visible";
-export { CaretDown, ChatbotBg, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock, Close, CurrentLocation, EmailCheck, EmailFail, Facebook, Google, HelloZalo, InVisible, Search, Search2, StarFull, StarHalf, Visible, Circle, Ellipse, Mobile, PhoneInactive, Pin2, ShapedArrowDown, Spinning, };
+export { CaretDown, ChatbotBg, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock, Close, CurrentLocation, EmailCheck, EmailFail, Facebook, Google, HelloZalo, InVisible, Search, Search2, Visible, Circle, Ellipse, Mobile, PhoneInactive, Pin2, ShapedArrowDown, Spinning, };

package/build/esm/{index-c087a620.js → index-02acf4f9.js}

@@ -1,17 +1,18 @@
 import React__default, { useState, useRef, createContext, useEffect, Fragment } from 'react';
-import { T as Text } from './index-8e947475.js';
+import { T as Text } from './index-cbc77b21.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-b97786aa.js';
+import { M as MediaQueries } from './utils-4f0cd383.js';
 import { Collapse } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { S as ShapedArrowDown } from './index-5d944e03.js';
-import { R as Radio$1 } from './index-97b839cf.js';
-import { _ as __rest } from './tslib.es6-b66cc7c7.js';
-import { T as Text$1 } from './index-93d7cef2.js';
+import { S as ShapedArrowDown } from './index-7df250b1.js';
+import { R as Radio$1 } from './index-b868abd9.js';
+import { _ as __rest } from './tslib.es6-ec31c219.js';
+import { T as Text$1 } from './index-c0e1cdc9.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import flattenChildren from 'react-keyed-flatten-children';
-import { H as Heading } from './index-73d4bf68.js';
+import { H as Heading } from './index-77a2202e.js';
+import { Carousel } from '@mantine/carousel';
 
 var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
 
@@ -228,14 +229,19 @@ const StyledBox = styled.div `
   align-items: center;
 `;
 
-function CardCollapse({ children, title, icon, defaultOpened = true, id, }) {
+function CardCollapse({ children, title, icon, defaultOpened = true, haveCollapse = true, id, }) {
     const [opened, { toggle }] = useDisclosure(defaultOpened);
+    const handleClick = () => {
+        if (haveCollapse) {
+            toggle();
+        }
+    };
     return (React__default.createElement(StyledCardCollapse, { id: id },
-        React__default.createElement(StyledBox, { onClick: toggle },
-            icon,
+        React__default.createElement(StyledBox, { onClick: handleClick },
+            haveCollapse && icon,
             React__default.createElement("div", { className: "title" }, title),
-            React__default.createElement(StyledArrowDownIcon, { "data-is-collapsed": opened })),
-        React__default.createElement(Collapse, { in: opened, transitionDuration: 200, transitionTimingFunction: "ease" }, children)));
+            haveCollapse && React__default.createElement(StyledArrowDownIcon, { "data-is-collapsed": opened })),
+        React__default.createElement(Collapse, { in: haveCollapse ? opened : true, transitionDuration: 200, transitionTimingFunction: "ease" }, children)));
 }
 
 const StyledDropdown = styled.div `
@@ -776,14 +782,22 @@ const IconHeading = ({ icon, title, className, style }) => {
 const sanitizeHtml = (data) => {
     if (!data)
         return '';
-    const convertNewlinesToHtmlBreaks = data
-        .replace(/\n$/, '')
-        .replace(/\n/g, '<br />');
-    return convertNewlinesToHtmlBreaks;
+    return data.replace(/\n$/, '').replace(/\n/g, '<br />');
 };
 const HtmlContent = ({ htmlContent, className }) => {
     const htmlClean = sanitizeHtml(htmlContent);
     return (React__default.createElement("div", { className: className, dangerouslySetInnerHTML: { __html: htmlClean } }));
 };
 
-export { Alert as A, Badge as B, CardCollapse as C, FileDropdown as F, Grid as G, HtmlContent as H, IconHeading as I, Radio as R, StepRenderer as S, Tag as T, BorderHeading as a, RateStars as b, Toggle as c, StepRendererContext as d };
+const StyledCarousel = styled(Carousel) `
+  & .mantine-Carousel-control {
+    width: auto;
+  }
+`;
+
+const DragFreeCarousel = (_a) => {
+    var { children, gapItem = 8, slideSize = 'auto', withControls = false, withIndicators = false, dragFree = true, align = 'start' } = _a, otherProps = __rest(_a, ["children", "gapItem", "slideSize", "withControls", "withIndicators", "dragFree", "align"]);
+    return (React__default.createElement(StyledCarousel, Object.assign({ slideSize: slideSize, slideGap: gapItem, withControls: withControls, withIndicators: withIndicators, dragFree: dragFree, align: align, containScroll: "trimSnaps" }, otherProps), React__default.Children.map(children, (child, index) => (React__default.createElement(Carousel.Slide, { key: index }, child)))));
+};
+
+export { Alert as A, Badge as B, CardCollapse as C, DragFreeCarousel as D, FileDropdown as F, Grid as G, HtmlContent as H, IconHeading as I, Radio as R, StepRenderer as S, Tag as T, BorderHeading as a, RateStars as b, Toggle as c, StepRendererContext as d };

package/build/esm/{index-a0603676.js → index-070e49bf.js}

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import React__default, { useState, useMemo, useEffect, Fragment } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-b97786aa.js';
+import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-4f0cd383.js';
 import { theme } from './miscTheme.js';
-import { _ as __rest } from './tslib.es6-b66cc7c7.js';
-import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-2be0ce94.js';
-import { I as Input } from './index-97b839cf.js';
+import { _ as __rest } from './tslib.es6-ec31c219.js';
+import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-e3b96af3.js';
+import { I as Input } from './index-b868abd9.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-3da0e5c4.js';
-import './index-887de622.js';
-import './index-bbbd83e5.js';
-import './index-0d821f2d.js';
-import './index-8e947475.js';
-import './index-e2a568ff.js';
-import './index.styles-ec097679.js';
-import './translationsContext-9a23580d.js';
+import './index-f3b4ace4.js';
+import './index-c40c6b9c.js';
+import './index-727cbdb5.js';
+import './index-364faf68.js';
+import './index-cbc77b21.js';
+import './index-c3512644.js';
+import './index.styles-352abedc.js';
+import './translationsContext-32518edc.js';
 import '@mantine/hooks';
-import './text-fb20ee8a.js';
-import './index-9d8682e0.js';
+import './text-39e5fc32.js';
+import './index-db633615.js';
 
 /* eslint-disable prettier/prettier */
 const Search2 = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 25", fill: "none" }, props),

package/build/esm/{index-aaa8f9c1.js → index-0c247d01.js}

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

package/build/esm/{index-ac30ca44.js → index-0d649f7e.js}

@@ -1,6 +1,6 @@
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
-import { B as Button } from './index-aa8dbb6f.js';
-import { T as TogetherComponentGlobalContext } from './utils-fe2d7d46.js';
+import { B as Button } from './index-a6de8892.js';
+import { T as TogetherComponentGlobalContext } from './utils-45c77185.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-562960ad.js → index-0eed7817.js}

@@ -1,35 +1,34 @@
 import * as React from 'react';
 import React__default, { useMemo, useState, useEffect, useRef } from 'react';
-import { u as useTranslations } from './index-aaa8f9c1.js';
+import { u as useTranslations } from './index-0c247d01.js';
 import { getCookie } from './miscCookieHelper.js';
-import { C as CommonGAssets } from './index-bbbd83e5.js';
-import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-2641055f.js';
+import { C as CommonGAssets } from './index-727cbdb5.js';
+import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-a42c6388.js';
 import { theme } from './miscTheme.js';
-import { A as Avatar, I as IconWrapper, D as DistanceTag, S as ShapedArrowDown } from './index-5d944e03.js';
-import { b as getTogetherUserPostsApiPath } from './index-c3ee376e.js';
-import { B as Button } from './index-aa8dbb6f.js';
-import { w as workingDays } from './types-fca702eb.js';
+import { A as Avatar, I as IconWrapper, D as DistanceTag, S as ShapedArrowDown } from './index-7df250b1.js';
+import { b as getTogetherUserPostsApiPath } from './index-be004701.js';
+import { B as Button } from './index-a6de8892.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-3da0e5c4.js';
-import { L as LOCALISED_SLUGS } from './constants-786742dd.js';
-import { T as Text } from './index-93d7cef2.js';
-import { f as formatPhoneNumber } from './localizeNumberFormat-2d35ee62.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-b66cc7c7.js';
+import { b as basePath, Z as ZINDEX_SSO } from './index-f3b4ace4.js';
+import { L as LOCALISED_SLUGS } from './constants-0086d1b7.js';
+import { T as Text } from './index-c0e1cdc9.js';
+import { f as formatPhoneNumber } from './localizeNumberFormat-45ffa783.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-ec31c219.js';
 import { useDisclosure } from '@mantine/hooks';
 import { clsx, Modal, Flex, Box } from '@mantine/core';
-import { D as DrawerComponent, u as useDrawerDrag } from './index-26b0cb59.js';
+import { D as DrawerComponent, u as useDrawerDrag } from './index-f7e0bb95.js';
 import { Drawer } from 'vaul';
-import { u as useTextStyles, T as TextField, E as ErrorIcon } from './index-913cd40f.js';
+import { u as useTextStyles, T as TextField, E as ErrorIcon } from './index-5d88d5a9.js';
 import { parsePhoneNumber } from 'react-phone-number-input';
-import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './text-fb20ee8a.js';
-import { P as Phone, I as Input } from './index-97b839cf.js';
-import { B as Button$1 } from './index-e2a568ff.js';
-import { M as MAPPED_LOCALE } from './index-0d821f2d.js';
-import { T as Text$1 } from './index-8e947475.js';
-import { I as ImageWrap } from './index-e52c8890.js';
-import { I as InsuranceList, P as PaymentList } from './index-ec66991e.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './text-39e5fc32.js';
+import { P as Phone, I as Input } from './index-b868abd9.js';
+import { B as Button$1 } from './index-c3512644.js';
+import { M as MAPPED_LOCALE } from './index-364faf68.js';
+import { T as Text$1 } from './index-cbc77b21.js';
+import { I as ImageWrap } from './index-455415d9.js';
+import { I as InsuranceList, P as PaymentList } from './index-e6d1b77b.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),
@@ -41,10 +40,6 @@ const Clock = (props) => (React.createElement("svg", Object.assign({ width: "1em
     React.createElement("path", { d: "M6 11.25C8.8995 11.25 11.25 8.8995 11.25 6C11.25 3.10051 8.8995 0.75 6 0.75C3.10051 0.75 0.75 3.10051 0.75 6C0.75 8.8995 3.10051 11.25 6 11.25Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
     React.createElement("path", { d: "M6 3.25V6L8 7.75", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
 
-/* eslint-disable prettier/prettier */
-const Ellipse = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 4 4", fill: "none" }, props),
-    React.createElement("circle", { cx: 2, cy: 2, r: 2, fill: "#BFBFBF" })));
-
 /* eslint-disable prettier/prettier */
 const HelloZalo = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 85 49", fill: "none" }, props),
     React.createElement("g", { clipPath: "url(#clip0_4296_167461)" },
@@ -95,6 +90,10 @@ const HelloZalo = (props) => (React.createElement("svg", Object.assign({ width:
         React.createElement("clipPath", { id: "clip0_4296_167461" },
             React.createElement("rect", { x: 0.446777, y: 6.57019, width: 42, height: 42, rx: 10.5, transform: "rotate(-9 0.446777 6.57019)", fill: "white" })))));
 
+/* eslint-disable prettier/prettier */
+const Ellipse = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 4 4", fill: "none" }, props),
+    React.createElement("circle", { cx: 2, cy: 2, r: 2, fill: "#BFBFBF" })));
+
 /* eslint-disable prettier/prettier */
 const Mobile = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 17 16", fill: "none" }, props),
     React.createElement("path", { d: "M11.3889 1.55566H5.61115C4.62931 1.55566 3.83337 2.3516 3.83337 3.33344V12.6668C3.83337 13.6486 4.62931 14.4446 5.61115 14.4446H11.3889C12.3708 14.4446 13.1667 13.6486 13.1667 12.6668V3.33344C13.1667 2.3516 12.3708 1.55566 11.3889 1.55566Z", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -470,12 +469,13 @@ const StyledFormatDataBox = styled.div `
   }
 `;
 
+const workingDays$1 = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
 function OpeningHours({ workingTimes }) {
     const { t } = useTranslations();
     const formatData = useMemo(() => {
         const result = [];
         let currentKey = '';
-        workingDays.forEach((item) => {
+        workingDays$1.forEach((item) => {
             const dayData = workingTimes[item];
             if (dayData) {
                 const dayKey = dayData
@@ -641,18 +641,21 @@ const PhoneButton = styled(Button) `
   width: max-content;
 `;
 
-const Map = (props) => {
-    const { className, hospital, hasNoCard, isFullWidth, height = 256, width = 768, isUsingEmbedMap = true, isCardFloating = false, distance, isLoggedIn, locale, googleMapKey, onPhoneHospital, dataEventCategory, dataEventAction, dataEventLabel, } = props;
+const Map = ({ className, hospital, hasNoCard, isFullWidth, height = 256, width = 768, isUsingEmbedMap = true, isCardFloating = false, distance, isLoggedIn, locale, googleMapKey, onPhoneHospital, dataEventCategory, dataEventAction, dataEventLabel, }) => {
     const { latitude, longitude, address, name: hospitalName } = hospital;
     const lat = parseFloat(latitude);
     const lng = parseFloat(longitude);
-    const center = { lng, lat };
+    const center = {
+        lng: lng,
+        lat: lat,
+    };
     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,8 +673,8 @@ 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 },
                 React__default.createElement(StyledHospitalTitle, { href: `${basePath}${getHospitalUrl(locale, hospital)}` },
@@ -690,9 +693,32 @@ const Map = (props) => {
                             " km")))),
                 hospital.phone && (React__default.createElement(PhoneButton, { size: "md", color: "tertiary", isBlock: false, onClick: onPhoneHospital, icon: React__default.createElement(PhoneInactive, null), dataEventCategory: dataEventCategory, dataEventAction: dataEventAction, dataEventLabel: dataEventLabel }, isLoggedIn || locale === 'ms-MY'
                     ? hospital.phone
-                    : t('doctorInfoComponent.loginToCall'))))) : null)));
+                    : t('doctorInfoComponent.loginToCall'))))) : null
+        // <a
+        //   href={`https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`}
+        //   target="_blank"
+        //   rel="noreferrer"
+        //   role="button"
+        //   tabIndex={0}
+        //   aria-label="Navigate to Google Maps to view full directions to your desination"
+        //   className={styles.directionsNo}
+        //   data-event-category="Care"
+        //   data-event-action="Get Direction Click"
+        //   data-event-label={`https://${domainLocales[locale]}${basePath}${asPath}`}
+        // >
+        //   {f({
+        //     id: 'map.viewDirections',
+        //     defaultMessage: 'View directions',
+        //   })}
+        // </a>
+        )));
 };
 
+/* 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 +737,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 +769,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,16 +791,20 @@ 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) {
-    const { hospitalInfo, distance, isLoggedIn, locale, googleMapKey, onPhoneHospital, dataEventCategory, dataEventAction, dataEventLabel, } = props;
+function ClinicInfo({ hospitalInfo, distance, isLoggedIn, locale, googleMapKey, onPhoneHospital, dataEventCategory, dataEventAction, dataEventLabel, }) {
     const hospital = {
         latitude: hospitalInfo.latitude || '',
         longitude: hospitalInfo.longitude || '',
         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,9 +816,13 @@ 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))))),
         React__default.createElement(OpeningHours, { workingTimes: hospitalInfo.working_times })));
 }
 
@@ -1130,10 +1168,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 +1181,13 @@ 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;
 
     &[data-is-opened='true'] {
       color: ${theme.colors.primaryBase};
-      background-color: ${theme.colors.blue50};
     }
   }
 
@@ -1175,6 +1206,7 @@ const StyledImageWrap = styled(ImageWrap) `
   border-radius: 8px;
   flex-shrink: 0;
   aspect-ratio: 1;
+  align-self: baseline;
 `;
 const StyledClockIcon = styled(Clock) `
   width: 12px;
@@ -1186,13 +1218,22 @@ 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 workingDays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
 const checkHospitalStatus = (times) => {
     const currentDate = new Date();
     const currentShortDay = workingDays[currentDate.getDay()];

package/build/esm/{index-f452c0f8.js → index-1097e0dc.js}

@@ -1,12 +1,12 @@
-import { a as __awaiter } from './tslib.es6-b66cc7c7.js';
+import { a as __awaiter } from './tslib.es6-ec31c219.js';
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { H as Heading } from './index-73d4bf68.js';
-import { T as Text } from './index-8e947475.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-fe2d7d46.js';
+import { H as Heading } from './index-77a2202e.js';
+import { T as Text } from './index-cbc77b21.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-45c77185.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-786742dd.js';
+import { D as DEFAULT_IMG } from './constants-0086d1b7.js';
 
 const StyledCardLink = styled.div `
   .link-info-container {