@hhgtech/hhg-components 1.29.447 → 1.29.449-beta-1

package/build/{utils-e739a670.js → utils-598d9d7b.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var healthTools = require('./healthTools-3d8bcbfb.js');
-var index = require('./index-fcc313b5.js');
-var store = require('./store-0ef81ac8.js');
-var index$1 = require('./index-f8ac1bf2.js');
-var Locale = require('./Locale-b35b0a4c.js');
+var healthTools = require('./healthTools-b9e3df11.js');
+var index = require('./index-ff9f695e.js');
+var store = require('./store-835c504d.js');
+var index$1 = require('./index-c4c50d31.js');
+var Locale = require('./Locale-e810a743.js');
 
 const isFeatureWhatsAppEnabled = [
     Locale.LOCALE.Indonesia,

package/build/{utils-8834e04e.js → utils-7a0ead49.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-require('./index-f8ac1bf2.js');
-var Locale = require('./Locale-b35b0a4c.js');
+require('./index-c4c50d31.js');
+var Locale = require('./Locale-e810a743.js');
 
 // https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
 const MAPPED_LOCALE = {

package/build/{utils-a6d1698a.js → utils-8195e421.js}

@@ -1,11 +1,11 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-12319903.js');
+var index = require('./index-b319bb8a.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-3ea8ef9f.js');
+var utils = require('./utils-b1545b34.js');
 var Skeleton = require('react-loading-skeleton');
 var formatString = require('string-format');
 var constantsDomainLocales = require('./constantsDomainLocales.js');

package/build/vaccination.js

@@ -2,41 +2,41 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-9b06c729.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$5 = require('./index-230f438f.js');
+var index$5 = require('./index-9f5fbdee.js');
 require('@mantine/dates');
-require('./index-12319903.js');
-var index$7 = require('./index-f8ac1bf2.js');
-require('./index-4a27456a.js');
-var index$3 = require('./index-aaaea7c1.js');
-var index$2 = require('./index-505b1d6d.js');
-var index$1 = require('./index-38b56ca0.js');
+require('./index-b319bb8a.js');
+var index$7 = require('./index-c4c50d31.js');
+require('./index-e04d610b.js');
+var index$3 = require('./index-93c1da83.js');
+var index$2 = require('./index-ecaaab9e.js');
+var index$1 = require('./index-2d80a747.js');
 var miscTheme = require('./miscTheme.js');
-require('./index.styles-c7f5e0dc.js');
-var index = require('./index-a85ac47f.js');
+require('./index-4b72550f.js');
+require('./index.styles-80bf0384.js');
+var index = require('./index-11edad6f.js');
 var hooks = require('@mantine/hooks');
-require('./text-e637affa.js');
-var utils = require('./utils-3ea8ef9f.js');
-require('./index-dc205198.js');
+var utils = require('./utils-b1545b34.js');
+require('./index-01c0a05b.js');
 var styled = require('@emotion/styled');
-var index$4 = require('./index-7baedd26.js');
-require('./translationsContext-69b4e29c.js');
+var index$4 = require('./index-4127c27e.js');
+require('./translationsContext-70cebab7.js');
 var other = require('@hhgtech/icons/other');
-var index$6 = require('./index-f245fc9d.js');
-var index$8 = require('./index-d6d389d5.js');
+var index$6 = require('./index-71bda7aa.js');
+var index$8 = require('./index-1258816e.js');
 var form = require('@mantine/form');
 var dayjs = require('dayjs');
 var customParseFormat = require('dayjs/plugin/customParseFormat');
-var index$a = require('./index-31a6d507.js');
-var index$9 = require('./index-a79cb92d.js');
+var index$a = require('./index-75ddddca.js');
+var index$9 = require('./index-5d92a0b0.js');
 require('@mantine/carousel');
 require('classnames');
 require('uuid');
-require('./useUniqueId-349868ac.js');
+require('./useUniqueId-dcb6eac9.js');
 require('./constantsSite.js');
-require('./Locale-b35b0a4c.js');
+require('./Locale-e810a743.js');
 require('@emotion/react');
 require('@hhgtech/icons/core');
 require('date-fns/locale');
@@ -44,7 +44,7 @@ require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
 require('@mantine/notifications');
-require('./shared-d3336c48.js');
+require('./shared-31d5d1ed.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hhgtech/hhg-components",
-  "version": "1.29.447",
+  "version": "1.29.449-beta-1",
   "main": "build/index.js",
   "module": "build/esm/index.js",
   "files": [

package/build/esm/index-3b3f2f77.js

@@ -1,287 +0,0 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
-import React__default, { createContext, useContext } from 'react';
-import { useMantineTheme, Box, Flex, rem, createStyles } from '@mantine/core';
-import { RedCross } from '@hhgtech/icons/other';
-import './index-85894b46.js';
-import '@mantine/dates';
-import './index-73f4d56a.js';
-import './index-52825707.js';
-import './index-f59d4d8a.js';
-import { t as themeColors } from './index-d830bd64.js';
-import { T as Text } from './index-f65d577c.js';
-import './index-206b9bef.js';
-import './index.styles-590ff17d.js';
-import { u as useTranslations } from './index-59da60a7.js';
-import '@mantine/hooks';
-import './text-6f2656a6.js';
-import { M as MediaQueries } from './utils-05e3b4d6.js';
-import './index-13586e44.js';
-import styled from '@emotion/styled';
-import { setDefaultClass } from './miscDefaultClassWrapper.js';
-
-const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
-const StyledInnerClass = 'hhgcomp-toolbanner-inner';
-const StyledWrapper = setDefaultClass(styled.div `
-    position: relative;
-    width: 100%;
-    height: 100%;
-  `, 'hhgcomp-toolbanner-wrapper');
-const StyledContainer = styled.div `
-  width: 100%;
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
-
-  background-color: ${(props) => props['data-banner-color'] || themeColors.blue[1]};
-
-  &[data-site='marryBaby'] {
-    a {
-      text-decoration: underline;
-    }
-    ${MediaQueries.mbDown} {
-      padding-bottom: 0;
-    }
-  }
-
-  ${MediaQueries.tdDown} {
-    height: auto;
-    ${StyledWrapper.classSelector} {
-      .${StyledInnerClass} {
-        display: flex;
-        align-items: center;
-        ${MediaQueries.mbDown} {
-          justify-content: space-between;
-        }
-        .${StyledIconContainerClass} {
-          position: relative;
-          right: -50px;
-          bottom: -20px;
-          width: 110px;
-          min-width: 0;
-          height: auto;
-          min-height: 0;
-          align-self: flex-end;
-          margin-bottom: -20px;
-          ${MediaQueries.mbDown} {
-            right: unset;
-          }
-        }
-      }
-    }
-  }
-
-  .embedded-review {
-    gap: 12px;
-    display: flex;
-    align-items: center;
-  }
-  .embedded-review__avatar {
-    position: relative;
-    min-width: 32px;
-    img {
-      width: 32px;
-      height: 32px;
-      display: block;
-      border-radius: 100%;
-    }
-    svg {
-      bottom: 0;
-      right: 0;
-      position: absolute;
-    }
-  }
-`;
-
-const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
-    link: '#',
-    reviewer: '',
-    date: '',
-}, icon, style, isPregTool, isRevamp, }) => {
-    const { t } = useTranslations();
-    const theme = useMantineTheme();
-    const isMarryBaby = theme.other.template === 'mb';
-    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
-    const headingAs = 'h2';
-    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default.createElement(Text, { size: "label2", as: "div", className: "embedded-review", sx: {
-            a: {
-                textUnderlineOffset: '2px',
-                textDecoration: 'underline',
-            },
-        } },
-        medicalReview.avatar && (React__default.createElement("div", { className: "embedded-review__avatar" },
-            React__default.createElement(Box, { pos: "relative" },
-                React__default.createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer, loading: "lazy" }),
-                React__default.createElement(RedCross, { size: 14 })))),
-        React__default.createElement("div", { dangerouslySetInnerHTML: {
-                __html: t('toolPage.toolReviewer', {
-                    expert_name: `<a href="${medicalReview.link}">${medicalReview.reviewer.trim()}</a>`,
-                    date: medicalReview.date,
-                }),
-            } }))) : null;
-    return (React__default.createElement(StyledContainer, { className: className, style: style, "data-site": siteType, "data-banner-color": bannerColor ||
-            (isMarryBaby
-                ? theme.colors.mb[1]
-                : isPregTool
-                    ? theme.colors.pink[1]
-                    : theme.colors.blue[1]) },
-        React__default.createElement(StyledWrapper, null,
-            React__default.createElement(Flex, { gap: rem(24), align: 'center', justify: 'space-between', sx: { padding: rem(16), gap: rem(24), '.heading': {} } },
-                React__default.createElement(Flex, { direction: "column", gap: isRevamp ? 8 : 0 },
-                    React__default.createElement(Text, { size: isMarryBaby ? 'h4' : 'h3', as: headingAs, className: 'heading' }, heading),
-                    medicalReview && (React__default.createElement(Text, { size: "n1", as: "div" }, medicalReviewEle))),
-                React__default.createElement(Flex, { justify: 'center', align: 'center', sx: (theme) => ({
-                        width: rem(80),
-                        height: rem(80),
-                        borderRadius: isMarryBaby ? '24px' : '50%',
-                        backgroundColor: '#fff',
-                        flexShrink: 0,
-                        img: {
-                            maxWidth: rem(48),
-                            maxHeight: rem(48),
-                        },
-                        [theme.fn.smallerThan('sm')]: {
-                            width: rem(64),
-                            height: rem(64),
-                            img: {
-                                maxWidth: rem(40),
-                                maxHeight: rem(40),
-                            },
-                        },
-                    }) }, icon)))));
-};
-
-var useStyles$2 = createStyles(() => {
-    return {
-        root: {
-            borderTopLeftRadius: 'inherit',
-            borderTopRightRadius: 'inherit',
-        },
-    };
-});
-
-const CardWrapperContext = createContext({});
-
-const Banner = (_a) => {
-    var { styles, classNames, className } = _a, rest = __rest(_a, ["styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$2(undefined, {
-        name: 'HealthToolCardWrapper__Banner',
-        styles,
-        classNames,
-    });
-    const { isPregTool } = useContext(CardWrapperContext);
-    return (React__default.createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, className: cx(className, classes.root) }, rest)));
-};
-
-var useStyles$1 = createStyles(() => {
-    return {
-        root: {
-            padding: rem(16),
-        },
-    };
-});
-
-const Body = (_a) => {
-    var { children, styles, classNames, className } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$1(undefined, {
-        name: 'HealthToolCardWrapper',
-        styles,
-        classNames,
-    });
-    return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest), children));
-};
-
-var useStyles = createStyles((theme, { isPregTool }) => {
-    const isMarryBaby = theme.other.template === 'mb';
-    return {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            borderRadius: rem(isMarryBaby ? 16 : 8),
-            backgroundColor: '#fff',
-            border: `1px solid ${isMarryBaby
-                ? theme.colors.mb[2]
-                : isPregTool
-                    ? theme.colors.pink[1]
-                    : theme.colors.blue[2]}`,
-        },
-        row: {
-            display: 'flex',
-            alignItems: 'stretch',
-            justifyContent: 'space-between',
-            gap: rem(16),
-        },
-        labelWrapper: {
-            flex: '1 1 0px',
-            display: 'flex',
-            alignItems: 'center',
-            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
-        },
-        label: {
-            fontSize: rem(14),
-            color: theme.colors.gray[6],
-        },
-        control: {
-            width: rem(180),
-            flexShrink: 1,
-            '&.error': {
-                'button, input': {
-                    borderColor: theme.colors.red[7],
-                },
-            },
-        },
-        radioLabel: {
-            fontSize: rem(16),
-        },
-        radioRoot: {
-            padding: `${rem(10)} 0`,
-            margin: 0,
-        },
-        bmiVal: {
-            display: 'inline-block',
-        },
-        inputWithUnit__wrapper: {
-            position: 'relative',
-        },
-        inputWithUnit__unit: {
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            paddingRight: rem(10),
-            display: 'flex',
-            alignItems: 'center',
-        },
-        inputWithUnit__unitText: {
-            color: theme.colors.gray[6],
-        },
-        inputWithUnit__input: {
-            input: {
-                paddingRight: rem(30),
-                '::-webkit-inner-spin-button': { '-webkit-appearance': 'none' },
-            },
-        },
-        submitBtn: {},
-        switchRoot: {
-            padding: '16px 0',
-        },
-    };
-});
-
-const _HealthToolCardWrapper = (_a) => {
-    var { children, styles, classNames, className, isPregTool } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className", "isPregTool"]);
-    const { classes, cx } = useStyles({ isPregTool }, {
-        name: 'HealthToolCardWrapper',
-        styles,
-        classNames,
-    });
-    return (React__default.createElement(CardWrapperContext.Provider, { value: {
-            isPregTool,
-        } },
-        React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest), children)));
-};
-const HealthToolCardWrapper = _HealthToolCardWrapper;
-HealthToolCardWrapper.Body = Body;
-HealthToolCardWrapper.Banner = Banner;
-
-export { HealthToolCardWrapper as H, ToolsBannerCard as T };

package/build/esm/index-689e35a5.js

@@ -1,62 +0,0 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
-import React__default from 'react';
-import { createStyles, rem, Box } from '@mantine/core';
-import './index-85894b46.js';
-import '@mantine/dates';
-import './index-73f4d56a.js';
-import './index-52825707.js';
-import './index-f59d4d8a.js';
-import './index-d830bd64.js';
-import { T as Text } from './index-f65d577c.js';
-import { B as Button } from './index-206b9bef.js';
-import './index.styles-590ff17d.js';
-import { u as useTranslations } from './index-59da60a7.js';
-import '@mantine/hooks';
-import './text-6f2656a6.js';
-import './utils-05e3b4d6.js';
-import './index-13586e44.js';
-
-var useStyles = createStyles((theme, { hasOnClickFn }) => {
-    return {
-        root: {
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: rem(16),
-        },
-        sponsorBox: {
-            display: 'flex',
-            gap: rem(12),
-            alignItems: 'center',
-            backgroundColor: theme.colors.neutral[0],
-            border: `1px solid ${theme.colors.neutral[1]}`,
-            borderRadius: rem(4),
-            padding: '4px 12px',
-            alignSelf: 'flex-start',
-        },
-        sponsorLogo: {
-            maxHeight: rem(32),
-        },
-        btn: {
-            minWidth: rem(180),
-            [theme.fn.largerThan('sm')]: {
-                alignSelf: 'flex-end',
-            },
-            visibility: hasOnClickFn ? 'visible' : 'hidden',
-        },
-    };
-});
-
-const BabyPoopForm = (_a) => {
-    var { babyPoopPage, onClickFindOut, currentUrl, sponsorLogo, btnProps, styles, classNames } = _a, props = __rest(_a, ["babyPoopPage", "onClickFindOut", "currentUrl", "sponsorLogo", "btnProps", "styles", "classNames"]);
-    const { t } = useTranslations();
-    const { classes } = useStyles({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopForm', styles, classNames });
-    return (React__default.createElement(Box, Object.assign({ className: classes.root }, props),
-        sponsorLogo && (React__default.createElement(Box, { className: classes.sponsorBox },
-            React__default.createElement(Text, { size: "p4" }, t('common.sponsoredBy')),
-            React__default.createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))),
-        React__default.createElement(Text, { size: "p3", className: "description" }, babyPoopPage.description),
-        React__default.createElement(Button, Object.assign({ className: classes.btn, onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut'))));
-};
-
-export { BabyPoopForm as B };

package/build/esm/index-b1e6d0d1.js

@@ -1,149 +0,0 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-5a49ecfc.js';
-import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-b6025b32.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-e72098ce.js';
-import { G as GenderOptionControl } from './index-0a769c42.js';
-import { I as Input } from './index-85894b46.js';
-import '@mantine/core';
-import '@mantine/dates';
-import './index-73f4d56a.js';
-import './index-52825707.js';
-import './index-f59d4d8a.js';
-import './index-d830bd64.js';
-import { T as Text } from './index-f65d577c.js';
-import './index-206b9bef.js';
-import { theme } from './miscTheme.js';
-import './index.styles-590ff17d.js';
-import { u as useTranslations } from './index-59da60a7.js';
-import '@mantine/hooks';
-import './text-6f2656a6.js';
-import './utils-05e3b4d6.js';
-import './index-13586e44.js';
-import { H as HealthToolFormWrapper } from './index-89ad9053.js';
-import { domainLocales } from './constantsDomainLocales.js';
-import { getBmi } from './embeddedHeathToolCards_helpers.js';
-
-const BmiFormContext = createContext({});
-
-const DefaultForm = (props) => {
-    var _a, _b, _c, _d;
-    const { t, locale } = useTranslations();
-    const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
-    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
-                return (React__default.createElement(GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
-            } }),
-        React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                        t('bmi.ageInput'),
-                        ' ',
-                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.ageInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                        content: '25',
-                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
-            } }),
-        React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                        t('bmi.heightInput'),
-                        ' ',
-                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                        content: '170',
-                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
-            } }),
-        React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                        t('bmi.weightInput'),
-                        ' ',
-                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                        content: '60',
-                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
-            } }),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
-};
-
-const InlineForm = (props) => {
-    var _a, _b, _c, _d;
-    const { t, locale } = useTranslations();
-    const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
-    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
-        React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
-                return (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
-                    React__default.createElement(GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default.createElement(React__default.Fragment, null) : '', onChange: onChange })));
-            } }),
-        React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                return (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
-                    React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
-                            content: '25',
-                        }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
-                            rightSection: {
-                                width: 'auto',
-                            },
-                        }) })));
-            } }),
-        React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput') },
-                        React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
-                                content: '170',
-                            }), name: name, value: value, onChange: onChange, min: 0, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
-                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
-            } }),
-        React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
-                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput') },
-                        React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
-                                content: '60',
-                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', precision: 1, min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })),
-                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
-            } }),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
-};
-
-const BmiForm = (_a) => {
-    var { value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, bmiGenerated, bmiUnit, formLayout = 'default', submitProps } = _a, rest = __rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps"]);
-    const [isTouched, setIsTouched] = useState(false);
-    const { control, handleSubmit, setValue, watch } = useForm();
-    const data = watch();
-    const { locale } = useTranslations();
-    const { getHealthToolLink } = useHealthToolsCache(locale);
-    const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
-    const onValid = (data) => __awaiter(void 0, void 0, void 0, function* () {
-        const height = bmiUnit.heightConvert(data.height);
-        const weight = bmiUnit.weightConvert(data.weight);
-        const submitValue = {
-            gender: data.gender,
-            age: data.age,
-            height,
-            weight,
-            bmi: getBmi({ height, weight }),
-        };
-        onInValid();
-        onSubmitProps && onSubmitProps(submitValue);
-    });
-    const onInValid = () => {
-        setIsTouched(true);
-    };
-    useEffect(() => {
-        Object.keys(valueProps || {}).forEach((k) => {
-            const key = k;
-            setValue(key, valueProps === null || valueProps === void 0 ? void 0 : valueProps[key], {
-                shouldTouch: false,
-                shouldDirty: false,
-                shouldValidate: false,
-            });
-        });
-    }, [valueProps]);
-    useEffect(() => {
-        onChangeProps && onChangeProps(data);
-    }, [data]);
-    const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
-    return (React__default.createElement(BmiFormContext.Provider, { value: {
-            control,
-            bmiGenerated,
-            isTouched,
-            linkTool,
-            submitProps,
-        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
-};
-
-export { BmiForm as B };