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

package/build/{index-f335bea0.js → index-96903803.js}

@@ -1,24 +1,25 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-5419417c.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-var index$3 = require('./index-7481f662.js');
-var index$4 = require('./index-8b68f0a5.js');
-var index$5 = require('./index-caaf6cac.js');
-require('./index-ce0a7efa.js');
-require('./index.styles-61ce234f.js');
-var index = require('./index-2f23d479.js');
+var index$3 = require('./index-17b21000.js');
+var index$4 = require('./index-b9a19223.js');
+var index$5 = require('./index-564f1a13.js');
+require('./index-f104c324.js');
+require('./index-f190e9ee.js');
+require('./index.styles-547708ba.js');
+var index = require('./index-d4d86d05.js');
 require('@mantine/hooks');
-require('./index-18acca73.js');
-require('./text-92a095cb.js');
-require('./utils-7bc80898.js');
-require('./index-511d3d6a.js');
-var constants = require('./constants-ab886302.js');
-var index$1 = require('./index-5322f269.js');
-var index$2 = require('./index-7fed156e.js');
-var Locale = require('./Locale-21703205.js');
+require('./index-43f96b80.js');
+require('./utils-f7084704.js');
+require('./index-8d861879.js');
+var context = require('./context-96eaea73.js');
+var constants = require('./constants-58ebf255.js');
+var index$1 = require('./index-5afa8feb.js');
+var index$2 = require('./index-71b17454.js');
+var Locale = require('./Locale-12794e6d.js');
 var other = require('@hhgtech/icons/other');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -39,6 +40,7 @@ var useStyles$1 = core.createStyles((theme) => {
 const DefaultForm = (_a) => {
     var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
     const { t, locale } = index.useTranslations();
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const { form, currentUrl, submitProps } = React.useContext(BabyGrowthFormContext);
     const { classes } = useStyles$1(undefined, {
         name: 'BabyGrowthForm__DefaultForm',
@@ -66,39 +68,43 @@ const DefaultForm = (_a) => {
                         form.getInputProps('birthday').onChange(v);
                     } }))),
             form.errors.birthday && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.birthday))),
-        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
-                t('babyGrowth.height'),
-                React__default["default"].createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.cm'),
-                    ")")) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, onChange: (v) => {
-                form.setFieldValue('height', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } })),
-        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
-                t('babyGrowth.weight'),
-                React__default["default"].createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.kg'),
-                    ")")) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, onChange: (v) => {
-                form.setFieldValue('weight', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } })),
-        locale !== Locale.LOCALE.Vietnam && (React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
-                t('babyGrowth.head'),
-                React__default["default"].createElement("span", { className: classes.unit },
-                    "(",
-                    t('babyGrowth.cm'),
-                    ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
-                form.setFieldValue('head', v);
-                form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
-            } }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
+                    t('babyGrowth.height'),
+                    React__default["default"].createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.cm'),
+                        ")")) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, onChange: (v) => {
+                    form.setFieldValue('height', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
+                    t('babyGrowth.weight'),
+                    React__default["default"].createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.kg'),
+                        ")")) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, onChange: (v) => {
+                    form.setFieldValue('weight', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } }))),
+        locale !== Locale.LOCALE.Vietnam && (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(React__default["default"].Fragment, null,
+                    t('babyGrowth.head'),
+                    React__default["default"].createElement("span", { className: classes.unit },
+                        "(",
+                        t('babyGrowth.cm'),
+                        ")")) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
+                    form.setFieldValue('head', v);
+                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
+                } })))),
         form.errors.checkMesureVal && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(index$3.Input.Wrapper, { label: t('babyGrowth.input.measurementDate') },
                 React__default["default"].createElement(index$4.DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), error: null }))),
             form.errors.measurementDate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit')))));
 };
 
 var useStyles = core.createStyles((theme) => {
@@ -157,6 +163,7 @@ const InlineForm = (_a) => {
     var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
     const { t, locale } = index.useTranslations();
     const { form, currentUrl, submitProps } = React.useContext(BabyGrowthFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     const theme = core.useMantineTheme();
     const { classes } = useStyles(undefined, {
         name: 'BabyGrowthForm__InlineForm',
@@ -217,7 +224,8 @@ const InlineForm = (_a) => {
             React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
                 React__default["default"].createElement(index$4.DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('measurementDate'), { error: null }))),
             form.errors.measurementDate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: classes.submitBtn }, submitProps), t('babyGrowth.input.submit'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: core.clsx(classes.submitBtn, wrapperClasses.submitBtn) }, submitProps), t('babyGrowth.input.submit')))));
 };
 
 const MbLayout = (_a) => {

package/build/{index-0c3c27d7.js → index-98b42fd3.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-5419417c.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index_styles = require('./index.styles-61ce234f.js');
+var index_styles = require('./index.styles-547708ba.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-8b77ee34.js → index-9fbbeca8.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var index = require('./index-b1020b33.js');
+var index = require('./index-03b7a6fb.js');
 var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-b6e47e2b.js → index-a09e45a5.js}

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var index = require('./index-5cce06e2.js');
-var index$1 = require('./index-caaf6cac.js');
+var index = require('./index-a34f8a4d.js');
+var index$1 = require('./index-564f1a13.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-5f937ee5.js → index-b53476b8.js}

@@ -2,42 +2,42 @@
 
 var React = require('react');
 var core = require('@mantine/core');
-var index = require('./index-d7818ca5.js');
-var togetherComponentGlobalContext = require('./utils-623e143c.js');
-var index$b = require('./index-2d74352f.js');
-var healthTools = require('./healthTools-ff9f4490.js');
+var index = require('./index-d1695010.js');
+var togetherComponentGlobalContext = require('./utils-0013879c.js');
+var index$b = require('./index-16103686.js');
+var healthTools = require('./healthTools-1c133add.js');
 var constantsRiskScreener = require('./constantsRiskScreener.js');
-var tslib_es6 = require('./tslib.es6-acd80713.js');
-var store = require('./store-fed68173.js');
-var index$2 = require('./index-f8305dc1.js');
-var normalizeLink = require('./normalizeLink-86036e79.js');
-var index$1 = require('./index-2f23d479.js');
+var tslib_es6 = require('./tslib.es6-5419417c.js');
+var store = require('./store-579d6680.js');
+var index$2 = require('./index-ead33f03.js');
+var normalizeLink = require('./normalizeLink-c02a1a65.js');
+var index$1 = require('./index-d4d86d05.js');
 var form = require('@mantine/form');
-var index$6 = require('./index-7481f662.js');
+var index$6 = require('./index-17b21000.js');
 require('@mantine/dates');
-require('./index-fd836996.js');
-var index$a = require('./index-18acca73.js');
-var index$4 = require('./index-caaf6cac.js');
-var index$5 = require('./index-ce0a7efa.js');
-require('./index.styles-61ce234f.js');
+require('./index-1b62cb12.js');
+var index$a = require('./index-43f96b80.js');
+var index$4 = require('./index-564f1a13.js');
+var index$5 = require('./index-f104c324.js');
+require('./index-f190e9ee.js');
+require('./index.styles-547708ba.js');
 var hooks = require('@mantine/hooks');
-require('./text-92a095cb.js');
-require('./utils-7bc80898.js');
-require('./index-511d3d6a.js');
+require('./utils-f7084704.js');
+require('./index-8d861879.js');
 var togetherApiPaths = require('./togetherApiPaths.js');
-require('./translationsContext-614f1792.js');
-var index$3 = require('./index-08939d41.js');
-var useHealthToolCache = require('./useHealthToolCache-dcb0cf9f.js');
-var index$7 = require('./index-d9dc3d04.js');
+require('./translationsContext-f94df6a5.js');
+var index$3 = require('./index-c487ee7c.js');
+var useHealthToolCache = require('./useHealthToolCache-a193e63e.js');
+var index$7 = require('./index-e42baefa.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
 var core$1 = require('@hhgtech/icons/core');
-var index$9 = require('./index-541ae612.js');
-var index$8 = require('./index-0c3c27d7.js');
+var index$9 = require('./index-8a8dec34.js');
+var index$8 = require('./index-98b42fd3.js');
 var Cookies = require('js-cookie');
 var flatten = require('lodash/flatten');
 var uniqBy = require('lodash/uniqBy');
-var Locale = require('./Locale-21703205.js');
+var Locale = require('./Locale-12794e6d.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-26748f64.js → index-b943efdd.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-5419417c.js');
 var React = require('react');
-var index = require('./index-2f23d479.js');
+var index = require('./index-d4d86d05.js');
 var core = require('@mantine/core');
-var paths = require('./paths-b50fa9ef.js');
-var constants = require('./constants-ac33e489.js');
-var index$1 = require('./index-ce0a7efa.js');
-require('./index-2d74352f.js');
-var togetherComponentGlobalContext = require('./utils-623e143c.js');
+var paths = require('./paths-abb5b58f.js');
+var constants = require('./constants-fbcee1c9.js');
+var index$1 = require('./index-f104c324.js');
+require('./index-16103686.js');
+var togetherComponentGlobalContext = require('./utils-0013879c.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
 

package/build/{index-8b68f0a5.js → index-b9a19223.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-acd80713.js');
+var tslib_es6 = require('./tslib.es6-5419417c.js');
 var React = require('react');
 var core = require('@mantine/core');
 var dates = require('@mantine/dates');
-var index = require('./index-2d74352f.js');
-require('./index-fd836996.js');
-var index$2 = require('./index-d7818ca5.js');
-var index$1 = require('./index-18acca73.js');
-var Locale = require('./Locale-21703205.js');
+var index = require('./index-16103686.js');
+require('./index-1b62cb12.js');
+var index$2 = require('./index-d1695010.js');
+var index$1 = require('./index-43f96b80.js');
+var Locale = require('./Locale-12794e6d.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/index-be49e933.js

@@ -0,0 +1,308 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5419417c.js');
+var React = require('react');
+var core = require('@mantine/core');
+var other = require('@hhgtech/icons/other');
+require('./index-17b21000.js');
+require('@mantine/dates');
+require('./index-16103686.js');
+require('./index-1b62cb12.js');
+require('./index-d1695010.js');
+require('./index-43f96b80.js');
+var index$1 = require('./index-564f1a13.js');
+require('./index-f104c324.js');
+var index$2 = require('./index-f190e9ee.js');
+require('./index.styles-547708ba.js');
+var index = require('./index-d4d86d05.js');
+require('@mantine/hooks');
+var utils = require('./utils-f7084704.js');
+require('./index-8d861879.js');
+var context = require('./context-96eaea73.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
+const StyledInnerClass = 'hhgcomp-toolbanner-inner';
+const StyledWrapperClass = 'hhgcomp-toolbanner-wrapper';
+const useStyles$3 = core.createStyles((theme, { isRevamp, isPregTool, bannerColor, isMarryBaby }) => ({
+    wrapper: {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        gap: core.rem(24),
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: core.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: core.rem(16),
+        a: {
+            textDecoration: 'none',
+            color: 'inherit',
+        },
+        '&[data-site="marryBaby"]': {
+            a: {
+                textDecoration: 'underline',
+            },
+            [utils.MediaQueries.mbDown]: {
+                paddingBottom: 0,
+            },
+        },
+        [utils.MediaQueries.tdDown]: {
+            height: 'auto',
+            [`.${StyledWrapperClass}`]: {
+                [`.${StyledInnerClass}`]: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    [utils.MediaQueries.mbDown]: {
+                        justifyContent: 'space-between',
+                    },
+                    [`.${StyledIconContainerClass}`]: {
+                        position: 'relative',
+                        right: core.rem(-50),
+                        bottom: core.rem(-20),
+                        width: core.rem(110),
+                        minWidth: 0,
+                        height: 'auto',
+                        minHeight: 0,
+                        alignSelf: 'flex-end',
+                        marginBottom: core.rem(-20),
+                        [utils.MediaQueries.mbDown]: {
+                            right: 'unset',
+                        },
+                    },
+                },
+            },
+        },
+        '.embedded-review': {
+            gap: core.rem(12),
+            display: 'flex',
+            alignItems: 'center',
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+            minWidth: core.rem(32),
+            img: {
+                width: core.rem(32),
+                height: core.rem(32),
+                display: 'block',
+                borderRadius: '100%',
+            },
+            svg: {
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+            },
+        },
+    },
+    headingWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: isRevamp ? core.rem(8) : 0,
+    },
+    avatarWrapper: {
+        position: 'relative',
+        img: {
+            maxWidth: core.rem(48),
+            maxHeight: core.rem(48),
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+        },
+    },
+    reviewText: {
+        a: {
+            textDecoration: 'underline',
+            textUnderlineOffset: '2px',
+        },
+    },
+    iconWrapper: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: core.rem(80),
+        height: core.rem(80),
+        borderRadius: '50%',
+        backgroundColor: '#fff',
+        flexShrink: 0,
+        img: {
+            maxWidth: core.rem(48),
+            maxHeight: core.rem(48),
+        },
+        [theme.fn.smallerThan('sm')]: {
+            width: core.rem(64),
+            height: core.rem(64),
+            img: {
+                maxWidth: core.rem(40),
+                maxHeight: core.rem(40),
+            },
+        },
+    },
+    heading: {},
+}));
+
+const ToolsBannerCard = (_a) => {
+    var { className, classNames, heading, bannerColor, medicalReview = { link: '#', reviewer: '', date: '' }, icon, style, isPregTool, isRevamp, styles } = _a, rest = tslib_es6.__rest(_a, ["className", "classNames", "heading", "bannerColor", "medicalReview", "icon", "style", "isPregTool", "isRevamp", "styles"]);
+    const { t } = index.useTranslations();
+    const theme = core.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["default"].createElement(index$1.Text, { size: "label2", as: "div", className: classes.reviewText },
+        medicalReview.avatar && (React__default["default"].createElement("div", { className: "embedded-review__avatar" },
+            React__default["default"].createElement(core.Box, { className: classes.avatarWrapper },
+                React__default["default"].createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer, loading: "lazy" }),
+                React__default["default"].createElement(other.RedCross, { size: 14 })))),
+        React__default["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["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.container), style: style, "data-site": siteType }, rest),
+        React__default["default"].createElement(core.Flex, { className: classes.headingWrapper },
+            React__default["default"].createElement(index$1.Text, { className: cx(classes.heading, 'heading'), size: isMarryBaby ? 'h4' : 'h3', as: headingAs }, heading),
+            medicalReview && React__default["default"].createElement(index$1.Text, { size: "n1" }, medicalReviewEle)),
+        React__default["default"].createElement(core.Flex, { className: classes.iconWrapper }, icon)));
+};
+
+var useStyles$2 = core.createStyles(() => {
+    return {
+        root: {
+            borderTopLeftRadius: 'inherit',
+            borderTopRightRadius: 'inherit',
+        },
+    };
+});
+
+const Banner = (_a) => {
+    var { className, classNames, styles } = _a, rest = tslib_es6.__rest(_a, ["className", "classNames", "styles"]);
+    const { classes: wrapperClasses } = React.useContext(context.CardWrapperContext);
+    const { isPregTool } = React.useContext(context.CardWrapperContext);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'HealthToolCardWrapper__Banner',
+        classNames,
+        styles,
+    });
+    return (React__default["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 = core.createStyles(() => {
+    return {
+        root: {
+            paddingTop: 16,
+            borderRadius: 'inherit',
+        },
+    };
+});
+
+const Body = (_a) => {
+    var { children, className, styles, classNames } = _a, rest = tslib_es6.__rest(_a, ["children", "className", "styles", "classNames"]);
+    const { classes: wrapperClasses, hasBodyScroll } = React.useContext(context.CardWrapperContext);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'HealthToolCardWrapper__Body',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root, wrapperClasses.bodyWrapper) }, rest), hasBodyScroll ? (React__default["default"].createElement(core.ScrollArea, { h: "100%", type: "auto", scrollbarSize: 8, className: wrapperClasses.scrollAreaWrapper }, children)) : (children)));
+};
+
+var useStyles = core.createStyles((theme, { isPregTool, variant }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', borderRadius: core.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: `${core.rem(16)} ${core.rem(16)} 0`,
+        })),
+        bannerHeading: Object.assign({}, (variant === 'gray' && {
+            fontSize: core.rem(20),
+            lineHeight: core.rem(28),
+            fontWeight: index$2.FontWeight.semiBold,
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: core.rem(17),
+                lineHeight: core.rem(24),
+            },
+        })),
+        bannerReviewText: Object.assign({}, (variant === 'gray' && {
+            fontSize: core.rem(14),
+            lineHeight: core.rem(22),
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: core.rem(12),
+                lineHeight: core.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 = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className", "isPregTool", "variant", "hasBodyScroll"]);
+    const { classes, cx } = useStyles({ isPregTool, variant }, {
+        name: 'HealthToolCardWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(context.CardWrapperContext.Provider, { value: {
+            isPregTool,
+            classes,
+            variant,
+            hasBodyScroll,
+        } },
+        React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest), children)));
+};
+const HealthToolCardWrapper = _HealthToolCardWrapper;
+HealthToolCardWrapper.Body = Body;
+HealthToolCardWrapper.Banner = Banner;
+
+exports.HealthToolCardWrapper = HealthToolCardWrapper;
+exports.ToolsBannerCard = ToolsBannerCard;