@hhgtech/hhg-components 1.29.79 → 1.29.81

package/build/esm/index-38f50764.js

@@ -0,0 +1,557 @@
+import React__default, { useState, useRef, useEffect, createContext, useContext } from 'react';
+import { u as useScrollbarSize } from './useScrollbarSize-84bb5b47.js';
+import { createPortal } from 'react-dom';
+import styled from '@emotion/styled';
+import { M as MediaQueries } from './utils-f8761b9d.js';
+import { s as setDefaultClass } from './defaultClassWrapper-31caf23b.js';
+import { t as theme } from './theme-f18c2351.js';
+import { _ as __rest } from './tslib.es6-761239c7.js';
+import { createStyles, rem, useMantineTheme } from '@mantine/core';
+import { useForm, isNotEmpty } from '@mantine/form';
+import { c as Input } from './index-21eac858.js';
+import { D as DatePicker } from './index-598ab51b.js';
+import { T as Text } from './index-c200bff6.js';
+import './index-2b9213cf.js';
+import { u as useTranslations } from './useTranslations-fbf6a6ab.js';
+import '@mantine/hooks';
+import './index-e3787b20.js';
+import './index-78255d6c.js';
+import './useMantineLocale-4fb67342.js';
+import './index-bef3c9bd.js';
+import { H as HealthToolFormWrapper, I as INPUT_RANGE } from './constants-6bdb97a8.js';
+import { G as GenderOptionControl } from './index-f27edf45.js';
+import { CalendarMB } from '@hhgtech/icons/other';
+
+const StyledModal = setDefaultClass(styled.div `
+    position: relative;
+    z-index: 200;
+    background-color: ${theme.colors.white};
+    border-radius: ${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%;
+        padding: 24px;
+      }
+    }
+    .hhg-modal__content {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+      padding: 16px;
+    }
+    .hhg-modal__video {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+      background-color: none;
+      box-shadow: none;
+    }
+  `, 'hhgcomp-modal-modal');
+const StyledModalWrapper = styled.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;
+      ${MediaQueries.mbDown} {
+        width: 340px;
+      }
+    }
+  }
+  &[data-type='video'] {
+    ${StyledModal.classSelector} {
+      height: 100%;
+      max-height: 539px;
+      ${MediaQueries.mbDown} {
+        height: 192px;
+        width: 100%;
+        height: 100%;
+        border-radius: ${theme.borderRadius};
+        max-height: 192px;
+      }
+    }
+  }
+  &[data-type='confirm'] {
+    ${StyledModal.classSelector} {
+      width: 100%;
+      max-width: 407px;
+      ${MediaQueries.mbDown} {
+        width: calc(100% - 32px);
+        max-width: calc(100% - 32px);
+      }
+    }
+  }
+`;
+const StyledModalMask = styled.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.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] = useState(false);
+    const elRef = useRef(null);
+    const { width: scrollBarWidth } = useScrollbarSize();
+    if (!elRef.current && mounted) {
+        elRef.current = document.createElement('div');
+    }
+    useEffect(() => {
+        setMounted(true);
+        return () => {
+            setMounted(false);
+            cleanUpModalShow();
+            cleanUpDisabledScroll();
+        };
+    }, []);
+    useEffect(() => {
+        if (mounted) {
+            const modalsRoot = getModalsRoot();
+            modalsRoot.appendChild(elRef.current);
+            return () => {
+                modalsRoot.removeChild(elRef.current);
+            };
+        }
+    }, [mounted]);
+    useEffect(() => {
+        if (isOpen) {
+            document.body.classList.add('hhc-modal-show');
+        }
+        else {
+            cleanUpModalShow();
+        }
+    }, [isOpen]);
+    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 createPortal(React__default.createElement(StyledModalWrapper, { className: classes, "data-open": isOpen, "data-type": type },
+        !isStaticBackdrop && (React__default.createElement(StyledModalMask, { "data-open": isOpen, onClick: onClose, "data-type": type })),
+        !isStaticBackdrop && type === 'video' && !!closeIcon && (React__default.createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+        React__default.createElement(StyledModal, { className: "hhg-modal", "data-open": isOpen, "data-site-type": siteType },
+            React__default.createElement("div", { className: type === 'video' ? 'hhg-modal__video' : 'hhg-modal__content' },
+                !!closeIcon && type !== 'video' && (React__default.createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+                children))), elRef.current);
+};
+
+const BabyGrowthFormContext = createContext({});
+
+var useStyles$1 = createStyles((theme) => {
+    return {
+        unit: {
+            color: theme.colors.gray[4],
+            fontWeight: 'normal',
+        },
+    };
+});
+
+const DefaultForm = (_a) => {
+    var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
+    const { t } = useTranslations();
+    const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
+    const { classes } = useStyles$1(undefined, {
+        name: 'BabyGrowthForm__DefaultForm',
+        styles,
+        classNames,
+    });
+    const commonDateProps = {
+        placeholder: 'DD/MM/YYYY',
+        popoverProps: {
+            withinPortal: true,
+        },
+    };
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.Control, null,
+                React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, genderValue: {
+                        male: 'boy',
+                        female: 'girl',
+                    } }, form.getInputProps('gender'), { error: null }))),
+            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Wrapper, { label: t('babyGrowth.input.birthday') },
+                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, onChange: (v) => {
+                        v && form.validateField('measurementDate');
+                        form.getInputProps('birthday').onChange(v);
+                    } }))),
+            form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
+        React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
+                t('babyGrowth.height'),
+                React__default.createElement("span", { className: classes.unit },
+                    "(",
+                    t('babyGrowth.cm'),
+                    ")")) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
+                form.setFieldValue('height', v);
+                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+            } })),
+        React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
+                t('babyGrowth.weight'),
+                React__default.createElement("span", { className: classes.unit },
+                    "(",
+                    t('babyGrowth.kg'),
+                    ")")) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
+                form.setFieldValue('weight', v);
+                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+            } })),
+        React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(React__default.Fragment, null,
+                t('babyGrowth.head'),
+                React__default.createElement("span", { className: classes.unit },
+                    "(",
+                    t('babyGrowth.cm'),
+                    ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                form.setFieldValue('head', v);
+                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+            } })),
+        form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(Input.Wrapper, { label: t('babyGrowth.input.measurementDate') },
+                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), error: null }))),
+            form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))));
+};
+
+var useStyles = createStyles((theme) => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rem(8),
+        },
+        bmiVal: {
+            display: 'inline-block',
+        },
+        unitText: {
+            color: theme.colors.gray[6],
+        },
+        submitBtn: {},
+    };
+});
+
+/**
+ * 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);
+            if (isNaN(bmi))
+                return 0;
+            return Number(localizeNumberFormat(bmi));
+        }
+        else {
+            return 0;
+        }
+    }
+    catch (error) { }
+    return 0;
+};
+
+const InlineForm = (_a) => {
+    var { styles, classNames } = _a, props = __rest(_a, ["styles", "classNames"]);
+    const { t } = useTranslations();
+    const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
+    const { classes } = useStyles(undefined, {
+        name: 'BabyGrowthForm__InlineForm',
+        styles,
+        classNames,
+    });
+    const commonDateProps = {
+        placeholder: 'DD/MM/YYYY',
+        popoverProps: {
+            withinPortal: true,
+        },
+    };
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender') },
+                React__default.createElement(GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, isBaby: true, genderValue: {
+                        male: 'boy',
+                        female: 'girl',
+                    } }, form.getInputProps('gender')))),
+            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
+                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, onChange: (v) => {
+                        v && form.validateField('measurementDate');
+                        form.getInputProps('birthday').onChange(v);
+                    } }))),
+            form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: "BMI", styles: {
+                    control: {
+                        '&:first-child': {
+                            width: 'auto',
+                        },
+                    },
+                } },
+                React__default.createElement(Text, { size: "p3" },
+                    React__default.createElement("span", { className: classes.bmiVal }, form.getInputProps('height').value &&
+                        form.getInputProps('weight').value &&
+                        bmiCalculate(Number(form.getInputProps('height').value), Number(form.getInputProps('weight').value))),
+                    "(",
+                    t('babyGrowth.kg.m2'),
+                    ")"),
+                React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
+                        form.setFieldValue('height', v);
+                        form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                    }, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
+                React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
+                        form.setFieldValue('weight', v);
+                        form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                    }, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.head') },
+                React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                        form.setFieldValue('head', v);
+                        form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                    }, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))),
+            form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
+                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('measurementDate'), { error: null }))),
+            form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
+        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'))));
+};
+
+const MbLayout = (_a) => {
+    var props = __rest(_a, []);
+    const { t } = useTranslations();
+    const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
+    const commonDateProps = {
+        placeholder: 'DD/MM/YYYY',
+        popoverProps: {
+            withinPortal: true,
+        },
+    };
+    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(HealthToolFormWrapper.Control, null,
+                React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, genderValue: {
+                        male: 'boy',
+                        female: 'girl',
+                    } }, form.getInputProps('gender'), { error: null }))),
+            form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.birthday'), rightSection: React__default.createElement(CalendarMB, null) },
+            React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, rightSection: null, onChange: (v) => {
+                    v && form.validateField('measurementDate');
+                    form.getInputProps('birthday').onChange(v);
+                } }))),
+        form.errors.birthday && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday)),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.height'), rightSection: t('babyGrowth.cm') },
+            React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('height'), { placeholder: t('tools.inputPlaceholder', {
+                    content: '160',
+                }), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
+                    form.setFieldValue('height', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } }))),
+        form.errors.height && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.height)),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.weight'), rightSection: t('babyGrowth.kg') },
+            React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('weight'), { placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
+                    form.setFieldValue('weight', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } }))),
+        form.errors.weight && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.weight)),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.head'), rightSection: t('babyGrowth.cm') },
+            React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('head'), { placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), onChange: (v) => {
+                    form.setFieldValue('head', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } }))),
+        form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
+        React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.measurementDate'), rightSection: React__default.createElement(CalendarMB, null) },
+            React__default.createElement(Input.Wrapper, null,
+                React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), rightSection: null, error: null })))),
+        form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate)),
+        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))));
+};
+
+const BabyGrowthForm = (_a) => {
+    var { onSubmit, formLayout = 'default', submitProps, currentUrl } = _a, rest = __rest(_a, ["onSubmit", "formLayout", "submitProps", "currentUrl"]);
+    const { t } = useTranslations();
+    const theme = useMantineTheme();
+    const form = useForm({
+        initialValues: {
+            measurementDate: new Date(),
+        },
+        validate: {
+            gender: isNotEmpty(t('validation.error.requiredField')),
+            birthday: isNotEmpty(t('validation.error.requiredField')),
+            measurementDate: (value, values) => {
+                return values.birthday
+                    ? values.birthday instanceof Date &&
+                        value instanceof Date &&
+                        values.birthday.getTime() <= value.getTime()
+                        ? null
+                        : t('babyGrowth.error.measurementDateLowerThanBirthday', {
+                            name: '',
+                        })
+                    : null;
+            },
+            checkMesureVal: (_value, values) => {
+                return (values.head === undefined &&
+                    values.height === undefined &&
+                    values.weight === undefined) ||
+                    values.head ||
+                    values.height ||
+                    values.weight
+                    ? null
+                    : t('babyGrowth.error.atLeastOneOf');
+            },
+        },
+        validateInputOnChange: ['checkMesureVal'],
+    });
+    const commonProps = Object.assign({ onSubmit: form.onSubmit((v) => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(Object.assign(Object.assign({}, v), { bmi: bmiCalculate(Number(form.getInputProps('height').value), Number(form.getInputProps('weight').value)).toString() }))) }, rest);
+    return (React__default.createElement(BabyGrowthFormContext.Provider, { value: {
+            submitProps,
+            currentUrl,
+            form,
+        } }, formLayout === 'default' ? (theme.other.template === 'mb' ? (React__default.createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))) : (React__default.createElement(InlineForm, Object.assign({}, commonProps)))));
+};
+
+export { BabyGrowthForm as B, Modal as M };

package/build/esm/index-42ad7763.js

@@ -0,0 +1,95 @@
+import React__default, { useState, useEffect } from 'react';
+import styled from '@emotion/styled';
+import { t as theme } from './theme-f18c2351.js';
+import { I as ImageWrap } from './index-21eac858.js';
+
+const StyledAvatar = styled.div `
+  background-color: var(--background-color, transparent);
+  color: white;
+  cursor: pointer;
+  img {
+    --width: var(--width-prop, 40px);
+    --height: var(--height-prop, 40px);
+    width: var(--width);
+    height: var(--height);
+  }
+  &[data-has-max='true'] {
+    img {
+      max-width: var(--width);
+      max-height: var(--height);
+    }
+  }
+
+  &[data-avatar-type='square'] {
+    img {
+      --width: var(--width-prop, 72px);
+      --height: var(--height-prop, 72px);
+      border-radius: ${theme.borderRadius};
+    }
+  }
+
+  &[data-avatar-type='rounded'] {
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  &[data-custom-size='true'] {
+    display: flex;
+    overflow: hidden;
+    overflow: hidden;
+    width: var(--size);
+    height: var(--size);
+    align-items: center;
+    justify-content: center;
+    background-size: cover;
+    font-size: calc(var(--size) / 2);
+    font-weight: bold;
+    &[data-avatar-type='square'] {
+      border-radius: ${theme.borderRadius};
+    }
+    &[data-avatar-type='rounded'] {
+      border-radius: 50%;
+      img {
+        --width: 100%;
+        --height: 100%;
+      }
+    }
+    img {
+      object-fit: cover;
+    }
+  }
+`;
+
+const pxBySize = {
+    xs: 28,
+    small: 32,
+    medium: 40,
+    large: 48,
+    xl: 64,
+    xxl: 80,
+    xxxl: 96,
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Avatar = ({ type = 'square', size, avatarImg, avatarUrl, firstLetter, backgroundColor, onClick, style, className, width, height, alt, }) => {
+    const sizePx = size ? pxBySize[size] : undefined;
+    const [isImageLoadingError, setIsImageLoadingError] = useState(false);
+    useEffect(() => {
+        if (avatarUrl) {
+            const img = document.createElement('img');
+            img.setAttribute('src', avatarUrl);
+            img.addEventListener('error', () => {
+                setIsImageLoadingError(true);
+            });
+        }
+    }, [avatarUrl, setIsImageLoadingError]);
+    const shouldRenderLetter = ((!avatarUrl && !avatarImg) || isImageLoadingError) && firstLetter;
+    return (React__default.createElement(StyledAvatar, { style: Object.assign(Object.assign({}, style), { '--size': sizePx ? sizePx + 'px' : undefined, '--width-prop': width ? width + 'px' : undefined, '--height-prop': height ? height + 'px' : undefined, '--background-color': backgroundColor }), "data-has-max": !!(width && height), "data-avatar-type": type, onClick: onClick, className: className, avatarUrl: avatarUrl, "data-custom-size": !!size },
+        avatarImg,
+        avatarUrl && !isImageLoadingError && (React__default.createElement(ImageWrap, { src: avatarUrl, alt: alt || 'avatar' })),
+        shouldRenderLetter && firstLetter));
+};
+
+export { Avatar as A };

package/build/esm/{index-47a90477.js → index-598ab51b.js}

@@ -1,11 +1,11 @@
-import { _ as __rest } from './tslib.es6-efad16cf.js';
+import { _ as __rest } from './tslib.es6-761239c7.js';
 import React__default from 'react';
 import { useMantineTheme, Image } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
-import { I as ISO_FORMAT } from './index-ef96fd13.js';
-import { L as LOCALE } from './index-877eed06.js';
-import { C as CommonGAssets } from './index-92fd8661.js';
-import { M as MAPPED_LOCALE } from './useMantineLocale-bcfdeb0c.js';
+import { I as ISO_FORMAT } from './index-bef3c9bd.js';
+import { L as LOCALE } from './index-e3787b20.js';
+import { C as CommonGAssets } from './index-78255d6c.js';
+import { M as MAPPED_LOCALE } from './useMantineLocale-4fb67342.js';
 
 // Omit<MantineDatePickerInputProps, 'value'>
 const DatePicker = (_a) => {