@hhgtech/hhg-components 1.29.81 → 1.29.83

package/build/{index-7c1dc717.js → index-34b1babf.js}

@@ -1,21 +1,22 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$2 = require('./index-05f106c2.js');
+var index$1 = require('./index-df9447b3.js');
 require('@mantine/dates');
-var index = require('./index-a86ea1b6.js');
-var index$1 = require('./index-df5cd44b.js');
-require('./index-1efa7d84.js');
-require('./useMantineLocale-a4f0c61d.js');
-require('./index-d34cd464.js');
-require('./index-a7de42d1.js');
-require('./theme-e4f7f487.js');
-var useTranslations = require('./useTranslations-200168a3.js');
+var index = require('./index-617bff8c.js');
+require('./index-d91f52cc.js');
+require('./index-6e7aede8.js');
+require('./useMantineLocale-f9195d27.js');
+require('./index-036fe55d.js');
+require('./index-8cb3f562.js');
+var useTranslations = require('./useTranslations-80687df4.js');
 require('@mantine/hooks');
-require('./utils-524bda7c.js');
-var utils = require('./utils-af695515.js');
+require('./utils-928b4701.js');
+require('./other-0edcc417.js');
+var utils = require('./utils-4849ab04.js');
+var Locale = require('./Locale-0b86b849.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -75,7 +76,7 @@ const useAddress = ({ provinces: provincesInit }) => {
         const fetchAddressData = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
             var _a, _b, _c;
             try {
-                const _addressData = yield fetch(generateGetAddressDetail(process.env.UNIFY_LOCALE || index$1.LOCALE.Vietnam)).then((res) => res.json());
+                const _addressData = yield fetch(generateGetAddressDetail(process.env.UNIFY_LOCALE || Locale.LOCALE.Vietnam)).then((res) => res.json());
                 setAddressData(_addressData);
                 const { list } = _addressData;
                 const provinceByName = provincesInit
@@ -147,12 +148,12 @@ const AddressInput = (_a) => {
             props.onChange(null);
         }
     }, [selectedProvince, selectedDistrict, selectedWard, extraInfo]);
-    return (React__default["default"].createElement(index$2.Input.Wrapper, Object.assign({ withAsterisk: true }, props),
+    return (React__default["default"].createElement(index$1.Input.Wrapper, Object.assign({ withAsterisk: true }, props),
         React__default["default"].createElement(core.Stack, null,
-            React__default["default"].createElement(index$2.Select, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.province) || t('onboarding.similac.input.city'), data: provincesInit ? provinces : provinces.sort(), searchable: true, onChange: handleProvinceChange, value: selectedProvince }),
-            React__default["default"].createElement(index$2.Select, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.district) || t('onboarding.similac.input.district'), data: districts.sort(), searchable: true, onChange: handleDistrictChange, value: selectedDistrict, disabled: !selectedProvince }),
-            React__default["default"].createElement(index$2.Select, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.ward) || t('onboarding.similac.input.ward'), searchable: true, data: wards.sort(), value: selectedWard, onChange: handleWardChange, disabled: !selectedProvince || !selectedDistrict }),
-            React__default["default"].createElement(index$2.Input, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.address) || t('onboarding.similac.input.no'), disabled: !selectedProvince || !selectedDistrict || !selectedWard, value: extraInfo, onChange: setExtraInfo, style: { marginBottom: 0 } })),
+            React__default["default"].createElement(index$1.Select, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.province) || t('onboarding.similac.input.city'), data: provincesInit ? provinces : provinces.sort(), searchable: true, onChange: handleProvinceChange, value: selectedProvince }),
+            React__default["default"].createElement(index$1.Select, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.district) || t('onboarding.similac.input.district'), data: districts.sort(), searchable: true, onChange: handleDistrictChange, value: selectedDistrict, disabled: !selectedProvince }),
+            React__default["default"].createElement(index$1.Select, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.ward) || t('onboarding.similac.input.ward'), searchable: true, data: wards.sort(), value: selectedWard, onChange: handleWardChange, disabled: !selectedProvince || !selectedDistrict }),
+            React__default["default"].createElement(index$1.Input, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.address) || t('onboarding.similac.input.no'), disabled: !selectedProvince || !selectedDistrict || !selectedWard, value: extraInfo, onChange: setExtraInfo, style: { marginBottom: 0 } })),
         React__default["default"].createElement(core.Input.Error, { size: "md" }, error)));
 };
 

package/build/{index-06fa8444.js → index-385f27fb.js}

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var theme = require('./theme-e4f7f487.js');
-var index = require('./index-05f106c2.js');
+var miscTheme = require('./miscTheme.js');
+var index = require('./index-df9447b3.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -31,7 +31,7 @@ const StyledAvatar = styled__default["default"].div `
     img {
       --width: var(--width-prop, 72px);
       --height: var(--height-prop, 72px);
-      border-radius: ${theme.theme.borderRadius};
+      border-radius: ${miscTheme.theme.borderRadius};
     }
   }
 
@@ -53,7 +53,7 @@ const StyledAvatar = styled__default["default"].div `
     font-size: calc(var(--size) / 2);
     font-weight: bold;
     &[data-avatar-type='square'] {
-      border-radius: ${theme.theme.borderRadius};
+      border-radius: ${miscTheme.theme.borderRadius};
     }
     &[data-avatar-type='rounded'] {
       border-radius: 50%;

package/build/index-3db01ab3.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
+var React = require('react');
+var core = require('@mantine/core');
+var form = require('@mantine/form');
+var useHealthToolCache = require('./useHealthToolCache-9d59f009.js');
+var useTranslations = require('./useTranslations-80687df4.js');
+var constants$1 = require('./constants-1953275e.js');
+var index$1 = require('./index-df9447b3.js');
+require('@mantine/dates');
+require('./index-617bff8c.js');
+require('./index-d91f52cc.js');
+require('./index-6e7aede8.js');
+require('./useMantineLocale-f9195d27.js');
+require('./index-036fe55d.js');
+require('./index-8cb3f562.js');
+require('@mantine/hooks');
+require('./utils-928b4701.js');
+require('./other-0edcc417.js');
+var index = require('./index-769ecf0d.js');
+var constants = require('./constants-e85d7085.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const PWGFormContext = React.createContext({});
+
+const DefaultForm = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(index$1.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$1.Input.Number, Object.assign({ label: 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.Input.Number, Object.assign({ label: 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.Input.Number, Object.assign({ label: 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.HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
+        React__default["default"].createElement(index.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: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const InlineForm = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weekInput') },
+            React__default["default"].createElement(index$1.Input.Number, Object.assign({ min: constants.INPUT_RANGE.pregnantWeek.min, max: constants.INPUT_RANGE.pregnantWeek.max, placeholder: `${constants.INPUT_RANGE.pregnantWeek.min} - ${constants.INPUT_RANGE.pregnantWeek.max}`, rightSection: React__default["default"].createElement(index.HealthToolFormWrapper.Unit, null, t('pwgForm.week')) }, form.getInputProps('pregnantWeek')))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
+            React__default["default"].createElement(index$1.Input.Number, Object.assign({}, form.getInputProps('lastWeight'), { min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), rightSection: React__default["default"].createElement(index.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
+            React__default["default"].createElement(index$1.Input.Number, Object.assign({}, form.getInputProps('height'), { min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '160',
+                }), rightSection: React__default["default"].createElement(index.HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
+            React__default["default"].createElement(index$1.Input.Number, Object.assign({}, form.getInputProps('weight'), { min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
+                    content: '50',
+                }), rightSection: React__default["default"].createElement(index.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.havingTwins'), width: 'none' },
+            React__default["default"].createElement(index.HealthToolFormWrapper.Switching, Object.assign({}, form.getInputProps('hasTwin')))),
+        React__default["default"].createElement(index.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: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const MbLayout = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t, locale } = useTranslations.useTranslations();
+    const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weekInput'), rightSection: t('pregnancy.week') },
+                React__default["default"].createElement(index$1.Input.Number, Object.assign({ 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')))),
+            form.errors.pregnantWeek && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.pregnantWeek))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightBeforeInput'), rightSection: "kg" },
+                React__default["default"].createElement(index$1.Input.Number, Object.assign({ min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }) }))),
+            form.errors.lastWeight && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.lastWeight))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.heightInput'), rightSection: "cm" },
+                React__default["default"].createElement(index$1.Input.Number, Object.assign({ min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max }, form.getInputProps('height'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '160',
+                    }) }))),
+            form.errors.height && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.height))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightInput'), rightSection: "kg" },
+                React__default["default"].createElement(index$1.Input.Number, Object.assign({ min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max }, form.getInputProps('weight'), { placeholder: t('tools.inputPlaceholder', {
+                        content: '50',
+                    }) }))),
+            form.errors.weight && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.weight))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
+        React__default["default"].createElement(index.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: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const PWGForm = (_a) => {
+    var { formLayout = 'default', submitProps, onSubmit } = _a, rest = tslib_es6.__rest(_a, ["formLayout", "submitProps", "onSubmit"]);
+    const { t, locale } = useTranslations.useTranslations();
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const form$1 = form.useForm({
+        validate: {
+            pregnantWeek: form.isNotEmpty(t('validation.error.requiredField')),
+            height: form.isNotEmpty(t('validation.error.requiredField')),
+            weight: (value, values) => {
+                return !value
+                    ? t('validation.error.requiredField')
+                    : Number(value) >= Number(values.lastWeight)
+                        ? null
+                        : t('pregnancyWeightGain.weightInput.error');
+            },
+            lastWeight: (value, values) => {
+                return !value
+                    ? t('validation.error.requiredField')
+                    : Number(value) < Number(values.weight)
+                        ? null
+                        : t('pregnancyWeightGain.weightInput.error');
+            },
+        },
+    });
+    const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
+    const linkTool = React.useMemo(() => getHealthToolLink(constants$1.HEALTH_TOOL_TYPE.PWG), [getHealthToolLink]);
+    const commonProps = Object.assign({ onSubmit: form$1.onSubmit(onSubmit) }, rest);
+    return (React__default["default"].createElement(PWGFormContext.Provider, { value: {
+            linkTool,
+            form: form$1,
+            submitProps,
+        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : isMarryBaby ? (React__default["default"].createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
+};
+
+exports.PWGForm = PWGForm;

package/build/{index-bef2bc73.js → index-48ef94cb.js}

@@ -1,21 +1,21 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
-var index$1 = require('./index-05f106c2.js');
+var index$1 = require('./index-df9447b3.js');
 require('@mantine/dates');
-require('./index-a86ea1b6.js');
-require('./index-df5cd44b.js');
-var index = require('./index-1efa7d84.js');
-require('./useMantineLocale-a4f0c61d.js');
-var index$2 = require('./index-d34cd464.js');
-require('./index-a7de42d1.js');
-require('./theme-e4f7f487.js');
-var useTranslations = require('./useTranslations-200168a3.js');
+require('./index-617bff8c.js');
+require('./index-d91f52cc.js');
+var index = require('./index-6e7aede8.js');
+require('./useMantineLocale-f9195d27.js');
+var index$2 = require('./index-036fe55d.js');
+require('./index-8cb3f562.js');
+var useTranslations = require('./useTranslations-80687df4.js');
 require('@mantine/hooks');
-require('./utils-524bda7c.js');
+require('./utils-928b4701.js');
+require('./other-0edcc417.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-ee964d3c.js → index-4b98362e.js}

@@ -2,12 +2,12 @@
 
 var React = require('react');
 var core = require('@mantine/core');
-var utils = require('./utils-524bda7c.js');
+var utils = require('./utils-928b4701.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
-var theme = require('./theme-e4f7f487.js');
-var animation = require('./animation-e1375a3b.js');
-var index = require('./index-d34cd464.js');
+var miscTheme = require('./miscTheme.js');
+var animation = require('./animation-f64d3491.js');
+var index = require('./index-036fe55d.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -104,7 +104,7 @@ const generateStyleBasedOnPlacement = (placement, open) => {
 const StyledDrawer = styled__default["default"].div `
   position: fixed;
   inset: 0;
-  z-index: ${theme.theme.zIndexes.drawer};
+  z-index: ${miscTheme.theme.zIndexes.drawer};
   pointer-events: ${(props) => (props.open ? 'auto' : 'none')};
 `;
 const StyledDrawerPanel = styled__default["default"].div `
@@ -122,7 +122,7 @@ const StyledDrawerPanel = styled__default["default"].div `
     padding: 16px;
     ${(props) => props.hasTitle
     ? react.css `
-            border-bottom: 1px solid ${theme.theme.colors.neutral100};
+            border-bottom: 1px solid ${miscTheme.theme.colors.neutral100};
           `
     : null}
   }

package/build/index-4c18e4ba.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-d6fa4ee6.js');
+var React = require('react');
+var core = require('@mantine/core');
+var form = require('@mantine/form');
+require('./index-df9447b3.js');
+var index$2 = require('./index-eeb7220e.js');
+require('./index-036fe55d.js');
+require('./index-8cb3f562.js');
+var useTranslations = require('./useTranslations-80687df4.js');
+require('@mantine/hooks');
+require('./index-d91f52cc.js');
+require('./index-6e7aede8.js');
+require('./utils-928b4701.js');
+require('./useMantineLocale-f9195d27.js');
+require('./index-617bff8c.js');
+require('./other-0edcc417.js');
+var index = require('./index-769ecf0d.js');
+var index$1 = require('./index-48ef94cb.js');
+var other = require('@hhgtech/icons/other');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const BabyVaccineFormContext = React.createContext({});
+
+const DefaultLayout = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t } = useTranslations.useTranslations();
+    const { currentUrl, submitProps, form } = React.useContext(BabyVaccineFormContext);
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(index$1.GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender'))),
+        React__default["default"].createElement(index$2.DatePicker, Object.assign({ label: t('babyGrowth.input.birthday'), placeholder: 'DD/MM/YYYY', popoverProps: {
+                withinPortal: true,
+            }, maxDate: new Date() }, form.getInputProps('age'))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const InlineLayout = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t } = useTranslations.useTranslations();
+    const { currentUrl, submitProps, form } = React.useContext(BabyVaccineFormContext);
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender'), width: 'none' },
+                React__default["default"].createElement(index$1.GenderOptionControl, Object.assign({ isBaby: true, hideLabel: true, type: "radio" }, form.getInputProps('gender')))),
+            form.errors.gender && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
+                React__default["default"].createElement(index$2.DatePicker, Object.assign({ placeholder: 'DD/MM/YYYY', popoverProps: {
+                        withinPortal: true,
+                    }, maxDate: new Date() }, form.getInputProps('age'), { error: null }))),
+            form.errors.age && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const MbLayout = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t } = useTranslations.useTranslations();
+    const { currentUrl, submitProps, form } = React.useContext(BabyVaccineFormContext);
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Control, null,
+            React__default["default"].createElement(index$1.GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender'), { error: null }))),
+        form.errors.gender && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.gender)),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.birthday'), 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('age'), { error: null }))),
+            form.errors.age && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.gender))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+var OvulationCalculatorType;
+(function (OvulationCalculatorType) {
+    OvulationCalculatorType[OvulationCalculatorType["trackPeriod"] = 0] = "trackPeriod";
+    OvulationCalculatorType[OvulationCalculatorType["conceive"] = 1] = "conceive";
+    OvulationCalculatorType[OvulationCalculatorType["avoidPregnancy"] = 2] = "avoidPregnancy";
+})(OvulationCalculatorType || (OvulationCalculatorType = {}));
+const BabyVaccineForm = (_a) => {
+    var { formLayout = 'default', submitProps, currentUrl, onSubmit } = _a, props = tslib_es6.__rest(_a, ["formLayout", "submitProps", "currentUrl", "onSubmit"]);
+    const { t } = useTranslations.useTranslations();
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const form$1 = form.useForm({
+        validate: {
+            gender: form.isNotEmpty(t('validation.error.requiredField')),
+            age: form.isNotEmpty(t('validation.error.requiredField')),
+        },
+    });
+    const commonProps = Object.assign({ onSubmit: form$1.onSubmit(onSubmit) }, props);
+    return (React__default["default"].createElement(BabyVaccineFormContext.Provider, { value: { submitProps, currentUrl, form: form$1 } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineLayout, Object.assign({}, commonProps))) : isMarryBaby ? (React__default["default"].createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default["default"].createElement(DefaultLayout, Object.assign({}, commonProps)))));
+};
+
+exports.BabyVaccineForm = BabyVaccineForm;

package/build/{index-77a2b9ee.js → index-4ef9be86.js}

@@ -3,7 +3,7 @@
 var React = require('react');
 var core = require('@mantine/core');
 var styled = require('@emotion/styled');
-var theme = require('./theme-e4f7f487.js');
+var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -14,11 +14,11 @@ const StyledDropdown = styled__default["default"].div `
   --dropdown-padding: 12px 18px 12px 16px;
   position: relative;
   box-sizing: border-box;
-  border: 1px solid ${theme.theme.colors.gray200};
+  border: 1px solid ${miscTheme.theme.colors.gray200};
   background: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
     no-repeat;
   background-position: right 16px center;
-  border-radius: ${theme.theme.borderRadius};
+  border-radius: ${miscTheme.theme.borderRadius};
 
   &[data-disabled='true'],
   :disabled {
@@ -41,7 +41,7 @@ const StyledDropdown = styled__default["default"].div `
 
   &[data-has-icons='true'] {
     border: none;
-    background: ${theme.theme.colors.gray100};
+    background: ${miscTheme.theme.colors.gray100};
 
     img,
     svg {
@@ -102,7 +102,7 @@ const StyledDropdownName = styled__default["default"].div `
   &[data-dropdown-open] {
     padding: 11px 15px 11px 15px;
     border: 1px solid ${(props) => props.color};
-    border-radius: ${theme.theme.borderRadius};
+    border-radius: ${miscTheme.theme.borderRadius};
     box-shadow: 0 0 2px 2px ${(props) => props.shadowColor};
   }
 `;
@@ -114,14 +114,14 @@ const StyledDropdownList = styled__default["default"].ul `
   left: 0;
   display: block;
   margin-top: 4px;
-  background: ${theme.theme.colors.white};
-  border-radius: ${theme.theme.borderRadius};
+  background: ${miscTheme.theme.colors.white};
+  border-radius: ${miscTheme.theme.borderRadius};
   box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
     -2px 2px 5px rgba(67, 86, 100, 0.123689);
   cursor: pointer;
 
   &[data-has-icons='true'] {
-    border: 1px solid ${theme.theme.colors.gray200};
+    border: 1px solid ${miscTheme.theme.colors.gray200};
     background: white;
     box-shadow: none;
     filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));
@@ -139,7 +139,7 @@ const StyledDropdownOption = styled__default["default"].li `
   }
   &:hover,
   :active {
-    background: ${theme.theme.colors.gray100};
+    background: ${miscTheme.theme.colors.gray100};
   }
 `;
 const StyledIcon = styled__default["default"].div `