@hhgtech/hhg-components 1.29.396-beta-6 → 1.29.396-beta-7

package/build/lead.js

@@ -2,55 +2,56 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-2882dc70.js');
+var tslib_es6 = require('./tslib.es6-e137c099.js');
 var React = require('react');
 var core = require('@mantine/core');
 var dayjs = require('dayjs');
 var debounce = require('lodash/debounce');
 var form = require('@mantine/form');
-var index = require('./index-f659e3af.js');
+var index = require('./index-a626843d.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-f5777eb8.js');
-var translationsContext = require('./translationsContext-37095e07.js');
-var utils$1 = require('./utils-d78cd3d4.js');
-var index$2 = require('./index-3038f189.js');
-var index$3 = require('./index-40bd1110.js');
-var index$5 = require('./index-f10754db.js');
-var index$4 = require('./index-d3cbd784.js');
-require('./index.styles-4f2cf904.js');
+var index$1 = require('./index-ff2ec13b.js');
+var translationsContext = require('./translationsContext-bf042531.js');
+var utils$1 = require('./utils-eb06e27e.js');
+var index$2 = require('./index-95db12a6.js');
+var index$3 = require('./index-6a8d1bc8.js');
+var index$5 = require('./index-261136c0.js');
+var index$4 = require('./index-bace5fd6.js');
+require('./index.styles-f7f3fca8.js');
 var hooks = require('@mantine/hooks');
-require('./useMantineLocale-25446606.js');
-var index$9 = require('./index-faf23fa1.js');
-require('./index-b9f18313.js');
-var index$7 = require('./index-8b0b950a.js');
-require('./other-90fce70c.js');
-require('./index-816aeb87.js');
-var utils = require('./utils-8a6e917f.js');
+require('./useMantineLocale-bd657418.js');
+var index$9 = require('./index-2945f7cd.js');
+require('./index-a42a50a4.js');
+var index$7 = require('./index-4d4fa9c6.js');
+require('./other-62cd4f2e.js');
+require('./index-82e8f4e8.js');
+var utils = require('./utils-9deda092.js');
 var dates = require('@mantine/dates');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-4518fbfd.js');
-var index$6 = require('./index-e8475be6.js');
-var translationsProvider = require('./translationsProvider-8cddf99d.js');
-var Locale = require('./Locale-b1656383.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-710ceca1.js');
+var index$6 = require('./index-b883f5a2.js');
+var translationsProvider = require('./translationsProvider-d0347b34.js');
+var Locale = require('./Locale-55b5fb0f.js');
 var uuid = require('uuid');
 var PhoneInputBase = require('react-phone-number-input');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
 var react = require('@emotion/react');
-var togetherComponentGlobalContext = require('./utils-e5507e1e.js');
-var index$8 = require('./index-651abb6d.js');
-var useScreenSize = require('./useScreenSize-11a460a4.js');
+var togetherComponentGlobalContext = require('./utils-b9986d55.js');
+var index$8 = require('./index-42770e30.js');
+var useScreenSize = require('./useScreenSize-cef9e7ae.js');
+var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
-var index$a = require('./index-f5f9daed.js');
-var InputDate = require('./InputDate-b4472335.js');
-var index$b = require('./index-01f773f1.js');
-var Close = require('./Close-3ecefffb.js');
+var index$a = require('./index-b82e3c07.js');
+var InputDate = require('./InputDate-779bfa2a.js');
+var index$b = require('./index-0f33bda5.js');
+var Close = require('./Close-619ec3fa.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-558db6b2.js');
+require('./normalizeLink-3b3ba0a5.js');
 require('./constantsDomainLocales.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-7ee4afd3.js');
+require('./useUniqueId-5dac0bf6.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('@mantine/notifications');
@@ -67,11 +68,11 @@ require('./i18n-values/tl-PH.js');
 require('./i18n-values/vi-VN.js');
 require('./i18n-values/vi-VN_MB.js');
 require('./i18n-values/zh-TW.js');
-require('./index-612ab739.js');
+require('./index-3b9d2da0.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-57205d93.js');
+require('./constants-4dd172d1.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -541,9 +542,9 @@ const getCampaignByCode = (campaign_code) => {
         method: METHOD.GET,
     });
 };
-const getSubscriptionBoxInfo = ({ category, site, }) => {
+const getSubscriptionBoxInfo = ({ category, site, slug, }) => {
     return leadApi.call({
-        url: `${LEADGEN_API_PATH.V2_SUBSCRIPTION_INFO}?category=${category}&site=${site}`,
+        url: `${LEADGEN_API_PATH.V2_SUBSCRIPTION_INFO}?category=${category}&site=${site}&slug=${slug}`,
         method: METHOD.GET,
     });
 };
@@ -2095,6 +2096,7 @@ const LeadGenContextProvider = (props) => {
             Service.getSubscriptionBoxInfo({
                 category: categoryId,
                 site: site_domain,
+                slug: location === null || location === void 0 ? void 0 : location.pathname,
             }).then((res) => {
                 const { _data } = res || {};
                 const { item, campaign_code } = _data || {};
@@ -2310,7 +2312,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,
@@ -2496,6 +2498,66 @@ const PhoneInput = React.forwardRef((props, ref) => {
             React__default["default"].createElement(index$3.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["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["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["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["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["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["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["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["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["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["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["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["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["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["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["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["default"].createElement("defs", null,
+            React__default["default"].createElement("linearGradient", { id: "paint0_linear_2578_27197", x1: "32.6517", y1: "25.3966", x2: "32.6517", y2: "47.1455", gradientUnits: "userSpaceOnUse" },
+                React__default["default"].createElement("stop", { stopColor: "#FDFEFF" }),
+                React__default["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 = tslib_es6.__rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
+    const [LoadScript, setLoadScript] = React.useState(null);
+    const [value, setValue] = React.useState(defaultValue || valueProps);
+    const { predictions } = usePlacesAutocomplete.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 = React.useCallback((s) => {
+        setValue(s);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
+    }, []);
+    const onClickItem = React.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]);
+    React.useEffect(() => {
+        setValue(valueProps);
+    }, [valueProps]);
+    React.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) {
+            Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@react-google-maps/api')); }).then((m) => {
+                setLoadScript(() => m.LoadScript);
+            });
+        }
+    }, []);
+    return (React__default["default"].createElement(core.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: index$7.ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
+            return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                LoadScript && (React__default["default"].createElement(LoadScript, { googleMapsApiKey: usePlacesAutocomplete.GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default["default"].createElement(React__default["default"].Fragment, null), style: { width: '100%' } })),
+                children));
+        } }, restProps)));
+};
+
 const formatLeadGenFormValue = (values, blocks) => {
     const newValues = {};
     for (const block of blocks) {
@@ -2844,17 +2906,22 @@ const TextField$1 = (props) => {
         onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
     });
     const [shrink, setShrink] = React.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 = React.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]);
     React.useEffect(() => {
         setShrink(shrinkProps);
@@ -2867,44 +2934,6 @@ const ChoiceField$1 = (props) => {
     return (React__default["default"].createElement(StyledChoiceFieldContainer$1, Object.assign({ className: core.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 = tslib_es6.__rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
-    const [LoadScript, setLoadScript] = React.useState(null);
-    const [value, setValue] = React.useState(defaultValue || valueProps);
-    const { predictions } = usePlacesAutocomplete.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 = React.useCallback((s) => {
-        setValue(s);
-        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
-    }, []);
-    const onClickItem = React.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]);
-    React.useEffect(() => {
-        setValue(valueProps);
-    }, [valueProps]);
-    React.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) {
-            Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@react-google-maps/api')); }).then((m) => {
-                setLoadScript(() => m.LoadScript);
-            });
-        }
-    }, []);
-    return (React__default["default"].createElement(core.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: index$7.ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
-            return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                LoadScript && (React__default["default"].createElement(LoadScript, { googleMapsApiKey: usePlacesAutocomplete.GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default["default"].createElement(React__default["default"].Fragment, null), style: { width: '100%' } })),
-                children));
-        } }, restProps)));
-};
-
 const LeadGenForm = React.forwardRef((props, ref) => {
     const { locale, blocks, scrollToErrorField = true, form: formProps, rules: validate, initialValues, onFinish, onFinishFailed, className, style, } = props;
     const formRef = React.useRef(null);
@@ -2958,52 +2987,73 @@ const LeadGenForm = React.forwardRef((props, ref) => {
     return (React__default["default"].createElement("form", { ref: formRef, onSubmit: form$1.onSubmit(middlewareFinish, middlewareFinishFailed), className: className, style: style },
         React__default["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$1.getInputProps(name);
             const { value, error } = formInputProps;
             const reactKey = `${id}-${idx}`;
             switch (blockName) {
                 case LEADGEN_BLOCK.TextBlock: {
                     return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(core.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["default"].createElement(core.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["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(core.NumberInput, 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["default"].createElement(core.NumberInput, 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["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(core.TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
+                        React__default["default"].createElement(core.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["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "tel" }, formInputProps))));
+                        React__default["default"].createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "tel" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.LocationBlock: {
                     return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["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["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["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(dates.DateInput, Object.assign({ locale: (utils.MAPPED_LOCALE === null || utils.MAPPED_LOCALE === void 0 ? void 0 : utils.MAPPED_LOCALE[locale]) || utils.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["default"].createElement(dates.DateInput, Object.assign({ locale: (utils.MAPPED_LOCALE === null || utils.MAPPED_LOCALE === void 0 ? void 0 : utils.MAPPED_LOCALE[locale]) || utils.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["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
                         React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                        React__default["default"].createElement(core.Select, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, data: listQuestion.map((l) => ({
+                        React__default["default"].createElement(core.Select, 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["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$1.getInputProps(name, {
                         type: 'checkbox',
                     });
                     return (React__default["default"].createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default["default"].createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default["default"].createElement(core.Checkbox.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, sx: {
+                        React__default["default"].createElement(core.Checkbox.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, sx: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 flexWrap: 'wrap',
@@ -3015,7 +3065,7 @@ const LeadGenForm = React.forwardRef((props, ref) => {
                 case LEADGEN_BLOCK.RadioBlock: {
                     return (React__default["default"].createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default["default"].createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default["default"].createElement(core.Radio.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
+                        React__default["default"].createElement(core.Radio.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
                                 return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
                             } }, formInputProps), listQuestion.map((l, _index) => (React__default["default"].createElement(core.Radio, { name: name, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
                 }
@@ -3634,6 +3684,182 @@ const useViewportDimensions = () => {
     return React.useMemo(() => (Object.assign({}, dimensions)), [dimensions.height, dimensions.width]);
 };
 
+const StyledLeadGenLightBoxBFooter = styled__default["default"].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__default["default"].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__default["default"].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__default["default"].div `
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+const StyledLeadGenLightBoxB = styled__default["default"].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 ${miscTheme.theme.colors.neutral100};
+      }
+    }
+  }
+`;
+const StyledMotionContainer = styled__default["default"](framerMotion.motion.div) `
+  position: fixed;
+  inset: 0;
+  z-index: ${index$7.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 = tslib_es6.__rest(props, ["visible", "onVisible", "icon", "title", "buttonText", "blocks", "children"]);
+    const formRef = React.useRef();
+    const [open, setOpen] = React.useState(visible);
+    const { height } = useViewportDimensions();
+    usePreventScroll();
+    const onOpenChange = React.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 = React.useMemo(() => {
+        if (!icon) {
+            return null;
+        }
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }, [icon]);
+    const titleComp = React.useMemo(() => {
+        if (!title) {
+            return null;
+        }
+        return title;
+    }, [title]);
+    const childrenComp = React.useMemo(() => {
+        if (children) {
+            return children;
+        }
+        return (React__default["default"].createElement(StyledLeadGenLightBoxBWrapper, { className: `${PREFIX_CLS}_wrapper lightboxB_wrapper` },
+            React__default["default"].createElement(StyledLeadGenLightBoxBHeader, { className: `${PREFIX_CLS}_header lightboxB_header` },
+                React__default["default"].createElement("div", { className: "lightBoxB_header_icon" }, iconComp),
+                React__default["default"].createElement("div", { className: "lightBoxB_header_title" }, titleComp),
+                React__default["default"].createElement("div", { className: "lightBoxB_header_close", onClick: () => onOpenChange(false) },
+                    React__default["default"].createElement(CloseButton, null))),
+            React__default["default"].createElement(StyledLeadGenLightBoxBBody, { className: `${PREFIX_CLS}_body lightboxB_body` },
+                React__default["default"].createElement(LeadGenForm, Object.assign({ ref: formRef, blocks: blocks }, restProps))),
+            React__default["default"].createElement(StyledLeadGenLightBoxBFooter, { className: `${PREFIX_CLS}_footer lightboxB_footer` },
+                React__default["default"].createElement(index$4.Button, { onClick: () => { var _a; return (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit(); } }, buttonText))));
+    }, [children, onOpenChange]);
+    React.useEffect(() => {
+        setOpen(visible);
+    }, [visible]);
+    return (React__default["default"].createElement(StyledMotionContainer, { animate: open ? 'visible' : 'hidden', variants: DRAWER_STYLE },
+        React__default["default"].createElement(StyledLeadGenLightBoxB, { "data-type": "LightBoxB_typeA", style: height ? { maxHeight: height } : undefined }, childrenComp)));
+};
+
+const LeadGenLightBoxB = (props) => {
+    return React__default["default"].createElement(LeadGenLightBoxBTypeA, Object.assign({}, props));
+};
+
 const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
     const { primaryColor } = React.useContext(LeadGenContext$1);
     const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
@@ -4003,6 +4229,7 @@ const StyledTextFieldContainer = styled__default["default"].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: ${miscTheme.theme.colors.gray800} !important;
@@ -4122,17 +4349,22 @@ const TextField = (props) => {
         onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
     });
     const [shrink, setShrink] = React.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 = React.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]);
     React.useEffect(() => {
         setShrink(shrinkProps);
@@ -4159,7 +4391,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
     return (React__default["default"].createElement(React__default["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) {
@@ -4169,23 +4401,23 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 return (React__default["default"].createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, 
+                    React__default["default"].createElement(core.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["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(core.NumberInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, 
+                    React__default["default"].createElement(core.NumberInput, 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["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default["default"].createElement(core.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':
@@ -4195,19 +4427,19 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: core.clsx('lead-modal__form-control leadgen-form_field', {
                         'leadgen-form_field_error': !!error,
                     }) },
-                    React__default["default"].createElement(core.Input.Wrapper, { size: "md", withAsterisk: required, label: placeholder, "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
+                    React__default["default"].createElement(core.Input.Wrapper, { size: "md", withAsterisk: required, label: label, "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
                         React__default["default"].createElement("div", { className: "mantine-Input-wrapper" },
-                            React__default["default"].createElement(index$3.Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, 
+                            React__default["default"].createElement(index$3.Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: " ", 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
                                 id: htmlForId, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" }, formPhoneInputWrapper))))));
             }
             case 'LocationBlock': {
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["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["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 = tslib_es6.__rest(_c, ["error"]);
-                return (React__default["default"].createElement(core.Input.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["default"].createElement(core.Input.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["default"].createElement(InputDate.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':
@@ -4224,7 +4456,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         }, "data-name": value + '-mailchimp' })),
                     React__default["default"].createElement(index$3.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',
@@ -4237,20 +4469,41 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     isSendMailChimp && (React__default["default"].createElement(core.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
                     React__default["default"].createElement(index$3.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["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
                         } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
             case 'DropdownBlock':
-                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field", key: index },
+                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index },
                     React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
                     React__default["default"].createElement(index$3.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["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 = tslib_es6.__rest(_d, ["error"]);
                 return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox", key: id },
@@ -4503,7 +4756,8 @@ const LEADGEN_SHOW_HEADER = [
     LEADGEN_LAYOUT.Sidebar,
     LEADGEN_LAYOUT.Slider,
 ];
-const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }) => {
+const CAMPAGE_CODE_LIST_APPLY_NEW_UI = ['ri3lkoxcetjoj39', 'u0adw7hw8kw7t89'];
+const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaignCode, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
     const { primaryColor } = React.useContext(LeadGenContext$1);
     const { isMobile } = useScreenSize.useScreenSize();
@@ -4538,6 +4792,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const isFullscreen = currentLayout === LEADGEN_LAYOUT.Fullscreen;
     const isInPage = isInline || isSidebar;
     const isDrawer = isLightBoxB && isMobile;
+    const isNewUI = React.useMemo(() => CAMPAGE_CODE_LIST_APPLY_NEW_UI.includes(campaignCode), [campaignCode]);
     const limitFieldsLightBoxB = isLightBoxB && listBlockAdded.length <= LEADGEN_LIMIT_LIGHTBOXB;
     const hasForm = isLightBoxA
         ? listBlockAdded.some((item) => LEADGEN_BLOCK_INPUT.some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
@@ -4580,10 +4835,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();
@@ -4731,18 +5022,13 @@ 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)}
-    // >
-    //   {PopupWrapper}
-    // </LeadGenLightBoxB>
-    React__default["default"].createElement(index$b.DrawerComponent, { fadeFromIndex: index$7.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+    const PopupContainer = isDrawer ? (isNewUI ? (React__default["default"].createElement(LeadGenLightBoxB, { form: form, loading: isSubmitLoading, visible: open, onVisible: () => onOpenChange(false) }, PopupWrapper)) : (React__default["default"].createElement(index$b.DrawerComponent, { fadeFromIndex: index$7.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
         PopupWrapper,
-        React__default["default"].createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default["default"].createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName, style: isMobile ? { maxHeight: height } : undefined },
+        React__default["default"].createElement("div", { style: {
+                position: 'absolute',
+                inset: 0,
+                zIndex: snap === 1 ? -1 : 1,
+            }, onClick: () => setSnap(1) })))) : (React__default["default"].createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName, style: isMobile ? { maxHeight: height } : undefined },
         isFullscreen ? (React__default["default"].createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
                 aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
             } })) : null,
@@ -4968,7 +5254,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, local
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Sidebar' ||
         currentLayout == 'Slider') {
-        return (React__default["default"].createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (form, values) => onSubmit(form, values, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }));
+        return (React__default["default"].createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (form, values) => onSubmit(form, values, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaignCode: campaign.code, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }));
     }
     else if (currentLayout.includes('Skin')) {
         return (React__default["default"].createElement(SkinLayout, { popupId: popupIdRef.current, link: actionBlocks.linkButtonBlock.data.url, linkNewTab: !!actionBlocks.linkButtonBlock.data.newtab, linkText: actionBlocks.linkButtonBlock.data.value, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, currentLayout: currentLayout }));