@hhgtech/hhg-components/build/index-abfe682f.js

Hello Health Group common components

'use strict';

var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var core = require('@mantine/core');
require('./index-3424862e.js');
require('@mantine/dates');
require('./index-ec32050c.js');
require('./index-0a047edc.js');
require('./index-9301f298.js');
require('./index-4d838fd2.js');
var index$2 = require('./index-d4ad3f79.js');
var index$3 = require('./index-515469d0.js');
require('./index-04864074.js');
require('./index.styles-5f6a7ac0.js');
var index = require('./index-2b476eb9.js');
require('@mantine/hooks');
require('./utils-5e3a8440.js');
require('./index-a985d53b.js');
var context = require('./context-c8d07963.js');
var index$1 = require('./index-4aa0b39e.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var useStyles = core.createStyles((theme, { hasOnClickFn }) => {
    return {
        root: {
            position: 'relative',
            display: 'flex',
            flexDirection: 'column',
            gap: core.rem(16),
        },
        sponsorBox: {
            display: 'flex',
            gap: core.rem(12),
            alignItems: 'center',
            backgroundColor: theme.colors.neutral[0],
            border: `1px solid ${theme.colors.neutral[1]}`,
            borderRadius: core.rem(4),
            padding: '4px 12px',
            alignSelf: 'flex-start',
        },
        sponsorLogo: {
            maxHeight: core.rem(32),
        },
        btn: {
            minWidth: core.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 = tslib_es6.__rest(_a, ["babyPoopPage", "onClickFindOut", "currentUrl", "sponsorLogo", "btnProps", "styles", "classNames"]);
    const { t } = index.useTranslations();
    const { classes } = useStyles({ hasOnClickFn: Boolean(onClickFindOut) }, { name: 'BabyPoopForm', styles, classNames });
    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
    return (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
        React__default["default"].createElement(core.Box, Object.assign({ className: classes.root }, props),
            sponsorLogo && (React__default["default"].createElement(core.Box, { className: classes.sponsorBox },
                React__default["default"].createElement(index$2.Text, { size: "p4" }, t('common.sponsoredBy')),
                React__default["default"].createElement("img", { loading: "lazy", src: sponsorLogo, alt: "sponsor", className: classes.sponsorLogo }))),
            React__default["default"].createElement(index$2.Text, { size: "p3", as: "div", className: "description", dangerouslySetInnerHTML: {
                    __html: babyPoopPage.description,
                } }),
            React__default["default"].createElement(index$3.Button, Object.assign({ className: core.clsx(classes.btn, wrapperClasses.submitBtn), onClick: onClickFindOut, dataEventCategory: "Health Tool", dataEventAction: "Baby Stool Inquiry", dataEventLabel: currentUrl }, btnProps), t('babyPoop.findOut')))));
};

exports.BabyPoopForm = BabyPoopForm;