@hhgtech/hhg-components 1.29.381 → 1.29.382-beta-1

package/build/esm/lead.js

@@ -1,52 +1,52 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-685ff3e5.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-482c9a47.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-7ae5d8c5.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-0cbacfb3.js';
 import { getCookie, setCookie } from './miscCookieHelper.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 { u as useTranslations } from './index-591aabe5.js';
+import { T as TranslationsContext } from './translationsContext-5b38097b.js';
+import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-dadce18d.js';
+import { T as Text } from './index-536b8afc.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-58ae4cb8.js';
+import { D as DatePicker } from './index-05e70f45.js';
+import { B as Button } from './index-fdf49043.js';
+import './index.styles-a661d190.js';
 import { useClickOutside } from '@mantine/hooks';
-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 './useMantineLocale-06ddf33f.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-4b901e64.js';
+import './index-50b8d42c.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-8fa916f7.js';
+import './other-65025644.js';
+import './index-451761d0.js';
+import { M as MAPPED_LOCALE } from './utils-091c1931.js';
 import { DateInput } from '@mantine/dates';
-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 { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-e6dcbf67.js';
+import { H as Heading$1 } from './index-78bddc62.js';
+import { t as translationsMap$1 } from './translationsProvider-a9a231de.js';
+import { L as LOCALE } from './Locale-800b69eb.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-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 { T as TogetherComponentGlobalContext } from './utils-b5926372.js';
+import { i as isVideo } from './index-ea2d6ebb.js';
+import { D as DrawerComponent } from './index-64836d69.js';
+import { u as useScreenSize } from './useScreenSize-b81a49c4.js';
 import { createPortal } from 'react-dom';
-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 { B as Button$2 } from './index-7b77fc5b.js';
+import { I as InputDate } from './InputDate-a9fd40c5.js';
+import { C as Close } from './Close-728e2320.js';
 import './constantsIsProduction.js';
-import './normalizeLink-023c379c.js';
+import './normalizeLink-4f5c21a5.js';
 import './constantsDomainLocales.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-db56acba.js';
+import './useUniqueId-21d0106e.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-f15d5d74.js';
+import './index-42c4003e.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-223bc8ca.js';
+import './constants-6b33631b.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -219,23 +219,6 @@ 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': {
@@ -1973,7 +1956,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, restProps = __rest(props, ["campaign_code", "apiSsoUrl", "apiLeadUrl", "apiSubotUrl", "locale", "forceCampaign", "extraValues", "articleId", "categoryId", "siteDomain", "children"]);
+    const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryId = 1, siteDomain: site_domain, children, } = props;
     const [forceCampaign, setForceCampaign] = useState(forceCampaignProps);
     const [subscriptionInfo, setSubscriptionInfo] = useState({
         subscriptionIcon: '',
@@ -1983,6 +1966,7 @@ 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,
@@ -2029,21 +2013,17 @@ const LeadGenContextProvider = (props) => {
         ga_client_id,
     ]);
     const impression = useCallback((value) => {
-        const impression = {
+        return Service.campaignPostImpression({
             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,
@@ -2058,7 +2038,7 @@ const LeadGenContextProvider = (props) => {
     ]);
     useEffect(() => {
         if (forceCampaignProps) {
-            setForceCampaign(formatCampaignDetail(forceCampaignProps));
+            setForceCampaign(forceCampaignProps);
             return;
         }
         /** For Subscription Box */
@@ -2083,7 +2063,7 @@ const LeadGenContextProvider = (props) => {
         if (campaignCodeProps) {
             fetchCampaign(campaignCodeProps);
         }
-    }, [forceCampaignProps, campaignCodeProps, categoryId]);
+    }, [campaignCodeProps, categoryId]);
     useEffect(() => {
         leadStore.apiSsoUrl = apiSsoUrl;
         leadStore.apiLeadUrl = apiLeadUrl;
@@ -2092,19 +2072,14 @@ 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({}, restProps), subscriptionInfo), { campaign_code: campaignCodeProps, apiSsoUrl,
-            apiLeadUrl,
-            apiSubotUrl, locale: localeProps, extraValues,
-            articleId,
-            categoryId, siteDomain: site_domain, forceCampaign,
-            submit,
+    return (React__default.createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, leadGenContextValue), subscriptionInfo), { submit,
             submitSubscriptionBox,
             impression }) },
         React__default.createElement(LeadGenTranslationProvider, { locale: locale }, children)));
 };
 const useLeadGenContext = () => {
     const context = useContext(LeadGenContext);
-    return Object.assign(Object.assign({}, context), { apiSsoUrl: context.apiSsoUrl || leadStore.apiSsoUrl, apiLeadUrl: context.apiLeadUrl || leadStore.apiLeadUrl, apiSubotUrl: context.apiSubotUrl || leadStore.apiSubotUrl });
+    return Object.assign(Object.assign({}, context), { apiLeadUrl: context.apiLeadUrl || leadStore.apiLeadUrl, apiSubotUrl: context.apiSubotUrl || leadStore.apiSubotUrl });
 };
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -2382,17 +2357,10 @@ const StyledLeadGenSubscriptionBoxHeader = styled.div `
     flex: 1;
     min-width: 0;
     color: ${theme.colors.gray900};
-    font-size: 16px;
+    font-size: 18px;
     font-weight: 400;
     line-height: 1.4;
-    letter-spacing: -0.4px;
-  }
-
-  ${MediaQueries.mbUp} {
-    .leadgen-title {
-      font-size: 18px;
-      letter-spacing: -0.8px;
-    }
+    letter-spacing: -0.8px;
   }
 `;
 const StyledLeadGenSubscriptionBox = styled.div `
@@ -2821,6 +2789,13 @@ 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(() => {
@@ -3289,155 +3264,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);
@@ -3933,6 +3759,13 @@ 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(() => {
@@ -4119,9 +3952,8 @@ const StyledFormContainer = styled.div `
  *
  */
 const FormContainer = (_a) => {
-    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"]);
+    var { title, titleAlign, description, descriptionAlign, className, style, children, header, footer } = _a, restProps = __rest(_a, ["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) {
@@ -4311,7 +4143,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) {
@@ -4370,19 +4202,13 @@ 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 target = e.target;
+        target.scrollIntoView({
+            block: 'center',
+            inline: 'nearest',
+            behavior: 'auto',
+        });
     };
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
@@ -4469,13 +4295,8 @@ 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", 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,
-    ]);
+        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]);
     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;
@@ -4530,7 +4351,9 @@ 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)) : (React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
+    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 },
         isFullscreen ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
                 aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
             } })) : null,
@@ -5037,7 +4860,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", exitDuration: 200 }, (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" }, (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-07a785f9.js → logoIcon-ee1c5aec.js}

@@ -1,6 +1,6 @@
 import React__default, { memo, useMemo } from 'react';
-import { C as CommonGAssets } from './index-10c2f9cb.js';
-import { I as ImageWrap } from './useScreenSize-107e4476.js';
+import { C as CommonGAssets } from './index-50b8d42c.js';
+import { I as ImageWrap } from './useScreenSize-b81a49c4.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-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 { g as getMantineThemeOverride, h as StyledTextArea, D as DEBOUNCED_TIME, i as StyledSliderWrapper, j as StyledSlider } from './index-58ae4cb8.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-58ae4cb8.js';
+export { D as DatePicker } from './index-05e70f45.js';
+export { T as Text } from './index-536b8afc.js';
+import { B as Button } from './index-fdf49043.js';
+export { B as Button } from './index-fdf49043.js';
+export { I as Indicator } from './index-32fecc55.js';
 import React__default, { useState, useEffect } from 'react';
-export { M as Modal } from './index-9e32ffdf.js';
-import { _ as __rest } from './tslib.es6-685ff3e5.js';
+export { M as Modal } from './index-89c6da58.js';
+import { _ as __rest } from './tslib.es6-482c9a47.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-fe32391b.js';
+export { S as Spoiler } from './index-6b8a5ac4.js';
 import { useDebouncedValue } from '@mantine/hooks';
-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';
+export { S as Switch } from './index-1bf9b75f.js';
+import { u as useMantineLocale, N as NotificationsHandler } from './useMantineLocale-06ddf33f.js';
+export { M as MAPPED_LOCALE, g as getHeadingStyles, s as showNotification, u as useMantineLocale } from './useMantineLocale-06ddf33f.js';
+export { O as OTHER_THEME_CONFIG } from './other-65025644.js';
+export { T as Tabs } from './index-451761d0.js';
 import '@hhgtech/icons/other';
-import './index-10c2f9cb.js';
+import './index-50b8d42c.js';
 import './constantsDomainLocales.js';
-import './Locale-4871b6e8.js';
+import './Locale-800b69eb.js';
 import './constantsIsProduction.js';
-import './useScreenSize-107e4476.js';
+import './useScreenSize-b81a49c4.js';
 import '@emotion/styled';
-import './utils-eabfbcf9.js';
+import './utils-dadce18d.js';
 import '@mantine/carousel';
-import './index-f65d33cf.js';
-import './index-17cef442.js';
+import './index-4b901e64.js';
+import './index-8fa916f7.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import 'classnames';
-import './useUniqueId-db56acba.js';
+import './useUniqueId-21d0106e.js';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-f2d961c9.js';
-import './index-df429c43.js';
-import './translationsContext-61fd6204.js';
+import './index.styles-a661d190.js';
+import './index-591aabe5.js';
+import './translationsContext-5b38097b.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-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 { a as ageGenerate, c as convertLocalizedStringToNumber, l as localizeNumberFormat } from './localizeNumberFormat-f33de4a2.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-119d094d.js';
 export { deleteCookie, getCookie, setCookie } from './miscCookieHelper.js';
 import 'react';
 import '@mantine/core';
-import './useMantineLocale-5f481890.js';
-import './index-f65d33cf.js';
-import './index-10c2f9cb.js';
+import './useMantineLocale-06ddf33f.js';
+import './index-4b901e64.js';
+import './index-50b8d42c.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-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 { 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-dadce18d.js';
+import './index-8fa916f7.js';
+export { a as abbreviateNumber } from './number-1384caea.js';
+export { d as getCareApiDomain, g as getCurrentBaseUrl, a as getCurrentSsoUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain } from './normalizeLink-4f5c21a5.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-e6bbdb47.js';
+export { f as formatPill } from './dataTransform-7559da35.js';
 import 'dayjs';
 import '@emotion/react';
-import './tslib.es6-685ff3e5.js';
+import './tslib.es6-482c9a47.js';
 import '@mantine/notifications';
-import './other-1a34bf74.js';
-import './Locale-4871b6e8.js';
+import './other-65025644.js';
+import './Locale-800b69eb.js';
 import './constantsDomainLocales.js';
 import './constantsIsProduction.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
-import './core-f7971361.js';
-import './WhatsApp-5f952030.js';
-import './index-a90040db.js';
-import './index-f15d5d74.js';
+import './core-7db11293.js';
+import './WhatsApp-5a80e9cd.js';
+import './index-33354c3e.js';
+import './index-42c4003e.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-685ff3e5.js';
-import { e as normalizeLinkSlash, c as getDiscoverApiDomain } from './normalizeLink-023c379c.js';
-import { g as getDataWithCache } from './core-f7971361.js';
+import { a as __awaiter } from './tslib.es6-482c9a47.js';
+import { e as normalizeLinkSlash, c as getDiscoverApiDomain } from './normalizeLink-4f5c21a5.js';
+import { g as getDataWithCache } from './core-7db11293.js';
 import './constantsDomainLocales.js';
-import './Locale-4871b6e8.js';
+import './Locale-800b69eb.js';
 import './constantsIsProduction.js';
 
 const formatHealthTool = (healthTool, locale) => {