@hhgtech/hhg-components 1.29.418 → 1.29.419-beta-1

package/build/esm/lead.js

@@ -1,56 +1,57 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-af0ab658.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-54c227c4.js';
 import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback, forwardRef, useImperativeHandle, memo, useLayoutEffect } from 'react';
-import { createStyles, Box, Button as Button$1, Input as Input$1, Autocomplete, clsx, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, TextInput, NumberInput as NumberInput$1, Portal, Transition, Overlay } from '@mantine/core';
+import { createStyles, Box, useMantineTheme, Button as Button$1, Autocomplete, clsx, Input as Input$1, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, Flex, TextInput, NumberInput as NumberInput$1, Portal, Transition, Overlay } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { createFormContext, useForm } from '@mantine/form';
 import dayjs from 'dayjs';
-import { B as BEARER_TOKEN_COOKIE } from './index-613e2960.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-9f2df5e3.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { u as useTranslations } from './index-da9b3560.js';
-import { T as TranslationsContext } from './translationsContext-cca25e5e.js';
-import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-778daa2b.js';
-import { T as Text } from './index-23f97b77.js';
-import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput, O as OTP } from './index-5bf11acd.js';
-import { D as DatePicker } from './index-5f7213b5.js';
-import { B as Button } from './index-cf685e8f.js';
-import './index.styles-1b4356be.js';
+import { u as useTranslations } from './index-564e9a8d.js';
+import { T as TranslationsContext } from './translationsContext-f3d56104.js';
+import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-ce6dad59.js';
+import { T as Text } from './index-e24c7f31.js';
+import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput, O as OTP } from './index-9485507e.js';
+import { D as DatePicker } from './index-5469d13f.js';
+import { B as Button } from './index-2d6a701d.js';
+import './index.styles-7fd25fc3.js';
 import { useIntersection, useClickOutside } from '@mantine/hooks';
-import './index-546c521c.js';
-import { C as CustomStylesType } from './text-1962e9fb.js';
-import './index-9cdad777.js';
-import { M as MAPPED_LOCALE } from './utils-8d7411e8.js';
+import './index-e2c81cdc.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType } from './text-9556acd7.js';
+import './index-cdc909e2.js';
+import { M as MAPPED_LOCALE } from './utils-1c5f9f28.js';
 import { DateInput } from '@mantine/dates';
-import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-eebfb54e.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-0c0ac05f.js';
-import './index-40f2480d.js';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-aa0779ff.js';
-import { H as Heading$1 } from './index-8c902e04.js';
-import { t as translationsMap$1 } from './translationsProvider-7f13bbeb.js';
-import { L as LOCALE } from './Locale-965fa186.js';
+import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-78fe08df.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-95a9f864.js';
+import './index-b8d0efc2.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-97751620.js';
+import { H as Heading$1 } from './index-0bad6b36.js';
+import { t as translationsMap$1 } from './translationsProvider-29762575.js';
+import { L as LOCALE } from './Locale-5e840eb9.js';
 import { v1 } from 'uuid';
 import { domainLocales } from './constantsDomainLocales.js';
 import { parsePhoneNumber } from 'react-phone-number-input';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { css } from '@emotion/react';
-import { T as TogetherComponentGlobalContext } from './utils-fb03ac58.js';
-import { M as MantineProvider } from './index-3dd7f3bf.js';
-import { i as isVideo } from './index-eeb70947.js';
-import { u as useScreenSize } from './index-6a03cb12.js';
+import { T as TogetherComponentGlobalContext } from './utils-21099ca6.js';
+import { M as MantineProvider } from './index-6a3d20c1.js';
+import { i as isVideo } from './index-10628007.js';
+import { u as useScreenSize } from './index-f27e8f3a.js';
 import { motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
-import { I as InputDate } from './InputDate-dbede396.js';
-import { D as DrawerComponent } from './index-1708f86a.js';
-import { C as Close } from './Close-21630c6e.js';
+import { ChevronDown } from '@hhgtech/icons/arrow';
+import { MapPin } from '@hhgtech/icons/core';
+import { I as InputDate } from './InputDate-fec94e39.js';
+import { D as DrawerComponent } from './index-7d04c0c0.js';
+import { C as Close } from './Close-6964f421.js';
 import './constantsIsProduction.js';
-import './normalizeLink-ab71a2fd.js';
+import './normalizeLink-ee918625.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-d828c537.js';
+import './useUniqueId-b76ebd23.js';
 import './constantsSite.js';
-import '@hhgtech/icons/core';
-import './shared-c5d890ab.js';
+import './shared-306f242d.js';
 import '@mantine/notifications';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
@@ -66,11 +67,11 @@ import './i18n-values/vi-VN.js';
 import './i18n-values/vi-VN_MB.js';
 import './i18n-values/zh-SG.js';
 import './i18n-values/zh-TW.js';
-import './index-417ea696.js';
+import './index-b5f1922a.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-cb2bfb9f.js';
+import './constants-378b36a6.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -2548,10 +2549,11 @@ 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 = useMantineTheme();
     return (React__default.createElement(StyledLeadGenThankYou, { className: className, style: style },
         React__default.createElement("img", { src: src, alt: "", className: "leadgen-thankyou_image leadgen-image" }),
-        React__default.createElement("p", { className: "leadgen-thankyou_title leadgen-title", "data-align": titleAlign }, titleText),
-        React__default.createElement("p", { className: "leadgen-thankyou_description leadgen-description", "data-align": descriptionAlign }, descriptionText),
+        React__default.createElement(Text, { size: "h4", weight: "bold", "data-align": titleAlign, variant: "primary" }, titleText),
+        React__default.createElement(Text, { size: "p2", "data-align": descriptionAlign, color: theme.colors.gray[6] }, descriptionText),
         !!buttonText && showButton && (React__default.createElement(Button$1, { component: url ? 'a' : 'button', target: newtab ? '_blank' : undefined, href: url, size: "lg", variant: "filled", className: "leadgen-thankyoue_btn leadgen-btn", onClick: onClick }, buttonText))));
 };
 
@@ -2586,17 +2588,11 @@ const StyledLeadGenSubscriptionBoxHeader = styled.div `
     flex: 1;
     min-width: 0;
     color: ${theme.colors.gray600};
-    font-size: 17px;
-    font-weight: 400;
-    line-height: 24px;
-    letter-spacing: -0.4px;
     b {
       color: #111111;
       font-weight: 700;
     }
     ${MediaQueries.mbUp} {
-      font-size: 20px;
-      line-height: 28px;
       b {
         font-weight: 500;
       }
@@ -2675,13 +2671,12 @@ const StyledLeadGenSubscriptionBox = styled.div `
 `;
 const StyledLeadGenSubscriptionBoxA = styled.div `
   .leadgen-form_input {
-    --phone-select: 45px;
+    --phone-select: 65px;
     .PhoneInput {
-      --phone-select: 45px;
+      --phone-select: 65px;
       .PhoneInputCountry {
         margin-top: 1px;
         pointer-events: none;
-        .PhoneInputCountryIconImg,
         .PhoneInputArrowContainer {
           display: none;
         }
@@ -2690,14 +2685,22 @@ const StyledLeadGenSubscriptionBoxA = styled.div `
   }
 `;
 
-const PhoneInput = 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 = __rest(props, ["defaultCountry", "id", "name", "placeholder", "label", "labelElement", "labelProps", "description", "descriptionProps", "withAsterisk", "inputMode", "inputContainer", "inputWrapperOrder", "error", "className", "classNames", "style", "styles"]);
-    const id = idProps || v1() + name;
-    return (React__default.createElement(Input$1.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.createElement("div", { className: "mantine-Input-wrapper" },
-            React__default.createElement(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" })))));
+var useTextStyles = createStyles((theme) => {
+    return GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN];
 });
 
+const ErrorIcon = (_a) => {
+    var { size } = _a, rest = __rest(_a, ["size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return (React__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.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: theme.colors.gray600,
+    activeColor: theme.colors.primaryBase,
+};
+
 const NoData = ({ className, style }) => {
     return (React__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.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" }),
@@ -2780,13 +2783,12 @@ const StyledLeadGenFormInner = styled.div `
   }
 `;
 
-const cssInputNotShrink$1 = css `
+const TextFieldContext = createContext({});
+
+const cssInputNotShrink = css `
   height: 100% !important;
   min-height: calc(var(--container-height, 56px) * 24 / 56);
-  color: ${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;
@@ -2799,34 +2801,28 @@ const cssInputNotShrink$1 = css `
     color: ${theme.colors.gray400};
   }
 `;
-const cssInputShrink$1 = css `
+const cssInputShrink = css `
   height: auto !important;
   cursor: text;
   opacity: 1;
   transition: 0.1s ease-in-out all;
 `;
-const cssLabelNotShrink$1 = css `
+const cssLabelNotShrink = css `
   position: absolute;
   top: calc(var(--container-height) / 2);
   left: var(--space-x, 16px);
-  color: ${theme.colors.gray400};
-  font-size: var(--label-not-shrink, 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$1 = css `
-  color: ${theme.colors.gray600};
-  font-size: var(--label-shrink, 12px);
-  top: calc(var(--container-height) * 7 / 56);
+const cssLabelShrink = css `
+  top: var(--space-y-shrink, 6px);
   transform: none;
   transition: 0.125s ease-out all;
 `;
-const cssWrapperInputNotShrink$1 = css `
+const cssWrapperInputNotShrink = css `
   min-height: var(--container-height, 56px);
   display: flex;
   align-items: flex-end;
@@ -2850,22 +2846,22 @@ const cssWrapperInputNotShrink$1 = css `
     border-color: ${theme.colors.gray200};
   }
 `;
-const cssWrapperInputShrink$1 = css `
+const cssWrapperInputShrink = css `
   height: auto;
   min-height: var(--container-height, 56px);
-  padding-block: var(--space-y-shrink, 7px);
+  padding-block: var(--space-y-shrink, 6px);
   cursor: text;
   pointer-events: auto;
 `;
-const cssInputWrapperError$1 = css `
+const cssInputWrapperError = css `
   color: ${theme.colors.red800};
   font-size: 12px;
   line-height: 1.5;
 `;
-const StyledTextFieldContainer$1 = styled.div `
+const StyledTextFieldContainer = styled.div `
   --space-x: 16px;
   --space-y-not-shrink: 15px;
-  --space-y-shrink: 7px;
+  --space-y-shrink: 6px;
   --container-height: 56px;
   --label-not-shrink: 16px;
   --label-shrink: 12px;
@@ -2897,11 +2893,11 @@ const StyledTextFieldContainer$1 = styled.div `
   }
 
   .mantine-InputWrapper-label {
-    ${cssLabelNotShrink$1}
+    ${cssLabelNotShrink}
   }
 
   .mantine-Input-wrapper {
-    ${cssWrapperInputNotShrink$1}
+    ${cssWrapperInputNotShrink}
 
     + .mantine-Popover-dropdown[data-position="bottom-start"] {
       left: 0 !important;
@@ -2914,17 +2910,16 @@ const StyledTextFieldContainer$1 = styled.div `
   }
 
   .mantine-Input-input {
-    ${cssInputNotShrink$1}
+    ${cssInputNotShrink}
   }
 
-  &.textField_shrink,
-  &:focus-within {
+  &.textField_shrink {
     .mantine-InputWrapper-label {
-      ${cssLabelShrink$1}
+      ${cssLabelShrink}
     }
 
     .mantine-Input-wrapper {
-      ${cssWrapperInputShrink$1}
+      ${cssWrapperInputShrink}
       &.mantine-Select-wrapper {
         .mantine-Select-rightSection {
           pointer-events: auto !important;
@@ -2933,7 +2928,7 @@ const StyledTextFieldContainer$1 = styled.div `
     }
 
     .mantine-Input-input {
-      ${cssInputShrink$1}
+      ${cssInputShrink}
     }
 
     &:has(.PhoneInput) {
@@ -2975,6 +2970,7 @@ const StyledTextFieldContainer$1 = styled.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: ${theme.colors.gray800} !important;
@@ -2992,8 +2988,20 @@ const StyledTextFieldContainer$1 = styled.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$1 = styled.div `
+const StyledChoiceFieldContainer = styled.div `
   &.leadgen-form_checkbox,
   &.leadgen-form_radio {
     width: 100%;
@@ -3056,12 +3064,32 @@ const StyledChoiceFieldContainer$1 = styled.div `
   }
 
   .mantine-InputWrapper-error {
-    ${cssInputWrapperError$1}
+    ${cssInputWrapperError}
   }
+`;
+styled.div `
+  position: absolute;
+  top: calc(var(--container-height) / 2);
+  right: var(--space-x, 16px);
 `;
 
-const TextField$1 = (props) => {
-    const { shrink: shrinkProps, onChangeShrink, className, children } = props, restProps = __rest(props, ["shrink", "onChangeShrink", "className", "children"]);
+const TextField = (props) => {
+    const { shrink: shrinkProps, onChangeShrink, children, className } = props, restProps = __rest(props, ["shrink", "onChangeShrink", "children", "className"]);
+    const [shrink, setShrink] = useState(shrinkProps);
+    useEffect(() => {
+        setShrink(shrinkProps);
+    }, [shrinkProps]);
+    return (React__default.createElement(TextFieldContext.Provider, Object.assign({ value: {
+            shrinkProps,
+            shrink,
+            setShrink,
+            onChangeShrink,
+        } }, restProps),
+        React__default.createElement(StyledTextFieldContainer, Object.assign({ shrink: shrink, className: clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps), children)));
+};
+const TextFieldControl = (props) => {
+    const { shrink, shrinkProps, onChangeShrink, setShrink } = useContext(TextFieldContext);
+    const { children } = props;
     const containerRef = useClickOutside(() => {
         if (shrinkProps) {
             return;
@@ -3069,7 +3097,12 @@ const TextField$1 = (props) => {
         setShrink(false);
         onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
     });
-    const [shrink, setShrink] = useState(shrinkProps);
+    // 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);
@@ -3090,18 +3123,25 @@ const TextField$1 = (props) => {
     useEffect(() => {
         setShrink(shrinkProps);
     }, [shrinkProps]);
-    return (React__default.createElement(StyledTextFieldContainer$1, Object.assign({ shrink: shrink, className: clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps),
-        React__default.createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, children)));
+    return (React__default.createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, typeof children === 'function' ? children(!!shrink) : children));
+};
+const TextFieldIcon = ({ Icon }) => {
+    const { shrink } = useContext(TextFieldContext);
+    const theme = useMantineTheme();
+    return Icon ? (React__default.createElement(Icon, { className: `icon ${!!shrink ? 'shrink' : ''}`, shrink: shrink, size: 24, color: theme.colors.gray[9] })) : null;
 };
-const ChoiceField$1 = (props) => {
+TextField.Control = TextFieldControl;
+TextField.Icon = TextFieldIcon;
+const ChoiceField = (props) => {
     const { children, className } = props, restProps = __rest(props, ["children", "className"]);
-    return (React__default.createElement(StyledChoiceFieldContainer$1, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
+    return (React__default.createElement(StyledChoiceFieldContainer, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
 };
 
 const LeadGenForm = forwardRef((props, ref) => {
     const { locale, blocks, scrollToErrorField = true, form: formProps, rules: validate, initialValues, onFinish, onFinishFailed, className, style, } = props;
     const formRef = useRef(null);
     const form = formProps || useForm({ initialValues, validate });
+    const { classes } = useTextStyles();
     const middlewareFinish = useCallback((values, event) => {
         /** Set `touched` all values for validation when submiting */
         form.setTouched(blocks.reduce((touched, { data }) => {
@@ -3157,34 +3197,55 @@ const LeadGenForm = forwardRef((props, ref) => {
             const reactKey = `${id}-${idx}`;
             switch (blockName) {
                 case LEADGEN_BLOCK.TextBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: React__default.createElement(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.createElement(Flex, { align: 'center', gap: 4 },
+                                React__default.createElement(ErrorIcon, { size: 12 }),
+                                React__default.createElement(Text, { size: "c1", variant: "error" }, error))) }))))));
                 }
                 case LEADGEN_BLOCK.NumberBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(NumberInput$1, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(NumberInput$1, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: React__default.createElement(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.createElement(Flex, { align: 'center', gap: 4 },
+                                React__default.createElement(ErrorIcon, { size: 12 }),
+                                React__default.createElement(Text, { size: "c1", variant: "error" }, error))) }))))));
                 }
                 case LEADGEN_BLOCK.EmailBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps, { error: error && (React__default.createElement(Flex, { align: 'center', gap: 4 },
+                                React__default.createElement(ErrorIcon, { size: 12 }),
+                                React__default.createElement(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.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "tel" }, formInputProps))));
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: clsx('leadgen-form_input', {
+                            'leadgen-form_field_error': !!error,
+                        }) },
+                        React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(Input$1.Wrapper, { withAsterisk: required, "data-invalid": !!error, label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), inputWrapperOrder: [
+                                'label',
+                                'input',
+                                'description',
+                                'error',
+                            ], error: error && (React__default.createElement(Flex, { align: 'center', gap: 4 },
+                                React__default.createElement(ErrorIcon, { size: 12 }),
+                                React__default.createElement(Text, { size: "c1", variant: "error" }, error))) },
+                            React__default.createElement("div", { className: "mantine-Input-wrapper" },
+                                React__default.createElement(Phone, Object.assign({ className: `mantine-Input-input ${classes.p2}`, name: name, spellCheck: false, placeholder: " ", defaultCountry: (locale
+                                        ? MAPPED_LOCALE[locale] || 'VN'
+                                        : 'VN'), type: "text", "data-control": "tel" }, formInputProps))))))));
                 }
                 case LEADGEN_BLOCK.LocationBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps))));
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__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.createElement(Flex, { align: 'center', gap: 4 },
+                                React__default.createElement(ErrorIcon, { size: 12 }),
+                                React__default.createElement(Text, { size: "c1", variant: "error" }, error))) }))));
                 }
                 case LEADGEN_BLOCK.DateBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
                         React__default.createElement(DateInput, Object.assign({ locale: (MAPPED_LOCALE === null || MAPPED_LOCALE === void 0 ? void 0 : MAPPED_LOCALE[locale]) || 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.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
                         React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
                         React__default.createElement(Select$1, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", searchable: true, data: listQuestion.map((l) => ({
                                 value: l.value,
@@ -3215,7 +3276,7 @@ const LeadGenForm = forwardRef((props, ref) => {
                     const formInputCheckboxProps = form.getInputProps(name, {
                         type: 'checkbox',
                     });
-                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                    return (React__default.createElement(ChoiceField, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
                         React__default.createElement(Checkbox$1.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, sx: {
                                 display: 'flex',
@@ -3227,14 +3288,14 @@ const LeadGenForm = forwardRef((props, ref) => {
                             } }, formInputCheckboxProps), listQuestion.map((l, _idx) => (React__default.createElement(Checkbox$1, { name: name, key: _idx, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
                 }
                 case LEADGEN_BLOCK.RadioBlock: {
-                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                    return (React__default.createElement(ChoiceField, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
                         React__default.createElement(Radio$1.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
                                 return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
                             } }, formInputProps), listQuestion.map((l, _index) => (React__default.createElement(Radio$1, { name: name, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
                 }
                 case LEADGEN_BLOCK.TncBlock:
-                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                    return (React__default.createElement(ChoiceField, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         React__default.createElement(Input$1.Wrapper, { error: error },
                             React__default.createElement(Checkbox$1, Object.assign({ value: value, name: 'TNC-' + id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, formInputProps)))));
                 default: {
@@ -3257,10 +3318,7 @@ const LeadGenSubscriptionBoxA = (props) => {
             React__default.createElement("img", { src: image, alt: "" })));
     }, [image]);
     const titleComp = useMemo(() => {
-        if (typeof title === 'string') {
-            return (React__default.createElement("p", { className: "leadgen-title", dangerouslySetInnerHTML: { __html: title } }));
-        }
-        return React__default.createElement("p", { className: "leadgen-title" }, title);
+        return (React__default.createElement(Text, { size: "h4", weight: "regular", className: "leadgen-title", dangerouslySetInnerHTML: { __html: title } }));
     }, [title]);
     return (React__default.createElement(StyledLeadGenSubscriptionBoxA, { className: "subcription_box_A" },
         React__default.createElement(StyledLeadGenSubscriptionBoxHeader, { className: "leadgen-subscription_box_header" },
@@ -4263,332 +4321,11 @@ const EmptyComponent = ({ onClose, onContinue, }) => {
 
 const SubtitleBlock = ({ children, align, }) => (React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
-const cssInputNotShrink = css `
-  height: 100% !important;
-  min-height: calc(var(--container-height, 56px) * 24 / 56);
-  color: ${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: ${theme.colors.gray400};
-  }
-`;
-const cssInputShrink = css `
-  height: auto !important;
-  cursor: text;
-  opacity: 1;
-  transition: 0.1s ease-in-out all;
-`;
-const cssLabelNotShrink = css `
-  position: absolute;
-  top: calc(var(--container-height) / 2);
-  left: var(--space-x, 16px);
-  color: ${theme.colors.gray400};
-  font-size: var(--label-not-shrink, 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 = css `
-  color: ${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 = css `
-  min-height: var(--container-height, 56px);
-  display: flex;
-  align-items: flex-end;
-  border: 1px solid ${theme.colors.gray200};
-  border-radius: 8px;
-  background-color: #fff;
-  padding-inline: var(--space-x, 16px);
-  padding-block: var(--space-y-not-shrink, 16px);
-  cursor: pointer;
-  pointer-events: none;
-
-  &:has(.mantine-Input-rightSection) {
-    padding-right: var(--container-height, 56px);
-  }
-
-  .mantine-Input-icon {
-    display: none;
-  }
-
-  .mantine-NumberInput-control {
-    border-color: ${theme.colors.gray200};
-  }
-`;
-const cssWrapperInputShrink = css `
-  height: auto;
-  min-height: var(--container-height, 56px);
-  padding-block: var(--space-y-shrink, 7px);
-  cursor: text;
-  pointer-events: auto;
-`;
-const cssInputWrapperError = css `
-  color: ${theme.colors.red800};
-  font-size: 12px;
-  line-height: 1.5;
-`;
-const StyledTextFieldContainer = styled.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: ${theme.colors.red400};
-      }
-    }
-
-    .mantine-Input-wrapper {
-      &:has([data-invalid]) {
-        border-color: ${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: ${theme.colors.primary600};
-      box-shadow: 0 0 4px ${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: ${theme.colors.gray800} !important;
-      :focus {
-        color: ${theme.colors.gray800} !important;
-      }
-    }
-  }
-
-  &:has(.PhoneInput) {
-    .mantine-InputWrapper-label {
-      left: calc(
-        var(--space-x, 16px) + var(--phone-select, 75px) +
-          var(--phone-input-space-x, 8px)
-      );
-    }
-  }
-`;
-const StyledChoiceFieldContainer = styled.div `
-  &.leadgen-form_checkbox,
-  &.leadgen-form_radio {
-    width: 100%;
-  }
-
-  &.leadgen-form_dropdown {
-    width: calc(50% - 12px);
-  }
-
-  .mantine-InputWrapper-root {
-    display: block;
-  }
-
-  .mantine-InputWrapper-label {
-    margin-bottom: 0.5rem;
-    color: ${theme.colors.gray800};
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 1.5;
-  }
-
-  .mantine-Radio-root,
-  .mantine-Checkbox-root {
-    gap: 8px;
-    min-width: calc(50% - 4px);
-
-    // input[type='radio'],
-    // input[type='checkbox'] {
-    //   border-color: ${theme.colors.gray600};
-    //   width: 18px;
-    //   height: 18px;
-    // }
-    // input[type='checkbox'] {
-    //   border-radius: 4px;
-    // }
-
-    // &[data-checked='true'] {
-    //   input[type='radio'],
-    //   input[type='checkbox'] {
-    //     border-color: ${theme.colors.primary600};
-    //   }
-
-    //   input[type='radio'] {
-    //     background-color: white;
-    //   }
-    // }
-
-    .mantine-Checkbox-input {
-      &:checked {
-        border-color: ${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 = __rest(props, ["shrink", "onChangeShrink", "className", "children"]);
-    const containerRef = useClickOutside(() => {
-        if (shrinkProps) {
-            return;
-        }
-        setShrink(false);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
-    });
-    const [shrink, setShrink] = 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 = 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]);
-    useEffect(() => {
-        setShrink(shrinkProps);
-    }, [shrinkProps]);
-    return (React__default.createElement(StyledTextFieldContainer, Object.assign({ shrink: shrink, className: clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps),
-        React__default.createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, children)));
-};
-const ChoiceField = (props) => {
-    const { children, className } = props, restProps = __rest(props, ["children", "className"]);
-    return (React__default.createElement(StyledChoiceFieldContainer, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
-};
-
 const TitleBlock = ({ children, align, }) => (React__default.createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, }) => {
     const { t } = useTranslations();
+    const { classes } = useTextStyles();
     const form = useLeadFormContext();
     const formValues = form.values;
     const labelTuples = useMemo(() => {
@@ -4609,23 +4346,47 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 return (React__default.createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: " ", 
+                    React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChangeRaw={(e) => inputOnChange('text', e)}
-                        label: label, "data-control": "text", "data-lead-control": name, "data-is-required": required, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value), { name: value }))));
+                        label: React__default.createElement(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.createElement(Flex, { align: 'center', gap: 4 },
+                            React__default.createElement(ErrorIcon, { size: 12 }),
+                            React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))) }))))));
             case 'NumberBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(NumberInput$1, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: " ", 
+                    React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(NumberInput$1, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChange={(e) => inputOnChange('number', e)}
-                        label: label, "data-control": "number", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: React__default.createElement(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.createElement(Flex, { align: 'center', gap: 4 },
+                            React__default.createElement(ErrorIcon, { size: 12 }),
+                            React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))) }))))));
             case 'EmailBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
+                    React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
                         // type="email"
                         placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, "data-control": "email", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: React__default.createElement(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.createElement(Flex, { align: 'center', gap: 4 },
+                            React__default.createElement(ErrorIcon, { size: 12 }),
+                            React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))), styles: (theme) => ({
+                            input: GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN]
+                                .p2,
+                        }) }))))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -4635,19 +4396,38 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: clsx('lead-modal__form-control leadgen-form_field', {
                         'leadgen-form_field_error': !!error,
                     }) },
-                    React__default.createElement(Input$1.Wrapper, { size: "md", withAsterisk: required, label: label, "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
+                    React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(Input$1.Wrapper, { size: "md", withAsterisk: required, label: React__default.createElement(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.createElement(Flex, { align: 'center', gap: 4 },
+                            React__default.createElement(ErrorIcon, { size: 12 }),
+                            React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))) },
                         React__default.createElement("div", { className: "mantine-Input-wrapper" },
-                            React__default.createElement(Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: " ", 
+                            React__default.createElement(Phone, Object.assign({ className: `mantine-Input-input ${classes.p2}`, name: value, spellCheck: false, type: "tel", placeholder: " ", 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
-                                id: htmlForId, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required }, formPhoneInputWrapper))))));
+                                id: htmlForId, defaultCountry: (locale
+                                    ? MAPPED_LOCALE[locale] || 'VN'
+                                    : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required }, formPhoneInputWrapper))))))));
             }
             case 'LocationBlock': {
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__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)))));
+                    React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: React__default.createElement(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.createElement(Flex, { align: 'center', gap: 4 },
+                            React__default.createElement(ErrorIcon, { size: 12 }),
+                            React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))) })))),
+                    React__default.createElement(TextField.Icon, { Icon: MapPin })));
             }
             case 'DateBlock': {
                 const _c = form.getInputProps(value), { error } = _c, formInputProps = __rest(_c, ["error"]);
-                return (React__default.createElement(Input$1.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" },
+                return (React__default.createElement(Input$1.Wrapper, { key: index, size: "md", withAsterisk: required, label: React__default.createElement(Text, { size: "p2", variant: "primary" }, label), "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: form.errors[value] && (React__default.createElement(Flex, { align: 'center', gap: 4 },
+                        React__default.createElement(ErrorIcon, { size: 12 }),
+                        React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))), className: "lead-modal__form-control leadgen-form_field" },
                     React__default.createElement(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':
@@ -4664,7 +4444,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         }, "data-name": value + '-mailchimp' })),
                     React__default.createElement(Checkbox.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, size: "md", sx: {
+                        label: React__default.createElement(Text, { size: "p2", variant: "primary" }, label), size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             flexWrap: 'wrap',
@@ -4677,41 +4457,44 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     isSendMailChimp && (React__default.createElement(Input$1, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
                     React__default.createElement(Radio.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
+                        label: React__default.createElement(Text, { size: "p2", variant: "primary" }, label), size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
                         } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name, "data-is-required": required }))))));
             case 'DropdownBlock':
                 return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index },
-                    React__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.createElement(Select
-                    // className="lead-modal__form-control leadgen-form_field"
-                    , Object.assign({ 
+                    React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(React__default.Fragment, null,
+                        React__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.createElement(Select
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, placeholder: " ", searchable: true, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
-                            value: l.value,
-                            label: l.placeholder,
-                        })), nothingFound: React__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,
+                        , Object.assign({ 
+                            // className="lead-modal__form-control leadgen-form_field"
+                            label: React__default.createElement(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.createElement(NoData, null), rightSection: React__default.createElement(TextField.Icon, { Icon: ChevronDown }), styles: {
+                                item: {
+                                    paddingBlock: 12,
+                                    paddingInline: 10,
+                                    fontSize: 16,
+                                    lineHeight: 1.5,
                                 },
-                            },
-                        }, maxDropdownHeight: 192 }, form.getInputProps(value)))));
+                                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.createElement(Flex, { align: 'center', gap: 4 },
+                                React__default.createElement(ErrorIcon, { size: 12 }),
+                                React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))) })))))));
             case 'TncBlock':
                 const _d = form.getInputProps(`TNC-${id}`), { error } = _d, tncInputProps = __rest(_d, ["error"]);
                 return (React__default.createElement(ChoiceField, { className: "leadgen-form_checkbox", key: id },