@hhgtech/hhg-components 1.29.521 → 1.29.523-beta-1

package/build/esm/{index-ca0bad86.js → index-9224ec24.js}

@@ -1,34 +1,37 @@
 import * as React from 'react';
 import React__default, { useMemo, useState, useEffect, useRef, createContext, useContext } from 'react';
-import { u as useTranslations } from './index-04d422be.js';
+import { u as useTranslations } from './index-a1ae2db3.js';
 import { getCookie } from './miscCookieHelper.js';
-import { C as CommonGAssets } from './index-f05a642d.js';
-import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-c0ed1917.js';
+import { C as CommonGAssets } from './index-fa62b67b.js';
+import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-dc6b2894.js';
 import { theme } from './miscTheme.js';
-import { A as Avatar, I as IconWrapper, D as DistanceTag, a as DrawerBottom, S as ShapedArrowDown } from './index-aea1a57b.js';
-import { g as getTogetherUserPostsApiPath } from './utils-ff4d80b7.js';
-import { B as Button } from './index-d55b2554.js';
-import { w as workingDays } from './types-f32b2f06.js';
+import { A as Avatar, I as IconWrapper, D as DistanceTag, a as DrawerBottom, S as ShapedArrowDown } from './index-587eefa7.js';
+import { g as getTogetherUserPostsApiPath } from './utils-d5f4db33.js';
+import { B as Button } from './index-a7408f08.js';
+import { w as workingDays } from './types-6cf7a13f.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-d14a4831.js';
+import { M as MediaQueries } from './utils-34fafd19.js';
 import { rem, clsx, Flex, Box } from '@mantine/core';
 import { LoadScript, GoogleMap, Marker } from '@react-google-maps/api';
 import classNames from 'classnames';
-import { b as basePath, Z as ZINDEX_SSO } from './index-1b1dfe6d.js';
-import { L as LOCALISED_SLUGS } from './constants-ed00cb10.js';
-import { T as Text } from './index-40ebbfa8.js';
-import { f as formatPhoneNumber } from './localizeNumberFormat-209b585d.js';
-import { a as __awaiter } from './tslib.es6-4d86d0e7.js';
+import { b as basePath, Z as ZINDEX_SSO } from './index-96163410.js';
+import { L as LOCALISED_SLUGS } from './constants-7dd5dcb2.js';
+import { T as Text } from './index-5cac955b.js';
+import { f as formatPhoneNumber } from './localizeNumberFormat-3975a545.js';
+import { a as __awaiter } from './tslib.es6-71094066.js';
 import { useDisclosure } from '@mantine/hooks';
-import { u as useTextStyles, T as TextField } from './index-fbb99b79.js';
+import { u as useTextStyles, T as TextField } from './index-447a6b00.js';
 import { parsePhoneNumber } from 'react-phone-number-input';
-import { P as Phone, I as Input, E as ErrorIcon } from './index-55f5e1ad.js';
-import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './index-da56e05f.js';
-import { B as Button$1 } from './index-1fd9b1a2.js';
-import { M as MAPPED_LOCALE } from './index-317ce468.js';
-import { T as Text$1 } from './index-a4fbae0b.js';
-import { I as ImageWrap } from './index-d093633f.js';
-import { I as InsuranceList, P as PaymentList, A as ArrowRightBlue, a as DoctorInfoExpertise, D as DoctorExpertiseItem, C as Clinic } from './index-f15f0af3.js';
+import { P as Phone, I as Input, E as ErrorIcon } from './index-69a2df43.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './index-6a7e9930.js';
+import { B as Button$1 } from './index-686ced51.js';
+import { M as MAPPED_LOCALE } from './index-b6bafb7e.js';
+import { T as Text$1 } from './index-83b02b8f.js';
+import { G as GenderOptionControl } from './index-7d25c755.js';
+import { C as Close } from './Close-183e809b.js';
+import { M as MAPPED_LOCALE$1 } from './utils-a0ac0fd5.js';
+import { I as ImageWrap } from './index-0bd5fda7.js';
+import { I as InsuranceList, P as PaymentList, A as ArrowRightBlue, a as DoctorInfoExpertise, D as DoctorExpertiseItem, C as Clinic } from './index-6a866413.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),
@@ -40,21 +43,25 @@ 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 Comment = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 40 40", fill: "none" }, props),
+    React.createElement("path", { d: "M20.0002 3.33203C29.1902 3.33203 36.6671 10.0621 36.6672 18.332C36.6672 18.8686 36.6342 19.4005 36.5725 19.9238C35.5792 29.1272 26.1203 35.6308 24.2336 36.8408L23.3333 37.417C21.8711 38.2196 21.7181 37.0263 21.6799 36.7295C21.6746 36.6884 21.6713 36.665 21.6672 36.666V33.2539C11.7339 34.1789 3.33325 27.097 3.33325 18.332C3.3334 10.0622 10.8104 3.33209 20.0002 3.33203ZM13.3333 16.666C12.4131 16.6663 11.6674 17.4118 11.6672 18.332C11.6672 19.2524 12.413 19.9988 13.3333 19.999C14.2537 19.999 15.0002 19.2525 15.0002 18.332C15.0001 17.4117 14.2536 16.666 13.3333 16.666ZM20.0002 16.666C19.0799 16.6661 18.3334 17.4117 18.3333 18.332C18.3333 19.2525 19.0798 19.999 20.0002 19.999C20.9207 19.999 21.6672 19.2525 21.6672 18.332C21.6671 17.4117 20.9206 16.666 20.0002 16.666ZM26.6672 16.666C25.7468 16.666 25.0004 17.4117 25.0002 18.332C25.0002 19.2525 25.7468 19.999 26.6672 19.999C27.5876 19.9989 28.3333 19.2524 28.3333 18.332C28.3331 17.4117 27.5875 16.6661 26.6672 16.666Z", fill: "#2D87F3" })));
+
 /* 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" })));
+    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: "#8C8C8C", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M13.6114 15.2778V19.1667L10.0003 16.3889L6.38916 19.1667V15.2778", stroke: "#8C8C8C", 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: "#8C8C8C", 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("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: "#8C8C8C" }),
+        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: "#8C8C8C", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { d: "M6.25 6.75H12.75", stroke: "#8C8C8C", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { d: "M6.25 10H9.25", stroke: "#8C8C8C", strokeWidth: 1.125, strokeLinecap: "round", strokeLinejoin: "round" }),
+        React.createElement("path", { d: "M6.25 13.2505H9.25", stroke: "#8C8C8C", 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: "#8C8C8C", 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)" })))));
@@ -116,10 +123,10 @@ const HelloZalo = (props) => (React.createElement("svg", Object.assign({ width:
 
 /* 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" })));
+    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: "#8C8C8C", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M2.22217 17.7777L5.5555 14.4443", stroke: "#8C8C8C", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M1.94434 13.6112L2.49989 13.0557", stroke: "#8C8C8C", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M6.38867 18.0556L6.94423 17.5", stroke: "#8C8C8C", strokeWidth: 1.2, 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),
@@ -944,7 +951,7 @@ const StyledCollectPhoneForm = styled.div `
     }
   }
 `;
-const StyledButton = styled(Button$1) `
+const StyledButton$1 = styled(Button$1) `
   &.mantine-Button-root {
     border-radius: 12px;
     border: 1px solid;
@@ -963,7 +970,7 @@ const StyledButton = styled(Button$1) `
   }
 `;
 styled(DrawerBottom) ``;
-const StyledPhone = styled(Phone) `
+const StyledPhone$1 = styled(Phone) `
   --custom-primary-text: #111111;
   .PhoneInputCountry {
     pointer-events: none;
@@ -986,7 +993,7 @@ const StyledPhone = styled(Phone) `
     }
   }
 `;
-const StyledInputWrapper = styled(Input.Wrapper) `
+const StyledInputWrapper$1 = styled(Input.Wrapper) `
   --phone-input-space-x: -8px;
   .mantine-Text-root[data-size='c1'] {
     font-size: 0.75rem;
@@ -1007,7 +1014,7 @@ const formPhoneType = {
     ZALO: 'Zalo',
     WHATS_APP: 'Whatsapp',
 };
-const DEFAULT_COUNTRY_CODE = 'VN';
+const DEFAULT_COUNTRY_CODE$1 = 'VN';
 function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLoading, locale, }) {
     const { t } = useTranslations();
     const [phone, setPhone] = useState('');
@@ -1020,7 +1027,7 @@ function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLo
                 setErrorMessage(t('collectPhoneNumber.phoneRequired'));
                 return;
             }
-            const phoneData = parsePhoneNumber(value, DEFAULT_COUNTRY_CODE);
+            const phoneData = parsePhoneNumber(value, DEFAULT_COUNTRY_CODE$1);
             if (!(phoneData === null || phoneData === void 0 ? void 0 : phoneData.isValid())) {
                 setErrorMessage(t('collectPhoneNumber.inputInvalid'));
             }
@@ -1039,7 +1046,7 @@ function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLo
     const handleSubmit = () => {
         validatePhone(phone);
         setIsSubmitted(true);
-        const phoneData = parsePhoneNumber(phone, DEFAULT_COUNTRY_CODE);
+        const phoneData = parsePhoneNumber(phone, DEFAULT_COUNTRY_CODE$1);
         if (phoneData && phoneData.isValid()) {
             const areaCode = phoneData.countryCallingCode;
             onSubmit({
@@ -1060,16 +1067,16 @@ function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLo
             React__default.createElement(TextField, { shrink: !!phone, className: clsx('leadgen-form_input w-full', {
                     'leadgen-form_field_error': !!(isSubmitted && errorMessage),
                 }) },
-                React__default.createElement(TextField.Control, { htmlFor: "collection_phone_input" }, ({ shrink }) => (React__default.createElement(StyledInputWrapper, { "data-invalid": !!(isSubmitted && errorMessage), labelElement: "div", label: React__default.createElement(Text$1, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('collectPhoneNumber.inputLabel')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
+                React__default.createElement(TextField.Control, { htmlFor: "collection_phone_input" }, ({ shrink }) => (React__default.createElement(StyledInputWrapper$1, { "data-invalid": !!(isSubmitted && errorMessage), labelElement: "div", label: React__default.createElement(Text$1, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('collectPhoneNumber.inputLabel')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
                         errorMessage && (React__default.createElement(Flex, { align: 'center', gap: 4 },
                         React__default.createElement(ErrorIcon, { size: 12 }),
                         React__default.createElement(Text$1, { size: "c1", variant: "error" }, errorMessage))) },
                     React__default.createElement(Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
                             '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN].p2), { fontWeight: FontWeight.halfBold }),
                         }) },
-                        React__default.createElement(StyledPhone, { inputId: "collection_phone_input", onChange: handleChange, className: `mantine-Input-input ${classes.p2}`, name: "phoneNumber", spellCheck: false, placeholder: " ", defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", value: phone, "data-control": "tel", countries: [DEFAULT_COUNTRY_CODE], arrowComponent: () => React__default.createElement(React__default.Fragment, null) }))))))),
+                        React__default.createElement(StyledPhone$1, { inputId: "collection_phone_input", onChange: handleChange, className: `mantine-Input-input ${classes.p2}`, name: "phoneNumber", spellCheck: false, placeholder: " ", defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", value: phone, "data-control": "tel", countries: [DEFAULT_COUNTRY_CODE$1], arrowComponent: () => React__default.createElement(React__default.Fragment, null) }))))))),
         React__default.createElement("div", { className: "action actionBox" },
-            React__default.createElement(StyledButton, { variant: "primary", onClick: handleSubmit, fullWidth: true, size: "lg", loading: isLoading },
+            React__default.createElement(StyledButton$1, { variant: "primary", onClick: handleSubmit, fullWidth: true, size: "lg", loading: isLoading },
                 React__default.createElement("div", null, t('collectPhoneNumber.action')),
                 React__default.createElement("img", { src: Right, alt: "arrow icon", width: 20, height: 20 })))));
 }
@@ -1083,7 +1090,7 @@ function CollectPhoneSuccess({ onClose }) {
                 React__default.createElement("h5", { className: "mb-1" }, t('collectPhoneNumber.titleSuccess')),
                 React__default.createElement("p", { className: "description" }, t('collectPhoneNumber.descriptionSuccess')))),
         React__default.createElement("div", { className: "action" },
-            React__default.createElement(StyledButton, { variant: "tertiary", onClick: onClose, fullWidth: true, size: "lg" }, t('common.action.close')))));
+            React__default.createElement(StyledButton$1, { variant: "tertiary", onClick: onClose, fullWidth: true, size: "lg" }, t('common.action.close')))));
 }
 
 var EPopupCollectPhoneStep;
@@ -1136,6 +1143,448 @@ function PopupCollectPhone({ children, isMobile, onSubmit, isOpen: isOpenProp, o
             currentStep === EPopupCollectPhoneStep.SUCCESS && (React__default.createElement(CollectPhoneSuccess, { onClose: handleClose })))));
 }
 
+const StyledRequestConsultationForm = styled.div `
+  padding-top: 16px;
+  padding-bottom: 16px;
+  width: 100%;
+
+  & #request_consultation_name_input.mantine-Input-input {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+    color: ${theme.colors.gray1000};
+  }
+
+  & #gender-option-control-label {
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: -0.3px;
+    color: ${theme.colors.gray600};
+  }
+
+  & .radio-group .gender-item .mantine-Radio-label {
+    border-radius: 8px;
+  }
+
+  & .info {
+    .PhoneInput .PhoneInputInput {
+      &:focus {
+        border-color: unset;
+        outline: none;
+        box-shadow: none;
+      }
+
+      &:hover {
+        border-color: unset;
+        outline: none;
+        box-shadow: none;
+      }
+    }
+  }
+
+  ${MediaQueries.mbUp} {
+    width: 420px;
+    padding-top: 32px;
+    padding-bottom: 32px;
+  }
+
+  .mantine-Input-input.custom_input {
+    /* font-size: 16px; */
+  }
+
+  .formHeader {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0 24px;
+    margin-bottom: 34px;
+    ${MediaQueries.mbUp} {
+      margin-bottom: 24px;
+    }
+  }
+
+  .formHeaderIcon {
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    svg {
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  .formCloseButton {
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${theme.colors.white};
+    border: none;
+    cursor: pointer;
+    color: ${theme.colors.gray800};
+    :hover {
+      background: ${theme.colors.gray100};
+    }
+  }
+
+  .formTitleBlock {
+    margin-top: 4px;
+    padding: 0 24px 24px;
+  }
+
+  .formTitle {
+    font-weight: 600;
+    font-size: 1.375rem;
+    line-height: 2rem;
+    letter-spacing: -0.4px;
+    color: ${theme.colors.gray800};
+    margin-bottom: 12px;
+  }
+
+  .formSubtitle {
+    color: ${theme.colors.gray600};
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.375rem;
+    letter-spacing: -0.2px;
+    margin: 0;
+  }
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: stretch;
+    padding: 0 24px 16px;
+    text-align: left;
+    h5 {
+      font-weight: 600;
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+      letter-spacing: -0.4px;
+      text-align: center;
+    }
+    .description {
+      color: ${theme.colors.gray700};
+      text-align: center;
+      font-size: 0.8125rem;
+      font-weight: 400;
+      line-height: 1.25rem;
+      letter-spacing: -0.3px;
+    }
+    &.center {
+      align-items: center;
+    }
+  }
+
+  .mb-1 {
+    margin-bottom: 4px;
+  }
+
+  .w-full {
+    width: 100%;
+  }
+
+  .px-3 {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .action {
+    padding: 0px 24px;
+    width: 100%;
+    &.actionBox {
+      border-top: 0.5px solid ${theme.colors.neutral100};
+      padding-top: 16px;
+    }
+  }
+
+  &.formSuccess {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    height: 100%;
+
+    .action {
+      padding: 0px 24px;
+    }
+  }
+`;
+const StyledButton = styled(Button$1) `
+  &.mantine-Button-root {
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+
+    &:hover {
+      background-color: ${theme.colors.primaryBase};
+    }
+
+    background-color: ${theme.colors.primaryBase};
+    color: ${theme.colors.white};
+
+    &.tertiary {
+      border-color: ${theme.colors.neutral200};
+    }
+  }
+
+  .mantine-Button-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+`;
+const StyledDrawerBottom = styled(DrawerBottom) `
+  ${MediaQueries.mbDown} {
+    .mantine-Modal-content {
+      height: 100dvh;
+    }
+  }
+
+  .mantine-Modal-body {
+    padding: 0;
+    height: 100%;
+
+    .formSuccess {
+      background: linear-gradient(180deg, #a5d4ff 0%, #ffffff 50%);
+    }
+  }
+`;
+const StyledPhone = styled(Phone) `
+  --custom-primary-text: #111111;
+  .PhoneInputCountry {
+    pointer-events: none;
+    --phone-select: 58px;
+  }
+
+  &.PhoneInput {
+    .PhoneInputCountry {
+    }
+
+    .PhoneInputCountryIconCallingCode {
+      color: var(--custom-primary-text);
+    }
+
+    .PhoneInputInput {
+      color: var(--custom-primary-text) !important ;
+      :focus {
+        color: var(--custom-primary-text) !important ;
+      }
+    }
+  }
+`;
+const StyledInputWrapper = styled(Input.Wrapper) `
+  --phone-input-space-x: -8px;
+  .mantine-Text-root[data-size='c1'] {
+    font-size: 0.75rem;
+  }
+  .mantine-Text-root[data-size='p3'] {
+    font-size: 0.8125rem;
+  }
+
+  .mantine-Text-root[data-size='p2'] {
+    font-size: 0.9375rem;
+  }
+`;
+
+var EGender;
+(function (EGender) {
+    EGender["Male"] = "male";
+    EGender["Female"] = "female";
+})(EGender || (EGender = {}));
+const DEFAULT_COUNTRY_CODE = ['VN', 'MY'];
+function RequestConsultationForm({ onSubmit, onClose, title, isLoading, locale, }) {
+    const { t } = useTranslations();
+    const [name, setName] = useState('');
+    const [phone, setPhone] = useState('');
+    const [gender, setGender] = useState(EGender.Female);
+    const [nameError, setNameError] = useState('');
+    const [phoneError, setPhoneError] = useState('');
+    const [genderError, setGenderError] = useState('');
+    const [isSubmitted, setIsSubmitted] = useState(false);
+    const { classes } = useTextStyles();
+    const defaultCountry = (locale ? MAPPED_LOCALE$1[locale] || 'VN' : 'VN');
+    const validatePhone = (value) => {
+        try {
+            if (!value) {
+                setPhoneError(t('collectPhoneNumber.phoneRequired'));
+                return false;
+            }
+            const phoneData = parsePhoneNumber(value, defaultCountry);
+            console.log('🚀 ~ validatePhone ~ phoneData:', phoneData);
+            if (!(phoneData === null || phoneData === void 0 ? void 0 : phoneData.isValid())) {
+                setPhoneError(t('collectPhoneNumber.inputInvalid'));
+                return false;
+            }
+            setPhoneError('');
+            return true;
+        }
+        catch (_a) {
+            setPhoneError(t('collectPhoneNumber.inputInvalid'));
+            return false;
+        }
+    };
+    const handlePhoneChange = (value) => {
+        setPhone(value);
+        if (value) {
+            validatePhone(value);
+        }
+        else {
+            setPhoneError('');
+        }
+    };
+    const handleSubmit = () => {
+        setIsSubmitted(true);
+        const hasName = !!(name === null || name === void 0 ? void 0 : name.trim());
+        if (!hasName) {
+            setNameError(t('popupRequestConsultation.nameRequired'));
+        }
+        else {
+            setNameError('');
+        }
+        const phoneValid = validatePhone(phone);
+        const hasGender = gender === EGender.Male || gender === EGender.Female;
+        if (!hasGender) {
+            setGenderError(t('popupRequestConsultation.genderRequired'));
+        }
+        else {
+            setGenderError('');
+        }
+        if (!hasName || !phoneValid || !hasGender)
+            return;
+        const phoneData = parsePhoneNumber(phone, defaultCountry);
+        if (!phoneData || !phoneData.isValid())
+            return;
+        const areaCode = phoneData.countryCallingCode;
+        onSubmit({
+            name: name.trim(),
+            phone: phoneData.nationalNumber,
+            countryCode: phoneData.country,
+            callingCode: (areaCode === null || areaCode === void 0 ? void 0 : areaCode.includes('+')) ? areaCode : `+${areaCode}`,
+            gender: gender,
+        });
+    };
+    return (React__default.createElement(StyledRequestConsultationForm, null,
+        React__default.createElement("div", { className: "formHeader" },
+            React__default.createElement("div", { className: "formHeaderIcon" },
+                React__default.createElement(Comment, { width: 24, height: 24 })),
+            React__default.createElement("button", { type: "button", className: "formCloseButton", onClick: onClose, "aria-label": t('common.action.close') },
+                React__default.createElement(Close, { width: 20, height: 20 }))),
+        React__default.createElement("div", { className: "formTitleBlock" },
+            React__default.createElement("h2", { className: "formTitle" }, title || t('popupRequestConsultation.title')),
+            React__default.createElement("p", { className: "formSubtitle" }, t('popupRequestConsultation.subtitle'))),
+        React__default.createElement("div", { className: "info" },
+            React__default.createElement(TextField, { shrink: !!name, className: clsx('leadgen-form_input w-full', {
+                    'leadgen-form_field_error': !!(isSubmitted && nameError),
+                }) },
+                React__default.createElement(TextField.Control, { htmlFor: "request_consultation_name_input" }, ({ shrink }) => (React__default.createElement(StyledInputWrapper, { "data-invalid": !!(isSubmitted && nameError), labelElement: "div", label: React__default.createElement(Text$1, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('popupRequestConsultation.yourName')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
+                        nameError && (React__default.createElement(Flex, { align: 'center', gap: 4 },
+                        React__default.createElement(ErrorIcon, { size: 12 }),
+                        React__default.createElement(Text$1, { size: "c1", variant: "error" }, nameError))) },
+                    React__default.createElement(Input, { id: "request_consultation_name_input", value: name, onChange: (value) => {
+                            setName(value !== null && value !== void 0 ? value : '');
+                            if (isSubmitted && nameError)
+                                setNameError('');
+                        }, placeholder: " ", classNames: { input: `mantine-Input-input ${classes.p2}` } }))))),
+            React__default.createElement(TextField, { shrink: !!phone, className: clsx('leadgen-form_input w-full', {
+                    'leadgen-form_field_error': !!(isSubmitted && phoneError),
+                }) },
+                React__default.createElement(TextField.Control, { htmlFor: "request_consultation_phone_input" }, ({ shrink }) => (React__default.createElement(StyledInputWrapper, { "data-invalid": !!(isSubmitted && phoneError), labelElement: "div", label: React__default.createElement(Text$1, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, t('popupRequestConsultation.phoneLabel')), inputWrapperOrder: ['label', 'input', 'description', 'error'], error: isSubmitted &&
+                        phoneError && (React__default.createElement(Flex, { align: 'center', gap: 4 },
+                        React__default.createElement(ErrorIcon, { size: 12 }),
+                        React__default.createElement(Text$1, { size: "c1", variant: "error" }, phoneError))) },
+                    React__default.createElement(Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
+                            '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN].p2), { fontWeight: FontWeight.halfBold }),
+                        }) },
+                        React__default.createElement(StyledPhone, { inputId: "request_consultation_phone_input", onChange: handlePhoneChange, className: `mantine-Input-input ${classes.p2}`, name: "phoneNumber", spellCheck: false, placeholder: " ", defaultCountry: defaultCountry, type: "text", value: phone, "data-control": "tel", countries: DEFAULT_COUNTRY_CODE, arrowComponent: () => React__default.createElement(React__default.Fragment, null) })))))),
+            React__default.createElement(GenderOptionControl, { id: "gender-option-control-consultation", label: t('popupRequestConsultation.gender'), type: "button", value: gender || undefined, onChange: (v) => {
+                    setGender(v);
+                    if (isSubmitted && genderError)
+                        setGenderError('');
+                }, error: isSubmitted && genderError ? genderError : undefined, styles: {
+                    wrapper: {
+                        flexDirection: 'row-reverse',
+                    },
+                }, labelText: {
+                    size: 'title2',
+                    color: 'gray800',
+                    fw: 500,
+                } })),
+        React__default.createElement("div", { className: "action" },
+            React__default.createElement(StyledButton, { variant: "primary", onClick: handleSubmit, fullWidth: true, size: "lg", loading: isLoading }, t('popupRequestConsultation.action')))));
+}
+
+function RequestConsultationSuccess({ onClose, }) {
+    const { t } = useTranslations();
+    return (React__default.createElement(StyledRequestConsultationForm, { className: "formSuccess" },
+        React__default.createElement("div", { className: "formTitleBlock" },
+            React__default.createElement(Check, { width: 64, height: 64 })),
+        React__default.createElement("div", { className: "formTitleBlock" },
+            React__default.createElement("h2", { className: "formTitle" }, t('popupRequestConsultation.titleSuccess')),
+            React__default.createElement("p", { className: "formSubtitle" }, t('popupRequestConsultation.descriptionSuccess'))),
+        React__default.createElement("div", { className: "action" },
+            React__default.createElement(StyledButton, { variant: "tertiary", onClick: onClose, fullWidth: true, size: "lg" }, t('common.action.close')))));
+}
+
+var EPopupRequestConsultationStep;
+(function (EPopupRequestConsultationStep) {
+    EPopupRequestConsultationStep[EPopupRequestConsultationStep["FORM"] = 0] = "FORM";
+    EPopupRequestConsultationStep[EPopupRequestConsultationStep["SUCCESS"] = 1] = "SUCCESS";
+})(EPopupRequestConsultationStep || (EPopupRequestConsultationStep = {}));
+function PopupRequestConsultation({ children, isMobile, onSubmit, isOpen: isOpenProp, onOpenChange, drawerProps = {}, locale, }) {
+    const modalState = useDisclosure(isOpenProp);
+    const [currentStep, setCurrentStep] = useState(EPopupRequestConsultationStep.FORM);
+    const [isOpen, { open, toggle, close }] = modalState;
+    const [isLoading, setIsLoading] = useState(false);
+    const handleOpenChange = (isOpen) => {
+        if (isOpen) {
+            open();
+        }
+        else {
+            close();
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+    };
+    const handleClose = () => {
+        handleOpenChange(false);
+    };
+    const handleSubmit = (data) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setIsLoading(true);
+            yield onSubmit(data);
+            setCurrentStep(EPopupRequestConsultationStep.SUCCESS);
+        }
+        catch (error) {
+            console.log('🚀 ~ handleSubmit ~ error:', error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    useEffect(() => {
+        if (isOpen) {
+            setCurrentStep(EPopupRequestConsultationStep.FORM);
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        handleOpenChange(isOpenProp);
+    }, [isOpenProp]);
+    return (React__default.createElement(React__default.Fragment, null,
+        typeof children === 'function' ? (children(modalState)) : (React__default.createElement("div", { onClick: toggle }, children)),
+        React__default.createElement(StyledDrawerBottom, Object.assign({ isOpen: isOpen, onClose: handleClose, onOpenChange: handleOpenChange, isMobile: false, fadeFromIndex: ZINDEX_SSO - 9e6, zIndex: ZINDEX_SSO, repositionInputs: false, isLinear: true, withCloseButton: false, fullScreen: isMobile }, drawerProps),
+            currentStep === EPopupRequestConsultationStep.FORM && (React__default.createElement(RequestConsultationForm, { onSubmit: handleSubmit, onClose: handleClose, isLoading: isLoading, locale: locale })),
+            currentStep === EPopupRequestConsultationStep.SUCCESS && (React__default.createElement(RequestConsultationSuccess, { onClose: handleClose })))));
+}
+
 const StyledHospitalInfo = styled.div `
   display: flex;
   align-items: center;
@@ -1455,4 +1904,4 @@ const ArticleDetailCard = (props) => {
                         doctorName))))));
 };
 
-export { ArticleDetailCard as A, 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, Credential as g, Education as h, Email as i, HelloZalo as j, Highlight as k, Ellipse as l, PhoneInactive as m };
+export { ArticleDetailCard as A, ClinicInfo as C, DoctorExpertise as D, EPopupCollectPhoneStep as E, HospitalInfo as H, Mobile as M, NavHeader as N, PopupCollectPhone as P, RequestConsultationForm as R, UserProfileNavigation as U, UserStats as a, CollectPhoneForm as b, EGender as c, RequestConsultationSuccess as d, EPopupRequestConsultationStep as e, formPhoneType as f, PopupRequestConsultation as g, ProductInsuranceInfo as h, Check as i, Clock as j, Comment as k, Credential as l, Education as m, Email as n, HelloZalo as o, Highlight as p, Ellipse as q, PhoneInactive as r };