@hhgtech/hhg-components 1.29.386-beta-4 → 1.29.387

package/build/esm/{labelSorting-3104d4da.js → labelSorting-799313bb.js}

@@ -1,8 +1,8 @@
 import React__default, { useContext } from 'react';
-import { T as Text } from './index-f131af9b.js';
-import './translationsContext-805afb10.js';
-import { T as TogetherComponentGlobalContext } from './utils-d24edb49.js';
-import { L as LabelSortPin, b as TreePopoverMenu } from './treePopoverMenu-98c35572.js';
+import { T as Text } from './index-a41001e5.js';
+import './translationsContext-98c686c8.js';
+import { T as TogetherComponentGlobalContext } from './utils-66ca369c.js';
+import { L as LabelSortPin, b as TreePopoverMenu } from './treePopoverMenu-cebf4eb2.js';
 
 var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath stroke='%233E3F58' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m8 14 4 4 4-4M16 10l-4-4-4 4'/%3e%3c/svg%3e";
 var MBSortBy = img$1;

package/build/esm/lead.js

@@ -1,52 +1,52 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-f3be224f.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-d43b98ec.js';
 import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback, forwardRef, useImperativeHandle, memo } from 'react';
 import { createStyles, Box, Button as Button$1, Input as Input$1, clsx, Autocomplete, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, TextInput, NumberInput as NumberInput$1, Portal, Transition, Overlay } from '@mantine/core';
 import dayjs from 'dayjs';
 import debounce from 'lodash/debounce';
 import { createFormContext, useForm } from '@mantine/form';
-import { B as BEARER_TOKEN_COOKIE } from './index-d0a57138.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-02924564.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { u as useTranslations } from './index-caf84ff5.js';
-import { T as TranslationsContext } from './translationsContext-805afb10.js';
-import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-b06e7278.js';
-import { T as Text } from './index-f131af9b.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-3af53093.js';
-import { D as DatePicker } from './index-b2bef60f.js';
-import { B as Button } from './index-85fe0055.js';
-import './index.styles-0e53fa97.js';
+import { u as useTranslations } from './index-67a509a3.js';
+import { T as TranslationsContext } from './translationsContext-98c686c8.js';
+import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-e2e28d2d.js';
+import { T as Text } from './index-a41001e5.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-23920678.js';
+import { D as DatePicker } from './index-b9cd9384.js';
+import { B as Button } from './index-00c9caac.js';
+import './index.styles-8a5a8379.js';
 import { useClickOutside } from '@mantine/hooks';
-import './useMantineLocale-aae2e16f.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-7f4fe6e6.js';
-import './index-830fd0b9.js';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-db47cb06.js';
-import './other-97e0c02b.js';
-import './index-cd6e9b0a.js';
-import { M as MAPPED_LOCALE } from './utils-dfffe97b.js';
+import './useMantineLocale-e898d879.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-0e536e9a.js';
+import './index-849b60a4.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-fbe69519.js';
+import './other-b518010d.js';
+import './index-d837e83a.js';
+import { M as MAPPED_LOCALE } from './utils-3f4eb2cc.js';
 import { DateInput } from '@mantine/dates';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-d5bb5a22.js';
-import { H as Heading$1 } from './index-4e73bb31.js';
-import { t as translationsMap$1 } from './translationsProvider-1f7d7324.js';
-import { L as LOCALE } from './Locale-8ab47b52.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-42ddf1f5.js';
+import { H as Heading$1 } from './index-e91363cc.js';
+import { t as translationsMap$1 } from './translationsProvider-e0134210.js';
+import { L as LOCALE } from './Locale-c5b574bc.js';
 import { v1 } from 'uuid';
 import { parsePhoneNumber } from 'react-phone-number-input';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { css } from '@emotion/react';
-import { T as TogetherComponentGlobalContext } from './utils-d24edb49.js';
-import { i as isVideo } from './index-29e707b7.js';
-import { u as useScreenSize } from './useScreenSize-0ce9f9a9.js';
-import { D as DrawerComponent } from './index-ac18c225.js';
+import { T as TogetherComponentGlobalContext } from './utils-66ca369c.js';
+import { i as isVideo } from './index-b9f89a6a.js';
+import { u as useScreenSize } from './useScreenSize-9669c065.js';
 import { createPortal } from 'react-dom';
-import { B as Button$2 } from './index-f5c3952f.js';
-import { I as InputDate } from './InputDate-13cee6ea.js';
-import { C as Close } from './Close-f623cd93.js';
+import { B as Button$2 } from './index-a16d3125.js';
+import { I as InputDate } from './InputDate-0bc8cb3a.js';
+import { D as DrawerComponent } from './index-af048425.js';
+import { C as Close } from './Close-4e2feea7.js';
 import './constantsIsProduction.js';
-import './normalizeLink-e742e918.js';
+import './normalizeLink-441b1fa5.js';
 import './constantsDomainLocales.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-863d2020.js';
+import './useUniqueId-3bbc62d3.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import '@mantine/notifications';
@@ -63,11 +63,11 @@ import './i18n-values/tl-PH.js';
 import './i18n-values/vi-VN.js';
 import './i18n-values/vi-VN_MB.js';
 import './i18n-values/zh-TW.js';
-import './index-beeed6d5.js';
+import './index-9524f836.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-04686679.js';
+import './constants-02fba2ad.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -2281,7 +2281,7 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
         }, {});
     }, [listBlockAdded.map((b) => b.name).join(','), format]);
     const form = useLeadForm({
-        validateInputOnChange: false,
+        validateInputOnChange: true,
         validateInputOnBlur: true,
         clearInputErrorOnChange: true,
         validate: validateObj,
@@ -2929,42 +2929,42 @@ const LeadGenForm = forwardRef((props, ref) => {
     return (React__default.createElement("form", { ref: formRef, onSubmit: form.onSubmit(middlewareFinish, middlewareFinishFailed), className: className, style: style },
         React__default.createElement(StyledLeadGenFormInner, { className: "leadgen-form_inputs" }, blocks.map((block, idx) => {
             const { id, name: blockName, data } = block;
-            const { placeholder: label, value: name, required, listQuestion, valueHTML, isSendMailChimp = false, } = data;
+            const { placeholder, value: name, required, listQuestion, valueHTML, isSendMailChimp = false, } = data;
             const formInputProps = form.getInputProps(name);
             const { value, error } = formInputProps;
             const reactKey = `${id}-${idx}`;
             switch (blockName) {
                 case LEADGEN_BLOCK.TextBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
+                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.NumberBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(NumberInput$1, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
+                        React__default.createElement(NumberInput$1, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.EmailBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
+                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.PhoneOtpBlock:
                 case LEADGEN_BLOCK.WhatsappOtpBlock:
                 case LEADGEN_BLOCK.ZaloOtpBlock:
                 case LEADGEN_BLOCK.PhoneBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "text" }, formInputProps))));
+                        React__default.createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "text" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.LocationBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps))));
+                        React__default.createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.DateBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(DateInput, Object.assign({ locale: (MAPPED_LOCALE === null || MAPPED_LOCALE === void 0 ? void 0 : MAPPED_LOCALE[locale]) || MAPPED_LOCALE['vi-VN'], valueFormat: "DD/MM/YYYY", name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "default", "data-control": "date" }, formInputProps))));
+                        React__default.createElement(DateInput, Object.assign({ locale: (MAPPED_LOCALE === null || MAPPED_LOCALE === void 0 ? void 0 : MAPPED_LOCALE[locale]) || MAPPED_LOCALE['vi-VN'], valueFormat: "DD/MM/YYYY", name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "default", "data-control": "date" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.DropdownBlock:
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
                         React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                        React__default.createElement(Select$1, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", data: listQuestion.map((l) => ({
+                        React__default.createElement(Select$1, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, data: listQuestion.map((l) => ({
                                 value: l.value,
                                 label: l.placeholder,
                             })) }, formInputProps))));
@@ -2974,7 +2974,7 @@ const LeadGenForm = forwardRef((props, ref) => {
                     });
                     return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default.createElement(Checkbox$1.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, sx: {
+                        React__default.createElement(Checkbox$1.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, sx: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 flexWrap: 'wrap',
@@ -2986,7 +2986,7 @@ const LeadGenForm = forwardRef((props, ref) => {
                 case LEADGEN_BLOCK.RadioBlock: {
                     return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default.createElement(Radio$1.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
+                        React__default.createElement(Radio$1.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
                                 return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
                             } }, formInputProps), listQuestion.map((l, _index) => (React__default.createElement(Radio$1, { name: name, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
                 }
@@ -3225,14 +3225,6 @@ const CloseButton = ({ onClose, containerClassName, svgClassName, }) => (React__
 const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onClose, onOtherSubmit, }) => {
     const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
     const { width: imageDestkopWidth, height: imageDestkopHeight, loaded: imageDestkopLoaded, } = useImageSize(imageDestkop);
-    useEffect(() => {
-        if (popupId && imageMobileLoaded && imageDestkopLoaded) {
-            document.body.classList.add('noscroll');
-        }
-        return () => {
-            document.body.classList.remove('noscroll');
-        };
-    }, [popupId, imageMobileLoaded, imageDestkopLoaded]);
     if (!imageMobileLoaded || !imageDestkopLoaded)
         return null;
     return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "center_tab" },
@@ -3301,155 +3293,6 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
 };
 
-const StyledLeadGenLightBoxBFooter = styled.div `
-  padding-top: calc(var(--spacing-y, 20px) * 8 / 20);
-  padding-inline: var(--spacing-x, 20px);
-  padding-bottom: var(--spacing-y, 20px);
-`;
-const StyledLeadGenLightBoxBBody = styled.div `
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding-inline: var(--spacing-y, 20px);
-  padding-block: calc(var(--spacing-x, 20px) * 8 / 20);
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.4);
-    border-radius: 6px;
-  }
-`;
-const StyledLeadGenLightBoxBHeader = styled.div `
-  display: flex;
-  padding-top: var(--spacing-y, 20px);
-  padding-inline: var(--spacing-x, 20px);
-  padding-bottom: calc(var(--spacing-y, 20px) * 8 / 20);
-`;
-const StyledLeadGenLightBoxBWrapper = styled.div `
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-`;
-const StyledLeadGenLightBoxB = styled.div `
-  --spacing-x: 20px;
-  --spacing-y: 20px;
-  --close-width: 24px;
-  --close-height: 24px;
-
-  // For old version, Wrap every thing in children
-  &[data-type='LightBoxB_typeA'] {
-    position: fixed;
-    inset: 0;
-    z-index: ${ZINDEX_SSO + 1};
-    background-color: #fff;
-
-    .leadgen-wrapper,
-    .leadgen-inner,
-    .leadgen-form {
-      height: 100%;
-    }
-    .leadgen-content {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-    .leadgen-header {
-      display: none;
-    }
-    .leadgen-title {
-      padding-right: calc(var(--close-width, 24px) * 50 / 24);
-    }
-    .leadgen-description {
-      display: none;
-    }
-    .leadgen-body {
-      flex: 1;
-      min-height: 0;
-    }
-
-    .leadgen-close_btn {
-      top: var(--spacing-y, 20px);
-      right: var(--spacing-x, 20px);
-      width: var(--close-width, 24px) !important;
-      height: var(--close-height, 24px);
-      box-shadow: none;
-      font-size: 24px;
-    }
-
-    .leadgen-empty_footer {
-      .leadgen-btn {
-        flex: 1;
-        min-width: 0;
-      }
-    }
-
-    .leadgen-form_body {
-      overflow: auto;
-      animation: scrolling forwards;
-      animation-timeline: scroll(self);
-    }
-    @keyframes scrolling {
-      0%,
-      to {
-        border-bottom: 1px solid ${theme.colors.neutral100};
-      }
-    }
-  }
-`;
-
-const PREFIX_CLS = 'LightBoxB_typeA';
-const LeadGenLightBoxBTypeA = (props) => {
-    const { visible, onVisible, icon, title, buttonText, blocks, children } = props, restProps = __rest(props, ["visible", "onVisible", "icon", "title", "buttonText", "blocks", "children"]);
-    const formRef = useRef();
-    const [open, setOpen] = useState(visible);
-    const onOpenChange = useCallback((open) => {
-        onVisible === null || onVisible === void 0 ? void 0 : onVisible(open);
-    }, [onVisible]);
-    const iconComp = useMemo(() => {
-        if (!icon) {
-            return null;
-        }
-        return React__default.createElement(React__default.Fragment, null);
-    }, [icon]);
-    const titleComp = useMemo(() => {
-        if (!title) {
-            return null;
-        }
-        return title;
-    }, [title]);
-    const childrenComp = useMemo(() => {
-        if (children) {
-            return children;
-        }
-        return (React__default.createElement(StyledLeadGenLightBoxBWrapper, { className: `${PREFIX_CLS}_wrapper lightboxB_wrapper` },
-            React__default.createElement(StyledLeadGenLightBoxBHeader, { className: `${PREFIX_CLS}_header lightboxB_header` },
-                React__default.createElement("div", { className: "lightBoxB_header_icon" }, iconComp),
-                React__default.createElement("div", { className: "lightBoxB_header_title" }, titleComp),
-                React__default.createElement("div", { className: "lightBoxB_header_close", onClick: () => onOpenChange(false) },
-                    React__default.createElement(CloseButton, null))),
-            React__default.createElement(StyledLeadGenLightBoxBBody, { className: `${PREFIX_CLS}_body lightboxB_body` },
-                React__default.createElement(LeadGenForm, Object.assign({ ref: formRef, blocks: blocks }, restProps))),
-            React__default.createElement(StyledLeadGenLightBoxBFooter, { className: `${PREFIX_CLS}_footer lightboxB_footer` },
-                React__default.createElement(Button, { onClick: () => { var _a; return (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit(); } }, buttonText))));
-    }, [children, onOpenChange]);
-    useEffect(() => {
-        setOpen(visible);
-    }, [visible]);
-    return (React__default.createElement(DrawerComponent, { open: open, onOpenChange: onOpenChange },
-        React__default.createElement(StyledLeadGenLightBoxB, { "data-type": "LightBoxB_typeA" }, childrenComp)));
-};
-
-const LeadGenLightBoxB = (props) => {
-    return React__default.createElement(LeadGenLightBoxBTypeA, Object.assign({}, props));
-};
-
 const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
     const { primaryColor } = useContext(LeadGenContext$1);
     const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
@@ -3975,7 +3818,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
     return (React__default.createElement(React__default.Fragment, null, listBlockAdded.map((b, index) => {
         var _a;
         const { name = '', data = {}, id } = b || {};
-        const { placeholder: label, value, align, listQuestion, isSendMailChimp = false, newtab, url, } = data;
+        const { placeholder, 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) {
@@ -3985,23 +3828,23 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 return (React__default.createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: " ", 
+                    React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChangeRaw={(e) => inputOnChange('text', e)}
-                        label: label, "data-control": "text", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: placeholder, "data-control": "text", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'NumberBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(NumberInput$1, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: " ", 
+                    React__default.createElement(NumberInput$1, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChange={(e) => inputOnChange('number', e)}
-                        label: label, "data-control": "number", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: placeholder, "data-control": "number", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'EmailBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
                         // type="email"
-                        placeholder: " ", 
+                        placeholder: placeholder, 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, "data-control": "email", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: placeholder, "data-control": "email", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -4011,19 +3854,19 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: clsx('lead-modal__form-control leadgen-form_field', {
                         'leadgen-form_field_error': !!error,
                     }) },
-                    React__default.createElement(Input$1.Wrapper, { size: "md", withAsterisk: required, label: label, "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
+                    React__default.createElement(Input$1.Wrapper, { size: "md", withAsterisk: required, label: placeholder, "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
                         React__default.createElement("div", { className: "mantine-Input-wrapper" },
-                            React__default.createElement(Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: " ", 
+                            React__default.createElement(Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
                                 id: htmlForId, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" }, formPhoneInputWrapper))))));
             }
             case 'LocationBlock': {
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: label, "data-control": "text", locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                    React__default.createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: placeholder, label: placeholder, "data-control": "text", locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             }
             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" },
+                return (React__default.createElement(Input$1.Wrapper, { key: index, size: "md", withAsterisk: required, label: placeholder, "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error, className: "lead-modal__form-control leadgen-form_field" },
                     React__default.createElement(InputDate, Object.assign({ name: value, error: Boolean(error), locale: locale, "data-extra": true, "data-name": value, "data-control": "date", className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
             }
             case 'LinkButtonBlock':
@@ -4040,7 +3883,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         }, "data-name": value + '-mailchimp' })),
                     React__default.createElement(Checkbox.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, size: "md", sx: {
+                        label: placeholder, size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             flexWrap: 'wrap',
@@ -4053,7 +3896,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     isSendMailChimp && (React__default.createElement(Input$1, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
                     React__default.createElement(Radio.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
+                        label: placeholder, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
                         } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
             case 'DropdownBlock':
@@ -4063,7 +3906,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     // className="lead-modal__form-control leadgen-form_field"
                     , Object.assign({ 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, placeholder: " ", withAsterisk: required, name: value, data: listQuestion.map((l) => ({
+                        label: placeholder, placeholder: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
                             label: l.placeholder,
                         })) }, form.getInputProps(value)))));
@@ -4326,7 +4169,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const [open, setOpen] = useState(!!campaignId);
     const [showOtpPhone, setShowOtpPhone] = useState(null);
     const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    // const [snap, setSnap] = useState<string | number | null>(0.8)
+    const [snap, setSnap] = useState(0.8);
     const formRef = useRef();
     const onClose = () => {
         if (showOtpPhone) {
@@ -4394,12 +4237,10 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     }, [...listBlockAddedRequired.map((k) => form.values[k])]);
     const onFocus = (e) => {
         e.preventDefault();
-        if (isMobile) {
-            setTimeout(() => {
-                const target = e.target;
-                target.scrollIntoView({ block: 'center', behavior: 'auto' });
-            }, 300); // Wait a bit to let keyboard open
-        }
+        setTimeout(() => {
+            const target = e.target;
+            target.scrollIntoView({ block: 'center', behavior: 'auto' });
+        }, 300); // Wait a bit to let keyboard open
     };
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
@@ -4547,24 +4388,18 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         'leadgen-inline': isInPage,
         'leadgen-slider': isSlider,
     });
-    const PopupContainer = isDrawer ? (React__default.createElement(LeadGenLightBoxB, { form: form, loading: isSubmitLoading, visible: open, onVisible: () => onOpenChange(false) }, PopupWrapper)) : (
-    // <DrawerComponent
-    //   fadeFromIndex={ZINDEX_SSO - 9e6}
-    //   open={open}
-    //   snapPoints={[0.8, 1]}
-    //   activeSnapPoint={snap}
-    //   setActiveSnapPoint={setSnap}
-    //   onOpenChange={onOpenChange}
-    //   overlayClassName={popupContainerClassName}
-    //   className="leadgen-drawer"
+    const PopupContainer = isDrawer ? (
+    // <LeadGenLightBoxB
+    //   form={form}
+    //   loading={isSubmitLoading}
+    //   visible={open}
+    //   onVisible={() => onOpenChange(false)}
     // >
     //   {PopupWrapper}
-    //   <div
-    //     style={{ position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }}
-    //     onClick={() => setSnap(1)}
-    //   />
-    // </DrawerComponent>
-    React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
+    // </LeadGenLightBoxB>
+    React__default.createElement(DrawerComponent, { fadeFromIndex: ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+        PopupWrapper,
+        React__default.createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
         isFullscreen ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
                 aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
             } })) : null,

package/build/esm/{logoIcon-4bc0ff03.js → logoIcon-9977420a.js}

@@ -1,6 +1,6 @@
 import React__default, { memo, useMemo } from 'react';
-import { C as CommonGAssets } from './index-830fd0b9.js';
-import { I as ImageWrap } from './useScreenSize-0ce9f9a9.js';
+import { C as CommonGAssets } from './index-849b60a4.js';
+import { I as ImageWrap } from './useScreenSize-9669c065.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-3af53093.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-3af53093.js';
-export { D as DatePicker } from './index-b2bef60f.js';
-export { T as Text } from './index-f131af9b.js';
-import { B as Button } from './index-85fe0055.js';
-export { B as Button } from './index-85fe0055.js';
-export { I as Indicator } from './index-f670d5c2.js';
+import { g as getMantineThemeOverride, h as StyledTextArea, D as DEBOUNCED_TIME, i as StyledSliderWrapper, j as StyledSlider } from './index-23920678.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-23920678.js';
+export { D as DatePicker } from './index-b9cd9384.js';
+export { T as Text } from './index-a41001e5.js';
+import { B as Button } from './index-00c9caac.js';
+export { B as Button } from './index-00c9caac.js';
+export { I as Indicator } from './index-a0d0e279.js';
 import React__default, { useState, useEffect } from 'react';
-export { M as Modal } from './index-0c2d9a8d.js';
-import { _ as __rest } from './tslib.es6-f3be224f.js';
+export { M as Modal } from './index-b5c906cc.js';
+import { _ as __rest } from './tslib.es6-d43b98ec.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-3704e1fb.js';
+export { S as Spoiler } from './index-d3744ab0.js';
 import { useDebouncedValue } from '@mantine/hooks';
-export { S as Switch } from './index-4c0d0cf1.js';
-import { u as useMantineLocale, N as NotificationsHandler } from './useMantineLocale-aae2e16f.js';
-export { M as MAPPED_LOCALE, g as getHeadingStyles, s as showNotification, u as useMantineLocale } from './useMantineLocale-aae2e16f.js';
-export { O as OTHER_THEME_CONFIG } from './other-97e0c02b.js';
-export { T as Tabs } from './index-cd6e9b0a.js';
+export { S as Switch } from './index-d9021b8d.js';
+import { u as useMantineLocale, N as NotificationsHandler } from './useMantineLocale-e898d879.js';
+export { M as MAPPED_LOCALE, g as getHeadingStyles, s as showNotification, u as useMantineLocale } from './useMantineLocale-e898d879.js';
+export { O as OTHER_THEME_CONFIG } from './other-b518010d.js';
+export { T as Tabs } from './index-d837e83a.js';
 import '@hhgtech/icons/other';
-import './index-830fd0b9.js';
+import './index-849b60a4.js';
 import './constantsDomainLocales.js';
-import './Locale-8ab47b52.js';
+import './Locale-c5b574bc.js';
 import './constantsIsProduction.js';
-import './useScreenSize-0ce9f9a9.js';
+import './useScreenSize-9669c065.js';
 import '@emotion/styled';
-import './utils-b06e7278.js';
+import './utils-e2e28d2d.js';
 import '@mantine/carousel';
-import './index-7f4fe6e6.js';
-import './index-db47cb06.js';
+import './index-0e536e9a.js';
+import './index-fbe69519.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import 'classnames';
-import './useUniqueId-863d2020.js';
+import './useUniqueId-3bbc62d3.js';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-0e53fa97.js';
-import './index-caf84ff5.js';
-import './translationsContext-805afb10.js';
+import './index.styles-8a5a8379.js';
+import './index-67a509a3.js';
+import './translationsContext-98c686c8.js';
 import '@mantine/notifications';
 import 'dayjs';