@hhgtech/hhg-components 1.29.44 → 1.29.46

package/build/esm/{index-af5ce53c.js → index-663ce8ad.js}

@@ -1,35 +1,35 @@
 import React__default, { useRef, useEffect, useState, useMemo, createContext, useContext } from 'react';
-import { Portal, Box, Flex, rem, createStyles, useMantineTheme, Switch } from '@mantine/core';
-import { t as toggleNoScroll, M as MediaQueries } from './utils-72d20560.js';
-import { w as StyledBackdrop, x as StyledDrawer, y as StyledDrawerPanel, z as StyledDrawerContent, A as StyledRadioImageGroup, B as StyledRadioImageItem, C as useStyles$9, P as PureInput } from './index.styles-59f43d64.js';
-import { T as Text } from './index-7aff3435.js';
-import { t as theme } from './theme-7c208c30.js';
-import { M as MarryBabyText } from './index-c0c2dfbe.js';
-import { T as Text$1 } from './index-52e1cb2b.js';
-import { u as useScrollbarSize } from './useScrollbarSize-718c8d7c.js';
+import { Portal, Box, Flex, rem, createStyles, Input, Chip, useMantineTheme, Switch } from '@mantine/core';
+import { t as toggleNoScroll, M as MediaQueries } from './utils-36a2e88c.js';
+import { w as StyledBackdrop, x as StyledDrawer, y as StyledDrawerPanel, z as StyledDrawerContent, A as StyledRadioImageGroup, B as StyledRadioImageItem, C as useStyles$a, P as PureInput } from './index.styles-bdadf1c8.js';
+import { T as Text } from './index-0b997c18.js';
+import { t as theme } from './theme-4a099635.js';
+import { M as MarryBabyText } from './index-34682a6e.js';
+import { T as Text$1 } from './index-7872ac55.js';
+import { u as useScrollbarSize } from './useScrollbarSize-2691a669.js';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
-import { s as setDefaultClass } from './utils-101d2ed1.js';
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { s as setDefaultClass } from './utils-b83d7305.js';
+import { _ as __rest } from './tslib.es6-059585f8.js';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { G as Gender } from './index-3e04178f.js';
+import { G as Gender } from './index-893ee6c2.js';
 import { Controller, useForm } from 'react-hook-form';
 import { BabyBoyMB, BabyGirlMB, CalendarMB } from '@hhgtech/icons/other';
-import { R as Radio, B as Button, c as Input$1 } from './index-f0ac2d9c.js';
-import { C as CommonGAssets } from './index-a2cdc317.js';
-import { I as Input } from './index-db0a1f04.js';
-import './utils-8a09aa51.js';
-import { D as DatePicker } from './index-329afe30.js';
-import { u as useTranslations } from './useTranslations-3ea1638d.js';
+import { R as Radio, B as Button, c as Input$2 } from './index-0d6c85cf.js';
+import { C as CommonGAssets } from './index-ff8c9d5e.js';
+import { I as Input$1 } from './index-f53544db.js';
+import './utils-9ad73105.js';
+import { D as DatePicker } from './index-251e9c68.js';
+import { u as useTranslations } from './useTranslations-1ed73aa5.js';
 import '@mantine/hooks';
-import './useMantineLocale-6a509174.js';
-import './index-d73390b2.js';
-import './WhatsApp-9dbce6f2.js';
-import './index.styled-e18670ac.js';
-import './index-be8d21e4.js';
-import { L as Label } from './constants-e3536cb0.js';
+import './useMantineLocale-0143b7da.js';
+import './index-604a2f74.js';
+import './WhatsApp-9c19ab07.js';
+import './index.styled-81557262.js';
+import './index-aa5d9b56.js';
+import { L as Label } from './constants-b05bc757.js';
 import '@mantine/dates';
-import { format } from 'date-fns';
+import 'date-fns';
 import flattenChildren from 'react-keyed-flatten-children';
 
 const Backdrop = ({ open = false, onClickOutside, }) => {
@@ -101,7 +101,7 @@ const GenderOptionControl = (_a) => {
         female: 'female',
     }, type = 'button', hideLabel } = _a, radioProps = __rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel"]);
     const { t } = useTranslations();
-    const { classes, cx, theme } = useStyles$9({ type }, {
+    const { classes, cx, theme } = useStyles$a({ type }, {
         name: 'GenderOptionControl',
         styles,
     });
@@ -385,168 +385,100 @@ const Modal = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, cla
                 children))), elRef.current);
 };
 
-styled(PureInput) `
-  & input,
-  .mantine-Input-input {
-    border-color: ${theme.mbColors.lightGray};
-    background-color: ${theme.colors.white};
-    border-radius: 16px;
-    transition: all 0.2s ease;
-    &:focus,
-    &:hover {
-      border-color: ${theme.mbColors.pink};
-      box-shadow: none;
-    }
-  }
-
-  & .displayIcon {
-    pointer-events: none;
-  }
-`;
-const StyledTextField = styled(Input) `
-  & label {
-    position: absolute;
-    z-index: 1;
-    top: 16px;
-
-    left: 16px;
-    color: ${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;
-    }
-
-    ${MediaQueries.tdDown} {
-      max-width: 220px;
-    }
-  }
-  & input,
-  .mantine-Input-input {
-    ::placeholder {
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-
-    ::-webkit-input-placeholder {
-      /* Chrome/Opera/Safari */
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-    ::-moz-placeholder {
-      /* Firefox 19+ */
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-    :-ms-input-placeholder {
-      /* IE 10+ */
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-    :-moz-placeholder {
-      /* Firefox 18- */
-      color: ${theme.mbColors.gray};
-      font-size: 14px;
-    }
-    height: ${(props) => (props.size === 'sm' ? 48 : 72)}px !important;
-    padding-top: 27px !important;
-    border-color: ${theme.mbColors.lightGray} !important;
-    background-color: ${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.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;
-    }
-  }
-`;
-
 var DueDateCalculatorType;
 (function (DueDateCalculatorType) {
     DueDateCalculatorType[DueDateCalculatorType["lastPeriod"] = 0] = "lastPeriod";
     DueDateCalculatorType[DueDateCalculatorType["conception"] = 1] = "conception";
     DueDateCalculatorType[DueDateCalculatorType["IVF"] = 2] = "IVF";
 })(DueDateCalculatorType || (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);
+const DateToInputValue = (date) => {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+};
+
+var useStyles$9 = createStyles(() => {
     return {
-        startDate: lastPeriodDate,
-        dueDate,
-        otherInfo: {
-            method: DueDateCalculatorType.lastPeriod + 1,
-            first_day: format(lastPeriodDate, API_DATE_FORMAT),
-            cycle_length_days: periodLength,
-            conception_date: null,
-            ivf_transfer_date: null,
-            days_transfer: null,
+        root: {
+            justifyContent: 'flex-start',
         },
-    };
-};
-const getDueDateConception = (conceptionDate) => {
-    const dueDate = new Date(conceptionDate);
-    dueDate.setDate(dueDate.getDate() + 265);
-    return {
-        startDate: conceptionDate,
-        dueDate,
-        otherInfo: {
-            method: DueDateCalculatorType.conception + 1,
-            conception_date: format(conceptionDate, API_DATE_FORMAT),
-            first_day: null,
-            cycle_length_days: null,
-            ivf_transfer_date: null,
-            days_transfer: null,
+        group: {
+            display: 'flex',
+            alignItems: 'stretch',
+            gap: rem(8),
         },
-    };
-};
-const getDueDateIVF = (IVFDate, numDayTransfer) => {
-    const dueDate = new Date(IVFDate);
-    dueDate.setDate(dueDate.getDate() + 265 - numDayTransfer);
-    return {
-        startDate: IVFDate,
-        dueDate,
-        otherInfo: {
-            method: DueDateCalculatorType.IVF + 1,
-            ivf_transfer_date: format(IVFDate, API_DATE_FORMAT),
-            days_transfer: numDayTransfer,
-            conception_date: null,
-            first_day: null,
-            cycle_length_days: null,
+        item: {
+            flex: '1 1 0px',
+        },
+        icon: {
+            flexShrink: 0,
         },
     };
-};
-const DateToInputValue = (date) => {
-    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+});
+
+const ChipGroup = (_a) => {
+    var { data = [], label, isMobile, layout = 'horizonal', classNames, styles } = _a, props = __rest(_a, ["data", "label", "isMobile", "layout", "classNames", "styles"]);
+    const { classes, theme } = useStyles$9(undefined, {
+        name: 'ChipGroup',
+        classNames,
+        styles,
+    });
+    const isMarryBaby = theme.other.template === 'mb';
+    const iconSize = isMobile
+        ? 48
+        : isMarryBaby
+            ? 32
+            : layout === 'vertical'
+                ? 32
+                : 18;
+    return (React__default.createElement(Box, null,
+        React__default.createElement(Input.Wrapper, { label: label },
+            React__default.createElement(Chip.Group, Object.assign({}, props),
+                React__default.createElement(Box, { className: classes.group }, data.map((i, idx) => (React__default.createElement(Chip, { className: classes.item, key: idx, value: String(i.value), styles: {
+                        iconWrapper: {
+                            display: 'none',
+                        },
+                        label: {
+                            width: '100%',
+                            borderRadius: rem(isMarryBaby ? 12 : 8),
+                            padding: 0,
+                            border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.neutral[2]}`,
+                            height: '100%',
+                            '&[data-checked]': {
+                                padding: 0,
+                                backgroundColor: isMarryBaby
+                                    ? '#FFE9F1'
+                                    : theme.colors.blue[0],
+                                border: `1px solid ${isMarryBaby ? '#F5B4CB' : theme.colors.blue[1]}`,
+                            },
+                            [theme.fn.smallerThan('sm')]: {
+                                alignItems: 'flex-start',
+                            },
+                        },
+                    } },
+                    React__default.createElement(Box, { sx: Object.assign(Object.assign(Object.assign({ width: '100%', display: 'flex', gap: rem(isMarryBaby ? 2 : 8), padding: '8px 16px 8px 12px', justifyContent: 'center', alignItems: 'center' }, (isMarryBaby && {
+                            flexDirection: 'column',
+                        })), (layout === 'vertical' && {
+                            flexDirection: 'column',
+                            padding: '16px 8px 8px',
+                        })), { [theme.fn.smallerThan('sm')]: {
+                                flexDirection: 'column',
+                                padding: '16px 8px 8px',
+                            } }) },
+                        React__default.isValidElement(i.icon)
+                            ? React__default.cloneElement(i.icon, {
+                                size: iconSize,
+                                isMarryBaby,
+                                className: classes.icon,
+                            })
+                            : null,
+                        React__default.createElement(Text, { size: 'p4', styles: {
+                                root: Object.assign(Object.assign({}, (isMarryBaby && {
+                                    textAlign: 'center',
+                                })), { whiteSpace: 'normal', [theme.fn.smallerThan('sm')]: {
+                                        fontSize: rem(12),
+                                        lineHeight: rem(18),
+                                        textAlign: 'center',
+                                    } }),
+                            } }, i.label))))))))));
 };
 
 const FormLayoutContext = createContext({});
@@ -812,7 +744,7 @@ const Control = (_a) => {
 };
 
 const _HealthToolFormWrapper = (_a) => {
-    var { children, formLayout: formLayoutProp, styles, classNames, className } = _a, rest = __rest(_a, ["children", "formLayout", "styles", "classNames", "className"]);
+    var { children, formLayout: formLayoutProp, styles, classNames, className, component = 'form' } = _a, rest = __rest(_a, ["children", "formLayout", "styles", "classNames", "className", "component"]);
     const formLayout = formLayoutProp || 'default';
     const { classes, cx } = useStyles$7({ formLayout }, {
         name: 'HealthToolFormWrapper',
@@ -822,7 +754,7 @@ const _HealthToolFormWrapper = (_a) => {
     return (React__default.createElement(FormLayoutContext.Provider, { value: {
             formLayout,
         } },
-        React__default.createElement(Box, Object.assign({ component: "form", className: cx(className, classes.root) }, rest), children)));
+        React__default.createElement(Box, Object.assign({ component: component, className: cx(className, classes.root) }, rest), children)));
 };
 const HealthToolFormWrapper = _HealthToolFormWrapper;
 HealthToolFormWrapper.Control = Control;
@@ -832,10 +764,115 @@ HealthToolFormWrapper.Error = Error;
 HealthToolFormWrapper.FormRow = FormRow;
 HealthToolFormWrapper.Submit = SubmitBtn;
 HealthToolFormWrapper.Unit = Unit;
-HealthToolFormWrapper.Switching = Switching;
+HealthToolFormWrapper.Switching = Switching;
+HealthToolFormWrapper.ChipGroup = ChipGroup;
 
 const BabyGrowthFormContext = createContext({});
 
+styled(PureInput) `
+  & input,
+  .mantine-Input-input {
+    border-color: ${theme.mbColors.lightGray};
+    background-color: ${theme.colors.white};
+    border-radius: 16px;
+    transition: all 0.2s ease;
+    &:focus,
+    &:hover {
+      border-color: ${theme.mbColors.pink};
+      box-shadow: none;
+    }
+  }
+
+  & .displayIcon {
+    pointer-events: none;
+  }
+`;
+const StyledTextField = styled(Input$1) `
+  & label {
+    position: absolute;
+    z-index: 1;
+    top: 16px;
+
+    left: 16px;
+    color: ${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;
+    }
+
+    ${MediaQueries.tdDown} {
+      max-width: 220px;
+    }
+  }
+  & input,
+  .mantine-Input-input {
+    ::placeholder {
+      color: ${theme.mbColors.gray};
+      font-size: 14px;
+    }
+
+    ::-webkit-input-placeholder {
+      /* Chrome/Opera/Safari */
+      color: ${theme.mbColors.gray};
+      font-size: 14px;
+    }
+    ::-moz-placeholder {
+      /* Firefox 19+ */
+      color: ${theme.mbColors.gray};
+      font-size: 14px;
+    }
+    :-ms-input-placeholder {
+      /* IE 10+ */
+      color: ${theme.mbColors.gray};
+      font-size: 14px;
+    }
+    :-moz-placeholder {
+      /* Firefox 18- */
+      color: ${theme.mbColors.gray};
+      font-size: 14px;
+    }
+    height: ${(props) => (props.size === 'sm' ? 48 : 72)}px !important;
+    padding-top: 27px !important;
+    border-color: ${theme.mbColors.lightGray} !important;
+    background-color: ${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.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;
+    }
+  }
+`;
+
 styled.div `
   display: flex;
   flex-direction: column;
@@ -893,23 +930,23 @@ const DefaultForm = (props) => {
                     React__default.createElement(StyledTextField, { label: t('babyGrowth.input.birthday'), name: "birthday", size: "md", value: String(value), CustomInput: React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { onChange: onChange, maxDate: new Date(), className: (error === null || error === void 0 ? void 0 : error.message) ? 'error-input' : '', rightSection: React__default.createElement(CalendarMB, { size: 32 }) })) }))) }),
             React__default.createElement(StyledRow, null,
                 React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.height')} ${t('babyGrowth.cm')}`, name: "height", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
+                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.height')} ${t('babyGrowth.cm')}`, name: "height", size: "md", value: String(value), CustomInput: React__default.createElement(Input$1, { 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.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.weight')} ${t('babyGrowth.kg')}`, name: "weight", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
+                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.weight')} ${t('babyGrowth.kg')}`, name: "weight", size: "md", value: String(value), CustomInput: React__default.createElement(Input$1, { 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.createElement(StyledRow, null,
                 React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.headCircumference')} ${t('babyGrowth.cm')}`, name: "head", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { className: isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message)
+                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.headCircumference')} ${t('babyGrowth.cm')}`, name: "head", size: "md", value: String(value), CustomInput: React__default.createElement(Input$1, { 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.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(StyledFormControl, null,
-                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.input.bmi')} ${t('babyGrowth.kg.m2')}`, name: "date", size: "md", value: String(value), CustomInput: React__default.createElement(Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true, style: { color: '#9495A0' } }) }))) })),
+                        React__default.createElement(StyledTextField, { label: `${t('babyGrowth.input.bmi')} ${t('babyGrowth.kg.m2')}`, name: "date", size: "md", value: String(value), CustomInput: React__default.createElement(Input$1, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true, style: { color: '#9495A0' } }) }))) })),
             React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
                     React__default.createElement(StyledTextField, { label: t('babyGrowth.input.measurementDate'), name: "date", size: "md", value: DateToInputValue(value), CustomInput: React__default.createElement(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.createElement(CalendarMB, { size: 32 }) })) }))) }),
             React__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.createElement(React__default.Fragment, null,
@@ -922,23 +959,23 @@ const DefaultForm = (props) => {
                         React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "height" },
                             React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.height')),
                             React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.cm'))),
-                        React__default.createElement(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.createElement(Input$1, { 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.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
                         React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "weight" },
                             React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.weight')),
                             React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.kg'))),
-                        React__default.createElement(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.createElement(Input$1, { 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.createElement(StyledRow, null,
                 React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error }, }) => (React__default.createElement(StyledFormControl, null,
                         React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "head" },
                             React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.headCircumference')),
                             React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.cm'))),
-                        React__default.createElement(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.createElement(Input$1, { 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.createElement(Controller, { control: control, name: "bmi", render: ({ field: { value } }) => (React__default.createElement(StyledFormControl, null,
                         React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "bmi" },
                             React__default.createElement(Text, { size: "s4", weight: "semiBold" }, t('babyGrowth.input.bmi')),
                             React__default.createElement(Text, { as: "span", size: "n1", color: theme.colors.gray400 }, t('babyGrowth.kg.m2'))),
-                        React__default.createElement(Input, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true }))) })),
+                        React__default.createElement(Input$1, { name: "bmi", size: "md", type: "number", value: String(value), isDisabled: true }))) })),
             React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange }, fieldState: { error } }) => (React__default.createElement(StyledFormControl, null,
                     React__default.createElement(StyledInlineLabel, { size: "label1", htmlFor: "measurementDate" },
                         React__default.createElement(Text, { as: "label", size: "s4", weight: "semiBold" }, t('babyGrowth.input.measurementDate'))),
@@ -1000,12 +1037,12 @@ const InlineForm = (_a) => {
                         React__default.createElement("span", { className: classes.bmiVal }, !isNaN(Number(value)) && value !== '0' ? value : ''),
                         t('babyGrowth.kg.m2')))) }),
             React__default.createElement(Controller, { control: control, name: "height", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                    React__default.createElement(Input$1, { 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.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))) }),
+                    React__default.createElement(Input$2, { 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.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))) }),
             React__default.createElement(Controller, { control: control, name: "weight", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(Box, { className: cx(isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                    React__default.createElement(Input$1, { 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.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))) })),
+                    React__default.createElement(Input$2, { 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.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))) })),
         React__default.createElement(Controller, { control: control, name: "head", render: ({ field: { onChange, value }, fieldState: { error } }) => (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.headCircumference') },
                 React__default.createElement(Box, { className: cx(isEmptyThreeFields || (error === null || error === void 0 ? void 0 : error.message) ? 'error' : '') },
-                    React__default.createElement(Input$1, { 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.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })))) }),
+                    React__default.createElement(Input$2, { 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.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })))) }),
         React__default.createElement(Controller, { control: control, name: "measurementDate", render: ({ field: { onChange } }) => (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
                 React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date(), onChange: onChange, maxDate: new Date() })))) }),
         React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: classes.submitBtn }, submitProps), t('babyGrowth.input.submit'))));
@@ -1083,4 +1120,4 @@ const BabyGrowthForm = (_a) => {
         } }, formLayout === 'default' ? (React__default.createElement(DefaultForm, Object.assign({}, commonProps))) : (React__default.createElement(InlineForm, Object.assign({}, commonProps)))));
 };
 
-export { API_DATE_FORMAT as A, BabyGrowthForm as B, Drawer as D, GenderOptionControl as G, HealthToolFormWrapper as H, Modal as M, RadioImageGroup as R, StyledTextField as S, DateToInputValue as a, getDueDateIVF as b, getDueDateLastPeriod as c, DueDateCalculatorType as d, getDueDateConception as g };
+export { BabyGrowthForm as B, Drawer as D, GenderOptionControl as G, HealthToolFormWrapper as H, Modal as M, RadioImageGroup as R, DueDateCalculatorType as a };

package/build/esm/{index-4a001eda.js → index-746c355d.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { _ as __rest } from './tslib.es6-059585f8.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-f0ac2d9c.js';
+import { B as Button$1 } from './index-0d6c85cf.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-52e1cb2b.js → index-7872ac55.js}

@@ -1,18 +1,18 @@
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { _ as __rest } from './tslib.es6-059585f8.js';
 import React__default from 'react';
-import './index-f0ac2d9c.js';
+import './index-0d6c85cf.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-d73390b2.js';
-import './index-3e04178f.js';
-import './index-a2cdc317.js';
-import './useMantineLocale-6a509174.js';
-import { T as Text$1 } from './index-7aff3435.js';
-import './theme-7c208c30.js';
-import './translationsContext-9021710e.js';
+import './index-604a2f74.js';
+import './index-893ee6c2.js';
+import './index-ff8c9d5e.js';
+import './useMantineLocale-0143b7da.js';
+import { T as Text$1 } from './index-0b997c18.js';
+import './theme-4a099635.js';
+import './translationsContext-d6309014.js';
 import 'string-format';
 import '@mantine/hooks';
-import './utils-72d20560.js';
+import './utils-36a2e88c.js';
 
 /**
  * @deprecated Consider to use import { Text } from '@hhgtech/hhg-components/mantine'

package/build/esm/{index-48fd5f17.js → index-988f9bc7.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { _ as __rest } from './tslib.es6-059585f8.js';
 import React__default from 'react';
 import { Modal as Modal$1 } from '@mantine/core';
-import { g as useStyles } from './index-f0ac2d9c.js';
+import { g as useStyles } from './index-0d6c85cf.js';
 
 const Modal = (_a) => {
     var { styles, classNames, transitionProps } = _a, rest = __rest(_a, ["styles", "classNames", "transitionProps"]);

package/build/esm/{index-f55cc5a7.js → index-b0e0fbe0.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-2c23b4a0.js';
+import { _ as __rest } from './tslib.es6-059585f8.js';
 import React__default from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { T as Text } from './index-7aff3435.js';
+import { T as Text } from './index-0b997c18.js';
 
 /**
  * @deprecated Consider to use import { Title } from '@mantine/core'

package/build/esm/{index-23fa4098.js → index-baff4b23.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './index-3e04178f.js';
-import { C as CommonGAssets } from './index-a2cdc317.js';
-import { i as isChristmas, a as LunarNewYearLocale, b as isLunarNewYear, c as isNewYear, d as isRamadan, e as isVNHungKing, f as isVN3004, g as isLabourDay, S as StyledLogo, L as LogoIcon, h as StyledProLogo } from './utils-8a09aa51.js';
-import { I as ImageWrap } from './index-f0ac2d9c.js';
+import { L as LOCALE } from './index-893ee6c2.js';
+import { C as CommonGAssets } from './index-ff8c9d5e.js';
+import { i as isChristmas, a as LunarNewYearLocale, b as isLunarNewYear, c as isNewYear, d as isRamadan, e as isVNHungKing, f as isVN3004, g as isLabourDay, S as StyledLogo, L as LogoIcon, h as StyledProLogo } from './utils-9ad73105.js';
+import { I as ImageWrap } from './index-0d6c85cf.js';
 
 const Logo = ({ type, className, style, isLightLogo, customSize, badge, locale, dateForSeasonal, isPro, }) => {
     const [seasonalChecks, setSeasonalChecks] = useState({