@hhgtech/hhg-components 1.29.82 → 1.29.84

package/build/{index-130e0f35.js → index-e4bfc43c.js}

@@ -2,33 +2,37 @@
 
 var React = require('react');
 var core = require('@mantine/core');
-var index = require('./index-64d8db08.js');
-var togetherComponentGlobalContext = require('./utils-169c6a7d.js');
-var index$1 = require('./index-e3bbd009.js');
-var tslib_es6 = require('./tslib.es6-bd3f8718.js');
-var index$2 = require('./index-dff7ee1b.js');
-var routing = require('./routing-d6c9099a.js');
-var useTranslations = require('./useTranslations-685f989b.js');
+var index = require('./index-e0d59d3e.js');
+var togetherComponentGlobalContext = require('./utils-62afd8c7.js');
+var index$7 = require('./index-1f94d57c.js');
+var constantsRiskScreener = require('./constantsRiskScreener.js');
+var tslib_es6 = require('./tslib.es6-a7663f7d.js');
+var index$1 = require('./index-848c257f.js');
+var routing = require('./routing-c7527743.js');
+var useTranslations = require('./useTranslations-ec613f5a.js');
 var form = require('@mantine/form');
 require('@mantine/dates');
-var index$8 = require('./index-1f3fc2e3.js');
-require('./useMantineLocale-0d63dfea.js');
-var index$4 = require('./index-1fdf2f01.js');
-var index$5 = require('./index-3eb666e6.js');
-require('./theme-be20929b.js');
+require('./index-3ae93a30.js');
+require('./useMantineLocale-30235874.js');
+var index$3 = require('./index-4184d8d6.js');
+var index$4 = require('./index-353ce6f8.js');
 var hooks = require('@mantine/hooks');
-require('./utils-15a9772e.js');
-require('./translationsContext-00fdb62e.js');
+require('./utils-7effa670.js');
+require('./other-b4596d33.js');
+var togetherApiPaths = require('./togetherApiPaths.js');
+require('./translationsContext-22b4034f.js');
 require('string-format');
-var index$3 = require('./index-54aeefca.js');
-var useHealthToolCache = require('./useHealthToolCache-048807ea.js');
-var index$6 = require('./index-10760994.js');
-var isProduction = require('./isProduction-20cd663d.js');
+var index$2 = require('./index-7efe7581.js');
+var useHealthToolCache = require('./useHealthToolCache-35767818.js');
+var index$5 = require('./index-4ac79663.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
+var constantsIsProduction = require('./constantsIsProduction.js');
 var core$1 = require('@hhgtech/icons/core');
-var index$7 = require('./index-405faafa.js');
+var index$6 = require('./index-a3320ed8.js');
 var Cookies = require('js-cookie');
 var flatten = require('lodash/flatten');
 var uniqBy = require('lodash/uniqBy');
+var Locale = require('./Locale-9e8a2452.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -247,9 +251,9 @@ const FLOW = (t, currentUrl) => ({
             },
             'teenager.girl': {
                 action: BannerAction.ShowTool,
-                activeTool: index$1.RISK_SCREENER_NAME.HPV,
+                activeTool: constantsRiskScreener.RISK_SCREENER_NAME.HPV,
                 props: {
-                    value: index$1.RISK_SCREENER_NAME.HPV,
+                    value: constantsRiskScreener.RISK_SCREENER_NAME.HPV,
                 },
             },
             'todders|teenager': {
@@ -362,7 +366,7 @@ const TOOL_BANNERS_PROPS = (t) => ({
         btnLabel: t('pnBanner.caclNow'),
         value: HEALTH_TOOL_TYPE.BABY_GROWTH,
     },
-    [index$1.RISK_SCREENER_NAME.HPV]: {
+    [constantsRiskScreener.RISK_SCREENER_NAME.HPV]: {
         heading: t('pnBanner.hpv.heading'),
         description: t('pnBanner.hpv.desc'),
         thumbnail: {
@@ -371,7 +375,7 @@ const TOOL_BANNERS_PROPS = (t) => ({
         },
         isRiskScreener: true,
         btnLabel: t('pnBanner.checkNow'),
-        value: index$1.RISK_SCREENER_NAME.HPV,
+        value: constantsRiskScreener.RISK_SCREENER_NAME.HPV,
         hideDescOnMobile: true,
         dataEventAction: 'Keep safe from HPV virus Click',
     },
@@ -398,7 +402,7 @@ const PnBannerEle = (_a) => {
             borderRadius: 4,
             cursor: 'pointer',
         }, onClick: bannerClick, "data-event-category": "Newsletter", "data-event-action": "Banner Click", "data-event-label": currentUrl, className: "pointer-event-child-none" }, rest),
-        React__default["default"].createElement(index$2.ImageWrap, { src: isMarketing
+        React__default["default"].createElement(index$1.ImageWrap, { src: isMarketing
                 ? index.CommonGAssets.getAssetPath(`newsletter/${isMobile ? 'Mobile' : 'Desktop'}_Marketing.png`)
                 : index.CommonGAssets.getAssetPath(`newsletter/${isMobile ? 'Mobile' : 'Desktop'}_${type}.png`), style: { maxWidth: '100%' }, alt: "newsletter banner" })));
 };
@@ -467,8 +471,8 @@ const BannerLayout = ({ heading, description, thumbnail = {
                             maxWidth: '70%',
                         },
                     }) },
-                    heading && React__default["default"].createElement(index$3.Heading, { tag: "h4" }, heading),
-                    !(hideDescOnMobile && isMobile) && description && (React__default["default"].createElement(index$4.Text, { size: "p4" }, description))),
+                    heading && React__default["default"].createElement(index$2.Heading, { tag: "h4" }, heading),
+                    !(hideDescOnMobile && isMobile) && description && (React__default["default"].createElement(index$3.Text, { size: "p4" }, description))),
                 React__default["default"].createElement(core.Box, null, children)))));
 };
 
@@ -490,7 +494,7 @@ const BannerWithOptions = (props) => {
         },
     });
     const saveStep = (value) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        return yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherComponentGlobalContext.PATHS.HEALTH_TOOL.CREATE, {
+        return yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.HEALTH_TOOL.CREATE, {
             _locale: locale,
             type: MAPPING_CATEGORY_PREMIUM_API_TYPE[surveyType],
         }), 'POST', {
@@ -505,11 +509,11 @@ const BannerWithOptions = (props) => {
         });
     });
     const renderButtonChoice = React.useCallback(() => (React__default["default"].createElement(core.Flex, { gap: core.rem(8), className: classes.wrapper }, items.map((i, idx) => (React__default["default"].createElement(core.Box, { key: String(idx), component: i.isLink ? 'a' : 'div', href: i.isRiskScreener
-            ? `https://${index$1.domainLocales[locale]}/bot/${index$1.RISK_SCREENER_SLUG[locale][i.activeTool]}/`
+            ? `https://${constantsDomainLocales.domainLocales[locale]}/bot/${constantsRiskScreener.RISK_SCREENER_SLUG[locale][i.activeTool]}/`
             : i.isLink
                 ? getHealthToolLink(i.activeTool)
                 : undefined },
-        React__default["default"].createElement(index$5.Button, Object.assign({ className: classes.button, classNames: {
+        React__default["default"].createElement(index$4.Button, Object.assign({ className: classes.button, classNames: {
                 label: classes.buttonLabel,
             }, size: "sm" }, i.tracking, buttonProps, { onClick: () => {
                 if (!i.isLink) {
@@ -529,13 +533,13 @@ const BannerWithOptions = (props) => {
                     paddingLeft: core.rem(16),
                 },
             }) },
-            React__default["default"].createElement(index$2.Checkbox.Group, Object.assign({}, form$1.getInputProps('bannerOptions', { type: 'checkbox' })),
-                React__default["default"].createElement(core.Flex, { gap: core.rem(16) }, items.map((i, idx) => (React__default["default"].createElement(index$2.Checkbox, { key: String(idx), value: i.value, label: i.label, styles: {
+            React__default["default"].createElement(index$1.Checkbox.Group, Object.assign({}, form$1.getInputProps('bannerOptions', { type: 'checkbox' })),
+                React__default["default"].createElement(core.Flex, { gap: core.rem(16) }, items.map((i, idx) => (React__default["default"].createElement(index$1.Checkbox, { key: String(idx), value: i.value, label: i.label, styles: {
                         label: {
                             cursor: 'pointer',
                         },
                     } }))))),
-            React__default["default"].createElement(index$5.Button, Object.assign({ size: "sm" }, submitBtnTracking, buttonProps, { disabled: form$1.getInputProps('bannerOptions').value.length === 0, leftIcon: isMobile ? (React__default["default"].createElement(index$6.Icon.ArrowRightTail, { size: 18, useCurrentColor: true })) : undefined, onClick: () => {
+            React__default["default"].createElement(index$4.Button, Object.assign({ size: "sm" }, submitBtnTracking, buttonProps, { disabled: form$1.getInputProps('bannerOptions').value.length === 0, leftIcon: isMobile ? (React__default["default"].createElement(index$5.Icon.ArrowRightTail, { size: 18, useCurrentColor: true })) : undefined, onClick: () => {
                     const curValues = form$1.getInputProps('bannerOptions').value;
                     saveStep(curValues.join('|'));
                     handleClickOption(curValues.join('|'));
@@ -565,10 +569,10 @@ const ToolBanner = (props) => {
     const layout = isRiskScreener ? 'mainBanner' : 'toolBanner';
     const btnEle = React.useMemo(() => {
         const toolUrl = isRiskScreener
-            ? `https://${!isProduction.isProduction ? 'discover.' : ''}${index$1.domainLocales[locale]}/bot/${index$1.RISK_SCREENER_SLUG[locale][value]}`
+            ? `https://${!constantsIsProduction.isProduction ? 'discover.' : ''}${constantsDomainLocales.domainLocales[locale]}/bot/${constantsRiskScreener.RISK_SCREENER_SLUG[locale][value]}`
             : getHealthToolLink(value);
         return (React__default["default"].createElement("a", { href: toolUrl },
-            React__default["default"].createElement(index$5.Button, { size: "sm", "data-event-category": "Focused Audience", "data-event-action": dataEventAction, "data-event-label": toolUrl }, btnLabel || t('pnBanner.caclNow'))));
+            React__default["default"].createElement(index$4.Button, { size: "sm", "data-event-category": "Focused Audience", "data-event-action": dataEventAction, "data-event-label": toolUrl }, btnLabel || t('pnBanner.caclNow'))));
     }, [allTools]);
     return layout === 'mainBanner' ? (React__default["default"].createElement(BannerLayout, Object.assign({}, Object.assign(Object.assign({}, props), { thumbnail: props.thumbnail })), btnEle)) : (React__default["default"].createElement(core.Flex, { gap: core.rem(7), align: 'center', justify: 'space-between', sx: (theme) => ({
             borderRadius: core.rem(8),
@@ -581,8 +585,8 @@ const ToolBanner = (props) => {
         }) },
         React__default["default"].createElement(core.Stack, { spacing: core.rem(12) },
             React__default["default"].createElement(core.Stack, { spacing: core.rem(4) },
-                heading && React__default["default"].createElement(index$3.Heading, { tag: "h4" }, heading),
-                !(isMobile && hideDescOnMobile) && description && (React__default["default"].createElement(index$4.Text, { size: "p4" }, description))),
+                heading && React__default["default"].createElement(index$2.Heading, { tag: "h4" }, heading),
+                !(isMobile && hideDescOnMobile) && description && (React__default["default"].createElement(index$3.Text, { size: "p4" }, description))),
             React__default["default"].createElement(core.Flex, { gap: core.rem(8), sx: {
                     button: {
                         minWidth: core.rem(120),
@@ -634,7 +638,7 @@ const SideBannerModal = (_a) => {
     const curBannerHeight = (viewportWidth * mobileBannerRatio.height) / mobileBannerRatio.width;
     const minHeightNha = (viewportHeight <= 667 ? 190 : 265) + curBannerHeight + 74;
     const [isFullScreen, setIsFullScreen] = React.useState(false);
-    return (React__default["default"].createElement(index$7.Modal, Object.assign({ styles: (theme) => ({
+    return (React__default["default"].createElement(index$6.Modal, Object.assign({ styles: (theme) => ({
             header: {
                 display: 'none',
             },
@@ -700,7 +704,7 @@ const SideBannerModal = (_a) => {
                         overflowY: 'auto',
                         borderRadius: 'inherit',
                     } },
-                    React__default["default"].createElement(index$5.Button, Object.assign({ variant: "white", leftIcon: React__default["default"].createElement(core$1.Close, null), sx: {
+                    React__default["default"].createElement(index$4.Button, Object.assign({ variant: "white", leftIcon: React__default["default"].createElement(core$1.Close, null), sx: {
                             position: 'absolute',
                             right: 0,
                             top: 0,
@@ -740,7 +744,7 @@ const SideBannerModal = (_a) => {
                         modalRatio.width) *
                         100}%`,
                 } },
-                React__default["default"].createElement(index$5.Button, Object.assign({ variant: "white", leftIcon: React__default["default"].createElement(core$1.Close, null) }, closeProps, { onClick: () => modalProps === null || modalProps === void 0 ? void 0 : modalProps.onClose(), sx: {
+                React__default["default"].createElement(index$4.Button, Object.assign({ variant: "white", leftIcon: React__default["default"].createElement(core$1.Close, null) }, closeProps, { onClick: () => modalProps === null || modalProps === void 0 ? void 0 : modalProps.onClose(), sx: {
                         position: 'absolute',
                         right: 0,
                         top: 0,
@@ -760,7 +764,7 @@ const PremiumNewsletterModalContext = React.createContext({});
 
 const _NormalTopic = (_a) => {
     var { value, name } = _a, rest = tslib_es6.__rest(_a, ["value", "name"]);
-    return (React__default["default"].createElement(index$2.ChipButton, Object.assign({ value: value, withIcon: true }, rest, { buttonProps: {
+    return (React__default["default"].createElement(index$1.ChipButton, Object.assign({ value: value, withIcon: true }, rest, { buttonProps: {
             styles: () => ({
                 leftIcon: {
                     marginRight: core.rem(6),
@@ -803,7 +807,7 @@ const TopicSection = ({ topicsGroup, onTopicChange, isBlock = false, selectedTop
         }
     };
     return (React__default["default"].createElement(core.Stack, { spacing: 12 }, topicsGroup.map((i, idx) => (React__default["default"].createElement(core.Stack, { key: String(idx), spacing: 12 },
-        i.label && (React__default["default"].createElement(index$4.Text, Object.assign({ size: "s5", color: "gray.4", weight: "semiBold" }, labelProps), i.label)),
+        i.label && (React__default["default"].createElement(index$3.Text, Object.assign({ size: "s5", color: "gray.4", weight: "semiBold" }, labelProps), i.label)),
         hasScroll ? (React__default["default"].createElement(core.ScrollArea, { w: "100%", offsetScrollbars: true, scrollbarSize: 4, p: 16, m: -16, styles: {
                 viewport: {
                     margin: -16,
@@ -820,7 +824,7 @@ const Layout = (_a) => {
     var { heading, children, stickyActions } = _a, scrollAreaProps = tslib_es6.__rest(_a, ["heading", "children", "stickyActions"]);
     const { isMobile } = React.useContext(PremiumNewsletterModalContext);
     const content = (React__default["default"].createElement(core.Stack, { spacing: core.rem(24), sx: { height: '100%' } },
-        React__default["default"].createElement(index$3.Heading, { tag: "h4", style: {
+        React__default["default"].createElement(index$2.Heading, { tag: "h4", style: {
                 textAlign: 'center',
             } }, heading),
         React__default["default"].createElement(core.Box, null, children)));
@@ -902,7 +906,7 @@ const MainForm = () => {
         setFormValues(formValues);
         _onSubmit === null || _onSubmit === void 0 ? void 0 : _onSubmit(formValues.name);
     };
-    const MoreButton = React.useMemo(() => (React__default["default"].createElement(index$5.Button, { variant: "tertiary", dataEventCategory: "Newsletter", dataEventAction: "More Category Click", dataEventLabel: currentUrl, leftIcon: React__default["default"].createElement(core$1.Plus, { size: 16, color: 'currentColor' }), onClick: onMore, styles: (theme) => ({
+    const MoreButton = React.useMemo(() => (React__default["default"].createElement(index$4.Button, { variant: "tertiary", dataEventCategory: "Newsletter", dataEventAction: "More Category Click", dataEventLabel: currentUrl, leftIcon: React__default["default"].createElement(core$1.Plus, { size: 16, color: 'currentColor' }), onClick: onMore, styles: (theme) => ({
             root: {
                 borderRadius: core.rem(6),
                 padding: '2px 15px',
@@ -921,15 +925,15 @@ const MainForm = () => {
                 marginRight: '5px',
             },
         }) },
-        React__default["default"].createElement(index$4.Text, { size: isMobile ? 'p3' : 'p4' }, t('home.seeMore')))), [form$1]);
+        React__default["default"].createElement(index$3.Text, { size: isMobile ? 'p3' : 'p4' }, t('home.seeMore')))), [form$1]);
     React.useEffect(() => {
         form$1.setFieldValue('fitnessTopics', selectCategory.map((i) => i.catId));
     }, [selectCategory]);
     return (React__default["default"].createElement("form", { style: { height: '100%' }, onSubmit: form$1.onSubmit(onSubmit) },
         React__default["default"].createElement(Layout, { heading: t('healthToolPNModal.heading'), stickyActions: React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(index$5.Button, { fullWidth: true, type: "submit", dataEventCategory: "Newsletter", dataEventAction: "Register Click", dataEventLabel: currentUrl, loading: submitLoading, sx: { maxWidth: core.rem(240) } }, t('healthToolPNModal.register'))) },
+                React__default["default"].createElement(index$4.Button, { fullWidth: true, type: "submit", dataEventCategory: "Newsletter", dataEventAction: "Register Click", dataEventLabel: currentUrl, loading: submitLoading, sx: { maxWidth: core.rem(240) } }, t('healthToolPNModal.register'))) },
             React__default["default"].createElement(core.Stack, { spacing: core.rem(16) },
-                React__default["default"].createElement(index$2.Input, Object.assign({ label: t('newsletter.welcome.description') }, form$1.getInputProps('name'))),
+                React__default["default"].createElement(index$1.Input, Object.assign({ label: t('newsletter.welcome.description') }, form$1.getInputProps('name'))),
                 React__default["default"].createElement(TopicSection, { topicsGroup: [
                         ...(pnSuggestCategory.length === 0 &&
                             interestedTopics.length === 0
@@ -989,13 +993,13 @@ const _SuggestedTopic = React.forwardRef(function SuggestedTopic(_a, ref) {
         React__default["default"].createElement(core.Group, { noWrap: true },
             React__default["default"].createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
                 React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.97887 8.15493C2.97887 5.29627 5.29627 2.97887 8.15493 2.97887C11.0136 2.97887 13.331 5.29627 13.331 8.15493C13.331 11.0136 11.0136 13.331 8.15493 13.331C5.29627 13.331 2.97887 11.0136 2.97887 8.15493ZM8.15493 1.5C4.47951 1.5 1.5 4.47951 1.5 8.15493C1.5 11.8303 4.47951 14.8099 8.15493 14.8099C9.72615 14.8099 11.1702 14.2653 12.3086 13.3547L15.2376 16.2837C15.5264 16.5725 15.9946 16.5725 16.2833 16.2837C16.5721 15.9949 16.5721 15.5267 16.2833 15.238L13.3544 12.3091C14.2652 11.1705 14.8099 9.72634 14.8099 8.15493C14.8099 4.47951 11.8303 1.5 8.15493 1.5Z", fill: "#8C8C8C" })),
-            React__default["default"].createElement(index$4.Text, { size: "p3" }, label))));
+            React__default["default"].createElement(index$3.Text, { size: "p3" }, label))));
 });
 
 const _Topic = React.forwardRef(function Baby(_a, ref) {
     var { label } = _a, others = tslib_es6.__rest(_a, ["label"]);
     return (React__default["default"].createElement("div", Object.assign({ ref: ref }, others),
-        React__default["default"].createElement(index$4.Text, { size: "p3" }, label)));
+        React__default["default"].createElement(index$3.Text, { size: "p3" }, label)));
 });
 
 const HistorySection = ({ history, onDelete }) => {
@@ -1005,7 +1009,7 @@ const HistorySection = ({ history, onDelete }) => {
                 height: 32,
                 background: '#ffffff',
                 padding: '5px 12px',
-                border: `1px solid ${index$2.themeColors.neutral[4]}`,
+                border: `1px solid ${index$1.themeColors.neutral[4]}`,
                 borderRadius: 32,
                 textTransform: 'unset',
             },
@@ -1014,7 +1018,7 @@ const HistorySection = ({ history, onDelete }) => {
                 cursor: 'pointer',
             },
         } },
-        React__default["default"].createElement(index$4.Text, { size: "p4" }, h.localName))))));
+        React__default["default"].createElement(index$3.Text, { size: "p4" }, h.localName))))));
 };
 
 const RecentlyViewedSection = ({ topics, onTopicChange, isBlock = false, selectedTopics, labelProps, maxSelect = 5, }) => {
@@ -1047,7 +1051,7 @@ const RecentlyViewedSection = ({ topics, onTopicChange, isBlock = false, selecte
     if (!topics || topics.length === 0)
         return null;
     return (React__default["default"].createElement(core.Stack, { spacing: 12, px: 16, mx: -16 },
-        React__default["default"].createElement(index$4.Text, Object.assign({ size: "s5", color: "gray.4", weight: "semiBold" }, labelProps), t('pnTopicSection.recentView')),
+        React__default["default"].createElement(index$3.Text, Object.assign({ size: "s5", color: "gray.4", weight: "semiBold" }, labelProps), t('pnTopicSection.recentView')),
         React__default["default"].createElement(core.Chip.Group, { value: value.map((v) => v.catId), onChange: onValueChange, multiple: true },
             React__default["default"].createElement(core.Flex, { gap: 8, wrap: 'wrap' }, topics.map((v, i) => (React__default["default"].createElement(_NormalTopic, { key: i, value: v.catId, name: v.localName, isBlock: isBlock })))))));
 };
@@ -1077,14 +1081,14 @@ const _TopicSlide = (_a) => {
                 React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.66699 9.99984C1.66699 5.39984 5.40033 1.6665 10.0003 1.6665C14.6003 1.6665 18.3337 5.39984 18.3337 9.99984C18.3337 14.5998 14.6003 18.3332 10.0003 18.3332C5.40033 18.3332 1.66699 14.5998 1.66699 9.99984ZM4.75066 10.5827L7.74232 13.5744C8.06732 13.8994 8.60066 13.8994 8.91732 13.5744L15.2423 7.2494C15.5673 6.9244 15.5673 6.3994 15.2423 6.0744C14.9173 5.7494 14.3923 5.7494 14.0673 6.0744L8.33399 11.8077L5.92566 9.40773C5.60066 9.08273 5.07566 9.08273 4.75066 9.40773C4.59461 9.56342 4.50692 9.7748 4.50692 9.99523C4.50692 10.2157 4.59461 10.427 4.75066 10.5827Z", fill: "#2D87F3" }),
                 React__default["default"].createElement("path", { d: "M7.74224 13.5772L4.75057 10.5856C4.59453 10.4299 4.50684 10.2185 4.50684 9.99808C4.50684 9.77765 4.59453 9.56627 4.75057 9.41058C5.07557 9.08558 5.60057 9.08558 5.92557 9.41058L8.33391 11.8106L14.0672 6.07725C14.3922 5.75225 14.9172 5.75225 15.2422 6.07725C15.5672 6.40225 15.5672 6.92725 15.2422 7.25225L8.91724 13.5772C8.60057 13.9022 8.06724 13.9022 7.74224 13.5772Z", fill: "white" })))),
         React__default["default"].createElement(core.Box, { sx: { borderRadius: '8px' } },
-            React__default["default"].createElement(index$2.AspectRatio, { ratio: 3 / 2, mb: 10, sx: (theme) => ({
+            React__default["default"].createElement(index$1.AspectRatio, { ratio: 3 / 2, mb: 10, sx: (theme) => ({
                     background: theme.colors.neutral[0],
                 }) },
                 React__default["default"].createElement(core.Box, null,
                     React__default["default"].createElement("img", { src: topic.guid || '', alt: "cat", loading: "lazy", style: {
                             maxHeight: '63px',
                         } })))),
-        React__default["default"].createElement(index$4.Text, { size: "p4", ta: "center", px: 6, sx: {
+        React__default["default"].createElement(index$3.Text, { size: "p4", ta: "center", px: 6, sx: {
                 display: '-webkit-box',
                 '-webkit-line-clamp': '2',
                 '-webkit-box-orient': 'vertical',
@@ -1144,7 +1148,7 @@ const TrendingCarousel = ({ topics, selectedTopics = [], onTopicChange, isBlock
     };
     return (React__default["default"].createElement(core.Stack, { spacing: 10 },
         React__default["default"].createElement(core.Flex, { justify: 'space-between', align: 'center', w: "100%" },
-            React__default["default"].createElement(index$4.Text, Object.assign({ size: "s5", color: "gray.4", weight: "semiBold", span: true }, labelProps), t('pnTopicSection.trending'))),
+            React__default["default"].createElement(index$3.Text, Object.assign({ size: "s5", color: "gray.4", weight: "semiBold", span: true }, labelProps), t('pnTopicSection.trending'))),
         React__default["default"].createElement(core.Box, null,
             React__default["default"].createElement(core.ScrollArea, { type: "always", w: "100%", offsetScrollbars: true, scrollbarSize: 4, px: 4, viewportRef: containerRef, viewportProps: {
                     onMouseDown: handleMouseDown,
@@ -1261,7 +1265,7 @@ const PremiumTopicSelect = (_a) => {
     });
     return (React__default["default"].createElement(core.Stack, Object.assign({ spacing: core.rem(16) }, rest),
         React__default["default"].createElement(core.Stack, { spacing: core.rem(8) },
-            React__default["default"].createElement(index$4.Text, { size: "p3" }, t('pnTopicSection.maxSelectError.detail', {
+            React__default["default"].createElement(index$3.Text, { size: "p3" }, t('pnTopicSection.maxSelectError.detail', {
                 max: maxSelect,
                 maxTopic: uniqueTopic.length,
             })),
@@ -1277,7 +1281,7 @@ const PremiumTopicSelect = (_a) => {
                         fontSize: 12,
                         lineHeight: '18px',
                         textTransform: 'uppercase',
-                        color: index$2.themeColors.gray[4],
+                        color: index$1.themeColors.gray[4],
                         '&::after': { display: 'none' },
                     },
                     searchInput: {
@@ -1286,7 +1290,7 @@ const PremiumTopicSelect = (_a) => {
                     input: {
                         paddingRight: 16,
                     },
-                }, nothingFound: React__default["default"].createElement(index$4.Text, { size: "s4", color: "gray.6" }, t('pnTopicSection.notFound')), itemComponent: searchValue === '' ? _SuggestedTopic : _Topic, size: "lg", placeholder: t('pnTopicSection.plsEnterFavTopics'), data: options, onSearchChange: onSearchChange, searchValue: searchValue, icon: React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+                }, nothingFound: React__default["default"].createElement(index$3.Text, { size: "s4", color: "gray.6" }, t('pnTopicSection.notFound')), itemComponent: searchValue === '' ? _SuggestedTopic : _Topic, size: "lg", placeholder: t('pnTopicSection.plsEnterFavTopics'), data: options, onSearchChange: onSearchChange, searchValue: searchValue, icon: React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
                     React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.97183 10.8732C3.97183 7.0617 7.0617 3.97183 10.8732 3.97183C14.6848 3.97183 17.7746 7.0617 17.7746 10.8732C17.7746 14.6848 14.6848 17.7746 10.8732 17.7746C7.0617 17.7746 3.97183 14.6848 3.97183 10.8732ZM10.8732 2C5.97268 2 2 5.97268 2 10.8732C2 15.7738 5.97268 19.7465 10.8732 19.7465C12.9682 19.7465 14.8936 19.0205 16.4115 17.8063L20.3168 21.7116C20.7018 22.0966 21.3261 22.0966 21.7111 21.7116C22.0961 21.3266 22.0961 20.7023 21.7111 20.3173L17.8059 16.4121C19.0203 14.894 19.7465 12.9684 19.7465 10.8732C19.7465 5.97268 15.7738 2 10.8732 2Z", fill: "#595959" })), rightSection: React__default["default"].createElement(React__default["default"].Fragment, null), zIndex: 500, searchable: true, withinPortal: true, onChange: (val) => onValueChange(val), value: [] }),
             uniqueTopic && uniqueTopic.length > 0 && (React__default["default"].createElement(HistorySection, { history: uniqueTopic, onDelete: onDelete }))),
         React__default["default"].createElement(core.Box, { sx: (theme) => ({
@@ -1332,8 +1336,8 @@ const MoreTopics = () => {
                 paddingRight: core.rem(25),
             },
         }, stickyActions: React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(index$5.Button, { fullWidth: true, variant: "secondary", dataEventCategory: "Newsletter", dataEventAction: "Back  Click", dataEventLabel: currentUrl, onClick: prevStep }, t('healthToolPNModal.back')),
-            React__default["default"].createElement(index$5.Button, { fullWidth: true, type: "submit", dataEventCategory: "Newsletter", dataEventAction: "Next  Click", dataEventLabel: currentUrl, onClick: handleOnSubmit, loading: submitLoading }, t('healthToolPNModal.next'))) },
+            React__default["default"].createElement(index$4.Button, { fullWidth: true, variant: "secondary", dataEventCategory: "Newsletter", dataEventAction: "Back  Click", dataEventLabel: currentUrl, onClick: prevStep }, t('healthToolPNModal.back')),
+            React__default["default"].createElement(index$4.Button, { fullWidth: true, type: "submit", dataEventCategory: "Newsletter", dataEventAction: "Next  Click", dataEventLabel: currentUrl, onClick: handleOnSubmit, loading: submitLoading }, t('healthToolPNModal.next'))) },
         React__default["default"].createElement(PremiumTopicSelect, { isLoggedIn: isLoggedIn, maxSelect: maxSelectCategory, values: formValues.fitnessTopics, onChange: setSelectCategory, labelProps: {
                 size: 's5',
                 sx: {
@@ -1352,7 +1356,7 @@ const Result = () => {
             }, 400);
         };
     }, []);
-    return (React__default["default"].createElement(Layout, { heading: t('healthToolPNModal.heading'), stickyActions: React__default["default"].createElement(index$5.Button, { fullWidth: true, sx: { maxWidth: core.rem(300) }, dataEventCategory: "Newsletter", dataEventAction: "Continue Reading Click", dataEventLabel: currentUrl, onClick: () => {
+    return (React__default["default"].createElement(Layout, { heading: t('healthToolPNModal.heading'), stickyActions: React__default["default"].createElement(index$4.Button, { fullWidth: true, sx: { maxWidth: core.rem(300) }, dataEventCategory: "Newsletter", dataEventAction: "Continue Reading Click", dataEventLabel: currentUrl, onClick: () => {
                 close();
             } }, finishLabelOnResult || t('healthToolPNModal.finish')) },
         React__default["default"].createElement(core.Stack, null,
@@ -1366,8 +1370,8 @@ const Result = () => {
                     React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
                         React__default["default"].createElement("path", { d: "M9.99984 18.3334C14.6022 18.3334 18.3332 14.6025 18.3332 10.0001C18.3332 5.39771 14.6022 1.66675 9.99984 1.66675C5.39746 1.66675 1.6665 5.39771 1.6665 10.0001C1.6665 14.6025 5.39746 18.3334 9.99984 18.3334Z", fill: "#00B16A" }),
                         React__default["default"].createElement("path", { d: "M9.58558 12.6674C9.22944 12.668 8.87668 12.5983 8.54752 12.4623C8.21835 12.3264 7.91925 12.1268 7.66732 11.8751L6.68587 10.8931C6.55607 10.7587 6.48424 10.5787 6.48587 10.3919C6.48749 10.2051 6.56243 10.0263 6.69455 9.89422C6.82667 9.7621 7.00539 9.68716 7.19222 9.68554C7.37906 9.68391 7.55906 9.75574 7.69345 9.88554L8.67491 10.8675C8.79344 10.986 8.93415 11.08 9.08902 11.1442C9.24389 11.2083 9.40987 11.2413 9.5775 11.2413C9.74513 11.2413 9.91111 11.2083 10.066 11.1442C10.2208 11.08 10.3616 10.986 10.4801 10.8675L16.7033 5.24335C16.8443 5.12184 17.0272 5.06032 17.213 5.07195C17.3987 5.08358 17.5726 5.16744 17.6973 5.30558C17.8221 5.44373 17.8878 5.6252 17.8805 5.81118C17.8731 5.99717 17.7933 6.17291 17.6581 6.30081L11.4592 11.8998C11.2128 12.1448 10.9205 12.3387 10.5989 12.4705C10.2774 12.6022 9.93304 12.6692 9.58558 12.6674Z", fill: "white" }))),
-                React__default["default"].createElement(index$4.Text, { size: "p3" }, disclaimerText || t('pnModal.disclaimer'))),
-            React__default["default"].createElement(index$3.Heading, { tag: "h5" }, t('healthToolPNModal.yourPre')),
+                React__default["default"].createElement(index$3.Text, { size: "p3" }, disclaimerText || t('pnModal.disclaimer'))),
+            React__default["default"].createElement(index$2.Heading, { tag: "h5" }, t('healthToolPNModal.yourPre')),
             selectCategory.length > 0 && (React__default["default"].createElement(TopicSection, { topicsGroup: [{ label: '', topics: selectCategory }], selectedTopics: selectCategory, readonly: true })))));
 };
 
@@ -1398,10 +1402,10 @@ const PremiumNewsletterModal = ({ isMobile, isLoggedIn, pnSuggestCategory = [],
                 },
                 method: 'POST',
                 data: {
-                    ga_client_id: Cookies__default["default"].get(index$1.GA_TOKEN_COOKIE),
+                    ga_client_id: Cookies__default["default"].get(index$7.GA_TOKEN_COOKIE),
                     client_ip: window.clientIP || '',
                     user_info: Object.assign(Object.assign({}, acquisitionInfo.userInfo), { name: name || formValues.name, type_subscription: 1 }),
-                    domain: index$1.domainLocales[locale || index$8.LOCALE.Vietnam],
+                    domain: constantsDomainLocales.domainLocales[locale || Locale.LOCALE.Vietnam],
                     category: selectCategory,
                     perferred: acquisitionInfo.preferredTopics.map(({ id }) => ({
                         id,

package/build/index-e8d0d01b.js

@@ -0,0 +1,180 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-a7663f7d.js');
+var React = require('react');
+var core = require('@mantine/core');
+var form = require('@mantine/form');
+var LastPeriod = require('./LastPeriod-1f403d10.js');
+var index$2 = require('./index-848c257f.js');
+var index$1 = require('./index-d97f9371.js');
+var index$3 = require('./index-4184d8d6.js');
+require('./index-353ce6f8.js');
+var useTranslations = require('./useTranslations-ec613f5a.js');
+require('@mantine/hooks');
+require('./index-3ae93a30.js');
+require('./index-e0d59d3e.js');
+require('./utils-7effa670.js');
+require('./useMantineLocale-30235874.js');
+require('./index-1f94d57c.js');
+require('./other-b4596d33.js');
+var index = require('./index-d1fb44a6.js');
+var other = require('@hhgtech/icons/other');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const AvoidPregnancy = (_a) => {
+    var { isMarryBaby, size = 24 } = _a, rest = tslib_es6.__rest(_a, ["isMarryBaby", "size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return isMarryBaby ? (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("path", { d: "M16.5 27.133c1.298 0 2.596-.149 3.868-.447a9.15 9.15 0 0 0 6.818-6.818 16.94 16.94 0 0 0 0-7.736 9.15 9.15 0 0 0-6.818-6.818 16.94 16.94 0 0 0-7.736 0 9.15 9.15 0 0 0-6.818 6.818A17 17 0 0 0 5.367 16a.867.867 0 0 1-1.734 0c0-1.43.165-2.862.494-4.264a10.88 10.88 0 0 1 8.109-8.11 18.7 18.7 0 0 1 8.528 0 10.88 10.88 0 0 1 8.11 8.11 18.7 18.7 0 0 1 0 8.528 10.88 10.88 0 0 1-8.11 8.11 18.7 18.7 0 0 1-4.264.493.867.867 0 0 1 0-1.734", fill: "#3E3F58" }),
+        React__default["default"].createElement("path", { d: "M12.5 16a4 4 0 1 1 8 0 4 4 0 0 1-8 0", fill: "#fff" }),
+        React__default["default"].createElement("path", { d: "M11.633 16a4.867 4.867 0 1 1 9.734 0 4.867 4.867 0 0 1-9.734 0m4.867-3.133a3.133 3.133 0 1 0 0 6.266 3.133 3.133 0 0 0 0-6.266m-4 9.8a2.667 2.667 0 1 1-5.333 0 2.667 2.667 0 0 1 5.333 0", fill: "#3E3F58" }),
+        React__default["default"].createElement("path", { d: "M10.305 22.195c.26.26.26.683 0 .943l-1.91 1.91c-.36.36-.562.847-.562 1.355a3.25 3.25 0 0 1-1.796 2.907l-1.239.62a.667.667 0 1 1-.596-1.193l1.238-.62a1.92 1.92 0 0 0 1.06-1.714c0-.862.342-1.688.952-2.298l1.91-1.91c.26-.26.682-.26.943 0", fill: "#3E3F58" }),
+        React__default["default"].createElement("path", { d: "M3.874 4.788a1 1 0 0 1 1.414-1.414l23.099 23.098a1 1 0 1 1-1.415 1.415z", fill: "#E85388" }))) : (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("g", { clipPath: "url(#clip0_1530_7251)" },
+            React__default["default"].createElement("path", { d: "M8.983 10.87a.23.23 0 0 1 .049-.16c.08-.114.156-.229.207-.36.1-.166.168-.348.233-.528.246-.668.397-1.36.508-2.062.036-.235.076-.471.09-.71.065-.511.101-1.024.095-1.541.004-.015.011-.03.011-.044a13 13 0 0 0-.089-1.62c-.023-.196-.093-.335-.298-.406-.293-.1-.48-.316-.568-.615a2.7 2.7 0 0 0-.217-.566c-.123-.222-.29-.391-.54-.47-.057-.018-.088-.016-.106.052q-.045.165-.073.336c-.005.044 0 .058.048.058q.122.005.244.017c.127.009.21.09.202.196-.011.111-.108.179-.239.166-.065-.007-.133-.009-.198-.016-.058-.008-.077.016-.067.072q.027.165.052.332c.006.043.031.053.07.053.078 0 .147-.03.218-.057.104-.042.2-.004.242.093.04.09.004.187-.093.235-.13.063-.27.113-.411.085a.23.23 0 0 0-.235.077c-.04-.084-.106-.146-.167-.211-.46-.475-.55-1.194-.235-1.82.18-.359.45-.627.828-.776A.4.4 0 0 0 8.69.595c.33-.317.734-.477 1.172-.55.641-.11 1.25-.024 1.819.3.41.233.728.566.942.983.131.253.188.535.246.814.16.762.233 1.538.293 2.313q.108 1.411.213 2.826c.055.712.13 1.422.24 2.128.066.428.175.846.26 1.27.097.479.039.941-.24 1.358a1.2 1.2 0 0 1-.517.428c-.163.05-.327.105-.491.155-.178.052-.302-.059-.268-.239a4.6 4.6 0 0 0 .077-.72 13.6 13.6 0 0 0-.133-2.225c-.03-.196-.055-.395-.087-.591-.07-.43-.151-.857-.257-1.28l-.015-.07a16 16 0 0 0-.282-1.03c-.012-.039-.025-.079-.076-.075-.038.003-.053.034-.058.07l-.146 1.105c-.05.219-.094.437-.158.652a5.5 5.5 0 0 1-.806 1.654l-.091.113c-.308.382-.654.719-1.094.95-.122.06-.177.048-.252-.063", fill: "#1B3250" }),
+            React__default["default"].createElement("path", { d: "M12.304 9.435c.1.737.154 1.477.133 2.224a4.6 4.6 0 0 1-.077.72c-.034.182.09.293.268.239q.246-.075.491-.155c.053.226.126.448.17.675q.09.452.129.912c.025.302.043.603.032.905q-.015.483-.065.964a14 14 0 0 1-.299 1.707c-.02.086-.045.17-.065.255-.02.09-.068.12-.16.12L8.789 18H7.781c-.111 0-.117-.011-.13-.124a3 3 0 0 0-.361-1.121c-.132-.235-.297-.448-.415-.692a3.14 3.14 0 0 1-.324-1.521c.233.07.418.001.571-.184q.236-.281.477-.559c.07-.08.136-.164.244-.193.315-.087.631-.166.94-.262.665-.207 1.324-.43 1.917-.804.251-.159.475-.344.595-.63.237-.564.415-1.147.592-1.733.085-.28.184-.55.417-.742", fill: "#2D87F3" }),
+            React__default["default"].createElement("path", { d: "M12.304 9.435c-.233.194-.33.462-.413.74-.177.585-.355 1.169-.592 1.733-.12.286-.344.471-.595.63-.593.375-1.254.597-1.916.804-.312.097-.628.177-.941.262-.11.031-.177.113-.244.193q-.24.277-.477.559c-.153.184-.34.253-.571.184a.87.87 0 0 1-.44-.54.64.64 0 0 1 .045-.503 1 1 0 0 0 .094-.31.47.47 0 0 1 .392-.405c.132-.03.269-.039.404-.053a.4.4 0 0 0 .114-.024c.115-.009.21-.069.31-.12.322-.167.646-.328.966-.497q.586-.308 1.192-.571a.78.78 0 0 0 .473-.524q.09-.305.177-.608c.047-.171.113-.337.14-.514a5.5 5.5 0 0 0 .806-1.654c.064-.215.108-.433.159-.652a.63.63 0 0 1 .342-.054c.08.013.156.036.237.054.105.423.187.85.256 1.28q.039.292.082.59m-4.19-5.947a.23.23 0 0 1 .235-.076c.142.025.282-.022.411-.086.097-.047.133-.143.093-.234-.042-.095-.138-.133-.242-.093-.071.027-.14.056-.218.056-.039 0-.062-.009-.07-.053q-.024-.165-.052-.33-.017-.082.067-.074c.066.008.133.01.198.017.131.013.228-.053.239-.166.01-.105-.073-.187-.202-.196-.082-.006-.162-.015-.244-.017-.046 0-.053-.014-.047-.058.016-.115.043-.224.072-.337.017-.067.05-.069.106-.05.25.078.417.247.54.469.1.178.16.371.217.566.087.298.273.515.568.615.206.07.275.21.298.406.066.539.091 1.08.09 1.62 0 .014-.008.029-.011.043-.272-.016-.525.075-.783.133a1.4 1.4 0 0 1-.513.031.5.5 0 0 1-.433-.36 2.3 2.3 0 0 1-.091-.46c.154-.024.309-.048.451-.124.1-.055.135-.148.09-.242a.18.18 0 0 0-.24-.084 1 1 0 0 1-.376.087 1.3 1.3 0 0 0-.326-.482c-.096-.093-.096-.215-.013-.319.06-.07.126-.134.186-.202", fill: "#FCCAAF" }),
+            React__default["default"].createElement("path", { d: "M10.069 7.052c-.013.239-.053.473-.09.71-.11.7-.261 1.394-.507 2.062-.066.18-.135.362-.233.528a.46.46 0 0 0-.235-.4c-.328-.21-.544-.508-.599-.898a.86.86 0 0 1 .242-.742c.237-.244.504-.459.761-.683.188-.162.37-.327.555-.493.033-.031.064-.064.106-.084m.349 2.818c-.025.176-.093.341-.14.513-.057.204-.119.404-.177.608a.78.78 0 0 1-.473.524q-.607.261-1.192.571c-.32.17-.646.33-.966.497-.099.051-.195.111-.31.12.066-.15.177-.266.277-.387.273-.334.615-.596.932-.881q.306-.28.611-.565c.077.11.13.124.251.06.439-.229.787-.567 1.094-.95z", fill: "#2D87F3" }),
+            React__default["default"].createElement("path", { d: "M8.271 4.49a1 1 0 0 0 .377-.088.183.183 0 0 1 .239.084c.047.095.01.187-.09.242-.14.076-.296.1-.45.124z", fill: "#FF6F4D" }),
+            React__default["default"].createElement("path", { d: "M11.96 7.563c-.079-.018-.157-.041-.237-.054a.65.65 0 0 0-.342.054l.146-1.104c.005-.037.02-.068.058-.071.05-.006.063.034.076.074q.159.511.282 1.03.01.036.017.071", fill: "#2D87F3" }),
+            React__default["default"].createElement("path", { d: "M9.834 1.004a7.996 7.996 0 1 0 0 15.992 7.996 7.996 0 0 0 0-15.992M9.465 2.26c1.606-.09 3.191.4 4.467 1.378a.282.282 0 0 1 .03.424l-9.066 9.066a.283.283 0 0 1-.424-.03A6.749 6.749 0 0 1 9.465 2.26m.369 13.49a6.72 6.72 0 0 1-4.016-1.325.284.284 0 0 1-.032-.426l9.046-9.047a.283.283 0 0 1 .427.032A6.75 6.75 0 0 1 9.834 15.75", fill: "#F44D2C" }),
+            React__default["default"].createElement("path", { d: "M10.159 5.509c.005.517 2.997-1.054 2.997-1.054s-.133-1.55-.293-2.313c-.058-.279-.114-.56-.245-.814a2.35 2.35 0 0 0-.943-.983c-.568-.324-1.178-.41-1.818-.3-.44.073-.843.233-1.173.55a.4.4 0 0 1-.147.085c-.379.15-.648.417-.828.776-.315.626-.224 1.345.235 1.82.062.065.127.127.167.21a.23.23 0 0 1 .235-.076c.142.028.282-.022.411-.085.097-.048.133-.144.093-.235-.042-.097-.138-.135-.242-.093-.071.027-.14.057-.218.057-.039 0-.064-.01-.07-.053q-.024-.165-.052-.332c-.01-.056.009-.08.067-.072.066.007.133.009.198.016.131.013.228-.055.239-.166.009-.105-.075-.187-.202-.196h-.007q-.118-.013-.237-.017c-.047 0-.053-.014-.047-.058.016-.114.043-.225.072-.336.019-.068.05-.07.106-.051.25.078.417.247.54.47.099.178.16.37.217.565.087.299.275.515.568.615.206.071.275.21.298.406.066.539.091 1.078.09 1.62z", fill: "#1B3250" }),
+            React__default["default"].createElement("path", { d: "M8.107 3.488a.23.23 0 0 1 .235-.076c.142.025.282-.022.411-.086.097-.047.133-.143.093-.234-.042-.095-.138-.133-.242-.093-.07.027-.14.056-.218.056-.038 0-.062-.009-.07-.053q-.024-.165-.052-.33-.017-.082.067-.074c.066.008.133.01.199.017.13.013.227-.053.238-.166.01-.105-.073-.187-.202-.196-.082-.006-.162-.015-.244-.017-.045 0-.053-.014-.047-.058.016-.115.043-.224.073-.337.016-.067.049-.069.105-.05.25.078.417.247.54.469.1.178.16.371.217.566.088.298.273.515.568.615.206.07.275.21.298.406.066.539.091 1.08.09 1.62 0 .014-.008.029-.011.043-.271-.016-.524.075-.783.133a1.4 1.4 0 0 1-.513.031.5.5 0 0 1-.433-.36 2.3 2.3 0 0 1-.091-.46c.154-.024.31-.048.451-.124.1-.055.135-.148.09-.242a.18.18 0 0 0-.24-.084 1 1 0 0 1-.376.087 1.3 1.3 0 0 0-.326-.482c-.096-.093-.096-.215-.012-.319.06-.07.125-.134.185-.202", fill: "#FCCAAF" }),
+            React__default["default"].createElement("path", { d: "M8.265 4.49a1 1 0 0 0 .376-.088.183.183 0 0 1 .239.084c.047.095.01.187-.09.242-.14.076-.296.1-.45.124z", fill: "#FF6F4D" })),
+        React__default["default"].createElement("defs", null,
+            React__default["default"].createElement("clipPath", { id: "clip0_1530_7251" },
+                React__default["default"].createElement("path", { fill: "#fff", d: "M.834 0h18v18h-18z" })))));
+};
+
+const TryConceive = (_a) => {
+    var { isMarryBaby, size = 24 } = _a, rest = tslib_es6.__rest(_a, ["isMarryBaby", "size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return isMarryBaby ? (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 33 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("path", { d: "M14.018 9.155c-1.422 1.066-1.777 1.777-1.067 2.843.57.853 2.133 2.488 3.2 3.554-.712 2.133-6.753 1.422-6.753 1.422l-.711 1.421-1.067 3.199c-1.066 0-3.198.142-3.198.71 0 .712 2.843 2.844 3.554 2.844.569 0 1.658-2.132 2.132-3.199 1.54 1.777 5.474 4.905 8.885 3.199 4.265-2.132 6.398-5.331 5.687-7.819-.274-.959-.284-1.495-.132-1.813a4.62 4.62 0 0 0 3.438-2.3c.715-1.108.78-2.417.397-3.652-.41-1.663-1.15-2.955-2.637-3.252-3.423-.685-6.397 1.016-6.397 4.62a4.6 4.6 0 0 0 .971 2.834c-1.184.316-2.414-.236-6.302-4.611", fill: "#fff" }),
+        React__default["default"].createElement("path", { d: "M29.3 10.825A5.235 5.235 0 0 0 24.077 5.6c-2.876 0-5.245 2.348-5.245 5.224 0 .36.275.634.634.634.36 0 .635-.275.635-.634 0-2.179 1.776-3.955 3.976-3.955s3.954 1.776 3.954 3.955a3.947 3.947 0 0 1-3.531 3.933.8.8 0 0 0-.381-.021c-.042.021-.085.021-.106.042a.64.64 0 0 0-.57.635c0 .254.147.465.359.57.105.487.148.995.148 1.502a7.175 7.175 0 0 1-7.17 7.17 7.22 7.22 0 0 1-5.773-2.898l-.02-.021c.507-.317 1.902-.17 2.41-.106a.637.637 0 0 0 .698-.57.637.637 0 0 0-.571-.699c-1.184-.148-3.384-.38-3.891 1.164-.064.19-.127.401-.19.592-.318.994-.74 2.347-1.27 2.58-.634.063-2.918-1.587-3.172-2.284.212-.275 1.248-.444 2.623 0 .169.063.36.042.507-.064s.275-.232.296-.423c.571-2.707.74-3.278.74-3.299v-.021c.212-.888.867-.973 2.538-.93 1.523.042 3.384.084 4.674-1.46a7.8 7.8 0 0 0 3.235.994h.043a.643.643 0 0 0 .634-.592c.021-.36-.232-.655-.57-.677-4.4-.36-6.028-4.652-6.091-4.842 0 0 0-.022-.022-.022-.274-.634-.063-1.036.19-1.163.17-.105.445-.105.614.17 1.248 2.008 2.432 3.32 3.574 4.018.021 0 .042.02.042.02.677.34 2.052.762 3.596-.295.296-.19.359-.592.169-.889-.19-.296-.592-.36-.889-.169-.951.635-1.776.487-2.305.233-.93-.571-1.988-1.777-3.108-3.574-.508-.783-1.48-1.036-2.284-.613-.762.401-1.312 1.438-.762 2.77.085.254.93 2.368 2.898 3.934a2.7 2.7 0 0 1-.614.486c-.02 0-.02 0-.042-.021-8.205-2.517-8.86-8.586-8.924-9.77a.61.61 0 0 0-.656-.614.63.63 0 0 0-.592.656c.042 1.226.655 7.084 7.74 10.172h-.508c-1.48-.042-3.34-.085-3.806 1.882-.021.106-.17.677-.613 2.707-1.587-.36-3.194-.127-3.574 1.036-.19.55.126 1.206.972 2.01.571.549 2.263 1.902 3.447 1.902.149 0 .297-.02.423-.063.952-.36 1.438-1.544 1.861-2.813a8.48 8.48 0 0 0 6.324 2.855c4.652 0 8.438-3.785 8.438-8.438 0-.507-.043-1.015-.148-1.522a5.264 5.264 0 0 0 4.23-5.16", fill: "#3E3F58" }),
+        React__default["default"].createElement("rect", { x: "23.005", y: "8.444", width: "1.942", height: "1.422", rx: ".711", transform: "rotate(34.869 23.005 8.444)", fill: "#FB8C00" }))) : (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("path", { d: "M13.996 8.62v3.221c1.054.035 1.682-.705 1.845-1.467.209-.977-.444-2.041-1.845-1.754", fill: "#FEAA96" }),
+        React__default["default"].createElement("path", { d: "M14.055 10.67a.21.21 0 0 1-.2-.277c.166-.508.594-.69.92-.644a.21.21 0 1 1-.059.418c-.163-.023-.37.079-.461.358a.21.21 0 0 1-.2.145", fill: "#FF886C" }),
+        React__default["default"].createElement("path", { d: "M2.16 10.374c.162.762.79 1.502 1.844 1.467V8.62c-1.4-.287-2.054.777-1.845 1.754", fill: "#FEAA96" }),
+        React__default["default"].createElement("path", { d: "M3.98 10.67a.21.21 0 0 1-.2-.145c-.093-.28-.299-.381-.462-.358a.21.21 0 0 1-.21-.102.21.21 0 0 1 .152-.316c.326-.046.753.136.92.644a.21.21 0 0 1-.2.277", fill: "#FF886C" }),
+        React__default["default"].createElement("path", { d: "M9 15.831c1.325 0 3.365-.561 4.534-2.292 1.057-1.563.436-4.144.462-5.169.053-2.079-1.447-4.78-4.996-4.78s-5.05 2.7-4.996 4.78c.026 1.025-.595 3.606.461 5.169 1.17 1.73 3.21 2.292 4.535 2.292", fill: "#FECCBF" }),
+        React__default["default"].createElement("path", { d: "M6.881 10.535a.56.56 0 1 0 0-1.121.56.56 0 0 0 0 1.121", fill: "#A35961" }),
+        React__default["default"].createElement("path", { d: "M7.114 9.777a.21.21 0 0 1-.188-.116c-.049-.097-.205-.122-.27-.129-.225-.022-.44.056-.477.104a.211.211 0 1 1-.347-.241c.149-.215.53-.306.831-.285.306.021.533.15.64.362a.21.21 0 0 1-.189.305", fill: "#8C2F39" }),
+        React__default["default"].createElement("path", { d: "M11.119 10.535a.56.56 0 1 0 0-1.121.56.56 0 0 0 0 1.121", fill: "#A35961" }),
+        React__default["default"].createElement("path", { d: "M9 13.329c.777 0 .994-.61 1.046-.92.031-.185-.132-.35-.34-.35H8.293c-.208 0-.371.165-.34.35.052.31.27.92 1.047.92", fill: "#D84023" }),
+        React__default["default"].createElement("path", { d: "M10.763 7.94a.2.2 0 0 1-.107-.03.33.33 0 0 0-.18-.029.21.21 0 1 1-.07-.416.74.74 0 0 1 .464.081.211.211 0 0 1-.107.393m-3.526 0a.21.21 0 0 1-.107-.393.74.74 0 0 1 .463-.08.211.211 0 1 1-.07.415.3.3 0 0 0-.18.029.2.2 0 0 1-.106.029", fill: "#FEAA96" }),
+        React__default["default"].createElement("path", { d: "M10.887 9.777a.21.21 0 0 1-.189-.305c.107-.212.334-.34.64-.362.3-.021.682.07.83.285a.211.211 0 0 1-.346.24c-.038-.048-.252-.125-.477-.103-.065.007-.221.032-.27.129a.21.21 0 0 1-.188.116", fill: "#8C2F39" }),
+        React__default["default"].createElement("path", { d: "M9.284 11.02a.21.21 0 0 1-.22-.15.07.07 0 0 0-.063-.05H9a.07.07 0 0 0-.064.05.21.21 0 0 1-.22.15.22.22 0 0 1-.192-.244c.018-.221.213-.379.476-.379.264 0 .458.158.476.38a.22.22 0 0 1-.192.244", fill: "#FEAA96" }),
+        React__default["default"].createElement("path", { d: "M9.55 12.06h-1.1l-.003.054a.552.552 0 1 0 1.102-.055m2.041-.774-.29.53a.1.1 0 0 1-.041.04l-.53.29a.1.1 0 0 0-.053.09.1.1 0 0 0 .053.09l.53.29q.026.015.04.04l.29.53a.103.103 0 0 0 .18 0l.29-.53a.1.1 0 0 1 .041-.04l.53-.29a.103.103 0 0 0 0-.18l-.53-.29a.1.1 0 0 1-.04-.04l-.29-.53a.1.1 0 0 0-.143-.039.1.1 0 0 0-.038.04", fill: "#fff" }),
+        React__default["default"].createElement("path", { d: "M11.055 2.193c-.147-.422-.524-.698-1.01-.738a.9.9 0 0 0-.535.154c-.206.155-.37.358-.478.592a.036.036 0 0 1-.066 0 1.55 1.55 0 0 0-.475-.592.9.9 0 0 0-.537-.154c-.485.04-.862.316-1.008.739a1.03 1.03 0 0 0 .259 1.09c.479.447 1.156.518 1.543.518h.502c.387 0 1.066-.07 1.545-.517a1.03 1.03 0 0 0 .26-1.092M8.79 3.243a.13.13 0 0 1-.134.135c-.316-.012-.821-.084-1.163-.402a.61.61 0 0 1-.148-.644.66.66 0 0 1 .438-.417c.242-.078.404-.006.456.033.446.33.539.932.551 1.295m1.718-.267c-.342.319-.847.39-1.163.402a.13.13 0 0 1-.135-.135c.013-.362.105-.964.551-1.295a.47.47 0 0 1 .25-.073c.318.027.554.193.645.457a.61.61 0 0 1-.149.644", fill: "#2D87F3" }),
+        React__default["default"].createElement("path", { d: "M8.998 3.338a.21.21 0 0 1 .122.383l-.04.028c-.16.118-.957.76-.991 1.758-.027.78.403 1.132.814 1.202.367.062.831-.096.985-.59a.415.415 0 0 0-.211-.52c-.136-.069-.32-.076-.425.064a.211.211 0 0 1-.337-.253c.215-.287.607-.363.954-.186a.836.836 0 0 1 .422 1.02 1.28 1.28 0 0 1-1.458.88c-.56-.095-1.202-.58-1.166-1.631.046-1.334 1.17-2.093 1.222-2.125a.2.2 0 0 1 .109-.03", fill: "#BA8288" })));
+};
+
+const OvulationFormContext = React.createContext({});
+
+const DefaultLayout = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t } = useTranslations.useTranslations();
+    const { currentUrl, submitProps, form, calculatingMethods, isMobile } = React.useContext(OvulationFormContext);
+    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.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods, label: t('dueDatePage.calculationMethod'), isMobile: isMobile }, form.getInputProps('calculatorType')))),
+        React__default["default"].createElement(index$1.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$2.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$2.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.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const InlineLayout = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t } = useTranslations.useTranslations();
+    const { currentUrl, submitProps, form, calculatingMethods } = React.useContext(OvulationFormContext);
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.calculationMethod'), direction: "column", width: '100%' },
+            React__default["default"].createElement(index.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType')))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel') },
+            React__default["default"].createElement(index$1.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date() }, form.getInputProps('lastPeriodDate')))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.cycleLength') + ' ' + t('ovulationPage.dayUnit') },
+                React__default["default"].createElement(index$2.Input.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength'), { error: null }))),
+            form.errors.cycleLength && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.cycleLength))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.FormRow, null,
+            React__default["default"].createElement(index.HealthToolFormWrapper.BorderInlineControl, { label: t('ovulationPage.periodDuration') + ' ' + t('ovulationPage.dayUnit') },
+                React__default["default"].createElement(index$2.Input.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength'), { error: null }))),
+            form.errors.periodLength && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.periodLength))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
+};
+
+const MbLayout = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    const { t } = useTranslations.useTranslations();
+    const { currentUrl, submitProps, form, calculatingMethods } = React.useContext(OvulationFormContext);
+    return (React__default["default"].createElement(index.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Control, null,
+            React__default["default"].createElement(index$2.Input.Wrapper, { label: React__default["default"].createElement(index$3.Text, { size: "p4", sx: { fontWeight: 'normal' } }, t('dueDatePage.calculationMethod')) },
+                React__default["default"].createElement(index.HealthToolFormWrapper.ChipGroup, Object.assign({ data: calculatingMethods }, form.getInputProps('calculatorType'))))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderBoxControl, { label: t('dueDatePage.lastPeriod.lastPeriodLabel'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
+            React__default["default"].createElement(index$1.DatePicker, Object.assign({ placeholder: "DD/MM/YYYY", popoverProps: {
+                    withinPortal: true,
+                }, maxDate: new Date(), rightSection: null }, form.getInputProps('lastPeriodDate')))),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.cycleLength'), rightSection: t('ovulationPage.dayUnit') },
+            React__default["default"].createElement(index$2.Input.Number, Object.assign({ min: 21, max: 45, defaultValue: 1 }, form.getInputProps('cycleLength')))),
+        form.errors.cycleLength && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.cycleLength)),
+        React__default["default"].createElement(index.HealthToolFormWrapper.BorderBoxControl, { label: t('ovulationPage.periodDuration'), rightSection: t('ovulationPage.dayUnit') },
+            React__default["default"].createElement(index$2.Input.Number, Object.assign({ min: 1, max: 15, defaultValue: 1 }, form.getInputProps('periodLength')))),
+        form.errors.periodLength && (React__default["default"].createElement(index.HealthToolFormWrapper.Error, null, form.errors.periodLength)),
+        React__default["default"].createElement(index.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Ovulation", 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 OvulationForm = (_a) => {
+    var { formLayout = 'default', submitProps, currentUrl, isMobile, onSubmit } = _a, props = tslib_es6.__rest(_a, ["formLayout", "submitProps", "currentUrl", "isMobile", "onSubmit"]);
+    const theme = core.useMantineTheme();
+    const { t } = useTranslations.useTranslations();
+    const isMarryBaby = theme.other.template === 'mb';
+    const form$1 = form.useForm({
+        initialValues: {
+            calculatorType: String(OvulationCalculatorType.trackPeriod),
+            periodLength: 7,
+            cycleLength: 28,
+            lastPeriodDate: new Date(),
+        },
+        validate: {
+            periodLength: form.isNotEmpty(t('validation.error.requiredField')),
+            cycleLength: form.isNotEmpty(t('validation.error.requiredField')),
+        },
+    });
+    const commonProps = Object.assign({ onSubmit: form$1.onSubmit(onSubmit) }, props);
+    const calculatingMethods = [
+        {
+            label: t('ovulationPage.trackPeriod'),
+            value: OvulationCalculatorType.trackPeriod,
+            icon: React__default["default"].createElement(LastPeriod.LastPeriod, null),
+        },
+        {
+            label: t('ovulationPage.conceive'),
+            value: OvulationCalculatorType.conceive,
+            icon: React__default["default"].createElement(TryConceive, null),
+        },
+        {
+            label: t('ovulationPage.avoidPregnancy'),
+            value: OvulationCalculatorType.avoidPregnancy,
+            icon: React__default["default"].createElement(AvoidPregnancy, null),
+        },
+    ];
+    return (React__default["default"].createElement(OvulationFormContext.Provider, { value: { submitProps, currentUrl, form: form$1, isMobile, calculatingMethods } }, 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.OvulationForm = OvulationForm;