@hhgtech/hhg-components 1.29.37 → 1.29.39

package/build/index-49e98004.js

@@ -0,0 +1,1066 @@
+'use strict';
+
+var React = require('react');
+var core = require('@mantine/core');
+var utils = require('./utils-e385ce42.js');
+var index_styles = require('./index.styles-157337bd.js');
+var index = require('./index-31d3a0cd.js');
+var theme = require('./theme-986ab943.js');
+var index$1 = require('./index-fbb66d3d.js');
+var index$2 = require('./index-e1bfc5cd.js');
+var useScrollbarSize = require('./useScrollbarSize-c03e70df.js');
+var ReactDOM = require('react-dom');
+var styled = require('@emotion/styled');
+var utils$1 = require('./utils-29574e04.js');
+var tslib_es6 = require('./tslib.es6-cda3ff06.js');
+var yup = require('@hookform/resolvers/yup');
+var index$7 = require('./index-ccb48ca2.js');
+var reactHookForm = require('react-hook-form');
+var other = require('@hhgtech/icons/other');
+var index$4 = require('./index-a5aa5d5c.js');
+var index$3 = require('./index-7c76f198.js');
+var index$5 = require('./index-4d5f141c.js');
+require('./utils-a7153a3d.js');
+var index$6 = require('./index-65ed0de1.js');
+var useTranslations = require('./useTranslations-e5a4e00e.js');
+require('@mantine/hooks');
+require('./useMantineLocale-5f5000f2.js');
+require('./index-0a0b5799.js');
+require('./WhatsApp-7c990a33.js');
+require('./index.styled-02090cfc.js');
+require('./index-d9e9dcc3.js');
+var constants = require('./constants-e7f8b0d2.js');
+require('@mantine/dates');
+var dateFns = require('date-fns');
+var flattenChildren = require('react-keyed-flatten-children');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);
+
+const Backdrop = ({ open = false, onClickOutside, }) => {
+    return (React__default["default"].createElement(index_styles.StyledBackdrop, { "data-open": open, onClick: onClickOutside }));
+};
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Drawer = ({ children, title, onClose, open = false, placement = 'left', destroyOnClose = false, isPropagationEvent = true, className, }) => {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        utils.toggleNoScroll(open);
+        return () => utils.toggleNoScroll(false);
+    }, [open]);
+    const onCloseDrawer = () => {
+        ref.current.classList.add('slideOut');
+        setTimeout(() => {
+            onClose();
+        }, 800);
+    };
+    if (!open && destroyOnClose) {
+        return null;
+    }
+    return (React__default["default"].createElement(core.Portal, null,
+        React__default["default"].createElement(index_styles.StyledDrawer, { className: className, open: open },
+            React__default["default"].createElement(Backdrop, { open: open, onClickOutside: onCloseDrawer }),
+            React__default["default"].createElement(index_styles.StyledDrawerPanel, { open: open, placement: placement, ref: ref, hasTitle: Boolean(title) },
+                React__default["default"].createElement("div", { className: "title" },
+                    title && (React__default["default"].createElement(index.Text, { size: "s2", weight: "semiBold" }, title)),
+                    React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: "close-button", onClick: onCloseDrawer },
+                        React__default["default"].createElement("path", { d: "M5.99007 4.99067C5.79114 4.99072 5.59674 5.0501 5.43173 5.16121C5.26672 5.27233 5.1386 5.43013 5.06374 5.61444C4.98889 5.79875 4.9707 6.0012 5.0115 6.1959C5.05231 6.39061 5.15025 6.56872 5.29281 6.70747L10.5858 12.0004L5.29281 17.2934C5.19684 17.3855 5.12021 17.4959 5.06743 17.618C5.01464 17.7402 4.98676 17.8716 4.9854 18.0046C4.98405 18.1377 5.00926 18.2697 5.05954 18.3928C5.10983 18.516 5.1842 18.6279 5.27827 18.722C5.37235 18.8161 5.48426 18.8904 5.60743 18.9407C5.73061 18.991 5.86259 19.0162 5.99563 19.0149C6.12867 19.0135 6.2601 18.9856 6.38223 18.9328C6.50436 18.8801 6.61473 18.8034 6.70687 18.7075L11.9998 13.4145L17.2928 18.7075C17.385 18.8034 17.4953 18.8801 17.6175 18.9328C17.7396 18.9856 17.871 19.0135 18.0041 19.0149C18.1371 19.0162 18.2691 18.991 18.3922 18.9407C18.5154 18.8904 18.6273 18.8161 18.7214 18.722C18.8155 18.6279 18.8899 18.516 18.9401 18.3928C18.9904 18.2697 19.0156 18.1377 19.0143 18.0047C19.0129 17.8716 18.985 17.7402 18.9323 17.618C18.8795 17.4959 18.8028 17.3855 18.7069 17.2934L13.4139 12.0004L18.7069 6.70747C18.8514 6.567 18.9501 6.38616 18.99 6.18864C19.03 5.99112 19.0093 5.78614 18.9308 5.60055C18.8523 5.41497 18.7195 5.25744 18.5499 5.14861C18.3803 5.03978 18.1817 4.98473 17.9803 4.99067C17.7205 4.99841 17.4739 5.10699 17.2928 5.2934L11.9998 10.5864L6.70687 5.2934C6.61368 5.19761 6.50224 5.12146 6.37912 5.06947C6.25601 5.01747 6.12372 4.99068 5.99007 4.99067Z", fill: "#595959" }))),
+                React__default["default"].createElement(index_styles.StyledDrawerContent, { onClick: (e) => {
+                        if (isPropagationEvent) {
+                            e.stopPropagation();
+                        }
+                    } }, children &&
+                    (React__default["default"].isValidElement(children)
+                        ? children
+                        : typeof children === 'function'
+                            ? children({
+                                internalClose: onCloseDrawer,
+                            })
+                            : null))))));
+};
+
+const RadioImageGroup = ({ value, options, className, direction = 'horizontal', onChange, isDisabled, siteType, }) => {
+    const [check, setCheck] = React.useState(value);
+    const handleOnChange = (v) => {
+        if (isDisabled)
+            return;
+        setCheck(v);
+        onChange && onChange(v);
+    };
+    const isMarryBaby = siteType === 'marryBaby';
+    return (React__default["default"].createElement(index_styles.StyledRadioImageGroup, { className: className, "data-direction": direction }, options.map((option, index) => (React__default["default"].createElement(index_styles.StyledRadioImageItem, { "data-selected": (value || check) === option.value, "data-is-mb": isMarryBaby, "data-disabled": isDisabled, key: index, onClick: () => {
+            handleOnChange(option.value);
+        } },
+        React__default["default"].createElement("div", null,
+            option.content,
+            option.label && (React__default["default"].createElement(React__default["default"].Fragment, null, isMarryBaby ? (React__default["default"].createElement(index$1.MarryBabyText, { type: "subtitle-2", color: (value || check) === option.value
+                    ? theme.theme.mbColors.dark
+                    : theme.theme.mbColors.midGray }, option.label)) : (React__default["default"].createElement(index$2.Text, { type: "bold", color: (value || check) === option.value ? '#2D87F3' : 'black', className: "radio-group-item-heading", size: "label1" }, option.label))))))))));
+};
+
+const GenderOptionControl = (_a) => {
+    var { label, availableValue: availableValueInit, styles, isBaby, genderValue = {
+        male: 'male',
+        female: 'female',
+    }, type = 'button', hideLabel } = _a, radioProps = tslib_es6.__rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel"]);
+    const { t } = useTranslations.useTranslations();
+    const { classes, cx, theme } = index_styles.useStyles$1({ type }, {
+        name: 'GenderOptionControl',
+        styles,
+    });
+    const isMarryBaby = theme.other.template === 'mb';
+    const [availableValue, setAvailableValue] = React.useState();
+    const ref = React.useRef(null);
+    const genderOptions = React.useMemo(() => [
+        {
+            value: genderValue.male,
+            label: isBaby ? t('gender.boy') : t('gender.male'),
+            icon: isBaby ? (isMarryBaby ? (React__default["default"].createElement(other.BabyBoyMB, null)) : (index$3.CommonGAssets.getAssetPath('health-tools/boy-icon.svg'))) : (index$3.CommonGAssets.getAssetPath('health-tools/male-icon.svg')),
+        },
+        {
+            value: genderValue.female,
+            label: isBaby ? t('gender.girl') : t('gender.female'),
+            icon: isBaby ? (isMarryBaby ? (React__default["default"].createElement(other.BabyGirlMB, null)) : (index$3.CommonGAssets.getAssetPath('health-tools/girl-icon.svg'))) : (index$3.CommonGAssets.getAssetPath('health-tools/female-icon.svg')),
+        },
+    ], []);
+    React.useEffect(() => {
+        setAvailableValue(availableValueInit);
+    }, [availableValueInit]);
+    return (React__default["default"].createElement(core.Box, { ref: ref, className: classes.root },
+        React__default["default"].createElement(index$4.Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default["default"].createElement(index.Text, { as: "label", size: "s4", weight: "semiBold" }, label ||
+                (isBaby
+                    ? t('tools.selectBabyGender')
+                    : t('tools.selectGender')))) : undefined, size: "lg" }, radioProps, { classNames: {
+                error: classes.groupErr,
+            } }, (type === 'radio' && {
+            error: null,
+        })),
+            React__default["default"].createElement(core.Flex, { className: cx(classes.wrapper) }, genderOptions.map((i) => (React__default["default"].createElement(index$4.Radio, Object.assign({ className: "gender-item", size: "sm", classNames: {
+                    root: classes.itemRoot,
+                    labelWrapper: classes.itemLabelWrapper,
+                    label: classes.itemLabel,
+                    inner: classes.itemInner,
+                    body: classes.itemBody,
+                }, key: i.value, value: i.value }, (availableValue &&
+                i.value !== availableValue && {
+                disabled: true,
+            }), { label: React__default["default"].createElement(core.Flex, { gap: core.rem(8), align: 'center', justify: 'center', sx: { zIndex: 0 } },
+                    type === 'button' &&
+                        (typeof i.icon === 'string' ? (React__default["default"].createElement("img", { src: i.icon, className: "gender-image", alt: "female", loading: "lazy" })) : (i.icon)),
+                    React__default["default"].createElement(index.Text, { size: "p3" }, i.label)) }))))))));
+};
+
+const StyledModal = utils$1.setDefaultClass(styled__default["default"].div `
+    position: relative;
+    z-index: 200;
+    background-color: ${theme.theme.colors.white};
+    border-radius: ${theme.theme.borderRadius};
+    box-shadow: 0px 8px 40px 0px #0000001a;
+    &[data-site-type='marryBaby'] {
+      border-radius: 16px;
+      .hhg-modal__content {
+        position: relative;
+        z-index: 111;
+        height: 100%;
+      }
+    }
+    .hhg-modal__content {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+    }
+    .hhg-modal__video {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+      background-color: none;
+      box-shadow: none;
+    }
+  `, 'hhgcomp-modal-modal');
+const StyledModalWrapper = styled__default["default"].div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 201;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  visibility: hidden;
+  opacity: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  transition: opacity 0.3s ease-in-out;
+
+  .hhg-modal__close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+  &[data-type='video'] {
+    z-index: 1001;
+  }
+  &[data-open='true'] {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  ${StyledModal.classSelector} {
+    transition: transform 0.3s ease-in-out;
+  }
+  &.slideTop {
+    ${StyledModal.classSelector} {
+      transform: translate(0, -100vh);
+    }
+
+    &[data-open='true'] {
+      ${StyledModal.classSelector} {
+        transform: translate(0);
+      }
+    }
+  }
+
+  &.scaleUp {
+    ${StyledModal.classSelector} {
+      transform: scale(0.9);
+    }
+
+    &[data-open='true'] {
+      ${StyledModal.classSelector} {
+        transform: scale(1);
+      }
+    }
+  }
+
+  &[data-type='tail'] {
+    justify-content: flex-end;
+    ${StyledModal.classSelector} {
+      width: 420px;
+      height: 100%;
+      border-radius: 0;
+      overflow: hidden auto;
+    }
+  }
+  &[data-type='form'] {
+    ${StyledModal.classSelector} {
+      width: 496px;
+      height: 548px;
+      max-height: 100%;
+      overflow-y: auto;
+      ${utils.MediaQueries.mbDown} {
+        width: 340px;
+      }
+    }
+  }
+  &[data-type='video'] {
+    ${StyledModal.classSelector} {
+      height: 100%;
+      max-height: 539px;
+      ${utils.MediaQueries.mbDown} {
+        height: 192px;
+        width: 100%;
+        height: 100%;
+        border-radius: ${theme.theme.borderRadius};
+        max-height: 192px;
+      }
+    }
+  }
+  &[data-type='confirm'] {
+    ${StyledModal.classSelector} {
+      width: 100%;
+      max-width: 407px;
+      ${utils.MediaQueries.mbDown} {
+        width: calc(100% - 32px);
+        max-width: calc(100% - 32px);
+      }
+    }
+  }
+`;
+const StyledModalMask = styled__default["default"].div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+
+  &[data-open='false'] {
+    display: none;
+  }
+  &[data-type='video'] {
+    background-color: ${theme.theme.colors.secondaryDark};
+  }
+`;
+
+const MODAL_ROOT_ID = 'hhg-modals';
+const getModalsRoot = () => {
+    let el = document.getElementById(MODAL_ROOT_ID);
+    if (!el) {
+        el = document.createElement('div');
+        el.setAttribute('id', MODAL_ROOT_ID);
+        document.body.append(el);
+    }
+    return el;
+};
+const cleanUpModalShow = () => {
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    // Remove the opening class if there are only 1 popup is shown
+    if (remainingPopupOpened.length < 1) {
+        document.body.classList.remove('hhc-modal-show');
+    }
+};
+const cleanUpDisabledScroll = () => {
+    // Clear the overflow if there are only 1 popup is shown. useEffect runs after so the count number becomes zero
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    if (remainingPopupOpened.length < 1) {
+        document.body.style.overflow = '';
+        document.body.style.paddingRight = '';
+        document.body.classList.remove('hhc-disabled-scroll');
+    }
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Modal = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, className = '', animationType = 'scaleUp', isStaticBackdrop = false, siteType, }) => {
+    const [mounted, setMounted] = React.useState(false);
+    const elRef = React.useRef(null);
+    const { width: scrollBarWidth } = useScrollbarSize.useScrollbarSize();
+    if (!elRef.current && mounted) {
+        elRef.current = document.createElement('div');
+    }
+    React.useEffect(() => {
+        setMounted(true);
+        return () => {
+            setMounted(false);
+            cleanUpModalShow();
+            cleanUpDisabledScroll();
+        };
+    }, []);
+    React.useEffect(() => {
+        if (mounted) {
+            const modalsRoot = getModalsRoot();
+            modalsRoot.appendChild(elRef.current);
+            return () => {
+                modalsRoot.removeChild(elRef.current);
+            };
+        }
+    }, [mounted]);
+    React.useEffect(() => {
+        if (isOpen) {
+            document.body.classList.add('hhc-modal-show');
+        }
+        else {
+            cleanUpModalShow();
+        }
+    }, [isOpen]);
+    React.useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.paddingRight = scrollBarWidth + 'px';
+            document.body.classList.add('hhc-disabled-scroll');
+        }
+        else {
+            cleanUpDisabledScroll();
+        }
+    }, [isOpen, scrollBarWidth]);
+    if (!mounted)
+        return null;
+    const classes = ['hhg-modal__wrapper', className, animationType]
+        .filter((s) => s)
+        .join(' ');
+    return ReactDOM.createPortal(React__default["default"].createElement(StyledModalWrapper, { className: classes, "data-open": isOpen, "data-type": type },
+        !isStaticBackdrop && (React__default["default"].createElement(StyledModalMask, { "data-open": isOpen, onClick: onClose, "data-type": type })),
+        !isStaticBackdrop && type === 'video' && !!closeIcon && (React__default["default"].createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+        React__default["default"].createElement(StyledModal, { className: "hhg-modal", "data-open": isOpen, "data-site-type": siteType },
+            React__default["default"].createElement("div", { className: type === 'video' ? 'hhg-modal__video' : 'hhg-modal__content' },
+                !!closeIcon && type !== 'video' && (React__default["default"].createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+                children))), elRef.current);
+};
+
+styled__default["default"](index_styles.PureInput) `
+  & input,
+  .mantine-Input-input {
+    border-color: ${theme.theme.mbColors.lightGray};
+    background-color: ${theme.theme.colors.white};
+    border-radius: 16px;
+    transition: all 0.2s ease;
+    &:focus,
+    &:hover {
+      border-color: ${theme.theme.mbColors.pink};
+      box-shadow: none;
+    }
+  }
+
+  & .displayIcon {
+    pointer-events: none;
+  }
+`;
+const StyledTextField = styled__default["default"](index$5.Input) `
+  & label {
+    position: absolute;
+    z-index: 1;
+    top: 16px;
+
+    left: 16px;
+    color: ${theme.theme.mbColors.midGray};
+    pointer-events: none;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 240px;
+
+    &[data-size='label2'] {
+      font-size: 12px;
+    }
+
+    ${utils.MediaQueries.tdDown} {
+      max-width: 220px;
+    }
+  }
+  & input,
+  .mantine-Input-input {
+    ::placeholder {
+      color: ${theme.theme.mbColors.gray};
+      font-size: 14px;
+    }
+
+    ::-webkit-input-placeholder {
+      /* Chrome/Opera/Safari */
+      color: ${theme.theme.mbColors.gray};
+      font-size: 14px;
+    }
+    ::-moz-placeholder {
+      /* Firefox 19+ */
+      color: ${theme.theme.mbColors.gray};
+      font-size: 14px;
+    }
+    :-ms-input-placeholder {
+      /* IE 10+ */
+      color: ${theme.theme.mbColors.gray};
+      font-size: 14px;
+    }
+    :-moz-placeholder {
+      /* Firefox 18- */
+      color: ${theme.theme.mbColors.gray};
+      font-size: 14px;
+    }
+    height: ${(props) => (props.size === 'sm' ? 48 : 72)}px !important;
+    padding-top: 27px !important;
+    border-color: ${theme.theme.mbColors.lightGray} !important;
+    background-color: ${theme.theme.colors.white};
+    border-radius: 16px !important;
+    transition: all 0.2s ease;
+    padding-top: ${(props) => (props.value ? '38px' : '27px')} !important;
+
+    &:focus,
+    &:hover {
+      border-color: ${theme.theme.mbColors.pink};
+      box-shadow: none;
+    }
+  }
+  .mantine-Input-rightSection,
+  .mantine-Input-leftSection {
+    padding-top: 20px;
+  }
+
+  &[data-has-action-icon] {
+    input,
+    .mantine-Input-input {
+      padding-top: ${(props) => (props.value ? '38px' : '27px')} !important;
+      padding-bottom: ${(props) => (props.value ? '16px' : '27px')} !important;
+      height: unset !important;
+    }
+
+    label {
+      position: absolute;
+      z-index: 1;
+      top: 16px;
+      padding-right: 46px;
+    }
+  }
+`;
+
+exports.DueDateCalculatorType = void 0;
+(function (DueDateCalculatorType) {
+    DueDateCalculatorType[DueDateCalculatorType["lastPeriod"] = 0] = "lastPeriod";
+    DueDateCalculatorType[DueDateCalculatorType["conception"] = 1] = "conception";
+    DueDateCalculatorType[DueDateCalculatorType["IVF"] = 2] = "IVF";
+})(exports.DueDateCalculatorType || (exports.DueDateCalculatorType = {}));
+const API_DATE_FORMAT = 'yyyy-MM-dd';
+const getDueDateLastPeriod = (lastPeriodDate, periodLength) => {
+    const pregnancyLength = 272 + (periodLength - 21);
+    const dueDate = new Date(lastPeriodDate);
+    dueDate.setDate(dueDate.getDate() + pregnancyLength);
+    return {
+        startDate: lastPeriodDate,
+        dueDate,
+        otherInfo: {
+            method: exports.DueDateCalculatorType.lastPeriod + 1,
+            first_day: dateFns.format(lastPeriodDate, API_DATE_FORMAT),
+            cycle_length_days: periodLength,
+            conception_date: null,
+            ivf_transfer_date: null,
+            days_transfer: null,
+        },
+    };
+};
+const getDueDateConception = (conceptionDate) => {
+    const dueDate = new Date(conceptionDate);
+    dueDate.setDate(dueDate.getDate() + 265);
+    return {
+        startDate: conceptionDate,
+        dueDate,
+        otherInfo: {
+            method: exports.DueDateCalculatorType.conception + 1,
+            conception_date: dateFns.format(conceptionDate, API_DATE_FORMAT),
+            first_day: null,
+            cycle_length_days: null,
+            ivf_transfer_date: null,
+            days_transfer: null,
+        },
+    };
+};
+const getDueDateIVF = (IVFDate, numDayTransfer) => {
+    const dueDate = new Date(IVFDate);
+    dueDate.setDate(dueDate.getDate() + 265 - numDayTransfer);
+    return {
+        startDate: IVFDate,
+        dueDate,
+        otherInfo: {
+            method: exports.DueDateCalculatorType.IVF + 1,
+            ivf_transfer_date: dateFns.format(IVFDate, API_DATE_FORMAT),
+            days_transfer: numDayTransfer,
+            conception_date: null,
+            first_day: null,
+            cycle_length_days: null,
+        },
+    };
+};
+const DateToInputValue = (date) => {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+};
+
+const FormLayoutContext = React.createContext({});
+
+const useStyles$8 = core.createStyles(() => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: core.rem(8),
+        },
+    };
+});
+const FormRow = (_a) => {
+    var { styles, classNames, className, children } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className", "children"]);
+    const { classes, cx } = useStyles$8(undefined, {
+        name: 'HealthToolFormWrapper__FormRow',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, props), children));
+};
+
+var useStyles$7 = core.createStyles((theme, { formLayout }) => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: core.rem(formLayout === 'inline' ? 8 : 16),
+            '.mantine-Input-input::placeholder, .mantine-Input-input[data-invalid]::placeholder': {
+                color: '#8C8C8C',
+            },
+        },
+        control: {
+            width: core.rem(180),
+            flexShrink: 1,
+            '&.error': {
+                'button, input': {
+                    borderColor: theme.colors.red[7],
+                },
+            },
+        },
+    };
+});
+
+const useStyles$6 = core.createStyles((theme, { formLayout }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: Object.assign(Object.assign({}, (formLayout === 'inline' && {
+            alignSelf: 'flex-end',
+            marginTop: core.rem(16),
+        })), (formLayout === 'default' && Object.assign({}, (isMarryBaby && {
+            minWidth: core.rem(180),
+            alignSelf: 'center',
+        })))),
+    };
+});
+const SubmitBtn = (_a) => {
+    var { styles, classNames, className } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
+    const { formLayout } = React.useContext(FormLayoutContext);
+    const { classes, cx } = useStyles$6({ formLayout }, {
+        name: 'HealthToolFormWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(index$4.Button, Object.assign({ className: cx('submit-btn', className, classes.root) }, props, { variant: "primary", size: "md" })));
+};
+
+const useStyles$5 = core.createStyles((theme) => {
+    return {
+        root: {
+            color: theme.colors.gray[6],
+            whiteSpace: 'nowrap',
+            paddingRight: core.rem(16),
+        },
+    };
+});
+const Unit = (_a) => {
+    var { styles, classNames, className } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
+    const { classes, cx } = useStyles$5(undefined, {
+        name: 'HealthToolFormWrapper__UnitText',
+        styles,
+        classNames,
+    });
+    return React__default["default"].createElement(index.Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
+};
+
+var useStyles$4 = core.createStyles((theme, { width }) => {
+    return {
+        row: {
+            display: 'flex',
+            alignItems: 'stretch',
+            justifyContent: 'space-between',
+            gap: core.rem(16),
+        },
+        labelWrapper: {
+            flex: '1 1 0px',
+            display: 'flex',
+            alignItems: 'center',
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+        },
+        label: {
+            fontSize: core.rem(14),
+            color: theme.colors.gray[6],
+        },
+        content: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: core.rem(8),
+            input: {
+                backgroundColor: '#fff',
+            },
+        },
+        control: {
+            width: typeof width === 'number' ? core.rem(width) : width,
+            flexShrink: 1,
+            '&.error': {
+                'button, input': {
+                    borderColor: theme.colors.red[7],
+                },
+            },
+        },
+    };
+});
+
+const BorderBoxControl = ({ label, children, styles, classNames, width = 180, }) => {
+    const { classes } = useStyles$4({ width }, {
+        name: 'HealthToolFormWrapper__BorderBoxControl',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(core.Box, { className: classes.row },
+        React__default["default"].createElement(core.Box, { className: classes.labelWrapper }, label && (React__default["default"].createElement("label", { className: classes.label, htmlFor: "gender" }, label))),
+        React__default["default"].createElement(core.Box, { className: classes.content }, flattenChildren__default["default"](children).map((i, idx) => (React__default["default"].createElement(core.Box, { key: idx, className: classes.control }, i))))));
+};
+
+var useStyles$3 = core.createStyles((theme, { width }) => {
+    return {
+        row: {
+            display: 'flex',
+            alignItems: 'stretch',
+            justifyContent: 'space-between',
+            gap: core.rem(16),
+        },
+        labelWrapper: {
+            flex: '1 1 0px',
+            display: 'flex',
+            alignItems: 'center',
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+        },
+        label: {
+            fontSize: core.rem(14),
+            color: theme.colors.gray[6],
+        },
+        content: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: core.rem(8),
+            input: {
+                backgroundColor: '#fff',
+            },
+        },
+        control: {
+            width: typeof width === 'number' ? core.rem(width) : width,
+            flexShrink: 1,
+            '&.error': {
+                'button, input': {
+                    borderColor: theme.colors.red[7],
+                },
+            },
+        },
+    };
+});
+
+const BorderInlineControl = ({ label, children, styles, classNames, width = 180, }) => {
+    const { classes } = useStyles$3({ width }, {
+        name: 'HealthToolFormWrapper__BorderInlineControl',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(core.Box, { className: classes.row },
+        React__default["default"].createElement(core.Box, { className: classes.labelWrapper }, label && (React__default["default"].createElement("label", { className: classes.label, htmlFor: "gender" }, label))),
+        React__default["default"].createElement(core.Box, { className: classes.content }, flattenChildren__default["default"](children).map((i, idx) => (React__default["default"].createElement(core.Box, { key: idx, className: classes.control }, i))))));
+};
+
+const useStyles$2 = core.createStyles(() => {
+    return {
+        root: {
+            color: 'red',
+            textAlign: 'right',
+            width: 'auto',
+        },
+    };
+});
+const Error = (_a) => {
+    var { styles, classNames, className } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'HealthToolFormWrapper__UnitText',
+        styles,
+        classNames,
+    });
+    return React__default["default"].createElement(index.Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
+};
+
+var useStyles$1 = core.createStyles((theme$1) => {
+    const isMarryBaby = theme$1.other.template === 'mb';
+    return {
+        root: {
+            label: Object.assign({}, (isMarryBaby && {
+                color: theme.theme.mbColors.midGray,
+                fontSize: core.rem(12),
+                fontWeight: 'normal',
+            })),
+        },
+    };
+});
+
+const Control = (_a) => {
+    var { className, styles, classNames } = _a, rest = tslib_es6.__rest(_a, ["className", "styles", "classNames"]);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'HealthToolFormWrapper__Control',
+        styles,
+        classNames,
+    });
+    return React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest));
+};
+
+const _HealthToolFormWrapper = (_a) => {
+    var { children, formLayout: formLayoutProp, styles, classNames, className } = _a, rest = tslib_es6.__rest(_a, ["children", "formLayout", "styles", "classNames", "className"]);
+    const formLayout = formLayoutProp || 'default';
+    const { classes, cx } = useStyles$7({ formLayout }, {
+        name: 'HealthToolFormWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(FormLayoutContext.Provider, { value: {
+            formLayout,
+        } },
+        React__default["default"].createElement(core.Box, Object.assign({ component: "form", className: cx(className, classes.root) }, rest), children)));
+};
+const HealthToolFormWrapper = _HealthToolFormWrapper;
+HealthToolFormWrapper.Control = Control;
+HealthToolFormWrapper.BorderInlineControl = BorderInlineControl;
+HealthToolFormWrapper.BorderBoxControl = BorderBoxControl;
+HealthToolFormWrapper.Error = Error;
+HealthToolFormWrapper.FormRow = FormRow;
+HealthToolFormWrapper.Submit = SubmitBtn;
+HealthToolFormWrapper.Unit = Unit;
+
+const BabyGrowthFormContext = React.createContext({});
+
+styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-block: 40px;
+
+  &[data-theme='true'] {
+    padding-block: 0;
+    padding-top: 12px;
+  }
+`;
+const StyledFormControl = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: auto;
+
+  .error-input input {
+    border: 1px solid ${theme.theme.colors.red700};
+  }
+`;
+const StyledInlineLabel = styled__default["default"](constants.Label) `
+  display: inline-flex;
+  padding-bottom: 6px;
+  gap: 4px;
+`;
+const StyledRow = styled__default["default"].div `
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  > div {
+    width: 100%;
+  }
+`;
+
+const DefaultForm = (props) => {
+    const { t } = useTranslations.useTranslations();
+    const { control, currentUrl, isEmptyThreeFields, siteType } = React.useContext(BabyGrowthFormContext);
+    const commonDateProps = {
+        placeholder: 'DD/MM/YYYY',
+        popoverProps: {
+            withinPortal: true,
+        },
+    };
+    return (React__default["default"].createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "gender", render: ({ field: { onChange } }) => (React__default["default"].createElement(HealthToolFormWrapper.Control, null,
+                React__default["default"].createElement(GenderOptionControl, { isBaby: true, genderValue: {
+                        male: 'boy',
+                        female: 'girl',
+                    }, onChange: onChange }))) }),
+        siteType === 'marryBaby' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
+                    React__default["default"].createElement(StyledTextField, { label: t('babyGrowth.input.birthday'), name: "birthday", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$6.DatePicker, Object.assign({}, commonDateProps, { onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', rightSection: React__default["default"].createElement(other.CalendarMB, { size: 32 }) })) }))) }),
+            React__default["default"].createElement(StyledRow, null,
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.height')} ${t('babyGrowth.cm')}`, name: "height", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$5.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
+                                    ? 'error-input'
+                                    : '', name: "height", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
+                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.weight')} ${t('babyGrowth.kg')}`, name: "weight", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$5.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
+                                    ? 'error-input'
+                                    : '', name: "weight", size: "md", placeholder: "Nh\u1EADp th\u00F4ng tin", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
+                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) })),
+            React__default["default"].createElement(StyledRow, null,
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.headCircumference')} ${t('babyGrowth.cm')}`, name: "head", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$5.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
+                                    ? 'error-input'
+                                    : '', name: "head", size: "md", value: String(value), onChange: onChange, type: "number", placeholder: "Nh\u1EADp th\u00F4ng tin", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) &&
+                                    e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }) }))) }),
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledTextField, { label: `${t('babyGrowth.input.bmi')} ${t('babyGrowth.kg.m2')}`, name: "date", size: "md", value: String(value), CustomInput: React__default["default"].createElement(index$5.Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true, style: { color: '#9495A0' } }) }))) })),
+            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
+                    React__default["default"].createElement(StyledTextField, { label: t('babyGrowth.input.measurementDate'), name: "date", size: "md", value: DateToInputValue(value), CustomInput: React__default["default"].createElement(index$6.DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date(), maxDate: new Date(), onChange: onChange, className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', rightSection: React__default["default"].createElement(other.CalendarMB, { size: 32 }) })) }))) }),
+            React__default["default"].createElement(HealthToolFormWrapper.Submit, { type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit')))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
+                    React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "birthday" },
+                        React__default["default"].createElement(index.Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.birthday'))),
+                    React__default["default"].createElement(index$6.DatePicker, Object.assign({}, commonDateProps, { onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '' })))) }),
+            React__default["default"].createElement(StyledRow, null,
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "height" },
+                            React__default["default"].createElement(index.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.height')),
+                            React__default["default"].createElement(index.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.cm'))),
+                        React__default["default"].createElement(index$5.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "height", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "weight" },
+                            React__default["default"].createElement(index.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.weight')),
+                            React__default["default"].createElement(index.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.kg'))),
+                        React__default["default"].createElement(index$5.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "weight", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) })),
+            React__default["default"].createElement(StyledRow, null,
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "head" },
+                            React__default["default"].createElement(index.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.headCircumference')),
+                            React__default["default"].createElement(index.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.cm'))),
+                        React__default["default"].createElement(index$5.Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur() }))) }),
+                React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(StyledFormControl, null,
+                        React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "bmi" },
+                            React__default["default"].createElement(index.Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.input.bmi')),
+                            React__default["default"].createElement(index.Text, { as: "span", size: "n1", color: theme.theme.colors.gray400 }, t('babyGrowth.kg.m2'))),
+                        React__default["default"].createElement(index$5.Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true }))) })),
+            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange }, fieldState: { error } }) => (React__default["default"].createElement(StyledFormControl, null,
+                    React__default["default"].createElement(StyledInlineLabel, { size: "label1", htmlFor: "measurementDate" },
+                        React__default["default"].createElement(index.Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.measurementDate'))),
+                    React__default["default"].createElement(index$6.DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date(), onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '' })))) }),
+            React__default["default"].createElement(HealthToolFormWrapper.Submit, { type: "submit", variant: 'primary', "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, t('babyGrowth.input.submit'))))));
+};
+
+var useStyles = core.createStyles((theme) => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: core.rem(8),
+        },
+        bmiVal: {
+            display: 'inline-block',
+        },
+        unitText: {
+            color: theme.colors.gray[6],
+        },
+        submitBtn: {},
+    };
+});
+
+const InlineForm = (_a) => {
+    var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
+    const { t } = useTranslations.useTranslations();
+    const { control, currentUrl, isEmptyThreeFields } = React.useContext(BabyGrowthFormContext);
+    const { classes, cx } = useStyles(undefined, {
+        name: 'BabyGrowthForm__InlineForm',
+        styles,
+        classNames,
+    });
+    const commonDateProps = {
+        placeholder: 'DD/MM/YYYY',
+        popoverProps: {
+            withinPortal: true,
+        },
+    };
+    return (React__default["default"].createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline", className: classes.root }, props),
+        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "gender", render: ({ field: { onChange } }) => (React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender') },
+                React__default["default"].createElement(GenderOptionControl, { type: "radio", hideLabel: true, isBaby: true, genderValue: {
+                        male: 'boy',
+                        female: 'girl',
+                    }, onChange: onChange }))) }),
+        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "birthday", render: ({ field: { onChange }, fieldState: { error } }) => {
+                return (React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
+                    React__default["default"].createElement(index$6.DatePicker, Object.assign({}, commonDateProps, { className: cx(error ? 'error' : ''), onChange: onChange, maxDate: new Date() }))));
+            } }),
+        React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: "BMI", styles: {
+                control: {
+                    '&:first-child': {
+                        width: 'auto',
+                    },
+                },
+            } },
+            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(index.Text, { size: "p3" },
+                        React__default["default"].createElement("span", { className: classes.bmiVal }, !isNaN(Number(value)) && value !== '0' ? value : ''),
+                        t('babyGrowth.kg.m2')))) }),
+            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(core.Box, { className: cx(isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
+                    React__default["default"].createElement(index$4.Input, { name: "height", placeholder: t('babyGrowth.height'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), rightSection: React__default["default"].createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))) }),
+            React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(core.Box, { className: cx(isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
+                    React__default["default"].createElement(index$4.Input, { name: "weight", placeholder: t('babyGrowth.weight'), size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), rightSection: React__default["default"].createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))) })),
+        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.headCircumference') },
+                React__default["default"].createElement(core.Box, { className: cx(isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
+                    React__default["default"].createElement(index$4.Input, { name: "head", placeholder: "0", size: "md", value: String(value), onChange: onChange, type: "number", onKeyDown: (e) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onWheelCapture: (event) => event.currentTarget.blur(), rightSection: React__default["default"].createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })))) }),
+        React__default["default"].createElement(reactHookForm.Controller, { control: control, name: "measurementDate", render: ({ field: { onChange } }) => (React__default["default"].createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
+                React__default["default"].createElement(index$6.DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date(), onChange: onChange, maxDate: new Date() })))) }),
+        React__default["default"].createElement(HealthToolFormWrapper.Submit, { type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: classes.submitBtn }, t('babyGrowth.input.submit'))));
+};
+
+/**
+ * Using {@link Intl.NumberFormat} to covert a number to string base on its locale
+ * @param {number} num - Number to convert
+ * @param {number} maximumFractionDigits - Number of decimal digits
+ * @returns {string} - String based number
+ */
+const localizeNumberFormat = (num, maximumFractionDigits = 2) => {
+    return Intl.NumberFormat(undefined, {
+        maximumFractionDigits,
+    }).format(num);
+};
+
+/**
+ * Calculate BMI
+ * Using {@link localizeNumberFormat} to convert number based on locale
+ * @param {number} height - Height in number
+ * @param {number} weight - Weight in number
+ * @returns {number} - BMI with 2 decimal digits
+ */
+const bmiCalculate = (height = 0, weight = 0) => {
+    try {
+        if (height && weight) {
+            const bmi = Number(weight) / Math.pow(Number(height) / 100, 2);
+            return Number(localizeNumberFormat(bmi));
+        }
+        else {
+            return 0;
+        }
+    }
+    catch (error) { }
+    return 0;
+};
+
+const BabyGrowthForm = (_a) => {
+    var { onSubmit, onError, schema, formLayout = 'default' } = _a, rest = tslib_es6.__rest(_a, ["onSubmit", "onError", "schema", "formLayout"]);
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
+    const { control, setValue, watch, handleSubmit, formState: { isSubmitted }, } = reactHookForm.useForm({
+        resolver: yup.yupResolver(schema),
+        mode: 'onSubmit',
+        defaultValues: {
+            name: '',
+            gender: index$7.Gender.Boy,
+            measurementDate: new Date(),
+        },
+    });
+    const weight = watch('weight');
+    const height = watch('height');
+    const head = watch('head');
+    const isEmptyThreeFields = React.useMemo(() => isSubmitted && !weight && !height && !head, [isSubmitted, weight, height, head]);
+    React.useEffect(() => {
+        const bmi = bmiCalculate(height, weight);
+        setValue('bmi', String(bmi) || '0');
+    }, [weight, height]);
+    const currentUrl = React.useMemo(() => {
+        if (typeof window !== 'undefined') {
+            return window.location.href;
+        }
+        else
+            return '';
+    }, []);
+    const commonProps = Object.assign({ onSubmit: handleSubmit(onSubmit, onError) }, rest);
+    return (React__default["default"].createElement(BabyGrowthFormContext.Provider, { value: {
+            isEmptyThreeFields,
+            control,
+            currentUrl,
+            siteType,
+        } }, formLayout === 'default' ? (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps)))));
+};
+
+exports.API_DATE_FORMAT = API_DATE_FORMAT;
+exports.BabyGrowthForm = BabyGrowthForm;
+exports.DateToInputValue = DateToInputValue;
+exports.Drawer = Drawer;
+exports.GenderOptionControl = GenderOptionControl;
+exports.HealthToolFormWrapper = HealthToolFormWrapper;
+exports.Modal = Modal;
+exports.RadioImageGroup = RadioImageGroup;
+exports.StyledTextField = StyledTextField;
+exports.getDueDateConception = getDueDateConception;
+exports.getDueDateIVF = getDueDateIVF;
+exports.getDueDateLastPeriod = getDueDateLastPeriod;