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

package/build/{index-fa93d808.js → index-93af1deb.js}

@@ -1,22 +1,23 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a0b3636d.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-var LastPeriod = require('./LastPeriod-6e9d0598.js');
-var index$3 = require('./index-8128ad91.js');
-var index$2 = require('./index-b715f592.js');
-var index$4 = require('./index-4ecc708d.js');
-require('./index-edff4458.js');
-require('./index.styles-9aebaca8.js');
-var index = require('./index-aaf078ac.js');
+var LastPeriod = require('./LastPeriod-e05c9350.js');
+var index$3 = require('./index-9f5fbdee.js');
+var index$2 = require('./index-75ddddca.js');
+var index$4 = require('./index-ecaaab9e.js');
+require('./index-2d80a747.js');
+require('./index-4b72550f.js');
+require('./index.styles-80bf0384.js');
+var index = require('./index-11edad6f.js');
 require('@mantine/hooks');
-require('./index-cb14a9dc.js');
-require('./text-4cc51fce.js');
-require('./utils-2a996ffd.js');
-require('./index-cbebb87e.js');
-var index$1 = require('./index-2952ef30.js');
+require('./index-93c1da83.js');
+require('./utils-b1545b34.js');
+require('./index-01c0a05b.js');
+var context = require('./context-4b2abfb2.js');
+var index$1 = require('./index-e3aeb6a1.js');
 var other = require('@hhgtech/icons/other');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -78,28 +79,37 @@ const DefaultLayout = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t } = index.useTranslations();
     const { currentUrl, submitProps, form, calculatingMethods, isMobile } = React.useContext(OvulationFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Control, null,
-            React__default["default"].createElement(index$1.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods, label: t('dueDatePage.calculationMethod'), isMobile: isMobile }, form.getInputProps('calculatorType')))),
-        React__default["default"].createElement(index$2.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
-                withinPortal: true,
-            }, label: t('dueDatePage.lastPeriod.lastPeriodLabel'), maxDate: new Date() }, form.getInputProps('lastPeriodDate'))),
-        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: `${t('ovulationPage.cycleLength')} (${t('ovulationPage.dayUnit')})`, min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'))),
-        React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: `${t('ovulationPage.periodDuration')} (${t('ovulationPage.dayUnit')})`, min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Control, null,
+                React__default["default"].createElement(index$1.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods, label: t('dueDatePage.calculationMethod'), isMobile: isMobile }, form.getInputProps('calculatorType'))))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$2.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
+                    withinPortal: true,
+                }, label: t('dueDatePage.lastPeriod.lastPeriodLabel'), maxDate: new Date() }, form.getInputProps('lastPeriodDate')))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: `${t('ovulationPage.cycleLength')} (${t('ovulationPage.dayUnit')})`, min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength')))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: `${t('ovulationPage.periodDuration')} (${t('ovulationPage.dayUnit')})`, min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength')))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const InlineLayout = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t } = index.useTranslations();
     const { currentUrl, submitProps, form, calculatingMethods } = React.useContext(OvulationFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.calculationMethod'), direction: "column", width: '100%' },
-            React__default["default"].createElement(index$1.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType')))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
-            React__default["default"].createElement(index$2.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
-                    withinPortal: true,
-                }, maxDate: new Date() }, form.getInputProps('lastPeriodDate')))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.calculationMethod'), direction: "column", width: '100%' },
+                React__default["default"].createElement(index$1.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType'))))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
+                React__default["default"].createElement(index$2.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date() }, form.getInputProps('lastPeriodDate'))))),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit') },
                 React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'), { error: null }))),
@@ -108,7 +118,8 @@ const InlineLayout = (_a) => {
             React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit') },
                 React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'), { error: null }))),
             form.errors.periodLength && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.periodLength))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };
 
 const MbLayout = (_a) => {

package/build/{index-cb14a9dc.js → index-93c1da83.js}

@@ -1,18 +1,18 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a0b3636d.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var dayjs = require('dayjs');
-require('./index-c0083606.js');
-var Locale = require('./Locale-0044edae.js');
+require('./index-c4c50d31.js');
+var Locale = require('./Locale-e810a743.js');
 var notifications = require('@mantine/notifications');
-var index = require('./index-d8b7b7c8.js');
+var index$1 = require('./index-b319bb8a.js');
 var core = require('@mantine/core');
-var index$1 = require('./index-7fd03876.js');
+var index$2 = require('./index-e04d610b.js');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-2a996ffd.js');
-var text = require('./text-4cc51fce.js');
-var shared = require('./shared-25c64a9a.js');
+var utils = require('./utils-b1545b34.js');
+var index = require('./index-4b72550f.js');
+var shared = require('./shared-31d5d1ed.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -80,16 +80,17 @@ const useMantineLocale = (locale) => {
     };
 };
 
-const GlobalButtonStyle = (version = text.CustomStylesType.NONE) => ({
+const GlobalButtonStyle = () => ({
     Button: {
-        defaultProps: Object.assign({ variant: 'primary', size: 'md' }, (version === text.CustomStylesType.LEADGEN && {
-            radius: 12,
-        })),
+        defaultProps: {
+            variant: 'primary',
+            size: 'md',
+        },
     },
 });
 
 const themeColors$1 = {
-    [text.CustomStylesType.NONE]: {
+    [index.CustomStylesType.NONE]: {
         hb: [
             '#e3f2ff',
             '#bcdeff',
@@ -259,7 +260,7 @@ const themeColors$1 = {
             '#8C2F39',
         ],
     },
-    [text.CustomStylesType.LEADGEN]: {
+    [index.CustomStylesType.LEADGEN]: {
         hb: [
             '#e3f2ff',
             '#bcdeff',
@@ -444,7 +445,7 @@ const WarningIcon = () => (React__default["default"].createElement("svg", { widt
     React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 1.66666C5.4 1.66666 1.66667 5.39999 1.66667 9.99999C1.66667 14.6 5.4 18.3333 10 18.3333C14.6 18.3333 18.3333 14.6 18.3333 9.99999C18.3333 5.39999 14.6 1.66666 10 1.66666ZM10 10.8333C9.54167 10.8333 9.16667 10.4583 9.16667 9.99999V6.66666C9.16667 6.20832 9.54167 5.83332 10 5.83332C10.4583 5.83332 10.8333 6.20832 10.8333 6.66666V9.99999C10.8333 10.4583 10.4583 10.8333 10 10.8333ZM9.16667 12.5V14.1667H10.8333V12.5H9.16667Z", fill: "#FE921D" })));
 
 function NotificationsHandler() {
-    return (React__default["default"].createElement(notifications.Notifications, { position: "top-right", zIndex: index.ZINDEX_SSO + 5, autoClose: 5000 }));
+    return (React__default["default"].createElement(notifications.Notifications, { position: "top-right", zIndex: index$1.ZINDEX_SSO + 5, autoClose: 5000 }));
 }
 const MappingColor = {
     success: 'green',
@@ -539,7 +540,7 @@ const headingStyles = {
     },
 };
 const getHeadingStyles = (options) => {
-    const { version = text.CustomStylesType.NONE, mbDown } = options || {};
+    const { version = index.CustomStylesType.NONE, mbDown } = options || {};
     const currentStyles = headingStyles[version] || {};
     return Object.fromEntries((currentStyles[mbDown ? 'mbDown' : 'default'] || []).map((style, index) => [
         `h${index + 1}`,
@@ -550,11 +551,11 @@ const getHeadingStyles = (options) => {
         },
     ]));
 };
-const GlobalHeadingStyle = (version = text.CustomStylesType.NONE) => {
+const GlobalHeadingStyle = (version = index.CustomStylesType.NONE) => {
     return {
         Title: {
             styles: {
-                root: Object.assign(Object.assign({ fontWeight: text.FontWeight.bold }, getHeadingStyles({
+                root: Object.assign(Object.assign({ fontWeight: index.FontWeight.bold }, getHeadingStyles({
                     version,
                 })), { [`&${utils.MediaQueries.mbDown}`]: Object.assign({}, getHeadingStyles({
                         version,
@@ -570,7 +571,7 @@ const GlobalInputStyle = (locale, version) => {
     return ({
         InputWrapper: {
             styles: {
-                label: Object.assign({ display: 'inline-flex', gap: 4, marginBottom: '0.25rem' }, (version === text.CustomStylesType.NONE && {
+                label: Object.assign({ display: 'inline-flex', gap: 4, marginBottom: '0.25rem' }, (version === index.CustomStylesType.NONE && {
                     fontWeight: 600,
                     fontSize: '14px',
                     lineHeight: '22px',
@@ -590,7 +591,7 @@ const GlobalInputStyle = (locale, version) => {
         },
         NumberInput: {
             defaultProps: {
-                decimalSeparator: (_a = index.ISO_FORMAT[locale]) === null || _a === void 0 ? void 0 : _a.separator,
+                decimalSeparator: (_a = index$1.ISO_FORMAT[locale]) === null || _a === void 0 ? void 0 : _a.separator,
             },
         },
         Input: {
@@ -601,17 +602,17 @@ const GlobalInputStyle = (locale, version) => {
                     ['&:not(.mantine-Textarea-input)']: Object.assign({}, (() => {
                         switch (size) {
                             case 'lg':
-                                return Object.assign({ height: 48, minHeight: 'unset' }, (version === text.CustomStylesType.NONE && {
+                                return Object.assign({ height: 48, minHeight: 'unset' }, (version === index.CustomStylesType.NONE && {
                                     fontSize: 16,
                                     lineHeight: '24px',
                                 }));
                             case 'md':
-                                return Object.assign({ height: 40, minHeight: 'unset' }, (version === text.CustomStylesType.NONE && {
+                                return Object.assign({ height: 40, minHeight: 'unset' }, (version === index.CustomStylesType.NONE && {
                                     fontSize: 14,
                                     lineHeight: '22px',
                                 }));
                             case 'sm':
-                                return Object.assign({ height: 32, minHeight: 'unset' }, (version === text.CustomStylesType.NONE && {
+                                return Object.assign({ height: 32, minHeight: 'unset' }, (version === index.CustomStylesType.NONE && {
                                     fontSize: 14,
                                     lineHeight: '22px',
                                 }));
@@ -651,13 +652,13 @@ const getGlobalRadioStyle = {
     },
 };
 
-const themeColors = themeColors$1[text.CustomStylesType.NONE];
+const themeColors = themeColors$1[index.CustomStylesType.NONE];
 const getMantineThemeOverride = (locale, template = 'hb', version) => {
     var _a;
     return {
         defaultRadius: template === 'hb' ? 8 : 16,
         cursorType: 'pointer',
-        colors: Object.assign(Object.assign(Object.assign({}, ((_a = themeColors$1[version]) !== null && _a !== void 0 ? _a : themeColors$1[text.CustomStylesType.NONE])), miscTheme.theme.colors), { toneYellow: '#fff9eb', toneGreen: '#f2fcf7', toneBlue: '#e0e9fb', tonePink: '#ffeaf1' }),
+        colors: Object.assign(Object.assign(Object.assign({}, ((_a = themeColors$1[version]) !== null && _a !== void 0 ? _a : themeColors$1[index.CustomStylesType.NONE])), miscTheme.theme.colors), { toneYellow: '#fff9eb', toneGreen: '#f2fcf7', toneBlue: '#e0e9fb', tonePink: '#ffeaf1' }),
         primaryColor: template,
         primaryShade: 6,
         fontFamily: (locale === Locale.LOCALE.Cambodia
@@ -673,11 +674,11 @@ const getMantineThemeOverride = (locale, template = 'hb', version) => {
             lg: core.em(utils.Breakpoints.BREAK_POINT_PC),
             xl: core.em(utils.Breakpoints.BREAK_POINT_LGPC),
         },
-        components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale, version)), getGlobalRadioStyle), GlobalButtonStyle(version)), GlobalHeadingStyle(version)), GlobalContainerStyle),
+        components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale, version)), getGlobalRadioStyle), GlobalButtonStyle()), GlobalHeadingStyle(version)), GlobalContainerStyle),
         other: {
             template,
             customStyleType: version,
-            defaultImage: index$1.CommonGAssets.getAssetPath(template === 'mb' ? 'default-image-mb.jpg' : 'default-image.jpg'),
+            defaultImage: index$2.CommonGAssets.getAssetPath(template === 'mb' ? 'default-image-mb.jpg' : 'default-image.jpg'),
         },
     };
 };

package/build/{index-68e72fb0.js → index-95690bf9.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index$1 = require('./index-75bb7acd.js');
-var index = require('./index-aaf078ac.js');
+var index$1 = require('./index-dfc3ed82.js');
+var index = require('./index-11edad6f.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');

package/build/{index-85844168.js → index-9eb75133.js}

@@ -1,26 +1,27 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-a0b3636d.js');
+var tslib_es6 = require('./tslib.es6-11c2580f.js');
 var React = require('react');
 var form = require('@mantine/form');
-var useHealthToolCache = require('./useHealthToolCache-3076b5c8.js');
-var index = require('./index-aaf078ac.js');
-var index$5 = require('./index-7fd03876.js');
-var constants = require('./constants-2d7796a3.js');
-var index$2 = require('./index-5905554c.js');
-var index$4 = require('./index-8128ad91.js');
-var index$3 = require('./index-b715f592.js');
-require('./index-4ecc708d.js');
-require('./index-edff4458.js');
+var useHealthToolCache = require('./useHealthToolCache-c9df74d6.js');
+var index = require('./index-11edad6f.js');
+var index$5 = require('./index-e04d610b.js');
+var constants = require('./constants-5d23f649.js');
+var index$2 = require('./index-1ebb7538.js');
+var index$4 = require('./index-9f5fbdee.js');
+var index$3 = require('./index-75ddddca.js');
+require('./index-ecaaab9e.js');
+require('./index-2d80a747.js');
 require('@mantine/core');
-require('./index.styles-9aebaca8.js');
+require('./index-4b72550f.js');
+require('./index.styles-80bf0384.js');
 require('@mantine/hooks');
-require('./index-cb14a9dc.js');
-require('./text-4cc51fce.js');
-require('./utils-2a996ffd.js');
-require('./index-cbebb87e.js');
-require('./index-d8b7b7c8.js');
-var index$1 = require('./index-2952ef30.js');
+require('./index-93c1da83.js');
+require('./utils-b1545b34.js');
+require('./index-01c0a05b.js');
+require('./index-b319bb8a.js');
+var context = require('./context-4b2abfb2.js');
+var index$1 = require('./index-e3aeb6a1.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -34,29 +35,35 @@ const DefaultForm = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t, locale } = index.useTranslations();
     const { isAdult, activeValueNote, linkTool, form, submitProps } = React.useContext(ThrFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
-        React__default["default"].createElement(index$2.GenderOptionControl, Object.assign({}, form.getInputProps('gender'))),
-        React__default["default"].createElement(index$3.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
-                withinPortal: true,
-            }, label: t('targetHeartRate.ageInput'), maxDate: new Date() })),
-        React__default["default"].createElement(index$4.Input.Number, Object.assign({ label: t('targetHeartRate.heartRateInput'), placeholder: t('tools.inputPlaceholder', {
-                content: '60',
-            }) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
-                rightSection: {
-                    width: 'auto',
-                },
-            }) })),
-        isAdult && (React__default["default"].createElement(index$4.Select, Object.assign({ label: t('targetHeartRate.selectActive'), defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
-                value: option.value,
-                label: option.label,
-            })), styles: {
-                item: {
-                    whiteSpace: 'nowrap',
-                    padding: '10px 12px',
-                    fontSize: '14px',
-                },
-            }, withinPortal: true }, form.getInputProps('activeValue')))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$2.GenderOptionControl, Object.assign({}, form.getInputProps('gender')))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$3.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
+                    withinPortal: true,
+                }, label: t('targetHeartRate.ageInput'), maxDate: new Date() }))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$4.Input.Number, Object.assign({ label: t('targetHeartRate.heartRateInput'), placeholder: t('tools.inputPlaceholder', {
+                    content: '60',
+                }) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
+                    rightSection: {
+                        width: 'auto',
+                    },
+                }) }))),
+        isAdult && (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$4.Select, Object.assign({ label: t('targetHeartRate.selectActive'), defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                    value: option.value,
+                    label: option.label,
+                })), styles: {
+                    item: {
+                        whiteSpace: 'nowrap',
+                        padding: '10px 12px',
+                        fontSize: '14px',
+                    },
+                }, withinPortal: true }, form.getInputProps('activeValue'))))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
 };
 
 const InlineForm = (_a) => {
@@ -64,6 +71,7 @@ const InlineForm = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     const { t, locale } = index.useTranslations();
     const { isAdult, activeValueNote, linkTool, form, submitProps } = React.useContext(ThrFormContext);
+    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
@@ -85,18 +93,20 @@ const InlineForm = (_a) => {
                         },
                     }) }))),
             form.errors.heartRate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.heartRate))),
-        isAdult && (React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
-            React__default["default"].createElement(index$4.Select, Object.assign({ defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
-                    value: option.value,
-                    label: option.label,
-                })), styles: {
-                    item: {
-                        whiteSpace: 'nowrap',
-                        padding: '10px 12px',
-                        fontSize: '14px',
-                    },
-                }, withinPortal: true }, form.getInputProps('activeValue'))))),
-        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
+        isAdult && (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
+                React__default["default"].createElement(index$4.Select, Object.assign({ defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
+                        value: option.value,
+                        label: option.label,
+                    })), styles: {
+                        item: {
+                            whiteSpace: 'nowrap',
+                            padding: '10px 12px',
+                            fontSize: '14px',
+                        },
+                    }, withinPortal: true }, form.getInputProps('activeValue')))))),
+        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
 };
 
 const ThrForm = (_a) => {