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

package/build/esm/{index-89ad9053.js → index-d0b44796.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest } from './tslib.es6-8570c30c.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-f65d577c.js';
-import { B as Button } from './index-206b9bef.js';
-import { u as useTranslations } from './index-59da60a7.js';
+import { T as Text } from './index-15687d4c.js';
+import { B as Button } from './index-3d2078ab.js';
+import { u as useTranslations } from './index-e6601f2c.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,
+            },
         },
     };
 });
@@ -120,6 +125,7 @@ var useStyles$6 = createStyles((theme, { formLayout }) => {
             display: 'flex',
             flexDirection: 'column',
             gap: rem(formLayout === 'inline' ? 8 : 16),
+            borderRadius: 'inherit',
             '.mantine-Input-input::placeholder, .mantine-Input-input[data-invalid]::placeholder': {
                 color: '#8C8C8C',
             },
@@ -291,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/{text-6f2656a6.js → index-d0dddda4.js}

@@ -1,4 +1,5 @@
 import { rem } from '@mantine/core';
+import React__default, { createContext, useContext } from 'react';
 
 var CustomStylesType;
 (function (CustomStylesType) {
@@ -140,6 +141,8 @@ const GlobalTextStyle = {
             h6: [rem(16), rem(14)],
             title1: [rem(17), rem(17)],
             title2: [rem(15), rem(15)],
+            overline: [rem(11), rem(11)],
+            subText: [rem(10), rem(10)],
         },
         lineHeight: {
             base: [rem(24), rem(24)],
@@ -169,6 +172,8 @@ const GlobalTextStyle = {
             h6: [rem(24), rem(22)],
             title1: [rem(24), rem(24)],
             title2: [rem(24), rem(24)],
+            overline: [rem(12), rem(12)],
+            subText: [rem(12), rem(12)],
         },
         letterSpacing: {
             lg: [-0.2, 0],
@@ -194,6 +199,8 @@ const GlobalTextStyle = {
             n1: [-0.2, -0.2],
             title1: [-0.4, -0.4],
             title2: [-0.3, -0.3],
+            overline: [-0.2, -0.2],
+            subText: [-0.2, -0.2],
         },
         fontWeightBySize: {
             s1: FontWeight.semiBold,
@@ -255,4 +262,10 @@ const GlobalTextStyleNew = (theme) => ({
     },
 });
 
-export { CustomStylesType as C, FontWeight as F, GlobalTextStyleNew as G, GlobalTextStyle as a };
+const TemplateContext = createContext(CustomStylesType.NONE);
+const TemplateProvider = ({ variant = CustomStylesType.NONE, children, }) => {
+    return (React__default.createElement(TemplateContext.Provider, { value: variant }, children));
+};
+const useTemplateVariant = () => useContext(TemplateContext);
+
+export { CustomStylesType as C, FontWeight as F, GlobalTextStyleNew as G, TemplateProvider as T, GlobalTextStyle as a, useTemplateVariant as u };

package/build/esm/{index-52825707.js → index-d18ed0e7.js}

@@ -1,4 +1,4 @@
-import { L as LOCALE } from './Locale-4ae68452.js';
+import { L as LOCALE } from './Locale-932c7523.js';
 
 var Gender;
 (function (Gender) {

package/build/esm/{index-85894b46.js → index-d7bd249f.js}

@@ -1,27 +1,27 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-8570c30c.js';
 import * as React from 'react';
 import React__default, { forwardRef, Component, useState, useCallback, useEffect, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import { ArrowDown } from '@hhgtech/icons/other';
 import { createStyles, rem, Autocomplete, Image, ActionIcon, Select as Select$1, AspectRatio as AspectRatio$1, useMantineTheme, Box, Breadcrumbs as Breadcrumbs$1, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, Flex, clsx, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Popover as Popover$1, Chip } from '@mantine/core';
 import { useUncontrolled, useDebouncedValue, useClickOutside, useViewportSize, useResizeObserver, useDisclosure } from '@mantine/hooks';
-import { C as CommonGAssets } from './index-f59d4d8a.js';
-import { C as CustomStylesType, G as GlobalTextStyleNew, F as FontWeight } from './text-6f2656a6.js';
-import { u as useScreenSize, I as ImageWrap } from './index-5efeab14.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
+import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-d0dddda4.js';
+import { u as useScreenSize, I as ImageWrap } from './index-5e4c4c9c.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-f65d577c.js';
-import { t as themeColors } from './index-d830bd64.js';
+import { T as Text } from './index-15687d4c.js';
+import { t as themeColors } from './index-5d273446.js';
 import { theme } from './miscTheme.js';
 import cn from 'classnames';
 import { v1 } from 'uuid';
-import { a as useUniqueId } from './useUniqueId-e98a7e5c.js';
+import { a as useUniqueId } from './useUniqueId-bbc9ce62.js';
 import { siteOptions } from './constantsSite.js';
 import { css } from '@emotion/react';
 import { Check, Plus } from '@hhgtech/icons/core';
-import { B as Button } from './index-206b9bef.js';
+import { B as Button } from './index-3d2078ab.js';
 
-var useStyles$4 = createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+var useStyles$4 = createStyles((theme, { variantStyle }) => {
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const commonStyle = {
         fontSize: rem(15),
         lineHeight: rem(24),
@@ -60,7 +60,8 @@ const _AutoComplete = forwardRef((_a, ref) => {
 });
 const _Select = forwardRef((_a, ref) => {
     var { searchValue, onSearchChange, styles } = _a, props = __rest(_a, ["searchValue", "onSearchChange", "styles"]);
-    const { classes } = useStyles$4(undefined, { name: 'MantineSelect', styles });
+    const variantStyle = useTemplateVariant();
+    const { classes } = useStyles$4({ variantStyle }, { name: 'MantineSelect', styles });
     const [_searchValue, handleSearchChange] = useUncontrolled({
         defaultValue: '',
         value: searchValue,
@@ -241,8 +242,8 @@ const _Breadcrumbs = (_a) => {
 const Breadcrumbs = _Breadcrumbs;
 Breadcrumbs.Item = BreadcrumbItem;
 
-var useStyles$2 = createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+var useStyles$2 = createStyles((theme, { variantStyle }) => {
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const commonStyle = {
         fontSize: rem(15),
         lineHeight: rem(24),
@@ -321,8 +322,8 @@ const FileInput = (props) => {
     return React__default.createElement(FileInput$1, Object.assign({ size: "md" }, props));
 };
 
-var useStyles$1 = createStyles((theme) => {
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+var useStyles$1 = createStyles((theme, { variantStyle }) => {
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const commonStyle = {
         fontSize: rem(15),
         lineHeight: rem(24),
@@ -382,10 +383,11 @@ ErrorIcon.defaultProps = {
     activeColor: theme.colors.primaryBase,
 };
 
-const ErrorLabel = ({ label, withIcon }) => {
-    return (React__default.createElement(Flex, { align: 'center', gap: 4 },
+const ErrorLabel = (_a) => {
+    var { label, withIcon, textProps } = _a, rest = __rest(_a, ["label", "withIcon", "textProps"]);
+    return (React__default.createElement(Flex, Object.assign({ align: 'center', gap: 4 }, rest),
         withIcon && React__default.createElement(ErrorIcon, { size: 12 }),
-        React__default.createElement(Text, { size: "c1", variant: "error", dangerouslySetInnerHTML: { __html: label } })));
+        React__default.createElement(Text, Object.assign({ size: "c1", variant: "error", dangerouslySetInnerHTML: { __html: label } }, textProps))));
 };
 
 const FloatingLabelControlContext = createContext({});
@@ -748,7 +750,8 @@ FloatingLabelControl.Icon = FloatingLabelControlIcon;
 
 const InputWrapper = forwardRef((_a, ref) => {
     var { label, value: _value, onChange: _onChange, onChangeRaw, maxLength, withFloatingLabel, styles, error } = _a, props = __rest(_a, ["label", "value", "onChange", "onChangeRaw", "maxLength", "withFloatingLabel", "styles", "error"]);
-    const { classes } = useStyles$1(undefined, { name: 'MantineInput', styles });
+    const variantStyle = useTemplateVariant();
+    const { classes } = useStyles$1({ variantStyle }, { name: 'MantineInput', styles });
     const [value, setValue] = useState(_value || '');
     const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
     useEffect(() => {
@@ -940,6 +943,7 @@ const CheckboxWithState = (_a) => {
 const CheckboxWrapper = (_a) => {
     var { color = 'blue', label, size: sizeProp, styles } = _a, props = __rest(_a, ["color", "label", "size", "styles"]);
     const theme = useMantineTheme();
+    const variantStyle = useTemplateVariant();
     const hexColor = useMemo(() => {
         var _a, _b;
         return ((color === null || color === void 0 ? void 0 : color.includes('.'))
@@ -947,7 +951,7 @@ const CheckboxWrapper = (_a) => {
             : (_b = theme.colors[color]) === null || _b === void 0 ? void 0 : _b[theme.primaryShade || 6]) ||
             theme.colors.blue[6];
     }, [color]);
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const size = isLeadgenStyle ? 20 : sizeProp;
     return (React__default.createElement(Checkbox$1, Object.assign({ color: color, size: size, label: isLeadgenStyle ? (React__default.createElement(Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), icon: isLeadgenStyle
             ? (_a) => {
@@ -1097,6 +1101,7 @@ const RadioWithState = (_a) => {
 const RadioWrapper = (_a) => {
     var { color, label, size: sizeProp, styles } = _a, props = __rest(_a, ["color", "label", "size", "styles"]);
     const theme = useMantineTheme();
+    const variantStyle = useTemplateVariant();
     const hexColor = useMemo(() => {
         var _a, _b;
         return ((color === null || color === void 0 ? void 0 : color.includes('.'))
@@ -1104,7 +1109,7 @@ const RadioWrapper = (_a) => {
             : (_b = theme.colors[color]) === null || _b === void 0 ? void 0 : _b[theme.primaryShade || 6]) ||
             theme.fn.primaryColor();
     }, [color]);
-    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+    const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
     const size = isLeadgenStyle ? 20 : sizeProp;
     return (React__default.createElement(Radio$1, Object.assign({ label: isLeadgenStyle ? (React__default.createElement(Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), size: size, icon: isLeadgenStyle
             ? (_a) => {
@@ -1789,4 +1794,4 @@ const _ChipButton = (_a) => {
 const ChipButton = _ChipButton;
 ChipButton.Group = Chip.Group;
 
-export { Anchor as A, Breadcrumbs as B, CaretDown as C, DEBOUNCED_TIME as D, ErrorIcon as E, Flag as F, Input as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Avatar as a, AspectRatio as b, CentralCarousel as c, Checkbox as d, ChipButton as e, PasswordInput as f, ErrorBoundary as g, StyledSliderWrapper as h, StyledSlider as i, Accordion as j, Carousel as k, emotionCache as l, PhoneInput as m, Popover as n, ErrorLabel as o, styles as s, useStyles$2 as u };
+export { Anchor as A, Breadcrumbs as B, CaretDown as C, DEBOUNCED_TIME as D, ErrorIcon as E, Flag as F, Input as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Avatar as a, AspectRatio as b, ErrorLabel as c, Checkbox as d, CentralCarousel as e, ChipButton as f, PasswordInput as g, ErrorBoundary as h, StyledSliderWrapper as i, StyledSlider as j, Accordion as k, Carousel as l, emotionCache as m, PhoneInput as n, Popover as o, styles as s, useStyles$2 as u };

package/build/esm/{index-0765c99d.js → index-dd14e9a1.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default, { useContext, useState } from 'react';
-import { T as TogetherComponentGlobalContext } from './utils-766da2de.js';
+import { T as TogetherComponentGlobalContext } from './utils-3c6f8119.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-c802034c.js → index-ded03e50.js}

@@ -1,18 +1,18 @@
 import React__default, { useState, useMemo } from 'react';
-import { F as Flag } from './index-85894b46.js';
+import { F as Flag } from './index-d7bd249f.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-f65d577c.js';
-import { C as CommonGAssets } from './index-f59d4d8a.js';
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
-import { a as ZINDEX_HEADER, V as VIDEO_DETAIL_TEMP_STORAGE } from './index-73f4d56a.js';
-import { V as VideoType } from './index-52825707.js';
+import { T as Text } from './index-15687d4c.js';
+import { C as CommonGAssets } from './index-f8a949a8.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
+import { a as ZINDEX_HEADER, V as VIDEO_DETAIL_TEMP_STORAGE } from './index-39bf919c.js';
+import { V as VideoType } from './index-d18ed0e7.js';
 import { createStyles, Stack, Box, AspectRatio, getStylesRef, rem, Flex } from '@mantine/core';
-import { a as abbreviateNumber } from './number-3ea886ef.js';
-import { u as useTranslations } from './index-59da60a7.js';
+import { a as abbreviateNumber } from './number-634c430b.js';
+import { u as useTranslations } from './index-e6601f2c.js';
 import { useOs } from '@mantine/hooks';
-import { M as Modal } from './index-b0854ce5.js';
-import { S as SocialLinkPreview } from './index-bf012932.js';
+import { M as Modal } from './index-2ad629e0.js';
+import { S as SocialLinkPreview } from './index-27467701.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ALLOW_DOMAIN_URL = [
@@ -338,25 +338,6 @@ var useStyles = createStyles((theme, { active, layout }) => {
     };
 });
 
-function secondsTo24HoursFormat(sec_num = 0) {
-    const hours = Math.floor(sec_num / 3600);
-    const minutes = Math.floor((sec_num - hours * 3600) / 60);
-    const seconds = sec_num - hours * 3600 - minutes * 60;
-    let hoursStr = String(hours);
-    let minutesStr = String(minutes);
-    let secondsStr = String(seconds);
-    if (hours < 10) {
-        hoursStr = '0' + hours;
-    }
-    if (minutes < 10) {
-        minutesStr = '0' + minutes;
-    }
-    if (seconds < 10) {
-        secondsStr = '0' + seconds;
-    }
-    return (hours > 0 ? hoursStr + ':' : '') + minutesStr + ':' + secondsStr;
-}
-
 const VideoItem$1 = (_a) => {
     var { isMobile, data, styles, className, classNames, layout } = _a, boxProps = __rest(_a, ["isMobile", "data", "styles", "className", "classNames", "layout"]);
     const { title, imageMedium, createTime, totalView, active, duration } = data;
@@ -384,7 +365,7 @@ const VideoItem$1 = (_a) => {
                                 e.currentTarget.src = CommonGAssets.getAssetPath(`videoThumbDefault/${locale}.jpg`);
                             } })),
                     duration && (React__default.createElement(Box, { className: classes.duration },
-                        React__default.createElement(Text, { size: "n1", className: classes.durationTxt }, secondsTo24HoursFormat(duration)))),
+                        React__default.createElement(Text, { size: "n1", className: classes.durationTxt }, duration))),
                     React__default.createElement(Flex, { className: classes.overlay, align: 'center', justify: 'center' }, active ? (React__default.createElement(Text, { size: "s3", weight: "semiBold", color: "#fff" }, t('common.playing'))) : (React__default.createElement(Play, { size: isMobile ? 32 : 46 }))))),
             React__default.createElement(Stack, { sx: { [theme.fn.largerThan('sm')]: { gap: 4 }, gap: 2 } },
                 React__default.createElement(Text, { className: classes.title, size: "s3", color: active ? theme.fn.primaryColor() : '#262626', weight: "semiBold", lineClamp: 2 }, title),

package/build/esm/{index-59da60a7.js → index-e6601f2c.js}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
-import { T as TranslationsContext } from './translationsContext-59e5652c.js';
+import { T as TranslationsContext } from './translationsContext-47869a7a.js';
 
 // SRC: https://github.com/berezh/react-string-format
 function format(text, params) {

package/build/esm/{index-ef25e2e6.js → index-ea4d7712.js}

@@ -1,6 +1,6 @@
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
-import { B as Button } from './index-b79fc8a1.js';
-import { T as TogetherComponentGlobalContext } from './utils-766da2de.js';
+import { B as Button } from './index-b88aba78.js';
+import { T as TogetherComponentGlobalContext } from './utils-3c6f8119.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-b967a2f5.js → index-f3b18d45.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default from 'react';
 import { Indicator as Indicator$1 } from '@mantine/core';
 import { theme } from './miscTheme.js';

package/build/esm/index-f5c604b1.js

@@ -0,0 +1,301 @@
+import { _ as __rest } from './tslib.es6-8570c30c.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-d7bd249f.js';
+import '@mantine/dates';
+import './index-39bf919c.js';
+import './index-d18ed0e7.js';
+import './index-f8a949a8.js';
+import './index-5d273446.js';
+import { T as Text } from './index-15687d4c.js';
+import './index-3d2078ab.js';
+import { F as FontWeight } from './index-d0dddda4.js';
+import './index.styles-25051c24.js';
+import { u as useTranslations } from './index-e6601f2c.js';
+import '@mantine/hooks';
+import { M as MediaQueries } from './utils-ff8e88ec.js';
+import './index-0bb898db.js';
+import { C as CardWrapperContext } from './context-98f996bd.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-623e7f2c.js → index-fd175154.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-5a49ecfc.js';
+import { _ as __rest } from './tslib.es6-8570c30c.js';
 import React__default from 'react';
 import { useMantineTheme } from '@mantine/core';
-import { T as Text } from './index-f65d577c.js';
+import { T as Text } from './index-15687d4c.js';
 
 /**
  * @deprecated Consider to use import { Title } from '@mantine/core'