@hhgtech/hhg-components 1.29.418-beta-7 → 1.29.418

package/build/lead.js

@@ -2,60 +2,59 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-c43fe66c.js');
+var tslib_es6 = require('./tslib.es6-e4fc76e6.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-2b52ac5e.js');
+var index = require('./index-f06ce4d3.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-61faed45.js');
-var translationsContext = require('./translationsContext-dd240fa1.js');
-var utils$1 = require('./utils-6e0a8a04.js');
-var index$2 = require('./index-4aabbf96.js');
-var index$3 = require('./index-ee624407.js');
-var index$5 = require('./index-c093066b.js');
-var index$4 = require('./index-6a3a8e5b.js');
-require('./index.styles-e1bc14e4.js');
+var index$1 = require('./index-61316819.js');
+var translationsContext = require('./translationsContext-071de1b3.js');
+var utils$1 = require('./utils-b7357ffc.js');
+var index$2 = require('./index-90ac7a26.js');
+var index$3 = require('./index-776f6bc7.js');
+var index$5 = require('./index-c9319026.js');
+var index$4 = require('./index-2fbe3d5c.js');
+require('./index.styles-02fd1572.js');
 var hooks = require('@mantine/hooks');
-require('./index-d09a83e2.js');
-var text = require('./text-52caa5f9.js');
-require('./index-7922036e.js');
-var utils = require('./utils-74361433.js');
+require('./index-6cdd2f9a.js');
+var text = require('./text-5a087312.js');
+require('./index-666659e2.js');
+var utils = require('./utils-17caafcc.js');
 var dates = require('@mantine/dates');
-var index$7 = require('./index-7115ccd4.js');
-var index$a = require('./index-f4c30bdd.js');
-require('./index-74042c5e.js');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-6b145657.js');
-var index$6 = require('./index-bf86506f.js');
-var translationsProvider = require('./translationsProvider-e2467ca8.js');
-var Locale = require('./Locale-c4492576.js');
+var index$7 = require('./index-87f1c08b.js');
+var index$a = require('./index-133e833c.js');
+require('./index-cd69b395.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-cabb5d7d.js');
+var index$6 = require('./index-7ad9dc6a.js');
+var translationsProvider = require('./translationsProvider-d2eda6ca.js');
+var Locale = require('./Locale-e5adc6cc.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-d8d30fec.js');
-var index$8 = require('./index-d82d3fff.js');
-var index$9 = require('./index-5128f351.js');
-var index$b = require('./index-9eaea7e5.js');
+var togetherComponentGlobalContext = require('./utils-e15dec9d.js');
+var index$8 = require('./index-99b9d42a.js');
+var index$9 = require('./index-db268a43.js');
+var index$b = require('./index-33647386.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-a9c1aa90.js');
-var index$c = require('./index-5ca4f564.js');
-var Close = require('./Close-f77d2207.js');
+var InputDate = require('./InputDate-c9e54a91.js');
+var index$c = require('./index-2890f16e.js');
+var Close = require('./Close-f532645a.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-b5e918f4.js');
+require('./normalizeLink-b1fc9b22.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-34bafab2.js');
+require('./useUniqueId-a5187284.js');
 require('./constantsSite.js');
-require('./shared-114f5e13.js');
+require('@hhgtech/icons/core');
+require('./shared-75532602.js');
 require('@mantine/notifications');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
@@ -71,11 +70,11 @@ 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-a3cfa747.js');
+require('./index-f0f1f02f.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-13903651.js');
+require('./constants-223e0935.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -173,7 +172,7 @@ const leadGenFieldRequired = (blocks) => {
         if (name === LEADGEN_BLOCK.TncBlock && id && required) {
             return `TNC-${id}`;
         }
-        if (required && typeof data['newtab'] === 'undefined') {
+        if (required) {
             return value;
         }
         return;
@@ -2578,11 +2577,10 @@ const LeadGenThankYou = ({ image, title, description, showButton = false, button
     const { htmlText: titleText, align: titleAlign } = title;
     const { htmlText: descriptionText, align: descriptionAlign } = description;
     const { htmlText: buttonText, newtab, url, onClick } = button;
-    const theme = core.useMantineTheme();
     return (React__default["default"].createElement(StyledLeadGenThankYou, { className: className, style: style },
         React__default["default"].createElement("img", { src: src, alt: "", className: "leadgen-thankyou_image leadgen-image" }),
-        React__default["default"].createElement(index$2.Text, { size: "h4", weight: "bold", "data-align": titleAlign, variant: "primary" }, titleText),
-        React__default["default"].createElement(index$2.Text, { size: "p2", "data-align": descriptionAlign, color: theme.colors.gray[6] }, descriptionText),
+        React__default["default"].createElement("p", { className: "leadgen-thankyou_title leadgen-title", "data-align": titleAlign }, titleText),
+        React__default["default"].createElement("p", { className: "leadgen-thankyou_description leadgen-description", "data-align": descriptionAlign }, descriptionText),
         !!buttonText && showButton && (React__default["default"].createElement(core.Button, { component: url ? 'a' : 'button', target: newtab ? '_blank' : undefined, href: url, size: "lg", variant: "filled", className: "leadgen-thankyoue_btn leadgen-btn", onClick: onClick }, buttonText))));
 };
 
@@ -2617,11 +2615,17 @@ const StyledLeadGenSubscriptionBoxHeader = styled__default["default"].div `
     flex: 1;
     min-width: 0;
     color: ${miscTheme.theme.colors.gray600};
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: -0.4px;
     b {
       color: #111111;
       font-weight: 700;
     }
     ${utils$1.MediaQueries.mbUp} {
+      font-size: 20px;
+      line-height: 28px;
       b {
         font-weight: 500;
       }
@@ -2683,6 +2687,7 @@ const StyledLeadGenSubscriptionBox = styled__default["default"].div `
         margin-left: 8px;
         width: auto;
         min-height: 56px;
+        font-size: 16px;
       }
     }
   }
@@ -2699,12 +2704,13 @@ const StyledLeadGenSubscriptionBox = styled__default["default"].div `
 `;
 const StyledLeadGenSubscriptionBoxA = styled__default["default"].div `
   .leadgen-form_input {
-    --phone-select: 65px;
+    --phone-select: 45px;
     .PhoneInput {
-      --phone-select: 65px;
+      --phone-select: 45px;
       .PhoneInputCountry {
         margin-top: 1px;
         pointer-events: none;
+        .PhoneInputCountryIconImg,
         .PhoneInputArrowContainer {
           display: none;
         }
@@ -2713,22 +2719,14 @@ const StyledLeadGenSubscriptionBoxA = styled__default["default"].div `
   }
 `;
 
-var useTextStyles = core.createStyles((theme) => {
-    return text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN];
+const PhoneInput = React.forwardRef((props, ref) => {
+    const { defaultCountry, id: idProps, name, placeholder, label, labelElement, labelProps, description, descriptionProps, withAsterisk, inputMode, inputContainer, inputWrapperOrder, error, className, classNames, style, styles } = props, restProps = tslib_es6.__rest(props, ["defaultCountry", "id", "name", "placeholder", "label", "labelElement", "labelProps", "description", "descriptionProps", "withAsterisk", "inputMode", "inputContainer", "inputWrapperOrder", "error", "className", "classNames", "style", "styles"]);
+    const id = idProps || uuid.v1() + name;
+    return (React__default["default"].createElement(core.Input.Wrapper, { size: "md", label: label, labelElement: labelElement, labelProps: Object.assign({ htmlFor: id }, labelProps), description: description, descriptionProps: descriptionProps, withAsterisk: withAsterisk, inputMode: inputMode, inputContainer: inputContainer, inputWrapperOrder: inputWrapperOrder, error: error, "data-invalid": !!error, className: className, classNames: classNames, style: style, styles: styles },
+        React__default["default"].createElement("div", { className: "mantine-Input-wrapper" },
+            React__default["default"].createElement(index$3.Phone, Object.assign({}, restProps, { id: id, ref: ref, name: name, spellCheck: false, placeholder: placeholder, defaultCountry: defaultCountry, className: "mantine-Input-input", type: "tel", "data-control": "tel" })))));
 });
 
-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,12 +2809,13 @@ const StyledLeadGenFormInner = styled__default["default"].div `
   }
 `;
 
-const TextFieldContext = React.createContext({});
-
-const cssInputNotShrink = react.css `
+const cssInputNotShrink$1 = react.css `
   height: 100% !important;
   min-height: calc(var(--container-height, 56px) * 24 / 56);
+  color: ${miscTheme.theme.colors.gray800};
+  font-size: var(--input, 15px);
   line-height: calc(var(--container-height, 56px) * 24 / 56);
+  letter-spacing: -0.3px;
   border: none !important;
   border-radius: 0 !important;
   outline: none !important;
@@ -2829,28 +2828,34 @@ const cssInputNotShrink = react.css `
     color: ${miscTheme.theme.colors.gray400};
   }
 `;
-const cssInputShrink = react.css `
+const cssInputShrink$1 = react.css `
   height: auto !important;
   cursor: text;
   opacity: 1;
   transition: 0.1s ease-in-out all;
 `;
-const cssLabelNotShrink = react.css `
+const cssLabelNotShrink$1 = react.css `
   position: absolute;
   top: calc(var(--container-height) / 2);
   left: var(--space-x, 16px);
+  color: ${miscTheme.theme.colors.gray400};
+  font-size: var(--label-not-shrink, 15px);
+  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 = react.css `
-  top: var(--space-y-shrink, 6px);
+const cssLabelShrink$1 = react.css `
+  color: ${miscTheme.theme.colors.gray600};
+  font-size: var(--label-shrink, 12px);
+  top: calc(var(--container-height) * 7 / 56);
   transform: none;
   transition: 0.125s ease-out all;
 `;
-const cssWrapperInputNotShrink = react.css `
+const cssWrapperInputNotShrink$1 = react.css `
   min-height: var(--container-height, 56px);
   display: flex;
   align-items: flex-end;
@@ -2874,22 +2879,22 @@ const cssWrapperInputNotShrink = react.css `
     border-color: ${miscTheme.theme.colors.gray200};
   }
 `;
-const cssWrapperInputShrink = react.css `
+const cssWrapperInputShrink$1 = react.css `
   height: auto;
   min-height: var(--container-height, 56px);
-  padding-block: var(--space-y-shrink, 6px);
+  padding-block: var(--space-y-shrink, 7px);
   cursor: text;
   pointer-events: auto;
 `;
-const cssInputWrapperError = react.css `
+const cssInputWrapperError$1 = react.css `
   color: ${miscTheme.theme.colors.red800};
   font-size: 12px;
   line-height: 1.5;
 `;
-const StyledTextFieldContainer = styled__default["default"].div `
+const StyledTextFieldContainer$1 = styled__default["default"].div `
   --space-x: 16px;
   --space-y-not-shrink: 15px;
-  --space-y-shrink: 6px;
+  --space-y-shrink: 7px;
   --container-height: 56px;
   --label-not-shrink: 16px;
   --label-shrink: 12px;
@@ -2921,11 +2926,11 @@ const StyledTextFieldContainer = styled__default["default"].div `
   }
 
   .mantine-InputWrapper-label {
-    ${cssLabelNotShrink}
+    ${cssLabelNotShrink$1}
   }
 
   .mantine-Input-wrapper {
-    ${cssWrapperInputNotShrink}
+    ${cssWrapperInputNotShrink$1}
 
     + .mantine-Popover-dropdown[data-position="bottom-start"] {
       left: 0 !important;
@@ -2938,16 +2943,17 @@ const StyledTextFieldContainer = styled__default["default"].div `
   }
 
   .mantine-Input-input {
-    ${cssInputNotShrink}
+    ${cssInputNotShrink$1}
   }
 
-  &.textField_shrink {
+  &.textField_shrink,
+  &:focus-within {
     .mantine-InputWrapper-label {
-      ${cssLabelShrink}
+      ${cssLabelShrink$1}
     }
 
     .mantine-Input-wrapper {
-      ${cssWrapperInputShrink}
+      ${cssWrapperInputShrink$1}
       &.mantine-Select-wrapper {
         .mantine-Select-rightSection {
           pointer-events: auto !important;
@@ -2956,7 +2962,7 @@ const StyledTextFieldContainer = styled__default["default"].div `
     }
 
     .mantine-Input-input {
-      ${cssInputShrink}
+      ${cssInputShrink$1}
     }
 
     &:has(.PhoneInput) {
@@ -2998,7 +3004,6 @@ const StyledTextFieldContainer = styled__default["default"].div `
       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;
@@ -3016,20 +3021,8 @@ const StyledTextFieldContainer = styled__default["default"].div `
       );
     }
   }
-
-  .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 `
+const StyledChoiceFieldContainer$1 = styled__default["default"].div `
   &.leadgen-form_checkbox,
   &.leadgen-form_radio {
     width: 100%;
@@ -3092,35 +3085,12 @@ const StyledChoiceFieldContainer = styled__default["default"].div `
   }
 
   .mantine-InputWrapper-error {
-    ${cssInputWrapperError}
+    ${cssInputWrapperError$1}
   }
-`;
-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 TextField$1 = (props) => {
+    const { shrink: shrinkProps, onChangeShrink, className, children } = props, restProps = tslib_es6.__rest(props, ["shrink", "onChangeShrink", "className", "children"]);
     const containerRef = hooks.useClickOutside(() => {
         if (shrinkProps) {
             return;
@@ -3128,12 +3098,7 @@ const TextFieldControl = (props) => {
         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 [shrink, setShrink] = React.useState(shrinkProps);
     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);
@@ -3154,30 +3119,18 @@ const TextFieldControl = (props) => {
     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));
+    return (React__default["default"].createElement(StyledTextFieldContainer$1, Object.assign({ shrink: shrink, className: core.clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps),
+        React__default["default"].createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, 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 ChoiceField$1 = (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));
+    return (React__default["default"].createElement(StyledChoiceFieldContainer$1, 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 middlewareFinish = React.useCallback((values, event) => {
         /** Set `touched` all values for validation when submiting */
         form$1.setTouched(blocks.reduce((touched, { data }) => {
@@ -3233,59 +3186,34 @@ 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 }),
-                                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 }),
-                            }) }))))));
+                    return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default["default"].createElement(core.TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
                 }
                 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 }),
-                                React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, error))) }))))));
+                    return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default["default"].createElement(core.NumberInput, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
                 }
                 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 }),
-                                React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, error))) }))))));
+                    return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default["default"].createElement(core.TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.PhoneOtpBlock:
                 case LEADGEN_BLOCK.WhatsappOtpBlock:
                 case LEADGEN_BLOCK.ZaloOtpBlock:
                 case LEADGEN_BLOCK.PhoneBlock: {
-                    return (React__default["default"].createElement(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: [
-                                '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$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 }),
-                                }) },
-                                React__default["default"].createElement(index$3.Phone, Object.assign({ className: `mantine-Input-input ${classes.p2}`, name: name, spellCheck: false, placeholder: " ", defaultCountry: (locale
-                                        ? utils.MAPPED_LOCALE[locale] || 'VN'
-                                        : 'VN'), type: "text", "data-control": "tel" }, formInputProps))))))));
+                    return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default["default"].createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : '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" },
-                        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$2.Text, { size: "c1", variant: "error" }, error))) }))));
+                    return (React__default["default"].createElement(TextField$1, { 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))));
                 }
                 case LEADGEN_BLOCK.DateBlock: {
-                    return (React__default["default"].createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                    return (React__default["default"].createElement(TextField$1, { 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(TextField$1, { 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 +3244,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(ChoiceField$1, { 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 +3256,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(ChoiceField$1, { 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(ChoiceField$1, { 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: {
@@ -3358,7 +3286,10 @@ const LeadGenSubscriptionBoxA = (props) => {
             React__default["default"].createElement("img", { src: image, alt: "" })));
     }, [image]);
     const titleComp = React.useMemo(() => {
-        return (React__default["default"].createElement(index$2.Text, { size: "h4", weight: "regular", className: "leadgen-title", dangerouslySetInnerHTML: { __html: title } }));
+        if (typeof title === 'string') {
+            return (React__default["default"].createElement("p", { className: "leadgen-title", dangerouslySetInnerHTML: { __html: title } }));
+        }
+        return React__default["default"].createElement("p", { className: "leadgen-title" }, title);
     }, [title]);
     return (React__default["default"].createElement(StyledLeadGenSubscriptionBoxA, { className: "subcription_box_A" },
         React__default["default"].createElement(StyledLeadGenSubscriptionBoxHeader, { className: "leadgen-subscription_box_header" },
@@ -3366,7 +3297,7 @@ const LeadGenSubscriptionBoxA = (props) => {
             imageComp),
         React__default["default"].createElement(StyledLeadGenSubscriptionBoxBody, { className: "leadgen-subscription_box_body" },
             React__default["default"].createElement(LeadGenForm, { ref: formRef, form: form, rules: rules, blocks: blocks, locale: locale, onFinish: onFinish, className: "leadgen-subscription_box_form" }),
-            React__default["default"].createElement(index$4.Button, { disabled: loading, loading: loading, size: "lg", onClick: () => {
+            React__default["default"].createElement(core.Button, { disabled: loading, loading: loading, variant: "filled", size: "lg", onClick: () => {
                     formRef.current.submit();
                 }, className: "leadgen-btn leadgen-btn_action", fullWidth: true }, submitText))));
 };
@@ -4202,8 +4133,8 @@ const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkN
                     objectFit: 'cover',
                     aspectRatio: `${imageWidth}/${imageHeight}`,
                 }, loading: "lazy" }),
-            title && (React__default["default"].createElement(index$2.Text, { size: "h4", weight: "semiBold", variant: "primary", as: "h3", className: `le-thankyou-title le-text-align-${titleAlign}` }, title)),
-            subtitle && (React__default["default"].createElement(index$2.Text, { size: "p2", variant: "secondary", className: `le-thankyou-subtitle le-text-align-${subtitleAlign}` }, subtitle.split('\n').map((text, idx, list) => {
+            title && (React__default["default"].createElement("h1", { className: `le-thankyou-title le-text-align-${titleAlign}` }, title)),
+            subtitle && (React__default["default"].createElement("p", { className: `le-thankyou-subtitle le-text-align-${subtitleAlign}` }, subtitle.split('\n').map((text, idx, list) => {
                 const isShowBr = idx < list.length - 1;
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
                     text,
@@ -4361,11 +4292,332 @@ const EmptyComponent = ({ onClose, onContinue, }) => {
 
 const SubtitleBlock = ({ children, align, }) => (React__default["default"].createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
+const cssInputNotShrink = react.css `
+  height: 100% !important;
+  min-height: calc(var(--container-height, 56px) * 24 / 56);
+  color: ${miscTheme.theme.colors.gray800};
+  font-size: var(--input, 15px);
+  line-height: calc(var(--container-height, 56px) * 24 / 56);
+  letter-spacing: -0.3px;
+  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);
+  color: ${miscTheme.theme.colors.gray400};
+  font-size: var(--label-not-shrink, 15px);
+  font-weight: 500;
+  line-height: calc(var(--container-height, 56px) * 24 / 56);
+  letter-spacing: -0.3px;
+  margin: 0;
+  z-index: 1;
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition: 0.125s ease-in all;
+`;
+const cssLabelShrink = react.css `
+  color: ${miscTheme.theme.colors.gray400};
+  font-size: var(--label-shrink, 12px);
+  line-height: calc(var(--container-height, 56px) * 18 / 56);
+  letter-spacing: -0.2px;
+  top: calc(var(--container-height) * 7 / 56);
+  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, 7px);
+  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: 7px;
+  --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,
+  &: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;
+        }
+      }
+    }
+  }
+
+  &: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)
+      );
+    }
+  }
+`;
+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}
+  }
+`;
+
+const TextField = (props) => {
+    const { shrink: shrinkProps, onChangeShrink, className, children } = props, restProps = tslib_es6.__rest(props, ["shrink", "onChangeShrink", "className", "children"]);
+    const containerRef = hooks.useClickOutside(() => {
+        if (shrinkProps) {
+            return;
+        }
+        setShrink(false);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
+    });
+    const [shrink, setShrink] = React.useState(shrinkProps);
+    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(StyledTextFieldContainer, Object.assign({ shrink: shrink, className: core.clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps),
+        React__default["default"].createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, children)));
+};
+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 TitleBlock = ({ children, align, }) => (React__default["default"].createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
-const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmitLoading, disabledButtonSubmit, }) => {
+const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, }) => {
     const { t } = index$1.useTranslations();
-    const { setRedirectUrl } = React.useContext(LeadGenContext$1);
     const form = useLeadFormContext();
     const formValues = form.values;
     const labelTuples = React.useMemo(() => {
@@ -4386,53 +4638,23 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
                 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: " ", 
+                    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: [
-                            'label',
-                            'input',
-                            '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$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 }),
-                        }) }))))));
+                        label: label, "data-control": "text", "data-lead-control": name, "data-is-required": required, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value), { name: value }))));
             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: " ", 
+                    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: [
-                            '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$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 }),
-                        }) }))))));
+                        label: label, "data-control": "number", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             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, 
+                    React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
                         // type="email"
                         placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-control": "email", "data-lead-control": name, "data-is-required": required, name: value, 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$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 }),
-                        }) }))))));
+                        label: label, "data-control": "email", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -4442,63 +4664,28 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
                 return (React__default["default"].createElement(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: [
-                            '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$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 }),
-                            }) },
-                            React__default["default"].createElement(index$3.Phone, Object.assign({ className: `mantine-Input-input`, name: value, spellCheck: false, type: "tel", placeholder: " ", 
+                    React__default["default"].createElement(core.Input.Wrapper, { size: "md", withAsterisk: required, label: label, "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
+                        React__default["default"].createElement("div", { className: "mantine-Input-wrapper" },
+                            React__default["default"].createElement(index$3.Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: " ", 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
-                                id: htmlForId, defaultCountry: (locale
-                                    ? utils.MAPPED_LOCALE[locale] || 'VN'
-                                    : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required }, formPhoneInputWrapper))))))));
+                                id: htmlForId, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : '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: [
-                            '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$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(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: label, "data-control": "text", "data-lead-control": name, "data-is-required": required, locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             }
             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$2.Text, { size: "c1", variant: "error" }, form.errors[value]))), className: "lead-modal__form-control leadgen-form_field" },
+                return (React__default["default"].createElement(core.Input.Wrapper, { key: index, size: "md", withAsterisk: required, label: label, "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error, className: "lead-modal__form-control leadgen-form_field" },
                     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))));
             }
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
-                    React__default["default"].createElement(index$4.Button, Object.assign({ type: hasSubmitBtn ? 'button' : 'submit', size: "md", className: `lead-modal__btn ${LEAD_CLASS}` }, (!hasSubmitBtn && {
-                        loading: isSubmitLoading,
-                        disabled: disabledButtonSubmit,
-                    }), { onClick: () => {
-                            if (hasSubmitBtn) {
-                                window.open(url, newtab ? '_blank' : undefined);
-                            }
-                            else {
-                                setRedirectUrl({
-                                    url,
-                                    target: newtab ? '_blank' : undefined,
-                                });
-                            }
-                        } }), value)));
+                    React__default["default"].createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
+                        React__default["default"].createElement(index$4.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                                onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
+                            } }, value))));
             case 'CheckboxBlock':
                 return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox", key: index },
                     isSendMailChimp && (React__default["default"].createElement("div", { style: {
@@ -4506,70 +4693,58 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmi
                         }, "data-name": value + '-mailchimp' })),
                     React__default["default"].createElement(index$3.Checkbox.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", sx: {
+                        label: label, size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             flexWrap: 'wrap',
                             gap: 8,
                         }, 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$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 }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: 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 },
                     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) => {
+                        label: 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$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 }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: 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,
-                        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
+                    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"
+                    , Object.assign({ 
                         // className="lead-modal__form-control leadgen-form_field"
-                        , Object.assign({ 
-                            // className="lead-modal__form-control leadgen-form_field"
-                            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) => ({
-                                wrapper: {
-                                    input: Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2), { color: theme.colors.gray[9], fontWeight: text.FontWeight.halfBold }),
-                                },
-                                item: {
-                                    paddingBlock: 12,
-                                    paddingInline: 10,
-                                    fontSize: 16,
-                                    lineHeight: 1.5,
-                                },
-                                nothingFound: {
-                                    fontSize: 54,
-                                    paddingBlock: 30,
-                                },
-                                itemsWrapper: {
-                                    padding: 6,
-                                },
-                                dropdown: {
-                                    '.mantine-ScrollArea-scrollbar[data-orientation="vertical"]': {
-                                        '--radix-scroll-area-thumb-width': '6px',
-                                        width: 'var(--radix-scroll-area-thumb-width)',
-                                        paddingInline: 0,
-                                    },
+                        label: 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), styles: {
+                            item: {
+                                paddingBlock: 12,
+                                paddingInline: 10,
+                                fontSize: 16,
+                                lineHeight: 1.5,
+                            },
+                            nothingFound: {
+                                fontSize: 54,
+                                paddingBlock: 30,
+                            },
+                            itemsWrapper: {
+                                padding: 6,
+                            },
+                            dropdown: {
+                                '.mantine-ScrollArea-scrollbar[data-orientation="vertical"]': {
+                                    '--radix-scroll-area-thumb-width': '6px',
+                                    width: 'var(--radix-scroll-area-thumb-width)',
+                                    paddingInline: 0,
                                 },
-                            }), 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$2.Text, { size: "c1", variant: "error" }, form.errors[value]))) })))))));
+                            },
+                        }, maxDropdownHeight: 192 }, form.getInputProps(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 },
-                    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$2.Text, { size: "c1", variant: "error" }, error))) },
+                    React__default["default"].createElement(core.Input.Wrapper, { 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: {
                                         a: {
@@ -5155,7 +5330,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         React__default["default"].createElement("form", { ref: formRef, className: "leadgen-form", onFocus: onFocus, onSubmit: middlewareOnSubmit },
             React__default["default"].createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
                 React__default["default"].createElement("div", { className: "leadgen-form_inner" },
-                    React__default["default"].createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit, hasSubmitBtn: Boolean(ButtonSubmit), isSubmitLoading: isSubmitLoading, disabledButtonSubmit: disabledButtonSubmit })))),
+                    React__default["default"].createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit })))),
         React__default["default"].createElement("div", { style: {
                 height: `${bottomSpacing}px`,
                 width: '100%',
@@ -5536,7 +5711,6 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     const [action, setAction] = React.useState('');
     const [showThankyou, setShowThankyou] = React.useState(null);
     const [showEmpty, setShowEmpty] = React.useState(false);
-    const [redirectUrl, setRedirectUrl] = React.useState();
     const currentLayout = React.useMemo(() => showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.currentLayout, [showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.currentLayout]);
     React.useEffect(() => {
         if (forceCampaign) {
@@ -5779,10 +5953,6 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                 }),
         ]);
         onSubmitProps === null || onSubmitProps === void 0 ? void 0 : onSubmitProps(formDataObj);
-        if (redirectUrl === null || redirectUrl === void 0 ? void 0 : redirectUrl.url) {
-            window.open(redirectUrl === null || redirectUrl === void 0 ? void 0 : redirectUrl.url, (redirectUrl === null || redirectUrl === void 0 ? void 0 : redirectUrl.target) || '_self');
-            onClose();
-        }
         if ((showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupShowThankYou) == 'notshow') {
             onClose();
             document.body.classList.remove('noscroll');
@@ -5871,8 +6041,6 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             siteDomain,
             siteId,
             locale,
-            redirectUrl,
-            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() },