@hhgtech/hhg-components 1.29.407 → 1.29.409-beta-1

package/build/esm/lead.js

@@ -1,53 +1,53 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-20ac9177.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-aeefc7a9.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 debounce from 'lodash/debounce';
 import { createFormContext, useForm } from '@mantine/form';
 import dayjs from 'dayjs';
-import { B as BEARER_TOKEN_COOKIE } from './index-d72734c0.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-6d9b83b2.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { u as useTranslations } from './index-58b827e5.js';
-import { T as TranslationsContext } from './translationsContext-58e15c77.js';
-import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-8ff50ed6.js';
-import { T as Text } from './index-2c332c13.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-e18cfd4c.js';
-import { D as DatePicker } from './index-f6034f66.js';
-import { B as Button } from './index-ceaf25b1.js';
-import './index.styles-179ee464.js';
+import { u as useTranslations } from './index-8668d502.js';
+import { T as TranslationsContext } from './translationsContext-69738875.js';
+import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-f742b64d.js';
+import { T as Text } from './index-841cfe60.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-02298be6.js';
+import { D as DatePicker } from './index-935a3f76.js';
+import { B as Button } from './index-16f26f8f.js';
+import './index.styles-7fa6faad.js';
 import { useIntersection, useClickOutside } from '@mantine/hooks';
-import './useMantineLocale-ecd3a0dc.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-4c2c3adb.js';
-import './index-812f6290.js';
-import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-22283e00.js';
-import './other-ee5f20a1.js';
-import './index-19e02ce7.js';
-import { M as MAPPED_LOCALE } from './utils-851c0348.js';
+import './useMantineLocale-420c60bd.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-48f9702b.js';
+import './index-6e08f163.js';
+import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-6655f664.js';
+import './other-06759c5d.js';
+import './index-84a8150a.js';
+import { M as MAPPED_LOCALE } from './utils-96542ec7.js';
 import { DateInput } from '@mantine/dates';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-d4c3286c.js';
-import { H as Heading$1 } from './index-a690b782.js';
-import { t as translationsMap$1 } from './translationsProvider-173c0289.js';
-import { L as LOCALE } from './Locale-683c97c6.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-68ff226c.js';
+import { H as Heading$1 } from './index-82a2f147.js';
+import { t as translationsMap$1 } from './translationsProvider-2796cd13.js';
+import { L as LOCALE } from './Locale-3d38f1ed.js';
 import { v1 } from 'uuid';
 import { domainLocales } from './constantsDomainLocales.js';
 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-d407e2ca.js';
-import { i as isVideo } from './index-8013e658.js';
-import { u as useScreenSize } from './useScreenSize-3e1b853b.js';
+import { T as TogetherComponentGlobalContext } from './utils-ed39e941.js';
+import { i as isVideo } from './index-cac99693.js';
+import { u as useScreenSize } from './useScreenSize-5b4c6113.js';
 import { motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
-import { B as Button$2 } from './index-8de84f32.js';
-import { I as InputDate } from './InputDate-02ac2039.js';
-import { D as DrawerComponent } from './index-83f69095.js';
-import { C as Close } from './Close-5af62142.js';
+import { B as Button$2 } from './index-988d1440.js';
+import { I as InputDate } from './InputDate-18d8081a.js';
+import { D as DrawerComponent } from './index-4cf23af9.js';
+import { C as Close } from './Close-46146015.js';
 import './constantsIsProduction.js';
-import './normalizeLink-bc66e172.js';
+import './normalizeLink-325b4617.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-db0157fd.js';
+import './useUniqueId-dc492e98.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import '@mantine/notifications';
@@ -65,11 +65,11 @@ import './i18n-values/vi-VN.js';
 import './i18n-values/vi-VN_MB.js';
 import './i18n-values/zh-SG.js';
 import './i18n-values/zh-TW.js';
-import './index-5fba6d70.js';
+import './index-dea492e2.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-f225f32d.js';
+import './constants-7b145969.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -995,15 +995,15 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'TextBlock':
                 return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChangeRaw={(e) => inputOnChange('text', e)}
-                    label: placeholder, "data-control": "text", "data-lead-control": name, name: value }, form.getInputProps(value))));
+                    label: placeholder, "data-control": "text", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
             case 'NumberBlock':
                 return (React__default.createElement(NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChange={(e) => inputOnChange('number', e)}
-                    label: placeholder, "data-control": "number", "data-lead-control": name, name: value }, form.getInputProps(value))));
+                    label: placeholder, "data-control": "number", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
             case 'EmailBlock':
                 return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
                     // type="email"
-                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", "data-lead-control": name, name: value }, form.getInputProps(value))));
+                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -1018,14 +1018,14 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                             form.setFieldValue(value, v);
                         }, 
                         // onBlur={(e) => inputOnBlur('tel', e)}
-                        id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name })));
+                        id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required })));
             }
             case 'LocationBlock': {
                 return (React__default.createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
             }
             case 'DateBlock':
                 return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", "data-lead-control": name, popoverProps: popoverProps }, form.getInputProps(value))),
+                    React__default.createElement(DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", "data-lead-control": name, "data-is-required": required, popoverProps: popoverProps }, form.getInputProps(value))),
                     React__default.createElement("input", { type: "hidden", name: value, "data-control": "date" })));
             case 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
@@ -1043,14 +1043,14 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }))))));
             case 'RadioBlock':
                 return (React__default.createElement(React__default.Fragment, null,
                     isSendMailChimp && (React__default.createElement(Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default.createElement(Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name }))))));
+                    React__default.createElement(Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name, "data-is-required": required }))))));
             case 'DropdownBlock':
                 return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name }),
+                    React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name, "data-is-required": required }),
                     React__default.createElement(Select, Object.assign({ key: index, className: cx('leadgen-control', classes.control), label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
                             label: l.placeholder,
@@ -1058,7 +1058,7 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'TncBlock':
                 const tncInputProps = form.getInputProps('TNC-' + b.id);
                 return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
+                    React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
         }
         return null;
     })));
@@ -3534,6 +3534,35 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
 };
 
+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]);
+};
+
 function isMac() {
     return testPlatform(/^Mac/);
 }
@@ -3809,35 +3838,6 @@ function isInput(target) {
         (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);
@@ -4574,20 +4574,20 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     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: label, "data-control": "text", "data-lead-control": 'TextBlock', inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value), { name: value }))));
+                        label: label, "data-control": "text", "data-lead-control": name, "data-is-required": required, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value), { name: 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: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChange={(e) => inputOnChange('number', e)}
-                        label: label, "data-control": "number", "data-lead-control": name, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "number", "data-lead-control": name, "data-is-required": required, 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: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, "data-control": "email", "data-lead-control": name, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "email", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -4601,16 +4601,16 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         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: " ", 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
-                                id: htmlForId, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name }, formPhoneInputWrapper))))));
+                                id: htmlForId, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required }, 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: " ", label: label, "data-control": "text", "data-lead-control": name, 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", "data-lead-control": name, "data-is-required": required, 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: 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", "data-lead-control": name, className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
+                    React__default.createElement(InputDate, Object.assign({ name: value, error: Boolean(error), locale: locale, "data-extra": true, "data-name": value, "data-control": "date", "data-lead-control": name, "data-is-required": required, className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
             }
             case 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
@@ -4633,7 +4633,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                             gap: 8,
                         }, 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(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }))))));
             case 'RadioBlock':
                 return (React__default.createElement(ChoiceField, { className: "leadgen-form_radio", key: index },
                     isSendMailChimp && (React__default.createElement(Input$1, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
@@ -4641,10 +4641,10 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         // className="lead-modal__form-control leadgen-form_field"
                         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", "data-lead-control": name }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name, "data-is-required": required }))))));
             case 'DropdownBlock':
                 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', "data-lead-control": name }),
+                    React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name, "data-is-required": required }),
                     React__default.createElement(Select
                     // className="lead-modal__form-control leadgen-form_field"
                     , Object.assign({ 
@@ -4678,7 +4678,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 const _d = form.getInputProps(`TNC-${id}`), { error } = _d, tncInputProps = __rest(_d, ["error"]);
                 return (React__default.createElement(ChoiceField, { className: "leadgen-form_checkbox", key: id },
                     React__default.createElement(Input$1.Wrapper, { error: error },
-                        React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name }, tncInputProps)))));
+                        React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }, tncInputProps)))));
         }
         return null;
     })));
@@ -4953,7 +4953,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         }
     };
     const { height } = useViewportDimensions();
-    usePreventScroll();
+    // usePreventScroll()
     const formActiveTime = useRef(0);
     const textBlocks = JSON.parse(extraFields.textBlocks);
     const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
@@ -5040,47 +5040,8 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         return false;
     }, [...listBlockAddedRequired.map((k) => form.values[k])]);
     const onFocus = (e) => {
-        e.preventDefault();
-        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);
-        }
+        // EL-926 Temporary turn off handling focus form on mobile to fix scrolling bug on lightbox A
+        return false;
     };
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
@@ -5489,7 +5450,7 @@ const formatFormData = (currentForm, formData) => {
     return Object.keys(formData)
         .filter((key) => !!formData[key])
         .map((name) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const value = String(formData[name]);
         const control = ((_a = currentForm
             .querySelector(`*[name="${name}"][data-control]`)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-control')) ||
@@ -5501,6 +5462,11 @@ const formatFormData = (currentForm, formData) => {
             ((_d = currentForm
                 .querySelector(`*[data-extra][data-name="${name}"]`)) === null || _d === void 0 ? void 0 : _d.getAttribute('data-lead-control')) ||
             'text';
+        const isRequired = Boolean(((_e = currentForm
+            .querySelector(`*[name="${name}"][data-is-required]`)) === null || _e === void 0 ? void 0 : _e.getAttribute('data-is-required')) ||
+            ((_f = currentForm
+                .querySelector(`*[data-extra][data-name="${name}"]`)) === null || _f === void 0 ? void 0 : _f.getAttribute('data-is-required')) ||
+            'text');
         const formatedValue = control === 'tel'
             ? window.intlTelInputUtils
                 .formatNumber(String(value), LEAD_LOCALE === null || LEAD_LOCALE === void 0 ? void 0 : LEAD_LOCALE.countryCodeNumber, numberFormatType)
@@ -5513,6 +5479,7 @@ const formatFormData = (currentForm, formData) => {
             value: formatedValue,
             control,
             leadControl,
+            isRequired,
             // is_sent_mailchimp: currentForm.querySelector(
             //   `div[data-name="${i.name}-mailchimp"]`,
             // )
@@ -5543,6 +5510,7 @@ const formatTrackingData = (params) => {
                     field_name: control.key,
                     component_type: curLeadControl,
                     value: control.value,
+                    is_required: control.isRequired,
                 };
             }
         })
@@ -5552,6 +5520,7 @@ const formatTrackingData = (params) => {
                 return {
                     field_name: item.data.value,
                     component_type: item.name,
+                    is_required: item.isRequired,
                 };
             }
         })

package/build/esm/{logoIcon-a7e6e1bc.js → logoIcon-9c7ac465.js}

@@ -1,6 +1,6 @@
 import React__default, { memo, useMemo } from 'react';
-import { C as CommonGAssets } from './index-812f6290.js';
-import { I as ImageWrap } from './useScreenSize-3e1b853b.js';
+import { C as CommonGAssets } from './index-6e08f163.js';
+import { I as ImageWrap } from './useScreenSize-5b4c6113.js';
 
 const _LogoIcon = ({ type, width, height }) => {
     const data = useMemo(() => {

package/build/esm/mantine.js

@@ -1,43 +1,43 @@
-import { g as getMantineThemeOverride, h as StyledTextArea, D as DEBOUNCED_TIME, i as StyledSliderWrapper, j as StyledSlider } from './index-e18cfd4c.js';
-export { k as Accordion, A as Anchor, b as AspectRatio, a as Avatar, B as Breadcrumbs, l as Carousel, c as CentralCarousel, d as Checkbox, e as ChipButton, I as Input, O as OTP, P as Phone, n as Popover, R as Radio, S as Select, m as emotionCache, g as getMantineThemeOverride, t as themeColors } from './index-e18cfd4c.js';
-export { D as DatePicker } from './index-f6034f66.js';
-export { T as Text } from './index-2c332c13.js';
-import { B as Button } from './index-ceaf25b1.js';
-export { B as Button } from './index-ceaf25b1.js';
-export { I as Indicator } from './index-aa7dbca5.js';
+import { g as getMantineThemeOverride, h as StyledTextArea, D as DEBOUNCED_TIME, i as StyledSliderWrapper, j as StyledSlider } from './index-02298be6.js';
+export { k as Accordion, A as Anchor, b as AspectRatio, a as Avatar, B as Breadcrumbs, l as Carousel, c as CentralCarousel, d as Checkbox, e as ChipButton, I as Input, O as OTP, P as Phone, n as Popover, R as Radio, S as Select, m as emotionCache, g as getMantineThemeOverride, t as themeColors } from './index-02298be6.js';
+export { D as DatePicker } from './index-935a3f76.js';
+export { T as Text } from './index-841cfe60.js';
+import { B as Button } from './index-16f26f8f.js';
+export { B as Button } from './index-16f26f8f.js';
+export { I as Indicator } from './index-43ac680d.js';
 import React__default, { useState, useEffect } from 'react';
-export { M as Modal } from './index-f2a59f5a.js';
-import { _ as __rest } from './tslib.es6-20ac9177.js';
+export { M as Modal } from './index-3eed0d0e.js';
+import { _ as __rest } from './tslib.es6-aeefc7a9.js';
 import { MantineProvider as MantineProvider$1, Badge as Badge$1, LoadingOverlay as LoadingOverlay$1, clsx, Title, Text, Button as Button$1 } from '@mantine/core';
 import { theme } from './miscTheme.js';
-export { S as Spoiler } from './index-01973e11.js';
+export { S as Spoiler } from './index-9e69a46c.js';
 import { useDebouncedValue } from '@mantine/hooks';
-export { S as Switch } from './index-b334bedf.js';
-import { u as useMantineLocale, N as NotificationsHandler } from './useMantineLocale-ecd3a0dc.js';
-export { M as MAPPED_LOCALE, g as getHeadingStyles, s as showNotification, u as useMantineLocale } from './useMantineLocale-ecd3a0dc.js';
-export { O as OTHER_THEME_CONFIG } from './other-ee5f20a1.js';
-export { T as Tabs } from './index-19e02ce7.js';
+export { S as Switch } from './index-54f6b6ab.js';
+import { u as useMantineLocale, N as NotificationsHandler } from './useMantineLocale-420c60bd.js';
+export { M as MAPPED_LOCALE, g as getHeadingStyles, s as showNotification, u as useMantineLocale } from './useMantineLocale-420c60bd.js';
+export { O as OTHER_THEME_CONFIG } from './other-06759c5d.js';
+export { T as Tabs } from './index-84a8150a.js';
 import '@hhgtech/icons/other';
-import './index-812f6290.js';
+import './index-6e08f163.js';
 import './constantsDomainLocales.js';
-import './Locale-683c97c6.js';
+import './Locale-3d38f1ed.js';
 import './constantsIsProduction.js';
-import './useScreenSize-3e1b853b.js';
+import './useScreenSize-5b4c6113.js';
 import '@emotion/styled';
-import './utils-8ff50ed6.js';
+import './utils-f742b64d.js';
 import '@mantine/carousel';
-import './index-4c2c3adb.js';
-import './index-22283e00.js';
+import './index-48f9702b.js';
+import './index-6655f664.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import 'classnames';
-import './useUniqueId-db0157fd.js';
+import './useUniqueId-dc492e98.js';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-179ee464.js';
-import './index-58b827e5.js';
-import './translationsContext-58e15c77.js';
+import './index.styles-7fa6faad.js';
+import './index-8668d502.js';
+import './translationsContext-69738875.js';
 import '@mantine/notifications';
 import 'dayjs';
 

package/build/esm/misc.js

@@ -1,35 +1,35 @@
-export { a as ageGenerate, c as convertLocalizedStringToNumber, l as localizeNumberFormat } from './localizeNumberFormat-ef630a3b.js';
-export { h as fadeIn, a as slideInDown, b as slideInLeft, c as slideInRight, s as slideInUp, e as slideOutDown, f as slideOutLeft, g as slideOutRight, d as slideOutUp } from './animation-1e5a5248.js';
+export { a as ageGenerate, c as convertLocalizedStringToNumber, l as localizeNumberFormat } from './localizeNumberFormat-280aab38.js';
+export { h as fadeIn, a as slideInDown, b as slideInLeft, c as slideInRight, s as slideInUp, e as slideOutDown, f as slideOutLeft, g as slideOutRight, d as slideOutUp } from './animation-635bb5c7.js';
 export { deleteCookie, getCookie, setCookie } from './miscCookieHelper.js';
 import 'react';
 import '@mantine/core';
-import './useMantineLocale-ecd3a0dc.js';
-import './index-4c2c3adb.js';
-import './index-812f6290.js';
+import './useMantineLocale-420c60bd.js';
+import './index-48f9702b.js';
+import './index-6e08f163.js';
 export { MBTheme, theme } from './miscTheme.js';
-export { B as Breakpoints, M as MediaQueries, S as Screens, f as formatUrlWithPageParam, g as getBoundariesFromMediaQueryKey, a as getPopupWrapperDom, b as getWrapperDomWithSelector, m as makeParams, c as safeEncodeURI, s as startCase, t as toggleNoScroll } from './utils-8ff50ed6.js';
-import './index-22283e00.js';
-export { a as abbreviateNumber } from './number-cc23e945.js';
-export { d as getCareApiDomain, g as getCurrentBaseUrl, a as getCurrentSsoUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain } from './normalizeLink-bc66e172.js';
+export { B as Breakpoints, M as MediaQueries, S as Screens, f as formatUrlWithPageParam, g as getBoundariesFromMediaQueryKey, a as getPopupWrapperDom, b as getWrapperDomWithSelector, m as makeParams, c as safeEncodeURI, s as startCase, t as toggleNoScroll } from './utils-f742b64d.js';
+import './index-6655f664.js';
+export { a as abbreviateNumber } from './number-80981a2a.js';
+export { d as getCareApiDomain, g as getCurrentBaseUrl, a as getCurrentSsoUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain } from './normalizeLink-325b4617.js';
 export { formatHealthTool, getDynamicHealthTool, getDynamicHealthToolWithCache } from './miscGetDynamicHealthTool.js';
 export { getSocialList } from './miscGetSocialList.js';
 export { ScreenSizeContext, ScreenSizeContextProvider, getWindowSizeGroups } from './miscScreenSizeContext.js';
-export { f as formatPill } from './dataTransform-796848bf.js';
+export { f as formatPill } from './dataTransform-b0f02194.js';
 import 'dayjs';
 import '@emotion/react';
-import './tslib.es6-20ac9177.js';
+import './tslib.es6-aeefc7a9.js';
 import '@mantine/notifications';
-import './other-ee5f20a1.js';
-import './Locale-683c97c6.js';
+import './other-06759c5d.js';
+import './Locale-3d38f1ed.js';
 import './constantsDomainLocales.js';
 import './constantsIsProduction.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
-import './core-d30b924b.js';
-import './WhatsApp-16f72ee0.js';
-import './index-f3d91b03.js';
-import './index-5fba6d70.js';
+import './core-49ae412a.js';
+import './WhatsApp-1ee8e9cb.js';
+import './index-2fbd8dc3.js';
+import './index-dea492e2.js';
 import 'js-cookie';
 import 'uuid';
 import 'lodash/throttle';

package/build/esm/miscGetDynamicHealthTool.js

@@ -1,8 +1,8 @@
-import { a as __awaiter } from './tslib.es6-20ac9177.js';
-import { e as normalizeLinkSlash, c as getDiscoverApiDomain } from './normalizeLink-bc66e172.js';
-import { g as getDataWithCache } from './core-d30b924b.js';
+import { a as __awaiter } from './tslib.es6-aeefc7a9.js';
+import { e as normalizeLinkSlash, c as getDiscoverApiDomain } from './normalizeLink-325b4617.js';
+import { g as getDataWithCache } from './core-49ae412a.js';
 import './constantsDomainLocales.js';
-import './Locale-683c97c6.js';
+import './Locale-3d38f1ed.js';
 import './constantsIsProduction.js';
 
 const formatHealthTool = (healthTool, locale) => {

package/build/esm/miscGetSocialList.js

@@ -1,12 +1,12 @@
 import React__default from 'react';
-import { _ as __rest } from './tslib.es6-20ac9177.js';
-import { W as WhatsApp, I as Instagram } from './WhatsApp-16f72ee0.js';
-import { S as SocialType } from './index-4c2c3adb.js';
-import { g as getHelloSitesUrl } from './index-f3d91b03.js';
-import { C as CommonGAssets } from './index-812f6290.js';
-import { L as LOCALE } from './Locale-683c97c6.js';
-import './index-5fba6d70.js';
-import './index-22283e00.js';
+import { _ as __rest } from './tslib.es6-aeefc7a9.js';
+import { W as WhatsApp, I as Instagram } from './WhatsApp-1ee8e9cb.js';
+import { S as SocialType } from './index-48f9702b.js';
+import { g as getHelloSitesUrl } from './index-2fbd8dc3.js';
+import { C as CommonGAssets } from './index-6e08f163.js';
+import { L as LOCALE } from './Locale-3d38f1ed.js';
+import './index-dea492e2.js';
+import './index-6655f664.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsDomainLocales.js';

package/build/esm/miscScreenSizeContext.js

@@ -1,6 +1,6 @@
 import React__default, { createContext, useState, useEffect, useMemo } from 'react';
 import throttle from 'lodash/throttle';
-import { B as Breakpoints } from './utils-8ff50ed6.js';
+import { B as Breakpoints } from './utils-f742b64d.js';
 
 const ScreenSizeContext = createContext({
     isInit: true,