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

package/build/esm/{index-a0b390bd.js → index-2cf2b14a.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.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-6b5ef864.js';
-import { B as Button } from './index-15e1b8ca.js';
-import { u as useTranslations } from './index-698e287d.js';
+import { T as Text } from './index-e74207c5.js';
+import { B as Button } from './index-fb433ddc.js';
+import { u as useTranslations } from './index-fe5bc42a.js';
 import flattenChildren from 'react-keyed-flatten-children';
 import { theme } from './miscTheme.js';
 
@@ -101,6 +101,11 @@ const useStyles$7 = createStyles(() => {
             display: 'flex',
             flexDirection: 'column',
             gap: rem(8),
+            paddingLeft: 16,
+            paddingRight: 16,
+            '&:last-child': {
+                paddingBottom: 16,
+            },
         },
     };
 });
@@ -292,6 +297,7 @@ var useStyles$2 = createStyles((theme, { width, direction }) => {
         })),
         label: {
             fontSize: rem(14),
+            lineHeight: rem(22),
             color: theme.colors.gray[6],
         },
         content: {

package/build/esm/{index-3b5bfbce.js → index-3472c1b1.js}

@@ -1,15 +1,16 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
 import React__default from 'react';
 import { MantineProvider as MantineProvider$1 } from '@mantine/core';
-import { u as useMantineLocale, g as getMantineThemeOverride, N as NotificationsHandler } from './index-f2d03a1d.js';
-import { C as CustomStylesType } from './text-c1c3ae38.js';
+import { u as useMantineLocale, g as getMantineThemeOverride, N as NotificationsHandler } from './index-a5667350.js';
+import { C as CustomStylesType, T as TemplateProvider } from './index-a641808e.js';
 
 const MantineProvider = (_a) => {
     var { children, locale, template = 'hb', isNotifications = true, customStyleType = CustomStylesType.NONE } = _a, props = __rest(_a, ["children", "locale", "template", "isNotifications", "customStyleType"]);
     useMantineLocale(locale);
     return (React__default.createElement(MantineProvider$1, Object.assign({ theme: getMantineThemeOverride(locale, template, customStyleType) }, props),
-        children,
-        isNotifications && React__default.createElement(NotificationsHandler, null)));
+        React__default.createElement(TemplateProvider, { variant: customStyleType },
+            children,
+            isNotifications && React__default.createElement(NotificationsHandler, null))));
 };
 
 export { MantineProvider as M };

package/build/esm/{index-894fa786.js → index-354e4724.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { ArrowLeft, ArrowRight } from '@hhgtech/icons/other';
 import { createStyles, rem, Tabs as Tabs$1, ScrollArea } from '@mantine/core';
-import { B as Button } from './index-15e1b8ca.js';
-import { T as Text } from './index-6b5ef864.js';
+import { B as Button } from './index-fb433ddc.js';
+import { T as Text } from './index-e74207c5.js';
 
 var useStyles = createStyles((theme, params) => {
     const { variant } = params;

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

@@ -0,0 +1,68 @@
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
+import React__default, { useContext } from 'react';
+import { createStyles, rem, Box, clsx } from '@mantine/core';
+import './index-079cc59b.js';
+import '@mantine/dates';
+import './index-ad70b598.js';
+import './index-ab8bcb93.js';
+import './index-a2567c68.js';
+import './index-a5667350.js';
+import { T as Text } from './index-e74207c5.js';
+import { B as Button } from './index-fb433ddc.js';
+import './index-a641808e.js';
+import './index.styles-6539ecd2.js';
+import { u as useTranslations } from './index-fe5bc42a.js';
+import '@mantine/hooks';
+import './utils-332d66f9.js';
+import './index-354e4724.js';
+import { C as CardWrapperContext } from './context-e38168c0.js';
+import { H as HealthToolFormWrapper } from './index-2cf2b14a.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 });
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
+    return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
+        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", as: "div", className: "description", dangerouslySetInnerHTML: {
+                    __html: babyPoopPage.description,
+                } }),
+            React__default.createElement(Button, Object.assign({ className: clsx(classes.btn, wrapperClasses.submitBtn), onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut')))));
+};
+
+export { BabyPoopForm as B };

package/build/esm/{index-ec035017.js → index-4194da90.js}

@@ -1,12 +1,12 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-200f1963.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-2dd81c43.js';
 import React__default, { useState, useMemo, useCallback } from 'react';
-import { u as useTranslations } from './index-698e287d.js';
+import { u as useTranslations } from './index-fe5bc42a.js';
 import { createStyles } from '@mantine/core';
-import { P as PATHS } from './paths-00557f58.js';
-import { L as LOCALIZED_SLUGS } from './constants-a10fbc8a.js';
-import { B as Button } from './index-15e1b8ca.js';
-import './index-e02ef7d6.js';
-import { c as callApi, g as getCarePath } from './utils-cb10f0c9.js';
+import { P as PATHS } from './paths-df4cc20b.js';
+import { L as LOCALIZED_SLUGS } from './constants-0e7dd676.js';
+import { B as Button } from './index-fb433ddc.js';
+import './index-ad70b598.js';
+import { c as callApi, g as getCarePath } from './utils-6b347cfc.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
 

package/build/esm/{index-37ac608c.js → index-43954a44.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { I as Icon } from './index-953523ca.js';
-import { u as useTranslations } from './index-698e287d.js';
+import { I as Icon } from './index-6088c2f6.js';
+import { u as useTranslations } from './index-fe5bc42a.js';
 
 var styles = {"loading":"tliWyii"};
 

package/build/esm/{index-33d4c954.js → index-458a2167.js}

@@ -1,20 +1,21 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
 import React__default, { createContext, useContext } from 'react';
-import { useMantineTheme } from '@mantine/core';
+import { clsx, useMantineTheme } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import './index-67e90cbd.js';
-import { D as DatePicker } from './index-3266848c.js';
-import './index-6b5ef864.js';
-import './index-15e1b8ca.js';
-import './index.styles-883d7842.js';
-import { u as useTranslations } from './index-698e287d.js';
+import './index-079cc59b.js';
+import { D as DatePicker } from './index-bebb01f4.js';
+import './index-e74207c5.js';
+import './index-fb433ddc.js';
+import './index-a641808e.js';
+import './index.styles-6539ecd2.js';
+import { u as useTranslations } from './index-fe5bc42a.js';
 import '@mantine/hooks';
-import './index-f2d03a1d.js';
-import './text-c1c3ae38.js';
-import './utils-3b8f9ca0.js';
-import './index-894fa786.js';
-import { H as HealthToolFormWrapper } from './index-a0b390bd.js';
-import { G as GenderOptionControl } from './index-2e3c6ea1.js';
+import './index-a5667350.js';
+import './utils-332d66f9.js';
+import './index-354e4724.js';
+import { C as CardWrapperContext } from './context-e38168c0.js';
+import { H as HealthToolFormWrapper } from './index-2cf2b14a.js';
+import { G as GenderOptionControl } from './index-e6aa914e.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const BabyVaccineFormContext = createContext({});
@@ -23,18 +24,23 @@ const DefaultLayout = (_a) => {
     var props = __rest(_a, []);
     const { t } = useTranslations();
     const { currentUrl, submitProps, form } = useContext(BabyVaccineFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender'))),
-        React__default.createElement(DatePicker, Object.assign({ label: t('babyGrowth.input.birthday'), placeholder: 'DD/MM/YYYY', popoverProps: {
-                withinPortal: true,
-            }, maxDate: new Date() }, form.getInputProps('age'))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, null,
+            React__default.createElement(DatePicker, Object.assign({ label: t('babyGrowth.input.birthday'), placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }, form.getInputProps('age')))),
+        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const InlineLayout = (_a) => {
     var props = __rest(_a, []);
     const { t } = useTranslations();
     const { currentUrl, submitProps, form } = useContext(BabyVaccineFormContext);
+    const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
     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'), width: 'none' },
@@ -46,7 +52,8 @@ const InlineLayout = (_a) => {
                         withinPortal: true,
                     }, maxDate: new Date() }, form.getInputProps('age'), { error: null }))),
             form.errors.age && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.age))),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+        React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const MbLayout = (_a) => {

package/build/esm/{index-d7f21a0a.js → index-4dde8348.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
 import React__default, { useContext, useState } from 'react';
-import { T as TogetherComponentGlobalContext } from './utils-cb10f0c9.js';
+import { T as TogetherComponentGlobalContext } from './utils-6b347cfc.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 

package/build/esm/index-4f1ace1b.js

@@ -0,0 +1,301 @@
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
+import React__default, { useContext } from 'react';
+import { createStyles, rem, useMantineTheme, Box, Flex, ScrollArea } from '@mantine/core';
+import { RedCross } from '@hhgtech/icons/other';
+import './index-079cc59b.js';
+import '@mantine/dates';
+import './index-ad70b598.js';
+import './index-ab8bcb93.js';
+import './index-a2567c68.js';
+import './index-a5667350.js';
+import { T as Text } from './index-e74207c5.js';
+import './index-fb433ddc.js';
+import { F as FontWeight } from './index-a641808e.js';
+import './index.styles-6539ecd2.js';
+import { u as useTranslations } from './index-fe5bc42a.js';
+import '@mantine/hooks';
+import { M as MediaQueries } from './utils-332d66f9.js';
+import './index-354e4724.js';
+import { C as CardWrapperContext } from './context-e38168c0.js';
+
+const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
+const StyledInnerClass = 'hhgcomp-toolbanner-inner';
+const StyledWrapperClass = 'hhgcomp-toolbanner-wrapper';
+const useStyles$3 = createStyles((theme, { isRevamp, isPregTool, bannerColor, isMarryBaby }) => ({
+    wrapper: {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        gap: rem(24),
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: rem(16),
+    },
+    container: {
+        width: '100%',
+        backgroundColor: bannerColor ||
+            (isMarryBaby
+                ? theme.colors.mb[1]
+                : isPregTool
+                    ? theme.colors.pink[1]
+                    : theme.colors.blue[1]),
+        position: 'relative',
+        display: 'flex',
+        gap: 24,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: rem(16),
+        a: {
+            textDecoration: 'none',
+            color: 'inherit',
+        },
+        '&[data-site="marryBaby"]': {
+            a: {
+                textDecoration: 'underline',
+            },
+            [MediaQueries.mbDown]: {
+                paddingBottom: 0,
+            },
+        },
+        [MediaQueries.tdDown]: {
+            height: 'auto',
+            [`.${StyledWrapperClass}`]: {
+                [`.${StyledInnerClass}`]: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    [MediaQueries.mbDown]: {
+                        justifyContent: 'space-between',
+                    },
+                    [`.${StyledIconContainerClass}`]: {
+                        position: 'relative',
+                        right: rem(-50),
+                        bottom: rem(-20),
+                        width: rem(110),
+                        minWidth: 0,
+                        height: 'auto',
+                        minHeight: 0,
+                        alignSelf: 'flex-end',
+                        marginBottom: rem(-20),
+                        [MediaQueries.mbDown]: {
+                            right: 'unset',
+                        },
+                    },
+                },
+            },
+        },
+        '.embedded-review': {
+            gap: rem(12),
+            display: 'flex',
+            alignItems: 'center',
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+            minWidth: rem(32),
+            img: {
+                width: rem(32),
+                height: rem(32),
+                display: 'block',
+                borderRadius: '100%',
+            },
+            svg: {
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+            },
+        },
+    },
+    headingWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: isRevamp ? rem(8) : 0,
+    },
+    avatarWrapper: {
+        position: 'relative',
+        img: {
+            maxWidth: rem(48),
+            maxHeight: rem(48),
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+        },
+    },
+    reviewText: {
+        a: {
+            textDecoration: 'underline',
+            textUnderlineOffset: '2px',
+        },
+    },
+    iconWrapper: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: rem(80),
+        height: rem(80),
+        borderRadius: '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),
+            },
+        },
+    },
+    heading: {},
+}));
+
+const ToolsBannerCard = (_a) => {
+    var { className, classNames, heading, bannerColor, medicalReview = { link: '#', reviewer: '', date: '' }, icon, style, isPregTool, isRevamp, styles } = _a, rest = __rest(_a, ["className", "classNames", "heading", "bannerColor", "medicalReview", "icon", "style", "isPregTool", "isRevamp", "styles"]);
+    const { t } = useTranslations();
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
+    const headingAs = 'h2';
+    const { classes, cx } = useStyles$3({ isRevamp, isPregTool, bannerColor, isMarryBaby }, {
+        name: 'ToolsBannerCard',
+        styles,
+        classNames,
+    });
+    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default.createElement(Text, { size: "label2", as: "div", className: classes.reviewText },
+        medicalReview.avatar && (React__default.createElement("div", { className: "embedded-review__avatar" },
+            React__default.createElement(Box, { className: classes.avatarWrapper },
+                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(Box, Object.assign({ className: cx(className, classes.container), style: style, "data-site": siteType }, rest),
+        React__default.createElement(Flex, { className: classes.headingWrapper },
+            React__default.createElement(Text, { className: cx(classes.heading, 'heading'), size: isMarryBaby ? 'h4' : 'h3', as: headingAs }, heading),
+            medicalReview && React__default.createElement(Text, { size: "n1" }, medicalReviewEle)),
+        React__default.createElement(Flex, { className: classes.iconWrapper }, icon)));
+};
+
+var useStyles$2 = createStyles(() => {
+    return {
+        root: {
+            borderTopLeftRadius: 'inherit',
+            borderTopRightRadius: 'inherit',
+        },
+    };
+});
+
+const Banner = (_a) => {
+    var { className, classNames, styles } = _a, rest = __rest(_a, ["className", "classNames", "styles"]);
+    const { classes: wrapperClasses } = useContext(CardWrapperContext);
+    const { isPregTool } = useContext(CardWrapperContext);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'HealthToolCardWrapper__Banner',
+        classNames,
+        styles,
+    });
+    return (React__default.createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, classNames: {
+            container: wrapperClasses.bannerWrapper,
+            heading: wrapperClasses.bannerHeading,
+            reviewText: wrapperClasses.bannerReviewText,
+        }, className: cx(className, classes.root) }, rest)));
+};
+
+var useStyles$1 = createStyles(() => {
+    return {
+        root: {
+            paddingTop: 16,
+            borderRadius: 'inherit',
+        },
+    };
+});
+
+const Body = (_a) => {
+    var { children, className, styles, classNames } = _a, rest = __rest(_a, ["children", "className", "styles", "classNames"]);
+    const { classes: wrapperClasses, hasBodyScroll } = useContext(CardWrapperContext);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'HealthToolCardWrapper__Body',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root, wrapperClasses.bodyWrapper) }, rest), hasBodyScroll ? (React__default.createElement(ScrollArea, { h: "100%", type: "auto", scrollbarSize: 8, className: wrapperClasses.scrollAreaWrapper }, children)) : (children)));
+};
+
+var useStyles = createStyles((theme, { isPregTool, variant }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', borderRadius: rem(isMarryBaby ? 16 : 8) }, (variant === 'default' && {
+            backgroundColor: '#fff',
+            border: `1px solid ${isMarryBaby
+                ? theme.colors.mb[2]
+                : isPregTool
+                    ? theme.colors.pink[1]
+                    : theme.colors.blue[2]}`,
+        })), (variant === 'gray' && {
+            backgroundColor: theme.colors.neutral[0],
+        })),
+        submitBtn: {},
+        bodyWrapper: {},
+        scrollAreaWrapper: {},
+        bannerWrapper: Object.assign({}, (variant === 'gray' && {
+            backgroundColor: 'transparent',
+            padding: `${rem(16)} ${rem(16)} 0`,
+        })),
+        bannerHeading: Object.assign({}, (variant === 'gray' && {
+            fontSize: rem(20),
+            lineHeight: rem(28),
+            fontWeight: FontWeight.semiBold,
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: rem(17),
+                lineHeight: rem(24),
+            },
+        })),
+        bannerReviewText: Object.assign({}, (variant === 'gray' && {
+            fontSize: rem(14),
+            lineHeight: rem(22),
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: rem(12),
+                lineHeight: rem(18),
+            },
+        })),
+        submitWrapper: Object.assign({ [theme.fn.smallerThan('sm')]: {
+                button: {
+                    width: '100%',
+                },
+            }, [theme.fn.largerThan('sm')]: {
+                textAlign: 'right',
+            } }, (variant === 'gray' && {
+            backgroundColor: theme.colors.neutral[0],
+            button: {
+                marginTop: 10,
+            },
+        })),
+        newsletterBlock: {},
+    };
+});
+
+const _HealthToolCardWrapper = (_a) => {
+    var { children, styles, classNames, className, isPregTool, variant = 'default', hasBodyScroll } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className", "isPregTool", "variant", "hasBodyScroll"]);
+    const { classes, cx } = useStyles({ isPregTool, variant }, {
+        name: 'HealthToolCardWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(CardWrapperContext.Provider, { value: {
+            isPregTool,
+            classes,
+            variant,
+            hasBodyScroll,
+        } },
+        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-f609df6c.js → index-56bcabcc.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-3b8f9ca0.js';
+import { M as MediaQueries } from './utils-332d66f9.js';
 import { theme } from './miscTheme.js';
 
 const StyledPopup = styled.div `

package/build/esm/{index-86df1763.js → index-5d58e5a5.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-15e1b8ca.js';
+import { B as Button$1 } from './index-fb433ddc.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-953523ca.js → index-6088c2f6.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
 import React__default from 'react';
 import { theme } from './miscTheme.js';
-import { W as WhatsApp, I as Instagram } from './WhatsApp-e9a34aaf.js';
-import { S as Spinner } from './Spinner-1f9ec7ca.js';
+import { W as WhatsApp, I as Instagram } from './WhatsApp-f7b8199f.js';
+import { S as Spinner } from './Spinner-555c31a3.js';
 
 const App = (_a) => {
     var { size = 24 } = _a, rest = __rest(_a, ["size"]);

package/build/esm/{index-fe18b552.js → index-6824fad6.js}

@@ -1,6 +1,6 @@
 import React__default, { useState, useEffect } from 'react';
-import { B as Breakpoints } from './utils-3b8f9ca0.js';
-import { _ as __rest } from './tslib.es6-200f1963.js';
+import { B as Breakpoints } from './utils-332d66f9.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
 import styled from '@emotion/styled';
 
 const getIsMobile = () => {

package/build/esm/{index-25335bbd.js → index-6d9b3854.js}

@@ -3,24 +3,24 @@ import { CrossLogo, ShieldCheck } from '@hhgtech/icons/other';
 import { createStyles, Box, Flex, Button as Button$1, rem } from '@mantine/core';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { u as useTranslations } from './index-698e287d.js';
-import { M as MediaQueries, t as toggleNoScroll } from './utils-3b8f9ca0.js';
-import { A as AuthorBadge, B as BookingBtn } from './index-ec035017.js';
-import { I as Icon } from './index-953523ca.js';
-import { _ as __rest } from './tslib.es6-200f1963.js';
-import { U as UserAvatar } from './index-d7f21a0a.js';
-import { I as ImageWrap, u as useScreenSize } from './index-fe18b552.js';
-import './index-e02ef7d6.js';
-import { C as CommonGAssets } from './index-62988070.js';
-import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-cb10f0c9.js';
-import { B as Button } from './index-86df1763.js';
-import { T as Text } from './index-6b5ef864.js';
+import { u as useTranslations } from './index-fe5bc42a.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-332d66f9.js';
+import { A as AuthorBadge, B as BookingBtn } from './index-4194da90.js';
+import { I as Icon } from './index-6088c2f6.js';
+import { _ as __rest } from './tslib.es6-2dd81c43.js';
+import { U as UserAvatar } from './index-4dde8348.js';
+import { I as ImageWrap, u as useScreenSize } from './index-6824fad6.js';
+import './index-ad70b598.js';
+import { C as CommonGAssets } from './index-a2567c68.js';
+import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-6b347cfc.js';
+import { B as Button } from './index-5d58e5a5.js';
+import { T as Text } from './index-e74207c5.js';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
 import { CARE_PATHS, DISCOVER_PATHS } from './togetherApiPaths.js';
-import { L as Loading } from './index-f6aeb770.js';
-import { H as Heading } from './index-986954db.js';
-import { M as Modal } from './index-a36af882.js';
+import { L as Loading } from './index-effcfe04.js';
+import { H as Heading } from './index-b459211a.js';
+import { M as Modal } from './index-1b6467b8.js';
 import { domainLocales as domainLocales$1 } from './constantsDomainLocales.js';
 
 var styles$2 = {"row":"dZWeHns","flex":"_8z2nszB","mainTxt":"tMiOKib","subTxt":"uDcqD-2","subTxtRow":"pDlsows","subDivider":"m-HVXw1"};
@@ -911,7 +911,7 @@ const _CardAuthor = (props) => {
     useEffect(() => {
         if (open && !ProfileDetail) {
             if (userType === 'chatbot') {
-                import('./index-a565ea21.js').then((module) => {
+                import('./index-1bce2fdb.js').then((module) => {
                     setProfileDetail(() => module.ProfileChatbot);
                 });
             }