@hhgtech/hhg-components 1.29.332-beta-19 → 1.29.332-beta-21

package/build/esm/lead.js

@@ -1,43 +1,44 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-81758345.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-131419c4.js';
 import React__default, { createContext, useEffect, useMemo, useRef, useState, useContext, useCallback } from 'react';
-import { createStyles, Box, clsx, Button as Button$2, Portal, Transition, Overlay } from '@mantine/core';
+import { createStyles, Box, Autocomplete, clsx, Input as Input$1, TextInput, NumberInput as NumberInput$1, Button as Button$2, Portal, Transition, Overlay } from '@mantine/core';
 import dayjs from 'dayjs';
 import debounce from 'lodash/debounce';
 import { createFormContext } from '@mantine/form';
-import { u as useTranslations } from './index-5d14bbc9.js';
-import { T as Text } from './index-d1575da4.js';
-import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput } from './index-71e1e862.js';
-import { D as DatePicker } from './index-d59ffd37.js';
-import { M as MAPPED_LOCALE } from './utils-6e6c9bbd.js';
+import { u as useTranslations } from './index-84e4a633.js';
+import { T as Text } from './index-0085d8fd.js';
+import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput } from './index-83f1338f.js';
+import { D as DatePicker } from './index-6e97e676.js';
+import { M as MAPPED_LOCALE } from './utils-17f54d4b.js';
 import '@mantine/dates';
-import { Z as ZINDEX_SSO } from './index-4b651cda.js';
-import './index-44e23c8f.js';
-import { C as CommonGAssets } from './index-d3b35056.js';
-import './useMantineLocale-d97ab5e8.js';
-import { B as Button$1 } from './index-065ab591.js';
-import './index.styles-3cd93bde.js';
-import { T as TranslationsContext } from './translationsContext-be700bd3.js';
-import '@mantine/hooks';
-import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-2c24278b.js';
-import './other-5e819c05.js';
-import './index-10222a3a.js';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-33fe6e61.js';
-import { B as Button } from './index-ed3ae820.js';
-import { H as Heading$1 } from './index-4560e22e.js';
+import { Z as ZINDEX_SSO } from './index-b1e35b3c.js';
+import './index-eab04086.js';
+import { C as CommonGAssets } from './index-94b640dd.js';
+import './useMantineLocale-91478a7c.js';
+import { B as Button$1 } from './index-8c681e92.js';
+import './index.styles-611b1679.js';
+import { T as TranslationsContext } from './translationsContext-00a2d58f.js';
+import { useClickOutside } from '@mantine/hooks';
+import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-7345a787.js';
+import './other-4842a3eb.js';
+import './index-74e129fb.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-a4c9d778.js';
+import { B as Button } from './index-27e25ad4.js';
+import { H as Heading$1 } from './index-1be81d28.js';
 import { v1 } from 'uuid';
-import { i as isVideo } from './index-2484a678.js';
-import { Drawer } from 'vaul';
-import styled from '@emotion/styled';
-import { u as useScreenSize } from './useScreenSize-ecda29e6.js';
+import { i as isVideo } from './index-9c7be164.js';
+import { D as DrawerComponent } from './index-b96c4f29.js';
+import { u as useScreenSize } from './useScreenSize-3ca10083.js';
 import { createPortal } from 'react-dom';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { C as Close } from './Close-3fb9a539.js';
+import { C as Close } from './Close-7ae54cc9.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
-import './Locale-70d15300.js';
+import './Locale-853d7f76.js';
 import 'classnames';
-import './useUniqueId-ffb6bd76.js';
+import './useUniqueId-ce0322a6.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import 'date-fns/locale';
@@ -45,6 +46,7 @@ import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
 import '@mantine/notifications';
+import 'vaul';
 
 const LeadGenComponentContext = createContext({});
 
@@ -587,7 +589,7 @@ var useStyles$2 = createStyles(() => {
 });
 
 const libraries$1 = ['places'];
-const LocationBlock$1 = ({ name, placeholder, locale, required = true, }) => {
+const LocationBlock = ({ name, placeholder, locale, required = true, }) => {
     var _a;
     const form = useLeadFormContext$1();
     const [searchValue, setSearchValue] = useState('');
@@ -687,7 +689,7 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                         id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })));
             }
             case 'LocationBlock': {
-                return (React__default.createElement(LocationBlock$1, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
+                return (React__default.createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
             }
             case 'DateBlock':
                 return (React__default.createElement(React__default.Fragment, null,
@@ -1328,94 +1330,6 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
 };
 
-const StyledDrawerComponentContent = styled(Drawer.Content) `
-  position: fixed;
-  z-index: ${ZINDEX_SSO + 2};
-  inset: 0;
-  background-color: #fff;
-  outline: none !important;
-
-  &::-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;
-  }
-
-  &[data-vaul-drawer-direction='bottom'] {
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-  }
-
-  &[data-vaul-drawer-direction='top'] {
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-  }
-
-  &[data-vaul-drawer-direction='left'] {
-    border-top-right-radius: 8px;
-    border-bottom-right-radius: 8px;
-  }
-
-  &[data-vaul-drawer-direction='right'] {
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-  }
-`;
-const StyledDrawerComponentOverlay = styled(Drawer.Overlay) `
-  position: fixed;
-  inset: 0;
-  z-index: ${ZINDEX_SSO + 2};
-  width: 100%;
-  max-height: 100%;
-`;
-
-const DrawerComponent = (props) => {
-    const { open: openProps, onOpenChange: onOpenChangeProps, snapPoints, children, overlayClassName, className } = props, restProps = __rest(props, ["open", "onOpenChange", "snapPoints", "children", "overlayClassName", "className"]);
-    const [open, setOpen] = useState(openProps);
-    const [snap, setSnap] = useState(snapPoints ? snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[0] : null);
-    const onOpenChange = useCallback((_open) => {
-        setOpen(_open);
-        onOpenChangeProps === null || onOpenChangeProps === void 0 ? void 0 : onOpenChangeProps(_open);
-    }, [onOpenChangeProps]);
-    const isFullSnapPoint = useMemo(() => {
-        if (snapPoints && snapPoints.length) {
-            return Boolean(snap === snapPoints[snapPoints.length - 1]);
-        }
-        return open;
-    }, [snap, snapPoints]);
-    const mergedProps = useMemo(() => {
-        const _mergedProps = { open, onOpenChange };
-        if (snapPoints && (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.length)) {
-            _mergedProps.snapPoints = snapPoints;
-            _mergedProps.activeSnapPoint = snap;
-            _mergedProps.setActiveSnapPoint = setSnap;
-        }
-        return _mergedProps;
-    }, [open, onOpenChange, snap, setSnap, snapPoints]);
-    useEffect(() => {
-        setOpen(openProps);
-    }, [openProps]);
-    return (React__default.createElement(Drawer.Root, Object.assign({}, restProps, mergedProps),
-        React__default.createElement(Drawer.Portal, null,
-            React__default.createElement(StyledDrawerComponentOverlay, { className: clsx(overlayClassName, 'drawer__overlay', {
-                    drawer__overlay_full: isFullSnapPoint,
-                }) }),
-            React__default.createElement(StyledDrawerComponentContent, { className: clsx(className, 'drawer__content', {
-                    drawer__content_full: isFullSnapPoint,
-                }) },
-                React__default.createElement(Drawer.Handle, { className: "drawer__handle" }),
-                React__default.createElement(Drawer.Title, { style: { display: 'none' } }),
-                children))));
-};
-
 const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
     const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
     if (!imageLoaded)
@@ -1564,6 +1478,52 @@ const SideBarLayout = ({ content }) => {
     return (React__default.createElement(React__default.Fragment, null, targets.map((target) => createPortal(content, getWrapperDomWithSelector(target, 'sidebar-lead-modal-wrapper')))));
 };
 
+const libraries = ['places'];
+const GoogleLocation = (props) => {
+    var _a;
+    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = __rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
+    const [LoadScript, setLoadScript] = useState(null);
+    const [opened, setOpened] = useState(false);
+    const [value, setValue] = useState(defaultValue || valueProps);
+    const [search, setSearch] = useState(null);
+    const { predictions } = usePlacesAutocomplete(search, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
+    const onChangeAutocomplete = useCallback((s) => {
+        setSearch(s);
+        setValue(null);
+    }, [opened]);
+    const onClickItem = useCallback((item) => {
+        setOpened(false);
+        setSearch(null);
+        const predCur = predictions === null || predictions === void 0 ? void 0 : predictions.find(({ description }) => description === item.value);
+        setValue(item.value);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(item.value, predCur === null || predCur === void 0 ? void 0 : predCur.rawData);
+    }, [onChangeProps, predictions]);
+    useEffect(() => {
+        setValue(valueProps);
+    }, [valueProps]);
+    useEffect(() => {
+        var _a, _b, _c;
+        // only load extra google script when not yet loaded
+        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService) && !LoadScript) {
+            import('@react-google-maps/api').then((m) => {
+                setLoadScript(() => m.LoadScript);
+            });
+        }
+    }, []);
+    return (React__default.createElement(Autocomplete, Object.assign({ defaultValue: defaultValue, value: search || value, onChange: onChangeAutocomplete, data: predictions.map((pred) => {
+            return { value: pred.description, label: pred.description };
+        }), filter: () => true, onDropdownClose: () => {
+            if (!value) {
+                setValue(search);
+                onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(search);
+            }
+        }, onItemSubmit: onClickItem, inputWrapperOrder: inputWrapperOrder, inputContainer: (children) => {
+            return (React__default.createElement(React__default.Fragment, null,
+                LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null), style: { width: '100%' } })),
+                children));
+        } }, restProps)));
+};
+
 // You can give context variables any name
 const [LeadFormProvider, useLeadFormContext, useLeadForm] = createFormContext();
 const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], }) => {
@@ -1729,108 +1689,365 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
     return { form, validateObj };
 };
 
-const libraries = ['places'];
-const LocationBlock = ({ name, placeholder, locale, required = true, }) => {
-    var _a;
-    const form = useLeadFormContext();
-    const [searchValue, setSearchValue] = useState('');
-    const [address, setAddress] = useState('');
-    const { predictions } = usePlacesAutocomplete(searchValue, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
-    const [LoadScript, setLoadScript] = useState(null);
-    const [ready, setReady] = useState(false);
-    const randRef = useRef(Math.random().toString(36).substring(7));
-    const options = useMemo(() => {
-        const _opts = predictions.map((p) => {
-            return {
-                value: p.description,
-                label: p.description,
-            };
-        });
-        const isExist = _opts.find((o) => o.value === address);
-        if (!address || isExist) {
-            return _opts;
+const SubtitleBlock = ({ children, align, }) => (React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
+
+const cssInputNotShrink = css `
+  height: 100% !important;
+  min-height: calc(var(--container-height, 56px) * 22 / 56);
+  color: ${theme.colors.gray800};
+  font-size: var(--input, 16px);
+  line-height: calc(var(--container-height, 56px) * 22 / 56);
+  border: none !important;
+  border-radius: 0 !important;
+  outline: none !important;
+  box-shadow: none !important;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0;
+
+  ::placeholder {
+    color: ${theme.colors.gray400};
+  }
+`;
+const cssInputShrink = css `
+  height: auto !important;
+  cursor: text;
+  opacity: 1;
+  transition: 0.1s ease-in-out all;
+`;
+const cssLabelNotShrink = css `
+  position: absolute;
+  top: calc(var(--container-height) / 2);
+  left: var(--space-x, 16px);
+  color: ${theme.colors.gray400};
+  font-size: var(--label-not-shrink, 16px);
+  font-weight: 400;
+  line-height: calc(var(--container-height, 56px) * 18 / 56);
+  margin: 0;
+  z-index: 1;
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition: 0.125s ease-in all;
+`;
+const cssLabelShrink = css `
+  color: ${theme.colors.gray600};
+  font-weight: 600;
+  font-size: var(--label-shrink, 12px);
+  top: calc(var(--container-height) * 7 / 56);
+  transform: none;
+  transition: 0.125s ease-out all;
+`;
+const cssWrapperInputNotShrink = css `
+  min-height: var(--container-height, 56px);
+  display: flex;
+  align-items: flex-end;
+  border: 1px solid ${theme.colors.gray200};
+  border-radius: 8px;
+  background-color: #fff;
+  padding-inline: var(--space-x, 16px);
+  padding-block: var(--space-y-not-shrink, 16px);
+  cursor: pointer;
+  pointer-events: none;
+
+  &:has(input[data-invalid]) {
+    border-color: ${theme.colors.red400};
+  }
+
+  &:has(.mantine-Input-rightSection) {
+    padding-right: var(--container-height, 56px);
+  }
+
+  .mantine-Input-icon {
+    display: none;
+  }
+
+  .mantine-NumberInput-control {
+    border-color: ${theme.colors.gray200};
+  }
+`;
+const cssWrapperInputShrink = css `
+  height: auto;
+  min-height: var(--container-height, 56px);
+  padding-block: var(--space-y-shrink, 7px);
+  cursor: text;
+  pointer-events: auto;
+`;
+const StyledTextFieldContainer = styled.div `
+  --space-x: 16px;
+  --space-y-not-shrink: 16px;
+  --space-y-shrink: 7px;
+  --container-height: 56px;
+  --label-not-shrink: 16px;
+  --label-shrink: 12px;
+  --input: 16px;
+
+  position: relative;
+  min-width: 100px;
+  max-width: 100%;
+  display: inline-block;
+
+  .textField_wrapper {
+    display: inline-block;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  .mantine-InputWrapper-label {
+    ${cssLabelNotShrink}
+  }
+
+  .mantine-Input-wrapper {
+    ${cssWrapperInputNotShrink}
+
+    + .mantine-Popover-dropdown[data-position="bottom-start"] {
+      left: 0 !important;
+    }
+  }
+
+  .mantine-Input-input {
+    ${cssInputNotShrink}
+  }
+
+  &.textField_shrink,
+  &:focus-within {
+    .mantine-InputWrapper-label {
+      ${cssLabelShrink}
+    }
+
+    .mantine-Input-wrapper {
+      ${cssWrapperInputShrink}
+      &.mantine-Select-wrapper {
+        .mantine-Select-rightSection {
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .mantine-Input-input {
+      ${cssInputShrink}
+    }
+
+    &:has(.PhoneInput) {
+      .mantine-InputWrapper-label {
+        left: var(--space-x, 16px);
+      }
+      .PhoneInput {
+        .PhoneInputInput {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .PhoneInput {
+    --phone-select: 75px;
+    --phone-input-space-x: 8px;
+    width: 100%;
+    opacity: 1;
+    border: none;
+    .PhoneInputCountry {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      width: var(--phone-select, 75px);
+    }
+    .PhoneInputInput {
+      flex: 1;
+      min-width: 0;
+      line-height: 1.5;
+      outline: none !important;
+      border: none;
+      box-shadow: none;
+      padding: 0 var(--phone-input-space-x, 8px);
+      opacity: 0;
+      color: ${theme.colors.gray800} !important;
+      :focus {
+        color: ${theme.colors.gray800} !important;
+      }
+    }
+  }
+
+  &:has(.PhoneInput) {
+    .mantine-InputWrapper-label {
+      left: calc(
+        var(--space-x, 16px) + var(--phone-select, 75px) +
+          var(--phone-input-space-x, 8px)
+      );
+    }
+  }
+`;
+const StyledChoiceFieldContainer = styled.div `
+  &.leadgen-form_checkbox,
+  &.leadgen-form_radio {
+    width: 100%;
+  }
+
+  &.leadgen-form_dropdown {
+    width: calc(50% - 12px);
+  }
+
+  .mantine-InputWrapper-root {
+    display: block;
+  }
+
+  .mantine-InputWrapper-label {
+    margin-bottom: 0.5rem;
+    color: ${theme.colors.gray800};
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+  .mantine-Radio-root,
+  .mantine-Checkbox-root {
+    gap: 8px;
+    min-width: calc(50% - 4px);
+
+    input[type='radio'],
+    input[type='checkbox'] {
+      border-color: ${theme.colors.gray600};
+      width: 18px;
+      height: 18px;
+    }
+    input[type='checkbox'] {
+      border-radius: 4px;
+    }
+
+    &[data-checked='true'] {
+      input[type='radio'],
+      input[type='checkbox'] {
+        background-color: white;
+        border-color: ${theme.colors.primary600};
+      }
+    }
+  }
+
+  .mantine-Radio-inner,
+  .mantine-Checkbox-inner {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mantine-Radio-body,
+  .mantine-Checkbox-body {
+    display: flex;
+    align-items: center;
+  }
+
+  .mantine-Radio-label,
+  .mantine-Checkbox-label {
+    padding-left: 8px;
+    color: ${theme.colors.gray800};
+    font-size: 14px;
+    line-height: 1.4;
+    letter-spacing: -0.2px;
+  }
+
+  .leadgen-choiceContainer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 8px;
+  }
+`;
+
+const TextField = (props) => {
+    const { shrink: shrinkProps, onChangeShrink, className, children } = props, restProps = __rest(props, ["shrink", "onChangeShrink", "className", "children"]);
+    const containerRef = useClickOutside(() => {
+        if (shrinkProps) {
+            return;
         }
-        return [{ value: address, label: address }].concat(_opts);
-    }, [predictions, address]);
-    useEffect(() => {
-        var _a, _b, _c;
-        // only load extra google script when not yet loaded
-        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService)) {
-            import('@react-google-maps/api').then((m) => {
-                setLoadScript(() => m.LoadScript);
-                setTimeout(() => {
-                    setReady(true);
-                }, 200);
-            });
+        setShrink(false);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
+    });
+    const [shrink, setShrink] = useState(shrinkProps);
+    const onClick = useCallback((e) => {
+        setShrink(true);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
+        if (shrink) {
+            return;
         }
-        else {
-            setReady(true);
+        const $textEl = e.currentTarget.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
+        const $focusEl = $textEl.item($textEl.length - 1);
+        if ($focusEl) {
+            $focusEl.focus();
         }
-    }, []);
-    if (!ready)
-        return (React__default.createElement("div", { style: {
-                height: 73,
-                width: '100%',
-            } }));
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { style: { display: 'none', width: '100%' }, "data-extra": true, "data-name": name, "data-control": 'text' }, LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null), style: { width: '100%' } }))),
-        React__default.createElement(Select, Object.assign({ className: "lead-modal__form-control", label: placeholder, placeholder: placeholder, withAsterisk: required, name: name, data: options, searchValue: searchValue, onSearchChange: (query) => {
-                setSearchValue(query);
-            }, filter: () => true, clearable: true, searchable: true, onChange: (val) => setAddress(val || ''), icon: React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
-                React__default.createElement("path", { d: "M10 9.792q.605 0 1.032-.427.426-.428.426-1.032 0-.603-.426-1.031A1.4 1.4 0 0 0 10 6.875q-.604 0-1.032.427a1.4 1.4 0 0 0-.426 1.031q0 .604.426 1.032.428.426 1.032.427m0 8.083q-.145 0-.292-.042a.7.7 0 0 1-.27-.145Q6.478 15 5.01 12.708 3.54 10.418 3.54 8.5q0-3.021 1.949-4.823T10 1.875t4.51 1.802q1.95 1.802 1.949 4.823 0 1.917-1.468 4.208-1.47 2.292-4.427 4.98a.7.7 0 0 1-.271.145 1 1 0 0 1-.292.042", fill: "#8C8C8C" })), autoComplete: 'no-auto-complete-' + randRef.current, rightSection: React__default.createElement(React__default.Fragment, null) }, form.getInputProps(name)))));
+    }, [shrink]);
+    useEffect(() => {
+        setShrink(shrinkProps);
+    }, [shrinkProps]);
+    return (React__default.createElement(StyledTextFieldContainer, Object.assign({ shrink: shrink, className: clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps),
+        React__default.createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, children)));
+};
+const ChoiceField = (props) => {
+    const { children, className } = props, restProps = __rest(props, ["children", "className"]);
+    return (React__default.createElement(StyledChoiceFieldContainer, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
 };
 
-const SubtitleBlock = ({ children, align, }) => (React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
-
 const TitleBlock = ({ children, align, }) => (React__default.createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, }) => {
     const form = useLeadFormContext();
+    const formValues = form.values;
     return (React__default.createElement(React__default.Fragment, null, listBlockAdded.map((b, index) => {
         var _a;
         const { name = '', data = {} } = b || {};
         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) {
             case 'TitleBlock':
                 return (React__default.createElement(TitleBlock, { key: index, align: align }, value));
             case 'SubtitleBlock':
                 return (React__default.createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
-                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: "lead-modal__form-control", 
-                    // onChangeRaw={(e) => inputOnChange('text', e)}
-                    label: placeholder, "data-control": "text", name: value }, form.getInputProps(value))));
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
+                    React__default.createElement(TextInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, 
+                        // className="lead-modal__form-control"
+                        // onChangeRaw={(e) => inputOnChange('text', e)}
+                        label: placeholder, "data-control": "text", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'NumberBlock':
-                return (React__default.createElement(NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: "lead-modal__form-control", 
-                    // onChange={(e) => inputOnChange('number', e)}
-                    label: placeholder, "data-control": "number", name: value }, form.getInputProps(value))));
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
+                    React__default.createElement(NumberInput$1, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, 
+                        // className="lead-modal__form-control"
+                        // onChange={(e) => inputOnChange('number', e)}
+                        label: placeholder, "data-control": "number", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'EmailBlock':
-                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
-                    // type="email"
-                    placeholder: placeholder, className: "lead-modal__form-control", label: placeholder, "data-control": "email", name: value }, form.getInputProps(value))));
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
+                    React__default.createElement(TextInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
+                        // type="email"
+                        placeholder: placeholder, 
+                        // className="lead-modal__form-control"
+                        label: placeholder, "data-control": "email", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
             case 'PhoneBlock': {
                 const id = popupId + '-' + value + '-' + index;
-                return (React__default.createElement(Input.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, 
-                    // error={errorField.phone}
-                    className: "lead-modal__form-control", labelProps: {
-                        htmlFor: id,
-                    } }, form.getInputProps(value)),
-                    React__default.createElement(Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, onChange: (v) => {
-                            form.setFieldValue(value, v);
-                        }, 
-                        // onBlur={(e) => inputOnBlur('tel', e)}
-                        id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })));
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
+                    React__default.createElement(Input$1.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, 
+                        // error={errorField.phone}
+                        // className="lead-modal__form-control"
+                        labelProps: {
+                            htmlFor: id,
+                        }, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)),
+                        React__default.createElement("div", { className: "mantine-Input-wrapper" },
+                            React__default.createElement(Phone, { className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, onChange: (v) => {
+                                    form.setFieldValue(value, v);
+                                }, 
+                                // onBlur={(e) => inputOnBlur('tel', e)}
+                                id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })))));
             }
             case 'LocationBlock': {
-                return (React__default.createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
+                    React__default.createElement(GoogleLocation, Object.assign({ withAsterisk: required, key: index, name: value, placeholder: placeholder, label: placeholder, "data-control": "date", locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             }
             case 'DateBlock':
-                return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: "lead-modal__form-control", label: placeholder, "data-control": "date" }, form.getInputProps(value))),
-                    React__default.createElement("input", { type: "hidden", name: value, "data-control": "date" })));
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
+                    React__default.createElement(DatePicker, Object.assign({ clearable: true, withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, label: placeholder, "data-control": "date", inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
                     React__default.createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
@@ -1839,29 +2056,40 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
                             } }, value))));
             case 'CheckboxBlock':
-                return (React__default.createElement(React__default.Fragment, null,
+                return (React__default.createElement(ChoiceField, { className: "leadgen-form_checkbox" },
                     isSendMailChimp && (React__default.createElement("div", { style: {
                             display: 'none',
                         }, "data-name": value + '-mailchimp' })),
-                    React__default.createElement(Checkbox.Group, Object.assign({ withAsterisk: required, className: "lead-modal__form-control", key: index, label: placeholder, size: "md", sx: {
+                    React__default.createElement(Checkbox.Group, Object.assign({ withAsterisk: required, 
+                        // className="lead-modal__form-control"
+                        key: index, label: placeholder, size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
+                            flexWrap: 'wrap',
                             gap: 8,
+                        }, inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
+                            return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
                         } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
             case 'RadioBlock':
-                return (React__default.createElement(React__default.Fragment, null,
-                    isSendMailChimp && (React__default.createElement(Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default.createElement(Radio.Group, Object.assign({ withAsterisk: required, className: "lead-modal__form-control", key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                return (React__default.createElement(ChoiceField, { className: "leadgen-form_radio" },
+                    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"
+                        key: index, 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':
-                return (React__default.createElement(React__default.Fragment, null,
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
                     React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                    React__default.createElement(Select, Object.assign({ key: index, className: "lead-modal__form-control", label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
+                    React__default.createElement(Select, Object.assign({ key: index, 
+                        // className="lead-modal__form-control"
+                        label: placeholder, placeholder: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
                             label: l.placeholder,
                         })) }, form.getInputProps(value)))));
             case 'TncBlock':
                 const tncInputProps = form.getInputProps('TNC-' + b.id);
-                return (React__default.createElement(React__default.Fragment, null,
+                return (React__default.createElement(ChoiceField, { className: "leadgen-form_checkbox" },
                     React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
         }
         return null;
@@ -2047,6 +2275,8 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
         // mark all as touched to allow validation
+        console.log('** RYAN index.tsx 130 form.values : ', form.values);
+        // return
         form.setTouched(Object.keys(validateObj).reduce((acc, cur) => {
             acc[cur] = true;
             return acc;
@@ -2185,7 +2415,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
             }) })),
         PopupContent));
     const styleOverlay = useMemo(() => {
-        let styleContent = `.le-newbuilder-overlay {background-repeat: no-repeat;background-size: cover;}`;
+        let styleContent = `.le-newbuilder-overlay {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
         if (isMobile && imageOverlayMobile) {
             styleContent += `.le-newbuilder-overlay {background-image: url(${imageOverlayMobile});}`;
         }