@hhgtech/hhg-components 1.29.42 → 1.29.43

package/build/{index-56cf325c.js → index-e9dac48f.js}

@@ -1,71 +1,70 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-b2034af4.js');
-var index_styles = require('./index.styles-6fcbfe1c.js');
-var utils = require('./utils-20389cd3.js');
-var index$3 = require('./index-4fbef592.js');
-var index$4 = require('./index-46a403de.js');
-var tslib_es6 = require('./tslib.es6-21bc76dd.js');
+var index$2 = require('./index-e1ab3b36.js');
+var index_styles = require('./index.styles-cef9703d.js');
+var utils = require('./utils-1f428807.js');
+var index$3 = require('./index-00302cb4.js');
+var index$4 = require('./index-2a48c97f.js');
+var tslib_es6 = require('./tslib.es6-86f09fff.js');
 var other = require('@hhgtech/icons/other');
-var index$6 = require('./index-c78fbad6.js');
-var index$5 = require('./index-e42193d1.js');
-var theme = require('./theme-0c7de955.js');
+var index$6 = require('./index-122c5fb9.js');
+var index$5 = require('./index-35563f12.js');
+var theme = require('./theme-98664cfd.js');
 var core = require('@mantine/core');
 var innertext = require('innertext');
 require('@mantine/dates');
-var index$b = require('./index-360ff7c3.js');
-var index$k = require('./index-d5b0e368.js');
-require('./useMantineLocale-741637f6.js');
-require('./translationsContext-f0b00799.js');
+var index$b = require('./index-57683f28.js');
+var index$j = require('./index-ec93dd5c.js');
+require('./useMantineLocale-904a06a5.js');
+require('./translationsContext-4b7afa0b.js');
 require('string-format');
 var hooks = require('@mantine/hooks');
-var index$7 = require('./index-f49fc384.js');
+var index$7 = require('./index-3a44158b.js');
 var styled = require('@emotion/styled');
 var throttle = require('lodash/throttle');
-var index$8 = require('./index-a11eaf40.js');
-var index$a = require('./index-4ec18b8e.js');
-var index$9 = require('./index-f1fec527.js');
+var index$8 = require('./index-fdd78527.js');
+var index$a = require('./index-6922d805.js');
+var index$9 = require('./index-de3537ec.js');
 var react = require('@emotion/react');
 var parse = require('html-react-parser');
-var isProduction = require('./isProduction-a589f8e0.js');
-var useTranslations = require('./useTranslations-ae9962a2.js');
+var isProduction = require('./isProduction-b1fe9e14.js');
+var useTranslations = require('./useTranslations-480f64da.js');
 var dateFns = require('date-fns');
 var dayjs = require('dayjs');
-var index$d = require('./index-ffb39121.js');
-var types = require('./types-c5c61b1f.js');
-var utils$1 = require('./utils-3559ef16.js');
-var index$e = require('./index-577374f5.js');
-var index$f = require('./index-bcb185da.js');
-var index$g = require('./index-1c6a470a.js');
-var index$c = require('./index-e407cc85.js');
-var index$i = require('./index-8b591908.js');
+var index$d = require('./index-c58213cc.js');
+var types = require('./types-68510635.js');
+var utils$1 = require('./utils-ca6f6696.js');
+var index$e = require('./index-fda0fbbe.js');
+var index$f = require('./index-d56f3314.js');
+var index$g = require('./index-bc5dcbc1.js');
+var index$c = require('./index-bb55a2a5.js');
+var index$i = require('./index-83b804f7.js');
 var form = require('@mantine/form');
-var useHealthToolCache = require('./useHealthToolCache-54b03fea.js');
-var index$h = require('./index-ebdaf69f.js');
+var useHealthToolCache = require('./useHealthToolCache-b6d91149.js');
+var index$h = require('./index-10d9cfdb.js');
 var reactHookForm = require('react-hook-form');
-require('./constants-dd84f8e3.js');
-require('./utils-956f04ea.js');
-var index$j = require('./index-6768d385.js');
-require('./WhatsApp-c618fc4b.js');
-require('./index.styled-47d1a79c.js');
-require('./index-261ce38d.js');
-var useOutsideClick = require('./useOutsideClick-fb7b0e11.js');
+var useOutsideClick = require('./useOutsideClick-cff03e12.js');
 var enUS = require('date-fns/locale/en-US');
 var id = require('date-fns/locale/id');
 var vi = require('date-fns/locale/vi');
 var zhTW = require('date-fns/locale/zh-TW');
-var getSocialList = require('./getSocialList-a960f8f9.js');
+var getSocialList = require('./getSocialList-f2fcc50f.js');
 var uuid = require('uuid');
-var routing = require('./routing-225709b4.js');
-var index$l = require('./index-026689eb.js');
+require('./constants-7fddc7f7.js');
+require('./utils-03baf837.js');
+require('./WhatsApp-da901a36.js');
+require('./index.styled-4f0b82d2.js');
+require('./index-1327fbe0.js');
+var routing = require('./routing-3285a2c2.js');
+var index$k = require('./index-e36755e5.js');
 var core$1 = require('@hhgtech/icons/core');
-var index$m = require('./index-ac5d1c65.js');
+var index$l = require('./index-0c6427d7.js');
 var Cookies = require('js-cookie');
 var flatten = require('lodash/flatten');
 var uniqBy = require('lodash/uniqBy');
-var cookieHelper = require('./cookieHelper-d38b57aa.js');
-var normalizeLink = require('./normalizeLink-81e44471.js');
+var cookieHelper = require('./cookieHelper-0b7f586d.js');
+var normalizeLink = require('./normalizeLink-2fbce9d9.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -3315,7 +3314,7 @@ const DueDateFormLastPeriod = ({ locale, onClick, siteType, pageUrl, }) => {
         React__default["default"].createElement(index$3.Button, { dataEventCategory: "Health Tool", dataEventAction: "Due Date", dataEventLabel: pageUrl, className: "due-date-calculate-button", size: "lg", variant: siteType === 'marryBaby' ? 'secondary' : 'primary', onClick: () => onClick(index$d.getDueDateLastPeriod(lastPeriodDate, periodLength), `${index$b.QUERY_HEALTH_TOOL.type}=0&${index$b.QUERY_HEALTH_TOOL.startDate}=${dateFns.format(lastPeriodDate, index$d.API_DATE_FORMAT)}&${index$b.QUERY_HEALTH_TOOL.additional}=${periodLength}`), role: "button" }, t('dueDatePage.lastPeriod.calculate'))));
 };
 
-const StyledTwins = styled__default["default"].div `
+styled__default["default"].div `
   &[data-is-side='true'] {
     width: 100%;
     margin-bottom: 0;
@@ -3359,7 +3358,7 @@ styled__default["default"].div `
     }
   }
 `;
-const StyledSubmitButton = styled__default["default"].div `
+styled__default["default"].div `
   width: 100%;
   display: flex;
   justify-content: center;
@@ -3405,7 +3404,7 @@ const StyledInputWrapper = styled__default["default"].div `
     }
   }
 `;
-const StyledFormInput = styled__default["default"].div `
+styled__default["default"].div `
   position: relative;
   width: calc(50% - 8px);
 
@@ -3897,7 +3896,7 @@ styled__default["default"].div `
     content: '';
   }
 `;
-const StyledRadioGroup = styled__default["default"](RadioGroup) `
+styled__default["default"](RadioGroup) `
   &[data-direction='horizontal'] div[data-type='circle'] {
     margin-right: 8px;
   }
@@ -3922,7 +3921,7 @@ const DueDateCardEmbed = ({ locale, onSubmitDueDate, dueDatePageInfo, expertUrl,
 
 const BmiFormContext = React.createContext({});
 
-const DefaultForm$1 = (props) => {
+const DefaultForm$2 = (props) => {
     var _a, _b, _c, _d;
     const { t, locale } = useTranslations.useTranslations();
     const { control, bmiGenerated, isTouched, linkTool, submitProps } = React.useContext(BmiFormContext);
@@ -3957,7 +3956,7 @@ const DefaultForm$1 = (props) => {
         React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${index$b.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
 };
 
-const InlineForm$1 = (props) => {
+const InlineForm$2 = (props) => {
     var _a, _b, _c, _d;
     const { t, locale } = useTranslations.useTranslations();
     const { control, bmiGenerated, isTouched, linkTool, submitProps } = React.useContext(BmiFormContext);
@@ -4049,7 +4048,7 @@ const BmiForm = (_a) => {
             isTouched,
             linkTool,
             submitProps,
-        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm$1, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm$1, Object.assign({}, commonProps)))));
+        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm$2, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm$2, Object.assign({}, commonProps)))));
 };
 
 const BMICardEmbed = (_a) => {
@@ -4112,12 +4111,24 @@ var useStyles$1 = core.createStyles((theme, { hasOnClickFn }) => {
     };
 });
 
-const BabyPoopEmbed = (_a) => {
-    var { babyPoopPage, onClickFindOut, currentUrl, sponsorLogo, btnProps } = _a, props = tslib_es6.__rest(_a, ["babyPoopPage", "onClickFindOut", "currentUrl", "sponsorLogo", "btnProps"]);
+const BabyPoopForm = (_a) => {
+    var { babyPoopPage, onClickFindOut, currentUrl, sponsorLogo, btnProps, styles, classNames } = _a, props = tslib_es6.__rest(_a, ["babyPoopPage", "onClickFindOut", "currentUrl", "sponsorLogo", "btnProps", "styles", "classNames"]);
     const { t } = useTranslations.useTranslations();
     const _theme = core.useMantineTheme();
     const isMarryBaby = _theme.other.template === 'mb';
-    const { classes } = useStyles$1({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopEmbed' });
+    const { classes } = useStyles$1({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopForm', styles, classNames });
+    return (React__default["default"].createElement(core.Box, Object.assign({ className: classes.root }, props),
+        sponsorLogo && (React__default["default"].createElement(core.Box, { className: classes.sponsorBox },
+            React__default["default"].createElement(index$2.Text, { size: "p4" }, t('common.sponsoredBy')),
+            React__default["default"].createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))),
+        React__default["default"].createElement(index$2.Text, { size: "p3", className: "description" }, babyPoopPage.description),
+        React__default["default"].createElement(index$3.Button, Object.assign({ className: classes.btn, size: isMarryBaby ? 'lg' : 'md', variant: isMarryBaby ? 'secondary' : 'primary', onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut'))));
+};
+
+const BabyPoopEmbed = (_a) => {
+    var { babyPoopPage, formProps } = _a, props = tslib_es6.__rest(_a, ["babyPoopPage", "formProps"]);
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
     const { reviewedBy, reviewedDate } = babyPoopPage || {};
     return (React__default["default"].createElement(HealthToolCardWrapper, Object.assign({}, props),
         React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: isMarryBaby
@@ -4128,17 +4139,12 @@ const BabyPoopEmbed = (_a) => {
                 date: reviewedDate,
             } }),
         React__default["default"].createElement(HealthToolCardWrapper.Body, null,
-            React__default["default"].createElement(core.Box, { className: classes.root },
-                sponsorLogo && (React__default["default"].createElement(core.Box, { className: classes.sponsorBox },
-                    React__default["default"].createElement(index$2.Text, { size: "p4" }, t('common.sponsoredBy')),
-                    React__default["default"].createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))),
-                React__default["default"].createElement(index$2.Text, { size: "p3", className: "description" }, babyPoopPage.description),
-                React__default["default"].createElement(index$3.Button, Object.assign({ className: classes.btn, size: isMarryBaby ? 'lg' : 'md', variant: isMarryBaby ? 'secondary' : 'primary', onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut'))))));
+            React__default["default"].createElement(BabyPoopForm, Object.assign({ babyPoopPage: babyPoopPage }, formProps)))));
 };
 
 const ThrFormContext = React.createContext({});
 
-const DefaultForm = (_a) => {
+const DefaultForm$1 = (_a) => {
     var _b;
     var props = tslib_es6.__rest(_a, []);
     const { t, locale } = useTranslations.useTranslations();
@@ -4168,7 +4174,7 @@ const DefaultForm = (_a) => {
         React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${index$b.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
 };
 
-const InlineForm = (_a) => {
+const InlineForm$1 = (_a) => {
     var _b;
     var props = tslib_es6.__rest(_a, []);
     const { t, locale } = useTranslations.useTranslations();
@@ -4343,7 +4349,7 @@ const ThrForm = (_a) => {
             linkTool,
             form: form$1,
             submitProps,
-        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
+        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm$1, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm$1, Object.assign({}, commonProps)))));
 };
 
 const THRCardEmbed = (_a) => {
@@ -4501,175 +4507,138 @@ const OvulationCardEmbed = ({ onSubmitOvulation, locale, ovulationPageInfo, expe
             React__default["default"].createElement(OvulationCalculator, { siteType: siteType, locale: locale, onSubmitOvulation: onSubmitOvulation, isSide: isSide }))));
 };
 
-const PWGInputForm = ({ siteType, info, onChange, errorMessage = {}, }) => {
-    const { t } = useTranslations.useTranslations();
-    const [isEdit, setIsEdit] = React.useState({
-        weightBefore: false,
-        height: false,
-        weight: false,
-    });
-    const [height, setHeight] = React.useState(0);
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        var _a;
-        setHeight((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
-    });
-    const checkValidInputIsANumber = (s, cb) => {
-        if (s === '' || (!isNaN(s) && !isNaN(parseFloat(s)))) {
-            cb(s);
-        }
-    };
-    const onWeightBeforeChanged = (weightBefore) => {
-        checkValidInputIsANumber(weightBefore, (a) => {
-            setIsEdit((value) => (Object.assign(Object.assign({}, value), { weightBefore: true })));
-            const newInfo = Object.assign(Object.assign({}, info), { weightBefore: a });
-            onChange && onChange(newInfo);
-        });
-    };
-    const onHeightChanged = (height) => {
-        checkValidInputIsANumber(height, (h) => {
-            setIsEdit((value) => (Object.assign(Object.assign({}, value), { height: true })));
-            const newInfo = Object.assign(Object.assign({}, info), { height: h });
-            onChange && onChange(newInfo);
-        });
-    };
-    const onWeightChanged = (weight) => {
-        checkValidInputIsANumber(weight, (w) => {
-            setIsEdit((value) => (Object.assign(Object.assign({}, value), { weight: true })));
-            const newInfo = Object.assign(Object.assign({}, info), { weight: w });
-            onChange && onChange(newInfo);
-        });
-    };
-    React.useEffect(() => {
-        onChange &&
-            onChange(Object.assign({}, info));
-    }, []);
-    React.useEffect(() => {
-        setIsEdit({
-            weightBefore: false,
-            height: false,
-            weight: false,
-        });
-    }, [errorMessage]);
-    return siteType === 'marryBaby' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: "input-form-pwg input-section" },
-            React__default["default"].createElement(index$d.StyledTextField, { label: t('pregnancyWeightGain.heightInput'), name: "pwg-height", size: "md", value: info === null || info === void 0 ? void 0 : info.height, CustomInput: React__default["default"].createElement(index$9.Input, { className: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.height) ? 'error-input' : '', name: "pwg-height", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: info === null || info === void 0 ? void 0 : info.height, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), errorMessage: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.height) ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.height : '', showErrorMessage: false, onChange: onHeightChanged }) })),
-        React__default["default"].createElement("div", { className: "input-form-pwg input-section" },
-            React__default["default"].createElement(index$d.StyledTextField, { label: t('pregnancyWeightGain.weightBeforeInput'), name: "pwg-weightBefore", size: "md", value: info === null || info === void 0 ? void 0 : info.weightBefore, CustomInput: React__default["default"].createElement(index$9.Input, { className: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weightBefore) ? 'error-input' : '', name: "pwg-weightBefore", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: info === null || info === void 0 ? void 0 : info.weightBefore, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), errorMessage: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weightBefore) ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.height : '', showErrorMessage: false, onChange: onWeightBeforeChanged }) })),
-        React__default["default"].createElement("div", { className: "input-form-pwg input-section" },
-            React__default["default"].createElement(index$d.StyledTextField, { label: t('pregnancyWeightGain.weightInput'), name: "pwg-weight", size: "md", value: info === null || info === void 0 ? void 0 : info.weight, CustomInput: React__default["default"].createElement(index$9.Input, { className: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weight) ? 'error-input' : '', name: "pwg-weight", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: info === null || info === void 0 ? void 0 : info.weight, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), errorMessage: !(isEdit === null || isEdit === void 0 ? void 0 : isEdit.weight) ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.weight : '', showErrorMessage: false, onChange: onWeightChanged }) })))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: "input-form-pwg" },
-            React__default["default"].createElement(index_styles.PureInput, { placeholder: t('pwg.placeholder.height'), className: "input-section", label: React__default["default"].createElement("span", { style: {
-                        color: theme.theme.colors.gray600,
-                        fontWeight: 'bold',
-                        marginBottom: '9px',
-                    }, className: "label-text" },
-                    t('pregnancyWeightGain.heightInput'),
-                    ' ',
-                    React__default["default"].createElement("span", { style: {
-                            color: `${theme.theme.colors.gray300}`,
-                        } }, t('bmi.heightInput.desc'))), errorMessage: !isEdit.height ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.height : '', size: "sm", isNumerousKeyboard: true, name: "pwg-height", value: info === null || info === void 0 ? void 0 : info.height, onChange: onHeightChanged })),
-        React__default["default"].createElement("div", { className: "input-form-pwg" },
-            React__default["default"].createElement(index_styles.PureInput, { placeholder: t('pwg.placeholder.weight'), className: "input-section", label: React__default["default"].createElement("span", { style: {
-                        color: theme.theme.colors.gray600,
-                        fontWeight: 'bold',
-                        marginBottom: '9px',
-                    }, ref: ref, className: "label-text" },
-                    t('pregnancyWeightGain.weightBeforeInput'),
-                    ' ',
-                    React__default["default"].createElement("span", { style: {
-                            color: `${theme.theme.colors.gray300}`,
-                        } }, t('pregnancyWeightGain.weightInput.desc'))), errorMessage: !isEdit.weightBefore ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.weightBefore : '', size: "sm", isNumerousKeyboard: true, name: "pwg-weightBefore", onChange: onWeightBeforeChanged, value: info === null || info === void 0 ? void 0 : info.weightBefore })),
-        React__default["default"].createElement("div", { className: "input-form-pwg" },
-            React__default["default"].createElement(index_styles.PureInput, { placeholder: t('pwg.placeholder.weight'), className: "input-section", label: React__default["default"].createElement("span", { style: {
-                        color: theme.theme.colors.gray600,
-                        fontWeight: 'bold',
-                        marginBottom: '9px',
-                        minHeight: height,
-                    }, className: "label-text" },
-                    t('pregnancyWeightGain.weightInput'),
-                    ' ',
-                    React__default["default"].createElement("span", { style: {
-                            color: `${theme.theme.colors.gray300}`,
-                        } }, t('pregnancyWeightGain.weightInput.desc'))), errorMessage: !isEdit.weight ? errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.weight : '', size: "sm", isNumerousKeyboard: true, name: "pwg-weight", value: info === null || info === void 0 ? void 0 : info.weight, onChange: onWeightChanged }))));
+const PWGFormContext = React.createContext({});
+
+const DefaultForm = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weekInput'), min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek'))),
+        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightBeforeInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'))),
+        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: t('pregnancyWeightGain.heightInput'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max }, form.getInputProps('height'))),
+        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('weight'))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${index$b.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
 };
 
-const PWGCardEmbed = ({ locale, onClick, inputErrorMessage, pwgContent, onFormChange, info, isSide = false, siteType, }) => {
-    var _a;
-    const { t } = useTranslations.useTranslations();
-    const [isTwins, setIsTwins] = React.useState('notwins');
-    const [cycleValue, setCycleValue] = React.useState({
-        label: '1',
-        value: 1,
+const InlineForm = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weekInput') },
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}`, rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }, form.getInputProps('pregnantWeek')))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({}, form.getInputProps('lastWeight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, "kg") }))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({}, form.getInputProps('height'), { min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '160',
+                }), rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, "cm") }))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({}, form.getInputProps('weight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), rightSection: React__default["default"].createElement(index$d.HealthToolFormWrapper.Unit, null, "kg") }))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.havingTwins'), width: 'none' },
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.Switching, Object.assign({}, form.getInputProps('hasTwin')))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${index$b.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const MbLayout = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default["default"].createElement(index$d.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weekInput'), rightSection: t('pregnancy.week') },
+                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek'), { error: null }))),
+            form.errors.pregnantWeek && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.pregnantWeek))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightBeforeInput'), rightSection: "kg" },
+                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'), { error: null }))),
+            form.errors.lastWeight && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.lastWeight))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.heightInput'), rightSection: "cm" },
+                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max }, form.getInputProps('height'), { error: null }))),
+            form.errors.height && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.height))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$d.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightInput'), rightSection: "kg" },
+                React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('weight'), { error: null }))),
+            form.errors.weight && (React__default["default"].createElement(index$d.HealthToolFormWrapper.Error, null, form.errors.weight))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
+        React__default["default"].createElement(index$d.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${index$b.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const INPUT_RANGE = {
+    height: {
+        min: 1,
+        max: 300,
+    },
+    weight: {
+        min: 1,
+        max: 200,
+    },
+    pregnantWeek: {
+        min: 1,
+        max: 40,
+    },
+};
+const PWGForm = (_a) => {
+    var { formLayout = 'default', submitProps, onSubmit } = _a, rest = tslib_es6.__rest(_a, ["formLayout", "submitProps", "onSubmit"]);
+    const { t, locale } = useTranslations.useTranslations();
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const form$1 = form.useForm({
+        validate: {
+            pregnantWeek: form.isNotEmpty(t('validation.error.requiredField')),
+            height: form.isNotEmpty(t('validation.error.requiredField')),
+            weight: (value, values) => {
+                return !value
+                    ? t('validation.error.requiredField')
+                    : Number(value) >= Number(values.lastWeight)
+                        ? null
+                        : t('pregnancyWeightGain.weightInput.error');
+            },
+            lastWeight: (value, values) => {
+                return !value
+                    ? t('validation.error.requiredField')
+                    : Number(value) < Number(values.weight)
+                        ? null
+                        : t('pregnancyWeightGain.weightInput.error');
+            },
+        },
     });
-    const weekPregnantLengthDropDownOptions = React.useMemo(() => [...Array(40)].map((_, index) => ({
-        label: `${index + 1}`,
-        value: `${index + 1}`,
-    })), []);
     const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
     const linkTool = React.useMemo(() => getHealthToolLink(utils$1.HEALTH_TOOL_TYPE.PWG), [getHealthToolLink]);
-    return (React__default["default"].createElement(HealthToolCardWrapper, { isPregTool: true },
-        React__default["default"].createElement(HealthToolCardWrapper.Banner, { bannerColor: siteType === 'marryBaby' && theme.theme.mbColors.mint, color: "pink", icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.featuredImage) ||
+    const commonProps = Object.assign({ onSubmit: form$1.onSubmit(onSubmit) }, rest);
+    return (React__default["default"].createElement(PWGFormContext.Provider, { value: {
+            linkTool,
+            form: form$1,
+            submitProps,
+        } }, isMarryBaby ? (React__default["default"].createElement(MbLayout, Object.assign({}, commonProps))) : formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+const PWGCardEmbed = (_a) => {
+    var _b;
+    var { pwgContent, formProps } = _a, props = tslib_es6.__rest(_a, ["pwgContent", "formProps"]);
+    const { t } = useTranslations.useTranslations();
+    return (React__default["default"].createElement(HealthToolCardWrapper, Object.assign({ isPregTool: true }, props),
+        React__default["default"].createElement(HealthToolCardWrapper.Banner, { icon: React__default["default"].createElement("img", { alt: "health-tool-icon", src: (pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.featuredImage) ||
                     index$6.CommonGAssets.getAssetPath('health-tools/pwg-icon.svg'), loading: "lazy" }), heading: t('pregnancyWeightGain.heading'), medicalReview: {
                 link: index$i.formatUserProfileUrl(pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy),
-                reviewer: (_a = pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy) === null || _a === void 0 ? void 0 : _a.display_name,
+                reviewer: (_b = pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedBy) === null || _b === void 0 ? void 0 : _b.display_name,
                 date: pwgContent === null || pwgContent === void 0 ? void 0 : pwgContent.reviewedDate,
             } }),
-        React__default["default"].createElement(index$j.Container, null,
-            React__default["default"].createElement(StyledContent, { onSubmit: (e) => e.preventDefault(), className: "pwg-view-mobile", "data-is-side": isSide },
-                siteType !== 'marryBaby' && (React__default["default"].createElement(StyledTwins, { className: "hide-asking-mobile", "data-is-side": isSide },
-                    React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", style: {
-                            display: 'block',
-                            color: theme.theme.colors.gray600,
-                        }, className: "label" }, t('pregnancyWeightGain.havingTwins')),
-                    React__default["default"].createElement(StyledRadioGroup, { options: [
-                            {
-                                value: 'twins',
-                                label: t('switchBtn.yes'),
-                            },
-                            {
-                                value: 'notwins',
-                                label: t('switchBtn.no'),
-                            },
-                        ], value: isTwins, onChange: (v) => setIsTwins(v), className: "gender-selector", id: "twins-check", direction: "horizontal", size: "small" }))),
-                React__default["default"].createElement(StyledInputWrapper, null,
-                    React__default["default"].createElement(StyledFormInput, { className: "input-section input-form-pwg", "data-is-side": isSide }, siteType === 'marryBaby' ? (React__default["default"].createElement(StyledDropDown, { groupedWithLabel: t('pregnancyWeightGain.weekInput'), options: weekPregnantLengthDropDownOptions, placeholder: "28 days", id: "due-date-dropdown", size: "lg", value: cycleValue, onChange: (o) => setCycleValue({
-                            label: o.label,
-                            value: o.value,
-                        }) })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-                        React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", style: {
-                                display: 'inline-block',
-                                marginBottom: '9px',
-                                color: theme.theme.colors.gray600,
-                            } }, t('pregnancyWeightGain.weekInput')),
-                        React__default["default"].createElement(index$c.Dropdown, { options: weekPregnantLengthDropDownOptions, placeholder: String(cycleValue.label), id: "weight-gain-dropdown", size: "md", value: cycleValue, onChange: (o) => setCycleValue({
-                                label: o.label,
-                                value: o.value,
-                            }) })))),
-                    React__default["default"].createElement(PWGInputForm, { siteType: siteType, info: info, errorMessage: inputErrorMessage, onChange: onFormChange })),
-                siteType !== 'marryBaby' && (React__default["default"].createElement(StyledTwins, { className: "hide-asking-desk", "data-is-side": isSide },
-                    React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", style: {
-                            display: 'block',
-                            color: theme.theme.colors.gray600,
-                        }, className: "label" }, t('pregnancyWeightGain.havingTwins')),
-                    React__default["default"].createElement(StyledRadioGroup, { options: [
-                            {
-                                value: 'twins',
-                                label: t('switchBtn.yes'),
-                            },
-                            {
-                                value: 'notwins',
-                                label: t('switchBtn.no'),
-                            },
-                        ], value: isTwins, onChange: (v) => setIsTwins(v), className: "gender-selector", id: "twins-check-mobile", direction: "horizontal", size: "small" }))),
-                siteType === 'marryBaby' && (React__default["default"].createElement(Checkbox, { name: "twins", label: t('pregnancyWeightGain.havingTwins'), checked: isTwins === 'twins', siteType: "marryBaby", onChange: () => {
-                        if (isTwins === 'twins')
-                            setIsTwins('notwins');
-                        else
-                            setIsTwins('twins');
-                    }, value: "twins" })),
-                React__default["default"].createElement(StyledSubmitButton, { "data-is-side": isSide, "data-site": siteType },
-                    React__default["default"].createElement(index$3.Button, { dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${index$b.domainLocales[siteType === 'marryBaby' ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button", size: "lg", variant: siteType === 'marryBaby' ? 'secondary' : 'primary', onClick: () => onClick(isTwins, cycleValue.value), role: "button" }, t('dueDatePage.lastPeriod.calculate')))))));
+        React__default["default"].createElement(HealthToolCardWrapper.Body, null,
+            React__default["default"].createElement(PWGForm, Object.assign({}, formProps)))));
 };
 
 const StyledCalendarWrapper$1 = styled__default["default"].div `
@@ -5368,7 +5337,7 @@ const DEFAULT_30S_AD_POS = [
 const ForwaredAdBlock = React.forwardRef(function InfinityAdBlock({ className, adUnitPath, size, divId, pos, sizeMapping, contentId, isHidden, hideIfHasSubot, isSticky, refreshInterval, // seconds
 customTargetings, style, adDefaultSize, noWrapper, showCloseBtn, onCloseAd, headerBottom, wrapperProps, locale, isMarryBaby, }, ref) {
     const defaultRefreshInterval = refreshInterval ||
-        (locale === index$k.LOCALE.Vietnam
+        (locale === index$j.LOCALE.Vietnam
             ? pos.some((p) => DEFAULT_30S_AD_POS.includes(p))
                 ? 30
                 : undefined
@@ -6019,7 +5988,7 @@ const BannerWithOptions = (props) => {
                             cursor: 'pointer',
                         },
                     } }))))),
-            React__default["default"].createElement(index$3.Button, Object.assign({ size: "sm" }, submitBtnTracking, buttonProps, { disabled: form$1.getInputProps('bannerOptions').value.length === 0, leftIcon: isMobile ? (React__default["default"].createElement(index$l.Icon.ArrowRightTail, { size: 18, useCurrentColor: true })) : undefined, onClick: () => {
+            React__default["default"].createElement(index$3.Button, Object.assign({ size: "sm" }, submitBtnTracking, buttonProps, { disabled: form$1.getInputProps('bannerOptions').value.length === 0, leftIcon: isMobile ? (React__default["default"].createElement(index$k.Icon.ArrowRightTail, { size: 18, useCurrentColor: true })) : undefined, onClick: () => {
                     const curValues = form$1.getInputProps('bannerOptions').value;
                     saveStep(curValues.join('|'));
                     handleClickOption(curValues.join('|'));
@@ -6118,7 +6087,7 @@ const SideBannerModal = (_a) => {
     const curBannerHeight = (viewportWidth * mobileBannerRatio.height) / mobileBannerRatio.width;
     const minHeightNha = (viewportHeight <= 667 ? 190 : 265) + curBannerHeight + 74;
     const [isFullScreen, setIsFullScreen] = React.useState(false);
-    return (React__default["default"].createElement(index$m.Modal, Object.assign({ styles: (theme) => ({
+    return (React__default["default"].createElement(index$l.Modal, Object.assign({ styles: (theme) => ({
             header: {
                 display: 'none',
             },
@@ -6885,7 +6854,7 @@ const PremiumNewsletterModal = ({ isMobile, isLoggedIn, pnSuggestCategory = [],
                     ga_client_id: Cookies__default["default"].get(index$b.GA_TOKEN_COOKIE),
                     client_ip: window.clientIP || '',
                     user_info: Object.assign(Object.assign({}, acquisitionInfo.userInfo), { name: name || formValues.name, type_subscription: 1 }),
-                    domain: index$b.domainLocales[locale || index$k.LOCALE.Vietnam],
+                    domain: index$b.domainLocales[locale || index$j.LOCALE.Vietnam],
                     category: selectCategory,
                     perferred: acquisitionInfo.preferredTopics.map(({ id }) => ({
                         id,
@@ -7504,6 +7473,7 @@ exports.BMICardEmbed = BMICardEmbed;
 exports.BMRCardEmbed = BMRCardEmbed;
 exports.BabyGrowthCardEmbed = BabyGrowthCardEmbed;
 exports.BabyPoopEmbed = BabyPoopEmbed;
+exports.BabyPoopForm = BabyPoopForm;
 exports.Badge = Badge;
 exports.BmiForm = BmiForm;
 exports.BorderHeading = BorderHeading;
@@ -7527,6 +7497,7 @@ exports.MobileBottomNavigationIcon = MobileBottomNavigationIcon;
 exports.NavHeader = NavHeader;
 exports.OvulationCardEmbed = OvulationCardEmbed;
 exports.PWGCardEmbed = PWGCardEmbed;
+exports.PWGForm = PWGForm;
 exports.Pagination = Pagination;
 exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;

package/build/{index-577374f5.js → index-fda0fbbe.js}

@@ -1,12 +1,12 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-026689eb.js');
-var useTranslations = require('./useTranslations-ae9962a2.js');
+var index = require('./index-e36755e5.js');
+var useTranslations = require('./useTranslations-480f64da.js');
 var dateFns = require('date-fns');
 var DayPickerInput = require('react-day-picker/DayPickerInput');
 var styled = require('@emotion/styled');
-var theme = require('./theme-0c7de955.js');
+var theme = require('./theme-98664cfd.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }