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

package/build/esm/index-bb7e2e3c.js

@@ -1,288 +0,0 @@
-import { _ as __rest } from './tslib.es6-91093dfb.js';
-import React__default, { createContext, useContext } from 'react';
-import { useMantineTheme, Box, Flex, rem, createStyles } from '@mantine/core';
-import { RedCross } from '@hhgtech/icons/other';
-import './index-94204073.js';
-import '@mantine/dates';
-import './index-43c88049.js';
-import './index-5d09fff6.js';
-import './index-a35d5bd3.js';
-import { t as themeColors } from './index-2870af04.js';
-import { T as Text } from './index-c68a533e.js';
-import './index-cc305f99.js';
-import './index.styles-e737cd1b.js';
-import { u as useTranslations } from './index-64827257.js';
-import '@mantine/hooks';
-import './text-db324baf.js';
-import { M as MediaQueries } from './utils-54809471.js';
-import './index-92ea8383.js';
-import styled from '@emotion/styled';
-import { setDefaultClass } from './miscDefaultClassWrapper.js';
-
-const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
-const StyledInnerClass = 'hhgcomp-toolbanner-inner';
-const StyledWrapper = setDefaultClass(styled.div `
-    position: relative;
-    width: 100%;
-    height: 100%;
-  `, 'hhgcomp-toolbanner-wrapper');
-const StyledContainer = styled.div `
-  width: 100%;
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
-
-  background-color: ${(props) => props['data-banner-color'] || themeColors.blue[1]};
-
-  &[data-site='marryBaby'] {
-    a {
-      text-decoration: underline;
-    }
-    ${MediaQueries.mbDown} {
-      padding-bottom: 0;
-    }
-  }
-
-  ${MediaQueries.tdDown} {
-    height: auto;
-    ${StyledWrapper.classSelector} {
-      .${StyledInnerClass} {
-        display: flex;
-        align-items: center;
-        ${MediaQueries.mbDown} {
-          justify-content: space-between;
-        }
-        .${StyledIconContainerClass} {
-          position: relative;
-          right: -50px;
-          bottom: -20px;
-          width: 110px;
-          min-width: 0;
-          height: auto;
-          min-height: 0;
-          align-self: flex-end;
-          margin-bottom: -20px;
-          ${MediaQueries.mbDown} {
-            right: unset;
-          }
-        }
-      }
-    }
-  }
-
-  .embedded-review {
-    gap: 12px;
-    display: flex;
-    align-items: center;
-  }
-  .embedded-review__avatar {
-    position: relative;
-    min-width: 32px;
-    img {
-      width: 32px;
-      height: 32px;
-      display: block;
-      border-radius: 100%;
-    }
-    svg {
-      bottom: 0;
-      right: 0;
-      position: absolute;
-    }
-  }
-`;
-
-const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
-    link: '#',
-    reviewer: '',
-    date: '',
-}, icon, style, isPregTool, isRevamp, }) => {
-    const { t } = useTranslations();
-    const theme = useMantineTheme();
-    const isMarryBaby = theme.other.template === 'mb';
-    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
-    const headingAs = 'h2';
-    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default.createElement(Text, { size: "label2", as: "div", className: "embedded-review", sx: {
-            a: {
-                textUnderlineOffset: '2px',
-                textDecoration: 'underline',
-            },
-        } },
-        medicalReview.avatar && (React__default.createElement("div", { className: "embedded-review__avatar" },
-            React__default.createElement(Box, { pos: "relative" },
-                React__default.createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer, loading: "lazy" }),
-                React__default.createElement(RedCross, { size: 14 })))),
-        React__default.createElement("div", { dangerouslySetInnerHTML: {
-                __html: t('toolPage.toolReviewer', {
-                    expert_name: `<a href="${medicalReview.link}">${medicalReview.reviewer.trim()}</a>`,
-                    date: medicalReview.date,
-                }),
-            } }))) : null;
-    return (React__default.createElement(StyledContainer, { className: className, style: style, "data-site": siteType, "data-banner-color": bannerColor ||
-            (isMarryBaby
-                ? theme.colors.mb[1]
-                : isPregTool
-                    ? theme.colors.pink[1]
-                    : theme.colors.blue[1]) },
-        React__default.createElement(StyledWrapper, null,
-            React__default.createElement(Flex, { gap: rem(24), align: 'center', justify: 'space-between', sx: { padding: rem(16), gap: rem(24), '.heading': {} } },
-                React__default.createElement(Flex, { direction: "column", gap: isRevamp ? 8 : 0 },
-                    React__default.createElement(Text, { size: isMarryBaby ? 'h4' : 'h3', as: headingAs, className: 'heading' }, heading),
-                    medicalReview && (React__default.createElement(Text, { size: "n1", as: "div" }, medicalReviewEle))),
-                React__default.createElement(Flex, { justify: 'center', align: 'center', sx: (theme) => ({
-                        width: rem(80),
-                        height: rem(80),
-                        borderRadius: isMarryBaby ? '24px' : '50%',
-                        backgroundColor: '#fff',
-                        flexShrink: 0,
-                        img: {
-                            maxWidth: rem(48),
-                            maxHeight: rem(48),
-                        },
-                        [theme.fn.smallerThan('sm')]: {
-                            width: rem(64),
-                            height: rem(64),
-                            img: {
-                                maxWidth: rem(40),
-                                maxHeight: rem(40),
-                            },
-                        },
-                    }) }, icon)))));
-};
-
-var useStyles$2 = createStyles(() => {
-    return {
-        root: {
-            borderTopLeftRadius: 'inherit',
-            borderTopRightRadius: 'inherit',
-        },
-    };
-});
-
-const CardWrapperContext = createContext({});
-
-const Banner = (_a) => {
-    var { styles, classNames, className } = _a, rest = __rest(_a, ["styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$2(undefined, {
-        name: 'HealthToolCardWrapper__Banner',
-        styles,
-        classNames,
-    });
-    const { isPregTool } = useContext(CardWrapperContext);
-    return (React__default.createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, className: cx(className, classes.root) }, rest)));
-};
-
-var useStyles$1 = createStyles(() => {
-    return {
-        root: {
-            padding: rem(16),
-            borderRadius: 'inherit',
-        },
-    };
-});
-
-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/index-6485416f.js

@@ -1,296 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-a0b3636d.js');
-var React = require('react');
-var core = require('@mantine/core');
-var other = require('@hhgtech/icons/other');
-require('./index-8128ad91.js');
-require('@mantine/dates');
-require('./index-d8b7b7c8.js');
-require('./index-c0083606.js');
-require('./index-7fd03876.js');
-var index = require('./index-cb14a9dc.js');
-var index$2 = require('./index-4ecc708d.js');
-require('./index-edff4458.js');
-require('./index.styles-9aebaca8.js');
-var index$1 = require('./index-aaf078ac.js');
-require('@mantine/hooks');
-require('./text-4cc51fce.js');
-var utils = require('./utils-2a996ffd.js');
-require('./index-cbebb87e.js');
-var styled = require('@emotion/styled');
-var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
-const StyledInnerClass = 'hhgcomp-toolbanner-inner';
-const StyledWrapper = miscDefaultClassWrapper.setDefaultClass(styled__default["default"].div `
-    position: relative;
-    width: 100%;
-    height: 100%;
-  `, 'hhgcomp-toolbanner-wrapper');
-const StyledContainer = styled__default["default"].div `
-  width: 100%;
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
-
-  background-color: ${(props) => props['data-banner-color'] || index.themeColors.blue[1]};
-
-  &[data-site='marryBaby'] {
-    a {
-      text-decoration: underline;
-    }
-    ${utils.MediaQueries.mbDown} {
-      padding-bottom: 0;
-    }
-  }
-
-  ${utils.MediaQueries.tdDown} {
-    height: auto;
-    ${StyledWrapper.classSelector} {
-      .${StyledInnerClass} {
-        display: flex;
-        align-items: center;
-        ${utils.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;
-          ${utils.MediaQueries.mbDown} {
-            right: unset;
-          }
-        }
-      }
-    }
-  }
-
-  .embedded-review {
-    gap: 12px;
-    display: flex;
-    align-items: center;
-  }
-  .embedded-review__avatar {
-    position: relative;
-    min-width: 32px;
-    img {
-      width: 32px;
-      height: 32px;
-      display: block;
-      border-radius: 100%;
-    }
-    svg {
-      bottom: 0;
-      right: 0;
-      position: absolute;
-    }
-  }
-`;
-
-const ToolsBannerCard = ({ className, heading, bannerColor, medicalReview = {
-    link: '#',
-    reviewer: '',
-    date: '',
-}, icon, style, isPregTool, isRevamp, }) => {
-    const { t } = index$1.useTranslations();
-    const theme = core.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["default"].createElement(index$2.Text, { size: "label2", as: "div", className: "embedded-review", sx: {
-            a: {
-                textUnderlineOffset: '2px',
-                textDecoration: 'underline',
-            },
-        } },
-        medicalReview.avatar && (React__default["default"].createElement("div", { className: "embedded-review__avatar" },
-            React__default["default"].createElement(core.Box, { pos: "relative" },
-                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(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["default"].createElement(StyledWrapper, null,
-            React__default["default"].createElement(core.Flex, { gap: core.rem(24), align: 'center', justify: 'space-between', sx: { padding: core.rem(16), gap: core.rem(24), '.heading': {} } },
-                React__default["default"].createElement(core.Flex, { direction: "column", gap: isRevamp ? 8 : 0 },
-                    React__default["default"].createElement(index$2.Text, { size: isMarryBaby ? 'h4' : 'h3', as: headingAs, className: 'heading' }, heading),
-                    medicalReview && (React__default["default"].createElement(index$2.Text, { size: "n1", as: "div" }, medicalReviewEle))),
-                React__default["default"].createElement(core.Flex, { justify: 'center', align: 'center', sx: (theme) => ({
-                        width: core.rem(80),
-                        height: core.rem(80),
-                        borderRadius: isMarryBaby ? '24px' : '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),
-                            },
-                        },
-                    }) }, icon)))));
-};
-
-var useStyles$2 = core.createStyles(() => {
-    return {
-        root: {
-            borderTopLeftRadius: 'inherit',
-            borderTopRightRadius: 'inherit',
-        },
-    };
-});
-
-const CardWrapperContext = React.createContext({});
-
-const Banner = (_a) => {
-    var { styles, classNames, className } = _a, rest = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$2(undefined, {
-        name: 'HealthToolCardWrapper__Banner',
-        styles,
-        classNames,
-    });
-    const { isPregTool } = React.useContext(CardWrapperContext);
-    return (React__default["default"].createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, className: cx(className, classes.root) }, rest)));
-};
-
-var useStyles$1 = core.createStyles(() => {
-    return {
-        root: {
-            padding: core.rem(16),
-            borderRadius: 'inherit',
-        },
-    };
-});
-
-const Body = (_a) => {
-    var { children, styles, classNames, className } = _a, rest = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className"]);
-    const { classes, cx } = useStyles$1(undefined, {
-        name: 'HealthToolCardWrapper',
-        styles,
-        classNames,
-    });
-    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest), children));
-};
-
-var useStyles = core.createStyles((theme, { isPregTool }) => {
-    const isMarryBaby = theme.other.template === 'mb';
-    return {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            borderRadius: core.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: core.rem(16),
-        },
-        labelWrapper: {
-            flex: '1 1 0px',
-            display: 'flex',
-            alignItems: 'center',
-            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
-        },
-        label: {
-            fontSize: core.rem(14),
-            color: theme.colors.gray[6],
-        },
-        control: {
-            width: core.rem(180),
-            flexShrink: 1,
-            '&.error': {
-                'button, input': {
-                    borderColor: theme.colors.red[7],
-                },
-            },
-        },
-        radioLabel: {
-            fontSize: core.rem(16),
-        },
-        radioRoot: {
-            padding: `${core.rem(10)} 0`,
-            margin: 0,
-        },
-        bmiVal: {
-            display: 'inline-block',
-        },
-        inputWithUnit__wrapper: {
-            position: 'relative',
-        },
-        inputWithUnit__unit: {
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            paddingRight: core.rem(10),
-            display: 'flex',
-            alignItems: 'center',
-        },
-        inputWithUnit__unitText: {
-            color: theme.colors.gray[6],
-        },
-        inputWithUnit__input: {
-            input: {
-                paddingRight: core.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 = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className", "isPregTool"]);
-    const { classes, cx } = useStyles({ isPregTool }, {
-        name: 'HealthToolCardWrapper',
-        styles,
-        classNames,
-    });
-    return (React__default["default"].createElement(CardWrapperContext.Provider, { value: {
-            isPregTool,
-        } },
-        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;