@hhgtech/hhg-components 1.29.392 → 1.29.394-beta-1

package/build/esm/lead.js

@@ -1,52 +1,52 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-7369a886.js';
-import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback, forwardRef, useImperativeHandle, memo } from 'react';
-import { createStyles, Box, Button as Button$1, Input as Input$1, clsx, Autocomplete, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, TextInput, NumberInput as NumberInput$1, Portal, Transition, Overlay } from '@mantine/core';
+import { _ as __rest, a as __awaiter } from './tslib.es6-14dd4d35.js';
+import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback, forwardRef, useImperativeHandle, memo, useLayoutEffect } from 'react';
+import { createStyles, Box, Button as Button$1, Input as Input$1, Autocomplete, clsx, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, TextInput, NumberInput as NumberInput$1, Portal, Transition, Overlay } from '@mantine/core';
 import dayjs from 'dayjs';
 import debounce from 'lodash/debounce';
 import { createFormContext, useForm } from '@mantine/form';
-import { B as BEARER_TOKEN_COOKIE } from './index-fd8d47d1.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-a4323bc7.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { u as useTranslations } from './index-28a1dbbd.js';
-import { T as TranslationsContext } from './translationsContext-c41a99f3.js';
-import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-e60df37f.js';
-import { T as Text } from './index-b43b8fce.js';
-import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput, O as OTP } from './index-a0aefa52.js';
-import { D as DatePicker } from './index-feed474a.js';
-import { B as Button } from './index-61d04b9e.js';
-import './index.styles-bcc9b795.js';
+import { u as useTranslations } from './index-6fca5112.js';
+import { T as TranslationsContext } from './translationsContext-4576c0e2.js';
+import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-33115067.js';
+import { T as Text } from './index-353aaf10.js';
+import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput, O as OTP } from './index-3d74a659.js';
+import { D as DatePicker } from './index-4d2eb768.js';
+import { B as Button } from './index-705b8d1a.js';
+import './index.styles-491e88da.js';
 import { useClickOutside } from '@mantine/hooks';
-import './useMantineLocale-41118166.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-938a3f78.js';
-import './index-1ee3b4c0.js';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-19ce2735.js';
-import './other-680529e5.js';
-import './index-42b16695.js';
-import { M as MAPPED_LOCALE } from './utils-a3f438a4.js';
+import './useMantineLocale-9b2cc745.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-c7b5065c.js';
+import './index-def91b42.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-15518ce2.js';
+import './other-94474cd6.js';
+import './index-c68f7778.js';
+import { M as MAPPED_LOCALE } from './utils-d0fc162a.js';
 import { DateInput } from '@mantine/dates';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-790db45f.js';
-import { H as Heading$1 } from './index-fd50ebba.js';
-import { t as translationsMap$1 } from './translationsProvider-47642b78.js';
-import { L as LOCALE } from './Locale-2680ebb3.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-b847fa53.js';
+import { H as Heading$1 } from './index-2c6e15e2.js';
+import { t as translationsMap$1 } from './translationsProvider-c06d92ab.js';
+import { L as LOCALE } from './Locale-3c079669.js';
 import { v1 } from 'uuid';
 import { parsePhoneNumber } from 'react-phone-number-input';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { css } from '@emotion/react';
-import { T as TogetherComponentGlobalContext } from './utils-83401f11.js';
-import { i as isVideo } from './index-eb396268.js';
-import { u as useScreenSize } from './useScreenSize-6f13a7fd.js';
+import { T as TogetherComponentGlobalContext } from './utils-696f17ac.js';
+import { i as isVideo } from './index-07c24591.js';
+import { u as useScreenSize } from './useScreenSize-e5a11e21.js';
+import { motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
-import { B as Button$2 } from './index-947fba42.js';
-import { I as InputDate } from './InputDate-5b2fc89b.js';
-import { D as DrawerComponent } from './index-35fefdf8.js';
-import { C as Close } from './Close-20df0bd5.js';
+import { B as Button$2 } from './index-b61d2fa5.js';
+import { I as InputDate } from './InputDate-36198e12.js';
+import { C as Close } from './Close-6fe1b9a2.js';
 import './constantsIsProduction.js';
-import './normalizeLink-e7bcd5c8.js';
+import './normalizeLink-7cb62382.js';
 import './constantsDomainLocales.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-d6bcf402.js';
+import './useUniqueId-a1f357b3.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import '@mantine/notifications';
@@ -63,12 +63,11 @@ import './i18n-values/tl-PH.js';
 import './i18n-values/vi-VN.js';
 import './i18n-values/vi-VN_MB.js';
 import './i18n-values/zh-TW.js';
-import './index-6d329505.js';
+import './index-8e5beeda.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-54f00416.js';
-import 'vaul';
+import './constants-23d94304.js';
 
 const LeadGenComponentContext = createContext({});
 
@@ -2281,7 +2280,7 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
         }, {});
     }, [listBlockAdded.map((b) => b.name).join(','), format]);
     const form = useLeadForm({
-        validateInputOnChange: true,
+        validateInputOnChange: false,
         validateInputOnBlur: true,
         clearInputErrorOnChange: true,
         validate: validateObj,
@@ -2467,6 +2466,66 @@ const PhoneInput = forwardRef((props, ref) => {
             React__default.createElement(Phone, Object.assign({}, restProps, { id: id, ref: ref, name: name, spellCheck: false, placeholder: placeholder, defaultCountry: defaultCountry, className: "mantine-Input-input", type: "tel", "data-control": "tel" })))));
 });
 
+const NoData = ({ className, style }) => {
+    return (React__default.createElement("svg", { width: "64", height: "55", viewBox: "0 0 64 55", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
+        React__default.createElement("path", { d: "M32.6226 54.0001C46.2852 54.0001 57.3652 43.0033 57.3652 29.4239C57.3652 15.8446 46.2852 4.84778 32.6226 4.84778C18.9599 4.84778 7.87988 15.8446 7.87988 29.4239C7.87988 43.0033 18.9599 54.0001 32.6226 54.0001Z", fill: "#E6EAF5" }),
+        React__default.createElement("path", { d: "M51.5751 26.2165V41.2537C51.5751 44.3778 49.0342 46.9187 45.8684 46.9187H19.4596C16.3355 46.9187 13.7946 44.4195 13.7529 41.2954C13.7529 41.2537 13.7529 41.2537 13.7529 41.2121V26.2165C13.7529 26.1748 13.7529 26.1748 13.7529 26.1332C13.7529 26.0498 13.7529 25.9665 13.7946 25.8832C13.8362 25.7583 13.8779 25.675 13.9195 25.55L21.0008 12.0123C21.2507 11.4708 21.7922 11.1792 22.3754 11.1792H42.911C43.4941 11.1792 43.994 11.4708 44.2856 12.0123L51.3668 25.55C51.4085 25.6333 51.4501 25.7583 51.4918 25.8832C51.5751 25.9665 51.5751 26.0915 51.5751 26.2165Z", fill: "#D5DDEA" }),
+        React__default.createElement("path", { d: "M51.5751 26.2164V42.7949C51.5751 45.0859 49.7423 46.9187 47.4096 46.9187H17.9184C15.6274 46.9187 13.7529 45.0859 13.7529 42.7949V26.1331C13.7529 26.0498 13.7529 25.9665 13.7946 25.8832H23.2918C24.708 25.8832 25.8743 27.0078 25.8743 28.4658C25.8743 29.1739 26.1659 29.8404 26.6241 30.2986C27.124 30.7984 27.7071 31.0483 28.4569 31.0483H36.9127C38.329 31.0483 39.4953 29.9237 39.4953 28.4658C39.4953 27.7576 39.7869 27.0912 40.2451 26.633C40.7449 26.1331 41.3281 25.8832 42.0362 25.8832H51.4918C51.5751 25.9665 51.5751 26.0915 51.5751 26.2164Z", fill: "url(#paint0_linear_2578_27197)" }),
+        React__default.createElement("path", { d: "M56.7342 17.6773C57.6774 17.6773 58.442 16.9126 58.442 15.9694C58.442 15.0262 57.6774 14.2616 56.7342 14.2616C55.791 14.2616 55.0264 15.0262 55.0264 15.9694C55.0264 16.9126 55.791 17.6773 56.7342 17.6773Z", fill: "#EAEEF9" }),
+        React__default.createElement("path", { d: "M55.0257 12.1373C55.6698 12.1373 56.192 11.6152 56.192 10.971C56.192 10.3269 55.6698 9.80469 55.0257 9.80469C54.3816 9.80469 53.8594 10.3269 53.8594 10.971C53.8594 11.6152 54.3816 12.1373 55.0257 12.1373Z", fill: "#EAEEF9" }),
+        React__default.createElement("path", { d: "M7.79034 15.9694C8.43449 15.9694 8.95667 15.4472 8.95667 14.803C8.95667 14.1589 8.43449 13.6367 7.79034 13.6367C7.1462 13.6367 6.62402 14.1589 6.62402 14.803C6.62402 15.4472 7.1462 15.9694 7.79034 15.9694Z", fill: "#EAEEF9" }),
+        React__default.createElement("path", { d: "M5.16603 41.6286C6.36229 41.6286 7.33205 40.6588 7.33205 39.4625C7.33205 38.2663 6.36229 37.2965 5.16603 37.2965C3.96976 37.2965 3 38.2663 3 39.4625C3 40.6588 3.96976 41.6286 5.16603 41.6286Z", fill: "#EAEEF9" }),
+        React__default.createElement("path", { d: "M43.0864 6.16785C43.6301 12.1024 43.9019 13.4615 42.6711 18.8361C42.2708 20.0309 41.8705 21.3396 41.0128 22.25C39.812 23.6725 37.6392 24.2984 35.8666 23.8432C34.0368 23.388 32.5501 21.7948 32.2071 19.8602C31.9212 18.6654 32.3214 17.2429 33.3507 16.5032C34.4371 15.8204 35.981 15.9911 36.8958 16.8446C37.9251 17.6981 38.3254 19.0068 38.2682 20.2585C38.211 21.5103 37.7536 22.7621 37.1246 23.8432C35.7027 26.5014 35.1173 26.4916 32.2071 30.8575", stroke: "#ABB5CC", strokeMiterlimit: "10", strokeDasharray: "4 4" }),
+        React__default.createElement("path", { d: "M46.2749 3.95757C46.0575 4.75059 45.1881 5.03896 44.3187 4.53431C43.3769 4.10176 42.7249 3.74129 42.8698 3.02037C43.0871 2.29945 43.9565 2.22735 44.9708 2.15526C46.2024 2.01108 46.4198 3.16455 46.2749 3.95757Z", fill: "#DAE2EB" }),
+        React__default.createElement("path", { d: "M39.2479 4.67842C39.6102 5.32726 40.6245 5.75981 41.3489 5.11098C42.1459 4.39005 42.7979 3.88541 42.4357 3.16448C42.0734 2.51565 41.4938 2.73193 40.2622 2.87611C39.2479 3.09239 38.8132 3.9575 39.2479 4.67842Z", fill: "#DAE2EB" }),
+        React__default.createElement("path", { d: "M42.4358 2.01104C42.9429 1.93895 43.4501 2.22732 43.595 2.65987C43.6674 2.80406 43.7399 3.02034 43.7399 3.16452C43.8848 4.17381 43.5225 5.03892 42.9429 5.11102C42.2909 5.2552 41.6389 4.53428 41.5664 3.59707C41.5664 3.3087 41.5664 3.16452 41.5664 2.94824C41.6389 2.4436 41.9286 2.08313 42.4358 2.01104C42.5082 2.01104 42.4358 2.01104 42.4358 2.01104Z", fill: "#989FB0" }),
+        React__default.createElement("path", { d: "M27.9127 37.0298C28.4405 37.0298 28.8684 36.6019 28.8684 36.0741C28.8684 35.5463 28.4405 35.1184 27.9127 35.1184C27.3849 35.1184 26.957 35.5463 26.957 36.0741C26.957 36.6019 27.3849 37.0298 27.9127 37.0298Z", fill: "#989FB0" }),
+        React__default.createElement("path", { d: "M37.4186 37.0298C37.9464 37.0298 38.3742 36.6019 38.3742 36.0741C38.3742 35.5463 37.9464 35.1184 37.4186 35.1184C36.8908 35.1184 36.4629 35.5463 36.4629 36.0741C36.4629 36.6019 36.8908 37.0298 37.4186 37.0298Z", fill: "#989FB0" }),
+        React__default.createElement("path", { d: "M34.2147 43.3063H31.2186C30.7536 43.3063 30.3662 42.9188 30.3662 42.4539C30.3662 41.989 30.7536 41.6016 31.2186 41.6016H34.1889C34.6538 41.6016 35.0413 41.989 35.0413 42.4539C35.0671 42.9188 34.6797 43.3063 34.2147 43.3063Z", fill: "#989FB0" }),
+        React__default.createElement("defs", null,
+            React__default.createElement("linearGradient", { id: "paint0_linear_2578_27197", x1: "32.6517", y1: "25.3966", x2: "32.6517", y2: "47.1455", gradientUnits: "userSpaceOnUse" },
+                React__default.createElement("stop", { stopColor: "#FDFEFF" }),
+                React__default.createElement("stop", { offset: "0.9964", stopColor: "#ECF0F5" })))));
+};
+
+const libraries = ['places'];
+const GoogleLocationBlock = (props) => {
+    var _a;
+    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = __rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
+    const [LoadScript, setLoadScript] = useState(null);
+    const [value, setValue] = useState(defaultValue || valueProps);
+    const { predictions } = usePlacesAutocomplete(value, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
+    const onChangeAutocomplete = useCallback((s) => {
+        setValue(s);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
+    }, []);
+    const onClickItem = useCallback((item) => {
+        /** For sure get value */
+        setValue(item.value);
+        const predCur = predictions === null || predictions === void 0 ? void 0 : predictions.find(({ description }) => description === item.value);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(item.value, predCur === null || predCur === void 0 ? void 0 : predCur.rawData);
+    }, [onChangeProps, predictions]);
+    useEffect(() => {
+        setValue(valueProps);
+    }, [valueProps]);
+    useEffect(() => {
+        var _a, _b, _c;
+        // only load extra google script when not yet loaded
+        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService) && !LoadScript) {
+            import('@react-google-maps/api').then((m) => {
+                setLoadScript(() => m.LoadScript);
+            });
+        }
+    }, []);
+    return (React__default.createElement(Autocomplete, Object.assign({ defaultValue: defaultValue, value: value, onChange: onChangeAutocomplete, data: predictions.map((pred) => {
+            return { value: pred.description, label: pred.description };
+        }), filter: () => true, onItemSubmit: onClickItem, inputWrapperOrder: inputWrapperOrder, zIndex: ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
+            return (React__default.createElement(React__default.Fragment, null,
+                LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null), style: { width: '100%' } })),
+                children));
+        } }, restProps)));
+};
+
 const formatLeadGenFormValue = (values, blocks) => {
     const newValues = {};
     for (const block of blocks) {
@@ -2815,17 +2874,22 @@ const TextField$1 = (props) => {
         onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
     });
     const [shrink, setShrink] = useState(shrinkProps);
+    const focusInput = (target) => {
+        const $textEl = target.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
+        const $focusEl = $textEl.item($textEl.length - 1);
+        if ($focusEl) {
+            $focusEl.focus({ preventScroll: true });
+        }
+    };
     const onClick = useCallback((e) => {
-        setShrink(true);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
         if (shrink) {
+            e.preventDefault();
+            focusInput(e.currentTarget);
             return;
         }
-        const $textEl = e.currentTarget.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
-        const $focusEl = $textEl.item($textEl.length - 1);
-        if ($focusEl) {
-            $focusEl.focus();
-        }
+        setShrink(true);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
+        focusInput(e.currentTarget);
     }, [shrink]);
     useEffect(() => {
         setShrink(shrinkProps);
@@ -2838,44 +2902,6 @@ const ChoiceField$1 = (props) => {
     return (React__default.createElement(StyledChoiceFieldContainer$1, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
 };
 
-const libraries = ['places'];
-const GoogleLocationBlock = (props) => {
-    var _a;
-    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = __rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
-    const [LoadScript, setLoadScript] = useState(null);
-    const [value, setValue] = useState(defaultValue || valueProps);
-    const { predictions } = usePlacesAutocomplete(value, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
-    const onChangeAutocomplete = useCallback((s) => {
-        setValue(s);
-        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
-    }, []);
-    const onClickItem = useCallback((item) => {
-        /** For sure get value */
-        setValue(item.value);
-        const predCur = predictions === null || predictions === void 0 ? void 0 : predictions.find(({ description }) => description === item.value);
-        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(item.value, predCur === null || predCur === void 0 ? void 0 : predCur.rawData);
-    }, [onChangeProps, predictions]);
-    useEffect(() => {
-        setValue(valueProps);
-    }, [valueProps]);
-    useEffect(() => {
-        var _a, _b, _c;
-        // only load extra google script when not yet loaded
-        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService) && !LoadScript) {
-            import('@react-google-maps/api').then((m) => {
-                setLoadScript(() => m.LoadScript);
-            });
-        }
-    }, []);
-    return (React__default.createElement(Autocomplete, Object.assign({ defaultValue: defaultValue, value: value, onChange: onChangeAutocomplete, data: predictions.map((pred) => {
-            return { value: pred.description, label: pred.description };
-        }), filter: () => true, onItemSubmit: onClickItem, inputWrapperOrder: inputWrapperOrder, zIndex: ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
-            return (React__default.createElement(React__default.Fragment, null,
-                LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null), style: { width: '100%' } })),
-                children));
-        } }, restProps)));
-};
-
 const LeadGenForm = forwardRef((props, ref) => {
     const { locale, blocks, scrollToErrorField = true, form: formProps, rules: validate, initialValues, onFinish, onFinishFailed, className, style, } = props;
     const formRef = useRef(null);
@@ -2929,52 +2955,73 @@ const LeadGenForm = forwardRef((props, ref) => {
     return (React__default.createElement("form", { ref: formRef, onSubmit: form.onSubmit(middlewareFinish, middlewareFinishFailed), className: className, style: style },
         React__default.createElement(StyledLeadGenFormInner, { className: "leadgen-form_inputs" }, blocks.map((block, idx) => {
             const { id, name: blockName, data } = block;
-            const { placeholder, value: name, required, listQuestion, valueHTML, isSendMailChimp = false, } = data;
+            const { placeholder: label, value: name, required, listQuestion, valueHTML, isSendMailChimp = false, } = data;
             const formInputProps = form.getInputProps(name);
             const { value, error } = formInputProps;
             const reactKey = `${id}-${idx}`;
             switch (blockName) {
                 case LEADGEN_BLOCK.TextBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
+                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.NumberBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(NumberInput$1, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
+                        React__default.createElement(NumberInput$1, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.EmailBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
+                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.PhoneOtpBlock:
                 case LEADGEN_BLOCK.WhatsappOtpBlock:
                 case LEADGEN_BLOCK.ZaloOtpBlock:
                 case LEADGEN_BLOCK.PhoneBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "text" }, formInputProps))));
+                        React__default.createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "text" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.LocationBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps))));
+                        React__default.createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.DateBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(DateInput, Object.assign({ locale: (MAPPED_LOCALE === null || MAPPED_LOCALE === void 0 ? void 0 : MAPPED_LOCALE[locale]) || MAPPED_LOCALE['vi-VN'], valueFormat: "DD/MM/YYYY", name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "default", "data-control": "date" }, formInputProps))));
+                        React__default.createElement(DateInput, Object.assign({ locale: (MAPPED_LOCALE === null || MAPPED_LOCALE === void 0 ? void 0 : MAPPED_LOCALE[locale]) || MAPPED_LOCALE['vi-VN'], valueFormat: "DD/MM/YYYY", name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "default", "data-control": "date" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.DropdownBlock:
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
                         React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                        React__default.createElement(Select$1, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, data: listQuestion.map((l) => ({
+                        React__default.createElement(Select$1, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", searchable: true, data: listQuestion.map((l) => ({
                                 value: l.value,
                                 label: l.placeholder,
-                            })) }, formInputProps))));
+                            })), nothingFound: React__default.createElement(NoData, null), styles: {
+                                item: {
+                                    paddingBlock: 12,
+                                    paddingInline: 10,
+                                    fontSize: 16,
+                                    lineHeight: 1.5,
+                                },
+                                nothingFound: {
+                                    fontSize: 54,
+                                    paddingBlock: 30,
+                                },
+                                itemsWrapper: {
+                                    padding: 6,
+                                },
+                                dropdown: {
+                                    '.mantine-ScrollArea-scrollbar[data-orientation="vertical"]': {
+                                        '--radix-scroll-area-thumb-width': '6px',
+                                        width: 'var(--radix-scroll-area-thumb-width)',
+                                        paddingInline: 0,
+                                    },
+                                },
+                            }, maxDropdownHeight: 192 }, formInputProps))));
                 case LEADGEN_BLOCK.CheckboxBlock: {
                     const formInputCheckboxProps = form.getInputProps(name, {
                         type: 'checkbox',
                     });
                     return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default.createElement(Checkbox$1.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, sx: {
+                        React__default.createElement(Checkbox$1.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, sx: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 flexWrap: 'wrap',
@@ -2986,7 +3033,7 @@ const LeadGenForm = forwardRef((props, ref) => {
                 case LEADGEN_BLOCK.RadioBlock: {
                     return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default.createElement(Radio$1.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
+                        React__default.createElement(Radio$1.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
                                 return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
                             } }, formInputProps), listQuestion.map((l, _index) => (React__default.createElement(Radio$1, { name: name, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
                 }
@@ -3225,9 +3272,17 @@ const CloseButton = ({ onClose, containerClassName, svgClassName, }) => (React__
 const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onClose, onOtherSubmit, }) => {
     const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
     const { width: imageDestkopWidth, height: imageDestkopHeight, loaded: imageDestkopLoaded, } = useImageSize(imageDestkop);
+    useEffect(() => {
+        if (popupId && imageMobileLoaded && imageDestkopLoaded) {
+            document.body.classList.add('noscroll');
+        }
+        return () => {
+            document.body.classList.remove('noscroll');
+        };
+    }, [popupId, imageMobileLoaded, imageDestkopLoaded]);
     if (!imageMobileLoaded || !imageDestkopLoaded)
         return null;
-    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "center_tab" },
+    return (React__default.createElement("div", { id: popupId, className: "leadgen lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "center_tab" },
         React__default.createElement("div", { className: "le-center-tab-popup" },
             React__default.createElement("div", { style: { position: 'relative' } },
                 React__default.createElement("a", { className: "js-popup-other-submit", href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
@@ -3293,6 +3348,486 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
 };
 
+function isMac() {
+    return testPlatform(/^Mac/);
+}
+function isIPhone() {
+    return testPlatform(/^iPhone/);
+}
+function isIPad() {
+    return (testPlatform(/^iPad/) ||
+        // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+        (isMac() && navigator.maxTouchPoints > 1));
+}
+function isIOS() {
+    return isIPhone() || isIPad();
+}
+function testPlatform(re) {
+    return typeof window !== 'undefined' && window.navigator != null
+        ? re.test(window.navigator.platform)
+        : undefined;
+}
+
+function chain(...callbacks) {
+    return (...args) => {
+        for (const callback of callbacks) {
+            if (typeof callback === 'function') {
+                callback(...args);
+            }
+        }
+    };
+}
+
+function isScrollable(node) {
+    const style = window.getComputedStyle(node);
+    return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+}
+
+const getParentScroll = (element) => {
+    if (element === document.documentElement || element === document.body) {
+        return element;
+    }
+    const parentElement = element.parentElement;
+    if (isScrollable(parentElement)) {
+        return parentElement;
+    }
+    return getParentScroll(parentElement);
+};
+
+// This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
+const KEYBOARD_BUFFER = 24;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+// @ts-ignore
+const visualViewport = typeof document !== 'undefined' && window.visualViewport;
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set([
+    'checkbox',
+    'radio',
+    'range',
+    'color',
+    'file',
+    'image',
+    'button',
+    'submit',
+    'reset',
+]);
+// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
+let preventScrollCount = 0;
+let restore;
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ */
+function usePreventScroll(options = {}) {
+    const { isDisabled } = options;
+    useIsomorphicLayoutEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+        preventScrollCount++;
+        if (preventScrollCount === 1) {
+            if (isIOS()) {
+                restore = preventScrollMobileSafari();
+            }
+        }
+        return () => {
+            preventScrollCount--;
+            if (preventScrollCount === 0) {
+                restore === null || restore === void 0 ? void 0 : restore();
+            }
+        };
+    }, [isDisabled]);
+}
+// Mobile Safari is a whole different beast. Even with overflow: hidden,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
+//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
+// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
+// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
+//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
+//    into view ourselves, without scrolling the whole page.
+// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
+//    same visually, but makes the actual scroll position always zero. This is required to make all of the
+//    above work or Safari will still try to scroll the page when focusing an input.
+// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
+//    to navigate to an input with the next/previous buttons that's outside a modal.
+function preventScrollMobileSafari() {
+    let scrollable;
+    let lastY = 0;
+    const onTouchStart = (e) => {
+        // Store the nearest scrollable parent element from the element that the user touched.
+        scrollable = getParentScroll(e.target);
+        if (scrollable === document.documentElement &&
+            scrollable === document.body) {
+            return;
+        }
+        lastY = e.changedTouches[0].pageY;
+    };
+    const onTouchMove = (e) => {
+        // Prevent scrolling the window.
+        if (!scrollable ||
+            scrollable === document.documentElement ||
+            scrollable === document.body) {
+            e.preventDefault();
+            return;
+        }
+        // Prevent scrolling up when at the top and scrolling down when at the bottom
+        // of a nested scrollable area, otherwise mobile Safari will start scrolling
+        // the window instead. Unfortunately, this disables bounce scrolling when at
+        // the top but it's the best we can do.
+        const y = e.changedTouches[0].pageY;
+        const scrollTop = scrollable.scrollTop;
+        const bottom = scrollable.scrollHeight - scrollable.clientHeight;
+        if (bottom === 0) {
+            return;
+        }
+        if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {
+            e.preventDefault();
+        }
+        lastY = y;
+    };
+    const onTouchEnd = (e) => {
+        const target = e.target;
+        // Apply this change if we're not already focused on the target element
+        if (isInput(target) && target !== document.activeElement) {
+            e.preventDefault();
+            // Apply a transform to trick Safari into thinking the input is at the top of the page
+            // so it doesn't try to scroll it into view. When tapping on an input, this needs to
+            // be done before the "focus" event, so we have to focus the element ourselves.
+            target.style.transform = 'translateY(-2000px)';
+            target.focus();
+            requestAnimationFrame(() => {
+                target.style.transform = '';
+            });
+        }
+    };
+    const onFocus = (e) => {
+        const target = e.target;
+        if (isInput(target)) {
+            // Transform also needs to be applied in the focus event in cases where focus moves
+            // other than tapping on an input directly, e.g. the next/previous buttons in the
+            // software keyboard. In these cases, it seems applying the transform in the focus event
+            // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
+            target.style.transform = 'translateY(-2000px)';
+            requestAnimationFrame(() => {
+                target.style.transform = '';
+                // This will have prevented the browser from scrolling the focused element into view,
+                // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
+                if (visualViewport) {
+                    if (visualViewport.height < window.innerHeight) {
+                        // If the keyboard is already visible, do this after one additional frame
+                        // to wait for the transform to be removed.
+                        requestAnimationFrame(() => {
+                            scrollIntoView(target);
+                        });
+                    }
+                    else {
+                        // Otherwise, wait for the visual viewport to resize before scrolling so we can
+                        // measure the correct position to scroll to.
+                        visualViewport.addEventListener('resize', () => scrollIntoView(target), { once: true });
+                    }
+                }
+            });
+        }
+    };
+    const onWindowScroll = () => {
+        // Last resort. If the window scrolled, scroll it back to the top.
+        // It should always be at the top because the body will have a negative margin (see below).
+        window.scrollTo(0, 0);
+    };
+    // Record the original scroll position so we can restore it.
+    // Then apply a negative margin to the body to offset it by the scroll position. This will
+    // enable us to scroll the window to the top, which is required for the rest of this to work.
+    const scrollX = window.pageXOffset;
+    const scrollY = window.pageYOffset;
+    const restoreStyles = chain(setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`));
+    // Scroll to the top. The negative margin on the body will make this appear the same.
+    window.scrollTo(0, 0);
+    const removeEvents = chain(addEvent(document, 'touchstart', onTouchStart, {
+        passive: false,
+        capture: true,
+    }), addEvent(document, 'touchmove', onTouchMove, {
+        passive: false,
+        capture: true,
+    }), addEvent(document, 'touchend', onTouchEnd, {
+        passive: false,
+        capture: true,
+    }), addEvent(document, 'focus', onFocus, true), addEvent(window, 'scroll', onWindowScroll));
+    return () => {
+        // Restore styles and scroll the page back to where it was.
+        restoreStyles();
+        removeEvents();
+        window.scrollTo(scrollX, scrollY);
+    };
+}
+// Sets a CSS property on an element, and returns a function to revert it to the previous value.
+function setStyle(element, style, value) {
+    // https://github.com/microsoft/TypeScript/issues/17827#issuecomment-391663310
+    // @ts-ignore
+    const cur = element.style[style];
+    // @ts-ignore
+    element.style[style] = value;
+    return () => {
+        // @ts-ignore
+        element.style[style] = cur;
+    };
+}
+// Adds an event listener to an element, and returns a function to remove it.
+function addEvent(target, event, handler, options) {
+    // @ts-ignore
+    target.addEventListener(event, handler, options);
+    return () => {
+        // @ts-ignore
+        target.removeEventListener(event, handler, options);
+    };
+}
+function scrollIntoView(target) {
+    const root = document.scrollingElement || document.documentElement;
+    while (target && target !== root) {
+        // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
+        const scrollable = getParentScroll(target);
+        if (scrollable !== document.documentElement &&
+            scrollable !== document.body &&
+            scrollable !== target) {
+            const scrollableTop = scrollable.getBoundingClientRect().top;
+            const targetTop = target.getBoundingClientRect().top;
+            const targetBottom = target.getBoundingClientRect().bottom;
+            // Buffer is needed for some edge cases
+            const keyboardHeight = scrollable.getBoundingClientRect().bottom + KEYBOARD_BUFFER;
+            if (targetBottom > keyboardHeight) {
+                scrollable.scrollTop += targetTop - scrollableTop;
+            }
+        }
+        // @ts-ignore
+        target = scrollable.parentElement;
+    }
+}
+function isInput(target) {
+    return ((target instanceof HTMLInputElement &&
+        !nonTextInputTypes.has(target.type)) ||
+        target instanceof HTMLTextAreaElement ||
+        (target instanceof HTMLElement && target.isContentEditable));
+}
+
+const useViewportDimensions = () => {
+    const dimensionsRef = useRef({ width: 0, height: 0 });
+    const [dimensions, setDimensions] = useState(() => ({
+        width: window.screen.availWidth,
+        height: window.screen.availHeight,
+    }));
+    useEffect(() => {
+        var _a;
+        function visualViewport(e) {
+            if (dimensionsRef.current.width === e.target.width &&
+                dimensionsRef.current.height === e.target.height) {
+                return;
+            }
+            const newDimensions = {
+                width: e.target.width,
+                height: e.target.height,
+            };
+            dimensionsRef.current = newDimensions;
+            setDimensions(newDimensions);
+        }
+        (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', visualViewport);
+        return () => {
+            var _a;
+            (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', visualViewport);
+        };
+    }, []);
+    return useMemo(() => (Object.assign({}, dimensions)), [dimensions.height, dimensions.width]);
+};
+
+const StyledLeadGenLightBoxBFooter = styled.div `
+  padding-top: calc(var(--spacing-y, 20px) * 8 / 20);
+  padding-inline: var(--spacing-x, 20px);
+  padding-bottom: var(--spacing-y, 20px);
+`;
+const StyledLeadGenLightBoxBBody = styled.div `
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding-inline: var(--spacing-y, 20px);
+  padding-block: calc(var(--spacing-x, 20px) * 8 / 20);
+  &::-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;
+  }
+`;
+const StyledLeadGenLightBoxBHeader = styled.div `
+  display: flex;
+  padding-top: var(--spacing-y, 20px);
+  padding-inline: var(--spacing-x, 20px);
+  padding-bottom: calc(var(--spacing-y, 20px) * 8 / 20);
+`;
+const StyledLeadGenLightBoxBWrapper = styled.div `
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+const StyledLeadGenLightBoxB = styled.div `
+  --spacing-x: 20px;
+  --spacing-y: 20px;
+  --close-width: 24px;
+  --close-height: 24px;
+
+  // For old version, Wrap every thing in children
+  &[data-type='LightBoxB_typeA'] {
+    height: 100%;
+    width: 100%;
+    .leadgen-wrapper,
+    .leadgen-inner,
+    .leadgen-form {
+      height: 100%;
+    }
+    .leadgen-content {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    .leadgen-header {
+      display: none;
+    }
+    .leadgen-title {
+      padding-right: calc(var(--close-width, 24px) * 50 / 24);
+    }
+    .leadgen-description {
+      display: none;
+    }
+    .leadgen-body {
+      flex: 1;
+      min-height: 0;
+    }
+
+    .leadgen-close_btn {
+      top: var(--spacing-y, 20px);
+      right: var(--spacing-x, 20px);
+      width: var(--close-width, 24px) !important;
+      height: var(--close-height, 24px);
+      box-shadow: none;
+      font-size: 24px;
+    }
+
+    .leadgen-empty_footer {
+      .leadgen-btn {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+
+    .leadgen-form_body {
+      overflow: auto;
+      animation: scrolling forwards;
+      animation-timeline: scroll(self);
+    }
+    @keyframes scrolling {
+      0%,
+      to {
+        border-bottom: 1px solid ${theme.colors.neutral100};
+      }
+    }
+  }
+`;
+const StyledMotionContainer = styled(motion.div) `
+  position: fixed;
+  inset: 0;
+  z-index: ${ZINDEX_SSO + 1};
+  background-color: #fff;
+`;
+
+const PREFIX_CLS = 'LightBoxB_typeA';
+const DURATION = 1000 * 0.5;
+const DRAWER_STYLE = {
+    visible: {
+        opacity: 1,
+        translateY: '0px',
+        transitionProperty: 'translate',
+        transitionDuration: '0.25s',
+    },
+    hidden: {
+        opacity: 0,
+        translateY: '100%',
+        transitionProperty: 'translate',
+        transitionDuration: '0.25s',
+    },
+};
+const LeadGenLightBoxBTypeA = (props) => {
+    const { visible, onVisible, icon, title, buttonText, blocks, children } = props, restProps = __rest(props, ["visible", "onVisible", "icon", "title", "buttonText", "blocks", "children"]);
+    const formRef = useRef();
+    const [open, setOpen] = useState(visible);
+    const { height } = useViewportDimensions();
+    usePreventScroll();
+    const onOpenChange = useCallback((open) => {
+        if (!open) {
+            // Wait for duration of animation
+            setTimeout(() => {
+                onVisible === null || onVisible === void 0 ? void 0 : onVisible(open);
+            }, DURATION);
+            return;
+        }
+        onVisible === null || onVisible === void 0 ? void 0 : onVisible(open);
+    }, [onVisible]);
+    const iconComp = useMemo(() => {
+        if (!icon) {
+            return null;
+        }
+        return React__default.createElement(React__default.Fragment, null);
+    }, [icon]);
+    const titleComp = useMemo(() => {
+        if (!title) {
+            return null;
+        }
+        return title;
+    }, [title]);
+    const childrenComp = useMemo(() => {
+        if (children) {
+            return children;
+        }
+        return (React__default.createElement(StyledLeadGenLightBoxBWrapper, { className: `${PREFIX_CLS}_wrapper lightboxB_wrapper` },
+            React__default.createElement(StyledLeadGenLightBoxBHeader, { className: `${PREFIX_CLS}_header lightboxB_header` },
+                React__default.createElement("div", { className: "lightBoxB_header_icon" }, iconComp),
+                React__default.createElement("div", { className: "lightBoxB_header_title" }, titleComp),
+                React__default.createElement("div", { className: "lightBoxB_header_close", onClick: () => onOpenChange(false) },
+                    React__default.createElement(CloseButton, null))),
+            React__default.createElement(StyledLeadGenLightBoxBBody, { className: `${PREFIX_CLS}_body lightboxB_body` },
+                React__default.createElement(LeadGenForm, Object.assign({ ref: formRef, blocks: blocks }, restProps))),
+            React__default.createElement(StyledLeadGenLightBoxBFooter, { className: `${PREFIX_CLS}_footer lightboxB_footer` },
+                React__default.createElement(Button, { onClick: () => { var _a; return (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit(); } }, buttonText))));
+    }, [children, onOpenChange]);
+    useEffect(() => {
+        setOpen(visible);
+    }, [visible]);
+    return (React__default.createElement(StyledMotionContainer, { animate: open ? 'visible' : 'hidden', variants: DRAWER_STYLE },
+        React__default.createElement(StyledLeadGenLightBoxB, { "data-type": "LightBoxB_typeA", style: height ? { maxHeight: height } : undefined }, childrenComp)));
+};
+
+const LeadGenLightBoxB = (props) => {
+    return React__default.createElement(LeadGenLightBoxBTypeA, Object.assign({}, props));
+};
+
 const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
     const { primaryColor } = useContext(LeadGenContext$1);
     const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
@@ -3662,6 +4197,7 @@ const StyledTextFieldContainer = styled.div `
       outline: none !important;
       border: none;
       box-shadow: none;
+      font-size: var(--input, 15px);
       padding: 0 var(--phone-input-space-x, 8px);
       opacity: 0;
       color: ${theme.colors.gray800} !important;
@@ -3781,17 +4317,22 @@ const TextField = (props) => {
         onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
     });
     const [shrink, setShrink] = useState(shrinkProps);
+    const focusInput = (target) => {
+        const $textEl = target.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
+        const $focusEl = $textEl.item($textEl.length - 1);
+        if ($focusEl) {
+            $focusEl.focus({ preventScroll: true });
+        }
+    };
     const onClick = useCallback((e) => {
-        setShrink(true);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
         if (shrink) {
+            e.preventDefault();
+            focusInput(e.currentTarget);
             return;
         }
-        const $textEl = e.currentTarget.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
-        const $focusEl = $textEl.item($textEl.length - 1);
-        if ($focusEl) {
-            $focusEl.focus();
-        }
+        setShrink(true);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
+        focusInput(e.currentTarget);
     }, [shrink]);
     useEffect(() => {
         setShrink(shrinkProps);
@@ -3818,7 +4359,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
     return (React__default.createElement(React__default.Fragment, null, listBlockAdded.map((b, index) => {
         var _a;
         const { name = '', data = {}, id } = b || {};
-        const { placeholder, value, align, listQuestion, isSendMailChimp = false, newtab, url, } = data;
+        const { placeholder: label, value, align, listQuestion, isSendMailChimp = false, newtab, url, } = data;
         const required = (_a = data.required) !== null && _a !== void 0 ? _a : true;
         const formValue = (formValues === null || formValues === void 0 ? void 0 : formValues[value]) || null;
         switch (name) {
@@ -3828,23 +4369,23 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 return (React__default.createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, 
+                    React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChangeRaw={(e) => inputOnChange('text', e)}
-                        label: placeholder, "data-control": "text", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "text", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'NumberBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(NumberInput$1, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, 
+                    React__default.createElement(NumberInput$1, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChange={(e) => inputOnChange('number', e)}
-                        label: placeholder, "data-control": "number", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "number", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'EmailBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
                         // type="email"
-                        placeholder: placeholder, 
+                        placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: placeholder, "data-control": "email", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "email", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -3854,19 +4395,19 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: clsx('lead-modal__form-control leadgen-form_field', {
                         'leadgen-form_field_error': !!error,
                     }) },
-                    React__default.createElement(Input$1.Wrapper, { size: "md", withAsterisk: required, label: placeholder, "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
+                    React__default.createElement(Input$1.Wrapper, { size: "md", withAsterisk: required, label: label, "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
                         React__default.createElement("div", { className: "mantine-Input-wrapper" },
-                            React__default.createElement(Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, 
+                            React__default.createElement(Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: " ", 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
                                 id: htmlForId, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" }, formPhoneInputWrapper))))));
             }
             case 'LocationBlock': {
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: placeholder, label: placeholder, "data-control": "text", locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                    React__default.createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: label, "data-control": "text", locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             }
             case 'DateBlock': {
                 const _c = form.getInputProps(value), { error } = _c, formInputProps = __rest(_c, ["error"]);
-                return (React__default.createElement(Input$1.Wrapper, { key: index, size: "md", withAsterisk: required, label: placeholder, "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error, className: "lead-modal__form-control leadgen-form_field" },
+                return (React__default.createElement(Input$1.Wrapper, { key: index, size: "md", withAsterisk: required, label: label, "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error, className: "lead-modal__form-control leadgen-form_field" },
                     React__default.createElement(InputDate, Object.assign({ name: value, error: Boolean(error), locale: locale, "data-extra": true, "data-name": value, "data-control": "date", className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
             }
             case 'LinkButtonBlock':
@@ -3883,7 +4424,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         }, "data-name": value + '-mailchimp' })),
                     React__default.createElement(Checkbox.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: placeholder, size: "md", sx: {
+                        label: label, size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             flexWrap: 'wrap',
@@ -3896,20 +4437,41 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     isSendMailChimp && (React__default.createElement(Input$1, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
                     React__default.createElement(Radio.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: placeholder, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
+                        label: label, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
                         } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
             case 'DropdownBlock':
-                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field", key: index },
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index },
                     React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
                     React__default.createElement(Select
                     // className="lead-modal__form-control leadgen-form_field"
                     , Object.assign({ 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: placeholder, placeholder: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
+                        label: label, placeholder: " ", searchable: true, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
                             label: l.placeholder,
-                        })) }, form.getInputProps(value)))));
+                        })), nothingFound: React__default.createElement(NoData, null), styles: {
+                            item: {
+                                paddingBlock: 12,
+                                paddingInline: 10,
+                                fontSize: 16,
+                                lineHeight: 1.5,
+                            },
+                            nothingFound: {
+                                fontSize: 54,
+                                paddingBlock: 30,
+                            },
+                            itemsWrapper: {
+                                padding: 6,
+                            },
+                            dropdown: {
+                                '.mantine-ScrollArea-scrollbar[data-orientation="vertical"]': {
+                                    '--radix-scroll-area-thumb-width': '6px',
+                                    width: 'var(--radix-scroll-area-thumb-width)',
+                                    paddingInline: 0,
+                                },
+                            },
+                        }, maxDropdownHeight: 192 }, form.getInputProps(value)))));
             case 'TncBlock':
                 const _d = form.getInputProps(`TNC-${id}`), { error } = _d, tncInputProps = __rest(_d, ["error"]);
                 return (React__default.createElement(ChoiceField, { className: "leadgen-form_checkbox", key: id },
@@ -4169,7 +4731,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const [open, setOpen] = useState(!!campaignId);
     const [showOtpPhone, setShowOtpPhone] = useState(null);
     const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    const [snap, setSnap] = useState(0.8);
+    // const [snap, setSnap] = useState<string | number | null>(0.8)
     const formRef = useRef();
     const onClose = () => {
         if (showOtpPhone) {
@@ -4179,6 +4741,8 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
             onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
         }
     };
+    const { height } = useViewportDimensions();
+    usePreventScroll();
     const textBlocks = JSON.parse(extraFields.textBlocks);
     const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
     const actionBlocks = JSON.parse(extraFields.actionBlocks);
@@ -4237,10 +4801,46 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     }, [...listBlockAddedRequired.map((k) => form.values[k])]);
     const onFocus = (e) => {
         e.preventDefault();
-        setTimeout(() => {
-            const target = e.target;
-            target.scrollIntoView({ block: 'center', behavior: 'auto' });
-        }, 300); // Wait a bit to let keyboard open
+        function scrollIntoView() {
+            const $Input = e.target;
+            const $TextField = $Input.closest('.leadgen-form_field');
+            const scrollIntoView = {
+                block: 'center',
+                behavior: 'auto',
+            };
+            if ($TextField.classList.contains('DropdownBlock')) {
+                scrollIntoView.block = 'start';
+                const tfOffsetTop = ($TextField === null || $TextField === void 0 ? void 0 : $TextField.offsetTop) || 0;
+                const tfHeight = $TextField.clientHeight;
+                const $ScrollableElement = getParentScroll($TextField);
+                if ($ScrollableElement) {
+                    // https://hhgdev.atlassian.net/browse/EL-682
+                    const scrollHeight = $ScrollableElement.scrollHeight;
+                    if (scrollHeight - (tfOffsetTop + tfHeight) < 192) {
+                        scrollIntoView.block = 'end';
+                    }
+                }
+            }
+            if (isMobile) {
+                window.scrollTo(0, 0);
+            }
+            $TextField.scrollIntoView(scrollIntoView);
+        }
+        let time = 0;
+        function requestFrame(timestamp) {
+            if (time === 0) {
+                time = timestamp;
+            }
+            if (timestamp - time <= 250) {
+                requestAnimationFrame(requestFrame);
+            }
+            else {
+                scrollIntoView();
+            }
+        }
+        if (isMobile) {
+            requestAnimationFrame(requestFrame);
+        }
     };
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
@@ -4388,18 +4988,24 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         'leadgen-inline': isInPage,
         'leadgen-slider': isSlider,
     });
-    const PopupContainer = isDrawer ? (
-    // <LeadGenLightBoxB
-    //   form={form}
-    //   loading={isSubmitLoading}
-    //   visible={open}
-    //   onVisible={() => onOpenChange(false)}
+    const PopupContainer = isDrawer ? (React__default.createElement(LeadGenLightBoxB, { form: form, loading: isSubmitLoading, visible: open, onVisible: () => onOpenChange(false) }, PopupWrapper)) : (
+    // <DrawerComponent
+    //   fadeFromIndex={ZINDEX_SSO - 9e6}
+    //   open={open}
+    //   snapPoints={[0.8, 1]}
+    //   activeSnapPoint={snap}
+    //   setActiveSnapPoint={setSnap}
+    //   onOpenChange={onOpenChange}
+    //   overlayClassName={popupContainerClassName}
+    //   className="leadgen-drawer"
     // >
     //   {PopupWrapper}
-    // </LeadGenLightBoxB>
-    React__default.createElement(DrawerComponent, { fadeFromIndex: ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
-        PopupWrapper,
-        React__default.createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
+    //   <div
+    //     style={{ position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }}
+    //     onClick={() => setSnap(1)}
+    //   />
+    // </DrawerComponent>
+    React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName, style: isMobile ? { maxHeight: height } : undefined },
         isFullscreen ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
                 aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
             } })) : null,