@hhgtech/hhg-components 1.29.380 → 1.29.381

package/build/esm/lead.js

@@ -1,52 +1,52 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-ea4dfe68.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-685ff3e5.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-235eabf2.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-7ae5d8c5.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { u as useTranslations } from './index-9d21b711.js';
-import { T as TranslationsContext } from './translationsContext-3a9e3453.js';
-import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-cb7242c7.js';
-import { T as Text } from './index-9f5659e8.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-5d405c0d.js';
-import { D as DatePicker } from './index-afb403a9.js';
-import { B as Button } from './index-c68a0fa7.js';
-import './index.styles-770020ac.js';
+import { u as useTranslations } from './index-df429c43.js';
+import { T as TranslationsContext } from './translationsContext-61fd6204.js';
+import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-eabfbcf9.js';
+import { T as Text } from './index-10572fff.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-5c8237e0.js';
+import { D as DatePicker } from './index-66d47a00.js';
+import { B as Button } from './index-2c6b3ac1.js';
+import './index.styles-f2d961c9.js';
 import { useClickOutside } from '@mantine/hooks';
-import './useMantineLocale-0c6bea99.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-90813715.js';
-import './index-ebe66e27.js';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-5e947517.js';
-import './other-4ccb5568.js';
-import './index-c2190f6e.js';
-import { M as MAPPED_LOCALE } from './utils-9b07a6ba.js';
+import './useMantineLocale-5f481890.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-f65d33cf.js';
+import './index-10c2f9cb.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-17cef442.js';
+import './other-1a34bf74.js';
+import './index-00d20a38.js';
+import { M as MAPPED_LOCALE } from './utils-4b1f4911.js';
 import { DateInput } from '@mantine/dates';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-b017462a.js';
-import { H as Heading$1 } from './index-dcc517ff.js';
-import { t as translationsMap$1 } from './translationsProvider-03c8b1ac.js';
-import { L as LOCALE } from './Locale-f270bd9d.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-f6dd9801.js';
+import { H as Heading$1 } from './index-63fd9bb4.js';
+import { t as translationsMap$1 } from './translationsProvider-2bc92759.js';
+import { L as LOCALE } from './Locale-4871b6e8.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-40e61585.js';
-import { i as isVideo } from './index-a7fca99f.js';
-import { D as DrawerComponent } from './index-aebc10a7.js';
-import { u as useScreenSize } from './useScreenSize-981e5b51.js';
+import { T as TogetherComponentGlobalContext } from './utils-a2511d03.js';
+import { i as isVideo } from './index-2b1b8099.js';
+import { u as useScreenSize } from './useScreenSize-107e4476.js';
+import { D as DrawerComponent } from './index-d1628c93.js';
 import { createPortal } from 'react-dom';
-import { B as Button$2 } from './index-6351bdee.js';
-import { I as InputDate } from './InputDate-13f91afd.js';
-import { C as Close } from './Close-ee386937.js';
+import { B as Button$2 } from './index-11973109.js';
+import { I as InputDate } from './InputDate-7ee4e5df.js';
+import { C as Close } from './Close-a47ae421.js';
 import './constantsIsProduction.js';
-import './normalizeLink-593b397a.js';
+import './normalizeLink-023c379c.js';
 import './constantsDomainLocales.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-4305c9aa.js';
+import './useUniqueId-db56acba.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-963a1701.js';
+import './index-f15d5d74.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-f4091ce6.js';
+import './constants-223bc8ca.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -219,6 +219,23 @@ const leadGenFieldNamePhone = (listBlockAdded) => {
     ].includes(name))
         .map(({ data }) => data.value);
 };
+const leadGenFieldRequired = (blocks) => {
+    if (!(blocks === null || blocks === void 0 ? void 0 : blocks.length)) {
+        return [];
+    }
+    return blocks
+        .map(({ data, name, id }) => {
+        const { required, value } = data;
+        if (name === LEADGEN_BLOCK.TncBlock && id) {
+            return `TNC-${id}`;
+        }
+        if (required) {
+            return value;
+        }
+        return;
+    })
+        .filter(Boolean);
+};
 const SSO_MAP_LEAD = ['name', 'email', 'birthday', 'phone', 'gender'];
 const LEAD_LOCALE_DATA = {
     'vi-VN': {
@@ -1956,7 +1973,7 @@ const LeadGenContext = createContext({
     subscriptionTitle: '',
 });
 const LeadGenContextProvider = (props) => {
-    const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryId = 1, siteDomain: site_domain, children, } = props;
+    const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryId = 1, siteDomain: site_domain, children } = props, restProps = __rest(props, ["campaign_code", "apiSsoUrl", "apiLeadUrl", "apiSubotUrl", "locale", "forceCampaign", "extraValues", "articleId", "categoryId", "siteDomain", "children"]);
     const [forceCampaign, setForceCampaign] = useState(forceCampaignProps);
     const [subscriptionInfo, setSubscriptionInfo] = useState({
         subscriptionIcon: '',
@@ -1966,7 +1983,6 @@ const LeadGenContextProvider = (props) => {
     const locale = useMemo(() => {
         return localeProps || LOCALE['PhilippinesEnglish'];
     }, [localeProps]);
-    const leadGenContextValue = useMemo(() => (Object.assign(Object.assign({}, props), { forceCampaign })), [...Object.values(props), forceCampaign]);
     const { url, campaign_id, campaign_code, cookie_id, ga_client_id, category_id, article_id, article_title, } = useMemo(() => ({
         url: location.href.toLowerCase() || '',
         cookie_id: getCookie('hhg-id') || null,
@@ -2013,17 +2029,21 @@ const LeadGenContextProvider = (props) => {
         ga_client_id,
     ]);
     const impression = useCallback((value) => {
-        return Service.campaignPostImpression({
+        const impression = {
             url: (value === null || value === void 0 ? void 0 : value.url) || url,
             action: (value === null || value === void 0 ? void 0 : value.action) || LEADGEN_ACTIONS.SCROLL,
             code: (value === null || value === void 0 ? void 0 : value.code) || campaign_code,
             title_article: (value === null || value === void 0 ? void 0 : value.title_article) || article_title,
             cookie_id: (value === null || value === void 0 ? void 0 : value.cookie_id) || cookie_id,
             ga_client_id: (value === null || value === void 0 ? void 0 : value.ga_client_id) || ga_client_id,
-            extra: (value === null || value === void 0 ? void 0 : value.extra) || Object.assign({ cookie_id,
-                article_id, subscription_title: subscriptionInfo.subscriptionTitle, subscription_type: subscriptionInfo.subscriptionType }, extraValues),
             referrer: value === null || value === void 0 ? void 0 : value.referrer,
-        });
+            extra: Object.assign(Object.assign(Object.assign({}, value === null || value === void 0 ? void 0 : value.extra), { cookie_id,
+                article_id, subscription_title: subscriptionInfo.subscriptionTitle, subscription_type: subscriptionInfo.subscriptionType }), extraValues),
+        };
+        if (!impression.extra.subscription_title) {
+            delete impression.extra.subscription_title;
+        }
+        return Service.campaignPostImpression(impression);
     }, [
         extraValues,
         campaign_id,
@@ -2038,7 +2058,7 @@ const LeadGenContextProvider = (props) => {
     ]);
     useEffect(() => {
         if (forceCampaignProps) {
-            setForceCampaign(forceCampaignProps);
+            setForceCampaign(formatCampaignDetail(forceCampaignProps));
             return;
         }
         /** For Subscription Box */
@@ -2063,7 +2083,7 @@ const LeadGenContextProvider = (props) => {
         if (campaignCodeProps) {
             fetchCampaign(campaignCodeProps);
         }
-    }, [campaignCodeProps, categoryId]);
+    }, [forceCampaignProps, campaignCodeProps, categoryId]);
     useEffect(() => {
         leadStore.apiSsoUrl = apiSsoUrl;
         leadStore.apiLeadUrl = apiLeadUrl;
@@ -2072,14 +2092,19 @@ const LeadGenContextProvider = (props) => {
     if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
         return null;
     }
-    return (React__default.createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, leadGenContextValue), subscriptionInfo), { submit,
+    return (React__default.createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, restProps), subscriptionInfo), { campaign_code: campaignCodeProps, apiSsoUrl,
+            apiLeadUrl,
+            apiSubotUrl, locale: localeProps, extraValues,
+            articleId,
+            categoryId, siteDomain: site_domain, forceCampaign,
+            submit,
             submitSubscriptionBox,
             impression }) },
         React__default.createElement(LeadGenTranslationProvider, { locale: locale }, children)));
 };
 const useLeadGenContext = () => {
     const context = useContext(LeadGenContext);
-    return Object.assign(Object.assign({}, context), { apiLeadUrl: context.apiLeadUrl || leadStore.apiLeadUrl, apiSubotUrl: context.apiSubotUrl || leadStore.apiSubotUrl });
+    return Object.assign(Object.assign({}, context), { apiSsoUrl: context.apiSsoUrl || leadStore.apiSsoUrl, apiLeadUrl: context.apiLeadUrl || leadStore.apiLeadUrl, apiSubotUrl: context.apiSubotUrl || leadStore.apiSubotUrl });
 };
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -2357,10 +2382,17 @@ const StyledLeadGenSubscriptionBoxHeader = styled.div `
     flex: 1;
     min-width: 0;
     color: ${theme.colors.gray900};
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 400;
     line-height: 1.4;
-    letter-spacing: -0.8px;
+    letter-spacing: -0.4px;
+  }
+
+  ${MediaQueries.mbUp} {
+    .leadgen-title {
+      font-size: 18px;
+      letter-spacing: -0.8px;
+    }
   }
 `;
 const StyledLeadGenSubscriptionBox = styled.div `
@@ -2789,13 +2821,6 @@ const TextField$1 = (props) => {
         const $focusEl = $textEl.item($textEl.length - 1);
         if ($focusEl) {
             $focusEl.focus();
-            setTimeout(() => {
-                $focusEl.scrollIntoView({
-                    behavior: 'auto',
-                    block: 'center',
-                    inline: 'start',
-                });
-            }, 100);
         }
     }, [shrink]);
     useEffect(() => {
@@ -3264,6 +3289,155 @@ 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);
@@ -3759,13 +3933,6 @@ const TextField = (props) => {
         const $focusEl = $textEl.item($textEl.length - 1);
         if ($focusEl) {
             $focusEl.focus();
-            setTimeout(() => {
-                $focusEl.scrollIntoView({
-                    behavior: 'auto',
-                    block: 'center',
-                    inline: 'start',
-                });
-            }, 100);
         }
     }, [shrink]);
     useEffect(() => {
@@ -3952,8 +4119,9 @@ const StyledFormContainer = styled.div `
  *
  */
 const FormContainer = (_a) => {
-    var { title, titleAlign, description, descriptionAlign, className, style, children, header, footer } = _a, restProps = __rest(_a, ["title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "header", "footer"]);
+    var { iconComponent, title, titleAlign, description, descriptionAlign, className, style, children, header, footer } = _a, restProps = __rest(_a, ["iconComponent", "title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "header", "footer"]);
     const HeaderContent = (React__default.createElement("div", { className: "leadgen-form_header" },
+        iconComponent,
         React__default.createElement("h2", { title: title, className: "leadgen-title", "data-align": titleAlign }, title),
         !!description && (React__default.createElement("p", { title: description, className: "leadgen-description", "data-align": descriptionAlign, dangerouslySetInnerHTML: { __html: description } }))));
     if (!title && !description) {
@@ -4143,7 +4311,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const [open, setOpen] = useState(!!campaignId);
     const [showOtpPhone, setShowOtpPhone] = useState(null);
     const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    const [snap, setSnap] = useState(0.8);
+    // const [snap, setSnap] = useState<string | number | null>(0.8)
     const formRef = useRef();
     const onClose = () => {
         if (showOtpPhone) {
@@ -4202,6 +4370,20 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         userInfo,
         format: (_a = (ISO_FORMAT[locale] || ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
     });
+    const listBlockAddedRequired = useMemo(() => leadGenFieldRequired(listBlockAdded), listBlockAdded);
+    const disabledButtonSubmit = useMemo(() => {
+        if (listBlockAddedRequired.length) {
+            return listBlockAddedRequired.some((k) => !form.values[k]);
+        }
+        return false;
+    }, [...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
+    };
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
         // mark all as touched to allow validation
@@ -4287,8 +4469,13 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         (isFullscreen ? imageBackgroundLoaded : true);
     const ButtonSubmit = useMemo(() => {
         var _a;
-        return !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default.createElement(Button$1, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: "leadgen-btn leadgen-btn_action", loading: isSubmitLoading }, popUpSubmitText));
-    }, [popUpSubmitText, isSubmitLoading, (_b = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _b === void 0 ? void 0 : _b.isHide]);
+        return !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default.createElement(Button$1, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: "leadgen-btn leadgen-btn_action", color: primaryColor, loading: isSubmitLoading, disabled: disabledButtonSubmit }, popUpSubmitText));
+    }, [
+        popUpSubmitText,
+        isSubmitLoading,
+        disabledButtonSubmit,
+        (_b = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _b === void 0 ? void 0 : _b.isHide,
+    ]);
     const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == LEADGEN_BLOCK.LinkButtonBlock);
     const ButtonLink = !!(LinkButtonBlock === null || LinkButtonBlock === void 0 ? void 0 : LinkButtonBlock.length) && (React__default.createElement(React__default.Fragment, null, LinkButtonBlock.map((item, index) => {
         var _a, _b, _c;
@@ -4302,7 +4489,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         React__default.createElement(HeaderImage, { src: imageMobile, className: "le-only-mobile lead-modal__image" })))));
     const PopupEmpty = showEmpty && (React__default.createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
     const PopupForm = (React__default.createElement(LeadFormProvider, { form: form },
-        React__default.createElement("form", { ref: formRef, className: "leadgen-form", onSubmit: middlewareOnSubmit },
+        React__default.createElement("form", { ref: formRef, className: "leadgen-form", onFocus: onFocus, onSubmit: middlewareOnSubmit },
             React__default.createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
                 React__default.createElement("div", { className: "leadgen-form_inner" },
                     React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
@@ -4343,9 +4530,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         'leadgen-inline': isInPage,
         'leadgen-slider': isSlider,
     });
-    const PopupContainer = isDrawer ? (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 },
+    const PopupContainer = isDrawer ? (React__default.createElement(LeadGenLightBoxB, { form: form, loading: isSubmitLoading, visible: open, onVisible: () => onOpenChange(false) }, PopupWrapper)) : (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,
@@ -4852,7 +5037,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     return (React__default.createElement(LeadGenContext$1.Provider, { value: { primaryColor, apiUrl, siteDomain, siteId, locale } },
         React__default.createElement(TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } }, children ? (React__default.createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }, children)) : (React__default.createElement(Portal, { target: getPopupWrapperDom() },
             React__default.createElement(Box, { sx: { position: 'fixed', zIndex: ZINDEX_SSO - 9e6 } },
-                React__default.createElement(Transition, { mounted: Boolean(((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease" }, (styles) => {
+                React__default.createElement(Transition, { mounted: Boolean(((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease", exitDuration: 200 }, (styles) => {
                     var _a;
                     return (React__default.createElement(Box, { style: styles }, ((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1' && (React__default.createElement(React__default.Fragment, null,
                         !!showCampaign.extra_fields.currentLayout &&

package/build/esm/{logoIcon-ffd3141f.js → logoIcon-07a785f9.js}

@@ -1,6 +1,6 @@
 import React__default, { memo, useMemo } from 'react';
-import { C as CommonGAssets } from './index-ebe66e27.js';
-import { I as ImageWrap } from './useScreenSize-981e5b51.js';
+import { C as CommonGAssets } from './index-10c2f9cb.js';
+import { I as ImageWrap } from './useScreenSize-107e4476.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-5d405c0d.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-5d405c0d.js';
-export { D as DatePicker } from './index-afb403a9.js';
-export { T as Text } from './index-9f5659e8.js';
-import { B as Button } from './index-c68a0fa7.js';
-export { B as Button } from './index-c68a0fa7.js';
-export { I as Indicator } from './index-e77867c5.js';
+import { g as getMantineThemeOverride, h as StyledTextArea, D as DEBOUNCED_TIME, i as StyledSliderWrapper, j as StyledSlider } from './index-5c8237e0.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-5c8237e0.js';
+export { D as DatePicker } from './index-66d47a00.js';
+export { T as Text } from './index-10572fff.js';
+import { B as Button } from './index-2c6b3ac1.js';
+export { B as Button } from './index-2c6b3ac1.js';
+export { I as Indicator } from './index-dedbc357.js';
 import React__default, { useState, useEffect } from 'react';
-export { M as Modal } from './index-5d32e000.js';
-import { _ as __rest } from './tslib.es6-ea4dfe68.js';
+export { M as Modal } from './index-9e32ffdf.js';
+import { _ as __rest } from './tslib.es6-685ff3e5.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-c52eb102.js';
+export { S as Spoiler } from './index-fe32391b.js';
 import { useDebouncedValue } from '@mantine/hooks';
-export { S as Switch } from './index-69c990dc.js';
-import { u as useMantineLocale, N as NotificationsHandler } from './useMantineLocale-0c6bea99.js';
-export { M as MAPPED_LOCALE, g as getHeadingStyles, s as showNotification, u as useMantineLocale } from './useMantineLocale-0c6bea99.js';
-export { O as OTHER_THEME_CONFIG } from './other-4ccb5568.js';
-export { T as Tabs } from './index-c2190f6e.js';
+export { S as Switch } from './index-59de2196.js';
+import { u as useMantineLocale, N as NotificationsHandler } from './useMantineLocale-5f481890.js';
+export { M as MAPPED_LOCALE, g as getHeadingStyles, s as showNotification, u as useMantineLocale } from './useMantineLocale-5f481890.js';
+export { O as OTHER_THEME_CONFIG } from './other-1a34bf74.js';
+export { T as Tabs } from './index-00d20a38.js';
 import '@hhgtech/icons/other';
-import './index-ebe66e27.js';
+import './index-10c2f9cb.js';
 import './constantsDomainLocales.js';
-import './Locale-f270bd9d.js';
+import './Locale-4871b6e8.js';
 import './constantsIsProduction.js';
-import './useScreenSize-981e5b51.js';
+import './useScreenSize-107e4476.js';
 import '@emotion/styled';
-import './utils-cb7242c7.js';
+import './utils-eabfbcf9.js';
 import '@mantine/carousel';
-import './index-90813715.js';
-import './index-5e947517.js';
+import './index-f65d33cf.js';
+import './index-17cef442.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import 'classnames';
-import './useUniqueId-4305c9aa.js';
+import './useUniqueId-db56acba.js';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-770020ac.js';
-import './index-9d21b711.js';
-import './translationsContext-3a9e3453.js';
+import './index.styles-f2d961c9.js';
+import './index-df429c43.js';
+import './translationsContext-61fd6204.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-0dd40cb5.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-acf3c29f.js';
+export { a as ageGenerate, c as convertLocalizedStringToNumber, l as localizeNumberFormat } from './localizeNumberFormat-32158b38.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-aee7e4c4.js';
 export { deleteCookie, getCookie, setCookie } from './miscCookieHelper.js';
 import 'react';
 import '@mantine/core';
-import './useMantineLocale-0c6bea99.js';
-import './index-90813715.js';
-import './index-ebe66e27.js';
+import './useMantineLocale-5f481890.js';
+import './index-f65d33cf.js';
+import './index-10c2f9cb.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-cb7242c7.js';
-import './index-5e947517.js';
-export { a as abbreviateNumber } from './number-8ba8ff38.js';
-export { d as getCareApiDomain, g as getCurrentBaseUrl, a as getCurrentSsoUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain } from './normalizeLink-593b397a.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-eabfbcf9.js';
+import './index-17cef442.js';
+export { a as abbreviateNumber } from './number-d5c181fc.js';
+export { d as getCareApiDomain, g as getCurrentBaseUrl, a as getCurrentSsoUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain } from './normalizeLink-023c379c.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-e0d341d7.js';
+export { f as formatPill } from './dataTransform-e6bbdb47.js';
 import 'dayjs';
 import '@emotion/react';
-import './tslib.es6-ea4dfe68.js';
+import './tslib.es6-685ff3e5.js';
 import '@mantine/notifications';
-import './other-4ccb5568.js';
-import './Locale-f270bd9d.js';
+import './other-1a34bf74.js';
+import './Locale-4871b6e8.js';
 import './constantsDomainLocales.js';
 import './constantsIsProduction.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
-import './core-78466274.js';
-import './WhatsApp-f7a93c46.js';
-import './index-8b24c2ec.js';
-import './index-963a1701.js';
+import './core-f7971361.js';
+import './WhatsApp-5f952030.js';
+import './index-a90040db.js';
+import './index-f15d5d74.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-ea4dfe68.js';
-import { e as normalizeLinkSlash, c as getDiscoverApiDomain } from './normalizeLink-593b397a.js';
-import { g as getDataWithCache } from './core-78466274.js';
+import { a as __awaiter } from './tslib.es6-685ff3e5.js';
+import { e as normalizeLinkSlash, c as getDiscoverApiDomain } from './normalizeLink-023c379c.js';
+import { g as getDataWithCache } from './core-f7971361.js';
 import './constantsDomainLocales.js';
-import './Locale-f270bd9d.js';
+import './Locale-4871b6e8.js';
 import './constantsIsProduction.js';
 
 const formatHealthTool = (healthTool, locale) => {