@hhgtech/hhg-components 1.29.420 → 1.29.422

package/build/lead.js

@@ -2,60 +2,60 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-be8ffa66.js');
+var tslib_es6 = require('./tslib.es6-28cc9ba6.js');
 var React = require('react');
 var core = require('@mantine/core');
 var debounce = require('lodash/debounce');
 var form = require('@mantine/form');
 var dayjs = require('dayjs');
-var index = require('./index-42e638ff.js');
+var index = require('./index-acaa93ce.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-ec2fee71.js');
-var translationsContext = require('./translationsContext-1db8dd97.js');
-var utils$1 = require('./utils-abc89637.js');
-var index$2 = require('./index-08577c8d.js');
-var index$3 = require('./index-b933a724.js');
-var index$5 = require('./index-143f0d05.js');
-var index$4 = require('./index-65d76c34.js');
-require('./index.styles-2195db6d.js');
+var index$1 = require('./index-60cac7ff.js');
+var translationsContext = require('./translationsContext-810206a1.js');
+var utils$1 = require('./utils-f733e5ff.js');
+var index$2 = require('./index-daab7fd3.js');
+var index$3 = require('./index-7e29c5a6.js');
+var index$5 = require('./index-39bf2c53.js');
+var index$4 = require('./index-2150a6f4.js');
+require('./index.styles-0781cd6d.js');
 var hooks = require('@mantine/hooks');
-require('./index-21508af0.js');
-var text = require('./text-4e7204f2.js');
-require('./index-2c166dd2.js');
-var utils = require('./utils-6cf18eae.js');
+require('./index-f2de1ac3.js');
+var text = require('./text-dec98bc9.js');
+require('./index-e21711b1.js');
+var utils = require('./utils-7d4c67cb.js');
 var dates = require('@mantine/dates');
-var index$7 = require('./index-34fe84fb.js');
-var index$a = require('./index-72e000d1.js');
-require('./index-e6a7d94d.js');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-ad8b15d4.js');
-var index$6 = require('./index-47901325.js');
-var translationsProvider = require('./translationsProvider-2ba4eee0.js');
-var Locale = require('./Locale-da12b1cd.js');
+var index$7 = require('./index-c93c0698.js');
+var index$b = require('./index-c0ea3ee3.js');
+require('./index-ac9116e4.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-6eb18e3a.js');
+var index$6 = require('./index-112b5b48.js');
+var translationsProvider = require('./translationsProvider-d1fa3306.js');
+var Locale = require('./Locale-e34f5ebf.js');
 var uuid = require('uuid');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var PhoneInputBase = require('react-phone-number-input');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var react = require('@emotion/react');
-var togetherComponentGlobalContext = require('./utils-c0d7ae59.js');
-var index$8 = require('./index-00ee6d74.js');
-var index$9 = require('./index-dd6830e7.js');
-var index$b = require('./index-9de3df3b.js');
+var index$8 = require('./index-a40fb8e3.js');
+var togetherComponentGlobalContext = require('./utils-bae5945a.js');
+var index$9 = require('./index-7693f10a.js');
+var index$a = require('./index-d79216ac.js');
+var index$c = require('./index-f853d61a.js');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
 var arrow = require('@hhgtech/icons/arrow');
 var core$1 = require('@hhgtech/icons/core');
-var InputDate = require('./InputDate-1cde9a62.js');
-var index$c = require('./index-73750ee3.js');
-var Close = require('./Close-efa66cb3.js');
+var InputDate = require('./InputDate-271d8b9d.js');
+var index$d = require('./index-f3afea6b.js');
+var Close = require('./Close-88eb0fbd.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-7e7243da.js');
+require('./normalizeLink-7ae50c8b.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-6fad50ff.js');
+require('./useUniqueId-2231b202.js');
 require('./constantsSite.js');
-require('./shared-ad5cbb92.js');
+require('./shared-545baa9e.js');
 require('@mantine/notifications');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
@@ -71,11 +71,12 @@ require('./i18n-values/vi-VN.js');
 require('./i18n-values/vi-VN_MB.js');
 require('./i18n-values/zh-SG.js');
 require('./i18n-values/zh-TW.js');
-require('./index-e288d0ec.js');
+require('@emotion/react');
+require('./index-c3adec9a.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-d3a16523.js');
+require('./constants-92dca097.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -2713,22 +2714,6 @@ const StyledLeadGenSubscriptionBoxA = styled__default["default"].div `
   }
 `;
 
-var useTextStyles = core.createStyles((theme) => {
-    return text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN];
-});
-
-const ErrorIcon = (_a) => {
-    var { size } = _a, rest = tslib_es6.__rest(_a, ["size"]);
-    const props = Object.assign({ width: size, height: size }, rest);
-    return (React__default["default"].createElement("svg", Object.assign({ width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
-        React__default["default"].createElement("path", { d: "M5.996 6.513q.163 0 .282-.12a.38.38 0 0 0 .118-.28V3.937q0-.15-.118-.268a.4.4 0 0 0-.282-.119.4.4 0 0 0-.281.12.38.38 0 0 0-.119.28v2.175q0 .15.119.269.12.119.281.119m0 1.862a.43.43 0 0 0 .3-.112.4.4 0 0 0 .125-.313.4.4 0 0 0-.125-.3.4.4 0 0 0-.3-.125.4.4 0 0 0-.3.125.4.4 0 0 0-.125.3.4.4 0 0 0 .125.313.43.43 0 0 0 .3.112m0 2.375a4.6 4.6 0 0 1-1.856-.375 4.8 4.8 0 0 1-1.506-1.012A4.8 4.8 0 0 1 1.62 7.857 4.6 4.6 0 0 1 1.246 6q0-.987.375-1.856t1.013-1.506A4.8 4.8 0 0 1 4.14 1.625a4.6 4.6 0 0 1 1.856-.375q.988 0 1.857.375Q8.72 2 9.359 2.638q.637.637 1.012 1.506T10.747 6t-.375 1.857A4.8 4.8 0 0 1 9.36 9.363a4.8 4.8 0 0 1-1.506 1.012q-.87.375-1.857.375", fill: "#F44D2C" })));
-};
-ErrorIcon.defaultProps = {
-    size: 18,
-    color: miscTheme.theme.colors.gray600,
-    activeColor: miscTheme.theme.colors.primaryBase,
-};
-
 const NoData = ({ className, style }) => {
     return (React__default["default"].createElement("svg", { width: "64", height: "55", viewBox: "0 0 64 55", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
         React__default["default"].createElement("path", { d: "M32.6226 54.0001C46.2852 54.0001 57.3652 43.0033 57.3652 29.4239C57.3652 15.8446 46.2852 4.84778 32.6226 4.84778C18.9599 4.84778 7.87988 15.8446 7.87988 29.4239C7.87988 43.0033 18.9599 54.0001 32.6226 54.0001Z", fill: "#E6EAF5" }),
@@ -2811,373 +2796,11 @@ const StyledLeadGenFormInner = styled__default["default"].div `
   }
 `;
 
-const TextFieldContext = React.createContext({});
-
-const cssInputNotShrink = react.css `
-  height: 100% !important;
-  min-height: calc(var(--container-height, 56px) * 24 / 56);
-  line-height: calc(var(--container-height, 56px) * 24 / 56);
-  border: none !important;
-  border-radius: 0 !important;
-  outline: none !important;
-  box-shadow: none !important;
-  padding: 0;
-  cursor: pointer;
-  opacity: 0;
-
-  ::placeholder {
-    color: ${miscTheme.theme.colors.gray400};
-  }
-`;
-const cssInputShrink = react.css `
-  height: auto !important;
-  cursor: text;
-  opacity: 1;
-  transition: 0.1s ease-in-out all;
-`;
-const cssLabelNotShrink = react.css `
-  position: absolute;
-  top: calc(var(--container-height) / 2);
-  left: var(--space-x, 16px);
-  margin: 0;
-  z-index: 1;
-  cursor: pointer;
-  transform: translateY(-50%);
-  transition: 0.125s ease-in all;
-`;
-const cssLabelShrink = react.css `
-  top: var(--space-y-shrink, 6px);
-  transform: none;
-  transition: 0.125s ease-out all;
-`;
-const cssWrapperInputNotShrink = react.css `
-  min-height: var(--container-height, 56px);
-  display: flex;
-  align-items: flex-end;
-  border: 1px solid ${miscTheme.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(.mantine-Input-rightSection) {
-    padding-right: var(--container-height, 56px);
-  }
-
-  .mantine-Input-icon {
-    display: none;
-  }
-
-  .mantine-NumberInput-control {
-    border-color: ${miscTheme.theme.colors.gray200};
-  }
-`;
-const cssWrapperInputShrink = react.css `
-  height: auto;
-  min-height: var(--container-height, 56px);
-  padding-block: var(--space-y-shrink, 6px);
-  cursor: text;
-  pointer-events: auto;
-`;
-const cssInputWrapperError = react.css `
-  color: ${miscTheme.theme.colors.red800};
-  font-size: 12px;
-  line-height: 1.5;
-`;
-const StyledTextFieldContainer = styled__default["default"].div `
-  --space-x: 16px;
-  --space-y-not-shrink: 15px;
-  --space-y-shrink: 6px;
-  --container-height: 56px;
-  --label-not-shrink: 16px;
-  --label-shrink: 12px;
-  --input: 15px;
-
-  position: relative;
-  min-width: 100px;
-  max-width: 100%;
-  display: inline-block;
-
-  .textField_wrapper {
-    display: inline-block;
-    width: 100%;
-    cursor: pointer;
-  }
-
-  .mantine-InputWrapper-root {
-    &[data-invalid='true'] {
-      .mantine-Input-wrapper {
-        border-color: ${miscTheme.theme.colors.red400};
-      }
-    }
-
-    .mantine-Input-wrapper {
-      &:has([data-invalid]) {
-        border-color: ${miscTheme.theme.colors.red400};
-      }
-    }
-  }
-
-  .mantine-InputWrapper-label {
-    ${cssLabelNotShrink}
-  }
-
-  .mantine-Input-wrapper {
-    ${cssWrapperInputNotShrink}
-
-    + .mantine-Popover-dropdown[data-position="bottom-start"] {
-      left: 0 !important;
-    }
-    + .mantine-Popover-dropdown[data-position='top-start'] {
-      top: unset !important;
-      left: 0 !important;
-      bottom: 100% !important;
-    }
-  }
-
-  .mantine-Input-input {
-    ${cssInputNotShrink}
-  }
-
-  &.textField_shrink {
-    .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;
-        }
-      }
-    }
-  }
-
-  &:focus-within {
-    .mantine-Input-wrapper {
-      transition: 0.25s linear border;
-      border-color: ${miscTheme.theme.colors.primary600};
-      box-shadow: 0 0 4px ${miscTheme.theme.colors.primary200};
-    }
-  }
-
-  .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;
-      font-size: var(--input, 15px);
-      padding: 0 var(--phone-input-space-x, 8px);
-      opacity: 0;
-      color: ${miscTheme.theme.colors.gray800} !important;
-      :focus {
-        color: ${miscTheme.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)
-      );
-    }
-  }
-
-  .icon {
-    position: absolute;
-    top: calc(var(--container-height) / 2);
-    right: var(--space-x, 16px);
-    transform: translateY(-50%);
-    transition: 0.125s ease-in all;
-    &.shrink {
-      top: calc(var(--container-height) / 2 - 4px);
-      transform: translateY(0);
-    }
-  }
-`;
-const StyledChoiceFieldContainer = styled__default["default"].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: ${miscTheme.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: ${miscTheme.theme.colors.gray600};
-    //   width: 18px;
-    //   height: 18px;
-    // }
-    // input[type='checkbox'] {
-    //   border-radius: 4px;
-    // }
-
-    // &[data-checked='true'] {
-    //   input[type='radio'],
-    //   input[type='checkbox'] {
-    //     border-color: ${miscTheme.theme.colors.primary600};
-    //   }
-
-    //   input[type='radio'] {
-    //     background-color: white;
-    //   }
-    // }
-
-    .mantine-Checkbox-input {
-      &:checked {
-        border-color: ${miscTheme.theme.colors.primary600};
-      }
-    }
-  }
-
-  .leadgen-choiceContainer {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .mantine-InputWrapper-error {
-    ${cssInputWrapperError}
-  }
-`;
-styled__default["default"].div `
-  position: absolute;
-  top: calc(var(--container-height) / 2);
-  right: var(--space-x, 16px);
-`;
-
-const TextField = (props) => {
-    const { shrink: shrinkProps, onChangeShrink, children, className } = props, restProps = tslib_es6.__rest(props, ["shrink", "onChangeShrink", "children", "className"]);
-    const [shrink, setShrink] = React.useState(shrinkProps);
-    const [hasIcon, setHasIcon] = React.useState(false);
-    React.useEffect(() => {
-        setShrink(shrinkProps);
-    }, [shrinkProps]);
-    return (React__default["default"].createElement(TextFieldContext.Provider, Object.assign({ value: {
-            shrinkProps,
-            shrink,
-            setShrink,
-            onChangeShrink,
-            hasIcon,
-            setHasIcon,
-        } }, restProps),
-        React__default["default"].createElement(StyledTextFieldContainer, Object.assign({ shrink: shrink, className: core.clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps), children)));
-};
-const TextFieldControl = (props) => {
-    const { shrink, shrinkProps, onChangeShrink, setShrink, hasIcon } = React.useContext(TextFieldContext);
-    const { children } = props;
-    const containerRef = hooks.useClickOutside(() => {
-        if (shrinkProps) {
-            return;
-        }
-        setShrink(false);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
-    });
-    // const inputInside = useMemo(() => {
-    //   containerRef.current.querySelectorAll(
-    //     'input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])',
-    //   )
-    // }, [containerRef.current])
-    // console.log({ containerRef })
-    const focusInput = (target) => {
-        const $textEl = target.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
-        const $focusEl = $textEl.item($textEl.length - 1);
-        if ($focusEl) {
-            $focusEl.focus({ preventScroll: true });
-        }
-    };
-    const onClick = React.useCallback((e) => {
-        if (shrink) {
-            e.preventDefault();
-            focusInput(e.currentTarget);
-            return;
-        }
-        setShrink(true);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
-        focusInput(e.currentTarget);
-    }, [shrink]);
-    React.useEffect(() => {
-        setShrink(shrinkProps);
-    }, [shrinkProps]);
-    return (React__default["default"].createElement(core.Box, { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, typeof children === 'function'
-        ? children({ shrink: !!shrink, hasIcon })
-        : children));
-};
-const TextFieldIcon = ({ Icon }) => {
-    const { shrink, setHasIcon } = React.useContext(TextFieldContext);
-    const theme = core.useMantineTheme();
-    React.useEffect(() => {
-        Icon && setHasIcon(true);
-    }, []);
-    return Icon ? (React__default["default"].createElement(Icon, { className: `icon ${!!shrink ? 'shrink' : ''}`, shrink: shrink, size: 24, color: theme.colors.gray[9] })) : null;
-};
-TextField.Control = TextFieldControl;
-TextField.Icon = TextFieldIcon;
-const ChoiceField = (props) => {
-    const { children, className } = props, restProps = tslib_es6.__rest(props, ["children", "className"]);
-    return (React__default["default"].createElement(StyledChoiceFieldContainer, Object.assign({ className: core.clsx(className, 'choiceField') }, restProps), children));
-};
-
 const LeadGenForm = React.forwardRef((props, ref) => {
     const { locale, blocks, scrollToErrorField = true, form: formProps, rules: validate, initialValues, onFinish, onFinishFailed, className, style, } = props;
     const formRef = React.useRef(null);
     const form$1 = formProps || form.useForm({ initialValues, validate });
-    const { classes } = useTextStyles();
+    const { classes } = index$8.useTextStyles();
     const middlewareFinish = React.useCallback((values, event) => {
         /** Set `touched` all values for validation when submiting */
         form$1.setTouched(blocks.reduce((touched, { data }) => {
@@ -3233,39 +2856,39 @@ const LeadGenForm = React.forwardRef((props, ref) => {
             const reactKey = `${id}-${idx}`;
             switch (blockName) {
                 case LEADGEN_BLOCK.TextBlock: {
-                    return (React__default["default"].createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(core.TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps, { error: error && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                                React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                    return (React__default["default"].createElement(index$8.TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default["default"].createElement(index$8.TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(core.TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps, { error: error && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
+                                React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                                 React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, error))), styles: (theme) => ({
                                 input: Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: text.FontWeight.halfBold }),
                             }) }))))));
                 }
                 case LEADGEN_BLOCK.NumberBlock: {
-                    return (React__default["default"].createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(TextField.Control, null, (shrink) => (React__default["default"].createElement(core.NumberInput, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps, { error: error && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                                React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                    return (React__default["default"].createElement(index$8.TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default["default"].createElement(index$8.TextField.Control, null, (shrink) => (React__default["default"].createElement(core.NumberInput, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps, { error: error && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
+                                React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                                 React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, error))) }))))));
                 }
                 case LEADGEN_BLOCK.EmailBlock: {
-                    return (React__default["default"].createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(TextField.Control, null, (shrink) => (React__default["default"].createElement(core.TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps, { error: error && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                                React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                    return (React__default["default"].createElement(index$8.TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default["default"].createElement(index$8.TextField.Control, null, (shrink) => (React__default["default"].createElement(core.TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps, { error: error && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
+                                React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                                 React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, error))) }))))));
                 }
                 case LEADGEN_BLOCK.PhoneOtpBlock:
                 case LEADGEN_BLOCK.WhatsappOtpBlock:
                 case LEADGEN_BLOCK.ZaloOtpBlock:
                 case LEADGEN_BLOCK.PhoneBlock: {
-                    return (React__default["default"].createElement(TextField, { key: reactKey, shrink: !!value, className: core.clsx('leadgen-form_input', {
+                    return (React__default["default"].createElement(index$8.TextField, { key: reactKey, shrink: !!value, className: core.clsx('leadgen-form_input', {
                             'leadgen-form_field_error': !!error,
                         }) },
-                        React__default["default"].createElement(TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(core.Input.Wrapper, { withAsterisk: required, "data-invalid": !!error, label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), inputWrapperOrder: [
+                        React__default["default"].createElement(index$8.TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(core.Input.Wrapper, { withAsterisk: required, "data-invalid": !!error, label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), inputWrapperOrder: [
                                 'label',
                                 'input',
                                 'description',
                                 'error',
                             ], error: error && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                                React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                                React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                                 React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, error))) },
                             React__default["default"].createElement(core.Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
                                     '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: text.FontWeight.halfBold }),
@@ -3275,17 +2898,17 @@ const LeadGenForm = React.forwardRef((props, ref) => {
                                         : 'VN'), type: "text", "data-control": "tel" }, formInputProps))))))));
                 }
                 case LEADGEN_BLOCK.LocationBlock: {
-                    return (React__default["default"].createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                    return (React__default["default"].createElement(index$8.TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
                         React__default["default"].createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps, { error: error && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                                React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                                React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                                 React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, error))) }))));
                 }
                 case LEADGEN_BLOCK.DateBlock: {
-                    return (React__default["default"].createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                    return (React__default["default"].createElement(index$8.TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
                         React__default["default"].createElement(dates.DateInput, Object.assign({ locale: (utils.MAPPED_LOCALE === null || utils.MAPPED_LOCALE === void 0 ? void 0 : utils.MAPPED_LOCALE[locale]) || utils.MAPPED_LOCALE['vi-VN'], valueFormat: "DD/MM/YYYY", name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "default", "data-control": "date" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.DropdownBlock:
-                    return (React__default["default"].createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                    return (React__default["default"].createElement(index$8.TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
                         React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
                         React__default["default"].createElement(core.Select, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", searchable: true, data: listQuestion.map((l) => ({
                                 value: l.value,
@@ -3316,7 +2939,7 @@ const LeadGenForm = React.forwardRef((props, ref) => {
                     const formInputCheckboxProps = form$1.getInputProps(name, {
                         type: 'checkbox',
                     });
-                    return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                    return (React__default["default"].createElement(index$8.ChoiceField, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default["default"].createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
                         React__default["default"].createElement(core.Checkbox.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, sx: {
                                 display: 'flex',
@@ -3328,14 +2951,14 @@ const LeadGenForm = React.forwardRef((props, ref) => {
                             } }, formInputCheckboxProps), listQuestion.map((l, _idx) => (React__default["default"].createElement(core.Checkbox, { name: name, key: _idx, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
                 }
                 case LEADGEN_BLOCK.RadioBlock: {
-                    return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                    return (React__default["default"].createElement(index$8.ChoiceField, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default["default"].createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
                         React__default["default"].createElement(core.Radio.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
                                 return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
                             } }, formInputProps), listQuestion.map((l, _index) => (React__default["default"].createElement(core.Radio, { name: name, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
                 }
                 case LEADGEN_BLOCK.TncBlock:
-                    return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                    return (React__default["default"].createElement(index$8.ChoiceField, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         React__default["default"].createElement(core.Input.Wrapper, { error: error },
                             React__default["default"].createElement(core.Checkbox, Object.assign({ value: value, name: 'TNC-' + id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, formInputProps)))));
                 default: {
@@ -3501,7 +3124,7 @@ const LeadGenSubscriptionBoxContainer = (props) => {
     if (!ALLOW_LOCALE.includes(locale)) {
         return null;
     }
-    return (React__default["default"].createElement(index$8.MantineProvider, { locale: locale, customStyleType: text.CustomStylesType.LEADGEN },
+    return (React__default["default"].createElement(index$9.MantineProvider, { locale: locale, customStyleType: text.CustomStylesType.LEADGEN },
         React__default["default"].createElement(LeadGenContextProvider, Object.assign({}, props, { apiLeadUrl: apiUrl, apiSubotUrl: apiSubotUrl }),
             React__default["default"].createElement(Container, null))));
 };
@@ -3581,11 +3204,11 @@ const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onCl
                         });
                         window.open(url, newTab ? 'blank' : '_parent');
                     }) },
-                    index$9.isVideo(imageMobile) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-mobile" },
+                    index$a.isVideo(imageMobile) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-mobile" },
                         React__default["default"].createElement("source", { src: imageMobile }))) : (React__default["default"].createElement("img", { className: "le-only-mobile", src: imageMobile, style: {
                             aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
                         } })),
-                    index$9.isVideo(imageDestkop) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-desktop" },
+                    index$a.isVideo(imageDestkop) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-desktop" },
                         React__default["default"].createElement("source", { src: imageDestkop }))) : (React__default["default"].createElement("img", { className: "le-only-desktop", src: imageDestkop, style: {
                             aspectRatio: `${imageDestkopWidth}/${imageDestkopHeight}`,
                         } }))),
@@ -4371,7 +3994,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
     const labelTuples = React.useMemo(() => {
         return ((index$7.ISO_FORMAT === null || index$7.ISO_FORMAT === void 0 ? void 0 : index$7.ISO_FORMAT[locale]) || index$7.ISO_FORMAT['vi-VN']).dateFormat
             .split('/')
-            .map((key) => { var _a; return t((_a = index$a.COMMON_DATE_TRANSLATE_KEY === null || index$a.COMMON_DATE_TRANSLATE_KEY === void 0 ? void 0 : index$a.COMMON_DATE_TRANSLATE_KEY[key]) === null || _a === void 0 ? void 0 : _a.id); });
+            .map((key) => { var _a; return t((_a = index$b.COMMON_DATE_TRANSLATE_KEY === null || index$b.COMMON_DATE_TRANSLATE_KEY === void 0 ? void 0 : index$b.COMMON_DATE_TRANSLATE_KEY[key]) === null || _a === void 0 ? void 0 : _a.id); });
     }, [locale]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, listBlockAdded.map((b, index) => {
         var _a;
@@ -4385,8 +4008,8 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
             case 'SubtitleBlock':
                 return (React__default["default"].createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
-                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: " ", 
+                return (React__default["default"].createElement(index$8.TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default["default"].createElement(index$8.TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChangeRaw={(e) => inputOnChange('text', e)}
                         label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-control": "text", "data-lead-control": name, "data-is-required": required, inputWrapperOrder: [
@@ -4395,14 +4018,14 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
                             'description',
                             'error',
                         ] }, form.getInputProps(value), { name: value, error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                            React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                            React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                             React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[value]))), styles: (theme) => ({
                             input: Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN]
                                 .p2), { color: theme.colors.gray[9], fontWeight: text.FontWeight.halfBold }),
                         }) }))))));
             case 'NumberBlock':
-                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(core.NumberInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: " ", 
+                return (React__default["default"].createElement(index$8.TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default["default"].createElement(index$8.TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(core.NumberInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChange={(e) => inputOnChange('number', e)}
                         label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-control": "number", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: [
@@ -4411,14 +4034,14 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
                             'description',
                             'error',
                         ] }, form.getInputProps(value), { error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                            React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                            React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                             React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[value]))), styles: (theme) => ({
                             input: Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN]
                                 .p2), { color: theme.colors.gray[9], fontWeight: text.FontWeight.halfBold }),
                         }) }))))));
             case 'EmailBlock':
-                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
+                return (React__default["default"].createElement(index$8.TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default["default"].createElement(index$8.TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
                         // type="email"
                         placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
@@ -4428,7 +4051,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
                             'description',
                             'error',
                         ] }, form.getInputProps(value), { error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                            React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                            React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                             React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[value]))), styles: (theme) => ({
                             input: Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN]
                                 .p2), { color: theme.colors.gray[9], fontWeight: text.FontWeight.halfBold }),
@@ -4439,16 +4062,16 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
             case 'PhoneBlock': {
                 const htmlForId = popupId + '-' + value + '-' + index;
                 const _b = form.getInputProps(value), { error } = _b, formPhoneInputWrapper = tslib_es6.__rest(_b, ["error"]);
-                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: core.clsx('lead-modal__form-control leadgen-form_field', {
+                return (React__default["default"].createElement(index$8.TextField, { key: index, shrink: !!formValue, className: core.clsx('lead-modal__form-control leadgen-form_field', {
                         'leadgen-form_field_error': !!error,
                     }) },
-                    React__default["default"].createElement(TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(core.Input.Wrapper, { size: "md", withAsterisk: required, label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: [
+                    React__default["default"].createElement(index$8.TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(core.Input.Wrapper, { size: "md", withAsterisk: required, label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: [
                             'label',
                             'input',
                             'description',
                             'error',
                         ], error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                            React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                            React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                             React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[value]))) },
                         React__default["default"].createElement(core.Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
                                 '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: text.FontWeight.halfBold }),
@@ -4460,26 +4083,26 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
                                     : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required }, formPhoneInputWrapper))))))));
             }
             case 'LocationBlock': {
-                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(TextField.Control, null, ({ shrink, hasIcon }) => (React__default["default"].createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-control": "text", "data-lead-control": name, "data-is-required": required, locale: locale, inputWrapperOrder: [
+                return (React__default["default"].createElement(index$8.TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default["default"].createElement(index$8.TextField.Control, null, ({ shrink, hasIcon }) => (React__default["default"].createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-control": "text", "data-lead-control": name, "data-is-required": required, locale: locale, inputWrapperOrder: [
                             'label',
                             'input',
                             'description',
                             'error',
                         ] }, form.getInputProps(value), { error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                            React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                            React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                             React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[value]))), styles: (theme) => ({
                             input: Object.assign(Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN]
                                 .p2), { color: theme.colors.gray[9], fontWeight: text.FontWeight.halfBold }), (hasIcon && {
                                 paddingRight: `${core.rem(28)} !important`,
                             })),
                         }) })))),
-                    React__default["default"].createElement(TextField.Icon, { Icon: core$1.MapPin })));
+                    React__default["default"].createElement(index$8.TextField.Icon, { Icon: core$1.MapPin })));
             }
             case 'DateBlock': {
                 const _c = form.getInputProps(value), { error } = _c, formInputProps = tslib_es6.__rest(_c, ["error"]);
                 return (React__default["default"].createElement(core.Input.Wrapper, { key: index, size: "md", withAsterisk: required, label: React__default["default"].createElement(index$2.Text, { size: "p2", variant: "primary" }, label), "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                        React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                        React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                         React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[value]))), className: "lead-modal__form-control leadgen-form_field" },
                     React__default["default"].createElement(InputDate.InputDate, Object.assign({ name: value, error: Boolean(error), locale: locale, "data-extra": true, "data-name": value, "data-control": "date", "data-lead-control": name, "data-is-required": required, className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
             }
@@ -4500,7 +4123,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
                             }
                         } }), value)));
             case 'CheckboxBlock':
-                return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox", key: index },
+                return (React__default["default"].createElement(index$8.ChoiceField, { className: "leadgen-form_checkbox", key: index },
                     isSendMailChimp && (React__default["default"].createElement("div", { style: {
                             display: 'none',
                         }, "data-name": value + '-mailchimp' })),
@@ -4514,21 +4137,21 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
                         }, inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
                         } }, form.getInputProps(value), { error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                            React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                            React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                             React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[value]))) }), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: React__default["default"].createElement(index$2.Text, { size: "p2", variant: "primary" }, l.placeholder), "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }))))));
             case 'RadioBlock':
-                return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_radio", key: index },
+                return (React__default["default"].createElement(index$8.ChoiceField, { className: "leadgen-form_radio", key: index },
                     isSendMailChimp && (React__default["default"].createElement(core.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
                     React__default["default"].createElement(index$3.Radio.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
                         label: React__default["default"].createElement(index$2.Text, { size: "p2", variant: "primary" }, label), size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
                         } }, form.getInputProps(value), { error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                            React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                            React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                             React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[value]))) }), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: React__default["default"].createElement(index$2.Text, { size: "p2", variant: "primary" }, l.placeholder), "data-control": "radio", "data-lead-control": name, "data-is-required": required }))))));
             case 'DropdownBlock':
-                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index },
-                    React__default["default"].createElement(TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(React__default["default"].Fragment, null,
+                return (React__default["default"].createElement(index$8.TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index },
+                    React__default["default"].createElement(index$8.TextField.Control, null, ({ shrink }) => (React__default["default"].createElement(React__default["default"].Fragment, null,
                         React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name, "data-is-required": required }),
                         React__default["default"].createElement(index$3.Select
                         // className="lead-modal__form-control leadgen-form_field"
@@ -4537,7 +4160,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
                             label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), placeholder: " ", searchable: true, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                                 value: l.value,
                                 label: l.placeholder,
-                            })), nothingFound: React__default["default"].createElement(NoData, null), rightSection: React__default["default"].createElement(TextField.Icon, { Icon: arrow.ChevronDown }), styles: (theme) => ({
+                            })), nothingFound: React__default["default"].createElement(NoData, null), rightSection: React__default["default"].createElement(index$8.TextField.Icon, { Icon: arrow.ChevronDown }), styles: (theme) => ({
                                 wrapper: {
                                     input: Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: text.FontWeight.halfBold }),
                                 },
@@ -4562,13 +4185,13 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
                                     },
                                 },
                             }), maxDropdownHeight: 192 }, form.getInputProps(value), { error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                                React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                                React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                                 React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[value]))) })))))));
             case 'TncBlock':
                 const _d = form.getInputProps(`TNC-${id}`), { error } = _d, tncInputProps = tslib_es6.__rest(_d, ["error"]);
-                return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox", key: id },
+                return (React__default["default"].createElement(index$8.ChoiceField, { className: "leadgen-form_checkbox", key: id },
                     React__default["default"].createElement(core.Input.Wrapper, { error: error && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
-                            React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                            React__default["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                             React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, error))) },
                         React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default["default"].createElement(index$2.Text, { as: "span", size: "c1", variant: "secondary", dangerouslySetInnerHTML: { __html: data.valueHTML }, styles: (theme) => ({
                                     root: {
@@ -4685,7 +4308,7 @@ const HeaderImage = ({ src, ratio = 3 / 2, className, style, }) => {
     if (!src) {
         return null;
     }
-    return (React__default["default"].createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: core.clsx(className, 'leadgen-header_image'), style: style }, index$9.isVideo(src) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true, className: "leadgen-header_image_feature leadgen-header_image_video", src: src })) : (React__default["default"].createElement("img", { src: src, draggable: "false", alt: "", className: "leadgen-header_image_feature leadgen-header_image_image" }))));
+    return (React__default["default"].createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: core.clsx(className, 'leadgen-header_image'), style: style }, index$a.isVideo(src) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true, className: "leadgen-header_image_feature leadgen-header_image_video", src: src })) : (React__default["default"].createElement("img", { src: src, draggable: "false", alt: "", className: "leadgen-header_image_feature leadgen-header_image_image" }))));
 };
 
 const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
@@ -4834,7 +4457,7 @@ const CAMPAGE_CODE_LIST_APPLY_NEW_UI = ['ri3lkoxcetjoj39'];
 const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, onUnmount, doImpression, showThankyou, campaignId, campaignCode, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, action, }) => {
     var _a, _b;
     const { primaryColor } = React.useContext(LeadGenContext$1);
-    const { isMobile } = index$b.useScreenSize();
+    const { isMobile } = index$c.useScreenSize();
     const [open, setOpen] = React.useState(!!campaignId);
     const [showOtpPhone, setShowOtpPhone] = React.useState(null);
     const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
@@ -5211,7 +4834,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         'leadgen-inline': isInPage,
         'leadgen-slider': isSlider,
     });
-    const PopupContainer = isDrawer ? (isNewUI ? (React__default["default"].createElement(LeadGenLightBoxB, { form: form, loading: isSubmitLoading, visible: open, onVisible: () => onOpenChange(false) }, PopupWrapper)) : (React__default["default"].createElement(index$c.DrawerComponent, { fadeFromIndex: index$7.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+    const PopupContainer = isDrawer ? (isNewUI ? (React__default["default"].createElement(LeadGenLightBoxB, { form: form, loading: isSubmitLoading, visible: open, onVisible: () => onOpenChange(false) }, PopupWrapper)) : (React__default["default"].createElement(index$d.DrawerComponent, { fadeFromIndex: index$7.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
         PopupWrapper,
         React__default["default"].createElement("div", { style: {
                 position: 'absolute',
@@ -5278,7 +4901,7 @@ const SkinLayout = ({ popupId, link, linkText, linkNewTab, onClose, imageMobile,
         React__default["default"].createElement("aside", { className: "le-only-mobile" },
             React__default["default"].createElement("div", { className: "le-skin-mobile" },
                 React__default["default"].createElement("div", { style: { position: 'relative' } },
-                    index$9.isVideo(imageMobile) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true },
+                    index$a.isVideo(imageMobile) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true },
                         React__default["default"].createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default["default"].createElement("img", { src: imageMobile, style: {
                             width: '100%',
                             aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
@@ -5875,7 +5498,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             setRedirectUrl,
         } },
         React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } },
-            React__default["default"].createElement(index$8.MantineProvider, { locale: locale, customStyleType: text.CustomStylesType.LEADGEN }, children ? (React__default["default"].createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }, children)) : (React__default["default"].createElement(core.Portal, { target: utils$1.getPopupWrapperDom() },
+            React__default["default"].createElement(index$9.MantineProvider, { locale: locale, customStyleType: text.CustomStylesType.LEADGEN }, children ? (React__default["default"].createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }, children)) : (React__default["default"].createElement(core.Portal, { target: utils$1.getPopupWrapperDom() },
                 React__default["default"].createElement(core.Box, { sx: { position: 'fixed', zIndex: index$7.ZINDEX_SSO - 9e6 } },
                     React__default["default"].createElement(core.Transition, { mounted: Boolean(((_b = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _b === void 0 ? void 0 : _b.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease", exitDuration: 200 }, (styles) => {
                         var _a;