@hhgtech/hhg-components 1.29.417-beta-1 → 1.29.417-beta-3

package/build/lead.js

@@ -2,59 +2,59 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-20b43eea.js');
+var tslib_es6 = require('./tslib.es6-a0832fdc.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-312cab9a.js');
+var index = require('./index-9beb0e50.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-323f4397.js');
-var translationsContext = require('./translationsContext-d00809db.js');
-var utils$1 = require('./utils-2a28032e.js');
-var index$2 = require('./index-a009cad4.js');
-var index$3 = require('./index-87810c70.js');
-var index$5 = require('./index-f82ab743.js');
-var index$4 = require('./index-500486d6.js');
-require('./index.styles-0bd3f778.js');
+var index$1 = require('./index-18d2feae.js');
+var translationsContext = require('./translationsContext-0f2232e1.js');
+var utils$1 = require('./utils-bf10266a.js');
+var index$2 = require('./index-867b0d1b.js');
+var index$3 = require('./index-bc87fcd6.js');
+var index$5 = require('./index-b0f7b058.js');
+var index$4 = require('./index-70ff4d69.js');
+require('./index.styles-ede8df34.js');
 var hooks = require('@mantine/hooks');
-require('./index-79a1d3f1.js');
-var text = require('./text-aecd4d4a.js');
-require('./index-5d190a00.js');
-var utils = require('./utils-d1989377.js');
+require('./index-2ff39b7b.js');
+var text = require('./text-f11838ac.js');
+require('./index-7f24b37d.js');
+var utils = require('./utils-c9f5e36f.js');
 var dates = require('@mantine/dates');
-var index$7 = require('./index-5bf1a9bc.js');
-var index$a = require('./index-95ff590d.js');
-require('./index-ec804d3a.js');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-4af640db.js');
-var index$6 = require('./index-0137a381.js');
-var translationsProvider = require('./translationsProvider-c22e6542.js');
-var Locale = require('./Locale-e4f4809e.js');
+var index$7 = require('./index-79ce6ed4.js');
+var index$a = require('./index-72a2fce1.js');
+require('./index-2705aec2.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-20fbccc8.js');
+var index$6 = require('./index-a754338d.js');
+var translationsProvider = require('./translationsProvider-d9e28e05.js');
+var Locale = require('./Locale-54ba6d01.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-129d3057.js');
-var index$8 = require('./index-4b0e6ef1.js');
-var index$9 = require('./index-d9549c48.js');
-var index$b = require('./index-8b6ea64e.js');
+var togetherComponentGlobalContext = require('./utils-953d0a7a.js');
+var index$8 = require('./index-d83b4150.js');
+var index$9 = require('./index-f985b5c0.js');
+var index$b = require('./index-9172bce8.js');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
-var InputDate = require('./InputDate-9e30b876.js');
-var index$c = require('./index-ba8655a3.js');
-var Close = require('./Close-bebcc13f.js');
+var InputDate = require('./InputDate-a1ff6b6c.js');
+var index$c = require('./index-cce655e5.js');
+var Close = require('./Close-b2b035c3.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-ea5370a3.js');
+require('./normalizeLink-b158ac8d.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-c76809b6.js');
+require('./useUniqueId-3ed7ca22.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
-require('./shared-c1681872.js');
+require('./shared-2f2da3af.js');
 require('@mantine/notifications');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
@@ -70,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-a9d3b563.js');
+require('./index-1beefddb.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-8771bb6b.js');
+require('./constants-03292e67.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -2976,7 +2976,7 @@ const cssWrapperInputNotShrink$1 = react.css `
 const cssWrapperInputShrink$1 = react.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;
 `;
@@ -2988,7 +2988,7 @@ const cssInputWrapperError$1 = react.css `
 const StyledTextFieldContainer$1 = styled__default["default"].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;
@@ -4390,15 +4390,28 @@ const EmptyComponent = ({ onClose, onContinue, }) => {
             React__default["default"].createElement(core.Button, { onClick: onContinue, size: "lg", variant: "filled", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_again" }, t('lead.empty.submitAgain')))));
 };
 
+var useTextStyles = core.createStyles((theme) => {
+    return text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN];
+});
+
+const ErrorIcon = (_a) => {
+    var { size } = _a, rest = tslib_es6.__rest(_a, ["size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return (React__default["default"].createElement("svg", Object.assign({ width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("path", { d: "M5.996 6.513q.163 0 .282-.12a.38.38 0 0 0 .118-.28V3.937q0-.15-.118-.268a.4.4 0 0 0-.282-.119.4.4 0 0 0-.281.12.38.38 0 0 0-.119.28v2.175q0 .15.119.269.12.119.281.119m0 1.862a.43.43 0 0 0 .3-.112.4.4 0 0 0 .125-.313.4.4 0 0 0-.125-.3.4.4 0 0 0-.3-.125.4.4 0 0 0-.3.125.4.4 0 0 0-.125.3.4.4 0 0 0 .125.313.43.43 0 0 0 .3.112m0 2.375a4.6 4.6 0 0 1-1.856-.375 4.8 4.8 0 0 1-1.506-1.012A4.8 4.8 0 0 1 1.62 7.857 4.6 4.6 0 0 1 1.246 6q0-.987.375-1.856t1.013-1.506A4.8 4.8 0 0 1 4.14 1.625a4.6 4.6 0 0 1 1.856-.375q.988 0 1.857.375Q8.72 2 9.359 2.638q.637.637 1.012 1.506T10.747 6t-.375 1.857A4.8 4.8 0 0 1 9.36 9.363a4.8 4.8 0 0 1-1.506 1.012q-.87.375-1.857.375", fill: "#F44D2C" })));
+};
+ErrorIcon.defaultProps = {
+    size: 18,
+    color: miscTheme.theme.colors.gray600,
+    activeColor: miscTheme.theme.colors.primaryBase,
+};
+
 const 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;
@@ -4421,11 +4434,6 @@ 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;
@@ -4433,11 +4441,7 @@ const cssLabelNotShrink = react.css `
   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);
+  top: var(--space-y-shrink, 6px);
   transform: none;
   transition: 0.125s ease-out all;
 `;
@@ -4468,7 +4472,7 @@ const cssWrapperInputNotShrink = react.css `
 const cssWrapperInputShrink = react.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;
 `;
@@ -4480,7 +4484,7 @@ const cssInputWrapperError = react.css `
 const StyledTextFieldContainer = styled__default["default"].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;
@@ -4707,7 +4711,7 @@ const TextField = (props) => {
         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)));
+        React__default["default"].createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, typeof children === 'function' ? children(shrink) : children)));
 };
 const ChoiceField = (props) => {
     const { children, className } = props, restProps = tslib_es6.__rest(props, ["children", "className"]);
@@ -4718,6 +4722,7 @@ const TitleBlock = ({ children, align, }) => (React__default["default"].createEl
 
 const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, }) => {
     const { t } = index$1.useTranslations();
+    const { classes } = useTextStyles();
     const form = useLeadFormContext();
     const formValues = form.values;
     const labelTuples = React.useMemo(() => {
@@ -4737,24 +4742,44 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
             case 'SubtitleBlock':
                 return (React__default["default"].createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
-                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(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: label, "data-control": "text", "data-lead-control": name, "data-is-required": required, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value), { name: value }))));
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" }, (shrink) => (React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: " ", 
+                    // className="lead-modal__form-control leadgen-form_field"
+                    // onChangeRaw={(e) => inputOnChange('text', e)}
+                    label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-control": "text", "data-lead-control": name, "data-is-required": required, inputWrapperOrder: [
+                        '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]))) })))));
             case 'NumberBlock':
-                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    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: label, "data-control": "number", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" }, (shrink) => (React__default["default"].createElement(core.NumberInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: " ", 
+                    // className="lead-modal__form-control leadgen-form_field"
+                    // onChange={(e) => inputOnChange('number', e)}
+                    label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-control": "number", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: [
+                        '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]))) })))));
             case 'EmailBlock':
-                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(core.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)))));
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" }, (shrink) => (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: text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2,
+                    }) })))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -4763,20 +4788,30 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 const _b = form.getInputProps(value), { error } = _b, formPhoneInputWrapper = tslib_es6.__rest(_b, ["error"]);
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: core.clsx('lead-modal__form-control leadgen-form_field', {
                         'leadgen-form_field_error': !!error,
-                    }) },
-                    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))))));
+                    }) }, (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: error },
+                    React__default["default"].createElement("div", { className: "mantine-Input-wrapper" },
+                        React__default["default"].createElement(index$3.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 ? 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(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)))));
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" }, (shrink) => (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))))));
             }
             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: label, "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error, className: "lead-modal__form-control leadgen-form_field" },
+                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" },
                     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':
@@ -4793,7 +4828,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         }, "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: label, size: "md", sx: {
+                        label: React__default["default"].createElement(index$2.Text, { size: "p2", variant: "primary" }, label), size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             flexWrap: 'wrap',
@@ -4806,20 +4841,22 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     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: label, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
+                        label: React__default["default"].createElement(index$2.Text, { size: "p2", variant: "primary" }, label), size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
                         } }, form.getInputProps(value)), 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 },
+                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index }, (shrink) => (React__default["default"].createElement(React__default["default"].Fragment, null,
                     React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name, "data-is-required": required }),
                     React__default["default"].createElement(index$3.Select
                     // className="lead-modal__form-control leadgen-form_field"
                     , Object.assign({ 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, placeholder: " ", searchable: true, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
+                        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), styles: {
+                        })), nothingFound: React__default["default"].createElement(NoData, null), 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: {
                             item: {
                                 paddingBlock: 12,
                                 paddingInline: 10,
@@ -4840,7 +4877,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                                     paddingInline: 0,
                                 },
                             },
-                        }, maxDropdownHeight: 192 }, form.getInputProps(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 },
@@ -5795,8 +5832,6 @@ const formatTrackingData = (params) => {
 // mount css
 const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor, apiSubotUrl, DEBUG_URL, forceCampaign, children, extraPayloadValues = [], excludeExitRulesHandler, userInfo, onClose: onCloseProps, onSubmit: onSubmitProps, flatComponent, }) => {
     var _a, _b;
-    const theme = core.useMantineTheme();
-    console.log({ theme });
     const scrollEventHandlerRef = React.useRef();
     const leadStartTimeRef = React.useRef(Date.now());
     const { apiUrl } = React.useMemo(() => {

package/build/{logoIcon-355ba1ce.js → logoIcon-596871d4.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-ec804d3a.js');
-var index$1 = require('./index-8b6ea64e.js');
+var index = require('./index-2705aec2.js');
+var index$1 = require('./index-9172bce8.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/mantine.js

@@ -2,45 +2,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-87810c70.js');
-var index$1 = require('./index-f82ab743.js');
-var index$2 = require('./index-a009cad4.js');
-var index$3 = require('./index-500486d6.js');
-var index$4 = require('./index-043884f9.js');
+var index = require('./index-bc87fcd6.js');
+var index$1 = require('./index-b0f7b058.js');
+var index$2 = require('./index-867b0d1b.js');
+var index$3 = require('./index-70ff4d69.js');
+var index$4 = require('./index-5001f706.js');
 var React = require('react');
-var index$5 = require('./index-0df92920.js');
-var tslib_es6 = require('./tslib.es6-20b43eea.js');
+var index$5 = require('./index-e955c9bc.js');
+var tslib_es6 = require('./tslib.es6-a0832fdc.js');
 var core = require('@mantine/core');
 var miscTheme = require('./miscTheme.js');
-var index$6 = require('./index-3875f249.js');
+var index$6 = require('./index-b1464037.js');
 var hooks = require('@mantine/hooks');
-var index$7 = require('./index-f264d06a.js');
-var index$8 = require('./index-4b0e6ef1.js');
-var index$9 = require('./index-79a1d3f1.js');
-var text = require('./text-aecd4d4a.js');
-var index$a = require('./index-5d190a00.js');
+var index$7 = require('./index-fa49995c.js');
+var index$8 = require('./index-d83b4150.js');
+var index$9 = require('./index-2ff39b7b.js');
+var text = require('./text-f11838ac.js');
+var index$a = require('./index-7f24b37d.js');
 require('@hhgtech/icons/other');
-require('./index-ec804d3a.js');
+require('./index-2705aec2.js');
 require('./constantsDomainLocales.js');
-require('./Locale-e4f4809e.js');
+require('./Locale-54ba6d01.js');
 require('./constantsIsProduction.js');
-require('./index-8b6ea64e.js');
-require('./utils-2a28032e.js');
+require('./index-9172bce8.js');
+require('./utils-bf10266a.js');
 require('@emotion/styled');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-c76809b6.js');
+require('./useUniqueId-3ed7ca22.js');
 require('./constantsSite.js');
-require('./index-95ff590d.js');
+require('./index-72a2fce1.js');
 require('@hhgtech/icons/core');
 require('@mantine/dates');
-require('./index-5bf1a9bc.js');
+require('./index-79ce6ed4.js');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
-require('./shared-c1681872.js');
-require('./index.styles-0bd3f778.js');
-require('./index-323f4397.js');
-require('./translationsContext-d00809db.js');
+require('./shared-2f2da3af.js');
+require('./index.styles-ede8df34.js');
+require('./index-18d2feae.js');
+require('./translationsContext-0f2232e1.js');
 require('dayjs');
 require('@mantine/notifications');
 

package/build/misc.js

@@ -2,39 +2,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var localizeNumberFormat = require('./localizeNumberFormat-31861782.js');
-var animation = require('./animation-969343c9.js');
+var localizeNumberFormat = require('./localizeNumberFormat-a5970d23.js');
+var animation = require('./animation-8cfdd7a2.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
 require('react');
 require('@mantine/core');
-require('./index-79a1d3f1.js');
-require('./text-aecd4d4a.js');
-var number = require('./number-b504ccea.js');
-var normalizeLink = require('./normalizeLink-ea5370a3.js');
+require('./index-2ff39b7b.js');
+require('./text-f11838ac.js');
+var number = require('./number-d1d8b642.js');
+var normalizeLink = require('./normalizeLink-b158ac8d.js');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-2a28032e.js');
+var utils = require('./utils-bf10266a.js');
 var miscGetDynamicHealthTool = require('./miscGetDynamicHealthTool.js');
 var miscGetSocialList = require('./miscGetSocialList.js');
 var miscScreenSizeContext = require('./miscScreenSizeContext.js');
-var dataTransform = require('./dataTransform-96a55157.js');
+var dataTransform = require('./dataTransform-319d00fb.js');
 require('dayjs');
 require('@emotion/react');
-require('./tslib.es6-20b43eea.js');
-require('./index-95ff590d.js');
-require('./Locale-e4f4809e.js');
+require('./tslib.es6-a0832fdc.js');
+require('./index-72a2fce1.js');
+require('./Locale-54ba6d01.js');
 require('@mantine/notifications');
-require('./index-5bf1a9bc.js');
+require('./index-79ce6ed4.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
-require('./index-ec804d3a.js');
-require('./shared-c1681872.js');
-require('./core-b7a1114b.js');
-require('./WhatsApp-70211dc5.js');
-require('./index-0072e357.js');
-require('./index-a9d3b563.js');
+require('./index-2705aec2.js');
+require('./shared-2f2da3af.js');
+require('./core-9ffee9ea.js');
+require('./WhatsApp-102f7e40.js');
+require('./index-a854eee5.js');
+require('./index-1beefddb.js');
 require('js-cookie');
 require('uuid');
 require('lodash/throttle');

package/build/miscGetDynamicHealthTool.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-20b43eea.js');
-var normalizeLink = require('./normalizeLink-ea5370a3.js');
-var core = require('./core-b7a1114b.js');
+var tslib_es6 = require('./tslib.es6-a0832fdc.js');
+var normalizeLink = require('./normalizeLink-b158ac8d.js');
+var core = require('./core-9ffee9ea.js');
 require('./constantsDomainLocales.js');
-require('./Locale-e4f4809e.js');
+require('./Locale-54ba6d01.js');
 require('./constantsIsProduction.js');
 
 const formatHealthTool = (healthTool, locale) => {

package/build/miscGetSocialList.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var tslib_es6 = require('./tslib.es6-20b43eea.js');
-var WhatsApp = require('./WhatsApp-70211dc5.js');
-var index = require('./index-95ff590d.js');
-var index$2 = require('./index-0072e357.js');
-var index$1 = require('./index-ec804d3a.js');
-var Locale = require('./Locale-e4f4809e.js');
-require('./index-a9d3b563.js');
-require('./index-5bf1a9bc.js');
+var tslib_es6 = require('./tslib.es6-a0832fdc.js');
+var WhatsApp = require('./WhatsApp-102f7e40.js');
+var index = require('./index-72a2fce1.js');
+var index$2 = require('./index-a854eee5.js');
+var index$1 = require('./index-2705aec2.js');
+var Locale = require('./Locale-54ba6d01.js');
+require('./index-1beefddb.js');
+require('./index-79ce6ed4.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');

package/build/miscScreenSizeContext.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var throttle = require('lodash/throttle');
-var utils = require('./utils-2a28032e.js');
+var utils = require('./utils-bf10266a.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/mobileBottomNavigation.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-20b43eea.js');
+var tslib_es6 = require('./tslib.es6-a0832fdc.js');
 var React = require('react');
-var mobileBottomNavigationIcon = require('./MobileBottomNavigationIcon-8a341f57.js');
-require('./index-a009cad4.js');
+var mobileBottomNavigationIcon = require('./MobileBottomNavigationIcon-b2e8f671.js');
+require('./index-867b0d1b.js');
 require('@mantine/core');
-require('./text-aecd4d4a.js');
+require('./text-f11838ac.js');
 require('./miscTheme.js');
 require('@emotion/react');
 require('@emotion/styled');
-require('./utils-2a28032e.js');
+require('./utils-bf10266a.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/mobileBottomNavigationIcon.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-20b43eea.js');
+require('./tslib.es6-a0832fdc.js');
 require('react');
-require('./index-a009cad4.js');
+require('./index-867b0d1b.js');
 require('./miscTheme.js');
-var mobileBottomNavigationIcon = require('./MobileBottomNavigationIcon-8a341f57.js');
+var mobileBottomNavigationIcon = require('./MobileBottomNavigationIcon-b2e8f671.js');
 require('@mantine/core');
-require('./text-aecd4d4a.js');
+require('./text-f11838ac.js');
 require('@emotion/react');
 require('@emotion/styled');
-require('./utils-2a28032e.js');
+require('./utils-bf10266a.js');