@hhgtech/hhg-components 1.29.498 → 1.29.500-beta-1

package/build/esm/{index-ee4f4d98.js → index-e8d6449d.js}

@@ -1,23 +1,23 @@
-import { _ as __rest } from './tslib.es6-4c2b392a.js';
+import { _ as __rest } from './tslib.es6-b66d75db.js';
 import React__default, { useContext } from 'react';
 import { createStyles, rem, useMantineTheme, Box, Flex, ScrollArea } from '@mantine/core';
 import { Warning } from '@hhgtech/icons/core';
 import { RedCross } from '@hhgtech/icons/other';
-import './index-03963d37.js';
+import './index-98006352.js';
 import '@mantine/dates';
-import './index-2d6472a6.js';
-import './index-633b28cc.js';
-import './index-957ad8bc.js';
-import './index-6187b3e5.js';
-import { T as Text } from './index-9181155e.js';
-import './index-dbe7d116.js';
-import { F as FontWeight } from './index-3770342b.js';
-import './index.styles-f9403cd8.js';
-import { u as useTranslations } from './index-a6593fc5.js';
+import './index-f36317a6.js';
+import './index-be0a2a5d.js';
+import './index-96dfb9cd.js';
+import './index-a22941c6.js';
+import { T as Text } from './index-8eb56567.js';
+import './index-fac9ecc6.js';
+import { F as FontWeight, T as TemplateProvider, C as CustomStylesType } from './index-d0043174.js';
+import './index.styles-e50708f1.js';
+import { u as useTranslations } from './index-49b79390.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-9da52e63.js';
-import './index-a4b6228d.js';
-import { C as CardWrapperContext } from './context-06e735a2.js';
+import { M as MediaQueries } from './utils-409a83b1.js';
+import './index-a39e6bf0.js';
+import { C as CardWrapperContext } from './context-13568ea4.js';
 
 const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
 const StyledInnerClass = 'hhgcomp-toolbanner-inner';
@@ -32,6 +32,9 @@ const useStyles$3 = createStyles((theme, { isRevamp, isPregTool, bannerColor, is
         alignItems: 'center',
         justifyContent: 'space-between',
         padding: rem(16),
+        [theme.fn.smallerThan('sm')]: {
+            gap: rem(12),
+        },
     },
     container: {
         width: '100%',
@@ -47,6 +50,9 @@ const useStyles$3 = createStyles((theme, { isRevamp, isPregTool, bannerColor, is
         alignItems: 'center',
         justifyContent: 'space-between',
         padding: rem(16),
+        [theme.fn.smallerThan('sm')]: {
+            padding: `${rem(12)} ${rem(16)}`,
+        },
         a: {
             textDecoration: 'none',
             color: 'inherit',
@@ -110,6 +116,9 @@ const useStyles$3 = createStyles((theme, { isRevamp, isPregTool, bannerColor, is
         display: 'flex',
         flexDirection: 'column',
         gap: isRevamp ? rem(8) : 0,
+        [theme.fn.smallerThan('sm')]: {
+            gap: 4,
+        },
     },
     avatarWrapper: {
         position: 'relative',
@@ -180,7 +189,7 @@ const ToolsBannerCard = (_a) => {
             } }))) : 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),
+            React__default.createElement(Text, { className: cx(classes.heading, 'heading'), size: 'h4', as: headingAs }, heading),
             medicalReviewEle && React__default.createElement(Text, { size: "n1" }, medicalReviewEle),
             disclaimer && (React__default.createElement(Flex, { gap: 4 },
                 React__default.createElement(Warning, { size: 16, color: theme.colors.yellow[8], className: classes.disclaimerIcon }),
@@ -213,11 +222,14 @@ const Banner = (_a) => {
         }, className: cx(className, classes.root) }, rest)));
 };
 
-var useStyles$1 = createStyles(() => {
+var useStyles$1 = createStyles((theme) => {
     return {
         root: {
             paddingTop: 16,
             borderRadius: 'inherit',
+            [theme.fn.smallerThan('sm')]: {
+                paddingTop: 8,
+            },
         },
     };
 });
@@ -307,13 +319,14 @@ const _HealthToolCardWrapper = (_a) => {
         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)));
+    return (React__default.createElement(TemplateProvider, { variant: CustomStylesType.LEADGEN },
+        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;

package/build/esm/{index-2f09d42f.js → index-e93888a4.js}

@@ -1,8 +1,8 @@
 import React__default, { useState } from 'react';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
-import { M as MarryBabyText } from './index-5a7346c3.js';
-import { T as Text } from './index-e06a7c13.js';
+import { M as MarryBabyText } from './index-8daede73.js';
+import { T as Text } from './index-7f4a3be0.js';
 
 const StyledRadioImageGroup = styled.div `
   display: flex;

package/build/esm/{index-7ddce3c8.js → index-ea10c66a.js}

@@ -1,5 +1,5 @@
 import React__default, { useState, useEffect } from 'react';
-import { B as Button } from './index-dbe7d116.js';
+import { B as Button } from './index-fac9ecc6.js';
 import styled from '@emotion/styled';
 
 const StyledContainer = styled.div `

package/build/esm/{index-98eb1bf4.js → index-ea18ab10.js}

@@ -1,22 +1,22 @@
-import { _ as __rest } from './tslib.es6-4c2b392a.js';
+import { _ as __rest } from './tslib.es6-b66d75db.js';
 import React__default, { useContext } from 'react';
 import { createStyles, rem, Box, clsx } from '@mantine/core';
-import './index-03963d37.js';
+import './index-98006352.js';
 import '@mantine/dates';
-import './index-2d6472a6.js';
-import './index-633b28cc.js';
-import './index-957ad8bc.js';
-import './index-6187b3e5.js';
-import { T as Text } from './index-9181155e.js';
-import { B as Button } from './index-dbe7d116.js';
-import './index-3770342b.js';
-import './index.styles-f9403cd8.js';
-import { u as useTranslations } from './index-a6593fc5.js';
+import './index-f36317a6.js';
+import './index-be0a2a5d.js';
+import './index-96dfb9cd.js';
+import './index-a22941c6.js';
+import { T as Text } from './index-8eb56567.js';
+import { B as Button } from './index-fac9ecc6.js';
+import './index-d0043174.js';
+import './index.styles-e50708f1.js';
+import { u as useTranslations } from './index-49b79390.js';
 import '@mantine/hooks';
-import './utils-9da52e63.js';
-import './index-a4b6228d.js';
-import { C as CardWrapperContext } from './context-06e735a2.js';
-import { H as HealthToolFormWrapper } from './index-35e5fb79.js';
+import './utils-409a83b1.js';
+import './index-a39e6bf0.js';
+import { C as CardWrapperContext } from './context-13568ea4.js';
+import { H as HealthToolFormWrapper } from './index-fbe616df.js';
 
 var useStyles = createStyles((theme, { hasOnClickFn }) => {
     return {

package/build/esm/{index-19f3e770.js → index-ed4b6e80.js}

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

package/build/esm/{index-79ecd1bb.js → index-edf07f5a.js}

@@ -1,12 +1,12 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-4c2b392a.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-b66d75db.js';
 import React__default, { useState, useMemo, useCallback } from 'react';
-import { u as useTranslations } from './index-a6593fc5.js';
+import { u as useTranslations } from './index-49b79390.js';
 import { createStyles } from '@mantine/core';
-import { P as PATHS } from './paths-4bcff645.js';
-import { L as LOCALIZED_SLUGS } from './constants-3db9e07a.js';
-import { B as Button } from './index-dbe7d116.js';
-import './index-2d6472a6.js';
-import { c as callApi, g as getCarePath } from './utils-ffe8c9cf.js';
+import { P as PATHS } from './paths-2248b725.js';
+import { L as LOCALIZED_SLUGS } from './constants-18ee7aac.js';
+import { B as Button } from './index-fac9ecc6.js';
+import './index-f36317a6.js';
+import { c as callApi, g as getCarePath } from './utils-76c91d9e.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
 

package/build/esm/{index-b2cc41bc.js → index-ef6c9b1a.js}

@@ -1,28 +1,27 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-4c2b392a.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-b66d75db.js';
 import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-80317b15.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-a9f0b321.js';
-import { Flex, rem, Stack, clsx, createStyles, Box } from '@mantine/core';
-import { G as GenderOptionControl } from './index-d55d080a.js';
-import { I as Input, R as Radio, c as ErrorLabel, d as Checkbox } from './index-03963d37.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-a5e4373e.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-a16e91a9.js';
+import { Grid, Flex, Box, clsx, createStyles, rem, Stack } from '@mantine/core';
+import { G as GenderOptionControl } from './index-669c227e.js';
+import { I as Input, R as Radio, c as ErrorLabel, d as Checkbox } from './index-98006352.js';
 import '@mantine/dates';
-import './index-2d6472a6.js';
-import './index-633b28cc.js';
-import './index-957ad8bc.js';
-import './index-6187b3e5.js';
-import { T as Text } from './index-9181155e.js';
-import './index-dbe7d116.js';
-import { theme } from './miscTheme.js';
-import './index-3770342b.js';
-import './index.styles-f9403cd8.js';
-import { u as useTranslations } from './index-a6593fc5.js';
+import './index-f36317a6.js';
+import './index-be0a2a5d.js';
+import './index-96dfb9cd.js';
+import './index-a22941c6.js';
+import { T as Text } from './index-8eb56567.js';
+import './index-fac9ecc6.js';
+import './index-d0043174.js';
+import './index.styles-e50708f1.js';
+import { u as useTranslations } from './index-49b79390.js';
 import '@mantine/hooks';
-import './utils-9da52e63.js';
-import './index-a4b6228d.js';
-import { H as HealthToolFormWrapper } from './index-35e5fb79.js';
-import { C as CardWrapperContext } from './context-06e735a2.js';
-import { L as LOCALE } from './Locale-0e687ff5.js';
+import './utils-409a83b1.js';
+import './index-a39e6bf0.js';
+import { H as HealthToolFormWrapper } from './index-fbe616df.js';
+import { C as CardWrapperContext } from './context-13568ea4.js';
+import { L as LOCALE } from './Locale-b6f4abea.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { getBmi } from './embeddedHeathToolCards_helpers.js';
 
@@ -33,77 +32,88 @@ const DefaultForm = (props) => {
     const { t, locale } = useTranslations();
     const { classes: cardWrapperClasses = {} } = useContext(CardWrapperContext);
     const { control, bmiGenerated, isTouched, linkTool, submitProps, withAdditionalQuestion, classes: formWrapperClasses = {}, } = useContext(BmiFormContext);
+    const radioStyle = {
+        body: {
+            alignItems: 'center',
+        },
+    };
     return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            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 }));
-                } })),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                    return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                            t('bmi.ageInput'),
-                            ' ',
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.ageInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                            content: '25',
-                        }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
-                } })),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                    return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                            t('bmi.heightInput'),
-                            ' ',
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                            content: locale === LOCALE.Myanmar ? 6 : 170,
-                        }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
-                } })),
-        React__default.createElement(HealthToolFormWrapper.FormRow, null,
-            React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
-                    return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
-                            t('bmi.weightInput'),
-                            ' ',
-                            React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
-                            content: locale === LOCALE.Myanmar ? 130 : 60,
-                        }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
-                } })),
-        withAdditionalQuestion ? (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(HealthToolFormWrapper.FormRow, 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(Grid, { gutter: 4, px: 16 },
+            React__default.createElement(Grid.Col, { span: 12 },
+                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 }));
                     } })),
-            React__default.createElement(HealthToolFormWrapper.FormRow, null,
-                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: locale !== LOCALE.Malaysia && (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(Grid.Col, { span: 12 },
+                React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                        return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('bmi.ageInput')), placeholder: t('tools.inputPlaceholder', {
+                                content: '25',
+                            }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0, rightSection: t('bmi.ageInput.desc'), classNames: {
+                                rightSection: formWrapperClasses.inputRightSection,
+                            } }));
                     } })),
-            React__default.createElement(HealthToolFormWrapper.FormRow, { sx: { paddingLeft: 0, paddingRight: 0 } },
-                React__default.createElement(Stack, { className: clsx(formWrapperClasses.newsletterBlock, cardWrapperClasses.newsletterBlock), spacing: 16, sx: {
-                        paddingLeft: 16,
-                        paddingRight: 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.FormRow, null,
-            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(Grid.Col, { span: 12 },
+                React__default.createElement(Grid, { gutter: 8 },
+                    React__default.createElement(Grid.Col, { span: 6 },
+                        React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('bmi.heightInput')), rightSection: t('bmi.heightInput.desc'), placeholder: t('tools.inputPlaceholder', {
+                                        content: locale === LOCALE.Myanmar ? 6 : 170,
+                                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0, classNames: {
+                                        rightSection: formWrapperClasses.inputRightSection,
+                                    } }));
+                            } })),
+                    React__default.createElement(Grid.Col, { span: 6 },
+                        React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
+                                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('bmi.weightInput')), rightSection: t('bmi.weightInput.desc'), placeholder: t('tools.inputPlaceholder', {
+                                        content: locale === LOCALE.Myanmar ? 130 : 60,
+                                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0, classNames: {
+                                        rightSection: formWrapperClasses.inputRightSection,
+                                    } }));
+                            } }))))),
+        withAdditionalQuestion ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Grid, { gutter: 4, px: 16 },
+                React__default.createElement(Grid.Col, 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: "p2", 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" },
+                                    React__default.createElement(Radio, { size: "sm", value: "1", label: React__default.createElement(Text, { size: "p2" }, t('switchBtn.yes')), styles: radioStyle }),
+                                    React__default.createElement(Radio, { size: "sm", value: "0", label: React__default.createElement(Text, { size: "p2" }, t('switchBtn.no')), styles: radioStyle }))));
+                        } })),
+                React__default.createElement(Grid.Col, null,
+                    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: "p2", weight: "semiBold", span: true }, t('bmi.question.glp1Awareness')), size: "lg", description: locale !== LOCALE.Malaysia && (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" },
+                                    React__default.createElement(Radio, { size: "sm", value: "1", label: React__default.createElement(Text, { size: "p2" }, t('switchBtn.yes')), styles: radioStyle }),
+                                    React__default.createElement(Radio, { size: "sm", value: "0", label: React__default.createElement(Text, { size: "p2" }, t('switchBtn.no')), styles: radioStyle }))));
+                        } }))),
+            React__default.createElement(Box, { className: clsx(formWrapperClasses.newsletterBlock, cardWrapperClasses.newsletterBlock) },
+                React__default.createElement(Grid, { gutter: 8, px: 16, py: 12 },
+                    React__default.createElement(Grid.Col, null,
+                        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: "p2" }, t('bmi.newsletter.label')), onChange: (e) => onChange(e.currentTarget.checked), name: name, checked: !!value }, field)));
+                            } })),
+                    React__default.createElement(Grid.Col, null,
+                        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", fullWidth: true }, submitProps), t('bmi.submit'))))))) : (React__default.createElement(Box, { px: 16, sx: { paddingBottom: 8 } },
+            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", fullWidth: true }, submitProps), t('bmi.submit'))))));
 };
 
 var useStyles = createStyles((theme) => {
     return {
         newsletterBlock: {
             backgroundColor: theme.colors.neutral[0],
-            padding: `${rem(16)} 0`,
             borderBottomLeftRadius: 'inherit',
             borderBottomRightRadius: 'inherit',
             '.bmi-btn': {
                 marginTop: 0,
             },
         },
+        inputRightSection: {
+            fontSize: rem(13),
+            lineHeight: rem(24),
+            color: theme.colors.gray[4],
+            justifyContent: 'flex-end',
+            paddingRight: 8,
+        },
     };
 });
 
@@ -172,7 +182,7 @@ const InlineForm = (props) => {
                             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.FormRow, { className: clsx(wrapperClasses.submitWrapper) },
-                    React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default.createElement(HealthToolFormWrapper.FormRow, { className: clsx(formWrapperClasses.newsletterBlock, wrapperClasses.newsletterBlock) },
+                    React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: clsx('bmi-btn bmi--btn-submit', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))))) : (React__default.createElement(HealthToolFormWrapper.FormRow, { py: 16, className: clsx(formWrapperClasses.newsletterBlock, wrapperClasses.newsletterBlock) },
                 React__default.createElement(Stack, { spacing: 16 },
                     React__default.createElement(Controller, { name: "newsletter", control: control, rules: (_h = bmiGenerated.newsletter) === null || _h === void 0 ? void 0 : _h.rule, render: (_a) => {
                             var _b = _a.field, { value, onChange, name } = _b, field = __rest(_b, ["value", "onChange", "name"]);

package/build/esm/{index-eda8f4c9.js → index-f1bf0f5f.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-4c2b392a.js';
+import { _ as __rest } from './tslib.es6-b66d75db.js';
 import React__default, { useContext, useState } from 'react';
-import { T as TogetherComponentGlobalContext } from './utils-ffe8c9cf.js';
+import { T as TogetherComponentGlobalContext } from './utils-76c91d9e.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-f1e54630.js → index-f1c794c6.js}

@@ -2,10 +2,10 @@ import * as React from 'react';
 import React__default from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { T as Text } from './index-e06a7c13.js';
+import { T as Text } from './index-7f4a3be0.js';
 import classNames from 'classnames';
-import { I as ImageWrap } from './index-09da7cf5.js';
-import { T as Text$1 } from './index-9181155e.js';
+import { I as ImageWrap } from './index-c95bb41b.js';
+import { T as Text$1 } from './index-8eb56567.js';
 
 /* eslint-disable prettier/prettier */
 const ArrowRightBlue = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 6 10", fill: "none" }, props),
@@ -43,7 +43,7 @@ const InsuranceList = ({ insurances, className, isName = true, }) => {
         return null;
     return (React__default.createElement(StyledInsuranceList, { id: "insurance-list", className: className }, insurances.map((insurance) => (React__default.createElement(StyledInsuranceItem, { className: "insuranceItem", key: insurance.id },
         React__default.createElement("div", { className: "insuranceLogo" },
-            React__default.createElement("img", { src: insurance.logo, alt: `Logo of ${insurance.name}` })),
+            React__default.createElement("img", { src: insurance.logo, alt: insurance.name || 'insurance-logo' })),
         isName && (React__default.createElement(Text, { size: "base", color: theme.colors.gray500, type: "bold" }, insurance.name)))))));
 };
 

package/build/esm/{index-2d6472a6.js → index-f36317a6.js}

@@ -1,10 +1,10 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import './index-633b28cc.js';
+import './index-be0a2a5d.js';
 import { siteHost, siteOptions, COUNTRY_CURRENCY_SYMBOL } from './constantsSite.js';
 import { domainLocales, MAP_DOMAIN_BY_LOCALE } from './constantsDomainLocales.js';
 import { RISK_SCREENER_NAME, RISK_SCREENER_SLUG } from './constantsRiskScreener.js';
 import { isProduction } from './constantsIsProduction.js';
-import { L as LOCALE } from './Locale-0e687ff5.js';
+import { L as LOCALE } from './Locale-b6f4abea.js';
 
 const basePath = process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'tl-PH' ? '/fil' : '';
 const SSO_URL = process.env.NEXT_PUBLIC_SSO;

package/build/esm/{index-9451b322.js → index-f6ef3b0d.js}

@@ -1,49 +1,49 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-4c2b392a.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-b66d75db.js';
 import * as React from 'react';
 import React__default, { useContext, useState, useCallback, useEffect, useMemo, useRef } from 'react';
-import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-c06c86b3.js';
-import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, V as VIDEO_LOCALES, c as LOCALE_HAS_COMMUNITY_SITE, C as CARE_LOCALES } from './index-2d6472a6.js';
-import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-4e7809ca.js';
-import { f as formatCommunity, a as formatPost } from './dataTransform-c567e3d6.js';
+import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-ae86b9be.js';
+import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, V as VIDEO_LOCALES, c as LOCALE_HAS_COMMUNITY_SITE, C as CARE_LOCALES } from './index-f36317a6.js';
+import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-6608fe9d.js';
+import { f as formatCommunity, a as formatPost } from './dataTransform-55b4fb41.js';
 import { Close, Logo } from '@hhgtech/icons/core';
-import './translationsContext-ec597c09.js';
+import './translationsContext-7867723c.js';
 import styled from '@emotion/styled';
-import { I as Input } from './index-03963d37.js';
+import { I as Input } from './index-98006352.js';
 import { theme } from './miscTheme.js';
-import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-8d7f1f71.js';
+import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-a83c2556.js';
 import { ArrowRight, ChatAi } from '@hhgtech/icons/other';
 import { createStyles, Box, Indicator, useMantineTheme, clsx } from '@mantine/core';
-import { L as Logo$1 } from './index-81fbf719.js';
+import { L as Logo$1 } from './index-b51b8102.js';
 import throttle from 'lodash/throttle';
 import '@mantine/dates';
-import { V as VideoType } from './index-633b28cc.js';
-import { C as CommonGAssets } from './index-957ad8bc.js';
-import './index-6187b3e5.js';
-import { T as Text } from './index-9181155e.js';
-import { B as Button } from './index-dbe7d116.js';
-import './index-3770342b.js';
-import './index.styles-f9403cd8.js';
+import { V as VideoType } from './index-be0a2a5d.js';
+import { C as CommonGAssets } from './index-96dfb9cd.js';
+import './index-a22941c6.js';
+import { T as Text } from './index-8eb56567.js';
+import { B as Button } from './index-fac9ecc6.js';
+import './index-d0043174.js';
+import './index.styles-e50708f1.js';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-9da52e63.js';
-import './index-a4b6228d.js';
-import { L as LOCALISED_SLUGS } from './constants-4c2763d4.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-aa9aa06b.js';
-import { I as Indicator$1 } from './index-a66798d9.js';
-import { u as useTranslations } from './index-a6593fc5.js';
-import { u as useIsInit } from './useIsInit-19f924c2.js';
-import { L as LOCALIZED_SLUGS } from './constants-3db9e07a.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-409a83b1.js';
+import './index-a39e6bf0.js';
+import { L as LOCALISED_SLUGS } from './constants-3204ec0c.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-0838adad.js';
+import { I as Indicator$1 } from './index-bb525ff2.js';
+import { u as useTranslations } from './index-49b79390.js';
+import { u as useIsInit } from './useIsInit-16065802.js';
+import { L as LOCALIZED_SLUGS } from './constants-18ee7aac.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { B as Button$1 } from './index-9bf109b8.js';
-import { H as Heading } from './index-3addb19f.js';
+import { B as Button$1 } from './index-0a23d5b7.js';
+import { H as Heading } from './index-7fac5711.js';
 import formatString from 'string-format';
 import { domainLocales } from './constantsDomainLocales.js';
-import { C as Container } from './index-beb3ccde.js';
+import { C as Container } from './index-b620255d.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { U as UserAvatar } from './index-eda8f4c9.js';
-import { L as LOCALE } from './Locale-0e687ff5.js';
+import { U as UserAvatar } from './index-f1bf0f5f.js';
+import { L as LOCALE } from './Locale-b6f4abea.js';
 import debounce from 'lodash/debounce';
-import { g as getDataWithCache } from './core-9caa0114.js';
+import { g as getDataWithCache } from './core-55b3b3b0.js';
 
 const HamburgerWhite = (props) => (React.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React.createElement("path", { d: "M4 12H20", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -1074,6 +1074,7 @@ const StyledImageCard$2 = styled.div `
   ${MediaQueries.tdDown} {
     width: 72px;
     padding-top: 100px;
+    flex-shrink: 0;
   }
 `;
 const StyledButton = styled.a `

package/build/esm/{index-d21d8696.js → index-f726e7ba.js}

@@ -1,6 +1,6 @@
-import { c as cookie } from './index-d589b8b4.js';
-import { B as BEARER_TOKEN_COOKIE } from './index-2d6472a6.js';
-import { N as NodeIntentType } from './index-633b28cc.js';
+import { c as cookie } from './index-d8f6854d.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-f36317a6.js';
+import { N as NodeIntentType } from './index-be0a2a5d.js';
 import Cookies from 'js-cookie';
 import { v4 } from 'uuid';
 import { isProduction } from './constantsIsProduction.js';

package/build/esm/{index-dbe7d116.js → index-fac9ecc6.js}

@@ -1,8 +1,8 @@
-import { _ as __rest } from './tslib.es6-4c2b392a.js';
+import { _ as __rest } from './tslib.es6-b66d75db.js';
 import React__default, { forwardRef } from 'react';
 import { createStyles, getStylesRef, useMantineTheme, Button as Button$1 } from '@mantine/core';
-import { A as ANIMATION_DURATION } from './shared-93e28ff6.js';
-import { C as CustomStylesType, F as FontWeight, u as useTemplateVariant } from './index-3770342b.js';
+import { A as ANIMATION_DURATION } from './shared-d47dca0e.js';
+import { C as CustomStylesType, F as FontWeight, u as useTemplateVariant } from './index-d0043174.js';
 
 var useStyles = createStyles((_theme, _params) => {
     var _a, _b, _c, _d, _e, _f;