@hhgtech/hhg-components 1.29.499 → 1.29.500-beta-2

package/build/{index-7476f743.js → index-7ad21ed3.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-ebbd9505.js');
+var tslib_es6 = require('./tslib.es6-5acb4e06.js');
 var React = require('react');
-var togetherComponentGlobalContext = require('./utils-5dfb2952.js');
+var togetherComponentGlobalContext = require('./utils-c3eaa19f.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
 

package/build/{index-65a18ef8.js → index-7b72c56d.js}

@@ -1,12 +1,12 @@
 'use strict';
 
 var locale = require('date-fns/locale');
-require('./index-1132d3eb.js');
+require('./index-8a475cef.js');
 var constantsSite = require('./constantsSite.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var constantsRiskScreener = require('./constantsRiskScreener.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
-var Locale = require('./Locale-4f8c0874.js');
+var Locale = require('./Locale-6bbe8ace.js');
 
 const basePath = process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'tl-PH' ? '/fil' : '';
 const SSO_URL = process.env.NEXT_PUBLIC_SSO;

package/build/{index-d67ba036.js → index-817e33fd.js}

@@ -1,35 +1,35 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-dde6d0e2.js');
+var index = require('./index-d1305da5.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$2 = require('./index-bca13d95.js');
-var normalizeLink = require('./normalizeLink-c2c616a1.js');
+var index$2 = require('./index-5ee77f91.js');
+var normalizeLink = require('./normalizeLink-c0dc864e.js');
 var miscTheme = require('./miscTheme.js');
-var index$1 = require('./index-f8c0ea9c.js');
-var index$3 = require('./index-7e6c4b3a.js');
-var index$4 = require('./index-69c08b9d.js');
-var types = require('./types-560a11d7.js');
+var index$1 = require('./index-63f5c441.js');
+var index$3 = require('./index-ac33eecc.js');
+var index$4 = require('./index-11c62c3a.js');
+var types = require('./types-2122cb70.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-53bab473.js');
+var utils = require('./utils-2f9950c1.js');
 var core = require('@mantine/core');
 var api = require('@react-google-maps/api');
 var classNames = require('classnames');
-var index$5 = require('./index-65a18ef8.js');
-var constants = require('./constants-06843b44.js');
-var index$6 = require('./index-ec20f28b.js');
-var localizeNumberFormat = require('./localizeNumberFormat-78f6b02e.js');
-var tslib_es6 = require('./tslib.es6-ebbd9505.js');
+var index$5 = require('./index-7b72c56d.js');
+var constants = require('./constants-792bf5e4.js');
+var index$6 = require('./index-88ac3d26.js');
+var localizeNumberFormat = require('./localizeNumberFormat-79653862.js');
+var tslib_es6 = require('./tslib.es6-5acb4e06.js');
 var hooks = require('@mantine/hooks');
-var index$9 = require('./index-ce814d2c.js');
+var index$9 = require('./index-9a8abea0.js');
 var PhoneInputBase = require('react-phone-number-input');
-var index$8 = require('./index-0cf05697.js');
-var index$b = require('./index-358695c8.js');
-var index$7 = require('./index-b0cf70f2.js');
-var index$c = require('./index-68040d4f.js');
-var index$a = require('./index-0781219e.js');
-var index$d = require('./index-78ac1877.js');
-var index$e = require('./index-13c81145.js');
+var index$8 = require('./index-f5e9b364.js');
+var index$b = require('./index-488dd0de.js');
+var index$7 = require('./index-a736619d.js');
+var index$c = require('./index-140f88aa.js');
+var index$a = require('./index-3de9f044.js');
+var index$d = require('./index-2fd39ee8.js');
+var index$e = require('./index-0d69cb52.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-505a9dd0.js → index-84f14534.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-dde6d0e2.js');
-var index$1 = require('./index-69c08b9d.js');
+var index = require('./index-d1305da5.js');
+var index$1 = require('./index-11c62c3a.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-ec20f28b.js → index-88ac3d26.js}

@@ -1,22 +1,22 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-ebbd9505.js');
+var tslib_es6 = require('./tslib.es6-5acb4e06.js');
 var React = require('react');
-require('./index-0cf05697.js');
+require('./index-f5e9b364.js');
 require('@mantine/core');
 require('@mantine/dates');
-require('./index-65a18ef8.js');
-require('./index-1132d3eb.js');
-require('./index-bca13d95.js');
-require('./index-68040d4f.js');
-var index = require('./index-0781219e.js');
-require('./index-b0cf70f2.js');
-require('./index-358695c8.js');
-require('./index.styles-afd04f10.js');
-require('./translationsContext-339473e6.js');
+require('./index-7b72c56d.js');
+require('./index-8a475cef.js');
+require('./index-5ee77f91.js');
+require('./index-140f88aa.js');
+var index = require('./index-3de9f044.js');
+require('./index-a736619d.js');
+require('./index-488dd0de.js');
+require('./index.styles-07e6d846.js');
+require('./translationsContext-8063509f.js');
 require('@mantine/hooks');
-require('./utils-53bab473.js');
-require('./index-f2faadcf.js');
+require('./utils-2f9950c1.js');
+require('./index-6a76ef06.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-31908e9d.js → index-89919948.js}

@@ -2,24 +2,24 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var utils = require('./utils-53bab473.js');
+var utils = require('./utils-2f9950c1.js');
 var miscTheme = require('./miscTheme.js');
-var tslib_es6 = require('./tslib.es6-ebbd9505.js');
-var index = require('./index-1fb5da39.js');
-var index$1 = require('./index-0cf05697.js');
+var tslib_es6 = require('./tslib.es6-5acb4e06.js');
+var index = require('./index-0c12b254.js');
+var index$1 = require('./index-f5e9b364.js');
 require('@mantine/core');
 require('@mantine/dates');
-require('./index-65a18ef8.js');
-require('./index-1132d3eb.js');
-require('./index-bca13d95.js');
-require('./index-68040d4f.js');
-require('./index-0781219e.js');
-require('./index-b0cf70f2.js');
-require('./index-358695c8.js');
-require('./index.styles-afd04f10.js');
-require('./translationsContext-339473e6.js');
+require('./index-7b72c56d.js');
+require('./index-8a475cef.js');
+require('./index-5ee77f91.js');
+require('./index-140f88aa.js');
+require('./index-3de9f044.js');
+require('./index-a736619d.js');
+require('./index-488dd0de.js');
+require('./index.styles-07e6d846.js');
+require('./translationsContext-8063509f.js');
 require('@mantine/hooks');
-require('./index-f2faadcf.js');
+require('./index-6a76ef06.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -458,7 +458,6 @@ function getWidths(opts) {
         return DEFAULT_DEVICE_SIZES;
     if (opts.width) {
         const w = Math.max(1, Math.round(opts.width));
-        console.log('x', Array.from(new Set([w, Math.min(w * 1, 2048)])).sort((a, b) => a - b));
         return Array.from(new Set([w, Math.min(w * 2, 2048)])).sort((a, b) => a - b);
     }
     return DEFAULT_DEVICE_SIZES;
@@ -486,7 +485,7 @@ const ImageWrapV2 = (_a) => {
             ? {
                 backgroundImage: `url(${placeholderSrc})`,
             }
-            : {})), style), "data-has-placeholder": !!placeholderSrc, ref: ref }, props)));
+            : {})), style), "data-has-placeholder": !!placeholderSrc, sizes: sizes, ref: ref }, props)));
 };
 const StyledImage = styled__default["default"].img `
   &[data-has-placeholder='true'] {

package/build/{index-1132d3eb.js → index-8a475cef.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var Locale = require('./Locale-4f8c0874.js');
+var Locale = require('./Locale-6bbe8ace.js');
 
 exports.Gender = void 0;
 (function (Gender) {

package/build/{index-ce9f6755.js → index-8b38d3c1.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-ebbd9505.js');
+var tslib_es6 = require('./tslib.es6-5acb4e06.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index = require('./index-0781219e.js');
+var index = require('./index-3de9f044.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-af97fa62.js → index-9634da0a.js}

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-ce9f6755.js');
-var utils = require('./utils-53bab473.js');
-var index = require('./index-dde6d0e2.js');
-var togetherComponentGlobalContext = require('./utils-5dfb2952.js');
+var index$2 = require('./index-8b38d3c1.js');
+var utils = require('./utils-2f9950c1.js');
+var index = require('./index-d1305da5.js');
+var togetherComponentGlobalContext = require('./utils-c3eaa19f.js');
 var core = require('@mantine/core');
-var index$1 = require('./index-0781219e.js');
+var index$1 = require('./index-3de9f044.js');
 var styled = require('@emotion/styled');
-var tslib_es6 = require('./tslib.es6-ebbd9505.js');
+var tslib_es6 = require('./tslib.es6-5acb4e06.js');
 var miscTheme = require('./miscTheme.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
 

package/build/{index-ce814d2c.js → index-9a8abea0.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var core = require('@mantine/core');
-var index$1 = require('./index-358695c8.js');
-var tslib_es6 = require('./tslib.es6-ebbd9505.js');
+var index$1 = require('./index-488dd0de.js');
+var tslib_es6 = require('./tslib.es6-5acb4e06.js');
 var React = require('react');
 var hooks = require('@mantine/hooks');
 var react = require('@emotion/react');

package/build/{index-62e2923d.js → index-9d633427.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-ebbd9505.js');
+var tslib_es6 = require('./tslib.es6-5acb4e06.js');
 var React = require('react');
 var core = require('@mantine/core');
 var vaul = require('vaul');
 var styled = require('@emotion/styled');
-var index = require('./index-65a18ef8.js');
+var index = require('./index-7b72c56d.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-b0cf70f2.js → index-a736619d.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-ebbd9505.js');
+var tslib_es6 = require('./tslib.es6-5acb4e06.js');
 var React = require('react');
 var core = require('@mantine/core');
-var shared = require('./shared-a2d9b39e.js');
-var index = require('./index-358695c8.js');
+var shared = require('./shared-b041a200.js');
+var index = require('./index-488dd0de.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-bc5c675a.js → index-a7e5a86a.js}

@@ -1,28 +1,28 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-ebbd9505.js');
+var tslib_es6 = require('./tslib.es6-5acb4e06.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-var useHealthToolCache = require('./useHealthToolCache-91b32ad7.js');
-var index = require('./index-dde6d0e2.js');
-var constants$1 = require('./constants-06843b44.js');
-var index$2 = require('./index-0cf05697.js');
+var useHealthToolCache = require('./useHealthToolCache-40fdbc7b.js');
+var index = require('./index-d1305da5.js');
+var constants$1 = require('./constants-792bf5e4.js');
+var index$2 = require('./index-f5e9b364.js');
 require('@mantine/dates');
-require('./index-65a18ef8.js');
-require('./index-1132d3eb.js');
-require('./index-bca13d95.js');
-require('./index-68040d4f.js');
-require('./index-0781219e.js');
-require('./index-b0cf70f2.js');
-require('./index-358695c8.js');
-require('./index.styles-afd04f10.js');
+require('./index-7b72c56d.js');
+require('./index-8a475cef.js');
+require('./index-5ee77f91.js');
+require('./index-140f88aa.js');
+var index$3 = require('./index-3de9f044.js');
+require('./index-a736619d.js');
+require('./index-488dd0de.js');
+require('./index.styles-07e6d846.js');
 require('@mantine/hooks');
-require('./utils-53bab473.js');
-require('./index-f2faadcf.js');
-var context = require('./context-a40dc8d5.js');
-var index$1 = require('./index-9edd3345.js');
-var constants = require('./constants-b681b617.js');
+require('./utils-2f9950c1.js');
+require('./index-6a76ef06.js');
+var context = require('./context-efec0d4a.js');
+var index$1 = require('./index-3142ba95.js');
+var constants = require('./constants-005aa25b.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -40,21 +40,21 @@ const DefaultForm = (_a) => {
     const isMarryBaby = theme.other.template === 'mb';
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weekInput'), min: constants.INPUT_RANGE.pregnantWeek.min, max: constants.INPUT_RANGE.pregnantWeek.max, placeholder: `${constants.INPUT_RANGE.pregnantWeek.min} - ${constants.INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek')))),
+            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('pregnancyWeightGain.weekInput')), min: constants.INPUT_RANGE.pregnantWeek.min, max: constants.INPUT_RANGE.pregnantWeek.max, placeholder: `${constants.INPUT_RANGE.pregnantWeek.min} - ${constants.INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek')))),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightBeforeInput'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('pregnancyWeightGain.weightBeforeInput')), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
                     content: '50',
                 }) }, form.getInputProps('lastWeight')))),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: t('pregnancyWeightGain.heightInput'), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
+            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('pregnancyWeightGain.heightInput')), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
                     content: '160',
                 }) }, form.getInputProps('height')))),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightInput'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('pregnancyWeightGain.weightInput')), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
                     content: '50',
                 }) }, form.getInputProps('weight')))),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
-            React__default["default"].createElement(index$1.HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin')))),
+            React__default["default"].createElement(index$1.HealthToolFormWrapper.Switching, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('pregnancyWeightGain.havingTwins')) }, form.getInputProps('hasTwin')))),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
             React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${constantsDomainLocales.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn) }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
 };

package/build/{index-7e6c4b3a.js → index-ac33eecc.js}

@@ -1,50 +1,50 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-ebbd9505.js');
+var tslib_es6 = require('./tslib.es6-5acb4e06.js');
 var React = require('react');
-var index$b = require('./index-8ecc9e60.js');
-var index$3 = require('./index-65a18ef8.js');
-var normalizeLink = require('./normalizeLink-c2c616a1.js');
-var dataTransform = require('./dataTransform-390e4345.js');
+var index$b = require('./index-4034588b.js');
+var index$3 = require('./index-7b72c56d.js');
+var normalizeLink = require('./normalizeLink-c0dc864e.js');
+var dataTransform = require('./dataTransform-18891b61.js');
 var core = require('@hhgtech/icons/core');
-require('./translationsContext-339473e6.js');
+require('./translationsContext-8063509f.js');
 var styled = require('@emotion/styled');
-var index = require('./index-0cf05697.js');
+var index = require('./index-f5e9b364.js');
 var miscTheme = require('./miscTheme.js');
-var navigationProfileButton = require('./index-b2760e72.js');
+var navigationProfileButton = require('./index-eb35621f.js');
 var other = require('@hhgtech/icons/other');
 var core$1 = require('@mantine/core');
-var index$d = require('./index-619e0299.js');
+var index$d = require('./index-155b0dc6.js');
 var throttle = require('lodash/throttle');
 require('@mantine/dates');
-var index$9 = require('./index-1132d3eb.js');
-var index$6 = require('./index-bca13d95.js');
-require('./index-68040d4f.js');
-var index$4 = require('./index-0781219e.js');
-var index$2 = require('./index-b0cf70f2.js');
-require('./index-358695c8.js');
-require('./index.styles-afd04f10.js');
+var index$9 = require('./index-8a475cef.js');
+var index$6 = require('./index-5ee77f91.js');
+require('./index-140f88aa.js');
+var index$4 = require('./index-3de9f044.js');
+var index$2 = require('./index-a736619d.js');
+require('./index-488dd0de.js');
+require('./index.styles-07e6d846.js');
 require('@mantine/hooks');
-var utils = require('./utils-53bab473.js');
-require('./index-f2faadcf.js');
-var constants = require('./constants-3c1aca64.js');
-var store = require('./store-5baeb7bc.js');
-var index$5 = require('./index-3a0a7c9d.js');
-var index$1 = require('./index-dde6d0e2.js');
-var useIsInit = require('./useIsInit-303222b4.js');
-var constants$1 = require('./constants-2b21d5f5.js');
+var utils = require('./utils-2f9950c1.js');
+require('./index-6a76ef06.js');
+var constants = require('./constants-2a285770.js');
+var store = require('./store-1f374713.js');
+var index$5 = require('./index-dd4973c8.js');
+var index$1 = require('./index-d1305da5.js');
+var useIsInit = require('./useIsInit-1be01778.js');
+var constants$1 = require('./constants-adac1bcc.js');
 var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
-var index$7 = require('./index-69c08b9d.js');
-var index$8 = require('./index-ce9f6755.js');
+var index$7 = require('./index-11c62c3a.js');
+var index$8 = require('./index-8b38d3c1.js');
 var formatString = require('string-format');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
-var index$a = require('./index-5a95a16d.js');
+var index$a = require('./index-2bca6494.js');
 var dayjs = require('dayjs');
 var relativeTime = require('dayjs/plugin/relativeTime');
-var index$c = require('./index-7476f743.js');
-var Locale = require('./Locale-4f8c0874.js');
+var index$c = require('./index-7ad21ed3.js');
+var Locale = require('./Locale-6bbe8ace.js');
 var debounce = require('lodash/debounce');
-var core$2 = require('./core-ead610e2.js');
+var core$2 = require('./core-69acc790.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -1103,6 +1103,7 @@ const StyledImageCard$2 = styled__default["default"].div `
   ${utils.MediaQueries.tdDown} {
     width: 72px;
     padding-top: 100px;
+    flex-shrink: 0;
   }
 `;
 const StyledButton = styled__default["default"].a `

package/build/{index-cb69dbb6.js → index-b051f1fc.js}

@@ -1,23 +1,23 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-ebbd9505.js');
+var tslib_es6 = require('./tslib.es6-5acb4e06.js');
 var React = require('react');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
-var LastPeriod = require('./LastPeriod-dee40583.js');
-var index$3 = require('./index-0cf05697.js');
-var index$2 = require('./index-3b584311.js');
-var index$4 = require('./index-0781219e.js');
-require('./index-b0cf70f2.js');
-require('./index-358695c8.js');
-require('./index.styles-afd04f10.js');
-var index = require('./index-dde6d0e2.js');
+var LastPeriod = require('./LastPeriod-0865b68c.js');
+var index$4 = require('./index-f5e9b364.js');
+var index$2 = require('./index-d30344b5.js');
+var index$3 = require('./index-3de9f044.js');
+require('./index-a736619d.js');
+require('./index-488dd0de.js');
+require('./index.styles-07e6d846.js');
+var index = require('./index-d1305da5.js');
 require('@mantine/hooks');
-require('./index-68040d4f.js');
-require('./utils-53bab473.js');
-require('./index-f2faadcf.js');
-var context = require('./context-a40dc8d5.js');
-var index$1 = require('./index-9edd3345.js');
+require('./index-140f88aa.js');
+require('./utils-2f9950c1.js');
+require('./index-6a76ef06.js');
+var context = require('./context-efec0d4a.js');
+var index$1 = require('./index-3142ba95.js');
 var other = require('@hhgtech/icons/other');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -75,11 +75,26 @@ const TryConceive = (_a) => {
 
 const OvulationFormContext = React.createContext({});
 
+var useStyles = core.createStyles((theme) => {
+    return {
+        inputRightSection: {
+            fontSize: core.rem(13),
+            lineHeight: core.rem(24),
+            color: theme.colors.gray[4],
+            justifyContent: 'flex-end',
+            paddingRight: 8,
+        },
+    };
+});
+
 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);
+    const { classes } = useStyles(undefined, 
+    // Second DefaultLayout is responsible for styles api integration
+    { name: 'OvulationTool__DefaultLayout' });
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
             React__default["default"].createElement(index$1.HealthToolFormWrapper.Control, null,
@@ -87,11 +102,15 @@ const DefaultLayout = (_a) => {
         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')))),
+                }, label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, ` (${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$4.Input.Number, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('ovulationPage.cycleLength')), rightSection: t('ovulationPage.dayUnit'), min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'), { classNames: {
+                    rightSection: classes.inputRightSection,
+                } }))),
         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$4.Input.Number, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('ovulationPage.periodDuration')), rightSection: t('ovulationPage.dayUnit'), min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'), { classNames: {
+                    rightSection: classes.inputRightSection,
+                } }))),
         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')))));
 };
@@ -112,11 +131,11 @@ const InlineLayout = (_a) => {
                     }, 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 }))),
+                React__default["default"].createElement(index$4.Input.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'), { error: null }))),
             form.errors.cycleLength && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.cycleLength))),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
             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 }))),
+                React__default["default"].createElement(index$4.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.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')))));
@@ -128,17 +147,17 @@ const MbLayout = (_a) => {
     const { currentUrl, submitProps, form, calculatingMethods } = React.useContext(OvulationFormContext);
     return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.Control, null,
-            React__default["default"].createElement(index$3.Input.Wrapper, { label: React__default["default"].createElement(index$4.Text, { size: "p4", sx: { fontWeight: 'normal' } }, t('dueDatePage.calculationMethod')) },
+            React__default["default"].createElement(index$4.Input.Wrapper, { label: React__default["default"].createElement(index$3.Text, { size: "p4", sx: { fontWeight: 'normal' } }, t('dueDatePage.calculationMethod')) },
                 React__default["default"].createElement(index$1.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType'))))),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
             React__default["default"].createElement(index$2.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
                     withinPortal: true,
                 }, maxDate: new Date(), rightSection: null }, form.getInputProps('lastPeriodDate')))),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.cycleLength'), rightSection: t('ovulationPage.dayUnit') },
-            React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength')))),
+            React__default["default"].createElement(index$4.Input.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength')))),
         form.errors.cycleLength && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.cycleLength)),
         React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.periodDuration'), rightSection: t('ovulationPage.dayUnit') },
-            React__default["default"].createElement(index$3.Input.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength')))),
+            React__default["default"].createElement(index$4.Input.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength')))),
         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'))));
 };

package/build/{index-778f0207.js → index-b64b9d7f.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-ebbd9505.js');
+var tslib_es6 = require('./tslib.es6-5acb4e06.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index_styles = require('./index.styles-afd04f10.js');
+var index_styles = require('./index.styles-07e6d846.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-90d5acfd.js → index-b86c7c49.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-69c08b9d.js');
-var togetherComponentGlobalContext = require('./utils-5dfb2952.js');
+var index = require('./index-11c62c3a.js');
+var togetherComponentGlobalContext = require('./utils-c3eaa19f.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');