@hhgtech/hhg-components 1.29.445 → 1.29.446-beta-2

package/build/esm/{index-12dd6967.js → index-1e831ab9.js}

@@ -1,35 +1,35 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-7984ef17.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-4dd8267d.js';
 import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-37525cf3.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-e289c55f.js';
-import { G as GenderOptionControl } from './index-dd2821c2.js';
-import { I as Input } from './index-cafbd842.js';
-import '@mantine/core';
+import { u as useHealthToolsCache } from './useHealthToolCache-8ab4744a.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-3eb48e75.js';
+import { Flex, rem, Stack, Box } from '@mantine/core';
+import { G as GenderOptionControl } from './index-0d8ed840.js';
+import { I as Input, R as Radio, c as ErrorLabel, d as Checkbox } from './index-4d0005d0.js';
 import '@mantine/dates';
-import './index-18cb16b6.js';
-import './index-539ab53a.js';
-import './index-b36b2caa.js';
-import './index-87c5a102.js';
-import { T as Text } from './index-f28ed80d.js';
-import './index-141afb90.js';
+import './index-1674fbc1.js';
+import './index-629eb2af.js';
+import './index-52a885d6.js';
+import './index-6f083c98.js';
+import { T as Text } from './index-fe6c90d2.js';
+import './index-5810df3e.js';
 import { theme } from './miscTheme.js';
-import './index.styles-50872c8c.js';
-import { u as useTranslations } from './index-47a94d34.js';
+import './index.styles-c3855349.js';
+import { u as useTranslations } from './index-a9bb81a8.js';
 import '@mantine/hooks';
-import './text-908bab85.js';
-import './utils-7cb7f4d8.js';
-import './index-36cc3053.js';
-import { H as HealthToolFormWrapper } from './index-acefdf85.js';
+import './text-282f4246.js';
+import './utils-ae5d487a.js';
+import './index-baa85d56.js';
+import { H as HealthToolFormWrapper } from './index-e5697705.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { getBmi } from './embeddedHeathToolCards_helpers.js';
 
 const BmiFormContext = createContext({});
 
 const DefaultForm = (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { t, locale } = useTranslations();
-    const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
+    const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, } = useContext(BmiFormContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
         React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
                 return (React__default.createElement(GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
@@ -58,13 +58,37 @@ const DefaultForm = (props) => {
                         content: '60',
                     }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
             } }),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
+        withAdditionalQuestion ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
+                    return (React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg", error: isTouched ? React__default.createElement(ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
+                        React__default.createElement(Flex, { gap: "lg", sx: { paddingTop: rem(8) } },
+                            React__default.createElement(Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                            React__default.createElement(Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))));
+                } }),
+            React__default.createElement(Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                    return (React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: React__default.createElement(Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc')), error: isTouched ? React__default.createElement(ErrorLabel, { label: error === null || error === void 0 ? void 0 : error.message }) : '' },
+                        React__default.createElement(Flex, { gap: "lg", sx: { paddingTop: rem(8) } },
+                            React__default.createElement(Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                            React__default.createElement(Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))));
+                } }),
+            React__default.createElement(Stack, { spacing: 16, sx: (theme) => ({
+                    backgroundColor: theme.colors.neutral[0],
+                    padding: `${rem(16)} ${rem(12)}`,
+                    borderBottomLeftRadius: 'inherit',
+                    borderBottomRightRadius: 'inherit',
+                    margin: `0 ${rem(-16)}  ${rem(-16)}`,
+                }) },
+                React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
+                        var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);
+                        return (React__default.createElement(Checkbox, Object.assign({ size: "sm", label: React__default.createElement(Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
+                    } }),
+                React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit')))));
 };
 
 const InlineForm = (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { t, locale } = useTranslations();
-    const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
+    const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, } = useContext(BmiFormContext);
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
         React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
                 return (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
@@ -96,13 +120,50 @@ const InlineForm = (props) => {
                             }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', precision: 1, min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })),
                     isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
             } }),
-        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
+        withAdditionalQuestion ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Controller, { name: "question1", control: control, rules: (_e = bmiGenerated.question1) === null || _e === void 0 ? void 0 : _e.rule, render: ({ field: { value, onChange, name }, fieldState: { error }, }) => {
+                    return (React__default.createElement(Box, null,
+                        React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.weightLossSupport')), size: "lg" },
+                            React__default.createElement(Flex, { gap: "lg", sx: { paddingTop: rem(8) } },
+                                React__default.createElement(Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                                React__default.createElement(Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
+                        isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
+                } }),
+            React__default.createElement(Controller, { name: "question2", control: control, rules: (_f = bmiGenerated.question2) === null || _f === void 0 ? void 0 : _f.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                    return (React__default.createElement(Box, null,
+                        React__default.createElement(Radio.Group, { name: name, value: value, onChange: onChange, sx: { flex: 1 }, label: React__default.createElement(Text, { size: "s4", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: React__default.createElement(Text, { style: { fontSize: '10px' }, span: true }, t('bmi.question.glp1Awareness.desc')) },
+                            React__default.createElement(Flex, { gap: "lg", sx: { paddingTop: rem(8) } },
+                                React__default.createElement(Radio, { size: "sm", value: "1", label: t('switchBtn.yes') }),
+                                React__default.createElement(Radio, { size: "sm", value: "0", label: t('switchBtn.no') }))),
+                        isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
+                } }),
+            React__default.createElement(Stack, { className: "newsletter-block", spacing: 16, sx: (theme) => ({
+                    backgroundColor: theme.colors.neutral[0],
+                    padding: `${rem(16)} ${rem(12)}`,
+                    borderBottomLeftRadius: 'inherit',
+                    borderBottomRightRadius: 'inherit',
+                    margin: `0 ${rem(-16)}  ${rem(-16)}`,
+                    '.bmi-btn': {
+                        marginTop: 0,
+                    },
+                }) },
+                React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_g = bmiGenerated.newsletter) === null || _g === void 0 ? void 0 : _g.rule, render: (_a) => {
+                        var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);
+                        return (React__default.createElement(Checkbox, Object.assign({ size: "sm", label: React__default.createElement(Text, { size: "p3" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
+                    } }),
+                React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit')))));
 };
 
 const BmiForm = (_a) => {
-    var { value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, bmiGenerated, bmiUnit, formLayout = 'default', submitProps } = _a, rest = __rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps"]);
+    var { value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, bmiGenerated, bmiUnit, formLayout = 'default', submitProps, withAdditionalQuestion } = _a, rest = __rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps", "withAdditionalQuestion"]);
     const [isTouched, setIsTouched] = useState(false);
-    const { control, handleSubmit, setValue, watch } = useForm();
+    const { control, handleSubmit, setValue, watch } = useForm({
+        defaultValues: {
+            question1: undefined,
+            question2: undefined,
+            newsletter: true,
+        },
+    });
     const data = watch();
     const { locale } = useTranslations();
     const { getHealthToolLink } = useHealthToolsCache(locale);
@@ -110,13 +171,8 @@ const BmiForm = (_a) => {
     const onValid = (data) => __awaiter(void 0, void 0, void 0, function* () {
         const height = bmiUnit.heightConvert(data.height);
         const weight = bmiUnit.weightConvert(data.weight);
-        const submitValue = {
-            gender: data.gender,
-            age: data.age,
-            height,
-            weight,
-            bmi: getBmi({ height, weight }),
-        };
+        const submitValue = Object.assign(Object.assign({}, data), { height,
+            weight, bmi: getBmi({ height, weight }) });
         onInValid();
         onSubmitProps && onSubmitProps(submitValue);
     });
@@ -143,6 +199,7 @@ const BmiForm = (_a) => {
             isTouched,
             linkTool,
             submitProps,
+            withAdditionalQuestion,
         } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
 };
 

package/build/esm/{index-c7376bb4.js → index-2121bfa7.js}

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

package/build/esm/{index-adc0c6e4.js → index-2575e8f9.js}

@@ -1,7 +1,7 @@
-import { _ as __rest } from './tslib.es6-7984ef17.js';
+import { _ as __rest } from './tslib.es6-4dd8267d.js';
 import React__default from 'react';
 import { Modal as Modal$1 } from '@mantine/core';
-import { u as useStyles } from './index.styles-50872c8c.js';
+import { u as useStyles } from './index.styles-c3855349.js';
 
 const Modal = (_a) => {
     var { styles, classNames, transitionProps } = _a, rest = __rest(_a, ["styles", "classNames", "transitionProps"]);

package/build/esm/{index-d690f3ac.js → index-4c517571.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { I as Icon } from './index-c32f573a.js';
-import { u as useTranslations } from './index-47a94d34.js';
+import { I as Icon } from './index-90c395d9.js';
+import { u as useTranslations } from './index-a9bb81a8.js';
 
 var styles = {"loading":"tliWyii"};
 

package/build/esm/{index-f6d17433.js → index-4c55ff67.js}

@@ -1,20 +1,20 @@
-import { _ as __rest } from './tslib.es6-7984ef17.js';
+import { _ as __rest } from './tslib.es6-4dd8267d.js';
 import React__default from 'react';
-import './index-cafbd842.js';
+import './index-4d0005d0.js';
 import '@mantine/core';
 import '@mantine/dates';
-import './index-18cb16b6.js';
-import './index-539ab53a.js';
-import './index-b36b2caa.js';
-import './index-87c5a102.js';
-import { T as Text$1 } from './index-f28ed80d.js';
-import './index-141afb90.js';
-import './index.styles-50872c8c.js';
-import './translationsContext-573d0b98.js';
+import './index-1674fbc1.js';
+import './index-629eb2af.js';
+import './index-52a885d6.js';
+import './index-6f083c98.js';
+import { T as Text$1 } from './index-fe6c90d2.js';
+import './index-5810df3e.js';
+import './index.styles-c3855349.js';
+import './translationsContext-fd33f958.js';
 import '@mantine/hooks';
-import './text-908bab85.js';
-import './utils-7cb7f4d8.js';
-import './index-36cc3053.js';
+import './text-282f4246.js';
+import './utils-ae5d487a.js';
+import './index-baa85d56.js';
 
 /**
  * @deprecated Consider to use import { Text } from '@hhgtech/hhg-components/mantine'

package/build/esm/{index-cafbd842.js → index-4d0005d0.js}

@@ -1,24 +1,24 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-7984ef17.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-4dd8267d.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-b36b2caa.js';
-import { C as CustomStylesType, G as GlobalTextStyleNew, F as FontWeight } from './text-908bab85.js';
-import { u as useScreenSize, I as ImageWrap } from './index-2558182c.js';
+import { C as CommonGAssets } from './index-52a885d6.js';
+import { C as CustomStylesType, G as GlobalTextStyleNew, F as FontWeight } from './text-282f4246.js';
+import { u as useScreenSize, I as ImageWrap } from './index-76241564.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-f28ed80d.js';
-import { t as themeColors } from './index-87c5a102.js';
+import { T as Text } from './index-fe6c90d2.js';
+import { t as themeColors } from './index-6f083c98.js';
 import { theme } from './miscTheme.js';
 import cn from 'classnames';
 import { v1 } from 'uuid';
-import { a as useUniqueId } from './useUniqueId-30dd6f86.js';
+import { a as useUniqueId } from './useUniqueId-1301cf25.js';
 import { siteOptions } from './constantsSite.js';
 import { css } from '@emotion/react';
 import { Check, Plus } from '@hhgtech/icons/core';
-import { B as Button } from './index-141afb90.js';
+import { B as Button } from './index-5810df3e.js';
 
 var useStyles$4 = createStyles((theme) => {
     const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
@@ -1789,4 +1789,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-eb49665a.js → index-50c16407.js}

@@ -1,20 +1,20 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-7984ef17.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-4dd8267d.js';
 import React__default, { useMemo, useEffect, useRef, useContext, useState } from 'react';
 import { User } from '@hhgtech/icons/core';
-import { S as Spinner } from './Spinner-99d5a871.js';
-import { a as Avatar } from './index-cafbd842.js';
-import { B as Button } from './index-141afb90.js';
-import { T as Text } from './index-f28ed80d.js';
-import { u as useTranslations } from './index-47a94d34.js';
-import { C as CommonGAssets } from './index-b36b2caa.js';
+import { S as Spinner } from './Spinner-09448292.js';
+import { a as Avatar } from './index-4d0005d0.js';
+import { B as Button } from './index-5810df3e.js';
+import { T as Text } from './index-fe6c90d2.js';
+import { u as useTranslations } from './index-a9bb81a8.js';
+import { C as CommonGAssets } from './index-52a885d6.js';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-7cb7f4d8.js';
+import { M as MediaQueries } from './utils-ae5d487a.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import cn from 'classnames';
-import { c as CARE_LOCALES, d as CARE_BOOKING_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, e as VIDEO_LOCALES } from './index-18cb16b6.js';
-import { i as domainLocalesMarryBaby } from './utils-4c3c0f03.js';
-import { g as getCurrentBaseUrl, a as getCurrentSsoUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain } from './normalizeLink-d8e4f3bf.js';
+import { a as CARE_LOCALES, c as CARE_BOOKING_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, d as VIDEO_LOCALES } from './index-1674fbc1.js';
+import { i as domainLocalesMarryBaby } from './utils-d2b47427.js';
+import { g as getCurrentBaseUrl, a as getCurrentSsoUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain } from './normalizeLink-bd3239ff.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { ProfileNavigation } from './profileNavigation.js';
 import { NavigationLogoutPopup } from './navigationLogoutPopup.js';

package/build/esm/{index-7b7e82ee.js → index-5408efbc.js}

@@ -1,33 +1,33 @@
 import * as React from 'react';
 import React__default, { useMemo, useState, useEffect, useRef, createContext, useContext } from 'react';
-import { u as useTranslations } from './index-47a94d34.js';
+import { u as useTranslations } from './index-a9bb81a8.js';
 import { getCookie } from './miscCookieHelper.js';
-import { C as CommonGAssets } from './index-b36b2caa.js';
-import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-d8e4f3bf.js';
+import { C as CommonGAssets } from './index-52a885d6.js';
+import { n as normalizeLinkSlash, e as normalizeLink } from './normalizeLink-bd3239ff.js';
 import { theme } from './miscTheme.js';
-import { A as Avatar, I as IconWrapper, D as DistanceTag, a as DrawerBottom, S as ShapedArrowDown } from './index-a21e8cc7.js';
-import { b as getTogetherUserPostsApiPath } from './index-aa40fd59.js';
-import { B as Button } from './index-950c94cc.js';
-import { w as workingDays } from './types-defdac30.js';
+import { A as Avatar, I as IconWrapper, D as DistanceTag, a as DrawerBottom, S as ShapedArrowDown } from './index-cabe2e47.js';
+import { b as getTogetherUserPostsApiPath } from './index-a411fad7.js';
+import { B as Button } from './index-b4ceb7f9.js';
+import { w as workingDays } from './types-39a3a82b.js';
 import styled from '@emotion/styled';
 import { LoadScript, GoogleMap, Marker } from '@react-google-maps/api';
 import cn from 'classnames';
-import { b as basePath, Z as ZINDEX_SSO } from './index-18cb16b6.js';
-import { L as LOCALISED_SLUGS } from './constants-e289c55f.js';
-import { T as Text } from './index-f6d17433.js';
-import { f as formatPhoneNumber } from './localizeNumberFormat-b489e753.js';
-import { a as __awaiter } from './tslib.es6-7984ef17.js';
+import { b as basePath, Z as ZINDEX_SSO } from './index-1674fbc1.js';
+import { L as LOCALISED_SLUGS } from './constants-3eb48e75.js';
+import { T as Text } from './index-4c55ff67.js';
+import { f as formatPhoneNumber } from './localizeNumberFormat-64119dab.js';
+import { a as __awaiter } from './tslib.es6-4dd8267d.js';
 import { useDisclosure } from '@mantine/hooks';
-import { clsx, Flex, Box } from '@mantine/core';
-import { u as useTextStyles, T as TextField } from './index-47f2ea26.js';
+import { clsx, Flex, Box, rem } from '@mantine/core';
+import { u as useTextStyles, T as TextField } from './index-df42656a.js';
 import { parsePhoneNumber } from 'react-phone-number-input';
-import { P as Phone, I as Input, E as ErrorIcon } from './index-cafbd842.js';
-import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './text-908bab85.js';
-import { B as Button$1 } from './index-141afb90.js';
-import { M as MAPPED_LOCALE } from './index-87c5a102.js';
-import { T as Text$1 } from './index-f28ed80d.js';
-import { I as ImageWrap } from './index-2558182c.js';
-import { I as InsuranceList, P as PaymentList, A as ArrowRightBlue, a as DoctorInfoExpertise, D as DoctorExpertiseItem, C as Clinic } from './index-da444a19.js';
+import { P as Phone, I as Input, E as ErrorIcon } from './index-4d0005d0.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './text-282f4246.js';
+import { B as Button$1 } from './index-5810df3e.js';
+import { M as MAPPED_LOCALE } from './index-6f083c98.js';
+import { T as Text$1 } from './index-fe6c90d2.js';
+import { I as ImageWrap } from './index-76241564.js';
+import { I as InsuranceList, P as PaymentList, A as ArrowRightBlue, a as DoctorInfoExpertise, D as DoctorExpertiseItem, C as Clinic } from './index-8a7a353c.js';
 
 /* eslint-disable prettier/prettier */
 const Check = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 81 80", fill: "none" }, props),
@@ -1073,6 +1073,10 @@ const StyledHospitalInfo = styled.div `
     }
   }
 
+  .distanceTag {
+    padding: 4px 0px;
+  }
+
   .flex-1 {
     flex: 1 1 0%;
   }
@@ -1145,8 +1149,10 @@ function HospitalInfo({ hospitalInfo, distance, className, }) {
             React__default.createElement("div", { className: "hospitalName" }, hospitalInfo.name),
             hospitalInfo.working_times && isOpened !== null && (React__default.createElement("div", { className: "hospitalStatus", "data-is-opened": isOpened },
                 React__default.createElement(StyledClockIcon, null),
-                React__default.createElement("span", null, t(isOpened ? 'hospital.status.opening' : 'hospital.status.closed')))),
-            distance && React__default.createElement(StyledDistanceTag, { value: `${distance} km` })),
+                React__default.createElement(Text$1, { size: "p3", weight: "regular", color: "inherit" }, t(isOpened ? 'hospital.status.opening' : 'hospital.status.closed')))),
+            distance && (React__default.createElement(StyledDistanceTag, { className: cn({
+                    distanceTag: hospitalInfo.working_times === null,
+                }), value: `${distance} km` }))),
         React__default.createElement(StyledArrowRightIcon, null)));
 }
 
@@ -1330,4 +1336,59 @@ DoctorExpertise.OtherHighlights = () => {
     return (React__default.createElement(DoctorExpertiseItem, { doctorInfo: otherHighlights, Icon: Highlight, title: t('common.otherHighlights') }));
 };
 
-export { ClinicInfo as C, DoctorExpertise as D, EPopupCollectPhoneStep as E, HospitalInfo as H, Mobile as M, NavHeader as N, PopupCollectPhone as P, UserProfileNavigation as U, UserStats as a, CollectPhoneForm as b, ProductInsuranceInfo as c, Check as d, Clock as e, formPhoneType as f, HelloZalo as g, Ellipse as h, PhoneInactive as i };
+const ArticleCardStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${rem(12)};
+`;
+const ArticleCardContentStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${rem(8)};
+`;
+const ArticleCardContentTitleStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${rem(4)};
+`;
+const ArticleDoctorStyled = styled.div `
+  display: flex;
+  gap: ${rem(4)};
+  align-items: center;
+`;
+const TextSpanStyled = styled.span `
+  color: ${theme.colors.gray600};
+`;
+
+const ArticleDetailCard = (props) => {
+    const { article, doctor, className, style, handleClick } = props;
+    const { articleType, articleTitle, articleTypeColor, image, defaultImage } = article || {};
+    const { doctorName, doctorAvatar, defaultDoctorAvatar } = doctor || {};
+    const { t } = useTranslations();
+    return (React__default.createElement(ArticleCardStyled, { className: className, style: style, onClick: handleClick },
+        React__default.createElement(ImageWrap, { alt: 'article-image', src: image || defaultImage, style: {
+                width: '100%',
+                height: rem(143.5),
+                objectFit: 'cover',
+                borderRadius: rem(4),
+            } }),
+        React__default.createElement(ArticleCardContentStyled, null,
+            React__default.createElement(ArticleCardContentTitleStyled, null,
+                React__default.createElement(Text$1, { color: articleTypeColor || theme.colors.green600, size: "c1", weight: "halfBold" }, articleType),
+                React__default.createElement(Text$1, { size: "p2", weight: "semiBold", color: theme.colors.gray800, lineClamp: 2 }, articleTitle)),
+            React__default.createElement(ArticleDoctorStyled, null,
+                React__default.createElement(ImageWrap, { alt: 'doctor-avatar', src: doctorAvatar || defaultDoctorAvatar, style: {
+                        width: rem(20),
+                        height: rem(20),
+                        borderRadius: '50%',
+                    } }),
+                React__default.createElement("div", null,
+                    React__default.createElement(Text$1, { size: "c1", weight: "regular", color: theme.colors.gray800, lineClamp: 1 },
+                        React__default.createElement(TextSpanStyled, null,
+                            t('common.articleCard.reviewedDoctor'),
+                            ":"),
+                        ' ',
+                        doctorName))))));
+};
+
+export { ArticleDetailCard as A, ClinicInfo as C, DoctorExpertise as D, EPopupCollectPhoneStep as E, HospitalInfo as H, Mobile as M, NavHeader as N, PopupCollectPhone as P, UserProfileNavigation as U, UserStats as a, CollectPhoneForm as b, ProductInsuranceInfo as c, Check as d, Clock as e, formPhoneType as f, HelloZalo as g, Ellipse as h, PhoneInactive as i };

package/build/esm/{index-141afb90.js → index-5810df3e.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-7984ef17.js';
+import { _ as __rest } from './tslib.es6-4dd8267d.js';
 import React__default, { forwardRef } from 'react';
 import { createStyles, useMantineTheme, Button as Button$1 } from '@mantine/core';
-import { A as ANIMATION_DURATION } from './shared-41a6c7dc.js';
-import { C as CustomStylesType, F as FontWeight } from './text-908bab85.js';
+import { A as ANIMATION_DURATION } from './shared-680c0fd8.js';
+import { C as CustomStylesType, F as FontWeight } from './text-282f4246.js';
 
 var useStyles = createStyles((_theme, _params) => {
     var _a, _b, _c, _d, _e, _f;

package/build/esm/{index-48fdc2f0.js → index-5965ca86.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-7984ef17.js';
+import { _ as __rest } from './tslib.es6-4dd8267d.js';
 import React__default, { useContext, useState } from 'react';
-import { T as TogetherComponentGlobalContext } from './utils-4c3c0f03.js';
+import { T as TogetherComponentGlobalContext } from './utils-d2b47427.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-43df005b.js → index-59eb7799.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-7984ef17.js';
+import { _ as __rest } from './tslib.es6-4dd8267d.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-87c5a102.js';
-import { C as CustomStylesType } from './text-908bab85.js';
+import { u as useMantineLocale, g as getMantineThemeOverride, N as NotificationsHandler } from './index-6f083c98.js';
+import { C as CustomStylesType } from './text-282f4246.js';
 
 const MantineProvider = (_a) => {
     var { children, locale, template = 'hb', isNotifications = true, customStyleType = CustomStylesType.NONE } = _a, props = __rest(_a, ["children", "locale", "template", "isNotifications", "customStyleType"]);

package/build/esm/{index-819d458b.js → index-5dc8f299.js}

@@ -1,24 +1,24 @@
-import { _ as __rest } from './tslib.es6-7984ef17.js';
+import { _ as __rest } from './tslib.es6-4dd8267d.js';
 import React__default, { createContext, useContext, useRef, useMemo, useState, useEffect } from 'react';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-37525cf3.js';
-import { u as useTranslations } from './index-47a94d34.js';
-import { C as CommonGAssets } from './index-b36b2caa.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-e289c55f.js';
-import { G as GenderOptionControl } from './index-dd2821c2.js';
-import { I as Input, S as Select } from './index-cafbd842.js';
-import { D as DatePicker } from './index-d98c209b.js';
-import './index-f28ed80d.js';
-import './index-141afb90.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-8ab4744a.js';
+import { u as useTranslations } from './index-a9bb81a8.js';
+import { C as CommonGAssets } from './index-52a885d6.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-3eb48e75.js';
+import { G as GenderOptionControl } from './index-0d8ed840.js';
+import { I as Input, S as Select } from './index-4d0005d0.js';
+import { D as DatePicker } from './index-7b61929c.js';
+import './index-fe6c90d2.js';
+import './index-5810df3e.js';
 import '@mantine/core';
-import './index.styles-50872c8c.js';
+import './index.styles-c3855349.js';
 import '@mantine/hooks';
-import './index-87c5a102.js';
-import './text-908bab85.js';
-import './utils-7cb7f4d8.js';
-import './index-36cc3053.js';
-import './index-18cb16b6.js';
-import { H as HealthToolFormWrapper } from './index-acefdf85.js';
+import './index-6f083c98.js';
+import './text-282f4246.js';
+import './utils-ae5d487a.js';
+import './index-baa85d56.js';
+import './index-1674fbc1.js';
+import { H as HealthToolFormWrapper } from './index-e5697705.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ThrFormContext = createContext({});

package/build/esm/{index-539ab53a.js → index-629eb2af.js}

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

package/build/esm/{index-943448de.js → index-67dfba97.js}

@@ -1,22 +1,22 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-7984ef17.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-4dd8267d.js';
 import React__default, { useReducer, useState, useEffect } from 'react';
 import { Stack, Input as Input$1 } from '@mantine/core';
-import { I as Input, S as Select } from './index-cafbd842.js';
+import { I as Input, S as Select } from './index-4d0005d0.js';
 import '@mantine/dates';
-import { C as CDN_ADDRESS } from './index-18cb16b6.js';
-import './index-539ab53a.js';
-import './index-b36b2caa.js';
-import './index-87c5a102.js';
-import './index-f28ed80d.js';
-import './index-141afb90.js';
-import './index.styles-50872c8c.js';
-import { u as useTranslations } from './index-47a94d34.js';
+import { C as CDN_ADDRESS } from './index-1674fbc1.js';
+import './index-629eb2af.js';
+import './index-52a885d6.js';
+import './index-6f083c98.js';
+import './index-fe6c90d2.js';
+import './index-5810df3e.js';
+import './index.styles-c3855349.js';
+import { u as useTranslations } from './index-a9bb81a8.js';
 import '@mantine/hooks';
-import './text-908bab85.js';
-import './utils-7cb7f4d8.js';
-import './index-36cc3053.js';
-import { M as MAPPED_LOCALE } from './utils-3a62d99e.js';
-import { L as LOCALE } from './Locale-d401e4f0.js';
+import './text-282f4246.js';
+import './utils-ae5d487a.js';
+import './index-baa85d56.js';
+import { M as MAPPED_LOCALE } from './utils-53fce947.js';
+import { L as LOCALE } from './Locale-8468ca0b.js';
 
 const generateGetAddressDetail = (locale) => {
     return `${CDN_ADDRESS}/cities-data-${MAPPED_LOCALE[locale]}.json`;