@hhgtech/hhg-components 1.29.446 → 1.29.448

package/build/esm/i18n-values/vi-VN_MB.js

@@ -127,10 +127,14 @@ var mbTranslations = {
 	"bmi.heightInput": "Bạn cao bao nhiêu?",
 	"bmi.heightInput.desc": "(cm)",
 	"bmi.heightInput.error": "Vui lòng nhập chiều cao chính xác",
+	"bmi.newsletter.label": "Nhận tư vấn giảm cân hiệu quả: Cập nhật phương pháp điều trị và hỗ trợ từ chuyên gia qua email.",
 	"bmi.objective": "Mục tiêu của bạn",
 	"bmi.objective.gainWeight": "Phát triển cơ bắp",
 	"bmi.objective.loseWeight": "Giảm mỡ thừa",
 	"bmi.objective.maintainWeight": "Duy trì cân nặng",
+	"bmi.question.glp1Awareness": "Bạn biết về thuốc GLP-1 chưa?",
+	"bmi.question.glp1Awareness.desc": "Đây là nhóm thuốc giúp kiểm soát cân nặng bằng cách giảm cảm giác thèm ăn và làm chậm quá trình tiêu hoá.",
+	"bmi.question.weightLossSupport": "Bạn quan tâm đến điều trị, hỗ trợ giảm cân không?",
 	"bmi.result.healthy": "Khỏe mạnh",
 	"bmi.result.overweight": "Thừa cân",
 	"bmi.result.underweight": "Thiếu cân",
@@ -342,6 +346,7 @@ var mbTranslations = {
 	"gender.female": "Nữ",
 	"gender.girl": "Bé gái",
 	"gender.male": "Nam",
+	"genderOptsSelectControl.placeholder": "Chọn",
 	"healthToolPNModal.back": "Quay lại",
 	"healthToolPNModal.findMore.chooseFav": "Các chủ đề yêu thích khác của bạn",
 	"healthToolPNModal.finish": "Hoàn tất",
@@ -353,6 +358,8 @@ var mbTranslations = {
 	"healthToolPNModal.yourPre": "Chủ đề bạn yêu thích",
 	"healthTools.dueDateCalculator": "Công cụ tính ngày dự sinh",
 	"healthTools.ovulationCalculator": "Công cụ tính ngày rụng trứng",
+	"healthToolsForm.editInProfile": "Sửa thông tin",
+	"healthToolsForm.label.yourBirthday": "Ngày sinh của bạn",
 	"healthtool.placeholder.age": "Số tuổi",
 	"home.calcWithApp": "Tính ngay với Hello Bacsi app",
 	"home.menu.category.view": "Xem {category}",

package/build/esm/i18n-values/zh-SG.js

@@ -127,10 +127,14 @@ var zhSGTranslations = {
 	"bmi.heightInput": "您的身高？",
 	"bmi.heightInput.desc": "（公分）",
 	"bmi.heightInput.error": "请输入合理的身高范围",
+	"bmi.newsletter.label": "保持关注，轻松减重：获取有关减重治疗和支持的专家资讯，直接发送到您的邮箱。",
 	"bmi.objective": "目标",
 	"bmi.objective.gainWeight": "增肌",
 	"bmi.objective.loseWeight": "减脂",
 	"bmi.objective.maintainWeight": "维持体重",
+	"bmi.question.glp1Awareness": "您是否了解 GLP-1 治疗？",
+	"bmi.question.glp1Awareness.desc": "这是一类通过抑制食欲和减缓消化来帮助体重管理的药物。",
+	"bmi.question.weightLossSupport": "您是否对减重治疗/支持感兴趣？",
 	"bmi.result.healthy": "体重正常",
 	"bmi.result.overweight": "体重过重",
 	"bmi.result.underweight": "体重过轻",
@@ -342,6 +346,7 @@ var zhSGTranslations = {
 	"gender.female": "女性",
 	"gender.girl": "女生",
 	"gender.male": "男性",
+	"genderOptsSelectControl.placeholder": "选择",
 	"healthToolPNModal.back": "返回",
 	"healthToolPNModal.findMore.chooseFav": "从您喜欢的主题中选择",
 	"healthToolPNModal.finish": "完成",
@@ -353,6 +358,8 @@ var zhSGTranslations = {
 	"healthToolPNModal.yourPre": "您的偏好",
 	"healthTools.dueDateCalculator": "预产期计算机",
 	"healthTools.ovulationCalculator": "排卵期计算机",
+	"healthToolsForm.editInProfile": "在个人档案中编辑",
+	"healthToolsForm.label.yourBirthday": "您的生日日期",
 	"healthtool.placeholder.age": "您的年龄",
 	"home.calcWithApp": "在Hello 健康程序内计算",
 	"home.menu.category.view": "查看类别：{category}",

package/build/esm/i18n-values/zh-TW.js

@@ -127,10 +127,14 @@ var zhTranslations = {
 	"bmi.heightInput": "你的身高？",
 	"bmi.heightInput.desc": "（公分）",
 	"bmi.heightInput.error": "請輸入合理的身高範圍",
+	"bmi.newsletter.label": "關鍵新知不漏接！接收最新的減重趨勢與實用建議，幫你保持最佳狀態。",
 	"bmi.objective": "目標",
 	"bmi.objective.gainWeight": "增加肌肉",
 	"bmi.objective.loseWeight": "減少體脂肪",
 	"bmi.objective.maintainWeight": "維持體重",
+	"bmi.question.glp1Awareness": "您聽過 GLP-1 腸泌素減重嗎？",
+	"bmi.question.glp1Awareness.desc": "*GLP‑1 是一種腸泌素受體促效劑，最初用於治療第二型糖尿病，但因為其抑制食慾、延緩胃排空、並提升飽足感的效果，經衛生主管機關核可後，也被用來治療減重（各藥廠有不同品名，民間慣稱為「瘦瘦針」）。",
+	"bmi.question.weightLossSupport": "您有興趣了解減重治療或其他減重方法嗎？",
 	"bmi.result.healthy": "體重正常",
 	"bmi.result.overweight": "過重",
 	"bmi.result.underweight": "體重過輕",
@@ -342,6 +346,7 @@ var zhTranslations = {
 	"gender.female": "女性",
 	"gender.girl": "女生",
 	"gender.male": "男性",
+	"genderOptsSelectControl.placeholder": "選擇",
 	"healthToolPNModal.back": "Back",
 	"healthToolPNModal.findMore.chooseFav": "Choose from your favorite topics\n",
 	"healthToolPNModal.finish": "完成",
@@ -353,6 +358,8 @@ var zhTranslations = {
 	"healthToolPNModal.yourPre": "Your preferences",
 	"healthTools.dueDateCalculator": "預產期計算機",
 	"healthTools.ovulationCalculator": "排卵期計算機",
+	"healthToolsForm.editInProfile": "在個人資料中編輯",
+	"healthToolsForm.label.yourBirthday": "您的生日",
 	"healthtool.placeholder.age": "您的年齡",
 	"home.calcWithApp": "Calculate on Hello Bacsi app",
 	"home.menu.category.view": "查看類別：{category}",
@@ -388,7 +395,7 @@ var zhTranslations = {
 	"home.navigator.menuItem.allHealthTools": "看所有健康小工具",
 	"home.navigator.menuItem.allSpecialties": "All specialties",
 	"home.navigator.menuItem.allSpotlight": "看更多主題",
-	"home.navigator.menuItem.allVideos": "See All Videos",
+	"home.navigator.menuItem.allVideos": "查看所有影片",
 	"home.navigator.menuItem.discover": "探索",
 	"home.navigator.menuItem.healthCategories": "更多類別",
 	"home.navigator.menuItem.healthTools": "健康小工具",
@@ -400,8 +407,8 @@ var zhTranslations = {
 	"home.navigator.menuItem.new": "new",
 	"home.navigator.menuItem.specialties": "Specialties",
 	"home.navigator.menuItem.spotlights": "所有主題",
-	"home.navigator.menuItem.video": "Video",
-	"home.navigator.menuItem.videoCategories": "Video Categories",
+	"home.navigator.menuItem.video": "影片",
+	"home.navigator.menuItem.videoCategories": "影片分類",
 	"home.search": "搜尋{site}",
 	"home.seeAll": "看全部",
 	"home.seeAllCategories": "看更多",

package/build/esm/i18n.js

@@ -1,5 +1,5 @@
-export { T as TranslationsContext } from './translationsContext-75fd6255.js';
-export { T as TranslationsProvider, t as translationsMap } from './translationsProvider-b3f26828.js';
+export { T as TranslationsContext } from './translationsContext-581baa38.js';
+export { T as TranslationsProvider, t as translationsMap } from './translationsProvider-dcc4d62b.js';
 import 'react';
 import './i18n-values/en-PH.js';
 import './i18n-values/hi-IN.js';

package/build/esm/i18nV2.js

@@ -1,5 +1,5 @@
-import { T as TranslationsContext } from './translationsContext-75fd6255.js';
-export { T as TranslationsContext } from './translationsContext-75fd6255.js';
+import { T as TranslationsContext } from './translationsContext-581baa38.js';
+export { T as TranslationsContext } from './translationsContext-581baa38.js';
 import React__default, { useMemo } from 'react';
 
 const TranslationsProvider = ({ locale = 'en-PH', values, children, }) => {

package/build/esm/icons/Pin3.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+declare const Pin3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default Pin3;

package/build/esm/{index-a0b38a9f.js → index-011585c5.js}

@@ -1,53 +1,53 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-d3d6775d.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-91093dfb.js';
 import React__default, { createContext, useState, useContext, useEffect } from 'react';
-import { T as Tabs } from './index-c9a58600.js';
-import { L as Loading } from './index-41f9bb30.js';
-import './index-8d856dbb.js';
-import { g as formatArticle } from './dataTransform-76dc08c5.js';
+import { T as Tabs } from './index-92ea8383.js';
+import { L as Loading } from './index-a4d8dbc0.js';
+import './index-5d09fff6.js';
+import { g as formatArticle } from './dataTransform-eec5e584.js';
 import { PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-b8fd4daf.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-cd8ba782.js';
 import { Minus, Plus } from '@hhgtech/icons/core';
 import { Collapse } from '@mantine/core';
-import { C as CardAuthor } from './index-99bc575e.js';
-import { L as LOCALE } from './Locale-32ee16f4.js';
+import { C as CardAuthor } from './index-e0ef6db8.js';
+import { L as LOCALE } from './Locale-bb880082.js';
 import '@hhgtech/icons/other';
-import './index-d5633020.js';
-import './shared-c425d00b.js';
-import './text-eced7441.js';
-import './index-6a5e3a6f.js';
-import './index-be5a7659.js';
-import './translationsContext-75fd6255.js';
-import './index-26e83ed6.js';
-import './index-25c07a74.js';
+import './index-cc305f99.js';
+import './shared-16fcefec.js';
+import './text-db324baf.js';
+import './index-c68a533e.js';
+import './index-64827257.js';
+import './translationsContext-581baa38.js';
+import './index-341ed865.js';
+import './index-24fb3416.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import './constantsIsProduction.js';
 import 'string-format';
-import './constants-e8330298.js';
+import './constants-78e39ac0.js';
 import 'dayjs';
 import 'dayjs/plugin/relativeTime';
-import './utils-9ecd77e3.js';
-import './index-df75f887.js';
-import './paths-6de429eb.js';
-import './constants-f2cb363e.js';
-import './index-8c223288.js';
+import './utils-54809471.js';
+import './index-b4c8b075.js';
+import './paths-eaeaed07.js';
+import './constants-bddfc09c.js';
+import './index-43c88049.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
-import './index-6efd8f7a.js';
+import './index-fc84a739.js';
 import './miscTheme.js';
-import './WhatsApp-c768bcd2.js';
-import './Spinner-1701207a.js';
-import './index-f66e8ba1.js';
+import './WhatsApp-f52e7a45.js';
+import './Spinner-8b8558fa.js';
+import './index-7b4efb28.js';
 import '@emotion/styled';
-import './index-3079db33.js';
-import './index-c169de32.js';
-import './index-a39845d4.js';
+import './index-9a3adb7b.js';
+import './index-a35d5bd3.js';
+import './index-4ad33a18.js';
 import '@emotion/react';
-import './index-500479f6.js';
-import './index-b52c7f54.js';
-import './index.styles-2d06e686.js';
+import './index-602c10bf.js';
+import './index-9676d497.js';
+import './index.styles-e737cd1b.js';
 
 const ProfileDetailContext = createContext({});
 

package/build/esm/{index-569114a4.js → index-033aae54.js}

@@ -1,20 +1,20 @@
-import { _ as __rest } from './tslib.es6-d3d6775d.js';
+import { _ as __rest } from './tslib.es6-91093dfb.js';
 import React__default from 'react';
 import { createStyles, rem, Box } from '@mantine/core';
-import './index-fbcce178.js';
+import './index-94204073.js';
 import '@mantine/dates';
-import './index-8c223288.js';
-import './index-8d856dbb.js';
-import './index-c169de32.js';
-import './index-8dfda23b.js';
-import { T as Text } from './index-6a5e3a6f.js';
-import { B as Button } from './index-d5633020.js';
-import './index.styles-2d06e686.js';
-import { u as useTranslations } from './index-be5a7659.js';
+import './index-43c88049.js';
+import './index-5d09fff6.js';
+import './index-a35d5bd3.js';
+import './index-2870af04.js';
+import { T as Text } from './index-c68a533e.js';
+import { B as Button } from './index-cc305f99.js';
+import './index.styles-e737cd1b.js';
+import { u as useTranslations } from './index-64827257.js';
 import '@mantine/hooks';
-import './text-eced7441.js';
-import './utils-9ecd77e3.js';
-import './index-c9a58600.js';
+import './text-db324baf.js';
+import './utils-54809471.js';
+import './index-92ea8383.js';
 
 var useStyles = createStyles((theme, { hasOnClickFn }) => {
     return {

package/build/esm/index-09024936.js

@@ -0,0 +1,207 @@
+import { _ as __rest, a as __awaiter } from './tslib.es6-91093dfb.js';
+import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { u as useHealthToolsCache } from './useHealthToolCache-b63178ff.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-78e39ac0.js';
+import { Flex, rem, Stack, Box } from '@mantine/core';
+import { G as GenderOptionControl } from './index-bd65bdb6.js';
+import { I as Input, R as Radio, c as ErrorLabel, d as Checkbox } from './index-94204073.js';
+import '@mantine/dates';
+import './index-43c88049.js';
+import './index-5d09fff6.js';
+import './index-a35d5bd3.js';
+import './index-2870af04.js';
+import { T as Text } from './index-c68a533e.js';
+import './index-cc305f99.js';
+import { theme } from './miscTheme.js';
+import './index.styles-e737cd1b.js';
+import { u as useTranslations } from './index-64827257.js';
+import '@mantine/hooks';
+import './text-db324baf.js';
+import './utils-54809471.js';
+import './index-92ea8383.js';
+import { H as HealthToolFormWrapper } from './index-6c0a8369.js';
+import { L as LOCALE } from './Locale-bb880082.js';
+import { domainLocales } from './constantsDomainLocales.js';
+import { getBmi } from './embeddedHeathToolCards_helpers.js';
+
+const BmiFormContext = createContext({});
+
+const DefaultForm = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { t, locale } = useTranslations();
+    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 }));
+            } }),
+        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(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(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(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, _e, _f, _g;
+    const { t, locale } = useTranslations();
+    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) },
+                    React__default.createElement(GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default.createElement(React__default.Fragment, null) : '', onChange: onChange })));
+            } }),
+        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(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
+                    React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                            content: '25',
+                        }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
+                            rightSection: {
+                                width: 'auto',
+                            },
+                        }) })));
+            } }),
+        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(HealthToolFormWrapper.FormRow, null,
+                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput') },
+                        React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
+                                content: locale === LOCALE.Myanmar ? 6 : 170,
+                            }), name: name, value: value, onChange: onChange, min: 0, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('bmi.heightInput.desc')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        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(HealthToolFormWrapper.FormRow, null,
+                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput') },
+                        React__default.createElement(Input.Number, { 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) ? React__default.createElement(React__default.Fragment, null) : '', precision: 1, min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('bmi.weightInput.desc')) })),
+                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
+            } }),
+        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, withAdditionalQuestion } = _a, rest = __rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps", "withAdditionalQuestion"]);
+    const [isTouched, setIsTouched] = useState(false);
+    const { control, handleSubmit, setValue, watch } = useForm({
+        defaultValues: {
+            question1: undefined,
+            question2: undefined,
+            newsletter: true,
+        },
+    });
+    const data = watch();
+    const { locale } = useTranslations();
+    const { getHealthToolLink } = useHealthToolsCache(locale);
+    const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
+    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 = Object.assign(Object.assign({}, data), { height,
+            weight, bmi: getBmi({ height, weight }) });
+        onInValid();
+        onSubmitProps && onSubmitProps(submitValue);
+    });
+    const onInValid = () => {
+        setIsTouched(true);
+    };
+    useEffect(() => {
+        Object.keys(valueProps || {}).forEach((k) => {
+            const key = k;
+            setValue(key, valueProps === null || valueProps === void 0 ? void 0 : valueProps[key], {
+                shouldTouch: false,
+                shouldDirty: false,
+                shouldValidate: false,
+            });
+        });
+    }, [valueProps]);
+    useEffect(() => {
+        onChangeProps && onChangeProps(data);
+    }, [data]);
+    const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
+    return (React__default.createElement(BmiFormContext.Provider, { value: {
+            control,
+            bmiGenerated,
+            isTouched,
+            linkTool,
+            submitProps,
+            withAdditionalQuestion,
+        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+export { BmiForm as B };

package/build/esm/{index-dd96d14b.js → index-0a5c217f.js}

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import React__default, { useState, useRef, createContext, useEffect, Fragment, forwardRef, useMemo, useCallback } from 'react';
-import { T as Text } from './index-6a5e3a6f.js';
+import { T as Text } from './index-c68a533e.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-9ecd77e3.js';
+import { M as MediaQueries } from './utils-54809471.js';
 import { Collapse, rem, clsx } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { S as ShapedArrowDown } from './index-29f80af7.js';
-import { R as Radio$1 } from './index-fbcce178.js';
-import { _ as __rest, a as __awaiter } from './tslib.es6-d3d6775d.js';
-import { T as Text$1 } from './index-38e9a9f0.js';
+import { S as ShapedArrowDown } from './index-ea0f1051.js';
+import { R as Radio$1 } from './index-94204073.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-91093dfb.js';
+import { T as Text$1 } from './index-a45be0c7.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import flattenChildren from 'react-keyed-flatten-children';
-import { H as Heading } from './index-500479f6.js';
-import { C as Close } from './Close-c7a9ee94.js';
-import { u as useTranslations } from './index-be5a7659.js';
+import { H as Heading } from './index-602c10bf.js';
+import { C as Close } from './Close-94e1dd74.js';
+import { u as useTranslations } from './index-64827257.js';
 import { Carousel } from '@mantine/carousel';
 
 var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
@@ -228,23 +228,23 @@ const StyledCardCollapse = styled.div `
     line-height: 1.5rem;
     flex-grow: 1;
   }
-`;
-const StyledBox = styled.div `
-  display: flex;
-  padding: 1.5rem 1rem 1rem 1rem;
-  gap: 0.75rem;
-  align-items: center;
+  .box-collapse {
+    display: flex;
+    padding: 1.5rem 1rem 1rem 1rem;
+    gap: 0.75rem;
+    align-items: center;
+  }
 `;
 
-function CardCollapse({ children, title, icon, defaultOpened = true, haveCollapse = true, id, }) {
+function CardCollapse({ children, title, icon, defaultOpened = true, haveCollapse = true, id, className, }) {
     const [opened, { toggle }] = useDisclosure(defaultOpened);
     const handleClick = () => {
         if (haveCollapse) {
             toggle();
         }
     };
-    return (React__default.createElement(StyledCardCollapse, { id: id },
-        React__default.createElement(StyledBox, { onClick: handleClick },
+    return (React__default.createElement(StyledCardCollapse, { id: id, className: className },
+        React__default.createElement("div", { className: "box-collapse", onClick: handleClick },
             haveCollapse && icon,
             React__default.createElement("div", { className: "title-collapse" }, title),
             haveCollapse && React__default.createElement(StyledArrowDownIcon, { "data-is-collapsed": opened })),

package/build/esm/{index-86781055.js → index-0ad840cc.js}

@@ -1,27 +1,27 @@
 import React__default from 'react';
-import { C as Container } from './index-5e0f8076.js';
+import { C as Container } from './index-af7af639.js';
 import dayjs from 'dayjs';
-import './index-8c223288.js';
-import './index-fbcce178.js';
+import './index-43c88049.js';
+import './index-94204073.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-8d856dbb.js';
-import './index-c169de32.js';
-import './index-8dfda23b.js';
-import { T as Text } from './index-6a5e3a6f.js';
-import './index-d5633020.js';
-import './index.styles-2d06e686.js';
-import './translationsContext-75fd6255.js';
+import './index-5d09fff6.js';
+import './index-a35d5bd3.js';
+import './index-2870af04.js';
+import { T as Text } from './index-c68a533e.js';
+import './index-cc305f99.js';
+import './index.styles-e737cd1b.js';
+import './translationsContext-581baa38.js';
 import '@mantine/hooks';
-import './text-eced7441.js';
-import { M as MediaQueries } from './utils-9ecd77e3.js';
-import './index-c9a58600.js';
-import { u as useScreenSize } from './index-3079db33.js';
+import './text-db324baf.js';
+import { M as MediaQueries } from './utils-54809471.js';
+import './index-92ea8383.js';
+import { u as useScreenSize } from './index-9a3adb7b.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { domainLocales } from './constantsDomainLocales.js';
-import { L as Logo } from './index-fbcd74ff.js';
-import { M as MarryBabyText } from './index-2f98772e.js';
+import { L as Logo } from './index-5179d870.js';
+import { M as MarryBabyText } from './index-20707afb.js';
 
 const StyledFooter$1 = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-9577f036.js → index-1457df3c.js}

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

package/build/esm/{index-1b5a6f55.js → index-14ddbaca.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-d3d6775d.js';
+import { _ as __rest } from './tslib.es6-91093dfb.js';
 import React__default, { useState, useCallback, useMemo, useEffect } from 'react';
 import { clsx } from '@mantine/core';
 import { Drawer } from 'vaul';
 import styled from '@emotion/styled';
-import { Z as ZINDEX_SSO } from './index-8c223288.js';
+import { Z as ZINDEX_SSO } from './index-43c88049.js';
 
 const TIME_FOR_MOTION = 300;
 const useDrawerDrag = (motionDelay = TIME_FOR_MOTION) => {