@hhgtech/hhg-components 1.29.81 → 1.29.83

package/build/esm/{index-e26514ee.js → index-7720a710.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-761239c7.js';
+import { _ as __rest } from './tslib.es6-2d738692.js';
 import React__default, { useState } from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-f8761b9d.js';
-import { t as theme } from './theme-f18c2351.js';
-import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-16514f4d.js';
+import { M as MediaQueries } from './utils-40533779.js';
+import { theme } from './miscTheme.js';
+import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-288b564e.js';
 
 const StyledInput = styled.div `
   position: relative;

package/build/esm/{index-c200bff6.js → index-7a1552e9.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-761239c7.js';
+import { _ as __rest } from './tslib.es6-2d738692.js';
 import React__default from 'react';
 import { createStyles, Text as Text$1 } from '@mantine/core';
-import { O as OTHER_THEME_CONFIG, F as FontWeight } from './utils-f8761b9d.js';
+import { O as OTHER_THEME_CONFIG, F as FontWeight } from './other-9b439f19.js';
 
 var useStyles = createStyles((theme, _params) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;

package/build/esm/index-7c678785.js

@@ -0,0 +1,259 @@
+import { _ as __rest } from './tslib.es6-2d738692.js';
+import React__default, { createContext, useContext } from 'react';
+import { useMantineTheme, Flex, rem, Box, createStyles } from '@mantine/core';
+import { t as themeColors } from './index-03d7200e.js';
+import '@mantine/dates';
+import './index-39aa0c9f.js';
+import './index-38ced379.js';
+import './index-b9c4dfcb.js';
+import './useMantineLocale-faa72172.js';
+import { T as Text } from './index-7a1552e9.js';
+import './index-bdc3bd61.js';
+import { u as useTranslations } from './useTranslations-ba901edf.js';
+import '@mantine/hooks';
+import { M as MediaQueries } from './utils-40533779.js';
+import './other-9b439f19.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;
+          }
+        }
+      }
+    }
+  }
+`;
+
+const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
+    link: '#',
+    reviewer: '',
+    date: '',
+}, icon, style, isPregTool, }) => {
+    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',
+            },
+        } },
+        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(Box, null,
+                    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-780a08de.js → index-88c06a7e.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-761239c7.js';
+import { _ as __rest } from './tslib.es6-2d738692.js';
 import React__default from 'react';
 import { Indicator as Indicator$1 } from '@mantine/core';
-import { t as theme } from './theme-f18c2351.js';
+import { theme } from './miscTheme.js';
 
 const Indicator = (_a) => {
     var { styles, color = theme.colors.red700 } = _a, props = __rest(_a, ["styles", "color"]);

package/build/esm/{index-cb4afb33.js → index-90d58b18.js}

@@ -1,11 +1,12 @@
-import { _ as __rest } from './tslib.es6-761239c7.js';
+import { _ as __rest } from './tslib.es6-2d738692.js';
 import React__default, { useMemo, useState, useEffect } from 'react';
-import { L as LOCALE } from './index-e3787b20.js';
+import './index-38ced379.js';
 import styled from '@emotion/styled';
-import { C as CommonGAssets } from './index-78255d6c.js';
-import { t as theme } from './theme-f18c2351.js';
-import { I as ImageWrap, d as CentralCarousel } from './index-21eac858.js';
-import { T as Text } from './index-7e756cb8.js';
+import { C as CommonGAssets } from './index-b9c4dfcb.js';
+import { theme } from './miscTheme.js';
+import { I as ImageWrap, d as CentralCarousel } from './index-03d7200e.js';
+import { T as Text } from './index-a51336b9.js';
+import { L as LOCALE } from './Locale-c6a90240.js';
 
 const StyledIconContainer = styled.div `
   display: inline-flex;

package/build/esm/{index-598ab51b.js → index-96a5f239.js}

@@ -1,11 +1,12 @@
-import { _ as __rest } from './tslib.es6-761239c7.js';
+import { _ as __rest } from './tslib.es6-2d738692.js';
 import React__default from 'react';
 import { useMantineTheme, Image } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
-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';
+import { I as ISO_FORMAT } from './index-39aa0c9f.js';
+import './index-38ced379.js';
+import { C as CommonGAssets } from './index-b9c4dfcb.js';
+import { M as MAPPED_LOCALE } from './useMantineLocale-faa72172.js';
+import { L as LOCALE } from './Locale-c6a90240.js';
 
 // Omit<MantineDatePickerInputProps, 'value'>
 const DatePicker = (_a) => {

package/build/esm/index-9a8df805.js

@@ -0,0 +1,147 @@
+import { _ as __rest, a as __awaiter } from './tslib.es6-2d738692.js';
+import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { u as useHealthToolsCache } from './useHealthToolCache-fe7dc697.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-697503a2.js';
+import { G as GenderOptionControl } from './index-3e2f70fe.js';
+import { c as Input } from './index-03d7200e.js';
+import '@mantine/core';
+import '@mantine/dates';
+import './index-39aa0c9f.js';
+import './index-38ced379.js';
+import './index-b9c4dfcb.js';
+import './useMantineLocale-faa72172.js';
+import { T as Text } from './index-7a1552e9.js';
+import './index-bdc3bd61.js';
+import { theme } from './miscTheme.js';
+import { u as useTranslations } from './useTranslations-ba901edf.js';
+import '@mantine/hooks';
+import './utils-40533779.js';
+import './other-9b439f19.js';
+import { H as HealthToolFormWrapper } from './index-a1d2c38b.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 };

package/build/esm/{index-9f1899f2.js → index-9aee96f2.js}

@@ -1,9 +1,10 @@
-import { c as cookie } from './index-3078acec.js';
-import { B as BEARER_TOKEN_COOKIE, d as domainLocales } from './index-bef3c9bd.js';
-import { N as NodeIntentType } from './index-e3787b20.js';
+import { c as cookie } from './index-44870130.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-39aa0c9f.js';
+import { N as NodeIntentType } from './index-38ced379.js';
 import Cookies from 'js-cookie';
 import { v4 } from 'uuid';
-import { i as isProduction } from './isProduction-5684a28c.js';
+import { isProduction } from './constantsIsProduction.js';
+import { domainLocales } from './constantsDomainLocales.js';
 
 const queryKeysJson = [
     'form_submit_meta',

package/build/esm/index-a1658f07.js

@@ -0,0 +1,60 @@
+import { _ as __rest } from './tslib.es6-2d738692.js';
+import React__default from 'react';
+import { createStyles, rem, Box } from '@mantine/core';
+import './index-03d7200e.js';
+import '@mantine/dates';
+import './index-39aa0c9f.js';
+import './index-38ced379.js';
+import './index-b9c4dfcb.js';
+import './useMantineLocale-faa72172.js';
+import { T as Text } from './index-7a1552e9.js';
+import { B as Button } from './index-bdc3bd61.js';
+import { u as useTranslations } from './useTranslations-ba901edf.js';
+import '@mantine/hooks';
+import './utils-40533779.js';
+import './other-9b439f19.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/{constants-6bdb97a8.js → index-a1d2c38b.js}

@@ -1,11 +1,11 @@
-import { _ as __rest } from './tslib.es6-761239c7.js';
+import { _ as __rest } from './tslib.es6-2d738692.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, Box, Input, Chip, useMantineTheme, Flex, Switch } from '@mantine/core';
-import { T as Text } from './index-c200bff6.js';
-import { B as Button } from './index-2b9213cf.js';
-import { u as useTranslations } from './useTranslations-fbf6a6ab.js';
+import { T as Text } from './index-7a1552e9.js';
+import { B as Button } from './index-bdc3bd61.js';
+import { u as useTranslations } from './useTranslations-ba901edf.js';
 import flattenChildren from 'react-keyed-flatten-children';
-import { t as theme } from './theme-f18c2351.js';
+import { theme } from './miscTheme.js';
 
 var useStyles$8 = createStyles(() => {
     return {
@@ -399,19 +399,4 @@ HealthToolFormWrapper.Unit = Unit;
 HealthToolFormWrapper.Switching = Switching;
 HealthToolFormWrapper.ChipGroup = ChipGroup;
 
-const INPUT_RANGE = {
-    height: {
-        min: 1,
-        max: 300,
-    },
-    weight: {
-        min: 1,
-        max: 200,
-    },
-    pregnantWeek: {
-        min: 1,
-        max: 40,
-    },
-};
-
-export { HealthToolFormWrapper as H, INPUT_RANGE as I };
+export { HealthToolFormWrapper as H };

package/build/esm/{index-7e756cb8.js → index-a51336b9.js}

@@ -1,19 +1,19 @@
-import { _ as __rest } from './tslib.es6-761239c7.js';
+import { _ as __rest } from './tslib.es6-2d738692.js';
 import React__default from 'react';
-import './index-21eac858.js';
+import './index-03d7200e.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-bef3c9bd.js';
-import './index-e3787b20.js';
-import './index-78255d6c.js';
-import './useMantineLocale-4fb67342.js';
-import { T as Text$1 } from './index-c200bff6.js';
-import './index-2b9213cf.js';
-import './theme-f18c2351.js';
-import './translationsContext-f3d1a7bd.js';
+import './index-39aa0c9f.js';
+import './index-38ced379.js';
+import './index-b9c4dfcb.js';
+import './useMantineLocale-faa72172.js';
+import { T as Text$1 } from './index-7a1552e9.js';
+import './index-bdc3bd61.js';
+import './translationsContext-68168ff3.js';
 import 'string-format';
 import '@mantine/hooks';
-import './utils-f8761b9d.js';
+import './utils-40533779.js';
+import './other-9b439f19.js';
 
 /**
  * @deprecated Consider to use import { Text } from '@hhgtech/hhg-components/mantine'

package/build/esm/{index-29d04985.js → index-a57a5338.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { I as Icon } from './index-69248434.js';
-import { u as useTranslations } from './useTranslations-fbf6a6ab.js';
+import { I as Icon } from './index-f1025cea.js';
+import { u as useTranslations } from './useTranslations-ba901edf.js';
 
 var styles = {"loading":"tliWyii"};
 

package/build/esm/{index-996f7caf.js → index-a7f10a58.js}

@@ -1,9 +1,9 @@
 import React__default, { useState } from 'react';
-import { F as Flag } from './index-21eac858.js';
+import { F as Flag } from './index-03d7200e.js';
 import styled from '@emotion/styled';
-import { t as theme } from './theme-f18c2351.js';
-import { T as Text } from './index-c200bff6.js';
-import { C as CommonGAssets } from './index-78255d6c.js';
+import { theme } from './miscTheme.js';
+import { T as Text } from './index-7a1552e9.js';
+import { C as CommonGAssets } from './index-b9c4dfcb.js';
 
 const ALLOW_DOMAIN_URL = [
     'hellobacsi.com',